Tecnologias para Programação de Interfaces Web.pdf

TECNOLOGIAS BÁSICAS PARA PROGRAMAÇÃO DE

INTERFACES WEB

ESTRUTURA DA APRESENTAÇÃO

HTML BÁSICO

33

Alguns conceitos básicos...

URL - Uniform Resource Locator identificador dos objetos na rede

protocolo://servidor/path/arquivo

http://www.bacen.org.br/~emprel

HTTP - Hypertext Transfer Protocol

protocolo básico da Web

simples e leve

não mantém estado

HTTP

44

HTML - HyperText Markup Language

Linguagem padrão para páginas Web

Linguagem de marcação

divide o texto em diferentes pedaços identificados por tags (elementos de marcação)

Os navegadores encarregam-se de interpretar os tags e formatar o texto adequadamente

<h1>Exemplo de cabeçalho</h1>

55

Tags - os elementos de marcação

Delimitados por “<” e “>”

Indiferentes a caixa

<H1> é o mesmo que <h1>

Forma geral:

Alguns tags não exigem a finalização

Exemplos: <hr> <br>

<tagInício>texto</tagFim>

66

Tags - os elementos de marcação

Podem ser aninhados

Podem ter atributos

<h1>Exemplo de tags <b>aninhados</b></h1>

<img src=“foto.gif” alt=“Minha foto”>

77

Estrutura de um documento HTML

<html>

<head>

<title>Primeiro documento</title>

<meta name="author" content=”Andreia Alcântara">

<meta name="keywords" content=”exemplo">

<meta name="description” content=”Exemplo do curso”>

</head>

<body>

<P>Alô, mundo!

</body>

</html>

Cabeçalho

Corpo

88

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

<html>

<head>

<title>Título da Página</title>

</head>

<body>

Conteúdo da página

</body>

</html>

Estrutura mínima de uma página

99

Os atributos de body

bgcolor=“#RRGGBB”

text="# RRGGBB "

link="# RRGGBB "

vlink="# RRGGBB "

alink="# RRGGBB "

background=“urlImagem”

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

link="#0000FF" vlink="#800080” alink="#FF0000">

Cor de fundo

Cor do texto

Cor de links não visitados

Cor de links visitados

Cor de links ativados

Imagem de fundo

1010

Linhas horizontais, parágrafos e quebras de linha

Para inserir linhas horizontais - <hr>

Para parágrafos - <p>texto</p>

o </p> é opcional

Para quebras de linha - <br>

<p><b>Cuscuz de Mandioca</b></p>

<p>

três muié, três irmã<br>

três cachorra da moléstia<br>

eu vi num dia de festa<br>

num lugar Puxinanã

1111

Cabeçalhos

<H1>Heading 1</H1>

<H2>Heading 2</H2>

<H3>Heading 3</H3>

<H4>Heading 4</H4>

<H5>Heading 5</H5>

<H6>Heading 6</H6>

1212

O atributo align

Alinha o elemento correspondente

à esquerda: align=“left”

centralizado: align=“center”

à direita: align=“right”

Exemplo:

<p align=“center”>parágrafo centralizado</p>

1313

Tags para formatação de caracteres

Formatação física

permite controlar o tamanho, tipo e cor das fontes usadas

favorecida pela evolução dos navegadores, particularmente das versões para micro

a portabilidade não é garantida, mas na maioria das vezes o documento fica, pelo menos, legível

exemplos:

<b> </b> - texto em negrito

<i> </i> - texto em itálico

<u> </u> - texto sublinhado

1414

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>

1515

Criando listas

Não ordenada OrdenadaÁreas de interesse:

<ul>

<li>Java</li>

<li>UML</li>

<li>HTML</li>

</ul>

Análise e Projeto OO - Atividades

<ol>

<li>Análise de casos de uso</li>

<li>Projeto da arquitetura</li>

<li>Projeto de casos de uso</li>

<li>Projeto de subsistemas</li>

</ol>

1616

Acentuação e caracteres especiais

Alguns editores substituem os caracteres acentuados por seus respectivos códigos

Exemplo: símbolo é escrito como símbolo

Caracteres especiais também podem ser representados da mesma maneira

Exemplos:

® - ® © - © & - &

< - < > - > 1/4 - ¼

1717

Inserindo imagens com o elemento img

Atributos de img

src=“URL da imagem”

alt=“descrição 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

1818

Inserindo links com o elemento a

O tag a introduz uma âncora para outro documento na rede

Atributos

href=“URL do documento referenciado”

target=“janela onde será carregado o documento”

URLs relativas x URLs absolutas

<a href=“documentacao.html”>Documentação do projeto</a>

<a href=“http://www.cin.ufc.br/~guest5/saude/”

target=“sistema”>Disque Saúde</a>

1919

Acessando partes específicas de um documento

É possível carregar o documento destino já em um ponto específico de seu conteúdo:

Em documentacao.html é preciso definir:

<a href=“documentacao.html#testes”>Plano de testes</a>

<a name=“testes”>Testes</a>

2020

Tabelas em HTML

Estrutura geral<table border=“2”>

<tr>

<td>1a linha, 1a coluna</td>


</tr>

<tr>



</tr>

</table>

2121

Atributos de tabelasExistem atributos específicos do elemento table exemplo: border=“2”

Existem atributos específicos do elemento td exemplo: nowrap (impede que o texto de uma célula

seja dividido em várias 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”

2222

Os atributos colspan e rowspan

Atributos de td, que fazem uma célula ocupar mais de uma coluna ou mais de uma linha

O efeito deles pode ser simulado com o uso de tabelas aninhadas

2323

Especificando o tamanho com width

O atributo width pode ser usado para especificar:

o tamanho total da tabela com relação a página HTML onde ela está

o tamanho de uma determinada célula com relação a tabela onde ela está

O tamanho pode ser especificado em pixels ou valor percentual

2424

Formulários

Criados com o tag <form> </form>

Não podem ser aninhados

Estrutura geral

<form name=“idFormulario” method=“GET ou POST”

action=“URL”>

campos do formulário

botões

</form>

2525

Submissão de formulários

O que acontece quando submetemos um formulário?

O navegador envia todos os dados dos campos do formulário para o servidor Web

o servidor ativa a URL especificada em action para tratar os dados

O método (GET ou POST) especificado em method determina como os dados enviados pelo formulário serão acessados

2626

Submissão de formulários

Envio dos dados ao servidor Web

Método GET - dados visíveis na URLhttp://.../script?nome=valor&nome=valor&nome=valor

string de query passado em variável de ambiente

Método POST - dados enviados em uma segunda conexão, de forma não visível

string de query lido na entrada padrão do programa

2727

Validação de formulários

Validação básica é feita pelo browser, através da execução de JavaScript em determinados eventos

entrada/saída do campo

submissão do formulário

carga da página

saída da página

clique em objeto, link

Validação contra o banco de dados só pode ser feita no servidor

2828

Campos de formulárioscampos texto

campos de senha

campos escondidos

radio buttons

check boxes

botões simples

de submissão

de cancelamento (reset)

áreas de texto

listas (combo boxes)

inseridos com o tag input

inseridos com o tag textarea

inseridos com o tag select

2929

Campos texto, de senha e escondidos

<p>Login: <input type="text" name="login" size="30"

maxlength="15" value="Digite sua matrícula"></p>

<p>Senha: <input type="password" name="senha" size="8"

maxlength="8"></p>

<p><input type="hidden" name="sistema" value="nfv">

3030

Radio buttons

Um conjunto de radio buttons têm 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

3131

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>

3232

Áreas de texto

Para campos texto maiores que 1 linha

<p>Descrição:<br>

<textarea name="descricao" rows="4” cols="20">

Digite o motivo do cancelamento

</textarea></p>

3333

Podem ser específicos para submissão dos dados ou para “limpar” o formulário

O botão de reset recoloca nos campos seus valores iniciais

Botões

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

<input type="reset" value="Limpar">

<input type=”button"

value=”Incluir">


value=”Alterar">


value=”Remover">

3434

Criadas através dos tags select e option

Listas (combo-boxes)

<select name="profissao" size="3">

<option value="1">Arquiteto</option>

<option value="2">Designer</option>

<option value="3">Engenheiro</option>

<option value="4">Médico</option>

<option value="5">Veterinário</option>

</select>

3535

Pode-se permitir a seleção de mais de uma opção com o atributo multiple

Pode-se selecionar previamente alguma opção com o atributo selected

Listas (combo-boxes)

3636

Publicação de uma página web

Criar página com editor (texto ou HTML)

Copiar página para a pasta do site ou aplicação (xxx) no servidor Apache: /usr/local/apache/htdocs/xxx

Tomcat: /tomcat/webapps/ROOT/xxx

ou /tomcat/webapps/xxx

IIS: c:\inetpub\wwwroot\xxx

Acessar pelo browser: http://localhost/xxx/pagina.html (default: porta

80)

http://localhost:8080/xxx/pagina.html(Tomcat)

3737

ESTILO DA APRESENTAÇÃO

CASCADING STYLE SHEETS

38

Cascading Style Sheets - CSS

O que é?

Linguagem de estilo para documentos HTML.

Cobre fontes, cores, margens, linhas, tamanhos, imagens de fundo, posições, etc.

Suportada por todos os principais navegadores.

Qual a diferença?

HTML define a estrutura do documento.

CSS formata a estrutura do documento.

Separação do conteúdo de sua apresentação.

39


Benefícios:

Controle da apresentação de vários documentos com uma única style sheet.

Controle mais preciso da apresentação e do layout.

Aplicação de diferentes apresentações de acordo com o tipo da mídia (tela, impressão, dispositivo móvel, etc).

Inúmeras técnicas avançadas e sofisticadas.


Sintaxe básica:

seletor { propriedade : valor; }

Tag do HTMLà qual a

propriedadese aplica.

A propriedadeque se deseja

formatar.

O valor quese deseja darà propriedade.

41


Aplicando CSS a um documento:

Método 1 – em linha (in-line).

<html>

<head><title>Exemplo CSS – 1</title></head>

<body style=”background-color: #00FF00;”>

<p>Esta é uma página verde!</p>

</body>

</html>

42



Método 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 página verde!</p>

</body>

</html>

43



Método 3 – externo (link a uma style sheet).O arquivo externo deve ter a extensão .css

A ligação do documento HTML ao arquivo CSS é feita através 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 página verde!</p></body>

</html>

44



Método 3 – externo (link a uma style sheet).

Arquivo style.css:

body {

background-color: #00FF00;

}

45



Embora haja situações onde os métodos 1 e 2 possam ser utilizados com sucesso e eficiência, o método 3 é o mais indicado.

Efetiva a separação entre apresentação e conteúdo.

Permite a ligação de vários documentos HTML à mesma folha de estilos.

Permite maior controle sobre os estilos.

Permite maior facilidade na mudança da folha de estilos.

4646

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

4747

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; }

4848

COMPORTAMENTO DA APRESENTAÇÃO

JAVASCRIPT

4949

Javascript

Permite interagir com o usuário na máquina cliente

Com Javascript é possível:

Exibir mensagens (alert)

Solicitar confirmação de dados (window.confirm)

Tratar eventos

Acessar e modificar qualquer elemento da tela

Validar e formatar campos de formulários

Controlar funcionalidades sofisticadas tais como o menu do sistema

5050

Principais características da linguagem

Sintaxe similar ao Java

Sensível a caixa (mas não em todos os browsers)

Pode ser usado sem declaração prévia de variáveis

O ; no final dos comandos é opcional

5151

Exemplo Básico

<html>

<head>

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

<title>JavaScript Básico</title>

</head>

<body>

Esta linha está escrita em HTML<p>

<script language="JavaScript">

document.write("Gerada pelo JavaScript");

</script>

<p>Novamente HTML

</body>

</html>

5252

Exemplo: Informações 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>Informações do documento:</h2>" + "<ul>"+

"<li><b>URL:</b> " + document.URL + "</li>" +

"<li><b>Título:</b>" + document.title + "</li>" +

"<li><b>Data Modificação:</b> " + document.lastModified + "</li>" +

"<li><b>Pagina de origem:</b>" + referringPage() + "</li>" + "</ul>");

document.writeln ("<h2>Informações do Browser:</h2>"+ "<ul>"+

"<li><b>Nome:</b> " + navigator.appName + "</li>" +

"<li><b>Versão:</b> " + navigator.appVersion + "</li>" + "</ul>");

</script>

5353

Exemplo: Informações do Ambiente

54

JavaScript - Variáveis

Variáveis

Globais - criadas fora de uma função, usadas em todo o programa

Locais - existem apenas na função

Identificação de variáveis

iniciadas por letra ou _

nome contém letras e dígitos

Nome <> nome <> NOME

55


Tipo

Number (inteiras, ponto flutuante, octais e hexadecimais)

Boolean - Lógicas

String

Null (nulo)

Undefined (indefinido)

Arrays

56


Declaraçõesvar x= 10;

var y= "11";

var z= '11';

Caracteres especiais

\n - newline \t - tab

\f - form feed \b - backspace

\r - carriage return \\

\" \'

57

JavaScript - Operadores

Operadores

+ concatenação, adição

- subtração

* multiplicação

/ divisão

% resto da divisão

++ incremento (como em C)

-- decremento

58


Comparação e lógicos< menor que

> maior que

== igual

!= diferente

<= menor ou igual

>= maior ou igual

&& E lógico

|| OU lógico

59


Atribuição

= Atribuição

+= Soma ou concatenação e atribuição

-= Subtração e atribuição

*= Multiplicação e atribuição

/= Divisão e atribuição

%= Resto e atribuição

60

JavaScript –Métodos Úteis

document.write

document.writeln

window.prompt

window.confirm

window.alert

windows.close

history.back

61

JavaScript - Objetos

Objetos do DOM (Document Object Model)

Document, Window, Navigator

Objetos Especiais

Date Number

String Boolean

Math Array

Global Object

62

JavaScript - Modelo de Objetos

window

document

history

navigator

applets

all

anchors

body

embeds

forms

filters

images

links

plugins

styleSheets

scripts

location

screen

event

document

document

plugins

object

collection

Legenda

frames

63

JavaScript - Objetos

form[0].nome form[0].email

image[0]

image[1]

document

window

body

6464

Código Javascript em páginas HTML

O código JavaScript pode ser embutido:

Entre os tags <script> </script>

A partir de arquivos externos (extensão js)

Como o corpo de uma URL, com o pseudo-protocolo javascript

Diretamente na definição de captura de eventos

6565

Código Javascript entre <script> e </script>

Os blocos de código podem ser inseridos em qualquer parte da página (cabeçalho ou corpo);

<script language=“JavaScript”>

código

</script>

6666

Código Javascript em arquivos externos

Especificado pelo atributo src da tag script<script language=“JavaScript”

src=“global.js”>

Os arquivos .js contém apenas código JavaScript

Permitem a separação entre conteúdo e processamento

Acesso extra ao servidor web

6767

Utilizando o pseudo-protocolo Javascript

Código JavaScript pode ser incluído em URLs, tal como abaixo:

<a href:”javascript:alert(„Realizando validação dos dados‟); validaDados (document.frmCad);”>Clique aqui para validar os dados</a>

Pode ser substituído pela captura de eventos

6868

Captura e tratamento de eventos

Os elementos em HTML geram eventos

Alguns eventos são: onLoad - Ao terminar de carregar a página

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

69

Validação de formulários<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>

7070

Captura e tratamento de eventos

Um evento pode ser associado a chamada de uma função em Javascript

<input type=“button” onClick=“verificaLimite();”>

Verifique sempre se o objeto gera o evento que você pretende capturar

Tecnologias para Programação de Interfaces Web.pdf

Documents

Transcript of Tecnologias para Programação de Interfaces Web.pdf