Top of this document
Go directly to navigation
Go directly to page content

«  HTML5 Training (Web...   Mediamatic Developers... Printing a badge  »

Jeana Frost 1

HTML5 training: notes from the audience

What I learned at work today

Last week, at Mediamatic Lab, we took a couple of hours to learn more about the new generation of HTML, HTML5. Kerim, JD, and Andreas researched aspects of this mark up language that were relevant for our sites and within their particular expertise. They presented their findings and recommendations for how we, as a company, should integrate HTML5 into our sites currently and as it becomes standardized and is supported by more browsers. Here's a bit of what we learned.
  • Tag people

    html+you=headache-

    HTML5 seems promising but without good IE and other browser support implementing it now could just be a headache... Kerim made this picture to illustrate the conclusions of his research.

HTML5 is the newest version of HTML. From what I heard today, it actually reintroduces many of the features of early versions of IE that were never implemented in other browsers. HTML5 re-engineers these to be more stable in all browsers at least eventually when HTML5 is supported by all browsers...

The presentations identified some of the nicest features of HTML5, those which might be worth implementing now, and what we should think about for the future.

The Presentations and their blog posts

Some highlights

Web storage

Kerim reported about the upgrades to data storage in HTML5. While cookies allow for a limited amount of storage and browsers cache some data, if you are composing work in a browser, interruptions in internet access often mean you lose a lot of work. HTML5 has two types of web storage that could make this a thing of the past. Now if you go offline, you can just put your session on hold and your data is stored locally. Once you reconnect your data can be sent to the server so nothing is lost.

There are two types of storage so a user has access to data throughout a session - using sessionStorage - or even longterm across sessions - using localStorage. Online people are calling it "Cookies on steroids". Kerim made some really nice demos of how these work and included them in his post.

Form features and new body elements

Discussed by Kerim and JD , HTML5 has an expanded set of form and body tags. For forms this means that just by marking up your form elements correctly, browsers can intelligently change the interface to make data entry and validation easier. Currently on a mobile device or anything with a soft keyboard, the keypad will change to be appropriate for that type of form element. For example, if you are entering an email address the "@" will be visible. In the future, desktops will also benefit. The data will be validated for the specified format.

In the meantime, adding more precise body and form element tags will help clean up code and make it more readable.

Autofocus

Not too splashy, but useful, HTML5 will make it easier to put form focus into pages so users can automatically be working in the "right" form field. This will be faster than current javascript implementations that don't determine focus until after the page is loaded.

Fonts

Andreas looked at HTML5 and was most excited by the new possibilities for rendering fonts. Web designers have been bound to "Web-safe" fonts if they want the text to look right, be searchable and easily copied, but that might not be the case for long. New techniques to render fonts allow for many more options. Andreas presented other rendering techniques, their pricing and the browser support. One of the most exciting options is Typekit where you can rent fonts at a reasonable price and choose from a quickly expanding font library. This is changing the face of the web.

We will perform a test to see if we can start using these font libraries in our sites.

Other things and things for later

Drag and Drop

The bottom line on HTML5 and drag and drop seems to be, don't do it (yet). It's not standardized or supported (yet). Read more on Kerim's post. I'll stop here.

Editable content

JD talked about two modes where users will be able to edit all of the html of a page directly, designMode, or a section at a time, contentEditable, but since this will require a lot of parsing so that users don't unwittingly add spurious code and because all browsers interpret formatting differently, we'll wait on this one.

Video support

Different browsers support different video formats and the UI around videos is not the same across browsers so it is tricky to provide cross browser support. Still with no single solution in place at Mediamatic, JD thought it is worthwhile and showed an example of how we could present video by stacking in the CSS so all browsers will show the video and when one format is not available the browser will “fallback gracefully” to the format that is.

Style sheets

Some CSS3 effects some seem promising like the fact that color notations includes alpha/opacity, shapes can have rounded corners and gradients and you can rotate anything. Unfortunately with IE not supporting any of these styles, it's not very useful yet.

Conclusions

HTML5 in the future will allow us to replace scripting on our sites with HTML Unfortunately, HTML5 is not well supported yet so there are only a few aspects of what we learned that we may be able to leverage now.

Contributions 
Jeana Frost,  
Comments