Drawter – Construtor de Wireframes

O Drawter Beta 2 é uma ferramenta escrita em JavaScript e baseado na biblioteca jQuery.
Ela oferece a possibilidade de literalmente tirar o código do seu site apenas desenhando o wireframe. Roda em qualquer navegador web simples que o torna realmente útil.

Atualmente Drawter está disponível na versão Pro, o que significa que se destina para webmasters com o conhecimento de HTML e CSS é necessário.
É uma ótima ferramenta para a criação de wireframes pois possibilita apartir do desenho já a geração de código xHTML e CSS.

Teclas de atalho disponíveis:
Ctrl +1 – Draw Mode
Ctrl +2 – Edit Mode

Também há um screencast para os interessados aqui.

Wireframes : Documentação de Projetos Web

Considerado como o primo pobre do layout, os Wireframes são os esqueletos dos websites feitos pelos profissionais de Arquitetura da Informação.

Aliado ao sitemap (futuramente falarei sobre isso), o wireframe é um documento que se torna cada vez mais fundamental para o trabalho do arquiteto de informação, apesar de não ser (e nem pretende) uma régua de estilos para o layout e a criação das páginas de um site, como é erroneamente interpretado por muitos webdesigners. Sua função é estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e sua relação com os demais elementos formadores do todo.

Também cabe ao wireframe indicar a correta marcação de textos, breadcrumbs de navegação, guidelines de marca e até dos recursos de programação e tecnologia a serem utilizados pela equipe de produção. Posteriormente também serve como baliza para testes de usabilidade.

Um exemplo de um wireframe básico do blog seria assim:

Vantagens dos Wireframes:

– Facilita a aplicação de conceitos de usabilidade já testados e comprovadamente eficientes.

– Auxilia a equipe de desenvolvimento e programação na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente.

– Após a implantação do site, os wireframes auxiliam nos testes de usabilidade e mostram efetivamente o que deve ser refeito em cada uma das páginas.

– Funciona como uma documentação do site e deve ser consultado antes de cada modificação posterior, para prever impactos na arquitetura e funcionalidade.

Principais softwares para construção de wireframes

Você pode criar seus wireframes em qualquer software que permita o mínimo de organização de elementos geométricos e textos, porém existem alguns que facilitam este trabalho por serem agentes customizados para esta função (eu utilizei o FireWorks):

- Visio

- InDesing

- Freehand

14 Aplicações AIR

Desde o surgimento do Adobe AIR, uma plataforma onde você pode rodar aplicações web ou desktop, o desenvolvimento de aplicativos se tornou muito popular, principalmente entre os desenvolvedores web.

Abaixo você pode ver algumas delas que podem ajudar e muito você a obter produtividade:

Klok: Essa aplicação nos permite marcar o tempo que levamos para desenvolver determinado trabalho, ou seja, ele marca a quantidade de horas, dias ou semanas que levamos a determinado projeto. A melhor forma de calcular a quantidade de horas gastas em um determinado projeto.

ColorBrowser: Uma aplicação que nos permite criar e salvar paletas de cores para que possam ser utilizadas em projetos futuros. Possui a opção de exportação das paletas.

ColorPicker: Uma simples aplicação para gerar cores hexadecimais.

ColourLovers: As famosas paletas de cores do site ColourLovers diretamente em seu desktop.

Kuler desktop: Permite importar cores da web para o desktop, como o site ColourLovers. Além disso permite que você importe diretamente cores para softwares como Illustrator, Photoshop e InDesign.

Doominow: Funciona como uma espécie de agenda onde podemos anotar as tarefas pendentes.

Em Calculator: Ferramenta para efetuar cálculos de unidades de medida relativa em CSS.

Google Analytics Reporting Suite: Através dessa ferramenta você pode acessar as estatísticas do Google Analytics sem precisar visitar o site.

Icon Generator: Uma ferramenta para a rápida criação de ícones, escolha o texto, a cor e é só clicar em criar.

Pixus: É um programa parecido com uma régua para medir os objetos na tela. Possui skins para o Internet Explorer e Safari.

Regexr: Um ótimo ambiente de teste onde você pode testar suas expressões regulares antes de implementá-las.

Shrink-O-Matic: Altere o tamanho de suas imagens facilmente, é só arrastar a imagem para cima do programa e escolher o tamanho, formato e nome.

WebSnapshot: Permite guardar capturas de tela facilmente. Você pode escolher entre guardar miniaturas, a página completa ou a área visível do navegador.

Snippely: Armazena de forma ordenada trechos de código que sempre utilizamos em nossas aplicações.

Caso tenha interesse em conhecer mais aplicações desenvolvidas utilizando a tecnologia AIR, visite o site AIRpollo.com.

DICA: Pinceladas da Web

24 ways: Versão 2008

Em dezembro de 2008, entrou no ar a última versão do site 24 ways.
Para quem não sabe o que significa o site 24 ways, é um site desenvolvido pelos maiores profissionais do desenvolvimento web mundial, composto de 24 dicas.

O site já existe desde 2005, e os tutoriais se iniciaram no dia 1 de dezembro e foram até o dia 24.
vale a pena conferi e conhecer os maiores nomes da Web no mundo.

dica: Pinceladas da web e DrWeb

24 ways 2008 – http://24ways.org

24 ways 2007 -http://24ways.org/2007

24 ways 2006 -http://24ways.org/2006

24 ways 2005 -http://24ways.org/2005