Edição e configuração de CSS – Ferramentas para browsers

Com o desenvolvimento web voltado para webstandart e focado em tabless tornou-se imprescindível a utilização de ferramentas de visualização de conteúdo via browser.

Abaixo apresento uma lista de extensões para Firefox que poderão facilitar consideravelmente o trabalho com CSS, especialmente no que tange à identificação e visualização dos elementos da página.

Entre todas, recomendo especificamente o Firebug para iniciar o trabalho e o Web Developer para tarefas mais avançadas, por ser um das extensões mais valiosas e facilitatoras do processo de criação para web.

Firebug – https://addons.mozilla.org/en-US/firefox/addon/1843
You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page

Web Developer – https://addons.mozilla.org/en-US/firefox/addon/60
Adds a menu and a toolbar with various web developer tools.

EditCSS – https://addons.mozilla.org/en-US/firefox/addon/179
Stylesheet modifier in the Sidebar

CSSMate – https://addons.mozilla.org/en-US/firefox/addon/4187
a port of the fantastic EditCSS

View formatted source (format source extension) – https://addons.mozilla.org/en-US/firefox/addon/697
Displays formatted and color-coded source and optional CSS information for each element.

X-Ray – https://addons.mozilla.org/en-US/firefox/addon/1802
See the tags on a page without viewing the sourcecode

CSSViewer – https://addons.mozilla.org/en-US/firefox/addon/2104
A simple CSS property viewer

View Source Choice – https://addons.mozilla.org/en-US/firefox/addon/2070
View Page Source in a variety of contexts

JSView – https://addons.mozilla.org/en-US/firefox/addon/2076
Ability to view the source code of external files. You can now view the embedded css and js as well.

ViewSourceWith – https://addons.mozilla.org/en-US/firefox/addon/394
The main goal consists to view page source with external applications but you can also…
- open page source as DOM document, read faq
- open CSS and JS files present on page

Console² – https://addons.mozilla.org/en-US/firefox/addon/1815
Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content).

View Dependencies – https://addons.mozilla.org/en-US/firefox/addon/2214
Lists all the files which were loaded to show the current page

View Source Chart – https://addons.mozilla.org/en-US/firefox/addon/655
Source Charting… Graphically Displays HTML Tag Boundaries, graphically Defines Tag Nesting Order, Structure and Hierarchy

SourceEditor – https://addons.mozilla.org/en-US/firefox/addon/1760
View and Edit source of HTML element

InspectThis – https://addons.mozilla.org/en-US/firefox/addon/1913
Inspect the current element with the DOM Inspector

Cores
Rainbowpicker – https://addons.mozilla.org/en-US/firefox/addon/1693
Pick any color of the rainbow

FireCal – https://addons.mozilla.org/en-US/firefox/addon/3747
Colour Picker and Converter

ColorZilla – https://addons.mozilla.org/en-US/fir…don/271?id=271
Advanced Eyedropper, ColorPicker, Page Zoomer

Medidas
MeasureIt – https://addons.mozilla.org/en-US/firefox/addon/539
Draw out a ruler to get the pixel width and height of any elements on a webpage

Window Resizer – https://addons.mozilla.org/en-US/firefox/addon/1985
Resize your browser to various standard resolution sizes

Validação:
CSS validator – https://addons.mozilla.org/en-US/firefox/addon/2289
HTML Validator (based on CSE HTML Validator) – https://addons.mozilla.org/en-US/firefox/addon/887
Total Validator – https://addons.mozilla.org/en-US/firefox/addon/2318
Validaty – https://addons.mozilla.org/en-US/firefox/addon/2609
Page validator – https://addons.mozilla.org/en-US/firefox/addon/2250
Offline Page validator – https://addons.mozilla.org/en-US/firefox/addon/2520

Design de ícones: ferramentas de geração de Favicons on-line

Definição de Favicons

A idéia de um favicon é permitir a rápida associação de um site a uma imagem que o represente. É como se fosse uma marcação de território, informando de forma rápida e visual ao usuário a referência a um determinado site.A palavra Favicon é derivada de duas outras palavras do inglês: favorite (favorito) e icon (ícone). São na verdade, pequenas imagens no formato de arquivo *.ico. Em geral estas imagens apresentam-se com de cerca de 16×16 pixels.

Os favicons são armazenados na pasta do servidor em que se encontra o site para o qual se deseja exibir o favicon. Os favicons podem ser encontrados também nas abas e na barra de endereço, além de ficarem armazenados na área de favoritos do browser, quando o usuário adiciona o endereço do site aos favoritos.

Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.

Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.

Abaixo há uma lista com alguns geradores de favicon disponíveis na Internet.

1. www.favicon.cc
2. www.256pixels.com/
3. favicon2dots.com
4. converticon.com
5. www.favicontool.com
6. www.favicontool.com
7. www.webscriptlab.com/favicongenerator.php
8. www.flavicon.com/
9. www.favicon.co.uk
10. www.favicongenerator.com/
11. www.dagondesign.com/tools/favicon-generator-tool/
12. www.favicon.ru/en
13. www.faviconsfor.us
14. www.degraeve.com/favicon/
15. www.antifavicon.com/
16. www.html-kit.com/favicon/
17. www.favicon.jp/
18. tools.dynamicdrive.com/favicon/
19. www.faviconprime.com/
20. shaheeilyas.com/favicon/
21. www.faviconfactory.com/

Pixel to inch converter design

Utilitário de conversão de unidades. Este simples conversor permite a rápida associação de unidades bastante utilizadas no design em geral.

Unidades aceitas:

• Pixels to Inches/ Centímetros
• Inches para Pixels
• Centímetros para Pixels

Ainda é possível escolher a resolução a ser utilizada.

O conversor traz ainda uma área chamada presets, em que são encontrados alguns modelos de documentos mais utilizados na área de design. Entre eles destacam-se: A4, A5, A3, etc.

Figura 1: Coversor de unidades

Formato de compactação: winrar
Extensão do arquivo: rar
Tamanho do arquivo: 817 KB

Baixar o arquivo

Até a próxima. Forte abraço.