Arquivo da tag: HTML 5

Drag and drop (Dnd) com HTML5

hrml5draganddropUm recurso bacana que é visto em alguns site é o recurso de selecionar um item e arrastá-lo para outra área na mesma página. Este recurso é chamado de Drag and drop, e no HTML5 ele é nativo, dispensando o uso de bibliotecas de terceiros.
Para iniciar, precisamos definir um elemento HTML como “de origem” que será o elemento arrastável, e um elemento de destino, que receberá o elemento de origem.
O elemento HTML que deseja ser arrastável deve manter a propriedade draggable habilitada (true).
Por exemplo, desejo que cada item da lista abaixo seja arrastável:
<ul id="ulOpcoes">
    <li draggable="true">Opção 1</li>
    <li draggable="true">Opção 2</li>
    <li draggable="true">Opção 3</li>
    <li draggable="true">Opção 4</li>
    <li draggable="true">Opção 5</li>
    <li draggable="true">Opção 6</li>
</ul>
Um elemento arrastável (draggable=true) tem os seguintes eventos:
  • dragstart: O elemento começou a ser arrastado. A função que vai tratar o evento recebe um parâmetro, que há uma referência ao elemento sendo arrastado.
  • drag: O objeto está sendo arrastado.
  • dragend: A ação de arrastar terminou.

Esses eventos devem ser associados a uma função para tratá-los.

</span></div>
<ul id="ulOpcoes">
    <li draggable="true" ondragstart="onDragStart(event)">Opção 1</li>
    <li draggable="true" ondragstart="onDragStart(event)">Opção 2</li>
    ...

Usando Javascript, podemos associar os eventos a cada LI, sem a necessidade de fazer manualmente como acima.

window.onload = function () {

    //Após a carga completa da página, cada LI é associado à função onDragStart.
    var lis = document.querySelectorAll("#ulOpcoes > li");
    for (var i = 0; i < lis.length; i++) {

        lis[i].addEventListener("dragstart", function (event) { onDragStart(event) });
    }
}

function onDragStart(event) {

    event.dataTransfer.setData("Text", event.target.innerHTML);
}

A função que vai tratar o evento ondragstart recebe um parâmetro, que há uma referência ao elemento sendo arrastado através da propriedade target. E a propriedade dataTransfer, com o uso do método setData, oferece meios de armazenar dados a serem transmitidos ao destino. O primeiro parâmetro da função setData é o tipo mime da informação a ser armazenada (no exemplo, Text) e o segundo parâmetro é a informação (no exemplo, guardei o texto contido dentro do LI). Posteriormente será o usado o tipo mime para recuperar a informação.

Com a origem totalmente programa, agora é hora de pensar no destino. O elemento de destino não precisa de nenhuma propriedade específica, como o de origem. Mas precisa de eventos e funções que saibam como receber o que foi arrastado até ele.

O elemento de destino tem os seguintes eventos:
  • dragenter: O objeto sendo arrastado entrou no objeto de destino.
  • dragleave: O objeto sendo arrastado deixou o objeto de destino.
  • dragover: O objeto sendo arrastado se move sobre o objeto de destino.
  • drop: O objeto sendo arrastado foi solto sobre o objeto de destino.

Neste exemplo, o elemento de destino será outra lista, que deverá receber o texto do item da lista de origem que foi arrastado até ela.

<ul id="ulOpcoesSelecionadas" ondragover="onDragOver(event)" ondrop="onDrop(event)">
</ul>

O evento ondrop será o responsável por tratar e receber o item arrastável. A função associada ao evento recebe por parâmetro informações sobre o destino, e também a informação guardada na propriedade dataTransfer armazenada anteriormente sob o tipo mime. O método getData precisa do tipo mime armazenado para poder recuperar a informação (como no exemplo a seguir, Text).

function onDrop(event) {
    var li = document.createElement("li")
    li.innerHTML = event.dataTransfer.getData("Text");
    document.getElementById('ulOpcoesSelecionadas').appendChild(li);
}

E por fim, para que tudo funcione corretamente, é necessário mudar o comportamento padrão do navegador. Por padrão, dados/elementos não podem ser soltos em outros elementos. Para permitir um “drop”, devemos mudar o tratamento padrão do elemento de destino.

E isso é feito na função que trata o evento ondragover do elemento de destino, que é disparada quando o objeto sendo arrastado se move sobre o objeto de destino.

function onDragOver(event)
{
    event.preventDefault();
}

O evento envia a função informações sobre o destino, e o método preventDefault() do parâmetro cancela o comportamento padrão do navegador, e assim permitindo o drop.

O exemplo completo e com exemplos de uso de todos os eventos pode ser baixado aqui.

E é isso….

 

Até mais.

Usando a API de Geolocalização da Open Web Plataform (HTML5 e seus amigos)

HTML5_Logo_512A API Geolocation da Open Web Plataform  permite via Javascript solicitar ao navegador a localização real do usuário. As informações de localização podem ser usadas para exibir mapas, direções e outras informações relevantes a posição global do usuário.

Os navegadores que suportam a API definem a propriedade navigator.geolocation que oferece três métodos:

  1. navigator.geolocation.getCurrentPosition(): solicita a posição atual do usuário.
  2. navigator.geolocation.watchPosition(): solicita a posição atual do usuário e continua a monitorar.
  3. navigator.geolocation.clearWatch(): para de monitorar a posição do usuário.

Abaixo demonstro um pequeno exemplo de como recuperar a geolocalização do usuário e mostrar um mapa no Google e no Bing Maps com a respectiva localização do usuário.


//Usando do método getCurrentPosition para recuperar a localização atual do usuário.
navigator.geolocation.getCurrentPosition(function (posicao) { localizacao(posicao) },
            function (erro) { mostraErro(erro) });

//Função de Callback do sucesso do método getCurrentPosition
function localizacao(posicao) {
    alert('Lat: ' + posicao.coords.latitude + ' ' + 'Lon: ' + posicao.coords.longitude);

    //Abrindo o mapa no bing maps
    window.open("http://www.bing.com/maps/?v=2&where1=" + posicao.coords.latitude + "," +
posicao.coords.longitude + "&encType=1","");

    //Abrindo o mapa no google maps
    window.open("http://maps.googleapis.com/maps/api/staticmap?center=" +
posicao.coords.latitude + "," + posicao.coords.longitude +
"&zoom=14&size=400x300&sensor=false");
}

//Função de Callback para falhas método getCurrentPosition
function mostraErro(erro)
{
    switch (erro.code) {
        case erro.PERMISSION_DENIED:
            alert("user did not share geolocation data");
            break;
        case erro.POSITION_UNAVAILABLE:
            alert("could not detect current position");
            break;
        case erro.TIMEOUT:
            alert("retrieving position timed out");
            break;
        default:
            alert("unknown error");
            break;
    }
}

Infelizmente não é exato pois, pois a API usa informações dos provedores de internet a qual o usuário está conectado.

E é isso. As possibilidades são várias.

Uma simples comparação entre um layout em XHTML 1 e HTML 5

Olá pessoal.

O HTML 5 trouxe novas tags para deixar nosso código semanticamente mais organizado. Ao invés de usar a tag DIV para demarcar as diversas áreas da página, agora temos tags específicas para isso: section, header, footer, article, aside, nav…e outras.

Vejamos uma comparação entre um layout feito em XHTML 1 e outro feito em HTML 5.

Em XHTML 1:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Layout em XHTML 1</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
        body {margin: 0px;}
        #divCorpo {margin: 0 auto; width: 975px;}
        #divTopo {width: 100%; height: 150px; background-color: Orange; }
        #divMenu1 { width: 100%; height: 50px; background-color: Aqua;}
        #divMenu2 {width: 150px; min-height: 350px; background-color: Aqua; float: left;}
        #divConteudo {width: 825px; min-height: 350px; background-color: Yellow; float: left; }
        #divRodape {width: 100%; height: 50px; background-color: Gray; clear: both;}
    </style>
</head>
<body>
    <div id="divCorpo">
        <div id="divTopo">
            Topo (div)
        </div>
        <div id="divMenu1">
            Menu 1 (div)
        </div>
        <div id="divMenu2">
            Menu 2 (div)
        </div>
        <div id="divConteudo">
        (div)
            <h1>
                Título do conteúdo (h1)....</h1>

             Conteúdo (div)
        </div>
        <div id="divRodape">
            Rodapé (div)
        </div>
    </div>
</body>
</html>

Em HTML 5:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Layout em HTML 5</title>
    <meta charset="utf-8" />
    <style type="text/css">
        body {margin: 0px;}
        #divCorpo {margin: 0 auto; width: 975px;}
        #headerTopo {width: 100%; height: 150px; background-color: Orange; }
        #navMenu1 {width: 100%; height: 50px; background-color: Aqua; }
        #navMenu2 {width: 150px; min-height: 380px; background-color: Aqua; float: left;}
        #sectionConteudo {width: 825px; min-height: 350px; background-color: Yellow; float: left; }
        #footerRodape {width: 100%; height: 50px; background-color: Gray; clear: both;}
        #headerConteudo{ border: 1px solid orange; min-height: 60px; }
        #articleConteudo {border: 1px solid orange; min-height: 200px;}
        #footerConteudo {border: 1px solid orange; height:50px;}
    </style>
</head>
<body>
    <div id="divCorpo">
        <header id="headerTopo">
        Topo (header)
        </header>
        <nav id="navMenu1">
         Menu 1 (nav)
        </nav>
        <nav id="navMenu2">
        Menu 2 (nav)
        </nav>
        <section id="sectionConteudo">
        (section)
            <header id="headerConteudo">
                (header)
                <h1>
                    Título do conteúdo(h1)....</h1>
            </header>
             <article id="articleConteudo">
                 Conteúdo (article)
             </article>

             <footer id="footerConteudo">
                Rodapé do conteúdo (footer)
             </footer>

        </section>
        <footer id="footerRodape">
        Rodapé (footer)
        </footer>
    </div>
</body>
</html

Notem que o CSS que organiza a disposição das DIVS para a versão XHTML 1.0 é praticamente o mesmo para organizar as novas tags do HTML 5. O que muda mesmo é o uso das novas tags que deixa o código semanticamente mais organizado, fica mais fácil identificar o que determinada área no código representa na estrutura da página.

Abração….

Habilitando suporte para HTML 5 no VisualStudio 2010

Para habilitar suporte para HTML 5 no VisualStudio 2010 é necessário instalar o Service Pack 1, disponível em

http://www.microsoft.com/download/en/details.aspx?id=23691.

Após sua instalação, abra o Visual Studio e no menu TOOLS > OPTIONS, e selecione grupo HTML Editor selecionando o item VALIDATION, marcando o TARGET como HTML5.

Ao criar um novo arquivo o intelisense mostra as novas tags do HTML 5.

Enquanto ainda não decoramos as novas implementações do HTML 5, é possível facilmente fazer sua validação por meio da barra HTML Sourcing Editing de validação do VS.

Agora é só brincar.