Continuação tutorial html5

Tipos de dados e validadores

Formulários vitaminados

Conforme você deve ter percebido no último capítulo, o HTML5 avançou bastante nos recursos de formulários, facilitando muito a vida de quem precisa desenvolver aplicações web baseadas em formulários. Neste capítulo vamos avançar um pouco mais nesse assunto e, você vai ver, a coisa vai ficar ainda melhor.

autofocus

Ao incluir em um campo de formulário o atributo autofocus, assim:

name="login" autofocus >

O foco será colocado neste campo automaticamente ao carregar a página. Diferente das soluções em Javascript, o foco estará no campo tão logo ele seja criado, e não apenas ao final do carregamento da página. Isso evita o problema, muito comum quando você muda o foco com Javascript, de o usuário já estar em outro campo, digitando, quando o foco é mudado.

Placeholder text

Você já deve ter visto um “placeholder”. Tradicionalmente, vínhamos fazendo isso:

 1 <!--DOCTYPE html>
 2 lang="en-US">
 3 <head>
 4 charset="UTF-8" />
 5 Placeholder, <span class="hiddenSpellError" pre="Placeholder ">the</span> old style
 6 </head>
 7 
 8 <body>
 9 name="q" value="Search here" 
 10 onfocus="if(this.value=='Search here')this.value=''">
 11 </body>
 12 
 13 </html>

HTML5 nos permite fazer isso de maneira muito mais elegante:

 1 <!--DOCTYPE html>
 2 lang="en-US">
 3 <head>
 4 charset="UTF-8" />
 5 <title>Placeholder, HTML5 way</title>
 6 </head>
 7 
 8 <body>
 9 name="q" placeholder="Search here">
 10 </body>
 11 
 12 </html>

required

Para tornar um campo de formulário obrigatório (seu valor precisa ser preenchido) basta, em HTML5, incluir o atributo required:

name="login" required>

maxlength

Você já conhecia o atributo maxlength, que limita a quantidade de caracteres em um campo de formulário. Uma grande lacuna dos formulário HTML foi corrigida. Em HTML5, o elemento textarea também pode ter maxlength!

Validação de formulários

Uma das tarefas mais enfadonhas de se fazer em Javascript é validar formulários. Infelizmente, é também uma das mais comuns. HTML5 facilita muito nossa vida ao validar formulários, tornando automática boa parte do processo. Em muitos casos, todo ele. Você já viu que pode tornar seus campos “espertos” com os novos valores para o atributo type, que já incluem validação para datas, emails, URLs e números. Vamos um pouco além.

pattern

O atributo pattern nos permite definir expressões regulares de validação, sem Javascript. Veja um exemplo de como validar CEP:

 1 <!--DOCTYPE html>
 2 lang="pt-BR">
 3 <head>
 4 charset="UTF-8" />
 5 <title>O atributo pattern</title>
 6 </head>
 7 
 8 <body>
 9 
 10 <form>
 11 <label for="CEP">CEP: 
 12 name="CEP" id="CEP" required pattern="\d{5}-?\d{3}" />
 13 </label>
 14 type="submit" value="Enviar" />
 15 </form>
 16 
 17 </body>
 18 
 19 </html>
 20 

novalidate e formnovalidate

Podem haver situações em que você precisa que um formulário não seja validado. Nestes casos, basta incluir no elemento form o atributo novalidate.

Outra situação comum é querer que o formulário não seja validade dependendo da ação de submit. Nesse caso, você pode usar no botão de submit o atributo formnovalidate. Veja um exemplo:

 1 <!--DOCTYPE html>
 2 lang="pt-BR">
 3 <head>
 4 charset="UTF-8" />
 5 <title>Salvando rascunho</title>
 6 <style>
 7   label{display:block;}
 8 </style>
 9 </head>
 10 
 11 <body>
 12 
 13 <form>
 14 nome: name="nome" required>
 15 email: name="email" type="email" required>
 16 mensagem: name</span>="mensagem" required>
 17 type="submit" name="action" value="Salvar rascunho" formnovalidate>
 18 type="submit" name="action" value="Enviar">
 19 </form>
 20 
 21 </body>
 22 
 23 </html>
 24 

Custom validators

É claro que as validações padrão, embora atendam a maioria dos casos, não são suficientes para todas as situações. Muitas vezes você vai querer escrever sua própria função de validação Javascript. Há alguns detalhes na especificação do HTML5 que vão ajudá-lo com isso:

  1. O novo evento oninput é disparado quando algo é modificado no valor de um campo de formulário. Diferente de onchange, que é disparado ao final da edição, oninput é disparado ao editar. É diferente também de onkeyup e onkeypress, porque vai capturar qualquer modificação no valor do campo, feita com mouse, teclado ou outra interface qualquer.
  2. O método setCustomValidity pode ser invocado por você. Ele recebe uma string. Se a string for vazia, o campo será marcado como válido. Caso contrário, será marcado como inválido.

Com isso, você pode inserir suas validações no campo de formulário e deixar o navegador fazer o resto. Não é mais preciso capturar o evento submit e tratá-lo. Veja, por exemplo, este formulário com validação de CPF:

 1 <!--DOCTYPE html>
 2 lang="pt-BR">
 3 <head>
 4 charset="UTF-8" />
 5 <title>Custom validator</title>
 6 <!-- O arquivo cpf.js contém a função validaCPF, que
 7 recebe uma string e retorna true ou false. -->
8// <![CDATA[
src="cpf.js">
// ]]>
 9 <script>
 10 function vCPF(i){
 11   i.setCustomValidity(validaCPF(i.value)?'':'CPF inválido!')
 12 }
 13 </script>
 14 </head>
 15 
 16 <body>
 17 <form>
 18 CPF: name="cpf" oninput="vCPF(this)" />
 19 type="submit" value="Enviar" />
 20 </form>
 21 </body>
 22 
 23 </html>
 24 

Detalhes e conteúdo editável.

Ainda mais formulários

Vejamos mais duas coisas que você certamente já fez mais de uma vez e foram simplificadas pelo HTML5.

Detalhes e sumário

Veja um exemplo de uso dos novos elementos details e summary:

<details>
 Copiando max="39248" value="14718"> 37,5%
 <dl>
 <dt>Tamanho total:</dt>
 <dd>39.248KB</dd>
 <dt>Transferido:</dt>
 <dd>14.718</dd>
 <dt>Taxa de transferência:</dt>
 <dd>127KB/s</dd>
 <dt>Nome do arquivo:</dt>
 <dd>HTML5.mp4</dd>
 </dl>
</details>

Veja como um agente de usuário poderia renderizar isso:

image

E ao clicar:

image

Conteúdo editável

Para tornar um elemento do HTML editável, basta incluir nele o atributo contenteditable, assim:

contenteditable=”true”>

 Edite-me...
</div>

Você pode ler e manipular os elementos editáveis normalmente usando os métodos do DOM. Isso permite, com facilidade, construir uma área de edição de HTML.

Drag-n-drop e correção ortográfica

Drag and Drop

A API de Drag and Drop é relativamente simples. Basicamente, inserir o atributo draggable="true" num elemento o torna arrastável. E há uma série de eventos que você pode tratar. Os eventos do objeto sendo arrastado são:

dragstart
O objeto começou a ser arrastado. O evento que a função recebe tem um atributo target, que contém o objeto sendo arrastado.
drag
O objeto está sendo arrastado
dragend
A ação de arrastar terminou

O objeto sobre o qual outro é arrastado sofre os seguintes eventos:

dragenter
O objeto sendo arrastado entrou no objeto target
dragleave
O objeto sendo arrastado deixou o objeto target
dragover
O objeto sendo arrastado se move sobre o objeto target
drop
O objeto sendo arrastado foi solto sobre o objeto target

Detalhes importantes:

A ação padrão do evento dragover é cancelar a ação de dragging atual. Assim, nos objetos que devem receber drop, é preciso setar uma ação de dragover com, no mínimo, return false.

Seleções de texto são automaticamente arrastáveis, não precisam do atributo draggable. E se você quiser criar uma área para onde seleções de texto possam ser arrastadas, basta tratar esses mesmos eventos.

Por fim, todas funções de tratamento de evento de drag recebem um objeto de evento que contém uma propriedade dataTransfer, um dataset comum a todos os eventos durante essa operação de drag.

 1 <!--DOCTYPE HTML>
 2 <html>
 3 <head>
 4 content="text/html; charset=UTF-8" http-equiv="content-type"/>
 5 HTML5 Drag <span class="hiddenSpellError" pre="Drag ">and</span> drop demonstration
6
 7 #boxA, #boxB { 
 8   float:left; width:100px; height:200px; padding:10px; margin:10px;
 9 font-size:70%; }
 10 #boxA { background-color: blue; }
 11 #boxB { background-color: green; }
 12 
 13 #drag, #drag2 {
 14   width:50px; padding:5px; margin:5px; border:3px black solid; 
 15 line-height:50px; }
 16 #drag { background-color: red;}
 17 #drag2 { background-color: orange;}
 18 </style>
19// <![CDATA[
type="text/javascript">
// ]]>
 20 
 21 // Quando o usuário inicia um drag, guardamos no dataset do evento 
 22 // o id do objeto sendo arrastado
 23 function dragStart(ev) {
 24     ev.dataTransfer.setData("ID", ev.target.getAttribute('id'));
 25 }
 26 
 27 // Quando o usuário arrasta sobre um dos painéis, retornamos
 28 // false para que o evento não se propague para o navegador, o
 29 // que faria com que o conteúdo fosse selecionado.
 30 function dragOver(ev) { return false; }
 31 
 32 // Quando soltamos o elemento sobre um painel, movemos o
 33 // elemento, lendo seu id do dataset do evento
 34 function dragDrop(ev) {
 35     var idelt = ev.dataTransfer.getData("ID");
 36     ev.target.appendChild(document.getElementById(idelt));
 37 }
 38 
 39 </script>
 40 </head>
 41 <body>
 42 <!-- Painel 1 -->
43
id=”boxA”

 44 ondrop="return dragDrop(event)"
 45 ondragover="return dragOver(event)">
 46 <!-- Draggable 1 -->
47
id=”drag” draggable=”true”

 48 ondragstart="return dragStart(event)">drag me
 49 <!-- Draggable 2 -->
50
id=”drag2″ draggable=”true”

 51 ondragstart="return dragStart(event)">drag me
 52 </div>
 53 
 54 <!-- Painel 2 -->
55
id=”boxB”

 56 ondrop="return dragDrop(event)"
 57 ondragover="return dragOver(event)">
 58 </div>
 59 
 60 </body>
 61 </html>

Exemplo

Segue um exemplo de drag-and-drop, baseado no excelente exemplo de Laurent Jouanneau (http://ljouanneau.com/lab/html5/demodragdrop.html).

Revisão ortográfica e gramatical

Os agentes de usuário podem oferecer recursos de revisão ortográfica e gramatical, dependendo do que houver disponível em cada plataforma. Os desenvolvedores podem controlar o comportamento dessa ferramenta através do atributo spellcheck. Inserir spellcheck="true" num elemento faz com que a revisão esteja habilitada para ele. Você também pode desabilitar a revisão para determinado elemento, inserindo spellcheck="false".

Elementos audio e video, e codecs

Áudio

Para inserir áudio em uma página web, basta usar o elemento audio:

src="mus.oga" controls="true" autoplay="true" />

O valor de controls define se um controle de áudio, com botões de play, pause, volume, barra de progresso, contador de tempo, etc. será exibido na tela. Se for setado como “false”, será preciso controlar o player via javascript, com métodos como play() e pause(). O valor de autoplay define se o áudio vai começar a tocar assim que a página carregar.

Origens alternativas de áudio

Todo agente de usuário deveria suportar o codec livre OggVorbis, mas, infelizmente, pode acontecer de seu arquivo oga não tocar no computador ou celular de alguém. Quem sabe do seu chefe ou seu cliente. Então é preciso saber como oferecer um formato alternativo de áudio. Fazemos assim:

controls="true" autoplay="true">
 src="mus.oga" />
 src="mus.mp3" />
 src="mus.wma" />
</audio>

Claro, o agente de usuário pode ainda não saber tocar nenhum desses formatos, ou sequer ter suporte a áudio. Para esses casos, ofereça um conteúdo alternativo:

controls="true" autoplay="true">
 src="mus.oga" />
 src="mus.mp3" />
 src="mus.wma" />

Faça o href=”mus.mp3″>download da música.


</audio>

Vídeo

O uso de vídeo é muito semelhante ao de áudio:

<video src="u.ogv" width="400" height="300" />

E com vários elementos source:

controls="true" autoplay="true" width="400" height="300">
 src="u.ogv" />
 src="u.mp4" />
 src="u.wmv" />

Faça o href=”u.mp4″>download do vídeo.


</video>

Codecs

O que funciona na web

Mark Pilgrim está escrevendo um livro muito interessante (em inglês) chamado “Dive Into HTML 5“. O capítulo sobre Vídeo é a referência de que você precisa para publicar vídeo na web com HTML5.

É muito importante que você inclua, nos seus elementos source de áudio e vídeo, informação a respeito do container e codecs utilizados. Isso vai evitar que o navegador tenha que baixar, pelo menos parcialmente, o arquivo de mídia para, depois, descobrir que não consegue tocá-lo. É importante lembrar que a extensão do arquivo não é informação relevante para isso, pelo contrário, não significa nada. Uma URL pode não ter extensão de arquivo e pode levar a um redirecionamento.

Para indicar ao navegador o container e codecs de determinado arquivo, usa-se o atributo type, no formato:

type='MIME-type do container; codecs="codec de vídeo, codec de áudio"'

Por exemplo, um vídeo em Ogg, usando os codecs Theora e Vorbis, terá seu source assim:

src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>

Com MPEG-4 a coisa é um pouco mais complicada, por que é preciso indicar ao navegador também o profile do codec de vídeo utilizado. Veja um exemplo:

src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>

Elemento device e Stream API

O elemento device

Working Draft

O conteúdo desse capítulo está baseado numa especificação que ainda está em status de “Working Draft”. Ou seja, as coisas ainda podem mudar bastante. Fique de olho no que vai acontecer com o elemento device e a Stream API, acessando (em inglês):

http://dev.w3.org/html5/html-device/

Você pode inserir em seu HTML um elemento de acesso à webcam do usuário, assim:

type="media">

Isso vai exibir uma interface solicitando ao usuário acesso a sua webcam. Se ele tiver mais de uma, também será permitido que ele escolha que webcam usar. O atributo media também pode conter o valor “fs”, que vai abrir uma caixa de seleção no sistema de arquivos, permitindo ao usuário escolher um arquivo para fazer stream.

O passo seguinte é conectar o stream desse seu elemento device a alguma coisa. Veja, por exemplo, como conectá-lo a um elemento video na própria página, fazendo com que o usuário possa ver a imagem de sua própria webcam:

 1 <!--DOCTYPE html>
 2 lang="en-US">
 3 <head>
 4 charset="UTF-8" />
 5 Videochat, <span class="hiddenSpellError" pre="Videochat ">step</span> 1
 6 
 7 <script>
 8 function update(stream) {
 9   document.getElementsByTagName('video')[0].src = stream.url;
 10 }
 11 </script>
 12 
 13 </head>
 14 
 15 <body>
 16 
17

To start chatting, select a video camera:


 18 onchange="update(this.data)"></p>
 19 autoplay /> 
 20 </body>
 21 
 22 </html>
 23 

Streams

Você deve ter notado, no script acima, que a função de update recebe um parâmetro stream. Trata-se de um objeto da classe Stream, que possui uma propriedade url, que já usamos acima, e um método record. O método record inicia a gravação do stream e retorna um objeto StreamRecorder. Esse último possui um método stop, que retorna o arquivo que foi gravado.

Peer-to-peer

Cuidado! O W3C ainda está trabalhando nessa especificação, e tudo aqui pode mudar. Por isso, não se preocupe em entender as minúcias. Saiba apenas que HTML5 prevê que os agentes de usuário tenham uma interface de comuicação P2P, que permite a troca de texto, imagem, vídeo e arquivos. Por enquanto, a especificação deste item esté sendo escrita junto da do elemento device, mas isso deve ganhar uma página própria em breve. Fique de olho.

MathML e SVG

MathML

O HTML5 incorpora o padrão MathML. Trata-se de uma linguagem de marcação, baseada em XML, para representação de fórmulas matemáticas. Você pode ler mais sobre MathML em http://www.w3.org/Math/. Para incorporar código MathML em seu documento HTML5, não preciso fazer declarações especiais. Basta escrever normalmente o código, iniciando com um elemento math. Veja este exemplo:

 1 <!--DOCTYPE html>
 2 <html>
 3 <head>
 4 charset="UTF-8" />
 5 <title>MathML</title>
 6 </head>
 7 <body>
 8 
 9 <math>
 10 <mrow>
 11 <mi>x</mi>
 12 <mo>=</mo>
 13 <mfrac>
 14 <mrow>
 15 form="prefix">−
 16 <mi>b</mi>
 17 <mo>&PlusMinus;</mo>
 18 <msqrt>
 19 <msup>
 20 <mi>b</mi>
 21 <mn>2</mn>
 22 </msup>
 23 <mo>&minus;</mo>
 24 <mn>4</mn>
 25 <mo>&InvisibleTimes;</mo>
 26 <mi>a</mi>
 27 <mo>&InvisibleTimes;</mo>
 28 <mi>c</mi>
 29 </msqrt>
 30 </mrow>
 31 <mrow>
 32 <mn>2</mn>
 33 <mo>&InvisibleTimes;</mo>
 34 <mi>a</mi>
 35 </mrow>
 36 </mfrac>
 37 </mrow>
 38 </math>
 39 
 40 </body>
 41 </html>

Veja como esse exemplo é renderizado no navegador:

image

Mesmo que você nunca tenha visto MathML, e este código pareça um pouco assustador, dê uma olhada com calma no código, comparando com a imagem do resultado, e você vai perceber que é muito simples. Talvez algo que possa deixá-lo confuso é a entidade &InvisibleTimes;, que aparece algumas vezes no código. Ela está lá para separar os fatores 4ac, por exemplo. Esses valores são multiplicados, é o que a fórmula representa, mas não queremos colocar um operador de multiplicação entre eles, porque por convenção se simplesmente escrevemos 4ac qualquer leitor saberá que isso é uma multiplicação.

Por que então se preocupar em inserir &InvisibleTimes;? Você vai notar que se remover a entidade e a tag mo correspondente o resultado visual será o mesmo. Colocamos &InvisibleTimes; porque MathML não é só visual, é semântica. Um outro agente de usuário pode ter recursos de importar essa fórmula para uma ferramenta de cálculo, por exemplo.

SVG

Assim como MathML, SVG é uma outra linguagem XML que pode ser incorporada com facilidade em HTML5. Você pode ler mais sobre SVG em http://www.w3.org/Graphics/SVG/. SVG é uma linguagem para marcação de gráficos vetoriais. Vejamos um exemplo bem simples:

 1 <!--DOCTYPE html>
 2 <html>
 3 <head>
 4 charset="UTF-8" />
 5 <title>SVG</title>
 6 </head>
 7 <body>
 8 
 9 width="400" height="400">
 10 
 11 <!-- Um retângulo: -->
 12 <rect x="10" y="10" width="150" height="50" stroke="#000000"
 13 stroke-width="5" fill="#FF0000" />
 14 <!-- Um polígono: -->
 15 fill="red" stroke="blue" stroke-width="10" 
 16 points="250,75 279,161 369,161 297,215
 17 323,301 250,250 177,301 203,215
 18 131,161 221,161" />
 19 
 20 <!-- Um círculo -->
 21 cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5"
 22 fill="#FFFFFF" />
 23 </svg>
 24 
 25 </body>
 26 </html>

E veja como isso é renderizado no navegador:

image

É possível fazer muito mais com SVG. A maioria dos editores de gráficos vetoriais hoje exporta e importa automaticamente SVG, permitindo a um designer construir um gráfico em seu editor vetorial predileto e exportá-lo diretamente. Em seguida, um programador pode construir javascript que manipula esse SVG, usando os métodos do DOM. Com isso você pode ter gráficos dinâmicos, com animação, escaláveis e com excelente qualidade visual, programáveis em Javascript, sem tecnologias proprietárias e plugins.

Galera, por enquanto é só, até mais!!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s