html5?
DESCRIPTION
Apresentação de Tiago Oliveira, na primeira edição das Active Sessions, da Active Media, sobre HTML5.TRANSCRIPT
HTML5?Tiago Oliveira
HTML ?
• HyperText Markup Language
• Linguagem de markup
• HyTime + SGML
• Desenvolvido pela World Wide Web Consortium
• Cria documentos com dados hierarquicamente organizados
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>
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
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
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
Esquema lógico de uma página
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
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>
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>
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>
Elementos removidos
• onym• applet• basefont• big• center• dir• font• frame
• frameset• isindex• noframes• noscript• s• strike• tt• u
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
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
Exemplos de HTML5
http://mugtug.com/sketchpad/
http://html5demos.com/
http://www.sapo.pt/