• Like
Html5 Sestinfo 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Html5 Sestinfo 2012

  • 4,304 views
Published

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,304
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
39
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. SESTINFO 2012Universidade Metodista de São Paulo novidades, adoção e mobile. Rafael Guimarães Sakurai @rafaelsakurai Rodrigo Cascarrolho @rodrigocasca 1
  • 2. AgendaWebEvolução do HTMLAdoção do HTML5HTML5APIs do HTML5HTML5 no mobileReferências 2
  • 3. Web1992
  • 4.   -
  • 5.   Web
  • 6.   1.0Web
  • 7.   Sintática
  • 8.   -
  • 9.   documentos 2006 
  • 10.   Interpretações,
  • 11.    2003
  • 12.   -
  • 13.   Web
  • 14.   Social inferências
  • 15.   e
  • 16.   relações Mashup 3
  • 17. 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> 4
  • 18. 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 5
  • 19. 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/ 6
  • 20. Adoção do HTML5http://html5test.com 7
  • 21. Adoção do HTML5 no mobile http://mobilehtml5.org/ 8
  • 22. HTML5 Marcação Apresentação Comportamento HTML + CSS3 + JavaScript<!doctype
  • 23.   html><html> <link
  • 24.   rel="stylesheet"
  • 25.   href="estilo.css">
  • 26.   
  • 27.   <head> <script
  • 28.   src="arquivo.js"></script>
  • 29.   
  • 30.   
  • 31.   
  • 32.   <meta
  • 33.   charset="utf-8"
  • 34.   />
  • 35.   
  • 36.   
  • 37.   
  • 38.   <title>Html5</title>
  • 39.   
  • 40.   </head>
  • 41.   
  • 42.   <body>
  • 43.   
  • 44.   </body></html> 9
  • 45. HTML5 NovasAPIsSemântica Armazenamento Arquivo ConectividadeMultimídia 3D/Gráficos Desempenho Apresentação 10
  • 46. HTML5 - Semântica <!doctype
  • 47.   html>• Novos elementos de mídia. <html> 
  • 48.   
  • 49.   <head>• Novos elementos estruturais. 
  • 50.   
  • 51.   
  • 52.   
  • 53.   <meta
  • 54.   charset="utf-8"
  • 55.   /> 
  • 56.   
  • 57.   
  • 58.   
  • 59.   <title>Html5</title>• Novos atributos. 
  • 60.   
  • 61.   </head>• Novos tipos de formulário. 
  • 62.   
  • 63.   <body> 
  • 64.   
  • 65.   </body>• Novos tipos de relação de links. </html>• Nova semântica para a internacionalização.• Nova sintaxe de microdados para semântica adicional. 11
  • 66. HTML5 - Semântica HTML4 HTML5novas tagsfacilita uso de JavaScriptSEO - Search Engine Optimization 12
  • 67. 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> 13
  • 68. HTML5 - Armazenamento • Web Storage. • Cache da aplicação. • Indexed Database API. • Eventos online e offline. 14
  • 69. HTML5 - Armazenamento Chave Valor guardar localStorage.setItem(“nome”, “Rafael Sakurai”); localStorage.getItem(“nome”); pegar localStorage.removeItem(“nome”); apagar localStorage.clear(); Web
  • 70.   Storage limpar 15
  • 71. 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. 16
  • 72. HTML5 - Acesso ao Arquivo Criar um arquivo var
  • 73.   fs
  • 74.   =
  • 75.   requestFileSystemSync(TEMPORARY,
  • 76.   1024*1024);temporário var
  • 77.   fileEntry
  • 78.   =
  • 79.   fs.root.getFile(log.txt,
  • 80.   {create:
  • 81.   true});var
  • 82.   file
  • 83.   =
  • 84.   event.dataTransfer.files[0];getElementById(name).textContent
  • 85.   =
  • 86.   file.fileName;getElementById(size).textContent
  • 87.   =
  • 88.   file.fileSize;getElementById(type).textContent
  • 89.   =
  • 90.   file.type;getElementById(last).textContent
  • 91.   =
  • 92.   file.lastModifiedDate.toString(); 17
  • 93. 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). 18
  • 94. HTML5 - ConectividadeWeb Socketvar
  • 95.   connection
  • 96.   =
  • 97.   new
  • 98.   WebSocket(ws://dominio/texto,
  • 99.   [soap,
  • 100.   xmpp]);connection.onmessage
  • 101.   =
  • 102.   function
  • 103.   (e)
  • 104.   { SSE
  • 105.   
  • 106.   console.log(Server:
  • 107.   
  • 108.   +
  • 109.   e.data);};connection.send(your
  • 110.   message); var
  • 111.   source
  • 112.   =
  • 113.   new
  • 114.   EventSource(/stats); source.addEventListener(connections,
  • 115.   updateConnections,false); source.addEventListener(requests,
  • 116.   updateRequests,
  • 117.   false); source.addEventListener(uptime,
  • 118.   updateUptime,
  • 119.   false); 19
  • 120. HTML5 - Multimídia<audio
  • 121.   id="id_audio"
  • 122.   src="arquivo.mp3"
  • 123.   controls></audio> MP3, Wav, Ogg MP4, WebM, Ogg<video
  • 124.   id="video"
  • 125.   autoplay="true"
  • 126.   controls>
  • 127.    <source
  • 128.   src="BigBuckBunny_640x360.mp4"
  • 129.   type="video/mp4"/></video>video
  • 130.   =
  • 131.   document.getElementById(video);if
  • 132.   (video.paused
  • 133.   ==
  • 134.   false)
  • 135.   { video.pause();}
  • 136.   else
  • 137.   { video.play();} 20
  • 138. 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(); 21
  • 139. HTML5 - 3D/Gráficos 22
  • 140. HTML5 - 3D/Gráficos 23
  • 141. 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. 24
  • 142. HTML5 - Desempenho http://peacekeeper.futuremark.comhttp://ie.microsoft.com/testdrive/Views/SiteMap 25
  • 143. HTML5 - Desempenho 26
  • 144. HTML5 - Apresentação 27
  • 145. HTML5 - Mobile 28
  • 146. HTML5 - Mobile• Microfone• Camera• Orientação (Landscape ou Portrait)• Tela multi toque• Gestos• GPS• Navegadores 29
  • 147. HTML5 - Mobile<meta name="viewport" content="width=device-width, initial-scale=2.0"> 30
  • 148. 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; }} 31
  • 149. Playgroundhttp://playground.html5rocks.com/ 32
  • 150. Tutoriais http://www.html5rocks.com/pt/http://html5doctor.com/ http://www.html-5-tutorial.com/ 33
  • 151. Templates http://www.initializr.com/ http://br.html5boilerplate.com/http://html5boilerplate.com/mobile 34
  • 152. 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/ 35
  • 153. 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 36
  • 154. 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/ 37
  • 155. Obrigado!@rafaelsakurai @rodrigocasca 38