Ajax Acentuação - 1 linha de código

Posted by micox at Junho 26th, 2007

Atenção: Este artigo trata dos problemas de acentuação na RECUPERAÇÃO de um conteúdo via AJAX e NÃO do envio via métodos GET ou POST. Para o tratamento de problemas no ENVIO, veja esta solução (no sub-capítulo “Recebendo os dados (no PHP)”.

Dúvidas, postem no fórum… Comentários e testes, comentem aqui no blog mesmo.

Explicação:

O XMLHttpRequest, a criança por trás do ajax, trabalha no padrão UTF-8 por default, tanto pra enviar dados quanto pra receber. Isso vem do próprio browser mesmo. Nos primórdios da internet, o Tim Berners-Lee ainda não estava tão preocupado com a internacionalização do HTML. Este esforço só começou a acontecer em novembro de 1995, depois da formação da W3C, onde visavam extender as capacidades do HTML 2 (falarei disso no histórico do HTML que estará presente no meu TCC). Por este motivo o Ajax dá vários problemas com nossos caracteres.

Para tentar resolver este problema, já ví muitas viagens, que usam gambiarras de encode, escape, etc. nos scripts do lado do servidor (asp, php, jsp, etc). Uma complicação só!!!

Em minhas pesquisas, descobri que a forma correta de renderizar nosso português é simplesmente usando o charset ISO-8859-1 e não o UTF-8. Simples assim. Você deve enviar cabeçalhos pro navegador, informando que você usará ISO-8859-1.

Agora é só você configurar seu servidor pra servir ISO-8859-1 por padrão, se você tiver acesso a isto (eu não pesquisei como se faz isso, pesquisem aí quem se interessar) OU indicar o charset no início do seu script server side, com apenas 1 (uma) linha de código!! — Me perdoem o “servidor pra servir”, é que não achei outros termos. :)

“Chega de enrolação mico, e mostra logo comé que faz. Você prometeu que este blog ia ser de coisas práticas…”

O código:

  • ASP:
    <% Response.Charset="ISO-8859-1" %>
  • PHP:
    <?php header("Content-Type: text/html;  charset=ISO-8859-1",true) ?>
  • JSP:
    <%@ page contentType="text/html; charset=ISO-8859-1" %>

Lembrando que os códigos devem ser colocados no início de seu script (pra quem tem pouca experiência com a linguagem).

Testado com sucesso no IE6 e FF1.5, quem puder testar em outros browsers, ou colocar seu testemunho aqui dizendo se funcionou ou não…

Você também pode tentar usar só a tag META em arquivos HTML simples, mas eu não consegui fazer dar certo, se alguém souber o porque, comenta ae…

<META http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>

Ah, dizem as lendas da mozilla.org que o responseXML interpreta corretamente o charset. Ou seja, se você for usar o responseXML, não se preocupe com isso. Eu não testei e não posso opinar sobre o assunto. Se você tiver testado, comente aqui.

<editado data=”27/06/06″>
Colocando aqui o comentário do Ederson sobre o responseXML (valeu Ederson):

…o responseXML interpreta certo sim (testei no Opera 9 e no Firefox 1,5), exceto no IE. Com a sua linha, até o IE aceitou o charset e mostrou os acentos.

</editado&gt/

Observações finais:

Gostaria de lembrar que esta solução que encontrei foi para a recuperação da página no servidor e não para o envio de dados via ajax! A melhor solução que eu achei para o envio dos dados na net foi esta aqui (no sub-capítulo “Recebendo os dados (no PHP)”.

Ah, pode ser que seu problema também esteja sendo gerado pelo banco de dados. Alguns BD’s, guardam seus dados apenas em UTF-8, e aí há a perda de caracteres. Verifique isso também se meu código acima não deu retorno.

É isso aí. Como eu já disse: Dúvidas, postem no fórum… Comentários e testes, comentem aqui no blog mesmo.

Posted in ajax, funções, javascript| 4 Comments | 

Link tem que ser link

Posted by micox at Junho 26th, 2007

Malditas popups, malditos falsos links, MALDITAS POPUPS!!!! AARRRGHHH!

Pronto, acalmei. Bom, hoje vou sair um pouco do objetivo deste blog (só hoje hehe), que prometi NÃO ficar viajando nem divagando, mas sim, mostrando soluções práticas.
É que estas malditas popups e falsos links me tiram do sério.
Não, não me venham dizer pra baixar anti-popups. Sim, é lógico que eu uso o FF.

A questão que eu to levantando agora é daqueles malditos links que você pensa que é link, mas na verdade, lá na barra de rolagem tem escrito um maldito “javascript:open…blablabla…”.
Quais as consequências disso? Bom, a consequencia é que o usuário não consegue acessar aquele conteúdo abrindo sua própria aba, (ou janela pra quem ainda não evoluiu), entre outros problemas.
Desta maldita forma, eu SOU OBRIGADO a abrir a maldita popup (a não ser que faça alguns truques trabalhosos).

Coincidentemente, ontem eu tinha lido um post no fatorW dizendo que os usuários tem que poder usar o site, onde o cara fala muito bem sobre usabilidade básica.
Eu quero apenas abrir o link em outra aba, só isso… Por que eles (e eles, e vários outros ‘eles’) não me deixam???

Os “infográficos” do Terra são uma piada. Pra quê popup naquilo meu deus??!?!!! Alguns usam as malditas popups pra “tentar” esconder o endereço real do visitante, ou pra configurar a janela, mas os do Terra… O endereço real tá à mostra. E a configuração de tela deles as vezes até esconde o conteúdo com uma barra de rolagem… Realmente algo sem motivo.
E o do noblat (na parte da enquete), pra quê popup naquela enquete minha gente???

Por favor my friends, não cometam este pecado mortal…
Desvantagem das popups dessa forma eu não preciso nem falar né?

  • Ganhará o ódio de alguns de seus visitantes (como eu)
  • Usabilidade baixa
  • Acessibilidade baixa
  • Mecanismos buscadores??? Ferrou-se
  • Browsers sem javascript??? Ferrou-se
  • Dificuldade do seu usuário colocar aquela página nos favoritos
  • etc, etc, etc…

Caso realmente seja necessário usar uma popup (não podemos generalizar, há alguns projetos em que popups realmente são necessárias), use com moderação e com algumas técnicas pra reduzir as desvantagens citadas acima:

Não coloque seu javascript direto no href do link. O href do link deve ser usado pra colocar o endereço da página. Assim seu usuário conseguirá abrir seu popup em outra aba diboas e não morrerá de ódio da sua página; os mecanismos de busca conseguirão chegar lá…; browsers sem javascript conseguirão chegar lá…; novamente etc, etc, etc…

“Mas micão, assim ele deixa de ser popup!”. Calma meu filho, minha filha, muitos já escreveram sobre isso (no momento não lembro de nenhum link pra recomendar), mas é só colocar um javascriptzinho no “onclick” do link que abre seu popup.

Comparando:

<script>
  function abrePopup(url){      janela=window.open(url,'janela','width=400,height=500,top=100,left=100,resizable=yes')
  }
</script>
<a href="javascript:abrePopup('http://elmicox.blogspot.com/');" >link maldito </a>
<a href="http://elmicox.blogspot.com/" target="_blank" onclick="abrePopup(this.href);return false;">link beleza</a>

Acho que não preciso explicar o código acima não né? Tá bem simples.
No primeiro link, temos o exemplo maldito, onde você ferra com seu link. Percebam as coisas “bonitas” que aparecem na barra de status no link maldito.

No segundo exemplo, temos um link “menos mal”. O href tá certo, abrindo em um novo target pra quem não quer o popup. Mas se o cara clicar normalmente, o evento onclick é disparado, a popup é aberta com o endereço do link (this.href) e o link é cancelado (return false). Testem aí e vejam. (Não vou entrar em detalhes de javascript não obstrusivo (Unobtrusive JavaScript) aqui não, to com pressa, e muita gente já falou sobre isso. Meu script tá errado nesse ponto sim, preguiça… hhehe)

Teste ele aqui:
link maldito ; link beleza

Melhorando ainda mais… Voce poderia também marcar os links que são popup com uma classe daí colocaria os eventos nele através do attachEvent, e colocar uma estilização diferente nele pra seu visitante saber que se trata de uma popup, colocar uma figurinha ao lado do link, etc… Ficaria bonitim. heheh.

É isso aí povo. Té mais…

Posted in ajax, bate-papo, dicas, javascript, webstandards| 4 Comments |