Agni.art

Veja o que o CSS3 nos trás de novo.

Chris Coyier, web designer que mantém o blog CSS-Tricks, escreveu em seu perfil no Twitter que o “CSS é como o xadrez. Você pode aprender os princípios básicos em um dia, e passar a vida inteira se especializando”. De fato, o CSS é a linguagem mais fácil de ser aprendida, possuindo uma sintaxe bem simples. Porém, criar páginas com layouts bem elaborados usando CSS, assim como conhecer todos os seus macetes, exige tempo e experiência.

A forma mais correta de desenvolvermos páginas para Web é dividindo a estrutura em três camadas: conteúdo (HTML), comportamento (Javascript) e apresentação (CSS). Trabalhando o CSS em uma camada separada do restante da estrutura, conseguimos uma melhor consistência visual, uma vez que os layouts de todas as páginas estarão baseados em uma mesma folha de estilos. Também ganhamos tempo e facilidade na hora de fazer um redesign ou manutenções visuais, pois a alteração de um único arquivo terá impacto em todo o site. Com o CSS em um arquivo separado, também conseguimos fornecer maior acessibilidade ao criar folhas de estilo específicas para diferentes dispositivos como sintetizadores de fala e som, aparelhos e impressoras em Braille, celulares e outros dispositivos móveis etc. O carregamento das páginas também será mais rápido, já que após o primeiro acesso ao site, o arquivo CSS estará carregado em cache.

Divisão da Web em três camadas

Um bom exemplo de como o CSS pode ser poderoso quando bem usado é o CSS Zen Garden. O site fornece um modelo de página HTML para download, e diversos designers criam folhas de estilos para essa mesma página. O resultado pode ser visto na galeria: alterando apenas a folha de estilo, diferentes layouts são aplicados na mesma página HTML.

CSS ainda deixa a desejar

Hoje, designers e desenvolvedores ainda têm que se virar para conseguir certos efeitos gráficos. Por mais poderosa que a linguagem seja, a atual versão do CSS2.1 não fornece recursos como sombras em objetos e textos, cantos arredondados, múltiplas camadas de plano de fundo, opacidade, possibilidade de diferentes familias tipográficas, colunas em textos, etc. O fato de navegadores mais antigos (e ainda utilizados) como o Internet Explorer 6 não suportarem todos os recursos do CSS2.1 acaba complicando ainda mais a nossa vida.

Para conseguir tais efeitos e recursos nas páginas, normalmente recorremos ao uso de imagens, hacks, ou inserção excessiva de marcações HTML, o que pode aumentar o tempo de desenvolvimento e carregamento das páginas, além de comprometer a semântica dos documentos.

Com a nova versão da linguagem que está por vir, teremos maior controle sobre o estilo dos elementos. Propriedades para cantos arredondados ou sombras em textos estarão disponíveis no CSS3, sem precisarmos recorrer ao uso de truques ou imagens.

O que nos trará o CSS3?

Propriedades de CSS3 já são suportadas pelas versões mais recentes de alguns navegadores, como o Safari 4 e o Firefox 3.6. Com isso podemos testar os novos recursos que estão por vir. Para que alguns dos novos recursos possam ser testados, é necessário adicionarmos os prefixos -moz- (para a renderização no Firefox) e -webkit- (para renderização no Safari).

A seguir, exemplos de algumas das novas propriedades que a nova versão da linguagem irá nos fornecer:

border-radius

Com essa propriedade podemos adicionar um raio de arredondamento para todos os cantos de um elemento, como -moz-border-radius: 10px, ou valores diferentes para cada canto, como -moz-border-radius-topright: 5px.

text-shadow

Com essa propriedade podemos adicionar sombras em textos, configurando a distância da sombra para a esquerda e para o topo do texto, o enevoamento e cor: text-shadow: 5px 5px 2px #999.

box-shadow

Funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos: -moz-box-shadow: -10px -10px 0px #333.

border-colors

Podemos adicionar um efeito gradiente nas bordas de um elementos, aplicando cores em diferentes camadas: -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc.

Opacity

Podemos adicionar opacidade aos elementos: opacity: 0.2.

Columns

Podemos definir estilos de colunas para textos, aplicando valores para a largura, quantidade, bordas de separação e distância entre colunas: -moz-column-width: 13em; -moz-column-count: 3; -moz-column-rule: 1px solid black; -moz-column-gap: 1em.

Multiple backgrounds

Podemos definir diferentes planos de fundo para um mesmo elemento: background: url(fundo-um.jpg) top left no-repeat, url(fundo-dois.jpg) top 11px no-repeat, url(fundo-tres.jpg) bottom left no-repeat, url(fundo-quatro.jpg) left repeat-y.

@font-face

Podemos definir uma tipografia diferenciada para os textos da página através da importação de um arquivo de fonte: @font-face {font-family: Agni; src: url(‘agni-font.otf’)}. Em seguida aplicamos essa fonte a um elemento de texto: h3 { font-family: Agni, sans-serif}.

O CSS3 ainda não deve ser usado definitivamente em suas páginas. A nova versão da linguagem ainda se encontra em fase de rascunho na W3c, e a maioria dos navegadores não fornece suporte. Porém é essencial que possamos conhecer e testar os novos recursos, descobrir aos poucos o que vem por aí, e nos preparar para o momento em que o CSS3 será lançado como uma recomendação em definitivo.

Vocês podem encontrar mais informações sobre o CSS3 no site http://www.css3.info/.

Esteja preparado :)

Oficina ministrada no dia 30 de janeiro, na área de Design da Campus Party Brasil 2010.

Durante a oficina "Seu desenho vai virar código, e agora?"

Sobre a oficina

Quais dificuldades existem na hora de transformar o seu layout em uma página da Web. O que um designer precisa saber de CSS antes de iniciar o projeto de um layout? Quais os novos recursos o CSS3 nos traz, e quais os ganhos visuais na hora de projetar layouts para essa linguagem.
Nível: Intermediário

Vídeo da Oficina

Slides usados na oficina

Palestra ministrada no dia 28 de janeiro de 2010, na Campus Party Brasil.

Durante a palestra sobre a Semântica do HTML5

Sobre a palestra

Como a Web Semântica (Web 3.0) vem se tornando cada vez mais realidade com a chegada do HTML5; O que essa nova versão da linguagem de marcação tem de diferente das anteriores, e quais vantagens nos trazem; HTML5 na prática: Cases com exemplos de utilização da nova versão.”

Nível: Intermediário/Avançado

Slides da Palestra

Referências:

• A Web 2.0 é uma favela
• Revolução e economia com o HTML5
• Semântica do HTML5 na Campus Party

O que a Web tem a ver com uma favela?

Agni, especialista em Semântica e Web Standards, foi curto e seco dizendo o que a plateia queria ouvir: a Web é uma favela. Mas pode faltar pouco para isso chegar ao fim. A nova versão do HTML5 vai ser liberada este ano e se torna oficialmente uma recomendação para os desenvolvedores em 2012. E já dá hora de ir aprendendo a produzir conteúdo semântico até lá.

Agni condenou a bagunça que são os códigos-fonte atuais, com marcações inseridas sem nenhum significado, desordenadas como uma favela. Um exemplo disso é o uso de marcações com finalidades para as quais elas não foram criadas, como o uso de tabelas para desenhar layouts, ao invés de criar com elas apenas dados tabulares. Outra preocupação é o uso de marcações que tem significado meramente visual, como as tags <i> e <b> que respectivamente exibem o texto em itálico e negrito, ao invés de tags como <em> e <strong> (respectivamente ênfase e ênfase forte), que além de obterem o mesmo efeito visual também trazem relevância e significado ao texto. Seguir esses e outros pequenos princípios, assim como separar as camadas de uma página como conteúdo (HTML), apresentação (CSS) e comportamento (Javascript) em arquivos distintos, já são os primeiros passos para se fazer web semântica, independente da chegada do HTML5.

O grande salto do HTML5 é a evolução semântica que ele traz em suas novas tags, fazendo com que blocos de conteúdo tenham seus significados reconhecidos pelos buscadores e outros sistemas informacionais. Dessa forma marcações como <header> indicarão o cabeçalho de uma página, ou <footer> o rodaṕe.  Versões mais recentes de browsers como o Chrome, Firefox e Safari já conseguem detectar essas novas marcações, e alguns sites já fazem testes com a nova versão da linguagem, como o site do navegador Safari.

E como na Campus Party tudo é meio futurista, Agni falou de suas expectativas para o futuro da web com o HTML5: “Quando as informações na web tiverem significado também para as máquinas, e os computadores entenderem e relacionarem todos os tipos de dados de uma página, desde agendas de compromissos até os nossos gostos pessoais em uma rede social qualquer, isso será a web semântica. Será fantástico poder agendar uma viagem em um calendário online e ter automaticamente passagens reservadas no aeroporto e sugestões de itinerários. Tudo será automatizado quando os computadores começarem a entender o que queremos dizer”.

Edição feita sob a cobertura da Info na minha palestra A semântica do HTML5, na Campus Party 2010.

Olá amiguinhos!

Na última edição do Campus Party Brasil, fiquei encarregado de abrir as atividades na área de Design com a palestra sobre Web Standards.

Após a palestra, e depois de bater papo com muita gente por lá, cheguei a triste conclusão de que muitos profissionais ainda desconhecem as Web Standards, e desenvolvem sites a moda antiga (usando tabelas para diagramar o Layout).

Para contribuir na mudança desse quadro, este artigo é o primeiro de uma série sobre Web Standards ao qual estarei escrevendo. E para ter certeza de que vou ajudar a esclarecer as dúvidas sobre esse assunto, deixo aberto o espaço para a sugestão de temas para os próximos artigos.

Resistência aos padrões, ou amor as tabelas?

Pior do que perceber que ainda hoje muitas pessoas desconhecem as Web Standards e suas vantagens, é perceber que existem pessoas que conhecem, porém resistem a elas, com argumentos (sem fundamentos) de que desenvolver sites com o uso de tabelas para diagramar o Layout é melhor e mais produtivo.

Esses dias andou pipocando pelas listas de discussão um artigo escrito por um tal de Ron Garret, onde ele tenta justificar que o CSS não serve para diagramar Layouts (Why CSS should not be used for layout), e afirmando que o uso de tabelas é melhor para tal finalidade.

Essa forma de pensar mostra que muitas pessoas tem a visão equivocada de considerar o Design como mera produção estética, e desconsideram a concepção de projeto. Como escrevi em outro artigo, além da questão estética, o Design engloba a criação de um produto funcional, usável, eficiente e economicamente viável.

Uma estrutura de informação, como documentos escritos em HTML ou XML, deve conter apenas marcações com devido significado (semântica). Adicionar marcações sem significado em um site pode ser comparado a adicionar diversas páginas em branco a um livro: aumentaria inutilmente o tamanho do mesmo, e não teriam sentido algum para o leitor. É justamente isso que acontece com o uso das tabelas para diagramar o Layout.

Podemos dizer que o HTML não é uma linguagem de marcação verdadeira, pois sua sintaxe preve (limitadas) marcações para formatação. Uma linguagem de marcação deve apenas estruturar a informação (como o XHTML), enquanto a apresentação deve vir de um documento específico (CSS).

A maior dificuldade no uso do CSS para diagramação das páginas vem da incapacidade dos navegadores, não só no suporte a linguagem, como na padronização do efeito renderizado. O IE6 suporta apenas 51% das propriedades do CSS 2.1, o IE7 apenas 56%, o Firefox2 suporta 91%. O IE6, que ainda é o navegador mais usado, também suporta apenas 73% do HTML/XHTML, 50% do DOM e 10% do CSS3. Mais informações sobre essas estatísticas podem ser vistas em http://www.webdevout.net/browser-support).

O CSS não é perfeito, as empresas que desenvolvem os navegadores não colaboram no suporte, e a W3C não é nenhum exemplo de discussões promissoras em prol a padronização. Lembrando que a W3C não se resume apenas aquele tiozinho carismatico de ideais livres que inventou a Web, mas de diversas empresas com interesses não tão nobres (quem chegou a acompanhar discussões sobre o uso dos codec’s Ogg Vorbis e o Ogg Theora como padrão nos navegadores, para o uso da nova tag <video></video> no HTML5, sabe do que eu estou falando).

A vantagem do uso de Padrões Web

Recortar um layout em softwares como o Fireworks, e exportar diretamente para HTML com tabelas pode parecer fácil e rápido. Porém o código gerado torna-se incompreensível, sem uma sequência lógica da informação ou significado, além de ser muito maior que o necessário.

O uso das Web Standards propicia um melhor custo-benefício. As vantagens do uso de padrões e da separação das camadas de Conteúdo (XHTML), apresentação (CSS) e Comportamento (Javascript) são evidentes:

• Com arquivos menores e as camadas de Apresentação (CSS) e Comportamento (Javascript) no cachê do navegador, teremos um carregamento mais rápido das páginas, além de menores custos de hospedagem.
• Com a formatação de todas as páginas baseadas num mesmo arquivo CSS, teremos uma melhor consistência visual, e possibilidades de manutenção e redesign mais baratos e eficientes.
• Com marcações mais semânticas (usadas com seu devido significado) e com as informações do documento estruturadas em uma sequência lógica, teremos melhores resultado nos mecanismos de buscas, além de melhor acessibilidade e Interoperabilidade entre diferentes dispositivos.

Exemplos práticos dessas vantagens:

• A Legal & General, uma das primeiras empresas a aplicar em seu site as “Diretivas para acessibilidade Web” (Web Content Accessibility Guidelines) da W3C, e os resultados foram que as taxas de conversão aumentaram 300%, custos de manutenção cairam 66%, listagem natural nas buscas aumentou 50% e o carregamento das páginas ficou 75% mais rápido (fonte: RevistaW).
• A ESPN, quando migrou seu site para os Padrões, reduziu cerca de 50kb em cada página, economizando 2 Terabytes de banda por dia (fonte: Mike Davidson).

Quanto a beleza dos sites feitos com CSS, é indiscultivel que as possibilidades são enormes, e muito mais eficiêntes que a formatação possibilitada com o uso de tabelas no HTML. Exemplos disso podemos encontrar na galeria CSS Zen Garden ou em sites como o Web Leed Design.

Se as Web Standards ainda não são o ideal, é o que de melhor temos hoje para o desenvolvimento de páginas para a Web.

Linguagens como o CSS tem sempre mil possibilidades. A limitação está no Designer.