Your SlideShare is downloading. ×
Html5 Sestinfo 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 Sestinfo 2012

4,600

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,600
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
42
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 TITLETÍTULO DA PÁGINA/TITLE META NAME=KEYWORDS CONTENT=HTML, CSS, XML / /HEAD BODY H1PRIMEIRO NÍVEL DÉ TÍTULO./H1 PAPENAS 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.  htmlhtml 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.  titleHtml5/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.  titleHtml5/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=CEPCEP:             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ídiaaudio
  • 121.  id=id_audio
  • 122.  src=arquivo.mp3
  • 123.  controls/audio MP3, Wav, Ogg MP4, WebM, Oggvideo
  • 124.  id=video
  • 125.  autoplay=true
  • 126.  controls
  • 127.   source
  • 128.  src=BigBuckBunny_640x360.mp4
  • 129.  type=video/mp4//videovideo
  • 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 - Mobilemeta 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

×