From Labmm2

Latest revision as of 02:40, 22 June 2011

Distribuição de tarefas

O grupo decidiu que, visto o projecto ser constituído por cinco páginas principais, cada um dos elementos ficaria encarregue de tratar da realização de uma página bem como do respectivo relatório. Posto isto, a distribuição de tarefas fez-se da seguinte forma:

Estrutura geral do site- Raquel Dias
História - Raquel Dias
Materiais - Sandrine Pinto
Graffiters - Adriana Mendes
Gíria - Lara Morgado
Comentar - Alexandra Tavares

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

Graffiti é o nome dado às inscrições feitas em paredes que podem ser inscrições caligrafadas, um desenho pintado ou gravado sobre um suporte que não é normalmente previsto para esta finalidade. Hoje o Graffiti é considerado uma forma de expressão incluída no âmbito das artes visuais, mais especificamente, da arte urbana onde o artista aproveita os espaços públicos, para criar uma linguagem que intervém na cidade. Apresentar o Graffiti como uma forma de arte urbana. Educar e informar sobre o tema é o nosso principal objectivo num ambiente de entretinimento e interactividade. De modo a despertar a criatividade do utilizador, temos ainda uma pequena aplicação, onde o mesmo poderá criar o seu próprio Graffiti.

Layouts

O nosso ambiente gráfico consiste no intercalar de 4 metáforas: a metáfora rua/cidade, a metáfora placa de direcções/menu, latas de spray/aplicação interactiva e rádio de rua/sons da aplicação. Um de imagem com efeito cartonizado de forma a apelar ao estilo que é o Graffiti.

Estrutura Geral do Site

Na estrutura base foi usado o sistema de div’s:

id: geral - contem todas as div’s onde se distinguem 4 zonas principais:
id: header - que contem duas div’s para as respectivas imagens. Esta foi a solução que achamos por bem aplicar pois assim temos um maior controlo através de css do posicionamento de cada imagem. Além disso antes de optarmos pela utilização destas div’s estávamos com um problema de visualização, pois a estrutura alterava-se de browser para browser.
id: central – que contem duas áreas distintas:
id: menu (elemento comum a todas as páginas) que contem todos os separadores e o rádio. Ao fazermos o over com a passagem do rato realiza uma pequena animação nas setas (mudam de cor) implementada através de javascript com a função “mudaplaca”– esta função leva como parâmetro uma string de forma a identificarmos qual a imagem que irá ser alterada relativamente ao movimento do rato, se o movimento for over irá mostrar uma imagem se for out irá mostrar outra dependendo do valor da string da função “mudaplaca”.
Por exemplo HTML placa da história:

<div id="placahistoria">
                	<img id="ph" src="images/historia.png" width="106" height="33" onmouseover="mudaplaca('historia');" onmouseout="mudaplaca('historia_over');" onclick="window.location.href='historia.html'"/>
</div>

Por exemplo JavaScript placa da história:

function mudaplaca(placa){
	switch(placa)
	{
		case 'historia':
						document.getElementById("ph").src="images/historia_over.png";
						break;

O rádio através do click sobre a imagem irá parar/ligar o som, através de javascript com a função on/off que verifica se a div com o “objecto (música)” ou não.
Rádio HTML

<img id="radio" src="images/radio.png" width="150" height="100" onclick="onoff('Muse.mp3');" title="Som Off"/>
Rádio  JavaScript 
function onoff(musica){
	if(document.getElementById("music").innerHTML=="")
	{
		//coloca o radio a funcionar e coloca o titulo na imagem do radio Som off
		document.getElementById("music").innerHTML="<embed width='0' height='0' src='music/"+musica+"'>";
		document.getElementById("radio").title="Som Off";	
		}else{
					//desliga o radio e coloca o titulo na imagem do radio Som On
		document.getElementById("music").innerHTML="";
		document.getElementById("radio").title="Som On";
	}
}

Para inserir a música criamos uma div (id: music) para incluir este objecto demos as dimensões (0,0) de maneira a que este não seja visualizado pelo utilizador.
HTML

<div id="music">
    	<embed width="0" height="0" src="music/Muse.mp3">
    </div>

id: conteúdo é aqui que colocamos a informação correspondente a cada separador, ou seja, varia de página para página.
id: footer - contem apenas a imagem do chão.
id: créditos – contem duas div’s: • c1: Referencia à Universidade e ao curso / direitos de autor / redes sociais e mail

Graffiters

Estrutura XHTML implementada

Neste separador temos informação sobre a história do Graffiti bem como a possibilidade de assistir a um vídeo sobre a história desta arte.
Devido a estrutura da página e como foi explicado anteriormente dentro da div conteúdo era necessário criar 3 div´s, uma para o texto, outra para a visualização do vídeo e por fim uma auxiliar que passarei a explicar:
id: texto – contem texto sobre a história dos graffitis.

Os ícones dos diversos materiais encontram-se todos dentro de uma div, chamada “materiais”. No ícone das caps, em particular, criou-se uma div para cada imagem das diferentes caps existentes. Por último, foi criado uma última div para o texto.

Este separador do nosso site permite ao utilizador visualizar, através de fotografias, trabalhos de alguns graffiters mais talentosos e interessantes. Incialmente a nossa ideia era implementar a galeria que abaixo se apresenta:

Ao clicar na imagem desejada, dava-se a Shadow Bridge em que o fundo escurecia e a imagem era aumentada. No entanto a conjugação destas duas acções (a galeria de fotografias em carrossel e a shadow bridge) era de facto muito avançada. Optamos também por criar uma página de transição, isto é, antes que o utilizador possa ver os trabalhos de alguns artistas, tem a possibilidade de através de miniaturas de imagem, escolher o autor que deseja ver.
Decidimos utilizar um software que gera uma galeria em jQuery. Assim, foi possível, através da adição no html da página dos ficheiros externos criados por este software.

<script src="JS/onthewall.js"></script>

<script type='text/javascript' src='JS/swfobject.js'></script>
<link rel="stylesheet" href="images/artista6/engine/css/vlightbox1.css" type="text/css" />
		<link rel="stylesheet" href="images/artista6/engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="images/artista6/engine/js/jquery.min.js" type="text/javascript"></script>
		<script src="images/artista6/engine/js/visuallightbox.js" type="text/javascript"></script>
		<script src="images/artista6/engine/js/vlbdata.js" type="text/javascript"></script>

Aqui foi necessário implementar na div conteúdo a div criada pelo software:

<div id="vlightbox1">
	<a class="vlightbox1" href="images/artista6/data/images1/arte1.jpg" title="arte1"><img src="images/artista6/data/thumbnails1/arte1.jpg" alt="arte1"/></a>
<a class="vlightbox1" href="images/artista6/data/images1/arte2.jpg" title="arte2"><img src="images/artista6/data/thumbnails1/arte2.jpg" alt="arte2"/></a>
<a class="vlightbox1" href="images/artista6/data/images1/arte3.jpg" title="arte3"><img src="images/artista6/data/thumbnails1/arte3.jpg" alt="arte3"/></a>
<a class="vlightbox1" href="images/artista6/data/images1/arte4.jpg" title="arte4"><img src="images/artista6/data/thumbnails1/arte4.jpg" alt="arte4"/></a>
<a class="vlightbox1" href="images/artista6/data/images1/arte5.jpg" title="arte5"><img src="images/artista6/data/thumbnails1/arte5.jpg" alt="arte5"/></a>
<a class="vlightbox1" href="images/artista6/data/images1/arte6.jpg" title="arte6"><img src="images/artista6/data/thumbnails1/arte6.jpg" alt="arte6"/></a>
<a class="vlightbox1" href="images/artista6/data/images1/arte7.jpg" title="arte7"><img src="images/artista6/data/thumbnails1/arte7.jpg" alt="arte7"/></a>
<a class="vlightbox1" href="images/artista6/data/images1/arte8.jpg" title="arte8"><img src="images/artista6/data/thumbnails1/arte8.jpg" alt="arte8"/></a>
<a class="vlightbox1" href="images/artista6/data/images1/arte9.jpg" title="arte9"><img src="images/artista6/data/thumbnails1/arte9.jpg" alt="arte9"/></a>
<a class="vlightbox1" href="images/artista6/data/images1/arte10.jpg" title="arte10"><img src="images/artista6/data/thumbnails1/arte10.jpg" alt="arte10"/></a>
<a class="vlb" style="display:none" href="http://visuallightbox.com">jQuery Thumbnails by VisualLightBox.com v4.8</a>
	</div>

Todo o conteúdo desta página tem uma base comum a todas as outras. As alterações feitas foram apenas realizadas na div “conteúdo”. Foram implementadas divs para cada palavra (imagens), portanto cada palavra/conceito tem uma div associada, assim como, o texto das definições tem outra div.

Esta página tem todo o seu código base comum e interligado com todas as outras. O código implementado foi escrito na div conteúdo. Para a realização do formulário foi construída uma tabela com uma linha e uma coluna. Foram utilizadas 2 textfields, uma para inserir nome e outra para inserir comentários. Para finalizar foram criados 2 botões, um de enviar e outro de limpar.

Folhas de estilos (CSS)

O código abaixo apresentado teve com objectivo a implementação de um tipo de letra no id:texto, diferente dos que estão presentes no DreamWeaver:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Waiting for the Sunrise">
<style>
     #texto{
        font-family: 'Waiting for the Sunrise', serif;
        font-size:16px;
		font-weight:bold;	
}
</style>

O Css desta galeria foi gerado automaticamente pelo software VisualLightBox através dos ficheiros

<link rel="stylesheet" href="images/artista6/engine/css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="images/artista6/engine/css/visuallightbox.css" type="text/css" media="screen" />

O primeiro css está relacionada com a formatação da Shadow Bridge:

#vlightbox1 {
	width:621px;
	zoom:1;	
}
#vlightbox1 .vlightbox1 {
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
	position:relative;
	vertical-align:top;
	margin:5px;
	width:100px;
	font-family:Trebuchet,Tahoma,Arial,sans-serif;
	font-size:11px;
	font-weight:normal;
	text-decoration:none;
	text-align:center;
	opacity:0.87;
}
#vlightbox1 .vlightbox1 a{
	margin:0;
}
#vlightbox1 .vlightbox1:hover, #vlightbox1 .vlightbox1 a:hover{
	text-decoration:underline;
	opacity:1;
}
#vlightbox1 .vlightbox1 img{
	display:block;
	border:none;
	margin:0;
}
#vlightbox1 .vlightbox1 div {display:none}

A segunda folha de estilos relaciona-se com as miniaturas apresentadas na galeria:

#overlay{
	position:absolute;
	top:0;
	left:0;
	z-index:90;
	width:100%;
	height:auto;
	background-color:#bfbfbf;
}

#lightbox{
	position:absolute;
	top:20px;
	left:0;
	width:100%;
	z-index:100;
	text-align:center;
	color:#151410;
	line-height:0;
}

#lightbox a, #lightbox a:hover {
	border-bottom:none;
	color:#151410;
	text-decoration:underline;
}

#lightbox a img{ border:none; }

#outerImageContainer{
	width:auto;
	height:auto; /* without this line error in IE8 detected */
	margin:0 auto;
	position:relative;
}

#lightboxImage{
	width:100%;
	height:100%;
}

#imageContainerMain{
	margin:0 auto;
	overflow:visible;
	position:relative;
	font-size:0;/* ie fix - big info bar*/
}

#imageContainer{
	width:150px;
	height:30px;
	margin:0 auto;
	overflow:hidden;
	background-color:#fff;
	position:relative;
	font-size:0;/* ie fix - big info bar*/
}

#loading{
	position:absolute;
	top:40%;
	left:0%;
	height:25%;
	width:100%;
	text-align:center;
	font-size:10px;
	z-index:1;
}
#loadingLink {
	display:block;
	margin:0 auto;
	padding:0;
	width:150px;
	height:29px;
	background:url(../images/loading.gif) center center no-repeat;
	text-indent:-9999px;
}
#hoverNav{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:10;
}
#imageContainer>#hoverNav{ left:0;}
#prevLinkImg, #nextLinkImg{
	top:0;
	width:48px;
	height:100%;
	position:absolute;
	z-index:20;
	outline-style:none;
	display:block;
	text-indent:-9999px;
	}
* html #prevLinkImg,* html #nextLinkImg{
	background-image:url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
}
#prevLinkImg { left: -48px; }
#nextLinkImg { right: -48px; }
#prevLinkImg:hover,#prevLinkImg.hover, #prevLinkImg:visited:hover { 
	background:url(../images/prev.png) 5% center no-repeat; 
}
#nextLinkImg:hover,#nextLinkImg.hover, #nextLinkImg:visited:hover { 
	background:url(../images/next.png) 97% center no-repeat; 
}

#imageDataContainer{
	width: auto;
	position: relative;
	left: 0;
	bottom: 48px;	
	opacity: .6;
}

#imageData{
	font: 12px Tahoma,Arial,Helvetica;
	padding: 12px;
	color: #ffffff;
	background-color: #000000;
	overflow:visible;
	left: 10px;
	position: absolute;
	border-radius: 8px 8px 8px 8px;
	background-color:#000000;
	text-align:center;
	_bottom:0;
	_left: 0;	
}
#imageDetails{ width:100%; float:left; 	padding:0;}
#caption{ display:block;text-align:left; }
#numberDisplay{ display:none;text-align:right;}
#detailsNav{display:none;}
#prevLinkDetails, #nextLinkDetails, #slideShowControl{display:none;}

#slideShowControl.started{
	background-image:url($rel#conposit.png$);
	background-position:0 center;
}

#slideShowControl{
	display:block;
	width:42px; 
	height:49px; 
	float:left;
	background-image:url($rel#conposit.png$);
	background-position:-42px center;
	background-repeat:no-repeat;
	}

#close{
	position:relative;
	width:100%;
	height:0;
	z-index:21;	
}
#closeLink {
	position:absolute;
	top:-20px;
	right:2px;
	display:block;
	outline-style:none;
	margin:0;
	padding:0;
	text-decoration:none;
	width:80px;
	height:80px;
	background:url(../images/close.png) no-repeat;	
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/close.png', sizingMethod='scale');
}

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html>body .clearfix {display:inline-block; width:100%;}

* html .clearfix {
	/* Hides from IE-mac \*/
	height:1%;
	/* End hide from IE-mac */
}	

#outerImageFrame{
	border:none;
	height:100%;
	width:100%;
	position:absolute;
}

#outerImageContainer{
	overflow:visible;
}
#outerImageContainer td{
	text-align:center;
	padding:0;
}

#lightboxFrameBody{
	background-color:#767676;
}

#outerImageContainer td, #outerImageContainer tr{
	font-size:0;
	border:0 none;
}

#outerImageContainer td.tl, #outerImageContainer td.br{
	height:40px;
	width:40px;
}

#outerImageContainer td.tl{
	background:url(../images/back_corvers.png) 0 0;
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/back_lt.png', sizingMethod='scale');
}
#outerImageContainer td.tc{
	background:url(../images/back_tb.png) 50% 0;
	_background:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/back_ct.png', sizingMethod='scale');
}
#outerImageContainer td.tr{
	background:url(../images/back_corvers.png) 100% 0;
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/back_rt.png', sizingMethod='scale');
}
#outerImageContainer td.ml{
	background:url(../images/back_lr.png) 0 50%;
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/back_lc.png', sizingMethod='scale');
}
#outerImageContainer td.mr{
	background:url(../images/back_lr.png) 100% 50%;
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/back_rc.png', sizingMethod='scale');
}
#outerImageContainer td.bl{
	background:url(../images/back_corvers.png) 0 100%;
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/back_lb.png', sizingMethod='scale');
}
#outerImageContainer td.bc{
	background:url(../images/back_tb.png) 50% 100%;
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/back_cb.png', sizingMethod='scale');
}
#outerImageContainer td.br{
	background:url(../images/back_corvers.png) 100% 100%;
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine/images/back_rb.png', sizingMethod='scale');
}

Em CSS foi feita toda a formatação da página, utilizando posicionamentos, margens, altura, largura e um float das imagens de forma a obter o aspecto pretendido. Para cada imagem foi criado e formatado um id.

Em css controlou-se posicionamento, altura, largura margem, alinhamento e formatação dos conteúdos. Aqui foi formatada as caixas de texto e os botoes com imagens de fundo de forma a dar o aspecto pretendido.

Para que os ícones ficassem no sítio desejado, utilizou-se o position e margin, não esquecendo do float para que estas ficassem todas na horizontal. Para cada imagem das caps foi criado e formatado um id.

Principais scripts desenvolvidas (JavaScript)

A implementação do vídeo foi feita através de um player “jwplayer” para poder visualizar o vídeo, para tal criamos uma div com id: vídeo. Dentro desta criamos um objecto desse mesmo player para reproduzir o vídeo que está associado a um ficheiro externo (swfobject.js).

HTML (declaração do objecto para visualização do vídeo)

<div id="video">
                    <script type='text/javascript'>
						var s1 = new SWFObject('player.swf','player','350','250','9'); 
						s1.addParam('allowfullscreen','true'); 
						s1.addParam('allowscriptaccess','always'); 
						s1.addParam('flashvars','file=videos/bbb.flv');
						s1.write('video');
                    </script>
                </div>

Para além dos vários ficheiros de javascript criados automaticamente, foi criado um ficheiro para que ao fazer rollover nas miniaturas correspondentes a cada artista se desse uma alteração na imagem:

function mudaautor(autor){
	switch(autor)
	{
		case 'miniatura1':
					document.getElementById("miniatura1").src="images/miniatura1_over.png";
					break;
		case 'miniatura2':
					document.getElementById("miniatura2").src="images/miniatura2_over.png";
					break;
		case 'miniatura3':
					document.getElementById("miniatura3").src="images/miniatura3_over.png";
					break;
		case 'miniatura4':
					document.getElementById("miniatura4").src="images/miniatura4_over.png";
					break;
		case 'miniatura5':
					document.getElementById("miniatura5").src="images/miniatura5_over.png";
					break;
		case 'miniatura6':
					document.getElementById("miniatura6").src="images/miniatura6_over.png";
					break;
		case 'miniatura1_over':
					document.getElementById("miniatura1").src="images/miniatura1.png";
					break;
		case 'miniatura2_over':
					document.getElementById("miniatura2").src="images/miniatura2.png";
					break;
		case 'miniatura3_over':
					document.getElementById("miniatura3").src="images/miniatura3.png";
					break;
		case 'miniatura4_over':
					document.getElementById("miniatura4").src="images/miniatura4.png";
					break;
		case 'miniatura5_over':
					document.getElementById("miniatura5").src="images/miniatura5.png";
					break;
		case 'miniatura6_over':
					document.getElementById("miniatura6").src="images/miniatura6.png";
					break;
	}
}

Em java scipt foi criada uma função para cada palavra/imagem, de forma a conseguir onclick para a passagem do aspecto normal da palavra para o aspecto seleccionado assim como o surgimento da definição de cada conceito. Foi ainda criada uma função clean que permite que ao clicar numa palavra as outras voltem ao aspecto base bem como a saída da sua respectiva definição.

Em java scipt foi criada uma função para cada ícone, de forma a conseguir onclick a definição de cada material. Foi ainda criada uma função limpartexto para que as imagens das diferentes caps desapareçam quando o utilizador clicar noutro ícone.

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

- Para além do DreamWeaver utilizamos também o Photoshop para a edição de imagens e o Premiere para edição do vídeo. - VisualLightBox software foi usado para a implementação da galeria de fotografias.

Soluções técnicas para problemas encontrados

Página Gíria

Inicialmente pensou-se implementar uma tabela para dispor os conceitos, visto que não se obteve resultado foi pensado criar as várias div de forma a controlar o posicionamento de cada palavra e como esta solução foi bem conseguida todo o processo foi desenvolvido a partir deste recurso.

Página Materiais

Encontrou-se alguns problemas no alinhamento das diferentes caps existentes no ícone deste material. Após alguma pesquisa chegou-se à conclusão de que estas tinham que ser formatadas em css através de ids para todas as caps. Após isto criou-se uma função para cada cap para que estas aparecessem onclick.

Melhoramentos futuros

Página Gíria

Talvez de futuro deva ser feita uma animação onmouseover criando assim outra dinâmica. E outros aspectos também podem ser melhorados como a sonorização de cada palavra ao clic e o tipo de letra.

Página Comentários

Inicialmente pensou-se que seria possível visualizar comentários já feitos mas isso não foi implementado, portanto será um aspecto a melhorar.

Página Materiais

Inicialmente pensou-se que seria possível a implementação de um vídeo com a explicação de diversas técnicas utilizadas pelos graffiters, como não foi implementado, poderá ser um aspecto a melhorar nesta página.

Conclusões

Página Gíria, Comentários e Materiais

O objectivo principal foi conseguido e as páginas estão funcionais, no entanto podia estar melhor mas o resultado está bem conseguido!

Referências bibliográficas

-PDF’s fornecidos e exercícios realizados nas aulas.

http://www.graffiti.org/187/
http://www.graffiticreator.net/
http://www.graffiti.org/faq/elementos_br.html
http://www.mrdheo.com/
http://www.graffiti.org/
http://belin.es/graffiti/
http://www.montana-cans.com/news/
http://www.webmaster.pt/sliders-jquery-8747.html

abrir janela através do evento onclick

http://www.techimo.com/forum/webmastering-programming/43937-html-onclick-link-into-new-window.html

para fazer a scroll http://forum.wmonline.com.br/topic/74557-posicao-coordenadas-xy-do-mouse-no-navegador/

para reproduzir videos http://www.w3schools.com/media/media_browservideos.asp

para reproduzir audios http://www.w3schools.com/media/media_browsersounds.asp

download player video http://www.longtailvideo.com/players/jw-flv-player/

tuturial de colocar video http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12538/supported-player-embed-methods

para implementar a galeria de fotos http://lightbox2.com/thickbox-prototype.html

para aplicar uma tipografia diferente http://www.google.com/webfonts

Anexos