Arquivo da categoria: Web Standards

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 em Microsoft libera primeiro beta do IE8

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

Microsoft libera o IE7 para Windows pirateados

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. 😉

3 Comentários

Arquivado em Browsers, Internet Explorer, Softwares, Web Standards

Construindo sites com CSS e (X)HTML


Excelente notícia pra você que está querendo aprender a construir sites com CSS e XHTML, ou mesmo pra você que já é desenvolvedor mas quer aprender mais sobre o assunto: O Maujor acaba de anunciar o lançamento de seu livro, que acontecerá em Fevereiro de 2008, pela editora Novatec.

O livro está em processo de revisão, já contando com 14 capítulos, distribuídos em 300 páginas e ainda há conteúdo a inserir. Finalmente teremos um bom título escrito por alguém que conhece bastante do assunto e originalmente em nossa linguagem. É esperar pra ver. 😉

3 Comentários

Arquivado em CSS, Livros, Web Standards, XHTML

A sintaxe do CSS

Ultimamente tenho estado mais presente no fórum de Web Standards do iEvolution e tenho percebido que muita gente tem confundido, ou não compreendido direito as CSS. Frases do tipo Estou fazendo uns scripts CSS pro meu site e…, ou ainda que parâmetros CSS usar nesse caso?, e também: <script type="text/javascript" src="estilos.css"></script> têm aparecido com frequência lá no fórum.

E eu, como disseminador dos web standards, obviamente, não podia ficar parado diante de uma situação dessa. E é por isso que decidi escrever um pouco sobre a sintaxe do CSS. Bom, então vamos lá.

O básico do básico

Primeiramente, é preciso deixar bem claro o que CSS não é. CSS não é uma linguagem de programação, como Javascript, ASP, PHP, etc. Portanto, não existem scripts CSS ou parâmetros CSS.
CSS também não é uma linguagem de marcação, como o HTML ou XHTML e, por isso, não existem tags CSS.

O básico

Depois de ver o que CSS não é, vejamos o que ele é e qual sua sintaxe correta.
CSS é uma linguagem de formatação, ou seja, é a linguagem usada para dar forma ao seu código de marcação, seja ele HTML ou XHTML. Simples, não? Sua sintaxe é mais simples ainda. Observe:


seletor { propriedade: valor; }

Ou, pra citar um exemplo mais prático:


body { background-color: black; }

O que você vê acima é uma regra CSS, vamos quebrá-la em pedaços pra ficar mais fácil a compreensão.

  1. O seletor


    body

    O seletor é basicamente a tag (ou tags) que você quer estilizar. Para uma explicação mais detalhada sobre seletores, leia este excelente texto do Maujor.

  2. A declaração


    background-color: black;

    Isto é uma declaração CSS. Uma declaração CSS é composta por uma propriedade, seguida de dois-pontos, e um valor; declarações CSS devem vir seguidas de um ponto-e-vírgula, para indicar um “fim de comando”, caso contrário sua declaração pode não ser interpretada corretamente, assim como a declaração que a seguir. No caso de uma regra com uma única declaração ou da última declaração de uma regra, o ponto-e-vírgula é opcional, mas é de boa prática usá-lo assim mesmo.

Além disso, todo o conjunto de declarações deve estar entre chaves { }, para que os browsers consigam fazer distinção entre seletores, declarações e para que possa entender onde começa e termina cada regra.

Bom, pessoal, é isso. Espero ter conseguido ajudar àqueles que têm (ou melhor, tinham. hehe) dificuldades em relação à sintaxe do CSS. Quanto aos meus leitores mais experientes no assunto, peço desculpas pelo conteúdo de nível básico (que não é o foco do meu blog), mas senti muito a necessidade de falar algo sobre isso aqui. E, já que você chegou até aqui, que tal acrescentar algo? Não sei porquê, mas sempre fico com a impressão de que faltou algo a ser falado…

PS.: Preciso sair desse WordPress urgente! Não aguento mais esses templates! rsrs

5 Comentários

Arquivado em Artigos, CSS, Web Standards