Formulários em HTML5 – novos tipos de input

Quem já fez validação de formulário (antes do jQuery validate) deve lembrar o inferno que é um formulário gicante para validar – tudo bem que eu era noob no javascript na época, mas com os novos tipos de inputs propostos pela W3C os formulários ficaram mais semânticos e a validação no front-end ficará ainda mais fácil.

O HTML5 está muito mais interativo e muita coisa que nós desenvolvedores já fazemos a muito tempo passou a ser documentada e oficializada pelo W3C, tenho esperança que com o tempo isso reduzirá as gambiarras da programação.

Novos tipos de input no HTML5

Input type color

Ainda não está implementado em nenhum browser, mas a idéia é facilitar os "color picker" tornando-os nativos de cada navegador.

Input type search

Um campo de texto com o diferencial de estar especificado que será de busca, poderá ser explorado por leitores de tela e dispositivos de acessibilidade para facilitar a navegação por buscas.

Input type number

Vai facilitar a validação se ela for implementada diretamente no browser, mas não traz nenhuma grande novidade.

Input type date

Outro input que pode facilitar muito a validação, a recomendação é que seja nativo do navegador um datepicker (com funcionamento semelhante ao calendário do jQuery UI).

Esta recomendação além de acabar com preocupação de validação no front-end para datas elimina a necessidade de implementação do datepicker.

Ponto negativo: acredito que os campos com datepicker, colopicker, etc. se tornatão os novos inputs do tipo "file" no sentido de impossibilidade de alteração de layout.

Espero que os browsers implementem uma forma de usar o CSS para estilizar o datepicker, caso contrário serão necessárias gambiarras e acho que o jeito vai ser manter o datepicker em JS para poder manter o layout, afinal o cliente (e o designer) não quer saber se é do browser e o visual não pode ser alterado, ele quer o checkbox, o radio, o select, o datepicker tudo conforme o layout dele – e com razão.

Input type datetime

A descrição do item anterior serve para este, com o diferencial que os dados desde são no formato datetime (além da data inclue a hora).

Input type datetime-local

Mais um campo bacana para o desenvolvimento de aplicativos web, principalmente quando você tem usuários localizados em fuso horários diversos.

Este campo é do tipo datetime mas com o diferencial que ele utiliza o fuso horário do computador do cliente e quando o form é enviado (submit) é realizado uma conversão para o fuso horário do servidor, acabando também com a necessidade de conversões de datas e horários para diferentes fusos.

Input type email

Sabendo da necessidade constante de validação de e-mail, a W3C implementou este novo type que também é recomendado que a validação seja nativa do browser, outra a menos para se preocupar.

 

Existem também novos eventos para os formulários, mas vai ficar para outro post pois aqui já tem bastante novidade. O que você achou dos novos tipos de input? Compartilhe sua opinião nos comentários!

Para saber mais sobre HTML5 leia também:

HTML5 – Tag aside

Dando continuidade as explicações sobre as novas tags do HTML5, você já sabe especificar o doctype, já fez o seu menu utilizando a tag nav, como você deve classificar o conteúdo relacionado ao seu conteúdo principal?

aside – conteúdo relacionado

A tag <aside> não é para fazer colunas como eu já li por aí, nas dicas para escrever um bom HTML eu falei: semântica na escrita, ignore o layout.

A tag aside define uma área de conteúdo relacionado ao seu conteúdo principal (que provavelmente será um article, o "filé do conteúdo" – vou tratar em outro post já começado), então pode fazer sentido você utilizar isso para uma barra lateral – desde que o conteúdo esteja relacionado ao seu conteúdo principal.

Um exemplo do @elcio no curso da W3C é o uso do aside para as listas de comentário. Isto resolve a dúvida do uso de sectionou article para comentários. Desde que li as definições eu tenho em mente usar apenas um article por página – pensando em SEO, este article está reservado para o conteúdo principal, que eu quero que seja indexado e considerado importante pelos buscadores, pois ele é o conteúdo mais importante para o meu usuário.

Vou continuar escrevendo diversos posts sobre HTML5 durante o curso, para quem quiser acompanhar mais de perto sigam @odesenvolvedor que estou pulicando as dicas rápidas por lá!

(Os posts feitos durante o curso serão atualizados com as correções, estou "correndo" para não perder nada de conteúdo do curso).

Semântica é tudo!

Semântica, meus amigos, é a base de qualquer html escrito. E não existe uma regra rígida, um certo ou errado; html é uma linguagem, e existem muitas formas de se falar a mesma coisa em uma linguagem.
Desde a forma mais formal e polida, até aquela mais esdrúxula. Mas, de qualquer forma, todo mundo vai entender o contexto global.
Acontece que, para não deixar dúvida sobre o que você está expressando, quanto mais formal se usa uma linguagem, menor a margem que se dá para mal-entendidos.

Passei algumas horas numa reunião na última sexta-f discutindo sobre a semântica que foi usada na escrita de um html para um projeto no qual vou me envolver. O html estava todo validado pelo W3C, sem tabelas, bonitinho. Bonitinho, sim, mas ordinário. Não havia semântica; olhava pro html e não sabia o que era tpitulo, o que era texto de conteúdo, se as imagens usadas eram de layout ou de conteúdo, etc…

Vou usar um exemplo de um grande portal da web para exemplificar. Veja o trecho do layout:

O código usado foi esse:

<div id="noticias">
    <div id="imagem">
    <p>
        <a href="#" rel="100"><img src="/capa/imagens/kassab_noiva_panico_reimarques-163.jpg" alt="Reinaldo Marques/Terra" title="Reinaldo Marques/Terra" width="163" height="200"></a>
    </p>
    <h5><a href="#" rel="100" >´Pânico´ tenta entregar "noiva" a Kassab em SP</a></h5>
    </div>
    <ul>
        <li class="red"><a href="#" rel="101" >Votação</a></li>
        <li class="prin1t"><a href="#" >Ao vivo: candidato esquece título de eleitor em Cuiabá</a></li>
        <li class="prin1p">&middot; <a href="#" rel="102" >Em BH, Alencar diz que é precipitado falar em 2010</a></li>
        <li class="prin1p">&middot; <a href="#" rel="103" >Maria do Rosário vota acompanhada da família</a></li>
        <li class="prin1p">&middot; <a href="" rel="104" ></a /><a href="#"><strong>vc repórter</strong> Mande fotos</a> · <a href=#">TSE substitui 249 urnas</strong /></a> </a></li>
        <li class="prin1p">&middot; <a href="" rel="105" ></a /><a href="javascript:abre(´#´,´pesquisadetitulo´,´562´,´620´,´NO´);">Veja os locais de<strong> votação</strong></a> · <a href="#">Saiba como <strong>justificar</strong></a> </a></li>
        <div class="linha"></div>
        <li class="red"><a href="#" rel="1010" >Blog das Eleições</a></li>
        <li class="prin1b"><a href="#" rel="1010" >Emprego para candidato único é "fenômeno"</a></li>
        <div class="linha"></div>
        <li class="red"><a href="#" rel="1020" >Notícias</a></li>
        <li class="prin1b"><a href="#" rel="1020" >Em ato falho, FHC diz que Kassab "ganhou"</a></li>
        <li class="prin1p">&middot; <a href="#" rel="1021" >Eleitor cai de telhado, atinge seção e quebra urna</a></li>
        <li class="prin1p">&middot; <a href="#" rel="1022" >Mesários arrombam escola e acham vigia trancado</a></li>
    </ul>
</div>

Vou, de cara, me abster a comentar sobre essas divs perdidas no meio da lista (ul) usada. Um erro grosseiro.
Mas, quando se olha para esse layout, o que se percebe? Há uma imagem de destaque na lateral esquerda,  com uma legenda, e na lateral direita uma série de retrancas com títulos, uma com subtítulo e links para as matérias. Existem milt maneiras de se escrever o html para isso, mas, analisando o código escrito originalmente:
– não faz sentido usar um h5 para a legenda da imagem, ainda maais porque não foi usado nenhum outro título nas demais áreas;
– não tem o porque colocar um parágrafo (p) para a imagem;
– não foram usadas tags de títulos (h1 a h6) para os títulos e subtítulos das retrancas.
– uso de atributos deprecados para definir layout inline (width, height)
– bullet usado nas listas (uls) deveria estar no CSS e não no html

Como eu escreveria esse html:

<div id="noticias">
    <div id="imagem">
        <a href="#" rel="100"><img src="/capa/imagens/kassab_noiva_panico_reimarques-163.jpg" alt="Reinaldo Marques/Terra" title="Reinaldo Marques/Terra"></a>
        <a href="#" rel="100" >´Pânico´ tenta entregar "noiva" a Kassab em SP</a>
    </div>
    <div>
        <h5><a href="#" rel="101" >Votação</a></h5>
        <h6><a href="#" >Ao vivo: candidato esquece título de eleitor em Cuiabá</a></H6>
        <ul>
           
            <li><a href="#" rel="102" >Em BH, Alencar diz que é precipitado falar em 2010</a></li>
            <li><a href="#" rel="103" >Maria do Rosário vota acompanhada da família</a></li>
            <li><a href="" rel="104" ><a href="#"><strong>vc repórter</strong> Mande fotos</a> · <a href=#">TSE substitui 249 urnas</a></li>
            <li><a href="" rel="105" ><a href="javascript:abre(´#´,´pesquisadetitulo´,´562´,´620´,´NO´);">Veja os locais de<strong> votação</strong></a> · <a href="#">Saiba como <strong>justificar</a></li>
        </ul>
        <h5><a href="#" rel="1010" >Blog das Eleições</a></h5>
        <h6><a href="#" rel="1010" >Emprego para candidato único é "fenômeno"</a></h6>
        <h5><a href="#" rel="1020" >Notícias</a></h5>
        <h6><a href="#" rel="1020" >Em ato falho, FHC diz que Kassab "ganhou"</a></h6>
        <ul>
            <li><a href="#" rel="1021" >Eleitor cai de telhado, atinge seção e quebra urna</a></li>
            <li><a href="#" rel="1022" >Mesários arrombam escola e acham vigia trancado</a></li>
        </ul>
    </div>
</div>

É lógico que alguns pontos podem ser discutidos, alterados, etc… mas, vendo esse html aqui, quem vê o código entende qual parte do conteúdo tem a sua devida importância: o que é titulo, é título, o que é lista de menu é lista de menu, o que é link é link.

E qual a vantagem?
Leitores de busca e indexação funcionam seguindo a semântica do seu código. Se você tem um título e um texto simples envoltos ambos com uma div, o buscador vai entender que ambos tem a mesma importância; quando você uma um h1 (ou até h7) num título e coloca o texto num parágrafo (p), o buscador entenderá que o título é mais relevante. E isso ajudará e muito na indexação, pode apostar.
Isso, sem contar que escrever o código dessa maneira acelera o processo de manutenção do html – principalmente quando ele é trabalhado por equipes – e diminui o peso do html final (com isso, gera menos consumo no tráfego de dados do seu servidor).
Ou seja, todo mundo ganha!

 

Você é um viciado em Webstandards quando…

Você já enviou para o administrador de um site um e-mail informando sobre erros de validação no html/css

Você já gastou mais do que meia-hora procurando uma versão compatível com os padrões para uma galeria de fotos em flash

Você já sentou num restaurante e, ao olhar a mesa, pensou: "humm, eu poderia fazer isso com divs"…

Você teve faniquitos ao ler o título desse post 🙂

Você já ouviu alguém cochichando "ihh, lá vem a polícia dos webstandards" quando você chega num ambiente

Você já investiu mais de uma hora tentando explicar pro seu priminho mais novo que adora computadores, a diferença entre acessibilidade e padrões

Nesse meio-tempo em que ficou lendo esse post, já abriu o validador da W3C e foi ver se essa página contém algum erro

A mais TENEBROSA notícia do primeiro de abril para o desenvolvedor

O prêmio da mais assustadora notícia geek do primeiro de abril vai para o recomendado Tableless , com essa notícia que mistura terror, pânico, monopólio e Microsoft (e eu gosto da Microsoft, sério!).

Claro que a notícia não engana muito mas, se por algum mal maior –  diabo na terra ou sei lá o que – ela fosse verdade, seria no mínimo pesadelo para os desenvolvedores. Gente mudando de religião, de profissão, de crenças…

Vamos ao hoax a brincaideira do Diego Eis – em azul a notícia e em cinza meus comentários:

Microsoft compra W3C

Só este título já é motivo de pânico geral, certo?

Em reunião com a equipe do W3C no começo desta desta semana, a Microsoft e sua equipe entraram em um acordo com o W3C de US$7.4 Milhões.

A Microsoft vem fazendo um bom trabalho com o Internet Explorer 8, mas eles precisam de mais informações relevantes e importantes para o crescimento do novo browser. Por isso a compra do W3C juntamente com suas idéias e integrantes foi importante para fazer com que o Internet Explorer fique na liderança por um bom tempo.

Não sou a favor do monopólio, mas talvez com o IE como o "navegador dos padrões" o desenvolvimento se tornaria mais… fácil?

Horrível para nós desenvolvedores. Com uma entidade como o W3C – que mesmo lerdo em suas decisões – é importante para todos os desenvolvedores que ela fique neutra a qualquer empresa para que não haja monópolio no desenvolvimento web.

Eu me botei a pensar: seria tão ruim assim? E a resposta veio rápido: provavelmente.

A Microsoft disse que não pretende obrigar o desenvolvedor a utilizar código proprietário, mas isso pode vir a ser importante para que o Internet Explorer ganhe força e torne-se inalcansável para todo o sempre.

Diego Eis afirma que isso se trata de apenas uma brincadeira de 1 de Abril e que se o caso acima acontecesse ele começaria a usar Dreamweaver como sacrifício eterno.
Este post se auto-destruirá no final deste dia.

Bom, eu coloquei o post aqui pois não pretendo deleta-lo, e perder o original acabaria com o sentido deste… o que será que aconteceria se a Microsoft tivesse em mãos a W3C?

Acho que isso poderia ter um lado positivo, mesmo na força os outros navegadores seguriam o "padrão do IE", tornando-se finalmente um padrão web. Resultado final: desenvolver pensando em apenas um navegador, seja ele o IE ou não…

Mas minha análise é bastante superficial, e a guerra comercial não permitiria uma solução tão fácil, o que você acha que aconteceria se a Microsoft adquirisse a W3C?