Chapter 8 [ 257 ] Here are a few key points to adhere to when building or adjusting your Joomla! Template: Use valid HTML code. Do not build the HTML using table tags, <table>. Use the modern method of div tags, <div>, instead. Choose contrasting colors that can be easily viewed. Optimize graphics for the template. Use valid CSS code. Offer text-resize options (most major browsers now offer this feature, so make sure you use em values for font control in your CSS le). Test your template and site by using online validation tools. Test your website in all popular web browsers. Fonts, colors, and contrasts We all tend to choose font typefaces and color schemes that we think look great, but as proven on the catwalk, one person's idea of style is not necessarily another's! You may have utilized a default template, or used a pre-designed, third-party template for Joomla! and settled for the pre-congured options. Although glossy images with rounded corners and shadows / highlights look great in a perfect environment, there will be users visiting your sites using mobile devices, many different web browsers, and possibly with disabilities, which are important to consider. • • • • • • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Templates and Multimedia [ 258 ] Choosing the right color scheme is a rather simple but effective way of making your template more accessible. Try to use sufcient color contrast so users who are visually impaired do not have issues viewing the content: There are a number of tools available on the Web to test for color contrast, such as WebAIM, http://www.webaim.org/resources/contrastchecker/. If your favorite colors are light green text on dark green backgrounds and you just have to use them, consider offering your site users the option to adjust the site contrast by loading in different stylesheets at their request. It is possible to achieve this using CSS and it uses a similar approach as if you are offering the user font size controls for text resizing. Most modern web browsers offer the ability to adjust font sizes. Try to use em values in your site CSS so that users can dene their own font sizes in the browser if they so require. Summary Due to the nature of the Joomla! Template controlling layout and style properties of our website, it plays an important part in the accessibility of the site. Templates can enhance multimedia capabilities by delivering JavaScript scripts that can provide additional multimedia features to the site. Templates usually contain a number of images within their presentation and styling, which have an effect upon the extensions we publish in our Joomla! site. The mobile web is a rapidly growing environment and there are a number of things to check and test in order to make sure that your site can be viewed effectively on a mobile web device. Taking this further, it is possible to utilize some Joomla! Extensions that help create your own mobile web versions of your Joomla! site, making them available to a wider audience. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project In the previous chapters, we have covered a multitude of media types (and respective elements) that are considered as different forms of media. Put any number of these together and you have created multimedia! In this last chapter, we follow a cookbook-style approach as we build a multimedia packed Joomla! website from start to nish. We throw in some of the previously mentioned techniques, as well as some new tips and tricks for good measure! This chapter contains: An overview The site structure Multimedia features Accessibility and validation Overview This chapter is our playground! It is designed with a cookbook-style approach that will enable you to include various media elements into a default Joomla! installation. The whole idea is to play and throw things at our Joomla! installation, and learn during the process. I am a rm believer that is not until we physically do something (rather than just read about it), and create or break something (and hopefully x it again) that we learn how it really works! • • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 260 ] If you have read this book and do not utilize the media features mentioned in it, then at least you are now aware of the multimedia capabilities of Joomla!, which is important when planning future projects. If you do utilize some of these features within your website, then you will end up with a feature-rich website containing many cutting-edge web features: Preliminary advice Before going further, it is important to point out the following information: Please do not try the following on a live site: It is best to always use a test website that contains a copy of the les and extensions, and a separate database. Treat the following as a demonstration project and don't build for a live project: It is very easy to copy over features to a new site, or replicate them once you know how. You will probably learn more by taking a laid-back approach to building a demo site, rather than being "up against the clock", trying to resolve an issue on a real project. • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 9 [ 261 ] Take the time to read about the extensions that you use, and their supporting documentation: Extensions have been written by numerous developers with varied experience, and agendas. Try to know what you are including within your website if possible. If you install an extension and do not use it, then remove it: Besides keeping your Joomla! site organized and uncluttered, it is best to remove code/les/folders from your server that are not being used. Leaving older code lying around can create security vulnerabilities. Build the site for your users, not against them: Once you have completed areas of development on your website, ask friends and family for their opinion about it. It is sometimes far too easy to become pre-occupied with "how something looks" and forget how users are going to navigate to it or use it effectively. A fresh viewpoint can only enhance the project. Use the Joomla! Forums: Joomla! was made for the community, and it's the community that makes Joomla! what it is. The forums are full of valuable information, and sometimes answers to issues that you have might only be a quick search away. If you don't nd what you are looking for, post it on the forums and help build the knowledge base. Keep Joomla! up-to-date: Joomla! releases are made available for a reason and it is important to stay up-to-date with the software. With a well-structured design to the framework, there are now very few reasons to go near the core codework. Upgrading is usually an easy process, compared to some other web platforms. Remember to take a backup of your site les before performing any upgrade work, and to take regular backups whenever you can. There are some excellent Joomla! backup extensions which can be found at http:// extensions.joomla.org/extensions/access-a-security/backup . Getting started Joomla! can be what you want it to be. It is built with exibility in mind, and I have personally used it from one-page websites through to UK government projects that receive four million hits-per-month. The Joomla.org site alone receives near ve million hits-per-month, and is a great example of how diverse the platform can be. Joomla! is easy; with knowledge it can be installed within ten minutes and you have a dynamic database driven website out-of-the-box. At this point, the difference between "just another Joomla! install" and "your custom website" (that just happens to be built on the Joomla! Framework) is about knowledge, experience, content, and elbow grease! • • • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 262 ] And that's what we are about to do; create an environment where it is easy and safe to play in, go get our hands dirty and come out the other end with a working Joomla! website that is packed with multimedia features. You can then re-create these features easily on your live website, if required, as you would have the working knowledge to do so. Local development Local development takes place on your computer rather than on an external remote web server. Before you disregard this section, local development is your friend. Lets see how easy it is to get up and running with a local development environment. With a range of tools available, it is now very easy to set up a local development environment which can mimic your live website. Local development is often seen as something that only spotty-faced coders who hang out in closets should be doing, but in fact it is the safest way to work on your website without affecting a live site environment. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 9 [ 263 ] The reasons to run a local development server are as follows: Develop locally on your computer without being online. Make mistakes and put work on your site without it being searched and indexed by Google. We don't want to be halfway through something and have Google come along and make it available to the world. Test out your work before introducing the same features into the live environment. Developing with a localhost package such as MAMP, WAMP helps you understand the server and database relationship, which makes you more knowledgeable about how your Joomla! website works. Local server development is quicker. There is no need to FTP to your web server, and wait for pages to reload through slow internet connections. Local development server environments are free to set up and use. There are numerous ways to set up a local development environment. The main requirements to run a Joomla! website on a server as follows: Apache server Apache makes the most popular web server software in the world. A web server is a program that serves the documents, images, and all other stuff you have on your website to the outside world. PHP PHP is a popular server-side HTML-embedded scripting language. PHP can collect form data, generate dynamic page content, and process cookies. It supports a wide range of databases including mSQL, MySQL, MS-SQL, ODBC, Oracle, and PostgreSQL. PHP also supports a wide range of protocols including IMAP, SNMP, NNTP, and POP3. PHP borrows from the best of the Perl and C worlds, and has hundreds of built-in functions to simplify most of the common tasks. MySQL MySQL is a very fast, multi-threaded, multi-user SQL database server. It can utilize multiple CPUs, supports many column types, and very large databases. Its speed, exibility, and price (free) make it an attractive database option. If you know what you are doing, then it is possible to install each of these on their own and congure your own local development environment, but for those of us who just want to get on with it, there are a number of excellent packages available which install these elements and create an easy-to-use local web server. • • • • • • • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 264 ] Some of the more popular packages available are: Package URL WAMP—Windows http://www.wampserver.com/en/ MAMP—Apple Mac OS X http://www.mamp.info/en/mamp.html LAMP—Linux (and other Unix) Distribution dependent XAMPP—Multi-platform—Windows, Linux, Solaris, Mac http://apachefriends.org The previous links will help provide advice for installation of these packages within your environment. For the purpose of this tutorial, I will show how easy it is to install the MAMP platform for Mac OS X. Installing the MAMP package MAMP stands for Macintosh, Apache, MySQL, and PHP. MAMP comes free of charge and can be installed in typical Mac fashion with just a few clicks. MAMP will not compromise any existing Apache installation already running with your OS X, and you can install Apache, PHP, and MySQL without starting a script or having to change any conguration les. 1. Simply download the MAMP .dmg le from the MAMP website, http://mamp.info/en/downloads/index.html. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 9 [ 265 ] The previous image shows the MAMP website and the MAMP DMG le download option. 2. Click to run this le as you would install any other Mac OS X application. 3. Drag the application into your Applications folder and job done! You now have the MAMP server installed locally. 4. Once installed, click on the MAMP icon in the Applications directory to open the MAMP start control panel: The MAMP control panel offers the following options: Start/Stop Servers: Allows you to easily start and stop your localhost Apache Server with a simple click. Open start page: Opens the default MAMP start page, where you have links to phpInfo, phpMyAdmin, SQLiteManager. Preferences : Allows some congurable options for Apache port numbers, PHP versions, and other settings. Quit: Stops all services and shuts down the MAMP application. • • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 266 ] By clicking on the Open start page option in the MAMP control panel, the following start page appears in your web browser: Links to the following tools can be found on this page: phpMyAdmin: Is a database management tool that is used to easily set up and manage MySQL databases. phpInfo: Provides a listing of PHP and server conguration information. • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 . 08724 Joomla! Multimedia Project [ 260 ] If you have read this book and do not utilize the media features mentioned in it, then at least you are now aware of the multimedia capabilities of Joomla! ,. the nature of the Joomla! Template controlling layout and style properties of our website, it plays an important part in the accessibility of the site. Templates can enhance multimedia capabilities. number of these together and you have created multimedia! In this last chapter, we follow a cookbook-style approach as we build a multimedia packed Joomla! website from start to nish. We throw