In a modern web site content offered often go beyond the classic text, as well as the classic images, offering visitors video, audio, podcasts and resources embedded from other services on the web.

Joomla, as an excellent CMS, enables us to achieve all this - and more. Some features are there by default, such as the Media Manager, and to handle other functions there are a lot of third party extensions.

Packt Publishing has recently published an interesting book on the subject, called "Joomla! 1.5 Multimedia".

The 350 pages of the book guide the reader through this area of creating and managing a website, while keeping an eye toward accessibility of content. Here is a brief overview of the chapters of the book.

Chapter 1: Getting Started with Joomla! Multimedia

Introduces the concept of multimedia and explains the kind of files that we can include in our project: text, images, audio, video.

Chapter 2: Managing Your Joomla! Average

It introduces the Media Manager of Joomla and outlines alternative methods for managing files: FTP, FTP via Web and extensions such as eXtplorer and Joomla Flash Uploader.

Chapter 3: Text, Characters, and Fonts in Your Joomla! Site

The typography of a website is a very important element, and this chapter covers the most used fonts on the web and explains how to modify the template to use them. Nowadays there are several techniques by which we can include in a site any font you want - on the contrary, in the past this was a very critical area.
The book explains how to use extensions like Frontend font size adjuster, JsIFR3, capDropper to handle the press.

Chapter 4: Adding and Managing Content Image

Introduces a variety of image formats you can use on the web (GIF, JPEG, PNG, SVG) and explains how to incorporate them into a Joomla site, via the button editor, Media Manager, or by inserting custom HTML code.
The book then talks about how to create collections of images, using extensions for image galleries and slideshows.

Chapter 5: Using Audio in Your Joomla! Website

Then the book talks about audio, introducing the concepts, analyzing the formats and to explore how to insert sound files into a Joomla site.
We are introuced to podcasts, collections of audio files that can be easily inserted into a player such as iTunes and automatically updated.

Chapter 6: Using Video in Your Joomla! Website

This chapter explains video. First, the book intruduces the formats and explains how to put audio-visual file on the site by manually entering the HTML code or by referring to an extension - for example, AllVideos, or RokBox Shadowbox.

Chapter 7: Collaborating with External Sources

Worthy of attention is certainly the possibility of including in your site content made available from external sources.
In case of content that takes up large amounts of bandwidth, this solution saves hosting costs and significantly speeds up the site: the technological infrastructure provided by YouTube, for example, is more than what we have on a shared hosting, so the speed of loading of content will be greater.
We learn about Twitter, Facebook, integration of video, integration with TV and radio, Flickr, sites dealing with weather, SlideShare, RSS and more.

Chapter 8: Joomla! Templates and Multimedia

This chapter briefly introduces the concept of templates and functions, then analyzes some commercial templates and their features, mainly carried out through heavy use of JavaScript.
We're also introduced to the mobile topic, explaining how to build and test a mobile version of its website.

Chapter 9: Joomla! Multimedia Project

The last chapter of the book deals with a case study of implementation of a site, the choice of content structure and the extensions that are better suited to achieve the desired functionality.

Ultimately I think this book is very useful to anyone who wants to create a site using the CMS Joomla. Essential for non-adherents, given the variety of topics it will not be boring even to the most compassed creator of web sites.

In the following slides published on SlideShare, Kevin Hale (@ FOWA Miami 2010) shares a lot of interesting insights about web apps - focusing on his company Wufoo.

Too bad I couldn't find a video of that, but the slides (225!) are really interesting.

Zappos is a company, founded in 1999, that sells shoes and clothes online.

It's the biggest online shoe store, acquired by Amazon last year for $1.2 Billion.

What's up with Zappos? Well, last week I stumbled upon an italian startup blog, called Volgere.

One of their posts was a review of the Zappos Culture Book.

I was somewhat interested in this book, so I read the post and I eventually got to the Zappos Book page, where I read I could get the book for free.

That surprised me, and I ordered it. Not that I really wanted to know about the Zappos culture (altought I have read a lot of good things about that), I was just curious if they were really going to send it to me.

Well, they did.

And they did it in a very special way, read on.

Last week I was also going to order a few english-language books (Rework by 37signals & Linchpin by Seth Godin). I tried Amazon.com, but their shipping prices were too high. Getting my books from America to Italy was going to cost me around 20$ for the "standard shipping" - that means I was going to have my books in 25 days.

I switched to Amazon.co.uk, and being in Europe they had a better shipping price and delivery times.

An express shipping from Amazon.com would have costed me around 35$, not really worth it.

What Zappos did, however, is incredible. Not only they sent me a book for free, but they sent it from America using express shipping: I ordered it on March 1st, and it arrived the 4th! 3 days later, unbelievable.

And, by the way, the book is great and inspiring.

Deliver WOW through service, they made it.

Packt Publishing was so kind to give me a chapter of the newly published book "Joomla 1.5 Multimedia" by Allan Walker, so that i could share it with you.

47 pages of a very interesting chapter - Adding and Managing Image Content.

You can download it now!

After the review of the book "Joomla! 1.5 Customization" and "Joomla! 1.5 Template Design" published in the previous months, Packt Publishing was so kind to send me a copy  of  "Joomla 1.5 Development Cookbook" to review.

Released in September 2009, this book was written by James Kennard, author of the fabulous book "Mastering Joomla 1.5 Extension and Framework Development", a bible for developers using the Joomla 1.5 platform.

The book is essentially a set of recipes, over 130 quick solutions to practical problems, guides and tips to overcome quickly all the obstacles that you may find during the development of extensions and applications that use the Joomla framework.

After two weeks of reading it, the book is already become a must-have companion during the development and planning sessions.

The first chapter presents recipes that introduce JoomlaCode.org and explain how to setup a GPL project hosted by the Joomla servers.

It continues with quick lessons that illustrate SVN and its basic usage.

The book then flows into real development: security, database, using the session and user management using class JUser, the explanation of how Joomla allows the use of Unicode strings while based on a language (PHP) does not support it fully.

It then goes on to talk about CSS, JavaScript, Mootools, user interaction, metadata, PDF, RSS, MIME.

Really useful is the section on the management of the backend administration, followed by an explanation of how the plugins can be used effectively and how to extend the existing functionality using the class JParameter.

The book ends with three chapters which explain:

• How to use the class JObject and how to work with arrays using class JArrayHelper
• How to handle errors using the static class JError and exceptions
• Working with the local filesystem using JFile, JFolder and JPath

You can find more details on the Packt website and download the sample chapter "Keeping Extensions Secure".

Definitely a book to recommend to any professional and amateur developer!

"Joomla 1.5 Customization" is a book edited by Packt Publishing and written by Daniel Chapman, founder of Ninja Forge, a company that produces Joomla Extensions.

The book is a guide to the creation of websites using the Joomla Content Management System, and it is written for people that are not professional developers and want to customize their website and introduce non-standard features.

The book talks about the building of an example site, where the users subscribe annually to have access to specialized information, and they can communicate via comments and forum posts.

The Daniel goal is to teach the reader the basics about customizing existing extensions the way he wants, and integrating them to build a complete website.

The book begins introducing the web technologies involved in a Joomla website: HTML, CSS, PHP, JavaScript, XML, SQL.
The reader is guided through the setup of the tools needed - from the FTP client to the SVN server.

Then begins the website planning: after defining the objectives, we have to find the right extensions for us, and Daniel explains how to do it.

After we have chosen the template we will use on the website, we learn how to customize it to include the logo and personalized graphics we have.

So we switch to a more technical phase: the customization of installed extensions - modules, plugins and components. The discussion is not meant in any way be a complete guide, but describes the modus operandi, so that people can begin to get familiar with the customization of the extensions and not feel scared when it is necessary to make a small change to your site.

The discussion continues with a chapter devoted to identifying and correcting problems with a brief memorandum of common problems followed by recommendations for solving problems through the Web looking for support.

After this, we talk about how to promote your site through search engine optimization and marketing - traditional and modern. It is also explained how to track visits to our site through Google Analytics.

The final chapter is dedicated to monetizing the website, or how to obtain monetary benefits from the popularity of our site: advertising, selling information, products or services.

Ultimately this book is recommended for those who have already taken the first steps with Joomla and want to deepen their knowledge and produce their Web sites supported by the highly valuable explanations contained in this volume.

Thanks to Packt Publishing, here's a great opportunity to win one of the following books:

Joomla! 1.5 Template Design
(published in june 2009)

Joomla! E-Commerce with VirtueMart
(published in march 2009)

Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs
(published in august 2009)

How can I win the book

I've got 3 books to giveaway.

There are 2 ways to enter the competition.

First way

To win one of these, you just have to:

1. Register a (free) account on forum.joocode.com
2. Write a post, writing at the end of it the book you'd like to win

Finish!

The forum post can be a question or an answer to an existing post.

Example (question): "Which is the best Joomla Forum Extension?
P.S. Book: Joomla! 1.5 Template Design"

Example (answer): "Kunena, because... bla bla..
P.S. Book: Joomla! E-Commerce with VirtueMart"

Second way

Retweet the message

RT @joocode: Win a Joomla Book (Template | Ecommerce | Customization) http://tinyurl.com/npj9tz

Es.

RT @joocode: Win a Joomla Book (Template) http://tinyurl.com/npj9tz

Drawing

Friday 11 September 2009, 12:00 the contest ends.

Monday 14 Semptember I will nominate the winners of the competition, using the http://www.random.org/ tools.

Rules

If 20 people choose the book Joomla! 1.5 Template Design and 1 the book Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs, this person will win the book, because he's the only one that chose that book.

The 20 people that chose the first book, however, will have a probability of 1/20.

You can only choose 1 book. If a person writes for more than one book, (s)he will be extracted for the latest book requested.

The printed book will be sent to Europe and USA folks. If you live in a different part of the world, you'll be sent an e-book version of it.

Thanks

Thanks to Packt Publishingfor providing the contest books!

Packt Publishing kindly asked me to review their latest book about Joomla, titled Joomla! 1.5 Template Design.

Written by Tessa Blakeley Silver and published during June 2009, the book is a complete guide to the design and creation of templates for websites built using the Joomla content management system.

The book has a quite specific target, because the author is addressing only web designers that already know a bit about how Joomla works, and (obviously) know (X)HTML and CSS.

Following the course of the book you'll learn how to build a template from scratch, starting from the general idea, creating the mockup, the design to finally have a great template, standards-compliant, tableless, modern and search engine optimized.

Tessa first introduces her personal design comp method: instead of creating the mockup using Photoshop of Fireworks, we'll create a design demo using HTML and CSS. This way we'll save a ton of time, because when the client approves the design, we'll already have a solid on which we can work, without wasting time adapting the Photoshop psd.

This way we'll also be able to know if it's possibile to create the design we want to make: using Photoshop, you'll never know, you'll only be able to rely on your experience to prevent problems and hours of time wasted.

Once we've done the mockup and the client has approved it, we'll get into the details and we'll integrate the Joomla elements, such as components and modules.

The book explains very clearly how Joomla works to create the presentation, the website look.

After we get the template work correctly, the first phase terminates, and it's time to debug and validate our code. We'll learn how to use powerful tools like Firebug, QorSMode and the IE Developer Toolbar.

Now the template is ready to use, but we can improve it to make it perfect: we can create dynamic layouts, drop-down menus, we can also use Flash to design great interfaces.

Tessa guides us to explore the AJAX interactivity to integrate advanced functionalities, explains the use of template overrides to customize the Joomla output, how to use the Joomla suffixes to design each module and page separately and other great expert tricks.

As the last chapter title says, "good design isn't always visual". A web site must take care of the users first, but also must be search engine friendly, so that our website can increase its users over time.

Joomla! 1.5 Template Design

This is a book to read and always keep near your desk, because it will be really useful as a reference during all your Joomla website life cycle. A must for every Joomla template designer, and for everyone that wants to customize their website theme.

Customizing Google Maps

Google Maps has a comprehensive API for interacting with maps on your website. MooTools can be used to load the Google Maps engine at the correct time. It can also act as a bridge between the map and other HTML elements on your site.

To get started, you will first need to get an API key to use Google Maps on your domain. You can sign up for a free key at http://code.google.com/apis/maps/signup.html. Even if you are working on your local computer, you still need the key. For instance, if the base URL of your Joomla installation is http://localhost/joomla, you will enter localhost as the domain for your API key.

Once you have an API key ready, create the file basicmap.js in the /components/com_js folder, and fill it with the following code:

window.addEvent('domready', function()
{
 if (GBrowserIsCompatible())
 {
 var map = new GMap2($('map_canvas'));
 map.setCenter(new GLatLng(38.89, -77.04), 12);
 window.onunload=function()
 {
 GUnload();
 };
 }
});

The entire script is wrapped within a call to the MooTools-specific addEvent() member function of window. Because we want this code to execute once the DOM is ready, the first parameter is the event name 'domready'. The second parameter is an anonymous function containing our code.

What does the call to function() do?
Using function() in JavaScript is a way of creating an anonymous function. This way, you can create functions that are used in only one place (such as event handlers) without cluttering the namespace with a needless function name. Also, the code within the anonymous function operates within its own scope; this is referred to as a closure. Closures are very frequently used in modern JavaScript frameworks, for event handling and other distinct tasks.

Once inside of the function, GBrowserIsCompatible() is used to determine if the browser is capable of running Google Maps. If it is, a new instance of GMap2() is declared and bound to the HTML element that has an id of 'map_canvas' and is stored into map. The call to $('map_canvas') is a MooTools shortcut for document.GetElementById().

Next, the setCenter() member function of map is called to tell Google Maps where to center the map and how far to zoom in. The first parameter is a GLatLng() object, which is used to set the specific latitude and longitude of the map's center. The other parameter determines the zoom level, which is set to 12 in this case. Finally, the window.onunload event is set to a function that calls GUnload(). When the user navigates away from the page, this function removes Google Maps from memory, to prevent memory leaks.

With our JavaScript in place, it is now time to add a function to the controller in /components/com_js/js.php that will load it along with some HTML. Add the following basicMap() function to this file:

function basicMap()
{
 $key = 'DoNotUseThisKeyGetOneFromCodeDotGoogleDotCom';
 JHTML::_('behavior.mootools');
 $document =& JFactory::getDocument();
 $document->addScript('http://maps.google.com/maps?file=api&v=
 2&key=' . $key);
 $document->addScript(
 JURI::base() . 'components/com_js/basicmap.js');
 ?>
 <div id="map_canvas" style="width: 500px; height: 300px"></div>
 <?php
}

The basicMap() function starts off by setting $key to the API key received from Google. You should replace this value with the one you receive at http://code.google.com/apis/maps/signup.html. Next, JHTML::_('behavior.mootools'); is called to load MooTools into the <head> tag of the HTML document. This is followed by getting a reference to the current document object through the getDocument() member function of JFactory. The addScript() member function is called twice—once to load in the Google Maps API (using our key), then again to load our basicmap.js script. (The Google Maps API calls in all of the functions and class definitions beginning with a capital 'G'.)

Finally, a <div> with an id of 'map_canvas' is sent to the browser. Once this function is in place and js.php has been saved, load index.php?option=com_js&task=basicMap in the browser. Your map should look like this:

We can make this map slightly more interesting by adding a marker to a specific address. To do so, add the highlighted code below to the basicmap.js file:

window.addEvent('domready', function()
{
 if (GBrowserIsCompatible())
 {
 var map = new GMap2($('map_canvas'));
 map.setCenter(new GLatLng(38.89, -77.04), 12);

 var whitehouse = new GClientGeocoder();
 whitehouse.getLatLng('1600 Pennsylvania Ave NW',
 function(latlng)
 {
 marker = new GMarker( latlng );
 marker.bindInfoWindowHtml('<strong>The White
 House</strong>');
 map.addOverlay(marker);
 }); 
 window.onunload=function(){
 GUnload();
 };
 }
});

This code sets whitehouse as an instance of the GClientGeocoder class. Next, the getLatLng() member function of GClientGeocoder is called. The first parameter is the street address to be looked up. The second parameter is an anonymous function where the GLatLng object is passed once the address lookup is complete. Within this function, marker is set as a new GMarker object, which takes the passed-in latlng object as a parameter. The bindInfoWindowHTML() member function of GMarker is called to add an HTML message to appear in a balloon above the marker. Finally, the maker is passed into the addOverlay() member function of GMap2, to place it on the map.

Save basicmap.js and then reload index.php?option=com_js&task=basicMap. You should now see the same map, only with a red pin. When you click on the red pin, your map should look like this:

Interactive Maps

These two different maps show the basic functionality of getting Google Maps on your own website. These maps are very basic; you could easily create them at maps.google.com then embed them in a standard Joomla! article with the HTML code they provide you. However, you would not have the opportunity to add functions that interact with the other elements on your page. To do that, we will create some more HTML code and then write some MooTools-powered JavaScript to bridge our content with Google Maps.

Open the /components/com_js/js.php file and add the following selectMap() function to the controller:

function selectMap()
{
 $key = 'DoNotUseThisKeyGetOneFromCodeDotGoogleDotCom';
 JHTML::_('behavior.mootools');
 $document =& JFactory::getDocument();
 $document->addScript('http://maps.google.com/maps?file=api&v
 =2&key=' . $key);
 $document->addScript(
 JURI::base() . 'components/com_js/selectmap.js');
 ?>
 <div id="map_canvas" style="width: 500px; height: 300px"></div>
 <select id="map_selections">
 <option value="">(select...)</option>
 <option value="1200 K Street NW">Salad Surprises</option>
 <option value="1221 Connecticut Avenue NW">The Daily
 Dish</option>
 <option value="701 H Street NW">Sushi and Sashimi</option>
 </select>
<?php
}
 

This function is almost identical to basicMap() except for two things—selectmap.js is being added instead of basicmap.js, and a <select> element has been added beneath the <div>. The <select> element has an id that will be used in the JavaScript. The options of the <select> element are restaurants, with different addresses as values. The JavaScript code will bind a function to the onChange event so that the marker will move as different restaurants are selected.

A practical tutorial for creating your first Joomla! 1.5 extensions with PHP, written and tested against the final release of Joomla! 1.5 Program your own Joomla! extensions Master Model-View-Controller design Build configurable site modules to show information on every page Use built-in HTML and JavaScript functions http://www.packtpub.com/learning-joomla!-1.5-extension-development/book

window.addEvent('domready', function()
 {
 if (GBrowserIsCompatible())
 {
 var map = new GMap2($('map_canvas'));
 map.setCenter(new GLatLng(38.89, -77.04), 12);
 var restaurant = new GClientGeocoder();
 $('map_selections').addEvent('change', function(){
 if(this.value != '')
 {
 name = this.options[this.selectedIndex].text;
 restaurant.getLatLng(this.value, function(latlng){
 map_marker = new GMarker( latlng );
 map.clearOverlays();
 map.addOverlay(map_marker);
 map_marker.openInfoWindowHtml('<strong>' + name +
 '</strong>');
 });
 }
 });
window.onunload=function()
 {
 GUnload();
 };
 }
});

This script is similar to the one used for the first two maps, until we get past the call to map.setCenter(). The variable restaurant is first set as an instance of the GClientGeocoder() class. However, member functions are not called on it right away, as it was done in the previous example. This is because we want to wait for the <select> element to change before we do anything. The call to $('map_selections') finds the <select> element, and then addEvent() is used to assign a function to the onChange event; the string 'change' is passed as the first parameter.

The function passed in as the second parameter first checks to make sure that the element's value is not null by checking this.value. If the value is not null, this function proceeds by getting the option's text and storing it in name. Then the getLatLng() member function of GClientGeocoder is called on restaurant. The street address is passed in as the first parameter. Once the latitude and longitude of the address is found, the anonymous function in the second parameter accepts the GLatLng object that is returned, using it to set map_marker as a new GMarker object.

Before adding the marker to the map, the clearOverlays() function of the map object is called to remove any previously-placed marker. Then, the marker is passed into the addOverlay() function to be placed on the map. Although the marker is now set on the map, we can still interact with it. The openInfoWindowHtml() member function of GMarker allows us to do this and pass in some HTML with the name of the restaurant.

With the controller function and JavaScript in place and saved, load index.php?option=com_js&task=selectMap in your browser. The map should load again, this time with a dropdown box at the bottom. Select one of the restaurants, and then switch to another. If you select Sushi and Sashimi from the list, your map should look similar to the following:

These examples scratch the surface of what is possible with the Google Maps API. You can manage layers, add shapes, use custom icons instead of the standard pins, and use many other features to build sophisticated custom maps. For more information, go to http://code.google.com/apis/maps/documentation/index.html where you can read more about the available features.

Using jQuery

Another popular JavaScript framework is jQuery. The jQuery framework has functionality that is similar to MooTools, but uses a different style of code. Although they are separate projects, extra care must be taken when using them together. By default, both frameworks automatically reserve $ to have a special meaning in JavaScript. If you do not take steps to avoid this behavior, one library will overwrite the other's assignments and the scripts will fail.

Fortunately, jQuery has strategies that you can use to avoid this conflict. There are three things that you must do to keep jQuery and MooTools out of each other's way:

• Load jQuery only after MooTools has been loaded
• Call jQuery.noConflict() to return control of $ to MooTools
• Reference jQuery directly in your scripts instead of using $

Writing jQuery code

Before avoiding conflicts with MooTools, start by writing some jQuery without MooTools being present. First, go to jquery.com, download the latest version of jQuery, and then place it in the /components/com_js directory; the production version of the script will be fine. Then, create a file named jquery-test.js in the /components/com_js folder, and fill this new file with the following code:

$(document).ready(function()
 {
 $('#message_box').click(function()
 {
 $(this).addClass('contentheading');
 });
 });

This is a simple application of jQuery—when the DOM is fully loaded in the browser, the code within the first call to function() executes. The code $('#message_box') finds the element in the DOM that has an id of 'message_box', and uses click() to assign an onClick JavaScript event to it. Finally, the addClass() method is used to add the CSS class 'contentheading' to the element.

With jquery-test.js in place, open the /components/com_js/js.php file, and add the following function task to the controller:

function useJquery()
{
 $document =& JFactory::getDocument();
 $document->addScript(
 JURI::base() . 'components/com_js/jquery-1.2.6.min.js');
 $document->addScript(
 JURI::base() . 'components/com_js/jquery-test.js');
 ?>
 <p id="message_box">This is a message</p>
 <?php
}

First, a reference to the document object is stored in $document by using the getDocument() member function of JFactory. Next, the addScript() member function is used to add the jQuery framework and our test script. Finally, a paragraph tag with the id 'message_box', and containing a short message, is output. Load index.php?option=com_js&task=useJquery in your browser, and click on the This is a message link. Your screen should now look similar to this:

Using jQuery with MooTools

The code that we just wrote works fine on its own, but will fail right now if we attempt to also use a MooTools-driven effect. To remedy this, we need to make an adjustment to our script and invoke jQuery's noConflict mode. Open the file /components/com_js/js.php and add the following function to the controller:

function useJqueryAndMooTools()
{
 JHTML::_('behavior.tooltip');

 $document =& JFactory::getDocument();
 $document->addScript(
 JURI::base() . 'components/com_js/jquery-1.2.6.min.js');

 $document->addCustomTag('<script type="text/javascript">
 jQuery.noConflict();
 </script>');

 $document->addScript(
 JURI::base() . 'components/com_js/jquery-test.js');

 ?>

 <p id="message_box">This is a message</p>
 <span class="hasTip" title="Click here to go to the home page">
 <a href="index.php">Homepage</a>
 </span>

 <?php
}

The highlighted portions of useJqueryAndMooTools() are the added pieces that differentiate it from useJquery(). The call to JHTML::_('behavior.tooltip'); loads the code necessary for the tooltip, including MooTools. Because MooTools is now being loaded, we use the addCustomHeadTag() member function of the document object to make a quick call to jQuery.noConflict(); so that $ is left for MooTools. Finally, an anchor tag wrapped in a <span> element has been added with the tooltip information.

If you save js.php and load index.php?option=com_js&task=useJqueryAndMooTools now, you will get an error; we have not yet adjusted jquery-test.js to account for the call to jQuery.noConflict();. Open jquery-test.js and make the highlighted adjustment:

jQuery(document).ready(function($) {

 $('#message_box').click(function() {

 $(this).addClass('contentheading');
 });
});

Because the $ shortcut is no longer available, we must call the jQuery function by name. However, we can regain control of the $ shortcut within our jQuery code. This is because the call to function() allows us to pass a reference to the jQuery function into the local scope, with any desired name. Because $ has been specified as the parameter of function(), the rest of the code can use it without further modification.

Load index.php?option=com_js&task=useJqueryAndMooTools in your browser, click on the This is a message link, then move and the mouse over the Homepage link. Your screen should look similar to this:

Always load MooTools first

The trick to using jQuery and MooTools together in Joomla! is to make sure that MooTools loads before jQuery does. In the useJqueryAndMooTools() function, if you move the call to JHTML::_('behavior.tooltip'); any time after the call to addScript() that loads in jQuery, an error will occur. Instead, MooTools must load first and define $. Then jQuery.noConflict(); can be called to return $ back to its original assignment.

This is easily managed when you know and can control every instance where MooTools is used. However, if you are building a self-contained extension for others to use, it is quite possible that they are using other extensions that load MooTools. For instance, if someone has a module for a photo gallery that uses MooTools, the MooTools framework will be added to the <head> section of the HTML document after your component with jQuery loads. This will cause a JavaScript error.

The safest way of avoiding this situation is to force the MooTools library to load in your extension before you load jQuery. To do this, simply add JHTML::_('behavior.mootools'); in your extension before adding the jQuery framework to <head>. The call to JHTML::_('behavior.mootools'); detects whether MooTools has been loaded yet, and loads it now if it has not.

A downside to this workaround is that the MooTools framework will be included even if it is never used. This will slow down the load time of your site slightly and use resources in the JavaScript environment. If you are building an extension that will not be distributed or reused, you can hard-code the references to jQuery in your template after <jdoc:include type="head" />. In this scenario, jQuery will be loaded on every page and will eventually be used where you determine. If MooTools is loaded by another extension, it will happen before jQuery is initialized.

Summary

In this article, we have discussed how to customize Google Maps on our Joomla! component and how to use JQuery effectively to further enhance the component's functionality. Joomla! is ready for your latest JavaScript needs. By using the MooTools JavaScript framework, you can find elements and assign event handlers to them. You can also use pre-built functions within Joomla! to generate the JavaScript necessary for many typical effects.You can also use jQuery with MooTools in Joomla!, provided that you take precautions to make sure that the frameworks do not conflict.

A practical tutorial for creating your first Joomla! 1.5 extensions with PHP, written and tested against the final release of Joomla! 1.5 Program your own Joomla! extensions Master Model-View-Controller design Build configurable site modules to show information on every page Use built-in HTML and JavaScript functions http://www.packtpub.com/learning-joomla!-1.5-extension-development/book

About the Author

Joseph L. LeBlanc started with computers at a very young age. His independent education gave him the flexibility to experiment with and learn computer science.Joseph holds a bachelor's degree in Management Information Systems from Oral Roberts University.

Joseph is a freelance Joomla! extension developer. He released a component tutorial in May 2004, which was later translated into French, Polish, and Russian. Work samples and open-source extensions are available at www.jlleblanc.com. In addition to freelancing, he is an active member of the Washington, DC tech community and Joomla! Bug Squad.

This is a great guest article sent by Packt Publishing, that talks about using AJAX to extend Joomla extensions, plugins and templates.

AJAX: an acronym that Jesse James Garret of AdaptivePath.com came up with in 2005. Just a few short years later, it seems like every site has a "taste" of AJAX in it. If you're totally new to AJAX, I'll just point out that, at its core, AJAX is nothing very scary or horrendous. AJAX isn't even a new technology or language.

Essentially, AJAX stands for: Asynchronous JavaScript and XML, and it is the technique of using JavaScript and XML to send and receive data between a web browser and a web server. The biggest advantage this technique has is that you can dynamically update a piece of content on your web page or web form with data from the server (preferably formatted in XML), without forcing the entire page to reload. The implementation of this technique has made it obvious to many web developers that they can start making advanced web applications (sometimes called RIAs—Rich Interface Applications) that work and feel more like software applications than web pages.

Keep in mind that the word AJAX is starting to have its own meaning (as you'll also note its occasional use here as well as all over the Web as a proper noun rather than an all-cap acronym). For example, a Microsoft web developer may use VBScript instead of JavaScript to serve up Microsoft Access database data that is transformed into JSON (not XML) using a .NET server-side script. Today, that guy's site would still be considered an AJAX site rather than an "AVAJ" site (yep, AJAX just sounds cooler).

In fact, it's getting to the point where just about anything on a web site (that isn't in Flash) that slides, moves, fades, or pops up without rendering a new browser window is considered an "Ajaxy" site. In truth, a large portion of these sites don't truly qualify as using AJAX, they're just using straight-up JavaScripting. Generally, if you use cool JavaScripts in your Joomla! site, it will probably be considered Ajaxy, despite not being asynchronous or using any XML.

Want more info on this AJAX business? The w3schools site has an excellent introduction to AJAX, explaining it in straightforward simple terms. They even have a couple of great tutorials that are fun and easy to accomplish even if you only have a little HTML, JavaScript and server-side script (PHP or ASP) experience (no XML experience required): http://w3schools.com/ajax/.

Preparing for dynamic content and interactive forms

Gone are the days of clicking, submitting, and waiting for the next page to load, or manually compiling your own content from all your various online identities to post in your site.

A web page using AJAX techniques (if applied properly) will give the user a smoother and leaner experience. Click on a drop-down option and check-box menus underneath are immediately updated with the relevant choices—no submitting, no waiting. Complicated forms that, in the past, took two or three screens to process can be reduced into one convenient screen by implementing the form with AJAX.

As wonderful as this all sounds, I must again offer a quick disclaimer: I understand that, like with drop-down menus and Flash, you may want AJAX to be in your site, or your clients are demanding that AJAX be in their sites. Just keep in mind, AJAX techniques are best used in situations where they truly benefit a user's experience of a page; for example, being able to painlessly add relevant content via an extension or cutting a lengthy web process form down from three pages to one. In a nutshell, using an AJAX technique simply to say your site is an AJAX site is probably not a good idea.

You should be aware that, if not implemented properly, some uses of AJAX can compromise the security of your site. You may inadvertently end up disabling key web browser features (such as back buttons or the history manager). Then there's all the basic usability and accessibility issues that JavaScript in general can bring to a site.

Some screen readers may not be able to read a new screen area that's been generated by JavaScript. If you cater to users who rely on tabbing through content, navigation may be compromised once new content is updated. There are also interface design problems that AJAX brings to the table (and Flash developers can commiserate). Many times, in trying to limit screen real estate and simplify a process, developers actually end up creating a form or interface that is unnecessarily complex and confusing, especially when your user is expecting a web page to, well, act like a normal web page.

Remember to check in with Don't Make Me Think: This is the Steve Krug book I recommend for help with any interface usability questions you may run into.
Really interested in taking on AJAX? For you programmers, I highly recommend "AJAX and PHP: Building Responsive Web Applications", Cristian Darie, Bogdan Brinzarea, Filip Chereches-Tosa, and Mihai Bucica, Packt Publishing. In it, you'll learn the ins and outs of AJAX development, including handling security issues. You'll also do some very cool stuff, such as make your own Google-style auto-suggest form and a drag-and-drop sortable list (and that's just two of the many fun things to learn in the book).

So, that said, you're now all equally warned and armed with all the knowledgeable resources I can think to throw at you. Let's get to it: how exactly do you go about getting something Ajaxy into your Joomla! site?

Joomla! extensions

Keep in mind, extensions are not part of your template. They are additional files with Joomla!-compatible PHP code, which are installed separately into their own directories in your Joomla! 1.5 installation. Once installed, they are available to be used with any template that is also installed in your Joomla! installation.

Even though these are not part of your template, you might have to prepare your template to be fully compatible with them. Some extensions may have their own stylesheets, which are installed in their extension directory. Once you've installed an extension, you may want to go into your own template's stylesheet so that it nicely displays XHTML objects and content that the extension may output into your site.

Extensions are any component, module or plugin that you install into your Joomla! 1.5 installation.

Components control content that displays in the main type="component" jdoc tag in your template. Note that components may also have module settings and the ability to display content in assigned module positions. The poll component is a good example of a component that also has module settings.

Modules are usually smaller and lighter and only display in module positions.

Plugins generally help you out more on the backend of your site, say to switch WYSIWYG editors or with enabling OpenID logins, but as we'll see, some plugins can affect the display of your site to users as well.

Deciding where AJAX is best used

On the whole, we're going to look at the most popular places where AJAX can really aid and enrich your site's user experience. We'll start with users adding comments to articles and pages and streamlining that process. We'll then take a look at a nice plugin that can enhance pagination for people reading long articles on your site.

We'll then move on to the RSS Reader module, which can enhance the content in your modules (and even makes your users have fun arranging them). Finally, we'll realize that AJAX isn't just for impressing your site users. You, as an administrator, can (and do) take advantage of AJAX as well.

Please note: These extensions were chosen by me based on the following criteria:

1. They provided some useful enhancement to a basic site.
2. They, at the time of this writing, were free and received very good feedback on Joomla!.org's extensions site: http://extensions.Joomla.org.

In the next few pages, I'll walk you through installing these extensions and discuss any interesting insights for doing so, and benefits of their enhancements (and some drawbacks). But you must use the extension links provided to make sure you download the latest stable versions of these extensions and follow the extension author's installation guides when installing these into your Joomla! site. If you run into any problems installing these extensions, please contact the extension's author for support. Always be sure to take the normal precaution of backing up your site before installation, at least for any non-stable extensions you may decide to try.

Installing the Joomla! comment component

Chances are, if you've invested in Joomla! 1.5 as your CMS, you need some powerful capabilities. Easy commenting with "captcha" images to reduce spam is always helpful:

http://extensions.Joomla.org/extensions/contacts-&-feedback/comments/4389/details

To install this extension (and the other few coming up), you have to basically go to Extensions | Install/Uninstall and upload the extension's ZIP file. You'll then proceed to the plugin, component, and/or modules panel and activate the extension so that it is ready to be implemented on your site.

Upon installing this comment component, to my surprise, it told me that it was for an older version of Joomla! Everything on the download page seemed to indicate it worked with 1.5. The installation error did mention that I just needed to activate the System Legacy plugin and it would work. So I did, and the comment form appeared on all my article pages. This may seem like a step backward, but for extensions like this, which are very useful, if they work well and stay stable in Legacy Mode, a developer may have made the decision to leave well enough alone. The developer will most likely eventually upgrade the extension (especially if Legacy Mode goes away in future versions of Joomla!). Just be sure to sign up for updates or check back on any extensions you use if you do upgrade your site. You should do this regardless of whether your extensions run natively or in Legacy Mode.

The advantage of AJAX in a comment form is that a user isn't distracted and comments post smoothly and right away (a bit of instant gratification for the user, even if you never "confirm" the post and it never gets actually published for other viewers). This extension outputs tables, but for the ease of handling robust comments and having a great admin area to manage them, I'll make do. The following screenshot shows the Joomla! comment component appearing in an article page:

As you can see in my previous image, I have some strong styles that are trying to override the component's styles. A closer look at the output HTML will give me some class names and objects that I can target with CSS. The administration panel's Component | Joomla! Comment | Other Component settings page also allows quite a few customization options. The Layout tab also offers several included style sheets to select from as well as the option to copy the CSS sheet out to my template's directory (the component will do this automatically). This way, I can amend it with my own specific CSS, giving my comment form a better fit with my template's design.

Installing the core design Ajax Pagebreak plugin

If your site has long articles that get broken down regularly in to three or more pages, Pagebreak is a nice plugin that uses Ajax to smoothly load the next page. It's a useful feature that will also leave your site users with a little "oh wow" expression.

http://www.greatJoomla.com/news/plugins/demo-core-design-ajaxpagebreak-plugin.html

After successfully installing this plugin, I headed over to the Extensions | Plugin Manager and activated it.

I then beefed out an article (with Lorem Ipsum) and added page breaks to it on the Home Page. It's hard to see in a screenshot, but it appears below the Prev and Next links without a full browser redraw. I've set my site up with SEO-friendly URLs, and this plugin does amend the URLs with a string; that is, http://yoururl.com/1.5dev/menu-item-4?start=1. I'm not sure how this will really affect the SEO "friendliness" value of my URL, but it does give me a specific URL to give to people if I want to send them to a targeted page, which is very good for accessibility. One thing to note, the first page of the article is the original URL; that is, http://yoururl.com/1.5dev/menu-item-4. The second page then appends ?start=1, the third page becomes ?start=2, and so on. Just be aware that when sending links out to people, it is always best to pull the URL directly from the site so that you know it's correct!

Installing the AJAX RSS Reader Version 3 with Draggable Divs module

RSS feeds are a great way to bring together a wide variety of content as well as bring all your or your organization's "social network happenings" to one place in your own site. I like to use RSS feeds to get people interested in knowing what an organization is doing (or tweeting), or reading, and so on. Having links and lists of what's currently going on can compel users to link to you, join your group, follow you, and become a friend, a fan, or whatever.

This AJAX powered module has the extra feature of being draggable and somewhat editable. This is a nice way to draw a user in to the feeds and let them play with them and arrange the information to their taste. Sometimes, sorting and reorganizing makes you see connections and possibilities that you didn't see before. The next image may seem confusing, but it's a screenshot of the top div box being dragged and dropped: http://extensions.Joomla!.org/extensions/394/details

AJAX: It's not just for your site's users

I've already mentioned, when applied properly, how AJAX can aid in interface usability. Joomla! attempts to take advantage of this within its Administration panel by enhancing it with relevant information and compressing multiple page forms into one single screen area. Here's a quick look at how Joomla! already uses AJAX to enhance its Administration panel forms:

The following image shows how the image uploader uses a "lightbox" div layer effect so that you can keep track of where you are in the content editor.

In the next image, you can see how Joomla! helps keep the administration area cleared up by using smooth-sliding accordion panels. This helps you see everything on one page and have access to just what you need, when you need it.

Create your own professional-quality templates with this fast, friendly guide Create Joomla! 1.5 Templates for your sites Debug, validate, and package your templates Tips for tweaking existing templates with Flash, extensions and JavaScript libraries http://www.packtpub.com/joomla-1-5-template-design-2nd-edition/book

The AJAX factor

Aside from the many interface-enhancing, time-saving benefits of Ajax, sometimes you do just want to "wow" your site visitors. It's easy to give your site an Ajaxy feel, regardless of asynchronously updating it with server-side XML, just by sprucing up your interface with some snappy JavaScripts. The easiest way to get many of these effects is to reference a JavaScript library (sometimes called a toolkit or framework, depending on how robust the provider feels the code is). A few of the leading favorites in the AJAX community (in no particular order) are:

• Script.alico.us: http://script.aculo.us/
• Prototype: http://www.prototypejs.org/
• jQuery: http://jquery.com/

There're also:

• MooTools: http://mootools.net/
• moo.fx: http://moofx.mad4milk.net/

Prototype is more of a framework and Script.alico.us is more of an add-on toolkit or set of libraries for neat effects. In fact, Script.alico.us references the Prototype framework, so your best bet is probably to use Script.alico.us, but if you do work with it, be sure to check out Prototype's site and try to understand what that framework does.

moo.fx is the smallest JavaScript effects library (boasting a 3k footprint), but again, it needs to be supported by the MooTools or Prototype frameworks.

jQuery is my personal favorite. It pretty much stands on its own without needing to be backed up by a more robust framework such as Prototype. Yet, you can still do some very robust things with it, such as manipulating data and the DOM. Plus, it's packed with the ability to do neat and cute visual effects similar to Script.alico.us or moo.fx.

Using JavaScript libraries such as the above, you'll be able to implement their features and effects with simple calls into your Joomla! posts and pages.

JavaScript component/plugin scripts

The fun doesn't stop there! What's that? You don't have time to go read up on how to use a JavaScript library such as jQuery? Never fear! There are many other JavaScript effect plugins that are built using the above libraries.

One of the most popular scripts out there that makes a big hit on any web site is Lightbox JS: http://www.huddletogether.com/projects/lightbox2/.

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's great, but it uses both the Prototype and Script.alico.us libraries to achieve its effects. Unfortunately, I've found Lightbox JS was a bit limited in terms of using it with a CMS that has a WYSIWYG editor like TinyMCE (although that didn't stop clients from wanting it on their site).

The problem

I had an issue with getting custom markup into my TinyMCE WYSIWYG editor. I then attempted to turn off the TinyMCE editor and found that even after using the plain text area editor, Joomla! modified my custom XHTML.

The same problem holds for Lightbox JS. While simple to add to your template, in order for Lightbox JS to work, you need to add a custom rel="lightbox" attribute to each <a href...tag that will call an image into the lightbox. While turning off the TinyMCE editor actually works here, and keeps the rel="lightbox" in tact after hitting Save, it only does so as long as the TinyMCE editor stays turned off.

This means: setting up quick Lightbox JS gallery images for clients in content pages only to have them constantly, inadvertently, mess them up and break them because they'd open up the content using their user logins, which, of course, are set to use the TinyMCE editor.

Upon loading the content from the database into the edit screen, TinyMCE likes to help out and do some cleaning up for you. That rel="lightbox" attribute in any links in the page sometimes drops out (and sometimes it stays; if you have several links to images, some may break and others may work). The client then calls me to fix the problem (upset, as they have to call me, and they thought they'd be the ones maintaining their own site).

While I'd like to get upset with my non-XHTML savvy clients, the truth is this is exactly the reason they've invested in the Joomla! CMS. They need an easy way to manage large sites with perhaps multiple editors, many of whom don't have the foggiest idea what an HTML tag is.

Enter jQuery lightBox

jQuery lightBox by Leandro Vieira Pinho is very similar to Lightbox JS in that it has that very nice, smooth animation. On the plus side, it uses only the jQuery library. On the plus plus side, it doesn't require any custom markup to your <a href... tags. You can download it from here:

http://leandrovieira.com/projects/jquery/lightbox/

Time for action: Adding jQuery to your template

This is an extremely easy-to-implement plugin. (Don't get confused, this is not a Joomla! plugin. jQuery refers to packaged scripts that use its library as plugins).

After downloading it, add the key .js and .css files inside your Joomla! template's <header> tags:

...
<script type="text/javascript" src="<?php echo $this->baseurl;
 ?>/templates/go_green/js/jquery.js"></script>

<script type="text/javascript" src="<?php echo $this->baseurl;
 ?>/templates/go_green/js/jquery.lightbox-0.5.js"></script>
...

You'll also add in a call to the jQuery lightBox CSS file:

...
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl; ?
>/templates/go_green/css/jquery.lightbox-0.5.css" media="screen" />
...

Don't forget to upload the images in the ZIP package to your template's image directory and update the jquery.lightbox-0.5.js files image paths in line's 30 to 34:

...
 imageLoading: 'templates/go_green/images/lightbox-ico-loading.gif',
 // (string) Path and the name of the loading icon

 imageBtnPrev: 'templates/go_green/images/lightbox-btn-prev.gif',
 // (string) Path and the name of the prev button
image

 imageBtnNext: 'templates/go_green/images/lightbox-btn-next.gif',
 // (string) Path and the name of the next button image

 imageBtnClose: 'templates/go_green/images/lightbox-btn-close.gif',
// (string) Path and the name of the close btn

 imageBlank: 'templates/go_green/images/lightbox-blank.gif',
// (string) Path and the name of a blank image (one pixel)
...

Alternatively, you can upload the jQuery lightBox images into the images folder; that is, in the root of your Joomla! installation. You then won't need to edit the jquery.lightbox-0.5.js file. However, if you package your template up for other people to use, the images will not come over with your template and the script may appear broken.

Now, we're ready to activate the jQuery lightBox plugin. This is the beauty of jQuery. It has a robust DOM and CSS selector feature, and that means we don't have to put any special class or rel tags in our markup. We can generally target <a href links by placing a small jQuery JavaScript in our header (below our .js and .css file calls) like so:

...
<script type="text/javascript">
$(function() {
 $('#page a').lightBox(); // Select all links in an XHTML area with
page ID
});
</script>
...

This will work for all our article pages

Now you can create an article or content page in your Administration panel using the easy method of creating an article and adding content to it.

I uploaded the images via Joomla's built-in image uploader, which you can find at the bottom of the content editor. I then inserted my thumbnail version into the page and created a link to the image using the link editor in TinyMCE's editing options

That's it!

But wait! Unfortunately, there's a small drawback: because I'm targeting the a href links inside the #page div, my PDF, print, and email buttons are activating the lightBox. As you can see by the following screenshot, the results are "interesting":

This is easily remedied if you know a bit about jQuery's selectors.

First off, we'll simply target the area we want to focus in on a bit more:

$('#page p a').lightBox();

This will only activate a hrefs inside p (paragraph) tags. This doesn't fix our problem, as those button links happen to be wrapped inside paragraph tags too. However, they do have a class called .buttonheading associated with them. So, we'll select a href's inside p tags that do not contain the class .buttonheading, as follows:

$('#page p:not(.buttonheading) a').lightBox();

This is great. The PDF, print, and email buttons now work. But I know my clients. They're going to create articles, and using nothing but the WYSIWYG editor, with no clue as to what markup they're actually creating. They will not only upload images with links for the lightBox, but probably also will throw in a bunch of other links to other stuff that shouldn't kick off the lightBox. The nerve! They can be so "link-happy" sometimes. Well, that's OK too. We'll simply amend the a selector a bit:

$('#page p:not(.buttonheading) a:has(img)').lightBox();

By adding a:has(img), only the <a href... tags that wrap around images will activate the jQuery lightBox plugin.

You now have a fool-proof lightBoxing method that the most sloppy HTML mess-making WYSIWYGing editors will be hard pressed to break! The following image shows the lightbox at work in the template:

jQuery selectors: In order to make jQuery lightBox work well with your template, you should to understand selectors. Karl Swedberg has two excellent articles on targeting anything you want with jQuery selectors: http://www.learningjquery.com/2006/12/how-to-getanything-you-want-part-2. You can also use jQuery's reference guide: http://docs.jquery.com/Selectors.
There's also jQuery's ThickBox: ThickBox installs and works very similar to jQuery lightBox. However, in addition to handling images similar to Lightbox JS, it can also handle in-line content, iFrame content, and AJAX content (be sure to check out the examples on the Thickbox page): http://jquery.com/demo/thickbox/.
The downside: ThickBox requires that you add a special class="thickbox" to your <a href tag markup. The good news is, TinyMCE doesn't strip this out, but you'll need to have content editors that know how to add that class to their content with the WYSIWYG editor turned off. ThickBox also doesn't do that "smooth" animation that jQuery lightbox does when images are different sizes. This is a trade-off I've made when I've occasionally decided it's important to be able to display more than just images in a layout design or Jooma! template.

Summary

In this article we reviewed a few ways to take advantage of AJAX on your Joomla! site. We downloaded and installed a handful of useful extensions and looked at using jQuery and jQuery lightBox to enhance post and page content.

Create your own professional-quality templates with this fast, friendly guide Create Joomla! 1.5 Templates for your sites Debug, validate, and package your templates Tips for tweaking existing templates with Flash, extensions and JavaScript libraries http://www.packtpub.com/joomla-1-5-template-design-2nd-edition/book