60289 Relatório

From Labmm2

(Difference between revisions)
Jump to: navigation, search
(Layouts)
Line 9: Line 9:
= Layouts =
= Layouts =
-
[[File:LunAbout.png|400px|center|about me]]<center>'''about me''' page</center><br>
+
[[File:LunAbout.png|400px|left|about me]]<span style="float:left;">'''about me''' page</center><br>
-
[[File:LunPhotos.png|400px|center|photos]]<center>'''photos''' page</center><br>
+
[[File:LunPhotos.png|400px|left|photos]]<center>'''photos''' page</center><br>
-
[[File:LunDrawings.png|400px|center|drawings]]<center>'''drawings''' page</center><br>
+
[[File:LunDrawings.png|400px|left|drawings]]<center>'''drawings''' page</center><br>
-
[[File:Paintings.png|400px|center|paintings]]<center>'''paintings''' page</center><br>
+
[[File:Paintings.png|400px|left|paintings]]<center>'''paintings''' page</center><br>
-
[[File:Design.png|400px|center|design]]<center>'''design''' page</center><br>
+
[[File:Design.png|400px|left|design]]<center>'''design''' page</center><br>
-
[[File:Webdesign.png|400px|center|web design]]<center>'''web design''' page</center><br>
+
[[File:Webdesign.png|400px|left|web design]]<center>'''web design''' page</center><br>
-
[[File:Videos.png|400px|center|videos]]<center>'''videos''' page</center><br>
+
[[File:Videos.png|400px|left|videos]]<center>'''videos''' page</center><br>
-
[[File:Contact.png|400px|center|contact me]]<center>'''contact''' page</center><br>
+
[[File:Contact.png|400px|left|contact me]]<center>'''contact''' page</center><br>
<br><br>
<br><br>
 +
<div style="clear:both">
= ''XHTML'' - estrutura implementada =
= ''XHTML'' - estrutura implementada =

Revision as of 18:16, 11 July 2011

Contents


Apresentação e contextualização do tema do projecto

Screen shot 2011-07-11 at 5.29.50 PM.png

O projecto desenvolvido é um portefólio. É um site que aloja informação biográfica e trabalhos da autora, que permite também a comunicação do utilizador com a pessoa em causa.












Layouts

about me
about me page</center>
photos
photos page

drawings
drawings page

paintings
paintings page

design
design page

web design
web design page

videos
videos page

contact me
contact page



XHTML - estrutura implementada

  • iframe para embeber um vídeo
CODE HERE! :3


  • target para abrir vídeos numa nova janela do browser
CODE HERE! :3


  • são utilizados IDs e Classes, conforme apropriado
CODE HERE! :3



CSS - Folhas de Estilos

  • atributos avançados CSS3 (ex: box-shadow, transform)
CODE HERE! :3


  • são utilizadas heranças de classes para referenciar elementos, por forma a simplificar o código (ex: #submenu .button)
CODE HERE! :3


  • são utilizados filtros em identificadores de elementos (ex: input[type=text])
CODE HERE! :3


  • são utilizadas fontes externas (com @font-face)
CODE HERE! :3




JavaScript - principais scripts desenvolvidas

JavaScript puro

  • onMouseOver (feedback das imagens do portfolio)
CODE HERE! :3


  • onMouseOut (feedback das imagens do portfolio)
CODE HERE! :3


  • onLoad (utilizado no <body> para a funçaõ de preload seja chamada)
CODE HERE! :3



JQuery

  • função de preload de imagens

Recebe um array de URLs de imagens, passado quando o <body> é carregado. Por imagem indicada no array é instanciada um objecto do tipo Image(), obrigando a imagem a ser carregada.

CODE HERE! :3


  • função que mantém o menu sempre visível, mesmo quando é feito scroll vertical
. sempre que é feito scroll é verificado se o número de píxeis escondidos pelo scroll (em cima) é maior do que 115 (distância do topo da página ao topo do menu). Se for verdade, é adicionada a classe "fixed" à
do menu. Caso contrário a classe é removida.
CODE HERE! :3


  • foi criada uma instrução jquery para que, no menu de contactos, as imagens tenham feedback ao passar o rato
CODE HERE! :3


  • foi criada uma instrução jquery para que, no menu de contactos, o endereço de e-mail apareça quando se passa por cima da imagem de carta de correio
CODE HERE! :3


  • FancyZoom (imagens do portfolio)
CODE HERE! :3


  • setas do teclado (imagens do portfolio)
CODE HERE! :3


  • validação de formulários (contactos)
CODE HERE! :3



Integração com outras tecnologias (frameworks, linguagens, etc.)



Soluções técnicas para problemas encontrados



Melhoramentos futuros



Conclusões

Concluído o trabalho, consigo aperceber-me de que aprendi/exercitei imensas coisas na área



Referências Web

ZooTool
FancyBox



Anexos


Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox