Multimedia cho Joomla part 26 doc

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

Chapter 8

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 file)

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-configured 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

•

•

•

•

•

•

•

•

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 sufficient 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 define 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

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 finish 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 firm believer that is not until we physically do something

(rather than just read about it), and create or break something (and hopefully fix it

again) that we learn how it really works!

•

•

•

•

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 files 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

•

•

Chapter 9

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/files/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 find 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 files 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 flexibility 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 five

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!

•

•

•

•

•

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

Chapter 9

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, flexibility, 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 configure 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

•

•

•

•

•

•

•

•

•

Joomla! Multimedia Project

[ 264 ]

Some of the more popular packages available are:

Package URL

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 configuration files

1 Simply download the MAMP dmg file from the MAMP website,

http://mamp.info/en/downloads/index.html

Chapter 9

The previous image shows the MAMP website and the MAMP DMG file

download option

2 Click to run this file 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 configurable options for Apache port numbers,

PHP versions, and other settings

Quit: Stops all services and shuts down the MAMP application.

•

•

•

•

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 configuration information.

•

•