flatschart.com
Semana de Tecnologia UniToledo     Araçatuba - 28 de setembro de 2011                flatschart.com
HTML5A nova fronteira no desenvolvimento de                        aplicações WEB          flatschart.com
Fábio FlatschartNo mercado WEB desde 1997, é consultor dedesenvolvimento e implantação de soluções e ferramentasda Adobe S...
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"> <inpu...
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 traballhoMINI CASE                                flatschart.com
Mini CaseParceria com a Soyuz SistemasMigração do fluxo de trabalho para produçãode apresentações em HTML5 para Sistema UN...
Você é o que você compartilha LINKS E REFERÊNCIAS                             flatschart.com
Links e ReferênciasLivro HTML5 – Embarque Imediatohttp://flatschart.com/html5/HTML5 Doctor, helping you implement HTML5 to...
Fica a dica PUBLICAÇÕES                flatschart.com
Publicaçõesflatschart.com
Muito obrigado !               @fabioflat               fabioflat@gmail.com               flatschart.com      flatschart.com
Próximos SlideShares
Carregando em…5
×

HTML5 - A nova fronteira no desenvolvimento de aplicações WEB

4.483 visualizações

Publicada em

HTML5 - A nova fronteira no desenvolvimento de aplicações WEB

Material apresentado na Semana de Tecnologia UniToledo
Araçatuba - 28 de setembro de 2011

Publicada em: Tecnologia
0 comentários
6 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
4.483
No SlideShare
0
A partir de incorporações
0
Número de incorporações
470
Ações
Compartilhamentos
0
Downloads
144
Comentários
0
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

HTML5 - A nova fronteira no desenvolvimento de aplicações WEB

  1. 1. flatschart.com
  2. 2. Semana de Tecnologia UniToledo Araçatuba - 28 de setembro de 2011 flatschart.com
  3. 3. HTML5A nova fronteira no desenvolvimento de aplicações WEB flatschart.com
  4. 4. Fábio FlatschartNo 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 traballhoMINI CASE flatschart.com
  38. 38. Mini CaseParceria com a Soyuz SistemasMigração do fluxo de trabalho para produçãode apresentações em HTML5 para Sistema UNOInternacional do Grupo Santillana / EditoraModernaEnvolvimento 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. Você é o que você compartilha LINKS E REFERÊNCIAS flatschart.com
  40. 40. Links e ReferênciasLivro HTML5 – Embarque Imediatohttp://flatschart.com/html5/HTML5 Doctor, helping you implement HTML5 todayhttp://html5doctor.com/DIVE INTO HTML5http://diveintohtml5.org/ Adobe HTML5 and CSS3 development http://www.adobe.com/devnet/html5.htmlHTML5: Edition for Web Authorshttp://dev.w3.org/html5/spec-author-view/ HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/W3C Brasilhttp://www.w3c.br Adobe Dreamweaver CS5.5 http://www.adobe.com/br/products/dreamweaver.htmlCurso de HTML5 do W3C Brasilhttp://www.w3c.br/Cursos/CursoHTML5 Adobe Labs http://labs.adobe.com/Stickmanhttp://www.drawastickman.com/20 Lições - Googlehttp://www.20thingsilearned.com/pt-BR flatschart.com
  41. 41. Fica a dica PUBLICAÇÕES flatschart.com
  42. 42. Publicaçõesflatschart.com
  43. 43. Muito obrigado ! @fabioflat fabioflat@gmail.com flatschart.com flatschart.com

×