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
• Firebug
• FireShot
• FireFTP
• NoScript
• Page Speed
• SEO for Firefox
• Web Developer
• YSlow

Artigos Relacionados

• Melhores editores WYSIWYG para seu projeto
• Ferramentas gratuitas para testes de segurança em sites
• Recursos de usabilidade grátis
• Ferramentas para o twitter
• 7 ferramentas para web designs melhores
• Colorblind Web Page Filter

É 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

• jQuery: mais 50 dos melhores tutoriais, apostilas e exemplos
• Textarea: dicas e truques que você sempre quis saber
• Gradiente CSS cross browser: degradês em CSS sem usar imagens
• 15 fantásticos comandos SQL para WordPress
• 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
• Jetpack: explorando novas maneiras de ampliar e personalizar a web
• 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

• Componentes de um sistema de navegação
• “WordPress como CMS”?
• Pirâmide de conteúdo: estrutura lógica de web sites (para pessoas)

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

• Ícones de setinhas para download (grátis)
• CSS float: considerações, dicas e macetes para bons layouts na web
• Desenvolvimento para web 2.0
• Definição de acessibilidade e conexão com design
• Baixar ícones de alta definição e qualidade
• 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

Fui convidado pelo Paulo Faustino, do Escola Dinheiro, para escrever um guest post. Em nossas conversas, ele disse que deveria escolher um tema relacionado aos que são abordados em seu blog sobre marketing virtual, otimização de blogs, monetização online e assuntos correlatos. Tive a idéia de falar sobre networking, explicando um pouco a respeito, apresentando alguns pontos de vista e dando um incentivo, através de dicas, para que as pessoas comecem a criar sua própria rede de relacionamentos.

Segundo o próprio Paulo Faustino me disse, o artigo ficou muito bom e útil para quem o ler. Recebi comentários positivos por comentários no desenvolvimento para web e e-mail, também, o que mostrou que as informações realmente agradaram às pessoas que já leram o artigo.

Então, convido você a dar um pulinho no Escola Dinheiro e ler o artigo que escrevi sobre networking. Se ainda não o conhece o blog, aproveite para explorar seus conteúdos e assinar o feed do Escola Dinheiro, pois o conteúdo que é colocado por lá regularmente é de muita qualidade!

Leia o artigo sobre networking.

Artigos Relacionados

• Sobre parcerias de trabalhos em desenvolvimento web
• Web sites genéricos e a ilusão dos preços baixos
• Como montar um portfolio sem ter clientes
• Fechamento de contratos e designs para web: teoria e prática
• URLs amigáveis (slug) à WordPress
• Estratégia Web de Pirâmide: guia para uma estratégia de web equilibrada
• Perguntas ao cliente para antes e depois de um projeto
• Jetpack: explorando novas maneiras de ampliar e personalizar a web
• Pergunte-se a si mesmo: questões para desenvolver um bom site
• Quando o cliente (pensa que) sabe mais

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

• WassUp: plugin WordPress para ver estatísticas de acesso (em tempo real)
• Desenvolvimento para web 2.0
• 25 extensões para o Firefox para aumentar a produtividade no dia-a-dia na web
• 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)
• Maneira simples de saber quem faz referências a seu blog WordPress
• Preciosas dicas de segurança e otimização para WordPress
• jQuery: mais 50 dos melhores tutoriais, apostilas e exemplos
• Como tirar screenshot de um web site inteiro e obter uma imagem completa
• Textarea: dicas e truques que você sempre quis saber

Quem está começando no desenvolvimento para web precisa estudar bastante! Entretanto, os estudos iniciais de (X)HTML e CSS, se não feitos com vontade e bem conduzidos, principalmente quando somente teóricos, podem desestimular o aprendiz. O site HTML Playground tem a proposta de tornar estes estudos mais agradáveis!

Através de uma interface interativa simples e fácil de mexer, é possível mostrar todos os atributos das linguagens HTML, XHTML e CSS. Uma descrição da tag escolhida aparece e os valores dos atributos, quando presentes, podem ser alterados na hora. Tudo isso em um ambiente AJAX que mostra o resultado das modificações em tempo real. Clique na imagem para ver a explicação.

Através do menu principal também é possível procurar uma tag, em especial, pelo nome; afinal, são dezenas de nomes diferentes, e é muito difícil “decorar” todos.

Lebrei da extensão para Firefox Firebug, que, dentre suas várias opções, permite editar os códigos dos sites em tempo real.

O ponto forte do sistema, com certeza, é a edição em tempo real dos códigos. Para quem está começando e precisa ver “as coisas acontecendo”, não há coisa melhor! Além do quê, o HTML Playground também pode servir como guia de referência ou manual para aqueles mais experientes e/ou os que não têm paciência ou memória para se lembrar de todas as tags e respectivos atributos de HTML e XHTML e regras, propriedades e valores de CSS.

Como disse, vale mesmo à pena estudar através do HTML Playground; além de poder testar os códigos em tempo real, o estudante traz mais divertimento e emoção a suas atividades, tudo isso de forma rápida e dinâmica!

Artigos Relacionados

• Tripoli: CSS standard para renderização HTML
• Meta tags
• Centralizar suas páginas web com CSS: como deixar o site sempre no centro com folhas de estilo
• Diferenças entre IDs e Classes
• CSS: uma abordagem geral

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

• NextGEN Gallery com SexyLightBox: sua galeria de imagens mais sexy
• Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin
• 30 extensões para Firefox que vão mudar sua vida na web (para melhor)
• Preciosas dicas de segurança e otimização para WordPress
• Mais de 450 extensões para WordPress
• WassUp: plugin WordPress para ver estatísticas de acesso (em tempo real)
• Como tirar screenshot de um web site inteiro e obter uma imagem completa
• 25 extensões para o Firefox para aumentar a produtividade no dia-a-dia na web
• Melhorando a interação em formulários de busca
• Textarea: dicas e truques que você sempre quis saber

Tripoli, segundo a definição de seu criador, David Hellsing, é

um CSS genérico para renderização HTML. Ao redefinir e reconstruir standards para os navegadores, Tripoli faz uma união estável e uma base cross-browser de renderização para projetos web.

Quer dizer, utilizando Tripoli (que, basicamente, é um conjunto de arquivos CSS), é possível “resetar” as diferentes renderizações dos browsers e montar uma base estável, uma renderização padrão para HTML, teoricamente sem a inconveniência de as página de seu site aparecerem diferentes em cada navegador.

Ainda segundo o autor, Tripoli segue à risca as regras mais atuais de CSS, recomendadas pelo W3C, e tem a vantagem de ter, todo o pacote, o pequenino tamanho de 4KB (comprimido).

Pessoalmente, somente vi o Tripoli em funcionamento através dos exemplos disponibilizados no próprio site oficial. Não tive muita vontade de incorporá-lo aos meus projetos devido ao fato de ele ter sido idealizado e feito para ser usado com HTML 4. E eu não uso mais HTML 4, eu uso XHTML 1 (o que, por enquanto, é uma questão de opção, já que é perfeitamente aceitável, normal e corriqueiro o uso de HTML, que continua sendo um padrão do W3C).

Então, para os que seguem a metodologia de uso de HTML para a elaboração de web sites e que forem testar o Tripoli, gostaria de pedir a gentileza de comentar como é usá-lo, se realmente é tudo isso que o autor diz ser e se vale à pena adotá-lo nos projetos.

Na teoria, pelo menos, parece que dá muito certo!

Artigos Relacionados

• HTML Playground: aprenda HTML, XHTML e CSS com exemplos reais
• Meta tags
• Centralizar suas páginas web com CSS: como deixar o site sempre no centro com folhas de estilo
• Diferenças entre IDs e Classes
• CSS: uma abordagem geral

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 icons, incl. PSD sources)

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!

Artigos Relacionados

• Ícones de setinhas para download (grátis)
• Definição de acessibilidade e conexão com design
• 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
• 10 fontes de inspiração para fazer logotipos de qualidade
• 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

• Mais de 450 extensões para WordPress
• Como tirar screenshot de um web site inteiro e obter uma imagem completa
• Ferramentas para criação de wireframes
• Otimização WordPress: aumente a performance e desempenho de seu blog / site
• Jetpack: explorando novas maneiras de ampliar e personalizar a web
• 30 extensões para Firefox que vão mudar sua vida na web (para melhor)
• Preciosas dicas de segurança e otimização para WordPress
• Desenvolvimento para web 2.0
• WassUp: plugin WordPress para ver estatísticas de acesso (em tempo real)
• jQuery: mais 50 dos melhores tutoriais, apostilas e exemplos

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

• As melhores práticas de SEO para seu site ou blog melhorar o posicionamento nos mecanismos de busca
• 6 mitos de SEO que você deve evitar
• SEO para designers: os erros mais comuns na otimização de sites
• Maneira simples de saber quem faz referências a seu blog WordPress
• Desenvolvimento para web 2.0
• SEO, amadorismo, opiniões tendenciosas e o mercado de atuação do “verdadeiro profissional” em SEO
• Erros comuns em desenvolvimento web para campanhas de SEO
• Estratégia Web de Pirâmide: guia para uma estratégia de web equilibrada
• 7 ferramentas para web designs melhores
• Truques de configuração do WordPress

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

• jQuery: apresentação
• Melhorando a interação em formulários de busca
• Melhores editores WYSIWYG para seu projeto
• 8 dicas para fazer códigos melhores com jQuery
• jQuery: mais 50 dos melhores tutoriais, apostilas e exemplos
• ie7-js: um javascript para fazer o Internet Explorer renderizar melhor

É bem simples: basta inserir o script nas páginas que deseja que sejam renderizadas nos IEs 5-6 como se fossem IE 7! Provavelmente, serão em todas, não é? Há, também, uma script para renderização conforme Internet Explorer 8.

Além desta maravilha de alterar a renderização das páginas, o javascript também provê a funcionalidade de colocar transparentes arquivos PNG em versões anteriores a 7 do IE. Mas há uma condição para isso… Não deixe de visitar a página oficial do ie7-js para saber mais a respeito!

E um último lembrete: trata-se de um javascript, lembrem-se bem disso; portanto, nada de negligenciar os testes nas versões anteriores do Internet Explorer! Afinal, nunca se sabe se o visitante vai estar com o javascript habilitado, ou não!

Artigos Relacionados

• Melhorando a interação em formulários de busca
• URLs amigáveis (slug) à WordPress
• Melhores editores WYSIWYG para seu projeto
• 8 dicas para fazer códigos melhores com jQuery
• Quando o cliente (pensa que) sabe mais
• 30 extensões para Firefox que vão mudar sua vida na web (para melhor)
• Como montar um portfolio sem ter clientes
• A melhor lista de plugins para jQuery do mundo!
• Prism
• jQuery: apresentação

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

• 8 maneiras de melhorar a performance de um site
• Gradiente CSS cross browser: degradês em CSS sem usar imagens
• Ferramentas para o twitter
• Rolagem com fundo transparente com CSS
• 7 ferramentas para web designs melhores
• NextGEN Gallery com SexyLightBox: sua galeria de imagens mais sexy
• Estatísticas sobre comportamento nas mídias sociais
• 10 diretrizes para a construção da credibilidade de um web site
• 8 características de User Interfaces (UI) de sucesso
• Boas práticas de SEO para seu site na primeira página do Google

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

• 8 maneiras de melhorar a performance de um site
• Ferramentas para o twitter
• Estatísticas sobre comportamento nas mídias sociais
• 10 diretrizes para a construção da credibilidade de um web site
• 8 características de User Interfaces (UI) de sucesso
• Boas práticas de SEO para seu site na primeira página do Google
• Componentes de um sistema de navegação
• Identificador de fontes
• Prism

E aí, existe ou não a “web 2″? Penso que não! O que existe é uma evolução da web da forma como a conhecíamos em outrora. Você, quando aprende algo novo ou consegue fazer alguma coisa que não conseguia, ou faz com facilidade algo que só fazia dificilmente, vai ao cartório para trocar de nome?

Mantendo-se as devidas proporções, é isso o que alguém fez ao querer “renomear” a web; e o “povo” caiu…

Há, sim, atualmente, recursos que são possíveis de se obter, técnicas que são mais facilmente executadas, tecnologias que não existiam, aplicativos que facilitam tudo isso. Não precisa de mudar o nome de nada… É só saber que, hoje, há uma maior gama de possibilidades no desenvolvimento para a web, que beneficia tanto usuários quanto desenvolvedores. Uma destas “tendências” é tentar fazer os web sites o mais próximos possível de aplicativos desktop.

Neste sentido, o Prism é uma ótima!

A explicação “oficial”, extraída (e traduzida livremente) do Mozilla Labs, é:

Prism é um aplicativo que permite que os usuários dividam aplicações web fora de seus navegadores e executem-nas diretamente em sua área de trabalho.

Como o Prism funciona?

Muito bem, agora que o conceito foi dado, vou continuar com a explicação, que é dada segundo o que eu entendi a respeito do programa.

Segundo consta no wiki da Mozilla, o “tchan” do Prism é que ele é baseado em uma tecnologia chamada “Site Specific Browsers” (SSB), que permite, através de um navegador integrado, trabalhar exclusivamente com uma única aplicação web – sem precisar de / ter menus, barra de ferramentas, barra de status, etc.

Ou seja, você instala o programa, segue alguns passos simples e tem um ícone que direciona para um web site / sistema web, e dêem especial atenção à palavra “um”, porque é literalmente o que se pode fazer: acessar o endereço que foi configurado para o atalho; nem mais, nem menos.

Usando o Prism

Primeiramente, é preciso baixar e instalar o programa (suporte para Mac, Windows e Linux). Se você utiliza Firefox, uma grata surpresa: existe uma extensão para transformar qualquer página que você esteja visitando em um “aplicativo Prism”.

Procedimento padrão, tudo muito tranquilo. O instalador cria o atalho para o programa conforme as opções escolhidas na instalação. Depois, deve-se simplesmente ir ao respectivo submenu e clicar no ícone do programa. Uma tela se abre.

Nela, tudo o que deve ser feito é informar para qual endereço web se deseja criar o atalho e o nome que se quer dar; optar por exibir ou não barra de localização, status e atalhos de navegação; em qual(is) lugar(es) serão criados o atalho, propriamente dito.

Para o exemplo, está sendo feito um atalho para o blogblogs, que é um sistema brasuca que acho bem interessante. Não quero que tenha barra de localização, de status, nem atalhos. Vou criar um atalho somente na área de trabalho.

E, para cada atalho que se queira, basta executar novamente o Prism. E uma dica: basicamente, o que se tem é um atalho, mais ou menos como qualquer outro; então, é possível que se altere seu ícone. Fica mais organizado, caso você tenha vários atalhos e queira encontrar um, fica mais rápido e prático!

Considerações sobre o Prism

Pessoalmente, achei a intenção dos criadores muito “nobre” e, até certo ponto, bastante criativa. Penso que foi dado, sim, mais um grande passo rumo à “desktopização” dos aplicativos web.

Por fim, deixo o relato de uma experiência própria: fiquem sabendo que o Prism é especialmente útil quando se quer disponibilizar um sistema online para clientes (e amigos) leigos e/ou impacientes, quando o assunto é informática e PCs, em geral.

Em determinada ocasião, em parceria com um colega, desenvolvemos um sistema para a Prefeitura da cidade em que moramos; o “público alvo” de tal sistema consistia em, basicamente, usuários que não tem a mínima intimidade com a web, limitando-se a, no máximo, checar emails. Optamos por instalar o Prism. Os resultados não poderiam ter sido melhores!

Além da facilidade de inicialização do sistema que os usuários finais tiveram – simplesmente clicar em um ícone na área de trabalho para começar a utilizá-lo -, nós mesmos “poupamos” tempo de desenvolvimento; dado o fato de o Prism rodar sobre Gecko e, por isso, renderizar de forma semelhante ao Firefox, nós não tivemos que nos preocupar em implementar IE hacks para garantir a correta renderização das páginas!

Valeu mesmo à pena e, como já disse, recomendo fortemente a utilização do Prism, especialmente para os casos em que os usuários finais são inexperientes e/ou se queira “poupar recursos” com o desenvolvimento, já que a renderização das páginas segue fielmente a maioria dos padrões da web.

Artigos Relacionados

• URLs amigáveis (slug) à WordPress
• 8 maneiras de melhorar a performance de um site
• Ferramentas para o twitter
• Estatísticas sobre comportamento nas mídias sociais
• 10 diretrizes para a construção da credibilidade de um web site
• 8 características de User Interfaces (UI) de sucesso
• Quando o cliente (pensa que) sabe mais
• Boas práticas de SEO para seu site na primeira página do Google
• Componentes de um sistema de navegação
• 30 extensões para Firefox que vão mudar sua vida na web (para melhor)