Muito do trabalho de desenvolvimento web é realizado usando ferramentas e recursos de terceiros. Os desenvolvedores web sabemos fazer o que precisamos, mas, convenhamos, é bem mais simples, rápido e prático nos valermos de ferramentas de desenvolvimento web já prontas, que facilitam nosso trabalho e aumentam nossa produtividade.

Loaders (ou Ícones de Loading)

É comum o desenvolvimento de sites utilizando AJAX. Toda vez que for preciso usar um GIF animado, você pode consultar alguns sites para gerar e/ou baixar GIFs de animação para loading.

• AJAX Activity Indicators
• Ajax Loading Gif Generator
• Ajaxload
• Chimply
• Load Info
• Preloaders.net

Compatibilidade e Suporte CSS

As folhas de estilo possuem muitas propriedades e valores para suas regras e, com a imensa gama de browsers e peculiaridades de cada um, é sempre bom ter alguns guias de compatibilidade e suporte CSS à disposição.

• CSS3 and HTML5 Properties & Applications;
• CSS Compatibility and Internet Explorer;
• CSS contents and browser compatibility – mobile
• CSS Filters (CSS hacks);
• CSS print media browser conformance;
• Compatibility table: CSS3 Selectors;
• Experimental CSS compatibility table;
• Guide to CSS support in email clients;
• W3C DOM Compatibility – CSS;
• Web Browser CSS Support.

.htaccess

Na maioria das vezes é importante e útil configurar algumas coisas no site através do .htaccess. Para algumas operações básicas, não deixe de conferir alguns geradores de .htaccess.

• .htaccess Banning Generator (beta);
• .htaccess Editor;
• .htaccess redirect;
• .htaccess URL Rewrite;
• Htaccess Tools;
• Online .htaccess generator and builder;
• Webmaster Tools – .htaccess Generator.

Otimizadores e Formatadores de CSS

Ter um set de folhas de estilo otimizado faz parte da tarefa de qualquer desenvolvedor front-end. Para melhor ainda mais a performance das CSS, é bom fazer uma “limpeza” através de algumas ferramentas úteis (lembrando de ter sempre um backup dos arquivos originais).

• Clean CSS;
• Code Beautifier;
• Compress CSS;
• CSS Code Formatter and Optimizer;
• CSS Code Optimizer;
• CSS Compressor of Lottery Post;
• CSS Drive CSS Compressor;
• Format CSS Online;
• Online CSS Optimiser / Optimizer;
• Robson CSS Compressor.

robots.txt

Saber quais partes do site serão disponibilizadas para indexação nos mecanismos de busca e quais serão bloqueadas é parte fundamental para uma estratégia de SEO funcionar. Para facilitar o trabalho, conferir algumas ferramentas para trabalho com robots.txt pode ser interessante.

• Evil Demo Robots.txt Generator;
• Gerador de Robots.txt;
• Pixelfolk  Robots.txt Generator;
• Robot Control Code Generation Tool;
• Robots.txt Builder
• Robots.txt Generator Tool;
• SEOTools Robots.txt File Generator;
• SEO-watch. Robots.txt Generator;
• Sitemaps XML format;
• Yonego Robots.txt generator;

Favicons

Para trabalhos de construção de marca, até mesmo detalhes como os favicons são importantes! Se seu site ainda não tem um favicon, não perca tempo e crie agora mesmo!

• 256 pixels;
• favicon2dots;
• FavIcon from Pics;
• favicon.ico Generator;
• Favicon Generator;
• Favicon Generator DeGraeve.com;
• FavIcon Generator Dynamic Drive;
• Favicon Generator & Gallery;
• favicon maker v1;
• favikon;
• Genfavicon;
• Project Fondue Favicon Generator.

Sitemaps

Sitemaps são fundamentais para uma indexação eficiente nos mecanismos de busca. Ajude o trabalho deles e eles ajudam o seu, essa é a regra. E, se você tem dúvidas de como criar um sitemap para seu site, essas ferramentas certamente vem em boa hora.

• Create an XML Sitemap;
• Google (XML) Sitemaps Generator for WordPress;
• Online XML Sitemap Generator Free Online;
• Google XML Sitemap Generator;
• SitemapDoc – Google Sitemap Generator and Editor;
• XML Sitemaps Generator

Heatmaps e Gravadores de Tela

Heatmaps (ou Mapas de Calor) e Gravadores de Tela são excelentes ferramentas para análise de usabilidade. Através de resultados de análises de mapas de calor, é possível aprimorar toda a estrutura de um web site para melhor.

• clickdensity
• ClickHeat
• ClickTale
• Crazy Egg
• Mouseflow

Plugins Firefox

Usando alguns plugins excelentes para Firefox, o desenvolvimento web se torna ainda mais prazeroso e divertido! Confira os principais e essenciais plugins para auxiliar no desenvolvimento para web.

• ColorZilla
• CSS Reloader
• Firebug
• FireShot
• FireFTP
• NoScript
• Page Speed
• SEO for Firefox
• Web Developer
• YSlow

Artigos Relacionados

• Usando Modernizr para detectar features de HTML5 e CSS3
• Como otimizar códigos jQuery e aumentar a performance do front-end
• 5 dicas para temas WordPress melhores
• 7 ferramentas para web designs melhores
• 8 dicas para fazer códigos melhores com jQuery
• Truques de configuração do WordPress
• Pergunte-se a si mesmo: questões para desenvolver um bom site
• Dicas para otimizar códigos PHP
• Microdata API e Schema.org: dando significado ao HTML
• Não use IDs como seletores em CSS

É fato que o plugin NextGEN Gallery do WordPress é o melhor quando o assunto é gerenciamento de galerias de imagens. Com NextGEN Gallery é possível criar galerias facilmente, acrescentar/retirar imagens em modo batch (é possível enviar um arquivo .zip e ele “abre” as imagens numa galeria), dá pra criar álbuns, copiar/transferir imagens entre galerias, inserir marca d’água automaticamente, enfim, o NextGEN Gallery é bem conhecido na comunidade WordPress e certamente está no “Top 5″ de plugins!

Existe, também, apesar não ser tão conhecido, um script à “lightbox” muito bonito e interessante: SexyLightBox. Como é possível ver em sua página, o efeito que ele oferece é bem interessante e, de certa maneira, diferenciado dos outros lightboxes que encontramos por aí (ênfase ao fato de as imagens serem apresentadas em tamanho completo respeitando a resolução do navegador do visitante).

Aproveitando que o NextGEN Gallery oferece a possibilidade de se utilizar script de terceiros para a exibição de suas galerias e somado ao fato de que o SexyLightBox é realmente interessante… NextGEN Gallery + SexyLightBox = Galerias de Imagens Sexy!

Baixando, instalando e configurando NextGEN Gallery

O primeiro passo é baixar e instalar NextGEN Gallery no seu WordPress. Devido ao fato de eles serem de “naturezas” diferentes (o primeiro é um plugin do WordPress; o segundo é um script que pode ser usado em qualquer tipo de site), a maneira de instalar e usar cada um deles é diferente.

Para o NextGEN Gallery, devido ao fato de ser um plugin do WordPress, a instalação é aquela, mesma, que já estamos acostumados:

• Baixar o NextGEN Gallery;
• Descompactar em sua pasta wp-content/plugins;
• Habilitar o plugin.

Depois, perceba que aparece em seus menus um novo módulo, “Gallery”, com subopções para controle do NextGen.

É possível traduzir as opções para vários idiomas, inclusive Língua Portuguesa. Baixe o pacote Portuguese / Brazilian Português [pt_BR] nas traduções oficiais e faça upload do arquivo .mo para wp-content/plugins/nextgen-gallery/lang e, automaticamente, os menus serão traduzidos.

Painel NextGen Gallery em Língua Portuguesa

Para já preparar o NextGen para trabalhar com o SexyLightBox, acesse em seu painel WordPress Galeria > Opções > Efeitos e altere as opções para:

• Efeito Javascript para miniaturas: Personalizado;
• Linha de código do link: rel=”sexylightbox”.

Baixando, instalando e configurando SexyLighbox

Vá até o site oficial do SexyLighbox para fazer download do SexyLightbox. Depois, é preciso subir a pasta descompactada para o servidor.

Não sei você, mas eu costumo criar uma pasta “js” dentro do meu tema para tudo ficar organizado e eu poder usar as funções de caminho relativo do WordPress tranquilamente. Então, uma estrutura que eu usaria para o caso seria wp-content/themes/MEU-TEMA/js/sexy-lightbox-2.3 (essa é a versão mais atual no dia de publicação deste artigo).

Agora é o momento de chamar o SexyLightbox para que funcione em seu tema. Há muitas maneiras diferentes de mexer com chamadas a scripts no WordPress; no caso, vou mostrar uma delas e, em artigos futuros, vou comentando sobre as outras (essa é a deixa para você assinar o feed do desenvolvimento para web).

Uma coisa importante é que o SexyLighbox não é feito para ser usado em standalone, ele deve estar associado a jQuery ou Mootools. Obviamente vamos usar jQuery para o serviço!  ;-)

Então, o código com as respectivas chamadas a scripts e folhas de estilo fica assim:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexylightbox.v2.3.jquery.js"></script>
<link rel="stylesheet" href="<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexylightbox.css" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
    SexyLightbox.initialize({color:'white', imagesdir: '<?php print get_bloginfo('template_url') ?>/js/sexy-lightbox-2.3/jQuery/sexyimages'});
});
</script>

Perceba que alguns parâmetros foram passados na inicialização do script do SexyLightbox. O grande “trunfo” é usar o parâmetro imagesdir, porque na documentação está errado!

Personalizando seu SexyLighbox

Uma coisa muito boa é que há uma pasta “PSDs” no SexyLighbox para que cada um posso personalizar a aparência como quiser. Então, você pode alterar a cor de fundo, texto, alterar os elementos (setinhas, etc) e usar da forma que você quiser. Então quando você alterar a cor de fundo para o SexyLighbox ficar com a identidade visual de seu site, você vai perceber que a parte do meio da moldura ainda permanece intacta. No caso, você deve fazer um pequeno acréscimo de CSS em seu arquivo padrão (pode ser ao final):

#SLB-Contenido {
border-color:#HEXADECIMAL !important;
}

Agora você tem galerias Sexy!

Com isso, agora você galerias de imagens automatizadas e sexy! Para tirar melhor proveito disso, estude a documentação do NextGen Gallery (além dos fóruns, os tutoriais sobre NextGen de David Potter devem ajudar) e do SexyLightbox para incrementar/customizar ainda mais as galerias de imagens de seu site para que fiquem práticas, bonitas e com excelente performance.

E capriche nas imagens! ;-)

Artigos Relacionados

• Problemas comuns de WordPress e como resolvê-los
• 10 erros básicos de web design
• Cores na web: guia completo
• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• Gradiente CSS cross browser: degradês em CSS sem usar imagens
• Ferramentas para criação de wireframes
• Rolagem com fundo transparente com CSS
• 7 ferramentas para web designs melhores
• Otimização WordPress: aumente a performance e desempenho de seu blog / site

Existem muitos, muitos CMSs disponíveis. Desde os gratuitos, aos “meio-gratuitos”, passando pelos de código livre e chegando aos pagos, quem precisa de um sistema para gerenciamento de conteúdos para qualquer projeto, atualmente está muito bem servido. Muitos conhecem o The CMS Matrix, site dedicado a apresentar as principais características de CMSs e, além disso, fazer um comparativo entre muitos dos CMSs existentes. Pela listagem do The CMS Matrix, é possível ter uma noção da quantidade dos sistemas de gerenciamento disponíveis.

Dentre os CMSs disponíveis, fiquei, recentemente, sabendo de um CMS muito interessante e diferente dos que estamos acostumados a encontrar: é o CushyCMS. O CushyCMS tem um “conceito” diferente dos outros CMS; ao meu ver, é um conceito até inovador – pelo menos para mim.

Funcionamento do CushyCMS

Como disse, o sistema de funcionamento do CushyCMS é diferente do da maioria dos CMSs disponíveis no mercado. Inicialmente, é preciso fazer cadastro no site oficial do CushyCMS.

Depois disso, você tem acesso a um painel de controle bem interessante, no qual é possível “adicionar” os sites que você quer gerenciar. Na verdade é bem simples: basta fornecer o endereço do site, passar as informações de FTP (eu sei, pode ser arriscado fazer isso; entretanto, o CushyCMS até hoje se apresentou como um sistema bem eficiente e seguro) e configurar qual é a pasta raiz do site.

O próximo passo é estabelecer quais páginas serão editáveis a través do Cushy, selecionando-as em um painel AJAX bem interessante. É só escolher um nome que identificará aquela página e selecionar sua localização.

Então, para começar a efetivamente editar as páginas que você quer é que entra o “esquema” do CushyCMS que eu considero fantástico! Para o sistema identificar quais partes do conteúdo das páginas serão editáveis, é preciso que estas tenham elementos cuja classe seja “cushycms”. Simples assim: somente acrescentar uma classe CSS de nome cushycms a qualquer elemento da sua página (é aceitável em DIVs, também) para que estas partes “assinaladas” sejam as partes editáveis do conteúdo. Por exemplo:

<p class=”cushycms”>Parágrafo editável através do CushyCMS!</p>

Com isso, você conta, somente nas áreas que especificou, com a edição de imagens, parágrados, títulos e quaisquer elementos de sua página com a comodidade de um editor WYSIWYG à sua disposição!

E sabe o que é melhor? É possível liberar acesso a outras pessoas para editar somente determinadas páginas de seu site! Isso mesmo: você pode especificar quantas pessoas quiser para serem editores de seu site; então, para organizar o processo, você estabelece quais páginas cada um vai poder editar. Quer dizer, é um sistema de permissões de usuários sem saber e/ou precisar de escrever sequer 1 linha de programação!

Vale a pena utilizar o CushyCMS?

Pessoalmente, acredito que sim, vale a pena utilizar o CushyCMS. Principalmente para os que ainda não sabem programar ou não se interessam pelo assunto, mas desenvolvem sites que precisam de um conteúdo dinâmico para apresentar aos clientes, o CushyCMS é certamente uma ótima opção a ser levada em conta!

Dê uma olhada no screencast de demonstração do CushyCMS e veja de forma mais dinâmica o sistema em funcionamento.

Já usei o Cushy em algumas páginas de testes e tudo saiu conforme o esperado e prometido. E você, já conhecia este sistema para gerenciamento de conteúdo e/ou quer compartilhar suas experiências? Comente!

Artigos Relacionados

• Problemas comuns de WordPress e como resolvê-los
• Microdata API e Schema.org: dando significado ao HTML
• Usando Modernizr para detectar features de HTML5 e CSS3
• Estratégia de Conteúdo ou Content Strategy
• JSON – JavaScript Object Notation
• URLs longas apresentadas corretamente com CSS
• Erros comuns em desenvolvimento web para campanhas de SEO
• Textarea: dicas e truques que você sempre quis saber
• URLs amigáveis (slug) à WordPress
• Gradiente CSS cross browser: degradês em CSS sem usar imagens

Quando recebemos a proposta de um trabalho para o desenvolvimento de logotipo, por exemplo, mesmo com um briefing de qualidade em mãos, às vezes não estamos tão inspirados para o job… Certamente que é preciso captar o “espírito” da empresa ou instituição para realizar um trabalho de qualidade e, para auxiliar nesta tarefa, pode ser útil observar os trabalhos de alguns colegas para “chamar” a inspiração.

Dentre os tantos sites e respositórios de logos que existem na web, indico 10 que, considero eu, são de muita qualidade e apresentam os trabalhos de designers excelentes de todo o mundo, inclusive do Brasil. Certamente a relação de fontes de inspiração para fazer logos de qualidade vai ajudá-lo com futuros trabalhos.

Carbonmade

Carbonmade é um repositório de logos (e outros trabalhos) no qual os próprios designers publicam seus trabalhos em um “unir o útil ao agradável” bem feito, ajudando os colegas com a inspiração e fazendo um promoção de seu próprio trabalho. Há divisão por categorias que, quando acessadas, mostram quem faz parte de cada uma e dá acesso a seu portfolio.

LogoPond

O LogoPond já consta em meu delicious faz tempo! Pessoalmente, considero o LogoPound como um dos melhores sites para se visitar quando se precisa de inpiração, pois os trabalhos lá expostos são de altíssima qualidade! Mesmo quando somente para ver as útlimas novidades, vale a pena frequentar o LogoPound!

LogoSauce

LogoSauce também não conheço há tanto tempo, assim, entretanto, já o visito com certa regularidade quanto o assunto é inspiração para logotipos. Ele é do mesmo esquema de os próprios designers enviarem seus trabalhos para a formação das galerias. Apesar de não ser algo tão seleto quanto o Carbonmade, por exemplo, considero como ponto forte seu sistema de pesquisa.

GMK Free Logos

O GMK Free Logos também é uma ótima fonte de inspiração para logotipos. É bem fácil se orientar no site e os pontos fortes ficam por conta do detalhamento das informações sobre os logos e a facilidade de se fazer downloads deles. Nada de plágio, hein, pessoal!

logotypes.lv

O logtypes.lv tem um método de navegação baseado em ordem alfabética. Apesar de haver excelentes trabalhos expostos por lá, infelizmente não é tão fácil ver a imagem do logo quanto os outros indicados. Em compensação, também é bem simples realizar o download dos trabalhos que constam no logotypes.lv.

logotypes.ru

Provavelmente dos mesmos mantenedores do logotypes.lv, o logotypes.ru apresenta a mesma forma de navegação por ordem alfabética e igualmente disponibiliza o download dos trabalhos de forma fácil – também, os cliques extras até se poder visualizar os logos… Também conta com um sistema de pesquisa.

lo8os

Com uma estrutura bem simples e intuitiva, o lo8os apresenta trabalhos de qualidade em seu repositório (trabalahos compartilhados justamente com o fim de inspiração entre os colegas de profissão). O sistema de classificação é por categorias e é possível visualizar, separadamente, os logos mais votados e os mais visualizados – e conta com sistema de notificação de novidades por feed.

LogoLounge.Com

LogoLounge.Com disponibiliza, além de logos para visualização – que são enviados pelos próprios freqüentadores do site -, artigos de alto nível sobre o mercado da área, inclusive com apontamento de inclinações e tendências do mercado. Realmente vale a pena assinar seu feed para receber as últimas notícias sobre logos!

Brand New

Este não é um repositório de logos, propriamente dito. Na verdade, o Brand New é um blog no qual logotipos são analisados e os visitantes também fazem comentários a respeito de cada um apresentado. Para quem procura algo mais que simples visualizações de logos para inspiração, ter contato com as idéias e opiniões de terceiros também é fortemente indicado para a inspiração surgir!

Logo Design Love

Tenho um apreço especial pelo Logo Design Love por ser um blog que eu acompanho há muito tempo. Desde sempre ele apresenta artigos da mais alta qualidade sobre logotipos e tendências – o que é ótimo para inspiração – e não raramente faz ótimas compilações de logos e divulga notícias sobre os acontecimentos mundiais da área.

Uma dica para ter inspiração nas horas de “aperto”

Existem muitos outros sites sobre logotipos, prontos para serem explorados, vasculhados e esmiuçados por você! Certa vez li numa publicação de design sobre a técnica de guardar as peças que agradam em uma caixa ou pasta para consulta futura. Por que não fazer o mesmo em relação a logotipos?

Certamente que não é preciso imprimir cada um e colocar numa caixa ou pasta, basta um diretório em seu computador reservado para isso. Separando os melhores logotipos, os que mais lhe agradam, para uma pesquisa posterior, quando surgir a conveniência/necessidade, certamente poupará muito tempo e você vai ter sua fonte de inspiração para logos pessoal.

Conhece algum outro site para inspiração de logos? Faça um comentário e diga qual é!  ;-)

Artigos Relacionados

• Usando Modernizr para detectar features de HTML5 e CSS3
• 8 características de User Interfaces (UI) de sucesso
• Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento
• Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade
• Evitando erros comuns de HTML5
• Microdata API e Schema.org: dando significado ao HTML
• Desenvolvedores front end e o mercado
• Não use IDs como seletores em CSS
• Como usar .ready() antes de incluir a jQuery
• Elementos de design aplicados à web

São indicações de tutoriais, exemplos, apostilas e macetes de jQuery, tanto de tutoriais individuais, quanto web sites inteiros dedicados ao framework! Gostei especialmente dos links sobre uso de AJAX com jQuery!

Enfim, mais uma belíssima compilação do Noupe sobre este framework javascript que, com certeza, é o mais leve, fácil e eficiente disponível hoje em dia!

Artigos Relacionados

• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• Newsletter no WordPress com o plugin Ajax Newsletter (wp-ajax-newsletter)
• Problemas comuns de WordPress e como resolvê-los
• Evitando erros comuns de HTML5
• Microdata API e Schema.org: dando significado ao HTML
• Usando Modernizr para detectar features de HTML5 e CSS3
• Como usar .ready() antes de incluir a jQuery
• JSON – JavaScript Object Notation
• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores

Esta é uma página do desenvolvimento para web sobre ícones que está em constante atualização, na qual sempre que encontrar bons ícones profissionais para download vou atualizar o texto e indicar onde baixar. Certamente será muito útil para os que mexer com design para web e precisam de fazer download de bons ícones de alta definição e qualidade!

Icon sets do Smashing Magazine

Vi no feed do Profissionais da Web a indicação de uma ótima lista de ícones para baixar! Os “garotos da web” não exageraram quando disseram queé sem dúvida alguma a seleção dos ícones mais bonitos disponíveis na internet! Aliás, a Smashing Magazine freqüentemente compila listas de recursos web, como, por exemplo, aquela de 70 tutoriais para Photoshop.

Não espere mais para baixar os melhores ícones da internet!

Ícones Crystal e Open Office

Saiu no site do Everaldo a nova fornada de belos ícones da série Crystal Project para baixar! E mais uma leva com quase 6000 ícones de altíssima definição que são usados em diversas distribuições Linux.

Coquette Icons, do DryIcons

O pesoal do DryIcons.com já é conhecido pela qualidade de seu trabalho. Liberaram o pacote de ícones Coquette Icons (em ICO, PNG e ICNS), cujo visual é bem moderno e descontraído, ao mesmo tempo em que apresenta “uma pitada” de “sobriedade”. É possível baixar e usar de graça, mas a licença comercial custa US$14.75.

50 Most Beautiful Icon Sets Created in 2008

O noupe mais uma vez com excelente conteúdo, dessa vez disponibilizando uma coletânea dos melhores icon sets de 2008. Realmente vale a pena conferir esse ícones!

50 Beautiful Free Icon Sets For Your Next Design

Certamente esse set de ícones ultra reais vão fazer você se surpreender! São 50 pacotes de ícones realísticos para usar em projetos diversos, desde web sites a apresentações multimídia – devido à sua alta resolução.

200+ Big and Beautiful Highly Detailed Icons

E que tal mais de 200 packs de ícones de alta resolução e detalhamento? São centenas de ícones para serem usados em quaisquer projetos gráficos e que, certamente, vão garantir uma boa apresentação visual!

The Best Free Icon Sets of 2009

O WDL fez uma coletânea própria daqueles que julgou serem os melhores ícones de 2009. Confira! São ícones decorativos e ícones para interfaces de sites e sistemas online que certamente valem a pena!

The Ultimate Free Web Designer’s Icon Set (750 ícones)

A Smashing Magazine vindo com ícones de excelente qualidade para web designers! São mais de 750 ícones sobre desenvolvimento, User Interface, Bandeiras, Serviços Web, dentre outros. Confira!

31 Free Clean Icon Sets For Minimal Web Design

Que tal mais de 30 sets de ícones minimalistas para web design? Pois é isso o que você vai encontrar na excelente compilação de ícones minimalistas feita pelo pessoal da 1stwebdesigner. Veja agora!

150+ best icon sets of 2010

Os maníacos por ícones do blog da IconShock fizeram uma seleção com o que eles consideraram ser os melhores ícones do ano de 2010. Eles são especialistas em ícones e, quando eles dizem que esses são os melhores de 2010, eles sabem o que estão falando! Confira o 150+ best icon sets of 2010.

Google Plus Free Interface Icons

Que tal usar os ícones do Google+ em seus projetos, também? Suas formas simples e, ao mesmo tempo, extremamente comunicativas, podem ser uma boa pedida para aquele seu site ou sistema web com alguns controles e interações.

Então confira os ícones do Google+ e veja sua definição e qualidade!

Mais de 250 ícones de qualidade e alta definição: Aroma

Mais um fabuloso set de ícones incríveis para se usar em web sites, sistemas virtuais, intranets e em qualquer outro ambiente online em que um bom toque de webdesign seja necessário. No set de ícones Aroma, você encontra mais de 250 opções de qualidade!

Best Of 2011: Outstanding Collection Of Fresh And Free To Use Icon Sets

Que tal uma coletânea de coletâneas de ícones? É isso que você vai encontrar no artigo sobre os melhores pacotes de ícones de 2011! São ícones fabulosos, de alta definição e qualidade, grátis para serem usados em qualquer projeto!

Artigos Relacionados

• Ícones de setinhas para download (grátis)
• 10 erros básicos de web design
• Cores na web: guia completo
• Gradiente CSS cross browser: degradês em CSS sem usar imagens
• Rolagem com fundo transparente com CSS
• 7 ferramentas para web designs melhores
• NextGEN Gallery com SexyLightBox: sua galeria de imagens mais sexy
• CSS float: considerações, dicas e macetes para bons layouts na web
• Tipografia com foco ao web design: considerações sobre fonte, tipo, tipologia e tipografia
• Dicas para um web design minimalista e usável

Trata-se de uma fabulosa lista com 25 extensões para Firefox que tem o objetivo de aumentar a produtividade pessoal na web!

Vão desde complementos para Google, GMail e Google Reader, passando por bloqueadores de banners de anúncios e backups das configurações e complementos do Firefox, até contadores para saber quanto tempo você realmente passa na web.

Vale mesmo à pena conferir a lista de plugins para Firefox para aumentar a produtividade no dia-a-dia!

E para os aficcionados em produtividade, desenvolvimento pessoal e assuntos correlatos, não deixem de conferir o blog do Walmar (agora com “équio” de madeira… rsrs)!

Artigos Relacionados

• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• 30 extensões para Firefox que vão mudar sua vida na web (para melhor)
• Desenvolvimento para web 2.0
• Problemas comuns de WordPress e como resolvê-los
• Usando Modernizr para detectar features de HTML5 e CSS3
• Não use IDs como seletores em CSS
• Como usar .ready() antes de incluir a jQuery
• Como otimizar códigos jQuery e aumentar a performance do front-end

O trabalho dos profissionais e/ou novatos em Search Engine Optimization (ou, como prefiro, otimização para mecanismos de busca), entretanto, às vezes é fatigante (em outras palavras, chato). Para isso existem as ferramentas SEO para auxiliar os atuantes da área.

Vi no feed do Webinsider a indicação de uma ferramenta SEO que, na minha opinião, é uma das mais úteis que existe atualmente: Google Keyword Popularity, da tele-pro.

Esta ferramenta utiliza o Google Web API para comparar o número total estimado para as buscas pelas palavras chave escolhidas. Em outras palavras, você informa uma lista de palavras-chaves que quer comparar e ele retorna qual delas é a melhor opção. Uma coisa importante: o resultado apresentado equivale ao número de página encontradas numa buca por aquelas palavras, e não o número de vezes que elas foram procuradas.

É extremamente útil saber qual das palavras-chave que se está querendo usar é a mais procurada na internet para evitar que se faça uma “otimização às avessas”, quer dizer, incluir termos nas páginas que, erroneamente, pensava-se que seriam os melhores.

Por exemplo: quais palavras utilizar para otimizar uma página sobre filmes: “filme” ou “filmes”? Utilizando a Google Keyword Popularity, é possível saber que o número de páginas encontradas para a primeira é 215 000 000 e para o segundo 9 150 000. Claro que, para o exemplo, utilizar as duas seria o mais indicado.

Uma outra tática que se pode usar é ver quais as palavras com resultados maiores e utilizar as que tem resultados menores! A princípio, pode parecer um contra-senso; entretanto, pode aparecer a situação em que seja desejável explorar um “nicho” ainda em ascensão.

A partir de hoje, pelo menos para mim, a Google Keyword Popularity é indispensável!

Artigos Relacionados

• Como otimizar imagens para web: guia de otimização de imagens
• Não use IDs como seletores em CSS
• Elementos de design aplicados à web
• Erros comuns em desenvolvimento web para campanhas de SEO
• Estratégia Web de Pirâmide: guia para uma estratégia de web equilibrada
• 6 mitos de SEO que você deve evitar
• Estatísticas sobre comportamento nas mídias sociais
• 8 características de User Interfaces (UI) de sucesso
• Pergunte-se a si mesmo: questões para desenvolver um bom site
• Boas práticas de SEO para seu site na primeira página do Google

Um identificador de fontes é bastante útil  para saber qual fonte foi utilizada para compor uma imagem. Identificar uma fonte é imprescindível quando surge a necessidade de se aplicar um tipo diferenciado ao projeto e você viu, justamente, em uma “imagem de texto”. O What The Font é um aplicativo web que identifica a fonte que foi utilizada em alguma imagem.

Passo-a-passo do WhatTheFont

Quando se acessa o site do WhatTheFont, a primeira coisa é fazer o upload de um arquivo ou especificar um URI com a imagem que se quer identificar a fonte.

Como consta nas próprias dicas de submissão/indicação de imagens, melhores resultados serão apresentados quando a fonte contida na imagem possuir as seguintes características:

• Caracteres que tenham a forma bastante distinta na imagem
• Imagens com fontes não editadas diretamente
• Texto deve ser o mais horizontal possível

Depois do upload ou indicação da URI da imagem, é preciso confirmar para o WhatTheFont se as letras que ele reconheceu realmente são válidas: digitar em vários campos a respectiva letra destacada.

Neste ponto, possível o WhatTheFont vai querer que se identifique, também, possíveis elementos gráficos da imagem que não as próprias fontes. Se for o caso, basta deixar o campo vazio e prosseguir.

Ao final do processo, então, as possíveis fontes identificadas serão indicadas e, caso realmente sejam uma daquelas indicadas, parabéns, você acabou de identificar a fonte!

Conclusão

Como foi visto, quando for preciso identificar uma fonte para um projeto, é possível fazer isso usando o WhatTheFont. E, dependendo do caso, se for preciso comprar a fonte, é possível fazer isso diretamente através do resultado de identificação da fonte.

Obviamente não serão possível identificar a fonte em 100% dos casos, mas, certamente, vale a pena experimentar o uso para começar a identificação, já que, caso se consiga, muito do trabalho é poupado.

Portanto, o WhatTheFont, mesmo não sendo eficaz em todas as vezes que é usado, certamente merece um voto de credibilidade e indicação!

Artigos Relacionados

• 10 erros básicos de web design
• Gestalt aplicado ao design web (parte 6): princípio da experiência passada
• Gestalt aplicado ao design web (parte 5): exemplos web do princípio do alinhamento
• Gestalt aplicado ao design web (parte 4): princípio da boa continuidade ou princípio do alinhamento
• Gestalt aplicado ao design web (parte 3): exemplos web do princípio da proximidade
• Gestalt aplicado ao design web (parte 2): princípio da proximidade
• Gestalt aplicado ao design web (parte 1): origem do termo, significado e utilidade
• Evitando erros comuns de HTML5
• Não use IDs como seletores em CSS
• 10 dicas que desenvolvedores web iniciantes devem saber