You are on page 1of 64

e-Tec

Brasil

rede

Fundamentos de Web Design e Formatao de Imagem


Carlos Fbio Rocha Marinho

Curso Tcnico em Manuteno e Suporte em Informtica

Viso geral do painel Ferramentas


A A Ferramentas de seleo
Mover Letreiro retangular (M) Letreiro elptico (M) Letreiro de coluna nica Letreiro de linha nica Lao (L) Lao poligonal (L) Lao magntico (L) Seleo rpida (W) Varinha mgica (W)

E Ferramentas de pintura
Pincel (B) Lpis (B) Substituio de cor (B) Pincel Misturador (B) Pincel do Histrico (Y) Pincel HIstria da Arte (Y) Gradiente (G) Lata de tinta (G)

A B C

F Ferramentas Desenho e Tipo


Caneta (P) Caneta de forma livre (P) Adicionar Ponto de Ancoragem Converter Ponto Texto horizontal (T) Texto vertical (T) Mscara de texto horizontal (T) Mscara de texto vertical (T) Seleo de demarcador (A) Seleo direta (A) Retngulo (U) Retngulo arredondado (U) Elipse (U) Polgono (U) Linha (U) Forma personalizada (U)

E D
C

B Ferramentas Corte e Fatia


Corte demarcado (C) Fatia (C) Seleo de Fatia (C)

C Ferramentas de medio
Conta-gotas (I) Classicador de cores (I) Rgua (I) Observao (I) Contagem (I)

D Ferramentas de retoque
Pincel de recuperao para manchas (J) Pincel de recuperao (J) Correo (J) Olhos vermelhos (J) Carimbo (S) Carimbo de padro (S) Borracha (E) Borracha de plano de fundo (E) Borracha mgica (E) Desfoque Nitidez Borrar Subexposio (O) Superexposio (O) Esponja (O)

G Ferramentas de navegao

e 3D
Girar objeto 3D (K) Rolar objeto 3D (K) Deslocar objeto 3D (K) Deslizar objeto 3D (K) Escalar objeto 3D (K) Girar cmera 3D (N) Rolar cmera 3D (N) Deslocar cmera 3D (N) Mover cmera 3D (N) Aplicar zoom na cmera 3D (N) Mo (H) Girar visualizao (R) Zoom (Z) Somente Extended

Indica a ferramenta padro

*Os atalhos do teclado aparecem entre parnteses

e-Tec
Brasil

rede

Fundamentos de Web Design e Formatao de Imagem


Carlos Fbio Rocha Marinho

Manaus - AM 2012

Presidncia da Repblica Federativa do Brasil Ministrio da Educao Secretaria de Educao a Distncia

Centro de Educao Tecnolgica do Amazonas Este Caderno foi elaborado em parceria entre o Centro de Educao Tecnolgica do Amazonas e a Universidade Federal de Santa Catarina para a Rede e-Tec Brasil.
Equipe de Elaborao Centro de Educao Tecnolgica do Amazonas CETAM Coordenao Institucional Adriana Lisboa Rosa/CETAM Laura Vicua Velasquez/CETAM Coordenao do Curso Helder Cmara Viana/CETAM Professor-autor Carlos Fbio Rocha Marinho/CETAM Comisso de Acompanhamento e Validao Universidade Federal de Santa Catarina UFSC Coordenao Institucional Araci Hack Catapan/UFSC Coordenao do Projeto Silvia Modesto Nassar/UFSC Coordenao de Design Instrucional Beatriz Helena Dal Molin/UNIOESTE e UFSC

Coordenao de Design Grfico Andr Rodrigues/UFSC Design Instrucional Juliana Leonardi/UFSC Web Master Rafaela Lunardi Comarella/UFSC Web Design Beatriz Wilges/UFSC Mnica Nassar Machuca/UFSC Diagramao Brbara Zardo/UFSC Juliana Tonietto/UFSC Marlia C. Hermoso/UFSC Nathalia Takeuchi/UFSC Reviso Jlio Csar Ramos/UFSC Projeto Grfico e-Tec/MEC

Catalogao na fonte elaborada pela DECTI da Biblioteca Central da Universidade Federal de Santa Catarina
M338f Marinho, Carlos Fbio Rocha Fundamentos de Web Design e formatao de imagem / Carlos Fbio Rocha Marinho. Manaus : CETAM, 2012. 62 p. : il. tabs. Inclui bibliografia ISBN: 978-85-63576-38-5 1.Sites da Web Projetos. 2. Computao grfica. 3. Animao por computador. I. Ttulo. CDU: 681.31:62(084) 681.31.066.1

Apresentao e-Tec Brasil


Prezado estudante, Bem-vindo ao e-Tec Brasil! Voc faz parte de uma rede nacional pblica de ensino, a Escola Tcnica Aberta do Brasil, instituda pelo Decreto n 6.301, de 12 de dezembro 2007, com o objetivo de democratizar o acesso ao ensino tcnico pblico, na modalidade a distncia. O programa resultado de uma parceria entre o Ministrio da Educao, por meio das Secretarias de Educao a Distancia (SEED) e de Educao Profissional e Tecnolgica (SETEC), as universidades e escolas tcnicas estaduais e federais. A educao a distncia no nosso pas, de dimenses continentais e grande diversidade regional e cultural, longe de distanciar, aproxima as pessoas ao garantir acesso educao de qualidade, e promover o fortalecimento da formao de jovens moradores de regies distantes, geograficamente ou economicamente, dos grandes centros. O e-Tec Brasil leva os cursos tcnicos a locais distantes das instituies de ensino e para a periferia das grandes cidades, incentivando os jovens a concluir o ensino mdio. Os cursos so ofertados pelas instituies pblicas de ensino e o atendimento ao estudante realizado em escolas-polo integrantes das redes pblicas municipais e estaduais. O Ministrio da Educao, as instituies pblicas de ensino tcnico, seus servidores tcnicos e professores acreditam que uma educao profissional qualificada integradora do ensino mdio e educao tcnica, capaz de promover o cidado com capacidades para produzir, mas tambm com autonomia diante das diferentes dimenses da realidade: cultural, social, familiar, esportiva, poltica e tica. Ns acreditamos em voc! Desejamos sucesso na sua formao profissional! Ministrio da Educao Janeiro de 2010
Nosso contato etecbrasil@mec.gov.br

e-Tec Brasil

Indicao de cones
Os cones so elementos grficos utilizados para ampliar as formas de linguagem e facilitar a organizao e a leitura hipertextual. Ateno: indica pontos de maior relevncia no texto.

Saiba mais: oferece novas informaes que enriquecem o assunto ou curiosidades e notcias recentes relacionadas ao tema estudado. Glossrio: indica a definio de um termo, palavra ou expresso utilizada no texto. Mdias integradas: sempre que se desejar que os estudantes desenvolvam atividades empregando diferentes mdias: vdeos, filmes, jornais, ambiente AVEA e outras. Atividades de aprendizagem: apresenta atividades em diferentes nveis de aprendizagem para que o estudante possa realiz-las e conferir o seu domnio do tema estudado.

e-Tec Brasil

Sumrio
Palavra do professor-autor Apresentao da disciplina Projeto instrucional Aula 1 Internet e web design 1.1 A internet 1.2 O que e para que serve um website 1.3 Servio de web design 1.4 Orientaes para fazer um site 1.5 Briefing para desenvolvimento de websites 1.6 O que arquitetura de informao em websites? 1.7 Diviso e alocao de contedo Aula 2 Edio e publicao de sites 2.1 Um esqueleto chamado HTML 2.2 Entendendo o que CSS 2.3 Editores de HTML 2.4 Gerando uma pequena pgina HTML 2.5 Publicar uma pgina na web 2.6 Protocolo de FTP 2.7 Cliente de FTP Aula 3 A imagem 3.1 Fotografia digital 3.2 Gerao da imagem digital 3.3 Tipos de compactao 9 11 13 15 15 16 18 19 21 24 24 27 27 28 32 34 35 36 37 41 41 41 46

e-Tec Brasil

Aula 4 Edio e tratamento de imagens 4.1 Editor de imagens 4.2 Como instalar o Adobe Photoshop 4.3 rea de trabalho do Photoshop 4.4 Caixa de ferramentas 4.5 Ferramentas de seleo 4.6 Ferramentas medidas, comentrios e transformao 4.7 Ferramentas de pintura 4.8 Ferramentas de texto e desenho 4.9 Ferramentas de correes e retoques 4.10 Trabalhando com camadas 4.11 Estilos efeitos de camada 4.12 Filtros Referncias Currculo do professor-autor

49 49 50 53 55 56 56 57 57 58 58 59 59 60 62

e-Tec Brasil

Palavra do professor-autor
Caro aluno! O objetivo deste caderno apresentar conceitos bsicos e auxili-lo da melhor maneira a compreender: o que web design, para que servem, quais so os recursos necessrios e algumas tcnicas para confeccionar websites. Aprender propriedades, caractersticas e recursos de manipulao de imagens digitais para publicao na web. Por meio deste estudo, voc poder absorver e aumentar seu conhecimento atravs de pesquisas, leitura, prticas e discusses. No desenvolvimento desta disciplina, sero propostas vrias atividades relacionadas ao contedo de cada aula estudada. Busque participar ativamente e sempre envie suas dvidas ao tutor. As atividades sero realizadas tanto neste caderno impresso como no Ambiente Virtual de Ensino-aprendizagem (AVEA). Essas atividades sero de grande importncia na construo dos conceitos que sero apresentados para que voc possa ser capaz de constru-los juntando a teoria com a prtica. Minha participao ser de orient-lo, apoi-lo e acompanh-lo em seu processo de aprendizagem, orientando-o em suas necessidades e dvidas. Bom estudo e muito sucesso! Professor Carlos Fbio Rocha Marinho

e-Tec Brasil

Apresentao da disciplina
O advento da internet trouxe-nos a realidade de novas profisses, nunca antes imaginadas. O web design uma das reas que mais tem se desenvolvido atualmente entre as reas profissionais da web, pois atravs dela que so construdas as pginas que divertem, ensinam, informam, denunciam, vendem, enfim, compem e promovem a dinmica da internet. Dominar os conceitos apresentados neste curso oferecer ao aluno possibilidades de manipular recursos que lhe permitiro utilizar a internet como meio de comunicao e ampliar sua capacidade tcnica, dentro se sua rea de atuao. O conhecimento sobre imagens permitir ao aluno entender as possibilidades do que se pode realizar, com base em conceitos que usurios comuns no possuem, capacitando-o manipulao adequada dessas imagens para fins especficos de utilizao para web. Portanto, esta disciplina tem como objetivo principal introduzir o aluno aos conceitos bsicos de web design e formatao de imagens estudando algumas das suas principais funcionalidades.

11

e-Tec Brasil

Projeto instrucional
Disciplina: Fundamentos de Web Design e Formatao de Imagens (carga horria: 60 h). Ementa: Breve histrico sobre a origem da internet, apresentar e definir tipos de websites, conhecer o mtodo de entrevista para definio de contedo e tipo de website. Arquitetura da informao para alocao de contedo e otimizao da navegao. Apresentao do cdigo HTML, conhecimento do ambiente de um editor HTML, entender a formatao com CSS, apresentar o processo de publicao de uma pgina web. Conhecer processo de transferncia de arquivos e apresentar o ambiente de um cliente de FTP. Conceitos sobre imagem e fotografia digital, resoluo, profundidade de bits, tipos de imagem e modos de compactao de arquivos. Instalao e apresentao do ambiente de um editor de imagens, ferramentas de seleo, medidas, comentrios, transformao, pintura, texto, desenho, correo e retoques. Apresentar o recurso de camadas e de efeitos de camadas. Apresentao dos filtros predefinidos para alterao imediata de imagens.
OBJETIVOS DE APRENDIZAGEM
CARGA HORRIA (horas)

AULA

MATERIAIS
Hiperdocumento apresentando uma breve histria da internet e o protocolo TCP/IP.

1.Internet e web design.

Aprender conceitos bsicos sobre internet website e web design. Aprender os elementos que compem um projeto de web design.

Vdeo apresentando a profisso web design e a arquitetura da informao. Apresentao de hiperligaes para outros sites na internet sobre o tema.

10

2. Edio e publicao de sites.

Conhecer conceitos bsicos sobre as linguagens de marcao e formatao de pginas web. Aprender o processo de publicao de pginas web.

Hiperdocumento apresentando as linguagens HTML e CSS; Vdeos apresentando editores HTML, tutoriais de instalao e conceitos sobre domnio hospedagem e acesso via FTP. 20

13

e-Tec Brasil

AULA

OBJETIVOS DE APRENDIZAGEM
Aprender conceitos sobre imagem digital e suas caractersticas.

MATERIAIS

CARGA HORRIA (horas)

3.A imagem. Conhecer os formatos existentes de armazenamento de imagens digitais.

Vdeos apresentando conceitos sobre fotografia digital.

10

4. Edio e tratamento de imagens.

Compreender as principais funcionalidades e opes de edio e tratamento de imagens de um aplicativo de edio de imagens.

Hiperdocumento apresentando o painel de ferramentas de um editor de imagens. Vdeos apresentando as ferramentas seleo e retoque e os recursos de camadas e filtros de um editor de imagens. 20

e-Tec Brasil

14

Fundamentos de Web Design e Formatao de Imagem

Aula 1 Internet e web design


Objetivos
Aprender conceitos bsicos sobre internet website e web design. Aprender os elementos que compem um projeto de web design.

1.1 A internet
Segundo a Wikipdia (HISTRIA..., 2011), a internet um conglomerado de redes em escala mundial de milhes de computadores interligados pelo TCP/IP que permite o acesso a informaes e todo tipo de transferncia de dados. Ela carrega uma ampla variedade de recursos e servios, incluindo os documentos interligados por meio de hiperligaes da World Wide Web, e a infraestrutura para suportar correio eletrnico e servios como comunicao instantnea e compartilhamento de arquivos.

1.1.1 Breve histria da internet


A internet surgiu a partir de pesquisas militares nos perodos ureos da Guerra Fria. Na dcada de 1960, quando dois blocos ideolgicos e politicamente antagnicos exerciam enorme controle e influncia no mundo, qualquer mecanismo, qualquer inovao, qualquer ferramenta nova poderia contribuir nessa disputa liderada pela Unio Sovitica e pelos Estados Unidos. Nesse cenrio, o governo dos Estados Unidos temia um ataque russo s bases militares. Um sistema tcnico denominado Protocolo de Internet (Internet Protocol) permitia que o trfego de informaes fosse encaminhado de uma rede para outra. Todas as redes conectadas pelo endereo IP na internet comunicamse para que todas possam trocar mensagens. Atravs da National Science Foundation, o governo norte-americano investiu na criao de backbones (que significa espinha dorsal, em portugus), que so poderosos computadores conectados por linhas que tm a capacidade de dar vazo a grandes fluxos de dados, como canais de fibra ptica, elos de satlite e elos de transmisso por rdio. Alm desses backbones, existem os criados por empresas particulares. A elas so conectadas redes menores, de forma mais

Aula 1 Internet e web design

15

e-Tec Brasil

ou menos anrquica. basicamente isto que consiste a internet, que no tem um dono especfico, ou seja, de domnio pblico. Em 1992 Cientista Tim Berners-Lee, do CERN, criou o termo World Wide Web para definir a rede mundial de computadores.
Aprenda um pouco mais sobre a histria da internet. Acesse o vdeo didtico disponvel no endereo: http://www.youtube. com/watch?v=yyY_392Tn7Q O protocolo TCP/IP o responsvel pela troca de informaes entre os computadores que se interligam atravs da internet. Para entender o funcionamento desse sistema de comunicao, acesse o endereo: http://www. clubedohardware.com.br/ artigos/1351

1.1.2 A internet no Brasil


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

1.2 O que e para que serve um website


Voc conhece como site, mas ele tem outros nomes: stio, website e site eletrnico. um conjunto formado por vrias pginas da web ou hipertextos, que so reunidos em um endereo da web chamado de domnio e que acessado pelo protocolo HTTP (Hypertext Transfer Protocol) que permite a utilizao de links para ligar-se a outras pginas existentes e relacionadas ao mesmo assunto ou que contenham definio ou esclarecimento necessrio para entendimento do assunto de origem. O conjunto de todos os sites existentes compe a World Wide Web. Uma pgina da internet ou webpage acessada atravs de uma URL (localizador universal). No pode haver outro igual porque assim teremos dois contedos com o mesmo endereo na web. como se fosse um mesmo nmero de telefone sendo de propriedade de duas pessoas diferentes. Segundo Wikipdia (HISTRIA..., 2011) quando a World Wide Web foi criada, ela recebeu esse nome de seu criador Tim Berners-Lee. Ele comparou a sua criao com uma teia, web, em ingls. Cada n dessa teia um local (virtual) onde h hipertextos. Como a palavra inglesa para local site (tambm derivada do latim situs: lugar, local), quando as pessoas queriam se referir a um local da teia, elas falavam, website. Assim um novo nome surgiu para designar esse novo conceito de n onde h um conjunto de hipertextos: website. Batizada dessa forma, a web e seus websites tornaram-se mundialmente famosos e seus nomes empregados em diversas lnguas. Em ingls foi necessrio usar o qualificativo web antes de site, para diferenciar de outros usos que a palavra site tem nessa lngua, em que significa local. Mas quando o

e-Tec Brasil

16

Fundamentos de Web Design e Formatao de Imagem

contexto deixava claro que se estava falando da web, dizia-se apenas: site. J na lngua portuguesa, esse qualificativo no necessrio em momento algum, pois a palavra site um anglicismo novo em nosso vocabulrio e tem o nico e mesmo significado de website, embora a grafia induza a erro, pois pronuncia-se: saite. Os sites da internet, em geral, podem ter os seguintes propsitos: a) Institucional muitas empresas usam seus sites como ponto de contato entre uma instituio e seus clientes, fornecedores, etc. No caso de instituies comerciais, usam-se sites tambm para comrcio eletrnico, recrutamento de funcionrios etc. Instituies sem fins lucrativos tambm usam seus sites para divulgar seus trabalhos, informar a respeito de eventos etc. H tambm o caso dos sites mantidos por profissionais liberais, para publicarem seus trabalhos. b) Informaes veculos de comunicao como jornais, revistas e agncias de notcias utilizam a internet para veicular notcias, por meio de seus sites. Jornalistas freelancer e indivduos comuns tambm publicam informaes na internet, por meio de blogs e podcasts. c) Aplicaes existem sites cujo contedo consiste de ferramentas de automatizao, produtividade e compartilhamento, substituindo aplicaes de desktop. Podem ser processadores de texto, planilhas eletrnicas, editores de imagem, softwares de correio eletrnico, agendas, etc. d) Armazenagem de informaes alguns sites funcionam como bancos de dados, que catalogam registros e permitem efetuar buscas, podendo incluir udio, vdeo, imagens, softwares, mercadorias, ou mesmo outros sites. Alguns exemplos so os sites de busca, os catlogos na internet e os Wikis, que aceitam tanto leitura quanto escrita. e) Comunitrio so os sites que servem para a comunicao de usurios com outros usurios da rede. Nesta categoria se encontram os chats, fruns e sites de relacionamento. f) Portais so chamados de portais os sites que congregam contedos de diversos tipos entre os demais tipos, geralmente fornecidos por uma mesma empresa. Recebem esse nome por congregarem a grande maioria dos servios da internet num mesmo local.

Aula 1 Internet e web design

17

e-Tec Brasil

1.2.1 Tipos de website


Os sites podem ser classificados em estticos, dinmicos ou mistos, conforme sua estrutura. 1. Sites estticos so formados por pginas com contedos que sofrem pouca ou nenhuma alterao em um longo perodo de tempo: trs meses, seis meses, um ano ou at mais. So utilizados normalmente por empresas que querem apresentar seus produtos ou servios na web, mas no tm necessidade de alterao desses produtos ou servios, pois estes no sofrem mudanas periodicamente, ou seja, mantm-se estveis por muito tempo. 2. Sites dinmicos este tipo de site normalmente utiliza-se de uma linguagem de programao, alm do HTML puro, para inserir, alterar e excluir contedo das pginas que o compem, pois seu contedo sofre alteraes peridicas, variando de intensidade, de acordo com o objetivo para o qual foi criado. Exemplos: portais de notcias, comrcio eletrnico, vendas on-line, entre outros. 3. Sites mistos existem casos em que se necessita das duas modalidades de sites descritos anteriormente, pois parte do contedo no sofre alterao e outra sofre alteraes peridicas constantemente. Neste caso teremos um site misto, composto por uma parte esttica e outra parte dinmica.

1.3 Servio de web design


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

e-Tec Brasil

18

Fundamentos de Web Design e Formatao de Imagem

Se considerarmos que a internet um meio de comunicao, a coisa complica um pouco mais, porque teremos que considerar quem visitar, como essas pessoas sero atradas para visitar o site e qual o contedo ideal para exibio no site que est sendo desenvolvido. A captao de servio tambm outro assunto importante sobre o qual ainda no falamos. E para essa atividade seria necessrio que o desenvolvedor tivesse tambm um perfil para a rea de vendas, para entrevistar o cliente e traduzir essas informaes em um layout funcional, leve e agradvel. Administrar todas essas informaes e ainda desenvolver o site propriamente dito torna a atividade de desenvolvimento de website muito trabalhosa e multidisciplinar para ser realizada por uma pessoa somente. Atualmente existem muitas empresas atuando no ramo de web design, pois esta uma rea promissora e que, se bem aproveitada, gera resultados fabulosos. Para formar uma equipe de desenvolvimento de web design, precisaramos de profissionais para desenvolver as seguintes reas: 1. 2. 3. 4. 5. 6. 7. 8. 9. Publicidade Direo de arte Designer para criao Designer para animao e multimdia Redao e reviso Programao Marketing digital Atendimento Prospeco e vendas

Algumas empresas que no possuem todos esses profissionais em seu quadro funcional optam por contratar freelancers para suprir essa necessidade temporria, dependendo do tamanho e do valor de cada projeto de websdesign.

Freelance trabalho avulso realizado por profissional autnomo, geralmente para empresa jornalstica, agncia de publicidade, editora, entre outros; Freelancer o profissional que realiza freelance.

1.4 Orientaes para fazer um site


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

Aula 1 Internet e web design

19

e-Tec Brasil

a) Seja simples manter a simplicidade no significa ter um site feio, significa reduzir ao mximo a quantidade de informaes visuais desnecessrias, para que o site seja fcil de usar e prenda o interesse do visitante. b) Uma imagem vale mais do que mil palavras essa frase tambm verdadeira para a criao de um site. Sempre que possvel, use imagens, pois ningum quer investir muito tempo para ler textos interminveis. c) Evite informao em excesso pginas com muita informao prejudicam a visualizao, pois tendem a sobrecarregar e confundir o leitor. Isso tambm verdadeiro para imagens. Muitas imagens fazem os olhos dos visitantes perderem o foco. Faa sempre o teste de funcionalidade: olhe para a sua pgina e veja se consegue, de forma rpida, obter a informao que precisa. d) Em construo? Jamais! nunca coloque links no seu site que levem o visitante a pginas que ainda no foram feitas e que esto em construo. Nada pior do que frustrar o visitante vido por informaes. e) Mantenha o seu site atualizado modifique periodicamente o contedo do site, para que as pessoas voltem a visit-lo. Um site que no atualizado deixar de ser visitado por no ter o que apresentar de novo. f) Utilize um boletim de notcias crie uma lista na qual os visitantes possam subscrever e receber boletins de notcias do seu site. Nada melhor do que manter o contato com aqueles que tm interesse no seu produto ou servio. g) No utilize bonequinhos rebolando, bolinhas saltando, cones voando pela pgina nunca use esse tipo de recurso para decorar o seu site. Websites com esses efeitos passam uma imagem de amadorismo e o visitante no ter confiana em realizar operaes comerciais ou contratar servios. h) Evite Java e Flash no os utilize como elementos principais de um site. Se o site depender desses elementos no conseguir ser classificado, de forma adequada, nos motores de busca e isso poder levar o utilizador a desistir de entrar, pois so elementos que podem causar o bloqueio de computadores ou a lentido excessiva no carregamento da pgina.

e-Tec Brasil

20

Fundamentos de Web Design e Formatao de Imagem

i) Seu site deve carregar rpido pesquisas mostram que se um site no apresentar alguma informao para prender a ateno do visitante num perodo de 15 a 30 segundos, o visitante cancela o carregamento e vai para outro endereo. Por isso importante que o seu site carregue o mais rpido possvel. j) Facilite a comunicao lembre-se sempre de que a funo principal de todo o material que um designer cria, seja para a web ou no, comunicar. Para haver comunicao, trs coisas principais precisam ocorrer: 1) todas as letras precisam ser lidas e compreendidas; 2) os textos precisam ser claros e objetivos; 3) os desenhos (imagens, cones, ilustraes e grafismos) precisam ser vistos claramente e os seus propsitos percebidos. Se esse mnimo no for atingido, a comunicao falhou.

1.5 Briefing para desenvolvimento de websites


Segundo o Moreira (1996) em seu Dicionrio de Termos de Marketing, briefing um resumo de uma discusso; so os pontos a discutir. Geralmente, aquilo que o cliente transmite, como expresso do trabalho que necessita, ao contato ou, diretamente, a um grupo da agncia. 2. Passagem de informaes e de instrues de modo ordenado, fornecida para o correto desenvolvimento de uma entrevista. De maneira geral, o briefing um documento que o profissional de marketing transmite a quem vai realizar uma campanha publicitria promocional ou institucional, de relaes pblicas ou uma pesquisa de mercado. O briefing uma pea fundamental para a elaborao de uma proposta comercial. um elemento-chave para o planejamento e desenvolvimento do projeto de acordo com as necessidades do cliente. um conjunto de perguntas e respostas que servem para orientar como se dar o projeto, elaborao e execuo de determinado produto ou servio.

1.5.1 Como fazer um bom briefing?


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

Aula 1 Internet e web design

21

e-Tec Brasil

1.5.2 Tipos de briefing


Em algumas situaes pode ser difcil encontrar-se pessoalmente com o potencial comprador do website. Para solucionar essa questo, outros tipos de entrevista so utilizados: a) Briefings por e-mail esta abordagem seria a mais simples e tradicional quando o assunto web. Enviar as perguntas do briefing por e-mail e receber as respostas tambm por e-mail. Entretanto, a pessoa entrevistada pode ter necessidade de explicaes adicionais, principalmente se no tiver conhecimento sobre internet; nesse caso, a entrevista com encontro pessoal leva vantagem. b) Conversa por mensageiros instantneos usada pela maioria das pessoas que trabalham com web ou que acessam a rede mundial vrias horas por dia. Fazer um briefing com o cliente atravs de um programa de bate-papo on-line mais demorado, mas d um toque mais pessoal a todo o processo. c) Videoconferncia realizar uma videoconferncia bem prximo de se encontrar pessoalmente com o cliente. Para quem vai fazer um briefing com pessoas de outros estados ou pases, este deve ser o meio de escolha adequado; d) Sistema web de briefings para desenvolvedores web bastante simples montar um sistema on-line para realizao de briefing. Um exemplo seria definir um esquema de IDs para os clientes e programar um formulrio com as perguntas separadamente, para cada um; as respostas seriam armazenadas em um banco de dados e/ou num arquivo, como um XML, por exemplo. e) Combinao de diversas tcnicas dependendo do caso, pode ser eficiente misturar diversas dessas tcnicas de feitura de briefing. Por exemplo, pode-se enviar um e-mail com as perguntas e, em uma videoconferncia, fazer um acompanhamento com o cliente para auxili-lo a respond-las. Ou ainda elaborar um sistema on-line para a pessoa responder s perguntas do briefing e enviar as respostas para o seu e-mail. Recorra sua criatividade e certamente bons resultados sero encontrados.

e-Tec Brasil

22

Fundamentos de Web Design e Formatao de Imagem

1.5.3 Estratgias para fazer um briefing eficiente


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

b) Briefing complementar serve para detalhar tudo o que foi aprendido por voc sobre o negcio, produto ou empresa de seu cliente. As perguntas que formam essa segunda parte da entrevista lhe fornecero informaes mais completas e confiveis. importante deixar claro, desde o incio, que vocs precisaro de um tempo maior para esse segundo encontro; certamente a pessoa ficar satisfeita com sua sinceridade e feliz por poder fornecer mais informaes que, consequentemente, faro com que o resultado final do projeto seja melhor. As perguntas desse briefing podem ser divididas da seguinte maneira: estratgia; informaes gerais; pblico-alvo; contedo; aparncia (design); outras informaes.

Aula 1 Internet e web design

23

e-Tec Brasil

1.6 O que arquitetura de informao em websites?


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

1.6.1 Componentes da arquitetura da informao de um website


Rosenfeld e Morville (2002) dividem a arquitetura de informao de um website em quatro grandes sistemas, cada um composto por regras e aplicaes. Juntos eles renem todos os elementos de interao do usurio com a informao apresentada pelo website. So eles: a) Sistema de organizao (Organization system): mtodo de categorizar e organizar a informao, por exemplo: alfabtica, cronolgica ou por assunto. b) Sistema de rotulao (Labeling system): estabelece as formas de representao, de apresentao, da informao definindo rtulos para cada elemento informativo, por exemplo: empresa, quem somos, servios, produtos. c) Sistema de navegao (Navegation system): determina o modo de navegar ou mover-se no espao informacional, por exemplo: navegao global, navegao local. d) Sistema de busca (Search system): determina as perguntas que o usurio pode fazer e o conjunto de respostas que ir obter.

Assista ao vdeo sobre arquitetura da informao para web design, acessando o endereo: http://www.youtube. com/watch?v=5ha3B25LRXg Para entender sistema de navegao, acesse o endereo: http://www.timaster.com.br/ revista/artigos/main_artigo. asp?codigo=1229&pag=2

1.7 Diviso e alocao de contedo


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

e-Tec Brasil

24

Fundamentos de Web Design e Formatao de Imagem

b) O produtor de contedo deve com eficincia transmitir a mensagem em uma linguagem simples, porm respeitando todos os conceitos gramaticais. c) O processo de produo de contedo deve estar de acordo com a mdia web de comunicao a que se destina. Veja algumas caractersticas importantes no desenvolvimento do seu website, extradas da pgina Projetos de aplicaes web (2002): a) Objetividade Desenvolva resumos, em linguagem simples, para cada item na estrutura. Desenvolva textos completos para o assunto, quando necessrio. Textos mais extensos, que tratem de assuntos especficos, devem ser disponibilizados no formato PDF para que o usurio possa baixar e/ou ler em modo off-line. Aplique o recurso do hipertexto sem exageros nos links que possam comprometer o entendimento e acesso informao. b) Legibilidade (ler) Legibilidade deficiente: segundo pesquisa do Instituto Nielsen, ler na Web 25% mais difcil em comparao leitura no papel, por causa da resoluo da tela. Textos on-line so mais bem lidos com sentenas curtas e estrutura gramatical simples, satisfazendo rapidamente o visitante. Sugira atalhos que permitam a expedio exploratria, se assim o visitante desejar. Os links devem ter relacionamentos coerentes entre si, para no confundir o leitor. c) Visibilidade (ver) Dar visibilidade a informaes importantes no contexto da aplicao fundamental para estabelecer a comunicao. Cada elemento deve ser construdo respeitando as regras de simetria e ordem de importncia de leitura para uma melhor seleo visual. No d para mostrar tudo na pgina principal; por isso, essa pgina deve exibir aquilo que de maior relevncia e que no pode deixar de ser visto.
Website wireframe facilita muito a criao de layouts para pginas web. Entenda este recurso, acessando o endereo: http://pt.wikipedia.org/wiki/ Website_wireframe

Aula 1 Internet e web design

25

e-Tec Brasil

d) Navegabilidade (o que? onde?) Planejar fundamental para no criar verdadeiros becos sem sada. Evite que o acesso entre uma seo e outra passe pela pgina principal. Evite navegao que force o visitante a passar por vrias pginas at chegar informao desejada. Planejar a navegao de um site fundamental para que o visitante visualize com facilidade todo o contedo disponvel na aplicao web. O ideal o que o leitor no precise dar mais de trs cliques para obter a informao que deseja, segundo Bill Skeet, projetista norte-americano na rea de novas mdias.

Resumo
Nesta aula voc pde conhecer a origem da internet, conceitos de web design, dicas sobre construo de sites e tipos de site. Aprendeu tcnicas de coleta de informaes para determinar a funcionalidade do site, gerar contedo para aliment-lo e organizar a informao para ter um site com bom visual e boa leitura.

Atividade de aprendizagem
1. Responda o que se pede. Ao finalizar a atividade, poste no AVEA. a) Qual a importncia da internet atualmente como meio de comunicao na vida pessoal e profissional das pessoas? b) Baseado nos conhecimentos que adquiriu, escreva com suas prprias palavras qual a funo de um site na web? c) Qual a importncia de um briefing para o projeto de um site? d) Por que a arquitetura da informao importante na construo de sites? e) O que e para que serve um wireframe na construo de um website? Defina tambm navegao global e navegao local. 2. Faca uma pesquisa na internet e escreva sobre os protocolos HTTP e FTP. Elabore um texto com definies, caractersticas e funes desses protocolos. Ao finalizar a atividade, poste no AVEA.

e-Tec Brasil

26

Fundamentos de Web Design e Formatao de Imagem

Aula 2 Edio e publicao de sites


Objetivos
Conhecer conceitos bsicos sobre as linguagens de marcao e formatao de pginas web. Aprender o processo de publicao de pginas web.

2.1 Um esqueleto chamado HTML


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

Isso necessrio porque as etiquetas servem para definir a formatao de uma poro do documento, e assim marcamos onde comea e termina o texto com a formatao especificada por ela. Uma etiqueta formada por comandos, atributos e valores. Os atributos modificam os resultados padres dos comandos e os valores definem caractersticas dessa mudana. Exemplo:

Aula 2 Edio e publicao de sites

27

e-Tec Brasil

onde: HR = [comando] desenha uma barra horizontal color = [atributo] especifica que a barra ter uma cor red = [valor do atributo] define qual ser a cor atribuda barra, no caso vermelha. Cada etiqueta (TAG) um comando que pode receber atributos possveis e seus valores correspondentes. Um exemplo o atributo SIZE que pode ser usado com o comando FONT, com o HR, mas que no pode ser usado com o comando BODY. Isso quer dizer que devemos saber quais so os atributos e valores possveis para cada comando para poder utiliz-los corretamente. Uma propriedade importante dos documentos HTML a possibilidade de fazer hiperligaes. Para isso usa-se a etiqueta <a> (do ingls, anchor). Esta tem os atributos: href que define o alvo da hiperligao (que pode ser um endereo da web, um link para baixar um arquivo ou um endereo de e-mail para envio de mensagens) ou name (que exibe uma parte da mesma pgina que est sendo acessada), como mostram os exemplos a seguir:

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

A linguagem de marcao HTML um poderoso recurso de formatao, sendo muito simples e acessvel em sua utilizao, voltada para a produo e compartilhamento de documentos e imagens atravs da internet.

2.2 Entendendo o que CSS


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

e-Tec Brasil

28

Fundamentos de Web Design e Formatao de Imagem

2.2.1 Benefcios do uso de CSS?


CSS uma revoluo no mundo do web design. Os benefcios concretos do uso de CSS incluem: controle do layout de vrios documentos a partir de uma simples folha de estilos; maior preciso no controle do layout; aplicao de diferentes layouts para servir diferentes mdias (tela, impressora, etc.); emprego de variadas, sofisticadas e avanadas tcnicas de desenvolvimento.

2.2.2 A sintaxe bsica das CSS


Suponha que desejamos uma cor de fundo vermelha para a pgina web: usando HTML podemos fazer assim:

Com CSS o mesmo resultado ser obtido com este cdigo:

Como voc pode notar, os cdigos HTML e CSS so mais ou menos parecidos. O exemplo acima serve tambm para demonstrar o fundamento do modelo CSS. Um conjunto de regras CSS forma uma Folha de Estilos. Uma regra CSS, na sua forma mais elementar, compe-se de trs partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme o exemplo a seguir:

Para inserir o CSS a um documento HTML, temos trs maneiras distintas. O mtodo mais utilizado atualmente, pela praticidade e pela eficincia, o terceiro mtodo, ou seja o mtodo externo.

Aula 2 Edio e publicao de sites

29

e-Tec Brasil

a) Mtodo 1: In-line (o atributo style) Uma maneira de aplicar CSS pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente, a cor vermelha para o fundo da pgina pode ser aplicada conforme mostrado a seguir:

b) Mtodo 2: Interno (a tag <style>) Uma outra maneira de aplicar CSS pelo uso da tag <style> do HTML. Esta tag deve ser posicionada dentro do comando <head>, conforme mostrado abaixo:

c) Mtodo 3: Externo (link para uma folha de estilos) Neste mtodo, uma instruo no cdigo HTML chama um arquivo externo que contm todas as regras CSS de formatao. Este mtodo mais recomendado, porque permite separar o arquivo de formatao do arquivo HTML; desse modo, ele pode ser utilizado para vrias pginas ao mesmo tempo, facilitando a manuteno das pginas se for necessrio. Uma folha de estilos externa um simples arquivo de texto com a extenso .CSS. Ilustrando para melhor entender, vamos considerar que sua folha de estilos tenha sido nomeada como STYLES.CSS e est localizada no diretrio STYLE.

e-Tec Brasil

30

Fundamentos de Web Design e Formatao de Imagem

Figura 2.1: Arquivo externo CSS


Fonte: http://pt-br.html.net/tutorials/css/lesson2.php

Precisaremos apenas inserir uma instruo no arquivo externo para lig-lo ao arquivo da pgina que precisamos que seja formatada, com o seguinte cdigo HTML:

importante perceber que o caminho para a folha de estilos deve ser indicado corretamente no atributo HREF; caso contrrio, no ir funcionar. Essa inscrio deve ser inserida entre as tags <HEADER> </HEADER> do documento HTML, para que funcione, conforme mostrado a seguir:

A CSS uma linguagem que supre uma deficincia do HTML em trabalhar com elementos grficos, imagens, dimensionamento e posicionamento preciso. Acesse o endereo a seguir e conhea mais sobre CSS: http://www. youtube.com/watch?v=_ wDcu1ZuqL8&feature=related

Este link informa ao navegador para usar o arquivo CSS na renderizao e apresentao do layout do documento HTML. Tal como qualquer outro tipo de arquivo, voc pode colocar uma folha de estilos tanto no servidor como no disco rgido.

style.css

Mudanas na folha de estilos externa faro efeito em todos os documentos HTML.

Documentos HTML linkados folha de estilos.


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

Aula 2 Edio e publicao de sites

31

e-Tec Brasil

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

2.3 Editores de HTML


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

2.3.1 Note Pad ++


Notepad++ um editor de cdigos-fonte completo e que suporta as mais diversas linguagens de programao. uma tima alternativa ao bloco de notas porque possui recursos para facilitar o trabalho como: sistema de busca e substituio, interface funcional, navegao por abas, edio avanada e autocompletar para comandos que esto sendo escritos. O programa possui suporte s linguagens C, C++, Java, C#, XML, HTML, PHP, Javascript, ASCII art, doxygen, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, Perl, Python, Lua, TeX, TCL, Assembly, Ruby, Lisp, Scheme, Properties, Diff, Smalltalk, Postscript, VHDL, Ada, Caml, AutoIt, KiXtart, Matlab, Verilog, Haskell e InnoSetup.

O NotePad++ possui um recurso de sinalizao para incio e fim de TAG que facilita construo e alterao de cdigos HTML e CSS. Acesse o endereo a seguir e aprenda a instalar o NotePad++ : http://vimeo. com/27332335

Figura 2.3: rea de trabalho do editor de cdigos NotePad + + 2011


Fonte: Elaborada pelo autor

e-Tec Brasil

32

Fundamentos de Web Design e Formatao de Imagem

O Notepad++ tambm possibilita a personalizao pelo usurio, que pode definir suas prprias linguagens na opo User Language Define System e ainda adicionando muitos outros recursos, atravs de plugins especficos disponveis na internet.

2.3.2 Dreamweaver
O software Dreamweaver, da fabricante Macromedia, a ferramenta de desenho de pginas web mais conhecida e utilizada entre os desenvolvedores de pginas web. Esse sucesso se deu por sua extrema facilidade de manuseio e suas ferramentas de interao que facilitam diversas atividades do processo de criao. Mesmo que seja experiente, um desenvolvedor web sempre encontrar nesse programa razes para utiliz-lo, sobretudo no que se refere produtividade. O software cumpre perfeitamente o objetivo de desenhar pginas com aspecto profissional e suporta grande quantidade de tecnologias. Entre as funes aceitas para manipulao no programa, destaca-se a edio de diversos cdigos como: folhas de estilo e camadas (CSS); JavaScript para criar efeitos e interatividades; insero de arquivos multimdia; manipulao de cdigo PHP, XML, ASP e HTML. Por ser um programa com muitos recursos, pode no ser to simples seu manuseio para pessoas menos experientes no desenho de web, que no estejam acostumadas com a metodologia de trabalho do programa. O Dreamweaver evoluiu muito em sua verso MX 2004, que recebeu um ambiente de design baseado em CSS, um editor de cdigo e editor visual integrados, um editor de imagem baseado na tecnologia do Macromedia Fireworks e uma ferramenta FTP segura e muito prtica para transferncia de trabalhos concludos para publicao na web.

O Dreamweaver , atualmente, o programa mais usado em todo o mundo para fazer pginas para a internet. fcil perceber por que. Ele um programa WYSIWYG (what you see is what you get), com uma interface grfica intuitiva; por isso, ganha mais adeptos a cada dia. Acesse o endereo a seguir e assista ao vdeo sobre a interface do Dreamweaver: http://www.youtube.com/ watch?v=9I3nucN4Idc

Aula 2 Edio e publicao de sites

33

e-Tec Brasil

Figura 2.4: rea de trabalho do editor de cdigos Dreamweaver 2011


Fonte: Dreamweaver 2011

2.4 Gerando uma pequena pgina HTML


Com os conhecimentos adquiridos, j podemos, criar nossa primeira pgina web. Para isso, abra seu editor de textos de sua preferncia e digite o seguinte texto em um novo documento:

Agora salve este arquivo com extenso .html ou .htm em seu disco rgido. Para isso, acessamos no menu Arquivo e selecionamos a opo Salvar como. Na janela, escolhemos o diretrio onde desejamos salvar e nomearemos o arquivo, como por exemplo: minha_pgina.html. Com o documento HTML criado, podemos ver o resultado obtido atravs de um navegador. Chegado a esse ponto, conveniente, insistir no fato de que nem todos os navegadores so idnticos. Infelizmente, os resultados de nosso cdigo podem mudar de um para outro, sendo por isso aconselhvel visualizar a pgina em vrios navegadores. Geralmente usam-se o Internet Explorer, Mozila Firefox e o Chrome da Google como referncias, j que so os mais difundidos e utilizados atualmente.

e-Tec Brasil

34

Fundamentos de Web Design e Formatao de Imagem

2.5 Publicar uma pgina na web


Com o uso de editores de pginas web como o Macromedia Dreamweaver, voc pode criar pginas web como se estivesse construindo um documento em um editor de textos com o Microsoft Word; alis, existem algumas operaes no Dreamweaver que utilizam as mesmas teclas usadas no Word para realizar a mesma operao. Alm disso, as verses mais recentes do programa j aceitam a colagem de textos preservando a formatao do texto de origem. Uma pgina web composta por textos, imagens, que podem ser fotos ou grficos animados, e outros recursos multimdia, como msica, animaes em Flash ou Java, vdeos, entre outros. Aps ter soltado sua imaginao e criado sua pgina, voc precisar public-la na web. Publicar to somente transferir os arquivos da sua mquina para o da mquina da empresa que ir hospedar seu website. Antes precisamos aprender alguns conceitos sobre provedores, hospedagem e registro de domnios, para podermos entender melhor o processo de publicao na internet. a) Provedor de servios empresa previamente homologada e certificada atravs de um contrato firmado com o Registro.br, para que o registro e a manuteno dos domnios e entidades possam ser feitas atravs de uma interface especfica. Os provedores de servios podem ou no oferecer servios agregados ao registro de domnios. Os clientes s podem cadastrar novos domnios ou alterar os dados de domnios e entidades existentes atravs do seu provedor de servios, sendo que nesses casos o sistema do Registro.br somente permitir a visualizao dos dados de seus domnios e/ou entidades, caso sejam contatos destes. b) Provedor de hospedagem oferece servios de hospedagem de sites na internet e tambm pode oferecer aos seus clientes o registro de domnio agregado aos seus servios. Tal provedor no tem nenhum vnculo formalizado com o Registro.br, mas seus clientes podem interagir diretamente com esse sistema para atualizar dados dos seus domnios e entidades, desde que sejam contatos destes. c) Hospedagem hospedagem (host, em ingls) um servio oferecido por empresas conhecidas como provedores. Ser necessrio contratar esse servio para publicar a sua pgina. H planos de hospedagem pagos e gratuitos, mas o primeiro tipo geralmente oferece muito mais recursos que o segundo. Hosts grtis, alm de limitados em vrios aspectos, muitas vezes exibem banners ou barras com publicidade, que inclusive podem desalinhar o layout do site ou mesmo incomodar o visitante. Por isso, na maioria dos casos, o ideal contratar um servio de hospedagem pago.
Aula 2 Edio e publicao de sites

35

e-Tec Brasil

Assista a um vdeo para entender um pouco mais sobre domnio e hospedagem no endereo a seguir: http://www.youtube. com/watch?v=vkhWXz0I7pY

d) Domnio o nome que compe o endereo do site. Voc precisa registrar um domnio pelo perodo mnimo de um ano. Aps esse perodo, sua anuidade deve ser renovada; caso contrrio, o domnio ficar disponvel para outra pessoa ou empresa registrar. Tambm possvel contar com a opo de registrar ou renovar o domnio a cada dois anos ou mais. e) Registro de domnio para adquirir um domnio voc deve possuir um CNPJ (empresa) ou CPF (pessoa fsica) e efetuar a compra pelo site registro.br ou atravs do seu provedor. REGISTRO.BR, cujo rgo brasileiro responsvel por todos os domnios com terminao (.BR) a Fundao de Amparo Pesquisa do Estado de So Paulo,. Para domnios internacionais, voc no precisa de nenhum documento. Procure no site de busca de sua preferncia por registro de domnio ou informe-se com seus amigos sobre quais empresas de registro de domnios internacionais eles recomendam. INTERNIC o rgo americano responsvel pelos domnios internacionais (.COM, .NET, .ORG, .BIZ, etc.)

2.6 Protocolo de FTP


O FTP (File Transfer Protocol Protocolo de transferncia de arquivos) oferece um meio de transferncia e compartilhamento de arquivos remotos. Entre os seus servios, o mais comum o FTP annimo, pois permite o download de arquivos contidos em diretrios sem a necessidade de autenticao. Entretanto, o acesso annimo restrito a diretrios pblicos que foram especificados pelo administrador da rede. O protocolo FTP disponibiliza interatividade entre cliente e servidor, de forma que o cliente possa acessar informaes adicionais no servidor, no s ao prprio arquivo em questo. Como exemplo das facilidades, podemos citar a listagem de arquivos, na qual o cliente lista os arquivos existentes no diretrio, ou opes do tipo Help, em que o cliente tem acesso lista de comandos. Essa interatividade proveniente do padro NVT (Network Virtual Terminal) usado pelo protocolo TELNET. Contudo, o FTP no permite a negociao de opes, utilizando apenas as funes bsicas do NVT, ou seja, sua configurao padro. O protocolo FTP permite que o cliente especifique o tipo e o formato dos dados armazenados. Como exemplo, se o arquivo contm texto ou inteiros binrios e, no caso de texto, qual o cdigo utilizado (USASCII, EBCDIC, etc.). Como segurana mnima, o protocolo FTP implementa um processo de autenticao e outro de permisso. A autenticao verificada atravs de um cdigo de usurio e senha; j a permisso dada em nvel de diretrios e arquivos.
e-Tec Brasil

36

Fundamentos de Web Design e Formatao de Imagem

O servidor de FTP possibilita acessos simultneos para mltiplos clientes. O servidor aguarda as conexes TCP, e para cada conexo cria um processo cativo para trat-la. Diferentemente de muitos servidores, o processo cativo FTP no executa todo o processamento necessrio para cada conexo. A comunicao FTP utiliza uma conexo para o controle e outra (ou vrias) para transferncia de arquivos. A primeira conexo (chamada de conexo de controle FTP-control) utilizada para autenticao e comandos; j a segunda (chamada de conexo de dados FTP-data), utilizada para a transferncia de informaes e arquivos em questo.

Os sites so acessados usando o protocolo HTTP, com a ajuda dos navegadores. FTP, como o nome indica, usada para transferncia de arquivos de um computador para outro. um protocolo menos popular devido ao pequeno nmero de pessoas que o utilizam. Assista a um vdeo para entender um pouco mais sobre FTP no endereo a seguir: http://www.youtube. com/watch?v=hVPy-3NVFdQ

2.7 Cliente de FTP


um programa que realiza todas as operaes necessrias para transferncia de arquivos entre duas mquinas, utilizando a internet como meio de comunicao. No software voc encontrar um formulrio que permite o cadastramento dos dados de acesso ao endereo remoto, como: Usurio e Login. Sem esses dados, a conexo no ser estabelecida e no ser possvel transferir os arquivos. Veja na Figura 2.5 como ocorre a transferncia de dados pelo protocolo FTP.

1
Interpretador de Protocolo do Servidor Processo de Transferncia de Dados do Servidor Servidor FTP
Fonte: http://pt.kioskea.net/faq/1983-o-que-e-ftp

Interface com Usurio Usurio

2
Conexo de Controle

Interpretador de Protocolo do Usurio Processo de Transferncia de Dados do Usurio Cliente FTP

4
Sistema de Arquivos

3
Conexo de Dados

Um cliente de FTP muito conhecido e gratuito o FlieZila da Mozila. Assista a um vdeo para aprender a baixar, instalar e configurara esse software no endereo a seguir: http://www. weeby.com.br/2010/08/15/ saiba-como-baixar-instalar-ecomecar-a-usar-o-cliente-deftp-filezilla/

Sistema de Arquivos

Figura 2.5: Infogrfico da transferncia de dados atravs do protocolo FTP

O protocolo de FTP exige comandos para que as operaes de gravao, deleo, cpia e movimentao de arquivos sejam realizadas. Os programas ou clientes de FTP realizam automaticamente esses comandos a cada ao do usurio, tornando a tarefa mais rpida e segura.

Aula 2 Edio e publicao de sites

37

e-Tec Brasil

Resumo
Nesta aula voc aprendeu a linguagem de marcao HTML e sua evoluo para XHTML. Aprendeu o CSS, que uma linguagem complementar ao HTML e que oferece grandes possibilidades de manipulao e personalizao de pginas web. Aprendeu tambm os softwares que possibilitam a construo da pgina e sua publicao na internet.

Atividade de aprendizagem
1. Execute o aplicativo Bloco de Notas e, baseado nos conhecimentos adquiridos, monte uma pgina web escrevendo o cdigo abaixo. A imagem: sao_paulo.jpg, est disponvel para download no AVEA. Ao finalizar a atividade, poste no AVEA.

e-Tec Brasil

38

Fundamentos de Web Design e Formatao de Imagem

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

Arquivo CSS: style.css

Salve os dois arquivos no mesmo diretrio. Lembre-se de salvar os arquivos com a extenso apropriada (.css e .htm). Abra index.htm no seu navegador e veja uma pgina com o fundo vermelho. Parabns! Voc construiu sua primeira pgina de internet utilizando a tecnologia de folha de estilos (CSS). Ao finalizar a atividade, poste no AVEA.

Aula 2 Edio e publicao de sites

39

e-Tec Brasil

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

3.1 Fotografia digital


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

3.2 Gerao da imagem digital


Digitalmente, todas as cores so formadas a partir de trs cores bsicas: RGB, isto , R= Red (Vermelho), G= Green (Verde), B= Blue (Azul). A imagem que voc v na sua cmera digital capturada por ela junto com outras informaes do clique como o valor de balano de branco, contraste, saturao, ente outros, atravs de milhares de reas sensveis (pixels) do sensor CCD ou CMOS (chip de silcio). Cada pixel pode codificar a cor que recebe (R, G ou B) com at 16 mil nveis de intensidade, dependendo de quantos bits (unidades de informao eletrnica, os famosos 0 e 1) estejam disponveis para essa funo. Cmeras profissionais chegam at 12 ou 14 bits por pixel. Se cada pixel registra at 16 mil nveis de intensidade e a resoluo de sua cmera de, digamos, sete milhes de pixels, vai dar uma quantidade enorme de informao para cada foto, certo? Bem, a cmera aguenta e foi projetada para isso. Mas, e depois de clicar, onde vamos salvar tanta informao? Haja espao. a que entra a deciso de qual formato utilizar. As imagens possuem algumas caractersticas como:

Aula 3 A imagem

41

e-Tec Brasil

a) Resoluo pixel o elemento que forma a imagem digital, assim como a prata forma a imagem no filme. Tem um formato quadrado e so alinhados um ao lado do outro.

Figura 3.1: Detalhe para identificao dos pixels


Fonte: Elaborada pelo autor

A quantidade de pixels determina o tamanho da imagem digital. Podemos concluir que a unidade de medida da imagem digital em pixels e a unidade de medida da fotografia em cm ou polegadas. Por exemplo, uma imagem com 1200 x 1600 menor que a imagem com 2600 x 3500. A resoluo determina na cmera digital o tamanho da imagem em pixels, com objetivo de gerar o tamanho da foto no papel conforme a necessidade do usurio. Em uma cmera digital com resoluo mxima de 8MP, o sensor CCD (captura os pontos de luz e cor) tem oito milhes de pixels com trs canais de cores (RGB) cada. Quando reduzimos a resoluo, por exemplo, de 8MP para 5MP, estamos agrupando os pixels; logo, transformando o espao de 8MP para 5MP. Sendo assim, os pixels ficaram maiores e de menor quantidade, reduzindo o tamanho da foto final. b) Qualidade da imagem quando capturar suas fotos, voc dever usar a resoluo mais alta que sua cmera permitir. Por exemplo, se voc tem uma cmera de 5,1 megapixel, ento voc deve usar essa configurao para capturar suas imagens, pois quanto maior a resoluo, melhor a qualidade da imagem.

e-Tec Brasil

42

Fundamentos de Web Design e Formatao de Imagem

Pixels

Imagem

Resoluo Alta

Resoluo Baixa

Figura 3.2: Grade de pixels para alta e baixa resoluo


Fonte: http://wwwca.kodak.com/BR/pt/consumer/fotografia_digital_classica/para_uma_boa_foto/curso_fotografia/fotografia_digital/principais_conceitos/pixel_resolucao/pixel_resolucao.shtml?primeiro=1

c) Tamanho do arquivo O tamanho do arquivo ser proporcional quantidade de informaes que este contiver. Por isso, devemos lembrar que para uma maior qualidade teremos um arquivo com maior tamanho em bytes. Cada formato de imagem traz consigo caractersticas prprias de tratamento de informaes e compresso de dados.

0 0 1 2 3

0 1 2 3 2

1 2 3 2 1

2 3 2 1 0

3 2 1 0 0

0= 1= 2= 3=

Figura 3.3: Quantidade de informao determina o tamanho do arquivo


Fonte: http://pt.wikipedia.org/wiki/Profundidade_de_cor

d) Profundidade de bits a profundidade de bits o que determina quantas cores nicas esto disponveis na paleta de cores de uma imagem em termos de nmero de 0s e 1s, ou bits, que so utilizados para especificar cada cor. Isso no significa que uma imagem necessariamente utiliza todas essas cores, mas sim que pode especificar suas cores usando esse nvel de preciso. Para uma imagem em tons de cinza, a profundidade de bits indica quantas gradaes nicas de cinza esto disponveis. Imagens com profundidades de bit maiores podem representar mais tons ou cores j que h mais combinaes de 0s e 1s disponveis para represent-las. A maioria das imagens coloridas vm de cmeras digitais que tm 8-bits por canal e ento elas podem usar um total de oito 0s e 1s para representar suas cores. Isso d 256 valores de intensidade diferentes para cada cor primria.

Aula 3 A imagem

43

e-Tec Brasil

Quando todas as trs cores so combinadas, em cada pixel temos 2563 ou 16.777.216 de cores diferentes. Imagens com essa quantidade de cores normalmente so apelidadas de true color (uma traduo possvel seria cores reais). A isso chamamos 24 bits por pixel, j que cada pixel composto por trs canais de 8-bits (8*3=24). O nmero de cores disponveis para uma imagem de X-bits sempre 2X se X se refere a bits por pixel e 23*X se X se refere ao nmero de bits por canal.
Tabela 3.1 : Classificao de cores por profundidade de bits
Bits Por Pixel 1 2 4 8 16 24 32 Nmero de Cores Disponveis 2 4 16 256 65.536 16.777.216 4,3 bilhes Nome(s) Comum(ns) Monochrome CGA EGA VGA XGA, High Color SVGA, True Color

48 281 Trilhes Fonte: http://www.cambridgeincolour.com/pt-br/tutorials/bit-depth.htm

Figura 3.4: Imagem com profundidade de um bit de cor


Fonte: http://www.sxc.hu/browse.phtml?f=download&id=684424

Figura 3.5: Imagem com profundidade de quatro bits de cor


Fonte: http://www.sxc.hu/browse.phtml?f=download&id=684424

e-Tec Brasil

44

Fundamentos de Web Design e Formatao de Imagem

Figura 3.6: Imagem com profundidade de oito bits de cor


Fonte: http://www.sxc.hu/browse.phtml?f=download&id=684424

Figura 3.7: Imagem com profundidade de 16 bits de cor


Fonte: http://www.sxc.hu/browse.phtml?f=download&id=684424

e) Compresso uma tcnica que garante, mediante a aplicao de algoritmos matemticos, uma imagem similar original, mas cujo tamanho (em pixels) menor e, portanto ocupa menos espao. H dois tipos de compresso: com perda (lossy) e sem perda (lossless). Os algoritmos com perda aproveitam-se das limitaes da viso humana para suprimir informao que provavelmente no seria percebida de qualquer forma. Veja, na Figura 3.8, as trs verses do mesmo registro com diferentes graus de compresso:

Figura 3.8: Comparao de imagens usando compactaes com perda de qualidade


Fonte: Banco de imagens SXC

Aula 3 A imagem

45

e-Tec Brasil

Note que no primeiro registro os detalhes da foto so ainda perceptveis. No registro com maior compresso h um achatamento tal, que os detalhes se perderam. Retorne foto original acima e perceba que, no geral, voc no prestou ateno a esses detalhes, o que faz com que at 80% de compresso possa ser aceitvel na maioria dos casos. Os algoritmos sem-perda utilizam, geralmente, o algoritmo LZW (LempelZiv-Welch) para obter imagens onde no h perda de qualidade isto , no acontece o achatamento visualizado no exemplo. A qualidade da imagem bem superior, assim como o tamanho do arquivo resultante, se comparado com um arquivo gerado por um algoritmo com-perda.

3.3 Tipos de compactao


a) RLE (Run Length Encoding) Compactao sem perdas que suportada por alguns formatos comuns de arquivos do Windows. b) LZW (Lempel-Zif-Welch) Compactao sem perdas que suportada pelos formatos de arquivo de linguagem PostScript, PDF, GIF e TIFF. Mais prtica em imagens com reas grandes de uma nica cor. c) JPEG (Joint Photographic Experts Group) Compactao com perdas que suportada pelos formatos de arquivo de linguagem PostScript, PDF, TIFF e JPEG. Recomendada para imagens de tons contnuos, como fotografias. d) CCITT (International Telegraph and Telekeyed Consultive Committee.) Grupo de tcnicas de compactao sem perdas para imagens em preto e branco, que suportado pelos formatos de arquivo de linguagem PostScript e PDF. e) ZIP Compactao sem perdas que suportada pelos formatos de arquivo PDF e TIFF. Assim como o LZW, a compactao ZIP mais eficiente para imagens que apresentam reas extensas com uma nica cor.

e-Tec Brasil

46

Fundamentos de Web Design e Formatao de Imagem

Resumo
Nesta aula voc pde conhecer os conceitos de imagem digital, resoluo, profundidade, qualidade e compactao de arquivos. Esses conhecimentos lhe permitiro analisar a melhor soluo para captura e utilizao de imagens para web.

Atividade de aprendizagem
1. Pesquise na internet sobre o assunto Formatos de Arquivo Digital. Baseado nas informaes pesquisadas elabore um texto explicando qual o melhor formato para ser utilizado na internet. Ao finalizar a atividade, poste no AVEA.

Aula 3 A imagem

47

e-Tec Brasil

Aula 4 Edio e tratamento de imagens


Objetivos
Compreender as principais funcionalidades e opes de edio e tratamento de imagens de um aplicativo de edio de imagens.

4.1 Editor de imagens


Editores grficos ou editores de imagens so programas que tm como objetivo facilitar a alterao e criao de imagens digitais. Um editor de imagens tem a funo bsica de modificar caractersticas especficas de uma imagem como: nvel de branco ou de preto, equilbrio de cores e brilho, nitidez ou desfoque com o objetivo de melhorar a exibio da imagem ou at mesmo construir ilustraes digitais. Existem trs tipos de editores que atendem a necessidades variadas: a) Raster programas que geram pinturas digitais, ilustraes, editam ou retocam fotografias. Dentre os mais populares esto: GIMP, Adobe Photoshop, Corel PhotoPaint, PhotoScape, Pixia, Paint.NET, ArtRage; b) Vetoriais programas que criam ilustraes por meio de clculos matemticos (vetores) e que podem ser livremente modificados, tendo como base objetos e curvas; a estes podem ser aplicadas cores de contorno e preenchimento de acordo com o programa. Entre os mais populares esto: Inkscape, Corel Draw, Adobe Illustrator, Sodipodi, Macromedia Freehand; c) Tridimensionais programas que manipulam imagens em trs dimenses como slidos simples (cubos, esferas, cilindros, prismas, pirmides e outros) so usados em diversas reas tcnicas, bem como na criao de comerciais e efeitos especiais em filmes. Entre os mais populares esto: SketchUp, 3ds Max, Blender, Cinema 4D, Maya, Autodesk Softimage. Nesta aula compreenderemos as principais funes e opes de edio e tratamento de imagens do editor de imagem Adobe Photoshop.

Aula 4 Edio e tratamento de imagens

49

e-Tec Brasil

4.2 Como instalar o Adobe Photoshop


Passo 1 Baixe o aplicativo Photoshop CS2 verso de teste. Dentro da pasta dos arquivos do programa, procure pelo arquivo setup.exe e execute-o. Na tela inicial selecione a linguagem de sua preferncia (Portugus) e clique em Ok.

Figura 4.1: Tela de instalao do Passo 1


Fonte: Adobe Photoshop CS2, 2005

Passo 2 Na tela seguinte, leia atentamente o contrato de licena e, se estiver de acordo, clique em Aceitar.

Figura 4.2: Tela de instalao do Passo 2


Fonte: Adobe Photoshop CS2, 2005

e-Tec Brasil

50

Fundamentos de Web Design e Formatao de Imagem

Passo 3 Clique no boto Install Photoshop CS2.

Figura 4.3: Tela de instalao do Passo 3


Fonte: Adobe Photoshop CS2, 2005

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

Figura 4.4: Tela de instalao do Passo 4


Fonte: Adobe Photoshop CS2, 2005

Aula 4 Edio e tratamento de imagens

51

e-Tec Brasil

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

Figura 4.5: Tela de instalao do Passo 5


Fonte: Adobe Photoshop CS2, 2005

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

Figura 4.6: Tela de instalao do Passo 6


Fonte: Adobe Photoshop CS2, 2005

Passo 7 O assistente est pronto para instalar o programa. Clique em Install para iniciar a instalao do Adobe Photoshop CS2. Aguarde o trmino da instalao. Isso poder levar alguns minutos. Ao trmino da instalao, voc poder optar por ler ou no o arquivo readme (leia-me). Este arquivo contm informaes sobre o programa. Caso no deseje ler, desmarque a opo Show the readme file. Clique em Finish para encerrar o assistente de instalao.

e-Tec Brasil

52

Fundamentos de Web Design e Formatao de Imagem

Figura 4.7: Tela de instalao do Passo 7


Fonte: Adobe Photoshop CS2, 2005

Execute o Adobe Photoshop CS2 (o atalho est em programas, dentro do menu Iniciar). Na tela que segue, clique no boto Continue Trial. A tela de boas vindas ser exibida. Para que ela no aparea novamente, desmarque a opo Show this dialog at startup. Clique em Close para prosseguir. O Adobe Photoshop CS2 possui um aplicativo que verifica atualizaes automaticamente. Se voc deseja procurar por atualizaes, clique em Ok; do contrrio, clique em Cancel. Pronto, o Adobe Photoshop CS2 foi instalado!

4.3 rea de trabalho do Photoshop


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

F H

Figura 4.8: rea de trabalho do Adobe Photoshop


Fonte: Adobe Photoshop CS2, 2005

Aula 4 Edio e tratamento de imagens

53

e-Tec Brasil

A rea de trabalho do Photoshop composta dos seguintes elementos: a) janela do documento; b) encaixe de painis recolhidos em cones; c) barra de ttulo do painel; d) barra de menus; e) barra de opes; f) paleta Ferramentas; g) boto Recolher em cones; h) trs grupos de paletas (painis) em encaixe vertical. Note que as paletas so arrastveis e podem ser ativadas, esticadas e fechadas, da mesma forma que em outros programas do Windows. Alm disso, uma paleta pode ser arrastada e encaixada em outra janela para fazer conjunto com outras paletas, que podem ser acessadas atravs de abas.

e-Tec Brasil

54

Fundamentos de Web Design e Formatao de Imagem

4.4 Caixa de ferramentas


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

Viso geral do painel Ferramentas


A A Ferramentas de seleo
Mover Letreiro retangular (M) Letreiro elptico (M) Letreiro de coluna nica Letreiro de linha nica Lao (L) Lao poligonal (L) Lao magntico (L) Seleo rpida (W) Varinha mgica (W)

E Ferramentas de pintura
Pincel (B) Lpis (B) Substituio de cor (B) Pincel Misturador (B) Pincel do Histrico (Y) Pincel HIstria da Arte (Y) Gradiente (G) Lata de tinta (G)

A B C

F Ferramentas Desenho e Tipo


Caneta (P) Caneta de forma livre (P) Adicionar Ponto de Ancoragem Converter Ponto Texto horizontal (T) Texto vertical (T) Mscara de texto horizontal (T) Mscara de texto vertical (T) Seleo de demarcador (A) Seleo direta (A) Retngulo (U) Retngulo arredondado (U) Elipse (U) Polgono (U) Linha (U) Forma personalizada (U)

E D
C

B Ferramentas Corte e Fatia


Corte demarcado (C) Fatia (C) Seleo de Fatia (C)

C Ferramentas de medio
Conta-gotas (I) Classicador de cores (I) Rgua (I) Observao (I) Contagem (I)

D Ferramentas de retoque
Pincel de recuperao para manchas (J) Pincel de recuperao (J) Correo (J) Olhos vermelhos (J) Carimbo (S) Carimbo de padro (S) Borracha (E) Borracha de plano de fundo (E) Borracha mgica (E) Desfoque Nitidez Borrar Subexposio (O) Superexposio (O) Esponja (O)

G Ferramentas de navegao

e 3D
Girar objeto 3D (K) Rolar objeto 3D (K) Deslocar objeto 3D (K) Deslizar objeto 3D (K) Escalar objeto 3D (K) Girar cmera 3D (N) Rolar cmera 3D (N) Deslocar cmera 3D (N) Mover cmera 3D (N) Aplicar zoom na cmera 3D (N) Mo (H) Girar visualizao (R) Zoom (Z) Somente Extended

Indica a ferramenta padro

*Os atalhos do teclado aparecem entre parnteses

Figura 4.9: Painel de ferramentas do Adobe Photoshop


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

Aula 4 Edio e tratamento de imagens

55

e-Tec Brasil

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

4.5 Ferramentas de seleo


As ferramentas de seleo tm grande importncia para possibilitar as aes de algumas ferramentas no Photoshop. Assista a um vdeo para entender o funcionamento das ferramentas de seleo: http:// www.youtube.com/watch?v=bs DX6hml9L0&feature=related

So recursos para isolar determinadas reas da imagem para aplicao de comandos com o objetivo de corrigir imperfeies ou aplicao de um efeito na imagem.

Figura 4.10: Resumo de ferramentas de seleo


Fonte: http://pt.scribd.com/doc/42187200/Intro-Photoshop

4.6 Ferramentas medidas, comentrios e transformao


Recursos diversos para manipulao das imagens, oferecendo total autonomia para as alteraes desejadas.

Figura 4.11: Resumo de ferramentas de medidas e transformao


Fonte: http://pt.scribd.com/doc/42187200/Intro-Photoshop

e-Tec Brasil

56

Fundamentos de Web Design e Formatao de Imagem

4.7 Ferramentas de pintura


Recursos com resultados surpreendentes que auxiliam a criao de ilustraes digitais.

Figura 4.12: Resumo de ferramentas de pintura


Fonte: http://pt.scribd.com/doc/42187200/Intro-Photoshop

4.8 Ferramentas de texto e desenho


Recursos para insero de texto nas fotos e criao de elementos vetoriais dentro de uma fotografia ou imagem.

Figura 4.13: Resumo de ferramentas de texto e desenho


Fonte: http://pt.scribd.com/doc/42187200/Intro-Photoshop

Aula 4 Edio e tratamento de imagens

57

e-Tec Brasil

4.9 Ferramentas de correes e retoques


As ferramentas de correo e retoque so os recursos que podem tornar uma imagem totalmente diferente da original. Assista a um vdeo para entender o seu funcionamento: http://www.youtube. com/watch?v=YhqaNlzlAE&feature=related

So recursos que permitem realizar aes especiais em imagens, como cpia de texturas, duplicao de reas semelhantes, desfocagem, nitidez, saturao, entre outras.

Figura 4.14: Resumo de ferramentas de correo e retoque Parte 2


Fonte: http://pt.scribd.com/doc/42187200/Intro-Photoshop

4.10 Trabalhando com camadas


O recurso de camadas de grande utilidade e visa facilitar o manuseio de vrios elementos ou imagens sem que uma modificao afete outros elementos. O funcionamento das camadas pode ser compreendido com a analogia a seguir:
O recurso de camadas o que permite compor montagens digitais que, se feitas de maneira profissional, podem passar por imagens reais quando observadas por pessoas que no visualizaram a foto original. Assista a um vdeo para entender o seu funcionamento: http://www. youtube.com/watch?v=ED2EjtqgLE&feature=related

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

e-Tec Brasil

58

Fundamentos de Web Design e Formatao de Imagem

4.11 Estilos efeitos de camada


As camadas tm outra funo interessante, a aplicao de efeitos dinmicos que se adaptam s camadas de maneira individual e podem ser editados facilmente em tempo real atravs de uma caixa de dilogo. So efeitos como sombra, brilho, entalhe, borda, gradiente, texturas e contornos.
Um dos recursos mais interessantes do Photoshop o estilo de camadas. Com ele podemos aplicar vrios efeitos sobre a mesma camada para transformao de um objeto. Entenda melhor esse recurso acessando o tutorial no endereo a seguir: http://www. photoshoptotal.com.br/dica-dephotoshop/16/como_utilizar_ estilo_de_camadas O recurso de filtros permite realizar transformaes significativas em imagens, como por exemplo, fazer uma imagem real transformar-se em um desenho ou em um quadro pintado a leo. Para entender como aplicar esse efeito, acesso o tutorial disponvel em: http:// www.tutoriaisphotoshop. net/2007/06/efeito-cartoon.html

4.12 Filtros
So efeitos pr-configurados que podem ser aplicados diretamente nas imagens/camadas. Para conhecer o efeito de cada filtro, ser necessrio test-los um por um em uma imagem previamente carregada.

Resumo
Nesta aula, voc pde conhecer os recursos que um software de edio de imagem oferece para edio e tratamento de imagens. Aprendeu o conceito e a utilizao de algumas das ferramentas disponveis para edio, utilizando como referncia o software consagrado e mais utilizado atualmente, o Photoshop.

Atividade de aprendizagem
Acesse o endereo http://photoshopindesign.blogspot.com/2011/03/ efeito-de-texto-usando-estilos-de.html. Siga o passo a passo tutorial e salve o resultado em um arquivo com o nome arte_digital.psd. Ao finalizar a atividade, poste no AVEA.

Aula 4 Edio e tratamento de imagens

59

e-Tec Brasil

Referncias
DESENVOLVIMENTO PARA WEB. Briefing para desenvolvimento de web sites: consideraes, dicas e modelos. 2008. Disponvel em: <http://desenvolvimentoparaweb.com/miscelanea/briefing-para-desenvolvimento-deweb-sites-consideracoes-dicas-e-modelos>. Acesso em: 1 jun. 2011. FACULDADE DE CINCIAS DA UNIVERSIDADE DO PORTO. Manual de fotografia digital. 2008. Disponvel em: <http://camaraobscura.fot.br/arquivos/anualdefotografia.pdf>. Acesso em: 20 ago. 2011. HISTRIA DA INTERNET. In: WIKIPDIA, a enciclopdia livre. Flrida: Wikimedia Foundation, 2012. Disponvel em: <http://pt.wikipedia.org/w/index.php?title=Hist%C3%B3ria_da_ Internet&oldid=29821952>. Acesso em: 01 jun. 2011. HTML.NET. Minicurso sobre HTML. 2010. Disponvel em: <http://pt-br.html.net/ tutorials/html/introduction.php>. Acesso em: 2 jun. 2011. HTML.NET. MiniCurso sobre CSS. 2010. Disponvel em: <http://pt-br.html.net/ tutorials/css/introduction.php>. Acesso em: 2 jun.2011. HTML STAFF. Como funciona o protocolo FTP. 2006. Disponvel em: <http://www. htmlstaff.org/ver.php?id=985>. Acesso em: 17 ago. 2011. INFOWESTER. Publicando seu site: dicas iniciais sobre domnio e hospedagem. 2006. Disponvel em: <http://www.infowester.com/dominiohost.php>. Acesso em: 17 ago. 2011. INFO.ABRIL. Curso INFO de Photoshop CS3. 2008. Disponvel em: <http://info.abril. com.br/dicas/cursos/photoshopcs3/curso.html>. Acesso em: 20 ago. 2011. IDGNOW. Leitura em tablet mais lenta do que em livro impresso. 2010. Disponvel em: <http://idgnow.uol.com.br/mercado/2010/07/05/leitura-em-tablet-pode-ser-ate-10-7mais-lenta-que-em-livro-impresso/#&panel2-1>. Acesso em: 01 jun. 2011. KIOSKEA. O que FTP. 2009 Disponvel em: <http://pt.kioskea.net/faq/1983-o-que-eftp>. Acesso em: 17 ago. 2011.

e-Tec Brasil

60

Fundamentos de Web Design e Formatao de Imagem

MOREIRA, Jlio Csar Tavares. Dicionrio de termos de marketing. So Paulo: Atlas, 1996. PROJETOS DE APLICAES WEB. Contedo: objetividade, navegabilidade e visibilidade. Centro de Computao da Unicamp. 2002. Disponvel em: <http://www.ccuec.unicamp. br/treinamento_int2004/webpro/arquitetura_informacao/arquitetura_informacao_ conteudo_objetividade.html>. Acesso em: 26 abr. 2012. RICHARD, Saul Wurman. Ansiedade de Informao. So Paulo: Editora de Cultura, 1999. ROSENFELD, L. & MORVILLE, P. Information Architecture for the Word Wide Web. 3ed. Sebastopol: OReilly, 2002. SANTANA, Rafael. Sete itens bsicos de um bom briefing. 2011. Disponvel em: http://www.joomlaclube.com.br/site/materias/46-revista-da-comunidade/288-7-itensbasicos-de-um-bom-briefing.html. Acesso em: 1 jun.2011. SILVA, Maurcio Maujor Samy. Tutorial XHTML. 2011. Disponvel em: <http://maujor. com/tutorial/xhtml.php>. Acesso em: 2 jun. 2011. SITE. In: WIKIPDIA, a enciclopdia livre. Flrida: Wikimedia Foundation, 2012. Disponvel em: <http://pt.wikipedia.org/w/index.php?title=Site&oldid=29633517>. Acesso em: 1 jun. 2011. SITE. In WIKIPDIA. Histria da Internet. 2011. Disponvel em: <http://pt.wikipedia. org/wiki/Hist%C3%B3ria_da_Internet>. Acesso em: 1 jun. 2011. TI MASTER. Sistema de navegao na arquitetura de informao. 2011. Disponvel em: <http://idgnow.uol.com.br/galerias/historia_office/paginador/pagina_1>. Acesso em: 2 jun. 2011. WEBINSIDER. O que arquitetura de informao em websites. 2006. Disponvel em: <http://webinsider.uol.com.br/2006/04/15/o-que-e-arquitetura-de-informacao-em-websites> Acesso em: 26.jul.2011.

Referncias

61

e-Tec Brasil

Currculo do professor-autor
Carlos Fbio Rocha Marinho especialista em Design, Publicidade e Marketing pela Universidade Federal do Amazonas (UFAM) e graduado pela Universidade Luterana do Brasil (ULBRA) em Gesto em Implantao e Manuteno de Redes de Computadores. Atualmente realiza atendimento a empresas prestando consultoria em Programao Visual, Web design e Trade Marketing.

e-Tec Brasil

62

Fundamentos de Web Design e Formatao de Imagem

e-Tec
Brasil

rede

You might also like