JGQueryString

Atenção: esse script está ultrapassado e pode conter bugs. Ele não recebe mais suporte e atualização. Use por sua conta e risco.

O JGQueryString é um objeto que desenvolvi para tornar o JavaScript capaz de ler Query Strings, aquelas informações passadas junto com a URL, depois do “?”. Ele permite acessar os valores das variáveis enviadas pelo método HTTP GET.

Métodos

  • getVar(varName) – Retorna o valor da variável varName.
  • getVars() – Retorna um array contendo todas as variáveis enviadas.

Exemplo de Uso:

JGQueryString.getVar("firstName");
JGQueryString.getVars()["variavel"];
var httpGetVar = JGQueryString.getVars();
alert(httpGetVar["variavel"]);

E a URL da página deve conter a query string: http://url/da/pagina.htm?variavel=valor&outravar=outrovalor

Testada em IE 6 e Firefox 1.5. Quem puder testar em outros browsers, ou detectar algum bug, me avise.

22 de setembro, 2006

Criando Funções Dinamicamente

Essa técnica não é das mais difíceis, nem das mais extensas. Explicarei elas pra quem está começando com Ajax, mas também é útil para POO (mas de outra maneira).

Às vezes pode ser necessário importar uma função personalizada de um script server-side, criada dinamicamente, na hora, para satisfazer um requisito qualquer. Não interessa muito qual o propósito de uma função deste tipo, ela pode ser usada para muitas coisas.

var funcao = 'function test(texto) { alert(texto); }';
eval( '(' + funcao + ')' );

Se você já tentou o código acima (ou algo parecido, quis tirar a parte dos requests pra diminuir o tamanho do texto), não deve ter tido grande sucesso. Isso porque você não gravou esta função, você apenas escreveu ela e depois ela foi “apagada”. Precisamos registrar a função para poder usa-la. Veja:


var funcao = 'func = function (texto) { alert(texto); }';
eval( '(' + funcao + ')' );

Tente isso. Você provavelmente obterá sucesso. A função que desejamos foi registrada (através de sua compilação com eval, como no código mais acima) como “func”. Fácil, não?

Mas não há motivo algum pra fazer isso. Poderíamos ter registrado a função diretamente, como sempre fazemos, certo? CERTO (pensou que eu ia dizer que não, né?), já que não estaríamos usando uma string como função. Esse exemplo é para ser usado com Ajax (onde “funcao” é o responseText).

E se eu quiser registrar uma função de forma diferente, sem Ajax? Da mesma maneira, mas sem precisar compila-la:


var func = function (texto) { alert(texto); };

E usamos normalmente. Mais um exemplo, agora com JSON:


var busca =
	{
	completa: function(texto) { ...busca... },
	simples: function(texto) { ...busca... }
	}

E usando-a:


busca.completa("Texto");
busca.simples("Texto");

metodo.Simples() não? Basta aprender a usar direitinho.

19 de setembro, 2006

Tableless

Já que falei sobre o DIVless, vamos passar a algo mais semântico: Tableless. O termo tableless, literalmente, significa “sem tabelas”. Por esse motivo esse termo tem causado uma grande confusão entre os iniciantes no tema.

Pra quem conhece, Tableless significa criar um site seguindo os padrões, com código semântico, preferencialmente estrito, e não banir totalmente o uso da tag <table>, como quem está entrando no tema pensa. Alguns se gabam de conseguir mostrar dados tabulares usando apenas DIVs. Isso é o equivalente a criar um site usando tabelas.

Em minha opinião, um site Tableless é feito seguindo os padrões (ou deveria). O termo tableless é polêmico (vide Tableless tem que morrer), e é apenas um nome. Lá fora o termo usado para definir um site que segue os padrões é “CSS Layout”. E poderia ser qualquer outro. O nome não interessa, o que interessa é como o site é feito. WebStandards são necessários para a criação da Web 2.0, e nesse bolo também entra a semântica.

Tableless, no sentido que costumamos usar, é seguir os padrões, e não banir o uso de tabelas. Pense nisso, lembre-se disso.

Alguns ainda não consideram que um site Tableless segue os padrões (mas pode seguir sim, sem nenhum problema). No Tableless e no Revolução Etc tem dois posts interessantes sobre o assunto: Tableless vs. WebStandards.

Baseando-se nisso, praticamente excluí Tableless do meu vocabulário. Costumo usar “Site Semântico”, ou coisas assim. O termo em questão está aberto a muitas interpretações diferentes. Novamente digo: o nome não interesa. O que interessa é o que o conceito quer dizer.

16 de setembro, 2006

DIVless

Andei lendo no Tableless e no Revolução Etc sobre DIVless. Não vi maiores detalhes do assunto (a não ser no site do criador da idéia), então resolvi esclarecer as coisas pro pessoal.

O que é?

Basicamente (e literalmente), DIVless é a ausência de DIVs. Todas as DIVs são trocadas por listas não ordenadas e listas de definição.

Por quê?

Segundo o autor do DIVless, as listas tem um sentido inerente mais hierárquico e sintático. Em outras palavras, a hierarquia do site se apresentaria melhor, com ou sem o uso de CSS ou no código.

O autor também afirma, com ajuda do W3Schools, que as listas como elementos de layout seguem os padrões semânticos.

Também é apontada a falta de significado da tag DIV em browsers antigos, e ela também não apresenta estrutura hierárquica e visual em browsers que não usam CSS. Isso realmente é verdade. E tudo testado em IE 6 e 5.5, Firefox e Safari.

E a Semântica?

Em minha humilde opinião, a semântica vai por água abaixo. O que vale é a palavra do W3C, e não qualquer outra. Layouts são controlados por DIVs, e não listas.

Lembra-se quando ainda usávamos tabelas para posicionar elementos? DIVless é tão semântico quanto isso. Realmente a tag DIV não tem nenhum valor semântico, mas podemos adiciona-lo através dos atributos class e id.

A técnica do DIVless realmente foi bem bolada, todos os argumentos do autor são verdadeiros (exceto a questão semântica). Visitei a página sem suporte a CSS e apareceu bem melhor do que com DIVs. Isso é indiscutível. Mas e a semântica? Realmente é uma questão delicada.

Em minha opinião, DIVless não terá muito futuro, pelo menos até que o futuro chegue.

14 de setembro, 2006

Semântica

Atualmente se discute muito sobre semântica na web. Sim, ela é extremamente importante para a Web 2.0 (ainda muito distante). Mas o que é Semântica? Por que ela é tão importante?

Nas recomendações do W3C, cada elemento (tag) tem sua função própria no (X)HTML. Cada tag tem seu papel a cumprir, foi criada com um propósito. Criar documentos semanticamente corretos significa utilizar a tag certa no lugar certo. Por exemplo: <h1> para título superior, <p> para parágrafos… Não pretendo explicar aqui a função de todas as tags. Se estiver interessado, visite o W3Schools.

É completamente possível fazer um site inteiro usando apenas parágrafos. Talvez listas. É possível fazer um layout completo e apresentável usando qualquer tag. Isso é possível graças ao CSS, que permite modificar propriedades das tags. Mas essas propriedades são apenas visuais. Não é possível modificar a função semântica de algum elemento por CSS. Isso é impossível. E um site feito assim passaria na validação? Lógico! Se ele for bem formado, usar tags de acordo com o DTD, ele será validado. Não existe e nunca existirá um validador de semântica. Você mesmo terá que avaliar se seu documento é semanticamente correto. E se passa na validação, por que semântica?

A resposta é simples. Pense em um usuário que não enxerga, não ouve e ainda por cima não “raciocina”. Um exemplo desse usuário é o famoso Google. Ele não se importa com seu CSS. Então, quando ele for indexar sua página, ele procurará significado em suas tags, de acordo com as recomendações do W3C. Como ele entende apenas o significado das tags, como ele entenderá suas classes? Classes não tem valor semântico (ainda). Se seu código é bem tratado e tem significado, ele é Semântico. Aplicações como o Google, quando encontram uma certa tag, elas dão uma importância X para aquele elemento, dependendo do valor semântico que ele possui.

Analise: criando documentos semanticamente corretos, além de contriuir para uma web melhor, você estará beneficiando a si próprio. Seu site poderá aparecer primeiro no Google e outros motores de busca, será bastante amigável aos leitores de tela, será compatível com aplicações futuras, enfim, muitos outros benefícios que você descobrirá quando for desenvolver. Senti diferença ao ver que minhas folhas de estilo referenciavam mais tags do que classes. Você terá uma maior variedade de tags.

Bem, espero que tenha sido útil. Pretendo colocar mais alguns exemplos de semântica e seus benefícios a medida que meus estudos avançarem. Até a próxima!

11 de setembro, 2006