Curso de Desenvolvimento de Sistemas Web - (X)HTML

UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA
CURSO DE CIÊNCIA DA COMPUTAÇÃO
DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1
Fábio M. Pereira
(fmourapereira@yahoo.com.br)

Roteiro
• Hello World!
• As Especificações HTML e XHTML
• Estrutura de Um Documento (X)HTML
• As Regras de (X)HTML
• HTML 4 x HTML5
• Adicionando Semântica
• Esforço de Mídia Aberta de HTML5
• Gráficos do Lado Cliente
• Mudanças em Formulários HTML5
• Elementos e Atributos para Aplicações Web

Hello World!
• HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>Hello HTML 4 World</title>

</head>
<body>
<h1>Welcome to the World of HTML</h1>
<hr>
<p>HTML <em>really</em> isn't so hard!</p>
<p>Soon you will &hearts; using HTML.</p>
<p>You can put lots of text here if you want.
We could go on and on with fake text for you
to read, but let's get back to the book.</p>
</body>
</html>

Hello World!
• HTML5:
<!DOCTYPE html>
<html>
<head>
charset=utf-8">
<title>Hello HTML5 World</title>

</head>
<body>
<h1>Welcome to the World of HTML5</h1>
<hr>
</body>
</html>

Hello World!
• XHTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
charset=utf-8“ />
<title>Hello XHTML World</title>

</head>
<body>
<h1>Welcome to the World of XHTML</h1>
<hr />
<p>XHTML <em>really</em> isn't so hard!</p>
<p>Soon you will &hearts; using XHTML too.</p>
<p>There are some differences between XHTML
and HTML but with some precise markup you'll
see such differences are easily addressed.</p>
</body>
</html>

Hello World!
• Os exemplos utilizam algumas características dos
elementos mais comuns em (X)HTML, incluindo:
– A instrução <!DOCTYPE> que indica a versão do HTML e XHTML
que está sendo usada no documento
– As tags <html>, <head> e <body> usadas para especificar a
estrutura geral do documento
• A inclusão do atributo xmlns é necessária na tag <html> e é uma
pequena diferença do XHTML
– A tag <meta> que indica o tipo MIME (troca de mensagens) e
conjunto de caracteres usados
• Note que no exemplo XHTML, o elemento tem uma barra no final para
indicar que é um elemento vazio
– O par de tags <title> e </title> especificam o título do
documento que aparece geralmente na barra de títulos do
navegador Web

Hello World!
• Continuação:
– Comentários são especificados com 
– O par de tags <h1> e </h1> indicam uma linha de cabeçalho
especificando alguma informação importante
– A tag <hr>, em XHTML <hr />, insere uma linha horizontal ou
barra através da tela
– As tags <p> e </p> indicam um parágrafo de texto
– Um caractere especial é inserido usando uma entidade com
nome (&hearts;) – um coração
– O par de tags <em> e </em> são colocadas em torno de
pequenas partes de texto para enfatização, geralmente com
itálico

As Especificações HTML e XHTML
• Todos os documentos (X)HTML devem seguir uma
estrutura formal definida pelo W3C (World Wide Web
Consortium)
• Tradicionalmente, o W3C definiu HTML como uma
aplicação do SGML (Standard Generalized Markup
Language)
– Uma tecnologia usada para definir linguagens de marcação
através da especificação da estrutura permitida de um
documento na forma de um DTD (document type definition)
– Um DTD indica a sintaxe que poder ser utilizada para os vários
elementos de uma linguagem como a HTML
• Em 1999, o W3C reescreveu HTML como uma aplicação
de XML chamada XHTML
– XML, neste caso, tem o mesmo propósito de SGML

Estrutura de Um Documento (X)HTML
• Um modelo básico de um documento pode ser derivado
da especificação do HTML 4.01 DTD:

• A estrutura de um documento XHTML é muito parecida:

• Tanto em HTML como em XHTML (mas não em HTML5),
podemos substituir a tag <body> pela tag <frameset>,
que permite a inclusão de várias tags <frame>,
correspondentes a partes individuais da janela do
navegador, chamadas de frames

O Cabeçalho do Documento
• A informação no elemento head de um documento
(X)HTML é muito importante por ser usada para
descrever ou aumentar o conteúdo do documento
• Em muitos casos, o elemento head possui informação
sobre a página que é útil para o estilo visual, definição de
interatividade, atribuição do título da página e fornecer
outra informação útil para descrever ou controlar o
documento

O Elemento title
• Um único elemento title é requerido no elemento head
e usado para atribuir o texto mostrado pela maioria dos
navegadores na barra de títulos
• Também é utilizado pelo sistema de histórico de
navegação, gravado quando uma página é marcada, e
consultado por robôs de máquinas de busca para
determinar o significado da página
• Em resumo, é muito importante ter um título de página
sintaticamente correto, descritivo e apropriado
• Quando não especificado, a maioria dos navegadores
mostram a URL da página ou o nome do arquivo na barra
de título

O Elemento title
• Um título pode conter texto padrão, linguagem de
marcação não é interpretada, entretanto entidades de
caracteres como © (ou alternativamente ©),
que especifica um símbolo de copyright, são permitidos
– Para que seja mostrada de maneira correta, é necessário se
certificar de que o conjunto apropriado de caracteres está
definido e de que o navegador dá suporte aos caracteres
– Caso contrário poderemos ver caixas ou outros símbolos no
título
• Para atribuir o conjunto de caracteres apropriados,
devemos incluir a tag <meta> antes do título da página

Outros Elementos no Cabeçalho
• Em adição aos elementos title e head, nos DTDs HTML
4.01 e XHTML 1.0, os elementos permitidos dentro do
elemento head incluem base, link, object, script e
style
– Comentários também são permitidos
• <base>
– Especifica um endereço URL absoluto que é usado para indicar
informação de servidor e pasta para endereços URL
especificados parcialmente, chamados de links relativos, usados
dentro do documento
<base href="http://htmlref.com/baseexample" >

• <link>
– Especifica um relacionamento especial entre o documento
corrente e outro documento
– Geralmente é utilizado para especificar a planilha de estilos
usada pelo documento
<link rel="stylesheet" media="screen"
href="global.css" type="text/css" >
– Embora possua uma quantidade de outros possíveis usos
interessantes como atribuir relacionamentos de navegação e
avisar ao navegador sobre conteúdo pré-carregado

• <object>
– Permite que programas e outros objetos binários sejam
diretamente embutidos em uma página Web
– Por exemplo, um objeto Flash não visível está sendo
referenciado para algum uso:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="0" height="0" id="HiddenFlash" >
<param name="movie" value="flashlib.swf" />
</object>
– Existem várias tecnologias que podem ser utilizadas, como
applets Java, plug-ins e controles ActiveX

• <script>
– Permite que código de uma linguagem de script seja
diretamente embutido
<script type="text/javascript">
alert("Hi from JavaScript!");
/* more code below */
</script>
– Ou, de forma mais apropriada, chamada a partir de uma página
Web:
<script type="text/javascript"
href="ajaxtcr.js"></script>
– Quase sempre a linguagem JavaScript é utilizada, embora outras
linguagem como VBScript também sejam permitidas

• <style>
– Usada para inclusão de especificações de estilo do documento,
tipicamente no formato CSS, relacionados a fontes, cores,
posicionamento e outros aspectos de apresentação do
conteúdo
<style type="text/css" media="screen">
h1 {font-size: xx-large; color: red;
font-style: italic;}
/* h1 elements render as big, red and italic */
</style>

• Comentários
– Seguindo o formato SGML, um comentário inicia com <!– e
termina com --> e pode incluir várias linhas

Sintaxe Completa do Elemento head

Exemplo de Documento XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Head Element</title>

<meta name="keywords" content="Fake, Head Example, HTML Ref" />
<meta name="description" content="A simple head example that shows
a number of the elements presented in action." />
<meta name="author" content="Thomas A. Powell" />

<base href="http://htmlref.com/baseexample" />

Exemplo de Documento XHTML
…

<link rel="stylesheet" href="screen.css"
media="screen" />
<link rel="stylesheet" href="printer.css“
media="print" />
<style type="text/css">

</style>
…


</script>
<script src="ajaxtcr.js" type="text/javascript">
</script>
<script src="effects.js" type="text/javascript">
</script>
</head>
<body>
<p>Some body content here.</p>
</body>
</html>

O Corpo do Documento
• Após a seção de cabeçalho, o corpo de um documento é
delimitado por <body> e </body>
• Apesar de ser um elemento opcional, sempre devemos
incluí-lo
• Apenas um elemento body pode aparecer no documento
• Dentro do corpo de um documento Web está uma
variedade de tipos de elementos
– Por exemplo, elementos de nível de bloco que definem blocos
de conteúdo estrutural como parágrafos (p) ou cabeçalhos (h1 –
h6)
– Formas especiais de blocos, como listas não ordenadas (ul),
podem ser usadas para criar listas de informações

O Corpo do Documento
• Dentro de blocos não vazios, são encontrados elementos
internos
– Existem vários elementos internos, como negrito (b), itálico (i),
forte (strong), ênfase (em) e vários outros
• Em outros tipos de elementos são incluídos aqueles que
referenciam outros objetos, como imagens (img) ou
elementos interativos (object)
• Podemos ainda incluir elementos textuais e comentários

Navegadores e (X)HTML
• Quando um navegador lê um documento, como o exemplo a
seguir, ele constrói uma árvore para interpretar a estrutura do
documento
• Estas árvores, também chamada de árvores DOM (Document
Object Model), são a interpretação do navegador do código
fornecido e são integrais para determinar como construir a
página visualmente usando tanto o estilo padrão X(HTML)
como qualquer CSS anexado
• JavaScript também utilizará esta árvore quando tentar
manipular o documento
• Ela serve como o esqueleto da página, portanto a garantia de
sua corretude é muito importante, mas muitas vezes
negligenciada

Exemplo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello HTML World</title>

</head>
<body>
<h1>Welcome to the World of HTML</h1>
<hr>
</body>
</html>

As Regras de (X)HTML
• HTML não é sensível à caixa, XHTML é
– Os exemplos a seguir são equivalentes em HTML tradicional,
mas XHTML requer minúsculas
<B>Go boldly</B> <B>Go boldly</b>
<b>Go boldly</B> <b>Go boldly</b>
• Atributos podem ser sensíveis à caixa
– Considerando <img SRC="test.gif"> e <IMG
src="test.gif">, em HTML tradicional, elas são equivalentes,
embora em XHTML devam sempre estar em minúsculas
– Considerando os valores dos atributos, em <img
src="test.gif"> e <img src="TEST.GIF">, caso o servidor
seja Windows, onde nomes de arquivos não são sensíveis à
caixa, se referem ao mesmo arquivo, mas caso o servidor seja
baseado no UNIX, podem se referir a arquivos diferentes

• (X)HTML é sensível à caracteres de espaço únicos
– Quaisquer espaços em branco entre caracteres são mostrados
como um único espaço
– Isto inclui tabulações, quebras de linhas e retornos de carro
<strong>T e s t o f s p a c e s</strong><br>
<strong>T e s t o f s p a c e s </strong><br>
<strong>T
e s
t o f s p a c e s</strong><br>
– Irá resultar em
T e s t o f s p a c e s
– Caso mais espaços sejam necessários, é possível utilizar a
entidade  

• (X)HTML Segue um Modelo de Conteúdo
– Especifica que certos elementos somente ocorrem dentro de
outros elementos
<ul>
<p>What a simple way to break the content model!</p>
</ul>
– O exemplo acima não segue o modelo de conteúdo da
especificação (X)HTML: a tag <ul> deveria conter apenas tags
<li>, a tag <p> não é apropriada neste contexto
– Em alguns navegadores a tag <input> encontrada fora de uma
tag <form> é simplesmente ignorada, não sendo mostrada, já
em outros sim

• Elementos devem possuir tags de fechamento, a não ser
que sejam vazias
– Em HTML, alguns elementos possuem tags de fechamento
opcional, assim, os exemplos abaixo são permitidos, embora o
segundo seja melhor:
<p>This isn't closed
<p>This is</p>
– Entretanto, o fechamento do primeiro parágrafo é inferido uma
vez que segundo o modelo de conteúdo não é permitido uma
tag <p> dentro de outra
– Em XHTML devemos sempre fechar as tags, assim devemos
escrever <br></br> ou, mais comumente, usar o formato com
um caractere “/” no final, como em <br />

• Elementos devem estar aninhados
– E não cruzados, assim
<b><i>is in error as tags cross</b></i>
– Está incorreto, enquanto
<b><i>is not since tags nest</i></b>
– Está em sua sintaxe correta
• Atributos devem estar entre aspas
– Embora em HTML atributos simples não precisem estar entre aspas
(conteúdo alfanumérico, traços e pontos), a falta das aspas pode levar
a confusão, além do uso ser obrigatório em XHTML
– Evite
<img src=robot.gif height=10 width=10 alt=robot>
– Use
<img src="robot.gif" height="10" width="10"
alt="robot" />

HTML 4 x HTML5
• HTML5 removeu vários elementos e atributos, muitos
deles foram removidos por serem mais de apresentação
do que de semântica
– Por exemplo, <small> continua sendo permitido, mas <big>
está obsoleto
– A ideia é preservar o elemento, mas mudar o significado:
<small> não corresponde mais ao texto com fonte reduzida,
similar a <font size=“-1”>, mas tem a intenção de
representar o uso de textos pequenos, como em notas legais e
de rodapé

Elementos Redefinidos em HTML5

Outros Elementos Removidos em
HTML5

Novos Elementos HTML5
• Para muitos autores de páginas Web, a inclusão de novos
elementos é o aspecto mais interessante de HTML5
• Alguns desses elementos ainda não possuem suporte,
mas muitos navegadores já estão implementando os mais
interessantes, como audio e video

Atributos Chave Adicionados Por
HTML5

Atributos-Chave Adicionados Por
HTML5

Mudanças na Estrutura do Documento
HTML5
• Documentos HTML5 podem conter um elemento
header, usado para definir a seção de cabeçalho de um
documento e que contém os elementos padrões h1 a h6
<header>
<h1>Welcome to the Future World of HTML5.</h1>
<h2>Don't be scared it isn't that hard!</h2>
</header>
• De maneira similar, o elemento footer é fornecido para
definir o conteúdo do rodapé de um documento, que
geralmente contém navegação, informação legal e de
contato
<footer>
<p>Content of this example is not under copyright</p>
</footer>

Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML5 header and footer example</title>
</head>
<body>
<header>
<h1>Welcome to the Future World of HTML5.</h1>
<h2>Don't be scared it isn't that hard!</h2>
</header>
<p>Some body content here.</p>
<p>Some more body content here.</p>
<footer>
<p>Content of this example is not under copyright.</p>
</footer>
</body>
</html>

Elemento section
• O elemento estrutural HTML5 com mais possibilidades de
uso é o elemento section
• Uma tag <section> pode ser usada para agrupar
conteúdo arbitrário e pode conter outras tags <section>
para criar a ideia de subseções

Exemplo
<section>
<h1>Chapter 2</h1>
<p>New HTML5 elements.</p>
<section>
<h2>HTML5's section Element</h2>
<p>These elements are useful to create outlines.</p>
<section>
<h3>Nest Away!</h3>
<p>Nest your sections but as you nest you might
want to indent.</p>
</section>
</section>
<p>Ok that's enough of that.</p>
</section>

Elemento section
• Um elemento section pode conter elementos header e
footer
<section>
<header>
<h1>I am Section Heading</h1>
</header>
<h2>I am outside the section header I'm just a
plain headline.</h2>
<p>Some more section content might go here.</p>
<footer>
<p>Hi from the footer of this section.</p>
</footer>
</section>

section x div
• De acordo com a semântica, elementos de seção HTML5 não
são apenas uma formalização de tags <div> com valores de
class apropriados
• Equivalente utilizando div:
<div class="header">

</div>
<div class="section">
<div class="header">
<h2>Section Heading</h2>
</div>
<p>Content of section.</p>
</div>
<div class="footer">

</div>

Elemento article
• HTML5 introduz uma série de elementos estruturais
• O elemento article é usado para definir uma unidade
discreta de conteúdo como em um post de um blog,
comentário, artigo, etc.
• A ideia por traz da de definição destas unidades de
conteúdo discretas é a possibilidade de extração
automática
• Um outro elemento novo em HTML5 é o elemento
aside, que pode ser usado com conteúdo que
representa material que é tangencial ou, como o nome
sugere, colocado à parte ou de lado

Elementos Semânticos
• Muitos dos elementos adicionados por HTML5 são
semânticos por natureza
• Desta maneira, HTML5 continua com seu objetivo de
separar estrutura de estilo
• A princípio não veremos muito valor nestes elementos a
não ser adicionar significado
– Posteriormente veremos como torná-los legíveis para a maioria
dos navegadores e como aplicar estilos simples para usuários
finais

Marcando Texto
• O novo elemento HTML5 mark foi introduzido para
destacar conteúdo similarmente a uma caneta que marca
partes importantes de um texto em um livro
• Exemplo:
<p>Here comes <mark>marked text</mark> was it
obvious?</p>
• A seguir apresentamos um exemplo com estilos
“internos” apenas para mostrar a ideia
• Observação:
– Por que não utilizar uma tag <span> ou <em>?
– Novamente, semântica é o elemento chave – isto torna o
significado dos documentos HTML mais óbvio

Indicando Datas e Tempo
• time é um outro elemento semântico de HTML5 usado
para indicar conteúdo que é uma data, hora ou ambos
• Exemplos:
<p>Today it is <time>2009-07-08</time> which is an
interesting date.</p>
<p>An interesting date/time for SciFi buffs is
<time>1999-09-13T09:15:00</time>!</p>
• O elemento deve conter um valor de data/hora no
formato YYYY-MM-DDThh:mm:ssTZD, onde
– YYYY-MM-DD correspondem a ano, mês e dia
– T é a letra ‘T’
– hh:mm:ss correspondem a hora, minutos e segundos
– ZD corresponde ao designador de zona de tempo

Indicando Datas e Tempo
• Para utilizar um formato que possa ser processado
facilmente por uma máquina, o atributo datetime é
fornecido:
<p>My first son was born on <time datetime="2006-
01-13">Friday the 13th</time> so it is my new lucky
day.</p>

Inserindo Figuras
• Sempre é necessário incluir imagens, gráficos e outros
objetos que contém textos e imagens em documentos
Web, todos eles normalmente chamados de figuras
• HTML5 introduziu o elemento figure
<figure id="fig1">
<dd>
<img src="figure.png" height="100" width="100“
alt="A screen capture of the figure element
in action">
<p>This mighty <figure> tag has returned
from HTML 3 to haunt your dreams.</p>
</dd>
<dt>Figure Ex-1</dt>
</figure>

Especificando Navegação
• Um novo elemento HTML5 com propósito de encapsular um grupo
de links que serve como uma coleção de links para outros sites,
navegação no documento ou navegação no site, é o elemento nav:
<nav>
<h2>Offsite Links</h2>
<a href="http://www.w3c.org">W3C</a><br>
<a href="http://www.htmlref.com">Book site</a><br>
<a href="http://www.pint.com">Author's Firm</a><br>
</nav>
...
<nav id="mainNav">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="index.html">Home</a></li>
</ul>
</nav>

Esforço de Mídia Aberta de HTML5
• Um aspecto interessante de HTML5 que vem de esforço
anterior da Netscape e da Microsoft é o suporte a
multimídia baseada em tags em documentos HTML
• Tradicionalmente, multimídia tem sido inserida com os
elementos embed e object, particularmente quando
inserimos Adobe Flash, Apple QuickTime, Windows
Media e outros formatos
• Entretanto, ouve um tempo em que eram suportadas
tags específicas para inserção de mídia
– Interessante que algumas dessas características, como o
atributo dynsrc para tags <img>, continuam até hoje
• HTML5 trouxe de volta o conceito de multimídia baseada
em tags

<video>
• Para inserir um vídeo utilizamos a tag <video> e seu
atributo src para uma URL local ou remota contendo um
filme
• Também podemos mostrar controles de playback
incluindo o atributo controls, bem como ajustar as
dimensões do filme
<video src="http://htmlref.com/ch2/html_5.mp4"
width="640" height="360" controls>
<strong>HTML5 video element not supported
</strong>
</video>

<video>
• Com seu formato de vídeo aberto, HTML5 trouxe de volta
a loucura de codec de suporte de mídia, resolvida por
Flash
• Podemos diminuir o problema fornecendo formatos
alternativos, incluindo uma série de tags <source>
<video width="640" height="360" controls
poster="loading.png">
<source src="html_5.mp4" type="video/mp4">
<source src="html_5.ogv" type="video/ogg">
<strong>HTML5 video element not supported
</strong>
</video>

<video>
• Note o atributo poster, usado para mostrar uma
imagem no local do objeto para o caso de demora na
carga
• Um outro atributo, autobuffer, pode ser usado para
avisar ao navegador para carregar o conteúdo de mídia
em background, a fim de melhorar a reprodução
• O atributo autoplay fará com que a reprodução inicie
assim que for possível

<audio>
• O elemento audio de HTML5 e muito similar ao
elemento video
• O elemento deve dar suporte a formato de sons comuns
como a arquivos WAV:
<audio src="http://htmlref.com/ch2/music.wav">
</audio>
• Desta maneira, o elemento audio se parece com o
elemento proprietário do Internet Explorer bgsound:
<audio>
<bgsound src="http://htmlref.com/ch2/music.wav">
</audio>

<audio>
• Se desejarmos que o usuário controle a execução do
som, se não utilizarmos o JavaScript para controlar isto,
podemos mostrar controles com o mesmo o atributo de
mesmo nome (controls)
– A depender do navegador, a aparência destes controles pode
mudar
<audio src="http://htmlref.com/ch2/music.wav"
controls></audio>
• Assim como no elemento video, também existem os
atributos autobuffer e autoplay

<audio>
• Da mesma forma, podemos especificar diferentes
formatos usando tags source:
<audio controls autobuffer autoplay>
<source src="http://htmlref.com/ch2/music.ogg"
type="audio/ogg">
<source src="http://htmlref.com/ch2/music.wav"
type="audio/wav">
</audio>

Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML5 audio examples</title>
</head>
<body>
<h1>Simple Audio Examples</h1>
<h2>wav Format</h2>
<audio src="http://htmlref.com/ch2/music.wav" controls></audio>
<h2>ogg Format</h2>
<audio src="http://htmlref.com/ch2/music.ogg" controls></audio>
<h2>Multiple Formats and Fallback</h2>
<audio controls autobuffer autoplay>
<source src="http://htmlref.com/ch2/music.ogg" type="audio/ogg">
<source src="http://htmlref.com/ch2/music.wav" type="audio/wav">

</audio>
</body>
</html>

Gráficos do Lado Cliente
• O elemento canvas é usado para renderizar gráficos
simples como linhas, gráficos e outros elementos gráficos
customizados do lado cliente
• Do ponto de vista de linguagem de marcação, a pouco
que podemos fazer com uma tag <canvas>
– Apenas colocamos elementos em uma página, atribuímos um
nome com o atributo id, e definimos as suas dimensões com os
atributos height e width
<canvas id="canvas" width="300" height="300">
<strong>Canvas Supporting Browser Required</strong>
</canvas>
• Note o conteúdo alternativo colocado dentro do
elemento para navegadores que não dão suporte ao
elemento

• Após colocarmos a tag <canvas> em um documento, o
próximo passo é usar JavaScript para acessar e desenhar
no elemento
• O exemplo a seguir captura o objeto por seu valor id e
cria um contexto para desenho em duas dimensões:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
• Uma vez que tenhamos o contexto para desenho,
podemos empregar vários métodos para desenhar nele
• Por exemplo, um retângulo azul com tamanho 150x50
pixels, iniciando nas coordenadas 10,10:
context.strokeStyle = "blue";
context.strokeRect(10,10,150,50);

• De maneira similar, podemos usar o método
fillRect(x,y,width,height) para criar um retângulo
sólido:
context.fillRect(150,30,75,75);
• Por padrão, a cor de preenchimento é preta, mas
podemos definir uma cor diferente usando o método
fillColor():
context.fillStyle = "rgb(218,0,0)";
• Podemos também usar funções de cores em CSS:
context.fillStyle = "rgba(218,112,214,0.4)";

<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas example</title>
window.onload = function() {
context.strokeStyle = "orange";
context.strokeRect(10,10,150,50);
context.fillStyle = "rgba(218,0,0,0.4)";
}
</script>
</head>
<body>
<h1>Simple Canvas Examples</h1>
</canvas>
</body>
</html>

Desenhando Linhas e Formas
• HTML5 define uma API completa para desenhar em um
elemento canvas, composta de muitas sub-APIs para tarefas
comuns
• Por exemplo, para fazer formas mais complexas, a API path
pode ser usada
– Ela armazena uma coleção de subpaths, formada por várias funções
de formas e conecta os subpaths via chamadas a fill() ou
stroke()
– Para iniciar um caminho, context.beginPath() é chamada
– Em seguida, qualquer variedade de chamadas de formas pode ocorrer
para adicionar um subpath à coleção
– Uma vez que todos subpaths foram adicionados,
context.closePath() pode opcionalmente ser chamada para
fechar o laço
– Então fill() ou stroke() também irão mostrar o path como
uma nova forma criada

Exemplo
• O exemplo a seguir desenha uma forma em V usando
lineTo():
context.beginPath();
context.lineTo(20,100);
context.stroke();
• Se adicionarmos context.closePath() antes de
context.stroke(), então a forma em V se tornaria um
triângulo, conectando o último ponto ao primeiro
• Da mesma forma, chamando fill() em vez de
stroke(), o triângulo iria ser preenchido
– Podemos chamar os dois em qualquer forma para termos uma
linha em torno de uma região preenchida

Exemplo
• Para mudar o estilo do desenho, podemos especificar
fillStyle e strokeStyle, e também definir a largura
da linha com lineWidth:
context.fillStyle = "red";
context.lineWidth = 10;
context.closePath();
context.stroke();
context.fill();

Exemplo
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas lines and shapes example</title>
window.onload = function() {

context.stroke();
context.fill();
...

Exemplo
...

var lg = context.createLinearGradient(10, 150, 200, 200);
lg.addColorStop(0, "#B03060");
lg.addColorStop(0.5, "#4169E1");
lg.addColorStop(1, "#FFE4E1");
context.fillStyle = lg;
context.rect (10, 150, 200, 200);
context.fill();
...

Exemplo
...

var rg = context.createRadialGradient(50,50,10,60,60,50);
rg.addColorStop(0, "#A7D30C");
rg.addColorStop(0.9, "#019F62");
rg.addColorStop(1, "rgba(1,159,98,0)");
context.fillStyle = rg;
...

Exemplo
...

context.stroke();
}
</script>
</head>
<body>
<h1>Simple Shapes on canvas Example</h1>
</canvas>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canvas Cube Example</title>
<style type="text/css" media="screen">
body {background-color: #E67B34;}
</style>
<script type="text/javascript" src="excanvas.js"></script>
window.onload = function(){
var context = document.getElementById("canvas").getContext("2d");
context.fillStyle = "#fff";
context.strokeStyle = "black";
context.moveTo(188, 38);
context.lineTo(59, 124);
context.fill();
context.stroke();
...

...
context.fillStyle = "#ccc";
context.fill();
context.stroke();
context.fillStyle = "#999";
context.fill();
context.stroke();
}
...

...
</script>
</head>
<body>
<h1>Canvas Perspective</h1>
</canvas>
</body>
</html>

Desenhando Arcos e Curvas
• É possível criar linhas curvas usando arc(), arcTo(),
quadraticCurveTo() e bezierCurveTo()
• Podermos usar o método arc(x,y, radius,
startAngle, endAngle, counterclockwise)
para desenhar círculos ou partes de círculos
– A sua localização é determinada pelo ponto do seu centro (x,y)
bem como pelos seu raio (radius)
– O quanto deve ser desenhado é definido pelo ângulo inicial
(startAngle) e final (endAngle) em radianos
– A direção da curva é determinada por um valor booleano
(counterclockwise): se true, sentido anti-horário; caso contrário,
sentido horário
• Para desenhar um círculo completo:
context.arc(150,150,100,0,Math.PI*2,true);

• O método quadraticCurveTo(cpx, cpy, x, y) inicia
no último ponto no path e desenha uma linha até (x, y)
– Os pontos de controle (cpx, cpy) é usada para puxar a linha
nesta direção, resultando em uma linha curvada
– Devemos chamar moveTo() inicialmente, para determinar o
último ponto do path
– No exemplo a seguir, a linha é desenhada de (155,130) até
(155,155), como as coordenadas do ponto de controle
(130,145) são à esquerda e no centro, a linha é puxada nesta
direção
context.moveTo(155,130);
context.quadraticCurveTo(130,145,155,155);

• O método bezierCurveTo(cp1x, cp1y, cp2x, cp2y,
x, y) é similar a quadraticCurveTo() exceto pelo fato
de possuir dois pontos de controle e a linha ser puxada para
ambos:
context.bezierCurveTo(95,85,115,85,130,110);
• Utilize arcTo(x1, y1, x2, y2, radius) para criar duas
linhas e um arco com o raio especificado, contendo um ponto
de tangência entre cada uma das linhas
– A primeira linha é desenhada a partir do último ponto até (x1, y1)
– A segunda linha é desenhada a partir de (x1, y1) até (x2, y2)
context.arcTo(280,20,280,280,30);
context.arcTo(280,280,20,280,30);
context.arcTo(20,280,20,20,30);
context.arcTo(20,20,280,20,30);

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Canvas Face Example</title>
<script type="text/javascript" src="excanvas.js"></script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
/* create a frame for our drawing */
context.fillStyle = "blue";
context.arcTo(280, 20, 280, 280, 30);
context.arcTo(280, 280, 20, 280, 30);
context.arcTo(20, 280, 20, 20, 30);
context.arcTo(20, 20, 280, 20, 30);
context.stroke();
context.fill();
...

...
/* draw circle for head */
context.fillStyle = "yellow";
context.arc(150,150,100,0,Math.PI*2,true);
context.fill();
/* draw the eyes, nose and mouth */
context.bezierCurveTo(95, 85, 115, 85, 130, 110);
context.bezierCurveTo(185, 85, 205, 85, 220, 110);
context.quadraticCurveTo(130, 145, 155, 155);
context.quadraticCurveTo(150, 250, 200, 175);
context.stroke();
}
</script>
</head>
...

...
<body>
<h1>Smile you're on canvas</h1>
</canvas>
</body>
</html>

Escala, Rotação e Transformação
• scale(x,y) – usada para mudar a escala de objetos
– O parâmetro x determina a escala na direção horizontal
– O parâmetro y determina a escala na direção vertical
/* scale tall and thin */
context.scale(.5,1.5);
writeBoxes(context);
/* move short and wide */
context.scale(1.75,.2);

...
/* draw original boxes */
/* reset canvas and context */
canvas = document.getElementById("canvas2");
context = canvas.getContext("2d");
/* scale tall and thin */
context.scale(.5, 1.5);
/* move short and wide */
context.scale(1.75, .2);
}
...

...
function writeBoxes(context){
context.fillStyle = "rgba(166,42,42,.4)";
context.fillRect (0, 0, 100, 100);
}
</script>
...

• rotate(angle) – usado para rotacionar um desenho na
direção horária por um ângulo definido em radianos:
/* rotate to the right */
context.rotate(Math.PI/8);
/* rotate to the left */
context.rotate(-Math.PI/8);

...
/* rotate to the right */
context.rotate(Math.PI/8);
/* rotate to the left */
context.rotate(-Math.PI/8);
}
...

• translate(x,y) – modifica a origem de (0,0) para uma
outra localização no desenho
– O exemplo a seguir modifica a origem para (100,100)
– Assim, quando as coordenadas iniciais do retângulo são
especificadas em (0,0), na verdade é iniciada em (100,100)
context.translate(100,100);

...
/* translate to the bottom right */
context.translate(100, 100);
/* move a bit off top left */
context.translate(-20, -10);
}

• setTransform(m11,m12,m21,m22,dx,dy) – modifica a
matriz identidade com os parâmetros dados

...
context.rect (0, 0, 100, 100);
context.fill();
context.setTransform(1, 1, 1 ,0, 0, 0);
context.rect (75, 75, 100, 100);
context.fill();
context.setTransform(0, .5, 1 ,.8, 0, 0);
context.rect (50, 50, 100, 100);
context.fill();
}
</script>
...

Utilizando Bitmaps em Desenhos
• Uma característica muito interessante de canvas é a
habilidade para inserir imagens em desenhos
• Existem várias maneiras de fazer isso, a mais básica,
drawImage(img, x, y), recebe um objeto de imagem e
as coordenadas onde a imagem será colocada em seu
tamanho natural
– Podemos usar drawImage(img,x,y,w,h) se quisermos modificar o
tamanho da imagem, atribuindo o comprimento (w) e a altura (h)
• A imagem passada como parâmetro pode vir de vários locais:
– Uma imagem já carregada na página
– Dinamicamente criada através do DOM
– Um outro objeto canvas
– Uma imagem criada atribuindo-se seu src para uma variável (URL)

• É importante lembrar que a imagem deve ser carregada a
tempo do canvas estar pronto para acessá-la
– Isto querer o uso da função onload para a imagem
var img = new Image();
img.onload = function(){
context.drawImage(img,0,0,400,400);
}
img.src = "dog.jpg";

• drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) pode ser
chamada para que parte da imagem seja removida e
desenhada no canvas
– As coordenadas (sx, sy) representam a localização na imagem
– sw e sh são o comprimento e a altura, respectivamente
– Os restos dos parâmetros (d?), são os mesmos do formato
anterior
var img = document.getElementById("image1");
/* slices a 100px square from image1 at location (200,75)
Places on the canvas at (50,50) and stretches it to 300px
square. */
context.drawImage(img,200,75,100,100,50,50,300,300);

• Uma vez que a imagem esteja no canvas, é possível
desenhar sobre ela
• O exemplo a seguir carrega uma imagem e desenha uma
região em preparação para eventualmente adicionar uma
legenda

...
context.fillStyle = "orange";
context.rect(50,340,300,50);
context.fill();
context.stroke();
}
}
</script>
...

Suporte de Texto para canvas
• Podemos escrever texto usando fillText(text,x,y
[,maxWidth]) ou strokeText(text,x,y
[,maxWidth])
– Ambas as funções recebem um parâmetro final opcional, maxWidth,
que irá cortar o texto se seu comprimento for maior que o
especificado
• Tanto fillText() como strokeText() serão utilizados
para mostrar uma linha ao redor do texto
• No exemplo a seguir utilizamos uma cor de preenchimento
azul com uma linha preta ao redor das letras:
context.fillStyle = "rgb(0,0,255)";
context.strokeStyle = "rgb(0,0,0)";
context.fillText("Canvas is great!",10,40);
context.strokeText("Canvas is great!",10,40);

• Para um texto mais customizado, podemos usar a
propriedade font, da mesma forma que em CSS
• Podemos usar textAlign e textBaseline para atribuir
o alinhamento horizontal e vertical do texto
– textAlign tem como valores possíveis: start, end, left,
right e center
– textBaseline tem como valores possíveis: top, hanging,
middle, alphabetic, ideographic e bottom
context.font = "bold 30px sans-serif";
context.textAlign = "center";
context.textBaseline = "middle";

• Podemos adicionar sombras a formas simplesmente
atribuindo as propriedades de sombra shadowOffsetX,
shadowOffsetY, shadowBlur, e shadowColor
– Os valores de offset simplesmente indicam a distância da sombra da
imagem: números positivos faz com que a sombra apareça a direita e
abaixo, números negativos faz com que a sombra apareça a esquerda
e acima
– A propriedade shadowBlur indica o quão embaçada a sombra será
– A propriedade shadowColor indica a cor da sombra
context.shadowOffsetX = 10;
context.shadowOffsetY = 5;
context.shadowColor = "rgba(255,48,48,0.5)";
context.shadowBlur = 5;

...
context.fillStyle = "orange";
context.rect(50,340,300,50);
context.fill();
context.stroke();
...

...
context.font = '40px sans-serif';
context.fillStyle = "white";
context.fillText("Canvas is great!", 60, 375);
context.shadowOffsetX = 10;
context.shadowOffsetY = 5;
context.shadowColor = "rgba(0, 48, 48, 0.5)";
context.shadowBlur = 5;
context.strokeText("Canvas is great!", 60, 375);
}
}
</script>
...

Novos Tipos de Campos de Formulários
• Tradicionalmente, o elemento input de HTML é usado
para definir a maioria dos campos de formulários
– O tipo em particular do campo de interesse é definido pelo
atributo type, o qual é atribuído text, password, hidden,
checkbox, radio, submit, reset, image ou button
• HTML5 adiciona vários outros valores que serão vistos
aqui

Seletor de Cor
• Atribuindo type igual a color deverá criar um seletor de
cores
<p><label>color:<input type="color" name="favColor">
</label></p>

Seletores de Data e Hora
• Uma variedade de controles de data podem ser
diretamente criados através do atributo type:
– date
– datetime
– datetime-local
– month
– week
– time
• Isto deveria restringir a escolha de datas, mas qualquer
restrição também pode ser feita através de script

Seletores de Data e Hora
<p><label>date:
<input type="date" name="date"></label></p>
<p><label>datetime:
<input type="datetime" name="datetime"></label></p>
<p><label>datetime-local:
<input type="datetime-local" name="datetime2">
</label></p>
<p><label>time:
<input type="time" name="time"></label></p>
<p><label>month:
<input type="month" name="month"></label></p>
<p><label>week:
<input type="week" name="week"></label></p>

Seletor de Números
• Atribuindo a type o valor number, mostra uma spin box
de valor numérico
<p><label>number:<input type="number"
name="number"></label></p>
• Sem restrição, a spin box não imporá limites, embora seja
possível definir valores permitidos
– Utilize os atributos max, min, ou ainda step (salto)
<input type="number" name="number2" min="-5"
max="25" step="5">

Slider
• Um controle similar a number pode ser criado com range:
<input type="range" name="range" max="100" min="1"
step="5">
• Da mesma forma que number, os atributos min, max e step
podem ser usados para limitar valores:
<p><label>range (1-100 step 5):
<input type="range" name="range" max="100" min="1"
step="5">
</label></p>
<p><label>range (-1000-1000 step 100):
<input type="range" name="range" max="1000" min="-
1000" step="100">
</label></p>

Outras Restrições Semânticas
• Conseguidas atribuindo tel, email ou url ao atributo
type da tag <input>:
<p><label>Telephone Number: <input type="tel"
name="telno"></label></p>
<p><label>Email: <input type="email" name="email">
</label></p>
<p><label>URL: <input type="url" name="url">
</label></p>
• Observação:
– Não implementada pelo Google Chrome
– Apenas email e url atualmente implementadas pelo Mozilla
Firefox

• Também é possível atribuir a type o valor search, que
pode eventualmente ter uma lista associada
• Atualmente, alguns navegadores fornecem alguns
controles para limpar o campo de busca:
<p><label>Search: <input type="search"
name="search"></label></p>

Validando a Entrada de Dados
• Podemos forçar a entrada de dados, sem recorrer a
JavaScript, em navegadores compatíveis, atribuindo o
atributo required para um controle de formulário:
<input type="text" name="firstname" id="firstname"
required>
– Não implementado no Google Chrome

• O atributo pattern pode ser empregado para forçar a
entrada de dados conforme uma expressão regular
fornecida
<label for="phonenum" class="required">Phone
Number:</label>
<input type="text" name="phonenum" id="phonenum"
required pattern="^(d{2}) d{4}-d{4}$">

• Se title é especificado quando pattern é aplicado, o
navegador pode mostrar uma informação de advertência:
<label for="phonenum" class="required">Phone
Number:</label>
<input type="text" name="phonenum" id="phonenum"
required pattern="^(d{2}) d{4}-d{4}$"
title="Phone number of form (xx) xxxx-xxxx
required">

• Em alguns casos, além de aplicar o padrão (pattern)
podemos também atribuir o tipo de valor semântico
apropriado, como em email
– Nesse caso não sabemos como o navegador irá se comportar
– No caso do Mozilla Firefox prevaleceu o tipo e não o padrão
<label for="email" class="required">E-mail:</label>
<input type="text" name="email" id="email" required
pattern="^w+([.-]?w+)*@w+([.-
]?w+)*.(w{2}|(com|net|org|edu|int|mil|gov|arpa|
biz|aero|name|coop|info|pro|museum))$" title="E-
mail format required">

Listas Autocompletar
• Em HTML5, o atributo list do elemento input é usado para
indicar ao DOM uma id para um elemento de lista de dados
(datalist) usado para fornecer uma listra predefinida de
opções sugeridas para a entrada do usuário:
<p><label>Favorite Dog: <input type="text"
list="dogs"></label></p>
<datalist id="dogs">
<option>Angus</option>
<option>Tucker</option>
<option>Cisco</option>
<option>Sabrina</option>
</datalist>
• Similar ao atributo autocomplete discutido adiante, mas
permite que especifiquemos dados padrões em vez do que foi
digitado anteriormente no navegador

Melhorias de Usabilidade
• É comum autores de páginas Web utilizarem o atributo
value para preencher com algum texto um campo de
formulário:
value="Thomas">
• Da mesma maneira, são colocados textos de aviso:
<input type="text" name="middlename"
id="middlename"value="Enter your middle name here">
– Entretanto, usar value desta maneira é inapropriado porque o
seu objetivo não é fornecer instruções sobre o uso do campo e
sim fornecer um valor potencial para o usuário submeter ao
servidor

Melhorias de Usabilidade
• HTML5 introduziu o atributo placeholder com essa
finalidade:
placeholder="Enter your name here">
• HTML5 também introduziu o atributo autofocus, que faz com
que o navegador imediatamente transfira o foco para o
campo quando a página é carregada:
<label>Search:<input type="search" name="query"
id="searchBox" autofocus></label>
• Também é possível avisar ao navegador para mostrar
sugestões de auto completar (autocomplete) fornecidas para
campos se nomes similares de campos foram usados no
passado:
placeholder="Enter your name here" autocomplete>

Elementos e Atributos para Aplicações
Web
• Um tema chave na especificação de HTML5 é a ênfase
em dar suporte ao desenvolvimento de aplicações Web
• Vários elementos e atributos foram introduzidos na
especificação para dar continuidade à migração de
páginas Web para aplicações Web
• Alguns dos elementos apresentados aqui, uma vez que
estas características ou ainda não são implementadas ou
são ainda controversas, podem ser considerados apenas
ilustrativos uma vez que mudanças em HTML podem
encorajá-los ou em alguns casos, modificá-los ou removê-
los
– Lembrando que uma biblioteca JavaScript possivelmente
poderá simular o seu uso

Novo Propósito do Elemento menu
• Tradicionalmente este elemento era usado para criar um
menu de escolhas simples, mas a maioria dos
navegadores simplesmente o renderizavam como uma
lista não ordenada:
<menu type="list" id="oldStyle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</menu>

• Em HTML5 o elemento menu retornou ao seu propósito
original
• Um novo atributo type foi introduzido e pode assumir os
valores toolbar, context ou list (o padrão)
• Este exemplo cria um menu File para uma aplicação Web:
<menu type="toolbar" id="fileMenu" label="File">
<li><a href="javascript:newItem();">New</a></li>
<li><a href="javascript:openItem();">Open</a></li>
<li><a href="javascript:closeItem();">Close</a></li>
<hr>
<li><a href="javascript:saveItem();">Save</a></li>
<li><a href="javascript:saveAsItem();">Save as...
</a></li>
<hr>
<li><a href="javascript:exitApp();">Exit</a></li>
</menu>

• Deveria renderizar...
• Mas...

• Da mesma forma, deveria ser possível a definição de um
menu de contexto, normalmente chamado por um clique
no botão direito:
<menu type="context" id="simpleMenu">
<li><a href="javascript:add();">Add</a></li>
<li><a href="javascript:edit();">Edit</a></li>
<li><a href="javascript:delete();">Delete</a></li>
</menu>
• Que deveria se parecer com:

• O atributo global contextmenu é usado para definir um
elemento com um menu de contexto
– O valor do atributo deve ser uma string que referencia o id de
uma tag <menu> existente no DOM
• Por exemplo,
<div contextmenu="simpleMenu">Widget</div>
– Deveria referenciar o menu previamente definido com id
simpleMenu

Elemento command
<menu type="command" label="Main Menu">
<command type="command" label="Add" icon="add.png">
<command type="command" label="Edit" icon="edit.png">
<command type="command" label="Delete" icon="delete.png">
<hr>
<menu type="command" label="Skin" id="skinMenu">
<command type="radio" radiogroup="skin" label="Classic">
<command type="radio" radiogroup="skin"
label="Modern" checked>
<command type="radio" radiogroup="skin" label="Neo">
</menu>
<hr>
<command type="checkbox" label="Secure Mode">
</menu>

Outros Elementos
• Outros elementos que foram introduzidos por HTML5
incluem:
– meter
– progress
– detail
– output

Atributo contenteditable
• Permite modificar o texto diretamente ao clicar no texto:
<p contenteditable="true">This paragraph of text is editable.
Click it and you will see. Of course there is no sense of saving
it with code to transmit the information to the server. This
paragraph of text is editable. Click it and you will see. Of
course there is no sense of saving it with code to transmit the
information to the server.</p>

Atributo contenteditable
• Modificando o estilo usando JavaScript para alterar a
nome da classe:
<p ondblclick="this.contentEditable=true;this.className='inEdit';"
onblur="this.contentEditable=false;this.className='';">This
paragraph uses some simple script to be editable. Double-click the
text to begin editing.</p>

Ainda Outros...
• Caso tenha interesse:
– Atributo spellcheck (correção de erros)
– Internacionalização
– Metadados (permitir/aprimorar processamento por máquina)
– Atributo defer (para melhorar renderização da página)
– ...

Curso de Desenvolvimento de Sistemas Web - (X)HTML

Curso de Desenvolvimento de Sistemas Web - (X)HTML

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados(20)

Destaque

Destaque(20)

Similar a Curso de Desenvolvimento de Sistemas Web - (X)HTML

Similar a Curso de Desenvolvimento de Sistemas Web - (X)HTML(20)

Mais de Fabio Moura Pereira

Mais de Fabio Moura Pereira(13)

Último

Último(11)

Curso de Desenvolvimento de Sistemas Web - (X)HTML