040 - Creating a Template that is Kid-Friendly

[shantanubala]

Ok. This is a HUGE day for JKids.

Because today was the deadline, I really wanted to at least have some code for you guys to look at, so I sat down, popped some fresh batteries into the keyboard, and opened up the text editor.

Since I'm posting code, I decided to also address the current state of this project, and the future state as well. So time to write up one of those fancy things.... Roadmaps...

J!Kids Roadmap

Phase 1
This is the phase J! Kids is currently in. The main functionality is still being coded. Much of the code still needs cleanup and bug removal. There are two versions currently available, a simplistic backend used when kids manage and publish content to the site with little adult supervision, and a complex and completely customizable frontend with a CPanel and simulated backend used when a site is run with a lot of adult supervision.

The features of the backend template are a highly simplistic CPanel with only six links, and large fonts with bright vibrant colors.

The frontend carries the same backend interface, but with the added customization of PHP conditionals paired with Joomla's built in template parameters for easy modifications with little code editing. Along with that, the frontend template uses cookies to store CPanel sessions, to allow a person to add a post, go back to the main site, and instead of seeing the normal page, they would resume their CPanel session as though nothing happened. The CPanel is displayed instantaneously because it is loaded in the background IF the user has permission to do so (modifyable in template parameters). The template uses template overrides to modify the content posting interface and supplies a table-less layout for the site.

Phase 1.5
Phase 1.5 is a small step, which is the simple process of brainstorming tasks and other additions to make to the J!Kids suite along with the two templates, the TinyMCE mod, and the language pack.

Phase 2
Phase two uses the backbone of code built in phase one, and cleans it up, makes it more aesthetically and artistically better. Phase two also incorporates the submission of code for the project using GHOP tasks such as icon creation, and other people's contributions. Phase two combines multiple parts into a whole.

Phase 3
Phase three is the final phase for the first full release out of beta, or production status. This is the time for further bug fixes, documentation, cleanup of code, W3C validation, and the important things needed before final release. The themes compliance with IE6's *cough* quirks shall also be implemented here. So far, the theme works in IE6 except for the PNG icons and the images which shall be converted to GIF.

Ok... Now I got that done with I dunno. I guess I just like to see where I am going, write it down, and it seems to put things in better perspective.

Now, without further ado, here's the code! It doesn't look great, and it really isn't supposed to at the moment    I'll improve it when I get the chance. This is more to show off the functionality and what it does, rather than it's rather phugly nature at the moment. I attached it to this post, so download it there. Just install the .zip through Joomla's template manager. Don't forget to check out the template overrides and good ol' template parameters!

Cya, thanks for any advice, and have a happy holiday, no matter what religion you are - a day off is always welcome !
-Shantanu

P.S. Btw, I kinda assumed it'd be ok to go past the deadline... Umm sorry about that. I guess I just made a lot more out of this task than I ever thought I would, but it definately seems like something to maintain and continue to code for.

[AmyStephen]

An elegant javascriptified kid-friendly theme designed with children in mind.

Cool!

OK, I installed it - http://joomlaplace.org/jkids/

And I get an this error: Fatal error: Call to a member function get() on a non-object in D:\VirtualWebsites\JoomlaPlace\JKids\templates\jkids\index.php on line 28

$this->params->get('cPanelPermissions')

I suspect it is because you are not using the baseurl command

From Milkyway
baseurl ?>/templates/system/css/system.css" type="text/css" />

I'll PM you the admin info for this server if you want to install the template there.

Thanks!
Amy

[shantanubala]

Oh, wait... This was bound to happen. I didn't test it at all before I posted it. I'll fix that!

Thanks,
-Shantanu

[AmyStephen]

Thanks, Shantanu. Feel free to use the credentials and site I PM'ed you, too. This is a great, great project. Love your plans.

We have to be careful about the GHOP tasks idea, though. Google is not allowing students to define the tasks, given the possibility of impacting the contest. But, you are certainly welcome to use extensions provided from the GHOP entries and you are welcome to suggest tasks, as others do.

As long as you are showing progress and moving forward we are good. Look forward to seeing this next release!

Amy

[shantanubala]

Thanks for everything! I'm trying to figure this out. I believe it's just a simple problem between templatedetails.xml and params.ini

I'll try and get a bug-fixed clean installable tested version posted tomorrow. It worked through simple FTP file overwriting, but the templatedetails.xml/params.ini could obviously be the cause of an installation error.

As far as GHOP tasks go, wouldn't it be ok if just you or someone else administered and wrote up the task? Regardless of whether I (or any other GHOP contestant for that matter) pitched in the idea?

Both you and Rafa have helped me a lot! Thanks!

-Shantanu

[shantanubala]

Alright! I figured out what was wrong. I forgot to include params.ini in the templatedetails.xml file. D'oh. I'm running through some more testing. Some of the Mootools transition effects work in IE 6 and 7, but do not work in Firefox or Opera 

Since the effects are multiple and simultaneous, the different browsers probably handle Javascript differently.

Because they do not work in the browsers that I've known to love I'll try to find a hack to make the effects achieve the same thing with less of the taxing simultaneous effects.

-Shantanu

[shantanubala]

Alright! More updates! I changed the template to be fully scalable/fluid in typography and width. This allows for greater accessibility and display. I'm also smoothening out the Moo. It'll be ready by tomorrow! The Mootools effects present some different ideas, and I'm testing each. Since sliding all of the elements doesn't work all the time, I'll have to simply make the CPanel appear to be independent and the only element on a page, rather than hide the rest using javascript.

I can just make the CPanel's height REALLY huge to make it *seem* independent
I can slide all the individual elements (works on some browsers and is resource heavy)
I can scroll the CPanel to the windows position to appear as independent, and disallows anyone to scroll farther below - to the actual content.

-Shantanu

[AmyStephen]

Looking forward to it!

[shantanubala]

Alright, I installed it on the joomlaspace website you set up, and it installed well, worked, and is running smoothly. I still need to improve some of the Mootools and the basic visual appearance, but this is what to expect out of the template functionally.

Note the awesome cookies which keeps the CPanel up if the user leaves the page and comes back with the CPanel open.

Please give me some advice, and thanks for any opinions and direction in advance!

-Shantanu

[shantanubala]

Just a thought, but I noticed whilst coding the backend that there is a javascript modalbox in use for this version of Joomla!

I was wondering where I could find some documentation on implementation of this modalbox (or, if the modalbox is created by someone other than Joomla's developers, would there be a website with documentation?). It may change the current setup of J!Kids to a more elegant CPanel launched through a modalbox rather than its current, temporary, clunky state.

If there isn't a native alternative, I'll use smoothbox

Thanks!
-Shantanu


*EDIT - I implemented smoothbox with some success

[AmyStephen]

Rambling and incoherent thoughts

The modal box is Squeezebox. There is a document on how to use it one of the contestants wrote that you could use (although you have gone with smoothbox, very nice.)

I created a jkid id - what level of User group is required for the functionality you are providing?

Also, I loved your simplified TinyMCE editor! Where did it go?

On the "Switch out of JPanel" option, if they are in editor, it keeps the article checked out - locked for anyone else. In prior releases, that would be a huge problem since it stays locked forever - in v 1.5, it is still a problem but it will be unlocked when the session ends, but, still, this does create a bit of a problem.

I like the little Mootools effect for help.

I like the simple blog like appearance of the rolling frontpage and blogs. But, I wonder if that should be done with sample data? Now, the menu option parameters do not match what the template does. I think that might add confusion.

The sample data is TOO MUCH for this simplified interface.

Didn't see any smoothbox use - maybe you are starting with that?

This approach is certainly easier to maintain and makes more sense than the backend approach.

++++

Here's what I suggest for a next step. 

SAMPLE DATA and FRONTEND

Come up with your own sample data and sample configuration so that your menu items produce what you want (rather than making the template overrides ignore the menu item options). Let's assume JKid is 10-12 years old.

#1 - Create a JKid user / same password as the example user. Fill in some example contact information (bearing in mind Internet security for children.)

#2 - Create 1 section (JKids) - 1 category (their username: JKid) - five age-appropriate sample articles (My vacation; My family; etc.)

#3 - Create 1 category (username: JKid) and a few age appropriate weblinks.

#4 - Create mainmenu - include only those items which your JKid can actually completely control from the frontend.

a) Home - Menu Item = Content Calender (Justo's extension)

This will be your frontpage. It will allow you to offer a blog like function for Joomla! - in other words, articles will fall across the page in descending order by date. Limit this to the category for their username (JKid).

b) Contact Me - a link to the contact information for this user (JKid)

In your template overrides - consider Internet safety cautions - don't include anything that could be dangerous

c) Web Links - Limit the menu to their one category (their username-JKid)

Modules

1. Configure Justo's Module for upper left corner. It IS your article navigation, now.

2. Main Menu - left 2nd

3. Login - left 3rd

JPANEL

Now, how and what can your kid update?

1. Articles - bring back the sweet and easy editor! Take out page break if possible. No reason to offer section and category or published or frontpage. That entire "Publishing" section can be removed. Just assume todays date. Assume's it's published if it's saved. Automatically put it into their section/category.

2. Web links - with template overrides, you can now simplify. Do not show category listbox. Make it match their username. How do they change a web link? (We might have to build in functionality, later.)

3. Contact information - again - consider Internet safety cautions - suggest using an adult's email address or don't allow it - don't include "exacting" contact information - that kind of thing. You have the template overrides - so use them to make certain these kids are taken good care of. Also, don't include anything that doesn't make sense (back-end and front-end languages, user editor, help site).


+++++

Then, let's see where it's at. You might be close - very close - to offering multi-kid capability for a family or classroom.

Amy

[shantanubala]

Woah! Thanks for the amazing ideas! I'll start cracking away at that right now ! The sample data IS too cluttered, and you just gave me the little boost to get out of the "creative dead zone" I've been having this weekend. I'll post up what I can in the next few days. I have to go to a wedding (It'd help to know who's getting married  )

BTW, the TinyMCE mod is part of the whole suite/pack/whatever I should call J!Kids. It's still there, but since no changes were made to it, I didn't include it in the .zip file that I posted here. I tried using smoothbox, but it turned into a "on step forward, two steps backward" situation since smoothbox ignores the CSS and Javascript added in the 'head' portion of the page.

For the switching in and out of the CPanel - the switch ONLY works on the main page (I used PHP conditionals) so when a kid is posting something, they cannot switch out. And, since the switch uses the javascript slide feature, the contents of the page remain the same whether or not the CPanel is slided in or out.

As far as overrides go, awesome idea to prevent kid's from posting personal information. I just love the template parameters. It allows easy modifications to permissions, displays, and other options. I don't know why I didn't think of even half of this before, this is just so awesome! (Best ideas since sliced bread?)

Thanks for the very useful, very helpful, and much appreciated comments and tips!
-Shantanu

P.S. The minimal level of user group is set through template parameters on the template's page, but defaults to "authors"

[AmyStephen]

I forgot to give you a link to Justo's extension.  :P

Here's a picture of the calendar:


Good! Glad to hear that fabulous TinyMCE editor is still in the mix.

The Editor does switch in and out. If you open an existing article by clicking the edit button - you can switch out without hitting cancel. NOW, if you can somehow trigger the Cancel logic, then, we're good.

I *love* the slide action - way cool. Just need to keep cool and correct in sync.

Yea - sample content can bring your ideas to live - basically, that's all I suggested.

As you can see, I love this task. So much potential! Keep innovating!
Amy

[shantanubala]

Yeah. Don't be afraid to be critical. I also love this task too. Originally I intended to blaze through a bunch of  tasks and get a check for a few hundred dollars from Google. Now I'm dedicating myself to something that I thought would be a fun time-pass for winter break. Wow. It's amazing how hooked I got by this. Also, this wouldn't be anywhere close to where it is, and where it's going if you and Rafa hadn't pitched in some ideas

The calendar plugin is a great addition.

Just a question, which kind of template would you prefer? Maybe I should make this into a poll.
I was debating either making a lightweight minimalistic template (similar to the way it is now - with only a few images) or making a graphic-heavy template which looks dazzling, but simplistic.... I guess what I'm trying to say is either leave it the way it is, or make a site similar to Twitter or Pownce where the interface is still simplistic, but a large background image and other images added to complement the overall tone of the template. It's a choice that's been bugging me throughout the development of almost every design or template that I've ever made.

So minimalistic and simplistic
Or visual and simplistic

Thanks for any opinions!
-Shantanu

[shantanubala]

Using template overrides I:

Removed the categories and sections
Removed the "Publish"
Removed everything that complicates adding content

I faced a few errors along the way, but finally figured out which code was necessary for the posting process and which code was not needed.

Using CSS and some source code examining, I set the properties for the "image" "pagebreak" and "readmore" buttons to "display:none"

Here's what J!Kids looks like right now when posting content -->

I spent some time thinking about the "contact me" and decided to leave it out. There are just way too many concerns with kids and the internet to begin with.

I'm working on the template a little more. As far as the "cancel logic" goes, upon further source code inspection, javascript is involved, so if I can somehow trigger that javascript upon the page's close, it'd help cease the problem which I have faced before a few times when administering a Joomla site.

I'm making a lot of progress.
Thanks again,
Shantanu

[AmyStephen]

I spent some time thinking about the "contact me" and decided to leave it out. There are just way too many concerns with kids and the internet to begin with.

Shantanu - I think that's smart.

Looking good - thanks for the update!

Amy

[shantanubala]

I created a JoomlaCode.org page for J!Kids. I guess it's more functional and easier to maintain than a forum thread.

http://joomlacode.org/gf/project/jkids/

Look there for frequent updates, I'll post in this thread if there's big or more important updates to consider.

Thanks,
Shantanu

[AmyStephen]

Shantanu -

Excellent idea! Thanks for doing that.

Amy

[mcsmom]

Shantanu -

Great work! Templates  How about adding a documentation file at joomla code? Tell an adult the steps involved in setting up a jkid site and also, how to change back.

[shantanubala]

Wow. You read my mind there. That's just exactly what I was writing up right now - a documentation/instruction manual.

Once I get the first draft of the installation instructions written, I'll post it here.

-Shantanu

[shantanubala]

Oh, BTW Amy.

SAMPLE DATA and FRONTEND

Come up with your own sample data and sample configuration so that your menu items produce what you want (rather than making the template overrides ignore the menu item options). Let's assume JKid is 10-12 years old.

#1 - Create a JKid user / same password as the example user. Fill in some example contact information (bearing in mind Internet security for children.)

#2 - Create 1 section (JKids) - 1 category (their username: JKid) - five age-appropriate sample articles (My vacation; My family; etc.)

#3 - Create 1 category (username: JKid) and a few age appropriate weblinks.

#4 - Create mainmenu - include only those items which your JKid can actually completely control from the frontend.

a) Home - Menu Item = Content Calender (Justo's extension)

This will be your frontpage. It will allow you to offer a blog like function for Joomla! - in other words, articles will fall across the page in descending order by date. Limit this to the category for their username (JKid).

b) Contact Me - a link to the contact information for this user (JKid)

In your template overrides - consider Internet safety cautions - don't include anything that could be dangerous

c) Web Links - Limit the menu to their one category (their username-JKid)

By sample data, do you mean some sort of installable file or .sql database file so the data can be added to any J!Kids site, or just create a "demo" of sorts with that sample data?

Thanks,
Shantanu

[AmyStephen]

I would create the demo environment, first - then output the database as an SQL file that can be used instead of the normal Joomla! content to better demonstrate the capabilities of your template.

Amy

[shantanubala]

Ok. Sounds good. I'll continue writing up the documentation and then work on the database - I'll just have to look into what databse tables to output, and what not to

I'm making some minor tweaks to the templates overall look, which will hopefully make it more appealing  .

Thanks,
Shantanu

[AmyStephen]

Shantanu -

Actually, the sample data part is easy. Just use Joomla! to create the website you want, then, we will talk about how to turn it into sample content. (It's going to be super basic - like creating a backup).  So, don't worry about the database tables, etc. And, when you get to that point, we can talk more.

If you want, you can use that one test site I set up, then, I could help a bit more with these questions and work with you on it. (I can make certain it's backed up, etc.) Whatever works best for you.

Thanks!
Amy

[thomasfedb]

Thats pretty cool, but the GHOP is comming to a close very soon 

I would really suggest you get a JoomlaCode, there very useful, you can see how many peeps download your thing etc...

If you want people to be able to squash bugs !!what fun!! then you should probably set up a SVN (i think joomla code can do that...) and then make accounts for people (nice people like me  , but not people who like to kill code  ...) They can use tortise svn to connect and contribute

btw a demo site would be damn awsome!

[AmyStephen]

Very soon? I think we have until the end of January for tasks to be claimed - and then whatever time is required after that date to conclude the task. Or, am I completely lost?

Amy

[shantanubala]

GHOP ends on February 3rd. Unless two months is a short amount of time

As far as SVN goes, I'm working on it. Like I've said before, it's a lot better for me to just code a backbone first, before we try and get multiple people involved in the process. This is getting complicated to manage - fast. I'm  My winter break is almost over and hopefully I'll get all of this stuff done. Once I have an extensible "core template" which looks good, I, with the help of Justo and whoever else would like to help, will start on adding more functionality. If you scroll up the page a little bit I broke down where the project is going, and currently, I'm still at phase one. Phase two would be "beta" phase three would be "release candidate" and once we complete all the phases we'll have a full release. It'll take a while, and I'm not sure if I'll make it till the end of the competition, but that doesn't really matter at this point - since I already have the admin template finished, which IS the task assignment after all

I created a small, "to the point", installation instruction manual with some screenshots for help.

Joomla! Kids installation instructions
You may have questions about J!Kids, and this is the right place to come. J!Kids makes an ordinary Joomla installation kid-friendly on either the frontend, backend, or both. If you do not have the powerful Joomla CMS, head on over to http://joomla.org/ and give it a try. After installing Joomla, there are still quite a few steps  involved in getting the full J!Kids environment completely set up. Also, just in case you may not know, the term "backend" refers to the administration panel, or control panel of the Joomla site. The term "frontend" refers to the site on the outside, or how it would look to a visitor or normal user. The term "directory" refers to folders.

The Installation of Either the frontend or backend template

  1. Go to and download the latest version of the J!Kids or depending on which interface you wish to modify respectively.
  2. Login to your Joomla administrator account, and go to the "install/uninstall" page as shown below.


  3.  Browse to the  folder in which you downloaded the ".zip" template file and click the "upload file & install" button.
  4. Navigate to the template manager as shown below, and set the "jkids" template as the default by clicking on the star in the upper right corner. This can be changed at any time later on.



The installation of the TinyMCE modification
This installation is slightly more complicated

  1. Open up an FTP client, or whatever you use to access your website's files.
  2. Go to and download the latest version of the J!Kids file.
  3. Using your FTP client, navigate to the directory "/plugins/editors/tinymce/jscripts/tiny_mce/themes/"
  4. The file contains a directory named "modified theme" - that folder contains another folder named "advanced"
  5. Using the folder named "advanced" inside the directory "modified theme", take your FTP client and overwrite the "advanced" folder in your website. This will make the TinyMCE theme look a lot more simplistic without any further modifications. To revert back, redo these steps using the file's "original theme" folder.

I'm still working on it, and have a few more days of winter break. I am delaying the release of Alpha 2 until January 7th, but it'll have quite a few added features, changes, documents, and files.

Thanks for the continued interest, support, ideas, and comments. You guys are awesome!
-Shantanu

[shantanubala]

Alright! I took a look at the javascript behind the cancel logic -->

Code: Select all

function submitbutton(pressbutton) {
	var form = document.adminForm;
	if (pressbutton == 'cancel') {
		submitform( pressbutton );
		return;
	}
	try {
		form.onsubmit();
	} catch(e) {
		alert(e);
	}

	// do field validation
	var text = <?php echo $this->editor->getContent( 'text' ); ?>
	if (form.title.value == '') {
		return alert ( "<?php echo JText::_( 'Article must have a title', true ); ?>" );
	} else if (text == '') {
		return alert ( "<?php echo JText::_( 'Article must have some text', true ); ?>");
	} else if (parseInt('<?php echo $this->article->sectionid;?>')) {
		// for articles
		if (form.catid && getSelectedValue('adminForm','catid') < 1) {
			return alert ( "<?php echo JText::_( 'Please select a category', true ); ?>" );
		}
	}
	<?php echo $this->editor->save( 'text' ); ?>
	submitform(pressbutton);
}

and came up with three lines of awesomeness which solve the checkout problem -->

Code: Select all

window.addEvent('unload', function() {
	submitbutton('cancel')
});

This makes it so that if a kid closes the window, leaves the page, or refreshes the page, the cancel logic is triggered. This leaves me to wonder, if the solution is so simple, why it isn't implemented already. Anyways, just an update.

-Shantanu

P.S. - The template looks a lot better, and I'm still working on the menus - I'll post some screenshots in a little bit.

[gafadi]

didnt see this discussion till now .. looks like a nice project going on here . i am just a joomla site devloper and done around 4-5 sites till now .. i m just 14 .. but the thing is i dont do coding and stuff .. but if i can help around with something that would be great

[shantanubala]

The best way to help for now would be to head on over to the project http://joomlacode.org/gf/project/jkids/, and bug test. I still have some work to do (Like setting up SVN) before people can go ahead and contribute in other ways.

The new version will be released tomorrow evening/night depending on your location.

Thanks,
Shantanu