1) O documento descreve uma demonstração técnica de um projeto universitário desenvolvido por estudantes utilizando várias tecnologias da web. 2) Foi criado um protótipo de site com arquitetura server-side em PHP e banco de dados MySQL hospedado em servidor externo. 3) A demonstração mostrou funcionalidades como login de usuário, streaming de vídeo, mapa e calendário utilizando tecnologias como PHP, CSS, JavaScript e API do Google Maps.

1. Universidade de Aveiro
2011/2012
Projeto
BackToBasics
Guião - Demo Técnica
Orientador: Ana Amaro
Carla Taveira |47065
Liliana Almeida | 49905
Francisco Silva | 51054
Sílvio Dias | 51068

2. Guião – Demo Técnica – BackToBasics
A demo técnica pretende demonstrar se as tecnologias e recursos técnicos por nós
escolhidos são os mais adequados e se temos competências para trabalhar com elas para
cumprir o que nos propusemos fazer nos requisitos funcionais.
Como já foi referido no nosso blog a nossa aplicação está alojada no servidor Esotérica,
com o endereço: http://backtobasics.com.pt/ .
Resposta das tecnologias escolhidas:
Criámos um protótipo reutilizável com uma arquitetura server-side utilizando a
linguagem PHP, devidamente organizado, com pastas para css, includes, extras (ex. formatação
de texto com ferramentas do word nas tag html textarea) e imagens. Tivemos a preocupação
de incluir no código CSS programação para diminuir futuramente problemas de
compatibilidade entre os navegadores. Por outro lado está organizado de modo a que os
diferentes ficheiros possam ser facilmente atualizados.
Esta arquitetura está organizada da seguinte forma:
Existe em todas as páginas 3 ficheiros php que através de includes abrem na mesma
página o topo, páginas e rodapé. De acordo com a passagem de parâmetros por query string
são abertos os conteúdos na área das páginas recorrendo a uma função switch em php. Todas
as actions dos formulários, até ao momento criados estão a direcionar a verificação para uma
página de funções que de acordo com a passagem de parâmetros por query string executa
determinadas instruções.
Client-Side: Linguagem de programação CSS. Vamos fazer a separação do
conteúdo/estrutura HTML da formatação dos estilos recorrendo ao CSS. Foram feitas testados
alguns scrips JQUERY, por exemplo, o slide de imagens que vai estar presente na página inicial
e para a construção do CHAT. Também será utilizada a linguagem javascript, tendo sido já
arquivadas as funcionalidades básicas desta tecnologia com que vamos trabalhar. As mesmas
já foram testadas em termos de validações de formulários, comparação de string, etc.
Server-Side: Os nossos grandes desafios estão nas tecnologias que vão operar do lado
do servidor, o PHP, MySQL, SQL que todas juntas fazem a gestão da nossa base de dados
relacional, criada no programa Workbench, testada localmente e exportada posteriormente
para a base no servidor externo. De momento esta já se encontra alojada no nosso servidor de
alojamento.
Resolvemos fazer desde já uma base dados robusta para termos uma resposta sobre
os desafios que vamos enfrentar. Por esta razão, além de estarmos a rever o que aprendemos
no semestre passado, começámos a ler um excelente livro sobre SQL, mencionado na
2

3. bibliografia. Pretendemos fazer as query sem recorrer a nenhum programa de ajuda. A criação
desta base de dados deu alguns problemas já relatados no blogue, mas foram desde já
ultrapassados. Pode-se dizer que nesta fase a base dados está a responder bem às nossas
solicitações e a comunicação com o site/utilizadores está a decorrer normalmente.
A inclusão de um streaming de vídeo na nossa home page foi feita com facilidade e
apesar de ainda não estar a transmitir da quinta já nos forneceu indicações que não será difícil
de implementar a situação que é pretendida. Estamos a comparar duas câmaras de vídeo
externas, dotadas de IP e com transmissão por banda larga para colocar na quinta parceira.
Temos já implementado o mapa com o API do Google para visualizar a localização das
quintas, no futuro os parceiros poderão automaticamente introduzir localizações.
O calendário que foi introduzido na demo ainda está numa fase muito precoce de
elaboração, é feito em PHP e no futuro vai ter comunicação com a BD para a marcação das
visitas.
Demo Técnica – Vídeo
1. O utilizador procura no motor de busca a aplicação BackToBasics;
2. É direcionado para o nosso site;
3. Faz registo (preenchimento de formulário) e submete o formulário;
4.O seu perfil é exibido numa nova página onde adiciona novos dados;
5. Passa para a Home Page onde tem disponível um streaming de vídeo (no futuro a sua
localização será diferente);
6. Clica para ver o que a câmara está a filmar naquele momento;
7. Vai ver o mapa do Google com a localização da quinta parceira;
8.Vizualiza o calendário de marcação de visitas;
9. Sai da aplicação e voltar a entrar introduzindo os seus dados de login com sucesso sendo
redirecionado para a home page;
10.Executa os mesmos passos que o ponto anterior mas introduz dados do login errados. No
futuro será exibida um alert box em Java Script com a informação de que o login não foi
efetuado com sucesso.
3

4. Aspetos retirados neste estudo:
Positivos:
Um dos principais objetivos para este projeto era a implementação das soluções
técnicas recorrendo o menos possível às ferramentas automáticas do Dreamweaver. Por isso
precisávamos de provar a nós próprios que o podíamos fazer. Esta aposta foi ganha porque
neste momento temos uma base dados criada no nosso servidor externo, que comunica com o
nosso site a partir de PHP, fizemos, INSERT de utilizadores na Base Dados, editámos conteúdos
UPDATE e através do SELECT exibimos conteúdos, usámos funções e passagem de parâmetros,
tudo sem utilizar os mecanismos automáticos do Dreamweaver.
Nesta fase não estávamos a pensar demonstrar o funcionamento das câmaras de
vídeo recorrendo ao streaming vídeo fornecido pelo site referido na bibliografia. Pensávamos
que teríamos que instalar os meios tecnológicos na quinta. O nosso parceiro da Quinta ainda
anão decidiu a sua melhor localização. Numa conversa com o Professor Caixinha fomos
elucidados que o poderíamos fazer recorrendo nesta fase aos nossos computadores pessoais.
Constatamos que é fácil configurar uma ligação através deste site e da instalação do plugin por
eles fornecido. O painel de controlo das suas configurações também não é difícil. Constatamos
porém que muitas das funcionalidades só estam disponíveis na versão paga.
Negativos:
Outro dos nossos grandes objetivos era verificar o funcionamento da base dados
online e aqui tivemos surpresas desagradáveis. O servidor tem um tempo de latência diurno
muito grande. Isto quer dizer que quando tivermos que trabalhar com um grande número de
dados devemos, sempre que possível, faze-lo durante o fim da noite ou pela madrugada.
Não é possível fazer o login de um utilizador registado dentro da rede da UA. Dava um
erro que nos fez peder um tempo precioso até nos constatarmos que as mesmas ações
efetuadas através de outra rede não davam problemas. Esta será uma questão a análisar
posteriormente com os Professores. Também não conseguirmos abrir o painel de control do
nosso servidor na rede da UA.
Bibliografia
 Beighley, L. Use a Cabeça!SQL (Brasil ed.).
 JQuery – Slide Imagens – visitado em 10 março de 2012,
URL http://workshop.rs/projects/coin-slider/
 Streaming vídeo URL: http://new.livestream.com/home
4

5.  http://new.livestream.com/home Livestream studio, visitado em 14 março, URL
<http://igovexplica.wiki.zoho.com/Cadastro-no-Livestream.html >
 Rafael Dohms, visitado em 14 março,
URL <http://blog.doh.ms/2006/12/06/google-maps-api-um-exemplo-pratico-e-
comentado/?lang=pt-br >
 <criarweb.com>, visitado em 14 março,
URL < http://www.criarweb.com/artigos/basico-comecar-desenvolver-google-maps.html>
 Youtube - How to create a “My Map” in Google Maps, visitado em 14 março,
URL <http://www.youtube.com/watch?v=TftFnot5uXw >
 Youtube – Google Maps Tutorial, visitado em 14 março,
URL <http://www.youtube.com/watch?v=tzAP2BqpjA4>
 Youtube - Google Maps - Insert Image in My Maps Placemark, visitado em 14 março,
URL< http://www.youtube.com/watch?v=2fT-tOUi_Nc&feature=related>
 Google – Mapas, visitado em 14 março,
URL < http://maps.google.pt/maps?hl=pt-PT&tab=wl>
 php-google-map-api (Multiple Maps), visitado em 14 março,
URL < http://www.bradwedell.com/phpgooglemapapi/demos/advanced_multiple_maps.php>
5

6. Algumas imagens do nosso trabalho
Ilustração 1 - Site - Demo técnica
Ilustração 2 - Base dados – Workbench
6

7. Ilustração 3 - Painel de Controlo do site
Ilustração 4 - Base dados externa
7

8. Ilustração 5 - Arquivos dos ficheiros do site Dreamweaver
8