# Ferramentas e recursos para desenvolvimento web

> Ferramentas essenciais para desenvolvimento web profissional. Recursos, bibliotecas e utilidades práticas para aumentar produtividade e qualidade de código!

URL: https://dpw.dev/indicacoes/ferramentas-e-recursos-para-desenvolvimento-web/  
Publicado em: 2010-05-03  
Categoria: indicacoes  
Tags: ferramentas, performance  
Autor: Tárcio Zemel

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)

![Ferramentas e recursos para desenvolvimento web: loaders (ícones loading ajax)](/images/blog/ferramentas-e-recursos-para-desenvolvimento-web/loaders-ferramentas-recursos-desenvolvimento-web.webp)

É 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](http://www.ajax.su/ajax_activity_indicators.html)
- [Ajax Loading Gif Generator](http://www.webscriptlab.com/)
- [Ajaxload](http://ajaxload.info/)
- [Chimply](http://www.chimply.com/)
- [Load Info](http://www.loadinfo.net/)
- [Preloaders.net](http://preloaders.net/)

## Compatibilidade e Suporte CSS

![Ferramentas e recursos para desenvolvimento web: CSS3 tabela de compatibilidade](/images/blog/ferramentas-e-recursos-para-desenvolvimento-web/css3-compatibilidade-ferramentas-recursos-desenvolvimento-web.gif)

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](http://findmebyip.com/litmus#target-selector);
- [CSS Compatibility and Internet Explorer](http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx);
- [CSS contents and browser compatibility - mobile](http://www.quirksmode.org/m/css.html)
- [Compatibility table: CSS3 Selectors](http://www.css3.info/modules/selector-compat/);
- [Experimental CSS compatibility table](http://westciv.com/wiki/Experimental_CSS_compatibility_table);
- [Guide to CSS support in email clients](http://www.campaignmonitor.com/css/);
- [W3C DOM Compatibility - CSS](http://www.quirksmode.org/dom/w3c_css.html);
- [Web Browser CSS Support](http://www.webdevout.net/browser-support-css).

## .htaccess

![Ferramentas e recursos para desenvolvimento web: htaccess gerador ferramentas](/images/blog/ferramentas-e-recursos-para-desenvolvimento-web/htaccess-compatibilidade-ferramentas-recursos-desenvolvimento-web.gif)

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)](http://tools.dynamicdrive.com/userban/);
- [.htaccess Editor](http://www.htaccesseditor.com/en.shtml);
- [.htaccess redirect](http://www.htaccessredirect.net/);
- [.htaccess URL Rewrite](http://www.iwebtool.com/htaccess_url_rewrite);
- [Htaccess Tools](http://www.htaccesstools.com/);
- [Online .htaccess generator and builder](http://www.webmaster-money.org/tools/htaccess_generator.php);
- [Webmaster Tools - .htaccess Generator](http://tools.devshed.com/webmaster-tools/htaccess-generator/).

## Otimizadores e Formatadores de CSS

![Ferramentas e recursos para desenvolvimento web: compressor CSS](/images/blog/ferramentas-e-recursos-para-desenvolvimento-web/css-compressor-otimizador-ferramentas-recursos-desenvolvimento-web.gif)

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](http://www.cleancss.com/?lang=en);
- [Code Beautifier](http://www.codebeautifier.com/);
- [Compress CSS](http://www.askapache.com/online-tools/compress-css/);
- [CSS Code Formatter and Optimizer](http://www.cssportal.com/generators/optimize.htm);
- [CSS Code Optimizer](http://www.generateit.net/css-optimize/);
- [CSS Compressor of Lottery Post](http://www.lotterypost.com/css-compress.aspx);
- [CSS Drive CSS Compressor](http://www.cssdrive.com/index.php/main/csscompressor/);
- [Format CSS Online](http://www.lonniebest.com/FormatCSS/);
- [Robson CSS Compressor](http://iceyboard.no-ip.org/projects/css_compressor).

## robots.txt

![Ferramentas e recursos para desenvolvimento web: gerador robots.txt](/images/blog/ferramentas-e-recursos-para-desenvolvimento-web/robots-txt-ferramentas-recursos-desenvolvimento-web.gif)

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.

- [Gerador de Robots.txt](http://marketingdebusca.com.br/robots-txt/);
- [Pixelfolk  Robots.txt Generator](http://pixelfolk.net/tools/robots);
- [Robot Control Code Generation Tool](http://www.mcanerin.com/EN/search-engine/robots-txt.asp);
- [Robots.txt Builder](http://www.clickability.co.uk/robotstxt.html)
- [SEOTools Robots.txt File Generator](http://tools.seobook.com/robots-txt/generator/);
- [Sitemaps XML format](http://www.sitemaps.org/protocol.php);
- [Yonego Robots.txt generator](http://www.yonego.nl/tools/robot-txt-generator.html);

## Favicons

![Ferramentas e recursos para desenvolvimento web: gerador favicon](/images/blog/ferramentas-e-recursos-para-desenvolvimento-web/favicon-gerador-ferramentas-recursos-desenvolvimento-web.webp)

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](http://www.256pixels.com/);
- [favicon2dots](http://favicon2dots.com/);
- [FavIcon from Pics](http://www.chami.com/html-kit/services/favicon/);
- [favicon.ico Generator](http://www.favicon.cc/);
- [Favicon Generator](http://www.favicongenerator.com/);
- [Favicon Generator DeGraeve.com](http://www.degraeve.com/favicon/);
- [FavIcon Generator Dynamic Drive](http://tools.dynamicdrive.com/favicon/);
- [Favicon Generator & Gallery](http://www.favicon.co.uk/);
- [Logaster](https://www.logaster.com.br/favicon/);
- [favicon maker v1](http://shaheeilyas.com/favicon/);
- [favikon](http://www.favikon.com/);
- [Genfavicon](http://www.genfavicon.com/);
- [Project Fondue Favicon Generator](http://favicon-generator.org/).

## Sitemaps

![Ferramentas e recursos para desenvolvimento web: gerador sitemap xml](/images/blog/ferramentas-e-recursos-para-desenvolvimento-web/sitemap-gerador-ferramentas-recursos-desenvolvimento-web.gif)

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](http://xmlsitemap.com/create-sitemap/);
- [Google (XML) Sitemaps Generator for WordPress](http://www.arnebrachhold.de/projects/wordpress-plugins/google-xml-sitemaps-generator/);
- [Online XML Sitemap Generator Free Online](http://www.web-site-map.com/);
- [Google XML Sitemap Generator](http://www.addme.com/ror-sitemap-generator.htm);
- [SitemapDoc - Google Sitemap Generator and Editor](http://sitemapdoc.com/Default.aspx);
- [XML Sitemaps Generator](http://www.xml-sitemaps.com/)

> **Dica:** Conheça nosso projeto [Recursos Front-end](https://recursosfrontend.desenvolvimentoparaweb.com/).

## Heatmaps e Gravadores de Tela

![Ferramentas e recursos para desenvolvimento web: heatmaps e gravadores de tela](/images/blog/ferramentas-e-recursos-para-desenvolvimento-web/heatmap-gerador-ferramentas-recursos-desenvolvimento-web.webp)

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](http://clickdensity.com/)
- [ClickHeat](http://www.labsmedia.com/clickheat/index.html)
- [ClickTale](http://www.clicktale.com/)
- [Crazy Egg](http://www.crazyegg.com/)
- [Mouseflow](http://mouseflow.com/)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml