Revolução do CSS

Introdução.

Revolução é uma alteração radical do status quo. Revoluções foram feitas por diversas razões, em diversas épocas e representando diversos interesses. Revoluções alteraram regimes políticos, economia, comportamento, métodos científicos, liturgia e conceitos religiosos, sentimentos, fronteiras geográficas , etc. Revoluções são oportunidades de reflexão e alteração das nossas atitudes e de rever conceitos, posturas, opiniões, cultura, decisões, caminhos e planos.

Costuma-se pensar em revolução apenas em um macrocosmo, que afeta milhares de vidas em uma nação ou continente. Uma revolução pode começar pela sua postura profissional, em prezar pela qualidade daquilo que é publicado na web. Esta página foi criada para estimular e encorajar todos os desenvolvedores e webdesigners a levantarem a bandeira dos padrões web, na Revolução do CSS! Dramaticidade à parte, esta é uma oportunidade de aprender e de ensinar o que você sabe de CSS, compartilhando seu trabalho neste espaço.

Inspiração.

Como possivelmente centenas de outros sites espalhados pelo mundo foram inspirados no CSS Zen Garden de Dave Shea também me inspirei nele para fazer o Revolução do CSS. Pensando que poderia contribuir e estimular a utilização dos padrões da web no Brasil, resolvi escrever o código desta página de modo que pudesse utilizar o maior número de tags possível, instigando a curiosidade daqueles que querem o desafio de desenvolver um design para esta página utilizando apenas CSS.

Como faço para publicar meu trabalho?

Para publicar seu trabalho, seria bom que você fosse webdesigner. Não devo ser rígido com o material que receber, mas não se entristeça se eu não publicar seu trabalho. Procure ser criativo com o CSS o máximo que puder e não altere nada do XHTML 1.0 Strict .

Sua folha de estilos deve ser 100% validada pela W3C. Não me envie nenhuma trabalho com erros, inacabado ou ainda no layout. Valide sua folha de estilos antes de submeter seu trabalho. Para desenvolver sua própria versão da Revolução do CSS, baixe o arquivo de XHTML aqui, se quiser baixar meu CSS principal para estudo clique aqui, e após a conclusão do seu trabalho, coloque-o em um servidor e me envie a URL por e-mail. Se quiser um CSS com todas as classes já digitadas para te poupar trabalho extra, você pode baixar esta sugestão de CSS sem nenhum atributo. Nunca envie seu trabalho por e-mail, mesmo que esteja compactado.

Após avaliação, vou solicitar que você me envie seu trabalho compactado para publicação. Todas as folhas de estilos dentro da pasta com o nome do tema, devem ter o nome de "estilos.css". Quero ter o mínimo de trabalho possível na hora de publicar seu trabalho. Imagens e arquivo de CSS devem ser salvos em uma pasta com o nome do tema do seu design, com exceção do XHTML que deve estar de fora desta pasta. Devo gastar algum tempo para avaliar e publicar os trabalhos. Se você me enviar um e-mail e eu demorar um pouco para responder não se entristeça. Eu posso demorar mas respondo todos os meus e-mails.

Aqui vai uma revisão das regras:

  1. Você não pode alterar nada do XHTML.
  2. Sua folha de estilos deve ser 100% validada pela W3C.
  3. Não serão aceitos trabalhos que utilizem algum tipo de imagem que possa ser ofensivo.
  4. Você não pode alterar o conteúdo textual desta página por qualquer outro utilizando técnicas de "image replacement". Pode utilizar o quanto de imagem você conseguir, mas certifique-se de que o texto transposto se encontra na imagem.
  5. Para criar sua versão do Revolução do CSS, dê o nome de sua folha de estilos de "estilos.css" e salve-a junto com as imagens que utilizar em uma pasta com o nome do tema do seu layout. Não use acentos!
  6. Para submeter seu trabalho, coloque-o em um servidor de sua escolha e me envie apenas a URL por e-mail.

Seja criativo com a aparência das tags.

Utilizei várias tags para ampliar o trabalho e o desafio na hora de criar um layout. Nunca deixe de criar um estilo específico para cada tag, por isso será de grande importância para avaliar seu trabalho. Se você não sabe a função de alguma tag, me escreva para sugerir um post. No meu site tenho procurado postar artigos de dúvidas enviados por e-mail. Várias coisas podem ser encontradas na web em português como o Tableless do Diego Eis. Estude, pesquise e crie seu trabalho. Procurarei ser o mais atencioso quanto o tempo me permitir. Você pode utilizar minha folha de estilos para estudar, mas não pode copiá-la tecnicamente.

Mais Importante do que saber, é saber onde encontrar. Albert Eisntein

Essa frase diz tudo sobre como começar um trabalho. Talvez você não tem conhecimento sobre todas as tags usadas aqui, mas saber onde encontrar uma solução nesta hora pode ser muito importante.

Utilizei diversas tags pouco comuns como <code>, <cite>, <caption> e outras. Explore essas tags o quanto puder. No XHTML, inseri as seguintes divs:

<div class="background1">
<div class="background2">
<div class="absoluto1">
<div class="absoluto2">
<div class="absoluto3">

Elas foram inseridas para que você possa usá-las para inserir backgrounds e imagens com pocisionamento absoluto. Aproveite-as.

Sobre as validações e recursos desta página.

O código desta página foi escrito em XHTML 1.0 Strict. Validei este documento de acordo com as diretrizes da W3C especificadas através do Web Content Accessibility Guidelines (WCAG - Normas de Acessibilidade de Conteúdo para Internet) validados no mecanismo Cynthia Says nas modalidades Section 508 e WCAG 1,2,3 , bem como o XHTML e o CSS. Submeti este trabalho também ao validador de acessibilidade brasileiro, Da Silva, produzido pela Acessibilidade Brasil.

Para a navegação, eu utilizei o recurso de Access Keys (Tecla de Acesso) suportado por alguns browsers como o Mozilla Firefox, que permite saltar para links específicos do site através dessas teclas previamente especificadas. No Windows você pode apertar ALT + TECLA DE ACESSO e para o Macintosh a combinação é CONTROL + TECLA DE ACESSO.

A relação das teclas são:

  • A = Visite o Revolução Etc
  • B = Sobre o autor
  • C = Design Principal
  • D = Baixar o XHTML
  • E = Baixar o CSS principal
  • F = Baixar Sugestão de CSS
  • G = Campo Nome no formulário
  • H = Campo E-mail no formulário
  • I = Campo URL no formulário
  • J = Campo Tema no formulário
  • K = Campo Comentário no formulário
  • L = Botão Enviar no formulário

Esta postura está vinculada aos recursos utilizados nesta página está relacionada com as seguintes definições:

Semântica:
Escrever um código semanticamente correto é utilizar as tags no contexto pelo qual foram criadas.
Acessibilidade:
O termo "acessibilidade" tem sido muito discutido e citado nos blogs e na web de um modo geral, mas muitos pensam que acessibilidade é igual à inclusão digital . O problema da Inclusão Digital é outra preocupação nacional e está mais relacionado a barreiras econômicas e sociais do que físicas. Acessibilidade representa não só o direito do usuário de acessar a internet, mas também a eliminação de barreiras arquitetônicas, barreiras de disponibilidade do acesso físico a equipamentos e programas adequados para a apresentação da informação em formatos alternativos. Certas técnicas utilizadas aqui foram inseridas para suprimir estas barreiras, e permitir o acesso a outros dispositivos de acesso utilizado por portadores de necessidades especiais.
Submeta seu trabalho:

Licença e Direitos Autorais.

Criei esta página com uma licença da Creative Commons e consequentemente todo o seu trabalho também estará sujeito à mesma licença, inclusive sua folha de estilos. Esta licença diz que você pode copiar, distribuir, exibir e executar esta obra e criar outras obras derivadas desta desde que não seja com fins comerciais e desde que compartilhe da mesma licença. Para cada novo uso ou distribuição, você deve deixar claro para outros os termos da licença desta obra. Você deve sempre dar crédito ao autor original da obra de forma clara.

Validações

Entre em contato com Henrique Costa Pereira - revolucaoetc@yahoo.com.br