083 - Create a document entitled "Mootools Tips and Tricks"

[theY4Kman]

I'm Zach Kanzler, I'm a 15 year old programmer with about 5 or 6 years experience in languages spanning from C to Tcl. My favorite language is Python. For the web, I love using PHP for server side stuff, and there's nothing else besides Javascript on the client side (But I'm not complaining  ). I've been using Mootools for a while now, using it in CMSs to file upload forms.

My task is to write up a page with Tips and Tricks on using Mootools with Joomla! It should include some Firefox extensions and sites on the web to help with learning and scripting in Javascript. It should also share some resources on the Mootools site that would help. Once I've gotten all of that, I'll type it up in an OpenOffice document.

Task Source:

Code: Select all

One line summary
Create a document entitled "Mootools Tips and Tricks"

Description
Explain how to begin using Mootools in a Joomla! v 1.5 environment. Share
several Firefox Extensions and Web Resources helpful when working with and
learning Javascript. Share resources available on Mootools website. Explain
several possibilities for Joomla! and Mootools.

Resources include:

    * Help! I Don't Know Javascript;
    * Strict Doctype
    * Mootools;
    * Forums;
    * Demos;
    * Docs. 

Documentation written for this task must be made available under the
Joomla! Electronic Documentation License.

Skills Needed
Ability to install XAMPP, download and install Joomla! on a localhost using
default data. Ability to review software and identify features. Good Open
Office Writer and communication skills.

Difficulty
Moderate.

Work Product
Attractive, correctly written explanation. Use logo and color scheme.

Extra Credit (optional)
Provide a brief explanation why it is helpful to the Joomla! project to
keep the Powered by Joomla! link and encourage the community member to
display it proudly!

Show how to create an image to replace the header image using Gimp.

Time Limit
3 weeks. 

Claimed: Dec 04 Due: Dec 25

Google Task

[me=AmyStephen]Changed subject slightly for sorting all threads to match against Google resource  [/me]

Read this paper at Google Docs

[ianmac]

Welcome!  Let us know if we can help at all!

We're looking forward to seeing what you come up with!

Ian

[AmyStephen]

Welcome to Joomla! and thanks for participating in the GHOP contest. Please read GHOP Contestants Please Read: Task Process Start to Finish.

Open source communities are collaborative. It would be great if you shared your progress every few days and asked for help and input on your work.

Good luck with the contest,
Amy

[theY4Kman]

Thanks for the sunny replies! I was away for the weekend, leaving me without a way to work on the task. However, I'm back and I've been working a little bit on it. I'm not too sure on how I'm going to structure the paper, but I've started writing on installing Firefox and a few extensions. I was just wondering if there were any addons I missed: http://docs.google.com/Doc?id=dfs6rhvx_4v3jxhcj. I felt it would be easier to just use Google Docs, so anyone could look at it.

[theY4Kman]

Well, I finished it, but it still kinda looks incomplete to me: http://docs.google.com/Doc?id=dfs6rhvx_4v3jxhcj

[theY4Kman]

I proofread it and edited the paper. A lot of unnecessary fluff is now out of it, and I think it's completed. Here's the Google Docs link: http://docs.google.com/Doc?id=dfs6rhvx_4v3jxhcj.

Thanks,
Zach

[drmmr763]

I read it, and here are a few things I noticed:

Once Firefox installed and running, install these extensions:

That should read Once Firefox is installed and running...

--

One of the best places to learn web programming, W3Schools, has a tutorial on Javascript, including hundreds of examples.

missing something, try this:

One of the best places to learn web programming is W3Schools; it has a tutorial on Javascript, including hundreds of examples.

--

Thats all I have to say about the grammar stuff. But I have a question, how exactly does one begin to implement MooTools into Joomla!? I'm very interested in using MooTools, so thats why I am asking. (this probably doesn't have to be on the tips and tricks document, I'm just trying to suck information out of you!)

[theY4Kman]

Okay, made those changes in grammar! Thanks! Google Docs Link: http://docs.google.com/Doc?id=dfs6rhvx_4v3jxhcj

I guess I should specify in the paper that it's for Joomla! 1.5. In 1.5, Mootools is included. The document is supposed to show you a few things about how to implement it into your projects.

[AmyStephen]

Explain how to begin using Mootools in a Joomla! v 1.5 environment. Share
several Firefox Extensions and Web Resources helpful when working with and
learning Javascript. Share resources available on Mootools website. Explain
several possibilities for Joomla! and Mootools.

It's going to need a bit more, I think.

The Mootools library is loaded in the Joomla! frontend. How can that be utilized by an end user community?

This is a good intro...

In case you're scratching your head, wondering what to do, here are some ideas:

But instead of only saying this:

Turn the sidebar into an accordion. Only the title of the boxes will be displayed, and the user can click the titles to expand its contents. Accordion Documentation

Show it!

You could fairly easily demonstrate (keystroke - by - keystroke) how one could add an accordion to their article, and split content into sections. That's the kind of information I would hope to find in a Mootools Tips and Tricks document for Joomla! v 1.5.

Use said this very cool comment:

Using Fx.Morph, create a link on the front page that turns articles into larger forms, letting the user easily and quickly access and read them. Fx.Morph Demo

Show that!

Use pictures. Use Joomla!. Show some examples. MooTools is way cool. Help bring it to life for the Joomla! community - thousands and thousands and thousands of websites could be totally cool - all over the planet - if you show how!

Have fun!
Amy

[drmmr763]

I guess I should specify in the paper that it's for Joomla! 1.5. In 1.5, Mootools is included. The document is supposed to show you a few things about how to implement it into your projects.

This I didn't know!

Amy, that is exactly what I would love to learn how to do! my boss would love me if I could do stuff like that for him!

[theY4Kman]

I'll write some code up now, I suppose!

[theY4Kman]

I've been looking around the Joomla! code, the documentation online, and all about Google, trying to find the proper way to include a script tag in the header. I found the JDocument::HTML class, and the addHeadTag function, but I don't know how I would call it. So I read up on all the different types of extensions, but none of them seemed to fit the purpose. I thought modules would work, but they confuse me because I don't know how they're actually displayed on a page.

Does anyone know how to run PHP code without editing the core?

Thanks,
Zach

[theY4Kman]

I think I figured out how to do it, I just don't know how to package it: in a module or plugin? I'm guessing I should use a plugin, because I'll need the events for the Fx.Morph idea, but I still don't know if a module would be better for it. For both of them, though, I'm failing to find an accurate explanation for how they get called on a page. Can anyone help me out?

Thanks again,
Zach

[AmyStephen]

Zach -

I didn't intend for you to create a plugin or a module. That would certainly be a task, in and of itself. Maybe I was wrong. Are there things that an end user can do with MooTools - without creating an extension?

If not, then I think your resource is done - it will be a developer resource to help them find the sites needed to begin creating extensions.

Are there little effects an end user can add within their articles without code?

Amy

[theY4Kman]

I spent about 20 minutes writing up something on how to add ToolTips to an article, only to find out that Joomla! doesn't let you use tags in articles =/

Without tags, there isn't anything you can do without making an extension. After I've completed this, I'll write up another page on how to make an extension that uses Mootools. I hope that makes up for how short this one is :P

I suppose that is all I can do for this task...Here's the Google Docs link (yet again): http://docs.google.com/Doc?docid=dfs6rhvx_4v3jxhcj
I've attached the latest revision of the document, too.

Thanks for all your help,
Zach

[AmyStephen]

Zach -

The script can be added to the template - in the head section. That's easy enough for an end user to do (with instruction.)

Amy

[theY4Kman]

I had figured that if the users able to change templates, then I should use some PHP code that would add the code for all the templates. Any hack will do, I suppose. Give me a few minutes and I'll have it complete!

[AmyStephen]

Backing up a moment, though. The point of the document is to help people understand how they can use those resources you shared to get some cool mootools effects in their sites.

I envisioned things like accordian sliders inside of an article - maybe an FAQ deal.

Or tooltips

Or a specialized menu that slides or bounces.

Without requiring PHP...

Certainly, copying a bit of javascript into the head section of the template is easy enough! That's a copy from here - paste into there instruction.

Here's an example that WordPress people do all the time - Lightbox.

What kinds of things can you think of that can be done with MooTools - that do not require any PHP - but some simply copy this into there instructions to take advantage of MooTools?

Amy

[theY4Kman]

With your previous post, I realized what was meant to be done with the task. I'm certainly not done with the task now, but I've made a start on it now: I wrote a bit on how to use ToolTips in articles. I saw that the Rhuk_milkyway template already had a script for ToolTips, but I wanted the reader to experience what was necessary to do for other projects.

If you read my paper, do you use the download link or Google Docs?

[AmyStephen]

Excellent! It would be really great when v 1.5 rolls to have a few tricks to help end users start using mootools. But, it's uncharted territory - this is a tough task.

Last post, I used Google Docs. I think earlier, I did a download. You have to understand - there are over 130 tasks - it's getting to be a blur.  :P

Thanks for hanging in there - I honestly think I'd be a bit frustrated. I appreciate your diligence.

Amy

[AmyStephen]

Yes.

Love the bit about the article. Who wouldn't want to write about their mom...or, a piece of link in your sock? lol!!!!!!

This is what is needed. 

That's it!
Amy


Edit: One more thing - they can (and should) edit their Template index.php file in the Template Manager.

• Backend Administrator - Select Extensions-Template Manager;
• Click the option button next to the Template you want to edit;
• Click the Edit button at the top of the page;
• Click Edit HTML.

[theY4Kman]

I've amended the steps for using the Template editor in. I've always done the editing of templates with my own editor...I never knew there was one built-in! I guess you learn something everyday  I'd like to add some more examples in, but I think I'll pack it in for tonight.
Google Docs link: http://docs.google.com/Doc?id=dfs6rhvx_4v3jxhcj

Thanks for the great suggestions,
Zach

[AmyStephen]

Thank you so very, very much for your patient attitude!

Love this, too - that's really the point!

When you're ready to begin implementing Mootools into your Joomla! project, browse the Mootools demos to discover what it is you wish to implement. All that you see at the Mootools site is possible in Joomla!

I'm very happy YOU took this task. See you later!
Amy

[theY4Kman]

I wrote another tutorial on how to turn the sidebar into an accordion. After writing it, I realized that I just showed them one of the ideas in the "still scratching your head" list. I'd rather the reader learn how to do it than have them scratching their head, wondering how to do it.

A lot of the other examples I'm thinking of get quite advanced very easily. I know that a lot of beginners that read the paper probably won't click the links to the Javascript tutorials, so I'd like to keep it to somewhat novice topics. Until I think up another tutorial, or you think the paper is full enough, here is the latest revision: http://docs.google.com/Doc?id=dfs6rhvx_4v3jxhcj

The Google Doc version is becoming almost unmanageable :P I've had to edit the HTML of it almost every time I update the OpenOffice version. As long as it helps someone somewhere at some time, I'm happy to do it!

Thank you for optimism and helpful attitude. I'm glad I chose Joomla! to help out on
Zach

[theY4Kman]

I've proofread and edited the paper extensively. Hopefully it's done now. I also added in a little visual explanation of arrays, because I thought one of the concepts might be a bit easy to choke on for beginners. I can't update the Google Docs version now, but I've attached the ODT.

I think it's ready for a final review 

[theY4Kman]

Sorry to bump the thread yet again, but I finally finished the Google Docs version. It took me about 30 minutes, but I'm just so glad we're out of school  Here's the link!

Sorry it took so long,
Zach

[AmyStephen]

Zach -

That was WONDERFUL! Exactly what I was hoping would be created.

That is something that "regular people" can easily do - you took Mootools and gave easy instructions for non-technical people to bring it into their very own copy of Joomla! without any code.

Thank you for that.

There are a couple of points:

- the double quotes in the document - “ - are not the quotes that work in the template - " . See if you can correct that or make a note that they change the quotes if cutting and pasting.

- The section "How does all this coding work? Like the Tips example ..." is very geeky and not necessary. Remember your audience. If you want to include it - give it a clear heading - something to the effect of "Only read if you are a geek" - or - "Not necessary - Just interesting" - so that the commoner isn't scared off.

I learned from you.

I'll send a note to the other judges - I accept this as complete with the double quote fix. You can consider the second comment, and make those changes I recommended if you choose.

Amy

[theY4Kman]

Oh, wow, that quote error must have been a recent one, because I made sure all the scripts worked when I wrote them in. Thanks for catching that...It would have been a very nasty thing indeed!

I gave the paper to a friend (non-techie) to see if he could read it, and he told me that with the exception of those explanations, he was okay with it. So, I made sure to add in the warning for the "How does this coding work?" :P

Google Docs

[AmyStephen]

Zach -

You did a great job. Please post your work on your Google task. When it is available there, the task will be closed and you will be free to select another task if you desire.

Thanks so much for your contribution to the Joomla! community!
Amy