Baixado 31 vezes
![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](https://image.slidesharecdn.com/palestra-121025181642-phpapp01/85/HTML-5-e-Open-Web-Platform-15-320.jpg)
Carregado porAna Carolina Gracioso
HTML 5 e Open Web Platform
O documento discute as novas possibilidades trazidas pela especificação HTML5, como elementos estruturais semânticos, novos tipos de entrada para formulários, integração de mídia como vídeo e áudio, uso de canvas e SVG, e APIs que permitem novas funcionalidades para aplicações web. A especificação HTML5 evolui a web de forma modular, permitindo que recursos sejam implementados gradualmente pelos navegadores sem depender da finalização da especificação.
HTML 5 e Open Web Platform
- 1.
- 2.
- 3. HTML5 A nova fronteirano desenvolvimento de aplicações WEB flatschart.com
- 4. Fábio Flatschart Gerente deMarketing e Inovação da Soyuz. Sócio Diretor da Flatschart Consultoria. Professor do MBA em Marketing Digital da FGV e do MBA em Marketing, Consumo e Mídia Online da Trevisan. Autor da Editora Brasport e Colunista do Portal iMasters. FGV MBA Marketing USJT Criação Visual e Multimídia USP Escola de Comunicação e Artes flatschart.com
- 5.
- 6. O HTML5 nãoé uma ruptura, é a continuidade e evolução do modelo concebido por Tim Berners-Lee nos anos 1990 INTRO flatschart.com
- 7. WEB Arquitetura cliente <> servidor Modelo de localização universal URL - Uniform Resource Locator Protocolo de comunicação HTTP - Hypertext Transfer Protocol Linguagem de marcação HTML - HyperText Markup Language Documento estruturado na forma de hipertexto Browser (navegador) como recurso de visualização do documento pelo cliente flatschart.com
- 8. Client Side A organizaçãodo desenvolvimento de projetos web em camadas independentes confere flexibilidade e modularidade ao fluxo de trabalho para web integrando equipes multidisciplinares de planejamento, produção, arquitetura da informação, design e programação. Marcação HTML Apresentação CSS Comportamento JavaScript flatschart.com
- 9. HTML 1991 HTML 1994 HTML2 1996 CSS 1 + JavaScript 1997 HTML 4 1998 CSS 2 2000 XHTML 1 2002 Tableless 2005 AJAX 2009 HTML 5 flatschart.com
- 10. HTML5 O HTML 5é especificação do W3C, ainda não concluída, que deve ser candidata a uma recomendação em 2012. Pelas características modulares do seu desenvolvimento, as empresas, fabricantes dos navegadores, desenvolvedores, designers e usuários não necessitam aguardar a especificação final da linguagem para colocá-la em uso. Esta nova especificação introduz novos elementos (tags) orientados para auxiliar no desenvolvimento web baseado em padrões compatíveis com todos dispositivos, na marcação semântica do código, na manipulação de elementos do CSS e do JavaScript através da definição de APIs da arquitetura Web. World Wide Web Consortium - Escritório Brasil http://www.w3c.br flatschart.com
- 11. APIs O HTML 5aceita um conjunto de APIs que fortalece, integra e valoriza a camada de desenvolvimento do lado do usuário (client side) através de aplicações que permitem geolocalizaçã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. APIs O HTML5 nãoé uma ruptura, é a continuidade e evolução do modelo concebido por Tim Berners-Lee nos anos 1990 HTML5 HTML CSS APIs + JS flatschart.com
- 13. Compatibilidade Renderizaçã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, Symbian A cada nova versão mais recursos são suportados e a concorrência entre os fabricantes é grande de maneira que quando um fabricante implementa uma funcionalidade é quase sempre seguido de perto pelos demais. flatschart.com
- 14. Compatibilidade http://html5test.com Testa e avaliaa compatibilidade do seu browser com os elementos específicos do HTML5 http://html5readiness.com Mostra como o suporte ao HTML5 evoluiu de 2008 até hoje http://caniuse.com Exibe tabelas de compatibilidade para recursos de HTML5, CSS3, SVG e outras tecnologias web flatschart.com
- 15. Compatibilidade <head> <!--[if IE]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> Oscript 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ção NOVIDADES flatschart.com
- 19. Doctype HTML 4.01 <!DOCTYPE htmlPUBLIC "-//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. Charset HTML 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> <htmllang="pt-br"> <head> <meta charset="utf-8"> <title>Estrutura básica</title> </head> <body> </body> </html> flatschart.com
- 22. Saber o significadodas palavras é essencial para o entendimento! SEMÂNTICA flatschart.com
- 23. Elementos estruturais Umas dasmaiores novidades do HTML5 é a possibilidade de atribuir às diversas seçõ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 euouço, esqueço. O que eu vejo, lembro. O que eu faço, aprendo. MULTIMÍDIA flatschart.com
- 26. Canvas O elemento canvas,novidadedo HTML 5, permite que a informação para a construção de imagens baseadas em pixels seja inserida diretamente no código do documento. O elemento canvas apenas delimita em que local da tela isto acontece. O processo de desenho é controlado por uma API específica para este elemento que interage com JavaScript. <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 embutido diretamente embutido no documento com o uso do elemento img <img src="imagens/rabisco.svg" alt="Rabisco em SVG"> canvas bitmap svg vetor http://bit.ly/rqqZuK flatschart.com
- 28. Áudio <audio src="mozart_trompa.mp3" controls></audio> Opçãopara vários formatos e opção de download do arquivo, visível quando o browser do usuário não oferecer suporte para nenhum dos formatos indicados ou para 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ídeo A compatibilidade dosbrowsers ainda é problemática, mas existem várias maneiras de contornar esta questão como, por exemplo, usar formatos alternativos, indicar um link para download e incluir o uso do Flash Player para a reproduçã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/oKtdlT Container Vídeo Áudio Suporte MPEG4 H.264 AAC Chrome, Safari, IE9 OGG Theora Vorbis Chrome, Firefox, Opera WebM VP8 Vorbis Chrome , Firefox, IE9, Opera flatschart.com
- 30. O HTML nãoé uma linguagem de programação APIS 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 o HTML é 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 a carne de uma obra ESTILO flatschart.com
- 33. CSS3 @font-face Efeitos de texto Colunas Core transparência Bordas Transições Animações Media queries http://bit.ly/p4vtpS http://slides.html5rocks.com/#css3-title flatschart.com
- 34. Mobile não éuma tecnologia é um estilo de vida WEB APPS flatschart.com
- 35.
- 36. Aplicativos Mobile HTML5 Playboy FinancialTimes Linkedin Zeewe flatschart.com
- 37. 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
- 38. OPEN WEB PLATFORM flatschart.com
- 39. OPEN WEB PLATFORM OpenWeb Platform ( Plataforma Aberta da Web ), é a coleção de tecnologias abertas (royalty-free) da web. Utilizando a Plataforma Aberta da Web , todos podem implementar componentes de software na Web sem a necessidade de qualquer aprovação ou taxas de licença. • Semantics • Offline & Storage • Device Access • Connectivity • Multimedia • 3D, Graphics & Effects • Performance & Integration • CSS3 flatschart.com
- 40. OPEN WEB PLATFORM PackagedWeb Apps (Widgets) Games, Anúncios, Displays Interativos, Mashups... flatschart.com
- 41. ePUB3 EPUB 3 StructuralSemantics Vocabulary flatschart.com
- 42. CASES flatschart.com
- 43. Cases Migração do fluxode trabalho para produção de apresentações em HTML5 para Sistema UNO Internacional do Grupo Santillana / Editora Moderna Envolvimento e treinamento da equipe Designers | Developers Do Photoshop ao CODE com semântica Crossbrowser Permite distribuição para iOS e Android Base para produção de futura ferramenta colaborativa flatschart.com
- 44. WEB GL eVisualização de dados Dashboard em tempo real mostrando a relação entre latitude, longitude e altura dos municípios brasileiros. Baseado em dados abertos, esta é uma experiência de visualização de dados utilizando Ajax e Processing.js como mecanismo para o gráfico em WebGL. http://labs.soyuz.com.br/dash/ flatschart.com
- 45. Aplicativos Híbridos Prateleira delivros da Editora Moderna produzida pela Soyuz flatschart.com
- 46. Games Game da Soyuzpara o W3C flatschart.com
- 47. #ficaadica PUBLICAÇÕES flatschart.com
- 48.
- 49. LINKS E REFERÊNCIAS flatschart.com
- 50. Links e Referências LivroHTML5 – Embarque Imediato http://flatschart.com/html5/ HTML5 Doctor, helping you implement HTML5 today http://html5doctor.com/ DIVE INTO HTML5 http://diveintohtml5.org/ HTML5: Edition for Web Authors http://dev.w3.org/html5/spec-author-view/ W3C Brasil http://www.w3c.br Curso de HTML5 do W3C Brasil http://www.w3c.br/Cursos/CursoHTML5 Stickman http://www.drawastickman.com/ 20 Lições - Google http://www.20thingsilearned.com/pt-BR flatschart.com
- 51. Muito obrigado ! @fabioflat fabioflat@gmail.com flatschart.com flatschart.com