Títulos e Usabilidade

Ultimamente meus posts estão saindo todos dos meus feeds, então esse é mais um: HTML Page Titles & Usability. Recomendaria que todos lessem, mas como tem gente que não domina o inglês, vou fazer um pequeno resumo.

Seguinte: você entra em um site, como um catálogo (o exemplo usado foi o iStockPhoto). Aí você clica em vários links, lógico. Quando vai voltar para algum, vê algo assim:

Usabilidade em Títulos

Isso é realmente irritante. Você vai procurar, daqui a pouco ou amanhã mesmo em seus históricos, e só vai encontrar o título da página e o nome do site. Chato pra caramba.

A sugestão foi a seguinte: utilizar Title of this page < Section of the Website < Name of the Website. Bem mais útil.

Explicando: não posso mudar aqui, antes que me chamem de chato que não cumpre o que diz. Esse WP não permite, é versão MU. Nesse caso, me guentem até poder pagar um servidor pago… Até!

29 de novembro, 2006

JavaScript Object Notation

A pedidos, resolvi escrever este artigo sobre JSON, que eu havia “pulado”… Como não há muito para ser explicado, segui a mesma linha do site oficial.

O JSON é um subconjunto da notação de objeto do JavaScript. Sendo o JSON um subconjunto do JavaScript, ele pode ser usado sem nenhum problema, ou seja, é só colocar lá que roda (simplificação péssima…). Veja um exemplo simples:

var JSONObject = {"bindings": [
	{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
	{"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
	{"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random//.*"}
  ]
};

Criamos um objeto contendo um membro bindings, que contém um array contendo 3 objetos, cada um contendo os membros ircEvent, method e regex. Se você analisar, é quase a mesma coisa que criar uma classe através de um construtor, e depois instancia-la em uma variável, criando um objeto. É quase tudo igual.

Para acessar os membros de um objeto, usamos o “dot-structure”, como para acessar atributos de objetos normais (viu como é parecido? Até o nome), assim:

JSONObject.bindings[0].method;	// "newURI"

Texto JSON (demorei pra entender pelo site) é um objeto JSON normal, mas em uma string, ou seja, tudo entre aspas. Você já deve ter visto isso em Ajax nos meus posts anteriores. Para transforma-lo em um objeto, usamos a função eval(), assim:

var myObject = eval( '(' + JSONText + ')' );

De acordo com o site, não há problema algum utilizar a função eval() quando nós mesmos provemos o texto. Mas se por acaso o objeto seja provido de outra forma (pelo usuário, por exemplo), há um pequeno risco de segurança. Para contornar o problema, você encontra um conversor no site.

Não esqueça de verificar se o seu JSON é “válido”. Não há validação para isto, e também não causa nenhum problema caso nada seja validado. Mas o bom senso é quem manda. Para ficar tudo certo, use JSON Válido, com aspas duplas no nome dos membros.

27 de novembro, 2006

Pra quem você escreve?

Chegou no Bloglines hoje: Campanha FEED-SE todo mundo e deixe o feed do jeito que você quiser, do Henrique Pereira.

Um texto muito interessante, onde ele fala que “O blog é meu, faço como eu quero” (mais ou menos assim). Concordo em partes com ele…

Também do Bloglines: Pra quem você escreve?. É um resumo do que eu acho sobre o assunto, mesmo que não tenha sido eu que escrevi…

Minha idéia é a seguinte: sim, você manda no seu blog. É ditadura mesmo, faz o que quiser. Mas o seu site é para os outros (geralmente), e não apenas para você mesmo. Se for para você mesmo, faça exatamente como quiser. O problema é que você escreve para outras pessoas, e não para si mesmo. Nesse caso, por mais abobrinha que seja seu blog, você deve pensar no melhor para o visitante, seja feed completo ou parcial (isso interessa aqui?).

Então, o que você tem a dizer? É pra você ou pro mundo? Fico por aqui, e até a semana que vem, já que vou estar viajando e não vai dar pra postar até 2ª feira.

24 de novembro, 2006

Ajax sem o X

Hoje falaremos sobre uma variante do Ajax. Não sei se isso tem um nome (e se tiver, também não interessa), mas tem algumas vantagens… Seria um JavaScript assíncrono, sem a utilização de XMLHttpRequest e, portanto, não caracterizando Ajax.

A Idéia

Partiremos do seguinte raciocínio: utilizaremos scripts criados dinamicamente, definindo como “src” uma página server-side qualquer. Teríamos o equivalente a:

<script src="pagina_server_side.php"></script>

E como isso? Utilizaremos DOM, e também JSON, para “carregar” os dados.

O Código

Como disse, essa “técnica” resulta em um número menor de linhas, pois não precisamos criar o objeto XMLHttpRequest (que é diferente entre os browsers), e também não precisamos controlar o readyState (pelo menos não precisa).

Primeiramente, é necessário criar o documento server-side. Ele poderá fazer consultas a banco de dados, arquivos texto, respostas do usuário ou qualquer outra coisa. Mas, no nosso caso, esse documento deve retornar uma string JSON válida, ou seja, um objeto mais ou menos assim:

var json = { "id": 1, "link": "http://juliogreff.wordpress.com", "name": "JulioGreff's Blog" }
// Não podemos esquecer de colocar em uma variavel!

Também não podemos esquecer do header! Essa resposta deve ser enviada como JavaScript, com o seguinte header: “Content-type: text/javascript”.

Para que isso tudo aí tenha utilidade, é necessário passar parâmetros para o lado do servidor. Para isso, usamos nossas queridas query strings. Elas vão escolher o que será retornado. E agora……. a parte em JavaScript (não via a hora disso! Não gosto muito de PHP):

var elHead = document.getElementsByTagName('head')[0]; // Pegamos o elemento head
var elScript = document.createElement('script'); // Criamos um elemento script
elScript.src="http://www.eu.com/json.php?id=1"; // Definimos um src para o script
elHead.appendChild( elScript ); // Colocamos script dentro de head

Simples assim… E, para pegar os dados retornados, usamos o código abaixo:

var id = json.id;
var link = json.link;
var name = json.name;

Usando na Prática

Bem, pra usar isso aí na vida real não é difícil não. A parte mais complexa fica a cargo do PHP, ASP ou qualquer um outro. Ele deve se encarregar de analisar a query string, fazer a consulta em algum lugar e retornar os dados, como se fossem um pequeno bloco de JavaScript, como eu mostrei.

A parte em JavaScript é extremamente fácil. As duas primeias linhas não precisam ser modificadas. Quando você for definir o src, lembre-se de colocar a query string de acordo com a consulta que você deseja. Praticamente tudo depende dela… ou nem tanto, mas é importante mesmo assim.

Dependendo do tipo de sua aplicação, página ou bugiganga tecnológica (existe isso por aí, infelizmente), a query string pode ser gerada a partir de vários lugares: um link, uma resposta no formulário, um evento qualquer… Mas lembre-se de uma coisa: essa técnica não aceita o href=”http://juliogreff.net/utilizando-o-método-post/” title=”Utilizando o Método POST”>método POST, portanto, 255 caracteres é o nosso limite.

23 de novembro, 2006

E a tal da Web 2.0?

Assim como o Tableless já foi, o termo Web 2.0 está sendo largamente utilizado hoje em dia, e gerando bastante polêmica. Discute-se se ela existe, morreu, acabou, continua existindo… Não sou nenhum expert no assunto, mas de uma coisa tenho certeza: tem muita gente falando bobagem por aí. Não sou ninguém pra dizer o que é certo ou errado, mas em minha sincera opinião, Web 2.0 não é Ajax… E não é só isso. Vou tentar explicar um pouco o conceito, da maneira que eu acho que seja o certo, não tomem minha opinião como definitiva, mas quem quiser aderir…

Termo

Dizem por aí que o termo Web 2.0 é só marketing. Tanto faz. O termo não interessa.

Como qualquer coisa, a Web também evoluiu muito de uns tempos pra cá. Foi apenas dado um nome para essa evolução. Nunca vi “Web 1.0″ por aí, mas não tenho nada contra o termo, apesar de abrir margem para milhares de interpretações diferentes, assim como o termo Tableless abriu.

Mudando ou não o “motor” da Web para 2.0, não interessa. Não se prenda muito aos termos, e sim aos conceitos. Para mim, Web 2.0 seria uma “Web Colaborativa”.

Conceito

Web 2.0, assim como o Ajax, não é uma tecnologia nova, é um “jeito”. É uma nova filosofia de criação de sites e aplicações para a Web. Você não precisará aprender nenhuma linguagem nova para programar para a Web 2.0. Você precisa apenas navegar um pouco por aí e entender bem que filosofia é essa.

Na “Web 1.0″ (desculpe, não achei nada melhor), os usuários “cultivavam” sua lista de favoritos, e iam atrás da informação contida neles, dia após dia, tentando garimpar alguma coisa. O usuário ia até a informação, e quando conseguia. Com uma certa evolução, os sites passaram a disponibilizar feeds. Os feeds foram a idéia mais simples para entender Web 2.0 que eu encontrei. Assinando-os, a informação vem até o usuário, e ele escolhe o que quer ver.

Ou seja, o usuário passa a participar ativamente da Web, não apenas como leitor, mas também como criador de informação. O usuário faz a Web, por assim dizer.

Não acredita no que eu digo? Veja alguns exemplos de Web colaborativa:

  • Blogs
  • Feeds
  • Wikis
  • Serviços como os do Google (Docs, Maps, …)

E existe muito mais. A informação não está mais centralizada nos administradores, está espalhada em todo o lugar.

Tecnologias

Acredite se quiser. Nenhuma tecnologia, seja ela nova ou antiga, faz a Web 2.0. Elas são apenas utensílios. Muitos sites utilizam layouts e tecnologias arcaicas, e são exemplos de Web 2.0. Por exemplo, esse meu blog não precisa de nada especial, além de HTML e PHP. Ele utiliza os WebStandards, Ajax (na administração), mas nada disso é realmente necessário. As tecnologias ajudam, e muito, na construção de uma Web 2.0, melhorando a experiência do usuário, mas não são obrigatórias.

Pra início de conversa, Ajax não é Web 2.0. Nem uma tecnologia. É um jeito, asism como a Web 2.0. Ele não é necessário, mas muito útil, quando bem usado. Ele impõe muitas limitações de alguma forma, mas elas podem ser resolvidas por um bom programador.

WebStandards, Microformats, DOM, Ajax, acessibilidade… Tudo isso é extremamente útil. Mesmo. Mas não faz a Web 2.0. Use como puder, da melhor maneira que puder.

Leitura Recomendada

Eu poderia citar muitos links aqui, de diversas opiniões sobre o assunto. Mas o Henrique já fez isso, em “Web 2.0 não significa nada. Me desculpe!“. Ele aborda o tema de uma maneira diferente, mas não deixa de ser válido. Discordo de boa parte, mas ele tem razão em vários pontos.

19 de novembro, 2006