Ordenando os seletores CSS

O artigo sobre organização do CSS era para ser dividido em duas partes. Desisti logo depois. Achei que estava indo longe demais na minha mania de código limpo. Mas a Smashing Magazine me provocou e tive que voltar atrás. Vamos listar alguns parâmetros para pôr uma ordem definitiva nos seletores CSS.

Tags: , , ,

A volta do design 800×600

Quando as estatísticas começaram a mostrar que usuários estavam comprando placas de vídeo mais potentes e monitores maiores, vários clientes e designers começaram a comemorar. Mais largura de tela significa mais espaço para conteúdo e criação. Ao longo do tempo, desenvolver soluções em 800 pixels de largura (o que de fato são 780 pixels em uma janela maximizada no no Internet Explorer) se tornou um pesadelo para designers.

http://flickr.com/photos/salimfadhley/No entanto, os dispositivos móveis chegaram de vez ao país. O mercado começou a se preocupar com estes dispositivos com notícias sobre invasão dos iPhones anunciada pela imprensa em março. Ao contrário de celulares e smartphones, o iPhone renderiza as páginas como elas são na resolução de 320 por 480 pixels. O usuário pode usar zoom para aumentar a tela, mas qualquer design de interfaces planejado para funcionar bem em 1024 pixels de largura com fontes pequenas irá tornar a vida do usuário um pouco mais difícil.

O cenário ganha novos players com os subnotebooks de 7 e 8,9 polegadas, como o Asus Eee PC e o Positivo Mobo. É possível redefinir a resolução de tela, mas nestes dois casos o usuário deve preferir manter a definição de fábrica que é 800×600. Ainda estamos verificando que o consumo destes subnotebooks estão vindo da faixa de early adopters de tecnologia, mas o público final, principalmente no Brasil, deve ser a classe C. Lembrando sempre que esta é faixa de consumo em tecnologia doméstica que mais cresce no país.

Seja qual for o público-alvo, fãs de tecnologia ou não, há chances de que sites sejam cada vez mais acessados novamente por usuários com resoluções de tela pequenos. Se for imprescindível trabalhar em 1024 pixels, é fundamental pensar nestes usuários e oferecer a melhor experiência possível.

Possíveis soluções:

  • Trabalhar com telas flexíveis, tomando cuidado sempre com a largura máxima e mínima da coluna principal de leitura.
  • Fazer versões diferentes da folha de estilo usando JavaScript para verificar resolução de tela. Tenha em mente que é mais provável que o usuário com resolução maior esteja com os scripts habilitados em seu navegador. Aqui você trabalha apenas a parte de grid do seu CSS.

O mais importante: não deixe de testar. Por mais anti-gadget que seja o desenvolvedor, ele precisa conhecer e testar seus aplicativos e websites nestas novas plataformas.

Referências:

Tags: , , ,

Uma outra visão sobre CSS Frameworks

Existem várias formas de produzir com CSS frameworks. A visão que irei mostrar aqui consiste em mais uma forma de organizar e otimizar os estilos de um site, bem diferente do conceito de reutilização de código para outros sites futuros. É uma visão próxima do artigo original em A List Apart.

Importante! Esta é apenas uma sugestão de trabalho com CSS e nenhum padrão de desenvolvimento. Cada empresa ou desenvolvedor deve procurar a sua própria forma de construir seu código.

Costumo dividir meus arquivos CSS em dois tipos de blocos de tags, identificadores e classes: um por mídia e outro por tipo de conteúdo.

Uma introdução

Mas antes mesmo de começar a trabalhar o estilo, que tal um comentário sobre que projeto que estamos trabalhando? É a única chance que um desenvolvedor de interface tem que ter algum controle textual sobre seu trabalho.

/*
Theme Name: Layout em curvas insanas
Theme URI: http://teste.sydi.net
Description: Desenvolvimento da nova versão do site
Version: 0.9
Author: Simone Villas Boas
Author URI: http://sydi.net/
*/

É uma idéia descaradamente roubada do WordPress – que deve ter sido pega em outro lugar também – e que adotamos em todos os projetos.

Dividindo por mídia

Não há novidade alguma aqui:

@media screen{
	/* minhas definições para visualização num
		monitor comum de computador ou notebook */
}

@media print{
	/* minhas definições para impressão do arquivo */
}

@media screen,print{
	/* minhas definições para ambos */
}

Como ando obcecada em diminuir os requests HTTP, não uso o outro método de separar os tipos de mídias em arquivos diferentes. Esta é uma escolha do desenvolvedor de interface!

<link rel="stylesheet" type="text/css"
		media="all" href="/css/principal.css" />

<link rel="stylesheet" type="text/css"
		media="screen" href="/css/monitor.css" />

<link rel="stylesheet" type="text/css"
		media="print" href="/css/imprimir.css" />

Dividindo por tipo de conteúdo

Esta é uma lista que fui testando e aprimorando nos últimos projetos. Definindo dentro de cada mídia:

  1. Reset, onde limpo todas as definições de estilo padrão do navegador;
  2. Basic, onde estão as definições genéricas de tags e classes;
  3. Grid, onde desenvolvo estrutura da página;
  4. Format, onde configuro cores, fundos, tipologia, por área de layout;
  5. Pages, onde estão as definições especiais de cada seção do site;
  6. Hacks, onde junto todos os códigos pré-construídos de CSS como image replacements, clear-fix e outras definições genéricas.

Agora cada item em detalhes e exemplos:

Preferi manter os títulos em inglês para manter algum distanciamento. No entanto, como todo o resto neste artigo, esta é mais uma convenção.

  1. Reset

    Uso a opção testada pelo Eric Meyer com algumas pequenas revisões particulares:

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	outline: 0 !important;
    	font-weight: normal;
    	font-style: normal;
    	font-size: 100%;
    	font-family: inherit;
    	vertical-align: baseline
    }
    body {
    	line-height: 1;
    	background: #fff;
    	color: #000
    }
    ol, ul {
    	list-style: none
    }
    blockquote, q {
    	quotes: none
    }
    ins {
    	text-decoration: none
    }
    del {
    	text-decoration: line-through
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0
    }
    address{
    	font-style: normal
    }
  2. Basic

    Definição dos estilos das tags, que é a parte mais genérica da folha de estilo:

    body {
    	background: #DDD;
    	font: 62.5% Arial, Helvetica, sans-serif;
    	color: #666;
    }
    h2 {
    	font-size: 2.5em;
    	font-weight: 400;
    	color: #013671;
    }
    h3 {
    	font-size: 1.2em;
    	padding: 1.4em 0 0.8em;
    }
    td {
    	background: #FFF;
    }

    e de classes que deveria ser também bem genérico e muito focado.

    .alert{
    	font-color: #F00;
    }
    td.even{
    	background: #DDD;
    }
  3. Grid

    É a estrutura essencial da página. É aqui que grande parte dos CSS Frameworks trabalha quando fornece um layout pré-moldado. Este é um exemplo de tela com conteúdo centralizado como é o caso do tema atual doPixeladas:

    body{
    	text-align: center
    }
    #page{
    	width: 700px;
    	margin: 0 auto;
    	text-align: left
    }
    #header{
    	height: 100px
    }
    #content{
    	float: left;
    	width: 500px
    }
    #sidebar{
    	float: right;
    	width: 200px
    }
    #footer{
    	height: 40px
    }

    O segredo aqui é a simplicidade. Mantendo o mínimo de informações sobre a estrutura primordial da tela é mais fácil fazer alterações estruturais que normalmente seriam traumáticas, como mudar a largura da coluna lateral. Se a folha de estilos acabasse aqui, teríamos uma formatação muito básica, quase um protótipo navegável. É por aqui que gosto de começar a montar uma tela.

    Obs.: O truque do text-align é para o Internet Explorer 6 e anteriores.

  4. Format

    Aqui sim centralizamos todas as decisões de cores, fundos e tipologia que não são tão genéricas quanto para tags e classes e nem tão específicas que funcionem apenas em uma parte do site. Para começar, vamos definir para as seções do layout que vimos anteriormente em Grid:

    #page{
    	background: #FFF
    }
    #header{
    	background: #333;
    	color: #FFF
    }
    #content{
    	color: #333
    }
    #sidebar{
    	font-size: 0.8em;
    }
    #footer{
    	background: #000;
    	font-size: 0.8em;
    	color: #FFF
    }

    E um pouco além:

    #sidebar li{
    	list-style: square
    }
    #sidebar li li{
    	list-style: disc
    }
  5. Pages

    Considerando que algumas seções do site precisam de um tratamento especial. Por exemplo, uma imagem conceitual para cada seção do site:

    #content{
    	background: no-repeat right top;
    }
    #about #content{
    	background-image: url(images/bg_about.gif);
    }
    #products #content{
    	background-image: url(images/bg_products.gif);
    }
    #contact #content{
    	background-image: url(images/bg_contact.gif);
    }
  6. Hacks

    Este não é o melhor rótulo para o bloco já que aqui não estão hacks de CSS e sim configurações genéricas que ajudam a construir o layout como image replacement e clear-fix:

    /* img repl */
    h1 a, h3.description, #menu a{
    	display: block;
    	overflow: hidden;
    	text-indent: -999px;
    }
    /* clear-fix */
    #main: after{
    	content: ".";
    	display: block;
    	clear: both;
    	visibility: hidden;
    	/*line-height: 0;*/
    	height: 0;
    }
    #main{
    	display: inline-block;
    }
    html[xmlns] #main{
    	display: block;
    }
    * html #main{
    	height: 1%;
    }

    Cada um tem sua técnica favorita para o image replacement e outros usam a definição display: table ao invés do clear-fix. Não importa. Isto é apenas um exemplo.

Dividir para conquistar

Se sentir que o arquivo está grande e de difícil manejo, o desenvolvedor de interfaces pode decidir dividí-lo em várias partes e importá-los em um único CSS:

@import url("reset.css");
@import url("basic.css");
@import url("grid.css");
@import url("format.css");
@import url("pages.css");
@import url("hacks.css");
...

Ah, mas é mais trabalho?

Estabelecer critérios para organizar o código CSS é mais trabalhoso no início, mas vale a pena durante o projeto e durante a manutenção, principalmente se for um código compartilhado por vários desenvolvedores. E como tudo no desenvolvimento de acordo com os padrões, a prática torna tudo mais rápido e fácil.

Teste seus próprios critérios e compartilhe com a gente!

E o Blueprint e genéricos?

Não, obrigada.

Referências:

Tags:

Campus Party Brasil 2008

Campus PartyDurante o evento, estive escrevendo twittando e flickando intensivamente direto do prédio da Bienal, em São Paulo. É a primeira versão nacional do Campus Party Brasil.

Fiquei o tempo todo alocada numa das baias da área Campus Blog, logo ao lado da área do BarCamp. Tudo que produzi mesmo, além do artigo na Webinsider a ação mesmo está no Twitter e no Flickr. Leia resumo no perfil do FriendFeed.

No Webinsider:

Galerão no Genial Marcelinho DaLua Pela liberdade na rede Marias Nerdeiras e Rafael Cast

Em outros lugares:

Barcamp No stand do Flickr... Visão amplaaaaaaaaa Mesa dos blogueiros

Os beijos para os adoráveis campuseros:

  • Lu Freitas, minha heroína, que tocou toda aquela loucura do CampusBlog sempre com um sorriso no rosto. Quando crescer quero ser assim.
  • Rafael Apocalypse, menino que ronca, que me ajudou com toda a logística bizarra de ônibus, metrô, mala, colchonete. Divido qualquer outra barraca contigo feliz!!
  • O Primo, pela dose de sanidade e coerência que alguns momentos deixei para lá.
  • Pedro Villalobos, por ter ajudado a deixar minha sanidade e a minha coerência de lado de vez.
  • Kaka, menina nova com coragem e alegria.
  • Fernando Mafra, o não-parente do Fred, por mais e mais insanidades.
  • Rafael, menino fofo toda vida!
  • A todos os meninos loucos do Videolog!!!
  • Gawry, Horácio, Henrique, Marcelo, meninos dos padrões Web (aqueles mesmos que não consegui falar uma palavra sobre).
  • E claro!!! Marias Nerdeiras: Raquel Camargo, Milena Wiek e Gabriela Pereira.
  • E todos os outros campuseros que vou lembrando ao longo da semana e linkando aqui!

Até o ano que vem!!!!

Tags:

Plugins essenciais para WordPress

Seja qual for o site que estiver construindo com WordPress, alguns plugins estarão lá para melhorar a performance do código ou facilitar a sua vida. Todos estes plugins foram usados em pelo menos um projeto da Synapsis DI e todos têm versões compatíveis com o WP 2.3.

wordpress-icons.jpg

WordPress como CMS

Custom Admin Menu for WordPress
Este plugin permite escolher quais itens aparecem no menu da administração. Alguns clientes não querem blogroll outros não querem comentários, para que deixar mais coisas para confundir o pobre do administrador? UPDATE: Ainda não é compatível com o WordPress 2.5.
Search Pages
Por definição, a busca do WP serviria apenas para os artigos. Este plugin expande a busca para todas as páginas.

Manutenção

Google Analytics
Plugin simples de integração com o Google Analytics.
Google Sitemaps
Este plugin gera um XML com todos os links e títulos de artigos aumentando a eficiência da indexação do Google. Cadastrando o site no Google Webmaster Tools você tem acesso a um diagnóstico completo do site.
WordPress Database Backup
Acidentes acontecem. Nada mais seguro do que agendar backups periódicos da base de dados. Este plugin pode guardar os backups no próprio servidor ou enviar por e-mail do administrador.
WP-Cache
O processo de cache deste plugin salta aos olhos. É altamente recomendado para todos os tipos de sites. Cuidado apenas com clientes que gostam de ter corrigir e ver o resultado imediatamente. Assim que ativar o plugin, mostre onde fica o botão de limpar o cache do WordPress.

Layout e CSS

Classy Body
Em todos os meus sites estáticos gosto de usar identificadores e classes na tag body. Isto permite mais flexibilidade de layout com menos código e customização do template. O Classy Body usa apenas classes compostas. De qualquer forma, é um sonho realizado.
Flexible Upload
Nada melhor que controlar o impulso do usuário de espalhar imagens de tamanhos e resoluções diferentes pelo site inteiro. Pode ser integrado com o Lightbox. UPDATE: não é mais necessário com o WordPress 2.5.
BM Custom Login Plugin
Este plugin é um toque de classe à integração do WordPress, principalmente para aqueles sites que possuem conteúdo fechado para assinantes. Encontre inspirações no grupo do plugin no Flickr.

Feeds

FeedBurner FeedSmith
O Feedburner é uma ótima opção para manter as estatísticas de acesso pelos feeds. Além disso, tem diversas funcionalidades como integração com Flickr e del.icio.us, gerador de newsletter, entre outros.

Comentários

Akismet
Com tantos comment spammers soltos por aí, o melhor amigo do seu blog deve ser o Akismet.
Dofollow
Por padrão, o sistema de comentários publica o link do website do comentarista com um atributo que avisa que o robô de busca não deve seguir. É ótimo para evitar spammers, mas sejamos realistas, péssimo para atrair novos usuários e os spammers nem ligam. Ligue o Akismet e o Dofollow e seja feliz!

Formulários

CFormsII
Este é um plugin para formulários completíssimo. Tem captcha, todos os tipos de entrada de dados e mensagens costumizadas de sucesso e de e-mail. A documentação é bem completa apesar de um pouco confusa.
WP-ContactForm: Akismet Edition
Para soluções mais simples de formulários de contato, este com controle de spam é o mais recomendado. UPDATE: Ainda não é compatível com o WordPress 2.5.

Bônus! Os favoritos dos clientes

Kimili Flash Embed
Este plugin permite que o usuário insira arquivos Flash em seus posts.
WP Photo Album
Dentre as várias ferramentas de galeria de fotos este é um dos mais fáceis de usar e alterar o layout. UPDATE: Ainda não é compatível com o WordPress 2.5. Estou usando o NextGEN Gallery Widget.
Viper’s Video Quicktags
Este plugin é integrado com o TinyMCE para incluir vídeos do próprio usuário ou em sites como YouTube e GoogleVideos nos posts de forma super fácil
WP-Polls
Ferramenta completa de enquete. A interface dele é perfeita. Possui tradução em português.

Wishlist

Agenda de eventos
Todos os plugins de eventos que testei são péssimos, mal integrados e cheios de bugs. E este é um dos mais pedidos dos clientes.
Edição de capa
O Joomla tem muitos defeitos, mas se há uma coisa que ele faz melhor que o WP é a edição de capa. Vários clientes, principalmente jornalistas, pedem para pelo menos hierarquizar matérias mais importantes e não necessariamente mais recentes na página inicial do site.
UPDATE: Gerenciador de Capas (Lead Manager) (ainda não testei, compatível com WP2.5)
Newsletter
Uma solução completa de envio de newsletter: template próprio, arquivos, interface para usuários do tipo assinante do WordPress poderem assinar ou desassinar o envio de informativos. Tudo claro com confirmação de IP do usuário e confimação por e-mail.
Tags: , ,

CSS livre, leve e solto

Há várias formas de deixar seu CSS levinho, levinho. Algumas são automáticas, mas as melhores mesmo são aquelas que exigem apenas um pouco de disciplina e atenção na hora de evoluir com o código e a montagem.

Os melhores métodos para diminuir o tamanho dos arquivos passam por configurações no servidor. Compressão GZIP e configuração do “expires” estão entre os meus métodos favoritos. Mas nem sempre o desenvolvedor tem permissões para fazer isso ou solicitar. Aqui seguem algumas dicas de fazer otimização no CSS que não precisam de mais ninguém a não ser o próprio desenvolvedor de interfaces.

Diminuindo o número de requests

Alguns layouts exigem vários pedacinhos de botões, fundos, setas, efeitos. Cada uma das imagens recortada pode ser bem pequena, 1Kb apenas, mas para cada arquivo solicitado para o servidor há outro 1Kb referente à requisição do arquivo. Algumas sugestões para não sofrer na mão dos requests são:

  • Todos os ícones de uma mesma palheta num mesmo arquivo - icon-king.comProcurar imagens .gif ou .png que utilizem a mesma palheta de cores e condensá-las num mesmo arquivo. Se for usar como fundo, use posicionamento da imagem e um crop. Ninguém vai notar.
  • Imagem de referência para efeito de item no estado normal e ativo - everaldo.comSe houver menus com estado de inativo, ativo e hover, coloque todos os estados em um mesmo arquivo, posicionando um estado sobre o outro. Altere o posicionamento do fundo para cada estado.
  • Cada arquivo CSS é um request diferente, não importando se ele está sendo chamado no HTML ou importado dentro do CSS (@import). Economize arquivos! Use novos arquivos CSS apenas se absolutamente necessário. Para melhorar a organização, faça blocos de definições divididos por mídia (@media) e por tipo (tags, classes, IDs). É como usar o conceito de CSS frameworks, mas com menos arquivos.

Usando atalhos

Para cores:

Antes:

border-color: #FF0099;

Depois:

border-color: #F09;

Para espessuras:

Antes:

border-width: 1px 1px 1px 1px;
margin: 10px 0px 10px 0px;

Depois:

border-width: 1px;
margin: 10px 0;

Para fundos, fontes e listas:

Antes:

font-weight: bold;
font-style: italic;
font-variant:small-caps;
font-size: 1em;
line-height: 1.4em;
font-family: Verdana, Arial, Helvetica,sans-serif;

Depois:

font: bold italic small-caps 1em/1em verdana, sans-serif;

Usando alternativas

Algumas propriedades possuem alternativas. Escolha sempre a com menos caracteres. Por exemplo, troque font-weight:bold por font-weight:800, background-position:left top por background-position:0 0 e assim por diante.

Pontuando corretamente

Não é necessário encerrar cada bloco de seletores com ponto-e-vírgula:

a{
    color:#F09;
    text-decoration:underline
}

Vamos começar tudo de novo…

Mesmo que você não seja fã de CSS frameworks, use pelo menos um conjunto de parâmetros CSS para limpar todos as definições de estilo nativas do navegador. Causa um estranhamento no início, mas é bem mais rápido de implementar. Além disso, evita várias definições para limpar estilos espalhados pelo site e hacks para tentar igualar as definições de um browser para outro. Veja sobre reset.css mais no site do Eric Meyer.

Robôs para seu prazer

Para a publicação de uma inteface, é interessante usar alguma ferramenta de otimização como o Icey – CSS Compressor, Clean CSS e o CSS Tweak. Teste o site nestes e em outras ferramentas pois os resultados variam de projeto para projeto.

Lembre-se sempre de fazer um back-up dos seus arquivos antes de utilizar uma destas ferramentas. E teste, teste tudo novamente depois de passar os arquivos .css por estes filtros.

Há ferramentas para condensar arquivos de CSS e de JavaScript.

Referências:

Tags: , ,

Desenvolvedores de front-end, uni-vos!

Somente hoje vi o vídeo da palestra do Peter-Paul Koch (PPK) feito no mês passado no Yahoo! sobre o Fronteers. A proposta é reunir desenvolvedores de front-end em uma organização própria na Holanda, país natal do PPK.

Para quem não liga a pessoa ao title job, os desenvolvedores de front-end também são conhecidos por HTMLers, programadores de HTML (sic), codificadores, “cabeçudinhos” e assim por diante. Este profissional é a conexão entre designers de interface e de interação, arquitetos de informação, desenvolvedores e analistas, e no entanto é uma das posições mais mal compreendidas e mal remuneradas no ambiente de trabalho Web.

Alguns dos objetivos deste grupo é:

  • Determinar quais são os requerimentos mínimos para ser um bom desenvolvedor de front-end: HTML? CSS? Acessibilidade? Flash? JavaScript???
  • Assegurar uma certificação confiável para estes profissionais, de acordo com os requerimentos definidos.
  • Acabar com a ladainha do title job.

Tenho trabalhado nesta função boa parte dos meus dez anos de Web (ouch!)  e nem sei por quanto tempo tenho esperado por uma iniciativa assim. Espero ver os próximos capítulos lá para, quem sabe, trazer para o Brasil algo parecido.

Mais informações

Tags:

Twittetiquette

A sua “twittosfera” está saindo do controle? Não entre em pânico ainda. Veja a seguir alguns recursos e dicas para continuar sendo produtivo e acompanhar os hypes mantendo alguma sanidade mental.

  1. Não precisa seguir todo mundo que segue você. É algo gentil, mas aprenda que você pode ter admiradores e sua lista pode ficar impossível de acompanhar. Se resolver seguir, ligue as notificações por instant messenger (IM) e somente receba as mensagens de seus amigos. Desta forma, quando entrar em modo de procrastinação é só acompanhar via Web ou através de algum plugin ou programa cliente para o Twitter.
  2. Ligue o IM e a notificação por SMS, mas tenha cuidado com quem está na lista de notificação por IM. Seja criterioso senão seu celular não irá parar nunca de apitar.
  3. Saiba quando citam você ligando o modo paranóia. É possível rastrear todas as mensagens enviadas para você com um tracking. Digite no seu celular ou IM:
    track seunick

    Para desativar paranóia é só digitar:

    untrack seunick

    Isto serve para qualquer expressão: “track barcamprio”, “track nickdoseunamorado”, “track dogging São Paulo” e assim por diante.

  4. Saiba também quando estão falando com você por RSS. Vá até a tela Replies do seu perfil e assine o feed. A melhor ferramenta para isso é um cliente de e-mail, como o Thunderbird.
    Os replies são apenas interpretados desta forma quando o post começa com @nick (dica @crisdias). Portanto, o modo paranóia total é mais eficiente o tracking.
  5. Seus critérios para seguir ou não alguém são apenas seus! Ninguém precisa saber que foi rejeitado porque é um miguxo, um stalker ou um business bullshit generator.

Algumas ferramentas legais:

Se você tem alguma outra sugestão de twittetiquette, faça um comentário neste artigo!

Tags: ,

Definindo estrutura, apresentação e comportamento

Um desenvolvimento maduro para a Web conta com bons nomes de arquivos, um diretórios organizados e separação das camadas de estrutura, apresentação e comportamento.

O que é estrutura, apresentação e comportamento em uma interface Web

Definimos assim cada uma destas camadas:


Estrutura

A camada de estrutura é formada por uma linguagem de marcação, como o XML, HTML e XHTML. Este arquivo contém o conteúdo do documento, além de informações de indexação e documentos relacionados.

O conteúdo deve ser marcado de modo que seja perfeitamente compreensível para qualquer tipo de usuário, seja ele quem for ou qual seja o dispositivo utilizado. Deve-se marcar cada trecho com seu correspondente, de acordo com a definição do tipo de documento (DTD). No HTML, por exemplo, usamos as tags:

  • <p> para parágrafos;
  • <a> para links de hipertexto;
  • <h1>, <h2> e <h3> para títulos;
  • <ul>, <ol>, <li>, <dl>, <dt> e <dd> para listas;
  • <table>, <thead>, <tbody>, <caption>, <tr> e <td> para tabelas; e assim por diante.

Cada elemento deve procurar seu melhor correspondente no tipo de documento. Se um elemento ou um conjunto deles não tiver uma boa correlação deve-se usar elementos genéricos:

  • <div> para elementos em bloco;
  • <span> para elementos em linha (dentro de parágrafos, por exemplo).

A seguir, um exemplo de documento bem simples pronto para a publicação.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Meu site</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
  <script type="text/javascript" src="behavior.js"></script>
</head>
<body>

  <h1>Olá mundo!</h1>

  <div id="avatar">
    <img src="avatar.jpg" width="48" height="48" alt="Foto">
  </div>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
    onummy nibh euismod tincidunt ut laoreet dolore erat
    olutpat. Ut wisi enim ad minim veniam, quis nostation
    llamcorper suscipit lobortis nisl ex.</p>

  <p>Ut wisi enim ad minim veniam, quis nostrud exerci.
    <a href="http://outrosite.com" rel="external"
        title="Outro site">link abre uma nova janela</a>.
        Lorem ipsum dolor sit amet, sectetuer cidunt ut
        dolore magna aliquam erat volutpat.</p>

  <p><a href="mailto:eu@provedor.com">mande um e-mail!</a></p>

</body>
</html>

Se somente este código for mostrado ao usuário, é muito provável que ele consiga realizar as tarefas possíveis nesta interface que incluem ler o texto, ver a foto, clicar no link externo e mandar uma mensagem eletrônica.

Nesta camada, são tomadas decisões de conteúdo, como a hierarquia das seções (definidas pelos seus títulos), como será o formato de data, como estruturar um menu de navegação ou um breadcrumb, entre outras. Além disso, é nesta camada que reside boa parte das definições de acessibilidade de uma interface.

Veja um exemplo de página apenas com a estrutura. Perceba que mesmo sem layout ela continua sendo compreensível e que continua funcionando sem JavaScript. Para ver a estrutura de qualquer página use uma extensão para como o WebDeveloper para Firefox e aperte Ctrl+Shift+S.


Apresentação

Na camada de apresentação, está tudo que caracteriza o layout da página. Com o CSS, definimos cores de fontes, fundos, posição dos elementos na página e todas as outras decisões estéticas.

Veja um exemplo de código CSS aplicado ao nosso exemplo de estrutura:

body{
	font: 0.8em Arial, Helvetica, sans-serif;
	background: url(fundo.jpg) no-repeat;
	padding: 140px 0 0 100px;
}
p{
	width: 400px;
	margin:0;
	padding:10px;
	background: url(fundo.png);
}
p + p + p{
	background: transparent;
}
h1{
	width: 400px;
	margin-left: -30px;
	font: bold 3.5em Georgia,Times New Roman,serif;
	color: #93360D;
}
div{
	float: left;
	margin: 0 10px 0 0;
}
img{
	border: 1px solid #000;
}
a{
	color: #000;
}
a:hover{
	color: #93360D;
}
a[rel="external"]{
	background: url(externo.png) center right no-repeat;
	padding-right: 13px;
}
a[href ^="mailto:"]{
	font-size: 0.85em;
	font-weight: bold;
	text-decoration: none;
	padding: 2px 10px;
	background: #E0C284;
}

Separando todas as definições de estilo num documento separado permite melhor gerenciamento de estilos diferenciados de acordo com a mídia. Pode haver um estilo diferenciado para impressão:

@media print{
	* {
		color: #000;
		font-family: Georgia,Times New Roman,serif;
		text-decoration: none;
	}
	p + p + p, img{
		display: none;
	}
}

Veja o exemplo anterior, agora com a camada de apresentação.


Comportamento

Já na camada de comportamento, estão todos os efeitos e todas as decisões funcionais da interface. Manter a programação separada da estrutura facilita a manutenção e evita erros. Além disso, é mais fácil tratar alternativas para usuários que não possuem suporte a esta camada, como usuários de celular e de quiosques.

No exemplo anterior, clique no link para abrir um site externo em nova janela.

Veremos um artigo mais detalhado sobre scripts não intrusivos mais adiante.


Referências:

Tags: , ,

BarCamp Rio… eu fui!

BarCamp Rio

Fui seduzida pelo conceito do BarCamp durante o evento no Rio neste fim de semana. Recontrei amigos que não via há séculos. Conheci várias pessoas legais. Algumas pessoas já tinha conversado virtualmente e outras conheci na hora e já estou assinando os feeds.

BarCampRioSpark apresentando o CakePHP para os meninos…

Temos BarCamps marcados para Fortaleza, Curitiba e Belo Horizonte em novembro e já temos grupos para o HadouCamp.

Alguns outros relatos aleatórios:

  1. BarCampRio: Review, por renata.org;
  2. BarCamp Rio: Eu estava lá!, por Pedro Giglio;
  3. Barcamp: as gentes, por Maffalda;
  4. BarCamp Rio 2007: Resumo das Atividades, por Nick Ellis;
  5. Mairus Webber foi ao BarCamp Rio, por Mairus Weber.
Tags: , ,