HTML5 e CSS3 no Internet Explorer – Parte 03

No artigo anterior mostrei um pouco do funcionamento do Media Query, DOM Range e Grid System. Todos com exemplos que podem ser facilmente adaptados à sua necessidade. Agora, mostrarei alguns outros recursos relevantes incorporados ao HTML5.

Tags semânticas HTML5

O HTML5 introduziu novos elementos de marcação, mais lógicos, com o fim de facilitar a indexação do conteúdo pelos mecanismos de busca, além de permitir um código mais limpo e acessível. Estas são as tags semânticas, que permitem que determinemos, dentro de um documento html, quais são as partes mais relevantes, quais possuem informações complementares, navegação, etc.

<article> – É usado para demarcar o conteúdo principal do documento HTML. Admite-se também que outras tags article estejam contidas dentro de uma principal.
<section> – Determina uma área genérica dentro de um article.
<nav> – Área do documento HTML responsável pela navegação do site. É importante frisar que apenas a navegação principal deve estar englobada nesta área, não recomendado para outros links dispostos no site.
<aside> – Usado para delimitar uma área do documento HTML relacionado diretamente ao conteúdo principal. Pode ser uma sidebar, uma citação, etc.
<hgroup> – Usado para agrupar elementos de cabeçalho (h1 a h6). Desta forma, é possível agrupar de uma maneira mais limpa e clara os cabeçalhos com menor importância (de h2 em diante), subordinados a um maior (h1).
<header> – Identifica o cabeçalho do documento HTML. Geralmente é onde contem a navegação principal e o logo, ou seja, as informações principais para a identificação do site.
<footer> – Demarca o rodapé do documento HTML.
<figure> – Engloba uma imagem no qual ilustra o documento. Ou seja, admite-se que use tags <img> dentro desta tag.
<figcaption> – Usado dentro de uma tag figure, serve para criar a descrição (legenda) da imagem.
<mark> – Usado para destacar uma parte do texto contido no documento.

Exemplo de uso:

Consideremos a seguinte estrutura de documento

Aos moldes até então praticados, colocaríamos cada bloco acima descrito em DIVs com seus respectivos estilos, seria algo como:

<div class="container">
 <div id="header">CABEÇALHO</div>
    
    <div class="pagecentral">
     
        <div id="menu">
         <ul>
             <li>item</li>
                <li>item</li>
            </ul>
        </div>
        
        <div id="central">CONTEÚDO</div>
        
        <div id="sidebar">SIDEBAR</div>
    </div>
    
    <div id="footer">RODAPÉ</div>
</div>

De um certo modo, está correto. Se você fizer a folha de estilo de acordo com o que foi proposto no layout, o resultado final será visualmente satisfatório. Entretanto, referindo-se a código, pensemos, por exemplo, nos algoritmos de indexação de páginas para busca, ou até mesmo em quem dará manutenção no código; como saberemos as partes mais importantes do documento, o que de fato está presente ali de forma muito mais direta?

A resposta seria: usando as tags semânticas HTML5. Visualmente, o resultado seria o mesmo; porém, só se tem a ganhar com esta nova prática. Vejamos como seria esta mesma estrutura com as tags semânticas:

<div class="container">
 <header>CABEÇALHO</header>
    
    <div class="pagecentral">
     
        <nav>
         <ul>
             <li>item</li>
                <li>item</li>
            </ul>
        </nav>
        
        <article>CONTEUDO</article>
        
        <aside>SIDEBAR</aside>
    </div>
    
    <footer>RODAPÉ</footer>
</div>

O que mudou e o porquê já foi dito anteriormente. Agora, um site, ou uma aplicação web, não resulta apenas nisso. Vimos muitas outras tags acima. Vejamos agora como empregá-las.

Imaginemos que a área do conteúdo principal teria uma estrutura similar a essa:

Repare que o exemplo é um modelo de um artigo, com um título e um subtítulo. Abaixo deles tem uma foto com uma descrição, o texto em si e uma área com um texto em destaque. Construiremos por etapas. Desde já, considere que estamos trabalhando apenas com o HTML, a parte de CSS não será abordada.

Comecemos com os títulos que compreendem uma região de cabeçalhos (h1-h6). Neste ponto, podemos usar o hgroup para juntar estas linhas:

<hgroup>
 <h1>Lorem ipsum dolor sit amet<h1>
 <h2>Mauris venenatis scelerisque risus, id sollicitudin turpis dapibus</h2>
</hroup>

Abaixo do título temos uma imagem e nela temos uma descrição. Normalmente usamos a tag IMG e dessa vez não será diferente. Mas neste caso, encapsularemos a descrição em um mesmo container, que conterá a imagem, neste caso, a tag FIGURE:

<figure>
 <img src="caminho/da/imagem/foto.jpg">
 <figcaption>Donec elementum interdum vehicula</figcaption>
</figure>

E por fim, a região compreendia pelo conteúdo. Para o texto comum, não há grande necessidade de se fazer uma marcação especial, afinal, ele já está vinculado à tag ARTICLE, mas para termos um controle melhor, coloquemos dentro de um SECTION. E mais, temos uma área em destaque, que poderia estar contida no meio do texto, logo, teríamos um código similar ao que veremos abaixo:

<section class="texto">

 <p>Aliquam et eros eget justo suscipit hendrerit. Integer quis metus ut odio iaculis dapibus. Integer blandit, est eget dignissim rhoncus, urna sem adipiscing mauris, ut iaculis magna ipsum ut est.</p>

 <p>Proin aliquet vehicula nisi, vel ornare magna commodo ut. Donec aliquet bibendum magna non hendrerit. Pellentesque convallis tincidunt suscipit. Praesent nec arcu a enim mattis rhoncus venenatis ac nibh. Sed lacinia, erat non sollicitudin sollicitudin, dolor justo molestie sem, at auctor nibh erat a enim. Pellentesque sit amet sodales sem.</p>

 <section class="destaque">
  <p>Duis dictum metus eu tortor pulvinar dapibus. Praesent blandit odio eu nisi aliquet ac lacinia lacus faucibus. Suspendisse rhoncus nisl sed nulla blandit auctor.</p>
 </section>

</section>

Geolocalização

Com a permissão do usuário, é possível conseguir seus dados de localização (latitude e longitude). A localização se dá por meio de IP e dados da rede Wifi (quando disponíveis).

A Geolocation API tem dois métodos principais (em javascript). O primeiro captura a posição atual do usuário pelos dados do browser:

navigator.geolocation.getCurrentPosition (callback_sucesso, [callback_erro], [opcoes]);

E no caso do watchPosition, funciona da mesma maneira que o getCurrentPosition, com a diferença de que este método é acionado toda vez que as coordenadas são alteradas:

navigator.geolocation.watchPosition (callback_sucesso, [callback_erro], [opcoes]);

Em ambos os métodos, são passados três parâmetros:

callback_sucesso – Método que será chamado quando os dados de posicionamento forem encontrados.
callback_erro – Chamado quando acontece algum erro. Este método é opcional, mas recomenda-se o uso.
opcoes – Parâmetros extras passados em padrão JSON. Entre eles:

enableHighAccuracy: valor booleano (true ou false), que determina se os dados precisam, necessariamente, capturar os dados de localização com alta precisão. Este parametro pode não fazer a diferença, dependendo do seu hardware.
maximumAge: valor em milissegundos que assegura de que os dados da posição atual tenham aquele tempo de existência.
timeout: tempo em milissegundos que assegura um tempo máximo para que o browser capture os dados de localização. Se este tempo expirar, o método especificado no callback_erro será invocado.

O formato no final ficaria parecido com o seguinte:

{enableHighAccuracy:true, maximumAge:30000, timeout:27000}

Callbacks

Vejamos agora como tratar as funções de retorno da execução. Usaremos uma função de exemplo chamada sucesso e a outra erro para, respectivamente, callback_sucesso e callback_erro.

Começando com a função sucesso(), junto a ela passaremos um parâmetro chamado posicao, que ficará responsável em receber os dados das coordenadas.

function sucesso(posicao)
{
}

Este parâmetro receberá os dados no seguinte formato:

[argumento].coord.propriedade

Sendo os seguintes

coord.latitude: a latitude atual;
coord.longitude: a longitude atual;
coord.accuracy: valor em metros da margem de erro de precisão;
coord.speed: velocidade de deslocamento lidos em metros por segundo;
coord.altitude: a altitude atual;
coord.altitudeAccuracy: a margem de erro em metros da precisão do valor da altura.

E por fim, o método de tratamento de erro, que passará o argumento que chamaremos de err.

function erro(err)
{
}

E a este parâmetro serão passadas duas propriedades:

[argumento].error.propriedade

error.code: código do erro retornado

error.message: mensagem do erro ocorrido

Faremos um exemplo de como funciona esta API, integrando a localização atual com o Bing Maps. Antes de mais nada, precisamos de importar a API do Bing Maps ao nosso documento HTML:

<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

Em seguida, começaremos com o HTML:

<div id="bingMapa" style="position:absolute;width:100%; height:100%"></div>

E abaixo dele colocaremos o código javascript. Começaremos com as variáveis de construção do mapa:

  var pin;
var mapa;
var pos;

Em seguida, faremos a chamada da API Geolocation para capturarmos os dados de localização:

gpsdata = navigator.geolocation.watchPosition(sucesso, erro, {enableHighAccuracy:true, maximumAge:30000, timeout:27000});

Implementaremos os callbacks:

function sucesso(posicao)
{
 pos = posicao;
 monta_mapa();
} 

function erro(err)
{
 alert(err.message);
}

Na função sucesso, chamamos uma função monta_mapa(), que ficará responsável em acoplar o mapa ao div que criamos no HTML anteriormente, além de passar para um nível global os dados de localização.


function monta_mapa()
{
 mapa = new Microsoft.Maps.Map(document.getElementById("bingMapa"), 
 {
  credentials:"chave de desenvolvedor bing",
  center: new Microsoft.Maps.Location(pos.coords.latitude, pos.coords.longitude),
 zoom: 15
 });

 pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(pos.coords.latitude, pos.coords.longitude), {text: ""});

 mapa.entities.push(pin);
}

Além de montarmos o mapa, adicionamos um pin no local atual. Execute em seu brower agora.

Formulários

Novos campos de formulário foram inseridos no HTML5. Antes, para podermos ter uma formatação específica dentro de um campo, precisávamos de apelar para o Javascript, que nem sempre funcionava da maneira que a gente queria.

Novos campos de formulário

Email – Campo de texto com validação nativa para e-mails. Atribui-se a pseudoclasse :invalido, caso não esteja no formato.
URL – Mesmo funcionamento do campo de email, com a diferença da validação ser pela url.
Number – Campo que só admite valores numéricos. Automaticamente adiciona um controle de incremento no final do campo. Três novos atributos podem ser configurados: min, max e step, que determina o valor mínimo e máximo admitidos e o valor de incremento respectivamente.
TEL – Permite a inserção de dados que correspondam a um um número de telefone.
Search – Cria uma caixa de busca com as bordas arredondadas e com um botão de limpar tudo automaticamente inserido.

Novos atributos para os inputs

Placeholder

Insere um valor inicial para fins de instrução de preenchimento do campo. O texto é automaticamente removido quando o campo entra em foco e não é válido como valor de preenchimento.

Para o uso:

<input type=”text” placeholder=”Digite aqui seu nome” .... />

Pattern

Determina um padrão de validação do campo através de expressões regulares.

Required

Atributo que determina que o campo é de preenchimento obrigatório.

Pseudoclasses CSS

:valid/:invalid

Caso o campo não atenda ao padrão proposto pelo campo (por exemplo, digitar um email inválido no input email), é atribuído, automaticamente, à pseudoclasse: invalida o campo.

Exemplo de uso:

input:valid {border:solid lime;}
input:invalid {border:solid red;}

:required/:optional

Nas mesmas condições do :valid/:invalid, caso um campo possua o atributo required, é atribuído à pseduclasse :required ao campo. Caso contrário, atribui-se ao :optional.

input:optional {border:dashed gray;}

É possível também combinar os atributos, como no exemplo abaixo:

input:required:invalid {border:yellow solid;}

Há muitos mais a ser comentado no que diz respeito ao HTML5, muitos novos recursos que trazem mais interatividade e uma experiência muito mais rica com a navegação web, rodando nativamente no Internet Explorer. Veja o que há de novo e de revolucionário no test drive do IE10.

Conheça o HTML & JavaScript Center e tire o máximo de proveito nas suas aplicações!

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: