HTML5- Road Show TI - Senac Jaboticabal

  • 1,641 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,641
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
84
Comments
0
Likes
3

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 5Open Web Platform Jaboticabal
  • 2. soyuz.com.br
  • 3. HTML5A nova fronteira no projeto de aplicações WEB soyuz.com.br
  • 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. Conexões@cbachinislideshare.net/cbachiniklout.com/#/cbachinilinkedin.com/in/cbachini soyuz.com.br
  • 6. Pra começo de conversa Design é Projeto | Draw é Desenho soyuz.com.br
  • 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. 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. 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. HTML1991 HTML1994 HTML 21996 CSS 1 + JavaScript1997 HTML 41998 CSS 22000 XHTML 12002 Tableless2005 AJAX2009 HTML 5 soyuz.com.br
  • 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. 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. 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. 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. 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. 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. A simplicidade é o último grau de sofisticaçãoNOVIDADES soyuz.com.br
  • 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. 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. 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. Saber o significado das palavras é essencial para o entendimento!SEMÂNTICA soyuz.com.br
  • 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. 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. O que eu ouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo.MULTIMÍDIA soyuz.com.br
  • 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. 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. Á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. 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. O HTML não é uma linguagem de programaçãoAPIS soyuz.com.br
  • 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. O estilo está sob as palavras como dentro delas. É igualmente a alma e acarne de uma obraESTILO soyuz.com.br
  • 32. CSS3@font-faceEfeitos de textoColunasCor e transparênciaBordasTransiçõesAnimaçõesMedia querieshttp://bit.ly/p4vtpShttp://slides.html5rocks.com/#css3-title soyuz.com.br
  • 33. Mobile não é uma tecnologia é um estilo de vidaWEB APPS soyuz.com.br
  • 34. soyuz.com.br
  • 35. Aplicativos Mobile HTML5PlayboyFinancial TimesLinkedinZeewe soyuz.com.br
  • 36. Mudança do fluxo de traballhoCASES soyuz.com.br
  • 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. 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. 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. OPEN WEB PLATFORM soyuz.com.br
  • 41. Você é o que você compartilha LINKS E REFERÊNCIAS soyuz.com.br
  • 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. Fica a dica PUBLICAÇÕES soyuz.com.br
  • 44. Publicações “Jaba para Fábio Flatschart”soyuz.com.br
  • 45. Novidades!http://www.facebook.com/Seofish soyuz.com.br
  • 46. Muito obrigado ! @cbachini cbachini@gmail.com soyuz.com.br soyuz.com.br