Multimedia cho Joomla part 25 pdf

Disabling images, CSS, and JavaScriptFor older mobile devices, one of the best development methods available is to disable image CSS and JavaScript on your site pages, and see how it loo

Disabling images, CSS, and JavaScript

For older mobile devices, one of the best development methods available is to disable

image CSS and JavaScript on your site pages, and see how it looks Your site will

take on a completely different look and feel with the main styling of the template

removed, and you will see the natural layout of elements as they load on your page

Take an on-demand approach with your multimedia

If you utilize multimedia in your website, think about offering these to the user when

they request it, rather than bombarding the user with this information as they land

on your website page

Videos, images, audio, or other multimedia in your website can be presented to the

user via hyperlinks to the intended content This approach offers choice, and means

that the user can choose to visit that content if they wish to, and not have it force-fed

to them If you are displaying the episodes of a podcast using Flash players, consider

using a player that loads the media when someone chooses to play This approach

usually leads to well-structured sites that are quick to load and have a healthy "large

content" feel to them

Load in custom stylesheets or templates for

mobile devices

With a combination of PHP, HTML, and CSS, it is possible for your Joomla! site to

recognize particular mobile web devices and deliver specific stylesheets for these

By using this method, you can provide a simplified layout for your content, which

makes page loading faster and easier for users to navigate your site pages

There are a number of websites and tools that can help generate PHP code for

recognizing particular devices viewing your website Some PHP and CSS skills

are required in order to achieve these results, but with efforts in this area, you can

specifically target the mobile market with your Joomla! content One such useful

tool can be found at http://detectmobilebrowsers.mobi/

The site generator will allow you to tailor the code for your environment, and then

download the applicable code for you to use It is free for non-profit websites and

donations are accepted for commercial use For those with limited PHP knowledge,

but like to get your hands mucky with some code play, this tool will be helpful

For those with limited development skills, a number of Joomla! Extensions are

also available

Available extensions

There are a number of mobile web extensions now available for Joomla! that can

help to make your site accessible for mobile devices, and decrease the technical

knowledge required to make this happen

PDA-plugin for Joomla! 1.5 (P,T)

The essence of the PDA-plugin for Joomla! 1.5 is that it activates a PDA template,

or a mobile web-friendly template, for your Joomla! site instead of using the default

site template:

This plugin will determine if it is appropriate to activate itself, based on it

recognizing the user agent of a mobile device There are two ways to use this plugin:

1 Display the mobile version of a site for the mobile browser that is on the

same link, http://yoursite.com/ It is possible to see both the full and

mobile versions of a site depending on the device used for viewing This

is referred to as the multi-client approach

2 Display the mobile version of a site for a subdomain For example, for

http://pda.yoursite.com/ This is referred to as the multi-site approach

With this plugin, it is possible to use either of these approaches, or both

Installation

There are two elements for the PDA-plugin for Joomla! 1.5 Firstly, you install the

template, and secondly the plugin using the Joomla! Extension Manager

The plugin will require publishing and contains a number of configuration options

The way the PDA-plugin works is to activate the PDA Template (or another template

if set in the Plugin Parameters) so that your site will be simplified to work on mobile

web devices

This plugin takes the hard work out of placing code in to recognize different devices

visiting your website, but you may still need to get your hands dirty by adjusting the

included PDA Template to your liking

To download this extension, visit http://extensions.joomla.org/ and search for

"PDA-plugin"

WAFL: Mobile Content Adaption (P,C,T,M)

Website Adaption and Formatting Layer (WAFL) was built to achieve

device-specific content adaptation for your Joomla! website It is still in alpha mode so has

not reached the maturity of other Joomla! Extensions yet

This plugin supports three modes of operation The selected mode will be activated

when the plugin detects that a request is coming from a mobile device:

1 Template switching: You will be able to select a template that will be used for

mobile requests The plugin contains a mobile template, which can be used

2 Mobile redirect: The visitor will be redirected to a URL that you can specify

3 Siruna: It is a fully managed solution for creating mobile web applications

When this mode is activated, the plugin will redirect any mobile requests

to an instance of the Siruna platform It will also deliver a mobile template

(enriched with information for Siruna) to requests coming from the

Siruna platform

Installation

There is one extension to install that contains four different files:

1 Plugin: It intercepts Joomla! events so that mobile users get delivered

mobile-enhanced content

2 Administrator component: In the WAFL administration-side section, the

web administrator will be able to change preferences to suit their site

3 WAFL template: It delivers our basic version of a mobile template without

taking screen widths and heights into account

4 WAFL module: It is in fact a component wrapper to enable module ordering

in the WAFL template

The extension is installed via the Extension Manager

The administration side of our extension can be found by clicking on WAFL in the

Components menu Here, you can change the look-and-feel of the mobile website

You will need to check your mobile settings by surfing your website using a mobile

device, or even better to look at a number of devices (just as you would when testing

with Safari, IE6, IE7, and so on) to make sure all is as you require

To download this extension, visit http://extensions.joomla.org/ and search for

"WAFL Mobile Content"

Mobilebot for Joomla 1.5 (P)

Mobilebot 1.0 for Joomla! 1.5.x can detect visitors using mobile devices and change

the Joomla! Template automatically

Mobilebot 1.0 for Joomla! 1.5.x has the following features:

1 It can detect iPhone, Blackberry, Android, and Opera Mini browsers

separately and load a particular template for each of them

2 It has two extra spaces so you can add your own custom mobile devices

3 You can adjust your final HTML code with simple/regular expression PHP

replacements This can be done independently for each particular device

4 If none of the specific devices are detected (or you just have one template for

all mobiles), the plugin can also perform a general mobile detection and load

a "generic" mobile template if configured accordingly

Installation

Mobilebot is a simple plugin extension that is installed via the Extension Manager,

and configurations are made within the Plugin Parameters

To download this extension, visit http://extensions.joomla.org/ and search

for "Mobilebot"

Testing for the mobile web

The following is a list of measures that you can take to improve your Joomla! site's

"mobile friendly" presence

Disable your stylesheet

As has been mentioned previously, one of the easiest ways to test compatibility of

your website is to remove the Cascading Style Sheet from the equation As your

stylesheet will contain an abundance of styling elements, it is important from an

accessibility point of view for you to see "if that menu still appears" or "do I still have

a search feature showing" on your site when you have removed the styling:

The previous image displays the joomla.org website with the Cascading Style Sheets

on, and then turned off in the users' web browser

Many older mobile devices still render unstyled raw HTML output Hence, after

turning off your stylesheet, you will get an idea of the semantic layout of your

content and how this displays on your web browser If your template and HTML

content has been built according to web standards, then menu links and other

main navigation features should continue to work

If you use Mozilla Firefox, you can easily turn off the loading of stylesheets by going

to Menu|Develop|Disable Styles on the Firefox browser.

Resize your browser

Resizing your browser window will give you a good idea about how your website

will look when viewed on a mobile device that supports stylesheets It is a simple but

effective way to view your site on smaller screens:

If you use Mozilla Firefox, http://www.firefox.com, and the "Developer Toolbar"

plugin for it, https://addons.mozilla.org/firefox/60/, then resizing your

browser is a piece of cake Simply go to the Resize|Resize Window menu option,

which will allow you to enter custom values for resizing your browser window

Here are common screen resolutions for mobile devices:

128 x 160

176 x 220

240 x 160

320 x 240

480 x 320

Being aware of these screen resolutions and testing on them will help you optimize

your web content accordingly As you can see there are a number of different

resolutions, and these are just the popular ones, so designing a site that works

on the mobile web takes important consideration

Borrow a phone to test with

This isn't hard to do, but it's a simple method that is often overlooked:

Talk with friends and colleagues and ask them to take a look at your site on their

mobile device, and let you know what it's like There are some great emulators

•

•

•

•

•

Target your visitors, and what you want them to see

The goal for any website (not just mobile web) should be to deliver the most

appropriate content to users The goal might be to sell something, deliver important

information, or simply offer learning material, but using good navigation and

leading the user to this information quickly is the trick!

This goal is even more important when viewing content on the mobile web This

means that you may need to simplify a version of your website content in order to

suit a mobile device Using Joomla! Mobile Web Extensions or manually loading in a

different template and CSS may also help with the process of simplifying the layout

and display of your pages At the end of the day, make sure what you are trying to

deliver is concise information and users can get to their location easily

Consider using a tool such as Google Analytics for monitoring your website

statistics The Google Analytics tool is free to use and can set goals, follow user paths,

and closely monitor who is visiting what pages, and with what devices Further

information about Google Analytics can be found at www.google.com/analytics/

Use an emulator

Desktop and web browser emulators are an easy and great way to view what your

site will look like on different devices As with most emulators, they don't always

replicate the "real thing" and so are not as good as having a handset in your hand to

test on This being said, they are the next best thing (if they do work) and so here is

a list of a few popular web emulators to test mobile web content on:

Microsoft

Pocket PC

emulators

Documentation, sample code, header and library files, emulator images, and tools for building Windows Mobile 6 applications

http://msdn.microsoft

com/en-gb/windowsmobile/

bb264327.aspx

dotMobi

web

emulator

An online emulator with Nokia N70 and Sony Ericsson K750 skins http://emulator.mtld.mobi/emulator.php

iPhone

Simulator A web-browser-based simulator for quickly testing your iPhone web

applications

http://www.testiphone

com/

Opera Mini

Simulator A live demo of Opera Mini 5 beta that functions as it would when installed

on a handset

http://www.opera.com/

mini/demo/

Emulator Description URL

TagTag

emulator Emulator to view mobile web pages on your computer Enter the page

address at the bottom of TagTag emulator and click on go Browse the page like you would on your mobile phone

http://tagtag.com/site/

info/emulator

OPENWAVE OPENWAVE® phone simulator is a

free software development kit that makes creating innovative mobile applications even easier

http://developer

openwave.com/dvl/tools_

and_sdk/phone_simulator/

Accessibility

Accessibility for your Joomla! Template is an important topic to mention, as your

template is the key container that delivers your Joomla! contents, hence it affects

the output of every page on your website

Accessible content

In order to make your site as accessible as possible, you may need to consider some

of the accessibility topics mentioned in previous chapters Always try to use valid

HTML code to embed or display your content If you are updating your Joomla!

website regularly, then consider learning some basic HTML code Turning off your

WYSIWYG editor, in order to format your content manually will usually allow you

to have cleaner HTML and it may be the start of a new career with the Web!

Secondly, it is important to offer alternative information to cater for users with

disabilities For example, if you link to a document full of text, consider making

an audio version of this available for users who may be visually impaired This

"alternative option" approach can be applied to almost all major content additions

to your website, whether it is text, audio, or video

Accessible template code

With regards to the template itself, your index.php file contains all of the HTML

markup and is at the core of every page that Joomla! delivers It is a page, just

like any HTML page, but has the extension php, and contains PHP code to deliver

the contents of your site It is very important that this document contains valid

HTML code, as validation errors will affect every page of your Joomla! website