Fundamentos 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 Design Instrucional
Joo Henrique Caminhas Ferreira/IFES Gustavo Pereira Mateus/UFSC
Coordenao do Curso Web Master

Allan Francisco Forzza Amaral/IFES Rafaela Lunardi Comarella/UFSC
Professora-autora Web Design

Keila Brito/IFES Beatriz Wilges/UFSC
Mnica Nassar Machuca/UFSC
Comisso de Acompanhamento e Validao
Universidade Federal de Santa Catarina UFSC Diagramao
Brbara Zardo/UFSC
Coordenao Institucional Juliana Tonietto/UFSC
Araci HackCatapan/UFSC Marlia C. Hermoso/UFSC
Coordenao do Projeto Reviso

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

Beatriz Helena Dal Molin/UNIOESTE e UFSC e-Tec/MEC
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 mo-
dalidade a distncia. O programa resultado de uma parceria entre o Minis-
trio da Educao, por meio das Secretarias de Educao a Distancia (SEED)
e de Educao Profissional e Tecnolgica (SETEC), as universidades e escolas
tcnicas estaduais e federais.
A educao a distncia no nosso pas, de dimenses continentais e grande

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

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

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

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

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

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

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

1.1 Diferenas entre os usurios 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 35

2.1 Editor de texto Notepad++ 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) 53

3.1 Criando estilos 54
3.2 Mtodo de aplicao do CSS no documento HTML 55
3.3 Pseudoclasses e pseudoelementos 58
7 e-Tec Brasil
Aula 4 Tipos de imagens 61
4.1 Imagens bitmaps 61
4.2 Imagens vetoriais 63
4.3 Formatos de imagens 64
4.4 CorelDRAW 67
Aula 5 Software de edio de imagem (GIMP) 73

5.1 Abas e janelas 74
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 89
6.1 Caixa de ferramentas e painis auxiliares 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
e-Tec Brasil 8 Fundamentos de Desenvolvimento Web

Palavra do professor-autor
Ol, estudante!
Estamos iniciando mais uma etapa do Curso Tcnico em Informtica a dis-

tncia 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 im-
portncia 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 desen-
volvimento de cada atividade, cada avaliao nesta disciplina depende exclu-
sivamente 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
9 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 impor-
tncia 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 di-

ferenciado 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 ati-
vidades 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 exclusivamen-
te de voc, mas voc no est sozinho; por isso, compartilhe seus conheci-
mentos 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.
CARGA
OBJETIVOS DE
AULA MATERIAIS HORRIA
APRENDIZAGEM
(horas)
Conhecer conceitos bsicos tais como:
os diferentes tipos de usurios da web;
o espao de uma pgina web;
Vdeo: Acessibilidade web: custo
navegao nas pginas da internet;
ou benefcio
caractersticas da pgina principal e
1. Interface web 10
pginas internas de um website;
Artigos: http://acessodigital.net
usabilidade;
acessibilidade; e
legibilidade.
Entender os conceitos e funciona-

mentos do HTML, como atributos, marca-
dores, tabelas, insero de imagens, sons Vdeo: HTML Bsico
2. Fundamentos do
e vdeos. Software Notepad ++ 10
HTML
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
3. Cascading Style
CSS no documento HTML. Software Notepad ++ 10
Sheets (CSS)
Conhecer o conceito de pseudoclasses
e pseudoelementos.
Conhecer os tipos de imagens.

Vdeo: Criando imagens com
4. Tipos de Conhecer o software CorelDRAW e
CorelDRAW 10
imagens suas ferramentas bsicas.
Software CorelDRAW
Vdeo: Ferramenta Contgua

5. Software de
Conhecer o software GIMP e suas Vdeo: Fuso de imagens
edio de imagem 10
ferramentas. Software GIMP
(GIMP)
Vdeo: Tutorial: Flash timeline

Vdeo: Tutorial: Interpolao
Conhecer o software Flash e suas
6. Flash no Flash 10
ferramentas de animao.
Software Adobe Flash CS3
13 e-Tec Brasil
Aula 1 Interface web
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 legibili-

dade aplicados ao desenvolvimento de website.
Conhecer os conceitos para utilizao de fontes e cores websites.
Fazem parte da interface web informaes grficas, textuais e au-

ditivas, 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.
Aula 1 Interface web 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 640x840 pixels pouco utilizada. Em julho de 2010, foi usada por ape-
indicadas para monitores LCD e nas 2,35% dos usurios mundiais.
Laptops, conforme o tamanho
do monitor. Acesse: http://
windows.microsoft.com/pt-BR/ Navegadores (browsers) utilizados: existe uma variedade de navegado-
windows7/Getting-the-best-
display-on-your-monitor res disponveis para os usurios web; por isso importante sabermos que
e-Tec Brasil 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 Acesse o site http://www.

inf.puc-rio.br/~inf1403/
O espao da pgina definido como a forma e como os olhos do usurio a docs/alberto2011_1/09_
percorrem. Existem estudos que descrevem que a maior parte dos usurios AvHeuristica.pdf e conhea as
10 Heursticas de Nielsen.
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.
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.

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 encon-
trar 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.

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 man-
t-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.

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 con-

siderarmos a importncia das pginas de apoio ao usurio; elas so respon-
sveis 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.

1.5 Usabilidade
Existe uma forte evidncia de que a preocupao com usabilidade no
projeto de interfaces diminui drasticamente os custos e aumenta a produti-
vidade - Brad Myers. Usabilidade
Segundo a ISO 9841/11, 1998,
usabilidade a capacidade
O termo usabilidade surgiu na dcada de 1980, em substituio expresso de um produto ser usado por
usurios especficos para atingir
user-friendly, que, em portugus, significa amigvel, e era usada princi- objetivos especficos com
eficcia, eficincia e satisfao
palmente por profissionais da rea de ergonomia e psicologia. 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 usabi-
lidade 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, pos-
sibilidade 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.

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 , qua-
lidade de interao entre usurios e sistema, que depende das caracte-
rsticas tanto do sistema quanto do usurio. Alm disso, a usabilidade
tambm depende das tarefas especficas que os usurios realizam, as-
sim 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 compu-

tador 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.

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 Acesse http://acessodigital.net/

art_fred_o_que_e_usabilidade.
Inmeras so as razes para tornar a web acessvel; entre elas, pode-se citar html e faa a leitura desse
as vantagens competitivas, ao atingir no mercado eletrnico, milhes de artigo, e contribua com sua
reflexo sobre o assunto no
pessoas com e sem necessidades especiais; benefcios de usabilidade aos frum da disciplina no AVEA.
outros usurios da web, tornando mais fcil e agradvel o acesso s infor-
maes online; e ainda, a vantagem de estar de acordo com polticas gover-
namentais de incluso digital, que buscam a insero de todos na sociedade
da informao
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 infor-
maes disponveis na internet e, com isso, passe a produzir e divulgar conhe-
cimento, contribuindo, assim, com a incluso social dos portadores de neces-
sidades especiais e idosos, como o exemplo observado na Figura 1.3 a seguir.

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 diferen-
tes 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 habitu-

ais, um navegador por voz ou um sistema operacional pouco convencional.
Um projeto de web que desconsidere os princpios de acessibilidade prova-

velmente 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.

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 transfor-

madas 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 Legibilidade
Legibilidade a facilidade
uma leitura. Observe que, conforme a Figura 1.4 se o ponto de fixao fosse o com que um leitor consegue
nmero 0, eis o bloco de informao que nosso crebro conseguiria processar: 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.

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).

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

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!!!

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
Serifas
e as sem serifa. So os pequenos traos e
prolongamentos que ocorrem no
fim das hastes das letras.
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.
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 Para a maioria do pblico-alvo, o
a um website, um texto legvel um dos fatores de grande importncia, tamanho ideal de fonte transita
entre 10 e 12 pts (NIELSEN apud
pois devemos sempre considerar o pblico-alvo. 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.

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.
O olho humano pode detectar quase todas as graduaes de cores, quando

as luzes monocromticas como: vermelho, verde e azul so misturadas apro-
Para a leitura eficiente de priadamente, segundo as muitas teorias que procuram explicar o fenmeno
um texto, principalmente, um
website, em que essa leitura da viso cromtica.
ocorrer na tela do monitor,
devemos procurar sempre uma
combinao harmoniosa das As cores se dividem em trs grupos:
cores, procurando contrastar a
cor da fonte e do fundo.
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).

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)

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
Conhea a utilizao de cor a sensao de uniformidade, profundidade, movimento, luz e sombra.
no mecanismo de interao
com o usurio, disponvel em Podemos considerar anlogas trs cores que se apresentam em sequncia
http://www.ibrau.com.br/ no crculo das cores como o amarelo, amarelo-laranja e laranja, como
artigoutilizacaodecor.htm
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 algu-

mas 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 fisio-
lgicas entre os indivduos.
Vamos experimentar um
Resumo
aplicativo que gere esquemas Nesta Aula, voc pde ver pontos importantes que devem ser considera-
e combinaes de cores. Cada
esquema se baseia em uma
dos ao desenvolver o layout para um website. Para que a navegao em
cor usada como base, que um website seja eficiente, precisamos responder aos usurios trs perguntas
combinada e complementada
por cores adicionais calculadas fundamentais da navegao: Onde estou? Onde estive? Onde posso ir?
por meio de algoritmos que
permitem a melhor combinao
tica. Esta ferramenta, Color Em uma pgina principal de website podemos destacar as seguintes carac-
Scheme, est disponvel em
http://wellstyled.com/tools/
tersticas: identificar a localizao do usurio, oferecer suporte aos usurios,
atualizao permanente, marcar a localizao do usurio em relao s ou-
Vamos aprender sobre as
cores de forma ldica e tras pginas e guiar seus percursos, ter mais rea para navegao do que
divertida? Acesse o site Color para contedo e informar os assuntos de maneira concisa e direta.
in Motionno endereo http://
www.mariaclaudiacortes.
com/. O site uma experincia
interativa sobre a comunicao e
Nas pginas internas: apresentar em destaque o nome da pgina principal,
o simbolismo da cor. mostrar em local bem visvel a marcada empresa ou organizao, manter

o mesmo estilo das outras pginas, manter o foco em aspectos mais espe-
cficos, prover o sentido de localizao do usurio, manter as informaes
estruturais, entre outros.
Entendemos que um website tem que possibilitar aos mais diferentes usu-
rios 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.

Aula 2 Fundamentos do HTML
Objetivos
Entender os conceitos e funcionamentos do HTML, como atribu-

tos, 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/
Aula 2 Fundamentos do HTML 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; Mltiplas visualizaes: voc pode editar vrios documentos ao mesmo tempo.
caso no o tenha instalado em
seu computador, entre no site:
http://notepad-plus. Chaves, colchetes e parnteses com destaque: quando o cursor se aproxi-
sourceforge.net/br/site.htm,
o download gratuito. Porm, ma de um desses smbolos { } [ ] ( ), o smbolo que est prximo ao cursor e o
caso tenha preferncia por outro
editor de texto, ele poder ser
smbolo simetricamente oposto so destacados, assim como sua guia de inden-
utilizado. tao, se houver, fazendo com que a localizao de um bloco seja mais fcil.

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 nave-
gador (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 do-

cumentos 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)

<html>... </hmtl>: abre e encerra uma pgina. Essas tags so as mais im-
portantes, pois informam ao browser que o documento est escrito em html.
<head> </head>: a tag <head>vem abaixo da tag <html>, indica os co-

mandos 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? Utili-
zando 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.

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 Veja o link que fala de alguns
tipos de websites
marcadores funciona como chave de liga e desliga. Isso quer dizer que um http://daniellesimoes.com/
marcador utilizado para indicar o incio da formatao e outro para infor- Tipos%20de%20Web%20Sites.
pps
mar o fim dela; no caso do fechamento, inserido /, antes do nome do
marcador (ALVES, 2009).
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
Cor Hexadecimal 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:

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
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
Segundo Ferreira (2009), tabela a tabela do Excel, por exemplo, mas uma importante ferramenta para
substantivo feminino; significa
pequena tbua ou quadro em definir onde as informaes, imagens, etc. sero organizadas. O contedo
que se registram nomes de de cada clula poder ter textos, imagens e at mesmo outras tabelas. As
pessoas ou coisas.
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 Linhas Clula

conter outra tabela
Figura 2.5: Exemplo de tabela em HTML
Fonte: Adaptado de Oliviero (2000)

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, signifi-
ca 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:

Left esquerda
Center no centro
Right direita
Se esses valores forem inseridos entre as tags <td>...</td> define o alinha-

mento 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 va-

lores 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 forma-
tos 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 forma-

tos, necessrio convert-la com a ajuda de software, como CorelDRAW
ou GIMP, entre outros, como veremos frente.

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:

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 visu-
alizao; como exemplo podemos citar:
Loop: ajustado com o valor TRUE, o vdeo configurado para tocar indefini-
damente; 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.

Exemplo 5:
Resultado:
interessante que o arquivo

da imagem esteja no mesmo
diretrio que o documento
HTML; caso no esteja,
necessrio passar o caminho
Figura 2.9: Exemplo de insero de vdeo na pgina completo.
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, independente-
mente 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:

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 inse-
rida 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 Exemplo 7:
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.
Resultado:
Figura 2.11: Exemplo de segundo plano


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, ime-
diatamente, 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:

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.

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.

1 2 3 4 5
A HREF= vnculo>texto destaque</A>
Tag de abertura Texto a ser

mostrado
Arquivo a ser na pgina
carregado
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.

Resumo
Com a concluso desta Aula, voc dever estar apto a reconhecer a lingua-
gem 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 con-
tedo com tags para oferecer a estrutura e que chamamos as tags corres-
pondentes 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 lingua-
gem 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?

Aula 3 Cascading Style Sheets (CSS)
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 lin-
guagem 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 Para o estudo e desenvolvimento
das atividades deste captulo,
de estilos, possibilitando o controle de vrios documentos a partir de um, a continuaremos a usar o
Notepad++; porm, os arquivos
possibilidade de criar layouts especficos para determinadas mdias, teles e desenvolvidos sero salvos agora
dispositivos mveis, entre outros. 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 documen-
to, que pode ser de extenso HTML. Essa folha pode ser um documento se-
parado, 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.
Aula 3 Cascading Style Sheets (CSS) 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 configura-
o vlida para o atributo em questo, como 20 pt (20 pontos) para font-size.
Atributo valor: nesse item da sntese pode-se atribuir mltiplas declara-

es 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.

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 docu-
mento. 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 resul-
tado 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 separa-
do como no mtodo inline.

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


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
Exemplo 12: quadro com vrios atributos CSS
e a descrio do que cada um
formata.
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.

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 con-

veniente de descrever seu comportamento. E so usados para especificar
subpartes de elementos; enquanto pseudoclasses permitem s folhas de es-
tilo 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 en-
tre o HTML e o CSS, as suas principais diferenas, qualidades e caractersticas.

Quadro 3.1: HTML e CSS sobre contedo e estilo
HTML CSS
Saudaes, CSS; estou feliz que voc esteja aqui porque

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

Ah! . Eu no gostaria de ver as pessoas te dando crdito
browser como exibir o contedo. Isso no verdade! Eu
pelo meu trabalho
trabalho com a estrutura e no com a apresentao
Decente soa um pouco exagerado, voc no acha?

Bem, voc pode ver como as pessoas podem ficar confu- Quero dizer, a maneira como a maioria dos browsers exi-
sas; afinal possvel utilizar HTML, sem CSS e ainda obter be o HTML puro parece um pouco ordinria. As pessoas
uma pgina com visual decente. 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 Fala srio! Sem mim as pginas Web seriam muito
estruturado muito mais importante do que ter algo chatas. E no apenas isso, tire a capacidade de adicionar
bonitinho. O estilo muito superficial; a estrutura do estilo s suas pginas e ningum as levar a srio. Tudo
contedo que interessa. parecer malfeito e nada profissional.
Declarao da moda? Um bom design e uma boa

Nossa, que ego, heim? Acho que eu no poderia esperar apresentao podem ter um efeito enorme na legibilidade
outra coisa de voc. Voc est apenas tentando fazer e usabilidade das pginas. E voc deveria estar contente
uma declarao da moda com todo o estilo sobre o qual porque minhas regras de estilo flexveis permitem que
est falando. os designers faam qualquer tipo de coisas interessantes
com seus elementos sem bagunar sua estrutura.
Certo. Na verdade, somos linguagens totalmente diferen-
tes, o que bom, porque eu no gostaria de ter nenhum
No se preocupe, vivemos em universos separados.
dos seus designers de estilo bagunando meus elementos
de estrutura.
E isso obvio para mim, todas s vezes que olho para T! HTML pode ser considerada uma linguagem? Algum
CSS, essa linguagem aliengena. j viu algo mais desajeitado do que aquelas tags?
D s uma olhada no CSS; so elegantes e simples, e no

Milhes de escritores Web discordariam de voc. Eu
sinais de menor e maior patticos<em><to><torno><d
tenho uma linguagem boa e limpa que se encaixa perfei-
e><tudo>. <Olha><gente><,><eu><posso><falar><
tamente ao contedo.
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

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.

Aula 4 Tipos de imagens
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 con-
forme 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.
Pixel
X
Z
Figura 4.1: Pixels de uma imagem bitmap
Aula 4 Tipos de imagens 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)
1 2 21
2 4 22
4 16 24
6 64 26
7 128 27
8 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
32 232
cores
Fonte: Adaptada de Oliviero (2001)
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


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 mer-
cado 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 cl-
culos matemticos, coordenadas cartesianas e denominadas vetores. As imagens
vetoriais podem ser redimensionadas em qualquer escala, sem perda de quali-
dade; 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 bit-

map, o que pode ser feito no mesmo software utilizado para criao da imagem.

4.3 Formatos de imagens
4.3.1 GIF CompuServe Graphics
Interchange Format
Formato muito utilizado no ambiente da internet. Tem como formato pa-
dro o uso de 256 cores que correspondem a 8 bits; alm disso, suas combi-
naes 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 per-
feito 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 carre-
gados pelo navegador.
Segundo Olivero (2001), o formato GIF usa tcnica de compresso denomi-

nada 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

4.3.2 BMP Bitmap
uma imagem bitmap sem compresso da informao, o que a torna gran-
de 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
Caractersticas Vantagens Desvantagens Observaes
imagem
N de cores: at 256 S permite um arma-
Tem compresso,
cores (8 bits). zenamento mximo de
GIF sem perda de
Compresso: Sim. 256 cores. No indicado Com compresso
Graphics Inter- informao. Indicado
Perda de informao: para fotografias nem LZW.
change Format para esquemas, gr-
No. imagens fotorrealistas
ficos de barras, etc.
Transparncia: Sim. (muitas cores).
N mximo de cores: Por no ter compres-

at 16 milhes de so, os ficheiros so
cores (24 bits). muito grandes. Caso
No tem perda de
BMP Bitmap Compresso: No tem. a imagem tenha 16 Sem compresso.
informao.
Perda de informao: milhes de cores, cada
No aplicvel. pixel ocupa sempre 24
Transparncia: No. bits (3 bytes).
Continua

Como o algoritmo
de compresso, tem
perda de informa-
N de cores: Sempre 16 Armazena sempre
o. Cada vez que
milhes de cores (mes- informao referen-
fazemos guardar o
mo que a imagem tenha te a 16 milhes de Muito pequeno. Ide-
JPG (ou JPEG) ficheiro, volta a perder
menos cor) (24 bits). cores. Algoritmo de al para colocar em
Joint Photographic informao. No indi-
Compresso: Sim. compresso muito pginas de internet
Experts Group cado para esquemas e
Perda de informao: eficaz. Indicado para e enviar por e-mail.
grficos de barras (por
Sim fotografias e ima-
exemplo) porque o
Transparncia: No. gens fotorrealistas.
algoritmo no est oti-
mizado para transies
abruptas de cor.
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 G IF
... No seria timo se as pessoas ficassem somente com
o GIF? Ento, eu no precisaria encontrar voc com tanta
Ol, GIF. No foi voc que eu vi agora mesmo em
frequncia. Ei, representar fotos fcil, se voc quer perder
uma pgina web?
qualidade. Mas eu sou todo qualidade. Se eu no puder
representar totalmente uma, no farei isso. D uma olhada
Ah! Assim que voc se tornar bom em representar
em alguns dos logos que voc tentou representar ... Eca!
imagens complexas, como fotos, tenho certeza de
que as pessoas ficaro felizes em escolher voc, mas
T, mas a que custo? Encare a verdade: para fazer com que
voc ainda no sabe como representar nada que
uma foto fique de um tamanho razovel para ser transmitida
precise de mais de insignificantes 256 cores.
pela web, voc precisa perder um pouco de qualidade na
imagem.
Voc quer falar comigo sobre qualidade? Eu deixo
meus usurios utilizarem exatamente a qualidade
Certo, certo, mas voc j olhou para as linhas, logos, peque-
que eles desejam.
nos textos, cores slidas? Eles no ficam to bem em JPG.
Isso verdade, mas a maior parte das pessoas est

(GIF literalmente desaparece).
mais do que satisfeitas com isso. Nem todo mundo
precisa de imagens de altssima resoluo em suas
(GIF reaparece).
pginas. Comigo, os usurios normalmente podem
escolher uma configurao de qualidade baixa ou
No precisa entrar em pnico. Estou apenas mostrando algo
mdia se estiverem satisfeitos com a qualidade das
a voc. Se JPG to genial, como que voc no consegue
imagens. E, se utilizassem voc, teriam arquivos
tornar partes de suas imagens transparentes como eu? Com
imensos para a mesma imagem.
a transparncia, o que est atrs da imagem pode ser visto.
Se meus usurios quiserem um logo em uma pgina web, e a
Ah, claro, GIF funciona muito bem nesses casos, mas
pgina tiver um fundo colorido, eles me utilizaro, pois sabem
apenas se houver um pequeno nmero de cores. Voc
que eu deixarei o fundo aparecer atravs de partes do logo
apenas uma verso minha menos equipada. Eu
que no possuem cor.
posso fazer tudo o que voc faz.
Claro, e ento algum altera a cor da pgina web. Sem

O que? GIF? Estamos no meio de um programa aqui.
chance. A transparncia o caminho e, para us-lo, voc
Aonde voc foi?
precisa de mim.
Continua

Eu acho que voc supervaloriza essa coisa de trans-
parncia digo, voc precisa apenas colocar aquela Ah, ? E que tal se voc quiser recortar a foto de algum, ou
cor de fundo na imagem. mesmo de uma rvore, e coloc-la em uma pgina web sem
um fundo?
Bem, no estou muito preocupado com isso; no h
muitas fotos sem fundo. Voc ficaria surpreso com a quantidade de vezes em que
sou usado para representar fotos, s porque meus usurios
E quando isso aconteceria? desejam um fundo transparente.
Ah, t. Fique com seus logos e imagens de texto
simples, e eu ficarei com as fotos e as imagens Ei, algum est me pedindo para fazer uma transparncia ...
complexas. Todo mundo sabe que eu sou melhor para Tenho que correr.
lidar com a complexidade.
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, de-
senvolvido 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 in-
ternet (botes, cones, animaes grficas, etc.), confeco de cartazes, etc.
Segundo Oliviero (2001), o CorelDraw um software que permite a criao Saiba mais sobre o CorelDRAW
em: www.corel.com.
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.
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.

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 tra-

balhocom 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

Figura 4.7: Tela do ambiente de trabalho com imagem j criada
Figura 4.8: Janela de aplicativos do CorelDRAW X3

Fonte: CorelDRAW X3

Quadro 4.4: Descrio dos aplicativos do CorelDRAW
Parte Descrio
Uma barra flutuante com ferramentas para criao, preenchimento e modificao de

Caixa de ferramentas
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.
A rea fora da pgina de desenho circundada por barras de rolagem e controle dos
Janela de desenho
aplicativos.
Uma barra de encaixe com comandos relacionados ferramenta ou ao objeto ativo. Por
Barra de propriedades exemplo, quando a ferramenta texto est ativa, a barra de propriedades de texto exibe
comandos que criam e editam texto.
Uma janela que contm os comandos disponveis e as configuraes relevantes para uma
Janela de encaixes
ferramenta ou tarefa especfica.
Bordas horizontais e verticais que so utilizadas para determinar o tamanho e a posio

Rguas
dos objetos em um desenho.
Navegador de docu- A rea na parte inferior esquerda da janela do aplicativo, que contm controles para a
mentos movimentao entre as pginas e a adio de pginas.
A rea retangular dentro da janela de desenho. Trata-se da parte da rea de trabalho que
Pgina de desenho
pode ser impressa.
Uma rea na parte inferior da janela do aplicativo que contm informaes sobre proprie-
Barra de status dades do objeto, como tipo, tamanho, cor, preenchimento e resoluo. A barra de status
tambm mostra a posio atual do mouse.
Um boto no canto inferior direito que abre uma pequena exibio para ajud-lo a se
Navegador
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. importan-
te conhecermos uma a uma, pois este o conjunto de ferremantas mais impor-
tante 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.

Como exemplo, podemos citar a ferramenta editar forma; quando aces-
samos 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.
Forma: editar a forma dos objetos.

Pincel borrar: distorcer um objeto em vetor sendo arrastado sobre ele.
Editar forma 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: permite mover reas indesejadas dos objetos.
Faca: permite cortar objetos.
Cortar
Borracha: permite apagar reas do desenho.
Excluir segmento virtual: permite excluir as partes de objetos entre inseres.
Zoom: altera nvel de ampliao na janela de desenho.
Zoom
Mo: controla que parte do desenho fica visvel na janela do desenho.
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.
Curva 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.
Preenchimento inteligente: permite criar objetos, a partir de reas contornadas para,
Ferramentas inteligentes ento, aplicar um preenchimento.
Desenho inteligente: converte pinceladas mo livre, em formas bsicas e curvas suaves.
Retngulo: permite criar quadrados e retngulos;
Retngulo
Retngulo com 3 pontos: permite desenhar retngulos em ngulo.
Elipse: permite desenhar elipses e crculos.
Elipse
Elipse com 3 pontos: permite deenhar elipses em ngulo.
Polgono: permite criar estrelas e polgonos simtricos.
Estrela: permite criar estrelas perfeitas.
Objeto Estrela complexa: estrelas complexas que apresentam lados com insero.
Papel grfico: simula um papel quadriculado.
Espiral: permite desenhar espirais simtricas e logartmicas.
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 perfeitas 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

Mistura: mistura dois objetos.
Contorno: aplica contorno a um objeto.
Distorcer: distoro do tipo empurrar e puxar, zper e torcer (na barra de propriedades).
Ferramentas interativas 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: copia as propriedades do objeto.

Conta-gotas
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: permite aplicar vrios preenchimentos.

Preenchimento interativo
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 bidimen-

sional, utilizado para fazer ilustrao vetorial e layout de pgina, que possi-
bilita 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 facili-
tar 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.

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 gratui-
tamente 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.
Aula 5 Software de edio de imagem (GIMP) 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 cai-
xa 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.

Figura 5.3: Caixa de ferramentas do GIMP
Fonte: GIMP v.2.6.11, 2011

5.2.1 Ferramentas de seleo
As ferramentas a seguir so destinadas seleo, no fazem qualquer alte-
rao 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:
Substituir a seleo atual: o retngulo criado na imagem se torna uma

Seleo retangular 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 previa-
mente selecionadas que estavam dentro do retngulo desenhado permaneam
selecionadas, mas s tem efeito se j existir uma seleo anterior.
Esta ferramenta de seleo usa as mesmas opes que a ferramenta de seleo

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

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

Seleo contgua
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

Funciona de forma bem similar seleo de regies contguas, selecionando
Seleo de cor
simultaneamente cores similares em toda a imagem.
Esta ferramenta tambm serve para selees em torno de objetos; nesse caso,
Tesoura 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 simples-
mente iniciar outro componente do vetor.
Mover: move o vetor selecionado, mantendo-se todo o restante da imagem.

Seleciona a cor da regio escolhida, exibindo seus valores e colocando-a como
Seleo de cores
cor ativa do GIMP.
Permite a visualizao na tela em escala diferente. Um arquivo aberto no faz

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

Medidas a linha que une esses dois pontos e a horizontal. Esta ferramenta no faz
nenhuma alterao na imagem.
Esta ferramenta permite que uma parte da imagem, ou uma camada, seja ar-
rastada com o mouse para qualquer outro ponto do espao da imagem. Ao ser
Mover
usado sobre uma seleo ativa, deve-se clicar e arrastar o mouse. O contedo
da seleo movido para outra parte da imagem.
Com esta ferramenta voc pode alinhar ou arranjar camadas e outros objetos.
Nas opes da ferramenta, voc pode optar por alinhar: primeiro item, imagem,
Alinhamento 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.
Nas suas opes podemos optar por cortar somente na camada atual, ou seja,
Corte 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 inse-
ridas mais informaes na imagem, alm dos limites da imagem ou camada atuais.
Concluso
Fonte: Adaptado de Calligaris, 2005

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

Ferramenta Funo
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
Rotacionar
selecionada para rotao. Uma caixa de dialogo aberta em seguida e pode-se digitar a
angulao em que se deseja rotacionar a imagem.
Permite que se redimensionem partes ou detalhes de uma imagem. Uma caixa de dilogo
Redimensionar
aberta em seguida e pode-se digitar as medidas em que se deseja redimensionara imagem.
Essa ferramenta permite distorcer um objeto para obteno de um efeito. Uma caixa de dilogo
Inclinar
aberta em seguida e pode-se digitar as medidas em que se deseja inclinar a imagem.
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
Perspectiva
pode tambm ser utilizada para rotao, espelhamento, redimensionamento, inclinao bas-
tando-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.
Esta ferramenta cria ou edita camadas de texto. Para us-la, basta clicar-se na imagem; em
Texto 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

Quadro 5.3: Descrio das ferramentas de pintura do GIMP
Ferramenta Funo
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
Preenchimento 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.
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
Mistura
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

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 co-

res e inserir comentrios que podero ser lidos como uma assinatura digital.
Figura 5.11: Menu Opes Avanadas

Fonte: GIMP v.2.6.11, 2011

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 en-

contrar 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

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

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

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 pressio-

nada 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

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

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

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 ferra-
mentas que permitem criar e editar imagens bitmaps e tambm suporta ve-
tores. Com esse software voc viu que possvel tambm recortar uma ima-
gem, 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.

Agora que j conhecemos o GIMP, que tal exercitar um pouco mais os recur-
sos 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.

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
1 2 3 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
4 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 encon-
tra as ferramentas necessrias para a edio e criao de animaes. impor-
tante conhecermos uma a uma, pois esse o conjunto de ferremantas mais im-
portantes do Flash. Com elas podemos modificar, criar e preeencher desenhos.

1 2
3 4
5 6
7 8
9 10
11 12
13 14
15 16
17
18
}
19 / 20 / 21
b d
Controles modificadores
c e
Figura 6.3: Caixa de ferramentas do Flash CS3


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.
Usada para ajustar os pontos de uma

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

Lao bastando utiliz-la para contornar a
figura.
Desenha figuras, a partir de segmentos
Caneta
de retas ou curvas entre dois vrtices.
Permite a criao de textos a serem
Texto
exibidos na apresentao.
Oval Permite o desenho de crculos e elipses.
Permite desenhar quadrados ou

Retngulo
retngulos.
Permite o traado de linhas, define a
Lpis trajetria dos objetos de uma anima-
o, divide reas pintadas, etc.
Permite o desenho de pontos amplos

Pincel
na tela.
Permite modificar as linhas de contorno

Nanquim ou tinteiro de uma figura, aplicando cor, espessura
e estilos.
Permite pintar o interior de objetos
Balde de tinta
fechados.
Permite capturar as informaes de
cores e estilos de um determinado
Conta-gotas ou sombreador
objeto, para que possam ser aplicados
em outro objeto.
Apaga os desenhos que se encontram
Borracha ou apagador no palco do Flash, podendo assumir
diversos formatos e funes.
Permite deslocar toda a rea de dese-
Mo
nho at um ponto desejado.
Permite ampliar ou reduzir os desenhos
Zoom
que se encontram no palco.
Continua

Permite escolher a cor do contorno de
Trao
uma figura.
Permite escolher a cor do preenchimen-
Preenchimento
to de uma figura.
Altera a cor de preenchimento para
Padro branco e o contorno para preto, de um
ou mais objetos selecionados.
Desliga o preenchimento ou o contorno
Sem cor
de uma figura.
Inverte as cores de preenchimento e de
Trocar cores
contorno de uma figura selecionada.
A - Encaixar: liga/desliga o ajuste de

objetos na grade e a conexo de linhas.
B - Suavizar: suaviza linhas sele-
cionadas, deixando-as com cantos
Controles modificadores
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 grfi-
cos, 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


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 atribuir-
lhes 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 tra-
os. 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.

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 nme-
ro 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 ani-

maes feitas no Flash.
6.4 Transformao de textos

Para criar textos no Flash, clique na ferramenta Texto, na caixa de ferramen-
tas, 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.

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 est-
ticos 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, Figura 6.8: Caixa de propriedades do Texto Dinmico
melhorando a eficincia do Fonte: Adobe Flash CS3, 2011
desenvolvimento de aplicaces
na plataforma Flash, desde uma
imagem simples uma complexa Campos de Texto: tipo que permite a entrada de texto por parte do usu-
animao rio, 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.

Selecione Modificar e depois Desmembrar. Cada caractere no texto sele-
cionado 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


Selecione novamente Modificar, Desmembrar, para converter os caracte-
res 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 sele-

cionado colocado em um bloco de texto separado. O texto permanece
na mesma posio no palco.
Selecione novamente Modificar, Desmembrar para converter os caracte-

res 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.

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 per-
mitiro 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 posi-
o 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.

Sempre que abrimos um novo documento no Flash, ele cria, automaticamen-
te, 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


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 se-
parar 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 exigi-
das 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
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 ima-
gens 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 sequ-
ncia at alcanar o ltimo.
Figura 6.17: Timeline

Cada timeline tem sua prpria camada.

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. Normal-
mente, 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 determi-

nado, 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.
6.6.2.1 Interpolao de forma
Usadas para alterar a forma de um objeto ao longo de um tempo determi-
nado, pela definio dos pontos iniciais (aqueles onde ocorrero alteraes)
e do ponto final nos quadros-chave. Ao ser aplicado o Flash desenha as eta-
pas 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).

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 anima-
cao para inserir quadros at a posio 80 da timeline.
5. No frame (quadro) 1 da camada texto, usando a ferramenta Text es-

creva 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 qua-

dro 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 pro-

priedades 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.
11. Clique com o boto direito do mouse entre o frame 20 e 25 e selecione Cre-
ate 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 Cre-
ate 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 de-
terminado 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:

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 in-

completa, 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

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 independente-

mente de qualquer ocorrncia.
Over: Segundo quadro da timeline do boto. Refere-se ao comporta-
mento 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 pos-
sui sua prpria linha do tempo que funciona independente da linha de tem-
po principal.

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. Normal-
mente 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, pode-
mos 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 selecio-

namos 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 (opcional-

mente podemos clicar Ctrl + Enter).
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.

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 Proprie-
dades 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 ima-
gem 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 qua-

dro-chave; aproveite e insira quadros normais na camada imagem tam-
bm. 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.
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 confi-
gurao de publicao especificada na caixa de dilogo Publish Settings salva
com o documento. Voc pode tambm criar e atribuir nome a um perfil de pu-
blicao 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, automatica-

mente, se o Flash Player no estiver disponvel (GIF, JPEG, PNG e QuickTime).
O(s) documento(s) HTML de suporte necessrio(s) para mostrar o conte-

do 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

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 pode-
mos armazenar imagens, smbolos e mover clipes. Aprendeu que no Flash
podemos trabalhar com camadas, que so nveis de contedos dispos-
tos 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 desenvol-
vimento de um website, sabendo que esse o apenas o incio de um longo
caminho. Os conceitos aprendidos neste caderno so a base para o desen-
volvimento 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 publica-
es 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 ne-

nhum objeto est selecionado), clique no boto Settings (Configuraes).
c) Na caixa de dilogo Publish Settings, selecione a opo para cada forma-

to de arquivo que deseja criar.
O formato SWF do Flash selecionado por padro. O formato HTML tam-

bm selecionado por padro. Voc precisa de um arquivo HTML para que
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 ar-

quivo 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 publi-

cados 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 con-

figuraes 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).

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 Cor da borda citada.
border-left-style Estilo da borda citada.
border-left-width Largura da borda citada.
border-right Largura, estilo e cor da borda direita.
border-right-color Cor da borda citada.
border-right-style Estilo da borda citada.
border-right-width Largura da borda citada.
border-style Estilo de todas as quatro bordas.
border-top Largura, estilo e cor da borda superior.
border-top-color Cor da borda citada.
border-top-style Estilo da borda citada.
border-top-width Largura da borda citada.
border-width Largura de todas as quatro bordas.
Elementos flutuantes esquerda ou direita de um

clear
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
float Se o elemento flutua.
Estilo, variante, peso, tamanho e altura da linha do tipo

font
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.
Posio do elemento em relao margem esquerda da

left
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.
Exibio de imagens que so maiores do que suas

overflow
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

text-indent Recuo da primeira linha do pargrafo.
Transformao para todas maisculas, minsculas ou

text-transform
inicial maiscula.
Posio do elemento em relao parte superior da

top
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 tra-

balho 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
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 ori-
ginal; 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 redimen-
sionar 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 tama-
nho 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 corres-
ponde 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 na-
riz; 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, co-
locando o cursor do mouse em cima de cada ferramenta, que logo vai apa-
recer 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 bra-

o 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 come-
ou e terminou.

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 crian-
do os objetos do desenho no Corel, tudo que fizer depois sempre vai ficar
por cima do objeto anterior, s notamos agora por causa do preenchi-
mento, 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.
APNDICE 2 - Atividades do CorelDRAW: Construo de um boto
1 passo: Faa um retngulo e, com a ferramenta Forma, arredonde os can-

tos 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 re-

tngulo 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 ar-
raste 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 ta-
manho, posio e cores certas. Quando terminar, salve o documento.

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.
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.

Currculo da professora-autora
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.
Currculo da professora-autora 123 e-Tec Brasil

Fundamentos do
Desenvolvimento Web
Keila Brito
Curso Tcnico em Informtica

Fundamentos PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Fundamentos PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Fundamentos do

Curso Tcnico em Informtica

Secretaria de Educao a Distncia

Instituto Federal do Esprito Santo

Coordenao do Curso Web Master

Professora-autora Web Design

Coordenao do Projeto Reviso

Coordenao de Design Instrucional Projeto Grfico

B862f Brito, Keila

Fundamentos do Desenvolvimento Web: Curso Tcnico em

Bem-vindo ao e-Tec Brasil!

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

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

Os cones so elementos grficos utilizados para ampliar as formas de

Ateno: indica pontos de maior relevncia no texto.

Saiba mais: oferece novas informaes que enriquecem o

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

Mdias integradas: sempre que se desejar que os estudantes

Atividades de aprendizagem: apresenta atividades em

Aula 1 Interface web 15

Aula 2 Fundamentos do HTML 35

Aula 3 Cascading Style Sheets (CSS) 53

Aula 5 Software de edio de imagem (GIMP) 73

Aula 6 Software de animao de imagens

Currculo da professora-autora 123

e-Tec Brasil 8 Fundamentos de Desenvolvimento Web

Estamos iniciando mais uma etapa do Curso Tcnico em Informtica a dis-

No mais, desejo sucesso e um excelente estudo!

Prof. Keila Brito

Ol, caro estudante!

Nesta disciplina, voc descobrir a importncia de conhecer os fundamentos

O objetivo deste material auxili-lo no conhecimento de contedos dos

Desenvolver e analisar sites requer uma viso sistmica e abrangente com

importante ressaltar que a aprendizagem um processo contnuo e di-

Lembre-se que estamos comeando uma longa e desafiadora jornada! Cada

Fica aqui o desafio de concluirmos este estudo com SUCESSO!

Prof. Keila Brito

Disciplina: Fundamentos do Desenvolvimento Web (carga horria: 60h).

Ementa: Conceitos fundamentais de aplicaes web. Arquitetura cliente-servidor

Entender os conceitos e funciona-

Compreender o conceito de CSS.

Conhecer os tipos de imagens.

Vdeo: Ferramenta Contgua

Vdeo: Tutorial: Flash timeline

Conhecer conceitos bsicos sobre os diferentes tipos de usurios

Identificar, no espao de uma pgina web, elementos tais como

Compreender os conceitos de usabilidade, acessibilidade e legibili-

Conhecer os conceitos para utilizao de fontes e cores websites.

Fazem parte da interface web informaes grficas, textuais e au-

1.1 Diferenas entre os usurios

Alm da diversidade de pessoas com acesso ao computador, houve tambm

Devido diferena de usurios e de formas de acesso, necessrio e

Aula 1 Interface web 15 e-Tec Brasil

Algumas configuraes podem afetar a visualizao e o uso de interfaces

Tamanho da pgina e resoluo: a quantidade de pixels que compem

Espao do browser na pgina: o espao ocupado pelo browser na pgina

As resolues de tela mais utilizadas atualmente pelos usurios de PCs, segundo

1024x768 pixels serve de referncia para o desenvolvimento de

1280x800 pixels no desenvolvimento de layout para interfaces web, a

1280x1024 pixels tambm utilizada por um nmero crescente de

e-Tec Brasil 16 Fundamentos do Desenvolvimento Web

Velocidade de conexo e tamanho do arquivo da pgina em Kb: a

1.2 O espao da pgina Acesse o site http://www.