html5?

of 15 /15
HTML5? Tiago Oliveira

Upload: active-media

Post on 01-Sep-2014

2.744 views

Category:

Technology


9 download

DESCRIPTION

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

TRANSCRIPT

Page 1: HTML5?

HTML5?Tiago Oliveira

Page 2: HTML5?

HTML ?

• HyperText Markup Language

• Linguagem de markup

• HyTime + SGML

• Desenvolvido pela World Wide Web Consortium

• Cria documentos com dados hierarquicamente organizados

Page 3: HTML5?

Estrutura básica

<!DOCTYPE html><html lang="pt">

   <head>      <title>Título do Documento</title>   </head>

   <body>

      <div id="content">            <h1>Título</h1>            <p class="highlight">Lorem Ipsum is simply dummy<br /> text of the printing and

typesetting industry.</p>      </div>

   </body>

</html>

Page 4: HTML5?

Limitações do HTML 4.01

• Necessário recorrer a linguagens de programação (PHP, ASP, Javascript, FLASH, Silverlight, etc) para dinamizar o trabalho

• Tem 9 anos

• Visualização de videos apenas é possivel com plugin extra

Page 5: HTML5?

Novidades do HTML 5?

• Structural elements• Inline elements• <canvas>,<video> & <audio>  • Context menu • Tipos de input nos <form>• Removidos alguns elementos• Character encoding syntax  • Interactive elements  • DTD  • href opcional no <a>• async • PUT e DELETE nos <form> • Local storage

Page 6: HTML5?

Novos elementos (structural)

Foram criados novos elementos para definir conteúdos específicos do documento:

<section> - Uma secção de texto <header> - Permite substituir o id="header". Diferente de

<head> <footer> - Zona com informações no "rodapé" <nav> - Menu <article> - Um artigo de um blog poderá ser delimitado com esta

tag <aside> - Informação extra relativamente a um texto <figure> - Pode ser utilizado para adicionar um titulo a gráficos

e videos

Page 7: HTML5?

Esquema lógico de uma página

Page 8: HTML5?

Novos elementos (inline)

Estes novos elementos inline ajudam a indicar conteúdos específicos como horas ou números:

<mark> - Permite indicar que uma parte do texto está marcada por alguma razão. Numa página de resultados de uma pesquisa, por exemplo

<time> - Representar horas ou datas

<progress> - Indicar o progresso de algo

<meter> - Define uma medição

Page 9: HTML5?

Elemento <canvas>

• Permite criar uma área de desenho, na qual podemos desenhar desde simples figuras geométricas até imagens complexas, como bitmaps

• O conteúdo da tag <canvas> é criado através de javascript

<canvas id="CanvasTag" width="100" height="100">[Content that is shown to users using browsers that don't support the canvas tag]</canvas>

Page 10: HTML5?

Elementos <video> e <audio>

• Permite simplificar a inclusão de videos ou audio

• Dispensa a utilização de plugins extra para este tipo de conteúdos

<video src="movie.ogg" controls="controls">your browser does not support the video tag</video>

Page 11: HTML5?

Form input types

• datetime• datetime-local• date• month• week 

• time• number• range• email• url

<form action="" method="get"> <p><label>Search: <input name=search type="text" id="search"></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>

Page 12: HTML5?

Elementos removidos

• onym• applet• basefont• big• center• dir• font• frame

• frameset• isindex• noframes• noscript• s• strike• tt• u

Page 13: HTML5?

Simplicidade

Character encoding syntax<meta charset="UTF-8">

DTD<!doctype html>

Optional href on linksÚtil em aplicações web

O atributo asyncDefine que um bloco de scripts pode ser executado simultaneamente

Page 14: HTML5?

Geolocalização, Storage & Offline

• GeolocalizaçãoPermite saber a localização do utilizador e desta forma disponibilizar conteúdos específicos para o local

• Local storage Funciona mais ou menos como os cookies mas permite armazenar maior quantidade de informações

• OfflinePermite utilizar uma página em modo offline. Muito útil para aplicações Web

Page 15: HTML5?

Exemplos de HTML5

 http://mugtug.com/sketchpad/

http://html5demos.com/

http://www.sapo.pt/