HTML5 and friends
9 likes3,094 views
HTML5 and related technologies like CSS3 and JavaScript are evolving the web platform. Browser makers have adopted HTML5 through the WHATWG to evolve browsers together in a backwards compatible way. HTML5 includes new semantic elements, forms, multimedia, graphics, and APIs. CSS3 adds new selectors and properties. JavaScript gets improvements. Browser support is increasing so developers can start using new features now while maintaining backwards compatibility. The modern web stack is taking shape but full support across all browsers will still take time.
HTML5 and friends
- 1. HTML5 and friends Bobby van der Sluis August 20, 2010
- 2. Take AWAYs ★ what is HTML5? ★ Why is it hip? ★ What will it change?
- 3. THE ROAD TO HTML5
- 4. W3C for over a decade tried to create an XML-based web
- 5. BUT FAILED MISERABL Y ★ Internet explorer: 95% ★ 1 syntax error breaks a page ★ overly complex ★ new stuff not backwards compatible
- 8. WHATWG ★ mozilla + opera + apple ★ evolve web browsers ★ foundation of html5
- 9. w3c in 2009 Xhtml is dead, long live html5!
- 10. the new pragmatism ★ browser makers decide ★ backwards compatibility ★ paving the cowpaths ★ evolve together
- 12. THE PROCESS WORKS!
- 13. The standards-based web is evolving faster than ever
- 15. HTML5 - the spec ★ used to be huge ★ lots taken out ★ still a work in progress ★ getting in good shape
- 16. What’s in it? ★ lots of developer goodies ★ adds semantics - e.g. header, footer, nav, article, aside ★ everything is clickable, draggable or editable
- 17. 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.
- 18. Heavy hitters ★ audio and video ★ bitmap canvas ★ offline browsing
- 19. HTML5 - the Buzzword includes many related technologies
- 20. The future web stack ★ html5 ★ css3 ★ svg ★ new dom apis ★ ecmascript 5 ★ vendor specific additions
- 21. CSS3 ★ 50 modules ★ prioritized ★ mostly a work in progress
- 22. 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
- 23. Pure gold CSs animations, transitions, 2d & 3d transforms to enable Flash-like animations
- 24. SVG ★ a relatively old spec ★ vector graphics ★ embeddable in html5 & css3
- 25. 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
- 26. NEW DOM API’s ★ workers - multi-threaded javascript ★ sockets - 2-way communication ★ web notifications + server-sent events - incl. push notifications
- 27. 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
- 28. NEW DOM API’s ★ FILE api ★ contacts api ★ media capture ★ mime type & protocol handler registration
- 29. ECMAScript 5 ★ defines javascript 1.9 ★ new developer goodies - e.g. native JSON ★ security & consolidation
- 30. OTHER developments ★ webgl - hardware accelerated 3d graphics (3d context for canvas) ★ touch & gestures ★ fullscreen ★ next-gen javascript engines ★ built-in developer tools ★ hardware acceleration
- 31. Conclusions
- 32. web Development 2.0 The web technologies of tomorrow are being defined today
- 33. The rise of a powerful open web platform ★ better performing user interfaces ★ decreased need for plug-ins ★ able to compete with desktop applications
- 34. Nice, but when will it arrive?
- 38. 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?
- 39. How does this affect me today?
- 40. 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
- 41. Get acquainted: books & demos