Leonardo Caineli Web Designer e Programador de Interfaces

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:

Caroline Sanchez

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