Fund Webd Form Img PDF

rede
e-Tec
Brasil
Fundamentos de Web Design

e Formatao de Imagem
Carlos Fbio Rocha Marinho
Curso Tcnico em Manuteno e

Suporte em Informtica
Viso geral do painel Ferramentas

A A Ferramentas de seleo E Ferramentas de pintura
Mover Pincel (B)
Letreiro retangular (M) Lpis (B)
A Letreiro elptico (M) Substituio de cor (B)
Letreiro de coluna nica Pincel Misturador (B)
Letreiro de linha nica Pincel do Histrico (Y)
Lao (L) Pincel HIstria da Arte (Y)
B Lao poligonal (L) Gradiente (G)
C Lao magntico (L) Lata de tinta (G)
Seleo rpida (W)
Varinha mgica (W) F Ferramentas Desenho e Tipo
B Ferramentas Corte e Fatia Caneta (P)

Caneta de forma livre (P)
E Corte demarcado (C) Adicionar Ponto de Ancoragem
Fatia (C)
D Seleo de Fatia (C)
Converter Ponto
Texto horizontal (T)
C C Ferramentas de medio Texto vertical (T)
Mscara de texto horizontal (T)
Conta-gotas (I)
Mscara de texto vertical (T)
Classificador de cores (I)
Seleo de demarcador (A)
Rgua (I)
Seleo direta (A)
Observao (I)
Contagem (I) Retngulo (U)
Retngulo arredondado (U)
F D D Ferramentas de retoque
Elipse (U)
Pincel de recuperao para Polgono (U)
manchas (J) Linha (U)
Pincel de recuperao (J) Forma personalizada (U)
Correo (J)
G Olhos vermelhos (J) G Ferramentas de navegao
e 3D
Carimbo (S)
Girar objeto 3D (K)
Carimbo de padro (S)
Rolar objeto 3D (K)
Borracha (E) Deslocar objeto 3D (K)
Borracha de plano de fundo (E) Deslizar objeto 3D (K)
Borracha mgica (E) Escalar objeto 3D (K)
Desfoque Girar cmera 3D (N)

Nitidez Rolar cmera 3D (N)
Borrar Deslocar cmera 3D (N)
Subexposio (O) Mover cmera 3D (N)
Superexposio (O) Aplicar zoom na cmera 3D (N)
Esponja (O) Mo (H)
Girar visualizao (R)
Zoom (Z)
rede
e-Tec
Brasil
Indica a ferramenta padro *Os atalhos do teclado aparecem entre parnteses Somente Extended
rede
e-Tec
Brasil
Fundamentos de Web
Design e Formatao
de Imagem
Manaus - AM
2012
Presidncia da Repblica Federativa do Brasil
Ministrio da Educao
Secretaria de Educao a Distncia
Centro de Educao Tecnolgica do Amazonas

Este Caderno foi elaborado em parceria entre o Centro de Educao Tecnolgica
do Amazonas e a Universidade Federal de Santa Catarina para a Rede e-Tec Brasil.
Equipe de Elaborao
Centro de Educao Tecnolgica do Amazonas Coordenao de Design Grfico
CETAM Andr Rodrigues/UFSC
Coordenao Institucional Design Instrucional

Adriana Lisboa Rosa/CETAM Juliana Leonardi/UFSC
Laura Vicua Velasquez/CETAM
Web Master
Coordenao do Curso Rafaela Lunardi Comarella/UFSC
Helder Cmara Viana/CETAM
Web Design
Professor-autor Beatriz Wilges/UFSC
Carlos Fbio Rocha Marinho/CETAM Mnica Nassar Machuca/UFSC
Comisso de Acompanhamento e Validao Diagramao

Universidade Federal de Santa Catarina UFSC Brbara Zardo/UFSC
Juliana Tonietto/UFSC
Coordenao Institucional Marlia C. Hermoso/UFSC
Araci Hack Catapan/UFSC Nathalia Takeuchi/UFSC
Coordenao do Projeto Reviso

Silvia Modesto Nassar/UFSC Jlio Csar Ramos/UFSC
Coordenao de Design Instrucional Projeto Grfico

Beatriz Helena Dal Molin/UNIOESTE e UFSC e-Tec/MEC
Catalogao na fonte elaborada pela DECTI da Biblioteca

Central da Universidade Federal de Santa Catarina
M338f Marinho, Carlos Fbio Rocha

Fundamentos de Web Design e formatao de imagem /
Carlos Fbio Rocha Marinho. Manaus : CETAM, 2012.
62 p. : il. tabs.
Inclui bibliografia
ISBN: 978-85-63576-38-5
1.Sites da Web Projetos. 2. Computao grfica.
3. Animao por computador. I. Ttulo.
CDU: 681.31:62(084)
681.31.066.1
Apresentao e-Tec Brasil
Prezado estudante,
Bem-vindo ao e-Tec Brasil!
Voc faz parte de uma rede nacional pblica de ensino, a Escola Tcnica
Aberta do Brasil, instituda pelo Decreto n 6.301, de 12 de dezembro 2007,
com o objetivo de democratizar o acesso ao ensino tcnico pblico, na mo-
dalidade a distncia. O programa resultado de uma parceria entre o Minis-
trio da Educao, por meio das Secretarias de Educao a Distancia (SEED)
e de Educao Profissional e Tecnolgica (SETEC), as universidades e escolas
tcnicas estaduais e federais.
A educao a distncia no nosso pas, de dimenses continentais e grande

diversidade regional e cultural, longe de distanciar, aproxima as pessoas ao
garantir acesso educao de qualidade, e promover o fortalecimento da
formao de jovens moradores de regies distantes, geograficamente ou
economicamente, dos grandes centros.
O e-Tec Brasil leva os cursos tcnicos a locais distantes das instituies de en-
sino e para a periferia das grandes cidades, incentivando os jovens a concluir
o ensino mdio. Os cursos so ofertados pelas instituies pblicas de ensino
e o atendimento ao estudante realizado em escolas-polo integrantes das
redes pblicas municipais e estaduais.
O Ministrio da Educao, as instituies pblicas de ensino tcnico, seus

servidores tcnicos e professores acreditam que uma educao profissional
qualificada integradora do ensino mdio e educao tcnica, capaz de
promover o cidado com capacidades para produzir, mas tambm com auto-
nomia diante das diferentes dimenses da realidade: cultural, social, familiar,
esportiva, poltica e tica.
Ns acreditamos em voc!
Desejamos sucesso na sua formao profissional!
Ministrio da Educao
Janeiro de 2010
Nosso contato
etecbrasil@mec.gov.br
3 e-Tec Brasil
Indicao de cones
Os cones so elementos grficos utilizados para ampliar as formas de

linguagem e facilitar a organizao e a leitura hipertextual.
Ateno: indica pontos de maior relevncia no texto.
Saiba mais: oferece novas informaes que enriquecem o

assunto ou curiosidades e notcias recentes relacionadas ao
tema estudado.
Glossrio: indica a definio de um termo, palavra ou expresso

utilizada no texto.
Mdias integradas: sempre que se desejar que os estudantes

desenvolvam atividades empregando diferentes mdias: vdeos,
filmes, jornais, ambiente AVEA e outras.
Atividades de aprendizagem: apresenta atividades em

diferentes nveis de aprendizagem para que o estudante possa
realiz-las e conferir o seu domnio do tema estudado.
5 e-Tec Brasil
Sumrio
Palavra do professor-autor 9
Apresentao da disciplina 11
Projeto instrucional 13
Aula 1 Internet e web design 15

1.1 A internet 15
1.2 O que e para que serve um website 16
1.3 Servio de web design 18
1.4 Orientaes para fazer um site 19
1.5 Briefing para desenvolvimento de websites 21
1.6 O que arquitetura de informao em websites? 24
1.7 Diviso e alocao de contedo 24
Aula 2 Edio e publicao de sites 27

2.1 Um esqueleto chamado HTML 27
2.2 Entendendo o que CSS 28
2.3 Editores de HTML 32
2.4 Gerando uma pequena pgina HTML 34
2.5 Publicar uma pgina na web 35
2.6 Protocolo de FTP 36
2.7 Cliente de FTP 37
Aula 3 A imagem 41
3.1 Fotografia digital 41
3.2 Gerao da imagem digital 41
3.3 Tipos de compactao 46
7 e-Tec Brasil
Aula 4 Edio e tratamento de imagens 49
4.1 Editor de imagens 49
4.2 Como instalar o Adobe Photoshop 50
4.3 rea de trabalho do Photoshop 53
4.4 Caixa de ferramentas 55
4.5 Ferramentas de seleo 56
4.6 Ferramentas medidas, comentrios e transformao 56
4.7 Ferramentas de pintura 57
4.8 Ferramentas de texto e desenho 57
4.9 Ferramentas de correes e retoques 58
4.10 Trabalhando com camadas 58
4.11 Estilos efeitos de camada 59
4.12 Filtros 59
Referncias 60
Currculo do professor-autor 62
e-Tec Brasil 8
Palavra do professor-autor
Caro aluno!
O objetivo deste caderno apresentar conceitos bsicos e auxili-lo da melhor

maneira a compreender: o que web design, para que servem, quais so os
recursos necessrios e algumas tcnicas para confeccionar websites. Aprender
propriedades, caractersticas e recursos de manipulao de imagens digitais
para publicao na web. Por meio deste estudo, voc poder absorver e au-
mentar seu conhecimento atravs de pesquisas, leitura, prticas e discusses.
No desenvolvimento desta disciplina, sero propostas vrias atividades rela-

cionadas ao contedo de cada aula estudada. Busque participar ativamente e
sempre envie suas dvidas ao tutor. As atividades sero realizadas tanto neste
caderno impresso como no Ambiente Virtual de Ensino-aprendizagem (AVEA).
Essas atividades sero de grande importncia na construo dos conceitos

que sero apresentados para que voc possa ser capaz de constru-los jun-
tando a teoria com a prtica. Minha participao ser de orient-lo, apoi-lo
e acompanh-lo em seu processo de aprendizagem, orientando-o em suas
necessidades e dvidas.
Bom estudo e muito sucesso!

Professor Carlos Fbio Rocha Marinho
9 e-Tec Brasil
Apresentao da disciplina
O advento da internet trouxe-nos a realidade de novas profisses, nunca

antes imaginadas. O web design uma das reas que mais tem se desenvol-
vido atualmente entre as reas profissionais da web, pois atravs dela que
so construdas as pginas que divertem, ensinam, informam, denunciam,
vendem, enfim, compem e promovem a dinmica da internet.
Dominar os conceitos apresentados neste curso oferecer ao aluno possibilida-

des de manipular recursos que lhe permitiro utilizar a internet como meio de
comunicao e ampliar sua capacidade tcnica, dentro se sua rea de atuao.
O conhecimento sobre imagens permitir ao aluno entender as possibilida-

des do que se pode realizar, com base em conceitos que usurios comuns
no possuem, capacitando-o manipulao adequada dessas imagens para
fins especficos de utilizao para web.
Portanto, esta disciplina tem como objetivo principal introduzir o aluno aos
conceitos bsicos de web design e formatao de imagens estudando algu-
mas das suas principais funcionalidades.
11 e-Tec Brasil
Projeto instrucional
Disciplina: Fundamentos de Web Design e Formatao de Imagens (carga

horria: 60 h).
Ementa: Breve histrico sobre a origem da internet, apresentar e definir tipos

de websites, conhecer o mtodo de entrevista para definio de contedo
e tipo de website. Arquitetura da informao para alocao de contedo e
otimizao da navegao. Apresentao do cdigo HTML, conhecimento do
ambiente de um editor HTML, entender a formatao com CSS, apresentar o
processo de publicao de uma pgina web. Conhecer processo de transfe-
rncia de arquivos e apresentar o ambiente de um cliente de FTP. Conceitos
sobre imagem e fotografia digital, resoluo, profundidade de bits, tipos de
imagem e modos de compactao de arquivos. Instalao e apresentao do
ambiente de um editor de imagens, ferramentas de seleo, medidas, comen-
trios, transformao, pintura, texto, desenho, correo e retoques. Apresen-
tar o recurso de camadas e de efeitos de camadas. Apresentao dos filtros
predefinidos para alterao imediata de imagens.
CARGA
OBJETIVOS DE
AULA MATERIAIS HORRIA
APRENDIZAGEM
(horas)
Hiperdocumento apresentando
uma breve histria da internet e
o protocolo TCP/IP.
Aprender conceitos bsicos sobre inter-
net website e web design. Vdeo apresentando a profisso
1.Internet e web
web design e a arquitetura da 10
design.
Aprender os elementos que compem informao.
um projeto de web design.
Apresentao de hiperligaes
para outros sites na internet
sobre o tema.
Conhecer conceitos bsicos sobre as
as linguagens HTML e CSS;
linguagens de marcao e formatao de
2. Edio e publica- pginas web.
Vdeos apresentando editores 20
o de sites.
HTML, tutoriais de instalao e
Aprender o processo de publicao de
conceitos sobre domnio hospe-
pginas web.
dagem e acesso via FTP.
13 e-Tec Brasil
CARGA
OBJETIVOS DE
AULA MATERIAIS HORRIA
APRENDIZAGEM
(horas)
Aprender conceitos sobre imagem digital
e suas caractersticas.
Vdeos apresentando conceitos
3.A imagem. 10
sobre fotografia digital.
Conhecer os formatos existentes de
armazenamento de imagens digitais.
o painel de ferramentas de um
Compreender as principais funcionalida- editor de imagens.
4. Edio e trata- des e opes de edio e tratamento de
20
mento de imagens. imagens de um aplicativo de edio de Vdeos apresentando as ferra-
imagens. mentas seleo e retoque e os
recursos de camadas e filtros de
um editor de imagens.
e-Tec Brasil 14 Fundamentos de Web Design e Formatao de Imagem

Aula 1 Internet e web design
Objetivos
Aprender conceitos bsicos sobre internet website e web design.
Aprender os elementos que compem um projeto de web design.
1.1 A internet
Segundo a Wikipdia (HISTRIA..., 2011), a internet um conglomerado
de redes em escala mundial de milhes de computadores interligados pelo
TCP/IP que permite o acesso a informaes e todo tipo de transferncia de
dados. Ela carrega uma ampla variedade de recursos e servios, incluindo os
documentos interligados por meio de hiperligaes da World Wide Web, e a
infraestrutura para suportar correio eletrnico e servios como comunicao
instantnea e compartilhamento de arquivos.
1.1.1 Breve histria da internet

A internet surgiu a partir de pesquisas militares nos perodos ureos da Guerra
Fria. Na dcada de 1960, quando dois blocos ideolgicos e politicamente an-
tagnicos exerciam enorme controle e influncia no mundo, qualquer meca-
nismo, qualquer inovao, qualquer ferramenta nova poderia contribuir nessa
disputa liderada pela Unio Sovitica e pelos Estados Unidos. Nesse cenrio, o
governo dos Estados Unidos temia um ataque russo s bases militares.
Um sistema tcnico denominado Protocolo de Internet (Internet Protocol)

permitia que o trfego de informaes fosse encaminhado de uma rede para
outra. Todas as redes conectadas pelo endereo IP na internet comunicam-
se para que todas possam trocar mensagens. Atravs da National Science
Foundation, o governo norte-americano investiu na criao de backbones
(que significa espinha dorsal, em portugus), que so poderosos
computadores conectados por linhas que tm a capacidade de dar vazo a
grandes fluxos de dados, como canais de fibra ptica, elos de satlite e elos
de transmisso por rdio. Alm desses backbones, existem os criados por
empresas particulares. A elas so conectadas redes menores, de forma mais
Aula 1 Internet e web design 15 e-Tec Brasil

ou menos anrquica. basicamente isto que consiste a internet, que no
tem um dono especfico, ou seja, de domnio pblico. Em 1992 Cientista
Tim Berners-Lee, do CERN, criou o termo World Wide Web para definir a
rede mundial de computadores.
Aprenda um pouco mais sobre 1.1.2 A internet no Brasil

a histria da internet. Acesse
o vdeo didtico disponvel no No Brasil, os primeiros embries de rede surgiram em 1988 e ligavam univer-
endereo: http://www.youtube. sidades do Brasil a instituies nos Estados Unidos. No mesmo ano, o IBASE
com/watch?v=yyY_392Tn7Q
comeou a testar o ALTERNEX, o primeiro servio brasileiro de internet no
O protocolo TCP/IP o acadmica e no governamental. Inicialmente o ALTERNEX era restrito aos
responsvel pela troca
de informaes entre os membros do IBASE e associados. Somente em 1992 foi aberto ao pblico.
computadores que se interligam
atravs da internet. Para
entender o funcionamento
desse sistema de comunicao,
1.2 O que e para que serve um website
acesse o endereo: http://www. Voc conhece como site, mas ele tem outros nomes: stio, website e site
clubedohardware.com.br/ eletrnico. um conjunto formado por vrias pginas da web ou hipertex-
artigos/1351
tos, que so reunidos em um endereo da web chamado de domnio e que
acessado pelo protocolo HTTP (Hypertext Transfer Protocol) que permite a
utilizao de links para ligar-se a outras pginas existentes e relacionadas ao
mesmo assunto ou que contenham definio ou esclarecimento necessrio
para entendimento do assunto de origem.
O conjunto de todos os sites existentes compe a World Wide Web. Uma

pgina da internet ou webpage acessada atravs de uma URL (localizador
universal). No pode haver outro igual porque assim teremos dois contedos
com o mesmo endereo na web. como se fosse um mesmo nmero de
telefone sendo de propriedade de duas pessoas diferentes.
Segundo Wikipdia (HISTRIA..., 2011) quando a World Wide Web foi cria-
da, ela recebeu esse nome de seu criador Tim Berners-Lee. Ele comparou a
sua criao com uma teia, web, em ingls. Cada n dessa teia um local
(virtual) onde h hipertextos. Como a palavra inglesa para local site (tam-
bm derivada do latim situs: lugar, local), quando as pessoas queriam se
referir a um local da teia, elas falavam, website. Assim um novo nome surgiu
para designar esse novo conceito de n onde h um conjunto de hipertex-
tos: website.
Batizada dessa forma, a web e seus websites tornaram-se mundialmente

famosos e seus nomes empregados em diversas lnguas. Em ingls foi neces-
srio usar o qualificativo web antes de site, para diferenciar de outros usos
que a palavra site tem nessa lngua, em que significa local. Mas quando o

contexto deixava claro que se estava falando da web, dizia-se apenas: site. J
na lngua portuguesa, esse qualificativo no necessrio em momento algum,
pois a palavra site um anglicismo novo em nosso vocabulrio e tem o nico e
mesmo significado de website, embora a grafia induza a erro, pois pronuncia-
-se: saite. Os sites da internet, em geral, podem ter os seguintes propsitos:
a) Institucional muitas empresas usam seus sites como ponto de con-

tato entre uma instituio e seus clientes, fornecedores, etc. No caso de
instituies comerciais, usam-se sites tambm para comrcio eletrnico,
recrutamento de funcionrios etc. Instituies sem fins lucrativos tam-
bm usam seus sites para divulgar seus trabalhos, informar a respeito
de eventos etc. H tambm o caso dos sites mantidos por profissionais
liberais, para publicarem seus trabalhos.
b) Informaes veculos de comunicao como jornais, revistas e agn-

cias de notcias utilizam a internet para veicular notcias, por meio de
seus sites. Jornalistas freelancer e indivduos comuns tambm publicam
informaes na internet, por meio de blogs e podcasts.
c) Aplicaes existem sites cujo contedo consiste de ferramentas de au-

tomatizao, produtividade e compartilhamento, substituindo aplicaes
de desktop. Podem ser processadores de texto, planilhas eletrnicas, edi-
tores de imagem, softwares de correio eletrnico, agendas, etc.
d) Armazenagem de informaes alguns sites funcionam como bancos

de dados, que catalogam registros e permitem efetuar buscas, podendo
incluir udio, vdeo, imagens, softwares, mercadorias, ou mesmo outros
sites. Alguns exemplos so os sites de busca, os catlogos na internet e
os Wikis, que aceitam tanto leitura quanto escrita.
e) Comunitrio so os sites que servem para a comunicao de usurios

com outros usurios da rede. Nesta categoria se encontram os chats,
fruns e sites de relacionamento.
f) Portais so chamados de portais os sites que congregam contedos

de diversos tipos entre os demais tipos, geralmente fornecidos por uma
mesma empresa. Recebem esse nome por congregarem a grande maio-
ria dos servios da internet num mesmo local.

1.2.1 Tipos de website
Os sites podem ser classificados em estticos, dinmicos ou mistos, confor-
me sua estrutura.
1. Sites estticos so formados por pginas com contedos que sofrem

pouca ou nenhuma alterao em um longo perodo de tempo: trs me-
ses, seis meses, um ano ou at mais. So utilizados normalmente por
empresas que querem apresentar seus produtos ou servios na web, mas
no tm necessidade de alterao desses produtos ou servios, pois estes
no sofrem mudanas periodicamente, ou seja, mantm-se estveis por
muito tempo.
2. Sites dinmicos este tipo de site normalmente utiliza-se de uma lin-

guagem de programao, alm do HTML puro, para inserir, alterar e ex-
cluir contedo das pginas que o compem, pois seu contedo sofre
alteraes peridicas, variando de intensidade, de acordo com o objetivo
para o qual foi criado. Exemplos: portais de notcias, comrcio eletrnico,
vendas on-line, entre outros.
3. Sites mistos existem casos em que se necessita das duas modalidades

de sites descritos anteriormente, pois parte do contedo no sofre alterao
e outra sofre alteraes peridicas constantemente. Neste caso teremos um
site misto, composto por uma parte esttica e outra parte dinmica.
1.3 Servio de web design

O web design pode ser visto como uma extenso da prtica do design, em
que o foco do projeto a criao de websites e documentos disponveis no
ambiente da web. Essa atividade profissional tende multidisciplinaridade,
uma vez que a construo de pginas web requer subsdios de diversas reas
tcnicas, alm do design propriamente dito. reas profissionais como a arqui-
tetura da informao, programao, usabilidade, acessibilidade, entre outros.
Apesar de os sites estticos com contedo simples poderem ser feitos por
apenas uma pessoa, o desenvolvimento de pginas da web no to simples
como parece. Se analisarmos esse caso isoladamente, o desenvolvedor desse
simples website ter que ter conhecimento de diversos programas, como:
Corel Draw, Adobe Illustrator, Photoshop, Macromedia Flash, Macromedia
Fireworks, Macromedia Dream Weaver; ter que ter ainda conhecimento da
Linguagem de marcao HTML, da linguagem de formatao CSS e conhe-
cimentos sobre alguma linguagem de programao, como por exemplo PHP.
E para isso ter que ter estudado lgica de programao.

Se considerarmos que a internet um meio de comunicao, a coisa com-
plica um pouco mais, porque teremos que considerar quem visitar, como
essas pessoas sero atradas para visitar o site e qual o contedo ideal para
exibio no site que est sendo desenvolvido.
A captao de servio tambm outro assunto importante sobre o qual ain-

da no falamos. E para essa atividade seria necessrio que o desenvolvedor
tivesse tambm um perfil para a rea de vendas, para entrevistar o cliente e
traduzir essas informaes em um layout funcional, leve e agradvel.
Administrar todas essas informaes e ainda desenvolver o site propriamen-

te dito torna a atividade de desenvolvimento de website muito trabalhosa
e multidisciplinar para ser realizada por uma pessoa somente. Atualmente
existem muitas empresas atuando no ramo de web design, pois esta uma
rea promissora e que, se bem aproveitada, gera resultados fabulosos. Para
formar uma equipe de desenvolvimento de web design, precisaramos de
profissionais para desenvolver as seguintes reas:
1. Publicidade
2. Direo de arte
3. Designer para criao
4. Designer para animao e multimdia
5. Redao e reviso
6. Programao
7. Marketing digital
8. Atendimento Freelance
9. Prospeco e vendas trabalho avulso realizado
por profissional autnomo,
geralmente para empresa
jornalstica, agncia de
Algumas empresas que no possuem todos esses profissionais em seu quadro publicidade, editora, entre
funcional optam por contratar freelancers para suprir essa necessidade tem- outros; Freelancer o
profissional que realiza freelance.
porria, dependendo do tamanho e do valor de cada projeto de websdesign.
1.4 Orientaes para fazer um site

No momento da construo de um website importante considerar alguns
Assista ao vdeo sobre a
pontos fundamentais na estruturao do layout para apresentao dos ele- profisso de web design
mentos de comunicao que tero a funo de despertar no visitante o acessando o endereo:
http://www.youtube.com/
interesse de navegar pelas pginas internas e manter-se no site. watch?v=h_t_O3Kma7A

a) Seja simples manter a simplicidade no significa ter um site feio, sig-
nifica reduzir ao mximo a quantidade de informaes visuais desneces-
srias, para que o site seja fcil de usar e prenda o interesse do visitante.
b) Uma imagem vale mais do que mil palavras essa frase tambm
verdadeira para a criao de um site. Sempre que possvel, use imagens,
pois ningum quer investir muito tempo para ler textos interminveis.
c) Evite informao em excesso pginas com muita informao preju-

dicam a visualizao, pois tendem a sobrecarregar e confundir o leitor.
Isso tambm verdadeiro para imagens. Muitas imagens fazem os olhos
dos visitantes perderem o foco. Faa sempre o teste de funcionalidade:
olhe para a sua pgina e veja se consegue, de forma rpida, obter a in-
formao que precisa.
d) Em construo? Jamais! nunca coloque links no seu site que levem

o visitante a pginas que ainda no foram feitas e que esto em constru-
o. Nada pior do que frustrar o visitante vido por informaes.
e) Mantenha o seu site atualizado modifique periodicamente o con-

tedo do site, para que as pessoas voltem a visit-lo. Um site que no
atualizado deixar de ser visitado por no ter o que apresentar de novo.
f) Utilize um boletim de notcias crie uma lista na qual os visitantes

possam subscrever e receber boletins de notcias do seu site. Nada me-
lhor do que manter o contato com aqueles que tm interesse no seu
produto ou servio.
g) No utilize bonequinhos rebolando, bolinhas saltando, cones

voando pela pgina nunca use esse tipo de recurso para decorar o
seu site. Websites com esses efeitos passam uma imagem de amadorismo
e o visitante no ter confiana em realizar operaes comerciais ou
contratar servios.
h) Evite Java e Flash no os utilize como elementos principais de um site.

Se o site depender desses elementos no conseguir ser classificado, de
forma adequada, nos motores de busca e isso poder levar o utilizador
a desistir de entrar, pois so elementos que podem causar o bloqueio de
computadores ou a lentido excessiva no carregamento da pgina.

i) Seu site deve carregar rpido pesquisas mostram que se um site no
apresentar alguma informao para prender a ateno do visitante num
perodo de 15 a 30 segundos, o visitante cancela o carregamento e vai
para outro endereo. Por isso importante que o seu site carregue o mais
rpido possvel.
j) Facilite a comunicao lembre-se sempre de que a funo principal

de todo o material que um designer cria, seja para a web ou no, co-
municar. Para haver comunicao, trs coisas principais precisam ocorrer:
1) todas as letras precisam ser lidas e compreendidas; 2) os textos preci-
sam ser claros e objetivos; 3) os desenhos (imagens, cones, ilustraes e
grafismos) precisam ser vistos claramente e os seus propsitos percebi-
dos. Se esse mnimo no for atingido, a comunicao falhou.
1.5 Briefing para desenvolvimento

de websites
Segundo o Moreira (1996) em seu Dicionrio de Termos de Marketing,
briefing um resumo de uma discusso; so os pontos a discutir. Geralmente,
aquilo que o cliente transmite, como expresso do trabalho que necessita,
ao contato ou, diretamente, a um grupo da agncia. 2. Passagem de
informaes e de instrues de modo ordenado, fornecida para o correto
desenvolvimento de uma entrevista. De maneira geral, o briefing um
documento que o profissional de marketing transmite a quem vai realizar
uma campanha publicitria promocional ou institucional, de relaes pblicas
ou uma pesquisa de mercado.
O briefing uma pea fundamental para a elaborao de uma proposta

comercial. um elemento-chave para o planejamento e desenvolvimento do
projeto de acordo com as necessidades do cliente. um conjunto de pergun-
tas e respostas que servem para orientar como se dar o projeto, elaborao
e execuo de determinado produto ou servio.
1.5.1 Como fazer um bom briefing?

O briefing deve ser feito na primeira reunio com o cliente, preferencialmente
em um encontro pessoal. A vantagem do encontro pessoal poder sentir melhor
o que a pessoa est realmente precisando e/ou buscando, alm de voc poder
auxiliar e explicar melhor para o cliente o teor e objetivo de cada pergunta.

1.5.2 Tipos de briefing
Em algumas situaes pode ser difcil encontrar-se pessoalmente com o po-
tencial comprador do website. Para solucionar essa questo, outros tipos de
entrevista so utilizados:
a) Briefings por e-mail esta abordagem seria a mais simples e tradicio-

nal quando o assunto web. Enviar as perguntas do briefing por e-mail
e receber as respostas tambm por e-mail. Entretanto, a pessoa entre-
vistada pode ter necessidade de explicaes adicionais, principalmente
se no tiver conhecimento sobre internet; nesse caso, a entrevista com
encontro pessoal leva vantagem.
b) Conversa por mensageiros instantneos usada pela maioria das

pessoas que trabalham com web ou que acessam a rede mundial vrias
horas por dia. Fazer um briefing com o cliente atravs de um programa
de bate-papo on-line mais demorado, mas d um toque mais pessoal
a todo o processo.
c) Videoconferncia realizar uma videoconferncia bem prximo de se

encontrar pessoalmente com o cliente. Para quem vai fazer um briefing
com pessoas de outros estados ou pases, este deve ser o meio de esco-
lha adequado;
d) Sistema web de briefings para desenvolvedores web bastante sim-

ples montar um sistema on-line para realizao de briefing. Um exemplo
seria definir um esquema de IDs para os clientes e programar um for-
mulrio com as perguntas separadamente, para cada um; as respostas
seriam armazenadas em um banco de dados e/ou num arquivo, como
um XML, por exemplo.
e) Combinao de diversas tcnicas dependendo do caso, pode ser

eficiente misturar diversas dessas tcnicas de feitura de briefing. Por
exemplo, pode-se enviar um e-mail com as perguntas e, em uma video-
conferncia, fazer um acompanhamento com o cliente para auxili-lo a
respond-las. Ou ainda elaborar um sistema on-line para a pessoa respon-
der s perguntas do briefing e enviar as respostas para o seu e-mail. Re-
corra sua criatividade e certamente bons resultados sero encontrados.

1.5.3 Estratgias para fazer um briefing eficiente
a) Briefing preliminar o primeiro briefing a ser feito serve para voc ter
um primeiro contato com as necessidades e ideias do cliente. O interes-
sante, nessa fase inicial, conversar bastante com o cliente e tentar cap-
tar, ao mximo, o que est oculto. Existem necessidades ocultas em
todo projeto que, por motivos diversos, o cliente no pode falar ou no
consegue definir por falta de conhecimento das possibilidades.
papel de quem realiza o briefing extrair do cliente coisas que nem ele
mesmo sabe que quer e/ou precisa e, em funo disso, trazer uma qualidade
maior para o projeto e otimizar o resultado final deste. Fazer um briefing
de qualidade demanda prtica! As perguntas para esse primeiro encontro
podem ser de carter mais geral, mas com o objetivo de um mnimo de in-
formaes sobre as caractersticas do projeto, tais como:
pblico-alvo;
objetivos do website;
imagem que o cliente quer passar para os visitantes;
anlise da concorrncia.
b) Briefing complementar serve para detalhar tudo o que foi apren-

dido por voc sobre o negcio, produto ou empresa de seu cliente. As
perguntas que formam essa segunda parte da entrevista lhe fornecero
informaes mais completas e confiveis.
importante deixar claro, desde o incio, que vocs precisaro de um tem-

po maior para esse segundo encontro; certamente a pessoa ficar satisfeita
com sua sinceridade e feliz por poder fornecer mais informaes que, con-
sequentemente, faro com que o resultado final do projeto seja melhor. As
perguntas desse briefing podem ser divididas da seguinte maneira:
estratgia;
informaes gerais;
pblico-alvo;
contedo;
aparncia (design);
outras informaes.

1.6 O que arquitetura de informao em
websites?
Segundo Webinsider (2006), de forma geral, a arquitetura de informao,
conforme a definio criada originalmente por Saul Wurman Richard (1999),
trata da organizao da informao para torn-la clara, compreensvel. Na
web, esse objetivo se mantm: criar as estruturas de organizao da informa-
o de um website para que o usurio consiga compreend-lo com facilidade.
1.6.1 Componentes da arquitetura

da informao de um website
Rosenfeld e Morville (2002) dividem a arquitetura de informao de um
website em quatro grandes sistemas, cada um composto por regras e
aplicaes. Juntos eles renem todos os elementos de interao do usurio
com a informao apresentada pelo website. So eles:
a) Sistema de organizao (Organization system): mtodo de categorizar e

organizar a informao, por exemplo: alfabtica, cronolgica ou por assunto.
b) Sistema de rotulao (Labeling system): estabelece as formas de represen-

tao, de apresentao, da informao definindo rtulos para cada elemento
informativo, por exemplo: empresa, quem somos, servios, produtos.
c) Sistema de navegao (Navegation system): determina o modo de na-

vegar ou mover-se no espao informacional, por exemplo: navegao
global, navegao local.
d) Sistema de busca (Search system): determina as perguntas que o usu-

rio pode fazer e o conjunto de respostas que ir obter.
Assista ao vdeo sobre 1.7 Diviso e alocao de contedo

arquitetura da informao
para web design, acessando o De acordo com as definies da pgina de Projetos de aplicaes web (2002),
endereo: http://www.youtube. uma boa arquitetura de design causa um timo primeiro impacto ao visitan-
com/watch?v=5ha3B25LRXg
te; alm de boa ilustrao, qualidade em animaes e fotos, a aplicao web
Para entender sistema de
navegao, acesse o endereo:
deve ter contedo preciso e coerente com a arquitetura de informao:
http://www.timaster.com.br/
revista/artigos/main_artigo.
asp?codigo=1229&pag=2 a) A produo dos textos das pginas web no pode ter o carter de au-
toria, uma vez que o autor no est escrevendo um livro ou artigo de
opinio.

b) O produtor de contedo deve com eficincia transmitir a mensagem em uma
linguagem simples, porm respeitando todos os conceitos gramaticais.
c) O processo de produo de contedo deve estar de acordo com a mdia

web de comunicao a que se destina.
Veja algumas caractersticas importantes no desenvolvimento do seu website, Website wireframe facilita
muito a criao de layouts para
extradas da pgina Projetos de aplicaes web (2002): pginas web. Entenda este
recurso, acessando o endereo:
http://pt.wikipedia.org/wiki/
a) Objetividade Website_wireframe
Desenvolva resumos, em linguagem simples, para cada item na estrutura.

Desenvolva textos completos para o assunto, quando necessrio.
Textos mais extensos, que tratem de assuntos especficos, devem ser dis-
ponibilizados no formato PDF para que o usurio possa baixar e/ou ler
em modo off-line.
Aplique o recurso do hipertexto sem exageros nos links que possam com-
prometer o entendimento e acesso informao.
b) Legibilidade (ler)
Legibilidade deficiente: segundo pesquisa do Instituto Nielsen, ler na

Web 25% mais difcil em comparao leitura no papel, por causa da
resoluo da tela.
Textos on-line so mais bem lidos com sentenas curtas e estrutura gra-
matical simples, satisfazendo rapidamente o visitante.
Sugira atalhos que permitam a expedio exploratria, se assim o visitante
desejar.
Os links devem ter relacionamentos coerentes entre si, para no confun-
dir o leitor.
c) Visibilidade (ver)
Dar visibilidade a informaes importantes no contexto da aplicao

fundamental para estabelecer a comunicao.
Cada elemento deve ser construdo respeitando as regras de simetria e
ordem de importncia de leitura para uma melhor seleo visual.
No d para mostrar tudo na pgina principal; por isso, essa pgina deve
exibir aquilo que de maior relevncia e que no pode deixar de ser visto.

d) Navegabilidade (o que? onde?)
Planejar fundamental para no criar verdadeiros becos sem sada.

Evite que o acesso entre uma seo e outra passe pela pgina principal.
Evite navegao que force o visitante a passar por vrias pginas at
chegar informao desejada.
Planejar a navegao de um site fundamental para que o visitante
visualize com facilidade todo o contedo disponvel na aplicao web.
O ideal o que o leitor no precise dar mais de trs cliques para obter a
informao que deseja, segundo Bill Skeet, projetista norte-americano na
rea de novas mdias.
Resumo
Nesta aula voc pde conhecer a origem da internet, conceitos de web de-
sign, dicas sobre construo de sites e tipos de site. Aprendeu tcnicas de
coleta de informaes para determinar a funcionalidade do site, gerar con-
tedo para aliment-lo e organizar a informao para ter um site com bom
visual e boa leitura.
Atividade de aprendizagem
1. Responda o que se pede. Ao finalizar a atividade, poste no AVEA.
a) Qual a importncia da internet atualmente como meio de comunicao

na vida pessoal e profissional das pessoas?
b) Baseado nos conhecimentos que adquiriu, escreva com suas prprias pa-
lavras qual a funo de um site na web?
c) Qual a importncia de um briefing para o projeto de um site?
d) Por que a arquitetura da informao importante na construo de sites?
e) O que e para que serve um wireframe na construo de um website?

Defina tambm navegao global e navegao local.
2. Faca uma pesquisa na internet e escreva sobre os protocolos HTTP e FTP.

Elabore um texto com definies, caractersticas e funes desses proto-
colos. Ao finalizar a atividade, poste no AVEA.

Aula 2 Edio e publicao de sites
Objetivos
Conhecer conceitos bsicos sobre as linguagens de marcao e

formatao de pginas web.
Aprender o processo de publicao de pginas web.
2.1 Um esqueleto chamado HTML

HTML significa (Hyper Text Markup Language) Linguagem de Marcao de
Hipertexto). Segundo Wikipdia (2012) Tim Berners-Lee criou o HTML original (e
outros protocolos associados como o HTTP) em uma estao NeXTcube usando
o ambiente de desenvolvimento NeXTSTEP. Na poca a linguagem no era uma
especificao, mas uma coleo de ferramentas para resolver um problema de
Tim: a comunicao e disseminao das pesquisas entre ele e seu grupo de co-
legas. Sua soluo, combinada com a ento emergente internet pblica (que se
tornaria a internet como a conhecemos) ganhou ateno mundial.
Todo documento HTML apresenta etiquetas (ou TAG), elementos entre pa-
rnteses angulares (chevron - < e >); que so os comandos de formatao da
linguagem. A maioria das etiquetas tem sua correspondente de fechamento:
Isso necessrio porque as etiquetas servem para definir a formatao de

uma poro do documento, e assim marcamos onde comea e termina o
texto com a formatao especificada por ela. Uma etiqueta formada por
comandos, atributos e valores. Os atributos modificam os resultados padres
dos comandos e os valores definem caractersticas dessa mudana. Exemplo:
Aula 2 Edio e publicao de sites 27 e-Tec Brasil

onde:
HR = [comando] desenha uma barra horizontal
color = [atributo] especifica que a barra ter uma cor
red = [valor do atributo] define qual ser a cor atribuda barra, no

caso vermelha.
Cada etiqueta (TAG) um comando que pode receber atributos possveis e

seus valores correspondentes. Um exemplo o atributo SIZE que pode ser
XHTML (eXtensible Hypertext usado com o comando FONT, com o HR, mas que no pode ser usado com
Markup Language) dever ser
o sucessor do HTML. uma o comando BODY. Isso quer dizer que devemos saber quais so os atributos
reformulao da linguagem de e valores possveis para cada comando para poder utiliz-los corretamente.
marcao HTML, que combina
as tags de marcao HTML com
regras da XML. Esse processo de Uma propriedade importante dos documentos HTML a possibilidade de
padronizao tem o objetivo de
permitir a exibio de pginas fazer hiperligaes. Para isso usa-se a etiqueta <a> (do ingls, anchor). Esta
web em diversos dispositivos
como: televiso, palm, celular, tem os atributos: href que define o alvo da hiperligao (que pode ser um
entre outros, para ampliar a endereo da web, um link para baixar um arquivo ou um endereo de e-mail
acessibilidade. Para aprender
mais sobre essa linguagem, para envio de mensagens) ou name (que exibe uma parte da mesma pgina
acesse: http://maujor.com/ que est sendo acessada), como mostram os exemplos a seguir:
tutorial/xhtml.php
A linguagem de marcao HTML um poderoso recurso de formatao,

sendo muito simples e acessvel em sua utilizao, voltada para a produo e
compartilhamento de documentos e imagens atravs da internet.
2.2 Entendendo o que CSS

O CSS (Cascading Style Sheet) uma linguagem padro de formatao para
pginas web que supera as limitaes impostas pelo cdigo HTML. O CSS
permite uma versatilidade maior na programao do layout de pginas web
sem aumentar o seu tamanho do arquivo a ser publicado. Oferece vrias
possibilidades que antes s eram conseguidas com a utilizao de imagens
no formato GIFS e JPGS. O CSS permite ao designer um controle maior sobre
os todos os elementos que compem uma pagina web, como tamanho e
cor das fontes, tamanho de imagens, espaamento entre linhas e caracteres,
margem do texto, entre muitos outros. Permite trabalhar com um atributo
chamado FLOAT que proporciona total controle de posicionamento, permi-
tindo a sobreposio de texto sobre texto ou texto sobre imagens.

2.2.1 Benefcios do uso de CSS?
CSS uma revoluo no mundo do web design. Os benefcios concretos do
uso de CSS incluem:
controle do layout de vrios documentos a partir de uma simples folha

de estilos;
maior preciso no controle do layout;
aplicao de diferentes layouts para servir diferentes mdias (tela, impres-

sora, etc.);
emprego de variadas, sofisticadas e avanadas tcnicas de desenvolvimento.
2.2.2 A sintaxe bsica das CSS

Suponha que desejamos uma cor de fundo vermelha para a pgina web:
usando HTML podemos fazer assim:
Com CSS o mesmo resultado ser obtido com este cdigo:
Como voc pode notar, os cdigos HTML e CSS so mais ou menos pare-
cidos. O exemplo acima serve tambm para demonstrar o fundamento do
modelo CSS.
Um conjunto de regras CSS forma uma Folha de Estilos. Uma regra CSS, na
sua forma mais elementar, compe-se de trs partes: um seletor, uma pro-
priedade e um valor e tem a sintaxe conforme o exemplo a seguir:
Para inserir o CSS a um documento HTML, temos trs maneiras distintas.

O mtodo mais utilizado atualmente, pela praticidade e pela eficincia, o
terceiro mtodo, ou seja o mtodo externo.

a) Mtodo 1: In-line (o atributo style)
Uma maneira de aplicar CSS pelo uso do atributo style do HTML. Tomando
como base o exemplo mostrado anteriormente, a cor vermelha para o fundo
da pgina pode ser aplicada conforme mostrado a seguir:
b) Mtodo 2: Interno (a tag <style>)
Uma outra maneira de aplicar CSS pelo uso da tag <style> do HTML. Esta tag
deve ser posicionada dentro do comando <head>, conforme mostrado abaixo:
c) Mtodo 3: Externo (link para uma folha de estilos)
Neste mtodo, uma instruo no cdigo HTML chama um arquivo externo

que contm todas as regras CSS de formatao. Este mtodo mais re-
comendado, porque permite separar o arquivo de formatao do arquivo
HTML; desse modo, ele pode ser utilizado para vrias pginas ao mesmo
tempo, facilitando a manuteno das pginas se for necessrio. Uma folha
de estilos externa um simples arquivo de texto com a extenso .CSS.
Ilustrando para melhor entender, vamos considerar que sua folha de estilos
tenha sido nomeada como STYLES.CSS e est localizada no diretrio STYLE.

Figura 2.1: Arquivo externo CSS
Fonte: http://pt-br.html.net/tutorials/css/lesson2.php
Precisaremos apenas inserir uma instruo no arquivo externo para lig-lo

ao arquivo da pgina que precisamos que seja formatada, com o seguinte
cdigo HTML:
importante perceber que o caminho para a folha de estilos deve ser indi-
cado corretamente no atributo HREF; caso contrrio, no ir funcionar. Essa
inscrio deve ser inserida entre as tags <HEADER> </HEADER> do docu- A CSS uma linguagem
mento HTML, para que funcione, conforme mostrado a seguir: que supre uma deficincia
do HTML em trabalhar
com elementos grficos,
imagens, dimensionamento e
posicionamento preciso. Acesse
o endereo a seguir e conhea
mais sobre CSS: http://www.
youtube.com/watch?v=_
wDcu1ZuqL8&feature=related
Este link informa ao navegador para usar o arquivo CSS na renderizao e

apresentao do layout do documento HTML. Tal como qualquer outro tipo
de arquivo, voc pode colocar uma folha de estilos tanto no servidor como
no disco rgido.
Mudanas na folha de
style.css
estilos externa faro
efeito em todos os
documentos HTML.
Documentos HTML linkados folha de estilos.

Figura 2.2: Ligao da folha de estilos aos documentos HTML
Fonte: http://pt-br.html.net/tutorials/css/lesson2.php

Essa tcnica pode economizar uma grande quantidade de trabalho. Se, por
exemplo, voc quiser trocar a cor do fundo de um site com 100 pginas, a
folha de estilos evita que voc edite manualmente uma a uma as pginas para
fazer a mudana nos 100 documentos HTML. Usando CSS, a mudana se far
em poucos segundos trocando-se a cor em uma folha de estilos central.
2.3 Editores de HTML

Trata-se de um programa utilizado para construir o cdigo HTML. Usurios
iniciantes preferem editores do tipo WYSIWYG (What You See Is What You
Get), pois permitem que o usurio crie livremente o layout e internamente o
software gera o cdigo HTML, nos permitindo desenhar a pgina como se
estivssemos escrevendo um documento com um editor do tipo do Micro-
soft Word. Entretanto, usurios mais experientes gostam de criar as pginas
programando o cdigo HTML manualmente, justificando que desse modo o
cdigo fica mais leve e mais limpo.
2.3.1 Note Pad ++

Notepad++ um editor de cdigos-fonte completo e que suporta as mais
diversas linguagens de programao. uma tima alternativa ao bloco de
O NotePad++ possui um recurso notas porque possui recursos para facilitar o trabalho como: sistema de bus-
de sinalizao para incio e fim
de TAG que facilita construo ca e substituio, interface funcional, navegao por abas, edio avanada
e alterao de cdigos HTML e autocompletar para comandos que esto sendo escritos.
e CSS. Acesse o endereo a
seguir e aprenda a instalar o
NotePad++ : http://vimeo. O programa possui suporte s linguagens C, C++, Java, C#, XML, HTML,
com/27332335
PHP, Javascript, ASCII art, doxygen, ASP, VB/VBS, SQL, Objective-C, CSS, Pas-
cal, Perl, Python, Lua, TeX, TCL, Assembly, Ruby, Lisp, Scheme, Properties,
Diff, Smalltalk, Postscript, VHDL, Ada, Caml, AutoIt, KiXtart, Matlab, Verilog,
Haskell e InnoSetup.
Figura 2.3: rea de trabalho do editor de cdigos NotePad + + 2011

Fonte: Elaborada pelo autor

O Notepad++ tambm possibilita a personalizao pelo usurio, que pode
definir suas prprias linguagens na opo User Language Define System e
ainda adicionando muitos outros recursos, atravs de plugins especficos dis-
ponveis na internet.
2.3.2 Dreamweaver
O software Dreamweaver, da fabricante Macromedia, a ferramenta de dese-
nho de pginas web mais conhecida e utilizada entre os desenvolvedores de
pginas web. Esse sucesso se deu por sua extrema facilidade de manuseio e suas O Dreamweaver , atualmente,
o programa mais usado em
ferramentas de interao que facilitam diversas atividades do processo de cria- todo o mundo para fazer
o. Mesmo que seja experiente, um desenvolvedor web sempre encontrar nes- pginas para a internet. fcil
perceber por que. Ele um
se programa razes para utiliz-lo, sobretudo no que se refere produtividade. programa WYSIWYG (what
you see is what you get), com
uma interface grfica intuitiva;
O software cumpre perfeitamente o objetivo de desenhar pginas com aspecto por isso, ganha mais adeptos a
cada dia. Acesse o endereo a
profissional e suporta grande quantidade de tecnologias. Entre as funes aceitas seguir e assista ao vdeo sobre
para manipulao no programa, destaca-se a edio de diversos cdigos como: a interface do Dreamweaver:
http://www.youtube.com/
watch?v=9I3nucN4Idc
folhas de estilo e camadas (CSS);
JavaScript para criar efeitos e interatividades;
insero de arquivos multimdia;
manipulao de cdigo PHP, XML, ASP e HTML.
Por ser um programa com muitos recursos, pode no ser to simples seu ma-
nuseio para pessoas menos experientes no desenho de web, que no estejam
acostumadas com a metodologia de trabalho do programa.
O Dreamweaver evoluiu muito em sua verso MX 2004, que recebeu um am-

biente de design baseado em CSS, um editor de cdigo e editor visual integra-
dos, um editor de imagem baseado na tecnologia do Macromedia Fireworks
e uma ferramenta FTP segura e muito prtica para transferncia de trabalhos
concludos para publicao na web.

Figura 2.4: rea de trabalho do editor de cdigos Dreamweaver 2011
Fonte: Dreamweaver 2011
2.4 Gerando uma pequena pgina HTML

Com os conhecimentos adquiridos, j podemos, criar nossa primeira pgina
web. Para isso, abra seu editor de textos de sua preferncia e digite o seguin-
te texto em um novo documento:
Agora salve este arquivo com extenso .html ou .htm em seu disco rgido.
Para isso, acessamos no menu Arquivo e selecionamos a opo Salvar
como. Na janela, escolhemos o diretrio onde desejamos salvar e nomea-
remos o arquivo, como por exemplo: minha_pgina.html.
Com o documento HTML criado, podemos ver o resultado obtido atravs

de um navegador. Chegado a esse ponto, conveniente, insistir no fato de
que nem todos os navegadores so idnticos. Infelizmente, os resultados de
nosso cdigo podem mudar de um para outro, sendo por isso aconselhvel
visualizar a pgina em vrios navegadores. Geralmente usam-se o Internet
Explorer, Mozila Firefox e o Chrome da Google como referncias, j que so
os mais difundidos e utilizados atualmente.

2.5 Publicar uma pgina na web
Com o uso de editores de pginas web como o Macromedia Dreamweaver,
voc pode criar pginas web como se estivesse construindo um documen-
to em um editor de textos com o Microsoft Word; alis, existem algumas
operaes no Dreamweaver que utilizam as mesmas teclas usadas no Word
para realizar a mesma operao. Alm disso, as verses mais recentes do
programa j aceitam a colagem de textos preservando a formatao do tex-
to de origem. Uma pgina web composta por textos, imagens, que podem
ser fotos ou grficos animados, e outros recursos multimdia, como msi-
ca, animaes em Flash ou Java, vdeos, entre outros. Aps ter soltado sua
imaginao e criado sua pgina, voc precisar public-la na web. Publicar
to somente transferir os arquivos da sua mquina para o da mquina da
empresa que ir hospedar seu website. Antes precisamos aprender alguns
conceitos sobre provedores, hospedagem e registro de domnios, para po-
dermos entender melhor o processo de publicao na internet.
a) Provedor de servios empresa previamente homologada e certificada

atravs de um contrato firmado com o Registro.br, para que o registro
e a manuteno dos domnios e entidades possam ser feitas atravs de
uma interface especfica. Os provedores de servios podem ou no ofe-
recer servios agregados ao registro de domnios. Os clientes s podem
cadastrar novos domnios ou alterar os dados de domnios e entidades
existentes atravs do seu provedor de servios, sendo que nesses casos
o sistema do Registro.br somente permitir a visualizao dos dados de
seus domnios e/ou entidades, caso sejam contatos destes.
b) Provedor de hospedagem oferece servios de hospedagem de sites

na internet e tambm pode oferecer aos seus clientes o registro de do-
mnio agregado aos seus servios. Tal provedor no tem nenhum vnculo
formalizado com o Registro.br, mas seus clientes podem interagir direta-
mente com esse sistema para atualizar dados dos seus domnios e entida-
des, desde que sejam contatos destes.
c) Hospedagem hospedagem (host, em ingls) um servio oferecido

por empresas conhecidas como provedores. Ser necessrio contratar
esse servio para publicar a sua pgina. H planos de hospedagem pagos
e gratuitos, mas o primeiro tipo geralmente oferece muito mais recursos
que o segundo. Hosts grtis, alm de limitados em vrios aspectos, muitas
vezes exibem banners ou barras com publicidade, que inclusive podem
desalinhar o layout do site ou mesmo incomodar o visitante. Por isso, na
maioria dos casos, o ideal contratar um servio de hospedagem pago.

d) Domnio o nome que compe o endereo do site. Voc precisa regis-
trar um domnio pelo perodo mnimo de um ano. Aps esse perodo, sua
Assista a um vdeo para entender anuidade deve ser renovada; caso contrrio, o domnio ficar disponvel para
um pouco mais sobre domnio
e hospedagem no endereo a outra pessoa ou empresa registrar. Tambm possvel contar com a opo
seguir: http://www.youtube. de registrar ou renovar o domnio a cada dois anos ou mais.
com/watch?v=vkhWXz0I7pY
e) Registro de domnio para adquirir um domnio voc deve possuir um

CNPJ (empresa) ou CPF (pessoa fsica) e efetuar a compra pelo site regis-
tro.br ou atravs do seu provedor. REGISTRO.BR, cujo rgo brasileiro
responsvel por todos os domnios com terminao (.BR) a Fundao
de Amparo Pesquisa do Estado de So Paulo,.
Para domnios internacionais, voc no precisa de nenhum documento.

Procure no site de busca de sua preferncia por registro de domnio ou
informe-se com seus amigos sobre quais empresas de registro de domnios
internacionais eles recomendam. INTERNIC o rgo americano responsvel
pelos domnios internacionais (.COM, .NET, .ORG, .BIZ, etc.)
2.6 Protocolo de FTP

O FTP (File Transfer Protocol Protocolo de transferncia de arquivos) ofere-
ce um meio de transferncia e compartilhamento de arquivos remotos. Entre
os seus servios, o mais comum o FTP annimo, pois permite o download
de arquivos contidos em diretrios sem a necessidade de autenticao. En-
tretanto, o acesso annimo restrito a diretrios pblicos que foram especi-
ficados pelo administrador da rede.
O protocolo FTP disponibiliza interatividade entre cliente e servidor, de forma

que o cliente possa acessar informaes adicionais no servidor, no s ao pr-
prio arquivo em questo. Como exemplo das facilidades, podemos citar a lista-
gem de arquivos, na qual o cliente lista os arquivos existentes no diretrio, ou
opes do tipo Help, em que o cliente tem acesso lista de comandos. Essa
interatividade proveniente do padro NVT (Network Virtual Terminal) usado
pelo protocolo TELNET. Contudo, o FTP no permite a negociao de opes,
utilizando apenas as funes bsicas do NVT, ou seja, sua configurao padro.
O protocolo FTP permite que o cliente especifique o tipo e o formato dos

dados armazenados. Como exemplo, se o arquivo contm texto ou inteiros
binrios e, no caso de texto, qual o cdigo utilizado (USASCII, EBCDIC, etc.).
Como segurana mnima, o protocolo FTP implementa um processo de auten-

ticao e outro de permisso. A autenticao verificada atravs de um cdi-
go de usurio e senha; j a permisso dada em nvel de diretrios e arquivos.

O servidor de FTP possibilita acessos simultneos para mltiplos clientes. O
servidor aguarda as conexes TCP, e para cada conexo cria um processo
cativo para trat-la. Diferentemente de muitos servidores, o processo cativo Os sites so acessados usando
o protocolo HTTP, com a ajuda
FTP no executa todo o processamento necessrio para cada conexo. A co- dos navegadores. FTP, como
municao FTP utiliza uma conexo para o controle e outra (ou vrias) para o nome indica, usada para
transferncia de arquivos de um
transferncia de arquivos. A primeira conexo (chamada de conexo de con- computador para outro. um
trole FTP-control) utilizada para autenticao e comandos; j a segunda protocolo menos popular devido
ao pequeno nmero de pessoas
(chamada de conexo de dados FTP-data), utilizada para a transferncia que o utilizam. Assista a um
vdeo para entender um pouco
de informaes e arquivos em questo. mais sobre FTP no endereo a
seguir: http://www.youtube.
com/watch?v=hVPy-3NVFdQ
2.7 Cliente de FTP

um programa que realiza todas as operaes necessrias para transfern-
cia de arquivos entre duas mquinas, utilizando a internet como meio de
comunicao. No software voc encontrar um formulrio que permite o
cadastramento dos dados de acesso ao endereo remoto, como: Usurio e
Login. Sem esses dados, a conexo no ser estabelecida e no ser possvel
transferir os arquivos. Veja na Figura 2.5 como ocorre a transferncia de
dados pelo protocolo FTP.
Interface com
Usurio Um cliente de FTP muito
1 conhecido e gratuito o FlieZila
Usurio da Mozila. Assista a um vdeo
Interpretador de 2 Interpretador de para aprender a baixar, instalar
Protocolo do Protocolo do e configurara esse software no
Servidor Conexo de endereo a seguir: http://www.
Usurio weeby.com.br/2010/08/15/
Controle
saiba-como-baixar-instalar-e-
Processo de comecar-a-usar-o-cliente-de-
Processo de
4 3 Transferncia de ftp-filezilla/
Transferncia de
Dados do
Sistema de Dados do Conexo de Sistema de
Usurio
Arquivos Servidor Dados Arquivos
Servidor FTP Cliente FTP
Figura 2.5: Infogrfico da transferncia de dados atravs do protocolo FTP

Fonte: http://pt.kioskea.net/faq/1983-o-que-e-ftp
O protocolo de FTP exige comandos para que as operaes de gravao,

deleo, cpia e movimentao de arquivos sejam realizadas. Os programas
ou clientes de FTP realizam automaticamente esses comandos a cada ao
do usurio, tornando a tarefa mais rpida e segura.

Resumo
Nesta aula voc aprendeu a linguagem de marcao HTML e sua evolu-
o para XHTML. Aprendeu o CSS, que uma linguagem complementar
ao HTML e que oferece grandes possibilidades de manipulao e personali-
zao de pginas web. Aprendeu tambm os softwares que possibilitam a
construo da pgina e sua publicao na internet.
1. Execute o aplicativo Bloco de Notas e, baseado nos conhecimentos ad-
quiridos, monte uma pgina web escrevendo o cdigo abaixo. A ima-
gem: sao_paulo.jpg, est disponvel para download no AVEA. Ao finali-
zar a atividade, poste no AVEA.

2. Pesquise na internet sobre o assunto Como escolher um provedor de
hospedagem e relacione explicando os principais pontos que precisam
ser observados na hora de contratar um provedor. Digite o resultado em
um arquivo. Ao finalizar a atividade, poste no AVEA.
3. Abra o Notepad (ou qualquer outro editor de texto que queira usar) e crie
dois arquivos um arquivo HTML e outro arquivo CSS com os seguintes
contedos:
Arquivo HTML: index.htm
Arquivo CSS: style.css
Salve os dois arquivos no mesmo diretrio. Lembre-se de salvar os arquivos

com a extenso apropriada (.css e .htm). Abra index.htm no seu nave-
gador e veja uma pgina com o fundo vermelho. Parabns! Voc construiu
sua primeira pgina de internet utilizando a tecnologia de folha de estilos
(CSS). Ao finalizar a atividade, poste no AVEA.

Aula 3 A imagem
Objetivos
Aprender conceitos sobre imagem digital e suas caractersticas.
Conhecer os formatos existentes de armazenamento de imagens

digitais.
3.1 Fotografia digital

A fotografia digital possui muitas vantagens sobre a fotografia que utiliza
filme tradicional. As fotos digitais so convenientes, permitem ver os resul-
tados instantaneamente, no requerem os custos de filme e revelao e so Assista ao vdeo sobre fotografia
digital no endereo: http://www.
adequadas para edio por software, pois no h perda de dados, como youtube.com/watch?v=VApXvp
quando se tem que digitalizar uma imagem do papel. Podem ser armazena- QVv7M&feature=related
das e enviadas pela internet.
3.2 Gerao da imagem digital

Digitalmente, todas as cores so formadas a partir de trs cores bsicas:
RGB, isto , R= Red (Vermelho), G= Green (Verde), B= Blue (Azul). A imagem
que voc v na sua cmera digital capturada por ela junto com outras
informaes do clique como o valor de balano de branco, contraste,
saturao, ente outros, atravs de milhares de reas sensveis (pixels) do
sensor CCD ou CMOS (chip de silcio).
Cada pixel pode codificar a cor que recebe (R, G ou B) com at 16 mil
nveis de intensidade, dependendo de quantos bits (unidades de informao
eletrnica, os famosos 0 e 1) estejam disponveis para essa funo. C-
meras profissionais chegam at 12 ou 14 bits por pixel.
Se cada pixel registra at 16 mil nveis de intensidade e a resoluo de sua

cmera de, digamos, sete milhes de pixels, vai dar uma quantidade enor-
me de informao para cada foto, certo? Bem, a cmera aguenta e foi proje-
tada para isso. Mas, e depois de clicar, onde vamos salvar tanta informao?
Haja espao. a que entra a deciso de qual formato utilizar. As imagens
possuem algumas caractersticas como:
Aula 3 A imagem 41 e-Tec Brasil

a) Resoluo pixel o elemento que forma a imagem digital, assim como
a prata forma a imagem no filme. Tem um formato quadrado e so ali-
nhados um ao lado do outro.
Figura 3.1: Detalhe para identificao dos pixels

Fonte: Elaborada pelo autor
A quantidade de pixels determina o tamanho da imagem digital. Podemos

concluir que a unidade de medida da imagem digital em pixels e a unidade
de medida da fotografia em cm ou polegadas. Por exemplo, uma imagem
com 1200 x 1600 menor que a imagem com 2600 x 3500.
A resoluo determina na cmera digital o tamanho da imagem em pixels,

com objetivo de gerar o tamanho da foto no papel conforme a necessidade
do usurio. Em uma cmera digital com resoluo mxima de 8MP, o sensor
CCD (captura os pontos de luz e cor) tem oito milhes de pixels com trs
canais de cores (RGB) cada. Quando reduzimos a resoluo, por exemplo, de
8MP para 5MP, estamos agrupando os pixels; logo, transformando o espao
de 8MP para 5MP. Sendo assim, os pixels ficaram maiores e de menor quan-
tidade, reduzindo o tamanho da foto final.
b) Qualidade da imagem quando capturar suas fotos, voc dever usar

a resoluo mais alta que sua cmera permitir. Por exemplo, se voc tem
uma cmera de 5,1 megapixel, ento voc deve usar essa configurao
para capturar suas imagens, pois quanto maior a resoluo, melhor a
qualidade da imagem.

Pixels Imagem Resoluo Resoluo
Alta Baixa
Figura 3.2: Grade de pixels para alta e baixa resoluo
Fonte: http://wwwca.kodak.com/BR/pt/consumer/fotografia_digital_classica/para_uma_boa_foto/curso_fotografia/foto-
grafia_digital/principais_conceitos/pixel_resolucao/pixel_resolucao.shtml?primeiro=1
c) Tamanho do arquivo O tamanho do arquivo ser proporcional

quantidade de informaes que este contiver. Por isso, devemos lembrar
que para uma maior qualidade teremos um arquivo com maior tamanho
em bytes. Cada formato de imagem traz consigo caractersticas prprias
de tratamento de informaes e compresso de dados.
0 0 1 2 3 0=
0 1 2 3 2 1=
1 2 3 2 1 2=
2 3 2 1 0 3=
3 2 1 0 0
Figura 3.3: Quantidade de informao determina o tamanho do arquivo
Fonte: http://pt.wikipedia.org/wiki/Profundidade_de_cor
d) Profundidade de bits a profundidade de bits o que determina quan-

tas cores nicas esto disponveis na paleta de cores de uma imagem em
termos de nmero de 0s e 1s, ou bits, que so utilizados para especifi-
car cada cor. Isso no significa que uma imagem necessariamente utiliza
todas essas cores, mas sim que pode especificar suas cores usando esse
nvel de preciso. Para uma imagem em tons de cinza, a profundidade de
bits indica quantas gradaes nicas de cinza esto disponveis. Imagens
com profundidades de bit maiores podem representar mais tons ou cores
j que h mais combinaes de 0s e 1s disponveis para represent-las.
A maioria das imagens coloridas vm de cmeras digitais que tm 8-bits por

canal e ento elas podem usar um total de oito 0s e 1s para representar suas
cores. Isso d 256 valores de intensidade diferentes para cada cor primria.

Quando todas as trs cores so combinadas, em cada pixel temos 2563 ou
16.777.216 de cores diferentes. Imagens com essa quantidade de cores nor-
malmente so apelidadas de true color (uma traduo possvel seria cores
reais). A isso chamamos 24 bits por pixel, j que cada pixel composto
por trs canais de 8-bits (8*3=24). O nmero de cores disponveis para uma
imagem de X-bits sempre 2X se X se refere a bits por pixel e 23*X se X se
refere ao nmero de bits por canal.
Tabela 3.1 : Classificao de cores por profundidade de bits

Bits Por Pixel Nmero de Cores Disponveis Nome(s) Comum(ns)
1 2 Monochrome
2 4 CGA
4 16 EGA
8 256 VGA
16 65.536 XGA, High Color
24 16.777.216 SVGA, True Color
32 4,3 bilhes
48 281 Trilhes
Fonte: http://www.cambridgeincolour.com/pt-br/tutorials/bit-depth.htm
Figura 3.4: Imagem com profundidade de um bit de cor

Fonte: http://www.sxc.hu/browse.phtml?f=download&id=684424
Figura 3.5: Imagem com profundidade de quatro bits de cor


Figura 3.6: Imagem com profundidade de oito bits de cor
Figura 3.7: Imagem com profundidade de 16 bits de cor

e) Compresso uma tcnica que garante, mediante a aplicao de al-

goritmos matemticos, uma imagem similar original, mas cujo tama-
nho (em pixels) menor e, portanto ocupa menos espao.
H dois tipos de compresso: com perda (lossy) e sem perda (lossless). Os

algoritmos com perda aproveitam-se das limitaes da viso humana para
suprimir informao que provavelmente no seria percebida de qualquer
forma. Veja, na Figura 3.8, as trs verses do mesmo registro com diferentes
graus de compresso:
Figura 3.8: Comparao de imagens usando compactaes com perda de qualidade

Fonte: Banco de imagens SXC

Note que no primeiro registro os detalhes da foto so ainda perceptveis. No
registro com maior compresso h um achatamento tal, que os detalhes
se perderam. Retorne foto original acima e perceba que, no geral, voc
no prestou ateno a esses detalhes, o que faz com que at 80% de com-
presso possa ser aceitvel na maioria dos casos.
Os algoritmos sem-perda utilizam, geralmente, o algoritmo LZW (Lempel-

Ziv-Welch) para obter imagens onde no h perda de qualidade isto , no
acontece o achatamento visualizado no exemplo. A qualidade da imagem
bem superior, assim como o tamanho do arquivo resultante, se comparado
com um arquivo gerado por um algoritmo com-perda.
3.3 Tipos de compactao

a) RLE (Run Length Encoding)
Compactao sem perdas que suportada por alguns formatos comuns
de arquivos do Windows.
b) LZW (Lempel-Zif-Welch)
Compactao sem perdas que suportada pelos formatos de arquivo de
linguagem PostScript, PDF, GIF e TIFF. Mais prtica em imagens com reas
grandes de uma nica cor.
c) JPEG (Joint Photographic Experts Group)

Compactao com perdas que suportada pelos formatos de arquivo de
linguagem PostScript, PDF, TIFF e JPEG. Recomendada para imagens de
tons contnuos, como fotografias.
d) CCITT (International Telegraph and Telekeyed Consultive Committee.)

Grupo de tcnicas de compactao sem perdas para imagens em preto
e branco, que suportado pelos formatos de arquivo de linguagem
PostScript e PDF.
e) ZIP
Compactao sem perdas que suportada pelos formatos de arquivo
PDF e TIFF. Assim como o LZW, a compactao ZIP mais eficiente para
imagens que apresentam reas extensas com uma nica cor.

Resumo
Nesta aula voc pde conhecer os conceitos de imagem digital, resoluo,
profundidade, qualidade e compactao de arquivos. Esses conhecimentos
lhe permitiro analisar a melhor soluo para captura e utilizao de ima-
gens para web.
1. Pesquise na internet sobre o assunto Formatos de Arquivo Digital. Ba-
seado nas informaes pesquisadas elabore um texto explicando qual o
melhor formato para ser utilizado na internet. Ao finalizar a atividade,
poste no AVEA.

Aula 4 Edio e tratamento
de imagens
Objetivos
Compreender as principais funcionalidades e opes de edio e

tratamento de imagens de um aplicativo de edio de imagens.
4.1 Editor de imagens

Editores grficos ou editores de imagens so programas que tm como obje-
tivo facilitar a alterao e criao de imagens digitais. Um editor de imagens
tem a funo bsica de modificar caractersticas especficas de uma imagem
como: nvel de branco ou de preto, equilbrio de cores e brilho, nitidez ou
desfoque com o objetivo de melhorar a exibio da imagem ou at mesmo
construir ilustraes digitais. Existem trs tipos de editores que atendem a
necessidades variadas:
a) Raster programas que geram pinturas digitais, ilustraes, editam

ou retocam fotografias. Dentre os mais populares esto: GIMP, Adobe
Photoshop, Corel PhotoPaint, PhotoScape, Pixia, Paint.NET, ArtRage;
b) Vetoriais programas que criam ilustraes por meio de clculos mate-

mticos (vetores) e que podem ser livremente modificados, tendo como
base objetos e curvas; a estes podem ser aplicadas cores de contorno e
preenchimento de acordo com o programa. Entre os mais populares esto:
Inkscape, Corel Draw, Adobe Illustrator, Sodipodi, Macromedia Freehand;
c) Tridimensionais programas que manipulam imagens em trs dimen-

ses como slidos simples (cubos, esferas, cilindros, prismas, pirmides e
outros) so usados em diversas reas tcnicas, bem como na criao de
comerciais e efeitos especiais em filmes. Entre os mais populares esto:
SketchUp, 3ds Max, Blender, Cinema 4D, Maya, Autodesk Softimage.
Nesta aula compreenderemos as principais funes e opes de edio e

tratamento de imagens do editor de imagem Adobe Photoshop.
Aula 4 Edio e tratamento de imagens 49 e-Tec Brasil

4.2 Como instalar o Adobe Photoshop
Passo 1 Baixe o aplicativo Photoshop CS2 verso de teste. Dentro da
pasta dos arquivos do programa, procure pelo arquivo setup.exe e execu-
te-o. Na tela inicial selecione a linguagem de sua preferncia (Portugus)
e clique em Ok.
Figura 4.1: Tela de instalao do Passo 1

Fonte: Adobe Photoshop CS2, 2005
Passo 2 Na tela seguinte, leia atentamente o contrato de licena e, se es-

tiver de acordo, clique em Aceitar.


Passo 3 Clique no boto Install Photoshop CS2.

Passo 4 Nesta tela, voc dever digitar seu nome no campo User Name e
o nome da organizao em Organization. Caso voc no possua um nmero
de srie, selecione a opo Install 30-day trial version. Esta opo lhe dar 30
dias para testar o programa. Quando terminar clique em Next.


Passo 5 Na tela que segue, voc poder alterar o local em que o Adobe
Photoshop CS2 ser instalado. Para isto, clique no boto Change. Quando
terminar clique em Next.

Passo 6 Esta tela permitir que voc selecione os arquivos que deseja
associar ao Adobe Photoshop CS2. No exemplo, no alteramos nenhuma
associao. Clique em Next para prosseguir.

Passo 7 O assistente est pronto para instalar o programa. Clique em Install

para iniciar a instalao do Adobe Photoshop CS2. Aguarde o trmino da
instalao. Isso poder levar alguns minutos.
Ao trmino da instalao, voc poder optar por ler ou no o arquivo

readme (leia-me). Este arquivo contm informaes sobre o programa.
Caso no deseje ler, desmarque a opo Show the readme file. Clique em
Finish para encerrar o assistente de instalao.

Execute o Adobe Photoshop CS2 (o atalho est em programas, dentro do

menu Iniciar). Na tela que segue, clique no boto Continue Trial. A tela de
boas vindas ser exibida. Para que ela no aparea novamente, desmarque a
opo Show this dialog at startup. Clique em Close para prosseguir.
O Adobe Photoshop CS2 possui um aplicativo que verifica atualizaes au-

tomaticamente. Se voc deseja procurar por atualizaes, clique em Ok; do
contrrio, clique em Cancel. Pronto, o Adobe Photoshop CS2 foi instalado!
4.3 rea de trabalho do Photoshop

O programa escolhido para a conceituao bsica de edio de imagens foi
o Adobe Photoshop, em funo de ser um dos softwares de edio de ima-
gens mais conhecidos do mercado e por ser um aplicativo que possui muitos
recursos para essa tarefa.
A B C
D
E
G
F
H
Figura 4.8: rea de trabalho do Adobe Photoshop


A rea de trabalho do Photoshop composta dos seguintes elementos: a)
janela do documento; b) encaixe de painis recolhidos em cones; c) barra
de ttulo do painel; d) barra de menus; e) barra de opes; f) paleta Ferra-
mentas; g) boto Recolher em cones; h) trs grupos de paletas (painis) em
encaixe vertical.
Note que as paletas so arrastveis e podem ser ativadas, esticadas e fecha-

das, da mesma forma que em outros programas do Windows. Alm disso,
uma paleta pode ser arrastada e encaixada em outra janela para fazer con-
junto com outras paletas, que podem ser acessadas atravs de abas.

4.4 Caixa de ferramentas
uma paleta flutuante que engloba as ferramentas necessrias para realizar
aes para transformao e tratamento das imagens.

Mover Pincel (B)
Seleo rpida (W)

Fatia (C)
Converter Ponto
Conta-gotas (I)
Rgua (I)
Seleo direta (A)
Observao (I)
Elipse (U)
Correo (J)
e 3D
Carimbo (S)
Girar objeto 3D (K)
Rolar objeto 3D (K)

Esponja (O) Mo (H)
Zoom (Z)
Figura 4.9: Painel de ferramentas do Adobe Photoshop

Fonte: http://web designertutoriais.com.br/wp-content/uploads/2011/10/ferramentas-photoshop-cs51.jpg.

Para visualizar melhor a figura do painel de ferramentas, acesse o endereo:
http://webdesignertutoriais.com.br/pagina-inicial-photoshop-cs5.html
4.5 Ferramentas de seleo

So recursos para isolar determinadas reas da imagem para aplicao de
comandos com o objetivo de corrigir imperfeies ou aplicao de um
As ferramentas de seleo efeito na imagem.
tm grande importncia para
possibilitar as aes de algumas
ferramentas no Photoshop.
Assista a um vdeo para
entender o funcionamento das
ferramentas de seleo: http://
www.youtube.com/watch?v=bs
DX6hml9L0&feature=related
Figura 4.10: Resumo de ferramentas de seleo

Fonte: http://pt.scribd.com/doc/42187200/Intro-Photoshop
4.6 Ferramentas medidas, comentrios

e transformao
Recursos diversos para manipulao das imagens, oferecendo total autono-
mia para as alteraes desejadas.
Figura 4.11: Resumo de ferramentas de medidas e transformao


4.7 Ferramentas de pintura
Recursos com resultados surpreendentes que auxiliam a criao de ilustra-
es digitais.
Figura 4.12: Resumo de ferramentas de pintura

4.8 Ferramentas de texto e desenho

Recursos para insero de texto nas fotos e criao de elementos vetoriais
dentro de uma fotografia ou imagem.
Figura 4.13: Resumo de ferramentas de texto e desenho


4.9 Ferramentas de correes e retoques
So recursos que permitem realizar aes especiais em imagens, como c-
pia de texturas, duplicao de reas semelhantes, desfocagem, nitidez, sa-
As ferramentas de correo e turao, entre outras.
retoque so os recursos que
podem tornar uma imagem
totalmente diferente da original.
Assista a um vdeo para
entender o seu funcionamento:
http://www.youtube.
com/watch?v=YhqaNlz-
lAE&feature=related
Figura 4.14: Resumo de ferramentas de correo e retoque Parte 2

4.10 Trabalhando com camadas

O recurso de camadas de grande utilidade e visa facilitar o manuseio de vrios
elementos ou imagens sem que uma modificao afete outros elementos. O
funcionamento das camadas pode ser compreendido com a analogia a seguir:
O recurso de camadas o que Imagine que as camadas correspondem a diversas folhas transparentes
permite compor montagens
digitais que, se feitas de que podem receber elementos grficos. Quando dois elementos so colo-
maneira profissional, podem cados em duas camadas distintas, cada um deles pode ser manipulado se-
passar por imagens reais
quando observadas por paradamente, sem interferir no comportamento do outro. Cada camada
pessoas que no visualizaram independente da outra, e um mesmo arquivo pode conter infinitas camadas.
a foto original. Assista a um
vdeo para entender o seu Quando um elemento de uma camada no ocupa toda a rea da imagem,
funcionamento: http://www.
youtube.com/watch?v=ED2Ej- possvel ver as camadas inferiores da imagem mostrando como os elementos
tqgLE&feature=related se sobrepem uns aos outros.

4.11 Estilos efeitos de camada
As camadas tm outra funo interessante, a aplicao de efeitos dinmicos
Um dos recursos mais
que se adaptam s camadas de maneira individual e podem ser editados fa- interessantes do Photoshop
cilmente em tempo real atravs de uma caixa de dilogo. So efeitos como o estilo de camadas. Com
ele podemos aplicar vrios
sombra, brilho, entalhe, borda, gradiente, texturas e contornos. efeitos sobre a mesma camada
para transformao de um
objeto. Entenda melhor esse
4.12 Filtros recurso acessando o tutorial no
endereo a seguir: http://www.
So efeitos pr-configurados que podem ser aplicados diretamente nas ima- photoshoptotal.com.br/dica-de-
gens/camadas. Para conhecer o efeito de cada filtro, ser necessrio test-los photoshop/16/como_utilizar_
estilo_de_camadas
um por um em uma imagem previamente carregada.
O recurso de filtros permite
realizar transformaes
Resumo significativas em imagens,
como por exemplo, fazer uma
Nesta aula, voc pde conhecer os recursos que um software de edio de imagem real transformar-se em
imagem oferece para edio e tratamento de imagens. Aprendeu o con- um desenho ou em um quadro
pintado a leo. Para entender
ceito e a utilizao de algumas das ferramentas disponveis para edio, como aplicar esse efeito, acesso
utilizando como referncia o software consagrado e mais utilizado atual- o tutorial disponvel em: http://
www.tutoriaisphotoshop.
mente, o Photoshop. net/2007/06/efeito-cartoon.html
Acesse o endereo http://photoshopindesign.blogspot.com/2011/03/
efeito-de-texto-usando-estilos-de.html. Siga o passo a passo tutorial e
salve o resultado em um arquivo com o nome arte_digital.psd. Ao finalizar a
atividade, poste no AVEA.

Referncias
DESENVOLVIMENTO PARA WEB. Briefing para desenvolvimento de web sites:
consideraes, dicas e modelos. 2008. Disponvel em:
<http://desenvolvimentoparaweb.com/miscelanea/briefing-para-desenvolvimento-de-
web-sites-consideracoes-dicas-e-modelos>. Acesso em: 1 jun. 2011.
FACULDADE DE CINCIAS DA UNIVERSIDADE DO PORTO. Manual de fotografia digital.

2008. Disponvel em: <http://camaraobscura.fot.br/arquivos/anualdefotografia.pdf>.
Acesso em: 20 ago. 2011.
HISTRIA DA INTERNET. In: WIKIPDIA, a enciclopdia livre. Flrida: Wikimedia Foundation,

2012. Disponvel em: <http://pt.wikipedia.org/w/index.php?title=Hist%C3%B3ria_da_
Internet&oldid=29821952>. Acesso em: 01 jun. 2011.
HTML.NET. Minicurso sobre HTML. 2010. Disponvel em: <http://pt-br.html.net/

tutorials/html/introduction.php>. Acesso em: 2 jun. 2011.
HTML.NET. MiniCurso sobre CSS. 2010. Disponvel em: <http://pt-br.html.net/

tutorials/css/introduction.php>. Acesso em: 2 jun.2011.
HTML STAFF. Como funciona o protocolo FTP. 2006. Disponvel em: <http://www.
htmlstaff.org/ver.php?id=985>. Acesso em: 17 ago. 2011.
INFOWESTER. Publicando seu site: dicas iniciais sobre domnio e hospedagem. 2006.
Disponvel em: <http://www.infowester.com/dominiohost.php>. Acesso em: 17 ago. 2011.
INFO.ABRIL. Curso INFO de Photoshop CS3. 2008. Disponvel em: <http://info.abril.

com.br/dicas/cursos/photoshopcs3/curso.html>. Acesso em: 20 ago. 2011.
IDGNOW. Leitura em tablet mais lenta do que em livro impresso. 2010. Disponvel
em: <http://idgnow.uol.com.br/mercado/2010/07/05/leitura-em-tablet-pode-ser-ate-10-7-
mais-lenta-que-em-livro-impresso/#&panel2-1>. Acesso em: 01 jun. 2011.
KIOSKEA. O que FTP. 2009 Disponvel em: <http://pt.kioskea.net/faq/1983-o-que-e-

ftp>. Acesso em: 17 ago. 2011.

MOREIRA, Jlio Csar Tavares. Dicionrio de termos de marketing. So Paulo: Atlas,
1996.
PROJETOS DE APLICAES WEB. Contedo: objetividade, navegabilidade e visibilidade.

Centro de Computao da Unicamp. 2002. Disponvel em: <http://www.ccuec.unicamp.
br/treinamento_int2004/webpro/arquitetura_informacao/arquitetura_informacao_
conteudo_objetividade.html>. Acesso em: 26 abr. 2012.
RICHARD, Saul Wurman. Ansiedade de Informao. So Paulo: Editora de Cultura,

1999.
ROSENFELD, L. & MORVILLE, P. Information Architecture for the Word Wide Web.
3ed. Sebastopol: OReilly, 2002.
SANTANA, Rafael. Sete itens bsicos de um bom briefing. 2011. Disponvel em:
http://www.joomlaclube.com.br/site/materias/46-revista-da-comunidade/288-7-itens-
basicos-de-um-bom-briefing.html. Acesso em: 1 jun.2011.
SILVA, Maurcio Maujor Samy. Tutorial XHTML. 2011. Disponvel em: <http://maujor.
com/tutorial/xhtml.php>. Acesso em: 2 jun. 2011.
SITE. In: WIKIPDIA, a enciclopdia livre. Flrida: Wikimedia Foundation, 2012. Disponvel em:
<http://pt.wikipedia.org/w/index.php?title=Site&oldid=29633517>. Acesso em: 1 jun. 2011.
SITE. In WIKIPDIA. Histria da Internet. 2011. Disponvel em: <http://pt.wikipedia.

org/wiki/Hist%C3%B3ria_da_Internet>. Acesso em: 1 jun. 2011.
TI MASTER. Sistema de navegao na arquitetura de informao. 2011. Disponvel

em: <http://idgnow.uol.com.br/galerias/historia_office/paginador/pagina_1>.
Acesso em: 2 jun. 2011.
WEBINSIDER. O que arquitetura de informao em websites. 2006. Disponvel em:

<http://webinsider.uol.com.br/2006/04/15/o-que-e-arquitetura-de-informacao-em-websites>
Acesso em: 26.jul.2011.
Referncias 61 e-Tec Brasil

Currculo do professor-autor
Carlos Fbio Rocha Marinho especialista em Design, Publicidade e Marketing

pela Universidade Federal do Amazonas (UFAM) e graduado pela Universidade
Luterana do Brasil (ULBRA) em Gesto em Implantao e Manuteno de Re-
des de Computadores. Atualmente realiza atendimento a empresas prestando
consultoria em Programao Visual, Web design e Trade Marketing.

rede
e-Tec
Brasil
Fundamentos de Web Design

e Formatao de Imagem
Curso Tcnico em Manuteno e

Suporte em Informtica

Mover Pincel (B)
Seleo rpida (W)

Fatia (C)
Converter Ponto
Conta-gotas (I)
Rgua (I)
Seleo direta (A)
Observao (I)
Elipse (U)
Correo (J)
e 3D
Carimbo (S)
Girar objeto 3D (K)
Rolar objeto 3D (K)

Esponja (O) Mo (H)
Zoom (Z)
rede
e-Tec
Brasil

Fund Webd Form Img PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Fund Webd Form Img PDF

Enviado por

Direitos autorais:

Formatos disponíveis

rede

Fundamentos de Web Design

Curso Tcnico em Manuteno e

Viso geral do painel Ferramentas

B Ferramentas Corte e Fatia Caneta (P)

Desfoque Girar cmera 3D (N)

Secretaria de Educao a Distncia

Centro de Educao Tecnolgica do Amazonas

Coordenao Institucional Design Instrucional

Comisso de Acompanhamento e Validao Diagramao

Coordenao do Projeto Reviso

Coordenao de Design Instrucional Projeto Grfico

Catalogao na fonte elaborada pela DECTI da Biblioteca

M338f Marinho, Carlos Fbio Rocha

Bem-vindo ao e-Tec Brasil!

A educao a distncia no nosso pas, de dimenses continentais e grande

O Ministrio da Educao, as instituies pblicas de ensino tcnico, seus

Os cones so elementos grficos utilizados para ampliar as formas de

Ateno: indica pontos de maior relevncia no texto.

Saiba mais: oferece novas informaes que enriquecem o

Glossrio: indica a definio de um termo, palavra ou expresso

Mdias integradas: sempre que se desejar que os estudantes

Atividades de aprendizagem: apresenta atividades em

Aula 1 Internet e web design 15

Aula 2 Edio e publicao de sites 27

O objetivo deste caderno apresentar conceitos bsicos e auxili-lo da melhor

No desenvolvimento desta disciplina, sero propostas vrias atividades rela-

Essas atividades sero de grande importncia na construo dos conceitos

Bom estudo e muito sucesso!

O advento da internet trouxe-nos a realidade de novas profisses, nunca

Dominar os conceitos apresentados neste curso oferecer ao aluno possibilida-

O conhecimento sobre imagens permitir ao aluno entender as possibilida-

Disciplina: Fundamentos de Web Design e Formatao de Imagens (carga

Ementa: Breve histrico sobre a origem da internet, apresentar e definir tipos

e-Tec Brasil 14 Fundamentos de Web Design e Formatao de Imagem

Aprender conceitos bsicos sobre internet website e web design.

Aprender os elementos que compem um projeto de web design.

1.1.1 Breve histria da internet

Um sistema tcnico denominado Protocolo de Internet (Internet Protocol)

Aula 1 Internet e web design 15 e-Tec Brasil

Aprenda um pouco mais sobre 1.1.2 A internet no Brasil

O conjunto de todos os sites existentes compe a World Wide Web. Uma

Batizada dessa forma, a web e seus websites tornaram-se mundialmente

e-Tec Brasil 16 Fundamentos de Web Design e Formatao de Imagem

a) Institucional muitas empresas usam seus sites como ponto de con-

b) Informaes veculos de comunicao como jornais, revistas e agn-

c) Aplicaes existem sites cujo contedo consiste de ferramentas de au-

d) Armazenagem de informaes alguns sites funcionam como bancos

e) Comunitrio so os sites que servem para a comunicao de usurios

f) Portais so chamados de portais os sites que congregam contedos

Aula 1 Internet e web design 17 e-Tec Brasil

1. Sites estticos so formados por pginas com contedos que sofrem

2. Sites dinmicos este tipo de site normalmente utiliza-se de uma lin-

3. Sites mistos existem casos em que se necessita das duas modalidades

1.3 Servio de web design

e-Tec Brasil 18 Fundamentos de Web Design e Formatao de Imagem

A captao de servio tambm outro assunto importante sobre o qual ain-

Administrar todas essas informaes e ainda desenvolver o site propriamen-

1.4 Orientaes para fazer um site

Aula 1 Internet e web design 19 e-Tec Brasil

c) Evite informao em excesso pginas com muita informao preju-

d) Em construo? Jamais! nunca coloque links no seu site que levem

e) Mantenha o seu site atualizado modifique periodicamente o con-