Interface Web XHTML - CSS. Arquitectura de Sistemas DEI-ISEP

(1)

Interface Web

XHTML - CSS

Arquitectura de Sistemas

DEI-ISEP

(2)

Interface Web - Programação Cliente

XHTML

Noções de DHTML

Folhas de estilo - Cascading Style Sheets

Javascript

(3)

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

(4)

XHTML

Linguagem baseada em etiquetas (tags)

As etiquetas são instruções para o Browser

Sintaxe genérica:

a)

<etiqueta atributo1=“valor1” … >

b)

<etiqueta atributo1=“valor1” … >

conteúdo (texto para a página)

</etiqueta>

(5)

XHTML

Estrutura base de um ficheiro XHTML

<<!DOCTYPE …

<html>

<head>

</html>

…

</head>

<body>

…

</body>

(6)

HTML

Etiqueta <head>

Zona de definições acessórias da página

Contem normalmente os comandos

<title>

<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:

<meta http-equiv="Refresh" content=“5">

(7)

HTML

Etiqueta <body>

Engloba os elementos constituintes da página

Possui diversos parâmetros que definem

formatos gerais para toda a página.

Podem ser aplicados atributos com influência

sobre toda a página

Côr de fundo

Tipo de letra

…

(8)

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"); 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>

</body> </html>

(9)

HTML – Mudanças de linha

<p> e <br>

Exemplo:

... Texto1<br>Texto2<P>Texto3 Texto4 Texto4 ...

(10)

HTML – Imagens

<img>

src = URL da imagem (jpeg | gif); alt = Texto descritivo;

name = nome do objecto para efeitos de scripting.

Exemplo:

(11)

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

colspancolspan = número de colunas ocupadas= número de colunas ocupadas

;

rowspan = número de linhas ocupadas;

(12)

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>

(13)

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 >C</td></tr> <tr><td>D</td><td>E</td><td>F</td></tr> </table>

(14)

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>

(15)

HTML – <DIV> e <SPAN>

Utilização quase exclusiva como contentores

para definição de estilos (CSS) e scripting

<div> define um bloco de texto e comandos

HTML 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.

(16)

HTML – <DIV> e <SPAN>

<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

(17)

HTML - Frames

Apresentação simultânea de várias páginas na

(18)

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;

(19)

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.

(20)

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.

2 divisões:

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:

(21)

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> ...

(22)

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;

(23)

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/~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>

(24)

HTML – IFRAME

iframe

Insere uma frame numa página (inline)

Permite fazer o display de outra página nessa frame

<iframe src ="/default.asp” width="100%">

(25)

XHTML

XHTML elements must be properly nested

XHTML elements must always be closed

XHTML elements must be in lowercase

XHTML documents must have one root

element

Attribute names must be in lower case

Attribute values must be quoted

Attribute minimization is forbidden

(26)

XHTML

The XHTML DTD defines mandatory elements

<!DOCTYPE Doctype goes here>

(27)

XHTML

A declaração <DOCTYPE define o tipo de documento Não é um elemento da linguagem

Informação para o browser

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

strict.dtd">

DTD (Document Type Definition):

Define as regras gramaticais do documento

Strict – separação entre estilos CSS e conteúdos

Transational

(28)

(29)

HTML - Forms

Permite ao utilizador fornecer informação à

aplicação web.

Baseado em componentes HTML de interface

gráfico.

A informação é enviada para o servidor

recorrendo aos métodos HTTP:

Método GET

Método POST

(30)

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

) .

Informação “sensível” visível no url

http://www.registo.aspx?

nome=C%E9lia+Olivei

(31)

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

(32)

HTML – Forms

Etiqueta <form>

Define o conjunto de informação que será

enviado para um processo a executar no

servidor Web.

Atributos:

action

= URL da página que recebe a

informação;

method

= “GET” | “POST”

Id (name)

= nome do objecto

(33)

(34)

HTML – Forms

Etiqueta <textarea>

Constrói uma caixa de texto

Atributos:

Id (name) = identificador do objecto cols = número de colunas

rows = número de linhas rows = número de linhas

Exemplo:

<textarea cols=”30” rows=”4” name=”xpto” > texto por defeito

(35)

HTML – Forms

Etiqueta <select>

Constrói uma Combo Box ou uma List Box

Atributos:

Id (name) = identificador do objecto size = número itens visíveis

multiple permite selecção múltipla multiple permite selecção múltipla

(36)

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 ” Em XHTML SELECTED=“SELECTED ”

Exemplo:

<select name=”cad” id=“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>

(37)

HTML – Forms

Etiqueta <input>

Constrói diversos tipos de interface consoante o

valor do atributo TYPE.

Atributos généricos:

Id (name) = identificador do objecto

(38)

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>

(39)

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

(40)

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 ...”>

(41)

HTML – Forms

type=“file”

Atributos específicos:

size = tamanho em caracteres da caixa de texto; maxlength = tamanho máximo do nome do ficheiro;

Exemplo:

(42)

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”>

(43)

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=”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>

(44)

HTML - Forms

Action

Atributo de form

Define o URL da página no servidor que recebe a

informação

Method

Atributo de form define o método HTTP de envio da

informação

GET ou POST

<form method=”post” action=”registo.aspx”>

Nome: <input type=”text” name=”nome” size=”40”> …

(45)

HTTP- Transferência de informação

Nome: Célia Olivença

Sexo: Feminino Masculino Ano de Nascimento: 1984 1984 1985 Cadeiras feitas: Amb. Desenv Inglês Tecnico Algebra 1985 1986 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

(46)

Interface Web - Programação Cliente

XHTML

DHTML

Folhas de estilo

Folhas de estilo –

– Cascading Style Sheets

Cascading Style Sheets

(47)

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, ...)

(48)

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

(49)

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

(50)

Cascading Style Sheets

Níveis de utilização:

Local (In-line) – relativo a um comando

especifico na página

Global – especificações para toda uma página

Web

Externo – especificações para diversas

(51)

Cascading Style Sheets

Especificações locais – In-line

Especificações globais – Tag style

<h2 style=”font-size:35pt;color:red;line-height:30px;”>teste</h2> <head> <style type=”text/css”>  </style> </head>

(52)

Cascading Style Sheets

Especificações externas – ficheiro.css

link Tag

Importação nas páginas Web de um ficheiro .css com os estilos <head>

<link type=”text/css” rel=”stylesheet” href=”ficheiro.css”>

</head>

head

O ficheiro externo “ficheiro.css” <head> <style type=”text/css”>  </style> </head>

(53)

Cascading Style Sheets

Precedências

Declarações Locais

Declarações Globais

(54)

Cascading Style Sheets

Aplicação dos estilos

Atributo

class

Permite definir vários estilos para uma mesma

etiqueta.

O estilo definido na class é 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

(55)

Cascading Style Sheets

Exemplo:

<style>

<!--p{font-family:verdana;}

.pergunta {color:green; font-style: italic;} .resposta {color:red;}

#email {font-size: 8pt;}

A <p> faz-se utilizando o

tipo de letra verdana

Estas classes não redefinem o tipo de letra

Define-se um estilo identificador único

#email {font-size: 8pt;}

-->

</style>

<p CLASS=”pergunta”>O quer dizer ISEP?

<p CLASS=”resposta”>Instituto Superior de Engenharia do Porto <p ID=”email”>user@net.com

Logo estes <p CLASS=“...”>

fazem-se utilizando o tipo de letra verdana

Logo neste <p ID=“...”> o tipo

de letra utilizado não é o verdana

(56)

CSS

Organização das propriedades CSS

Colors and background

Fonts

Text

Links (pseudo-class)

Box model

Margin and Paddings

Borders

Height and width

Floating elements

Positioning

(57)

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

(58)

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 height Altura de um objecto

z-index Valor numérico da profundidade visibility visible | hidden

(59)

CSS

Aplicação abreviada de propriedades

Exemplo para font

p { font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;

}

(60)

CSS

Aplicação de selectores

Estilo aplicado a todos os elementos h1

h1 {border-width: 1; border: solid;

text-align: center}

Estilo aplicado a elementos h1 de uma classe

específica

h1.myclass {border-width: 1; border: solid;

text-align: center}

(61)

CSS

Aplicação de selectores

h1 em { color: blue }

O estilo será aplicado a todos os elementos em contidos

em h1

Algumas regras de aplicação

*

Matches any element.

E

Matches any E element (i.e., an element of type E).

E F

Matches any F element that is a descendant of an E element.

E > F

Matches any F element that is a child of an element E.

E:first-child Matches element E when E is the first child of its parent.

(62)

CSS

Pseudo-class

Permitem aplicar estilos a etiquetas dependendo

de estados ou eventos

Tag link: visited, active, hover

a:hover {

text-transform: uppercase;

font-weight:bold;

color:blue;

background-color:yellow;

}

Elementos gráficos: input, button.

(63)

CSS

(64)

CSS – Exemplos 1/3

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%; } .up { text-transform: uppercase; } </style>

<body>

<h1>ARQSI 2008/2009</h1>

Desenvolvimento de aplicações para a web. <h3>Xhtml</h3>

<h3><span class="up">asp .net</span></h3> <h3>JavaScript</h3>

(65)

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

(66)

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>