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 José Carlos a 28 de Fevereiro de 2007 às 04:50
A manter a qualidade do anterior, muito bom!

Faltam 13, não é? :)

De Samuel Martins a 28 de Fevereiro de 2007 às 07:19
Enquanto que o Gimp e o Inkscape conseguem ser alternativas competitivas, o nvu está longe de o ser. Aliás, na minha opinião (e por muito que me custe), o Dreamweaver não tem concorrência à altura. Eu vou usando o Quanta e o Bluefish, mas muito sinceramente, mais pelo syntax e parent highlighting e code completion, do que outra coisa. E quando estou com pressa, é mesmo vim para cima (os meus tempos de emacs já lá vão!).

De Dextro a 28 de Fevereiro de 2007 às 10:22
Vou fazer umas ressalvas: Na minha modesta opinião o Aptana é bem mais fácil de utilizar do que o NVU e o melhor cliente de FTP para Windows e até Linux é (mais uma vez na minha opinião) o Filezilla. Desde que o experimentei que nunca mais escolhi outra coisa.

Eu para trabalhar na primeira fase do programa por vezes uso o Visio ou o Powerpoint para fazer organogramas em vez do papel e abro o paint ou até mesmo o photoshop/gimp e rabisco um pouco uma ideia do site que quero. Pode não ser tão fácil como o papel e lápis mas eu que mal consigo fazer uma linha direita sinto-me mais á vontade de rato na mão :P

Btw e no que toca a esse factor do decorar o CSS o que eu usei para começar foi um livro que comprei na bertrand em inglês chamado HTML Complete da editora Sybex. Foi um bocado caro mas trazia todas as tags HTML, todas as propriedades CSS e foi com ele que descobri a existência do xHTML curiosamente portanto para gajos mais "old school" como eu que preferem ler em papel em vez de no ecrã é uma boa ideia mas já está um pouco fora do espectro deste post.

Overall: 4.8 out of 5! :lol:

De Marco Rodrigues a 28 de Fevereiro de 2007 às 11:43
Não vou voltar a sugerir o que já foi comentado por outros.

- FTP no Windows recomendaria o FlashFXP - www.flashfxp.com
- Em Linux acrescentaria o Blender para Imagem, animação, etc. - http://www.blender.org e o Wings 3D - http://www.wings3d.com/gallery.php
- Extensão de Firefox, acrescentaria também o FireBug - http://www.getfirebug.com
- Em vez do FileZilla para Linux, temos o gFTP que é gratuito e serve o seu propósito muito bem.
- Adobe Photoshop CS2 em Linux - http://blog.publicidadpixelada.com/how-to-adobe-photoshop-cs2-on-ubuntu-10-steps/

Bom artigo =)

De Isa a 28 de Fevereiro de 2007 às 11:46
Nunca despenso o papel he he o powepoint é para os gestores de projecto lol j/k
Mas é verdade, rabisco e se tenho que mostrar maquete sai logo uma rudimentar no Photoshop ou Fireworks :)
Quanto ao papel, same here, perfiro livros. Por aqui, existem três de (x)HTML/CSS que foram e ainda continuam a ser, uma grande ajuda ..e viva à amazon :)

Não falei em aplicações 3D porque não acho que sejam essenciais para o webdesign. Fazem gráficos todos marados e tal, mas pessoalmente, não acho muita piada.

Quanto aos programas para Linux, têm que me dar um desconto que eu não percebo nada disso..^^

De Alcides a 28 de Fevereiro de 2007 às 13:01
Eu pessoalmente uso para tudo e mais alguma coisa Notepad++ e Fireworks. O que me atrai neste último em relação ao Photoshop é o facto de ser bastante mais intuitivo e sinceramente, a única coisa que me faz falta é os brushes, e que as vezes acabo por "contornar" e metê-los no Fireworks.

Em relação a escrever código, se pretendem fazer alguma coisa profissional e standart, sugiro vivamente a esquecer o Dreamweaver, assim como qualquer editor WYSIWYG. Enquanto achei o DW muito virado para tabelas, e o Expression mais virado para divs, considero que ambos produzem demasiado lixo no código.

Eu uso notepad++ (personalizado por mim), com o QuickText, para me poupar muito trabalho. Faço tudo à unha, e tenho sempre ao lado o IE, Flock e Opera para ir testando o layout.

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...

De José Carlos a 28 de Fevereiro de 2007 às 14:35
Isa: para windows há um IDE interessante que se chama intype (http://intype.info/home/index.php). Testei noutro dia e pareceu-me muito bom. Dizem que é o Textmate para windows. Quase quase :)

De Isa a 28 de Fevereiro de 2007 às 15:00
Zé, não se exportam templates do photoshop e do fireworks (à parte do fireworks fazer menus entre outros e gerar html e javascript), exportas apenas as imagens que vais usar, os templates são posteriormente montados no dreamweaver, por exemplo.
Um webdesigner que te envia os sites como dizes, várias paginas de html, imagens dentro de pastas e folhas de estilo, tudo bem organizadinho, está a fazer bem o seu trabalho. Se um webdesigner te envia apenas .psd's e tens que ser tu a corta-los, então não estamos a falar de um webdesigner, mas sim de um designer gráfico.

Um dos 15 posts que ando a fazer é precisamente como exportar os layouts do PS/FW para serem montados no DW :)

BTW, obrigada a todos pelas aplicações que têm estado a sugerir ;)

De Rui Moura a 28 de Fevereiro de 2007 às 15:59
"Um dos 15 posts que ando a fazer é precisamente como exportar os layouts do PS/FW para serem montados no DW :)"

Já te despachavas com isso .... kidding :P

Estou com o Dextro. O mellhor Web IDE para Linux (também existe para Windows e Mac, uma vez que é baseado em java) é o Aptana. É mesmo, na minha opinião, o que se chega mais próximo do Dreamweaver, se tirarmos a parte de "Designer Layout". O code completion é brutal. Tem ftp, e essas coisas todas (tem inclusivamente sincronização com svn).

A nível de desenho de layout o Photoshop está lá no topo, lá longe, mas o Gimp (a última versão de testes) está a ficar muito, muito bom neste aspecto (já suporta nativamente o slice tool de um modo decente e tudo o resto).

Cheers.

 

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