Rede ETec - Fundamentos de Desenvolvimento Web

Curso Tcnico em Informtica

Fundamentos do Desenvolvimento Web

Keila Brito

Fundamentos do Desenvolvimento Web

Keila Brito

2011Colatina - ES

Presidncia da Repblica Federativa do Brasil

Ministrio da Educao

Secretaria de Educao a Distncia

Equipe de ElaboraoInstituto Federal do Esprito Santo IFES

Coordenao InstitucionalGuilherme Augusto De Morais Pinto/IFESJoo Henrique Caminhas Ferreira/IFES

Coordenao do CursoAllan Francisco Forzza Amaral/IFES

Professora-autoraKeila Brito/IFES

Comisso de Acompanhamento e ValidaoUniversidade Federal de Santa Catarina UFSC

Coordenao InstitucionalAraci HackCatapan/UFSC

Coordenao do ProjetoSilvia Modesto Nassar/UFSC

Coordenao de Design InstrucionalBeatriz Helena Dal Molin/UNIOESTE e UFSC

Coordenao de Design GrficoAndr Rodrigues/UFSC

Design InstrucionalGustavo Pereira Mateus/UFSC

Web MasterRafaela Lunardi Comarella/UFSC

Web DesignBeatriz Wilges/UFSCMnica Nassar Machuca/UFSC

DiagramaoBrbara Zardo/UFSCJuliana Tonietto/UFSCMarlia C. Hermoso/UFSC

RevisoJlio Csar Ramos/UFSC

Projeto Grficoe-Tec/MEC

Instituto Federal do Esprito SantoEste 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.

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

e-Tec Brasil33

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

[email protected]

e-Tec Brasil5

Indicao de cones

Os cones so elementos grficos utilizados para ampliar as formas de

linguagem e facilitar a organizao e a leitura hipertextual.

Ateno: indica pontos de maior relevncia no texto.

Saiba mais: oferece novas informaes que enriquecem o assunto ou curiosidades e notcias recentes relacionadas ao

tema estudado.

Glossrio: indica a definio de um termo, palavra ou expresso utilizada no texto.

Mdias integradas: sempre que se desejar que os estudantes desenvolvam atividades empregando diferentes mdias: vdeos,

filmes, jornais, ambiente AVEA e outras.

Atividades de aprendizagem: apresenta atividades em diferentes nveis de aprendizagem para que o estudante possa

realiz-las e conferir o seu domnio do tema estudado.

e-Tec Brasil7

Sumrio

Palavra do professor-autor 9

Apresentao da disciplina 11

Projeto instrucional 13

Aula 1 Interface web 151.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 352.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) 533.1 Criando estilos 54

3.2 Mtodo de aplicao do CSS no documento HTML 55

3.3 Pseudoclasses e pseudoelementos 58

Aula 4 Tipos de imagens 614.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) 735.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

Fundamentos de Desenvolvimento Webe-Tec Brasil 8

e-Tec Brasil9

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

e-Tec Brasil11

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

e-Tec Brasil13

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

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

AULA OBJETIVOS DE APRENDIZAGEM MATERIAISCARGA

HORRIA(horas)

1. Interface web

Conhecer conceitos bsicos tais como: os diferentes tipos de usurios da web; o espao de uma pgina web; navegao nas pginas da internet; caractersticas da pgina principal e pginas internas de um website; usabilidade; acessibilidade; e legibilidade.

Vdeo: Acessibilidade web: custo ou benefcio

Artigos: http://acessodigital.net10

2. Fundamentos do HTML

Entender os conceitos e funciona-mentos do HTML, como atributos, marca-dores, tabelas, insero de imagens, sons e vdeos. Conhecer o editor de texto: Notepad e suas caractersticas.

Vdeo: HTML BsicoSoftware Notepad ++ 10

3. Cascading Style Sheets (CSS)

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.

Software Notepad ++ 10

4. Tipos de imagens

Conhecer os tipos de imagens. Conhecer o software CorelDRAW e suas ferramentas bsicas.

Vdeo: Criando imagens com CorelDRAWSoftware CorelDRAW

10

5. Software de edio de imagem (GIMP)

Conhecer o software GIMP e suas ferramentas.

Vdeo: Ferramenta Contgua Vdeo: Fuso de imagens Software GIMP

10

6. Flash Conhecer o software Flash e suas ferramentas de animao.

Vdeo: Tutorial: Flash timeline Vdeo: Tutorial: Interpolao no FlashSoftware Adobe Flash CS3

10

Projeto instrucional

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

e-Tec BrasilAula 1 Interface web 15

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.

640x840 pixels pouco utilizada. Em julho de 2010, foi usada por ape-nas 2,35% dos usurios mundiais.

Navegadores (browsers) utilizados: existe uma variedade de navegado-res disponveis para os usurios web; por isso importante sabermos que

Conhea as resolues indicadas para monitores LCD e

Laptops, conforme o tamanho do monitor. Acesse: http://

windows.microsoft.com/pt-BR/windows7/Getting-the-best-

display-on-your-monitor

Fundamentos do Desenvolvimento Webe-Tec Brasil 16

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 pginaO espao da pgina definido como a forma e como os olhos do usurio a

percorrem. Existem estudos que descrevem que a maior parte dos usurios

de cultura ocidental v a pgina no sentindo diagonal, a partir do alto

esquerda, em direo parte inferior direita, e depois retorna ao alto, como

mostrado na Figura 1.1 a seguir.

Figura 1.1: Viso do usurio na pginaFonte: 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.

Acesse o site http://www.inf.puc-rio.br/~inf1403/docs/alberto2011_1/09_AvHeuristica.pdf e conhea as 10 Heursticas de Nielsen.


Priority 1 Priority 2 Priority 3 Figura 1.2: Viso do usurio na pginaFonte: 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 NavegaoSegundo 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 UsabilidadeExiste uma forte evidncia de que a preocupao com usabilidade no projeto de interfaces diminui drasticamente os custos e aumenta a produti-

vidade - Brad Myers.

O termo usabilidade surgiu na dcada de 1980, em substituio expresso

user-friendly, que, em portugus, significa amigvel, e era usada princi-palmente por profissionais da rea de ergonomia e psicologia.

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.

UsabilidadeSegundo a ISO 9841/11, 1998, usabilidade a capacidade de um produto ser usado por usurios especficos para atingir objetivos especficos com eficcia, eficincia e satisfao em um contexto especfico de uso.


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 AcessibilidadeInmeras so as razes para tornar a web acessvel; entre elas, pode-se citar as vantagens competitivas, ao atingir no mercado eletrnico, milhes de

pessoas com e sem necessidades especiais; benefcios de usabilidade aos

outros usurios da web, tornando mais fcil e agradvel o acesso s 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.

Acesse http://acessodigital.net/art_fred_o_que_e_usabilidade.html e faa a leitura desse artigo, e contribua com sua reflexo sobre o assunto no frum da disciplina no AVEA.


Figura 1.3: Portador de necessidades especiais e idoso utilizando notebooksFonte: 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 LegibilidadeSegundo Marmion (2006) o campo de percepo visual reduz-se metade

a uma distncia de 2.5 graus do ponto de fixao do olho, quando fazemos

uma leitura. Observe que, conforme a Figura 1.4 se o ponto de fixao fosse o

nmero 0, eis o bloco de informao que nosso crebro conseguiria processar:

LegibilidadeLegibilidade a facilidade com que um leitor consegue discernir a fonte numa pgina, e baseia-se na relao da forma com o fundo e na capacidade de distinguir as letras entre si. Para que possam ser lidas, as letras tero que ser bem identificadas.


Figura 1.4: LegibilidadeFonte: 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: ColunasFonte: 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 FonteA escolha da fonte a ser utilizada no projeto de um site influencia diretamente o seu resultado final. Existem basicamente dois tipos de fontes: as com serifa e as sem serifa.

As fontes serifadas geralmente se perdem na resoluo dos monitores,

tornando-se inadequada a sua utilizao. Seu contraste mximo para

compensar problemas de resoluo e para que no haja confuso de

legibilidade. O texto sem serifa no perde resoluo e tem mais potencial

de velocidade de leitura. A tipografia escolhida para o corpo do texto

Verdana, por se tratar de uma tipografia comumente utilizada, largamente

distribuda e de leitura rpida e simples. A variao dos tamanhos, de acordo

com a finalidade do texto, tambm auxilia na hierarquizao da informao.

Todas as escolhas so baseadas no conhecimento e questionamento ao

pblico-alvo, tambm pertencente ao grupo de pesquisa. Veja a diferena

entre fontes com serifa e sem serifa nas Figuras 1.6 e 1.7 a seguir.

AaBbCcFigura 1.6: Tipo com serifaFonte: http://pt.wikipedia.org/w/index.php?title=Serifa&oldid=2734811

AaBbCcFigura 1.7: Tipo sem serifaFonte: http://pt.wikipedia.org/w/index.php?title=Serifa&oldid=2734811

Segundo Faria, Ferreira e Lemos (2010) para assegurar uma boa usabilidade

a um website, um texto legvel um dos fatores de grande importncia, pois devemos sempre considerar o pblico-alvo.

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.

SerifasSo os pequenos traos e prolongamentos que ocorrem no fim das hastes das letras.

Para a maioria do pblico-alvo, o tamanho ideal de fonte transita entre 10 e 12 pts (NIELSEN apud GUIMARES, 2007).


1.7.2 Cores1.7.2.1 Modos de corExistem 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-

priadamente, segundo as muitas teorias que procuram explicar o fenmeno

da viso cromtica.

As cores se dividem em trs grupos:

1. Cores Primrias: so as cores que no podem ser formadas por nenhuma mistura. Segundo Tavares (2007), so elas: Vermelho, verde, azul, no

sistema RGB; e no sistema CMYK, so elas: azul, magenta e amarelo.

2. Cores Secundrias: so formadas por duas cores primrias misturadas em partes iguais (PEDROSA, 1982 apud SCHUHMACHER, 2007).

3. Cores Tercirias: so as intermedirias entre uma cor secundria e qualquer das duas primrias que lhe do origem (PEDROSA, 1982 apud

SCHUHMACHER, 2007).

Para a leitura eficiente de um texto, principalmente, um website, em que essa leitura

ocorrer na tela do monitor, devemos procurar sempre uma

combinao harmoniosa das cores, procurando contrastar a

cor da fonte e do fundo.


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 coresFonte: 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 complementaresFonte: 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

a sensao de uniformidade, profundidade, movimento, luz e sombra.

Podemos considerar anlogas trs cores que se apresentam em sequncia

no crculo das cores como o amarelo, amarelo-laranja e laranja, como

observamos na Figura 1.10 a seguir.

Figura 1.10: Cores anlogasFonte: 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.

ResumoNesta Aula, voc pde ver pontos importantes que devem ser considera-

dos ao desenvolver o layout para um website. Para que a navegao em um website seja eficiente, precisamos responder aos usurios trs perguntas fundamentais da navegao: Onde estou? Onde estive? Onde posso ir?

Em uma pgina principal de website podemos destacar as seguintes carac-tersticas: identificar a localizao do usurio, oferecer suporte aos usurios,

atualizao permanente, marcar a localizao do usurio em relao s ou-

tras pginas e guiar seus percursos, ter mais rea para navegao do que

para contedo e informar os assuntos de maneira concisa e direta.

Nas pginas internas: apresentar em destaque o nome da pgina principal,

mostrar em local bem visvel a marcada empresa ou organizao, manter

Conhea a utilizao de cor no mecanismo de interao

com o usurio, disponvel em http://www.ibrau.com.br/artigoutilizacaodecor.htm

Ao escolher um padro de cores para um site devemos sempre

observar alguns aspectos: Assunto da pgina, Pblico-alvo

e Ambiente.

Vamos experimentar um aplicativo que gere esquemas e combinaes de cores. Cada

esquema se baseia em uma cor usada como base, que

combinada e complementada por cores adicionais calculadas

por meio de algoritmos que permitem a melhor combinao

tica. Esta ferramenta, Color Scheme, est disponvel em http://wellstyled.com/tools/

Vamos aprender sobre as cores de forma ldica e

divertida? Acesse o site Color in Motionno endereo http://

www.mariaclaudiacortes.com/. O site uma experincia

interativa sobre a comunicao e o simbolismo da cor.


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


e-Tec Brasil

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/

e-Tec BrasilAula 2 Fundamentos do HTML 35

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.

Mltiplas visualizaes: voc pode editar vrios documentos ao mesmo tempo.

Chaves, colchetes e parnteses com destaque: quando o cursor se aproxi-ma de um desses smbolos { } [ ] ( ), o smbolo que est prximo ao cursor e o smbolo simetricamente oposto so destacados, assim como sua guia de inden-

tao, se houver, fazendo com que a localizao de um bloco seja mais fcil.

Voc conheceu o editor de texto que utilizaremos nos exerccios e

no andamento desta disciplina; caso no o tenha instalado em seu computador, entre no site:

http://notepad-plus.sourceforge.net/br/site.htm,

o download gratuito. Porm, caso tenha preferncia por outro

editor de texto, ele poder ser utilizado.


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:

, ,,

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)


... : abre e encerra uma pgina. Essas tags so as mais im-portantes, pois informam ao browser que o documento est escrito em html.

: a tag vem abaixo da tag , 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.

: espao para definio do ttulo do documento. A tag deve estar sempre contida na tag .

: essa tag contm o corpo da pgina. A tag deve ser inserida aps a tag ; j a tag vem antes da tag .

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 e ?

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 MarcadoresSo comandos da linguagem HTML que permitem a formatao do texto.

Um marcador deve ser apresentado entre os sinais . A maioria dos

marcadores funciona como chave de liga e desliga. Isso quer dizer que um

marcador utilizado para indicar o incio da formatao e outro para infor-

mar o fim dela; no caso do fechamento, inserido /, antes do nome do

marcador (ALVES, 2009).

2.3.1 BodySo os marcadores existentes entre as tags ....

2.3.2 Bgcolor backgrounding colorAplica 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

Fonte: CEAD/Ifes (2010)

Agora observe o exemplo 2 e o resultado da utilizao do atributo bgcolor

est mostrado na Figura 2.4 a seguir.

Exemplo 2:

Veja o link que fala de alguns tipos de websites http://daniellesimoes.com/Tipos%20de%20Web%20Sites.pps


Resultado:

Figura 2.4: Fundo da pgina em verdeFonte: CEAD/Ifes (2010)

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

a tabela do Excel, por exemplo, mas uma importante ferramenta para

definir onde as informaes, imagens, etc. sero organizadas. O contedo

de cada clula poder ter textos, imagens e at mesmo outras tabelas. As

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

ClulaLinhasClula que pode conter outra tabela

Figura 2.5: Exemplo de tabela em HTMLFonte: Adaptado de Oliviero (2000)

Segundo Ferreira (2009), tabela substantivo feminino; significa

pequena tbua ou quadro em que se registram nomes de

pessoas ou coisas.


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 tabelasFonte: CEAD/Ifes (2010)

Crie uma tabela com trs colunas e quatro linhas no arquivo em que voc

vem executando seu site.

2.4.1 Atributos da tabelaExistem 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 ... define o alinha-mento dentro da clula. Caso queira definir o alinhamento de toda a tabela,

necessrio inserir os valores entre as tags ....

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 ..., ser definido o alinhamento dentro da clula. Para definir o

alinhamento de toda a tabela, necessrio inserir os valores entre as tags ....

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 botesFonte: http://office.microsoft.com/pt-br/images/results.aspx?qu=bot%C3%A3o#ai:MC900432679|

2.6 Atributos ALT e ALIGNAtributos 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 vdeosPara inserir vdeo ou som, utilizado o marcador .

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 pginaFonte: CEAD/Ifes (2010)

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:

Figura 2.9: Exemplo de insero de vdeo na pginaFonte: CEAD/Ifes (2010)

No arquivo desenvolvido at aqui, acrescente uma imagem correspondente

ao tema escolhido para desenvolver seu site.

2.7 Atributos width e heightEsses 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:

interessante que o arquivo da imagem esteja no mesmo diretrio que o documento HTML; caso no esteja, necessrio passar o caminho completo.


Resultado:

Figura 2.10: Exemplo de alterao das dimenses da imagemFonte: CEAD/Ifes (2010)

2.8 Atributo background o atributo usado em HTML para inserir imagens de segundo plano; se esse

atributo estiver inserido na tag , a imagem de segundo plano ser inse-rida na clula. Quando o atributo for inserido na tag , a imagem ser inserida na tabela e, quando estiver contido na tag , 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]

Exemplo 7:

Resultado:

Figura 2.11: Exemplo de segundo planoFonte: CEAD/Ifes (2010)

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


Responda s questes:

Qual a definio da tag ?

Qual o atributo utilizado para definir espaamento entre as clulas de uma

tabela?

Qual a definio do atributo width=n da tag ?

Utilizando o arquivo desenvolvido, crie um texto e aplique os quatro tipos de

alinhamento (align=right, left, center, justify).

2.9 Formatao de textosPara 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 : usada para definir qual o tipo de fonte o navegador ir usar. A tag abre e a 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 : tem por funo inserir a quebra de linha no ponto em que foi inserida. O navegador entende que, ao encontrar a tag , 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 textoFonte: CEAD/Ifes (2010)

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

Entre as tags de estilo, podemos citar:

...: o texto ser exibido em negrito;

...: o texto ser apresentado em itlico;

...: o texto ser exibido no modo sublinhado;

...: o texto ser exibido no modo tachado;

...: o texto ser exibido em tamanho maior do que o texto ao seu redor;

...: o texto ser exibido em tamanho menor do que o texto ao seu redor;

...: o texto ser exibido subscrito;

...: 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 textoFonte: CEAD/Ifes (2010)

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 .... texto do exerccio ?

2.10 Vnculos ou linksVnculos ou links so maneiras como podem ser criadas ligaes entre dois ou mais documentos HTML.

A tag responsvel pela criao vnculos denominada ..., sendo a tag de abertura e a de fechamento, veja na Figura 2.14 a seguir.


A HREF= vnculo>texto destaque

Texto a sermostradona pginaArquivo a ser

carregado

Tag de abertura

Tag de fechamento

1 2 3 4 5

Figura 2.14: Partes que compem um vnculoFonte: 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.


ResumoCom 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 , que so uma exceo a essa regra. Suas pginas sempre devero possuir um elemento

em conjunto com um elemento e um elemento .

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.

Atividades de aprendizagem1. Qual o principal atributo da tag ?

2. Quais atributos servem para definir largura e altura de uma imagem?


e-Tec Brasil

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 de estilos, possibilitando o controle de vrios documentos a partir de um, a

possibilidade de criar layouts especficos para determinadas mdias, teles e dispositivos mveis, entre outros.

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

Para o estudo e desenvolvimento das atividades deste captulo, continuaremos a usar o Notepad++; porm, os arquivos desenvolvidos sero salvos agora na extenso .css.

e-Tec BrasilAula 3 Cascading Style Sheets (CSS) 53

3.1 Criando estilosOs 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 ) 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 inlineMtodo 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 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 inlineFonte: CEAD/Ifes (2010)

3.2.2 Mtodo internoEste mtodo tambm aplicado utilizando a tag 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 internoFonte: CEAD/Ifes (2010)

3.2.3 Mtodo externoNesse 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 diretrioFonte: CEAD/Ifes (2010)


Para aplicar os estilos em uma nova pgina HTML, basta inserir uma tag 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.

Exemplo 12:

Figura 3.4: Exemplo de insero da tag style mtodo externoFonte: CEAD/Ifes (2010)

Figura 3.5: Exemplo de insero da tag style mtodo internoFonte: CEAD/Ifes (2010)

Observe na Figura 3.6 o exemplo de um menu com aplicao da CSS.

No Anexo Atalhos e atributos do CSS , voc tem acesso a um quadro com vrios atributos CSS e a descrio do que cada um formata.


Resultado:

Figura 3.6: Exemplo de menu com aplicao do CSSFonte: CEAD/Ifes (2010)

3.3 Pseudoclasses e pseudoelementosPodem 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 quero esclarecer algumas confuses sobre ns.

mesmo? Que tipo de confuso?

Muitas pessoas pensam que minhas tags dizem ao browser como exibir o contedo. Isso no verdade! Eu trabalho com a estrutura e no com a apresentao

Ah! . Eu no gostaria de ver as pessoas te dando crdito pelo meu trabalho

Bem, voc pode ver como as pessoas podem ficar confu-sas; afinal possvel utilizar HTML, sem CSS e ainda obter uma pgina com visual decente.

Decente soa um pouco exagerado, voc no acha? Quero dizer, a maneira como a maioria dos browsers exi-be o HTML puro parece um pouco ordinria. As pessoas precisam aprender o poder do CSS e como ns podemos facilmente dar um timo estilo s pginas Web.

Ei, eu tambm sou muito poderoso. Ter seu contedo estruturado muito mais importante do que ter algo bonitinho. O estilo muito superficial; a estrutura do contedo que interessa.

Fala srio! Sem mim as pginas Web seriam muito chatas. E no apenas isso, tire a capacidade de adicionar estilo s suas pginas e ningum as levar a srio. Tudo parecer malfeito e nada profissional.

Nossa, que ego, heim? Acho que eu no poderia esperar outra coisa de voc. Voc est apenas tentando fazer uma declarao da moda com todo o estilo sobre o qual est falando.

Declarao da moda? Um bom design e uma boa apresentao podem ter um efeito enorme na legibilidade e usabilidade das pginas. E voc deveria estar contente porque minhas regras de estilo flexveis permitem que os designers faam qualquer tipo de coisas interessantes com seus elementos sem bagunar sua estrutura.

Certo. Na verdade, somos linguagens totalmente diferen-tes, o que bom, porque eu no gostaria de ter nenhum dos seus designers de estilo bagunando meus elementos de estrutura.

No se preocupe, vivemos em universos separados.

E isso obvio para mim, todas s vezes que olho para CSS, essa linguagem aliengena.

T! HTML pode ser considerada uma linguagem? Algum j viu algo mais desajeitado do que aquelas tags?

Milhes de escritores Web discordariam de voc. Eu tenho uma linguagem boa e limpa que se encaixa perfei-tamente ao contedo.

D s uma olhada no CSS; so elegantes e simples, e no sinais de menor e maior patticos.

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 . Boa sorte! Ao tentar escapar delas.

Fonte: FREEMAN; FREEMAN, 2008, p. 28


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

Atividades de aprendizagemVoc se lembra do site que fez na Aula anterior? Agora, crie uma Folha de Estilo (um arquivo CSS) pra esse site, e linke todas as pginas. No se esquea de definir estilos para os cabealhos, os pargrafos, as tabelas, etc.

Use todas as propriedades que voc viu at agora. O outro ponto que vai

ser avaliado aqui a legibilidade; lembre-se do uso adequado das cores e

fontes. Ao trmino, lembre-se de salvar sua atividade.


e-Tec Brasil

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

Os pontos so distribudos em x pixels de altura, y pixels de largura e z pixels de profundidade.

Y

Pixel

Z

X

Figura 4.1: Pixels de uma imagem bitmapFonte: CEAD/Ifes (2010)

Pixek o menor elemento de uma imagem.

e-Tec BrasilAula 4 Tipos de imagens 61

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

3224 bit (true color), canal alfa, 16.777.216 de

cores232

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 imagemFonte: CEAD/Ifes (2010)


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 vetoriaisImagens 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 vetorialFonte: 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 imagens4.3.1 GIF CompuServe Graphics

Interchange FormatFormato 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 .GIFFonte: 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 imagem

Caractersticas Vantagens Desvantagens Observaes

GIF Graphics Inter-change Format

N de cores: at 256 cores (8 bits). Compresso: Sim. Perda de informao: No. Transparncia: Sim.

Tem compresso, sem perda de informao. Indicado para esquemas, gr-ficos de barras, etc.

S permite um arma-zenamento mximo de 256 cores. No indicado para fotografias nem imagens fotorrealistas (muitas cores).

Com compresso LZW.

BMP Bitmap

N mximo de cores: at 16 milhes de cores (24 bits). Compresso: No tem. Perda de informao: No aplicvel. Transparncia: No.

No tem perda de informao.

Por no ter compres-so, os ficheiros so muito grandes. Caso a imagem tenha 16 milhes de cores, cada pixel ocupa sempre 24 bits (3 bytes).

Sem compresso.

Continua


JPG (ou JPEG) Joint Photographic Experts Group

N de cores: Sempre 16 milhes de cores (mes-mo que a imagem tenha menos cor) (24 bits). Compresso: Sim. Perda de informao: Sim Transparncia: No.

Armazena sempre informao referen-te a 16 milhes de cores. Algoritmo de compresso muito eficaz. Indicado para fotografias e ima-gens fotorrealistas.

Como o algoritmo de compresso, tem perda de informa-o. Cada vez que fazemos guardar o ficheiro, volta a perder informao. No indi-cado para esquemas e grficos de barras (por exemplo) porque o algoritmo no est oti-mizado para transies abruptas de cor.

Muito pequeno. Ide-al para colocar em pginas de internet e enviar por e-mail.

Concluso

Fonte: Adaptada de Oliviero (2001)

O Quadro 4.3 foi extrado do livro Use a cabea! HTML com CSS e XHTML (FREEMAN; FREEMAN, 2008), e mostra, por meio de uma conversa entre o

JPG e o GIF, suas principais diferenas e qualidades.

Quadro 4.3: JPG e GIF comparam suas imagens

JPG G IF

Ol, GIF. No foi voc que eu vi agora mesmo em uma pgina web?

Ah! Assim que voc se tornar bom em representar imagens complexas, como fotos, tenho certeza de que as pessoas ficaro felizes em escolher voc, mas voc ainda no sabe como representar nada que precise de mais de insignificantes 256 cores.

Voc quer falar comigo sobre qualidade? Eu deixo meus usurios utilizarem exatamente a qualidade que eles desejam.

Isso verdade, mas a maior parte das pessoas est mais do que satisfeitas com isso. Nem todo mundo precisa de imagens de altssima resoluo em suas pginas. Comigo, os usurios normalmente podem escolher uma configurao de qualidade baixa ou mdia se estiverem satisfeitos com a qualidade das imagens. E, se utilizassem voc, teriam arquivos imensos para a mesma imagem.

Ah, claro, GIF funciona muito bem nesses casos, mas apenas se houver um pequeno nmero de cores. Voc apenas uma verso minha menos equipada. Eu posso fazer tudo o que voc faz.

O que? GIF? Estamos no meio de um programa aqui. Aonde voc foi?

... No seria timo se as pessoas ficassem somente com o GIF? Ento, eu no precisaria encontrar voc com tanta frequncia. Ei, representar fotos fcil, se voc quer perder qualidade. Mas eu sou todo qualidade. Se eu no puder representar totalmente uma, no farei isso. D uma olhada em alguns dos logos que voc tentou representar ... Eca!

T, mas a que custo? Encare a verdade: para fazer com que uma foto fique de um tamanho razovel para ser transmitida pela web, voc precisa perder um pouco de qualidade na imagem.

Certo, certo, mas voc j olhou para as linhas, logos, peque-nos textos, cores slidas? Eles no ficam to bem em JPG.

(GIF literalmente desaparece).

(GIF reaparece).

No precisa entrar em pnico. Estou apenas mostrando algo a voc. Se JPG to genial, como que voc no consegue tornar partes de suas imagens transparentes como eu? Com a transparncia, o que est atrs da imagem pode ser visto. Se meus usurios quiserem um logo em uma pgina web, e a pgina tiver um fundo colorido, eles me utilizaro, pois sabem que eu deixarei o fundo aparecer atravs de partes do logo que no possuem cor.

Claro, e ento algum altera a cor da pgina web. Sem chance. A transparncia o caminho e, para us-lo, voc precisa de mim.

Continua


Eu acho que voc supervaloriza essa coisa de trans-parncia digo, voc precisa apenas colocar aquela cor de fundo na imagem.

Bem, no estou muito preocupado com isso; no h muitas fotos sem fundo.

E quando isso aconteceria?Ah, t. Fique com seus logos e imagens de texto simples, e eu ficarei com as fotos e as imagens complexas. Todo mundo sabe que eu sou melhor para lidar com a complexidade.

Ah, ? E que tal se voc quiser recortar a foto de algum, ou mesmo de uma rvore, e coloc-la em uma pgina web sem um fundo?

Voc ficaria surpreso com a quantidade de vezes em que sou usado para representar fotos, s porque meus usurios desejam um fundo transparente.

Ei, algum est me pedindo para fazer uma transparncia ... Tenho que correr.

Concluso

Fonte: FREEMAN; FREEMAN, 2008, p. 29

Quais os padres de imagens mais utilizados na web e por qu?

4.4 CorelDRAW um programa de desenho vetorial bidimensional para design grfico, 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

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.

Saiba mais sobre o CorelDRAW em: www.corel.com.


Figura 4.5: Tela de abertura do CorelDRAW X3Fonte: 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 X3Fonte: CorelDRAW X3


Figura 4.7: Tela do ambiente de trabalho com imagem j criadaFonte: CEAD/Ifes (2010)

Figura 4.8: Janela de aplicativos do CorelDRAW X3Fonte: CorelDRAW X3


Quadro 4.4: Descrio dos aplicativos do CorelDRAW

Parte Descrio

Caixa de ferramentasUma barra flutuante com ferramentas para criao, preenchimento e modificao de objetos no desenho.

Barra de ttulo A rea que exibe o ttulo do desenho aberto no momento.

Barra de menus A rea que contm opes de menu pull-down.

Barra de ferramentas Uma barra de encaixe que contm atalhos para menus e outros comandos.

Janela de desenhoA rea fora da pgina de desenho circundada por barras de rolagem e controle dos aplicativos.

Barra de propriedadesUma barra de encaixe com comandos relacionados ferramenta ou ao objeto ativo. Por exemplo, quando a ferramenta texto est ativa, a barra de propriedades de texto exibe comandos que criam e editam texto.

Janela de encaixesUma janela que contm os comandos disponveis e as configuraes relevantes para uma ferramenta ou tarefa especfica.

RguasBordas horizontais e verticais que so utilizadas para determinar o tamanho e a posio dos objetos em um desenho.

Navegador de docu-mentos

A rea na parte inferior esquerda da janela do aplicativo, que contm controles para a movimentao entre as pginas e a adio de pginas.

Pgina de desenhoA rea retangular dentro da janela de desenho. Trata-se da parte da rea de trabalho que pode ser impressa.

Barra de statusUma rea na parte inferior da janela do aplicativo que contm informaes sobre proprie-dades do objeto, como tipo, tamanho, cor, preenchimento e resoluo. A barra de status tambm mostra a posio atual do mouse.

NavegadorUm boto no canto inferior direito que abre uma pequena exibio para ajud-lo a se mover em um desenho.

Paleta de cores Uma barra de encaixe que contm amostras de cores.

Fonte: Adaptado do Guia do usurio da sute de aplicativos grficos CorelDRAW

4.4.1 Caixa de ferramentasDo 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 desdobrveisVoc 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.

Editar forma

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

Cortar

Cortar: permite mover reas indesejadas dos objetos.Faca: permite cortar objetos.Borracha: permite apagar reas do desenho.Excluir segmento virtual: permite excluir as partes de objetos entre inseres.

ZoomZoom: altera nvel de ampliao na janela de desenho.Mo: controla que parte do desenho fica visvel na janela do desenho.

Curva

Mo livre: permite desenhar segmentos de linhas nicos e curvas.Bzier: permite desenhar curvas, um segmento de cada vez.Mdia artstica: fornece acesso s ferramentas pincel, espalhador, caligrfico e presso.Caneta: permite desenhar linhas curvas no modo de visualizao.Curva de 3 pontos: permite desenhar curvas e definir os pontos iniciais, final e central.Conexo: une dois objetos por uma linha.Dimenso: desenha linhas de dimenses verticais, horizontais, inclinadas ou em ngulo.

Ferramentas inteligentesPreenchimento inteligente: permite criar objetos, a partir de reas contornadas para, ento, aplicar um preenchimento.Desenho inteligente: converte pinceladas mo livre, em formas bsicas e curvas suaves.

RetnguloRetngulo: permite criar quadrados e retngulos;Retngulo com 3 pontos: permite desenhar retngulos em ngulo.

ElipseElipse: permite desenhar elipses e crculos.Elipse com 3 pontos: permite deenhar elipses em ngulo.

Objeto

Polgono: permite criar estrelas e polgonos simtricos.Estrela: permite criar estrelas perfeitas.Estrela complexa: estrelas complexas que apresentam lados com insero.Papel grfico: simula um papel quadriculado.Espiral: permite desenhar espirais simtricas e logartmicas.

Formas perfeitas

Formas bsicas: traz vrias formas bsicas que podem ser usadas em nossos trabalhos.Formas de seta: setas de diversas formas, direo e nmero de pontas.Formas de fluxograma: permite desenhar smbolos de fluxograma.Formas de banner: modelos de objetos de fita e formas de exploses.Formas de legenda: permite desenhar legendas e etiquetas.

Texto: Permite a digitao de palavras como texto artstico ou de pargrafo.

Tabela Permite desenhar e editar tabelas.

Documents

Rede ETec - Fundamentos de Desenvolvimento Web