JOGOS HTML5 Módulo 1

JOGOS HTML5
Módulo 1
Seja bem vindo ao curso de HTML da AprendaMais. Neste curso
você aprenderá como desenvolver para web com HTML, a
linguagem mais básica do desenvolvimento de páginas / sites para
a Internet.
No entanto, antes de começarmos com o HTML, para que você
possa se familiarizar com a linguagem, vamos falar um pouco sobre
o desenvolvimento Web. Se você já é familiarizado com o
desenvolvimento Web de uma forma geral, pode pular alguns dos
tópicos a seguir.
Desenvolvimento web
O WWW ou World Wide Web, é uma ferramenta de comunicação,
utilizada para publicação de informações na Internet. Se você ou
sua empresa ainda não estão na Internet, certamente vão querer
estar muito em breve, pois a Internet é a mais poderosa forma de
comunicação existente no mundo.
Uma página Web é um arquivo que é armazenado em um servidor
de dados (computador) e é recebido peloWeb Browser (software
navegador, como Internet Explorer, Firefox, Chrome, Opera, Safari,
etc). Se você chegou a este curso, certamente já viu várias páginas
na web, inclusive está lendo este conteúdo dentro de uma página
web, neste caso a AprendaMais, armazenada nos servidores da
AprendaMais. No entanto, o que você pode não ter notado, é que a
grande maioria destas páginas web utilizam-se doHTML ou sua
evoluções / derivados para exibir estas informações.
Por exemplo, você precisa criar uma apresentação para sua
empresa. Da mesma forma que faria no Power Point, por exemplo,
você agora vai criar uma apresentação, só que na web. Você quer
exibir o perfil da empresa na primeira página e os recursos/serviços
oferecidos na segunda e na terceira páginas. Para isto, você
primeiro deve criar três páginas web. Em seguida, você interliga
estas páginas. Juntas, as três páginas web formam uma
apresentação para sua empresa, ou se preferir chamar assim,
formam o website da sua empresa.
Para criação deste website, além de imagens e informações da
empresa, você precisa utilizar um linguagem que "traduza" ao web
browser (navegador, como Firefox, Internet Explorer, etc) o
conteúdo que você deseja exibir ao usuário, dando formas, cores,
locais, etc a estes conteúdos.
Antes de projetar uma página web, você deve definir seu propósito.
Você projeta a aparência e a funcionalidade da sua página,
baseando-se neste propósito.
Vamos supor que você quer projetar uma página que contenha
receitas diversas. Para isto, inicialmente, você deve projetar
páginas web que se pareçam com as páginas de um livro de
receitas, para que a navegação fique mais agradável.
Este projeto pode ser "rabiscado" à mão, pegue um lápis e um
papel e desenhe/projete sua página web.
As imagens abaixo mostram alguns exemplos destesprojetos /
rascunhos de websites:
Depois que você projetar a aparência das páginas, você precisa
decidir o conteúdo delas. O conteúdo é baseado no público-alvo.
Por exemplo, você não precisa ensinar receitas fáceis para chefes
de cozinha. Entretanto, se o seu público-alvo inclui pessoas
iniciantes na cozinha, você precisa também ter o conteúdo básico.
Navegando pela web, você já deve ter visto várias páginas, e deve
ter notado que estas páginas são compostas de vários elementos:
títulos, rótulos, links, textos, imagens, animações, etc.
Os títulos, rótulos, links e imagens são os elementos básicos de
uma página web. O design da sua página web está diretamente
ligado à forma como você vai utilizar estes elementos. A imagem
abaixo mostra alguns exemplos:
Títulos
Você deve especificar títulos para todas as páginas web que criar.
Os títulos ajudam os internautas a identificar uma página web, fazer
procuras mais precisas em um banco de dados, e, também, a
gerenciar as informações.
Rodapés
Você pode também, adicionar rodapés às sua páginas web para
fornecer informações adicionais para seus internautas. Usando
rodapés você pode exibir informações sobre o autor da página,
mensagens de copyright e links para outras páginas assim como a
imagem abaixo:
Tabelas
As tabelas são utilizadas, principalmente, para organizar a
apresentação das informações tabulares na página, o que torna a
leitura muito mais fácil e agradável.
Menus/Índices e links de navegação
Para que os internautas encontrem facilmente as páginas de seu
site, você deve adicionar menus e/ou links para esta navegação.
Existem vários tipos padrão de menus, apesar de não aconselhável,
você não precisa seguir estes padrões. Vamos falar um pouco mais
sobre este assunto em seguida, no tópico de organização de
conteúdo.
Outros elementos
Além dos títulos, rótulos, rodapés, tabelas, menus, etc, você pode
também adicionar imagens, áudio e vídeo à sua página web para
deixá-la mais atraente, mas é claro, com moderação e sem se
esquecer da usabilidade e acessibilidade.
Também é possível adicionar formulários à sua página web para
torná-la interativa. Assim, você pode receber comentários,
cadastros, etc de outros internautas.
Organizando o conteúdo
Como você observou, é possível adicionar imagens, links, tabelas,
etc para organizar a informação em cada página web de maneira
eficaz. Não importa qual a organização de sua página web e nem
como os elementos estão disponíveis, você deve sempre adicionar
um índice (ou se preferir, pode chamar de menu) para divulgar o
propósito de seu web site, bem como ajudar os usuários e motores
de busca a encontrarem suas páginas facilmente.
Normalmente, você exibe este índice na página principal (também
conhecida como home ou página inicial), que é a primeira página da
seu web site, e muitas vezes exibe este mesmo índice nas páginas
subsequentes, conforme imagem abaixo:
Formas de navegação
Existem algumas maneiras de criar um fluxo para visualização de
um web site. Você deve sempre ter em mente, que a maioria dos
visitantes de seu web site, nunca o viram anteriormente, e por isso,
você deve facilitar ao máximo a forma como estes visitantes irão
encontrar suas páginas web.
Para isso, você usa alguns tipos de conceitos de navegação. Um
dos mais comuns, a navegação linear, é utilizada para apresentar
informações que possuam uma sequência que deve ser obedecida.
Por exemplo, uma apresentação web sobre a instalação de uma
aplicação, contém uma série de passos sequenciais que o usuário
deve seguir, de forma que ele pode se perder na instalação desta
aplicação, caso não obedeça a sequência exata, o mesmo se aplica
aos cursos Aprendamais, que devem ser visualizados na sequencia
correta.
Para que os internautas naveguem linearmente pelas páginas Web,
você precisa fornecer alguns links básicos, os quais relacionamos
na imagem abaixo:
Vamos imaginar um exemplo básico de um site sobre a instalação
de
um
software
em
um
computador
com
sistema
operacional Windows e o mesmo software em um computador
com Linux.
O procedimento para a instalação do software consiste em dez
passos. Destes dez passos, oito são comuns tanto para
o Windows quanto para o Linux. Por isso, os usuários precisam,
obrigatoriamente, ver os oito passos sequencialmente (Utilizamos
então a navegação linear).
Em seguida, dependendo do tipo de sistema operacional (Windows
ou Linux), eles irão para a página correspondente, pois os dois
últimos passos são específicos.
Neste caso, ainda é utilizada a navegação linear porém com
alternativas que contém tanto passos comuns quanto específicos.
Ou seja, ao chegar no passo oito, você deve dar alternativas ao
visitante:
Outro tipo de navegação muito comum é a navegação hierárquica,
utilizada para demonstrar informações estruturadas. Neste tipo de
navegação, você específica as informações gerais no topo da
hierarquia e as informações específicas por último.
Por exemplo, vamos supor que você queira criar uma
apresentação web sobre animais. Na sua apresentação, você
deseja separar, por categorias, os animais carnívoros e os
herbívoros. Para projetar uma apresentação web sobre animais,
você precisa criar, em primeiro lugar, um índice.
Em uma navegação hierárquica, você fornece os mesmos links que
usa em uma navegação linear. Entretanto, na navegação
hierárquica, um link para a próxima página está conectado ao
próximo nível da hierarquia, da mesma forma como um link para a
página anterior está conectado ao nível anterior da hierarquia.
Vamos supor que os internautas estejam visualizando uma página
que possui links para os tipos de animais carnívoros. Um
destes links conecta a uma página de crocodilos. Neste exemplo, a
página dos tipos de animais carnívoros está no segundo nível da
hierarquia e a página dos crocodilos corresponde ao terceiro nível
da hierarquia.
Se você usa vários níveis de hierarquia, os internautas podem se
esquecer da página por onde começaram. Com isso, eles poderão
ficar confusos durante a visualização do seu site.
Na navegação hierárquica, você deve restringir seu site para três
níveis de hierarquia. Com isso, o risco de gerar confusão, por parte
dos internautas, é bem menor.
Em uma navegação hierárquica, os internautas não podem navegar
de uma página, que pertence a uma categoria, para uma outra
página, de outra categoria. Por exemplo, um internauta não pode
acessar uma página de animais herbívoros quando estão em uma
página de carnívoros.
Para acessar a página dos herbívoros, o internauta deve voltar para
o índice e selecionar herbívoros.
Pode ser que você queira deixar que os internautas naveguem por
páginas pertencentes a outras categorias sem ter de voltar ao
índice. Para isto, você precisa usar uma combinação de navegação
hierárquica e linear.
Navegando tanto sequencialmente quanto pela hierarquia
Uma combinação de navegação linear e hierárquica permite aos
internautas navegarem tanto sequencialmente quanto pela
hierarquia.
O índice da sua apresentação web está listado na página principal.
Um internauta seleciona a categoria dos carnívoros e visualiza a
página dos tigres. Em seguida, ele deseja ver a página dos
herbívoros.
Em uma combinação de navegação linear e hierárquica, os
internautas podem navegar para a página dos herbívoros de duas
maneiras:


Voltar para a página principal e selecionar a categoria dos
herbívoros (esta é a navegação hierárquica).
Usar o link para a próxima tela (esta é a navegação linear).
Uma combinação de navegação linear e hierárquica permite ao
internauta navegar tanto sequencialmente quando hierarquicamente
pela sua apresentação web. Isto pode deixá-los perdidos, porque
eles podem navegar para a mesma página de várias formas.
Alias, se você também está um pouco perdido, não se preocupe
pois em muito breve todos estes conceitos estarão bem claros para
você.
Enfim, vamos partir para o HTML.
HTML
As pessoas imaginam que é muito difícil construir um website. Mas
isso não é verdade! Qualquer um pode aprender a construir
umwebsite. É necessário apenas que você estude, pratique e
consolide os ensinamentos aqui contidos. Com certeza, em breve,
você estará criando seu próprioWebSite!
WWW
Antes de iniciar o estudo do HTML, você deverá conhecer alguns
conceitos sobre a Internet, fundamentais ao seu aprendizado.
Você sabe o que significa WWW?
World Wide Web (www) é, sem dúvida, um dos mais importantes
sistemas de informação que operam atualmente na Internet. Ele
reúne as seguintes propriedades:



Recursos multimídia.
Recursos HyperTexto.
Interface Gráfica.
Dentre as diversas aplicações possíveis de serem executadas,
pelo WWW, pode-se destacar:






Divulgação de produtos por parte das empresas.
Vendas e compras de produtos por transações online.
Revistas eletrônicas.
Jornais Online.
Informações Turísticas.
Pesquisas etc.
Por trás da tela do seu computador existe uma complexa estrutura
de clientes e servidores, trabalhando em conjunto (através de
protocolos) para atingir os objetivos propostos e levar até você a
informação desejada.
Uma página da WEB é formada por um sistema HyperTexto textos que possuem links (também chamados de vínculos) para
outros documentos. Esses documentos, na WEB, são escritos em
linguagem HTML.
Para que o usuário tenha acesso a um documento HTMLé preciso
utilizar um aplicativo que possa apresentá-lo. Esse programa é
chamado de "Navegador" ou "WebBrowser". O usuário precisa
informar ao navegador qual protocolo será usado, a localização do
arquivo que deseja ver: em que servidor está, em qual diretório
dentro desse servidor e, por último, o nome do arquivo desejado.
Essa informação é chamada de URL (Uniform Resource Locator) e
é única para cada arquivo em um Servidor. O cliente requisita
a URL e o servidor fornece os documentos. Através da URL o
servidor irá encontrar o arquivo registrado e enviá-lo para o cliente
(Browser) que é encarregado de exibir o documento formatado ao
usuário, ou seja: acabado visualmente, com figuras, cores etc.
HTTP (Hyper Text Transfer Protocol) é um protocolo de
transferência de documentos da WEB e base de toda a
funcionalidade. É um protocolo leve e veloz, construído
sobre TCP/IP e orientado à conexão.
Na verdade, o protocolo HTTP permite que os browsers(clientes)
conversem com os servidores WEB, façam pedidos e recebem a
resposta em forma de documento, através de uma
conexão Internet feita por um provedor de acesso.
HTML - Linguagem da WEB
O que é HTML?
HTML é a abreviatura de "HyperText Markup Language".
Resumindo uma longa história, o HTML foi inventado em 1990, por
um cientista chamado Tim Berners-Lee. A finalidade inicial era a
de tornar possível o acesso e a troca de informações, de
documentação e pesquisas, entre cientistas de diferentes
universidades. O projeto inicial tornou-se um sucesso jamais
imaginado por Tim Berners-Lee.
HTML é uma linguagem que possibilita apresentar informações
(documentação de pesquisas científicas) naInternet. Aquilo que
você vê quando abre uma página na Internet é a interpretação que
seu navegador faz doHTML. Para visualizar o código HTML de uma
página use o menu "Exibir" no topo do seu navegador e escolha a
opção "Código Fonte" (Código fonte).
Para quem não conhece, o código HTML pode parecer complicado,
mas é bem simples.
HTML Estruturado (XHTML)
Você aprenderá um HTML estruturado, de acordo com algumas
regras dos padrões WEB(W3C).
Para começar, um esclarecimento: o XHTML (Extensible HyperText
Markup Language) nada mais é do que uma maneira mais bem
estruturada de escrever HTML.
O conteúdo integral sobre XHTML não será apresentado aqui por
ser inviável: é preciso, primeiramente, dominar os conteúdos
básicos do HTML. Há um treinamento específico para XHTML e
sugerimos que você, ao concluir este curso, faça um treinamento
de XHTMLconosco, para se atualizar com os padrões WEB.
Ambiente de trabalho
É muito provável que você já tenha as ferramentas necessárias.
Você tem um "navegador". Navegador é um programa que permite
visualizar e navegar por páginas na Internet.
Não importa qual navegador você utiliza (Mozilla Firefox, Google
Chrome, Opera, Safari, Internet Explorer).
Você já deve ter ouvido falar, ou até mesmo ter usado, programas
como Microsoft FrontPage e Dreamweaverque podem - pelo
menos assim anunciam - criar websites para você. Esqueça-os, por
enquanto! Eles não têm qualquer utilidade na tarefa de codificar o
website.
Você precisará de um editor simples de textos. Neste curso
recomenda-se o NotePad++, pois ele colore as sintaxes dos
códigos.
Notepad++
Notepad++ é um editor de texto que suporta as mais diversas
linguagens de programação:
C, C++, Java, C#, XML, HTML, PHP, Javascript, ASCII art,
doxygen, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, Perl,
Python, Lua, TeX, TCL, Assembler, Ruby, Lisp, Scheme, Properties,
Diff, Smalltalk, Postscript, VHDL, Ada, Caml, AutoIt, KiXtart, Matlab,
Verilog, Haskell e InnoSetup.
Site para download do NotePad++:
http://notepad-plus-plus.org/download/
Resumindo
Um navegador e um "Editor de Textos": é tudo o que você precisa
para acompanhar este treinamento e aprender a programar HTML.
Tags são rótulos usados para informar ao navegador como
o website deve ser apresentado.
Todas as tags têm o mesmo formato: começam com um sinal
de menor "<" e acabam com um sinal de maior ">".
Genericamente falando, existem dois tipos de tags: tags de
abertura e tags de fechamento . A diferença entre elas está na barra
"/" existente na tag de fechamento.
Tudo o que estiver contido entre uma tag de abertura e uma tag de
fechamento será processado segundo o comando de cada uma.
Mas como toda regra tem a sua exceção, a do HTML é que para
algumas tags a abertura e o fechamento se dão na mesma tag. Elas
contêm comandos que não precisam ter conteúdo para serem
processados; isso é: são tags de comandos isolados como, por
exemplo, um pulo de linha:
Aprender HTML é aprender a usar as diferentes tags.
Exemplo: A tag < b > informa ao navegador que o texto colocado
entre < b > e < /b > deve ser mostrado em negrito (o comando "b" é
uma abreviação para "bold" - negrito).
Abra o editor Notepad++, clicando no botão Iniciar, Todos os
Programas, selecione a pasta NotePad++, escolha NotePad++.
Vamos configurar o NotePad para a linguagem HTML. Clique no
menu Linguagens e escolha a opção HTML.
Vamos
configurar
agora UTF-8,
é
um
tipo
de
codificação Unicode de comprimento variável criado por Ken
Thompson e Rob Pike. Pode representar qualquer carácter
universal no padrão do Unicode, sendo também compatível com
o ASCII. Por esta razão, está sendo adotado como tipo de
codificação padrão para e-mail, páginas web, e outros locais onde
os caracteres são armazenados. Siga as instruções abaixo:
exemplo1.htm
Para ver como ficou o código na página HTML, clique no
menu Executar do Notepad e escolha Launch in Chrome, ou
qualquer outro navegador.
Será apresentado no navegador, desta forma:
As tags < h1 >, < h2 >, < h3 >, < h4 >, < h5 > e < h6 > informam
ao navegador que se trata de um cabeçalho (h vem de "heading" cabeçalho): < h1 > é o cabeçalho de primeiro nível e apresentado
com o maior tamanho de texto; < h2 > é o cabeçalho de segundo
nível e apresentado com tamanho de texto um pouco menor; e
assim sucessivamente até< h6 >, cabeçalho de sexto nível e
apresentado com o menor tamanho de texto.
Exemplo2.htm
As tags devem ser escritas com letras maiúsculas ou
minúsculas?
Para a maioria dos navegadores é indiferente se você usa letra
maiúscula, minúscula ou mesmo uma mistura delas. Contudo, de
acordo com as regras de padrões web, a maneira correta é usar
minúsculas. Então, crie o hábito de escrever suas tags com letras
minúsculas, SEMPRE!
Criando sua primeira página
Você viu inicialmente que é necessário ter, para construir
um website: um navegador e um editor de textos.
Então, abra o seu editor de textos.
Você irá criar uma página simples, uma página que "diga": "Estou
aprendendo HTML na AprendaMais !!!".
HTML é simples e lógico. O navegador lê HTML da mesma forma
que você lê um texto qualquer: de cima para baixo e da esquerda
para a direita.
A primeira coisa a fazer é informar ao navegador que você vai
"falar" com ele na linguagem HTML. Isso é feito com a tag < html >.
Então, antes de qualquer coisa, digite "< html >" na primeira linha
do documento, em seu editor de textos.
Como você já sabe, < html > é uma tag de abertura e deve ser
encerrada com a de fechamento ao acabar-se de digitar o
documento. Para você ter certeza de que não irá esquecer-se de
fechar a tag HTML, faça isso agora mesmo digitando "< /html >"
algumas linhas para baixo, assim você irá escrever e preencher seu
documento entre as tags digitadas < html > e < /html >.
A próxima coisa que o documento precisa é um "head" (cabeça),
que fornece informações sobre o documento, e um "body" (corpo),
que abriga o conteúdo do documento. Como HTML nada seria se
não fosse lógico, a "cabeça" (< head > e < /head >) fica em cima do
"corpo" (< body > e < /body >).
Seu documento deverá ter a seguinte estrutura:
Estrutura de um documento HTML
Esta é a estrutura que todo documento HTML deve ter:
Veja como o código foi estruturado em linhas diferentes (usar a
tecla Enter para pular para a próxima linha) e também com
identação (recuos) do código (usar a tecla Tab para identar). A
princípio, a maneira como você estrutura (linhas e recuos) seu
documento HTML, não faz qualquer diferença. Mas um código bem
estruturado é mais fácil de ler e entender. É altamente
recomendado que você adote uma estrutura clara e nítida para seu
HTML, usando linhas e identação (recuos), como o que foi
mostrado no exemplo acima.
Se o seu documento está como o exibido acima, você construiu sua
primeira página web! Esse será o padrão para os futuros
documentos HTML.
Como colocar conteúdo em minha página?
Como você já aprendeu, um documento HTML é composto de duas
partes: um head e um body. Na seção head você escreverá as
informações sobre a página; e na seção body colocará as
informações que constituem a página.
Por exemplo, para dar um título ao documento - título este que
apareça no topo da barra de título do navegador - você deverá usar
a seção "head". A tag para acrescentar um título é < title >:
Deverá ser colocado na seção "Head":
O título não aparece na página, no documento ou no corpo da
página, mas sim na barra de título do navegador. Ou seja: tudo o
que você quiser que apareça na página, e for conteúdo, deverá ser
colocado entre as tags "body".
Então escreva um texto, como conteúdo da página, e
que deverá ser colocado na seção body. Digite na
seção body o seguinte:
A letra p na tag < p > é a abreviatura para "paragraph" (parágrafo)";
ou seja: o texto é um texto-parágrafo.
Parabéns, você
da WEB !!!
acabou
de
construir
sua
primeira
página
Agora salve a página:



Com o Notepad++ aberto, vá ao menu "Arquivo" e escolha a
opção "Salvar como...".
Em "salvar como" escolha HTML.
Salve seu documento com o nome "pagina1.html" (a extensão
".html" indica que se trata de um documento HTML. A
extensão ".htm" dá o mesmo resultado)
Agora, dê dois clicks na página salva: ela abrirá com seu navegador
padrão.
Veja a página aberta no navegador:
Estrutura de uma página HTML
Sempre que for criar uma página, faça primeiro a
estrutura. É uma dica! Veja a estrutura:
Siga sempre a estrutura acima: a partir de agora ela é o "padrão"
para a criação das páginas.
Na seção < body > escreva o conteúdo da página. Veja um
exemplo:
Exemplo3.htm
Lembre-se, o único caminho para aprender HTML é a prática.
Outras TAGs
Você já sabe que pode obter negrito com a tag < b >; para obter
itálico - letras inclinadas - use a tag < i > ("i" vem de "italic").
Exemplo4.htm
Em execução:
Retomando: existem tags que são abertas e fechadas em uma
única tag. Elas são comandos isolados, ou seja: não precisam
conter texto dentro delas para funcionar. Um exemplo é a tag < br /
> que serve para criar uma quebra de linha (pular uma linha).
Sem a tag < br / > o exemplo acima seria visualizado desta forma:
Tag < small >
Com esta TAG o texto fica com letras menores que o normal. Veja o
exemplo:
Exemplo5.htm
Em execução:
Exemplo6.htm
Em execução:
Você pode usar várias tags simultaneamente, desde que as aninhe
corretamente. Veja como fazer isto no exemplo abaixo:
E não assim:
Observe que, no primeiro exemplo, a primeira tag de
abertura <b> corresponde à última tag de fechamento< /b > e o
aninhamento está certo. Isso evita confusão para quem escreve o
código e para o navegador que lê o código (em XHTML isso é um
ERRO). Você deve sempre ter boas práticas, ou seja: aninhe
corretamente suas TAGS.
Tag < hr / >
Esta tag serve para definir uma linha horizontal no documento. Veja
o exemplo:
Exemplo7.htm
Em execução:
Itens de lista
Os itens de uma lista não ordenada são identificados pelos
elementos: < ul > que serve para "abrir" uma lista; e < li >, que se
trata dos itens dessa lista.
Listas não ordenadas
Exemplo8.htm
Em execução:
Listas ordenadas
Exemplo9.htm
Em execução:
Tag < blockquote >
Utilizado para criar citações, que insere uma linha antes e depois do
texto, assim como um nível de identação.
Exemplo10.htm
Atributos
Você pode adicionar atributos às tags.
O que é atributo?
Lembrando: uma tag é um comando para o navegador (por exemplo, <
br / > é o comando para pular uma linha). Em algumas tags você pode
ser mais específico, acrescentando informações extras de comando.
Isso é feito através dos atributos.
Atributos são escritos dentro da tag, seguidos pelo sinal de igual e,
depois, entre aspas declaram-se as informações do atributo - neste
exemplo, dentro do atributo Style. As informações, quando mais de
uma, devem ser separadas por ponto e vírgula. Esse assunto será
retomado adiante.
Como?
Existem vários atributos. O primeiro que você aprenderá é o
atributo style. Com o atributo style você pode adicionar estilização
e layout ao seu website. Por exemplo, uma cor de fundo:
Exemplo11.htm
O código acima renderiza uma página com cor
de fundo cinza. A seguir você aprenderá como
funcionam as cores.
Veja que algumas tags e atributos têm nomes no idioma inglês,
dos E.U.A. É muito importante que você digite os nomes
exatamente como o ensinado neste treinamento - se você mudar
uma letra sequer, o navegador não entenderá o código. É
importante também que você não se esqueça de fechar as aspas
nas informações do atributo.
Cores
Como, no exemplo acima, a página ficou cinza?
No exemplo acima foi usado o código "#E9E9E9" para fazer a
página na cor cinza. Este é o código para a cor cinza no sistema
chamado de números hexadecimal (HEX). Cada cor é representada
por um número hexadecimal. Veja a seguir uma tabelinha com
centenas de cores:
Um código hexadecimal para cores é formado por um
sinal # seguido de seis dígitos e/ou letras. Existe mais
de 1000 códigos HEX e não é fácil decorar o código para todas as
cores.
Veja como usar a tabela de cores acima:
Imagine que você quer colorir o fundo de uma página com a cor
verde; então, procure a cor na tabela de cores:
O código hexadecimal para essa cor é: #66ff00. Para colorir o fundo
da página com a cor verde, você deve fazer o seguinte:
Veja que o atributo style é empregado na tag body, pois você quer
colorir o fundo do documento e, body, é o corpo do documento.
Você também pode usar o nome das cores em inglês (white, black,
red, blue, green e yellow). Exemplo:
Quais tags podem usar atributos?
Atributos podem ser aplicados à maioria das tags.
Você usará atributos mais frequentemente em algumas tags, como
a body; e raramente usará em outras, como a < br >, por exemplo,
que é um comando para pular linha e não precisa de informação
adicional.
Assim como existem muitas tags, também existem muitos atributos.
Alguns atributos são empregados em tags específicas, enquanto
outros servem para várias. E vice-versa: algumas tags podem
conter somente um tipo de atributo, enquanto outras podem conter
vários tipos.
Isso pode parecer um pouco confuso, mas à medida que você for
praticando vai constatar que é fácil e lógico, assim como constatará
as inúmeras possibilidades que os atributos oferecem.
Exemplo12.htm
Links
Para construir um link você deverá usar o que tem usado até agora:
uma tag. Uma simples e pequenina tag, com um elemento e um
atributo, é o suficiente para você construir os links dirigidos para
onde quiser. A seguir um exemplo de link para o site do google:
No navegador ficaria assim:
O elemento a refere-se a "anchor" - âncora. O atributo href é
abreviação para "hypertex
No
exemplo
acima,
o
atributo href tem
o
valor
"http://www.google.com.br", que é o endereço completo do
site Google e é chamado de URL (Uniform Resource Locator). Atenção:
"http://"
deve
sempre
ser
incluído
nas URLs.
Lembrese de fechar a tag com um < /a >.
Imagem como link
Imagens também podem ser links, ou seja: ao clicar na imagem,
acessa "X" endereço.
Exemplo13.htm
Ao invés de inserirmos um conteúdo textual dentro da tag de link,
inserimos uma imagem no lugar.
Como são os links entre minhas próprias páginas?
Se você quer construir links entre páginas de um mesmo website
não precisa escrever o endereço completo de cada página (URL).
Por
exemplo:
se
você
tem
duas
páginas
(suponha pagina1.html epagina2.html) salvas em um mesmo
diretório, basta construir um link de uma para a outra, usando
somente o nome do arquivo no link. Ou seja: um link
dapagina1.html para a pagina2.html, como o mostrado abaixo:
Pagina1.htm
Pagina2.htm
Execute em seu navegador o arquivopagina1.html, e clique
no link para ir para página 2, e quando estivar na página2 clique
para voltar a página1.
Crie dentro de sua pasta uma subpasta com o nome de produtos e
mova o arquivo pagina2.html para dentro desta pasta.
Como
o
arquivo pagina2.html foi
colocado
subpasta produtos o link na pagina1.html precisa
para:
dentro
da
ser alterado
"../" (dois pontos final) = aponta para o diretório um nível acima do
arquivo onde foi feito o link. Seguindo o mesmo princípio, você pode
apontar para dois (ou mais) níveis acima, escrevendo "../../".
Como alternativa você pode usar o endereço completo do arquivo
(URL), mas essa não é uma prática recomendada, pois, trocando o
servidor, você terá um retrabalho na alteração dos links.
Links internos
Você pode criar links internos, dentro da própria página. Por exemplo,
uma tabela de conteúdos ou um índice com links para cada capítulo
em uma página. Tudo o que você precisa é usar o atributo id e o
símbolo "#".
Use o atributo id para marcar o elemento: o atributo id é a
identificação, o "nome" do elemento. No caso do exemplo acima ele
é usado para marcar o elemento que é o destino do link. Veja:
Você agora pode criar um link, que leve àquele elemento, usando o
símbolo "#" no atributo do link. Ele ("#") informa ao navegador para
ficar na mesma página em que está. O símbolo "#"deve ser
seguido pelo valor atribuído a id para onde olink vai. Por exemplo:
Exemplo14.htm
Execute este arquivo no browser.
Link para endereço de email
Você pode criar link para um endereço de email. Isso é feito de
modo semelhante aos links para páginas da web.
Exemplo15.htm
A única diferença é que no lugar do endereço do documento, você
escreve mailto: seguido pelo endereço de email. Quando o link é
clicado, o programa de email padrão do usuário é aberto, com o
endereço do link já digitado na linha do destinatário. Mas, atenção,
isso só funcionará se o usuário tiver um programa
de email instalado na máquina. Faça uma experiência com este tipo
de link em seu computador.
Exemplos de Links
Aqui você encontrará um exemplo completo de Links. Digite o
código, analise e estude.
Index.html
Teste.html
A página teste.html deve ficar dentro da pasta teste. Veja abaixo:
Copie a figura w3c.jpg para junto do arquivoindex.html.
Atributo title
O atributo title é usado para fornecer uma breve descrição do link.
Basta colocar o cursor do mouse sobre o link e será exibido o texto
entre aspas " ".
Exemplo16.htm
Imagens
Exemplo17.htm
Para adicionar uma imagem em sua página utiliza-se a tag img.
Veja como é fácil:
O atributo alt empregado nesta imagem indica a descrição da
imagem. Caso o navegador por algum motivo não consiga carregar
a imagem, por exemplo, por algum problema no servidor onde ela
está hospedada, o texto desse atributo alt aparece. É sempre uma
boa prática descrever imagens importantes em significado para
o site.
O que você tem a fazer é dizer ao navegador que quer inserir uma imagem (img
localizada (src, abreviatura para "source" - local de armazenagem).
Veja que a tag imagem é do tipo comando isolado, isto é, uma
só tag de abertura e de fechamento. Ela é semelhante a tag < br /
>, que não precisa ter um texto inserido.
"w3c.jpg" é o nome do arquivo da imagem que você quer inserir na
página. ".jpg" é a extensão do tipo de imagem. Tal como a
extensão ".html" para arquivos de documentos HTML, ".jpg"
informa ao navegador que o arquivo é uma imagem. São três os
tipos de imagens que você pode inserir em sua página:



JPG / JPEG (Joint Photographic Experts Group).
GIF (Graphics Interchange Format).
PNG (Portable Network Graphics).
Em geral, imagens GIF são ideais para gráficos e desenhos; e
imagens JPEG, para fotografia.
Existem duas razões para isso: primeiro porque imagens GIF são
constituídas por 256 cores e imagens JPEG por milhões de cores;
segundo porque imagens GIF são mais bem otimizadas para
imagens simples, ao passo que imagens JPEG são mais bem
otimizadas para imagens complexas. Quanto melhor a compressão,
menor o arquivo e mais rápida a página é carregada no navegador.
Como você deve saber, por experiência própria, páginas
desnecessariamente "pesadas" para carregar são frustrantes para o
usuário.
Tradicionalmente, os formatos GIF e JPEG têm sido os mais
empregados, mas ultimamente o formato PNG tem se tornado mais
popular (notadamente, em detrimento do formato GIF). O
formato PNG é melhor que JPEG e GIF devido aos milhões de
cores e à efetiva compressão.
Detalhes adicionais sobre imagens
Você pode inserir imagens que estão localizadas em outros
diretórios, ou até mesmo em outros websites. Veja:
Localizada em um servidor:
Imagens podem ser links também:
Você sempre terá que usar o atributo src, que diz ao navegador
onde a imagem está localizada. Além dele, existem outros atributos
que podem ser bastante úteis a você para inserir imagens em uma
página.
O atributo alt é usado para fornecer uma descrição textual
alternativa da imagem, caso, por alguma razão, ela não seja
renderizada para o usuário. Isso é particularmente importante para
usuários com restrições visuais, ou quando a imagem é carregada
muito lentamente. Por isso, sempre use este atributo:
Alguns navegadores mostram uma caixa pop-up, com o conteúdo
do atributo alt, quando o usuário passa o mouse sobre a imagem.
Tenha em mente que a finalidade principal desse atributo é a de
fornecer uma alternativa textual para a imagem. Ele não deve ser
usado para criar mensagens pop-up, uma vez que os leitores de tela
passarão uma mensagem que não descreve a imagem para os
usuários com restrições visuais.
O atributo title pode ser usado para fornecer uma curta descrição
da imagem:
Definindo largura e altura de uma imagem
Exemplo18.htm
A imagem original tem o tamanho em 320x252, foi alterada através
do html para100x79.
Os atributos width e height podem ser usados para definir,
respectivamente, a largura e a altura da imagem. O valor adotado
para medidas é o pixel. Pixel é a unidade de medida usada para
medir a resolução da tela (as resoluções de tela mais comuns são
de 800x600 e 1024x768 pixels). Ao contrário de centímetros, pixel é
uma unidade de medida relativa que depende da resolução da tela.
Telas com grande resolução terão 25 pixels por 1 centímetro,
enquanto que as de baixa resolução terão os mesmos25 pixels,
mas por 1,5 cm de tela.
Atenção:
Se os valores para width e height não forem definidos, a imagem
será inserida em tamanho real. Com width e height você pode
alterar o tamanho da imagem.
Contudo, o tempo de carregamento da imagem será sempre aquele
requerido, como se ela tivesse suas dimensões reais, mesmo que
você diminua o tamanho usando esses atributos. Assim, você não
deve diminuir o tamanho das imagens com o uso dos
atributos width e height. Se você precisar diminuir a imagem, façaa em suas dimensões reais, em um editor de imagem, para tornar
suas páginas mais leves e mais rápidas.
Tag < div >
A tag div é amplamente utilizada. Ao fazer o curso de CSS, você
entenderá por que. Essa tag não causa nenhuma diferença visual
no código. Ela é considerada um "container", ou seja: uma espécie
de "caixa" imaginária em que você pode, através de script, alterar o
conteúdo, ou o estilo, através de CSS (folha de estilo).
Exemplo de uso:
Mais adiante você aprenderá a usar atributos de alinhamento para
a tag DIV.
Tabelas
Tabelas são usadas para apresentar "dados tabulares"; isto é:
informação que deva ser apresentada em linhas e colunas, de
forma lógica.
Criar tabelas em HTML pode parecer complicado, mas se você
acompanhar a explicação, passo a passo, verá que é bem simples.
Exemplo19.htm
Qual a diferença entre < tr > e < td >?
3 tags básicas são usadas para inserir tabelas:



< table > começa e termina uma tabela.
< tr > significa "table row" - linha de tabela - começa e termina
em uma linha horizontal da tabela.
< td > significa "table data" - dados da tabela - começa e
termina em cada célula contida nas linhas da tabela.
No exemplo acima, a tabela começa com< table > seguida por
uma < tr >, que indica o início de uma nova linha. Três células são
então inseridas na linha: < td > Célula 1 < /td >, < td >Célula 2<
/td > e < td > Célula 3 < /td >. A linha termina com < /tr > e uma
nova linha < tr >começa imediatamente a seguir. A nova linha
também contém três células. A tabela termina com < /table >.
Para esclarecer: linhas são horizontais e colunas são verticais,
ambas contendo células:
Célula 1 , Célula 2 e Célula 3 formam uma linha. Célula 1 e Célula
4 formam uma coluna.
No exemplo acima a tabela tem duas linhas e três colunas. Uma
tabela pode conter um número ilimitado de linhas e colunas.
Atributos para tabelas
Um atributo muito utilizado em tabelas é o atributo border, para
definir a espessura da borda da tabela.
Exemplo20.htm
A espessura da borda é especificada em pixels.
Assim como as imagens, pode-se definir width - largura em pixels para uma tabela - Exemplo: ou alternativamente em
porcentagem da tela:
Este exemplo renderiza no navegador uma tabela com largura igual
a 25% da largura da tela. Faça o teste você mesmo.
Existem outros atributos para tabelas, veja mais dois:


align: define o alinhamento horizontal do conteúdo da tabela,
de
uma
linha
ou
de
uma
célula.
Por
exemplo: left, center ou right (à esquerda, no centro ou à
direita).
valign: define o alinhamento vertical do conteúdo de uma
célula. Por exemplo: top, middle ou bottom (em cima, no
meio ou em baixo).
Colspan e Rowspan
Colspan é a abreviação para "column span". Colspan é usada
na tag < td > para indicar quantas colunas estarão contidas em uma
célula.
Colspan_rowspan.html
Definindo colspan em "3", a célula na primeira linha conterá três
colunas. Assim será necessário inserir mais duas células para que
se tenha, na primeira linha, as colunas em acordo com as da
segunda linha. Como mostra o exemplo abaixo:
Rowspan especifica quantas linhas estarão contidas em uma
célula:
Colspan_rowspan2.html
No exemplo acima, rowspan é definido em "4" na Célula 1. Isso
especifica que uma célula deve conter 4 linhas. Célula 1 e Célula
2 estão na mesma linha, enquanto Célula 3 , Célula 4 e Célula
5 formam três linhas independentes.
Se você tem conhecimento de Excel, com certeza não foi doloroso
aprender "Tabelas".
Conclusão sobre tabelas
Teoricamente você pode inserir qualquer coisa em uma tabela: texto,
links e imagens. Mas tabelas destinam-se a apresentar dados
tabulares (isto é, dados que por sua natureza devam ser
apresentados em linhas e colunas).
Até hoje, grande parte dos desenvolvedores ainda utiliza tabelas
como ferramenta para construir layouts, o que não é "correto", além
de ser totalmente fora dos "Padrões Web". Se você quer controlar a
apresentação de textos e imagens, existe uma maneira bem mais
racional: CSS/ Tableless. Recomendamos que você faça conosco
os cursos de CSS e Tableless para aprender a controlar a
apresentação visual do seu site, e sem usar tabelas. Tabelas foram
feitas para exibir dados tabulares e não para a criação de Layouts.
Tags para estilos de texto
As mais comuns:
Tags.html
Tag < font >
Permite alterar o tipo de fonte, o tamanho e a cor.
Se você aprender CSS, verá que o elemento font não tem
utilidade. Uma dica: faça os cursos de CSS e XHTML conosco,
aqui na AprendaMais, e enriqueça seu conhecimento!
Sintaxe
Onde

n: varia de 1 a 7 e o valor 3 corresponde ao valor padrão;


nome: indica o nome da fonte a ser utilizada;
cor: indica a cor da fonte, definida em hexadecimal, ou
através de um nome predefinido de cores.
Fontes.html
Ps: Vale ressaltar que, assim como é ensinado no curso
de XHTML, utilizar a tag FONT não é uma boa prática para criação
de páginas. O recomendado é seguir os padrões XHTML e utilizar
folhas de estilos CSS (recomendamos que, após o curso de HTML,
você faça o de XHTML e também o de CSS.Consulte!).
Alinhamento de elementos
Div é uma tag de bloco muito utilizada por desenvolvedores WEB.
Veja como utilizá-la para alinhar os textos ou elementos.
Sintaxe
Onde
A posição pode ser:




left: alinhamento à esquerda;
center: centralizado;
right: alinhamento à direita;
justify: justificado. Somente para textos.
Alinhamento.html
Para centralizar, você pode utilizar a tag center, desta forma:
Veja outro exemplo. Neste, alinhamos elementos à esquerda e à
direita:
Alinhamento2.html
Formulários
Através de um formulário o usuário poderá interagir com o servidor,
enviando dados que serão processados e devolvidos.
Por exemplo: o envio de dados como parâmetro para uma
página PHP, que fica responsável em gravar os dados em
um banco de dados.
Enfim, formulários são de grande utilidade. Se você fizer um
treinamento conosco de alguma das linguagens de programação
para WEB, como PHP por exemplo, usará muito os formulários.
Criando um formulário
Cada elemento de um formulário é definido separadamente. Na
definição, você informa o local do programa (CGI, ASP, PHP) que
controlará o formulário e a forma, ou método, como os dados serão
enviados para o servidor.
Sintaxe
Method: define o método utilizado pelo servidor para receber os
dados do formulário. O método pode ser:
POST: método mais utilizado transmite a informação do formulário
imediatamente após a URL;
GET: anexa o conteúdo do formulário ao endereço da URL, por isso
tem limitação de tamanho das informações;
ACTION: especifica o programa ou página do servidor que
processará os dados do formulário;
NAME: define o nome do formulário.
Elementos de formulário
Input
Define um campo de entrada de dados. Cada campo de um
formulário atribui o seu conteúdo a uma variável que possui nome e
tipo específico.
Sintaxe
Onde
Formulario.html
Tag Select
Define uma lista de itens que podem ser selecionados pelo usuário.
Sintaxe
Onde
Pesquisa2.htm
Tag textarea
Define uma caixa de texto onde o usuário pode digitar um texto com
várias linhas.
Sintaxe
Onde
Frames
Os frames são divisões da tela do browser em diversas telas (ou
"quadros"). Com isso, torna-se possível apresentar mais de uma
página por vez.
O corpo de uma página Frame é diferente de uma página comum;
esse arquivo só conterá as dimensões das divisões e as páginas
que irão aparecer em cada divisão.
A estrutura básica do corpo de uma página com frame:
Para utilizar o recurso de frames, é preciso um conjunto de tags.
Cada uma com sua função:
FRAMESET é utilizada para criar um conjunto de frameset seus
elementos. É a tag principal da criação de frameset precisa ser
encerrada assim: < /FRAMESET >;FRAME é utilizada para definir
um frame (quadro) dentro de um conjunto de frames. Não necessita
de tag de encerramento.
Sintaxe
Onde


FRAMESET: tag de abertura de um conjunto de frames;
COLS="colunas, largura": define o número de colunas; o valor
pode ser em pixels ou percentagem. É utilizado para definir o
número de quadros (frames) que terá o conjunto de frames;

















ROWS="linhas, altura": define o número de linhas; o valor
pode ser em pixels ou em percentagem. É utilizado para
definir o número de quadros (frames) que terá o conjunto
de frames;
FRAMEBORDER="1/0":
o
valor 1 exibe
uma
borda3D no frame, o valor 0 não exibe a borda;
BORDER="n": define o tamanho da borda;
FRAMESPACING="n": define um espaço em pixelsentre
os frames, mas nem todos os browsers reconhecem esse
atributo;
FRAME: define cada quadro (frame) separadamente;
NAME="nome": define o nome do frame;
SRC="URL": define a página que será exibida noframe;
ALIGN="posição": define o alinhamento do conteúdo
do frame. A posição pode ser:
top: o conteúdo é alinhado no topo do frame;
middle: o conteúdo é alinhado no meio do frame;
bottom: o conteúdo é alinhado na base do frame;
left: o conteúdo é alinhado à esquerda do frame;
right: o conteúdo é alinhado à direita do frame;
MARGINHEIGHT="altura": define a altura da margem
em pixels;
MARGINWIDTH="largura": define a largura da margem
em pixels;
SCROLLING="yes/no/Auto": define se o frame terá ou não
barra de rolagem;
NORESIZE: evita o redimensionamento do frame.
Exemplo: Crie uma subpasta dentro de sua pasta com o nome
de frames e salve este arquivo com o nome de index.html dentro
desta pasta.
Index.html
Pagina1.html
Pagina2.html
Texto rolante
Com esta tag você pode colocar uma faixa decorativa com um texto
animado em sua página. Para entendê-la melhor dê uma olhada no
exemplo abaixo:
Onde
Text_rolante.html
Ps: Não utilize esse elemento em demasia. Se você for investir na
área e fazer mais cursos, verá que essa não é uma boa prática de
usabilidade.
Conclusão do Curso de HTML
Você aprendeu a linguagem HTML e acompanhou, na prática,
as TAGS mais comuns.
Na próxima página você irá aprender sobre HTML5. Se você deseja
se aprofundar para tornar sua página bonita, colorida, dinâmica e de
acordo
com
as
especificações W3C dos
padrões WEB,
recomendamos o curso de XHTML e depois o de CSS.
Posteriormente, também invista em JavaScript e Tableless.
Introdução HTML5
A história do HTML é comentada em profundidade nos cursos
de HTML e XHTML. Neste curso é apresentado apenas um
resumo:
Nos anos 1990 as atividades na Internet giraram em torno
do HTML. Sua primeira versão(projeto) foi concebida em 1993 e
rapidamente chegou à versão4.01, em 1999 (antes disso passou
pelas versões 2.0,3.2 e 4.0). Mas, tão rápido quanto o lançamento
das quatro primeiras versões, o foco dos padrões web mudou
radicalmente para o XML/ XHTML.
Requisitos




Saber (X)HTML.
CSS
javascript
jQuery (opcional, porém é fundamental a qualquer
desenvolvedor Web; alguns exemplos do curso usam jQuery).
W3C
Tim Berners-Lee criou/ propôs a Web (URI + HTTP + HTML)
em 1989 (veja
mais
a
respeito
no
site
http://www.w3.org/History/1989/proposal.html)
e
o W3C em 1994, no MIT, Laboratório de Ciência da Computação.
Uma das principais funções desempenhadas pelo W3C é
desenvolver padrões, denominados "Recomendações doW3C", que
por sinal hoje estão sendo muito bem seguidos pelos navegadores,
com uma ou outra diferença (principalmente em se tratando do
Internet Explorer). Com a chegada do HTML 5, ninguém quer ficar
para trás, então a esperança é a de que o Internet Explorer siga
com mais afinco tais padrões.
WHATWG - Web Hypertext Application Technology Working
Group
Grupo formado em 2004 e mantido até hoje por grandes empresas
e desenvolvedores como, por exemplo, Mozilla Foundation, Opera
Software e Apple Inc.
WHATWG e W3C trabalhavam separadamente até que, por volta
de 2006, o trabalho do WHATWG foi conhecido pela W3C. No
mesmo ano, Tim Berners Lee(criador da Web e diretor do W3C)
anunciou que trabalharia em conjunto com o WHATWG no
desenvolvimento do HTML 5 e que o XHTML continuaria sendo
mantido paralelamente, de acordo com as mudanças causadas
no HTML. Porém, o grupo que estava cuidando do XHTML foi
dissolvido em 2009, mostrando que o HTML 5 é realidade e veio
para ficar.
WHATWG, W3C e IETF
O objetivo do grupo em conjunto com o W3C: Trabalhar na
evolução do HTML. Evoluir e acelerar o avanço dos Padrões Web.
Resultado: No mesmo ano (2004) tiveram início as especificações
do HTML5.
A Internet Engineering Task Force (IETF) é responsável por
protocolos de Internet como, por exemplo, o HTTP. HTML5 define
um
novo WebSocketAPI que
conta
com
um
novo WebSocket protocolo, que está em desenvolvimento por um
grupo de trabalho da IETF.
O HTML5 está pronto?
Não por completo. Há controvérsias sobre quando será
definitivamente finalizado. O fato é que está em pleno
desenvolvimento e os atributos das APIs do HTML5, usados neste
curso, podem sofrer alguma alteração com o tempo. Portanto, cabe
ao desenvolvedor ficar atento às mudanças.
O importante mesmo é saber que o HTML5 não é apenas
tendência, é realidade! E quem souber HTML5, não tenha dúvidas,
sairá na frente no mercado de trabalho, seja de Desenvolvimento
Web ou Mobile(sim, também será abordado posteriormente
sobreHTML5 e Dispositivos Móveis).
Editores HTML5
Como você já deve saber, pode-se desenvolver em HTML até com
o Notepad. Entretanto, recomendamos estes editores:
- Notepad++ - Um dos melhores editores de textos simples, possui
suporte para coloração de sintaxe do HTML (http://notepad-plusplus.org/).
- Aptana Atualmente,
uma
das
melhores IDEs para
desenvolvimento web com HTML5. Tem suporte para "auto
complete" e reconhece os novos elementos e atributos do HTML5,
bem
como
as
novas
regras
do
CSS3 (http://www.aptana.com/products/studio3).
Exemplo de autocomplete no Aptana Studio:
reversed é um atributo novo introduzido no HTML5para o
elemento e será ensinado posteriormente. Veja que o aptana o
identificou e, em inglês, explicou sua utilidade.
Uma nova visão de desenvolvimento
O HTML5 é baseado em diferentes princípios de "Design",
conforme descrito nas especificações do WHATWG. São eles:




Compatibilidade
Utilidade
Interoperatividade
Acesso Universal
Saiba sobre cada um deles:
Compatibilidade
Pela análise de milhões de páginas foi descoberto um
comportamento em comum: utilizar em cabeçalhos uma
div com id igual a "header". Diante de tal situação, como
o HTML5 veio para resolver problemas reais, foi criada a tag <
header >. O HTML5 introduziu tags semânticas para dar significado
aos sites.
Veja a lista dos 20 ids mais populares entre as páginas Web:



















Footer
Content
Header
Logo
Container
table1
menu
layer1
autonumber1
search
nav
wrapper
top
table2
layer2
sidebar
image1
banner
navigation
Para
visualizar
a
lista
completa,
http://devfiles.myopera.com/articles/572/idlist-url.htm.
acesse:
Foi a partir de dados e problemas reais que algumas
novas tags foram criadas para o HTML5, como se pode ver em:
http://code.google.com/intl/pt-BR/webstats/.
Essa página do google possui estatísticas de uso que foram
filtradas a partir da análise de bilhões de páginas. Veja um exemplo
em:
http://code.google.com/intl/pt-BR/webstats/2005-12/pages.html.
A análise não é recente (é de 2005), mas ainda é válida porque o
cenário não mudou tanto.
O HTML5,
apesar
de
possuir
algumas
características
revolucionárias, não é uma completa e absoluta revolução (com
mudança radical de conceitos e estrutura), mas sim uma evolução,
ao mudar para melhor algumas das práticas existentes. HTML5
apropria-se do "conceito" de "não reinventar a roda", mas sim
atualizá-la, melhorá-la.
Utilidade
Garante que a marcação HTML possa ser usada para todos os fins
a que se destina. OHTML5 possui uma prioridade que, quando em
dúvida, aplica uma solução voltada para o "bem comum" do
usuário. Por exemplo:
Dados os seguintes ids:



id="container"
id=container
ID="container"
Conforme você sabe, apenas a primeira opção é um id válido
em XHTML, pois o atributo está em minúsculo e entre aspas. Os
outros dois são considerados inválidos.
Xhtml.html
Ao tentar validar esse XHTML, aparecerão os seguintes erros:
Todos os dois ids são inválidos para o XHTML, pois sua marcação
é rígida quanto à estrutura do documento.
Html5.html
Ao validar o documento HTML5 aparecerá este resultado:
É claro que você não pode criar seu documento todo mal
formatado; na verdade, não deve! Siga a rigorosidade do XHTML.
Esse exemplo serve apenas para mostrar que o HTML 5 é voltado
para o usuário. Se algo falhar, o HTML5 conta com um
"mecanismo" que tenta contornar a situação para oferecer o melhor
possível ao usuário. O HTML5 sabe que esses ids estão colocados
de forma errônea; ele consegue identificar isso e, internamente, via
mecanismos de XML contorna tal situação para que, ainda assim, o
documento seja exibido e formatado da melhor forma possível.
Para um documento XHTML se beneficiar das funcionalidades e
estar em conformidade com a linguagem de marcação XML (essa
era a ideia central daW3C), deve ser servido usando o mime type
application/xhtml+xml ou application/xml. No entanto, não é isso
o que acontece em 95% dos casos. Os documentos XHTML são
servidos usando o mime type para HTML text/html.
A ideia da W3C era evoluir o HTML em conformidade com
o XML (idéia muito boa e coerente, por sinal). No entanto,
esbarraram
no
seguinte
problema:
Se
o
documento XHTML violasse alguma regra do XML, causaria um
"erro fatal" no documento e todo o resto nem seria exibido.
Essa
situação
pode
ser
simulada,
servindo
um
documento XHTML Strict com o mime type xml. Se você não
programa PHP, não se preocupe, os resultados serão postados
aqui. Acompanhe:
teste-xhtml-xml.php
Ps: Foi usada a função header() do PHP para forçar o documento
ser servido como XML.
Tudo ok, é um documento XML válido. Agora, se no h1 forem
removidas as aspas duplas do atributo class:
Teste-xhtml-xml.php
No Firefox:
Se o documento fosse exibido usando o mime type text/html, esse
erro seria ignorado e só seria identificado no validador da W3C.
Mas, ao ser exibido como XML o erro foi fatal e o documento nem
foi exibido pelo navegador. Por esse motivo os desenvolvedores
não adotaram o XHTML como sendo XML, por receio de seus sites
serem abruptamente interrompidos a qualquer falha mínima de
marcação.
Consideração: Existe uma maneira de usar o HTML5em
conformidade com o XML; no entanto, não faz parte do escopo
deste curso. O foco é HTML5.
Segurança
Segurança é grande preocupação do HTML5 para que suas
funcionalidades não ofereçam brechas. Mas, convenhamos, as
falhas sempre existirão. Inclusive, alguns cientistas da computação
já encontraram possíveis falhas no "Draft" (rascunho) do HTML5 e
relataram o fato (provavelmente já foram corrigidas).
A questão de segurança será constantemente atualizada e a
tendência é ter cada vez mais páginas seguras. Não se pode negar
que o HTML5, nesse sentido, é bem mais seguro que as outras
versões do HTML.
O HTML5 implementou a validação de dados de formulários, mas é
sempre bom ressaltar: Não confie apenas na validação no lado do
cliente, valide também os dados recebidos no servidor.
Para se ter ideia, no lado do cliente (usuário/browser), uma
pequena falha na expressão regular da validação de formulários
pode gerar um "ataque dDos" e o Browser entrar em
um Loop infinito e travar (apenas um exemplo).
Alguns dos problemas que podem gerar violação de segurança e
que foram / serão corrigidos no HTML5podem ser encontrados
neste
ótimo
site: HTML5
Security
Cheatsheet (http://html5sec.org/).
Simplificar e evitar complexibilidade
No HTML5 tudo está relacionado com simplificar sempre que
possível e evitar complexibilidade. Mais que isso, a
interoperabilidade visa fazer com que uma implementação funcione
em variados sistemas. OHTML5 foi projetado para lidar com erros,
preferindo a "recuperação" do dado, mesmo exibindo-o um pouco
"quebrado" (como mostrado no início do curso, no exemplo do uso
incorreto do atributo ID), do que apresentar a mensagem de erro
para o usuário. Ou seja, assim como citado anteriormente, o usuário
final é o centro das "atenções".
Acesso Universal
O princípio de acesso universal pode ser dividido em três
categorias:

Acessibilidade: Melhor
suporte
aos
usuários
com
deficiências (visuais, auditivas e etc.). O HTML5trabalha em
conjunto
com
a Web
Accessibility
Initiative (WAI)
fornecendo melhores alternativas de acesso como, por
exemplo, provendo melhor suporte aos leitores de tela e etc.
Um clássico exemplo é o elemento img: se o leitor de tela não
carrega determinada imagem, não significa que ela deva ser
desconsiderada. Ela deve continuar para que seu


atributo alt (que é a descrição textual da imagem) seja lido
pelo leitor. O ponto principal da questão é: Fornecer meios
alternativos de acesso para todos. E nisso, o HTML5 promete
fazer o possível para que cada vez mais se tenha melhor
acessibilidade.
Independência de mídia: O HTML5 deve funcionar em
diferentes plataformas e dispositivos, seja computador,
notebook, smartphone, tablet e etc.
Suporte para todas os idiomas: Com essa funcionalidade, a
produção de documentos nos diferentes idiomas existentes é
facilitada. Por exemplo, usar a tag para exibir textos do idioma
leste asiático.
APIs do HTML 5
O HTML5 fornece suporte nativo a muitos recursos que antes só
eram possíveis instalando algum plugin no navegador ou usando
complexos hacks (APIs, socket nativo e etc.).
API significa "Application Programming Interface". Pense em
uma API como sendo uma interface gráfica de usuário, exceto que
em vez de ser uma interface para seres humanos, é uma interface
para o código.
Uma API fornece um conjunto de "botões" (métodos pré-definidos)
para o código, que podem ser pressionados para se obter o
comportamento desejado do sistema. API baseada em comandos é
uma forma de abstrair as coisas mais complexas que são feitas em
segundo plano (ou às vezes por um software de terceiro).
Algumas das APIs atualmente em desenvolvimento/teste:










The Contacts API - http://www.w3.org/TR/contacts-api/.
Selectors API Level 2 - http://www.w3.org/TR/selectors-api2/.
Indexed Database API - http://www.w3.org/TR/IndexedDB/.
Web Workers - http://www.w3.org/TR/workers/.
Web Storage - http://www.w3.org/TR/webstorage/.
The Web Sockets API - http://www.w3.org/TR/websockets/.
Selectors API Level 1 - http://www.w3.org/TR/selectors-api/.
Server-Sent Events - http://www.w3.org/TR/eventsource/.
XMLHttpRequest - http://www.w3.org/TR/XMLHttpRequest/.
XMLHttpRequest
Level
2http://www.w3.org/TR/XMLHttpRequest2/.




























Geolocation
API
Specification http://www.w3.org/TR/geolocation-API/.
HTML Canvas 2D Context - http://www.w3.org/TR/2dcontext/.
File API - http://www.w3.org/TR/FileAPI/.
File API: Writer - http://www.w3.org/TR/file-writer-api/.
File API: Directories and System - http://www.w3.org/TR/filesystem-api/.
HTML Microdata - http://www.w3.org/TR/microdata/.
Media Capture API - http://www.w3.org/TR/media-captureapi/.
HTML Media Capture - http://www.w3.org/TR/html-mediacapture/.
Messaging API - http://www.w3.org/TR/messaging-api/.
HTML5
Web
Messaging http://www.w3.org/TR/webmessaging/.
Web Notifications - http://www.w3.org/TR/notifications/.
Clipboard API and Events - http://www.w3.org/TR/clipboardapis.
Calendar API - http://www.w3.org/TR/clipboard-apis.
Battery
Status
Event
Specification http://www.w3.org/TR/battery-status.
Touch Events Specification - http://www.w3.org/TR/touchevents.
Page Visibility - http://www.w3.org/TR/page-visibility/.
Timing
Control
for
Script-Based
Animations http://www.w3.org/TR/animation-timing/.
Navigation Timing - http://www.w3.org/TR/navigation-timing/.
Resource Timing - http://www.w3.org/TR/resource-timing/.
The Network Information API - http://www.w3.org/TR/netinfoapi/.
DeviceOrientation
Event
Specification http://www.w3.org/TR/orientation-event/.
User Timing - http://www.w3.org/TR/user-timing/.
Performance Timeline - http://www.w3.org/TR/performancetimeline/.
Web SQL Database - http://www.w3.org/TR/webdatabase/.
Programmable
HTTP
Caching
and
Serving http://www.w3.org/TR/DataCache/.
Web Audio API - http://www.w3.org/TR/webaudio/.
Audio Processing API - http://www.w3.org/TR/audioproc/.
Vibration API - http://www.w3.org/TR/vibration/.
A maioria dessas APis ainda não são realidade. Estão em pleno
desenvolvimento ou os Browsers atuais ainda não suportam tais
funcionalidades.
HTML 5 e a compatibilidade entre os navegadores
Atualmente, o Browser de melhor suporte aoHTML5 é o Google
Chrome. Logo em seguida vem Firefox, Opera e Safari.
Neste curso, serão usados os seguintes Browsers:



Google
Chrome
Canary http://tools.google.com/dlpage/chromesxs.
Firefox versões Beta/Release - http://www.mozilla.org/ptBR/firefox/all-beta.html.
Opera Beta/Release - http://www.opera.com/browser/next/.
O Google Chrome Canary será o principal. Essa versão Canary é
para desenvolvedores, sendo lançadas atualizações diariamente.
Além disso, é o Browser com o melhor suporte ao HTML5, sendo
possível testar a maioria das funcionalidades. O que o Google
Chrome ainda não tiver implementado, será testado no Opera
ou Firefox.
Um bom site (atualizado periodicamente) para testar o que cada
navegador suporta das principais funcionalidades do HTML5 é o
http://html5test.com/. Confira:
Faça também o teste nos navegadores Firefox e Opera.
Outro grandioso e talvez o principal site é: http://caniuse.com/#index
Ele mostra um índice com links para verificar a compatibilidade de
diversas funcionalidades junto aos navegadores. Verifica
propriedades
da CSS3, JavaScript, APIs (as APIs citadas
anteriormente), SVG e etc. Para visualizar, basta clicar em um dos
itens, por exemplo:
Abrirá uma tela com a análise atual de compatibilidade desta
funcionalidade:
Essa tela informa que a API está em desenvolvimento, sua
descrição e o suporte que cada versão de navegador fornece. Veja
que apenas o Google Chrome, a partir da versão 13, tem suporte
para o que foi desenvolvido até o momento; o Firefox tem suporte
parcial. No decorrer deste curso, algumas dessas APis serão
exemplificadas.
Caso à parte: ultimamente a Microsoft tem realizado um bom
trabalho com o Internet Explorer que, ainda assim, fica atrás de
todos os outros citados aqui, sendo que as versões 8 e 7 não têm
quase nenhum suporte aoHTML5. Com isso, os usuários têm
necessidade em atualizar seus Browsers, algo que vem
acontecendo com frequência ultimamente e, isso, para os
desenvolvedores, é ótimo!
Conheça outros sites que podem auxiliar sobre a compatibilidade
atual dos navegadores junto aos recursos do HTML5:


http://www.findmebyip.com/litmus/.
http://samples.msdn.microsoft.com/ietestcenter/.
O que é o DOM?
DOM é uma interface de programação, baseada no modelo de
objetos, que permite a manipulação e transformação de
documentos em XML. A interface DOM manipula documentos XML
na forma de estrutura em árvore. Quando um documento é
carregado na memória do computador, suas estruturas podem ser
lidas e manipuladas através do objeto DOM.
A interface DOM faz a representação do documento através de uma
árvore de nós (tree of node), em que cada objeto possui sua
propriedade e método.
No DOM existem objetos para representação de elementos,
atributos, entidades e etc. O objeto básico do DOM é o nó (node),
que é um objeto genérico na árvore e, portanto, a maioria dos
objetos DOM herdam dele. O elemento mais alto de uma
árvore DOM é representado pelo objeto Document, que também
herda do objeto Node. Conceitualmente, esse elemento é a raiz da
árvore e a partir dele é possível acessar a árvore completa do
documento XML.
Também se pode dizer que DOM é uma API que fornece acesso à
estrutura do documento. Por exemplo, o objeto Window pertence
ao DOM e nesse objeto há vários métodos de manipulação de uma
janela
do Browser.
Um
método
bem
conhecido
é
o Window.scrollX(), que retorna a posição horizontal do cursor do
mouse na tela. Ou seja, o DOM é o "meio", a forma de se acessar e
interagir com os objetos, seus métodos e propriedades.
Representação estrutural deste documento:
Representação estrutural deste documento em forma de diagrama:
Ao exibir esse documento o navegador vai criar na memória uma
estrutura hierárquica (em formato de árvore) com representações
de cada objeto exibido. Essa estrutura se inicia com o
objeto window, que representa a própria janela aberta do
navegador. Cada navegador tem pequenas particularidades ao
montar os detalhes da estrutura, mas de maneira geral é possível
se ater ao que eles têm em comum. O exemplo acima, quando
exibido pelo navegador, deve gerar a seguinte estrutura:










window: a janela do navegador ou frame onde o documento é
carregado.
opener: se é uma janela popup, opener aponta para a janela
que a abriu.
parent: se é um frame, parent aponta para o frame ou janelapai, aquele que contém o frameset que carrega a página.
frames: aponta para uma coleção, se houver em frames no
documento (neste exemplo não há).
location: objeto que gerencia a URL da janela atual. Possui,
entre outros, os métodos reload e replace.
history: objeto que gerencia o histórico da janela atual.
Possui, entre outros, os métodos back e forward.
document: representa o documento HTML aberto (aqui deve
começar, de fato, o seu interesse).
title: é o título do documento.
body: representa a tag body, considerada a tag-base para o
acesso ao conteúdo do documento.
childNode 0: é o elemento h1 no documento acima, primeiro
filho do body.


childNode 1: é o elemento p, segundo filho debody. Esse
elemento também possui um filho:
childNode 0: é o elemento b dentro do p.
Essa estrutura está bastante simplificada, pois cada um dos
elementos tem mais propriedades e métodos. O importante é saber
que os elementos são representados em árvore (Hierarquia), como
mostrado acima.
É possível visualizar e navegar sobre toda a estrutura DOM de um
documento
usando
a
extensão Firebug para
Firefox ou
"ferramentas do desenvolvedor" do Google Chrome.
A título de curiosidade, usando o Firebug para Firefox, veja a
estrutura DOM completa do documento acima:
Observe que o DOM em si, é algo complexo. Querer entendê-lo
com excelência (bem como manipulá-lo) não é tarefa rápida e exige
muito estudo, prática e curiosidade.
Detectando recursos HTML5 com o Modernizr
Modernizr (http://www.modernizr.com/) é uma biblioteca de
detecção que possibilita verificar o suporte da maioria das
características do HTML5 e CSS3. Além disso, ela permite que
a versão 8 e anteriores do Internet Explorer reconheçam os novos
elementos do HTML5. Isso não quer dizer que nelas serão
aplicadas as funcionalidades do HTML5, mas apenas garantir que
essas versões reconheçam os principais elementos. Por exemplo,
elemento de seção que será demonstrado logo a seguir.
Essa biblioteca roda automaticamente assim que for adicionada
no head do documento. Com ela se pode verificar se
o browser suporta as mais diversas APis doHTML5, propriedades
do CSS3 e etc.
A biblioteca cria um objeto JavaScript chamado "Modernizr" com
propriedades e métodos com nomes idênticos aos das
funcionalidades a detectar.
Documentação completa:
http://www.modernizr.com/docs/.
Exemplo de uso:
Agora teste se o Browser suporta WebGL, que dispõe de
uma API para renderização de gráficos 3D, acelerados por
hardware, sem a necessidade de instalar plugins adicionais.
Exemplo
http://webglsamples.googlecode.com/ hg/aquarium/aquarium.html
Modernizr.htm
Em execução no Google Chrome Canary:
No Firefox:
No Internet Explorer:
A postura da Microsoft é a de que o WebGL é inseguro e, portanto,
não implementará no Internet Explorer. Pelo que parece, nem
mesmo as novas versões do navegador suportarão.
Aproveitando o momento, se você quiser, baixe o preview da
próxima versão do IE neste link:
http://ie.microsoft.com/testdrive/Default.html
Por fim, fica a dica: É sempre importante usar essa biblioteca em
produção em sites e projetos, pois ela garante que as versões
anteriores
do IE reconheçam
doHTML5 como elementos HTML.
os
principais
elementos
Estrutura básica de um documento HTML 5
A estrutura básica é quase a mesma das versões anteriores, sendo
a única diferença a declaração do Doctype.
Doctype
A HTML permite que desenvolvedores criem diversos tipos de
documentos, cada um definido por regras diferentes. As regras de
cada tipo são detalhadas dentro da especificação denominada
"Definição do Tipo de Documento" (Document Type Definitions DTD).
A declaração Doctype informa, aos serviços de validação e aos
navegadores modernos, a DTD que foi utilizada para elaborar a
marcação do HTML. Essa informação instrui os serviços de
validação e os navegadores sobre como tratar a página.
Existem diferentes Doctypes para uso em HTML e XHTML.
No HTML5, o Doctype foi simplificado, não havendo necessidade
de referenciar o link do DTD (como é no XHTML). Desta forma, os
navegadores já entendem que aquele documento é HTML5.
Conheça as diferenças:
Um documento XHTML seguindo o DTD Strict:
Agora, a estrutura básica de um documento HTML5:
Essa
é
basicamente
a
estrutura
sites/aplicações HTML5 neste curso.
usada
para
os
Ps: A sintaxe do Doctype não é sensível à letra, portanto, tanto faz
escrever em maiúsculo ou minúsculo. Mas é bom seguir sempre
uma regra e definir um padrão de escrita. É recomendável usar a
sintaxe usada aqui no curso.
Sintaxe do HTML5
Pode-se dizer que o HTML5 possui sintaxe mais "relaxada" pois:



Os atributos podem ser escritos tanto em letra minúscula
quanto em maiúscula.
O uso de aspas nos atributos é opcional.
O fechamento de tags vazias é opcional.
Entretanto, para melhor compreensão do código - e até mesmo
visando manter um padrão e uma boa prática - é recomendável que
você sempre siga este modelo de sintaxe:
Conclusão




Escreva os elementos e atributos sempre em letra minúscula.
Sempre use aspas nos valores dos atributos.
No HTML5 não é necessário fechar os elementos "vazios": ao
invés de < img / > faça: < img > (se você está muito
acostumado com o XHTML e não consegue deixar de fechar
os elementos, sem problemas; é apenas uma sugestão de
sintaxe que, inclusive, é usada pela W3C para o HTML5).
Atributos booleanos não precisam de valor, noHTML5; veja o
"required"
do input.
Portanto,
ao
invés
de: required="required" defina apenas: required. Agora, se
o tipo do documento for XHTML, por exemplo, os booleanos
devem conter um valor, no caso: required="required".
Charset
Para que sejam interpretados corretamente por navegadores e
aprovados nos testes de validação de marcação, todos os
documentos devem declarar o tipo de codificação de caractere
usado em sua criação (utf-8, ISO-8859-1 e etc).
A meta tag "charset" define a codificação do documento.
Em cada conjunto de caracteres (charsets) existe um número
único, para cada caractere, designado para sua identificação. Essas
unidades numéricas são chamadas de "code points". Por exemplo,
a letra "a" no encoding ISO 8859-1 está na posição de número 65,
e assim por diante com cada caractere do conjunto.
O computador pessoal foi desenvolvido pelos norte-americanos,
que não utilizam acentos em suas escritas. A primeira tabela de
caracteres adotada em larga escala, a ASCII (sigla para Código
Padrão Americano para Intercâmbio de Informações), não continha
acentos. Além disso, era um código de 7 bits, e não de 8. Ou seja,
ao invés de 256 posições, a tabela ASCII tinha apenas 128. Como
curiosidade, conheça a tabela ASCII original (não se preocupe, pois
não é necessário decorá-la):
Com a popularização do computador ao redor do mundo, passou a
ser necessário usar acentos e caracteres de outros idiomas. Isso
fez surgir uma infinidade de outras tabelas de caracteres.
Felizmente, quase a totalidade delas segue a tabela ASCII nas
primeiras 128 posições. Ou seja, um texto em ASCII, escrito em
inglês - ou em "portugues sem acentuacao" - será lido em qualquer
computador ao redor do mundo. Porém, ao usar acentos, é
necessário que o texto seja salvo numa tabela específica para que
seja lido usando aquela determinada tabela.
Um exemplo em que acontece "erro" é de um site
usando charset não configurado previamente para ser exibido no
navegador, onde deveria ter "acentos" no texto, existem caracteres
especiais.
Por isso, é necessário indicar em qual página de código você salvou
o texto.
Importante
Talvez você nem indique e abra a página e veja que está tudo
normal. Mas, lembre-se, você está usando um computador em
português - ou em outro idioma ocidental - em que a página de
código-padrão provavelmente é a windows-1252, padrão em
sistemas Windows em português, a iso-8859-1, padrão em muitas
distribuições Linux em português, ou a utf-8, e seu navegador está
configurado para primeiro testar essas tabelas quando o documento
não possuir indicação de charset. Mas nada garante que, sem
indicar explicitamente o charset utilizado, o documento vá funcionar
como, por exemplo, num Windows em japonês ou num Linux em
hebraico.
Utf-8
UTF-8 é o mais rico. Com ele é possível representar qualquer
caractere Unicode e da tabela Ascii. O UTF-8 vem sendo adotado
como um charset-padrão para páginas web, devido à boa
"compatibilidade".
Siga estes passos para configurar um documento paraUTF-8:
1 - Configurar o charset do documento. A maioria dos bons editores
possui
essa
opção.
É
recomendável
o Notepad++:
http://www.notepad-plus-plus.org/
Agora, para que o arquivo seja definitivamente salvo em utf-8, crie
uma div com um conteúdo qualquer e salve-a:
Html5.htm
2 - O segundo passo é informar na meta charset a codificação
usada (utf-8) para que os browsers usem a tabela correta. Neste
exemplo, foi informada entre as tags head do documento (linha 4 do
Notepad++).
Validação de documentos HTML5
A validação é o mecanismo que indica os erros presentes na
marcação HTML para que você possa corrigi-los.
Durante o processo de desenvolvimento é importante sempre
validar o projeto, na medida em que for avançando as etapas. Até
porque a marcação HTML pode conter erros e funcionar
normalmente em seu navegador desktop, mas não há como garantir
que funcionará em um navegador de dispositivo mobile (que pode
conter menos recursos para evitar os erros). Por isso, validar é
sempre uma boa prática.
Existem duas ferramentas para validação:


Validador
oficial
da
http://validator.w3.org/#validate_by_upload.
HTML5 Validator - http://html5.validator.nu/.
Abra o:
http://validator.w3.o/#validate_by_upload
Valide o seguinte documento:
Validar.htm
Basta selecionar o arquivo e clicar em "Check":
W3C
-
Observe que o documento passou no teste:
Agora, altere o elemento < /h1 > para:
A tag de fechamento foi trocada para a de abertura < h1 >.
Salve o documento e valide novamente:
Esse é o objetivo da validação: apontar os possíveis erros na
marcação HTML5. Descendo a barra de rolagem, você verá o
descritivo dos erros encontrados, assim você poderá localizar com
mais rapidez.
A semântica do HTML 5
A expressão "web semântica" equivale à "web com significado".
O HTML5 implementa um conjunto de tags para construir layouts de
forma mais intuitiva e semântica (com significado).
Uma página semanticamente coerente é facilmente interpretada por
humanos e máquinas. Por exemplo, o Google ao varrer um
documento HTML5 identificará o que é cabeçalho, menu, rodapé e
etc.
O HTML5 introduziu 28 novos elementos, cada um com sua
semântica. Também introduziu controles para validação de
formulários, não sendo mais necessário o uso excessivo
de Javascript para tal.
Saiba
as
diferenças
do HTML5 em
relação
ao HTML4:http://www.w3.org/TR/2010/WD-html5-diff-20100624/.
A seguir, conheça as novas tags HTML5 para
de layout que, para este fim, substituirão as tags divs.
formação
Header
O elemento < header > foi criado para definir o cabeçalho do site.
No HTML/XHTML, é muito comum os desenvolvedores criarem um
elemento div de id igual a "header". Normalmente, o cabeçalho de
um site não é duplicado nas páginas, sendo o mesmo cabeçalho
usado em todo o site com algumas modificações internas de página
para página.
Footer
A tag < footer > define o rodapé do site. Esse elemento não cria
uma nova seção tal como criam os elementos article, aside,
nav e section.
Article
O elemento < article > define um bloco de texto único. Por
exemplo, uma mensagem, um artigo, uma notícia. Em um site de
artigos, cada artigo deve ser colocado em um novo < article >.
Nav
O elemento < nav > destina-se a marcar uma seção da página que
contenha links para outras páginas. Mas nem todos os links devem
ser agrupados dentro de nav. Geralmente links de menu
e links laterais como, por exemplo, categorias de um blog e etc.
Aside
O elemento < aside > agrupa informações separadas, mas
relacionadas ao conteúdo principal. São informações como
publicidade, textos com propaganda, barras laterais e outros
conteúdos que possam ser considerados separados do conteúdo
principal.
A navegação lateral de categorias do blog à seguir é um exemplo
prático de onde seria válido o uso do aside juntamente com o
elemento < nav > para os links:
Uso_do_aside.html
Section
A tag < section > define uma nova seção genérica no documento.
Por exemplo, a página principal de um site pode ser dividida em
diversas seções: introdução ou destaque, notícias, informação de
contato e chamadas para outras páginas.
Section é semanticamente diferente de div, que pode definir
qualquer bloco de texto para formatação. Section deve ser usada
para definir algum bloco com significado para o site, já citado
anteriormente, como notícias, destaque e etc. Posteriormente você
verá isso na prática.
Entendendo as subdivisões de um documento HTML 5
Com o HTML4 é usada a tag div, que possui semântica "neutra" na
subdivisão lógica do site. Para entender o que foi explicado sobre
os elementos semânticos para a formação de layout, faça na prática
estes dois exemplos – um em HTML4 e outro em HTML5.
Blog_html4.htm
Diagrama da estrutura desse exemplo em HTML4:
Embora não haja nada errado nessa estrutura ela é desconhecida
para um navegador - ou até mesmo para programas como, por
exemplo, o Googlebot. Como saber o significado de cada parte?
Ademais, todas elas usam div que apenas define uma parte
genérica no site.
HTML5 fornece elementos que denotam claramente o que cada
parte significa. Reescreva a estrutura acima usando os novos
elementos do HTML5 para a formação de layout:
Blog_html5.htm
Ps: Foi usada uma estrutura básica, que poderia ter sido
enriquecida em se tratando de semântica. Ao final do curso esse
mesmo exemplo será retomado e modificado, com novos elementos
e nova estrutura. Até lá você aprenderá o que cada parte significa.
No navegador, o resultado visual é o mesmo do exemplo anterior:
Diagrama da estrutura desse exemplo em HTML5:
Observe que, a partir da versão 9, o InternetExplorer reconhece
os elementos do HTML5:
Mas isso não acontece com as versões inferiores. Veja o mesmo
exemplo no IE8:
Dica: Para testar o exemplo em diferentes versões do Internet
Explorer, você pode usar o software IETester
http://www.my-debugbar.com/wiki/IETester/HomePage
Soluções
A primeira e menos recomendada é usar Javascript para criar os
elementos. Por exemplo, altere o cabeçalho do exemplo de
HTML5 para:
A segunda e mais recomendada solução é usar
biblioteca Modernizr(http://www.modernizr.com/), por exemplo:
Exemplo em execução no IE8:
a
A biblioteca Modernizr, como dito no início do curso, também cria
referência aos novos elementos do HTML5 nos browsers mais
antigos. Por isso, seu uso em um projeto HTML5 é altamente
recomendado.
Agrupando nav e outros elementos em um aside
Blog_html5_2.htm
A especificação diz: "O elemento aside pode ser usado para
barras laterais, publicidade, grupos de elementos de navegação e
para outros conteúdos que são considerados separados do
conteúdo principal da página".
Usando a mesma lógica, coloca-se o "sobre o autor" e a navegação
para suas redes sociais dentro do elemento aside.
Para fins de layout, coloca-se dentro da div #artigos os "articles".
Dessa
forma
flutua-se
a div #artigos,
usando CSS. De acordo com a especificação, o < article
> define o conteúdo externo, que pode ser um artigo de notícias a
partir de provedor externo, um texto de blog, um texto de fórum ou
qualquer outro conteúdo independente.
No projeto final do curso será desenvolvido um site completo
em HTML5, usando os vários recursos que ainda serão mostrados.
Portanto, não se assuste com esse pequeno exemplo sem estilos.
Categorias dos elementos
Cada elemento no HTML pertence a um ou mais grupos de
elementos com características similares. As categorias de conteúdo
são:







Metadados
Fluxo
Seção
Cabeçalhos
Frase
Incorporado
Interativo
A especificação do HTML5 traz uma ilustração mostrando como as
categorias de conteúdo se relacionam entre si:
Veja
a
lista
completa
dos
elementos
e
categorias:http://www.whatwg.org/specs/web-apps/currentwork/#elements-1
Metadados
Os elementos que compõem a categoria Metadata são:







Base
Command
link
meta
noscript
script
style
suas

title
Esse é o conteúdo que vem antes da apresentação, formando uma
relação com o documento e seu conteúdo com outros documentos.
Fluxo
A maioria dos elementos utilizados no corpo do documento é
categorizada como "Flow Content":































a
abbr
address
area
article
aside
audio
b
bdo
nav
noscript
object
ol
output
p
pre
progress
q
ruby
samp
script
section
select
blockquote
br
button
canvas
cite
code
command
datalist











































del
details
dfn
div
dl
em
embed
fieldset
figure
footer
form
h1
h2
h3
h4
h5
h6
header
hgroup
hr
i
iframe
img
input
ins
kbd
keygen
label
link (Se o atributo itemprop for utilizado)
map
mark
math
menu
meta (Se o atributo itemprop for utilizado)
meter
small
span
strong
style (Se o atributo scoped for utilizado)
sub
sup
svg
table







textarea
time
ul
var
video
wbr
Text
Ps: Foram mostradas aqui as Tags < b > e< i > que, de acordo
com a especificação doHTML5, devem ser usadas só em última
instância, pois podem muito bem ser substituídas pelas tags <
strong > e < em > respectivamente.
Seção
Os elementos de seção definem o grupo de cabeçalhos e rodapés.
São elementos que agrupam outros elementos no documento:




article
aside
nav
section
Cabeçalhos
Definem uma seção de cabeçalhos. São estes:







h1
h2
h3
h4
h5
h6
hgroup
Frase
Constitui-se de elementos que marcam o texto do documento, bem
como os elementos que marcam este texto dentro do elemento de
parágrafo:




































a
abbr
area (se for descendente de um elemento de mapa)
audio
b
bdo
br
button
canvas
cite
code
command
datalist
del (se contiver um elemento da categoria de Frase)
dfn
em
embed
i
iframe
img
input
ins (se contiver um elemento da categoria de Frase)
kbd
keygen
label
link (se o atributo itemprop for utilizado)
map (apenas se contiver um elemento da categoria de Frase)
mark
math
meta (se o atributo itemprop for utilizado)
meter
noscript
object
output
progress
q
















ruby
samp
script
select
small
span
strong
sub
sup
svg
textarea
time
var
vídeo
wbr
Text
Incorporado
Elementos que importam outra fonte de informação para o
documento:









audio
canvas
embed
iframe
img
math
object
svg
vídeo
Interativos
São elementos que fazem parte da interação de usuário:






a
audio (se o atributo control for utilizado)
button
details
embed
iframe









img (se o atributo usemap for utilizado)
input (se não for do tipo hidden)
keygen
label
menu (se for do tipo toolbar)
object (se o atributo usemap for utilizado)
select
textarea
vídeo (se o atributo control for utilizado)
Atributos e elementos descontinuados (obsoletos) no HTML5
Alguns atributos foram descontinuados porque modificam a
formatação do elemento e suas funções podem ser substituídas
com o uso das CSS. Evite usá-los nos sites HTML5. Os atributos
que foram descontinuados são muitos e você não precisa - e nem
deve - gravá-los. Deve ser aplicada apenas uma regra geral:
? Não use atributos para prover formatação aos elementos. Ao
invés disso, tente usar CSS.
Atributos
Conheça os atributos descontinuados (a lista é extensa):
















charset - No elemento: a
charset - No elemento: link
coords - No elemento: a
shape - No elemento: a
methods - No elemento: a
methods - No elemento: link
name - No elemento: a (except as noted in the previous
section)
name - No elemento: embed
name - No elemento: img
name - No elemento: option
rev - No elemento: a
rev - No elemento: ink
urn - No elemento: a
urn - No elemento: link
nohref - No elemento: area
profile - No elemento: head






































version - No elemento: html
usemap - No elemento: input
longdesc - No elemento: iframe
longdesc - No elemento: img
lowsrc - No elemento: img
target - No elemento: link
scheme - No elemento: meta
archive - No elemento: object
classid - No elemento: object
code - No elemento: object
codebase - No elemento: object
codetype - No elemento: object
declare - No elemento: object
steby - No elemento: object
type - No elemento: param
valuetype - No elemento: param
language - No elemento: script
event - No elemento: script
for - No elemento: script
datapagesize - No elemento: table
summary - No elemento: table
abbr - No elemento: td e th
axis - No elemento: td e th
datasrc - Nos elementos: a, applet, button, div, frame, iframe,
img, input, label, legend, marquee, object, option, select, span,
table, e textarea
datafld - Nos elementos: a, applet, button, div, fieldset, frame,
iframe, img, input, label, legend, marquee, object, param,
select, span, e textarea
dataformatas - Nos elementos: button, div, input, label,
legend, marquee, object, option, select, span, e table
alink - No elemento: body
bgcolor - No elemento: body
link - No elemento: body
marginbottom - No elemento: body
marginheight - No elemento: body
marginleft - No elemento: body
marginright - No elemento: body
margintop - No elemento: body
marginwidth - No elemento: body
text - No elemento: body
vlink - No elemento: body
clear - No elemento: br











































align - No elemento: caption
align - No elemento: col
char - No elemento: col
charoff - No elemento: col
valign - No elemento: col
width - No elemento: col
align - No elemento: div
compact - No elemento: dl
align - No elemento: embed
hspace - No elemento: embed
vspace - No elemento: embed
align - No elemento: hr
color - No elemento: hr
noshade - No elemento: hr
size - No elemento: hr
width - No elemento: hr
align - No elemento: h1 - h6
align - No elemento: iframe
allowtransparency - No elemento: iframe
frameborder - No elemento: iframe
hspace - No elemento: iframe
marginheight - No elemento: iframe
marginwidth - No elemento: iframe
scrolling - No elemento: iframe
vspace - No elemento: iframe
align - No elemento: input
hspace - No elemento: input
vspace - No elemento: input
align - No elemento: img
border - No elemento: img
hspace - No elemento: img
vspace - No elemento: img
align - No elemento: legend
type - No elemento: li
compact - No elemento: menu
align - No elemento: object
border - No elemento: object
hspace - No elemento: object
vspace - No elemento: object
compact - No elemento: ol
align - No elemento: p
width - No elemento: pre
align - No elemento: table


























bgcolor - No elemento: table
cellpadding - No elemento: table
cellspacing - No elemento: table
frame - No elemento: table
rules - No elemento: table
width - No elemento: table
align - Nos elementos: tbody, thead, e tfoot
char - Nos elementos: tbody, thead, e tfoot
charoff - Nos elementos: tbody, thead, e tfoot
valign - Nos elementos: tbody, thead, e tfoot
align - Nos elementos: td e th
bgcolor - Nos elementos: td e th
char - Nos elementos: td e th
charoff - Nos elementos: td e th
height - Nos elementos: td e th
nowrap - Nos elementos: td e th
valign - Nos elementos: td e th
width - Nos elementos: td e th
align - No elemento: tr
bgcolor - No elemento: tr
char - No elemento: tr
charoff - No elemento: tr
valign - No elemento: tr
compact - No elemento: ul
type - No elemento: ul
background - Nos elementos: body, table, thead, tbody, tfoot,
tr, td, e th
Reiterando: Sempre que tiver que estilizar, use CSS e não
atributos dos elementos. Essa é a recomendação da W3C para uma
página cada vez mais semântica e limpa.
Elementos descontinuados
São estes os elementos que o HTML5 não mais provê
suporte:
 < acronym > - Use o elemento < abb r>.
 < applet > - Use o elemento < object > .
 < basefont > - Use CSS para conseguir esse
resultado.
 < bgsound > - Use o elemento < audio >.



















< big > - Use CSS para conseguir esse resultado.
< blink > - Não use. Isso é dos primórdios do
HTML4.
< center > - Use CSS para conseguir esse
resultado.
< dir > - Use o elemento < ul >.
< font > - Use CSS para conseguir esse
resultado.
< frame > - Foi descontinuado por ferir os
princípios de acessibilidade. Com CSS e uma div
dá para "emular" em partes um frame.
< frameset > - Idem < frame >.
< isindex > - Não use, também é dos primórdios
do HTML 4.
< marquee > - Não use, também é dos primórdios
do HTML 4.
< multicol > - Não mais suportado pelos
Browsers atuais. Não use.
< nobr > - Use CSS para conseguir esse
resultado.
< noframe > - Como já dito acima, use frames só
em último caso e, ao usar, não precisa dessa tag,
pois os browsers ainda suportam frames. <
noscript > - 100% dos Browsers atuais suportam
JavaScript, portanto, seu uso pode ser
descartado.
< s > - Não use. < spacer > - Não use.
< strike > - Use CSS para conseguir esse
resultado.
< tt > - Use CSS para conseguir esse resultado.
< u > - Use CSS para conseguir esse resultado.
< tt > - Use CSS para conseguir esse resultado ou
uma tag equivalente.
< xmp > - Use o elemento < code >.
< rb > - Use o elemento < ruby >.
Não é conteúdo deste curso explicar o que cada elemento acima
faz. Caso você não conheça algum, é importante testá-lo e ver o
resultado para entender por que pode ser trocado por uma tag que
o HTML 5 provê suporte ou por CSS.
A W3C possui a ferramenta - pouco conhecida, mas muito útil "W3C Cheatsheet", referência completa de tags e atributos
doHTML5. Inclusive, ela marca os elementos e atributos
descontinuados e também os novos e que ainda estão em
"rascunho/construção".
Para
acessá-la:
http://www.w3.org/2009/cheatsheet/. Veja:
Definindo acrônimos e abreviações
A tag < acronym >, que dava sentido às abreviações, foi cancelada
no HTML5. Agora acrônimos e abreviações devem ser feitos
usando a tag < abbr >. Confira:
Abreviacoes.html
Novos eventos do objeto Window
Novos eventos para o Objeto Window foram implementados, mas
a maioria deles ainda sem suporte nos navegadores. São estes:
















onafterprint
onbeforeprint
onbeforeonload
onerror
onhaschange
onmessage
onoffline
ononline
onpagehide
onpageshow
onpopstate
onredo
onresize
onstorage
onundo
onunload
Elementos que tiveram sua semântica alterada
No HTML existiam alguns elementos que traziam apenas
características visuais e não semânticas. Alguns deles (já
mostrados anteriormente) foram descontinuados, pois eram
facilmente substituídos pelo uso das CSS. Entretanto, alguns velhos
conhecidos que não foram descontinuados, tiveram seus
significados semânticos alterados.
Conheça agora as mais importantes alterações.
Diferenças semânticas entre < b >, < strong >, < i > e < em >
No HTML5, o elemento < b > passa a ter o mesmo nível semântico
que um < span >, mas ainda mantém o estilo (apresentação visual)
de negrito no texto. Entretanto, ele não dá nenhuma importância
semântica (de "força") para o texto marcado com ele. O elemento
que o substituiu nesse sentido foi o < strong >.
O elemento < i > também passa a ter o mesmo nível semântico que
um < span >. Como resultado visual, o texto continua itálico e para
os usuários de leitores de tela, a voz utilizada é modificada para
indicar ênfase. Ele é útil para marcar frases em outros idiomas,
termos técnicos e para marcar visualmente um trecho em itálico
sem dar ênfase ao seu conteúdo. Ao contrário dele, o elemento <
em >, além de aplicar o estilo visual itálico, dá ênfase (significado
semântico) ao conteúdo marcado.
Como diferenciá-los em um caso real?
No HTML, < strong > representava em sua semântica "forte
ênfase" (importância) e < em > representava "ênfase". No HTML5,
essas características semânticas foram levemente alteradas
(praticamente
continuam
a
mesma
coisa): <
strong
>
significa
"importância"
e<
em
> "ênfase" com a mesma importância de < strong >.
O < em > enfatiza "estresse" linguístico e altera a nuance
linguística. Por exemplo, em uma oficina mecânica, o mecânico diz
para seu assistente, que está debaixo do carro avaliando-o:
- Consegui a chave!
O assistente responde:
Percebeu a diferença de "tom/nuance" usada?
O < strong > permaneceu praticamente a mesma coisa. Se você
tem algum conhecimento básico em SEO sabe que o significado é
empregar importância a um trecho ou palavra. Por exemplo, na
descrição do site do Aprenda:
Comando_em.html
Veja que foi destacado com < strong > o que se considera ser
importante para a frase. Não existe uma "receita de bolo" ou regra a
ser aplicada; existem diferentes formas de interpretar o que é ou
não importante em um texto. O mais importante é saber que <
strong > aplica um significado semântico de importância.
Para um destaque semântico de "importância" e ao mesmo tempo
um destaque visual de itálico, sem alterar a semântica de
"importância", pode-se usar o elemento < i >. Por exemplo:
Veja
Links em nível de bloco e o atributo href
É aceitável ter um elemento de link < a > sem o atributo href. Desta
forma ele se torna um placeholder para um link (um espaço para
ser link no futuro). Por exemplo, antes e durante o desenvolvimento,
quando algum link ainda não tinha uma página-destino definida,
usava-se o atributo href assim:
Link.html
Usar um link assim href="#" causa inconveniente ao usuário, que
acha ser de fato um link mas é só uma "capa". Além disso,
tecnicamente, é mais um link vazio para a página, sem nenhuma
referência. Então, ao invés de usar links assim, faça isto:
O link "produtos" não é "clicável" e é perfeitamente aceito
pelo HTML5 (mesmo não tendo o atributo href). Mais do que isso,
fica como um espaço de link reservado para, por exemplo, a página:
"/produtos".
Outra alteração importante foi a mudança de conceitos. Por
exemplo, antes, um elemento inline não podia conter um elemento
de bloco; agora isso é possível. Só não pode colocar dentro de
um < a > outro < a >, por exemplo.
Antes, no HTML5, quando era preciso ligar vários elementos no
mesmo link, eram usados mais de um link para se chegar ao
resultado desejado. Por exemplo:
Link2.html
No HTML5, esse problema pode ser solucionado assim:
Têm-se dois elementos e apenas uma ligação, sem duplicar
o link na página.
Atributos Globais
Atributos globais são aqueles que podem ser usados em todos os
elementos HTML5 (tanto os novos quanto os antigos).
Accesskey
Permite definir um atalho para que o usuário consiga focar algum
elemento pelo teclado (shift + alt + key). O valor do atributo pode
ser um caractere ou uma lista de caracteres separados por espaço.
Atalho.html
Ao apertar shift + alt + c:
class e id
São os mesmos velhos conhecidos do HTML - e muito usados principalmente por causa das CSS e do JavaScript.
"class" serve para identificar um ou mais elementos (grupos de
elementos).
"id" serve para identificar um elemento em particular. Cada id deve
ser único e não pode se repetir na página.
Class-id.html
O intuito desse exemplo foi mostrar que um elemento pode ter mais
de uma classe, separadas por um espaço.
Contenteditable
Permite a edição do conteúdo de um elemento. Esse atributo já
existia em algumas versões do Internet Explorer e foi introduzido
nas especificações do HTML5.
Contenteditable.html
Ao clicar no parágrafo de texto "Digite algo aqui ..." é possível
alterar o seu conteúdo.
Contextmenu
Cria um menu personalizado (menu de contexto) para o elemento.
Ao clicar no elemento com o botão direito do mouse o menu é
exibido.
O atributo deve receber o mesmo nome do id do container que
contém o menu de contexto. Menus de contexto ainda estão sendo
escritos pela W3C e os browsers não o suportam, com exceção
do Firefox.
De acordo com a documentação oficial da W3C, a sintaxe para
menu de contexto é a seguinte:
Contextmenu.html
Veja que é necessário usar o novo elemento menu do HTML5 com
o atributo type definido para "context". Como já explicado,
atualmente esse exemplo não funciona em nenhum Browser.
Como toda regra tem sua exceção, o Firefox decidiu implementar
essa funcionalidade por "conta própria" e usando uma sintaxe um
pouco diferente da publicada pela W3C.
Veja:
http://caniuse.com/#search=contextmenu
Apenas o Firefox, a partir da versão 8, suporta tal funcionalidade.
Acompanhe este exemplo:
Essa é uma funcionalidade espetacular! Pena que ainda esteja em
desenvolvimento e, por enquanto, só funcione no Firefox.
Dir
Altera a direção do texto. Os valores possíveis são: ltr (left to
right) e rtl (right to left). Podem ser traduzidos, respectivamente,
para: "da esquerda para a direita" e "da direita para a esquerda"
(um exemplo de uso dessa direção é o idioma japonês).
Dir.html
Observe que além do atributo dir,
usar CSS para conseguir esse resultado.
também
é
possível
Draggable
Esse novo atributo HTML5 torna o elemento arrastável.
Ele aceita os valores: true e false. Na falta desses valores é
definido o valor "auto", que faz com que o Browser use o arrastepadrão para a funcionalidade.
O efeito de "arrastar e soltar" só é possível
de JavaScritp, mas esse resultado não faz parte
curso, assim como a explicação detalhada
auxiliam nesse processo. No entanto, será
exemplo de como funciona:
Draggable.html
Agora, acrescente o Script ao exemplo:
com a integração
do conteúdo deste
dos eventos que
demonstrado um
Hidden
Novo atributo do HTML5, caracterizado como "atributo de
relevância", booleano, não precisa receber nenhum valor. Quando
declarado, visualmente faz com que o elemento em questão não
seja exibido pelo navegador.
Hidden.html
Observe que, internamente, o navegador define uma
regra CSS para elementos marcados com esse atributo. Entretanto,
ele não deve ser usado apenas para "ocultar" elementos, mas sim
ser usado com a ideia semântica de tornar o conteúdo em questão
irrelevante.
Para exemplificar, veja este caso em que o atributo não deve ser
utilizado:

Em um sistema de abas, é preciso exibir uma aba e ocultar
todas as outras. Para isso, você pode usar uma
classe CSS para ocultá-las.
Só use "hidden" se a ideia for ocultar e tornar aquele elemento e
seu conteúdo irrelevantes. Ainda não é certo, mas pode ser que no
futuro o motor de busca do Google entenda esse atributo de forma
a "ignorar" (não indexar e tornar irrelevante) o conteúdo marcado
com ele.
Lang
Define o idioma do conteúdo de um elemento. Quando não
presente no elemento, o idioma é o mesmo do elemento-pai. Uma
prática comum é declarar esse atributo no
elemento
< html >. Dessa forma, todos os elementos-filhos que não declaram
o atributo lang, usam o lang do elemento< html >.
Lang.html
Observe que o elemento < html > define o lang como "pt-br":
Dentro do parágrafo, o span define o lang como "en-US" (inglês
americano):
Usar o atributo lang é importante principalmente para leitores de
tela que, ao encontrarem um conteúdo em outro idioma, sintetizam
a voz referente àquele idioma.
O leitor de tela é um software usado para obter resposta do
computador por meio sonoro, usado principalmente por pessoas
com deficiência visual.
Spellcheck
Esse novo atributo do HTML5 destina-se a disponibilizar o recurso
de correção ortográfica e gramatical para os conteúdos textuais.
Ortografia.html
Resultado:
Style
Atributo já velho conhecido, usado para definir regras CSS ao
elemento. É o chamado "css inline", pois é aplicado diretamente ao
elemento. Sempre que possível evite o uso de CSS através desse
atributo, pois "suja" bastante as tags. Procure usar sempre classes
e ids.
Estilo.html
Tabindex
Define a ordem de navegação pelo teclado (tecla tab).
Tecla_tab.html
Ao apertar a tecla tab duas vezes:
Navegou para o elemento de tabindex igual a2:
Title
Define o título ao elemento em que é aplicado. Alguns exemplos de
uso:




Em um link, ele pode ser uma descrição da página de
destino.
Em uma imagem, ele pode conter os créditos da imagem ou
uma descrição dela.
Em um parágrafo, pode ser um comentário sobre o texto.
Etc.
Leitores de tela leem o texto do atributo title. Usar esse atributo
também tem importância para SEO, pois o Google entende que
o title é mais um complemento àquela informação.
Title.html
Novos elementos HTML5
O HTML5 introduziu dezenas de novos elementos, que irão auxiliar
os desenvolvedores na estruturação dos documentos. Conheça
alguns dos novos elementos a seguir.
command, menu e seus atributos
O elemento command é um comando a ser evocado pelo usuário.
Seu uso foi demonstrado na prática, no tópico sobre "contextmenu".
Veja agora os atributos disponíveis para esse elemento.
O elemento command sempre deve ser filho do elemento menu
para que os browsers o renderize.
Atributos
possíveis (além
anteriormente):


dos
globais
já
comentados
type - Define o tipo do comando. Os valores possíveis são:
command, que cria um comando normal associado a uma
ação; checkbox que cria um comando do tipo "caixa de
seleção" e o tipo radio, que cria um comando do tipo "seleção
de item".
label - Define o "label" do comando, o seu nome. Deve ser um
texto.





Icon - Assim como mostrado no tópico "contextmenu", define
um ícone para o comando.
disable - Valor booleano (true ou false) para desabilitar um
comando.
checked - Valor booleano para selecionar uma opção do
comando (apenas para comandos do tipo checkbox e radio).
radiogroup - Agrupa comandos do tipo radio (só deve ser
usado em comando do tipo radio).
title - Ao passar o mouse sobre um comando, é exibido um
"hint" com o conteúdo desse atributo.
Menu
O elemento de Menu ainda não é suportado por nenhum navegador
e está sendo desenvolvido pela equipe responsável peloHTML5.
Atributos possíveis (além
anteriormente):


dos
globais,
já
comentados
type - Define o tipo do menu. Valores possíveis: list, valorpadrão, cria uma lista de comandos sem qualquer ação;
context cria um menu de contexto, conforme demonstrado no
tópico "contextmenu"; por último, toolbar que cria um menu do
tipo "barra de ferramentas".
label - Define o "label" do menu.
Menu.html
Já que atualmente nenhum navegador suporta o elemento menu,
veja esta simulação de como poderia ficar a sua disposição
estrutural em execução:
Datalist
Elemento usado em conjunto com o elemento input. Sua função é
fornecer uma lista de sugestão quando o usuário digitar no input.
Isso é possível através de uma ligação entre os elementos. Para
isso foi criado, para o elemento input, o atributo "list" para definir
um "datalist".
Datalist.html
Atualmente,
apenas
o Opera, Google
o Firefox suportam esse elemento.
Chrome
e
O "segredo" está na ligação envolvendo o atributo "list":
details e sumary
O elemento details é muito usado para fornecer informações
textuais ou controles de formulários adicionais sobre determinado
conteúdo. Com ele é possível criar pequenos "Widgets". O
conteúdo desse elemento fica "invisível" por padrão e só aparece
quando o usuário clica sobre ele. Além dos atributos globais, ele
aceita o atributo open que define se os elementos devem, por
padrão, vir ocultos ou visíveis.
O elemento sumary foi criado para uso em conjunto com o
elemento details. Ele é uma espécie de "rótulo" ou breve sumário
das informações adicionais do details.
Atualmente, apenas o Google Chrome o suporta:
http://caniuse.com/#feat=details
summary_details.html
Foi acrescentado o atributo "open".
Resultado:
A página já abre com o details aberto.
Também é possível usar um conjunto de "details" formatados. Por
exemplo, chegando ao resultado parecido a esse mostrado na
documentação da W3C:
Obs: Esse exemplo funciona corretamente apenas no Google
Chrome.
A intenção com esse exemplo é mostrar, que muito em breve (uma
vez que apenas o Google Chrome é o navegador mais adiantado
em termos de HTML5 e CSS3), poderemos ter conteúdos bem
interativos de forma bem simples. O que antes só era possível com
o uso de CSS, imagens e jQuery, tornou-se possível de forma bem
mais intuitiva com HTML5.
dl, dt e dd
O elemento < dl > existe desde o HTML4, no entanto,
o HTML5 o reaproveitou.
Esses elementos fazem parte das chamadas "listas de
definição", que são parecidas com as listas ordenadas < ol
> e não ordenadas < ul >, mas com uma diferença: as listas
de definição sempre trabalham com dois itens: o termo e a
definição.
A lista é formada pela tag < dl > (assim como a lista
ordenada é formada pela tag < ol >), o termo é formado
pela tag < dt > e a definição pela tag < dd >.
Usar < dl > ou listas < ul > e < ol >?
Simples! Sempre que você tiver que montar uma lista
analise o seguinte:
Será uma lista de Termo - Definição? Então use < dl > pois,
com certeza, você estará desenvolvendo um conteúdo bem
mais semântico.
Será uma lista normal ou uma enumeração de itens simples?
Então use < ul > ou < ol >.
Lista1.html
Lista2.html
bdo
Elemento para definição da direção de escrita.
Bdo.html
figure e figcaption
A especificação da W3C diz:
"O elemento < figure > destina-se a marcar uma unidade de
conteúdo e opcionalmente uma legenda para o conteúdo que
se constitui em uma peça isolada do fluxo principal do
documento e pode ser retirada daquele fluxo sem alterar o
significado do documento."
Esse elemento é usado para marcar imagens, diagramas,
fotos e outros conteúdos independentes. Antes, para se fazer
isso, era preciso usar CSS e posicionar a legenda sob a
imagem. Agora ficou fácil e bem mais semântico, com o uso
dos
elementos figure efigcaption (que
representa
a
legenda).
Figure.html
Apenas reiterando: todos os elementos HTML podem ter seu
estilo modificado com o uso das CSS. Portanto, é possível
alterar o estilo da legenda.
Figure_css.html
Ok, visualmente falando não é nenhuma grande revolução.
Mas em se tratando de semântica, é muito importante.
Analise:
Antes, era feito desta forma:
No exemplo, o elemento < span > faz o papel da legenda.
Mas qual ligação semântica ele tem com a imagem? Será que
um Software (por exemplo, um robô de busca) ao ler,
entenderá a ligação?
Agora, com o uso dos elementos figure e figurecaption a
relação semântica entre a imagem e a legenda existe:
Sua função é agrupar elementos h1-h6 quando existir mais
de um título formando o cabeçalho. Podem ser usados
quantos elementos < hgroup > forem necessários.
Hgroup.html
Mark
A função desse elemento é marcar uma palavra ou texto. Os
navegadores o renderizam com o fundo na cor amarela. Mas
vale uma ressalva: Esse elemento não aplica a semântica de
ênfase do elemento < strong >, apenas o marca
visualmente.
Utilidades



Em uma pesquisa: Marcar as palavras pesquisadas no
resultado da pesquisa.
Calendário: A data atual de um calendário pode ser
marcada usando esse elemento.
Etc. São muitos os usos possíveis.
Como explicado acima, muitos cometem o erro de marcar o
resultado de uma busca com < strong >, por exemplo. Mas
o elemento < mark > foi criado exatamente para tal
finalidade, pois ele não traz valor de ênfase.
Como você pode observar, o próprio navegador trata de
definir um estilo primário para o elemento:
Mas nada impede que essa cor seja trocada. Por exemplo,
experimente acrescentar esse CSS no exemplo acima:
Mark.html
Meter
A função desse elemento é marcar uma medida escalar. Por
exemplo:



Marcar a porcentagem de uso da memória ou do HD.
A relevância do resultado de uma consulta.
O número de votos obtidos por um candidato, desde que
o total de votantes seja conhecido.
Esse elemento é adequado para marcar qualquer medida que
tenha limites inferiores e superiores. Muitos o usam para
marcar a porcentagem de download ou upload de um arquivo,
o que não é apropriado. Para tal finalidade existe o
elemento < progress > (a ser explicado em seguida).
Ele admite os seguintes atributos:




value - Define o valor da medida marcada. Seu uso é
obrigatório.
min - Define o valor mínimo da escala à qual a medida
marcada pertence. Se nenhum valor for definido,
internamente será atribuído 0.
max - Define o valor máximo da escala à qual a medida
marcada pertence. Se nenhum valor for definido,
internamente será atribuído 1.
low - Define um valor, dentro da faixa, considerado
"baixo".


high - Define um valor, dentro da faixa, considerado
"alto".
optimum - Define um valor, dentro da faixa,
considerado "ótimo".
Meter.html
Em execução no Opera:
Em execução no Google Chrome:
Progress
Elemento usado para representar o progresso de uma tarefa.
Existem duas formas de andamento do progresso:


Determinada: Usada quando a medição é feita com um
valor "máximo" definido. Dessa forma é possível calcular
a porcentagem do progresso atual.
Indeterminada: Usada quando não é possível
quantificar o término de uma ação.
Esse elemento aceita os seguintes atributos (além dos
globais):



value: Define quanto da tarefa já foi realizado.
max: Define o quanto é necessário para realizar a
tarefa.
form: Associa o elemento progress a um formulário. O
valor desse atributo deve ser o id do formulário
associado.
Progress.html
Observe que para ter um progress" indeterminado", basta
deixar de definir o atributo "value".
Os valores da progress bar, assim como os valores de
qualquer elemento, podem ser manipulados viaJavaScript.
Agora, acrescente esse JavaScript no documento:
ruby
Especifica texto Ruby (tipografia utilizada no Sudeste
Asiático). Esse elemento não será aprofundado, para maiores
informações: http://www.w3.org/TR/ruby/
time
De modo geral pode-se dizer que a função desse elemento é
designar tempo.
O < time > assegura que datas e horários apareçam em
formato padronizado e compreensível para máquinas (google
e etc).
Admite os seguintes atributos:


datetime: Define o horário e/ou data que está sendo
marcado. Caso ele não seja especificado, a data e/ou
hora deverá ser marcada como conteúdo do elemento.
pubdate: Informa que o horário marcado se refere ao
instante em que o conteúdo foi publicado. Não
é
permitido
conter
mais
que
um
elemento
< time > com o atributo pubdate declarado. Entretanto,
diferentes < article > podem conter o elemento < time
> com datas distintas de publicação (usando o atributo
pubdate). O atributo é booleano (não aceita nenhum
valor, apenas é booleano, opcional).
Time.html
Output
Esse é o novo elemento para formulários e serve de
"estrutura" para resultados de cálculos.
Ele possui os seguintes atributos:



for: Associa o output aos controles de formulário em
que está referenciado. Usa-se o ID desses controles,
pode ser mais de um, separados por vírgula.
Exemplo: for="a b".
form: Associa o elemento de forma única a um
formulário.
name: Define uma identificação "name" para o
elemento.
Output.html
No Opera:
De início, a impressão que fica é que esse elemento é um
tanto inútil e que o resultado poderia ser impresso num span,
por exemplo. Mas, é que desta forma, economizam-se
algumas linhas de código que seriam usadas com
o JavaScript para exibir o resultado em um span. Cabe ao
desenvolvedor decidir qual estratégia usar.
Obs: O input de type igual a "range" será detalhado mais
adiante.
Novos atributos do HTML5
O HTML5 introduziu
novos
atributos
em
diferentes
elementos. Veja, em detalhes e exemplos, cada um deles.
Async - Carregamento assíncrono de arquivos JavaScript.
Esse atributo é usado no elemento < script >. Sim, aquele
mesmo que se usa para definir scripts javascript. O
atributo async faz com que o script seja executado de modo
assíncrono, ou seja: a renderização da página não é "travada"
durante os milessegundos em que o script é carregado. Os
scripts que possuem esse atributo são colocados em fila (e
são baixados paralelamente) e, assim que carregados, ficam
disponíveis para o navegador.
Por definição, no modelo síncrono as chamadas e respostas
são sequenciais, ou seja: é necessário receber a resposta da
requisição anterior antes de passar para a próxima requisição.
Um processamento síncrono espera o término de uma tarefa
para iniciar a próxima, enquanto o assíncrono permite que
outras tarefas sejam executadas enquanto a primeira ainda
está sendo processada.
Compatibilidade atual:
http://caniuse.com/#search=async.
Sem o atributo async, primeiro o JS é carregado e o parser
dom é "pausado":
Async.html
O JavaScript é
carregado
assincronamente
sem
o DOM seja interrompido (algo como "multitarefa"):
que
Veja que o arquivo JS do jQuery ainda está sendo carregado
e o parser DOM já renderizou o conteúdo do documento. Isso
é feito paralelamente ao carregamento do arquivo JavaScript.
Nos browsers mais antigos que não o suportam, ele não
causa nenhum problema e o script é carregado no modelo
convencional.
Vale ressaltar que o atributo type para o < script > é
opcional. Alguns desenvolvedores nem o usam mais; já
outros, por hábito, sempre o utilizam. Usá-lo não vai
atrapalhar - e nem melhorar - o desempenho do site: a
escolha é sua. Se você levar em conta o que prega oHTML5:
"Simplificar e tornar minimalista o código", a melhor opção na
teoria seria não usar o atributo type="text/javascript".
reversed
Define uma contagem descendente para o elemento de lista
ordenada < ol >. É um atributo booleano.
Reserved.html
Esse exemplo deverá resultar em uma lista ordenada de
forma crescente e outra decrescente (reversed).
Sandbox
É um novo atributo introduzido no HTML5 para a segurança
no uso de Frames.
Frames são geralmente usados para colocar conteúdos de
terceiros na página e podem, de alguma maneira, executar
ações inesperadas. A ideia do sandbox é proteger a página
onde um iframe for adicionado, limitando o que ele pode ou
não fazer.
Operações que podem ser evitadas com o uso do atributo:





Acesso ao DOM da página-pai (tecnicamente falando
porque o iframe é relegado a uma origem "diferente" da
origem da página principal).
Executar scripts.
Inserir os próprios forms, ou manipular forms via script.
Ler ou escrever cookies, dados locais ou base de
dados SQL locais.
Desabilitar Pop-ups e Plugins.
Os valores possíveis desse atributo são:
allow-same-origin - Permite tratar o conteúdo do
iframe como sendo da mesma origem do documento que o
contém. Em outras palavras, scripts do iframe podem acessar
o DOM da "window"-pai.
allow-top-navigation - Permite "navegação superior". Por
exemplo, o iframe ter privilégio para navegar no documentopai, o documento que o contém.
allow-forms - Permite a submissão de formulários.
allow-scripts - Permite a execução de scripts. "" - Quando
declarado como booleano (sandbox) todas as restrições
acima são aplicadas.
Antes de testar o exemplo, uma observação:
O Google Chrome implementa o bloqueio de algumas
permissões ao executar arquivos localmente, por motivos de
segurança. Por isso, por ser local, o exemplo que será criado
em seguida não funcionará no Chrome. Entretanto, há como
passar um parâmetro na execução para liberar tais
permissões. Faça o seguinte:
Procure o atalho do Chrome e acesse suas propriedades:
Ao abrir, acrescente a seguinte linha do lado do EXE de
execução do Chrome: --allow-file-access-from-files
Clique em OK. Feche o Chrome e abra-o novamente.
Sandbox.html
Observe que o atributo booleano "sandbox" foi definido
no iframe. Isso faz com que todas as operações citadas
anteriormente sejam bloqueadas pelo navegador.
Acao.html
Primeiro teste: Clique no link "navegar".
Nada aconteceu, não é? Agora, clique no link "Clique aqui
para alterar":
O título "AprendaMais - Frames" do documento-pai
do frame deveria ter sido alterado, mas não foi. Essas ações
não aconteceram devido às restrições aplicadas pelo sandbox.
Agora,
altere
allow-scripts:
o sandbox para: allow-top-navigation
Atualize a página e clique novamente em navegar:
O site AprendaMais será carregado
foram permitidas as seguintes ações:
no
documento,
pois


Execução de Script.
"top navigation".
Entretanto, essas permissões não são suficientes para alterar
o texto do título no documento-pai quando for clicado em
"Clique aqui para alterar". Para que isso seja possível, é
preciso acrescentar: allow-same-origin
Atualize a página e teste. Clique no link para alterar:
Ação executada,
ao iframe.
pois
tais
privilégios
foram
concedidos
Seamless
Atributo
para
uso
com
o
elemento
< iframe >. Ele faz com que o iframe seja inserido no
mesmo contexto do documento que o contém. Em outras
palavras, links do frame abrem
no
mesmo
contexto
dos links do documento que o contém. Regras de
estilo CSS também são aplicadas para o iframe, bem como
todos os comportamentos-padrão do documento.
seamless.html
acao2.html
Nenhum navegador atual tem suporte a esse atributo. Então,
emule como ficaria o exemplo:
Srcdoc
Define uma marcação HTML para o elemento< iframe >.
Nenhum navegador atual tem suporte a esse atributo.
Scoped
Atributo
para
usar
junto
com
o
elemento
< style >. É um atributo booleano e, quando usado, o estilo
é aplicado apenas dentro daquele escopo.
Scoped.html
Nenhum navegador atual tem suporte a esse atributo.
Entretanto, é possível emular como ficaria o resultado do
exemplo em execução:
Ou seja, apenas o elemento do meio teve um CSS diferente
aplicado em seu escopo. Todos os outros usaram
o CSS definido no < head >do documento.
Vale ressaltar que no HTML5, o elemento < style >pode ser
definido dentro do < body >.
Sizes
Atributo
para
usar
junto
com
o
elemento
< link > - mais especificamente o < link > de rel igual a
"icon", que define o ícone do site na barra de navegação do
navegador:
Definindo e manipulando formulários
Um dos grandes problemas do HTML4 era os campos
"pobres" de formulários, sem validação. Algo custoso, pois
obrigava a fazer unicamente com JavaScript. O HTML5,
levando
em
conta
que
praticamente
todas
as
páginas WEB possuem algum tipo de formulário, introduziu
regras de validação diretamente pelos navegadores com a
criação de novos atributos.
Principais novidades:



Antes, os elementos de formulário eram obrigados a
estar inseridos no formulário. Agora, no HTML5,
elementos tais como < button >, < fieldset >,
< input >, < label >, < select >, < textarea >etc.,
podem estar fora do formulário, desde que conectados a
ele através do atributo form(explicado adiante).
Agora há novos tipos de campo, além dos comuns:
text, hidden, checkbox, radio, upload, etc.
E, principalmente, validação do formulário sem a
necessidade de usar JavaScript.
Novos atributos de formulário
Vários novos atributos de formulários e seus elementos foram
implementados. Veja-os na prática.
Required
Esse atributo booleano marca o campo como sendo de
preenchimento obrigatório.
Elementos que o admitem:



Input
Textarea
Select
Required.html
Se o Select não for preenchido:
Observação: Cabe
mensagem de alerta.
ao
navegador
definir
o
estilo
da
Autofocos
Esse atributo booleano define para qual elemento irá o foco
quando a página for carregada.
Elementos que admitem o uso do atributo:





button
input
keygen
select
textarea
autofocus.html
Autocomplete
A maioria dos navegadores oferece a função de "sugerir"
opções de preenchimento para campos do tipo text.
Entretanto, é possível desabilitá-la ou habilitá-la com o uso do
atributo.
O autocomplete é do navegador que, se configurado, grava
os valores digitados por você nos campos inputtext. Algo
como:
Elementos que admitem o atributo:


input
form
autocomplete.html
Quando aplicado ao elemento < form >, todos os inputs
text filhos desse form, que não tiverem o "autocomplete"
definido, o herdam.
dirname
Esse atributo define o dado adicional a ser enviado junto com
os outros campos do formulário, especificando a direção do
texto (ltr ou rtl).
Dirname.html
A string de dados enviada para processamento no servidor
será parecida com:
Ao definir o atributo dirname, o valor atribuído a ele deve ser
o nome do novo parâmetro a ser enviado com a direção do
texto do elemento.
Por
exemplo,
acrescente
dirname="nome.dir"
o
atributo
desta
forma:
No elemento input "nome":
Emulando novamente o envio do formulário, um novo
parâmetro é adicionado à string de dados:
nome.dir=ltr
Ficando assim:
nome=AprendaMais&comentario=HTML5&
enviar=Enviar&nome.dir=ltr
form
É um atributo muito interessante. Ele associa o elemento em
questão a um formulário, não importando se o elemento está
fora dele. No modelo convencional do HTML4, um controle de
formulário (input, textarea etc.) era associado apenas ao
formulário em que estivesse inserido. Isso mudou noHTML5.
O valor desse atributo deve ser o id do formulário em
questão.
Elementos que admitem o atributo:











button
fieldset
input
keygen
label
meter
object
output
progress
select
textarea
Um exemplo prático:
Obs.: Será usado um pouco de PHP para esclarecer melhor.
Se você não conhece PHP, não se preocupe, tudo será
ilustrado.
Form.html
Agora, a página PHP que receberá os dados submetidos pelo
formulário: receber.php
Ao executar o exemplo em um servidor web configurado para
o PHP:
O resultado será este:
Observe que foram recebidos apenas os dados do formulário
"formAprenda". Os campos "comentario" e "curso" não
foram enviados, pois não possuem relação com o formulário
postado.
Agora, faça a seguinte alteração, acrescentando
atributo,form="formAprenda", no campo comentário:
o
Também acrescente no campo "curso":
Agora eles possuem relação direta com o formulário "< em >
formAprenda < /em >" mesmo não estando dentro dele.
Resultado
Observe que agora os campos "curso" e "comentario"
também foram postados.
formaction e formenctype
O atributo formaction tem o mesmo efeito do atributo
"action" do formulário. Ou seja, sua função é definir em
qual URL o formulário será postado.
Elementos que admitem o atributo:

button (type=submit)

input (type=submit)
Volte ao exemplo anterior. É possível remover o atributo
"action" do form e definir o atributo "formaction" no input
submit:
Formenctype
Esse atributo tem a mesma função do atributo enctype do
formulário. Sua função é definir o tipo de documento que está
sendo enviado.
Elementos que admitem o atributo:


button (type=submit)
input (type=submit)
Por exemplo, um formulário de upload convencional:
O
atributo enctype do form pode
pelo formenctype nos input submit:
ser
substituído
novalidate, formnovalidate
O atributo novalidate garante que o formulário não seja
validado no momento de sua submissão. Como a validação
nativa de formulários com o HTML5 ainda não foi explicada,
o exemplo prático desse atributo será demonstrado
posteriormente.
O formnovalidate possui a mesma função do novalidate,
com
a
diferença
de
que
é
usado
nos
elementos input e button.
Novalidate.html
Ao clicar em "Enviar formulário" ele será submetido sem
que o navegador valide as regras aplicadas nos campos,
como no caso acima em que os campos possuem o atributo
"required".
formtarget e formmethod
O
atributo formtarget possui
a
mesma
função
do
atributo target do formulário, que especifica se a submissão
deve ser feita na janela atual ou em nova janela, por
exemplo.
Esse
atributo
pode
ser
usado
nos
elementos input e button.
O atributo formmethod possui a mesma função do
atributo method do formulário, que especifica o método de
submissão HTTP usado no envio do formulário, que pode
ser POST ou GET. Esse atributo pode ser usado nos
elementos input e button.
Placeholder
Esse atributo define uma "dica" sobre o campo. Ao clicar e
digitar, ela desaparece. No HTML4, isso era comumente feito
com o uso de JavaScript.
Placeholder.html
file multiple
Novo atributo do HTML5 usado junto com o tipo de campo
"file" para a seleção de múltiplos arquivos em sistema
de upload, por exemplo.
Faça o teste a seguir:
Obs.: Esse exemplo será executado em um servidor
PHP para que seja possível receber, de fato, os arquivos
upados e suas informações. Se você não souber PHP, ainda
assim poderá testar o exemplo em sua máquina. Apenas
o Upload não funcionará.
File_multiple.html
Para estilizar melhor, acrescente o CSS:
Veja que foram selecionados 2 arquivos:
Agora,
para
incrementar
ainda
mais
o
exemplo,
use JavaScript para ler o nome, tipo e tamanho dos arquivos
selecionados e para imprimi-los na tela, para que
o upload fique mais intuitivo. Para isso, acrescente o
seguinte JavaScript no documento:
As informações dos arquivos foram lidas.
Observe que no JavaScript há uma linha assim:
Para abrir as "ferramentas do desenvolvedor" do Google
Chrome:
Através dela se consegue depurar e imprimir o resultado da
variável "arquivos" que é:
Pode removê-la, pois é apenas para teste junto
ferramentas de desenvolvedor do Google Chrome.
às
Para tornar o exemplo ainda mais interessante, crie uma
página PHP (se você conhece PHP reproduza o exemplo;
caso contrário, apenas veja o resultado): upload.php
Volte novamente ao exemplo para upar de fato os arquivos:
Arquivos recebidos com sucesso!
O exemplo poderia ser mais incrementado ainda para mostrar
o progresso do upload, usando a FileAPI doHTML5. Porém,
não faz parte do conteúdo deste curso.
Disabled
Não é um atributo novo do HTML5, mas vale a pena
relembrá-lo. Ele desativa um componente de formulário. Se
usado em um fieldset, desativa todos os componentes-filhos
desse fieldset.
Disabled.html
Esse resultado pode ser incrementado com o uso
das pseudoclasses
CSS ":
disabled"
e
":enabled".
Acrescente o seguinte CSS no exemplo acima:
Readonly
Atributo parecido com o disabled, apenas bloqueia a ação de
alterar o conteúdo do campo, sem alterar o estilo.
Readonly.html
Novos tipos de campos
O HTML5 introduziu vários novos tipos de campo para o
elemento input, que enriquecem bastante o trabalho com
formulários.
No HTML4 estavam disponíveis apenas os tipos:










button
checkbox
file
hidden
image
password
radio
reset
submit
text
O HTML5 implementou 13 novos tipos:













search
email
url
tel
datetime
date
month
week
time
datetime-local
number
range
color
email
Esse tipo de campo informa ao navegador que o dado deve
ser um e-mail. Caso contrário, o formulário não pode ser
submetido e, para isso, também é necessário que o
atributo required esteja presente.
Email.html
Usando as pseudoclasses CSS3 :valid e:invalid é possível
aplicar um estilo adicional ao elemento. Por exemplo,
acrescente as seguintes CSS no exemplo acima:
Se passou na validação:
Observe que é uma validação superficial. Por isso é
recomendável: Além da validação no lado do cliente
(javascript) valide sempre os dados no lado do servidor (com
a linguagem server-side).
Suporte (compatibilidade) atual junto aos navegadores:
url
Esse tipo de campo informa ao navegador que o dado deve
ser uma url. Caso contrário, o formulário não pode ser
submetido e, para isso, também é necessário que o atributo
required esteja presente.
url.html
Suporte (compatibilidade) atual junto aos navegadores:
search
Define uma interface de campo para pesquisa. Alguns
navegadores exibem um pequeno botão do lado direito para
apagar a pesquisa, como é comum na maioria dos campos de
pesquisa personalizados na Web.
É possível, via CSS3, selecionar o tipo de campo e aplicar um
estilo particular a ele. Por exemplo:
Suporte (compatibilidade) atual junto aos navegadores:
tel e o atributo pattern
É usado para números de telefone, mas não há regra
particular que o valide. Isso porque não existe um padrão de
números de telefone ao redor do mundo, o que torna
impossível especificar um formato como padrão universal.
Entretanto,
existe
um
novo
atributo
no HTML bem
interessante, chamado "pattern". Com ele é possível definir
regras de validações usando expressões regulares.
Regular
expressions,
ou REGEX,
são
expressões
especificadas pelo programador que conterão os caracteres
válidos ou não para determinado campo.
Uma expressão regular é o método formal de especificar um
padrão de texto. É uma composição de símbolos e caracteres
com funções especiais que, agrupados entre si e com
caracteres literais, formam uma sequência, uma expressão.
Essa expressão é interpretada como regra, e indicará sucesso
se uma entrada de dados qualquer casar com essa regra, ou
seja: se obedecer exatamente todas as suas condições.
Expressões regulares são usadas em quase todas as
linguagens de programação.
Então, em um campo tel, pode ser feito, por exemplo:
Tel_pattern.html
Observe que foi definida uma expressão regular para validar o
número de telefone:
Formatos aceitos pela expressão regular de telefone:





99 99999999
99-9999-999
99 9999-9999
(99) 9999999
(99) 9999-9999
Suporte (compatibilidade) atual junto aos navegadores:
Expressões Regulares
Expressões Regulares é um assunto extenso e que exige
muito estudo. O conteúdo é suficiente para um curso
completo, dada a quantidade e complexidade das
informações.
As Expressões Regulares não serão detalhadas neste curso.
Entretanto, para que você possa ter noção sobre como as
expressões regulares são formadas, serão apresentados os
conceitos iniciais e alguns exemplos práticos.
Formando expressões:
Nota: O símbolo ^ só é tido como exceção de sequência se
ele vier exatamente no início da sequência especificada. Se
ele vier no início da expressão de regex (fora dos parênteses
ou colchetes de expressões), será interpretado como "início
de linha" e não como termo de negação. E se vier no meio da
sequência será interpretado como parte dela.
Data:
expressoes.html
Hora:
Cep (correios):
Por fim, e para aguçar sua vontade em aprender expressões
regulares, a explicação de uma que valida o endereço de email (não é preciso trabalhar com ela no HTML5, pois já
existe o tipo de campo "email"):
Expressões_email.html
Obs: Você pode usar o atributo placeholder para indicar o
formato desejado do campo, para os usuários.
Explicando o exemplo:







^([0-9,a-z,A-Z]+) - No início da linha, pelo menos
uma ou mais ocorrências dos caracteres de0-9, ou a-z,
ou A-Z
([.,_,-]([0-9,a-z,A-Z]+))* - Seguidos ou não (zero ou
mais ocorrências) da expressão: ponto ou underline ou
hífen seguidos de caracteres de 0-9,a-z ou A-Z que
apareçam pelo menos uma vez ou mais.
[@] - Seguido de arroba.
([0-9,a-z,A-Z]+) - Seguidos de pelo menos um ou
mais caracteres de 0-9, ou a-z, ou A-Z.
([.,_,-]([0-9,a-z,A-Z]+))* - Seguidos ou não (zero ou
mais ocorrências) da expressão: ponto ou underline ou
hífen seguidos de caracteres de 0-9,a-z ou A-Z que
apareçam pelo menos uma vez ou mais.
[.] - Seguidos de ponto.
([0-9,a-z,A-Z]){2,3} - Seguidos de 2 a 3ocorrências
de caracteres a-z ou A-Z.

([a-z,A-Z])?$ - Seguidos de uma ou nenhuma
ocorrência de caracteres de a-z ou A-Z, no final da linha.
number
Esse atributo fornece uma interface no input para inserção
de número.
Ainda é possível usar os atributos max e min para definir um
limite. Por exemplo:
Number.html
Também existe o atributo chamado step, que permite definir
de quanto em quanto o número deve ser incrementado. Por
exemplo:
Seu uso é apropriado em casos onde o dado retrata uma
quantidade, pelas opções de incremento e decremento que o
componente dispõe. Não é apropriado usá-lo (mas nada
impede que você o faça), por exemplo, no campo "número da
casa", pois o usuário não ficará alternando os valores - ele
apenas digitará o número e pronto. Nesse caso, você pode
usar o tipo "text" e definir um pattern para garantir que o
usuário digite apenas números e não letras ou qualquer outro
tipo de caractere especial.
Suporte (compatibilidade) atual junto aos navegadores:
range
Esse tipo renderiza nos navegadores um "slider" e, tal como
o tipo "number", aceita os atributos min, max e step.
Range.html
Suporte (compatibilidade) atual junto aos navegadores:
Color
Esse tipo fornece uma interface para o usuário selecionar a
cor.
Color.html
Em execução no Opera:
Suporte (compatibilidade) atual junto aos navegadores:
Atributos de data e hora
Obs: Para verificar a atual compatibilidade, basta
acessar http://html5test.com/ usando esses navegadores.
Há
novos
atributos
de data e hora.
São
eles: date,datetime, datetime-local, month, time,
e week. Essas entradas de data e hora aceitam dados
formatados, de acordo com o padrão ISO 8601 standard.
O que cada um representa:



date - Representa uma data no formato ano-mês-dia.
Por exemplo: 2011-12-25.
month - Representa o ano e mês. Por exemplo: 201112.
week - Representa o ano e uma semana desse ano. Por
exemplo, o ano possui 52 semanas, então 2011-W03



(representa a terceira s emana de 2011) e 2011-W47
(representa a quadragésima sétima semana do ano de
2011).
time - Representa determinada hora do dia, usando o
formato 24-horas. Por exemplo: 21:35.
datetime - Representa o controle (date picker) para
ajustar determinada data e hora no formato UTC
(Tempo Universal Coordenado). Serão apresentados
exemplos a seguir.
datetime-local - Representa o controle (igual ao
datetime) de determinada data e hora local. A
representação da data e hora fica a cargo do navegador,
em formato que considere o local e o usuário.
Dentre todos eles, o mais usado é o "date", que implementa
o controle de calendário. Por exemplo:
Atributo_date.html
Em execução no Opera:
Obs: Atualmente, apenas o Opera tem suporte aos controles
de "date picker".
Agora, um exemplo
de data e hora:
completo
com
todas
as
opções
Execute o exemplo no navegador Opera:
O atributo step é permitido em todos esses tipos de campos.
Por exemplo:
Com o step=4 só será possível selecionar um mês no
intervalo de 4 em 4:
Para os tipos de campo "time" e "datetime" ou "datetimelocal" o atributo step pode ser representado em segundos.
Por exemplo:
Incrementa a hora num intervalo de 5 em 5minutos:
Suporte (compatibilidade) atual junto aos navegadores:
Para os navegadores sem suporte, a alternativa para o "date"
seria usar o jQuery UI:
http://jqueryui.com/demos/datepicker/.
Mas deve-se analisar: até que ponto é bom usar ojQuery
UI (que não é tão pequeno em tamanho) apenas para ter um
calendário? Talvez não seja muito vantajoso, pois deixará o
projeto pesado.
Speech input
O Google Chrome implementa o tipo de campo de
reconhecimento de fala. Basta definir o campo, ligar o
microfone no computador e falar algo.
Maiores detalhes:
http://pt.wikipedia.org/wiki/Speech_recognition.
Speech_input.html
Clique com o botão direito do mouse na área do navegador,
escolha Inspecionar elemento e selecione a guia Console.
Veja
o
"rascunho"
http://www.w3.org/2005/Incubato/
htmlspeech/2010/10/google-api-draft.html.
da API:
Desenvolvendo formulários completos
Agora que já conheceu todos os novos atributos e elementos
de formulário, poderá começar a desenvolver os próprios
formulários.
Primeiro, um
formulários:
exemplo
Em execução no Opera:
Formulario1.html
que
incorpora
vários
tipos
de
Formulario2.html
Como
você
pode
ver,
HTML5 e CSS3 são inúmeras.
as
possibilidades
Personalizando as mensagens padrões de validação
com
É possível acrescentar mensagem adicional às mensagens de
erro de validação. Para isso, basta definir o atributo title com
a mensagem. Por exemplo:
Perso_mensagem.html
Observe o atributo title:
Validando os dados em Browsers sem suporte ao HTML5
Uma alternativa para validar os dados dos formulários
montados com HTML5, para os navegadores que não
dispõem de suporte para tal validação, é usar a
biblioteca Modernizr e o jQuery.
Essa é uma forma de garantir que o sistema de validação
funcionará tanto nos novos Browsers quanto nos antigos. Mas
isso tem um preço: Programar as validações em JavaScript e
deixar o projeto um pouco maior, por causa dos Scripts a
serem carregados.
Validando_browser.html
O script está comentado passo a passo, de forma resumida:


Ao submeter o formulário, foi usada a biblioteca
Modernizr para verificar se o navegador tem suporte
aos atributos "required" e "pattern".
Se não possuem tal suporte, começam as validações que
estão divididas em três etapas: Primeiro os campos com
atributo "required", que estiverem em branco; depois,
os campos do tipo "email" que não tiverem email válido; e, por fim, os campos que dispõem de
expressão regular no atributo "pattern" são validados.
Os navegadores atuais, que possuem o suporte nativo de
validações HTML5, não entram nesse IF do Modernizr para
as validações jQuery.
Execute o exemplo no Internet Explorer 8 (ou versão
inferior):
No Google Chrome:
No Google
validação.
Chrome foi
usado
o
"mecanismo"HTML5 de
Em suma, essa alternativa pode ser boa como medida
paliativa para os usuários que usam Browsers antigos e até
que troquem de navegador.
O script de validação do exemplo foi colocado entre as tags <
head > apenas para facilitar o entendimento das operações.
Entretanto, em projeto real, recomenda-se que seja colocado
em arquivo separado. Por exemplo,validacao.js, para
separar e organizar melhor as camadas do site.
Novos eventos para formulários
Relação dos novos eventos de formulários implementados
no HTML5 e quando são acionados:


oncontextmenu - Quando o menu de contexto é
acionado (clicar com o botão direito do mouse).
onformchange - Quando há alguma alteração em um
dos campos do formulário.



onforminput - Quando algum campo (qualquer um) do
formulário recebe um valor.
oninput- Quando o usuário entra com algum dado no
campo.
oninvalid - Quando o campo não passou pela validação.
Onforminput.html
Atualmente, apenas o Opera consegue esse tipo de
implementação que, na verdade, é apenas forma de evitar o
uso de JavaScript para uma tarefa simples.
Oninvalid.html
Template HTML5 para maior compatibilidade
HTML5 Boilerplate é um template HTML5para que você dê
início aos seus projetos. Ele não possuiu não apenas o modelo
de página HTML ideal, mas também uma série de arquivos
essenciais para um projeto HTML5 mais compatível entre
os Browsers.
Alguns dos arquivos inclusos nesse template:


CSS Reset - é um conjunto de declarações CSSque
visam aplicar estilo aos elementos, padronizando-os em
todos os navegadores. Os elementos HTML já vêm
internamente com um CSS definido pelo navegador, e
que difere de navegador para navegador. A função
do CSS Reset é essa: padronizar ao máximo os
pequenos detalhes.
Arquivos JS importantes como: jQuery, Modernizr e
etc.
Veja a explicação completa de todos os "fixes" que
esse Template aplica para os Browsers mais antigos, ou com
suporte parcial a alguma propriedade importante, no site
oficial do Template: http://br.html5boilerplate.com/.
Basta baixar o template para implementar seu projeto a
partir dele.
Algumas questões importantes:


Sou obrigado a usar esse template em meus
projetos HTML5? Não. Mas se o projeto for grande e
você
tiver
certeza
que
o
público-alvo
usará
Browsers mais antigos, então usá-lo pode ser bem
vantajoso.
O que é importante usar em um projeto HTML5?CSS
Reset e a biblioteca Modernizr. Use-os sempre! CSS
Reset para padronizar melhor a forma com que os
elementos são exibidos nos navegadores e a
biblioteca Modernizr para fazer com que os novos
elementos HTML5 sejam
reconhecidos
por Browsers antigos
e
para
funcionalidades HTML5/Apis.
verificar
Exemplo
de
projeto
usando CSSReset e Modernizr:
as
minimalista,
Projeto.html
Copie
a
pasta html5-css-reset que
se
em //arquivos-cursos/html5 para Sua Pasta.
Em execução no Chrome:
Em execução no Internet Explorer 6:
encontra
Se não fosse o CSS Reset, no Internet Explorer 6/7,
ficaria assim:
E sem o Modernizr:
O Browser não consegue reconhecer os elementos para
aplicar os estilos CSS.
Conclusão: Nos projetos HTML5, dê sempre o pontapé
inicial usando CSS Reset e a biblioteca Modernizr.
Frameworks HTML5
Atualmente, os principais Frameworks HTML5 são:


Bootstrap - Framework mantido pela
desenvolvimento
do
http://twitter.github.com/bootstrap/
Foundation - http://foundation.zurb.com/
Exemplo disponível no Bootstrap:
equipe de
Twitter.
O objetivo desses Frameworks é prover um padrão de
desenvolvimento, uma vez que já possuem diversos
elementos estilizados e mais que isso, prover compatibilidade,
pois trabalham bem as CSS reset.
São bastante interessantes para se iniciar um novo projeto.
Trabalhando com áudio no HTML5
O HTML5 dispõe de formas nativas de inserir conteúdos
incorporados
(aúdio
e
vídeo)
sem
usar
deselegantes
scripts,
elementos
< object > e < embed > ou plugins de terceiros (Flash,
Media Player, QuickTime e etc.) para esse fim.
Com os novos elementos de áudio e vídeo nativos, é possível
não apenas fornecê-los aos usuários, mas manipulá-los com o
uso de JavaScript e CSS.
Codecs
O codec é uma tecnologia usada para a compressão e
descompressão de dados. Os alogorítimos dos Codecs de
aúdio de compressão visam codificar um aúdio digital para
formato menor e sem perder a qualidade. Um aúdio
codificado no Codec OGG precisa, para ser reproduzido, de
um Player que
tenha
o
algorítimo
apropriado
para
descodificá-lo (OGG).
Não há padrão sobre qual Codec de áudio usar noHTML5.
Existem diferentes Codecs que podem ser usados e nem
todos funcionam em todos os Browsers. Para ter um áudio
realmente
CrossBrowser
funcionando
em
todos
os
navegadores, é preciso ter no mínimo 2 formatos de áudio
em codecs distintos (será explicado a seguir).
Conheça
os Codecs usados
no HTML5 e
compatibilidades junto aos navegadores atuais:
suas
Sobre os formatos:





aac - Codec de compressão que é considerado um
"MP3" melhorado.
mp3 - Formato patenteado de boa compressão, muito
comum para músicas digitais.
ogg - Formato de código aberto que usa praticamente o
mesmo esquema de compressão doMP3.
wav - Formato proprietário para áudio que não utiliza
compressão. Por isso o tamanho de seus arquivos é
sempre grande.
webm - Formato de código aberto do Google. É usado
tanto para áudio quanto para vídeo.
Implementando áudio na página
Áudio.html
Copie
os
arquivos
abaixo
cursos/html5/ para Sua Pasta.
Em execução no Chrome:
Em execução no Firefox:
da
pasta//arquivos-
Em execução no Opera:
No Internet
esse Codec:
Explorer que
não
dispõe
suporte
para
Cada navegador aplica uma "skin" diferente ao control de
áudio. Você aprenderá a personalizá-la posteriormente.
Implementando áudio de forma cross-browser
Exatamente pelo fato de não haver consenso entre os
navegadores,
acerca
de
qual Codec
usar,
o
elemento
áudio
aceita
elementos
< source > como filhos para que seja possível especificar
mais de um formato de áudio, cobrindo assim todos os
Browsers recentes.
A forma de dispor um áudio cross-browser, que funcione
em todos os navegadores atuais, é usando dois formatos:


ogg
mp3
Agora o Internet Explorer conseguiu reproduzir o áudio. Ele
está usando o formatoMP3, uma vez que não dispõe suporte
ao formato OGG.
Dentro do elemento áudio foi declarado um parágrafo assim:
Esse parágrafo só é exibido em Browsers mais antigos, que
não suportam o HTML4 e, respectivamente, o elemento <
audio >.
Por exemplo, ao visualizar
Explorer 6:
esse exemplo no
Explicando os atributos do elemento :
Internet



src - O caminho do arquivo de áudio.
type - Informa ao navegador o tipo de mídia do arquivo
(Mime Type), de tal forma que ele possa decidir qual
arquivo de áudio usar antes de baixá-lo.
media - Informa ao navegador o tipo de mídia CSS.
Quando não definido, é usado o tipo "all" que quer dizer
"para todos os tipos de dispositivos". Maiores
informações
em: http://www.w3.org/TR/css3mediaqueries/.
Não é difícil definir qual tipo de mídia de arquivo usar. Veja
algumas
dicas
em: http://wiki.whatwg.org/
wiki/Video_type_parameters#Browser_Support
Nesse Wiki da Whatwg encontra-se a relação dos mimes
types e o suporte atual do Browsers para eles:
Por exemplo, para o áudio OGG verifique na tabela omime
type a ser usado:
Por
exemplo,
ao
usar
o mime
type "audio/ogg;
codecs=bogus" no < source > o resultado será:
Esse não é o Mine Type correto, apesar de funcionar no
Chrome. Portanto, volte para o "audio/ogg":
É importante fazer sempre esse teste antes de definir
um Mime Type, para evitar qualquer problema de reprodução
posterior.
Outra forma de obter informações sobre a mídia em questão
é usar o "Media Player Classic", um clássico player de aúdio
e vídeo para Windows.
Por
exemplo,
ao
acessar
arquivo chrome_webm.webm:
as
propriedades
Se obterá como resultado importantes informações:
do
Para esse arquivo podem ser usados os seguintes mime
types, listados naquele Wiki:


audio/webm; codecs=vorbis
audio/webm
Atributos para manipulação de áudio
Os atributos que o elemento admite são:
src - Indica o caminho do arquivo de áudio.
Formas de carregamento do áudio – preload
O atributo "preload" indica como deverá ocorrer o
carregamento do áudio na página. Os valores possíveis
são: none, metada, auto.
none indica que o áudio e suas informações não devem ser
baixadas enquanto o usuário não acessar os controles do
elemento.
metadata indica que apenas as informações como faixa,
duração, controles e etc. devem ser baixadas, mas não o
áudio.
auto (que é o valor-padrão do atributo booleanopreload)
define que o som será pré-carregado automaticamente assim
que a página for acessada.
Audio1.html
Obs: Para testar e observar na prática esse exemplo, é
necessário executá-lo a partir de um servidor web. Veja a
demonstração. O áudio usado no exemplo é um WAV de
tamanho igual a 8MB.
Inicialmente, ao abrir o exemplo:
O áudio em si não foi baixado. Apenas suas informações
foram requisitadas (cabeçalhos, formato e etc.).
Agora, ao clicar em "Play" ele começa de fato a ser baixado
para a máquina do usuário, progressivamente:
Exemplo de preload none:
Nenhuma requisição é feita ao áudio até que o usuário
interaja com o controle (play).
autoplay e loop
Ativa a execução automática do áudio assim que a página é
acessada. Em termos de usabilidade, executar um som
automaticamente não é boa prática, pois os usuários podem
ficar irritados e nunca mais voltar ao site. Pense bem antes
de usar esse atributo.
O atributo loop faz com que o som entre num laço infinito de
repetições.
Muted
Esse atributo booleano inicia o controle com o modo "mudo"
ativado. Por exemplo:
mediagroup e controls
O atributo mediagroup aceita como valor qualquer string. É
usado para unir vários arquivos de mídia para reprodução
sincronizada (seja áudio, vídeo). Elementos de áudio e vídeo
que possuem o mesmo valor de mediagroup ficam
"interligados", podendo ser manipulados para reprodução
através do uso de JavaScript, por exemplo.
Já o atributo controls contém os controles do elemento de
áudio. Sem ele a "skin" do player não seria renderizada. Faça
o teste:
Observe que está sem nenhum controle, em branco. Na
maioria das situações, o atributo controls é sempre utilizado.
A grande utilidade em não usá-lo é para situações em que a
intenção é recriar o player com HTML e CSS, sem usar o
padrão dos Browsers, com novas imagens, botões de play,
pause, controle de volume e etc.
Index.html
Player.css
Player.js
O exemplo é intuitivo e está bem comentado. Em execução:
Observações importantes:
São métodos da API de áudio para carregar e reproduzir o
áudio, respectivamente.
Observe que também foi trabalhado com quatro importantes
eventos da API de mídias:




ended - Evento executado quando a reprodução do
áudio acaba.
play - Evento executado quando a reprodução do áudio
se inicia.
pause - Evento executado quando a reprodução do
áudio é pausada.
volumechange - Evento executado quando o volume
do áudio é alterado.

bind - no exemplo está delegando ao elemento áudio o
evento "onended".
Plugins jQuery para áudio e vídeo
Existem alguns ótimos Plugins jQuery que disponibilizam
ótima interface para a geração de Modernos Players, usando
a tecnologia do HTML5.
São eles:



http://jplayer.org/latest/demos/
http://mediaelementjs.com/
http://videojs.com/
Novos eventos para elementos de multimídia
Além dos eventos mostrados acima, existem outros que
podem ser usados tanto para áudio quanto para vídeo.
Conheça os novos eventos para multimídia e quando são
executados:
onabort - É chamado quando o navegador está obtendo os
dados do áudio/vídeo e a ação é abortada antes que sejam
completamente baixados (carregados).
oncanplay - Quando o elemento áudio/video já tem dados
suficientes no buffer para começar a tocar.
oncanplaythrough - Quando o elemento áudio/vídeo já
tem dados suficientes no buffer para começar a tocar e, se a
transferência de dados continuar no mesmo ritmo em que
está ocorrendo, prevê-se que tocará até o final sem
interrupções.
ondurationchange - O elemento áudio/vídeo teve seu
atributo duration modificado. Isso acontece, por exemplo, ao
alterar a origem da mídia (src).
onemptied - O elemento áudio/vídeo teve um erro de
retorno vazio de dados da rede. O retorno vazio acontece
quando, por exemplo, tenta-se invocar o método play de um
elemento que ainda não tem origem de mídia (src) definida.
onended - Quando a reprodução do áudio/vídeo chegou ao
fim.
onerror - Quando ocorre um erro com o elemento que está
sendo carregado.
onloadeddata - Os dados começaram a ser carregados e a
posição atual de playback já pode ser renderizada.
onloadedmetadata - Os metadados foram carregados e já
se sabe as dimensões, duração e formato do áudio/vídeo
onloadstart - Os dados começaram a ser carregados.
onpause pausada.
Quando
a
reprodução
do áudio/vídeo
foi
onplay - Quando a reprodução do áudio/vídeo foi iniciada;
ou seja, quando o usuário clicou em Play ou quando a
reprodução começou por causa do atributo autoplay.
onplaying - O áudio/vídeo está tocando.
onprogress - O
do áudio/vídeo.
navegador
está
buscando
os
dados
onratechange - Quando a taxa de reprodução muda.
onreadystatechange - Quando os estados da mídia mudam
(carregando, completo e etc.).
onseeked Quando
aúdio/vídeo termina.
a
busca
pelos
dados
do
onseeking Quando
a
busca
áudio/vídeo está em execução.
pelos
dados
do
onstalled - Quando, por algum motivo, o script é finalizado
porque o navegador não conseguiu buscar os dados
do áudio/vídeo.
onsuspend - Quando a busca pelos dados do áudio/vídeo é
interrompida antes de ser concluída.
ontimeupdate Quando
a
posição
de
reprodução
do áudio/vídeo muda. Por exemplo, quando o usuário
avança manualmente até o fim do áudio/vídeo.
onvolumechange - Quando o usuário altera o volume ou o
define como mudo.
onwaiting Quando
pausado automaticamente para
conteúdo (buffer de dados).
o áudio/vídeo é
carregar o resto do
Acompanhe
este
exemplo,
desta
apenas JavaScript puro (sem jQuery):
vez
usando
Index1.html
Agora, acrescente no exemplo o Script:
No exemplo foi usado o método delegador de eventos
do JavaScript addEventListener( ), que não funciona crossbrowser em todos os Browsers - versões do Internet
Explorer anteriores à 9não o suportam. Por isso, no exemplo
de "personalizando um player de áudio" foi usado jQuery,
pois seus métodos são cross-browsers e funcionam desde
o Internet Explorer 6.
Atributos dos elementos de multimídia
Os principais atributos são:
playbackRate - A taxa de reprodução é padrão 1.0(valor de
ponto flutuante). Entretanto, ela pode ser alterada se a
intenção for pelo "efeito" de "slow-motion" ou "slow-rewind".
defaultPlaybackRate - Retorna a taxa de reprodução
padrão, que é igual a 1.
src - Retorna a url que aponta para o áudio/vídeo.
currentSrc - (apenas leitura) Retorna a url atual do vídeo,
pois em tempo de execução ela pode ser alterada.
readyState - (apenas leitura) Retorna um valor-número
entre 0-4, que representa o estado de leitura. 0 representa
que o navegador nada capturou sobre o áudio/vídeo. 1 indica
que os metadados do áudio/vídeo já foram lidos. 2 indica que
o navegador já possui em buffer dados parciais para a
reprodução inicial da mídia. 3 indica que o navegador já
possui dados suficientes para reproduzir boa parte da mídia,
bem como voltar ou avançar sua posição. Por fim, 4 indica
que o vídeo está totalmente pronto para ser reproduzido e
que nada interferirá na reprodução, pois já está 100%
carregado.
duration - (apenas leitura)
áudio/vídeo em segundos.
O
tempo
de
duração
do
buffered - (apenas leitura) Retorna os intervalos de tempo
do vídeo que estão disponíveis em buffer para o navegador
executar.
videoWidth e videoHeight (apenas
leitura)
São
especificamente para vídeos. Eles retornam a altura e largura
dos vídeos, suas reais dimensões e não as dimensões CSS ou
do player.
paused - (apenas leitura) Atributo booleano que indica se o
vídeo está pausado.
ended - (apenas leitura) Atributo booleano, retorna TRUE se
a reprodução foi finalizada.
currentTime - Retorna a posição atual da reprodução em
segundos. Também é possível definir um valor para pular no
tempo de reprodução, por exemplo: "audio.currentTime =
15" ao clicar em Play o áudio iniciará a partir do
segundo 15.
autoplay Retorna TRUE se
ativo; ou FALSE se estiver desativado.
o autoplay está
Os atributos marcados como "apenas leitura" não podem ter
seus valores alterados, são apenas para serem lidos.
Exemplo com currentTime e playbackRate
Playbackrate.html
Agora, o JavaScript dele:
Observações importantes:
No elemento < audio >, o preload deve ser definido com o
valor "metadata":
Se definir como "none", ao ser carregado, as informações de
metadado do áudio não estarão disponíveis:
E nem foi apontado para os 15 segundos inicias.
Com relação ao "playbackRate", a taxa de reprodução foi
alterada e o vídeo será reproduzido bem rápido.
Ao pausar o vídeo, é informado em qual segundo foi parado:
Ferramentas para codificação de áudios e vídeos
Para conversão e edição de áudio, um dos melhores é
o Audacity:
http://audacity.sourceforge.net/.
Conheça as opções
formato OGG):
de
exportação
(destaque
para
o
Para usuários MAC:
http://thelittleappfactory.com/evom/.
Também para usuários MAC ou Windows, um dos melhores
Softwares
para
conversão
de áudio/vídeo paraweb e
dispositivos móveis, com opção para diversos formatos,
é: http://www.mirovideoconverter.com/.
E, por último, uma alternativa muito interessante é a
instalação da
extensão Firefogg para
o Firefox, que
converte vídeos/áudio para
os
formatos OGG e Webm,
respectivamente: http://firefogg.org/.
Baixe este vídeo do Youtube no formato MP4e configure
para
convertê-lo
para WebM:http://www.youtube.com/watch?v=
hQuXxOBJwSg
Para usar a extensão, abra o Mozila Firefox, entre no
site: http://firefogg.org/ e clique na opção Make web video.
Depois em Select File.
Selecione o arquivo Signing in to Chrome - YouTube.flv,
que se encontra na pasta \\arquivos-cursos\html5\ e
clique em Abrir.
Clique em Encode e depois em Salvar.
Resultado
Arquivo em FLV que foi baixado e o arquivo webm após a
conversão.
Outras ferramentas:



Miro VideoConverter:
http://www.mirovideoconverter.com/.
WebM Tools: http://www.webmproject.org/tools/.
OggConvert: http://oggconvert.tristanb.net/.
Trabalhando com vídeos no HTML5
A sintaxe para inserir vídeos é tão simples quanto a de áudio.
Conheça os Codecs suportados pelos navegadores:
H.264, Apple, Microsoft e Google pagaram uma taxa de
licenciamento para usar o Codec nativamente em seus
navegadores,
diferentemente
da Mozilla (Firefox)
e Opera que preferiram adotar apenas os Codecs gratuitos.
Como resolver o problema de formatos?
Se você deseja que seu vídeo rode em todos os navegadores,
a recomendação é dispor dois formatos do mesmo vídeo:


WEBM
MP4
Por
exemplo:
Para
o
exemplo
copie
arquivosgoogle_video.mp4 e google_video.webm da
pasta \\arquivos-cursos\html5\ para Sua pasta.
Vídeos.html
os
Atributos usados em < audio > que podem ser usados no
elemento < video >:






¦ loop
controls
preload
muted
autoplay
src
< video > usa as mesmas propriedades e eventos
detalhados no tópico "atributos dos elementos multimídia".
Uma boa página
propriedades:
/mediaevents.html
para visualizar tais métodos e
http://www.w3.org/2010/05/video
Dimensões do vídeo
Para
definir
a
dimensão
do
atributos width e height. Por exemplo:
Vídeo.html
vídeo,
use
os
Definir a dimensão do vídeo não tem a ver com a resolução.
Aumentar ou diminuir demasiadamente o vídeo compromete
a qualidade quando estiver em execução.
Definindo a imagem de fundo para o vídeo
É definido no atributo poster a imagem que se deseja exibir
como fundo do vídeo, antes de ser executado.
Video2.html
Definindo legendas SRT para o vídeo
O elemento < track > destina-se a definir trilhas externas
para os elementos de vídeo e áudio. Seus atributos são:





kind - Define o tipo da trilha. Valores possíveis:
subtitles (subtítulos), captions (legendas), descriptions
(descrições),
chapters
(capítulos)
e
metadata
(metadados).
src - Endereço do arquivo de texto. A especificação
da W3C recomenda
o
formato webSRT com
a
extensão .srt.
charset
Charset do
arquivo
de
texto,
por
exemplo:UTF-8.
srclang - Língua usada no arquivo de texto, por
exemplo: en-US, pt-br.
label - A legenda da língua, por exemplo: Inglês /
Português (Brasileiro).
Legendas.html
Atualmente nenhum navegador suporta esse recurso.
Entretanto, é possível emulá-lo usando este script que lê a
legenda SRT e a exibe de acordo com o timing atual do
vídeo:
https://github.com/icelab/jquery-videosub/blob/master
/jquery.videosub.js
Agora, crie o arquivo de legenda: en-US.srt
Execute o exemplo no Google Chrome Canary, pois a
permissão de leitura de arquivos locais foi ativada:
No Firefox ou em qualquer outro navegador, o exemplo não
funcionará localmente pelo fato de a legenda .srt não ser lida
por motivo de segurança. Só funcionará se estiver rodando
em servidor localhost ou web.
Em execução no Google Chrome Canary:
O Sofware usado para a criação da legenda foi o "Subtitle
Workshop",
que
pode
ser
baixado
neste link:
http://www.urusoft.net
/download.php?lang=&id=sw, ou utilizar uma cópia já
baixada em \\arquivos-cursos\html5\.
E salvar no formato SubRip (.srt):
HTML5 Selectors API Level 1
Com a selector API podem ser usados os seletores CSS para
selecionar elementos DOM. Se você conhece jQuery, não
terá dificuldades para entendê-la.
A Selector API Level 1 possui dois métodos:


querySelector( )
querySelectorAll( )
As duas recebem como argumento a string de um
seletor CSS. A querySelector retorna o primeiro elemento
que satisfaz o seletor, ou null caso não haja nenhum.
A querySelectorAll retorna a lista de elementos que
satisfazem o seletor.
Informações sobre compatibilidade: http://caniuse.com
/#search=querySelectorAll
Selector_API.html
Primeiramente foi usado o querySelector para selecionar os
elementos < li > de classe igual a "destaque". Logo abaixo,
foi usado o "console.log()" para imprimir o resultado no
console das "ferramentas do desenvolvedor" do Chrome ou
Firebug do Firefox.
Apenas um elemento foi retornado, ou seja: o primeiro
elemento < li > de classe igual a "destaque". Para maiores
informações DOM sobre o elemento, basta apertar a
tecla F5:
Agora, usando o método querySelectorAll( ), altere o script
para:
Retornou todos os elementos < li > de classe igual a
"destaque".
Selector_API_exemplo2.html
Ao clicar no botão "Selecionar Elementos":
Veja que as classes dos elementos foram alteradas:
Observação
Sim, você também pode selecionar "ids",
identificadas pelo caractere "#"(sustenido).
Selector_API_exemplo3.html
que
são
Seletores CSS3 também podem ser utilizados, por exemplo:
Seleciona todos os elementos que tenham o atributo "href"
igual a "pagina.php".
Outro exemplo
Neste caso, seleciona o último elemento:
classList API
A classList são métodos para trabalhar com CSS junto aos
elementos. Ela dispõem dos seguintes métodos:




add( ) - Adiciona uma classe CSS ao elemento.
remove( ) - Remove uma classe CSS do elemento.
toggle( ) - Alterna entre duas classes CSS.
contains( ) - Retorna TRUE se a classe especificada
está declarada no elemento.
Atual compatibilidade:
http://caniuse.com/#search=classlist
Essas funcionalidades são comuns em Frameworks como
o jQuery. É bom que você saiba que estão começando a
implementá-las nativamente, a caminho de estabelecer um
padrão.
Classlist_API.html
Clique mais vezes no botão e verá a funcionalidade
do toggle( ) alterando a classe do "aprenda 2".
A implementação é bem simples. O segredo é acessar
a classList:
A classList deve ser escrita dessa forma. Caso contrário,
o Browser não a reconhecerá.
Microdata
O HTML5 implementa o modelo chamado "microdata", que
é extensão de microformats. Os microdados atribuem um
significado adicional à marcação HTML.
O que são os Microformats?
Micro + Format =
(informação).
Pequenos
Formatos
de
dados
Microformats nada mais são que conjuntos de padrões para
formatar conteúdos comuns em páginas web e aplicações de
diversos tipos.
A função dessas especificações é enriquecer a informação
inserida em páginas web com metainformação. A função das
metatags é fornecer informações para "além" do que é visto
em
primeiro
momento,
ou
seja:
o
próprio
conteúdo. Microformats se refere a descrever trechos de
conteúdos específicos de um site como datas de eventos,
informações de contato, descrição de links etc., coisas que
estão além do escopo das conhecidas metatags.
Ou seja, tratando Microformats válidos no código doHTML é
possível enriquecer a maneira com a qual se lida com a
informação e a maneira pela qual as máquinas armazenam,
indexam, organizam e relacionam a metainformação. A
função dessas especificações é fornecer o máximo de
metainformação sobre o conteúdo que você insere, ou seja:
descrevem os próprios dados.
Um exemplo prático: você provavelmente usa o celular
para armazenar os telefones dos seus amigos, certo? Ou usa
o catálogo de endereços do Outlook/ Thunderbird etc.
Pronto, aí o microformat se encaixa perfeitamente.
Se você imaginar que o programa desenvolvido para
gerenciar os contatos do aparelho celular grava os dados de
alguma
forma
estruturada,
poderá
visualizar
um microformat.
A forma que o contato é estruturado no celular é exatamente
a mesma que o programa de contatos do computador usa, e
também a do PDA. Pronto, você pode ter o mesmo contato
lido por três aplicações diferentes, sem problema.
Imagine que o site de sua empresa possui uma seção que
lista toda a equipe, e que essa lista foi estruturada com o
mesmo microformat demonstrado acima. Isso certamente
permitiria ao visitante pegar a lista e colocá-la facilmente no
celular.
Qual a utilidade dos Microformats?
Imagine a quantidade de informação que existe hoje
circulando na web. Pense nos e–mails, nos comentários
em blogs, nos artigos, nas fotos, vídeos, versões de arquivos,
textos, documentos, arquivos de áudio, feeds etc. Para
organizar com precisão esse volume de informação é preciso
padrões. Os mecanismos de busca possuem um algorítmo
cuja função principal é verificar o que é mais relevante, de
forma a criar relações entre as informações obtidas em cada
documento
da web,
que
por
sua
vez
geram ratings e rankings baseados nessas inter–relações.
Parte do critério de avaliação é relacionar a metainformação
com a própria informação. Ao fazer uma pesquisa no Google,
obtém-se uma lista com o que é mais relevante relacionado à
palavra digitada. As tags HTML são relativamente muito
limitadas para descrever todos os diferentes tipos de
informação inseridos na web. Microformats tenta suprir tal
lacuna, estendendo para outro nível as possibilidades de
descrever a informação.
Sintaxe dos Microdados
Em microdados, um item se relaciona às propriedades com o
uso dos atributos globais:





Itemscope - Atributo booleano, indica que o elemento é
um microdado e que seus elementos-filhos fazem parte
do formato microdado.
Itemtype - Define o vocabulário a ser usado. Seu valor
é um URL apontando para o arquivo que contém o
vocabulário para a marcação dos Microformats.
Itemprop - Define o item (propriedade) do vocabulário
a ser usado.
Itemref -Define um ID do elemento no qual se
encontram informações adicionais sobre o item.
Itemid - Define a identificação global para o item.
O Google mantém
o
site
"data
vocabulary",
que
atualmente é uma das melhores referências de vocabulários
que
o
próprio Google (robô
de
busca)
consegue
identificar. Link para
o site:
http://www.datavocabulary.org/.
Também é possível criar o próprio vocabulário, mas é preciso
ter um objetivo muito bem definido. A recomendação é
sempre
usar
os
vocabulários
já
definidos
pelo Google/Schema.org.
Por
exemplo,
o
vocabulário
http://www.data-vocabulary.org/Person/.










de
pessoas:
name (fn) - Nome da pessoa.
nickname - Apelido da pessoa.
photo - Link para uma foto da pessoa.
title - Título da pessoa, por exemplo: Gerente.
role - Função da pessoa, por exemplo: Analista de
Sistemas.
url - Link para a página pessoal da pessoa.
affiliation (org) - Dados da organização na qual a
pessoa
está
afiliada: http://www.data-vocabulary
.org/Organization.
friend - Nome da pessoa de seu relacionamento social
como amigo.
contact - Nome da pessoa de seu relacionamento social
como contato.
acquaintance - Nome da pessoa de seu relacionamento
social como conhecido.

address (adr) - Dados do endereço
http://www.data-vocabulary.org/Address.
da
pessoa:
Outro importante site que descreve vocabulários é o
"Schema.org", que contém o vocabulário Person, mais rico
em
propriedades
que
o
"Data
Vocabulary":
http://schema.org/Person
Neste curso, como base para os exemplos serão usados os
dados do "Data Vocabulary".
Acompanhe as diferenças de significado entre a descrição
normal de uma pessoa e a descrição da mesma pessoa
usando as propriedades do vocabulário Person dos
microdados.
Marcação normal descrevendo a pessoa:
Marcação_normal.html
Essa marcação é completamente compreensível para nós,
humanos, não é verdade? Mas para uma máquina (o Browser,
o robô de busca do Google) ela não é clara o suficiente.
Como a máquina saberá que a imagem tem relação com o
nome dentro do < h1 >? Como saberá que o < h1 > é um
nome? Aí entram os microdados, para dar tal significado à
informação.
Agora, o mesmo exemplo acima, mas escrito com os
vocabulários Person, Organization eAddress dos microdados:
Explicação
A propriedade "name" é filha do vocabulário "Organization".
Uma boa forma de visualizar a máquina interpretando esses
dados é instalar a extensão "Schema Explorer" para Google
Chrome: https://chrome.google.com/webstore/detail
/docnladpefffgdocnidfngejcagdkedb
Porém, ela só consegue "parsear" tais dados de uma página
que esteja em servidor local ou web. Por exemplo:
A extensão funciona apenas para páginas que estejam em
algum servidor, seja local ou web. No exemplo acima, foi
usado um servidor web. Portanto, se você não tiver um
servidor web ou local configurado, teste usando esta url:
http://www.aprendamaiscursos.com.br/html5
/microdados.html
Rich Snippets Testing Tool
É uma ferramenta do Google que mostra como ele interpreta
os microdados e quais os tipos de dados que ele consegue
interpretar.
Exemplo
http://www.google.com/webmasters/tools
/richsnippets?url=http://www.aprendamaiscursos
.com.br/html5/microdados.html
Essa página nos resultados de busca ficaria assim:
A ferramenta também consegue avaliar os dados extraídos:
Agora, clique em Show:
Com essa ferramenta também é possível visualizar alguns
exemplos de marcações de microdados, como "página de um
aplicativo":
A foto do aplicativo, nome, os reviews (votos) e o seu valor.
Outras ferramentas
Existem outras ferramentas muito interessantes para se
trabalhar com microdados. São estas:


HTML5 Microdata Templates - Site para gerar
microdados. Gera tanto no formato microformats quanto
no formato microdata.
Schema Creator - Totalmente voltado para microdados
também é ótimo "gerador".

PHP Microdata Parser - Código-fonte de um parser
PHP de microdados.
Microdata DOM Api
Essa API provê um método e nove propriedades para
manipular microdados via JavaScript. Pena que nenhum
navegador a tenha implentado ainda. Informações sobre
o Status atual
de
implementação:http://www.whatwg.org/specs/webapps/current-work
/multipage/microdata.html#using-the-microdata-dom
-api
Outra forma de saber se o Browser suporta esta API é
verificar se o método getItems( ) já foi implementado:
Atributos de dados personalizados
Às vezes é preciso acrescentar atributos com informações
importantes
nos
elementos,
para
uma
manipulação JavaScript mais dinâmica. Como fazer isso?
Javascript_dinamico.html
Ao validar o documento:
Veja que o atributo "tipo" não é válido para esse elemento e
muito menos faz parte dos atributos globais. Ele foi inventado
para o exemplo, por isso ocorreu o erro de validação.
Solução
Definir tal atributo usando o prefixo "data-". As regras de
documento do Browser o entenderão como dado adicional e
não o invalidará.
Valide novamente o exemplo:
Veja que o documento foi validado corretamente.
Você apenderá, no próximo tópico, a manipular esses dados.
Dataset API
Essa API auxilia a acessar os dados personalizados dos
elementos.
Seu suporte atual:
http://caniuse.com/#search=dataset
dataset.html
O "segredo" é acessar o objeto "dataset":
Também se imprime no console (como pode ser visto no
exemplo em execução acima) o objeto dataset por completo:
Representando fórmulas matemáticas com MathML
MathML é
uma
linguagem
de
marcação
baseada
em XML para a representação de fórmulas matemáticas.
Trata-se de uma recomendação W3C para os navegadores e
está em pleno desenvolvimento.
Atualmente, são poucos os navegadores que a suportam:
http://caniuse.com/#search=MathML
mathml.html
O assunto sobre esse elemento não será aprofundado, até
porque sua documentação ainda é vaga e descrever fórmulas
matemáticas trabalhando com tags seria bem trabalhoso.
Existem alguns Softwares para a geração visual das fórmulas
e com opções de exportação para diversos formatos.
Um deles é o "Formulator":
http://www.mmlsoft.com/index.php?option=
com_content&task=view&id=11&Itemid=12
Para baixá-lo:
Exemplo de uso exportando para o formato SVG:
Em execução no Browser:
Outra opção interessante é o MathlML Editorem que é
possível
desenhar
as
fórmulas
e
gerar
a
marcação MathlML delas:
http://code.google.com/p/mathmleditor/
Para
baixá-lo,
basta
http://code.google.com/p/mathmleditor
/downloads/list
acessar:
Feito o download e só abrir a página "simplePage.html" e
desenhar a fórmula:
Para a obter a marcação da fórmula:
Código gerado:
SVG para gráficos vetoriais
Criado pela W3C, o SVG é a abreviatura de Scalable Vector
Graphics que pode ser traduzido do inglês como "gráficos
vetoriais escaláveis". Trata-se de linguagem XML para
descrever
de
forma
vetorial
desenhos
e
gráficos
bidimensionais, quer de forma estática, quer dinâmica ou
animada. Umas das principais características dos gráficos
vetoriais é que não perdem a qualidade ao serem ampliados.
A grande diferença entre o SVG e os outros formatos
vetoriais é o fato de ser um formato aberto, não sendo
propriedade de nenhuma empresa.
SVG é suportado por todos os navegadores Web modernos de
forma nativa ou através de bibliotecas JavaScript. O suporte
nativo no Microsoft Internet Explorer só é possível a partir da
versão 9.
Não faz parte do escopo deste curso ensinar SVG. No
entanto, veja este exemplo de sua marcação:
Svg.html
Editor SVG online:
http://svg-edit.googlecode.com/svn/branches
/2.5.1/editor/svg-editor.html
Canvas API
A Canvas API permite desenhar gráficos na tela do
navegador, via Javascript. Para utilizá-la é preciso apenas do
elemento <
canvas
>e
dos
respectivos
métodos JavaScript da API.
A Canvas API é muito extensa e daria um curso inteiro só
sobre ela. Será explicado apenas o essencial de Canvas.
Suporte atual: http://caniuse.com/#search=canvas
Coordenadas do contexto 2D de Canvas:
Para desenhar é preciso acessar o elemento Canvas, via
DOM, e definir o contexto 2D de desenho (também é possível
definir contexto 3D de desenho com WebGL, mas ainda é
experimental).
Canvas.html
É necessário definir o contexto via getContext( ) para que
seja possível acessar os métodos e atributos da API.
Os parâmetros passados para fillRect( ) são: coordenadas x e
y, largura e altura:
Outro exemplo:
Como já explicado no código, o método strokeRect( ) cria
um retângulo usando apenas a borda.
Métodos da Canvas API
Os mais comuns métodos de desenho:











beginPath( ) - Reseta o Path atual.
closePath( ) - Marca o atual Path como fechado.
moveTo(x,y) Posiciona
o
ponto
nas
coordeandasx,y para a próxima operação de desenho.
lineTo(x,y) - Cria um "caminho" de linha a partir do
ponto de registro atual até (x,y).
rect(x,y, largura, altura) - Destina-se a desenhar um
retângulo.
arc(x, y, raio, anguloInicial, anguloFinal, sentido)Desenha um arco com centro nas coordenadas x,y com
um raio definido e ângulo inicial e final definidos em
radianos (negativos ou positivos) e o sentido que pode
ser horário(false) ou anti-horário (true)
bezierCurveTo( ) - Desenha uma curva cúbica. Será
explicado em detalhes adiante.
fill( ) - Preenche o caminho com uma cor sólida.
stroke( ) - Aplica os estilos definidos pelos atributos de
criação. Por exemplo, os definidos em moveTo(
), lineTo( ) e etc.
fillText( ) - Define o preenchimento do texto.
strokeText(texto,...) - Define o contorno do texto.

clearRect(x, y, largura, altura) - Limpa uma parte
retangular da tela.
Para melhor noção das coordenadas do desenho:
É possível visualizar estas réguas através do Firebug:
canvas.height retorna a altura da área de desenho e
canvas.width a largura. Desta forma, o desenho fica
proporcional ao tamanho da área de desenho.
Por exemplo: Acrescente a seguinte regraCSS:
Os estilos:
Podem ser declarados antes ou depois do posicionamento e
desenho da linha:
Mas é importante ressaltar que o estilo deve ser aplicado logo
após seu desenho:
Desenhando arcos
Os ângulos do exemplo são medidos em radianos e, para
isso,
é
usada
a
biblioteca
de
cálculos
matemáticos Math do JavaScript.
Math.PI = Um ângulo raso (180 graus):
Ou
Consegue-se esse mesmo resultado definindo o sentido
para TRUE (anti-horário):
Desenhando curvas quadráticas
Curvas quadráticas é excelente ferramenta para criar formas
personalizadas.
Sintaxe
Diagrama dos pontos:
Se você já trabalhou com ferramenta de desenho vetorial,
como o CorelDraw, terá mais facilidade para entender esses
pontos.
Desenhando curvas de Bézier
É das curvaturas mais avançadas disponíveis na Canvas API.
Se uma curva quadrática não satisfizer a sua necessidade,
provavelmente
a
curva
de bézier (ou
curva
cúbica)
conseguirá.
Informações
teóricas
sobre
esta
http://pt.wikipedia.org/wiki/Curva_de_Bézier
Sintaxe
Diagrama
curva:
Canvas e JavaScript
Por exemplo, um espiral:
Altere o número de iterações do for para 60 e veja:
O desenho começa no centro do canvas. Isso foi definido
anteriormente, no moveTo().
Trabalhando com textos em Canvas
Usa-se especialmente a função fillText( ).
Sintaxe
A
propriedade textAlign aceita
os
valores: left(esquerda), center (centro) e right (direita) e o
alinhamento se dá na horizontal.
Já a propriedade textBaseline alinha verticalmente e os
valores possíveis são: top, hanging, middle, alphabetic,
ideographic e bottom.
beginPath e closePath
beginPath(
)
inicia
um
caminho
e
closePath( ) termina o caminho. Conectar dois pontos
dentro de um caminho é referido como um subpath.
Beginpath_closepath.html
Como não foi iniciado um beginPath na reta, ela está sendo
ligada no primeiro subpath(três curvas conectadas entre si).
Veja:
A solução: Iniciar um novo subpath para a reta
Cores gradientes
Canvas também trabalha com texturas e gradientes. Um
exemplo de uso para a definição de uma gradiente linear:
Core_gradiente.html
addColorStop( ) acrescenta cores ao gradiente, que se
deslocam entre as extremidades do mesmo. 0 é extremidade
inicial e 1.0 o fim da extremidade do gradiente.
Agora, exemplo de um gradiente "radial":
Desenvolvendo a logomarca da AprendaMais em canvas
Desenvolvemos a logomarca da AprendaMais em canvas.
Foi um árduo trabalho, mas valeu a pena pelo resultado, que
ficou bem próximo da logo em vetor criada no CorelDraw.
Logomarca.html
Canvas editor
O CanvasDraw é um interessante editor de Canvas. Ele
permite desenhar visualmente e obter o resultado
em JavaScript já com as coordenadas. O projeto ainda é
básico, mas já dá para perceber o quão seria útil
um Software para edição de Canvas, o que aparentemente
ainda não existe.
O site para o editor é:
http://www.canvasdraw.comuf.com/.
Para exportar para HTML:
Controle de histórico com a History API
O HTML5 traz
diversas
melhorias
para
o
objeto window.history, que agora é chamado de History
API.
Aplicações complexas desenvolvidas inteiramente emAjax às
vezes têm necessidade de gerenciar melhor o histórico de
navegação para que o usuário, ao voltar ou avançar no
navegador, não saia da página.
O Gmail é o principal exemplo de aplicação Ajax. Ao clicar
em "Rascunhos" ele acrescenta na URL a referência
"#drafts"; e ao clicar em voltar, sem recarregar a página, ele
volta para o último recurso visitado.
A history API possui dois métodos:


pushState(data,title[,url]) - Acrescenta uma entrada
na lista de histórico.
replaceState(data,title[,url]) - Modifica a entrada
atual na lista de histórico.
A nova URL passada em pushState ( ) ou replaceState (
) deve ter a mesma origem (domínio) da página. Caso
contrário, é gerado um erro de segurança.
Compatibilidade atual:
http://www.caniuse.com/#search=history.
Faça o teste
melhorada:
se
o
navegador
suporta
a History
API
History_api.html
Navegacao.js
Navegue nas opções do menu, avance e volte e veja o
controle que o JavaScript faz.
O Script usado é bem intuitivo e está bem comentado, mas
atenção a esta consideração:
- A "chave" da lógica, no exemplo, está no métodonavegar(
) e no evento onpopstate. O métodonavegar( ) é quem
pega o hash da URL atual, oculta os demais parágrafos e
exibe apenas aquele referente ao hash. O evento popstate é
executado sempre que o usuário volta ou avança no
navegador, executando o método navegar( ), pois uma vez
que volte, o hash daurl muda.
Navigation Timing API
API que visa fornecer informações sobre o desempenho da
página, do carregamento, o tempo de carregamento,
memória consumida e etc. Ela ainda está em fase de
desenvolvimento.
Compatibilidade atual:
http://caniuse.com/#search=navigation.
Timing_api.html
Timing_api.js
Web Storage API
Se for preciso armazenar as preferências do usuário em sua
máquina, de tal forma que as informações sejam recuperadas
posteriormente, esta é a solução.
Por muito tempo todos já foram reféns dos ultrapassados
cookies. Conheça alguns dos problemas relacionados ao uso
de Cookies:



Muito para pouca coisa: O código para armazenar
Cookies envolve cálculos com datas e controle do nome
de domínio e etc.
Espaço
limitado: Geralmente
os browsers só
permitem 4KB por cookie.
Inseguros: Os Cookies são facilmente interceptados.
Para resolver tais problemas, o HTML implementou duas
novas interfaces de API:


SessionStorage - Para armazenar dados enquanto a
sessão do navegador estiver ativa. Ou seja, ao fechá-la
os dados são apagados (parecido com o conceito
de Session do PHP).
LocalStorage - Para armazenar os dados localmente
"para sempre", podendo ser capturados em futura
navegação, pois ficam armazenados no cache, no
navegador. É claro, os dados só serão deletados quando
o usuário, ou o navegador, deletá-los.
Ambas interfaces possuem a mesma API, com a única
diferença do tempo de persistência dos dados (sessão ou
local).


Os mesmos casos de uso dos Cookies.
Por exemplo, em um sistema que possui uma interface
configurável como essa do sistema de ensino do
AprendaMais, você poderá armazenar alguns detalhes
do Layout, skin e etc. Isso serve para que o usuário, ao
voltar a acessar o sistema, possa abri-lo do jeito que
configurou.
Compatibilidade
Atualmente, a maioria dos navegadores novos possui suporte
a estas APIs.
Maiores informações:
http://caniuse.com/#search=webstorage.
Armazenamento
Os dados armazenados devem ser strings. Se houver a
necessidade de armazenar objetos de dados complexos, a
melhor
opção
é
para
serializar
o
objeto
em JSONJSON.stringify (será dado um exemplo sobre).
Para testar se o Browser suporta estas APIS:
Ou usar o Modernizr.
Métodos de ambas interfaces:






setitem("nome","valor") - Cria um par nome/valor
para ser armazenado.
getitem("nome") - Obtém o valor armazenado.
removeItem("nome") Remove
um
item
armazenado.
clear() - Apaga todo o conteúdo da área de
armazenamento.
key(n) - Obtém o dado armazenado na posição N
especificada.
length - Propriedade que retorna o número de itens
armazenados.
localStorage
Como explicado anteriormente, armazena o dado "para
sempre"
até
que
o
usuário
limpe
os
Cookies/Cache do Browser.
Local_storage.html
Abra o documento no Google Chrome. Aproveite e abra
também as "ferramentas do desenvolvedor" do Google
Chrome:
Está aí o valor armazenado. Agora, faça um teste, e altere
o script para:
Feche o navegador e abra o exemplo novamente:
O fato de fechar o navegador não excluiu o dado armazenado.
Para o localStorage funcionar no Firefox, sem que o dado
seja apagado ao fechar o navegador, é necessário que nas
configurações de privacidade não esteja
remover "Cookies" ao fechar o navegador:
marcado
para
Outra observação importante:
Diferentemente das sessionStorage, um dado armazenado
em localStorage pode ser acessado por qualquer instância
(aba) do navegador e por qualquer página de mesmo domínio
(obs: se o dado foi criado pelo domínio site.com.br ele não
poderá ser acessado pelo domínio site2.com.br).
Como exemplo, crie a página chamada pagina.htm com o
seguinte script:
A outra página do domínio conseguiu acessar a informação.
Isso
não
aconteceria
se
tivesse
sido
usada
a sessionStorage, pois nela os dados só ficam disponíveis
para a página que o criou. Ou seja, para cada página é criado
um espaço diferente de armazenamento e várias páginas
podem criar o mesmo nome de dado sem que haja conflito.
sessionStorage
Armazena o dado apenas para a página (instância atual) e até
que o navegador seja fechado. Quando isso ocorrer, o dado
será deletado.
Session_storage.html
Agora, na pagina.htm altere o script para:
Não foi possível acessar o dado, pois ele só ficou disponível
para a páginasession_storage.html. Além disso, ao fechar
o navegador, ele é removido.
Essas
são
as
sessionStorage.
diferenças
entre localStorage e
Dica: Em "ferramentas do desenvolvedor" do Google
Chrome é possível visualizar os dados salvos em sessão ou
localmente:
Exemplo completo de Web Storage
Primeiro, crie o HTML: web_storage.html
Agora, crie o script webstorage.js:
Clique em "Tornar o parágrafo editável" e altere o
conteúdo do parágrafo; em seguida clique em "Aplicar
alterações":
Feche o navegador e abra-o novamente:
As alterações forma mantidas graças ao conteúdo salvo
no localStorage.
Observações

Os métodos removeAttribute( ) e setAttribute()são
da DOM Level 1 e 2, recomendação da W3C aos
navegadores,
e
totalmente
suportados
pelos
navegadores atuais. Referências e informações sobre a
compatibilidade dos métodos da DOM Level 1 e
2 da W3C acesse:
http://www.quirksmode.org/dom/w3c_core.html
Exemplo de Layout usando a semântica do HTML5
Assim como prometido no início do curso, refaça o "blog"
usando alguns dos novos elementos semânticos do HTML5.
Primeiramente o HTML: Blog_Aprenda.html
Agora, a folha de estilos style_blog.css:
Em execução:
Esclarecendo cada parte:
Para entender cada parte é bom que você retorne ao início do
curso e reveja o significado de cada um dos elementos.
Em resumo:
Dentro das seções foram definidos os artigos para reforçar
que aqueles artigos pertenciam àquela seção.
Os links para os arquivos do blog foram definidos dentro de
um aside, reforçando que ele não faz parte do conteúdo
principal do site.