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 empresa externa: 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 nao se adequava muito onde o iriamos utilizar( visto que é um tipo de letra fino, e seria imperceptível quando usado em letras pequenas). Por isto, já nao 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 combo box 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:
- Andy McKee - Ebon Coast
- Andy McKee - Rylynn
- Andy McKee - Drifting
- 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
Integração e controlo de som
Animação
Soluções técnicas adoptadas para a resolução de problemas
Conclusões
Reflexão crítica
Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projecto
Referências Web e Bibliográficas
Anexos
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:
- Andy McKee - Ebon Coast
- Andy McKee - Rylynn
- Andy McKee - Drifting
- 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
- Adicçã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;
- Preparação para a apresentação do Projecto.
