Transcript

1

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Tecnologia WEB I

Prof. Erwin Alexander Uhlmann

Dos princípios do HTML, estruturação com CSS e automação com Javascript

UHLMANN, Erwin Alexander. Dos princípios do

HTML, estruturação com CSS e automação com

Javascript. Instituto Siegen. Guarulhos, 2012.

2

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Agradecimentos

Agradeço à minha esposa Kátia por entender

minha ausência, meus pais Mirtes e Günter por

terem criado meu caminho, aos meus alunos que

viabilizaram este trabalho e a todos os autores

de livros e bibliotecas que consultei para que

pudesse devidamente embasar este.

3

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Sumário

Agradecimentos ...............................................................................................................2

Introdução ....................................................................................................................... 5

Aula 1 ................................................................................................................................ 6

Pré-requisitos ............................................................................................................... 6

Software ................................................................................................................... 6

HTML ............................................................................................................................ 8

Títulos ...................................................................................................................... 13

Aula 2 ............................................................................................................................... 15

Tabelas ........................................................................................................................ 15

Cores ........................................................................................................................ 16

Junção de colunas .................................................................................................. 16

Junção de linhas ..................................................................................................... 17

Linhas e colunas fundidas ...................................................................................... 17

Aula 3 ............................................................................................................................... 18

Listas ............................................................................................................................ 18

Listas ordenadas ..................................................................................................... 18

Listas aninhadas e mistas ....................................................................................... 18

Aula 4 .............................................................................................................................. 20

Formulários ................................................................................................................ 20

Exercício .................................................................................................................. 21

iFrame .......................................................................................................................... 21

Aula 5 ............................................................................................................................... 23

HTML 5 ........................................................................................................................ 23

Audio ...................................................................................................................... 24

Vídeo ....................................................................................................................... 24

4

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

CSS ................................................................................. Erro! Indicador não definido.

Aula 6 ............................................................................................................................... 25

Aula 7 .............................................................................................................................. 30

Aula 8 .............................................................................................................................. 36

Aula 9 ............................................................................................................................... 41

Aula 10 ............................................................................................................................ 47

Aula 11 .............................................................................................................................. 52

Aula 12 ............................................................................................................................. 54

Aula 13............................................................................................................................. 56

Aula 14 .............................................................................................................................57

Aula 15 .............................................................................................................................57

Bibliografia ..................................................................................................................... 58

5

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Introdução

O objetivo deste trabalho é introduzir as técnicas basilares para construção de um

website seguindo os preceitos e padrões definidos pelo W3C (www.w3c.br), o

esperado pelo mercado e que seja simples de produzir, manter e modificar.

6

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Aula 1

Pré-requisitos

Software

Amaya

Este é o software referência em edição da marcação HTML. Criado pelo W3C, o

Amaya é um editor WYSIWYG (What You See Is What You Get – Editor visual de

marcação HTML) que já aplica as definições do W3C com avisos de erros de

codificação ou desconformidades.

$ : Grátis.

Avaliação:

http://www.w3.org/Amaya/User/BinDist.html

7

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Dreamweaver

Este é o melhor! O problema é que é pago, e bem pago. Este editor da Adobe tem

longa história de desenvolvimento. Atende diversas ferramentas que permitem até

um usuário com pouco conhecimento criar uma página, além de suporte à diversas

linguagens de programação e Banco de Dados.

http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver&loc=pt_br

$: US$ 229,00 (13/12/2011)

Avaliação:

Expression Web

A Microsoft definitivamente entrou para a briga dos editores web. Para encarar o

Dreamweaver ela lançou o Expression Web 4, que pode ser avaliado como uma

versão antiga, de uma ou duas gerações passadas, do software da Adobe. Pago mas

com diversos recursos, segue a linha do principal concorrente.

http://www.microsoft.com/expression/products/web_overview.aspx

$: US$149,00

Avaliação:

8

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Existem diversos editores HTML, ao longo deste trabalho, iremos utilizar o Amaya,

pois além de gratuito é a referência.

HTML

Hypertext Markup Language é o significado do HTML, isto é, uma linguagem de

marcação de hipertexto (texto comum também). O HTML básico segue a seguinte

estrutura:

<html>

<!—Isto é um comentário em HTML. Aqui começa a página.-->

<head>

<!—Esta parte pertence ao cabeçalho-->

<title>Título da página

</title>

</head>

<body>

<!—Aqui fica a parte visível do site-->

<p>Olá, seja benvindo ao seu primeiro site!</p>

<!—Você notou que as TAGs “<...>” sempre terminam com “</...>”?-->

</body>

</html>

Agora é com você, Construa uma página usando o HTML com o título “Página

do...(seu nome)”, e com alguns conteúdos visíveis, seu são:

9

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Página do XXX em título 1. Como??? <h1>Página do XXX</h1>

Exercício de escrita em marcação HTML em título 2. Como??? <h2>...</h2>

Exercício 1 Título 3. Como??? Última chance! <h3>...</h3>

Então, posso ir colocando <hX> enquanto quiser títulos?

Não, você pode colocar de 1 até 6.

E por que devo colocar títulos?

GOOGLE!!! Se você não colocar títulos, ele não vai te ranquear devidamente, a isto

se chama SEO (Search Engine Optimization). Saiba mais em:

http://support.google.com/webmasters/bin/answer.py?hl=pt-BR&answer=35291

Outra coisa interessante, você notou que quando uma tag é aberta (<body>, <h1>)

outra a encerra (</body>, </h1>)? Mas nem todas são assim, as tags que marcam

conteúdos devem ser encerradas, as tags que são estruturantes, como <meta />,

<hr /> e outras se autoencerram. Como?

Vamos pegar o exemplo da linha horizontal, <hr />, depois da identificação da tag,

adicione um espaço uma barra e feche. O interessante desta tag, assim como

veremos em outras, você pode adicionar atributos. Vamos ver algumas (das 91

recomendas pelo W3C) tags e atributos:

Elemento Descrição Atributos

a Link accesskey = atalho de teclado (<a accesskey=”l’’...)

href = endereço de destino (<a href=”link.html”...)

name = nome do elemento (<a name=”nome”...)

target = onde vai abrir? _self, na mesma janela,

_blank, em uma nova janela,_parent, na janela pai,

_top, no topo do documento (<a target=”_blank”...)

tabindex = ordem de uso da tecla TAB para

usabilidade (<a tabindex=”0”...)

b Negrito <b>Palavra</b>

body Corpo background = “imagem.jpg”

10

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

bgcolor = cor de fundo (#FFFFFF)

text = cor de todo texto contido no body

link = cor dos links

vlink = links visitados

alink = links ativos

hlink = ao passar o mouse sobre

br Quebra de

linha

<br /> Observe que este elemento não marca

nenhum texto, por isso se auto encerra.

div Divisão Uma div (<div>...</div>)deve conter uma classe (<div

class=”topo”>) e tudo o que for criado dentro desta

div irá obedecer o que foi criado na classe topo (Veja

mais em CSS)

em Ênfase Itálico

fieldset Caixa Cria um acaixa entorno de elementos comuns,

apenas visual.

form Formulári

o

Cria um elemento que o que estiver dentro dele,

exceto textos do formulário, será enviado.

method = post – envia os dados de forma oculta e

get que utiliza a url para enviar (veja mais na sessão

formulário)

h1 a h6 Título <h1></h1>

align = center, left, right, justify alinhamento do

texto

head Cabeçalho Informações sobre o documento como o nome,

documentos relacionados, idioma, autoria, palavras

chave, entre outros.

iframe Quadro Cria uma “janela” para outro documento

<iframe src=”documento.html” width=”100”

height=”100” scrolling=”auto|yes|no”

frameborder=”1”

align=”center|left|right|justify”></iframe>

11

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

img Imagem <img src=”imagem.jpg” width=”253” height=”128”

align=”bottom|middle|top|left|right” alt=”nome da

imagem” />

input Comunica

ção

Este é um elemento do formulário

<input

type=”text” = caixa de texto

password = senha

checkbox = caixa de “ticar”(tic|check)

radio = semelhante o check, mas permite apenas uma

opção

submit = botão de enviar

file = para procurar arquivos no seu micro

hidden = oculto. Para enviar informações.

Image = um botão com uso de alguma imagem

Button = sem ação, para uso do Javascript

li Lista Marcador ou numerador em associação com a ul ou

ol

ol Ordinate

list

Lista ordenada, numerada, associada ao li

option Opção Associada ao select

p Parágrafo <p></p>

Select Seleção <select><option

value=”XPTO”>XPTO</option>...</select>

O objetivo desta parte do curso é escrever – não é programar, HTML não é uma

linguagem, mas sim uma marcação– uma página web que seja válida, mas por que

validar uma página? Simples, todos navegadores abrirão? Todos funcionarão da

mesma forma? Todos recursos serão válidos e apresentarão os mesmos resultados?

Para validar uma página você deve estar de acordo com as regras definidas pelo

W3C - http://www.w3.org/ - e pode ser consultado seu escritório no Brasil -

http://www.w3c.br/ - e a validação pelo endereço - http://validator.w3.org/ -. PRESTE

12

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

ATENÇÃO! Estes endereços são de suma importância e merecem ser adicionados

como favoritos.

Crie a página e submeta-a, seja via endereço num servidor ou via upload. Se a página

estiver correta, o W3C lhe oferecerá um selo para o HTML,

certificando sua página.

Vamos criar a seguinte página:

Figura 1 - Primeira página HTML

Para tanto vamos começar pela estrutura básica.

1. <?xml version="1.0" encoding="iso-8859-1"?>

Nesta linha o documento é especificado como xml, codificado para o padrão

europeu ocidental de fontes.

2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

13

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

DOCTYPE é o tipo de document – de novo??? Sim, ele também pode ser um

documento tipo... – html público, seguindo as regras do W3C.

3. <html xmlns="http://www.w3.org/1999/xhtml">

Aqui começa o html. Ele obedecerá aos padrões definidos pelo W3C no endereço

referenciado.

4. <head>

Na head – que deve ser encerrada por </head> - estão as informações sobre o

documento, como título - <title>Aqui fica o título</title> - e as metatags.

5. <body>

O body contém a parte visível do site.

Títulos

Para o título vamos utilizar a tag <h1>. Esta tag abre o título de maior tamanho e

encerra com </h1>, desta forma:

<h1>Tecnologia Web I</h1>

Estes títulos podem ir de h1 à h6.

Para escrevermos os elementos textuais, vamos utilizar a tag <p>Texto</p>.

Existem diversos elementos textuais, mas vamos estuda-los aos poucos, conforme

necessidade.

Para navegar vamos utilizar a tag <a>link</a>. No entanto todo link deve ter um

endereço, assim vamos adicionar o parâmetro href que é o endereço de destino,

ficando <a href=”pagina.html”>Texto do link</a>. Podemos ainda informar

que o navegador poderá abrir uma nova página, na mesma somente no topo

quando dividida ou ainda na parte principal, usando o target, assim, <a

href=”paginas.html” target=”_parent”>nome do link</a>.

Assim como no link praticamente todas as tags de marcação aceitam mais

parâmetros formatadores como cores, tamanhos e alinhamento.

<h1><font color="#DD3333">Tecnologia Web I</font></h1>

14

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Para quebra de linha vamos utilizar o <br /> e outro elemento interessante é a linha

horizontal <hr />. Note que a quebra de linha não aceita conteúdo

(<br>Texto</br>) nem aparece, por isso não há parâmetros, no entanto a tag hr

aceita, como <hr width=”75%” align=”right” />.

Para as imagens os navegadores interpretam como tal quando há a tag <img />. Ele

vai renderizar como imagem, então é preciso informar qual com o parâmetro src,

<img src=”imagem.jpg” />, podendo estar na raiz, numa pasta

(src=”pasta/imagem.jpg”) ou num endereço da internet

(src="http://www.w3.org/Icons/valid-xhtml10), além deste elemento é importante

informar o texto alternativo alt e as dimensões width e height.

<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0

Transitional" height="31" width="88" />

15

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Aula 2

Tabelas

Para as tabelas vamos construir um passo a passo. Toda tabela começa com a tag

<table>.

<table></table> - Abre a tabela

<tr></tr> - Abre a linha

<td></td> - Abre a linha

Vamos construir uma pequena tabela de 2 x 2.

Figura 2 - Tabela 2 x 2

<table border="0" width="50%">

<tr>

<td bgcolor="#FF0000">&nbsp;</td>

<td bgcolor="#00FF00">&nbsp;</td>

</tr>

<tr>

<td bgcolor="#0000FF">&nbsp;</td>

<td bgcolor="#FFFF00">&nbsp;</td>

</tr>

</table>

Explicando:

<table border - borda com espessura 0 (invisível);

width=50% - ocupe metade da página;

<tr> - Linha;

<td> - coluna;

bgcolor – cor de fundo;

16

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Cores

Tabela 1 - Tabela de cores

Cor Código

Preto = black #000000

Branco = white #FFFFFF

Azul = blue #0000FF

Amarelo = yellow #FFFF00

Verde = green #008000

Lima = lime #00ff00

Marron = maroon #800000

Oliva = olive #808000

Azul Celeste = aqua #00ffff

Lilás = fuchsia #ff00ff

Cinza = gray #808080

Azul escuro = navy #000080

Roxo = purple #800080

Verde escuro = teal #008080

Cinza claro = silver #c0c0c0

Vermelho = red #FF0000

Junção de colunas

<table width="50%" border="1">

<tr>

<td colspan="2">&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

17

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Junção de linhas

<table width="50%" border="1">

<tr>

<td rowspan="2">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

</tr>

</table>

Linhas e colunas fundidas

<table border="1" width="50%">

<tr>

<td colspan="4">&nbsp;</td>

</tr>

<tr>

<td rowspan="2">&nbsp;</td>

<td colspan="2" rowspan="2">&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

</tr>

<tr>

<td colspan="3">&nbsp;</td>

<td>&nbsp;</td>

</tr>

</table>

18

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Aula 3

Listas

As listas podem ser ordenadas (ordinate [ol]) e desordenadas (unordinate[ul]).

Vamos ver:

Listas ordenadas

1. Item 1

2. Item 2

3. Item 3

Código HTML

<ol>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ol>

Listas desordenadas

Item 1

Item 2

Item 3

Código HTML

<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

Listas aninhadas e mistas

1. Item 1

1.1. Item 1.1

1.2. Item 1.2

2. Item 2

•Item 2.1

19

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

•Item 2.2

3. Item 3

3.1. Item 3.1

•Item 3.1.1

•Item 3.1.2

3.2. Item 3.2

Código HTML

<ol>

<li>Item 1

<ol>

<li>Item 1.1

</li>

</ol>

</li>

<ol>

<li>Item 1.2</li>

</ol>

<li>Item 2

<ul>

<li>Item 2.1</li>

<li>Item 2.2</li>

</ul>

</li>

<li>Item 3

<ol>

<li>Item 3.1

<ul>

<li>Item 3.1.1</li>

<li>Item 3.1.2</li>

</ul>

</li>

<li>Item 3.2</li>

</ol>

</li>

</ol>

20

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Aula 4

Formulários

Os formulários são os elementos de comunicação da Internet . Vamos estudar

alguns tipos e elementos.

Um formulário é iniciado com a tag <form> e se encerra com </form>. Para que se

enviem as informações, poderemos utilizar duas formas, GET e POST, sendo que a

GET utilizará a URL como meio de envio e a POST se valerá da comunicação direta

de envio de dados para o servidor via navegador, assim, as informações do GET

serão visíveis e reutilizáveis e as do POST ocultas e voláteis. Vamos ver:

<form method=”get” action=”aula4.html”>

</form>

O parâmetro action é obrigatório, pois conterá o endereço para onde as

informações serão enviadas.

Dentro do form iremos inserir os elementos à serem preenchidos, os inputs.

Texto

<input type="text" name="nome" size="50" />

Área de Texto

<textarea name=”mensagem” cols=”50” rows=”10”></textarea>

Checkbox

<input name="checkbox" type="checkbox" checked="checked" value="SIM!!!

Desejo SPAMS!!!" />

21

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Radio

<input type="radio" name="Genero" value="M" id="Genero_0" />

Menu

<select name="estado">

<option>Escolha</option>

<option value="SP">S&atilde;o Paulo</option>

<option value="MG">Minas Gerais</option>

<option value="SC">Santa Catarina</option>

<option value="RS">Rio Grande do Sul</option>

</select>

Submit

<input type="submit" value="Enviar" name="enviar" />

Existem outros tipos, mas como dito anteriormente, vamos aprender

essencialmente o necessário para a confecção do site apresentado e complementar

quando da necessidade.

Exercício

Construa um formulário para envio de um currículo. O candidato deverá cadastrar

todos os dados necessários. Escolha um currículo como padrão e desenvolva.

Sugestão:

http://candidatos.infojobs.com.br/Candidate/CV/Insert1.aspx?utm_source=inf&amp;

utm_medium=mail&amp;utm_campaign=inf_mail_bienv_can

iFrame

O iframe é um interessante comando presente no HTML para incluir uma página em

outra, isto significa que nosso formulário pode ser único e incluído em diversas

páginas. E? Bem, simples, e se o site tiver 100 páginas e seu cliente pede para incluir

ou excluir um item? Fazer 100 vezes??? iframe!

<iframe frameborder="0" scrolling="no" src="menu.html" height="15px">

</iframe>

22

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Abra o iframe, indique a espessura de sua borda, se terá barra de rolagem, qual o

caminho da página que será incorporada e suas dimensões e por fim, encerre.

Simples!

23

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Aula 5

HTML 5

O html 5 é a nova versão do html 4. Foi desenvolvido para a interoperabilidade e

padronização de plataformas e navegadores (motores).

Compare as estruturas do html4 e do 5, abaixo:

HTML 4 HTML 5 <?xml version="1.0" encoding="iso-8859-

1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="content-type"

content="text/html; charset=iso-8859-1"

/>

<title></title>

</head>

<body>

</body>

</html>

<!DOCTYPE HTML>

<html lang="pt-br">

<head>

<meta charset="UTF-8">

<link rel="stylesheet"

type="text/css"

href="estilo.css">

<title></title>

</head>

<body>

</body>

</html>

É claro que são as duas estruturas base e validadas pelo W3C.

Veja um formulário em html5:

<form method="post" action="aula5.html">

Nome:<input type="text" name="nome" placeholder="Digite seu nome!"

autofocus required /><br />

Idade:<input type="range" min="10" max="100" value="18" name="idade"

required /><br />

Busca:<input type="search" name="busca" placeholder="Busca" /><br />

Telefone:<input type="number" pattern="\([0-9]{2})[\s][0-9]{4}-[0-

9]{4}" name="telefone" /><br />

e-mail:<input type="email" required name="email" /><br />

<input type="submit" value="Enviar" />

</form>

24

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Figura 3 – Formulário em HTML5

Audio

<audio src="09 Midnight.mp3" controls="controls"></audio>

Vídeo

<video src=”video.mp4” controls=”controls”></video>

25

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Aula 6

CSS

O CSS (Cascading Style Sheet), folha de estilo em cascata é uma codificação que

pode ser incluído ou à parte da codificação html. Ele tem este nome por permitir a

herança dos estilos de pai para filho, em cascata.

Basicamente o CSS obedece a seguinte estrutura:

Seletor {Propriedade: Valor}

Ou seja...

O seletor é uma tag html ou uma classe que você poderá criar, como <h1>, <p>,

<img>, ou no caso das classes, .topo, .navegacao, .rodape. Note que as classes são

iniciadas com um ponto e NUNCA possuem acentos, espaços, caracteres especiais,

etc. Exemplos:

p { color: #FFFFFF}

Todos os parágrafos da página html terão cor branca. Observe que no CSS os sinais

“<” e “>” não são escritos.

h1 { color: #000000; background-color: #ffff00; font-style: italic;

text-align: right; }

ou

img {

float: left;

padding: 5px;

}

No primeiro exemplo a cor dos títulos será preta, o background amarelo, com a

fonte itálica alinhada à direita, no segundo exemplo a imagem está alinhada à

esquerda, independente do texto, por isso o float e com um distanciamento de 5

pixels de qualquer objeto. Os dois casos são válidos, porém no primeiro, o ; separa

as instruções, assim como no segundo que está separado por linhas.

Há também os casos de multivaloração, como:

h1{

font-family: "Times New Roman";

color: #AAFFDD;

26

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

text-shadow: /*0.1em 0 0.2em #88AAFF,*/ -0.1em 0 0.2em #88AAFF, 0

0.1em 0.2em #88AAFF/*, 0 -0.1em 0.2em #88AAFF*/;

font-size: 50px;

text-align: center;

}

Veja o seletor text-shadow, que cria sombras no texto que ele trabalha da seguinte

forma: Deslocamento para a direita (para esquerda coloque um valor negativo),

para cima (adivinhe como faz para ser para baixo...), sua difusão, 0 para cópia

idêntica do texto e quanto maior o valor maior a difusão e por fim a cor. Ele pode

ter várias sombras, por isso é multivalorado.

Você viu o comentário /*...*/?

Quando a fonte tiver espaço no nome, adicione aspas.

Seletores class e id

Um seletor class aplica-se à toda gama que for identificada como pertencente à

uma classe, assim:

p.destaque {color: #ff0000; }

Dentro de um parágrafo que possuir a classe destaque obedecerá à esta

configuração, exemplo:

<p class=”destaque”>Oferta!</p>

Já para os seletores id, identificados pelo #, o css será aplicado somente à aquela

instância, assim:

#topo {font-family: Tahoma;}

No html:

<div id=”topo”>Título</div>

Quando queremos aplicar um design diferenciado à uma parte específica de uma

página, criamos as divs.

No CSS

.topo {

font-family: "Eras Demi ITC";

font-size: 50px;

color: #0099CC;

background-color: #000066;

}

Alguns exemplos

27

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

/*Isto é um comentário*/

body{

margin: 0 0 0 0;

background-color:#009966;

font-family:Tahoma, Geneva, sans-serif;

}

h1{

font-family:"Times New Roman", Times, serif;

font-size:50px;

color:#009966;

text-shadow:5px 5px 10px #FFF, -5px 5px 10px #FFF, 5px -5px 10px

#FFF, -5px -5px 10px #FFF;/*exceto IE*/

}

p:first-letter{

font-family:Tahoma, Geneva, sans-serif;

color:#FFF;

letter-spacing:0.5em;

font-size:50px;

text-shadow: 5px 5px 10px #ccc, -5px 5px 10px #ccc, 5px -5px

10px #ccc, -5px -5px 10px #ccc;

}

.classe_a{

margin:0 5px 10px 20px;

padding:0 5px 10px 20px;

background-color:#CCC;

font-family:"Courier New", Courier, monospace;

color:#003;

}

.classe_b{

background-color:#FFF;

float:right;

width:10%;

}

p{

border: solid 1px white;

border-radius: 1em;

box-shadow: black 0.5em 0.5em 0.3em;

background:#FFF;

}

Listas

Vamos criar uma lista?

Item 1

Item 2

Item 3

Item 4

Item 5

A codificação será assim:

HTML

28

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

<div id="navcontainer">

<ul id="navlist">

<li id="active"><a href="#" id="current">Item one</a></li>

<li><a href="#">Item two</a></li>

<li><a href="#">Item three</a></li>

<li><a href="#">Item four</a></li>

<li><a href="#">Item five</a></li>

</ul>

</div>

CSS

None

Para fazer com que os pontos da lista sejam quadrados, escreva o CSS assim:

#navlist li { list-style-type: square; }

Mas por quê???

Você notou no html que o id da lista é navlist? O CSS pode ser feito com um . no

lugar do #.Então os itens li dentro do navlist terão o tipo de estilo de lista quadrado,

square.

Ok, mãos à obra!

Crie listas com outros elementos como imagens e símbolos do word.

Agora vamos criar a seguinte lista:

Neste caso foram criadas linhas separadoras, vejamos o código

HTML

<div id="navcontainer">

<ul id="navlist">

<li id="active"><a href="#" id="current">Item um</a></li>

<li><a href="#">Item dois</a></li>

<li><a href="#">Número três</a></li>

<li><a href="#">Item quatro</a></li>

<li><a href="#">O ponto cinco</a></li>

</ul>

</div>

29

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

CSS

#navlist

{

padding-left: 0;

margin-left: 0;

border-bottom: 1px solid gray;

width: 200px;

}

#navlist li

{

list-style: none;

margin: 0;

padding: 0.25em;

border-top: 1px solid gray;

}

#navlist li a { text-decoration: none; }

30

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Aula 7

CSS – Menu cascata

Agora vamos elaborar um menu de navegação em cascata.

Primeiro precisamos elaborar uma lista de possíveis links em html.

<ul>

<li><a href="#">link1</a>

<ul>

<li><a href="#">link1.1</a></li>

<li><a href="#">link1.2</a></li>

</ul>

</li>

<li><a href="#">link2</a>

<ul>

<li><a href="#">link2.1</a></li>

<li><a href="#">link2.2</a></li>

</ul>

</li>

<li><a href="#">link3</a>

<ul>

<li><a href="#">link3.1</a></li>

<li><a href="#">link3.2</a></li>

</ul>

</li>

<li><a href="#">link4</a>

<ul>

<li><a href="#">link4.1</a></li>

<li><a href="#">link4.2</a></li>

</ul>

</li>

</ul>

O resultado deverá ser este:

31

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

O primeiro passo é eliminar os marcadores de texto. Crie um arquivo CSS e escreva:

ul {

list-style:none;

}

Agora vamos fazer com que os subitens(li) da lista (ul) fiquem ocultos.

li ul{

display:none;

}

Mas se ficarem ocultos, não vai ter graça, eles devem ser acessíveis!

li:hover ul {

display:block;

}

Agora ele vai ficar se remoldando o menu em cada vez que eu passar sobre os itens?

li ul{

position: absolute;

display:none;

}

Você reparou que é o mesmo item já anteriormente criado? A posição dele foi

definida como absoluta, ou seja, depende do valor inserido, como não há ainda, ele

obedece ao fim do parágrafo escrito, o link pai.

Adicione então, o comando left: 200px;, pois iremos definir que a largura do

menu será de 200 pixels, em ul, com o comando width: 200px;.

Agora vamos fazer o alinhamento dos subitens (li) dentro das uls. Espera! Não

entendi! Não era isso que foi criado?

A ul li vai comandar a ul pai e suas li. Já a li ul vai comandar os subitens, as

listas (ul) dentro das lis. Tem certeza? Vamos ver...

ul li{

position:relative;

border:#CCC 1px solid;

}

li ul{

position: absolute;

left: 200px;

top: 0;

display:none;

background-color:#CCC;

}

Observe que não foram criados novos seletores, apenas adicionamos propriedades

aos já criados, com exceção da ul li.

32

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Na ul li a posição é relativa ao site e adicionamos uma borda à ele, já na li ul, a

posição é absoluta, depois do bloco ul li e um background cinza para ilustrar onde

age cada seletor.

Mas e aquele top: 0;? Alinha o menu ao topo da ul li.

Agora começam alguns elementos de design que ajudarão na identificação.

Observe os seletores:

li:hover ul {

display:block;

}

Ok, este já existia, nem vamos mais mexer nele.

ul li:hover{

background-color:#CCC;

}

Este é o novo, é o comportamento dentro da ul pai, no seletor li quando passar

sobre, pinte de cinza, afinal a ul dentro da li é cinza, (li ul).

Adicione o seletor valorado padding: 5px; na ul e na ul li.

ul li a{

display:block

padding: 5px;

}

Para exibir os links.

Veja agora o código completo, para os efeitos visuais.

body{

margin 0 0 0 0;

}

ul{

list-style:none;

border: #CCC 3px solid;

width: 200px;

padding: 5px;

background-color:#FFF;

}

ul li{

position:relative;

border:#CCC 1px solid;

padding: 5px;

}

li ul{

position: absolute;

left: 199px;

top: 0;

33

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

display:none;

background-color: #CCC;

}

ul li a{

display:block;

text-decoration:none;

padding: 5px;

border: 1px solid #CCC;

border-bottom:0;

background-color:#CCC;

}

li:hover ul {

display:block;

}

Remova a linha...

ul li:hover{

background-color:#CCC;

}

Não tem mais função, claro.

Cara, muito legal!!! Mas.... e se tiver mais um nível?

<ul>

<li><a href="#">link1</a>

<ul>

<li><a href="#">link1.1</a></li>

<li id="pre"><a href="#">link1.2</a>

<ul id="sub">

<li><a href="#">link1.2.1</a></li>

<li><a href="#">link1.2.2</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">link2</a>

<ul>

<li><a href="#">link2.1</a></li>

<li><a href="#">link2.2</a></li>

</ul>

.

.

.

.

Esta parte foi adicionada. Veja que agora a ul tem um id e um li também.

Então fica fácil!

34

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Adicione estas duas linhas, pois elas agem diretamente no item identificado(id).

ul#sub{

display:none;

}

li#pre:hover ul#sub{

display:block;

}

E se for horizontal?

CSS

body{

margin 0 0 0 0;

}

ul {

list-style:none;

border: #69C 3px solid;

padding:3px;

background-color:#CCC;

width: 25%;

text-align:center;

border-radius: 2em;

box-shadow:#000 10px 10px 10px;

}

li{

border: #FFF 1px solid;

padding: 2px;

background-color #CCC;

}

ul li{

display:inline;

padding: 2px;

}

li ul{

display:none;

position:absolute;

padding: 3px;

}

li:hover ul {

display:block;

}

.links a:hover{

color:#69C;

text-decoration:underline;

}

HTML

35

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

<ul>

<li><a href="#">link1</a>

<ul>

<li class="links"><a href="#">link1.1</a></li>

<li><a href="#">link1.2</a></li>

</ul>

</li>

<li><a href="#">link2</a>

<ul>

<li><a href="#">link2.1</a></li>

<li><a href="#">link2.2</a></li>

</ul>

</li>

.

.

.

36

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Aula 8

Float

O float é a flutuação de um objeto. Ele aceita somente o alinhamento à esquerda ou

à direta.

Crie uma imagem alinhada à esquerda e o texto à sua direita, assim:

Para este efeito o código será:

CSS

None

HTML

<p>

<img src="images/image.gif" alt="" width="100" height="100">Lorem

ipsum dolor sit amet, consectetuer...

</p>

Para alinhas o quadrado à direta, adicione o código:

CSS

.floatright { float: right; }

HTML

<p>

<img class="floatright" src="images/image.gif" alt="" width="100"

height="100">Lorem ipsum dolor sit amet, consectetuer...

</p>

37

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

CSS

.floatright { float: right; }

HTML

<p>

<img class="floatright" src="images/image.gif" alt="" width="100"

height="100">Lorem ipsum dolor sit amet, consectetuer...

</p>

CSS

.floatright

{

float: right;

margin: 0 0 10px 10px;

}

HTML

<p>

<img class="floatright" src="images/image.gif" alt="" width="100"

height="100">Lorem ipsum dolor sit amet, consectetuer...

</p>

38

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

CSS

.floatright

{

float: right;

margin: 0 0 10px 10px;

border: 1px solid #666;

}

HTML

<p>

<img class="floatright" src="images/image.gif" alt="" width="100"

height="100">Lorem ipsum dolor sit amet, consectetuer...

</p>

CSS

.floatright

{

float: right;

margin: 0 0 10px 10px;

border: 1px solid #666;

padding: 2px;

}

HTML

<p>

<img class="floatright" src="images/image.gif" alt="" width="100"

height="100">Lorem ipsum dolor sit amet, consectetuer...

39

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

</p>

CSS

.floatright

{

float: right;

margin: 0 0 10px 10px;

border: 1px solid #666;

padding: 2px;

}

HTML

<p>

<img class="floatright" src="images/image.gif" alt="" width="100"

height="100">Lorem ipsum dolor sit amet, consectetuer...

</p>

Desenho com CSS

Vamos desenhar um quadrado com quatro cores diferentes.

HTML

<div class="quadcolor" id="quadcolor"></div>

O CSS

.quadcolor {

width: 50px;

height: 50px;

border: 15px solid;

border-color: #FF0 #00F #0F0 #F00;

}

E o resultado...

40

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Ok. Se é possível construir com 4 bordas de cores diferentes e o centro vazio, por

que não com 2 cores diferentes e sem centro?

HTML

<div class="triangulo" id="triangulo"></div>

E o CSS

.triangulo{

width: 0;

height: 0;

border-bottom: 50px solid;

border-left: 50px solid;

border-right: 50px solid;

border-top: 50px solid;

border-color: #009966 #009966 #F00 #F00;

}

E se quiséssemos

Criar um triangulo não triangulo-retângulo?

41

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

<HTML> <HEAD> <TITLE>Titulo</TITLE> </HEAD> <BODY> </BODY> </HTML>

Aula 9

Javascript

Vamos aprender passo-a-passo. Então, para quê o JAVASCRIPT?

O Javascript é uma linguagem tipo script, ou seja, é

interpretada linha a linha, para executar funções em

seu navegador, esteja ele online ou não.

Agora que conhecemos o HTML e o CSS, podemos

entender um pouco mais de Javascript.

A estrutura HTML segue um padrão único. Dentro desta estrutura vamos posicionar

nosso Javascript. Primeiramente no próprio arquivo HTML, depois em um arquivo

externo.

De forma geral os scripts podem ser escritos dentro da HEAD, por uma razão

simples. ORGANIZAÇÃO! Organize-se, chega de ser bagunceiro!

Mas e se eu colocar fora?

Vai funcionar do mesmo jeito, mas naquela bagunça. Onde é HTML, CSS, PHP, JS....

O script se escreve assim:

<script> e terminamos com </script> Mas que tipo de script?.... Ok, vamos especificar então.

<script type="text/javascript"> e encerrado simplesmente com </script>,

ok?

Mas nem todo lugar precisa ter uma inscrição de script, como dentro das TAGs

HTML que já aceitam o Javascript por natureza de seus navegadores.

O JavaScript pode escrever frases no navegar e deve ser chamado com o

manipulador de eventos do HTML onload, dentro do body, veja:

<script type="text/javascript">

42

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

function olaMundo()

{

var msg = "Olá Mundo!!!";

document.open();

document.write(msg);

document.close();

}

</script>

E no body…

<body onload="olaMundo()">

Você também pode associar funções, como o caso do alert.

<body onload="alert('Olá mundo!');">

Outros manipuladores de eventos:

onclick = quando o mouse clicar sobre o item;

onmouseover = quando o mouse passar sobre o elemento;

onmouseout = quando o mouse sair sobre o elemento;

onfocus = quando o elemento receber o foco, seja pelo mouse ou pelo teclado;

onblur = quando o elemento perder o foco.

Estes manipuladores podem ser associados ao body ou ao img, afinal são associados

ao carregamento de algo.

Vamos lá, respire fundo, tome muita coragem e teste! Teste até doer, mas teste!!!

Incrível não? Até você deve estar se achando inteligente, mas calma, as coisas não

acabaram faltam muitas páginas...

Agora vamos escrever um pouco. Um texto pode ser escrito pelo JavaScript da

seguinte forma:

1. <script type="text/javascript"> 2. //Isto é um comentário de uma linha 3. /*E este é 4. de múltiplas linhas.*/ 5. document.write("Código JavaScript"); 6. </script>

43

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Alert

A função alert serve para situações em que o usuário deverá ver o alerta, como no

preenchimento de formulário ou ao ler um texto.

Escreva!

<script type="text/javascript">

alert("Clique em 'OK' para formatar seu micro!");

</script>

Observe que a palavra OK está com aspas simples, isto por que se você colocar

aspas duplas o texto se encerrará ali! Dentro das aspas duplas, somente as simples.

Compreendeu 02?

Mas e se eu quiser que o texto tenha aspas duplas? Simples! Adicione \ antes das

aspas duplas, assim.

alert("Clique em \"OK\" para formatar seu micro!");

Então quer dizer que se eu escrever vai aparecer esta janela?

Figura 4 – Alert

E onde é que eu escrevo?

Se você escrever antes do <title> antes dele o popup irá se apresentar, se escrever

antes do <body>, adivinhe! Então escreva onde melhor lhe convir!

Quer uma boa sacada?

Como funciona o carregamento do HTML?

O desafio é fazer aparecer um popup explicativo para cada parte (antes dela) a ser

carregada.

Então vamos fundir o CSS aprendido antes com o Javascript.

44

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Crie um formulário com 2 botões para alterar o visual e carregar CSSs diferentes.

Vamos criar um CSS assim:

1. body{ 2. margin: 0 0 0 0; 3. background-color: #99DDFF; 4. } 5. .caixa1{ 6. background-color: #88AAFF; 7. width: 100px; 8. height: 100px; 9. position: absolute; 10. top: 150px;

11. left: 50px;

12. border: solid navy 2px;

13. }

14. .caixa2 {

15. background-color: #009966;

16. width: 300px;

17. height: 400px;

18. position: absolute;

19. top: 150px;

20. left: 200px;

21. border: dashed #00FF99 2px;

22. font-family: 'Times New Roman',Times,serif;

23. font-size: 50px;

24. text-align: center;

25. color: white;

26. }

No HTML vamos criar duas DIVs, assim:

1. <?xml version="1.0" encoding="iso-8859-1"?> 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4. <html xmlns="http://www.w3.org/1999/xhtml"> 5. <meta http-equiv="content-type" content="text/html; charset=iso-

8859-1" />

6. <title>Tecnologia Web I - Javascript</title> 7. <!—-Link o CSS à página --> 8. <link rel="stylesheet" href="twi.css" type="text/css" /> 9. </head> 10. <body>

11. <h1>Tecnologia Web I - Javascript</h1>

12. <hr id="hrsup" width="75%" />

13. <div class="caixa1" id="cx1">Leia a primeira linha<br

/>EWM3</div>

14. <div class="caixa2" id="cx2">Agora você consegue ver?<hr

/>EWM3<hr /> CEGO!!!</div>

15. <!—formulário -->

16. <form action="">

17. <input type="button" value="Visual 1"

onclick="visual1();"></input>

18. <input type="button" value="Visual 2"

onclick="visual2();"></input>

19. </form>

45

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

20. <hr id="hrinf" width="75%" />

21. </body>

22. </html>

Agora vamos criar o script para interagir com o HTML, na HEAD.

<script type="text/javascript">

//função 1

function visual1(){

var tipo = document.getElementById('cx1');

if(tipo.style.visibility == 'hidden')

tipo.style.visibility='visible';

else

tipo.style.visibility='hidden';

}

//função 2

function visual2(){

var tipo = document.getElementById('cx2');

if(tipo.style.display=='none')

tipo.style.display='inline';

else

tipo.style.display='none';

}

</script>

Na função 1, primeiro crie a função. visual1.

Crie uma variável chamada tipo. À esta variável vamos pedir gentilmente ao

javascript para localizar neste document o elemento cx1 com o uso da função

getElementById, que como diz o nome, seleciona o elemento pelo id.

Com o uso da função if (SE), com a seguinte condição, se a variável tipo, a style

visibility for igual à hidden, ou seja, se estiver oculta, estabeleça como visible,

se não (ELSE), esconda (hidden).

A função 2, é semelhante, porém utiliza as funções CSS display. A diferença é que a

visibility esconde o conteúdo, mas mantém a área da camada da DIV e a display

oculta tudo, conteúdo e camada.

Por fim, para efeito de validação junto ao W3C, para permitir a validação com o

Javascript na forma correta, seu comentário indicativo de javascript é:

<script type="text/javascript">

//<![CDATA[

function ...

e encerrado;

//]]>

</script>

46

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

E caso o navegador não possua o Javascript habilitado, use a função

<noscript></noscript> com uma frase indicando que o Javascript não está habilitado

para este navegador.

47

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Aula 10

Aritmética, controladores, repetidores e

funções

A aritmética é simples!

<script type="text/javascript">

//<![CDATA[

//aritmética

//A função receberá os controles desejados e será chamada por

algum disparador

function resultado(){

//Crie as variáveis e atribua valores à elas

var b1 = 5;

var b2 = 6;

//Realize a operação

var resultado = ((b1+b2)/2);

//diga como mostrar o resultado

alert(resultado);

}

//]]>

</script>

E este é o disparador:

<p onclick="resultado();">Calcule!</p>

Também podemos criar, no lugar do alert, o document.write();.O que se deve

prestar atenção é que o segundo modo, quando na head, ele deve abrir, escrever e

fechar, senão irá ficar carregando indefinidamente, experimente:

<script type="text/javascript">

//<![CDATA[

//aritmética

function resultado(){

var b1 = 5;

var b2 = 6;

var resulta = (b1+b2)/2;

//alert(resultado);

//document.open();

document.write(resulta);

//document.close();

}

//]]>

</script>

Remova os comentários das funções document.open(); e document.close(); e

teste novamente.

48

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Conversões

<script type="text/javascript">

var numero;

document.write("<p>"+typeof(numero)+"</p>");

numero = 5.5;

document.write("<p>"+typeof(numero)+"</p>");

numero = "TecWebI";

document.write("<p>"+typeof(numero)+"</p>");

numero = true;

document.write("<p>"+typeof(numero)+"</p>");

//concatenar

numero = "34";

document.write("<p>"+(numero+1)+"</p>");

//aritmética

numero = "34";

document.write("<p>"+(30+numero-1)+"</p>");

numero = "34";

document.write("<p>"+(Number(numero)+1)+"</p>");

numero = "34twi";

document.write("<p>"+(parseFloat(numero))+"</p>");

numero = "34.5";

document.write("<p>"+(parseInt(numero))+"</p>");

</script>

Operadores

Igualdade, while, do…while, for.

<script type="text/javascript">

//<![CDATA[

//primeiro se declara a variável, que pode ter ou não um

valor atribuído

var A;

var B;

//agora atribua um valor às variáveis

A = 10;

B = A - 5;

alert("O valor de B é: "+B);

function operIgual(){

var numA = 3.0;

var numB = "3.0";

if(numA == numB){

alert("São inguais quenem!!!");

}

else{

alert("São indisiguais um do outro nos dois!");

}

}

//Operador de igualdade de valor e de string (===)

function operFullIgual(){

var numC = 3.0;

var numD = "3.0";

if(numC === numD){

alert("São inguais quenem!!!");

}

49

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

else{

alert("São indisiguais um do outro nos dois!");

}

}

//operador lógico (>, <, >=, <=)

function operLogico(){

var numE = 5;

var numF = 10;

var comparCondic = (numE >= numF) ? "O valor de numE

("+numE+") é menor que "+numF : "O valor de numE ("+numE+") é menor

que "+numF;

alert(comparCondic);

}

//while

function operEnquanto(){

var numG = "";

var numH = 5;

while (numH <= 10){

numG+=numH;

numH++;

}

alert(numG);

}

//do...while

function operPorEnquanto(){

var numI = "";

var numJ = 15;

do{

numI+=numJ;

numJ++;

}

while (numJ <= 20);

alert(numI);

}

//for

function operFor(){

for (var numK = 0; numK < 10; numK++){

document.writeln(numK);

}

}

//]]>

</script>

Temporizadores, Alert, Prompt, Confirm.

Os temporizadores são funções interessantes que podem ter diversas aplicações,

desde animações, repaginações até interações com o usuário.

Vamos começar a construir um javascript e adicionar o comando setTimeout que

dispara APENAS UMA VEZ.

<script type="text/javascript">

//<!CDATA[

function tempoAlertaUnico(){

setTimeout("alert('Então, dormiu? Vamos

trabalhar?');", 5000);

}

50

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

//]]>

</script>

Claro, toda função pressupõe um disparador, um manipulador de evento. Vamos

utilizar o manipulador de evento onload no body.

<body onload="tempoAlertaUnico();">

Já o temporizador setInterval é disparado indefinidamente.

function tempoAlertaConstante(){

setInterval("alert('Alerta a cada 5 segundos');", 5000);

}

Como regra geral, os temporizadores funcionam com a seguinte sintaxe:

função("ação", tempo);

Trabalho:

Crie uma página com um smile e depois de 10 segundos ele ficará triste.

Agora vamos fazer o seguinte, não basta o smile ficar triste, se o usuário deixar de

interagir ele ficará triste. Para interagir vamos criar um prompt box em que o

usuário irá escrever seu nome.

function cumprimento(){

var usuNome = prompt("Qual seu nome?", "Digite seu nome aqui, por

favor...");

var comprNome = usuNome.length;

if(usuNome!=""){

alert("O nome "+ usuNome +" tem "+comprNome+" letras.");

}

}

Como dito antes, pelo fato de ter sido criada uma função (function) deve ser

criado um gatilho.

<p onclick="cumprimento();">Clique aqui e saiba!</p>

Agora que você já conhece os passos, crie um site que o smile apareça sorrindo, se

em 10 segundos o usuário não interagir, ele ficará triste, mas se interagir, ele deve

voltar a ficar feliz.

Claro, eu sei que você espera a resposta, mas pense antes de ver.

.

.

.

51

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Vai desistir?

.

.

.

<html>

<head>

<title>TecWeb I - Javascript - Aula 4</title>

<link rel="stylesheet" href="twi.css" type="text/css" />

<script type="text/javascript">

//<!CDATA[

function demora(){

setTimeout("document.getElementById('ovo').src='img/ovo.gif';", 5000);

}

function cumprimento(){

var usuNome = prompt("Qual seu nome?", "Digite seu

nome aqui, por favor...");

var comprNome = usuNome.length;

if(usuNome!=""){

alert("O nome "+ usuNome +" tem "+comprNome+"

letras.");

document.getElementById('ovo').src='img/ovo_sorrindo.gif';

setTimeout("document.getElementById('ovo').src='img/ovo.gif';", 5000);

}

}

//]]>

</script>

</head>

<body onload="demora();">

<p>Quantas letras tem seu nome?</p>

<p onclick="cumprimento();">Clique aqui e saiba!</p>

<img alt="Ovo" src="img/ovo_sorrindo.gif" id="ovo" />

</body>

</html>

Por fim, vamos aprender o confirm. Os valores do confirm são: false e true.

Vamos fazer uma instrução simples, ao passar o mouse sobre a figura, ele emitirá

um comfirm box com um pergunta simples, assim:

function confirma(){

var confirma = confirm("É sua última chance, vou ficar triste!");

if(confirma == true){

history.back();

}

Então, ficou assim, se o usuário responder OK, ou seja, true, se ele concorda com a

pergunta, ele retornará à página anterior (history.back), caso contrário, o tempo

continua, a fila anda!

52

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Aprendeu?

Agora é o seguinte, se em 10 segundos o usuário não responder corretamente a

pergunta, ele voltará uma página. Utilize as funções history.back, prompt, if/else

e temporizadores.

Tente!

Agora vamos tentar adicionar uma função bem interessante: Redimensionar o

conteúdo conforme o tamanho o browser.

Na mesma página vamos fazer o seguinte:

function adapta(){

document.getElementById('ovo').style.height="50%";

}

E vamos adicionar o manipulador de evento onresize no body.

<body onload="demora();" onresize="adapta();">

SIM! Podemos ter dois manipuladores!!!

Experimente!

Aula 11

Rollovers

Como criar um menu de navegação?

Bem o primeiro passo é criar os botões, precisaremos de 3 imagens, uma para o

botão normal, outra para quando o passar o mouse sobre a imagem para que ela

pareça que salta e a terceira para quando pressionado.

O rollover é bem simples, precisamos primeiro exibir uma imagem, assim:

<img alt="Ovo" src="img/ovo.gif" id="ovo">

Agora vamos adicionar um manipulador de evento onmouseover.

53

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

…onmouseover="this.src='img/ovo_sorrindo.gif';">

Nesta linha dentro do manipulador adicionamos o this para chamar o objeto

onmouseover [quando um manipulador chama uma função ele deve ter o nome

dela, quando não há função, atribui-se o this], o src, tem a mesma função do html,

para informar qual imageme onde ela se encontra.

Verifique se funcionou!

Para que haja a troca ao passar o mouse sobre o botão, adicione o manipulador

onmouseout.

...onmouseout="this.src='img/ovo.gif';">

Verifique!

Agora, para os botões funcionem como tal, vamos adicionar a função de

redirecionamento com o manipulador onclick.

…onclick="location.assign('endereco.html');"…

Ok, mas eu estava reparando e a imagem demora para trocar, não é?

Para evitar que a imagem só troque depois de carregada, vamos adicionar o

seguinte script:

<script>

var img1 = new Image();

img1.src="img/img1.gif";

var img2 = new Image();

img2.src="img/oimg2vo_sorrindo.gif";

</script>

E no html, basta substituir as imagens de:

onmouseover="this.src='img/ovo_sorrindo.gif';"

por:

onmouseover="this.src=ovoSorrindo.src;"

E para finalizar, ao clicar, chamaremos a 3ª imagem:

onmousedown="this.src='img/img3_pressionado.gif';">

Mas aprender a dar más vindas ao site é fácil, eu quero resolver problemas!!!!

Ok, então o problema é esse: Você foi contratado para trabalhar numa agência de

webdesign a designwebdesign e a página de um de seus clientes não estava lá

grande coisa...

54

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

O símbolo do cliente, um OVO, deveria interagir com as pessoas ao entrar. O cliente

também queria que a pessoa fosse ao menos cumprimentada, pelo nome, claro. O

que devemos pensar então?

1. Crie o HTML;

2. Vamos criar uma função chamada clicaOvo. Assim: function clicaOvo();

Toda função tem os parênteses para poder neles, inserir os parâmetros da

função.

3. Dentro desta função vamos criar uma variável para receber o nome do

caboclo, conforme o cliente pediu, assim: var usuario.

var é a função que cria uma variável e usuario (sem acento) é o nome da variável.

a. Nesta variável vamos adicionar o comando prompt que irá abrir uma

caixa que permitirá o usuário escrever seu nome, assim: prompt();

Quer pronto? Então sofra!

1. <HTML>

2. <HEAD>

3. <TITLE>Tecnologia Web I</TITLE>

4. <link rel="stylesheet" href="twi.css" type="text/css" />

5. <script type="text/javascript">

6. function clicaOvo () {

7. var usuario = prompt("Diga seu nome, o mané!", "Adivinha onde você deve escrever,

estúpido... É! Aqui!!! Homo Sapiens nem tão Sapiens...");

8. if (usuario) {

9. alert ("O... "+usuario + ", boa sorte. Você vai precisar...");

10. document.getElementById("ovoimg").src = "img/ovo_sorrindo.gif";

11. } //Você consegue reparar na linha 6, onde abre a funcition? Veja que lá é aberta a

primeira chave"{" que é fechada aqui.

12. } //E na linha 8 é a berta a segunda, que se encerra aqui. Dãããããã...

13. </script>

14. </HEAD>

15. <BODY onload="alert('Olá mundo!');">

16. <h1>Tecnologia Web I</h1>

17. <img src="img/ovo.gif" id="ovoimg" alt="Ovo" onclick="clicaOvo();" />

18. </BODY>

19. </HTML>

Aula 12

Validação de campos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

55

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

<meta http-equiv="content-type" content="text/html; charset=UTF-8"

/>

<title>Javascript</title>

<script type="text/javascript">

//<![CDATA[

function validaForm(){

var email = document.form.email.value;

if(email==""||email==null||email.length<=5||email.value.indexOf(

'@')==-1||email.value.indexOf('.')==-1{

alert("O campo e-mail não foi preenchido corretamente.

BURRO!");

email.focus();

return false;

}

}

//]]>

</script>

</head>

<body>

<h1>Tecnologia Web I</h1>

<h2>Javascript</h2>

<form name="form" method="post" action="teste.html" onsubmit="return

validaForm()">

<label>e-mail:</label><br /><input name="email" type="text" /><br />

<input name="enviar" type="submit" value="Enviar" />

</form>

<p>

<a href="http://validator.w3.org/check?uri=referer"><img

src="http://www.w3.org/Icons/valid-xhtml10"

alt="Valid XHTML 1.0 Transitional" height="31" width="88"

/></a>

</p>

</body>

</html>

Relógio

<script type="text/javascript">

function relogio(){

momentoAtual = new Date();

hora = momentoAtual.getHours();

minuto = momentoAtual.getMinutes();

segundo = momentoAtual.getSeconds();

imprimir = hora + " : " + minuto + " : " + segundo;

document.form_relogio.relogio.value = imprimir;

setTimeout("relogio()",1000);

}

</script>

...

<body onload="moveRelogio()">

56

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Aula 13

Animações

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>TecWeb I - Javascript - Aula 5</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-

8859-1">

<link rel="stylesheet" href="twi.css" type="text/css" />

<script type="text/javascript">

//<![CDATA[

//toda function precisa de um manipulador de evento

//neste caso, o manipulador está na própria função(onload)

//------------------------------------------------------------

window.onload=function (){

//estabeleça a cor de fundo à DIV bloco

document.getElementById("bloco").style.backgroundColor="#99DDFF";

//com o setTimeout, em 300 milisegundos, mude o valor para

255

setTimeout("mudaCor(255)",300);

}

//------------------------------------------------------------

//crie uma função com uma variável chamada novaCor

function mudaCor(novaCor){

//crie uma variável valHexa com a função toString(16)

//esta função serve para transformar os valores em hexadecimal

var valHexa = novaCor.toString(16);

//quando os valores atingirem números menores que 2

dígitos (100, 99, 98...)

if (valHexa.length < 2){

//adicione um 0 à ele

valHexa= "0" + valHexa;

}

//adicione este valor à codificação da cor, na posição

desejada

//"#" + valHexa + "ffff"

//"#ff" + valHexa + "ff"

//"#ffff" + valHexa + "ff"

var valorDaCor = "#" + valHexa + "ffff";

var divBloco = document.getElementById("bloco");

divBloco.style.backgroundColor=valorDaCor;

//se a nova cor criada for maior que 0, ou seja, o fim do

processo

if (novaCor > 0){

//decremente 5 do valor

novaCor-=5;

//e altere bruscamente a cor, em 50 milisegundos

setTimeout("mudaCor(" + novaCor + ")", 50);

}

}

//]]>

</script>

</head>

<body>

<div id="bloco">

57

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

<h1 id="titulo">Tecnologia Web I - Javascript - Aula 5</h1>

<hr id="hrsup" width="75%" />

<img alt="Ovo" src="img/ovo_sorrindo.gif" id="ovo" />

<p></p>

</div>

<a href="js_aula4.html">Aula 4</a> | <a

href="js_aula6.html">Aula 6</a>

<hr id="hrinf" />

</body>

</html>

Agora o código limpo

<script type="text/javascript">

//<![CDATA[

window.onload=function (){

document.getElementById("bloco").style.backgroundColor="#FFFFFF";

setTimeout("mudaCor(255)",1000);

}

function mudaCor(novaCor){

var valHexa = novaCor.toString(16);

if (valHexa.length < 2){

valHexa= "0"+valHexa;

}

var valorDaCor = "#FFFF"+valHexa;

var divBloco = document.getElementById("bloco");

divBloco.style.backgroundColor=valorDaCor;

if (novaCor > 0){

novaCor-=5;

setTimeout("mudaCor(" + novaCor + ")", 50);

}

}

//]]>

</script>

Aula 14

Aula 15

58

Prof. Erwin Alexander Uhlmann – www.institutosiegen.com.br

Bibliografia

HOGAN, Brian P. Web Design para Desenvolvedores. Rio de Janeiro. Editora Ciência

Moderna, 2011.Pressman, Roger S. Engenharia Web. Rio de Janeiro. LTC, 2009.

PRESSMAN, Roger S. Engenharia Web. Rio de Janeiro. LTC, 2009.

CYBIS, Walter. Ergonomia e Usabilidade: conhecimentos, métodos e aplicações. São

Paulo. Novatec, 2007.

SILVA, Maurício Samy. Construindo sites com CSS e (X)HTML: sites controlados por

folhas de estilo em cascata. São Paulo. Novatec, 2008.

POWERS, Shelley. Aprendendo Javascript. São Paulo. Novatec, 2010.

SILVA, Maurício Samy. Criando sites com HTML: sites de alta qualidade com HMTL e

CSS. São Paulo. Novatec, 2008.


Recommended