Você está na página 1de 35

UNIDADE 3 TÉCNICAS DE ELABORAÇÃO DE HOMEPAGES

OBJETIVOS DA UNIDADE Apresentar técnicas para a elaboração de Web Sites que contemplam o planejamento, a escolha da ferramenta mais adequada, o estudo de conteúdo, a navegabilidade do site, estrutura e outros. Com o conhecimento obtido nesta unidade, o egresso na função de tecnólogo, poderá decidir qual ou quais ferramentas irão ser utilizadas na produção e desenvolvimento de um sistema remoto (Web Site).

1 – INICIANDO OS TRABALHOS
Como qualquer empreendimento, um site na web vem de um desejo de informar, vender, comunicar alguma coisa para algu€m. Mas, as raz•es b‚sicas de um site visto da ƒtica de uma nova economia s„o duas: economizar e ganhar dinheiro. Como essa competi…„o j‚ nasceu acirrada, haver‚ sempre um competidor dentro da web para todo tipo de site, n„o importa o qu„o nova a sua ideia possa parecer. Perceba que a Internet possibilita a todo e qualquer indiv†duo, o poder de informar, vender ou comunicar alguma coisa para algu€m.

1.1 – PLANEJANDO E ORGANIZANDO UM WEB SITE
A melhor forma de se desenvolver um web site € estabelecer, antes mesmo de se iniciar os trabalhos de constru…„o, a sua estrutura operacional. Uma estrutura inteligente € a melhor fƒrmula para um projeto web ter uma manuten…„o f‚cil. Aprenda que sites que querem permanecer durante muito tempo “no ar”, ou seja, terem longevidade de funcionamento precisam ser atualizados com freqŠ‹ncia. Como costumamos dizer, n„o h‚ “uma receita de bolo” ou uma fƒrmula espec†fica para se organizar a estrutura de um site. Mas, quando voc‹ idealizar uma estrutura qualquer, deve primeiramente pensar em uma que fa…a sentido instintivamente, pois quanto mais logicamente a informa…„o estiver organizada, maior ser‚ a chance do pŒblico tamb€m receber a informa…„o sem maiores dificuldades.
NOTA – LONGEVIDADE E SUCESSO: O profissional da web deve ter a consci‹ncia que o sucesso de seu empreendimento virtual est‚ diretamente ligado a condi…„o de se manter “no ar” por um longo per†odo de tempo.

Mas, o que se quer dizer com “idealizar uma estrutura qualquer”? Imagine que voc‹ pode organizar as informa…•es de seu projeto web agrupando-as por modelos, por produtos destinados a grupos espec†ficos (homens, mulheres, crian…as, etc...) ou at€ mesmo por data. Fa…a testes para verificar qual forma ou tipo de agrupamento facilitaria mais a sua manuten…„o. Se o site tiver, por exemplo, foco no e-commerce, ent„o o pŒblico dever‚ acess‚-lo na busca de um tipo espec†fico de informa…„o desse foco. Com certeza, esse pŒblico n„o estar‚ acessando seu site para obter entretenimento ou not†cias diversas. Ele estar‚ buscando informa…•es como: o que o produto ou servi…o oferece; quais os modelos e tamanhos existentes e seus respectivos pre…os; onde e como se pode comprar; como contatar a empresa, etc... Um site comercial pode se tornar um aliado poderoso de uma empresa e eventualmente se tornar a maior fonte de sua renda se internautas passarem a comprar grandes quantidades de seus produtos e/ou servi…os atrav€s da Internet.

Quando a web ainda era uma novidade, muitas pessoas tentaram trazer para esta nova m†dia, conceitos antigos de t†picos de mat€ria impressa e acabaram por lotar a web com material ilustrativo e entretenimento como se faz com anŒncios impressos e para a TV. Entretanto, um site precisa ser muito mais que isso apenas! • necess‚rio primeiramente estabelecer os objetivos que regem a presen…a deste site na web, e como ela pode melhor ajud‚-lo. Diferente da m†dia impressa ou TV, um site necessita de constante cuidado e atualiza…„o para crescer e evoluir. Deve ser levado em considera…„o, neste momento, que as opera…•es envolvidas na constru…„o e manuten…„o do site influenciam diretamente em seu desenvolvimento.
FIGURA 23 – MANUTENŽ•O DO SITE: IMPORTANTE E NECESS•RIA

A grande dica € procurar v‚rias formas de se aumentar as chances de seu projeto dar certo, de se obter sucesso com ele e, com isso, sua longevidade na web. Procure dar a ele um diferencial, ser Œnico na grande rede, assim ele ter‚ mais for…a no aspecto de competitividade, a qual todos nƒs sabemos, € bastante acirrada! Existem tr‹s grandes momentos para tentar se obter esse diferencial: o design, o conteúdo e sua funcionalidade. S„o essas tr‹s armas que, se trabalhadas de forma adequada, poder„o lhe proporcionar enormes chances de conquistar a Web. Quando essas armas s„o aliadas a dois dispositivos essenciais, temos um arsenal completo! S„o eles, os “olhos” e o “c€rebro” (pesquisa, recolhimento de informa…„o e conclus„o), que quando usados adequadamente, s„o os elementos catalisadores do processo de constru…„o de um site. Podemos afirmar que a Internet € a m†dia mais r‚pida que temos hoje em dia. A interatividade entre escritor e leitor chegou ao seu est‚gio mais avan…ado. Fazer uso desta velocidade € essencial a qualquer um dos atores da grande rede, seja ele um vendedor, comprador, prestador de servi…o, etc... Essa velocidade influi nas rela…•es em muitas maneiras.

Cada site € como um indiv†duo. a empresa poder‚ utilizar o site para divulga…„o maior de seus produtos e nele implementar pol†ticas de publicidade e comercializa…„o. Perceba que estrategicamente deve-se idealizar primeiramente o conteŒdo de um projeto web antes de se dar in†cio ao desenvolvimento do projeto gr‚fico. Voc‹. Cada leitor tem uma prefer‹ncia e enxerga diferentemente a informa…„o. ser‚ a pessoa mais indicada para a defini…„o e organiza…„o das informa…•es que ser„o disponibilizadas no projeto. conforme a resposta positiva ou negativa do leitor. com uma frequ‹ncia maior do que qualquer outro formato de m†dia existente. o que € e o que n„o € indicado para ela.Os sites podem mudar tanto em forma quanto em conteŒdo. seja para um produto ou para o processo de marketing/venda. saber‚ distinguir como ningu€m. Uma grande vitrine mundial! FIGURA 24 – FORMUL•RIO DE CONTATO Voc‹ tamb€m pode utilizar seu site para estreitar as rela…•es entre empresa e seus clientes. e € exatamente isso que vai ser o elemento diferenciador. e ainda. ou ainda entre a marca de seus produtos ou servi…o e seus consumidores. com a sua personalidade distinta. Voc‹ sendo o idealizador/coordenador do projeto web site de sua empresa. Pode ser para servir de ferramenta de apoio. as empresas buscam cada vez mais . Perceba que nos dias de hoje. ent„o. H‚ v‚rias maneiras de se apresentar informa…„o/produto dentro da web. Deixando o leitor personalizar um site da maneira como lhe melhor conv€m € tamb€m uma ferramenta poderosa da Internet. Neste caso. Um web site pode ser desenvolvido para v‚rias finalidades.

2004. As pessoas t‹m recorrido aos sistemas de informa…„o para se comunicarem. transforma e dissemina informa…•es em uma organiza…„o. uma diversidade de dispositivos f†sicos (hardware). oferecendo. Utilizar um site como um abrangente sistema de informa…„o para a dissemina…„o de informa…•es € uma de suas maiores finalidades. por exemplo. p. canais de comunica…•es (redes) e dados armazenados (recurso de dados) (O’BRIEN. utilizando.a fideliza…„o de seus clientes. com certeza estar‚ a um passo de seus concorrentes. instru…•es e procedimentos de processamento de informa…„o (software). NOTA – FORMUL•RIOS ON-LINE: A utiliza…„o de formul‚rios de contato pode se apresentar como uma excelente ferramenta de capta…„o de informa…•es para voc‹ efetivar um atendimento diferenciado para seus clientes. FIGURA 25 – DISSEMINAŽ•O DA INFORMAŽ•O DIGITAL . redes de comunica…„o e recursos de dados que coleta. ofertas e promo…•es que eles gostariam de aproveitar. hardware. Costumamos dizer que o maior tesouro que algu€m pode ter € o conhecimento. Atrav€s de seu site € poss†vel obter informa…•es muito preciosas a respeito de seu pŒblico-alvo com a aplica…„o de formul‚rios de contato (figura 39) e estabelecer condi…•es para fideliz‚-los. Para as empresas essa situa…„o n„o € diferente! A organiza…„o que tiver um maior poder de comunica…„o em busca da informa…„o. desde a alvorada da civiliza…„o. certo? Esse conhecimento € obtido e engrandecido cada vez mais com o nŒmero de informa…•es que coletamos no nosso dia-a-dia.6). Sistema de Informa…„o € um conjunto organizado de pessoas. assim como na divulga…„o dela. software.

como por exemplo. N„o h‚ uma maneira segura de controlar como o leitor vai ver uma p‚gina! Existe uma variedade muito grande de poss†veis resultados visuais de um site na tela. pois h‚ muitas variantes de como a informa…„o € trabalhada por cada browser. Se o site demorar muito a “baixar”. Iremos estudar nessa unidade. O desenho gr‚fico de um web site € desenvolvido por uma variedade muito grande de linguagens de programa…„o e por softwares de apoio. como por exemplo. Compete ao tecnƒlogo conhecer as alternativas e saber suas aplicabilidades e limita…•es para que ele possa determinar qual solu…„o web ser‚ utilizada em cada caso. a forma ou o desenho gr‚fico que ele apresenta. uma “navega…„o” mais eficiente e prazerosa.1 – Definindo o Layout Quando falamos em “estrutura web” a primeira coisa que vem em nossa mente € o “layout”. • sobre a estrutura de um web site que iremos falar a seguir. Quando um designer utiliza qualquer linguagem de programa…„o ou marca…„o de texto para desenvolver um web site. algumas abordagens iniciais e introdutƒrias sobre essas ferramentas no intuito de dar conhecimento ao tecnƒlogo sobre algumas op…•es existentes no mercado.Existem muitas outras finalidades. e-mail e newsletter1 gr‚tis. prestar informa…•es em um projeto web € uma de suas principais finalidades e essas informa…•es necessitam ser precisas. Ressaltamos que a responsabilidade de aprendizado dessas ferramentas em uma condi…„o aprofundada € do profissional que ir‚ trabalhar como programador e/ou designer. ou seja. por exemplo. ele n„o necessariamente obter‚ controle total sobre o formato de seu aparecimento nas telas dos internautas. e que aborda assuntos espec†ficos .2 – DETERMINANDO A ESTRUTURA DO SITE O tecnƒlogo e gerente de um projeto web deve se preocupar em articular com as pessoas gestoras das unidades organizacionais no intuito de captar a ess‹ncia e/ou os propƒsitos desse projeto. 1. ou seja. entre elas aquelas que s„o utilizadas para atrair os internautas. desconto para compra de produtos. 1. o tempo que leva para o internauta visualizar as informa…•es na tela de seu computador. objetivas e bem estruturadas em fun…„o do propƒsito maior do projeto. participar de concursos ou enquetes. diversas t€cnicas direcionadas ’ elabora…„o adequada da estrutura de um web site. via celular. no intuito dele proporcionar aos seus usu‚rios. e muitas outras! Como j‚ ressaltado anteriormente. Um dos aspectos mais importantes a serem observados no site € a sua velocidade de transmiss„o de dados. 1 Newsletter € um boletim informativo que € enviado eletronicamente. diversos ajustes dever„o ser realizados para eliminar essa condi…„o. Nƒs iremos estudar mais adiante.2.

2 – As condi…•es de navegabilidade Logo no in†cio desse assunto. Gostaria de chamar sua aten…„o para uma quest„o muito importante! Deve haver uma preocupa…„o na elabora…„o do projeto lƒgico do site no sentido de n„o permitir que suas p‚ginas sejam acentuadamente “pesadas”. Alguns browsers que encontramos no mercado possuem certas dificuldades para estabelecer integra…„o com algumas aplica…•es e linguagens web. as chances de seu layout aparecer completamente modificado sƒ por esse fator € muito grande. mudar para a fonte padr„o e assim. em raz„o do tipo de browser que est‚ sendo utilizado. qual seja. citada no exemplo anterior) e o internauta n„o a tiver instalada em seu computador. causando transtornos na hora de “abrir” a p‚gina e suas aplica…•es. com certeza. como fonte padr„o a “cooper black 14”. por exemplo. acontecer‚ a mesma coisa. o sistema ir‚. NOTA – ORIENTA‚ƒO AO PROGRAMADOR: Para diminuir a possibilidade do evento com as fontes € importante voc‹ orientar seu programador a utilizar fontes padr„o que observamos na maioria dos sites. o que pode trazer desconforto e at€ impaci‹ncia ao internauta. automaticamente. como por exemplo. 1. uma desformata…„o total das informa…•es textuais do site.2. Isso pode ser a principal causa de um usu‚rio nunca mais “tentar” consultar o conteŒdo de um site! FIGURA 26 – A LENTID•O DAS P•GINAS PESADAS . Ainda podem existir outros problemas em fun…„o dessas variantes. (com arquivos de grande tamanho pra carregar) o tempo observado para visualiza…„o completa do conteŒdo ser‚ muito extenso. Pode ocorrer o inverso tamb€m! Imagine que se o site for desenvolvido com uma fonte muito pouco utilizada (como essa. foi mencionada a quest„o da velocidade de transmiss„o dos dados pelo site.Se o internauta possui. Entenda que a grande maioria dos internautas em nosso territƒrio ainda utiliza conex„o com baixas velocidades (linha discada ou dial up) e no caso de navega…„o em p‚ginas pesadas.

caso contr‚rio poderia ter problemas de visualiza…„o do conteŒdo apresentado pelo site. Outro aspecto bastante discutido entre os desenvolvedores web € a resolu…„o que deve ter um site nos dias de hoje. para que as resolu…•es dos sites come…assem aos poucos a migrarem para uma qualidade maior de resolu…„o de 1024 x 768 e. As condi…•es de “navegabilidade” € outro fator primordial a ser observado na defini…„o da estrutura de seu projeto web. A grande dica € voc‹ tentar se colocar no lugar do internauta e observar o que ele poderia sentir no ato da primeira visita ao site. Um pixel € o menor ponto que forma uma imagem digital. consequentemente. Isso quer dizer que o internauta deveria configurar o seu monitor para esse tipo de formato. Nos dias de hoje essa resolu…„o aumentou. que mesmo utilizando a recomendada resolu…„o de 1024 x 768 que hoje € quase um padr„o na web. Quanto maior a quantidade de pixels. Agora imagine que a rua por onde elas est„o “tentando” trafegar seja a via de transmiss„o dos dados utilizados por aquela p‚gina. entretanto. Voc‹ deve entender. Esses computadores apresentam uma capacidade de qualidade superior de resolu…„o em suas telas de cristal l†quido e. Imagine que todas essas pessoas representem todo o conteŒdo que uma p‚gina na Internet deseja mostrar na tela. Como o respectivo site est‚ usando uma conex„o lenta (a via) e a p‚gina ainda apresenta muita informa…„o (quantidade de pessoas). Com rela…„o a esse fator o que sugiro € um meio termo. a resolu…„o utilizada era de 640 X 480 pixels2 e depois passou a ser 800 x 600. ainda sim poder‚ haver problemas de visualiza…„o.Preste bem aten…„o para a imagem da figura 26. acredito que impulsionada pela necessidade de atender os usu‚rios cada vez maiores de computadores port‚teis (notebooks). melhor a qualidade da imagem. Que seja evitada a m‚xima resolu…„o aqui citada e tamb€m a antiga de 800 x 600. com certeza haver‚ uma grande lentid„o para o usu‚rio do site conseguir encontrar o que procura. Tente responder na posi…„o de visitante. essa condi…„o concorreu. Quando essa “histƒria” come…ou. pois existir„o internautas com outras configura…•es em seus computadores e que esse fato levar‚. A grande maioria dos sites trazia em seu rodap€ a frase escrita: “Melhor visualizado em 800 x 600 pixels”. em alguns casos at€ para 1280 x 800 pixels. . a uma prov‚vel desformata…„o no conteŒdo apresentado. as seguintes quest•es: a) O que voc‹ achou da “navega…„o” entre os conteŒdos? b) Voc‹ teve dificuldades para achar alguma informa…„o que procurava? c) As p‚ginas do site demoram muito pra abrir? d) Voc‹ encontrou informa…•es duplicadas ou controv€rsias? e) O que poderia ser feito para melhorar a “navega…„o”? 2 Pixels € uma unidade de mensura…„o de qualidade de imagem.

dessa feita. comprometendo.3 – Utilizando cores no layout A defini…„o das cores que o site vai ter € uma quest„o bastante discutida entre os profissionais ligados a ‚rea de design. Quais s„o as cores predominantes ou prim‚rias desse site? N„o s„o as mesmas cores principais de sua logomarca? Fa…a um teste. 1. mais f‚cil ser‚ a possibilidade da informa…„o passar despercebida. Quando fazemos isso estamos simplesmente mantendo o que chamamos de “identidade visual” da empresa.2. Veja o exemplo da figura 27. Fa…a atualiza…•es com frequ‹ncia. pois quanto mais complexa ela for. as vistas constantes estar„o praticamente garantidas. mas deixe bem claro o que mudou e quando mudou. sentir‚ desejo de voltar. abaixo. Desenvolva uma maneira de o seu internauta saber facilmente qual conteŒdo j‚ visitou e qual ainda falta visitar. Utilize-os para apurar sua capacidade de reflex„o e tente identificar mais pontos ainda existentes para serem questionados. pois do contr‚rio ele oferecer‚ maior dificuldade no processo de atualiza…„o/manuten…„o.Evidentemente que esses s„o apenas alguns de muitos questionamentos que o projeto lƒgico de um site deve se preocupar para evitar transtornos na navega…„o de seus usu‚rios. os propƒsitos do site. A navega…„o deve ser simples. Um site deve apresentar uma boa condi…„o de navegabilidade. pois dessa forma. normalmente. NOTA – DICA DE NAVEGA‚ƒO: Quando um site apresenta boas condi…•es de navegabilidade o internauta se sente confort‚vel em pesquisar as p‚ginas e. Tenha sempre uma boa quantidade de informa…•es para gerar oportunidade de novas visitas. Navegue livremente pela Internet e observe se essa condi…„o n„o se repete na grande maioria das vezes! FIGURA 27 – LAYOUT DA HOMEPAGE DA UNAMA . Uma das primeiras perguntas que costumamos fazer €: qual devem ser as cores predominantes de um site? Ser‚ que voc‹ conseguiria responder essa pergunta? Vou lhe dar uma dica: O que graficamente representa melhor uma organiza…„o? A sua logomarca! Ent„o podemos concluir que uma boa estrat€gia de defini…„o de cores predominantes do site s„o as mesmas encontradas em sua logomarca. Tente fazer do seu site uma fonte de refer‹ncia no assunto a que se prop•e.

1. a cor azul. Esses objetos s„o representados normalmente por imagens ou textos. Lembramos que os links s„o v†nculos utilizados para interligar dois objetos na web. Para isso € importante desenvolver uma “planta” .Evidentemente que o layout do site n„o pode ficar limitado apenas ’s cores predominantes vistas em sua logomarca. a sua funcionalidade e seus propƒsitos. alguns sites adotam outras cores para combinar com suas cores prim‚rias e adotam outros recursos nos links para chamarem a aten…„o pra eles. no entanto. A escolha dessas cores secund‚rias vai de acordo com a sensibilidade do designer ou em comum acordo com o desejo da empresa.2. NOTA – LOGOMARCA DA EMPRESA: a obten…„o da logomarca da empresa € um excelente ponta p€ inicial para o desenvolvimento do layout do site para que seja observada as cores principais do mesmo. J‚ imaginou como ficaria? Totalmente ileg†vel e desconfort‚vel aos olhos. por exemplo. sƒ pode ser obtida atrav€s de certas linguagens espec†ficas para web. Essa Œltima op…„o. com duas cores principais somente. A cor azul por ser um padr„o acaba tornando mais f‚cil ao internauta a localiza…„o dos links. H‚ uma cor utilizada como padr„o para links. Um desses recursos € a manuten…„o do “sublinhado” e a troca de cor quando o mouse passa por cima dele. por exemplo.4 – Arquitetura do conteŒdo Trabalhar a arquitetura do conteŒdo € definir os objetivos do site. Imagine. entretanto. As cores secund‚rias s„o aquelas que utilizamos exatamente para “quebrar” o impacto visual cansativo e pesado que ter†amos se trabalh‚ssemos. se o site do Flamengo fosse feito apenas nas cores preta e vermelha. Nessa hora € que falamos das cores “secund‚rias”.

NOTA – MENU: Utilize um menu bem elaborado para dar ao internauta a ideia geral do conteŒdo do seu site. Os menus normalmente s„o dispostos horizontalmente. esse mapa pode ser desenvolvido efetivamente no site. onde j‚ esteve e como chegar aonde ele quer chegar. Atrav€s dele o internauta pode ter um r‚pido reconhecimento de todo o conteŒdo que o site estar‚ disponibilizando. Projetos web simples. que a cria…„o desse mapa sƒ € indicado para web sites que possuem uma grande quantidade de informa…„o. Ele ter‚ a fun…„o de mostrar de forma macro. A estrutura operacional combinada com um conteŒdo visual efetivo d‚ a oportunidade aos leitores de criar. a seguir. de forma vertical. demonstrando todas as pe…as ou se…•es desse conteŒdo juntas. um exemplo de constru…„o de p‚gina com o mapa do site. Observe na figura 29. um mapa do site. com poucas se…•es de conteŒdo n„o requerem esse tipo de mapa. FIGURA 28 – MENU HORIZONTAL DO SITE DA MICROSOFT Citamos anteriormente a condi…„o do internauta criar mentalmente um mapa. Veja na figura 28. entretanto. o seu propƒsito. do lado esquerdo da p‚gina. Observamos. Um dos principais propƒsitos do menu com destaque para se…„o em que se encontra € criar um senso de dire…„o para o navegador. onde se encontra dentro do site. um menu horizontal que demonstra ao usu‚rio o conteŒdo de cada se…„o principal. no topo da p‚gina ou. A essa planta denominamos o “menu” do site. informando assim. mentalmente. todo o conteŒdo existente no site. Ele tem que saber todo o tempo.para ele. FIGURA 29 – MAPA DE LOCALIZAŽ•O DE CONTE“DO . entretanto. Usar a sua criatividade sem deixar de lado as necessidades informativas do site € uma grande dica para voc‹ tornar seu site bastante atrativo.

2. mais caro o anunciante paga. A localiza…„o desses banners € um fator primordial para a determina…„o do seu pre…o. no rodap€ ou at€ em forma de “pop-up”3.5 – Propaganda Web Existem v‚rias formas de se praticar propaganda e/ou publicidade em um web site. Os banners precisam ter bastante efetividade. deix‚-lo sem entender a sua mensagem. Uma das formas mais comuns € com a utiliza…„o de banners animados com as ofertas que o anunciante quer disponibilizar. . Em um se…„o mais adiante iremos aprender como elaborar um banner animado. talvez seja tamb€m necess‚ria a adapta…„o para este novo formato. • essencial que se saiba o m‚ximo poss†vel a respeito. ou seja. seja um banner para um site. Como banners tem a caracter†stica de tamanho pequeno. Normalmente. independente da p‚gina em navega…„o e que € criada especialmente para um destaque informativo ou gr‚fico. Voc‹ deve entender que por isso dissemos que atrav€s de um web site € poss†vel se estabelecer novos negƒcios! O processo de cria…„o dos banners (efetivado pelo designer) € o primeiro passo para come…ar a se familiarizar com aquilo que vai ser anunciado. Construir banners complexos e contar com a imagina…„o e um alto n†vel de astŒcia do internauta para a devida interpreta…„o. A temporalidade desse banner tamb€m vai ser estabelecida em fun…„o dos valores fixados para a propaganda. um produto ou um servi…o. concretizar os seus propƒsitos de divulga…„o e pra isso eles precisam ser simples e diretos. 3 Pop-up € uma “janela” que se abre. Eles podem ser dispostos no topo da p‚gina. como se fossem uma faixa.1. quanto mais tempo um banner fica “no ar”. mas normalmente s„o no formato retangular. Os banners variam muito de estilo e tamanho. pode em certos casos.

sem prejudicar a ideia que se est‚ querendo passar. PHP e outras mais. A grande maioria dos banners publicit‚rios da web s„o desenvolvidos pelo Flash. a conclus„o de sua apari…„o ser‚ demorada. ou at€ passar para uma outra p‚gina sem se quer ter visualizado o seu banner. que foi desenvolvido pela empresa Macromedia. o programa de anima…„o gr‚fica mais usado em todo o mundo. O internauta pode desistir de abrir a p‚gina em fun…„o disso. FIGURA 30 – BANNER PUBLICIT•RIO DA DELL NO SITE DO IG A anima…„o de um banner precisa ter o poder de atrair a aten…„o do internauta para o local da p‚gina onde ele se encontra. n„o possuem recursos para fazer anima…•es em imagens. Entenda que voc‹ poder‚ ter somente poucos segundos para atrair a aten…„o do internauta com o seu banner e convenc‹-lo a se interessar pelas informa…•es nele constantes. a condi…„o de construir anima…•es incr†veis e com um tamanho bastante razo‚vel. Um fator muito importante na constru…„o de um banner € o tamanho em kbytes que ele ter‚. Infinitos sites na web possuem anima…•es/aplica…•es desenvolvidas por ele. O “Flash” € com certeza. Para isso. ASP. pois se ele apresentar um tamanho muito grande se tornar‚ pesado. ele deve ter o seu prƒprio destaque.Um banner n„o pode se apresentar graficamente de maneira conflitante com o resto da p‚gina. Em alguns casos. comprada em abril de 2005 pela Adobe Systems pela soma de 3.4 bilh•es de dƒlares. e com isso. As linguagens utilizadas para o desenvolvimento das p‚ginas web como o HTML. Sugiro que voc‹ oriente seu designer a trabalhar com um programa chamado Flash Shockwave. o designer deve utilizar softwares espec†ficos voltados diretamente para esse foco. Para essas anima…•es ou aplica…•es d‚-se o nome de “plug-in”. . O Flash apresenta como grande vantagem. a anima…„o pode at€ ajudar a suprimir palavras ou imagens.

o que diminui o tamanho (peso) da imagem. “gif” e o “jpeg” ou “jpg”. Por essa raz„o. isso quer dizer uma limita…„o muito grande em efeitos visuais como sombra. Esse formato ainda oferece uma outra vantagem. O formato gif5 sƒ tem 256 cores para definir uma imagem. pois elas geralmente s„o constru†das com um acentuado nŒmero de kbytes. FIGURA 31 – ANIMAŽ•O DESENVOLVIDA EM FLASH 1. sugiro que voc‹ descarte a op…„o de usar na web. eles poder ter o fundo transparente. que se pode traduzir como formato para interc”mbio de gr‚ficos.6 – Aplicando imagens Muitos s„o os formatos de imagens que encontramos no ambiente computacional. 4 5 BMP € uma sigla de “bitmap” que significa mapa de bits. .2. etc. Por outro lado. o “plug-in” de reconhecimento da aplica…„o. entre as mais comuns est„o o “bmp”. Formato gr‚fico originado do Windows. encontradas. por exemplo. Fa…a o seguinte: clique com o bot„o direito do mouse em cima da anima…„o. H‚ ainda a possibilidade de se utilizar alguns programas para a cria…„o de pequenas anima…•es com o formato gif. Voc‹ deve entender que o mais importante € que as imagens utilizadas no seu site devem ter. sempre que poss†vel. deixando-a acentuadamente pesada. o gif apresenta um tipo de compacta…„o muito compat†vel com qualquer browser utilizado na web.Observe que para a visualiza…„o de uma anima…„o feita em Flash € necess‚rio que o usu‚rio tenha instalado em seu computador. imagens no formato bmp4. degrad‹. um tamanho reduzido em kbytes para n„o deixar a p‚gina pesada e consequentemente com um tempo muito grande de abertura da mesma. Graphics Interchange Format. Se aparecer um menu como o mostrado na figura 31 a seguir. em †cones. € porque ela foi criado utilizando-se o Flash. Voc‹ pode reconhecer se uma determinada anima…„o dentro de um web site foi desenvolvida com a tecnologia “shockwave”.

voce n„o acha? FIGURA 32 – COMPARATIVO DE TAMANHO ENTRE BMP E JPEG Para fazer esse tipo de convers„o de formatos voc‹ deve utilizar um software gr‚fico manipulador de imagens. profissional respons‚vel pela elabora…„o do layout de um projeto web site utiliza uma s€rie de programas para suporte nessa atividade. que comumente chamamos de ferramentas de desenvolvimento web. reproduzindo na tela todas as suas cores. • exatamente esse o nosso prƒximo assunto. eles apresentam uma infinidade de recursos para se alterar a estrutura original de uma foto. O grau de redu…„o pode ser ajustado. compare a diferen…a no tamanho do arquivo entre elas.Em contrapartida. A foto da direita foi transformada depois para o formato JPEG. JPEG quer dizer Joint Photographic Experts Group e € um m€todo comumente usado para comprimir imagens fotogr‚ficas. Para voce ter uma ideia do que estou dizendo vou estabelecer um comparativo de tamanho em kbytes de duas imagens iguais. A foto da esquerda foi desenvolvida originalmente em BMP. A diferen…a € impressionante. ela foi compactada. Veja na figura 32 a seguir. o formato jpeg trabalha com 16. Os programas mais utilizados para esse fim pela grande maioria dos designers s„o o Adobe Photoshop e o Fireworks. no entanto.8 milh•es de cores. 2 – T„CNICAS E FERRAMENTAS DO DESIGNER 2. ou seja. pois al€m desse tipo de pr‚tica. pois estas requerem uma qualidade de imagem bem maior. o que torna a apresenta…„o da imagem mais detalhada. o designer no processo de desenvolvimento web pode-se valer de uma s€rie de ferramentas de produtividade .1 – Considera…•es Iniciais Como j‚ mencionado anteriormente. o que permite a voc‹ escolher o tamanho da imagem e sua preserva…„o da qualidade. • um formato mais utilizado em fotografias. • poss†vel se obter uma boa taxa de compress„o com pouca perda na qualidade da imagem. O designer. Perceba que a qualidade visual € a mesma.

que incluem mapas visuais do site. Entre as principais novidades da vers„o CS3.2 – O Dreamweaver O Dreamweaver n„o € somente uma ferramenta visual de HTML. PHP. . Mas. o Dreamweaver. est‚ a nova aba SPRY. como j‚ mencionado. As linguagens de marca…„o de texto e de programa…„o estudadas na unidade anterior podem ser bem melhor utilizadas direcionadas a objetos. possibilitando a ele uma maior integra…„o com o software Fireworks. que € um framework para utiliza…„o de tecnologia AJAX6. FIGURA 33 – TELA INICIAL DO DREAMWEAVER 6 Acr•nimo em l†ngua inglesa de Asynchronous Javascript And XML. bem como camadas e comportamento de JavaScript. estudar um desses “interpretadores”.para realiza…„o de forma mais eficiente e eficaz de suas tarefas. Ele tamb€m inclui sua prƒpria ferramenta de anima…„o DHTML. ferramenta gr‚fica indispens‚vel para manipula…„o de imagens a serem inseridas na estrutura de um web site e que ser‚ estudada mais adiante. ele faz o que todos os melhores editores fazem: cria tabelas. Vamos a seguir. • o uso metodolƒgico de tecnologias como Javascript e XML. ou seja. Quando se inicia o Dreamweaver pela primeira vez. que permite criar documentos est‚ticos (HTML) e din”micos como Coldfusion. usando-se um software gr‚fico interpretador dos cƒdigos respectivos. edita quadros e alterna facilmente da visualiza…„o de p‚ginas para visualiza…„o HTML. Um cliente FTP repleto de recursos. O Dreamweaver suporta completamente as folhas de estilo em cascata (CSS). o Dreamweaver vai al€m dos outros editores para permitir criar anima…•es e p‚ginas din”micas (DHTML). ASP. voc‹ ver‚ uma janela principal. Gostaria de lhe ressaltar que n„o se tratar‚ de um curso completo do assunto e sim apenas algumas considera…•es e exemplos para que voc‹ tenha uma ideia do que pode ser feito com o programa e definir as formas poss†veis de desenvolvimento. A integra…„o com o Adobe Device Central possibilita voc‹ visualizar seu site em um telefone celular. A grande novidade € o fato dessa nova vers„o do Dreamweaver fazer parte agora da Adobe System. est‚ embutido dentro dele. 2. um dos mais utilizados programas do g‹nero em todo o mundo para desenvolvimento de websites. NET e arquivos CSS. ASP.

podemos definir os tipos de arquivos a serem criados. Na op…„o Extend. ao se criar uma p‚gina HTML. al€m de se utilizar um tipo espec†fico de layout. existe o link Dreamweaver Exchange. Ent„o. O padr„o € “XHTML 1. os documentos abertos recentemente ou a lista de arquivos existentes.1 – Criando documentos O Dreamweaver CS3 tem entre as suas propriedades a possibilidade de se criar sites dentro de padr•es da W3C (www3c. que € um padr„o que permite uma valida…„o correta para suas p‚ginas. mas voc‹ pode escolher outro tipo de documento. Ao clicar na op…„o “Create”.org) que € ƒrg„o que cuida das especifica…•es t€cnicas de desenvolvimentos de tecnologias aplicadas ’ web sites. o Dreamweaver vai cri‚-la no padr„o XHTML.2. que permite voc‹ acessar o setor do site da Adobe onde poder‚ ter acesso a extens•es dos programas Adobe. ele cria um novo documento HTML. 2. Na tela da direita ele apresenta alguns “templates”. Essa op…„o abre a possibilidade de se criar diversos tipos de documentos. FIGURA 34 – INICIANDO OS TRABALHOS .0 Transitional”.Nessa tela voc‹ tem na esquerda. Na tela central.

nessa categoria podemos definir o tipo de fonte da p‚gina. temos v‚rias categorias. . Ao clicar na op…„o “Modify”. se houver. em vez de somente a um objeto na p‚gina. “Page Properties”. As propriedades visuais incluem o t†tulo da p‚gina. temos: FIGURA 35 – PROPRIEDADES DA P•GINA . tamanho.As propriedades da p‚gina s„o elementos que se aplicam a uma p‚gina inteira.APAR–NCIA Na “janela” que se abre (figura acima). a primeira delas € a Appearance (Apar‹ncia). estilo (negrito e it‚lico). Outras propriedades de p‚gina incluem a codifica…„o de documento e as pastas de site. uma cor de fundo ou imagem e as cores do texto e do link.

FIGURA 36 – PROPRIEDADES DA P•GINA . podemos definir como ser„o apresentados os links.LINKS Na tela de “Links” acima. Visited Links (cor a ser mostrada em links j‚ visitados). imagem de fundo e as propriedades dessa imagem (se ele se repetir‚ ou n„o) e margens. A op…„o Underline Style serve para se definir como ser‚ aplicado o sublinhado em seus links. Active Links (cor do texto a ser mostrada quando clicado sobre o link).Cor de texto e cor de fundo.T—TULO DA P•GINA . Rollover links (que muda a cor do texto do link ao se passar o mouse sobre ele). FIGURA 37 – PROPRIEDADES DA P•GINA . Na guia links. No caso de imagens como a mesma ser‚ mostrada conforme o mouse passar pelo link. quando os mesmos forem textos. cƒdigo do link (forma como ele vai aparecer na p‚gina). podemos definir a fonte do mesmo tamanho. A terceira Categoria Headings € relativa ’ formata…„o dos t†tulos de sua p‚gina (o HTML permite a configura…„o e utiliza…„o de at€ 6 tipos de t†tulos).

FIGURA 38 – FORMAS DE VISUALIZAŽ•O DE P•GINAS . como o prƒprio nome diz € referente ao t†tulo da p‚gina (o mesmo que aparece na janela do navegador) e a codifica…„o do HTML a ser utilizada. Na forma “Design” que € a que mais se aproxima dos editores de textos comuns.2 – Visualiza…„o No Dreamweaver € poss†vel trabalhar com um documento em tr‹s formas de visualiza…„o. A Œltima guia € referente ’ imagem de rastreamento. ele retorna a p‚gina do Dreamweaver e voc‹ poder‚ observar que no topo da janela aparece como documento n„o salvo = . O arquivo por padr„o ser‚ salvo com a extens„o “.html). Observe que o arquivo agora € mostrado na direita junto dentro da aba “Files”. Se o arquivo a ser salvo for a primeira p‚gina de seu site ele deve ter o nome de index (index. E a forma “Split” que divide a tela em duas partes. bastando inserir conteŒdos no documento e digitar os textos. sendo que na de cima se visualiza a p‚gina atrav€s de cƒdigos e na parte de baixo em forma de design. pois € toda visual. 2. Para voc‹ salvar rapidamente um documento ao qual se est‚ trabalhando use as teclas de atalho CTRL+S.html”.A guia Title / Encoding. Ao se clicar em OK. O asterisco quer dizer que o arquivo n„o foi salvo e ele sempre ir‚ aparecer quando voc‹ modificar seu documento.2.

al€m de ser poss†vel tamb€m. para isso existe em sua estrutura de ferramentas a op…„o “Fireworks HTML”. Este conteŒdo gerado pode ser aproveitado no Dreamweaver. e o Dreamweaver tem essa propriedade. como relatƒrios cient†ficos. Outra grande facilidade € a integra…„o com o Adobe Fireworks que € um programa da Adobe Systems destinado principalmente ’ cria…„o de objetos gr‚ficos e layout para sites.Um bom designer deve saber o quanto € importante desenvolver um site que tenha um comportamento semelhante nos principais navegadores (Internet Explorer e Firefox).2. FIGURA 39 – INTEGRAŽ•O DREAMWEAVER E FIREWORKS 2... . banners para web etc.3 – Tabelas e C€lulas A funcionalidade da tabela foi adicionada a HTML para simplificar a apresenta…„o de dados tabulares. Ele oferece a op…„o de se verificar a lista de browsers dispon†veis e assim poder se definir qual deles ser‚ o navegador padr„o. Dentro dele € poss†vel gerar toda a interface de um site e criar o HTML sem programar uma linha. adicionar ou remover navegadores.

ou selecionar mais de uma c€lula. FIGURA 40 – INSERŽ•O DE TABELAS Pode-se definir o nŒmero de linhas e colunas desejadas. FIGURA 41 – BARRA DE PROPRIEDADES DAS C•LULAS As possibilidades de altera…„o das c€lulas s„o muitas. Podem-se mesclar duas ou mais c€lulas ou dividir uma c€lula em duas. Ao clicar em uma c€lula. Para inserir uma tabela basta clicar no bot„o “Insert Table” ou no bot„o de inser…„o de tabela na barra de propriedades.Atualmente a utiliza…„o das tabelas tem crescido e tomado o lugar dos “Frames” na distribui…„o de dados em um site. assim como dividir em colunas . Tamb€m € poss†vel definir a largura da tabela em pixels ou em porcentagem. a barra de propriedades muda para a formata…„o de texto e abaixo as propriedades referentes ’s c€lulas. Para criar uma tabela € muito importante que a mesma seja planejada e rascunhada antes para depois minimizar o trabalho. se a tabela ter‚ borda e qual ser‚ a sua espessura. ela est‚ dispon†vel na aba “Common” e “Layout”. o espa…amento entre as c€lulas e o espa…amento entre a c€lula e o seu conteŒdo (Cell padding e Cell Spacing).

width) e altura (H height). o designer pode construir inclusive as op…•es de conteŒdo do site que costumamos chamar de “menu”. Veja abaixo como uma tabela original pode ser transformada em uma outra pronta pra ser exibida em cen‚rio web. FIGURA 42 – TABELA ORIGINAL FIGURA 43 – TABELA TRANSFORMADA Podem-se utilizar tabelas e c€lulas para construir. as dimens•es podem ser aplicadas em pixels ou em porcentagem. o topo de um layout de um web site. Como podemos observar s„o muitos os recursos inerentes a manipula…„o de uma tabela e suas bordas. Temos uma op…„o chamada “No wrap” que tem como objetivo impedir que o conteŒdo quebre para a linha de baixo da c€lula ao alcan…ar a largura da c€lula. FIGURA 44 – TRANSFORMANDO TABELAS EM LAYOUTS . por exemplo. • poss†vel definir as dimens•es da c€lula largura (W .ou linhas. bem como imagem de fundo. A partir da barra de ferramentas de propriedades de tabelas. Podemos tamb€m acrescentar cor de fundo e de borda a nossa tabela. A op…„o “Header” permite atribuir ’ c€lula a propriedade de c€lula de cabe…alho (t†tulo). acrescenta um negrito e um peso maior ’ fonte.

O seu concorrente direto. fazer montagens de imagens. aplicar filtros para ficarem mais “leves”.Os recursos do Dreamweaver s„o inŒmeros e com certeza ajudar‚ e muito o seu usu‚rio a desenvolver um trabalho eficiente e de muita qualidade. Ao final desse “mini-curso” voc‹ poder‚ perceber o quanto € poderosa essa ferramenta gr‚fica e assim passar a sugerir que seja adotada pelo profissional de design. 2. o Adobe Photoshop € tamb€m considerado um ƒtimo programa do g‹nero e acredito serem esses dois softwares os mais utilizados no mundo do desenvolvimento web. e muito mais! Saiba que muitas vezes um web site pode possuir uma excelente defini…„o de estrutura de conteŒdo e perder na condi…„o de navegabilidade e visual em decorr‹ncia de sua estrutura gr‚fica n„o ter sido “trabalhada” adequadamente. a ideia n„o era oferecer um curso sobre esse programa e sim apenas alguns exemplos para possibilitar o conhecimento dessa alternativa oferecida por esse excelente software. Em fun…„o de acreditar ser de suma import”ncia a quest„o da manipula…„o com todas as imagens que ir„o ser publicadas € que trago a voc‹ uma breve demonstra…„o do que o Fireworks pode fazer em prol do tratamento de imagens para o ambiente web. A quest„o de se “trabalhar” imagens quer dizer que muitas vezes as imagens podem estar pesadas demais e torna-se necess‚rio diminuir seu tamanho.3 – O Fireworks O Fireworks € um excelente software de manipula…„o de imagens. . Mas. Como dissemos no in†cio dessa se…„o. voc‹ pode estar se perguntando: porque € necess‚rio um software dessa natureza? Muitas s„o as raz•es para essa utiliza…„o e talvez a principal delas seja pela necessidade de se trabalhar imagens antes de public‚-las no ambiente web. aplicar recursos para dar efeitos espec†ficos.

3.Painéis (lateral direito e parte inferior) FIGURA 46 – BARRA DE FERRAMENTAS Algumas ferramentas possuem sub-ferramentas de edi…„o. possuindo esse tri”ngulo.2. para identific‚las basta verificar se no canto inferior direto dela possui a imagem de um tri”ngulo preto voltado para baixo. .Barra de Ferramentas (lateral esquerda – palhetas).1 – Come…ando os trabalhos FIGURA 45 – •REA INICIAL DE TRABALHO .Menu (parte superior) .Área de Edição de imagens (‚rea central) . basta clicar com o mouse sobre a ferramenta e manter pressionado por alguns segundos para que se revelem as .

Blur (Emba…ar) reduz o foco das ‚reas selecionadas em uma imagem. Scale aumenta ou reduz um objeto. Skew inclina um objeto ao longo de um eixo especificado.3. basta cort‚-las. Rubber Stamp (Carimbo) copia ou clona uma ‚rea de uma imagem em outra. Lasso (La…o) seleciona uma ‚rea de pixels de forma livre em uma imagem. A tela € redimensionada para se ajustar a uma ‚rea definida. Oval Marquee (Moldura oval) seleciona uma ‚rea el†ptica de pixels em uma imagem. do jeito que se usa um l‚pis verdadeiro. de maneira restrita ou ’ m„o livre. Nƒs vamos aprender a funcionalidade de algumas dessas ferramentas. Crop (Cortar) elimina partes indesejadas de um documento. Magic Wand (Varinha m‚gica) seleciona uma ‚rea de pixels de cores semelhantes em uma imagem. . 2. Red-eye Removal (Remo…„o de olhos vermelhos) reduz o efeito de olhos vermelhos em fotografias Smudge (Mancha) absorve uma cor e a distribui na dire…„o em que € arrastada em uma imagem. Distort move os lados ou os cantos de um objeto na dire…„o em que uma al…a de sele…„o for arrastada enquanto a ferramenta estiver ativa. Ferramentas BITMAP Marquee (Moldura) seleciona uma ‚rea retangular de pixels em uma imagem.subcategorias. Subselection (Selecionar secund‚rio) seleciona um objeto individual dentro de um grupo ou os pontos de um objeto vetorial. A ferramenta Polygon Lasso (La…o pol†gono) seleciona uma ‚rea de pixels de forma livre com borda reta em uma imagem. Select Behind (Selecionar atr‚s) seleciona um objeto que est‚ atr‚s de outro. Brush (Pincel) para fazer pinceladas utilizando a cor da caixa Stroke Color (Cor do tra…o) Pencil (L‚pis) pode ser usada para desenhar linhas retas de 1 pixel.2 – Conhecendo melhor as ferramentas Ferramentas Select Pointer (Ponteiro) seleciona objetos quando o usu‚rio clica neles ou arrasta uma ‚rea de sele…„o ao redor dos objetos. Eraser (Borracha) € remover pixels. Replace Color (Substituir cor) substitui uma cor por outra diferente.

sendo uma de cada vez. Pen (Caneta) utilizada para desenhar vetores livremente com formas retas.Ferramentas VECTOR Line (Linha) permite usar linhas retas. arredondadas e continuas com imagens abertas e fechadas. 2. n„o cont†nua. Paint Bucket (Lata de Tinta) serve para colorir bitmaps e objetos vetoriais.. Define a cor da borda do objeto. setas. Vamos ver algumas das mais utilizadas pelos web designers. em vez de manipular os pontos. Bastando clicar sobre a ‚rea para capturar a cor. OBS: ferramenta muito utilizada pois com ela pode se desenhar qualquer objeto vetorial. FIGURA 47 – TRATANDO IMAGENS . com apenas um clique. Rectangle (Ret”ngulo) utilizada para desenhar formas retangulares e segurando a tecla “shift” € poss†vel fazer figuras exatas como quadrados e c†rculos (utilizando outra se…„o da ferramenta onde temos outras formas como estrelas. ou seja. Gradient (Gradiente) permite aplicar um efeito gradiente de uma forma mais r‚pida. Knife (Faca) permite fatiar um tra…ado em dois ou mais tra…ados. etc) Text (Texto) permite adicionar textos e edit‚-los depois de adicionados.3 – Tratando imagens O Fireworks possui v‚rias ferramentas para edi…„o e tratamento de imagens.3. Ferramentas COLORS Eyedropper (Conta-Gota) permite selecionar qualquer cor que esteja na ‚rea de edi…„o de imagens. Define a cor do preenchimento do objeto.. FreeForm (Forma livre) permite que o usu‚rio dobre e mude a forma de objetos vetoriais diretamente. c†rculos. depois € sƒ editar as cores desejadas.

Na se…„o “bitmap” as mais usadas s„o a . Outro recurso € o “Sharpen” que serve para amenizar o emba…ado de uma imagem. A utiliza…„o de filtros € personalizada e cada profissional deve fazer do modo que achar mais adequado. No entanto. mudar o nome do arquivo para o nome que se deseja e concluir o processo clicando em “export”. € poss†vel escolher o prƒprio modo e qualidade de exporta…„o. pois ela tende a ficar “emba…ada” quando fazemos isso. . Com a op…„o “Preview” selecionada € poss†vel visualizar o resultado no mesmo instante do tratamento.O brilho e o contraste s„o dois dos recursos mais usados para um tratamento r‚pido e pr‚tico de imagens. pois permitem trabalhar melhor com a ‚rea a qual queremos selecionar. . trabalhando diretamente com a claridade e rigidez das cores de uma imagem. Existem muitas ferramentas e para utiliz‚-las € preciso usar a barra de ferramentas para selecionar o recurso que se quer. Com isso a imagem normalmente € exportada para o formato que o Fireworks achar mais adequado para o arquivo editado. a selecionando apenas os pixels semelhantes. para formatos predefinidos. Deve-se escolher o lugar onde ser‚ salvo na aba “salvar em”. deve se ter a preocupa…„o de n„o se trabalhar com resultados que possam tornar desconfort‚vel a visualiza…„o. e . Existem muitos outros filtros que o designer pode explorar. no entanto. Esse recurso € importante tamb€m quando diminu†mos o tamanho de uma imagem. Sempre que for efetivada alguma manipula…„o em uma imagem conv€m salvar o resultado para utiliza…„o prƒxima ou futura. Essas ferramentas podem ser usadas adicionando umas as outras segurando a tecla “shift” e selecionando outras ‚reas simultaneamente. tentando deix‚-la menos tremida. Muito usada para melhorar imagens tremidas de m‚quinas digitais podendo ser aplicada quantas vezes forem necess‚rias. Para isso deve-se usar a op…„o “Export” (use o atalho do menu File >> Export). FIGURA 48 – APLICANDO BRILHO E CONTRASTE Uma ferramenta muito utilizada no tratamento da imagem € o “Convert to Alpha” que combinada com a transpar‹ncia da imagem pode converter a imagem basicamente em cor preta e transparente.

simbolizada pela letra “A” na palheta de ferramentas vetor. inverter.FIGURA 49 – SALVANDO UM TRABALHO Pode-se agrupar ou desagrupar imagens ou objetos utilizando a ferramenta “pointer” e selecionando um a um os objetos a serem agrupados clicando sobre a ‚rea deles. como agrupar e desagrupar. etc. “Modify > Arrange > Bring Forward” (uma camada a frente). Conclui-se o processo acessando o atalho de menu “Modify > Group” para agrupar e na op…„o “Modify > Ungroup” para desagrupar.4 – Aplicando texto Uma ferramenta indispens‚vel € a “texto”. “Modify > Arrange > Bring Backward” (uma camada atr‚s) e “Modify > Arrange > Bring to Back” (atr‚s de tudo). . ordenar. at€ que todos estejam selecionados. girar. Ela € utilizada para aplicar textos no documento do Fireworks. Um modo r‚pido e pr‚tico de trabalhar com essas ferramentas € habilitando a barra de atalho do menu “Modify” indo em “Window > Toolbars > Modify” nela aparecem as op…•es mais utilizadas do menu “Modify”. Apƒs inserir v‚rias imagens em um mesmo documento do Fireworks nem sempre elas ficam na ordem desejada. 2. Para isso bastar escolher a imagem com a ferramenta “pointer” e escolher umas das op…•es no menu “Modify > Arrange > Bring to Front” (a frente de tudo). unir.3. Nesse instante a solu…„o € ordenar as imagens colocando na frente a imagem que se deseja.

a Direita. Dist”ncia entre linhas (100). Justificado e Justificado Esticado. al€m de ser poss†vel organizar quem fica a frente ou por traz em rela…„o a v‚rios objetos. Centralizado. e as ferramentas de alinhamento Alinhar a Esquerda.O texto pode ser desde uma palavra ou frase at€ uma reda…„o dependendo da ‚rea Œtil (Canvas) dispon†vel. Tipo de borda (crisp anti-alias). Espa…o antes do par‚grafo (0). os objetos s„o divididos em camadas distintas.3. Na terceira linha temos Margem (0). Tamanho (10). e as op…•es padr•es de texto Negrito (B). Ordem do texto (Abcd) para colocar o texto em formato horizontal. FIGURA 51 – TRABALHANDO COM CAMADAS . Na segunda linha temos a Dist”ncia entre palavras (0). fazendo com que cada objeto possa ser editado separadamente sem se preocupar em alterar um documento erradamente em outra camada. Depois de aplicado o texto. vertical. 2. Espa…o depois do par‚grafo e o “Auto kern” que serve para ajustar automaticamente no formato padr„o do Fireworks. It‚lico (I) e Sublinhado (U). Borda (sem cor). Cor (branca). Finalmente na quarta linha temos Esticando Horizontalmente (100%). pois como o prƒprio nome diz.5 – Usando camadas As camadas no Fireworks s„o muito utilizadas para uma maior organiza…„o do documento. suas propriedades s„o exibidas da seguinte forma: FIGURA 50 – PROPRIEDADES DE TEXTO Na primeira linha temos a Fonte (verdana). etc.

. Para ocultar uma camada basta clicar na figura de um olho que se encontra ao lado de cada camada. oval. c†rculo.Cada camada depois de selecionada pode ser trabalhada com alguns recursos em sua prƒpria tela como a Transpar‹ncia (100%). Em seguida. para bloquear uma camada. e aplica-se o efeito de m‚scara no menu “Modify > Mask > Group as Mask”. selecionam-se os dois (imagem + objeto) segurando a tecla SHIFT. basta ativar a op…„o de bloqueio clicando na ‚rea ao lado da camada a direita do “olho” onde a imagem de uma cadeado ser‚ exibida bloqueando a camada para edi…•es. fazendo com que elas fiquem como uma esp€cie de textura do objeto. Basta abrir a imagem que ir‚ servir de “recheio” do objeto. Observe que o objeto sempre tem que estar ’ frente da imagem e em cor branca. sendo que essa transpar‹ncia pode apresentar v‚rias op…•es como linear a esquerda. impedindo-a de ser editada. No exemplo a seguir iremos aplicar a forma de uma estrela ’ imagem. e em seguida inserir o objeto no qual se dar‚ a forma da imagem (no caso uma estrela). um dos mais interessantes e utilizados para dar formas variadas as imagens do cen‚rio web € a “M‚scara” (Mask). Em termos de seguran…a as camadas podem ser ocultadas e bloqueadas. substituindo a op…„o “Normal” ao lado da transpar‹ncia. 2. Durante a sua navega…„o na web voc‹ j‚ deve ter percebido que algumas imagens apresentam um efeito “degrad‹”. FIGURA 52 – RECURSO DE M•SCARA Para usar esse efeito € muito f‚cil. O recurso de m‚scara € bastante utilizado para dar formas de objetos ’s imagens. Veja abaixo. linear a direta. certo? Muitas vezes € necess‚rio este tipo de efeito e com o Fireworks € poss†vel obt‹-lo! Aplicar um efeito de degrad‹ significa simular que uma imagem sai do seu ponto original a um ponto transparente. um exemplo de aplica…„o desse recurso.3. al€m de alguns efeitos pr€-fabricados do Fireworks.6 – Recursos gr‚ficos especiais Voltando aos recursos gr‚ficos. etc.

3. Para a mesma imagem utilizada no efeito anterior aplicamos a segunda op…„o: “Fade linear para a direita”. Feito isso a seguinte tela ser‚ exibida: FIGURA 53 – APLICANDO O EFEITO DEGRAD– Na tela exibida. O banner pode ter v‚rias resolu…•es.7 – Criando anima…•es Finalizaremos esse pequeno tutorial do Fireworks apresentando uma ferramenta muito interessante para que as imagens utilizadas em um ambiente web possam deixar o formato est‚tico para o formato din”mico. Um banner animado € um dos recursos mais utilizados para fazer propaganda de uma empresa. Vamos ver. basta escolher o tipo de “Fade” que se deseja para a imagem.Para aplicar esse efeito basta que seja selecionada a imagem com a ferramenta “pointer” e acessar o menu: “Commands > Criative > Fade Image”. por exemplo. O resultado seria: FIGURA 54 – IMAGEM COM O EFEITO DEGRAD– 2. . aplicar um recurso de anima…„o. ent„o. fazendo. um banner de anima…„o. servi…o ou produto em outro site com uma boa visita…„o. qual seja. como fazer um “full banner” animado de 2 fases. as mais usadas s„o 468x60 (full banner) e 234x60 (half banner) e seu tamanho em m€dia n„o pode ultrapassar 30kb.

5º Passo: na tela de “Frames and History”. basta acessar o menu: “Window > Frames”. 3º Passo: trabalha-se com o painel “Frames and History” para fazer a prƒxima fase do banner. Para habilitar o painel.1° Passo: abre-se um novo documento com uma resolu…„o de “full banner”. Em seguida basta alterar o tempo correspondente ao frame. 468x60. 4º Passo: agora no frame 2 mudaremos a frase do banner para “fase 2 banner”. foi escolhido o padr„o exibido na imagem do centro. Repete-se a mesma a…„o para o segundo frame tamb€m. . Para o nosso exemplo iremos utilizar a op…„o “Duplicate Frame”. “After current frame” (um abaixo) e “At the end” (abaixo de todos).5s j‚ que o valor € divido por 100. caso ele n„o esteja na ‚rea do Fireworks. 6º Passo: para dar uma pr€via ou at€ mesmo navegar nos frames pode-se usar as teclas de atalho que se encontram logo acima do painel inferior de propriedades. basta clicar na op…„o no canto superior direito da tela ’ esquerda. “At the beginning” (acima de todos). O ideal € calcular um tempo imagin‚rio de leitura e visualiza…„o do banner. Apƒs escolher essa op…„o ir‚ aparecer a tela central acima mostrada. 2° Passo: fazer a arte da primeira fase do banner. Aplicase “ok” e o outro frame ser‚ ent„o criado. Em “Insert new frames” deve-se escolher o posicionamento do frame conforme o primeiro selecionado. se aplica o tempo de cada frame clicando duas vezes com o mouse sobre o nŒmero “7”. Ir„o aparecer op…•es correspondentes ao frame. no nosso caso faremos com o valor de 250 que representa 2. No caso do banner em edi…„o. FIGURA 55 – PASSO A PASSO DA ANIMAŽ•O Para inserir um novo frame no intuito de se estabelecer a segunda fase do banner. O painel abaixo ser‚ exibido. “Before current” (frame acima). No caso do exemplo para aprendizado sƒ escreveremos a frase “fase 1 banner” na ‚rea de edi…„o do documento. onde se escolhe quantas cƒpias far‚ na op…„o “number”.

7º Passo: finalmente. da se…„o anterior. . volto um curso sobre essa inŒmeros recursos e Fireworks trabalha e de o desenvolvimento de Para o completo aprendizado dessa ferramenta gr‚fica € necess‚rio um curso exclusivo que pode ter a dura…„o entre 2 a 3 meses e ele € direcionado ’queles que querem trabalhar como designer de ambiente web. Clica-se em “Export” e dar-se um nome para o arquivo. deve-se exportar/salvar o “gif animado” e para isso acessa-se a op…„o do menu: “File > Export Preview” e altera-se a op…„o “Format” para “Animated Gif”. O banner animado est‚ criado! Da mesma forma como me reportei a voc‹ no final a dizer-lhe que n„o t†nhamos a inten…„o de oferecer ferramenta e sim apenas alguns exemplos de seus ferramentas para que voc‹ possa ter uma ideia de como o como ele pode ser muito Œtil para o designer durante solu…•es para a web.

tratando temas como “layout”. (XHTML 1. condi…•es de navegabilidade.0 Transitional). O conhecimento das principais alternativas que o mercado oferece para esse fim € de suma import”ncia para que o tecnƒlogo possa estar. • importante que o tecnƒlogo tenha conhecimento de como deve ser o tratamento gerencial de uma equipe e das atividades nela contextualizadas.submarino.PARA SABER MAIS Consulte http://pt. quais sejam o Dreamweaver e o Fireworks. encontram-se orienta…•es para a defini…„o da estrutura de um Site. . A coordena…„o de um projeto web segue a mesma linha de racioc†nio utilizada pelos gerentes de projetos.wikipedia. A seguir. de forma adequada. Al€m do livro sugerido na unidade II sobre a nova tecnologia AJAX. a frente do desenvolvimento de um sistema remoto. RESUMO DA UNIDADE Esta unidade inicialmente aborda uma importante condi…„o dentro do desenvolvimento web que € a do planejamento e organiza…„o de um projeto dessa natureza. sugiro que voc‹ busque obras ou artigos que tratem sobre gerenciamento de projetos. arquitetura de conteŒdo e explora…„o de propaganda e publicidade. SUGESTÕES DE LEITURA Para a condi…„o de coordena…„o de um projeto web. A unidade e o fasc†culo s„o finalizados com a demonstra…„o de alguns recursos de duas excelentes ferramentas de desenvolvimento web. Essa estrat€gia dever‚ envolver um conjunto de a…•es e a indica…„o das ferramentas de produtividade para aquele desenvolvimento. com certeza far„o parte desse contexto.com.br/produto/1/21593643/use+a+cabeca!+ajax+profissional ?menuId=1329 REFLEXÕES SOBRE A APRENDIZAGEM O tecnƒlogo dever‚ ter uma s€rie de responsabilidades na execu…„o de suas atividades e uma delas dever‚ ser a de definir a estrat€gia mais adequada ao desenvolvimento de um Projeto Web. consulte tamb€m um importante guia pr‚tico sobre o assunto: “Use a Cabe…a! Ajax Profissional” de Rebecca Riordan dispon†vel para venda no endere…o: http://www.org/wiki/XHTML para saber mais sobre o formato padr„o de HTML gerado pelo Dreamweaver. Esse conhecimento complementar lhe dar‚ compet‹ncias e habilidades para melhor coordenar as tarefas inerentes ao desenvolvimento de um sistema qualquer. • indispens‚vel a observa…„o dessa condi…„o para que o Site tenha longevidade e sucesso.