Talk sobre "HTML5 - A nova era da Web", a resumir o mais importante da spec, à data de escrita: Maio 2010. Evento: ISEL Tech 2010

1. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
25 Maio 2010
HTML5
A NOVA ERA DA WEB
André Luís creative commons 3.0
@andr3 attribution
non-commercial
share-alike
Tuesday, May 25, 2010

2. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
Tuesday, May 25, 2010

3. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
EU?
Tuesday, May 25, 2010

4. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB EU?
http://id.andr3.net
@andr3
mobifeeds.net
igive.sapo.pt
Tuesday, May 25, 2010

5. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB EU?
2002 — 2008
2007 — ...
Tuesday, May 25, 2010

6. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB EU?
mais em http://slideshare.net/andr3
Atalho: http://33om.sl.pt
Tuesday, May 25, 2010

7. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB EU?
Tuesday, May 25, 2010

8. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB EU?
EQUIPA DE WEBDESIGN
@isacosta
@ivogomes
@andr3
@nloureiro
Tuesday, May 25, 2010

9. Tuesday, May 25, 2010

10. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
LET’S ROCK!
Tuesday, May 25, 2010

11. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
Tuesday, May 25, 2010

12. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
O QUE USAMOS HOJE
PARA TECER A WEB?
Tuesday, May 25, 2010

13. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?
HTML
hypertext markup language
<p>Isto é um parágrafo com
<a href=”http://id.andr3.net”>
um link
</a>
</p>
Tuesday, May 25, 2010
linguagem de marcação de hipertexto

14. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?
Primeira versão: 1991
Sir Tim Berners-Lee
Primeira versão: 1991
Tuesday, May 25, 2010

15. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?
HTML 2.0: 1995
IETF
HTML 2.0: 1995
Primeira versão: 1991
Tuesday, May 25, 2010
IETF - Internet Engineering Task Force

16. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?
HTML 4.0 & 4.0.1: 1997
W3C
HTML 2.0: 1995
Primeira versão: 1991 HTML 4.0.1: 1997
Tuesday, May 25, 2010
W3C: World Wide Web Consortium
TEMPO: 2 ou 3MIN ----------------------------------------

17. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?
XHTML 1.0: 2000
W3C
XHTML 1.0: 2000
HTML 2.0: 1995
Primeira versão: 1991 HTML 4.0.1: 1997
Tuesday, May 25, 2010

18. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?
XHTML 1.1: 2001
W3C
XHTML 1.0: 2000
HTML 2.0: 1995
Primeira versão: 1991 HTML 4.0.1: 1997
XHTML 1.1: 2001
Tuesday, May 25, 2010

19. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?
Webstandards: 2003
Designing with
web standards: 2003
XHTML 1.0: 2000
HTML 2.0: 1995
Primeira versão: 1991 HTML 4.0.1: 1997
XHTML 1.1: 2001
Tuesday, May 25, 2010

20. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?
<img> <img />
text/html vs. application/xhtml+xml
atributo=valor atributo=“valor”
HTML vs. XHTML
Tuesday, May 25, 2010

21. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB O QUE USAMOS HOJE PARA TECER A WEB?
vs.
HTML vs. XHTML
naotakem cosmic_bandita
Tuesday, May 25, 2010
TEMPO: 4MIN -------------------------------------

22. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
PORQUE NÃO CHEGA
O QUE TEMOS AGORA?
Tuesday, May 25, 2010
TEMPO: 4MIN -------------------------------------

23. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PORQUE NÃO CHEGA O QUE TEMOS AGORA?
JSON-P, Comet, etc.
Cura para: Comunicações muito limitadas.
Microformatos
Cura para: Pouca semântica do HTML (e pouca extensibilidade).
Validações manuais via JavaScript
Cura para: Poucos nenhuns mecanismos de validação automática de formulários.
Tuesday, May 25, 2010
DRY

24. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PORQUE NÃO CHEGA O QUE TEMOS AGORA?
HTTP Content-type: application/xhtml+xml
Tuesday, May 25, 2010

25. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PORQUE NÃO CHEGA O QUE TEMOS AGORA?
HTTP Content-type: application/xhtml+xml
Tuesday, May 25, 2010

26. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
ENTÃO QUAL É
O CAMINHO A SEGUIR?
Tuesday, May 25, 2010

27. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?
XHTML 2
Esquecer o passado.
HTML
Começar de novo.
Pureza semântica.
Tuesday, May 25, 2010
AGOSTO 2002

28. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?
David Baron & Håkon Wium Lie Ian Hickson Anne van Kesteren Brendan Eich e não só!
mollyeh11 mollyeh11 adactio joi
Tuesday, May 25, 2010

29. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?
Web Hypertext Application Technology Working Group
WHAT-WG
Web Applications 1.0 & Web Forms 2.0
Evoluir a web.
Facilitar o desenvolvimento de webapps.
Melhorar mecanismos base da web.
Melhor os formulários, keystones da web.
Tuesday, May 25, 2010
Opera & Mozilla

30. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?
XHTML
WHAT-WG
HTML
Tuesday, May 25, 2010
Em outubro de 2006

31. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?
Até que...
Tuesday, May 25, 2010
Em outubro de 2006

32. Tuesday, May 25, 2010

33. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?
“The attempt to get the world
to switch to XML, including
quotes around attribute
values and slashes in empty
tags and namespaces all at
once didn't work.”
Sir Tim Berners-Lee
Director da W3C
in http://dig.csail.mit.edu/breadcrumbs/node/166
Atalho: http://32ac.sl.pt
paul_clarke
Tuesday, May 25, 2010
It is necessary to evolve HTML incrementally.
Outubro 2006

34. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?
Web Hypertext Application Technology Working Group
+ WHAT-WG
HTML5
Evoluir o HTML incrementalmente.
Utilizadores antes de autores antes de implementadores
antes de especificações antes de pureza teórica.
“Pave cowpaths” ie, procurar formalizar o que já é usado.
Tuesday, May 25, 2010
JANEIRO 2008

35. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?
XHTML 2?
Tuesday, May 25, 2010

36. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?
XHTML 2 Working Group Expected to Stop Work End of 2009, W3C
to Increase Resources on HTML 5
Today the Director announces that when
the XHTML 2
Working Group charter expires as scheduled at the
XHTML 2?
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.
in http://www.w3.org/News/2009#item119
Atalho: http://329z.sl.pt
Tuesday, May 25, 2010

37. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB ENTÃO QUAL É O CAMINHO A SEGUIR?
XHTML 2 2002 - 2007
XHTML 1.0 & 1.1
Tuesday, May 25, 2010
NÃO É A MORTE DO XHTML.
TEMPO: 8MIN

38. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
QUANDO É QUE
POSSO BRINCAR?
Tuesday, May 25, 2010
TEMPO: 8MIN -----------------------------------

39. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR?
HTML5
2012 (+2 anos) 2022 (+12 anos)
2010 (agora)
Tuesday, May 25, 2010
2010 - Now
[1] 2012 - Candidate Recommendation: especificação terminada.
[2] 2022 - Proposed Recommendation: 2x implementações INTEGRAIS.
[3] 2010 - suporte nos browsers mais modernos

40. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR?
HTML5
Candidate Recommendation
2012 (+2 anos) 2022 (+12 anos)
2010 (agora)
Tuesday, May 25, 2010
2010 - Now
[1] 2012 - Candidate Recommendation: especificação terminada.
[2] 2022 - Proposed Recommendation: 2x implementações INTEGRAIS.
[3] 2010 - suporte nos browsers mais modernos

41. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR?
HTML5
Candidate Recommendation Proposed Recommendation
2012 (+2 anos) 2022 (+12 anos)
2010 (agora)
Tuesday, May 25, 2010
2010 - Now
[1] 2012 - Candidate Recommendation: especificação terminada.
[2] 2022 - Proposed Recommendation: 2x implementações INTEGRAIS.
[3] 2010 - suporte nos browsers mais modernos

42. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB QUANDO É QUE POSSO BRINCAR?
HTML5
Candidate Recommendation Proposed Recommendation
2012 (+2 anos) 2022 (+12 anos)
2010 (agora)
Já começa a haver suporte nos browsers mais modernos...
8/9
Tuesday, May 25, 2010
2010 - Now
[1] 2012 - Candidate Recommendation: especificação terminada.
[2] 2022 - Proposed Recommendation: 2x implementações INTEGRAIS.
[3] 2010 - suporte nos browsers mais modernos

43. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
PRONTO, OK.
O QUE HÁ DE NOVO?
Tuesday, May 25, 2010

44. deepphoto
Tuesday, May 25, 2010

45. PREPARADOS?
deepphoto
Tuesday, May 25, 2010

46. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010
FALTA: UndoManager, <menu> & <command>, contenteditable,
SPECS SEPARADAS: offlinewebapps, workers, webstorage, webdb, websocket, server-sent
events

47. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Webdesigners Programadores
Tuesday, May 25, 2010
FALTA: UndoManager, <menu> & <command>, contenteditable,
SPECS SEPARADAS: offlinewebapps, workers, webstorage, webdb, websocket, server-sent
events

48. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010
FALTA: UndoManager, <menu> & <command>, contenteditable,
SPECS SEPARADAS: offlinewebapps, workers, webstorage, webdb, websocket, server-sent
events

49. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

50. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
1 Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

51. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
1 Optimização da
Linguagem
Doctype, atributos por omissão
HTML4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
XHTML1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 <!DOCTYPE html>
Tuesday, May 25, 2010

52. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
1 Optimização da
Linguagem
Doctype, atributos por omissão
HTML4.01 Strict <script type=”text/javascript”> </script>
XHTML1.0 Strict <script type=”text/javascript”> </script>
HTML5 <script> </script>
Tuesday, May 25, 2010

53. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
1 Optimização da
Linguagem
Doctype, atributos por omissão
HTML4.01 Strict <style type=”text/css”> </style>
XHTML1.0 Strict <style type=”text/css”> </style>
HTML5 <style> </style>
Tuesday, May 25, 2010

54. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
1 Optimização da
Linguagem
Doctype, atributos por omissão
HTML4.01 Strict <meta http-equiv=“Content-type” content=“text/html; charset=utf-8”>
XHTML1.0 Strict <meta http-equiv=“Content-type” content=“application/xhtml+xml; charset=utf-8” />
HTML5 <meta charset=“utf-8”>
Tuesday, May 25, 2010

55. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
1 Optimização da
Linguagem
Doctype, atributos por omissão
<script async ...>
document.getSelection(),
document.getElementsByClassName()...
el.innerHTML, el.outerHTML,
el.insertAdjacentHTML(), el.classList...
Tuesday, May 25, 2010
"beforebegin" "afterbegin" "beforeend" "afterend"

56. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

57. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
2 HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

58. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
HTML vs. XHTML
2 HTML5/XHTML5
Tuesday, May 25, 2010

59. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
HTML vs. XHTML
2 HTML5/XHTML5
<input disabled> <input disabled=“disabled” />
Tuesday, May 25, 2010

60. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
HTML vs. XHTML
2 HTML5/XHTML5
<input disabled> <input disabled=“disabled” />
<input disabled <input disabled=“disabled”
type=text> type=“text”/>
Tuesday, May 25, 2010

61. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
HTML vs. XHTML
2 HTML5/XHTML5
<input disabled> <input disabled=“disabled” />
<input disabled <input disabled=“disabled”
type=text> type=“text”/>
Content-type: text/html Content-type: application/xhtml
ou
Content-type: application/xml
Tuesday, May 25, 2010

62. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
HTML vs. XHTML
2 HTML5/XHTML5
<input disabled> <input disabled=“disabled” />
<input disabled <input disabled=“disabled”
type=text> type=“text”/>
Content-type: text/html Content-type: application/xhtml
ou
Content-type: application/xml
Tuesday, May 25, 2010

63. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
HTML vs. XHTML
2 HTML5/XHTML5
<input disabled=“disabled”> <input disabled> <input disabled=“disabled” />
<input disabled=“disabled” <input disabled <input disabled=“disabled”
type=“text”> type=text> type=“text”/>
Content-type: text/html Content-type: application/xhtml
ou
Content-type: application/xml
Tuesday, May 25, 2010

64. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

65. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
3 novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

66. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
HTML4.01 & XHTML 1.x HTML5
<div class=“header”> <header>
<div class=“nav”> <nav>
<div class=“footer”> <footer>
3 novos elementos <div class=“section”> <section>
section, nav, footer, etc.
... ...
Tuesday, May 25, 2010

67. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
elementos
section meter
article time
aside canvas
hgroup menu
3 novos elementos header command
section, nav, footer, etc. footer details
nav datalist
figure keygen
figcaption output
mark device
progress
mais info http://www.w3.org/TR/html5-diff/#new-elements
Atalho: http://33em.sl.pt
Tuesday, May 25, 2010
section secção do site | article igual mas a secção é na verdade um artigo |
aside

68. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
elementos
section meter
article time
aside canvas
hgroup menu
3 novos elementos header command
section, nav, footer, etc. footer details
nav datalist
figure keygen
figcaption output
mark device
progress
mais info http://www.w3.org/TR/html5-diff/#new-elements
Atalho: http://33em.sl.pt
Tuesday, May 25, 2010
section secção do site | article igual mas a secção é na verdade um artigo |
aside

69. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
ATENÇÃO!
3 novos elementos
section, nav, footer, etc.
download do script http://code.google.com/p/html5shiv/
Atalho: http://33er.sl.pt
Tuesday, May 25, 2010

70. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
comprar http://books.alistapart.com/
Atalho: http://34p6.sl.pt
Tuesday, May 25, 2010

71. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010
TEMPO: 16MIN

72. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
4 ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010
TEMPO: 16MIN

73. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
“WAI-ARIA, the Accessible Rich Internet
Applications Suite, defines a way to make
Web content and Web applications more
4
accessible to people with disabilities.”
ARIA
accessible rich internet applications in http://www.w3.org/WAI/intro/aria
Atalho: http://33en.sl.pt
Tuesday, May 25, 2010
TEMPO: 16MIN

74. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
<a role=“menuitem” aria-________=“ ”>
Atributos importados.
lista de roles & estados http://www.w3.org/WAI/PF/aria/appendices#quickref
Atalho: http://33es.sl.pt
4 ARIA
accessible rich internet applications
Tuesday, May 25, 2010

75. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

76. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
5
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

77. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
5 Microdata
artigo http://www.alistapart.com/articles/semanticsinhtml5/
Atalho: http://33et.sl.pt
Tuesday, May 25, 2010

78. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
“No matter how many elements
we bolt on, we will always think
of more semantic goodness to
add to HTML.”
John Allsopp
west civ
in http://www.alistapart.com/articles/semanticsinhtml5/
5 Microdata Atalho: http://33et.sl.pt
halans
Tuesday, May 25, 2010
It is necessary to evolve HTML incrementally.
Outubro 2006

79. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
<p> itemscope itemtype=“http://microformats.org/profile/hcard”
Leeroy Jenkins <span itemprop=“fn”></span>
<a href=“mailto:leeroy@wow.eu”> itemprop=“email”
email do leeroy
</a>
</p>
5 Microdata
Tuesday, May 25, 2010

80. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
<p itemscope itemtype=“http://microformats.org/profile/hcard”>
<span itemprop=“fn”>Leeroy Jenkins</span>
<a itemprop=“email” href=“mailto:leeroy@wow.eu”>
email do leeroy
</a>
</p>
5 Microdata
Tuesday, May 25, 2010

81. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
<p itemscope itemtype=“http://microformats.org/profile/hcard”>
<span itemprop=“fn”>Leeroy Jenkins</span>
<a itemprop=“email” href=“mailto:leeroy@wow.eu”>
email do leeroy
</a>
</p>
5 Microdata
Tuesday, May 25, 2010

82. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
<p itemscope itemtype=“http://microformats.org/profile/hcard”>
<span itemprop=“fn”>Leeroy Jenkins</span>
<a itemprop=“email” href=“mailto:leeroy@wow.eu”>
email do leeroy
</a>
</p>
<http://microformats.org/profile/hcard>
FN: Leeroy Jenkins
EMAIL: leeroy@wow.eu
5 Microdata
Tuesday, May 25, 2010

83. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
<p itemscope itemtype=“http://microformats.org/profile/hcard”>
<span itemprop=“fn”>Leeroy Jenkins</span>
<a itemprop=“email” href=“mailto:leeroy@wow.eu”>
email do leeroy
</a>
</p>
<http://microformats.org/profile/hcard>
FN: Leeroy Jenkins
EMAIL: leeroy@wow.eu
5 Microdata
Tuesday, May 25, 2010

84. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
data-*
Atributos para guardar
dados úteis a scripts.
<section id=“noticias” data-zone=“hp_noticias”>
...
5 Microdata
Tuesday, May 25, 2010
itemscope => [elemento]
<meta> => @content
<audio>, <embed>, <iframe>, <img>, <source>, <video> => @src
<a>, <area>, <link> => @href
<object> => @data
<time> => @datetime

85. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010
TEMPO: 21MIN

86. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da 6 Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010
TEMPO: 21MIN

87. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
6 Novas relações nos links
<a rel=“_________” href=“_____”
<link rel=“_________” href=“_____”
<area rel=“_________” href=“_____”
Tuesday, May 25, 2010
TEMPO: 21MIN

88. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
6 Novas relações nos links
rel=“_____” <link> <a> & <area> rel=“_____” <link> <a> & <area>
alternate   pingback  
archives   prefetch  
author   prev  
bookmark   search  
external   stylesheet  
first   sidebar  
help   tag  
icon   up  
index  
last  
license  
next  
nofollow  
noreferrer  
Tuesday, May 25, 2010

89. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
6 Novas relações nos links
rel=“_____” <link> <a> & <area> rel=“_____” <link> <a> & <area>
alternate   pingback  
archives   prefetch  
author   prev  
bookmark   search  
external   stylesheet  
first   sidebar  
help   tag  
icon   up  
index  
last  
license  
next  
nofollow  
noreferrer  
Tuesday, May 25, 2010

90. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
6 Novas relações nos links
rel=“_____” <link> <a> & <area> rel=“_____” <link> <a> & <area>
alternate   pingback  
archives   prefetch  
author   prev  
bookmark   search  
external   stylesheet  
first   sidebar  
help   tag  
icon   up  
index  
last  
Tipos de Links — HTML4
license   http://www.w3.org/TR/REC-html40/types.html#type-links
Atalho: http://341n.sl.pt
next  
nofollow   Tipos de Links — HTML5
http://dev.w3.org/html5/spec/Overview.html#linkTypes
noreferrer   Atalho: http://341o.sl.pt
Tuesday, May 25, 2010

91. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

92. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
7
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

93. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
7
Web Forms 2.0
Tuesday, May 25, 2010

94. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
7
Web Forms 2.0
Um aspecto em comum... JavaScript.
Tuesday, May 25, 2010

95. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
Tipos de input
<input type=“________”
7
Web Forms 2.0
•search •week
•tel •time
•url •datetime-local
•email •number
•datetime •range
•date •color
•month
Tuesday, May 25, 2010

96. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
7
Web Forms 2.0
Tuesday, May 25, 2010

97. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
Tuesday, May 25, 2010

98. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
Atributos novos
7
Web Forms 2.0
•autocomplete
•pattern
•list usado com <datalist>
•min
•readonly
•max
•size
•step
•required
•placeholder
•multiple
•maxlength
Tuesday, May 25, 2010

99. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
Atributos novos
7
Web Forms 2.0
•autocomplete
•pattern
•list usado com <datalist>
•min
•readonly
•max
•size
•step
•required
•placeholder
•multiple
•maxlength
Tuesday, May 25, 2010

100. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

101. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos 8 Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

102. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
8
Media elements
<audio> & <video>
Tuesday, May 25, 2010
CUE IN JOKE! “Xô!”------------------------------------------------

103. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
8
Media elements
<audio> & <video>
Tuesday, May 25, 2010

104. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
8
Media elements
<audio> & <video>
xjy
Tuesday, May 25, 2010

105. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
8
Media elements
<audio> & <video>
<audio> & <video>
Suporte nativo de componentes multimédia.
Tuesday, May 25, 2010

106. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
http://en.wikipedia.org/wiki/Tarzan_yell
Atalho: http://34c1.sl.pt
Tuesday, May 25, 2010
28min?

107. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
http://en.wikipedia.org/wiki/Tarzan_yell
Atalho: http://34c1.sl.pt
Tuesday, May 25, 2010
28min?

108. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
http://9elements.com/io/projects/html5/canvas/
Atalho: http://vj9.sl.pt
Tuesday, May 25, 2010
28min?

109. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
http://youtube.com/html5
Atalho: http://34c8.sl.pt
Tuesday, May 25, 2010

110. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
A LUTA
DOS
CODECS
Augusto Brazio
Tuesday, May 25, 2010
TEMPO: 29MIN

111. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB A LUTA
DOS
CODECS
(audio)
wav mp3 ogg vorbis aac
+3.5 +4 +4 +3.5 +4
+10.50 +3b +3b +10.50 +3b
9 9
final 2010? final 2010?
Augusto Brazio
Tuesday, May 25, 2010
TEMPO: 29MIN

112. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB A LUTA
DOS
CODECS
(video)
NO
h.264 ogg theora webm VO
+4 +3.5 +3.7†
10.50 +3b 10.50 +6? † 10.54†
9† 9*†
final 2010? final 2010?
Augusto Brazio † Versões não finais/lançadas * Requererá download e instalação do codec.
Tuesday, May 25, 2010
IE9 & Chrome & Safari = também suportam AAC

113. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
8
Media elements
<audio> & <video>
<audio autoplay controls <video controls
preload loop src=“yui.m4v”>
src=“discurso.mp3”>
</video>
</audio>
Tuesday, May 25, 2010

114. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
8
Media elements
<audio> & <video>
<audio controls> <video controls>
<source src=“a.ogg” <source src=“yui.mp4”
type=“video/
type=“audio/ogg”> mp4;codecs=‘avc1.42E01E, mp4a.
40.2’” media=“screen”>
<source src=“a.mp3”
<track kind=“subtitles”
type=“audio/mp3”> label=“Legendas (pt)” src=“yui-
legendas.srt” srclang=“pt”>
</audio>
</video>
Tuesday, May 25, 2010
Track kinds: subtitles, captions, descriptions, chapters, metadata
srt = http://en.wikipedia.org/wiki/SubRip#SubRip_Format

115. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
8
Media elements
<audio> & <video>
<script>
new Audio (‘exemplo.mp3’);
</script>
Tuesday, May 25, 2010

116. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
8
Media elements
<audio> & <video>
Tuesday, May 25, 2010

117. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
8
Media elements
<audio> & <video>
mais info sobre o elemento audio http://www.whatwg.org/specs/web-apps/current-work/#audio
Atalho: http://34dn.sl.pt
Tuesday, May 25, 2010

118. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
8
Media elements
<audio> & <video>
mais info sobre o elemento audio http://www.whatwg.org/specs/web-apps/current-work/#audio
Atalho: http://34dn.sl.pt
mais info sobre o elemento video http://www.whatwg.org/specs/web-apps/current-work/#video
Atalho: http://34do.sl.pt
Tuesday, May 25, 2010

119. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
8
Media elements
<audio> & <video>
mais info sobre o elemento audio http://www.whatwg.org/specs/web-apps/current-work/#audio
Atalho: http://34dn.sl.pt
mais info sobre o elemento video http://www.whatwg.org/specs/web-apps/current-work/#video
Atalho: http://34do.sl.pt
mais info sobre o elemento source http://www.whatwg.org/specs/web-apps/current-work/#the-source-element
Atalho: http://34dm.sl.pt
Tuesday, May 25, 2010

120. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
8
Media elements
<audio> & <video>
mais info sobre o elemento audio http://www.whatwg.org/specs/web-apps/current-work/#audio
Atalho: http://34dn.sl.pt
mais info sobre o elemento video http://www.whatwg.org/specs/web-apps/current-work/#video
Atalho: http://34do.sl.pt
mais info sobre o elemento source http://www.whatwg.org/specs/web-apps/current-work/#the-source-element
Atalho: http://34dm.sl.pt
mais info sobre o elemento track http://www.whatwg.org/specs/web-apps/current-work/#the-track-element
Atalho: http://34dp.sl.pt
Tuesday, May 25, 2010

121. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

122. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
9
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

123. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
9
Canvas
Tuesday, May 25, 2010
JOKE!! MAGIA
TEMPO: 34MIN ----------------------------------------

124. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
9
Canvas
Tuesday, May 25, 2010
TEMPO: 34MIN

125. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
9
Canvas
<canvas>
Elemento que permite manipulação gráfica
através de JavaScript.
Consegue importar conteúdo de <video>s.
Exporta conteúdo por data uri’s.
Ex: data:image/png;base64,iVBORw0KGgoAAAANSUhE(...)
Tuesday, May 25, 2010

126. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
9
Canvas
<canvas id=“quadro”>
Aviso de falta de suporte.
</canvas>
<script>
var ctx = $(‘quadro’).getContext(‘2d’);
ctx.<função gráfica>;
var png = $(‘quadro’).toDataURL(‘image/png’);
</script>
Tuesday, May 25, 2010

127. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
9
Canvas
Contexto: 2D
função gráfica atributos
scale(x,y); globalAlpha
rotate(rad); globalCompositionOperation
translate(x,y); strokeStyle
transform(m11, m12, m21, m22, dx, dy); fillStyle
... ...
Tuesday, May 25, 2010

128. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
9
Canvas
Contexto: 2D
função gráfica atributos
scale(x,y); globalAlpha
rotate(rad); globalCompositionOperation
translate(x,y); strokeStyle
transform(m11, m12, m21, m22, dx, dy); fillStyle
... ...
Mais em http://www.whatwg.org/specs/web-apps/current-work/#canvas-context-2d
Atalho: http://34dx.sl.pt
Tuesday, May 25, 2010

129. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
9
Canvas
Contexto: WebGL
Tuesday, May 25, 2010

130. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
9
Canvas
Contexto: WebGL
Mais em https://developer.mozilla.org/en/WebGL
Atalho: http://34oe.sl.pt
Tuesday, May 25, 2010

131. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

132. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links 10 Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

133. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
Antes
10 Offline webapps
1 INTERNET 2 INTERNET
Agora
1 INTERNET 2 INTERNET
Tuesday, May 25, 2010

134. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
http://example.com/index.html
<!doctype html> 10 Offline webapps
<html manifest=“/navio.manifest”>
<head>
...
http://example.com/navio.manifest
CACHE MANIFEST
index.html
ajuda.html
css/screen.css
js/entire-app.js
imgs/css-sprites.png
NETWORK:
check.php
#version12
Tuesday, May 25, 2010

135. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
http://example.com/index.html
<!doctype html> 10 Offline webapps
<html manifest=“/navio.manifest”>
<head>
...
http://example.com/navio.manifest servir com mime-type correcto:
CACHE MANIFEST text/cache-manifest
index.html
ajuda.html
css/screen.css
js/entire-app.js
imgs/css-sprites.png ficheiros estáticos
(cache)
NETWORK:
check.php ficheiros dinâmicos (sem cache)
#version12 cache-busting
Tuesday, May 25, 2010

136. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
<script> 10 Offline webapps
var online = navigator.onLine;
if (online) {
// sync?
} else {
// mostrar aviso offline?
}
window.addEventListener ( ‘online’, function () {
// remover aviso offline?
});
window.addEventListener ( ‘offline’, function () {
// remover aviso offline?
});
</script>
Tuesday, May 25, 2010

137. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
<script> 10 Offline webapps
var online = navigator.onLine;
if (online) {
// sync?
} else { “This attribute is inherently unreliable. A computer can be
// mostrar aviso offline? connected to a network without having Internet access.”
}
window.addEventListener ( ‘online’, function () {
// remover aviso offline?
});
window.addEventListener ( ‘offline’, function () {
// remover aviso offline?
});
</script>
Tuesday, May 25, 2010

138. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
<script> 10 Offline webapps
var online = navigator.onLine;
if (online) {
// sync?
} else { “This attribute is inherently unreliable. A computer can be
// mostrar aviso offline? connected to a network without having Internet access.”
}
window.addEventListener ( ‘online’, function () {
// remover aviso offline?
});
window.addEventListener ( ‘offline’, function () {
// remover aviso offline?
});
</script>
Tuesday, May 25, 2010

139. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010
TEMPO: 38MIN ----------------------------------------

140. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 11 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010
TEMPO: 38MIN ----------------------------------------

141. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
[tab#1] sessionStorage.setItem(‘foo’, ‘bar’
sessionStorage
Objecto de armazenamento [tab#2] sessionStorage.getItem(‘foo’);
permanente durante uma // => ‘bar’
sessão. 11 Client-side Storage
sessionStorage, localStorage, webDB
Pares chave/valor estão
isolados, não acessíveis
noutras tabs/janelas.
localStorage
Objecto de armazenamento
permanente (perdura após
localStorage.setItem(‘foo’, ‘bar’); fim de sessão).
*browser fechado*
Pares chave/valor estão
*dia seguinte*
localStorage.getItem(‘foo’); acessíveis de todas as
// => ‘bar’ tabs/janelas.
Tuesday, May 25, 2010
TEMPO: 38MIN ----------------------------------------

142. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
webDB
Interface com um repositório similar a
SQLlite.
11 Client-side Storage
Para dados estruturados e relacionais. sessionStorage, localStorage, webDB
Usado por webapps online e offline assim
como por webworkers(coming up next!).
var db = openDatabase ( ‘nome’, ‘v1.5’, 1024);
// uso esperado:1024bytes
db.transaction('create table t1 (t1key INTEGER PRIMARY KEY,data
TEXT,num double,timeEnter DATE);');
Tuesday, May 25, 2010

143. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
webDB
Interface com um repositório similar a
SQLlite.
11 Client-side Storage
Para dados estruturados e relacionais. sessionStorage, localStorage, webDB
Usado por webapps online e offline assim
como por webworkers(coming up next!).
var db = openDatabase ( ‘nome’, ‘v1.5’, 1024);
// uso esperado:1024bytes
db.transaction('create table t1 (t1key INTEGER PRIMARY KEY,data
TEXT,num double,timeEnter DATE);');
Mais em http://dev.w3.org/html5/webdatabase/
Atalho: http://34ex.sl.pt
Tuesday, May 25, 2010

144. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos
Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

145. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
(resumo) HTML5
Optimização da Novas relações nos links Offline webapps
Linguagem
Doctype, atributos por omissão APIs de JavaScript
HTML5/XHTML5 Web Forms 2.0 Client-side Storage
sessionStorage, localStorage, webDB
novos elementos 12 Comunicação/Threading
section, nav, footer, etc. Media elements Websockets, Webworkers
<audio> & <video>
ARIA Geolocation
accessible rich internet applications
Experience
Canvas drag-n-drop
Microdata
Tuesday, May 25, 2010

146. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
Websockets API
var socket = new WebSocket('ws://game.example.com:12010/updates');
socket.onopen = function () {
setInterval(function() {
if (socket.bufferedAmount == 0)
socket.send(getUpdateData());
}, 50);
}; 12 Comunicação/Threading
Websockets, Webworkers
Server-sent Events
var stocks = new EventSource("http://stocks.example.com/ticker.php");
stocks.onmessage = function (event) {
var data = event.data.split('n');
data: YHOO
updateStocks(data[0], data[1], data[2]);
data: +2
};
data: 10
Tuesday, May 25, 2010

147. ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO?
Webworkers
Executar código complexo e demorado sem que bloqueie o
event-loop normal do JavaScript nem o GUI do browser.
<script>
12 Comunicação/Threading
var w = new Worker('worker.js');
Websockets, Webworkers
w.onmessage = function(ev) {
do_something(ev.data); worker.js
}; var n = 1;
</script> search: while (true) {
n += 1;
for (var i = 2; i <= Math.sqrt(n); i += 1)
if (n % i == 0)
continue search;
// found a prime!
postMessage(n);
}
Tuesday, May 25, 2010