HTML5, CSS3 and the Future of the Web
1 like539 views
The document discusses the past, present, and future of web development. It describes how early web development lacked standardization and browser compatibility (Thesis). Standards and cross-browser support improved but slowed innovation (Antithesis). New features in HTML5 and CSS3 specifications will help drive the web forward again by bringing new capabilities while allowing for degradation, with a focus on standardization and multi-browser support (Synthesis). Key new elements include audio/video, canvas, drag/drop, and geolocation for HTML5, and new selectors, backgrounds/borders, transformations and animations for CSS3.
HTML5, CSS3 and the Future of the Web
- 1. HTML5, CSS3 and the future of the Web Berg Brandt Front-End Engineer / Web Developer / Web Designer
- 2. Thesis, Antithesis, Synthesis A look to the past to understand the future
- 3. Thesis âą Early web development â Very incipient, rough â Lack of standardization â Proprietary browser features and browser speciïŹc development â Early adoption of new features â Tools, technologies and development techniques undeïŹned â Browser wars: IE has won â Technology by technology â Web in constant and fast evolution
- 4. Antithesis âą Web Standards â Strong standardization initiative â Support to multiple browsers and platforms â a11y, L10n, i18n â Structure, Presentation and Behavior layered â Tools, technologies and development techniques more well deïŹned â Degradation techniques â New features not widely supported can not be used â Web evolution slowing down
- 5. Synthesis âą Coming soon â HTML5 and CSS3 speciïŹcations bringing new and awaited features â Less strictness on standards: HTML5 is less strict than XHTML â Developers more educated â Development not entirely browser coupled, but some restrictions/requirements need to exist â Browsers âGrand Prixâ (?!) â Adoption of new features combined with degradation techniques â IE6 must die (?) -> http://tr.im/ie6mustdie â Web moving forward again
- 6. HTML5 and CSS 3 What is new anyway?
- 7. HTML5 âą W3C changes focus: â 2009-07-02: Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C's position regarding the future of HTML. A FAQ answers questions about the future of deliverables of the XHTML 2 Working Group, and the status of various discussions related to HTML. Learn more about the HTML Activity. (http://www.w3.org/News/2009#item119)
- 8. HTML5 âą Features: â Revised and improved semantics including section tags â audio, video tags and API to direct HTML embedding â canvas element for scriptable graphics rendering on the ïŹy â Native drag and drop API â Local storage support to make applications even more desktop-like â Cross-document messaging â Geo Location API: especially important for mobile applications
- 9. HTML5 âą Who is using: â HTML5 gallery: http://html5gallery.com/ â Canvas demos: http://tr.im/canvasdemos â Google Wave: http://wave.google.com/ âą How to get started: â HTML5 and The Future of the Web: http://tr.im/html5fw â 24 Resources para HTML5: http://tr.im/html524r â http://delicious.com/bergbrandt/html5
- 10. CSS3 âą New features: â Extended set of selectors such as :ïŹrst-of- type or :last-of-type â Enhanced support for background and border â Flexible Box Layout â Multi-Columns and Templates native support â 2D and 3D Transformations â Transitions and Animations â Media Queries
- 11. CSS3 âą Examples: â http://tr.im/css3bgs â http://tr.im/css3borders â http://tr.im/css3transf â http://tr.im/css3anim âą More: â http://delicious.com/bergbrandt/css3
- 12. Thanks! Berg Brandt Front-End Engineer / Web Developer / Web Designer http://www.bergbrandt.com http://twitter.com/bergbrandt http://delicious.com/bergbrandt