A forma mais correta de desenvolvermos páginas para Web é dividindo a estrutura em três camadas: conteúdo (HTML), comportamento (Javascript) e apresentação (CSS). Trabalhando o CSS em uma camada separada do restante da estrutura, conseguimos uma melhor consistência visual, uma vez que os layouts de todas as páginas estarão baseados em uma mesma folha de estilos. Também ganhamos tempo e facilidade na hora de fazer um redesign ou manutenções visuais, pois a alteração de um único arquivo terá impacto em todo o site. Com o CSS em um arquivo separado, também conseguimos fornecer maior acessibilidade ao criar folhas de estilo específicas para diferentes dispositivos como sintetizadores de fala e som, aparelhos e impressoras em Braille, celulares e outros dispositivos móveis etc. O carregamento das páginas também será mais rápido, já que após o primeiro acesso ao site, o arquivo CSS estará carregado em cache.

Um bom exemplo de como o CSS pode ser poderoso quando bem usado é o CSS Zen Garden. O site fornece um modelo de página HTML para download, e diversos designers criam folhas de estilos para essa mesma página. O resultado pode ser visto na galeria: alterando apenas a folha de estilo, diferentes layouts são aplicados na mesma página HTML.

CSS ainda deixa a desejar

Hoje, designers e desenvolvedores ainda têm que se virar para conseguir certos efeitos gráficos. Por mais poderosa que a linguagem seja, a atual versão do CSS2.1 não fornece recursos como sombras em objetos e textos, cantos arredondados, múltiplas camadas de plano de fundo, opacidade, possibilidade de diferentes familias tipográficas, colunas em textos, etc. O fato de navegadores mais antigos (e ainda utilizados) como o Internet Explorer 6 não suportarem todos os recursos do CSS2.1 acaba complicando ainda mais a nossa vida.

Para conseguir tais efeitos e recursos nas páginas, normalmente recorremos ao uso de imagens, hacks, ou inserção excessiva de marcações HTML, o que pode aumentar o tempo de desenvolvimento e carregamento das páginas, além de comprometer a semântica dos documentos.

Com a nova versão da linguagem que está por vir, teremos maior controle sobre o estilo dos elementos. Propriedades para cantos arredondados ou sombras em textos estarão disponíveis no CSS3, sem precisarmos recorrer ao uso de truques ou imagens.

O que nos trará o CSS3?

Propriedades de CSS3 já são suportadas pelas versões mais recentes de alguns navegadores, como o Safari 4 e o Firefox 3.6. Com isso podemos testar os novos recursos que estão por vir. Para que alguns dos novos recursos possam ser testados, é necessário adicionarmos os prefixos -moz- (para a renderização no Firefox) e -webkit- (para renderização no Safari).

A seguir, exemplos de algumas das novas propriedades que a nova versão da linguagem irá nos fornecer:
– border-radius: com essa propriedade podemos adicionar um raio de arredondamento para todos os cantos de um elemento, como -moz-border-radius: 10px, ou valores diferentes para cada canto, como -moz-border-radius-topright: 5px.
– text-shadow: permite adicionar sombras em textos, configurando a distância da sombra para a esquerda e para o topo do texto, o enevoamento e cor: text-shadow: 5px 5px 2px #999.
– shadow: funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos: -moz-box-shadow: -10px -10px 0px #333.
– border-colors: podemos adicionar um efeito gradiente nas bordas de um elementos, aplicando cores em diferentes camadas: -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc.
- Opacity: podemos adicionar opacidade aos elementos: opacity: 0.2.
- Columns: podemos definir estilos de colunas para textos, aplicando valores para a largura, quantidade, bordas de separação e distância entre colunas: -moz-column-width: 13em; -moz-column-count: 3; -moz-column-rule: 1px solid black; -moz-column-gap: 1em.
- Multiple backgrounds: podemos definir diferentes planos de fundo para um mesmo elemento: background: url(fundo-um.jpg) top left no-repeat, url(fundo-dois.jpg) top 11px no-repeat, url(fundo-tres.jpg) bottom left no-repeat, url(fundo-quatro.jpg) left repeat-y.
– @font-face: podemos definir uma tipografia diferenciada para os textos da página através da importação de um arquivo de fonte: @font-face { font-family: Agni; src: url(‘agni-font.otf’) }. Em seguida aplicamos essa fonte a um elemento de texto: h3 { font-family: Agni, sans-serif }.

O CSS3 ainda não deve ser usado definitivamente em suas páginas. A nova versão da linguagem ainda se encontra em fase de rascunho na W3c, e a maioria dos navegadores não fornece suporte. Porém é essencial que possamos conhecer e testar os novos recursos, descobrir aos poucos o que vem por aí, e nos preparar para o momento em que o CSS3 será lançado como uma recomendação em definitivo.

Hoje, designers e desenvolvedores ainda têm que se virar para conseguir certos efeitos gráficos. Por mais poderosa que a linguagem seja, a atual versão do CSS2.1 não fornece recursos como sombras em objetos e textos, cantos arredondados, múltiplas camadas de plano de fundo, opacidade, possibilidade de diferentes familias tipográficas, colunas em textos, etc. O fato de navegadores mais antigos (e ainda utilizados) como o Internet Explorer 6 não suportarem todos os recursos do CSS2.1 acaba complicando ainda mais a nossa vida.

Para conseguir tais efeitos e recursos nas páginas, normalmente recorremos ao uso de imagens, hacks, ou inserção excessiva de marcações HTML, o que pode aumentar o tempo de desenvolvimento e carregamento das páginas, além de comprometer a semântica dos documentos.

Com a nova versão da linguagem que está por vir, teremos maior controle sobre o estilo dos elementos. Propriedades para cantos arredondados ou sombras em textos estarão disponíveis no CSS3, sem precisarmos recorrer ao uso de truques ou imagens.

Fonte: Imasters

Abaixo, apresentamos 30 ferramentas de desenvolvimento extremamente útil, templates, geradores, e sugestões de segurança, esperando que você se inspirou para utilizar estas ferramentas úteis para tornar sua vida mais fácil.

1. CSS e Ferramentas de Desenvolvimento

Scaffold

CSScaffold CSS é um framework escrito em PHP. Ao invés de tentar criar um quadro estático, que utiliza as capacidades padrão de CSS, como Blueprint, ele usa o PHP para estender CSS. A sintaxe olha e se sente exatamente como CSS, exceto que você tem alguns novos, habilidades poderosas.

Compass

Compass é uma ferramenta de criação de estilo que usa a linguagem de estilo Sass para fazer o seu estilo menor e seu Web site mais fácil de manter.

css_doc

css_doc Ruby é uma biblioteca e uma ferramenta de linha de comando para extrair documentação de arquivos CSS. O formato da documentação é muito semelhante ao JavaDoc.

CSSHttpRequest

Como JavaScript inclui, isto funciona porque o CSS não está sujeita à política de mesma origem que afeta XMLHttpRequest. Funções CSSHttpRequest à semelhança JSONP, e está limitada a solicitações GET. Ao contrário JSONP, não confiáveis de terceiros JavaScript não pode executar no contexto da página de chamada.

CSS Sandbox

Diga adeus à tentativa e erro, mas dizer Olá a uma ferramenta e um brinquedo para testar CSS em tempo real. É uma alternativa simples e rápida de recarregar uma página e ver os últimos ajustes para o seu código. Role o mouse sobre o botão de código ea formatação para o código CSS necessário estará pronto para o seu site.

CodeBurner

Esta é uma ferramenta útil para desenvolvedores da Web para verificar as propriedades CSS ou elementos HTML. Após a instalação, você pode executar uma busca ou clicar em um item na página para ver as informações de compatibilidade do navegador, sintaxe e exemplos de código. Ele fornece uma referência rápida disponível no seu navegador.

Markup Validator SAC

Esta versão stand-alone de HTML do W3C / XHTML Markup Validator não requer instalação. Basta colocar o Validator onde você precisa, como um flash drive, CD ou disco rígido. É possível validar os arquivos locais, sites, ou ser configurado como um serviço Web para permitir que os usuários para validar através da rede local. Basta arrastar e soltar arquivos e URLs para o ícone do aplicativo, ou usar o comando Arquivo> Abrir.

CodeRun

Ferramenta útil que nos permite fazer upload de pesquisa e projetos de código executável, modificar ou criar um código com coloração conclusão, depuração de código cliente / servidor, bem como publicar links código. Para a nuvem, podemos implantar com um clique, gerir os recursos de nuvens, e as versões completa com SVN. Ele suporta várias línguas.

Google Code Playground

Ferramentas de desenvolvimento online script vamos implementar ricos, sites dinâmicos em menos tempo. Com este parque AJAX API, podemos experimentar com novas funções como o JavaScript ou mapas, ou mesmo baixar feeds. Então, essas funções podem ser exportados, totalmente pronto para implementar. Novas ferramentas de continuar a ser adicionados, por isso este é um bom lugar para se revisitar a linguagem, blogger, gráficos e outros códigos de visualização.

Boks

Boks é um aplicativo AIR, o que significa que funciona em Windows, Mac e Linux. Ele fornece uma interface de usuário para Blueprint quadro CSS e pode lidar com grade e configuração do ritmo de base, antes de exportar grid.png e comprimido CSS.

Bluefish

Este editor Open Source é voltada para programadores e web designers e funcionará na maioria dos sistemas operacionais, incluindo Linux, FreeBSD, MacOS X, OpenBSD e Solaris. Bluefish centra-se na edição de sites dinâmicos e interativos e os scripts, e suporta muitos programação e linguagens de marcação. Não será neste momento executado no Windows, mas um nativo Bluefish 1.0.7 binário.

FireCrystal

FireCrystal é uma extensão do Firefox para ajudar os programadores e designers descobrir como comportamentos interativos na web funcionam. Ele permite aos usuários “rewind” suas interações com as páginas da web ao mesmo tempo mostrando o código correspondente. No entanto, é atualmente uma versão alfa e podem sofrer de tempos de carregamento longos ou falhar em Javascript intensivo páginas.

Adobe BrowserLab

Esta ferramenta está disponível como um trecho da música, assim que os profissionais da web deve experimentá-lo, enquanto podem. Adobe BrowserLab fornece web designers com uma cópia exata de suas páginas em vários navegadores e sistemas operacionais. É uma solução para testes de compatibilidade cross-browser e pode ser personalizado com suas preferências, além de ser um serviço online que pode ser acessado a partir de praticamente qualquer computador conectado à web.

checkmycolors

Esta ferramenta é para verificar novos e combinações de cor de fundo de todos os elementos do DOM para determinar se eles fornecem um contraste suficiente quando visualizados por alguém que tenha défices de cor. Você digita um endereço web e checkmycolors retorna resultados de teste com base em algoritmos sugeridos pela W3C.

2. Tipografia

Typography Keyboard Layout

Uma ferramenta simples, mas útil, que permite que você digite os caracteres que são geralmente não disponível em um teclado com facilidade. Esta coisa é um layout de teclado normal, só que com a tecla Alt no Mac ou a tecla Alt Gr no Windows que permite que você digite todas estas personagens perfeitamente agradável. O layout também suporta vários tipos de sinais diacríticos, assim você pode digitar palavras como ingênuos ou café e se divertir.

Typedia

Enciclopédia compartilhada de fontes, com recursos para classificar, categorizar e ligar fontes.

FontBook

Esta web telespectador com fonte permite que você olhar para todas as fontes com seu texto amostra através da incorporação de fontes HTML5. Você pode visualizar as métricas, glifos ou o corpo do texto fonte. Suporte em breve deverá estar disponível para a marcação, classificação e favoriting.

3. Ferramentas de Referência

Regex Widget
Este widget interactivo é útil para testar JavaScript, Sed, Ruby, Perl ou expressões. A interface de usuário é simples, maiúsculas e minúsculas, tem interruptor global, e corresponder ver índice de matriz para codificadores para implementar testes de forma fácil e eficaz.

HTML Entity Character Lookup

Utilizando entidades de HTML é o caminho certo para garantir todos os personagens em sua página são validados. No entanto, muitas vezes, encontrar o código de entidade de direito requer a digitalização através de 250 linhas de caracteres. Essa pesquisa permite-lhe encontrar rapidamente a entidade com base na sua aparência, por exemplo, como um <ou a letra C.

PHPQuickReference (Mac Dashboard Widget)

PHPQuickReference lhe dá o direito de referência útil PHP no Dashboard. Pesquisa com autocompletar e sugestões e copiar e colar o código de exemplo para seu projeto. Você pode achar mais útil Mac Dashboard Widgets para web designers e desenvolvedores aqui e aqui.

4. Edição de imagem e Otimização

punypng

Punypng é uma ferramenta gratuita que reduz drasticamente os tempos de carregamento da página, reduzindo o tamanho do arquivo de uma imagem sem qualquer perda de qualidade.

Smush.it

Smush.it é uma ferramenta de otimização de edição de imagem que leva a maioria dos tipos de formatos de imagem e converte para PNGs menores sem mudar sua aparência ou qualidade visual. Ele irá fornecer dados sobre quantos bytes seriam salvos por meio da otimização, bem como produzir um arquivo zip para download com os arquivos de imagem minimizada.

PNG8

Most of us use Photoshop, but Fireworks allows us to use an alpha transparency with PNG8 for a smaller file size while maintaining edges that blend smoothly and look great. Select the number of colors needed or setup a color matte and save a PNG8 image with alpha transparency. In the Optimize pallet, select PNG8 format with alpha transparency selected, and then click “Rebuild” in the lower right corner. Smaller file sizes equal faster page loads and this works the best for logos, shadows and gradients to be fully optimized.

Finetuna

Finetuna editor de imagens pode ser usado para divertimento ou para locais mais grave. Você pode fazer upload de uma imagem ou uma escolha de uma página web, antes de adicionar rapidamente os seus comentários para qualquer imagem. A única coisa que resta a fazer é compartilhar.

iConvert

Esta ferramenta faz a conversão de imagens para ícones rápido e simples. É um processo um passo para a criação de ícones para Windows, Mac e Linux.

5. Freelancing

Astuteo

Web designers e desenvolvedores de sites podem utilizar esta ferramenta simples para estimar o tempo rapidamente e materiais necessários para um projeto da proposta. Digite o título do projeto e sua taxa horária padrão, em seguida, ajustar o seu horário antecipado para gerar sua estimativa total do projeto. Os resultados podem ser impressos ou salvos em um PDF.

redmark

Redmark é uma ferramenta útil para os designers e os seus clientes para se comunicar visualmente em três passos simples. Carregue o seu design, e-mail automaticamente para os clientes que podem fazer comentários, fazer revisões e repetir, automaticamente, antes de publicação.

6. Melhorar o fluxo de trabalho

Web Form Factory

Web Form Factory é uma fonte aberta gerador de formulários Web que gera automaticamente o código necessário backend para amarrar o seu formulário para uma base de dados.

Printliminator

O Printliminator é um bookmarklet com algumas ferramentas simples que você pode usar para websites de impressão faz melhor. Um clique para activar e, em seguida, clique para remover elementos da página, remover gráficos, e aplicar um estilo de impressão melhor.

Split Browser

Multitarefa é obrigatória. Dependendo da memória RAM e tamanho da tela, essa ferramenta permite que o navegador FireFox para ser dividida infinitamente. A janela de configuração pode ser dividido em colunas ou no entanto, é necessário comparar várias páginas da Web. Escolha o “Split Browser para” menu e, em seguida, arrastar e soltar links, bookmarks, calendários, agendas ou guias nas janelas divididas.

LiberKey

LiberKey  é o “canivete suíço” equivalente a 250 programas de softwares que oferecem locais e / ou utilização portátil. Os melhores programas Open Source ou Freeware foram selecionados para atender às necessidades mais práticas, mantendo 100% de portabilidade.

Fonte: http://www.noupe.com/design/fresh-web-development-goodies-bag.html

]]> http://webtopia.com.br/blog/cinto-de-utilidades-para-webdesigners/feed/ 0