{tecnologia, conceitos, negócios, idéias, práticas, .NET, ruby, osx, ios e algo mais}
19/01/2012
Fala galera, beleza?
Há algum tempo eu tenho parado de ler posts e blogs técnicos. Não por que eu ache que eu já sei tudo sobre muita coisa, justamente pelo contrário.
Eu tenho estudado e lido bastante sobre markup, semântica, HTML, CSS, web performance, layout, cores, tipografia, e coisas relacionadas.
Tenho estudado isso pois entendo que é algo fundamental no nosso dia-a-dia enquanto desenvolvedores de produtos pra web e é algo que eu ainda preciso melhorar muito.
Nesses, sei lá, 5 anos de atividade eu dediquei pouquíssimo tempo a isso. Com sorte e alguma mágica eu consegui aproveitar bastante do pouco que estudei e decidi que chegou o momento de aprofundar, melhorar, e ser mais responsável com estas questões.
DISCLAIMER: se você não trabalha com produtos web, ou possui profissionais que façam toda interface em seus sistemas, ou por algum motivo você só tenha que ser bom em código server side talvez este texto não lhe faça sentido. Ainda assim recomendo que leia.
Criar um bom markup: leve, semântico, agradável de ler e fazer este markup ter uma boa aparência quando renderizado não é uma simples tarefa de designer. É claro que criar um layout é algo difícil para nós, não estamos acostumados com isso e julgamos não ter o talento.
O mais interessante é que quando passamos a estudar e observar o design de sites/produtos com um olhar mais crítico/interessado passamos a ver que nem tudo é tão complexo de ser feito/criado. Não estou dizendo que vamos nos tornar designers (embora isso não seja impossível), estou apenas dizendo que nem tudo é tão complexo quanto imaginamos.
É preciso bastante estudo para conseguir criar coisas boas. Seguem alguns links introdutórios sobre o assunto:
É bem comum vermos ótimos devs que não conhecem nada de CSS e HTML. Acho que isso não é vergonha: temos tanto para estudar que acabamos deixando isso com uma prioridade menor (assim como deixamos outras coisas/linguagens/técnicas com prioridade menor também).
O ponto é que talvez já seja hora de dedicar um pouco mais de tempo para isso. Quantas vezes você já não quis fazer algo bacana em uma página e passou várias horas "hackeando" html e css para tentar (e não conseguiu)? Isso é fruto de desconhecimento e falta de prática.
CSS não é simplesmente uma forma de atribuir cores e tamanho de fonte para elementos. Existe uma série de regras, padrões e detalhes (assim como em uma linguagem de programação) que precisamos conhecer e entender para tirar o melhor proveito (isso sem falar da guerra dos browsers!). E convenhamos que comparado com uma linguagem de programação é bem simples aprender CSS.
Eu diria que 90% do tempo que perdemos com HTML se dá pelo desperdício decorrente da falta de conhecimento em CSS. Então a nossa meta tem que ser transoformar esses 90% em tempo produtivo (abraços aos Leandro Daniel que adora as minhas estatísticas).
Como eu não quero ensinar CSS para ninguém aqui seguem alguns links e sites que tenho visto para me inspirar e estudar:
Final de semana passado eu decidi abrir meu novo blog em diferentes browsers (até então tinha feito tudo no Chrome/Canary). Para minha surpresa tudo funcionou bem no Safari, Opera e Firefox… mas claro que não funcionou no Internet Explorer.
Tentando validar o site no W3C encontrei algumas inconsistências que de fato eram culpa minha: não bastava culpar o IE.
Depois de corrigir os problemas as coisas magicamente passaram a funcionar nos IE 7, 8 e 9. E na real foram coisas bem simples, pequenos detalhes mesmo. É claro que algumas coisas de não funcionam ainda no IE mas isso é detalhe, não quebra o layout (mas é importante saber o que o IE renderiza e o que não renderiza também).
Yahoo - Best Practices for Speeding Up Your Web Site
É normal ver sites por aí com alguns textos em formatos de imagem, ou então utilizando as boas e velhas Verdana e Arial em toda sua composição.
O ponto é que estudar um pouco de tipografia e usar algumas fonts externas não é algo tão ruim. O Google oferece um serviço com ótimas fonts (algumas bem leves) e que podem fazer uma grande diferença na leitura e visualização do seu conteúdo (às vezes uma boa fonte é tudo que você precisa).
Trabalhar com algum espaçamento nos textos é algo que pode fazer diferença também: margens nos headings, altura das linhas nos parágrafos, espaçamento entre as letras. Tudo isso pode fazer uma enorme diferença se bem aplicado e coeso, bem como entender as diferenças entre Serif, Sans-Serif, Monospace, etc. Estes são aspectos muito importantes e deveras negligenciados por uma enorme massa de desenvolvedores web (eu também ignorava isso).
Vale dar uma olhada em alguns materiais sobre o assunto pois isso pode mudar completamente a experiência em seu produto:
Essa não é uma aula sobre web semântica, HTML, CSS, design, nem nada do tipo. É só um breve relato de como eu tenho enxergado as coisas e absorvido essa experiência. Um pouco do que eu tenho lido e estudado.
Acho que a grande dica é começar a acompanhar quem faz coisas boas nesse sentido, entender como elas são feitas, comparar com outras coisas que julgamos boas também. Aproveitar que na web é possível ficar vasculhando o css e html dos sites e usar isso como forma de compreender mais e mais sobre o tema.
É isso galera.
Abraços,
Vinicius Quaiato.