HTML5 - A nova era da Web

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

description

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

Transcript of HTML5 - A nova era da Web

Page 1: 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

Page 2: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

Tuesday, May 25, 2010

Page 3: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

EU?

Tuesday, May 25, 2010

Page 4: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

EU?

http://id.andr3.net

@andr3

mobifeeds.net

igive.sapo.pt

Tuesday, May 25, 2010

Page 5: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

EU?

2002 — 2008

2007 — ...

Tuesday, May 25, 2010

Page 6: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

EU?

mais em http://slideshare.net/andr3Atalho: http://33om.sl.pt

Tuesday, May 25, 2010

Page 7: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

EU?

Tuesday, May 25, 2010

Page 8: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

EU?

@isacosta

@ivogomes

@andr3

@nloureiro

EQUIPA DE WEBDESIGN

Tuesday, May 25, 2010

Page 9: HTML5 - A nova era da Web

Tuesday, May 25, 2010

Page 10: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

LET’S ROCK!

Tuesday, May 25, 2010

Page 11: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

Tuesday, May 25, 2010

Page 12: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

O QUE USAMOS HOJE PARA TECER A WEB?

Tuesday, May 25, 2010

Page 13: HTML5 - A nova era da Web

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

Page 14: HTML5 - A nova era da Web

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

Page 15: HTML5 - A nova era da Web

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

Page 16: HTML5 - A nova era da Web

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

Page 17: HTML5 - A nova era da Web

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

Page 18: HTML5 - A nova era da Web

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

Page 19: HTML5 - A nova era da Web

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

Page 20: HTML5 - A nova era da Web

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

Page 21: HTML5 - A nova era da Web

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

Page 22: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

PORQUE NÃO CHEGA O QUE TEMOS AGORA?

Tuesday, May 25, 2010

TEMPO: 4MIN -------------------------------------

Page 23: HTML5 - A nova era da Web

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

Page 24: HTML5 - A nova era da Web

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

Page 25: HTML5 - A nova era da Web

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

Page 26: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

ENTÃO QUAL ÉO CAMINHO A SEGUIR?

Tuesday, May 25, 2010

Page 27: HTML5 - A nova era da Web

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

Page 28: HTML5 - A nova era da Web

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

Page 29: HTML5 - A nova era da Web

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

Page 30: HTML5 - A nova era da Web

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

Page 31: HTML5 - A nova era da Web

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

Page 32: HTML5 - A nova era da Web

Tuesday, May 25, 2010

Page 33: HTML5 - A nova era da Web

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

Page 34: HTML5 - A nova era da Web

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

Page 35: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

XHTML 2?

ENTÃO QUAL É O CAMINHO A SEGUIR?

Tuesday, May 25, 2010

Page 36: HTML5 - A nova era da Web

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

Page 37: HTML5 - A nova era da Web

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

Page 38: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

QUANDO É QUEPOSSO BRINCAR?

Tuesday, May 25, 2010

TEMPO: 8MIN -----------------------------------

Page 39: HTML5 - A nova era da Web

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

Page 40: HTML5 - A nova era da Web

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

Page 41: HTML5 - A nova era da Web

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

Page 42: HTML5 - A nova era da Web

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

Page 43: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

PRONTO, OK.O QUE HÁ DE NOVO?

Tuesday, May 25, 2010

Page 44: HTML5 - A nova era da Web

deepphotoTuesday, May 25, 2010

Page 45: HTML5 - A nova era da Web

PREPARADOS?

deepphotoTuesday, May 25, 2010

Page 46: HTML5 - A nova era da Web

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

Page 47: HTML5 - A nova era da Web

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

Page 48: HTML5 - A nova era da Web

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

Page 49: HTML5 - A nova era da Web

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

Page 50: HTML5 - A nova era da Web

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

Page 51: HTML5 - A nova era da Web

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

Page 52: HTML5 - A nova era da Web

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

Page 53: HTML5 - A nova era da Web

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

Page 54: HTML5 - A nova era da Web

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

Page 55: HTML5 - A nova era da Web

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"

Page 56: HTML5 - A nova era da Web

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

Page 57: HTML5 - A nova era da Web

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

Page 58: HTML5 - A nova era da Web

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

Page 59: HTML5 - A nova era da Web

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

Page 60: HTML5 - A nova era da Web

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

Page 61: HTML5 - A nova era da Web

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

Page 62: HTML5 - A nova era da Web

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

Page 63: HTML5 - A nova era da Web

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

Page 64: HTML5 - A nova era da Web

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

Page 65: HTML5 - A nova era da Web

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

Page 66: HTML5 - A nova era da Web

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

Page 67: HTML5 - A nova era da Web

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

Page 68: HTML5 - A nova era da Web

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

Page 69: HTML5 - A nova era da Web

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

Page 70: HTML5 - A nova era da Web

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

Page 71: HTML5 - A nova era da Web

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

Page 72: HTML5 - A nova era da Web

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

Page 73: HTML5 - A nova era da Web

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

Page 74: HTML5 - A nova era da Web

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

Page 75: HTML5 - A nova era da Web

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

Page 76: HTML5 - A nova era da Web

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

Page 77: HTML5 - A nova era da Web

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

Page 78: HTML5 - A nova era da Web

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

Page 79: HTML5 - A nova era da Web

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

Page 80: HTML5 - A nova era da Web

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

Page 81: HTML5 - A nova era da Web

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

Page 82: HTML5 - A nova era da Web

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

Page 83: HTML5 - A nova era da Web

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

Page 84: HTML5 - A nova era da Web

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

Page 85: HTML5 - A nova era da Web

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

Page 86: HTML5 - A nova era da Web

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

Page 87: HTML5 - A nova era da Web

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

Page 88: HTML5 - A nova era da Web

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

Page 89: HTML5 - A nova era da Web

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

Page 90: HTML5 - A nova era da Web

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

Page 91: HTML5 - A nova era da Web

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

Page 92: HTML5 - A nova era da Web

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

Page 93: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

PRONTO, OK. O QUE HÁ DE NOVO?

Web Forms 2.07

Tuesday, May 25, 2010

Page 94: HTML5 - A nova era da Web

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

Page 95: HTML5 - A nova era da Web

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

Page 96: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

PRONTO, OK. O QUE HÁ DE NOVO?

Web Forms 2.07

Tuesday, May 25, 2010

Page 97: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

Tuesday, May 25, 2010

Page 98: HTML5 - A nova era da Web

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

Page 99: HTML5 - A nova era da Web

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

Page 100: HTML5 - A nova era da Web

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

Page 101: HTML5 - A nova era da Web

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

Page 102: HTML5 - A nova era da Web

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

Page 103: HTML5 - A nova era da Web

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

Page 104: HTML5 - A nova era da Web

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

Page 105: HTML5 - A nova era da Web

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

Page 106: HTML5 - A nova era da Web

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?

Page 107: HTML5 - A nova era da Web

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?

Page 108: HTML5 - A nova era da Web

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?

Page 109: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

http://youtube.com/html5Atalho: http://34c8.sl.pt

Tuesday, May 25, 2010

Page 110: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

[k] Augusto Brazio

A LUTA DOS

CODECS

Tuesday, May 25, 2010

TEMPO: 29MIN

Page 111: HTML5 - A nova era da Web

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

Page 112: HTML5 - A nova era da Web

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

Page 113: HTML5 - A nova era da Web

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

Page 114: HTML5 - A nova era da Web

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

Page 115: HTML5 - A nova era da Web

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

Page 116: HTML5 - A nova era da Web

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

Page 117: HTML5 - A nova era da Web

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

Page 118: HTML5 - A nova era da Web

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

Page 119: HTML5 - A nova era da Web

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

Page 120: HTML5 - A nova era da Web

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

Page 121: HTML5 - A nova era da Web

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

Page 122: HTML5 - A nova era da Web

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

Page 123: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

PRONTO, OK. O QUE HÁ DE NOVO?

Canvas9

Tuesday, May 25, 2010

JOKE!! MAGIATEMPO: 34MIN ----------------------------------------

Page 124: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

PRONTO, OK. O QUE HÁ DE NOVO?

Canvas9

Tuesday, May 25, 2010

TEMPO: 34MIN

Page 125: HTML5 - A nova era da Web

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

Page 126: HTML5 - A nova era da Web

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

Page 127: HTML5 - A nova era da Web

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

Page 128: HTML5 - A nova era da Web

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

Page 129: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

PRONTO, OK. O QUE HÁ DE NOVO?

Canvas9

Contexto: WebGL

Tuesday, May 25, 2010

Page 130: HTML5 - A nova era da Web

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

Page 131: HTML5 - A nova era da Web

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

Page 132: HTML5 - A nova era da Web

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

Page 133: HTML5 - A nova era da Web

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

Page 134: HTML5 - A nova era da Web

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

Page 135: HTML5 - A nova era da Web

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

Page 136: HTML5 - A nova era da Web

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

Page 137: HTML5 - A nova era da Web

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

Page 138: HTML5 - A nova era da Web

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

Page 139: HTML5 - A nova era da Web

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

Page 140: HTML5 - A nova era da Web

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

Page 141: HTML5 - A nova era da Web

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

Page 142: HTML5 - A nova era da Web

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

Page 143: HTML5 - A nova era da Web

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

Page 144: HTML5 - A nova era da Web

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

Page 145: HTML5 - A nova era da Web

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

Page 146: HTML5 - A nova era da Web

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

Page 147: HTML5 - A nova era da Web

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

Page 148: HTML5 - A nova era da Web

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

Page 149: HTML5 - A nova era da Web

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

Page 150: HTML5 - A nova era da Web

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

Page 151: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

PRONTO, OK. O QUE HÁ DE NOVO?

Geolocation13

Tuesday, May 25, 2010

Page 152: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

PRONTO, OK. O QUE HÁ DE NOVO?

Geolocation13

Tuesday, May 25, 2010

Page 153: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

PRONTO, OK. O QUE HÁ DE NOVO?

Geolocation13

Tuesday, May 25, 2010

Page 154: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

PRONTO, OK. O QUE HÁ DE NOVO?

Geolocation13

Tuesday, May 25, 2010

Page 155: HTML5 - A nova era da Web

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

Page 156: HTML5 - A nova era da Web

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

Page 157: HTML5 - A nova era da Web

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

Page 158: HTML5 - A nova era da Web

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

Page 159: HTML5 - A nova era da Web

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

Page 160: HTML5 - A nova era da Web

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

Page 161: HTML5 - A nova era da Web

HTML5 A NOVA ERA DA WEBISEL Tech Days 2010

Tuesday, May 25, 2010

TEMPO: 43MIN ----------------------------------------

Page 162: HTML5 - A nova era da Web

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

Page 163: HTML5 - A nova era da Web

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

Page 164: HTML5 - A nova era da Web

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

Page 165: HTML5 - A nova era da Web

Tuesday, May 25, 2010

Page 166: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

QUERO SABER MAIS!

Tuesday, May 25, 2010

Page 167: HTML5 - A nova era da Web

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

Page 168: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

QUERO MANTER-ME A PAR!

Tuesday, May 25, 2010

Page 169: HTML5 - A nova era da Web

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

Page 170: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

A WEB ESTÁ A MUDAR...

Tuesday, May 25, 2010

Page 171: HTML5 - A nova era da Web

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

Page 172: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

QUESTÕES?

Tuesday, May 25, 2010

Page 173: HTML5 - A nova era da Web

ISEL Tech Days 2010

HTML5 A NOVA ERA DA WEB

Tuesday, May 25, 2010

Page 174: HTML5 - A nova era da Web

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

Page 175: HTML5 - A nova era da Web

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