Tecnologias para Programação de Interfaces Web PDF

TECNOLOGIAS BSICAS
PARA PROGRAMAO DE
INTERFACES WEB
ESTRUTURA DA APRESENTAO
HTML BSICO
Alguns conceitos bsicos...

URL - Uniform Resource Locator
identificador dos objetos na rede

protocolo://servidor/path/arquivo
http://www.bacen.org.br/~emprel
HTTP - Hypertext Transfer Protocol
protocolo bsico da Web

simples e leve
no mantm estado
HTTP
HTML - HyperText Markup
Language
Linguagem padro para pginas Web

Linguagem de marcao
divide o texto em diferentes pedaos identificados

por tags (elementos de marcao)
<h1>Exemplo de cabealho</h1>
Os navegadores encarregam-se de interpretar

os tags e formatar o texto adequadamente
Tags - os elementos de
marcao
Delimitados por < e >

Indiferentes a caixa
<H1> o mesmo que <h1>
Forma geral:
<tagIncio>texto</tagFim>
Alguns tags no exigem a finalizao
Exemplos: <hr> <br>

5
Tags - os elementos de
marcao
Podem ser aninhados

<h1>Exemplo de tags <b>aninhados</b></h1>
Podem ter atributos

<img src=foto.gif alt=Minha foto>
Estrutura de um documento
HTML
<html>
Cabealho
<head>
<title>Primeiro documento</title>
<meta name="author" content=Andreia Alcntara">
<meta name="keywords" content=exemplo">
<meta name="description content=Exemplo do curso>
</head>
Corpo
<body>
<P>Al, mundo!
</body>
</html>
Estrutura mnima de uma pgina

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>Ttulo da Pgina</title>
</head>
<body>
Contedo da pgina
</body>
</html>
8
Os atributos de body
bgcolor=#RRGGBB
text="# RRGGBB "
link="# RRGGBB "
vlink="# RRGGBB "
alink="# RRGGBB "
background=urlIma
gem
Cor de fundo
Cor do texto
Cor de links no
visitados
Cor de links visitados
Cor de links ativados
Imagem de fundo
<body bgcolor="#FFFFFF" text="#000000"

link="#0000FF" vlink="#800080 alink="#FF0000">
9
Linhas horizontais, pargrafos e

quebras de linha
Para inserir linhas horizontais - <hr>
Para pargrafos - <p>texto</p>
o </p> opcional
Para quebras de linha - <br>

<p><b>Cuscuz de Mandioca</b></p>
<p>
trs mui, trs irm<br>
trs cachorra da molstia<br>
eu vi num dia de festa<br>
num lugar Puxinan
10
Cabealhos
<H1>Heading
<H2>Heading
<H3>Heading
<H4>Heading
<H5>Heading
<H6>Heading
1</H1>
2</H2>
3</H3>
4</H4>
5</H5>
6</H6>
11
O atributo align
Alinha o elemento correspondente
esquerda: align=left
centralizado: align=center
direita: align=right
Exemplo:
<p align=center>pargrafo centralizado</p>
12
Tags para formatao de

caracteres
Formatao fsica
permite controlar o tamanho, tipo e cor das fontes

usadas
favorecida pela evoluo dos navegadores,
particularmente das verses para micro
a portabilidade no garantida, mas na maioria
das vezes o documento fica, pelo menos, legvel
exemplos:
<b> </b>
<i> </i>
<u> </u>
- texto em negrito
- texto em itlico
- texto sublinhado
13
O elemento font
Atributos
face=tipo da fonte
size=tamanho da fonte
color=#RRGGBB
<font face="Arial, Helvetica, sans-serif"

size=5" color="#FF0000">Texto formatado</font>
14
Criando listas
No ordenada
reas de interesse:
<ul>
<li>Java</li>
<li>UML</li>
<li>HTML</li>
</ul>
Ordenada
Anlise e Projeto OO - Atividades
<ol>
<li>Anlise de casos de uso</li>
<li>Projeto da arquitetura</li>
<li>Projeto de casos de uso</li>
<li>Projeto de subsistemas</li>
</ol>
15
Acentuao e caracteres
especiais
Alguns editores substituem os caracteres
acentuados por seus respectivos cdigos
Exemplo: smbolo escrito como símbolo
Caracteres especiais tambm podem ser

representados da mesma maneira
Exemplos:
- ®
< - <
- ©
> - >
& - &
1/
- ¼
16
Inserindo imagens com o

elemento img
Atributos de img
src=URL da imagem
alt=descrio da imagem
border=tamanho da borda
align=posicao da imagem
width=largura em pixels
height=altura em pixels
<img src="logos.gif" width="74" height="79"

alt="logotipos" align="middle" border="2">Nono nono
17
Inserindo links com o

elemento a
O tag a introduz uma ncora para outro
documento na rede
Atributos
href=URL do documento referenciado
<a href=documentacao.html>Documentao do projeto</a>
target=janela onde ser carregado o documento
<a href=http://www.cin.ufc.br/~guest5/saude/
target=sistema>Disque Sade</a>
URLs relativas x URLs absolutas
18
Acessando partes especficas de um

documento
possvel carregar o documento destino
j em um ponto especfico de seu
contedo:
<a href=documentacao.html#testes>Plano de testes</a>
Em documentacao.html preciso definir:

<a name=testes>Testes</a>
19
Tabelas em HTML
Estrutura geral
<table border=2>
<tr>
<td>1a linha, 1a
<td>1a linha, 2a
</tr>
<tr>
<td>2a linha, 1a
<td>2a linha, 2a
</tr>
</table>
coluna</td>
coluna</td>
coluna</td>
coluna</td>
20
Atributos de tabelas
Existem atributos especficos do elemento table
exemplo: border=2
Existem atributos especficos do elemento td
exemplo: nowrap (impede que o texto de uma clula

seja dividido em vrias linhas)
E atributos que podem ser usados com table, tr

ou td
exemplos: width=largura em pixels ou percentual,

bgcolor="#RRGGBB, align=left | right | center
21
Os atributos colspan e
rowspan
Atributos de td, que fazem uma clula ocupar
mais de uma coluna ou mais de uma linha
O efeito deles pode ser simulado com o uso de
tabelas aninhadas
22
Especificando o tamanho
com width
O atributo width pode ser usado para
especificar:
o tamanho total da tabela com relao a

pgina HTML onde ela est
o tamanho de uma determinada clula com
relao a tabela onde ela est
O tamanho pode ser especificado em

pixels ou valor percentual
23
Formulrios
Criados com o tag <form> </form>
No podem ser aninhados
Estrutura geral
<form name=idFormulario method=GET ou POST
action=URL>
campos do formulrio
botes
</form>
24
Submisso de formulrios
O que acontece quando submetemos um
formulrio?
O navegador envia todos os dados dos

campos do formulrio para o servidor Web
o servidor ativa a URL especificada em
action para tratar os dados
O mtodo (GET ou POST) especificado em
method determina como os dados enviados
pelo formulrio sero acessados
25
Submisso de formulrios
Envio dos dados ao servidor Web
Mtodo GET - dados visveis na URL

http://.../script?nome=valor&nome=valor&nome=valor
string de query passado em varivel de
ambiente
Mtodo POST - dados enviados em uma

segunda conexo, de forma no visvel
string de query lido na entrada padro do
programa
26
Validao de formulrios
Validao bsica feita pelo browser, atravs
da execuo de JavaScript em determinados
eventos
entrada/sada do campo
submisso do formulrio
carga da pgina
sada da pgina
clique em objeto, link
Validao contra o banco de dados s pode

ser feita no servidor
27
Campos de formulrios
campos texto
campos de senha
campos escondidos
radio buttons
check boxes
botes
inseridos com o tag input
simples
de submisso
de cancelamento (reset)
reas de texto
inseridos com o tag textarea
listas (combo boxes)
inseridos com o tag select
28
Campos texto, de senha e

escondidos
<p>Login: <input type="text" name="login" size="30"
maxlength="15" value="Digite sua matrcula"></p>
<p>Senha: <input type="password" name="senha" size="8"
maxlength="8"></p>
<p><input type="hidden" name="sistema" value="nfv">
29
Radio buttons
Um conjunto de radio buttons tm todos
o mesmo atributo name
Para selecionar previamente um deles,
usa-se o atributo checked
<input type="radio" name="sexo"
value="F" checked>Feminino<br>
<input type="radio" name="sexo"
value="M">Masculino
30
Check boxes
Para selecionar previamente um deles,
usa-se o atributo checked
<p>Hobbies:<br>
<input type="checkbox" name="hobbies"
value=1">Fotografia<br>
value=2" checked>Cinema<br>
value=3" checked>Maracatu</p>
31
reas de texto
Para campos texto maiores que 1 linha
<p>Descrio:<br>
<textarea name="descricao" rows="4 cols="20">
Digite o motivo do cancelamento
</textarea></p>
32
Botes
<input type=button"
value=Incluir">
<input type=button"
value=Alterar">
<input type=button"
value=Remover">
Podem ser especficos para submisso dos dados ou

para limpar o formulrio
<input type="submit" value=Enviar">
<input type="reset" value="Limpar">
O boto de reset recoloca nos campos seus valores

iniciais
33
Listas (combo-boxes)
Criadas atravs dos tags select e option
<select name="profissao" size="3">
<option value="1">Arquiteto</option>
<option value="2">Designer</option>
<option value="3">Engenheiro</option>
<option value="4">Mdico</option>
<option value="5">Veterinrio</option>
</select>
34
Listas (combo-boxes)
Pode-se permitir a seleo de mais de uma
opo com o atributo multiple
Pode-se selecionar previamente alguma opo
com o atributo selected
35
Publicao de uma pgina web

Criar pgina com editor (texto ou HTML)
Copiar pgina para a pasta do site ou
aplicao (xxx) no servidor
Apache:
Tomcat:
ou
IIS:
/usr/local/apache/htdocs/xxx
/tomcat/webapps/ROOT/xxx
/tomcat/webapps/xxx
c:\inetpub\wwwroot\xxx
Acessar pelo browser:
http://localhost/xxx/pagina.html (default: porta

80)
http://localhost:8080/xxx/pagina.html
(Tomcat)
36
ESTILO DA APRESENTAO
CASCADING STYLE SHEETS
37
Cascading Style Sheets - CSS

O que ?
Linguagem de estilo para documentos HTML.

Cobre fontes, cores, margens, linhas, tamanhos,
imagens de fundo, posies, etc.
Suportada por todos os principais navegadores.
Qual a diferena?
HTML define a estrutura do documento.

CSS formata a estrutura do documento.
Separao do contedo de sua apresentao.
38

Benefcios:
Controle da apresentao de vrios

documentos com uma nica style sheet.
Controle mais preciso da apresentao e do
layout.
Aplicao de diferentes apresentaes de
acordo com o tipo da mdia (tela,
impresso, dispositivo mvel, etc).
Inmeras tcnicas avanadas e
sofisticadas.
39

Sintaxe bsica:
seletor { propriedade : valor; }

Tag do HTML
qual a
propriedade
se aplica.
A propriedade
que se deseja
formatar.
O valor que
se deseja dar
propriedade.

Aplicando CSS a um documento:
Mtodo 1 em linha (in-line).

<html>
<head><title>Exemplo CSS 1</title></head>
<body style=background-color: #00FF00;>
<p>Esta uma pgina verde!</p>
</body>
</html>
41

Mtodo 2 interno (estilo da tag).

<html>
<head>
<title>Exemplo CSS 2</title>
<style type=text/css>
body { background-color: #00FF00; }
</style>
</head>
<body>
<p>Esta uma pgina verde!</p>
</body>
</html>
42

Mtodo 3 externo (link a uma style sheet).

O arquivo externo deve ter a extenso .css
A ligao do documento HTML ao arquivo
CSS feita atravs da tag <link>, como
abaixo.
<html>
<head>
<title>Exemplo CSS 3</title>

<link rel=stylesheet type=text/css href=style.css />
</head>
<body><p>Esta uma pgina verde!</p></body>
</html>
43

Mtodo 3 externo (link a uma style sheet).

Arquivo style.css:
body {
background-color: #00FF00;
}
44

Embora haja situaes onde os mtodos 1

e 2 possam ser utilizados com sucesso e
eficincia, o mtodo 3 o mais indicado.
Efetiva a separao entre apresentao e
contedo.
Permite a ligao de vrios documentos HTML
mesma folha de estilos.
Permite maior controle sobre os estilos.
Permite maior facilidade na mudana da folha
de estilos.
45
Alguns Estilos
Fontes: font-family, font-size, font-weight
Bordas: border-bottom, border-top, border-left
Margens: margin-left, margin-right, margin-top
Cores: background-color, color
46
Exemplo de Arquivo CSS

H1 { font-size:120%; font-style:italic; }
.BarraVertical { background-image: url("imagens/barravertical2.jpg"); }
.Padrao01 { font-family:verdana,sans-serif; font-size:60%; color:black;

font-weight:normal; }
.Padrao02 { font-family:verdana,sans-serif; font-size:70%; color:black;
font-weight:normal; }
47
COMPORTAMENTO DA APRESENTAO
JAVASCRIPT
48
Javascript
Permite interagir com o usurio na mquina
cliente
Com Javascript possvel:
Exibir mensagens (alert)

Solicitar confirmao de dados (window.confirm)
Tratar eventos
Acessar e modificar qualquer elemento da tela
Validar e formatar campos de formulrios
Controlar funcionalidades sofisticadas tais como o
menu do sistema
49
Principais caractersticas da
linguagem
Sintaxe similar ao Java
Sensvel a caixa (mas no em todos os
browsers)
Pode ser usado sem declarao prvia
de variveis
O ; no final dos comandos opcional
50
Exemplo Bsico
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JavaScript Bsico</title>
</head>
<body>
Esta linha est escrita em HTML<p>
<script language="JavaScript">
document.write("Gerada pelo JavaScript");

</script>
<p>Novamente HTML
</body>
</html>
51
Exemplo: Informaes do Ambiente

<h1>Ambiente e Browser</h1> <hr>
<script type="text/javascript">
function referringPage() {
if (document.referrer.length == 0) {
return("<I>Nenhum</I>");
} else { return (document.referrer); }

}
document.writeln ("<h2>Informaes do documento:</h2>" + "<ul>"+
"<li><b>URL:</b> " + document.URL + "</li>" +
"<li><b>Ttulo:</b>" + document.title + "</li>" +

"<li><b>Data Modificao:</b> " + document.lastModified + "</li>" +
"<li><b>Pagina de origem:</b>" + referringPage() + "</li>" + "</ul>");
document.writeln ("<h2>Informaes do Browser:</h2>"+ "<ul>"+
"<li><b>Nome:</b> " + navigator.appName + "</li>" +

"<li><b>Verso:</b> " + navigator.appVersion + "</li>" + "</ul>");
</script>
52
Exemplo: Informaes do Ambiente
53
JavaScript - Variveis
Variveis
Globais - criadas fora de uma funo,

usadas em todo o programa
Locais - existem apenas na funo
Identificao de variveis
iniciadas por letra ou _

nome contm letras e dgitos
Nome <> nome <> NOME
54
Tipo
Number (inteiras, ponto flutuante, octais e

hexadecimais)
Boolean - Lgicas
String
Null (nulo)
Undefined (indefinido)
Arrays
55
Declaraes
var x= 10;
var y= "11";
var z= '11';
Caracteres especiais
\n - newline
\f - form feed
\r - carriage return
\"
\t - tab
\b - backspace
\\
\'
56
JavaScript - Operadores
Operadores
+
*
/
%
++
--
concatenao, adio
subtrao
multiplicao
diviso
resto da diviso
incremento (como em C)
decremento
57
Comparao e lgicos
<
>
==
!=
<=
>=
&&
||
menor que
maior que
igual
diferente
menor ou igual
maior ou igual
E lgico
OU lgico
58
Atribuio
=
+=
Atribuio
Soma ou concatenao e atribuio
-=
Subtrao e atribuio
*=
Multiplicao e atribuio
/=
Diviso e atribuio
%=
Resto e atribuio
59
JavaScript Mtodos teis

document.write
document.writeln
window.prompt
window.confirm
window.alert
windows.close
history.back
60
JavaScript - Objetos
Objetos do DOM (Document Object
Model)
Document, Window, Navigator
Objetos Especiais
Date
String
Math
Global
Number
Boolean
Array
Object
61
JavaScript - Modelo de Objetos

window
all
document
frames
document
anchors
history
document
applets
body
navigator
plugins
location
embeds
event
filters
screen
forms
images
Legenda
links
object
plugins
collection
scripts
styleSheets
62
JavaScript - Objetos
window
image[1]
image[0]
document
body
form[0].nome
form[0].email
63
Cdigo Javascript em pginas

HTML
O cdigo JavaScript pode ser embutido:
Entre os tags <script> </script>

A partir de arquivos externos (extenso js)
Como o corpo de uma URL, com o pseudoprotocolo javascript
Diretamente na definio de captura de
eventos
64
Cdigo Javascript entre <script>

e </script>
Os blocos de cdigo podem ser inseridos
em qualquer parte da pgina (cabealho
ou corpo);
<script language=JavaScript>
cdigo
</script>
65
Cdigo Javascript em arquivos

externos
Especificado pelo atributo src da tag
script
<script language=JavaScript
src=global.js>
Os arquivos .js contm apenas cdigo

JavaScript
Permitem a separao entre contedo e
processamento
Acesso extra ao servidor web
66
Utilizando o pseudo-protocolo
Javascript
Cdigo JavaScript pode ser includo em
URLs, tal como abaixo:
<a href:javascript:alert(Realizando validao
dos dados); validaDados
(document.frmCad);>Clique aqui para
validar os dados</a>
Pode ser substitudo pela captura de

eventos
67
Captura e tratamento de
eventos
Os elementos em HTML geram eventos
Alguns eventos so:
onLoad - Ao terminar de carregar a pgina

onClick - Ao clicar no elemento
onKeyPress - Ao pressionar o teclado
onKeyUp - Na subida da tecla
onKeyDown - Na descida da tecla
onFocus - Quando recebe o foco
onBlur - Quando perde o foco
onMouseOver, onMouseOut - Mouse sobre ou
saindo da tag
68
Validao de formulrios
<script language="JavaScript">
function validaForm (form)
{
if form.campo.value==null || form.campo.value.length == 0) {
form.campo.focus();
return false;
} else
return true;
}
</script>
...
<form action="resp.jsp" method="POST" name="formulario"
onSubmit="return validaForm(this);">
<input type="text" name="campo"></input>
</form>
69
Captura e tratamento de
eventos
Um evento pode ser associado a
chamada de uma funo em Javascript
<input type=button onClick=verificaLimite();>
Verifique sempre se o objeto gera o

evento que voc pretende capturar
70

Tecnologias para Programação de Interfaces Web PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tecnologias para Programação de Interfaces Web PDF

Загружено:

Авторское право:

Доступные форматы

TECNOLOGIAS BSICAS

Alguns conceitos bsicos...

identificador dos objetos na rede

HTTP - Hypertext Transfer Protocol

protocolo bsico da Web

HTML - HyperText Markup

Linguagem padro para pginas Web

divide o texto em diferentes pedaos identificados

Os navegadores encarregam-se de interpretar

Delimitados por < e >

<H1> o mesmo que <h1>

Alguns tags no exigem a finalizao

Exemplos: <hr> <br>

Podem ser aninhados

Podem ter atributos

Estrutura mnima de uma pgina

<body bgcolor="#FFFFFF" text="#000000"

Linhas horizontais, pargrafos e

Para quebras de linha - <br>

Tags para formatao de

permite controlar o tamanho, tipo e cor das fontes

<font face="Arial, Helvetica, sans-serif"

Exemplo: smbolo escrito como s&iacute;mbolo

Caracteres especiais tambm podem ser

Inserindo imagens com o

<img src="logos.gif" width="74" height="79"

Inserindo links com o

href=URL do documento referenciado

<a href=documentacao.html>Documentao do projeto</a>

target=janela onde ser carregado o documento

URLs relativas x URLs absolutas

Acessando partes especficas de um

Em documentacao.html preciso definir:

Existem atributos especficos do elemento td

exemplo: nowrap (impede que o texto de uma clula

E atributos que podem ser usados com table, tr

exemplos: width=largura em pixels ou percentual,

o tamanho total da tabela com relao a

O tamanho pode ser especificado em

O navegador envia todos os dados dos

Mtodo GET - dados visveis na URL

string de query passado em varivel de

Mtodo POST - dados enviados em uma

Validao contra o banco de dados s pode

inseridos com o tag input

inseridos com o tag textarea

listas (combo boxes)

inseridos com o tag select

Campos texto, de senha e

Podem ser especficos para submisso dos dados ou

O boto de reset recoloca nos campos seus valores

Publicao de uma pgina web

Acessar pelo browser:

http://localhost/xxx/pagina.html (default: porta

Cascading Style Sheets - CSS

Linguagem de estilo para documentos HTML.

HTML define a estrutura do documento.

Cascading Style Sheets - CSS

Controle da apresentao de vrios

Cascading Style Sheets - CSS

seletor { propriedade : valor; }

Cascading Style Sheets - CSS

Mtodo 1 em linha (in-line).

Exemplo: smbolo escrito como símbolo