Para iniciantes: próximos passos

Agora, assumindo que você já leu “Projetando Websites: A Prática da Simplicidade” e estudou todos os tutoriais e exemplos do HTML Dog. Assumindo que você já leu pelo menos 30% do que está disponível no Web Design From Scratch (cabe dizer que o site foi belissimamente redesenhado desde a última vez que eu o linkei), estas são as próximas coisas que você deve fazer:

Leia "Usabilidade na Web: Projetando Websites com Qualidade" (de Jakob Nielsen e Hoa Loranger) e "Não Me Faça Pensar - Uma Abordagem de Bom Senso à Usabilidade na Web" (de Steve Krug).

Aprenda touch-typing, você colherá os frutos deste esforço muito rapidamente! Há bastante ferramentas disponíveis para ajudar você a aprender em pouco tempo, algumas são até baseadas na web!

Estude estes recursos que vão ajudar você a dominar as técnicas de layout CSS e outros conceitos e tecnologias-chaves para a Web:

• A adorável Introdução ao Currículo dos Padrões Web do Dev.Opera - É um curso completo dos fundamentos que definitivamente é imperdível para os iniciantes.
• All about Floats do CSS TRICKS - Leia-o e você vai "sacar" o assunto num instante.
• Os Layouts de Website do Matthew James Taylor - Estes são ouro puro, estude-os com carinho, desconstrua-os, refaça-os.
• O Reservatório de Layouts do BlueRobot - Estes são um pouco antigos, mas eles são ótimos de qualquer forma, estude-os e sinta-se livre para ignorar as referências a navegadores que não são mais usados.
• O Layout Gala do Alessandro - Também são antigos, não se esqueça de testar nos navegadores mais recentes antes de usar um deles.
• Os Frameworks CSS Blueprint.CSS e 960.gs - Gaste seu tempo estudando-os muito cuidadosamente, mesmo se você não planejar usá-los, já que você pode aprender muito descobrindo como eles funcionam. Postarei uma lista dos melhores Frameworks CSS disponíveis junto com alguns comentários sobre cada um deles, só não sei ainda quando farei isso, então fique de olho!
• O famoso CSS Zen Garden do Dave Shea - Há um bocado que aprender aqui!

Não copie e cole simplesmente das galerias de layouts e dos tutoriais! Estude-os por completo e então tente refazê-los sem olhar o código deles! Tome cuidado com a tentação de ficar usando Frameworks CSS prontos indefinidamente, você nunca será um dos melhores se não se der ao trabalho de atravessar toda a curva de aprendizagem das técnicas de layout com CSS!

Estude estes recursos sobre os fundamentos do design e comece a aprender a usar uma ferramenta de Desenho Vetorial, eu recomendo o Inkscape e os tutoriais on-line são um excelente lugar para começar! O Inkscape está disponível para Mac OS X, Linux e Windows!

Divirta-se com o que você faz! Se você se entediar então provavelmente esta área não é para você, pois estará competindo contra um monte de gente que é bastante entusiástica sobre o que faz.

E não se esqueça de voltar aqui (de preferência, subscreva-se ao meu feed) para descobrir o quê fazer quando tiver completado estes passos!

Fazendo o Template

Projetar o Template deste blog foi uma boa experiência e eu quero compartilhar com vocês alguns dos detalhes do processo que usei.

A primeira coisa que fiz foi um rascunho da aparência final com papel e lápis. Isto é ótimo porque nos dá a liberdade de criar estes rascunhos rápido e de descartá-los ainda mais rápido se eles não saírem como esperávamos ou se, simplesmente, mudamos de ideia no meio do processo. Em seguida, fiz um modelo do design no Inkscape, o qual usei para testar o esquema de cores que escolhi e o tamanho, em geral, das coisas. Então passei para a digitação do código e criação das imagens tomando estes passos:

1. Selecionei o Template do tipo clássico na dashboard do Blogger e baixei uma cópia do template padrão, da qual removi todas as tags do Blogger (tais como BlogItemTitle ) e tudo que estava entre as chaves das regras CSS.
2. Colei o típico conteúdo marcador de posição Lorem Ipsum e links de auto-referência no código para que eu tivesse algo em que aplicar estilo.
3. Então, comecei a escrever as regras CSS e debugá-las ao mesmo tempo em que as criava com o Firebug (ferramenta adorável, diga-se de passagem; pense em obtê-la se você já não a usa).
4. De vez em quando, checava o layout numa pilha de navegadores (incluindo, é claro, o IE do 5.0 ao 7) e certificava-me que o código validava no Validador do W3C.
5. Decidi quais imagens eram necessárias e comecei a trabalhar nelas.
6. Quando eu tinha um protótipo que funcionava e validava ambos XHTML/CSS eu comecei a trocar o conteúdo marcador de posição com as tags do Blogger apropriadas.
7. Como passo final, fiz o upload do meu design de volta ao Blogger e eliminei os últimos poucos bugs que apareceram neste estágio.

Soa fácil, não? Bem, nem tanto assim. Para começar, há o problema da validação do código gerado pelo Blogger. Até o momento onde eu estava fazendo as imagens para este blog, tudo corria bem em relação à validação. Então, assim que inseri as tags do Blogger e fiz o primeiro teste pela URL no Validador do W3C, ele parou de validar. Parece que a maior parte do código que o Blogger insere no template não é padrão. Não há muito que eu possa fazer em relação a isto, então decidi simplesmente conviver com este fato. Há também alguns detalhes que eu prefiro falar a respeito em outro post, porque este já está bem grande.

E agora, o quê?

Estou pensando em usar o que aprendi ao fazer este template para criar templates customizados gratuitos. Então, esperem que eu venha postar um link para o meu novo blog de Templates!