SEPARAÇÃO EM: Apresentação Estrutura Comportamento

Tamanho: px

Começar a partir da página:

Download "SEPARAÇÃO EM: Apresentação Estrutura Comportamento"

Estela Canedo Cavalheiro
6 Há anos
Visualizações:

1 SEPARAÇÃO EM: Apresentação Estrutura Comportamento Arquitectura de Sistemas DEI-ISEP

2 Estrutura/Apresentação/Comportamento Uma boa prática na construção de páginas web: Separação em 3 camadas: Estrutura / Apresentação / Comportamento (XHTML) (CSS) (JavaScript)

3 Estrutura/Apresentação/Comportamento Vantagens desta separação: Páginas mais fáceis Páginas mais pequenas Fácil entender o código Fácil manutenção Maior consistência

4 Estrutura / Apresentação A estrutura de um documento web é descrita pelo conteúdo da página HTML(texto, imagens, tabelas, animações, ) A apresentação é descrita através de CSS, num ficheiro separado da página HTML, linkado a uma ou várias páginas. Em HTML <link rel= stylesheet type= text/css href= /nomefich.css />

5 Estrutura / Apresentação Exemplo: Pretende-se construir uma página com o conteúdo e a configuração abaixo indicados Arquitectura de Sistemas XHTML JavaScript As aulas Laboratoriais terão início em 6 de Outubro de 2009 Engª Informática do ISEP Deve ainda prever que quando passa o rato sobre XHTML ou JavaScript, o conteúdo passa a Extended HTML ou Linguagem de Script, respectivamente, regressando aos valores iniciais quando o rato abandona os elementos.

6 Estrutura / Apresentação 1.º Passo Dividir a página em blocos HTML (<div.>), inserir-lhes os conteúdos Dar id=. a cada bloco div No exemplo, criamos os seguintes blocos: <div id= contentor </div> <div id= cabecalho... <div id= menu... <div id= conteudo... <div id= rodape... ></div> ></div> ></div> ></div>

7 Estrutura / Apresentação Ficheiro xxx.html </body> <div id ="contentor"> <div id ="cabecalho">arquitectura de Sistemas</div> <div id= menu"> <ul > <li><a href="#" id="item1" >XHTML</a></li> <li><a href="#" id="item2" >JavaScript</a></li> </ul> </div> <div id="conteudo"> As aulas Laboratoriais <p />terão início em <p />6 de Outubro de 2009 </div> <div id= rodape"> Eng.ª Informática do ISEP</div> </div> </body>

8 Estrutura / Apresentação A execução do código anterior resulta no seguinte: div contentor div cabecalho div menu div conteudo div rodape

9 Estrutura / Apresentação 2.º Passo: Fazer o ficheiro.css com o código dos estilos de apresentação de cada classe e/ou elemento Boas práticas na criação de estilos: Colocar as propriedades por ordem alfabética(>visibilidade) Usar comentários. Usar linhas com atributos condensados se estes forem <=3. border :solid 1px blue; Não fazer CSS s sem o HTML completo.

10 Estrutura / Apresentação #contentor { } border:solid 1px red; font-family:courier New; #cabecalho { height:10%; background-color:orange; font-size:200%; font-weight:bolder; padding:1em; text-align:center; } #menu { float:left; width:30%; font-size:200%; font-weight:bolder; line-height:200%; padding:1%; text-align:left; } /*Estilos de classes #conteudo { border-left:solid 2px gray; font-family:arial; font-size:200%; line-height:150%; margin-left:30%; padding:5%; text-align:center; } #rodape { } ficheiro xxx.css*/ height:5%; background-color:aqua; clear:left; font-size:50%; padding:1%; text-align:left;

11 Estrutura / Apresentação 3.º Passo Ligação do ficheiro.css à página.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>separação Estrutura / Apresentação</title> <link rel="stylesheet" type="text/css" href= /> </head> <body> ::: ::: ::: ::: :::

12 Estrutura / Apresentação A execução da página no browser dá lugar à seguinte apresentação:

13 Estrutura / Comportamento O comportamento numa página HTML é descrito através de funções JavaScript. As funções JavaScript serão colocadas num ficheiro externo.js, formando a camada de comportamento. No HTML <script type= text/javascript src= > </script>

14 Estrutura / Comportamento No exemplo anterior pretende-se juntar aos items XHTML e JavaScript as acções de onmouseover e onmouseout. Teríamos mistura de estrutura e comportamento se fizéssemos no HTML o que abaixo se indica: <li><a href="#" id="item1" onmouseover="setmouseover()" onmouseout="setmouseout()">xhtml</a></li> <li><a href="#" id="item2" onmouseover="setmouseover()" onmouseout="setmouseout()">javascript</a></li> é isto que vamos evitar

15 Estrutura / Comportamento 1.º Passo Retirar os event handlers do html. 2.º Passo Juntar no HTML id=... aos elementos que pretendemos que façam uma acção; no exemplo, já o tínhamos feito. 3.º Passo Criar o ficheiro.js em que se associa o event handler com o id do elemento de acordo com o seguinte código:

16 Estrutura / Comportamento //ficheiro xxx.js function initmouseovers(){ var obj1=document.getelementbyid('item1'); //passando o rato no item1 escreve Extended HTML obj1.onmouseover = function() { altera(obj1, 'Extended HTML') }; //saindo o rato do item1 escreve novamente HTML obj1.onmouseout = function() { altera(obj1, 'HTML') }; var obj2=document.getelementbyid('item2'); //passando o rato no item2 escreve Linguagem de Script obj2.onmouseover=function() { altera(obj2, 'Linguagem de Script') }; } //saindo o rato do item2 escreve novamente JavaScript obj2.onmouseout = function() { altera(obj2, 'JavaScript') }; function altera(obj, novastring){ obj.innerhtml = novastring; } window.onload=initmouseovers;

17 Estrutura / Comportamento 4.º Passo Ligação do ficheiro.js à página.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>separação Apresentação/Estrutura</title> <link rel="stylesheet" type="text/css" href= <script type= text/javascript src= ></script> </head> <body> ::: ::: ::: ::: :::

18 Estrutura / Comportamento Assim quando passamos o rato sobre HTML(item1) obteríamos:

19 Apresentação / Comportamento Por vezes surgem dúvidas em como codificar, se através de CSS s se através de JavaScript, dado que actualmente CSS s tomaram o lugar de algumas funções tradicionais de JavaScript Ex: aparecimento/desaparecimento de submenus Em CSS, este caso é muito simples: #naveg li ul { display: none; } #naveg li :hover ul { display: block; } Em Javascript teríamos que atribuir a cada link de navegação um event handler, e abrir e fechar os submenus respectivos. No entanto, no Windows Explorer :hover só funciona no elemento link.

20 Apresentação / Comportamento Conclusão: A separação entre apresentação e comportamento depende de certo modo das preferências do programador. Devemos ter atenção para não espalhar uma acção pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS). Consultar:

Documentos relacionados

Funções em JavaScript

Sintaxe para declaração de funções: function f1() { return "Olá"; function f2(nome) { return "Bom dia " + nome; Funções em JavaScript As funções podem retornar ou não valores e podem receber ou não argumentos.