60289 Relatório
From Labmm2
(Difference between revisions)
| Line 1: | Line 1: | ||
__TOC__ | __TOC__ | ||
| - | = Apresentação e | + | = Apresentação e contextualização do tema do projecto = |
[[File:Screen shot 2011-07-11 at 5.29.50 PM.png|right]] | [[File:Screen shot 2011-07-11 at 5.29.50 PM.png|right]] | ||
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.<br> | 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.<br> | ||
| Line 9: | Line 9: | ||
= Layouts = | = Layouts = | ||
| - | [[File:LunAbout.png| | + | [[File:LunAbout.png|400px|center|about me]]<center>'''about me''' page</center><br> |
| - | <center>'' | + | [[File:LunPhotos.png|400px|center|photos]]<center>'''photos''' page</center><br> |
| + | [[File:LunDrawings.png|400px|center|drawings]]<center>'''drawings''' page</center><br> | ||
| + | [[File:Paintings.png|400px|center|paintings]]<center>'''paintings''' page</center><br> | ||
| + | [[File:Design.png|400px|center|design]]<center>'''design''' page</center><br> | ||
| + | [[File:Webdesign.png|400px|center|web design]]<center>'''web design''' page</center><br> | ||
| + | [[File:Videos.png|400px|center|videos]]<center>'''videos''' page</center><br> | ||
| + | [[File:Contact.png|400px|center|contact me]]<center>'''contact''' page</center><br> | ||
<br><br> | <br><br> | ||
| - | + | = ''XHTML'' - estrutura implementada = | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | = ''XHTML'' - | + | |
* iframe para embeber um vídeo<br> | * iframe para embeber um vídeo<br> | ||
| Line 84: | Line 60: | ||
<br><br> | <br><br> | ||
| - | = ''JavaScript'' - | + | = ''JavaScript'' - principais scripts desenvolvidas = |
== JavaScript puro == | == JavaScript puro == | ||
| Line 151: | Line 127: | ||
<br><br> | <br><br> | ||
= Melhoramentos futuros = | = Melhoramentos futuros = | ||
| + | |||
<br><br> | <br><br> | ||
= Conclusões = | = Conclusões = | ||
| + | Concluído o trabalho, consigo aperceber-me de que aprendi/exercitei imensas coisas na área | ||
<br><br> | <br><br> | ||
| - | = Referências | + | = Referências bibliográficas = |
<br><br> | <br><br> | ||
Revision as of 18:03, 11 July 2011
Apresentação e contextualização do tema do projecto
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
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
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 bibliográficas
