I$CUT
From LABMM1_IDE
Apresentação do projecto
Elementos do Grupo
Escolha do nome
Universo SCUTS ( Primeira proposta )
( Inicialmente, escolhemos este nome pois "Universo" significa um todo, e esta aplicação vai dar informações sobre tudo acerca das SCUT )
i$CUT (Actual)
( Após verificarmos que "Universo SCUTS" seria uma nome um bocado extenso, decidimos optar por "i$SCUT". Antigamente, SCUT significada Sem Custos para o Utilizador, e substituímos "S" pelo Cifrão($), pois agora os utilizadores pagam. Acrescentámos o "i" no inicio ( como existe nos nomes: iPod, iPhone, iPad, etc ), para termos um nome mais "sólido". )
Análise e planeamento
Conceito
Descrição: Elaboração de uma plataforma Web em Flash disponível e acessível a todas as pessoas via on-line.
Objectivo da Aplicação: Calcular preços, tempo de deslocação e alternativas a percursos escolhidos por cada utilizador.
Público Alvo: Todos os utilizadores SCUT/ Público geral.
Referências visuais
- Visualização de alguns conceitos no Jornal de Noticias.
- Regulamento das Scuts em agentes Payshop
- Referências a empresas externas como Via Verde
Estado de Arte
A nossa aplicação vai ser baseada nestes três SWF's, mas iremos juntar tudo em um. O primeiro mostra só o preço do itinerário escolhido pelo utilizador.
O segundo diz os preços de todos, mas têm as alternativas e o tempo de viagem. O terceiro tem as alternativas e a extensão.
Visto que a nossa aplicação é o conjunto destas 3 ideias, iremos nos basear nestas aplicações, formando uma completa.
Seguem-se em baixo PDF's sobre Informações, Preços, Formas de Pagamento, Mapa do Grande Porto, da Costa da Prata e do Norte Litoral e as alternativas ás SCUT.
Informações, Preços e Formas de Pagamento
Mapa SCUT - Grande Porto
Mapa SCUT - Costa da Prata
Mapa SCUT - Norte Litoral
Alternativas SCUT
Encontrámos também um web site com trajectórias para "Fugir ás SCUTs":
Fugir ás SCUTs
Palete de Cores
Informações da palete de cores:
Começámos por utilizar o esquema de cores azul e verde pois são quatro cores análogas.
Depois acrescentámos 3 cores mais “vivas” para servir de destaque.
Utilizámos dois degrades de branco para cinzento para aplicar nos scrollers.
Por fim o ultimo esquema de cores utilizámos no player de música, nos botões e no knob de volume para tentar “fugir” ao esquema de cores azul e verde.
Fontes
Escolhemos dois tipos de fontes que iremos usar na aplicação:
Ubuntu Titling - Bold
Este tipo de letra será usado unicamente para o nosso logótipo.
Teste:
 |
 |
 |
 |
Tahoma
É um tipo de letra que dispensa apresentações.
É semelhante a Verdana, mas mais completo.
Iremos utilizar este tipo de letra elegante no que diz respeito ás informações e botões.
 |
 |
Josefin Sans Std - Light (Editado)
O tipo de letra original (Josefin Sans Std) tinha um pequeno detalhe nas letras "Z" que nó, como grupo, não gostámos.
Por este motivo, editámos este tipo de letra com o FontLab Studio e criamos a nossa própria versão deste tipo de letra.
Fizemos do seguinte modo: Ver Tutorial
Teste:
 |
 |
 |
 |
(Após termos falado com o professor Ivo, no dia 2/10, verificámos que este tipo de letra não se adequava muito onde o iríamos utilizar( visto que é um tipo de letra fino, e seria imperceptível quando usado em letras pequenas). Por isto, já não iremos utilizar este tipo de letra, e em vez deste iremos usar o Tahoma)
Desenho funcional
Layout
Guiámos-nos por uma grelha feita por nós, para não haver "deslizes".
No canto superior direito irá sempre aparecer as Informações, Sair e o botão que activa/desactiva o fullscreen.
No canto superior esquerdo irá sempre aparecer o logótipo.
Ao centro, do lado esquerdo irá aparecer uma ComboBox com os diversos percursos.
e por fim, ao centro do lado direito irá aparecer o mapa da respectiva concessão.
Logótipo
- Testes e informações do Logótipo:
- Testes e informações do Logótipo:
- Logótipo testado para cores Escuras e Claras;
- Logótipo com as respectivas cores em CMYK, RGB e Pantone;
- Logótipo em Grayscale;
- Logótipo para Fax;
- Logótipo Preto.
- Área de Protecção
Ecrãs Tipo
(Versão em Inglês)
Requisitos funcionais
- Pequena introdução com Loading; ( Feito )
- Menu com diversas informações sobre as SCUT; ( Feito )
- Menu com as diversas Concessões; ( Feito )
- ComboBox com todos os percursos; ( Feito )
- Preço, tempo de viagem e alternativa associada a cada percurso; ( Feito )
- Mapa com as SCUT e suas alternativas; ( Feito )
- Scroller - com a funcionalidade "mouse wheel"(pode ser movido com a roda do rato) ( Feito )
- Player com várias músicas; ( Feito )
- Controlador de som de Volume em Knob; ( Feito )
- Pequenos sons accionados com o evento "RollOver" e "OnRelease"; ( Feito )
- Botão para Fullscreen ( Feito )
Estrutura arborescente
Esta aplicação baseia-se numa estrutura arborescente composta.
Após a entrada na aplicação, o utilizador escolhe uma das 3 SCUT (Concessão Norte Litoral, Concessão Grande Porto ou Concessão Costa da Prata). Dentro de cada uma destas Concessões existem diferentes percursos, as quais o utilizador escolhe para obter informações cobre o mesmo.
Haverá sempre disponível um menu de informações, caso o utilizador tenha dúvidas, e um menu de sair, o qual tem a opção de sair, ou de não sair (caso se tenha enganado).
Desenho de interacção e usabilidade
Nesta aplicação iremos usar botões do tipo PopUp ( combo Box), botões de texto (push buttons), Botões icónicos/gráficos e Caixas de Diálogo.
Indicadores
- Facilidade de aprendizagem - Esta aplicação é, não só fácil de aprender, como fácil de usar;
- Eficácia/eficiência - Com o uso da ComboBox, a eficácia desta aplicação aumentou, visto que com apenas poucos cliques obtêm as informações que precisam;
- Facilidade de memorização - É fácil de memorizar devido a elementos gráficos que destacam a informação;
- Satisfação - Com a utilização de cores suaves fizemos esta aplicação "confortável", maximizando a satisfação do Utilizador;
- Minimização do erro e facilidade na sua correcção - A probabilidade de o utilizador errar é reduzida, sendo que se este errar, a aplicação dispõe de métodos de voltar atrás para os corrigir ( Exemplo: Caso o utilizador se engane e clique no botão de sair, irá automaticamente aparecer uma Caixa de Diálogo, e caso este se tenha enganado, pode clicar na opção de não sair da aplicação, voltando para onde estava ).
Princípios do desenho de interacção e interfaces
- Conhecer o Utilizador - Fizemos esta aplicação pondo-nos no lugar do utilizador, dando toda a informação disponível para o utilizador compreender a aplicação;
- Estrutura e orientação - Esta aplicação disponibiliza formas rápidas e directas de acesso aos conteúdos, devido á sua simples organização. Apenas com 3 cliques o utilizador consegue obter a informação que precisa. Sinalizadores e mecanismos de retorno;
- Simplicidade - Seguindo a máxima "Keep It Simple, Stupid", esta aplicação é simples, útil e fácil de usar;
- Visibilidade - Através do uso as cores de destaque da nossa palete de cores, diminuímos a necessidade de memorização do utilizador, pois essas cores foram usadas nas informações mais importantes, destacando-as das desnecessárias;
- Feedback - A aplicação mantém sempre o utilizador a par do que faz, dando sempre feedback visual ou sonoro;
- Tolerância - Existe prevenções de erros nesta aplicação ( já dito no principio "Minimização do erro e facilidade na sua correcção" ), tornando acções reversíveis, desactivando opções inapropriadas e questionando sempre o utilizador da acção que foi feita;
- Consistência - É uma aplicação consistente pois está dentro expectativas do utilizador.
Desenho técnico
Botões
Botões do tipo PopUp ( ComboBox) usados para aumentar a interactividade da aplicação.
Botões de texto (push buttons), Botões icónicos/gráficos e Caixas de Diálogo.
Carro
Carro interactivo, que pode ser controlado pelo utilizador.
Scroll
Scroller com aditivo de poder ser movido com a "mouse wheel" (pode ser movido com a roda do rato)
Player de Música
Player de música, com Knob de Volume, tempo total da música, tempo actual da musica e nome da música, com botões programados para parar, pausar e começar a musica.
Contem 6 músicas:
- Música mais "Mexida":
- Andy McKee - Ebon Coast
- Andy McKee - Rylynn
- Andy McKee - Drifting
- Música mais "Calma":
- Debussy - Clair de lune
- Naruto Soundtrack - Sadness and Sorrow
- Yiruma - Kiss the Rain
ToolTip
Informações que irão aparecer e seguir o rato ( dentro de uma determinada zona ) onde irá aparecer informações sobre a respectiva portagem.
Produção do projecto
Através de metas definidas pelos docentes, conseguimos acabar este projecto a tempo, sem preocupações nem grandes problemas.
Layout
Através deste conjunto de grelhas, criámos uma aplicação fácil de usar, e que não requer grandes conhecimentos.
Botões
Botões usados na ComboBox. Após o utilizador seleccionar o ponto inicial e final do percurso, a aplicação fornecerá informações de preço, tempo de viagem e alternativa.
Decidimos usar este método para aumentar a interacção com o utilizador.
Todos os botões acima foram programados, sendo apenas activos com a utilização do utilizador.
Carro
Para tornar esta aplicação mais interactiva, criámos um carro "virtual" e programámos-lo para se movimentar e produzir sons. Também, após a passagem por de cima de uma portagem, é exposto a informação dessa respectiva portagem, o preço, e a sua localização.
Scroll
Utilizámos um Scroller programado para ser movido com a roda do rato e com o próprio rato, sendo o utilizador o controlador da informação.
ToolTip
Programámos todas as portagens e o carro "virtual" para que, com a passagem do rato ( por cima destas ), aparecesse a correspondente informação.
Integração e controlo de som
Player de Música
Criámos um Player de Música e programámos os seguintes elementos:
- Knob de Volume ( aumenta ou diminui o volume com a interacção do rato, e rotação do respectivo Knob consoante o volume)
- Tempo total da música (Debaixo do Player, irá ser disposto o tempo total da música que está a ser ouvida)
- Tempo actual da musica (Debaixo do Player, irá ser disposto o tempo em qual música que está a ser ouvida se encontra)
- Nome da música (Em cima do Player, irá ser disposto o nome da música que está a ser ouvida)
- Botão de Stop (Irá parar a música que está a ser ouvida)
- Botão de Pause (Irá guardar o tempo em que a musica que estava a ser ouvida foi pausada, aparecendo o botão de Play para continuar a música)
- Botão de Play (Irá continuar ou recomeçar a música que está a ser ouvida - Continuar se a música tiver sido Pausada previamente; Recomeçar se a música tiver sido Parada previamente)
Contem 2 tipos de música:
- Música mais "Mexida":
- Andy McKee - Ebon Coast
- Andy McKee - Rylynn
- Andy McKee - Drifting
- Música mais "Calma":
- Debussy - Clair de lune
- Naruto Soundtrack - Sadness and Sorrow
- Yiruma - Kiss the Rain
Botões
Todos os botões serão programados para:
Carro
O carro "virtual" foi programado para:
- Quando pressionada a tecla W ou Seta para a frente, o carro desloca-se para a frente e produz o som Motor
- Quando pressionada a tecla S ou Seta para a baixo, o carro para, desloca-se para trás e produz o som CarStop
- Quando pressionada a tecla Barra de Espaço, o carro buzina, produzindo o som Buzina
- Quando o carro aparece em cena, é produzido o som MotorLigar
Escolha do idioma
Após a escolha do idioma, é produzido o som Startup
Animação
- No loading, há uma pequena animação de 2 engrenagem a rodar.
- O Carro "virtual" tem uma pequena animação de fumo a sair pelo escape, e a ilusão que o carro está ligado ( pequenos tremeliques )
- Após clicar em sair, sairá do canto superior direito um Diálogo de texto com a opção de sair ou não, escurecendo o fundo.
- Após clicar nas informações, o fundo escurece e aparecerá as informações.
Soluções técnicas adoptadas para a resolução de problemas
Encontrámos vários problemas ao longo do desenvolvimento da aplicação, mas todos foram superados. Sem contar com todos aqueles problemas de código dos botões, que estavam mal programados ou com códigos incorrectos, o nosso maior problema foi o Knob de Volume. Visto que queríamos um controlador de volume diferente, e queríamos que fosse um Knob, decidimos procurar o código em as2 para este. Após encontrarmos o código ( disponível nos Elementos de apoio da aplicação ), vimos que estava em as1. Tentámos converter para as2, mas tínhamos sempre o problema de o Knob rodar sempre que o rato estivesse dentro ou fora deste, enquanto que o correcto seria que o knob rodasse só quando o rato estivesse dentro deste. Depois de várias pesquisas sobre como converter AS1 para AS2 ( que foram inúteis ) decidimos converter nós próprios o código, e saímos com sucesso.
Os outros problemas foram a ComboBox, os ToolTip, o Scroller e o Player de música. O problema da ComboBox foi devido a distracções, pois todos os botões foram programados com _visible=true/false.
Quanto aos ToolTip, tivemos o problema de quando eram inseridos Componentes na livraria, o ToolTip aparecia, mas não desaparecia, ficando uma grande confusão no ecrã. Como inicialmente estávamos a pensar o usar um scroller onde era preciso o uso de componentes ( UIScrollBar ), tivemos que fazer um scroller doutra maneira.
Quanto ao Scroller, como foi explicado em cima, tivemos que arranjar um código de um Scroller sem componentes ( que não foi fácil encontrar ), e tivemos que o adaptar à nossa aplicação, aumentado a zona que ia ser controlada, como a posição do respectivo Scroller.
Finalmente, no Player de música, tivemos o problema de várias musicas tocarem ao mesmo tempo, e quando se voltava ao menu, havia sempre uma musica que iniciava. Atrasando a keyframe das actions do mesmo keyframe da labels do menu, este problema foi superado. Outro problema no player, que infelizmente não conseguimos resolver, é complicado de explicar e é o seguinte: Após aparecer o Player de música, automaticamente começar a tocar a música Ebon Coast. Imaginemos que aos 0:13 segundos mudamos para outra música. Se mudarmos de musica sempre até aparecer outra vez a musica Ebon Coast, o tempo actual irá aparecer, mas sobreposto aos 0:13 segundos.
Estes foram alguns dos problemas que tivemos que resolver, muitos outros foram insignificantes para serem aqui ditos.
Conclusões
Reflexão crítica
Após a conclusão deste projecto, sentimos um grande alívio por o termos conseguido acabar, pois não era um trabalho simples, mas algo com estrutura, algo elaborado. O nosso grande foco foi a interactividade. Aumentámos o máximo que podemos a interactividade, para proporcionar uma nova experiência ao utilizador, combinando informações precisas com entretenimento. Depois de todos os problemas que passamos, sabe bem saber que os conseguimos ultrapassar, duma ou doutra maneira.
Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto
A nível de aspecto, aperfeiçoávamos para algo mais moderno e diferente. E em relação à programação, aperfeiçoávamos o Player de música, alterando o código ou utilizando outros métodos, de modo a eliminar o pequeno erro descrito em cima.
No desenvolvimento de um futuro projecto iremos adoptar o mesmo método se definir metas, onde todas terão de ser cumpridas,e actualizar sempre o projecto. Assim o projecto será desenvolvido com organização, rigor e acabado a tempo.
Referências Web e Bibliográficas
Motor de busca
www.Google.com - Motor de busca que dispensa apresentações, usado em todas as pesquisas efectuadas.
Aplicações idênticas
http://jn.sapo.pt/multimedia/infografia970.aspx?content_id=1603113
http://jpn.icicom.up.pt/2010/10/14/scut_quanto_e_como_se_paga.html
http://jn.sapo.pt/PaginaInicial/Economia/Interior.aspx?content_id=1550857
Informações sobre as SCUT
http://pt.wikipedia.org/wiki/SCUT
http://www.estradas.pt/portagensfaq
http://www.viaverde.pt/Website/
http://Jn.sapo.pt/
http://fugirasscuts.blogspot.com/
Programação
http://www.gotoandlearnforum.com/
http://www.kirupa.com/
http://www.flashkit.com/
http://www.tutorialized.com/
http://happytutorials.com/
http://www.flashmove.com
Anexos
Legislação em Português
Tema Visual
Requisitos Funcionais
Legislação em Inglês
Apresentação a IDE
Informações, Preços e Formas de Pagamento
Mapa SCUT - Grande Porto
Mapa SCUT - Costa da Prata
Mapa SCUT - Norte Litoral
Alternativas SCUT
Diário de Bordo
Dia 22 de Novembro
- Escolha do Grupo;
- Conversa de Grupo ( Álvaro Ferreira conversa ao acaso sobre as SCUT e questiona quanto se paga de Aveiro ao Porto. Foi através desta simples pergunta que tivemos a ideia de criar esta aplicação que será bastante útil nos dias de hoje. );
- Escolha do tema da aplicação.
Dia 25 de Novembro
- Apresentação do tema ao professor Ivo de IDE;
- Comprovação do tema pelo professor Ivo de IDE;
- Início de "rascunhos mentais" sobre como iremos criar esta aplicação a nível visual e de programação.
Dia 26 de Novembro
- Criação da Página na Wiki;
- Elaboração da Memória Descritiva e Tema Visual;
- Envio do link da página Wiki aos docentes da Unidade Curricular LAB MM1 e IDE.
Dia 29 de Novembro
- Escolha dos tipos de fonte a usar na aplicação no Font squirrel;
- Escolha das paletes de cor a usar na aplicação através do Kuler.
Dia 30 de Novembro
- Pesquisa, investigação e análise de outras aplicações multimédia com objectivos e funcionalidades semelhantes (Estado de arte).
Dia 1 de Dezembro
- Criação da versão própria do tipo de letra Josefin Sans Std - Light.
Dia 2 de Dezembro
- Diálogo com o professor Ivo acerca das fontes e cores a utilizar, ao qual ele nos aconselhou a alterarmos o tipo de letra Josefin Sans Std - Light (Editado).
Dia 3 de Dezembro
- Criação da Identidade Visual da Aplicação e da Lista de Requisitos Funcionais a desenvolver.
Dia 5 de Dezembro
- Criação da estrutura arborescente da aplicação e do Logótipo.
Dia 7 de Dezembro
- Inicio da construção da aplicação;
- Construção do layout da aplicação;
- Criação dos botões necessário para o loading inicial, o menu inicial, e a concessão Norte Litoral e programação destes;
- Finalização da cena Loading;
- Pesquisa de todas as informações correspondentes a cada percurso da concessão Norte Litoral;
- Iniciação do menu inicial e da concessão Norte Litoral.
Dia 10 de Dezembro
- Finalização do menu inicial e da concessão Norte Litoral;
- Pesquisa sobre todas as informações sobre as SCUT.
Dia 13 de Dezembro
- Apresentação a IDE do trabalho em progresso.
Dia 15 de Dezembro
- Criação dos botões necessário para a concessão Grande Porto e programação destes;
- Pesquisa de todas as informações correspondentes a cada percurso da concessão Grande Porto;
- Iniciação da concessão Grande Porto;
- Vectorização do carro;
- Programação do carro.
Dia 20 de Dezembro
- Finalização da concessão Grande Porto;
- Criação e programação de um Scroller.
Dia 28 de Dezembro
- Criação dos botões necessário para a concessão Costa da Prata e programação destes;
- Pesquisa de todas as informações correspondentes a cada percurso da concessão Costa da Prata;
- Iniciação da concessão Costa da Prata.
Dia 2 de Janeiro
- Finalização da concessão Costa da Prata;
- Finalização de todos os conteúdos na aplicação (Só falta programar o som);
- Iniciação da construção do Template para IDE.
Dia 3 de Janeiro
- Criação do player de música e de todos os botões necessário para este;
- Pesquisa de músicas mais adequadas para esta aplicação;
- Escolha das seguintes músicas:
- Música mais "Mexida":
- Andy McKee - Ebon Coast
- Andy McKee - Rylynn
- Andy McKee - Drifting
- Música mais "Calma":
- Debussy - Clair de lune
- Naruto Soundtrack - Sadness and Sorrow
- Yiruma - Kiss the Rain
Dia 5 de Janeiro
- Procura de erros/bugs e correcção dos mesmos.
Dia 10 de Janeiro
- Adição de algumas funcionalidades como download das informações sobre as scut, botão de fullscreen, etc.
Dia 11 de Janeiro
- Conclusão do Template;
- Conclusão da aplicação no Flash;
- Organização do Relatório para entregar dia 14 de Janeiro;
- Preparação da apresentação do Projecto.
Dia 12 de Janeiro
- Entrega do Template e do FAHAV a IDE.
Dia 13 de Janeiro
- Conclusão do Relatório.
Dia 14 de Janeiro
- Entrega do Projecto Final a LAB MM1.
Dia 17 de Janeiro
- Apresentação do Projecto em público.
