From Labmm2

Revision as of 15:49, 11 July 2011 (view source) MarianaPulido (Talk | contribs) (Created page with "= Apresentação e Contextualização do Tema do Projecto = <br><br> = Layouts = <br><br> = ''XHTML'' - Estrutura Implementada = * iframe para embeber um vídeo * target para ...") ← Older edit		Revision as of 16:55, 11 July 2011 (view source) MarianaPulido (Talk | contribs) Newer edit →
Line 1:		Line 1:
		+	__TOC__
		+
	= Apresentação e Contextualização do Tema do Projecto =		= Apresentação e Contextualização do Tema do Projecto =
		+	[[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>
-	<br><br>	+
		+	<br><br><br><br><br><br><br><br><br><br>
	= Layouts =		= Layouts =
		+
		+	[[File:LunAbout.png|600px|center]]
	<br><br>		<br><br>
Line 15:		Line 22:
	* atributos avançados CSS3 (ex: box-shadow, transform)		* atributos avançados CSS3 (ex: box-shadow, transform)
-	* São utilizadas heranças de classes para referenciar elementos, por forma a simplificar o código (ex: #submenu .button)	+	* são utilizadas heranças de classes para referenciar elementos, por forma a simplificar o código (ex: #submenu .button)
-	* São utilizados filtros em identificadores de elementos (ex: input[type=text])	+	* são utilizados filtros em identificadores de elementos (ex: input[type=text])
-	* São utilizadas fontes externas (com @font-face)	+	* são utilizadas fontes externas (com @font-face)
	<br><br>		<br><br>
Line 35:		Line 42:
	* 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.
-	* Foi criada uma instrução jquery para que, no menu de contactos, as imagens tenham feedback ao passar o rato	+	* foi criada uma instrução jquery para que, no menu de contactos, as imagens tenham feedback ao passar o rato
-	* 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	+	* 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
	* FancyZoom (imagens do portfolio)		* FancyZoom (imagens do portfolio)
	* setas do teclado (imagens do portfolio)		* setas do teclado (imagens do portfolio)

---

Revision as of 16:55, 11 July 2011

Contents 1 Apresentação e Contextualização do Tema do Projecto 2 Layouts 3 XHTML - Estrutura Implementada 4 CSS - Folhas de Estilos 5 JavaScript - Principais Scripts Desenvolvidas 5.1 JavaScript puro 5.2 JQuery 6 Integração com outras tecnologias (frameworks, linguagens, etc.) 7 Soluções técnicas para problemas encontrados 8 Melhoramentos futuros 9 Conclusões 10 Referências Bibliográficas 11 Anexos

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
• target para abrir vídeos numa nova janela do browser
• são utilizados IDs e Classes, conforme apropriado

CSS - Folhas de Estilos

• atributos avançados CSS3 (ex: box-shadow, transform)
• são utilizadas heranças de classes para referenciar elementos, por forma a simplificar o código (ex: #submenu .button)
• são utilizados filtros em identificadores de elementos (ex: input[type=text])
• são utilizadas fontes externas (com @font-face)

JavaScript - Principais Scripts Desenvolvidas

JavaScript puro

• onMouseOver (feedback das imagens do portfolio)
• onMouseOut (feedback das imagens do portfolio)
• onLoad (utilizado no <body> para a funçaõ de preload seja chamada)

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.

• 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" à