• Save
The Learn Phase: HTML5. The Geekening.

Like this? Share it with your network


The Learn Phase: HTML5. The Geekening.



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

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



Total Views
Views on SlideShare
Embed Views



27 Embeds 473

http://blogtraction.blogspot.com 314
http://blogs.imediaconnection.com 51
http://blogtraction.blogspot.in 24
http://blogtraction.blogspot.co.uk 13
http://blogtraction.blogspot.fr 7
http://blogtraction.blogspot.com.es 5
http://blogtraction.blogspot.kr 5
http://blogtraction.blogspot.ca 5
http://blogtraction.blogspot.dk 4
http://www.linkedin.com 4
http://blogtraction.blogspot.com.au 4
http://blogtraction.blogspot.se 4
http://blogtraction.blogspot.de 4
http://blogtraction.blogspot.com.br 4
http://blogtraction.blogspot.nl 3
http://www.blogtraction.blogspot.com 3
http://blogtraction.blogspot.ch 3
http://blogtraction.blogspot.it 3
http://blogtraction.blogspot.fi 3
http://blogtraction.blogspot.tw 2
http://blogtraction.blogspot.pt 2
http://blogtraction.blogspot.co.nz 1
http://blogtraction.blogspot.ro 1
http://blogtraction.blogspot.gr 1
http://blogtraction.blogspot.cz 1
http://static.slideshare.net 1
http://blogtraction.blogspot.hk 1



Upload Details

Uploaded via as Microsoft PowerPoint

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • 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: http://www.apple.com/html5/ http://boagworld.com/techno logy/great-demo-of-html-5-canvas http://www.kevs3d.co.uk/ dev/asteroids/ http://muro.deviantart.com / http://www.andr ew-hoyer.com/experiments/cloth

The Learn Phase: HTML5. The Geekening. Presentation Transcript

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