Plugins Firefox para Web Designers

Olá leitores! Vou falar dos plugins que eu uso no meu dia-a-dia, que me ajudam muito no rendimento do desenvolvimento do projeto e conseqüentemente facilita muito o trabalho.

1. • ColorZilla
   
   
   • 
   
   
   • Captura as cores da página exibida no navegador. Acho muito útil, pois não é necessário ficar abrindo o CSS para descobrie o valor dela. Esse valor é mostrado em hexadecimal e RGB. Ele dá a opção de salvar a cor em uma paleta caso seja necessário. Além disso ele possui outras funções como zoom em imagens e um analisador de cores. Esse último eu nunca usei, mas na página do plugin tem todas as especificações.


2. • Firebug
   
   
   • 
   
   
   • Acredito que todo desenvolvedor que usa o Firefox tem esse plugin instalado. É ótimo e é um dos que eu mais uso. Ele te da a opção de poder editar o código e mostrar o resultado instantaneamente. No CSS é melhor ainda, que assim você pode definir posições, alinhamento, tamanho etc sem precisar ficar voltando no programa, editar, voltar no navegador e atualizar a página. Isso gasta tempo, logo, sua produção é prejudicada! Esse plugin também possui um debugger para Javascript, eu não uso, mas sei que ajuda pois já vi os programadores daqui da empresa usando. O que eu acho legal também, é que ele mede o tamanho da página, mostrando o tamanho dos arquivos carregados ou tempo gasto. Possui outras funcionalidades interessantes também, quem souber de alguma não citada, compartilhe!


3. • Html Validator
   
   
   • 
   
   
   • É um validador de (X)HTML. Mostra os erros do código e a possível solução. Tem me ajudado muito no trabalho. Principalmente naqueles códigos que tem tags que não estão no padrão. Um exemplo típico, é abrir uma tag e não fechá-la, como ‹br/›.


4. • IE Tab
   
   
   • 
   
   
   • Para quem tem que ficar testando o site em vários navegadores, esse plugin já adianta um pouco. Ele simula o IE(k) no Firefox sem a necessidade de abrir o programa, pois abre o navegador em uma tab, assim, economiza na memória do computador. O IE simulado é o que estiver instalado na máquina. O que eu gosto nele também, é que você pode definir as páginas que devem ser abertas no IE. Não adianta, sempre tem alguma página que o desenvolvedor fez somente para esse navegador, não só na parte visual, mas funcional também como um JS que não roda direito na raposinha ou outros navegadores.


5. • MeasureIt
   
   
   • 
   
   
   • É uma régua que mostra os valores em pixels. Não uso com muita frequência, mas ajuda a descobrir se os elementos estão alinhados corretamente ou o tamanho de alguma coisa em uma página.


6. • Web Developer
   
   
   • 
   
   
   • O Web Developer possui várias ferramentas em um único plugin. No menu que pode ficar abaixo da barra de endereços do navegador ou no clique no botão direito do mouse em alguma página. Ele possui um editor de CSS, que as vezes eu acho mais útil que o do Firebug, e também mostra o resultado instantaneamente; desabilita cookies, JS, CSS, imagens; tem uma opção que mostra detalhes de formulários como os parâmetros usados nos campos, assim como exibe detalhes de imagens, links, divs etc. Resumindo, praticamente todos os detalhes do código, sem que seja necessário abrir o código fonte. Esses detalhes são mostrados do lado do elemento da página. Um dos recursos que eu uso bastante é o Resize, onde é possível definir tamanhos para o navegador. Acho bom para ver como a página é visualizada em resoluções 800x600 e 1024x768 que estão abaixo da que eu uso. No Tools tem um validador W3C, tanto para (X)HTML, quanto para o CSS. Conclusão: da mesma forma que o Firebug é essencial, esse plugin também é. É um dos favoritos.


7. • YSlow
   
   
   • 
   
   
   • Feito pelo Yahoo! Developer Network, é um mensurador de desempenho de página. Funciona junto com o Firebug.

Bom, quem tiver mais algum plugin para a lista, me manda com uma breve descrição que eu dou um update. Em um outro post, eu falo de outros plugins que uso, não para o desempenho de desenvolvimento, mas mais para facilitar no uso do navegador, como o GooglePreview, ou outros que facilitam uploads como o Fire Uploader. Além das frescuragens hehe.

Update: Gente, o Thiago deixou nos coments mais uma extensão para criar paletas de cores para o Photoshop, GIMP, Flash, Fireworks etc a partir de alguma página. Não testei ainda mas parece muito boa. Obrigada Thiago.

;)

Geradores de esquemas/paletas de cores

Eu não sei se isso acontece com todo designer, mas eu sou realmente perfeccionista com meus trabalhos.

Antes de começar qualquer projeto, inicio sempre pela logo, pois ela que vai definir as cores usadas no trabalho.

Mas nem sempre temos criatividade o suficiente de combinar essas cores com outras, sem deixar que o layout/desenho fique bagunçado, exagerado ou apagado demais.

Por isso escolhi alguns sites para dar uma forcinha nisso. A partir de uma cor base, você consegue outras que deixam a combinação harmônica. Se você preferir existem outros que te dão paletas de cores prontas ou fazem esquemas de cores a partir de uma imagem de sua escolha!

Veja esses links

• kuler - um ótimo criador de esquemas de cores da Adobe;
• COLOURlovers - paletas de cores prontas;
• ColorMatch Remix - te dá outras OITO cores a partir de uma cor base;
• EasyRGB - te dá outras DOZE cores a partir de uma cor base;
• dhtmlGoodies - te mostra seis esquemas de cores diferentes;
• DeGraeve - esquema de cores a partir de uma imagem;
• Color Pallete Creator - cria uma paleta de cores a partir de três cores. Visite o tutorial (em inglês) para entender melhor;
• ColorBlender - CINCO cores a partir da cor base.

Eu sempre faço uma visita nesses sites para ter uma idéia de combinação nos trabalhos, e recomendo os que estão em negrito. São os que eu mais uso.

;)

Usando fontes como elementos gráficos

Achei uma dica muito bacana no site KREATIVUSE. A dica serve mais para
o pessoal que usa o Fireworks ou outros programas que não dão muitas opções de gráficos tipo shapes e brushes como no Photoshop.

Uma boa alternativa é o uso de fontes. Existem muitas fontes que são desenhos/símbolos que podem ser usados nos trabalhos, tanto gráficos quanto digitais. A vantagem da fonte é que ela suporta tamanhos maiores sem que perca a qualidade (mas nem todas), como vetores. A desvantagem é que se você não tiver um backup dela e tiver que mudar de computador, vai ter que procurá-la de novo para instalar novamente. Mas acho que não é uma coisa que atrapalhe muito, é só deixar anotado junto com o projeto o nome dela.

No KREATIVUSE tem uma coletânia de fontes bem legais. Também indico o site dafont.com que possui várias outras para download tanto para PC quanto para MAC.

Fonte: KREATIVUSE

;)

Estilizando tabelas no XHTML <table>

Quem me conhece sabe que odeio trabalhar com tabelas, sou completamente viciada em tableless, mas dependendo do desenvolvimento, não é muito funcional deixar de lado as tabelinhas.

Eu acho o uso de tableless essencial e muito mais fácil para sites que não exibirão dados tabulares. Com o uso das tags certas e CSS, é possível colocar os elementos de um site em qualquer posição. Mas não é a mesma coisa quando vamos carregar dados de um banco de dados, por exemplo.

O artigo de hoje é para mostrar uma maneira mais fácil de exibir esses dados com o uso de tabelas e estilização via CSS, sem a necessidade de inventar um tanto de classes e id's. Começando pelas principais tags:

1. <table>: delimita a tabela. É a primeira tag;


2. <caption>: título da tabela;


3. <thead>: cabeçalho;


4. <tfoot>: última linha da tabela;


5. <tbody>: para delimitar o meio da tabela;


6. <tr>: linhas;


7. <td>/<th>: células.

ps.: Visite o tópico de tabelas da W3 para ler mais sobre outras tags e aplicações.

O código da nossa tabela:

<table border="0" cellpadding="0" cellspacing="0" summary="Essa tabela é para apresentar alguns dos sites que vocês podem me encontrar.">
    <caption>Onde encontrar a Cléo</caption>

    <thead>
        <tr>
            <th>Ícone</th>
            <th>Nome do site</th>
            <th>Link</th>
            <th>Descrição</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th colspan="4">by Cléo Morgause</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td><img src="http://imgSRC/googlereader.png" title="Google Reader" alt="icone" /></td>
            <td>Google Reader</td>
            <td>http://www.google.com/reader/shared/13446221401570394803</td>
            <td>Artigos compartilhados de alguns dos blogs que eu acompanho.</td>
        </tr>
        <tr class="par">
            <td><img src="http://imgSRC/twitter.png" title="twitter" alt="icone" /></td>
            <td>twitter</td>
            <td>http://twitter.com/cleomorgause/</td>
            <td>Rede social que permite o envio de mensagens de até 140 caracteres. Útil para divulgação de conteúdo e links.</td>
        </tr>
        <tr>
            <td><img src="http://imgSRC/delicious.png" title="del.icio.us" alt="icone" /></td>
            <td>del.icio.us</td>
            <td>http://del.icio.us/cleomorgause/</td>
            <td>Coleção dos meus links favoritos e também aqueles que acho mais úteis. É ótimo, pois não me preocupo em ficar salvando bookmarks em HTML.</td>
        </tr>
        <tr class="par">
            <td><img src="http://imgSRC/internal.png" title="friendfeed" alt="icone" /></td>
            <td>friendfeed</td>
            <td>http://friendfeed.com/cleomorgause</td>
            <td>Junta todos os meus updates em um só lugar.</td>
        </tr>
        <tr>
            <td><img src="http://imgSRC/plurk.png" title="PLURK" alt="icone" /></td>
            <td>PLURK</td>
            <td>http://www.plurk.com/user/cleomorgause</td>
            <td>Funciona como o twitter, mas acho mais interativo e mais viciante.. hehe.</td>
        </tr>
    </tbody>
</table>

Agora que usamos as tags certas, fica muito mais fácil colocar estilo na tabela. Note que a única classe usada foi para diferenciar uma linha da outra, e mesmo assim só muda o background e o :hover da linha.

Abaixo o CSS que eu fiz:

* {
    margin:0;
    padding:0;
}

body {
    font:11px Verdana, Arial, Helvetica, sans-serif normal;
    color:#333;
}


/*TABELA*/
table {
    background:#D1DCDF;
    border:1px solid;
    border-collapse:collapse;
}

table, caption {
    margin:auto;
    width:748px;
}

caption {
    color:#003D5F;
    font:700 18px Georgia, "Times New Roman", Times, serif;
    padding:6px 4px 8px 0px;
    text-transform:uppercase;
}

    caption, thead th, tfoot th {
        text-align:center;
    }

    thead th, tfoot th {
        background:#305761;
        font-weight:700;
        padding-top:3px;
    }

    tbody th, tbody td {
        text-align:left;
        vertical-align:top;
    }

        tbody tr:hover {
            background:#88839E;
        }

    tfoot th {
        font:9px Georgia, "Times New Roman", Times, serif;
        text-align:right;
    }

        td, th {
            border:1px dotted;
            padding:5px;
        }

        .par {
            background-color:#90A8A8;
        }

            tbody tr.par:hover {
                background:#585370;
            }


/*CORES*/
table, thead th, tfoot th, tbody tr:hover, td, th {
    border-color:#003D5F;
}

thead th, tfoot th, tbody tr:hover, tbody tr.par:hover {
    color:#FFF;
}

No final a tabela deverá ficar assim.

Qualquer dúvida postem nos comentários.
Se preferirem, baixem o arquivo XHTML.

Links interessantes

No site CSS TABLE GALLERY tem uma lista com quase 100 CSS de estilização de tabelas disponíveis para download, além de poder enviar seu próprio estilo para outras pessoas baixarem. Vale a pena dar uma conferida.

;)

Adicione comentários em imagens e compartilhe

O Fine Tuna é um site onde você envia uma imagem ou uma foto (do computador ou um URL), e coloca um comentário em cima dela. Funciona como os comentários nas fotos do Flickr, a diferença é que não é necessário criar uma conta. E o legal é que depois você pode compartilhar com amigos e familiares mandando o link por e-mail através de um campo no canto superior do site. É interessante, pois pode ser usado em algum screen de um layout para um cliente, então ele poderá dizer o que pode ser mudado através dos comentários que ficam em um lugar determinado por ele. É bem útil!

Fonte: Smaching Apps

;)