Avaliação do Usuário

Estrela inativaEstrela inativaEstrela inativaEstrela inativaEstrela inativa

Hoje em dia muitos sites comportam-se como aplicativos para celular, já que serão utilizados basicamente em dispositivos móveis.

 

E uma grande facilidade para o usuário é que, ao invés de solicitar que ele digite o endereço, você obtenha-o diretamente da localização atual dele. Ok, pode ser que ele queira colocar o endereço da casa dele e não esteja em casa nesse momento, mas imagine que a aplicação seja para, por exemplo, enviar fotos e identificar de onde ela foi tirada. ;)

 

O código abaixo é de uma página completa que consegue acessar os dados de GPS do dispositivo móvel e enviá-los ao Google Maps para obter o endereço a partir da latitude e longitude atual.

 

Note que será preciso dar permissão para que a página possa acessar seus dados de localização.

 

{code}

<!DOCTYPE html>

<html>

<head>

<title>Pega endereço</title>

</head>

<body onload="getLocation()">

<form action="vai_para_algum_lugar.php" method="post">

<label class="active" for="endereco">Endereço</label>

<input type="text" id="endereco" size="999" name="endereco">

</form>

</body>

 

<!-- Script de Endereço -->

<script>

function getLocation()

{

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition,showError);

}

else {

x.innerHTML="Seu browser não suporta Geolocalização.";

}

function showPosition(position) {

xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

var doc = xmlhttp.responseXML;

var dados = doc.childNodes[0];

var end = document.getElementById('endereco');

for(var i=0;i<dados.children.length;i++) {

var dados = doc.childNodes[i];

var status = dados.getElementsByTagName("formatted_address");

end.value = status[0].textContent.toString();

}

}

}

var url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=" + position.coords.latitude + "," + position.coords.longitude;

xmlhttp.open("GET", url, true);

xmlhttp.send();

}

function showError(error)

{

var end = document.getElementById('endereco');

switch(error.code)

{

case error.PERMISSION_DENIED:

end.value = "Não tenho permissão para acessar GPS"

break;

case error.POSITION_UNAVAILABLE:

end.value = "GPS retornou que a posição não está disponível"

break;

case error.TIMEOUT:

end.value = "GPS retornou timeout"

break;

case error.UNKNOWN_ERROR:

end.value = "GPS retornou erro desconhecido"

break;

}

}

}

</script>

</html>

{/code}

 

Você pode destrinchar o código fonte, mas os principais pontos são:

 

{code}

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition,showError);

} else {

x.innerHTML= "Seu browser não suporta Geolocalização.";

}

{/code}

 

Com esse trecho verificamos se há uma geolocalização a ser obtida (no if) e se houver obtemos os dados, chamando a função showPosition. Caso não haja, ou seja, ocorra algum erro chamamos a função showError.

 

Se o navegador não suportar geolocalização navigator.geolocation retornará false, mostrando a mensagem de erro"Seu browser não suporta Geolocalização.".

 

O trecho abaixo recebe a geolocalização obtida pelo GPS e armazena na variável position, onde, position.coords.latitude conterá a latitude e position.coords.longitude a longitude.

 

{code}

function showPosition(position) {

xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

var doc = xmlhttp.responseXML;

var dados = doc.childNodes[0];

var end = document.getElementById('endereco');

for(var i=0;i<dados.children.length;i++) {

var dados = doc.childNodes[i];

var status = dados.getElementsByTagName("formatted_address");

end.value = status[0].textContent.toString();

}

}

}

var url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=" + position.coords.latitude + "," + position.coords.longitude;

xmlhttp.open("GET", url, true);

xmlhttp.send();

}

{/code}

 

A ideia aqui foi gerar uma URL para que o Google Maps retorne os dados do que se encontra na posição geográfica em formato XML.

 

O código abaixo cria a URL e obtém o XML que é retornado através dela:

 

{code}

xmlhttp = new XMLHttpRequest();

.

.

.

var url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=" + position.coords.latitude + "," + position.coords.longitude;

xmlhttp.open("GET", url, true);

xmlhttp.send();

{/code}

 

O trecho abaixo foi omitido acima ;), é com ele que decodificamos o XML, pegado apenas o campo formatted_address do que for retornado:

 

{code}

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

var doc = xmlhttp.responseXML;

var dados = doc.childNodes[0];

var end = document.getElementById('endereco');

for(var i=0;i<dados.children.length;i++) {

var dados = doc.childNodes[i];

var status = dados.getElementsByTagName("formatted_address");

end.value = status[0].textContent.toString();

}

}

}

{/code}

 

Para testar no Chrome para simular uma posição pressione CTRL + SHIFT + I, selecione a aba Sensors abaixo do painel e escolha alguma Geolocation.

 

 

 

Depois é só recarregar (F5) a página.

Avaliação do Usuário

Estrela inativaEstrela inativaEstrela inativaEstrela inativaEstrela inativa

Você pode usar o método setInterval de um objeto window para ajustar um intervalo para as atualizações e uma função Javascript para invocar essa atualização.

 

Um código exemplo é o que segue:

 

{code}

<html>

<head>

<script language="javascript">

var counter = 0;

window.setInterval("refreshDiv()", 5000);

function refreshDiv(){

counter = counter + 1;

document.getElementById("teste").innerHTML = "Testando... " + counter;

}

</script>

</head>

<body>

<div id="teste">

Testando

</div>

<div id="estatico">

Parte estática da página.

</div>

</body>

</html>

{/code}

 

 

Esse código criará um contador dentro da DIV que será atualizado a cada 5 segudos (5000 milissegundos).

Avaliação do Usuário

Estrela inativaEstrela inativaEstrela inativaEstrela inativaEstrela inativa

O HTML5 não é tão novo, mas ainda existem várias funcionalidades que muitos desenvolvedores desconhecem, e uma delas é o Web Notifications.

Web Notifications é uma simples API em Javascript utilizada para exibir mensagens para o usuário e funciona mesmo que a página ou o navegador não estejam visíveis. A mensagem é exibida fora do browser e acima de qualquer outro programa aberto pelo usuário, então mesmo que o usuário esteja trabalhando em outra janela ele visualizará a mensagem. Veja uma demonstração:

No entanto, deve-se ficar atento quanto a compatiblidade dos navegadores. As versões mais atuais dos navegadores Firefox, Chrome, Opera e Safari já são compatíveis, enquanto nenhuma versão do Internet Explorer possui suporte. Dados completos e atualizados podem ser obtidos em http://caniuse.com/#feat=notifications.

Segue uma exemplo básico e comentado do uso da API em Javascript:

{code}

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="UTF-8">

<title>Web notification</title>

</head>

<body>

<button onclick="notificarUsuario()">Testar</button>

<script>

function notificarUsuario(){

// Caso window.Notification não exista, quer dizer que o browser não possui suporte a web notifications, então cancela a execução

if(!window.Notification){

return false;

}

 

// Função utilizada para enviar a notificação para o usuário

var notificar = function(){

var tituloMensagem = "Atenção usuário Fulano!";

var icone = "http://www.seucurso.com.br/images/stories/logo.png";

var mensagem = "Você recebeu uma nova mensagem em seu email";

return new Notification(tituloMensagem,{

icon : icone,

body : mensagem

});

};

 

// Verifica se existe a permissão para exibir a notificação; caso ainda não exista ("default"), então solicita permissão.

// Existem três estados para a permissão:

// "default" => o usuário ainda não deu nem negou permissão (neste caso deve ser feita a solicitação da permissão)

// "denied" => permissão negada (como o usuário não deu permissão, o web notifications não irá funcionar)

// "granted" => permissão concedida

 

// A permissão já foi concedida, então pode enviar a notificação

if(Notification.permission==="granted"){

notificar();

}else if(Notification.permission==="default"){

// Solicita a permissão e caso o usuário conceda, envia a notificação

Notification.requestPermission(function(permission){

if(permission=="granted"){

notificar();

}

});

}

};

</script>

</body>

</html>

{/code}

Mais opções para o web notifications podem ser obtidas em https://developer.mozilla.org/en-US/docs/Web/API/Notification/Using_Web_Notifications

Avaliação do Usuário

Estrela inativaEstrela inativaEstrela inativaEstrela inativaEstrela inativa

Apenas uma sugestão de como fazer isso, sendo que há literalmente milhares:

 

Entre suas tags head inclua o seguinte javascript:

 

{code}

<script>

window.onload=function(){

setInterval("document.getElementsByTagName('iframe')[0].src='imagem.jpg'", 15000)

}

</script>

{/code}

 

Esse script será executado quando a página for carregada e atualizará o iFrame a cada 15 segundos (o tempo é informado em milissegundos).

 

No corpo do HTML use um iFrame:

 

{code}

<iframe src="imagem.jpg" style="width: 384px; height: 288px;" frameborder="0" scrolling="no"></iframe>

{/code}

 

 

Agora é só ajustar para suas necessidades.

Avaliação do Usuário

Estrela inativaEstrela inativaEstrela inativaEstrela inativaEstrela inativa

Alguns sites em que entramos não nos permitem copiar seu conteúdo, devido sua exclusividade, ou direitos autorais. Isso é um conceito um pouco antigo, muito comum nos anos 2000, com nesse tutorial, iremos aprender como essa função é capaz.

 

Código da página:

{code}

 

 

function mensagem(){

alert('Conteúdo Bloqueado!');

return false;

}

 

function bloquearCopia(Event){

var Event = Event ? Event : window.event;

var tecla = (Event.keyCode) ? Event.keyCode : Event.which;

if(tecla == 17){

mensagem();

}

}

 

 

 

O Direito, como todas as ciências, vem sofrendo, nos últimos anos deste século, uma extraordinária evolução, mercê das máquinas cibernéticas, inventadas há tão pouco tempo, mas que produziram, sem dúvida, uma revolução instantânea, que marcará este século, como o da civilização cibernética, não no sentido de submissão a ela, mas de dominação sobre ela.

A cibernética nasceu com Norbert Wiener. Aos três anos, lia e escrevia com total desembaraço, graduando-se em matemática. Aos quinze anos, dedicou-se aos estudos de filosofia e doutorou-se aos dezoito anos. Este o brevíssimo perfil do genial cientista que viria a transformar o mundo em que vivemos, tornando a velocidade e a informação elementos inseparáveis da nova ciência que surgia.

A partir da década dos anos 40, Wiener e outros cientistas concluíram que "o conjunto de problemas centrados no controle e na comunicação, tanto no tecido vivo quanto na máquina, apresentavam uma unidade essencial." Esse renomado estudioso, com a assistência de seu grupo de estudos, denominou o campo inteiro da teoria da comunicação e do controle, tanto na máquina, como no animal, de CIBERNÉTICA, ou como prefere Dinio de Santis Garcia, esta é a ciência do controle e da comunicação nos seres vivos, na sociedade e nas máquinas. Trata-se, na verdade, de uma interação homem – sociedade – máquina.

 

 

Leia mais: http://jus.com.br/artigos/1756/a-informatica-e-o-mundo-moderno#ixzz2qz7vq0wx

 

 

 

document.onkeypress = bloquearCopia;

document.onkeydown = bloquearCopia;

document.oncontextmenu = mensagem;

 

 

 

 

 

{/code}

Entendendo o código:

{code}

 

function mensagem(){

alert('Conteúdo Bloqueado!');

return false;

}

function bloquearCopia(Event){

var Event = Event ? Event : window.event;

var tecla = (Event.keyCode) ? Event.keyCode : Event.which;

if(tecla == 17){

mensagem();

}

}

 

 

 

{/code}

 

Cria a função para verificar se a tecla Ctrl foi pressionada, caso ela seja pressionada, exibe uma mensagem de alerta com a mensagem (“Conteudo Bloqueado!”)

 

{code}

 

document.onkeypress = bloquearCopia;

document.onkeydown = bloquearCopia;

document.oncontextmenu = mensagem;

 

 

{/code}

 

Chama a função para testar se a tecla Ctrl foi pressionada, joga a mensagem na tela, e joga na memória a mensagem exibida, quando pressionado Ctrl+V, exibe amensagem (“Conteúdo Bloqueado!”)

 

 

Resultado: