SlideShare uma empresa Scribd logo
HTML5
O Futuro da Web
Multimídia sem limites – Senac Consolação
11 de setembro de 2012
Reinaldo Ferraz – W3C.br
Um pouco do W3C
O W3C no Brasil
conferenciaweb.w3c.br
http://premio.w3c.br/
8
HTML5 - Futuro da Web
Web e W3C
Tim Berners-Lee criou / propôs
• a Web em 1989 (há 23 anos)
– (URI + HTTP + HTML)
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Web e W3C
10
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á 18 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
13
HTML5 - Futuro da Web
Futuro da Web – HTML 5
HTML 5 [HyperText Markup Language]
14
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
17
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
18
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
19
HTML5 - Futuro da Web
Futuro da Web
WEB 2001
20
HTML5 - Futuro da Web
Futuro da Web
WEB 2011
21
HTML5 - Futuro da Web
Futuro da Web - HTML5
•Acessibilidade na web
HTML4 – XHTML – HTML5
HTML5 - Futuro da Web
23
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
Futuro da Web - HTML5
3 grandes atores da web
28
HTML5 - Futuro da Web
Futuro da Web - HTML5
29
HTML5 - Futuro da Web
Futuro da Web - HTML5
Html5test.com
30
HTML5 - Futuro da Web
Futuro da Web - HTML5
Exemplos
31
HTML5 - Futuro da Web
Futuro da Web - HTML5
32
HTML5 - Futuro da Web
Futuro da Web - HTML5
- Web
- Interoperabilidade
- Geolocalização
- Áudio e Vídeo além da TV
- Comandos de voz
- ...
33
HTML5 - Futuro da Web
Futuro da Web - HTML5
Facilidade para o
desenvolvedor
34
HTML5 - Futuro da Web
Futuro da Web - HTML5
DOCTYPE
35
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">
36
HTML5 - Futuro da Web
Futuro da Web - HTML5
<!DOCTYPE html>
Formulários
Futuro da Web - HTML5
Novidades nos formulários
Futuro da Web - HTML5
<SCRIPT LANGUAGE="JavaScript">
<!-- www.ruajava.kit.net -->
<!-- Begin
var now = new Date();
var month_array = new
Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Out
ubro","Novembro","Dezembro");
document.write("<form name=date_list><table bgcolor=silver><tr><td>");
document.write("<select name=month
onchange=change_month(this.options.selectedIndex)>");
for(i=0;i<month_array.length;i++)
{
if (now.getMonth() != i)
{document.write ("<option value="+i+">"+month_array[i]);}
else
{document.write ("<option value="+i+" selected>"+month_array[i]);}
}
document.write("</select>");
document.write("</td><td>");
document.write ("<select name=year
onchange=change_year(this.options[this.options.selectedIndex])>");
for(i=1950;i<3000;i++)
{
Novidades nos formulários
<input type="date" />
Futuro da Web - HTML5
<input type=“datetime" />
<input type=“datetime-local" />
Futuro da Web - HTML5
Speech
http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html
Futuro da Web - HTML5
<input type="text" x-webkit-speech />
Futuro da Web - HTML5
Exemplos
Futuro da Web - HTML5
Geolocalização
Futuro da Web - HTML5
Exemplos
Vídeo em HTML5
Video
http://www.w3.org/2009/02/ThisIsCoffee.html
47
HTML5 - Futuro da Web
Futuro da Web - HTML5
HTML 5 [HyperText Markup Language]
Futuro da Web - HTML5
Exemplos
49
HTML5 - Futuro da Web
Futuro da Web - HTML5
SVG
Futuro da Web - HTML5
Exemplos
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
Futuro da Web - HTML5
Exemplos
53
Futuro da Web - HTML5
WebGL - Exemplos
Semântica
Os novos elementos
Futuro da Web - HTML5
55
HTML5 - Futuro da Web
Futuro da Web - HTML5
HTML 5 [HyperText Markup Language]
HTML4 + CSS
56
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
Futuro da Web - HTML5
Exemplos
61
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/
62
HTML5 - Futuro da Web
Futuro da Web - HTML5
http://www.w3.org/2011/Talks/0504-html5-plh/video-player.xhtml
http://scriptdraw.com/editor-split.html
http://html5demos.com/geo
http://demo.tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/
http://158.109.70.57/svg/final/svg_subtitles.html
http://dmv.nodejitsu.com/
http://shinydemos.com/3d-color-histogram/
http://airtightinteractive.com/demos/js/webcammesh/
http://danielfilho.info/presentations/gum/motion/
http://neave.com/webcam/html5/
http://balldroppings.com/js/
http://apirogov.github.com/JSnake
http://chrome.angrybirds.com/
http://hexgl.bkcore.com/
http://media.tojicode.com/q3bsp/
https://developer.mozilla.org/media/uploads/demos/T/h/ThiagoMunhoz/60b0b35dbca3a2fde05ea395a
718663b/pure-css3-south-park_1345222043_demo_package/index.html
https://developer.mozilla.org/media/uploads/demos/L/F/LFeh/676da0435f2fd4a2300902c3b810504e/p
ure-css3-eric-cartm_1346873179_demo_package/index.html
https://developer.mozilla.org/media/uploads/demos/b/e/bernarddeluna/98993ebf9a834ed591bc860f9
b08df5b/pure-css3-homer_1342534433_demo_package/index.html
Obrigado!
Reinaldo Ferraz
W3C Escritório Brasil
www.w3c.br
Twitter: @w3cbrasil
reinaldo@nic.br
Twitter: @reinaldoferraz

Mais conteúdo relacionado

Semelhante a HTML5 e o futuro da Web - Senac Consolação 2012

Mobile Web e HTML5
Mobile Web e HTML5Mobile Web e HTML5
Mobile Web e HTML5
Reinaldo Ferraz
 
O HTML 5 e o futuro da web
O HTML 5 e o futuro da webO HTML 5 e o futuro da web
O HTML 5 e o futuro da web
Campus Party Brasil
 
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
Reinaldo Ferraz
 
Passado, Presente e Futuro da Web
Passado, Presente e Futuro da WebPassado, Presente e Futuro da Web
Passado, Presente e Futuro da Web
Instituto Faber-Ludens
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
Ana Carolina Gracioso
 
Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008
Clauber Stipkovic
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
Fábio Flatschart
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
Fábio Flatschart
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
CELULA CURSOS
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
Clécio Bachini
 
API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013
Davidson Alencar
 
Html5
Html5Html5
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
Clécio Bachini
 
Web 2.0: conceito, tendências e desafios
Web 2.0: conceito, tendências e desafiosWeb 2.0: conceito, tendências e desafios
Web 2.0: conceito, tendências e desafios
Mauricio Garcia
 
28/09/2011 - 16h às 18h - Convergência Digital - plataformas e conteúdo - Car...
28/09/2011 - 16h às 18h - Convergência Digital - plataformas e conteúdo - Car...28/09/2011 - 16h às 18h - Convergência Digital - plataformas e conteúdo - Car...
28/09/2011 - 16h às 18h - Convergência Digital - plataformas e conteúdo - Car...
Rio Info
 
Minicurso HTML5
Minicurso HTML5Minicurso HTML5
Minicurso HTML5
Manoel dos Santos
 
MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009
MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009
MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009
MobileMonday Rio de Janeiro
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
Náiron Jcg
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Diego Cavalca
 
HTML5
HTML5HTML5

Semelhante a HTML5 e o futuro da Web - Senac Consolação 2012 (20)

Mobile Web e HTML5
Mobile Web e HTML5Mobile Web e HTML5
Mobile Web e HTML5
 
O HTML 5 e o futuro da web
O HTML 5 e o futuro da webO HTML 5 e o futuro da web
O HTML 5 e o futuro da web
 
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
 
Passado, Presente e Futuro da Web
Passado, Presente e Futuro da WebPassado, Presente e Futuro da Web
Passado, Presente e Futuro da Web
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008Firefox - Developer's Best Friend // Fisl2008
Firefox - Developer's Best Friend // Fisl2008
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
 
Palestra html5 e CSS3
Palestra html5 e CSS3Palestra html5 e CSS3
Palestra html5 e CSS3
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013API's do HTML5 - Davidson Alencar - WebBR2013
API's do HTML5 - Davidson Alencar - WebBR2013
 
Html5
Html5Html5
Html5
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
Web 2.0: conceito, tendências e desafios
Web 2.0: conceito, tendências e desafiosWeb 2.0: conceito, tendências e desafios
Web 2.0: conceito, tendências e desafios
 
28/09/2011 - 16h às 18h - Convergência Digital - plataformas e conteúdo - Car...
28/09/2011 - 16h às 18h - Convergência Digital - plataformas e conteúdo - Car...28/09/2011 - 16h às 18h - Convergência Digital - plataformas e conteúdo - Car...
28/09/2011 - 16h às 18h - Convergência Digital - plataformas e conteúdo - Car...
 
Minicurso HTML5
Minicurso HTML5Minicurso HTML5
Minicurso HTML5
 
MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009
MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009
MobileMonday Rio - W3C e 
Mobile Web - 9 Nov. 2009
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
HTML5
HTML5HTML5
HTML5
 

Mais de Reinaldo Ferraz

Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)
Reinaldo Ferraz
 
Acessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do códigoAcessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do código
Reinaldo Ferraz
 
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
Reinaldo Ferraz
 
Legendas na Web
Legendas na WebLegendas na Web
Legendas na Web
Reinaldo Ferraz
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
Reinaldo Ferraz
 
Por que re-descentralizar a Web?
Por que re-descentralizar a Web?Por que re-descentralizar a Web?
Por que re-descentralizar a Web?
Reinaldo Ferraz
 
Passado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webPassado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na web
Reinaldo Ferraz
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
Reinaldo Ferraz
 
Re-descentralizar a web
Re-descentralizar a webRe-descentralizar a web
Re-descentralizar a web
Reinaldo Ferraz
 
The power of ALT and LANG attributes
The power of ALT and LANG attributesThe power of ALT and LANG attributes
The power of ALT and LANG attributes
Reinaldo Ferraz
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
Reinaldo Ferraz
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
Reinaldo Ferraz
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
Reinaldo Ferraz
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
Reinaldo Ferraz
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
Reinaldo Ferraz
 
Aplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV DigitalAplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV Digital
Reinaldo Ferraz
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
Reinaldo Ferraz
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesada
Reinaldo Ferraz
 
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinasAcessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Reinaldo Ferraz
 
Atributos textuais para imagens e SEO
Atributos textuais para imagens e SEOAtributos textuais para imagens e SEO
Atributos textuais para imagens e SEO
Reinaldo Ferraz
 

Mais de Reinaldo Ferraz (20)

Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)Acessibilidade Digital e Realidade Estendida (VR/XR)
Acessibilidade Digital e Realidade Estendida (VR/XR)
 
Acessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do códigoAcessibilidade na Web - Muito além do código
Acessibilidade na Web - Muito além do código
 
WCAG 2.2 e 3.0
WCAG 2.2 e 3.0WCAG 2.2 e 3.0
WCAG 2.2 e 3.0
 
Legendas na Web
Legendas na WebLegendas na Web
Legendas na Web
 
WCAG 2.2
WCAG 2.2WCAG 2.2
WCAG 2.2
 
Por que re-descentralizar a Web?
Por que re-descentralizar a Web?Por que re-descentralizar a Web?
Por que re-descentralizar a Web?
 
Passado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na webPassado, presente e futuro da acessibilidade na web
Passado, presente e futuro da acessibilidade na web
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Re-descentralizar a web
Re-descentralizar a webRe-descentralizar a web
Re-descentralizar a web
 
The power of ALT and LANG attributes
The power of ALT and LANG attributesThe power of ALT and LANG attributes
The power of ALT and LANG attributes
 
Quando e como usar WAI-ARIA
Quando e como usar WAI-ARIAQuando e como usar WAI-ARIA
Quando e como usar WAI-ARIA
 
Accessibility on SVG and SEO
Accessibility on SVG and SEOAccessibility on SVG and SEO
Accessibility on SVG and SEO
 
Technological study of Brazilian government websites
Technological study of Brazilian government websitesTechnological study of Brazilian government websites
Technological study of Brazilian government websites
 
WCAG 2.1
WCAG 2.1WCAG 2.1
WCAG 2.1
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
 
Aplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV DigitalAplicações em HTML5 para interação com a TV Digital
Aplicações em HTML5 para interação com a TV Digital
 
HTML Acessível
HTML AcessívelHTML Acessível
HTML Acessível
 
Alt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesadaAlt e Lang: Dois atributos da pesada
Alt e Lang: Dois atributos da pesada
 
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinasAcessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
Acessibilidade na Web: Construíndo páginas para pessoas e não só para máquinas
 
Atributos textuais para imagens e SEO
Atributos textuais para imagens e SEOAtributos textuais para imagens e SEO
Atributos textuais para imagens e SEO
 

HTML5 e o futuro da Web - Senac Consolação 2012

  • 1. HTML5 O Futuro da Web Multimídia sem limites – Senac Consolação 11 de setembro de 2012 Reinaldo Ferraz – W3C.br
  • 2.
  • 3.
  • 5. O W3C no Brasil
  • 8. 8 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)
  • 10. 10 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á 18 anos) – 01/10/1994 no MIT, Laboratório de Ciência da Computação
  • 13. 13 HTML5 - Futuro da Web Futuro da Web – HTML 5 HTML 5 [HyperText Markup Language]
  • 14. 14 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
  • 17. 17 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
  • 18. 18 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
  • 19. 19 HTML5 - Futuro da Web Futuro da Web WEB 2001
  • 20. 20 HTML5 - Futuro da Web Futuro da Web WEB 2011
  • 21. 21 HTML5 - Futuro da Web Futuro da Web - HTML5
  • 22. •Acessibilidade na web HTML4 – XHTML – HTML5 HTML5 - Futuro da Web
  • 23. 23 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]
  • 27. Futuro da Web - HTML5 3 grandes atores da web
  • 28. 28 HTML5 - Futuro da Web Futuro da Web - HTML5
  • 29. 29 HTML5 - Futuro da Web Futuro da Web - HTML5 Html5test.com
  • 30. 30 HTML5 - Futuro da Web Futuro da Web - HTML5 Exemplos
  • 31. 31 HTML5 - Futuro da Web Futuro da Web - HTML5
  • 32. 32 HTML5 - Futuro da Web Futuro da Web - HTML5 - Web - Interoperabilidade - Geolocalização - Áudio e Vídeo além da TV - Comandos de voz - ...
  • 33. 33 HTML5 - Futuro da Web Futuro da Web - HTML5 Facilidade para o desenvolvedor
  • 34. 34 HTML5 - Futuro da Web Futuro da Web - HTML5 DOCTYPE
  • 35. 35 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">
  • 36. 36 HTML5 - Futuro da Web Futuro da Web - HTML5 <!DOCTYPE html>
  • 38. Futuro da Web - HTML5
  • 39. Novidades nos formulários Futuro da Web - HTML5 <SCRIPT LANGUAGE="JavaScript"> <!-- www.ruajava.kit.net --> <!-- Begin var now = new Date(); var month_array = new Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Out ubro","Novembro","Dezembro"); document.write("<form name=date_list><table bgcolor=silver><tr><td>"); document.write("<select name=month onchange=change_month(this.options.selectedIndex)>"); for(i=0;i<month_array.length;i++) { if (now.getMonth() != i) {document.write ("<option value="+i+">"+month_array[i]);} else {document.write ("<option value="+i+" selected>"+month_array[i]);} } document.write("</select>"); document.write("</td><td>"); document.write ("<select name=year onchange=change_year(this.options[this.options.selectedIndex])>"); for(i=1950;i<3000;i++) {
  • 40. Novidades nos formulários <input type="date" /> Futuro da Web - HTML5 <input type=“datetime" /> <input type=“datetime-local" />
  • 41. Futuro da Web - HTML5
  • 43. Futuro da Web - HTML5 Exemplos
  • 44. Futuro da Web - HTML5 Geolocalização
  • 45. Futuro da Web - HTML5 Exemplos
  • 47. 47 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language]
  • 48. Futuro da Web - HTML5 Exemplos
  • 49. 49 HTML5 - Futuro da Web Futuro da Web - HTML5 SVG
  • 50. Futuro da Web - HTML5 Exemplos
  • 51. 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
  • 52. Futuro da Web - HTML5 Exemplos
  • 53. 53 Futuro da Web - HTML5 WebGL - Exemplos
  • 55. 55 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] HTML4 + CSS
  • 56. 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS
  • 57. E o que ficou de fora do HTML5? Futuro da Web - HTML5
  • 58. 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
  • 59. 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
  • 60. Futuro da Web - HTML5 Exemplos
  • 61. 61 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/
  • 62. 62 HTML5 - Futuro da Web Futuro da Web - HTML5 http://www.w3.org/2011/Talks/0504-html5-plh/video-player.xhtml http://scriptdraw.com/editor-split.html http://html5demos.com/geo http://demo.tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/ http://158.109.70.57/svg/final/svg_subtitles.html http://dmv.nodejitsu.com/ http://shinydemos.com/3d-color-histogram/ http://airtightinteractive.com/demos/js/webcammesh/ http://danielfilho.info/presentations/gum/motion/ http://neave.com/webcam/html5/ http://balldroppings.com/js/ http://apirogov.github.com/JSnake http://chrome.angrybirds.com/ http://hexgl.bkcore.com/ http://media.tojicode.com/q3bsp/ https://developer.mozilla.org/media/uploads/demos/T/h/ThiagoMunhoz/60b0b35dbca3a2fde05ea395a 718663b/pure-css3-south-park_1345222043_demo_package/index.html https://developer.mozilla.org/media/uploads/demos/L/F/LFeh/676da0435f2fd4a2300902c3b810504e/p ure-css3-eric-cartm_1346873179_demo_package/index.html https://developer.mozilla.org/media/uploads/demos/b/e/bernarddeluna/98993ebf9a834ed591bc860f9 b08df5b/pure-css3-homer_1342534433_demo_package/index.html
  • 63. Obrigado! Reinaldo Ferraz W3C Escritório Brasil www.w3c.br Twitter: @w3cbrasil reinaldo@nic.br Twitter: @reinaldoferraz