O documento descreve novos recursos para a Web, incluindo:
1. Desenhar gráficos no elemento <canvas> usando JavaScript;
2. Arrastar e soltar elementos da página com Drag and Drop;
3. Melhorias nos controles de formulários do HTML5.
2. Índice resumido
1. Desenhar com o elemento CANVAS
2. Drag and Drop
3. Controlos de Formulários
4. Edição Inline
5. Trabalhar com o Histórico do Browser
6. Troca de Mensagens entre Janelas
7. Uso de Vídeo e Áudio
8. Armazenamento de dados
3. 1 - O elemento CANVAS
O elemento CANVAS é usado para desenhar gráficos.
É criado com a seguinte instrução:
<canvas height=“xxx” width =“yyy”>
</canvas>
Para desenhar no canvas usa-se JavaScript.
Pode-se desenhar linhas, arcos, formas complexas,
texto, imagens, etc.
O W3C definiu uma API (Application Programming
Interface), onde definiu o nome das funções e como
devem ser usadas.
http://www.w3.org/TR/2dcontext/
4. CANVAS API
A API define atributos dos elementos e as funções em JavaScript.
É necessário atribuir alguns atributos antes de usar as funções de desenho.
Exemplo:
Canvas1.fillStyle = xxx;
Canvas1.fillRectangle(x,y,dx,dy);
Lista de atributos e funções:
Styling
• attribute any strokeStyle; // (default black)
• attribute any fillStyle; // (default black)
Line Styles
• attribute DOMString lineCap; // “butt”, “round”, “square” (default “butt”)
• attribute DOMString lineJoin; // “miter”, “round”, “bevel” ) (default “miter”)
• attribute float lineWidth; // (default 1)
• attribute float miterLimit; // (default 10)
7. Exemplo de uso de CANVAS
1. Criar um ficheiro canvas.html com um editor de texto. *
2. Escrever o seguinte código, para criar o Canvas e fazer o setup do JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>
Exemplo de Canvas
</title>
http://www.activestate.com/komodo-
<script type="text/javascript">
functionedit/downloads
loader()
{
}
</script>
</head>
<body onload="loader()">
<h1>Exemplo de Canvas</h1>
<canvas id="canvas" height="500" width="600">
</canvas>
</body>
</html>
•http://www.activestate.com/komodo-edit/downloads
Editor gratuito, com versões para Mac, Linux e Windows. Com Intellisense para HTML 5
8. 3. Adicionar o código JavaScript para criar um objecto do elemento Canvas
<script type="text/javascript">
function loader()
{
var canvas = document.getElementById('canvas');
var canvas1= canvas.getContext('2d');
}
</script>
4. Gravar o ficheiro no formato de texto.
5. Experimentar em vários Browsers.
9. Desenhar Rectângulos
6. Escrever o seguinte código para criar 3 rectângulos de diferentes cores
function loader()
{
var canvas = document.getElementById('canvas');
var canvas1= canvas.getContext('2d');
//Rectângulos
canvas1.fillStyle="rgba(0,0,200,1)"; //Côr Azul
canvas1.fillRect(30,30,75,70);
canvas1.fillStyle="rgb(200,200,0)";
canvas1.fillRect(70,50,55,70);
canvas1.fillStyle = "rgba(200, 0, 0, 1)";
canvas1.fillRect(90, 50, 75, 50);
}
7. Gravar e experimentar
16. 2 - Drag and Drop
Com o suporte de Drag and Drop, podemos deslocar elementos e texto pelo
browser, com o uso do rato ou outro dispositivo apontador.
Como exemplo, podemos deslocar itens para um cesto de compras;
configurar a nossa homepage; etc.
O Drag and Drop é suportado com a criação de novos atributos dos
elementos, como o atributo draggable que colocado a true permite a esse
elemento ser deslocado. No entanto todo o processamento é feito em
JavaScript.
A API para trabalhar com o Drag and Drop está definida em:
http://dev.w3.org/html5/spec/dnd.html
19. Colocar o atributo draggable nos elementos que se querem mover:
</head>
<body>
<h1>Drag and Drop Example</h1>
<div id="target1">
<div id="draggable1” draggable="true" >1
</div>
<div id="draggable2” draggable="true" >2
</div>
<div id="draggable3” draggable="true" >3
</div>
</div>
<div id="target2">
</div>
<div id="target3">
</div>
</body>
</html>
Experimentar em vários browsers
20. Colocar os atributos nos elementos de destino:
</head> ondragenter – evento que ocorre
<body>
<h1>Drag and Drop Example</h1> quando um elemento que está a ser
<div id="target1“ arrastado entra na área do elemento
ondragenter="return enter(event)"
ondragover="return over(event, this)"
ondrop="return drop(event)" > ondragover - evento que ocorre quando
</div> o elemento que está a ser arrastado está
<div id="target2“
ondragenter="return enter(event)" sobre o elemento
ondragover="return over(event,this)"
ondrop="return drop(event)" >
ondrop - evento que ocorre quando o
</div>
<div id="target3“ elemento é largado em cima do
ondragenter="return enter(event)" elemento
ondragover="return over(event,this)"
ondrop="return drop(event)" >
</div>
</body>
</html>
21. Colocar os atributos nos elementos a arrastar:
.
.
<div id="draggable1" draggable="true" ondragstart – evento que ocorre
ondragstart="return start(event)" quando o elemento draggable,
ondragend="return end(event)">1
</div>
começa a ser movimentado
<div id="draggable2" draggable="true“
ondragstart="return start(event)“ ondragend – evento que ocorre
ondragend="return end(event)">2 quando se larga o elemento
</div>
<div id="draggable3" draggable="true“
ondragstart="return start(event)“
ondragend="return end(event)">3
</div>
.
.
22. Implementar a função start()
.
.
<script type="text/javascript">
function start(e)
{
e.dataTransfer.effectedAllowed=“move”;
e.dataTransfer.setData("Data",e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
return true;
}
</script>
</head>
.
.
No parâmetro e define-se os dados que vão ser transmitidos, e o modo.
Neste caso vai executar um move, coloca, com setData, o id do elemento que
está a ser arrastado.
A função setDragImage, define a imagem a ser transferida, neste caso o
elemento a ser arrastado, e um offset, neste caso 0,0
23. Implementar a função enter()
.
.
<script type="text/javascript">
function enter(e)
{
return true;
}
</script>
</head>
.
.
25. Implementar a função drop()
<script type="text/javascript">
function drop(e)
{
var iddraggable=e.dataTransfer.getData("Data");
e.target.appendChild(document.getElementById(iddraggable));
e.stopPropagation();
return false;
}
</script>
</head>
Implementar a função end()
<script type="text/javascript">
function end(e)
{
e.dataTransfer.clearData("Data");
return true;
}
</script>
</head>
26. 3 - Controlos de Formulários
O HTML 5 introduziu novos tipos de controlos
para a introdução de dados num formulário.
Estes controlos estendem o controlo <input>,
acrescentando outro tipos aos já existentes (text,
radio,etc.).
http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html
27. Os controlos de formulário são criados com o elemento <input>, definindo
no atributo type, qual o tipo de controlo:
28. Criar um ficheiro webform.html, e escrever este código
<!DOCTYPE html>
<html>
<head>
<title>
Web Form Example
</title>
</head>
<body>
<h1>Web Form Example</h1>
<form method=“post” action=“webforms.php”>
<table border=“1” cellpadding=“5”>
.
.
.
</table>
<input type=“submit” value=“Submit”>
</form>
</body>
</html>
31. Introduzir os controlos de Data e Hora
<table border=“1” cellpadding=“5”>
<tr>
<td>Date</td><td><input name=“date” type=“date”></td>
</tr>
<tr>
<td>Week</td><td><input name=“week” type=“week”></td>
</tr>
<tr>
<td>Month</td><td><input name=“month” type=“month”></td>
</tr>
<tr>
<td>Time</td><td><input name=“time” type=“time”></td>
</tr>
<tr>
<td>Datetime</td><td><input name=“datetime”
type=“datetime”></td>
</tr>
<tr>
<td>Local Datetime</td><td><input name=“datetimelocal”
type=“datetime-local”></td>
</tr>
</table>
32. Introduzir o controlo Color
<table border=“1” cellpadding=“5”>
.
<tr>
<td>Color</td><td><input name=“color” type=“color”></td>
</tr>
</table>
Introduzir o controlo Search
<table border=“1” cellpadding=“5”>
.
<tr>
<td>Search Query</td><td><input name=“query”
type=“query”></td>
</tr>
</table>
33. Criar o ficheiro webforms.php, que vai atender à submissão do formulário
<html>
<head>
<title>
Reading data from datetime controls
</title>
</head>
<body>
<h1>
Lêr os dados do contolo Datetime
</h1>
Introduziu:
<?php
echo $_REQUEST['datetime'];
?>
</body>
</html>
34. 4 – Edição Inline
HTML5 especifica que se pode fazer elementos
editáveis, ou seja, permitir que o utilizador edite o
seu conteúdo.
Isso não quer dizer que estamos a falar de campos
de texto, mas sim qualquer tipo de elementos,
tais como o elemento <div>.
Além disso, podemos fazer um documento inteiro
editável, incluindo elemento <iframe>. Também
se pode fazer a verificação ortográfica do texto
introduzido.
35. Para usar a edição usa-se três atributos:
• contenteditable – torna um elemento HTML editável
• designmode – torna todo o documento editável
• spellcheck – activa o corrector ortográfico
Exemplo do uso do atribbuto contenteditable
Criar o ficheiro editdiv.html
<!DOCTYPE html>
<html>
<head>
<title>
Editable <div> Element
</title>
</head>
<body>
<h1>Editable <div> Element</h1>
.
.
</body>
</html>
36. Introduzir o seguinte div com o atributo contenteditable a true
<body>
<h1>Editable <div> Element</h1>
<br> .
<div id="div" style='border:solid black; height: 300px; width: 400px'
contenteditable="true“>
</div>
</body>
</html>
Introduzir o código para criar o botão Negrito e executar o comando ‘bold’
<body>
<h1>Editable <div> Element</h1>
<div>
<input type="button" value=“Negrito"
onclick="document.execCommand('bold', false, null);">
</div>
.
<br>
<div id="div" style='border:solid black; height: 300px; width: 400px'
contenteditable="true">
</div>
</body>
38. Introduzir as funções de JavaScript para os botões “Criar Link” e “Mostrar Source”
</title>
<script type="text/javascript">
function showSource()
{
var content = document.getElementById("div").innerHTML;
content.replace(/</g, '<');
content.replace(/>/g, '>');
alert(content);
}
function createLink()
{
var url = prompt("Enter URL:", "http://");
if (url)
document.execCommand("createlink", false, url);
}
</script>
39. 5 – Trabalhar com o Histórico do Browser
O HTML5 permite o controle sobre o histórico do
navegador. O objeto History, permite avançar e
retroceder, de página para página no navegador,
o que significa que se pode usá-lo por exemplo,
para voltar três páginas atrás.
Também se pode armazenar dados num objeto
de estado no history. Ou seja, pode-se adicionar
dados no objeto de estado e, em seguida, para
armazená-lo com a página atual. Os dados
guardados n o objeto de estado, pode ser
recuperado, o que permite passar dados de uma
página para outra.
40. O object history faz parte do objecto window, assim é referido window.history.
Atributos e funções definidas na API:
• window.history.length -> número de páginas no history
• window.history.back() -> vai para a página anterior
• window.history.forward() -> vai para a página seguinte
• window.history.go([delta]) -> vai para delta páginas para trás ou para a frente
• window.history.pushState(data, title [, url ] ) -> guarda dados no history
• window.history.replaceState(data, title [, url ] ) -> substitui os dados do history
• window.onpopstate -> evento que ocorre quando se obtem os dados do history
41. 6 – Troca de Mensagens entre Janelas
O HTML5 permite enviar mensagens
em cross-window ou cross-domain.
Por exemplo, na página A, a página B
aparece num <iframe>. Podemos enviar
mensagens de A para B. Isto é cross-
window.
Se a página B estiver hospedada num
outro servidor, isto é cross-domain, que
era proibido anteriormente.
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html
42. 7 – Uso de Vídeo e Áudio
HTML5 reproduz vídeos através do elemento <video>.
O formato de vídeo adoptado pelo w3c é o “Theora” (.ogg), pois é open-
source, e sem direitos de copyright. (condição para ser adoptado pelo w3c).
http://www.w3.org/TR/html5/the-iframe-
element.html#the-video-element
Exemplohttp://www.w3.org/2010/05/video/mediaevents.html
Para converter um outro formato para o formato .ogg, existem várias
aplicações, entre elas algumas gratuitas.
Exemplo: Miro Video Converter
43. Video API
Tem os seguintes atributos:
• autoplay – true ou false – toca automaticamente
• controls – coloca os botões de controlo do vídeo
• height – largura do vídeo
• loop – quando chega ao fim recomeça
• poster – o url de uma imagem, caso o vídeo não esteja disponível
• preload – none – não faz o preload do vídeo
- metadata – carrega a informação do vídeo(dimensões, 1º frame, etc.)
- auto – o browser decido o que fazer
• src – o url do vídeo
• width – a altura do vídeo
• onerror – o evento que dispara caso haja um erro no vídeo
www.w3.org/TR/html5/video.html
44. <!DOCTYPE html>
<html>
<head>
<title> HTML 5 Video
</title>
</head>
<body>
<h1>
HTML 5 Video
</h1>
<video width="360" height="240" autoplay="false" controls="true” loop>
<source src="video.mp4" type="video/mp4"/>
<source src="video.ogg" type="video/ogg"/>
<source src="video.webm" type="video/webm"/>
<p> Video cannot be displayed </p>
</video>
<audio src="L.A. Woman.theora.ogv" autoplay=true controls>
</body>
</html>
45. 8 – Armazenamento de dados
O html, não tem como guardar os dados entre vários acessos às página. Quando se
faz uma atualização à página, os dados de um formulário são apagados. Para dar a
volta a isso usa-se código de servidor.
Com a introduçaõ do HTML5, isso deixou de ser necessário.
Pode-se guardar os dados ou no servidor, na sessão iniciada pelo browser; ou no
próprio browser.
46. Trabalho Módulo 2
Elaborar um documento que explique como funcionam as seguintes
capacidades do HTML5:
-Trabalhar com o Histórico do Browser
-Troca de Mensagens entre Janelas
-Armazenamento de dados
Para cada uma delas, criar páginas de exemplos, que demonstrem
essas capacidades