Post on 04-Dec-2015
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>
<td>1a linha, 2a coluna</td>
</tr>
<tr>
<td>2a linha, 1a coluna</td>
<td>2a linha, 2a coluna</td>
</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>
<input type="checkbox" name="hobbies"
value=”2" checked>Cinema<br>
<input type="checkbox" name="hobbies"
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">
<input type=”button"
value=”Alterar">
<input type=”button"
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)
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
Cascading Style Sheets - CSS
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.
Cascading Style Sheets - CSS
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
Cascading Style Sheets - CSS
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
Cascading Style Sheets - CSS
Aplicando CSS a um documento:
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
Cascading Style Sheets - CSS
Aplicando CSS a um documento:
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
Cascading Style Sheets - CSS
Aplicando CSS a um documento:
Método 3 – externo (link a uma style sheet).
Arquivo style.css:
body {
background-color: #00FF00;
}
45
Cascading Style Sheets - CSS
Aplicando CSS a um documento:
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; }
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>
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
JavaScript - Variáveis
Tipo
Number (inteiras, ponto flutuante, octais e hexadecimais)
Boolean - Lógicas
String
Null (nulo)
Undefined (indefinido)
Arrays
56
JavaScript - Variáveis
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
JavaScript - Operadores
Comparação e lógicos< menor que
> maior que
== igual
!= diferente
<= menor ou igual
>= maior ou igual
&& E lógico
|| OU lógico
59
JavaScript - Operadores
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
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>