Construindo Sites com

CSS e (X)HTML
sites controlados por folhas de estilo em cascata

Maurcio Samy Silva

Novatec

captulo 1

Ferramentas bsicas de desenvolvimento

Este captulo destina-se aos iniciantes. Nele apresentaremos as ferramentas mnimas necessrias ao desenvolvimento de sites, comentando e mostrando os softwares relacionados que so instalados por padro nos ambientes de desenvolvimento mais populares. Sero tambm mostrados alguns editores (X)HTML, editores de imagens e navegadores, disponveis para download na internet e de uso gratuito. Se voc um desenvolvedor experiente, poder ir para o Captulo 2, sem prejuzo do aprendizado.

1.1 Introduo
Para desenvolver um site, voc no precisa adquirir ferramentas de edio sofisticadas e dispendiosas. Particularmente, os editores do tipo WYSIWYG, que so to bem-aceitos, procurados e usados, so uma ferramenta de desenvolvimento no-recomendada para o incio do aprendizado. Tais ferramentas devem ser usadas apenas quando o desenvolvedor tiver total conhecimento e controle da maneira como geram o cdigo.
A sigla WYSIWYG para a expresso What You See Is What You Get empregada para designar interfaces de produo em que o resultado final do desenvolvimento semelhante quele mostrado na interface do software durante a sua criao. A maioria dos editores de texto desse tipo, como, por exemplo, o Microsoft Word. Nesses editores os textos, paginao, formatao e apresentao do documento so mostrados na tela durante a fase de criao, de maneira idntica ao resultado final, quando o documento for impresso ou apresentado nas mdias para as quais as criaes do editor se destina.

Sites so criados com o uso de editores (X)HTML. O exemplo clssico e o mais conhecido dos editores o Adobe Dreamweaver, uma ferramenta poderosa quando usada de maneira adequada. Editores (X)HTML do tipo WYSIWYG, como

21

22

Construindo Sites com CSS e (X)HTML

o Dreamweaver, permitem o desenvolvimento de um site sem conhecimento da (X)HTML. Os menus e os botes da interface grfica geram automaticamente a marcao para todos os componentes de uma pgina web, desde simples pargrafos at scripts para o funcionamento de mecanismos de navegao ou para a insero de vrios tipos de mdia. Todo cdigo gerado de forma automtica, sem que o fazedor de sites tenha necessidade de escrever uma linha de cdigo sequer. Se voc um fazedor de sites ou est no incio do aprendizado para desenvolver sites, recomendo vivamente no usar editores WYSIWYG na jornada para a criao de sites com CSS e (X)HTML. Como j afirmei, esses tipos de editores so ferramentas poderosas e indispensveis na fase de produo de um site, contudo no as use at que esteja dominando com total segurana a codificao (X)HTML e tenha adquirido conhecimentos suficientes para criticar e modificar cdigos gerados automaticamente por editores. Para acompanhar os exemplos contidos neste livro voc vai precisar de um editor de texto simples, um programa para visualizar sites na internet e um editor de imagens. Tanto o editor quanto o navegador esto instalados no seu computador por padro. O editor para tratamento de imagens ser necessrio caso voc queira criar ou tratar imagens, mas, para o aprendizado e a prtica, ele dispensvel, e voc poder usar imagens existentes. Quando seu site estiver pronto, ir precisar de uma ferramenta para public-lo na internet. Ferramentas de publicao de sites so chamadas de Clientes FTP.

1.2 Ambiente Windows

Veremos, a seguir, as ferramentas nativas do ambiente Windows. Os exemplos mostrados baseiam-se no sistema operacional Windows XP em portugus.

1.2.1 Bloco de Notas

O editor (X)HTML padro o Windows Bloco de Notas mostrado na Figura 1.1 e que oferece funcionalidades mnimas de edio, mas suficientes para escrever marcao (X)HTML. Voc acessa o editor seguindo o caminho, no menu do Windows, conforme mostrado a seguir:
Iniciar > Programas > Acessrios > Bloco de Notas

Captulo 1 Ferramentas bsicas de desenvolvimento

23

Figura 1.1 Bloco de Notas.

Se voc um iniciante, recomendo que use o Bloco de Notas para escrever seus cdigos e acompanhar estudos dos exemplos mostrados aqui. E, neste caso, uma boa idia colocar o cone do editor na barra de ferramentas do seu Windows, a fim de criar um atalho de acesso rpido ao editor. Na Figura 1.2 mostrado o cone padro do Bloco de Notas.

Figura 1.2 cone do Bloco de Notas.

Voc cria um atalho de acesso rpido ao Bloco de Notas como descrito a seguir: 1. V ao menu: Iniciar > Programas > Acessrios > Bloco de Notas. 2. Clique com o boto direito do mouse sobre o cone do editor. 3. No menu de contexto que se abre, escolha: Criar atalho. Essa ao criar uma nova instncia do cone na caixa do menu. 4. Clique e arraste a instncia criada para cima da barra de ferramentas. isso. Voc est com a configurao de acesso rpido ao Bloco de Notas pronta para uso.

1.2.2 Internet Explorer

O navegador-padro o Internet Explorer, muito provavelmente j seu conhecido, cuja interface mostrada na Figura 1.3. Vale notar que, tal como fizemos para o editor de texto, uma boa idia criar um atalho de acesso rpido na barra de ferramentas. Proceda de maneira idntica quela descrita anteriormente, acionando o menu:

24

Construindo Sites com CSS e (X)HTML

Iniciar > Programas > Internet Explorer

Figura 1.3 Internet Explorer.

1.3 Ambiente Macintosh

Para o ambiente Mac, os exemplos mostrados baseiam-se no sistema operacional Mac OS X, verso em ingls.

1.3.1 TextEdit
O editor-padro o TextEdit, que, ao contrrio do Bloco de Notas para Windows, oferece funcionalidades de edio mais sofisticadas conhecidas como edio rica. Os recursos desse tipo de edio vm habilitados por padro e permitem controlar alguns aspectos da apresentao dos contedos em edio. Na Figura 1.4 mostrada a interface do TextEdit.

Figura 1.4 TextEdit em modo de edio rica.

Voc precisa configurar o TextEdit para funcionar como um editor simples de textos. Para acessar o TextEdit, siga o caminho mostrado a seguir:
Applications > TextEdit

Captulo 1 Ferramentas bsicas de desenvolvimento

25

Voc configura o TextEdit para edio simples de textos como descrito a seguir: 1. V ao menu Applications > TextEdit > Preferences. 2. No menu Preferences, na rea New Document Attributes, marque Plain text. 3. Feche o menu e a instncia do TextEdit que est aberta. Na prxima vez em que voc iniciar o TextEdit, ele estar configurado conforme mostrado na Figura 1.5.

Figura 1.5 TextEdit em modo de edio simples.

1.3.2 Safari
O navegador-padro o Safari, cuja interface mostrada na Figura 1.6.

Figura 1.6 Safari.

26

Construindo Sites com CSS e (X)HTML

1.4 Navegador-padro
imprescindvel que voc tenha instalado em seu ambiente de desenvolvimento pelo menos um navegador-padro. Recomendo fortemente a instalao do Firefox, pois dispe de uma incrvel quantidade de plugins auxiliares para a construo de sites. Voc pode fazer o download do Firefox em http://www.mozilla.com/en-US/firefox/
all.html.

1.5 Editores gratuitos

Tendo adquirido os conhecimentos fundamentais da edio de documentos (X)HTML com uso das ferramentas-padro citadas, seu prximo passo adquirir ferramentas com mais recursos de edio. Existe uma variedade imensa de editores para download gratuito na internet, e a escolha de um deles para desenvolver seus sites uma questo de gosto pessoal. Como orientao geral, apresento, a seguir, os endereos para download de algumas dessas ferramentas gratuitas. Fazer uma anlise, comparao ou mesmo sugesto de uso de uma das ferramentas listadas uma questo pessoal, alm de estar fora do escopo deste livro. Assim, a escolha fica a critrio de cada um...

Editores (X)HTML

HTMLKit: http://www.htmlkit.com/download/ CoffeeCup Free: http://www.coffeecup.com/free-editor/download.php Arachnophilia: http://www.arachnoid.com/arachnophilia/

Editores de imagens

Gimp: http://www.gimp.org/downloads/ Picasa: http://picasa.google.com/ ImageMagic: http://www.imagemagick.org/script/download.php

Editor CSS
Normalmente, os editores (X)HTML j vm com editor CSS integrado que atende s necessidades de edio das folhas de estilo.

Captulo 1 Ferramentas bsicas de desenvolvimento

27

A maioria dos editores especficos para CSS no disponibilizada em verso gratuita. A Newsgator, fabricante do TopStyle, um editor CSS bem-aceito no mercado, tem uma verso gratuita do TopStylePro denominada TopStyleLite, a qual acompanhada por algumas funcionalidades da verso paga e pode ser obtida em:
http://www.newsgator.com/Individuals/TopStyle/Default.aspx

Sobre editores
Quer voc tenha optado por um editor (X)HTML/CSS gratuito ou por um sofisticado editor pago, como o Dreamweaver, por exemplo, importante no deixar de analisar com extremo cuidado a criao automtica do cdigo pelo editor. fundamental comear com ferramentas de edio simples at estar completamente seguro do que est desenvolvendo, antes de optar por um editor com recursos avanados. Feita esta ressalva, tenho de admitir que, em fase de produo, o desenvolvedor no pode dispensar o uso de editores que disponham de recursos avanados. No vivel nem sensato construir e manter um site de mdio porte com o NotePad e o Picasa. Tais so ferramentas para estudo e sedimentao de conhecimentos.

1.6 Cliente FTP

Trata-se de uma ferramenta para publicar documentos na internet. Muitos dos editores (X)HTML vm com esta funcionalidade integrada. Voc pode escolher entre uma imensa variedade de clientes FTP disponveis para download gratuito.

FireFTP: http://fireftp.mozdev.org/ FileZilla: http://filezilla-project.org/download.php?type=client SmartFTP: http://www.smartftp.com/