Conheça O HTML 5

images

Estruturando Uma Página Com HTML 5

O objetivo do HTML 5 é criar um web semântica. Isso significa organização, padrões na estrutura da página que implementados, facilitam principalmente o trabalho de programas rastreadores – robôs de busca. E qual a vantagem disso? Mecanismos de busca mais precisos e úteis.

Como usuário, você conseguirá encontrar informações mais relevantes. E como desenvolvedor você a princípio vai quebrar a cabeça até entender os princípios desta nova forma de pensar o desenvolvimento. Mas tenha certeza que os benefícios alcançados valem muito a pena.

Esta nova versão do HTML traz mudanças significativas com a criação de novas tags que possibilitam unir as partes da página de forma lógica. O que não significa necessariamente um código mais enxuto. Como já disse, o objetivo é torná-lo organizado.

É comum ler que o HTML 5 somente estará pronto em 2022. O que é um erro de interpretação. Para o ano referido esta programada a segunda especificação, melhorias. Já em 2012 estará finalizada a primeira etapa e o desenvolvimento estará a pleno vapor. Além do que os navegadores já mostram a preocupação em oferecer suporte.

Neste primeiro tutorial, vou mostrar como utilizar o HTML 5 para estruturar a página inicial de um blog. Quem acompanhou a série sobre CSS vai reconhecer a estrutura, já que é a mesma do tutorial CSS – Criação de Layout. Desta maneira você terá a possibilidade de comparar o código XHTML com o HTML 5.

Layout HTML5

Suporte Ao HTML 5

O único navegador que não oferece suporte algum às novas funcionalidades do HTML 5 é o famigerado Internet Explorer. O líder do mercado por ironia também é o mais atrasado. A promessa é de que na versão 9, o navegador da Microsoft ofereça suporte total.

Para lidar com a versão atual e anteriores do IE, temos como solução, a utilização de um código javascript que possibilita o funcionamento do HTML também no Internet Explorer. Ele será utilizado neste tutorial.


<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Apesar de não ser tão comum quanto os desenvolvedores gostam de alardear, caso o javascript esteja desabilitado, a página vai desmontar. O melhor é você avaliar o público alvo do site para decidir sobre a utilização do HTML 5.

Mudanças Gerais Do HTML 5

Ao contrário do XHTML que somente permite tags escritas em minúsculo, o HTML 5 é case-insensitive. Tanto faz escrever maiúsculo quanto minúsculo. Isso oferece liberdade ao desenvolvedor e margem a críticas sobre a legibilidade do código. Eu aconselho o padrão XHTML.

No HTML 5 não é mais obrigatório o fechamento da tag de elementos “vazios” como img, br. Mais uma vez o direito de escolha é seu.

A definição do tipo de documento tornou-se absurdamente mais simples.


<!DOCTYPE html>

A hierarquia de cabeçalhos (h1 – h6) também foi alterada. Agora ela não é mais relativa à página somente, mas à seção da página. É possível ter diversos h1 em uma mesma página, sendo que cada um com uma importância diferente conforme a seção em que esta sem influenciar diretamente os outros.

O papel Da div

Com já foi dito, as novas tag HTML 5 priorizam a semântica. As divs sempre tiveram o papel de estruturar a página e continuam assim. São utilizadas para fins “decorativos” e estruturas gerais, pois não possuem valor semântico e não ajudam a definir a importância do conteúdo.

Conforme eu explicar as novas tags retornarei ao assunto para esclarecer melhor.

header E hgroup No HTML 5

O elemento header especifica o cabeçalho da seção da página. Ele pode ser utilizado no topo da página englobando o logotipo da empresa e o menu, e ao mesmo tempo aparecer no lado direito para intitular a seção “mais artigos”.

Utilização no topo da página:


      <header>
          <div></div>
       <nav>
           <ul>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="Marketing">Marketing</a></li>
    <li><a href="#" title="Internet">Internet</a></li>
    <li><a href="#" title="Granhar Dinheiro">Granhar Dinheiro</a></li>
    <li><a href="#" title="Webmaster">Webmaster</a></li>
    <li><a href="#" title="Scripts">Scripts</a></li>
    <li><a href="#" title="Software">Software</a></li>                            
    <li><a href="#" title="Comércio Eletrõnico">Com&eacute;rcio Eletr&ocirc;nico</a></li>
    <li><a href="#" title="Downloads">Downloads</a></li>
    <li><a href="#" title="Contato">Contato</a></li>
           </ul>
        </nav>

        </header>

Neste exemplo, o cabeçalho da página é simples e o header serve muito bem. Para cabeçalhos mais complexos que envolvam footer e outros headers, deve-se utilizar section.

No corpo da página:


<article>
  <header>
    <h1>Titulo do artigo</h1>
    <p>Data da postagem</p>
  </header>
  <p>Texto do artigo</p>
</article>

Pelo senso comum, tudo o que vier antes do texto em um artigo, é o cabeçalho. Então fica fácil você saber quando utilizar o header. Não é preciso utilizar header quando houver apenas um cabeçalho, por exemplo, um título estilizado com h1.

A tag hgroup (head group) serve para englobar diversos cabeçalhos.


<article>
  <hgroup>
    <h1>Titulo principal</h1>
    <h2>Subtítulo</h2>
  </hgroup>
  <p> Texto do artigo</p>
</article>

Se antes do texto ainda houvesse um parágrafo com data, por exemplo, deve-se então englobar o hgroup e p com o header.

footer no HTML 5

A tag footer basicamente é o rodapé. Seja da página ou de uma seção.


        <footer><p>Criado por Maicon Sobczak para Webmaster.pt</p></footer>

Esta tag contém informações adicionais sobre o que foi exposto na seção. Útil nas chamadas para um post, onde você pode adicionar o nome do autor, ou um link para o topo da página.

Para a criação de rodapés mais completos, comuns nos dias de hoje, com links para outros blogs, informações sobre o autor e afins, ao invés do footer deve-se utilizar o sections.

Deixe o footer para informações sucintas.

nav No HTML 5

Identifica os links para navegação seja para outra página ou seções da mesma página.


<nav>
<ul>
    <li><a href="#" title="Home">Home</a></li>
    <li><a href="#" title="Marketing">Marketing</a></li>
    <li><a href="#" title="Internet">Internet</a></li>
    <li><a href="#" title="Granhar Dinheiro">Granhar Dinheiro</a></li>
    <li><a href="#" title="Webmaster">Webmaster</a></li>
    <li><a href="#" title="Scripts">Scripts</a></li>
    <li><a href="#" title="Software">Software</a></li>                            
    <li><a href="#" title="Comércio Eletrõnico">Com&eacute;rcio Eletr&ocirc;nico</a></li>
    <li><a href="#" title="Downloads">Downloads</a></li>
    <li><a href="#" title="Contato">Contato</a></li>
</ul>
</nav>

Não se deve utilizar esta tag para links individuais ou seqüência de links que são apenas referências. Ela pode ser utilizada quantas vezes for necessário na página, contando que sejam links integrantes de um menu.

section no HTML 5

Assim como dividíamos a página em blocos de conteúdo com divs, faremos o mesmo com o section. Com o diferencial de que a utilização deste elemento é semântica. A seção precisa ter um significado como conteúdo.

Se a página é dividia em dois grandes blocos, um à esquerda englobando textos e um à direita com anúncios, utilize divs. A section será utilizada quando você for dividir o conteúdo entre “web design” e “web master”. Vejamos um exemplo:


<div>
         <section>   
           <h4>Web Design</h4>       
            <article>
              <h2>Título</h2> 
            <p>Texto </p>            
            </article>           
          </section>
         <section>   
           <h4>Web Master</h4>

            <article>
              <h2>Título</h2> 
            <p>Texto </p>            
            </article>
          </section>
</div>

É possível também aninhar sections.


<section>   
<h4>Web Design</h4>
            <article>
              <h2>Título</h2> 
            <p>Texto </p>            
            </article>
            <section>
    <h6>Mais artigos</h6>  
            <ul>
            <li><a href="#" title="Donec ac elit">Donec ac elit</a></li>
            <li><a href="#" title="Lorem impsum amet">Lorem impsum amet</a></li>
            <li><a href="#" title="Donec ac elit">Donec ac elit</a></li>
            <li><a href="#" title="Lorem impsum amet">Lorem impsum amet</a></li>
            </ul>              
            </section>   
</section>

Toda section precisa de um cabeçalho, sejam h1-h6 ou header, e pode ter footer.

article No HTML 5

Para saber quando utilizar o article, isole o texto do resto da página. Se ele continuar fazendo sentido, estão use article. A utilização básica é para notícias, artigos e comentários. Ela cria seções da página que podem ser referenciadas via RSS.


<article>
<h2>Artigo em destaque</h2> 
<figure><img src=”imagem.jpg” alt=”imagem”></figure>
            <p>Donec ac elit. Etiam posuere venenatis ante. Nun ullamcorper neque ac justo. Donec id alor purus. Aenean non enim eget diam aliquam tristique. Mauris pellentesque pulvinar dui. </p>            
<a href="#" title="Leia mais">leia mais</a>
</article>

O article e o section tem um relacionamento que pode confundir a princípio. Pois assim como é possível colocar article dentro de um section, o inverso também é permitido.

Uma forma de diferenciar é pensar que o section divide a página em blocos de conteúdo, enquanto o article engloba o conteúdo em si.

Não é permitido aninhar articles. Se dentro de um texto houver uma tabela de conteúdo, com um título e enxerto de outros artigos relacionados, então utilize o section, pois ele engloba seções relacionadas.

aside, figure E figcaption No HTML 5

Entre as tags aside você engloba informações adicionais ao conteúdo principal. Por exemplo, uma citação, anotações e afins. Ela esta gerando mais dúvidas sobre seu real papel do que funcionando.

A figure engloba bloco de dados que fazem sentido mesmo se retirados do contexto. Como é o caso de um gráfico, imagem ou trechos de um poema.

O figcaption trabalha como uma legenda para informar sobre os dados englobados por figure.

Conclusão

Com as tags apresentadas neste primeiro tutorial já é possível elevar o layout da página ao nível 5. A princípio desenvolver com HTML 5 será lento, pois é preciso racionalizar a utilização dos novos elementos. Mas é melhor começar a se acostumar desde já, pois a dupla HTML 5 e CSS 3 veio para ficar e esta ganhando terreno rapidamente.

Conheça O HTML 5 Parte 2

No primeiro artigo sobre HTML 5 foi mostrado a você como montar um layout semântico utilizando as novas tags.

Neste artigo apresentarei modificações introduzidas com o HTML 5 em formulários e as novas API de mídia e geolocalização, além da festejada canvas.

Formulário Em HTML 5

Tendo em vista que a principal via de entrada de dados em um website é através de formulários, as novidades desta nova versão do HTML ajudam a facilitar a vida dos desenvolvedores.

Agora é esperar que os navegadores resolvam dar suporte às novas funcionalidades. Pois até o momento, o Chrome suporta uns, o Opera outros e o Firefox quase nenhum. Sem falar no Internet Explorer…

A maioria dos atributos você já pode aplicar, pois eles não interferem significativamente no funcionamento do formulário caso não sejam suportados. Vamos a eles.

required

Para informar que um campo é de preenchimento obrigatório, basta adicionar o atributo required.



<input type=”text” name=”nome” required/>

Quando o formulário for submetido se o campo requerido não tiver informações, o navegador apresenta uma mensagem informando que o campo precisa ser preenchido e não permite que o formulário seja enviado.

placeholder

O texto do atributo placeholder é mostrado dentro do campo do formulário e quando este recebe foco, a mensagem desaparece. Reaparecendo caso o campo continue vazio.



<input type=”text” name=”nome” placeholder=”Digite seu nome completo”>

Mais um atributo de apoio para tornar os formulários mais claros e objetivos, substituindo a necessidade de soluções javascript para apresentar as dicas de preenchimento.

autofocus

O campo do formulário que tiver este atributo recebe o foco automaticamente quando a página é carregada. Utilizado pelo Google e pertinente já que acessamos o site justamente para digitar um termo no campo.



<input type=”text” name=”nome” autofocus>

Novos Tipos De Campo De Formulário No HTML 5

O HTML 5 introduz 13 novos tipos de campo de formulário:

  • search – para campos de busca;
  • number – disponibiliza setas para aumentar e diminuir os números sendo possível limitar os número máximo e mínimo;
  • range – botão deslizante;
  • color – apresenta uma paleta de cores;
  • tel –números de telefone;
  • url – endereço de uma página web;
  • email – endereço de e-mail;
  • date/month/week – disponibiliza no campo um calendário que permite navegar entre meses e anos;
  • time – para informar a hora;
  • datetime – permite configurar a data e hora;
  • datetime-local – data e hora local.

Formulário HTML5

Um grande avanço com a introdução desses novos tipos de campo além da formatação, é a validação dos dados por parte do navegador. Se os dados inseridos não estão no formato esperado, a submissão não ocorre. Com isso temos mais uma camada de garantia sobre a relevância dos dados submetidos.

O único navegador que oferece suporte a grande parte destes campos é o Opera 9.5+. No arquivo para download no final deste artigo existe um formulário já configurado que você pode testar no Opera e ter uma visão melhor do que foi explicado.

Elementos De Mídia No HTML 5

Antes da chegada do HTML 5, a inserção de vídeo na página era feita utilizando a tecnologia Flash, que além dos problemas de compatibilidade de versão tinha problemas com validação da página.

Utilizando HTML 5, o vídeo pode ser inserido na página com apenas uma linha de código:



<video width="640" height="360" src="video.mp4" ></video>
<video width="640" height="360" src="video.ogg" ></video>

É possível configurar a rodagem automática do vídeo quando a página carrega usando o atributo autoplay. Ou então apresentar os controles (play, stop) com o controls. Definir um menu de contexto, o pré-carregamento do vídeo, a repetição, adicionar marca d’agua. A lista de atributos é extensa e as promessas de interatividade também.

Você indica o vídeo a ser executado e o navegador se vira para encontrar o melhor codec para a execução.

Porém, o excitamento com esta novidade deve parar por aqui. Pois é em torno deste elemento que surge o ponto mais polêmico nesta nova versão do HTML. Os navegadores Mozilla e Opera querem implantar por padrão o codec Ogg Theora para a execução de vídeo nas páginas. Que é de domínio público e desempenha o papel tão bem quanto seu oponente, o H.264 que custa 5 milhões ao ano para ser licenciado, mas que é o formato de vídeo escolhido por grandes websites.

O Chrome, com o gigantismo do Google por trás, resolveu dar suporte aos dois e deixou os outros navegadores se engalfinhando.

É um debate que ainda vai gerar muita discussão e todos esperam que se resolva logo, já que isso atravanca o progresso da web. Não se espante se surgir um codec híbrido como solução.

Se você já quer utilizar esta novidade, mas também quer garantir que o vídeo esteja disponível caso não haja suporte por parte do navegador, pode ler este tutorial: HTML5: tag video com alternativa em Flash

O elemento audio funciona da mesma maneira e contém os mesmos dilemas que a video. Somente muda o nome e o propósito, que é a execução de áudio.

canvas

É um contêiner para mostrar gráficos. Basicamente você cria os gráficos com javascript e mostra eles dentro da canvas.

Oferece diversas propriedades para desenho diretamente no navegador: fillStyle (preenchimento), stroleStyle (cor da linha), lineWidth-lineHeight (tamanho da linha), lineTo, moveTo, closePath, drawImage (para inserir imagem) e diversos outros.

Um elemento bastante completo e com muitas possibilidades. É possível até criar um filtro para inverter as cores de uma imagem. E a possibilidade de interação com os gráficos é outro atrativo. Até jogo é possível criar utilizando canvas. Veja este exemplo: Canvascape – Experimenting With Textures

Apesar do suporte de todos os navegadores modernos ( menos IE) ainda existe uma certa inconsistência na interpretação dos valores para as propriedades do canvas entre eles.

geolocalization

Esta API possui especial utilidade em dispositivos móveis. Pois ela permite que você envie sua localização para um serviço online e receba em troca um mapa com locais de seu interesse perto de onde você esta. Para ficar em apenas uma possibilidade.

Apesar de prática, esta possibilidade levanta questões sobre privacidade. Por isso, antes de realizar a conexão com um servidor, o navegador informa que determinado endereço web deseja saber a sua localização. Oferece então a opção de permitir ou negar o envio desses dados.

Que tipo de informação será enviada para o servidor? Basicamente latitude, longitude e a precisão destas duas informações.

Pelos meus testes, o resultado foi bastante impreciso, pois ele acertou o país e o estado. Mas me identificou em uma cidade a pelo menos 500km de distância da minha localização real.

Com o tempo os resultados serão mais exatos conforme as informações forem coletadas e o desenvolvimento for refinado. Por hora, o geolocalization serve mais para experimentações.

Conclusão

A velocidade com que a comunidade de desenvolvedores esta implementando as novidades do HTML 5 e o apoio de grandes sites ao utilizarem os novos elementos mostram o estado de maturidade da internet.

Temos pressa em tornar o ambiente online mais eficiente e útil. Os dois tutoriais sobre HTML 5 apresentados aqui devem ser apenas o inicio dos seus estudos para manter-se à frente quando o assunto é qualidade e relevância dos serviços prestados.

Anúncios

Deixe um comentário

Faça o login usando um destes métodos para comentar:

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