040 - Creating a Template that is Kid-Friendly

Google's Highly Open Participation Program tries to get young students into Open Source and Joomla! specifically. Everyone is welcome, there are not limits. You can be a coder, documenter, tester, translator to help out. Jump in and start helping!
AmyStephen
Joomla! Champion
Joomla! Champion
Posts: 7018
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: 040 - Creating a Template that is Kid-Friendly

Post by AmyStephen » Mon Feb 04, 2008 8:02 am

I think he will have this finished well before the five (or so) years it will take before he qualifies for SOC. (I know - even MORE impressive, huh?)  ;)

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 040 - Creating a Template that is Kid-Friendly

Post by shantanubala » Mon Feb 04, 2008 11:07 pm

Amy, all I can say right now is thank you. It's been great. I will definately stay in touch and ask you to help me out whenever I need anything ;)

Also, I'll give thanks to every person who helped (Elin, Max, Rafa, Thomas), every person who took part in GHOP, and congratulations in advance to the person we send to Google HQ :)

-Shantanu
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!

takercena
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Tue Dec 11, 2007 7:23 am

Re: 040 - Creating a Template that is Kid-Friendly

Post by takercena » Tue Feb 05, 2008 7:41 am

Next time send to NASA :p

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 040 - Creating a Template that is Kid-Friendly

Post by shantanubala » Wed Feb 06, 2008 3:00 am

Something I stumbled upon when doing some random searching which made me go "Wow. Imagine using something like this with template overrides...."

http://greghoustondesign.com/demos/mocha/

I'm working up some more ideas for a better backend. There's plenty I can do, and my first stop is making the CPanel an AJAX request rather than sliding-in content.
Next, I'll use the AJAXed CPanel with nested Mootools AJAX to retrieve the content publishing pages dynamically. I'll need to experiment with Joomla!'s flexibility a little more, but it should be possible.

I'm probably not going to make it look like the Mocha UI - It seems too tacky, but there are a few things I have thought of (My mini Mac OSX dock thingy can be used as a sort of "start menu") It's going to be complicated, but since the cancel logic is triggered whenever a person leaves the content publishing area, it's possible.

Right now it's just an idea, and I'm really getting psyched about working on this. The whole Web-App thing can come to life in the backend - where it really matters.

-Shantanu
Last edited by shantanubala on Wed Feb 06, 2008 4:32 am, edited 1 time in total.
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 040 - Creating a Template that is Kid-Friendly

Post by shantanubala » Thu Feb 07, 2008 12:59 am

Awesome, I've got a few AJAX requests working. Now I'm trying to trick the Joomla! core's security (i.e. not allowing direct file access) by using Mootools to get the specific url's. This AJAX is an AMAZING addition to the interface. It really helps smoothen it out and feel more like a word processor than a web site.

I'm just trying to think of ways to not break the back-button. (Maybe attempt it GMail style and use "#blah" style urls.)

I'll get a beta of the Ajaxified version in a little bit. I still need to work on some of the code and experiment with Joomla!'s tolerance for remote requests.

-Shantanu
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 040 - Creating a Template that is Kid-Friendly

Post by shantanubala » Fri Feb 08, 2008 3:16 am

Alright! I managed to boil down the code to a single chunk of Mootools goodness. Of course, this is untested, but in theory, it should work. The only thing the Mootools has a little tiny problem which complicates this code a *lot*. It doesn't allow me to request a certain div. This makes the AJAX slightly harder to correctly work through.

Code: Select all

window.addEvent ('domready', function () {
	$$('.CPanelLinks').each(function(el) {
		el.addEvent('click', function(e){
			e = new Event (e).stop();
			var url = el.href;
			var div = el.rel;
			$(div).setHTML('<img src="/templates/<?php echo $this->template ?>/images/loading.gif"> Loading...');
  			new Ajax(url, {
    			method: 'get',
    			update: div,
    			evalResponse: true
  			}).request();
		});
	});
});
EDIT:

After looking through a few different sites on methods to approach this, I found this (I'm not really sure about it yet, but I'll do some more code hunting and dissecting):

Code: Select all

onComplete:function(r)
    {
    //It sets the type property of the script tag, 
    //then puts the script body inside of the element (between the opening and closing script tags),
    //then injects into the head of the page
	var script = new Element('script')
    script.setProperty('type','text/javascript');
    script.setHTML(r);
    }
EDIT:EDIT: The AJAX WORKS!!! w000t! Of course, for a shot in the dark, it didn't work perfectly (look at the screenshot below).

Image

EDIT:EDIT:EDIT: Apparently I ran into the problem that I had predicted (wow) - and the AJAX cannot request for a certain element for a page.... Still makes me wonder how this extension works - http://extensions.joomla.org/component/ ... Itemid,35/
Last edited by shantanubala on Fri Feb 08, 2008 4:14 am, edited 1 time in total.
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!

justo.derivera
Joomla! Intern
Joomla! Intern
Posts: 56
Joined: Tue Dec 11, 2007 2:35 am
Location: Madrid, Spain

Re: 040 - Creating a Template that is Kid-Friendly

Post by justo.derivera » Fri Feb 08, 2008 5:02 pm

That's awesome shanatu, can't wait to to see the beta version 8)

Do you have Skype or other IM program? I could explain you how I did the AJAX for the calendar module, it's a bit difficult to explain it here.

Anyway, I will try to explain it here later, as I don't have much time now.

Good work ;)

justo.derivera
Joomla! Intern
Joomla! Intern
Posts: 56
Joined: Tue Dec 11, 2007 2:35 am
Location: Madrid, Spain

Re: 040 - Creating a Template that is Kid-Friendly

Post by justo.derivera » Fri Feb 08, 2008 6:49 pm

Okay, here is how the AJAX of the blog calendar module works:

When the user clicks the back or foward arrow of the calendar JS script requests the current page with the month variable changed (-1 if the user clicked back, +1 if he clicked forward), and also the variables AjaxCalMod=1 and ajaxmodid=(The module id)

Code: Select all

		ajax.open("POST", location.href, true);
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send('year='+year+'&month='+month+'&ajaxCalMod=1'+'&ajaxmodid='+modid);
This is the code of the view that shows the calendar:

Code: Select all

	<!--calendar-<?php echo $module->id?> start-->

	<?php if(isset($calendar)) echo $calendar ?>

	<!--calendar-<?php echo $module->id?> end-->
The echo $module->id is because there might be more than one calendar in the page, so there has to be a unique identifier for everyone.

When Javascript gets the server response it gets the string between
and , wich is the calendar html source, and updates the module calendar div with that string. Here is the code:

Code: Select all

				var response = ajax.responseText;
				var start = response.indexOf('<!--calendar-'+modid+' start-->');
				var finish = response.indexOf('<!--calendar-'+modid+' end-->');
				
				justTheCalendar= response.substring(start,finish);
				
				var myFx = new Fx.Style('tableCalendar-'+modid, 'opacity').start(0.3,1);  //Change opacity to 1

				document.getElementById( 'calendar-'+modid ).innerHTML=justTheCalendar;
I also did this to make to lower the load times:
At the end of the view script (mod_blog_calendar/tmpl/default.php):

Code: Select all

<?php if($ajax && $ajaxmod==$module->id){ exit(); } ?>
If $ajax is true ($ajax is the value of the AjaxCalMod variable) and $ajaxmodid is the current module, exit() will stop the current script, so it only displays the calendar module and not all the other Joomla content.

I also thought about
shantanubala wrote: trick the Joomla! core's security (i.e. not allowing direct file access)
and make a file that contained only the show the calendar function, and then call that file by AJAX, but I didn't like the idea of messing with the Joomla security.


I hope that helps you. If you don't understand something just ask me ;)

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 040 - Creating a Template that is Kid-Friendly

Post by shantanubala » Fri Feb 08, 2008 10:44 pm

Ok, This is the snippet of code that I was scartching my head for after looking through the Mootools' docs wondering if there was a way to retrieve a particular div. Thank you for posting it!

Code: Select all

var start = response.indexOf('<!--calendar-'+modid+' start-->');
var finish = response.indexOf('<!--calendar-'+modid+' end-->');
Now I'm going to have to check this out.

There's just a lot of stuff that I really can't disclude (i.e. the Joomla! core stylesheets & JS) since it's essentially loading a brand new page. But, I think I can figure this out. I'm just a few inches away from getting the code down. So It may complicate it further to figure out a way to include just the part of the page, and the div with all the content. From the looks of it, your calendar module loads the JS once and for all. The real pain is not only loading the page, but loading the TinyMCE JS, the CSS, and tons of other files associated with switching the page. However, your code examples give me a few ideas. I should be able to chug something out in a few days :)
Last edited by shantanubala on Fri Feb 08, 2008 10:49 pm, edited 1 time in total.
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 040 - Creating a Template that is Kid-Friendly

Post by shantanubala » Sat Feb 09, 2008 1:32 am

After getting the AJAX to work properly, I just realized that AJAX breaks the TinyMCE editor for some odd reason. One step forward, two steps back. Time to figure out what's going on.

I took some special precautions to make sure the JS got included... I'm wondering why it's not getting included.... I'll try and figure this out.
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 040 - Creating a Template that is Kid-Friendly

Post by shantanubala » Sat Feb 09, 2008 4:51 pm

Wow... I feel like such an idiot. After taking a look at the demo, which had SEF url's turned on, the template broke. This is definitely a high-priority bug. I need to fix this :/

I thought the anchor tags in template's weren't affected.... Any idea what's wrong? I bet it's some simple fix that I'm missing.

-Shantanu

EDIT: Ugh... Upon further inspection, a lot more of the demo is broken that I thought.... The database didn't really import perfectly.
Last edited by shantanubala on Sat Feb 09, 2008 4:59 pm, edited 1 time in total.
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!

User avatar
mcsmom
Joomla! Exemplar
Joomla! Exemplar
Posts: 7897
Joined: Thu Aug 18, 2005 8:43 pm
Location: New York
Contact:

Re: 040 - Creating a Template that is Kid-Friendly

Post by mcsmom » Sun Feb 10, 2008 11:08 pm

Hi,

Also, I'm having problems with display in IE after I log in.
So we must fix our vision not merely on the negative expulsion of war, but upon the positive affirmation of peace. MLK 1964.
http://officialjoomlabook.com Get it at http://www.joomla.org/joomla-press-official-books.html Buy a book, support Joomla!.

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 040 - Creating a Template that is Kid-Friendly

Post by shantanubala » Sun Feb 10, 2008 11:46 pm

Yeah... There must be something I added that made it all fall apart. I tested it pretty extensively before, but I have made changes since then.

I'll try and figure it out  :-[

On the bright side, I've made some JS optimizations (slight, but they help in the long run). I'm still figuring out ways to further implement the OOP side of Moo.

BTW: IE6 or 7?


EDIT: After checking my test site, there is a huge problem with IE -- ugh. When did this all of a sudden fall apart....

EDIT:EDIT: After running some tests with IE, it's not a CSS problem (it's in the HTML). Just need figure out which part.

EDIT:EDIT:EDIT: Firefox/Firebug tell me the HTML renders fine in standards mode, there's no CSS errors, and the JS is fine. Now I have no idea where to even start or look for the fix. Darn. I'll keep looking if there's anything out of the ordinary, but this is a really important bug to fix. I have added some code to make the template standards compliant (can't believe I left some stuff out like alt tags for images). If anyone has a suggestion feel free to look through this (the index.php of the template):

Code: Select all

<!-- J!Kids Joomla template and synthetic backend interface
Licensed under the GNU GPL (see README.txt)  -->
<?php
	defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head id="theheadofpage">
<jdoc:include type="head" />

<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" /> <!--joomla's native styles-->
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" /> <!--joomla's native styles-->
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> <!--the stylesheet for jKids-->

<?php $menu = &JSite::getMenu(); 
	if ($menu->getActive() == $menu->getDefault()) { 
		$userattr = JFactory::getUser();
		$condition = $userattr->get('gid'); 
		if($condition >= $this->params->get('cPanelPermissions')) { ?> 
			<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/cpanel.js" />
			<?php if($this->params->get('miniPanel') == 'display') { ?>
			<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/minipanel.js" />
		<?php };
	};
}; ?>

</head>

<body>

<div id="topsection">
	<?php $menu = &JSite::getMenu(); 
	if ($menu->getActive() == $menu->getDefault()) { 
		$userattr = JFactory::getUser();
		$condition = $userattr->get('gid'); 
		if($condition >= $this->params->get('cPanelPermissions')) { ?> 
	<div id="cpanelcont">
		<div id="cpanel" class="<?php echo $this->params->get('controlPanel'); ?>">
			<h2>Welcome to the CPanel!</h2>
			<a href="index.php?option=com_user&view=login&Itemid=24"><img alt=" " src="templates/<?php echo  $this->template ?>/images/famfamfam/lock_delete.png"/>Logout</a>
			<a class="cplink" id="cpanellink2"><img alt=" " src="templates/<?php echo  $this->template ?>/images/famfamfam/house.png"/>Switch Off CPanel</a>
			<h5><a id="helplink">What do you want to do? Do you need help?</a></h5>
			<a id="link" href="index.php?option=com_content&view=article&layout=form&Itemid=51" class="<?php echo $this->params->get('addPost'); ?>_cpanel"><img alt=" " src="templates/<?php echo  $this->template ?>/images/famfamfam/book_add.png"/>Add a Post</a>
			<a id="link1" href="index.php?option=com_weblinks&view=weblink&layout=form&Itemid=52" class="<?php echo $this->params->get('addLink'); ?>_cpanel"><img alt=" " src="templates/<?php echo  $this->template ?>/images/famfamfam/link.png"/>Add a Link</a>
		</div>
	</div>
	<h4><a id="cpanellink" class="<?php echo $this->params->get('cPanel'); ?>"><img alt=" " src="templates/<?php echo $this->template ?>/images/famfamfam/group_key.png"></img>Click Here to Switch On CPanel</a></h4>
	<?php };
	}; ?>
	<h1><a href="<?php echo JURI::root(); ?>"><?php echo $mainframe->getCfg('sitename');?></a></h1>
	<div id="shadow"></div>
</div>

<div id="fullpage">
	<div id="sidecont">
		<?php if($this->countModules('left')) : ?>
			<div id="sidebar">
				<div class="inside">
					<jdoc:include type="modules" name="left" style="xhtml" />
				</div>
			</div>
		<?php endif; ?>
	</div>

	<div id="wrap">
	<?php
		$userattr = JFactory::getUser();
		$condition = $userattr->get('gid'); 
		if($condition >= $this->params->get('cPanelPermissions')) { ?> 
		<div id="minipanel" class="<?php echo $this->params->get('miniPanel'); ?>">
			<a class="<?php echo $this->params->get('addPost'); ?>" href="index.php?option=com_content&view=article&layout=form&Itemid=51"><img alt=" " id="gt1" src="templates/<?php echo  $this->template ?>/images/gartoon/post.gif" /></a>
			<a class="<?php echo $this->params->get('addLink'); ?>" href="index.php?option=com_weblinks&view=weblink&layout=form&Itemid=52"><img alt=" " id="gt2" src="templates/<?php echo  $this->template ?>/images/gartoon/link.gif" /></a>
			<a href="index.php"><img alt=" " id="gt3" src="templates/<?php echo  $this->template ?>/images/gartoon/home.gif" /></a>
			<a href="index.php?option=com_user&view=login&Itemid=24"><img alt=" " id="gt4" src="templates/<?php echo  $this->template ?>/images/gartoon/lock.gif" /></a>
		</div>
		<?php }; ?>
		<div id="thecontent">
			<div class="inside">
				<jdoc:include type="module" name="breadcrumbs" style="none" />
				<jdoc:include type="component" />
			</div>
		</div>
	</div>
	
	<div id="footer">
		<div class="inside">
			<?php echo JText::_('Powered by') ?> <a href="http://www.joomla.org">Joomla!</a> <?php echo JText::_('and') ?> Joomla! Kids.
		</div>
	</div>
</div><!--end of fullpage-->

</body>
</html>
Last edited by shantanubala on Mon Feb 11, 2008 12:48 am, edited 1 time in total.
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!

User avatar
e-motiv
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 168
Joined: Sun May 06, 2007 12:33 pm
Contact:

Re: 040 - Creating a Template that is Kid-Friendly

Post by e-motiv » Mon Mar 31, 2008 1:13 pm

shantanubala, I wonder whether my problem in this post is related to yours. I think in that line with addEvent/"domready", lies the problem. If you search on the forum, you can also find out it has something to do with handling a "hastip" before the html code has finished writing or so..There is even a M$ knowledge article about it.

http://www.e-motiv.net Professional web development <== e-motiv ==> Spin off web projects http://attic.e-motiv.net

deafbiz
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 117
Joined: Sun Aug 28, 2005 3:09 am

Re: 040 - Creating a Template that is Kid-Friendly

Post by deafbiz » Mon Mar 31, 2008 1:36 pm

Is this project completed or still a work in progress?

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 040 - Creating a Template that is Kid-Friendly

Post by shantanubala » Mon Mar 31, 2008 10:29 pm

It is a work in progress. Actually, I'm focusing back on the backend a little more, because I didn't like how the frontend lacked proper customizability.

I'm busy, but I am making a less simplistic and more flashy backend interface at the moment.

I'm attacking this one step at a time, and the new backend should be completed in a week or so.

Thanks for the interest!

and e-builds, I will look into that.

-Shantanu
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 040 - Creating a Template that is Kid-Friendly

Post by shantanubala » Sun Jun 08, 2008 4:40 pm

I realized that I had practically abandoned this project over the rather stressful period of final exams.

Here's some news:

The frontend template will be depracated
The backend will receive a major rework
The other components are going to be on hiatus

I'm focusing on the backend specifically because there are too few templates available for it, and I believe it should be just as customized and personalized as the frontend.

I feel stupid having left this thing in the dark, especially since I had put a ton of work into it.

From now on, I'm trying to focus more on an "alternative" backend style rather than necessarily one for kids. The lack of backend overriding limits the usability of Joomla! considerably, and it seems rather pointless to continue trying to hack the system - so, I'll try and make a menu interface that is enjoyable to everyone :)

Now that GHOP is over, and school is over, and I have free time, I am definitely going to take this where I wanted it to go.
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!

User avatar
trombonechamp
Joomla! Explorer
Joomla! Explorer
Posts: 403
Joined: Thu Nov 29, 2007 9:37 pm
Location: Minnesota, USA
Contact:

Re: 040 - Creating a Template that is Kid-Friendly

Post by trombonechamp » Sun Jun 08, 2008 4:48 pm

Hooray! Glad to hear it!

Good luck!
Leonard Bernstein for President -
Web Development Services: www.BernsteinForPresident.com
My Software Freedom Blog: Trombonechamp.Wordpress.com

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 040 - Creating a Template that is Kid-Friendly

Post by shantanubala » Sun Jun 08, 2008 11:55 pm

http://joomlacode.org/gf/download/frsre ... ackend.zip

New Update!

It changes much of the aesthetics of the interface, changes bubble.GIF to bubble.gif, removes reliance on <img> tags and switches to css backgrounds for ALL icons, increases the width for better and clearer display when publishing articles, removes some of the rather *bad* coding practices that I used in February, and increases the backend template's awesomeness.
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!

shantanubala
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 141
Joined: Thu Nov 29, 2007 9:41 pm

Re: 040 - Creating a Template that is Kid-Friendly

Post by shantanubala » Sun Aug 31, 2008 7:17 pm

After a lot of thought, I guess it's time to say goodbye to this little project of mine. It just doesn't have enough use for it to be even worth developing further.

I guess it's time to officially deprecate this chunk of code, and figure out how I can make it into something more useful.

I learned a lot from it, but it's time to send it to the recycle bin.

-Shantanu
http://joomlacode.org/gf/project/jkids/ Joomla! Kids - the Project aimed at making Joomla! more kid friendly!


Locked

Return to “Google's Highly Open Participation Contest”