Upload
others
View
21
Download
0
Embed Size (px)
Citation preview
HTML5 O Futuro da Web
Multimídia sem limites – Senac Santo André
05 de outubro de 2011
Reinaldo Ferraz – W3C.br
•Um pouco do W3C
É um consórcio internacional, que
conta com:
• organizações filiadas,
• uma equipe em tempo integral,
• participação do público
para colaborativamente desenvolver
padrões universais para a Web.
HTML5 - Futuro da Web
O W3C no Brasil
O escritório brasileiro começou suas atividades em
outubro de 2007.
É uma iniciativa do CGI.br, que é o responsável por
coordenar e integrar as iniciativas de serviços da
Internet no País e do NIC.br, criado para
implementar as decisões e os projetos do Comitê
Gestor da Internet no Brasil.
4
HTML5 - Futuro da Web
Web e W3C
Tim Berners-Lee criou / propôs
• a Web em 1989 (há 22 anos)
– http://www.w3.org/History/1989/proposal.html
– (URI + HTTP + HTML)
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Web e W3C
6
HTML5 - Futuro da Web
Web e W3C
Tim Berners-Lee criou / propôs
• a Web em 1989 (há 22 anos)
– http://www.w3.org/History/1989/proposal.html
– (URI + HTTP + HTML)
• o W3C em 1994 (há17 anos)
– 01/10/1994 no MIT, Laboratório de Ciência da Computação
http://web.archive.org/web/19961227091242/http://www19.w3.org/
Web e W3C
http://www.w3.org/
Web e W3C
9
HTML5 - Futuro da Web
Web e W3C
Tim Berners-Lee criou / propôs
• a Web em 1989 (há 22 anos)
– http://www.w3.org/History/1989/proposal.html
– (URI + HTTP + HTML)
• o W3C em 1994 (há17 anos)
– 01/10/1994 no MIT, Laboratório de Ciência da Computação
• Web Semântica
– 1a. Conferência Internacional WWW – 25 a 27/05/1994
– http://www.w3.org/Talks/WWW94Tim/
– 22ª Conferência – Rio de Janeiro - 2013
http://www.w3.org/Talks/WWW94Tim//
Web e W3C
http://www2012.org/
Web e W3C
12
HTML5 - Futuro da Web
Missão do W3C
Conduzir a World Wide Web para que atinja todo
seu potencial, desenvolvendo protocolos e
diretrizes que garantam seu crescimento de
longo prazo.
13
HTML5 - Futuro da Web
O W3C desenvolve padrões
Conduzir a World Wide Web para que atinja todo
seu potencial, desenvolvendo protocolos e
diretrizes que garantam seu crescimento de
longo prazo.
Desde sua fundação, o W3C publicou mais de uma
centena de padrões, denominados
Recomendações do W3C
Web Standards – Padrões Web
14
HTML5 - Futuro da Web
Metas W3C
Tornar os benefícios da web (seu valor
social: comunicação humana,
comércio, compartilhar conhecimentos)
disponíveis a todos, independente de
• Web para todos
– Hardware
– Software
– Infraestrutura de
rede
– Idioma
– Cultura
– Localização
geográfica
– Habilidade física
– Habilidade mental
15
HTML5 - Futuro da Web
Metas W3C
• Web para todos
• Web em qualquer dispositivo
16
HTML5 - Futuro da Web
Metas W3C
Possibilitar que o acesso de qualquer
tipo de dispositivo seja tão simples,
fácil e conveniente quanto de um
computador convencional
• Web em qualquer dispositivo
– Computadores
– Desktops
– Netbooks
– Telefones
– PDAs
– TV digital
– Sistemas de interação
por voz
– Aparelhos domésticos
– … web ubíqua
17
HTML5 - Futuro da Web
Metas W3C
Não apenas um grande livro
hiperlinkado onde pessoas possam
pesquisar, navegar, visualizar e ler
informações
• Web base de conhecimento
Possibilitar que computadores interpretem, estabeleçam inferências e relações na web Interoperabilidade
– Web Semântica
18
HTML5 - Futuro da Web
Metas W3C
• Web para todos
• Web em qualquer dispositivo
• Web base de conhecimento
• Web confiável e segura
19
HTML5 - Futuro da Web
Metas W3C
Uma web em que as transações sociais e
comunicações com terceiros sejam
estabelecidas em relações de confiança,
por pessoas, organizações ou serviços
• Web confiável e segura
– Ambiente mas colaborativo
– responsável
– seguro
– Confiança e Confidência
20
HTML5 - Futuro da Web
Futuro da Web
Web
Browsers
Motores
de busca
A B C D
HTML HTML HTML HTML
hyper
links
hyper
links
hyper
links
HTTP
21
HTML5 - Futuro da Web
Futuro da Web
RDF +
HTML5 URI
Web browsers
dados
linkados
Motores
de busca
A B C D
link de
dados
Mashups de
dados
linkados
dados
dados
dados
dados
dados
dados
dados
dados
E
dados
dados
link de
dados
link de
dados
link de
dados
HTTP HTTP
22
HTML5 - Futuro da Web
Futuro da Web
WEB 2001
23
HTML5 - Futuro da Web
Futuro da Web
WEB 2011
24
HTML5 - Futuro da Web
Futuro da Web - HTML5
•Acessibilidade na web
HTML4 – XHTML – HTML5
HTML5 - Futuro da Web
26
HTML5 - Futuro da Web
Futuro da Web - HTML5
1991 – html tag – Tim Berners Lee
1994 – HTML 2 - já incluia tag <img>
1997 – HTML 3.2
1999 – HTML 4.01
2000 – XHTML 1.0
2001 – XHTML 1.1 – CSS
20... – Ian Hickson (Opera) propõe estender HTML: Web Forms 2.0, Web Apps 1.0
2004 – Apple, Mozilla e Opera criam WHAT WG (Web Hypertext Application Technology Working Group)
2007 – W3C retorna HTML Working Group
2009 – W3C descontinua XHTML
2010-2011 – Apple, Google, Microsoft, Mozilla e Opera
implementam HTML5
HTML 5 [HyperText Markup Language]
http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
Futuro da Web - HTML5
http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
Futuro da Web - HTML5
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html
Futuro da Web - HTML5
30
HTML5 - Futuro da Web
Futuro da Web - HTML5
Maio/2011 – Last Call
Processo W3C padronização :
• Working Draft (Rascunho de Trabalho)
• Last Call
• Candidate Recommendation (Candidato a Recomendação):
• Chamada para implementação
• Proposed Recommendation (Proposta de Recomendação):
• Chamada para revisão de proposta de recomendação
• W3C Recommendation (Recomendação W3C):
• Publicação da recomendação
HTML 5 [HyperText Markup Language]
31
HTML5 - Futuro da Web
Futuro da Web – HTML 5
HTML 5 [HyperText Markup Language]
32
HTML5 - Futuro da Web
Futuro da Web - HTML5
DOCTYPE
33
HTML5 - Futuro da Web
Futuro da Web - HTML5
Doctype:
HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
34
HTML5 - Futuro da Web
Futuro da Web - HTML5
<!DOCTYPE html!>
Acessibilidade na web
Formulários
Futuro da Web - HTML5
Novidades nos formulários <form>
<label>
Nome <input type="text" name="nome" placeholder="digite seu nome" required />
</label>
<label>
E-mail <input type=“email" name="email" placeholder="digite seu e-mail" required />
</label>
Website <input type="url" name="website" required />
</label>
<label>
Escolha a cor <input type="color" name=“color" />
</label>
<label>
Data de destino <input type="datetime" name=“date" />
</label>
<input type="submit">
</form>
Futuro da Web - HTML5
Speech http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html
Futuro da Web - HTML5
TABELAS
Futuro da Web - HTML5
“As tabelas não devem ser utilizadas como auxiliares de layout.
Historicamente, alguns autores têm abusado das tabelas em HTML,
como forma de controlar o seu layout de página. Esse uso não é
recomendado, porque as ferramentas que tentam extrair os dados
tabulares de tais documentos obtém resultados confusos. Em
particular, os usuários de ferramentas de acessibilidade, como
leitores de tela podem achar muito difícil de navegar em páginas com
tabelas usadas para layout.”
http://www.w3.org/TR/html5/tabular-data.html#the-table-element
Futuro da Web - HTML5
Não utilize tabelas para layout
Elas não foram feitas para isso.
Futuro da Web - HTML5
Vídeo em HTML5
Video
http://www.w3.org/2009/02/ThisIsCoffee.html
43
HTML5 - Futuro da Web
Futuro da Web - HTML5
HTML 5 [HyperText Markup Language]
VíDEO <video id='VideoResource' style='border: black 1px solid; margin-left: 4px; margin-top:
4px; margin-bottom: 0px;' poster='/2009/04/coffee.png'>
<source src="http://media.w3.org/2009/02/ThisisCo1961_tiny.mp4" type="video/mp4"/>
<source src="http://media.w3.org/2009/02/ThisisCo1961_tiny.ogv" type="video/ogg"/>
<text lang='en' type="application/ttaf+xml" src="/2009/02/ThisIsCoffee61_captions.xml">
</text>
<div style='width: 320px; height: 240px; color: white'><p>No Video Support.</p>
</div>
</video>
http://www.w3.org/2011/Talks/0504-html5-plh/video-player.xhtml
http://www.w3c.br/Noticias/W3cBrasilPublicaPrimeiroVideoEmHtml5ETtml10
44
HTML5 - Futuro da Web
Futuro da Web - HTML5
HTML 5 [HyperText Markup Language]
45
HTML5 - Futuro da Web
Futuro da Web - HTML5
HTML 5 [HyperText Markup Language]
<canvas>
http://szenesprachenwiki.de/words/canvas
46
HTML5 - Futuro da Web
Futuro da Web - HTML5
HTML 5 [HyperText Markup Language]
<canvas>
http://guciek.net/burn_canvas/en
47
HTML5 - Futuro da Web
Futuro da Web - HTML5
HTML 5 [HyperText Markup Language]
<canvas>
http://chrome.angrybirds.com/
Canvas
<canvas id="theapt" width="100" height="100">
<div class="warning"> <p>Diese Seite wurde mit Hilfe der neuesten HTML 5-
Technik programmiert und lässt sich daher nur auf neueren Browser-Versionen
ansehen. Browser, die dieses Feature unterstützen sind z.B.
<a href="http://getfirefox.com">FireFox 3.5</a>,
<a href="http://apple.com/safari">Safari</a>,
<a href="http://www.opera.com/">Opera</a> or
<a href="http://google.com/chrome">Chrome</a>. Sie können sich diese Browser
kostenlos herunterladen.</p>
</div>
</canvas>
Futuro da Web - HTML5
49
HTML5 - Futuro da Web
Futuro da Web - HTML5
HTML 5 [HyperText Markup Language]
<svg>
Semântica
Os novos elementos
Futuro da Web - HTML5
51
HTML5 - Futuro da Web
Futuro da Web - HTML5
HTML 5 [HyperText Markup Language]
Novos elementos
<article>
<section>
<header> & <footer>
<hgroup> (agrupamento <h1> <h2> …)
<aside>
<figure> e <figcaption>
Lista completa: http://www.w3.org/TR/html-markup/
52
HTML5 - Futuro da Web
Futuro da Web - HTML5
HTML 5 [HyperText Markup Language]
HTML4 + CSS
53
HTML5 - Futuro da Web
Futuro da Web - HTML5
HTML 5 [HyperText Markup Language]
Novos
elementos
(semânticos)
HTML5 + CSS
E o que ficou de fora do HTML5?
Futuro da Web - HTML5
abbr, align, allowtransparency, archive, background, bgcolor, border, cellspacing,
classid, clear, code, codetype, color, compact, frameborder, height, hspace, link,
marginbottom, marginheight, marginleft, marginright, margintop, marginwidth,
noshade, nowrap, profile, rev, rules, scheme, scrolling, size, standby, target, text, urn, valign,
valuetype, version, vlink, vspace, width
Futuro da Web - HTML5
abbr, align, allowtransparency, archive, background, bgcolor, border, cellspacing,
classid, clear, code, codetype, color, compact, frameborder, height, hspace, link,
marginbottom, marginheight, marginleft, marginright, margintop, marginwidth,
noshade, nowrap, profile, rev, rules, scheme, scrolling, size, standby, target, text, urn, valign,
valuetype, version, vlink, vspace, width
Futuro da Web - HTML5
57
HTML5 - Futuro da Web
Futuro da Web - HTML5
HTML 5 [HyperText Markup Language]
● http://www.whatwg.org/
● http://www.whatwg.org/demos/company-home/
● http://www.w3.org/2009/03/web-demo.xhtml
● http://www.w3.org/html/wiki/Demos
● http://www.w3.org/html/planet/
● http://www.w3.org/html/logo/
● http://www.w3.org/TR/ttaf1-dfxp/
● http://acessodigital.net/video-html5/video-acessibilidade-br.html
● http://www.w3c.br/Cursos/
58
HTML5 - Futuro da Web
Futuro da Web
59
HTML5 - Futuro da Web
Futuro da Web
Conectividade – CSS3 – Acesso de dispositivos –
Gráficos 3D e Efeitos – Multimídia – Performance e
Integração – Semântica – Offline e Armazenamento
60
HTML5 - Futuro da Web
Vagner Diniz, [email protected]
Carlinhos Cecconi, [email protected]
Reinaldo Ferraz, [email protected]
W3C Escritório Brasil Av. das Nações Unidas, 11.541, 7º andar
São Paulo, SP - Brasil
CEP 04578-000
Telefone (11) 5509-3511
http://.../obrigado!
http://www.w3c.br