Blog - PB Web Development - PB Web Development

Joomla J!O.S.C.A.R Awards

buipy001@gmail.com (Super User) — Sun, 20 May 2012 14:53:08 +1000

At this years J and Beyond conference was the 3rd annual J!O.S.C.A.R awards. Nominated and voted upon by peers in the community it is seen by many as the awards night for the Joomla community.

This year PB Web Development made it again to the nominations shortlist for the corporate website, etherworks.com.au. Unfortuantely this year we didn't win but we were pretty pleased that we made it to the finalists list. Perhaps we'll try again next year with something bigger and better. Last year we were nominated for our work on the High Court of Australia website but alas missed out on that award and category as well.

Congratulations to all of the winners of this years J!O.S.C.A.R. You're all we'll deserved winners.

List of all the winners from the J!O.S.C.A.R.S 2012

Free Joomla Add-ons

Cost-free extensions or tools, excluding templates

JCE

Community Builder
K2
Mobile Joomla
Virtuemart

Commercial Joomla Add-ons

Paid extensions or tools, excluding templates

ACL Manager

AcyMailing
EasyBlog
JomSocial
sh404SEF

Joomla Template Systems

Free or commercial template frameworks or boiler-plates

Beez

Blank Template (blank.vc)
OneWeb
Gantry
Warp

Joomla Services

Joomla-specific services such as hosting, training, support, contracting, etc...

CloudAccess.net

Open Source Support Desk
OS Training
redHost
Rochen Host

Corporate Web Sites

Web sites built for the corporate sector

stackideas.com

Non-corporate Web Sites

Web sites built for the non-corporate sector such as NGOs, non-profits and Government

joomlagov.info

eCommerce Web Sites

Web sites built for online storefront

www.kaffekapsler.no

Mobile Web Sites

Web sites built for the mobile web

brian.teeman.net

Github Junkie

Recognising core code contributions

Michael Babker

Andrew Eddie
Louis Landry
Rouven Weßling

Communications Junkie

Participation in Joomla chat rooms, blogs and on social media channels

Brian Teeman

Steve Burge
Eric Lamy
Ryan Ozimek
Amy Stephen
Bug Junkie

Finding and/or fixing bugs on the tracker

Mark Dexter

Michael Babker
Bill Richardson
Jean-Marie Simonet
Elin Waring

Innovation of the Year

Joomla Platform

Personal Contribution

Ryan Ozimek

Joomla HTML Overrides Explained

buipy001@gmail.com (Super User) — Sun, 20 May 2012 11:49:05 +1000

With the change to the Joomla core coding to be consistent with the Model-View-Controller coding standard it allowed for Joomla to make use of template views that could be easily customised. This allowed for users to create HTML overrides for various parts of the Joomla output. It also meant that you did not have to modufy the core files of Joomla to customise the views.

The concept of HTML overrides for Joomla isn't new. HTML overrides infact have been around since the release of Joomla 1.5.0 back on the 20th of January, 2008.

With the latest version of Joomla 2.5.x however, we did see the addition of being able to use and output multiple different views to modules within Joomla allowing a component or module to have assigned various different custom views throughout a website.

This article looks at implementing and creating a custom view for a module within Joomla.

We'll look at one of the core modules in Joomla 2.5.x that can have a template override created for it.

The method explained in this example tutorial can be applied to just about all components and modules in Joomla as long as they are created correctly.

You'll need to start by accessing the files that come with Joomla. Using a HTML editor like Dreamweaver will allowyou to explore the site structure of your Joomla installation.

Expand the modules folder from your Joomla install and then pick a module. In this example we'll be using the login module mod_login.

Adding WAI-ARIA Landmarks to Joomla

buipy001@gmail.com (Super User) — Thu, 17 May 2012 08:26:19 +1000

In the world of accessibility, ARIA landmarks help screen readers identify common areas of the website in a consistent way. Users with assistive technologies can now use these landmarks to navigate to sections of a page's content. These landmarks are a vast improvement to the commonly used, "skip to content", and "skip to navigation" commonly deployed prior to WAI-ARIA but personally I believe still shouldn't be disregarded.

Having landmarks on all websites will help assistive technologies provide a consistent user experience for this audience.

http://www.w3.org/TR/wai-aria/rdf_model.svg

Class diagram of the relationships described in the role data model.

Adding these landmarks to your Joomla website is quite easy with the use of HTML overrides. These HTML overrides introduced with Joomla 1.5.x allows a web developer to replace the output of the Joomla code from any component or module with their own custom output, thus allowing for the addition of WAI-ARIA landmarks to be added to your Joomla website without the need for modifying the core code.

Understanding Joomla HTML Overrides

To be able to add WAI-ARIA landmarks to a Joomla website you must first understand the concept of HTML Overrides and how to implement them to a Joomla template.

To find out more, please read Joomla HTML Overrides and implementation explained.

Modifying the Joomla Templates

With other areas of a Joomla website where we must modify the template output, we'll need to access the website's main template and add in containing divs or modify existing ones to add in WAI-ARIA landmarks.

Different WAI-ARIA Landmarks

There are several common WAI ARIA landmarks that can be added to a Joomla website including:

application
banner
complementary
contentinfo
form
main
navigation
search

Application

The application landmark represents an area of the website's page that is a software/application presented for a set of tasks for its users.

Banner

Area that contain the main heading or internal page title. Usually contains the logo, site sponsor banners, main page title and search tools. Could also possible house a navigational menu.

Complementary

Complementarty is a supporting area of the website such as side bar that contains meaningful information to the main area of the page. It could possibly contain, secondary navigation, related information or content.

Contentinfo

Metadata that applies to the parent document. For example, footnotes, copyrights, and links to privacy statements would belong here.

Form

Defines an area of the page where there is a form elements for user interaction and input.

Main

This is the main content area of the page and there should be no more than one main defined on any page.

Navigation

This can be the main website's navigation or the page document's navigation.

Search

This landmark defines the website's search functionality area.

In this example of adding in WAI-ARIA landmarks to Joomla, we'll be adding in the most common landmarks found in most Joomla websites including banner, main, navigation, search and complementary.

Adding the a WAI-ARIA Landmark

Each module in the module positions of a Joomla website can be modified and have new HTML overrides added to them.

Lets have a look at the default installation of Joomla 2.5.0 as an example of areas where we can specify these roles.

Demo site available at: http://demo17.cloudaccess.net/

Lets start with the easiest landmarks to add with the Modules.

Adding WAI-ARIA landmark to Joomla Search Module

Once you have found and copied the main template file of the Joomla search module as defined in the HTML overrides tutorial for Joomla, you will find this code as the output at line 13.

<div class="search">

This is the opening div container to the search module.

Add in the role landmark role="search" to the div like so:

<div class="search" role="search">

and add the file back into your HTML overrides folder of your Joomla template.

You're Joomla website should now have the search role landmark added to the template.

Download the modified WAI-ARIA search default.php HTML override file.

Adding WAI-ARIA navigation landmark for Joomla

The menu module is usually the default module used in a Joomla website's navigation. On some website build it may be used multiple times on page layout to display menus and links to different areas of a website.

If we modify the default HTML override file and add in the navigation role then all of the menus on the website will be marked as navigation. In some situations you will only want one of the menu items marked as the website's navigation.

To give you more control over the override we will create a separate override template and assign only one module to have the new override with the WAI-ARIA navigational role. Yo can however use the template on multiple modules on a page is so required.

First start off by duplicating the HTML override of the module menu to your Joomla template. Please refer to the HTML overrides creation tutorial if you do not know how.

Once created, rename it from default to another name such as "waiaria". This will let you identify the WAI-ARIA version of the html override.

at approximately line 15 of the file, you will find:

<ul class="menu"<?php

This is the starting unordered list that creates a menu structure in Joomla. Before this line you will have to create a containing div with the navigation role. You will get something like this:

<div role="navigation">
<ul class="menu"<?php

You will now have to end the containin div or else your website's layout will break. At line 83 at the end of the file you will find:

?></ul>

add the closing div tag after this.

?></ul>
</div>

Save the file and upload it back to your mod_menu html override folder in your template.

Once this is done, your site won't automatically output the WAI-ARIA landmark until you set it.

In the administrator area of your website, navigate to Extensions->module manager and select your main website's navigation module.

On the right hand side of the modules parameters is the advanced settings. Expand these parameters and you will be presented with the option of changing the modules template from a drop down menu.

Choose the "waiaria" template that we have just created and hit save and close to apply it to the website.

You should now have applied the WAI-ARIA template and now have the navigation role added to your website's main nav area.

Download the modified WAI-ARIA mod menu waiaria.php HTML override file.

Adding WAI-ARIA Landmark to Joomla Login Form

As in the previous example where we create a separate WAI-ARIA template for a specific use, we'll repeat the steps in creating a custom HTML template override for the login form and call it "waiaria-login".

In this file at line 13 you will find:

<?php if ($type == 'logout') : ?>

add in the wrapping div tag with the form role.

<div role=form">
<?php if ($type == 'logout') : ?>

and close the div after line 83 with the closing div tag.

</form>
</div>

Save and upload the custom override to your template.

Navigate to your login form module under Extensions->Module Manager and click on your login form.

Under advanced parameters choose the newly create WAI-ARIA login template and hit save.

Download the modified WAI-ARIA mod login waiaria-login.php HTML override file.

Final Modifications to the Main Template

The final role areas that we are going to add in this example are the banner role, complementary role and the main role. These landmark roles usually have to be applied to the template itself and will require a bit of knowledge in how Joomla templates work.

In the case of the default Joomla Beez template that comes with Joomla 2.5.x, the only file that you need to modify can be found in the beez tempalte folder, /templates/beez_20/index.php

Banner Landmark

For the banner landmark we are simply going to add the role to the already existing Joomla header div. At line 113 you file find the main header div

<div id="header">

and add in the role

<div id="header" role="banner">

and you're done with the banner landmark.

Complementary Landmark

At line 155 you will find the start of the left side bar of Joomla.

<div class="left1 " id="nav">

at the end of this add in the role

<div class="left1 " id="nav" role="complementary">

Once again, because this is an already existing div you do not have to add in an extra ending div.

Main Landmark

The final landmark that we are adding is the main landmark that defines the main content area of a page.

On line 166 of the index.php file you will find the opening main div container.

<div id="main" role="main">

add in the role at the end,

<div id="main" role="main">

There is no need to close the div as it is already an existing one that is closed.

Once you have added this last landmark role in your are done in modifying your website template for Joomla to have WAI-ARIA landmarks.

Download the WAI-ARIA modified default Beez_20 template.

Save and upload the file back to your server and test the site against your assistive technologies to make sure that the landmarks are working correctly.

You're All Done!

All websites are different and you will need to make changes accordingly to your website. This example and tutorial whoever should give you an overview of the different methods required to add landmarks to various areas of your website.

If I have missed anything or haven't explained anything clearly, please don't hesitate to ask.

Additional Useful Reading

HTML5 Video Accessibility Presentation by Silvia Pfeiffer

buipy001@gmail.com (Super User) — Mon, 30 Apr 2012 15:51:33 +1000

In doing some more internal research here at PB Web Development on accessibility and videos I've come across this video presentation by Silvia Pfeiffer at a Google Developer's conference in March 2011.

I've seem a similar presentation by Silvia late in 2011 at the OZeWAI conference where she presented the same if not similar content. We'll worth watching if you're involved in accessibility and videos.

It is exciting to see some new technologies emerging and things slowly being taken up.

Link directly to YouTube video of the presentation.

Product Mavens - Battle of the Apps

buipy001@gmail.com (Super User) — Wed, 25 Apr 2012 12:48:30 +1000

This month at Product Mavens we tried something a little different for the topic of the night. Instead of having a planned presentation and feeding information to the meetup group, we had a discussion panel where they had questions fired at them about certain apsects of mobile and a product platform.

More photos of the night can be found at the meetup group.

WordPress Sydney Meetup E-Commerce

buipy001@gmail.com (Super User) — Wed, 25 Apr 2012 12:03:25 +1000

Last month's WordPress meetup was all about e-commerce, what you should be looking at when starting an e-commerce project, an overview of some popular e-commerce plugins for WordPress and also a more indepth look into the Shopp e-commerce plugin for WordPress.

Thank you to Dee for giving the group a well rounded overview of the e-commerce environment for WordPress.

My slides which looked into the Shopp plugin can be found on slide share.

WordPress Shopp Plugin Review

View more presentations from Peter Bui

Shopp for WordPress Presentation Overview

Great array of additional plugins for Shopp
Easy template cusotmisation with template overrides/child theme for the shopp plugin
Easy cart management separate from posts and pages
Integration with Amazon S3
Shipwire integration
Promo code congifuration
Shipping calculators with AusPost and more
$55 US for single license $299 for a developer license
Awesome support and API

Sydney Joomla User Group - Upgrading Joomla 1.5->1.6+

buipy001@gmail.com (Super User) — Wed, 25 Apr 2012 00:00:00 +1000

This month in April we looked at upgrading Joomla using SP Update or JUpgrade for Joomla. Both methods have its pros and cons as we looked deeper into how they work.

The part that I presented on was the SP Update method using the component from CyEnd.

Joomla upgrades

View more presentations from Peter Bui

SP Udate Overview

The component overall does a good job of updating and migrating data from Joomla 1.5 to 2.5.x series.

My personal opinion of the component is that it will get the job done but there is still more work to do afterwards to help fine tune the process of upgrading the content to the website. As with any automated processes there is always more work to do.

With upgrading our own websites from Joomla 1.5 -> 2.5.x we've found it easier to copy the data from the tables over manually and setup default permission levels and category assignment for all the entires and then manually reassigning or rearchitecturing the website.

This is a step that we usually would have done either way with upgrading a website and more likely prefered method internally at PB Web Development.

For other custom databases or components that SP Upgrade didn't update, you'll have to manually rebuild or update these as well to suit Joomla 2.5.x.

At least the upgrade path to Joomla 3.0.x will be much easier.

Ultimate Htaccess File for Joomla

buipy001@gmail.com (Super User) — Sun, 15 Apr 2012 17:50:13 +1000

For years I have been playing around with the main .htaccess file for Joomla and over time have created quite a beast of a file.

Not only does this .htaccess file provide the default search engine friendly URL functions as you'd expect with Joomla, it also applies a huge amount of security settings that can be applied in the .htaccess file as well as a set of optimisation and custom configuration settings to make your server work the way you want it to and now I'm going to share it with the Joomla community.

This blog post will go through in detail what each addition to the .htaccess file does allowing the user to understand and customise what they have in their own.

This file has been tested on many server configurations and many of our hosting partner servers and works quite nicely.

Please note that in some situations not all of these additions will work and will actually stop your site from work so please make a backup of your website and your original .htaccess file for restoration.

Please make a backup of your website and .htaccess file before applying these changes.

Looking at the File

Download the file (47kb txt)

Htaccess File Explaination and Credits

Only a few parts of the file are credited to myself, the rest has come from the Joomla community and the great people that have put together the resources for the HTML5 responsive boiler plate package.

Find out more at:

http://docs.joomla.org/Htaccess_examples_(security)
http://html5boilerplate.com/

Health Eyes Exercises and Tips

buipy001@gmail.com (Super User) — Sun, 15 Apr 2012 17:23:28 +1000

As most of the people that read this blog work in IT and the web I thought it would be nice to remind everyone to do their eye exercises to help keep what little eye sigh we have left.

The lovely people over at Mezzmer have created this fantastic info graphic to remind of is the best practises when it comes to working at the computer for hours on end.

Beware of computer radiation and remember the 20-20-20 rule, every 20 minutes, take a 20 second break, focus on something 20 feet or a longer distance away.

Click to view full infographic

Joomla 2.5.4 Released

buipy001@gmail.com (Super User) — Tue, 03 Apr 2012 10:07:28 +1000

A new patch and security release has been announced today for the Joomla 2.5.x series.

This latest release 2.5.4 addresses over 150 different fixes and improvements to the content management system. If you're using Joomla 2.5.x it is suggested that you upgrade to the lastest version to take advantage of these fixes and improvements to the UI and general system.

More information can be obtained about the update from the Joomla.org website.