Auxiliar em Web Design PDF

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
Pr-Reitor de Extenso, Pesquisa e Inovao

Silvestre Labiak Junior
Organizao
Marcos Jos Barros
Cristiane Ribeiro da Silva
Projeto Grfico
Leonardo Bettinelli
Diagramao
Allan Vitikaski
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 dispo-
nveis 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 servi-
dores que podem estar bem distantes. Servidores so computadores que atendem as so-
licitaes 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. Objetivos......................................................................................................... 10
1.1 Organizao.......................................................................................................10
1.2 Sobre o material.................................................................................................10
1.3 Onde estou? O que aprendi?.............................................................................11
Unidade 2
2. HTML.................................................................................................................12
2.1 Como posso escrever pginas em HTML?.......................................................12
2.2 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 Atividades Comentadas.....................................................................................24
2.4 Exerccios de Reviso.......................................................................................26
Unidade 3
3. CSS...................................................................................................................29
3.1 Mtodos de vinculao......................................................................................30

3.2 Criando estilos para formatar textos..................................................................32
3.3 Formatando o background.................................................................................33
3.4 Formatando listas ordenadas e listas com marcadores....................................34
3.5 Modelo em Caixa...............................................................................................35
3.6 Criando classes de estilos e identificadores......................................................37
3.7 Modelando leiautes com colunas.......................................................................41
3.8 Atividades Comentadas......................................................................................43
3.9 Exerccios de Reviso........................................................................................43
Unidade 4
4 Introduo a JavaScript..................................................................................48
4.1 Atividades Comentadas.....................................................................................52
Unidade 5
5 Imagens..............................................................................................................55
5.1 Adobe Photoshop...............................................................................................55
5.1.1 Matiz e Saturao..............................................................................................57
5.1.2 Filtros..................................................................................................................58
5.2 Atividades Comentadas......................................................................................58
5.3 Exerccios de Reviso.........................................................................................59
Unidade 6
6 Animao..........................................................................................................60
6.1 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 Publicao..........................................................................................................65
6.3 Atividade Comentada.........................................................................................65
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 carac-
tersticas 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 ativida-
des 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 co-

mentrios 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 cap-
tulo, 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 ma-
terial 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 mar-

cao 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 Propsito
<html> Inicia o documento
<head> Inicia o cabealho da pgina
<title> Define o ttulo do documento
</title> Finaliza o ttulo
</head> Finaliza o cabealho da pgina
<body> Inicia o corpo ou contedo da pgina
</body> Finaliza o corpo da pgina
</html> 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 alte-
rao 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 infor-
mao 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>
</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 incorre-
tamente os acentos podero aparecer de forma incorreta, como caracteres estranhos.
Existem outros detalhamentos desta tag, como os atributos keywords, descrip-

tion 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
<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 que-
bra de linha onde for colocada. Veja o exemplo da figura 09.
15
<html>
<head>
<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>
<h1>Tags de formatao</h1>
</head>
<body>

<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<sub>Subscrito</sub></p>
<p>Texto<sup>Sobrescrito</sup></p>
</body>
</html>
Figura 10: Exemplo de tags de formatao
16
Alm disso, atributos de alinhamento podem ser inseridos para que o texto fique di-
reita, ao centro ou esquerda da pgina. Veja o cdigo na figura 11 e a visualizao na figura 12.
<html>
<head> Lembrete
<title>Ttulo da pgina</title> Left = esquerda
<h1>Tags de Alinhamento</h1> Center = centralizado
</head> Right = direita
<body>
<p align=left>Texto esquerda</p>
<p align=center>Texto Centralizado</p>
<p align=right>Texto direita</i></p>
</body>
</html>
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>
<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>
<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 conte-
dos, 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>
<h1>Tags de Imagens</h1> Nome do arquivo: html.jpg
</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 redi-
recionado 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, cabe-
alhos, 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>
<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>
<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>
<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 identifica-
das 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 ele-

mentos 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 for-
mulrio, 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 formu-
lrio. 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>
<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 visua-
lizao 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>
<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> Lembrete
<title>Ttulo da pgina</title> Cols = colunas
<h1>Tag de Formulrio</h1> Rows = linhas
</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
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> re-
fletida 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 atri-
buto padro da tag <body> para <body
bgcolor=yellow>.
24
3 ATIVIDADE
<html>
<head> Meta tag que identifica o tipo e o conjunto de
<meta http-equiv=Content-Type caracteres.
content=text/html; charset=ISO-8859-1>
<meta http-equiv=content-language Identificao do idioma.
content=pt-br>
<meta name=author
content=Daniela Flor> Identificao da autoria do site.
<meta name=description
content=Introducao ao HTML> Identificao da descrio e de palavras-
<meta name=keywords chave.
content=html, HTML, site, sites>
<h1>Introduo ao HTML</h1>
</head>
<body>
Conceitos introdutrios de HTML.
</body>
</html>
4 ATIVIDADE
<html>
<head>
<h1>Exerccio</h1>
</head>
<body>
<table border=2 > Definio da tabela
<tr> <td> Criao da primeira linha/coluna
<ol type = a > Definio da lista ordenada
<li><a href=http://www.educacional.com.
br>Educao</a></li>
Itens da lista
ordenada
<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> Fim da primeira linha/coluna
Incio da segunda linha/coluna
<tr> <td>
<ul> Definio da lista desordenada
<li><a href=http://www.w3schools.com/html/default.
desordenada
Itens da lista
asp>HTML</a></li>
<li><a href=http://www.w3schools.com/css/>CSS</
a></li>
</ul>
</td> </tr> Fim da segunda linha/coluna
</table> Fim da tabela
</body>
</html>
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 Irmos Cores Favoritas

Joo Silva Joo Silva Jr. 1. Preto
Maria Silva Maria Aparecida Silva 2. Branco
Jos Silva 3. Cinza
3) Faa uma pgina com tabelas exatamente como as do exemplo a seguir.
Computador Preo Jogo Ano de Lanamento

Memria 256 23,00 Doom 1999
IID 200Gb 150,00 CS 2006
Processador 230,00 Quake 2001
Total
4) Faa uma pgina com o seguinte formulrio:
26
5) Faa uma pgina com o seguinte formulrio:
Ao final deste captulo importante entender que a linguagem HTML consolida a es-
trutura 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 es-
trutura 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 con-
tero as informaes das pginas. A formatao visual o objetivo da linguagem CSS (Cas-
cading 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 pgi-
nas. 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 pa-
rgrafos contendo a fonte Times New Roman, no tamanho 16, com a cor vermelha, no estilo it-
lico. 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 dife-
rentes 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 se-
ro 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. For-
mate usando CSS nas tags <h1> e <p>. Na
tag <h1> que foi usada na frase MANCHE-
TES 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 vincula-
o 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 Arquivo: pagina.html

p{ <html>
font-family: Arial; <head>
font-size: 20pt; <title>Estilo em CSS</title>
font-weight: bold; <link href=estilos.css rel=stylesheet
color: #194C7F; type=text/css />
width: 300px; </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, verme-
lho e largura de 300 px. Na tag dos pargrafos uti-
lize 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 Descrio Valores Exemplo

font-family Configura a tipografia Serif p{
dos textos Sans-serif font-family: verdana;
Cursive
}
Fantasy
Monospace
Verdana
Arial
etc.
font-size Configura o tamanho Uma unidade de a{
das letras medida utilizada
pela linguagem font-size: 14px;
CSS (px, pt, em, }
cm, in, mm, pc)
font-style Utilizada para deixar normal li {
as letras em itlico font-style: italic;
italic
}
font-weight Utilizada para deixar normal body{
as letras em negrito font-weight: bold;
bold
}
text-align Configura o alinha- left h1{
mento horizontal do right text-align: center;
texto center
}
justify
text-decoration Configura o estilo de none span{
sublinhado do texto underline text-decoration: line-
overline -through;
line-through }
color Configura a cor do Nome da cor (red, b{
green, blue, etc.)
texto color: #C33;
Valor em hexadeci-
mal (#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>
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 conte-
dos presentes em uma pgina. Pode-se inclusive colocar uma imagem de fundo nos elemen-
tos 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- Configura a forma que repeat div{
uma imagem ser repeti-
-repeat da no fundo dos elemen- repeat-x background-image:
tos url(fundo.gif);
repeat-y
background-repeat:
no-repeat repeat-x;
}
background- Configura a posio Comprimento body{
(horizontal e vertical) de (cm, pt, px, etc)
-position background-image:
uma imagem de fundo
em um elemento top, bottom, left, url(fig.jpg);
right, center
background-repeat:
no-repeat;
background-position:
center center;
}
Tabela 4: Principais atributos para estilizao de background
Como exemplo da formatao de fundo para os elementos do documento HTML con-

sidere 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>
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 for-
matao 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 ro-
manos, gregos, letras maisculas ou minsculas, entre outros. A figura 37 apresenta algumas
alternativas para estilizao de listas.
<ol> <ul>
<li>Carros</li> <li>Carros</li>
<li>Cincia e sade</li> <li>Cincia e sade</li>
<li>Cotidiano</li> <li>Cotidiano</li>
<li>Economia</li> <li>Economia</li>
</ol> </ul>
Elemento <ol> sem estilizao (decimal) Elemento <ul> sem estilizao (disc)
ol{ ul{
list-style-type: lower-alpha; list-style-type: circle;
} }
Estilos: lower-alpha e upper-alpha 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 se-
para 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, es-
querdo e direito de forma individual pode-se utilizar as propriedades da tabela 6.
Padding Margem
padding-bottom margin-bottom
padding-top margin-top
padding-left margin-left
padding-right 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>
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, ima-
gine 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 espec-

ficos 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;
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 atribu-
to 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 identifi-
cador 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 apre-

sentado 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 identifi-
cador 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 cha-
mada fundo_cinza.
39
<html>
<head>
<title>Classes de estilos</title>
#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 Goo-
gle, UOL, Facebook e Globo.com.
Com o uso de colunas possvel manter regies especficas para menus de catego-
rias e menus de acesso aos usurios assinantes, separao da rea de contedos para not-
cias 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, facili-
tando 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 cabea-
lho e uma rea de rodap.
Figura 52: Leiaute comum com trs colunas
41
O cdigo HTML necessrio para criar estas divises pode utilizar algumas proprie-
dades 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 es-
querda (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 flu-
tuando 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>
#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
5 ATIVIDADE
<html>
<head>
<title>Estilo em CSS</title> Mtodo de vinculao incorporado, ou
<style type=text/css> seja, no mesmo arquivo do cdigo HTML.
h1 {
font-family: Arial;
font-size: 20pt;
font-weight: bold; Formatao da tag <h1> usada em ca-
color: red; bealhos
width: 300px;
}
p{
font-size: 10pt;
color: #194C7F; Formatao da tag de pargrafos
width: 150px;
}
</style>
<h1> MANCHETES DO DIA</h1>
</head> Utilizao da tag <h1> formatada
<body>
<p>Neymar marca, Santos bate Kashiwa
por 3 a 1 e vai final do Mundial</p> Utilizao da tag <p> formatada
</body>
</html>
6 ATIVIDADE
Arquivo: estilos.css Arquivo: pagina.html
h1 { <html>
font-family: Arial; <head>
font-size: 20pt; <title>Estilo em CSS</title>
font-weight: bold; <link href=estilos.css
color: red; rel=stylesheet
width: 300px; type=text/css />
} <h1> MANCHETES DO DIA</H1>
p{ </head>
font-family: Times New Roman; <body>
font-size: 10pt; <p>Neymar marca, Santos bate Kashiwa
color: #194C7F; por 3 a 1 e vai final do Mundial</p>
width: 150px; <br>Texto simples sem formatao de pargrafo
} <p>Neymar: perder horrvel,
mas somos mais que vencedores</p>
</body>
</html>
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 re-
gras de estilos em CSS em arquivos externos
que apresente um documento conforme a ima-
gem 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_prin-

cipal para configurar a lista no ordena-
da. 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 cin-
za, em cada item da lista, quando o usurio
passar o mouse sobre o item. Atualize os va-
lores 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 formu-
lrios, 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
Ao trmino do terceiro captulo, como mostra a figura 54, possvel perceber que es-
trutura 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 per-
guntas? 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 tornan-
do-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 Ja-

vascript 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 Comentrios podem ser escritos aps a colo-
cao de duas barras
document.write(Ol Mundo!)}
</script>
</body>
</html>
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>
</head>
<body>
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.
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>
</head>
<body>
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 trans-
formar 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>
</head>
<body>
<form name=form1>
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 identifi-
cao 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 chama-

mos 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 nme-
ro. 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>
</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 Can-
cel a mensagem que ser exibida ser Voc escolheu Cancel!.
<html>
<head>
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 con-

trole 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>
</head>
<body>
<form name=form1>
function quadrado() { Funo que calcula o quadrado do nmero
var num = parseFloat(document.form1. informado pelo usurio.
text1.value);
window.alert(num * num); Clculo do quadrado
}
</script>
<p>Digite o Nmero:
<input type=text name=text1/><br/>
<input type=button value=Calcular
onclick=quadrado()/> Chamada da funo
</form>
</body>
</html>
8 ATIVIDADE
<html>
<head>
<h1>Verificao de Maioridade</h1>
</head>
<body>
Script que verifica se a idade digitada
function idade() {
var idade = parseFloat(document.form1. maior que 18.
text1.value);
if (idade>=18) Funo que altera o valor digitado no campo
{ de entrada para valor numrico.
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> Chamada da funo
</body>
</html>
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!!!
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.
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 com-
prometimento 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 pbli-

co ou se possui licena. Por domnio pblico entende-se que a imagem pode ser usada livre-
mente. 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 repre-
sentar 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 Photo-

shop 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 pa-
dro 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/satu-
rao 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/Satura-
o, 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 pure-
za 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 dis-
ponvel 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.
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 tex-

tos necessrios, formatando-os.
1) Crie um banner para uma empresa que voc conhece.
Este captulo, que acrescenta mais um nmero na barra de progresso da figura 69, apre-
sentou resumidamente algumas ferramentas de tratamento de imagem. comum usar esse
subterfgio quando a imagem que se pretende utilizar no est a contento.
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 di-
ferente. 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, ima-
gens, 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 locali-
zadas 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 neces-
srio 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 But-
tons. 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 descri-
o 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 neces-

srias 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 sele-
cionada 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 softwa-
res 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 persona-

gem 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 es-
colha 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 sm-
bolo 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 proprie-
dades. 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 dese-
nhe 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 ca-
mada-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 se-
guida, 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 Figura 77: Caminho a ser percorrido pela
inferior esquerdo 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 ca-
mada 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).
Crie o banner exibido na imagem 78, permitindo que ele alterne entre os dois produ-
tos, 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
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.
Ainda na concluso possvel conhecer outros aspectos que fazem parte da profis-
so de webdesigner. Mas antes disso voc se sente capaz de responder a algumas per-
guntas? 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, organi-
zacionais, 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 manuten-
o 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 ar-
mazenamento 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 fi-
gura 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 valida-
o de pginas. Os captulos sobre tratamento de imagem, autoria em multimdia e anima-
o 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.
importante ressaltar que existem questes que ultrapassam os conhecimentos tc-

nicos quando se desenvolve sites, muitos conceitos como usabilidade e acessibilidade devem
ser obrigatoriamente considerados durante a atuao profissional do webdesigner. A usabi-
lidade relaciona-se com tornar a experincia de navegar mais fcil e intuitiva, isso aparente-
mente 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 ele-
mentos dos formulrios, permita o uso do teclado para auxiliar na navegao, esteja facilmen-
te 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 Leo-
nardo 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 comple-

mentares 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
FORMAO INICIAL E CONTINUADA
EMPREENDEDORISMO
EMPREENDEDORISMO
rica Dias de Paula Santana e Ximena Novais de Morais

Reitor
Prof. Irineu Mario Colombo

Organizao
Marcos Jos Barros
Cristiane Ribeiro da Silva
Projeto Grfico e Diagramao

Leonardo Bettinelli
Introduo
Certamente voc j ouviu falar sobre empreendedorismo, mas ser que voc sabe
exatamente o que significa essa palavra, ser que voc possui as caractersticas necessrias
para tornar-se um empreendedor? Esse material busca responder essas e outras perguntas a
respeito desse tema que pode fazer a diferena na sua vida!
No dia 29 de dezembro de 2008 foi promulgada a Lei n 11.892 que cria a Rede Federal de
Cincia e Tecnologia. Uma das instituies que compe essa rede o Instituto Federal do
Paran, criado a partir da escola tcnica da Universidade Federal do Paran. Voc deve estar
se perguntando O que isso tem a ver com o empreendedorismo?, no mesmo? Pois tem
uma relao intrnseca: uma das finalidades desses instituies federais de ensino estimular o
empreendedorismo e o cooperativismo.
E como o IFPR vai estimular o empreendedorismo e o cooperativismo? Entendemos que a
promoo e o incentivo ao empreendedorismo deve ser tratado com dinamismo e versatilidade,
ou seja, esse um trabalho que no pode estagnar nunca. Uma das nossas aes, por
exemplo, a insero da disciplina de empreendedorismo no currculo dos cursos tcnicos
integrados e subsequentes, onde os alunos tem a oportunidade de aprender conceitos bsicos
sobre empreendedorismo e os primeiros passos necessrios para dar incio a um
empreendimento na rea pessoal, social ou no mercado privado.
Neste material, que servir como apoio para a disciplina de empreendedorismo e para
cursos ministrados pelo IFPR por programas federais foi desenvolvida de forma didtica e
divertida. Aqui vamos acompanhar a vida da famlia Bonfim, uma famlia como qualquer outra
que j conhecemos! Apesar de ser composta por pessoas com caractersticas muito diversas
entre si, os membros dessa famlia possuem algo em comum: todos esto prestes a iniciar um
empreendimento diferente em suas vidas. Vamos acompanhar suas dvidas, dificuldades e
anseios na estruturao de seus projetos e atravs deles buscaremos salientar questes
bastante comuns relacionadas ao tema de empreendedorismo.
As dvidas desta famlia podem ser suas dvidas tambm, temos certeza que voc vai se
identificar com algum integrante! Embarque nessa conosco, vamos conhecer um pouco mais
sobre a famlia Bonfim e sobre empreendedorismo, tema esse cada vez mais presente na vida
dos brasileiros!
Anotaes
Sumrio
HISTRIA DO EMPREENDEDORISMO..........................................................................................................7
TRAANDO O PERFIL EMPREENDEDOR.....................................................................................................8
PLANEJANDO E IDENTIFICANDO OPORTUNIDADES ...............................................................................12
ANLISE DE MERCADO ...............................................................................................................................14
PLANO DE MARKETING ...............................................................................................................................15
PLANO OPERACIONAL ................................................................................................................................17
PLANO FINANCEIRO ....................................................................................................................................18
EMPREENDEDORISMO SOCIAL OU COMUNITRIO .................................................................................21
INTRAEMPREENDEDORISMO ....................................................................................................................23
REFERNCIAS .............................................................................................................................................25
Anotaes
HISTRIA DO EMPREENDEDORISMO
Antes de apresent-los a famlia Bonfim, vamos conhecer um pouco da histria do

empreendedorismo?
Voc deve conhecer uma pessoa extremamente determinada, que depois de enfrentar
muitas dificuldades conseguiu alcanar um objetivo. Quando estudamos a histria do Brasil e
do mundo frequentemente nos deparamos com histrias de superao humana e tecnolgica.
Pessoas empreendedoras sempre existiram, mas no eram definidas com esse termo.
Os primeiros registros da utilizao da palavra empreendedor datam dos sculos XVII e
XVIII. O termo era utilizado para definir pessoas que tinham como caracterstica a ousadia e a
capacidade de realizar movimentos financeiros com o propsito de estimular o crescimento
econmico por intermdio de atitudes criativas.
Joseph Schumpeter, um dos economistas mais importantes do sculo XX, define o
empreendedor como uma pessoas verstil, que possui as habilidades tcnicas para produzir e
a capacidade de capitalizar ao reunir recursos financeiros, organizar operaes internas e
realizar vendas.
notvel que o desenvolvimento econmico e social de uma pas se d atravs de
empreendedores. So os empreendedores os indivduos capazes de identificar e criar oportuni-
dades e transformar ideias criativas em negcios lucrativos e solues e projetos inovadores
para questes sociais e comunitrias.
O movimento empreendedor comeou a ganhar fora no Brasil durante a abertura de
mercado que transcorreu na dcada de 90. A importao de uma variedade cada vez maior de
produtos provocou uma significativa mudana na economia e as empresas brasileiras precisa-
ram se reestruturar para manterem-se competitivas. Com uma srie de reformas do Estado, a
expanso das empresas brasileiras se acelerou, acarretando o surgimento de novos empreen-
dimentos e trazendo luz questo da formao do empreendedor.ngua e linguagem e sua
importncia na leitura e produo de textos do nosso cotidiano.
Perfil dos integrantes da famlia Bonfim
Felisberto Bonfim: O pai da famlia, tem 40 anos de idade. Trabalha h 20 anos na mesma
empresa, mas sempre teve vontade de investir em algo prprio.
Pedro Bonfim: O filho mais novo tem 15 anos e faz o curso de tcnico em informtica no IFPR.
Altamente integrado s novas tecnologias, no consegue imaginar uma vida desconectada.
Clara Bonfim: A primognita da famlia tem 18 anos e desde os 14 trabalha em uma ONG de
7
Unidade 1
seu bairro que trabalha com crianas em risco social. Determinada, no acredita em projetos
impossveis.
Serena Bonfim: Casada desde os 19 anos, dedicou seus ltimos anos aos cuidados da casa e
da famlia. Hoje com 38 anos e com os filhos j crescidos, ela quer resgatar antigos sonhos que
ficaram adormecidos, como fazer uma faculdade.
Benvinda Bonfim: A vov da famlia tem 60 anos de idade e famosa por cozinhar muito bem e
por sua hospitalidade.
Todos moram juntos em uma cidade na regio metropolitana de Curitiba.
TRAANDO O PERFIL EMPREENDEDOR
Muitas pessoas acreditam que

preciso nascer com caractersticas
especficas para ser um empreen-
dedor, mas isso no verdade,
essas caractersticas podem ser
estimuladas e desenvolvidas.
O sr. Felisberto Bonfim uma
pessoa dedicada ao trabalho e a
famlia e que embora esteja satis-
feito com a vida que leva nunca
deixou para trs o sonho de abrir o prprio negcio. H 20 anos atuando em uma nica empre-
sa, h quem considere no haver mais tempo para dar um novo rumo vida. Ele no pensa
assim, ele acredita que possvel sim comear algo novo, ainda que tenha receio de no possu-
ir as caractersticas necessrias para empreender. Voc concorda com ele, voc acha que
ainda h tempo para ele comear?
Responda as questes abaixo. Elas serviro como um instrumento de autoanlise e a
partir das questes procure notar se voc tem refletido sobre seus projetos de vida. Se sim, eles
esto bem delineados? O que voc considera que est faltando para alcanar seus objetivos?
Preste ateno nas suas respostas e procure tambm identificar quais caractersticas pessoais
voc possui que podem ser utilizadas para seu projeto empreendedor e quais delas podem ser
aprimoradas:
a) Como voc se imagina daqui h 10 anos?

_______________________________________________________________________
8
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
b) Em que condies voc gostaria de estar daqui h 10 anos?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
c) Quais pontos fortes voc acredita que tem?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
d) Quais pontos fortes seus amigos e familiares afirmam que voc tem? Voc concorda com
eles?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
e) Para voc, quais seus pontos precisam ser melhor trabalhados
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
f) Na sua opinio, voc poderia fazer algo para melhorar ainda mais seus pontos fortes? Como?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
9
g) Voc acha que est tomando as atitudes necessrias para atingir seus objetivos?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
h) O que voc acha imprescindvel para ter sucesso nos seus objetivos?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
A ousadia uma caracterstica extremamente importante para quem pretende iniciar
um projeto empreendedor - necessrio estar disposto a correr riscos e buscar novas alternati-
vas, mesmo se outras pessoas disserem que no vai dar certo (o que provavelmente sempre
ocorrer em algum momento da trajetria). Isso nos leva a uma outra caracterstica muito
importante para um empreendedor, ele precisa ser positivo e confiante, ou seja, precisa acredi-
tar em si e no se deixar abalar pelos comentrios negativos. Um empreendedor precisa ser
criativo e inovador, precisa estar antenado ao que est acontecendo no mundo e estar atento s
necessidades do mercado e da comunidade, precisa ser organizado e manter o foco dos seus
objetivos.
Voc j ouviu falar do pipoqueiro Valdir? Valdir Novaki tem 41 e nasceu em So Mateus
do Sul-PR, casado e tem 1 filho. Durante a adolescncia trabalhou como boia fria. Mora em
Curitiba desde 98 e durante muito tempo trabalhou com atendimento ao pblico em lanchonete
e bancas de jornal. Parece uma histria corriqueira, mas o que Valdir tem de to especial? Valdir
conquistou a oportunidade de vender pipoca em carrinho no centro da cidade de Curitiba, mas
decidiu que no seria um pipoqueiro qualquer, queria ser o melhor. Em seu carrinho ele mantem
uma srie de atitudes que o diferenciam dos demais. Alm de ser extremamente cuidadoso
com a higiene do carrinho, Valdir preocupa-se com a higiene do cliente tambm, oferecendo
lcool gel 70% para que o cliente higienize suas mo antes de comer a pipoca e junto com a
pipoca entrega um kit higiene contendo um palito de dentes, uma bala e um guardanapo. Ele
tambm possui um carto fidelidade, onde o cliente depois de comprar cinco pipocas no carri-
nho ganha outro de graa. Pequenas atitudes destacaram esse pipoqueiro e hoje, alm de
possuir uma clientela fiel, faz uma srie de palestras por todo o pas, sendo reconhecido como
um empreendedor de sucesso. A simpatia com que atende a seus clientes faz toda a diferena,
as pessoas gostam de receber um tratamento especial.
10
Conhea mais sobre o pipoqueiro Valdir em:
<http://www.youtube.com/watch?v=vsAJHv11GLc>.
H quem julgue que o papel que ocupam profissionalmente muito insignificante, mas
no verdade, basta criatividade e vontade de fazer o melhor. Toda atividade tem sua importn-
cia! Falando em criatividade, vamos estimul-la um pouco?
1)J pensou em procurar novas utilidades para os objetos do dia a dia? Como assim? Pense
em algum material que voc utiliza em seu trabalho ou em casa e em como voc poderia
utiliz-lo para outra finalidade diferente da sua original. Lembre-se que nem sempre dispo-
mos de todos os instrumentos necessrios para realizar uma determinada atividade. Nesses
momentos precisamos fazer da criatividade nossa maior aliada para realizar as adaptaes
necessrias para alcanar o xito em nossas aes!
2)Agora vamos fazer ao contrrio, pense em uma atividade do seu dia que voc no gosta ou
tem dificuldade de fazer. Pensou? Ento imagine uma alternativa para torn-la fcil e rpida,
pode ser mesmo uma nova inveno!
E a? Viu como a imaginao pode ser estimulada? Habitue-se a fazer as mesmas

coisas de formas diferentes: fazer novos caminhos para chegar ao mesmo lugar, conversar com
pessoas diferentes e dar um novo tom a sua rotina so formas de estimular o crebro a encon-
trar solues criativas. Como vimos, a inovao e a criatividade extremamente importante
para um empreendedor, por isso nunca deixe de estimular seu crebro! Leia bastante, faa
pesquisas na rea que voc pretende investir e procure enxergar o mundo ao redor com um
olhar diferenciado!
Refletindo muito sobre a possibilidade de abrir seu prprio negcio, o pai da famlia
procurou em primeiro lugar realizar uma autoanlise. Consciente de seus pontos fortes e fracos,
ele agora se sente mais seguro para dar o prximo passo: planeja. Antes de tomar alguma
deciso importante em sua vida, siga o exemplo do sr. Felisberto!
11
PLANEJANDO E IDENTIFICANDO OPORTUNIDADES
Planejar palavra de ordem em

todos os aspectos de nossa vida,
voc concorda? Quando quere-
mos fazer uma viagem, comprar
uma casa ou um carro, se no
realizarmos um planejamento
adequado certamente corremos o
risco de perder tempo e dinheiro
ou, ainda pior, sequer poderemos
alcanar nosso objetivo.
Para comear um empreendimento no diferente, necessrio definir claramente
nossos objetivos e traar os passos necessrios para alcan-los. Para operacionalizar a etapa
de planejamento, o Plano de Negcios uma ferramenta obrigatria.
O plano de negcios caracteriza-se como uma ferramenta empresarial que objetiva
averiguar a viabilidade de implantao de uma nova empresa. Depois de pronto, o empreende-
dor ser capaz de dimensionar a viabilidade ou no do investimento. O plano de negcios
instrumento fundamental para quem tem inteno de comear um novo empreendimento, ele
que vai conter todas as informaes importantes relativas a todos os aspectos do empreendi-
mento.
Vamos acompanhar mais detalhadamente os fatores que compem um Plano de
Negcios.
Elaborao de um Plano de Negcio
1. Sumrio executivo
um resumo contendo os pontos mais importantes do Plano de Negcio, no deve ser

extenso e muito embora aparea como primeiro item do Plano ele deve ser escrito por ltimo.
Nele voc deve colocar informaes como:
Definio do negcio
O que o negcio, seus principais produtos e servios, pblico-alvo, previso de

faturamento, localizao da empresa e outros aspectos que achar importante para garantir a
12
viabilidade do negcio.
Dados do empreendedor e do empreendimento
Aqui voc deve colocar seus dados pessoais e de sua empresa tal como nome, endere-
o, contatos. Tambm dever constar sua experincia profissional e suas caractersticas
pessoais, permitindo que quem leia seu Plano de Negcios, como um gerente de banco para o
qual voc pediu emprstimo, por exemplo, possa avaliar se voc ter condies de encaminhar
seu negcio de maneira eficiente.
Misso da empresa
A misso deve ser definida em uma ou no mximo duas frases e deve definir o papel
desempenhado pela sua empresa.
Setor em que a empresa atuar
Voc dever definir em qual setor de produo sua empresa atuar: indstria, comr-
cio, prestao de servios, agroindstria etc..
Forma Jurdica
Voc deve explicitar a forma como sua empresa ir se constituir formalmente. Uma
microempresa, por exemplo, uma forma jurdica diversa de uma empresa de pequeno porte.
Enquadramento tributrio
necessrio realizar um estudo para descobrir qual a melhor opo para o recolhimen-
to dos impostos nos mbitos Municipal, Estadual e Federal.
Capital Social
O capital social constitudo pelos recursos (financeiros, materiais e imateriais) dispo-

nibilizados pelos scios para constituio da empresa. importante tambm descrever qual a
fonte de recursos
13
DICA: Tenha muito cuidado na hora de escolher seus scios, essencial que eles tenham os
mesmos objetivos e a mesma disponibilidade que voc para se dedicar ao negcio, se vocs
no estiverem bastante afinados h um risco muito grande de enfrentarem srios problemas
na consecuo do empreendimento.
Diferencial: saliente o diferencial do seu produto ou servio, ou seja, por qual razo os
consumidores iro escolher voc ao invs de outro produto ou servio.
ANLISE DE MERCADO
Clientes
Esse aspecto do seu Plano de Negcio extremamente importantes, afinal nele que
ser definindo quais so os seus clientes e como eles sero atrados. Comece identificando-os:
Quem so?
Idade?
Homens, mulheres, famlias, crianas?
Nvel de instruo?
Ou ainda, se forem pessoas jurdicas:
Em que ramo atuam?

Porte?
H quanto tempo atuam no mercado?
importante que voc identifique os hbitos, preferncias e necessidades de seus

clientes a fim de estar pronto para atend-los plenamente e para que eles possam t-lo como
primeira opo na hora de procurar o produto/servio que voc oferece. Faa um levantamento
sobre quais aspectos seus possveis clientes valorizam na hora de escolher um produ-
to/servio, isso vai ser importante para voc fazer as escolhas corretas no mbito do seu empre-
endimento. Saber onde eles esto tambm importante, estar prximo a seus clientes vai
facilitar muitos aspectos.
14
Concorrentes
Conhecer seus concorrentes, isto , as empresas que atuam no mesmo ramo que a
sua, muito importante porque vai te oferecer uma perspectiva mais ampla e realista de como
encaminhar seu negcio. Analisar o atendimento, a qualidade dos materiais utilizados, as
facilidades de pagamento e garantias oferecidas, iro ajud-lo a responder algumas perguntas
importantes: Voc tem condies de competir com tudo o que oferecido pelos seus concorren-
tes? Qual vai ser o seu diferencial? As pessoas deixariam de ir comprar em outros lugares para
comprar no seu estabelecimento? Por qu? Em caso negativo, por que no?
Mas no esquea de um aspecto muito importante: seus concorrentes devem ser visto
como fator favorvel, afinal eles serviro como parmetro para sua atividade e podem at
mesmo tornar-se parceiros na busca da melhoria da qualidade dos servios e produtos oferta-
dos.
Fornecedores
Liste todos os insumos que voc utilizar em seu negcio e busque fornecedores. Para
cada tipo de produto, pesquise pelo menos trs empresas diferentes. Faa pesquisas na inter-
net, telefonemas e, se possvel, visite pessoalmente seus fornecedores. Certifique-se de que
cada fornecedor ser capaz de fornecer o material na quantidade e no prazo que voc precisa,
analise as formas de pagamento e veja se elas sero interessantes para voc. Mesmo aps a
escolha um fornecedor importante ter uma segunda opo, um fornecedor com o qual voc
manter contato e comprar ocasionalmente, pois no caso de acontecer algum problema com
seu principal fornecedor, voc poder contar com uma segunda alternativa. Lembre-se, seus
fornecedores tambm so seus parceiros, manter uma relao de confiana e respeito com
eles muito importante. Evite intermedirios sempre que possvel, o ideal comprar direto do
produtor ou da indstria, isso facilita, acelera e barateia o processo.
PLANO DE MARKETING
Descrio
Aqui voc deve descrever seus produto/servio. Especifique tamanhos, cores, sabo-
res, embalagens, marcas entre outros pontos relevantes. Faa uma apresentao de seu
produto/servio de maneira que possa se tornar atraente ao seu cliente. Verifique se h exign-
cias oficiais a serem atendidas para fornecimento do seu produto/servio e certifique-se que
15
segue todas as orientaes corretamente.
Preo
Para determinar o preo do seu produto/servio voc precisa considerar o custo TOTAL
para produzi-lo e ainda o seu lucro. preciso saber quanto o cliente est disposto a pagar pelo
seu produto/servio verificando quanto ele est pagando em outros lugares e se ele estaria
disposto a pagar a mais pelo seu diferencial.
Divulgao
essencial que voc seja conhecido, que seus clientes em potencial saibam onde voc
est e o que est fazendo, por isso invista em mdias de divulgao. Considere catlogos,
panfletos, feiras, revistas especializadas, internet (muito importante) e propagandas em rdio e
TV, analise e veja qual veculo melhor se encaixa na sua necessidade e nos seus recursos
financeiros.
Estrutura de comercializao
Como seus produtos chegaro at seus clientes? Qual a forma de envio? No se

esquea de indicar os canais de distribuio e alcance dos seus produtos/servios. Voc pode
considerar representantes, vendedores internos ou externos, por exemplo. Independente de
sua escolha esteja bastante consciente dos aspectos trabalhistas envolvidos. Utilizar instru-
mentos como o telemarketing e vendas pela internet tambm devem ser considerados e podem
se mostrar bastante eficientes.
Localizao
A localizao do seu negcio est diretamente ligada ao ramo de atividades escolhido

para atuar. O local deve ser de fcil acesso aos seus clientes caso a visita deles no local seja
necessria. importante saber se o local permite o seu ramo de atividade. Considere todos os
aspectos das instalaes, se de fcil acesso e se trar algum tipo de impeditivo para o desen-
volvimento da sua atividade.
Caso j possua um local disponvel, verifique se a atividade escolhida adequada para
ele, no corra o risco de iniciar um negcio em um local inapropriado apenas porque ele est
disponvel. Se for alugar o espao, certifique-se de possvel desenvolver sua atividade nesse
16
local e fique atento a todas as clusulas do contrato de aluguel.
PLANO OPERACIONAL
Layout
A distribuio dos setores da sua empresa de formas organizada e inteligente vai

permitir que voc tenha maior rentabilidade e menor desperdcio. A disposio dos elementos
vai depender do tamanho de seu empreendimento e do ramo de atividade exercido. Caso seja
necessrio voc pode contratar um especialista para ajud-lo nessa tarefa, mas se no for
possvel, por conta prpria procure esquematizar a melhor maneira de dispor os elementos
dentro de sua empresa. Pesquise se o seu ramo e atividade exige regulamentaes oficiais
sobre layout, preocupe-se com segurana e com a acessibilidade a portadores de deficincia.
Capacidade Produtiva
importante estimar qual sua capacidade de produo para no correr o risco de

assumir compromissos que no possa cumprir - lembre-se que necessrio estabelecer uma
relao de confiana entre voc e seu cliente. Quando decidir aumentar a capacidade de produ-
o tenha certeza que isso no afetar a qualidade do seu produto/servio.
Processos Operacionais
Registre detalhadamente todas as etapas de produo desde a chegada do pedido do

cliente at a entrega do produto/servio. importante saber o que necessrio em cada uma
delas, quem ser o responsvel e qual a etapa seguinte.
Necessidade de Pessoal
Faa uma projeo do pessoal necessrio para execuo do seu trabalho, quais sero
as formas de contratao e os aspectos trabalhistas envolvidos. importante estar atento
qualificao dos profissionais, por isso verifique se ser necessrio investir em cursos de
capacitao.
17
PLANO FINANCEIRO
Investimento total
Aqui voc determinar o valor total de recurso a ser investido. O investimento total ser
formado pelos investimentos fixos, Capital de giro e Investimentos pr-operacionais.
Agora que voc tem uma noo bsica de como compor um plano de negcios acesse
a pgina <http://www.planodenegocios.com.br/www/index.php/plano-de-negocios/outros-
exemplos> e encontre mais informaes sobre como elaborar o planejamento financeiro de seu
Plano de Negcio, alm de outras informaes importantes. L voc encontrar exemplos de
todas as etapas de um Plano de Negcio.
Faa pesquisas em outros endereos eletrnicos e se preciso, busque o apoio de
consultorias especializadas. O sucesso do seu projeto ir depender do seu empenho em buscar
novos conhecimentos e das parcerias conquistadas para desenvolv-lo.
Pesquise tambm por fontes de financiamento em instituies financeiras, buscando
sempre a alternativa que melhor se adequar as suas necessidades. No tenha pressa, estude
bastante antes de concluir seu plano de negcio. importante conhecer todos os aspectos do
ramo de atividade que voc escolher, valorize sua experincia e suas caractersticas pessoais
positivas. Lembre-se que o retorno pode demorar algum tempo, certifique-se que voc ter
condies de manter o negcio at que ele d o retorno planejado. Separe despesas pessoais
de despesas da empresa. Busque sempre estar atualizado, participe de grupos e feiras correla-
tas sua rea de atuao.
Planejar para clarear!
Aps buscar auxlio especializada e estudar sobre o assunto, o pai concluiu seu plano
de negcios. A partir dele pde visualizar com clareza que tem em mos um projeto vivel e at
conseguiu uma fonte de financiamento adequada a sua realidade. Com o valor do financiamen-
to investir na estrutura de seu empreendimento que ser lanado em breve.
MICROEMPREENDEDOR INDIVIDUAL
Que bolo maravilhoso! Voc uma tima

anfitri. Eu quero a receita desse quindim! A Eu? No, imagine, eu no
senhora j pensou em vender seus quitutes? tenho capacidade para isso!
18
Ser mesmo que a dona Benvinda no tem capacidade para empreender?
Vamos analisar a situao: a vov muito conhecida no seu bairro e admirada pela sua
simpatia. Seus quitutes so conhecidos por todos e no a primeira vez que algum sugere que
ela comece a vend-los. primeira vista, o cenrio parece ser favorvel para que ela inicie seu
empreendimento: ela tem uma provvel clientela interessada e que confia e anseia por seus
servios.
Ao conversar com a famlia, incentivada por todos. Com a ajuda dos seus netos, a
vov vai atrs de informaes e descobre que se enquadra nos requisitos para ser registrada
como microempreendedora individual.
Voc conhece os requisitos para se tornar um microempreendedor individual?
A Lei Complementar 128/2008 criou a figura do Microempreendedor Individual MEI,

com vigncia a partir de 01.07.2009. uma possibilidade de profissionais que atuam por conta
prpria terem seu trabalho legalizado e passem a atuar como pequenos empresrios.
Para se enquadrar como microempreendedor individual, o valor de faturamento anual
do empreendimento deve ser de at 60 mil reais. No permitida a inscrio como MEI de
pessoa que possua participao como scio ou titular de alguma empresa.
O MEI possui algumas condies especficas que favorecem a sua legalizao. A
formalizao pode ser feita de forma gratuita no prprio Portal do Empreendedor. O cadastro
como MEI possibilita a obteno imediata do CNPJ e do nmero de inscrio na Junta
Comercial, sem a necessidade de encaminhar quaisquer documentos previamente. Algumas
empresas de contabilidade optantes pelo Simples Nacional esto habilitadas a realizar tambm
a formalizao.
Custos
H alguns custos aps a formalizao. O pagamento dos custos especificados abaixo

feito atravs do Documento de Arrecadao do Simples Nacional, que pode ser gerado online :
5% de salrio mnimo vigente para a Previdncia.

Se a atividade for comrcio ou indstria, R$ 1,00 fixo por ms para o Estado.
Se a atividade for prestao de servios, R$ 5,00 fixos por ms para o Municpio.
19
Exemplo de atividades reconhecidas para o registro como MEI:
A dona Benvinda se registrou como doceira. So diversas as atividades profissionais

aceitas para o registro como microempreendedor individual. Algumas delas so: Arteso,
azulejista, cabeleireiro, jardineiro, motoboy. Para conhecer todas as atividades, acesse o site
<http://www.portaldoempreendedor.gov.br >.
Todos podem empreender!
Hoje a vov est registrada como microempreendedora individual e aos poucos sua
clientela est crescendo. Recentemente ela fez um curso para novos empreendedores e j est
com planos de expandir seus servios nos prximos meses, talvez ela precise at mesmo
contratar um ajudante para poder dar conta das encomendas que no param de aumentar.
O microempreendedor individual tem direito a ter um funcionrio que receba exclusivamente

um salrio mnimo ou o piso salarial da categoria profissional a qual pertena.
Atividade Formativa
Acesse o contedo sobre microempreendedor individual no Portal do Empreendedor e

discuta com seus colegas sobre o tema.
Pense em algum que exera uma atividade profissional informalmente. Quais vantagens
voc apontaria para convencer essa pessoa a realizar seu cadastro como
Microempreendedor Individual?
Pesquise sobre linhas de crdito e incentivo especficas para microempreendedores
individuais no Brasil.
er
d
een
pr
Em
Muitas pessoas acreditam que caractersticas empreendedoras j vem de bero: ou se

nasce com elas ou no h nada a ser feito. Pois saiba que possvel atravs de uma educao
voltada para o empreendedorismo desenvolver caractersticas necessrias para o incio de um
empreendimento. Esse empreendimento no precisa ser necessariamente um negcio com
20
fins lucrativos, pode ser um um objetivo pessoal, um sonho em qualquer rea da sua vida.
A pedagogia empreendedora de Fernando Dolabela afirma que a educao tradicional
a qual somos submetidos nos reprime e faz com que percamos caractersticas importantes no
decorrer de nossa trajetria, levando muitas pessoas a crer que no so capazes de empreen-
der. Sua proposta de educao busca romper com esse pensamento e inserir no sistema
educacional aspectos que priorizem a criatividade e a autoconfiana para que quando estas
crianas atingirem a idade adulta possam enxergar a possibilidade de abrir um negcio como
uma alternativa vivel.
No podemos esquecer que empreendedor, em qualquer rea, algum que tenha
sonhos e busque de alguma forma transformar seu sonho em realidade. O sonho pode ser abrir
um negcio, fazer um curso, aprender uma lngua ou mudar a realidade social em que vive.
inegvel que para realizar qualquer um desse itens essencial estar comprometido com o
trabalho, ser ousado e estar disposto a enfrentar desafios.
O empreendedorismo pode ser aprendido e est relacionado mais a fatores culturais do
que pessoais e consiste em ser capaz de cultivar e manter uma postura e atitudes empreende-
doras.
O Pedro est tendo seu primeiro contato com o empreendedorismo na sala de aula e
eles e seus amigos j esto cheio de ideias. Eles planejam usar os conhecimentos adquiridos
na disciplina e escrever um projeto para dar incio a uma empresa jnior na rea de informtica.
Inspire-se
Certamente voc j deve ter ouvido falar da Cacau Show, mas voc conhece a histria
dessa marca? Voc sabia que ela nasceu do sonho de um rapaz que vendia chocolates de porta
em porta em um fusca? No? Ento leia mais em:
<http://www.endeavor.org.br/endeavor_tv/start-up/day1/aprendendo-a-ser-
empreendedor/empreendedorismo-em-todos-os-sentidos> e inspire-se!
EMPREENDEDORISMO SOCIAL OU COMUNITRIO
Que belo trabalho! Moro em outra cidade e gostaria de levar um projeto parecido para l!
Educao empreendedora
O empreendedor
aquele que tem como objetivo
maior o lucro financeiro a partir
21
de um empreendimento, correto? No necessariamente! O objetivo maior do empreendedor
social ou comunitrio pode ser desde o desenvolvimento social de uma comunidade inteira
luta pela preservao de uma reserva ambiental.
Vejamos o exemplo da Clara. Desde a sua adolescncia ela atua em uma organizao
no-governamental que lida com crianas carentes, dando nfase na emancipao social
dessas crianas atravs da arte, de esportes e da educao. O projeto, que comeou com uma
pequena dimenso, hoje atende no apenas seu bairro, como trs outros prximos. impor-
tante lembrar que o sucesso do projeto dependeu de sujeitos empreendedores, que se compro-
meteram com a causa e, com criatividade e competncia foram capazes de expandir o projeto.
Agora com o apoio da Clara e com o esprito empreendedor de mais um grupo, uma nova cidade
ser atendida pelo projeto e novas crianas sero beneficiadas!
Vamos conhecer mais sobre empreendimentos sociais e comunitrios?
Empreendedorismo Social
O empreendedorismo social ultrapassa a noo de mera filantropia - h espao aqui

para metas, inovao e planejamento. Muitas organizaes no governamentais tem uma
estrutura semelhante a qualquer empresa com fins lucrativos.
A Pastoral da Criana um exemplo de um empreendimento social de sucesso. Sua
fundadora, a Dr Zilda Arns, aliou sua experincia profissional como mdica pediatra e sanitaris-
ta e sua prpria sensibilidade para identificar um mtodo simples e eficaz para combater a
mortalidade infantil. Qual foi o ponto inovador do trabalho assumido pela Pastoral da Criana?
Foi confiar s comunidades afetadas pelo problema de mortalidade infantil o papel de multipli-
cadores do saber e de disseminadores da solidariedade.
Empreendedorismo Comunitrio
O empreendedorismo comunitrio consiste no movimento de organizao de grupos e

pessoas com o propsito de alcanar um objetivo comum, fortalecendo uma atividade que, se
realizada individualmente, no seria capaz de alcanar a projeo adequada no mercado. No
Brasil, a economia solidria ascendeu no final do sculo XX, em reao excluso social
sofrida pelos pequenos produtores e prestadores de servio que no tinham condies de
concorrer com grandes organizaes.
Imagine um pequeno produtor de leite em uma regio onde atua um grande produtor de
leite. Sozinho, ele no tem condies de concorrer com o grande produtor no mercado ou
22
receber financiamentos para expandir sua produo, por exemplo. Ao se aliar com outros
pequenos produtores, o negcio adquire uma nova dimenso, onde so favorecidos no ape-
nas os produtores, que agora tem condies de levar seu produto ao mercado com segurana e
em nvel de igualdade com o outro produtor, mas tambm todo o arranjo produtivo daquela
regio.
Em 2003 foi criada pelo Governo Federal a Secretaria Nacional de Economia Solidria,
que tem a finalidade de fortalecer e divulgar as aes de economia solidria no pas, favorecen-
do a gerao de trabalho, renda e incluso social.
Atividade Formativa
D um exemplo de uma organizao no-governamental. Que trabalho essa organizao

realiza? Voc acredita que os gestores dessa ONG so empreendedores? Por qu?
Identifique em seu bairro ou cidade uma carncia que no foi suprida pelo setor pblico ou
um trabalho exercido informalmente por algumas pessoas que possa ser fortalecido atravs
da formao de uma estrutura de cooperativismo. Proponha uma ao que voc acredita que
possa transformar a realidade desse grupo.
Voc j ouviu falar em sustentabilidade? D um exemplo de uma ao sustentvel que voc
j adota ou que possa ser adotada no seu dia a dia e como essa ao pode afetar positiva-
mente o meio em que voc vive.
INTRAEMPREENDEDORISMO
A sr Serena Bonfim h muito tempo mantm o sonho de fazer uma faculdade. Depois
de tantos anos dedicados famlia, ela est certa que est na hora de investir mais em si mes-
ma. Alm disso, com seu marido prestes a abrir uma empresa, ela est disposta a usar os
conhecimentos adquiridos na graduao para trabalhar diretamente no novo empreendimento
e contribuir com seu desenvolvimento.
Voc pode estar pensando: E se eu no quiser abrir um negcio, e se eu no quiser ser
23
um empresrio?. Abrir uma empresa apenas uma alternativa, caso voc no tenha inteno
de ter seu prprio negcio voc ainda pode ser um empreendedor.
O intraempreendedorismo quando o empreendedorismo acontece no interior de uma
organizao, quando algum mesmo no sendo dono ou scio do negcio mantm uma
postura empreendedora dando sugestes e tendo atitudes que ajudam a empresa a encontrar
solues inteligentes. Intra empreendedores so profissionais que possuem uma capacidade
diferenciada de analisar cenrios, criar ideias, inovar e buscar novas oportunidades para as
empresas e assim ajudam a movimentar a criao de ideias dentro das organizaes, mesmo
que de maneira indireta. So profissionais dispostos a se desenvolver em prol da qualidade do
seu trabalho.
A cada dia as empresa preocupam-se mais em contratar colaboradores dispostos a
oferecer um diferencial, pessoas dedicadas que realmente estejam comprometidas com o bom
andamento da empresa. Esse comportamento no traz vantagens somente para a empresa,
mas os funcionrios tambm se beneficiam, na participao dos lucros, por exemplo, vanta-
gens adicionais que as empresas oferecem a fim de manter o funcionrio e, principalmente, na
perspectiva de construo de uma carreira slida e produtiva.
A capacitao contnua, o desenvolvimento da criatividade e da ousadia so caracters-
ticas presentes na vida de um intraempreendedor.
Vamos analisar se voc tem caractersticas de um intraempreendedor?

Voc gosta do seu trabalho e do ambiente em que trabalha?
Voc est sempre atento s novas ideias?
Voc gosta de correr riscos e ousar novas ideias?
Voc procura solues em locais incomuns?
Voc persistente e dedicado?
Voc mantm aes proativas?
Voc busca fazer novas capacitaes regularmente?
Caso voc no tenha ficado suficientemente satisfeito com as respostas a estas per-
guntas, utilize o espao abaixo para listar atitudes que podem ajud-lo a ser um funcionrio
intraempreendedor.
O que fazer? Como fazer? Quando fazer?
24
Concluso
Muitos acreditam que para ser empreendedor necessrio possuir um tipo de vocao
que se manifesta somente para alguns predestinados, mas ao acompanhar a trajetria da
famlia Bonfim, podemos notar que o sonho de empreender est ao alcance de todos ns. Como
qualquer sonho, esse tambm exige planejamento e dedicao para que seja concretizado com
sucesso.
Agora que voc aprendeu os princpios bsicos do empreendedorismo, que tal fazer
como os membros da famlia Bonfim e investir nos seus sonhos?
REFERNCIAS
<http://www.portaldoempreendedor.gov.br>.
<http://www.mte.gov.br/ecosolidaria/sies.asp>.
<http://www.pastoraldacrianca.org.br>.
<http://www.scielo.gpeari.mctes.pt/pdf/cog/v14n1/v14n1a05.pdf>.
<http://www.sobreadministracao.com/intraempreendedorismo-guia-completo>.
<http://www.hsm.com.br/editorias/inovacao/intraempreendedorismo-voce-ja-fez-algo-diferente-hoje>.
<http://www.captaprojetos.com.br/artigos/ResenhaFDsite.pdf>.
DORNELAS, J. C. A. Empreendedorismo. Transformando ideias em negcios. Rio de Janeiro:

Elselvier, 2008. 3 edio revista e atualizada.
ROSA, C. A. Como elaborar um plano de negcio. Rio de Janeiro: Sebrae, 2007.
DOLABELA, F. Oficina do empreendedor. Rio de Janeiro: Sextante, 2008.
25
Anotaes
Anotaes
FORMAO INICIAL E CONTINUADA
PLANO DE AO PROFISSIONAL
Reitor
Irineu Mario Colombo
Organizao
Jeyza da Piedade de Campos Pinheiro
Marcos Jos Barros
Reviso Ortogrfica
Rodrigo Sobrinho
Projeto Grfico e Diagramao

Leonardo Bettinelli
3
Caro (a) estudante,
O Plano de Ao Individual PAI ser elaborado por voc durante sua qualificao profissional nos cursos FIC (Formao Inicial e
Continuada) do PRONATEC IFPR. O destino desta viagem apresentado por meio de um roteiro que o ajudar a lembrar e a organizar
informaes sobre suas experincias de trabalho e de seus familiares e a planejar a continuidade de seus estudos, incluindo sua formao
escolar e seus planos profissionais.
O PAI um instrumento que integra os contedos dos cursos FIC, devendo ser alimentado com suas ideias, pesquisas,
experincias de trabalho e escolhas pessoais, com o objetivo de orientar e organizar sua trajetria acadmica.
No decorrer do curso voc desenvolver atividades coletivas e individuais com a orientao do professor em sala de aula, e far o
registro destas informaes, resultados de pesquisas e reflexes do seu cotidiano de forma sistematizada nas fichas que compem o Plano.
Toda a equipe pedaggica e administrativa contribuir com voc, orientando-o e ajudando-o a sistematizar estes dados. O preenchimento
deste instrumento por voc, ser um referencial na sua formao e na construo do seu conhecimento, no processo de ensino-
aprendizagem.
Bom estudo!
Anotaes
5
Anotaes
7
Sumrio
Ficha 1: Iniciando minha viagem pelo Curso de Formao Inicial e continuada FIC (IFPR/PRONATEC) .........................................10
Ficha 2: Quem sou? ..............................................................................................................................................................................11
Ficha 3: O que eu j sei? .......................................................................................................................................................................12
Ficha 4: Minha trajetria profissional......................................................................................................................................................13
Ficha 5: O que ficou desta etapa do curso?...........................................................................................................................................14
Ficha 6: Resgate histrico da vida profissional da minha famlia...........................................................................................................15
Ficha 7: Comparando as geraes. .......................................................................................................................................................16
Ficha 8: Refletindo sobre minhas escolhas profissionais.......................................................................................................................17
Ficha 9: Pesquisando sobre outras ocupaes do Eixo Tecnolgico do curso que estou matriculado no IFPR/PRONATEC. .............18
Ficha 10: Pesquisando as oportunidades de trabalho no cenrio profissional. .....................................................................................19
Ficha 11: O que ficou desta etapa do curso?.........................................................................................................................................20
Ficha 12: Vamos aprender mais sobre associao de classe. ..............................................................................................................21
Ficha 14: O que eu quero? ( hoje eu penso que...)................................................................................................................................23
Ficha 16: Planejando minha qualificao profissional............................................................................................................................25
Ficha 18: Momento de avaliar como foi o curso ofertado pelo IFPR/PRONATEC.................................................................................27
Referncias bibliogrficas ...................................................................................................................................................................28
Anotaes
9
Ficha 1: Iniciando minha viagem pelo Curso de Formao Inicial e Continuada FIC (IFPR/PRONATEC).
No quadro abaixo liste o curso de Formao Inicial e Continuada FIC, em que voc est matriculado no IFPR e as possveis reas de
atuao. Solicite ajuda ao seu (ua) professor (a) para o preenchimento:
Curso Programa que oferta Eixo tecnolgico Demandante reas de atuao
O que voc espera deste curso FIC? Utilize o espao abaixo para descrever suas expectativas atravs de um texto breve.
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
Ficha 2: Quem sou?
1 Meu perfil
Nome:
_____________________________________________________________________________________________________________
Quem eu sou? (voc poder escrever ou desenhar se preferir. Por exemplo: o que voc gosta de fazer, o que gosta de comer, como voc se
diverte?)
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
2 Documentao (Preencha as informaes abaixo e, com a ajuda do (a) Professor (a), descubra a importncia destes documentos para
sua vida, enquanto cidado)
Identidade/Registro Geral ________________________________________________________________________________________
CPF _________________________________________________________________________________________________________
Carteira de trabalho _____________________________________________________________________________________________
PIS/PASEPI/NIT________________________________________________________________________________________________
Titulo de Eleitor ________________________________________________________________________________________________
Outros _______________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
11
3 Endereo
Rua/nmero: __________________________________________________________________________________________________
Bairro/complemento: ____________________________________________________________________________________________
Cidade / UF:___________________________________________________________________________________________________
Ficha 3: O que eu j sei?

1 Escolaridade
Ensino Fundamental sries iniciais :________________________________________________________( ) incompleto ( ) completo

Ensino Fundamental sries finais _________________________________________________________( ) incompleto ( ) completo
Ensino Mdio: _________________________________________________________________________( ) incompleto ( ) completo
Graduao: ___________________________________________________________________________( ) incompleto ( ) completo
Especializao ________________________________________________________________________( ) incompleto ( ) completo
Cursos que j fiz (cite no mximo cinco) ____________________________________________________( ) incompleto ( ) completo
2 Cursos que j fiz (cite no mximo cinco)
Curso Instituio Data do Termino do curso Carga horria

Ficha 4: Minha trajetria profissional.
Nome da Perodo em que Vnculo de Carga horria Remunerao Como voc avalia essas experincias de
ocupao trabalhou trabalho diria trabalho
Exemplo: 01/01/2012 a Sem carteira 8 horas 864,50 Aprendi muitas coisas nas rotinas
Massagista 31/12/2012 administrativas da empresa
1.
2.
3.
13
Ficha 5: O que ficou desta etapa do curso?
QUAIS CONHECIMENTOS IMPORTANTES

QUE VOC ACHA RELEVANTE DESTACAR AQUI NESTA ETAPA DO CURSO
O QUE VOC REALMENTE APRENDEU AT AGORA?
Ficha 6: Resgate histrico da vida profissional da minha famlia.
Parentesco Onde nasceu Ocupao Onde reside Ocupao atual Funo exercida
Exemplo: Pai Campo largo - PR Servente de obras Campo Largo Pedreiro Mestre de obra
Neste fichamento importante voc fazer um resgate histrico da sua famlia identificando em que trabalharam ou trabalham, as pesso-
as da sua famlia, comparando a situao inicial e a atual de cada indivduo, outro ponto, que pode vir a ser analisado so as pessoas
com a mesma faixa de idade.
15
Ficha 7: Comparando as geraes.
Ocupao Tipo de vinculo de trabalho com o empregador: carteira assinada, contrato

determinado, pagamento por tarefa, outros...
Me 1. Ocupao inicial:
2.. Ocupao atual:
Pai 1. Ocupao inicial:
2.. Ocupao atual:
Minhas experincias 1. Ocupao inicial:
2.. Ocupao atual:
Voc preferir poder identificar outras pessoas com a mesma faixa etria, conforme o preenchimento da ficha 6.
Ficha 8: Refletindo sobre minhas escolhas profissionais.
Ocupao profissional que voc j exerceu Por qu?
1.
2.
3.
Ocupao profissional que voc gostaria de exercer Por qu?
1.
2.
3.
Ocupao profissional que voc no gostaria de exercer Por qu?
1.
2.
3.
Independente do Eixo Tecnolgico e do curso FIC que est cursando, liste 3 ocupaes profissionais que voc gostaria de exercer e
outras 3 ocupaes que no gostaria de exercer.
17
Ficha 9: Pesquisando sobre outras ocupaes do Eixo Tecnolgico do curso que estou matriculado no IFPR / PRONATEC.
Eixo Tecnolgico: _______________________________________________________________________________________________
Curso: ______________________________________________________________________________________Ano letivo:_________
Cursos: Perfil do profissional

(caractersticas pessoais, oque faz, onde trabalha, materiais que utiliza)
1
Solicite ao professor que ele consulte o Guia de cursos PRONATEC no site: <http://www.ifpr.edu.br/pronatec/consultas>. Voc encontra-
r as caractersticas gerais dos cursos, os setores onde ser possvel exercer seu conhecimentos, bem como, recursos, materiais
necessrios, requisitos e outros....E com a ajuda do professor e orientao, voc poder realizar entrevistas com profissionais da rea, e
at visitas tcnicas conforme planejamento do professor do curso.
Ficha 10: Pesquisando as oportunidades de trabalho no cenrio profissional.
Curso / Onde procurar: Endereo Possibilidades De Remunerao Tipo de contrato

Ocupao empresas, agencias (Comercial/Eletrnico/Telefone) Empregabilidade (Registro em carteira
de emprego, sindicato (Quantas vagas , contrato
e outros disponveis) temporrio)
Exemplo: 1) Empresa: Av. Vereador Toaldo Tlio, n 47, sala 05 1 540,00 Carteira assinada
Massagista Clinica de Centro - Campo Largo - PR
Massoterapia J&J <http://massoterapiacuritiba.com.br/contato.html>.
2) Posto do Sine Rua Tijucas do Sul, 1 - Bairro: Corcovado 0 - -
Campo Largo - PR - CEP: 81900080 Regional: centro
3) Agencias de RH Rua Saldanha Marinho, 4833 Centro Campo Largo/PR 2 860,00 Sem registro em
Empregos RH 80410-151 carteria
4) Classificados <http://www.gazetadopovo.com.br>. 0 - -
Jornais
Com a orientao do professor e ajuda dos colegas visite empresas, estabelecimentos comerciais, agncias de emprego pblicas e
privadas, bem como, outros locais onde voc possa procurar trabalho e deixar seu currculo.
19
QUAIS CONHECIMENTOS IMPORTANTES QUE VOC ACHA RELEVANTE DESTACAR AQUI NESTA ETAPA DO CURSO O QUE
VOC REALMENTE APRENDEU AT AGORA?
Ficha 12: Vamos aprender mais sobre associao de classe.
Sindicato: o que , o que faz?
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
Ocupao / Curso Nome do Sindicato Endereo
1.
2.
3.
4.
Com a orientao do professor em sala de aula, pesquise qual (is) o (s) sindicato (s) que representa (m) a (s) ocupao (es) que voc est
cursando pelo IFPR / PRONATEC.
21
QUAIS CONHECIMENTOS IMPORTANTES QUE VOC ACHA RELEVANTE DESTACAR AQUI NESTA ETAPA DO CURSO O
QUE VOC REALMENTE APRENDEU AT AGORA?
Ficha 14: O que eu quero? Hoje eu penso que...(voc poder escrever, desenhar ou colar gravuras).
Eu quero continuar meus estudos?
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
Eu quero trabalhar?
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
Eu quero ser?
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
_____________________________________________________________________________________________________________
23
Ficha 16: Planejando minha qualificao profissional.
Ocupao Instituio Durao do Horrios Custo do curso

curso ofertados ( gratuito? Se no , quanto vai
custar?)
1.
2.
3.
4.
5.
6.
Com orientao do professor pesquise sobre instituies pblicas ou privadas na sua regio que oferecem cursos de qualificao em sua
ocupao (es) ou na (s) rea (s) de seu interesse.
25
Ficha 18: Momento de avaliar como foi o curso ofertado pelo IFPR / PRONATEC.
O que voc trouxe de bom? O que ficou de bom pra voc? E o que podemos melhorar?
27
Referncias bibliogrficas
Guia de Estudo: Unidades Formativas I e II Braslia: Programa Nacional de Incluso de Jovens Projovem Urbano, 2012.
FREIRE, P. Pedagogia da Autonomia: saberes necessrios prtica educativa. SoPaulo: Paz e Terra, 1996.
_____. Pedagogia da tolerncia. So Paulo: Editora UNESP, 2004.
PAIN, S. Diagnstico e tratamento dos problemas de aprendizagem. Porto Alegre: Artes Mdicas, 1986.
WEISS, M. L. L. Psicopedagogia clnica: uma viso diagnstica dos problemas de aprendizagem escolar. 8 ed. Rio de Janeiro: DP&A,
2001.
Anotaes
71

Auxiliar em Web Design PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Auxiliar em Web Design PDF

Uploaded by

Copyright:

Available Formats

2

AUXILIAR EM WEB DESIGN

IFPR - INSTITUTO FEDERAL DO PARAN

Pr-Reitor de Extenso, Pesquisa e Inovao

A profisso de auxiliar de webdesigner recente e surgiu com as possibilidades de

Este material no pretende esgotar o assunto que vastssimo, apenas apresentar

1.2 Sobre o material.................................................................................................10

1.3 Onde estou? O que aprendi?.............................................................................11

2.1 Como posso escrever pginas em HTML?.......................................................12

2.2 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 Atividades Comentadas.....................................................................................24

2.4 Exerccios de Reviso.......................................................................................26

2.5 Onde estou? O que aprendi?.............................................................................27

3.1 Mtodos de vinculao......................................................................................30

3.3 Formatando o background.................................................................................33

3.4 Formatando listas ordenadas e listas com marcadores....................................34

3.5 Modelo em Caixa...............................................................................................35

3.6 Criando classes de estilos e identificadores......................................................37

3.7 Modelando leiautes com colunas.......................................................................41

3.8 Atividades Comentadas......................................................................................43

3.9 Exerccios de Reviso........................................................................................43

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

4.1 Atividades Comentadas.....................................................................................52

4.2 Exerccios de Reviso........................................................................................53

4.3 Onde estou? O que aprendi?.............................................................................53

5.1 Adobe Photoshop...............................................................................................55

5.1.1 Matiz e Saturao..............................................................................................57

5.2 Atividades Comentadas......................................................................................58

5.3 Exerccios de Reviso.........................................................................................59

5.4 Onde estou? O que aprendi?.............................................................................59

6.1 Adobe Flash.......................................................................................................60

6.1.1 Linha do tempo..................................................................................................60

6.1.2 Biblioteca de smbolos.......................................................................................61

6.3 Atividade Comentada.........................................................................................65

6.4 Exerccios de Reviso........................................................................................66

6.5 Onde estou? O que aprendi?.............................................................................67

1.2 SOBRE O MATERIAL

As atividades comentadas apresentam exerccios propostos com resoluo e co-

1.3 ONDE ESTOU? O QUE APRENDI?

Ao final deste captulo possvel entender que a profisso de webdesigner apesar de

Figura 01: Barra de progresso

Voc gosta de tecnologia? Gosta de pesquisar coisas novas e aprender sozinho?

HTML significa Hyper Text Markup Language ou simplesmente linguagem de mar-

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,

Quais motores de busca voc conhece?

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

Figura 04: Exibio do site originado da figura 03

A alterao da tag <body>

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