Erika Heidi | Category Archive

Archive | Technical Stuff RSS feed for this section

Quero ter um site, e agora? – Criando um site/blog com o WordPress passo a passo

by erika on 31 de agosto de 2010 in Technical Stuff, WordPress

Muitas pessoas chegam até mim com essa pergunta comum: “como faço para ter um site” ?

Em virtude disso, resolvi sintetizar tudo que eu sempre explico em um único post, que serve para leigos totais no negócio da internet, ou para “semi leigos”, pessoas que usam a internet e de repente até já têm ou tiveram um blog gratuito, mas não sabem como proceder para ter um site “de verdade”, um blog profissional, ou um simples portfolio online, com endereço próprio.

Quanto Custa

Além do conteúdo e sistema do site em si (em breve falaremos sobre isso), você vai precisar basicamente de 2 coisas separadas, mas que “trabalham juntas”: um servidor de hospedagem e um domínio. São essas duas coisas que você vai de fato precisar pagar para ter o seu espaço.

Fazendo uma analogia à vida real, o servidor de hospedagem é um aluguel que você paga para morar numa casa e as pessoas poderem te visitar lá. O domínio é o endereço, essencial pra que as pessoas consigam chegar na sua casa.

O domínio é o nome, o endereço que identificará o seu site. Existem muitas extensões de domínios disponíveis, porém os mais comuns ainda são o .com.br, o .com e o .net . Para registrar esses domínios, não precisa ter cnpj (antigamente, para registrar um .com.br precisava ). Você pode registrar em qualquer entidade reconhecida como Registrar, mas no caso de domínios .com.br eu recomendo que registre diretamente no registro.br .

O pagamento de um domínio é ANUAL. O custo varia, cada extensão tem preços diferenciados. O .com.br custa 30 reais (no registro.br), e há muitos anos esse valor não sofre nenhuma alteração. Já os domínios .com e .net, por exemplo, variam muito de empresa pra empresa, mas você consegue encontrá-los por 15 reais ( redehost.com.br ) em alguns sites, enquanto que em outros você só encontra a 30 reais.

A hospedagem do site costuma ser mais cara (considerando uma anualidade), mas nada muito exagerado; você tem opções de pagar anualmente, mensalmente, por semestre ou trimestre, e por aí vai. O valor varia muito, pois depende das características do sevidor: espaço em disco, limite de transferência mensal, tecnologias disponíveis… Uma hospedagem básica, que suporte PHP e banco de dados MySQL (necessários para instalação do WordPress, que iremos ver neste artigo) pode custar a partir de R$ 5,00 mensais, uma pechincha não é verdade?

Ou seja: juntando o custo anual da hospedagem de um site básico, mais um domínio .com.br, sairia em torno de R$ 90,00 , o que dá R$ 7,50 por mês. Um valor módico comparado às possibilidades que você terá ao criar seu “espaço na internet” – um termo bem clichê, porém, que não deixa de ser verdadeiro. Pode inclusive sair mais barato, vale salientar. Essa conta aí é pra um caso comum, com domínio de 30 reais.

Agora você deve estar se perguntando: “afinal, por que é tão caro criar um site? Por que as empresas e profissionais cobram tanto?”

A resposta está na personalização, que gera um resultado profissional. Criar um site especificamente para sua empresa, com o layout direcionado para o seu conteúdo, sua marca, seus produtos etc – isso envolve a participação de profissionais capacitados que vão desenvolver um resultado único. Você não verá (pelo menos essa é a idéia!!!) layouts iguais ao seu em nenhum outro site, como acaba acontecendo quando usamos templates prontos. Você poderá cobrar modificações e suporte. Terá uma assistência, não estará à deriva na internet.

Além disso, no geral, quando você paga uma empresa ou profissional para desenvolver seu site, fica “livre” dessas burocracias de registro e do trabalho de instalação de sistemas.

Masssssssss, se a sua idéia é começar com um site básico ou blog, e gosta de resolver as coisas sozinho, sem abrir muito a carteira… O restante desse artigo é pra você Vamos ver como é o processo passo a passo para criação de um site usando WordPress como plataforma.

O WordPress é utilizado principalmente como blog, mas também pode ser personalizado para ter a aparência de um site empresarial. Para este artigo, vamos levar em consideração a criação de um Blog.

1. Registre o domínio desejado

Antes de registrar, escolha com carinho o nome! Ele será o seu endereço, então o ideal é que seja fácil de dizer, sem que você precise soletrar letra por letra quando falar para alguém. É melhor que seja um pouco maior e facilmente lembrável do que um conjunto de siglas que as pessoas não vão conseguir memorizar com facilidade (imagine-se naquela rodinha de amigos, e de repente quando tocarem no assunto, você for dar o endereço pra alguém! isso acontece sim). Você também poderá usar o domínio para seu e-mail, vale lembrar.

Hoje em dia não é tão fácil encontrar o domínio ideal, já que são tantos bilhões de sites por aí afora já com seus endereços registrados. Mas sempre tem algo legal disponível.

Se você for registrar no registro.br, deixe em branco os campos do DNS, pois você só terá essa informação depois de contratar o servidor de hospedagem.

A vantagem do registro.br é que assim que registrado, o domínio fica disponível para uso, mesmo antes de realizar o pagamento. Você tem um prazo de cerca de 1 mês para pagar, e já pode usar o domínio.

Em outros sites, o domínio só será liberado após a comprovação do pagamento (até 2 dias úteis no caso de boleto bancário).

2. Contrate a hospedagem

Contrate o serviço de hospedagem que você achar melhor (só hospedagem). Geralmente, eles liberam o serviço em pouco tempo, alguns até oferecem um teste gratuito por uns dias. No geral, após cadastrar-se, você terá um boleto para pagar (o pagamento é adiantado), e o serviço só será disponibilizado quando o pagamento for confirmado – o que leva até 2 dias úteis.

Dê preferência a empresas que trabalhem com CPanel, pois este é o painel de administração mais utilizado no mundo, que irá facilitar a manipulação dos serviços (criação de e-mails, por exemplo) e uma possível transferência mais tarde, caso você queira mudar para outro servidor de hospedagem.

Certifique-se de que o servidor suporte PHP 5 e MySQL.

3. Modifique o DNS do domínio

Após a contratação do serviço de hospedagem, quando for confirmado e ativado, você deverá receber da empresa contratada algumas informações, como login e senha de ftp (muito importante) e servidores DNS (muito importante também).

Você deverá acessar a página onde registrou o seu domínio, e modificar os servidores DNS dele. Essas informações são fornecidas pela empresa da hospedagem. Geralmente, são 2 endereços no formato: ns1.empresahospedagem.com.br e ns2.empresahospedagem.com.br .

Após atualizar essa informação, pode levar horas ou até um dia para que seja replicada pela internet. A partir daí (quando a informação do DNS for atualizada), quando você digitar o domínio registrado no navegador, irá abrir na sua página (que estará em branco, é claro… no máximo com um aviso de “em breve” ).

4. Instale o WordPress

Agora que tudo já está no lugar, é hora de fazer a instalação do WordPress. Acesse http://br.wordpress.org/ e faça download da versão mais recente, descompacte-o. Você terá uma pasta chamada “wordpress”, é essa pasta que você vai enviar para o site.

Você agora precisará de um programa de FTP para enviar os arquivos do wordpress para o seu site. Minha sugestão é o FileZilla, que é gratuito e está disponível para todas as plataformas (Windows, Linux, Mac). Outra boa opção é a extensão FireFtp, para o Firefox.

As informações de conexão ao ftp (login, senha e host) são fornecidas pelo servidor de hospedagem, geralmente assim que sua conta é efetivada, por e-mail. Utilize esses dados para conexão.

Obs: na maioria dos servidores, ao conectar-se, você irá se deparar com a sua pasta “home”, onde poderá haver várias pastas, que fazem parte do sistema do servidor de hospedagem. A pasta onde os arquivos do site ficam é a pasta public_html ou www (na verdade, a pasta www é apenas um alias/atalho para a public_html). É nessa pasta onde deverá ficar a pasta do wordpress.

Depois de enviar toda a pasta do WordPress para o servidor, acesse http://seudominio.com.br/wordpress . Você deverá visualizar uma mensagem como essa:

Caso tenha aparecido algum erro, ou outra coisa qualquer diferente dessa mensagem, procure a ajuda do WordPress para tentar resolver o problema em: http://br.forums.wordpress.org/

Antes de continuar com a instalação, precisamos criar um banco de dados MySQL, que será usado pelo WordPress. Algumas empresas de hospedagem já criam automaticamente o seu banco de dados e fornecem as informações no e-mail que é enviado após a ativação da conta, mas geralmente precisamos criar o banco manualmente.

Acesse o painel do seu servidor de hospedagem (caso tenha CPanel, ficará no endereço: http://seudominio.com.br/cpanel ). Você deverá fornecer o mesmo login e senha do ftp. Vá até a opção “Bancos de Dados MySQL” e crie um banco. Depois crie um usuário , definindo uma senha. Depois de ter criado o usuário, você precisará dar permissão completa a esse usuário no banco de dados que criou. No vídeo abaixo você confere um passo a passo detalhado desse processo (no CPanel):

Agora sim, podemos prosseguir com a instalação. Clique no botão “Criar um arquivo de configuração” que apareceu no seu site. A partir daí, basta seguir as instruções. A instalação é muito simples, são basicamente 2 telas onde você deve fornecer as informações que são pedidas: primeiro, o nome do banco de dados, o usuário do banco de dados e a senha, e o servidor do mysql (em 99% dos casos, deixe como está , “localhost”). O prefixo deixe como está.

A tela seguinte pedirá o título do seu blog / site, e o seu e-mail. E pronto! Após instalar, ele irá fornecer uma senha aleatória, que você usará com o login “admin” para acessar a administração do site – inicialmente em http://seudominio.com.br/wordpress/wp-admin .

Se você tiver dúvidas, nesse link tem um tutorial bem detalhado com vídeos ensinando como instalar o WordPress: http://wp-brasil.org/dicas-e-tutoriais/instalando-o-wordpress

4. Coloque o wordpress na raiz do site

Para que o seu wordpress fique acessível no endereço raiz do site, ( http://seudominio.com.br , em vez de http://seudominio.com.br/wordpress ) existe uma configuração a ser feita. Acesse a administração ( http://seudominio.com.br/wordpress/wp-admin ) , vá no menu “Configurações” -> “Geral” . Altere a opção “Endereço do site (URL)” para o seu domínio (remova o /wordpress). Clique em salvar.

Copie (não mova, copie!) o arquivo index.php da pasta /wordpress e coloque-o na raiz. Edite o arquivo e altere o caminho definido nele. A linha estará assim:

require('./wp-blog-header.php');

Você deverá modificá-la para ficar assim:

require('./wordpress/wp-blog-header.php');

Depois de alterar e enviar o arquivo index.php via FTP para a raiz do site (a pasta WWW), acesse o endereço principal para ver se está ok. Já deve abrir o seu blog.

5. Personalize para os seus propósitos

Agora que está tudo funcionando, o trabalho é a customização do seu recém-instalado WordPress. Primeiramente, é bom procurar um template legal, que tenha a ver com o seu propósito. Para isso, acesse o menu “Aparência – Temas” e procure um template, você pode ver os que estão em destaque, os mais populares, e também pode buscar por termos específicos / cores / funcionalidades. A instalação é bem intuitiva, não tem erro.

Além do template, existem também os plugins, que são formas de extender e personalizar as funcionalidades do seu WordPress.

Confira nesse outro artigo 10 dicas e plugins essenciais que vão dar uma força pro seu WordPress: http://erikaheidi.com/2010/05/03/turbine-o-seu-wordpress-10-dicas-e-plugins-essenciais/

6. Comece a postar!

Depois disso tudo, só falta uma coisa: conteúdo! O mais importante, no final das contas

BOA SORTE!

PHP GD – Escrevendo texto em imagens com fontes TTF

by erika on 30 de agosto de 2010 in Desenvolvimento Web, Php, Technical Stuff

Em mais um artigo sobre a utilização da biblioteca GD no php, vamos ver como podemos adicionar textos em imagens, escritos com qualquer fonte True Type.

A título de exemplo, vamos utilizar a foto abaixo:

Faremos um script que irá escrever exatamente no papelão que o carinha está segurando, e o resultado vocês já devem imaginar A idéia é ficar o mais realista possível, é claro!

O primeiro passo é encontrar uma fonte legal. Isso é fácil; sites de fontes para download gratuito não faltam na internet. Optei por uma fonte com estilo escrito à mão, para dar mais veracidade ao resultado. Baixei uma chamada “Handprinting” [ download aqui ].

Testando pouco a pouco na mão, cheguei às coordenadas, inclinação e tamanho ideal da fonte. O ideal é ir testando mesmo, até se ajustar. Pra ficar mais divertido, coloquei pra pegar o texto via GET, caso a pessoa queira definir dinamicamente Vamos ao código:

<?php
header("Content-type: image/jpeg");
// Set the enviroment variable for GD
putenv('GDFONTPATH=' . realpath('.'));

$result = imagecreatefromjpeg("placa.jpg");

if(!empty($_GET['texto']))
	$texto = $_GET['texto'];
else
	$texto = "dorgas, mano!";

$font = "Printing.ttf";
$black = imagecolorallocate($result, 0, 0, 0);
imagettftext($result, 60, 5, 250, 450, $black, $font, $texto);

imagejpeg($result);
?>

Resultado:

Demo online:

Observações do script: A definição da constante GDFONTPATH é necessária quando não utilizamos um caminho absoluto ao definir a fonte ttf a ser usada. Retirando essa definição no exemplo acima, o script deixará de funcionar na maioria das instalações atuais do php, a não ser que você defina o caminho utilizando $_SERVER['DOCUMENT_ROOT'] para dizer o caminho completo da fonte.

Manipulação de imagens no PHP com a lib GD – Colagem de fotos

by Erika on 30 de agosto de 2010 in Desenvolvimento Web, Php, Technical Stuff

Em mais um post sobre manipulação de imagens usando a lib GD no PHP, veremos como é possível fazer sobreposição de imagens, resultando em uma espécie de colagem de fotos.

Primeiro Exemplo – Mural Warhol

Nesse primeiro exemplo vamos repetir a mesma foto em versões diferentes, aplicando filtro de cor para um resultado que lembra o estilo de Andy Warhol.

<?php
header("Content-type: image/jpeg");

$source = "foto_exemplos.jpg";

$tamanho = getimagesize($source);

$wi = $tamanho[0];
$he = $tamanho[1];

/* numero de colunas e linhas da montagem nXn, altere para modificar o n. de colagens */
$c = 2;
$l = 2;
$result = imagecreatetruecolor($wi*$c, $he*$l);

for($i=0;$i<$l;$i++)
{
	for($j=0;$j<$c;$j++)
	{
		$source = imagecreatefromjpeg("foto_exemplos.jpg");
		imagefilter($source, IMG_FILTER_COLORIZE, rand(0,255), rand(0,255), rand(0,255),40);
		imagecopyresampled($result, $source, $j*$wi, $i*$he, 0, 0, $wi, $he, $wi, $he);

	}

}

imagejpeg($result);

?>

O resultado será sempre diferente, pois os valores passados à função imagefilter são randômicos. Cada vez que você der reload no script ele irá gerar diferentes combinações de cores. Aqui está um exemplo de resultado:

Segundo Exemplo – Foto com Colagens / Moldura

Nesse exemplo você verá como é fácil colar imagens png com transparências em cima de uma foto. Vou colar um png de um passarinho no canto esquerdo superior, e depois uma árvore no canto direito inferior.

<?php
header("Content-type: image/jpeg");

$result = imagecreatefromjpeg("foto_exemplos.jpg");

$bird = imagecreatefrompng("bird.png");
imagecopyresampled($result, $bird, 0, 0, 0, 0, imagesx($bird), imagesy($bird),  imagesx($bird), imagesy($bird));

$tree = imagecreatefrompng("tree.png");
imagecopyresampled($result, $tree, imagesx($result)-imagesx($tree), imagesy($result)-imagesy($tree), 0, 0, imagesx($tree), imagesy($tree),  imagesx($tree), imagesy($tree));

imagejpeg($result);

?>

Resultado:

Seguindo esse mesmo princípio, é possível colar molduras e criar montagens bem interessantes. No exemplo abaixo, usando uma moldura com o mesmo tamanho da foto (o código é quase igual, colando a moldura na posição 0,0 da foto):

<?php
header("Content-type: image/jpeg");

$result = imagecreatefromjpeg("foto_exemplos.jpg");

$moldura = imagecreatefrompng("moldura.png");
imagecopyresampled($result, $moldura, 0, 0, 0, 0, imagesx($moldura), imagesy($moldura),  imagesx($moldura), imagesy($moldura));

imagejpeg($result);
?>

Resultado:

Como você pode ver, a aplicação de pngs e colagem de fotos é muito simples. O que dificulta mais o trabalho com esses métodos é o posicionamento e tamanho das imagens. Geralmente, você precisará utilizar algum esquema mais elaborado com javascript para definir a posição certa aonde colar as imagens, caso faça algo totalmente dinâmico. Redimensionamento também pode ser extremamente necessário.

Para maiores informações sobre a GD e referência das funções utilizadas aqui, verifique : http://www.php.net/manual/en/ref.image.php

Montando um site php com autenticação baseada em Twitter+OAuth e persistência

by Erika on 25 de agosto de 2010 in Desenvolvimento Web, Php, Technical Stuff

Neste artigo você verá como é possível criar um site em php com autenticação de usuários toda baseada no Twitter, usando a biblioteca Twittertools que desenvolvi.

Antes de começar, vamos ter uma idéia mais detalhada de como é feita a autenticação do usuário pelo Twitter através do seu site, que nesse fluxograma chamarei de APP:

Usuário acessa APP. APP identifica que ele não está logado;
APP faz uma requisição ao Twitter, identificando-se (com suas chaves consumer_key e consumer_key_secret ) os tokens de acesso (request_token e request_token_secret);
APP faz nova requisição ao Twitter, identificando-se com suas chaves e passando o request_token, pedindo o link de autorização para o usuário; guarda o request_token_secret na sessão;
Twitter retorna o link que APP deve passar para o usuário autorizá-la;
Usuário acessa o link e autoriza APP;
Usuário é redirecionado de volta para APP trazendo o request_token;
APP recebe o request_token e faz uma nova requisição ao Twitter, informando o request_token e o request_token_secret, e solicitando o access_token e access_token_secret do usuário;
Twitter responde com access_token e access_token_secret do usuário, e APP agora pode realizar qualquer requisição usando estas chaves.

As chaves consumer_key e consumer_key_secret devem ser obtidas ao registrar a sua aplicação no Twitter. Instruções detalhadas de como fazer isso podem ser encontradas aqui: http://erikafocke.com.br/twittertools . Uma vez com estas chaves, já é possível “começar a brincadeira”.

Download da biblioteca Twittertools: http://github.com/erikaheidi/Twittertools

No nosso exemplo, criaremos uma “mini” rede de usuários que serão listados na página principal. Veja a demonstração funcionando aqui: http://erikafocke.com.br/demos/happyelephant

Precisaremos criar uma tabela de usuários, para reconhecermos quando eles retornarem ao site. Guardaremos o id to usuário no Twitter, que será a nossa chave primária, e as chaves. A idéia de guardar as chaves é funcional para o caso de você realizar operações com a conta do usuário mesmo quando ele não estiver logado no seu site, ou quando você já possui um outro sistema de autenticação e quer apenas integrar o Twitter ao seu site, possibilitando que as pessoas façam login como de costume e possam postar atualizações no Twitter sem precisar repetir esse processo de autorização da aplicação.

A tabela básica para o nosso exemplo é a seguinte:

CREATE TABLE IF NOT EXISTS `tw_users` (
  `tw_id` int(11) NOT NULL,
  `access_token` varchar(200) NOT NULL,
  `access_token_secret` varchar(200) NOT NULL,
  `last_seen` datetime NOT NULL,
  PRIMARY KEY  (`tw_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Além das classes da TwitterTools, criei também uma classe de usuário, que irá salvar os dados em banco e atualizar a data/hora em que o usuário acessa o site, para sabermos quando foi a última vez que ele acessou. Essa classe também lista os usuários que já se “cadastraram” no site.

<?php

class User {

	var $tw_id;
	var $atoken;
	var $atoken_secret;
	var $last_seen;

	var $new;
	static $table = "tw_users";

	function __construct($tw_id,$atoken,$atoken_secret)
	{
		$this->tw_id = $tw_id;
		$this->atoken = $atoken;
		$this->atoken_secret = $atoken_secret;

	}

	function update()
	{
		$date = date("Y-m-d H:i:s");

		$query = mysql_query("SELECT last_seen FROM " . self::$table . " WHERE tw_id='$this->tw_id' ") or die(mysql_error());
		if(mysql_num_rows($query))
		{
			$this->last_seen = mysql_result($query,0);
			$upd = mysql_query("UPDATE " . self::$table . " SET last_seen='$date' WHERE tw_id='$this->tw_id' ") or die(mysql_error());
		}
		else
		{
			$this->new = 1;
			$ins = mysql_query("INSERT INTO " . self::$table . "(tw_id,access_token,access_token_secret,last_seen) VALUES('$this->tw_id','$this->atoken','$this->atoken_secret','$date') ") or die(mysq_error());
		}
	}

	static function getUsers($limit=30)
	{
		$query = mysql_query("SELECT tw_id FROM " . self::$table . " ORDER BY last_seen LIMIT $limit") or die(mysql_error());

		while($x = mysql_fetch_array($query))
		{
			if(empty($lista_users))
				$lista_users = $x['tw_id'];
			else
				$lista_users .= ",".$x['tw_id'];
		}
		return $lista_users;
	}

}
?>

No arquivo index.php você vai ver as coisas “funcionarem”. Não vou colar aqui pra não ficar grande demais o post! Vale mais a pena fazer o download

Você pode fazer download da pasta com todo o código completo desse exemplo aqui: happyelephant.zip

Dúvidas? Deixe um comentário Gostou? Comente também, aproveite e dê um retweet

Manipulação de imagens no PHP com a lib GD – gerar thumbnails

by Erika on 25 de agosto de 2010 in Desenvolvimento Web, Php, Technical Stuff

Continuando a série de posts sobre manipulação de imagens no PHP, dessa vez vamos trabalhar com outra funcionalidade muito comum e extremamente útil da GD: redimensionamento de imagens.

Ao se trabalhar com imagens enviadas pelo usuário através de um formulário, precisamos estabelecer limites de tamanho para que a imagem se enquadre ao nosso layout de site, além de evitar transtornos com o espaço em disco ocupado por imagens excessivamente grandes.

Para gerar um resultado fiel à imagem original, precisamos realizar um cálculo proporcional para definir o novo tamanho da imagem, baseado nos tamanhos máximos que iremos definir como limites.

O algoritmo é simples: passamos a largura e altura máximos, pegamos a largura e altura atuais da imagem. Caso ultrapassem os tamanhos máximos, iremos calcular usando regra de três quais serão os novos tamanhos da imagem (não podemos simplesmente definir que a imagem terá a largura e altura máximos definidos, pois isso poderá deixá-la com aspecto esticado em muitos casos). Após definir os novos tamanhos, criamos uma imagem em branco com o tamanho definido, copiamos a imagem original para dentro dessa nova imagem e salvamos o resultado.

Vamos ver como isso funciona na prática, usando a GD:

<?php
header("Content-type: image/jpeg");

$larguraMax = 200;
$alturaMax = 100;
$source = "foto_exemplos.jpg";

$tamanho = getimagesize($source);

$wi = $largura = $tamanho[0];
$he = $altura = $tamanho[1];

/* se for formato 'paisagem' */
if($largura > $larguraMax)
{
	$largura = $larguraMax;
	$altura = ($largura * $tamanho[1]) / $tamanho[0];
}
/* pode acontecer que mesmo depois do redimensionamento inicial baseado na LARGURA, a imagem continue
 * com a ALTURA maior que a permitida. por isso não usamos else aqui, e fazemos a checagem contraria.
 */
if($altura > $alturaMax)
{
	$altura = $alturaMax;
	$largura = ($tamanho[0] * $altura) / $tamanho[1];

	/* pode acontecer que mesmo depois do redimensionamento inicial baseado na ALTURA, a imagem continue
	 * com a LARGURA maior que a permitida. por isso não usamos else aqui, e fazemos a checagem contraria.
	 */
	if($largura > $larguraMax)
	{
		$largura = $larguraMax;
		$altura = ($largura * $tamanho[1]) / $tamanho[0];
	}
}

$thumb = imagecreatetruecolor($largura, $altura);
$imagem_orig = imagecreatefromjpeg($source);

/* argumentos da imagecopyresampled / imagecopyresized :
 * imagem destino, imagem origem, coordX destino, coordY destino, coordX origem, coordY origem,
 * largura destino, altura destino, largura origem, altura origem
 */
imagecopyresampled($thumb, $imagem_orig, 0, 0, 0, 0, $largura, $altura, $wi, $he);
/*
 * para salvar em disco, acrescente à imagejpeg os parâmetros: nome do arquivo e qualidade da imagem.
 * assim:	imagejpeg($thumb, "resultado.jpg", 100);
 * qdo você não define os dois parâmetros finais, o script joga a saída para STDOUT = browser
 */
imagejpeg($thumb);
?>

Veja o resultado após a execução do script. A imagem original de 300×300 foi redimensionada para 100×100, mantendo o aspecto e a proporção.

imagem original (300x300)

redimensionada = 100x100

Manipulação de imagens no PHP com a lib GD – efeitos

by erika on 25 de agosto de 2010 in Desenvolvimento Web, Php, Technical Stuff

A manipulação/geração de imagens no PHP é um recurso muito útil e versátil, que pode ser usado tanto para operações comuns como o redimensionamento / corte de imagens, quanto para operações mais complexas, como a criação de montagens, gifs animados e tratamento de fotos.

A biblioteca GD é a mais utilizada no php para essas operações, por já estar presente na maioria das instalações padrão de servidores por aí afora. Ela oferece muitos recursos interessantes, e apesar de ter limitações, serve para todas as operações básicas de manipulação de imagem: corte, redimensionamento, colagem, escrita com fontes true type, efeitos básicos para fotos, e geração de imagens diretamente para o browser (um arquivo .php se “transforma” em um jpg).

Para maiores informações e referência das funções da GD, acesse: http://www.php.net/manual/en/ref.image.php

Neste artigo você verá exemplos de utilização da GD para aplicar efeitos em fotos. Nos exemplos, utilizei a imagem “foto_exemplos.jpg”, no mesmo diretório do script, e joguei a saída diretamente para o browser, não salvando as alterações na imagem.

Brilho

No exemplo abaixo, aumentei o brilho da imagem em “50″. Para diminuir o brilho, basta passar um número negativo.

Brilho +50

<?php
$img = imagecreatefromjpeg("foto_exemplos.jpg");

if($img && imagefilter($img, IMG_FILTER_BRIGHTNESS, 50))
{
	header("Content-type: image/jpg");
	imagejpeg($img);
}
else
{
    echo "Ocorreu um erro.";
}

imagedestroy($img);

?>

Contraste

contraste -50

O contraste funciona de maneira similar ao brilho, porém para aumentar o contraste é que você passa um número negativo. Um número positivo irá diminuir o contraste.

<?php
$img = imagecreatefromjpeg("foto_exemplos.jpg");

if($img && imagefilter($img, IMG_FILTER_CONTRAST, -50))
{
	header("Content-type: image/jpg");
	imagejpeg($img);
}
else
{
    echo "Ocorreu um erro.";
}

imagedestroy($img);

?>

Filtro de Cor

O filtro COLORIZE permite a você aplicar um filtro de cor na imagem, passando os argumentos que definem a cor: R G B (red, green, blue), e mais um argumento opcional que define a transparência do filtro – de 0 a 127, onde 0 (o padrão) seria totalmente opaco e 127 totalmente transparente – que não fará diferença no resultado da imagem. No exemplo abaixo, usei 100% de verde e nenhuma transparência (R=0,G=255,B=0)

colorize

<?php
$img = imagecreatefromjpeg("foto_exemplos.jpg");

if($img && imagefilter($img, IMG_FILTER_COLORIZE, 0, 255, 0))
{
	header("Content-type: image/jpg");
	imagejpeg($img);
}
else
{
    echo "Ocorreu um erro.";
}

imagedestroy($img);

?>

No exemplo abaixo, defini a transparência para 100, acrescentando “100″ na lista dos argumentos.

colorize green c/ alpha=100

Preto e Branco

preto e branco

<?php
$img = imagecreatefromjpeg("foto_exemplos.jpg");

if($img && imagefilter($img, IMG_FILTER_GRAYSCALE))
{
	header("Content-type: image/jpg");
	imagejpeg($img);
}
else
{
    echo "Ocorreu um erro.";
}

imagedestroy($img);

?>

Sépia

Para atingirmos o efeito de “Sepia”, aplicamos dois filtros. Primeiro deixamos a imagem preto e branco, depois aplicamos um ‘colorize’ no tom de sépia (amarelado).

sepia tone

<?php
$img = imagecreatefromjpeg("foto_exemplos.jpg");

if($img && imagefilter($img, IMG_FILTER_GRAYSCALE))
{
	imagefilter($img, IMG_FILTER_COLORIZE, 90, 60, 40);
	header("Content-type: image/jpg");
	imagejpeg($img);
}
else
{
    echo "Ocorreu um erro.";
}

imagedestroy($img);

?>

Negativo

negativo

<?php
$img = imagecreatefromjpeg("foto_exemplos.jpg");

if($img && imagefilter($img, IMG_FILTER_NEGATE))
{
	header("Content-type: image/jpg");
	imagejpeg($img);
}
else
{
    echo "Ocorreu um erro.";
}

imagedestroy($img);

?>

Lib Php TwitterTools com OAuth – postar, obter timeline, dm, mentions e fazer follow via Twitter API

by erika on 19 de agosto de 2010 in Desenvolvimento Web, Php, Technical Stuff

Acabou de sair a atualização da minha antiga classe TwitMsg, que postava no Twitter utilizando o método antigo de autenticação, que foi eliminado desde o dia 16/08/2010.

A nova biblioteca contém 3 classes, e trabalha utilizando a OAuth para autenticar o usuário e fazer requisições à API do Twitter. Através dela você poderá criar um sistema de autenticação no seu site baseado no Twitter, sem precisar guardar as senhas do usuários, etc.

A TwitterTools permite também postar (já utilizando encurtador de links do Bit.Ly, de forma transparente), dar follows, obter a timeline, mentions e dms do usuário autenticado, e obter os followers de qualquer usuário.

Confira tudo em: http://erikafocke.com.br/twittertools

Montando um ambiente de desenvolvimento web no Ubuntu 10.04

by erika on 17 de junho de 2010 in Linux, Technical Stuff

Há cerca de um mês, resolvi definitivamente pôr fim ao hábito de usar o Windows, e instalar o Ubuntu.

O meu maior problema era montar um ambiente de desenvolvimento web eficiente, que pudesse de fato substituir o pacote Dreamweaver + Fireworks, que utilizo há anos. Já tentei anteriormente, e não consegui me adaptar com as opções disponíveis até então no Linux.

Porém, como já fazia cerca de 2 anos dessa tentavia, resolvi fazer uma nova experiência para ver o que há de novo tanto na versão atual do Ubuntu (10.04, ou LucidLynx), quanto nos softwares disponíveis para ele.

Após a instalação(muito fácil e rápida, por sinal), já me agradei bastante com as novas opções de integração com redes sociais que o Ubuntu 10.04 traz. É possível configurar Twitter, FlickR, Digg, GTalk, dentre outros, como vocês podem conferir no screenshot abaixo:

Outra grande evolução do Ubuntu 10.04, e que por sinal o coloca numa posição extremamente privilegiada em relação ao Windows, é o Ubuntu Software Center, que me fez lembrar muito a App Store da Apple. Através dessa aplicação nativa, você navega e instala programas com a facilidade de um clique.

Bom, após essas boas impressões iniciais, deu pra ter certeza que o S.O é ótimo e até superou minhas expectativas. Agora era uma questão de softwares, para poder montar o ambiente de trabalho ideal.

Pra começar, instalei o Google Chrome pra Linux, porque não curto o Firefox. Pra isso, precisei baixar no site o .deb, depois foi só dar dois cliques, e o xxx de pacotes já instalou pra mim. Nenhum trabalho até agora!

Então, hora de instalar o servidor web Apache+PHP+MySQL. Pelo terminal:

sudo apt-get install apache2 libapache2-mod-php5

E depois o mysql:

sudo apt-get install mysql-server-5.1 php5-mysql

Também não foi nem um pouco trabalhoso pra quem é do tempo em que tínhamos de usar ./configure (cheio de opções macabras), make e make install.
Depois de deixar o servidor web pronto, comecei a busca por um bom editor que comportasse PHP/Xhtml/Css/Javascript. Para não deixar a desejar em relação ao Dreamweaver, o editor que eu procurava precisava de:

Syntax Highlight eficiente para PHP,Xhtml,Css e Javascript
Autocompletar para funções PHP
Autoclose para tags xhtml
FileBrowser integrado

Estas caraterísticas aceleram bastante a escrita dos meus códigos, e por essa razão são essenciais para não baixarem a minha produtividade após uma migração de SO e softwares. Experimentei os seguintes editores: GEdit, GVim, SCite, Bluefish e Amaya (o editor da W3C). Os resultados foram frustrantes, nenhuma dessas opções corresponderam às minhas expectativas.

Então eu resolvi testar um outro editor que não parecia ser conhecido: o Geany (http://www.geany.org/), descrito como “a fast and lightweight IDE using gtk2″. Não criei expectativas, mas após a instalação, comecei a testá-lo e vi que era exatamente o que eu queria. Leve, com suporte a plugins e criação de projetos, ele foi até melhor do que eu esperava, com alguns recursos que não existem no Dreamweaver – por exemplo, o autocompletar dele reconhece também métodos e variáveis de classe disponíveis no escopo do código atual.

Ativei o plugin FileBrowser que já vem nele, e posso dizer que está sendo perfeito para mim. Existem outros plugins interessantes disponíveis no site oficial do Geany, como o que faz a integração entre o editor e ferramentas de controle de versão como o Git.

O Geany ainda está na versão 0.19, porém já supera muitos outros editores consagrados existentes no mercado, com as seguintes funcionalidades (copiei do site oficial):

Syntax highlighting
Code folding
Symbol name auto-completion
Construct completion/snippets
Auto-closing of XML and HTML tags
Call tips
Many supported filetypes including C, Java, PHP, HTML, Python, Perl, Pascal and more
Symbol lists
Code navigation
Build system to compile and execute your code
Simple project management
Plugin interface

No site oficial do Geany vocês podem conhecer maiores detalhes do projeto: http://www.geany.org

Espero que ajude alguém! =D Pra mim, esse editor (Geany) foi a melhor descoberta dos últimos tempos.

Turbine o seu WordPress – 10 dicas e plugins essenciais

by erika on 3 de maio de 2010 in Technical Stuff, WordPress

O WordPress é, sem dúvida, um dos melhores CMSs existentes na atualidade. Muitas pessoas ainda o vêem apenas como um sistema especificamente de blog, mas isso é subestimar o potencial do WordPress. Com ele, podemos criar sites profissionais que não se parecem em nada com um blog tradicional: sites corporativos, portfolios, lojas virtuais, fotoblogs - são apenas alguns exemplos do que se pode fazer com ele.

Porém, para que tenhamos um belo site funcional com o WordPress, precisamos explorar as suas opções, personalizando-o através de plugins e configurações especiais. Neste post, fiz uma seleção com dicas e plugins que irão turbinar a sua instalação do WordPress, contribuindo em vários aspectos diferentes para o seu site, desde rankeamento e indexação até aparência e navegabilidade. Vamos às dicas!

1. Escolha o seu Template e personalize-o

Existem milhares de templates prontos para o WordPress que você pode usar gratuitamente no seu site. É importante escolher algum que possua boas opções de personalização, para que você possa dar a sua cara ao visual do site. A personalização da barra lateral (sidebar) usando widgets é essencial, e o template que você escolher deve possuir essa funcionalidade. Para dar uma força, aqui vão alguns links com temas excelentes e gratuitos (até eu fiquei com vontade de trocar o meu!):

Caso queira criar o seu próprio template ou modificar um existente, tudo que você precisa saber sobre o WordPress e como criar templates está aqui: http://codex.wordpress.com . Você pode, por exemplo, excluir certas categorias da listagem geral do blog, como eu faço aqui com as minhas crônicas. Você irá perceber que elas estão separadas da listagem geral, porque eu não quis misturar muito os assuntos. Existe um plugin para fazer isso, mas também pode ser feito manualmente direto no template.

Você também pode exibir apenas os posts de determinada(s) categoria(s), exibir múltiplas listagem de posts na mesma página, dentre outras coisas. A flexibilidade oferecida pelo WordPress é imensa.

2. Configure os Links Permanentes

Uma das primeiras coisas que faço logo após instalar o WordPress é mexer na configuração dos Links Permamentes. É muito importante fazer essa alteração, pois por padrão os links são não amigáveis (dominio.com/?p=123), uma prática que não é recomendada para quem deseja ter uma boa indexação em mecanismos de busca. As URLS amigáveis – user friendly – são permanentes e informativas, pois possuem dados como a data da postagem e o título da mesma. Assim, quando o usuário identifica o link, já tem uma idéia do que trata aquela página. Além disso, a url de uma determinada página tem uma grande influência na indexação pelos mecanismos de busca.

Acesse a opção “Links Permanentes” ou “Permalinks” na seção ”Configurações ” (Settings) do seu painel de administração WordPress e mude para uma das estruturas amigáveis sugeridas ( Dia e Nome, Mês e nome ), ou crie a sua estrutura personalizada. No meu caso, preferi criar a estrutura meublog.com.br/categoria/nome-do-post . Se existe a possibilidade de você criar dois posts na mesma categoria com nomes idênticos, ou se o seu blog trata de coisas “temporais” – notícias, por exemplo – então a estrutura mais indicada é a formatada com a data e o nome do post.

3. Otimize seu site para os mecanismos de busca

Quem tem um site (principalmente um Blog), obviamente quer ter visitas, quer atrair audiência. Ter um site otimizado para os mecanismos de busca é essencial para isso. Visando este objetivo, ajustar a configuração dos Links Permanentes é apenas o primeiro passo nessa direção; há vários outros detalhes com os quais devemos nos preocupar. Para tornar essa otimização mais fácil, sem precisarmos mexer muito nos templates que usamos, existem vários plugins de SEO disponíveis para WordPress. Na minha opinião, o melhor deles é o Greg’s High Performance SEO, por ter uma série de opções personalizáveis, e ser leve, não pesando no carregamento do site. Ele adiciona campos extras na tela de edição do post, proporcionando a adição de meta tags, títulos secundários e descrição (meta description). Nas configurações do plugin você encontra instruções detalhadas sobre como usá-lo e dicas.

Além desse plugin específico para SEO, outro plugin muito interessante é o Google Xml Sitemaps, que cria automaticamente sitemaps do seu blog, o que favorece a indexação do mesmo pelos mecanismos de busca.

4. Livre de Spam

O Spam invandiu o mundo dos blogs, usando os formulários de comentários para disseminarem links duvidosos em ações de SEO questionáveis. Por essa razão, a moderação de comentários nunca foi tão importante. Mas para evitar a dor de cabeça de uma lista de moderação repleta de spams, o ideal é utilizar um plugin – o Akismet. Ele já vem instalado no WordPress por padrão, bastando ativá-lo. Para ativá-lo, você precisa de uma chave da api do WordPress, conseguida no wordpress.com . Basta ter um cadastro lá, para ter uma API válida, que servirá tanto para o Akismet quanto para outros plugins “oficiais” do WordPress – WP Stats, por exemplo.

5. Conheça seu Público

Estatísticas de acesso são essenciais para qualquer site. Para isso, existem vários sistemas de qualidade atualmente; dentre eles, o Google Analytics merece destaque. Porém, para um blog WordPress, existe a opção do WordPress.com Stats, um plugin do próprio WordPress, que exibe as estatísticas de acesso de uma maneira prática e muito atrativa, fácil, sem complicações. Basta instalar o plugin WP Stats e configurá-lo com uma chave api válida obtida no WordPress.com . Você poderá acessar as estatísticas direto do painel do WP, o que facilita bastante o acompanhamento das visitas. Além dos números, você terá visualizará os links mais acessados do seu blog, os links externos que trouxeram visitantes, bem como links que foram clicados no seu blog. Os termos de busca que levaram os usuários até o seu blog também são catalogados.

6. Incentive a navegação

Muitas vezes acessamos um blog por causa de um post específico, e acabamos nos interessando por outro post que encontramos por lá. É importante oferecermos o conteúdo relacionado ao que o usuário está procurando, de forma a enriquecer a sua navegação. Para isso, existem diversos plugins de “Related Posts”, que exibem uma lista de posts relacionados no final de cada artigo. O mais elaborado que conheço é o Yet Another Related Posts Plugin , que utiliza vários critérios diferentes para relacionar os posts em comum, acertando em cheio na tarefa de trazer ao usuário mais opções de conteúdo relacionado ao que ele está procurando. Além do mecanismo bem desenvolvido, o plugin oferece uma série de opções de personalização da exibição desta lista de posts relacionados. Mais um plugin que não pode faltar no seu WordPress!

Se você quer colocar alguns artigos em destaque, minha dica é utilizar o Featured Content Gallery . Porém, vale salientar que a utilização não é das mais simples, pois você precisa adicionar campos personalizados em cada post ou página que deseja colocar em destaque, com o caminho para a imagem que será exibida no slideshow. O resultado vale a pena, fica bem atrativo.

7. Mostre sua presença nas redes sociais

Mostrar que você está presente nas redes sociais, fornecendo links para que os usuários possam procurar uma socialização com você ou sua empresa, é sempre relevante. Exibir seus últimos tweets é uma prática comum nos blogs e até mesmo em sites corporativos atualmente. Para isto, existem vários plugins, porém eu recomendo o widget oficial do Twitter, que permite uma boa personalização e é bem mais leve que os plugins para WordPress. Você pode obter o seu aqui: http://twitter.com/about/resources/widgets/widget_profile . Aí basta copiar o código e colar num widget de texto do seu blog, sem a necessidade de instalar um plugin.

Plugins para exibir as fotos recentes do FlickR também são comuns. Um bom exemplo é o Flickr Thumbnails Photostream.

8. Permita o contato

Ter um formulário de contato é algo básico. Existem muitos plugins para tanto, a minha recomendação vai pra o Fast and Secure Contact Form , que utiliza uma boa proteção contra spam usando Akismet e sistema de captcha. Bem melhor do que fornecer diretamente o seu endereço de e-mail e sofrer com SPAM depois.

9. Garanta Acessibilidade

Hoje em dia quase todo mundo possui um dispositivo portátil com acesso à internet – ipods, iphones, pdas, celulares. Proporcionar uma navegação legal para quem acessar o seu site através de um dispositivo como esses é garantir a satisfação do seu visitante, bem como sua fidelidade. Afinal, acessibilidade é a chave da internet 2.0 . E não subestime esse fato, achando que ninguém irá acessar o seu site de um dispositivo portátil.

Mas e agora? Vou ter de fazer um site diferente pra quem acessar pelo Iphone? Não precisa. Basta instalar um plugin. o WPTouch IPhone Theme resolve tudo pra você, detectando quando o usuário está acessando de um dispositivo móvel e exibindo o template especial para ele.

Caso você queira acessar o painel de controle do WordPress através de um dispositivo móvel, também não pode deixar de experimentar oWPhone, um outro plugin criado especificamente para isso. A navegação é fácil e rápida, funciona mesmo. Estou usando e não tenho do que reclamar.

Visualização deste site pelo Ipod Touch, usando o plugin WPTouch c/ configurações padrão

Caso você queira acessar o painel de controle do WordPress através de um dispositivo móvel, também não pode deixar de experimentar o WPhone, um outro plugin criado especificamente para isso. A navegação é fácil e rápida, funciona mesmo. Estou usando e não tenho do que reclamar. Ele oferece mais opções do que a versão mobile do WordPress.

WP Admin com plugin WPhone, visualizado por Ipod Touch

10. Socialize!

Na web 2.0 , a socialização é fator crucial para a popularidade do seu blog e disseminação do seu conteúdo. Esperar até que os mecanismos de busca indexem seu novo artigo pode levar tempo, e tempo hoje em dia é algo precioso; por isso, marcar presença nas redes sociais é essencial. Através dela, você poderá divulgar sua informação de maneira instantânea, e dependendo da relevância e popularidade do seu conteúdo, ele pode ser disseminado pelos próprios usuários da sua rede.

Para tornar essa tarefa mais fácil, existem vários plugins interessantes que promovem o compartilhamento do conteúdo. Mas com certeza os que utilizam o Twitter são os mais indispensáveis! Na minha opinião, o Topsy Retweet Button é um excelente plugin para promover o compartilhamento de posts via Twitter. Ele cria um botão de retweet em cada post, exibindo a contagem de retweets já feitos daquele artigo. Além disso, você pode configurá-lo para exibir os retweets como comentários no post. O Twitter também oferece um botão oficial, que estou usando atualmente para testar. A vantagem do botão oficial é que você pode adicionar um profile como sugestão para a pessoa seguir, depois de fazer o retweet.

Outro excelente plugin de compartilhamento é o Add to Any , que lista uma série de redes sociais diferentes onde você pode compartilhar o seu conteúdo. Contudo, O SexyBookmarks é uma opção bem mais elegante e atrativa do que o Add to Any, o único problema é que ele pode deixar o site um pouco lento às vezes(da última vez que usei, notei isso, depois que desabilitei o site ficou abrindo bem mais rápido. Mas pode ser que eles já tenham resolvido o problema).

Classe FlickR Simples

by erika on 30 de abril de 2010 in Desenvolvimento Web, Php, Technical Stuff

Esta classe é a mesma que utilizo aqui no site para exibir minhas fotos recentes do FlickR.

Você pode testar o funcionamento da classe aqui: http://www.erikafocke.com.br/demos/simpleflickr/

Exemplo de Utilização:

<?php
require_once("FlickR.php");
$username = "erikaheidi";

$fl = new FlickR();
$fl->getPhotos($username,10);

print_r($fl->fotos);

?>

O arquivo da classe está disponível para download aqui num zip (no final do post tem o link). Nesse zip tem a classe e um arquivinho .php de exemplo, pra mostrar como você vai usar, igual ao live demo.

Se tiver dúvidas, deixe um comentário!

Obs: Para que a classe funcione do jeito que está, o seu servidor precisa suportar a opção de abrir arquivos remotos com a função file_get_contents .

Download: simpleflickr.zip

« Previous 1 2