HTML5 best practices: Slide Show web application, part 1

The online Slide Show [1], implemented as HTML5 web application is serving both practical and didactic purpose. For the absolute beginners, HTML typically stands for HyperText Markup Language [2], though the popular geek culture already came out with the humorous variation like “How To Meet Ladies”. Well, though both topics are seemingly rather important, but this article is all about the core Internet emerging standard (specifications), which is HTML 5.

HTML5 is still “a work in progress”, not formally completed and not officially realized, so the modern day Internet is still running on the latest version 4.01, a minor revision of the fundamental version 4, which has been around since late 90s. There are several compelling reasons for this major upgrade to HTML5, partially listed below:

Proliferation of the high-speed Internet opens the window of opportunity for high-quality Video/Audio rendering, which stimulates the requirement for new HTML standards/specs, adequately addressing this utmost important trend (it has been accomplished by including new audio/video elements in HTML5 draft specs)
The need for online image processing, drawing and charting applications (addressed by adding canvas element)
Web Browsers becoming the de-facto Operating Systems (OS) for the Internet/Mobile-connected web applications, effectively resolving the massive compatibility/portability issues, pertinent to all currently existing “true” desktop OS like Mac, Windows or Linux
Open Source movement, effectively resolving the web application compatibility/portability issues, currently existing due to the various proprietary and essentially incompatible technologies from different vendors, seated at the core of modern RIA (media-Rich Internet Applications RIA): just to name the couple of most important competing ones, which are Adobe Flash and Microsoft Silverlight client-side technology frameworks

To put it in a single sentence: HTML5 is intended to be a unifying technological ground for all Rich Internet Applications (RIA) of the near future. Its potential techno-economic impact could hardly be overestimated. There is a very little doubt that HTML5 is on the path to becoming “the next big thing”, even one of the next biggest things of the decade, decorating our technological horizon [3].

Top3 biggest newcomers found in HTML5

HTML in general is about elements and corresponding tags. Without much of discussion (which will be the central topic of the following articles), just naming the “big three” elements coming “with the territory”:

Video
Audio
Canvas

There is certainly a great deal of other good stuff included in HTML5 draft specs, but these ones by far are the centerpieces, true agents of changes and the transformative force behind the incoming Internet technological revolution (more reading at [3]).

CSS3 and jQuery

CSS stands for Cascading Style Sheets, representing another pillar of the web application development. The highly-awaited CSS version 3 working in conjunction with HTML5 provides the plethora of new techniques, allowing to render the aesthetically-appealing web pages without using any of graphic files (.jpg, .png), thus dramatically reducing the web application overall footprint and development time/labor [4]. CSS3 is mostly about web page formatting (presentation), but certain functionality could be also achieved using pure HTML5/CSS3 solution. As an example, refer to the online slide show [5] implemented via pure CSS3. This approach could be rather useful in case of client’s browser restricting any scripting language, like Javascript.

jQuery could be considered a third pillar of the modern Internet technology, extending the web page functionality through the powerful client-scripting technique. It’s built as a “wrapper” around Javascript language, thus encapsulating the complexities of the underlying technology and providing the developer with dramatically simplified yet very powerful set of API (Application Programming Interface).

Separation of concerns: programmatic paradigm

Modern web application development adheres to the paradigm of the separation of concerns (in the narrow, programmatic sense; not to be confused with, let’s say, our national debt or housing bubble :), identified as: Content, Formatting and Functionality, tightly associated with the “threw web technological pillars”, discussed above:

Content -> HTML5
Formatting ->CSS3
Functionality->jQuery

As it was mentioned above, certain web page functionality could be achieved not only by using jQuery or other scripting languages, but also via pure CSS3, so be aware that in the real world the actual “concern-tool” relationship matrix looks more like many-to-many rather that one-to-one. Now, as the core definitions and the basic abstracts are clarified, it is about time to switch the focus to the slide show application itself and discuss the usage, some critical implementation details and best practices.

Sample content: NY Auto Show 2011

Pictures at an exhibition, almost A La Mussorgsky :)… The slide show sample content is pertinent to the most recent New York International Auto Show 2011 [6-8], which was held at Javits Convention Center in April. As it was said long time ago, picture is worth a thousand words. Well, it also has a dramatically bigger digital footprint. The entire slide show web application comprised of all that HTML5, CSS3 and jQuery source code is encapsulated in a single .htm file of approximately 25k, while any of medium-quality .jpg pictures typically takes around 100k of the memory space. The images used in this particular demo application, displaying popular luxury/sports brands like Bentley Continental GT, Rolls-Royce Phantom (btw, this year the Spirit of Ecstasy, this nice winged woman “Emily” or “Flying Lady” celebrates her 100th year anniversary: still looking good! :), Spyker C8 Aileron, concept cars (SAAB Concept PhoeniX, etc.) and electric cars (Nissan Leaf) have been taken with high-resolution (14MP) digital camera and then compressed in order to fit the 1024px-wide screen. Correspondingly, the image files size was reduced to about 100k from the original one in the range of 6Mb. It’s important to note, that the slide show application is capable of processing images of any size, so this compression was made solely for the purpose of faster page loading.

Slide show control panel

Control panel located at the bottom of the web page allows to run the slide show in either automatic (auto-progressing), or manual modes. The control buttons corresponds to the following actions:

Start/Stop: switch between auto/manual modes
Move Next: proceed to the next slide
Move Last: jump to the last slide
Move Previous: move back to the previous slide
Move First: jump to the first slide

The automatic mode implements the “infinite loop”, which means that upon reaching the end of the show the application will return back to the first slide and then continue. Control panel could be turned ON/OFF, thus releasing some valuable “digital estate” for the full-screen presentation.

Slide Show image area

Content section of the slide show application looks like the following HTML code snippet (see listing 1)

Listing 1.

The content part encapsulated in divImageArea division tag (div) is comprised of set of image tags (img) with attributes:

Alt is a mandatory attribute of img tag, providing text to be displayed in case the images are restricted by client’s browser
Zoom (optional) specifies the slide transformation mode to be applied instead of the application default settings (explained below)
Title (optional) provides the caption for the slide: if missing, the content of alt attribute will be used instead

Base element/tag

Base element in HTML 4/5 specifies the root directory the image files are relative to. In other words, it provides a shortcut to the src attribute, so instead of typing the entire URL (complete web address starting with that “http://”) it allows just a short form, specifying the image file names only.

Zoom modes

Slide show application allows various zoom/stretch modes to be applied to each individual slide (see Listing 2). The default mode is specified by line var _zoomMode = 1, but this default setting could be overriden by the image attribute, for example, zoom="2" (see Listing 1)

Listing 2.

// == SETTINGS =============================================================
    // 0 - display as is
    // 1 - stretch vertically and position in the center horizontally
    // 2 - stretch horizontally to full screen
    // 3 - no zoom, position in the middle of the screen
var _zoomMode = 1;

Other Slide Show settings

The commented list of the slide show application default values is shown below (see Listing 3).
    var _slideDelay = 5000;                     // auto-progression delay
    var _delayFadeOFF = 500;                    // transition fade off delay
    var _delayFadeIN = 500;                     // transition fade in delay
    var _toggleCaption = 500;                   // caption animation delay
    var _toggleLogo = 500;                      // Logo animation delay
    var _ctlOpacityOFF = 0.1;                   // control panel min opacity
    var _ctlOpacityON = 0.9;                    // control panel max opacity
    var _infoW = 600;                           // info panel width
    var _infoH = 160;                           // info panel height
    var _addCaption = true;                     // show slide caption
    var _captWidth = 40;                        // in %
    var _captionPrefix = "NY AUTO SHOW 2011 | "; // caption prefix

Building custom slide show

In order to build the custom slide show, just follow the steps:

Replace the Base tag with your own root folder
Replace Image source (src attribute) with your own image files, residing in that root folder

And voilà ! Save the file with .htm extension (it could be re-named up to the user preferences) and try to open it in any HTML5-compatible web browser. Note: some compatibility issues could rise as specified in the following section.

Web Browsers compatibility

It was mentioned above that HTML5 specs are still not completely formalized and not officially released, but many available features are already supported (or partially supported) by all major browsers, namely:

Mozilla FireFox version 4+
Google Chrome version 10+
Apple Safari version 5+
Microsoft Internet Explorer version 9+ (partially compatible)

Afterword

This article is the first in series dedicated to HTML5. It demonstrates the emerging technology specs on the basis of a sample web application - slide show. Next articles will provide a deeper insight into programming technique and best practices pertinent to all “three pillars” of the client side web application development, namely: HTML5, CSS3 and iQuery.

References