9. HTML5 - elearning@estgoh

Transcrição

Programação para Internet I
9. HTML5
Nuno Miguel Gil Fonseca
[email protected]
HTML5
Resumidamente, é o novo standard para estruturar
conteúdo de páginas web.
A última versão de HTML surgiu em 1999, e como
bem sabemos, a Internet mudou consideravelmente
de lá para cá, pelo que surgiu a necessidade de criar
uma nova linguagem que melhor se adapte às novas
necessidades dos utilizadores.
É o resultado do trabalho de duas organizações
distintas:
World Wide Web Consortium (W3C) que estava a trabalhar
na próxima versão do XHTML (XHTML 2)
Web Hypertext Application Technology Working Group
(WHATWG) que estava a trabalhar no HTML5.
(c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I
2
HTML5
Em 2006, as duas organizações reuniram esforços e
passaram ambas a trabalhar numa só especificação:
HTML5.
Muito embora ainda não tenha sido aprovada a
versão final pelo W3C, a verdade é que muitos
browsers já suportam algumas partes…
… o que constitui um grave problema!
3
HTML5
Principais alterações face à versão anterior:
A primeira diferença diz respeito ao DOCTYPE, que passa a
ser apenas:
<!DOCTYPE html>
A estrutura base de um documento HTML5 é:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="ISO-8859-1">
<title>Exemplo</title>
</head>
<body>
<p>Exemplo em HTML5</p>
</body>
</html>
4
HTML5
Os elementos “vaziam” não necessitam de ser fechados
(embora possam continuar a ser)
<br>
OK!
<br />
OK!
Passa a ser possível utilizar atributos “reduzidos”
<input type="text" name="nome" required="true">
OK!
<input type="text" name="nome" required>
OK!
Resumindo… tudo o que tinha deixado de ser possível fazer
aquando da passagem de HTML
XHTML, passa a ser
possível! No entanto, pode continuar a escrever código
HTML5 como se XHTML se tratasse (o chamado XHTML5).
5
HTML5
Surgimento de novos elementos (tags)
<header> - definição de cabeçalhos de páginas ou artigos
<footer> - definição de rodapés de páginas ou artigos
<article> - definição de artigos
<aside> - definição de conteúdo lateral (mas relacionado!) ao
principal
<figure> - para definição de uma zona com figura(s)
<figcaption> - para inserir uma legenda numa zona de figuras
definida pela tag figure
<figure>
<img src="img1.png" alt="Sol">
<img src="img2.png" alt="Lua">
<figcaption>Imagens do sol e da lua</figcaption>
</figure>
6
HTML5
<hgroup> - Para definição headings <h1>-<h6>
<hgroup>
<h1>Capítulo</h1>
<h2>Sub-Capítulo</h2>
</hgroup>
<mark> - Para texto que deva surgir destacado
<nav> - para definição de zonas de “menu”
<section> - para definição de secções dentro de um documento (ex.
capítulos, cabeçalhos, rodapés, etc.)
<time> - para definição de datas/horas
<wbr> - permite especificar onde é pertinente que uma palavra seja
“partida” em caso de mudança de linha
<p> Se tiver que mudar de linha, parte-me por aqui:
in<wbr>cons<wbr>ti<wbr>tu<wbr>cio<wbr>nal.</p>
7
HTML5
Outras
<command>, <details>, <summary>, <meter>, <progress>
8
HTML5
Novos atributos para os elementos de formulário
Required
<input type="text" name="nome" required="true">
Definição de padrões para os dados aceites (pattern)
<input type="text" pattern="[0-9][A-Z]{3}"
Z]{3}"
name="qualquercoisa" required >
9
HTML5
Novos atributos para os elementos de formulário
Utilização de listas de valores possíveis
<input type="text" name="cores" list="listadecores">
<datalist id="listadecores">
<option value="Red">
<option value="Greeen">
<option value="Blue">
</datalist>
Outros
autocomplete, autofocus, form, formaction, formenctype,
formmethod, formnovalidate, formtarget, height, width, multiple,
placeholder
10
HTML5
Novos elementos de formulário
<keygen>, <output>
Novos tipos de campos de formulário (input type="xxxx")
tel, search, url, email, datetime, date, month, week,
datetime-local, number, range, color
Mais informações: http://demos.w3avenue.com/html5-unleashed-tips-tricks-andtechniques/sample-03-form-enhancements.html
11
HTML5
Passa a ser possível editar o conteúdo em praticamente
todo o lado…
<div id="caixote" contenteditable="true">
Texto, texto, bla bla bla
</div>
12
HTML5
Desaparecimento de algumas tags:
<acronym>, <applet>, <basefont>, <big>, <center>,
<dir>, <font>, <frame>, <frameset>, <noframes>, <s>,
<strike>, <tt>, <u> e <xmp>
13
HTML5
Vídeo em HTML5
Uma das funcionalidades mais utilizadas e faladas do
HTML5, diz respeito ao surgimento da tag video que
permite incluir videos nas páginas sem necessitar de
recorrer a plug-ins externos, principalmente Flash.
Actualmente são (parcialmente) suportados dois formatos
de vídeo distintos
Ogg - Thedora video codec and Vorbis audio codec
MPEG 4 - H.264 video codec and AAC audio codec
No entanto e como acontece com muitas outras
funcionalidades de HTML5, ainda não existe suporte para
todos os browsers/formatos, Com o andar do tempo, esse
suporte vai chegando!
14
HTML5
Vídeo em HTML5
Inserir vídeo numa página
<video src="filme.ogg" controls="controls"></video>
Versão mais avançada
<video width="320" height="240" controls="controls">
<source src="filme.ogg" type="video/ogg" />
<source src="filme.mp4" type="video/mp4" />
Lamentamos, mas o seu browser ainda não suporta a tag video.
</video>
15
HTML5
Áudio em HTML5
Passa também a ser possível inserir áudio nas páginas web
sem recorrer a plug-ins.
Para já os formatos (parcialmente) suportados são:
MP3
Ogg Vorbis
Wav
Para inserir áudio numa página:
<audio controls="controls">
<source src="musiquinha.ogg" type="audio/ogg" />
<source src="musiquinha.mp3" type="audio/mpeg" />
Lamentamos, mas o seu browser ainda não suporta a tag audio.
</audio>
16
HTML5
O elemento Canvas
Este novo elemento, assume as funções de uma tela em
branco que pode ser “pintada” como bem pretendermos
utilizando JavaScript.
<canvas id="aMinhaTela" width="200" height="100"></canvas>
É possível desenhar as mais diversas formas geométricas…
<script type="text/javascript">
var tela = document.getElementById("aMinhaTela");
var p = tela.getContext("2d");
// Código específico para desenhar
</script>
17
HTML5
O elemento Canvas (cont.)
Exemplos:
Rectângulo
...
p.fillStyle="#FF0000";
p.fillRect(0,0,150,75);
...
Linhas rectas
...
p.moveTo(10,10);
p.lineTo(150,50);
p.lineTo(10,50);
p.stroke();
...
18
HTML5
O elemento Canvas (cont.)
Exemplos:
Circulo
...
p.fillStyle="#FF0000";
p.beginPath();
p.arc(70,18,15,0,Math.PI*2,true);
p.closePath();
p.fill();
...
Inserir uma imagem
...
var imagem=new Image()
imagem.src="logo_estgoh.png"
p.drawImage(img,0,0);
...
19
HTML5
Web storage
Com o HTML5 são introduzidas duas novas formas de
guardar informação no cliente para além das cookies.
localStorage – Não há validade temporal associado aos dados
localStorage.oMeuNome="Nuno";
alert(localStorage.oMeuNome);
</script>
sessionStorage – Os dados apenas estão disponíveis para a sessão em
que foram criados
sessionStorage.oMeuNome="Nuno";
alert(sessionStorage.oMeuNome);
</script>
20
HTML5
Web storage (cont.)
Para além da utilização simples como foi apresentada no
slide anterior, é possível utilizar o objecto Storage e deste
modo aceder a métodos mais avançados.
clear()
getItem(“XXX”)
removeItem(“XXX”)
setItem(“chave”, “valor”)
…
Mais informações:
http://msdn.microsoft.com/en-us/library/cc197062(v=vs.85).aspx
http://hacks.mozilla.org/2009/06/localstorage/
http://dev.w3.org/html5/webstorage/
21
HTML5
Mais informações
http://www.w3schools.com/html5/
http://www.w3avenue.com/2010/05/07/html5-unleashedtips-tricks-and-techniques/
http://en.wikipedia.org/wiki/HTML5
22

9. HTML5 - elearning@estgoh

Transcrição

Documentos relacionados

SUPER BANNER

PONTE DE LIMA - 25 E 26 DE JUNHO DE 2011

ICC008 - IComp

Programação de Jogos para Web

4.3. Video - elearning@estgoh

Aol Advertising. Microsoft Flip

Baixar - Unipar

Diapositivo 1

Joakim Carrilho Programador Web

Lista Final - Agrupamento de Escolas Conde de Oeiras