Your SlideShare is downloading. ×
0
HTML 5Open Web Platform          Jaboticabal
soyuz.com.br
HTML5A nova fronteira no projeto de aplicações                                     WEB           soyuz.com.br
Clécio BachiniBacharel em Ciências da ComputaçãoFundador e Diretor de Pesquisa e Desenvolvimento daSoyuz SistemasNo mercad...
Conexões@cbachinislideshare.net/cbachiniklout.com/#/cbachinilinkedin.com/in/cbachini       soyuz.com.br
Pra começo de conversa Design é Projeto | Draw é Desenho            soyuz.com.br
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...
A simplicidade é o último grau de sofisticaçãoNOVIDADES                                soyuz.com.br
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                                soyuz.com.br
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                               soyuz.com.br
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                            soyuz.com.br
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                               soyuz.com.br
soyuz.com.br
Aplicativos Mobile HTML5PlayboyFinancial TimesLinkedinZeewe            soyuz.com.br
Mudança do fluxo de traballhoCASES                                soyuz.com.br
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      soyuz.com.br
Você é o que você compartilha LINKS E REFERÊNCIAS                              soyuz.com.br
Soyuz Sistemas                                                    Links e Referênciashttp://www.soyuz.com.br/Livro HTML5 –...
Fica a dica PUBLICAÇÕES                soyuz.com.br
Publicações                 “Jaba para                 Fábio Flatschart”soyuz.com.br
Novidades!http://www.facebook.com/Seofish           soyuz.com.br
Muito obrigado !              @cbachini              cbachini@gmail.com              soyuz.com.br      soyuz.com.br
Upcoming SlideShare
Loading in...5
×

HTML5- Road Show TI - Senac Jaboticabal

1,733

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,733
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
87
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5- Road Show TI - Senac Jaboticabal "

  1. 1. HTML 5Open Web Platform Jaboticabal
  2. 2. soyuz.com.br
  3. 3. HTML5A nova fronteira no projeto de aplicações WEB soyuz.com.br
  4. 4. Clécio BachiniBacharel em Ciências da ComputaçãoFundador e Diretor de Pesquisa e Desenvolvimento daSoyuz SistemasNo mercado WEB desde 1997.Foi professor de Web Standards e GNU/Linux no CentroPaula Souza.Palestrante em eventos como WebExpo Forum, Front InLondrina e em Universidades como Fatec e Cruzeiro doSul.Certificado em HTML5 pelo W3C escritório Brasil. soyuz.com.br
  5. 5. Conexões@cbachinislideshare.net/cbachiniklout.com/#/cbachinilinkedin.com/in/cbachini soyuz.com.br
  6. 6. Pra começo de conversa Design é Projeto | Draw é Desenho soyuz.com.br
  7. 7. O HTML5 não é uma ruptura, é a continuidade e evolução do modeloconcebido por Tim Berners-Lee nos anos 1990INTRO soyuz.com.br
  8. 8. 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 soyuz.com.br
  9. 9. 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 soyuz.com.br
  10. 10. HTML1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless2005 AJAX2009 HTML 5 soyuz.com.br
  11. 11. 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 soyuz.com.br
  12. 12. 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 soyuz.com.br
  13. 13. 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 soyuz.com.br
  14. 14. 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. soyuz.com.br
  15. 15. 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 webhttp://fmbip.comExibe tabelas de compatibilidade sobre seu browser soyuz.com.br
  16. 16. 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.http://modernizr.com/Bibioteca que introduz elementos de teste e compatibilidde por meio de JavaScript.http://br.html5boilerplate.com/Framework com soluções de compatibilidade para HTML5. soyuz.com.br
  17. 17. A simplicidade é o último grau de sofisticaçãoNOVIDADES soyuz.com.br
  18. 18. 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> soyuz.com.br
  19. 19. 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"> soyuz.com.br
  20. 20. Estrutura básica<!DOCTYPE html><html lang="pt-br"><head><meta charset="utf-8"><title>Estrutura básica</title></head><body></body></html> soyuz.com.br
  21. 21. Saber o significado das palavras é essencial para o entendimento!SEMÂNTICA soyuz.com.br
  22. 22. 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> soyuz.com.br
  23. 23. 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 soyuz.com.br
  24. 24. O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.MULTIMÍDIA soyuz.com.br
  25. 25. 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 soyuz.com.br
  26. 26. 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 soyuz.com.br
  27. 27. Á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 soyuz.com.br
  28. 28. 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 soyuz.com.br
  29. 29. O HTML não é uma linguagem de programaçãoAPIS soyuz.com.br
  30. 30. 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
  31. 31. O estilo está sob as palavras como dentro delas. É igualmente a alma e acarne de uma obraESTILO soyuz.com.br
  32. 32. CSS3@font-faceEfeitos de textoColunasCor e transparênciaBordasTransiçõesAnimaçõesMedia querieshttp://bit.ly/p4vtpShttp://slides.html5rocks.com/#css3-title soyuz.com.br
  33. 33. Mobile não é uma tecnologia é um estilo de vidaWEB APPS soyuz.com.br
  34. 34. soyuz.com.br
  35. 35. Aplicativos Mobile HTML5PlayboyFinancial TimesLinkedinZeewe soyuz.com.br
  36. 36. Mudança do fluxo de traballhoCASES soyuz.com.br
  37. 37. 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 soyuz.com.br
  38. 38. 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/ soyuz.com.br
  39. 39. 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 soyuz.com.br
  40. 40. OPEN WEB PLATFORM soyuz.com.br
  41. 41. Você é o que você compartilha LINKS E REFERÊNCIAS soyuz.com.br
  42. 42. Soyuz Sistemas Links e Referênciashttp://www.soyuz.com.br/Livro HTML5 – Embarque Imediatohttp://soyuz.com.br/html5/Can I Use?http://caniuse.com/HTML5 Doctor, helping you implement HTML5 todayhttp://html5doctor.com/DIVE INTO HTML5http://diveintohtml5.org/HTML5: Edition for Web Authorshttp://dev.w3.org/html5/spec-author-view/W3C Brasilhttp://www.w3c.brCurso de HTML5 do W3C Brasilhttp://www.w3c.br/Cursos/CursoHTML5Stickmanhttp://www.drawastickman.com/20 Lições - Googlehttp://www.20thingsilearned.com/pt-BR soyuz.com.br
  43. 43. Fica a dica PUBLICAÇÕES soyuz.com.br
  44. 44. Publicações “Jaba para Fábio Flatschart”soyuz.com.br
  45. 45. Novidades!http://www.facebook.com/Seofish soyuz.com.br
  46. 46. Muito obrigado ! @cbachini cbachini@gmail.com soyuz.com.br soyuz.com.br
  1. A particular slide catching your eye?

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

×