Iniciando em HTML5

O HTML5 veio com a finalidade de preencher necessidades no desenvolvimento das linguagens de marcação de texto. Necessidades estas que surgiram com o advento de novas tecnologias e novos paradigmas e padrões. Hoje o HTML não pode simplesmente ser organizado e bem visto pelos desenvolvedores, existem outros clientes que podem se beneficiar desta nova arquitetura. Entre as diversas funcionalidade do HTML5, as principais são: facilitar o desenvolvimento de paginas que estejam de acordo com os fundamentos dos padrões web, melhorar a semântica das paginas para diversos clientes e implementar novas funcionalidades.

Neste post vou tentar mostrar algumas novidades do HTML5, exibindo algumas vantagens, novas tags, atributos, estilos e técnicas de desenvolvimento que facilitam o que antigamente (ou atualmente) era ser feito com varias linhas de código e envolvendo outras tecnologias.

Para começar vamos falar um pouco sobre as estruturas das paginas antigas e compara-las com as que serão usadas futuramente.

Quando a parte HTML de uma pagina era desenvolvovida, a estrutura ficava quase sempre da seguinte forma:

<div class="principal">   <div class="header"></div>   <div class="nav"></div>   <div class="conteudo"></div>   <div class="footer"></div>

</div>

Reparem que tudo se baseava em torno de div’s (isso quando não se baseava em table = S) e classes para mapear e fazer o reconhecimento de sessões da pagina. Esta forma de desenvolvimento é bastante cabível e de certa forma consegue separar os tipos de conteúdo, deixando a semântica do HTML relativamente organizada. No entanto com a aplicação do HTML5 esta forma de desenvolvimento vai sofrer algumas pequenas mudanças. Como já se sabe o HTML5 trouxe consigo algumas novas tags que podem ajudar não somente o reconhecimento ou a organização ou a visibilidade de um código HTML. Vejamos algumas novas tags em uma estrutura feita sobre a nova versão desta linguagem:

<section>   <header></header>   <nav></nav>   <article></article>   <footer></footer>

</section>

Perceba que todos os nomes das tags sofreram alterações, entretanto a estrutura não. O conteúdo da pagina não é organizada sobre div’s mas sim sobre uma divisão natural feita pelas tags. Uma pergunta muito comum ao ver esta diferença é “Mas e daí, qual a

diferença entre isto e div’s?”. Bem, fora as varias funcionalidades que eu mostrarei logo mais neste post ainda tem o fato de organizar de forma obrigatória e definitiva a semântica em todos os aspectos. O que estou querendo dizer é que não somente os desenvolvedores terão o prazer de mapear o código de forma bem mais simples mas tambem o CSS será feito de forma mais especifica e os sites de busca terão mais facilidade para fazer o mapeamento das paginas.

Um exemplo, vamos supor que a forma de mapeamento do Google seja feita através dos menus dos sites. Agora vamos supor que o AbasB já esteja em HTML5 e o menu seja feito utilizando a tag nav. O Google pode se preocupar em começar o mapeamento pelo conteúdo das tags nav e fazer um mapeamento bem mais eficiente do que um site em que o menu esteja dentro de div’s e listas tais quais o resto da pagina.

Bom, agora que já mostrei algumas vantagens das novas tags e estrutura do HTML5 vamos ver algumas novas funcionalidades mais a fundo.

A tag header pode ser usada tanto na aplicação do header do site, conforme mostrado na estrutura acima, como pode se usado para representar a header de outras sessões do site. Por exemplo, o AbasB poderia utilizar a tag header para guardar informações do cabeçalho de um post como o titulo, a data de criação, o autor e alguns outros dados. Vamos à um exemplo:

<article>   <header>      <hgroup>         <h2>Titulo do Post</h2>         <h3>Autor do Post</h3>      <hgroup>      <time datetime=”2010-11-02 23:00:00”>02 de novembro de 2010</ time>   </header>

</article>

Duas das tags acima ainda não foram apresentadas, mas não são menos importantes. A tag hgroup tem a finalidade de agrupar todas as tags de cabeçalho h*. A tag “time” como o próprio nome diz tem a finalidade de armazenar valores de tempo como datas e hóras.

A tag nav pode ser usada para representar determinadas áreas de navegação de um site. Dois exemplo simples são o menu e mapa do site que normalmente são feitos com listas. A seguir um exemplo:

<span style="font-size: medium;"><nav>   <ul>      <li><a rel=”item1” href=”#”>item1</a></li>      <li><a rel=”item2” href=”#”>item2</a></li>      <li><a rel=”item3” href=”#”>item3</a></li>      <li><a rel=”item4” href=”#”>item4</a></li>   </ul>

</nav></span>

Repare que dentro das ancoras existe um atributo chamado rel. Bem, este atributo existe apenas para deixar explicito o conteúdo no qual a ancora esta sendo fazendo referencia. Mais uma vez algo util para o mapeamento dos sistemas de busca, já que eles podem passar de link em link e ter uma previa do conteúdo que aquela ancora guarda.

Uma nova tag bastante interessante é a article. Ela permite marcar explicitamente em que parte do seu HTML estão os artigos e conteúdos em geral. Esta tag foi utilizada para ilustrar exemplos mais acima.

Deve se ter muito cuidado para não substituir <div class=”conteudo”> por article. Mesmo porque o conceito de “conteúdo” varia de desenvolvedor para desenvolvedor, ao passo que o conceito da tag article é único.

Outra tag nova bastante inteligente é a aside. Esta visa guardar todos os links que podem estar relacionados ao conteúdo principal da pagina ou mesmo ao conteúdo de um artigo. É bem mais facil entender o funcionamento desta tag através de um exemplo:

<span style="font-size: medium;"><article>   <!--CONTEUDO DO ARTIGO---></article><p>Conteudos relacionados:</p><aside>   <ul>      <li><a rel=” artigo2” href=”#”> artigo2</a></li>      <li><a rel=” artigo3” href=”#”> artigo3</a></li>      <li><a rel=” artigo4” href=”#”> artigo4</a></li>      <li><a rel=” artigo5” href=”#”> artigo5</a></li>   </ul>

</aside></span>

Perceba que esta tag pode ser confundida com o uso da tag nav, embora suas competências sejam nitidamente diferentes.

As tags audio e video foram provavelmente uma das mais esperadas pelos desenvolvedores. Mas a verdade é que apesar de ter facilitado muito (muito mesmo!) a inclusão destas midias em uma pagina a falta de customização pode acabar diminindo a utilidade destas tags. Até porque não é dificil pegar a tag de video do YouTube, por exemplo, e disponibilizar em uma pagina HTML. Mesmo assim a facilidade no uso destas duas tags são surpreendentes. Ambas possuem os atributos src e controls. A primeira se referente ao caminho da musica ou video que a pagina irá rodar. O segundo se refere ao controles que irão aparecer para que o video/audio possa ser gerenciado pelo usuario. A tag audio pode rodar arquivos no formato .mp3 e a tag video .webm, .mp4 e .ogv. Estes provavelmente não são todos os formatos que estas tags suportam. A medida que encontrar novos tipo de fontes que funcionem atualizo este post.

A ultima tag para ser tratada neste post é a tag footer. Como o próprio nome diz esta tag deve ser inserida no final das paginas do site. Geralmente representa o espaço que contem informações como “Copyright”, um link para a home ou mapa do site.

Novas tags de formulario do HTML5 e CSS3

HTML5 e CSS3 trouxeram consigo varias melhorias para o gerenciamento de formularios. Varios controles que antes eram feitos com a mistura de CSS, HTML e JavaScript já podem ser substituidos por apenas um controle HTML. Os estilos de validação que eram feito com CSS e inseridos com JavaScript já podem ser substituidos por estilos de validação via CSS.

Isso é possivel pois o HTML5 dividiu o <input type=”text”/> em vários elementos especificos e criou outros controles que não existiam mas que eram improvisados. Algumas tags do HTML5 estão listas abaixo:

<input type="date" min="0001-01-01" max="2011-08-14" value="2010-08-14"/>

<input type="tel" placeholder="(XXX) XXX-XXXX" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" />

<input type="color" />

<input type="number" step="1" min="-5" max="10" value="0" />

<input type="email" />

Perceba que na linha 1 o tipo do campo é date o que indica que o campo serve para receber datas. Neste e em outros campos como o number (utilizado para trabalhar com números) é possivel definir propriedades como min, max e value.

Na linha 2 o tipo do controle é tel, que significa que aquele campo serve para telefones. O formato do telefone pode ser definido com o atributo pattern que recebe um regex e verifica se o valor segue o padrão ali estabelecido. O atributo placeholder pode ser usado em outros campos e serve para criar uma máscara para o respectivo campo.

Na linha 3 o campo é do tipo color, que como o proprio nome diz serve para validar cores. As cores podem ser tanto em hexadecimal (#FFF) como descrito em ingles (red).

Outras tags importantes do HTML estão listas abaixo. São elas respectivamente:

controle do tipo range;

progressbar que visa informar que um determinado evento está ocorrendo;

progressbar que informar quanto do tempo de execução de um evento falta para acabar.

<input type="range" min="0" max="100" step="1" value="10" />

<progress>working...</progress>

<progress value="75" max="100">3/4 complete</progress>

Já do lado do CSS dois novos seletores facilitam muito a estilização de controles de formulario. Vale lembrar que nem de longe estas são todas as novas ferramentas que o HTML5 e CSS3 disponibilizam para controles de formulario. É apenas uma prévia para mostrar o basico e para que saibam da existencia de ferramentas mais simples que fazem o trabalho pesado.

[required] { background-color: lightyellow; }

:invalid { background-color: #FF9; }

A primeira linha do trecho de código acima estiliza todos os elementos de formulário que não podem sofrer submit com valor vazio. A pergunta é “como o css sabe quais controles de formulário não podem ficar vazio?”. A resposta é simples, para que o seletor [required] estilize todos os elementos que não podem estar vazios basta inserir nas tags HTML a propriedade required. Dessa forma o CSS reconhece que aquele controle não pode estar vazio.

A segunda linha também contempla um novo seletor que estiliza todos os elemenetos inválidos da pagina. Por exemplo, uma tag com a seguinte configuração <input type=”email” /> fica com a propriedade background-color igual a #ff9 até que o usuário escreva um e-mail valido dentro da caixa de texto.

Veja que a mistura dos novos campos HTML5 com os novos elementos CSS3 é possivel incrementar a validação e o gerenciamento do formulario de forma muito poderosa e simples.

Recursos interessantes do CSS3

Na verdade a pouco tempo o AbasB tinha um unico post com tudo de CSS3 e tudo de HTML5. Faz pouco tempo decidi dividir melhor os temas para facilitar a busca e os temas do assunto. Neste post tento passar dois elementos que a meu ver são indispensáveis para quem pretende começar com CSS3.

- Colunas automaticas:

É muito comum em sites a necessidade da divisão de um container em diversas colunas com o mesmo tamanho, afim de organizar textos, formularios, imagens ou outros elementos HTML. Antes do surgimento do CSS3 era necessario a criação de classes com o atributo float definido com o valor left ou right para que as divs se organizem conforme a necessidade. Apartir do CSS3 basta definir três atributos para que as colunas sejam definidas dentro de um container.

.colunas {

   -webkit-column-count: 3;

   -webkit-column-rule: 1px dashed #999;

   -webkit-column-gap: 20px;

}

Não vou perder tempo explicando cada atributo pois pelo nome já é possovel identificar suas responsabilidades. Para visualizar as colunas basta associar a classe colunas a um container e inserir conteudo. O conteudo inserido será divido de acordo com o configurado na classe.

- Novos seletores do CSS3:

Este é um assunto extenso que exige um post inteiro. Por isso vou mostrar o que são os seletores , com o intuito de ilustrar algumas das novas técnicas que visam aumentar o controle e a produtividade do CSS. Para ver todos os novos seletores do CSS3 clique aqui.

Os seletores são usados para definir e posteriormente associar classes a um elemento. Os seletores mais usados são por tag, por classe e por ID. Mutios dos sites hoje utilizam conceitos de herença e combinam os seletores de tag com classe ou ID.

.classe {}

#id {}

tag {}

tag.classe {}

.classe tag {}

Os novos seletores visam aumentar o controle e a produtividade das folhas de estilo e dos elementos HTML. Um exemplo de novos seletores que já foram mostrados neste post foi:

[required] { background-color: lightyellow; }

:invalid { background-color: #FF9; }

table tr:nth-child(odd) { background: #999; }

A partir do seletor da linha 2 é possivel adicionar estilo a todos os elementos invalidos da pagina. Já com o seletor da linha 1 é possivel adicionar estilo em todos o elementos que possuem o atributo required. O terceiro seletor acessa todos os elementos tr impares que estão dentro da tag table e adiciona uma cor de fundo diferenciada. Muito usado para fazer a alternancia de cores nas linhas de uma tabela.

Borda arredondada, gradiente, sombriamento e espelhamento no CSS3

Depois de tantos posts sobre CSS3 vamos a parte considerada por muitos a parte mais interessante de toda a brincadeira. Como os novos atributos são tão intuitivos quanto os antigos tentarei mostrar a maior quantidade possivel e de forma rapida.

Muitas das formas de desenvolvimento de layout exigiam a inserção de imagens para se criar uma pagina com visual convidativo, com logo colorido, bordas arredondadas, degrade, sombras em caixas e textos. Com CSS3 o uso de imagens pode ser reduzido drasticamente devido a facilidade de se produzir efeitos visuais. Por consequencia as paginas ficarão muito mais leves, farão menos requests no servidor e não terão mais o efeito de carregar primeiro os elementos simples do HTML, depois as imagens.

Todos os códigos citados neste post estão dentro da tag <style> e fazem parte de uma folha de estilo.

- Borda arredondada:

div { border-radius: 15px; border: 1px solid #000; }

O trecho de código acima arredonda as bordas de todas as div’s da pagina. Além disso insere uma borda de 1 pixel que acompanha o novo formato da div. O elemento responsavel pelo efeito é o border-radius que além de prover o estilo arredondado ainda controla através do valor inserido o nivel da curvatura das bordas.

- Gradiente:

div {

   background: -webkit-gradient(linear, left bottom, left top,

   from(#eee), color-stop(0.50, #fff),

   to(#eee), color-stop(0.50, #fff));

}

Este código insere um degrade de cima para baixo e de baixo para cima em todas as divs do site, deixando centro da div branca. É um código diferenciado se comparado com o primeiro exemplo.

O elemento background recebe qual será o modelo do gradiente. Neste caso foi usado o linear, no entanto existem outros tipo d gradiente que podem diversificar o visual. Além do tipo é necessario configurar ainda a cor em que o degrade começa e em qual cor ele vai parar, tanto de cima para baixo, como é possivel ver na linha 3, quando de baixo para cima, como é possivel ver na linha 4. Neste caso ele vai de “azul” para “branco” de forma linear.

- Sombra em caixas e textos:

div {

   /*sombra de texto*/

   text-shadow: #999 0 2px 5px;

   /*sombra de container*/

   -moz-box-shadow: 3px 3px 10px #666666;

   -webkit-box-shadow: 3px 3px 10px #666666;

   box-shadow: 3px 3px 10px #666666;

}

O código acima adiciona efeito de sombra em todas as divs e em todos os caracteres que estão dentro das divs. O elemento responsável pelo aombriamento de textos esta na linha 3. Ele configura a cor, profundidade e lado que a sombra aparecerá. O trechos de códigos das linhas 6 a 8 são os responsaveis por inserir sombra nas divs.

- Espelhamento de container:

div {

   -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.3, transparent), to(rgba(255,255,255,0.8)));

}

O código acima insere espelhamento nos containers. É na linha 1 que se configura qual será a posição e o tipo de reflexo. A linha 2 determina qual será a cor e a opacidade que o reflexo terá no inicio e fim.

Para maiores informação (muito maiores) acessem este site espetacular.