Em um post anterior mostrei aqui como carregar o botão de Retweet do Twitter via Ajax, uma solução para aplicações onde o conteúdo é carregado via Ajax, ou, por outro lado, uma ótima solução por questões de performance.
Abaixo vou deixar uma lista de sites que disponibilizam scripts e tutorias sobre Ajax para download visando auxiliar os desenvolvedores web:
Em um outro post onde mostrei como utilizar Ajax com jQuey surgiu uma dúvida de um usuário de como adicionar uma imagem de carregando enquanto o conteúdo não é totalmente carregado. Isso não é muito difícil de se fazer com jQuery, pois iremos utilizar as funções ajaxStart e ajaxStop da jQuery.
Para esse exemplo, preparei uma marcação HTML muito simples:
<a id="load" href="#" title="Clique aqui para carregar o arquivo">Carregar arquivo</a> <div id="content"></div>
O HTML é composto de um link que o ser clicado carrega o conteúdo desejado dentro da div content, o javascript necessário será o seguinte:
O Google que até então parecia um serviço indestrutível não é mais o que parece. Após quedas relatadas no Twitter, o que podemos fazer se dependemos desse serviço? Ainda mais aqueles que dependem da Google AJAX Libraries API para que suas aplicações fucionem.
Recentemente descobri uma alterantiva ao Google AJAX Libraries API, onde caso o serviço esteja off-line, ele utiliza o arquivo JavaScript que está hospedado em seu servidor. Basicamente você teria que criar um arquivo JavaScript e colocá-lo antes do fechamento da tag body:
<script type="text/javascript" src="meu-script-google.js"></script>
O conteúdo desse arquivo deve ser o seguinte:
var sc = document.createElement("script");
sc.type = "text/javascript";
// SRC do Google
sc.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?rand=' + Math.random();
var timer = setTimeout(function(){
if (typeof jQuery == 'function') return;
var sc = document.createElement("script");
sc.type = "text/javascript";
// SRC local
sc.src = 'http://www.pinceladasdaweb.com.br/blog/js/jquery-1.3.2.min.js';
document.getElementsByTagName("head")[0].appendChild(sc);
// Tempo em milisegundos antes de carregar o arquivo local.
}, 200);
sc.onload = sc.onreadystatechange = function(e){
clearTimeout(timer);
}
document.getElementsByTagName("head")[0].appendChild(sc);
É uma ótima alternativa, pois caso o serviço fique indisponível, é carregado um JavaScript alternativo.
AxsJax é o novo companheiro dos desenvolvedores no mundo do Ajax. Se trata de um Framework que permite adicionar acessibilidade aos projetos web que fazem o uso de Ajax. Assim, usuários que fazem o uso de tecnologias assistivas ou similares podem desfrutar de todas as características das aplicações.
Exemplos de aplicações que fazem o uso de AxsJax: Google Web Search, Google Reader, Google Scholar e o jogo Jawbreaker. Detalhes sobre o uso e implementação, você pode encontrar em seu showcase.
Hijax é uma nova estratégia para o uso de Ajax que tem como objetivo tornar as páginas web acessíveis, que as páginas web sejam totalmente funcionais para aqueles que não podem fazer o uso de Ajax (por que querem ou não possuem suporte a JavaScript).
Essa técnica se baseia nos termos: progressive enhancement e graceful degradation, duas estratégias que permitem que um sistema informaizado (no nosso caso, uma página web), funcione corretamente caso ocorra a falta de algum componente.
Progressive enhancement parte de uma versão básica totalmente operativa (parte-se de uma página web que faz o menor uso de tecnologias complementares como CSS e JavaScript, tornando-se assim compatível com a maioria dos browsers), já com Graceful degradation se parte do extremo contrário, desenvolvendo para navegadores mais novos, com a possibilidade de que funcione em navegadores antigos.
No caso de Hijax, a estratégia que se emprega para desenvolver com Progressive enhancement é a seguinte:
Primeiramente, vamos entender rapidamente o que significa o modo Quirksmode e o modo StrictMode: Para que nosso código escrito de acordo com a documentação do W3C, funcione adequadamente, os browsers devem interpretá-lo como diz o W3C, e para isso você deve fazer com que os browsers funcionem em modo Strict.
Para isso, basta você escrever um doctype válido, como esse (junto ao início do documento, antes de qualquer coisa):
<!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” lang=”pt-br” xml:lang=”pt-br”>
Dessa maneira o browser assumirá que deve interpretar o código de acordo com as regras do W3C, assegurando-se (dentro do possível), que tudo funcione e acordo com a documentação. Por outro lado, não desenvolvendo dentro dos padrões, o browser assumirá que seu código é da época de antes dos padrões web, e por isso colocará o site em QuirksMode(modo raro), que é mais ou menos a mesma forma de que o Internet Explorer 4 interpretaria sua página, deixando inuilizado tudo aquilo que você aprendeu de acordo com o W3C.
