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.

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.

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%.

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.

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?).

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

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.

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

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:

Site da Assessora de Imprensa Caroline Sanchez. Logo, Layout, Tableless e WordPress.