<!DOCTYPE HTML>

             Andrew de Andrade
       andrew@deandrade.com.br
O que eu faço com pessoas que
        acham que IE é a Internet?




Instale o Firefox e siga estas instruções para
      ...
Javascript


1995
XMLHTTP


1998
XMLHttpRequest


2002
AJAX


2004
2005
HTML 4.01


1999
Plugin Hell
The World Wide
Web Consortium
The Web Hypertext Application
  Technology Working Group
        (WHAT-WG)
bjetivos
Evolução, não revolução
Applicações
Web Nativas
Eliminar
“Tag Soup”
HTML 5 Validator

HTML 5 Doctor
“Pave the Cow Paths”
Frequência de Classes
<div>
  <div>
    <div>

    <div>    Hell
    </div>
  </div>
</div>
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>Artigo (HTML5)</title>
    <meta charset="utf-8">
  </head>
  <body>
...
2009, 2012 ou 2022?
Exemplos:
  Video



• AppSpot HTML5 Video Demo
• YouTube HTML5 Demo
• Pat Chanezon’s Green Screen Demo
Exemplos: Web Workers




• Motion Tracking com Web Workers
• Prime Numbers com Web Workers
Exemplos: Canvas
•   Drawing Board

•   Paintweb

•   Blob Sallad

•   Bespin » Code in the Cloud

•   Ben Joffe’s Canvas ...
Exemplo: Geolocation


• Geolocation | Where Am I?
Exemplo:
DB & App Cache

• DB and App Cache | Stickies
Outros Exemplos:
• HTML5 Drum Kit | RandomThink Labs
• Paul Rouget’s OpenWeb Demos
• Drag ‘n’ Drop Demo
• Nihilogic : Supe...
Blogs Recomendados
•   The WHATWG Blog

•   Hixie's Natural Log

•   Jeffrey Zeldman Presents The Daily Report

•   @boble...
Outros Links
•   HTML 5 Markup Language

•   HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

•   New elements in HT...
Obrigado!
HTML 5
HTML 5
HTML 5
Upcoming SlideShare
Loading in...5
×

HTML 5

7,855

Published on

Isto é uma apresentação sobre HTML5, a nova padrão web especificado pelo o W3C e WHAT-WG.

Nesta apresentação eu dou um curto resumo da historia de web apps e depois mostrar HTML5 usando varios exemplos.

Published in: Technology

HTML 5

  1. 1. <!DOCTYPE HTML> Andrew de Andrade andrew@deandrade.com.br
  2. 2. 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.
  3. 3. Javascript 1995
  4. 4. XMLHTTP 1998
  5. 5. XMLHttpRequest 2002
  6. 6. AJAX 2004
  7. 7. 2005
  8. 8. HTML 4.01 1999
  9. 9. Plugin Hell
  10. 10. The World Wide Web Consortium
  11. 11. The Web Hypertext Application Technology Working Group (WHAT-WG)
  12. 12. bjetivos
  13. 13. Evolução, não revolução
  14. 14. Applicações Web Nativas
  15. 15. Eliminar “Tag Soup”
  16. 16. HTML 5 Validator HTML 5 Doctor
  17. 17. “Pave the Cow Paths”
  18. 18. Frequência de Classes
  19. 19. <div> <div> <div> <div> Hell </div> </div> </div>
  20. 20. <!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>
  21. 21. 2009, 2012 ou 2022?
  22. 22. Exemplos: Video • AppSpot HTML5 Video Demo • YouTube HTML5 Demo • Pat Chanezon’s Green Screen Demo
  23. 23. Exemplos: Web Workers • Motion Tracking com Web Workers • Prime Numbers com Web Workers
  24. 24. 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
  25. 25. Exemplo: Geolocation • Geolocation | Where Am I?
  26. 26. Exemplo: DB & App Cache • DB and App Cache | Stickies
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. Obrigado!
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×