isacosta.net » the geek side
28.2.07
categorias:
[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.
link do postPor Isa, às 04:00  comentar

De Zé Costa a 28 de Fevereiro de 2007 às 14:12
Uma coisa que sempre me intrigou é como é possivel exportar um template do photoshop/fireworks?
Exportar várias páginas HTML com uma pagina externa de CSS com todos os estilos usados, imagens dentro de pastas criadas para cada area do site, textos coloridos, caixas de input com dimensões definidas, cores de fundo das tabelas, etc..

Sou programador e trabalhei com um webdesigner em tempos, que me enviava os templates todos impecaveis e prontos a meter código.

Deste essa altura até hoje não encontro designers que enviem templates. Apenas .psd's...

 

Isa. Webdesigner, geek, apple fangirl assumida, necessita tanto de uma ligação à internet como do ar que respira. Adepta das novas tecnologias e sempre atenta às novidades!

online