You must have Javascript enabled to experience this site.

HTML5 Development

Posted & filed under Coding Tips.

It seems these days that everyone is doing Responsive Web Design with HTML5 and CSS3, so here are some things to get you started.

Responsive Web Design (http://en.wikipedia.org/wiki/Responsive_Web_Design) is getting a lot of buzz and having a website that is as attractive on the small screen of a smart phone as it is on a wide screen desktop is certainly getting a lot of focus from clients. While there are plenty of books available on HTML5/CSS3, the best I have found on this topic is Responsive Web Design with HTML5 and CSS3 by Ben Frain (Packt Publishing Ltd, 2012, ISBN 978-1-84969-318-9).

[And before anyone says anything – Yes, I know currently (as of 2012Jul18) this site is HTML4. I should have updated it while converting to Joomla 2.5, but I’m busy; I will get around to it. 🙂 ]

These Firefox Extensions will help

My main development environment is on Windows, so to provide Apache and MySQL I am using XAMPP (http://www.apachefriends.org/en/xampp-windows.html).

As most of my web development is using either WordPress or Joomla the Zend PHP Development Tools (http://www.zend.com/en/community/pdt/) are the obvious place to start. Download the “All-in-one” build (http://www.zend.com/community/pdt/downloads) and install.

For version control I am using Subversion and Subclipse by Tigris (http://subclipse.tigris.org/) is the standard interface.

The Smarty Template Engine (http://www.smarty.net/) helps to separate control and presentation logic within a PHP application. There is a Smarty PDT Eclipse plugin that provides colour highlighting and code completion for Template files. Just follow the instructions (http://code.google.com/p/smartypdt/wiki/InstallSmartyPDT). Don’t forget to un-tick ‘Group Items by Category’ or you won’t see the plugin.

I like LESS (http://en.wikipedia.org/wiki/Less_css) as it makes coding CSS much easier. Installing in Windows can be a bit tricky though (http://blog.dotsmart.net/2010/11/26/running-the-less-js-command-line-compiler-on-windows/). Firstly you will need to install a lessc command for Windows (https://github.com/duncansmart/less.js-windows). Then install the Eclipse plugin for LESS (http://www.normalesup.org/~simonet/soft/ow/eclipse-less.fr.html). The author’s instructions are based on the Eclipse Java EE package, rather than the PDT build. I found for PDT the steps were:

I have been using the W3C Default style sheet for HTML4 (http://www.w3.org/TR/CSS2/sample.html) as a starting point for some time, so it was an easy step to use the HTML5 Boilerplate (http://html5boilerplate.com/) instead. The Bones WordPress Theme (http://themble.com/bones/) is based on this; so is the Cambridge Software HTML5 Joomla Template (http://cambridgesoftware.co.uk/blog/item/64-free-future-proof-html5-joomla-template-for-responsive-web-design).

Happy coding!

3 views