Apostila FundDesWeb PDF

Fundamentos do
Desenvolvimento Web
Keila Brito
Curso Tcnico em Informtica
Fundamentos do
Desenvolvimento Web
Keila Brito
Colatina - ES
2011
Presidncia da Repblica Federativa do Brasil

Ministrio da Educao
Secretaria de Educao a Distncia
Instituto Federal do Esprito Santo

Este Caderno foi elaborado em parceria entre o Instituto Federal do Esprito Santo
e a Universidade Federal de Santa Catarina para o Sistema Escola Tcnica Aberta
do Brasil e-Tec Brasil.
Equipe de Elaborao
Instituto Federal do Esprito Santo IFES
Coordenao de Design Grfico

Andr Rodrigues/UFSC
Coordenao Institucional
Guilherme Augusto De Morais Pinto/IFES
Joo Henrique Caminhas Ferreira/IFES
Design Instrucional
Gustavo Pereira Mateus/UFSC
Coordenao do Curso
Allan Francisco Forzza Amaral/IFES
Web Master
Rafaela Lunardi Comarella/UFSC
Professora-autora
Keila Brito/IFES
Web Design
Beatriz Wilges/UFSC
Mnica Nassar Machuca/UFSC
Comisso de Acompanhamento e Validao

Universidade Federal de Santa Catarina UFSC
Coordenao Institucional
Araci HackCatapan/UFSC
Diagramao
Brbara Zardo/UFSC
Juliana Tonietto/UFSC
Marlia C. Hermoso/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
B862f Brito, Keila

Fundamentos do Desenvolvimento Web: Curso Tcnico em
Informtica / Keila Brito. Colatina: CEAD / Ifes, 2011.

124 p. : il.

Inclui Bibliografia
ISBN: 978-85-62934-04-9

1. Sites da Web - Desenvolvimento. 2. HTML (Linguagem) de
marcao de documento). 3. Folhas de estilo. 4. Material didtico. I.
Instituto Federal do Esprito Santo. II. Ttulo.

CDD: 004.678
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 Interface web

1.1 Diferenas entre os usurios
15
15
1.2 O espao da pgina
17
1.3 Navegao
18
1.4 Caractersticas a considerar na pgina principal
19
1.5 Usabilidade
21
1.6 Acessibilidade
23
1.7 Legibilidade
25
Aula 2 Fundamentos do HTML

2.1 Editor de texto Notepad++
35
35
2.2 O que HTML?
37
2.3 Marcadores
39
2.4 Tabelas
40
2.5 Imagens em HTML
42
2.6 Atributos ALT e ALIGN
43
2.7 Atributos width e height
45
2.8 Atributo background
46
2.9 Formatao de textos
47
2.10 Vnculos ou links
49
Aula 3 Cascading Style Sheets (CSS)

3.1 Criando estilos
53
54
3.2 Mtodo de aplicao do CSS no documento HTML
55
3.3 Pseudoclasses e pseudoelementos
58
e-Tec Brasil
Aula 4 Tipos de imagens

4.1 Imagens bitmaps
61
61
4.2 Imagens vetoriais
63
4.3 Formatos de imagens
64
4.4 CorelDRAW
67
Aula 5 Software de edio de imagem (GIMP)

5.1 Abas e janelas
5.2 Caixa de ferramentas
74
5.3 Para abrir uma nova imagem
79
5.4 Recortando uma imagem
81
5.5 Removendo o fundo da imagem
83
5.6 Captura de tela
85
5.7 Camadas
86
Aula 6 Software de animao de imagens

Macromedia Adobe Flash
6.1 Caixa de ferramentas e painis auxiliares
e-Tec Brasil
73
74
89
90
6.2 Biblioteca de objetos (Library)
92
6.3 Objetos geomtricos
93
6.4 Transformao de textos
94
6.5 Trabalhando com camadas
98
6.6 Animaes
101
6.7 Publicando documentos do Flash
110
Referncias
121
Currculo da professora-autora
123
Fundamentos de Desenvolvimento Web
Palavra do professor-autor
Ol, estudante!
Estamos iniciando mais uma etapa do Curso Tcnico em Informtica a distncia e estudaremos a disciplina Fundamentos do Desenvolvimento Web.
No decorrer das aulas, voc conhecer contedos que o faro refletir sobre
aspectos como acessibilidade, usabilidade, design, alm conhecer softwares
para tratamento de imagens e animaes, entre outros, e perceber a importncia de estudar esses conceitos para aplic-los de maneira coerente na
construo de pginas para web.
Nessa nova jornada, fica o desafio de concluirmos este estudo com xito.
Para que voc alcance esse objetivo, a equipe instrucional do curso elaborou
todo contedo para auxili-lo nessa caminhada, mas lembre-se que o desenvolvimento de cada atividade, cada avaliao nesta disciplina depende exclusivamente de voc, que deve reservar um perodo para navegar no ambiente
do nosso curso, conhecer e explorar os recursos disponveis, fazer a leitura
do material e realizar as atividades. Conte sempre com o apoio dos tutores,
que estaro prontos para ajud-lo.
No mais, desejo sucesso e um excelente estudo!
Prof. Keila Brito
e-Tec Brasil
Apresentao da disciplina
Ol, caro estudante!
Nesta disciplina, voc descobrir a importncia de conhecer os fundamentos
de desenvolvimento para web, visando uma melhor compreenso do uso
dos aplicativos e softwares para a elaborao de sites.
O objetivo deste material auxili-lo no conhecimento de contedos dos
fundamentos do desenvolvimento web. Com ele, voc perceber a importncia de conhecer esses conceitos para aplic-los de maneira coerente na
construo de pginas para internet.
Desenvolver e analisar sites requer uma viso sistmica e abrangente com
relao a aspectos inerentes a diversas reas de conhecimento.
importante ressaltar que a aprendizagem um processo contnuo e diferenciado para cada estudante, o que possibilita a ampla diversidade de
interao com o contedo.
Para que voc obtenha sucesso, ser necessrio que se envolva com as atividades prescritas desta disciplina, buscando cumprir as tarefas, seguir as
instrues, agir com organizao e controle sobre o tempo previsto. Ser
preciso, tambm, participar de forma tica e comprometida nos fruns e
encontros presenciais, com os colegas da turma e com o tutor presencial.
Lembre-se que estamos comeando uma longa e desafiadora jornada! Cada
texto, cada atividade, cada avaliao nesta disciplina depende exclusivamente de voc, mas voc no est sozinho; por isso, compartilhe seus conhecimentos nos fruns e chats disponibilizados em sua sala de aula virtual.
Fica aqui o desafio de concluirmos este estudo com SUCESSO!
Prof. Keila Brito
11
e-Tec Brasil
Projeto instrucional
Disciplina: Fundamentos do Desenvolvimento Web (carga horria: 60h).
Ementa: Conceitos fundamentais de aplicaes web. Arquitetura cliente-servidor
para web. Linguagem de marcao.
AULA
1. Interface web
2. Fundamentos do
HTML
3. Cascading Style
Sheets (CSS)
4. Tipos de
imagens
5. Software de
edio de imagem
(GIMP)
6. Flash
OBJETIVOS DE
APRENDIZAGEM
Conhecer conceitos bsicos tais como:
os diferentes tipos de usurios da web;
o espao de uma pgina web;
navegao nas pginas da internet;
caractersticas da pgina principal e
pginas internas de um website;
usabilidade;
acessibilidade; e
legibilidade.
Entender os conceitos e funcionamentos do HTML, como atributos, marcadores, tabelas, insero de imagens, sons
e vdeos.
Conhecer o editor de texto: Notepad e
suas caractersticas.
Compreender o conceito de CSS.
Entender a criao de estilos.
Conhecer o mtodo de aplicao do
CSS no documento HTML.
Conhecer o conceito de pseudoclasses
e pseudoelementos.
Conhecer os tipos de imagens.
Conhecer o software CorelDRAW e
suas ferramentas bsicas.
Conhecer o software GIMP e suas

ferramentas.
Conhecer o software Flash e suas

ferramentas de animao.
MATERIAIS
CARGA
HORRIA
(horas)
Vdeo: Acessibilidade web: custo

ou benefcio
10
Artigos: http://acessodigital.net
Vdeo: HTML Bsico

Software Notepad ++
10
Software Notepad ++
10
Vdeo: Criando imagens com

CorelDRAW
Software CorelDRAW
10
Vdeo: Ferramenta Contgua

Vdeo: Fuso de imagens
Software GIMP
Vdeo: Tutorial: Flash timeline
Vdeo: Tutorial: Interpolao
no Flash
Software Adobe Flash CS3
10
10
13
e-Tec Brasil
Objetivos
Conhecer conceitos bsicos sobre os diferentes tipos de usurios
da web.
Identificar, no espao de uma pgina web, elementos tais como
a navegao nas pginas da internet, caractersticas da pgina
principal e das pginas internas de um website.
Compreender os conceitos de usabilidade, acessibilidade e legibilidade aplicados ao desenvolvimento de website.
Conhecer os conceitos para utilizao de fontes e cores websites.
Fazem parte da interface web informaes grficas, textuais e auditivas, apresentadas ao usurio quando acessa uma pgina. Seu
desenvolvimento ocorre, conforme requisitos levantados, durante
a execuo do projeto.
1.1 Diferenas entre os usurios

Os grandes avanos tecnolgicos ocorridos nos ltimos anos proporcionaram
o barateamento da tecnologia e fizeram com que o computador deixasse de
ser exclusividade de especialistas e de indivduos mais abastados, para fazer
parte tambm do dia a dia das mais variadas pessoas.
Alm da diversidade de pessoas com acesso ao computador, houve tambm
uma grande variedade de formas de acessar a rede: em casa, LAN house,
trabalho, dispositivo mvel, notebooks, entre outros.
Devido diferena de usurios e de formas de acesso, necessrio e
importante que os recursos tecnolgicos empregados e os layouts de pginas
sejam adaptados a essas variaes.
15
e-Tec Brasil
No necessrio que as configuraes sejam decoradas, porm importante

que tenhamos conhecimento delas para saber aplic-las quando necessrio.
Algumas configuraes podem afetar a visualizao e o uso de interfaces
web; so elas:
Tamanho da pgina e resoluo: a quantidade de pixels que compem
a imagem vista na tela. A qualidade dessa imagem vai depender da relao
do nmero de pontos por polegada quadrada, com a configurao da tela,
o tamanho do monitor e sua resoluo.
Espao do browser na pgina: o espao ocupado pelo browser na pgina
do dispositivo utilizado, seja dispositivo mvel, sejam notebooks, seja TV, sejam
outros, variam de acordo com a resoluo da tela do dispositivo utilizado.
As resolues de tela mais utilizadas atualmente pelos usurios de PCs, segundo
estatsticas do Market Share (http://marketshare.hitslink.com), so:
1024x768 pixels serve de referncia para o desenvolvimento de
websites. Em julho de 2010, foi usada por 23,63% dos usurios mundiais.
1280x800 pixels no desenvolvimento de layout para interfaces web, a
proporo entre a largura e a altura dos monitores apresenta variaes.
Desde 4:3, padro dos aparelhos de TV e computadores, comum nas
larguras de 1024 a 1280 pixels, at a proporo dos monitores de HDTV,
wide screen (16:9, resoluo 1280x720 ou 16:10, resoluo 1280x800,
chegando a 1680x1050 e 2560x1600). Estas diferenas de resoluo
e proporo aumentam ainda mais quando se consideram as telas dos
dispositivos mveis.
1280x1024 pixels tambm utilizada por um nmero crescente de
usurios. Em julho de 2010, foi usada por 10,86% dos usurios mundiais.
Conhea as resolues
indicadas para monitores LCD e
Laptops, conforme o tamanho
do monitor. Acesse: http://
windows.microsoft.com/pt-BR/
windows7/Getting-the-bestdisplay-on-your-monitor
e-Tec Brasil
640x840 pixels pouco utilizada. Em julho de 2010, foi usada por apenas 2,35% dos usurios mundiais.
Navegadores (browsers) utilizados: existe uma variedade de navegadores disponveis para os usurios web; por isso importante sabermos que
16
Fundamentos do Desenvolvimento Web
o mesmo contedo pode aparecer de maneira diferente em cada um dos

navegadores. Isso ocorre porque h uma inconsistncia entre os programas,
na forma como interpretam os estilos CSS.
Velocidade de conexo e tamanho do arquivo da pgina em Kb: a
velocidade de conexo varia muito, porm, ao desenvolvermos uma pgina,
necessrio ter em mente que o tempo de download das pginas no deve
exceder 10 segundos, conforme as 10 Heursticas de Jakob Nielsen.
1.2 O espao da pgina

O espao da pgina definido como a forma e como os olhos do usurio a
percorrem. Existem estudos que descrevem que a maior parte dos usurios
de cultura ocidental v a pgina no sentindo diagonal, a partir do alto
esquerda, em direo parte inferior direita, e depois retorna ao alto, como
mostrado na Figura 1.1 a seguir.
Acesse o site http://www.

inf.puc-rio.br/~inf1403/
docs/alberto2011_1/09_
AvHeuristica.pdf e conhea as
10 Heursticas de Nielsen.
Figura 1.1: Viso do usurio na pgina

Fonte: Adaptado de Nielsen (2000)
Jakob Nielsen, um dos maiores especialistas na rea de usabilidade na web,

afirma que os usurios, de um modo geral, leem as pginas de acordo com
um padro de movimentos que desenham um F: duas linhas horizontais da
esquerda para a direita e uma linha vertical de cima para baixo, esquerda,
conforme demonstra a Figura 1.2 a seguir.
17
e-Tec Brasil
Priority 1
Priority 2
Priority 3
Figura 1.2: Viso do usurio na pgina

Fonte: Adaptado de Nielsen (2000)
Esses estudos mostram formas de leituras diferentes, concordam que as

informaes mais importantes devem ser localizadas sem que o usurio
precise utilizar a barra de rolagem.
1.3 Navegao
Segundo o Dicionrio Aurlio (FERREIRA, 2009), navegao o ato ou efeito
de percorrer um hipertexto, determinando a sequncia em que os diversos
documentos so consultados, ou percorrer pginas web, indo de um link a outro.
A navegao pode se tornar difcil, sendo necessrio dar aos usurios
suporte que v alm dos simples hyperlinks v para. As interfaces precisam
responder aos usurios trs perguntas fundamentais da navegao:
Onde estou? / Onde estive? / Onde posso ir?
Onde estou?
a localizao do usurio em relao estrutura do site e web em geral.
importante a conscincia do usurio de onde esteja para que consiga encontrar as informaes que procura, ou desenvolver as atividades que deseja.
Onde estive?
a localizao do usurio em relao s pginas j visitadas.
Onde posso ir?
a localizao do usurio em relao estrutura de informaes, que ir
lev-lo a encontrar o que est procurando, seja um produto para comprar,
uma notcia, um texto acadmico, entre outros.
e-Tec Brasil
18
1.4 Caractersticas a considerar

na pgina principal
importante conhecermos algumas caractersticas que devem ser levadas em
considerao ao criar uma pgina. Nesta seo voc ver as caractersticas
da pgina principal.
Podemos destacar as seguintes caractersticas:
Identificar claramente a localizao do usurio e atividade/contedo mais
importante do site e o que ele pode oferecer.
Oferecer suporte aos usurios para encontrar o que procuram.
Estar permanentemente atualizada.
Marcar a localizao do usurio em relao s outras pginas e guiar seus
percursos.
Ter mais rea para navegao do que para contedo.
Informar os assuntos de maneira concisa e direta.
Ser dividida em diferentes sees.
Ter uma seo ou menu com links para as reas mais acessadas pelos
usurios (se conveniente).
1.4.1 Pginas internas

importante conhecermos estudos recentes a respeito da forma como os
usurios tm acessado a web, alm das caractersticas necessrias para mant-los na pgina que iro visitar. A seguir voc conhecer as caractersticas
importantes de uma pgina interna.
Hoje cada vez maior o nmero de usurios que buscam ir direto s pginas
internas, sem necessariamente ter que passar pela pgina principal. Segundo
estudos, o usurio gasta 80% a mais de tempo nessas pginas do que na
pgina principal. Por isso, importante sabermos as caractersticas que
podem contribuir para que elas o prendam por mais tempo.
19
e-Tec Brasil
Podemos destacar as seguintes caractersticas para as pginas internas:

Apresentar em destaque o nome da pgina principal.
Mostrar, em local bem visvel, a marca da empresa ou organizao.
Manter o mesmo estilo das outras pginas, pelo menos das pginas da
mesma camada.
Manter o foco em aspectos mais especficos do que na pgina principal.
Prover o sentido de localizao do usurio em relao ao resto do site e
pgina principal.
Manter as informaes estruturais de navegao (ferramenta de busca,
data de atualizao, links relacionados, mapa do site) essas informaes
costumam ficar localizadas em lugares fixos em todas as pginas.
Se o contedo for muito extenso, dividir o assunto em um resumo geral
numa pgina e detalhar o assunto em outra.
Prover mais informaes sobre o assunto da pgina.
Alm da pgina principal e das pginas internas, tambm necessrio considerarmos a importncia das pginas de apoio ao usurio; elas so responsveis por orient-lo. Entre elas podemos citar:
Pgina de abertura.
Mapa do site.
Entre em contato ou Fale conosco.
Poltica de privacidade.
Perguntas frequentes.
Pginas de erro.
e-Tec Brasil
20
1.5 Usabilidade
Existe uma forte evidncia de que a preocupao com usabilidade no
projeto de interfaces diminui drasticamente os custos e aumenta a produtividade - Brad Myers.
O termo usabilidade surgiu na dcada de 1980, em substituio expresso
user-friendly, que, em portugus, significa amigvel, e era usada principalmente por profissionais da rea de ergonomia e psicologia.
Usabilidade
Segundo a ISO 9841/11, 1998,
usabilidade a capacidade
de um produto ser usado por
usurios especficos para atingir
objetivos especficos com
eficcia, eficincia e satisfao
em um contexto especfico de
uso.
Esse termo definido por diversos autores sob diferentes pontos de vista,
mas foi a ISO/IEC 9126-1991 quem definiu pela primeira vez o termo usabilidade sobre qualidade de software, como:
Um conjunto de atributos de software relacionado ao esforo necessrio
para seu uso e para o julgamento individual de tal uso por determinado
conjunto de usurios.
Foi a partir dessa norma que o termo usabilidade deixou de ser utilizado
apenas pela ergonomia e pela psicologia e passou a fazer parte de reas do
conhecimento, como tecnologia da informao.
O conceito de usabilidade vem evoluindo e, em 1998, a norma ISO/IEC o
redefiniu, incluindo as necessidades dos usurios e outras caracteristicas de
qualidade de software, como funcionalidade, confiabilidade, eficincia, possibilidade de manuteno e portabilidade.
A norma ISO 9241/11 definiu conceitos importantes que devem ser levados
em conta quando se pensa em usabilidade.
Usurio pessoa que interage com o produto.
Contexto de uso usurios, tarefas, equipamentos (hardware, software
e materiais), ambiente fsico e social em que o produto usado.
Eficcia preciso e totalidade com que os usurios atingem objetivos
especficos, acessando a informao correta ou gerando os resultados
esperados.
Eficincia preciso e totalidade com que os usurios atingem seus
objetivos em relao quantidade de recursos gastos.
21
e-Tec Brasil
Satisfao conforto e aceitabilidade do produto, medidos por meio de

mtodos subjetivos e/ou objetivos.
Segundo Dias (2003),
A usabilidade pode ser considerada uma qualidade de uso, isto , qualidade de interao entre usurios e sistema, que depende das caractersticas tanto do sistema quanto do usurio. Alm disso, a usabilidade
tambm depende das tarefas especficas que os usurios realizam, assim como do ambiente fsico (incidncia de luz, barulho, interrupes
da tarefa, disposio do equipamento).
No que se refere a projeto de websites, alguns fatores devem ser considerados

para que se consiga desenvolver um site com caractersticas de usabilidade;
so eles: qualidade do layout, funcionalidade dos recursos interativos,
arquitetura da informao, conceito editorial, aderncia s tecnologias e
dispositivos digitais. Alm desses fatores, devemos conhecer e considerar
diversos outros que contribuem para a autonomia da ao dos usurios
durante a navegao; so eles:
Grau de familiaridade do usurio mdio do site com o uso da internet e
suas ferramentas.
Uso de convenes j aceitas em grandes sites e portais.
Orientao visual dos percursos a seguir, dos caminhos percorridos e
pontos de chegada.
Sinalizao do status de uma tarefa durante a sua realizao.
Possibilidade de opo sobre a instalao de plug-ins e programas no computador ou no browser do usurio para a visualizao de imagens e animaes.
Incluso de links relacionados.
Informao ao usurio de uma tarefa a realizar.
Oferta de suporte navegao e ao uso, por meio de mensagens claras
e objetivas.
e-Tec Brasil
22
Incluso de pequenos resumos prximos aos links.

Permisso de reversibilidade das aes.
Visibilidade informativa a aparncia de cones, boxes, setas, sinaliza seu uso.
Consistncia do layout e das funcionalidades do programa (padronizao
da malha, telas, logotipos, cores, tipologias).
Oferta de reas de informaes relacionadas s expectativas dos usurios
quanto ao contedo principal, entre outros.
1.6 Acessibilidade
Inmeras so as razes para tornar a web acessvel; entre elas, pode-se citar
as vantagens competitivas, ao atingir no mercado eletrnico, milhes de
pessoas com e sem necessidades especiais; benefcios de usabilidade aos
outros usurios da web, tornando mais fcil e agradvel o acesso s informaes online; e ainda, a vantagem de estar de acordo com polticas governamentais de incluso digital, que buscam a insero de todos na sociedade
da informao
Acesse http://acessodigital.net/
art_fred_o_que_e_usabilidade.
html e faa a leitura desse
artigo, e contribua com sua
reflexo sobre o assunto no
frum da disciplina no AVEA.
A incluso digital visa contribuir para que as pessoas de baixa viso tenham
acesso a computador e acesso rede; porm, ter apenas acessibidade no
suficiente, preciso que a populao receba treinamento sobre como utilizar
essas ferramentas. Ser includo digitalmente no apenas saber trocar e-mail,
saber utilizar o suporte tecnolgico oferecido de forma mais ampla, a fim
de promover melhoria na condio de vida.
Para que a incluso digital seja possvel, aes e projetos vm sendo criados
para facilitar o acesso das pessoas de baixa renda s tecnologias, para que a
acessibilidade desses usurios seja facilitada.
Com essas aes e projetos, possivel que a populao tenha acesso a informaes disponveis na internet e, com isso, passe a produzir e divulgar conhecimento, contribuindo, assim, com a incluso social dos portadores de necessidades especiais e idosos, como o exemplo observado na Figura 1.3 a seguir.
23
e-Tec Brasil
Figura 1.3: Portador de necessidades especiais e idoso utilizando notebooks

Fonte: http://www.sxc.hu/browse.phtml?f=download&id=1114180
Conforme Dias (2003), a web deve poder ser usada por pessoas, em diferentes contextos, que:
Sejam incapazes de ver, ouvir, se deslocar ou interpretar determinados
tipos de informao.
Tenham dificuldade em ler ou compreender textos.
No tenham um teclado ou mouse convencionais, ou no sejam capazes
de utiliz-los.
Possuam tela que apresenta apenas texto, com dimenses reduzidas ou
baixa resoluo, ou ainda conexo lenta com a internet.
No falem ou compreendam fluentemente o idioma em que o documento
foi escrito.
Estejam com seus olhos, mos ou ouvidos ocupados, por exemplo,
quando ao volante ou em um ambiente barulhento.
Possuam uma verso ultrapassada de navegador web, diferente dos habituais, um navegador por voz ou um sistema operacional pouco convencional.
Um projeto de web que desconsidere os princpios de acessibilidade provavelmente exclui os usurios que no possuem as tecnologias mais recentes.
importante conhecermos algumas recomendaes importantes para a
acessibilidade dos projetos de web. Elas visam contribuir com as aes e
projetos desenvolvidos, com o intuito de permitir a incluso digital.
e-Tec Brasil
24
Recomendaes sobre acessibilidade em projeto para web:

Fornecer alternativas equivalentes ao contedo sonoro ou visual.
No recorrer apenas cor.
Utilizar corretamente marcaes e folhas de estilo.
Assegurar que as pginas dotadas de novas tecnologias sejam transformadas harmoniosamente.
Assegurar o controle do usario sobre as alteraes temporais do contedo.
Assegurar a acessibilidade direta de interfaces de usurios integradas.
Projetar pginas considerando a independncia de dispositivos.
Fornecer informaes de contexto e orientaes.
Fornecer mecanismos de navegao claros.
Assegurar a clareza e a simplicidade dos documentos, entre outros.
O avaliador de acessibilidade DaSilva um site nacional que testa,
considerando num ranking de prioridades, as condies para que um site
seja classificado como acessvel. Pode-se fazer o download da ferramenta3
ou usar a verso online em http://www.dasilva.org.br/
Descreva os fundamentos e as diferenas entre acessibilidade e usabilidade.
1.7 Legibilidade
Segundo Marmion (2006) o campo de percepo visual reduz-se metade
a uma distncia de 2.5 graus do ponto de fixao do olho, quando fazemos
uma leitura. Observe que, conforme a Figura 1.4 se o ponto de fixao fosse o
nmero 0, eis o bloco de informao que nosso crebro conseguiria processar:
25
Legibilidade
Legibilidade a facilidade
com que um leitor consegue
discernir a fonte numa pgina,
e baseia-se na relao da forma
com o fundo e na capacidade de
distinguir as letras entre si. Para
que possam ser lidas, as letras
tero que ser bem identificadas.
e-Tec Brasil
Figura 1.4: Legibilidade

Fonte: Marmion (2006)
A apresentao texto em colunas minimiza o escaneamento horizontal e

consequentemente reduz o movimento dos olhos e a fadiga ocular, segundo
Jerome Nadel, da empresa Human Factors International Inc., conforme
demonstra dona Figura 1.5 a seguir.
Figura 1.5: Colunas

Fonte: Marmion (2006)
Segundo Jakob Nielsen (apud MARMION, 2006), 79% dos usurios da web
escaneiam texto. Apenas 21% leem palavra por palavra. Para incrementar
a facilidade de leitura e tornar seu texto escanevel, Nielsen recomenda
a utilizao de:
Tabelas.
Cabealhos.
Negrito.
Grficos.
Marcadores (bullets).
e-Tec Brasil
26
Vejamos, na prtica, a aplicao dos princpios das teorias acima mencionadas.

Suponhamos que devemos apresentar ao usurio uma receita, como a seguir:
Ingredientes para a massa: 6 ovos temperatura ambiente, 7 colheres (sopa)
de acar, 6 colheres (sopa) de chocolate em p, 1 xcara (ch) de farinha de
trigo, 1 colher (ch) de fermento em p, acar para polvilhar. Ingredientes
para o recheio: 2 latas de leite condensado, 2 pacotes (100 g cada) de coco
ralado, 1 xcara (ch) de uva-passa. Modo de preparo da massa: Forre uma
assadeira n 3 com papel-alumnio ou papel-manteiga. Unte muito bem e
polvilhe com farinha. Reserve. Bata as claras em neve e reserve. Bata as
gemas com o acar at obter um creme claro e fofo. Adicione o chocolate,
a farinha e, por ltimo, o fermento. Acrescente as claras em neve mexendo
delicadamente. Modo de preparo do recheio: Despeje o leite condensado
na frma preparada. Distribua por cima os demais ingredientes do recheio.
Cubra com a massa e leve ao forno mdio (180C), pr-aquecido, para assar
por cerca de 30 minutos. Desenforme ainda quente sobre um pano de prato
polvilhado com acar. Enrole imediatamente com o auxlio do pano de
prato. Polvilhe com acar, espere esfriar e leve geladeira. Ateno: Tome
cuidado ao desenformar porque o leite condensado ainda est mole.
Voc notou como est difcil de compreender estas informaes. Que tal
tentar melhor-las? Veja:
Rocambole
Ingredientes para a massa
6 ovos temperatura ambiente
7 colheres (sopa) de acar
6 colheres (sopa) de chocolate em p
1 xcara (ch) de farinha de trigo
1 colher (ch) de fermento em p
Acar para polvilhar
27
e-Tec Brasil
Ingredientes para o recheio

2 latas de leite condensado
2 pacotes (100 g cada) de coco ralado
1 xcara (ch) de uva-passa
Modo de preparo
Modo de preparo da massa
Forre uma assadeira n 3 com papel-alumnio ou papel-manteiga. Unte
muito bem e polvilhe com farinha. Reserve. Bata as claras em neve e reserve.
Bata as gemas com o acar at obter um creme claro e fofo. Adicione o
chocolate, a farinha e, por ltimo, o fermento. Acrescente as claras em neve
mexendo delicadamente.
Modo de preparo do recheio
Despeje o leite condensado na forma preparada. Distribua por cima os demais
ingredientes do recheio. Cubra com a massa e leve ao forno mdio (180C),
pr-aquecido, para assar por cerca de 30 minutos. Desenforme ainda quente
sobre um pano de prato polvilhado com acar. Enrole imediatamente com o
auxlio do pano de prato. Polvilhe com acar, espere esfriar e leve geladeira.
Ateno
Tome cuidado ao desenformar porque o leite condensado ainda est mole.
Ficou bem mais claro, no ficou? Mas dependendo da configurao da tela,
pode ser necessrio clicar a barra de rolagem, algo indesejvel. Note que
mesmo assim aprece um espao em branco, totalmente, desaproveitado
direita dos ingredientes. Podemos ento sugerir um formato alternativo?
Agora a sua vez de tentar, vamos l!!!
e-Tec Brasil
28
1.7.1 Fonte
A escolha da fonte a ser utilizada no projeto de um site influencia diretamente
o seu resultado final. Existem basicamente dois tipos de fontes: as com serifa
e as sem serifa.
As fontes serifadas geralmente se perdem na resoluo dos monitores,
tornando-se inadequada a sua utilizao. Seu contraste mximo para
compensar problemas de resoluo e para que no haja confuso de
legibilidade. O texto sem serifa no perde resoluo e tem mais potencial
de velocidade de leitura. A tipografia escolhida para o corpo do texto
Verdana, por se tratar de uma tipografia comumente utilizada, largamente
distribuda e de leitura rpida e simples. A variao dos tamanhos, de acordo
com a finalidade do texto, tambm auxilia na hierarquizao da informao.
Todas as escolhas so baseadas no conhecimento e questionamento ao
pblico-alvo, tambm pertencente ao grupo de pesquisa. Veja a diferena
entre fontes com serifa e sem serifa nas Figuras 1.6 e 1.7 a seguir.
Serifas
So os pequenos traos e
prolongamentos que ocorrem no
fim das hastes das letras.
AaBbCc
Figura 1.6: Tipo com serifa
Fonte: http://pt.wikipedia.org/w/index.php?title=Serifa&oldid=2734811
AaBbCc
Figura 1.7: Tipo sem serifa
Fonte: http://pt.wikipedia.org/w/index.php?title=Serifa&oldid=2734811
Segundo Faria, Ferreira e Lemos (2010) para assegurar uma boa usabilidade
a um website, um texto legvel um dos fatores de grande importncia,
pois devemos sempre considerar o pblico-alvo.
Para a maioria do pblico-alvo, o

tamanho ideal de fonte transita
entre 10 e 12 pts (NIELSEN apud
GUIMARES, 2007).
Devemos lembrar que para que a fonte seja apresentada, ela dever estar
instalada no computador do usurio. Algumas fontes tm mais chances de
estarem instaladas, por serem mais comumente utilizadas. Ao escolh-las,
defina uma ou mais fontes alternativas. Evite misturar fontes serifadas e sem
serifa no mesmo texto.
29
e-Tec Brasil
1.7.2 Cores
1.7.2.1 Modos de cor
Existem duas classificaes para as cores primrias:
RGB (Red = vermelho Green = verde Blue = azul): sistema utilizado
nos monitores de computador, televises, espetculos e data show.
formado pelo processo aditivo, em que pigmentos e suas combinaes
geram a cor branca. Cada uma dessas cores possui uma variao de 0 a
255, que geram mais ou menos 16 milhes de cores.
CMYK (Cyan = ciano Magenta Yellow = amarelo Black = preto):
sistema utilizado para impresses. gerado pela absoro de luz pelas
cores, processo denominado de subtrativos, em que a adio das trs
principais cores gera a cor preta.
Segundo o Instituto de Pesquisa da Cor (Institute for Color Research) h
estudos que revelam que os seres humanos julgam subconscientemente uma
pessoa, um ambiente ou um item nos primeiros 90 segundos, e nesse lapso
de tempo entre 62% e 90%do julgamento baseado unicamente na cor.
Para a leitura eficiente de

um texto, principalmente, um
website, em que essa leitura
ocorrer na tela do monitor,
devemos procurar sempre uma
combinao harmoniosa das
cores, procurando contrastar a
cor da fonte e do fundo.
O olho humano pode detectar quase todas as graduaes de cores, quando

as luzes monocromticas como: vermelho, verde e azul so misturadas apropriadamente, segundo as muitas teorias que procuram explicar o fenmeno
da viso cromtica.
As cores se dividem em trs grupos:
1. Cores Primrias: so as cores que no podem ser formadas por nenhuma
mistura. Segundo Tavares (2007), so elas: Vermelho, verde, azul, no
sistema RGB; e no sistema CMYK, so elas: azul, magenta e amarelo.
2. Cores Secundrias: so formadas por duas cores primrias misturadas em
partes iguais (PEDROSA, 1982 apud SCHUHMACHER, 2007).
3. Cores Tercirias: so as intermedirias entre uma cor secundria e
qualquer das duas primrias que lhe do origem (PEDROSA, 1982 apud
SCHUHMACHER, 2007).
e-Tec Brasil
30
Ainda segundo Pedrosa (1982 apud SCHUHMACHER, 2007), na Figura

1.8 construda por Fabris em 1973, as cores primrias esto no centro, as
secundrias (verde, laranja e violeta) no segundo tringulo. O terceiro ciclo
se complementa com as cores tercirias.
Figura 1.8: Crculo das cores

Fonte: Fabris (1973 apud SCHUHMACHER, 2007)
E as cores complementares so aquelas opostas no disco de cores. Assim

temos como complementares os seguintes pares de cores: vermelho e ciano,
verde e magenta, azul e amarelo, conforme a Figura 1.9 a seguir.
Figura 1.9: Cores complementares

Fonte: Schuhmacher (2007)
31
e-Tec Brasil
Conhea a utilizao de cor

no mecanismo de interao
com o usurio, disponvel em
http://www.ibrau.com.br/
artigoutilizacaodecor.htm
As cores so anlogas porque h nelas uma mesma cor bsica e esto

posicionadas lado a lado no disco de cores. So muito utilizadas para dar
a sensao de uniformidade, profundidade, movimento, luz e sombra.
Podemos considerar anlogas trs cores que se apresentam em sequncia
no crculo das cores como o amarelo, amarelo-laranja e laranja, como
observamos na Figura 1.10 a seguir.
Ao escolher um padro de cores

para um site devemos sempre
observar alguns aspectos:
Assunto da pgina, Pblico-alvo
e Ambiente.
Figura 1.10: Cores anlogas

Fonte: Schuhmacher (2007)
As cores contrastantes so diretamente opostas no disco das cores, como

por exemplo: o azul e o amarelo.
Acesse o esquema de cores em http://wellstyled.com/tools/ e faa algumas combinaes de cores para utilizar posteriormente no seu site.
Segundo Robertson apud Parizotto (1997), recomenda-se que as cores de
uma pgina na web no sejam selecionadas separadamente, e sim, dentro
de um contexto geral e que sejam respeitadas as diferenas culturais e fisiolgicas entre os indivduos.
Vamos experimentar um
aplicativo que gere esquemas
e combinaes de cores. Cada
esquema se baseia em uma
cor usada como base, que
combinada e complementada
por cores adicionais calculadas
por meio de algoritmos que
permitem a melhor combinao
tica. Esta ferramenta, Color
Scheme, est disponvel em
http://wellstyled.com/tools/
Vamos aprender sobre as
cores de forma ldica e
divertida? Acesse o site Color
in Motionno endereo http://
www.mariaclaudiacortes.
com/. O site uma experincia
interativa sobre a comunicao e
o simbolismo da cor.
e-Tec Brasil
Resumo
Nesta Aula, voc pde ver pontos importantes que devem ser considerados ao desenvolver o layout para um website. Para que a navegao em
um website seja eficiente, precisamos responder aos usurios trs perguntas
fundamentais da navegao: Onde estou? Onde estive? Onde posso ir?
Em uma pgina principal de website podemos destacar as seguintes caractersticas: identificar a localizao do usurio, oferecer suporte aos usurios,
atualizao permanente, marcar a localizao do usurio em relao s outras pginas e guiar seus percursos, ter mais rea para navegao do que
para contedo e informar os assuntos de maneira concisa e direta.
Nas pginas internas: apresentar em destaque o nome da pgina principal,
mostrar em local bem visvel a marcada empresa ou organizao, manter
32
o mesmo estilo das outras pginas, manter o foco em aspectos mais especficos, prover o sentido de localizao do usurio, manter as informaes
estruturais, entre outros.
Entendemos que um website tem que possibilitar aos mais diferentes usurios a experincia de navegao na internet, incluindo os que so portadores
de necessidades especiais; por isso a necessidade de adotarmos os conceitos
de: usabilidade, acessibilidade e legibilidade.
Atividades de aprendizagem
A partir do contedo at aqui estudado, faa uma anlise da interface dos sites:
www.vw.com.br
www.ford.com.br
www.honda.com.br
www.fiat.com.br
Pontos a serem analisados:
Tamanho de tela, resoluo do monitor e adaptaes.
Tempo de carregamento da pgina.
Layout das pginas.
Navegao.
Usabilidade.
Acessibilidade.
Legibilidade.
33
e-Tec Brasil

Objetivos
Entender os conceitos e funcionamentos do HTML, como atributos, marcadores, tabelas, insero de imagens, sons e vdeos.
Conhecer o editor de texto Notepad++.
Aprender a utilizar o editor de texto Notepad ++.
Para que possamos criar arquivos HTML necessria a utilizao de um editor de
texto. No decorrer desta aula utilizaremos o editor Notepad++, do qual voc pode
fazer o download no site http://notepad-plus.sourceforge.net/br/site.htm;
gratuito. Caso no queira ou no possa instalar o software no computador que
utiliza para estudar, voc pode fazer o download do formato porttil.
2.1 Editor de texto Notepad++

Notepad++ um editor de cdigo livre que substitui o Notepad. Ele funciona
em ambiente Windows e suporta vrias linguagens de programao; veja o
logotipo do Notepad++ na Figura 2.1 a seguir.
Figura 2.1: Logotipo Notepad ++

Fonte: http://notepad-plus-plus.org/
35
e-Tec Brasil
Foi desenvolvido com base no Scintilla, um editor escrito em linguagem C++.

O cdigo-fonte tem marcaes coloridas, o que contribui para sua melhor
visualizao. Conhea a interface do software na Figura 2.2 a seguir.
Figura 2.2: Interface do editor de texto Notepad++

Fonte: Notepad++, v. 5.9.3
2.1.1 Caractersticas do Notepad ++

Autocompletar: para quase todas as linguagens suportadas, possvel que
o usurio crie sua prpria lista de autocompletar (api). Para que o Notepad a
execute, digite Ctrl+Espao.
Destaque de sintaxe: permite que o usurio crie sua prpria linguagem,
tanto de sntese de palavras-chave quanto de blocos.
Marcadores: para inserir um marcador, basta clicar na margem (no lado direito
da margem junto ao n da linha) ou digitar Ctrl+F2 para inverter o marcador. Para
excluir todos os marcadores, clique no Menu Localizar->Excluir Marcadores.
Voc conheceu o editor de texto
que utilizaremos nos exerccios e
no andamento desta disciplina;
caso no o tenha instalado em
seu computador, entre no site:
http://notepad-plus.
sourceforge.net/br/site.htm,
o download gratuito. Porm,
caso tenha preferncia por outro
editor de texto, ele poder ser
utilizado.
e-Tec Brasil
Mltiplas visualizaes: voc pode editar vrios documentos ao mesmo tempo.

Chaves, colchetes e parnteses com destaque: quando o cursor se aproxima de um desses smbolos { } [ ] ( ), o smbolo que est prximo ao cursor e o
smbolo simetricamente oposto so destacados, assim como sua guia de indentao, se houver, fazendo com que a localizao de um bloco seja mais fcil.
36
2.2 O que HTML?

O Hypertext Markup Language (HTML) uma linguagem de formatao e
no de programao. Essa linguagem tem a funo de enviar para o navegador (Internet Explorer, Firefox, Chrome, etc.), informaes que definem de
que maneira textos, imagens e outros itens devero aparecer na tela.
Essas informaes so chamadas tags (etiquetas) e esto inseridas nos documentos originais (documento-fonte) que criaram as pginas. Essas tags
normalmente aparecem em pares, iniciando e encerrando um bloco. Existem
quatro tags bsicas so elas:
<html></html>, <head></head>,<title></title>, <body></body>
Para se obter um documento escrito em HTML necessria a utilizao do
editor de texto e de, no mnimo, essas quatro tags. Veja o exemplo 1 e o seu
resultado na Figura 2.3 a seguir.
Exemplo 1:
Resultado:
Figura 2.3: Exemplo de utilizao das tags bsicas

Fonte: CEAD/Ifes (2010)
37
e-Tec Brasil
<html>... </hmtl>: abre e encerra uma pgina. Essas tags so as mais importantes, pois informam ao browser que o documento est escrito em html.
<head> </head>: a tag <head>vem abaixo da tag <html>, indica os comandos que o navegador precisa carregar antes que a pgina seja carregada.
utilizada no cabealho para inibir o ttulo a ser inserido na janela do navegador.
<title> </title>: espao para definio do ttulo do documento. A tag
<title> deve estar sempre contida na tag <head>.
<body></body>: essa tag contm o corpo da pgina. A tag <body> deve
ser inserida aps a tag <head>; j a tag </body> vem antes da tag </html>.
1. Escolha o tipo de site que deseja desenvolver durante o andamento desta
disciplina. importante que seja um site pelo qual voc tenha, alm de
interesse, material para execut-lo, pois cada etapa desenvolvida nesta
disciplina ser para a composio do layout desse site. Exemplos:
( ) site pessoal
( ) site corporativo
( ) site institucional
( ) site profissional
( ) outro: ____________________
Responda s questes:
a) O que HTML?
b) Qual a definio das tags <title> e <body>?
2. Quais so as tags mnimas necessrias para criar uma pagina web? Utilizando essas tags, faa uma pgina pessoal. Salve o arquivo com o nome
que escolheu para o site. Digite nome do site.html e clique em salvar. Crie
uma pasta denominada site XXX, salve todas as atividades desenvolvidas
nesta disciplina nessa pasta.
e-Tec Brasil
38
2.3 Marcadores
So comandos da linguagem HTML que permitem a formatao do texto.
Um marcador deve ser apresentado entre os sinais < e >. A maioria dos
marcadores funciona como chave de liga e desliga. Isso quer dizer que um
marcador utilizado para indicar o incio da formatao e outro para informar o fim dela; no caso do fechamento, inserido /, antes do nome do
marcador (ALVES, 2009).
Veja o link que fala de alguns

tipos de websites
http://daniellesimoes.com/
Tipos%20de%20Web%20Sites.
pps
2.3.1 Body
So os marcadores existentes entre as tags <body>...</body>.
2.3.2 Bgcolor backgrounding color

Aplica cor de fundo a uma determinada seo. Pode ser definida por uma
constante (nome em ingls da cor) ou um nmero hexadecimal (#xxxxxx)
que corresponde ao valor da cor em RGB. Observe no Quadro 2.1 as cores e
nmeros hexadecimais correspondentes.
Quadro 2.1: Relao de cores e nmeros hexadecimais
Hexadecimal
Cor
Cores Claras
Hexadecinal
Branco
#FFFFFF
Branco-neve
#F4F4F4
Preto
#000000
Cinza-claro
#C0C0C0
Azul
#0000FF
Azul-claro
#D9FFFF
Verde
#008000
Verde-claro
#DEFEDA
Vermelho
#FF0000
Rosa-claro
#FFD5D5
Cinza
#808080
Amarelo-claro
#FFFFF5
Amarelo
#FFFF00
Roxo-claro
#EFDFFF
Agora observe o exemplo 2 e o resultado da utilizao do atributo bgcolor

est mostrado na Figura 2.4 a seguir.
Exemplo 2:
39
e-Tec Brasil
Resultado:
Figura 2.4: Fundo da pgina em verde

Acrescente cor ao arquivo executado na atividade de aprendizagem 2.

Execute a tarefa e depois visualize, importante a escolha de uma cor que
no interfira na legibilidade do contedo.
2.4 Tabelas
Segundo Ferreira (2009), tabela
substantivo feminino; significa
pequena tbua ou quadro em
que se registram nomes de
pessoas ou coisas.
por meio de tabelas que imagens e textos so posicionados dentro da

pgina. A tabela do HTML no tem apenas a funo de exibir dados, como
a tabela do Excel, por exemplo, mas uma importante ferramenta para
definir onde as informaes, imagens, etc. sero organizadas. O contedo
de cada clula poder ter textos, imagens e at mesmo outras tabelas. As
tags <table>...</table> delimitam a tabela; dentro dessas tags so inseridas
outras que definem nmero de linhas, colunas e outras caractersticas que se
fizerem necessrias. Na Figura 2.5 temos um exemplo de tabela em HTML.
Colunas
Clula que pode

conter outra tabela
Linhas
Clula
Figura 2.5: Exemplo de tabela em HTML

Fonte: Adaptado de Oliviero (2000)
e-Tec Brasil
40
Veja o exemplo 3 e o resultado na criao de uma tabela na Figura 2.6 a seguir.

Exemplo 3:
Resultado:
Figura 2.6: Exemplo de tabelas

Crie uma tabela com trs colunas e quatro linhas no arquivo em que voc
vem executando seu site.
2.4.1 Atributos da tabela

Existem diversos atributos que podem ser incorporados tabela, os quais
so opcionais, sendo utilizados apenas se necessrio. So eles:
Border: configura a borda da tabela. Nesse caso, pode vir assim definido:
border=n, em que n define a espessura da borda. Se n for zero, significa que a tabela sem borda; alterando o n para qualquer outro nmero,
este definir a borda que se deseja naquela tabela.
Align: define o alinhamento horizontal do contedo dentro da tabela. Os
valores determinados para esse alinhamento so:
41
e-Tec Brasil
Left esquerda
Center no centro
Right direita
Se esses valores forem inseridos entre as tags <td>...</td> define o alinhamento dentro da clula. Caso queira definir o alinhamento de toda a tabela,
necessrio inserir os valores entre as tags <table>...</table>.
Valign: define o alinhamento vertical do contedo dentro da tabela. Os valores definidos para esse alinhamento so:
Top ao alto
Middle ao meio
Bottom embaixo
Como acontece com o align, se esses valores forem inseridos entre as tags
<td>...</td>, ser definido o alinhamento dentro da clula. Para definir o
alinhamento de toda a tabela, necessrio inserir os valores entre as tags
<table>...</table>.
Na tabela criada na atividade anterior, exercite os atributos vistos at aqui.
So eles: border, align e valign.
2.5 Imagens em HTML

As imagens utilizadas na pgina da web so, em sua maioria, nos formatos GIF, JPEG ou PNG, sendo GIF e JPEG os mais comuns.
importante que o tamanho da imagem esteja entre 15KB e 80KB, pois
imagens muito grandes demoram mais para carregar.
Caso a imagem que deseja inserir no esteja em nenhum desses formatos, necessrio convert-la com a ajuda de software, como CorelDRAW
ou GIMP, entre outros, como veremos frente.
e-Tec Brasil
42
H vrios sites que disponibilizam imagens de botes (imagens utilizadas

nos websites para indicar o caminho de uma pgina ou link), texturas,
fotos, animaes (arquivo GIF animado) para download gratuito, como
os botes exemplificados na Figura 2.7 a seguir.
Figura 2.7: Exemplo de imagens de botes

Fonte: http://office.microsoft.com/pt-br/images/results.aspx?qu=bot%C3%A3o#ai:MC900432679|
2.6 Atributos ALT e ALIGN

Atributos so caractersticas de determinadas tags; a maior parte das tags do
HTML possui atributos. Nesta seo abordaremos as tags que tm a funo
de alinhar as imagens na pgina.
2.6.1 Sons e vdeos

Para inserir vdeo ou som, utilizado o marcador <EMBED>.
preciso especificar o nome do arquivo por meio do atributo SRC; veja no
exemplo 4 e o resultado na Figura 2.8 a seguir.
Exemplo 4:
43
e-Tec Brasil
Resultado:
Figura 2.8: Exemplo de insero de som na pgina

Para inserir um vdeo, importante levar em considerao o formato do arquivo,

j que esse recurso depende de extenses ou plugins instalados no navegador.
O vdeo possui tambm outros atributos que podem alterar o modo de visualizao; como exemplo podemos citar:
Loop: ajustado com o valor TRUE, o vdeo configurado para tocar indefinidamente; isso quer dizer que, enquanto voc estiver acessando a pgina, o
vdeo passar sem que o usurio tenha a opo de par-lo.
Controller: permite mostrar ou no o controle do vdeo.
False: no mostra o controle.
True: mostra o controle.
Autoplay: permite executar o vdeo, automaticamente, aps ser carregado.
False: no executa o vdeo.
True: executa o vdeo.
Width e Height: define a rea de apresentao do vdeo.
Observe com ateno o exemplo 5 e o resultado de um exemplo de insero
de vdeo em uma pgina web na Figura 2.9 a seguir.
e-Tec Brasil
44
Exemplo 5:
Resultado:
interessante que o arquivo

da imagem esteja no mesmo
diretrio que o documento
HTML; caso no esteja,
necessrio passar o caminho
completo.
Figura 2.9: Exemplo de insero de vdeo na pgina

No arquivo desenvolvido at aqui, acrescente uma imagem correspondente

ao tema escolhido para desenvolver seu site.
2.7 Atributos width e height

Esses atributos permitem alterar as dimenses da imagem, independentemente do seu tamanho real, observe como utiliz-los no exemplo 6.
Width= n n o nmero que determina a largura da figura, definido em
pixels ou em porcentagem.
Heigth= n n o nmero que determina a altura da figura, definido em
pixels ou em porcentagem.
No exemplo 6 temos o cdigo para alterao das dimenses; a imagem e o
resultado dessa alterao so visualizados na Figura 2.10 a seguir.
Exemplo 6:
45
e-Tec Brasil
Resultado:
Figura 2.10: Exemplo de alterao das dimenses da imagem

2.8 Atributo background

o atributo usado em HTML para inserir imagens de segundo plano; se esse
atributo estiver inserido na tag <td>, a imagem de segundo plano ser inserida na clula. Quando o atributo for inserido na tag <table>, a imagem ser
inserida na tabela e, quando estiver contido na tag <body>, a imagem ser
inserida na pgina como um todo. No exemplo 7 a seguir vemos a utilizao
do atributo background, e o seu resultado na Figura 2.11 a seguir.
Background= [caminho][nome da figura]
caminho
Indica em qual diretrio est
localizada a figura a ser exibida.
Caso a imagem se encontre no
mesmo diretrio da pgina que
conter essa figura, seu caminho
poder ser suprimido.
Exemplo 7:
Resultado:
Figura 2.11: Exemplo de segundo plano

e-Tec Brasil
46
Responda s questes:
Qual a definio da tag <table>?
Qual o atributo utilizado para definir espaamento entre as clulas de uma
tabela?
Qual a definio do atributo width=n da tag <table>?
Utilizando o arquivo desenvolvido, crie um texto e aplique os quatro tipos de
alinhamento (align=right, left, center, justify).
2.9 Formatao de textos

Para formatar o texto do HTML, conheceremos algumas tags importantes;
elas nos ajudaro a definir tipo de fonte, tamanho, cor, quebra de pargrafo,
entre outros.
A tag <font>: usada para definir qual o tipo de fonte o navegador ir usar.
A tag <font> abre e a </font> fecha o trecho a ser formatado. Essa tag tem
os atributos size, color e face, que definem o tamanho da fonte, cor e a
fonte que ser utilizada, respectivamente.
A tag <br>: tem por funo inserir a quebra de linha no ponto em que foi
inserida. O navegador entende que, ao encontrar a tag <br>, deve ir, imediatamente, para a margem esquerda da outra linha, como mostrado no
exemplo 8 e o resultado da formatao de texto na Figura 2.12 a seguir.
Exemplo 8:
47
e-Tec Brasil
Resultado:
Figura 2.12: Exemplo de formatao de texto

Tags de estilo so usadas para definir os estilos de formatao em um texto.

Entre as tags de estilo, podemos citar:
<strong>...</strong>: o texto ser exibido em negrito;
<em>...</em>: o texto ser apresentado em itlico;
<u>...<u>: o texto ser exibido no modo sublinhado;
<S>...<S>: o texto ser exibido no modo tachado;
<big>...</big>: o texto ser exibido em tamanho maior do que o texto ao
seu redor;
<small>...</small>: o texto ser exibido em tamanho menor do que o texto
ao seu redor;
<sub>...</sub>: o texto ser exibido subscrito;
<tt>...</tt>: o texto ser exibido em formato de mquina de escrever.
Agora observe o exemplo 9 e o resultado de formatao de estilo de texto
na Figura 2.13 a seguir.
e-Tec Brasil
48
Exemplo 9:
Resultado:
Figura 2.13: Exemplo de formatao de estilo de texto

Pratique a formatao de texto e estilos de fontes, conforme descrito no

exemplo 9. Lembre-se de utilizar o arquivo que vem desenvolvendo at aqui.
Qual a tag utilizada na quebra de pargrafos? Qual a definio sentena <p
align= center>.... texto do exerccio </p>?
2.10 Vnculos ou links

Vnculos ou links so maneiras como podem ser criadas ligaes entre dois
ou mais documentos HTML.
A tag responsvel pela criao vnculos denominada <a>...</a>, sendo
<a> a tag de abertura e </a> a de fechamento, veja na Figura 2.14 a seguir.
49
e-Tec Brasil
1 2
3
4
5
A HREF= vnculo>texto destaque</A>
Tag de abertura
Arquivo a ser
carregado
Texto a ser
mostrado
na pgina
Tag de fechamento
Figura 2.14: Partes que compem um vnculo

Fonte: Adaptado de Alves (2009)
1. Tag de abertura.
2. Atributo.
3. Nome do arquivo a ser carregado.
4. Texto a ser mostrado na pgina; geralmente, ganha destaque por estar
na cor azul.
5. Tag de fechamento.
e-Tec Brasil
50
Resumo
Com a concluso desta Aula, voc dever estar apto a reconhecer a linguagem HTML e a utiliz-la. Nela voc descobriu que HTML uma linguagem
utilizada para criar pginas web. HTML a abreviao de Hyper Text Markup
Language (linguagem de criao de hipertexto) e usada para estruturar
uma pgina web. Descobriu tambm que, usando HTML, marcamos o contedo com tags para oferecer a estrutura e que chamamos as tags correspondentes e seu contedo de elementos.
Um elemento composto por trs partes: uma tag de abertura, contedo e
uma tag de fechamento. H alguns elementos, como <img>, que so uma
exceo a essa regra. Suas pginas sempre devero possuir um elemento
<HTML> em conjunto com um elemento <head> e um elemento <body>.
Enfim, os diversos conhecimentos adquiridos at aqui sero importantes
para o bom andamento da prxima Aula, que discutir o CSS, uma linguagem de estilo que define o layout de documentos HTML.
1. Qual o principal atributo da tag <img>?
2. Quais atributos servem para definir largura e altura de uma imagem?
51
e-Tec Brasil

Objetivos
Compreender o conceito de CSS.
Entender a criao de estilos.
Conhecer o mtodo de aplicao do CSS no documento HTML.
Conhecer o conceito de pseudoclasses e pseudoelementos.
O CSS uma linguagem de estilo que foi desenvolvida para controlar cores,
margens, fontes, linhas, alturas, larguras, imagens de fundo, entre outros.
Pode parecer estranho aprender a controlar todos esses itens, vimos isso
quando estudamos HTML. Realmente, o HTML tem algumas tags com essas
funes; porm, nem sempre sero suficientes para suprir a necessidade de
encontrar meios de construir layouts para os documentos online.
Para suprir a necessidade de novas possibilidades de criao de layouts foi
criado o CSS. Dessa forma, o HTML passou a ser utilizado apenas como linguagem de marcao e estruturao, ficando com o CSS a funo de aplicar
estilos necessrios para a aparncia da pgina desenvolvida.
Com a criao do CSS, houve alguns benefcios para o desenvolvimento de
websites, entre eles: a preciso no controle do layout, a criao da folha
de estilos, possibilitando o controle de vrios documentos a partir de um, a
possibilidade de criar layouts especficos para determinadas mdias, teles e
dispositivos mveis, entre outros.
Para o estudo e desenvolvimento

das atividades deste captulo,
continuaremos a usar o
Notepad++; porm, os arquivos
desenvolvidos sero salvos agora
na extenso .css.
Para aplicao do CSS so criadas folhas de estilos, documento com extenso

CSS que conter os cdigos de definio de estilo de determinado documento, que pode ser de extenso HTML. Essa folha pode ser um documento separado, contendo apenas os cdigos de estilos, vinculado ao arquivo HTML;
ou, ento, esses cdigos podem ser digitados diretamente no arquivo HTML.
Existem trs maneiras de aplicar o CSS em um documento, mostradas a seguir.
53
e-Tec Brasil
3.1 Criando estilos

Os estilos definidos pelo CSS so aplicados conforme a seguinte sntese:
elemento {atributo1: valor; atributo2: valor...}
Podemos descrever cada item dessa sntese como:
Elemento: descreve o elemento de design ao qual o estilo ser aplicado.
Essa a mesma tag HTML, mas sem os sinais de maior e menor. Essa
parte da regra , s vezes, chamada de selector.
Atributo: aspecto especfico do elemento que se quer usar como estilo.
Deve ser um nome de atributo CSS vlido, como o atributo font-size.
Valor: esse item configura a aplicao do atributo. Deve ser uma configurao vlida para o atributo em questo, como 20 pt (20 pontos) para font-size.
Atributo valor: nesse item da sntese pode-se atribuir mltiplas declaraes que podem ser separadas com ponto e vrgula (;). Porm, no ltimo
item no coloque ponto e vrgula.
Veja um exemplo de regra que diz que todos os ttulos de nvel 2 (tags <H2>)
devem ter tamanho de 24 pontos e cor azul:
H2 {font-size: 24pt; color: blue}
Para que fique claro e visvel que voc colocou todos os sinais de ponto e
vrgula e chavetas nos lugares corretos, utilize quebras de linha e espaos em
branco na regra. Exemplo:
P {font-family: Times;
Font-size: 12pt;
color: blue;
margin-left: 0.5in}
O exemplo acima descreve que os pargrafos devero aparecer em fonte Times,
12 pontos, azul, recuada meia polegada, a partir da margem esquerda da pgina.
e-Tec Brasil
54
3.2 Mtodo de aplicao do CSS

no documento HTML
Existem trs mtodos de aplicao do CSS; so eles:
3.2.1 Mtodo inline

Mtodo inline: aplicado usando o atributo style do HTML, acrescenta-se
dentro do atributo style a caracterstica que se deseja obter naquele documento. Com esse mtodo, possvel conseguir poucos efeitos. Os estilos
criados por esse mtodo s afetam a tag na qual ele est inserido, no afeta
outras tags e nem mesmo outros documentos.
Ao utilizar a tag style, no necessrio utilizar os colchetes, nem acrescentar
a tag </style> de fechamento; no CSS as regras devem ser colocadas entre
aspas, separando-as com o ponto e vrgula. Observe o exemplo 10 e o resultado da insero da tag style inline da Figura 3.1 a seguir.
Exemplo 10:
Resultado:
Figura 3.1: Exemplo de insero da tag style inline

3.2.2 Mtodo interno

Este mtodo tambm aplicado utilizando a tag <style> do HTML; porm
nesse mtodo a tag colocada na prpria pgina HTML, ao invs de separado como no mtodo inline.
55
e-Tec Brasil
Veja no exemplo 11, como utilizar o mtodo interno e o resultado na Figura

3.2 a seguir.
Exemplo 11:
Resultado:
Figura 3.2: Exemplo de insero da tag style mtodo interno

3.2.3 Mtodo externo

Nesse mtodo criado um arquivo separado com os estilos. Esse arquivo deve
ser salvo com a extenso .CSS. Deve-se salvar o arquivo no mesmo diretrio
que o arquivo em HTML, como mostra o exemplo na Figura 3.3 a seguir.
Figura 3.3: Exemplo de organizao do diretrio

e-Tec Brasil
56
Para aplicar os estilos em uma nova pgina HTML, basta inserir uma tag <link>
no cabealho que faa referncia ao arquivo .CSS, conforme exemplo12 a seguir.
Note que o caminho para a folha de estilos indicado no atributo href.
Veja que a Figura 3.4 e o exemplo 12 mostram um exemplo da tag style
mtodo externo.
No Anexo Atalhos e atributos
do CSS , voc tem acesso a um
quadro com vrios atributos CSS
e a descrio do que cada um
formata.
Exemplo 12:
Figura 3.4: Exemplo de insero da tag style mtodo externo

Figura 3.5: Exemplo de insero da tag style mtodo interno

Observe na Figura 3.6 o exemplo de um menu com aplicao da CSS.
57
e-Tec Brasil
Resultado:
Figura 3.6: Exemplo de menu com aplicao do CSS

3.3 Pseudoclasses e pseudoelementos

Podem ser usados como seletores no CSS, mas no existem dentro do HTML,
e sim no browser, sob certas condies, para serem usados como ligao
com as folhas de estilo.
So denominados classes e elementos por ser essa a maneira conveniente de descrever seu comportamento. E so usados para especificar
subpartes de elementos; enquanto pseudoclasses permitem s folhas de estilo diferenciar entre tipos diferentes de elementos.
Sntese das pseudoclasses:
selector:pseudo-class {property: value}
Sntese dos pseudoelementos:
selector:pseudo-element {property: value}
O Quadro 3.1 a seguir foi extrado do livro - Use a cabea! HTML com CSS e
XHTML (FREEMAN; FREEMAN, 2008), e mostra, por meio de uma conversa entre o HTML e o CSS, as suas principais diferenas, qualidades e caractersticas.
e-Tec Brasil
58
Quadro 3.1: HTML e CSS sobre contedo e estilo

HTML
CSS
Saudaes, CSS; estou feliz que voc esteja aqui porque

quero esclarecer algumas confuses sobre ns.
mesmo? Que tipo de confuso?
Muitas pessoas pensam que minhas tags dizem ao

browser como exibir o contedo. Isso no verdade! Eu
trabalho com a estrutura e no com a apresentao
Ah! . Eu no gostaria de ver as pessoas te dando crdito

pelo meu trabalho
Bem, voc pode ver como as pessoas podem ficar confusas; afinal possvel utilizar HTML, sem CSS e ainda obter
uma pgina com visual decente.
Decente soa um pouco exagerado, voc no acha?

Quero dizer, a maneira como a maioria dos browsers exibe o HTML puro parece um pouco ordinria. As pessoas
precisam aprender o poder do CSS e como ns podemos
facilmente dar um timo estilo s pginas Web.
Ei, eu tambm sou muito poderoso. Ter seu contedo

estruturado muito mais importante do que ter algo
bonitinho. O estilo muito superficial; a estrutura do
contedo que interessa.
Fala srio! Sem mim as pginas Web seriam muito

chatas. E no apenas isso, tire a capacidade de adicionar
estilo s suas pginas e ningum as levar a srio. Tudo
parecer malfeito e nada profissional.
Nossa, que ego, heim? Acho que eu no poderia esperar

outra coisa de voc. Voc est apenas tentando fazer
uma declarao da moda com todo o estilo sobre o qual
est falando.
Declarao da moda? Um bom design e uma boa

apresentao podem ter um efeito enorme na legibilidade
e usabilidade das pginas. E voc deveria estar contente
porque minhas regras de estilo flexveis permitem que
os designers faam qualquer tipo de coisas interessantes
com seus elementos sem bagunar sua estrutura.
Certo. Na verdade, somos linguagens totalmente diferentes, o que bom, porque eu no gostaria de ter nenhum
dos seus designers de estilo bagunando meus elementos
de estrutura.
No se preocupe, vivemos em universos separados.
E isso obvio para mim, todas s vezes que olho para

CSS, essa linguagem aliengena.
T! HTML pode ser considerada uma linguagem? Algum

j viu algo mais desajeitado do que aquelas tags?
Milhes de escritores Web discordariam de voc. Eu

tenho uma linguagem boa e limpa que se encaixa perfeitamente ao contedo.
D s uma olhada no CSS; so elegantes e simples, e no

sinais de menor e maior patticos<em><to><torno><d
e><tudo>. <Olha><gente><,><eu><posso><falar><
como><o><Sr.><HTML><!>
Ei, que estupidez, j ouviu falar de tags de fechamento?
R! Eu vou te mostrar...Sabe por qu? Eu posso escapar...
Veja bem, no importa aonde voc for, est cercado por

tags <style>. Boa sorte! Ao tentar escapar delas.
Fonte: FREEMAN; FREEMAN, 2008, p. 28
59
e-Tec Brasil
Resumo
No decorrer desta Aula voc pde descobrir que o CSS contm declaraes
simples, chamadas regras. Cada regra fornece um estilo para uma seleo
de elementos HTML. Uma das maneiras mais fceis de incluir estilo no HTML
por meio da tag <style>. O CSS oferece muito controle sobre a aparncia
de suas fontes, incluindo as propriedades font-family, font-weight e
font-style. A partir da prxima Aula, voc conhecer os tipos de imagens
e seus formatos e saber onde aplic-las.
Voc se lembra do site que fez na Aula anterior? Agora, crie uma Folha de
Estilo (um arquivo CSS) pra esse site, e linke todas as pginas. No se
esquea de definir estilos para os cabealhos, os pargrafos, as tabelas, etc.
Use todas as propriedades que voc viu at agora. O outro ponto que vai
ser avaliado aqui a legibilidade; lembre-se do uso adequado das cores e
fontes. Ao trmino, lembre-se de salvar sua atividade.
e-Tec Brasil
60

Objetivos
Conhecer os tipos de imagens e suas aplicaes.
Conhecer o software CorelDRAW.
Conhecer as ferramentas bsicas do CorelDRAW.
Existem dois tipos de imagens: bitmaps ou vetorial. O tipo do arquivo de
imagem definido conforme o armazenamento desta, isto , definido conforme a extenso em que ser salva a imagem. Nesta Aula veremos os
formatos.GIF, JPG e.BMP.
4.1 Imagens bitmaps

As imagens obtidas por fotografia digital ou escaneadas so bitmap, ou seja,
mapeadas por bits. Quer dizer que a imagem est organizada em uma srie
de linhas e colunas formadas por pontos conhecidos como pixels.
Pixek
o menor elemento de uma
imagem.
Os pontos so distribudos em x pixels de altura, y pixels de largura e z pixels

de profundidade.
Y
Pixel
X
Z
Figura 4.1: Pixels de uma imagem bitmap
61
e-Tec Brasil
Profundidade a quantidade de cores por pixel, ou seja, o nmero de cores

que uma imagem capaz de reproduzir, sendo medidas em bits. Assim, uma
imagem de apenas 2 bits exibe apenas 2 cores (21) preto e branco. Quanto
maior a quantidade de bits de uma imagem por pixel, maior ser a quantidade
de cores exibida pela imagem. Veja o Quadro 4.1 a seguir.
Quadro 4.1: Nmero de cores por bits de imagem
Profundidade da cor
Nmero de cores
Bits de imagem (expoente)
21
22
16
24
64
26
128
27
256
28
16
16 bit (true color), 65.536 cores
216
24
24 bit (true color), 16.777.216 cores
224
24 bit (true color), canal alfa, 16.777.216 de

cores
Fonte: Adaptada de Oliviero (2001)
32
232
A resoluo da imagem proporcional quantidade de pixels contida em uma

polegada quadrada. Normalmente, a resoluo medida em dpi dots per inch
(pontos por polegadas). Quanto maior a resoluo da imagem, maior ser o
tamanho deste arquivo.
Figura 4.2: Resoluo da imagem

e-Tec Brasil
62
As imagens criadas para serem inseridas em websites no precisam ter mais que
72 dpi, pois, alm de ser uma resoluo satisfatria para esse tipo de aplicao,
a maioria dos monitores que esto no mercado no suporta resolues maiores.
Resolues maiores que 72 dpi so necessrias apenas quando o objetivo
imprimir a imagem; as impressoras laser ou jato de tinta disponveis no mercado suportam resolues que variam de 150 a 1.200 dpi. Conforme pode
ser notado na Figura 4.2, as dimenses de uma imagem podem ser definidas
pela sua largura e altura em pixels.
4.2 Imagens vetoriais

Imagens vetoriais ou ilustraes vetoriais so construdas por intermdio de clculos matemticos, coordenadas cartesianas e denominadas vetores. As imagens
vetoriais podem ser redimensionadas em qualquer escala, sem perda de qualidade; independentemente de serem impressas ou de estarem sendo vistas em
monitores, elas tambm ocupam um espao menor que as imagens bitmaps.
A imagem vetorial composta por elementos sobrepostos e independentes
um do outro, o que permite a sua edio. Porm, as imagens no possuem
qualidade fotogrfica.
Na web essas imagens so muito utilizadas na construo de elementos
grficos e botes.
Figura 4.3: Exemplo de imagem vetorial

Fonte: http://office.microsoft.com/pt-br/clipart/download.aspx
Para utilizarmos imagens vetoriais na web, necessrio convert-las para bitmap, o que pode ser feito no mesmo software utilizado para criao da imagem.
63
e-Tec Brasil
4.3 Formatos de imagens
4.3.1 GIF CompuServe Graphics

Interchange Format
Formato muito utilizado no ambiente da internet. Tem como formato padro o uso de 256 cores que correspondem a 8 bits; alm disso, suas combinaes simulam outras cores.
Tem a vantagem de no perder qualidade quando alterado o seu tamanho
original e ocupa pouco espao no computador; por isso considerado perfeito para o desenvolvimento de pginas para internet.
O GIF pode ser utilizado para a criao de imagens animadas; porm, GIFS
animados so mais pesados e, por isso, levam mais tempo para serem carregados pelo navegador.
Segundo Olivero (2001), o formato GIF usa tcnica de compresso denominada LZW (Lempel-Ziv-Welsch), que comprime uma imagem sem perdas em
sua qualidade. Assim, um navegador, ao descomprimir uma imagem do tipo
GIF, vai exibi-la com a mesma aparncia da imagem original.
Figura 4.4: Exemplo de imagem em formato .GIF

Fonte: Office Microsoft, 2011
e-Tec Brasil
64
4.3.2 BMP Bitmap

uma imagem bitmap sem compresso da informao, o que a torna grande para ser utilizada na web.
um formato comum, o qual todos os programas grficos conseguem abrir e ler.
4.3.3 JPG (ou JPEG) - Joint Photographic

Experts Group
O JPG muito utilizado em trabalhos para o ambiente da internet; porm,
ao ter o seu tamanho alterado, perde qualidade.
Trabalha com 24 bits, o que corresponde a milhes de cores, o que o torna
um excelente formato para imagens fotogrficas. Geralmente so arquivos
pequenos, sendo possvel ter um formato menor que em formato GIF.
Esses so os principais tipos de imagens utilizados na web. No Quadro 4.2
possvel ver seus formatos e suas principais caractersticas, vantagens e
desvantagens.
Quadro 4.2: Caractersticas dos formatos de imagens
Formato da
imagem
Caractersticas
GIF
Graphics Interchange Format
N de cores: at 256
cores (8 bits).
Compresso: Sim.
Perda de informao:
No.
Transparncia: Sim.
BMP Bitmap
N mximo de cores:
at 16 milhes de
cores (24 bits).
Compresso: No tem.
Perda de informao:
No aplicvel.
Transparncia: No.
Vantagens
Desvantagens
Observaes
Tem compresso,
sem perda de
informao. Indicado
para esquemas, grficos de barras, etc.
S permite um armazenamento mximo de

256 cores. No indicado
para fotografias nem
imagens fotorrealistas
(muitas cores).
Com compresso
LZW.
No tem perda de
informao.
Por no ter compresso, os ficheiros so

muito grandes. Caso
a imagem tenha 16
milhes de cores, cada
pixel ocupa sempre 24
bits (3 bytes).
Sem compresso.
Continua
65
e-Tec Brasil
JPG (ou JPEG)

Joint Photographic
Experts Group
N de cores: Sempre 16
milhes de cores (mesmo que a imagem tenha
menos cor) (24 bits).
Compresso: Sim.
Perda de informao:
Sim
Transparncia: No.
Armazena sempre
informao referente a 16 milhes de
cores. Algoritmo de
compresso muito
eficaz. Indicado para
fotografias e imagens fotorrealistas.
Como o algoritmo
de compresso, tem
perda de informao. Cada vez que
fazemos guardar o
ficheiro, volta a perder
informao. No indicado para esquemas e
grficos de barras (por
exemplo) porque o
algoritmo no est otimizado para transies
abruptas de cor.
Muito pequeno. Ideal para colocar em

pginas de internet
e enviar por e-mail.
Concluso
Fonte: Adaptada de Oliviero (2001)
O Quadro 4.3 foi extrado do livro Use a cabea! HTML com CSS e XHTML
(FREEMAN; FREEMAN, 2008), e mostra, por meio de uma conversa entre o
JPG e o GIF, suas principais diferenas e qualidades.
Quadro 4.3: JPG e GIF comparam suas imagens
JPG
Ol, GIF. No foi voc que eu vi agora mesmo em

uma pgina web?
Ah! Assim que voc se tornar bom em representar
imagens complexas, como fotos, tenho certeza de
que as pessoas ficaro felizes em escolher voc, mas
voc ainda no sabe como representar nada que
precise de mais de insignificantes 256 cores.
Voc quer falar comigo sobre qualidade? Eu deixo
meus usurios utilizarem exatamente a qualidade
que eles desejam.
Isso verdade, mas a maior parte das pessoas est
mais do que satisfeitas com isso. Nem todo mundo
precisa de imagens de altssima resoluo em suas
pginas. Comigo, os usurios normalmente podem
escolher uma configurao de qualidade baixa ou
mdia se estiverem satisfeitos com a qualidade das
imagens. E, se utilizassem voc, teriam arquivos
imensos para a mesma imagem.
Ah, claro, GIF funciona muito bem nesses casos, mas
apenas se houver um pequeno nmero de cores. Voc
apenas uma verso minha menos equipada. Eu
posso fazer tudo o que voc faz.
O que? GIF? Estamos no meio de um programa aqui.
Aonde voc foi?
G IF
... No seria timo se as pessoas ficassem somente com
o GIF? Ento, eu no precisaria encontrar voc com tanta
frequncia. Ei, representar fotos fcil, se voc quer perder
qualidade. Mas eu sou todo qualidade. Se eu no puder
representar totalmente uma, no farei isso. D uma olhada
em alguns dos logos que voc tentou representar ... Eca!
T, mas a que custo? Encare a verdade: para fazer com que
uma foto fique de um tamanho razovel para ser transmitida
pela web, voc precisa perder um pouco de qualidade na
imagem.
Certo, certo, mas voc j olhou para as linhas, logos, pequenos textos, cores slidas? Eles no ficam to bem em JPG.
(GIF literalmente desaparece).
(GIF reaparece).
No precisa entrar em pnico. Estou apenas mostrando algo
a voc. Se JPG to genial, como que voc no consegue
tornar partes de suas imagens transparentes como eu? Com
a transparncia, o que est atrs da imagem pode ser visto.
Se meus usurios quiserem um logo em uma pgina web, e a
pgina tiver um fundo colorido, eles me utilizaro, pois sabem
que eu deixarei o fundo aparecer atravs de partes do logo
que no possuem cor.
Claro, e ento algum altera a cor da pgina web. Sem
chance. A transparncia o caminho e, para us-lo, voc
precisa de mim.
Continua
e-Tec Brasil
66
Eu acho que voc supervaloriza essa coisa de transparncia digo, voc precisa apenas colocar aquela
cor de fundo na imagem.
Bem, no estou muito preocupado com isso; no h
muitas fotos sem fundo.
E quando isso aconteceria?
Ah, t. Fique com seus logos e imagens de texto
simples, e eu ficarei com as fotos e as imagens
complexas. Todo mundo sabe que eu sou melhor para
lidar com a complexidade.
Ah, ? E que tal se voc quiser recortar a foto de algum, ou

mesmo de uma rvore, e coloc-la em uma pgina web sem
um fundo?
Voc ficaria surpreso com a quantidade de vezes em que
sou usado para representar fotos, s porque meus usurios
desejam um fundo transparente.
Ei, algum est me pedindo para fazer uma transparncia ...
Tenho que correr.
Concluso
Fonte: FREEMAN; FREEMAN, 2008, p. 29
Quais os padres de imagens mais utilizados na web e por qu?
4.4 CorelDRAW
um programa de desenho vetorial bidimensional para design grfico, desenvolvido pela Corel Corporation, Canad. um aplicativo de ilustrao
vetorial e layout de pgina que possibilita a criao e a manipulao de
vrios produtos, como: desenhos artsticos, publicitrios, logotipos, capas de
revistas, livros, CDs, imagens de objetos para aplicao nas pginas de internet (botes, cones, animaes grficas, etc.), confeco de cartazes, etc.
Segundo Oliviero (2001), o CorelDraw um software que permite a criao
de grficos vetoriais compactos para web, dentre outras funcionalidades,
podemos reduzir o tamanho final de um arquivo para dowloand mais rpido
de pginas da web, atravs do uso de filtros JPG, GIF e PNG.
Saiba mais sobre o CorelDRAW

em: www.corel.com.
Ao ser executado, o Corel apresenta a tela da Figura 4.5, que permite que
voc escolha: abrir novo desenho, abrir os ltimos arquivos editados, abrir
arquivo salvo em disco, abrir template, ou seja, modelo predefinido, abrir
tutorial e ver as atualizaes dessa verso do software em relao anterior.
Nesta tela escolheremos a opo novo, o que nos levar tela principal do
CorelDRAW.
67
e-Tec Brasil
Figura 4.5: Tela de abertura do CorelDRAW X3

Fonte: CorelDRAW X3
As Figuras 4.6 e 4.7 mostram, respectivamente, a tela do ambiente de trabalhocom a pgina para criao de um novo arquivo, ou com arquivo j
criado. Como voc pode notar, o ambiente de trabalho do CorelDRAW X3
composto por diversas janelas, cada uma com sua funo especfica.
Figura 4.6: Ambiente de trabalho do CorelDRAW X3

Fonte: CorelDRAW X3
e-Tec Brasil
68
Figura 4.7: Tela do ambiente de trabalho com imagem j criada

Figura 4.8: Janela de aplicativos do CorelDRAW X3

Fonte: CorelDRAW X3
69
e-Tec Brasil
Quadro 4.4: Descrio dos aplicativos do CorelDRAW

Parte
Descrio
Caixa de ferramentas
Uma barra flutuante com ferramentas para criao, preenchimento e modificao de

objetos no desenho.
Barra de ttulo
A rea que exibe o ttulo do desenho aberto no momento.
Barra de menus
A rea que contm opes de menu pull-down.
Barra de ferramentas
Uma barra de encaixe que contm atalhos para menus e outros comandos.
Janela de desenho
A rea fora da pgina de desenho circundada por barras de rolagem e controle dos
aplicativos.
Barra de propriedades
Uma barra de encaixe com comandos relacionados ferramenta ou ao objeto ativo. Por
exemplo, quando a ferramenta texto est ativa, a barra de propriedades de texto exibe
comandos que criam e editam texto.
Janela de encaixes
Uma janela que contm os comandos disponveis e as configuraes relevantes para uma
ferramenta ou tarefa especfica.
Rguas
Bordas horizontais e verticais que so utilizadas para determinar o tamanho e a posio

dos objetos em um desenho.
Navegador de documentos
A rea na parte inferior esquerda da janela do aplicativo, que contm controles para a
movimentao entre as pginas e a adio de pginas.
Pgina de desenho
A rea retangular dentro da janela de desenho. Trata-se da parte da rea de trabalho que
pode ser impressa.
Barra de status
Uma rea na parte inferior da janela do aplicativo que contm informaes sobre propriedades do objeto, como tipo, tamanho, cor, preenchimento e resoluo. A barra de status
tambm mostra a posio atual do mouse.
Navegador
Um boto no canto inferior direito que abre uma pequena exibio para ajud-lo a se
mover em um desenho.
Paleta de cores
Uma barra de encaixe que contm amostras de cores.
Fonte: Adaptado do Guia do usurio da sute de aplicativos grficos CorelDRAW
4.4.1 Caixa de ferramentas

Do lado esquerdo da tela possvel ver a caixa de ferramentas. L voc encontra
as ferramentas necessrias para a edio e vetorizao de imagens. importante conhecermos uma a uma, pois este o conjunto de ferremantas mais importante do Corel. Com elas podemos modificar, criar e preeencher desenhos.
4.4.2 Menus desdobrveis

Voc pode notar que algumas ferramentas tm uma pequena seta em sua parte
inferior; ao clicarmos ali, possvel vermos o menu desdobrvel, ferramentas
que possuem funes relacionadas ou interligadas ferramenta que est visvel.
e-Tec Brasil
70
Como exemplo, podemos citar a ferramenta editar forma; quando acessamos o menu, encontramos as ferramentas: forma, pincel borrar, pincel
spero e transformao.
No Quadro 4.5 veremos cada ferramenta e suas respectivas funes.
Quadro 4.5: Descrio das ferramentas do CorelDRAW
Ferramenta
Funo
Seleo
Ferramenta usada para selecionar, dimensionar, inclinar e girar os objetos no programa.
Editar forma
Forma: editar a forma dos objetos.

Pincel borrar: distorcer um objeto em vetor sendo arrastado sobre ele.
Pincel spero: distorcer o contorno quando arrastado sobre o objeto.
Transformao: transformar os objetos usando recursos na barra de propriedades rotao
livre, reflexo angular livre, escala livre e inclinao livre.
Cortar
Cortar: permite mover reas indesejadas dos objetos.

Faca: permite cortar objetos.
Borracha: permite apagar reas do desenho.
Excluir segmento virtual: permite excluir as partes de objetos entre inseres.
Zoom
Zoom: altera nvel de ampliao na janela de desenho.

Mo: controla que parte do desenho fica visvel na janela do desenho.
Curva
Mo livre: permite desenhar segmentos de linhas nicos e curvas.

Bzier: permite desenhar curvas, um segmento de cada vez.
Mdia artstica: fornece acesso s ferramentas pincel, espalhador, caligrfico e presso.
Caneta: permite desenhar linhas curvas no modo de visualizao.
Curva de 3 pontos: permite desenhar curvas e definir os pontos iniciais, final e central.
Conexo: une dois objetos por uma linha.
Dimenso: desenha linhas de dimenses verticais, horizontais, inclinadas ou em ngulo.
Ferramentas inteligentes
Preenchimento inteligente: permite criar objetos, a partir de reas contornadas para,

ento, aplicar um preenchimento.
Desenho inteligente: converte pinceladas mo livre, em formas bsicas e curvas suaves.
Retngulo
Retngulo: permite criar quadrados e retngulos;

Retngulo com 3 pontos: permite desenhar retngulos em ngulo.
Elipse
Elipse: permite desenhar elipses e crculos.

Elipse com 3 pontos: permite deenhar elipses em ngulo.
Objeto
Polgono: permite criar estrelas e polgonos simtricos.

Estrela: permite criar estrelas perfeitas.
Estrela complexa: estrelas complexas que apresentam lados com insero.
Papel grfico: simula um papel quadriculado.
Espiral: permite desenhar espirais simtricas e logartmicas.
Formas perfeitas
Formas bsicas: traz vrias formas bsicas que podem ser usadas em nossos trabalhos.
Formas de seta: setas de diversas formas, direo e nmero de pontas.
Formas de fluxograma: permite desenhar smbolos de fluxograma.
Formas de banner: modelos de objetos de fita e formas de exploses.
Formas de legenda: permite desenhar legendas e etiquetas.
Texto:
Permite a digitao de palavras como texto artstico ou de pargrafo.
Tabela
Permite desenhar e editar tabelas.

Continua
71
e-Tec Brasil
Ferramentas interativas
Mistura: mistura dois objetos.

Contorno: aplica contorno a um objeto.
Distorcer: distoro do tipo empurrar e puxar, zper e torcer (na barra de propriedades).
Sombreamento: aplica sombras aos objetos.
Envelope: d forma a um objeto arrastando os ns do envelope.
Extruso: aplica a iluso de profundidade a objetos.
Transparncia: aplica transparncias aos objetos.
Conta-gotas
Conta-gotas: copia as propriedades do objeto.

Balde de tinta: permite aplicar as propriedades copiadas com o conta-gotas aos objetos.
Contorno
Abre menu desdobrvel para acesso rpido s configuraes de contorno.
Preenchimento
Menu desdobrvel para acesso s caixas de dilogo Preenchimento.
Preenchimento interativo
Preenchimento interativo: permite aplicar vrios preenchimentos.

Preenchimento de malha: Permite aplicar uma grade de malha a um objeto.
Concluso
Fonte: Adaptado do Guia do usurio da sute de aplicativos grficos CorelDRAW
Resumo
No decorrer deste captulo voc pde descobrir que:
Um pixel o menor ponto que pode ser representado na tela. Cada imagem
composta por milhares de pixels. Dependendo de seu monitor, pode haver
algo em torno de 72 a 120 pixels em uma polegada.
JPG e GIF so os dois formatos para imagens, amplamente, suportados por
browsers web. O formato JPG o melhor para fotografia e o formato GIF o
melhor para logos e outras figuras simples com cores slidas, linhas ou texto.
Voc conheceu o CorelDRAW, um programa de desenho vetorial bidimensional, utilizado para fazer ilustrao vetorial e layout de pgina, que possibilita a criao e a manipulao de vrios produtos. Na prxima aula, voc
conhecer o Photoshop, software caracterizado como editor de imagens
bidimensionais do tipo raster.
1. Faa a vetorizao de uma imagem simples, um boneco de neve, por
exemplo. Nesta primeira atividade, voc ter o passo a passo para facilitar sua familiarizao com as ferramentas. As imagens e o passo a passo
para o desenvolvimento dessa atividade encontram-se no Apndice 1.
2. Depois de concluda a atividade do boneco de neve, vamos construir um
boto. Este um objeto muito utilizado em pginas da internet. Voc
encontrar a imagem e o passo a passo no Apndice 2.
e-Tec Brasil
72
Aula 5 Software de edio

de imagem (GIMP)
Objetivos
Conhecer o software GIMP.
Aprender a utilizar as principais ferramentas do GIMP.
No decorrer desta aula utilizaremos um programa de cdigo aberto, o GIMP

(GNU Image Manipulation Program). Voc poder fazer o download gratuitamente do GIMP, no site http://www.gimp.org/. Ou, se preferir, poder
fazer o download no formato porttil, caso no queria instalar o programa
no computador que utiliza para estudar.
Figura 5.1: Wilber, mascote ocial do GIMP

Fonte: GIMP v.2.6.11, 2011
O GIMP um software para criao e edio de imagens de bitmap e tambm

suporta formatos vetoriais. Na primeira vez que o GIMP for aberto, voc ser
levado ao ambiente de trabalho padro. Esse ambiente poder ser customizado.
73
e-Tec Brasil
Figura 5.2: rea de trabalho do GIMP

Fonte: GIMP v.2.6.11, 2011
Conforme pode ser visto na Figura 5.3, ao iniciar o GIMP voc ver uma caixa de ferramentas, camadas e os menus de acesso a operaes como salvar
arquivo, editar, exibir janelas, etc.
5.1 Abas e janelas

O GIMP j vem com o recurso de abas ativo. Assim como as abas, as janelas
funcionam como caixas de dilogo que nos permitem selecionar opes e
fazer uso dos seus recursos.
5.2 Caixa de ferramentas

Na caixa de ferramentas esto disponveis as ferramentas necessrias para
trabalhar com o GIMP. Observe que em todas as ferramentas, o dilogo
opes de ferramentas exibe as opes da ferramenta selecionada, que
permite customiz-la.
e-Tec Brasil
74
Figura 5.3: Caixa de ferramentas do GIMP

Fonte: GIMP v.2.6.11, 2011
75
e-Tec Brasil
5.2.1 Ferramentas de seleo

As ferramentas a seguir so destinadas seleo, no fazem qualquer alterao na imagem:
Figura 5.4: Ferramentas de seleo

Fonte: GIMP v.2.6.11, 2011
Quadro 5.1: Descrio das ferramentas de seleo do GIMP

Ferramenta
Funo
Para utilizar a ferramenta seleo retangular, basta selecion-la na caixa de
ferramentas, em seguida clicar na janela da imagem arrastando o mouse (com
o boto pressionado), criando uma seleo, que indicada por um contorno
tracejado intermitente.
Na caixa de dilogo opes de ferramentas temos as opes de modo
que indicam como a seleo que est sendo criada poder ser combinada com
alguma outra. As opes para esse modo so:
Seleo retangular
Substituir a seleo atual: o retngulo criado na imagem se torna uma

nova seleo, e a seleo que existia anteriormente descartada.
Adicionar seleo: um novo retngulo passa a fazer parte da seleo j
existente, adicionando-se a ela.
Subtrair da seleo: faz com que o retngulo desenhado seja excludo da
seleo. S tem efeito se j existir uma seleo,
Interseco com a seleo atual: faz com que apenas as reas previamente selecionadas que estavam dentro do retngulo desenhado permaneam
selecionadas, mas s tem efeito se j existir uma seleo anterior.
Seleo elptica
Esta ferramenta de seleo usa as mesmas opes que a ferramenta de seleo

retangular, s que desenha uma elipse.
Seleo livre
Essa ferramenta permite uma seleo mais refinada, traando-se diretamente

com o mouse os contornos da seleo.
A seleo contgua, tambm chamada de varinha mgica. Com ela possvel selecionar todas as cores similares cor da regio em que foi clicada.
Seleo contgua
Ainda podemos usar a opo de menu Seleo->Inverter para ter os objetos,

em vez do fundo, selecionados.
A opo mais importante para esta ferramenta o limite ela indica o
quanto as cores similares tm que ser prximas da cor original.
Continua
e-Tec Brasil
76
Seleo de cor
Funciona de forma bem similar seleo de regies contguas, selecionando

simultaneamente cores similares em toda a imagem.
Tesoura
Esta ferramenta tambm serve para selees em torno de objetos; nesse caso,
a ferramenta tesoura tenta adivinhar o contorno do objeto que se quer recortar.
Mantm as mesmas opes que a ferramenta de seleo retangular.
Tambm utilizada como ferramenta de seleo, clicando nos pontos de controle
desejados o GIMP unir esses pontos de controle com segmentos de reta.
Podemos ainda clicar em cada segmento e arrast-los em forma de curva para
ter o contorno desejado.
Nessa ferramenta temos os seguintes modos de edio:
Vetores
Criao: modo padro.

Editar: quando se clica no ponto inicial de um componente do vetor, aquele
componente fechado, podendo ser convertido para uma seleo, ou simplesmente iniciar outro componente do vetor.
Mover: move o vetor selecionado, mantendo-se todo o restante da imagem.
Seleo de cores
Seleciona a cor da regio escolhida, exibindo seus valores e colocando-a como

cor ativa do GIMP.
Zoom
Permite a visualizao na tela em escala diferente. Um arquivo aberto no faz

qualquer alterao na imagem.
Medidas
Informa a distncia entre dois pontos na imagem, e o ngulo formado entre

a linha que une esses dois pontos e a horizontal. Esta ferramenta no faz
nenhuma alterao na imagem.
Mover
Esta ferramenta permite que uma parte da imagem, ou uma camada, seja arrastada com o mouse para qualquer outro ponto do espao da imagem. Ao ser
usado sobre uma seleo ativa, deve-se clicar e arrastar o mouse. O contedo
da seleo movido para outra parte da imagem.
Alinhamento
Com esta ferramenta voc pode alinhar ou arranjar camadas e outros objetos.
Nas opes da ferramenta, voc pode optar por alinhar: primeiro item, imagem,
seleo, camada ativa, vetor ativo ou canal ativo, e os alinhamentos podem ser:
esquerda, direita ou centralizado, alm de distribuir em cima, embaixo ou
no meio do objeto.
Sua utilizao bem simples: basta traar-se um retngulo na imagem e em
seguida apertar a tecla Enter para confirmar a ao.
Corte
Nas suas opes podemos optar por cortar somente na camada atual, ou seja,
o corte ser efetuado somente na camada ativa, e no na imagem toda.
Poderemos tambm utilizar a ferramenta para permitir o aumento, fazendo com
que a ferramenta de cortar tambm possa adicionar espao para que sejam inseridas mais informaes na imagem, alm dos limites da imagem ou camada atuais.
Concluso
Fonte: Adaptado de Calligaris, 2005
77
e-Tec Brasil
5.2.2 Ferramentas de transformao

As ferramentas a seguir partilham opes em comum e de fato causam alteraes na imagem.
Figura 5.5: Ferramentas de transformao
Quadro 5.2: Descrio das ferramentas de transformao do GIMP

Ferramenta
Funo
Rotacionar
Permite rotacionar livremente, ao redor de um centro arbitrrio, uma camada ou seleo. Ao

clicar na imagem, automaticamente a camada que tem o primeiro pixel visvel na regio clicada
selecionada para rotao. Uma caixa de dialogo aberta em seguida e pode-se digitar a
angulao em que se deseja rotacionar a imagem.
Redimensionar
Permite que se redimensionem partes ou detalhes de uma imagem. Uma caixa de dilogo
aberta em seguida e pode-se digitar as medidas em que se deseja redimensionara imagem.
Inclinar
Essa ferramenta permite distorcer um objeto para obteno de um efeito. Uma caixa de dilogo
aberta em seguida e pode-se digitar as medidas em que se deseja inclinar a imagem.
Perspectiva
Permite que se posicione, de forma independente, os quatro pontos dos cantos do retngulo a
ser transformado, de forma que a imagem final se ajuste nesses quatro pontos Esta ferramenta
pode tambm ser utilizada para rotao, espelhamento, redimensionamento, inclinao bastando-se posicionar os quatro cantos do objeto a ser transformado de acordo com o desejado.
Espelhar
Esta ferramenta espelha na horizontal ou na vertical os contedos da seleo.
Texto
Esta ferramenta cria ou edita camadas de texto. Para us-la, basta clicar-se na imagem; em
seguida, abrir-se- uma caixa de dilogo, onde se poder digitar o texto desejado. No menu de
opes possvel escolher a fonte desejada, tamanho e cor da fonte.
5.2.3 Ferramentas de pintura

A seguir apresentam-se as ferramentas de pintura.
Figura 5.6: Ferramentas de pintura
e-Tec Brasil
78
Quadro 5.3: Descrio das ferramentas de pintura do GIMP

Ferramenta
Funo
Preenchimento
O uso desta ferramenta permite que uma rea da imagem seja preenchida com
uma cor slida ou com uma textura. Basta clicar no ponto da imagem em que se
deseja iniciar o preenchimento, e este acontecer, na camada ativa, e selecionar
nas opes da ferramenta o tipo do preenchimento: cor de frente, cor de fundo
ou textura. Ainda selecionar em quais reas ser aplicado o preenchimento.
Mistura
Ou preenchimento com degrad. Para usar a ferramenta, basta clicar na imagem,

segurar o boto do mouse pressionado, e arrastar o cursor at um ponto mais
ou menos distante. O degrad recobrir a imagem de forma que a primeira cor
seja atribuda ao ponto de origem, e esta cor v variando at que a ltima cor do
degrad coincida com o ponto onde o boto foi liberado. A forma e variao das
cores do degrad vai depender das opes selecionadas para a ferramenta.
5.2.4 Ferramentas de desenho
Figura 5.7: Ferramentas de desenho

Fonte: Adaptado de Calligaris (2005)
5.3 Para abrir uma nova imagem

Para abrir uma nova imagem basta clicar em Arquivo > Novo.
Figura 5.9: Abrir uma nova imagem

Fonte: GIMP v.2.6.11, 2011
79
e-Tec Brasil
Observe que ser aberta uma caixa de dilogo Criar uma nova imagem.
Voc poder alterar aspectos bsicos, como tamanho, formato de paisagem
ou retrato, entre outros.
Figura 5.10: Criar uma nova imagem

Fonte: GIMP v.2.6.11, 2011
No menu de opes avanadas podemos alterar a resoluo, sistema de cores e inserir comentrios que podero ser lidos como uma assinatura digital.
Figura 5.11: Menu Opes Avanadas

Fonte: GIMP v.2.6.11, 2011
e-Tec Brasil
80
Porm se quiser abrir uma imagem j existente ento:

1. Clique em Arquivo navegue at a opo Abrir e clique nela.
2. Aparecer um menu no qual voc dever navegar pelos diretrios at encontrar a imagem desejada. Quando a encontrar, basta clicar em OK.
5.4 Recortando uma imagem

Para recortar partes da imagem, necessrio realize os seguintes passos:
1. Localize na caixa de ferramentas a ferramenta corte.
Figura 5.12: Ferramenta Corte

Fonte: GIMP v.2.6.11, 2011
2. Agora, clique e arraste sobre a rea que ser mantida.
Figura 5.13: Caixa de ferramentas do GIMP rea de corte

Fonte: GIMP v.2.6.11, 2011
81
e-Tec Brasil
3. Utilize as alas laterais para ajustar o tamanho e formato do corte. Para

desfazer a seleo da rea, pressione a tecla Esc.
Figura 5.14: Caixa de ferramentas do GIMP

Fonte: GIMP v.2.6.11, 2011
4. Pressione a tecla Enter para recortar.
Figura 5.15: Imagem recortada

Fonte: GIMP v.2.6.11, 2011
e-Tec Brasil
82
5.5 Removendo o fundo da imagem

A ferramenta ideal para esse trabalho a Seleo Contgua. Com ela voc
pode selecionar pixels com tom ou cores semelhantes. Veja como remover
as cores de fundo de uma imagem.
1. Na caixa de ferramenta, selecione a ferramenta Seleo Contgua.
Figura 5.16: Ferramenta Contgua

Fonte: GIMP v.2.6.11, 2011
2. Clique na rea desejada. Sero selecionados os pixels com cor e tons

semelhantes.
Figura 5.17: Fundo selecionado

Fonte: GIMP v.2.6.11, 2011
83
e-Tec Brasil
3. Determine o grau de tolerncia no campo Limite da paleta opes.
Figura 5.18: Diferena de cor

Fonte: GIMP v.2.6.11, 2011
4. Para selecionar vrias reas da imagem, mantenha a tecla Shift pressionada enquanto clica sobre as reas.
5. Pressione a tecla Delete para retirar o fundo da imagem.
Figura 5.19: Imagem com fundo retirado

Fonte: GIMP v.2.6.11, 2011
e-Tec Brasil
84
Agora sua vez de tentar. Que tal escolher uma imagem do seu arquivo e
seguir os passos descritos para praticar a remoo de fundo de imagens? E
que tal inserir um texto nessa imagem? Vamos l, boa sorte!
5.6 Captura de tela

Voc tambm capturar uma imagem da sua rea de trabalho ou de uma
janela especfica:
1. Com menu aberto, clique em Arquivos at a opo Capturar.
Figura 5.20: Captura de janela

Fonte: GIMP v.2.6.11, 2011
2. Depois clique em Capturar tela, e em seguida escolha uma das opes:

Capturar em uma nica janela ou Capturar tela inteira, conforme a
Figura 5.21 seguir.
Figura 5.21: Captura de tela inteira

Fonte: GIMP v.2.6.11, 2011
85
e-Tec Brasil
3. Clique em capturar
Figura 5.22: Tela capturada

Fonte: GIMP v.2.6.11, 2011
5.7 Camadas
As camadas tambm so conhecidas como layers. Com elas podemos dividir
um trabalho, dando tratamento diferente em cada layer.
5.7.1 Efeitos de camadas

Para trabalhar com as camadas, devemos abrir um arquivo e realizar os
seguintes passos:
1. Clique em Arquivo e em seguida em Abrir. Essa camada passar a ser a
camada oficial.
2. Em seguida abra uma nova imagem, clique em Abrir como camadas.
Figura 5.23: Abrir como camadas

Fonte: GIMP v.2.6.11, 2011
e-Tec Brasil
86
3. Ative a caixa de dilogo, clicando em Janelas, em seguida em dilogos de

encaixes e depois em camadas.
Figura 5.24: Dilogos de encaixes

Fonte: GIMP v.2.6.11, 2011
4. A caixa de dilogo Camada se abrir e voc poder explorar as suas

muitas possibilidades.
Figura 5.25: Camadas sobrepor

Fonte: GIMP v.2.6.11, 2011
Resumo
Nesta aula voc conheceu o GIMP, que um software de cdigo aberto, ou
seja, livre e de download gratuito. O GIMP software que tem diversas ferramentas que permitem criar e editar imagens bitmaps e tambm suporta vetores. Com esse software voc viu que possvel tambm recortar uma imagem, remover o fundo de uma figura, trabalhar com camadas, dentre outras
funcionalidades. Na prxima aula, voc conhecer o Adobe Flash CS3, um
software utilizado para produo de animaes, entre outras possibilidades,
que voc poder praticar durante o andamento da disciplina.
87
e-Tec Brasil
Agora que j conhecemos o GIMP, que tal exercitar um pouco mais os recursos desse software to interessante?
Primeiramente, vamos escrever e configurar um texto, seguindo os passos
descritos abaixo:
1. Abra uma imagem ou documento j existente.
2. Em seguida, para editar uma palavra ou um texto, primeiro abra uma
nova camada.
3. Depois clique na ferramenta de texto, observe que uma janela abre e
voc define o que ir digitar.
4. Em seguida, digite um texto sua escolha, aumente o tamanho do texto,
altere a fonte e a cor. Essas opes esto disponveis no menu quando a
ferramenta texto estiver ativa.
5. Clique com o boto direito sobre a camada do texto e duplique: teremos duas
camadas com o texto nome. Na nova camada criada, d uma cor diferente.
6. Agora sobreponha a imagem criada (texto) dando a impresso de serem duas.
7. No campo Nome do arquivo, digite um nome para o arquivo.
8. Clique no boto Salvar.
e-Tec Brasil
88
Aula 6 Software de animao de

imagens Macromedia
Adobe Flash
Objetivos
Conhecer o software Macromedia Adobe Flash.
Aprender a utilizar suas ferramentas de animao.
Ao executarmos o Flash, veremos uma imagem, como mostra a Figura 6.1
a seguir.
Flash
Segundo Alves (2009), o Flash
uma excelente ferramenta para
desenvolvimento de animaes
HTML. Alm de animaes, ele
tambm permite a criao de
grficos estticos, interfaces
com o usurrio, formulrios
de entrada ou mesmo pginas
inteiras. H programadores que o
utilizam at no desenvolvimento
de jogos. Portanto, podemos
concluir que esse fantstico
aplicativo possui enorme
versatilidade.
Figura 6.1: Janela de Abertura do Adobe Flash

Fonte: Adobe Flash CS3, 2011
Essa a janela de abertura do Flash CS3, na qual voc pode observar os

seguintes itens:
Open a Recent Item: permite abrir documentos recentemente usados.
Create New: abre uma pgina para criao de um novo documento.
Create from Template: abre uma pgina para criao de um documento
baseado em um modelo pronto (banners, aplicativos para celulares, etc.).
Extend: abre pgina de acesso ao site de extenses do Adobe Flash CS3.
Aula 6 Software de animao de imagens Macromedia Adobe Flash
89
e-Tec Brasil
Escolheremos a opo nova, que mostrar o palco, conforme pode ser

visto na Figura 6.2 a seguir.
Figura 6.2 Palco do Flash CS3

6.1 Caixa de ferramentas e

painis auxiliares
Do lado esquerdo da tela, possvel ver a caixa de ferramentas. L voc encontra as ferramentas necessrias para a edio e criao de animaes. importante conhecermos uma a uma, pois esse o conjunto de ferremantas mais importantes do Flash. Com elas podemos modificar, criar e preeencher desenhos.
e-Tec Brasil
90
1
3
2
4
10
11
12
13
14
15
16
17
18
19 / 20 / 21
a
b
c
d
e
Controles modificadores
Figura 6.3: Caixa de ferramentas do Flash CS3

91
e-Tec Brasil
Quadro 6.1: Descrio das ferramentas do Macromedia Adobe Flash CS3

Ferramenta
Funo
Tem a funo de selecionar e arrastar
elementos de desenho e texto.
Podemos
Seleo
selecionar uma parte ou o contorno

de uma forma. Tambm possvel
alterarmos a forma do objeto com a
sua ajuda.
Subselecionar
Usada para ajustar os pontos de uma

curva, alterar segmentos de reta de
uma figura, etc. Com esta ferramenta
possvel termos um controle maior
sobre o contorno do objeto.
Linha
Desenha linhas retas.
Lao
Permite selecionar figuras irregulares,

bastando utiliz-la para contornar a
figura.
Caneta
Desenha figuras, a partir de segmentos

de retas ou curvas entre dois vrtices.
Texto
Permite a criao de textos a serem

exibidos na apresentao.
Oval
Permite o desenho de crculos e elipses.
Retngulo
Permite desenhar quadrados ou

retngulos.
Lpis
Permite o traado de linhas, define a

trajetria dos objetos de uma animao, divide reas pintadas, etc.
Pincel
Permite o desenho de pontos amplos

na tela.
Nanquim ou tinteiro
Permite modificar as linhas de contorno

de uma figura, aplicando cor, espessura
e estilos.
Balde de tinta
Permite pintar o interior de objetos

fechados.
Conta-gotas ou sombreador
Permite capturar as informaes de

cores e estilos de um determinado
objeto, para que possam ser aplicados
em outro objeto.
Borracha ou apagador
Apaga os desenhos que se encontram

no palco do Flash, podendo assumir
diversos formatos e funes.
Mo
Permite deslocar toda a rea de desenho at um ponto desejado.
Zoom
Permite ampliar ou reduzir os desenhos

que se encontram no palco.
Continua
e-Tec Brasil
92
Trao
Permite escolher a cor do contorno de

uma figura.
Preenchimento
Permite escolher a cor do preenchimento de uma figura.
Padro
Altera a cor de preenchimento para

branco e o contorno para preto, de um
ou mais objetos selecionados.
Sem cor
Desliga o preenchimento ou o contorno

de uma figura.
Trocar cores
Inverte as cores de preenchimento e de

contorno de uma figura selecionada.
Controles modificadores
A - Encaixar: liga/desliga o ajuste de

objetos na grade e a conexo de linhas.
B - Suavizar: suaviza linhas selecionadas, deixando-as com cantos
arredondados.
C - Acertar: corrige imperfeies em
linhas selecionadas, deixando-as mais
retas.
Concluso
Fonte: Adaptado de Alves (2009)
6.2 Biblioteca de objetos (Library)

O painel denominado Biblioteca o local que contm todos os objetos grficos, sejam geomtricos, sejam textos, vdeos ou sons definidos na animao.
O objeto selecionado na parte inferior da biblioteca apresentado na sua
parte superior, como pode ser visto na Figura 6.4 a seguir.
Figura 6.4: Biblioteca do Flash

93
e-Tec Brasil
Voc pode adicionar novos itens simplesmente clicando no elemento no

Painel Library e arrastando-o em seguida para o palco. Uma vez no palco,
esses elementos podem ser instanciados (ganhar um nome exclusivo que os
identifique). Por exemplo: arrastar diversos crculos para o palco e atribuirlhes nomes distintos que os identifique, como crculo1, crculo2, etc.
Renomear as cpias com nomes exclusivos (crculo1, crculo12, crculo13,...,
crculo1n) nos possibilita alterar determinadas propriedades sem afetar o
smbolo original.
Agora que voc j conhece o ambiente de trabalho do Flash, o prximo
passo aprender a criar objetos grficos. Veremos como construir formas
geomtricas, linhas, retngulos e crculos.
6.3 Objetos geomtricos

Para criar formas bsicas use as ferramentas oval e retngulo, que permitem
a criao de crculos e quadrados, preenchimentos e ajustes na linha de traos. A primeira ferramenta que utilizaremos a Linha. Para ativ-la, clique
na ferramenta Linha. possvel definir a espessura e a cor da linha, na caixa
de propriedades que aparece na parte inferior da tela.
Figura 6.5: Exemplo de linha desenhada no Flash

Assim como o CorelDRAW, o Flash tambm possui menus desdobrveis, e

um desses menus o que possui formas bsicas como crculos, retngulos,
estrelas, etc.
e-Tec Brasil
94
possvel alterar cor, espessura de linha e outras propriedades, na caixa de

propriedades, como mostra a Figura 6.6 a seguir.
Figura 6.6: Caixa de propriedades do retngulo

Para fixar o contedo visto at aqui, faa as seguintes atividades:

1. Crie um retngulo e faa as seguintes alteraes em suas propriedades:
a) Para a ferramenta Retngulo, na seo opes da Caixa de Ferramentas,
clique no boto Raio do Retngulo Arredondado, para definir um nmero para arredondar os cantos do retngulo.
b) Mude a cor da linha e a cor de preenchimento do retngulo.
2. Faa o mesmo com a ferramenta Oval.
Aproveite esta atividade simples para conhecer as ferramentas citadas no
Quadro 6.1.
Alm de objetos geomtricos, possvel inserir textos em ilustraes e animaes feitas no Flash.
6.4 Transformao de textos

Para criar textos no Flash, clique na ferramenta Texto, na caixa de ferramentas, e siga este procedimento:
Clique no local em que o texto deve iniciar e comece a digitar.
Clique e arraste para definir a largura do bloco de texto; assim criar um
bloco de texto de largura fixa.
Ao clicar na ala do texto e arrast-lo, voc poder redimension-lo. Tambm
possvel fazer alteraes na formatao do texto. Quando voc seleciona
a ferramenta texto, o painel de propriedades mostra opes, como se pode
observar a seguir.
95
e-Tec Brasil
Na caixa de propriedades, voc poder alterar tipo e tamanho da fonte e

tambm alterar os estilos negrito, itlico e regular. H tambm as seguintes
opes:
Texto Esttico: utilize esse tipo de caixa de texto para inserir textos estticos no palco.
Figura 6.7 Caixa de propriedades do Texto Esttico

Texto Dinmico: utilizado para textos dinmicos, que podem ser alterados
por cdigo ActionScript.
Adobe Actionscript
uma linguagem de
programao da plataforma
Adobe Flash. Originalmente
desenvolvida como um meio
para os desenvolvedores
programarem dinamicamente,
melhorando a eficincia do
desenvolvimento de aplicaces
na plataforma Flash, desde uma
imagem simples uma complexa
animao
Figura 6.8: Caixa de propriedades do Texto Dinmico

Campos de Texto: tipo que permite a entrada de texto por parte do usurio, inclusive campos de senha.
Figura 6.9: Caixa de propriedades dos Campos de Texto

Voc tambm poder transformar blocos de texto da mesma maneira que

transforma outros objetos. Pode dimensionar, girar, inclinar e inverter blocos
de texto para criar efeitos interessantes. Quando voc dimensiona um bloco
de texto como objeto, os aumentos ou redues do tamanho do ponto no
so refletidos no Inspetor de Propriedades. O texto contido em um bloco de
texto transformado ainda pode ser editado. ainda possvel desmembrar
texto para colocar cada caractere em um bloco de texto separado. Para isso,
siga os seguintes passos:
Selecione a ferramenta Seleo e clique em um bloco de texto.
e-Tec Brasil
96
Selecione Modificar e depois Desmembrar. Cada caractere no texto selecionado colocado em um bloco de texto separado.
Figura 6.10: Caixa de propriedades dos Campos de Texto em bloco

O texto permanece na mesma posio no palco.
Figura 6.11: Caixa de propriedades dos Campos de Texto - modificar e desmembrar

97
e-Tec Brasil
Selecione novamente Modificar, Desmembrar, para converter os caracteres em formas no Palco.
6.4.1 Para desmembrar texto

Selecione a ferramenta Seleo e clique em um bloco de texto.
Selecione Modificar e depois Desmembrar. Cada caractere no texto selecionado colocado em um bloco de texto separado. O texto permanece
na mesma posio no palco.
Selecione novamente Modificar, Desmembrar para converter os caracteres em formas no palco.
Figura 6.12: Caixa de propriedades dos Campos de Texto - converso em formas

Crie um texto no bloco de notas:

Segundo Martins e Merino (2008) o design sustentvel desenvolve
projetos que se preocupam com o descarte ou reuso de produtos, com
a utilizao de materiais que no prejudiquem o meio ambiente e sejam
economicamente viveis. Isso de extrema importncia, porque nos ltimos
50 anos, o consumo exagerado, a busca pelo alto padro de conforto e
o desenvolvimento tecnolgico teve como consequncia a degradao do
meio ambiente.
e-Tec Brasil
98
Salve-o com o nome texto.txt na mesma pasta onde est o arquivo.fla.

Terminada a edio do arquivo de texto, abra o Flash e crie um arquivo com
o tamanho de 550px X 400px e salve-o com o nome de lendo_texto.fla.
Clique na ferramenta Texto, na barra de ferramentas, e, antes de inserir o
texto no palco, v a propriedades e altere de acordo com:
Tipo: Texto Dinmico

Fonte: Trebuchet MS
Tamanho: 14
Cor: Verde
Tipo de linha: Multiline
Ative as opes Selecionar e Renderizar texto como HTML; essas opes permitiro que o texto possa ser selecionado e que seja possvel ler textos em
formato HTML, respectivamente. Aps alterar essas propriedades, crie uma
caixa de texto pouco menor que o tamanho do painel.
Agora, selecione a caixa de texto e altere a propriedade Valor, inserindo o
valor texto, pois ela vai indicar que dentro da caixa de texto ir aparecer o
texto do arquivo externo, que tambm teve a varivel definida como texto.
Depois de concluda essa primeira parte, vamos criar mais uma camada para
aplicarmos o script que far a leitura da varivel que arquivar o texto.
Crie mais uma camada e clique com o boto direito do mouse sobre a posio 1 na timeline e v em Actions. Em Actions, v em Global Functions
> Browser/Network > loadVariables e d um duplo clique nessa opo.
Isso ir adicionar o script de leitura de variveis.
Para concluir, na propriedade URL, ainda dentro de Actions, digite o nome
do arquivo de texto e a extenso (texto.txt).
Pronto, para ver o sistema funcionando, d um Ctrl+Enter.
6.5 Trabalhando com camadas

As camadas so nveis de contedos dispostos um sobre o outro. Ao
trabalhar com camadas, evitamos que textos e imagens colocados sobre o
fundo se mesclem.
99
e-Tec Brasil
Sempre que abrimos um novo documento no Flash, ele cria, automaticamente, uma camada chamada Layer. Para inserir novas camadas, clicamos em:
Insert -> Timeline -> Layer
Figura 6.13: Inserindo Layer

Tambm podemos usar o cone Insert Layer do Painel Layer para inserir
camadas adicionais. Para renomear uma camada, clicamos duas vezes
nela e inserir um nome.
6.5.1 Criando pastas para organizar camadas

Para criar pastas para organizar as camadas, clicamos no cone Insert>Layer
Folder no Painel Layer. Para apagar uma camada, selecione a camada e
arraste-a para lixeira. O mesmo se aplica s pastas.
Figura 6.14: Inserindo Folder Layer

e-Tec Brasil
100
Cada cena em um documento do Flash pode conter qualquer quantidade de

camadas. Ao criar uma animao, voc usar camadas e pastas de camadas
para organizar os componentes de uma sequncia de animao e para separar os objetos animados, para que no sejam apagados, no se conectem
nem segmentem uns aos outros.
Quando voc adiciona um efeito de Linha de tempo a um objeto, o Flash
cria uma nova camada e transfere o objeto para ela. O objeto colocado
dentro do grfico do efeito e todas as interpolaes e transformaes exigidas para o efeito residem no prprio grfico, na camada recm-criada.
A nova camada recebe, automaticamente, o mesmo nome do efeito e um
sufixo numrico que representa a ordem em que o efeito aplicado, em
relao a todos os efeitos do documento. Quando voc adiciona um efeito
de Linha do tempo, o programa acrescenta biblioteca uma pasta (com o
nome do efeito) que contm os elementos usados na criao desse efeito.
Figura 6.15: Linha do tempo

6.5.2 Adicionando quadros-chave (Keyframes)

timeline
Um quadro-chave um tipo de quadro no qual adicionamos smbolos ou
outras propriedades a uma timeline de determinada camada. Ao inserir um
quadro-chave em novos quadros, a propriedade do quadro-chave anterior
copiada para o novo quadro-chave. Ao abrirmos um novo arquivo no Flash
CS3, automaticamente inserido um quadro-chave no frame (quadro) 1 da
Layer 1 (Camada 1). Para inserirmos outros quadros-chave em outros locais da
timeline, selecionamos o quadro desejado e no menu principal clicamos em
Insert -> Timeline -> Keyframe
101
e-Tec Brasil
Figura 6.16: Inserindo frame

Podemos usar a tecla de atalho F5 para a insero de quadros (frames).
6.6 Animaes
Animao uma iluso de movimento criada pela movimentao de imagens grficas em sequncia.
6.6.1 Linha do tempo (timeline)

Na timeline so geradas as animaes. Dividida em quadros e por padro, a
reproduo comea sempre no quadro 1 e se move pelos quadros em sequncia at alcanar o ltimo.
Figura 6.17: Timeline

Cada timeline tem sua prpria camada.
e-Tec Brasil
102
6.6.2 Interpolao
Para que o Flash interpole o movimento de mais de um grupo ou smbolo de
uma s vez, cada um deles deve estar em uma camada separada. Normalmente, a camada de fundo contm arte esttica e cada camada adicional
contm um objeto animado independente. Quando um documento contm
vrias camadas, o controle e a edio dos objetos em uma ou duas delas
pode ser difcil. Essa tarefa ser mais fcil se voc trabalhar com o contedo
de cada camada isoladamente. As pastas de camadas ajudam a organizar
camadas em grupos controlveis, que podem ser expandidos e recolhidos
para exibir somente as camadas relevantes tarefa atual.
Para se criar animaes no Flash CS3, normalmente utilizamos uma das
opes abaixo:
Usadas para alterar a posio de um objeto ao longo de um tempo determinado, pela definio dos pontos iniciais (aqueles onde ocorrero alteraes)
e do ponto final nos quadros-chave. Ao ser aplicado o Flash desenha as
etapas intermedirias, produzindo um efeito de movimento. Como a seguir:
Selecionamos o quadro-chave onde comear a animao em uma
timeline da camada e arrastamos uma instncia de um smbolo da
biblioteca at o quadro-chave, ou criamos diretamente um smbolo nesse
quadro.
Fazemos as modificaes nas propriedades da instncia do smbolo para
descrever a forma como queremos que se inicie a animao, tambm
conhecida como comeo da posio de interpolao de movimento.
Clicamos no quadro onde a animao deve terminar e no menu principal
selecionamos Insert -> Timeline -> Keyframe.
Fazemos as modificaes nas propriedades da instncia do smbolo para
descrever a forma como queremos que termine a animao.
Voltamos ao quadro-chave onde a animao comear e clicamos nele.
No painel de propriedades na caixa Tween, selecionamos Motion para
aplicar a interpolao de movimento.
103
e-Tec Brasil
6.6.2.1 Interpolao de forma

Usadas para alterar a forma de um objeto ao longo de um tempo determinado, pela definio dos pontos iniciais (aqueles onde ocorrero alteraes)
e do ponto final nos quadros-chave. Ao ser aplicado o Flash desenha as etapas intermedirias, produzindo um efeito de alterao de forma do objeto.
Veja o exemplo a seguir:
Selecionamos a ferramenta de desenho no painel Tools e desenhamos
uma forma.
Selecionamos outro quadro na linha do tempo (exemplo quadro 20) e
clicamos em Insert > Timeline > Keyframe.
Ativamos o marcador de transparncia pressionando o boto Onion Skin
no painel Timeline.
Arrastamos o Onion Skin Marker esquerdo para sobrepor os quadros
anteriores.
Selecionamos novamente a ferramenta de desenho no painel Tools e
desenhamos outra forma no quadro 20.
Alinhamos a nova forma sobre a forma apresentada pelo Onion Skin.
Desativamos o Onion Skin, pressionando o boto Onion Skin na Timeline.
Clicamos na ferramenta Selection no painel Tools e selecionamos o
quadro-chave 1.
No painel de propriedades na caixa com o rtulo Tween, selecionamos
Shape para aplicar a interpolao de forma.
Clicamos em Control -> Test Movie para ver a animao (opcionalmente
podemos usar teclas de atalho Ctrl + Enter).
e-Tec Brasil
104
Atividades de aprendizagem:
1. Crie um novo arquivo no Flash CS3/CS4 e salve-o. Usando o painel de
propriedades, altere as dimenses do palco para 450x400 pixels e atribua
cor preta ao background. Altere o frame rate para 20 fps.
2. D duplo clique sobre Layer1 e altere o nome para animao.
3. Insira uma nova camada (Insert > Timeline > Layer) e altere seu nome
para texto.
4. Na camada texto clique sobre o frame 80 e pressione F5 para inserir
quadros at essa posio. Repita esse procedimento na camada animacao para inserir quadros at a posio 80 da timeline.
5. No frame (quadro) 1 da camada texto, usando a ferramenta Text escreva Interpolao de Forma (Shape Tween) e posicione o texto na parte
superior do palco e centralizado.
6. No frame1 da camada animacao usando a ferramenta PolyStar Tool,
no painel de propriedades na opo Options... altere o estilo para star,
nmero de lados 5 e star point size para 0.50 e d OK.
7. Ainda no painel de propriedades da PolyStar tool altere a opo para
sem trao e preenchimento gradiente azul (acessvel tambm pelo
painel Color Swatches). Desenhe a estrela redimensione-a para 50x50
pixels e a centralize no palco.
8. Insira um quadro-chave no frame 20 (pressione a tecla F6) e nesse quadro altere as dimenses da estrela para 394x394 pixels. Centralize-a no
palco;
9. Clique entre o frame 1 e 20 da camada animacao e no painel de propriedades na opo Tween, selecione Shape. Os frames de 1 a 20 ficaro
na cor verde. At esse passo voc j gerou a primeira animao de forma.
10. Clique no frame 25 da camada animacao. Insira um novo quadro-chave
nessa posio. Em seguida redimensione a forma da estrela para 5x5
pixels, com posio X em 229 e posio Y em 196 de forma a mant-la
centralizada no palco.
105
e-Tec Brasil
11. Clique com o boto direito do mouse entre o frame 20 e 25 e selecione Create Shape Tween no menu pop up. J criamos a segunda parte da animao.
12. Insira um novo quadro-chave no frame 35. Em seguida redimensione
novamente a estrela para 50x50 pixels, com X=206 e Y=176 de forma a
mant-la centralizada no palco.
13. Clique com o boto direito do mouse entre o frame 25 e 35 e selecione Create Shape Tween no menu pop up. J criamos a terceira parte da animao.
14. Clique no frame 45 da camada animacao e insira um novo quadro-chave (F6) nessa posio; em seguida, mantendo a tecla Alt pressionada,
clique na estrela e arraste para criarmos cpias. Repita a operao de
forma a criar vrias estrelas no palco (oriente-se pela figura abaixo). Uma
vez criadas as estrelas, altere a cor de algumas delas usando o painel
Color Swatches e escolhendo gradientes cinza, vermelho verde e azul.
Por fim, clique com o boto direito do mouse entre os frames 35 e 45 e
escolha Create Shape Tween.
15. Clique no frame 80 e insira um novo quadro-chave. Apague todas as
estrelas,deixando o palco vazio! Em seguida, clique no frame 35, copie
a estrela que est nesse frame e cole-a no frame 80 usando as teclas
CTRL+Shift+V para col-la na mesma posio do frame 35. Em seguida
clique com o boto direito do mouse entre o frame 45 e 80 e selecione
Create Shape Tween.
16. Finalmente, salve o trabalho e pressione Ctrl+Enter para observar a animao.
6.6.2.2 Animao quadro a quadro

(frame to frame transition)
Usadas para alterar a posio e/ou a forma de um objeto ao longo de determinado perodo de tempo, pela criao manual de cada um dos quadros,
tendo como efeito final a produo de movimento e/ou alterao de forma,
s que de maneira mais controlada e com efeitos mais sofisticados.
6.6.3 Reconhecendo as interpolaes na timeline

O Flash diferencia a animao interpolada da animao quadro a quadro na
Linha de tempo, da seguinte forma:
e-Tec Brasil
106
As interpolaes de movimento so indicadas por um ponto preto no

quadro-chave inicial; os quadros interpolados intermedirios apresentam
uma seta preta com fundo azul-claro.
As interpolaes de forma so indicadas por um ponto preto no quadro-chave inicial; os quadros intermedirios apresentam uma seta preta com
fundo verde-claro.
Uma linha tracejada indica que a interpolao est partida ou incompleta, como no caso de um quadro-chave final ausente.
Um quadro-chave nico indicado por um ponto preto. Os quadros

cinza-claros, aps um quadro-chave nico, contm o mesmo contedo,
sem alteraes, e apresentam uma linha preta com um retngulo vazio
no ltimo quadro da sequncia.
Um a pequeno indica que uma ao foi atribuda ao quadro por meio do
painel Actions (Aes).
Uma bandeira vermelha indica que o quadro contm um rtulo ou
um comentrio.
Uma ncora dourada indica que o quadro uma ncora identificada.
6.6.4 Smbolos
Smbolos so objetos especiais criados no Flash para auxiliar na criao de
animaes (ALVES, 2009).
Existem trs tipos de smbolos no Flash: grfico, boto e clipe de vdeo.
Figura 6.18: Convertendo smbolo

107
e-Tec Brasil
Boto
Os smbolos de botes possuem eventos predefinidos que so transmitidos
quando algo ocorre em seu arquivo SWF. A linha do tempo de um smbolo
boto possui quatro quadros (frames):
Up: Primeiro quadro da timeline do boto. Aparece independentemente de qualquer ocorrncia.
Over: Segundo quadro da timeline do boto. Refere-se ao comportamento do boto quando o mouse est sobre ele.
Down: Terceiro quadro da timeline do boto. Refere-se ao estado do
boto quando ele clicado.
Hit: Quarto quadro da timeline do boto. Refere-se rea ativa do
boto. Esse estado no visvel ao usurio.
Figura 6.19: Boto

Por conveno recomenda-se, ao criar um smbolo de boto, usar o prefixo

btn antes do nome do smbolo.
Movie clip
Usado para conter animaes para elementos da interface com o usurio,
pode ser considerado mini aplicativos; cada movie clip ou clipe de filme possui sua prpria linha do tempo que funciona independente da linha de tempo principal.
e-Tec Brasil
108
Por conveno recomenda-se, ao criar um smbolo movie clip, usar o prefixo

mc antes do nome do smbolo.
Grfico
Usado para criar imagens estticas e para criar objetos reutilizveis. Normalmente os smbolos grficos so imagens.
Por conveno recomenda-se, ao criar um smbolo grfico, usar o prefixo gr
antes do nome do smbolo.
6.6.5 Mscaras
Para revelar pores de uma imagem ou grfico na camada abaixo, podemos utilizar uma mscara. Para criar uma mscara, voc deve especificar que
essa camada uma camada de mscara clicando com o boto direito do
mouse sobre a camada e selecionando Mask. Pode-se usar qualquer forma
preenchida, textos e smbolos como uma mscara. A camada de mscara
revela a rea das camadas abaixo. Para criar uma mscara devemos realizar
os seguintes passos:
1. Comeamos criando uma camada acima da imagem que desejamos
mascarar. Essa ser a camada de mscara. Criamos ou importamos um
grfico na camada de mscara e a convertemos em um smbolo.
2. Criamos uma animao na camada de mscara.
3. Clicamos com o boto direito do mouse na camada de mscara e selecionamos Mask no menu contextual.
4. Bloqueamos as camadas para ver o efeito de mscara ainda no ambiente
de criao.
5. Selecionamos Control > Test Movie para visualizar a animao (opcionalmente podemos clicar Ctrl + Enter).
109
e-Tec Brasil
6.
Figura 6.20: Mscara

1. Inicie um novo arquivo Flash, altere o palco para 400x400 pixels, importe
uma imagem para o palco. Altere o tamanho dessa imagem no palco
para 400x400 pixels de forma a coincidir com o tamanho do palco. D a
essa camada o nome de Imagem.
2. Crie uma segunda camada, certifique-se de que ela est acima da camada
Imagem e atribua a essa nova camada o nome de Camada de mscara.
Clique com o boto direito do mouse e escolha a opo Mask.
3. Desbloqueie as camadas clicando uma vez em cada cone de cadeado
e crie um quadro de 50x50 pixels na cor verde-claro (mais frente voc
ver que a cor no importa).
4. Ainda na camada de mscara, clique no frame 20 e pressione F6 para inserir
um quadro-chave nessa posio. Clique na camada chamada Imagem e
clique no frame 20 e pressione F5 para inserir quadros.
e-Tec Brasil
110
5. Entre os frames1 e 20 da Camada de mscara, clique com o boto

direito do mouse e selecione Create Motion Tween. No painel de Propriedades na caixa Rotate, escolha CW e mantenha as demais configuraes
como esto.
6. Clique no frame20. Selecione o quadrado e modifique seu tamanho para
400x400 pixels e posicione-o sobre a imagem de forma que toda a imagem fique oculta.
7. Clique no frame30 da camada de mscara e insira um novo quadro-chave
clicando em F6. Repita a operao na camada Imagem com a diferena de
que nela voc inserir quadros (frames) comuns at o frame 30.
8. Clique na camada de mascara, em seguida no frame 30, clique no quadrado
verde e, usando o painel de propriedades, altere sua largura (width) para 1,
mantenha a altura em 400 pixels, de forma que ele se torne uma linha.
direito do mouse e selecione Create Motion Tween
10. Clique na camada de mascara, clique no frame 60 e insira um novo quadro-chave; aproveite e insira quadros normais na camada imagem tambm. Clique na linha verde e, usando o painel de propriedades, altere
sua largura (width) para 400 pixels novamente de forma que ele volte a
ocultar a imagem.
direito do mouse e selecione Create Motion Tween.
12. Finalmente clique em Control > Test Movie para ver a animao.
111
e-Tec Brasil
6.7 Publicando documentos do Flash
Figura 6.21: Publish Settings

Para publicar um documento do Flash, selecione os formatos e as configuraes

dos formatos de arquivo com a caixa de dilogo Publish Settings. Em seguida,
publique o documento do Flash, usando o comando Publish (Publicar). A configurao de publicao especificada na caixa de dilogo Publish Settings salva
com o documento. Voc pode tambm criar e atribuir nome a um perfil de publicao para que as configuraes de publicao estabelecidas estejam sempre
disponveis.
Dependendo das opes especificadas na caixa de dilogo Publish Settings,
o comando Publish criar os seguintes arquivos:
Arquivo SWF do Flash.
Imagens alternativas em diversos formatos, que sero exibidas, automaticamente, se o Flash Player no estiver disponvel (GIF, JPEG, PNG e QuickTime).
O(s) documento(s) HTML de suporte necessrio(s) para mostrar o contedo SWF (ou uma imagem alternativa) em um navegador e controlar a
configurao do navegador.
Trs arquivos HTML, se a opo Detect Flash Version (Detectar verso do
Flash) for selecionada: o arquivo de deteco, o arquivo de contedo e o
e-Tec Brasil
112
arquivo alternativo.
Arquivos de projetores independentes para os sistemas Windows e
Macintosh e vdeos do QuickTime de contedo do Flash (arquivos
EXE, HQX ou MOV, respectivamente).
Resumo
Nesta aula voc conheceu o Flash, um software utilizado para produo de
animao, entre outras aplicaes, como biblioteca de objetos onde podemos armazenar imagens, smbolos e mover clipes. Aprendeu que no Flash
podemos trabalhar com camadas, que so nveis de contedos dispostos um sobre o outro, onde criamos as animaes, inserimos vdeos
e udio; que ainda podemos trabalhar com mscaras, que so animaes
que revelam pores de uma imagem ou grfico na camada abaixo. O uso
do Flash dispe de vrias aplicaes de acordo com o projeto de cada site,
proporcionando ao usurio a experincia de animaesinterativas.
Chegamos ao final desta disciplina e espero que voc tenha obtido sucesso.
Meu objetivo foi passar os conceitos bsicos e importantes para o desenvolvimento de um website, sabendo que esse o apenas o incio de um longo
caminho. Os conceitos aprendidos neste caderno so a base para o desenvolvimento de sites; contudo, o estudo no deve se ater somente a este
material. Continue suas pesquisas e realizaes.
Sucesso e um grande abrao!
Siga os passos abaixo para praticar as formas de configuraes de publicaes gerais para um documento do Flash:
Abra a caixa de dilogo Publish Settings. Siga um destes procedimentos:
a) Selecione File> Publish Settings (Configuraes de publicao).
b) No inspetor Properties (Propriedades) do documento (disponvel quando nenhum objeto est selecionado), clique no boto Settings (Configuraes).
c) Na caixa de dilogo Publish Settings, selecione a opo para cada formato de arquivo que deseja criar.
O formato SWF do Flash selecionado por padro. O formato HTML tambm selecionado por padro. Voc precisa de um arquivo HTML para que
113
e-Tec Brasil
o arquivo SWF aparea em um navegador. As guias correspondentes aos

formatos de arquivo selecionados aparecem acima do painel atual na caixa
de dilogo (exceto em formatos do projetor Windows ou Macintosh, que
no tm configuraes).
Na caixa de dilogo File de cada formato selecionado, aceite o nome de arquivo padro (que corresponde ao nome do documento) ou insira um novo
nome de arquivo com a extenso adequada (como .gif para um arquivo GIF
e .jpg para um arquivo em JPEG).
Decida onde deseja publicar os arquivos. Por padro, os arquivos so publicados no mesmo local que o arquivo FLA. Pra alterar o local onde os arquivos
so publicados, clique na pasta ao lado do nome do arquivo e navegue at
o local em que deseja publicar o arquivo.
Para criar um arquivo de projetor independente, selecione Windows Projector
(Projetor do Windows).
Clique na guia das opes de formato a serem alteradas. Especifique as configuraes de publicao para cada formato, conforme descrito nas sees
a seguir.
Quando voc terminar de configurar as opes, siga estes procedimentos:
Para gerar todos os arquivos especificados, clique em Publish.
Para salvar as configuraes com o arquivo FLA e fechar a caixa de
dilogo sem public-lo, clique em OK.
Para publicar um documento do Flash sem selecionar novas configuraes
de publicao:
Selecione File > Publish para criar os arquivos nos formatos e no local
especificado na caixa de dilogo Publish Settings (as configuraes
padro, as configuraes anteriormente selecionadas ou o perfil de
publicao selecionado).
e-Tec Brasil
114
ANEXO e APNDICES
ANEXO Atalhos e atributos do CSS
Atributo de CSS
O que ele formata
background
Cor de fundo, imagem, transparncia.
background-attachment
Rolagem do fundo / Marca dgua.
background-image
Imagem de fundo.
background-color
Cor de fundo ou transparncia.
background-position
Posicionamento da imagem de fundo.
background-repeat
Configurao lado a lado da imagem de fundo.
border
Largura, estilo e cor de todas as quatro bordas.
border-bottom
Largura, estilo e cor da borda inferior.
border-bottom-color
Cor da borda citada.
border-bottom-style
Estilo da borda citada.
border-bottom-width
Largura da borda citada.
border-color
Cor das quatro bordas.
border-left
Largura, estilo e cor da borda esquerda.
border-left-color
border-left-style
border-left-width
border-right
Largura, estilo e cor da borda direita.
border-right-color
border-right-style
border-right-width
border-style
Estilo de todas as quatro bordas.
border-top
Largura, estilo e cor da borda superior.
border-top-color
border-top-style
border-top-width
border-width
Largura de todas as quatro bordas.
clear
Elementos flutuantes esquerda ou direita de um

elemento.
clip
Parte visvel de um elemento.
color
Cor de primeiro plano.
cursor
Tipo de ponteiro do mouse.
display
Se o elemento exibido e o espao reservado para ele.
filter
Tipo de filtro aplicado ao elemento.

Continua
115
e-Tec Brasil
float
Se o elemento flutua.
font
Estilo, variante, peso, tamanho e altura da linha do tipo

de fonte.
@font-face
Incorporao da fonte ao arquivo HTML.
font-family
Tipo de fonte.
font-size
Tamanho da fonte.
font-style
Fonte itlico.
Fonte-variant
Fonte <IT>bold<IT>.
font-weight
Peso da fonte de claro a negrito.
height
Altura exibida ao elemento.
@import
Folha de estilo a importar.
left
Posio do elemento em relao margem esquerda da

pgina.
letter-spacing
Distncia entre as letras.
line-height
Distncia entre linhas de base.
list-style
Tipo, imagem e posio do estilo da lista.
list-style-image
Marcador de item de lista.
list-style-position
Posio do marcador de item da lista.
list-style-type
Marcador de item de lista alternativo.
margin
Tamanho de todas as quatro margens.
margin-left
Tamanho da margem esquerda.
margin-right
Tamanho da margem direita.
margin-bottom
Tamanho da margem inferior.
margin-top
Tamanho da margem superior.
overflow
Exibio de imagens que so maiores do que suas

molduras.
padding
Espao em torno de um elemento em todos os lados.
padding-bottom
Espao a partir da margem inferior de um elemento.
padding-left
Espao esquerda do elemento.
padding-right
Espao direita do elemento.
padding-top
Espao a partir da margem superior do elemento.
page-break-after
Inserir quebra de pgina depois de um elemento.
page-break-before
Inserir quebra de pgina antes de um elemento.
position
Como o elemento posicionado na pgina.
text-align
Alinhamento do texto.
text-decoration
Sublinhado, sobrelinha do texto ou riscado.

Continua
e-Tec Brasil
116
text-indent
Recuo da primeira linha do pargrafo.
text-transform
Transformao para todas maisculas, minsculas ou

inicial maiscula.
top
Posio do elemento em relao parte superior da

pgina.
vertical-align
Alinhamento vertical do elemento.
visibility
Se o elemento visvel ou invisvel.
width
Largura do elemento.
z-index
Posio do elemento na pilha.

Concluso
APNDICE 1 Atividades do CorelDRAW: Boneco de Neve
1 passo: Copie a imagem do boneco de neve acima e cole na rea de trabalho do CorelDRAW.
2 passo: Depois de colar, d um clique com o boto direito do mouse
em cima da imagem (Boneco de Neve) e no menu que aparecer clique
em Bloquear Objeto; isso impedir que a imagem se mova e dificulte o
processo de vetorizao.
3 passo: Existem algumas ferramentas que produzem formas predefinidas
muito teis (retngulos, tringulos, crculos, etc.). Faa uso delas nessa lio;
clique na ferramenta Elipse localizada na caixa de ferramentas.
4 passo: Para facilitar, tente seguir as medidas do boneco, colocando os
117
e-Tec Brasil
objetos por cima da imagem. Leve o cursor do mouse at a bola embaixo

do corpo do boneco e clique no boto esquerdo; segure e arraste sem soltar
o boto do mouse at que o tamanho do crculo esteja parecido com o original; se precisar de um crculo perfeito, pressione Ctrl no teclado quando
estiver criando o objeto.
5 passo: Quando voc soltar o boto do mouse, note que o crculo que foi
criado ficou selecionado. Sabemos que um objeto est selecionado quando
aparecem alguns pontos ao seu redor; esses pontos servem para redimensionar o seu tamanho.
6 passo: Clique na ferramenta Seleo na caixa de ferramentas, ela serve
para mover e redimensionar os objetos; portanto, se o primeiro crculo no
estiver no lugar certo, clique bem no meio dele, onde aparece um X; com
essa ferramenta, segure o boto e arraste para o local desejado. Se o tamanho no ficou certo, voc pode redimensionar o objeto clicando em alguns
dos pontos ao redor do crculo com a ferramenta seleo; segure o boto e
arraste na direo em que o crculo precisa aumentar ou diminuir.
7 passo: Quando conseguir deixar o primeiro crculo no lugar certo, volte e
clique novamente na ferramenta Elipse e faa a bola do meio do boneco, o
corpo, seguindo os mesmos passos. Faa tambm a terceira bola que corresponde cabea do boneco, a aba do chapu por fora, os olhos, os botes e o
nariz. Para fazer o nariz, crie trs crculos: primeiro um para ser a base do nariz; depois, outro um pouco menor para ser o meio e, por ltimo, um menor
ainda, para ser a ponta do nariz. Seguindo esses passos, quando colorirmos,
o nariz do boneco vai realmente parecer com uma cenoura.
8 passo: Agora, vamos precisar de outra ferramenta chamada Polilinha,
que tambm est na caixa de ferramentas ao lado. Voc pode procurar, colocando o cursor do mouse em cima de cada ferramenta, que logo vai aparecer o nome de cada uma em forma de legenda. A ferramenta Polilinha
produz linhas retas; ela vai servir pra fazer os braos do boneco.
9 passo: Depois de encontrar, clique na ferramenta. V at o primeiro brao e clique em alguma das suas extremidades, arraste e clique novamente,
sempre onde a linha muda de direo, como se estivesse contornando o
brao, at fechar o objeto; quando se juntam os pontos por onde comeou e terminou.
e-Tec Brasil
118
10 passo: J temos um dos braos do boneco. Para fazer o outro, muito

fcil: escolha a ferramenta Seleo e clique com o boto direito do mouse
no brao feito h pouco; escolha a opo Copiar no menu que aparecer;
clique fora da pgina, tambm com o boto direito do mouse, e escolha
Colar; note que a cpia de qualquer objeto sempre fica exatamente em
cima do objeto de origem; clique no objeto copiado e arraste-o para o outro
lado; ainda com ele selecionado, na barra propriedades, clique em Espelhar
horizontalmente; isso far o objeto virar na direo contrria, ficando os
dois braos perfeitos. Use a Polilinha para fazer a parte de cima do chapu.
11 passo: Nessa parte da vetorizao, voc usar a Paleta de Cores. Com
a ferramenta Seleo, clique no objeto e depois na cor que desejar. Se a cor
que quiser no estiver vista, clique na seta abaixo da paleta para expandir,
depois s escolher a cor. V preenchendo todos os objetos do desenho
com suas respectivas cores e depois compare com a imagem original.
12passo: Tem alguma coisa errada, no ? No! Quando voc est criando os objetos do desenho no Corel, tudo que fizer depois sempre vai ficar
por cima do objeto anterior, s notamos agora por causa do preenchimento, mas isso se resolve facilmente, alterando a ordem dos objetos no
menu Organizar e depois em Ordenar. L voc encontrar as opes
necessrias para essa tarefa. Selecione a aba do chapu, clique no menu
Organizar, escolha Ordenar, clique em Atrs... e clique novamente em
algum lugar visvel da cabea do boneco, ela ser o ponto de referncia.
Repita esses passos, selecionando a parte de cima do chapu e tenha como
referncia, agora, a aba do chapu; isso far com que os objetos fiquem na
ordem desejada. Se ainda houver algo errado na ordem dos objetos, use
o menu Organizar, depois Ordenar e alguma das opes autoexplicativas
desse menu.
13 passo: Clique com o boto direito do mouse sobre a imagem original
do Boneco de Neve e escolha a opo Desbloquear Objeto; isso vai liberar
a imagem para ser movida; clique e arraste a imagem para o lado do seu
desenho e compare os dois; pode-se notar a grande diferena na qualidade.
Depois de comparar, selecione a imagem original e pressione no teclado
Delete para excluir.
14 passo: Terminado o trabalho, voc vai precisar Salvar, a fim de us-lo
sempre que precisar.
119
e-Tec Brasil
APNDICE 2 - Atividades do CorelDRAW: Construo de um boto

1 passo: Faa um retngulo e, com a ferramenta Forma, arredonde os cantos o mximo possvel; depois, faa uma cpia desse objeto e redimensione-o, para que fique menor que o primeiro, posicione-o na parte de baixo do
retngulo maior. Faa agora uma cpia do retngulo menor e arraste-o para
a parte de cima do objeto maior.
2 passo: Selecione no objeto maior e preencha-o com azul-marinho; o retngulo menor de baixo com azul-celeste e o de cima com branco, Para usar
o efeito sombra e explorar a impresso do objeto em 3D, use a ferramenta
Sombreamento. Com o objeto maior selecionado, clique na ferramenta
Sombreamento, e em Predefinies; l na barra de propriedades, escolha
Incandescente pequeno, a cor do sombreamento tambm alterada na
barra de propriedades; ento, escolha a cor azul-claro.
3 passo: Para dar essa impresso de uma cor misturando com outra, voc
vai precisar misturar dois objetos: o objeto maior e o objeto menor de baixo;
para isso, necessrio usar a ferramenta Mistura. Selecione na ferramenta
Mistura, clique com ela no retngulo menor de baixo, segure, arraste at o
meio do retngulo maior e solte.
4 passo: No objeto menor de cima, voc vai usar a ferramenta Transparncia.
Com ele selecionado, clique na ferramenta Transparncia, e, com ela, clique e arraste segurando o boto do mouse, comeando um pouco acima dele e soltando
o boto antes do seu final; tente conseguir o melhor resultado possvel.
5 passo: Com a ferramenta Texto, clique e digite CLIQUE; depois, com a
ferramenta Seleo, procure e aplique o tipo de fonte usada, deixe no tamanho, posio e cores certas. Quando terminar, salve o documento.
e-Tec Brasil
120
Referncias
ALVES, William Pereira. Crie, anime e publique seu site utilizando Fireworks CS3,
Flasch CS3, e Dreamweaver CS3 para Windows. 2ed. So Paulo: rica, 2009.
CALLIGARIS, Joo Sebastio de Oliveira Bueno. GIMP: documentao das ferramentas.
2005. Disponvel em: <http://www.ufpel.edu.br/lpd/ferramentas/gimp.pdf>. Acesso em:
20 abr. 2011.
DIAS, Cludia. Usabilidade na Web. Rio de Janeiro: Alta Books, 2003.
FARIA, Helena; FERREIRA, Rafael; LEMOS, Rosemar. Design de Web: elementos grficos
que influem em uma boa usabilidade. 2010. Disponvel em: <http://www.ufpel.edu.br/
cic/2010/cd/pdf/LA/LA_01036.pdf>. Acesso em: 2 fev. 2011.
FERREIRA, Aurlio Buarque de Holanda. Novo Dicionrio Aurlio da Lngua
Portuguesa. 4 Ed. Curitiba. PR: Editora Positivo, 2009.
FRABRIS, S; GERMANI, R. Color: proyecto y esttica en las artes grficas. Editorial Edebe.
Madrid, Barcelona 1973.
FREEMAN, Elisabeth; FREEMAN, Eric. Use a cabea HTML com CSS e XHTML. 2ed.
Rio de Janeiro: Alta Books, 2008.
GOMES FILHO, Joo. Gestalt do objeto: sistema de leitura visual da forma. So Paulo:
Escrituras Editora, 2008.
KALBACH, James. Designer de navegao: otimizando a experincia do usurio. Porto
Alegre: Bookman, 2009.
KRUG, Steve. No me faa pensar: uma abordagem de bom senso usabilidade na
web. Rio de Janeiro: Alta Books, 2008.
MARMION, Jorge. A utilizao de cor no mecanismo de interao com o usurio.
Disponvel em: <http://www.ibrau.com.br/artigoutilizacaodecor.htm>. Acesso em: 8 fev.
2011.
MARMION, Jorge. Como maximizar a legibilidade de um texto. Disponvel em:
<http://www.ibrau.com.br/aumentandoalegibilidade.htm>. Acesso em: 7 jul. 2011.
MICROSOFT OFFICE. Inverno. Disponvel em: <http://office.microsoft.com/pt-br/images/
results.aspx?ex=2&qu=boneco%20de%20neve&Download=MC900022861&ext=WMF
&AxInstalled=1&c=0#ai:MC900022861|mt:1|> Acesso em: 12 set. 2011.
MICROSOFT OFFICE. MP900422339. Disponvel em:<http://office.microsoft.com/pt-br/
images/results.aspx?qu=idoso#ai:MP900422339|>. Acesso em: 7 jul. 2011c.
MORAES, Ana Maria de; Santo Rosa, Jos Guilherme. Avaliao e projeto no design
de interfaces. 1 ed. Terespolis, RJ: 2AB, 2008.
121
e-Tec Brasil
NETMARKETSHARE. Market share for mobile and desktop. Disponvel em: <http://
marketshare.hitslink.co>. Acesso em: 7 jul. 2011.
NIELSEN, Jakob, Designing Web Usability, New Riders Publishing, 2000, USA.
OFFICE. MICROSOFT. Casa antiga destruda. Disponvel em: <http://office.microsoft.com/
pt-br/images/results.aspx?qu=casa&origin=FX010132103#ai:MP900433081|>. Acesso
em: 7 jul. 2011a.
OFFICE.MICROSOFT. MC900432679. Disponvel em: <http://office.microsoft.com/pt-br/
images/results.aspx?qu=bot%C3%A3o#ai:MC900432679|> . Acesso em: 7 jul. 2011b.
OFFICE MICROSOFT. Obter a melhor imagem no monitor. Disponvel em:http://
windows.microsoft.com/pt-BR/windows7/Getting-the-best-display-on-your-monitor.
Acesso em: 5 nov. 2011.
OLIVIERO, Carlos Antonio Jos. Crie imagens para a construo de sites: (com
Fireworks 4). So Paulo: rica, 2001.
OLIVIERO, Carlos Antonio Jos. Faa um site HTML 4.0: orientado por projeto. So
Paulo: rica, 2000.
PARIZOTTO, Rosamelia. Guia de Estilos para Servios de Informao em Cincia
e Tecnologia via Web. < http://www.cefet-to.org/~focking/Projeto%20de%20
Interfaces/Ergonomia_guiaweb.pdf>. Acesso em 10 jul. 2011.
RAPOSO, Alberto Barbosa. Introduo interao humano-computador (IHC).
Disponvel
em:
<http://www.inf.puc-rio.br/~inf1403/docs/alberto2011_1/09_
AvHeuristica.pdf>. Acesso em: 7 jul. 2011.
SERIFA. In: WIKIPDIA, a enciclopdia livre. Flrida: Wikimedia Foundation, 2011.
Disponvel em: <http://pt.wikipedia.org/w/index.php?title=Serifa&oldid=27348115>.
Acesso em: 10 fev. 2011.
SCHUHMACHER, Vera N. Comunicao visual para web I. 2007. Disponvel em:
<http://busca.unisul.br/pdf/88286_Vera.pdf>. Acesso em: 10 fev. 2011.
TAVARES, Anglica Pereira Marsicano. Aplicao da teoria das cores em ambientes
virtuais para arquitetura e design de interiores. 2007. Disponvel em:<http://
www.bdtd.ufu.br/tde_arquivos/11/TDE-2007-04-17T083740Z-514/Publico/
APMTavares1DISSPRT.pdf> Acesso em: 9 nov. 2011.
e-Tec Brasil
122
Meu nome Keila Brito, professora especialista responsvel pela disciplina
Fundamentos do Desenvolvimento Web. Para que voc me conhea melhor,
seguem algumas informaes a meu respeito: graduada em Desenho
Industrial com nfase em Programao Visual pela Universidade Federal
do Esprito Santo (UFES); ps-graduada em Administrao e Marketing
e em Planejamento, Implementao e Gesto da Educao a Distncia
pela Universidade Federal Fluminense; tambm me formei em cursos de
capacitao e formao como Webmaster. Leciono na rea desde 2006,
alm de atuar diretamente no mercado de agncias digitais como gerente de
projetos, o que me permite vivenciar os desafios da Web. Atualmente, sou
professora do Instituto Federal do Amazonas e colaboradora do Centro de
Educao a Distncia do IFES, como professora especialista.
123
e-Tec Brasil
Fundamentos do
Desenvolvimento Web
Keila Brito
Curso Tcnico em Informtica

Apostila FundDesWeb PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apostila FundDesWeb PDF

Uploaded by

Copyright:

Available Formats

Fundamentos do

Curso Tcnico em Informtica

Presidncia da Repblica Federativa do Brasil

Instituto Federal do Esprito Santo

Coordenao de Design Grfico

Comisso de Acompanhamento e Validao

Coordenao de Design Instrucional

B862f Brito, Keila

Apresentao e-Tec Brasil

Saiba mais: oferece novas informaes que enriquecem o

Aula 1 Interface web

1.2 O espao da pgina

1.4 Caractersticas a considerar na pgina principal

Aula 2 Fundamentos do HTML

2.2 O que HTML?

2.5 Imagens em HTML

2.6 Atributos ALT e ALIGN

2.7 Atributos width e height

2.8 Atributo background

2.9 Formatao de textos

2.10 Vnculos ou links

Aula 3 Cascading Style Sheets (CSS)

3.2 Mtodo de aplicao do CSS no documento HTML

3.3 Pseudoclasses e pseudoelementos

Aula 4 Tipos de imagens

4.2 Imagens vetoriais

4.3 Formatos de imagens

Aula 5 Software de edio de imagem (GIMP)

5.3 Para abrir uma nova imagem

5.4 Recortando uma imagem

5.5 Removendo o fundo da imagem

5.6 Captura de tela

Aula 6 Software de animao de imagens

6.2 Biblioteca de objetos (Library)

6.3 Objetos geomtricos

6.4 Transformao de textos

6.5 Trabalhando com camadas

6.7 Publicando documentos do Flash

Fundamentos de Desenvolvimento Web

Conhecer o software GIMP e suas

Conhecer o software Flash e suas

Vdeo: Acessibilidade web: custo

Vdeo: HTML Bsico

Vdeo: Criando imagens com

Vdeo: Ferramenta Contgua

Aula 1 Interface web

1.1 Diferenas entre os usurios

Aula 1 Interface web

No necessrio que as configuraes sejam decoradas, porm importante

Fundamentos do Desenvolvimento Web

o mesmo contedo pode aparecer de maneira diferente em cada um dos

1.2 O espao da pgina

Acesse o site http://www.

Figura 1.1: Viso do usurio na pgina

Jakob Nielsen, um dos maiores especialistas na rea de usabilidade na web,

Aula 1 Interface web

Figura 1.2: Viso do usurio na pgina

Esses estudos mostram formas de leituras diferentes, concordam que as

Fundamentos do Desenvolvimento Web

1.4 Caractersticas a considerar

1.4.1 Pginas internas

Aula 1 Interface web

Podemos destacar as seguintes caractersticas para as pginas internas: