Your SlideShare is downloading. ×
0
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
Html5 Sestinfo 2012
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,670

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,670
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

×