IvoGomes.com

Voltar ao início

Conferência @media 2006 – Dia 1

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

Eric Meyer

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.

Cameron Moll, John Hicks e Veerle Pieters

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.

Dave Shea

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.

Andy Budd

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

Jeffrey Veen

E assim terminou o primeiro dia.

Continuar a ler

Conteúdos Relacionados


24 Comentários

Comente este artigo!

  1. Luís Daniel Cunha

    Olá Ivo,
    Em primeiro lugar quero dizer-te que estou cheio de ciúmes, também gostava de aí estar! lol

    Acerca do que escreveste neste artigo, gostei, os nomes são famosos, de grande credibilidade sem dúvida. São os “Ronaldinhos” da web! Em especial costumo acompanhar o blog do Cameron Moll…

    Por último, o teu report está a ser excelente, espero que faça o mesmo sobre os restantes dias. Um abraço e que tudo corra bem!

  2. João Craveiro

    [A cor d]á também um significado a algo (ex: verde significa seguir em frente e vermelho significa parar)

    Em termos de web (e aliás, de interfaces em geral) prefiro pensar na cor como um reforço de significado, e não o significado… ;)

    Ao usar [determinados] tipos de letra … conseguimos … identificar a nacionalidade de um texto.

    Hum, estou curioso que apareçam os slides das apresentações para esclarecer esta (será que ele se refere a que, se alguém é desleixado ao ponto de se esquecer de definir a fonte no CSS, então é tuga? :P).

    Um enorme bem-haja por estes teus relatos. :)

  3. Rogério Morais

    Gostaria muito de estar nessa conferência… mas como isso não é possível, estarei acompanhando-a pelos posts do teu blog. Continua a postar relatórios.

  4. Ivo Gomes

    @João Craveiro: É possível identificar a nacionalidade através de um determinado tipo de fonte. Não te sei explicar bem como mas por vezes há tipos de letras que te fazem lembrar um país. Como exemplo foram mostrados os cartazes da antiga URSS em que o tipo de letra era sempre igual e consegues transmitir essa nacionalidade usando esse tipo de letra. Quando aparecerem os slides vai dar para perceber muito melhor :)

  5. Dextro

    E viva o KISS amigos :mrgreen:

  6. goncalo

    A questão de identificar a nacionalidade através de uma fonte está intimamente ligada a factores históricos, muitas das vezes próximo de questões industriais que celebrizaram certos países.
    Entre os exemplos mais conhecidos encontram-se o da Gill Sans > Inglaterra (fonte desenhada pelo tipografo Inglês Eric Gill baseada na fonte usada no metro de Londres) , DIN > Alemanha (DIN são as iniciais de Deutsche Industrienorm, ou seja Standarts Industriais Alemães, tal como usado no DIN A4) e, claro a Helvetica > Suíça (nem era preciso dizer..) que surge no pós Movimento Estilo Internacional onde a “função define a forma? e tem no design Suíço o seu expoente máximo.
    Parabéns pela cobertura ao @media 2006 que é a melhor forma de curar a dor de cotovelo de não estar lá. Excelente trabalho, parabéns (de novo) e… obrigado.

  7. Ivo Gomes

    Nem mais! Era isso mesmo :)

  8. Arti

    excelente artigo Ivo, Parabens…

    EU gostaria de ir ao Fundamentos Web 2006 nas Asturias.

    Tambem deve ser interessante…
    Ainda fiz lá uma frase rapidinha mas acho que até saiu bem

    make it simple for the people

    em espanhol é que nao soa tao bem

    hacer simple para la gente

    .
    Prometo que se lá for farei também um relatório.

  9. Ivo Gomes

    Obrigado. Ficamos então a aguardar pela tua crónica :)

  10. Rodrigo Medeiros

    Ivo, parabéns pela cobertura do evento, é o bem que vem para curar a ‘dor de cotovelo’ de quem não teve $$ para seguir para Londres. Um abraço.

  11. Himler

    No caso russo, até concordo, mas como definir a França em fontes, e o Brasil então? O Brasil não tem identidade, quando colocam uma identidade fica forçado, meio selva, meio tucanos, meio Ipanema ….

  12. renato cruz

    Ótimo review, Ivo!

    Agradeço muito pela informação!

    Abraço ;)

  13. bruno maia de andrade

    __COm relação ao SVG, a sintaxe dele é XML, entretanto, você nãi precisa saber XML, para gerar os gráficos. É possível usar alguns softwares que geram SVG, como o Adobe Illustrator ou uma boa alternativa grátis, como o Inkscape.

    __Aliás, pela maleabilidade, o SVG deveria ser um padrão de fato, visto que é compatível com COrel, Illustrator e outros alienigenas e não dá probelmas com “versões” como dá o Corel, por exemplo.

  14. Carlos Eduardo Lopes de Albuquerque

    Quandos os slides estarão disponíveis para uma análise.
    Gostaria de ver exemplificações de países e caracteres.

  15. Marcos Lima Ribeiro de Athayde

    Quais são estes softwares que geram SVG? Não conheço nenhum, alguém pode me informar onde posso baixa-los.

Blogs que "linkam" para aqui

  1. Modo intermitente: tomem lá links ‹ lâmpada azul
    16 de Junho de 2006, 16:47
  2. ivogomes.com » Conferência @media 2006 – Dia 2
    17 de Junho de 2006, 10:37
  3. Rodrigo Medeiros
    3 de Julho de 2006, 13:55
  4. ivogomes.com » @media 2006: os slides das apresentações
    3 de Julho de 2006, 17:14
  5. Doufer » Blog Archive » @media 2006
    1 de Agosto de 2006, 13:50
  6. ivogomes.com » A SHiFT é já esta semana
    26 de Setembro de 2006, 07:15
  7. » @media 2007, os slides – IvoGomes.com
    22 de Julho de 2007, 14:33
  8. Fontes: o eterno dilema « fredericopeter blog
    6 de Março de 2010, 20:43
  9. Hacks: as seis leis de Andy « fredericopeter blog
    7 de Março de 2010, 02:00

Comente!

* Campo obrigatório, de modo a aparecer o seu nome como autor do comentário

* Campo obrigatório, mas não será mostrado no site

* Campo obrigatório, convém escrever alguma coisa ;)

São permitidas algumas tags HTML, como
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>