HTML5 - A nova era da Web

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

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

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

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

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

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

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

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

Tuesday, May 25, 2010

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

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

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

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

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

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 ----------------------------------------

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

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

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

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

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 -------------------------------------

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

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

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

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

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

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

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

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

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

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

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 especiﬁcações antes de pureza teórica. “Pave cowpaths” ie, procurar formalizar o que já é usado. Tuesday, May 25, 2010 JANEIRO 2008

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

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

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

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

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: especiﬁcação terminada. [2] 2022 - Proposed Recommendation: 2x implementações INTEGRAIS. [3] 2010 - suporte nos browsers mais modernos

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: especiﬁcação terminada. [2] 2022 - Proposed Recommendation: 2x implementações INTEGRAIS. [3] 2010 - suporte nos browsers mais modernos

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: especiﬁcação terminada. [2] 2022 - Proposed Recommendation: 2x implementações INTEGRAIS. [3] 2010 - suporte nos browsers mais modernos

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: especiﬁcação terminada. [2] 2022 - Proposed Recommendation: 2x implementações INTEGRAIS. [3] 2010 - suporte nos browsers mais modernos

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

deepphoto Tuesday, May 25, 2010

PREPARADOS? deepphoto Tuesday, May 25, 2010

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 Oﬄine 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

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 Oﬄine 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

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 Oﬄine 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

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 Oﬄine 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

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 Oﬄine 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

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

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

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

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

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"

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 Oﬄine 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

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

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

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

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

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

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 Oﬄine 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

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

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 ﬁgure keygen ﬁgcaption 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

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

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

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 Oﬄine 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

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 Oﬄine 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

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, deﬁnes 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

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

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 Oﬄine 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

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

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

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <p> itemscope itemtype=“http://microformats.org/proﬁle/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

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <p itemscope itemtype=“http://microformats.org/proﬁle/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

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

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

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 Oﬄine 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

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 Oﬄine 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

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

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   ﬁrst   sidebar   help   tag   icon   up   index   last   license   next   nofollow   noreferrer   Tuesday, May 25, 2010

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   ﬁrst   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

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 Oﬄine 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

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

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

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

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

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

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 Oﬄine 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

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ô!”------------------------------------------------

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

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

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

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?

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?

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

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

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

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

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

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

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

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

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

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

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

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

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 Oﬄine 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

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 ----------------------------------------

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

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áﬁca 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

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áﬁca>; var png = $(‘quadro’).toDataURL(‘image/png’); </script> Tuesday, May 25, 2010

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

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

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

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

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 Oﬄine 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

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

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 Oﬄine 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

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

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

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

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 Oﬄine 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 ----------------------------------------

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 Oﬄine 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 ----------------------------------------

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’); ﬁm 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 ----------------------------------------

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

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

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 Oﬄine 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

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

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

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) Mais em http://www.w3.org/TR/workers/ continue search; Atalho: http://34f5.sl.pt // found a prime! postMessage(n); } Tuesday, May 25, 2010

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 Oﬄine 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 13 Geolocation accessible rich internet applications Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010

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

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <script> function handleGeo(pos) { var lat = pos.coords.latitude; var lon = pos.coords.longitude; var accuracy = pos.coords.accuracy; (...) } navigator.geolocation.getCurrentPosition(handleGeo); </script> 13 Geolocation Tuesday, May 25, 2010

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <script> function handleGeo(pos) { var lat = pos.coords.latitude; var lon = pos.coords.longitude; var accuracy = pos.coords.accuracy; (...) } navigator.geolocation.getCurrentPosition(handleGeo); </script> 13 Geolocation Mais em http://dev.w3.org/geo/api/spec-source.html Atalho: http://34fr.sl.pt Tuesday, May 25, 2010

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 Oﬄine 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 14 Experience Canvas drag-n-drop Microdata Tuesday, May 25, 2010

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? <p id=“ze” draggable ondragstart=“start();”> Arrasta-me para ali. </p> <section id=“basket” ondragover=“hover();” ondragleave=“normal();” ondrop=“handleDrop();”> ... </section> 14 Experience drag-n-drop Tuesday, May 25, 2010

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB PRONTO, OK. O QUE HÁ DE NOVO? function start(e) { e.preventDefault(); e.dataTransfer.id = this.id; $(‘basket’).className=‘getready’; } <p id=“ze” draggable ondragstart=“start();”> Arrasta-me para ali. </p> <section id=“basket” ondragover=“hover();” ondragleave=“normal();” ondrop=“handleDrop();”> ... </section> 14 Experience drag-n-drop Tuesday, May 25, 2010

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB Tuesday, May 25, 2010 TEMPO: 43MIN ----------------------------------------

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB Mais em http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html Atalho: http://15zg.sl.pt Tuesday, May 25, 2010 TEMPO: 43MIN ----------------------------------------

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

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB QUERO SABER MAIS! Tuesday, May 25, 2010

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB QUERO SABER MAIS! Demos: http://html5demos.com Atalho: http://34ow.sl.pt Artigos: http://html5doctor.com/ Atalho: http://34ox.sl.pt Tudo (detecção, resumo, etc.): http://diveintohtml5.org/ Atalho: http://34oy.sl.pt Suporte de Browsers: http://www.ﬁndmebyip.com/litmus/ Atalho: http://34oz.sl.pt Tuesday, May 25, 2010

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB QUERO MANTER-ME A PAR! Tuesday, May 25, 2010

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB QUERO MANTER-ME A PAR! WHAT-WG Especiﬁcação: http://whatwg.org/html5 Mailing Lists: http://whatwg.org/html5 IRC: irc://irc.freenode.org/whatwg Tuesday, May 25, 2010

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB A WEB ESTÁ A MUDAR... Tuesday, May 25, 2010

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB A WEB ESTÁ A MUDAR... “We must adjust to changing times and still hold to unchanging principles.” Jimmy Carter 39º Presidente dos EUA Tuesday, May 25, 2010

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB QUESTÕES? Tuesday, May 25, 2010

ISEL Tech Days 2010 HTML5 A NOVA ERA DA WEB FIM André Luís @andr3 http://id.andr3.net me@andr3.net League Gothic T Chunk Five Hoeﬂer Text American Typewriter http://talks.andr3.net/2010/iseltech.pdf Atalho: http://34pb.sl.pt http://id.andr3.net creative commons 3.0 § attribution § non-commercial § share-alike Tuesday, May 25, 2010 TEMPO: 45/48MIN ----------------------------------------

CRÉDITOS http://www.flickr.com/photos/naotakem/4532930963/ http://www.flickr.com/photos/cosmic_bandita/2218419160/ http://www.flickr.com/photos/paul_clarke/4292584569/ http://www.flickr.com/photos/deepphoto/3944794746/ http://www.flickr.com/photos/adactio/523669342/ http://www.flickr.com/photos/mollyeh11/107631809/ http://www.flickr.com/photos/halans/1453424061/ http://www.flickr.com/photos/joi/3484507756/sizes/l/ http://www.flickr.com/photos/xjy/51519638/ http://diariodarepublica.fotos.sapo.pt/Z7pTN8oZ9Emf7n50ojPH?a=4#photo Tuesday, May 25, 2010

http://www.slideshare.net	182
http://spotgeek.net	75
http://tutoria.ualg.pt	2
http://facebook.slideshare.com	1

HTML5 - A nova era da Web

by André Luís

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 260

Statistics

HTML5 - A nova era da Web Presentation Transcript