Universidade de Aveiro

2011/2012

Projeto

BackToBasics

Orientador: Ana Amaro

Carla Taveira |47065

Liliana Almeida | 49905

Francisco Silva | 51054

Sílvio Dias | 51068

Guião - Demo Técnica

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

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.

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

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>

6

Algumas imagens do nosso trabalho

Ilustração 1 - Site - Demo técnica

Ilustração 2 - Base dados – Workbench

7

Ilustração 3 - Painel de Controlo do site

Ilustração 4 - Base dados externa

8

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