040 - Creating a Template that is Kid-Friendly

[shantanubala]

Phew. I actually made this deadline that I set for myself

Introducing, J!Kids synthetic backend interface version 0.4 Alpha - the last alpha release. The code is posted up on Joomlacode --> http://joomlacode.org/gf/download/frsre ... ontend.zip


Updates!
-Improved look, but remains simplistic and elegant (it's the tag line for a reason )
-Improved Mootools (there were some conflicts with the div id's I used and the ones used in Joomla's core)
-Removal of unnecessary module positions (simplifies the look anyways)
-Moved CPanel which takes much inspiration from Pownce (http://pownce.com/)
-Removal of the "email" "print" and "PDF" icons next to articles
-Added FamFamFam icons
-Removal of unnecessary content-posting interface items
-*An Idea for future releases* - For registration, the "Name" field would be hidden (for privacy?)

I guess that's all.... There's probably something I missed. Anyways, Enjoy!

-Shantanu

Oh, BTW
Sweating the small stuff:
Because of the default editor (hefty TinyMCE) is pretty huge in width, it doesn't fit in a 800px wide screen. This causes complications for accessibility (the whole point of J!Kids... Right?) so I went ahead and put in "min-width" and "max-width" css statements for standards-compliant browsers, and used IE conditional statements to cater to the *cough* non standards-compliant browser. I also added cool scalable buttons buttons using Sliding Doors

[AmyStephen]

Shantanu -

When I click that link, I get "Invalid parameters supplied".

I'm going to send you credentials to joomlacode.org/jkids - it would be great if you went ahead and installed your template there for reviews. That way, we can proceed more quickly, I hope.

Thanks!
Amy

[shantanubala]

Oh wow. The link was probably broken since I was logged in at the time I copied/pasted....

Some issues, however, with the installation of the template -

# Template Install: Another template is already using directory: "D:\VirtualWebsites\JoomlaPlace\JKids\templates\jkids"

The "jkid" user you provided me the credentials for can't set the default template to something other than jkids (so I can uninstall/reinstall)

BUT

If you want to see a working demo right now, I PMed you the credentials for the testing site that I set up. Log in through the frontend login box, and test it out!

Thanks,
Shantanu

P.S. I'm working on the sample data

[shantanubala]

Ok, here's a status update.

I've started with a clean, fresh, install of Karibu, and am starting to create my own sample data.
I've worked through Justo's module and - it works well. I'll just experiment with a few layouts.
I've tweaked the template a little bit and added some tabbed navigation to simplify it a little more.
I've added some more CSS to remove discrepancies, improve scalability, and not break the tabs and buttons.
I'm adding a few more template parameters to improve some customization with the template (I want to give the user the option to have tabbed navigation or not).

By the way Amy, did you ever get to test the template? I'm anxious to see what you think. You are probably swamped with the sheer amount of GHOP tasks.

Thanks,
Shantanu

[trombonechamp]

Wow!  Bugtesting can be fun! 

Some things I noticed.  This probably seems like a lot.  Change the things you want to, dump the rest.  (Please forgive me, I haven't been active this thread, so some of the things I say may be repeats)

-Both the templates installed fine, but I got a "no XML setup file in the package" error when installing the tinymce extension.
-The different phrases seem to run into each other.  Could you separate them with a | ?
-It took me a while to figure out what "CPanel" was.  Since it is for kids, you may want to name it "Do More", "Write Articles", "More options", or something similar.
-It looks like a lot of text.  Kids don't want to read; they want to look at pictures.  Do you think it would be possible add some pictures as icons next to the text, or just replace the text all together?
-There isn't a link to the user manager, the module manager, etc. in the jKids admin template.  The only way to get to this is by adding "option=com_users" to the url.  You might be able to keep it under "options"
-I like that "do you need help" feature in the admin template!

I registered a bug on your tracker, but now I am wondering if I should post them on here instead.  Which would you prefer?

I have a demo site anyone (Amy included  ) can use if they want to test this out.  User: jkid password: jkid
[EDITED - Deleted, so it doesn't get indexed by google] (sorry, I used this site for screenshots for my documentation project before, so there is a little bit of junk on there)

This looks great so far!!! 
Max

[shantanubala]

The reason you get the error on the TinyMCE mod is because it's not an installable package (yet ) - it's a modification (i.e. upload/overwrite some files) I'll take the blame for that one, it's not your fault Max. I should give some proper documentation and instructions for this (it's complicated).

The module manager and things I realized are pointless. It'd simply complicate things beyond what it should be, and if someone wanted those options, then they should simply use the default template. This may sound blunt, but I guess what I'm trying to say is, a young kid isn't going to use the module manager. This was created for the easy addition of content, and initial setup should anyways be done by parents.

As far as the massive amount of text, that is due to the fact that Joomla!'s backend doesn't have template overrides or anything, for that matter, to change that. The frontend is a lot simpler when you install the sample data that I'm writing up right now.

The different phrases running into each other - I'll just add some padding to the CSS class.

As far as demo site goes, I've got two demo sites (on the same server) - one for sample data, and one for template testing. Thanks for the offer, but as of now, I'm not 100% sure where Amy wants me to add in the templates. She set up a demo site for testing, and gave me some credentials, but my user doesn't have access to the template manager - that complicates things a little

Thanks for the opinions, I love to hear them. I'll be sure to fix everything and get ready for a beta release in a few days.

Thanks,
Shantanu

EDIT/P.S. - Max, It'd be great to post on the tracker or on the forums. I really need to get the JoomlaCode thing a lot more organized. It's really cluttered and clunky right now. I also have to thank you for bringing my attention back to the admin template. I was so focused on the frontend that I almost abandoned that.

BTW, Amy, I've got the sample data ready. Just need to export it. It's only 3 very random articles that I made up off the top of my head, but after looking at Joomla's default sample data, I guess that's what all sample data is like.

[trombonechamp]

The module manager and things I realized are pointless. It'd simply complicate things beyond what it should be, and if someone wanted those options, then they should simply use the default template.

For the user manager, I disagree.  This kid tells all of their friends about their new site, and wants to add them.  It would be a pain for the parent to go in and change the template for every one of the child's new friends.

Two more things I noticed:
-The CPanel only shows up on the homepage.  When I was on another page, I wanted to get to the CPanel, but couldn't find it.  I realized that it only showed up on the homepage, but kids might not.  It only takes up a couple pixels; why not include it!?! 
-The "Powered by Joomla!" footer is gone!  How come? 

I can tell how much work you have put into this.  It looks amazing! 

[shantanubala]

Oh I discluded some PHP.. I'll add in the Powered By Joomla! - Thanks for the tip - it REALLY helps.

The CPanel only shows up on the main page due to the fact that say a kid is publishing content, it was an added check to make sure they don't accidentally leave the page without hitting cancel (I'm not 100% sure if my crude mootools patch-on works yet). Also, it's on the Home Page to optimize other pages, as well as to maximize the use of Mootools Cookies (i.e. Kid enters CPanel, adds a post, returns home. The homepage will have the CPanel displayed by using the cookie, but not display it on pages such as the content publishing page.) It's hard to explain, but it makes the template more consistent and makes the cookies flow a little more. I might be able to make a template parameter out of it later. That wouldn't be too hard.

As far as themes go, it is intended to be the default theme. This makes all users set with a higher permission level than what the administrator selects in template parameters sees the CPanel.

Thanks for your input Max, it helps.

I also wrote up a quick documentation. Feel free to look through and make changes. It's a rough draft for now, and isn't a top priority, but it's still a great thing to have. Downlaod them here http://www.box.net/shared/cu67ky1ogg

Thanks,
Shantanu

[shantanubala]

Amy, I've finished the sample data. Is there a simple "export" utility or something?

I'm just wondering what exactly to do to take that sample data and export it.

I'm also trying to make some progress on the language pack. The code is self explanatory, but the simplifying of the language is tough. Now I know what the translators must be going through as they make native language translations...

I added some slight changes to the template, made it fully scalable (after much debating with myself). Max, I fixed the Powered By Joomla!

I'll keep you updated
-Shantanu

[shantanubala]

-It looks like a lot of text.  Kids don't want to read; they want to look at pictures.  Do you think it would be possible add some pictures as icons next to the text, or just replace the text all together?

Wow. Max. After doing the install-uninstall test I realized that the entire "images" directory didn't extract from the archive :/

Going to have to figure that one out. The files are listed in the XML...

Solved! The admin interface has images again

[AmyStephen]

I went ahead and installed the Templates at http://joomlaplace.org/jkid

Added test data and a few extensions.

I PM'd you the FTP and Site logons, again. Feel free to logon as "Sally" or the Super Admin and have your way with it.

With any other judges want access,  please let me know. Especially Elin as this was her submitted task.

It has come together quite nicely.

Editor:
1. I think it would be good to get the extended image manager in there, otherwise, I can't see the kids uploading images.
2. Consider how they can embed video. Maybe add back in the HTML button to the editor?
3. I would like to see you create another plugin editor, rather than override Tiny.

Extensions?
1. Search at top?
2. Calendar Blog (styled for template)?
3. Comments?
4. Blog Date?
5. Flickr?

What do you think is the basic pack kids would want?

Have you validated?

It's late, but I wanted to drop a few comments off here before I crash.

This one makes me think. There is a lot of potential in here. You have done an amazing job. Like how you handle the articles with the sliding control panel.

Talk later.
Amy

[shantanubala]

Ok, thanks for the tips.

What I'm currently working on (Ok, I was planning on making it a surprise, but since it's taking some time to flatten the bugs, I'll go ahead and tell ya ) is a "CPanel module" of sorts. It puts the CPanel wherever a person wants it. I'm trying to work out the Javascript and all, but it's slowly coming together.

Since all your suggestions revolve around the editor, I was really anyways considering changing that once I had the chance. This is really a rough sketch for what is to come. I'm looking for ways to code my own WYSIWIG editor, or atleast use the code from tiny and modify it to fit my needs. As far as uploading images goes, it took me some time to think about that. I'll probably look for a way to simplify the uploading process - because from previous Joomla! experience, I don't really like it's built in image manager :/

As far as extensions go, I believe they all have their own respective documentations, so rather than including them in the download, I was thinking of linking to them.

Validation is really weird. When I put in the raw template code with no PHP, it validates, but as soon as I use the test page with Joomla!'s output, it completely gets thrown off. But, it does render fine in all commonly used browsers last I checked (FireFox, IE 6/7, Opera, and Safari)

And gosh, there's just really no time to this contest is there? I wish it were a little longer so I can finish up the seven Joomla! extensions I'm juggling at the moment :/ but to tell you the truth, this is definately something to continue developing. It has potential, just like Joomla! in its early days, or Mootools, Ubuntu, or just about anything before it hits prime-time. I've really decided to myself that this contest isn't going to be a thought on my mind anymore. It's not like I have any prizes to claim, or anything to win. So why bother sticking to the contest's short timeline? Well, there isn't any reason. So, I'll submit my work for final review soon, and the templates are complete and stable, but the rest of Joomla! Kids is still in the works. The language pack needs revamping. The editor has multiple methods of taking shape. I could create my own TinyMCE spinoff with added functionality, or maybe even create my own WYSIWYG editor using Mootools. Heck, with Justo's implementation of the MetaWeblog API I could probably make a desktop application or an edit to the ScribeFire FireFox extension as a "cherry on top." I couldn't possibly accomplish all of this in two months, let alone *a majority* of my own work. The contest rules don't allow major contributions to tasks to be made by other people's work, or otherwise "It should be your own work, and not someone else's. If you are stuck, you can ask for help." That's not Open Source. Doc Camp was the real eye-opener for me. At this point I've got multiple mixed emotions about this contest in general. Google dangled a carrot in front of my head, and quite frankly, I'm glad I didn't take a bite. It's been too great of an experience to just quit after two months. It's been to awesome. So T-Shirt and certificate it is, because that's all I want. A souvenir. Something to say "I did this and I'm proud of it." The more I get into this GHOP thing, the more I slowly start disagreeing with it in general. I guess it's something a multi billion dollar corporation such as Google may never understand. May it's their intention to dangle the carrot in front of my head so I'll end up where I am now. I guess it doesn't matter, because I'm liking what I'm doing, and I'll definitely continue doing so.

Huh. I don't know how I got on that tangent...

Anyways....

There's not much time left, so the next post or two will be for final review, after I'm done with the last GHOP version of JKids. Then, I'm not going to be tied to Google's rules.

And Amy, after GHOP ends, I think I may have asked you this question before, but after GHOP, is MIT licensed software usable with Joomla!? I remember some extensions and licensing discrepancies that caused the official SMF bridge to be "illegal" so to speak. So will any OSI certified license work?

There's a lot of work for me to get to on this, so I may not be able to release the CPanel module before final review, but W/E.

I would like to see you create another plugin editor, rather than override Tiny.

I would too, and I will make a standalone plugin. I'm working on wrapping what I have for GHOP purposes, then I can go ahead and work on my own schedule without scrunching for time.

Thank you for everything Amy, and I'll definitely be keeping in contact with you through the course of Joomla! Kids' development.

[trombonechamp]

What I'm currently working on (Ok, I was planning on making it a surprise, but since it's taking some time to flatten the bugs, I'll go ahead and tell ya Wink) is a "CPanel module" of sorts. It puts the CPanel wherever a person wants it. I'm trying to work out the Javascript and all, but it's slowly coming together.

Did you know (you probably did...) that there is a company named CPanel? (http://www.cpanel.net/index.html)  Do you want this name overlap?

At this point I've got multiple mixed emotions about this contest in general. Google dangled a carrot in front of my head, and quite frankly, I'm glad I didn't take a bite. It's been too great of an experience to just quit after two months. It's been to awesome. So T-Shirt and certificate it is, because that's all I want. A souvenir. Something to say "I did this and I'm proud of it." The more I get into this GHOP thing, the more I slowly start disagreeing with it in general. I guess it's something a multi billion dollar corporation such as Google may never understand. May it's their intention to dangle the carrot in front of my head so I'll end up where I am now. I guess it doesn't matter, because I'm liking what I'm doing, and I'll definitely continue doing so.

Moderators: listen closely! 
What I personally think Joomla! should do is set up something similar to what has been set up for GHOP.  Make a bunch of tasks that need to be completed, but open it up to anybody.  I know it is a lot of work to manage, but look at everything that has been done during GHOP!!!  It would help structured people (myself included) find tasks to work on.


The thing I really like about your template is that it is just Joomla! simplified.  It doesn't say "for kids" anywhere, or have a crayon scribble logo at the top showing it is for young kids.  This makes it appropriate to use on older kids, and even on adults with no computer experience.  It triples your user base!  In most other programs with simplified UIs, it is obvious that it was designed for kids under 5.  I didn't know it was possible to make Joomla! any easier to use, but you seem to have done it!  Keep up the good work! 

[mcsmom]

shantanubala and max,

We talk all the time about how to make something like ghop for the future and include the whole community. This have been such a great (though exahausting) experience.  Encouraging collaboration would be one thing I would really like to see. The idea of picking one winner is something we are all very unhappy with.

Elin

[mcsmom]

I went to Amy's install, and I like how it looks a lot.

When I submitted a comment, however, I went to neverland and couldn't get back.

I'm asking this out of ignorance, how big a problem is spam going to be? Do we think kids can manage it?

[shantanubala]

The thing I really like about your template is that it is just Joomla! simplified.  It doesn't say "for kids" anywhere, or have a crayon scribble logo at the top showing it is for young kids.  This makes it appropriate to use on older kids, and even on adults with no computer experience.  It triples your user base!  In most other programs with simplified UIs, it is obvious that it was designed for kids under 5.  I didn't know it was possible to make Joomla! any easier to use, but you seem to have done it!  Keep up the good work!

Max, at one point I was even designing a sort of "crayon scribble" sort of thing to make it appealing to kids, and realized that would a person really wanted something that corny...? Sometimes I think all I've done is take Joomla!'s features and "rehash" them into something new.

Elin, I really see where you're coming from. It's been really exhausting at this point for me too, because a month ago I was trying to get everything done before the deadline. A week from the deadline I'll accept the fact, it's not possible for me. I selected some tough classes this year for school, have martial arts, volunteer at my local elementary school (part of the motivation I got for this task came from this), and I really squish this in a little to much. It annoys my parents to no end. We all have lives to live, and nobody dedicates their entire life to Open Source, rather, a fraction of it. But many parts make a whole, and that's what it's all about. The collaboration with the Joomla! community has been incredible. (For a future GHOP-like event, offer Joomla! shirts as prizes? It's something small, but still something nice)

On a more task-related note, I've abandoned the module idea for now, simply because I realized that it would be pointless when someone could easily add those links to the sidebar anyways. The only difference between the template and the module is the tight knit integration and the built in cancel logic checks to prevent checked out items using template overrides.

The WYSIWYG editor is coming, and I'm basing it off of Tiny, because the wealth of plugins already available for Tiny make it the perfect choice. I'm also researching methods of making my own, or maybe even using the FCK editor. I've made some aesthetic changes to the templates overall, and they will be the focus of my final GHOP release. The language pack has come together, but still is inconsistent in some areas.

Thanks,
Shantanu

Oh, while I was typing Elin, you posted. As far as SPAM goes, it's really up to the adult managing the website whether they want to have comments or not. If so, it may be in the adult's and kid's best interest to only enable those comments for approved and registered users. The goal of Joomla! Kids right now is to allow the flexible and powerful backend to remain intact, while keeping the frontend simple. So, it's up to the person in the back working Joomla! to decide about the comments. Since the comments are an added component anyways, it'd make sense to leave it up to the manager of the site.

[mcsmom]

Sounds great.

This is what I have learned: software is never done. At some point you have to say this is my list of features I am aiming for, this is my list of ly high priority problems, deal with them and be done. There is always another release.

Wilco talks about the 80/20 rule which he says means that when you are 80% to perfect software, then you can release.

There is no such thing as perfect software.

[trombonechamp]

But many parts make a whole, and that's what it's all about. The collaboration with the Joomla! community has been incredible. (For a future GHOP-like event, offer Joomla! shirts as prizes? It's something small, but still something nice)

They could say, "I am part of a whole" on the front!!! 

[shantanubala]

BTW, Amy, the sample data on your demo site is a lot better than what I made  so mind if I use it?

I have an SQL file with my sample data, but I was wondering exactly how the images would get backed up with the articles they're in... Do you know?

I'm still doing some research on the specifics for the editor.

Thanks,
Shantanu

EDIT - I was thinking about the editor, and realized that the current setup is ok for now (temporarily) because when a person uses the TinyMCE mod, they're really just modifying the TinyMCE Theme that's used by default. It's kinda like modifying Rhuk Milkyway - not modifying the actual source. I still would like to make an installable and easily (or easier) deployable package.

[AmyStephen]

I went to Amy's install, and I like how it looks a lot.

When I submitted a comment, however, I went to neverland and couldn't get back.

The comments is something I installed as an add-on. This is not Shantanu's doing. In fact, his site is what should be looked at. It is very beautiful.

Shantanu -- If you IM with Skype (it's free) or IM on Gmail please add me (AmyStephen on Skype or AmyStephen at gmail dot com). I'd like to talk to you this week about the submission of this wonderful work. It is an amazing Template. Yes, your concepts will go beyond the contest and I absolutely would like to keep involved in this with you. This is a rich work and you have accomplished much.

If you have time - add me - let's talk - get the sample data ready - you don't want mine - it's a cut and paste of copyright material from other places. But, we can talk about that, too.

This is a showcase project and you are one amazing student.

Thanks!
Amy

[shantanubala]

Alrighty. Just a day or two away from getting this thing all wrapped up 

I've completed the Minipanel and added some conditional statements to make sure only people with proper permissions see it. The difference between the minipanel and CPanel is that the Minipanel will show up on all pages, not just the main page. In case you don't know what I'm talking about, here's a screenshot. It's a mac-OSX inspired widget-sort-of-thing.



The templates also received some minor tweaks, mostly graphical, but not really noticeable.

I've added some more documentation (a little more). The docs for this are still not newbie-proof, but it's a good start.

The TinyMCE mod is restyled to match the template and I'm adding some of the fabulous Gartoon icons at the moment

I'm working on making the Tiny Mod installable and not a source-hack.

The language packs... Well... Not much progress on those. I'll have to focus on those in a little bit.

But, all in all, I'm going to spend the next day or two setting up the demo site on your Joomla! installation (Amy).

The sample data is pretty much the same as before. Didn't add or change anything, so no big deal there.

Just an Update
-Shantanu

[AmyStephen]

Shantanu -

I think I'll rebuild your demo install from scratch. Do you want to email me a backup of your database? That might be the easiest way to get the sample data loaded.

Thanks!
Amy

[shantanubala]

Ummm... Wow... I'm... Done...

I set up the demo with the blog calendar and yvcomment.

http://joomlaplace.org/jkid/

I'll upload the release to JoomlaCode in a second.

It has been great working with you Amy, and I'll continue bugging you for a while

Thanks!
Shantanu

P.S. Some of the things (like the language pack) and the backend template are not enabled. If the judges want to take a look at them, they need to select them specifically. Amy, you are one of the judges right? So hopefully you can tell them that

[trombonechamp]

I know I am probably just missing something, but what is the login/password to the demo site?

Ummm... Wow... I'm... Done...

It feels weird, doesn't it?

[shantanubala]

I know I am probably just missing something, but what is the login/password to the demo site?

I'll PM the credentials to you.

It feels weird, doesn't it?

Yeah, on one side I'm glad I have one less deadline to deal with, and on the other side, it's... Finished.

Well, if GHOP is around next year I may even consider mentoring. Wouldn't that be fun?

[trombonechamp]

Are you still accepting feedback?  I hope so... 

-On the editor, is there any way to change the text "font family" to "font"?  If not, or if it is a pain, don't bother.
-On the editor, you used the TinyMCE "insert image" button.  Could you change this to the Joomla! 1.5 insert image button?  This is much easier to use.
-In the CPanel, there is a bunch of nothing space below the text.  Is there any way to remove this?
-Also in the CPanel, can you move the "Switch off CPanel" button to the same place the "Switch on CPanel" button is?  I found myself looking for it, even after using this template before.
-Even if you didn't do any of the things I suggested, this would still be one of the coolest Joomla! extensions out there.  This is so exciting!!! 

[shantanubala]

I'm actually working out the switches for the on/off CPanel.

I'm not sure if it'll work out with the Cookies (one of my favorite features in the CPanel) - but I will definately try and work it out.

This isn't the end of Joomla! Kids by any stretch of imagination (I'm going to update it. It's a shame if I abandon this after I've put so much time into it), but I'm really tired today, and I've been delaying an essay that I need to write for English class.

As far as the Tiny's insert image button goes, I'll look into it. As of now the Tiny mod is very much a pre-alpha rough draft of what the thing should look and feel like. There's plenty of room for change on that one.

As far as the nothing space goes, I'll remove some of it. I'm not going to remove all of it simply because the CPanel needs to be seperated from the content. The reason that's there is because it doesn't have the JKids logo which takes up a fair chunk of space.

Thanks!
-Shantanu

EDIT: Just in case there is a need if a formal declaration or something, I'm submitting this for final review. There's only a few hours left to GHOP 

[mcsmom]

Thanks for your amazing efforts, and I'm very excited that you plan to continue to develop this project. I think it is strong already and has incredible potential for the future.

[AmyStephen]

Shantanu -

What can I say? You are one of those really special people who is equally gifted on both sides of your brain. Your creativity is impressive and you use it to easily see things that others miss. AND, you also have exceptional technical and writing skills, too. PLUS, you are an extrovert who interacts well with people. Lots of great gifts all bundled into one package.

You have a great future. I am looking forward to getting to know you better and hopefully continue to work with you on some of these interesting ideas you have.

Thanks so very much for your contributions to the Joomla! community,
Amy

[takercena]

I suggest that Shantanu apply for google summer of code and continue developing this