Pinceladas da WebTutoriais sobre: XHTML, CSS, JavaScript e WebStandards

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.

jQuery oferece bastante funcionalidades Ajax que podem facilitar a tarefa de enviar e fazer requisições asíncronas no servidor. O método mais simples de jQuery para carregar conteúdo através de Ajax é o load(). Esse post tratará de forma simples este comando para mostrar as diferentes formas de uso.

Sintaxe

load(url,parametros,callback)

Inicia uma requisição Ajax a URL solicitada com parâmetros opcionais. Você pode especificar uma opção de callback, que pode ser chamada quando a requisição está completa.

Argumentos

• url: A URL que é solicitada a requisição.
• parâmetros: Um objeto cuja propriedades são serializadas em uma série de parâmetros codificados corretamente e que se passam a requisição. Se utilizado, deve-se especificar se a requisição utiliza o método POST, caso contrário, se omitido, a requisição utiliza o método GET.
• callback: Uma função chamada após a solicitação já ter sido processada.

Continuar lendo »

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.

Referências

• estándares y accesibilidad – AxsJAX: Ajax accesible.

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:

• Primeiro desenvolva o site ao “estilo antigo”, com links e ações de formulários que enviam informações ao servidor e devolvem uma página completa para cada requisição.
• Empregar JavaScript para capturar todos os links e ações dos formulários para enviar a informação mediante XMLHttpRequest. Dessa forma pode-se selecionar quais partes da página devem se atualizar de forma individual, ao invés de recarregar a página toda.

Referências

• DOM Scripting: Hijax
• Hijax
• Hijax: Ajax accesible

Quirksmode vs. StrictMode

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.

Continuar lendo »

Abaixo vocês irão ver uma série de conselhos para evitar cometer erros ao desenvolver sites com ajax:

• Ajax é uma ferramenta, e não um brinquedo: Muitas vezes os desenvolvedores fazem o uso desnecessário de Ajax, onde um simples HTML resolveria tudo.
• Comece bem com o botão voltar do navegador: Este botão é necessário para a Usabilidade, e o JavaScript não se dá muito bem com ele.
• Não avisar ao usuário que ocorreu uma ação: Quando o usuário clica em uma área da página e ocorre uma ação, isso deveria ser avisado a ele para que saiba que os dados estão sendo atualizados.
• Deixar os usuários off-line de lado: A cada dia existem mais e mais usuários com acesso a internet, e nem por isso iremos desenvolver sites para usuários que fazem uso dela, devemos também pensar em usuários que fazem uso de conteúdo off-line, pois com Ajax, o conteúdo é carregado de forma dinâmica, e não teria o mesmo efeito com que navega off-line.
• Deixar o usuário esperando: o ‘A’ de Ajax significa assíncrono, não é necessário que o usuário faça algo para obter dados, nós podemos adiantar sua ações e realizar requisições para obter dados e com isso o usuário não tem que ficar aguardando a resposta.
• Enviar informações simples de forma visível: Em muitas ocasiões enviamos ao navegador os mesmos dados que foram recebidos pela aplicação, a diferença é que a aplicação filtra os dados e nos mostra o que convém. No navegador, embora nem todos mostrem, caso seja apresentado será mostrado.
• Assumir que Ajax é uma plataforma única: Você deve testar suas aplicações Ajax em distintas plataforma que permitem isso, ou seja, em diversos browsers.
• Múltiplos usuários: Se sua aplicação é utilizada por múltiplos usuários, tome cuidado pois podem haver problemas de um vizualizar dados por parte dos outros.
• Excessivo trabalho para o navegador: As vezes o uso excessivo de aplicações Ajax faz com que o browser tenha que executar muitas tarefas, e isso pode não ser bom para o rendimento de uma aplicação.
• Esquecer daqueles que navegam com JavaScript desabilitado: Segundo as estatísticas, 11% dos usuários de Internet navegam com JavaScript desabilitado, por isso é bom pensar em uma alternativa ao Ajax.
• Não utilizar links: Ao carregar conteúdo dinâmico, não esquecer de mostrar os links que levam a esse conteúdo.
• Sair do comum em relação a Usabilidade: Ao permitirmos realizar ações pouco habituais, nos encontramos com a circunstância de que esperamos que o usuário realize uma ação que ele não esperava ser feita. As pessoas estão acostumadas a realizar sempre as mesmas ações.
• Não realizar alterações em cascata: Não devemos esquecer de que quando alteramos parte do conteúdo da página, devemos alterar também partes relacionadas.

Fonte: Sentido Web.

Todos sabem que com Ajax é possível dar maior interatividade a seu site, mas hoje em dia, vejo muitos sites abusarem desse conceito e transformarem uma simples Interface em um ambiente pirotécnico, que com um pouco de bom senso poderia ser evitado. Desenvolvedores começam um projeto novo e já não vem a hora de usar Ajax aqui, Ajax alí, acabam utilizando pra tudo, onde um simples HTML daria conta do recado, é por isso que muitos desenvolvedores hojem, ao invés de progredir, tem somente a regredir. Isso e muito mais informações você pode conferir no site Digilicious.