Apostila Web Design Formatacao Imagem 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
Mover
Letreiro retangular (M)
Letreiro elptico (M)
Letreiro de coluna nica
Letreiro de linha nica
Lao (L)
Lao poligonal (L)
Lao magntico (L)
Seleo rpida (W)
Varinha mgica (W)
A
B
C
B Ferramentas Corte e Fatia

Corte demarcado (C)
Fatia (C)
Seleo de Fatia (C)
D
C
C Ferramentas de medio
Conta-gotas (I)
Classificador de cores (I)
Rgua (I)
Observao (I)
Contagem (I)
D Ferramentas de retoque
Pincel de recuperao para

manchas (J)
Pincel de recuperao (J)
Correo (J)
Olhos vermelhos (J)
Carimbo (S)
Carimbo de padro (S)
Borracha (E)
Borracha de plano de fundo (E)
Borracha mgica (E)
Desfoque
Nitidez
Borrar
Subexposio (O)
Superexposio (O)
Esponja (O)
rede
e-Tec
Brasil
Indica a ferramenta padro
E Ferramentas de pintura
Pincel (B)
Lpis (B)
Substituio de cor (B)
Pincel Misturador (B)
Pincel do Histrico (Y)
Pincel HIstria da Arte (Y)
Gradiente (G)
Lata de tinta (G)
F Ferramentas Desenho e Tipo

Caneta (P)
Caneta de forma livre (P)
Adicionar Ponto de Ancoragem
Converter Ponto
Texto horizontal (T)
Texto vertical (T)
Mscara de texto horizontal (T)
Mscara de texto vertical (T)
Seleo de demarcador (A)
Seleo direta (A)
Retngulo (U)
Retngulo arredondado (U)
Elipse (U)
Polgono (U)
Linha (U)
Forma personalizada (U)
G Ferramentas de navegao
e 3D
Girar objeto 3D (K)
Rolar objeto 3D (K)
Deslocar objeto 3D (K)
Deslizar objeto 3D (K)
Escalar objeto 3D (K)
Girar cmera 3D (N)
Rolar cmera 3D (N)
Deslocar cmera 3D (N)
Mover cmera 3D (N)
Aplicar zoom na cmera 3D (N)
Mo (H)
Girar visualizao (R)
Zoom (Z)
*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
CETAM
Coordenao Institucional
Adriana Lisboa Rosa/CETAM
Laura Vicua Velasquez/CETAM
Coordenao do Curso
Helder Cmara Viana/CETAM
Professor-autor
Carlos Fbio Rocha Marinho/CETAM
Comisso de Acompanhamento e Validao
Universidade Federal de Santa Catarina UFSC
Coordenao de Design Grfico

Andr Rodrigues/UFSC
Design Instrucional
Juliana Leonardi/UFSC
Web Master
Rafaela Lunardi Comarella/UFSC
Web Design
Beatriz Wilges/UFSC
Mnica Nassar Machuca/UFSC
Coordenao Institucional
Araci Hack Catapan/UFSC
Diagramao
Brbara Zardo/UFSC
Juliana Tonietto/UFSC
Marlia C. Hermoso/UFSC
Nathalia Takeuchi/UFSC
Coordenao do Projeto
Silvia Modesto Nassar/UFSC
Reviso
Jlio Csar Ramos/UFSC
Coordenao de Design Instrucional

Beatriz Helena Dal Molin/UNIOESTE e UFSC
Projeto Grfico
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 modalidade a distncia. O programa resultado de uma parceria entre o Ministrio 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 ensino 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 autonomia 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
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.
e-Tec Brasil
Sumrio
Palavra do professor-autor
Apresentao da disciplina
11
Projeto instrucional
13
Aula 1 Internet e web design

1.1 A internet
15
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

2.1 Um esqueleto chamado HTML
27
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
3.1 Fotografia digital
41
41
3.2 Gerao da imagem digital
41
3.3 Tipos de compactao
46
e-Tec Brasil
Aula 4 Edio e tratamento de imagens

4.1 Editor de imagens
e-Tec Brasil
49
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
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 aumentar seu conhecimento atravs de pesquisas, leitura, prticas e discusses.
No desenvolvimento desta disciplina, sero propostas vrias atividades relacionadas 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 juntando 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
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 desenvolvido 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 possibilidades 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 possibilidades 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 algumas 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 transferncia 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, comentrios, transformao, pintura, texto, desenho, correo e retoques. Apresentar o recurso de camadas e de efeitos de camadas. Apresentao dos filtros
predefinidos para alterao imediata de imagens.
AULA
OBJETIVOS DE
APRENDIZAGEM
MATERIAIS
CARGA
HORRIA
(horas)
Hiperdocumento apresentando
uma breve histria da internet e
o protocolo TCP/IP.
1.Internet e web
design.
Aprender conceitos bsicos sobre internet website e web design.

Aprender os elementos que compem
um projeto de web design.
Vdeo apresentando a profisso

web design e a arquitetura da
informao.
10
Apresentao de hiperligaes
para outros sites na internet
sobre o tema.
2. Edio e publicao de sites.
Conhecer conceitos bsicos sobre as

linguagens de marcao e formatao de
pginas web.
Aprender o processo de publicao de
pginas web.
as linguagens HTML e CSS;
Vdeos apresentando editores
HTML, tutoriais de instalao e
conceitos sobre domnio hospedagem e acesso via FTP.
20
13
e-Tec Brasil
AULA
OBJETIVOS DE
APRENDIZAGEM
Aprender conceitos sobre imagem digital
e suas caractersticas.
3.A imagem.
Conhecer os formatos existentes de
armazenamento de imagens digitais.
4. Edio e tratamento de imagens.
e-Tec Brasil
14
Compreender as principais funcionalidades e opes de edio e tratamento de

imagens de um aplicativo de edio de
imagens.
MATERIAIS
Vdeos apresentando conceitos

sobre fotografia digital.
CARGA
HORRIA
(horas)
10
o painel de ferramentas de um
editor de imagens.
Vdeos apresentando as ferramentas seleo e retoque e os
recursos de camadas e filtros de
um editor de imagens.
20
Fundamentos de Web Design e Formatao de Imagem

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 antagnicos exerciam enorme controle e influncia no mundo, qualquer mecanismo, 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 comunicamse 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
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
a histria da internet. Acesse
o vdeo didtico disponvel no
endereo: http://www.youtube.
com/watch?v=yyY_392Tn7Q
O protocolo TCP/IP o
responsvel pela troca
de informaes entre os
computadores que se interligam
atravs da internet. Para
entender o funcionamento
desse sistema de comunicao,
acesse o endereo: http://www.
clubedohardware.com.br/
artigos/1351
1.1.2 A internet no Brasil

No Brasil, os primeiros embries de rede surgiram em 1988 e ligavam universidades do Brasil a instituies nos Estados Unidos. No mesmo ano, o IBASE
comeou a testar o ALTERNEX, o primeiro servio brasileiro de internet no
acadmica e no governamental. Inicialmente o ALTERNEX era restrito aos
membros do IBASE e associados. Somente em 1992 foi aberto ao pblico.
1.2 O que e para que serve um website

Voc conhece como site, mas ele tem outros nomes: stio, website e site
eletrnico. um conjunto formado por vrias pginas da web ou hipertextos, 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 criada, 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 (tambm 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 hipertextos: website.
Batizada dessa forma, a web e seus websites tornaram-se mundialmente
famosos e seus nomes empregados em diversas lnguas. Em ingls foi necessrio 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
e-Tec Brasil
16
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 contato 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 tambm 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 agncias 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 automatizao, produtividade e compartilhamento, substituindo aplicaes
de desktop. Podem ser processadores de texto, planilhas eletrnicas, editores 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 maioria dos servios da internet num mesmo local.
17
e-Tec Brasil
1.2.1 Tipos de website

Os sites podem ser classificados em estticos, dinmicos ou mistos, conforme sua estrutura.
1. Sites estticos so formados por pginas com contedos que sofrem
pouca ou nenhuma alterao em um longo perodo de tempo: trs meses, 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 linguagem de programao, alm do HTML puro, para inserir, alterar e excluir 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 arquitetura 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 conhecimentos sobre alguma linguagem de programao, como por exemplo PHP.
E para isso ter que ter estudado lgica de programao.
e-Tec Brasil
18
Se considerarmos que a internet um meio de comunicao, a coisa complica 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 ainda 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 propriamente 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.
2.
3.
4.
5.
6.
7.
8.
9.
Publicidade
Direo de arte
Designer para criao
Designer para animao e multimdia
Redao e reviso
Programao
Marketing digital
Atendimento
Prospeco e vendas
Algumas empresas que no possuem todos esses profissionais em seu quadro

funcional optam por contratar freelancers para suprir essa necessidade temporria, dependendo do tamanho e do valor de cada projeto de websdesign.
Freelance
trabalho avulso realizado
por profissional autnomo,
geralmente para empresa
jornalstica, agncia de
publicidade, editora, entre
outros; Freelancer o
profissional que realiza freelance.
1.4 Orientaes para fazer um site

No momento da construo de um website importante considerar alguns
pontos fundamentais na estruturao do layout para apresentao dos elementos de comunicao que tero a funo de despertar no visitante o
interesse de navegar pelas pginas internas e manter-se no site.
Assista ao vdeo sobre a

profisso de web design
acessando o endereo:
http://www.youtube.com/
watch?v=h_t_O3Kma7A
19
e-Tec Brasil
a) Seja simples manter a simplicidade no significa ter um site feio, significa reduzir ao mximo a quantidade de informaes visuais desnecessrias, 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 prejudicam 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 informao 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 construo. Nada pior do que frustrar o visitante vido por informaes.
e) Mantenha o seu site atualizado modifique periodicamente o contedo 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 melhor 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.
e-Tec Brasil
20
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, comunicar. Para haver comunicao, trs coisas principais precisam ocorrer:
1) todas as letras precisam ser lidas e compreendidas; 2) os textos precisam ser claros e objetivos; 3) os desenhos (imagens, cones, ilustraes e
grafismos) precisam ser vistos claramente e os seus propsitos percebidos. 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 perguntas 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.
21
e-Tec Brasil
1.5.2 Tipos de briefing

Em algumas situaes pode ser difcil encontrar-se pessoalmente com o potencial 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 tradicional quando o assunto web. Enviar as perguntas do briefing por e-mail
e receber as respostas tambm por e-mail. Entretanto, a pessoa entrevistada 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 escolha adequado;
d) Sistema web de briefings para desenvolvedores web bastante simples montar um sistema on-line para realizao de briefing. Um exemplo
seria definir um esquema de IDs para os clientes e programar um formulrio 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 videoconferncia, fazer um acompanhamento com o cliente para auxili-lo a
respond-las. Ou ainda elaborar um sistema on-line para a pessoa responder s perguntas do briefing e enviar as respostas para o seu e-mail. Recorra sua criatividade e certamente bons resultados sero encontrados.
e-Tec Brasil
22
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 interessante, nessa fase inicial, conversar bastante com o cliente e tentar captar, 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 informaes 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 aprendido 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 tempo maior para esse segundo encontro; certamente a pessoa ficar satisfeita
com sua sinceridade e feliz por poder fornecer mais informaes que, consequentemente, 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.
23
e-Tec Brasil
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 informao 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 representao, 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 navegar ou mover-se no espao informacional, por exemplo: navegao
global, navegao local.
d) Sistema de busca (Search system): determina as perguntas que o usurio pode fazer e o conjunto de respostas que ir obter.
Assista ao vdeo sobre

arquitetura da informao
para web design, acessando o
endereo: http://www.youtube.
com/watch?v=5ha3B25LRXg
Para entender sistema de
navegao, acesse o endereo:
http://www.timaster.com.br/
revista/artigos/main_artigo.
asp?codigo=1229&pag=2
e-Tec Brasil
1.7 Diviso e alocao de contedo

De acordo com as definies da pgina de Projetos de aplicaes web (2002),
uma boa arquitetura de design causa um timo primeiro impacto ao visitante; alm de boa ilustrao, qualidade em animaes e fotos, a aplicao web
deve ter contedo preciso e coerente com a arquitetura de informao:
a) A produo dos textos das pginas web no pode ter o carter de autoria, uma vez que o autor no est escrevendo um livro ou artigo de
opinio.
24
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,
extradas da pgina Projetos de aplicaes web (2002):
a) Objetividade
Website wireframe facilita

muito a criao de layouts para
pginas web. Entenda este
recurso, acessando o endereo:
http://pt.wikipedia.org/wiki/
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 disponibilizados 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 comprometer 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 gramatical 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 confundir 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.
25
e-Tec Brasil
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 design, dicas sobre construo de sites e tipos de site. Aprendeu tcnicas de
coleta de informaes para determinar a funcionalidade do site, gerar contedo 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 palavras 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 protocolos. Ao finalizar a atividade, poste no AVEA.
e-Tec Brasil
26

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 colegas. 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 parnteses 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:
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.
XHTML (eXtensible Hypertext

Markup Language) dever ser
o sucessor do HTML. uma
reformulao da linguagem de
marcao HTML, que combina
as tags de marcao HTML com
regras da XML. Esse processo de
padronizao tem o objetivo de
permitir a exibio de pginas
web em diversos dispositivos
como: televiso, palm, celular,
entre outros, para ampliar a
acessibilidade. Para aprender
mais sobre essa linguagem,
acesse: http://maujor.com/
tutorial/xhtml.php
Cada etiqueta (TAG) um comando que pode receber atributos possveis e

seus valores correspondentes. Um exemplo o atributo SIZE que pode ser
usado com o comando FONT, com o HR, mas que no pode ser usado com
o comando BODY. Isso quer dizer que devemos saber quais so os atributos
e valores possveis para cada comando para poder utiliz-los corretamente.
Uma propriedade importante dos documentos HTML a possibilidade de
fazer hiperligaes. Para isso usa-se a etiqueta <a> (do ingls, anchor). Esta
tem os atributos: href que define o alvo da hiperligao (que pode ser um
endereo da web, um link para baixar um arquivo ou um endereo de e-mail
para envio de mensagens) ou name (que exibe uma parte da mesma pgina
que est sendo acessada), como mostram os exemplos a seguir:
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, permitindo a sobreposio de texto sobre texto ou texto sobre imagens.
e-Tec Brasil
28
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, impressora, 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 parecidos. 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 propriedade 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.
29
e-Tec Brasil
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 recomendado, 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.
e-Tec Brasil
30
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 indicado corretamente no atributo HREF; caso contrrio, no ir funcionar. Essa
inscrio deve ser inserida entre as tags <HEADER> </HEADER> do documento HTML, para que funcione, conforme mostrado a seguir:
A CSS uma linguagem

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.
style.css
Mudanas na folha de
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
31
e-Tec Brasil
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 Microsoft 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 ++
O NotePad++ possui um recurso

de sinalizao para incio e fim
de TAG que facilita construo
e alterao de cdigos HTML
e CSS. Acesse o endereo a
seguir e aprenda a instalar o
NotePad++ : http://vimeo.
com/27332335
Notepad++ um editor de cdigos-fonte completo e que suporta as mais

diversas linguagens de programao. uma tima alternativa ao bloco de
notas porque possui recursos para facilitar o trabalho como: sistema de busca e substituio, interface funcional, navegao por abas, edio avanada
e autocompletar para comandos que esto sendo escritos.
O programa possui suporte s linguagens C, C++, Java, C#, XML, HTML,
PHP, Javascript, ASCII art, doxygen, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, 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
e-Tec Brasil
32
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 disponveis na internet.
2.3.2 Dreamweaver
O software Dreamweaver, da fabricante Macromedia, a ferramenta de desenho 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
ferramentas de interao que facilitam diversas atividades do processo de criao. Mesmo que seja experiente, um desenvolvedor web sempre encontrar nesse programa razes para utiliz-lo, sobretudo no que se refere produtividade.
O software cumpre perfeitamente o objetivo de desenhar pginas com aspecto
profissional e suporta grande quantidade de tecnologias. Entre as funes aceitas
para manipulao no programa, destaca-se a edio de diversos cdigos como:
O Dreamweaver , atualmente,
o programa mais usado em
todo o mundo para fazer
pginas para a internet. fcil
perceber por que. Ele um
programa WYSIWYG (what
you see is what you get), com
uma interface grfica intuitiva;
por isso, ganha mais adeptos a
cada dia. Acesse o endereo a
seguir e assista ao vdeo sobre
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 manuseio 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 ambiente de design baseado em CSS, um editor de cdigo e editor visual integrados, 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.
33
e-Tec Brasil
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 seguinte 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 nomearemos 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.
e-Tec Brasil
34
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 documento 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 texto de origem. Uma pgina web composta por textos, imagens, que podem
ser fotos ou grficos animados, e outros recursos multimdia, como msica, 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 podermos 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 oferecer 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 domnio agregado aos seus servios. Tal provedor no tem nenhum vnculo
formalizado com o Registro.br, mas seus clientes podem interagir diretamente com esse sistema para atualizar dados dos seus domnios e entidades, 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.
35
e-Tec Brasil
Assista a um vdeo para entender

um pouco mais sobre domnio
e hospedagem no endereo a
seguir: http://www.youtube.
com/watch?v=vkhWXz0I7pY
d) Domnio o nome que compe o endereo do site. Voc precisa registrar um domnio pelo perodo mnimo de um ano. Aps esse perodo, sua
anuidade deve ser renovada; caso contrrio, o domnio ficar disponvel para
outra pessoa ou empresa registrar. Tambm possvel contar com a opo
de registrar ou renovar o domnio a cada dois anos ou mais.
e) Registro de domnio para adquirir um domnio voc deve possuir um
CNPJ (empresa) ou CPF (pessoa fsica) e efetuar a compra pelo site registro.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) oferece 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. Entretanto, o acesso annimo restrito a diretrios pblicos que foram especificados 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 prprio arquivo em questo. Como exemplo das facilidades, podemos citar a listagem 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 autenticao e outro de permisso. A autenticao verificada atravs de um cdigo de usurio e senha; j a permisso dada em nvel de diretrios e arquivos.
e-Tec Brasil
36
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
FTP no executa todo o processamento necessrio para cada conexo. A comunicao FTP utiliza uma conexo para o controle e outra (ou vrias) para
transferncia de arquivos. A primeira conexo (chamada de conexo de controle FTP-control) utilizada para autenticao e comandos; j a segunda
(chamada de conexo de dados FTP-data), utilizada para a transferncia
de informaes e arquivos em questo.
Os sites so acessados usando

o protocolo HTTP, com a ajuda
dos navegadores. FTP, como
o nome indica, usada para
transferncia de arquivos de um
computador para outro. um
protocolo menos popular devido
ao pequeno nmero de pessoas
que o utilizam. Assista a um
vdeo para entender um pouco
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 transferncia 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.
1
Interpretador de
Protocolo do
Servidor
4
Sistema de
Arquivos
Processo de
Transferncia de
Dados do
Servidor
Servidor FTP
2
Conexo de
Controle
3
Conexo de
Dados
Interface com
Usurio
Um cliente de FTP muito

conhecido e gratuito o FlieZila
da Mozila. Assista a um vdeo
para aprender a baixar, instalar
e configurara esse software no
endereo a seguir: http://www.
weeby.com.br/2010/08/15/
saiba-como-baixar-instalar-ecomecar-a-usar-o-cliente-deftp-filezilla/
Usurio
Interpretador de
Protocolo do
Usurio
Processo de
Transferncia de
Dados do
Usurio
Cliente FTP
Sistema de
Arquivos
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.
37
e-Tec Brasil
Resumo
Nesta aula voc aprendeu a linguagem de marcao HTML e sua evoluo para XHTML. Aprendeu o CSS, que uma linguagem complementar
ao HTML e que oferece grandes possibilidades de manipulao e personalizao 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 adquiridos, monte uma pgina web escrevendo o cdigo abaixo. A imagem: sao_paulo.jpg, est disponvel para download no AVEA. Ao finalizar a atividade, poste no AVEA.
e-Tec Brasil
38
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 navegador 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.
39
e-Tec Brasil
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 resultados instantaneamente, no requerem os custos de filme e revelao e so
adequadas para edio por software, pois no h perda de dados, como
quando se tem que digitalizar uma imagem do papel. Podem ser armazenadas e enviadas pela internet.
Assista ao vdeo sobre fotografia

digital no endereo: http://www.
youtube.com/watch?v=VApXvp
QVv7M&feature=related
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. Cmeras 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 enorme de informao para cada foto, certo? Bem, a cmera aguenta e foi projetada 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 alinhados 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 quantidade, 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.
e-Tec Brasil
42
Pixels
Imagem
Resoluo
Alta
Resoluo
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/fotografia_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
1
2
3
2
1
2
3
2
1
2
3
2
1
0
3
2
1
0
0
0=
1=
2=
3=
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 quantas 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 especificar 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.
Aula 3 A imagem
43
e-Tec Brasil
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 normalmente 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)
Monochrome
CGA
16
EGA
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

e-Tec Brasil
44
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 algoritmos matemticos, uma imagem similar original, mas cujo tamanho (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
Aula 3 A imagem
45
e-Tec Brasil
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 compresso possa ser aceitvel na maioria dos casos.
Os algoritmos sem-perda utilizam, geralmente, o algoritmo LZW (LempelZiv-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.
e-Tec Brasil
46
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 imagens para web.
1. Pesquise na internet sobre o assunto Formatos de Arquivo Digital. Baseado nas informaes pesquisadas elabore um texto explicando qual o
melhor formato para ser utilizado na internet. Ao finalizar a atividade,
poste no AVEA.
Aula 3 A imagem
47
e-Tec Brasil
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 objetivo 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 matemticos (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 dimenses 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.
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 execute-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 estiver de acordo, clique em Aceitar.

e-Tec Brasil
50
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.

51
e-Tec Brasil
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.
e-Tec Brasil
52

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 automaticamente. 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 imagens mais conhecidos do mercado e por ser um aplicativo que possui muitos
recursos para essa tarefa.
A
D
C
G
F
H
Figura 4.8: rea de trabalho do Adobe Photoshop

53
e-Tec Brasil
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 Ferramentas; 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 fechadas, da mesma forma que em outros programas do Windows. Alm disso,
uma paleta pode ser arrastada e encaixada em outra janela para fazer conjunto com outras paletas, que podem ser acessadas atravs de abas.
e-Tec Brasil
54
4.4 Caixa de ferramentas

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

A
Mover
Lao (L)
Lao poligonal (L)
Lao magntico (L)
Seleo rpida (W)
Varinha mgica (W)
A
B
C
Pincel (B)
Lpis (B)
Gradiente (G)
Lata de tinta (G)

Caneta (P)
Converter Ponto
Texto vertical (T)
Seleo direta (A)
Retngulo (U)
Elipse (U)
Polgono (U)
Linha (U)

Corte demarcado (C)
Fatia (C)
Seleo de Fatia (C)
D
C
Conta-gotas (I)
Rgua (I)
Observao (I)
Contagem (I)

manchas (J)
Correo (J)
Olhos vermelhos (J)
Carimbo (S)
Borracha (E)
Borracha mgica (E)
Desfoque
Nitidez
Borrar
Subexposio (O)
Superexposio (O)
Esponja (O)
e 3D
Girar objeto 3D (K)
Rolar objeto 3D (K)
Girar cmera 3D (N)
Rolar cmera 3D (N)
Mover cmera 3D (N)
Mo (H)
Zoom (Z)
Somente Extended
Figura 4.9: Painel de ferramentas do Adobe Photoshop

Fonte: http://web designertutoriais.com.br/wp-content/uploads/2011/10/ferramentas-photoshop-cs51.jpg.
55
e-Tec Brasil
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

As ferramentas de seleo
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
So recursos para isolar determinadas reas da imagem para aplicao de

comandos com o objetivo de corrigir imperfeies ou aplicao de um
efeito na imagem.
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 autonomia para as alteraes desejadas.
Figura 4.11: Resumo de ferramentas de medidas e transformao

e-Tec Brasil
56
4.7 Ferramentas de pintura

Recursos com resultados surpreendentes que auxiliam a criao de ilustraes 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

57
e-Tec Brasil
4.9 Ferramentas de correes e retoques

As ferramentas de correo e
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=YhqaNlzlAE&feature=related
So recursos que permitem realizar aes especiais em imagens, como cpia de texturas, duplicao de reas semelhantes, desfocagem, nitidez, saturao, entre outras.
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
permite compor montagens
digitais que, se feitas de
maneira profissional, podem
passar por imagens reais
quando observadas por
pessoas que no visualizaram
a foto original. Assista a um
vdeo para entender o seu
funcionamento: http://www.
youtube.com/watch?v=ED2EjtqgLE&feature=related
e-Tec Brasil
Imagine que as camadas correspondem a diversas folhas transparentes

que podem receber elementos grficos. Quando dois elementos so colocados em duas camadas distintas, cada um deles pode ser manipulado separadamente, sem interferir no comportamento do outro. Cada camada
independente da outra, e um mesmo arquivo pode conter infinitas camadas.
Quando um elemento de uma camada no ocupa toda a rea da imagem,
possvel ver as camadas inferiores da imagem mostrando como os elementos
se sobrepem uns aos outros.
58
4.11 Estilos efeitos de camada

As camadas tm outra funo interessante, a aplicao de efeitos dinmicos
que se adaptam s camadas de maneira individual e podem ser editados facilmente em tempo real atravs de uma caixa de dilogo. So efeitos como
sombra, brilho, entalhe, borda, gradiente, texturas e contornos.
4.12 Filtros
So efeitos pr-configurados que podem ser aplicados diretamente nas imagens/camadas. Para conhecer o efeito de cada filtro, ser necessrio test-los
um por um em uma imagem previamente carregada.
Resumo
Nesta aula, voc pde conhecer os recursos que um software de edio de
imagem oferece para edio e tratamento de imagens. Aprendeu o conceito e a utilizao de algumas das ferramentas disponveis para edio,
utilizando como referncia o software consagrado e mais utilizado atualmente, o Photoshop.
Um dos recursos mais

interessantes do Photoshop
o estilo de camadas. Com
ele podemos aplicar vrios
efeitos sobre a mesma camada
para transformao de um
objeto. Entenda melhor esse
recurso acessando o tutorial no
endereo a seguir: http://www.
photoshoptotal.com.br/dica-dephotoshop/16/como_utilizar_
estilo_de_camadas
O recurso de filtros permite
realizar transformaes
significativas em imagens,
como por exemplo, fazer uma
imagem real transformar-se em
um desenho ou em um quadro
pintado a leo. Para entender
como aplicar esse efeito, acesso
o tutorial disponvel em: http://
www.tutoriaisphotoshop.
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.
59
e-Tec Brasil
Referncias
DESENVOLVIMENTO PARA WEB. Briefing para desenvolvimento de web sites:
consideraes, dicas e modelos. 2008. Disponvel em:
<http://desenvolvimentoparaweb.com/miscelanea/briefing-para-desenvolvimento-deweb-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-7mais-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-eftp>. Acesso em: 17 ago. 2011.
e-Tec Brasil
60
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-itensbasicos-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 Redes de Computadores. Atualmente realiza atendimento a empresas prestando
consultoria em Programao Visual, Web design e Trade Marketing.
e-Tec Brasil
62
rede
e-Tec
Brasil
Fundamentos de Web Design

e Formatao de Imagem
Curso Tcnico em Manuteno e

Suporte em Informtica

A
Mover
Lao (L)
Lao poligonal (L)
Lao magntico (L)
Seleo rpida (W)
Varinha mgica (W)
A
B
C

Corte demarcado (C)
Fatia (C)
Seleo de Fatia (C)
D
C
Conta-gotas (I)
Rgua (I)
Observao (I)
Contagem (I)

manchas (J)
Correo (J)
Olhos vermelhos (J)
Carimbo (S)
Borracha (E)
Borracha mgica (E)
Desfoque
Nitidez
Borrar
Subexposio (O)
Superexposio (O)
Esponja (O)
rede
e-Tec
Brasil
Pincel (B)
Lpis (B)
Gradiente (G)
Lata de tinta (G)

Caneta (P)
Converter Ponto
Texto vertical (T)
Seleo direta (A)
Retngulo (U)
Elipse (U)
Polgono (U)
Linha (U)
e 3D
Girar objeto 3D (K)
Rolar objeto 3D (K)
Girar cmera 3D (N)
Rolar cmera 3D (N)
Mover cmera 3D (N)
Mo (H)
Zoom (Z)
Somente Extended

Apostila Web Design Formatacao Imagem 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

Apostila Web Design Formatacao Imagem 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

Pincel de recuperao para

Indica a ferramenta padro

F Ferramentas Desenho e Tipo

*Os atalhos do teclado aparecem entre parnteses

Presidncia da Repblica Federativa do Brasil

Centro de Educao Tecnolgica do Amazonas

Coordenao de Design Grfico

Coordenao de Design Instrucional

Catalogao na fonte elaborada pela DECTI da Biblioteca

Marinho, Carlos Fbio Rocha

1.Sites da Web Projetos. 2. Computao grfica.

Apresentao e-Tec Brasil

Saiba mais: oferece novas informaes que enriquecem o

Aula 1 Internet e web design

1.2 O que e para que serve um website

1.3 Servio de web design

1.4 Orientaes para fazer um site

1.5 Briefing para desenvolvimento de websites

1.6 O que arquitetura de informao em websites?

1.7 Diviso e alocao de contedo

Aula 2 Edio e publicao de sites

2.2 Entendendo o que CSS

2.3 Editores de HTML

2.4 Gerando uma pequena pgina HTML

2.5 Publicar uma pgina na web

2.6 Protocolo de FTP

2.7 Cliente de FTP

3.2 Gerao da imagem digital

3.3 Tipos de compactao

Aula 4 Edio e tratamento de imagens

4.2 Como instalar o Adobe Photoshop

4.3 rea de trabalho do Photoshop

4.4 Caixa de ferramentas

4.5 Ferramentas de seleo

4.6 Ferramentas medidas, comentrios e transformao

4.7 Ferramentas de pintura

4.8 Ferramentas de texto e desenho

4.9 Ferramentas de correes e retoques

4.10 Trabalhando com camadas

4.11 Estilos efeitos de camada

Aprender conceitos bsicos sobre internet website e web design.

Vdeo apresentando a profisso

2. Edio e publicao de sites.

Conhecer conceitos bsicos sobre as

4. Edio e tratamento de imagens.

Compreender as principais funcionalidades e opes de edio e tratamento de

Vdeos apresentando conceitos

Fundamentos de Web Design e Formatao de Imagem

Aula 1 Internet e web design

1.1.1 Breve histria da internet

Aula 1 Internet e web design

ou menos anrquica. basicamente isto que consiste a internet, que no

1.1.2 A internet no Brasil

1.2 O que e para que serve um website

Fundamentos de Web Design e Formatao de Imagem

Aula 1 Internet e web design

1.2.1 Tipos de website

1.3 Servio de web design