HTML5 and friends
Upcoming SlideShare
Loading in...5
×
 

HTML5 and friends

on

  • 8,500 views

Presentation I gave at Blast Radius' Biertje o'clock

Presentation I gave at Blast Radius' Biertje o'clock

Statistics

Views

Total Views
8,500
Views on SlideShare
6,878
Embed Views
1,622

Actions

Likes
8
Downloads
54
Comments
1

5 Embeds 1,622

http://www.bobbyvandersluis.com 1525
http://davaidavai.com 81
http://stoll.posterous.com 9
http://bobbyvandersluis.com 6
http://paper.li 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 and friends HTML5 and friends Presentation Transcript

  • HTML5 and friends Bobby van der Sluis August 20, 2010
  • Take AWAYs ★ what is HTML5? ★ Why is it hip? ★ What will it change?
  • THE ROAD TO HTML5
  • W3C for over a decade tried to create an XML-based web
  • BUT FAILED MISERABL Y ★ Internet explorer: 95% ★ 1 syntax error breaks a page ★ overly complex ★ new stuff not backwards compatible
  • In the meantime...
  • WHATWG ★ mozilla + opera + apple ★ evolve web browsers ★ foundation of html5
  • w3c in 2009 Xhtml is dead, long live html5!
  • the new pragmatism ★ browser makers decide ★ backwards compatibility ★ paving the cowpaths ★ evolve together
  • THE PROCESS WORKS!
  • The standards-based web is evolving faster than ever
  • HTML5 - the spec ★ used to be huge ★ lots taken out ★ still a work in progress ★ getting in good shape
  • What’s in it? ★ lots of developer goodies ★ adds semantics - e.g. header, footer, nav, article, aside ★ everything is clickable, draggable or editable
  • What’s in it? ★ forms on steroids - e.g. date picker, slider, spinner, color picker, email field, telephone field, custom fields -> less JavaScript ★ browser history mgt. ★ undo mgt.
  • Heavy hitters ★ audio and video ★ bitmap canvas ★ offline browsing
  • HTML5 - the Buzzword includes many related technologies
  • The future web stack ★ html5 ★ css3 ★ svg ★ new dom apis ★ ecmascript 5 ★ vendor specific additions
  • CSS3 ★ 50 modules ★ prioritized ★ mostly a work in progress
  • coming soon ★ colors with alpha ★ opacity ★ backgrounds & borders - e.g. rounded corners, scalable bg, multiple bg. ★ web fonts ★ media queries - conditional style rules, e.g. based on device width or screen orientation
  • Pure gold CSs animations, transitions, 2d & 3d transforms to enable Flash-like animations
  • SVG ★ a relatively old spec ★ vector graphics ★ embeddable in html5 & css3
  • NEW DOM API’s ★ geolocation - uses gps, cell tower triangulation, nearby wifi access points, IP geolocation -> location aware browsing ★ client-side storage + db - bye, bye cookies ★ cross-document messaging ★ Cross-domain ajax + resource sharing
  • NEW DOM API’s ★ workers - multi-threaded javascript ★ sockets - 2-way communication ★ web notifications + server-sent events - incl. push notifications
  • NEW DOM API’s ★ microdata - alternative for rdfa and microformats ★ WAI-ARIA - enabling accessibility for web applications ★ widgets - packaging a web app to run as a native app
  • NEW DOM API’s ★ FILE api ★ contacts api ★ media capture ★ mime type & protocol handler registration
  • ECMAScript 5 ★ defines javascript 1.9 ★ new developer goodies - e.g. native JSON ★ security & consolidation
  • OTHER developments ★ webgl - hardware accelerated 3d graphics (3d context for canvas) ★ touch & gestures ★ fullscreen ★ next-gen javascript engines ★ built-in developer tools ★ hardware acceleration
  • Conclusions
  • web Development 2.0 The web technologies of tomorrow are being defined today
  • The rise of a powerful open web platform ★ better performing user interfaces ★ decreased need for plug-ins ★ able to compete with desktop applications
  • Nice, but when will it arrive?
  • Browsers ★ Firefox, chrome, safari, opera have short browser update cycles ★ what will ship with internet explorer 9? ★ when will internet explorer 6, 7 & 8 be phased out?
  • How does this affect me today?
  • FOR Developers ★ start using the html5 doctype and syntax today - It is already supported cross-browser today (hurray backwards compatibility!) - leaner, better readable markup compared to xhtml - ready for the future, e.g. just drop in the <video> element at any time you feel comfortable with ★ do not overdo it - only use new html5 elements when cross-browser supported
  • Get acquainted: books & demos