OnTheWall
From Labmm2
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
.png)
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
Página Materiais
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>
Página Gíria
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.
Página Comentários
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 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');
}
Página Gíria
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.
Página Comentários
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.
Página Materiais
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)
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;
}
}
Página Gíria
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.
Página Materiais
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
Página Gíria, Comentários e Materiais
PDF’s fornecidos e exercícios realizados nas aulas.
