CSS

Registro e submeto às críticas e sugestões meu primeiro experimento com a ferramenta AJAX. Atualmente, sou aluno do módulo AJAX I do curso online da Visie Treinamentos Web.

O experimento tem como objetivo demonstrar algumas funcionalidades dessa ferramenta sem a preocupação de um tratamento rigoroso de alguns procedimentos normalmente exigidos em uma aplicação comercial.

Trata das velhas e conhecidas operações de manutenção de uma tabela de dados – incluir, alterar, excluir e consultar -, bem simples, onde utilizo a técnica de passagem de parâmetros através da URL (“?’ e “&”) para um programa PHP que se encarrega de operacionalizar, do lado do servidor, essas tarefas. É claro que poderia ser adotado outros mecanismos para a passagem de parâmetros.

As respostas do programa PHP são retornadas no formato JSON. Por esta razão os caracteres “[", "]“, ‘ e “,” são eliminados dos campos antes da gravação na tabela.

Pela simplicidade da rotina desenvolvida não vale a pena me alongar em explicitar detalhes. Veja funcionando e dê o seu feedback. Fico na esperança de que tenha alguma utilidade.

Em vista do número de visitas ao VICHE originadas a partir dos dois últimos trabalhos publicados por mim, resolvi disponibilizar aqui seus links de acesso:

1. Blix Theme: publicado no CSS Table Gallery, de Chris Heillman. Experimento destinado a exercitar sua criatividade manipulando uma tabela 100% por CSS;
2. Snowdrop: tema publicado no Gigastyle, de Mark Creeten. Baseado na idéia original do CSS Zen Garden, de Dave Shea. Inspirado no tema Farol publicado no Revolução do CSS e nas cores da bandeira brasileira já que estamos em tempo de Copa do Mundo de Futebol.

Dois artigos de Mike Stenhouse, muito bons, publicados em seu blog Content White Style.

O primeiro aborda uma forma de se trabalhar com CSS modularmente, agrupando estilos com as mesmas características em folhas separadas, visando ganho de produtividade com o seu uso (reutilização) na construção de site. Estabelece e detalha os seguintes componentes (módulos CSS) básicos: Tipografia, Formulários, Layout Principal, Navegação e Cores. Mostra ainda como criar os links de importação das folhas de estilos e ao final coloca alguns cuidados a serem observados na utilização do método. O artigo completo, em inglês, pode ser visto no blog do autor.

O passo seguinte, detalhado no segundo artigo, foi ampliar os conceitos de CSS modular para convertê-lo em um CSS Framework, permitindo o desenvolvimento rápido de sites com os componentes já desenvolvidos e testados. Propõe uma estrutura ideal das div e mostra o código XHTML da página com base nesta estrutura. Entre outras explicações, apresenta seis layouts construídos usando a modularidade das folhas de estilos e o mesmo código XHTML. Veja os layouts funcionando e faça o download de todos os arquivos fontes utilizados.

Outro dia estava a navegar pela imensa teia (poético, não) quando me deparei com o post “Isso está na especificação do CSS, é um bug do IE ou é burrice minha mesmo!?! “, do Gustavo Cardoso. Relembrei, então, que quando estava exercitando CSS com o padrão proposto pelo Revolução do CSS, encontrei uma situação que me pareceu bastante estranha. É o seguinte: os links dos menus funcionavam perfeitamente no Firefox, Netscape e IE, mas não funcionavam no Opera – tenho somente estes instalados no meu micro e, portanto, não sei o comportamento em outros browsers.

Encontrei a solução, assim meio que na tentativa e erro e uma boa dose de bom senso, mas não sei até hoje a razão na “ponta do lápis” e gostaria muito de saber. Quem se habilita?

Detalhando o problema:

No exemplo em que os links funcionam no Opera e nos demais browsers acima mencionados acrescentei o float:right e substitui o position: absolute por relative, na classe navegação como indicado abaixo. Veja aqui um exemplo:

/*……. NAVEGAÇÃO……..*/
.navegacao {
position: relative; /* Para o que não funciona -> position: absolute; */
top:205px;
right:25px;
width: 160px;
float:right; /* Para o que não funciona -> este atributo não existe */
}

O exemplo em que os links não funcionam sómente no Ópera (retirada do float e position: absolute) você pode ver aqui . A mesma situação pode ser observada no tema One Ring – muito bom, por sinal -, do Cláudio Dias publicado no Revolução do CSS.

Em continuidade ao post CSS – Uma Experiência, onde registrei o caminho de minha perigrinação no aprendizado desta técnica, vou apresentar um pequeno histórico dos resultados obtidos por mim. Mais para incentivar os iniciantes e um pouco para chamar a atenção para o projeto Revolução do CSS. Antes que alguém me chame de espilicute, faço a ressalva de que não existe nenhum interesse em me auto promover (sou bem grandinho, tenho 1,87m e uns tantos anos de estrada).

Como já disse no post anterior, onde menciono outros sítios com a mesma finalidade, friso veementemente que se trata de um excelente exercício, pois além do CSS, você se vê às voltas com outras questões: como distribuir as cores para que se obtenha um visual harmonioso, como fazer para criar uma sombra nas margens laterais dos lay-outs, como colocar um degradê de fundo, qual fonte utilizar, e etc, etc, etc. Para um Webdesigner provavelmente tratam-se, em princípio, de questões bastante simples. O que não foi meu caso e não será o de muitos outros que estão iniciando. Mas, você que é webdesigner, deve exercitar seus conhecimentos de CSS em público e colaborar com o Revolução do CSS. Eu fiz isto com a “cara e a coragem” e obtive retornos (o Maurício do Maujor , o Henrique do Revolução , o Diego do Tableless , que o digam) que me ajudaram e incentivaram a continuar.

As questões acima mencionadas me forçaram a pesquisar. Li artigos sobre cores, tutoriais sobre Fireworks e PhotoShop, pesquisei sobre softwares que fornecem esquemas de cores a partir de uma básica (análogas, monocromáticas, complementares, triadic, tetradic), mais sobre CSS, XHTML e por aí a fora. Pelo que já foi dito, percebe-se o porquê da riqueza do uso dos CSS Zen Garden como prática de aprendizagem. É claro que tudo depende de cada um. Os Webdesigners que já possuem o conhecimento das técnicas para a construção de páginas bem elaboradas (no sentido visual, principalmente), eis aqui uma boa oportunidade para aprenderem CSS (para os que não sabem) e exercerem sua criatividade.

Eu, apesar das dificuldades e do tempo gasto (pouco, em função de minhas atividades profissionais) acho que progredi, tanto em conhecimentos como na melhoria da qualidade dos temas desenvolvidos. Claro, não chega a ter nenhuma obra de arte produzida mas dá para perceber o fato (os bons neste negócio façam um esforço e utilizem de uma boa dose de boa vontade) na relação dos temas abaixo indicados, mais ou menos na ordem cronológica de elaboração:

BONITO DE SE VER #0 (Plágio, vocês sabem de onde?)

I. Publicados

1. Iniciante : Publicado pelo Maurício como forma de incentivo e agradecimento aos seus autores (e só por isto, acredito). No entanto, foi extremamente importante para mim o incentivo;
2. Soft : Idem;
3. Cerrado : Reformulado. A versão original era horrível. Esta até que deu uma melhoradinha;
4. Cacau : Camaleón Css;
5. Christ : CSS Zen Garden (não se assustem, foi publicado no espaço do coadjuvante, na categoria two column );
6. Card Index : CSS Zen Garden (idem, na categoria disconnected );
7. G : CSS Zen Garden (ibidem, na categoria disconnected) ;
8. Mulher : Maujor;
9. Card Games : Gigastyle;
10. Sunrise : Gigastyle;
11. Farol : Revolução do CSS.

II. Não Publicados

Para quem está aprendendo recomendo os dois vídeos publicados pelo Diego Eis no tableless:

Video Tutorial #6 – Transformando Layout Fixo em Fluído;

Vídeo Tutorial #7 – Centralizando o Layout Horizontalmente.

Após as explicações dadas pode-se verificar que não tem “bicho de sete cabeças”. Mas no início a gente sofre para descobrir estas técnicas. Portanto vejam.

O Maurício Samy Silva, do Maujor, publicou recentemente dois excelentes artigos:

• Seletores CSS 2.1 – Parte 1 a 3
• Desenhando com CSS

Dêem uma olhada, vale a pena.

Deparei-me de forma mais efetiva com o CSS quando resolvi aprender PHP e MySQL. Adquiri alguns livros sobre esses assuntos e danei-me a ler, ler, ler (teoria pura). Era necessário praticar e fixar os conceitos obtidos e, então, parti para o desenvolvimento de um aplicativo Web para a Unimed Brasília (isto tudo em casa e gratuitamente).

Por se tratar de um aplicativo, cheio de formulários (entradas) e dados tabulares (saídas), o uso de folha de estilo, neste momento, se restringiu à utilização de alguns seletores (tags HTML, classes, id´s) e propriedades (font, background-color, text-align, text-transform, padding, …) visando apenas dar uma aparência melhor àqueles elementos.

Já utilizava o conceito de CSS externo “misturado” com o CSS inline. Não havia uma clara separação entre a forma e o conteúdo. Além do mais, utilizava-me do DreamWeaver para construir os formulários dentro de tabelas formatando os lay-outs de entrada e saída do aplicativo (está assim até hoje, quem sabe crio coragem um dia para alterá-lo).

Como todo mundo é sabedor não se consegue construir nada na primeira “tacada”. Tem aquelas famosas idas e vindas. Trocar uma corzinha aqui, um posicionamento ali, e por aí vai. Foi, quando então senti na pele a dificuldade de efetuar estas pequenas alterações. Não pelo CSS mas pela forma como o aplicativo estava sendo construído. E saquei, este negócio de CSS vai me auxiliar bastante, evitando um trabalho imenso para se ajustar pequenos detalhes.

Passei, então, a pesquisar a literatura existente sobre o assunto no Submarino e sites de livrarias. Tristeza total, face a “pobreza” de bons livros sobre o assunto publicados no Brasil. No entanto consegui ter, via Web, acesso a um farto material. Primeiro, no imasters, onde descobri seu articulista Maurício Samy Silva e seu site Maujor que tem excelentes tutoriais sobre CSS. Para não me alongar, a minha andança por esta seara está indicada, em parte, nos links da página inicial. Dêem uma espiadela pode ser útil também para você.

Com o conhecimento adquirido, mantendo o formato em tabelas como já frisado, fiz uma revisão dos estilos (poucos) utilizados e coloquei-os em um folha externa. O ganho na produtividade foi tremenda mesmo com as limitações mencionadas. Trocar uma cor, mudar um estilo de um botão, de um campo do formulário, entre outras coisas, passou a ser uma tarefa simples. Além do que, possibilitou manter um padrão único para todo o aplicativo de forma bem tranquila. É uma maravilha, acreditem.

Não satisfeito, pois o aprendido na prática representava muito pouco para mim, voltei às pesquisas e estudos. Foi aí que me deparei com o CSS Zen Garden do Maujor. Para quem não sabe, trata-se de um ótimo exercício de CSS, onde a partir de um código fixo HTML (intocável) você constroi um novo layout somente utilizando a folha de estilo. Para um aprendiz é uma ótima maneira de apanhar, …, aprender, …, apanhar, e aprender.

Recomendo fortemente o seu uso, mesmo que você não seja Web Designer (como eu), pois permitem fixar conceitos, observar o comportamento das propriedades dentro de um dado seletor e das páginas nos diversos browser’s existentes no mercado (aqui é dureza tratar as diferenças – principalmente os famosos hacks), entre outras coisitas mais. Brinque a vontade com os posicionamentos dos blocos de conteúdo e todas as demais propriedades pois, com toda certeza você estará se aprimorando, independente de ser publicado ou não. É grátis e não machuca ninguém. Portanto use e abuse.

Outros sites do tipo inspirados no criador da idéia, o CSS Zen Garden de Dave Shea: Revolução do CSS de Henrique Costa Pereira e o Gigastyle de Mark Creeten. Visite-os e veja os temas publicados. Mesmo que você não os utilize para seus exercícios você encontra uma gama muito grande de estilos prontos para você analisá-los e estudá-los, e consequentemente aprender e/ou aprimorar seus conhecimentos de CSS.

Fico por aqui na esperança de que o texto escrito sirva para pelo menos um “cristão” tirar proveito. Em sendo assim dou-me por completamente satisfeito.
VICHE!