Link tem que ser link

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...

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.

Ajax - Função rápida e simples

Ae povo,
Vou começando devagar aqui no blog. Tô meio sem tempo por causa do "bendito" TCC, por isso vou postando soluções que eu já desenvolvi lá no fórum Imasters mas que não tiveram a merecida atenção. heheh
ATUALIZAÇÃO: Vejam a versão nova do script (que também permite post) aqui

Bom, primeiramente vou postar algo que vai ajudar muito quem deseja parar de se preocupar com ajax.
Com esta minha função você não vai mais ficar se preocupando com instanciar, definir eventos de retorno, e toda aquela baboseira chata de 10 linhas que agente sempre tem que fazer na hora de usar o XMLHttpRequest.
Usem, testem e se tiverem algo a acrescentar, é só falar. Eu testei com sucesso no FF1.5 e no IE6.
Vantagens:

1. Voce não precisa se preocupar com ficar instanciando ou coisa parecida. É só chamar a ajaxGet.
2. Carrega também scripts javascript que vieram por ajax (exceto funções). Créditos para o skywalker.TO.
3. Permite que voce carregue mais de um elemento ao mesmo tempo assincronamente.
4. Permite que voce jogue o resultado da url em:
   • uma variável javascript,
   • diretamente no innerHTML de um elemento,
   • em um input
   • em um select sem se preocupar com nada.
5. Você não precisa mais ficar se preocupando com a questão do cache.

• Versão atual: 1.2
• Atualizações futuras:
  • Melhorar o carregamento de javascripts que vierem pelo ajax usando a solução do pita.
  • Melhorar a parte de enviar caracteres acentuados usando o encodeURI
• Forma de uso:
• Coloque a função em um arquivo javascript e chame ele na página através do <script src="micoxAjax.js">
• Chame a função assim: ajaxGet( sua_pagina [string] , variavel_ou_objeto_que_recebera_o_retorno [string ou object] , exibe_texto_carregando_ou_nao [true ou false])
• Exemplos de uso:
• Em um elemento qualquer: ajaxGet("http://www.suapagina.com/seuarquivo.htm",document.getElementById("div1"),true)
• Em uma variável javascript: ajaxGet("http://localhost/lojavirtualfree/optionas.htm","document.getElementById('div2').innerHTML",false)
• Em um input text: ajaxGet("http://localhost/lojavirtualfree/optionas.htm",document.getElementById("input1"),false)
• Em um select (preenche com options): ajaxGet("http://localhost/lojavirtualfree/optionas.htm?viva",document.getElementById("select1"),true)

Enfim, a função. Copiem e colem ela em seu micoxAjax.js:

function ajaxGet(url,elemento_retorno,exibe_carregando){
/******
* ajaxGet - Coloca o retorno de uma url em um elemento qualquer
* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.
* A função é grande, coloque-a em um arquivo .js separado.
* Versão: 1.2 - 20/04/2006
* Autor: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br - elmicox.blogspot.com
* Parametros:
* url: string; elemento_retorno: object||string; exibe_carregando:boolean
*  - Se elemento_retorno for um elemento html (inclusive inputs e selects),
*    exibe o retorno no innerHTML / value / options do elemento
*  - Se elemento_retorno for o nome de uma variavel
*    (o nome da variável deve ser declarado por string, pois será feito um eval)
*    a função irá atribuir o retorno à variável ao receber a url.
*******/
   var ajax1 = pegaAjax();
   if(ajax1){
       url = antiCacheRand(url)
       ajax1.onreadystatechange = ajaxOnReady
       ajax1.open("GET", url ,true);
       //ajax1.setRequestHeader("Content-Type", "text/html; charset=iso-8859-1");//"application/x-www-form-urlencoded");
       ajax1.setRequestHeader("Cache-Control", "no-cache");
       ajax1.setRequestHeader("Pragma", "no-cache");
       if(exibe_carregando){ put("Carregando ...")    }
       ajax1.send(null)
       return true;
   }else{
       return false;
   }
   function ajaxOnReady(){
       if (ajax1.readyState==4){
           if(ajax1.status == 200){
               var texto=ajax1.responseText;
               if(texto.indexOf(" ")<0) texto=texto.replace(/\+/g," ");
               //texto=unescape(texto); //descomente esta linha se tiver usado o urlencode no php ou asp
               put(texto);
               extraiScript(texto);
           }else{
               if(exibe_carregando){put("Falha no carregamento. " + httpStatus(ajax1.status));}
           }
           ajax1 = null
       }else if(exibe_carregando){//para mudar o status de cada carregando
               put("Carregando ..." )
       }
   }
   function put(valor){ //coloca o valor na variavel/elemento de retorno
       if((typeof(elemento_retorno)).toLowerCase()=="string"){ //se for o nome da string
           if(valor!="Falha no carregamento"){
               eval(elemento_retorno + '= unescape("' + escape(valor) + '")')
           }
       }else if(elemento_retorno.tagName.toLowerCase()=="input"){
           valor = escape(valor).replace(/\%0D\%0A/g,"")
           elemento_retorno.value = unescape(valor);
       }else if(elemento_retorno.tagName.toLowerCase()=="select"){       
           select_innerHTML(elemento_retorno,valor)
       }else if(elemento_retorno.tagName){
           elemento_retorno.innerHTML = valor;
           //alert(elemento_retorno.innerHTML)
       }   
   }
   function pegaAjax(){ //instancia um novo xmlhttprequest
       //baseado na getXMLHttpObj que possui muitas cópias na net e eu nao sei quem é o autor original
       if(typeof(XMLHttpRequest)!='undefined'){return new XMLHttpRequest();}
       var axO=['Microsoft.XMLHTTP','Msxml2.XMLHTTP','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0'];
       for(var i=0;i<axO.length;i++){ try{ return new ActiveXObject(axO[i]);}catch(e){} }
       return null;
   }
   function httpStatus(stat){ //retorna o texto do erro http
       switch(stat){
           case 0: return "Erro desconhecido de javascript";
           case 400: return "400: Solicitação incompreensível"; break;
           case 403: case 404: return "404: Não foi encontrada a URL solicitada"; break;
           case 405: return "405: O servidor não suporta o método solicitado"; break;
           case 500: return "500: Erro desconhecido de natureza do servidor"; break;
           case 503: return "503: Capacidade máxima do servidor alcançada"; break;
           default: return "Erro " + stat + ". Mais informações em http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html"; break;
       }
   }
   function antiCacheRand(aurl){
       var dt = new Date();
       if(aurl.indexOf("?")>=0){// já tem parametros
           return aurl + "&" + encodeURI(Math.random() + "_" + dt.getTime());
       }else{ return aurl + "?" + encodeURI(Math.random() + "_" + dt.getTime());}
   }
}
function select_innerHTML(objeto,innerHTML){
/******
* select_innerHTML - altera o innerHTML de um select independente se é FF ou IE
* Corrige o problema de não ser possível usar o innerHTML no IE corretamente
* Veja o problema em: http://support.microsoft.com/default.aspx?scid=kb;en-us;276228
* Use a vontade mas coloque meu nome nos créditos. Dúvidas, me mande um email.
* Versão: 1.0 - 06/04/2006
* Autor: Micox - Náiron J.C.G - micoxjcg@yahoo.com.br - elmicox.blogspot.com
* Parametros:
* objeto(tipo object): o select a ser alterado
* innerHTML(tipo string): o novo valor do innerHTML
*******/
   objeto.innerHTML = ""
   var selTemp = document.createElement("micoxselect")
   var opt;
   selTemp.id="micoxselect1"
   document.body.appendChild(selTemp)
   selTemp = document.getElementById("micoxselect1")
   selTemp.style.display="none"
   if(innerHTML.toLowerCase().indexOf("<option")<0){//se não é option eu converto
       innerHTML = "<option>" + innerHTML + "</option>"
   }
   innerHTML = innerHTML.replace(/<option/g,"<span").replace(/<\/option/g,"</span")
   selTemp.innerHTML = innerHTML
   for(var i=0;i<selTemp.childNodes.length;i++){
       if(selTemp.childNodes[i].tagName){
           opt = document.createElement("OPTION")
           for(var j=0;j<selTemp.childNodes[i].attributes.length;j++){
               opt.setAttributeNode(selTemp.childNodes[i].attributes[j].cloneNode(true))
           }
           opt.value = selTemp.childNodes[i].getAttribute("value")
           opt.text = selTemp.childNodes[i].innerHTML
           if(document.all){ //IEca
               objeto.add(opt)
           }else{
               objeto.appendChild(opt)
           }                   
       }   
   }
   document.body.removeChild(selTemp)
   selTemp = null
}

function extraiScript(texto){
//Maravilhosa função feita pelo SkyWalker.TO do imasters/forum
//http://forum.imasters.com.br/index.php?showtopic=165277&
   // inicializa o inicio ><
   var ini = 0;
   // loop enquanto achar um script
   while (ini!=-1){
       // procura uma tag de script
       ini = texto.indexOf('<script', ini);
       // se encontrar
       if (ini >=0){
           // define o inicio para depois do fechamento dessa tag
           ini = texto.indexOf('>', ini) + 1;
           // procura o final do script
           var fim = texto.indexOf('</script>', ini);
           // extrai apenas o script
           codigo = texto.substring(ini,fim);
           // executa o script
           //eval(codigo);
           /**********************
           * Alterado por Micox - micoxjcg@yahoo.com.br
           * Alterei pois com o eval não executava funções.
           ***********************/
           novo = document.createElement("script")
           novo.text = codigo;
           document.body.appendChild(novo);
       }
   }
}

A função oi postada originalmente aqui, com as devidas discussões e atualizações iniciais. Agora postei ela aqui, onde devem prosseguir as discussões.
Té mais... Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.