Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015

1.109 visualizações

Publicada em

Palestra feita no Centro Universitário Unimonte em abril de 2015 sobre a história da Web, como o HTML5 e a Open Web impactam o desenvolvimento hoje e o futuro dos objetos conectados e Web das Coisas

Publicada em: Internet
1 comentário
6 gostaram
Estatísticas
Notas
  • Ótima palestra, ótimo palestrante! Slide intuitivo. Muito bom.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
Sem downloads
Visualizações
Visualizações totais
1.109
No SlideShare
0
A partir de incorporações
0
Número de incorporações
42
Ações
Compartilhamentos
0
Downloads
14
Comentários
1
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Passado, Presente e Futuro da Web - Centro Universitário Unimonte 2015

  1. 1. Passado, presente e futuro da Web Centro Universitário Unimonte Santos – 22 de abril de 2015 Reinaldo Ferraz – W3C.br
  2. 2. Passado
  3. 3. História da Web Passado Fonte: Tecmundo http://www.tecmundo.com.br/infografico/984 7-a-historia-da-internet-pre-decada-de-60- ate-anos-80-infografico-.htm
  4. 4. 1989
  5. 5. Web em 1989 Passado
  6. 6. Passado
  7. 7. http://www.w3.org/History/1989/proposal.html
  8. 8. http://www.w3.org/History/1989/proposal.html
  9. 9. http://www.w3.org/History/1989/proposal.html
  10. 10. Web em 1989 http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  11. 11. http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
  12. 12. http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
  13. 13. http://web.archive.org/web/19961227091242/http://www19.w3.org/
  14. 14. Web em 2001
  15. 15. Web em 2001 Web Browsers Motores de busca A B C D HTML HTML HTML HTML hyper links hyper links hyper links
  16. 16. A Web começou a criar produtos
  17. 17. Vídeo Introdução em Flash do website Eye4u – 2001 https://www.youtube.com/watch?v=3aT4wt0fmGU
  18. 18. Presente
  19. 19. 32HTML5 - Futuro da Web 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]
  20. 20. DOCTYPE
  21. 21. 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">
  22. 22. <!DOCTYPE html>
  23. 23. <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++) { if (now.getYear() != i) {document.write("<option value="+i+">"+i);} else {document.write("<option value="+i+" selected>"+i);}
  24. 24. <input type="date">
  25. 25. <input type="date“ required>
  26. 26. <input type=“email”> <input type=“url”> <input type=“tel”>
  27. 27. number email url
  28. 28. <input type=“text” placeholder=“texto”> <input type=“url” required> <input type=“range”>
  29. 29. <input type=“color”>
  30. 30. @media all and (min-width:500px) { … } @media (min-width:500px) { … }
  31. 31. CSS Sprites
  32. 32. Background #example1 { width: 500px; height: 250px; background-image: url(sheep.png), url(betweengrassandsky.png); background-position: center bottom, left top; background-repeat: no-repeat; }
  33. 33. Gradiente
  34. 34. Bordas arredondadas
  35. 35. Vibration API A especificação tem como objetivo definir uma API que fornece acesso ao mecanismo de vibração do dispositivo. A vibração é uma forma de feedback tátil e que pode ser controlada e manipulada conforme a necessidade. Em setembro de 2014, o status dessa documentação dentro do W3C era “W3C Candidate Recomendation”. http://www.w3.org/TR/2014/CR-vibration-20140909/
  36. 36. Ambient Light Events Define um meio para tratar os eventos que correspondem à detecção de luz por sensores. A documentação aborda o viés técnico e questões interessantes como a preocupação com segurança e considerações sobre privacidade. Também é uma “W3C Candidate Recomendation”. http://www.w3.org/TR/2013/CR-ambient-light- 20131001/
  37. 37. HTML Media Capture O documento define uma extensão do HTML que facilita o acesso do usuário ao mecanismo de captura de mídia de um dispositivo, como uma câmera ou um microfone, utilizando simples formulários. Isso pode facilitar muito aquela selfie para uma aplicação de compartilhamento de fotos, por exemplo. É importante não confundir essa API com a especificação Media Capture and Streams, que possibilita uma manipulação mais complexa e refinada do acesso à câmera e microfone do usuário. http://www.w3.org/TR/2014/CR-html-media-capture- 20140909/
  38. 38. Battery Status API A especificação de status da bateria define um meio para os desenvolvedores web determinarem programaticamente o estado da bateria do dispositivo que hospeda a aplicação. Sabendo o estado da bateria, os desenvolvedores são capazes de criar conteúdo web e aplicações que são eficientes em termos de energia, levando a uma melhor experiência do usuário. http://www.w3.org/TR/2012/CR-battery-status- 20120508/
  39. 39. Geolocalização
  40. 40. Video http://www.w3.org/2009/02/ThisIsCoffee.html
  41. 41. 65 SVG
  42. 42. Canvas
  43. 43. WebGL Vídeo HexGL, the HTML5 futuristic racing game https://www.youtube.com/watch?v=se-oorr2zM8
  44. 44. 68HTML5 - Futuro da Web
  45. 45. Web em 2001
  46. 46. Web em 2011
  47. 47. Web em 2001 Web Browsers Motores de busca A B C D HTML HTML HTML HTML hyper links hyper links hyper links
  48. 48. Web em 2011 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
  49. 49. Futuro
  50. 50. http://www.wired.com/magazine/2010/08/ff_webrip/all/1
  51. 51. Long Live the Web – Scientific American http://www.scientificamerican.com/article.cfm?id=long-live-the-web
  52. 52. A Internet das Coisas tem um enorme potencial.
  53. 53. http://share.cisco.com/internet-of-things.html
  54. 54. E estão cada vez mais presentes na nossa vida
  55. 55. Muito além dos sensores
  56. 56. Vídeo Milestone Village http://www.youtube.com/watch?v=DiWNm7D34rY
  57. 57. A Web das Coisas é essencialmente sobre o papel das tecnologias da Web para facilitar o desenvolvimento de aplicações e serviços para as coisas e sua representação virtual http://www.w3.org/community/wot/wiki/Main_Page
  58. 58. Vídeo The social Web of things https://www.youtube.com/watch?v=i5AuzQXBsG4
  59. 59. Padronização é a chave da Internet das Coisas
  60. 60. Garantir que os padrões W3C sejam implementados “royalty free”, incentivando a inovação e a disponibilidade da comunidade de desenvolvedores Web. http://www.w3.org/community/wot/wiki/Main_Page
  61. 61. Data Formats Interface Definitions Security Privacy ...
  62. 62. http://www.w3.org/community/wot/
  63. 63. http://www.w3.org/WoT/
  64. 64. http://www.w3.org/standards/semanticweb/data
  65. 65. http://www.w3.org/Privacy/
  66. 66. http://www.w3.org/Security/
  67. 67. http://www.w3.org/auto/wg/
  68. 68. http://www.w3.org/community/web-bluetooth/
  69. 69. Alguns exemplos
  70. 70. http://www.harvestgeek.com/
  71. 71. http://www.streetline.com/parking-analytics/
  72. 72. http://www.onfarm.com/
  73. 73. Eternas preocupações
  74. 74. Privacidade
  75. 75. Segurança
  76. 76. As máquinas vão dominar o mundo
  77. 77. Ajude a construir a Web do futuro, participando da sua construção dentro do W3C
  78. 78. Tks reinaldo@nic.br @reinaldoferraz w3cbrasil@nic.br @w3cbrasil Facebook.com/W3CBrasil

×