1 / 77

Novas possibilidades no desenvolvimento web com a HTML5

Novas possibilidades no desenvolvimento web com a HTML5. Organização: Tiago Kautzmann. VISÃO GERAL. WORLD WIDE WEB HISTÓRICO W3C. HTML5. HTML – Visão Geral. World Wide Web. Em 1989 Tim Berners-Lee criou a World Wide Web: Criou o termo World Wide Web;

stesha
Télécharger la présentation

Novas possibilidades no desenvolvimento web com a HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Novas possibilidades no desenvolvimento web com a HTML5 Organização: Tiago Kautzmann

  2. VISÃO GERAL WORLD WIDE WEB HISTÓRICO W3C HTML5

  3. HTML – Visão Geral World Wide Web • Em 1989 Tim Berners-Lee crioua World Wide Web: • Criou o termo World Wide Web; • Desenvolveu o primeiroservidor web; • Desenvolveu o protocolo http; • Desenvolveu o primeironavegador; • Em 1990 desenvolveu a primeiraversão do HTML (HyperText Markup Language);

  4. HTML – Visão Geral World Wide Web http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

  5. HTML – Visão Geral World Wide Web . . .

  6. HTML – Visão Geral W3C – World Wide Web Consortium • Emoutubrode 1994 Tim Berners-Lee fundou a W3C com o objetivo de desenvolverpadrões, especificaçõestécnicas e orientaçõesquepermitam o crescimento a longoprazoda web.

  7. HTML – Visão Geral W3C – World Wide Web Consortium • Algunspadrõesdefinidospela W3C: • XML; • HTML; • XHTML; • DOM; • CSS; • SVG; • MathML; • PadrõesparaAcessibilidade (WCAG – Web Content Accessibility Guidelines); • Padrões Web Semântica; • ….. Os padrões são definidos por grupos de trabalho.

  8. HTML – Visão Geral Desenvolvimento da HTML5

  9. HTML – Visão Geral Desenvolvimento da HTML5

  10. HTML – Visão Geral Desenvolvimento da HTML5 • O que é a HTML5? • HTML5 é a nova versão da HTML. Além de definir regras de marcação HTML e XHTML, define também APIs (ApplicationProgramming Interfaces) para o desenvolvimento de animações, reprodução de aúdio e vídeo, geolocalização, entre outros. http://www.w3.org/html/wg/

  11. HTML – Visão Geral Desenvolvimento da HTML5 • Em 12 de dezembro de 2012 foi publicada a definição completa (Candidate Recommendation) das especificações HTML5.0 e Canvas 2D. Estabilidade para o desenvolvedor e fornecedores de browsers. • http://www.w3.org/2012/12/html5-cr • A expectativa da W3C é que a HTML 5.0 se torne uma recomendação no final de 2014 e a HTML 5.1 no final de 2016.

  12. HTML – Visão Geral Desenvolvimento da HTML5 • Muitas tecnologias que foram originalmente definidas como HTML5 passaram a ser definidas em especificações separadas. Exemplo: • HTML Microdata - HTML WG • HTML Canvas 2D Context - HTML WG • HTML5 Web Messaging - Web Apps WG • Web Workers - Web Apps WG • Web Storage - Web Apps WG • TheWebSocket API - Web Apps WG • TheWebSocketProtocol - IETF HyBi WG • Server-SentEvents - Web Apps WG • WebRTC - WebRTC WG • WebVTT - W3C Web Media TextTracks CG • HTML+RDFa - RDFa WG • SVG - SVG WG • MathML - Math WG • .......

  13. HTML – Visão Geral Desenvolvimento da HTML5 • HTML5 + CSS3 + JavaScript + outras especificações

  14. HTML5 Estrutura básica, DOCTYPE e charsets

  15. HTML5 – Estrutura básica, DOCTYPE e charsets • O HTML5 define uma sintaxe compatível com HTML e XHTML: • <!DOCTYPE html> • <htmllang="pt-br"> • <head> • <meta charset="UTF-8" /> • <title>Palestra HTML5</title> • </head> • <body> • </body> • </html>

  16. HTML5 Novos elementos semânticos

  17. HTML5 – Novos elementos e atributos Semântica dos documentos em HTML HTML4 HTML5

  18. HTML5 – Novos elementos e atributos Semântica dos documentos em HTML

  19. HTML5 – Novos elementos e atributos Elemento header • Representa um cabeçalho; • Destina-se a marcar o cabeçalho de uma sessão ou da página como um todo. header - HTML languagereference

  20. HTML5 – Novos elementos e atributos Elemento header header - HTML language reference

  21. HTML5 – Novos elementos e atributos Elemento footer • Representa um rodapé; • Destina-se a marcar o rodapé de uma sessão ou da página como um todo; • Deve conter informações sobre o conteúdo da seção ou página, como seu autor, links para documentos relacionados, direitos autorais e similares. footer - HTML languagereference

  22. HTML5 – Novos elementos e atributos Elemento footer footer - HTML language reference

  23. HTML5 – Novos elementos e atributos Elemento nav • Marca uma seção da página que contenha links para outras páginas ou para outras partes dentro da própria página. • Nem todos os grupamentos de links devem ser marcados com este elemento, somente os maiores grupos de links. nav - HTML languagereference

  24. HTML5 – Novos elementos e atributos Elemento nav <nav>  <h1>Navigation</h1>  <ul>   <li><a href="articles.html">Index </a></li>   <li><a href="today.html">Things for today</a></li>   <li><a href="successes.html">Managed</a></li>  </ul></nav> nav - HTML languagereference

  25. HTML5 – Novos elementos e atributos Elemento article • Marca uma sessão de um conteúdo que forma uma parte independente de um documento ou site, por exemplo, um artigo de uma revista, uma entrada de um blog, um conteúdo fornecido via RSS, um post em um fórum, um comentário postado por um visitante, um conteúdo independente. article - HTML languagereference

  26. HTML5 – Novos elementos e atributos Elemento article <section>  <header>    <h1>The Very First Rule of Life</h1>    <p><time pubdatedatetime="2009-10-09T14:28-08:00"></time></p>  </header>  <p>If there's a microphone anywhere near you.</p>  <p>...</p>  <section>    <h1>Comments</h1>    <article>      <footer>        <p>Posted by: George Washington</p>        <p><time pubdatedatetime="2009-10-10T19:10-08:00"></time></p>      </footer>     <p>Yeah! Especially when talking about your!</p>    </article>   </section>  </section> article - HTML language reference

  27. HTML5 – Novos elementos e atributos Elemento section • Marca , genericamente, uma seção na página, geralmente com um título ou cabeçalho; • Entende-se seção como um grupo lógico de conteúdos tratando de um mesmo tema; section - HTML languagereference

  28. HTML5 – Novos elementos e atributos Elemento section <section><header> <h1>Visãodaempresa</h1> </header> <p>A empresaemumavisão de mundo ...</p></section> section - HTML languagereference

  29. HTML5 – Novos elementos e atributos Elemento aside • Marca um conteúdo que faz referência ao conteúdo principal que o cerca, exibindo, por exemplos, informações contextuais sobre o conteúdo principal. • Em documentos para impressão, pode ser formatado como uma nota de rodapé, por exemplo. <section> <header> <h1>Inter Campeão de tudo</h1> </header> <p>O Internacional de Porto Alegre se sagrou ...</p> <aside> <h2>Você sabia ?</h2> <p>O primeiro título colorado foi conquistado...</p> </aside> </section> aside- HTML languagereference

  30. HTML5 Novos atributos

  31. HTML5 – Novos elementos e atributos Novos atributos para formulários autofocus <input type=“text” name=“login” autofocus> placeholder < input type=“text” name=” pesquisa” placeholder=”Search here ”> required <input type=“text ” name=”login” required> pattern <input type=“text” name=” CEP ” required pattern=”\d{5}-\d{3}” />

  32. HTML5 – Novos elementos e atributos Novos atributos para formulários • Novo atributoformparaelementoscomo input, select e textarea; • Permitemqueoscontrolessejamassociados a um formulário; • Os controlesnãoprecisam ser descendentes do elemento form. • <label for=“email”> •     Email: <input type=“email” form=“foo” name=“email”>  • </label>  • <form id=“foo”></form>

  33. HTML5 – Novos elementos e atributos Novos valores para o atributo type • tel - Telefone • search – Um campo de busca • email – Email com formatação e validação • url – Um endereço web, também com formatação e validação • datetime • date • month • week • time • number • range • color <input type="email" name="email" /> Customvalidators

  34. HTML5 – Novos elementos e atributos Novos atributos para formulários • Atributonovalidate • <formaction="demo_form.php" novalidate>E-mail: <input type="email" name="user_email">  <input type="submit"></form> • Atributoformaction • <formaction="demo_form.php">Firstname: <input type="text" name="fname"><br>Lastname: <input type="text" name="lname"><br>  <input type="submit" value="Submit"><br>  <input type="submit" formaction="demo.php“ value="Submit"></form>

  35. HTML5 SUPORTE DOS NAVEGADORES E EXTRATÉGIAS DE USO

  36. Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 • Teste de compatibilidade dos browsers: • html5test.com

  37. Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 • Problemas de compatibilidade com IE Chrome – 64,6%no Brasil IE10 – 6,85%no Brasil IE8 – 3,67%no Brasil IE9 – 3,21%no Brasil

  38. Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 • Problemas de compatibilidade com IE

  39. Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 • HTML5 no Internet Explorer • HTML5 apresenta novos elementos; • IE8 e anteriores não aplicam regras CSS a elementos desconhecidos; • CSS: header{height:150px; background-color:#cccccc;} • <!--[if lte IE 8]> • <script> • document.createElement("header"); • </script> • <![endif]-->

  40. Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 • HTML5 no Internet Explorer • Script desenvolvido por Remy Sharp: • <!--[if lte IE 8]> • <script src=“http://html5shim.googlecode.com/svn/trunk/html5.js"> • </script> • <![endif]-->

  41. Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 • caniuse.com Pesquisa sobre suporte ao HTML5, CSS3, SVG, novas APIsJavaScript

  42. Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 • Biblioteca JavaScript Modernizr • Biblioteca JavaScript para detectar o suporte nativo dos navegadores; • Detecta suporte ao HTML5 e CSS3; • Habilita elementos HTML5 em versões antigas do IE para estilização; • Constantemente atualizada, disponível em www.modernizr.com; • <script src="js/modernizr-2.5.3.js"></script> • if(Modernizr.video){ • // script para uso do elemento video • } else { // }

  43. Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 • Biblioteca JavaScript Modernizr • Para o CSS3, a biblioteca Modernizr detecta o suporte CSS do navegador e adiciona valores ao atributo class da tag <html>. A biblioteca Modernizr vai acrescentardinamicamente valores ao atributo class da tag html de acordo com as funcionalidadessuportadas e não suportadaspelonavegador: <htmlclass="js borderradius no-boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections ... .borderradius #content { border: 1px solid #141414; border-radius: 12px; } .no-borderradius #content { border: 1px solid #ccc; }

  44. Suporte dos navegadores e estratégias de uso Compatibilidade da HTML5 • HTML5 Boilerplate • Templatefront-end que acompanha marcação HTML5, CSS Resets, Javascript (Modernizr), script que compatibiliza o documento HTML5 em browser desatualizados, CSS media queries (páginas responsivas), estilos para impressão, acompanha Biblioteca Jquery, script Google Analytics, arquivos configuração Apache, entre outros. html5boilerplate.com

  45. HTML5 Suporte IDEs

  46. Suporte IDEs Netbeans • Suporte ao HTML5 criando novos projetos HTML5 utilizando templates populares, Live Preview (integração com Google Chrome) e suporte a Responsive Web Design.

  47. Suporte IDEs Aptana Studio (Eclipse)

  48. Suporte IDEs Google Web Designer

  49. HTML5 MathML e SVG

  50. HTML5 incorpora o MathML; • MathML é umalinguagem de marcaçãobaseadaem XML pararepresentação de fórmulasmatemáticas; • Bastaescrever o códigoMathML no documento HTML5; HTML5 + MathML http://www.w3.org/Math/

More Related