Portfoliuz
From Labmm2
| (3 intermediate revisions not shown) | |||
| Line 143: | Line 143: | ||
<pre> | <pre> | ||
| - | <input id="searchbar" name="searchbar" type="text" size="30" maxlength="50" height="30px" placeholder="Procura por nome de artista" | + | <input id="searchbar" name="searchbar" type="text" size="30" maxlength="50" height="30px" placeholder="Procura por nome de artista" |
| + | onblur="limparprocura(); procura(this.id);" onkeypress="limparprocura(); procura(this.id);"/> | ||
placeholder="Procura por nome de artista" | placeholder="Procura por nome de artista" | ||
</pre> | </pre> | ||
| Line 271: | Line 272: | ||
<pre> | <pre> | ||
| - | <img id="imgs" src="imgs/avatar_nome/3Quim.png" onMouseover="this.src='imgs/avatar_nome/03quim.png'"<br /> onMouseOut="this.src='imgs/avatar_nome/3Quim.png'" alt="quim_button" onclick="location='a_quim.html'" /> | + | <img id="imgs" src="imgs/avatar_nome/3Quim.png" onMouseover="this.src='imgs/avatar_nome/03quim.png'"<br /> onMouseOut="this.src='imgs/avatar_nome/3Quim.png'" |
| + | alt="quim_button" onclick="location='a_quim.html'" /> | ||
</pre> | </pre> | ||
| Line 290: | Line 292: | ||
</pre> | </pre> | ||
| + | O efeito aplicado sobre cada video deve-se à utilização de jquery, constituido pelo seguinte código: | ||
| + | |||
| + | <pre> | ||
| + | $(document).ready(function() { | ||
| + | $("a.imgs").fancybox({'transitionOut':'elastic'}); | ||
| + | |||
| + | $(".video").click(function() { | ||
| + | $.fancybox({ | ||
| + | 'padding' : 0, | ||
| + | 'autoScale' : false, | ||
| + | 'transitionIn' : 'none', | ||
| + | 'transitionOut' : 'elastic', | ||
| + | 'title' : this.title, | ||
| + | 'width' : 680, | ||
| + | 'height' : 495, | ||
| + | 'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), | ||
| + | 'type' : 'swf', | ||
| + | 'swf' : { | ||
| + | 'wmode' : 'transparent', | ||
| + | 'allowfullscreen' : 'true' | ||
| + | } | ||
| + | }); | ||
| + | return false; | ||
| + | }); | ||
| + | |||
| + | $("#form").validate(); | ||
| + | }); | ||
| + | </pre> | ||
---- | ---- | ||
| Line 328: | Line 358: | ||
- http://www.youtube.com/watch?v=3r2qHTKPBmU (Criação de logotipos em illustrator) | - http://www.youtube.com/watch?v=3r2qHTKPBmU (Criação de logotipos em illustrator) | ||
- http://www.youtube.com/watch?v=Hk5oXFtYLwE (Tutorial para principiantes de jquery - parte 1) | - http://www.youtube.com/watch?v=Hk5oXFtYLwE (Tutorial para principiantes de jquery - parte 1) | ||
| - | - http://www.youtube.com/watch?v=J64Pmi_jEiQ (Continuação do tutorial jquery - parte 2) | + | - http://www.youtube.com/watch?v=J64Pmi_jEiQ (Continuação do tutorial jquery - parte 2) |
| + | - http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/ (Validação de formulários a partir de jquery) | ||
| + | - http://www.devguru.com/technologies/javascript/17458.asp (setAttribute em JavaScript) | ||
Latest revision as of 04:40, 12 July 2011
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>
Código utilizado para remover texto pré-definido na barra de pesquisa:
<input id="searchbar" name="searchbar" type="text" size="30" maxlength="50" height="30px" placeholder="Procura por nome de artista" onblur="limparprocura(); procura(this.id);" onkeypress="limparprocura(); procura(this.id);"/> placeholder="Procura por nome de artista"
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
.Ligação ao facebook:
Na página de um artista específico, encontra-se um botão com ligação ao facebook desse mesmo artista. Tal foi possível com a utilização do seguinte código:
<img id="imgs" src="imgs/avatar_nome/3Quim.png" onMouseover="this.src='imgs/avatar_nome/03quim.png'"<br /> onMouseOut="this.src='imgs/avatar_nome/3Quim.png'" alt="quim_button" onclick="location='a_quim.html'" />
.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" />
O efeito aplicado sobre cada video deve-se à utilização de jquery, constituido pelo seguinte código:
$(document).ready(function() {
$("a.imgs").fancybox({'transitionOut':'elastic'});
$(".video").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'elastic',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
$("#form").validate();
});
Melhoramentos futuros
Num futuro próximo, temos já pensadas algumas alterações ao site, nomeadamente a possibilidade de os utilizadores criarem uma conta, para dessa forma poderem também expor todos os seus trabalhos no Portfoliuz. Será criado um menu no topo da página que permanecerá presente durante toda a navegação pelo site. Neste menu poder-se-á navegar pelas várias categorias, página dos artistas, página para a mensagem e, inclusivé, compreenderá o botão para fazer "login/criar conta". Se algum utilizador estiver online, o botao "login/criar conta" deverá ser substituído por um botão com o Nickname atribuído pelo utilizador. O botão do utilizador vai dirigir para a página do artista com um click, mas só com o rollover abrirá um menu dropdown com a opção de editar as "opções do perfil" e "fazer logoff". Quando online, se o utilizador visitar a página da mensagem/contactos, terá ainda a vida facilitada no que consta a sua identificação. Haverá também um botão para adicionar mais uma caixa de texto onde poderá escrever o título e a mensagem a deixar. Serão incluídas várias opções de interacção, incluindo a possibilidade de criar "projectos": páginas personalizaveis com opções pré-definidas onde poderá desenvolver um projecto em conjunto com outro utilizador ou individualmente. Aqueles que partilharem o projecto serão separados em categorias, definindo as suas regalias no que consta ao poder sobre a página do projecto. Poderá ainda definir o nivel de partilha com os outros utilizadores com o uso das categorias de utilizador, desde a bloqueado a nível de autoridade máximo e exclusivo. Este upgrade destacará o ênfase que tem neste momento sobre os criadores do sitio, para se dirigir a todos os utilizadores por igual. Assim sendo a homepage deverá também ser alterada. As ligações com as nossas fotos desaparecerão e serão substituídos por outros, com uma linguagem generalista. Incluirá também dois campos onde aparecerão novos utilizadors, novos projectos e novos elementos audiovisuais produzidos.
Conclusões
Ao nos ser proposto a criação de um projecto de um website, com base nos conhecimentos obtidos nas aulas teóricas e práticas da cadeira de laboratório multimédia 2, tinhamos a noção, desde o inicio, que iria ser preciso bastante mais conhecimento que o adquirido nas aulas, e por isso, desenvolvemos Portfoliuz nesse sentido, a fim de ser um projecto autónomo e inovador.
Após a conclusão deste trabalho, conseguimos criar um site funcional, simples de navegar com uma linguagem quer funcional quer visualmente intuitiva, o que nos deixou agradados, uma vez que, desde o princípio, esse era o nosso grande objectivo. Uma vez atingido este objectivo, esperemos que, mais tarde, com a implementação de base de dados, seja possível a divulgação de trabalhos desenvolvidos por utilizadores dos mais variados cantos do mundo, de modo a trocarem-se ideais, conhecimentos e informações que sejam relevantes, úteis e de interesse entre a comunidade Portfoliuz.
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 (Html5 - utilização da tag video) - http://www.google.com/webfonts (Fontes grátis disponibilizadas pelo google) - http://jquery.com/ (Site oficial de jquery) - http://www.videocopilot.net/tutorials/ (Tutoriais em after effects, utilizado no intro do site) - http://www.youtube.com/watch?v=3r2qHTKPBmU (Criação de logotipos em illustrator) - http://www.youtube.com/watch?v=Hk5oXFtYLwE (Tutorial para principiantes de jquery - parte 1) - http://www.youtube.com/watch?v=J64Pmi_jEiQ (Continuação do tutorial jquery - parte 2) - http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/ (Validação de formulários a partir de jquery) - http://www.devguru.com/technologies/javascript/17458.asp (setAttribute em JavaScript)
