Interface Web XHTML -CSSlosa/ARQSI/DHTML/DHTML_CSS.pdf · CSS 1.0 - (1996 -1999) especificação base (propriedades relativas a cores, espaçamento, e tipos de letra) CSS 2.1 –

Interface Web XHTML - CSS

Arquitectura de SistemasDEI-ISEP

XHTML - CSS

Interface Web - Programação Cliente

�� XHTMLXHTML

� 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� Ficheiros de Texto com extensão html ou htm

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>

<etiqueta atributo=“valor” … />

XHTML

� Estrutura base de um ficheiro XHTML

<<!DOCTYPE …

<html>

<head>

</html>

…

</head>

<body>

…

</body>

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

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

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 � Podem ser aplicados atributos com influência sobre toda a página

� Côr de fundo

� Tipo de letra

� …

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

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;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 >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: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) e scripting

� <div> define um bloco de texto e comandos

HTML separando-o do restante por quebras

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

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

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:

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/~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 – 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%">

</iframe>

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 elementelement

� Attribute names must be in lower case

� Attribute values must be quoted

� Attribute minimization is forbidden

� The id attribute replaces the name attribute

XHTML

� The XHTML DTD defines mandatory elements

<!DOCTYPE Doctype goes here>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>...</title>

</head></head>

<body>...</body>

</html>

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

� Frameset

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 � A informação é enviada 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) .

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

http://www.registo.aspx?nome=C%E9lia+Oliveira&sexo=fem&nascim=1985

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 � Todos os pedidos são obrigatoriamente tratados pelo servidor

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

HTML – FORMS

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

</textarea>

HTML – Forms

� Etiqueta <select>

� Constrói uma Combo Box ou uma List Box

� Atributos:


� size = número itens visíveis

� multiple permite selecção múltipla � multiple 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 ”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>

HTML – Forms

� Etiqueta <input>

� Constrói diversos tipos de interface consoante o

valor do atributo TYPE.

� Atributos généricos:


� type = “text” | “password” | “radio” | “checkbox” | � 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:� Exemplo:

login:<input type=”text” name=”texto” size=”10”><br>password:<input type=”password” name=”pw” size=”15”>

HTML – Forms

� type=“radio” | type=“checkbox”


� value = valor atribuído à escolha;

� checked elemento pré-seleccionado;

Em XHTML CHECKED=“CHECKED ”

� Exemplo:� 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”


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


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


� SRC = URL da imagem;

� type=“hidden”


value = Valor atribuído ao objecto;� 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=”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>

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

…</form>

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

Interface Web - Programação Cliente

� XHTML

�� DHTMLDHTML

�� 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� 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 (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


� 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 e declaração.

H1 { : } color lightgreen

Selector Declaração

Propriedade Valor


� 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 paginas Web (site)


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


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


� Precedências

Declarações Locais

Declarações Globais

Declarações Externas


� 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 � 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 do estilo por um “#”


� Exemplo:<style></style><p CLASS=”pergunta”>O quer dizer ISEP?<p CLASS=”resposta”>Instituto Superior de Engenharia do Porto<p ID=”email”>[email protected]

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

CSS

� Organização das propriedades CSS

� Colors and background

� Fonts

� Text

� Links (pseudo-class)

� Box modelBox model

� Margin and Paddings

� Borders

� Height and width

� Floating elements

� Positioning

� Layers (z-index)

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

z-index Valor numérico da profundidade

visibility visible | hidden

CSS W3C Full property table

CSS

� Aplicação abreviada de propriedades

� Exemplo para font

p { font-style: italic;

font-weight: bold;

font-size: 30px;

font-family: arial, sans-serif;font-family: arial, sans-serif;

}

p { font: italic bold 30px arial, sans-serif; }

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 � Estilo aplicado a elementos h1 de uma classe

específica

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

text-align: center}

<h1 class="myclass"> ….

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

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. .inputtext:focus { backgroung-color: #DDDDEE;}

CSS

� Box model

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

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

</body>


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

</body>


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

CSS

� Usabilidade e Web design

� Consulte o site de Jacob Nielsen´s sobre estes tópicos.

� useit.com: Jakob Nielsen's Website

� Secção Alertbox

� Weblog Usability: The Top Ten Design Mistakes

� Acessibilidade� CSS Techniques for Web Content Accessibility Guidelines 1.0

http://www.w3.org/TR/2000/NOTE-WCAG10-CSS-TECHS-20000920/

Less is more

Keep it Simple

Documents

Interface Web XHTML -CSSlosa/ARQSI/DHTML/DHTML_CSS.pdf · CSS 1.0 - (1996 -1999) especificação base (propriedades relativas a cores, espaçamento, e tipos de letra) CSS 2.1 –