links que eu nao posso perder!

http://www.ibm.com/developerworks/java/library/j-jdic/
http://fractalbrain.net/
http://leonardobg.com.br/2011/03/16/desafio-selenium-by-elias-solucao-passo-a-passo/
http://javadesktop.org/articles/JDNC2/index.html
http://today.java.net/pub/a/today/2004/10/14/jdic1.html
http://jquery-desktop.org/?login
http://sonspring.com/journal/jquery-desktop
http://desktop.sonspring.com/
http://www.sencha.com/products/designer/

um dia vou fazer uma pagina de erro 404 assim

https://github.com/nathansmith/jQuery-Desktop.git

integracao mantis e svn

Ter, 02 de Fevereiro de 2010 15:08

Este artigo trata de como integrar o Mantis, um bug tracker popular, com o SVN. O objetivo é automatizar a atualização de issues no mantis a partir de commits de alterações pelo SVN. Basicamente, deseja-se eliminar a atividade adicional de logar no mantis para marcar uma issue como "RESOLVED" após a conclusão da etapa de codificação. Assume-se que você já tem o Mantis e o SVN instalados e funcionando adequadamente de modo isolado. Caso ainda não tenha, procure por tutoriais na net sobre como instalá-los. Outra premissa é que você está trabalhando em um servidor Linux. Em ambientes (ergh) Windows o procedimento pode ser diferente, não sei e não me pergunte... :) Antes de mais nada, devo citar os devidos créditos. Quase tudo que fiz aqui veio do tutorial encontrado em http://www.grafxsoftware.com/option.php/182. Apenas fiz algumas atualizações, como por exemplo arquivos que mudaram de lugar, etc. Bom, o primeiro passo é criar um usuário no Mantis para ser usado pelo script. Você pode criar um usuário chamado "svn", por exemplo. É importante que ele tenha permissão nos seus projetos de alterar o status de issues. Coloque-o como "developer" que tudo vai ficar bem. A regra fundamental é a exigência de um pequeno padrão de texto nos comentários dos commits no SVN. Sempre que você (ou o programador) referenciar a issue no texto de comentário, esse texto será adicionado como uma nota no registro da issue no Mantis. Para isso, basta que o texto contenha um padrão do tipo: - issue #4 ou - bug #00456 Então, se o comentário for algo do tipo: "Corrigido caminhos relativos. Alteração referente a issue #5647", esse texto será adicionado como nota no registro da issue número 5647 no Mantis. E, se o texto contenha um padrão do tipo: - fixes issue #5466 ou - fixed issue #5466 ou ainda - fixed bug #5466 a issue terá seu status alterado, além da incorporação do texto como nota. O status irá para RESOLVED e a resolution para FIXED. É claro que você poderá mudar no código o status final que deseja, ou até mesmo o padrão de texto a ser procurado, colocando em Português, por exemplo. Vamos lá. Vá para o diretório onde você tem o Mantis instalado. A partir de agora vou me referir a ele como MANTIS_PATH, pois cada um tem o seu e não mostra pra ninguém (sim, que nem aquilo). Neste diretório, abra, com seu vi preferido, o arquivo de configuração do Mantis, chamadoconfig_inc.php e inclua o código abaixo após as linhas de código já existentes. Obviamente antes do delimitador de código final, o famoso "?>". Clique no link abaixo para ver o código. config_inc.php Feito isso, você já pode testar o funcionamento do casamento de padrão. Embaixo de MANTIS_PATH, tem um subdiretório chamado scripts. Nele vamos encontrar um... script!!!... que podemos usar para testar essa parte da integração. Ah, mas antes disso, é claro que você tem que criar (reportar) uma issue de teste no Mantis. Memorize seu número. Criada a issue, no shell, dentro do subdir scripts, execute o comando abaixo, trocando o número 4 pelo número da sua issue de teste. /usr/bin/php checkin.php <<< "hlbog fixed issue #4" Funcionou? Excelente. Agora a última parte. Aqui precisamos fazer com que uma operação de commit no SVN chame automagicamente o script de checkin que acabamos de executar manualmente. Pra isso temos os gloriosos hooks! Fácil. Vá para o diretório do seu repositório SVN, no servidor mesmo, não é na sua cópia de trabalho local. Neste local tem um subdiretório chamado hooks, e lá vários arquivos com extensão tmpl, que são scripts de exemplo que vem na instalação do SVN. Mas você irá criar seu próprio arquivos chamado post-commit. Isso mesmo, sem extensão nenhuma. O conteúdo desse arquivo será: Clique no link abaixo para ver o código. post-commit Repare que você deve colocar o caminho para o SEU Mantis no código. Altere a permissão do arquivo para execução: chmod 550 post-commit And... we're done! good coding. -- Helder Garcia

Retirado de : http://www.sounerd.com.br/index.php/section-blog/80-Desenvolvimento/351-integracao-mantis-e-svn.html

Chocolate Calculator

http://www.neatoshop.com/product/Chocolate-Calculator

olha que coisinha mais meiga e cutiie cutite

retirado de : http://www.neatoshop.com/product/Jason-Voorhees-Plush-Friday-the-13th

Guia de Referência CSS 2.1

Padrão	Significado	Exemplo CSS	Exemplo (X)HTML
*	Seletor universal: qualquer elemento	* { color: #000000; }	Aplicável a todos os elementos
e	Seletor de tipo de elemento: seleciona qualquer elemento	e { font-family: sans-serif;}	...
e f	Seletor contextual:seleciona qualquer elemento que estiver contido num elemento	h1 em { color: blue; }	..........
e > f	Seletor de elementos-filho: seleciona qualquer elemento descendente direto de um elemento	body > p { line-height: 1.3; }	.........
e + f	Seletor adjacente: seleciona o elemento que estiver imediatamente após um elemento	h1 + h2 { margin-top: -5mm; }	... ...
e.classe	Seletor de classe: seleciona o(s) elemento(s) em que se aplicou a "classe"	h1.pastoral { color: green; }
e#Id	Seletor de ID: seleciona o elemento identificado com Id	h1#chapter1 { text-align: center; }
e , f	Agrupamento de seletores: Seleciona os elementos e do agrupamento	h1, h2 { font-family: sans-serif; }	… … …
e [atrib]	Seletor de Atributo: seleciona o elemento que contenha o atributo indicado	h1[title] { color: blue; }
e [atrib="valor"]	Seletor de Atributo: seleciona o elemento com o mesmo atributo e “valor”	span[class=exemplo] { color: blue; }
e [atrib~="valor"]	Seletor de Atributo: seleciona o elemento em que “valor” de atributo esteja em uma lista de valores separadas por espaços	a[rel~="copyright"]{ color: red; }?	…
e [atrib|="val"]	Seletor de Atributo: seleciona o elemento em que valor do atributo seja idêntico a “val” ou inicia-se com “val”	*[lang|="pt"] { color: red; }
e:first-child	Pseudo-classe primeiro filho: seleciona o primeiro elemento descendente do elemento-pai	div > p:first-child { text-indent: 0; }	Último P antes de 'nota' Primeiro P após nota'.
a:link	Pseudo-classe link: aplica-se ao elemento com hiperlinks ou âncoras ainda não visitados	a:link { color: red; }	link
a:visited	Pseudo-classe visited: aplica-se ao elemento com hiperlinks ou âncoras já visitados	a:visited { color: blue; }	link
e:active	Pseudo-classe active: aplica-se ao elemento quando este for ativado pelo usuário	a:active { color: lime; }	link
e:hover	Pseudo-classe hover: aplica-se ao elemento quando o cursor estiver sobre ele, mas sem ativá-lo	a:hover { color: yellow; }	link
e:focus	Pseudo-classe focus: aplica-se ao elemento quando o foco estiver posicionado nele	a:focus { background: yellow; }	link
e:lang(val)	Pseudo-classe lang: aplica-se ao elemento se este estiver marcado com o idioma “val”	html:lang(pt) {quotes: '« ' ' »'; }
e:first-line	Pseudo-elemento first-line: aplica-se à primera linha do elemento	p:first-line { text-transform: uppercase; }	...
e:first-letter	Pseudo-elemento first-letter: aplica-se à primera letra do elemento	p:first-letter { font-size: 3em; font-weight: normal; }	...
e:before	Pseudo-elemento before: aplica conteúdo especificado em posição anterior ao elemento	e:before { content: open-quote; }	...
e:after	Pseudo-elemento after: aplica conteúdo especificado em posição posterior ao elemento	e:after { content: close-quote; }	...

Notação

Módulo de notação

Padrão	Descrição
a b	a seguido de b
( a b )	a e b agrupados
[ a | b ]	a ou b
[ a || b ]	a ou b ou ambos
a?	a é opcional
a*	Zero ou vários a
a+	Um ou vários a
a {n, m}	a no mínimo n vezes e máximo m

Tipos de mídia

Módulo de tipos de mídia

Nome	Mídia
all	Todos os dispositivos
braille	Dispositivos táteis braille
embossed	Impresoras braille
handheld	Dispositivos manuais/portáteis (tela pequena, monocromática, gráficos bitmap, banda limitada)
print	Impresso, material opaco e documentos visualizados na tela em modo de impressão
projection	Projetores
screen	Telas de computador
speech	Sintetizadores de voz. Similar a "aural"
tty	Mídias que utilizam caracteres de tamanho fixo, como terminais ou dispositivos portáteis com capacidades limitadas de tela
tv	Televisores

Sintaxe

Módulo de sintaxe

@import "folha.css" tipo-midia;

/* Comentários */

@media tipo-midia { seletor { Propriedade: valor(es); } };

Unidades

Unidades de tamanho relativas

Módulo de unidades relativas

Unidade	Descrição
px	Tamanho em pixels (relativo ao dispositivo)
em	Tamanho relativo à fonte utilizada no elemento ao qual está inserido
ex	Correspondente à altura da fonte 'x’

Unidades de tamanho absolutas

Módulo de unidades absolutas

Unidade	Descrição
in	Polegadas (1polegada = 2.54 cm)
cm	Centímetros
mm	Milímetros
pt	Pontos (1pt = 1/72 polegadas)
pc	Picas (1pica = 12 pontos)

Porcentagem

Módulo de porcentagem

Unidade	Descrição
%	Porcentagem
0	Valor '0' não requer atribuição de unidade

Representação de cores

Módulo de representação de cores

Unidade	Descrição
#RRGGBB	Cor RGB (6 valores hexadecimais)
#RGB	Notação simplificada (#RGB = #RRGGBB)
rgb(R,G,B)	Cor RGB (3 valores de 0 a 255)
rgb(R%,G%,B%)	Cor RGB (3 valores percentuais)

Modelo de caixa

Bordas

Módulo de bordas

Propriedade	Descrição	Valores	Descrição
border-top-width border-right-width border-bottom-width border-left-width	Largura das bordas em cada um dos quatro lados: superior, direito, inferior e esquerdo	[ thin | medium | thick | ]	thin: espessura fina medium: espessura média thick: espessura grossa Exemplo: e {border-bottom-width: medium; }
border-width	Atalho para definir de uma só vez larguras de bordas para todos os lados	[ thin | medium | thick | ] {1,4}	Exemplos: Todas as bordas com espessura 'thin': e {border-width: thin;} Bordas superior e inferior com espessura 'thin', bordas direita e esquerda com espessura 'thick': e {border-width: thin thick;} Borda superior com espessura 'thin', bordas direita e esquerda com espessura 'thick', borda inferior com espessura 'medium': e {border-width: thin thick medium;} Borda superior com espessura 'thin', borda direita com espessura 'thick', borda inferior com espessura 'medium', borda esquerda com espessura 'thin': e {border-width: thin thick medium thin;}
border-top-color border-right-color border-bottom-color border-left-color	Cor das bordas em cada um dos quatro lados: superior, direito, inferior e esquerdo	[ | transparent ]	Exemplo: e {border-top-color: black; }
border-color	Atalho para definir de uma só vez cores de bordas para todos os lados	[ | transparent ] {1,4}	Exemplos: Todas as bordas com a cor 'black': e {border-color: black;} Bordas superior e inferior com a cor 'black', bordas direita e esquerda com a cor 'silver': e {border-color: black silver;} Borda superior com a cor 'black', bordas direita e esquerda com a cor 'silver', borda inferior com a cor 'gray': e {border-color: black silver gray; } Borda superior com a cor 'black', borda direita com a cor 'silver', borda inferior com a cor 'gray', borda esquerda com a cor 'white': e {border-color: black silver gray white; }
border-top-style border-right-style border-bottom-style border-left-style	Estilo de bordas em cada um dos quatro lados: superior, direito, inferior e esquerdo	[ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ]	none: nenhuma borda (largura computada como zero) hidden: idêntico à 'none', exceto na resolução de conflito de bordas nos elementos de uma tabela dotted: série de pontos dashed: série de segmentos de pequenas linhas solid: segmento de linha simples e contínua double: Duas linhas 'solid'. A soma das duas linhas e o espaço entre elas é igual ao valor definido em 'border-width' groove: Efeito 3D, entalhada ridge: Efeito 3D, oposto de 'groove': ressaltada inset: Efeito 3D, baixo relevo outset: Efeito 3D, alto relevo Exemplo: e {border-left-style: dotted; }
border-style	Atalho para definir de uma só vez estilos de bordas para todos os lados	[ none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1,4}	Exemplos: Todas as bordas com estilo 'solid': e {border-style: solid;} Bordas superior e inferior com estilo 'solid', bordas direita e esquerda com estilo 'dotted': e {border-style: solid dotted;} Borda superior com estilo 'solid', bordas direita e esquerda com estilo 'dotted', borda inferior com o estilo 'dashed': e {border-color: solid dotted dashed; } Borda superior com estilo 'solid', borda direita com estilo 'dotted', borda inferior com estilo 'dashed', borda esquerda com o estilo 'double': e {border-color: solid dotted dashed double; }
border-top border-right border-bottom border-left	Atalho para definir largura, estilo e cor das bordas superior, direita, inferior ou esquerda	[ || || ]	Exemplo: e {border-bottom: thick solid red;}
border	Atalho para largura, estilo e cor das quatro bordas	[ || || ]	Exemplo: e {border: thick solid red;}

Obs.: Valores em negrito são os adotados como padrão

Margens

Módulo de margens

Propriedade	Descrição	Valores	Descrição
margin-top margin-right margin-bottom margin-left	Tamaho da margem para cada um dos lados: superior, direito, inferior e esquerdo	[ | | auto ]	Exemplo: body {margin-top: 2em }
margin	Atalho para definir de uma só vez o tamanho da margem para todos os lados	[ | | auto ]{1,4}	Exemplos: Todas as margens com 2em: body {margin: 2em } Margem superior e inferior com 1em, esquerda e direita com 2em: body {margin: 1em 2em } Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 2em: body {margin: 1em 2em 3em } Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em: body {margin: 1em 2em 3em 4em }

Espaçamento

Módulo de espaçamento

Propriedade	Descrição	Valores	Descrição
padding-top padding-right padding-bottom padding-left	Distância utilizada para espaçamento em cada um dos quatro lados: superior, direito, inferior e esquerdo	[ | ]	Exemplo: body {padding-top: 2em }
padding	Atalho para definir de uma só vez a distância de espaçamento para todos os lados	[ | ]{1,4}	Exemplos: Todas as margens com 2em: body {padding: 2em } Margem superior e inferior com 1em, esquerda e direita com 2em: body {padding: 1em 2em } Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 2em: body {padding: 1em 2em 3em } Margem superior com 1em; direita com 2em; inferior com 3em; e esquerda com 4em: body {padding: 1em 2em 3em 4em }

Modelo de formtação visual

Módulo de formatação visual

Propriedade	Descrição	Valores	Descrição / Exemplos
display	Modos de exibição do conteúdo	[ inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none ]	inline: O elemento renderizado em uma ou mais linhas block: renderizado como um bloco list-item: renderizado como um item de lista e em linha(s) run-in: renderizado como bloco ou linha(s), dependendo do contexto inline-block: renderizado em uma linha simples, mas comporta-se como um bloco table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption: esses valores farão com que o elemento se comporte como uma tabela (sujeito a restrições descritas no capítulo sobre tabelas) none: o elemento não será mostrado no modo visual Exemplo: e {display: none;}
position	Esquema de posicionamento	[ static | relative | absolute | fixed ]	static: Posicionamento normal de acordo com o fluxo normal dos elementos na página. As proprieades 'top', 'right', 'bottom', e 'left' não se aplicam relative: posicionamento é calculado de acordo com o fluxo normal. O efeito de 'position:relative' é indefinido nos elementos 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell', e 'table-caption' absolute: Posicionamento (e possivelmente o tamanho) é especificado com as propriedades 'top', 'right', 'bottom', e 'left'. Essas propriedade são especificadas em relação ao conteúdo do bloco fixed: Posicionamento é calculado tal como o modelo 'absolute', mas adicionalmente se manterá fixo, mesmo que se utilize a barra de rolagem Exemplo: @media screen { e#exemplo {position: fixed; }} @media print { e#exemplo {position: static;}}
top right bottom left	Distância do elemento com relação à extremidade de seu elemento-pai	[ | | auto ]	top: Distância vertical em relação à margem superior right: Distância horizontal em relação à margem direita bottom: Distância vertical em relação à margem inferior left: Distância horizontal em relação à margem esquerda Exemplo: e { top: 20px; left: 40px;}
float	Posicionamento adjacente à esquerda ou à direita do elemento	{ left | right | none ]	left: o elemento será posicionado flutuando à esquerda. O fluxo do conteúdo não integrante do elemento será posicionado à direita a partir do 'top' do elemento que recebe a propriedade 'float' right: similar à 'left', mas com o elemento flutuando à direita none: o elemento não flutua Exemplo: e {float: right;}
clear	Controle para os posicionamentos float	[ none | left | right | both ]	none: nenhum controle de limpeza de flutuação será executado left: limpeza de flutuação à esquerda: o elemento será posicionado abaixo da borda inferior do elemento flutuante à esquerda right: limpeza de flutuação à direita: o elemento será posicionado abaixo da borda inferior do elemento flutuante à direita both: o elemento será posicionado abaixo da borda inferior de qualquer elemento flutuante, seja à direita ou à esquerda Exemplo: e { clear: both;}
z-index	Níveis de profundidade de sobreposição de elementos	[ auto | ]	Os números serão considerados para ordenar os elementos que ficarão sobrepostos, do mais baixo para o mais alto: 'z-index: 1'; 'z-index:2'; 'z-index: 3'; … Exemplo: e {z-index: 1;}
direction	Define a direção de um texto: esquerda para direita; direita para esquerda	[ ltr | rtl ]	Utilizado em clientes que têm suporte a idiomas e escrita bidirecional. ltr - direção da esquerda para a direita rtl - direção da direita para a esquerda Exemplo: e {direction: rtl;} Para que a direção tenha o efeito atribuído, a propriedade 'unicode-bidi' deve conter os valores 'embed' ou 'bidi-override'
unicode-bidi	Interação entre textos bidirecionais	[ normal | embed | bidi-override ]	Utilizado em clientes que têm suporta a idiomas e escrita bidirecional normal – o elemento não embutirá o algoritmo com suporte bidirecional embed – embutirá algoritmo bidirecional bidi-override – permite a sobreposição

Obs.: Valores em negrito são os adotados como padrão

Detalhes do modelo de formatação visual

Módulo de detalhes do modelo de formatação visual

Propriedade	Descrição	Valores	Descrição / Exemplos
width	Largura	[ | | auto ]	Exemplo: e {width: 25%;}
min-width	Largura mínima	[ | ]	Exemplo: e {min-width: 200px;}
max-width	Largura máxima	[ | | none ]	Exemplo: e {max-width: 600px;}
height	Altura	[ | | auto ]	Exemplo: e {height: 250px;}
min-height	Altura mínima	[ | ]	Exemplo: e {min-height: 30%;}
max-height	Altura máxima	[ | | none ]	Exemplo: e {max-height: 70%;}
line-height	Distância entre as linhas de um texto	[ normal | | | ]	Exemplo: e {line-height: 1.2em;}
vertical-align	Alinhamento vertical do texto	[ baseline | sub | super | top | text-top | middle | bottom | text-bottom | | ]	baseline - A linha de base do elemento e do elemento superior (elemento-pai) serão consideradas para alinhamento. Se não houver linha de base no elemento, será considerado sua margem inferior sub - A linha de base do elemento será alinhada com a linha de base de conteúdo subscrito do elemento superior super - A linha de base do elemento será alinhada com a linha de base de conteúdo superescrito do elemento superior top - Alinha o topo do elemento com a linha de topo do elemento superior text-top - A base superior do elemento será alinhada com a linha superior do conteúdo de textos do elemento-pai middle - A linha central do elemento e de seu elemento superior serão consideradas para alinhamento. (linha central do elemento superior = ponto central da altura da letra 'x') bottom - Alinha o rodapé do elemento com o rodapé do elemento superior text-bottom - A base inferior do elemento será alinhada com a linha inferior do conteúdo de textos do elemento-pai Exemplo: e {vertical-align: sub;}

Obs.: Valores em negrito são os adotados como padrão

Efeitos visuais

Módulo de efeitos visuais

Propriedade	Descrição	Valores	Descrição / Exemplos
overflow	Comportamento do browser quando o conteúdo do elemento for maior que sua área	[ visible | hidden | scroll | auto ]	visible - Todo o conteúdo do elemento estará visível (não cortado) e talvez conforme a área seja renderizado para fora do elemento hidden - O conteúdo será cortado (se maior que a área disponível) e não haverá barra de rolagens no elemento scroll - O conteúdo será cortado (se maior que a área disponível) mas haverá barra de rolagens no elemento. Quando a mídia for especificada como 'print', o conteúdo do elemento poderá ser impresso. auto - O método será atribuído pelo browser cliente Exemplo: e {overflow: scroll;}
clip	Especifica região de um elemento a ser exibida	[ rect (, , , ) | auto ]	rect – Delimita área retangular do elemento (topo, direita, rodapé, esquerda) na qual o conteúdo ficará visível auto - O elemento não terá clip e sua própria área será idêntica à de visualização Exemplo: e {clip: rect(5px, 40px, 45px, 5px); }
visibility	Define se um elemento estará ou não visível	[ visible | hidden | collapse ]	visible - O elemento será exibido hidden - O elemento não será exibido, ficando totalmente transparente. Mas o leiaute da página continuará sendo afetado collapse - Mesmo efeito que hidden, mas aplicável a elementos de tabela Exemplo: e {visibility: hidden; }

Obs.: Valores em negrito são os adotados como padrão

Agregador de conteúdo, numeração automática e listas

Módulo de agregador de conteúdo, numeração automática e listas

Propriedade	Descrição	Valores	Descrição / Exemplos
content	Agregador de conteúdo para os pseudo-elementos :after e :before	[ normal | none | [ | | | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote]+ ]	none: Nenhum conteúdo será agregado. normal: Como 'none', para os pseudo-elementos :before e :after : Conteúdo de texto específico será agregado. : Valor de uma URI designando um recurso externo (como uma imagem). Se o browser não puder exibir recursos externos, ele não aparecerá ou alguma indicação apontará essa impossibilidade : Contadores cujos valores serão agregados. Podem ser especificados com duas diferentes funções: 'counter()' ou 'counters()'. A primeira pode ser de duas formas: 'counter(name)', para usar estilo padrão; ou 'counter(name, style)', para especificar o estilo. O texto que será agregado corresponde ao valor de incremento do contador para um determinado campo 'name' no pseudo-elemento específico; e sua formatação será a indicada em 'style' (o padrão é 'decimal'). As opções para 'style' são as mesmas possíveis em 'list-style-type'. As seguintes palavras não podem ser usadas para 'name': 'none', 'inherit' ou 'initial'. A outra função também tem duas formas: 'counters(name, string)', para usar estilo padrão; ou 'counters(name, string, style)', para indicar estilo. Para obter mais informações sobre counters, acesse http://www.w3.org/TR/CSS21/generate.html#counters open-quote | close-quote - O conteúdo agregado será substituído por aspas no-open-quote | no-close-quote - Nenhum conteúdo é introduzido, mas incrementa (decrementa) attr(X) - Esta função retorna a 'string' como um valor do atributo X. A 'string' não será interpretada pelo processador do CSS Exemplo: H1:before {content: counter(secao, upper-roman) "-" }
quotes	Especifica aspas utilizadas em citações	[ [ ]+ | none ]	Exemplo, especificando dois pares de aspas para idiomas diferentes: e:lang(en) {quotes: '"' '"' "'" "'" } e:lang(pt) { quotes: "«" "»" '"' '"' }
counter-reset	Inicializa um contador identificado na propriedade 'content'	[ [ ? ]+ | none ]	Exemplo: h1 {counter-reset: secao; }
counter-increment	Incrementa um contador identificado na propriedade 'content'	[ [ ? ]+ | none ]	Exemplo: H2:before { content: counter(capitulo) "." counter(secao) " "; counter-increment: secao; }
list-style	Atalho para definir de uma só vez todas as propriedades de lista: type, position e image	[ || || ]	Exemplo: li {list-style: decimal-leading-zero outside url(imagem.jpg); }
list-style-image	Imagem aplicada aos elementos de uma lista	[ url("http://...") | none ]	Exemplo: li { list-style-image: url("http://png.com/ellipse.png");}
list-style-type	Estilo visual aplicado aos marcadores de uma lista	[ disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none ]	disc - ponto sólido circle - círculo vazio square - quadrado vazio decimal - números decimas, iniciando com 1 decimal-leading-zero - números decimais com zeros iniciais à esquerda (ex.: 01, 02, 03, ..., 98, 99) lower-roman - números romanos minúsculos (i, ii, iii, iv, v, etc.). upper-roman - números romanos maiúsculos (I, II, III, IV, V, etc.) georgian - numeração georgeana tradicional (an, ban, gan, ..., he, tan, in, in-an, ...) armenian - numeração armênia tradicional lower-latin | lower-alpha - letras ascii minúsculas (a, b, c, ... z) upper-latin | upper-alpha - letras ascii maiúsculas (A, B, C, ... Z) lower-greek - caracteres gregos clássicos alpha, beta, gama, ... (α, β, γ, …) none – nenhum marcador de lista Exemplo: li {list-style-type: lower-alpha;}
list-style-position	Posicionamento interno dos marcadores de uma lista	[ inside | outside ]	inside – conteúdo da lista será indentado, mas o texto não será alinhado após quebra de linha outside – diferente de inside, o texto será alinhado na indentação mesmo com quebra de linha Exemplo: ul {list-style-position: outside; } ul.compact {list-style-position: inside;}

Obs.: Valores em negrito são os adotados como padrão

Cores e Fundo

Módulo de cores e fundo

Propriedade	Descrição	Valores	Descrição / Exemplos
color	Cor do texto presente no elemento		Exemplo: e {color: red; } e {color: rgb(255,0,0); }
background-color	Cor de fundo do elemento	[ | transparent ]	Para 'transparent' será adotada a cor de fundo do elemento superior e na ausência deste, a cor de fundo padrão do browser Exemplo: e {background-color: #f00; } e {background-color: transparent; }
background-image	Imagem de fundo do elemento	[ url(...) | none ]	Exemplo: e {background-image: url(http://caminho/imagem.jpg); }
background-repeat	Define se e como a imagem de fundo utilizada se repetirá	[ repeat | repeat-x | repeat-y | no-repeat ]	repeat: a imagem é repetida em ambas as direções: horizontal e vertical repeat-x: a imagem é repetida somente horizontalmente repeat-y: a imagem é repetida somente verticalmente. no-repeat: a imagem não será repetida e somente uma cópia da mesma será renderizada Exemplo: e {background-repeat: no-repeat;}
background-attachment	Define se a imagem de fundo utilizada será fixa ou com rolagem	[ scroll | fixed ]	scroll: a imagem acompanha a rolagem da página na janela do browser, mantendo-se como imagem de fundo fixed: a imagem é fixada na página e não acompanhará a rolagem da página
background-position	Posição da imagem de fundo utilizada.	[ [ | | left | center | right ] [ | | top | center | bottom]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]	top: Equivalente a '0%' do posicionamento vertical right: Equivalente a '100%' do posicionamento horizontal bottom: Equivalente a '100%' do posicionamento vertical left: Equivalente a '0%' do posicionamento horizontal. center: Equivalente a '50%' do posicionamento horizontal ou '50%' do posicionamento vertical Exemplo: body {background-position: right top; } body {background-position: 100% 0; }
background	Atalho para definir de uma só vez todas as propriedades de imagem de fundo	[ || || || || ]	Exemplo: e {background: red url("chess.png") repeat-x fixed 50% right; }

Obs.: Valores em negrito são os adotados como padrão

Paginação para impressão

Módulo de paginação para impressão

Propriedade	Descrição	Valores	Descrição / Exemplos
page-break-before	Define quebra de página antes do elemento	[ auto | always | avoid | left | right ]	auto: insere quebra de página somente se necessário always: sempre insere quebra de página antes do elemento avoid: evita inserir quebra de página antes do elemento left: insere uma ou duas quebras de páginas antes do elemento, de modo que a página gerada seja uma página par right: insere uma ou duas quebras de páginas antes do elemento, de modo que a página gerada seja uma página ímpar Exemplo: e {page-break-before: always; }
page-break-after	Define quebra de página após o elemento	[ auto | always | avoid | left | right ]	auto: insere quebra de página somente se necessário always: sempre insere quebra de página após o elemento avoid: evita inserir quebra de página após o elemento left: insere uma ou duas quebras de páginas após o elemento, de modo que a página gerada seja uma página par right: insere uma ou duas quebras de páginas após o elemento, de modo que a página gerada seja uma página ímpar Exemplo: e {page-break-after: always; }
page-break-inside	Define ou evita quebra de páginas dentro de um elemento	[ avoid | auto ]	auto: insere quebra de página somente se necessário avoid: evita inserir quebra de página dentro do elemento Exemplo: e {page-break-inside: avoid; }
orphans	Número mínimo de linhas antes da quebra de um parágrafo que pode aparecer no final de uma página		Somente valores positivos são permitidos Exemplo: e {orphans: 2; }
widows	Número mínimo de linhas após a quebra de um parágrafo que pode aparecer no início de uma página		Somente valores positivos são permitidos Exemplo: e {widows: 2; }

Obs.: Valores em negrito são os adotados como padrão

Fontes tipográficas

Módulo de fontes tipográficas

Propriedade	Descrição	Valores	Descrição / Exemplos
font-family	Família(s) de fontes	[ [ | ] [, | ]* ]	As seguintes famílias-genéricas de fontes são definidas em CSS2.1: 'serif' 'sans-serif' 'cursive' 'fantasy' 'monospace' Exemplo: e {font-family: "New Century Schoolbook", serif; }
font-style	Estilo utilizado na fonte	[ normal | italic | oblique ]	normal: fonte do elemento sem efeito itálico ou oblíquo italic: fonte do elemento com efeito itálico oblique: fonte do elemento com efeito oblíquo Exemplo: e {font-style: italic; }
font-variant	Exibe o texto em pequena caixa-alta (versalete) ou fonte normal	[ normal | small-caps ]	normal: fonte do elemento sem efeito de capitalização small-caps: fonte do elemento com efeito de pequena caixa alta (versalete) Exemplo: e {font-variant: small-caps; }
font-weight	Peso da fonte	[ normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ]	normal: fonte do elemento com efeito padrão de peso (corresponde ao valor 400) bold: fonte do elemento com efeito de negrito (corresponde ao valor 700) bolder: fonte do elemento com o valor de peso imediatamente superior ao do valor herdado (p.ex: de 400 para 500) lighter: fonte do elemento com o valor de peso imediatamente inferior ao do valor herdado (p.ex: de 400 para 300) Exemplo: e {font-weight: bold; }
font-size	Tamanho da fonte	[ [ xx-small | x-small | small | medium | large | x-large | xx-large] | [larger | smaller] | | ]	medium: fonte do elemento com valor padrão de tamanho e equivalente ao padrão do browser. Os demais valores ( xx-small | x-small | small | large | x-large | xx-large) são calculados pelo browser considerando esse valor 'medium'. larger | smaller: aumenta ou diminui o tamanho em relação ao valor herdado. tamanho: valor absoluto. Não são permitidos valores negativos. porcentagem: porcentagem do tamanho do valor herdado. Exemplo: e {font-size: 90%; }
font	Atalho para definir de uma só vez todas as propriedades de fonte	[ [ [ || || ]? [ / ]? ] | caption | icon | menu | message-box | small-caption | status-bar ]	Além dos valores para as propriedades de estilo, variação, peso, tamanho, altura da linha e família, pode-se utilizar os seguintes, de acordo com o ambiente do usuário: caption: fonte utilizada por controles com legenda (ex.: botões, drop-downs, etc.) icon: fonte utilizada em ícones menu: fonte utilizada em menus do sistema (ex.: dropdown menus e menus suspensos) message-box: fonte utilizada em caixas de diálogo. small-caption: fonte utilizada em controles com legenda reduzida status-bar: fonte utiliza em barra de status das janelas Exemplo: e {font: 300 italic 1.3em/1.7em "Helvetica", sans-serif; }

Obs.: Valores em negrito são os adotados como padrão

Texto

Módulo de texto

Propriedade	Descrição	Valores	Descrição / Exemplos
text-indent	Recuo à esquerda da primeira linha em um bloco de texto	[ | ]	Exemplo: e {text-indent: 3em; }
text-align	Alinhamento do texto	[ left | right | center | justify ]	left: alinhamento do texto à esquerda right: alinhamento do texto à direita center: alinhamento do texto centralizado justify: alinhamento do texto justificado Exemplo: e {text-align: center; }
text-decoration	Efeitos decorativos no texto como sublinhado, tachado, linha acima e piscante	[ none | [ underline || overline || line-through || blink ] ]	none: não produz decoração no texto do elemento underline: cada linha de texto do elemento terá uma linha abaixo (sublinhado) overline: cada linha de texto do elemento terá uma linha acima line-through: cada linha de texto do elemento terá uma linha cortando-o ao meio (tachado) blink: textos piscantes alternadamente entre visíveis e não visíveis Exemplo: e {text-decoration: underline; }
letter-spacing	Espaçamento entre caracteres	[ normal | ]	Exemplo: e {letter-spacing: 0.1em; }
word-spacing	Espaçamento entre palavras	[ normal | ]	Exemplo: e {word-spacing: 1em; }
text-transform	Transforma o texto em maiúsculas/minúsculas	[ capitalize | uppercase | lowercase | none ]	capitalize: coloca o primeiro caracter de cada palavra do elemento em maiúsculas (caixa alta) uppercase: coloca todos os caracteres de cada palavra do elemento em maiúsculas (caixa alta) lowercase: coloca todos os caracteres de cada palavra do elemento em minúsculas (caixa baixa) none: não aplica efeitos de capitalização Exemplo: e {text-transform: capitalize; }
white-space	Definições sobre espaços em branco num determinado elemento	[ normal | pre | nowrap | pre-wrap | pre-line ]	normal: utiliza a configuração padrão do browser para espaçamentos em branco pre: todos os espaços em branco presentes no código fonte serão exibidos no elemento nowrap: os espaços em branco serão tratados como 'normal', mas as quebras de linha serão suprimidas pre-wrap: todos os espaços em branco contantes no código-fonte serão exibidos no elemento pre-line: os espaços em branco serão tratados como normal. Exemplo: e {white-space: pre; }

Obs.: Valores em negrito são os adotados como padrão

Tabelas

Módulo de tabelas

Propriedade	Descrição	Valores	Descrição / Exemplos
caption-side	Posicionamento do título em relação à tabela	[ top | bottom ]	top: Posicionamento do título antes da área da tabela bottom: Posicionamento do título abaixo da área da tabela Exemplo: e {caption-side: bottom; }
table-layout	Define o algoritmo usado para a renderização da tabela	[ auto | fixed ]	auto: utiliza algum algoritmo de leiaute automático. fixed: utiliza algoritmo de leiaute fixo. Exemplo: table {table-layout: fixed; }
border-collapse	Seleciona o modelo de bordas a ser utilizado	[ collapse | separate ]	separate: as bordas serão renderizadas para cada célula, dado a impressão de linha dupla collapse: as bordas das células serão mescladas, dando a impressão de uma única linha Exemplo: table {border-collapse: collapse; }
border-spacing	Distância entre as bordas de células adjacentes (quando 'border-collapse=separated')	?	Exemplo: table {border-spacing: 15pt; } table {border-spacing: 10pt 5pt; }
empty-cells	Visibilidade das bordas de células sem conteúdo	[ show | hide ]	show: exibe as células vazias da tabela hide: não exibe as células vazias da tabela Exemplo: table {empty-cells: hide; }

Obs.: Valores em negrito são os adotados como padrão

Interface de usuário

Módulo de interface de usuário

Propriedade	Descrição	Valores	Descrição / Exemplos
cursor	Especifica o cursor	[ [http://.../cursor.ico,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ]	Exemplo: e {cursor:help; }
outline-width	Largura da linha de contorno		Aceita os mesmos valores de 'border-width' Exemplo: e {outline-width: thin; }
outline-style	Estilo da linha de contorno		Aceita os mesmos valores de 'border-style' Exemplo: e {outline-style: dotted; }
outline-color	Cor da linha de contorno	[ | invert ]	color: valor correspondente a uma cor invert: cor inversa à área do elemento (prática comum para tornar o 'focus' visível) Exemplo: e {outline-color: #f00; }
outline	Atalho para definir de uma só vez todas as propriedades de outline	[ || || ]	Exemplo: active {outline: black dotted thick; }
speak-header	(Aural) Freqüência em que os 'headers' da tabela serão pronunciados. Utilizado quando 'media=speech'	[ once | always ]	once: Os títulos de tabelas serão 'falados' uma vez, antes da série de células always: Os títulos de tabelas serão 'falados' sempre que ocorrer uma célula pertinente Exemplo: e {speak-header: always; }

retirado de: http://www.w3c.br/divulgacao/guiasreferencia/css2/

Integração do TestLink com o MantisBugTracker

Neste tutorial aprenderemos a configurar a integração entre o TestLink e o Mantis BugTracker

O TestLink possui a funcionalidade de habilitar o cadastro de um bug diretamente de sua interface para o Sistema de Gestão de Defeitos suportados (Mantis, BugZilla, Eventum, Trackplus, Jira, Trac)

Precondições para a configuração

Ter um servidor Apache, um banco de dados e o PHP instalado. Neste mini tutorial utilizo o WampServer para Windows.
Ter o Testlink instalado. Neste mini tutorial utilizo a versão 1.7.4
Ter o Mantis instalado. Neste mini tutorial utilizo a versão 1.1.1

PS: A versão 1.7.4 já está obsoleta. Utilize as versões mais atuais através do site http://teamst.org

Caminho das aplicações

Tanto o TestLink quanto o Mantis estarão na pasta WWW do WampServer, que pela instalação padrão do Windows é C:\wamp\www.

Caso você utilize outro programa para gerenciar esta tríade (apache, php e mysql) utilize o diretório em que são colocadas as aplicações web

Primeiro Passo – Criando um usuário no Mantis para acesso anônimo

O primeiro passo para iniciar a configuração é configurar o Mantis para acesso anônimo à aplicação. Para isso entre na aplicação, vá ao link Manage (Gerenciar) e clique no botão Create New Account (Criar nova Conta) e crie um usuário que será o nosso usuário anônimo. Neste caso eu utilizarei o nome “testlink”. É importante dar o acesso somente como “reporter” e deixar a checkbox Enabled marcada.

Atenção: Caso você já tenha a configuração de envio de email definida insira um email válido. Caso contrário deixe o email em branco. Neste exemplo não temos configurado o envio de email. Para o Mantis aceitar a inserção da senha no cadastro de usuário copie a variável $g_send_reset_passwor= ON; do arquivo config_defaults_inc.php para config_inc.php e altere seu valor de ON para OFF.

Estes arquivos estão na pasta de instalação do Mantis, no meu caso ela está em C:\wamp\www\mantis-1.1.1

Como não temos o envio de email habilitado e temos a configuração acima efetuada, será apresentada uma mensagem de confirmação de utilização da senha em branco. Clicamos em Empty Password.

Segundo Passo – Habilitando o Mantis para login anônimo (não obrigatório)

Esse passo não é obrigatório! Se você não o fizer a diferença é que você ou terá que já estar logado no sistema para aparecer a tela de report de bugs ou você terá de efetuar o login para acessar a página!

Copie a variável $g_allow_anonymous_login= OFF; e $g_anonymous_account = ''; do arquivo config_defaults_inc.php para o arquivo config_inc.php. Altere o valor da variável $g_allow_anonymous_login para ON e insira na variável $g_anonymous_account o usuário que criamos que é testlink. (nas esqueça de colocá-lo entre as aspas)

O arquivo config_inc.php deve estar semelhante ao da imagem abaixo:

Terceiro Passo – Configurar a interface do TestLink com o Mantis

Agora iremos manipular os arquivos necessários no TestLink para habilitar a utilização do Mantis.

Abra o arquivo mantis.cfg.php que está no diretório de instalação do TestLink na pasta cfg. No meu caso está em C:\wamp\www\testlink\cfg

Teremos que alterar o parâmetro destes arquivos para que o TestLink e o Mantis possam “conversar”.

A tabela abaixo mostra o texto que devemos substituir e por qual valor:

Parâmetro	Descrição	Substituir por este valor
[CONFIGURE_BUG_TRACK_DB_HOST]	Qual o host do banco de dados da ferramenta de bugtraker	localhost
[CONFIGURE_BUG_TRACK_DB_NAME]	Qual o nome do banco de dados da ferramenta de bugtracker	mantis
[CONFIGURE_BUG_TRACK_DB_TYPE]	Qual o tipo de banco de dados da ferramenta de bugtracker	mysql
[CONFIGURE_BUG_TRACK_DB_USER]	Qual o usuario de conexão com o banco do bugtracker	root
[CONFIGURE_BUG_TRACK_DB_USER_PASS]	Qual a senha do usuário de conexão com o banco do bugtracker	[em branco]

Nas duas ultimas configurações altere, se necessário o nome da aplicação do Mantis, referente a aplicação do caminho. No meu caso, como a pasta de acesso a aplicação é mantis-1.1.1 fica assim:

define('BUG_TRACK_HREF', "http://localhost/mantis-1.1.1/view.php?id=");

define('BUG_TRACK_ENTER_BUG_HREF',"http://localhost/mantis-1.1.1/");

Atenção: substitua somente os parâmetros da tabela pelo valor e mantenha as aspas.

Quarto Passo – Habilitando a integração no TestLink com o Mantis

Copie a variável $g_interface_bugs='NO'; do arquivo config.inc para o arquivo custom_config.inc.php e altera o valor NO para MANTIS, ficando assim:
$g_interface_bugs='MANTIS'

Estes arquivos estão na pasta da aplicação do TestLink. No meu caso o caminho é C:\wamp\www\testlink

Quinto Passo – Executando o Caso de Teste e marcando ele como Falha no TestLink

Agora para ver a integração do TestLink com o Mantis teremos que executar um Caso de Teste no TestLink e marcá-lo como falha (failed) para ver tal integração

Note que foi criado uma coluna a mais chamada “BUG Management” e um botão. Clicamos então no botão. Será apresentada a seguinte tela:

Se já existe um bug cadastrado no Mantis insira o código do bug e clique em Add bug, caso contrário clique no link “Access to Bug Tracking System (Mantis)”. Este link acessa o Mantis para que o testador possa cadastrar o bug. Feito isso ele deve inserir o código do bug cadastrado para que ele possa ser inserido no TestLink.

Executado estes passos clique no botão Close e visualize a tela de execução do Caso de Uso.
Abaixo do status de execução do Caso de Teste no TestLink será inserido uma nova tabela contendo o Build, Código do Bug e Descrição do Bug e um botão de remoção desta informação.

Clicando no link da descrição do bug ele será aberto no Mantis, com a visualização dele.

Para todos os status de execução do Caso de Teste existirá o botão do Bug management. Para todas as execuções que inserirmos o bug ela será exibida. Podemos clicar no botão “Show complete execution history” para visualizar.

Necessito habilitar o login anônimo para fazer a integração?

Não! Na verdade habilitamos o login anônimo para ter acesso direto ao bug que foi inserido na execução do teste no TestLink sem precisarmos efetuar o login no Mantis.
Quando inserimos um bug do Mantis no TestLink as informações são obtidas diretamente no banco de dados do Mantis, não influenciando o login.

Chegamos ao final deste mini-tutorial.
Notamos que a integração pode não ser aquela “Brastemp” que pensamos em já abrir a ferramenta de Bug Tracker e ter os dados já cadastrados de forma automática, mas já nos dá uma boa visualização para que o TestLink se propõe que é fazer a gerência de testes.

Não deixe de ver o tutorial sobre a Integração do Testlink e Trac.

Espero que tenham gostado! Qualquer duvida, por favor, postem um comentário!

Retirado de: http://sembugs.blogspot.com/2008_06_01_archive.html