Tipos de Input – HTML5 e as Novidades no input types

Dando sequência ao artigo onde falávamos sobre os novos tipos da tag input, link aqui. Sabemos que todo site ou sistema, por menor que seja sempre tem um um Input, seja pra fazer uma busca, ou um formulário de contato, entre outras coisas. A tag <input> é então muito utilizada e importante para programadores back-end ou front-end,  com a chegada do HTML5 esse componente recebeu algumas atualizações que facilitam as nossas vidas e incluem nativamente alguns testes e estilos pre-definidos. Veremos alguns deles.

Metatag Charset

 

 

Com o HTML 5, a semântica do código tornou-se tão importante quanto ao resultado apresentado na tela do navegador. Isto por que seu cliente tem o interesse de que aquele serviço oferecido por ele através do site atinga o maior número possível de pessoas e como isto pode ser feito. São raros os casos que todo o processo de divulgação de seus serviços fiquem fora dos buscadores, ocasionalmente um usuário vai no google ou outro buscador procurar um produto ou serviço e analisar os resultados ali demonstrados. Normalmente ele irá olhar aqueles que estão na primeira página e escolher um ou outro. Neste contexto que precisamos, como desenvolvedores, entender o uso das Metatags e como melhor informar ao sistemas de buscas do que “nosso” site se trata.

A seguir veremos como funciona e como evoluiu a metatag Charset. Lembrando que este artigo continua a sequencia de  estudos da nova estrutura do HTML, onde iniciamos falando sobre a propriedade doctype

Conditional comments(comentários Condicionais) para Internet Explorer

Diante da cobrança das pessoas, várias dizendo que abandonei o blog, tinha que arrumar um tempo pra escrever alguma coisa. Então como tenho um rascunho pronto sobre o Google Chrome Frame e para sua utilização será necessário usar uns comentários condicionais. Mas o que realmente é isto? Qual a sintaxe? E quais os recursos disponíveis para sua utilização.

Como criar Listas HTML

Olá, reativando (quanto mais próximo das eleições menos tempo de folga) hoje vamos continuar a explicação de tags HTML, uma das mais simples e funcional é a responsável pela criação de listas. Ordenadas, não-ordenadas, numéricas e outras que veremos a seguir.

Valor padrão em inputs

Artigo rápido hoje. Continuando sobre as novidades sobre o HTML e o elemento INPUT, temos a atributo placeholder, que nada mais é do que um  atributo que especifica uma dica curta que descreve o valor esperado de um campo de entrada (por exemplo, um valor de amostra ou uma curta descrição do formato esperado).

A dica é exibida no campo de entrada quando ela está vazia, e desaparece quando o campo recebe o foco.

Nota: O atributo placeholder trabalha com os seguintes tipos de entrada: texto, pesquisa URL, tel, email e senha.

Novos Elementos HTML – Input type: email, url

 Como foco principal do HTML 5 é deixar a web mais dinâmica em sua forma mais nativa possível, surge os novos elementos para utilizar nos inputs (campos de entrada de dados do formulário). Antes o mais comum era a utilização do input type=’text’ para quase todos os tipos de entradas de dados, desta forma a validação da informação submetida ficava a critério do Javascript e/ou da linguagem de desenvolvimento. Hoje veremos que não é necessário tal processo. Os Novos Elementos tendem a melhorar a semântica do código gerado e quais são esses elementos? Citarei alguns mas vamos analisar o funcionamento de 2 deles: email e url.

Barra de Progresso – HTML 5

Voltando com a programação normal do blog, temos hoje a barra de progresso. Com uma aparência determinada tanto pelo navegador, quanto pelo Sistema Operacional, este novo elemento HTML demonstra que a conjunção do HTML5 + CSS3 + Javascript vieram deixar a web mais dinâmica e muito mais acessível.

Como um desenvolvedor de aplicações web, barras de progresso é uma grande solução quando você quer mostrar ao usuário que alguma ação está acontecendo, especialmente quando tal ação pode demorar um tempo maior. Um exemplo de tal aplicação e ainda animada é o Gmail que mostra ao usuário quanto tempo vai levar para ele carregar e inicializar

 

Bordas arredondadas com o border-radius no CSS3

Quem já precisou criar bordas arrendondadas antes do CSS3 lembra quanto erra chato. Claro que alguns usavam(e outros insistem em usar) tabelas para fazer tal recurso. Porém a tão aguardada propriedade border-radius está ativa.  Ela nada mais é do que a possibilidade de criar bordar arredondadas, assim simples e fácil.

Agora você me pergunta “Fábio como eu faço pra usar, se é tao fácil?”. Simples vamos olhar uma declaração válida…

Elemento datalist

Olá novamente, Seguindo com a “apresentação” sobre o HTML5 vamos falar um pouco sobre o novo elemento <datalist>. Com ele podemos especificar uma lista de opções para um campo de entrada, uma espécie de autocompletar. Ele  irá mostrar uma lista de elementos predefinidos como opção para um caixa de entrada de texto. Caso o browser não suporte este componente, ele pode exibir os elementos que compõem o datalist em forma de texto simples.

Navegadores com Suporte:
  Atualmente, apenas o Firefox e Opera tem suporte ao elemento datalist, podemos usar uma solução alternativa a esta falta de suporte. Vamos aos exemplos, na prática a coisa é melhor.

Tag abbr – Abreviações e siglas

Salve pessoas, antes de iniciar nossa conversa sobre mais uma tag HTML um aviso: O Blog não morreu! Digo isso por que quem me conhece sabe que tenho uma grande dificuldade em manter o foco nesse negócio de blogs e afins. Porém este é diferente, não é para falar sobre o que eu faço (isso é chato), então vamos em frente.

As tags <abbr> são utilizadas para demarcar abreviações e siglas.  Este elemento é usados para dar significado adicional ou o real significado de uma sigla a um conteúdo web. Marca-se o conteúdo com um este  elemento e acresenta-se o atributo title contendo a informação extra sobre tal assunto.

Por exemplo:
Farei MBA em Gerenciamento de Projetos