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

Na minha infância, uma das minhas maiores diversões eram as revistas para colorir do He-man. Eram vendidas em bancas de jornais, e quando meu pai chegava do trabalho com uma dessas revistas debaixo do braço, eu já corria com meus lápis-de-cor e parava tudo que eu estivesse fazendo para ficar colorindo por horas! Também tinha entre meus brinquedos vários bonecos do He-man, Esqueleto e companhia.

Sabendo disso, é fácil de entender a minha empolgação ao ver a exposição Under The Influence: Masters of the Universe Tribute Art Show na Galeria 1988, onde vários artistas mostraram suas versões para um dos meus desenhos animados preferidos. Acessando esse link, vocês podem ver diversos trabalhos da exposição.

Dica do blog Desculpe a Poeira.

Ilustração de Fred Harper: "And The Feud Begins"

Será que o Google vai revolucionar também a publicidade online?

Em janeiro, uma matéria do Meio & Mensagem mostrou declarações de Eric Schimidt, CEO do Google, sobre os planos da empresa, que envolvem maior receita com banners e com publicidade mobile. Ao ler a reportagem, vi que o banner está longe de morrer como formato publicitário na Web. Aliás, o banner deve ganhar mais atenção do que eu gostaria que tivesse! Não que eu ache que eles não funcionem, apenas considero esse formato obsoleto; acredito que outros formatos deveriam ser explorados com mais atenção.

Eric Schmidt disse que o próximo grande negócio do Google é o banner. “O que precisamos ver é o quão bem sucedido o Google pode ser nisso”. Essa afirmação me faz imaginar que o Google não pretende meramente investir nos formatos de banners que conhecemos hoje. Ao menos eu espero um pouco mais do gigante das buscas. O histórico revolucionário do Google é o motivo dessa minha expectativa de que algo novo está por vir.

O banner não é um formato nativo do meio digital, ele migrou da mídia impressa para o meio digital. E novos paradigmas para essas peças se fazem necessários. A forma que as pessoas trabalham com banners, na maioria dos casos, é intrusiva, seja por não ter relação com o assunto da página, por ele se sobrepor ao conteúdo ou até por preencher mais espaço que o que realmente interessa ao leitor/usuário.

Não vi, até agora, uma preocupação real com a aplicação do formato, nem um aproveitamento de todo potencial que uma readequação desse tipo de publicidade poderia proporcionar. Explorar nos banners as possibilidades que o meio digital oferece vai muito além de simplesmente animá-los.

O banner ainda é o formato preferido da maioria dos investidores em publicidade online, mas a sua forma atual é obsoleta. A inovação que falta no banner é no sentido de fazer com que ele proporcione formas de interatividade com os usuários, algo que cause imersão ao invés de cegueira, assim como outros formatos que vão de advergames até publicidade em vídeos.

O banner não vai morrer, mas precisa ser reinventado. Com a influência que o Google tem hoje na Publicidade, ninguém melhor que ele para tomar uma iniciativa nessa direção!

Venho reproduzir aqui um e-mail recebido da Fernanda G Weiden, e dar meu apoio a essa campanha. Participem!

Você conseguirá ler seus documentos daqui há 20 anos? Todos os dias, milhares de usuários de computador como você editam textos, planilhas, tiram fotos e gravam vídeos. Imagine se você não mais conseguisse abrir suas cartas pessoais, ou abrir aquele album de fotos de sua lua de mel? E se você não conseguisse trocar esses arquivos com seus amigos porque o aplicativo usado por cada um de vocês não consegue se comunicar com o outro? Para ajudar você a ter documentos duradouros, nós celebramos o Dia da Liberdade dos Documentos, no dia 31 de março.

Qualquer pessoa pode salvar documentos em Open Document Formats, que são baseados em padrões abertos, e ter certeza que qualquer pessoa poderá ler esses arquivos, independente do aplicativo que elas usem.

Qualquer pessoa pode criar aplicativos que lêem e salvam documentos nesses formatos. A Internet foi construída baseada em padrões abertos, e este é um dos motivos pelos quais há tanta inovação online.

No Dia da Liberdade dos Documentos, nós organizaremos atividades no mundo inteiro com ajuda de nossas organizações parceiras e voluntários popularizar Open Document Formats e padrões abertos.

Durante todo o mês de março, vamos divulgar informação sobre Open Document Formats e padrões abertos. Vamos publicar artigos, conversar com a imprensa, com amigos, e espalhar o logo da campanha por toda a Internet.

Existem várias maneiras de participar da campanha, então escolha uma e junte-se a nós:

• Coloque um banner na sua página, com link para o site da campanha.
• Você pode encontrar banners na Página de artes gráficas[0].
• Publique algo o seu blog sobre a campanha ou sobre padrões abertos, e ajude a divulgar a campanha. Envie-nos um link, e adicionaremos na nossa página.
• Use seu microblog para divulgar artigos e notícias sobre a campanha! Use as tags !dfd e #dfd2010
• Organize alguma atividade, no dia 31 de março, em sua cidade. Para idéias em tipos de atividades, visite a página da campanha.
• Faça uma doação[2]. Sua contribuição torna o Dia da Liberdade dos Documentos possível!
• Torne-se uma organização parceira. Contate nossa Equipe Organizadora[3] para obter mais informação.

Quer aprender mais sobre padrões abertos? Acesse: http://documentfreedom.org/Open_Standards

O Dia da Liberdade dos Documentos serve para ajudá-lo a ser dono dos seus dados. Você não deve estar amarrado a um aplicativo em particular para poder viver no mundo digital, e você também não deve estar preso a nenhum aplicativo para poder interagir com o seu governo, escola, ou quem quer que seja.

Para mais informações sobre o Dia da Liberdade dos Documentos, visite nossa página: http://www.documentfreedom.org

[0] http://documentfreedom.org/Artwork
[1] http://documentfreedom.org
[2] http://documentfreedom.org/Support
[3] http://documentfreedom.org/About#Coordination_Team

Contato
Fernanda Weiden
Coordenadora da Campanha Dia da Liberdade dos Documentos
Email: weiden -at- fsfeurope.org
Tel:   +41 76 4021866

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

Aconteceu hoje na área de Criatividade da Campus Party uma palestra sobre Publicidade Intrusiva com Agni, diretor de arte online. O foco da apresentação foram os exemplos de alternativas para se evitar a publicidade intrusiva na internet.

De acordo com Agni, a maior parte da publicidade na web é intrusiva. Boa parte ainda é feita como na mídia offline, não explorando os diversos recursos interativos possibilitados pelo meio, ignorando a interação e colaboração do usuário, e não agregando nenhum conteúdo ao produto ou marca.

O banner, que migrou diretamente da mídia offline, é a forma publicitária mais utilizada na web, e pode ser encontrado na forma “in page” (posicionado junto ou ao lado do conteúdo) ou “over the page” (posicionado sobre o conteúdo do site, evolução do estilo pop-up por abrir sem a solicitação do usuário). Em ambos os casos, normalmente não ocorre interação.

Mas com a internet crescendo mais e mais a cada dia, e roubando cada vez mais a audiência de outras mídias, a interatividade e o uso de novas formas de publicidade tornam-se essenciais para o sucesso de uma campanha publicitária. Com exemplos bacanas, Agni ilustrou diversas alternativas para melhorar ou explorar a exposição de uma marca na internet. Como o banner interativo da Apple com a campanha “Get a Mac”:

E como o banner não é o melhor meio da marca se relacionar com o público, não causando imersão e nem possibilitando muita interação, outras possibilidades deveriam ser mais exploradas, como:

• SEO;
• SEM;
• E-mail Marketing;
• Mobile Marketing;
• Redes Sociais;
• Advergames;
• Campanhas em Vídeo.

Como exemplo de advergame, Agni citou a campanha Axe Music Stars, que disponibiliza um campeonato online baseado numa história criada exclusivamente para o projeto.

Já as campanhas com vídeo, foram consideradas pelo palestrante como as mais fortes e inovadoras. Ele afirmou que o portal de vídeos TV Moob foi o primeiro a disponibilizar publicidade durante a exibição dos vídeos, antes mesmo do YouTube adotar esse processo.

Citou também os formatos virais como uma outra possibilidade de publicidade online, como na campanha britânica da T-Mobile.

Agni apontou um tendência aos vídeos criados exclusivamente para a internet, como na campanha “Whopper Virgins” da Burger King, onde eles registram a experiência de algumas pessoas ao comerem um hambúrger pela primeira vez na vida:

As redes sociais foram consideradas um importante canal de contato direto com o público. Representar uma marca através de um perfil em uma rede social pode trazer grandes benefícios para as empresas, evitando que os consumidores sejam impactados apenas pelas opiniões de outras pessoas, e mantendo uma relação mais próxima e direta com os mesmos. As marcas precisam se preocupar com a imagem que têm dentro da web.

Ele encerrou a apresentação apontando os maiores erros da publicidade online:

• Popup’s;
• Banners over the page;
• Redirecionamentos com Publicidade (exibir publicidade antes de direcionar o usuário à página de destino);
• Publicidade sem relação com conteúdo do site onde está sendo publicada;
• Sites que trabalham mais publicidade que conteúdo.

Para Agni, a melhor receita para monetizar um site acima de tudo é cuidar da qualidade do seu conteúdo. Bons conteúdos atraem e fidelizam usuários, tendo como consequência o interesse dos anunciantes.

Edição feita sob a cobertura da TV Cultura na Campus Party 2010.