HTML5?

2.486 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
2.486
No SlideShare
0
A partir de incorporações
0
Número de incorporações
262
Ações
Compartilhamentos
0
Downloads
56
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

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>

×