2

AUXILIAR EM WEB DESIGN

Ayslan Trevizan Possebom Daniela Eloise Flr Fabiano Utiyama Luiz Fernando Braga Lopes

Verso 1 Ano 2012

Os textos que compem estes cursos, no podem ser reproduzidos sem autorizao dos editores Copyright by 2012 - Editora IFPR

IFPR - INSTITUTO FEDERAL DO PARAN Reitor Prof. Irineu Mario Colombo Chefe de Gabinete Joelson Juk Pr-Reitor de Ensino Ezequiel Westphal Pr-Reitor de Planejamento e Desenvolvimento Institucional Bruno Pereira Faraco Pr-Reitor de Administrao Gilmar Jos Ferreira dos Santos Pr-Reitor de Gesto de Pessoas e Assuntos Estudantis Neide Alves Pr-Reitor de Extenso, Pesquisa e Inovao Silvestre Labiak Junior Organizao Marcos Jos Barros Cristiane Ribeiro da Silva Projeto Grfico Leonardo Bettinelli Diagramao Alan Witikoski

Introduo
A profisso de auxiliar de webdesigner recente e surgiu com as possibilidades de negcio, entretenimento e educao trazidas pela rede mundial de computadores a Internet. Apesar disso, tm forte procura devido a grande demanda de servios e informaes disponveis na Web. A World Wide Web (www) ou somente Web um conjunto de sites (ou documentos) interligados com a ajuda de um padro de comunicao chamado protocolo TCP/IP. Graas a ele possvel que vrias tecnologias diferentes troquem informaes entre si. O contedo abordado neste material trata das tecnologias e ferramentas usadas para criar e navegar entre as informaes disponibilizadas na Internet. O termo navegar usado devido a um programa de computador conhecido como navegador (ou browser) que permite que esta interatividade seja possvel. Quase sempre, navegar na Internet inclui fazer solicitaes (ou requisies) a servidores que podem estar bem distantes. Servidores so computadores que atendem as solicitaes dos usurios, consequentemente o termo cliente usado para representar quem faz tais requisies. Este curso atm-se ao trabalho desenvolvido do lado do cliente, ou seja, as ferramentas e tecnologias necessrias construo e manuteno de sites, tratamento de imagem e criao de animaes. Este material no pretende esgotar o assunto que vastssimo, apenas apresentar alguns pontos que merecem destaque no exerccio da profisso.

SUMRIO
Unidade 1
1. 1.1 1.2 1.3 Objetivos......................................................................................................... 10 Organizao.......................................................................................................10 Sobre o material.................................................................................................10 Onde estou? O que aprendi?.............................................................................11

Unidade 2
2. 2.1 2.2 HTML.................................................................................................................12 Como posso escrever pginas em HTML?.......................................................12 Um pouco mais sobre Tags...............................................................................14

2.2.1 Tags de cabealho.............................................................................................14 2.2.2 Tags de corpo....................................................................................................15 2.2.3 Tags de pargrafo e quebra de linha.................................................................15 2.2.4 Tags de formatao...........................................................................................16 2.2.5 Tags de vinculao de documentos...................................................................17 2.2.6 Tag de Imagem..................................................................................................18 2.2.7 Tag de listas desordenadas...............................................................................19 2.2.8 Tag de listas ordenadas.....................................................................................19 2.2.9 Tag de tabelas....................................................................................................20 2.2.10 Tag de Formulrio.............................................................................................21 2.3 2.4 2.5 Atividades Comentadas.....................................................................................24 Exerccios de Reviso.......................................................................................26 Onde estou? O que aprendi?.............................................................................27

Unidade 3
3. 3.1 CSS...................................................................................................................29 Mtodos de vinculao......................................................................................30

3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9

Criando estilos para formatar textos..................................................................32 Formatando o background.................................................................................33 Formatando listas ordenadas e listas com marcadores....................................34 Modelo em Caixa...............................................................................................35 Criando classes de estilos e identificadores......................................................37 Modelando leiautes com colunas.......................................................................41 Atividades Comentadas......................................................................................43 Exerccios de Reviso........................................................................................43

3.10 Onde estou? O que aprendi?.............................................................................46

Unidade 4
4 4.1 4.2 4.3 Introduo a JavaScript..................................................................................48 Atividades Comentadas.....................................................................................52 Exerccios de Reviso........................................................................................53 Onde estou? O que aprendi?.............................................................................53

Unidade 5
5 5.1 Imagens..............................................................................................................55 Adobe Photoshop...............................................................................................55

5.1.1 Matiz e Saturao..............................................................................................57 5.1.2 Filtros..................................................................................................................58 5.2 5.3 5.4 Atividades Comentadas......................................................................................58 Exerccios de Reviso.........................................................................................59 Onde estou? O que aprendi?.............................................................................59

Unidade 6
6 6.1 Animao..........................................................................................................60 Adobe Flash.......................................................................................................60

6.1.1 Linha do tempo..................................................................................................60 6.1.2 Biblioteca de smbolos.......................................................................................61

6.1.3 Caixa de ferramentas.........................................................................................61 6.2 6.3 6.4 6.5 Publicao..........................................................................................................65 Atividade Comentada.........................................................................................65 Exerccios de Reviso........................................................................................66 Onde estou? O que aprendi?.............................................................................67

Unidade 7
7 Concluso.........................................................................................................68 Bibliografia.........................................................................................................70

Unidade 1
1. OBJETIVOS
Ao final deste curso desejvel que o aluno esteja capacitado a auxiliar e a elaborar autonomamente sites da web, desenvolvendo tarefas que viabilizem seu ingresso no mundo do trabalho e incluam noes de: Linguagem de marcao de hipertexto; Formatao visual com o uso de Folhas de Estilo em Cascata; Criao de scripts; Edio de imagens; e Elaborao de animaes. 1.1 ORGANIZAO O contedo deste material est organizado da seguinte forma: O primeiro captulo traz uma breve introduo profisso e aos objetivos do curso. O captulo seguinte trata de HTML e tags. Folhas de Estilo em Cascata o assunto do terceiro captulo. O quarto aborda caractersticas da linguagem Javascript. O tratamento de imagens superficialmente abordado no captulo cinco. O sexto captulo apresenta sucintamente a criao de animaes. A concluso apresentada no stimo captulo e as bibliografias no oitavo. 1.2 SOBRE O MATERIAL O material foi elaborado para uma abordagem de ensino direta com vrias atividades e exemplos retirados da Web. Com isso, possvel perceber que no h um abismo entre o que se aprender no curso e o que se faz profissionalmente. Os captulos possuem subsees de Atividades Comentadas, Exerccios de Reviso e Projeto. As atividades comentadas apresentam exerccios propostos com resoluo e comentrios ao final do captulo. A subseo de exerccios de reviso oferece uma lista de atividades para que o aluno possa aplicar e aprimorar o que foi trabalhado. J a subseo Projeto favorece uma aprendizagem contnua, pois a cada captulo algo relacionado ao tema abordado solicitado, permitindo ao trmino do curso a produo do primeiro site a caminho da profissionalizao. Alm disso, ao final de cada captulo encontra-se a subseo Onde estou? O que aprendi? este um momento valiosssimo, pois contextualiza o assunto abordado no captulo, reapresentando de forma mais pontual os objetivos do mesmo. E, de forma integrada, apresentada uma autoavaliao que permite que o prprio aluno identifique seus avanos e deficincias, tornando-o mais responsvel e comprometido com o curso.

10

Ao longo do texto existem perguntas sobre termos, tecnologias ou ferramentas usuais a um profissional web, que pretende viabilizar momentos de troca de informaes e interao entre os alunos do curso. 1.3 ONDE ESTOU? O QUE APRENDI? Ao final deste captulo possvel entender que a profisso de webdesigner apesar de ser recente est em ascenso. Vrios assuntos fazem parte dos conhecimentos necessrios para atuar profissionalmente como, por exemplo, estrutura, estilo e validao de pginas web, alm de elaborao de imagens e animaes. Mas antes de serem apresentados os detalhes tcnicos da profisso, este captulo contextualiza o aluno para que ele tenha uma viso geral desta caminhada, como mostra a barra de progresso da figura 01, alm de apresentar o material para que se possa aproveitar melhor o curso.

Figura 01: Barra de progresso

No prximo captulo ser apresentada a linguagem HTML e algumas de suas tags. Ela responsvel pela estrutura da pgina. Mas antes disso voc se sente capaz de responder a algumas perguntas? Pense a respeito do que leu e reflita: O que voc entende por web? Acredita que as novidades da web mudaram e ainda mudaro a forma de comunicao entre as pessoas? __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ Voc gosta de tecnologia? Gosta de pesquisar coisas novas e aprender sozinho? __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ Para voc o que faz um webdesigner? Quais caractersticas suas se encaixa no perfil deste profissional? __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________

11

Unidade 2
2. HTML
HTML significa Hyper Text Markup Language ou simplesmente linguagem de marcao de hiper texto, foi desenvolvida no Conselho Europeu de Energia Nuclear (CERN) em 1980, por Tim Berners-Lee e seus colaboradores, com o objetivo de publicar documentos organizados e acessveis na Web. Anos mais tarde foram desenvolvidas as regras formais para a linguagem. O HTML tornou-se padro Web pelo W3C (World Wide Web Consortium corpo regulador da Web). A quinta e mais recente verso da linguagem promete melhorias e novas funcionalidades que j esto sendo implementadas por alguns navegadores. Quais navegadores voc conhece? __________________________________________________________________________ 2.1 COMO POSSO ESCREVER PGINAS EM HTML? A linguagem HTML baseada em tags ou etiquetas. Uma tag um metadado, ou seja, um termo associado a uma informao que o descreve. As tags devem, preferencialmente, ser escritas com letras minsculas e ficam entre o sinal de menor e maior, normalmente possuem um incio e um fim, o incio se d pelo nome da tag de abertura <html>e o fim com uma barra antes da tag de fechamento </html>. Um site necessita de vrias tags, este material apresenta as tags mais utilizadas. Normalmente a pgina separada em duas tags, a tag de cabealho <head> e de corpo <body>. No cabealho vo informaes que podem ser importantes aos motores de busca e navegadores, apesar de no aparecerem para o usurio. J no corpo ficam as caractersticas do esqueleto da pgina, que contm as imagens, divises, links e tabelas que iro compor o design do site. Quais motores de busca voc conhece? __________________________________________________________________________ A figura 02 apresenta um exemplo simples em HTML que servir para mostrar uma pgina em branco no navegador. <html> <head> <title>Ttulo da Pgina</title> </head> <body> </body> </html>
Figura 02: Cdigo HTML de um site em branco.

12

Cada tag tem um objetivo, a tabela seguinte mostra o propsito de cada uma das tags do exemplo da figura 02. Tag <html> <head> <title> </title> </head> <body> </body> </html> Propsito Inicia o documento Inicia o cabealho da pgina Define o ttulo do documento Finaliza o ttulo Finaliza o cabealho da pgina Inicia o corpo ou contedo da pgina Finaliza o corpo da pgina Finaliza o documento
Tabela 01: Tags e suas descries

1 ATIVIDADE
1. Abra um editor de texto que permita salvar um arquivo com a extenso .html ou .htm, caso esteja utilizando o sistema operacional Windows pode ser o Bloco de Notas, e digite o cdigo da figura 02. Em seguida, abra o arquivo que acabou de criar com o navegador disponvel no computador que estiver usando e verifique o resultado. 2. Altere o texto digitado na tag <title> para Meu primeiro site. Salve o arquivo, abra-o novamente com o navegador e verifique o resultado. 3. Desta vez, escolha um assunto de sua preferncia e altere o texto da forma que desejar e siga os mesmos procedimentos do exerccio anterior. UM NOVO EXEMPLO... <html> <head> <title>Ttulo da Pgina</title> </head> Insero de contedo na tag <body> <body> Texto apresentado no corpo da pgina. <b>Utilizao da tag de negrito</b> </body> </html>
Figura 03: Cdigo HTML de um novo site

A insero do exemplo da figura 03 pode ser verificada na figura 04.

Figura 04: Exibio do site originado da figura 03

13

Neste exemplo foram inseridos textos no corpo da pgina, ou seja, aps a tag <body>, inclusive uma frase aparece em negrito, isto possvel a partir da tag de formatao <b>. Algumas tags possuem atributos, ou seja, informaes adicionais que alteram seu formato padro. A alterao do cdigo da figura 03 para <body bgcolor=red> resulta na alterao apresentada na figura 05. A alterao da tag <body> para <body bgcolor=red> fez com que a cor de fundo do site passasse do padro branco para vermelho.
Figura 05: Insero do atributo cor de fundo vermelha

2 ATIVIDADE
1. Aps digitar o cdigo da figura 03 altere a cor do fundo para amarelo e veja o resultado. Amarelo em ingls yellow. 2.2 UM POUCO MAIS SOBRE TAGS... 2.2.1 TAGS DE CABEALHO As tags de cabealho apresentam a estrutura da pgina. Existem vrios tamanhos de tags de cabealho que podem ser usadas, a maior representada pela tag <h1> e a menor pela tag <h6>. Estas tags so utilizadas pelos mecanismos de busca para encontrar a informao que o usurio deseja. Veja um exemplo que apresenta todas elas na figura 6. <html> <head> <title>Ttulo da pgina</title> <h1>Tag de Cabealho 1</h1> <h2>Tag de Cabealho 2</h2> <h3>Tag de Cabealho 3</h3> <h4>Tag de Cabealho 4</h4> <h5>Tag de Cabealho 5</h5> <h6>Tag de Cabealho 6</h6> </head> <body> </body> </html>
Figura 06: Exemplo de Tag de Cabealho.

Outra tag importante a tag <meta>, tambm conhecida por meta tag. Esta tag ajuda ferramentas de busca e navegadores a indexar adequadamente. Veja o exemplo na figura 07.

14

<meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1>

Figura 07: Exemplo de sintaxe da meta tag

A meta tag possui vrias propriedades, no exemplo anterior foi especificado o tipo de contedo, ou seja, contedo HTML, alm do conjunto de caracteres (charset) utilizado. O atributo charset que trata da codificao dos caracteres ajuda na acentuao, feita incorretamente os acentos podero aparecer de forma incorreta, como caracteres estranhos. Existem outros detalhamentos desta tag, como os atributos keywords, description e author, que especificam respectivamente palavras-chave, descrio e autoria, todas essas informaes ajudaro os motores de busca na tarefa de indexao dos sites.

3 ATIVIDADE
1. Faa um exemplo e insira uma meta tag que especifique o idioma do site. 2. A seguir insira uma meta tag que especifique a autoria do site. 3. Acrescente tambm uma meta tag que apresente uma descrio e as palavras-chave do site. 2.2.2 TAGS DE CORPO Algumas tags permitem alteraes na cor do plano de fundo e na fonte disponvel no corpo da pgina. A escolha da cor pode ser feita pelo nome em ingls ou pela especificao do nmero hexadecimal equivalente, veja a figura 8. <html> <head> Valor Hexadecimal <title>Ttulo da pgina</title> <h1>Tags do Corpo da Pgina</h1> </head> <body bgcolor = yellow text = #FF0000> Cor do fundo amarelo e cor do texto vermelho. </body> Nome da cor em ingls </html>
Figura 8: Exemplo de tag de corpo

2.2.3 TAGS DE PARGRAFO E QUEBRA DE LINHA Uma tag de pargrafo delimita o contedo do pargrafo e a tag <br> insere uma quebra de linha onde for colocada. Veja o exemplo da figura 09.

15

<html> <head> <title>Ttulo da pgina</title> <h1>Tags de Pargrafo</h1> Esse pargrafo possui </head> duas quebras de linha <body> <p>Primeiro Pargrafo</p> <p>Segundo Pargrafo</p> <p>Terceiro Pargrafo</p> <!Um comentrio qualquer--> <p>Este texto<br>possui<br>quebras de linha.</p> </body> </html>
Figura 09: Exemplo de tags de pargrafo e quebra de linha

Para inserir qualquer comentrio dentro do cdigo HTML, que no ser exibido pelo navegador, faa como a linha retirada da figura 09. <!Um comentrio qualquer-->

PROJETO

Elabore um site que traga informaes sobre algum assunto que voc conhea ou tenha grande interesse. Escolha atentamente o seu texto, pois este site ir acompanh-lo at o fim do curso. De preferncia escreva no mximo dois ou trs pargrafos sobre o assunto e lembre-se de fazer uso das tags aprendidas at o momento. 2.2.4 TAGS DE FORMATAO As tags de formatao ajudam o desenvolvedor a exibir adequadamente o contedo do seu site. Veja o exemplo da figura 10. <html> <head> <title>Ttulo da pgina</title> <h1>Tags de formatao</h1> </head> <body> <!-- Um comentrio qualquer --> <p><b>Texto em Negrito</b></p> <p><big>Texto Grande</big></p> <p><i>Texto em Itlico</i></p> <p><small>Texto pequeno</small></p> <p><del>Texto Cancelado</del></p> <p><code>Caracter</code></p> <p>Texto_Subscrito</p> <p>Texto^Sobrescrito</p> </body> </html>
Figura 10: Exemplo de tags de formatao

16

Alm disso, atributos de alinhamento podem ser inseridos para que o texto fique direita, ao centro ou esquerda da pgina. Veja o cdigo na figura 11 e a visualizao na figura 12. <html> <head> <title>Ttulo da pgina</title> <h1>Tags de Alinhamento</h1> </head> <body> <p align=left>Texto esquerda</p> <p align=center>Texto Centralizado</p> <p align=right>Texto direita</i></p> </body> </html>
Lembrete Left = esquerda Center = centralizado Right = direita

Figura 11: Exemplo de tags de alinhamento

Figura 12: Visualizao das tags de alinhamento

Outra possibilidade alterar cor, tipo e o tamanho da fonte. Veja o exemplo. <html> <head> <title>Ttulo da pgina</title> <h1>Tags de Tratamento da Fonte</h1> </head> <body> <p> Cor padro da fonte. <font color = blue> Mudana da cor da fonte. </font><br> <font face=arial font color = #864086 font size = 5> Mudana da cor da fonte, do tipo e do tamanho. </font></p> </body> </html>
Figura 13: Exemplo das tags de alterao da fonte

2.2.5 TAGS DE VINCULAO DE DOCUMENTOS A vinculao de documentos, tambm conhecida como hiperlinks, permite ligar um documento a outro. A tag ncora <a> cria o vnculo e o atributo href usado para enderear o novo documento. Veja o exemplo da figura 14.

17

<html> <head> <title>Ttulo da pgina</title> <h1>Tags de Vinculao</h1> </head> <body> <p> <a href=http://www.w3c.br/Home/WebHome>Link para o site do W3C Brasil</a></p> <hr> </body> </html>
Figura 14: Exemplo das tags de vinculao

Algumas vezes interessante manter uma linha horizontal para separar os contedos, a tag <hr> usada para isso.

PROJETO

Insira tags de formatao para valorizar o seu projeto. Escolha um site mais completo que aborde o mesmo tema do seu site e crie um link para ele. 2.2.6 TAG DE IMAGEM A insero de imagens possvel com a tag <img>. Para inserir uma imagem em uma pgina preciso usar a propriedade src que dever apontar para o local e o nome do arquivo da imagem a ser utilizada. Veja o exemplo da figura 15. <html> <head> <title>Ttulo da pgina</title> Nome do arquivo: html.jpg <h1>Tags de Imagens</h1> </head> Identificao da imagem <body> <img src=D:\Nova pasta\html.jpg alt=HTML> </body> Nome da pasta: Nova pasta </html> A imagem est no diretrio D
Figura 15: Exemplo da tag de imagem

No exemplo seguinte a figura foi dimensionada (width largura / height altura) e usada como um vnculo a uma outra pgina na web, ao clicar na imagem o usurio ser redirecionado para o site da W3C Brasil. <html> <head> <title>Ttulo da pgina</title> <h1>Imagem como vnculo</h1> </head> <body> <a href=http://www.w3c.br/Home/WebHome > <img src=botao.gif width=50 height=50 alt=W3C Brasil/></a> </body> </html>
Figura 16: Exemplo de tag como vnculo

18

2.2.7 TAG DE LISTAS DESORDENADAS comum encontrar listas que podem servir para definir e enumerar elementos, cabealhos, ttulos entre outros. Na sua criao utilizada a tag <ul> e cada um dos elementos fica cercado pela tag <li>. Veja o exemplo da figura 17. <html> <head> <title>Ttulo da pgina</title> <h1>Tag de listas</h1> </head> <body> <ul> <li>Internet</li> <li>Computador</li> <li>Site</li> </ul> </body> </html>
Figura 17: Exemplo de tag de lista desordenada

Tambm possvel definir o tipo do marcador, para isso utiliza-se o atributo type. A figura 18a exibe a utilizao da propriedade <ul type=square> e a figura 18b a propriedade <ul type=circle>. Verifique o resultado.

Figura 18a Exemplo de marcador square

Figura 18b Exemplo de marcador circle

2.2.8 TAG DE LISTAS ORDENADAS Neste caso utiliza-se a tag <ol> e cada um dos elementos fica cercado pela tag <li>. A propriedade type define o tipo de estilo usado pela lista, na figura 19 utilizado letras e na figura 20 utilizado nmeros. <html> <head> <title>Ttulo da pgina</title> <h1>Tag de listas</h1> </head> <body> <ol type = a > <li> Internet</li> <li> Computador</li> <li> Site</li> </ol> </body> </html>
Figura 19: Exemplo de tag de lista ordenada com letras

19

<html> <head> <title>Ttulo da pgina</title> <h1>Tag de listas</h1> </head> <body> <ol type = 1 > <li> Internet</li> <li> Computador</li> <li> Site</li> </ol> </body> </html>
Figura 20: Exemplo de tag de lista ordenada com nmeros

2.2.9 TAG DE TABELAS A tag de tabelas a <table>, dentro dela coloca-se as tags que definem linha <tr> e coluna <td>. Veja o exemplo da figura 21. <html> <head> <title>Ttulo da pgina</title> <h1>Tag de Tabela</h1> </head> <body> <table border=2 width=20% heigth=20% bordercolor=red bgcolor=lightblue> <tr> <td align =center>Nome</td> <td align =center>Telefone</td> </tr> <tr> <td>Pedro</td> <td>3333-2222</td> </tr> </table> </body> </html>
Figura 21: Exemplo de tag de tabela

A tag <tr> cria a primeira linha e as duas tags <td> criam as duas colunas identificadas por Nome e Telefone. A segunda tag <tr> cria a segunda linha e as duas tags <td> criam as duas colunas preenchidas por Pedro e 3333-2222. A propriedade border define a largura da borda da tabela, enquanto que os elementos width e heigth foram configurados de forma a ocuparem apenas 20% do espao disponvel para a pgina. Tambm foi definida a cor vermelha para a cor da borda e a cor azul claro para o fundo da tabela.

20

4 ATIVIDADE
1. Elabore um site igual ao da imagem. Utilize uma tabela que insira na primeira linha uma lista ordenada e na segunda uma lista desordenada. Cada item da lista deve apontar para um site. Veja os sites ao lado da figura.

http://www.educacional.com.br http://entretenimento.uol.com.br http://esporte.uol.com.br http://www.w3schools.com/html http://www.w3schools.com/css

2.2.10 TAG DE FORMULRIO Um formulrio uma rea para a entrada de dados, a tag <form> delimita um formulrio, nesta rea possvel conter qualquer formatao exceto outros formulrios. Seus principais atributos so action, method e name. O atributo action aponta para a pgina que receber os dados presentes no formulrio. O atributo method assumir duas opes get ou post. Na opo get os dados fazem parte do endereo. No caso do post os dados fazem parte do corpo da mensagem. O atributo name identifica o formulrio dentro da pgina. Dentro da marcao da tag <form> so colocados campos de entrada de dados que podem ser <input>, <select> e <textarea>. A tag <input> define um campo de entrada do usurio. O atributo type especifica o tipo do elemento. A tag <select> apresenta uma lista de valores atravs dos campos option. A tag <textarea> abre uma rea para entrada de texto.

21

<html> <head> <title>Ttulo da pgina</title> <h1>Tag de Formulrio</h1> </head> <body> <form> Nome: <input type=text name=nome maxlength=9><br> Senha: <input type=password name=senha maxlength=5> <hr> Selecione seus esportes favoritos (Mltipla Escolha)<br> <input type=checkbox name=esporte value=basquete/>Basquete <br> <input type=checkbox name=esporte value=volei/>Vlei<br> <input type=checkbox name=esporte value=futebol/>Futebol<br> <hr> Selecione o seu tipo de msica preferida (Escolha nica)<br> <input type=radio name=musica value=valsa/>Valsa <br> <input type=radio name=musica value=samba/>Samba<br> <input type=radio name=musica value=rock/>Rock<br> <input name=Submit1 type=submit value=Enviar /> <input name=Reset1 type=reset value=Limpar /> </form> </body> </head> </html>
Figura 22: Exemplo de um formulrio com dados de entrada

Na figura 22 so apresentadas formas de entrada de dados. A primeira especificada pelo comando <input type=text name=nome maxlength=9>. Foi definido que a entrada de dados do tipo texto, a identificao do elemento nome e ele suportar apenas 9 dgitos. O segundo caso vem logo em seguida com o comando <input type=password name=senha maxlength=5>. Neste exemplo a entrada do tipo password, ou seja, senha, por isso independente do que o usurio digitar ser exibido caracteres que impeam a visualizao do que for digitado. Tambm possvel verificar dois botes na figura 22, um de enviar e outro de limpar. Os elementos so inseridos a partir das seguintes linhas de comando. <input name=Submit1 type=submit value=Enviar /> <input name=Reset1 type=reset value=Limpar />
Figura 23: Exemplo de uma entrada de dados previamente definida

A entrada do tipo submit apresenta o boto que envia os dados de entrada para o servidor, a opo reset restaura os valores iniciais das entradas de dados. Ainda na figura 22 foram usadas duas outras opes de entrada de dados checkbox e radio. O elemento checkbox permite a escolha de vrias opes da lista. O elemento radio, por sua vez, permite somente uma alternativa.

22

Em ambos os casos possvel escolher uma opo prvia que pode ser alterada pelo usurio, inserindo a palavra checked na frente da opo desejada. A figura 24 apresenta a insero da opo previamente definida e a figura 25 a aparncia desta alterao. Note que o nome do atributo name o mesmo para toda a lista de valores tanto no caso da opo checkbox quanto radio. Selecione seus esportes favoritos (Mltipla Escolha)<br> <input type=checkbox name=esporte value=basquete/>Basquete <br /> <input type=checkbox name=esporte value=volei/>Vlei<br /> <input type=checkbox name=esporte value=futebol checked/>Futebol<br /> Selecione o seu tipo de msica preferida (Escolha nica)<br> <input type=radio name=musica value=valsa/>Valsa <br /> <input type=radio name=musica value=samba/>Samba<br /> <input type=radio name=musica value=rock checked/>Rock<br />
Figura 24: Exemplo de uma entrada de dados previamente definida

Figura 25: Visualizao de opes previamente escolhidas

A tag <select> apresenta uma lista de valores, mas somente uma opo pode ser escolhida. Verifique a figura 26. <html> <head> <title>Ttulo da pgina</title> <h1>Tag de Formulrio</h1> </head> <body> <form> Selecione a sua modalidade de luta preferida (Escolha nica)<br> <select name=lutas> <option>Karat</option> <option>Taekwondo</option> <option>Kung Fu</option> <option>Jud</option> </select> </form> </body> </head> </html>
Figura 26: Exemplo da tag de seleo

23

Caso seja necessrio citar uma determinada opo dentro de um elemento select pode-se nomin-lo como aparece na figura 27. <option value Karate>Karat</option>
Figura 27: Nominao da tag de seleo

A tag <textarea>, figura 28, apresenta uma rea para entrada de texto, mas com a particularidade de poder escrever vrias linhas de uma s vez. <html> <head> <title>Ttulo da pgina</title> <h1>Tag de Formulrio</h1> </head> <body> <form> <textarea cols=35 rows=3 name=comentario> Escreva aqui seu comentrio...</textarea> </form> </body> </head> </html>
Figura 28: Exemplo da tag de entrada de texto Lembrete Cols = colunas Rows = linhas

Isso possvel a partir da configurao do nmero de colunas (cols) e linhas (rows) que o elemento pode ter.

2.3 ATIVIDADES COMENTADAS

1 ATIVIDADE O cdigo HTML da figura 02 no apresenta nenhum texto, por isso, o site no passa de uma pgina em branco e somente o ttulo da pgina foi personalizado. Na segunda atividade possvel verificar que a mudana do contedo da tag <title> refletida no momento em que o site salvo e apresentado novamente. A terceira atividade deve apresentar no ttulo da pgina o contedo escolhido. 2 ATIVIDADE A alterao da cor do plano de fundo para amarelo representa uma mudana no atributo padro da tag <body> para <body bgcolor=yellow>.

24

3 ATIVIDADE <html> <head> <meta http-equiv=Content-Type content=text/html; charset=ISO-8859-1> <meta http-equiv=content-language content=pt-br> <meta name=author content=Daniela Flor> <meta name=description content=Introducao ao HTML> <meta name=keywords content=html, HTML, site, sites> <title>Ttulo da pgina</title> <h1>Introduo ao HTML</h1> </head> <body> Conceitos introdutrios de HTML. </body> </html> 4 ATIVIDADE <html> <head> <title>Ttulo da pgina</title> <h1>Exerccio</h1> </head> <body> <table border=2 > <tr> <td> <ol type = a > <li><a href=http://www.educacional.com. br>Educao</a></li> <li><a href=http://entretenimento.uol.com.br/> Entretenimento</a></li> <li><a href=http://esporte.uol.com.br/>Esporte</ a></li> </ol> </td> </tr> <tr> <td> <ul> <li><a href=http://www.w3schools.com/html/default. asp>HTML</a></li> <li><a href=http://www.w3schools.com/css/>CSS</ a></li> </ul> </td> </tr> </table> </body> </html> Meta tag que identifica o tipo e o conjunto de caracteres. Identificao do idioma. Identificao da autoria do site. Identificao da descrio e de palavraschave.

Definio da tabela Criao da primeira linha/coluna Definio da lista ordenada

Itens da lista ordenada

Fim da primeira linha/coluna Incio da segunda linha/coluna Definio da lista desordenada

Itens da lista desordenada

Fim da segunda linha/coluna Fim da tabela

25

2.4 EXERCCIOS DE REVISO 1) Construa uma pgina que contenha seu nome e uma mensagem de boas vindas. Aps isso, acrescente: a) Uma imagem qualquer b) Um hyperlink para www.omelete.com.br c) Uma imagem com hyperlink para www.uol.com.br

2) Inserir listas, como no exemplo abaixo, que contenha o nome dos pais, irmos e cores favoritas. Pais Joo Silva Maria Silva Irmos Joo Silva Jr. Maria Aparecida Silva Jos Silva Cores Favoritas 1. Preto 2. Branco 3. Cinza

3) Faa uma pgina com tabelas exatamente como as do exemplo a seguir. Computador Memria 256 IID 200Gb Processador Total Preo 23,00 150,00 230,00 Jogo Doom CS Quake Ano de Lanamento 1999 2006 2001

4) Faa uma pgina com o seguinte formulrio:

26

5) Faa uma pgina com o seguinte formulrio:

2.5 ONDE ESTOU? O QUE APRENDI? Ao final deste captulo importante entender que a linguagem HTML consolida a estrutura da pgina a partir de comandos chamados de tags. Para cada ao necessria uma tag epecfica. A tabela a seguir resume as tags abordadas. Tipo Exemplo Incio de um documento HTML <html> Divises de um documento HTML <head> <body> Tags de Cabealho <h1> <h2> <h3> <h4> <h5> <h6> Tags de Pargrafo e Quebra de Linha <p> <br> Tags de Formatao <b><big><i> <small> <del> <code> <sub> <sup> Tags de Fonte <font color> <font face> <font size> Tag de hiperlink <a href> Tag de imagem <img src> Tags de Lista Desordenada <ul> <il> Tags de Lista Ordenada <ol> <il> Tags de Tabelas <table> <tr> <td> Tags de Formulrio <form> <input> <select> <textarea>
Tabela 2: Resumo das tags

Neste momento, como mostra a barra de progresso da figura 29, alm de conhecer o material e as funes de um webdesigner foi apresentado como possvel construir a estrutura de um site.

Figura 29: Barra de progresso

27

No prximo captulo ser apresentada a linguagem CSS, ela responsvel pelo estilo da pgina. Mas antes disso voc se sente capaz de responder a algumas perguntas? Pense a respeito do que aprendeu e responda: Voc capaz de construir a estrutura de um site? Escolha uma das opes.
( ) Sim, Sozinho ( ) Sim, mas com ajuda ( ) Sim, aps mais exerccios ( ) Ainda no

Caso a resposta para a questo anterior seja Ainda no, a que voc atribui isso? __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ Com o boto contrrio do mouse sobre um site qualquer escolha a opo Cdigo-Fonte. Voc consegue entender alguma coisa?
( ) Nada ( ) Um pouco ( ) Quase tudo ( ) Sim

28

Unidade 3
3 CSS
Na construo de pginas para a Internet, a linguagem HTML utilizada na criao de pargrafos, cabealhos, links, listas, tabelas, formulrios, entre outros elementos que contero as informaes das pginas. A formatao visual o objetivo da linguagem CSS (Cascading Style Sheets Folhas de Estilo em Cascata). Com a CSS, consegue-se criar a aparncia das pginas web formatando bordas, cores, fontes, posicionamento de elementos, backgrounds e muitas outras opes visuais. A linguagem CSS formada por regras e cada regra criada gera um efeito visual nas pginas. Para criar uma regra usa-se um seletor e um conjunto de propriedades com seus valores, conforme apresentado na figura 30. seletor{ propriedade: valor;
Figura 30: Sintaxe de uma regra em CSS

possvel ter vrias propriedades em uma mesma regra. Por exemplo, pode-se ter pargrafos contendo a fonte Times New Roman, no tamanho 16, com a cor vermelha, no estilo itlico. A figura 31 demonstra a regra CSS para a formatao dos pargrafos de uma pgina web. p{ font-family: Times New Roman; font-size: 16pt; font-style: italic; color: red;
Figura 31: Regra CSS para formatao dos pargrafos

Cada navegador de internet como, por exemplo, Mozilla Firefox, Internet Explorer, Opera ou Chrome possui um conjunto de estilos internos padro que definido pelo fabricante para cada tag da linguagem HTML. As regras CSS so criadas para alterar alguns dos valores padres definidos pelos navegadores. O termo cascata indica que h uma ordem que estes estilos devem seguir, dando preferncia para alguns valores das propriedades nas regras CSS. A ordem cascata definida como: Regras de estilos padres do navegador; Regras de estilo criadas em arquivos diferentes (externos); Regras de estilos criadas no mesmo arquivo dentro da tag <head>; Regras de estilos criadas usando o atributo style de cada tag.

29

Esta ordem de preferncia permite que um mesmo atributo possa conter valores diferentes e com base nesta ordem o navegador decidir como o contedo ser exibido. 3.1 MTODOS DE VINCULAO Para criar as regras da linguagem CSS preciso utilizar a tag <style> que dever estar presente na rea <head> do documento HTML. Este mtodo de vinculao conhecido como estilo incorporado, utilizado quando necessrio criar regras de estilizao que sero aplicados aos elementos em uma pgina. A figura 32 apresenta uma notcia publicada no site da UOL e sua formatao. O texto se encontra com fonte Arial, tamanho 20 pontos, cor azul e largura de 300 pixels. <html> <head> <title> estilo em CSS</title> <style type=text/css> p{ font-family: Arial; font-size: 20pt; font-weight: bold; color: #194C7F; width: 300px; } </style> </head> <body> <p>Neymar marca, Santos bate Kashiwa por 3 a 1 e vai final do Mundial</p> </body> </html>
Figura 32: Exemplo de regra CSS para formatao de pargrafo

VOC SABE O QUE UM PIXEL? __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________

5 ATIVIDADE
1. Elabore um site igual ao da imagem. Formate usando CSS nas tags <h1> e <p>. Na tag <h1> que foi usada na frase MANCHETES DO DIA, a configurao deve ser fonte Arial, tamanho 20 pontos, negrito, vermelho e largura de 300 px. Na tag dos pargrafos utilize fonte Times New Roman, tamanho 10 pontos, cor azul e largura de 150 px.

30

Normalmente um site possui diversos documentos HTML. Quando duas ou mais pginas do site usarem a mesma formatao visual, pode-se utilizar o mtodo de vinculao com estilo externo, neste caso preciso criar um documento com a extenso .css e colocar todas as regras CSS neste arquivo. Para que o documento HTML consiga exibir as regras liga-se um documento ao outro. Esta ligao feita na seo <head> com a tag <link>. Veja o exemplo da figura 33. Arquivo: estilos.css p{ font-family: Arial; font-size: 20pt; font-weight: bold; color: #194C7F; width: 300px; Arquivo: pagina.html <html> <head> <title>Estilo em CSS</title> <link href=estilos.css rel=stylesheet type=text/css /> </head> <body> <p>Neymar marca, Santos bate Kashiwa por 3 a 1 e vai final do Mundial</p> </body> </html>
Figura 33: Ligao da pgina.html e estilos.css

A figura 34 demonstra o uso de arquivo externo para a criao de regras em CSS. Cada arquivo HTML que desejar utilizar as mesmas regras de formatao precisa inserir a mesma tag para fazer a ligao entre os arquivos. Veja a repetio do estilo da figura 32 na figura 34. <html> <head> <title>Estilo em CSS</title> <link href=estilos.css rel=stylesheet type=text/css /> </head> <body> <p>Venda de carros bate recorde, mas fica abaixo do previsto</p> </body> </html>
Figura 34: Uso de arquivo externo para regras em CSS

6 ATIVIDADE
Elabore um site igual ao da imagem. Formate usando CSS externo. No arquivo CSS formate as tags <h1> e <p>. Na tag <h1> que foi usada na frase MANCHETES DO DIA, a configurao deve ser fonte Arial, tamanho 20 pontos, negrito, vermelho e largura de 300 px. Na tag dos pargrafos utilize fonte Times New Roman, tamanho 10 pontos, cor azul e largura de 150 px. Ao criar o site utilize duas manchetes intercaladas e entre elas coloque um texto sem formatao de pargrafo.

31

Por uma questo de visualizao usamos o estilo incorporado nos prximos exemplos. 3.2 CRIANDO ESTILOS PARA FORMATAR TEXTOS Com o uso da linguagem CSS possvel alterar a formatao padro do navegador para modificar a fonte das letras (tipografia), cores, tamanhos, alinhamentos e muitas outras opes quando se trata de textos. A tabela 3 traz alguns atributos que so utilizados na estilizao de textos nas regras da linguagem CSS. Cada atributo apresenta uma funcionalidade e um conjunto de valores possveis. Propriedade font-family Descrio Valores Configura a tipografia Serif dos textos Sans-serif Cursive Fantasy Monospace Verdana Arial etc. Configura o tamanho Uma unidade de das letras medida utilizada pela linguagem CSS (px, pt, em, cm, in, mm, pc) Utilizada para deixar normal as letras em itlico italic Utilizada para deixar normal as letras em negrito bold Configura o alinha- left mento horizontal do right center texto justify Configura o estilo de none underline sublinhado do texto overline line-through Exemplo p{ font-family: verdana; }

font-size

a{ font-size: 14px; } li { font-style: italic; } body{ font-weight: bold; } h1{ text-align: center; } span{ text-decoration: line-through;

font-style

font-weight

text-align

text-decoration

color

} Configura a cor do Nome da cor (red, b{ green, blue, etc.) texto color: #C33; Valor em hexadecimal (#AA034B) } Valor em RGB rgb(100,200,75)
Tabela 3: Principais atributos para estilizao de textos

32

Para exemplificar o uso dos atributos na estilizao de textos, observe a figura 35. Esta figura apresenta um documento HTML que contm um cabealho e um pargrafo com suas regras de formatao na linguagem CSS. <html> <head> <title>Estilos CSS</title> <style type=text/css> h1, p{ font-style: italic; font-family: sans-serif; } h1{ font-size: 16px; color: #ABC; text-align: center; } p{ color: #00F; font-size: 20px; } </style> </head> <body> <h1>Aprendendo CSS </h1> <p>Uso de regras de estilos para formatao de textos.</p> </body> </html>
Figura 35: Exemplo de formatao de textos com CSS

3.3 FORMATANDO O BACKGROUND O background refere-se a uma cor usada atrs de um texto, imagem ou outros contedos presentes em uma pgina. Pode-se inclusive colocar uma imagem de fundo nos elementos HTML. A Tabela 4 traz as principais propriedades utilizadas na estilizao de background nos elementos da linguagem HTML. Propriedade Descrio Valores Exemplo background- Configura uma cor de Nome da cor (red, p{ -color fundo para os elementos green, blue, etc.) background-color: Valor em hexade- #ABC; cimal (#AA034B) } Valor em RGB rgb(100,200,75) background- Configura uma imagem url(arquivo.jpg); ul{ de fundo para os -image background-image: elementos url(fundo.gif); }

33

background-repeat

Configura a forma que repeat uma imagem ser repetida no fundo dos elemen- repeat-x tos repeat-y no-repeat

div{ background-image: url(fundo.gif); background-repeat: repeat-x; } body{ background-image: url(fig.jpg); background-repeat: no-repeat; background-position: center center; }

background-position

Configura a posio (horizontal e vertical) de uma imagem de fundo em um elemento

Comprimento (cm, pt, px, etc) top, bottom, left, right, center

Tabela 4: Principais atributos para estilizao de background

Como exemplo da formatao de fundo para os elementos do documento HTML considere a figura 36. Nesta figura uma imagem do Homer Simpson foi posicionada no canto inferior direito da pgina e outra figura com tamanho 23px por 20px foi inserida como imagem de fundo para o pargrafo. <html> <head> <title>Estilos CSS</title> <style type=text/css> body{ background-image: url(homer.png); background-repeat: no-repeat; background-position: bottom right; } p{ background-image: url(fundo.gif); background-repeat: repeat; color: black; font-size: 30px; } </style> </head> <body> <p>Uso de regras de estilos para formatao de backgrounds.</p> </body> </html>
Figura 36: Exemplo de formatao de background.

3.4 FORMATANDO LISTAS ORDENADAS E LISTAS COM MARCADORES A linguagem CSS possui algumas propriedades que podem ser utilizadas para a formatao de listas de itens <ol> (lista ordenada) e <ul> (lista de marcadores). As propriedades mais comuns utilizadas na estilizao de listas so list-style-type e list-style-image.

34

A propriedade list-style-type utilizada para definir o estilo da lista. Com o uso desta propriedade, uma lista ordenada pode se transformar em uma lista com marcadores ou vice-versa. Pode-se ainda alterar a numerao padro dos itens da lista para algarismos romanos, gregos, letras maisculas ou minsculas, entre outros. A figura 37 apresenta algumas alternativas para estilizao de listas.
<ol> <li>Carros</li> <li>Cincia e sade</li> <li>Cotidiano</li> <li>Economia</li> <ul> <li>Carros</li> <li>Cincia e sade</li> <li>Cotidiano</li> <li>Economia</li>

</ol> Elemento <ol> sem estilizao (decimal)

</ul> Elemento <ul> sem estilizao (disc)

ol{

} Estilos: lower-alpha e upper-alpha

list-style-type: lower-alpha;

ul{

list-style-type: circle; } Estilo: circle e square

Figura 37: Exemplos de estilo de marcadores

Quando for desejvel utilizar um tipo de marcador diferente do padro, pode-se utilizar uma imagem. A propriedade list-style-image utilizada para informar a imagem que ser utilizada para o novo marcador. Veja o exemplo da figura 38. ul{ } list-style-image: url(lupa.jpg);
Figura 38: Exemplos de marcador com imagem

A regra informa ao navegador que a imagem lupa.jpg dever ser utilizada como marcador para os itens da lista. A altura da imagem escolhida deve ser ajustada para a altura da linha, conforme mostrado na figura 38
.

3.5 MODELO EM CAIXA Cada uma das tags inseridas nos documentos HTML so tratadas pelos navegadores como caixas. Por exemplo, um pargrafo pode ser visto como uma caixa que contm outros elementos (textos, links, imagens, entre outros). Um link pode ser visto como uma caixa que contm textos ou imagens. Cada uma das caixas, ou seja, cada tag apresenta propriedades como, por exemplo, margin, border, padding e um contedo. O contedo pode estar presente ou no em uma tag. A figura 39 mostra um exemplo do Modelo em Caixa que cada elemento HTML representa.

35

Figura 39 Exemplo do Modelo em Caixa

A rea de contedo o espao utilizado para exibir as informaes. Por exemplo, o texto de um pargrafo o contedo da tag <p>. O padding um espao ou uma distncia que separa o contedo da borda. O elemento border corresponde a uma borda que cada elemento pode conter. O elemento margin corresponde a um espao ou distncia que separa uma caixa de outra. Na figura 38, possvel verificar que os elementos padding, border e margin esto presentes nos quatro lados da caixa (superior, inferior, esquerdo e direito). Cada um destes lados pode ser configurado com valores diferentes. Para alterar a configurao da borda dos elementos existem as propriedades border-style, border-width e border-color, que so detalhadas a seguir: border-style: esta propriedade permite modificar o estilo de borda do elemento. Seus possveis valores so: dotted, dashed, solid, double, groove, ridge, inset e outset. border-width: esta propriedade utilizada para modificar a espessura da borda. Seus valores so geralmente configurados com tamanhos em pixels, thin, mdium ou thick. border-color: esta propriedade utilizada para alterar a cor da borda. Cada uma das quatro bordas (inferior, superior, esquerda e direita) possui um estilo, largura e cor. Para alterar estes valores individualmente utiliza-se as propriedades da tabela 5 seguinte: Cor Estilo Largura border-bottom-color border-bottom-style border-bottom-width border-top-color border-top-style border-top-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width
Tabela 5: Propriedades individuais de bordas

Para alterar as propriedades padding e margin nos cantos inferior, superior, esquerdo e direito de forma individual pode-se utilizar as propriedades da tabela 6. Padding padding-bottom padding-top padding-left padding-right Margem margin-bottom margin-top margin-left margin-right

Tabela 6: Propriedades individuais de espaamento e margem

36

Como exemplo de efeito visual utilizando padding, border e margin, pode-se utilizar o menu lateral esquerdo do site da UOL, representado na figura 40.

Figura 40: Menu retirado do site da UOL

O menu pode ser implementado utilizando uma lista sem marcadores. Observando a imagem percebe-se que existe uma linha pontilhada em cima de cada item da lista. Para inserir um espao entre cada item, pode-se modificar a margem superior, conforme apresenta o exemplo da figura 41. <html> <head> <title>Estilos CSS</title> <style type=text/css> ul{ list-style-type:none; font-family:sans-serif; font-size:14px; width: 160px; margin-left: 50px; } li{ border-top-style: dotted; border-top-color: #999; border-top-width:1px; padding-top: 5px; padding-bottom: 0px; padding-left:10px; margin-top: 5px; } </style> </head> <body> <ul> <li>Carros</li> <li>Cincia e Sade</li> <li>Cotidiano</li> <li>Economia</li> </ul> </body> </html>
Figura 41: Exemplo de formatao individual

3.6 CRIANDO CLASSES DE ESTILOS E IDENTIFICADORES Nos exemplos anteriores foram criadas regras de estilos CSS que formatam todas as tags presentes no documento HTML. Na prtica, cada rea do documento HTML contm um

37

tipo de formatao diferente, apresentando visualizaes mais atrativas. Como exemplo, imagine um documento HTML que contenha uma estrutura semelhante ao da figura 42.

Figura 42: Exemplo de leiaute

O leiaute apresentado na figura 42 contm uma regio com um menu de opes do lado esquerdo e uma outra regio na rea central para o contedo do documento. Se o menu fosse implementado como uma lista de itens e na rea de contedos fosse necessrio incluir uma outra listagem de itens, todos teriam a mesma aparncia do menu. Para solucionar este tipo de problema, pode-se criar estilos prprios e aplic-los a apenas alguns elementos HTML. A criao de classes de estilos permite aos desenvolvedores fornecer nomes especficos para as regras e aplicar estas regras a qualquer elemento presente no documento. Para criar uma classe de estilos necessrio colocar um ponto antes do nome desta classe. Veja o exemplo da figura 43. .meu_estilo{ color:#C00; font-family: Times New Roman; text-decoration: none; background-color:#FF0;
Figura 43: Exemplo de Classe de Estilo

Para que a tag exiba no navegador a regra da figura 43, necessrio inserir um atributo chamado class, conforme a figura 44. Com o uso das classes, vrios elementos diferentes podem ter o mesmo efeito visual, alm de permitir aplicar efeitos visuais diferentes para uma mesma tag. <a href=pagina1.html class=meu_ estilo>Link 1</a> <h1 class=meu_estilo>Ttulo</h1> <p class=meu_estilo>Corpo do pargrafo</p>
Figura 44: Utilizao do conceito de classe

Uma outra forma de dar nomes a regras CSS por meio da criao de identificadores. Os identificadores so utilizados para estilizar apenas um elemento entre todos os elementos de um documento web. Para criar os identificadores preciso fornecer o nome deste identificador precedido pelo smbolo #. Veja o exemplo da figura 45.

38

#menu{ list-style-type:none; width: 200px; }

Figura 45: Exemplo de identificadores

Para associar uma tag a uma regra de estilos contendo um identificador preciso utilizar o atributo id, conforme o exemplo da figura 46. <ul id=menu> <li>Item 1</li> <li>Item 2</li> </ul>
Figura 46: Exemplo de uso de um identificador

Como exemplo de cdigo, considere o menu de pesquisa do Google, conforme apresentado na figura 47. Este menu pode ser implementado utilizando uma lista de itens.

Figura 47: Menu de opes do site do Google

O cdigo para implementar um menu semelhante segue abaixo. Neste cdigo criado uma regra CSS com o identificador menu_principal e este identificador vinculado tag <ul>. Tambm foi criado uma regra para estilizar todos os itens de lista que fazem parte do menu principal. Como o menu contm apenas um elemento selecionado, cria-se um identificador chamado atual para este elemento. Conforme o ponteiro do mouse passa sobre os elementos, a cor de fundo modificada. Este estilo pode ser demonstrado com a classe chamada fundo_cinza.

39

<html> <head> <title>Classes de estilos</title> <style type=text/css> #menu_principal{ list-style-type: none; font-family: Arial; margin: 0px; padding: 0px; width: 200px; } #menu_principal li{ padding-top: 5px; padding-bottom: 5px; padding-left: 20px; border-left: 4px; } #menu_principal li#atual{ color: red; border-left-color: red; border-left-style: solid; } #menu_principal li.fundo_cinza{ background-color:#EEE; } </style> </head> <body> <ul id=menu_principal> <li id=atual>Tudo</li> <li>Imagens</li> <li class=fundo_cinza>Mapas</li> <li>Video</li> <li>Notcias</li> </ul> </body> </html>
Figura 48: Exemplo de menu

Para criar o efeito rollover onde o estilo modificado apenas quando o ponteiro do mouse passa sobre o elemento, utiliza-se o seletor :hover, que aplicar a classe fundo_ cinza quando o mouse passar sobre o elemento. A figura 49 mostra a alterao no cdigo da classe e a figura 50 a adio da classe de estilos a cada um dos itens da lista #menu_principal li.fundo_cinza:hover{ background-color:#EEE; }
Figura 49: Exemplo de efeito rollover

<ul id=menu_principal> <li id=atual class=fundo_cinza>Tudo</li> <li class=fundo_cinza>Imagens</li> <li class=fundo_cinza>Mapas</li> <li class=fundo_cinza>Video</li> <li class=fundo_cinza>Notcias</li> <li class=fundo_cinza>Shopping</li> </ul>
Figura 50: Exemplo de aplicao de efeito rollover

40

3.7 MODELANDO LEIAUTES COM COLUNAS A organizao da informao em uma pgina web de extrema importncia para os usurios. por meio desta organizao que as informaes so encontradas facilmente e o usurio se mantm navegando pelos links da pgina. A figura 51 demonstra alguns exemplos de sites que so bastante conhecidos e que fazem uso deste tipo de diviso, tais como Google, UOL, Facebook e Globo.com. Com o uso de colunas possvel manter regies especficas para menus de categorias e menus de acesso aos usurios assinantes, separao da rea de contedos para notcias e publicidade, formulrios para contato e acesso (login), entre outros contedos comuns aos documentos web. Para fazer uso de colunas preciso utilizar a tag <div> juntamente com as regras de estilos CSS. Uma tag <div> utilizada para criar uma diviso em um documento web, facilitando a aplicao de estilos nesta tag para definir tamanhos, cores, bordas ou qualquer outra propriedade disponvel na linguagem CSS.

Figura 51 - Organizao do leiaute em colunas

A figura 52 exibe um exemplo de leiaute contendo trs colunas, uma rea de cabealho e uma rea de rodap.

Figura 52: Leiaute comum com trs colunas

41

O cdigo HTML necessrio para criar estas divises pode utilizar algumas propriedades especficas para posicionamento de elementos, tais como as propriedades float e clear. A propriedade float utilizada para fazer com que os elementos flutuem para a esquerda (left) ou para a direita (right) da pgina, assim o elemento sair do seu local de origem e ocupar uma rea diferente no leiaute. No cdigo de exemplo, as tags <div> que contero o menu, a rea de contedos e a rea de publicidade devem estar uma ao lado da outra. Para que a tag <div> que conter o rodap passe a ocupar novamente todo o espao da prxima linha, a propriedade clear utilizada para limpar os contedos que esto flutuando ao seu redor. O valor both indica que nenhum elemento pode estar flutuando nem esquerda e nem direita. Veja a figura 53. <html> <head> <title>Classes de estilos</title> <style type=text/css> #cabecalho{ width: 1020px; } #menu{ width: 200px; float: left; height: 400px; } #conteudo{ width: 600px; float: left; height: 400px; margin-left: 8px; } #publicidade{ width: 200px; float: left; height: 400px; margin-left: 8px; } #rodape{ width: 1020px; clear: both; } #cabecalho, #rodape, #menu, #conteudo, #publicidade{ border-style: solid; border-color: black; border-width: 1px; margin-top: 10px; margin-bottom: 10px; } </style> </head> <body> <div id=cabecalho>Cabealho</div> <div id=menu>Menu</div> <div id=conteudo>Contedo</div> <div id=publicidade>Publicidade</div> <div id=rodape>Rodap</div> </body> </html>
Figura 53 Exemplo da tag <div>

42

3.8 ATIVIDADES COMENTADAS

5 ATIVIDADE <html> <head> <title>Estilo em CSS</title> <style type=text/css> h1 { font-family: Arial; font-size: 20pt; font-weight: bold; color: red; width: 300px; } p{ font-family: Times New Roman; font-size: 10pt; color: #194C7F; width: 150px; } </style> <h1> MANCHETES DO DIA</h1> </head> <body> <p>Neymar marca, Santos bate Kashiwa por 3 a 1 e vai final do Mundial</p> </body> </html> 6 ATIVIDADE Arquivo: estilos.css h1 { font-family: Arial; font-size: 20pt; font-weight: bold; color: red; width: 300px; } p{ font-family: Times New Roman; font-size: 10pt; color: #194C7F; width: 150px; } Arquivo: pagina.html <html> <head> <title>Estilo em CSS</title> <link href=estilos.css rel=stylesheet type=text/css /> <h1> MANCHETES DO DIA</H1> </head> <body> <p>Neymar marca, Santos bate Kashiwa por 3 a 1 e vai final do Mundial</p> <br>Texto simples sem formatao de pargrafo <p>Neymar: perder horrvel, mas somos mais que vencedores</p> </body> </html>

Mtodo de vinculao incorporado, ou seja, no mesmo arquivo do cdigo HTML. Formatao da tag <h1> usada em cabealhos

Formatao da tag de pargrafos

Utilizao da tag <h1> formatada Utilizao da tag <p> formatada

3.9 EXERCCIOS DE REVISO 1) Implemente uma pgina web que contenha quatro pargrafos, conforme a imagem abaixo.

43

Os pargrafos devero ser configurados com uma largura de 400 pixels, cor de fundo azul #CCF, fonte sans-serif tamanho 14 pixels. O nome da pessoa dever ser o contedo de uma tag <span> configurada com cor azul #06F, negrito e fonte de tamanho 18px. Crie um arquivo externo para configurar as regras de estilos em CSS e crie uma ligao com o documento HTML. 2) Uma pgina dever conter um ttulo e uma listagem de itens, conforme apresentado na imagem abaixo. Desenvolva um documento HTML contendo regras de estilos em CSS em arquivos externos que apresente um documento conforme a imagem ao lado. O cabealho de nvel 1 dever ser formatado com a cor vermelha #C00. A lista no ordenada dever utilizar uma imagem como marcador.

3) A imagem abaixo um fragmento retirado do menu lateral esquerdo do site Orkut. Crie uma lista no ordenada de itens onde cada item uma opo de menu. Esta lista no dever apresentar marcadores. Crie um identificador chamado #menu_principal para configurar a lista no ordenada. Crie um segundo identificador chamado #pagina_atual que seja capaz de estilizar um item, colocando uma borda na esquerda de 4 pixels e a cor do texto em azul. Crie tambm uma classe de estilos chamada .selecao que seja capaz de alterar a cor de fundo para cinza, em cada item da lista, quando o usurio passar o mouse sobre o item. Atualize os valores de padding, margin e border caso seja necessrio.

44

4) Implemente uma pgina contendo um leiaute conforme a imagem abaixo.

PROJETO As etapas anteriores do projeto compreenderam a escolha e elaborao de um texto sobre um tema de sua preferncia, a criao de um link para outra pgina que abordasse o mesmo assunto e a utilizao de tags de formatao. Esta etapa compreende a insero de formulrios, colunas e folhas de estilo no projeto. Verifique a proposta de leiaute a seguir e adapte sua pgina para ficar conforme o modelo. A proposta compreende um CSS para 5 divises da pgina. A primeira foi preenchida por um formulrio que deve conter uma entrada de texto simples e outra para senha, alm de um elemento de seleo e um boto de ao. Um CSS de pargrafo foi usado para obter o efeito da cor azul de fundo. As colunas do centro da pgina possuem respectivamente uma figura repetida vrias vezes, uma coluna com o material produzido nas etapas anteriores do projeto e uma coluna com 3 links em figuras. Cada link leva a uma pgina com tema associado. A identificao das divises usam o mesmo CSS de pargrafo usado anteriormente. A ltima coluna apresenta informaes sobre o site.

45

3.10

ONDE ESTOU? O QUE APRENDI?

Ao trmino do terceiro captulo, como mostra a figura 54, possvel perceber que estrutura e estilo, apesar de serem diferentes, so complementares.

Figura 54: Barra de Progresso

A verificao de exemplos com sites conhecidos como, por exemplo, Google e Orkut, esclarece que o reaproveitamento de regras de estilo, uso de classes e/ou identificadores fundamental para a manuteno dos sites, pois deixa o trabalho mais rpido e fcil. Alm disso, a diviso das pginas em colunas permite que o contedo fique bem distribudo e de agradvel visualizao. No prximo captulo ser apresentada a linguagem Javascript, ela responsvel por validaes na pgina. Mas antes disso voc se sente capaz de responder a algumas perguntas? Pense a respeito do que aprendeu e responda: As atividades propostas esto sendo realizadas sem consulta ao resultado?
( ) Sim, Sozinho ( ) As vezes ( ) Quase sempre ( ) No

Caso a resposta para a questo anterior seja No, a que voc atribui isso? __________________________________________________________________________ __________________________________________________________________________

46

O Projeto proposto no material est sendo desenvolvido?

( ) Sim ( ) Est atrasado, mas estou fazendo ( ) No

Caso a resposta para a questo anterior seja No, falta motivao para faz-lo? __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________

47

Unidade 4
4. INTRODUO A JAVASCRIPT
O Javascript uma linguagem de programao client-side, ou seja, que executa algum tipo de ao do lado do cliente. O Javascript uma linguagem que agrega recursos adicionais a pginas HMTL, baseando-se em scripts interpretados pelos navegadores tornando-as mais dinmicas em tempo de execuo. comum usar arquivos Javascript para fazer validaes, identificar o navegador ou criar cookies. VOC SABE O QUE UM COOKIE? __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ A figura 55 apresenta um exemplo bastante simples da insero de um cdigo Javascript em uma pgina HTML. A tag <script> usada para identificar o incio do script e os colchetes definem um bloco de instrues Javascript. <html> <head> <title>Javascript</title> </head> <body> <script type=text/javascript> { //Comentrio document.write(Ol Mundo!)} </script> </body> </html>

Comentrios podem ser escritos aps a colocao de duas barras

Figura 55: Exemplo de uma pgina HTML com Javascript

Caso seja necessrio realizar operaes algbricas no site, a linguagem Javascript pode ajudar, a figura 56 exibe um exemplo. <html> <head> <title>Javascript</title> </head> <body> <script type=text/javascript> window.alert(20 + 35); </script> </body> </html>
Figura 56: Exemplo de operao algbrica direta

48

Outra forma de calcular valores por meio de variveis. Variveis so declaradas usando a palavra-chave var. O exemplo da figura 57 exibe a mesma soma agora atravs de variveis. <script type=text/javascript> var numUm = 20; var numDois = 35; window.alert(numUm + numDois); </script>
Figura 57: Exemplo de operao algbrica usando variveis

Existem vrios operadores aritmticos em Javascript que podem executar clculos com variveis ou com valores. importante diferenciar um nmero de um caracter. Qualquer valor dentro de aspas duplas considerado caracter e portanto no oferecer resultados confiveis se usados em operaes algbricas. A figura 58 mostra um resultado indesejado para um clculo algbrico. <html> <head> <title>Javascript</title> </head> <body> <script type=text/javascript> window.alert(20 + 35); </script> </body> </html>
Figura 58: Exemplo de resultado duvidoso

comum a utilizao de scripts com formulrios, neste caso os comandos Javascript devero estar entre as tags do formulrio. Em algumas situaes faz-se necessrio transformar caracteres numricos em nmeros passveis de clculo, neste caso preciso usar funes prontas da linguagem especficas para este fim. O exemplo da figura 59 apresenta a funo parseFloat, ela quem transforma o contedo das caixas de entrada de texto do formulrio em nmeros que sero adicionados na funo calcular().

49

<html> <head> <title>Javascript</title> </head> <body> <form name=form1> <script type=text/javascript> function calcular() { var pNum = parseFloat(document.form1.text1. value); var sNum = parseFloat(document.form1.text2. value); window.alert(pNum + sNum); } </script> <p>Primeiro Nmero: <input type=text name=text1/><br/> <p>Segundo Nmero: <input type=text name=text2/><br/><br/> <input type=button value=Calcular onclick=calcular()/> </form> </body> </html>
Figura 59: Exemplo de funo

A funo calcular() no faz parte da linguagem Javascript, uma funo criada pelo desenvolvedor. Uma funo resolve uma tarefa bem especfica e pode ser utilizada vrias vezes. A declarao de uma funo deve compreender a palavra function e a sua identificao acompanhada dos parnteses como, por exemplo, calcular(). Na figura 59 a funo calcular() soma os valores digitados nas caixas de texto aps sua converso para numrico. O resultado exibido somente quando o boto calcular pressionado. A isso chamamos evento, ou seja, na ocorrncia do boto ser clicado (evento onclick) o resultado do clculo ser exibido em uma caixa de dilogo. 7 ATIVIDADE 1. Elabore um cdigo JavaScritp que por meio de uma funo calcule o quadrado de um nmero. Um recurso interessante apresentar textos ou resultados dentro de caixas de dilogo. A figura 60 apresenta uma mensagem dentro de uma caixa de dilogo que desaparece assim que o usurio clicar no boto OK. <html> <head> <title>Javascript</title> </head> <body> <script type=text/javascript> window. alert(Senha ou login invlidos!); </script> </body> </html>
Figura 60: Exemplo de uso de caixas de dilogo

50

Em algumas situaes a caixa de dilogo prev algumas opes como, por exemplo, aceitar uma ao ou cancel-la. A figura 61 apresenta um exemplo em que h dois botes um de Ok e outro de Cancelar. Caso o boto Ok seja pressionado outra caixa de dilogo ir aparecer e exibir a mensagem Voc escolheu Ok!. Caso o boto pressionado seja o Cancel a mensagem que ser exibida ser Voc escolheu Cancel!. <html> <head> <script type=text/javascript> function confirmacao() { var r=confirm(Pressione um boto!); if (r==true) { alert(Voc escolheu OK!); } else { alert(Voc escolheu Cancel!); } } </script> </head> <body> <input type=button onclick=confirmacao() value=Clicar /> </body> </html>
Figura 61: Exemplo de uso controle de deciso

Neste exemplo usado um recurso muito poderoso da linguagem Javascript, o controle de deciso IF. Com este comando possvel escolher um entre dois ou mais caminhos possveis em decorrncia de uma ao ou evento. Se o usurio clicar em OK automaticamente a opo Cancel est descartada, o mesmo acontece com a opo OK caso ele escolha a opo Cancel. comum dizer que as opes de um comando de deciso so mutuamente exclusivas, ou seja, a escolha de uma das opes exclui as demais.

8 ATIVIDADE
1. Elabore um cdigo JavaScritp que pegue a idade de uma pessoa digitada em um formulrio dentro de uma pgina HTML e verifique a maioridade.

51

4.1 ATIVIDADE COMENTADA 7 ATIVIDADE <html> <head> <title>Javascript</title> </head> <body> <form name=form1> <script type=text/javascript> function quadrado() { var num = parseFloat(document.form1. text1.value); window.alert(num * num); } </script> <p>Digite o Nmero: <input type=text name=text1/><br/> <input type=button value=Calcular onclick=quadrado()/> </form> </body> </html>

Funo que calcula o quadrado do nmero informado pelo usurio. Clculo do quadrado

Chamada da funo

8 ATIVIDADE
<html> <head> <h1>Verificao de Maioridade</h1> </head> <body> <script type=text/javascript> function idade() { var idade = parseFloat(document.form1. text1.value); if (idade>=18) { alert(Voc maior de idade!); } else { alert(Voc menor de idade); } }</script> <form name=form1> <p>Digite sua idade: <input type=text name=text1/><br><br> <input type=button value=Verificar Idade onclick=idade()/> </form> </body> </html>

Script que verifica se a idade digitada maior que 18. Funo que altera o valor digitado no campo de entrada para valor numrico.

Chamada da funo

52

4.2 EXERCCIO DE REVISO 1. Elabore um Javascript que dentro de uma funo verifique a senha do usurio. Caso a senha digitada seja igual a 123456 apresente uma mensagem com a seguinte frase Esta senha muito fcil. Caso contrrio informe Senha Vlida. PROJETO Insira no projeto uma verificao na senha informada e no tipo de usurio escolhido. Veja na tabela qual deve ser a senha para cada tipo de usurio e a mensagem que deve ser exibida caso a senha e o tipo do usurio estiver correto. Tipo de Usurio Senha Mensagem Internauta teste Bem-vindo Internauta!!! Administrador admin Bem-vindo Administrador!!! Curioso Bem-vindo Curioso!!! No caso do usurio do tipo Curioso nenhuma senha deve ser digitada, ou seja, garanta que neste caso o campo senha s ser vlido ser for um campo em branco. Configure o seletor de forma que haja um Tipo de Usurio padro em branco, veja a figura. Desta forma, caso o usurio no selecione nenhum Tipo de Usurio dever ser informada a mensagem Escolha o seu tipo de usurio!!! Qualquer senha informada que seja diferente das combinaes acima dever ocasionar a apario da mensagem Senha Incorreta. Tente Novamente!!!

4.3 ONDE ESTOU? O QUE APRENDI? O quarto captulo mostrou como possvel fazer pequenas validaes no prprio site, sem precisar trocar informaes com servidores, este tipo de programao limitado e serve para fins bem especficos. A figura 62 mostra mais um avano com o que se aprendeu at agora possvel compor sites bem estruturados, estilosos e dotados de certa dinmica.

Figura 62: Barra de Progresso

53

No prximo captulo ser apresentado o tratamento de imagens. Mas antes disso voc se sente capaz de responder a algumas perguntas? Pense a respeito do seu comprometimento com o curso e assinale a careta mais apropriada:

Critrios Assiduidade (comparecimento s aulas) Pontualidade (respeito aos horrios de incio e trmino) Comportamento Empenho (dedicao) Respeito Participao oral Autonomia Apresentao do material durante as aulas Realizao do Projeto Voc acha que est sendo um bom aluno? Por qu? __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ Em que pontos acha que deve melhorar? Por qu? __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________

54

Unidade 5
5. IMAGENS
A utilizao de imagens na web permite maior riqueza de detalhes na apresentao do contedo, melhorando inclusive a navegabilidade das pginas. Por vezes a matria prima, ou seja, a imagem pode ser criada ou melhorada, sendo necessria a utilizao de softwares para edio/tratamento de imagem. Tratar a imagem significa corrigir, retocar ou remover imperfeies. Existem muitos programas que se propem a essa tarefa, tais como: Adobe Photoshop, GIMP, Corel Photo-Paint, entre outros. Antes de usar qualquer imagem importante verificar se a mesma de domnio pblico ou se possui licena. Por domnio pblico entende-se que a imagem pode ser usada livremente. Se ela possuir licena, verifique o tipo da licena, somente respeitando tais regras ser possvel exib-la, deriv-la, de forma completa ou parcial, quer seja para fins comerciais ou no. Conhea em detalhes a Lei 9610/98 principalmente o artigo 79 que fala especificamente sobre a utilizao de obra fotogrfica. 5.1 ADOBE PHOTOSHOP O Adobe Photoshop um programa utilizado para edio de imagens. Proporciona um ambiente produtivo para os designers profissionais criarem imagens sofisticadas para impresso e web. Os elementos grficos da web podem ser divididos em duas categorias principais: bitmap e vetor. Imagens bitmap utilizam uma grade de cores conhecidas como pixels para representar imagens. Podem perder detalhes com uma resoluo mais baixa do que a resoluo para a qual foram criadas. Imagens vetoriais so formadas por linhas e curvas definidas por objetos matemticos chamados de vetores. So independentes de resoluo, sendo a melhor opo para representar grficos em negrito que devem manter linhas ntidas, como o caso dos logotipos. Dois formatos de imagem bastante utilizados na web so o JPEG e o GIF. O JPEG possui boa resoluo e a principal vantagem a compactao do tamanho do arquivo. O GIF possui boa resoluo para as pginas da Internet. Tratase de um formato compactado que preserva a transparncia em imagens. A figura 63 mostra a rea de trabalho e alguns elementos bsicos do Adobe Photoshop CS3, verso de teste, usada como demonstrao neste material.

55

Figura 63: rea de Trabalho do Photoshop

Na Barra de Opes so apresentadas as configuraes das ferramentas. A Caixa de Ferramentas possui diversos recursos. Inclui ferramentas para criar e editar imagens, campos para registrar cores, alternar modos de visualizao, acesso a recursos on-line entre outras coisas. As Paletas ou Janelas ajudam a monitorar e modificar as imagens. Por padro as paletas so exibidas empilhadas em grupos. UM EXEMPLO DE TRATAMENTO DE IMAGEM.... Para ilustrar a utilizao de ferramenta ser aplicado o elemento Lata de Tinta em uma imagem preta e branca (figura livre). A figura 64a apresenta a imagem em preto e branco e a figura 64b apresenta a mesma imagem colorida.

Figura 64a: Imagem Preta e Branca

Figura 64b: Imagem Colorida utilizando a ferramenta Lata de Tinta

56

Para conseguir esse resultado clique na ferramenta Lata de Tinta na Caixa de Ferramentas, escolha a cor desejada clicando com o boto direito na cor de primeiro plano. Escolha as cores que desejar e use sua criatividade, a caixa de ferramentas possui outras opes tente us-las e verifique o resultado na imagem. 5.1.1 MATIZ E SATURAO Outra funo comum ao se trabalhar com cores diz respeito ao comando matiz/saturao que permite tratar as cores de uma imagem ou apenas de uma rea selecionada. Para abrir a janela que permite a configurao, acesse o menu Imagem > Ajustes > Matiz/Saturao, figura 65.

Figura 65: Janela para alterar a matiz e a saturao

A opo matiz altera a cor propriamente dita. Saturao corresponde ao grau de pureza da cor. A luminosidade corresponde ao grau de luz da matiz. Para alterar as cores de uma imagem faa as etapas a seguir: 1. Abra uma imagem preta e branca (figura 66a); 2. Se desejar centralize a imagem na tela pressione a tecla F; 3. Selecione a rea a ser colorida por meio das ferramentas de seleo; 4. Aplique difuso, acessando o menu Selecionar > Difuso (Ctrl + Alt + D); 5. Altere matiz e saturao ou pressione Ctrl + B para escolher a cor (figura 66b).

Figura 66a Imagem preta e branca

Figura 66b Alterando a cor dos olhos

57

5.1.2 FILTROS O Adobe Photoshop rico em filtros. Os filtros facilitam o ajuste da imagem como, por exemplo, os filtros Mscara de Nitidez, Poeira e Rabiscos, entre outros. O filtro Mscara de Nitidez corrige o desfoque produzido pela deficincia de determinados equipamentos acessado atravs do Menu Filtro > Tornar Ntido > Mscara de Nitidez. Coloque um valor maior para a opo raio, para ajustar a nitidez de uma banda mais larga de pixels, como na figura 67. O filtro Poeira e Rabiscos utilizado para eliminar sujeiras da imagem, est disponvel em Filtro > Rudo > Poeira e Rabiscos veja em detalhes a figura 68.

Figura 67: Filtro Mscara de Nitidez

Figura 68: Filtro Poeira e Rabiscos

Os filtros de Desfoque, acessados pelo menu Filtro > Desfoque, suavizam os pixels da rea selecionada. So teis nos retoques, principalmente na montagem ou restaurao de fotos. Outros filtros podero ser aplicados, dependendo do estado da imagem e do efeito que o designer pretende obter. 9 ATIVIDADE Utilizando a ferramenta que desejar crie um banner para o Curso de Web Design.Veja o modelo na figura.

5.2 ATIVIDADES COMENTADAS 9 ATIVIDADE Crie um arquivo de 468x60 pixels, com fundo branco; Utilize a logo do IFPR para a produo do banner;

58

Dica: abra a logo em outro arquivo, selecione, escolha a opo copiar e no arquivo do banner clicar na opo colar; Pressione Ctrl + T para habilitar as opes de transformao na imagem e, aps, segure o Shift e clique e arraste para a diagonal, aumentando o tamanho. Diminua a opacidade, na paleta Camadas, para que se torne uma imagem de fundo; Adicione novamente o logo, posicionando-o no canto esquerdo do banner, e adicione os textos necessrios, formatando-os. 5.3 EXERCCIOS DE REVISO 1) Crie um banner para uma empresa que voc conhece. 5.4 ONDE ESTOU? O QUE APRENDI? Este captulo, que acrescenta mais um nmero na barra de progresso da figura 69, apresentou resumidamente algumas ferramentas de tratamento de imagem. comum usar esse subterfgio quando a imagem que se pretende utilizar no est a contento.

Figura 69: Barra de Progresso

O assunto do prximo captulo animao. Mas antes disso voc se sente capaz de responder a algumas perguntas? Reflita e responda: Aps responder ao questionrio do captulo 4 voc mudou seu comportamento? __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ Ainda acredita que h pontos a serem melhorados? Quais? __________________________________________________________________________ __________________________________________________________________________ __________________________________________________________________________ Agora que conhece um pouco mais da profisso acredita que ela se encaixa em seu perfil? __________________________________________________________________________ __________________________________________________________________________

59

Unidade 6
6. ANIMAO
Outro recurso bastante explorado na web a animao. A animao nasceu com o cinema e foi se adaptando para vrias plataformas diferentes, com a web no poderia ser diferente. Existem vrios programas que fazem animao, como, por exemplo, o Adobe Flash, Anime Studio, Pencil, e existem tambm as opes para animao em 3D como, por exemplo, o 3D Canvas, 3D Flash Animator, 3D Studio Max, entre outros. 6.1 ADOBE FLASH O Adobe Flash um programa que cria animaes multimdia, incluindo sons, imagens, vdeos e outros recursos. Esta ferramenta muita utilizada para a criao de animaes nas pginas da web. A figura 70 mostra a rea de trabalho e alguns elementos bsicos do Adobe Flash Professional CS5.5, verso de teste, usada para demonstrao neste material.

Figura 70: rea de Trabalho do Flash

O Palco o local onde ser colocado todo o contedo da animao. Os painis possuem as mais variadas funcionalidades: cores, alinhamento, bibliotecas, propriedades, componentes. A Linha do Tempo ( Timeline ) controla a animao, ajudando a organizar o contedo do palco. Todas as ferramentas necessrias para a criao de grficos esto localizadas na Caixa de Ferramentas. 6.1.1 LINHA DO TEMPO A Linha do Tempo mostra a animao de forma esquemtica. dividida em vrios retngulos denominados frames (quadros). Para que se tenha a iluso de movimento necessrio colocar os desenhos nos frames, um aps o outro.

60

A Linha do Tempo tambm trabalha com camadas (layers). Isto significa que cada elemento da animao ser trabalhado de forma independente, em uma camada diferente. O Keyframe (quadro-chave) define a alterao do contedo de um quadro durante a animao. Utilizando keyframes, podem-se alterar elementos ou mov-los, apenas indicando a situao inicial e final. O Adobe Flash produzir os quadros intermedirios. Para inserir um quadro-chave acesse o menu Inserir > Linha do Tempo > Quadro-chave. 6.1.2 BIBLIOTECA DE SMBOLOS (LIBRARY) O Flash trabalha com smbolos, que podem ser Graphics, Movie Clips ou Buttons. Os smbolos so elementos especiais, geralmente criados a partir de grficos vetoriais ou bitmaps, permitindo a aplicao de efeitos visuais nos desenhos a partir dos quais foram criados efeitos de cor, transparncia, animaes independentes, interatividade e outros. O objetivo deles facilitar a animao e alguns ajustes necessrios em seu trabalho. Por isso, uma das regras que devem ser seguidas a de transformar tudo o que for produzido em algum tipo de smbolo. Para isto, basta selecionar o que deseja transformar, pressionar F8 e, na janela exibida, atribuir um nome a ele e escolher um dos tipos de smbolo. Eis a descrio dos trs tipos de smbolos: Graphic: melhor opo para animao, por reproduzir em tempo real seu contedo interno; Movie Clip: fundamental na criao de contedos interativos, por suportar a linguagem de programao do Flash (ActionScript); Button: usado para a criao de botes interativos. 6.1.3 CAIXA DE FERRAMENTAS Na janela Tools (Caixa de Ferramentas) encontram-se todas as ferramentas necessrias para a criao de imagens e grficos. Quando selecionamos uma ferramenta, o painel propriedades exibe as opes de configurao que esto disponveis para a ferramenta selecionada e o painel colors (cores) exibe as opes de cores disponveis. Existem ferramentas como retngulo, linha, oval, de seleo, lpis e pincel, borracha, balde de tinta, lao, conta-gotas e texto, tambm presentes em editores de imagens e softwares de animao. Um exemplo de animao com movimento automtico...

61

Para ilustrar a confeco de uma animao usando o Adobe Flash possvel usar a funo Motion Tween. Essa funo realiza a movimentao automtica de um elemento entre dois keyframes, o que tambm chamado de interpolao de movimento. S possvel us-lo convertendo o elemento a ser animado em um dos tipos de smbolo: Graphic, Movie ou Button. Importe uma imagem para dentro da ferramenta pressionando as teclas Ctrl + R, escolha uma imagem com formato JPEG ou GIF, veja um exemplo na figura 71.

Figura 71: Inserindo um personagem para animao

Converta-o em smbolo teclando F8 e atribua um nome a ele. Para fazer o personagem correr de um lado para o outro clique no frame 30, pressione F6 para criar um keyframe e arraste o personagem para a direita, veja a figura 72.

Figura 72:Delimitando o trajeto inicial e final

62

Clique com o boto direito do mouse em qualquer frame entre os keyframes 1 e 30 e escolha a opo Criar Interpolao Clssica (Create Motion Tween). Uma linha contnua aparecer e os frames entre eles ficaro em um tom de azul claro, indicando que a animao foi criada de forma correta. Pressione Ctrl + Enter para gerar a pr-visualizao da sua animao. UM EXEMPLO DE ANIMAO COM MOVIMENTO GUIADO... A Linha-Guia (Motion Guide) guia um smbolo por um trajeto determinado. Ela pode ser feita usando qualquer ferramenta de criao como, por exemplo, o Brush (tecla B), mas prefervel usar linhas com espessura Hairline, pois assim fcil verificar por onde o smbolo caminhar. Para o exemplo a seguir coloca-se uma imagem de fundo e uma bolinha vermelha. A animao consiste em fazer a bolinha vermelha descer e subir o morro, conforme a figura 73.

Figura 73: Bolinha posicionada na cena para descer e subir o morro

Na cena obtm-se duas camadas, uma com o cenrio e outra com a bolinha. Para inserir camadas, acesse o menu Inserir > Linha do Tempo > Camada. possvel renomear a camada clicando com o boto direito do mouse sobre a mesma, acessando a opo propriedades. Procure criar cada elemento do cenrio em uma camada diferente. Crie mais uma camada, nomeie-a como Guia e posicione-a acima da camada em que est a bolinha. Nesta camada, use a ferramenta Pencil (tecla Y) ou Line (tecla N) e desenhe o caminho que o personagem deve seguir, iniciando o desenho em seu centro e seguindo a forma do morro at chegar ao outro lado algo semelhante figura 74.

63

Figura 74: Desenho da linha-guia

No frame 60 de cada camada, pressione F5 para adicionar frames e, na camada Bola, pressione tambm F6 para criar um keyframe. Nesse keyframe, posicione a bolinha no final da linha guia desenhada, certificando-se de que o centro do personagem esteja perfeitamente alinhado ao final da linha. Crie uma interpolao clssica usando o Motion Tween entre o Keyframe 1 e 60 (clique com o boto direito do mouse entre os dois keyframes e opte por Criar Interpolao Clssica) e gere a visualizao da animao Ctrl + Enter. A bolinha ainda no est seguindo a linha, para isso transforme sua camada em camada-guia, para que ela possa influenciar o movimento do smbolo. Para isso, clique com o boto direito sobre o nome da camada e selecione a opo Guide. O cone mudar para uma pequena rgua T, mas ainda no est pronto. preciso vincular a camada que deve usar a linha-guia, clique na camada da bolinha, arraste-a s um pouquinho para cima e para a direita, at ver o cone da camada-guia escurecer, e solte-a. O cone Guia muda de uma rgua T para uma bolinha seguindo uma guia pontilhada. Em seguida, faa o ajuste fino da posio inicial e final do smbolo utilizando o zoom, de modo que a linha saia exatamente do ponto central do smbolo.

64

10 ATIVIDADE Crie um banner para o Instituto Federal do Paran (IFPR), utilizando a logo em uma camada e a bolinha do i (acento) em outra, de modos que a bolinha pingue no palco at posicionar-se acima do i. 6.2 PUBLICAO A forma mais simples de gerar um arquivo final de sua animao em SWF se resume a pressionar Ctrl + Enter. Por padro, na mesma pasta onde est salvo o arquivo FLA ser gerado um arquivo de mesmo nome, mas com extenso SWF. Basta dar um duplo clique nele para assisti-lo, ou usar algum editor de HTML para inclu-lo dentro do site. Outros formatos de vdeo tambm so comuns na web como o AVI e o MPEG, qualquer um deles pode ser inserido em um documento HTML, mas para serem visualizados podem precisar de players (tocadores) especficos. 6.3 ATIVIDADE COMENTADA 10 ATIVIDADE Importe o arquivo de imagem de acordo com a figura a seguir. Em propriedades do palco, configure o tamanho para 550 X 130.

Figura 75: Banner do IFPR posicionado no palco

Converta em smbolo, exclua a bolinha do i (acento), clicando com o boto direito do mouse na imagem e selecionando a opo separar. Utilize a borracha para apagar o acento do i (bolinha vermelha). Crie outra camada para colocar a bolinha vermelha e converta-a em smbolo. Posicione a bolinha no canto inferior direito, fora da rea visvel do palco como na figura 76. Crie outra camada e desenhe o caminho a ser percorrido pela bolinha. Configure-a como guia, clicando com o boto direito do mouse sobre ela, acessando a opo guia, assim como a figura 77.

65

Figura 76: Bolinha posicionada no canto inferior esquerdo

Figura 77: Caminho a ser percorrido pela bolinha vermelha

No frame 30 de cada camada, pressione F5 para adicionar frames e, na camada da bolinha, pressione tambm F6 para criar um keyframe. Nesse keyframe, posicione a bolinha acima do i, certificando-se de que o centro da bolinha esteja perfeitamente alinhado ao final da linha. Crie uma interpolao clssica (Motion Tween) entre o Keyframe 1 e 30, clicando com o boto direito do mouse entre os dois keyframes e escolha a opo Criar Interpolao Clssica e gere a visualizao da animao Ctrl + Enter. preciso vincular a camada que deve usar a linha-guia, nesse caso, a camada da bolinha. Ento, clique na camada da bolinha, arraste-a s um pouquinho para cima e para a direita, at ver o cone da camada-guia escurecer, e solte-a. Para que a animao seja executada apenas uma vez, clique no ltimo frame da camada da bolinha, clique com o boto direito do mouse sobre o frame e acesse a opo aes. Insira no editor que aparecer a seguinte linha de cdigo: gotoAndStop(30). 6.4 EXERCCIOS DE REVISO Crie o banner exibido na imagem 78, permitindo que ele alterne entre os dois produtos, bola e o violo. Utilize o efeito Motion Tween para que um produto saia do palco e o outro da figura 79 possa aparecer.

Figura 78 Banner da bola

Figura 79 Banner do violo

66

6.5 ONDE ESTOU? O QUE APRENDI? Este captulo enfocou duas formas diferentes de fazer animao, ambas sem muitas dificuldades. Ao trmino desta etapa a barra de progresso andou mais um pouco conforme a figura 80. O prximo captulo apresenta uma concluso do que foi apresentado at aqui.

Figura 80: Barra de Progresso

Ainda na concluso possvel conhecer outros aspectos que fazem parte da profisso de webdesigner. Mas antes disso voc se sente capaz de responder a algumas perguntas? Reflita sobre o que viveu at agora e responda: Voc j pesquisou sobre o salrio de um webdesigner? J verificou se na sua regio h ofertas de emprego? __________________________________________________________________________ __________________________________________________________________________ Quais os seus pontos fortes e fracos para atuar nessa profisso? __________________________________________________________________________ __________________________________________________________________________ O que mais necessrio estudar para obter sucesso nessa profisso? __________________________________________________________________________ __________________________________________________________________________

67

Unidade 7
7 CONCLUSO A profisso de webdesigner envolve os conhecimentos tcnicos abordados neste material, alm, claro, de muitos outros detalhes que por questo de espao no foram abordados. Atuar nesta rea exige competncia tcnica, gosto harmonioso, perseverana e dedicao, tudo isso para imprimir qualidade visual em sites pessoais, empresariais, organizacionais, lojas virtuais, sites promocionais, etc. Ainda necessrio saber que existem duas formas de hospedar um site, hospedagem prpria ou contratada. No primeiro caso todos os hardwares e softwares, alm da manuteno do site ficam a cargo do desenvolvedor. A segunda opo envolve contratar um servio terceirizado que se responsabilize por tudo, como empresas como a Locaweb (http://www. locaweb.com.br), Hotel da Web (www.hoteldaweb.com.br), Hostnet (www.hostnet.com.br), Uolhost (http://www.uolhost.com.br), entre outras opes. Neste caso o prestador de servio, entre outras coisas, se responsabiliza por hospedar o site, oferecer espao em disco para armazenamento de informaes e disponibilizar servios essenciais como, por exemplo, servio de e-mail e troca de arquivos. Para chegar at o stimo captulo, como mostra a seta da barra de progresso da figura 81, vrios assuntos foram abordados. Os captulos sobre HTML, CSS e Javascript foram um pouco mais detalhados pois dizem respeito a estruturao, estilo, interatividade e validao de pginas. Os captulos sobre tratamento de imagem, autoria em multimdia e animao foram superficiais, pois tais ferramentas so muito poderosas e comportam um material especfico, os exemplos serviram somente para ilustrar algumas aes que podem ser feitas com os softwares citados. Os softwares usados nas demonstraes so apenas algumas das possibilidades disponveis no mercado. Aps um tempo na profisso, o webdesigner vai tendo contato com vrios programas e vai escolhendo quele que mais atende ao seu gosto ou sua necessidade.

Figura 81: Barra de Progresso

importante ressaltar que existem questes que ultrapassam os conhecimentos tcnicos quando se desenvolve sites, muitos conceitos como usabilidade e acessibilidade devem ser obrigatoriamente considerados durante a atuao profissional do webdesigner. A usabilidade relaciona-se com tornar a experincia de navegar mais fcil e intuitiva, isso aparentemente fcil, mas no se engane, a web para todos e isso inclui pessoas com diferentes graus de necessidades, tipos de usurios, resolues de vdeo, navegadores e plataformas computacionais como, por exemplo, celulares, smartphones, tablets entre outros.

68

Para garantir que todas as pessoas, independente de seus equipamentos ou de suas condies fsicas, possam navegar satisfatoriamente nos seus sites siga as recomendaes da W3C como, por exemplo, coloque legendas ou descries em todas as imagens, garanta que o texto possa ser ampliado, ajustando-se ao tamanho da janela. Coloque nomes nos elementos dos formulrios, permita o uso do teclado para auxiliar na navegao, esteja facilmente disponvel e submeta o site a anlise da acessibilidade. So exemplos de cuidados simples que podem ser validados em http://validator.w3.org ou http://www.dasilva.org.br. Outra questo importante com combinao das cores usadas na confeco de um site, h um tema de estudo nessa rea chamado de Teoria das Cores proposta por Leonardo da Vinci, que tem sido aplicado tambm na elaborao de sites. H cores primrias e secundrias. As cores primrias so as cores puras, ou seja, que no podem ser obtidas por nenhuma mistura, so elas azul, amarelo e vermelho. As cores secundrias so originadas da mistura das cores primrias. Se o interesse oferecer uma pgina contrastante possvel utilizar cores complementares que impactam na visualizao, como no caso do azul e do amarelo. Se o desejo for pela uniformidade ou elegncia o uso de cores anlogas, ou seja, que possuem a mesma cor bsica, deve ser adotada. Alguns sites na web como, por exemplo, http://colorsontheweb.com/ colorwizard.asp podem ajudar um webdesigner a pesquisar e escolher as cores apropriadas para seus projetos. As questes tcnicas aliadas usabilidade e acessibilidade, escolha e disposio/ cor dos elementos, alm do respeito ao direito de imagem, devem permear todos os projetos que um webdesigner desenvolver. Assim ser possvel aproveitar oportunidades de emprego em agncias de comunicao, publicidade, jornais ou em iniciativas pblicas ou privadas na criao grfica e visual de logomarcas ou sites.

69

8 BIBLIOGRAFIA
FREEMAN, E. Use a cabea HTML com CSS e XHTML. Rio de Janeiro: Alta Books, 2008. PIOLOGO, R. Flash Animado com os Irmos Piologo. So Paulo: Novatec, 2009. www.w3c.br/Home/WebHome. Acesso em: 28 dez. 2011. www.acessibilidade.org.br. Acesso em: 29 dez. 2011. www.acessibilidade.net. Acesso em: 03 jan. 2012. www.w3schools.com. Acesso em: 04 jan. 2012. www.adobe.com. Acesso em: 10 jan. 2012.

70

71