Slide 1: <!DOCTYPE HTML>
Andrew de Andrade andrew@deandrade.com.br
Slide 4: O que eu faço com pessoas que acham que IE é a Internet?
Instale o Firefox e siga estas instruções para deixar o Firefox parecendo o IE.
Slide 5: Javascript
995
Slide 6: XMLHTTP
998
Slide 7: XMLHttpRequest
002
Slide 8: AJAX
004
Slide 9: 005
Slide 10: HTML 4.01
999
Slide 11: Plugin Hell
Slide 13: The World Wide Web Consortium
Slide 14: The Web Hypertext Application Technology Working Group (WHAT-WG)
Slide 15: bjetivos
Slide 16: Evolução, não revolução
Slide 17: Applicações Web Nativas
Slide 18: Eliminar “Tag Soup”
Slide 19: HTML 5 Validator HTML 5 Doctor
Slide 20: “Pave the Cow Paths”
Slide 21: Frequência de Classes
Slide 22: <div> <div> <div>
<div>
</div> </div> </div>
Hell
Slide 23: <!DOCTYPE HTML> <html lang="en"> <head> <title>Artigo (HTML5)</title> <meta charset="utf-8"> </head> <body> <header id="branding">Logo do site, search, etc.</header> <nav> <ul> <li>Navegação do site</li> </ul> </nav> <section id="content"> <article> <!-- conteúdo principal (o artigo) --> <header> <h1>Titulo do artigo</h1> <p>Metadata do artigo</p> </header> <p>Conteúdo do artigo</p> </article> <section id="sidebar"> <!-- conteúdo secundario --> <h2>Titulo do sidebar</h2> <p>Conteúdo do sidebar</p> </section> </section> <footer id="footer">Footer</footer> <!-- um footer basico --> </body> </html>
Slide 24: 2009, 2012 ou 2022?
Slide 25: Exemplos: Video
• AppSpot HTML5 Video Demo • YouTube HTML5 Demo • Pat Chanezon’s Green Screen Demo
Slide 26: Exemplos: Web Workers
• Motion Tracking com Web Workers • Prime Numbers com Web Workers
Slide 27: Exemplos: Canvas
• • • • • • • •
Drawing Board Paintweb Blob Sallad Bespin » Code in the Cloud Ben Joffe’s Canvas Examples Starfield US Map Polygons Box2D JS Physics Engine
Slide 28: Exemplo: Geolocation
• Geolocation | Where Am I?
Slide 29: Exemplo: DB & App Cache
• DB and App Cache | Stickies
Slide 30: Outros Exemplos:
• HTML5 Drum Kit | RandomThink Labs • Paul Rouget’s OpenWeb Demos • Drag ‘n’ Drop Demo • Nihilogic : Super Mario Kart Online • Radiohead Ideotheque Canvas Demo
Slide 31: Blogs Recomendados
• • • • • • • • •
The WHATWG Blog Hixie's Natural Log Jeffrey Zeldman Presents The Daily Report @boblet | random notes Lachy’s Log Opera Developer Community P@ Log Mozilla Developer Community Surfin’ Safari - The WebKit Blog
•
Bruce Lawson’s personal site
Slide 32: Outros Links
• • • • • • • • • • •
HTML 5 Markup Language HTML 5 and CSS 3: The Techniques You’ll Soon Be Using New elements in HTML 5 Yes, You Can Use HTML 5 Today! HTML 5 differences from HTML 4 23 Essential HTML 5 Resources HTML 5 canvas - the basics - Opera Dev HTML5 Gallery HTML5 Canvas Cheat Sheet HTML Design Principles Canvas Demos
Slide 33: Obrigado!
