1. 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:
<divclass="principal">
<divclass="header"></div>
<divclass="nav"></div>
<divclass="conteudo"></div>
<divclass="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

2. 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
mastambem 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 tagnav. O Google pode se preocupar em começar o mapeamento
pelo conteúdo das tagsnav 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 tagheader 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 tagheader 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>
<timedatetime=”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
taghgroup 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 tagnav 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:
<spanstyle="font-size: medium;"><nav>
<ul>
<li><arel=”item1” href=”#”>item1</a></li>
<li><arel=”item2” href=”#”>item2</a></li>
<li><arel=”item3” href=”#”>item3</a></li>
<li><arel=”item4” href=”#”>item4</a></li>
</ul>
</nav></span>

3. 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 <divclass=”conteudo”> por article.
Mesmo porque o conceito de “conteúdo” varia de desenvolvedor para desenvolvedor, ao
passo que o conceito da tagarticle é ú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 tagnav, embora suas
competências sejam nitidamente diferentes.
As tagsaudio 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 tagssã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 tagaudio pode rodar arquivos no formato .mp3 e a tagvideo .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 ultimatag para ser tratada neste post é a tagfooter. 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

4. 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

5. 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 floatdefinido com o valor left ou rightpara que as divsse organizem
conforme anecessidade. 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: 1pxdashed#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.

6. - 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; }
tabletr:nth-child(odd) { background: #999; }
Apartir 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 tagtable 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

7. 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’sda 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, leftbottom, lefttop,
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 divbranca. É 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: #99902px5px;
/*sombra de container*/
-moz-box-shadow: 3px3px10px#666666;
-webkit-box-shadow: 3px3px10px#666666;

8. box-shadow: 3px3px10px#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: below10px-webkit-gradient(linear, lefttop,
leftbottom, 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.