HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a...
Transcript of HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a...
![Page 1: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/1.jpg)
HTML5 e Mobile Web Reinaldo Ferraz – W3C Brasil
![Page 2: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/2.jpg)
![Page 3: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/3.jpg)
Um pouco do W3C
![Page 4: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/4.jpg)
O W3C no Brasil
![Page 5: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/5.jpg)
5
HTML5 - Futuro da Web
Web e W3C
Tim Berners-Lee criou / propôs
• a Web em 1989 (há 23 anos)
– (URI + HTTP + HTML)
![Page 6: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/6.jpg)
Web em 1989
Passado
http://www.w3.org/History/1989/proposal.html
![Page 7: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/7.jpg)
Web em 1989
Passado
http://www.w3.org/History/1989/proposal.html
![Page 8: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/8.jpg)
Web em 1989
Passado
http://www.w3.org/History/1989/proposal.html
![Page 9: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/9.jpg)
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Web e W3C
![Page 10: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/10.jpg)
10
HTML5 - Futuro da Web
Web e W3C
Tim Berners-Lee criou / propôs
• a Web em 1989 (há 24 anos)
– http://www.w3.org/History/1989/proposal.html
– (URI + HTTP + HTML)
• o W3C em 1994 (há 19 anos)
– 01/10/1994 no MIT, Laboratório de Ciência da Computação
![Page 11: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/11.jpg)
http://web.archive.org/web/19961227091242/http://www19.w3.org/
Web e W3C
![Page 12: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/12.jpg)
http://www.w3.org/
Web e W3C
![Page 13: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/13.jpg)
13
HTML5 - Futuro da Web
Futuro da Web – HTML 5
HTML 5 [HyperText Markup Language]
![Page 14: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/14.jpg)
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
![Page 15: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/15.jpg)
http://www.w3.org/Talks/WWW94Tim//
Web e W3C
![Page 16: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/16.jpg)
http://www2012.org/
Web e W3C
![Page 17: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/17.jpg)
![Page 18: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/18.jpg)
![Page 19: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/19.jpg)
![Page 20: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/20.jpg)
Porque padrões abertos?
![Page 21: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/21.jpg)
![Page 22: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/22.jpg)
![Page 23: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/23.jpg)
![Page 24: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/24.jpg)
![Page 25: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/25.jpg)
![Page 26: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/26.jpg)
26
HTML5 - Futuro da Web
Web
Browsers
Motores
de busca
A B C D
HTML HTML HTML HTML
hyper
links
hyper
links
hyper
links
HTTP
![Page 27: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/27.jpg)
27
HTML5 - 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
![Page 28: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/28.jpg)
![Page 29: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/29.jpg)
29
HTML5 - Futuro da Web
WEB 2001
![Page 30: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/30.jpg)
30
HTML5 - Futuro da Web
WEB 2011
![Page 31: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/31.jpg)
31
HTML5 - Futuro da Web
![Page 32: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/32.jpg)
HTML4 – XHTML – HTML5
HTML5 - Futuro da Web
![Page 33: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/33.jpg)
33
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]
![Page 34: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/34.jpg)
http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
Futuro da Web - HTML5
![Page 35: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/35.jpg)
http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
Futuro da Web - HTML5
![Page 36: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/36.jpg)
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html
Futuro da Web - HTML5
![Page 37: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/37.jpg)
Futuro da Web - HTML5
3 grandes atores da web
![Page 38: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/38.jpg)
38
HTML5 - Futuro da Web
Futuro da Web - HTML5
![Page 39: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/39.jpg)
![Page 40: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/40.jpg)
40
HTML5 - Futuro da Web
Futuro da Web - HTML5
Html5test.com
![Page 41: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/41.jpg)
41
HTML5 - Futuro da Web
Futuro da Web - HTML5
Exemplos
![Page 42: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/42.jpg)
Futuro
![Page 43: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/43.jpg)
43
HTML5 - Futuro da Web
Futuro da Web - HTML5
![Page 44: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/44.jpg)
![Page 45: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/45.jpg)
Mobile Web
![Page 46: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/46.jpg)
Mobile Web
![Page 47: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/47.jpg)
![Page 49: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/49.jpg)
Concepção de flexibilidade
![Page 50: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/50.jpg)
Relembre os princípios da Web
![Page 51: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/51.jpg)
Poupe a rede
![Page 52: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/52.jpg)
Explore características específicas de dispositivos móveis
![Page 53: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/53.jpg)
Otimize o tempo de resposta
![Page 54: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/54.jpg)
Deixe os usuários livres
![Page 55: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/55.jpg)
55
Um pouco de código
![Page 56: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/56.jpg)
56
DOCTYPE
![Page 57: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/57.jpg)
57
HTML5 - Futuro
da Web
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">
![Page 58: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/58.jpg)
58
HTML5 - Futuro
da Web
<!DOCTYPE html>
![Page 59: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/59.jpg)
![Page 60: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/60.jpg)
![Page 61: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/61.jpg)
Formulários
![Page 62: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/62.jpg)
![Page 63: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/63.jpg)
<SCRIPT LANGUAGE="JavaScript"> var now = new Date(); var month_array = new Array("Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","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++) { if (now.getYear() != i) {document.write("<option value="+i+">"+i);} else {document.write("<option value="+i+" selected>"+i);} } document.write("</select></td></tr><tr><td colspan=2><center>"); document.write("<table bgcolor=white border=0 cellspacing = 0 cellpading = 0 width=100%><tr bgcolor=gray align=center>"); document.write("<td><font color=silver>S</font></td><td><font color=silver>T</td><td><font color=silver>Q</td><td><font color=silver>Q</td><td><font color=silver>S</td><td ><font color=silver>S</td><td ><font color=silver>D</td>"); document.write("</tr><tr>"); for(j=0;j<6;j++) { for(i=0;i<7;i++) { document.write("<td align=center id=d"+i+"r"+j+"></td>") } document.write("</tr>"); } document.write("</table>"); document.write("</center></from></td></tr></table>"); var show_date = new Date(); function set_cal(show_date) { begin_day = new Date (show_date.getYear(),show_date.getMonth(),1); begin_day_date = begin_day.getDay(); end_day = new Date (show_date.getYear(),show_date.getMonth()+1,1); count_day = (end_day - begin_day)/1000/60/60/24; input_table(begin_day_date,count_day); } set_cal(show_date); function input_table(begin,count) { init(); j=0; if (begin!=0){i=begin-1;}else{i=6} for (c=1;c<count+1;c++) { colum_name = eval("d"+i+"r"+j); if ((now.getDate() == c)&&(show_date.getMonth() == now.getMonth())&&(show_date.getYear() == now.getYear())) {colum_name.style.backgroundColor = "blue";colum_name.style.color = "white";}; colum_name.innerText = c; i++; if (i==7){i=0;j++;} } } function init() { for(j=0;j<6;j++) { for(i=0;i<7;i++) { colum_name = eval("d"+i+"r"+j); colum_name.innerText = "-"; colum_name.style.backgroundColor =""; colum_name.style.color =""; } } } function change_month(sel_month) { show_date = new Date(show_date.getYear(),sel_month,1); set_cal(show_date); } function change_year(sel_year) { sel_year = sel_year.value; show_date = new Date(sel_year,show_date.getMonth(),1); set_cal(show_date); } // End --> </script> <!-- Script Size: 3.64 KB -->
![Page 64: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/64.jpg)
<input type="date">
![Page 65: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/65.jpg)
<input type=datetime>,
<input type=month>,
<input type=week>,
<input type=time>,
<input type=datetime-local>
Correm o risco de ficar fora da
especificação final.
![Page 66: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/66.jpg)
<input type=“email”>
<input type=“url”>
<input type=“tel”>
![Page 67: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/67.jpg)
![Page 68: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/68.jpg)
Exemplo
http://robertnyman.com/html5/forms/input-types.html
![Page 69: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/69.jpg)
Exemplo
http://robertnyman.com/html5/forms/attributes.html
![Page 70: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/70.jpg)
![Page 71: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/71.jpg)
<video controls=“controls” autoplay=“autoplay” >
<source src=“video.OGV” type=“video/ogg”>
<source src=“video.webm" type="video/webm">
<source src=“video.MP4” type=“video/mp4”>
</video>
![Page 73: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/73.jpg)
Exemplo
http://www.w3.org/2009/02/ThisIsCoffee.html
![Page 76: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/76.jpg)
![Page 78: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/78.jpg)
![Page 79: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/79.jpg)
![Page 80: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/80.jpg)
![Page 81: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/81.jpg)
@media all and (min-width:500px) { … } @media (min-width:500px) { … }
![Page 83: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/83.jpg)
![Page 86: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/86.jpg)
![Page 87: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/87.jpg)
E o que ficou de fora do HTML5?
![Page 88: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/88.jpg)
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
![Page 89: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/89.jpg)
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
![Page 90: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/90.jpg)
![Page 91: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/91.jpg)
Prefixos
-webkit-
-moz-
![Page 92: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/92.jpg)
Background
#example1 { width: 500px; height: 250px; background-image: url(sheep.png), url(betweengrassandsky.png); background-position: center bottom, left top; background-repeat: no-repeat; }
![Page 93: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/93.jpg)
Exemplo
http://www.css3.info/preview/multiple-backgrounds/
![Page 94: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/94.jpg)
![Page 95: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/95.jpg)
Gradiente
![Page 96: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/96.jpg)
Bordas arredondadas
![Page 97: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/97.jpg)
Exemplo
http://border-radius.com/
![Page 98: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/98.jpg)
Box Shadow
![Page 99: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/99.jpg)
Exemplo
http://css3gen.com/box-shadow/
![Page 100: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/100.jpg)
![Page 101: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/101.jpg)
CSS Sprites
![Page 102: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/102.jpg)
![Page 103: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/103.jpg)
10 Dicas rápidas para
desenvolvimento web mobile
Um resumo baseado em
http://mobilewebbestpractices.com
![Page 104: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/104.jpg)
Saiba quando usar um framework
![Page 105: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/105.jpg)
Não reduza o tamanho do seu site do desktop
![Page 106: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/106.jpg)
Utilize a estratégia de Mobile First
![Page 107: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/107.jpg)
Estruturação do conteúdo é importante
![Page 108: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/108.jpg)
Desenvolva para múltiplas formas de entrada e
navegação
![Page 109: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/109.jpg)
Mantenha os formulários simples
![Page 110: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/110.jpg)
Proporcione link para o site completo
![Page 111: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/111.jpg)
Use Feature-detection
![Page 114: HTML5 e Mobile Web€¦ · 5 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)](https://reader030.fdocumentos.tips/reader030/viewer/2022040607/5ebf27d21580db6613134398/html5/thumbnails/114.jpg)
Obrigado!
Reinaldo Ferraz W3C Escritório Brasil
www.w3c.br Twitter: @w3cbrasil
Twitter: @reinaldoferraz