Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5?

2,505 views

Published on

Apresentação de Tiago Oliveira, na primeira edição das Active Sessions, da Active Media, sobre HTML5.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5?

  1. 1. HTML5? Tiago Oliveira
  2. 2. HTML ? <ul><ul><li>H yper T ext M arkup L anguage </li></ul></ul><ul><ul><li>Linguagem de markup </li></ul></ul><ul><ul><li>HyTime + SGML </li></ul></ul><ul><ul><li>Desenvolvido pela World Wide Web Consortium </li></ul></ul><ul><ul><li>Cria documentos com dados hierarquicamente organizados </li></ul></ul>
  3. 3. Estrutura básica <ul><li><!DOCTYPE html> <html lang=&quot;pt&quot;>    <head>       <title> Título do Documento </title>    </head>    <body>       <div id=&quot;content&quot;> </li></ul><ul><li>            <h1> Título </h1> </li></ul><ul><li>            <p class=&quot;highlight&quot;> Lorem Ipsum is simply dummy <br /> text of the printing and typesetting industry. </p> </li></ul><ul><li>      </div> </li></ul><ul><li>   </body> </html> </li></ul>
  4. 4. Limitações do HTML 4.01 <ul><ul><li>Necessário recorrer a linguagens de programação (PHP, ASP, Javascript, FLASH, Silverlight, etc) para dinamizar o trabalho </li></ul></ul><ul><ul><li>Tem 9 anos </li></ul></ul><ul><ul><li>Visualização de videos apenas é possivel com plugin extra </li></ul></ul>
  5. 5. Novidades do HTML 5? <ul><ul><li>Structural elements </li></ul></ul><ul><ul><li>Inline elements </li></ul></ul><ul><ul><li><canvas>,<video> & <audio>   </li></ul></ul><ul><ul><li>Context menu </li></ul></ul><ul><ul><li>Tipos de input nos <form> </li></ul></ul><ul><ul><li>Removidos alguns elementos </li></ul></ul><ul><ul><li>Character encoding syntax   </li></ul></ul><ul><ul><li>Interactive elements   </li></ul></ul><ul><ul><li>DTD   </li></ul></ul><ul><ul><li>href opcional no <a> </li></ul></ul><ul><ul><li>async </li></ul></ul><ul><ul><li>PUT e DELETE nos <form> </li></ul></ul><ul><ul><li>Local storage </li></ul></ul>
  6. 6. Novos elementos (structural) <ul><ul><li>Foram criados novos elementos para definir conteúdos específicos do documento: </li></ul></ul><ul><ul><ul><li><section> - Uma secção de texto </li></ul></ul></ul><ul><ul><ul><li><header> - Permite substituir o id=&quot;header&quot;. Diferente de <head> </li></ul></ul></ul><ul><ul><ul><li><footer> - Zona com informações no &quot;rodapé&quot; </li></ul></ul></ul><ul><ul><ul><li><nav> - Menu </li></ul></ul></ul><ul><ul><ul><li><article> - Um artigo de um blog poderá ser delimitado com esta tag </li></ul></ul></ul><ul><ul><ul><li><aside> - Informação extra relativamente a um texto </li></ul></ul></ul><ul><ul><ul><li><figure> - Pode ser utilizado para adicionar um titulo a gráficos e videos </li></ul></ul></ul>
  7. 7. Esquema lógico de uma página
  8. 8. Novos elementos (inline) <ul><ul><li>Estes novos elementos inline ajudam a indicar conteúdos específicos como horas ou números: </li></ul></ul><ul><ul><ul><li><mark> - Permite indicar que uma parte do texto está marcada por alguma razão. Numa página de resultados de uma pesquisa, por exemplo </li></ul></ul></ul><ul><ul><ul><li><time> - Representar horas ou datas </li></ul></ul></ul><ul><ul><ul><li><progress> - Indicar o progresso de algo </li></ul></ul></ul><ul><ul><ul><li><meter> - Define uma medição </li></ul></ul></ul>
  9. 9. Elemento <canvas> <ul><ul><li>Permite criar uma área de desenho, na qual podemos desenhar desde simples figuras geométricas até imagens complexas, como bitmaps </li></ul></ul><ul><ul><li>O conteúdo da tag <canvas> é criado através de javascript <canvas id=&quot;CanvasTag&quot; width=&quot;100&quot; height=&quot;100&quot;> [Content that is shown to users using browsers that don't support the canvas tag] </canvas> </li></ul></ul>
  10. 10. Elementos <video> e <audio> <ul><ul><li>Permite simplificar a inclusão de videos ou audio </li></ul></ul><ul><ul><li>Dispensa a utilização de plugins extra para este tipo de conteúdos <video src=&quot;movie.ogg&quot; controls=&quot;controls&quot;> your browser does not support the video tag </video> </li></ul></ul>
  11. 11. Form input types <ul><ul><li>datetime </li></ul></ul><ul><ul><li>datetime-local </li></ul></ul><ul><ul><li>date </li></ul></ul><ul><ul><li>month </li></ul></ul><ul><ul><li>week  </li></ul></ul><ul><ul><li>time </li></ul></ul><ul><ul><li>number </li></ul></ul><ul><ul><li>range </li></ul></ul><ul><ul><li>email </li></ul></ul><ul><ul><li>url </li></ul></ul><form action=&quot;&quot; method=&quot;get&quot;>  <p><label>Search: <input name=search type=&quot;text&quot; id=&quot;search&quot;></label></p>  <script> document.getElementById('search').focus() </script>  <!-- the rest of the form --> </form> <form>  <p><label>Search: <input name=search autofocus></label></p>   <!-- the rest of the form --> </form>
  12. 12. Elementos removidos <ul><ul><li>onym </li></ul></ul><ul><ul><li>applet </li></ul></ul><ul><ul><li>basefont </li></ul></ul><ul><ul><li>big </li></ul></ul><ul><ul><li>center </li></ul></ul><ul><ul><li>dir </li></ul></ul><ul><ul><li>font </li></ul></ul><ul><ul><li>frame </li></ul></ul><ul><ul><li>frameset </li></ul></ul><ul><ul><li>isindex </li></ul></ul><ul><ul><li>noframes </li></ul></ul><ul><ul><li>noscript </li></ul></ul><ul><ul><li>s </li></ul></ul><ul><ul><li>strike </li></ul></ul><ul><ul><li>tt </li></ul></ul><ul><ul><li>u </li></ul></ul>
  13. 13. Simplicidade <ul><ul><li>Character encoding syntax </li></ul></ul><ul><li><meta charset=&quot;UTF-8&quot;> </li></ul><ul><ul><li>DTD </li></ul></ul><ul><li><!doctype html> </li></ul><ul><ul><li>Optional href on links Útil em aplicações web </li></ul></ul><ul><ul><li>O atributo async Define que um bloco de scripts pode ser executado simultaneamente </li></ul></ul>
  14. 14. Geolocalização, Storage & Offline <ul><ul><li>Geolocalização Permite saber a localização do utilizador e desta forma disponibilizar conteúdos específicos para o local </li></ul></ul><ul><ul><li>Local storage Funciona mais ou menos como os cookies mas permite armazenar maior quantidade de informações </li></ul></ul><ul><ul><li>Offline Permite utilizar uma página em modo offline. Muito útil para aplicações Web </li></ul></ul>
  15. 15. Exemplos de HTML5 <ul><li>  </li></ul><ul><ul><li>http://mugtug.com/sketchpad/ </li></ul></ul><ul><ul><li>http://html5demos.com/ </li></ul></ul><ul><ul><li>http://www.sapo.pt/ </li></ul></ul>

×