Working with HTML5

by Simon Bisson

Is it time to switch? Simon Bisson finds out what HTML5 can do for your applications.

HardCopy Issue: 59 | Published: February 1, 2013

The Web is an important part of any developer’s toolkit, providing a blank canvas for desktop, mobile and tablet user interfaces. It’s a lingua franca that crosses operating system divides and offers the nearest thing to a write-once, run-everywhere development model we have. At the end of December 2012, the latest version of the core Web standards, namely HTML5, became a World Wide Web Consortium (W3C) Candidate Recommendation, the last step on its long road to standardisation.

It’s not surprising it’s taken this long. What we call HTML5 isn’t one specification; it’s a whole raft of different technologies that need the support of companies across the industry. Things are made more complex by the different corporate philosophies of browser developers. What works for Microsoft may not for Mozilla, while Apple and Google could have a completely different set of positions. In the end though it’s the user that matters, and what’s being delivered in HTML5 is a set of standards that should form the basis of the next decade of the Web.

Three pieces come together to make HTML5. The first is HTML5 itself, the latest generation of the Web’s markup language. That’s linked to both CSS3 and to JavaScript, with APIs that make it easy to control a site from code. CSS3, the latest version of the Cascading Style Sheets specification, is also important as it allows improved styling of pages, separating design from layout and from code – as well as supporting media queries that simplify the construction of sites that work across all sizes of screen.

One key result of the open HTML5 standardisation programme is that you are most probably already using an HTML5 browser. The three key browser engines and their associated JavaScript interpreters have all been developed using drafts of the standard – with different levels of support for certain features. However, with a Candidate Recommendation agreed upon, WebKit (as used for Safari and Chrome), Trident (Internet Explorer) and Gecko (Firefox) can all finish the jobs their developers began: delivering a Web where the same piece of markup delivers the same result, no matter what browser you’re using.

 

The features

HTML5 builds on the work done in previous versions, refining elements and attributes and adding new features. The most obvious are support for inline multimedia in the shape of new <video> and <audio> tags that avoid the need for plug-in players. Similarly a new canvas element allows JavaScript code to manipulate onscreen content, allowing HTML pages to contain 2D animated content.

One of the most important HTML5 features comes from CSS3. CSS Media Queries allow a page to quickly get details of the capabilities of the rendering browser so that content can be adapted and formatted on the fly. It’s an approach that’s easier to use than browser detection, and more suited to working with ever-changing browser user agent strings. Responsive Web designs built on Media Queries are an effective way of delivering content and applications, reordering sections on the fly to layout pages so they look their best on the viewing device. Other CSS features simplify animations and transitions, as well as providing design elements that used to require separate image content.

While much of HTML5 relies on JavaScript, some elements do reduce the need for scripting. New form elements allow your browser to validate form contents before submitting them to remote servers. There’s no need to write code to parse telephone numbers or email addresses, for example: it’s all handled by the browser when the user clicks the submit button.

You can simplify HTML5 application development using any of a wide selection of open libraries. Some, like Twitter’s Bootstrap, are focused on front-end development and on CSS; others, like the popular jQuery, give you a framework where you can build and deploy complex applications that work across a wide selection of browsers thanks to support from most major browser and IDE developers. The jQuery library also offers a mobile alternative which can significantly simplify development and includes a templating language that allows developers to put a site together and then designers to quickly add customisations.

 

The tools

While HTML5 is an important component of the modern Web, it’s also finding a role outside the browser in a new generation of desktop and mobile user interfaces. Good quality HTML5 tooling is increasingly common. While much code is written in familiar text editors and IDEs, specialist HTML5 design tools are addressing specific features and situations. Similarly, while most browsers support HTML5 debugging and property inspection, using an IDE allows you to tie debugging directly to code editing.

Microsoft has made HTML5 a key component of Windows 8 as an alternative to its own XAML UI markup language, so you can use HTML5 and JavaScript to build the user interface of a Windows Store app. A set of custom JavaScript APIs give access to low level Windows functions that aren’t supported by browsers. It’s not the only platform that’s chosen this approach: RIM uses it to power WebWorks apps in BlackBerry 10, and Adobe uses it as the heart of its cross-platform mobile development tooling in PhoneGap. HTML development is a useful on-ramp for UI designers approaching new platforms, and in conjunction with the ‘model-view-controller’ design pattern, can significantly reduce development times.

Microsoft’s Visual Studio 2012 adds improved HTML5 support as part of its Windows 8 development features, even in its free Express editions. As JavaScript is now a first-class language in Visual Studio there’s full IntelliSense support, as well as improving the code editor and preview tools (based on the IE9 and 10 browser engine). Other HTML5 tools include improved markup editing and debugging features (including the ability to mark breakpoints on lines that include multiple code elements), and you can test pages in any installed browser as well as quickly seeing the effects of changes to CSS. There’s also the option to extract sections of markup and convert them to user controls, simplifying code reuse.

Embarcadero's HTML5 Builder and Steema Software's TeeChart for HTML5

Using Embarcadero HTML5 Builder with Steema Software’s TeeChart for HTML5.

Microsoft’s Visual Studio LightSwitch rapid application development suite also supports HTML5, delivering ready-built HTML5 applications that can be used in any modern Web browser. There’s no need to know HTML design – it’s just a matter of dragging and dropping components onto a design surface and writing the appropriate business logic.

Adobe is in the process of transitioning much of its developer platform away from Flash to HTML5. While Dreamweaver CS6 remains at the heart of its HTML development strategy – with tooling for building responsive sites using media queries, along with CSS3 design – it’s also rolling out task specific HTML5 design tools to Creative Cloud subscribers under its new Adobe Edge brand. Edge Animate is a design tool that uses the familiar Flash timeline user interface to help designers build complex HTML5 animations. While HTML5 doesn’t have all the features of Flash, it does allow you to build animated content using CSS and the canvas tag.

Sencha is best known for its HTML5 mobile app development framework, Sencha Touch. Using its tools and frameworks you can quickly build touch mobile apps that work across most popular devices and browsers. Sencha has now also brought out its own HTML 5 development environment, Sencha Architect. A visual HTML development environment, Architect lets you drag and drop components on a screen and then wire them up with JavaScript code. Tools in Architect aim to guide you into using best practices, and it’ll work with your usual IDE.

Embarcadero also offers an HTML5 development tool in HTML5 Builder. As well as a markup and JavaScript editor it includes tools for working with CSS3, and with common JavaScript libraries like JQuery. With a focus on mobile application development there’s also integration with Adobe’s cloud-based PhoneGap build service so that you can deliver your Web applications as mobile apps.

 

Working with HTML5

With HTML5 now considered stable, it’s time to start getting sites ready for the final release. A lot of Web developers, especially those working with the mobile Web, are using experimental prefixes in their code. These are no longer necessary now that HTML5 has reached Candidate Recommendation, particularly as browsers continue to improve in leaps and bounds, even on mobile devices.

Many developers are using the WebKit prefixes in mobile applications. With Mozilla launching a Gecko-based mobile OS and with Microsoft’s Windows Phone picking up market share, this is a dangerous practice that looks likely to do the same for the mobile Web as Internet Explorer 6 did for the Web back in the early 2000s. Designing for just one browser, even if it does have a significant proportion of the available market share, risks turning the Web into a monoculture.

Building an HTML5 site requires more thought than earlier versions. CCS3 and JavaScript are key elements of any HTML5 content which means designers, developers and content creators need to collaborate in new ways. Template-based designs simplify content-only sites (with HTML5 navigation features), but with Web applications using HTML5 user interfaces there needs to be significant development – especially if developers are using Web Workers to handle asynchronous communications with a server.

Developers will need to become increasingly familiar with asynchronous design and development techniques. JSON-encapsulated data has been at the heart of RESTful design, and remains crucial to HTML5 development. Callbacks and other techniques are essential to modern site design, and while handled by many HTML5 JavaScript libraries, need to be considered carefully when designing sites and when displaying content. Users need to understand that data is being delivered, otherwise there’s the likelihood they’ll switch to a different site. Web workers simplify this, effectively multi-threading the single threaded Web programming model. However this too needs to be thought of as a major change in the way sites are designed and developed.

With both Flash and Silverlight facing uncertain futures, and plug-in free mobile platforms taking an increasingly larger share of the overall end-user market, it’s clear that developers and designers need to focus on cross-platform alternatives. HTML5, with its improved JavaScript support and additional video and audio capabilities (as well as built-in form validation) is that alternative, supported by all the desktop operating systems and the major mobile platforms. With HTML5 and responsive Web design it’s even possible to do something that wasn’t possible with Flash: deliver one user interface that works across everything from mobile to tablets, TVs and PCs.

Find Out More

You can find the full details of the W3C Candidate Recommendation for HTML5 here.
To discuss any of the tools or technologies covered here, phone us on 01364 654100 or email maildesk@greymatter.com. Alternatively you can check out the Grey Matter website.

 Testimonials Banner
Adobe Creative Cloud for Teams ad