Esta tem sido provavelmente a regra de CSS 3 mais usada visto que é correctamente interpretada pela grande maioria dos navegadores de Internet decentes. Funciona na perfeição no Mozilla Firefox, Google Chrome, Safari e Opera.

Tabela de Compatibilidade

4	5	3	3.6	10	10.5	4	7	8	9

Como Usar

Quando queremos que todos os cantos tenham o mesmo valor para o raio, usamos o seguinte:

1
2
3
4
5
6

div {
  border: 1px solid #ccc;
  border-radius: 10px; /* para todos os browsers recentes (e decentes) */
  -moz-border-radius: 10px; /* para versões antigas do Mozilla */
  -webkit-border-radius: 10px; /* para versões antigas do Safari */
}

Exemplo

Este é o resultado do código acima:

Uma característica excelente desta regra é permitir que sejam definidos diferentes valores para o raio de cada um dos cantos. Quer isto dizer que é possível ter um rectângulo com quatro cantos diferentes. Aqui vai um exemplo:

Como Usar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

div {
  border: 3px solid #ccc;
  border-top-left-radius: 60px;
  border-top-right-radius: 40px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0px;
  -moz-border-radius-topleft: 60px;
  -moz-border-radius-topright: 40px;
  -moz-border-radius-bottomleft: 20px;
  -moz-border-radius-bottomright: 0px;
  -webkit-border-top-left-radius: 60px;
  -webkit-border-top-right-radius: 40px;
  -webkit-border-bottom-left-radius: 20px;
  -webkit-border-bottom-right-radius: 0px;
}

Exemplo

Este é o resultado do código acima:

Mas há mais coisas que podem ser feitas com a regra Border Radius em CSS3. Também se podem definir dois ângulos diferentes em cada canto, ou seja, podemos ter oito ângulos diferentes – dois para cada canto.

A regra é a seguinte para todos os cantos:

1
2
3
4
5

div {
  border-radius: [valor horizontal] [valor vertical];
  -moz-border-radius: [valor horizontal] [valor vertical];
  -webkit-border-radius: [valor horizontal] [valor vertical];
}

Ou assim para um canto específico:

1
2
3
4
5

div {
  border-top-left-radius: [valor horizontal] [valor vertical];
  -moz-border-radius-topleft: [valor horizontal] [valor vertical];
  -webkit-border-top-left-radius: [valor horizontal] [valor vertical];
}

Como Usar

Usando valores iguais em todos os cantos:

1
2
3
4
5
6

div {
  border: 2px solid #ccc;
  border-radius: 80px 40px;
  -moz-border-radius: 80px 40px;
  -webkit-border-radius: 80px 40px;
}

Exemplo

Este é o resultado do código acima:

Não se esqueça de consultar os meus outros artigos sobre as ‘Regras CSS 3′:

1. A Regra ‘Border Colors’ em CSS 3
2. A Regra ‘Border Image’ em CSS 3
3. A Regra ‘Border Radius’ em CSS 3

Este é o segundo artigo da série de artigos que estou a escrever sobre ‘Regras em CSS 3′, e é mais uma vez sobre como estilizar bordas através do uso de CSS 3. Mas desta vez, vamos ver como podemos estilizar bordas através do uso de uma imagem, em vez de cores.

É verdade!… O CSS 3 permite-nos usar uma imagem em vez de vários pixeis coloridos (assumindo que uma imagem não é um conjunto de vários pixeis coloridos!) para estilizar bordas. Assim é possível criar bordas de objectos exactamente como pretendemos que elas fiquem.

Para o Mozilla Firefox e para os navegadores baseados no Webkit como o Safari e o Google Chrome, a declaração CSS é algo deste tipo:

1
2
3
4

div {
  -moz-border-image:url(border.png) 30 30 30 30 repeat;
  -webkit-border-image:url(border.png) 30 30 30 30 repeat;
}

Abaixo pode verificar o que cada um daqueles valores está a definir (da esquerda para a direita):

• url(border.png) é o atalho no servidor para a imagem que queremos usar para estilizar a borda;
• 30 é a distância do corte desde o topo da imagem;
• 30 é a distância do corte desde a margem direita da imagem;
• 30 é a distância do corte desde a margem inferior da imagem;
• 30 é a distância do corte desde a margem esquerda da imagem;
• round é o tipo.

Nota: A distância do corte pode ser declarada em pixeis ou em valores de percentagem. Se usar percentagem, terá que colocar obrigatoriamente o símbolo ‘%’ depois do valor. Se usar pixeis, não deve colocar nada a seguir ao valor.
Nota 2: O tipo da imagem da borda pode ser ‘repeat’, ’round’ or ‘stretch’.

Tabela de Compatibilidade

4	5	3	3.6	10	10.5	4	7	8	9

Como Usar

Fiz uma pequena imagem para usar nas demonstrações abaixo. Vou usar a mesma imagem em ambos os exemplos.

Usando o tipo ‘Stretch’

1
2
3
4
5
6
7

div {
	border-width:16px;
	-moz-border-image:url(border-image.png) 16 16 16 16 stretch;
	-webkit-border-image:url(border-image.png) 16 16 16 16 stretch;
	width:380px;
	height:150px;
}

Usando o tipo ‘Repeat’

1
2
3
4
5
6
7

div {
	border-width:16px;
	-moz-border-image:url(border-image.png) 16 16 16 16 repeat;
	-webkit-border-image:url(border-image.png) 16 16 16 16 repeat;
	width:380px;
	height:150px;
}

Exemplo

Isto é o que o primeiro código acima, usando ‘Stretch’, faz.

Isto é o que o primeiro código acima, usando ‘Repeat’, faz.

Não se esqueça de consultar os meus outros artigos sobre ‘Regras em CSS 3′:

1. A Regra ‘Border Colors’ em CSS 3
2. A Regra ‘Border Image’ em CSS 3

• The CSS 3 ‘Border Image’ Rule (EN Version)

Um dos aspectos a que se deve dar muita atenção quando se coloca um website, ou qualquer outra aplicação, online é a velocidade a que ela carrega no browser do utilizador. Ninguém gosta de esperar séculos até que uma página seja aberta.

Uma maneira de se conseguir isto é optimizando o tamanho em bits das imagens que vão ser descarregadas pelo utilizador. Aliás, como sabe, as imagens são, por norma, os ficheiros mais exigentes de uma página web.

Há uns meses atrás encontrei o Yahoo Smush.it – uma ferramenta web incrível que lhe permite reduzir o tamanho (refiro-me a bits, não a dimensões físicas) das suas imagens. O Smush.it é uma ferramenta que não altera a qualidade das suas imagens. Quer isto dizer que pode optimizá-las para a web sem perder o seu aspecto ou qualidade visual.

O Smush.it é muito fácil de usar. Tudo o que tem de fazer é escolher a imagem ou imagens que pretende optimizar e descarregar as versões já optimizadas das mesmas. Pode fazê-lo usando um dos dois métodos disponíveis:

• pode fazer o upload das imagens a partir da sua máquina, ou
• pode digitar uma lista de endereços web (URLs) com a localização online das suas imagens.

Pode optimizar vários formatos de imagem – JPG, GIF e PNG – que tenham até 1MB de tamanho. Pode acontecer que, ao processar uma imagem no formato GIF, o Smush.it a converta para PNG. Esta ferramenta só o faz quando a imagem resultante é mais pequena em PNG do que em GIF. A maioria das imagens no formato GIF pode ser mais pequena se, em vez de GIF, usar o formato PNG-8 (PNG com 8 bits por pixel).

A título de exemplo, guardei os screenshots da optimização das imagens do meu post anterior – Geradores de Imagens Online.

Pode ver como eu economizei 47.28 KB ou 19.43%. Isto até pode nem parecer muito mas imagine que tem 1000 visitantes a descarregar estas imagens todos os dias.

Optimizar as suas imagens para a web tem três grandes vantagens:

• Oferece uma melhor experiência aos seus utilizadores porque lhes permite navegar no seu website mais rapidamente;
• Permite que o seu website tenha melhor rank nos motores de busca porque, pelo menos o Google, penaliza os websites lentos;
• Ganha no espaço em disco e na largura de banda dispendida.

Sobre as desvantagens, só me lembro de uma:

• ‘Perde’ mais cerca de 45 segundos sempre que quiser escrever um post com imagens optimizadas.

• Image Optimization for the Web (EN Version)

Deixe-me adivinhar! Precisa de uma imagem de fundo engraçada para o seu website, blog, página do Facebook ou do Twitter mas não sabe como criar uma.

Há uns anos atrás isso podia ser um problema, mas já não é. Hoje há vários geradores de imagens que lhe permitem, de um modo muito simples, criar imagens de fundo como um profissional. Pode criar uma imagem à sua medida e, no fim, só precisa de a descarregar e usá-la onde e como quiser. Pode usar estas imagens para o efeito que bem entender – como imagens de fundo, botões, imagens para o cabeçalho do seu blog, etc.

Abaixo encontra alguns exemplos:

BgPatterns

O BgPatterns permite-lhe criar agradáveis imagens de fundo, através do uso de espectaculares modelos, em quatro simples passos.

1. Cores
   • Seleccione a cor do modelo que escolherá a seguir
   • Seleccione a cor de fundo da imagem global
2. Textura
   • Seleccione uma textura da lista de texturas disponíveis
   • Seleccione a escala da textura
   • Seleccione o nível de opacidade da textura
3. Imagem
   • Escolha um modelo da grande lista de modelos disponíveis
   • Escale o tamanho do seu modelo até ficar ao seu gosto
   • Escolha a posição preferida para o modelo
   • Finalmente, controle o seu nível de opacidade
4. Rotação
   • Use os ângulos pré-definidos para rodar o modelo que escolheu
   • Ou insira o ângulo exacto que pretende

A qualquer altura pode clicar em “Apply background” para ver, em tempo real, como é que a sua imagem está a ficar.
Quando estiver satisfeito basta clicar em “Download Image”.

Stripe Generator 2.0

Ao contrário do que acontece ao criar imagens com o BgPatterns, no Stripe Generator não escolhe nenhum modelo nem nenhum outro tipo de imagens para criar a sua imagem de fundo. É tudo feito com riscas. Parece lamechas? Não é. Acredite que, se estiver verdadeiramente inspirado, pode gerar todo o tipo de imagens de fundo malucas.

Esta excelente plataforma é tão fácil de usar como a que eu referi antes e, ainda por cima, tem todas as definições numa só página.

• Escolha o tamanho da risca
• Controle o espaçamento entre riscas
• Escolha a cor da risca, o estilo do fundo e a sombra
• Seleccione uma cor de fundo para a imagem
• Escolha o ângulo ou orientação da sombra

A qualquer momento, pode pré-visualizar o progresso da sua imagem. Quando acabar de a gerar, basta que clique no botão de download.

Mas há mais. Se criar uma conta gratuita, as imagens que gerar ficarão guardadas, à sua espera, para o caso de alguma vez precisar de as recuperar.

Dotter

Tudo bem, não gosta dos modelos do BgPatterns e riscas também não fazem o seu estilo. E que tal pontos?

Se conseguir encontrar um gerador de imagens de fundo mais fácil de usar do que o Dotter, ofereço-lhe uma imagen de fundo, completamente branca, de borla.

Para gerar uma imagem de fundo com o Dotter basta definir 5 variáveis:

• 2 cores para os pontos (se quiser que todos os pontos tenham a mesma cor, basta dar a mesma cor aos dois)
• 2 cores para o fundo (se definir duas cores diferentes para o fundo, este ficará com um efeito degradé)
• o tamanho da imagem

Clique em “Ok” e a sua imagem será a mesma que aparece como imagem de fundo na plataforma. Para descarregar a imagem terá que ir ver o código fonte da página para saber qual o seu endereço e a poder descarregar. Por incrível que pareça, esta foi a única solução que eu encontrei para descarregar a imagem que criei.

Gradient Image Maker

Se conseguiu chegar até aqui, provavelmente não gostou de nenhuma das soluções que apresentei acima para criar imagens de fundo. Felizmente, há outras opções. Pode usar, por exemplo, uma imagem com degradé.

O Gradient Image Maker, da Dynamic Drive, permite-lhe criar imagens com gradientes gratuitamente, que pode usar onde quiser. Criar uma imagem com gradiente online não podia ser mais fácil.

• Escolha o tipo de gradiente que prefere, de entre as três soluções disponíveis: horizontal, vertical e obliquo
• Configure o comprimento e largura da imagem que pretende
• Seleccione a cor de cima e a cor de baixo
• Escolha entre descarregar a imagem com o formato JPEG ou PNG.

Mais simples e rápido do que isto é impossível!

Outros Geradores de Imagens de Fundo

• PatternCooler
• Patterns (por COLOURlovers)
• Stripemania
• Striped Backgrounds
• Tartan Maker
• Online Gradient Image Maker
• Gradient Maker (por secretGeek)
• Background Image Maker (por rails2u)
• bgMaker (por Ventd’Aval)

• Online Background Image Generators (EN Version)

CSS 3 é a mais recente versão do CSS e trouxe-nos a nós, web developers, muitas funcionalidades novas. Infelizmente alguns navegadores de Internet ainda não a interpretam completamente e outros (sim, refiro-me ao Internet Explorer) nem um só bocadinho.

No entanto, o CSS 3 não só é o futuro mas já é, também, uma grande parte do presente. É por isso que eu decidi escrever sobre uma nova regra de CSS – Border Colors (repare no ‘s’ em ‘colors’).

A regra ‘Border Colors’ permite-nos definir mais do que uma cor para as bordas dos objectos HTML. Com esta regra, é possível ter tantas cores como o número de pixeis da largura da borda. Quer isto dizer que, se tivermos uma borda de 3 pixeis, podemos ter 3 cores diferentes nessa borda. Se, por alguma razão, decidirmos definir apenas duas cores, a última cor irá estar presente nos restantes pixeis dessa mesma borda.

Tabela de Compatibilidade

4	5	3	3.6	10	10.5	4	7	8	9

Como Usar

1
2
3
4
5
6
7

div {
	border: 6px solid #ccc;
	-moz-border-bottom-colors: #aaa #bbb #ccc #ddd;
	-moz-border-top-colors: #aaa #bbb #ccc #ddd;
	-moz-border-left-colors: #aaa #bbb #ccc #ddd;
	-moz-border-right-colors: #aaa #bbb #ccc #ddd;
}

Exemplo

O código acima faz o seguinte:

Abaixo está um canto ampliado do objecto mostrado acima. Note que a cor #ddd está presente em 3 pixeis porque definimos apenas 4 cores para uma borda de 6 pixeis.

• The CSS 3 ‘Border Colors’ Rule (EN Version)

Há muitos serviços de alojamento online gratuito de websites. Mas na sua grande maioria são pouco fiáveis, lentos, têm poucas funcionalidades e, por vezes, são até desonestos. No entanto ainda é possível alojar um website numa plataforma de alojamento online gratuito, desde que se escolha a ideal de acordo com o que precisamos.

Há uns meses atrás, fiz uma pequena pesquisa para um outro website meu – Free Web Hosts – e cheguei a uma pequena lista de serviços de alojamento online gratuito que gostava de partilhar com os meus leitores.

• The Best 5 Free Web Hosting Services (EN Version)

Vou dar um exemplo neste post e quatro exemplos na demonstração, mas o número de diferentes alternativas que se pode tirar destes exemplos é ilimitado.

O que eu vou fazer é, basicamente, estilizar um DIV com CSS, com uma imagem de fundo à esquerda, uma cor de fundo, e uma borda no topo e no fundo da caixa, para a tornar mais atraente. Esta solução funciona em todos os navegadores de Internet (Sim… até no Internet Explorer!), por isso pode usá-la em qualquer lado.

O xHTML é muito simples e consiste apenas num DIV, com uma classe atribuída e algum texto:

1
2
3

<div class="info">
	Isto é um div com a classe <em>info</em>.
</div>

O CSS também é muito simples – nem sequer uso CSS 3 – e qualquer pessoa com conhecimentos básicos de CSS sabe perfeitamente o que este código faz.

1
2
3
4
5
6
7
8

.info {
	width: 90%; /* Só porque eu acho que fica bem */
	margin: 10px auto; /* Só porque eu quero */
	padding: 15px 10px 15px 50px; /* Para afastar o texto das bordas e da imagem à esquerda */
	border-top: 1px solid #A7C1DF; /* A espessura, tipo e cor da borda superior */
	border-bottom: 1px solid #A7C1DF; /* A espessura, tipo e cor da borda inferior */
	background: #DFEEFF url('img/info.png') 10px center no-repeat; /* Da esquerda para a direita: cor de fundo, imagem de fundo, posição horizontal, posição vertical e repetição da imagem de fundo */
}

• Demo: css-information-and-error-messages.html
• Descarregar os ficheiros da demonstração

• CSS Information and Error Messages (EN Version)

Já concluí a migração do meu blog de Joomla 1.5 para o WordPress 3. Bem… não foi exactamente uma migração visto que tudo o que eu fiz foi refazer o meu template e copiar algumas das entradas que eu tinha na minha instalação anterior.

Não houve nenhuma razão determinante para fazer esta mudança de plataformas – eu continuo a gostar do Joomla. Mas houve, isso sim, algumas razões pouco relevantes para o fazer:

1. O Joomla mantém grandes problemas na criação de SEF URLs (mesmo usando extenções). Com extenções, os URLs até podem ficar “amigos dos motores de busca” mas nunca chegam a ficar “amigos do gestor do website”. Os SEF URLs no WordPress funcionam impecavelmente.
2. O Joomla está a caminho da sua versão 1.6 e, tal como aconteceu na passagem da versão 1.1 para a 1.5, eu ia ter que re-escrever o meu template. Com o WordPress as diferenças na estrutura dos temas de versão para versão não costumam ser tão drásticas.
3. Embora mais exigente nos conhecimentos de linguagens web por parte dos utilizadores, o WordPress é mais leve e, aparentemente, mais rápido.
4. Eu queria aprender mais sobre o WordPress e, a melhor maneira de o fazer, era ter um blog a correr na plataforma.

Continuo muito ansioso pelo lançamento da versão 1.6 final do Joomla. Vou, de certeza, experimentá-la. Mas, para já, o meu blog vai continuar a ser Powered by WordPress.

• From Joomla to WordPress (EN Version)

Criei uma pequena lista dos melhores e mais populares editores de texto gratuitos. Pode encontrá-la abaixo.

Notepad++ (Notepad Plus Plus)

O Notepad++ é um editor de código fonte e um excelente substituto do NotePad do Windows, gratuito e lançado com a licensa GPL, que suporta imensas linguagens. Baseado no Scintilla, um poderoso componente de edição, o Notepad++ foi escrito em C++ e usa a API Win32 e STL que assegura maior velocidade de execução e compressão.

Algumas das suas funcionalidades são: syntax highlighting e syntax folding, WYSIWYG, syntax highlighting definida pelo utilizador, documentos múltiplos, vistas múltiplas, procura e substituição de expressões regulares, drag and drop completo, posição dinâmica das vistas, auto-detecção do estado do ficheiro, mais zoom e menos zoom, ambiente multi-linguagem, gravação e playback de macros, e muito mais.

• Página do Notepadd++
• Descarregar o Notepadd++

PSPad

O PSPad é um editor gratuito para programadores que corre no Microsoft Windows.

Entre outras funcionalidades este permite-lhe: trabalhar com vários documentos ao mesmo tempo (MDI), gravar sessões no ambiente de trabalho e mais tarde reabrir todas as sessões gravadas, editar ficheiros directamente da web (cliente FTP), gravar e correr macros, pesquisar e substituir em ficheiros, texto colorido de acordo com a linguagem de programação, usar templates (tags HTML, scripts, templates de código…), syntax highlighting de acordo com o tipo de ficheiro, usar corrector ortográfico, e muito mais.

• Página do PSPad
• Descarregar o PSPad

Crimson Editor

O Crimson Editor é um editor profissional de código fonte para Windows. Este programa não só é muito rápido a carregar, mas é também pequeno em tamanho. Para além de servir de substituto para o Notepad, também oferece muitas e poderosas funcionalidades para linguagens de programação como o HTML, C/C++, Perl e Java.

Se usar este software pode contar com as seguintes funcionalidades: edição de documentos múltiplos, syntax highlighting, undo/redo de vários níveis, janela com vista de directorias em árvore, procurar e substituir, edição em modo de colunas, mudança de linhas natural, corrector ortográfico, macros, edição remota de ficheiros através do uso de um cliente FTP, imprimir e muito mais.

• Página do Crimson Editor
• Descarregar o Crimson Editor

EditPad Lite

O EditPad Lite é um editor de texto desenhado para ser pequeno e compacto, mas que oferece todas as funcionalidades esperadas de um editor de texto básico. O EditPad Lite corre em Windows NT4, 98, 2000, ME, XP, Vista e Windows 7. O EditPad Lite é gratuito para uso pessoal.

O EditPad Lite oferece algumas funcionalidades interessantes como: pode abrir vários ficheiros de texto ao mesmo tempo, pode alternar pelos diferentes ficheiros clicando nos respectivos separadores, undo/redo ilimitados, pode editar ficheiros de texto Unicode directamente, guardar partes do texto para o disco e inserir ficheiros de texto dentro do ficheiro actual, especificar várias definições de impressão: tipo de letra, margens, cabeçalhos/rodapés, etc. e ver imediatamente os efeitos na pré-visualização da impressão, pode manter a janela do EditPad em cima das outras todas, abrir um menu que lista os últimos 16 ficheiros usados, etc.

• Página do EditPad Lite
• Descarregar o EditPad Lite

TotalEdit

Um potente editor de texto e uma excelente alternativa ao NotePad do Windows, o TotalEdit torna simples as tarefas de desenvolvimento de software. O TotalEdit é gratuito tanto para uso pessoal como para uso comercial. O TotalEdit oferece uma grande variedade de funcionalidades e ferramentas que podem ser configuradas de maneira a o utilizador trabalhar como se sente mais confortável.

Algumas das suas funcionalidades são: edição de ficheiros e ferramentas, explorador incorporado, explorador de projectos, costumização e configuração, pesquisa e substituição, macros, impressão e pré-visualização, backup e comparação de versões, formatação, corrector ortográfico, formatação das cores de acordo com a sintaxe, edição por colunas, e muito mais.

• Página do TotalEdit
• Descarregar o TotalEdit

TextPad

Quer necessite de uma poderosa alternativa ao Notepad, uma ferramenta para editar as suas páginas web, ou um IDE de programação, o TextPad faz o que precisa, da maneira que pretende. É fácil de usar e tem todas as funcionalidades que um utilizador exigente necessita. O TextPad está traduzido para Holandês, Inglês, Francês, Alemão, Italiano, Japonês, Polaco, Português do Brasil e Espanhol.

Algumas das suas funcionalidades são: edição de ficheiros muito grandes, suporte para nomes de estilos em formato UNC (Universal Naming Convention), suporte para nomes de ficheiros com espaços, interface do utilizador em Holandês, Inglês, Francês, Alemão, Italiano, Japonês, Polaco, Português do Brasil e Espanhol, um corrector ortográfico com dicionários em 10 idiomas, edição simultânea de vários ficheiros, 2 vistas por ficheiro, o texto seleccionado pode ser indentado em bloco, mudanças de linha automáticas à margem ou a uma coluna especificada se o texto não couber na linha, etc.

• Página do TextPad
• Descarregar o TextPad

Araneae

Não deixe que as suas ferramentas de desenvolvimento web tomem conta do seu projecto. Ganhe controle sobre o seu código. O Araneae é um simples mas poderoso editor de texto, que lhe oferece as funcionalidades necessárias para criar websites e scripts com o uso das mais recentes tecnologias. O melhor de tudo é que o Araneae é gratuito para uso pessoal. Use-o sempre que quiser para projectos pessoais.

Funcionalidades: syntax highlighting, suporte para HTML, XHTML, CSS, JavaScript, PHP, Ruby, e mais, pré-visualização instantânea no navegador mesmo sem gravar, permite ter várias documentos abertos ao mesmo tempo, suporte para arrastamento de texto e imagens, e muito mais.

• Página do Araneae
• Descarregar o Araneae

• The Best Free Text Editors (EN Version)

Aqui estava eu a pensar em finalmente colocar um novo artigo no meu blog. Tenho estado a trabalhar num tutorial sobre xHTML/CSS mas está longe de estar acabado. Por isso, decidi fazer um novo template, sem tabelas, em xHTML e CSS. Desta vez fiz um com três colunas, para dar mais espaço para os conteúdos e melhor arrumação.

O Deep Blue é um template com 3 colunas, que não usa tabelas na sua estrutura, e que é todo estilizado em CSS. Estou a disponibilizá-lo a todos os meus leitores gratuitamente. Este template tem os seguintes “blocos”:

• Menu superior
• Cabeçalho (para o logótipo)
• Coluna principal
• Coluna central (para os links – menus, ligações para outros websites, etc.)
• Coluna à direita (para outros conteúdos – anúncios, publicidade, etc.)
• Rodapé

Optei por fazer duas versões do mesmo template: A versão em xHTML/CSS tradicional e a versão compatível com o CushyCMS. Pode descarregá-los e usá-los gratuitamente. Pode fazer todas as alterações que quiser, desde que não o venda.

Versão Tradicional (xHTML/CSS):

• Demo: demos/templates/deep-blue/
• Download: Deep Blue

CushyCMS Version:

• Download: Deep Blue para CushyCMS

• Deep Blue – Free Three Columns Template (EN version)

Como é óbvio, não faz tudo sozinho. É preciso que tenha um servidor web, que permita o acesso FTP, coisa que hoje em dia é muito fácil de encontrar – até gratuitamente. Dois exemplo de pltaformas de alojamento online gratuito que oferecem acesso FTP são o AwardSpace.com e o 000webhost.com. Pode encontrar mais no meu website Free Web Hosts.

Também precisa de ter um template. Se não sabe HTML pode descarregar um dos milhares de templates disponíveis gratuitamente na Web. Basta procurar no Google por “free html templates” ou “free css templates”.

Depois disto, basta que configure a área de administração do CushyCMS e que ponha as tags necessárias no template que escolheu. Pode e deve dar uma vista de olhos à documentação deles. É tão fácil de usar que não vai precisar de mais do que 10 minutos para perceber como funciona.

O seu website pode ter inúmeras páginas, pode enviar imagens e todo o tipo de ficheiros, adicionar amigos, membros da sua família ou clientes para editar o seu website, e muito mais.

• CushyCMS – Anyone can be a webmaster (EN version)

Apesar de, nestes últimos meses, ter actividades tanto no departamento de Information Technologies como no departamento de Marketing and Communications da empresa onde exerço funções, fui recentemente desafiado a dividir um bocado do meu tempo para o departamento de Recursos Humanos.

Uma das tarefas que me foram incumbidas, foi a criação e edição de tutoriais em vídeo para consumo interno. Estes vídeos devem ter tanto as sessões filmadas em formações e workshops realizados na empresa, como os ficheiros Powerpoint usados pelos formadores nessas sessões. Preciso de poder usar algumas funcionalidades que me permitam mostrar o slide num canto do vídeo, enquanto se vê o formador a dar a formação ao mesmo tempo, e outras.

O primeiro obstáculo que me surgiu foi sobre que software utilizar. Eu nunca tinha feito nada deste tipo e não conhecia nenhum software para edição de vídeo.

Depois de fazer algumas perguntas, foi-me aconselhado usar o Microsoft Movie Maker 2 – “É gratuito e fácil de utilizar!” – disseram eles.
Tinham razão!… É gratuito e muito fácil de usar. Mas, ao mesmo tempo, é bastante básico e com poucas funcionalidades de edição.

De qualquer das maneiras, para quem precisa de fazer edições básicas de vídeo e não precisa de funcionalidades muito avançadas, encontrei uns excelentes tutoriais em vídeo, que o tornarão num expert a usar o Movie Maker em pouco tempo. Aceda ao Atomic Learning Movie Maker 2 video tutorial gratuito. Este tutorial ajudou-me bastante.

P.S. – Acabei por ficar na posição em que agora me encontro – a preparar-me para a dura tarefa de ter que aprender Adobe Premiere CS4 em um ou dois dias.

• Free Windows Movie Maker 2 Video Tutorial (EN version)

Se for como eu, há alguns códigos hexadecimais de cores que conhece de cor. No entanto, a maior parte deles é difícil de decorar e temos que recorrer constantemente a uma palete de cores para vermos o código da cor que pretendemos. Se, eventualmente, não precisar de usar cores raras, tem aqui uma solução que torna a memorização das cores em CSS muito mais simples.

Sabia que pode usar o nome das cores em CSS? E sabia que a lista disponível de nomes de cores é francamente extensa?

Dê uma vista de olhos a esta lista e, se for caso disso, adicione esta página aos favoritos para recorrer a ela sempre que precisar.

• Color Names in CSS (EN version)

Não há nada mais rápido do que a barra de favoritos do seu browser mas há, pelo menos, uma solução tão rápida e bastante mais versátil – uma página web, alojada localmente (no seu computador) com a colecção dos websites visitados mais regularmente.

Há alguns meses criei uma e tenho-a usado como página de abertura do browser. Viciei-me de tal maneira nela, que decidi partilhá-la. Ofereço-a com a licensa GPLv2 que lhe permite fazer o que quiser com ela.

• Demo: demos/templates/startpage-template/
• Descarregar: Página de Abertura

Já abaixo pode ver como a utilizar, mas note que deverá ter conhecimentos básicos de HTML e saber como redimensionar e cortar imagens. Por favor use os comentários do post para o caso de precisar de ajuda com alguma costumização.

1. Descarregar a Página de Abertura.
2. Extrair os conteúdos do ficheiro ZIP para uma pasta à sua escolha.
3. Editar o ficheiro ‘index.html’ e adicionar os links e imagens para os websites que visita mais frequentemente. Já que está a editar o HTML, aproveite e edite também o rodapé de modo a inserir o seu nome.
4. Abra o ficheiro ‘index.html’ no seu browser favorito e copie o endereço que se encontra na barra de endereços do mesmo.
5. Cole o endereço no campo que se encontra nas opções do browser para definir a página de abertura.
6. Está feito!

• A Cool Start Page (EN version)

Pode usar CSS para atribuir níveis de opacidade a objectos, de maneira a funcionar em todos os browsers.

A maior parte dos browsers modernos (excluindo, claro, o Internet Explorer) já interpretam CSS 3 para a opacidade. Por isso, para a grande maioria dos browsers modernos, basta usar esta linha de código para dar 60% de opacidade a um determinado objecto:

1

opacity: 0.6;

Para browsers Mozilla mais antigos, como o Netscape Navigator, use esta instrução:

1

-moz-opacity: 0.6;

Para versões mais antigas do Safari, terá que usar esta instrução:

1

-khtml-opacity: 0.6;

Por incrivel que pareça, para o recentemente surgido no mercado Internet Explorer 8, é necessário uma instrução específica:

1

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

Para versões mais antigas do Internet Explorer (IE5 até ao IE7) e para o Internet Explorer 8 a emular as páginas em IE7, use o seguinte:

1

filter: alpha(opacity=60);

Assim, se usando CSS quisermos dar 60% de opacidade, por exemplo a uma imagem, que tenha a classe ‘transparente’, temos que fazer o seguinte:

1
2
3
4
5
6
7

image.transparente {
   opacity: 0.6;
   -moz-opacity: 0.6;
   -khtml-opacity: 0.6;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
   filter: alpha(opacity=60);
}

• Opacity Using CSS in all Browsers (EN version)

O Google tem uma plataforma online gratuita – Google Webmasters Tools – que nos permite, a nós webmasters, registar um website e submeter o seu sitemap. O website será indexado por este motor de busca após umas semanas e, nessa altura, começaremos a receber algumas estatísticas relevantes. Com sorte, visitantes também.

Mas, antes de submetermos um sitemap para o Google, temos que criar um. Esta é a melhor maneira de dizermos ao Google quantos e quais os URLs que queremos que sejam adicionados na sua base de dados. Para isto, vou usar outra fabulosa ferramenta online chamada Google Sitemap Generator. É muito fácil de usar e muito eficaz.

Se tivermos um website dinâmico, provavelmente vamos ver URLs que nem sabíamos que existiam. Todas as explicações sobre como usar a ferramenta estão explícitas, por isso não será muito difícil criar um sitemap em poucos minutos.

Depois de descarregarmos o sitemap, convém renomeá-lo para “sitemap.xml” e enviá-lo para o nosso servidor. Deve ser colocado na pasta raíz do website. Depois disto, basta irmos ao Google Webmasters Tools e submeter o mapa do sítio. O Google vai descarregá-lo e analizá-lo mas pode ser preciso esperar algumas horas até termos a confirmação de que o estado do mapa do sítio está OK.

Está feito! Agora, tudo o que temos que fazer é esperar e irmos actualizando o nosso sitemap de vez em quando, para avisarmos o Google sobre novos URLs.

• Submitting my Website to Google (EN version)

“Bubbles” é um template ou tema que decidi licensiar com a GPL v2. É um template com o qual podes fazer o que quiseres. Podes descarregá-lo, modificá-lo, o que quiseres. Foi estruturado em xHTML e estilizado em CSS. Valida com sucesso em XHTML 1.0 Transitional. Não tem tabelas e tem só uma coluna onde podes encontrar quatro blocos: um cabeçalho, um menu superior, a área de conteúdos e um rodapé.

• Demo: demos/templates/bubbles/
• Descarregar: Bubbles

• Bubbles – Free, One Column, CSS Template (EN version)