Se você trabalha em um lugar onde freqüentemente precisa editar código escrito por outras pessoas sabe como é ruim e contra-produtivo pegar um HTML, CSS ou PHP mal organizado, sem indentação e nenhum comentário. Pois isso pode trazer muitas dores de cabeça e fazer uma simples alteração virar um inferno.

Pois o Dreamweaver tem um comando muito interessante para resolver esse problema: Commands > Apply Source Formatting. Por mais bagunçado que esteja o código, basta um clique neste comando e o Dreamweaver vai deixá-lo perfeitamente estruturado, indentado e muito mais fácil de ler e entender. Vale a pena até adotar como padrão para a sua empresa, já que não dá trabalho nenhum e permite que todo mundo entregue código com a mesma formatação. Funciona com códigos HTML, CSS, PHP, JavaScript e muitos outros.

Criação de aplicativos AIR

Você já deve saber do incrível potencial que a plataforma AIR da Adobe representa para desenvolvedores e provavelmente já deve até usar algum aplicativo desenvolvido com ela, como por exemplo TweetDeck, Grooveshark e NYTimes Reader só para citar alguns. Se ainda não sabe, sugiro que vá pesquisar agora mesmo. Principalmente porque em breve boa parte dos celulares Android serão compatíveis com aplicativos AIR.

Pois bem, ao contrário do que muitos pensam, aplicativos AIR não precisam ser necessariamente desenvolvidos com Flash ou Flex: você também pode usar HTML, CSS e imagens para criar um App e fazer a comunicação com banco de dados via AJAX. Acredite, é extremamente fácil. Tudo o que você precisa fazer é baixar a extensão AIR para o seu Dreamweaver (fornecida gratuitamente pela Adobe). Com ela você vai poder empacotar todos os arquivos usados no seu app (HTML, imagens, CSS, JS) num único instalador AIR e distribuir para download. Eu já testei e é algo sensacional, recomendo este pequeno tutorial (em inglês): Create your first HTML-based AIR application with Dreamweaver.

Para finalizar: Ctrl+D

E como última dica separei uma tecla de atalho que facilita muito a vida de quem usa o Dreamweaver para gerenciar um projeto com múltiplos arquivos linkados entre si, sejam várias páginas HTML ou arquivos relacionados (JS, CSS). Quando se tem um projeto assim é comum a necessidade de ir de um arquivo para outro, e ter que ficar navegando pela pasta para encontrar aquele arquivo para onde aponta o link é bem chato, ou mesmo ter que ficar copiando o nome, abrir arquivo, colar o nome, etc.., etc…

Então aqui vai um ótimo atalho: Ctrl+D. Toda vez que você estiver editando o código com o cursor de texto piscando sobre um link para um arquivo externo, basta pressionar as teclas Ctrl+D que o Dreamweaver abrirá automaticamente aquele arquivo, seja ele um HTML, PHP, JS ou CSS.

O arco ligando o A ao Z simboliza que a Amazon vende tudo “que seja banhado pelo sol”.  Dá forma também a um sorriso, para simbolizar que a empresa é amigável e próxima de seus consumidores.

Atlanta Falcons

Esse logo combina um falcão, símbolo da companhia, e um “F”, letra que inicia a palavra Falcons.

Chick-Fil-A

O logo da Chick-Fil-A combina a ilustração de um frango, com o “C” em destaque.

City Direct

Esse é um pouco menos óbvio: perceba que as bordas pretas que envolvem o avião formam também as letras C e D, iniciais de City Direct.

Eighty 20

Aqui sim, um logo com significado bastante oculto e interessante. Os quadrados azuis representam números “1″ e os cinzas representam “0″. Isso cria uma seqüência 1010000 na linha de cima, que representa 80 em binário, e na linha de baixo teremos 0010100, que representa 20 em binário, formando assim o nome da empresa, que em português significa “Oitenta Vinte”.

Families/Marriage

No logo Families, as vogais e a letra “L” têm tamanhos diferentes para representar uma família: o pai, a mãe e um filho.  Já os “R”s no logo Marriage estão espelhados e ligados um ao outro, representando a união do casamento.

Fashion Center

Usando como base um botão, ícone do mundo fashion, foi então adicionado um furo extra para formar a letra “F”, inicial da empresa.

FedEx

De primeira é dificil encontrar o simbolismo nesse logo, mas se olhar bem você vai notar a flecha apontando para a direita entre o ‘E’ e o ‘X’, representando precisão e velocidade, os dois principais valores da FedEx.

Forkwire

O logo dessa empresa de delivery online combina o arroba @ com um garfo, representando ao mesmo tempo o seu produto (comida) e a primeira parte do seu nome, Fork (garfo, em inglês). Reforça ainda utilização da tecnologia na entrega de comida de uma forma bem clara e óbvia para seus clientes.

Formula 1

O espaço negativo no meio cria o numero ‘1′ de “Formula 1″.

Fort Worth Zoo

O ‘FW’ vermelho de Fort Worth cria a ilustração de um elefante.

Goodwill

O logo usa um ‘g’ em caixa baixa não só para representar a primeira letra da empresa, mas também para mostrar um rosto sorridente e transmitir uma sensação positiva.

Gotham Books

Esse é auto-explicativo, as ilustrações de livros empilhados uns sobre os outros simulam um arranha-céu, marca registrada de Gotham City.

Hartford Whalers

Esse combina a cauda de uma baleia e as iniciais de Hartford Whalers ‘H’ e ‘W’.

Mosleep

Assim como o nome sugere, Mosleep é uma organização de médicos que cuidam de pessoas que têm problemas para dormir. Seu logo é a inicial ‘M’ desenhada de maneira a lembrar uma cama.

NBC

O logo da NBC possui um pavão escondido olhando para a direita, que representa o objetivo da empresa de olhar sempre para frente e nunca para trás.

Piano Forest

Esse logo combina elegantemente a silhueta de árvores para formar as teclas de um piano.

Schizophrenic

O logo mostra as emoções ambíguas de um esquizofrênico.

Unilever

Cada ícone no logo representa um aspecto do negócio da Unilever. Por exemplo, a camiseta abaixo do coração simboliza “roupas”  e representa a roupa limpinha recém saida da lavanderia.

Yoga Australia

Se prestar atenção, você vai perceber que a pose da bailarina cria o contorno do continente australiano entre a sua perna e o seu braço.

Via Webdesigner Depot

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:

<style>
body {
     text-align:center;
     margin:0;
     padding:0;
}
div {
     padding:13px;
     display:block;
     border:1px solid #ddd;
     background:#eee;
     font-size:10px;
     font-family:Arial, Helvetica, sans-serif;
     color:#999;
     margin:0 auto;
}
div.thumb {
     float:left;
     margin:0 14px 14px 0;
     padding:0;
}
div.thumb a {
     float:left;
     padding:13px;
}
div.thumb a:hover {
     background:#b70000;
}
div.thumb img {
     width:100px;
     height:100px;
}
div p {
     padding:8px 0 0px;
     margin:0;
}
div a {
     color:#666;
     text-transform:uppercase;
     text-decoration:none;
     font-weight:bold;
}
div a:hover {
     color:#b70000;
     text-decoration:underline
}
</style>

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:

<?php

  //URL onde o arquivo PHP vai ficar
  $url_galeria = "http://www.toprated.com.br/galeria.php";

 //URL onde o arquivo PHP vai ficar
  $pasta_fotos = "fotos_galeria";

  //Início da função

  $fotos = array();

  //Loop que percorre a pasta das imagens e armazena o nome de todos os arquivos
  foreach(glob($pasta_fotos . '/{*_p.jpg,*_p.gif}', GLOB_BRACE) as $image) { 

  $fotos[] = $image;

  }

  //Verifica se deve exibir a lista ou uma foto
  if ($_GET["image"] == "") {

  //Faz o loop pelo folder de imagens
  for($i=0; $i < count($fotos); $i++) { 

  //Cria cada uma das thumbs dentro de uma <div> com link para a imagem grande
  echo "<div class='thumb'>";
  echo "<a href='" . $url_galeria . "?image=" . $i . "'>";
  echo "<img src='" . $fotos[$i] . "'>";
  echo "</a>";
  echo "</div>";

  }

 } 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 <div> e insere a imagem grande de acordo com o link
  echo "<div>";
  echo "<a href='" . $url_galeria . "?image=" . $proxima . "'>";
  echo "<img src='" . $foto_g[0] . "_g" . $foto_g[1] . "'>";
  echo "</a>";
  echo "<p><a href='" . $url_galeria . "?image=" . $anterior . "'>Foto anterior</a> | <a href='" . $url_galeria . "'>Voltar para a galeria</a> | <a href='" . $url_galeria . "?image=" . $proxima . "'>Próxima foto</a></p>";
  echo "</div>";

  }

?>

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:

<iframe frameborder="0" allowtransparency="yes" scrolling="no" src="http://www.toprated.com.br/galeria.php" width="710" height="570"></iframe>

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.

O botão “Curtir” (”Like” na versão em inglês) é esse com o sinal de positivo, que substituiu o antigo botão “Tornar-se fã” (”Become a fan”), muito usado dentro do Facebook e que há algum tempo pode também ser usado dentro de outros sites e páginas.
Sites reconhecidos como modelos de boa utilização de Social Media como ferramenta de relacionamento com seus leitores fazem uso dessa ferramenta. Um bom exemplo é o Mashable.

Qual a vantagem em usá-lo?

Quando o usuário “curte” a sua página clicando sobre o botão é como se ele “dissesse” que acha aquele conteúdo interessante o bastante para indicá-lo à outras pessoas. Assim, sua página pode aparecer como sugestão para os amigos desse usuário, dentro do Facebook.
Além da questão prática, de trazer novos visitantes, adicionar possibilidades de interação estimula o relacionamento dos usuários com o seu site.

Como usar

Existem várias formas de inserir o botão na sua página. A mais simples delas, que tem o menor potencial de causar lentidão no carregamento da página ou conflito com outros scripts, é através de um pequeno iframe. Basta incluir o seguinte código no seu html:

As duas principais alterações que você precisa fazer são: colocar a URL da sua página logo após a variável “href” (substituindo o “sua url”) e ajustar a largura do iframe para que ele se encaixe no seu layout, alterando a propriedade “width”. Pronto, basta incluir este trecho de código à sua página e você terá um resultado semelhante ao que aparece abaixo:

Adicionando a um blog Wordpress

Para aqueles que utilizam Wordpress como ferramenta de publicação e gostariam de adicionar o botão Curtir ao seus posts a mecânica é praticamente a mesma. A única diferença é que você precisará editar o arquivo “single.php” do seu tema para incluir o código do iframe.

Como fazer isso:
1 - Acesse o painel de controle do seu blog Wordpress;
2 – No menu vertical esquerdo, clique no link do Editor dentro do box Aparência (Appearance);
3 – Na tela do editor, procure pelo arquivo single.php (Post único) na lista de arquivos que fica à direita da tela. Clique para editá-lo.
4 – Um bom local para colocar o botão é logo abaixo do título do post. Então procure pelo trecho de código php the_title(); e insira o código do botão logo após a sua tag.
5 – No lugar da URL (suaurl) use o código <?php the_permalink() ?> que o Wordpress substituíra pelo link de cada post.
6 – Salve o arquivo e teste um dos seus posts.

Pronto, agora é uma questão de acertar o posicionamento do botão usando CSS até ficar como você deseja.

No Photoshop, uma Action nada mais é que uma ou mais ações executadas automaticamente e em sequência, como se fosse um “passo a passo”. Essas ações são gravadas pelo usuário e podem ser executadas depois em qualquer arquivo ou em vários arquivos ao mesmo tempo.

Também é possível exportar um ou mais Actions e utilizá-las em qualquer computador, assim como fazer download de Actions na Web e usá-las no seu computador.

Ações simples

Vamos supor que você tem uma galeria de fotos no seu site e recebeu várias imagens que devem ser redimensionadas para que caibam na largura da sua galeria. Então o que você precisa é basicamente repetir os mesmos passos para todas elas:
1º – redimensionar a imagem.
2º – aplicar um leve filtro de nitidez (Sharpen) para que ela não fique desfocada.
3º – salvar a imagem em um formato compatível (JPG, GIF ou PNG).

Não é nada complicado de se fazer, mas se a sua galeria tiver 20 fotos você levará um tempo considerável para editar todas as imagens. Veja como essa edição pode ser feita com uma action:

1 – Abra uma das imagens no Photoshop;

2 – Clique no menu  Window > Actions para abrir o painel de ações;
Você deve encontrar algumas ações pré-definidas do Photoshop.

3 – Clique no botão  ”New action” ;

4 – No painel que se abre, dê um nome para a ação e escolha uma tecla de atalho (opcional). Clique em  ”Record”;

A partir de agora, todos os comandos estão sendo gravados e pertencerão à nova ação. Perceba inclusive que o botão  ”Record” do painel está iluminado indicando a gravação.

5 – Clique no menu  Image > Image Size e altere a largura da imagem para 500px. Clique em OK.

6 – Clque no menu  Filter > Sharpen > Unsharp Mask e defina os valores conforme o exemplo:

7 – Agora clique em  File > Save for Web… e salve o arquivo como JPG na pasta em que desejar;

8 – Finalize a gravação da ação clicando no botão  ”Stop” no painel Actions;

Pronto, sua ação está salva e pode ser utilizada em outros arquivos, Perceba que no painel Actions, abaixo do nome da nova ação, ficaram gravados todos os comandos utilizados.

Utilizando a Action

Agora que já tem a sua action pronta, basta aplicá-la em todas as imagens para as quais você precisa repetir os mesmos passos.
Para aplicá-la em um arquivo de cada vez, basta abrir a imagem no Photoshop e utilizar a tecla de atalho que você definiu para a Action (no meu caso, Ctrl + F12). Para aplicá-la em todos os arquivos de uma só vez, abra todas as imagens, Siga estes passos:
1 – Vá até o menu File > Automate > Batch…;
2 – Na janela que se abrirá, na caixa de seleção “Action”, escolha ação que acaba de criar (no meu caso “Galeria”);
3 – Para “Source” escolha “Opened Files”;
4 – Em “Destination” selecione “None”.

5 - Clique em OK;
Feito. Todas as imagens foram redimensionadas, receberam o filtro de nitidez e foram salvas na pasta que você havia escolhido.

Perceba que este é apenas um exemplo simples. Você pode gravar muitos outros tipos de comandos e criar actions para as mais variadas tarefas do seu dia a dia. Como disse é uma questão de costume, quando você estiver acostumado a usar actions vai perceber várias oportunidades de usá-las e poupar tempo.

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

free pixey birrrdfon twitter icons

Freebies: 2 Awesome Twitter Icons

Twitter Square Icons

Twitter Block Icons

Please Don’t Tweet Me! Free Thanksgiving Turkey Twitter Icons

Twitter Icons Pack by Hasan Huseyin Gunes

REDmillion Stupid looking Twitter Bird

Twitter Icon

Archigraphs Bird Dock Icons

Twitter dock icons

Tweetman Twitter Icons

Twitter Icons

Twitter Style Bird Icons

Twi-birds icons

Twitter Icon

IconTexto Twitter Buttons

Twitter Eggs

Twitter Icons with Attitude

Soccer Twitter for OzTips

Mad Scientist Twitter Icon

Twitter Birds

Twitter Bird Icon Set

Twi-birds icons

Cute Twitter Icon Pack-II

Twitter Icons

40 Cute Free Twitter Graphics: Badges, Icons & Buttons

The Cutest Freebies: Twitter Bird Icons & Illustration

Lovely Twitter Icons by Catmy

Twitter 1

Twitter 2

Twitter 3

Tweet Tweet Cute Tweet: Another Free Twitter Bird Icon

twitter icon by antonist

tweet bird

Twitter Bird by freakyframes

Twitter bird icon

IconTexto Webdev Social Bookmark

Birdies: Cute Free Twitter Icons For Your Blog

Download your Free Twitter Bird

Free Twitter Buttons & Tags

Free TwitterFun Icons

Tweetbird Free Twitter Icon

Tweeties: a Free Twitter Icon Set

Twitter Bird Icons 01

Tweetle

50 Free and Exclusive Twitter Icons

Inside twitter icon

Twitter icon

Twitter Icon

Free Twitter Bottle Cap Icons

Colorful Twitter Icons

Freebie: Exclusive Twitter Birds Set!

The Social Bird icon set – The First Inspired Release

Colourflow : Twitter icon

Free Twitter Air Freshener Icons

Twitter icon

Algumas das melhores coisas do Wonderfl (http://wonderfl.net) são suas funcionalidades de comunidade. Usuários cadastrados podem “garfar” (fork em inglês) trechos de código de outras pessoas e modificá-lo para criar algo totalmente novo. Todos os usuários são rankeados de acordo com o número de contribuições, o número de vezes que seus arquivos foram utilizados por outras pessoas, o número de linhas em cada código e o número de pessoas que favoritaram os seus arquivos.

Além de ser um ambiente colaborativo perfeito para desenvolvedores Flash, Wonderfl é um ótimo lugar para estudar e aprender ActionScript 3. Lá você encontra aplicações criadas pelos melhores programadores e designers e pode ver como elas foram feitas, além de poder editá-las e ver em realtime o que cada alteração pode produzir.

E se tudo isso não bastasse, é claro que navegar pelos arquivos e projetos do site é uma maneira infalível de buscar inspiração e novas idéias. Veja abaixo alguns exemplos do que andam fazendo por lá:

Force Field with Bresenham’s line and Sparkle

MouseGrowEffect

RainyDay

Particles and Motion blur