[2/15]
"Que programas devo utilizar para fazer um
site?" é geralmente a primeira pergunta que fazemos quando pensamos em aventurar-nos pelo mundo do
webdesign.
Existe um conjunto de ferramentas especificas para cada fase do desenvolvimento de um
site, desde planifica-lo até publica-lo na
net. Vamos por partes:
Projectar o site!Lápis, borracha e papel
Nada como começar por pegar numa folha de papel e rabiscar aquilo que será o nosso futuro
site. Isto ajuda-nos a criar uma ideia do posicionamento e dimensão dos elementos que estamos a pensar usar. Convém também definir o esquema de navegação, desenhando um
fluxograma, por exemplo.
Desenvolver o grafismo!Para desenvolver o grafismo do nosso
site vamos precisar de uma aplicação de edição gráfica. Normalmente, quando se fala em fazer um
layout, o primeiro programa que salta para cima da mesa é o
Photoshop. O segundo é o
Fireworks.
O
Photoshop é sem dúvida alguma, o melhor programa de edição de imagem que existe, e nenhum outro o bate na qualidade dos gráficos que gera e do controlo que nos oferece, seja em manipulação e retoque de imagens, sombras,
degradés, filtros, entre outros, pois a lista de
features é enorme. Aprender a usa-lo correctamente não é propriamente um passeio no parque, mas o esforço vale bem a pena.
Já o
Fireworks é mais fácil de usar que o
Photoshop. Desenhar
layouts nele é sempre a andar e tem funcionalidades
web embutidas, ou seja, podemos logo programar visualmente algumas acções do
site, como menus. A qualidade dos
degradés e sombras e as ferramentas de retoque de imagem são inferiores às do
Photoshop, visto que é um programa semi-vectorial mais direccionado para a criação de elementos gráficos.
Para mim, a grande vantagem do
Fireworks é a optimização e exportação dos gráficos, que considero melhor que a do
Photoshop.
Também podemos recorrer a programas vectoriais para desenhar alguns elementos gráficos com maior detalhe. O
Illustrator, o
Freehand e até mesmo o
Flash podem ser utilizados para criar gráficos, ilustrações ou icones com grande qualidade.
Todas as ferramentas que mencionei acima pertencem à
Adobe e são pagas a peso de ouro, mas felizmente existem alternativas
opensource gratuitas, como é o caso do
Gimp para edição gráfica (ou
Seashore, para quem usa MacOS X e não quer instalar o
X11), e o
Inkscape para vector.
Todas elas funcionam em Windows e MacOS X, e apenas as duas opções
opensource estão também disponíveis para Linux, apesar de já ter ouvido falar de quem tenha conseguido correr o
Photoshop nesta plataforma.
Agora que já sabemos que ferramentas usar para desenharmos o nosso
site, vamos conhecer aquelas que nos permitem prepara-lo para a
web.
Código HTML/CSS!O
Dreamweaver é a melhor ferramenta que conheço para compor os
sites e escrever
markup.
Em "
design view", o
WYSIWYG é cada vez mais fiel e gera o código mais limpo que tenho visto em programas do género. Em "
code view" a codificação de cores e a sugestão de código (
code-hinting) torna a produção do HTML muito mais rápida.
Possui uma biblioteca de acções de
javascript e de linguagem de servidor, que torna mais fácil dar dinamismo aos
sites. Também existem montes de extensões
disponíveis na net que complementam este cardápio de funcionalidades.
Existe uma alternativa gratuita ao
Dreamweaver, o
NVU, que funciona em Windows, MacOS X e Linux.
Para quem não se acanha em escrever código em editores de texto, seja de raiz, seja fazer apenas pequenas modificações, existem umas quantas aplicações como o
Notepad 2 ou
Notepad++ (ambos gratuitos) para Windows, o
TextMate,
BBEdit, ou o
Smultron (gratuito, e o meu favorito) para MacOS X, e o
jEdit que é multi-plataforma.
O problema de utilizar editores básicos, e que não tenham
code-hinting, é que dificulta a vida a que não conhece bem as regras de CSS. Com a prática acabamos por decorar bastantes, mas até lá, podemos recorrer a editores de CSS.
O mais conhecido é o
TopStyle (Windows), e para MacOS X existem, entre outros, o
CSSEdit e o
Syle Master.
O
Microsoft Expression é a resposta da Microsoft às
suites da Adobe. É composto pelo
Expression Web, que é o equivalente ao
Dreamweaver ou ao
GoLive, pelo
Expression Blend, uma espécie de
Director para aplicações multimédia
desktop, o
Expression Design, um programa de desenho vectorial semelhante ao
Fireworks ou ao
Inkscape, que trabalha com
SVG (
Scalable Vector Graphics). O
Expression Design usa
XAML (
Extensible Application Markup Language), que faz parte do motor gráfico do
Windows Vista. E finalmente, o
Expression Media, que serve para catalogar os ficheiros multimédia que vamos usar nas nossas composições.
Já agora, não se esqueçam de instalar a
Web Developer Extension, que é simultaneamente uma das melhores extensões que existe para o Firefox e um dos melhores aliados do
webdesigner, pois permite dissecar os
sites e fazer
debug, por exemplo, ao CSS em tempo real. Para MacOS X existe o
XyleScope que faz o mesmo, usando o
Safari.
Flash!O
Flash é uma aplicação de animação vectorial muito boa para gerar animações e componentes para
sites. Apesar de não morrer de amores por ele, sei que não pode ser ignorado. Tem um enorme potencial na área do vídeo e também em aplicações dinâmicas devido às funcionalidades de ligação a
webservices, fontes de dados em
XML (
Extensible Markup Language), e outras.
É bastante usado para fazer
sites completos, mas como expliquei há uns meses
neste post, nem sempre é a escolha acertada.
A melhor forma para aprendermos como se fazem algumas animações em flash é observar como foram feitas. Mas como raramente temos acesso ao ficheiro do projecto (*.fla), temos que descarregar o filme compilado (.swf) e corre-lo num descompilador. O
Sothink SWF Decompiler e o
Flash Decompiler são duas das melhores soluções que andam por aí, mas infelizmente só correm em Windows. Para MacOS X existe o
Gordon.
Existe uma extensão para FireFox bastante útil para descarregar os SWF's (e não só), a
Download Embedded.
Publicar na net!Uma vez que o nosso
site está pronto para ser enviado para
internet, vamos precisar de um
cliente de FTP!
Os clientes de FTP (
File Transfer Protocol) são usados para nos ligar-mos a um servidor
web, para que um possamos colocar os nossos ficheiros online.
Um dos melhores clientes para Windows que andam por aí é o
CuteFTP, e também o
SmartFTP, que é gratuito. Para MacOS X existem uns quantos muito maneirinhos, como o caso do
Transmit, do
Yummy, e do
Fetch, e uma alternativa gratuita muito boa, o
Cyberduck.
Também podemos simplesmente instalar o
FireFTP no
FireFox uma extensão criada para o efeito.