Portfoliuz
From Labmm2
Constituição do grupo para melhoria de projecto:
.Tiago João 49331
.Vítor Gonçalves 61633
Apresentação e contextualização do tema do projecto
Como tema para projecto final da disciplina de laboratório multimedia, foi-nos proposta a realização de um site, com informação à nossa escolha. Partindo desta premissa, resolvemos criar algo que nos pudesse ser útil, mesmo fora de um ambiente académico, dessa forma resolvemos criar um portfólio on-line, onde estariam expostos os trabalhos realizados pelos elementos do grupo. Esses trabalhos foram realizados no âmbito da licenciatura em Novas Tecnologias da Comunicação, bem com o fora desta.
Público alvo
Como público alvo primário, que venha a utilizar o nosso site, aparecem todas as pessoas que estejam na mesma área profissional que nós, ou que de certa forma partilhem os mesmo gostos que nós. Como público alvo secundário aparecem as entidades empregadoras, que ao consultar o site, caso verifiquem interesse em algum trabalho, podem posteriormente entrar em contacto com a pessoa em causa. No que a fachas etárias diz respeito este é um site que está disponível para todas as idades, pois basta partilharem dos mesmo gostos que nós para terem interesse no site, não interessando para isso a sua idade.
Logotipo
Fluxograma da aplicação
Este é o fluxograma da nossa aplicação. Ao entrar-se no site será mostrada uma pequena animação, que serve de introdução ao mesmo . Ao entrar-se na home page, o utilizador poderá escolher qual a informação a consultar, sendo que existem duas opções, a opção de artistas, onde estarão informações sobre os criadores dos trabalhos, e a opção categoria, onde vão estar expostos os trabalhos realizados, organizados por áreas de conteúdos, como a exemplo música, imagem. Em todos os sub-menus, existirá a possibilidade de regressar à home page.
Limites e características da aplicação
O acesso ao site bem como o acesso aos seus conteúdos será livre, todos os utilizadores poderão aceder a este e visualizar todos os conteúdos, sem que exista a necessidade de se registar. No entanto, numa próxima fase deste projecto, esses utilizadores poderão criar uma conta no site, e dessa forma poderão também eles expor todos os seus trabalhos no "Portfoliuz". Tornando assim o nosso portfolio pessoal, num portfolio conjunto, a todos os utilizadores do site. Nessa próxima fase, temos em vista o desenvolvimento de uma nova rede social, onde cada utilizador pode expôr trabalhos realizados tanto a nivel académico, pessoal, ou até mesmo profissional. Os utilizadores serão assim convidados a criar uma conta de registo no site, que serão geridas a partir de base de dados (php), conhecimentos esses que adquiremos na cadeira de laboratório multimédia 4.
Layouts
 Introdução ao site. Aqui aparece uma pequena animação, que serve de introdução ao site. |
 Home page do site. Aqui o utilizador poderá escolher qual os conteúdos a consultar. Poderá ainda pesquisar conteúdos por artista, utilizando para isso a opção search. |
 Páginas dos artistas. Aqui o utilizador poderá escolher qual o artista a consultar. |
 Página de perfil do artista. |
 Páginas das categorias. Aqui o utilizador poderá escolher qual a categoria a visitar, estando disponível áreas tão distintas como, o vídeo, fotografia, musica e imagem vectorial. |
 Página de visualização de conteúdos. Aqui aparece a visualização de uma curta metragem. |
 Página do formulário. nesta página os utilizadores poderão entrar em contacto com os criadores do site. |
Estrutura XHTML implementada
.Exemplo de código HTML utilizado:
<body>
<div id="botao_home">
<img src="imgs/btn_home.png" width="50" height="75" onClick="location='home.html'" onmouseover="src='imgs/btn_home-over.png'"
onmouseout="src='imgs/btn_home.png'"/><img src="imgs/btn_contact.png" width="50" height="75" onClick="location='fale_conosco.html'" onmouseover="src='imgs/btn_contact-over.png'"
onmouseout="src='imgs/btn_contact.png'"/><img src="imgs/btn_donate.png" width="50" height="75" onClick="location='fale_conosco.html'" onmouseover="src='imgs/btn_donate-over.png'"
onmouseout="src='imgs/btn_donate.png'"/></div>
<table>
<tr>
<td align="left" colspan="3"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="520" height="100" id="FINAL" align="middle" onClick="location='home.html'">
<param name="movie" value="FINAL.swf" />
<param name="quality" value="best" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="files/FINAL.swf" width="520" height="100">
<param name="movie" value="FINAL.swf" />
<param name="quality" value="best" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object><br /><br /></td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td><img class="resize" src="imgs/avatar_nome/1binie.png" onMouseOver="this.src='imgs/avatar_nome/01binie.png'" onMouseOut="this.src='imgs/avatar_nome/1binie.png'"
alt="binie_buton" onclick="location='a_binie.html'" /><br /><br /><br /><br /></td><td><img class="resize" src="imgs/avatar_nome/3Quim.png"
onMouseover="this.src='imgs/avatar_nome/03quim.png'" onMouseOut="this.src='imgs/avatar_nome/3Quim.png'" alt="quim_button" onclick="location='a_quim.html'" /><br /><br /><br />
<br/>
</td><td><img class="resize" src="imgs/avatar_nome/5trial.png" onMouseover="this.src='imgs/avatar_nome/05trial.png'" onMouseOut="this.src='imgs/avatar_nome/5trial.png'"
alt="trial_button" onclick="location='a_trial.html'" /><br /><br /><br /><br /></td>
</tr>
<tr>
<td><img class="resize" src="imgs/avatar_nome/2puto.png" onMouseover="this.src='imgs/avatar_nome/02puto.png'" onMouseOut="this.src='imgs/avatar_nome/2puto.png'"
alt="puto_button" onclick="location='a_ricardo.html'" /></td><td><img class="resize" src="imgs/avatar_nome/4silva.png" onMouseover="this.src='imgs/avatar_nome/04silva.png'"
onMouseOut="this.src='imgs/avatar_nome/4silva.png'" alt="silva_button" onclick="location='a_chillva.html'"/></td><td><img class="resize" src="imgs/avatar_nome/6vitor.png"
onMouseover="this.src='imgs/avatar_nome/06vitor.png'" onMouseOut="this.src='imgs/avatar_nome/6vitor.png'" alt="vitor_button" onclick="location='a_mateus.html'" /><br /></td>
</tr>
</table>
</body>
Folhas de estilos (CSS)
.Exemplo de estilos CSS utilizados:
body {
width:950px;
margin-left:auto;
margin-right:auto;
background-image:url(imgs/padrao_fundo.jpg);
background-position:center;
background-repeat:repeat-y;
font-family:"Coolvetica Rg", Verdana, sans-serif;
font-size:18px;
color:#0093af;
text-align:center;
padding:25px;}
@font-face {
font-family: 'CoolveticaRegular';
src: url('fonts/coolvetica/coolvetica_rg-webfont.eot');
src: url('fonts/coolvetica/coolvetica_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/coolvetica/coolvetica_rg-webfont.woff') format('woff'),
url('fonts/coolvetica/coolvetica_rg-webfont.ttf') format('truetype'),
url('fonts/coolvetica/coolvetica_rg-webfont.svg#CoolveticaRegular') format('svg');
font-weight: normal;
font-style: normal;}
#home {
text-align:center;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:600px;
width:70%;}
#botao_home {
text-align:right;
position:absolute;
top:0px;
position:fixed;
right:0;
padding-right:5px;}
table {
width:950px;
padding:5px;
text-align:center;}
#tabela_logo {
padding-bottom:50px;}
#td_artista_info {
text-align:left;}
#searchdiv {
border:0px solid #000;
text-align:center;
padding-left:0px;
}
.searchelmt {
display:none;
}
.searchelmtdis {
width:100px;
height:100px;
display: block;
margin-left: auto;
margin-right: auto;
}
h2 {
font-size:20px;}
a {
color:#0070ff;}
Principais scripts desenvolvidas (JavaScript)
.Scripts desenvolvidos em JavaScript
Barra Search:
<script>
function limparprocura(){
document.getElementById("binie").setAttribute("class","searchelmt");
document.getElementById("xavier").setAttribute("class","searchelmt");
document.getElementById("quim").setAttribute("class","searchelmt");
document.getElementById("mateus").setAttribute("class","searchelmt");
document.getElementById("trial").setAttribute("class","searchelmt");
document.getElementById("chillva").setAttribute("class","searchelmt");
}
function procura(id){
bar=document.getElementById(id); //x=getelementbyid(campotesto)
word=bar.value; //a=x.value
//x.value= o que o marmanjo escreveu
document.getElementById(word).setAttribute("class","searchelmtdis");
}
</script>
Soluções técnicas para problemas encontrados
.Reproduzir som:
Para colocar-mos as músicas a reproduzir foi necessário recorrer ao HTML5, utilizando o seguinte código:
<audio controls="controls" width="400px" src="files/Música/hoe u wont see me cry.mp3" >your browser does not support the audio tag</audio>
.Reproduzir video:
Para a reprodução de videos, ao invés de recorrer ao HTML5 e evitando ter o alojamento dos videos no servidor do site, utilizamos ligação directa para o youtube, de modo a tornar o site mais leve, rápido e eficaz. Para tal utilizamos o seguinte código:
<a class="video" href="http://www.youtube.com/watch?v=q7mHl0BvYt8"><img src="imgs/preview_four-of-a-kind.png" height="208" />
Melhoramentos futuros
Num futuro próximo temos já pensadas algumas alterações ao site, nomeadamente a possibilidade de os utilizadores criarem uma conta, e dessa forma, também poderão expor todos os seus trabalhos no Portfoliuz.
Conclusões
Após a conclusão deste trabalho, conseguimos criar um site funcional, simples de navegar com uma linguagem quer funcional quer visual intuitiva, o que nos deixou agradados, uma vez que desde o princípio esse era o nosso objectivo. No entanto temos a noção que quando adquirimos novos conhecimentos, nomeadamente no campo do php, o site poderá passar a conter ferramentas que o tornem realmente inovador e apelativo, a todas as pessoas que partilhem das mesmas actividades que nós. Um factor a ter em conta agora que chegámos ao final do projecto, prendesse com o facto de todos nós termos adquirido novos e úteis conhecimentos, que nos serão bastante úteis num futuro próximo.
Referências bibliográficas
Sites de referência:
- http://www.w3schools.com/html5/tag_video.asp
