HTML5?

HTML5? Tiago Oliveira

HTML ?
H yper T ext M arkup L anguage
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>  </form> <form> <p><label>Search: <input name=search autofocus></label></p>  </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 async Define que um bloco de scripts pode ser executado simultaneamente

Geolocalização, Storage & Offline
Geolocalização Permite 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
Offline Permite 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/

http://www.activemedia.pt	151
http://blog.activemedia.pt	78
http://beyondthatbox.tumblr.com	10
http://www.slideshare.net	5
http://www.endlessworkinprogress.com	1
http://172.168.1.100	1

HTML5?

by Active Media

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 246

Statistics

HTML5? Presentation Transcript