agosto 2008 – Página: 3 – O Desenvolvedor

Como retirar acentos de um form utilizando javascript?

Publicado 7 de agosto de 2008 por gserrano

Já antecipo que estou aprendendo javascript – e evoluíndo bastante com meus estudos para o novo And After, e eis que trabalhando no novo sistema de buscas internos eu queria limpar a acentuação dos formulários de busca sem utilizar server-side, recorri ao Google para aprender o replace em Javascript.

Falhei em um primeiro momento, o replace do javascript faz a substituição apenas uma vez.

Exemplo que não funciona (com replace)

Se você quer retirar os acentos de "É fácil plantar árvores" e usar um replace para substituir "á" por "a" a substituição acontecerá somente no primeiro "á".

Como eu não estou (estava?) familiarizado com javascript, não sabia das manhas. É possível fazer com replace desde que você crie um pequeno loop.

Exemplo que funciona (com replace)

No exemplo abaixo eu criei uma função para retirar todos os espaços do valor de um input de texto, o exemplo facilita o entendimento de funciona o replace.

function retiraespaco(x) {
var campo = document.getElementById(x)
novo = novo.replace(" ","-");
campo.value = novo;
}

Para retirar todos os espaços eu criei um loop para cada caracter da variável (neste caso o valor do input X). Mas e para retirar todas as possibilidades de acentuação?

Retirando a acentuação de um Input de texto

Você poderia fazer um loop para cada possibilidade, mas seria um trabalhão e o código ficaria grande, recorri novamente ao Google e encontrei em um fórum uma função feita por um tal de Luís, que a seguinte:

function retira_acentos(palavra) {
com_acento = ´áàãâäéèêëíìîïóòõôöúùûüçÁÀÃÂÄÉÈÊËÍÌÎÏÓÒÕÖÔÚÙÛÜÇ´;
sem_acento = ´aaaaaeeeeiiiiooooouuuucAAAAAEEEEIIIIOOOOOUUUUC´;
nova=´´;
for(i=0;i<palavra.length;i++) {
if (com_acento.search(palavra.substr(i,1))>=0) {
nova+=sem_acento.substr(com_acento.search(palavra.substr(i,1)),1);
}
else {
nova+=palavra.substr(i,1);
}
}
return nova;
}

Ainda não fiz testes para entender como funciona o search no javascript, mas mesmo sem entender o funcionamento específico de cada linha do código é fácil implementá-lo para uso. No meu caso eu chamei a função para definir o valor de um input enquanto o usuário digita, retirando automaticamente os acentos do formulário de busca, segue o código do formulário

<form class="form_busca" method="get" action="busca.asp" name="busca">
<input type="text" onkeyup="this.value=retira_acentos(this.value);" class="texto_busca" value="BUSCA" id="query" name="query" />
<input align="absmiddle" type="image" src="https://andafter.org/beta/images/botoes/ok.png" name="Buscar" />
</form>

Pronto, quando o usuário digitar uma busca automaticamente a função irá retirar os assuntos. Não custa nada chamar a função quando o formulário for enviado, fiz testes e as vezes quando o conteúdo é colado no input os acentos podem "escapar", se chamar a função quando o form for enviado não tem erro!

Dúvidas, críticas e correções nos comentários! 😉

Dois monitores no seu pc: algumas impressões a respeito

Publicado 6 de agosto de 2008 por gserrano

No último final-de-semana comprei um monitor novo. 22´ polegadas LCD, widescreen. O preço? R$800
Por coincidência, no começo dessa semana me foi informado (prometido?) um novo monitor no meu trabalho (acho que um de 19´´).
Enquanto os dois não chegam, me veio aquela idéia: "Hummm, porque não utilizar dois monitores ao mesmo tempo?" e fui googlar para ver o que as pessoas por aí acham disso, quais os benefícios, quais os requisítos, como configurar…

Até um tempo atrás, pra ter dois monitores funcionando eram necessárias duas placas de vídeo. Ou seja, além do custo de ter dois monitores, vinha junto o custo das duas placas. Mas – ainda bem – ao mesmo tempo em que o valor dos monitores veio caindo (junto com uma qualidade absurdamente melhor), as placas de vídeo se tornaram mais poderosas e hoje já é possível encontrar muitas no mercado que possibilitam o uso de um segundo monitor. Segundo esse post do INFO Online, "todos os modelos com chip GeForce4 Ti (da nVidia) e as ATI Radeon 9000 ou superiores trazem a opção de usar dois monitores"

A maior parte das placas possui uma entrada VGA (aquela comum) e uma DVI (comumente para monitores LCD); caso nenhum dos seus monitor tenha saída para DVI, pode-se encontrar adaptadores DVI-VGA no mercado (leia aqui um pouco sobre os conectores de vídeo e como eles trabalham). Não me lembro de cabeça de placas de vídeo com duas entradas VGA, mas diz o Google que há! hehe
*e você ainda pode ter uma segunda placa de vídeo (slot PCI ou AGP?) caso a sua original não tenha

Exemplo de placa de vídeo com um slot VGA e um DVI

A maior parte dos sistemas operacionais oferecem suporte a esse uso; o Windows desde a versão 98 possui, as distribuições do Linux também.
Como configurar? Ainda não sei, pois não tive que colocar a mão na massa ainda. Mas pelo que vi, os próprios sistemas operacionais já estão preparados para isso e oferecem interfaces bem intuitivas – e em breve, como terei que fazer isso para o Windows XP e para o Ubuntu – coloco um how-to; mas já vi que pipocam em blogs e sites especializados tutoriais de como fazê-lo.

Acho bacana também citar que, dizem as lendas, ou melhor, algumas pesquisas, que o ganho de produtividade quando se passa a usar um segundo monitor é significativo. Claro, isso depende muito da pessoa, das tarefas que ele efetua, do tempo de utilização (qualquer mudança com o ambiente de trabalho acarreta uma diminuição da produtividade nos primeiros dias, até se acostumar. E eu senti bem isso quando passei a usar o Compiz no Ubuntu).
Pesquisas, desde as mais otimistas até as pessimistas, apontam ganhos entre 10% até 50% em alguns casos. (Veja esse post e esse artigo sobre a produtividade com um segundo monitor)

Bem, eu ainda vou passar por essa mudança nos próximos dias, então depois eu posto aqui qual a minha impressão sobre esse uso. Inclusive estou querendo ver como vou me virar com o uso do efeito do cubo na área de trabalho do Compiz no Ubuntu com um segundo monitor – receio que virará uma bagunça no começo. Mas aí é outra história!

Ah, indico esses dois links como leitura a respeito para quem se interessar 🙂
http://info.abril.com.br/dicas/arquivos/saiba-como-usar-dois-monitores-num-unico-900.shtml
http://www.efetividade.net/2007/04/06/2-monitores-no-seu-pc-ganhe-produtividade-e-reduza-o-stress/

Glossário para alguns termos da web 2.0

Publicado 5 de agosto de 2008 por gserrano

Caso tenha faltado algum termo (certamente faltou) ou você ache que algum deles merece uma correção, comente 🙂

AdSense
Um plano de publicidade do Google que ajuda criadores de sites, entre os quais blogs, a ganhar dinheiro com seu trabalho. Tornou-se a mais importante fonte de receita para as empresas web 2.0. Ao lado dos resultados de busca, o Google oferece anúncios relevantes para o conteúdo de um site, gerando receita para o site a cada vez que o anúncio for clicado

Ajax
é uma metodologia de desenvolvimento, que combina algumas tecnologias – sendo a capacidade de se fazer requisições assíncronas a um servidor via javascript a base dela (não se esquecer que o xhtml, CSS, DOM, etc… fazem parte do pacote)

API
Interface de Programação de Aplicativos. É o conjunto de códigos usados na criação de programas para um determinado site ou serviço. O livre acesso às APIs de um site ou programa (API aberta) permite que programadores desenvolvam novos aplicativos, novas funções para ele.

Beta
“Versão beta” é um termo usado para dizer que determinado programa está em testes. No mundo da tecnologia, é a versão do software lançada para testes antes da versão final.

Blogosfera
Nome dado à comunidade de “blogueiros”, internautas que mantém blogs e dialogam entre si, seja através de comentários ou posts comentando o blog alheio. A etiqueta blogueira manda dar o link sempre que um blog ou post é citado, criando uma rede. Além dos internautas anônimos de todo o mundo, compõem a blogosfera jornalistas (como o Luis Nassif e Marcelo Tas), celebridades (Luana Piovanni é uma das pioneiras do meio na blogosfera brasileira) e políticos (como a vereadora paulistana Soninha e o presidente do Irã Mahmoud Ahmadinejad).

Blogs
Sites pessoais de fácil criação e publicação de mensagens. Podem ser no estilo diário ou especializados em determinados assuntos. As mensagens são organizadas geralmente por ordem cronológica, com as mais recentes no topo da página. Elas podem ser classificadas com palavras-chave que facilitem uma filtragem por parte do leitor, que pode também, na maioria dos blogs, deixar comentários.

Bookmarks
Assim como dá para fazer uma lista de sites favoritos no navegador de internet, é possível manter uma online em um site específico (como o Delicious). Os favoritos são chamados de bookmarks (do inglês, marcador de páginas).

CGU
Conteúdo Gerado por Usuário. Pode se referir tanto a arquivos criados por usuários quanto à personalização de conteúdo e a aplicativos desenvolvidos por eles.

Efeitos de rede
É quando um site, programa ou serviço proporciona a formação de uma rede de usuários, como acontece nos sites de relacionamento ou de compartilhamento de imagens.

Feed RSS
Significa “alimentar” em inglês, e se refere às mensagens do RSS indicando atualizações de determinado site.

Feedreaders
Leitores de feeds. São programas que agrupam todos os feeds que uma pessoa assina.

Folksonomia
Classificação colaborativa de conteúdo (sites, músicas, filmes, textos etc.) com palavras-chave, (também chamadas de keywords, marcadores e tags) livremente escolhidas. Contrasta com a taxonomia, que é a classificação de conteúdo mais rígida, com marcadores previamente definidos. A liberdade na escolha de marcadores da folksonomia (o prefixo “folks” quer dizer “amigos”, em inglês) permite que os internautas usem palavras de vocabulários próprios de cada comunidade, fazendo com que outros usuários interessados no mesmo assunto encontrem o conteúdo mais facilmente.

Marketing viral
É o marketing aliado aos efeitos de rede. São os usuários que divulgam atualizações, novos produtos ou peças publicitárias de maneira livre por interesse próprio. Eles repassam informações por e-mail ou as publicam em sites por achar interessante ou divertido. Para as empresas é ótimo por aliar baixo custo à boa aceitação do público. O termo “viral” é usado metaforicamente para fazer um paralelo com a forma “contagiosa” como vírus se propagam.

Mashup
Quer dizer “mistura”, em inglês. Trata-se da combinação articulada de conteúdos de diversos sites em um só através de uma API ou RSS . Exemplo: um site de indicações de restaurante que combina ferramenta de pesquisa com sistema de localização, comparação de preços e telefonia via web (VoIP – Voz sobre Protocolo de Internet).

Microblogging
Serviço onde o usuário posta mensagens curtas (geralmente de 140 caracteres no máximo) de forma fácil (mensageiro instantâneo, SMS, widgets) e sua rede de contatos pode vê-los. Exemplo é o Twitter

Open source
Significa código fonte aberto. Programas open source divulgam seus códigos fonte para que qualquer pessoa com conhecimento de programação possa modificá-lo, ampliá-lo e melhorá-lo.

P2P
Peer-to-peer. Rede ponto a ponto. Diz-se da rede de conexão entre dois ou mais computadores que não tem relação de cliente/servidor, mas se conectam para trocar arquivos de áudio, vídeo, texto e outros formatos.

Permalink
É o link associado a um post específico de um blog permitindo que este possa ser acessado diretamente mesmo que haja diversas atualizações na página.

Podcast
Uma espécie de blog em áudio, com periodicidade de atualização.

Post
“Publicar”, em inglês. São as mensagens publicadas em blogs ou microblogs, também chamadas de postagens ou entradas.

RSS
Really Simple Syndication (em português fica algo como “distribuição realmente simples”). Mecanismo que dispara avisos cada vez que um site onde o usuário se inscreveu faz atualizações.

Tagging (ou folksonomia)
Uma versão Web 2.0 das listas de sites preferidos, oferecendo aos usuários uma maneira de vincular palavras-chaves a palavras ou imagens que consideram interessantes na internet, ajudando a categorizá-las e a facilitar sua obtenção por outros usuários. O efeito colaborativo de muitos milhares de usuários é um dos pontos centrais de sites como o del.icio.us e o flickr.com. O uso on-line de tagging é classificado também como "folksonomy", já que cria uma distribuição classificada, ou taxonomia, de conteúdo na web, reforçando sua utilidade

SEO
Search Engine Optimization, que significa Otimizador de Ferramenta de Busca. Trata-se de técnicas para melhorar a colocação de determinado site nos resultados de buscadores como o Google, geralmente associando o conteúdo a marcadores (tags) específicos e relevantes.

Tag
“Etiqueta”, em inglês, são palavras-chaves (também chamadas de marcadores), usadas para classificar um conteúdo e facilitar que outros usuários o encontrem.

Wikis
Páginas comunitárias na internet que podem ser alteradas por todos os usuários que têm direitos de acesso. Usadas na internet pública, essas páginas comunitárias geraram fenômenos como a Wikipedia, que é uma enciclopédia on-line escrita por leitores. Usadas em empresas, as wikis estão se tornando uma maneira fácil de trocar idéias para um grupo de trabalhadores envolvido em um projeto.

Referências: http://www1.folha.uol.com.br/folha/informatica/ult124u20173.shtml e http://informatica.hsw.uol.com.br/web-206.htm

Classe para gravar e ler cookies – por javascript

Publicado 4 de agosto de 2008 por gserrano

Juntando a idéia desse post do @gserrano sobre cookies (em ASP) e esse outro que fiz semana passada sobre orientação a objetos em javascript usando a biblioteca Prototype, tive a idéia de disponibilizar uma classe que fiz certa vez para gravar e ker cookies da máquina do usuário da sua aplicação.
*não vou aqui discutir a segurança e todos os outros pontos relativos ao não-uso de cookies (o qual concordo, mas certas vezes temos que fazer coisas na nossa vida profissional que vão contra nossos conceitos, né? :-/ )

Esse é o código da classe:

Cookie.prototype = {
    //construtor padrão
    initialize: function() {
         
    },
    /*
     * salva cookie no formato {chave}={valor};
     */
    setCookie: function(key, value) {
        var the_cookie = key + "=" + value + ";" ;
        document.cookie = the_cookie;
    },
   
    /*
     * retorna valor do cookie
     */
    getCookie: function (key) {
        var search = key + "="
        var returnvalue = "";
        if (document.cookie.length > 0) {
            offset = document.cookie.indexOf(search)
            if (offset != -1) {
                offset += search.length
                end = document.cookie.indexOf(";", offset);
                if (end == -1)
                    end = document.cookie.length;
                returnvalue=unescape(document.cookie.substring(offset, end))
            }
        }
        return returnvalue;
    }
}

A classe é bem simples: um método setCookie(key, value), o qual recebe uma chave e um valor; a chave é usada como o identificador do cookie, e o valor… bem, ele é o valor propriamente dito.
O outro método é o getCookie(key), que é chamado sendo passada a chave (identificador) referente ao cookie que você quer saber o valor que havia sido gravado.

Vale ressaltar que document.cookie é um comando (pensando se esse é o termo correto) nativo do javascript

Segue abaixo um exemplo funcional (html + javascript) onde há um formulário com dois campos. Ao clicar em salvar, é chamada a função que instancia o objeto Cookie e grava os valores. A outra função instância outro objeto Cookie e lê do cookie do browser do usuário, procurando a chave salva.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="prototype.js"></script>
<title>Cookie.js</title>
<script type="text/javascript">
var Cookie = Class.create();
Cookie.prototype = {
    //construtor padrão
    initialize: function() {
         
    },
    /*
     * salva cookie no formato {chave}={valor};
     */
    setCookie: function(key, value) {
        var the_cookie = key + "=" + value + ";" ;
        document.cookie = the_cookie;
    },
   
    /*
     * retorna valor do cookie
     */
    getCookie: function (key) {
        var search = key + "="
        var returnvalue = "";
        if (document.cookie.length > 0) {
            offset = document.cookie.indexOf(search)
            if (offset != -1) {
                offset += search.length
                end = document.cookie.indexOf(";", offset);
                if (end == -1)
                    end = document.cookie.length;
                returnvalue=unescape(document.cookie.substring(offset, end))
            }
        }
        return returnvalue;
    }
}
function salvarCookie() {
    var ck = new Cookie();
    ck.setCookie($F(´key´), $F(´value´));
}
function lerCookie() {
    var ck = new Cookie();
    alert(ck.getCookie($F(´key´)));
}
</script>
</head>
<body>
<h1>Cookie.js - teste</h1>
<form name="cookie" action="#">
    <label for="key">chave:</label><input type="text" name="key" id="key" />
    <label for="value">valor:</label><input type="text" name="value" id="value" />
    <a href="#" onclick="salvarCookie(); return false;" title="salvar cookie">salvar cookie</a>
    <a href="#" onclick="lerCookie(); return false;" title="ler cookie">ler cookie</a>
</form>
</body>
</html>

Telas de erro bizarras

Publicado 2 de agosto de 2008 por gserrano

Nesse post eu mostrei alguns exemplos de páginas de erro 404 bacanas, e que ajudam o usuário a não se sentir perdido. Mas, nem sempre as coisas foram assim, e os programadores desktop de outrora gostavam de complicar as coisas!

error message nero funny

Fontes: http://www.ghacks.net/2006/08/21/funny-error-messages/ e http://www.thehumorarchives.com/joke/Windows_Error_Messages