HTML 5Senac Consolação | Abril de 2012
flatschart.com
HTML5A nova fronteira no projeto de aplicações WEB           flatschart.com
Fábio FlatschartGerente de Marketing e Inovação da Soyuz SistemasNo mercado WEB desde 1997, é consultor dedesenvolvimento ...
Conexões@fabioflatslideshare.net/fabioflatdelicio.us/fabioflatlinkedin.com/in/fabioflat        flatschart.com
O HTML5 não é uma ruptura, é a continuidade e evolução do modeloconcebido por Tim Berners-Lee nos anos 1990INTRO          ...
WEBArquitetura cliente < > servidorModelo de localização universalURL - Uniform Resource LocatorProtocolo de comunicaçãoHT...
Client SideA organização do desenvolvimento de projetos web em camadas independentesconfere flexibilidade e modularidade a...
HTML1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless2005 AJAX2009 HTML 5        ...
HTML5O HTML 5 é especificação do W3C, ainda não concluída, que deve ser candidata a umarecomendação em 2012.Pelas caracter...
APIsO HTML 5 aceita um conjunto de APIs que fortalece, integra e valoriza a camada dedesenvolvimento do lado do usuário (c...
APIsO HTML5 não é uma ruptura, é a continuidade e evolução do modelo concebido porTim Berners-Lee nos anos 1990           ...
CompatibilidadeRenderização dos browsers    Motor             Browsers    Gecko        Firefox, SeaMonkey, Camino, K-Meleo...
Compatibilidadehttp://html5test.comTesta e avalia a compatibilidade do seu browser com os elementos específicos doHTML5htt...
Compatibilidade<head><!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--></h...
front end developer        flatschart.com
front end developer        flatschart.com
A simplicidade é o último grau de sofisticaçãoNOVIDADES                                flatschart.com
DoctypeHTML 4.01<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">XHTML 1.0<!DOCTYP...
CharsetHTML 4.01<meta http-equiv="Content-Type" content="text/html;charset=utf-8">XHTML 1.0<?xml version="1.0" encoding="U...
Estrutura básica<!DOCTYPE html><html lang="pt-br"><head><meta charset="utf-8"><title>Estrutura básica</title></head><body>...
Saber o significado das palavras é essencial para o entendimento!SEMÂNTICA                               flatschart.com
Elementos estruturaisUmas das maiores novidades do HTML5 é a possibilidade de atribuir às diversasseções estuturais do doc...
Formulários <input type="email">   <input type="url"><input type="number"><input type="search"> <input type="range">  <inp...
O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.MULTIMÍDIA                               flatschart....
CanvasO elemento canvas,novidade do HTML 5, permite que a informação para aconstrução de imagens baseadas em pixels seja i...
SVG<svg ><rect width="90" height="60" x="10" y="100"fill="#00FFCC" stroke="#FF0000" stroke-width="3" ></svg>No HTML5 o for...
Áudio<audio src="mozart_trompa.mp3" controls></audio>Opção para vários formatos e opção de download do arquivo, visível qu...
VídeoA compatibilidade dos browsers ainda é problemática, mas existem váriasmaneiras de contornar esta questão como, por e...
O HTML não é uma linguagem de programaçãoAPIS                            flatschart.com
APIs“O HTML não é uma linguagem de programação”Apesar desta afirmação soar estranha para muitos, sempre devemos lembrar de...
O estilo está sob as palavras como dentro delas. É igualmente a alma e acarne de uma obraESTILO                           ...
CSS3@font-faceEfeitos de textoColunasCor e transparênciaBordasTransiçõesAnimaçõesMedia querieshttp://bit.ly/p4vtpShttp://s...
Mobile não é uma tecnologia é um estilo de vidaWEB APPS                               flatschart.com
flatschart.com
Aplicativos Mobile HTML5PlayboyFinancial TimesLinkedinZeewe            flatschart.com
Mudança do fluxo de traballhoCASES                                flatschart.com
HTML5 APPsSoyuz SistemasMigração do fluxo de trabalho para produçãode apresentações em HTML5 para SistemaUNO Internacional...
WEB GL e Visualização de dadosDashboard em tempo realmostrando a relação entre latitude,longitude e altura dos municípiosb...
Mitos•   HTML5 ainda não pode ser usado comercialmente•   A maior mudança do HTML5 foi Vídeo, Áudio e Canvas•   Objetivo d...
OPEN WEB PLATFORM      flatschart.com
Você é o que você compartilha LINKS E REFERÊNCIAS                             flatschart.com
Links e ReferênciasSoyuz Sistemashttp://www.soyuz.com.br/Livro HTML5 – Embarque Imediatohttp://flatschart.com/html5/HTML5 ...
Fica a dica PUBLICAÇÕES                flatschart.com
Publicaçõesflatschart.com
Novidades!http://www.facebook.com/Seofish           flatschart.com
Muito obrigado !               @fabioflat               fabioflat@gmail.com               flatschart.com      flatschart.com
Upcoming SlideShare
Loading in...5
×

HTML5 - Road Show TI Experience 2012

2,517

Published on

De março a maio de 2012 mais de 30 unidades do Senac São Paulo na capital e interior recebem o ciclo gratuito de palestras Road Show TI Experience 2012.

O evento tem a proposta de apresentar o que há de mais novo e relevante no mundo da tecnologia da informação e no mercado de trabalho na área.

Nesta apresentação mostro como o HTML5 e suas tecnologias acessórias são a nova fronteira no projeto de aplicações WEB

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,517
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
149
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

HTML5 - Road Show TI Experience 2012

  1. 1. HTML 5Senac Consolação | Abril de 2012
  2. 2. flatschart.com
  3. 3. HTML5A nova fronteira no projeto de aplicações WEB flatschart.com
  4. 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. 5. Conexões@fabioflatslideshare.net/fabioflatdelicio.us/fabioflatlinkedin.com/in/fabioflat flatschart.com
  6. 6. O HTML5 não é uma ruptura, é a continuidade e evolução do modeloconcebido por Tim Berners-Lee nos anos 1990INTRO flatschart.com
  7. 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. 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. 9. HTML1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless2005 AJAX2009 HTML 5 flatschart.com
  10. 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. 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. 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. 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. 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. 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. 16. front end developer flatschart.com
  17. 17. front end developer flatschart.com
  18. 18. A simplicidade é o último grau de sofisticaçãoNOVIDADES flatschart.com
  19. 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. 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. 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. 22. Saber o significado das palavras é essencial para o entendimento!SEMÂNTICA flatschart.com
  23. 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. 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. 25. O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.MULTIMÍDIA flatschart.com
  26. 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. 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. 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. 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. 30. O HTML não é uma linguagem de programaçãoAPIS flatschart.com
  31. 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. 32. O estilo está sob as palavras como dentro delas. É igualmente a alma e acarne de uma obraESTILO flatschart.com
  33. 33. CSS3@font-faceEfeitos de textoColunasCor e transparênciaBordasTransiçõesAnimaçõesMedia querieshttp://bit.ly/p4vtpShttp://slides.html5rocks.com/#css3-title flatschart.com
  34. 34. Mobile não é uma tecnologia é um estilo de vidaWEB APPS flatschart.com
  35. 35. flatschart.com
  36. 36. Aplicativos Mobile HTML5PlayboyFinancial TimesLinkedinZeewe flatschart.com
  37. 37. Mudança do fluxo de traballhoCASES flatschart.com
  38. 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. 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. 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. 41. OPEN WEB PLATFORM flatschart.com
  42. 42. Você é o que você compartilha LINKS E REFERÊNCIAS flatschart.com
  43. 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. 44. Fica a dica PUBLICAÇÕES flatschart.com
  45. 45. Publicaçõesflatschart.com
  46. 46. Novidades!http://www.facebook.com/Seofish flatschart.com
  47. 47. Muito obrigado ! @fabioflat fabioflat@gmail.com flatschart.com flatschart.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×