60289 Relatório
From Labmm2
(Difference between revisions)
(→Layouts) |
|||
| Line 45: | Line 45: | ||
= ''XHTML'' - Estrutura Implementada = | = ''XHTML'' - Estrutura Implementada = | ||
| - | * iframe para embeber um vídeo | + | * iframe para embeber um vídeo<br> |
| - | * target para abrir vídeos numa nova janela do browser | + | <pre> |
| - | * são utilizados IDs e Classes, conforme apropriado | + | CODE HERE! :3 |
| - | + | </pre> | |
| + | <br> | ||
| + | * target para abrir vídeos numa nova janela do browser<br> | ||
| + | <pre> | ||
| + | CODE HERE! :3 | ||
| + | </pre> | ||
| + | <br> | ||
| + | * são utilizados IDs e Classes, conforme apropriado<br> | ||
| + | <pre> | ||
| + | CODE HERE! :3 | ||
| + | </pre> | ||
<br><br> | <br><br> | ||
= ''CSS'' - Folhas de Estilos = | = ''CSS'' - Folhas de Estilos = | ||
| - | * atributos avançados CSS3 (ex: box-shadow, transform) | + | * atributos avançados CSS3 (ex: box-shadow, transform)<br> |
| - | * são utilizadas heranças de classes para referenciar elementos, por forma a simplificar o código (ex: #submenu .button) | + | <pre> |
| - | * são utilizados filtros em identificadores de elementos (ex: input[type=text]) | + | CODE HERE! :3 |
| - | * são utilizadas fontes externas (com @font-face) | + | </pre> |
| + | <br> | ||
| + | * são utilizadas heranças de classes para referenciar elementos, por forma a simplificar o código (ex: #submenu .button)<br> | ||
| + | <pre> | ||
| + | CODE HERE! :3 | ||
| + | </pre> | ||
| + | <br> | ||
| + | * são utilizados filtros em identificadores de elementos (ex: input[type=text])<br> | ||
| + | <pre> | ||
| + | CODE HERE! :3 | ||
| + | </pre> | ||
| + | <br> | ||
| + | * são utilizadas fontes externas (com @font-face)<br> | ||
| + | <pre> | ||
| + | CODE HERE! :3 | ||
| + | </pre> | ||
| + | <br> | ||
<br><br> | <br><br> | ||
| Line 62: | Line 88: | ||
== JavaScript puro == | == JavaScript puro == | ||
| - | * onMouseOver (feedback das imagens do portfolio) | + | * onMouseOver (feedback das imagens do portfolio)<br> |
| - | * onMouseOut (feedback das imagens do portfolio) | + | <pre> |
| - | * onLoad (utilizado no <body> para a funçaõ de preload seja chamada) | + | CODE HERE! :3 |
| + | </pre> | ||
| + | <br> | ||
| + | * onMouseOut (feedback das imagens do portfolio)<br> | ||
| + | <pre> | ||
| + | CODE HERE! :3 | ||
| + | </pre> | ||
| + | <br> | ||
| + | * onLoad (utilizado no <body> para a funçaõ de preload seja chamada)<br> | ||
| + | <pre> | ||
| + | CODE HERE! :3 | ||
| + | </pre> | ||
| + | <br> | ||
<br> | <br> | ||
| Line 70: | Line 108: | ||
* função de preload de imagens | * 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. | + | 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.<br> |
| + | <pre> | ||
| + | CODE HERE! :3 | ||
| + | </pre> | ||
| + | <br> | ||
* função que mantém o menu sempre visível, mesmo quando é feito scroll vertical | * 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" à <div> do menu. Caso contrário a classe é removida. | + | . 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" à <div> do menu. Caso contrário a classe é removida.<br> |
| - | * foi criada uma instrução jquery para que, no menu de contactos, as imagens tenham feedback ao passar o rato | + | <pre> |
| - | * 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) | + | </pre> |
| - | * setas do teclado (imagens do portfolio) | + | <br> |
| - | * validação de formulários (contactos) | + | * foi criada uma instrução jquery para que, no menu de contactos, as imagens tenham feedback ao passar o rato<br> |
| - | + | <pre> | |
| + | CODE HERE! :3 | ||
| + | </pre> | ||
| + | <br> | ||
| + | * 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<br> | ||
| + | <pre> | ||
| + | CODE HERE! :3 | ||
| + | </pre> | ||
| + | <br> | ||
| + | * FancyZoom (imagens do portfolio)<br> | ||
| + | <pre> | ||
| + | CODE HERE! :3 | ||
| + | </pre> | ||
| + | <br> | ||
| + | * setas do teclado (imagens do portfolio)<br> | ||
| + | <pre> | ||
| + | CODE HERE! :3 | ||
| + | </pre> | ||
| + | <br> | ||
| + | * validação de formulários (contactos)<br> | ||
| + | <pre> | ||
| + | CODE HERE! :3 | ||
| + | </pre> | ||
<br><br> | <br><br> | ||
=Integração com outras tecnologias (frameworks, linguagens, etc.) = | =Integração com outras tecnologias (frameworks, linguagens, etc.) = | ||
Revision as of 17:21, 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
Referências Bibliográficas
