• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5- Novidades, adoção e mobile.
 

Html5- Novidades, adoção e mobile.

on

  • 2,283 views

Palestra Html5- Novidades, adoção e mobile apresentada durante a SestInfo 2012 na Universidade Metodista de São Paulo. ...

Palestra Html5- Novidades, adoção e mobile apresentada durante a SestInfo 2012 na Universidade Metodista de São Paulo.

Esta palestra também pode ser vista em http://www.slideshare.net/rafaelsakurai

Statistics

Views

Total Views
2,283
Views on SlideShare
1,735
Embed Views
548

Actions

Likes
4
Downloads
35
Comments
0

18 Embeds 548

http://brunableal.blogspot.com.br 305
http://brunableal.blogspot.com 159
http://brunableal.blogspot.mx 20
http://brunableal.blogspot.be 12
http://brunableal.blogspot.pt 11
http://brunableal.blogspot.fr 8
http://brunableal.blogspot.nl 8
http://brunableal.blogspot.de 6
http://brunableal.blogspot.com.ar 5
http://brunableal.blogspot.com.es 4
http://www.linkedin.com 2
http://brunableal.blogspot.kr 2
http://brunableal.blogspot.ch 1
http://brunableal.blogspot.com.au 1
http://us-w1.rockmelt.com 1
http://brunableal.blogspot.dk 1
http://nodeslide.herokuapp.com 1
http://engisoftware.blogspot.com.br 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Html5- Novidades, adoção e mobile. Html5- Novidades, adoção e mobile. Presentation Transcript

  • SESTINFO 2012Universidade Metodista de São Paulo novidades, adoção e mobile. Rafael Guimarães Sakurai @rafaelsakurai Rodrigo Cascarrolho @rodrigocasca
  • AgendaWebEvolução do HTMLAdoção do HTML5HTML5APIs do HTML5HTML5 no mobileReferências
  • Web1992
  •   -
  •   Web
  •   1.0Web
  •   Sintática
  •   -
  •   documentos
  • Web1992
  •   -
  •   Web
  •   1.0Web
  •   Sintática
  •   -
  •   documentos 2006 
  •   Interpretações,
  •    2003
  •   -
  •   Web
  •   Social inferências
  •   e
  •   relações Mashup
  • O que é HTML? HTML (HYPERTEXT MARKUP LANGUAGE - LINGUAGEM DEMARCAÇÃO DE HIPERTEXTO) É UMA LINGUAGEM DE MARCAÇÃO UTILIZADA PARA PRODUZIR PÁGINAS NA WEB E SÃO INTERPRETADOS POR NAVEGADORES. (HTTP://PT.WIKIPEDIA.ORG/WIKI/HTML) <HTML> <HEAD> <TITLE>TÍTULO DA PÁGINA</TITLE> <META NAME="KEYWORDS" CONTENT="HTML, CSS, XML" /> </HEAD> <BODY> <H1>PRIMEIRO NÍVEL DÉ TÍTULO.</H1> <P>APENAS UM PARÁGRAFO.</P> </BODY> </HTML>
  • História HTML
  • História HTML 1991 HTML 1.0 1996 CSS1 + JavaScript 1995 HTML 2.0 1998 CSS2 1997 jan/HTML 3.2 - dez/HTML4 1999 HTML 4.01 2000 XHTML 1.0 2001 XHTML 1.1 2002 TablelessHTML5 - WHATWG 2004 XHTML 2.0 - W3C 2005 Ajax 2007 União WHATWG + W3C HTML5 - FINAL 2014 100% completo* 2022
  • Adoção do HTML5 BASE QUERY SELECTOR DIUS DATA WEB S ND MS BORDER RA OU OR GR IS DR XED TORAG CK SF A UR W AUD G EB BA CA AN VID S INDE AN NS TA W N TR AS D IO W O O T E DA TI VA EB RK EO S EN DR M T 3D G A SO ER OR ON SV M O C CK S NI NSF P ET A A T ED OU T FO SV GF RM TR NERA X LAY GEO ILT S GE X BO LO ER E CA TIO S FLE FAC NT- N @FO TIO NS ICONT SVG TR ANS Y ENTE DITA E D ISPLA BLE TABL ES CORS MED IA QUERI HTML5 PARSING MULTIPLE BACKGROUNDS http://html5readiness.com/
  • Adoção do HTML5 BASE QUERY SELECTOR DIUS DATA WEB S ND MS BORDER RA OU OR GR IS DR XED TORAG CK SF A UR W AUD G EB BA CA AN VID S INDE AN NS TA W N TR AS D IO W O O T E DA TI VA EB RK EO S EN DR M T 3D G A SO ER OR ON SV M O C CK S NI NSF P ET A A T ED OU T FO SV GF RM TR NERA X LAY GEO ILT S GE X BO LO ER E CA TIO S FLE FAC NT- N @FO TIO NS ICONT SVG TR ANS Y ENTE DITA E D ISPLA BLE TABL ES CORS MED IA QUERI HTML5 PARSING MULTIPLE BACKGROUNDS http://html5readiness.com/
  • Adoção do HTML5 BASE QUERY SELECTOR DIUS DATA WEB S ND MS BORDER RA OU OR GR IS DR XED TORAG CK SF A UR W AUD G EB BA CA AN VID S INDE AN NS TA W N TR AS D IO W O O T E DA TI VA EB RK EO S EN DR M T 3D G A SO ER OR ON SV M O C CK S NI NSF P ET A A T ED OU T FO SV GF RM TR NERA X LAY GEO ILT S GE X BO LO ER E CA TIO S FLE FAC NT- N @FO TIO NS ICONT SVG TR ANS Y ENTE DITA E D ISPLA BLE TABL ES CORS MED IA QUERI HTML5 PARSING MULTIPLE BACKGROUNDS http://html5readiness.com/
  • Adoção do HTML5 BASE QUERY SELECTOR DIUS DATA WEB S ND MS BORDER RA OU OR GR IS DR XED TORAG CK SF A UR W AUD G EB BA CA AN VID S INDE AN NS TA W N TR AS D IO W O O T E DA TI VA EB RK EO S EN DR M T 3D G A SO ER OR ON SV M O C CK S NI NSF P ET A A T ED OU T FO SV GF RM TR NERA X LAY GEO ILT S GE X BO LO ER E CA TIO S FLE FAC NT- N @FO TIO NS ICONT SVG TR ANS Y ENTE DITA E D ISPLA BLE TABL ES CORS MED IA QUERI HTML5 PARSING MULTIPLE BACKGROUNDS http://html5readiness.com/
  • Adoção do HTML5http://html5test.com
  • Adoção do HTML5 no mobile http://mobilehtml5.org/
  • HTML5+ +
  • HTML5 Marcação Apresentação Comportamento HTML + CSS3 + JavaScript<!doctype
  •   html><html> <link
  •   rel="stylesheet"
  •   href="estilo.css">
  •   
  •   <head> <script
  •   src="arquivo.js"></script>
  •   
  •   
  •   
  •   <meta
  •   charset="utf-8"
  •   />
  •   
  •   
  •   
  •   <title>Html5</title>
  •   
  •   </head>
  •   
  •   <body>
  •   
  •   </body></html>
  • HTML5
  • HTML5 NovasAPIsSemântica Armazenamento Arquivo ConectividadeMultimídia 3D/Gráficos Desempenho Apresentação
  • HTML5 - Semântica• Novos elementos de mídia.• Novos elementos estruturais.• Novos atributos.• Novos tipos de formulário.• Novos tipos de relação de links.• Nova semântica para a internacionalização.• Nova sintaxe de microdados para semântica adicional.
  • HTML5 - Semântica <!doctype
  •   html>• Novos elementos de mídia. <html> 
  •   
  •   <head>• Novos elementos estruturais. 
  •   
  •   
  •   
  •   <meta
  •   charset="utf-8"
  •   /> 
  •   
  •   
  •   
  •   <title>Html5</title>• Novos atributos. 
  •   
  •   </head>• Novos tipos de formulário. 
  •   
  •   <body> 
  •   
  •   </body>• Novos tipos de relação de links. </html>• Nova semântica para a internacionalização.• Nova sintaxe de microdados para semântica adicional.
  • HTML5 - Semântica
  • HTML5 - Semântica HTML4 HTML5novas tagsfacilita uso de JavaScriptSEO - Search Engine Optimization
  • HTML5 - Semântica Sem necessidade de JS para validações <form>         <label for="CEP">CEP:             <input type=”text” id="CEP" required pattern="d{5}-?d{3}" />         </label>         <input type="email" required placeholder=”seunome@dominio.com" /> t n pu osi tip     <input type="number" name="quantity" min="1" max="5" />     vosNo <input type="color" />         <input type="submit" value="Enviar" /> </form>
  • HTML5 - Semântica Sem necessidade de JS para validações <form>         <label for="CEP">CEP:             <input type=”text” id="CEP" required pattern="d{5}-?d{3}" />         </label>         <input type="email" required placeholder=”seunome@dominio.com" /> t n pu osi tip     <input type="number" name="quantity" min="1" max="5" />     vosNo <input type="color" />         <input type="submit" value="Enviar" /> </form>
  • HTML5 - Armazenamento • Web Storage. • Cache da aplicação. • Indexed Database API. • Eventos online e offline.
  • HTML5 - Armazenamento Chave Valor guardar localStorage.setItem(“nome”, “Rafael Sakurai”); localStorage.getItem(“nome”); pegar localStorage.removeItem(“nome”); apagar localStorage.clear(); Web
  •   Storage limpar
  • HTML5 - Acesso ao Arquivo • Ler arquivo (síncrono ou assíncrono). • Gravar arquivo temporário. • Arrastar e soltar (drag-and-drop). • Upload. • Validações (formato, tamanho, etc). • Gravação off-line.
  • HTML5 - Acesso ao Arquivo Criar um arquivo var
  •   fs
  •   =
  •   requestFileSystemSync(TEMPORARY,
  •   1024*1024);temporário var
  •   fileEntry
  •   =
  •   fs.root.getFile(log.txt,
  •   {create:
  •   true});var
  •   file
  •   =
  •   event.dataTransfer.files[0];getElementById(name).textContent
  •   =
  •   file.fileName;getElementById(size).textContent
  •   =
  •   file.fileSize;getElementById(type).textContent
  •   =
  •   file.type;getElementById(last).textContent
  •   =
  •   file.lastModifiedDate.toString();
  • HTML5 - Acesso ao Arquivo Criar um arquivo var
  •   fs
  •   =
  •   requestFileSystemSync(TEMPORARY,
  •   1024*1024);temporário var
  •   fileEntry
  •   =
  •   fs.root.getFile(log.txt,
  •   {create:
  •   true});var
  •   file
  •   =
  •   event.dataTransfer.files[0];getElementById(name).textContent
  •   =
  •   file.fileName;getElementById(size).textContent
  •   =
  •   file.fileSize;getElementById(type).textContent
  •   =
  •   file.type;getElementById(last).textContent
  •   =
  •   file.lastModifiedDate.toString();
  • HTML5 - Conectividade• Web Sockets e Server-Sent Events(SSE).• Web Sockets são bidirecionais.• SSE - push.• Aplicação: chat, jogos, monitoramento (jogos, saúde, processos de TI).
  • HTML5 - Conectividade
  • HTML5 - ConectividadeWeb Socketvar
  •   connection
  •   =
  •   new
  •   WebSocket(ws://dominio/texto,
  •   [soap,
  •   xmpp]);connection.onmessage
  •   =
  •   function
  •   (e)
  •   { SSE
  •   
  •   console.log(Server:
  •   
  •   +
  •   e.data);};connection.send(your
  •   message); var
  •   source
  •   =
  •   new
  •   EventSource(/stats); source.addEventListener(connections,
  •   updateConnections,false); source.addEventListener(requests,
  •   updateRequests,
  •   false); source.addEventListener(uptime,
  •   updateUptime,
  •   false);
  • HTML5 - Multimídia
  • HTML5 - Multimídia<audio
  •   id="id_audio"
  •   src="arquivo.mp3"
  •   controls></audio> MP3, Wav, Ogg MP4, WebM, Ogg<video
  •   id="video"
  •   autoplay="true"
  •   controls>
  •    <source
  •   src="BigBuckBunny_640x360.mp4"
  •   type="video/mp4"/></video>video
  •   =
  •   document.getElementById(video);if
  •   (video.paused
  •   ==
  •   false)
  •   { video.pause();}
  •   else
  •   { video.play();}
  • HTML5 - 3D/Gráficos var canvas = document.getElementById(cubo); var context = canvas.getContext(2d);2D Canvas context.beginPath(); context.lineWidth = 4; context.clearRect (75, 75, 70, 70); context.strokeRect(75, 75, 70, 70); context.clearRect (50, 50, 70, 70); context.strokeRect(50, 50, 70, 70); context.clearRect (75, 75, 45, 45); context.strokeRect(75, 75, 45, 45); context.moveTo(75, 75); context.lineTo(50, 50); context.moveTo(146, 75); context.lineTo(120, 50); context.moveTo(50, 120); context.lineTo(75, 145); context.moveTo(120, 120); context.lineTo(145, 145); context.stroke(); context.closePath();
  • HTML5 - 3D/Gráficos var canvas = document.getElementById(cubo); var context = canvas.getContext(2d);2D Canvas context.beginPath(); context.lineWidth = 4; context.clearRect (75, 75, 70, 70); context.strokeRect(75, 75, 70, 70); context.clearRect (50, 50, 70, 70); context.strokeRect(50, 50, 70, 70); context.clearRect (75, 75, 45, 45); context.strokeRect(75, 75, 45, 45); context.moveTo(75, 75); context.lineTo(50, 50); context.moveTo(146, 75); context.lineTo(120, 50); context.moveTo(50, 120); context.lineTo(75, 145); context.moveTo(120, 120); context.lineTo(145, 145); context.stroke(); context.closePath();
  • HTML5 - 3D/Gráficos
  • HTML5 - 3D/Gráficos
  • HTML5 - 3D/Gráficos
  • HTML5 - 3D/Gráficos
  • HTML5 - Desempenho• Aceleração do hardware.• Cache local e database indexada.• Retorna de chamadas assíncronas.• Sprites (muitas imagens em um único arquivo).• Diminuir tamanho de js, css e html.
  • HTML5 - Desempenho
  • HTML5 - Desempenho http://peacekeeper.futuremark.comhttp://ie.microsoft.com/testdrive/Views/SiteMap
  • HTML5 - Desempenho
  • HTML5 - Desempenho
  • HTML5 - Apresentação
  • HTML5 - Apresentação
  • HTML5 - Mobile
  • HTML5 - Mobile
  • HTML5 - Mobile• Microfone• Camera• Orientação (Landscape ou Portrait)• Tela multi toque• Gestos• GPS• Navegadores
  • HTML5 - Mobile<meta name="viewport" content="width=device-width, initial-scale=2.0">
  • HTML5 - Mobile<meta name="viewport" content="width=device-width, initial-scale=2.0">
  • HTML5 - Mobile@media screen and (orientation: portrait) { #orientation:after { content: "Portrait orientation"; } body { text-align: center; font-weight: bold; color: blue; }}@media screen and (orientation: landscape) { #orientation:after { content: "Landscape orientation"; } body { text-align: center; font-weight: bold; color: red; }}
  • HTML5 - Mobile@media screen and (orientation: portrait) { #orientation:after { content: "Portrait orientation"; } body { text-align: center; font-weight: bold; color: blue; }}@media screen and (orientation: landscape) { #orientation:after { content: "Landscape orientation"; } body { text-align: center; font-weight: bold; color: red; }}
  • Playgroundhttp://playground.html5rocks.com/
  • Playgroundhttp://playground.html5rocks.com/
  • Tutoriais http://www.html5rocks.com/pt/http://html5doctor.com/ http://www.html-5-tutorial.com/
  • Templates http://www.initializr.com/ http://br.html5boilerplate.com/http://html5boilerplate.com/mobile
  • Referênciashttp://html5test.com/compare/browser/ff12/chrome18/ie09.htmlhttp://en.wikipedia.org/wiki/HTML5http://www.html5rocks.comhttp://www.broken-links.com/2009/10/06/building-html5-video-controls-with-javascript/http://html5test.com/http://madebyevan.com/webgl-water/
  • Referênciashttp://chrome.angrybirds.com/http://www.benjoffe.com/code/games/torus/http://www.cuttherope.ie/http://agent8ball.com/http://bejeweled.popcap.com/html5/0.9.12.9490/html5/Bejeweled.htmlhttp://ie.microsoft.com/testdrive/Graphics/CanvasPinball/Default.htmlhttp://wolfenstein.bethsoft.com/game_EU.php
  • Referênciashttp://getfirebug.com/http://www.opera.com/dragonfly/http://www.smushit.com/ysmush.it/https://developers.google.com/web-toolkit/speedtracer/http://yslow.org/https://developers.google.com/speed/pagespeed/http://peacekeeper.futuremark.com/http://ie.microsoft.com/testdrive/Views/SiteMap/
  • Obrigado!@rafaelsakurai @rodrigocasca
  • Obrigado!@rafaelsakurai @rodrigocasca