Leonardo Caineli Web Designer e Programador de Interfaces

@font-face – Tipografia livre

A propriedade @font-face possibilita aos browsers renderizar fontes que não estão instaladas no computador do usuário. Exemplo:

@font-face{
	font-family:'Comic Book';
	src:local('Comic Book'),url('Comic Book.ttf') format('TrueType');
}
p{font-family:'Comic Book',arial,helvetica,sans-serif}

Valores:

• O valor “local” informa se a fonte já existe no sistema operacional do usuário antes de ser instalada
• O valor “url” informa o caminho da fonte que será instalada
• O valor “format” informa qual é o formato da fonte que será instalada

Formatos:

Os formatos aceitos pelos browsers são:

• Embedded OpenType – .eot
• OpenType – .otf
• Scalable Vector Graphics – .svg e .svgz (formato .svg “gzipado”)
• TrueType – .ttf

O Internet Explorer suporta apenas o formato Embedded OpenType (.eot), portanto deverão ser declarados dois formatos, sendo um exclusivo para as versões do Internet Explorer (.eot) e/ou outro(s) para os demais browsers (.otf, .svg, .svgz e .ttf). Exemplo:

@font-face{
	font-family:'Comic Book';
	src:url('Comic Book.eot'); /* IE */
	src:local('Comic Book'),url('Comic Book.ttf') format('TrueType'); /* DEMAIS BROWSERS */
}
p{font-family:'Comic Book',arial,helvetica,sans-serif}

Exemplo declarando outros formatos:

@font-face{
	font-family:'Comic Book';
	src:url('Comic Book.eot'); /* IE */
	src:local('Comic Book'),
	    url('Comic Book.otf') format('OpenType');
	    url('Comic Book.svg') format('Scalable Vector Graphics');
	    url('Comic Book.svgz') format('Scalable Vector Graphics');
	    url('Comic Book.ttf') format('TrueType')
}
p{font-family:'Comic Book',arial,helvetica,sans-serif}

Compatibilidade:

A propriedade @font-face é compatível com os principais sistemas operacionais e browsers (inclusive o Internet Explorer 6):

• Linux – Chrome e Firefox
• Mac OS – Chrome, Firefox, Opera e Safari
• Windows – Internet Explorer 6, 7, 8 e 9, Chrome, Firefox, Opera e Safari

Talvez ajude…

• @font-face Generator – Gerar fontes para outros formatos
• Free Font Converter – Converter fontes para outros formatos

Instalando o WordPress MU no XAMPP

O objetivo desse pequeno tutorial é preparar seu servidor local (localhost) para a instalação do WordPress MU no XAMPP (para Windows).

Faça o download do XAMPP (para Windows), instale e inicie o Apache e o MySql. Faça o download do WordPress MU e descompacte a pasta “wordpress-mu” no diretório “c:\xampp\htdocs\”.

Abra o diretório “c:\windows\system32\drivers\etc\”, edite o arquivo “hosts” no bloco de notas e adicione a linha “127.0.0.1 localhost.localdomain” no final do arquivo. Abra o navegador e digite “http://localhost.localdomain/wordpress-mu/” na barra de endereços. Com o WordPress MU rodando no seu servidor local, é só preencher os dados necessários para finalizar a instalação.

WP AntiVirus – Antivírus para WordPress

O plugin WP AntiVirus protege seu WordPress contra vírus, worms e malwares, monitorando todos os arquivos da instalação contra injeções maliciosas e possíveis ataques.

Após fazer o download e copiar os arquivos para o diretório “/wp-content/plugins/”, basta ativar (wp-admin > plugins > ativar) e configurar (wp-admin > configurações > antivirus) qual será o tipo de escaneamento desejado (diário ou manual). Caso algum código malicioso seja encontrado, o plugin notifica o arquivo e a linha da possível abertura.

Firefox vs. Internet Explorer

O site StatCounter Global Stats publicou recentemente uma pesquisa informando que no mês de fevereiro, pela primeira vez, o Firefox 3 superou o Internet Explorer 6 em número de usuários.

Infelizmente o Internet Explorer 7 ainda lidera a maior fatia do mercado, com 35% dos usuários, o Firefox 3 ocupa a segunda posição, com 26% dos usuários. Juntos, IE6, IE7 e IE8 dominam aproximadamente 61% do mercado, enquanto o FF2 e FF3, 30%.

HTML 5

A W3C publicou os primeiros rascunhos do novo HTML 5 (juntamente com seu validador). Foi criado um grupo de aproximadamente 500 participantes intitulado WHATWG (Web Hypertext Application Technology Working Group), que inclui representantes da AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera e membros da própria W3C.

A versão 5 traz muitas novidades em comparação à atual 4.01 (que não é atualizada desde 1999), uma das novidades mais interessantes é a utilização de tags específicas, visando padronizar a criação da estrutura dos sites, por exemplo:

Atual estrutura usando HTML 4.01:

<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="footer"></div>

Nova estrutura usando HTML 5:

<header></header>
<nav></nav>
<article></article>
<footer></footer>

Também será possível substituir algumas funções realizadas com o auxílio de Ajax por código HTML, criar bancos de dados locais para facilitar o acesso local às informações, entre outras novidades. O HTML 5 continuará mantendo uma especificação aberta, livre de royalities para os usuários e, de acordo com o roadmap oficial, deverá ser aprovado em meados de 2012.

Drop Caps com CSS

As Drop Caps (letras capitulares) são muito utilizadas em jornais e livros, deixando a primeira letra do parágrafo destacada em comparação às demais.

XHTML:

Criamos um simples parágrafo:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis sem non magna [...]</p>

CSS:

Usamos o pseudo-seletor “first-letter” no “p” para definirmos a formatação da primeira letra do parágrafo:

p:first-letter {float:left;margin-right:5px;font:bold 60px/60px arial}

Resultado:

É importante saber que:

No CSS deve haver um espaço entre o pseudo-seletor “first-letter” e a abertura da “{“, caso contrário o efeito não funcionará no IE6 (é mole?).

Empório Roots

Site do empório Empório Roots. Logo, Layout, Tableless e PHP/MySQL.

Typechart – Tipografia Web

O site Typechart é um serviço online que permite visualizar e comparar diferentes tipografias Web (dentre elas o tipo da fonte, tamanho e formatação), gerando o código CSS para aplicação.

Uma das características mais interessantes do serviço é poder comparar a renderização das fontes tanto na plataforma Windows (ClearType) quanto na Mac. O ponto negativo fica por conta do CSS não ser gerado utilizando a declaração única.

Casa de Saron

Site do empório Casa de Saron. Logo, Layout, Tableless e PHP/MySQL.

Borda interna nas imagens com CSS

O efeito de borda interna nas imagens é muito utilizado pelo portal Globo.com. Neste post vou mostrar como é simples aplicar esse efeito em suas imagens usando poucas linhas de CSS.

XHTML:

Montamos uma lista inserindo um link para cada imagem:

<ul>
	<li><a href="#" title="Aspira Soldier"><img src="imagem.gif" alt="Aspira Soldier" /></a></li>
	<li><a href="#" title="Elite Soldier"><img src="imagem.gif" alt="Elite Soldier" /></a></li>
	<li><a href="#" title="Sniper Soldier"><img src="imagem.gif" alt="Sniper Soldier" /></a></li>
	<li><a href="#" title="Gas Soldier"><img src="imagem.gif" alt="Gas Soldier" /></a></li>
</ul>

CSS:

O uso do “overflow:hidden” é obrigatório para as imagens se manterem fixas. No “a:hover” definimos a espessura da borda e no “a:hover img” deslocamos negativamente as margens da imagem:

*{margin:0;padding:0;border:0;outline:0;list-style:none;text-decoration:none}
ul li{float:left;margin-right:5px}
ul li a,ul li a img{overflow:hidden;float:left}
ul li a:hover{border:5px solid #999}
ul li a:hover img{margin:-5px}

Resultado: