SlideShare une entreprise Scribd logo
1  sur  29
E-Book de estudos sobre HTML 5 1
2 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
Índice:
As Novidades do HTML5 3
O que é o HTML5 8
HTML 5 -Tags Continuadas xTags Descontinuadas 11
HTML5 - A tag CANVAS 15
HTML5 - As tags AUDIO eVIDEO 19
Placeholder - HTML5 24
HTML5: PlaceHolder - Como estilizar 26
Tags da HTML5 – Infográfico 27
Atributos de tratamento de eventos da HTML5 – Infográfico 28
E-Book de estudos sobre HTML 5 3www.devmedia.com.br - Reprodução proibida
As Novidades do HTML5
Autor:Raimundo Botelho
Neste artigo apresento as principais novidades da nova versão da linguagem de marcação de hipertexto HTML, que já está
disponível nos principais navegadores de internet com suporte quase que total.
Link: http://www.devmedia.com.br/as-novidades-do-html5/23992
1. Introdução.
O HiperText Markup Language ou simplesmente HTML, continua trazendo grandes contribuições para o advento da internet,
pois é o tipo de conteúdo que mais trafega pela rede mundial de computadores. Apesar da enorme importância para o mundo
da informação o HTML estancou na versão 4.0.1 desde 1999 e não acompanhou as dinâmicas mudanças que ocorreram nos
últimos anos e para atender as necessidades careceu utilizar plugins externos como o flash player e outros. Mas felizmente,
isso são coisas do passado, pois a W3C (World Wide Web Consortium) e a WHATWG (Web Hypertext Application Technology
Working Group) disponibilizaram uma versão de teste que provavelmente será a nova cara do HTML. Esse artigo mostra as
novas características dessa versão que, inclusive, já tem suporte para algumas funcionalidades nos mais conceituados navega-
dores e brevemente será oficializado por definitivo como o HTML 5.
2. O HTML5.
Surgido a partir de um consórcio entre a W3C (World Wide Web Consortium) e a WHATWG (Web Hypertext Application
Technology Working Group), o HTML5 será o novo padrão para a estruturação e apresentação de conteúdo na Word Wide Web
trazendo melhorias significativas com novas funcionalidades de semântica e acessibilidade, além de melhorar o suporte aos
mais recentes conteúdo multimídias.
As principais mudanças que a nova versão proporcionará aos usuários são: Melhor tratamento de exceção, mais tags para
substituir scripts, independência de plataforma e redução da necessidade de plugins externos.
3. As novas características do HTML5.
As novas característica da versão 5 estão ligadas diretamente as necessidades de suporte independente aos novos formatos
de conteúdos multimídia, as novas funcionalidades de semânticas e acessibilidade. São elas:
a) Inclusão do elemento canvas para desenho.
O elemento canvas foi incluído para permitir desenhar gráficos em uma página web, tarefa essa que atualmente só é possível
com a utilização de plugins externos.
4 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
O canvas é uma área retangular onde o usuário, via JavaScript, vai poder controlar todos os pixels, além de desenhar vários
elementos gráficos como círculo, retângulo, elipse, linha, texto, imagens, etc. Para usar um elemento canvas no documento,
além da inclusão da tag, temos que manipular o elemento via JavaScript:
Inclusão da tag:
1 <canvas id=”myCanvas”width=”400”height=”400”></canvas>
Manipulação do elemento com JavaScript:
1 <script type=”text/javascript”>
2 var myCanvas = document.getElementById(“myCanvas”);
3 var canvas =  myCanvas.getContext(“2d”);
4 canvas.fill#FF0000”;
5 canvas.fillRect(0,0,100,100);
6 </script>
b) Inclusão dos elementos vídeo e áudio para reprodução multimídia.
Outro motivo para integrar plugins externos é o uso de áudio e vídeo nas páginas web. Com a inclusão de tags específicas para
este fim, a HTML5 dá suporte nativo para a reprodução de áudio e vídeo sem a necessidade de utilizar mecanismos externos.
Para usar o elemento áudio ou vídeo, basta incluir a tag específica no documento.
Elemento vídeo:
1 <video width=”100”height=”100”controls=”controls”>
2  <source src=”video.mp4”type=”video/mp4”/>
3  <source src=”video.ogg”type=”video/ogg”/>
4  O seu navegador não suporta o formato.
5 </video>
Elemento áudio:
1 <audio controls=”controls”>
2  <source src=”audio. mp3”type=”audio/mpeg“ />
3  <source src=”audio.ogg”type=”audio/ogg“ />
4 O seu navegador não suporta o formato.
5 </audio>
E-Book de estudos sobre HTML 5 5www.devmedia.com.br - Reprodução proibida
c) Melhor suporte para armazenamento local.
O HTML5 oferece 2 novos objetos para armazenar dados localmente:
sessionStorage: Armazena dados durante uma sessão ativa.
1 <script type=”text/javascript”>
2 sessionStorage. sobreNome =”Botelho”;
3 document.write(sessionStorage. sobreNome);
4 </script>
localStorage: Armazena dados sem limite de tempo.
1 <script type=”text/javascript”>
2 localStorage.sobreNome=”Botelho”;
3 document.write(localStorage. sobreNome);
4 </script>
d) Inclusão de novos elementos de conteúdo específico.
Muitos elementos da versão 4.0.1 foram excluídos da nova versão, uns por nunca terem sido usados, outros por estarem ob-
soletos e outros por serem usados indevidamente. A nova versão trás novos elementos para proporcionar aos usuários uma
melhor estrutura, desenho e conteúdo multimídia.
A seguir uma relação dos novos elementos com sua descrição:
Tag Descrição
<article> Especifica um artigo qualquer
<aside> Relaciona um conteúdo ao redor.
<bdi> Para texto que não esteja diretamente vinculado ao elemento pai.
<command> Um botão, radioButton ou checkBox.
<details>
<summary> Uma legenda ou resumo dentro do elemento detalhe.
<figure> Para agrupamento de uma sessão de conteúdo stand-alone.
<figcaption> Legenda para um elemento figura.
<footer> Para um rodapé de um documento ou sessão.
<header> Para uma introdução de um documento ou sessão.
<hgroup> Para uma sessão de cabeçalhos usando h1 para h6.
<mark> Para textos que são destaques.
<meter> Para uma medição. Deve-se conhecer o valor máximo e mínimo.
<nav> Para uma sessão de navegação.
<progress> Para mostrar o progresso de uma execução.
<ruby> Para anotação rubi.
<rt> Para explicar uma anotação rubi.
<rp> Mostra os navegadores que não suportam anotação rubi.
<section> Para uma sessão de um documento como capítulos, cabeçalhos, rodapés, etc.
<time> Para definir um tempo e/ou data.
<wbr> Quebra de linha.
6 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
e) Inclusão de novos controles para formulário.
Uma carência da versão 4.0.1 e a escassa quantidade de controles para formulário fazendo com que os desenvolvedores recor-
ram as famosas bibliotecas JavaScript, muitas vezes incompatíveis com determinados navegadores.
Na versão 5 novos controles de formulário foram incluídos para facilitar a vida dos desenvolvedores.
São eles:
Tag Descrição
<datalist> Uma lista de opções de entrada.
<keygen> Gera chaves para autenticação de usuários.
<output> Para diferentes tipos de saídas, como a geradas por scripts.
Um dos remanescentes da versão 4.0.1, o elemento input, ganhou novos valores para o atributo type, fazendo com que o de-
senvolvedor ganhe maior controle sobre a entrada de dados pelo usuário.
São os eles:
Type Descrição
tel A entrada é um número de telefone.
search A entrada é um campo de busca.
url A entrada é uma URL.
email A entrada é um ou mais endereço de email.
datetime A entrada é uma data e/ou hora.
date A entrada é uma data
month A entrada é um mês.
week A entrada é um dia da semana.
time A entrada é uma hora.
datetime-local A entrada é uma data e hora local.
number A entrada é um número.
range A entrada é uma faixa de valores.
color A entrada é uma cor em haxadecimal como #FF00FF.
placeholder Especifica uma dica rápida que descreve o valor esperado em um campo de entrada.
f) Total suporte ao CSS3.
Para dar ainda mais liberdade à criatividade dos usuários o HTML5 dá total suporte a mais nova versão das famosas
Cascading Style Sheets, ou simplesmente CSS. Com essa integração as páginas webs podem receber os mais variados tipos de
estilos como sombra nos textos e quadros, efeitos de transição, quadro com cantos arredondados e vários recursos novos que
o CSS3 oferece.
E-Book de estudos sobre HTML 5 7www.devmedia.com.br - Reprodução proibida
4. Suporte.
Apesar da versão 5 não ter sido oficializada, vários navegadores continuam adicionando os novos recursos do HTML5 nas
suas recentes versões. Dentre os navegadores podemos citar: Safari, Chrome, Firefox, Opera e Internet Explorer.
5. Conclusão.
Com a chegada da nova versão da linguagem de marcação HTML só temos a ganhar, pois além de contarmos com novos re-
cursos que permitem uma maior estruturação dos documentos, mais funcionalidades, independência de plataforma, tratamento
de exceção e suporte nativo aos recentes conteúdos multimídias, ainda podemos ficar livres dos incômodos estresses que temos
ao utilizar bibliotecas e plugins externos que nem sempre funcionam como deveriam nos navegadores distintos.
6. Referência.
1. W3Schools - Tutorial de HTML5. Disponível em: http://www.w3schools.com/html5. Acessado em: 30/11/2011.
2. W3C - HTML5. Disponível em: http://www.w3.org/TR/html5. Acessado em: 30/11/2011.
3. Wikipédia - HTML5. Disponível em: http://pt.wikipedia.org/wiki/HTML5. Acessado em: 30/11/2011.
8 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
O que é o HTML5
Autor:Eduardo Feitosa
Veja neste artigo um pouco da história do HTML, o que é o HTML5 e suas principais mudanças em relação às versões anteriores.
Link: http://www.devmedia.com.br/o-que-e-o-html5/25820
Olá gente, tudo bem? Creio que a maioria de vocês já tenha ouvido sobre HTML e já saiba muito bem do que nós estamos
falando. Mas, para dar uma relembrada, e até mesmo situar aqueles que estão iniciando seus estudos, vamos a algumas expli-
cações rápidas.
Um pouco de história
Com o surgimento da web, era necessário criar uma linguagem que fosse entendida por meios de acesso diferentes. Para
tanto, Tim Berners-Lee desenvolveu o HTML, com a proposta de suprir essa necessidade. Somente na década de 1990, quando
o Mosaic – browser desenvolvido por Marc Andreessen – se popularizou, o HTML ganhou força e foi adotado por outros de-
senvolvedores e fabricante de browsers, compartilhando as mesmas convenções.
HTML é uma abreviação de Hypertext Markup Language, ou seja, Linguagem de Marcação de Hipertexto. Resumindo, o HTML
é uma linguagem usada para a publicação de conteúdo (texto, imagens, vídeos, áudio etc.) na web.
Para que você possa entender bem, o HTML é baseado no conceito de hipertexto, que são conjuntos de elementos ligados
por conexões, que podem ser palavras, imagens, vídeos, áudio, documentos etc. que quando conectados, formam uma grande
rede de informação. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados, organizando
conhecimentos e guardando informações relacionadas.
Entre 1993 e 1995, surgiram novas versões (HTML+, HTML 2.0, HTML 3.0) onde foram propostas diversas mudanças para
enriquecer as possibilidades da linguagem, mas, ela ainda não era tratada como padrão. Apenas em 1997, o grupo de trabalho
do W3C, trabalhou na versão 3.2, fazendo com que ela fosse tratada como prática comum.
Resumindo, e creio que você já tenha percebido, o HTML foi criado, e melhorado, para se tornar uma linguagem independente
de plataformas ou meios de acesso, diminuindo custos e fazendo com que a web não ficasse limitada a uma base proprietárias
com formatos incompatíveis.
Em 2004, foi fundado o WHATWG (Web Hypertext Application Technology Working Group) por desenvolvedores de em-
presas como Mozilla, Apple e Opera, onde se iniciou o trabalho de escrever a nova versão do HTML, que seria chamado hoje
de HTML5.
E-Book de estudos sobre HTML 5 9www.devmedia.com.br - Reprodução proibida
Afinal, o que é HTML5 e quais suas principais mudanças?
O HTML5 é a nova versão do HTML4 e um dos seus principais objetivos é facilitar a manipulação dos elementos, possibili-
tando o desenvolvedor modificar as características dos objetos de forma não intrusiva, fazendo com que isso fique transparente
para o usuário final.
Para se ter uma ideia disso, diferente das versões anteriores, o HTML5 fornece ferramentas para o CSS e o Javascript fazerem
seu trabalho da melhor possível de forma que um web site ou aplicação continue leve e funcional.
Algumas tags foram modificadas, outras criadas e algumas descontinuadas. As versões anteriores do HTML não eram pa-
dronizadas para criação de seções comuns e específicas como rodapé, cabeçalho, slidebar, menus etc.
Houve também modificações na forma em que escrevemos o código e organizamos a página. Ela passou a ser mais semântica
com menos códigos, aumentando a interatividade sem a necessidade de instalação de plug-ins, que em alguns casos, causa perda
de performance. É um código interpolável, ou seja, pronto para futuros dispositivos, facilitando a reutilização da informação
de diversas maneiras.
Mas, caso você esteja pensando “vou ter de refazer todo o meu web site”, a WHATWG tem mantido o foco na retro compati-
bilidade, ou seja, você não irá precisar refazer todo o trabalho para se adequar aos novos conceitos e regras.
Estrutura básica
A estrutura básica do HTML5 foi mantida, sofrendo uma pequena alteração no DOCTYPE. Abaixo podemos ver no exemplo:
Listagem 1: Estrutura básica
1 <!DOCTYPE HTML>
2 <html lang=”pt-br”>
3 <head>
4    <meta charset=”UTF-8”>
5    <title></title>
6 </head>
7 <body>
8 </body>
9 </html>
O DOCTYPE
Listagem 2: O DOCTYPE
1 <!DOCTYPE HTML>
Embora o DOCTYPE não seja uma tag HTML, ela deve ser a primeira linha antes do código, pois se tratar de uma instrução
que indica ao navegador ou outro meio qual a versão de marcação o código foi escrito.
10 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
Em versões anteriores, era necessário referenciar o DTD (Document Type Definition) diretamente no código DOCTYPE. Com o
HTML5, essa referência fica por responsabilidade do próprio navegador.
Elemento HTML
Listagem 3: Elemento HTML
1 <html lang=”pt-br”>
Agora começamos a marcação propriamente dita. Para exemplificar, pense no código HTML como uma árvore, onde existem
elementos pais ou filhos, e sempre, o elemento vai estar no topo dessa árvore, sendo assim, o elemento mais importante.
Creio que foi notada a presença de um atributo no elemento . O “lang” é necessário para que os user-agents saibam qual é a
linguagem principal do documento.É necessário lembrar que, o atributo “lang”, não está restrito somente ao elemento , podendo
ser utilizado em qualquer outro elemento indicando a linguagem do texto representado.
HEAD
Este é o local onde fica a “parte inteligente” do web site. No HEAD, ficam os metadados, ou seja, informações sobre a página
e sobre o conteúdo publicado.
Metatag Charset
Listagem 4: Metatag Charset
1 <meta charset=”UTF-8”>
Este item chaveia a tabela de caracteres que vai ser utilizada pelo seu sistema.
Cabe aqui uma explicação importante, bastante útil aos desenvolvedores e futuros desenvolvedores. A internet, por tradição,
foi desenvolvida sob princípios de que não haveria limites para acesso, sendo assim, não importa se alguém estiver aqui no
Brasil ou lá na China, ela pode acessar qualquer conteúdo disponível na web.
Partindo desse princípio, foi criada uma tabela que suprisse essas necessidades, que recebeu o nome de Unicode. Essa tabela
comporta algo em torno de um milhão de caracteres e a maioria dos browsers a suporta plenamente. Ao invés de cada região
ter a sua tabela de caracteres, é muito mais sensato ter uma tabela com o maior número de caracteres possível, e fazendo uso
dela no seu sistema, você garantirá que ele será bem visualizado no Brasil, China ou em qualquer outro lugar do mundo.
O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o programa, nem a língua.
Aqui está só o início, um pouco para nós possamos entender o HTML5, e claro, começar a fazer uso dessa linguagem de mar-
cação. Em outras oportunidades, daremos continuidade, falando mais das novidades e já desenvolvendo na prática.
Com isso, finalizo este artigo e até o próximo.
Um abraço!
E-Book de estudos sobre HTML 5 11www.devmedia.com.br - Reprodução proibida
HTML 5 -Tags Continuadas
xTags Descontinuadas
Autor:Rafael Ribeiro
O HTML5 assim como qualquer outra linguagem ao ser atualizada, além de receber novo comandos, aposenta outros. Dessa
forma, você pode acompanhar no artigo abaixo, as tags que permanecem em uso no HTML5 e as tags que foram descontinuadas
e só servem para as versões anteriores.
Link: http://www.devmedia.com.br/html-5-tags-continuadas-x-tags-descontinuadas/23618
O HTML5 assim como qualquer outra linguagem ao ser atualizada, além de receber novo comandos, aposenta outros. Dessa
forma, você pode acompanhar no artigo abaixo, as tags que permanecem em uso no HTML5 e as tags que foram descontinuadas
e só servem para as versões anteriores.
Tags Continuadas:
<!--...--> Define um comentário;
<!DOCTYPE>  Define o tipo de documento; (No HTML 4 existiam três (3) diferentes tipos de doctype, mas no HTML 5 temos apenas um (1) tipo <!DOCTYPE HTML>.
É aqui que o navegador entende o tipo de documento e como ele deve interpretar as tags nele contidas.)
<a> Define um hyperlink;
<abbr> Define uma abreviação
<address> Define um endereço. (Passa a ser tratado como uma seção);
<area> Define uma área dentro de um mapa de imagem;
<b> Define um texto em negrito; (Possui o mesmo nível semântico que um SPAN, e também o estilo de negrito no texto.
Contudo, ele não dá nenhuma importância para o texto marcado com ele.) 
<base> Define uma base URL para todos os links da página;
<bdo> Define a direção do texto apresentado;
<blockquote> Define uma citação longa;
<body> Define o corpo da página;
<br> Insere uma quebra de linha simples;
<button> Define um botão de comando;
<caption> Define o“caption”de uma tabela;
12 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
<cite> Define uma citação;
<code> Define o código texto do computador;
<col> Define os atributos da coluna da tabela;
<colgroup> Define um grupo de colunas da tabela;
<dd> Define uma descrição de definição;
<del> Define um texto deletado;
<dfn> Define um termo de definição;
<div> Define uma seção no documento;
<dl> Define uma lista de definição;
<dt> Define um termo de definição;
<em> Define um texto em ênfase;
<fieldset> Define um conjunto de campos (fieldset);
<form> Define um formulário;
<h1> até <h6> Define do cabeçalho 1 até o cabeçalho 6;
<head> Define uma informação sobre o documento. (Não aceita mais elementos Child como filho);
<hr> Define uma regra horizontal. (Tem o mesmo nível que um parágrafo, mas também é utilizado para fazer separações e quebras de linha);
<html> Define um documento html;
<i> Define um texto em itálico; (Possui o mesmo nível semântico que um SPAN. O texto continua sendo itálico e para usuários de leitores de tela, a voz utilizada é modificada
para indicar ênfase. É de grande valor e utilidade para marcar, termos técnicos, termos em outras linguagens etc.)
<iframe> Define uma linhas sobre a janela (frame);
<img> Define uma imagem;
<input> Define um campo de inserção;
<ins> Define um texto inserido;
<kbd> Define um texto do teclado;
<label> Define uma“label”para o formulário;
<legend> Define um título para os campos (fields);
<li> Define os itens da lista;
<link> Define uma referência;
<map> Define uma imagem de mapa;
<menu> Define uma lista de“menus”;
<meta> Define informações meta;
<noscript> Define uma seção noscript;
<object> Define um objeto incorporado;
<ol> Define uma lista ordenada;
<optgroup> Define um grupo de opção;
E-Book de estudos sobre HTML 5 13www.devmedia.com.br - Reprodução proibida
<option> Define uma opção em uma lista suspensa (drop-down list);
<p> Define um parágrafo;
<param> Define um parâmetro para determinado objeto;
<pre> Define um texto pré-formatado;
<q> Define uma citação curta;
<s> Define um texto que não é mais correto.
<samp> Define um código de amostra;
<script> Define um script;
<select> Define uma lista selecionável;
<small> Define um pequeno texto;
<span> Define uma seção no documento;
<strong> Define um texto forte (similar ao negrito);
<style> Define um estilo;
<sub> Define um texto subscrito;
<sup> Define um texto sobrescrito;
<table> Define uma tabela;
<tbody> Define o corpo da tabela;
<td> Define uma célula da tabela;
<textarea> Define um área de texto;
<tfoot> Define o rodapé da tabela;
<th> Define o cabeçalho da tabela;
<thead> Define o cabeçalho da tabela;
<title> Define o título do documento;
<tr> Define uma linha da tabela;
<ul> Define uma lista desordenada;
<var> Define uma variável;
Tags Descontinuadas:
<acronym> Define siglas em HTML 4.01. (Desenvolvedores preferem utilizar a tag <abbr>);
<applet> Define um miniaplicativo incorporado. (Ficou obsoleto em função da tag <object>);
<basefont> Define as propriedads da font padrão para todo o texto do documento. (Apenas efeito visual);
<big> Usado para tornar o texto maior. (Apenas efeito visual);
<center> Usado para alinhar texto e conteúdo no centro. (Apenas efeito visual);
<dir> Define a lista do diretório. (Ficou obsoleto em função da Tag <ul>);
<font> Especifica o tipo de fonte, tamanho, e cor do texto. (Apenas efeito visual);
14 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
<frame> Define uma janela particular dentro de um conjunto de“frames”. (Fere princípios de usabilidade e acessibilidade);
<frameset> Define um conjunto de frames organizado por múltiplas janelas.(Fere princípios de usabilidade e acessibilidade);
<noframes> Texto exibido para navegadores que não lidam com“frames”. (Fere princípios de usabilidade e acessibilidade);
<strike> Exibe texto rasurado. (Apenas efeito visual);
<tt> Define teletipo de texto. (Apenas efeito visual);
<u> Define sublinhado. (Apenas efeito visual);
<xmp> Define texto pré-formatado. (Ficou obsoleto em função da tag <pre>);
Se analisarmos bem as definições podemos perceber que muitas tags descontinuadas tiveram esse fim por já existirem tags
que realizam a mesma função. E ao utilizar o HTML 5 você perceberá que algumas tags continuadas foram modificadas e
passaram a exercer outras propriedades, fazendo, também, que outras tags percam valor.
Nota 1: Você pode ouvir em algum lugar sobre HTML - ArqHP (Arquitetura de Home Pages). É o próprio HTML 5 com
outra denominação e isso é apenas uma jogada de marketing.
Nota 2: Os HTML 1, HTML 2 , HTML 3 e o HTML 4 estão todos contidos no HTML 5 e mesmo as tags descontinuadas
não trazem nenhum problema de compatibilidade com o HTML 5 e o contrário também ocorre, onde as novas tags também
não trazem nenhum problema de compatibilidade com as versões antigas.
Usem e abusem das tags!
Um grande abraço!
Rafael Marins Ribeiro - Engenheiro de Softwares
E-Book de estudos sobre HTML 5 15www.devmedia.com.br - Reprodução proibida
HTML5 - A tag CANVAS
Autor:Allan Douglas
Veja nesse artigo uma rápida introdução sobre a nova versão da linguagem de marcação de texto, HTML. E como principal foco
deste artigo, está a nova tag CANVAS, como criá-la e desenhar nela, formar linhas e imagens. Antes de falarmos do HTML5,
precisamos lembrar-nos do HTML4 que, quando foi lançado, a comunidade de desenvolvedores foi alertada de boas práticas
que deveria seguir. Formatação, separação de código, acessibilidade eram algumas dessas boas práticas.
Link: http://www.devmedia.com.br/html5-a-tag-canvas/25413
Atenção! Neste artigo julgo que os leitores já têm conhecimento sobre HTML, tendo em vista que não será abordada a iniciação
ao mesmo.
O que é HTML5?
Antes de falarmos do HTML5, precisamos lembrar-nos do HTML4 que, quando foi lançado, a comunidade de desenvolve-
dores foi alertada de boas práticas que deveria seguir. Formatação, separação de código, acessibilidade eram algumas dessas
boas práticas.
Porém essa versão ainda não trazia um grande diferencial e também não facilitava o uso de Javascript e CSS.
O HTML5, logicamente, é a evolução direta do HTML4, a qual corrige bugs de sua versão anterior e principalmente traz
muitas melhorias à linguagem, pois tem como um de seus objetivos facilitar a manipulação do elemento possibilitando ao
desenvolvedor modificar as características do objeto de forma não intrusiva.
Entre outras características, a 5ª versão do HTML vem com novas tags, como por exemplo: <video>, <audio> e <canvas>.
Visto isto, podemos dar início ao principal foco deste artigo, que é entender e exemplificar a tag .
A tag canvas
A canvas nada mais é do que um espaço onde podemos desenhar elementos específicos, formas geométricas e imagens, por
exemplo, através de script (javascript geralmente). Também podemos usar CSS para a tag .
Por Javascript podemos acessar métodos da canvas que desenham formas, linhas, caracteres e adicionar imagens.
Lembre-se que em uma canvas podemos apenas desenhar elementos gráficos e não elementos HTML, por exemplo, uma
pode conter uma mas o contrário não é verdade.
Vale resaltar que versões antigas de navegadores podem ser incompatíveis, as versões do Internet Explorer anterior ao 9, por
exemplo.
16 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
Criar uma canvas não difere do que já conhecemos de outras tags HTML. Vejamos:
Listagem 1: Criando uma canvas
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <canvas id=”idCanvas”width=”200”height=”100”style=”border:1px solid #c3c3c3;”>
5 Se seu navegador não suportar HTML5 você verá esta mensagem.
6 </canvas>
7 </body>
8 </html>
Na Listagem 1 criamos uma canvas com largura 200px e altura 100px e usamos CSS para decoramos a borda da mesma.
Note que coloquei um texto dentro da canvas que será exibido caso você não esteja usando um navegador que tenha suporte
ao HTML5, lembre-se que não podemos colocar elementos HTML dentro de canvas.
Veremos no próximo tópico como desenhar dentro da canvas por Javascript.
Desenhando formas e imagens na canvas
Muito bem, vamos começar a desenhar agora. Nos próximos exemplos veremos como desenhar círculos, retângulos, linhas
e por fim veremos como adicionar imagens.
Antes de começarmos os desenhos, devemos saber que uma canvas é composta por pixels como em um plano cartesiano que
começam em x = 0 e y =0 no canto superior esquerdo onde x é crescente para a direita e y é crescente para baixo.
Figura 1: Modelo de uma canvas
E-Book de estudos sobre HTML 5 17www.devmedia.com.br - Reprodução proibida
Outra coisa que devemos saber é que sempre antes de desenhar, devemos selecionar a canvas e capturar o contexto gráfico
da mesma, pelo metodo getContext(), da seguinte forma:
Listagem 2:  Selecionando a canvas e capturando o contexto gráfico
1 <script type=”text/javascript”>
2 var c=document.getElementById(“idCanvas”);
3 var ctx=c.getContext(“2d”);
4 </script>
Para desenhar qualquer coisa na canvas, sempre devemos ter o contexto dela acessível, por isso armazenamos ele em uma
variável.
Desenhando Linha
Para desenharmos uma linha, precisamos usar no mínimo três métodos, são eles: moveTo(x,y), lineTo(x,y) e stroke(). O
primeiro define o ponto inicial da linha, já o segundo é o próximo ponto, o último, por sua vez, desenha a linha. Vejamos
um exemplo na Listagem 3.
Listagem 3:  Criando um linha
1 <script type=”text/javascript”>
2 var c=document.getElementById(“idCanvas”);
3 var ctx=c.getContext(“2d”);
4 ctx.moveTo(10,10);//ponto inicial
5 ctx.lineTo(150,50);//próximo ponto
6 ctx.stroke();//desenha
7 </script>
Desenhando um circulo
Aqui vamos precisar basicamente de dois métodos: arc(x,uy,r,aInicial,aFinal) que recebe as coordenadas onde será colocado o
centro do circulo, o raio e os ângulos em relação aos quadrantes do círculo, e o já conhecido stroke(). Vejamos na prática:
Listagem 4: Desenhando o circulo
1 <script type=”text/javascript”>
2 var c=document.getElementById(“idCanvas”);
3 var ctx=c.getContext(“2d”);
4 ctx.arc(70,18,15,0,Math.PI * 2);
5 ctx.stroke();
6 </script>
18 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
Note que estamos usando Math.PI * 2 onde deveríamos passar o ângulo final, isso nada mais é que uma forma de desenhar
um circulo completo. Você pode experimentar mudar esses valores e ver como fica.
Desenhando um Retângulo
No desenho do retângulo, apenas mais um método que não conhecemos é apresentado: rect (x,y,largura,altura). Em sguida
usamos novamente o stroke().
Listagem 5: Desenhando um retângulo
1 <script type=”text/javascript”>
2 var c=document.getElementById(“idCanvas”);
3 var ctx=c.getContext(“2d”);
4 ctx.rect(20,20,150,50);
5 ctx.stroke();
6 </script>
Adicionando imagens
Para imagens o processo é um pouco diferente do que vimos até agora, mas é tão simples quanto.
Precisaremos instanciar um objeto do tipo Image e adicionar ao método onload dela uma função que chama o método
drawImage(Image,x,y) e, finalmente, dizer para o objeto do tipo Image qual a url da imagem. Vejam os passos na Listagem 6:
Listagem 6: Desenhando uma image
1 <script type=”text/javascript”>
2 var c=document.getElementById(“idCanvas”);
3 var ctx=c.getContext(“2d”);
4 var img=new Image();
5 img.onload = function(){
6 ctx.drawImage(img,0,0);
7 };
8 img.src=”img.png”;
9 </script>
Bem, galera, fico por aqui. Espero que tenham gostado, e se quiserem saber mais sobre os métodos da canvas, visitem esse
link http://www.w3schools.com/html5/html5_ref_canvas.asp.
Obrigado, deixem seus comentários e até a próxima.
E-Book de estudos sobre HTML 5 19www.devmedia.com.br - Reprodução proibida
HTML5 - As tags AUDIO eVIDEO
Autor:Allan Douglas
Veja nesse artigo uma introdução as tags de mídia do HTML5 que vieram para acabar com a dependência de plugins para a
reprodução de áudio e vídeo nos navegadores, veja como criar um player de áudio e vídeo e também como manipulá-los via
Javascript.
Link: http://www.devmedia.com.br/html5-as-tags-audio-e-video/26018
Com a chegada do HTML5 temos muitas novidades, umas conceituais outras mais visíveis, entre estas podemos destacar
a criação de três novas tags, <vídeo>,<áudio> e <canvas>. As duas primeiras serão abordadas aqui nesse artigo, enquanto
sobre a <canvas> já foi escrito um artigo que você pode conferir aqui nesse link: http://www.devmedia.com.br/html5-a-tag-
canvas/25413.
Para quem ainda não sabe, as tag’s <audio> e <vídeo> são tag’s de media que foram criadas, entre outros motivos, para acabar
com a dependência de plugin’s para a reprodução de áudio e vídeo nas páginas. Dessa forma em sites que precisaríamos ter
instalado o Flash, por exemplo o Youtube, não iremos mais, basta que sejam implementadas essas novas tag’s e que tenhamos
um navegador compatível com HTML5, o que não é incomum hoje em dia tendo em vista que todos os navegadores mais recente
são. O IE8 foge dessa lista apenas o IE9 suporta o HTML5.
Como já sabemos, a simplicidade é uma das características do HTML5, para estas tag’s isso não é diferente, pois agora passa-
remos a manipular áudio e vídeo praticamente como manipulamos a inserção de imagens.
Sabendo disso vejamos a seguir algumas características e demonstrações de ambas, de maneira a abordar o básico porém
funcional. Vamos começar com a tag <audio>.
A tag <áudio>
Como o nome já sugere esta tag serve para reproduzirmos uma mídia de áudio, vejamos:
Listagem 1: Demonstração básica do uso da tag <audio>
1 <!DOCTYPE HTML>
2 <head>
3 <meta content=”text/html; charset=utf-8”http-equiv=”Content-Type”>
4 <title>HTML5 Audio</title>
5
6 </head>
20 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
7 <body>
8 <audio autoplay=”autoplay”controls=”controls”>
9 <source src=”sua_musica.mp3”type=”audio/mp3”/>
seu navegador não suporta HTML5
10 </audio>
11 </body>
12 </html>
Na Listagem 1 temos um exemplo básico do uso da tag <audio>, nela estamos setando autoplay e controls, que servem para
tocar automaticamente e habilitar os controles do player, respequitivamente. Será reproduzida a mídia sua_musica.mp3 definina
na tag <source> dentro da tag <audio> pela propriedade “src”. Veja a Imagem 1 como ficaria no navegador:
Figura 1: Player criado pela tag <audio>
Caso seu navegador não suporte o HTML5 você verá o seguinte: “seu navegador não suporta HTML5”
Como é por natureza um componente HTML e não um plugin, podemos fazer alguma modificações no player via CSS, como
por exemplo, cor, tamanho, float e position.
Pode ser feita também a customização por outros elementos HTML e por meio de Javascript podemos controlar propriedades
como o PLAY, PAUSE, VOLUME e por CSS criamos nosso próprio player.
Listagem 2: Controle da tag áudio por Javascript
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta content=”text/html; charset=utf-8”http-equiv=”Content-Type”>
5 <title>HTML5 Audio</title>
6 </head>
7 
8 <body>
9 <audio autoplay=”autoplay”controls=”controls”>
10    <source src=”sua_musica.mp3”type=”audio/mp3”/>
    seu navegador não suporta HTML5
E-Book de estudos sobre HTML 5 21www.devmedia.com.br - Reprodução proibida
11 </audio>
12 </body>
13 
14 </html>
O código acima resultaria mais ou menos como na Figura 2:
Figura 2: Controlando o áudio por Javascript
Este é apenas um exemplo básico, mas com um pouco conhecimento em javascript e CSS pode-se fazer um player muito bom.
Dessa forma podemos desabilitar o atributo “controls”, para que tenhamos o controle apenas pelo nosso proprío player.
Os atributos da tag <audio>:
Atributo Valor Descrição
autoplay autoplay Define que o audio começará a ser tocado assim que ele estiver pronto.
controls controls Os controles serão mostrados.
loop loop Define que o audio começará a ser tocado novamente quando terminar.
preload preload
Define que o audio será carregado enquanto a página é lida. Esse atributo
é ignorado caso o atributo autoplay estiver definido.
src url URL do arquivo a ser tocado.
Formatos de áudio suportados:
Formato IE 8+ Firefox 3.5+ Opera 10.5+ Chrome 3.0+ Safari 3.0+
Ogg Vorbis Não Sim Sim Sim Não
MP3 Não Não Não Sim Sim
Wav Não Sim Sim Não Sim
22 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
Agora veremos a TAG <video>.
TAG <video>
Aqui seguimos o mesmo conceito da <audio>, inclusive sua sintaxe é muito parecida. Vejamos o exemplo da Listagem 3.
Listagem 3: A tag <video>
1 <!DOCTYPE HTML>
2 <head>
3 <meta content=”text/html; charset=utf-8”http-equiv=”Content-Type”>
4 <title>HTML5 Vídeo</title>
5 </head>
6 <body>
7 <video width=”320”height=”240”controls=”controls”>
8    <source src=”filme.mp4”type=”video/mp4”>
9    <source src=”filme.ogg”type=”video/ogg”>
10    Seu navegador não suporta HTML5.
11 </video>
12 </body>
13 </html>
Vejam que praticamente não há nada diferente do que já vimos, exceto as propriedades width e height que não tínhamos de-
finido na tag <audio>. Mas para o video é uma boa prática e extremamente importante, pois se não especificarmos o tamanho
que a tag deve ocupar, o navegador pode se perder e causar um desastre no restante do layout.
Os formatos de vídeos suportados atualmente são:
Navegador MP4 WebM Ogg
Internet Explorer 9 SIM NÃO NÃO
Firefox 4.0 NÃO SIM SIM
Google Chrome 6 SIM SIM SIM
Apple Safari 5 SIM NÃO NÃO
Opera 10.6 NÃO SIM SIM
Da mesma forma como na tag <audio>, a tag <video> também pode ser manipulada por Javascript.
E-Book de estudos sobre HTML 5 23www.devmedia.com.br - Reprodução proibida
Na Listagem 4 pode ser observado o trecho de código Javascript escrito para controlar um vídeo.
Listagem 4: Controlando o vídeo por Javascript
1 <script>
2 function playPause(){
3 if (video.paused)
4  video.play();
5 else
6  video.pause();
7 }
8 
9 function grande(){
10 /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */
11 video.width=560;
12 }
13 
14 function pequeno(){
15 /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */
16 video.width=320;
17 }
18 
19 function normal(){
20 /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */
21 video.width=420;
22 }
23 </script>
Bem pessoal fico por aqui, espero que tenham gostado e principalmente ficado curiosos para saber mais desse assunto, dessa independência de
plugins. Fiquem a vontade para deixar seus comentário e críticas e até a próxima.
24 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
Placeholder - HTML5
Autor:Erackson Queiroz De Brito
Veja nesse artigo o funcionamento do atributo PLACEHOLDER implementado em algumas TAGs no HTML5, uma forma de
detecção de suporte do navegador e um exemplo de código caso o navegador não dê suporte.
Link: http://www.devmedia.com.br/placeholder-html5/24503
Veja nesse artigo o funcionamento do atributo PLACEHOLDER implementado em algumas TAGs no HTML5, uma forma de
detecção de suporte do navegador e um exemplo de código caso o navegador não dê suporte. Quem nunca precisou colocar um
valor padrão dentro do input e teve que fazer uma gambiarra, digo, adaptação técnica do tipo:
Listagem 1: Exemplo de gambiarra antes do HTML5
1 <input type=”text”name=”nome”value=”Seu Nome”
2 onfocus=”javascript:(this.value==’Seu Nome’?this.value =‘’:null);”
3 onblur=”javascript:(this.value==’’?this.value =‘Seu Nome’:null);”/>
O Placeholder resolve esse problema inserindo, dentro do input, um texto que será apagado quando começar a digitar dentro
do campo, e mostrado de novo ao perder o focus do elemento e o conteúdo seja vazio.
Listagem 2: Exemplo de uso do placeholder aplicado em input.
1 <input type=”text”name=”nome”value=””placeholder=”Seu Nome”/>
No exemplo acima o texto “Seu Nome” irá aparecer dentro do input enquanto o conteúdo do mesmo for vazio.
Esse novo atributo também pode ser usado em textareas.
Listagem 3: Exemplo de uso do placeholder aplicado em textarea.
1 <textarea name=”mensagem”value=””placeholder=”Digite uma mensagem...”/>
No exemplo acima o texto “ Digite uma mensagem...” irá aparecer dentro do textarea enquanto o conteúdo do mesmo for vazio.
E-Book de estudos sobre HTML 5 25www.devmedia.com.br - Reprodução proibida
Listagem 4: Como verificar se o navegador tem suporte ao placeholder?
1 function suportaPlaceholder() {
2    var elemento = document.createElement(‘input’);
3    return (‘placeholder’in elemento);
4 }
Caso o navegador não dê suporte pode ser usado o código a seguir:
Listagem 5: Exemplo placeholder para navegadores sem suporte. Usando a biblioteca jQuery.
1 $(function(){
 2 $(‘[placeholder]’).focus(function(e) {
3    var elemento = $(e.target);
4    if (elemento.val() == elemento.attr(‘placeholder’)) {
5        elemento.val(‘’);
6    }
7  }).blur(function(e) {
8    var elemento = $(e.target);
9    if (elemento.val() ==‘’|| elemento.val() == elemento.attr(‘placeholder’)) {
10        elemento.val(elemento.attr(‘placeholder’));
11    }
12  }).trigger(‘blur’);
13 });
Para evitar que os valores padrões sejam enviados para o formulário, no exemplo acima, pode ser usado o script a seguir:
Listagem 6: Código que limpa os valores dos elementos que tem o placeholder antes de enviar o formulário
1 $(function(){
2    $(‘[placeholder]’).parents(‘form’).bind(‘submit’, function(e) {
3        var $form = $(e.target);
4        if(!!$form.data(‘binded’) == false){
5            $(e.target).find(‘[placeholder]’).each(function(i,el) {
6                if (el.val() == el.attr(‘placeholder’)) {
7                    el.val(‘’);
8                }
9            });
10            $form.data(‘binded’,true);
11        }
12    });
13 });
É isso galera. Espero que tenham gostado. Até o próximo artigo.
26 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
HTML5:PlaceHolder - Como estilizar
Autor:Erackson Queiroz De Brito
Veja nesse artigo como usar CSS para estilizar o texto do placeholder do HTML 5.
Link: http://www.devmedia.com.br/html5-placeholder-como-estilizar/24589
Veja nesse artigo como usar CSS para estilizar o texto do placeholder do HTML 5.
No artigo anterior aprendemos e vimos como é simples usar o atributo placerholder das TAGs input e textarea: Placeholder
em HTML 5. Nesse você vai ver que estilizar é mais simples ainda.
Listagem 1: Exemplo de CSS para estilizar o placeholder.
1 ::-webkit-input-placeholder  { color:#4C4; }
2 input:-moz-placeholder { color:#4C4; }
3 textarea:-moz-placeholder { color:#4C4; }​
Listagem 2: O HTML.
1 <input type=”text”name=”nome”placeholder=”Nome”/><br />
2 <textarea name=”mensagem”placeholder=”Mensagem”></textarea>
Veja o código acima funcionando em http://jsfiddle.net/erackson/9kaHw/1/
Caso queira fazer um estilo para apenas um campo você pode fazer da seguinte forma:
Listagem 3: Exemplo de CSS para estilizar o placeholder de apenas um campo.
1 #email::-webkit-input-placeholder{
2    color:#C4C;
3    background-color: #4C4;
4    text-transform: uppercase;
5    font-style: bold;
6 }
7 #email::-moz-placeholder {
8     color:#C4C;
9    background-color: #4C4;
10    text-transform: uppercase;
11    font-style: bold;
12 }​
Veja o código acima funcionando em http://jsfiddle.net/erackson/9kaHw/2/
E-Book de estudos sobre HTML 5 27www.devmedia.com.br - Reprodução proibida
Tags da HTML5 – Infográfico
Autor:Joel Rodrigues
Veja neste infográfico uma tabela com todas as tags atualmente suportadas pela HTML5, para ser usada como referência por
todos que utilizam essa linguagem. Várias tags novas foram inseridas e algumas antigas foram descontinuadas, nesta tabela
elas são apresentadas separadamente, facilitando a compreensão das modificações sofridas pela linguagem.
Link: http://www.devmedia.com.br/tags-da-html5-infografico/25831
Na imagem abaixo estão dispostas todas as tags atualmente suportadas pela versão 5 da linguagem HTML. São indicadas as
novas tags, as que foram descontinuadas e aquelas que permanecem desde a versão anterior.
(clique no link para ampliar: http://www.devmedia.com.br/artigos/Joel_Rodrigues/infografico-TagsHTML5.jpg)
28 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida
Atributos de tratamento
de eventos da HTML5 – Infográfico
Autor:Joel Rodrigues
Veja neste infográfico uma tabela com os atributos de tratamento de eventos atualmente suportados pela HTML5, para ser
usada como referência por todos que utilizam essa linguagem.
Link: http://www.devmedia.com.br/atributos-de-tratamento-de-eventos-da-html5-infografico/25841
Na imagem abaixo é apresentada uma tabela onde estão dispostos os atributos de tratamento de eventos (event handlers)
da linguagem HTML em sua versão 5. Alguns novos eventos foram adicionados, principalmente relacionados a elementos de
mídia (áudio e vídeo), enquanto outros apenas foram mantidos desde a versão 4 ou descontinuados.
Esta tabela pode ser usada como referência rápida para aqueles que utilizam HTML 5 no desenvolvimento de aplicações.
(clique no link para ampliar: http://www.devmedia.com.br/artigos/Joel_Rodrigues/infografico-EventosHTML5.jpg)
www.devmedia.com.br - Reprodução proibida

Contenu connexe

Tendances

Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Renato Bongiorno Bonfanti
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptFábio Flatschart
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Anderson Aguiar
 
Programação para Web II: HTML5
Programação para Web II: HTML5Programação para Web II: HTML5
Programação para Web II: HTML5Alex Camargo
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webigorpimentel
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Valmir Justo
 
PHP - Capítulo 01
PHP - Capítulo 01PHP - Capítulo 01
PHP - Capítulo 01fdorado
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Webigorpimentel
 

Tendances (18)

HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
HTML5
HTML5HTML5
HTML5
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Html5 Aula 5
Html5 Aula 5Html5 Aula 5
Html5 Aula 5
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila curso xhtml css
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
Desenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScriptDesenvolvimento Web : HTML5, CSS3 & JavaScript
Desenvolvimento Web : HTML5, CSS3 & JavaScript
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Programação para Web II: HTML5
Programação para Web II: HTML5Programação para Web II: HTML5
Programação para Web II: HTML5
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Revista On-line
Revista On-lineRevista On-line
Revista On-line
 
PHP - Capítulo 01
PHP - Capítulo 01PHP - Capítulo 01
PHP - Capítulo 01
 
Apostila html
Apostila htmlApostila html
Apostila html
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 

Similaire à E-Book de estudos

Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aulaclodiney cruz
 
1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdfNickMartinsgaspar
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012Fábio Flatschart
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsNáiron Jcg
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxLuiz Antonio
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúClécio Bachini
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaDiego Cavalca
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal Clécio Bachini
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01 Léo Dias
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavoGustavo Passos
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5Danilo Sousa
 
Aprender html5 em 4 passos
Aprender html5 em 4 passosAprender html5 em 4 passos
Aprender html5 em 4 passosJeser Cotrim
 

Similaire à E-Book de estudos (20)

HTML5
HTML5HTML5
HTML5
 
Html5 - Notas de aula
Html5 - Notas de aulaHtml5 - Notas de aula
Html5 - Notas de aula
 
1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf1a5614c679b23c018654639f6b57ecf1.pdf
1a5614c679b23c018654639f6b57ecf1.pdf
 
HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012HTML5 - Road Show TI Experience 2012
HTML5 - Road Show TI Experience 2012
 
HTML 5 e Open Web Platform
HTML 5 e Open Web PlatformHTML 5 e Open Web Platform
HTML 5 e Open Web Platform
 
XHTML e CSS
XHTML e CSSXHTML e CSS
XHTML e CSS
 
Benef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandardsBenef&iacute;cios dos WebStandards
Benef&iacute;cios dos WebStandards
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
W3C Web Standards HTML
W3C Web Standards HTMLW3C Web Standards HTML
W3C Web Standards HTML
 
Html5 e css3
Html5 e css3Html5 e css3
Html5 e css3
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
Seminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec CafelândiaSeminário de Desenvolvimento Mobile - Etec Cafelândia
Seminário de Desenvolvimento Mobile - Etec Cafelândia
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Iniciando em html5 seleção gustavo
Iniciando em html5   seleção gustavoIniciando em html5   seleção gustavo
Iniciando em html5 seleção gustavo
 
Campus Party 2011 html 5
Campus Party 2011 html 5Campus Party 2011 html 5
Campus Party 2011 html 5
 
I.h aula 6 7 8 9 10 11 12
I.h aula 6 7 8 9 10 11 12I.h aula 6 7 8 9 10 11 12
I.h aula 6 7 8 9 10 11 12
 
HTML 5 - A mudança da Web
HTML 5 - A mudança da WebHTML 5 - A mudança da Web
HTML 5 - A mudança da Web
 
Aprender html5 em 4 passos
Aprender html5 em 4 passosAprender html5 em 4 passos
Aprender html5 em 4 passos
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 

Plus de info_cimol

Apostila Criação de Sites I
Apostila Criação de Sites IApostila Criação de Sites I
Apostila Criação de Sites Iinfo_cimol
 
Modelagem de Dados - Introdução à UML
Modelagem de Dados - Introdução à UMLModelagem de Dados - Introdução à UML
Modelagem de Dados - Introdução à UMLinfo_cimol
 
Aula III HTML - Criação de Sites I
Aula III HTML - Criação de Sites IAula III HTML - Criação de Sites I
Aula III HTML - Criação de Sites Iinfo_cimol
 
Apostila de Banco de Dados
Apostila de Banco de Dados Apostila de Banco de Dados
Apostila de Banco de Dados info_cimol
 
Aula II - Criação de sites I
Aula II - Criação de sites IAula II - Criação de sites I
Aula II - Criação de sites Iinfo_cimol
 
Aula 5 PHP - Criação de sites II
Aula 5 PHP - Criação de sites IIAula 5 PHP - Criação de sites II
Aula 5 PHP - Criação de sites IIinfo_cimol
 
aula 6 PHP - Criação de sites II
aula 6 PHP - Criação de sites IIaula 6 PHP - Criação de sites II
aula 6 PHP - Criação de sites IIinfo_cimol
 
Funções PHP - Criação de sites II
Funções PHP - Criação de sites II Funções PHP - Criação de sites II
Funções PHP - Criação de sites II info_cimol
 
Arrays PHP - Criação de sites II
Arrays PHP - Criação de sites IIArrays PHP - Criação de sites II
Arrays PHP - Criação de sites IIinfo_cimol
 
Introdução ao PHP - Criação de sites II
Introdução ao PHP - Criação de sites IIIntrodução ao PHP - Criação de sites II
Introdução ao PHP - Criação de sites IIinfo_cimol
 
Mapeamento do modelo conceitual para o lógico - Banco de Dados
Mapeamento do modelo conceitual  para o lógico - Banco de DadosMapeamento do modelo conceitual  para o lógico - Banco de Dados
Mapeamento do modelo conceitual para o lógico - Banco de Dadosinfo_cimol
 
Introdução a modelagem de dados - Banco de Dados
Introdução a modelagem de dados - Banco de DadosIntrodução a modelagem de dados - Banco de Dados
Introdução a modelagem de dados - Banco de Dadosinfo_cimol
 
Modelo Conceitual - Banco de Dados
Modelo Conceitual - Banco de DadosModelo Conceitual - Banco de Dados
Modelo Conceitual - Banco de Dadosinfo_cimol
 
Introdução a modelagem de dados parte II - Banco de Dados
Introdução a modelagem de dados parte II - Banco de DadosIntrodução a modelagem de dados parte II - Banco de Dados
Introdução a modelagem de dados parte II - Banco de Dadosinfo_cimol
 
Apostila Criação de Sites
Apostila Criação de SitesApostila Criação de Sites
Apostila Criação de Sitesinfo_cimol
 
Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQueryinfo_cimol
 
Exercitando modelagem em UML
Exercitando modelagem em UMLExercitando modelagem em UML
Exercitando modelagem em UMLinfo_cimol
 
Ebook curso linux ubuntu v-1.0
Ebook curso linux ubuntu v-1.0Ebook curso linux ubuntu v-1.0
Ebook curso linux ubuntu v-1.0info_cimol
 

Plus de info_cimol (20)

Apostila Criação de Sites I
Apostila Criação de Sites IApostila Criação de Sites I
Apostila Criação de Sites I
 
Modelagem de Dados - Introdução à UML
Modelagem de Dados - Introdução à UMLModelagem de Dados - Introdução à UML
Modelagem de Dados - Introdução à UML
 
Aula III HTML - Criação de Sites I
Aula III HTML - Criação de Sites IAula III HTML - Criação de Sites I
Aula III HTML - Criação de Sites I
 
Apostila de Banco de Dados
Apostila de Banco de Dados Apostila de Banco de Dados
Apostila de Banco de Dados
 
Aula II - Criação de sites I
Aula II - Criação de sites IAula II - Criação de sites I
Aula II - Criação de sites I
 
Aula 5 PHP - Criação de sites II
Aula 5 PHP - Criação de sites IIAula 5 PHP - Criação de sites II
Aula 5 PHP - Criação de sites II
 
aula 6 PHP - Criação de sites II
aula 6 PHP - Criação de sites IIaula 6 PHP - Criação de sites II
aula 6 PHP - Criação de sites II
 
Funções PHP - Criação de sites II
Funções PHP - Criação de sites II Funções PHP - Criação de sites II
Funções PHP - Criação de sites II
 
Arrays PHP - Criação de sites II
Arrays PHP - Criação de sites IIArrays PHP - Criação de sites II
Arrays PHP - Criação de sites II
 
Introdução ao PHP - Criação de sites II
Introdução ao PHP - Criação de sites IIIntrodução ao PHP - Criação de sites II
Introdução ao PHP - Criação de sites II
 
Mapeamento do modelo conceitual para o lógico - Banco de Dados
Mapeamento do modelo conceitual  para o lógico - Banco de DadosMapeamento do modelo conceitual  para o lógico - Banco de Dados
Mapeamento do modelo conceitual para o lógico - Banco de Dados
 
Introdução a modelagem de dados - Banco de Dados
Introdução a modelagem de dados - Banco de DadosIntrodução a modelagem de dados - Banco de Dados
Introdução a modelagem de dados - Banco de Dados
 
Modelo Conceitual - Banco de Dados
Modelo Conceitual - Banco de DadosModelo Conceitual - Banco de Dados
Modelo Conceitual - Banco de Dados
 
Introdução a modelagem de dados parte II - Banco de Dados
Introdução a modelagem de dados parte II - Banco de DadosIntrodução a modelagem de dados parte II - Banco de Dados
Introdução a modelagem de dados parte II - Banco de Dados
 
Apostila Criação de Sites
Apostila Criação de SitesApostila Criação de Sites
Apostila Criação de Sites
 
JavaScript
JavaScriptJavaScript
JavaScript
 
JQUERY
JQUERY JQUERY
JQUERY
 
Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQuery
 
Exercitando modelagem em UML
Exercitando modelagem em UMLExercitando modelagem em UML
Exercitando modelagem em UML
 
Ebook curso linux ubuntu v-1.0
Ebook curso linux ubuntu v-1.0Ebook curso linux ubuntu v-1.0
Ebook curso linux ubuntu v-1.0
 

E-Book de estudos

  • 1. E-Book de estudos sobre HTML 5 1
  • 2. 2 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida Índice: As Novidades do HTML5 3 O que é o HTML5 8 HTML 5 -Tags Continuadas xTags Descontinuadas 11 HTML5 - A tag CANVAS 15 HTML5 - As tags AUDIO eVIDEO 19 Placeholder - HTML5 24 HTML5: PlaceHolder - Como estilizar 26 Tags da HTML5 – Infográfico 27 Atributos de tratamento de eventos da HTML5 – Infográfico 28
  • 3. E-Book de estudos sobre HTML 5 3www.devmedia.com.br - Reprodução proibida As Novidades do HTML5 Autor:Raimundo Botelho Neste artigo apresento as principais novidades da nova versão da linguagem de marcação de hipertexto HTML, que já está disponível nos principais navegadores de internet com suporte quase que total. Link: http://www.devmedia.com.br/as-novidades-do-html5/23992 1. Introdução. O HiperText Markup Language ou simplesmente HTML, continua trazendo grandes contribuições para o advento da internet, pois é o tipo de conteúdo que mais trafega pela rede mundial de computadores. Apesar da enorme importância para o mundo da informação o HTML estancou na versão 4.0.1 desde 1999 e não acompanhou as dinâmicas mudanças que ocorreram nos últimos anos e para atender as necessidades careceu utilizar plugins externos como o flash player e outros. Mas felizmente, isso são coisas do passado, pois a W3C (World Wide Web Consortium) e a WHATWG (Web Hypertext Application Technology Working Group) disponibilizaram uma versão de teste que provavelmente será a nova cara do HTML. Esse artigo mostra as novas características dessa versão que, inclusive, já tem suporte para algumas funcionalidades nos mais conceituados navega- dores e brevemente será oficializado por definitivo como o HTML 5. 2. O HTML5. Surgido a partir de um consórcio entre a W3C (World Wide Web Consortium) e a WHATWG (Web Hypertext Application Technology Working Group), o HTML5 será o novo padrão para a estruturação e apresentação de conteúdo na Word Wide Web trazendo melhorias significativas com novas funcionalidades de semântica e acessibilidade, além de melhorar o suporte aos mais recentes conteúdo multimídias. As principais mudanças que a nova versão proporcionará aos usuários são: Melhor tratamento de exceção, mais tags para substituir scripts, independência de plataforma e redução da necessidade de plugins externos. 3. As novas características do HTML5. As novas característica da versão 5 estão ligadas diretamente as necessidades de suporte independente aos novos formatos de conteúdos multimídia, as novas funcionalidades de semânticas e acessibilidade. São elas: a) Inclusão do elemento canvas para desenho. O elemento canvas foi incluído para permitir desenhar gráficos em uma página web, tarefa essa que atualmente só é possível com a utilização de plugins externos.
  • 4. 4 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida O canvas é uma área retangular onde o usuário, via JavaScript, vai poder controlar todos os pixels, além de desenhar vários elementos gráficos como círculo, retângulo, elipse, linha, texto, imagens, etc. Para usar um elemento canvas no documento, além da inclusão da tag, temos que manipular o elemento via JavaScript: Inclusão da tag: 1 <canvas id=”myCanvas”width=”400”height=”400”></canvas> Manipulação do elemento com JavaScript: 1 <script type=”text/javascript”> 2 var myCanvas = document.getElementById(“myCanvas”); 3 var canvas =  myCanvas.getContext(“2d”); 4 canvas.fill#FF0000”; 5 canvas.fillRect(0,0,100,100); 6 </script> b) Inclusão dos elementos vídeo e áudio para reprodução multimídia. Outro motivo para integrar plugins externos é o uso de áudio e vídeo nas páginas web. Com a inclusão de tags específicas para este fim, a HTML5 dá suporte nativo para a reprodução de áudio e vídeo sem a necessidade de utilizar mecanismos externos. Para usar o elemento áudio ou vídeo, basta incluir a tag específica no documento. Elemento vídeo: 1 <video width=”100”height=”100”controls=”controls”> 2  <source src=”video.mp4”type=”video/mp4”/> 3  <source src=”video.ogg”type=”video/ogg”/> 4  O seu navegador não suporta o formato. 5 </video> Elemento áudio: 1 <audio controls=”controls”> 2  <source src=”audio. mp3”type=”audio/mpeg“ /> 3  <source src=”audio.ogg”type=”audio/ogg“ /> 4 O seu navegador não suporta o formato. 5 </audio>
  • 5. E-Book de estudos sobre HTML 5 5www.devmedia.com.br - Reprodução proibida c) Melhor suporte para armazenamento local. O HTML5 oferece 2 novos objetos para armazenar dados localmente: sessionStorage: Armazena dados durante uma sessão ativa. 1 <script type=”text/javascript”> 2 sessionStorage. sobreNome =”Botelho”; 3 document.write(sessionStorage. sobreNome); 4 </script> localStorage: Armazena dados sem limite de tempo. 1 <script type=”text/javascript”> 2 localStorage.sobreNome=”Botelho”; 3 document.write(localStorage. sobreNome); 4 </script> d) Inclusão de novos elementos de conteúdo específico. Muitos elementos da versão 4.0.1 foram excluídos da nova versão, uns por nunca terem sido usados, outros por estarem ob- soletos e outros por serem usados indevidamente. A nova versão trás novos elementos para proporcionar aos usuários uma melhor estrutura, desenho e conteúdo multimídia. A seguir uma relação dos novos elementos com sua descrição: Tag Descrição <article> Especifica um artigo qualquer <aside> Relaciona um conteúdo ao redor. <bdi> Para texto que não esteja diretamente vinculado ao elemento pai. <command> Um botão, radioButton ou checkBox. <details> <summary> Uma legenda ou resumo dentro do elemento detalhe. <figure> Para agrupamento de uma sessão de conteúdo stand-alone. <figcaption> Legenda para um elemento figura. <footer> Para um rodapé de um documento ou sessão. <header> Para uma introdução de um documento ou sessão. <hgroup> Para uma sessão de cabeçalhos usando h1 para h6. <mark> Para textos que são destaques. <meter> Para uma medição. Deve-se conhecer o valor máximo e mínimo. <nav> Para uma sessão de navegação. <progress> Para mostrar o progresso de uma execução. <ruby> Para anotação rubi. <rt> Para explicar uma anotação rubi. <rp> Mostra os navegadores que não suportam anotação rubi. <section> Para uma sessão de um documento como capítulos, cabeçalhos, rodapés, etc. <time> Para definir um tempo e/ou data. <wbr> Quebra de linha.
  • 6. 6 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida e) Inclusão de novos controles para formulário. Uma carência da versão 4.0.1 e a escassa quantidade de controles para formulário fazendo com que os desenvolvedores recor- ram as famosas bibliotecas JavaScript, muitas vezes incompatíveis com determinados navegadores. Na versão 5 novos controles de formulário foram incluídos para facilitar a vida dos desenvolvedores. São eles: Tag Descrição <datalist> Uma lista de opções de entrada. <keygen> Gera chaves para autenticação de usuários. <output> Para diferentes tipos de saídas, como a geradas por scripts. Um dos remanescentes da versão 4.0.1, o elemento input, ganhou novos valores para o atributo type, fazendo com que o de- senvolvedor ganhe maior controle sobre a entrada de dados pelo usuário. São os eles: Type Descrição tel A entrada é um número de telefone. search A entrada é um campo de busca. url A entrada é uma URL. email A entrada é um ou mais endereço de email. datetime A entrada é uma data e/ou hora. date A entrada é uma data month A entrada é um mês. week A entrada é um dia da semana. time A entrada é uma hora. datetime-local A entrada é uma data e hora local. number A entrada é um número. range A entrada é uma faixa de valores. color A entrada é uma cor em haxadecimal como #FF00FF. placeholder Especifica uma dica rápida que descreve o valor esperado em um campo de entrada. f) Total suporte ao CSS3. Para dar ainda mais liberdade à criatividade dos usuários o HTML5 dá total suporte a mais nova versão das famosas Cascading Style Sheets, ou simplesmente CSS. Com essa integração as páginas webs podem receber os mais variados tipos de estilos como sombra nos textos e quadros, efeitos de transição, quadro com cantos arredondados e vários recursos novos que o CSS3 oferece.
  • 7. E-Book de estudos sobre HTML 5 7www.devmedia.com.br - Reprodução proibida 4. Suporte. Apesar da versão 5 não ter sido oficializada, vários navegadores continuam adicionando os novos recursos do HTML5 nas suas recentes versões. Dentre os navegadores podemos citar: Safari, Chrome, Firefox, Opera e Internet Explorer. 5. Conclusão. Com a chegada da nova versão da linguagem de marcação HTML só temos a ganhar, pois além de contarmos com novos re- cursos que permitem uma maior estruturação dos documentos, mais funcionalidades, independência de plataforma, tratamento de exceção e suporte nativo aos recentes conteúdos multimídias, ainda podemos ficar livres dos incômodos estresses que temos ao utilizar bibliotecas e plugins externos que nem sempre funcionam como deveriam nos navegadores distintos. 6. Referência. 1. W3Schools - Tutorial de HTML5. Disponível em: http://www.w3schools.com/html5. Acessado em: 30/11/2011. 2. W3C - HTML5. Disponível em: http://www.w3.org/TR/html5. Acessado em: 30/11/2011. 3. Wikipédia - HTML5. Disponível em: http://pt.wikipedia.org/wiki/HTML5. Acessado em: 30/11/2011.
  • 8. 8 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida O que é o HTML5 Autor:Eduardo Feitosa Veja neste artigo um pouco da história do HTML, o que é o HTML5 e suas principais mudanças em relação às versões anteriores. Link: http://www.devmedia.com.br/o-que-e-o-html5/25820 Olá gente, tudo bem? Creio que a maioria de vocês já tenha ouvido sobre HTML e já saiba muito bem do que nós estamos falando. Mas, para dar uma relembrada, e até mesmo situar aqueles que estão iniciando seus estudos, vamos a algumas expli- cações rápidas. Um pouco de história Com o surgimento da web, era necessário criar uma linguagem que fosse entendida por meios de acesso diferentes. Para tanto, Tim Berners-Lee desenvolveu o HTML, com a proposta de suprir essa necessidade. Somente na década de 1990, quando o Mosaic – browser desenvolvido por Marc Andreessen – se popularizou, o HTML ganhou força e foi adotado por outros de- senvolvedores e fabricante de browsers, compartilhando as mesmas convenções. HTML é uma abreviação de Hypertext Markup Language, ou seja, Linguagem de Marcação de Hipertexto. Resumindo, o HTML é uma linguagem usada para a publicação de conteúdo (texto, imagens, vídeos, áudio etc.) na web. Para que você possa entender bem, o HTML é baseado no conceito de hipertexto, que são conjuntos de elementos ligados por conexões, que podem ser palavras, imagens, vídeos, áudio, documentos etc. que quando conectados, formam uma grande rede de informação. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados, organizando conhecimentos e guardando informações relacionadas. Entre 1993 e 1995, surgiram novas versões (HTML+, HTML 2.0, HTML 3.0) onde foram propostas diversas mudanças para enriquecer as possibilidades da linguagem, mas, ela ainda não era tratada como padrão. Apenas em 1997, o grupo de trabalho do W3C, trabalhou na versão 3.2, fazendo com que ela fosse tratada como prática comum. Resumindo, e creio que você já tenha percebido, o HTML foi criado, e melhorado, para se tornar uma linguagem independente de plataformas ou meios de acesso, diminuindo custos e fazendo com que a web não ficasse limitada a uma base proprietárias com formatos incompatíveis. Em 2004, foi fundado o WHATWG (Web Hypertext Application Technology Working Group) por desenvolvedores de em- presas como Mozilla, Apple e Opera, onde se iniciou o trabalho de escrever a nova versão do HTML, que seria chamado hoje de HTML5.
  • 9. E-Book de estudos sobre HTML 5 9www.devmedia.com.br - Reprodução proibida Afinal, o que é HTML5 e quais suas principais mudanças? O HTML5 é a nova versão do HTML4 e um dos seus principais objetivos é facilitar a manipulação dos elementos, possibili- tando o desenvolvedor modificar as características dos objetos de forma não intrusiva, fazendo com que isso fique transparente para o usuário final. Para se ter uma ideia disso, diferente das versões anteriores, o HTML5 fornece ferramentas para o CSS e o Javascript fazerem seu trabalho da melhor possível de forma que um web site ou aplicação continue leve e funcional. Algumas tags foram modificadas, outras criadas e algumas descontinuadas. As versões anteriores do HTML não eram pa- dronizadas para criação de seções comuns e específicas como rodapé, cabeçalho, slidebar, menus etc. Houve também modificações na forma em que escrevemos o código e organizamos a página. Ela passou a ser mais semântica com menos códigos, aumentando a interatividade sem a necessidade de instalação de plug-ins, que em alguns casos, causa perda de performance. É um código interpolável, ou seja, pronto para futuros dispositivos, facilitando a reutilização da informação de diversas maneiras. Mas, caso você esteja pensando “vou ter de refazer todo o meu web site”, a WHATWG tem mantido o foco na retro compati- bilidade, ou seja, você não irá precisar refazer todo o trabalho para se adequar aos novos conceitos e regras. Estrutura básica A estrutura básica do HTML5 foi mantida, sofrendo uma pequena alteração no DOCTYPE. Abaixo podemos ver no exemplo: Listagem 1: Estrutura básica 1 <!DOCTYPE HTML> 2 <html lang=”pt-br”> 3 <head> 4    <meta charset=”UTF-8”> 5    <title></title> 6 </head> 7 <body> 8 </body> 9 </html> O DOCTYPE Listagem 2: O DOCTYPE 1 <!DOCTYPE HTML> Embora o DOCTYPE não seja uma tag HTML, ela deve ser a primeira linha antes do código, pois se tratar de uma instrução que indica ao navegador ou outro meio qual a versão de marcação o código foi escrito.
  • 10. 10 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida Em versões anteriores, era necessário referenciar o DTD (Document Type Definition) diretamente no código DOCTYPE. Com o HTML5, essa referência fica por responsabilidade do próprio navegador. Elemento HTML Listagem 3: Elemento HTML 1 <html lang=”pt-br”> Agora começamos a marcação propriamente dita. Para exemplificar, pense no código HTML como uma árvore, onde existem elementos pais ou filhos, e sempre, o elemento vai estar no topo dessa árvore, sendo assim, o elemento mais importante. Creio que foi notada a presença de um atributo no elemento . O “lang” é necessário para que os user-agents saibam qual é a linguagem principal do documento.É necessário lembrar que, o atributo “lang”, não está restrito somente ao elemento , podendo ser utilizado em qualquer outro elemento indicando a linguagem do texto representado. HEAD Este é o local onde fica a “parte inteligente” do web site. No HEAD, ficam os metadados, ou seja, informações sobre a página e sobre o conteúdo publicado. Metatag Charset Listagem 4: Metatag Charset 1 <meta charset=”UTF-8”> Este item chaveia a tabela de caracteres que vai ser utilizada pelo seu sistema. Cabe aqui uma explicação importante, bastante útil aos desenvolvedores e futuros desenvolvedores. A internet, por tradição, foi desenvolvida sob princípios de que não haveria limites para acesso, sendo assim, não importa se alguém estiver aqui no Brasil ou lá na China, ela pode acessar qualquer conteúdo disponível na web. Partindo desse princípio, foi criada uma tabela que suprisse essas necessidades, que recebeu o nome de Unicode. Essa tabela comporta algo em torno de um milhão de caracteres e a maioria dos browsers a suporta plenamente. Ao invés de cada região ter a sua tabela de caracteres, é muito mais sensato ter uma tabela com o maior número de caracteres possível, e fazendo uso dela no seu sistema, você garantirá que ele será bem visualizado no Brasil, China ou em qualquer outro lugar do mundo. O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o programa, nem a língua. Aqui está só o início, um pouco para nós possamos entender o HTML5, e claro, começar a fazer uso dessa linguagem de mar- cação. Em outras oportunidades, daremos continuidade, falando mais das novidades e já desenvolvendo na prática. Com isso, finalizo este artigo e até o próximo. Um abraço!
  • 11. E-Book de estudos sobre HTML 5 11www.devmedia.com.br - Reprodução proibida HTML 5 -Tags Continuadas xTags Descontinuadas Autor:Rafael Ribeiro O HTML5 assim como qualquer outra linguagem ao ser atualizada, além de receber novo comandos, aposenta outros. Dessa forma, você pode acompanhar no artigo abaixo, as tags que permanecem em uso no HTML5 e as tags que foram descontinuadas e só servem para as versões anteriores. Link: http://www.devmedia.com.br/html-5-tags-continuadas-x-tags-descontinuadas/23618 O HTML5 assim como qualquer outra linguagem ao ser atualizada, além de receber novo comandos, aposenta outros. Dessa forma, você pode acompanhar no artigo abaixo, as tags que permanecem em uso no HTML5 e as tags que foram descontinuadas e só servem para as versões anteriores. Tags Continuadas: <!--...--> Define um comentário; <!DOCTYPE>  Define o tipo de documento; (No HTML 4 existiam três (3) diferentes tipos de doctype, mas no HTML 5 temos apenas um (1) tipo <!DOCTYPE HTML>. É aqui que o navegador entende o tipo de documento e como ele deve interpretar as tags nele contidas.) <a> Define um hyperlink; <abbr> Define uma abreviação <address> Define um endereço. (Passa a ser tratado como uma seção); <area> Define uma área dentro de um mapa de imagem; <b> Define um texto em negrito; (Possui o mesmo nível semântico que um SPAN, e também o estilo de negrito no texto. Contudo, ele não dá nenhuma importância para o texto marcado com ele.)  <base> Define uma base URL para todos os links da página; <bdo> Define a direção do texto apresentado; <blockquote> Define uma citação longa; <body> Define o corpo da página; <br> Insere uma quebra de linha simples; <button> Define um botão de comando; <caption> Define o“caption”de uma tabela;
  • 12. 12 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida <cite> Define uma citação; <code> Define o código texto do computador; <col> Define os atributos da coluna da tabela; <colgroup> Define um grupo de colunas da tabela; <dd> Define uma descrição de definição; <del> Define um texto deletado; <dfn> Define um termo de definição; <div> Define uma seção no documento; <dl> Define uma lista de definição; <dt> Define um termo de definição; <em> Define um texto em ênfase; <fieldset> Define um conjunto de campos (fieldset); <form> Define um formulário; <h1> até <h6> Define do cabeçalho 1 até o cabeçalho 6; <head> Define uma informação sobre o documento. (Não aceita mais elementos Child como filho); <hr> Define uma regra horizontal. (Tem o mesmo nível que um parágrafo, mas também é utilizado para fazer separações e quebras de linha); <html> Define um documento html; <i> Define um texto em itálico; (Possui o mesmo nível semântico que um SPAN. O texto continua sendo itálico e para usuários de leitores de tela, a voz utilizada é modificada para indicar ênfase. É de grande valor e utilidade para marcar, termos técnicos, termos em outras linguagens etc.) <iframe> Define uma linhas sobre a janela (frame); <img> Define uma imagem; <input> Define um campo de inserção; <ins> Define um texto inserido; <kbd> Define um texto do teclado; <label> Define uma“label”para o formulário; <legend> Define um título para os campos (fields); <li> Define os itens da lista; <link> Define uma referência; <map> Define uma imagem de mapa; <menu> Define uma lista de“menus”; <meta> Define informações meta; <noscript> Define uma seção noscript; <object> Define um objeto incorporado; <ol> Define uma lista ordenada; <optgroup> Define um grupo de opção;
  • 13. E-Book de estudos sobre HTML 5 13www.devmedia.com.br - Reprodução proibida <option> Define uma opção em uma lista suspensa (drop-down list); <p> Define um parágrafo; <param> Define um parâmetro para determinado objeto; <pre> Define um texto pré-formatado; <q> Define uma citação curta; <s> Define um texto que não é mais correto. <samp> Define um código de amostra; <script> Define um script; <select> Define uma lista selecionável; <small> Define um pequeno texto; <span> Define uma seção no documento; <strong> Define um texto forte (similar ao negrito); <style> Define um estilo; <sub> Define um texto subscrito; <sup> Define um texto sobrescrito; <table> Define uma tabela; <tbody> Define o corpo da tabela; <td> Define uma célula da tabela; <textarea> Define um área de texto; <tfoot> Define o rodapé da tabela; <th> Define o cabeçalho da tabela; <thead> Define o cabeçalho da tabela; <title> Define o título do documento; <tr> Define uma linha da tabela; <ul> Define uma lista desordenada; <var> Define uma variável; Tags Descontinuadas: <acronym> Define siglas em HTML 4.01. (Desenvolvedores preferem utilizar a tag <abbr>); <applet> Define um miniaplicativo incorporado. (Ficou obsoleto em função da tag <object>); <basefont> Define as propriedads da font padrão para todo o texto do documento. (Apenas efeito visual); <big> Usado para tornar o texto maior. (Apenas efeito visual); <center> Usado para alinhar texto e conteúdo no centro. (Apenas efeito visual); <dir> Define a lista do diretório. (Ficou obsoleto em função da Tag <ul>); <font> Especifica o tipo de fonte, tamanho, e cor do texto. (Apenas efeito visual);
  • 14. 14 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida <frame> Define uma janela particular dentro de um conjunto de“frames”. (Fere princípios de usabilidade e acessibilidade); <frameset> Define um conjunto de frames organizado por múltiplas janelas.(Fere princípios de usabilidade e acessibilidade); <noframes> Texto exibido para navegadores que não lidam com“frames”. (Fere princípios de usabilidade e acessibilidade); <strike> Exibe texto rasurado. (Apenas efeito visual); <tt> Define teletipo de texto. (Apenas efeito visual); <u> Define sublinhado. (Apenas efeito visual); <xmp> Define texto pré-formatado. (Ficou obsoleto em função da tag <pre>); Se analisarmos bem as definições podemos perceber que muitas tags descontinuadas tiveram esse fim por já existirem tags que realizam a mesma função. E ao utilizar o HTML 5 você perceberá que algumas tags continuadas foram modificadas e passaram a exercer outras propriedades, fazendo, também, que outras tags percam valor. Nota 1: Você pode ouvir em algum lugar sobre HTML - ArqHP (Arquitetura de Home Pages). É o próprio HTML 5 com outra denominação e isso é apenas uma jogada de marketing. Nota 2: Os HTML 1, HTML 2 , HTML 3 e o HTML 4 estão todos contidos no HTML 5 e mesmo as tags descontinuadas não trazem nenhum problema de compatibilidade com o HTML 5 e o contrário também ocorre, onde as novas tags também não trazem nenhum problema de compatibilidade com as versões antigas. Usem e abusem das tags! Um grande abraço! Rafael Marins Ribeiro - Engenheiro de Softwares
  • 15. E-Book de estudos sobre HTML 5 15www.devmedia.com.br - Reprodução proibida HTML5 - A tag CANVAS Autor:Allan Douglas Veja nesse artigo uma rápida introdução sobre a nova versão da linguagem de marcação de texto, HTML. E como principal foco deste artigo, está a nova tag CANVAS, como criá-la e desenhar nela, formar linhas e imagens. Antes de falarmos do HTML5, precisamos lembrar-nos do HTML4 que, quando foi lançado, a comunidade de desenvolvedores foi alertada de boas práticas que deveria seguir. Formatação, separação de código, acessibilidade eram algumas dessas boas práticas. Link: http://www.devmedia.com.br/html5-a-tag-canvas/25413 Atenção! Neste artigo julgo que os leitores já têm conhecimento sobre HTML, tendo em vista que não será abordada a iniciação ao mesmo. O que é HTML5? Antes de falarmos do HTML5, precisamos lembrar-nos do HTML4 que, quando foi lançado, a comunidade de desenvolve- dores foi alertada de boas práticas que deveria seguir. Formatação, separação de código, acessibilidade eram algumas dessas boas práticas. Porém essa versão ainda não trazia um grande diferencial e também não facilitava o uso de Javascript e CSS. O HTML5, logicamente, é a evolução direta do HTML4, a qual corrige bugs de sua versão anterior e principalmente traz muitas melhorias à linguagem, pois tem como um de seus objetivos facilitar a manipulação do elemento possibilitando ao desenvolvedor modificar as características do objeto de forma não intrusiva. Entre outras características, a 5ª versão do HTML vem com novas tags, como por exemplo: <video>, <audio> e <canvas>. Visto isto, podemos dar início ao principal foco deste artigo, que é entender e exemplificar a tag . A tag canvas A canvas nada mais é do que um espaço onde podemos desenhar elementos específicos, formas geométricas e imagens, por exemplo, através de script (javascript geralmente). Também podemos usar CSS para a tag . Por Javascript podemos acessar métodos da canvas que desenham formas, linhas, caracteres e adicionar imagens. Lembre-se que em uma canvas podemos apenas desenhar elementos gráficos e não elementos HTML, por exemplo, uma pode conter uma mas o contrário não é verdade. Vale resaltar que versões antigas de navegadores podem ser incompatíveis, as versões do Internet Explorer anterior ao 9, por exemplo.
  • 16. 16 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida Criar uma canvas não difere do que já conhecemos de outras tags HTML. Vejamos: Listagem 1: Criando uma canvas 1 <!DOCTYPE html> 2 <html> 3 <body> 4 <canvas id=”idCanvas”width=”200”height=”100”style=”border:1px solid #c3c3c3;”> 5 Se seu navegador não suportar HTML5 você verá esta mensagem. 6 </canvas> 7 </body> 8 </html> Na Listagem 1 criamos uma canvas com largura 200px e altura 100px e usamos CSS para decoramos a borda da mesma. Note que coloquei um texto dentro da canvas que será exibido caso você não esteja usando um navegador que tenha suporte ao HTML5, lembre-se que não podemos colocar elementos HTML dentro de canvas. Veremos no próximo tópico como desenhar dentro da canvas por Javascript. Desenhando formas e imagens na canvas Muito bem, vamos começar a desenhar agora. Nos próximos exemplos veremos como desenhar círculos, retângulos, linhas e por fim veremos como adicionar imagens. Antes de começarmos os desenhos, devemos saber que uma canvas é composta por pixels como em um plano cartesiano que começam em x = 0 e y =0 no canto superior esquerdo onde x é crescente para a direita e y é crescente para baixo. Figura 1: Modelo de uma canvas
  • 17. E-Book de estudos sobre HTML 5 17www.devmedia.com.br - Reprodução proibida Outra coisa que devemos saber é que sempre antes de desenhar, devemos selecionar a canvas e capturar o contexto gráfico da mesma, pelo metodo getContext(), da seguinte forma: Listagem 2:  Selecionando a canvas e capturando o contexto gráfico 1 <script type=”text/javascript”> 2 var c=document.getElementById(“idCanvas”); 3 var ctx=c.getContext(“2d”); 4 </script> Para desenhar qualquer coisa na canvas, sempre devemos ter o contexto dela acessível, por isso armazenamos ele em uma variável. Desenhando Linha Para desenharmos uma linha, precisamos usar no mínimo três métodos, são eles: moveTo(x,y), lineTo(x,y) e stroke(). O primeiro define o ponto inicial da linha, já o segundo é o próximo ponto, o último, por sua vez, desenha a linha. Vejamos um exemplo na Listagem 3. Listagem 3:  Criando um linha 1 <script type=”text/javascript”> 2 var c=document.getElementById(“idCanvas”); 3 var ctx=c.getContext(“2d”); 4 ctx.moveTo(10,10);//ponto inicial 5 ctx.lineTo(150,50);//próximo ponto 6 ctx.stroke();//desenha 7 </script> Desenhando um circulo Aqui vamos precisar basicamente de dois métodos: arc(x,uy,r,aInicial,aFinal) que recebe as coordenadas onde será colocado o centro do circulo, o raio e os ângulos em relação aos quadrantes do círculo, e o já conhecido stroke(). Vejamos na prática: Listagem 4: Desenhando o circulo 1 <script type=”text/javascript”> 2 var c=document.getElementById(“idCanvas”); 3 var ctx=c.getContext(“2d”); 4 ctx.arc(70,18,15,0,Math.PI * 2); 5 ctx.stroke(); 6 </script>
  • 18. 18 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida Note que estamos usando Math.PI * 2 onde deveríamos passar o ângulo final, isso nada mais é que uma forma de desenhar um circulo completo. Você pode experimentar mudar esses valores e ver como fica. Desenhando um Retângulo No desenho do retângulo, apenas mais um método que não conhecemos é apresentado: rect (x,y,largura,altura). Em sguida usamos novamente o stroke(). Listagem 5: Desenhando um retângulo 1 <script type=”text/javascript”> 2 var c=document.getElementById(“idCanvas”); 3 var ctx=c.getContext(“2d”); 4 ctx.rect(20,20,150,50); 5 ctx.stroke(); 6 </script> Adicionando imagens Para imagens o processo é um pouco diferente do que vimos até agora, mas é tão simples quanto. Precisaremos instanciar um objeto do tipo Image e adicionar ao método onload dela uma função que chama o método drawImage(Image,x,y) e, finalmente, dizer para o objeto do tipo Image qual a url da imagem. Vejam os passos na Listagem 6: Listagem 6: Desenhando uma image 1 <script type=”text/javascript”> 2 var c=document.getElementById(“idCanvas”); 3 var ctx=c.getContext(“2d”); 4 var img=new Image(); 5 img.onload = function(){ 6 ctx.drawImage(img,0,0); 7 }; 8 img.src=”img.png”; 9 </script> Bem, galera, fico por aqui. Espero que tenham gostado, e se quiserem saber mais sobre os métodos da canvas, visitem esse link http://www.w3schools.com/html5/html5_ref_canvas.asp. Obrigado, deixem seus comentários e até a próxima.
  • 19. E-Book de estudos sobre HTML 5 19www.devmedia.com.br - Reprodução proibida HTML5 - As tags AUDIO eVIDEO Autor:Allan Douglas Veja nesse artigo uma introdução as tags de mídia do HTML5 que vieram para acabar com a dependência de plugins para a reprodução de áudio e vídeo nos navegadores, veja como criar um player de áudio e vídeo e também como manipulá-los via Javascript. Link: http://www.devmedia.com.br/html5-as-tags-audio-e-video/26018 Com a chegada do HTML5 temos muitas novidades, umas conceituais outras mais visíveis, entre estas podemos destacar a criação de três novas tags, <vídeo>,<áudio> e <canvas>. As duas primeiras serão abordadas aqui nesse artigo, enquanto sobre a <canvas> já foi escrito um artigo que você pode conferir aqui nesse link: http://www.devmedia.com.br/html5-a-tag- canvas/25413. Para quem ainda não sabe, as tag’s <audio> e <vídeo> são tag’s de media que foram criadas, entre outros motivos, para acabar com a dependência de plugin’s para a reprodução de áudio e vídeo nas páginas. Dessa forma em sites que precisaríamos ter instalado o Flash, por exemplo o Youtube, não iremos mais, basta que sejam implementadas essas novas tag’s e que tenhamos um navegador compatível com HTML5, o que não é incomum hoje em dia tendo em vista que todos os navegadores mais recente são. O IE8 foge dessa lista apenas o IE9 suporta o HTML5. Como já sabemos, a simplicidade é uma das características do HTML5, para estas tag’s isso não é diferente, pois agora passa- remos a manipular áudio e vídeo praticamente como manipulamos a inserção de imagens. Sabendo disso vejamos a seguir algumas características e demonstrações de ambas, de maneira a abordar o básico porém funcional. Vamos começar com a tag <audio>. A tag <áudio> Como o nome já sugere esta tag serve para reproduzirmos uma mídia de áudio, vejamos: Listagem 1: Demonstração básica do uso da tag <audio> 1 <!DOCTYPE HTML> 2 <head> 3 <meta content=”text/html; charset=utf-8”http-equiv=”Content-Type”> 4 <title>HTML5 Audio</title> 5 6 </head>
  • 20. 20 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida 7 <body> 8 <audio autoplay=”autoplay”controls=”controls”> 9 <source src=”sua_musica.mp3”type=”audio/mp3”/> seu navegador não suporta HTML5 10 </audio> 11 </body> 12 </html> Na Listagem 1 temos um exemplo básico do uso da tag <audio>, nela estamos setando autoplay e controls, que servem para tocar automaticamente e habilitar os controles do player, respequitivamente. Será reproduzida a mídia sua_musica.mp3 definina na tag <source> dentro da tag <audio> pela propriedade “src”. Veja a Imagem 1 como ficaria no navegador: Figura 1: Player criado pela tag <audio> Caso seu navegador não suporte o HTML5 você verá o seguinte: “seu navegador não suporta HTML5” Como é por natureza um componente HTML e não um plugin, podemos fazer alguma modificações no player via CSS, como por exemplo, cor, tamanho, float e position. Pode ser feita também a customização por outros elementos HTML e por meio de Javascript podemos controlar propriedades como o PLAY, PAUSE, VOLUME e por CSS criamos nosso próprio player. Listagem 2: Controle da tag áudio por Javascript 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta content=”text/html; charset=utf-8”http-equiv=”Content-Type”> 5 <title>HTML5 Audio</title> 6 </head> 7  8 <body> 9 <audio autoplay=”autoplay”controls=”controls”> 10    <source src=”sua_musica.mp3”type=”audio/mp3”/>     seu navegador não suporta HTML5
  • 21. E-Book de estudos sobre HTML 5 21www.devmedia.com.br - Reprodução proibida 11 </audio> 12 </body> 13  14 </html> O código acima resultaria mais ou menos como na Figura 2: Figura 2: Controlando o áudio por Javascript Este é apenas um exemplo básico, mas com um pouco conhecimento em javascript e CSS pode-se fazer um player muito bom. Dessa forma podemos desabilitar o atributo “controls”, para que tenhamos o controle apenas pelo nosso proprío player. Os atributos da tag <audio>: Atributo Valor Descrição autoplay autoplay Define que o audio começará a ser tocado assim que ele estiver pronto. controls controls Os controles serão mostrados. loop loop Define que o audio começará a ser tocado novamente quando terminar. preload preload Define que o audio será carregado enquanto a página é lida. Esse atributo é ignorado caso o atributo autoplay estiver definido. src url URL do arquivo a ser tocado. Formatos de áudio suportados: Formato IE 8+ Firefox 3.5+ Opera 10.5+ Chrome 3.0+ Safari 3.0+ Ogg Vorbis Não Sim Sim Sim Não MP3 Não Não Não Sim Sim Wav Não Sim Sim Não Sim
  • 22. 22 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida Agora veremos a TAG <video>. TAG <video> Aqui seguimos o mesmo conceito da <audio>, inclusive sua sintaxe é muito parecida. Vejamos o exemplo da Listagem 3. Listagem 3: A tag <video> 1 <!DOCTYPE HTML> 2 <head> 3 <meta content=”text/html; charset=utf-8”http-equiv=”Content-Type”> 4 <title>HTML5 Vídeo</title> 5 </head> 6 <body> 7 <video width=”320”height=”240”controls=”controls”> 8    <source src=”filme.mp4”type=”video/mp4”> 9    <source src=”filme.ogg”type=”video/ogg”> 10    Seu navegador não suporta HTML5. 11 </video> 12 </body> 13 </html> Vejam que praticamente não há nada diferente do que já vimos, exceto as propriedades width e height que não tínhamos de- finido na tag <audio>. Mas para o video é uma boa prática e extremamente importante, pois se não especificarmos o tamanho que a tag deve ocupar, o navegador pode se perder e causar um desastre no restante do layout. Os formatos de vídeos suportados atualmente são: Navegador MP4 WebM Ogg Internet Explorer 9 SIM NÃO NÃO Firefox 4.0 NÃO SIM SIM Google Chrome 6 SIM SIM SIM Apple Safari 5 SIM NÃO NÃO Opera 10.6 NÃO SIM SIM Da mesma forma como na tag <audio>, a tag <video> também pode ser manipulada por Javascript.
  • 23. E-Book de estudos sobre HTML 5 23www.devmedia.com.br - Reprodução proibida Na Listagem 4 pode ser observado o trecho de código Javascript escrito para controlar um vídeo. Listagem 4: Controlando o vídeo por Javascript 1 <script> 2 function playPause(){ 3 if (video.paused) 4  video.play(); 5 else 6  video.pause(); 7 } 8  9 function grande(){ 10 /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */ 11 video.width=560; 12 } 13  14 function pequeno(){ 15 /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */ 16 video.width=320; 17 } 18  19 function normal(){ 20 /*altera a largura da tag, automaticamente a altura é alterada porporcionalmente */ 21 video.width=420; 22 } 23 </script> Bem pessoal fico por aqui, espero que tenham gostado e principalmente ficado curiosos para saber mais desse assunto, dessa independência de plugins. Fiquem a vontade para deixar seus comentário e críticas e até a próxima.
  • 24. 24 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida Placeholder - HTML5 Autor:Erackson Queiroz De Brito Veja nesse artigo o funcionamento do atributo PLACEHOLDER implementado em algumas TAGs no HTML5, uma forma de detecção de suporte do navegador e um exemplo de código caso o navegador não dê suporte. Link: http://www.devmedia.com.br/placeholder-html5/24503 Veja nesse artigo o funcionamento do atributo PLACEHOLDER implementado em algumas TAGs no HTML5, uma forma de detecção de suporte do navegador e um exemplo de código caso o navegador não dê suporte. Quem nunca precisou colocar um valor padrão dentro do input e teve que fazer uma gambiarra, digo, adaptação técnica do tipo: Listagem 1: Exemplo de gambiarra antes do HTML5 1 <input type=”text”name=”nome”value=”Seu Nome” 2 onfocus=”javascript:(this.value==’Seu Nome’?this.value =‘’:null);” 3 onblur=”javascript:(this.value==’’?this.value =‘Seu Nome’:null);”/> O Placeholder resolve esse problema inserindo, dentro do input, um texto que será apagado quando começar a digitar dentro do campo, e mostrado de novo ao perder o focus do elemento e o conteúdo seja vazio. Listagem 2: Exemplo de uso do placeholder aplicado em input. 1 <input type=”text”name=”nome”value=””placeholder=”Seu Nome”/> No exemplo acima o texto “Seu Nome” irá aparecer dentro do input enquanto o conteúdo do mesmo for vazio. Esse novo atributo também pode ser usado em textareas. Listagem 3: Exemplo de uso do placeholder aplicado em textarea. 1 <textarea name=”mensagem”value=””placeholder=”Digite uma mensagem...”/> No exemplo acima o texto “ Digite uma mensagem...” irá aparecer dentro do textarea enquanto o conteúdo do mesmo for vazio.
  • 25. E-Book de estudos sobre HTML 5 25www.devmedia.com.br - Reprodução proibida Listagem 4: Como verificar se o navegador tem suporte ao placeholder? 1 function suportaPlaceholder() { 2    var elemento = document.createElement(‘input’); 3    return (‘placeholder’in elemento); 4 } Caso o navegador não dê suporte pode ser usado o código a seguir: Listagem 5: Exemplo placeholder para navegadores sem suporte. Usando a biblioteca jQuery. 1 $(function(){  2 $(‘[placeholder]’).focus(function(e) { 3    var elemento = $(e.target); 4    if (elemento.val() == elemento.attr(‘placeholder’)) { 5        elemento.val(‘’); 6    } 7  }).blur(function(e) { 8    var elemento = $(e.target); 9    if (elemento.val() ==‘’|| elemento.val() == elemento.attr(‘placeholder’)) { 10        elemento.val(elemento.attr(‘placeholder’)); 11    } 12  }).trigger(‘blur’); 13 }); Para evitar que os valores padrões sejam enviados para o formulário, no exemplo acima, pode ser usado o script a seguir: Listagem 6: Código que limpa os valores dos elementos que tem o placeholder antes de enviar o formulário 1 $(function(){ 2    $(‘[placeholder]’).parents(‘form’).bind(‘submit’, function(e) { 3        var $form = $(e.target); 4        if(!!$form.data(‘binded’) == false){ 5            $(e.target).find(‘[placeholder]’).each(function(i,el) { 6                if (el.val() == el.attr(‘placeholder’)) { 7                    el.val(‘’); 8                } 9            }); 10            $form.data(‘binded’,true); 11        } 12    }); 13 }); É isso galera. Espero que tenham gostado. Até o próximo artigo.
  • 26. 26 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida HTML5:PlaceHolder - Como estilizar Autor:Erackson Queiroz De Brito Veja nesse artigo como usar CSS para estilizar o texto do placeholder do HTML 5. Link: http://www.devmedia.com.br/html5-placeholder-como-estilizar/24589 Veja nesse artigo como usar CSS para estilizar o texto do placeholder do HTML 5. No artigo anterior aprendemos e vimos como é simples usar o atributo placerholder das TAGs input e textarea: Placeholder em HTML 5. Nesse você vai ver que estilizar é mais simples ainda. Listagem 1: Exemplo de CSS para estilizar o placeholder. 1 ::-webkit-input-placeholder  { color:#4C4; } 2 input:-moz-placeholder { color:#4C4; } 3 textarea:-moz-placeholder { color:#4C4; }​ Listagem 2: O HTML. 1 <input type=”text”name=”nome”placeholder=”Nome”/><br /> 2 <textarea name=”mensagem”placeholder=”Mensagem”></textarea> Veja o código acima funcionando em http://jsfiddle.net/erackson/9kaHw/1/ Caso queira fazer um estilo para apenas um campo você pode fazer da seguinte forma: Listagem 3: Exemplo de CSS para estilizar o placeholder de apenas um campo. 1 #email::-webkit-input-placeholder{ 2    color:#C4C; 3    background-color: #4C4; 4    text-transform: uppercase; 5    font-style: bold; 6 } 7 #email::-moz-placeholder { 8     color:#C4C; 9    background-color: #4C4; 10    text-transform: uppercase; 11    font-style: bold; 12 }​ Veja o código acima funcionando em http://jsfiddle.net/erackson/9kaHw/2/
  • 27. E-Book de estudos sobre HTML 5 27www.devmedia.com.br - Reprodução proibida Tags da HTML5 – Infográfico Autor:Joel Rodrigues Veja neste infográfico uma tabela com todas as tags atualmente suportadas pela HTML5, para ser usada como referência por todos que utilizam essa linguagem. Várias tags novas foram inseridas e algumas antigas foram descontinuadas, nesta tabela elas são apresentadas separadamente, facilitando a compreensão das modificações sofridas pela linguagem. Link: http://www.devmedia.com.br/tags-da-html5-infografico/25831 Na imagem abaixo estão dispostas todas as tags atualmente suportadas pela versão 5 da linguagem HTML. São indicadas as novas tags, as que foram descontinuadas e aquelas que permanecem desde a versão anterior. (clique no link para ampliar: http://www.devmedia.com.br/artigos/Joel_Rodrigues/infografico-TagsHTML5.jpg)
  • 28. 28 E-Book de estudos sobre HTML 5 www.devmedia.com.br - Reprodução proibida Atributos de tratamento de eventos da HTML5 – Infográfico Autor:Joel Rodrigues Veja neste infográfico uma tabela com os atributos de tratamento de eventos atualmente suportados pela HTML5, para ser usada como referência por todos que utilizam essa linguagem. Link: http://www.devmedia.com.br/atributos-de-tratamento-de-eventos-da-html5-infografico/25841 Na imagem abaixo é apresentada uma tabela onde estão dispostos os atributos de tratamento de eventos (event handlers) da linguagem HTML em sua versão 5. Alguns novos eventos foram adicionados, principalmente relacionados a elementos de mídia (áudio e vídeo), enquanto outros apenas foram mantidos desde a versão 4 ou descontinuados. Esta tabela pode ser usada como referência rápida para aqueles que utilizam HTML 5 no desenvolvimento de aplicações. (clique no link para ampliar: http://www.devmedia.com.br/artigos/Joel_Rodrigues/infografico-EventosHTML5.jpg)