Guiao demotecnica

270 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
270
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Guiao demotecnica

  1. 1. Universidade de Aveiro 2011/2012 ProjetoBackToBasicsGuião - Demo Técnica Orientador: Ana Amaro Carla Taveira |47065 Liliana Almeida | 49905 Francisco Silva | 51054 Sílvio Dias | 51068
  2. 2. Guião – Demo Técnica – BackToBasics A demo técnica pretende demonstrar se as tecnologias e recursos técnicos por nósescolhidos são os mais adequados e se temos competências para trabalhar com elas paracumprir 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 alinguagem PHP, devidamente organizado, com pastas para css, includes, extras (ex. formataçãode texto com ferramentas do word nas tag html textarea) e imagens. Tivemos a preocupaçãode incluir no código CSS programação para diminuir futuramente problemas decompatibilidade entre os navegadores. Por outro lado está organizado de modo a que osdiferentes 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 mesmapágina o topo, páginas e rodapé. De acordo com a passagem de parâmetros por query stringsão abertos os conteúdos na área das páginas recorrendo a uma função switch em php. Todasas actions dos formulários, até ao momento criados estão a direcionar a verificação para umapágina de funções que de acordo com a passagem de parâmetros por query string executadeterminadas instruções. Client-Side: Linguagem de programação CSS. Vamos fazer a separação doconteúdo/estrutura HTML da formatação dos estilos recorrendo ao CSS. Foram feitas testadosalguns scrips JQUERY, por exemplo, o slide de imagens que vai estar presente na página iniciale 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 mesmasjá 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 ladodo servidor, o PHP, MySQL, SQL que todas juntas fazem a gestão da nossa base de dadosrelacional, criada no programa Workbench, testada localmente e exportada posteriormentepara a base no servidor externo. De momento esta já se encontra alojada no nosso servidor dealojamento. Resolvemos fazer desde já uma base dados robusta para termos uma resposta sobreos desafios que vamos enfrentar. Por esta razão, além de estarmos a rever o que aprendemosno semestre passado, começámos a ler um excelente livro sobre SQL, mencionado na 2
  3. 3. bibliografia. Pretendemos fazer as query sem recorrer a nenhum programa de ajuda. A criaçãodesta 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 nossassolicitaçõ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 eapesar de ainda não estar a transmitir da quinta já nos forneceu indicações que não será difícilde implementar a situação que é pretendida. Estamos a comparar duas câmaras de vídeoexternas, 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 dasquintas, no futuro os parceiros poderão automaticamente introduzir localizações. O calendário que foi introduzido na demo ainda está numa fase muito precoce deelaboração, é feito em PHP e no futuro vai ter comunicação com a BD para a marcação dasvisitas.Demo Técnica – Vídeo1. 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 sualocalizaçã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 sendoredirecionado para a home page;10.Executa os mesmos passos que o ponto anterior mas introduz dados do login errados. Nofuturo será exibida um alert box em Java Script com a informação de que o login não foiefetuado com sucesso. 3
  4. 4. Aspetos retirados neste estudo: Positivos: Um dos principais objetivos para este projeto era a implementação das soluçõestécnicas recorrendo o menos possível às ferramentas automáticas do Dreamweaver. Por issoprecisávamos de provar a nós próprios que o podíamos fazer. Esta aposta foi ganha porqueneste momento temos uma base dados criada no nosso servidor externo, que comunica com onosso site a partir de PHP, fizemos, INSERT de utilizadores na Base Dados, editámos conteúdosUPDATE 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 devídeo recorrendo ao streaming vídeo fornecido pelo site referido na bibliografia. Pensávamosque teríamos que instalar os meios tecnológicos na quinta. O nosso parceiro da Quinta aindaanão decidiu a sua melhor localização. Numa conversa com o Professor Caixinha fomoselucidados 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 poreles fornecido. O painel de controlo das suas configurações também não é difícil. Constatamosporé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 dadosonline e aqui tivemos surpresas desagradáveis. O servidor tem um tempo de latência diurnomuito grande. Isto quer dizer que quando tivermos que trabalhar com um grande número dedados 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 umerro que nos fez peder um tempo precioso até nos constatarmos que as mesmas açõesefetuadas através de outra rede não davam problemas. Esta será uma questão a análisarposteriormente com os Professores. Também não conseguirmos abrir o painel de control donosso 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. 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. 6. Algumas imagens do nosso trabalhoIlustração 1 - Site - Demo técnicaIlustração 2 - Base dados – Workbench 6
  7. 7. Ilustração 3 - Painel de Controlo do siteIlustração 4 - Base dados externa 7
  8. 8. Ilustração 5 - Arquivos dos ficheiros do site Dreamweaver 8

×