ERR_CONTENT_DECODING_FAILED no Google Chrome

Eu tive um problema no navegador Google Chrome com o Tadarank.com esses dias.

A página não aparecia no Chrome de jeito nenhum. Exibia um erro:

Error 330 (net::ERR_CONTENT_DECODING_FAILED)


Dando uma pesquisada na net, vi que meu caso poderia ter a ver com encoding Gzip, essas paradas...


Daí resolvi trocando:
header('Content-Encoding: gzip, deflate');


Por
header('Content-Encoding: zlib, deflate, gzip');


Pronto. O problema sumiu.
Talvez esta postagem seja útil pra você. Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Contornar vários bugs do IE numa tacada só

Dean Edwards é o cara.
Pros poucos aqui que não conhecem o site dele, dêem uma visitada geral. Só coisa boa.

Bom, hoje vou me focar na biblioteca IE7 que ele soltou esse ano. Esta biblioteca, magicamente, contorna vários bugs do Internet Explorer e deixa os IE 5, 6 e 7 bem parecidos com o IE8 (ou com o IE 7, você escolhe).

Como assim?

Bem, veja só a descrição:

IE7 is a JavaScript library to make MSIE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6.

• supports the following CSS selectors:
  • parent > child
  • adjacent + sibling
  • adjacent ~ sibling
  • [attr], [attr="value"], [attr~="value"] etc
  • .multiple.classes (fixes bug)
  • :hover, :active, :focus (for all elements)
  • :first-child, :last-child, only-child, nth-child, nth-last-child
  • :check, :disabled, :enabled
  • :empty, :contains(), :not()
  • :before/:after/content:
  • :lang()
• supports imported style sheets
• preserves the cascade of the style sheet
• does not alter the document structure
• does not repeatedly query the DOM tree using JavaScript
• uses pure CSS to enforce style sheet rules
• supports the W3C box model in both standards and quirks mode
• supports fixed positioning (flicker free)
• supports overflow:visible
• supports min/max-width/height
• fixes broken (X)HTML elements (abbr, object)
• standardised forms behavior
• supports PNG alpha transparency
• lightweight script (11KB)
• works for Microsoft Internet Explorer 5+ (Windows only)

Tudo isso apenas adicionando o seguinte script no seu XHTML:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/xx.x/IE8.js" type="text/javascript"></script>

<![endif]-->

Pronto, agora é só usar nos seus novos sites e reduzir a queda de cabelo por causa do IE.
Mas antes, dê uma passadinha lá nos site do projeto, da atualização 2.0 e do google code onde está hospedado e veja as formas corretas de usar.
Depois diga aqui suas experiências (boas ou ruins) com o script :) .

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Web Developer tools no IE, OP e FF

Atualmente todo desenvolvedor web que se preze conhece a incrivelmente salvadora WebDeveloper toolbar do Firefox. Em conjunto com a espetacular Firebug (excesso de adjetivo né? heh) e com com o DOM inspector, o desevolvedor pode achar exatamante onde está o erro/problema e corrigir de forma ultra-fácil. Seja problema no HTML, CSS ou JavaScript.

A bagaça começa a ficar complicada quando o problema SÓ acontece ou no Opera ou no Internet Explorer.
Estes dois navegadores não tem algo como um DOM inspector do Firefox ou as duas extensões citadas antes.

Mas eles tem umas ferramentazinhas que quase dão pro gasto: Opera developer tools e Internet Explorer Developer Toolbar Beta 3.

Internet Explorer Developer Toolbar Beta 3

Eu já tinha ele ha um bom tempo mas não tinha usado. Daí ontem baixei a versão nova (Beta 3), atualizada agora em janeiro.

Instalei o bixo no meu IE6, e como já devem imaginar, não chega aos pés do trio do Firefox (Webdeveloper, Firebug e DomInspector). Mas dá pros gastos. Na hora do aperto com o IE talvez ajude.

Ah, não cliquem nesse primeiro botão aí (chamado "select element by click") pois costuma travar o IE (pra variar).

Algo que chamou a atenção foi o fato de a extensão ter dado um visualizador de códigos descente pro IE.

Opera Developer tools

Os fãs do Opera que me desculpem, mas essas ferramentinhas aí conseguem ser pior que a IE Developer Toolbar beta 3 (que nome pequeno).

Tão mais pra Opera Gambiarra tools.

Além de serem um saco de usar, não mostram nada sobre a principal complicação do Opera que é o suporte ao JavaScript. Ou seja, como o Opera tem um ótimo suporte aos padrões e ao DOM (exceto JavaScript) esta ferramenta aí não vai ajudar muito não.

O IE Dev Toolbar eu recomendo instalar pois pode te ajudar algum dia, mas estas ferramentas do Opera aqui não compensa perder tempo não.

------------------

Eeeeexta post: Há também o Web Accessibility toolbar para o IE, que parece ser porreta, mas o mico aqui não teve muito tempo de testar não.

Se você tá sem assunto pra fazer uma postagem nova no seu blog, aproveita ae e fala melhor dessa toolbar ae. Parece que a danada tem até negócio pra JavaScript. Me pareceu bem completa.

Ah, fala das outras duas aí acima também que eu nem falei quase nada né? "Pode crê mico, pode crê. ".

 

Té mais povo.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Bugs CSS no IE7

Sim, bugs mesmo, e não falta de suporte aos padrões (isso todo mundo já sabe).

Uma listinha:

• Não renderiza z-index alterado por li:hover
• Itálicos com position:absolute
• Problema com botão
• Problemas com lista com position:absolute
• Listinha do google

O mais legal é que a página de feedback do IE tá fora do ar. Eles realmente se importam com os desenvolvedores.

Bom, eu não baixei o Internet Explorer 7 por pura preguiça e falta de necessidade. Também tem a questão que eu não quero perder meu IE6, mas não tô afim de fazer aquelas mágicas complicadas pra usar o IE6 e o IE7 ao mesmo tempo (se alguém souber uma mágica facim e que funcione, me passa ae :-) ).

Quem achava que o IE7 viria nos salvar do IE6 deve estar muito triste. Agora, em vez de ter que se preocupar só com um (1) navegador ruim, temos que nos preocupar com dois (adiciona 1 à conta aí quem testa pro IE5 também).

Só nos resta torcer pro IE7 ser pouco baixado. Assim teremos que fazer menos testes e teremos menos preocupações.

Força para o mundo não-IE! Mesmo que o povo do FireFox seja só 14%, estes 14% fazem muito mais barulho na web pois são hard-users de tecnologia e internet, como disse o Elcio do Tableless.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Caixa Econômica Federal corrige i-Banking

Lembram-se da minha reclamação de que a Caixa Econômica Federal queria, de certa forma, que eu gastasse R$500,00 em licença do Windows para que eu pudesse usar o Internet Banking dela?

Então, graças a diós (não sei se foram graças às minhas reclamações), ela resolveu a questão.

Agora, ela identifica o navegador do usuário e, só solicita a instalação do tal plugin se ver que o cara já está usando o Internet Explorer.

Como eu tinha reclamado antes, achei justo fazer este novo post informando que eles resolveram o problema.

Bom para nós usuários.
Espero que algúem tenha levado um CR lá no depto. de tecnologia da Caixa. :-)

//Ah, terminei meu TCC sobre WebStandards. Já publiquei a apresentação e estou esperando o ano novo pra publicar o texto em PDF aqui pra vocês.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Novo i-banking da Caixa Economica Federal só funciona no IE

Olha só que legal.

Lá estava o mico tentando acessar seu internet banking da Caixa Economica Federal como faz toda semana.

Daí eu vejo que agora eles estão pedindo um novo cadastro no i-banking. Já estranhei de cara, pois já fiz este cadastro a um tempo atrás. Mas vamos lá, vamos fazer novamente. O pior ainda estava por vir.

De repente me jogam em uma maldita tela chamada "Instalando o Módulo de Segurança". Lá vem bomba: é um controle ActiveX que você deve instalar no seu computador para "supostamente" deixar sua conexão mais segura. Que legal né?

Eu, que uso Firefox ficarei sem acesso ao internet banking da caixa. Quem usa outro navegador que não seja o IE, também ficará sem acesso. Quem usa outro Sistema Operacional que não seja o Windows também.

Será que os competentes do departamento de TI deles vivem em um casulo? Nã lêem notícias? Não sabem que o IE só está perdendo mercado? Será que estes caras não lêem jornal, não se atualizam, não acessam sites de TI?? Será que os caras não vêem isto???

Já liguei lá reclamando geral. Me prometeram corrigir até o final da semana. Vamos ver.

Editado 29-12-06: problema corrigido. Vivaa!!

Mais problemas com bancos no post do jader: Acessibilidade e Usabilidade na web: um caso (realmente) sério

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Depurador JavaScript - FireBug

Opa, Bom dia ae povo.

Uma de minhas buscas terminou. Enfim encontrei um depurador Javascript: o FireBug.
Ele é uma extensão para Firefox muito boa. Não tive tempo de testar todas as suas funcionalidades em um script complicado, mas a primeira vista ele me agradou. Permite, entre outras coisas:

• Acompanhar o script passo a passo como voce faz em ferramentas RAD como VB6 e Delphi
• Navegar pelo DOM da página
• Pausar o processamento
• Realizar ações de "Step Over", "Step Into" e "Step Back" (executa o processamento linha a linha)
• Definir BreakPoints (para parar o processamento naquela linha.) (Não consegui fazer funcionar. Resetei a máquina e funcionou)
• Acompanhar requisições especiais como o XMLHttpRequest
• Roda na própria janela/aba da página
• Monitorar eventos
• Monitora erros

Ver telas / previews do FireBug aqui.

Enfim, apesar de alguns bugs, estou satisfeito. É bem melhor que usar o complicado Venkman na minha opinião.
Testem aí e coloquem suas opiniões.

//Extensão descoberta em artigo de Er Galvão.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Swift - Safari para Windows?

Pois é pessoal, hoje saiu no site do WASP a notícia do lançamento pré Alpha (?? isso mesmo pré alpha) do navegador Swift, um "Safari for Windows".

Swift is a new open source browser based on Apple’s WebCore & JavaScriptCore rendering and JavaScript engines.

Na hora, me enchi de esperança de poder testar meus sites direto na engine Safari da Apple, mesmo sem ter um MAC (Apple Macintosh) disponível. Vamos em frente ver o que dá.

A engine usada pra desenvolver o bixo foi a WebKit: A Apple Webkit rendering engine.

Apesar dos avisos de que o software tá muito no zero ("it’s marked as 1.0pre alpha, and it is very much an alpha: very rough-looking UI, no scrollwheel support, pathetic form controls and I’ve had reports from colleagues that some folks can’t even get it to install"), é lógico que eu não contive a curiosidade e fui testar o bixo.

Infelizmente, eu fui um dos que tive problemas já logo na instalação. O meu Windows XP não conseguiu registrar o Webkit.dll. Tentei registrar na mão (linha de comando) usando o regsvr32, mesmo assim não obtive êxito. Tristeza.

Bom, pra quem ainda não conheçe, o jeito é continuar usando o Browsrcamp pra visualizar meus sites no Safari 2.0.4. É a vida. hehe. Vamos aguardar o Swift ficar melhor.

Testem aí e me digam se conseguiram. Se eu tiver êxito em minhas tentativas futuras (lá em casa) postarei aqui.
Té mais...

Link original da notícia no WASP: Safari for Windows

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Gerenciador de Arquivos para GMail no FF

Ae pessoal,

Novamente, vagabundando na net, encontrei uma extensão para Firefox que eu achei muito útil e acho que convém postar aqui.

Ela permite que voce utilize o espaço de armazenamento do Gmail para guardar arquivos como se fossem um Gerenciador de arquivos do Windows.

Bom, eu já baixei e já to usando aqui com muito gosto. O nome do bixo é Gmail Space. Baixem ele, sei que vão gostar.

Quem já conheçe o GMail Drive sabe do que eu estou falando. Só que, diferentemente do GMail Drive (que roda no Explorer do Windows), esta é uma extensão para Firefox, e, teoricamente, deve rodar em qualquer plataforma que suporte o Firefox, seja Linux, Windows, etc...

Coloquei um botão para ele na minha barra de ferramentas, daí quando quero enviar algum arquivo é só clicar no botão que ele já pode enviar o arquivo em uma nova aba. No Gmail, o arquivo chega com o assunto contendo "GSPACE", daí ficou fácil fazer um filtro lá no Gmail que coloca o marcador "Arquivo" na mensagem.

Assim eu instalo a extensão aqui no serviço e lá em casa e posso trabalhar com meus arquivos tranquilamente.

<editado data="22/06/06">
Atenção pessoal, só tomem cuidado com algumas extensões que baixarem.
Esta que postei do GSpace costuma falhar a barra de endereços do Firefox.
Tomem cuidado também com a extensão Wikipedia toolbar pois, como eu falei para o Gio outro dia, ela trava o Control+C e a tecla TAB.
Enfim, se estiverem tendo problemas com seu Firefox, desconfie primeiro das extensões hehe :)
</editado>

Página do desenvolvedor com um vídeo de exemplo de utilização e links patrocinados pra ajudar o cara: http://www.rjonna.com/ext/gspace.php

É isso aí. Espero que gostem. Té mais pessoas...

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Pesquisas no FF para Desenvolvedores Web

Hou,

Ó nois aqui dinovo postando coisas sem ser exemplos práticos como prometi. hehe Hoje, em vez de fazer meu TCC como deveria (sou um vagabundo), estava era navegando atoa na net. Tava passeando no site do mozilla e ví uma matéria interessante: como adicionar seus próprios mecanismos de pesquisa no Firefox. Daí lá vai o micox brincar de fazer barras de pesquisa. Pra quem interessar aí, fiz algumas que acho importantes para mim. Talvez sejam importante pra vocês desenvolvedores também.

Baixem aí.. heheh té mais...

1. Referência web oficial W3C
2. Referência web ótima feita pelo Mozilla
3. Referência web by MSDN
4. Busca no site do maujor
5. Busca no site do imasters
6. Busca no fórum do imasters

PS.: Infelizmente no momento, devido a um bug, o Firefox só aceita pesquisas com o método GET. Por isso a busca no fórum do imasters teve de ser feita pelo google mesmo, pois o invision não aceita pesquisas via GET.

PS2.: Caso alguma das pesquisas não funcione corretamente, me avisem. É que eu upei os arquivos só que não deu pra testar pois as buscas JÁ estavam instaladas no meu FF aqui.

Ah, caso suas pesquisas tenham ficado desorganizadas, indico um organizador das pesquisas. A extensão Search engine ordering.

Té mais povo.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.

Script - Quebra de palavras (word-wrap) no FF

Quebra de palavra quando nao couber na largura do elemento

Importante: Nova versão melhorada deste script disponível em Word-wrap para Firefox - versão revisada.

Continuando a postagem de soluções que eu fiz no fórum do Imasters (Agora o fórum da vez é o iEvolution. Postei esta solução lá. Visitem e tirem suas dúvidas sobre ela lá.), hoje vou postar uma solução para a questão da quebra de palavras grandes que não ocorre no Firefox (FF). O IE faz a quebra da palavra, já em outros browsers eu não testei.

Não sei se é recomendação quebrar a palavra quando não couber na largura, ou não quebrar. Só sei que as vezes, palavras grandes ultrapassam a largura e acabam com nosso layout. Se alguém souber o que diz a W3C, poste um comentário ae...

Se já tiver algo na net como esta função minha, postem aí pra eu conhecer.
Usem, comentem e critiquem a vontade. Dúvidas, postem no fórum.
Só não esqueçam de deixar meus créditos que fazer a função deu trabalho né : )

O problema

(Baseei o texto do problema na postagem do Leandro Vieira que coincidentemente é colunista de Dreamweaver do Imasters)

Suponhamos que você tenha a seguinte marcação:

<style>
#url {
width: 400px;
}
</style>
<div id="url">
    <p>URL:</p>
    <p>http://www.google.com.br/search?hl=pt-BR&q=blableblibloblu&btnG=Pesquisa+Google&meta= </p>
</div>

O IE irá renderizar mais ou menos assim:

URL
http://www.google.com.br/search?hl=pt-
BR&q=plugsites&btnG=Pesquisa+Google&meta=

Já o Firefox irá renderizar sem quebrar a url, o que pode acabar com nosso layout e ficar sobre outros textos importantes. Perceba que o texto quebrou a largura do elemento:

URL
http://www.google.com.br/search?hl=pt-BR&q...Pesquisa+Google

 

Isso é um grande problema, a marcação para word-wrap só virá com o CSS 3 que ainda não está implementado nos browsers.
O macaco aqui ficou 3 horas procurando a solução na net, na referencia oficial do Mozilla, do MSDN e não encontrou nada pra resolver a pendenga.
O que fazer então? Quebra o texto na mão (isso não é bom pra textos dinâmicos)? Arrancar os cabelos?!!

Calma, eu acabei tendo que ralar a cabeçola e ficar algumas horas desenvolvendo uma função em javascript que fizesse a tal quebra da palavra. A tão desejada "word-wrap" para o Firefox!!

A solução

Bom, minha função procura os elementos p que tiverem a classe word-wrap daí pega a largura do bixo e estima quantas letras caberiam nesta largura. Daí ela faz a quebra nesta quantidade de letras. Não entendeu? Então apenas use. hehe

<style>
#url { border:1px solid black; width:50px; }
p {border:1px solid blue; }
</style>
<script>
function wordWrap(){
/******
* wordWrap - Efetua quebra em palavras que não cabem na largura
*            de seu elemento pai (até que chegue o CSS3)
* Use a vontade mas coloque meu nome nos créditos. Tenha ética.
* Dúvidas, me mande um email.
* Versão: 1.0 - 26/04/2006
* Autor: Micox - Náiron José C. Guimarães - micoxjcg@yahoo.com.br
* Uso: chame a função no onload do body.
*      coloque a classe "word-wrap" nos parágrafos que quiser a quebra
*******/
    var larg_total,larg_carac,quant_quebra,pos_quebra;
    var elementos,quem, caracs, texto, display_orig;
    
    elementos = document.getElementsByTagName("p")
    
    for(var i=0; i<elementos.length;i++){
        if(elementos[i].className=="word-wrap"){
            quem = elementos[i];
            
            quem.innerHTML = String(quem.innerHTML).replace(/ /g,"Ø")
            texto = String(quem.innerHTML)
            
            quem.innerHTML = " "
            
            display_orig = quem.style.display;
            quem.style.display="block";
            larg_oficial = quem.offsetWidth;
            //alert("oficial: " + larg_oficial)
            //alert("display " + quem.style.display)
            if(!document.all) quem.style.display="table";
            //alert("display " + quem.style.display)
            quem.innerHTML = texto;
            larg_total = quem.offsetWidth;
            //alert("total: " + larg_total)
            
            pos_quebra = 0;
            caracs = texto.length;
            texto = texto.replace(/Ø/g," ")
            larg_carac = larg_total / caracs
            if(larg_total>larg_oficial){
                quant_quebra = parseInt(larg_oficial/larg_carac)
                quant_quebra = quant_quebra - (parseInt(quant_quebra/6)) //quanto menor o num, maior a garantia;
                quem.innerHTML = ""
                while(pos_quebra<=caracs){
                    quem.innerHTML = quem.innerHTML + texto.substring(pos_quebra,pos_quebra + quant_quebra) + " "
                    pos_quebra = pos_quebra + quant_quebra;
                }
            }else{
                quem.innerHTML = texto;
            }//end if do larg_total>larg_oficial
            quem.style.display = display_orig;
        }//end if do word wrap
    }//end for loop dos elementos
}
</script>
<body onload="wordWrap()">
<div id="url">
    <p>URL:</p>
    <p class="word-wrap">lala </p>
    <p class="word-wrap">EstaEUmaLinhaQueDeveraSerQuebradaPoisÉGrandeDemais</p>
    <p  class="word-wrap">EstaEOutraLinha,QueDeveraSerQuebrada.PoisÉGrandeDemais.MasComPontuacao</p>
    <p  class="word-wrap">abc defgh 890123456789012 ijklmnopqrstu 9012345678901 vivaO micox </p>
    <p  class="word-wrap">Vou colocar aqui uma frase comum pragente ver comé que ela se comporta</p>
</div>
</body>

Testado apenas no FF1.5 e no IE6. Quem testar em outros posta ae.

Té a próxima.

Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.