Interface Web - Programação Cliente
Interface Web - Programação Cliente
HTMLHTML 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>
</HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
HTML Etiqueta <HEAD>
Zona de definições acessórias da página Contem normalmente os comandos
<TITLE> Exemplo: <TITLE>A primeira página</TITLE>
<SCRIPT> Bloco de código numa linguagem de script.
<STYLE> 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>Texto3Texto4...
...Texto1<br>Texto2<P>Texto3Texto4...
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”><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>
<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>
<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>
<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...
<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
100,50%,*
3 divisões:
1ª de 100 pixeis fixos;
2ª com 50% da dimensão da janela do browser;
3ª ocupando o restante.
70%,30% 2 divisões:
1ª com 70% da dimensão da janela do browser;
2ª com 30% da dimensão da janela do browser.
100,*,*
3 divisões:
1ª de 100 pixeis fixos;
2ª e 3ª de dimensão igual ocupando em conjunto o restante.
2*,* 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 = URL do processo que irá
processar a informação transmitida;
METHOD = “GET” | “POST” NAME = nome do objecto
HTML – FORMS
HTML – Forms
Etiqueta <TEXTAREA> Constrói uma caixa de texto Atributos:
NAME = nome do objecto COLS = número de colunas ROWS = número de linhas
Exemplo:
<textarea cols=”30” rows=”4” name=”xpto”> texto por defeito
</textarea>
<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:
SRC = URL da imagem;
TYPE=“HIDDEN” Atributos específicos:
VALUE = Valor atribuído ao objecto;
Exemplo:
<input type=“hidden” name=“xpto” value=“xyz”><input type=”image” src=”abc.gif” name=”cores”>
<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>
Amb. Desenv
Inglês TecnicoAlgebra
HTTP- Transferência de informação
Nome: Célia Olivença
Sexo: Feminino Masculino
Ano de Nascimento: 1984
1984
1985
1986
1985
1985
Cadeiras feitas:Algoritmia
Observações: R Pêro
234
ENVIAR
nome=C%E9lia+Oliven%E7a&sexo=fem&nascim=1985&cad=it&cad=ad&obs=R+P%EAro+%0D%0A234
Interface Web - Programação Cliente
HTML AppletsApplets Noções de DHTML
Folhas de estilo - Cascading Style Sheets Javascript
Applets Programa Java que é executado no contexto do
browser cliente. Etiqueta <APPLET>
Especifica para a inserção de applets numa página Web
Descontinuada a partir do HTML 4.0 Etiqueta <OBJECT>
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 DHTMLNoções de DHTML
Folhas de estilo – Folhas de estilo – Cascading Style SheetsCascading Style Sheets JavascriptJavascript
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.
H1 { : }
color lightgreen
Selector Declaração
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
Especificações globais
<h2 style=”font-size:35pt;color:red;line-height:30px;”>teste</h2>
<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 externasNas páginas Web
O ficheiro externo “ficheiro.css”
<head> <link type=”text/css”rel=”stylesheet” href=”ficheiro.css”></head>
<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:<style><!-- 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]
A <p> faz-se utilizando o tipo de letra verdana
Estas classes não redefinem o tipo de letra
Logo estes <p CLASS=“...”> fazem-se utilizando o tipo de
letra verdana
Define-se um estilo identificador único
Logo neste <p ID=“...”> o tipo de letra utilizado não é o
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>