Quer ganhar 1 ano de Basekit Conta Negócios com 1GB de armazenamento, 1 domínio incluído e Suporte Premium? Então continue lendo o artigo e saiba como ter acesso grátis durante 1 ano inteiro a uma das melhores plataformas de criar sites do mundo!

Sobre a Basekit

Criada com o propósito de revolucionar o web design, a Basekit atualmente é referência na área de construção de sites no mundo, sendo a plataforma preferida de algumas das maiores empresas do mundo de hospedagem, como Hostgator, 123Reg, Acens e Gandi. Acesse o site da Basekit e assista ao vídeo de apresentação. Você vai entender o motivo!

Fundada em 2008, foi premiada no Seedcamp, um importante evento de incentivo ao empreededorismo na Europa, e, pouco tempo depois, recebeu um round de investimentos avaliado em US$ 10 milhões, da Eden Ventures, Nauta Capital e NESTA (fundos europeus de capital de risco).

Eleita pelo jornal Sunday Times como a melhor empresa de construção de sites do mundo em 2011, a Basekit tem auxiliado mais de 100 mil pequenos empresários e web designers (mais de 95% do total) em todo o mundo a criar sites funcionais e atraentes de maneira inteligente e rápida.

No caso dos designers, a empresa vem desenvolvendo uma ação de crowdsourcing batizada de “Basekit Pro”, por meio da qual os profissionais recebem uma série de incentivos, entre os quais estão a hospedagem gratuita dos sites que criam e a indicação para a realização de Jobs em todo o país.

A empresa opera atualmente com mais de 50 funcionários, com sedes em Londres, Bristol, Barcelona e São Paulo, e mantém parceria com empresas de renome, como a Telefônica, que prevê 50% de desconto na criação de sites por um ano para as empresas que se cadastrarem no Portal “Sua Empresa, Nosso Negócio”, e o Grupo britânico UK2 (especializada em servidores para grandes empresas), que contribuiu para tornar a criação de sites mais fácil e acessível a todos os consumidores.

Como ganhar 1 ano da Basekit Conta Negócios

Deu pra ver que a plataforma é uma ferramenta de primeira qualidade! E você pode ganhar 1 ano grátis da Conta Negócios, que tem:

• Hospedagem incluída
• Páginas ilimitadas
• 1Tb de banda larga
• 1Gb de armazenamento
• Suporte Premium
• Mais de 50 temas de sites disponíveis
• 1 domínio incluído
• R$30 Google Ads voucher
• Paypal

Para concorrer, é fácil: basta fazer um comentário neste artigo! É isso, mesmo, ao fazer um comentário neste artigo, automaticamente você estará concorrendo a 1 ano da Conta Negócio da Basekit. Mas não valem comentários do tipo “Legal”, “Entrei” ou “Tow nessa”. Escreve pelo menos 1 ou 2 linhas explicando o porquê de você querer ganhar a promoção. Ah, e só vale 1 comentário por pessoa, hein!

Você tem até dia 6 de fevereiro, exatamente 1 semana, para comentar e concorrer. Quando o tempo expirar, o número total de comentários será jogado em alguma ferramenta de sorteio para determinar quem é o ganhador.

Boa sorte!  ;-)

Artigos Relacionados

• Nenhum artigo relacionado...

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

• 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
• Como fazer loading em conteúdos do site
• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber

É 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

• 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
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin

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

• 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
• Melhores editores WYSIWYG para seu projeto
• 15 fantásticos comandos SQL para WordPress
• Breadcrumbs: guia completo com exemplos e melhores práticas

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

• 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
• Elementos de design aplicados à web
• JSON – JavaScript Object Notation
• Cores na web: guia completo
• Erros comuns em desenvolvimento web para campanhas de SEO
• Melhorando a interação em formulários de busca
• Estratégia Web de Pirâmide: guia para uma estratégia de web equilibrada
• Ferramentas para criação de wireframes

WordPress é, sem dúvida alguma, o melhor CMS (“Content Management System” ou Sistema de Gerenciamento de Conteúdo) focado em blogs que existe atualmente. Obviamente que é possível, também, adaptar o WordPress para montar web sites “tradicionais” mas, como disse, seu foco são os blogs.

Um dos motivos que tornam esta ferramenta tão útil e procurada por desenvolvedores web e/ou pessoas querendo montar/melhorar um blog é, sem dúvidas, a possibilidade de aumentar/incrementar suas funcionalidades através da instalação de extensões; extensões estas, ou plugins, desenvolvidas por terceiros, em sua quase totalidade gratuitas, com o objetivo principal de aumentar a capacidade e recursos que o CMS WordPress oferece nativamente.

Existe uma seção especial no web site oficial do WordPress, o Pugin Directory, que serve, na verdade, como uma base oficial de plugins que terceiros desenvolvem/atualizam pelo mundo. Aquele que desenvolve sua extensão a submete à base de dados ofical de plugins para WordPress e, através de buscas por expressões e/ou acesso a categorias específicas, é possível encontrar os que foram cadastrados.

O fato de o Plugin Directory ser a base oficial de armazenamento de plugins para WordPress não significa que seja o único. Procurando pela web, não é demorado encontrar compilações de extensões para a plataforma, diretórios não-oficiais, indicações de extensões, e muito material relacionado à expansão das funcionalidades e características do WordPress.

Inclusive, já citei algumas aqui no desenvolvimento para web, que foram:

• Os melhores e mais usados plugins para WordPress;
• Excelentes plugins para WordPress, feitos por um brasuca.

Navegando pela web, recentemente descobri um diretório não-oficial de extensões muito interessante: “I want a WordPress Plugin to…“! Através de um sistema de tags, este diretório de plugins indica, de forma rápida e fácil, mais de 450 extensões diferentes para WP! Dentre as muitas tags que classificam todo o conteúdo do diretório, vejam o exemplo de algumas:

• Painel administrativo;
• Ajax;
• Blogroll;
• Downloads;
• E-commerce e monetização;
• SEO.

Enfim, para quem mexe com a plataforma WordPress e sabe que a instalação e uso de extensões é realmente um catalizador de suas potencialidades, que aumenta e expande aquilo que, nativamente, o sistema é capaz de realizar, confira esta excelente lista de plugins que, certamente, vai ajudá-lo em algum projeto; seja para tirá-lo de um sufoco, ajudá-lo na otimização e performance ou, simplesmente, contribuir para que sua experiência como blogueiro (e, consequentemente, a dos visitantes de seu blog ou site) seja muito melhor!

Artigos Relacionados

• 5 dicas para temas WordPress melhores
• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• Newsletter no WordPress com o plugin Ajax Newsletter (wp-ajax-newsletter)
• 30 extensões para Firefox que vão mudar sua vida na web (para melhor)
• Como usar qualquer tipo (fonte tipográfica) em seu blog WordPress
• Preciosas dicas de segurança e otimização para WordPress
• WP-Syntax: destacar códigos fonte em artigos de blogs WordPress
• Desenvolvimento para web 2.0
• WassUp: plugin WordPress para ver estatísticas de acesso (em tempo real)
• 25 extensões para o Firefox para aumentar a produtividade no dia-a-dia na 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)
• JSON – JavaScript Object Notation
• Como fazer loading em conteúdos do site
• 5 dicas para temas WordPress melhores
• Melhorando a interação em formulários de busca
• Ferramentas para criação de wireframes
• Perguntas ao cliente para antes e depois de um projeto
• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• NextGEN Gallery com SexyLightBox: sua galeria de imagens mais sexy

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)
• Mais de 450 extensões para WordPress
• Desenvolvimento para web 2.0
• Como otimizar códigos jQuery e aumentar a performance do front-end
• 8 maneiras de melhorar a performance de um site
• Ferramentas e recursos para desenvolvimento web
• Ferramentas para criação de wireframes

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
• 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
• Meta tags

Tudo está bem separadinho por categorias:

• Painéis deslizantes;
• Menus;
• Abas;
• “Acordeons”;
• Shows de slides;
• Efeitos de transição;
• Carroséis;
• Seletores de cores;
• Lightboxes;
• Validações de formulários;
• Elementos de formulários;
• Tooltips;
• Tabelas;
• Muitos, muitos outros…

Ufa! São tantas as categorias e tão bons os exemplos que, provavelmente, esta é a melhor seleção de plugins para jQuery que existe atualmente!

Pessoal, é sério: guardem esta lista com vocês (seja favoritando, adicionando no del.icio.us, navegador, ou o que quer que seja), porque, certamente, aqueles que desenvolvem com jQuery um dia precisarão de algo que está nesta lista!

Abraços e aproveitemos!

<update>
Saiu uma lista com mais 37 plugins para jQuery!
</update>

Artigos Relacionados

• Como otimizar códigos jQuery e aumentar a performance do front-end
• Wireframes para web: guia completo de desenvolvimento
• Como fazer loading em conteúdos do site
• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber
• 8 maneiras de melhorar a performance de um site
• Melhores editores WYSIWYG para seu projeto
• Breadcrumbs: guia completo com exemplos e melhores práticas
• Recursos de usabilidade grátis
• 4 elementos de design para um bom call to action

Um identificador de fontes é bastante útil  para saber qual fonte foi utilizada para compor uma imagem. Um identificar de fontes é imprescindível quando surge a necessidade de se aplicar um tipo diferenciado ao projeto e você viu, justamente, em uma “imagem de texto”.

Pesquisando, encontrei o What The Font?!, aplicativo que identifica a fonte que foi utilizada em alguma imagem.

Detalhe: esse URI que aparece no tutorial é do meu antigo blog, já que este artigo sobre identificador de fontes foi originalmente publicado lá. Com isso em mente, continuemos.

É bem simples de mexer. Basta fazer upload da imagem que quiser ou indicar a URL.

Vou utilizar esta imagem para o teste:

Depois, você dá uma ajudinha para o software, identificando algumas das letras para que ele identifique direitinho a fonte.

Para finalizar, ele apresenta uma tela com os possíveis resultados da identificação da fonte e uma prévia do texto (um pouco maluco) com cada uma aplicada.

Percebam que cada indicação da fonte é um link; é possível, clicando em cada um, ir a um web site para comprar o tipo! Indo a bons sites de fontes grátis, é possível encontrar a maioria.

Eu testei diversas fontes no What The Font?!; posso dizer que a taxa de acerto foi de, mais ou menos, 80%. Na imagem de teste deste artigo, por exemplo, o primeiro resultado já é o certo: Monotype Corsiva.

Pessoalmente, considero o sistema muito bom e muito útil! Indico fortemente o What The Font?! quando for preciso identificar fontes em alguma imagem!

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
• 10 dicas que desenvolvedores web iniciantes devem saber
• Elementos de design aplicados à web
• Wireframes para web: guia completo de desenvolvimento

Há alguns meses atrás (em relação à data de publicação deste artigo), Ariel Shamir e Shai Avidan desenvolveram um novo algoritmo para redimensionar imagens. Ele é impressionante! Graças à analise que faz, buscando pontos “menos importantes” na imagem, seu redimensionamento proporciona que, praticamente, não haja perda no resultado final da imagem que foi redimensionada. E mais: o algoritmo permite escolher partes da imagem para serem excluídos ou preservados, durante o redimensionamento.

Vejam este vídeo de demonstração do algoritmo, para terem uma idéia.

Felizmente os experts divulgaram o algoritmo! Alguns dizem que é relativamente pequeno e, até certo ponto, fácil de implementar. Justamente por isso, inúmeros desenvolvedores já fizeram plugins para programas de editoração de imagem.

Um excelente exemplo é o Liquid Rescale, do Gimp (que foi liberado e está pronto para uso bastante tempo antes de o Photoshop CS4, que tem essa função, ser lançado! Mais uma vez o software livre na frente!

Não bastasse as pessoas aplicarem o algoritmo, desenvolvendo extensões para os programas de editoração de imagem, alguns estão, inclusive, fazendo softwares online que implementam o tal! É o caso do rsizr.

É um sistema bem simples de se usar, com boa usabilidade e, relativamente, bem rápido e confiável. Basta fazer upload do arquivo que deseja redimensionar e brincar com as opções disponíveis. Apesar de ser bem intuitivo, os autores disponibilizaram algumas páginas com explicações.

Veja um vídeo demonstrativo do rsizr.

Para finalizar, antes que alguém olhe o código fonte deste artigo e diga que faço hotlinking, os próprios desenvolvedores do software autorizaram lincar a imagem da logo do programa diretamente, ok? ;-)

Artigos Relacionados

• Recursos de usabilidade grátis
• Colorblind Web Page Filter
• Melhores editores WYSIWYG para seu projeto
• Ferramentas e recursos para desenvolvimento web
• Ferramentas gratuitas para testes de segurança em sites
• Ferramentas para o twitter
• 7 ferramentas para web designs melhores
• CushyCMS: CMS versátil, simples, rápido, fácil e gratuito
• Swift Mailer: solução PHP para envio de e-mails
• Dicas para um web design minimalista e usável