Google+
Google+
Facebook
Facebook
Linkedin
Linkedin
Twitter
Twitter
SlideShare
SlideShare
Homepage
Homepage

domingo, 31 de outubro de 2010

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 */

sexta-feira, 29 de outubro de 2010

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/

quarta-feira, 13 de outubro de 2010

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.