The Learn Phase: HTML5. The Geekening.


Published on

In this episode of The Learn Phase, Tach gives a geek's view of the history of HTML5 and what makes it so awesome.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • html5 ------- 1. intro 2. brief history of html 1. tim berners-lee a. html tags - 1991 2. ietf html 2 a. img tag - 1994 3. the embiggening a. w3c 1. html a. html 4.01- 1999 2. css b. javascript 1. netscape 2 2. ecma a. js b. actionscript c. browzer warz 1. new features a-go-go 2. motivate the march of standards 4. innovation a. ajax 1. ajax= xml + javascript + xhr b. dhtml 1. dhtml = css + javascript c. buzzwords 5. the stagnation a. xhtml b. web forms 6. html5 a. whatwg a. forms and apps b. w3c b. xhtml2 and forms c. merger 3. so, what is html5 1. merging of separate things a. no longer just markup b. behavior of things 1. javascript 2. rendering engines a. failure c. new facilities 1. local storage 2. forms and validation a. new data types 3. web sockets 4. new DOM methods 5. AJAX 6. drag and drop d. richer media 1. video 2. audio 3. vector 2. a modular spec a. parts can be updated and approved separately of entire spec b. entire spec can go forward if parts aren't ready 3. new tags a. semantics 1. SEO 2. accessability b. rich media 4. a buzzword a. disambiguation 1. css3 is not part of html 5 a. native animations b. transforms 2. just like dhtml isn't part of AJAX 3. But lay-people lump them all together because they don't what they're talking about 5. a flash killer? a. did the screw kill the nail? b. did people stop painting when photography was invented? 4. What does this mean for me, the jock or drama queens and kings? 1. choice of rich media tools 2. standardized, open application platform a. any innovator who can download free browser code can put it on their new gadget 1. they can't do this with flash b. the web is one big mashup c. bridges the digital divide 1. you don't need to be a rich kid with expensive software to learn 3. portable user experiences a. skinning can finally be for realizes. 5. what can I do with it? 1. demos: logy/great-demo-of-html-5-canvas dev/asteroids/ / http://www.andr
  • The Learn Phase: HTML5. The Geekening.

    1. 1. The Learn Phase: HTML 5. The Geekening. Prepared by “Tack” (@tackyy) August 18th, 2010
    2. 2. HTML5
    3. 3. A brief history of HTML
    4. 4. 1991 <ul><li>Sir Tim Berners-Lee invents HTML, spinning the Web. </li></ul><ul><li>People were dressed like todays hipsters non-ironically </li></ul>
    5. 5. 1994 <ul><li>Internet Engineering Task Force creates HTML 2 </li></ul><ul><li>Killer feature: you could put an image on a page </li></ul>
    6. 6. The embiggening <ul><li>W3C is formed as a standards body </li></ul><ul><ul><li>html and css are maintained </li></ul></ul><ul><li>Javascript debuts in netscape 2 </li></ul><ul><ul><li>later becomes an ECMA standard (262) </li></ul></ul><ul><li>Browzer Warz!! creates many new features </li></ul>
    7. 7. Innovation <ul><li>DHTML </li></ul><ul><ul><li>JavaScript + CSS </li></ul></ul><ul><li>AJAX </li></ul><ul><ul><li>XML + JavaScript + XMLHttpRequest </li></ul></ul>
    8. 8. The stagnation <ul><li>w3c cranks out xhtml 1.x </li></ul><ul><li>w3c then works on xhtml2 </li></ul><ul><ul><li>non-compatibility would ‘break the web’ </li></ul></ul><ul><ul><li>they took forever </li></ul></ul><ul><ul><li>standards stagnated </li></ul></ul>
    9. 9. WHATWG Revolt! Revolt! <ul><li>Apple, Opera and Mozilla, led by Ian Hickson, start their own standards body to keep advancing the web. </li></ul><ul><li>Web Apps and Web Forms are their standards. </li></ul>
    10. 10. Reconciliation <ul><li>w3c and whatwg become like the King and Parliament. </li></ul><ul><li>whatwg merges it’s stuff to be HTML 5 </li></ul><ul><li>w3c relents, kills xhtml2 </li></ul><ul><li>HTML5 becomes a w3c standard </li></ul><ul><li>Both bodies concurrently developing. </li></ul>
    11. 11. What is HTML5?
    12. 12. What is HTML5? <ul><li>Merging more than markup into a spec </li></ul><ul><ul><li>Behavior of browsers </li></ul></ul><ul><ul><li>New capabilities </li></ul></ul><ul><ul><ul><li>storage, files, AJAX, networking, DOM </li></ul></ul></ul><ul><ul><li>Rich Media (video, audio, vector) </li></ul></ul>
    13. 13. What is HTML5? <ul><li>A Modular standard </li></ul><ul><ul><li>Parts can be updated separately of spec </li></ul></ul><ul><ul><li>Spec can go forward if parts aren’t ready </li></ul></ul>
    14. 14. What is HTML5? <ul><li>New Tags </li></ul><ul><ul><li>Semantic tags like nav, time, article, aside </li></ul></ul><ul><ul><ul><li>Great for SEO and Accessibility </li></ul></ul></ul><ul><ul><li>Rich Media like video, audio, canvas </li></ul></ul><ul><ul><ul><li>at the mercy of javascript and css </li></ul></ul></ul>
    15. 15. What is HTML5? <ul><li>A buzzword </li></ul><ul><ul><li>CSS3 is not part of HTML5. </li></ul></ul><ul><ul><li>Just like DHTML isn’t part of AJAX. </li></ul></ul><ul><ul><li>People who don’t know how the web works think they’re the same thing. So why fight it? Let’s colloquialize. </li></ul></ul>
    16. 16. A Flash Killer? <ul><ul><li>More like the photograph. Painters kept painting, but the portrait business went to </li></ul></ul><ul><ul><li>new tech. </li></ul></ul>
    17. 17. What does this Mean?
    18. 18. Choice of Rich Media Tools <ul><li>Flash/Silverlight can haz GUI </li></ul><ul><li>and timeline </li></ul><ul><li>HTML5 for hand coders right now, but has CMS, CSS </li></ul><ul><li>and SEO benefits </li></ul>
    19. 19. Standard App Platform <ul><li>Any device maker can take a runtime off the shelf and make it work. </li></ul><ul><li>The web becomes one big mashup. </li></ul><ul><li>Open platform, free tools. You don’t need money to do it legit. Any kid can study and build a career. </li></ul>
    20. 20. Portable User Experiences <ul><li>You can write your backend and core logic once and ‘skin’ for presentation </li></ul><ul><li>Skinning for reals this time. </li></ul>
    21. 21. Alright Professor Borington, <ul><li>Now what can I actually do with this? </li></ul>
    22. 22. Demos <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> / </li></ul><ul><li> </li></ul>
    23. 23. Bodies & Specs <ul><li> </li></ul><ul><li> </li></ul>
    24. 24. A good book (apart) <ul><li>HTML5 For Web Designers by Jeremy Keith (isbn:978-0-9844425-0-8) </li></ul>