Tuesday
Jul272010
HTML5 for Web Applications Preview
Tuesday, July 27, 2010 at 2:21PM 
A coworker of mine was nice enough to put a brand-spanking new HTML5 book in my name box by my cubicle yesterday morning. I wanted to share with all of you some of my findings. As you know of course, HTML5 is on the horizon and there’s been a lot of buzz about it and even some confusion (I know I was confused as to what specifically this new change meant). I hope this addresses these questions, concerns, etc.First off, I will note that HTML5 will not likely be changing how most of us write web applications. We will still be using JavaScript, JQuery, AJAX, ASP.NET, PHP and everything else that we’ve been using. HTML5 essentially will help us out by giving us some new features to build on what we already have, including backwards compatibility with coding (at least for HTML) and JavaScript support built right into HTML5 (somewhat lessening the extent we have to rely on certain features of JavaScript directly). It will also help simplify some of our coding when creating a new HTML web page (see my below examples).
<!DOCTYPE html PUBLIC >>
“-//23C//DTD XHTML 1.0 Strict //EN” >>
“http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Will now just simply be:
<!DOCTYPE html>
<script type=”text/javascript” src=”file.js”></script>
Will now just simply be:
<script src=”file.js”></script>
Here are some highlights that relate specifically to us (well…mostly):
HTML5 Highlights:
New [standard] Features
- Undo-Manager which helps the browser keep track of document changes (p. 21)
- Canvas element can be used to create games, SVG’s (scalable vector graphics), dynamic graphs/charts (and more!) from user specified input (note: currently there are accessibility issues with this element, but they are being worked on now – additionally this is nearly all run through API’s + JavaScript) (p. 28)
- Ability to embed sound files (MP3 & OGG (note: [issues] MP3 will work with Safari but not Firefox, OGG will work with Firefox, but nothing else; what to do: specify multiple sources, one MP3 & one OGG; IE does not yet support the audio element, must use “object type” code as with Flash)) (p. 30-34)
- Ability to embed videos similar to audio files as above (note: MP4 proprietary (Safari OK, Firefox not), OGV open-source (Firefox OK, Safari not); similar issues as audio) (p. 37-39)
New Form Features
- Placeholder attribute (for a form element that has text in it as a “placeholder” you can now specify that in HTML5 natively. (note: not many browsers support it yet) (p. 41)
- Required attribute (for form validation) now native to HTML5. (p. 44)
- New datalist element for forms (crossbreed of “a regular input element with a select element” (essentially adding a list to an input element)). (p. 45-46)
- New form type values: email, website, and phone. This doesn’t do a lot, but helps certain browsers with what to do with these elements (i.e. if phone were chosen, a mobile device would automatically bring up number selections instead of text, etc.). (p. 47-48)
- Range sliders – min max on a slider (previously had to have JavaScript enabled in order for this to work, now you won’t) (p. 48-49)
- Spinners (allows users to input data into a field and make that go up or down (i.e. enter in the number 10 and go up to 20 or down to 0 using the spinner controls)) (p. 50-51)
- More new features: date, datetime, datetime-local, time, & month (date-month features for input such as in a calendar picker). (p. 51-52)
- Native clr-picker “The plan is for browsers to implement native color pickers like the ones in just about every other application on your computer. So far, no browsers have done this but when they do, it will be, like, totally awesome.” (p. 53)
New Web Application Features
- Offline web applications using a cache manifest (p. 21).
A few other things to note: nothing is STRICT in HTML5 – you can use uppercase, lowercase, or any variant in-between and it will all be readable; White space does not matter; Very little of HTML5 is even useable in current browsers, we will have to keep a keen eye on what features are available where and when and note that if we want to use something from HTML5 it may not work in all browsers (this is especially going to be a problem with Internet Explorer and going back and forth between things like open and closed source functions (i.e. audio and video)). Overall I think there are some great and useful features that I’ll personally be excited to work with (like the canvas), but we may have a bit before it’ll work everywhere yet. It’s certainly a step in the right direction though and if nothing else I will be thankful to finally memorize the DOCTYPE heading at the top of a document.
Reference:
Keith, Jeremy (2010). HTML5 for Web Designers.
New York, NY: A Book Apart.
Helpful Links:
Jennifer Bridges | 1 Comment | in Other News, Techie, Web Apps, designers, html, html5, javascript, jeremy, jeremykeith, jquery, keith, site, web | Share Article 
Reader Comments (1)
You saved me a lot of hssale just now.