Combo Caster
From Labmm2
Contents |
Autores
Hugo Ribeiro 47574
Tiago Roque 38803
Valério Vaz 40554
Apresentação / Contextualização
O tema do nosso projecto é um site com informações relativamente a jogos de vídeo, em que os utilizadores fornecem as suas próprias reviews dos seus jogos preferidos.O ambiente é tradicional para que o utilizador não se sinta perdido. A informação que achámos mais importante ter no site foi noticias, análises, antevisões, imagens, videos, calendário de lançamentos e banca de revistas.
Fluxograma
Inserir aqui o fluxograma
Layouts
inserir aqui maquete do layout
Caracterização da narrativa
Decidimos utilizar um layout mais clássico de um site de reviews, género de magazine, com o objectivo de não confundir o utilizador mantendo-o num ambiente que lhe é familiar. Para inspiração, visitamos alguns sites com o mesmo tema do nosso, embora com um conceito um pouco diferente.
Estrutura XHTML
inserir aqui a estrutura XHTML
Estrutura CSS
Os ficheiros CSS foram pensados para que quando o utilizador visualize uma determinada categoria de notícias, o tema do site mude. Ou seja, quando o utilizador visita uma secção onde só irá encontrar artigos relativos à Xbox, o site fica em tons de verde, mas quando visita a secção da PS3, o site muda para azul.
Dividimos então em X ficheiros CSS.
style.css - onde tem toda a estrutura de CSS que suporta o design e layout do site, desde alinhamentos e medidas a fontes utilizadas.
style-sony.css, style-xbox.css, style-pc.css, style-mobile.css, style-nintendo.css e style-geral.css
Nestes ficheiros, tem o código necessário para alterar as cores do site para as diferentes plataformas. Aqui muda-se as imagens e cores. Ao todo, existem 6 ficheiros CSS diferentes só para as plataformas.
JavaScript
Integração do Google Earth
Achá-mos interessante colocar as capas das várias revistas do mundo relativas a jogos utilizando o Google Maps/Earth
<script src="http://www.google.com/jsapi?key=ABQIAAAAHNuSBIahnmPUsMc40THOGhTbHP2MwjGf9E7X9Q1c7vu-Rf61NxRKsfs0azkJlgsdue8y3sTBH2Tu_Q" type="text/javascript"></script>
<script type="text/javascript">
var map;
var ge;
google.load("maps", "2.x");
function init() {
map = new GMap2(document.getElementById('map3d'));
map.setCenter(new GLatLng(38, -9), 3);
var mapui = map.getDefaultUI();
mapui.maptypes.physical = false;
map.setUI(mapui);
// add 'Earth' as one of the map types
map.addMapType(G_SATELLITE_3D_MAP);
// bgamer
var bgamerM = new GMarker(new GLatLng(38.66835610151506, -9.0966796875));
GEvent.addListener(bgamerM, "click", function() {
var bgamer = '<div style="width: 210px; padding-right: 10px">BGamer! <img src="http://bgamer.pt/images/revistas/140611114958000000thumb_bg156_thumb.jpg"/></div>';
bgamerM.openInfoWindowHtml(bgamer);
});
map.addOverlay(bgamerM);
google.maps.Event.trigger(bgamerM,"click");
var edgeM = new GMarker(new GLatLng(51.515, -0.099028));
GEvent.addListener(edgeM, "click", function() {
var edge = '<div style="width: 210px; padding-right: 10px">EDGE! <img src="http://media.next-gen.biz/files/e229_promo.png"/></div>';
edgeM.openInfoWindowHtml(edge);
});
map.addOverlay(edgeM);
google.maps.Event.trigger(edgeM,"click");
}
</script>
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
<div id="map3d" style="width: 280px; height: 280px;"></div>
<br>
</body>
Frameworks utilizadas
Para nos facilitar a integração do projecto num ambiente Web, e para que o nosso projecto fosse competitivo no mercado actual, decidimos utilizar a plataforma WordPress. Esta, tem já implementada toda a estrutura para gestão de artigos e utilizadores. Coisas que com o XHTML, CSS e Javascript são praticamente impossíveis de fazer.
Basicamente precisamos de fazer um theme – que incluí XHTML, CSS e Javascript, mais as tags php que o tema precisa de ter para conseguir comunicar com o WordPress e com a base de dados MySQL.
Depois de definir toda a estrutura de código a utilizar, a arborização, várias secções e elementos em Javascript precisamos de implementar o código na base do WordPress.
A primeira coisa a fazer é dividir todo o código XHTML em vários ficheiros:
- Header.php
- Índex.php
- Sidebar.php
- Footer.php
O WordPress utiliza o código dividido para que, em cada “actualização” de uma página, não esteja sempre a carregar o mesmo código. Basicamente o header.php, sidebar.php e o footer.php ficarão sempre iguais.
Os ficheiros que cada theme deverá ter são:
Archive.php – é a página onde se mostram todos os artigos ordenados por diferentes factores, são eles as categorias, a data de publicação e as tags aplicadas.
Comments.php – é o código usado para todos os formulários de comentários.
footer.php – incluí o código HTML + tags php do WordPress para o footer / rodapé do website.
functions.php – tem o código necessário em php para que se consiga comunicar entre o WordPress e a base de dados, e também várias funções que poderão existir. Nota: este ficheiro não foi editado.
feader.php – tem o código HTML que nunca será modificado em todas as páginas do site. Todos os elementos da tag <head> estão aqui. Por exemplo, inclusão de ficheiros externos CSS, inclusão de livrarias externas de Javascript, por exemplo o jQuery.
index.php – incluí o código que é necessário para a renderização do browser da primeira página – homepage.
page.php – Este ficheiro suporta o código necessário para que a secção das páginas do WordPress seja mostrada correctamente. Estas páginas, podem ser acedidas pela navegação principal ou secundária do website.
search.php – tem apenas o código que se deve utilizar para se efectuar pesquisa no site. Nota: este ficheiro não foi editado.
sidebar.php – Código necessário para a barra lateral presente em todo o site.
single.php – Código para mostrar um artigo completo no website.
style.css – Toda a configuração de estilos CSS ficará neste ficheiro.
No índex.php utilizamos uma função para chamar todas as outras páginas. Ficamos com uma estrutura assim:
<?php get_header() ?> <!--- código do conteúdo da página → <?php get_sidebar() ?> <?php get_footer() ?>
As funções do tipo get_XXXX() são “includes” de código que o php tem.
Para as páginas de cada artigo, temos de utilizar o ficheiro single.php que terá os mesmos “includes”. Assim como no ficheiro archives.php e page.php.
Depois de implementado, ficamos já com um theme para ser utilizado no WordPress. Faz-se o upload de todos os ficheiros para uma pasta nova em:
root/wp-content/themes/nome-do-tema
em que root é a raiz do nosso website.
Melhoramentos Futuros
Nos botões de escolha de plataforma que actualmente apenas mudam o aspecto do site esperamos implementar um sistema que permita a filtragem do conteúdo conforme a plataforma escolhida.
