Top rated never dies » resources

Reportando e buscando soluções para problemas ligados aos plugins do Facebook

Domênico Citrângulo — Wed, 20 Apr 2011 00:30:37 +0000

Porém, ao mesmo tempo que facilitam a vida, estes recursos deixam todos nós dependentes de seu bom funcionamento. Quer dizer, sua página não depende mais apenas do código que você e sua equipe escrevem. Se o Facebook resolver fazer um update no script que gera o botão “curtir” por exemplo, e este não for bem sucedido, todas as páginas que o utilizam podem começar a ter problemas, exibir mensagens de erro ou ter qualquer outro comportamento estranho. E o pior: não existe um alerta, um aviso. Isso pode acontecer a qualquer momento. Apenas para citar um exemplo: recentemente, páginas que utilizavam o plugin do botão curtir via XFBML passaram a recarregar (dar reload) sem parar no IE7, muitas vezes travando o browser. A alternativa foi substituí-lo pela versão iFrame. Mas até isso acontecer, muitos pageviews falsos e usuários irritados ficaram pelo caminho.

Claro, não estou dizendo que você deve correr para tirar todos os componentes do FB do seu site. Os ganhos ainda superam, e muito, quaisquer eventuais perdas. Mas quero mostrar dois lugares importantes que precisam estar nas bookmarks de todos que lidam e utilizam os componentes do FB:

Developers Forum

Fórum oficial da plataforma, aqui você encontrará milhares de tópicos sobre os mais diversos problemas e dúvidas à respeito das APIs e plugins do Facebook. Quando perceber que algo que sempre funcionou passou a se comportar de maneira estranha dê uma olhada aqui. É onde os primeiros relatos envolvendo bugs aparecem. Também é útil por que além de reportar problemas, os desenvolvedores postam os workarounds e possíveis correções para cada falha.
http://forum.developers.facebook.net/

Bug Tracker

É o Bugzilla da Facebook Platform. Nela desenvolvedores de todo o mundo reportam seus problemas diretamente para a equipe de programadores do FB através do cadastro de Bugs. Depois de ser cadastrado, cada bug passa por uma triagem e, se confirmado, é escalado para a equipe responsável. É o melhor lugar para buscar informações sobre os problemas mais graves e obter respostas oficiais do time de desenvolvedores da plataforma. É possível também votar nos bugs que você considera mais graves para tornar sua correção prioritária em relação aos outros.
http://bugs.developers.facebook.net/

URL Linter

Esta ferramenta permite analisar uma URL e checar se as tags utilizadas pelo Facebook para o compartilhamento da página estão aplicadas de maneira correta. Com ela é possível verificar de onde o sistema da rede social importa as informções que servem como título, descrição e thumbnail do link quando a página é compartilhada. Dessa forma podemos refinar as informações, aplicar as tags corretamente e identificar possíveis problemas.
http://developers.facebook.com/tools/lint/

Galeria de fotos super simples usando apenas 1 arquivo PHP

Domênico Citrângulo — Thu, 01 Jul 2010 00:41:20 +0000

Download

Demo

A solução

Para desenvolver esse micro sistema de galeria de fotos vou usar uma função PHP muito útil, a Glob(). Essa função nos permite ter acesso às pastas do servidor e retornar listas de arquivos de acordo com o seu nome ou extensão. Então é isso que faremos, vamos exibir todas as imagens de uma pasta usando PHP. Salvaremos duas versões de cada foto, uma miniatura (thumbnail) e uma imagem maior, e usaremos a função Glob() para exibí-las corretamente. Ao final teremos uma galeria igual a essa:

Preparando as imagens

A primeira coisa a fazer é preparar e cortar as imagens nos formatos corretos. A galeria funcionará mesmo que cada imagem tenha um tamanho diferente, mas ficaria com aspecto horrível. Então o ideal é cortar todas no mesmo formato. Para esse exemplo cortei as thumbs em quadrados de 100px x 100px e as imagens maiores em 500px x 500px.

Crie uma pasta com nome “fotos_galeria” (ou outro nome que preferir) e salve todas as imagens dentro dela, nomeando as thumbs com um “_p” no final do nome do arquivo, exemplo: foto1_p.jpg; e as imagens maiores com um “_g” no final, exemplo: foto1_g.jpg.

Agora faça o upload da pasta para o seu servidor PHP. Sua URL vai ficar algo parecido com:
http://www.seudominio.com.br/fotos_galeria

Preparando o arquivo PHP

O arquvo PHP responsável pela criação da galeria é extremamente simples e está dividido em duas partes. A primeira parte é o o bloco de estilos CSS da página e o segundo o bloco da função PHP responsável pela lógica da galeria.

O trecho CSS
O CSS não precisa de nenhuma alteração a não ser claro que você queira alterar o visual da galeria. Veja abaixo:

O trecho PHP
O trecho que contém o código PHP responsável pela montagem da galeria também não é complicado e precisa apenas de 2 pequenas modificações para que funcione corretamente no seu servidor. No início do bloco você deverá:
- Informar a URL onde o arquivo PHP estará publicado. No meu caso: http://www.toprated.com.br/galeria.php;
- Informar o nome da pasta onde estarão as imagens. No meu caso: fotos_galeria;
Confira o trecho completo já comentado e explicado linha a linha:


 com link para a imagem grande
  echo "";
  echo "";
  echo "";
  echo "";
  echo "";

  }

 } else {

  //Guarda o nome da imagem para montar o link da imagem grande
  $foto_g = explode("_p", $fotos[$_GET["image"]]);

  //Configura os links de próxima e anterior
  if ( $_GET["image"] == 0 ) { $anterior = ""; } else { $anterior = $_GET["image"] - 1; }
  if ( $_GET["image"] == count($fotos)-1 ) { $proxima = ""; } else { $proxima = $_GET["image"] + 1; }

  //Quando solicitada uma imagem em particular, monta a  e insere a imagem grande de acordo com o link
  echo "";
  echo "";
  echo "";
  echo "";
  echo "Foto anterior | Voltar para a galeria | Próxima foto";
  echo "";

  }

?>

Publique

Pronto, basta publicar seu arquivo e testar online. O resultado final deve ficar como este: http://www.toprated.com.br/galeria.php.
Se quiser inserir a galeria no meio de outra página como fiz acima, basta usar um iframe simples linkando para o seu arquivo, dessa forma:

Para facilitar a vida dos mais preguiçosos segue link para o pacote com os arquivos usados nesse exemplo, incluindo o arquivo PHP e as imagens. Aliás, todas as fotos são do site SHC.ru, um ótimo lugar para procurar imagens Royalty Free.

Como eu disse, o intuito dessa micro galeria de fotos é ser o mais simples possível, portanto é óbvio que ela pode ser melhorada, e muito. Você pode adicionar ícones à navegação de próxima e anterior, por exemplo. Mas acredito que é uma boa opção para quem está procurando uma solução rápida e fácil para a partir dela criar a sua própria galeria de fotos. Espero que ajude.
Uma última dica: Se pretende usar esse arquivo em várias galerias diferentes dentro do seu site, é extremamente recomendável que você separe o CSS, crie uma folha de estilos individual e a use como um link na página para que suas alterações reflitam em todas as galerias simultanemante.

5 sites essenciais para Designers

Domênico Citrângulo — Sun, 15 Nov 2009 12:38:56 +0000

1 – DeviantART

É uma popular comunidade virtual online voltada para arte e design onde artistas de todo o mundo podem conhecer, divulgar e compartilhar seus trabalhos. Lançado em 7 de Agosto de 2000 por Scott Jarkoff e Matthew Stephens, o site conta com mais de sete milhões de usuários e mais de 62 milhões de contribuições, recebendo aproximadamente 80.000 novas contribuições por dia. Navegar pelo DevianART é uma das melhores formas de procurar inspiração, recursos e informação sobre design.

Confira: http://www.deviantart.com/

2 – PatternTap

Criado por dois designers de interface, Matthew Smith e Chris Pollock, o site é uma imensa galeria que reúne soluções e best pratices ligadas a arquitetura da informação e, claro, design de interface. Lá pode-se navegar por centenas de bons exemplos de layout, divididos em coleções sobre navegação, formulários de contato, players de vídeo, rodapés, headers, etc… Sem dúvida, visitá-lo pode ajudar muito na hora de planejar e desenhar um novo projeto.

Confira: http://patterntap.com/

3 – Iconfinder

Ícones, ícones e mais ícones. É isso o que você vai encontrar usando o ótimo mecanismo de buscas do Iconfinder, um dos melhores lugares para encontrar o ícone perfeito, seja para o seu site ou para uma aplicação. Além de ter um biblioteca com milhares de opções (mais de 120.000), o site oferece a possibilidade de filtrar os resultados da busca por tamanho ou licença, observar como o ícone se comporta com backgrounds claros, escuros ou transparentes. E, encontrando o que você procurava, basta um clique para fazer o download em PNG transparente de alta qualidade ou do próprio “.ico”.

Confira: http://www.iconfinder.net/

4 – Dafont

É um imenso arquivo online com milhares de fontes que oferece o download grátis de todas elas. As fontes são categorizadas por tema, mas você também pode buscar pelo nome da fonte. Um recurso bastante útil é a possibilidade de definir uma palavra ou texto e exibí-lo usando todas as fontes encontradas, assim fica mais fácil saber em qual delas o nome da sua empresa ou cliente fica melhor. Encontrada a fonte, basta um clique para fazer o download, não é necessários nenhum tipo de cadastro.

Confira: http://www.dafont.com/

5 – The FWA

Esse é para quem cria usando Flash. The FWA, The Favourite Website Awards, é um site que reúne o que de melhor existe na web em termos de Flash. Lá você vai encontrar trabalhos das melhores agências online criados para clientes que querem presença forte na web e para isso investem em websites extremamente bem produzidos e visualmente impecáveis. É parada obrigatória para saber o que de mais moderno vem sendo feito e se inspirar com obras primas de designers e programadores de todo o mundo.

Confira: http://www.thefwa.com/

Bem, é isso aí. Provavelmente você até já conheça algum ou alguns deles, mas vale a pena salvar todos e sempre dar uma olhada antes de iniciar um novo projeto para se abastecer de preciosas referências.