Blog do Jader

Codecast #5 no ar!

Jader Rubini — Mon, 16 Jun 2008 01:23:39 +0000

Está no ar o 5º episódio do Codecast, o podcast sobre desenvolvimento web do Rafael Marin e do Júlio Greff. Nessa edição o tema é frameworks.

O que eu tenho a ver com isto? Bem, este que vos escreve foi convidado a emprestar sua belíssima voz ao Codecast, falando um pouco sobre Python e Django e um pouquinho de Javascript e jQuery. Foi minha primeira participação em um podcast e eu gostei bastante da experiência (espero voltar mais vezes =P).

É isso aí, vai lá e baixa agora!

PS.: UAU! Dois posts em dois dias!

Menu multinível em cascata com jQuery

Jader Rubini — Sat, 14 Jun 2008 15:14:47 +0000

Bom, depois de mais de um mês sem movimento por aqui, cá estamos nós de novo, desta vez com uma novidade: é o primeiro screencast que gravo e espero que não seja o último.

Nesse screencast eu mostro como é simples fazer um menu em cascata (ou árvore, como preferirem) usando apenas HTML limpo e semântico, um pouco de CSS e poucas linhas de Javascript, usando jQuery. O screencast está disponível através desse link.

Detalhes do download:

Formato do arquivo: .rar
Tamanho do arquivo: ~30MB
Conteúdo do arquivo: vídeo e código fonte do exemplo.
Formato do vídeo: .mov 960×600
Tempo de duração do vídeo: 13 minutos

Se você gostou, não gostou, ou quer sugerir um tema para o próximo screencast, a caixa de comentários está logo aí embaixo.

Como se prevenir para a chegada do IE8

Jader Rubini — Tue, 29 Apr 2008 01:31:20 +0000

O Internet Explorer 8 está chegando aí e seu lançamento pode servir tanto de alívio como dor de cabeça pra nós desenvolvedores, visto que vários bugs das versões “atuais” (IE’s 6 e 7) serão corrigidos, porém ~~os hacks estrela (* html para IE6 e *+html para IE7) continurão~~ o hack estrela para o IE7 (*+html) continua funcionando no IE8.

Trabalho é legal, mas re-trabalho é entediante…

Se você, como eu, é do tipo que não gosta de re-trabalho, é bom começar a pensar nisso. E é o que eu tenho feito nos meus últimos projetos. Tento evitar ao máximo o uso de hacks, mas quando não dá pra escapar, recorro aos recursos técnicos de emergência (aka gambiarra). A própria Microsoft (quem diria…) bem que nos avisou ainda na época do lançamento do IE7: prefiram os comentários condicionais.

Comentários condicionais? Mas isso não aumenta meu trabalho?

A grande desculpa ~~esfarrapada~~ para o não-uso dos comentários condicionais é que o número de arquivos CSS podem aumentar consideravelmente e isso em projeto grandes pode se tornar em um caos para administrar. O fato é que, apesar de não ter me envolvido em nenhum projeto grande até hoje, eu costumo pegar alguns layouts complexos pra codificar (vide portfolio da Interag, desatualizado e prestes a sofrer alterações) e, mesmo assim, é raro eu ter que criar mais de um arquivo CSS especificamente para os IE’s e esse único geralmente não tem mais do que 15 ou 20 linhas de código. Isso mesmo. Eu crio apenas um único arquivo CSS que cuida das incompatibilidades do IE6 e do IE7. Como?

Esse trecho de código faz a mágica. Nele nós dizemos que, caso o browser do usuário seja o IE na versão 6 ou 7, um novo arquivo ie.css deverá ser incluído na página. Colocamos esse código no de nosso documento e pronto. Agora tudo o que temos que fazer é, dentro desse arquivo ie.css declarar as regras CSS específicas para o IE6, para o IE7 e para ambos:

/* ie6 e ie7 */
.clearfix { display:inline-block; }

/* apenas ie6 */
* html #geral { height: 1px; }

/* apenas ie7 */
*+html legend { text-indent: -5px; }

Mas olha os hacks ali! Você trapaceou!

Como dito anteriormente, apenas as versões 6 e 7 do navegador da Microsoft verão esse arquivo. Portanto, é OK usar hacks específicos para essas duas versões do browser dentro desse arquivo (e somente dentro dele).

Um exemplo prático

Nada como um exemplo mais prático para compreendermos como funcionam as engrenagens. Vamos assumir que temos a seguinte marcação no nosso HTML:

Olá! Eu sou um exemplo prático.

OK, esse exemplo não foi nada prático. Mas continue seguindo, você não tem nada a perder…
Bem, suponhamos que queiramos que esse título assuma as seguintes formatações:

azul com fundo branco nos browsers;
branco com fundo azul no IE7;
branco com fundo vemelho no IE6.

Para isso, precisaríamos ter em nosso arquivo CSS principal a seguinte regra:

h1 {
    color: #00B;
    background-color: #FFF;
}

E o nosso arquivo ie.css ficaria da seguinte forma:

/* ie6 e ie7 */
h1 { color: #FFF; }

/* apenas ie7 */
*+html h1 { background-color: #00B; }

/* apenas ie6 */
* html h1 { background-color: #B00; }

Se você testar esse código nos browsers de verdade (gentilmente incluindo o IE8 aqui, como colher de chá), verá que o título está azul com fundo branco, como previsto. Já nos IE’s 6 e 7 o título estará branco; no IE7 com fundo azul e no IE6 com fundo vermelho.

That’s all, folks. Em breve espero postar mais artigos pra movimentar novamente o blog. Ou não.

Microsoft libera primeiro beta do IE8

Jader Rubini — Wed, 05 Mar 2008 23:55:52 +0000

Eis que a luz ao final do túnel começa a aparecer pra nós, desenvolvedores preocupados com os padrões web. Em sua nova versão do browser mais usado do mundo (o que não significa dizer que seja o melhor), a Microsoft, tão crucificada por muitos (inclusive eu) pelo seu pouco caso com as normas do W3C, resolveu olhar pra nós e dar seus dois centavos para a construção de uma web mais unificada.

Hoje pela tarde, durante a MIX08 – conferência que acontece em Las Vegas até dia sexta-feira – a Microsoft liberou o primeiro beta de seu navegador. Se você, como eu, quiser sentir o que vem por aí, você pode baixar o IE8 Beta 1 e começar a testá-lo e enviar suas sugestões (ou não) para a Microsoft.

Agora, se me dá licença, meu download acaba de terminar e eu já vou instalar o bichinho.
Ah, e daqui a alguns dias eu volto pra dizer o que eu achei do IE8.

Image-replacement: use com cuidado

Jader Rubini — Thu, 28 Feb 2008 14:49:30 +0000

Na lista de discussão webstandards-br rolou há pouco uma discussão sobre o uso de image-replacement e o posicionamento do Google quanto a isso. Leia com mais detalhes o que o Google diz sobre image-replacement. Atentem para o seguinte parágrafo:

Se percebermos que o seu site tem texto e links ocultos com propósito enganoso, ele pode ser removido do índice do Google e não não vai mais aparecer nas páginas de resultados de pesquisa. Ao verificar seu site para ver se ele tem texto e links ocultos, procure por elementos que não sejam visíveis aos usuários da página. Existem textos ou links presentes exclusivamente para mecanismos de pesquisa e não para visitantes?

Isso mesmo. O Google recomenda não usar image-replacement nem esconder conteúdo textual de seus visitantes. Isso inclui aqueles textos descritivos que a gente costuma deixar no HTML só para usuários que usam tecnologias assistivas, como os links “pular para o conteúdo”, “ir para o menu principal” e etc. É bem verdade que há controvérsias quanto à rigorosidade do Google quanto isso. Uns dizem que o que não pode é exagerar no tamanho do texto escondido, que até 75 caracteres não há problema. O parágrafo acima também dá margens para um possível “bom senso” do googlebot. O certo é que é melhor prevenir do que remediar, já dizia o velho deitado.

Mas a questão principal do tópico era o uso de image-replacement no título do site, a famosa técnica de colocar o título do site em um link dentro de um h1 e, via CSS, ocultar o texto, substituindo-o pelo logotipo do site. Essa técnica é bastante usada por um sem-número de sites (inclusive de grandes evangelizadores) por aí, como o A List Apart, o Mezzoblue de Dave Shea e, só pra citar alguns dentro de nossa blogosfera: Maujor, Tableless, BrunoTorres.net e… o meu (tá, mas o meu é um tema pronto do WordPress .

Mas qual o problema?

Se essa técnica é tão utilizada por blogs tão preocupados com os padrões e bem posicionados no Google, o que pode haver de errado com ela? Simples: A semântica. Vejamos o que o W3C nos diz sobre as tags hn (grifo meu):

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Como podemos ver, as tags hn são usadas para descrever seções e sub-seções de um site, e não o título do site ou o nome da empresa. Um exemplo de bom uso das tags hn é o seguinte:



    Título da seção
        Título da sub-seção
            Conteúdo da sub-seção

        Título da sub-seção
            Conteúdo da sub-seção

Como bem disse no decorrer do tópico o Israel Cefrin, se pensarmos que o HTML foi inventado para fins acadêmicos, é fácil entender o uso dos cabeçalhos, comparando-os com a estrutura básica de uma monografia, ou um trabalho acadêmico.

Mas e o título do site, como fica?

Oras, a tag title serve pra quê? Vejamos:

Authors should use the title element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as “Introduction”, which doesn’t provide much contextual background, authors should supply a title such as “Introduction to Medieval Bee-Keeping” instead.

É uma boa prática, inclusive de SEO, colocar na tag title o nome do site e o contexto atual da página. Um bom exemplo do uso da tag title é esta exata página que voce está lendo. Olhe o título dela: Image-replacement: use com cuidado « Blog do Jader. Bonito, não? Isso me diz que eu estou, dentro do Blog do Jader, lendo o artigo Image-replacement: use com cuidado.

Ok, o título do site é com a tag `title`, mas e o logotipo?

O logotipo do site é uma imagem com relevância de conteúdo e não de decoração, certo? Logo, deve ser usada a tag img, com seu atributo alt devidamente preenchido. Isso garante que tanto mecanismos de busca quanto usuários, independentemente do dispositivo utilizado para acessar o seu site, tenham acesso ao conteúdo do logotipo.

Não faz sentido colocar essa imagem dentro de um h1 pois, como já vimos, as tags hn são para títulos de seções do site. Para que a imagem do logotipo tenha um identificador único, pra que seja mais fácil posicioná-la com CSS, basta acrescentar um id à tag e pronto, você já tem tudo o que precisa pra fazer o que quiser com ela.

Conclusões

Você pode estar se perguntando onde eu quero chegar com todo esse papo de semântica, SEO, estrutura de um documento, etc. A resposta é simples: a semântica é tudo e mesmo os gurus a deixam de lado às vezes. Boa parte das técnicas existentes que envolvem puramente HTML + CSS são baseadas na solução do problema e na validação do código. A semântica fica de lado e às vezes nem percebemos isso. Eu mesmo, antes desse tópico, nem pensava que essa prática tão comum pudesse estar tão errada semanticamente.

Faz parte do cotidiano de um desenvolvedor pesquisar novos meios de se resolver velhos problemas e, o que é mais importante, estar diposto a romper com velhos hábitos e se atualizar. O questionamento das ditas “verdades absolutas” é essencial para o crescimento não só no âmbito pessoal, mas também no profissional, e com isso nós temos sempre que estar lidando.

Diz até que não é… um mau blog!

Jader Rubini — Wed, 27 Feb 2008 00:44:29 +0000

O Júlio Greff me indicou como um dos blogs que “dão pro gasto”. Eu fico contente com a indicação, visto que meu blog (mais uma vez) ficou jogado às traças por quase três meses.

O meme consiste em indicar 7 blogs de responsa, e aí vão minhas indicações: And the oscar goes to…

Pinceladas da Web (sempre com dicas excelentes)
Web2Ponto0 (que agora está atacando de podcasts)
Bruno Torres (que finalmente voltou a blogar [!?])
project47 (meio paradão ultimamente)
SEO Dicas
fechaTag
Irmãos Brain (porque nem só de web standards vive o homem )

E agora as regras do meme Diz até que não é… um mau blog!:

Este prêmio deve ser atribuído aos blogs que considerem ser bons. Entende-se como bons os blogs que você costuma visitar regularmente e onde deixa comentários.
Se e somente se recebeu o “Diz que até não é um mau blog”, deve escrever um post indicando a pessoa que lhe deu o prêmio com um link, a tag do prêmio, as regras e a indicação de outros 7 blogs para receberem o prêmio.
Deve exibir orgulhosamente a tag do premio no seu blog, de preferência com um link para o post em que fala dele.

Sai Firefox, entra Flock

Jader Rubini — Sat, 01 Dec 2007 02:27:55 +0000

Há alguns dias saiu na Smashing Magazine um artigo sobre “browsers interessantes sobre os quais você nunca ouviu falar” e, posteriormente, o Pedro também falou sobre alguns deles.

O fato de eu descobrir que o Flock, um fork do Firefox, voltado à integração com as principais redes sociais, chegou em sua primeira versão estável, em conjunto com a minha insatisfação com o desempenho do Firefox me animou a testá-lo mais uma vez. Eu já havia testado o Flock antes, quando ele ainda estava em seus primeiros passos, mas na época não vi muita novidade e acabei não me interessando e desinstalando logo. Bem, as coisas mudaram.

Como disse, o Flock é bastante voltado para a integração com as redes sociais mais conhecidas, como Flickr, Del.icio.us, WordPress, Youtube, Facebook, entre outros. Existem recursos realmente facilitadores nele, como, por exemplo:

upload de fotos para o Flickr, direto do browser;
o Web Clipboard, uma espécie de área de transferência integrada ao browser;
gerenciador de contas e serviços (sem comentários);
interface para publicação de posts (na qual estou escrevendo este artigo), com editor bastante parecido com o usado pelo WordPress. Basta informar uma conta em algum serviço de blog conhecido, ou no seu próprio blog e começar a escrever seus posts;

Além disso, o Flock, como é baseado no Firefox, suporta todas (pelo menos das que testei) as extensões do Firefox, o que significa que você não precisa abrir mão de suas comodidades se quiser migrar do Firefox pro Flock.

Com o visual mais bonito, a mesma engine e uma integração fantástica com diversos serviços pela web, além de um desempenho melhor (meu Firefox chegava quase aos imperdoáveis 200MB de consumo) não tive que pensar duas vezes antes de mudar logo de browser. Estou confortável com o Flock e é nele que pretendo ficar, pelo menos até o lançamento “final” do Firefox 3.

Blogged with Flock

Tags: flock, browsers, web, firefox

Django, Django e mais Django

Jader Rubini — Mon, 26 Nov 2007 22:23:39 +0000

No final de semana a Revista INFO chegou à casa de seus assinantes trazendo uma matéria sobre frameworks web. O artigo fala sobre Django, Ruby on Rails e outros frameworks ágeis. Eu ainda não tive a oportunidade de ler o artigo, porém, acompanhado a repercussão na lista de discussão Django Brasil, pude perceber que, como é de costume da INFO, falaram besteira sem saber o que estavam falando. Entre outras ~~asneiras~~ incoerências, chegaram a dizer que o defeito do Django é ter sido escrito em Python e, portanto, requerer que se aprenda a linguagem antes que de usá-lo pra desenvolver.

Mas eu não estou aqui pra falar mal da INFO. Eu venho anunciar que, no mesmo dia em que a edição da INFO chegou ao público, o site oficial da comunidade Django Brasil entrou no ar (já com PageRank 5!). O site ainda não está com todo o conteúdo inserido, mas já dá pra tirar muita dúvida a respeito do framework (e ver que boa parte do que foi escrito na INFO é besteira). Eu tive o prazer de contribui com o design, o HTML inicial (que, é claro, já não está como eu deixei) e o CSS do site. Ainda há muita coisa a fazer (e refazer), mas devagarinho a gente chega lá…

Trabalhar junto com a comunidade foi um enorme prazer e um aprendizado muito grande pra mim. Eu estou realmente satisfeito de ter participado (e ainda continuarei participando) desse projeto e acredito que projetos assim só têm a somar na experiência de quem participa. Agradeço a toa a comunidade e, em especial, ao Guilherme Gondim (Semente), que foi paciente me ensinando como funciona o Subversion (sim, foi meu primeiro projeto usando Subversion e eu achei simplesmente fantástico) e todo o sistema do Google Code.

Veja o que estão falando por aí sobre o site.

Diga “Oi” para o pingüim

Jader Rubini — Fri, 02 Nov 2007 03:48:43 +0000

Eu já venho namorando o Ubuntu há tempos. Desde o lançamento da penúltima versão (7.04 codinome Feisty Fawn) eu já venho tentando instalá-lo, porém, pela incompatibilidade do meu hardware (que era bem fraquinho) eu acabei desistindo por um tempo e me contentando com o Windows.

Acontece que eu comprei uma máquina nova, com hardware bem superior ao da máquina anterior e, além disso, uma nova versão do Ubuntu foi lançada exatamente na mesma semana que minha máquina nova chegou. Depois de ler em vários sites por aí e no próprio site do Ubuntu que a versão 7.10 (codinome Gutsy Gibbon) tinha um suporte melhor a diversos drivers não-suportados no Feisty, eu resolvi dar mais uma chance ao pingüim.

Baixei o .iso diretamente do site do Ubuntu um dia após o seu lançamento pois no dia do lançamento os servidores estavam congestionadíssimos e era quase impossível baixar o arquivo por lá. E a instalação foi tranqüila. Particionei o HD pelo Windows usando o PartitionMagic, dei o boot pelo CD do Gutsy, segui 7 passos super simples e pronto: com menos de 40 minutos, o Ubuntu estava instalado em minha máquina, sem necessitar de intervenção nenhuma durante a instalação. Reiniciei a máquina, tirei o CD da bandeja e dei “olá” ou admirável mundo novo.

O processo foi estupidamente simples. Ao contrário do que tinha acontecido com a tentativa de instalação do Feisty, não tive nenhum problema com hardware, nenhum sequer. Não precisei mexer em nada com relação a configurações de hardware, exceto pela instalação do driver de aceleração de vídeo da nVidia, pra poder ter todos aqueles efeitos mirabolantes na minha área de trabalho. Três cliques cuidaram disso pra mim.

Estou satisfeitíssimo com o Ubuntu, tanto pela performance quanto pela simplicidade de se fazer tudo. Você só precisa ir ao terminal se quiser, pra tudo o que você faria nele há uma aplicação gráfica que tome conta, mesmo que não esteja instalada por padrão no sistema. Enquanto isso, o Windows está lá na partição dele, pronto pra quando eu precisar de um Photoshop, Illustrator ou InDesign da vida (e só pra isso).

Ah! E aí vai a configuração da minha máquina nova:

ASUS P5LD2-X (som e rede integrados)
Intel Dual Core 1.6ghz
Memória 1Gb DDR2
nVidia geForce 7300GS 256/512Mb
Monitor Samsung LCD 17″ widescreen

Microsoft libera o IE7 para Windows pirateados

Jader Rubini — Fri, 05 Oct 2007 15:26:09 +0000

Eu não gosto de postar apenas links pra matérias, mas essa notícia (@INFO Online) é sensacional e não pude deixar de divulgar.

O IE7 não é o ideal de browser que se esperava que fosse mas sem dúvida já é um grande avanço em relação a seu irmão mais novo. A possibilidade de todos os usuários de IE6 migrarem para o IE7 sem ter que passar pela validação do Windows é realmente excelente pra nós, desenvolvedores, já que o suporte aos padrões do IE7 é menos pior que do IE6. Portanto, divulguem essa notícia e substituam os IEs em quantos computadores você puder.

Mas, é claro, prefira sempre a raposa.