Vou fazer aqui o resumo do que aconteceu no primeiro dia da conferência. O local é absolutamente fantástico, mesmo ao lado do Big Ben e da Abadia de Westminster. As salas também são muito boas e amplas. Só a comida é que não é lá grande coisa...

Keynote Presentation

Eric Meyer

O Eric falou sobre o nascimento do CSS em 1996 e sobre tudo o que aconteceu desde essa altura até aos dias de hoje.
No início apenas existia um browser, o IE3 e a informação sobre o CSS era muito escassa. Desta forma foi necessário publicar informação na net sobre CSS para ajudar os programadores dos novos browsers a incorporarem o CSS nos seus produtos. No entanto, à medida que os browsers iam sendo desenvolvidos e lançados no mercado, o suporte ao CSS deixou sempre muito a desejar.

Com as diferenças de interpretação do CSS entre os vários browsers, era necessário criar um standard. Assim nasceu o Web Standards Project, uma ideia de Jeffrey Zeldman.

Depois com o aparecimento de ainda mais browsers, as incompatibilidades do CSS foram aumentando e foi necessário refazer uma boa parte do código nos sites já existentes para que fosse bem interpretado em todos os browsers.

Eric Meyer falou também sobre as pessoas que contribuíram para uma melhor interpretação do CSS nos vários browsers, entre eles Todd Fahrner e Tantek Çelik.

Em 2001-2002, com o aparecimento do Box Model Hack, começou a generalizar-se o uso do CSS porque passou a ser possível conceber um website que funcionasse em qualquer browser. Curiosamente, foi com o nascimento dos hacks que o CSS se começou a usar com mais frequência.

Em 2003 apareceu o CSS Zen Garden que permitiu que os designers passassem também a usar CSS para os seus layouts (anteriormente apenas os programadores usavam CSS, daí a opinião geral de que com CSS apenas se faziam sites quadrados e todos iguais).

Hoje em dia o CSS começa a ser usado também em aplicações não-web, tais como o cliente de chat Adium ou os widgets do Apple Dashboard. O CSS já é também usado para a impressão de livros e documentos em papel.

No futuro, o CSS irá continuar a evoluir para poder proporcionar aos designers e programadores uma forma simples de estilizarem os seus websites, aplicações, livros, etc...

Good Design vs Great Design

Cameron Moll; John Hicks; Veerle Pieters

Esta comunicação a três começou com um conjunto de perguntas a que cada um dos oradores tentou responder da melhor maneira. Algumas dessas perguntas foram: qual é a definição de design?; qual é a importância de ser original e criativo?; é possível fazer um excelente (great) design com poucos recursos?

Foi interessante conhecer a opinião de 3 designers diferentes sobre um mesmo tema. Apenas na primeira pergunta as respostas foram bastante diferentes porque todos eles têm concepções diferentes daquilo que consideram ser o design.

Depois disso, cada um deles falou um pouco sobre uma área do design. Cameron Moll falou sobre a concepção de grelhas para a criação de um website; John Hicks falou sobre a importância da tipografia; e Veerle Pieters falou sobre a cor.

Grelhas

As grelhas permitem definir à partida o layout de um website. Para começar a desenvolver estas grelhas é necessário conhecer primeiro que tipo de conteúdos se vai utilizar. São os conteúdos que guiam as grelhas e não as grelhas que guiam os conteúdos.
Depois de ter a grelha a funcionar é sempre possível fazer alterações porque há sempre excepções à regra (ex: uma página sem uma barra lateral quando todas as outras têm a barra). O conteúdo é o essencial e tudo deve ser concebido à volta do conteúdo.

Tipografia

O tipo de letra utilizado é extremamente importante. Com ele podemos dar significados diferentes a uma mesma frase. Ao usar tipos de letra mais formais ou menos formais, mas arredondados ou mais rectangulares conseguimos exprimir emoções ou até mesmo identificar a nacionalidade de um texto. Da mesma forma, o tipo de texto errado pode arruinar um bom design.

A boa tipografia não se resume ao texto em si. O espaço em branco também é uma forma de usar a tipografia para melhorar a leitura.

Bons designers usam tipos de letra (fonts), excelentes designers usam a tipografia!

Cor

A cor define a personalidade, emoção e a disposição do design. Dá também um significado a algo (ex: verde significa seguir em frente e vermelho significa parar).
No entanto, um excelente design não se pode basear só nas cores e as mesmas devem ser usadas nas proporções correctas para que não haja exageros.
Finalmente, os detalhes são muito importantes para transmitir uma ideia. Como exemplo, a Veerle mostrou-nos um website concebido para o público feminino. Os detalhes eram constituídos por flores e estrelas colocadas estrategicamente e que lhe davam um toque feminino que não se via sem estes pequenos detalhes.

Fine Typography on the Web

Dave Shea

O Dave Shea falou de um tópico já abordado antes pelo John Hicks, mas desta vez aprofundou um pouco mais.

As regras da tipografia também se podem aplicar à web, A tipografia pode ajudar a definir o tom de uma frase. Pode também afectar a legibilidade de um texto.

Actualmente só temos 10 fontes que podemos usar na concepção de websites. Estas são as fontes que existem na maioria dos computadores, no entanto são aborrecidas e pouco flexíveis. A maior parte delas nem sequer é boa para a leitura de textos na web.

Depois foram dados alguns exemplos e opiniões do Dave sobre cada um dos tipos de fonte existentes. Por exemplo, o Times New Roman deixou de ser usado porque é visto como sendo a fonte padrão das aplicações Microsoft. Assim, se um webdesigner usar esta fonte, os outros irão pensar que ele se esqueceu de declarar o tipo de fonte correctamente no CSS :)

Depois mostrou-nos as novas fontes que irão aparecer com o Microsoft Windows Vista e como elas poderão vir a mudar no futuro o leque de opções que os designers vão passar a ter.

Finalmente foram abordadas as várias metodologias de substituição de texto que permitem usar outras fontes que não as 10 a que actualmente limitados. Estas metodologias são o uso de CSS, Font Embedding, SVG, sIFR e Image Replacement.

Para cada uma delas foram indicados os pontos fortes e os pontos fracos.

O CSS permite controlar de uma forma eficiente o texto, no entanto é difícil de controlar o tamanho relativo do texto.

O Font Embedding permite adicionar ficheiros de fontes a um website, no entanto existem duas formas diferentes de o fazer e não são compatíveis entre si, ou seja, não há um standard. Por outro lado, as empresas que criam e vendem fontes não vêem com bons olhos a publicação das suas fontes e envio das mesmas para vários utilizadores sem serem pagas licenças por cada um deles.

O SVG é uma técnica que ainda não é muito usada principalmente porque o seu sintaxe é muito complicado e impraticável. Espera-se que no futuro se consiga trabalhar mais eficiente com esta metodologia.

O sIFR permite fazer a substituição de um texto normal por uma fonte em Flash. Usam-se 3 tecnologias diferentes (CSS, JavaScript e Flash) para fazer o que o Font Embedding deveria fazer. É uma técnica segura, acessível e degradável. O ponto fraco é que não é muito amigável dos motores de busca por usar texto em Flash.

Finalmente o Image Replacement é uma metodologia que permite colocar uma imagem por cima de um texto e simular o uso de uma fonte diferente através de imagens. É uma metodologia bastante utilizada mas tem alguns problemas de acessibilidade. No futuro, o CSS3 irá permitir realizar esta metodologia nativamente de forma simples e acessível.

No final, foram fornecidos um conjunto de cenários e analisadas quais as melhores metodologias a usar em cada um deles.

Bug Hunting

Andy Budd

O Andy começou por dar várias definições de hacks e como os devemos evitar no desenvolvimento de um website.
Os browsers têm problemas (bugs) mas muitas vezes damos-lhes demasiada importância. A maior parte dos "bugs" vêm do mau conhecimento das especificações do CSS e não de erros nos browsers. Sendo assim, existem algumas "leis" a seguir para prevenir a ocorrência de erros e o uso de hacks, são as "Leis de Andy" :)

Lei nº 1: Keep It Simple (Stupid) - KISS

As pessoas usam demasiados hacks e o código fica cada vez mais complicado. Desta forma a probabilidade de ocorrência de erros e bugs aumenta bastante.
O CSS tem as suas limitações e é importante que os designers conheçam um pouco sobre o código para saberem quais os limites do próprio CSS ao conceberem um website.

Lei nº 2: Assumir sempre que a culpa é nossa

Não culpar imediatamente o browser quando acontece algo de errado com o nosso código. É necessário verificar o código várias vezes.

Lei nº 3: Mais vale prevenir do que remediar

Devemos usar workarounds em vez de hacks. Devemos testar e experimentar várias formas ou soluções em vez de tentar resolver o problema com um hack, o que pode levar várias horas ou dias.

Lei nº 4: O ataque é a melhor defesa

Conhecer os bugs mais comuns é a melhor forma de evitar cometer os erros no código. Ao conhecer os bugs e as suas soluções, durante a escrita do código já não se cometem os erros de antigamente e as soluções são incluídas quase inconscientemente.

Lei nº 5: Isolar o problema

Se tivermos um website muito complicado, torna-se um problema tentar resolver um bug. Nestes casos é necessário isolar o problema cortando tudo aquilo que não nos interessa. No final teremos uma versão bastante simplificada do código que está a causar o problema e torna-se mais fácil descobrir onde está o erro e como o resolver.

Lei nº 6: Usar hacks apenas como último recurso

Não devemos usar hacks como uma reacção imediata a um problema. Só em último caso, quando não conseguirmos resolver o problema de mais nenhuma maneira é que devemos finalmente desistir e usar um hack.

Finalmente, o Andy deu-nos algumas dicas de como usar um hack, quando tal for mesmo necessário:

• Usar código CSS2.1 válido;
• Usar hacks apenas para browsers antigos e não para os browsers recentes (ex: IE7);
• Usar "código feio" porque dessa forma é fácil de encontrar no meio do código onde estão os hacks;
• Usar os hacks em folhas de estilo separadas para que no futuro seja mais fácil de os remover quando já não forem necessários;
• Comentar sempre todos os hacks.

Designing the Next Generation of Web Apps

Jeffrey Veen

O Jeffrey é um comunicador nato. Nota-se que tem um grande à vontade ao falar para uma grande audiência. Hoje falou-nos essencialmente sobre os pontos positivos das aplicações Web 2.0 e como os podemos aproveitar para criar melhores aplicações no futuro. Assim, foram identificados 5 elementos essenciais que devemos ter em conta.

Superfície

É a primeira impressão que os utilizadores têm do website. O uso da tipografia, cores, layout e iconografia faz com que a informação faça sentido para o utilizador.

O objectivo principal das aplicações Web 2.0 é colocar o utilizador em controlo da informação. O designer deixa de ser responsável pela informação que é relevante, passando o utilizador a ter esse papel/poder.

A primeira impressão que o utilizador tem do website é o suficiente para que ele confie ou não no mesmo. Mesmo que o site seja muito fácil de utilizar, um utilizador sem confiança nunca irá obter bons resultados durante a navegação.

Esqueleto

Devemos começar por criar esboços em papel e depois wireframes nas fases inicias de desenvolvimento de um website.
Aqui também podemos definir o tipo de tecnologia e interacção que irá ser utilizada.
Como exemplo foi dado o AJAX: o utilizador em controlo permite que a interacção seja mais simples e diminui o medo de cometer erros. Devemos usar o AJAX para ajudar o utilizador (ex: preencher automaticamente campos enquanto de escreve) e não para criar efeitos bonitos.
Por vezes é fácil ir longe demais e o uso do AJAX pode confundir ainda mais o utilizador. Devemos usar estas tecnologias para ajudar os utilizadores a não cometerem erros.

Estrutura

A organização da informação passou a ser feita pelos utilizadores. O uso de tags e a experiência do utilizador são a nova forma de arquitectura de informação. Os utilizadores são os arquitectos e os casos mais conhecidos disso são os sites como o Flickr ou o del.icio.us.

Objectivo

As ideias simples podem ser exploradas sem grandes custos. Devemos tentar resolver pequenos problemas para pequenos grupos de utilizadores (população alvo) em vez de tentar criar uma mega-aplicação que faça um monte de coisas.

60% a 70% de todos os CMS falham por se centrarem mais na tecnologia do que nas necessidades dos utilizadores. 80% dos problemas dos CMS podem ser resolvidos usando um simples blog com pequenas alterações no código para se adaptar ao caso específico de cada situação.

Estratégia

Estamos na era da "amadorização". As fontes de informação passam a ser os próprios utilizadores através dos blogs, fóruns, etc...
Ferramentas poderosas nas mãos de pessoas apaixonadas pelo seu trabalho dão bons resultados e permitem alterar completamente a forma como se deve encarar a web. Como exemplo de sucesso do uso das ferramentas potentes temos o caso dos blogs, wikipedia, craigslist, etc...)

E assim terminou o primeiro dia.

Continuar a ler

• Conferência @media 2006 - Dia 2

Conteúdos Relacionados

• Fotos da Conferência
• Fotos de Londres