15 pras 7

Um dos problemas de atualizar o Melancia é que não gosto de colocar qualquer coisa aqui. Talvez por elevar demais o “nível de corte” acabo não postando nada. Por outro lado acompanho vários blogs/tumblrs/etc engraçados que não compartilho aqui, então a solução foi criar um tumblr, o 15 pras 7. O motivo do nome está no primeiro post, que também mostra o nível de babaquices coisas que pretendo publicar por lá.

O Melancia não vai acabar (pelo menos não agora), mas até pelo próprio formato, o tumblr vai ser atualizado com bem mais frequencia, mais ou menos uma vez por dia.

Abs!

E a hipocrisia vos empregará

Seja um visionário você também. É só dizer que alguma coisa vai mudar drasticamente o mercado, que alguma tecnologia vem pra derrubar conceitos ou que depois de tal coisa nada vai ser como antes. Depois haja como o mestre do assunto, tuite com as hashtags certas, fale mal de alguém mais famoso que você e voi lá, sua fama está pronta. Você vai se passar por uma coisa que não é – inteligente, no caso – o que acaba sendo hipocrisia, mas se você vender a sua imagem direitinho até consegue um bom emprego. Vai ser difícil se sustentar nele, mas aí já é uma outra história.

No último Circuito 4×1 o Jonatas Abbott, da Dinamize, falou sobre o não fim da TV, traçando um paralelo com o não fim do e-mail. Ele mostrou revoltado uma matéria da Exame onde a repórter simplesmente surta, dizendo que o e-mail vai acabar. Olha a fórmula aí, pegou uma coisa já estabelecida e disse que aquilo ia acabar. Pegaram a TV e disseram que, com o crescimento da internet, ela ia acabar. Pegaram o e-mail e disseram que, com o crescimento dos IMs e redes sociais, ele ia acabar. Pegaram os jornais impressos e disseram que, com o crescimento dos blogs, eles iam acabar. Pegaram o mundo e disseram que, depois de 2012 ele ia acabar. Mania de Apocalipse devia ser o nome disso. E não Apocalipse como fim do mundo não, Apocalipse como revelação, afinal os visionários são esses seres escolhidos para portarem a mensagem de fim das coisas. E o portador da mensagem, amigo, às vezes se torna mais importante que a própria mensagem.

Se um cachorro morde alguém não é notícia, mas se alguém morde o cachorro… Façamos sensacionalismo então, vamos ser pit bulls sendo mordidos por crianças de seis anos, completamente inofensivas. Depois a gente faz um networking legal com os outros do canil, manda uns curriculos e monta nossa matilha feliz, mantendo os amigos perto e as crianças inofensivas mais perto ainda.

09/02/10 – Dia da Internet Segura

Você pode não saber mas hoje é o Dia da Internet Segura, uma campanha que começou na Europa e foi abraçada por outros países como o Brasil. A iniciativa rola desde 2003 e em 2009 já contava com 65 países incluindo o Brasil, que vai pra sua terceira participação.

Dia da Internet Segura - 2010Banner de divulgação da Campanha.

Numa época onde todo mundo fala de tudo, coloca foto de tudo, vídeo de tudo, enfim tudo de tudo, o tema deste ano será Pense Antes de Postar. Cuidados idiotas que todo mundo já devia estar careca de saber como por exemplo a correta utilização da privacidade das Redes Sociais (coisas que só os seus amigos podem saber, e etc.), não postar fotos comprometedoras (suas ou da sua vizinha gostosa que passeia na janela só de calcinha), não falar da vida do seu filho de 10 anos por aí – alertando seu filho de 10 anos a fazer a mesma coisa – e por aí vai, serão discutidos nesse dia.

Infelizmente, pelo menos pra mim que estou no Rio, as principais atividades no Brasil rolam em São Paulo, mas com transmissão ao vivo no site http://www.internetsegura.br. A lista completa de eventos contempla os estados da Paraíba, Minas Gerais, Acre – pasmem, a internet chegou lá – e o Rio de Janeiro, com uma oficina de educadores que o site não diz onde vai ser.

Esse tipo de coisa é até bacana, mas não pode ficar num dia só. Chega em Junho… pff, em Junho! Depois do Carnaval o povo já tá divulgando a vida aí a torto e a direito. Calma lá minha gente, Pensem Antes de Postar, por favor.

Abaixo o vídeo de divulgação da campanha, com o mousezinho fazendo M pra ilustrar.

Na internet nada se cria, tudo se copia – que pena

Voltei a tentar ler meus feeds no Google Reader. Invariavelmente vou direto numa tag de nome “Humor”, onde estão os blogs de tirinhas e de posts engraçados, só pra relaxar um pouco a minha mente,  mas uma coisa me espantou – sim, eu sei que sou garoto por ficar espantado com isso – vários posts repetidos em blogs diferentes. Não eram poucos não, minha gente, eram vários.

Antes de criar este blog eu tinha dúvidas de como sustentá-lo. Não queria ser só mais um, queria ter uma coisa diferente e fazer um blog diferente é bem difícil (não consegui até hoje), mas alguém me contou uma teoria interessante: a dos açougues na mesma rua. Calma que eu explico: falei que queria fazer um blog de desenvolvimento, mas já existiam vários então achava que tudo ficava meio sem propósito e alguém me disse “Mas agora não podem ter dois açougues na mesma rua?”. Depois disso decidi tentar.

O blog não é de desenvolvimento, ou pelo menos não só disso, mas eu tento criar alguma coisa que você não vai ver em nenhum outro lugar. Uma opinião – a minha – sobre fatos do cotidiano, uma ou outra visão engraçada, mas tudo original. Pode não ser bom – nem engraçado, admito -, mas é original.

Se na internet nada se cria tudo se copia estou no lugar errado. Parodiando o Leão Lobo (a que ponto chegamos): Originalidade já.

Internet força e internet arte

Antes havia o futebol arte. Dribles do Garrincha, gols do Pelé e etc. formavam uma imagem do futebol bem diferente da atual, caracterizada pela técnica e força física dos jogadores – o futebol força. A divisão arte/força não se restringiu só ao futebol e se expandiu para todas as áreas. Os desfiles de escola de samba, por exemplo. Se antes era tudo arte, inovação e mensagens bem trabalhadas hoje existe o “desfile técnico”. Até roubar antigamente era mais difícil. A habilidade dos batedores de carteira deu lugar à força bruta usada hoje pelos traficantes.

O surgimento de regras, técnicas, manuais e coisas do gênero contribuíram pra essa mudança. O ”assim dá certo” é aplicado em várias (pra não dizer em todas) as áreas, o que tem aspectos bem positivos, mas tira um certo brilho e intimida a inovação. Tudo vira uma linha de produção, com coisas iguais, repetidas, tediosas, que até cumprem o objetivo, mas fazem só isso.

A internet é um exemplo. Antes o empirismo era tudo, não havia regras de usabilidade, nem Nielsen, nem ninguém. Muita gente mandava mal, mas alguns criaram conceitos. Vieram os manuais de usabilidade e as coisas mudaram. Sites que vão só no “assim dá certo” de fato dão certo, mas raramente inovam. Fazem um desfile técnico, marcam gol sem driblar.

Jogar as diretrizes de usabilidade do Nielsen no lixo? Com certeza não. Mas novos conceitos ainda são possíveis e precisam ser inventados. O mundo não é estático e a internet é ainda mais dinâmica que tudo. Arriscar uma inovação e criar conceitos novos, simples mas revolucionários, são os passos dos gênios em todas as áreas.

SEO dá dinheiro pro seu cliente… Ou não?!

Quinta-feira passada fui no Circuito Rio Digital, promovido pela Abradi-RJ e assisti às palestras do @webpaulo e do @alvinerius (Robert Rodrigues), ambas com foco em SEO. Depois de um exemplo do Robert Rodrigues ficou uma dúvida: SEO garante retorno pro seu cliente?

Um dos exemplos usados na palestra do Robert me chamou muita atenção: dois livros com a mesma proposta, mais ou menos o mesmo título, mas com uma diferença: um deles tinha nove vezes mais visitas que o outro. O motivo era a url que parecia mais com o que o usuário procurava e, portanto, indexava melhor. A diferença é gritante, afinal são nove vezes mais pessoas vendo o produto do cliente. Nove!

A taxa de conversão (usuários que entram e realmente compram alguma coisa) em sites de comércio eletrônico varia em torno de 2 a 3%. A amazon converte 9.6% mais ou menos, embora existam alguns casos que a taxa de conversão chegue aos 35% ou passe disso, mas pro caso médio valem mesmo os 3%. Façamos as contas então:

  • Se o site com número de visitas menor é um fenômeno em vendas e tem uma taxa de conversão de 10%, a cada 100 pessoas que entram no site 10 compram alguma coisa;
  • Se o site com número maior é o caso médio e converte 3% a cada 100 pessoas, apenas 3 compram alguma coisa, mas à proporção que no de menor visitação entram 100 no de maior entram 900, portanto são 27 pessoas comprando.

Com uma medida simples de SEO, que é a alteração da url para algo que seja mais forte e próximo do usuário o site de maior visitação levou vantagem sobre o de menor. Agora imaginem se o site de maior visitação conseguir melhorar sua taxa de conversão!

Entretanto o caso do Robert é exagero. Se ao invés de nove fossem só três vezes mais visitas a conta daria diferente e outros aspectos apareceriam, como o site ter mais tráfego sem gerar dinheiro, gerando custo com hospedagem, por exemplo.

É lógico deduzir que um fator importantíssimo dentro da série de fatores que envolvem a efetivação da compra por parte do usuário é a usabilidade. Se ele não conseguir comprar ele não está entre os 3%. Você pode colocar os títulos das páginas em tags <h1> o que é muito bom pra SEO, mas colocá-las com o mesmo tamanho do texto no CSS, o que é péssimo pra usabilidade, portanto SEO não necessariamente é bom para o usuário. Além de usabilidade existem outros fatores que são decisivos para a conversão como de onde veio o usuário e até em que época do ano estamos.

Onde eu quero chegar?! Sabia que você ia perguntar. SEO é bom, mas não é tudo. Otimização pra busca aumenta taxa de atração. Taxa de conversão é outra história…

Mapa do Brasil vetorial – Link pra página de cada estado

Por favor, LEIA o post antes de enviar perguntas. O actionscript abaixo deve ser COPIADO E COLADO no fla.

Agora é possível adquirir o pacote com o swf (já com o actionscript no seu devido lugar), o fla e um pequeno manual de utilização do mapa do Brasil vetorial em flash no meu site. Tá mais barato que um lanche no McDonald’s!

O Victor Costa do Design Labs postou há algum tempo o Mapa do Brasil vetorial (link direto pro arquivo) que tivemos que desenvolver para um dos nossos trabalhos, o Site do IEL (veja funcionando nesta página).

Para usar o flash com as mesmas cores, só trocando os links, você pode copiar o swf e mudar as urls na chamada ao <object> no html – veja o segundo trecho de código deste post para entender melhor. O fla aberto está disponível no post do Victor.

Na versão final incluímos ainda um textfield que exibe a sigla do estado em que o usuário está passando o mouse. Você pode baixar a versão disponível no Design Labs, copiar e colar o código. Segue abaixo o actionscript que inserimos no fla:

this.createTextField("siglaEstado",10,230,10,100,25);
var my_fmt:TextFormat = new TextFormat();
my_fmt.color = 0x20428E;
my_fmt.font = "Verdana";
my_fmt.size = 18;
my_fmt.bold = true;
my_fmt.italic = true;
var siglaEstado:TextField;
siglaEstado.antiAliasType = "normal";
siglaEstado.setNewTextFormat(my_fmt);
function selecaoestados (estado:MovieClip) {
    estado._alpha = 0;
    estado.onRollOver = function () {
        for (var i:Number = 0; i < _level0.siglas.length; i++) {
            if (eval(siglas[i]+'mv') != estado) {
                eval(siglas[i]+'mv')._alpha = 0;
            }
        }
        siglaEstado.text = estado._name.substr(0, 2);
        onEnterFrame = function () {
            estado._alpha += 10;
            if (estado._alpha > 100) {
                onEnterFrame = function(){ null};
            }
        }
    }
    
    estado.onRollOut = function () {
        siglaEstado.text = '';
        onEnterFrame = function () {
            estado._alpha -= 10;
            if (estado._alpha < 0) {
                onEnterFrame = function(){ null};
            }    
        }
    }
    estado.onRelease = function (): Void{
        getURL(eval(estado._name.substr(0, 2)));
    }
}
//chamada função
var siglas:Array = ['AC', 'AL', 'AP', 'AM', 'BA', 'CE', 'DF', 'GO', 'ES', 'MA', 'MT', 'MS', 'MG', 'PA', 'PB', 'PR', 'PE', 'PI', 'RJ', 'RN', 'RS', 'RO', 'RR', 'SP', 'SC', 'SE', 'TO'];
for (var i:Number = 0; i < siglas.length; i++) {
    selecaoestados(eval(siglas[i]+'mv'));
}

E aqui a chamada para o swf:

<!--[if !IE]> -->
    <object type="application/x-shockwave-flash" data="endereco/para/o/flash/Mapa.swf" width="280" height="280">
<!-- <![endif]-->
<!--[if IE]>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="280" height="280">
         <param name="movie" value="endereco/para/o/flash/Mapa.swf" />
<!--><!---->
          <param name="wmode" value="transparent" />
         <param name="FlashVars" value="AC=paginaAC.html&amp;AL=paginaAL.html&amp;AP=etc..."/>
         <p>Atualize seu navegador para visualizar corretamente o mapa.</p>
    </object>
<!-- <![endif]-->

Qualquer dúvida que ainda não esteja esclarecida no post você pode falar comigo pela página de contato, pelos comentários ou pelo twitter. Abraços a todos!

Estudo do layout gera CSS enxuto e bem feito

Muitas são as formas de começar o desenvolvimento do CSS de um site. Alguns vão fazendo junto com o (X)HTML e outros só depois dele pronto. Este artigo é um complemento à essas abordagens. Aqui você vai entender que é possível adiantar boa parte do CSS antes mesmo do HTML estar pronto.

Com os layouts em mãos você deve identificar tudo o que há de igual. Não tenha medo de perder muito tempo nesta parte, porque perdendo muito tempo aqui você economizará codificando. Existe sempre uma box com títulos na mesma fonte, com mesmo bullet? Os títulos das páginas são iguais? Qual é a fonte predominante do site? Bons designers pensam em layouts estruturados e cabe a você identificar esta estrutura, sendo ideal contar com a colaboração do próprio designer.

Os métodos e os passos podem variar, mas um caminho geral é o seguinte:

  1. Identificar o que é padrão ou pelo menos mais usado no site todo. Fonte predominante (font-family, font-size, color, etc.) podem ser atribuídos já ao body, poupando o trabalho de declarar tudo novamente pra cada elemento filho. É hora de averiguar se um elemento, por exemplo, a maioria dos links do site, também segue um padrão . Especificidades são facilmente sobrescritas, portanto pode ficar tranquilo.
  2. Identificar as áreas do site. Se, por exemplo, o site tem um cabeçalho, uma lateral esquerda e uma região de conteúdo faça o mesmo exercício do passo anterior pra cada uma delas.
  3. Elementos mais isolados. Se existe um certo tipo de box usado em várias áreas diferentes, mas que sempre segue um mesmo padrão é hora de identificá-lo. Veja também cada elemento da box, como título, listas, parágrafos, formulários, etc.
  4. Desempate. Se um elemento é usado de uma forma em duas das três áreas do site esse é o padrão. A forma como ele é usado na terceira área é exceção e, portanto, deve ser declarada separadamente.
  5. Igualdades. Se elemenos diferentes usam o mesmo estilo use vírgulas e declare os formatos uma vez só. Use declarações separadas só para as diferenças.

No primeiro momento é mais proveitoso nem declarar os atributos. Vá colocando no css apenas as chamadas. Exemplo:body {}
a {}
a:hover {}
div#header {}
div#header a {}
div#sidebar-left {}
div#sidebar-left a {}
div#sidebar-left p {}
div#sidebar-left form {}
div.box {}
div.box h2 {}
div.box p {}

Repare que neste momento você já decidiu alguns ids e classes, de acordo com o levantamento feito anteriormente. Na hora de montar o (x)html é só usar os ids e classes certas nos lugares pré-estabelecidos.

Fazendo o css desta forma, do mais abrangente ao mais específico (enfim, do jeito certo), você ganha em manutenção, em velocidade de codificação e em tamanho de arquivo.

O bom uso do e-mail

Viveríamos num mundo muito melhor se todo mundo se preocupasse mais em como os outros são afetados pelas suas atitudes. Coisas pequenas fazem muita diferença quando feitas diversas vezes, afinal nosso dia-a-dia é formado por pequenos gestos que, juntos, formam atos maiores.

Com a popularização da internet veio também o correio eletrônico. E é sobre cada e-mail, cada pequeno gesto de apertar o botão enviar, que falarei hoje. É importante percebermos que, por toda a maturidade do e-mail na internet, esta é uma das ferramentas que muitos usam profissionalmente, ou seja, estamos mexendo com a rotina de trabalho de algumas pessoas.

Analisando superficialmente reconhecemos que o e-mail é formado pelo endereço de quem envia, o assunto, os e-mails relacionados nos campos “para”, “cc”, “cco”, os anexos e o corpo da mensagem.

O endereço de quem envia é o seu e-mail e ele você só escolhe uma vez. É interessante que este endereço tenha o seu nome ou mesmo só as iniciais. A dica é não criar e-mails engraçadinhos. Já passei pela experiência de ter que dar um endereço eletrônico para um contato mais profissional e ter que passar um e-mail bem ruim. Mesmo que você ache que está jovem demais para se preocupar com isso (eu achava), fica o conselho.

O assunto é o título do e-mail. Lendo o assunto o destinatário tem que ser capaz de saber, por alto, o conteúdo do e-mail. Assuntos do tipo “Engraçado!”, “Muito bom!!!” não são legais. Para e-mails profissionais é recomendado colocar o projeto correspondente antes do título, pura e simplesmente para facilitar a vida do destinatário, por exemplo “Projeto X – Pendências”. Como eu disse algumas pessoas usam e-mail no trabalho, portanto quando for mandar aquela mensagem com conteúdo “picante” é essencial avisar ao destinatário que abrir aquilo na frente de qualquer um pode ser constrangedor. Usar um “cuidado ao abrir” ou a versão americana NSFW (not safe for work) é obrigação de quem manda mensagens desse tipo (como o seu contato pode não saber o que é NSFW é melhor usar a versão em português mesmo).

Os campos “para”, “cc” e “cco” são os destinatários. Todos os listados nesses campos receberão a mensagem, mas se não existissem diferenças entre eles não existiriam os três campos. Usando como exemplo a mensagem do parágrafo anterior, no “para” estariam aquelas pessoas que serão diretamente afetadas com a mensagem, alguém que de fato fosse resolver as pendências listadas no e-mail. No “cc” estariam aqueles que simplesmente precisam estar cientes das pendências e no “cco” aqueles que os listados em “para” e em “cc” não precisam saber que estão recebendo a mensagem. O campo “cco” também deve ser usado no envio de alguma mensagem para grupos bem distintos, onde o destinatário não precisa saber quem mais recebeu a mensagem. Esta atitude evita que os endereços de seus contatos sejam usados em listas de envio de e-mail que eles não pediram para participar. Digamos que você vai se mudar, quer marcar uma festa com todos os seus contatos e para isso decide mandar um e-mail convidando todo mundo. Os endereços de todos vão no campo “cco”, assim ninguém ficará sabendo quem recebeu a mensagem, preservando os endereços eletrônicos de cada um.

O campo de anexos deve ser evitado ao máximo. Sempre que puder deixe tudo no corpo da mensagem, afinal pode ser trabalhoso pro destinatário abrir o arquivo e economizaria tempo ler direto o conteúdo. Se você é do tipo que costuma enviar PPS bonitinhos pra todo mundo, você está bem familiarizado com este campo, mas cuidado, você pode estar atrapalhando a vida de alguém que, primeiro, não te pediu pra você mandar aquilo, e segundo, não tem o programa para abrir aquela mensagem. Não vou fazer campanha contra quem manda este tipo de e-mail, mas o mundo seria melhor se isso desaparecesse ou fosse substituído por algo com um formato mais ágil. Trabalho com internet e sinceramente não tenho nem tempo nem paciência para mensagens assim.

Por último e mais importante está o corpo do e-mail. Aqui o destinatário espera uma mensagem clara, rápida e objetiva. Óbvio que e-mails extensos existem e algumas vezes são necessários, mas devem ser evitados ao máximo. Formatação também é importante, portanto evite mandar e-mails cujo corpo todo é precedidos por sinais de “>”, por exemplo. Evitar erros de português também é uma boa prática em qualquer lugar. O uso de assinaturas é recomendado, afinal quem recebe a mensagem quer saber quem a mandou. Em e-mails de resposta, cuja mensagem original fica abaixo da sua é interessante colocar sua assinatura abaixo da sua mensagem (entre o que você escreveu e o e-mail original) e não de todo o texto. Uma ou duas configurações devem ser o suficientes para automatizar o processo.

Do mesmo modo como você tem endereços físicos de trabalho e de casa é possível que seu contato também os tenha eletronicamente, portanto e-mails profissionais para endereços profissionais. Nada de piadinha pro e-mail do trabalho.

Pense nisso na próxima vez que for enviar um e-mail e certamente você estará contribuindo pra organização da vida dos seus contatos.

O Internet Explorer 8 vai dar certo

Manter o pé no chão é preciso. Infelizmente muita gente não sabe nem o que é navegador, nem browser, e entrar na internet para alguns é clicar duas vezes naquele “ezinho” na área de trabalho. Pra esses a discussão sobre o fim do Internet Explorer 6 simplesmente inexiste. Eles nem Internet Explorer sabem o que é.

Browser e Bowser
Não confunda Browser com Bowser. O IE às vezes é inimigo, mas você não é o Super Mario.

Acho legal a discussão toda pra acabar com o navegador maldito, mas de vez em quando fica tudo muito mv-brasil. Eu uso o firefox como meu navegador padrão, mas conheço muita gente que nem sabe que ele existe. Conheço inclusive ferramentas que – pasmem! – só funcionam no IE.

Tenho uma tese que não vejo ninguém espalhando por aí (deve estar errada), mas publico-a aqui: o IE 7 só não ficou mais popular por que não era possível instalá-lo nos Windows piratas. Isso mesmo. No começo, pra quem não lembra, o IE 7 só podia ser instalado nos Windows originais. Depois a Microsoft colocou a mão na consciência e deixou os usuários piratas, maioria aqui no Brasil, instalarem o novo navegador, mas aí era tarde. Quem tinha tentado e não tinha conseguido simplesmente desistiu. Ficaram com medo da estrela da morte.

Então veio o Internet Explorer 8, que segundo a IDG Now, vai ser disponibilizado pelo Windows Update. Tudo bem, vai ter telinha perguntando se é isso mesmo, se o camarada quer instalar de verdade, mas o usuário não sabe nem o que está acontecendo. Vai na teoria do “Next > Next > Finish” que a Microsoft tanto propagou e vai dar certo. E se der certo mesmo é menos um com o IE 6.

Apesar de tirar só 20/100 no Acid 3 o Internet Explorer 8 está bem melhor. Não é meu navegador padrão, mas ficou assim… decente.

ps.: Atualizei as páginas Porque “Melancia na Cabeça” e Quem é o Elia, vocês viram? Terça-feira tem mais post, [silvio santos]não percaaammm[/silvio santos].