• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 Sestinfo 2012
 

Html5 Sestinfo 2012

on

  • 4,073 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.

Statistics

Views

Total Views
4,073
Views on SlideShare
1,714
Embed Views
2,359

Actions

Likes
1
Downloads
34
Comments
0

1 Embed 2,359

http://mj89sp3sau2k7lj1eg3k40hkeppguj6j-a-sites-opensocial.googleusercontent.com 2359

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    Html5 Sestinfo 2012 Html5 Sestinfo 2012 Presentation Transcript

    • SESTINFO 2012Universidade Metodista de São Paulo novidades, adoção e mobile. Rafael Guimarães Sakurai @rafaelsakurai Rodrigo Cascarrolho @rodrigocasca 1
    • AgendaWebEvolução do HTMLAdoção do HTML5HTML5APIs do HTML5HTML5 no mobileReferências 2
    • Web1992
    •   -
    •   Web
    •   1.0Web
    •   Sintática
    •   -
    •   documentos 2006 
    •   Interpretações,
    •    2003
    •   -
    •   Web
    •   Social inferências
    •   e
    •   relações Mashup 3
    • 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
    • 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
    • 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
    • Adoção do HTML5http://html5test.com 7
    • Adoção do HTML5 no mobile http://mobilehtml5.org/ 8
    • 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> 9
    • HTML5 NovasAPIsSemântica Armazenamento Arquivo ConectividadeMultimídia 3D/Gráficos Desempenho Apresentação 10
    • 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. 11
    • HTML5 - Semântica HTML4 HTML5novas tagsfacilita uso de JavaScriptSEO - Search Engine Optimization 12
    • 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
    • HTML5 - Armazenamento • Web Storage. • Cache da aplicação. • Indexed Database API. • Eventos online e offline. 14
    • HTML5 - Armazenamento Chave Valor guardar localStorage.setItem(“nome”, “Rafael Sakurai”); localStorage.getItem(“nome”); pegar localStorage.removeItem(“nome”); apagar localStorage.clear(); Web
    •   Storage limpar 15
    • 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
    • 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(); 17
    • 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
    • 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); 19
    • 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();} 20
    • 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
    • HTML5 - 3D/Gráficos 22
    • HTML5 - 3D/Gráficos 23
    • 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
    • HTML5 - Desempenho http://peacekeeper.futuremark.comhttp://ie.microsoft.com/testdrive/Views/SiteMap 25
    • HTML5 - Desempenho 26
    • HTML5 - Apresentação 27
    • HTML5 - Mobile 28
    • HTML5 - Mobile• Microfone• Camera• Orientação (Landscape ou Portrait)• Tela multi toque• Gestos• GPS• Navegadores 29
    • HTML5 - Mobile<meta name="viewport" content="width=device-width, initial-scale=2.0"> 30
    • 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
    • Playgroundhttp://playground.html5rocks.com/ 32
    • Tutoriais http://www.html5rocks.com/pt/http://html5doctor.com/ http://www.html-5-tutorial.com/ 33
    • Templates http://www.initializr.com/ http://br.html5boilerplate.com/http://html5boilerplate.com/mobile 34
    • 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
    • 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
    • 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
    • Obrigado!@rafaelsakurai @rodrigocasca 38