Post on 16-Jul-2015
Passado, presente e futuro da Web
Centro Universitário Unimonte Santos – 22 de abril de 2015
Reinaldo Ferraz – W3C.br
Passado
História da Web
Passado Fonte: Tecmundo http://www.tecmundo.com.br/infografico/9847-a-historia-da-internet-pre-decada-de-60-ate-anos-80-infografico-.htm
1989
Web em 1989
Passado
Passado
http://www.w3.org/History/1989/proposal.html
http://www.w3.org/History/1989/proposal.html
http://www.w3.org/History/1989/proposal.html
Web em 1989
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
http://web.archive.org/web/19961227091242/http://www19.w3.org/
Web em 2001
Web em 2001
Web Browsers
Motores de busca
A B C D
HTML HTML HTML HTML
hyper links
hyper links
hyper links
A Web começou a criar produtos
Vídeo Introdução em Flash do website Eye4u – 2001
https://www.youtube.com/watch?v=3aT4wt0fmGU
Presente
32 HTML5 - 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]
DOCTYPE
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">
<!DOCTYPE html>
<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","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 -->
<input type="date">
<input type="date“ required>
<input type=“email”> <input type=“url”> <input type=“tel”>
number email url
<input type=“text” placeholder=“texto”> <input type=“url” required> <input type=“range”>
<input type=“color”>
@media all and (min-width:500px) { … } @media (min-width:500px) { … }
CSS Sprites
Background
#example1 { width: 500px; height: 250px; background-image: url(sheep.png), url(betweengrassandsky.png); background-position: center bottom, left top; background-repeat: no-repeat; }
Gradiente
Bordas arredondadas
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/
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/
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/
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/
Geolocalização
Video
http://www.w3.org/2009/02/ThisIsCoffee.html
65
SVG
Canvas
WebGL
Vídeo
HexGL, the HTML5 futuristic racing game
https://www.youtube.com/watch?v=se-oorr2zM8
68 HTML5 - Futuro da Web
Web em 2001
Web em 2011
Web em 2001
Web Browsers
Motores de busca
A B C D
HTML HTML HTML HTML
hyper links
hyper links
hyper links
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
Futuro
http://www.wired.com/magazine/2010/08/ff_webrip/all/1
Long Live the Web – Scientific American http://www.scientificamerican.com/article.cfm?id=long-live-the-web
A Internet das Coisas tem um enorme potencial.
http://share.cisco.com/internet-of-things.html
E estão cada vez mais presentes na nossa vida
Muito além dos sensores
Vídeo Milestone Village
http://www.youtube.com/watch?v=DiWNm7D34rY
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
Vídeo The social Web of things
https://www.youtube.com/watch?v=i5AuzQXBsG4
Padronização é a chave da Internet das Coisas
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
Data Formats Interface
Definitions
Security Privacy
...
http://www.w3.org/community/wot/
http://www.w3.org/WoT/
http://www.w3.org/standards/semanticweb/data
http://www.w3.org/Privacy/
http://www.w3.org/Security/
http://www.w3.org/auto/wg/
http://www.w3.org/community/web-bluetooth/
Alguns exemplos
http://www.harvestgeek.com/
http://www.streetline.com/parking-analytics/
http://www.onfarm.com/
Eternas preocupações
Privacidade
Segurança
As máquinas vão dominar o mundo
Ajude a construir a Web do futuro, participando da sua construção
dentro do W3C
Tks reinaldo@nic.br @reinaldoferraz
w3cbrasil@nic.br @w3cbrasil Facebook.com/W3CBrasil