HTML5 - A nova era da Web
-
Upload
andre-luis -
Category
Technology
-
view
6.671 -
download
1
description
Transcript of HTML5 - A nova era da Web
ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
HTML5A NOVA ERA DA WEB
ISEL Tech Days 201025 Maio 2010
André Luís @andr3 creative commons 3.0
attributionnon-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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
EU?
http://id.andr3.net
@andr3
mobifeeds.net
igive.sapo.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
EU?
2002 — 2008
2007 — ...
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
EU?
mais em http://slideshare.net/andr3Atalho: http://33om.sl.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
EU?
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
EU?
@isacosta
@ivogomes
@andr3
@nloureiro
EQUIPA DE WEBDESIGN
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
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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
O QUE USAMOS HOJE PARA TECER A WEB?
Primeira versão: 1991
Primeira versão: 1991
Sir Tim Berners-Lee
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
O QUE USAMOS HOJE PARA TECER A WEB?
HTML 2.0: 1995
Primeira versão: 1991
HTML 2.0: 1995
IETF
Tuesday, May 25, 2010
IETF - Internet Engineering Task Force
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
O QUE USAMOS HOJE PARA TECER A WEB?
HTML 4.0 & 4.0.1: 1997
Primeira versão: 1991 HTML 4.0.1: 1997
HTML 2.0: 1995
W3C
Tuesday, May 25, 2010
W3C: World Wide Web ConsortiumTEMPO: 2 ou 3MIN ----------------------------------------
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
XHTML 1.0: 2000
HTML 2.0: 1995XHTML 1.0: 2000
O QUE USAMOS HOJE PARA TECER A WEB?
Primeira versão: 1991 HTML 4.0.1: 1997
W3C
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
XHTML 1.1: 2001
HTML 2.0: 1995
O QUE USAMOS HOJE PARA TECER A WEB?
XHTML 1.0: 2000
Primeira versão: 1991 HTML 4.0.1: 1997
XHTML 1.1: 2001
W3C
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Webstandards: 2003
HTML 2.0: 1995
O QUE USAMOS HOJE PARA TECER A WEB?
XHTML 1.0: 2000
HTML 4.0.1: 1997Primeira versão: 1991
XHTML 1.1: 2001
Designing withweb standards: 2003
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
vs.
O QUE USAMOS HOJE PARA TECER A WEB?
HTML vs. XHTML
<img>
text/html
atributo=valor
<img />
application/xhtml+xml
atributo=“valor”
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
vs.
O QUE USAMOS HOJE PARA TECER A WEB?
HTML vs. XHTML
naotakem cosmic_banditaTuesday, 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 -------------------------------------
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PORQUE NÃO CHEGA O QUE TEMOS AGORA?
JSON-P, Comet, etc.Cura para: Comunicações muito limitadas.
MicroformatosCura para: Pouca semântica do HTML (e pouca extensibilidade).
Validações manuais via JavaScriptCura para: Poucos nenhuns mecanismos de validação automática de formulários.
Tuesday, May 25, 2010
DRY
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Content-type: application/xhtml+xmlHTTP
PORQUE NÃO CHEGA O QUE TEMOS AGORA?
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Content-type: application/xhtml+xmlHTTP
PORQUE NÃO CHEGA O QUE TEMOS AGORA?
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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
HTML
XHTML 2Esquecer o passado.
Começar de novo.
Pureza semântica.
ENTÃO QUAL É O CAMINHO A SEGUIR?
Tuesday, May 25, 2010
AGOSTO 2002
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
ENTÃO QUAL É O CAMINHO A SEGUIR?
mollyeh11 adactiomollyeh11 joi
David Baron & Håkon Wium Lie Ian Hickson Anne van Kesteren Brendan Eich e não só!
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
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.
WHAT-WGWeb Hypertext Application Technology Working Group
ENTÃO QUAL É O CAMINHO A SEGUIR?
Tuesday, May 25, 2010
Opera & Mozilla
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
ENTÃO QUAL É O CAMINHO A SEGUIR?
WHAT-WG
HTML
XHTML
Tuesday, May 25, 2010
Em outubro de 2006
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Até que...
ENTÃO QUAL É O CAMINHO A SEGUIR?
Tuesday, May 25, 2010
Em outubro de 2006
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
“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-LeeDirector da W3C
paul_clarke
ENTÃO QUAL É O CAMINHO A SEGUIR?
in http://dig.csail.mit.edu/breadcrumbs/node/166Atalho: http://32ac.sl.pt
Tuesday, May 25, 2010It is necessary to evolve HTML incrementally.Outubro 2006
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
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.
WHAT-WGWeb Hypertext Application Technology Working Group
+
HTML5
ENTÃO QUAL É O CAMINHO A SEGUIR?
Tuesday, May 25, 2010
JANEIRO 2008
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
XHTML 2?
ENTÃO QUAL É O CAMINHO A SEGUIR?
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
XHTML 2?
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
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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
XHTML 22002 - 2007
XHTML 1.0 & 1.1
ENTÃO QUAL É O CAMINHO A SEGUIR?
Tuesday, May 25, 2010
NÃO É A MORTE DO XHTML.TEMPO: 8MIN
ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
QUANDO É QUEPOSSO BRINCAR?
Tuesday, May 25, 2010
TEMPO: 8MIN -----------------------------------
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
QUANDO É QUE POSSO BRINCAR?
2010 (agora)
2022 (+12 anos)2012 (+2 anos)
HTML5
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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
QUANDO É QUE POSSO BRINCAR?
2010 (agora)
2022 (+12 anos)2012 (+2 anos)
HTML5
Candidate Recommendation
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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
QUANDO É QUE POSSO BRINCAR?
2010 (agora)
2022 (+12 anos)2012 (+2 anos)
HTML5
Candidate Recommendation Proposed Recommendation
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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
QUANDO É QUE POSSO BRINCAR?
2010 (agora)
2022 (+12 anos)2012 (+2 anos)
HTML5
Candidate Recommendation Proposed Recommendation
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
ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
PRONTO, OK.O QUE HÁ DE NOVO?
Tuesday, May 25, 2010
deepphotoTuesday, May 25, 2010
PREPARADOS?
deepphotoTuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
FALTA: UndoManager, <menu> & <command>, contenteditable,SPECS SEPARADAS: offlinewebapps, workers, webstorage, webdb, websocket, server-sent events
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Novas relações nos links
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Offline webapps
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
Optimização da Linguagem
Doctype, atributos por omissão
Webdesigners Programadores
Canvas
Tuesday, May 25, 2010
FALTA: UndoManager, <menu> & <command>, contenteditable,SPECS SEPARADAS: offlinewebapps, workers, webstorage, webdb, websocket, server-sent events
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
FALTA: UndoManager, <menu> & <command>, contenteditable,SPECS SEPARADAS: offlinewebapps, workers, webstorage, webdb, websocket, server-sent events
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Optimização da Linguagem
Doctype, atributos por omissão
1
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Optimização da Linguagem
Doctype, atributos por omissão
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
HTML4.01 Strict
XHTML1.0 Strict
HTML5
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Optimização da Linguagem
Doctype, atributos por omissão
1
HTML4.01 Strict
XHTML1.0 Strict
HTML5
<script type=”text/javascript”> </script>
<script> </script>
<script type=”text/javascript”> </script>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Optimização da Linguagem
Doctype, atributos por omissão
1
HTML4.01 Strict
XHTML1.0 Strict
HTML5
<style type=”text/css”> </style>
<style> </style>
<style type=”text/css”> </style>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Optimização da Linguagem
Doctype, atributos por omissão
1
HTML4.01 Strict
XHTML1.0 Strict
HTML5
<meta http-equiv=“Content-type” content=“application/xhtml+xml; charset=utf-8” />
<meta charset=“utf-8”>
<meta http-equiv=“Content-type” content=“text/html; charset=utf-8”>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
document.getSelection(), document.getElementsByClassName()...
PRONTO, OK. O QUE HÁ DE NOVO?
Optimização da Linguagem
Doctype, atributos por omissão
1
<script async ...>
el.innerHTML, el.outerHTML,el.insertAdjacentHTML(), el.classList...
Tuesday, May 25, 2010
"beforebegin" "afterbegin" "beforeend" "afterend"
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
HTML5/XHTML52
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
HTML5/XHTML52 vs.HTML XHTML
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
HTML5/XHTML52 vs.HTML XHTML
<input disabled> <input disabled=“disabled” />
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
HTML5/XHTML52 vs.HTML XHTML
<input disabled> <input disabled=“disabled” />
<input disabledtype=text>
<input disabled=“disabled” type=“text”/>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
HTML5/XHTML52 vs.HTML XHTML
<input disabled> <input disabled=“disabled” />
<input disabledtype=text>
<input disabled=“disabled” type=“text”/>
Content-type: text/html Content-type: application/xhtmlou
Content-type: application/xml
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
HTML5/XHTML52 vs.HTML XHTML
<input disabled> <input disabled=“disabled” />
<input disabledtype=text>
<input disabled=“disabled” type=“text”/>
Content-type: text/html Content-type: application/xhtmlou
Content-type: application/xml
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
HTML5/XHTML52 vs.HTML XHTML
<input disabled> <input disabled=“disabled” />
<input disabledtype=text>
<input disabled=“disabled” type=“text”/>
Content-type: text/html Content-type: application/xhtmlou
Content-type: application/xml
<input disabled=“disabled”>
<input disabled=“disabled”type=“text”>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
novos elementossection, nav, footer, etc.
3
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
<div class=“header”>
<div class=“nav”>
<div class=“footer”>
<div class=“section”>
...
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
3
<header>
<nav>
<footer>
<section>
...
HTML4.01 & XHTML 1.x HTML5
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
3
elementoselementossection meter
article time
aside canvas
hgroup menu
header command
footer details
nav datalist
figure keygen
figcaption output
mark device
progress
mais info http://www.w3.org/TR/html5-diff/#new-elementsAtalho: http://33em.sl.pt
Tuesday, May 25, 2010
section secção do site | article igual mas a secção é na verdade um artigo | aside
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
3
elementoselementossection meter
article time
aside canvas
hgroup menu
header command
footer details
nav datalist
figure keygen
figcaption output
mark device
progress
mais info http://www.w3.org/TR/html5-diff/#new-elementsAtalho: http://33em.sl.pt
Tuesday, May 25, 2010
section secção do site | article igual mas a secção é na verdade um artigo | aside
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
3
ATENÇÃO!
download do script http://code.google.com/p/html5shiv/Atalho: http://33er.sl.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
comprar http://books.alistapart.com/Atalho: http://34p6.sl.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
TEMPO: 16MIN
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
ARIAaccessible rich internet applications
4
Tuesday, May 25, 2010
TEMPO: 16MIN
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
ARIAaccessible rich internet applications
4
“WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities.”in http://www.w3.org/WAI/intro/ariaAtalho: http://33en.sl.pt
Tuesday, May 25, 2010
TEMPO: 16MIN
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
ARIAaccessible rich internet applications
4
<a role=“menuitem” aria-________=“ ”>
Atributos importados.lista de roles & estados http://www.w3.org/WAI/PF/aria/appendices#quickrefAtalho: http://33es.sl.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Microdata5
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
artigo http://www.alistapart.com/articles/semanticsinhtml5/Atalho: http://33et.sl.pt
Microdata5
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
“No matter how many elements we bolt on, we will always think of more semantic goodness to add to HTML.”
John Allsoppwest civ
halans
PRONTO, OK. O QUE HÁ DE NOVO?
in http://www.alistapart.com/articles/semanticsinhtml5/Atalho: http://33et.sl.ptMicrodata5
Tuesday, May 25, 2010It is necessary to evolve HTML incrementally.Outubro 2006
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Microdata5
<p> itemscope itemtype=“http://microformats.org/profile/hcard” Leeroy Jenkins <span itemprop=“fn”></span> <a href=“mailto:[email protected]”> itemprop=“email” email do leeroy </a></p>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Microdata5
<p itemscope itemtype=“http://microformats.org/profile/hcard”> <span itemprop=“fn”>Leeroy Jenkins</span> <a itemprop=“email” href=“mailto:[email protected]”> email do leeroy </a></p>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Microdata5
<p itemscope itemtype=“http://microformats.org/profile/hcard”> <span itemprop=“fn”>Leeroy Jenkins</span> <a itemprop=“email” href=“mailto:[email protected]”> email do leeroy </a></p>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Microdata5
<p itemscope itemtype=“http://microformats.org/profile/hcard”> <span itemprop=“fn”>Leeroy Jenkins</span> <a itemprop=“email” href=“mailto:[email protected]”> email do leeroy </a></p>
<http://microformats.org/profile/hcard>
FN: Leeroy JenkinsEMAIL: [email protected]
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Microdata5
<p itemscope itemtype=“http://microformats.org/profile/hcard”> <span itemprop=“fn”>Leeroy Jenkins</span> <a itemprop=“email” href=“mailto:[email protected]”> email do leeroy </a></p>
<http://microformats.org/profile/hcard>
FN: Leeroy JenkinsEMAIL: [email protected]
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Microdata5
data-*
<section id=“noticias” data-zone=“hp_noticias”>...
Atributos para guardar dados úteis a scripts.
Tuesday, May 25, 2010
itemscope => [elemento]<meta> => @content<audio>, <embed>, <iframe>, <img>, <source>, <video> => @src<a>, <area>, <link> => @href<object> => @data<time> => @datetime
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
TEMPO: 21MIN
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Novas relações nos links6
Tuesday, May 25, 2010
TEMPO: 21MIN
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Novas relações nos links6
<link rel=“_________” href=“_____”
<a rel=“_________” href=“_____”
<area rel=“_________” href=“_____”
Tuesday, May 25, 2010
TEMPO: 21MIN
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Novas relações nos links6
rel=“_____” <link> <a> & <area>alternatearchivesauthor
bookmarkexternal
firsthelpicon
indexlast
licensenext
nofollownoreferrer
rel=“_____” <link> <a> & <area>pingbackprefetch
prevsearch
stylesheetsidebar
tagup
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Novas relações nos links6
rel=“_____” <link> <a> & <area>alternatearchivesauthor
bookmarkexternal
firsthelpicon
indexlast
licensenext
nofollownoreferrer
rel=“_____” <link> <a> & <area>pingbackprefetch
prevsearch
stylesheetsidebar
tagup
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Novas relações nos links6
rel=“_____” <link> <a> & <area>alternatearchivesauthor
bookmarkexternal
firsthelpicon
indexlast
licensenext
nofollownoreferrer
rel=“_____” <link> <a> & <area>pingbackprefetch
prevsearch
stylesheetsidebar
tagup
Tipos de Links — HTML4http://www.w3.org/TR/REC-html40/types.html#type-linksAtalho: http://341n.sl.pt
Tipos de Links — HTML5http://dev.w3.org/html5/spec/Overview.html#linkTypesAtalho: http://341o.sl.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Web Forms 2.07
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Web Forms 2.07
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Web Forms 2.07
Um aspecto em comum... JavaScript.
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Web Forms 2.07
•search•tel•url•email•datetime•date•month
•week•time•datetime-local•number•range•color
Tipos de input<input type=“________”
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Web Forms 2.07
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Web Forms 2.07
•autocomplete•list usado com <datalist>
•readonly•size•required•multiple•maxlength
•pattern•min•max•step•placeholder
Atributos novos
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Web Forms 2.07
•autocomplete•list usado com <datalist>
•readonly•size•required•multiple•maxlength
•pattern•min•max•step•placeholder
Atributos novos
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Media elements<audio> & <video>
8
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Media elements<audio> & <video>
8
Tuesday, May 25, 2010
CUE IN JOKE! “Xô!”------------------------------------------------
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Media elements<audio> & <video>
8
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Media elements<audio> & <video>
8
xjyTuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Media elements<audio> & <video>
8
Suporte nativo de componentes multimédia.
<audio> & <video>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
http://en.wikipedia.org/wiki/Tarzan_yellAtalho: http://34c1.sl.pt
Tuesday, May 25, 2010
28min?
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
http://en.wikipedia.org/wiki/Tarzan_yellAtalho: http://34c1.sl.pt
Tuesday, May 25, 2010
28min?
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
http://9elements.com/io/projects/html5/canvas/Atalho: http://vj9.sl.pt
Tuesday, May 25, 2010
28min?
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
http://youtube.com/html5Atalho: http://34c8.sl.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
[k] Augusto Brazio
A LUTA DOS
CODECS
Tuesday, May 25, 2010
TEMPO: 29MIN
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
[k] Augusto Brazio
mp3 ogg vorbiswav
+3.5+3.5 +4+4
+3b+10.50 +10.50
A LUTADOS
CODECS(audio)
9final 2010?
aac
+4
+3b
9final 2010?
+3b
Tuesday, May 25, 2010
TEMPO: 29MIN
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
[k] Augusto Brazio
ogg theora webmh.264
+3.7†+3.5+4
+3b10.50 10.50 10.54†
A LUTADOS
CODECS(video)
9†final 2010?
+6? †
NOVO
9*†final 2010?
* Requererá download e instalação do codec.† Versões não finais/lançadas
Tuesday, May 25, 2010
IE9 & Chrome & Safari = também suportam AAC
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Media elements<audio> & <video>
8
<audio autoplay controls preload loop src=“discurso.mp3”>
</audio>
<video controls src=“yui.m4v”>
</video>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Media elements<audio> & <video>
8
<audio controls>
<source src=“a.ogg” type=“audio/ogg”>
<source src=“a.mp3” type=“audio/mp3”>
</audio>
<video controls>
<source src=“yui.mp4” type=“video/mp4;codecs=‘avc1.42E01E, mp4a.40.2’” media=“screen”>
<track kind=“subtitles” label=“Legendas (pt)” src=“yui-legendas.srt” srclang=“pt”>
</video>
Tuesday, May 25, 2010
Track kinds: subtitles, captions, descriptions, chapters, metadatasrt = http://en.wikipedia.org/wiki/SubRip#SubRip_Format
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Media elements<audio> & <video>
8
<script>new Audio (‘exemplo.mp3’);
</script>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Media elements<audio> & <video>
8
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Media elements<audio> & <video>
8
mais info sobre o elemento audio http://www.whatwg.org/specs/web-apps/current-work/#audioAtalho: http://34dn.sl.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Media elements<audio> & <video>
8
mais info sobre o elemento audio http://www.whatwg.org/specs/web-apps/current-work/#audioAtalho: http://34dn.sl.pt
mais info sobre o elemento video http://www.whatwg.org/specs/web-apps/current-work/#videoAtalho: http://34do.sl.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Media elements<audio> & <video>
8
mais info sobre o elemento audio http://www.whatwg.org/specs/web-apps/current-work/#audioAtalho: http://34dn.sl.pt
mais info sobre o elemento video http://www.whatwg.org/specs/web-apps/current-work/#videoAtalho: http://34do.sl.pt
mais info sobre o elemento source http://www.whatwg.org/specs/web-apps/current-work/#the-source-elementAtalho: http://34dm.sl.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Media elements<audio> & <video>
8
mais info sobre o elemento audio http://www.whatwg.org/specs/web-apps/current-work/#audioAtalho: http://34dn.sl.pt
mais info sobre o elemento video http://www.whatwg.org/specs/web-apps/current-work/#videoAtalho: http://34do.sl.pt
mais info sobre o elemento source http://www.whatwg.org/specs/web-apps/current-work/#the-source-elementAtalho: http://34dm.sl.pt
mais info sobre o elemento track http://www.whatwg.org/specs/web-apps/current-work/#the-track-elementAtalho: http://34dp.sl.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Canvas9
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Canvas9
Tuesday, May 25, 2010
JOKE!! MAGIATEMPO: 34MIN ----------------------------------------
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Canvas9
Tuesday, May 25, 2010
TEMPO: 34MIN
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Canvas9
<canvas>Elemento que permite manipulação gráficaatravé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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Canvas9
<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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Canvas9
função gráfica atributos
scale(x,y); globalAlpharotate(rad); globalCompositionOperation
translate(x,y); strokeStyle
transform(m11, m12, m21, m22, dx, dy); fillStyle
... ...
Contexto: 2D
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Canvas9
função gráfica atributos
scale(x,y); globalAlpharotate(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-2dAtalho: http://34dx.sl.pt
Contexto: 2D
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Canvas9
Contexto: WebGL
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Canvas9
Mais em https://developer.mozilla.org/en/WebGLAtalho: http://34oe.sl.pt
Contexto: WebGL
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Offline webapps10
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Offline webapps10INTERNET1 INTERNET2
Antes
AgoraINTERNET1 INTERNET2
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Offline webapps10
CACHE MANIFESTindex.htmlajuda.htmlcss/screen.cssjs/entire-app.jsimgs/css-sprites.png
NETWORK:check.php#version12
<!doctype html><html manifest=“/navio.manifest”>
<head>...
http://example.com/index.html
http://example.com/navio.manifest
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Offline webapps10
CACHE MANIFESTindex.htmlajuda.htmlcss/screen.cssjs/entire-app.jsimgs/css-sprites.png
NETWORK:check.php#version12
<!doctype html><html manifest=“/navio.manifest”>
<head>...
http://example.com/index.html
http://example.com/navio.manifest
ficheiros estáticos(cache)
ficheiros dinâmicos (sem cache)cache-busting
servir com mime-type correcto: text/cache-manifest
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Offline webapps10<script>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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Offline webapps10<script>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>
“This attribute is inherently unreliable. A computer can be connected to a network without having Internet access.”
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Offline webapps10<script>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>
“This attribute is inherently unreliable. A computer can be connected to a network without having Internet access.”
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
TEMPO: 38MIN ----------------------------------------
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Client-side StoragesessionStorage, localStorage, webDB
11
Tuesday, May 25, 2010
TEMPO: 38MIN ----------------------------------------
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
localStorage.setItem(‘foo’, ‘bar’);*browser fechado*
*dia seguinte*localStorage.getItem(‘foo’); // => ‘bar’
PRONTO, OK. O QUE HÁ DE NOVO?
Client-side StoragesessionStorage, localStorage, webDB
11
localStorage
sessionStorageObjecto de armazenamento permanente durante uma sessão.
Pares chave/valor estão isolados, não acessíveis noutras tabs/janelas.
Objecto de armazenamento permanente (perdura após fim de sessão).
Pares chave/valor estão acessíveis de todas astabs/janelas.
[tab#1] sessionStorage.setItem(‘foo’, ‘bar’);
[tab#2] sessionStorage.getItem(‘foo’); // => ‘bar’
Tuesday, May 25, 2010
TEMPO: 38MIN ----------------------------------------
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Client-side StoragesessionStorage, localStorage, webDB
11
webDBInterface com um repositório similar a SQLlite.
Para dados estruturados e relacionais.
Usado por webapps online e offline assim como por webworkers(coming up next!).
var db = openDatabase ( ‘nome’, ‘v1.5’, 1024); // uso esperado:1024bytesdb.transaction('create table t1 (t1key INTEGER PRIMARY KEY,data TEXT,num double,timeEnter DATE);');
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Client-side StoragesessionStorage, localStorage, webDB
11
webDBInterface com um repositório similar a SQLlite.
Para dados estruturados e relacionais.
Usado por webapps online e offline assim como por webworkers(coming up next!).
var db = openDatabase ( ‘nome’, ‘v1.5’, 1024); // uso esperado:1024bytesdb.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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Comunicação/ThreadingWebsockets, Webworkers
12
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Comunicação/ThreadingWebsockets, Webworkers
12
var socket = new WebSocket('ws://game.example.com:12010/updates');
socket.onopen = function () { setInterval(function() { if (socket.bufferedAmount == 0)
socket.send(getUpdateData()); }, 50);
};
Websockets API
Server-sent Eventsvar stocks = new EventSource("http://stocks.example.com/ticker.php");
stocks.onmessage = function (event) { var data = event.data.split('\n'); updateStocks(data[0], data[1], data[2]);};
data: YHOOdata: +2data: 10
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
<script>var w = new Worker('worker.js');
w.onmessage = function(ev) {do_something(ev.data);
};</script>
PRONTO, OK. O QUE HÁ DE NOVO?
Comunicação/ThreadingWebsockets, Webworkers
12
WebworkersExecutar código complexo e demorado sem que bloqueie o event-loop normal do JavaScript nem o GUI do browser.
var n = 1;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);}
worker.js
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
<script>var w = new Worker('worker.js');
w.onmessage = function(ev) {do_something(ev.data);
};</script>
PRONTO, OK. O QUE HÁ DE NOVO?
Comunicação/ThreadingWebsockets, Webworkers
12
WebworkersExecutar código complexo e demorado sem que bloqueie o event-loop normal do JavaScript nem o GUI do browser.
var n = 1;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);}
worker.js
Mais em http://www.w3.org/TR/workers/Atalho: http://34f5.sl.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Geolocation13
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Geolocation13
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Geolocation13
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Geolocation13
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Geolocation13
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Geolocation13
<script>function handleGeo(pos) { var lat = pos.coords.latitude; var lon = pos.coords.longitude; var accuracy = pos.coords.accuracy; (...)} navigator.geolocation.getCurrentPosition(handleGeo);</script>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Geolocation13
<script>function handleGeo(pos) { var lat = pos.coords.latitude; var lon = pos.coords.longitude; var accuracy = pos.coords.accuracy; (...)} navigator.geolocation.getCurrentPosition(handleGeo);</script>
Mais em http://dev.w3.org/geo/api/spec-source.htmlAtalho: http://34fr.sl.pt
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Experiencedrag-n-drop
14
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Experiencedrag-n-drop
14
<p id=“ze” draggable ondragstart=“start();”>Arrasta-me para ali.
</p>
<section id=“basket”ondragover=“hover();”ondragleave=“normal();”ondrop=“handleDrop();”>
...</section>
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
PRONTO, OK. O QUE HÁ DE NOVO?
Experiencedrag-n-drop
14
<p id=“ze” draggable ondragstart=“start();”>Arrasta-me para ali.
</p>
<section id=“basket”ondragover=“hover();”ondragleave=“normal();”ondrop=“handleDrop();”>
...</section>
function start(e) {e.preventDefault();e.dataTransfer.id = this.id;$(‘basket’).className=‘getready’;
}
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Tuesday, May 25, 2010
TEMPO: 43MIN ----------------------------------------
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Mais em http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.htmlAtalho: http://15zg.sl.pt
Tuesday, May 25, 2010
TEMPO: 43MIN ----------------------------------------
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
Novas relações nos links
PRONTO, OK. O QUE HÁ DE NOVO?
novos elementossection, nav, footer, etc.
HTML5/XHTML5
ARIAaccessible rich internet applications
Microdata
Web Forms 2.0
Media elements<audio> & <video>
Canvas
Offline webapps
APIs de JavaScript
Client-side StoragesessionStorage, localStorage, webDB
Comunicação/ThreadingWebsockets, Webworkers
Geolocation
Experiencedrag-n-drop
(resumo) HTML5Optimização da
LinguagemDoctype, atributos por omissão
Optimização da Linguagem
Doctype, atributos por omissão
1
HTML5/XHTML52
novos elementossection, nav, footer, etc.
3
ARIAaccessible rich internet applications
4
Microdata5
Novas relações nos links6
Web Forms 2.07
Media elements<audio> & <video>
8
Canvas9
Offline webapps10
Client-side StoragesessionStorage, localStorage, webDB
11
Comunicação/ThreadingWebsockets, Webworkers
12
Geolocation13
Experiencedrag-n-drop
14
Tuesday, May 25, 2010
Tuesday, May 25, 2010
ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
QUERO SABER MAIS!
Tuesday, May 25, 2010
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
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.findmebyip.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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
QUERO MANTER-ME A PAR!
WHAT-WG
Especificaçã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
HTML5 A NOVA ERA DA WEBISEL Tech Days 2010
“We must adjust to changing times and still hold to unchanging principles.”
Jimmy Carter39º Presidente dos EUA
A WEB ESTÁ A MUDAR...
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
Tuesday, May 25, 2010
ISEL Tech Days 2010
HTML5 A NOVA ERA DA WEB
http://id.andr3.net
André Luís @andr3http://[email protected]
FIM
http://talks.andr3.net/2010/iseltech.pdfAtalho: http://34pb.sl.pt
creative commons 3.0 § attribution § non-commercial § share-alike
TAmerican TypewriterHoefler Text
League GothicChunk Five
Tuesday, May 25, 2010
TEMPO: 45/48MIN ----------------------------------------
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
CRÉDITOS
Tuesday, May 25, 2010