e-book sobre html 5 (devmedia)

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 x Tags Descontinuadas 11

HTML5 - A tag CANVAS 15

HTML5 - As tags AUDIO e VIDEO 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 3 www.devmedia.com.br - Reprodução proibida

As Novidades do HTML5Autor: 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.


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>


c) Melhor suporte para armazenamento local.

O HTML5 oferece 2 novos objetos para armazenar dados localmente:

sessionStorage: Armazena dados durante uma sessão ativa.


2 sessionStorage. sobreNome =”Botelho”;

3 document.write(sessionStorage. sobreNome);

4 </script>

localStorage: Armazena dados sem limite de tempo.


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.


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.


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.


O que é o HTML5Autor: 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óriaCom 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.


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ásicaA 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.


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.

HEADEste é 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!

HTML 5 - Tags Continuadas x Tags 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;


<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;


<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);


<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


HTML5 - A tag CANVASAutor: 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 canvasA 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.


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 canvasMuito 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


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


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




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




4 ctx.arc(70,18,15,0,Math.PI * 2);

5 ctx.stroke();

6 </script>


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




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




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.


HTML5 - As tags AUDIO e VIDEOAutor: 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>


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>


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


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 preloadDefine 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


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>


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.


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(){


16 video.width=320;

17 }

18

19 function normal(){


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.


Placeholder - HTML5Autor: 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.


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.


HTML5: PlaceHolder - Como estilizarAutor: 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/


Tags da HTML5 – InfográficoAutor: 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)


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