O HTML5 será o novo padrão para o HTML. A versão anterior, a 4.01, foi definida em 1999. A web mudou bastante desde então. O HTML5 ainda está em fase de construção. Porém, os principais navegadores suportam a maioria dos novos elementos do HTML5 e suas APIs.
Como o HTML5 começou?
O HTML5 é uma cooperação entre o World Wide Web Consortium (W3C) e o Web Hypertext Application Technology Working Group (WHATWG).
O WHATWG tem trabalhado com formulários e aplicações web enquanto o W3C como o XHTML 2.0. Desde 2006, eles decidiram cooperar na criação de uma nova versão do HTML.
Algumas regras estabelecidas para o HTML5:
- Novos recursos devem ser baseados no HTML, CSS, DOM e JavaScript
- Reduzir a necessidade de plugins externos (como o Flash)
- Melhor manipulação de erros
- Mais marcadores para substituir scripts
- O HTML5 não deve depender de nenhum tipo de dispositivo
- O processo de desenvolvimento deve ser vísivel para o público
A tag HTML5 <!DOCTYPE>
No HTML5 existe apenas uma declaração <!doctype>, e esta é muito simples:
<!DOCTYPE html>
Documento HTML5 mínimo
A seguir um documento HTML5 simples, como o mínimo necessário de tags:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>
HTML5 – Novos recursos
Algum dos mais interessantes recursos do HTML5 são:
- O elementos <canvas> para desenho 2D
- Os elementos <video> e <audio> para reprodução de mídia
- Suporte para armazenamento local
- Novos elementos específicos para o conteúdo, como <article>, <footer>, <header>, <nav>, <section>
- Novos controles de formulário, como calendário, data, hora, e-mail, URL, pesquisa
Elementos para o conteúdo
O HTML 5 introduz todo um conjunto de elementos que tornam muito fácil estruturar uma página. Muitas páginas HTML 4 incluíam várias estruturas comuns, como cabeçalhos, rodapés e colunas e hoje, é comum marca-las com elementos div, dando a cada uma delas um id ou class descritivo.
O uso dos elementos div é largamento usado porque nas versões atuais do HTML 4 falta a semântica necessária para descrever essas partes de forma mais especifica. O HTML 5 corrige esse problema ao introduzir novos elementos para representar cada uma dessas seções diferentes.
O código para esse documento deve se parecer com o seguinte:
<body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body>
Existem muitas vantagens de se usar esses elementos. Quando usados em conjunto com os elementos de cabeçalho (h1 to h6), todos eles fornecem uma forma de definir seções aninhadas com vários de níveis de cabeçalho, além dos seis níveis possíveis com as versões anteriores do HTML. A especificação inclui um algoritmo detalhado para gerar um esboço que leva a estrutura desses elementos em conta e se mantem compatível com versões anteriores. Isso pode ser usado tanto por ferramentas de autoração e navegadores para gerar índices que ajudem os usuários à navegar no documento.
Por exemplo, a estrutura a seguir foi criada com seções aninhadas e elementos h1:
<section> <h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section> </section> </section>
Observe que para uma melhor compatibilidade com o navegadores atuais, é possível também fazer uso dos outros elementos de cabeçalho (h2 a h6) de forma apropriada no lugar dos elementos h1.
Pela identificação do propósito das seções da página usando elementos de seccionamento, tecnologias assistivas podem ajudar o usuário a navegar mais facilmente pela página. Por exemplo, eles podem facilmente pular a seção de navegação ou ir direto a um artigo específico sem necessidade que o autor forneça links para isso. Os autores também são beneficiados porque trocar a maioria dos divs do documento por um dos muitos elementos distintos pode ajudar a tornar o código fonte mais claro e fácil para ele.
O elementos header representa o cabeçalho de uma seção. Cabeçalhos podem conter mais do que apenas o titulo da seção – por exemplo, seria razoável que o cabeçalho incluísse sub-títulos, históricos de versões ou assinaturas.
<header> <h1>A Preview of HTML 5</h1> <p class="byline">By Lachlan Hunt</p> </header> <header> <h1>Example Blog</h1> <h2>Insert tag line here.</h2> </header>
O elemento footer representa o rodapé da seção para o qual ele se aplica. Um rodapé tipicamente contém informações sobre sua seção como quem escreveu, links para documentos relacionados, dados de copyright, e assim em diante.
<footer>© 2007 Example Inc.</footer>
O elementos nav representa uma seção de links de navegação. É adequado tanto para navegação do site quanto um índice.
<nav> <ul> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/services">Services</a></li> <li><a href="/about">About</a></li> </ul> </nav>
O elemento aside é para conteúdos que sejam tangencialmente relacionados ao conteúdo em torno dele, e é útil para definição de barras laterais:
<aside> <h1>Archives</h1> <ul> <li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li> <li><a href="/2007/07/">July 2007</a></li> </ul> </aside>
O elementos section representa uma seção genérica de um documento ou aplicação, como um capítulo, por exemplo.
<section> <h1>Chapter 1: The Period</h1> <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, ...</p> </section>
O elemento article representa uma seção independente de um documento, página ou site. É adequado para conteúdo como notícias ou artigos de blogs, post em fóruns ou comentários individuais.
<article id="comment-2"> <header> <h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="http://example.com/">Jack O’Niell</a></h4> <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time> </header> <p>That's another great article!</p> </article>
Veja mais em: http://alistapart.com/article/previewofhtml5
Controles de formulário
Sem nenhum dúvida você interage com ao menos um formulário na Web a cada dia. Seja ao pesquisar por algo ou acessando sua conta de e-mail ou página no Facebook, o uso de formulários on-line é uma das tarefas mais comuns executadas na Web. Tanto para designers ou desenvolvedores, a criação de formulários é uma tarefa um pouco monótona, particularmente ao escrever scripts de validação para eles. O HTML 5 introduz vários atributos novos, tipos de entrada e outros elementos para suas ferramentas. Nesse artigo estaremos focando nos novos atributos, com um um artigo futuro tratando nos tipos de entrada.
Como veremos, esses novos recursos irão tornar sua vida mais fácil ao mesmo tempo que entregará uma experiência agradável para o usuário. A melhor coisa em relação a tudo isso? Você pode começar a usa-los agora. Iremos começar com uma história (muito) breve do formulários HTML 5.
Uma história dos formulários HTML 5
A seção de formulários do HTML 5 foi originalmente uma especificação chamada Web Forms 2.0 que adicionou novos tipos de controle para formulários. Iniciado pelo Opera e editado pelo então empregado da Opera Ian Hickson, foi submetido ao W3C em meados de 2005. O trabalho foi inicialmente executado dentro do W3C. Foi depois combinado com a especificação Web Applications 1.0 para criar a base da especificação HTML5 pelo Web Hypertext Application Technology Working Group (WHATWG).
Usando princípios de design do HTML 5
Uma das melhores coisas sobre os formulários HTML5 é que você pode usar todos esses novos tipos de entrada e atributos de imediato. Eles sequer precisam de alguma gambiarra para funcionar. Isso não quer dizer que todos eles são suportados atualmente, mas eles fazem coisas legais nos navegadores modernos que suportam eles – e são ignorados tranquilamente em navegadores que não entendem-os. Isso se deve aos princípios de projeto do HTML5.
Atributos de formulário HTML 5
Existem 14 novos atributos que estaremos vendo nesse artigo.
placeholderautofocusautocompleterequiredpatternlistmultiplenovalidateformnovalidateformformactionformenctypeformmethodformtarget
placeholder
Em primeiro lugar, temos o atributo placeholder, que permite que configuremos um texto alternativo da forma que faríamos no HTML 4 com o atributo value. Ele deve ser usado apenas para descrições curtas. Para qualquer texto mais longo, deve-se usar o atributo title. A diferença do HTML 4 é que o texto apenas é exibido quando o campo estiver vazio e não estiver em foco. Uma vez que o campo receba foco (por exemplo, quando clica nele ou após teclas TAB), e você começa a digitação, o texto desaparece. É bastante similar a caixa de pequisa vista no Safari (veja Figura 1).
Vamos dar uma olhada em como implementar o atributo placeholder .
<input type="text" name="user-name" id="user-name"placeholder="at least 3 characters">
E é isso! Você pode estar se perguntando: “O que tem de mais nisso? Eu tenho feito isso com JavaScript por anos”. Sim, isso é verdade. Porém, como o HTML5 é parte do navegador, isso significa que é preciso de menos código para uma solução mais acessível por todos os navegadores (mesmo quando JavaScript estiver desativado). A figura 2 mostra o atributo placeholder em funcionamento no Chrome.
Navegadores que não suportem o atributo placeholder irão ignora-lo, assim não renderizarão o campo. Mas incluindo ele, você estará fornecendo uma melhor experiência para os usuários que tenham suporte e estará garantindo o futuro de seu site. Todos os navegadores modernos suportam esse atributo.
autofocus
autofocus faz exatamente o que o nome indica. Adicionando ele a uma entrada ela automaticamente recebe o foco quando a página é renderizada. Assim como o atributoplaceholder, autofocus é algo que implementávamos com JavaScript no passado.
Os métodos tradicionais do JavaScript tem sérios problemas de usabilidade. Por exemplo, se um usuário começa a preencher o formulário antes do script ser carregado, ele retornará de forma abrupta para o primeiro campo do formulário quando o script é carregado. O atributo autofocus do HTML 5 contorna esse problema estabelecendo o foco assim que o documento é carregado, sem ter que esperar pelo carregamento do JavaScript. Porém, só é recomendado usar esse atributo para páginas cujo único propósito é o formulário, para prevenir problemas de usabilidade.
Ele é um atributo Booleano (exceto se estiver escrevendo XHTML5) e é implementado da seguinte forma:
<input type="text" name="first-name" id="first-name"autofocus>
Todos os navegadores modernos suportam o atributo, e assim como o placeholder, navegadores que não suportam o atributo autofocus simplesmente irão ignora-lo.
autocomplete
O atributo autocomplete ajuda os usuário a completar formulários com base em entradas anteriores. Esse atributo existe desde o IE5.5, mas foi finalmente padronizado como parte do HTML5. O estado padrão é ligado (on). Isso significa que geralmente não precisamos usa-lo. Porém, se você quiser garantir que um campo do formulário seja preenchido a cada vez que o formulário seja completado (ao contrário de deixar que o navegador preencha-o automaticamente), você deve implementar isso da seguinte forma:
<input type="text" name="tracking-code" id="tracking-code" autocomplete="off">
O estado “ligado” do autocomplete em um campo do formulário substitui qualquer estado do autocomplete configurado para o elemento form no qual ele está contido.
required
O atributo required não precisa de muita introdução; como no caso do atributo autofocus, ele faz exatamente o que se espera dele. Adicionando ele a um campo do formulário, o navegador exigirá que o usuário entre com dados nele antes de submeter o formulário. Isso substitui a validação de formulário básica que hoje é implementada com o JavaScript, tornando as coisas um pouco mais utilizável e salvando-nos algum tempo de desenvolvimento.required é um atributo Booleano, como o autofocus. Vamos ver ele em ação.
<input type="text" id="given-name" name="given-name"required>
required é atualmente implementado apenas nos navegadores Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 e Chrome 5+, de forma que você precisa continuar mantendo um script para verificar que os campos foram preenchidos no lado do cliente em outros navegadores (*cough* IE!). Opera, Chrome, e Firefox exibem para o usuário uma mensagem de erro (veja Figura 3) quando o formulário é submetido. Na maioria dos navegadores, os erros são traduzidos de acordo com o idioma declarado. O Safari não exibe uma mensagem de erro, mas ao invés disso põe o foco nesse campo.
A renderização padrão das mensagens de erro “required” depende de cada navegador; no momento atual, a mensagem de erro não pode ser estilizada com CSS em todos os navegadores. O Chrome, porém, tem uma propriedade proprietária que você pode usar para esse fim. Peter Gasston escreveu um artigo sobre essa sintaxe. Você pode também estilizar a entrada usando a pseudo-classe :required. Uma alternativa é sobrescrever o texto e estiliza-lo usando o método setCustomValidity()do do JavaScript. Também importante: não se esqueça de essa validação via navegador não substitui para a validação feito no servidor.
pattern
O atributo pattern com certeza deixará muitos desenvolvedores empolgados (ou tão empolgados quando se pode ficar com atributos de formulários). Ele especifica uma expressão regular do JavaScript o qual o valor do campo deve atender. pattern torna fácil a implementação de validação específica para códigos de produtos, números de fatura, e assim em diante. As possibilidades para o atributo pattern são enormes, e a seguir temos apenas um exemplo simples usando um número de produto.
<label>Product Number:
<input pattern="[0-9][A-Z]{3}" name="product"type="text" title="Single digit followed by three uppercase letters."/>
</label>
Esse padrão descreve que o número do produto deve ser um único dígito [0-9] seguido por três letras maiusculas [A-Z]{3}. Para mais exemplo, a páginas HTML5 Pattern lista expressões regulares comuns para ajudar você a começar.
Em relação ao suporte a esse atributo, Opera 9.5+, Firefox 4+, Safari 5+, Internet Explorer 10 e Chrome 5+ são os únicos navegadores com suporte para padrões atualmente. Porém, com o mercado de navegadores se movimentando rapidamente, os outros irão suportar esse recursos rapidamente.
list e o elemento datalist
O atributo list permite que o usuário associe uma lista de opções com um campo em particular. O valor do atributo list precisa ser o mesmo do ID de um elementodatalist localizado no mesmo documento. O elemento datalist é novo no HTML5 e representa uma lista pré-definida de opções para controles de formulário. Ele funciona de forma similar às caixas de pesquisa dos navegadores que auto-completam a informação que está sendo digitada (veja a Figura 4).
O exemplo a seguir mostra como list e datalist são combinados (veja Figura 5):
<label>Your favorite fruit: <datalist id="fruits"> <option value="Blackberry">Blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="Blueberry">Blueberry</option> <!-- … --> </datalist> If other, please specify: <input type="text" name="fruit" list="fruits"> </label>
Ao adicionar um elemento select dentro do datalist você pode prover uma compatibilidade mais suave com navegadores antigos do que simplesmente usar o elemento option. Este é um padrão de design elegante desenvolvido por Jeremy Keith que adequa-se perfeitamente aos princípios de design do HTML5.
<label>Your favorite fruit: <datalist id="fruits"> <select name="fruits"> <option value="Blackberry">Blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="Blueberry">Blueberry</option> <!-- … --> </select> If other, please specify: </datalist> <input type="text" name="fruit" list="fruits"> </label>
Navegadores com suporte aos elementos list e datalist são atualmente limitados ao Opera 9.5+ (veja Figure 5), Chrome 20+, Internet Explorer 10 e Firefox 4+.
multiple
Podemos agora levar nossos lists e datalists um nível adiante aplicando o atributo Booleano multiple para permitir que mais de um valor de datalist seja selecionado. Abaixo segue um exemplo.
<label>Your favorite fruit: <datalist id="fruits"> <select name="fruits"> <option value="Blackberry">Blackberry</option> <option value="Blackcurrant">Blackcurrant</option> <option value="Blueberry">Blueberry</option> <!-- … --> </select> If other, please specify: </datalist> <input type="text" name="fruit" list="fruits"multiple> </label>
multiple não é de uso exclusivo com datalists, porém. Um outro exemplo de uso de multiple poderia ser para endereços de e-mail quando enviando-se itens para amigos ou anexando arquivos, como mostrado a seguir:
<label>Upload files: <input type="file" multiple name="upload"></label>
multiple é suportado pelo Firefox 3.6+, Safari 4+, Opera 11.5+, Internet Explorer 10 e Chrome 4+.
novalidate e formnovalidate
Os atributos novalidate e formnovalidate indicam que o formulário não deve ser validado ao ser submetido. Eles são atributos booleanos. formnovalidate pode ser aplicado à botões de submissão ou tipos de entrada de imagens. O atributonovalidate pode ser confrigurado apenas para o elemento form.
Um exemplo de caso de uso do atributo formnovalidate poderia ser um botão “Salvar rascunho”, onde o formulário possua campos que são necessários para submeter o rascunho mas não para salvar ele. novalidate deve ser usado em casos onde você não queira validar o formulário mas queira tirar vantagem das melhorias na interface com o usuário que os novos tipos de entrada oferecem.
O exemplo a seguir mostra como usar formnovalidate:
<form action="process.php"> <label for="email">Email:</label> <input type="text" name="email"value="gordo@example.com"> <input type="submit" formnovalidate value="Submit"> </form>
E esse exemplo mostra como usar novalidate:
<form action="process.php" novalidate> <label for="email">Email:</label> <input type="text" name="email"value="gordo@example.com"> <input type="submit" value="Submit"> </form>
form
O atributo form é usado para associar elementos input, select, ou textarea em um formulário (conhecido como form owner). O uso de form significa que o elemento não precisa ser um filho do formulário a que é associado e pode ser retirado dele na origem. O uso primário para esse atributo é posicionar botões de entrada de dados em tabelas e poder usa-los com o formulário.
<input type="button" name="sort-l-h" form="sort">
formaction, formenctype, formmethod, e formtarget
Os atributos formaction, formenctype, formmethod, e formtarget possuem um atributo correspondente no elemento form, o qual você está familiarizado do HTML4, então vamos passar por cada um deles de forma breve. Esses novos atributos foram introduzidos principalmente por que você pode necessitar de ações alternativas para botões de submissão diferentes, ao invés de ter vários formulários em um documento.
formaction
formaction especifica o arquivo ou aplicação que irá submeter seu formulário. Tem o mesmo efeito do atributo action do elemento form e pode ser usado com um botão de submissão ou imagem (type="submit" ou type="image"). Quando o formulário é submetido, o navegador verifica em primeiro lugar por um atributo formaction; se não estiver presente, irá procurar por um atributo action no formulário.
<input type="submit" value="Submit"formaction="process.php">
formenctype
formenctype detalha como os dados do formulário serão codificados com o método POST. Tem o mesmo efeito do atributo enctype do elemento form e pode ser usado com um botão de submissão ou uma imagem (type="submit" outype="image"). O valor padrão, caso não especificado, é application/x-www-formurlencoded.
<input type="submit" value="Submit"formenctype="application/x-www-form-urlencoded">
formmethod
formmethod especifica qual método HTTP (GET, POST, PUT, DELETE) será usado para submeter os dados do formulário. Tem o mesmo efeito do atributo methos do elemento form e pode ser usado com um botão de submissão ou uma imagem (type="submit" ou type="image").
<input type="submit" value="Submit" formmethod="POST">
formtarget
formtarget especifica a janela alvo dos resultados no formulário. Tem o mesmo efeito do atributo target do elemento form e pode ser usado apenas com um botão de submissão ou imagem (type="submit" or type="image").
<input type="submit" value="Submit" formtarget="_self">
Armazenamento local
O armazenamento local do HTML5 torna possível armazenar valores no navegador que podem mesmo após o encerramento da sessão, como os cookies. O armazenamento local pode também permitir a transmissão de eventos entre janelas do navegador, um recurso muito útil.
O armazenamento local é uma especificação nova do HTML. Não é efetivamente uma parte da especificação do HTML5, mas nasceu aproximadamente na mesma época, e é frequentemente referenciada como sendo parte na nova plataforma do HTML (que é o HTML5). Por isso a descrição desse recurso consta nesse tutorial de HTML5.
Conceitos básico de armazenamento local
O armazenamento local oferece um depósito simples de pares chave – valor, como uma tabela hash ou um dicionário. O armazenamento local vem em duas versões:
- Armazenamento de sessão
- Armazenamento local
O armazenamento de sessão está disponível dentro da mesma janela do navegador enquanto ela estiver aberta. Quando a janela é fechada, o armazenamento de sessão associada com essa janela é apagado. Múltiplas janelas da mesma origem (URL) não podem ver o armazenamento da sessão uma das outras. Janelas pop-up abertas a partir da mesma janela podem visualizar esses dados, assim como iframe‘s dentro dessa janela.
O armazenamento local está disponível no navegador para todas as janelas com a mesma origem (domínio). Dados armazenados no armazenamento local também estarão disponíveis depois que a janela for fechada. Na próxima vez que a janela for aberta e a página for carregada, ela poderá acessar os valores salvos novamente.
sessionStorage + localStorage
O armazenamento de sessão e o armazenamento local são acessados por dois objetos JavaScripts disponíveis globalmente:
sessionStoragelocalStorage
Os objetos sessionStorage e localStorage são acessados da mesma forma. Apenas seus tempos de vida e visibilidade dos dados que são diferentes.
Você pode configurar propriedades para esses objetos de forma idêntica a qualquer objeto JavaScript. Abaixo segue um exemplo:
sessionStorage.myProperty = "Hello World"; localStorage.myProperty = "Hello World";
A primeira linha desse código configura uma propriedade myProperty para o armazenamento de sessão com o valor Hello World. A segunda linha configura a mesma propriedade para o armazenamento local.
Você pode armazenar apenas Strings nas propriedades do armazenamento de sessão e local. Nada mais. Se precisa armazenar objetos JavaScript, terá que converte-los em uma String JSON primeiro.
Você pode remover uma propriedade do armazenamento de sessão ou local dessa forma:
delete sessionStorage.myProperty; delete localStorage.myProperty;
Podem também usar um dos três método a seguirpara acessar as propriedades do armazenamento se sessão ou local:
sessionStorage.setItem ('propertyName', 'value');
sessionStorage.getItem ('propertyName');
sessionStorage.removeItem ('propertyName');
localStorage.setItem ('propertyName', 'value');
localStorage.getItem ('propertyName');
localStorage.removeItem ('propertyName');
Esses métodos também permitem apenas valores String.
Chaves de iteração no armazenamento local
Você pode iterar as chaves (nomes das propriedades) de cada par chave – valor tanto no armazenamento local quanto no de sessão, dessa forma:
for(var i=0; i < sessionStorage.length; i++){
var propertyName = sessionStorage.key(i);
alert( i + " : " + propertyName + " = " +
sessionStorage.getItem(propertyName));
}
A propriedade sessionStorage.length retorna o número de propridades armazenadas no objeto sessionStorage.
A função key() retorna o nome da propriedade (ou nome da chave) da propriedade que possui o índice passado como parâmetro para a função.
Eventos de Armazenamento
Os objetos de armazenamento disparam eventos que sua aplicação pode querer tratar. Um evento de armazenamento é disparado quando você insere, atualiza ou remove uma propriedade de seu armazenamento local ou da sessão.
O evento do armazenamento é emitido apenas em outras janelas diferentes daquela que inseriu, atualizou ou removeu objetos do armazenamento de sessão ou local.
Para armazenamento de sessão isso significa que os eventos são visíveis apenas em janelas pop-up e iframes.
Para armazenamento local, os eventos são visíveis para todas as janelas abertas da mesma origem, incluindo janelas pop-up e iframes.
Anexando um método para tratar um Evento de Armazenamento
Anexar um método para tratar um evento de um objeto de armazenamento é feito dessa forma:
function onStorageEvent(storageEvent){
alert("storage event");
}
window.addEventListener('storage', onStorageEvent, false);
A função onStorageEvent() é a função de manipulação de eventos.
A chamada para a função addEventListener() adiciona uma função para manipulação de uma evento aos eventos do armazenamento.
O objeto storageEvent passado para a função de manipulação de eventos se parece com isso::
StorageEvent {
key; // name of the property set, changed etc.
oldValue; // old value of property before change
newValue; // new value of property after change
url; // url of page that made the change
storageArea; // localStorage or sessionStorage,
// depending on where the change happened.
}
Você pode acessar esse objeto de dentro da função de manipulação de eventos.
Veja mais em: http://tutorials.jenkov.com/html5/local-storage.html
Elementos <video> e <audio>
<audio>
Até hoje, não havia um padrão para tocar arquivos de áudio em páginas web. Nos dias atuais, a maioria dos arquivos de áudio são tocados através de um plug-in (como o flash). Porém, navegadores diferentes podem ter plug-ins (ou versões dele) diferentes.
O HTML5 define um novo elemento que especifica uma maneira padrão de embutir um arquivo de áudio em uma página web: o elemento the <audio>.
Áudio HTML5 – Como funciona
Para tocar um arquivo de áudio no HTML5, isso é tudo o que você precisa:
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>
O atributo control adiciona controles do áudio, como play, pause, e volume.
Você deve inserir um texto entre as tags <audio> e </audio> para os navegadores que não suportem o elemento <audio>.
O elemento <audio> permite múltiplos elementos <source>. Os elementos <source> podem apontar para diferentes arquivos de áudio. O navegador usará o primeiro formato que ele reconheça.
Formatos de áudio e suporte dos navegadores
Atualmente, existem 3 formatos de arquivo suportados pelo elemento <audio>: MP3, Wav, e Ogg:
| Navegador | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | NO Update: Firefox 21 rodando sobre o Windows 7, Windows 8, Windows Vista, e Android possui suporte ao MP3 |
YES | YES |
| Safari | YES | YES | NO |
| Opera | NO | YES | YES |
Tipos MIME para os formatos de áudio
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
Tags de áudio do HTML5
| Tag | Description |
|---|---|
| <audio> | Define o conteúdo do áudio |
| <source> | Define múltiplos recursos de mídia para os elementos de mídia, tais como <video> e <audio> |
Veja mais em: http://www.w3schools.com/html/html5_audio.asp
<video>
Até hoje, não havia um padrão para exibir vídeos/filmes em uma página web. Nos dias atuais, vídeos são exibidos através de um plug-in (como flash). Porém, navegadores diferentes podem ter plug-ins (ou versões deles) diferentes.
O HTML5 define um novo elemento que especifica um padrão para embutir um vídeo/filme em uma página web: o elemento <video>.
Vídeo HTML5 – Como funciona
Para exibir um vídeo no HTML5, isso é tudo o que você precisa:
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>
O atributo control adiciona controles para assistir na reprodução do vídeo, como play, pause e volume.
É uma boa idéia sempre incluir os atributos width (comprimento) e height (altura). Se height e width forem configurados, o espaço necessário para o vídeo é reservado quando a página é carregada. Porém, sem esses atributos, o navegador não saberá o tamanho do vídeo, e não poderá reservar o espaço apropriado para ele. O efeito disso será que o layout da página será modificado durante o carregamento do vídeo.
Você deve inserir um texto entre as tags <video> e </video> que será exibido nos navegadores que não suportarem o elemento <video>.
O elemento <video> permite incluir múltiplos elementos <source>. Os elementos <source> podem apontar para diferentes arquivos de vídeo. O navegador usará o primeiro arquivo que tenha um formato reconhecido.
Formatos de vídeo e suporte dos navegadores
Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:
| Navegador | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | NO Update: Firefox 21 rodando no Windows 7, Windows 8, Windows Vista, e Android suporta o formato MP4 |
YES | YES |
| Safari | YES | NO | NO |
| Opera | NO | YES | YES |
- MP4 = MPEG 4 arquivos com o codec de vídeo H264 e o codec de áudio AAC
- WebM = WebM arquivos com o codec de vídeo VP8 e o codec de áudio Vorbis
- Ogg = Arquivos Ogg possuem o codec de vídeo Theora e o codec de áudio Vorbis
Tipos MIME para os formatos de vídeo
| Format | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Tag <video> do HTML5 – Métodos e Propriedades do DOM
O HTML5 possui métodos, propriedades e eventos DOM para os elementos <video> e <audio>.
Esses métodos, propriedades e eventos permitem que você manipule os elementos <video> e <audio> usando JavaScript.
Existem métodos para reproduzir, pausar e carregar, e existem propriedades para a duração e para volume. Existem também eventos DOM que podem notificar quando o elementos <video> começa a reproduzir um vídeo, quando ocorre uma pausa, quando a reprodução é encerrada, etc.
O exemplo a seguir ilustra, de forma simples, como usar o elemento <video> para ler e salvar propriedades e chamar métodos.
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>
Tags de vídeo HTML5
| Tag | Description |
|---|---|
| <video> | Define um vídeo ou um filme |
| <source> | Define múltiplos recursos de mídia para os elementos de mídia, tais como <video> and <audio> |
| <track> | Define um texto para as faixas em um reprodutor de mídia |
Veja mais em: http://www.w3schools.com/html/html5_video.asp
Canvas
O elemento <canvas> é usado para desenhar gráficos em uma página web.
Desenho de um retângulo vermelho, um retângulo com gradiente, um retângulo multi-colorido e alguns textos de várias cores no canvas:
O que é o Canvas?
O elemento <canvas> do HTML5 é usado para desenhar gráficos, através de um script (normalmente JavaScript).
O elemento <canvas> é apenas um contêiner para os gráficos. Você precisa usar um script para desenhar de fato os gráficos.
O Canvas possui vários métodos para desenho de caminhos, caixas, círculos, caracteres e adicionar imagens.
Crie um Canvas
Um canvas é uma área retangular em uma página HTML, e é especificado pelo elemento <canvas>.
Nota: Por padrão, o elemento <canvas> não possui nenhuma borda ou conteúdo.
O código para criar um canvas se parece com isso:
<canvas id="myCanvas" width="200" height="100"></canvas>
Nota: Sempre especifique um atributo id (para poder ser referenciado pelo script), e atributos width e height para definir o tamanho do canvas.
Dica: Você pode ter múltiplos elementos <canvas> em uma página HTML.
Para adicionar uma borda, use o atributo style:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
Desenhando no Canvas com o JavaScript
Todos os desenhos no canvas precisam ser feitos através de um código JavaScript:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Exemplo explicado:
Em primeiro lugar, precisamos localizar o elemento <canvas>:
var c=document.getElementById("myCanvas");
Em seguida, chamamos o método getContext() (você precisa passar a String “2d” para o método):
var ctx=c.getContext("2d");
O objeto getContext(“2d”) é um objeto embutido do HTML5. com muitas propriedades e métodos para desenho de caminhos, caixas, círculos, textos e imagens.
As duas linhas seguintes desenham um retângulo vermelho:
ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);
A propriedade fillStyle pode ser uma cor CSS, um gradiente, ou um padrão. O valor padrão para fillStyle é #000000 (preto).
O método fillRect(x,y,width,height) desenha um retângulo preenchido com o estilo de preenchimento atual.
Coordenadas do Canvas
O canvas é um grid de duas dimensões. O canto superior esquerdo do canvas possui as coordenadas (0,0). Dessa forma, o método fillRect() acima tinha os parâmetros (0,0,150,75).
Isso significa que: Inicie do canto superior esquerdo (0,0) e desenhe um retângulo de 150×75 pixels.
Exemplo de Coordenadas
Passe o mouse sobre o retângulo abaixo para visualizar as coordenadas x e y:
Canvas – Caminhos
Para desenhar linhas retas no canvas, usamos os dois métodos a seguir:
- moveTo(x,y) define o ponto de inicio da linha
- lineTo(x,y) define o ponto final da linha
Para desenhar de fato a linha, precisamos usar um dos métodos de borrão (ink), como o stroke().
Exemplo
Definimos um ponto inicial na posição (0,0), e um ponto final na posição (200,100). Em seguida usamos o método stroke() para desenhar de fato a linha:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Para desenhar um circulo no canvas, usamos o seguinte método:
- arc(x,y,r,start,stop)
Para desenhar de fato o círculo, precisamos usar um método de borrão (ink), como o stroke() ou o fill().
Exemplo
Vamos criar um círculo com o método arc():
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
Canvas – Texto
Para desenhar texto no canvas, as propriedades e métodos mais importantes são:
- font – define a fonte do texto
- fillText(text,x,y) – Desenha o texto (com preenchimento) no canvas
- strokeText(text,x,y) – Desenha o texto (sem preenchimento) no canvas
Usando fillText():
Exemplo
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
Exemplo
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);
Canvas – Gradientes
Grandientes podem ser usados para preencher retângulos, círculos, linhas, textos, etc. Formas no canvas não estão limitadas as cores sólidas.
Existem dois tipos distintos de gradientes:
- createLinearGradient(x,y,x1,y1) – Cria um gradiente linear
- createRadialGradient(x,y,r,x1,y1,r1) – Cria um gradiente circular
Uma vez que você tenha um objeto gradiente, precisa adicionar duas ou mais cores.
O método addColorStop() especifica uma cor, e sua posição ao longo do gradiente. A posição de um gradiente pode ser qualquer coisa entre 0 e 1.
Para usar o gradiente, configure a propriedade fillStyle ou strokeStyle para gradient, e então desenhe a forma.
Usando createLinearGradient():
Exemplo
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Usando createRadialGradient():
Exemplo
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
Veja mais em: http://www.w3schools.com/html/html5_canvas.asp
Elementos do HTML ordenados alfabeticamente
|
Tag |
Descrição |
|---|---|
| <!–…–> | Define um comentário |
| <!DOCTYPE> | Define o tipo do documento |
| <a> | Define um hiperlink |
| <abbr> | Define uma abreviação |
| <address> | Define a informação de contato do autor do documento |
| <area> | Define uma área dentro de um mapa de imagem |
| <article>New | Define um artigo |
| <aside>New | Define um conteúdo que fica a margem do conteúdo da página |
| <audio>New | Define um conteúdo sonoro |
| <b> | Define texto em negrito |
| <base> | Especifica a URL base para todas as URLs relativas do documento |
| <bdi>New | Isola uma parte do texto que possa ter que ser formatado em uma direção diferente de um outro texto externo a ele |
| <bdo> | Sobrepõe a direção atual do texto |
| <blockquote> | Define uma seção que é uma citação de uma outra fonte |
| <body> | Define o corpo do documento |
| <br> | Define uma quebra de linha |
| <button> | Define um botão clicável |
| <canvas>New | Usado para desenho de gráficos, em tempo real, via scripting (normalmente JavaScript) |
| <caption> | Define a legenda de uma tabela |
| <cite> | Define o titulo de um trabalho |
| <code> | Define um pedaço de um código de programação |
| <col> | Especifica as propriedades de cada coluna em um elemento <colgroup> |
| <colgroup> | Especifica um grupo de uma ou mais colunas em uma tabela para formatação |
| <command>New | Define um botão de comando que um usuário pode invocar |
| <datalist>New | Especifica uma lista de opções pré-definidas para controles de entrada |
| <dd> | Define a descrição/valor de um termo em uma lista de descrições |
| <del> | Define um texto que foi deletado de um documento |
| <details>New | Define detalhes adicionais que o usuário pode visualizar ou esconder |
| <dfn> | Define um termo de definição |
| <dialog>New | Define uma caixa de diálogo ou janela |
| <div> | Define uma seção em um documento |
| <dl> | Define uma lista de descrições |
| <dt> | Define um termo/nome em uma lista de descrições |
| <em> | Define um texto de enfase |
| <embed>New | Define um contêiner para uma aplicação (não-HTML) externa |
| <fieldset> | Agrupa elementos correlatos em um formulário |
| <figcaption>New | Define uma legenda para um elementos <figure> |
| <figure>New | Especifica um conteúdo auto-contido |
| <footer>New | Define um rodapé para um documento ou seção |
| <form> | Define um formulário HTML para entrada do usuário |
| <h1> to <h6> | Define cabeçalhos HTML |
| <head> | Define informações sobre o documento |
| <header>New | Define um cabeçalho para um documento ou seção |
| <hr> | Define uma mudança de tema em um conteúdo |
| <html> | Define a raiz de um documento HTML |
| <i> | Define que uma parte do texto em voz ou humor alternativo |
| <iframe> | Define um frame inline |
| <img> | Define uma imagem |
| <input> | Define um controle para entrada de dados |
| <ins> | Define um texto a ser inserido em um documento |
| <kbd> | Define uma entrada do teclado |
| <keygen>New | Define um campo gerador de pares de chaves (para formulários) |
| <label> | Define um campo de texto para um elemento <input> |
| <legend> | Define uma legenda para um elemento <fieldset> |
| <li> | Define um item de uma lista |
| <link> | Define o relacionamento entre um documento e um recurso externo (bastante usado para definir uma folha de estilo CSS) |
| <map> | Define um mapa de imagem no lado do cliente |
| <mark>New | Define uma marcação de texto |
| <menu> | Define uma lista de comando de um menu |
| <meta> | Define metadados de um documento HTML |
| <meter>New | Define uma medida escalar dentro de uma faixa conhecida (uma bitola) |
| <nav>New | Define links de navegação |
| <noscript> | Define um conteúdo alternativo para usuários que não possuem suporte para scripts |
| <object> | Defines an embedded object |
| <ol> | Define uma lista numerada |
| <optgroup> | Define um grupo de opções relacionadas em uma lista drop-down |
| <option> | Define uma opção em uma lista drop-down |
| <output>New | Define o resulta de um calculo |
| <p> | Define um paragrafo |
| <param> | Define um parâmetro para um objeto |
| <pre> | Define um texto pré-formatado |
| <progress>New | Representa o progresso de uma tarefa |
| <q> | Define uma citação curta |
| <rp>New | Define o que os navegadores devem exibir quando não suportarem anotações em Ruby |
| <rt>New | Define uma explicação/pronuncia de caracteres (para tipografia do oriente da Àsia) |
| <ruby>New | Define uma anotação Ruby (para tipografia do oriente da Ásia) |
| <s> | Define um texto que não está mais correto |
| <samp> | Define uma exemplo de saída de um programa de computador |
| <script> | Define um script |
| <section>New | Define uma seção em um documento |
| <select> | Define uma lista drop-down |
| <small> | Define um texto de tamanho reduzido |
| <source>New | Define múltiplos recursos de mídia para elementos de mídia (<video> and <audio>) |
| <span> | Define uma seção em um documento |
| <strong> | Define um texto importante |
| <style> | Define informação de estilo para um documento |
| <sub> | Define um texto subscrito |
| <summary>New | Define um cabeçalho visível para um elemento <details> |
| <sup> | Define um texto sobrescrito |
| <table> | Define um tabela |
| <tbody> | Agrupa o conteúdo do corpo de uma tabela |
| <td> | Define uma célula de uma tabela |
| <textarea> | Define um controle para entrada de múltiplas linhas (área de texto) |
| <tfoot> | Agrupa o conteúdo do rodapé de uma tabela |
| <th> | Define uma célula de cabeçalho de uma tabela |
| <thead> | Agrupa o conteúdo do cabeçalho de uma tabela |
| <time>New | Define uma data/hora |
| <title> | Define um titulo para o documento |
| <tr> | Define uma linha de uma tabela |
| <track>New | Define faixas de texto para elementos de mídia (<video> e <audio>) |
| <u> | Define texto que deve ser estilisticamente diferente do texto normal |
| <ul> | Define uma lista não numerada |
| <var> | Define uma variável |
| <video>New | Define um vídeo ou um filme |
| <wbr>New | Define uma possível quebra de linha |