Codecast #5 no ar!

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!

2 Comentários

Arquivado em Blog, Blogosfera, Codecast, Comunidade, Django, jQuery, Produtividade, Python

Menu multinível em cascata com jQuery

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. ;)

7 Comentários

Arquivado em Artigos, Javascript, jQuery, Screencast, Tutoriais, Web Standards

Como se prevenir para a chegada do IE8

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 (<jabá>vide portfolio da Interag, desatualizado e prestes a sofrer alterações</jabá>) 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?

<!--[if (IE 6)|(IE 7)]><link rel="stylesheet" type="text/css" href="css/ie.css" media="screen, projection"><![endif]-->

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 <head></head> 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:

<h1>Olá! Eu sou um exemplo prático. :)</h1>

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:

  1. azul com fundo branco nos browsers;
  2. branco com fundo azul no IE7;
  3. 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.

6 Comentários

Arquivado em Artigos, Browsers, CSS, Internet Explorer, Tutoriais, Web Standards

Microsoft libera primeiro beta do IE8

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.

Comentários desativados

Arquivado em Browsers, Internet Explorer, Mercado, Rapidinhas, Softwares, Web Standards

Image-replacement: use com cuidado

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:


<div class="secao">
    <h1>Título da seção</h1>
        <h2>Título da sub-seção</h2>
            <p>Conteúdo da sub-seção</p>

        <h2>Título da sub-seção</h2>
            <p>Conteúdo da sub-seção</p>
</div>

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.

13 Comentários

Arquivado em Artigos, Cotidiano, Semântica, Tableless, Web Standards, XHTML

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

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.

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

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

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

  1. 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.
  2. 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.
  3. Deve exibir orgulhosamente a tag do premio no seu blog, de preferência com um link para o post em que fala dele.

2 Comentários

Arquivado em Blogosfera, Blogroll, Comunidade, Memes

Sai Firefox, entra Flock

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: , , ,

9 Comentários

Arquivado em Artigos, Browsers, Cotidiano, Pessoal, Softwares