Geradores de Conteúdo CSS

Fiquei fascinado com as propriedades geradoras de conteúdo do CSS. Visto que as folhas de estilo são essencialmente responsáveis por adicionar estilo a documentos escritos em uma linguagem de marcação, geradores de conteúdo é o que mais se assemelha à uma experiência de programação.
Utilizadas em conjunto com pseudo-elementos, essas propriedades permitem adiconar informações antes ou depois da apresentação de elementos. Se você não sabe o que são pseudo-elementos dê uma olhadinha antes no tópico Pseudo-Elementos CSS.

Content
A propriedade content é utilizada para a geração de conteúdo no momento da renderização. Os possíveis valores para content são:
inherit - herda o valor atribuido ao elemento-pai;
[string] - define uma string a ser incluída no documento;
[url] - define uma URL de um documento que será incluído;
counter([nome-contador]) - define um contador cujo valor será inserido no documento;
open/close-quote - insere aspas.

Se para o mesmo elemento for usado o valor open-quote para a propriedade content, tanto antes quanto após o elemento selecionado, irá aparecer primeiro aspas duplas e a seguir aspas simples. Além disso o close-quote só tem efeito se o valor open-quote já tiver sido atribuído antes.

Counter-increment
Usado para a numeração de sessões, é utilizada em conjuto com a propriedade counter. Os possíveis valores para counter-increment:
inherit - herda o valor atribuido ao elemento-pai;
none - não incrementa;
[contador] - nome do contador que será incrementado;
[número] - define quanto se deverá incrementar.

Counter-reset
Deve ser usado em conjunto com a propriedade counter e serve para zerar o contador. Os possíveis valores para counter-reset:
inherit - herda o valor atribuido ao elemento-pai;
none - não zera;
[contador] - nome do contador que será zerado;

Pronto, agora para testar estas três propriedades vamos escrever um documento HTML contendo vários parágrafos:

<p>Parágrafo</p>
<p>Parágrafo</p>
<p>Parágrafo</p>
<p>Parágrafo</p>

A seguir definimos as seguintes regras na filha de estilos deste documento:

body{counter-reset: cont;}
p:before{
counter-increment:cont 1;
content:counter(cont) " - ";
}
/* Primeiro o contador "cont" é zerado na sessão body. A cada parágrafo é incrementado com uma unidade o contador "cont" e esse valor é adicionado no início de cada parágrafo com a propriedade content. */

O resultado:

1 - Parágrafo
2 - Parágrafo
3 - Parágrafo
4 - Parágrafo

Ainda existe a propriedade quotes que define que tipo de aspas o documento utilizará.

Pseudo-Elementos CSS

Eu falei anteriormente de Pseudo-Classes CSS (se você não viu clique aqui), agora veremos os Pseudo-Elementos. Os pseudo-elementos permitem que elementos lógicos sejam definidos sem estarem necessariamente declarados na árvore de elementos do documento. A única limitação no uso de pseudo-elementos é no tocante a sua declaração em style-sheets locais.

São eles:

Before - Usado com a propriedade content para adicionar conteúdo antes de um elemento:

[elemento]:before { [bloco-de-declarações] }

Ex: a:before { content: "Teste"; }
/* Adiciona a strig "Teste" antes das ocorrências do elemento a */

After - Usado com a propriedade content para adicionar conteúdo após um elemento:

[elemento]:after { [bloco-de-declarações] }

Ex: a:after { content: "Teste"; }
/* Adiciona a strig "Teste" depois das ocorrências do elemento a */

First-letter - Permite aplicar propriedades ao primeiro caractere do texto de um elemento:

[elemento]:first-letter { [bloco-de-declarações] }

Ex: p:first-letter { font-weight:bold; }
/* Coloca a primeira letra de todo parágrafo em negrito */

First-line - Permite aplicar propriedades aos caracteres da primeira linha do texto de um elemento:

[elemento]:first-line { [bloco-de-declarações] }

Ex: p:first-line { font-weight:bold; }
/* Coloca a primeira linha de todo parágrafo em negrito */

Blog do Talisson

Um período muito bom foi o que passei trabalhando com desenvolvimento web na Imagine Mais. A empresa não chegou a se consolidar, mas o conhecimento prático que obtive em três meses foi bem maior do que tive em dois anos na universidade, ao menos no tocante a programação web. Tive que aprender algumas tecnologias rapidamente para acompanhar o ritmo da equipe e nesse período recebi muita ajuda de Talisson, um cara super gente boa que teve muita paciência comigo.
Recentemente descobri que ele tem um blog onde se propõe a escrever, entre outras coisas, sobre tecnologia. Está começando, mas já gostei muito dos primeiros textos. Dêem uma olhada, vale a pena conferir. http://talissonfagundes.blogspot.com/

Utilizando o jQuery

Algumas pessoas me perguntaram como começar a mecher com jQuery. Bem, para começar é necessário primeiro ir ao site http://jquery.com/ e fazer o download do arquivo contendo o código javascript. Para isso é só clicar no botão do lado direito

O arquivo se chama "jquery-1.4.2.min.js". Esse arquivo deve ser ligado ao documento através de uma tag link no head da página html,assim:

<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>

Pronto. Agora é só usar. Como eu disse no tópico anterior, o site jquery.com tem uma documentação que você pode usar para fazer os testes e aprender a usar essa biblioteca. Você pode começar pelos seletores e depois passar para os atributos, manipulação, CSS, eventos, efeitos e assim por diante.

Bons estudos.

Aprendendo jQuery

Quem quiser aprender a utilizar jQuery eu sugiro o site oficial: http://jquery.com/

Lá você encontra a documentação e várias demonstrações.

Não há melhor forma (e nem sei se há outra forma) de aprender uma tecnologia senão pesquisando e treinando. Uma boa alternativa é pensar em um projeto e implementá-lo usando a linguagem (ou nesse caso o framework) para fixar os conhecimentos.

Outro site interessante e que funciona como um guia para consultas rápidas é o http://remysharp.com/visual-jquery/

Depois de aprender a trabalhar com o jQuery você pode experimentar o jQuery UI que é uma ferramenta com várias soluções já implementadas em jQuery.

Em relação ao javascript, se o jQuery lhe oferece um maior nível de abstração o jQuery UI lhe distancia mais ainda daqueles códigos complicados. Em outras palavras já vem tudo pronto. Isso facilita e acelera o desenvolvimento web. A documentação do UI está no mesmo site (jquery.com).

Fica a dica.

Pseudo-Classes CSS

Pseudo-Classes são utilizadas para empregar estilo a elementos em determinadas circunstâncias indicando um estado, por exemplo quando move-se o mouse sobre o elemento.

As pseudo-classes mais conhecidas são :link, :visited, :active e :hover, mas ainda existem a :focus, a :first-child e a :lang.

:link define o estilo para links que ainda não foram visitados pelo usuário:

a:link { color: #000; } /* define a cor preta para links que ainda não foram visitados */

:visited define estilo para links já visitados pelo usuário:

a:visited { color: #00F; } /* define a cor azul para links já visitados */

:active define estilo para um elemento quando este for ativado, por exemplo quando é clicado:

a:active { color: #F00; } /* define cor vermelha para o link durante o clique */

:hover define estilo para um elemento quando o move-se o mouse sobre ele:

a:hover { color: #0F0; } /* define cor verde para link quando o ponteiro do mouse está sobre ele */

:first-child define estilo para um elemento quando este for o primeiro de seu elemento pai:

a:first-child { color: #CCC; } /* define cor cinza para o primeiro link encontrado em algum outro elemento */

:focus define estilo para elemento quando este possuir foco no documento:

input:focus { background-color: #CCC; } /* define cor de fundo cinza para o input em foco */

:lang define estilo para elemento que possui o valor selecionado para o atributo lang:

span:lang(en) { font-weight: bold; } /* define o elemento span que possui o atributo lang com o valor "en" como negrito */

Não deve haver espaço entre os dois pontos e o restante do nome da pseudo-classe:

ERRADO - a: hover { ... }

CERTO - a:hover { ... }

Apesar de usarmos :hover para o elemento link ele não é restrito a esse elemento. Por exemplo, no exemplo abaixo ele é usado para as linhas de uma tabela:

tr:hover { color: #069; } /* define uma cor azul para a linha de uma tabela quando o ponteiro do mouse passar sobre*/

De volta!!

Passei um tempão sem escrever nada, mas agora tô de volta. A ideia inicial era escrever mais sobre mim, sobre o que faço e sobre tecnologia, mas o tempo é meio curto e às vezes não dá para se fazer o que gosta ^^.

Mas para tirar as teias do blog toma aí o link da minha última criação, o site da X SINFORM:
http://cacicuesc.com.br/sinform2010/