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

  • 9,674 views
Uploaded 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. …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,674
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
37
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

















Transcript

  • 1. HTML5 The Future of Web Applications molly e. holzschlag | web evangelist, developer relations | opera software
  • 2. origin of the species web hypertext applications technology working group (what-wg)
  • 3. <canvas>
  • 4. canvas is . . . controversial WHAT-WG W3C ? accessibility concerns at-risk under W3C
  • 5. <form>
  • 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. after hixie (a.h.) <form><p><label>Search: <input name=search autofocus> </label></p> <!-- the rest of the form --> </form>
  • 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. storage
  • 10. Offline Web Applications ApplicationCache
  • 11. Client-side data storage: Per-session via sessionStorage Persistently across sessions via localStorage and client-side SQL database storage
  • 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. Related APIs Geolocation - allowing script access to geolocation data Native JSON support XMLHttpRequest (level 1 and 2)
  • 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