Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Molly Holzschlag - How HTML 5 is Going to Completely Change your Web App


Published on

The HTML 5 spec was originally called "Web Applications 1.0". Most of the attention has been on the new markup elements, but we'll look further at the applications side of the spec, including: 1. Dynamic images and graphs with canvas 2. Eliminating forms validation with webforms 2.0 3. Local storage for saving your data 4. Geolocation 5. Building toolbars and menus

Published in: Technology
  • Be the first to comment

Molly Holzschlag - How HTML 5 is Going to Completely Change your Web App

  1. 1. HTML5 The Future of Web Applications molly e. holzschlag | web evangelist, developer relations | opera software
  2. 2. origin of the species web hypertext applications technology working group (what-wg)
  3. 3. <canvas>
  4. 4. canvas is . . . controversial WHAT-WG W3C ? accessibility concerns at-risk under W3C
  5. 5. <form>
  6. 6. before hixie (b.h.) <form action="" method="get"> <p><label>Search: <input name=search type="text" id="search"> </label></p> <script> document.getElementById('search').focus() </script> <!-- the rest of the form --> </form>
  7. 7. after hixie (a.h.) <form><p><label>Search: <input name=search autofocus> </label></p> <!-- the rest of the form --> </form>
  8. 8. validation <form> <p><label>Name: <input name=name required></label></p> <p><label>E-mail: <input name=”email” type=”email” required></label></p> <p><label>URL: <input name=”url” type=”url”></label></p> <p><label>Comment: <textarea name=”comment” required></ textarea></p> <p><input type=”submit” value=”Submit”></p> </form>
  9. 9. storage
  10. 10. Offline Web Applications ApplicationCache
  11. 11. Client-side data storage: Per-session via sessionStorage Persistently across sessions via localStorage and client-side SQL database storage
  12. 12. HTML5 APIs postMessage() - cross document messaging API for native drag and drop without the need for script Native getElementsByClassName accesskey and spellcheck keygen element how to handle SVG in text/html
  13. 13. Related APIs Geolocation - allowing script access to geolocation data Native JSON support XMLHttpRequest (level 1 and 2)
  14. 14. Device APIs JIL - Joint Innovation Lab - for widget and device development BONDI - From Open Mobile Terminal Platform (OMTP) - also for widget and device development Both allow scripting access to data such as remaining battery power, available bandwidth, processor speed and other aspects to device-specific, mobile behavior