T'sTable

From LABMM1_IDE

(Difference between revisions)
Jump to: navigation, search
(→Esquema de Cores)
 
(44 intermediate revisions not shown)
Line 1: Line 1:
=Grupo=
=Grupo=
   
   
-
 
[http://wikis.ua.pt/lab1ide/index.php/User:Adrianamendes ADRIANA NOGUEIRA MENDES N.ºMEC.:60293]
[http://wikis.ua.pt/lab1ide/index.php/User:Adrianamendes ADRIANA NOGUEIRA MENDES N.ºMEC.:60293]
Line 10: Line 9:
[http://wikis.ua.pt/lab1ide/index.php/User:Rubenramos RÚBEN TIAGO QUADROS RAMOS N.ºMEC.:60119]
[http://wikis.ua.pt/lab1ide/index.php/User:Rubenramos RÚBEN TIAGO QUADROS RAMOS N.ºMEC.:60119]
 +
 +
----
 +
=Sinopse=
 +
 +
O nosso grupo escolheu como tema o chá. É uma aplicação on-line onde os utilizadores têm acesso a algumas informações sobre chás conhecidos e outros mais raros bem como os seus efeitos na saúde humana.
 +
   
 +
Destinada a complementar os conhecimentos dos utilizadores já um pouco mais familiarizados com os chás. Com esta aplicação vão puder conhecer um pouco mais sobre os chás mais comuns e ficar provavelmente a conhecer outros tipos de chás. O ambiente desta aplicação pretende ser todo muito suave, tranquilo, quente e relaxante.
 +
Sendo a nossa aplicação sobre chás, decidimos atribuir como nome da aplicação “Tea’s Table” dado que esta se centra numa mesa.
 +
 +
Como o logótipo é um meio das pessoas se relembrarem da nossa aplicação, optamos por um logótipo muito simples. Após isto,
 +
pusemos de lado a ideia da chávena pois poderia confundir as pessoas para o café. Assim pensamos no principal ingrediente do chá,
 +
a folha. Dentro da folha está a letra T (tea), desenhada por nós.
 +
A continuação do nome da aplicação prolonga-se para o lado.
 +
 +
Inicialmente surge um ecrâ introdutório que inclui um relógio prestes a marcar as 17horas, o que só poderá acontecer quando o utilizador clicar no mesmo. Com esta accção, é transportado para um ecrã intermédio que dá a conhcer o ambiente da aplicação. Com uma aproximação à mesa será possível ao utilizador fazer ‘’roolover’’ sobre chávenas de chá o que lhe permitirá escolher o chá que pretende conhecer melhor.
 +
Se o utilizador clicar na borboleta que se encontra em cima da mesa vai poder ler os créditos da aplicação.
 +
 +
Após o clique em qualquer uma das chávenas surgirá um painel informativo com três separadores distintos: Origem, Fabrico e Efeitos.
 +
A ‘’Origem’’ terá conteúdos como, para além da sua origem, informações gerais sobre o chá em questão.
 +
No ‘’Fabrico’’ será possível ao utilizador conhecer ou aprofundar o processo de fabrico de determinado chá.
 +
È nos ‘’Efeitos’’ que surgirá intercaladamente a boneca e o urso de trapos que farão uma demonstração dos possíveis efeitos provocados pelo chá.
 +
 +
Perante a curiosidade dos scones de passas em cima da mesa, o utilizador  poderá ter acesso a um jogo.
 +
 +
Este jogo mostrará inicialmente uma receita: a dos scones de passas.
 +
Receita essa que o jogador terá que decorar pois esta desaparecerá.
 +
Seguidamente é transportado para uma cozinha onde poderá interagir com os vários ingredientes a fim de os colocar na ordem e quantidades correctas para que consiga terminar o jogo.
 +
 +
 +
----
=Memória descritiva=
=Memória descritiva=
O nosso grupo escolheu como tema o chá.
O nosso grupo escolheu como tema o chá.
-
É uma aplicação on line onde os utilizadores têm acesso a algumas informações sobre chás conhecidos e outros mais raros bem como os seus efeitos na saúde humana.
+
É uma aplicação on line onde os utilizadores têm acesso a informações sobre chás, respectivamente: origem, fabrico e efeitos. Assim, também, vai haver um pequeno jogo interactivo sobre os típicos "scones de passas" que, geralmente, aconpanham um chá.
-
Destinada a utilizadores já um pouco mais familiarizados com os chás. Com esta aplicação vão puder conhecer um pouco mais sobre os chás mais comuns e ficar provavelmente a conhecer outros tipos de chás.
+
Destinada a utilizadores curiosos sobre o tema do chá.  
-
O ambiente desta aplicação pretende ser todo muito suave, tranquilo e relaxante.
+
Com esta aplicação vão puder conhecer um pouco mais sobre os chás mais comuns e ficar, provavelmente, a conhecer outros tipos de chás.
 +
O ambiente desta aplicação pretende ser muito suave, tranquilo e relaxante.
 +
 +
----
=Diário de Bordo=
=Diário de Bordo=
Line 24: Line 56:
*25 de Novembro - Desenho funcional: identificação e descrição das funcionalidades, desenho da estrutura da aplicação, percursos,formas e meios de navegação/interacção.
*25 de Novembro - Desenho funcional: identificação e descrição das funcionalidades, desenho da estrutura da aplicação, percursos,formas e meios de navegação/interacção.
-
*29 de Novembro - Escolha dos chás a utilizar na aplicação e recolha da informação a eles relativa; definição da identidade visual.
+
*29 de Novembro - Escolha dos chás a utilizar na aplicação e definição da identidade visual.
*30 de Novembro - Desenho gráfico: criação do logótipo.
*30 de Novembro - Desenho gráfico: criação do logótipo.
Line 32: Line 64:
*6 de Dezembro - Produção de documentos de planificação: arborescência; Início da vectorização dos elementos multimédia.
*6 de Dezembro - Produção de documentos de planificação: arborescência; Início da vectorização dos elementos multimédia.
-
*7 de Dezembro - Desenho em papel dos ecrãs tipo.
+
*7 de Dezembro - Desenho em papel dos ecrãs tipo em papel.
 +
*8 de Dezembro - Discusão sobre as funcionalidades do jogo.
 +
 +
*10 de Dezembro - Início da vectorização dos elemtos da aplicação
 +
 +
*11 de Dezembro - Continuação das vecturizações.
 +
 +
*12 de Dezembro - Pesquisas sobre os chás.
 +
 +
*13 de Dezembro - Início da animação da 1ª parte (relógio).
 +
 +
*16 de Dezembro - Conclusão da animação da 1ª parte e finalização das vectorizações desta mesma parte.
 +
 +
*18 de Dezembro - Realização dos modle sheets das duas personagens.
 +
 +
*20 de Dezembro - Vectorização e animação da borboleta.
 +
 +
*27 de Dezembro - Início da vectorização dos ecrãs-tipo.
 +
 +
*28 de Dezembro - Continuação da vecturização dos ecrãns-tipo.
 +
 +
*29 de Dezembro - Conclusão da vecturização dos ecrãns-tipo.
 +
 +
*30 de Dezembro - Início da composição e programação do ecrã principal.
 +
 +
*4 de Janeiro - Continuação da composição e programação do ecrã principal.
 +
 +
*5 de Janeiro - Continuação da composição e programação do ecrã principal.
 +
 +
*6 de Janeiro - Conclusão da composição e programação do ecrã principal e encaixe com os ecrãns secundários.
 +
 +
*10 de Janeiro - Vectorização das componentes do jogo (ingredientes, utensílios de cozinha, etc.)
 +
 +
*11 de Janeiro - Início da realização do template.
 +
 +
*12 de Janeiro - Início da realização do template e actualização da wiki.
 +
 +
 +
----
=Estado da arte=
=Estado da arte=
Line 55: Line 125:
 +
----
=Identidade visual=
=Identidade visual=
 +
----
==Esquema de Cores==
==Esquema de Cores==
-
==Logótipo==
+
Optámos primeiramente por um esquema de cores Monocromático baseado no rosa.
 +
Contudo o logótipo sai um pouco deste esquema monocrómatico sendo composto por uma cor complementar, o verde.
 +
O esquema monocromático tornava a nossa aplicação um bocadinho sufocante, por isso optámos por este esquema de cores:
 +
[[File:Cores_novas_ttable.jpg]]
-
[[File:Logotipo(T`sTable)_-_Cópia.jpg|left|230px|alt=T's Table]]
 
 +
----
 +
 +
==Logótipo==
 +
 +
[[File:Logotipo_ttable_copy.jpg]]
Sendo a nossa aplicação sobre chás, decidimos atribuir como nome da aplicação “Tea’s Table” dado que a esta se centra numa mesa.
Sendo a nossa aplicação sobre chás, decidimos atribuir como nome da aplicação “Tea’s Table” dado que a esta se centra numa mesa.
Assim, começamos por criar o logótipo. Como o logótipo é um meio das pessoas se relembrarem da nossa aplicação, optamos por um logótipo muito simples.  
Assim, começamos por criar o logótipo. Como o logótipo é um meio das pessoas se relembrarem da nossa aplicação, optamos por um logótipo muito simples.  
-
 
+
Após isto, pusemos de lado a ideia da chávena pois poderia confundir as pessoas para o café. Assim pensamos no principal ingrediente do chá, a folha. Dentro da folha está a letra T (tea), desenhada por nós com o mesmo traço gráfico que irão ter o resto dos elementos da aplicação. A continuação do nome da aplicação situa-se abaixo da folha.
-
Após isto, pusemos de lado a ideia da chávena pois poderia confundir as pessoas para o café. Assim pensamos no principal ingrediente do chá, a folha. Dentro da folha está a letra T (tea), desenhada por nós com o mesmo traço gráfico que irão ter o resto dos elementos da aplicação. A continuação do nome da aplicação situa-se abaixo da folha. Realizado isto, pensamos que faltava alguma coisa, foi aí que surgiu a ideia do círculo que seria a chávena, dando-nos a sensação de que o logótipo está a sair da própria chávena.
+
A  cor que utilizamos foi o verde, pois é a cor da folha, ingrediente principal do chá. Para além disso, o verde centra-nos para Natureza, sendo uma das palavras-chave da nossa aplicação, pois os chás que abordamos são todos naturais.
A  cor que utilizamos foi o verde, pois é a cor da folha, ingrediente principal do chá. Para além disso, o verde centra-nos para Natureza, sendo uma das palavras-chave da nossa aplicação, pois os chás que abordamos são todos naturais.
-
 
Em relação a tipografia, tal como referi acima, o “T” foi desenhado por nós. Sendo o traço um pouco trabalhado, decidimos utilizar uma tipografia mais simples para a continuação do nome da aplicação para que não se tornasse demasiado confuso.
Em relação a tipografia, tal como referi acima, o “T” foi desenhado por nós. Sendo o traço um pouco trabalhado, decidimos utilizar uma tipografia mais simples para a continuação do nome da aplicação para que não se tornasse demasiado confuso.
 +
 +
 +
----
 +
==Tipografia==
 +
 +
Tipografia Principal: MetaNormal
 +
 +
Tipografia Secundária: Calibri
 +
 +
O grupo optou por escolher MetaNormal, tipografia desenvolvida por Erik Spiekermann, para representar os títulos. Sendo uma tipografia simples, facilita a leitura ao leitor.
 +
Relativamente aos textos, escolhemos Calibri, tipografia desenvolvida pela empresa Microsoft para o Microsoft Office 2007. De novo, simples e de fácil leitura, sendo mais fácil conjugá-la com Meta.
 +
 +
 +
----
 +
==Botões==
 +
 +
Inicialmente pensámos usar a metáfora dos scones:
 +
 +
[[File:Botoes_ttable.jpg]]
 +
 +
Mas, devido às tonalidades, acabámos por mudar, ficando assim:
 +
 +
[[File:Botoes_novos_ttable.jpg]]
 +
 +
 +
----
=Lista de requisitos funcionais=
=Lista de requisitos funcionais=
-
*Inicialmente surge-nos um cenário simples com duas cadeiras e uma mesinha de jardim tipica de chá; o fumo sai das chávenas.
+
*Primeiramente apareçe um relógio a dar a 5 horas.
 +
 
 +
*Depois surge-nos um cenário simples com duas cadeiras e uma mesinha de jardim tipica de chá; o fumo sai das chávenas.
 +
 
 +
*Ocorre uma ampliação até ao topo da mesa onde se destacam as chávenas e um pratinho de scones de passas.
-
*Ocorrre uma ampliação até ao topo da mesa onde se destacam as chávenas e um pratinho de bolinhos.
+
*Quando o utilizador passa o rato sobre as chávenas as colheres presentes mexem o chá e o abrir do botão leva-nos a uma janela com características do chá, origem e efeitos na saúde que se demonstram no ursinho e na boneca que nos surge ao lado do ecrã.
-
*Quando o utilizador passa o rato sobre as chávenas as colheres presentes mexem o chá e o abrir do botão leva-nos a uma janela com caracteristicas do chá, origem e efeitos na saúde que se demonstram no ursinho e na boneca que nos surge ao lado do ecrã.
+
*Os scones são outra aplicação que à passagem do rato surgem trincados e que ao clicar leva-nos a um jogo baseado na sua receita..
-
*Os bolinhos são outra aplicaçao que à passagem do rato surgem trincados e que ao clicar aparecem curiosidades.
 
 +
----
=Arborescência=
=Arborescência=
 +
[[File:arborescencia_cha.jpg|center|1300px|alt=Example alt text|Arborescencia]]
-
[[File:Arborescencia_cha.jpg|1280px|alt=Example alt text|Arborescência]]
 
 +
----
=Ecrãs Tipo=
=Ecrãs Tipo=
 +
 +
Feitos no papel:
<center>
<center>
[[File:Ecras_tipo0002_-_Cópia.jpg|600px|alt=Example alt text|Ecrã 1]]
[[File:Ecras_tipo0002_-_Cópia.jpg|600px|alt=Example alt text|Ecrã 1]]
Line 102: Line 212:
[[File:Ecras_tipo0006_-_Cópia.jpg||615px|alt=Example alt text|Ecrã 4]]
[[File:Ecras_tipo0006_-_Cópia.jpg||615px|alt=Example alt text|Ecrã 4]]
</center> <br><br>
</center> <br><br>
 +
 +
Finalizados:
 +
<center>
 +
[[File:Ecran_relogio_ttable_copy.jpg]]
 +
 +
 +
[[File:Ecran_principal_ttable_copy.jpg]]
 +
 +
 +
[[File:Ecran_informacoes_ttable.jpg]]
 +
 +
 +
[[File:Ecran_receita_ttable_copy.jpg]]
 +
 +
 +
[[File:Ecran_cozinha_ttable_copy.jpg]]
 +
</center> <br><br>
 +
 +
 +
 +
----
 +
=Elementos vectorizados=
 +
 +
[[File:Vecturizacoes_ttable.jpg]]
 +
 +
 +
----
 +
=Template=
 +
 +
[[File:Template_ttable.jpg|center|900px|alt=Example alt text|Template]]
 +
 +
----
 +
=Relatório de LAD MM 1=
 +
 +
[[Media:relatorio_ttable.pdf]
 +
 +
----
 +
=Resultado final=
 +
 +
[[File:Final_t_table.swf]]
 +
 +
 +
----
 +
O Grupo T's Table deseja-lhe um excelente dia! Até Breve!
 +
----

Latest revision as of 23:15, 14 January 2011

Contents

Grupo

ADRIANA NOGUEIRA MENDES N.ºMEC.:60293

ALEXANDRA FILIPA PEREIRA TAVARES N.ºMEC.:60710

SANDRINE RIBEIRO PINTO N.ºMEC.:60385

RÚBEN TIAGO QUADROS RAMOS N.ºMEC.:60119


Sinopse

O nosso grupo escolheu como tema o chá. É uma aplicação on-line onde os utilizadores têm acesso a algumas informações sobre chás conhecidos e outros mais raros bem como os seus efeitos na saúde humana.

Destinada a complementar os conhecimentos dos utilizadores já um pouco mais familiarizados com os chás. Com esta aplicação vão puder conhecer um pouco mais sobre os chás mais comuns e ficar provavelmente a conhecer outros tipos de chás. O ambiente desta aplicação pretende ser todo muito suave, tranquilo, quente e relaxante. Sendo a nossa aplicação sobre chás, decidimos atribuir como nome da aplicação “Tea’s Table” dado que esta se centra numa mesa.

Como o logótipo é um meio das pessoas se relembrarem da nossa aplicação, optamos por um logótipo muito simples. Após isto, pusemos de lado a ideia da chávena pois poderia confundir as pessoas para o café. Assim pensamos no principal ingrediente do chá, a folha. Dentro da folha está a letra T (tea), desenhada por nós. A continuação do nome da aplicação prolonga-se para o lado.

Inicialmente surge um ecrâ introdutório que inclui um relógio prestes a marcar as 17horas, o que só poderá acontecer quando o utilizador clicar no mesmo. Com esta accção, é transportado para um ecrã intermédio que dá a conhcer o ambiente da aplicação. Com uma aproximação à mesa será possível ao utilizador fazer ‘’roolover’’ sobre chávenas de chá o que lhe permitirá escolher o chá que pretende conhecer melhor. Se o utilizador clicar na borboleta que se encontra em cima da mesa vai poder ler os créditos da aplicação.

Após o clique em qualquer uma das chávenas surgirá um painel informativo com três separadores distintos: Origem, Fabrico e Efeitos. A ‘’Origem’’ terá conteúdos como, para além da sua origem, informações gerais sobre o chá em questão. No ‘’Fabrico’’ será possível ao utilizador conhecer ou aprofundar o processo de fabrico de determinado chá. È nos ‘’Efeitos’’ que surgirá intercaladamente a boneca e o urso de trapos que farão uma demonstração dos possíveis efeitos provocados pelo chá.

Perante a curiosidade dos scones de passas em cima da mesa, o utilizador poderá ter acesso a um jogo.

Este jogo mostrará inicialmente uma receita: a dos scones de passas. Receita essa que o jogador terá que decorar pois esta desaparecerá. Seguidamente é transportado para uma cozinha onde poderá interagir com os vários ingredientes a fim de os colocar na ordem e quantidades correctas para que consiga terminar o jogo.


Memória descritiva

O nosso grupo escolheu como tema o chá. É uma aplicação on line onde os utilizadores têm acesso a informações sobre chás, respectivamente: origem, fabrico e efeitos. Assim, também, vai haver um pequeno jogo interactivo sobre os típicos "scones de passas" que, geralmente, aconpanham um chá. Destinada a utilizadores curiosos sobre o tema do chá. Com esta aplicação vão puder conhecer um pouco mais sobre os chás mais comuns e ficar, provavelmente, a conhecer outros tipos de chás. O ambiente desta aplicação pretende ser muito suave, tranquilo e relaxante.


Diário de Bordo


Estado da arte

No site: Favourite Website Awards (fwa) cujo endereço é: http://thefwa.com/


• http://www.nespresso.com/tanzaru/

Ao pesquisar no fwa o grupo encontrou uma aplicação multimedia :”tanzaru” um café da marca nespresso. O que chamou a atenção do grupo para esta aplicação foi o ambiente harmonioso que procuramos integrar na nossa aplicação, a variedade de sons existentes e a interactividade com os mesmos como é o exemplo de, ao passar o rato sobre os nenufares, toca um xilofone, os movie clips que nos deram a ideia de colocar algumas borboletas a voar na nossa aplicação, a forma interactiva como está exposta a informação e ainda as transições entre cada janela. Gostámos particularmente da diversidade de animações integrada de forma muito sincronizada com os sons e pensámos ainda utilizar a ideia da transformação do fruto em árvore e da mesma em planta que pensámos utilizar mas com a planta do chá.

• http://www.perrier-jouet.com/#/en/the-house/since-1811/a-love-story

Este site fala-nos de um produto: o champanhe Perrier Jouët, é um site muito glamoroso. Este site despertou a nossa atenção devido ao design das flores e animação das mesmas a quando das transições juntamente com a música escolhida. È uma ideia a considerar no nosso projecto. Gostámos particularmente da forma como está a distribuição da informação:simples e clara. É uma aplicação bastante informativa e a forma como a informação está apresentada desperta o interesse acerca do produto: o champanhe. Gostámos do ambiente de harmonia que transmite, ideia que procuramos para a nossa aplicação e do video explicativo que a aplicação contém.


Identidade visual

Esquema de Cores

Optámos primeiramente por um esquema de cores Monocromático baseado no rosa. Contudo o logótipo sai um pouco deste esquema monocrómatico sendo composto por uma cor complementar, o verde. O esquema monocromático tornava a nossa aplicação um bocadinho sufocante, por isso optámos por este esquema de cores:

Cores novas ttable.jpg


Logótipo

Logotipo ttable copy.jpg

Sendo a nossa aplicação sobre chás, decidimos atribuir como nome da aplicação “Tea’s Table” dado que a esta se centra numa mesa.

Assim, começamos por criar o logótipo. Como o logótipo é um meio das pessoas se relembrarem da nossa aplicação, optamos por um logótipo muito simples. Após isto, pusemos de lado a ideia da chávena pois poderia confundir as pessoas para o café. Assim pensamos no principal ingrediente do chá, a folha. Dentro da folha está a letra T (tea), desenhada por nós com o mesmo traço gráfico que irão ter o resto dos elementos da aplicação. A continuação do nome da aplicação situa-se abaixo da folha.

A cor que utilizamos foi o verde, pois é a cor da folha, ingrediente principal do chá. Para além disso, o verde centra-nos para Natureza, sendo uma das palavras-chave da nossa aplicação, pois os chás que abordamos são todos naturais. Em relação a tipografia, tal como referi acima, o “T” foi desenhado por nós. Sendo o traço um pouco trabalhado, decidimos utilizar uma tipografia mais simples para a continuação do nome da aplicação para que não se tornasse demasiado confuso.


Tipografia

Tipografia Principal: MetaNormal

Tipografia Secundária: Calibri

O grupo optou por escolher MetaNormal, tipografia desenvolvida por Erik Spiekermann, para representar os títulos. Sendo uma tipografia simples, facilita a leitura ao leitor. Relativamente aos textos, escolhemos Calibri, tipografia desenvolvida pela empresa Microsoft para o Microsoft Office 2007. De novo, simples e de fácil leitura, sendo mais fácil conjugá-la com Meta.


Botões

Inicialmente pensámos usar a metáfora dos scones:

Botoes ttable.jpg

Mas, devido às tonalidades, acabámos por mudar, ficando assim:

Botoes novos ttable.jpg


Lista de requisitos funcionais


Arborescência

Example alt text


Ecrãs Tipo

Feitos no papel:

Example alt text Example alt text



Example alt text Example alt text



Finalizados:

Ecran relogio ttable copy.jpg


Ecran principal ttable copy.jpg


Ecran informacoes ttable.jpg


Ecran receita ttable copy.jpg


Ecran cozinha ttable copy.jpg




Elementos vectorizados

Vecturizacoes ttable.jpg


Template

Example alt text

Relatório de LAD MM 1

[[Media:relatorio_ttable.pdf]

Resultado final

File:Final t table.swf


O Grupo T's Table deseja-lhe um excelente dia! Até Breve!

Retrieved from "http://wikis.ua.pt/lab1ide/index.php?title=T%27sTable"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox