0
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...
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...
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
h...
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
...
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...
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
- Co...
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://ww...
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...
Novidades nos formulários
<input type="date" />
Futuro da Web - HTML5
<input type=“datetime" />
<input type=“datetime-loca...
Futuro da Web - HTML5
Speech
http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html
Futuro da Web - HTML5
<inp...
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 HTM...
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, ...
abbr, align, allowtransparency, archive,
background, bgcolor, border, cellspacing,
classid, clear, code, codetype, color, ...
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.wh...
62
HTML5 - Futuro da Web
Futuro da Web - HTML5
http://www.w3.org/2011/Talks/0504-html5-plh/video-player.xhtml
http://scrip...
Obrigado!
Reinaldo Ferraz
W3C Escritório Brasil
www.w3c.br
Twitter: @w3cbrasil
reinaldo@nic.br
Twitter: @reinaldoferraz
HTML5 e o futuro da Web - Senac Consolação 2012
HTML5 e o futuro da Web - Senac Consolação 2012
Upcoming SlideShare
Loading in...5
×

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

1,712

Published on

Palestra sobre HTML5 e o futuro da Web durante o Roadshow do Senac em 2012

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,712
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. HTML5 O Futuro da Web Multimídia sem limites – Senac Consolação 11 de setembro de 2012 Reinaldo Ferraz – W3C.br
  2. 2. Um pouco do W3C
  3. 3. O W3C no Brasil
  4. 4. conferenciaweb.w3c.br
  5. 5. http://premio.w3c.br/
  6. 6. 8 HTML5 - Futuro da Web Web e W3C Tim Berners-Lee criou / propôs • a Web em 1989 (há 23 anos) – (URI + HTTP + HTML)
  7. 7. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html Web e W3C
  8. 8. 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
  9. 9. http://web.archive.org/web/19961227091242/http://www19.w3.org/ Web e W3C
  10. 10. http://www.w3.org/ Web e W3C
  11. 11. 13 HTML5 - Futuro da Web Futuro da Web – HTML 5 HTML 5 [HyperText Markup Language]
  12. 12. 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
  13. 13. http://www.w3.org/Talks/WWW94Tim// Web e W3C
  14. 14. http://www2012.org/ Web e W3C
  15. 15. 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
  16. 16. 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
  17. 17. 19 HTML5 - Futuro da Web Futuro da Web WEB 2001
  18. 18. 20 HTML5 - Futuro da Web Futuro da Web WEB 2011
  19. 19. 21 HTML5 - Futuro da Web Futuro da Web - HTML5
  20. 20. •Acessibilidade na web HTML4 – XHTML – HTML5 HTML5 - Futuro da Web
  21. 21. 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]
  22. 22. http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html Futuro da Web - HTML5
  23. 23. http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html Futuro da Web - HTML5
  24. 24. http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html Futuro da Web - HTML5
  25. 25. Futuro da Web - HTML5 3 grandes atores da web
  26. 26. 28 HTML5 - Futuro da Web Futuro da Web - HTML5
  27. 27. 29 HTML5 - Futuro da Web Futuro da Web - HTML5 Html5test.com
  28. 28. 30 HTML5 - Futuro da Web Futuro da Web - HTML5 Exemplos
  29. 29. 31 HTML5 - Futuro da Web Futuro da Web - HTML5
  30. 30. 32 HTML5 - Futuro da Web Futuro da Web - HTML5 - Web - Interoperabilidade - Geolocalização - Áudio e Vídeo além da TV - Comandos de voz - ...
  31. 31. 33 HTML5 - Futuro da Web Futuro da Web - HTML5 Facilidade para o desenvolvedor
  32. 32. 34 HTML5 - Futuro da Web Futuro da Web - HTML5 DOCTYPE
  33. 33. 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">
  34. 34. 36 HTML5 - Futuro da Web Futuro da Web - HTML5 <!DOCTYPE html>
  35. 35. Formulários
  36. 36. Futuro da Web - HTML5
  37. 37. 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++) {
  38. 38. Novidades nos formulários <input type="date" /> Futuro da Web - HTML5 <input type=“datetime" /> <input type=“datetime-local" />
  39. 39. Futuro da Web - HTML5
  40. 40. 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 />
  41. 41. Futuro da Web - HTML5 Exemplos
  42. 42. Futuro da Web - HTML5 Geolocalização
  43. 43. Futuro da Web - HTML5 Exemplos
  44. 44. Vídeo em HTML5 Video http://www.w3.org/2009/02/ThisIsCoffee.html
  45. 45. 47 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language]
  46. 46. Futuro da Web - HTML5 Exemplos
  47. 47. 49 HTML5 - Futuro da Web Futuro da Web - HTML5 SVG
  48. 48. Futuro da Web - HTML5 Exemplos
  49. 49. 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
  50. 50. Futuro da Web - HTML5 Exemplos
  51. 51. 53 Futuro da Web - HTML5 WebGL - Exemplos
  52. 52. Semântica Os novos elementos Futuro da Web - HTML5
  53. 53. 55 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] HTML4 + CSS
  54. 54. 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS
  55. 55. E o que ficou de fora do HTML5? Futuro da Web - HTML5
  56. 56. 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. 57. 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
  58. 58. Futuro da Web - HTML5 Exemplos
  59. 59. 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/
  60. 60. 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
  61. 61. Obrigado! Reinaldo Ferraz W3C Escritório Brasil www.w3c.br Twitter: @w3cbrasil reinaldo@nic.br Twitter: @reinaldoferraz
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×