08/10/2009Ajax - Entendendo a Tecnologia
Atigo Originalmente publicado no MX Studio em 2007.
Este é o primeiro artigo falando especificamente sobre Ajax do blog, e também é o primeiro de uma seqüência de textos onde eu pretendo explicar Ajax desde a sua concepção mais básica até usos mais elaborados da tecnologia.
Uma coisa que eu tenho percebido navegando na internet é que a maioria dos tutoriais sobre Ajax está fortemente baseada em frameworks que facilitam o trabalho. Eu particularmente não gosto de usar frameworks por dois motivos, um porque eu me sinto sem controle sobre a aplicação que eu estou desenvolvendo, e dois porque eu acho que só se aprende realmente codificando na marra. Nada contra quem usa frameworks, longe disso, mas nesta seqüência de textos eu pretendo ensinar Ajax sem o uso de nenhum framework. Então preparem seu bloco de notas e mãos à obra.
Basicamente existem dois tipos de aplicações hoje em dia, aplicações web e aplicações desktop. Ambas têm suas vantagens e desvantagens. A grande vantagem das aplicações desktop é a velocidade de execução das mesmas, pois rodam localmente no computador do usuário. A grande vantagem das aplicações web é o fato de poderem ser acessadas de qualquer lugar que tenha internet, além de não precisarem ser instaladas na máquina do usuário. O problema das mesmas é a velocidade de execução, que muitas vezes deixa a desejar devido a velocidade das conexões e os temíveis recarregamentos de página.
A promessa do Ajax é unir o poder das aplicações desktop com a flexibilidade das aplicações web, eliminando o recarregamento de página, mas como ele faz isso? Pois bem, sempre que entramos em um site o nosso navegador faz uma requisição de uma página para o servidor, que nos devolve uma nova página remodelada de acordo com a requisição do navegador. Só que por menor que seja a mudança na página, sempre exige um recarregamento da mesma. O Ajax utiliza um objeto javascript (XMLHttp Request) para efetuar suas requisições em segundo plano, sem que o usuário perceba, mudando apenas partes da página sem precisar de recarregamento.
Este objeto XMLHttp request é a base da tecnologia, pois ele é o elo de comunicação entre o servidor e o navegador, o que permite efetuar uma requisição assíncrona (fora do sincronismo normal da página, que não necessita de recarregamento da página), segura, e rápida, pois muda apenas o necessário na página. Quando a requisição é muito grande ele nos permite colocar um pre-loader estilo flash para mostrar ao usuário que os dados estão carregando.
O Ajax está sendo usado em larga escala na web, o Google usa e abusa desta tecnologia em seus sites/aplicações. Um grande exemplo disso é o magnífico Google Maps(http://maps.google.com) e o Gmail(http://www.gmail.com). O futuro da web está no Ajax, pois estamos chegando num ponto onde aplicações web e aplicações desktop estão caminhando cada vez mais juntas, rumo a um novo modelo de programação que revolucionará a informática, e cabe a nós, desenvolvedores, fazer com que esta tecnologia seja cada vez mais difundida.
Por hoje é só, e preparem seus blocos de notas, pois semana que vem começa a parte prática do Ajax.
08/10/2009Acessibilidade nas Imagens
Atigo Originalmente publicado no MX Studio em 2007.
Pois bem, você desenha um layout lindo, com texturas e efeitos fantásticos, animações boas, vídeos, enfim, tudo que um site “chamativo” precisa ter, mas e quando chega na hora do título? Sim, aqueles títulos que você escreveu com uma fonte encontrada num site Tchekolosvako-Russo-Tailandês que nem você saberia encontrar de novo, e que com certeza o usuário não tem instalada na máquina, mas como ficou bonito no layout você não pode retirar. A solução é usar uma imagem no lugar do texto, mas daí quando o site for acessado com um leitor de tela, como não existe texto, o cego simplesmente não vai ter acesso aos títulos, o que torna a navegação dele extremamente complicada.
Você pode estar pensando, “mas se eu colocar um atributo alt(onde deve se inserir um texto alternativo) na imagem ela fica acessível a leitores de tela”. Ótimo raciocínio, realmente fica acessível, mas daí fica invisível ao Google, pois o Google analisa textos, e não imagens, num caso desses o nome da imagem tem mais relevância ao Google do que o próprio atributo alt(Google Images tá aí pra provar). Além de tornar o site muito confuso para pessoas que o acessarem com um navegador somente texto.
Agora sim temos um problema, mas não é muito complicado de resolvê-lo. A melhor solução, na minha opinião, seria deixar o texto no código html e substituí-lo pela imagem através da CSS, pois muitos leitores de tela não interpretam CSS e vão ler o texto, e se interpretarem vão também ler o texto, pois a marcação HTML tem precedência sobre a CSS num mecanismo de leitura de tela.
Imagine o código html assim:
…
<h1>Meu Título numa fonte muito desconhecida</h1>
…
Então na css você faria o seguinte:
…
h1 {
text-indent: -20000px;
display: block;
width: largura da imagem;
height: altura da imagem;
background: url(caminho da imagem) no-repeat;
}
…
Agora vou às explicações.
O text-indent serve pra indentar o texto. No nosso caso vamos usá-lo para esconder o texto, tirá-lo da tela, pois usando uma medida negativa ele vai ser indentado para a esquerda, como indicamos -20000px. ele vai ser indentado 20000px para a esquerda, ou seja, vai ficar escondido para qualquer monitor que use uma resolução de vídeo com menos de 20000px de largura. Assim visualmente o texto não aparece, e pode ser substituído por uma imagem, e continua visível para os leitores de tela no html, sem contar que o Google vai poder interpretar o texto e vai colocá-lo uns pontinhos à frente em uma busca.
O display é mudado para block para você poder indicar uma altura e uma largura para a tag, que devem ser a mesma altura e largura da imagem que será usada como plano de fundo. Caso você não mude o display, em alguns navegadores a imagem simplesmente não irá aparecer.
Width e height dispensam explicações, são simplesmente indicações de largura e altura, que devem ser as mesmas da imagem que será usada.
E por fim colocamos nossa imagem como plano de fundo da tag usando a propriedade background. Assim nós temos nosso título acessível aos leitores de tela, acessível a navegadores somente texto e muito bem visível aos mecanismos de busca.
Outra consideração a ser tomada com imagens é quanto ao texto alternativo (atributo alt). Sempre que você usar uma tag img para inserir imagens no seu site é altamente recomendável indicar um texto alternativo para quem não puder visualizar a foto saber do que se trata essa foto. Na prática ficaria assim:
…
<img src=”flor.jpg” alt=”Flor do tipo rosa cor vermelha” />
…
Assim sua imagem fica acessível tanto para leitores de tela quanto para nevegadores somente texto, que exibirão o texto alternativo no lugar da foto. E no caso da foto não carregar o texto alternativo aparece para a pessoa saber do que se trata a foto, além de que assim seu site tem mais conteúdo e ficar melhor colocado numa busca.
Um cuidado a ser tomado com o atributo alt é quanto ao seu conteúdo, pois convenhamos que um texto alternativo do tipo “foto1” não ajuda muito um deficiente.
08/10/2009História do Javascript
Atigo Originalmente publicado no MX Studio em 2007.
Javascript foi concebida inicialmente para ser uma linguagem de criação de scripts server-side, que vinha implantada nos servidores web da Netscape(aliás, a Netscape foi quem inventou a linguagem). A Microsoft viu que esse negócio de linguagem de scripts server-side dava certo e então resolveu criar sua própria linguagem de script(batizada de JScript), e a implementou no seu servidor web IIS. Mas a Netscape não se conformou com isso, e teve outra idéia genial, e se no lugar do servidor, o agente do usuário pudesse processar os scripts, não seria muito mais rápida a resposta de uso? Pois estavam certos, e assim foi concebida a idéia de linguagem client-side.
Como o Netscape Navigator dominava o mercado, o alastramento de scripts nas páginas web foi bem rápido, e como a Microsoft estava perdendo mercado em navegadores, ela também resolveu adaptar sua linguagem de modo que pudesse rodar no navegador, e a implementou no internet explorer, e incorporou este no seu sistema operacional(quem não lembra do famoso Windows 95 com Internet Explorer?). Resultado, o navegador da Microsoft dominou o mercado.
Neste ponto da história existiam duas ótimas linguagens de scripts, o único problema é que ambas só funcionavam em seu navegador de origem, o que deixava os desenvolvedores de cabelos arrepiados (incompatibilidades semelhantes ainda assombram os profissionais da web hoje em dia).
Ao perceber este problema, uma empresa chamada ECMA resolveu padronizar a linguagem de modo que pudesse funcionar em todos os navegadores. Desta idéia nasceu um padrão chamado ECMA – 252, e a linguagem foi batizada de ECMAScript(na verdade hoje em dia nós dizemos que programamos em Javascript, quando na verdade o que escrevemos é ECMAScript)
ECMA Script se divide em 3 versões, ECMA V1, ECMA V2 e ECMA V3.
Em ECMA V1 não existiam instruções do tipo switch e expressões regulares, consequemente não são suportados em Javascript 1.3 e Jscript 3.0. ECMA V2 é idêntica a ECMA V1, apenas com a correção de alguns bugs, sem implementação de novos recursos. A versão atual em uso é ECMA V3. Jscript 5.5 e 5.6 são exatamente iguais quando falamos em linguagem client-side.
Como você viu, javascript pode ser usado tanto client-side como server-side, mas neste texto iremos abordar apenas a codificação client-side, pois é a mais utilizada e que mais nos interessa(nós que trabalhamos na área de desenvolvimento web).
O javascript usado na web é uma união do interpretador javascript(fornecido pela Microsoft e pela Mozilla para quem quiser implementar a linguagem em suas aplicações) com um navegador web compatível e com o DOM(Document Object Model recomendado pela W3C). Queria deixar bem claro que nenhum navegador atual suporta todos os recursos do DOM, mas suportam o suficiente para que seja possível seu uso em união ao javascript.
Agora que você já sabe o que é javascript, está na hora de você saber o que ele pode fazer. Muita gente não estuda javascript à fundo por acreditar no mito de que se trata apenas de uma linguagem para fazer validação de formulários. Graças a Deus estão enganados. Javascript é uma linguagem poderosa, que permite desde validar campos de entrada até criar pequenos jogos dentro do navegador, passando por barras de rolagem personalizadas em elementos da página e chamadas assíncronas de dados (famoso Ajax). Javascript tem controle sobre a aparência do documento (pode modificar o HTML e o CSS da página), sobre o agente do usuário(através do objeto window pode acessar e modificar várias opções do navegador, com algumas limitações de segurança, logicamente), tem interação com o usuário(através dos tratadores de eventos que serão explicados no próximo texto), gravação de cookies e acesso à opções do monitor(através do objeto screen). As maiores limitações da linguagem são o fato de, por questões de segurança, não possuir acesso à arquivos locais do computador do usuário(grande problema enfrentado pelas pessoas que tentam fazer sistemas de upload por ajax), não ter suporte a recursos de rede e não possuir recursos gráficos(apenas pode modificar o HTML e CSS da página).
Bom, por hoje é só, espero que tenham gostado. Num próximo texto estarei entrando mais a fundo nos temas citados hoje, e também estarei falando um pouco mais sobre padrões de programação.
Anderson Triacca
Estudante Universitário de Design Gráfico pela Universidade de Caxias do Sul, certificado em desenvolvimento Ajax pelo grupo Processor Alfamídia de Porto Alegre e acima de tudo Desenvolvedor Web.
