SEPARAÇÃO EM: Apresentação Estrutura Comportamentomouta/ARQSI-2009-2010-1Sem/Se... · página...
20
Click here to load reader
Transcript of SEPARAÇÃO EM: Apresentação Estrutura Comportamentomouta/ARQSI-2009-2010-1Sem/Se... · página...
Arquitectura de SistemasDEI-ISEP
Departamento de
Engenharia Informaacutetica
ISEPIPP
SEPARACcedilAtildeO EMApresentaccedilatildeoEstruturaComportamento
Departamento de
Engenharia Informaacutetica
ISEPIPP
EstruturaApresentaccedilatildeoComportamento
Uma boa praacutetica na construccedilatildeo de paacuteginas web
Separaccedilatildeo em 3 camadas
Estrutura Apresentaccedilatildeo Comportamento
(XHTML) (CSS) (JavaScript)
Departamento de
Engenharia Informaacutetica
ISEPIPP
EstruturaApresentaccedilatildeoComportamento
Vantagens desta separaccedilatildeo
Paacuteginas mais faacuteceis
Paacuteginas mais pequenas
Faacutecil entender o coacutedigo
Faacutecil manutenccedilatildeo
Maior consistecircncia
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A estrutura de um documento web eacute descrita pelo conteuacutedo da paacutegina HTML(texto imagens tabelas animaccedilotildeeshellip)
A apresentaccedilatildeo eacute descrita atraveacutes de CSS num ficheiro separado da paacutegina HTML ldquolinkadordquo a uma ou vaacuterias paacuteginas
Em HTMLltlink rel=ldquostylesheetrdquo type=ldquotextcssrdquo href=ldquohttphellip hellipnomefichcssrdquo gt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
Exemplo Pretende-se construir uma paacutegina com o conteuacutedo e a configuraccedilatildeo abaixo indicados
XHTML
JavaScript
As aulas Laboratoriais
teratildeo iniacutecio em
6 de Outubro de 2009
Departamento de Engordf Informaacutetica do ISEP
Arquitectura de Sistemas
Deve ainda prever que quando passa o rato sobre XHTML ou JavaScript o conteuacutedo passa a Extended HTML ou Linguagem de Script respectivamente regressando aos valores iniciais quando o rato abandona os elementos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
1ordm Passo Dividir a paacutegina em blocos HTML (ltdivhellipgt) inserir-lhes os
conteuacutedos
Dar id=hellip a cada bloco div
No exemplo criamos os seguintes blocos
ltdiv id=ldquocontentorrdquo
ltdiv id=ldquocabecalhordquo gtltdivgt
ltdiv id=ldquomenurdquo gtltdivgt
ltdiv id=ldquoconteudordquo gtltdivgt
ltdiv id=ldquorodaperdquo gtltdivgt
ltdivgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
hellip hellip hellipltbodygt
ltdiv id =contentorgt
ltdiv id =cabecalhogtArquitectura de Sistemasltdivgt
ltdiv id=ldquomenugt
ltul gt
ltligtlta href= id=item1 gtXHTMLltagtltligt
ltligtlta href= id=item2 gtJavaScriptltagtltligt
ltulgt
ltdivgt
ltdiv id=conteudogt
As aulas Laboratoriais ltp gtteratildeo iniacutecio em ltp gt6 de Outubro de 2009
ltdivgt
ltdiv id=ldquorodapegtDepartamento de Engordf Informaacutetica do ISEPltdivgt
ltdivgt
ltbodygt
Ficheiro xxxhtml
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo do coacutedigo anterior resulta no seguinte
div conteudo
div cabecalho
div menu
div contentor
div rodape
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
2ordm Passo
Fazer o ficheiro css com o coacutedigo dos estilos de apresentaccedilatildeo de cada classe eou elemento
Boas praacuteticas na criaccedilatildeo de estilos
Colocar as propriedades por ordem alfabeacutetica(gtvisibilidade)
Usar comentaacuterios
Usar linhas com atributos condensados se estes forem lt=3
border solid 1px blue
Natildeo fazer CSS‟s sem o HTML completo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
conteudo
border-leftsolid 2px gray
font-familyArial
font-size200
line-height150
margin-left30
padding5
text-aligncenter
rodape
height5
background-coloraqua
clearleft
font-size50
padding1
text-alignleft
contentor
bordersolid 1px red
font-familyCourier New
cabecalho
height10
background-colororange
font-size200
font-weightbolder
padding1em
text-aligncenter
menu
floatleft
width30
font-size200
font-weightbolder
line-height200
padding1
text-alignleft
Estilos de classes ficheiro xxxcss
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
3ordm Passo
Ligaccedilatildeo do ficheiro css agrave paacutegina html
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo Estrutura Apresentaccedilatildeolttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcss gt
ltheadgt
ltbodygt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo da paacutegina no browser daacute lugar agrave seguinte apresentaccedilatildeo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
EstruturaApresentaccedilatildeoComportamento
Uma boa praacutetica na construccedilatildeo de paacuteginas web
Separaccedilatildeo em 3 camadas
Estrutura Apresentaccedilatildeo Comportamento
(XHTML) (CSS) (JavaScript)
Departamento de
Engenharia Informaacutetica
ISEPIPP
EstruturaApresentaccedilatildeoComportamento
Vantagens desta separaccedilatildeo
Paacuteginas mais faacuteceis
Paacuteginas mais pequenas
Faacutecil entender o coacutedigo
Faacutecil manutenccedilatildeo
Maior consistecircncia
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A estrutura de um documento web eacute descrita pelo conteuacutedo da paacutegina HTML(texto imagens tabelas animaccedilotildeeshellip)
A apresentaccedilatildeo eacute descrita atraveacutes de CSS num ficheiro separado da paacutegina HTML ldquolinkadordquo a uma ou vaacuterias paacuteginas
Em HTMLltlink rel=ldquostylesheetrdquo type=ldquotextcssrdquo href=ldquohttphellip hellipnomefichcssrdquo gt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
Exemplo Pretende-se construir uma paacutegina com o conteuacutedo e a configuraccedilatildeo abaixo indicados
XHTML
JavaScript
As aulas Laboratoriais
teratildeo iniacutecio em
6 de Outubro de 2009
Departamento de Engordf Informaacutetica do ISEP
Arquitectura de Sistemas
Deve ainda prever que quando passa o rato sobre XHTML ou JavaScript o conteuacutedo passa a Extended HTML ou Linguagem de Script respectivamente regressando aos valores iniciais quando o rato abandona os elementos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
1ordm Passo Dividir a paacutegina em blocos HTML (ltdivhellipgt) inserir-lhes os
conteuacutedos
Dar id=hellip a cada bloco div
No exemplo criamos os seguintes blocos
ltdiv id=ldquocontentorrdquo
ltdiv id=ldquocabecalhordquo gtltdivgt
ltdiv id=ldquomenurdquo gtltdivgt
ltdiv id=ldquoconteudordquo gtltdivgt
ltdiv id=ldquorodaperdquo gtltdivgt
ltdivgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
hellip hellip hellipltbodygt
ltdiv id =contentorgt
ltdiv id =cabecalhogtArquitectura de Sistemasltdivgt
ltdiv id=ldquomenugt
ltul gt
ltligtlta href= id=item1 gtXHTMLltagtltligt
ltligtlta href= id=item2 gtJavaScriptltagtltligt
ltulgt
ltdivgt
ltdiv id=conteudogt
As aulas Laboratoriais ltp gtteratildeo iniacutecio em ltp gt6 de Outubro de 2009
ltdivgt
ltdiv id=ldquorodapegtDepartamento de Engordf Informaacutetica do ISEPltdivgt
ltdivgt
ltbodygt
Ficheiro xxxhtml
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo do coacutedigo anterior resulta no seguinte
div conteudo
div cabecalho
div menu
div contentor
div rodape
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
2ordm Passo
Fazer o ficheiro css com o coacutedigo dos estilos de apresentaccedilatildeo de cada classe eou elemento
Boas praacuteticas na criaccedilatildeo de estilos
Colocar as propriedades por ordem alfabeacutetica(gtvisibilidade)
Usar comentaacuterios
Usar linhas com atributos condensados se estes forem lt=3
border solid 1px blue
Natildeo fazer CSS‟s sem o HTML completo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
conteudo
border-leftsolid 2px gray
font-familyArial
font-size200
line-height150
margin-left30
padding5
text-aligncenter
rodape
height5
background-coloraqua
clearleft
font-size50
padding1
text-alignleft
contentor
bordersolid 1px red
font-familyCourier New
cabecalho
height10
background-colororange
font-size200
font-weightbolder
padding1em
text-aligncenter
menu
floatleft
width30
font-size200
font-weightbolder
line-height200
padding1
text-alignleft
Estilos de classes ficheiro xxxcss
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
3ordm Passo
Ligaccedilatildeo do ficheiro css agrave paacutegina html
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo Estrutura Apresentaccedilatildeolttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcss gt
ltheadgt
ltbodygt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo da paacutegina no browser daacute lugar agrave seguinte apresentaccedilatildeo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
EstruturaApresentaccedilatildeoComportamento
Vantagens desta separaccedilatildeo
Paacuteginas mais faacuteceis
Paacuteginas mais pequenas
Faacutecil entender o coacutedigo
Faacutecil manutenccedilatildeo
Maior consistecircncia
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A estrutura de um documento web eacute descrita pelo conteuacutedo da paacutegina HTML(texto imagens tabelas animaccedilotildeeshellip)
A apresentaccedilatildeo eacute descrita atraveacutes de CSS num ficheiro separado da paacutegina HTML ldquolinkadordquo a uma ou vaacuterias paacuteginas
Em HTMLltlink rel=ldquostylesheetrdquo type=ldquotextcssrdquo href=ldquohttphellip hellipnomefichcssrdquo gt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
Exemplo Pretende-se construir uma paacutegina com o conteuacutedo e a configuraccedilatildeo abaixo indicados
XHTML
JavaScript
As aulas Laboratoriais
teratildeo iniacutecio em
6 de Outubro de 2009
Departamento de Engordf Informaacutetica do ISEP
Arquitectura de Sistemas
Deve ainda prever que quando passa o rato sobre XHTML ou JavaScript o conteuacutedo passa a Extended HTML ou Linguagem de Script respectivamente regressando aos valores iniciais quando o rato abandona os elementos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
1ordm Passo Dividir a paacutegina em blocos HTML (ltdivhellipgt) inserir-lhes os
conteuacutedos
Dar id=hellip a cada bloco div
No exemplo criamos os seguintes blocos
ltdiv id=ldquocontentorrdquo
ltdiv id=ldquocabecalhordquo gtltdivgt
ltdiv id=ldquomenurdquo gtltdivgt
ltdiv id=ldquoconteudordquo gtltdivgt
ltdiv id=ldquorodaperdquo gtltdivgt
ltdivgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
hellip hellip hellipltbodygt
ltdiv id =contentorgt
ltdiv id =cabecalhogtArquitectura de Sistemasltdivgt
ltdiv id=ldquomenugt
ltul gt
ltligtlta href= id=item1 gtXHTMLltagtltligt
ltligtlta href= id=item2 gtJavaScriptltagtltligt
ltulgt
ltdivgt
ltdiv id=conteudogt
As aulas Laboratoriais ltp gtteratildeo iniacutecio em ltp gt6 de Outubro de 2009
ltdivgt
ltdiv id=ldquorodapegtDepartamento de Engordf Informaacutetica do ISEPltdivgt
ltdivgt
ltbodygt
Ficheiro xxxhtml
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo do coacutedigo anterior resulta no seguinte
div conteudo
div cabecalho
div menu
div contentor
div rodape
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
2ordm Passo
Fazer o ficheiro css com o coacutedigo dos estilos de apresentaccedilatildeo de cada classe eou elemento
Boas praacuteticas na criaccedilatildeo de estilos
Colocar as propriedades por ordem alfabeacutetica(gtvisibilidade)
Usar comentaacuterios
Usar linhas com atributos condensados se estes forem lt=3
border solid 1px blue
Natildeo fazer CSS‟s sem o HTML completo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
conteudo
border-leftsolid 2px gray
font-familyArial
font-size200
line-height150
margin-left30
padding5
text-aligncenter
rodape
height5
background-coloraqua
clearleft
font-size50
padding1
text-alignleft
contentor
bordersolid 1px red
font-familyCourier New
cabecalho
height10
background-colororange
font-size200
font-weightbolder
padding1em
text-aligncenter
menu
floatleft
width30
font-size200
font-weightbolder
line-height200
padding1
text-alignleft
Estilos de classes ficheiro xxxcss
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
3ordm Passo
Ligaccedilatildeo do ficheiro css agrave paacutegina html
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo Estrutura Apresentaccedilatildeolttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcss gt
ltheadgt
ltbodygt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo da paacutegina no browser daacute lugar agrave seguinte apresentaccedilatildeo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A estrutura de um documento web eacute descrita pelo conteuacutedo da paacutegina HTML(texto imagens tabelas animaccedilotildeeshellip)
A apresentaccedilatildeo eacute descrita atraveacutes de CSS num ficheiro separado da paacutegina HTML ldquolinkadordquo a uma ou vaacuterias paacuteginas
Em HTMLltlink rel=ldquostylesheetrdquo type=ldquotextcssrdquo href=ldquohttphellip hellipnomefichcssrdquo gt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
Exemplo Pretende-se construir uma paacutegina com o conteuacutedo e a configuraccedilatildeo abaixo indicados
XHTML
JavaScript
As aulas Laboratoriais
teratildeo iniacutecio em
6 de Outubro de 2009
Departamento de Engordf Informaacutetica do ISEP
Arquitectura de Sistemas
Deve ainda prever que quando passa o rato sobre XHTML ou JavaScript o conteuacutedo passa a Extended HTML ou Linguagem de Script respectivamente regressando aos valores iniciais quando o rato abandona os elementos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
1ordm Passo Dividir a paacutegina em blocos HTML (ltdivhellipgt) inserir-lhes os
conteuacutedos
Dar id=hellip a cada bloco div
No exemplo criamos os seguintes blocos
ltdiv id=ldquocontentorrdquo
ltdiv id=ldquocabecalhordquo gtltdivgt
ltdiv id=ldquomenurdquo gtltdivgt
ltdiv id=ldquoconteudordquo gtltdivgt
ltdiv id=ldquorodaperdquo gtltdivgt
ltdivgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
hellip hellip hellipltbodygt
ltdiv id =contentorgt
ltdiv id =cabecalhogtArquitectura de Sistemasltdivgt
ltdiv id=ldquomenugt
ltul gt
ltligtlta href= id=item1 gtXHTMLltagtltligt
ltligtlta href= id=item2 gtJavaScriptltagtltligt
ltulgt
ltdivgt
ltdiv id=conteudogt
As aulas Laboratoriais ltp gtteratildeo iniacutecio em ltp gt6 de Outubro de 2009
ltdivgt
ltdiv id=ldquorodapegtDepartamento de Engordf Informaacutetica do ISEPltdivgt
ltdivgt
ltbodygt
Ficheiro xxxhtml
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo do coacutedigo anterior resulta no seguinte
div conteudo
div cabecalho
div menu
div contentor
div rodape
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
2ordm Passo
Fazer o ficheiro css com o coacutedigo dos estilos de apresentaccedilatildeo de cada classe eou elemento
Boas praacuteticas na criaccedilatildeo de estilos
Colocar as propriedades por ordem alfabeacutetica(gtvisibilidade)
Usar comentaacuterios
Usar linhas com atributos condensados se estes forem lt=3
border solid 1px blue
Natildeo fazer CSS‟s sem o HTML completo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
conteudo
border-leftsolid 2px gray
font-familyArial
font-size200
line-height150
margin-left30
padding5
text-aligncenter
rodape
height5
background-coloraqua
clearleft
font-size50
padding1
text-alignleft
contentor
bordersolid 1px red
font-familyCourier New
cabecalho
height10
background-colororange
font-size200
font-weightbolder
padding1em
text-aligncenter
menu
floatleft
width30
font-size200
font-weightbolder
line-height200
padding1
text-alignleft
Estilos de classes ficheiro xxxcss
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
3ordm Passo
Ligaccedilatildeo do ficheiro css agrave paacutegina html
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo Estrutura Apresentaccedilatildeolttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcss gt
ltheadgt
ltbodygt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo da paacutegina no browser daacute lugar agrave seguinte apresentaccedilatildeo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
Exemplo Pretende-se construir uma paacutegina com o conteuacutedo e a configuraccedilatildeo abaixo indicados
XHTML
JavaScript
As aulas Laboratoriais
teratildeo iniacutecio em
6 de Outubro de 2009
Departamento de Engordf Informaacutetica do ISEP
Arquitectura de Sistemas
Deve ainda prever que quando passa o rato sobre XHTML ou JavaScript o conteuacutedo passa a Extended HTML ou Linguagem de Script respectivamente regressando aos valores iniciais quando o rato abandona os elementos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
1ordm Passo Dividir a paacutegina em blocos HTML (ltdivhellipgt) inserir-lhes os
conteuacutedos
Dar id=hellip a cada bloco div
No exemplo criamos os seguintes blocos
ltdiv id=ldquocontentorrdquo
ltdiv id=ldquocabecalhordquo gtltdivgt
ltdiv id=ldquomenurdquo gtltdivgt
ltdiv id=ldquoconteudordquo gtltdivgt
ltdiv id=ldquorodaperdquo gtltdivgt
ltdivgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
hellip hellip hellipltbodygt
ltdiv id =contentorgt
ltdiv id =cabecalhogtArquitectura de Sistemasltdivgt
ltdiv id=ldquomenugt
ltul gt
ltligtlta href= id=item1 gtXHTMLltagtltligt
ltligtlta href= id=item2 gtJavaScriptltagtltligt
ltulgt
ltdivgt
ltdiv id=conteudogt
As aulas Laboratoriais ltp gtteratildeo iniacutecio em ltp gt6 de Outubro de 2009
ltdivgt
ltdiv id=ldquorodapegtDepartamento de Engordf Informaacutetica do ISEPltdivgt
ltdivgt
ltbodygt
Ficheiro xxxhtml
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo do coacutedigo anterior resulta no seguinte
div conteudo
div cabecalho
div menu
div contentor
div rodape
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
2ordm Passo
Fazer o ficheiro css com o coacutedigo dos estilos de apresentaccedilatildeo de cada classe eou elemento
Boas praacuteticas na criaccedilatildeo de estilos
Colocar as propriedades por ordem alfabeacutetica(gtvisibilidade)
Usar comentaacuterios
Usar linhas com atributos condensados se estes forem lt=3
border solid 1px blue
Natildeo fazer CSS‟s sem o HTML completo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
conteudo
border-leftsolid 2px gray
font-familyArial
font-size200
line-height150
margin-left30
padding5
text-aligncenter
rodape
height5
background-coloraqua
clearleft
font-size50
padding1
text-alignleft
contentor
bordersolid 1px red
font-familyCourier New
cabecalho
height10
background-colororange
font-size200
font-weightbolder
padding1em
text-aligncenter
menu
floatleft
width30
font-size200
font-weightbolder
line-height200
padding1
text-alignleft
Estilos de classes ficheiro xxxcss
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
3ordm Passo
Ligaccedilatildeo do ficheiro css agrave paacutegina html
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo Estrutura Apresentaccedilatildeolttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcss gt
ltheadgt
ltbodygt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo da paacutegina no browser daacute lugar agrave seguinte apresentaccedilatildeo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
1ordm Passo Dividir a paacutegina em blocos HTML (ltdivhellipgt) inserir-lhes os
conteuacutedos
Dar id=hellip a cada bloco div
No exemplo criamos os seguintes blocos
ltdiv id=ldquocontentorrdquo
ltdiv id=ldquocabecalhordquo gtltdivgt
ltdiv id=ldquomenurdquo gtltdivgt
ltdiv id=ldquoconteudordquo gtltdivgt
ltdiv id=ldquorodaperdquo gtltdivgt
ltdivgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
hellip hellip hellipltbodygt
ltdiv id =contentorgt
ltdiv id =cabecalhogtArquitectura de Sistemasltdivgt
ltdiv id=ldquomenugt
ltul gt
ltligtlta href= id=item1 gtXHTMLltagtltligt
ltligtlta href= id=item2 gtJavaScriptltagtltligt
ltulgt
ltdivgt
ltdiv id=conteudogt
As aulas Laboratoriais ltp gtteratildeo iniacutecio em ltp gt6 de Outubro de 2009
ltdivgt
ltdiv id=ldquorodapegtDepartamento de Engordf Informaacutetica do ISEPltdivgt
ltdivgt
ltbodygt
Ficheiro xxxhtml
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo do coacutedigo anterior resulta no seguinte
div conteudo
div cabecalho
div menu
div contentor
div rodape
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
2ordm Passo
Fazer o ficheiro css com o coacutedigo dos estilos de apresentaccedilatildeo de cada classe eou elemento
Boas praacuteticas na criaccedilatildeo de estilos
Colocar as propriedades por ordem alfabeacutetica(gtvisibilidade)
Usar comentaacuterios
Usar linhas com atributos condensados se estes forem lt=3
border solid 1px blue
Natildeo fazer CSS‟s sem o HTML completo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
conteudo
border-leftsolid 2px gray
font-familyArial
font-size200
line-height150
margin-left30
padding5
text-aligncenter
rodape
height5
background-coloraqua
clearleft
font-size50
padding1
text-alignleft
contentor
bordersolid 1px red
font-familyCourier New
cabecalho
height10
background-colororange
font-size200
font-weightbolder
padding1em
text-aligncenter
menu
floatleft
width30
font-size200
font-weightbolder
line-height200
padding1
text-alignleft
Estilos de classes ficheiro xxxcss
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
3ordm Passo
Ligaccedilatildeo do ficheiro css agrave paacutegina html
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo Estrutura Apresentaccedilatildeolttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcss gt
ltheadgt
ltbodygt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo da paacutegina no browser daacute lugar agrave seguinte apresentaccedilatildeo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
hellip hellip hellipltbodygt
ltdiv id =contentorgt
ltdiv id =cabecalhogtArquitectura de Sistemasltdivgt
ltdiv id=ldquomenugt
ltul gt
ltligtlta href= id=item1 gtXHTMLltagtltligt
ltligtlta href= id=item2 gtJavaScriptltagtltligt
ltulgt
ltdivgt
ltdiv id=conteudogt
As aulas Laboratoriais ltp gtteratildeo iniacutecio em ltp gt6 de Outubro de 2009
ltdivgt
ltdiv id=ldquorodapegtDepartamento de Engordf Informaacutetica do ISEPltdivgt
ltdivgt
ltbodygt
Ficheiro xxxhtml
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo do coacutedigo anterior resulta no seguinte
div conteudo
div cabecalho
div menu
div contentor
div rodape
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
2ordm Passo
Fazer o ficheiro css com o coacutedigo dos estilos de apresentaccedilatildeo de cada classe eou elemento
Boas praacuteticas na criaccedilatildeo de estilos
Colocar as propriedades por ordem alfabeacutetica(gtvisibilidade)
Usar comentaacuterios
Usar linhas com atributos condensados se estes forem lt=3
border solid 1px blue
Natildeo fazer CSS‟s sem o HTML completo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
conteudo
border-leftsolid 2px gray
font-familyArial
font-size200
line-height150
margin-left30
padding5
text-aligncenter
rodape
height5
background-coloraqua
clearleft
font-size50
padding1
text-alignleft
contentor
bordersolid 1px red
font-familyCourier New
cabecalho
height10
background-colororange
font-size200
font-weightbolder
padding1em
text-aligncenter
menu
floatleft
width30
font-size200
font-weightbolder
line-height200
padding1
text-alignleft
Estilos de classes ficheiro xxxcss
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
3ordm Passo
Ligaccedilatildeo do ficheiro css agrave paacutegina html
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo Estrutura Apresentaccedilatildeolttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcss gt
ltheadgt
ltbodygt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo da paacutegina no browser daacute lugar agrave seguinte apresentaccedilatildeo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo do coacutedigo anterior resulta no seguinte
div conteudo
div cabecalho
div menu
div contentor
div rodape
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
2ordm Passo
Fazer o ficheiro css com o coacutedigo dos estilos de apresentaccedilatildeo de cada classe eou elemento
Boas praacuteticas na criaccedilatildeo de estilos
Colocar as propriedades por ordem alfabeacutetica(gtvisibilidade)
Usar comentaacuterios
Usar linhas com atributos condensados se estes forem lt=3
border solid 1px blue
Natildeo fazer CSS‟s sem o HTML completo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
conteudo
border-leftsolid 2px gray
font-familyArial
font-size200
line-height150
margin-left30
padding5
text-aligncenter
rodape
height5
background-coloraqua
clearleft
font-size50
padding1
text-alignleft
contentor
bordersolid 1px red
font-familyCourier New
cabecalho
height10
background-colororange
font-size200
font-weightbolder
padding1em
text-aligncenter
menu
floatleft
width30
font-size200
font-weightbolder
line-height200
padding1
text-alignleft
Estilos de classes ficheiro xxxcss
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
3ordm Passo
Ligaccedilatildeo do ficheiro css agrave paacutegina html
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo Estrutura Apresentaccedilatildeolttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcss gt
ltheadgt
ltbodygt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo da paacutegina no browser daacute lugar agrave seguinte apresentaccedilatildeo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
2ordm Passo
Fazer o ficheiro css com o coacutedigo dos estilos de apresentaccedilatildeo de cada classe eou elemento
Boas praacuteticas na criaccedilatildeo de estilos
Colocar as propriedades por ordem alfabeacutetica(gtvisibilidade)
Usar comentaacuterios
Usar linhas com atributos condensados se estes forem lt=3
border solid 1px blue
Natildeo fazer CSS‟s sem o HTML completo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
conteudo
border-leftsolid 2px gray
font-familyArial
font-size200
line-height150
margin-left30
padding5
text-aligncenter
rodape
height5
background-coloraqua
clearleft
font-size50
padding1
text-alignleft
contentor
bordersolid 1px red
font-familyCourier New
cabecalho
height10
background-colororange
font-size200
font-weightbolder
padding1em
text-aligncenter
menu
floatleft
width30
font-size200
font-weightbolder
line-height200
padding1
text-alignleft
Estilos de classes ficheiro xxxcss
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
3ordm Passo
Ligaccedilatildeo do ficheiro css agrave paacutegina html
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo Estrutura Apresentaccedilatildeolttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcss gt
ltheadgt
ltbodygt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo da paacutegina no browser daacute lugar agrave seguinte apresentaccedilatildeo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
conteudo
border-leftsolid 2px gray
font-familyArial
font-size200
line-height150
margin-left30
padding5
text-aligncenter
rodape
height5
background-coloraqua
clearleft
font-size50
padding1
text-alignleft
contentor
bordersolid 1px red
font-familyCourier New
cabecalho
height10
background-colororange
font-size200
font-weightbolder
padding1em
text-aligncenter
menu
floatleft
width30
font-size200
font-weightbolder
line-height200
padding1
text-alignleft
Estilos de classes ficheiro xxxcss
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
3ordm Passo
Ligaccedilatildeo do ficheiro css agrave paacutegina html
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo Estrutura Apresentaccedilatildeolttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcss gt
ltheadgt
ltbodygt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo da paacutegina no browser daacute lugar agrave seguinte apresentaccedilatildeo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
3ordm Passo
Ligaccedilatildeo do ficheiro css agrave paacutegina html
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo Estrutura Apresentaccedilatildeolttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcss gt
ltheadgt
ltbodygt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo da paacutegina no browser daacute lugar agrave seguinte apresentaccedilatildeo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Apresentaccedilatildeo
A execuccedilatildeo da paacutegina no browser daacute lugar agrave seguinte apresentaccedilatildeo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
O comportamento numa paacutegina HTML eacute descrito atraveacutes de funccedilotildees JavaScript
As funccedilotildees JavaScript seratildeo colocadas num ficheiro externo js formando a camada de comportamento
No HTML
ltscript type=ldquotextjavascriptrdquo src=ldquohttpnomeficheirojsrdquogt
ltscriptgt
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
No exemplo anterior pretende-se juntar aos items ldquoXHTMLrdquo e ldquoJavaScriptrdquo as acccedilotildees de ldquoonmouseoverrdquo e ldquoonmouseoutrdquo
Teriacuteamos mistura de estrutura e comportamento se fizeacutessemos no HTML o que abaixo se indica
ltligtlta href= id=item1 onmouseover=setMouseOver()onmouseout=setMouseOut()gtXHTMLltagtltligt
ltligtlta href= id=item2 onmouseover=setMouseOver()onmouseout=setMouseOut()gtJavaScriptltagtltligt
eacute isto que vamos evitar
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
1ordm Passo
Retirar os ldquoevent handlersrdquo do html
2ordm Passo
Juntar no HTML id= aos elementos que pretendemos que faccedilam uma acccedilatildeo no exemplo jaacute o tiacutenhamos feito
3ordm Passo
Criar o ficheiro js em que se associa o bdquoevent handler‟ com o id do elemento de acordo com o seguinte coacutedigo
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamentoficheiro xxxjs
function initMouseOvers()
var obj1=documentgetElementById(item1)
passando o rato no item1 escreve Extended HTML
obj1onmouseover = function() altera(obj1 Extended HTML)
saindo o rato do item1 escreve novamente HTML
obj1onmouseout = function() altera(obj1 HTML)
var obj2=documentgetElementById(item2)
passando o rato no item2 escreve Linguagem de Script
obj2onmouseover=function() altera(obj2 Linguagem de Script)
saindo o rato do item2 escreve novamente JavaScript
obj2onmouseout = function() altera(obj2 JavaScript)
function altera(obj novaString)
objinnerHTML = novaString
windowonload=initMouseOvers
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
ltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
lthtml xmlns=httpwwww3org1999xhtmlgt
ltheadgt
lttitlegtSeparaccedilatildeo ApresentaccedilatildeoEstruturalttitlegt
ltlink rel=stylesheet type=textcss href=ldquohttpxxxcssgt
ltscript type=ldquotextjavascriptrdquo src=ldquohttpxxxjsrdquo gtltscriptgt
ltheadgt
ltbodygt
4ordm Passo
Ligaccedilatildeo do ficheiro js agrave paacutegina html
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Estrutura Comportamento
Assim quando passamos o rato sobre HTML(item1) obteriacuteamos
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Por vezes surgem duacutevidas em como codificar se atraveacutes de CSS‟s se atraveacutes de JavaScript dado que actualmente CSSacutes tomaram o lugar de algumas funccedilotildees tradicionais de JavaScript
Ex aparecimentodesaparecimento de submenus
Em CSS este caso eacute muito simples
naveg li ul
display none
naveg li hover ul
display block
Em Javascript teriacuteamos que atribuir a cada link de navegaccedilatildeo um ldquoevent handlerrdquo e abrir e fechar os submenus respectivos
No entanto no Windows Explorer hover soacute funciona no elemento link
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
Departamento de
Engenharia Informaacutetica
ISEPIPP
Apresentaccedilatildeo Comportamento
Conclusatildeo
A separaccedilatildeo entre apresentaccedilatildeo e comportamento depende de certo modo das preferecircncias do programador
Devemos ter atenccedilatildeo para natildeo espalhar uma acccedilatildeo pelas duas camadas (ou codifica-se toda em JavaScript ou codifica-se toda em CSS)
Consultar
httpwwwmercurytidecouknewsarticleseparation-structure-presentation-and-behaviour
httpwwwpeachpitcomarticlesarticleaspxp=1338952
httpwwwdigital-webcomarticlesseparating_behaviour_and_structure
httpwwwdigital-webcomarticlesseparating_behaviour_and_presentation
![[DevCamp 2014] Melhorando a Usabilidade com Animações](https://static.fdocumentos.tips/doc/165x107/5562cd29d8b42a63498b46e1/devcamp-2014-melhorando-a-usabilidade-com-animacoes-558499dc8e07c.jpg)
