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.

Guia Adobe CS4 Keyboard Shortcuts [parte 1]

Segue abaixo alguns guias de atalhos de alguns* programas da Adobe na versão CS4:

Adobe Photoshop CS4 keyboard shortcuts : (Windows) – (Mac)

Adobe Flash cs4 keyboard shortcuts : (Windows) – (Mac)

DreamWeaver cs4 keyboard shortcuts : (windows)

Adobe InDesign CS4 Keyboard Shortcuts (Windows – Mac)

Illustrator CS4 Keyboard Shortcuts : (Windows) – (Mac)

*ps: Faltam alguns que tentarei disponibilizar mais tarde em outro post.

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

Tubarão em mosaico de vídeos

É um site desenvolvido para o “Okinawa Churaumi Aquarium” onde um tubarão nada por uma imensidão azul.O tubarão, na verdade, é um grande mosaico de vídeos educacionais do Youtube que guiam o internauta sobre a vida marinha do aquário e seus animais.

É um projeto muito interessante e muito bem feito, inclusive foi vencedor do FWA(Favourite website awards) recentemente.

O único problema é que não da para entender nada escrito pois o site é 99% em japonês. Porém como eu falei, é um projeto muito legal.

Visitem!

Alternativa ao Firebug: CSSFLY

CSSFly é uma ferramenta online onde, além de você poder editar o HTML de qualquer página, pode também editar o CSS e ver as mofdificações em tempo real.

Ideal para debugar layouts quando você não tem ou não pode usar o firebug.

É uma ótima alternativa para usar no IE.

É só entrar no site desejado colar o código abaixo no browser .

javascript:what=document.URL; var re2=new RegExp('http:\/\/','g');
what = what.replace(re2,'http://www.cssfly.net/t/');  top.location.href=what;

Modelos de estrutura em CSS

O site http://layouts.ironmyers.com/ oferece diversos templates gratuitos que podem ser utilizados como base para desenvolvimento de sites usando CSS.

São modelos simples com a estrutura básica.

Na primeira página você escolhe entre os templates de 750 pixels, 950px e 100% que tem seu tamanho modificado dependendo da resolução do monitor do visitante.

É uma ferramenta bem útil para o desenvolvimento de um layout. Pois se utiliza a estrutura escolhida e trabalha a arte gráfica em cima dela.

Facilita a vida de mto feed.

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

638 tutoriais para desenvolvedores

Para quem é desenvolvedor Web ter sempre uma( ou várias) referências sobre metodologias e ferramentas. Esse site é um repositório com 638 ferramentas divididas por categorias e linguagens de programação.

url: http://antriksh.com/resources/

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