Your SlideShare is downloading. ×
HTML 5 - Palestra do Road Show TI 2012 - Fábio Flatschart
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

HTML 5 - Palestra do Road Show TI 2012 - Fábio Flatschart

988
views

Published on

Palestra realizada em diversas unidades do Senac São Paulo entre os meses de março e maio no evento Road Show TI 2012 Experience. …

Palestra realizada em diversas unidades do Senac São Paulo entre os meses de março e maio no evento Road Show TI 2012 Experience.

Palestrante:
Fábio Flatschart
http://www.flatschart.com

Para mais informações, acesse http://www.sp.senac.br/roadshowti

Published in: Education

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

No Downloads
Views
Total Views
988
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
61
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. HTML 5Senac Consolação | Abril de 2012
  • 2. flatschart.com
  • 3. HTML5A nova fronteira no projeto de aplicações WEB flatschart.com
  • 4. Fábio FlatschartGerente de Marketing e Inovação da Soyuz SistemasNo mercado WEB desde 1997, é consultor dedesenvolvimento e implantação de soluções e ferramentasda Adobe Systems Brasil.Autor e escritor técnico da Editora Brasport e daEditora SENAC/SPNo SENAC /SP atuou no atendimento corporativo eintermediação de parcerias com grandes empresas comoAdobe, Apple, Editora ABRIL, Microsoft, UOL e W3C.Certificado em HTML5 pelo W3C escritório Brasil.FGV MBA MarketingUSJT Criação Visual e MultimídiaUSP Escola de Comunicação e Artes flatschart.com
  • 5. Conexões@fabioflatslideshare.net/fabioflatdelicio.us/fabioflatlinkedin.com/in/fabioflat flatschart.com
  • 6. O HTML5 não é uma ruptura, é a continuidade e evolução do modeloconcebido por Tim Berners-Lee nos anos 1990INTRO flatschart.com
  • 7. WEBArquitetura cliente < > servidorModelo de localização universalURL - Uniform Resource LocatorProtocolo de comunicaçãoHTTP - Hypertext Transfer ProtocolLinguagem de marcaçãoHTML - HyperText Markup LanguageDocumento estruturado na forma de hipertextoBrowser (navegador) como recurso de visualização do documento pelo cliente flatschart.com
  • 8. Client SideA organização do desenvolvimento de projetos web em camadas independentesconfere flexibilidade e modularidade ao fluxo de trabalho para web integrandoequipes multidisciplinares de planejamento, produção, arquitetura da informação,design e programação. Marcação HTML Apresentação CSS Comportamento JavaScript flatschart.com
  • 9. HTML1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless2005 AJAX2009 HTML 5 flatschart.com
  • 10. HTML5O HTML 5 é especificação do W3C, ainda não concluída, que deve ser candidata a umarecomendação em 2012.Pelas características modulares do seu desenvolvimento, as empresas, fabricantes dosnavegadores, desenvolvedores, designers e usuários não necessitam aguardar aespecificação final da linguagem para colocá-la em uso.Esta nova especificação introduz novos elementos (tags) orientados para auxiliar nodesenvolvimento web baseado em padrões compatíveis com todos dispositivos, namarcação semântica do código, na manipulação de elementos do CSS e do JavaScriptatravés da definição de APIs da arquitetura Web.World Wide Web Consortium - Escritório Brasilhttp://www.w3c.br flatschart.com
  • 11. APIsO HTML 5 aceita um conjunto de APIs que fortalece, integra e valoriza a camada dedesenvolvimento do lado do usuário (client side) através de aplicações que permitemgeolocalização, controle de áudio e vídeo, arrastar componentes (drag & drop),desenhar bitmaps (canvas), criar aplicações offline e outras. Marcação HTML Apresentação Comportamento APIs CSS JavaScript flatschart.com
  • 12. APIsO HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido porTim Berners-Lee nos anos 1990 HTML5 HTML CSS APIs + JS flatschart.com
  • 13. CompatibilidadeRenderização dos browsers Motor Browsers Gecko Firefox, SeaMonkey, Camino, K-Meleon Presto Opera, Opera Mobile, Nintendo Wii, Nintendo DS e DSi Trident Internet Explorer WebKit Chrome, Safari (incluindo iPhones e iPads), Adobe AIR, Android, Palm webOS, SymbianA cada nova versão mais recursos são suportados e a concorrência entre osfabricantes é grande de maneira que quando um fabricante implementa umafuncionalidade é quase sempre seguido de perto pelos demais. flatschart.com
  • 14. Compatibilidadehttp://html5test.comTesta e avalia a compatibilidade do seu browser com os elementos específicos doHTML5http://html5readiness.comMostra como o suporte ao HTML5 evoluiu de 2008 até hojehttp://caniuse.comExibe tabelas de compatibilidade para recursos de HTML5, CSS3, SVG e outrastecnologias web flatschart.com
  • 15. Compatibilidade<head><!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head>O script acima é de Remy Sharp e está hospedado no Google Project Hosting .Você pode usá-lo livremente em seus projetos. flatschart.com
  • 16. front end developer flatschart.com
  • 17. front end developer flatschart.com
  • 18. A simplicidade é o último grau de sofisticaçãoNOVIDADES flatschart.com
  • 19. DoctypeHTML 4.01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">HTML5<!DOCTYPE html> flatschart.com
  • 20. CharsetHTML 4.01<meta http-equiv="Content-Type" content="text/html;charset=utf-8">XHTML 1.0<?xml version="1.0" encoding="UTF-8"?><meta http-equiv="Content-Type" content="text/html;charset=utf-8" />HTML5<meta charset="utf-8"> flatschart.com
  • 21. Estrutura básica<!DOCTYPE html><html lang="pt-br"><head><meta charset="utf-8"><title>Estrutura básica</title></head><body></body></html> flatschart.com
  • 22. Saber o significado das palavras é essencial para o entendimento!SEMÂNTICA flatschart.com
  • 23. Elementos estruturaisUmas das maiores novidades do HTML5 é a possibilidade de atribuir às diversasseções estuturais do documento um elemento próprio, nativo da linguagem. HTML4 / XHTML HTML5 <body> <body> <div id="topo"></div> <header></header> <div id="navegacao"></div> <nav></nav> <div id="principal"></div> <article></article> <div id="lateral"></div> <aside></aside> <div id="rodape"></div> <footer></footer> </body> </body> flatschart.com
  • 24. Formulários <input type="email"> <input type="url"><input type="number"><input type="search"> <input type="range"> <input type="date"> <input type="week"> http://bit.ly/nrGXhw flatschart.com
  • 25. O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.MULTIMÍDIA flatschart.com
  • 26. CanvasO elemento canvas,novidade do HTML 5, permite que a informação para aconstrução de imagens baseadas em pixels seja inserida diretamente no código dodocumento.O elemento canvas apenas delimita em que local da tela isto acontece. O processode desenho é controlado por uma API específica para este elemento que interage comJavaScript.<canvas id="figura" width="300" height="300"></canvas><button onClick="desenhar()">Desenhar</button><script>function desenhar(){ var desenho = document.getElementById(figura); var context = desenho.getContext(2d); context.fillStyle = #00FFFF‘; context.fillRect(50,50,200, 200); }</script> http://bit.ly/nK6JCx flatschart.com
  • 27. SVG<svg ><rect width="90" height="60" x="10" y="100"fill="#00FFCC" stroke="#FF0000" stroke-width="3" ></svg>No HTML5 o formato SVG (Scalable Vectorial Graphics) pode ser embutidodiretamente embutido no documento com o uso do elemento img<img src="imagens/rabisco.svg" alt="Rabisco em SVG">canvas bitmapsvg vetorhttp://bit.ly/rqqZuK flatschart.com
  • 28. Áudio<audio src="mozart_trompa.mp3" controls></audio>Opção para vários formatos e opção de download do arquivo, visível quando obrowser do usuário não oferecer suporte para nenhum dos formatos indicados oupara o elemento audio.<audio controls><source src="mozart_trompa.aac"/><source src="mozart_trompa.ogg"/><source src="mozart_trompa.mp3"/><p>Baixe o arquivo<a href="mozart_trompa.mp3">.mp3</a></p></audio> http://bit.ly/nDeClI flatschart.com
  • 29. VídeoA compatibilidade dos browsers ainda é problemática, mas existem váriasmaneiras de contornar esta questão como, por exemplo, usar formatosalternativos, indicar um link para download e incluir o uso do Flash Player para areprodução do vídeo.<video height="272" width="360" controls preload poster=“poster_video.jpg"><source src="videos/video.m4v"/><source src="videos/video.ogv"/><source src="videos/video.webm"/><p><a href="videos/video.m4v">Baixe o vídeo</a></p></video> http://bit.ly/oKtdlTContainer Vídeo Áudio SuporteMPEG4 H.264 AAC Chrome, Safari, IE9OGG Theora Vorbis Chrome, Firefox, OperaWebM VP8 Vorbis Chrome , Firefox, IE9, Opera flatschart.com
  • 30. O HTML não é uma linguagem de programaçãoAPIS flatschart.com
  • 31. APIs“O HTML não é uma linguagem de programação”Apesar desta afirmação soar estranha para muitos, sempre devemos lembrar de que oHTML é uma linguagem de marcação e de que sozinho ele não consegue formatar,manipular ou criar conteúdo. APIs Demo Web Storage http://slides.html5rocks.com/#web-storage Drag & Drop http://slides.html5rocks.com/#drag-and-drop Desktop Drag-In http://slides.html5rocks.com/#drag-in Desktop Drag-Out http://slides.html5rocks.com/#drag-out Geolocation http://slides.html5rocks.com/#geolocation Device Orientation http://slides.html5rocks.com/#slide-orientation Speech Input http://slides.html5rocks.com/#speech-input
  • 32. O estilo está sob as palavras como dentro delas. É igualmente a alma e acarne de uma obraESTILO flatschart.com
  • 33. CSS3@font-faceEfeitos de textoColunasCor e transparênciaBordasTransiçõesAnimaçõesMedia querieshttp://bit.ly/p4vtpShttp://slides.html5rocks.com/#css3-title flatschart.com
  • 34. Mobile não é uma tecnologia é um estilo de vidaWEB APPS flatschart.com
  • 35. flatschart.com
  • 36. Aplicativos Mobile HTML5PlayboyFinancial TimesLinkedinZeewe flatschart.com
  • 37. Mudança do fluxo de traballhoCASES flatschart.com
  • 38. HTML5 APPsSoyuz SistemasMigração do fluxo de trabalho para produçãode apresentações em HTML5 para SistemaUNO Internacional do Grupo Santillana /Editora ModernaEnvolvimento e treinamento da equipeDesigners | DevelopersDo PSD ao CODE com semânticaCrossbrowserPermite distribuição para iOS e AndroidPermite empacotamento Adobe AIR (Webkit)Base para produção de futura ferramentacolaborativa flatschart.com
  • 39. WEB GL e Visualização de dadosDashboard em tempo realmostrando a relação entre latitude,longitude e altura dos municípiosbrasileiros.Baseado em dados abertos, esta éuma experiência de visualização dedados utilizando Ajax e Processing.jscomo mecanismo para o gráfico emWebGL.http://labs.soyuz.com.br/dash/ flatschart.com
  • 40. Mitos• HTML5 ainda não pode ser usado comercialmente• A maior mudança do HTML5 foi Vídeo, Áudio e Canvas• Objetivo do HTML5 é matar o Flash• HTML5 não faz diferença pra SEO/SEM• HTML5 tem falhas graves de segurança flatschart.com
  • 41. OPEN WEB PLATFORM flatschart.com
  • 42. Você é o que você compartilha LINKS E REFERÊNCIAS flatschart.com
  • 43. Links e ReferênciasSoyuz Sistemashttp://www.soyuz.com.br/Livro HTML5 – Embarque Imediatohttp://flatschart.com/html5/HTML5 Doctor, helping you implement HTML5 todayhttp://html5doctor.com/ Adobe HTML5 and CSS3 development http://www.adobe.com/devnet/html5.htmlDIVE INTO HTML5http://diveintohtml5.org/ HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/HTML5: Edition for Web Authorshttp://dev.w3.org/html5/spec-author-view/ Adobe Dreamweaver CS5.5 http://www.adobe.com/br/products/dreamweaver.htmlW3C Brasilhttp://www.w3c.br Adobe Labs http://labs.adobe.com/Curso de HTML5 do W3C Brasilhttp://www.w3c.br/Cursos/CursoHTML5Stickmanhttp://www.drawastickman.com/20 Lições - Google flatschart.comhttp://www.20thingsilearned.com/pt-BR
  • 44. Fica a dica PUBLICAÇÕES flatschart.com
  • 45. Publicaçõesflatschart.com
  • 46. Novidades!http://www.facebook.com/Seofish flatschart.com
  • 47. Muito obrigado ! @fabioflat fabioflat@gmail.com flatschart.com flatschart.com

×