Sou + Web

Terceira edição da série de debates na FACHA neste sábado, dia 8 de novembro. O tema da vez é Webdesign com foco no cliente, com Anderson Gaveta, Bruno Dulcetti e Gabriel Guerra. Para se inscrever, mande um e-mail para nino.carvalho@gmail.com até hoje informando nome, e-mail, onde trabalha e em qual cargo e como soube do evento. Mais informações em no DNA Digital.

Dia Mundial da Usabilidade

Nesta edição do evento no Rio, teremos apenas um painel sobre Web com Letícia Cianconni falando de metodologias. Mas é claro que o evento é super interessante por si só. Será dia 13 de novembro a partir das 17h30 na unidade Ipanema da UniverCidade. Mais informações no Interfaceando, blog do Robson Santos. As inscrições estão abertas no site do evento. Sobre outras edições no país, veja no site oficial.

A escola no século XXI

O Descolagem deste mês será sobre a nova escola. Os palestrantes serão Paulo Blikstein, Luli Radfahrer e Patrícia Konder Lins e Silva. Imperdível para quem gosta de educação à distância. Será no NAVE, na Rua Uruguai na Tijuca, no dia 22 de novembro, às 15 horas. Para se inscrever, envie um email para descolagem@oi.com.br com o assunto “Quero participar”, informando nome, idade e ocupação. Quem não puder ir, pode conferir o streaming no site http://www.onave.org.br.

Depois do Descolagem, provavelmente iremos emendar direto para o #BOD (Blogs on Dance), na Lapa. Mais informações no site oficial.

Você vai organizar algum evento sobre Web no Rio de Janeiro? Mande um e-mail com data, local, como se inscrever, página oficial e email de contato do evento.

Para apimentar mais este cenário, o comércio eletrônico nacional deu uma sacudida nestas últimas semanas. Primeiro foi a chegada do Wal-mart. Menos de duas semanas depois, Submarino lança um novo redesign, talvez o mais radical de sua história.

Sacudida mais do que necessária. Desde a fusão de Americanas.com com Submarino há dois anos, o mercado se tornou um tédio só. Pouca competição ao longo do tempo leva a preços pouco competivos e serviços de baixa qualidade (alguém não tem alguma reclamação sobre entregas de Submarino e Americanas.com?). Ainda assim, as vendas pela Internet só subiram durante este tempo.

E é uma sacudida atrasada. O diferencial destes dois lançamentos é uma pitada de Web 2.0, algo que convivemos há anos já em todos os outros tipos de site. A seção Meu Wal-mart tenta algo de rede social, com foto do usuário, controle das resenhas feitas e agenda de eventos. Os produtos dos dois sites podem ser tagueados comunitariamente, e assim por diante.

O desafio agora é compensar o tempo perdido: pensar na Web Semântica, forçar mais os limites do SEO ético, inovar nos recursos de interface e de interação de verdade. O mundo inteiro lá fora já pensa na terceira onda da Web e não é hora para ficar parado olhando para a flutuação do dólar.

Mais referências:

• How your online business can survive a global recession, por Andy Budd;
• Wal-Mart unveils e-commerce site in booming Brazil, Reuters;
• Pesquisas confirmam que brasileiros nao querem parar de comprar, Blue Bus;
• A crise global chegou ao comércio eletrônico?, por Maurício Salvador no Webinsider
  

Até lá! :*

Ou, enquanto isso, acompanhe minhas atualizações no Twitter, Google Reader, Blip.fm, del.icio.us e blippr.

Cada elemento-chave deve poder ser identificado

Em nosso código de teste, vamos usar uma lista não-ordenada simples:

<ul>
    <li>Primeiro item</li>
    <li>Segundo item</li>
    <li>Terceiro item</li>
    <li>Quarto item</li>
</ul>

Imaginando que haverá outras listas nesta tela, o ideal é identificá-la diretamente:

<ul id="lista-especial">
    <li>Primeiro item</li>
    <li>Segundo item</li>
    <li>Terceiro item</li>
    <li>Quarto item</li>
</ul>

Ou pelo seu pai, onde todas as listas-filhas terão a mesma apresentação e comportamento:

<div id="conteudo">
    <ul>
        <li>Primeiro item</li>
        <li>Segundo item</li>
        <li>Terceiro item</li>
        <li>Quarto item</li>
    </ul>
</div>

Se esta lista for um menu, certamente o designer irá escolher uma forma de realçar cada item ou pedir certo comportamento diferenciado como por exemplo alterar a cor com o passar de cursor ou com o item ativado. Prevendo isso, cada item dentro da lista deve ser identificado:

<ul id="menu-principal">
    <li id="menu-item-1"><a href="#1">Primeira página</a></li>
    <li id="menu-item-2"><a href="#2">Segunda página</a></li>
    <li id="menu-item-3"><a href="#3">Terceira página</a></li>
    <li id="menu-item-4"><a href="#4">Quarta página</a></li>
</ul>

Desta forma, seja qual for a implementação escolhida para o menu o desenvolvedor poderá manipular:

#menu-item-1 {background:pink;}
#menu-item-1 a{background:blue;}
#menu-item-1 a:hover{background:red;}

Mais um pé nos frameworks CSS

Seu designer favorito não consegue fazer outro tipo de layout que não seja de largura fixa, centralizado na tela? Então você já pode antecipar que o HTML terá um bloco logo abaixo da tag body somente para este fim. Não me lembro, inclusive, da última interface que montei que não precisei deste bloco. Nem todas as possibilidades de uma interface podem ser incluídas num HTML enxuto e puramente semântico. Algumas divs auxiliares sempre são necessárias.  Da mesma forma, vejo que sempre preciso dos blocos de cabeçalho, rodapé e barra lateral.

<!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>
<div id="centralizando-layout">
    <div id="cabecalho">
        <h1>Olá mundo!</h1>
    </div>
    <div id="conteudo">
        Este é um elemento solto
        <p>Lorem ipsum dolor sit amet, consectetur
           adipisicing elit, sed do eiusmod tempor
           incididunt ut labore et dolore magna
           aliqua.</p>
    </div>
    <ul id="lateral">
        <li id="mn-it-1"><a href="#1">Primeira página</a></li>
        <li id="mn-it-2"><a href="#2">Segunda página</a></li>
        <li id="mn-it-3"><a href="#3">Terceira página</a></li>
        <li id="mn-it-4"><a href="#4">Quarta página</a></li>
    </ul>
    <div id="rodape">
        <p>© 2008 Meu site</p>
    </div>
</div>
</body>
</html>

Evite expressões órfãs

Veja no exemplo anterior a expressão “Este é um elemento solto” e tente manipulá-la via CSS ou JavaScript. É mais complicado, não? Tente sempre manter os elementos dentro de marcações específicas:

    <div id="content">
        <h2>Este não é um elemento sem pai</h2>
        <p>Lorem ipsum dolor sit amet, consectetur
           adipisicing elit, sed do eiusmod tempor
           incididunt ut labore et dolore magna
           aliqua.</p>
    </div>

Melhor antecipar do que alterar cinqüenta telas depois

Muitas das decisões podem ser antecipadas mesmo sem olhar o layout ou o sistema, mas é melhor que não seja assim. Antes de começar a montar o código HTML, analise a interface previamente aprovada e conheça bem as limitações do sistema. Não é bola de cristal ou receita de bolo, e sim uma questão de saber reconhecer os padrões de código que se repetem projeto após projeto.

Os usuários do Twitter têm sofrido nas últimas semanas com constantes quedas no serviço, limitação no uso dos clientes de terceiros e notificações por mensagem instantânea. Mesmo assim há resistência em utilizar outros serviços. Qual seria o problema?

A primeira resposta seria a lista de amigos. No entanto, é virtualmente possível refazer boa parte dele em uma tarde em qualquer outro site que não dependam de convite, como o Jaiku. Basta enviar um email notificando seus contatos mais próximos. Se o conteúdo do seu microblogging for interessante para seus contatos, o sucesso da migração está garantido. Este não deveria ser o principal obstáculo e pude comprovar isso nas últimas semanas com a enxurrada de convites.

Vários fatores influenciam diretamente o sucesso do Twitter: sua simplicidade, sua interoperabilidade, sua popularidade. Graças a estes dois últimos, vários programas clientes de terceiros foram desenvolvidos pela comunidade, como extensões para Firefox, programas para diversos sistemas operacionais, clientes para celular, sites de mashups. Praticamente qualquer necessidade de experiência de usuário para a publicação e acompanhamento da rede Twitter está suprida. Quem já se acostumou aos seus modos favoritos de leitura, terá dificuldade nestes outros sites, ainda não tão populares.

O grande fator de rejeição do Jaiku, por exemplo, é sua falta de simplicidade e clareza. O serviço optou por oferecer diversos recursos, o que tornou a interface bastante poluída e com poucas opções de personalização. Imagino que integrar todos estes recursos a um programa cliente também seja custoso demais para uma base de usuários não tão extensa.

A crise existencial dos serviços de microblogging é um caso incrível para o dia-a-dia do profissional Web. Temos que manter o foco na simplicidade da interface e objetividade na realização da tarefa. Qualquer firula, principalmente nos primeiros meses de um site, é um risco para a fidelização de usuários.

Ainda hoje, o usuário precisa se sentir conquistado e amado pelo site que participa. E ele não sonha com flores e bombons: o usuário deseja que serviço esteja disponível quando ele precisar. Se o serviço é bom, mas tem suas falhas, o usuário perdoa. Mas cuidado para não fazê-lo se sentir a mulher do malandro. Um dia, ele segue o seu rumo.

Referências e outras opiniões:

• Twitter At Scale: Will It Work?, por Nik Cubrilovic no Techcrunch;
• Why VCs love Twitter’s downtime problems, Valleywag.

UPDATE:

Nos últimos dias, tenho usado o serviço do Ping.fm para publicar microposts para o Twitter, Jaiku, Pownce e Plurk simultaneamente. Foi um achado para a manutenção da base de amigos e para a produvidade no trabalho. Ainda mais com a versão móvel. É uma grande vantagem para o microblogueiro autista que “apenas fala para a parede”. Falta uma ferramenta que integre melhor as respostas que fazem do Twitter, por exemplo, mais uma rede social do que uma plataforma de publicação na Web.

De qualquer forma, não deveria estar me justificando! Já vi muito código como este:

h3{
display:block; width:190px; height:40px;
margin-left:20px;padding:2px 4px 2px 4px;
background-image:url(/img/titulo.gif);
background-repeat:no-repeat;
background-position:left top;
width:188px;
height:40px;
border-top:2px solid #006666;
border-bottom:2px solid #006666;
display:block;
overflow:hidden;
text-indent:-999px;
margin:10px 10px 10px;
}

Em qualquer um dos casos, não é só desperdício de bytes, é também um problema durante a manutenção do código e na solução de problemas. Também em CSS, menos é mais. Códigos mais simples são mais fáceis de ler e compreender.

Como já vimos anteriormente a otimização de CSS, vamos limpar o exemplo antes de ordená-lo:

h3 a{
	display:block;
	width:190px;
	height:40px;
	margin-left:20px;
	padding:2px 4px;
	background:url(/img/titulo.gif) no-repeat 0 0;
	width:188px;
	height:40px;
	border:0 solid #066;
	border-width:2px 0;
	display:block;
	overflow:hidden;
	text-indent:-999px;
	margin:10px
}

Agora podemos ordenar os seletores com alguns parâmetros pré-estabelecidos. O exemplo pode ficar assim, onde reparamos alguns seletores repetidos com valores conflitantes:

h3 a{
	display:block;
	display:block;
	overflow:hidden;
	width:190px;
	width:188px;
	height:40px;
	height:40px;
	margin-left:20px;
	margin:10px;
	padding:2px 4px;
	background:url(/img/titulo.gif) no-repeat 0 0;
	border:0 solid #066;
	border-width:2px 0;
	text-indent:-999px
}

O debug é automático assim mesmo. É só definir uma ordem que o desenvolvedor bate o olho e vê o que está errado ou sobrando no código. Tenha cuidado ao reordenar os seletores semelhantes para não alterar o resultado final.

Para ordernar os seletores basta definir uma ordem arbitrária: ordem alfabética, por tipo de seletor, pela melhor forma de memorização, não importa. Se não quiser pensar sobre isso, ofereço a minha cola.

A base desta lista foi a referência de CSS do W3Schools e está dividida e ordenada em grupos. Primeiro, lido com os fatores de dimensão e posicionamento dos boxes para depois tratar do formato e cores.

Posição e classificação do elemento na tela

Posicionamento

• position
• top
• right
• bottom
• left
• z-index
• overflow
• clip
• vertical-align

Classificação

• clear
• float
• display
• visibility
• cursor

Tamanho do elemento e sua relação com outros

Dimensão

• width
• height
• max-width
• max-height
• min-width
• min-height
• line-height

Margens

• margin
• padding

Formato do elemento

Fundo

• background
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Bordas

• border
• border-width
• border-style
• border-color

Listas e marcadores

• list-style
• list-style-type
• list-style-position
• list-style-image

Tabela

• border-collapse
• border-spacing
• caption-side
• empty-cells
• table-layout

Tipologia e conteúdo

Fontes

• font
• font-style
• font-variant
• font-weight
• font-size
• font-family

Texto

• color
• text-align
• text-decoration
• text-indent
• text-transform
• direction
• letter-spacing
• white-space
• word-spacing

Conteúdo

• content
• quotes

Estou usando esta lista já há alguns meses com sucesso. Nenhuma lista é perfeita e adoraria idéias para aperfeiçoá-la. Até a segunda semana de uso não tirei-a do meu lado. Depois, tudo ficou automático e só a consulto para propriedades que uso raramente. Quando pego um código antigo, é instantânea a vontade de reordernar tudo antes de revisá-lo.

Referências:

• CSS2 Reference, W3Schools;
• Improving Code Readability With CSS Styleguides, na Smashing Magazine;
• Dicas básicas para projetar Folhas de Estilos, por Maurício Samy Silva.
  

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:

• Internet móvel ultrapassará web convencional, diz Google, Folha Online.
• Flexible Layouts: Challenge For The Future, Smashing Magazine.
  

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:

• Frameworks for Designers, A List Apart;
• CSS Frameworks + CSS Reset: Design From Scratch, Smashing Magazine.

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:

• Movidos pela informação e pelas não-atividades

Em outros lugares:

• Live streaming, BlogBlogs;
  
• Sao Paulo Fashion Geek e Carnaval dos Nerds, triste jornalismo, Blue Bus;
• Quando a blogosfera vira ruído e a tinta vira marrom (ou rápidas reflexões sobre o Campus Party), por Michel Lent;
• CampusParty 2008 - um evento intenso, por Fernando Mafra no Overmundo;
• Campus Party em números, por James Della Valle no Limão;
• Oferta e procura em inovação, por Luli Radfahrer;
• Patxi!!!!!!!!!!!, o evento sob o ponto de vista de um voluntário.
  

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!!!!

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.

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:

• Procurar 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.
• Se 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:

• CSS Optimization: Make Your Sites Load Faster for Free, no Blogging Pro;
• O artigo Best Practices for Speeding Up Your Web Site traz os parâmetros do YSlow para sites de grande porte;
• Efficient CSS with shorthand properties, no 456 Berea Street

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

• O vídeo da apresentação do PPK no Yahoo! sobre o Fronteers
• O slideshow da apresentação
• Post no blog do PPK sobre o Fronteers

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:

• TwitterWhere: Descobrindo twitters perto de uma localidade. Ótimo para pedir dicas de viagem;
• Terraminds micro: fazendo tracking via Web;
• The Big Juicy Twitter Guide, por Caroline Middlebrook;
• Mega lista no Mashable: TWITTER TOOLBOX: 60+ Twitter Tools.

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

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:

• The Behaviour Layer: Using JavaScript for good, not evil, por By Jeremy Keith;
• Separating behavior and structure, por Peter-Paul Koch;
• CSS: A verdadeira linguagem de design na web, por Molly E. Holzschlag, traduzido por Pedro Mendes;
• e mais uma tonelada de artigos coletados no del.icio.us/s1mone/webstandards.

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.

• Organização do BarCamp Rio foi impecável. Não dá para dizer um ‘ai’, mas se me permite… seria ótimo se fossem dois dias. Eu estaria um lixo, mas muito feliz.
• Não consegui largar o infeliz do celular e fiquei