CSS Zen Garden
Postado por: Pedro Rogério emJá ensinei CSS para vários desenvolvedores, e a primeira coisa que procuro mostrar a eles é a capacidade que o CSS, juntamente com um HTML bem feitos, proporcionam uma maneira separar totalmente o conteúdo da formatação. A primeira coisa que procuro mostrar a eles antes de qualquer coisa é o CSS Zen Garden, um projeto criado por Dave Shea, onde você pode ver todo o porder do CSS.
Lá você pode ver o que pode ser conseguido visualmente por meio de um design baseado em CSS. Ou seja, o HTML da página será sempre o mesmo, são trocadas somente as folhas de estilo do site, desenvolvida pelos próprios usuários do site. Se você quer desenvolver um trabalho, basta estar efetuando o download do HTML, e da folha de estilos. A única coisa que você irá alterar alí é o CSS, onde você irá aplicar seu layout.
Abaixo você pode ver o layout original do Zen Garden:
Agora, veja algumas variações produzidas pelos usuários, como podem ver o HTML é o mesmo, a única coisa que muda é o arquivo CSS:
Veja aqui a galeria completa com os designs. Aqui no Brasil você pode encontrar uma espécie de variação do Zen Garden, desenvolvida por Henrique Costa Pereira, o Revolução do CSS. O funcionamento é o mesmo do Zen Garden, onde você baixa o HTML e CSS de exemplo e altera o CSS com o seu design.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Eu já conhecia o projeto. É realmente mto bacana ver o tanto que o CSS é fodástico!
Eu queria criar uma maneira de ‘obrigar’ os desenvolvedores/designers a criar o HTML e o CSS mais perfeitos possiveis. Estava pensando em algo relacionado a criar, obrigatoriamente, a marcação e, finalizada esta etapa ai sim montar o estilo, tentando mexer o mínimo possível no HTML.
Ly -> HTML -> CSS
Será que isso dá certo? Eu tô querendo testar em algum projeto freela. Vcs já pensaram em algo deste tipo?
@Pedro devo muito a esse garoto ai rs vlw pela força e tudo q apreendi e aprendo ate hj contigo =D
Mais uma vez parabéns Abraços!
@Bruno Augusto
Uma das coisas q apreendi com o Pedro é e eu tb já achava isto é a criação do HTML primeiro e depois o css o tempo é bem menor do que criar os dois juntos ao msm tempo, criando o HTML todo e depois o css!
@Bruno Augusto,
Isso é um padrão que todos deveriam seguir, ou seja, com o Layout em mãos, você prepara o HTML, ele já estando pronto, você começa a fazer o CSS, a vantagem é que fazendo dessa forma você vai utilizar menos CSS, pode ter certeza disso, pois vai utilizar mais herança, e a equipe de programadores pode já ir trabalhando encima do HTML também, pois o mesmo já está pronto. Se você precisar mexer no HTML é só avisar a equipe onde efetuar a alteração. Abraços.
@Pedro @Celso,
Vcs já utilizam essa metodologia? Realmente conseguiram eficácia?
Com relação aos desenvolvedores/designers menos experientes que ainda não têm a malícia de identificar que tal elemento na marcação vai receber tal estilo. Como fica? Será que este cara vai conseguir evoluir seu raciocínio para este tipo de prática ou ele deve começar desenvolvendo xHTML e CSS juntos?
Ando pensando nisso, tentando encontrar a melhor forma de fazer esta prática acontecer…
Olha, eu quando comecei a desenvolver, fazia ao mesmo tempo o HTML e CSS, depois descobri essa forma de desenvolver e não abandono mais, os benefícios são enormes. Para quem está começando é meio difícil trabalhar assim, falo por experiência prórpia, mas a partir do momento que você adiquire prática, desenvolver dessa forma é a melhor possível.
Não se esqueça do CSS Zen Garden do Maujor: http://www.maujor.com/temas/index.php
Muito inspiradores…
@Bruno Augusto
Como o Pedro Rogério mesmo citou inicialmente pode ser meio confuso e complicado, mas no meu modo de ver acho muito melhor começar assim do que depois se adaptar a ela mas isso vai de gosto e cada desenvolvedores!
Abraços
Já conhecia. CSS realmente é fantástico, este site é mais uma prova de seu poder e eficiência.
Shared! Vamos catequizar os infiéis! \o/