O que é Javascript? É perigoso permitir Javascript no navegador? Quais os riscos inerentes a ele e quais formas de se proteger?

Javascript é uma linguagem de programação usada por sites para adicionar recursos dinâmicos em páginas de internet. O Javascript permite ao desenvolvedor do site muita flexibilidade. Um exemplo é aquele botao que permite aumentar ou diminuir as fontes existentes em varios sites.

Há tantas possibilidades de uso de Javascript que seria impossível citar todas. Há até mesmo joguinhos simples feitos em Javascript.

É claro que essa riqueza de possibilidades resulta em uma linguagem complexa. Para piorar, o Javascript foi “crescendo” com o tempo e cada navegador web decidiu interpretar comandos diferentes da mesma forma. Isso adicionou ainda mais complexidade, tanto para quem faz códigos Javascript como para quem faz os navegadores, que precisam funcionar com o maior número possível de códigos.

O Javascript é, portanto, o tipo de código mais complexo com o qual os navegadores precisam lidar. E quanto mais difícil é fazer algo, maior a probabilidade de ocorrerem erros. Não existe nenhum risco inerente ao Javascript, exceto pela complexidade desnecessária criada pelo histórico conturbado da linguagem.

De qualquer forma, problema maior está no fato de que os programadores podem cometer muitos erros na criação do componente responsável pelo processamento dos códigos. Isso resulta em vulnerabilidades.

Como o Javascript interage com a página, além dos erros existentes nele mesmo, ele também pode ser peça-chave na exploração de erros em outras funcionalidades do navegador. É por isso que tantas falhas têm como solução temporária a desativação de Javascript.

Diferentemente de outras linguagens de programação, existe muita tolerância na programação de páginas web. Mesmo códigos “errados” funcionam devido aos esforços dos navegadores para tentar fazer a página aparecer na tela. Além disso, erros em navegadores web também moldaram as linguagens, quer dizer, programadores acabaram dependendo de erros para fazer as páginas aparecerem do jeito que queriam. Ainda hoje, os navegadores precisam detectar esses “erros” e “saber” o que o criador da página pretende.

É por isso que não apenas Javascript, mas até uma linguagem aparentemente simples como o HTML – principal responsável pelas páginas de internet – acabam sendo difíceis de “digerir” pelos softwares.

Não é possível navegar na internet sem Javascript. A grande maioria dos sites apresentará defeito ou perda de funcionalidade. Para o Firefox, o plugin NoScript limita os poderes do Javascript, mas também adiciona transtornos na navegação. Fica a critério de cada um optar pela segurança ou pela comodidade. De qualquer maneira, manter o navegador sempre atualizado é essencial para que qualquer brecha conhecida, seja no processamento de Javascript ou outro componente, seja eliminada.

Fonte: G1

As apps da web 2.0 são uma doce verdade, isso tudo graças à uma metodologia chamada Ajax(Asynchronous Javascript And XML). O Ajax ficou famoso após o lançamento do Gmail em 2004, muitos acham que o Gmail é o começo do plano de conspiração do Google, mas isso é outra história.

O Ajax trouxe muitas vantagens aos internautas, antigamente quando clicava-se em um link, uma nova página era aberta, e todas as imagens e menus anteriores eram carregados inumeras  vezes, com o Ajax é diferete, apenas partes especifícas são recarregados.

Essa mania pegou rapidamente, pois a agilidade que isso tras ao programador é imensa, o problema é que existem muitos navegadores, e o JavaScript se comporta de varias maneiras, tudo isso pelo fato de que o programador tem que criar um objeto XMLHTTP Request para o IE, Firefox, Safari, Chrome e outros.

Nesse ponto, surge o jQuery, que se comporta de forma inteligente na maioria dos Navegadores, facilitando ainda mais a vida dos programadores, ou seja, funciona em um, funciona em todos. Para entender um pouco mais sobre o jQuery assista o Vídeo Post feito por Diego Soares que lhe mostrará as funcionalidades básicas do jQuery e como aplicar os códigos em suas aplicações, fique à vontade para comentar este artigo.

Para assistir o vídeo com uma qualidade melhor, acesse http://www.vimeo.com/3165655 ou http://videolog.uol.com.br/video.php?id=410377 ou assista no player abaixo.

Uma das necessidades com que nos deparamos na hora de realizar projetos longos na web é indicar ao usuário o quanto é preciso esperar. Às vezes é bastante complicado criar uma barra de progresso que mostre o estado atual do processo que está sendo executado.

Uma forma de realizar essa tarefa é usando AJAX. Fazemos uma chamada AJAX que executa a ação, e quando o objeto AJAX tem o estado LOADING (readyState == 3), podemos obter a resposta do script chamado e passá-lo para mostrar o percentual da ação que está sendo realizada.

Para isso, desenvolveremos um script (res. php, por exemplo) que devolva a porcentagem seguida por um hífen. Por exemplo, quando passar por 1% será retornado pelo script “1-”, quando passar por 5% será retornado “1-2-3-4-5″. Processando isso podemos saber, através do último número, o percentual já processado.

O PHP seria o seguinte:

for($i=0; $i<10000000; $i++) {
  if ($i%10000 == 0) echo ((int) $i/100000).'-';
  flush();
} 

E o JavaScript seria assim:

function ajaxobj() {  
  try {  
    _ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");  
  } catch (e) {  
  try {  
    _ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");  
  } catch (E) {  
    _ajaxobj = false;  
  }  
}  

 if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {  
   _ajaxobj = new XMLHttpRequest();  
 }  

 return _ajaxobj;  
}
function prueba () {  
  ajax = ajaxobj();  
  ajax.open("GET", "res.php", true);  
  ajax.onreadystatechange=function() {
  if (ajax.readyState == 3) {  

   // Mostramos o percentual 
   var res = ajax.responseText;
   res = res.split('-');  
   alert(res[res.length-2]);  
  } else if (ajax.readyState == 4) {  

  // Fim
  alert('FIM');  
 }  
}  

 // Enviamos algo para que o processo funcione
 ajax.send(null);  
}  

Como não existe nada perfeito, e menos ainda o Internet Explorer, esse script só funcionou no Firefox, Opera, Safari e Chrome.

Fonte: Imasters ]]> http://www.debugando.com/barra-de-progresso-com-ajax/feed/ 1 http://www.debugando.com/colocando-minha-empresa-no-mapa/ http://www.debugando.com/colocando-minha-empresa-no-mapa/#comments Mon, 27 Apr 2009 21:36:57 +0000 admin http://www.debugando.com/?p=578 Este artigo, por mais simples que seja, tende a ser uma das maiores dúvidas e desejos dos usuários que estão iniciando nesta área. Como colocar minha empresa, estabelecimento, casa etc., no mapa. Com certeza no seu site é muito importante existir além do endereço da sua empresa um pequeno mapa representando tudo que está em volta dela para que os usuários possam se localizar mais facilmente.

Nosso foco hoje é criar um mapa utilizando a API do Google Maps. Com isso, não precisamos de nenhum banco de dados geográfico ou qualquer outro tipo de aplicação para desenvolvimento de mapas além das linguagens HTML e JavaScript.

Segundo o próprio Google, o que é a API do Google Maps?

A API do Google Maps permite usar JavaScript para incorporar o Google Maps em sua página da web. A API fornece diversos utilitários para manipular mapas (como na página http://maps.google.com) e adicionar conteúdo ao mapa através de diversos serviços. Você pode criar aplicativos de mapas robustos em seu site.

Passo 1: Obtendo uma chave para a API do Google Maps.

Para utilizarmos a API do Google, precisamos obter uma chave de identificação para o nosso site. É muito importante que você coloque a URL correta do caminho onde estará o mapa, caso contrário, ao instanciar a API no seu código, ela não funcionará.

Acesse o link : http://code.google.com/intl/pt-BR/apis/maps/signup.html, preencha as informações da URL do seu site e clique em GERAR chave de API. Não se esqueça de ler os termos de uso da API, nada de utilizá-la dentro de intranets.

Obs.: Você precisa ter um usuário cadastrado no Google para obtê-la.

Pronto, chave gerada, podemos ir para o próximo passo.

Passo 2: Obtendo o XY da sua empresa

Inicialmente, para identificarmos a sua empresa/estabelecimento/etc no mapa, precisamos da localização correta dela. A localização que comento é com relação ao seu XY. Mas o que é XY? Vamos à matemática…

Para a construção do modelo da superfície topográfica de uma dada região, necessitamos das triplas (x, y, z) de uma série de pontos da superfície do terreno. Os valores (x, y, z) são as coordenadas cartesianas de um ponto P, relativas a um sistema de coordenadas preestabelecido (como já vimos em meu outro artigo Sistemas de Informação Geográfica).

O plano XY é o plano horizontal de referência relativamente ao nível médio dos mares, e z é a distância vertical do ponto P ao plano horizontal XY (se me permitem exemplificar desta maneira, seria a altura em relação ao nível do mar, no nosso caso, não será necessária).

Como posso obter este ponto?

Existem diversas maneiras de se obter o XY de um endereço, vou exemplificar duas: a primeira é suscetível a alguns erros, motivo pelo qual o mapeamento da numeração das ruas nas cidades do Brasil não ser de fato correto (mas confesso que é satisfatório). O que quero dizer é que muitas vezes quando você informa o seu endereço, por exemplo o número 567, seriam 567 metros do ponto inicial da sua rua, nem sempre esta numeração irá bater exatamente no local da sua casa (quando digo exatamente, ainda considero um erro de 50m). Pode acontecer de aparecer na quadra errada; quando ocorrer, sugiro utilizar o segundo exemplo de aquisição do XY.

A primeira maneira que me refiro é solicitar através da url http://maps.google.com/maps/geo?q=STRING+DO+ENDERECOoutput=xmlkey=SUA_CHAVE

Obs.: Separe a string com “+”.

Exemplo:

http://maps.google.com/maps/geo?q=avenidaipiranga1200portoalegrersbrasiloutput=xmlkey=

Exemplo da resposta (response) em XML:

Pronto, seu XYZ é a coordenada <coordinates>-51.2093204,-30.0451247,0</coordinates> .

Agora você pode pular o segundo exemplo e ir direto ao passo 3, mas antes vamos verificar se o ponto está mesmo no local correto.

Acesso o seguinte link:

http://maps.google.com.br/maps?f=qsource=s_qhl=pt-BRgeocode=q=(-30.0451247,-51.2093204)

OBS: Lembre-se de alterar a ordem dos pontos XY <-> YX

A segunda maneira de se obter as coordenadas XY é implementar um outro exemplo utilizando a API do Google Maps. Chamamos este exemplo de Geocode Reverso (através de um clique no mapa iremos obter as informações quanto a este local).

O exemplo abaixo está presente na página da API do Google Maps, mantive-o como o qual para explicar cada linha.

Código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps JavaScript API Example: 	Reverse Geocoder</title>
    <script src="http://maps.google.com/maps?file=apiv=2.xkey=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">

    var map;
    var geocoder;
    var address;

    function initialize() {
      map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(-30.0270583,-51.2303402), 10);
      map.addControl(new GLargeMapControl);
      GEvent.addListener(map, "click", getAddress);
      geocoder = new GClientGeocoder();
    }

    function getAddress(overlay, latlng) {
      if (latlng != null) {
        address = latlng;
        geocoder.getLocations(latlng, showAddress);
      }
    }

    function showAddress(response) {
      map.clearOverlays();
      if (!response  response.Status.code != 200) {
        alert("Status Code:"  response.Status.code);
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(
        '<b>orig latlng:</b>'  response.name  '<br/>'
        '<b>latlng:</b>'  place.Point.coordinates[1]  ","  place.Point.coordinates[0]  '<br>'
        '<b>Status Code:</b>'  response.Status.code  '<br>'
        '<b>Status Request:</b>'  response.Status.request  '<br>'
        '<b>Address:</b>'  place.address  '<br>'
        '<b>Accuracy:</b>'  place.AddressDetails.Accuracy  '<br>'
        '<b>Country code:</b> '  place.AddressDetails.Country.CountryNameCode);
      }
    }
    </script>
  </head>

  <body onload="initialize()">
    <div id="map" style="width: 500px; height: 400px"></div>
  </body>
</html>

Você já viu um exemplo da resposta (response) em XML no exemplo anterior.

Exemplo da resposta (response) em JSON:

Através dos arquivos acima, você consegue identificar quais as variáveis necessárias para obter os dados do geocode.

Por fim e não menos importante, o corpo do HTML:

<body onload="initialize()">
    <div id="map" style="width: 500px; height: 400px"></div>
        <div id="temp"></div>
  </body>

Não se esqueça de utilizar o ONLOAD para chamar a função initialize() para tão logo carregar a página iniciar o procedimento da criação do mapa. Não quero ver ninguém comentando que o mapa não aparece!

Pronto, agora navegue no mapa, procure o endereço da sua empresa (ainda não criamos uma barra de pesquisa de endereço, nos próximos artigos irei explicar como), clique no local e copie as informações da linha latlng.

Agora temos o XY para continuar no nosso artigo.

Passo 3: Adicionando minha empresa no mapa

Bom, se você já criou o exemplo anterior do geocode reverso, este agora é muito mais simples. Caso contrário, vamos lá passo a passo.

Vamos ao código

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Simple Markers</title>
    <script src="http://maps.google.com/maps?file=apiamp;v=2amp;key=
	ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) { // Verifica se o browser é compativel com a API do Google
	    // Instância a API do Google e a adiciona na DIV map.
        var map = new GMap2(document.getElementById("map"));
		// Centraliza o mapa no XY, zoom 16 em uma escala de [1..17] (Varia de acordo com a região)
        map.setCenter(new GLatLng(-30.0451247,-51.2093204), 16);
		// (OPCIONAL) Adiciona os controle de a esquerda do Mapa (Zoom , Zoom -, barra de Zoom, etc)
        map.addControl(new GLargeMapControl);
		// Padronizamos o XY de acordo com o latlng da API: (Y,X)
        var latlng = new GLatLng(-30.0451247,-51.2093204);
        map.addOverlay(new GMarker(latlng)); // Adiciona o marker no mapa
      }//if
    }//function
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

OBS: Não se esqueça de trocar a sua chave da API. Não se esqueça de declarar o ONLOAD, para que a função initialize(), no meu exemplo, crie o mapa assim que a página seja carregada.

Resultado

Caso você queira incrementar o seu mapa e adicionar um evento de clique no marker, façamos algumas modificações no código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Simple Markers</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=
	ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">
    function initialize() {
      if (GBrowserIsCompatible()) { // Verifica se o browser é compativel com a API do Google
	    // Instância a API do Google e a adiciona na DIV map.
        var map = new GMap2(document.getElementById("map"));
		// Centraliza o mapa no XY, zoom 16 em uma escala de [1..17] (Varia de acordo com a região)
        map.setCenter(new GLatLng(-30.0451247,-51.2093204), 16);
		// (OPCIONAL) Adiciona os controle de a esquerda do Mapa (Zoom +, Zoom -, barra de Zoom, etc)
        map.addControl(new GLargeMapControl);
		// Padronizamos o XY de acordo com o latlng da API: (Y,X)
        var latlng = new GLatLng(-30.0451247,-51.2093204);
		var marker = new GMarker(latlng); // Criamos um marker referenciado a uma variável
		// Criamos um evento para ao se clicar no marker
		GEvent.addListener(marker, "click", function() {
			// Abrir um InfoWindow com o seguinte texto
           marker.openInfoWindowHtml("Endereço da minha empresa! <br/> <strong>;)</strong>");
          });
        map.addOverlay(marker); // Adiciona o marker no mapa
      }//if
    }//function
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Pronto!

Criei um arquivo chamado funcao_jquery.js para colocar a função de efeito do jQuery. Para nossa aplicação usei o efeito fadeIn().

O Fade in (a função fadeIn()) serve para dar opacidade, e pode ser ajustado para ter animação. Existem três strings de velocidade predefinidas (“slow”, “def”, e “fast”), usei a slow em nossa aplicação;

fadeIn("slow");

Criei dois campos de exemplo (Nome e E-Mail) e um botão “submit“. Podem ser criados quantos necessários:

<form action="Cadastro_JQuery.asp?Cadastrar=Ok" method="post">
    Nome: <input name="Nome" type="text" id="Nome" />
    <br>
    E-Mail: <input name="EMail" type="text" id="EMail" />
    <input name="btAdd" type="submit" value="Adicionar" id="btn_enviar" />
</form>

No action do formulário coloquei uma Query “Cadastrar” com valor ok para ativar a ação do ASP (usando JScript) que segue abaixo:

<%
// Função para cadastrar no banco
if (Request.QueryString("Cadastrar") == "Ok") {

    var nome = Request.Form("Nome");
    var email = Request.Form("EMail");

    Conexao.Execute("Insert Into Newsletter (Nome, EMail)
                     Values ('"+nome+"', '"+email+"')");
    Response.Write("");
}
%>

Usando listas (UL>LI) eu pego as informações do banco e organizo tudo para ser mostrado ao usuário:

<%
var rs = Conexao.Execute("Select * From Teste"); // SQL para listar os dados
if (rs == null) {
    Response.Write("NADA ENCONTRADO");
}
else {
    while (!rs.EOF) {
        Response.Write("<li>"+rs("Nome")+" : "+rs("EMail")+"</li>") 
        // Lista todos os cadastrados do banco
    rs.MoveNext();
    }
}
%>

No ASP, com JScript para verificar se existe algo no banco, eu pego o RecordSet e comparo ele com “null” e o “else” caso encontre;

if (rs == null) {

… continua o resto do código…

A mesma idéia temos para o “loop”, só que uso o End Of File (.EOF)

while (!rs.EOF) {

… continua o resto do código …

Em seqüência imprimo na tela o que foi encontrado.

O jQuery vai agir da seguinte maneira:

No botão de tipo “submit” coloquei uma ID de nome “btn_enviar”, quando o botão for clicado será enviado os parâmetros via POST para o jQuery.

$('#btn_enviar').click(function(){

    var nome_post = $('#Nome').val();
    var email_post = $('#EMail').val();

$.post("Cadastro_JQuery.asp?Cadastrar=Ok",{nome: nome_post, email: email_post}

Logo em seguida jogo dentro da lista (UL>LI).

$("ul li:last").after("<li>" + nome_post + " : " + email_post + "</li>").next().fadeIn("slow");
});

E finalizo limpando os campos. Veja na imagem abaixo:

Segue o link da página com o código completo e o arquivo jQuery!

Código completo

Arquivo jQuery

Fonte: Imasters

Há muito tempo, em um sistema web em que o foco era a visualização de documentos, o cliente solicitou que o menu fosse retrátil. Ou seja, o menu superior da aplicação tinha que desaparecer se não estivesse sendo utilizado e aparecer quando o cursor do mouse se aproximasse dele. Para suprir isso criei uma função Javascript (utilizando CSS), e ficou bem bacana, simples e bastante útil. Esse script eu carrego comigo desde lá.

Precisei disso novamente alguns dias atrás, mas dessa vez fiz diferente. Tornei o script genérico, de modo que posso utilizar mais facilmente em qualquer aplicação web que tenha jQuery, e ainda coloquei em um repositório no Github (repositório GIT).

Sei que ainda é bastante primitivo e não está nos padrões de plugin jQuery. Mas essa é uma das intenções de colocar em um repositório público. Quem quiser usar e acoplar funcionalidades, otimizações e mesmo dar opiniões será muito bem-vindo. Pra quem não quer nem tocar no repositório, segue o link pra download (versão mais recente). Veja um exemplo do seu funcionamento aqui.

Pra explicar o que, como, onde, vou transcrever o README do repositório no Github abaixo.

upper-box

API javascript que transforma qualquer elemento de seu HTML (uma div, por exemplo) em uma caixa móvel posicionada na parte de cima da tela.

Para utilizá-lo é necessário estar com o jQuery adicionado ao documento.

O que acontece?

O elemento upper-box vai virar uma caixa invisível na parte de cima da tela.

Quando o usuário se aproxima com o mouse da parte superior da tela (body), o elemento ira rolar, abrindo e exibindo seu conteúdo.

Como usar?

Primeiro inclua os arquivos jQuery e upper-box no seu html, desta forma:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upper-box.js"></script>

Seu uso é bem simples, basta adicionar upper-box ao class do elemento que vai virar upper-box.

Exemplo:

<div id='div1' class='divClass'>
 <h2>Olá,</h2>
 <p>Esta div não é um <b>upper-box</b>!</p>
</div>

<div id='div2' class='divClass upper-box'>
 <p>Esta div será um <b>upper-box</b>!</p>
 <p>Simples, não?!</p>
</div>

Espero não só ter ajudado como também ter instigado a colaboração de código. Sintam-se à vontade para realizar melhorias no simples – por enquanto – upper-box.

Fonte: Imasters

Veja um exemplo do que será aprendido nessa aula.

Usarei como exemplo um formulário de contato que é o mais comum por aí. Vamos ao passo-a-passo:

Faça o download da última versão do jQuery no site: http://jquery.com/

Faça o download do plugin Validation no site: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Insira-os dentro do <head> do seu site, da seguinte forma:

1.<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
2.<script language="JavaScript" src="jquery.validate.js" type="text/javascript"></script>

Após isso, criamos um pequeno bloco de CSS para estilizar as mensagens de erro:

1.* { font-family: Verdana; font-size: 96%; }
2.label { display: block; margin-top: 10px; }
3.label.error { float: none; color: red; margin: 0 .5em 0 0; vertical-align: top; font-size: 10px }
4.p { clear: both; }
5..submit { margin-top: 1em; }
6.em { font-weight: bold; padding-right: 1em; vertical-align: top; }

Ainda dentro do head, depois de inserir o jQuery e o estilo das mensagens de erro, precisaremos adicionar um bloco de JavaScript contendo instruções para a validação:

01.$(document).ready( function() {
02.$("#formularioContato").validate({
03.// Define as regras
04.rules:{
05.campoNome:{
06.// campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
07.required: true, minlength: 2
08.},
09.campoEmail:{
10.// campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
11.required: true, email: true
12.},
13.campoMensagem:{
14.// campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
15.required: true, minlength: 2
16.}
17.},
18.// Define as mensagens de erro para cada regra
19.messages:{
20.campoNome:{
21.required: "Digite o seu nome",
22.minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
23.},
24.campoEmail:{
25.required: "Digite o seu e-mail para contato",
26.email: "Digite um e-mail válido"
27.},
28.campoMensagem:{
29.required: "Digite a sua mensagem",
30.minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
31.}
32.}
33.});
34.});

Por fim, inserimos o HTML do formulário na página:

01.<form id="formularioContato" method="post" action="">
02.<label>Nome</label>
03.<input name="campoNome" type="text" value="" />
04.
05.<label>E-mail</label>
06.<input name="campoEmail" type="text" value="" />
07.
08.<label>Mensagem</label>
09.<textarea name="campoMensagem"></textarea><br />
10.
11.<input type="submit" class="submit" value="Enviar" />
12.</form>

Viram como é fácil? O arquivo final ficou dessa forma. Se você preferir pode copiar todo esse código JavaScript para um arquivo .js e incluí-lo no <head> do seu site da mesma forma que fizemos no começo da aula.

Coloquei alguns comentários na parte das instruções de validação para facilitar o entendimento.

Com isso você faz uma validação client-side que ajuda a evitar dados inválidos e campos vazios. Mas preciso lembrar que, por ser client-side, essa validação acontece apenas no computador do visitante e o mesmo pode desativar o JavaScript e a validação toda não irá funcionar. Então não se esqueça de fazer a mesma validação dentro do PHP quando receber os dados.

Veja o exemplo desta aula funcionando.

Mais exemplos de validações diferentes podem ser encontrados no site do plugin: http://jquery.bassistance.de/validate/demo/

Fonte: Imasters

Há muito tempo, em um sistema web em que o foco era a visualização de documentos, o cliente solicitou que o menu fosse retrátil. Ou seja, o menu superior da aplicação tinha que desaparecer se não estivesse sendo utilizado e aparecer quando o cursor do mouse se aproximasse dele. Para suprir isso criei uma função Javascript (utilizando CSS), e ficou bem bacana, simples e bastante útil. Esse script eu carrego comigo desde lá.

Precisei disso novamente alguns dias atrás, mas dessa vez fiz diferente. Tornei o script genérico, de modo que posso utilizar mais facilmente em qualquer aplicação web que tenha jQuery, e ainda coloquei em um repositório no Github (repositório GIT).

Sei que ainda é bastante primitivo e não está nos padrões de plugin jQuery. Mas essa é uma das intenções de colocar em um repositório público. Quem quiser usar e acoplar funcionalidades, otimizações e mesmo dar opiniões será muito bem-vindo. Pra quem não quer nem tocar no repositório, segue o link pra download (versão mais recente). Veja um exemplo do seu funcionamento aqui.

Pra explicar o que, como, onde, vou transcrever o README do repositório no Github abaixo.

upper-box

API javascript que transforma qualquer elemento de seu HTML (uma div, por exemplo) em uma caixa móvel posicionada na parte de cima da tela.

Para utilizá-lo é necessário estar com o jQuery adicionado ao documento.

O que acontece?

O elemento upper-box vai virar uma caixa invisível na parte de cima da tela.

Quando o usuário se aproxima com o mouse da parte superior da tela (body), o elemento ira rolar, abrindo e exibindo seu conteúdo.

Como usar?

Primeiro inclua os arquivos jQuery e upper-box no seu html, desta forma:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upper-box.js"></script>

Seu uso é bem simples, basta adicionar upper-box ao class do elemento que vai virar upper-box.

Exemplo:

<div id='div1' class='divClass'>
 <h2>Olá,</h2>
 <p>Esta div não é um <b>upper-box</b>!</p>
</div>

<div id='div2' class='divClass upper-box'>
 <p>Esta div será um <b>upper-box</b>!</p>
 <p>Simples, não?!</p>
</div>

Espero não só ter ajudado como também ter instigado a colaboração de código.

Sabemos que o HTML (sigla para Hipertext Markup Language) não é uma linguagem de programação, nem mesmo de script, mas sim uma linguagem de marcação de conteúdo.

É muito importante ter isso em mente porque “conteúdo” sempre foi uma palavra-chave na Internet. Com o passar do tempo foram sendo criados diversas formas de uso para a Internet, desde comércio eletrônico até cursos de graduação online, mas tudo isso gira em torno de conteúdo.

Muita coisa mudou do início da era da Internet pra cá. No início tínhamos apenas conteúdo de texto, depois imagens, vídeos e assim por diante, até o que conhecemos hoje, onde temos muitas idéias e conceitos em um mundo totalmente integrado. Mas o a nossa simples linguagem criada por Tim Berners-Lee está presente desde o início, junto com o primeiro browser. Foi criada para criar um padrão único para renderização e linkagem de conteúdos.

O HTML evoluiu também, mas sua estrutura base é a mesma, são apenas mudanças para uma melhor padronização. São apenas algumas regras simples que são implementadas em cima do HTML original. O chamado XHTML ou HTML Extensível foi criado a partir da necessidade de termos um maior controle do site em diferentes plataformas, por exemplo, telefones celulares, smartphones, computadores com diferentes resoluções e navegadores conseguem enxergar exatamente o mesmo conteúdo e exatamente da mesma forma, o que era muito difícil ou até impossível antes.

No site do W3C (http://www.w3.org/) encontramos várias referências e motivos para se utilizar o HTML padronizado e limpo.

As aplicações web estão cada vez mais robustas e as linguagens de server-side como Java, Php e Ruby cada vez mais complexas e cheias de recursos. Então não valeria a pena não dar a ênfase correta para o “simples” HTML, pois será ele que vai dar o resultado para a aplicação, é ele que permite o usuário visualizar o conteúdo. Sem a ênfase correta, podemos ter erros de validação, ter usuários que podem não conseguir acessar o site, ou conteúdos importantes que podem não aparecer no site por simples erros de codificação HTML.

1. Formatos Vetoriais

Com o OpenLayers é possível ler e escrever em diversos formatos de dados vetoriais serializáveis como o GeoJSON, KML, GeoRSS, GML e WKT.

Você pode também utilizar as ferramentas de desenho para desenhar pontos, linhas e polígonos no seu mapa, não apenas para criação, como também para edição das feições e dos seus atributos.

Se você possuir o Google Earth, poderá visualizar suas camadas nele, bastanto para isso que você gere um KML (através de uma requisição WMS, ou indo diretamente no cliente OpenLayers do seu GeoServer), e abra-o no Google Earth.

2. Estilos

Uma das razões para utilizar dados vetoriais, é que com o OpenLayers você tem o poder de controlar o seu estilo, ou seja, a forma como ele irá aparecer no mapa para o cliente.

Por padrão, as feições desenhadas pelo OpenLayers são laranja. Porém os estilos são totalmente customizáveis, bastando para isso que você tenha um arquivo JavaScript definindo o estilo, ou um arquivo de estilos externo (um SLD do GeoServer, por exemplo).

O exemplo abaixo foi gerado a partir de uma requisição WFS ao GeoServer. A camada foi desenhada utilizando cores baseadas na população.

Veja no código fonte do exemplo que adicionamos um nova propriedade:

A propriedade styleMap do layer foi setada para myStyleMap, veja:

Neste caso nós inicializamos o StyleMap com um hash de estilos. Este hash pode possuir as seguintes propriedades:

• default – estilo que será desenhado na inicialização do mapa;
• select – estilo que será desenhado quando alguma feição for selecionada;
• temporary – estilo que será desenhado com estilos que devem ficar temporariamente no mapa.

Nosso exemplo utiliza o padrão. Observe que quando você colocar o mouse em cima do mapa, o estilo irá mudar, isso porque um estilo diferente é utilizando quando o mouse passa em cima das feições.

Veja como ficou a definição dos estilos:

Fonte: Fernando Quadro