Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Interface Web - Programação Cliente
Document related concepts
no text concepts found
Transcript
Interface Web Programação Cliente
Interface Web - Programação
Cliente
HTML
Applets
Noções de DHTML
Folhas de estilo - Cascading Style Sheets
Javascript
HTML
HTML – Hypertext Markup Language
Especificação W3C
Linguagem de formatação orientada para a
Internet
Ficheiros de Texto com extensão html ou
htm
HTML
Linguagem baseada em etiquetas (tags)
As etiquetas interagem sobre os
componentes da página web
Sintaxe genérica
<etiqueta parametro=“valor” >
componente da página web
</etiqueta>
HTML
Estrutura base de um ficheiro HTML
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
HTML
Etiqueta <HEAD>
Zona de definições acessórias da página
Contem normalmente os comandos
<TITLE>
<SCRIPT>
Bloco de código numa linguagem de script.
<STYLE>
Exemplo: <TITLE>A primeira página</TITLE>
Definições de estilos que serão utilizados em toda a página
<META>
Permite definir informações que serão colocadas no
cabeçalho HTTP. Exemplo:
<META http-equiv="Refresh" content=“5">
HTML
Etiqueta <BODY>
Engloba os elementos constituintes da
página
Possui diversos parâmetros que definem
formatos gerais para toda a página.
Destacam-se:
background=“URL da imagem de fundo”
bgcolor=“formato ou nome da cor”
Exemplo
<html>
<head>
<title>Um exemplo HTML</title>
<style type="text/css">
body{background-color:navy;font-size:14pt;font-family:arial;color:lightBlue}
h1{color:white;font 18pt verdana bold;text-align:center}
.botao{width:140px;height:50px;font-family:comic sans MS;}
</style>
<script language="javascript">
function abrir()
{
x=window.open("http://www.ipp.pt","PagIPP","width=99,height=80");
}
</script>
</head>
<body>
<h1>Página de Exemplo</h1>
<p><hr>
Esta é um exemplo de uma página em HTML, onde na zona do comando
<b><HEAD></b> estão comandos auxiliares para a construção da página e
na zona do comando <b><BODY></b> estão os objecto que compoêm a
página.<p>
<hr><center>
<input type=button CLASS="botao" value="Página do IPP" onClick="abrir()">
</center>
</body>
</html>
HTML – Mudanças de linha
<P> e <BR>
Exemplo:
...
Texto1<br>Texto2<P>Texto3
Texto4
...
HTML – Imagens
<IMG>
SRC = URL da imagem (jpeg | gif);
ALT = Texto descritivo;
NAME = nome do objecto para efeitos de scripting.
Exemplo:
<IMG SRC=“x.gif” ALT=“Exemplo” NAME=“foto”>
HTML – Tabelas
<TABLE>
<TR> - engloba o conteúdo de uma linha
<TH> - define uma célula de cabeçalho
<TD> - define uma célula de informação
COLSPAN = número de colunas ocupadas;
ROWSPAN = número de linhas ocupadas;
HTML – Exemplos de Tabelas
<table border=“1”>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>
HTML – Exemplos de Tabelas
<table border=”1”>
<tr>
<td colspan=”2” rowspan=”2”>A</td>
<td>B</td>
</tr>
<tr><td >C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
</table>
HTML - Hyperlinks
<A>
NAME
= nome do objecto;
HREF
= URL do objecto destino;
TARGET = nome da janela/frame onde o link será executado ou
os nomes reservados “_self”, “_parent”, “_top” ou “_blank”.
Exemplos:
<a href=”http://www.sapo.pt”>Sapo</a>
<a name=”cap1”></a>
<a href=”#cap1”>Capítulo 1</a>
<a href=”amd.htm#cap1”>Capítulo 1</a>
<a href=”http://www.ipp.pt” target=”_blank”>Novo</a>
HTML – <DIV> e <SPAN>
Utilização quase exclusiva como
contentores para definição de estilos (CSS)
<DIV> define um bloco de texto e
comandos HTML e separando-o do
restante por quebras de linha.
<SPAN> é um comando inline que define
também um bloco de hipertexto mas que
fica na sequência dos restantes conteúdos.
HTML – <DIV> e <SPAN>
Exemplo
<STYLE>
<!DIV{background-color:gray;color:red;font-weight:bold;}
SPAN{background-color:navy;color:white;}
-->
</STYLE>
...
<P>O texto seguinte está dentro do comando DIV
<DIV>Isto está dentro de DIV</DIV>
O texto seguinte é conteúdo de SPAN <SPAN>dentro
do SPAN</SPAN>. Fim de exemplo
...
HTML - Frames
Apresentação simultânea de várias páginas na
janela do browser.
HTML - Frames
Etiqueta <FRAMESET>
Este etiqueta especifica o layout da página
em termos de divisões do écran. O ficheiro
HTML que contem esta etiqueta não possui
a etiqueta <body>
Atributos:
COLS = Lista divisão em colunas;
ROWS = Lista divisão em linhas;
HTML - Frames
A lista de divisão fornecida aos atributos
pode ser composta por:
Valores absolutos – representado uma
dimensão em número de pixeis;
Valores percentuais – relativos à dimensão da
janela “pai”;
* - simbolizando o restante.
Os elementos da lista separam-se por “,”
HTML - Frames
Exemplos de listas de divisão
3 divisões:
1ª de 100 pixeis fixos;
100,50%,*
2ª com 50% da dimensão da janela do browser;
3ª ocupando o restante.
70%,30%
100,*,*
2*,*
2 divisões:
1ª com 70% da dimensão da janela do browser;
2ª com 30% da dimensão da janela do browser.
3 divisões:
1ª de 100 pixeis fixos;
2ª e 3ª de dimensão igual ocupando em conjunto
o restante.
2 divisões:
1ª com o dobro da dimensão da 2ª.
HTML - Frames
Etiqueta <NOFRAME>
Define um conteúdo alternativo para que os
browsers mais antigos possam exibir alguma
informação.
Exemplo:
...
<noframe>
O seu browser não suporta o uso de frames <p>
Faça o <a href=”http://www.microsoft.com/ie”>dowload</a>
da versão actual do Internet Explorer.
</noframe>
...
HTML - Frames
Etiqueta <FRAME>
Afecta uma página web a uma zona do
écran
Atributos:
SRC
= URL da página web;
SCROLLING = “yes”|”no”|”auto”;
NORESIZE não permite redimensionamento;
Em XHTML NORESIZE=“NORESIZE”
NAME
= Nome da frame;
HTML – Exemplo Frames
<html>
<head></head>
<frameset rows=40%,*>
<frame src=http://www.dei.isep.ipp.pt/ades>
<frameset cols=*,*>
<frame src=http://www.dei.isep.ipp.pt/~ncastro>
<frame src=http://www.dei.isep.ipp.pt/projbach>
</frameset>
</frameset>
<noframe>
O seu browser não suposta a utilização de frames
</noframe>
</html>
HTML - Forms
Permite ao utilizador fornecer informação à
aplicação web.
Baseado em componentes HTML de
interface gráfico.
Transfere informação para o servidor
recorrendo aos métodos HTTP:
Método GET
Método POST
HTML – Forms
Método GET
Anexa a informação na URL após o símbolo “?”
Limite da informação imposto pelo tamanho
máximo da URL (2083 caracteres no IE) .
Idempotente
Rápido
Inseguro
HTML – Forms
Método POST
A informação é transferida no cabeçalho do
protocolo HTTP
Não existe um limite máximo para o tamanho da
informação
Todos os pedidos são obrigatoriamente tratados
pelo servidor
Lento
Seguro
HTML – Forms
Etiqueta <FORM>
Define o conjunto de informação que será
enviado para um processo a executar no
servidor Web.
Atributos:
ACTION
METHOD
NAME
= URL do processo que irá processar a
informação transmitida;
= “GET” | “POST”
= nome do objecto
HTML – FORMS
HTML – Forms
Etiqueta <TEXTAREA>
Constrói uma caixa de texto
Atributos:
NAME
COLS
ROWS
= nome do objecto
= número de colunas
= número de linhas
Exemplo:
<textarea cols=”30” rows=”4” name=”xpto”>
texto por defeito
</textarea>
HTML – Forms
Etiqueta <SELECT>
Constrói uma Combo Box ou uma List Box
Atributos:
NAME
= nome do objecto
SIZE
= número itens visíveis
MULTIPLIPLE permite selecção múltipla
Em XHTML MULTIPLIPLE=“MULTIPLIPLE ”
HTML – Forms
Etiqueta <OPTION>
Define um item da lista
Atributos:
VALUE = valor identificativo da selecção
SELECTED define o item como pré-seleccionado
Em XHTML SELECTED=“SELECTED ”
Exemplo:
<select name=”cad”>
<option value=”AD” selected>Ambientes de Desenvolvimento
<option value=”BD”>Bases de Dados
<option value=”PA”>Programação de Aplicações
<option value=”LFA”>Ling. Formais e Autómatos
</select>
HTML – Forms
Etiqueta <INPUT>
Constrói diversos tipos de interface consoante o
valor do atributo TYPE.
Atributos généricos:
NAME
= nome do objecto
TYPE
= “text” | “password” | “radio” | “checkbox” |
“image” | “file” | “submit” | “reset” | “button” | “hidden”;
HTML – Forms
TYPE=“text” | TYPE=“password”
Atributos específicos:
SIZE
= largura da caixa em número de caracteres;
MAXLENGTH= número máximo de caracteres permitido;
VALUE = conteúdo por defeito
Exemplo:
login:<input type=”text” name=”texto” size=”10”><br>
password:<input type=”password” name=”pw” size=”15”>
HTML – Forms
TYPE=“radio” | TYPE=“checkbox”
Atributos específicos:
VALUE = valor atribuído à escolha;
CHECKED elemento pré-seleccionado;
Em XHTML CHECKED=“CHECKED ”
Exemplo:
Sexo:<input type=”radio” name=”sex” value=”H” checked> Masculino
<input type=”radio” name=”sex” value=”M”> Feminino <p>
Hobbys:<input type=”checkbox” name=”hob” value=”ler” > Ler
<input type=”checkbox” name=”hob” value=”estud”> Estudar
<input type=”checkbox” name=”hob” value=”cine” checked> Cinema
<input type=”checkbox” name=”hob” value=”pesca”> Pescar
HTML – Forms
TYPE=“SUBMIT” | TYPE=“RESET” |
TYPE=“BUTTON”
Atributos específicos:
VALUE
= Texto no botão;
Exemplo:
<input type=”submit” value=”Carregue para ENVIAR”>
<input type=”reset” value=”Carregue para LIMPAR”>
<input type=”button” value=”Carregue para ...”>
HTML – Forms
TYPE=“FILE”
Atributos específicos:
SIZE
= tamanho em caracteres da caixa de texto;
MAXLENGTH= tamanho máximo do nome do ficheiro;
Exemplo:
Upload do ficheiro: <input type=”file” name=”fx” size=”30”>
HTML – Forms
TYPE=“IMAGE”
Atributos específicos:
= URL da imagem;
TYPE=“HIDDEN”
Atributos específicos:
SRC
VALUE
= Valor atribuído ao objecto;
Exemplo:
<input type=“hidden” name=“xpto” value=“xyz”>
<input type=”image” src=”abc.gif” name=”cores”>
HTML – Exemplo Forms
<body>
<form method=”post” action=”quest.cgi”>
Nome:<input type=”text” name=”nome” size=”40”><p>
Sexo:
<input type=”radio” name=”sexo” value=”fem”> Feminino
<input type=”radio” name=”sexo” value=”masc”> Masculino <p>
Ano de Nascimento:
<select name=”nascim”>
<option value=”1984” selected>1984
<option value=”1985”>1985
<option value=”1986”>1986
</select><p>
Cadeiras feitas:<br>
<input type=”checkbox” name=”cad” value=”ap”>Algoritmia<br>
<input type=”checkbox” name=”cad” value=”it”>Inglês Tecnico<br>
<input type=”checkbox” name=”cad” value=”alga”>Algebra <br>
<input type=”checkbox” name=”cad” value=”ad”> Amb. Desenv. <p>
Observações:<textarea name=”obs” cols=”60” rows=”5”></textarea>
<p><center><input type=”submit” value=”Enviar”></center>
</form>
</body>
HTTP- Transferência de
informação
Nome: Célia Olivença
Sexo:
Feminino
Masculino
Ano de Nascimento: 1984
1985
1984
Cadeiras feitas:
Algoritmia 1985
nome=C%E9lia+Oliven%E7a&sexo=fem&nascim=1985&cad=it&cad=ad&obs=R+P%EAro+%0D%0A234
Inglês Tecnico
1986
Algebra
Amb. Desenv
Observações: R Pêro
234
ENVIAR
Interface Web - Programação
Cliente
HTML
Applets
Noções de DHTML
Folhas de estilo - Cascading Style Sheets
Javascript
Applets
Programa Java que é executado no contexto do
browser cliente.
Etiqueta <APPLET>
Etiqueta <OBJECT>
Especifica para a inserção de applets numa página
Web
Descontinuada a partir do HTML 4.0
Permite inserir objectos multimédia numa página
Web (sons, videos, applets ...)
Etiqueta <PARAM>
Utilizada em conjunto com <OBJECT>
Parametriza um objecto
Applet – Exemplo 1/2
A applet
import java.applet.Applet;
import java.awt.Graphics;
public class testeADES extends Applet {
public void paint (Graphics g) {
g.drawString(getParameter("texto"), 50, 20);
}
}
Applet – Exemplo 2/2
A página web
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93"
width="440" height="40" >
<param name="code" value=" testeADES" />
<param name= "texto" value= "ADES 2004/2005">
</object>
Interface Web - Programação
Cliente
HTML
Applets
Noções de DHTML
Folhas de estilo – Cascading Style Sheets
Javascript
DHTML
DHTML – Dynamic HTML
Não é uma norma do W3C
Utilização conjunta de tecnologias para a
criação de sites dinâmicos
HTML 4.0
Cascading Style Sheets (CSS)
Document Object Model (DOM)
Scripting (Javascript, VBScript, ...)
Cascading Style Sheets
CSS – Cascading Style Sheets
Permite adicionar estilos (p.e. cores, tipos de letra,
espaçamentos) a páginas web
Norma W3C (http://www.w3.org/Style/CSS)
Especificações:
CSS 1.0 - (1996 -1999) especificação base
(propriedades relativas a cores, espaçamento, e
tipos de letra)
CSS 2.1 – entre outras, acrescenta ao CSS 1.0
propriedades de posicionamento absoluto, paginação
e escrita de texto da direita para a esquerda
CSS 3.0 – (em desenvolvimento) irá suportar, entre
outras coisas, interacção com o utilizador humano
(discurso) e novos selectores
Cascading Style Sheets
Consiste na definição de regras que
descrevem o modo como os comandos
HTML deverão ser apresentados pelo
browser.
Estas regras são compostas por duas
partes: selector e declaração.
Selector
H1
Declaração
{ color : lightgreen }
Propriedade
Valor
Cascading Style Sheets
Níveis de utilização:
Local – relativo a um comando especifico na
página
Global – especificações para toda uma
página Web
Externo – especificações para diversas
paginas Web (site)
Cascading Style Sheets
Especificações locais
<h2 style=”font-size:35pt;color:red;line-height:30px;”>teste</h2>
Especificações globais
<head>
<style type=”text/css”>
<!-h4 {font:17pt “arial”;font-weight:bold;color:blue;}
h2 {font:15pt “courier”;font-weight:bold;color:yellow;}
p {line-height:30pt; }
-->
</style>
</head>
Cascading Style Sheets
Especificações externas
Nas páginas Web
<head>
<link type=”text/css”rel=”stylesheet” href=”ficheiro.css”>
</head>
O ficheiro externo “ficheiro.css”
<head>
<style type=”text/css”>
<!-…
-->
</style>
</head>
Cascading Style Sheets
Precedências
Declarações Locais
Declarações Globais
Declarações Externas
Cascading Style Sheets
Atributo CLASS
Permite definir vários estilos para uma mesma
etiqueta.
O estilo definido na classe é utilizado em conjunção
com o estilo base definido para a etiqueta.
A sua declaração é feita de forma global precedendo
o nome do estilo por um “.”
Atributo ID
Permite atribuir um identificador único a um elemento
específico do documento HTML
O estilo declarado sobrepõe-se integralmente ao
estilo definido para a etiqueta
A sua declaração é feita de forma global precedendo
o nome da estilo por um “#”
Cascading Style Sheets
Exemplo:
classes
A <p> faz-se Estas
utilizando
o não
redefinem
o tipo de letra
tipo de letra
verdana
Define-se
um estilo
<style>
<!-identificador único
p{font-family:verdana;}
.pergunta {color:green; font-style: italic;}
.resposta {color:red;}
#email {font-size: 8pt;}
-->
</style>
<p CLASS=”pergunta”>O quer dizer ISEP?
<p CLASS=”resposta”>Instituto Superior de Engenharia do Porto
<p ID=”email”>[email protected]
Logo
neste
ID=“...”>
o tipo
Logo
estes<p<p
CLASS=“...”>
de letra utilizado
não
é o de
fazem-se
utilizando
o tipo
verdana
letra
verdana
Algumas propriedades de
formatação CSS
color
Cor do texto
background-color
Cor de fundo de um objecto
background-image
URL de uma imagem que será espalhada pelo fundo do objecto
font-family
Tipo de letra
font-size
Tamanho da letra
font-weight
normal | bold | bolder | lighter
font-style
normal | italic | oblique
text-align
left | right | center | justify
text-variant
normal | small-caps
width
Largura de um objecto
height
Altura de um objecto
line-height
Valor para a altura de linha
margin-top
Valor para a margem superior
margin-left
Valor para a margem esquerda
margin-right
Valor para a margem direita
margin-bottom
Valor para a margem inferior
Propriedades de
posicionamento CSS
position
absolute | relative
left
Valor numérico da abcissa
top
Valor numérico da ordenada
width
Largura de um objecto
height
Altura de um objecto
z-index
Valor numérico da profundidade
visibility
visible | hidden
CSS – Exemplos 1/3
<style type="text/css">
body { color: lightyellow; background:navy;
margin-left: 10%; margin-right: 10%; }
h1 { margin-left: -8%;font-size:400%}
h2,h3,h4,h5,h6 { margin-left: -4%; }
strong { text-transform: uppercase; font-weight: bold; }
</style>
<body>
<h1>ADES 2004/2005</h1>
Desenvolvimento de aplicações para a web.
<h3><strong>html</strong></h3>
<h3><strong>asp .net</strong></h3>
<h3><strong>xml</strong></h3>
</body>
CSS – Exemplos 2/3
<style type="text/css">
#xpto{position:absolute;top:50px;left:100px;
width:40%;height:150px}
#abcd{position:relative;top:250px;left:100px;
width:40%;height:150px}
.cor { background:#45DF3A;color:red;
border:none; padding: 0.5em; }
.box { border: solid; border-width: thin; }
</style>
<body>
<div ID ="xpto" class="box">
O conteúdo desta DIV está emoldurado
</div>
<div ID ="abcd" class="cor">
Esta DIV tem uma cor de fundo
</div>
</body>
CSS – Exemplos 3/3
<style type="text/css">
:link { color: #000035 }
:visited { color: #990099 }
:active { color: #FF0066 }
:hover { color: red }
.plain { text-decoration: none;font:16pt "Comic Sans Ms" bold}
</style>
<body>
<a href="http://www.dei.isep.ipp.pt/ades"> Link normal </a>
<p>
<a class ="plain" href="http://www.ipp.pt/"> Link estilizado </a>
</body>
