0
HTML5? Tiago Oliveira
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...
Estrutura básica <ul><li><!DOCTYPE html> <html lang=&quot;pt&quot;>    <head>        <title> Título do Documento </title> ...
Limitações do HTML 4.01 <ul><ul><li>Necessário recorrer a  linguagens de programação  (PHP, ASP, Javascript, FLASH, Silver...
Novidades do HTML 5? <ul><ul><li>Structural elements </li></ul></ul><ul><ul><li>Inline elements </li></ul></ul><ul><ul><li...
Novos elementos (structural) <ul><ul><li>Foram criados novos elementos para definir conteúdos específicos do documento: </...
Esquema lógico de uma página
Novos elementos (inline) <ul><ul><li>Estes novos elementos inline ajudam a indicar conteúdos específicos como horas ou núm...
Elemento <canvas> <ul><ul><li>Permite criar uma área de desenho, na qual podemos desenhar desde simples figuras geométrica...
Elementos <video> e <audio> <ul><ul><li>Permite simplificar a inclusão de videos ou audio </li></ul></ul><ul><ul><li>Dispe...
Form input types <ul><ul><li>datetime </li></ul></ul><ul><ul><li>datetime-local </li></ul></ul><ul><ul><li>date </li></ul>...
Elementos removidos <ul><ul><li>onym </li></ul></ul><ul><ul><li>applet </li></ul></ul><ul><ul><li>basefont </li></ul></ul>...
Simplicidade <ul><ul><li>Character encoding syntax </li></ul></ul><ul><li><meta charset=&quot;UTF-8&quot;> </li></ul><ul><...
Geolocalização, Storage & Offline <ul><ul><li>Geolocalização Permite saber a localização do utilizador e desta forma dispo...
Exemplos de HTML5 <ul><li>  </li></ul><ul><ul><li>http://mugtug.com/sketchpad/ </li></ul></ul><ul><ul><li>http://html5demo...
Upcoming SlideShare
Loading in...5
×

HTML5?

2,183

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,183
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
54
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×