tag:blogger.com,1999:blog-5181643199183701652024-03-13T15:41:52.337-07:00Oficina de Produção em Mídias Digitais - Grupo J.E.M.S.Unknownnoreply@blogger.comBlogger8125tag:blogger.com,1999:blog-518164319918370165.post-52564789205844177262014-06-26T18:00:00.000-07:002014-06-26T18:40:31.078-07:00Avaliação Final<div style="text-align: justify;">
<b>01 - Justifique o item desenvolvido por sua equipe como um produto multimídia.</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O item desenvolvido pela minha equipe foi um infográfico interativo
sobre Dragon Ball, tendo como objetivo mostrar uma aplicação da
transmídia. Para melhor se entender o porquê de ser um produto multimídia, é
necessário vermos sua definição:<br />
<b> </b></div>
<div style="text-align: justify;">
<b></b></div>
<div style="font-size: 10.5pt; margin-left: 35pt; text-align: justify;">
“Multimédia é a combinação, controlada por computador, de pelo menos um
tipo de mídia estática (texto, fotografia, gráfico), com pelo menos um
tipo de média dinâmica (vídeo, áudio, animação).” (Chapman & Chapman
2000 e Fluckiger 1995).<br />
</div>
<div style="text-align: justify;">
Analisando assim, podemos inferir que o produto desenvolvido é um
produto multimídia devido ao fato de ser criado para uso em computador e
equipamentos digitais com interatividade com o usuário, fazendo uso de
imagens, sons e textos.<br />
<br />
<b>02 - Explique a arquitetura de seu produto (arquitetura de software e da aplicação) e a respectiva definição da interface gráfica empregada.</b><br />
<br />
Em nosso trabalho, optamos por utilizar o software Adobe Flash Catalyst,
pois possui uma interface bastante similar a do <i>Adobe Flash</i> e requer
nenhum conhecimento de programação.<br />
<br />
O Flash Catalyst é uma ferramenta de produção intermediária entre o
Designer e o Desenvolvedor. É utilizado para o desenvolvimento de
aplicações interativas como websites ou aplicações desktops e serve para
converter arquivos do Photoshop, Illustrator e Fireworks em documentos
de desenvolvimento do Flash Builder. Você pode “desenhar” uma interface e
dar vida a ela com esse programa.<br />
<br />
No próprio Flash Catalyst, é possível criar interações, <i>states</i>, alterar a
opacidade, <i>zoom in</i> e <i>out</i>, adicionar botões e sliders. Facilmente
pode-se adicionar transições, alterar o tamanho do objeto,
rotacionar ou movê-lo. Isso deixa a aplicação melhor para que o designer
prepare as interações que o desenvolvedor irá adicionar.<br />
<br />
É possível, por exemplo, criar um site todo no Photoshop, Illustrator ou
Fireworks separando em camadas, e através do Flash Catalyst importar o arquivo e faz a interação do site através dos componentes.<br />
<br />
O Flash Catalyst exporta o que criamos visualmente diretamente para o
código Flex(Action Script 3.0), pode-se criar as estruturas simples e
através do código melhorar ainda mais se utilizado junto com o programa
Adobe Flash Builder. Além disso, podemos exportar os arquivos como .SWF e
como .AIR.<br />
<br />
A Arquitetura do nosso projeto é baseada no infográfico interativo da
Copa de 2010 (<a href="http://www.marca.com/deporte/futbol/mundial/sudafrica-2010/calendario-english.html">http://www.marca.com/deporte/futbol/mundial/sudafrica-2010/calendario-english.html</a>)
e utiliza a forma circular onde no centro é exibido o conteúdo.<br />
<br />
Optamos por utilizar a identidade visual o estilo ‘Flat Design’, que é
uma tendência que está ganhando muito destaque atualmente. Nos livramos
de efeitos adicionais como bordas, gradientes, sombras e reflexos.<br />
<br />
O foco principal foi nos ícones, na cor e na tipografia. Usa-se muitos
elementos de interface de usuário simples, como botões e ícones. Muitas
vezes, são formas simples, como retângulos, círculos ou quadrados. Mas é necessário que não se confunda elementos simples com um design simples. O produto desenvolvido com o ‘Flat Design' é simples por natureza, deixando as cores,
elementos e texto falarem por si, trazendo essa clareza na identidade
visual.<br />
<br />
Utilizamos as cores quentes que retiramos da identidade visual da logo
do Anime ‘Dragon Ball’. Pode-se afirmar que o nosso produto além de
possuir um Design Flat, também é considerado minimalista, por contar
apenas os elementos essenciais que tornam possíveis a compreensão do
conteúdo.<br />
<br />
Adicionar apenas o que é necessário e retirar o excesso sempre foi o
foco do design tradicional japonês. Se olharmos para a antiga
arquitetura japonesa e design de interiores, veremos que havia poucas
flores, opções de cores e um design simples e linhas e formas limpas.<br />
<br />
A cultura japonesa é baseada na simplicidade. Tudo a partir de como o
alimento é preparado, a forma como ele é apresentado, a maneira certa de
comê-lo, as cerimônias de chá e jardins de pedra - todos colocam o foco
na simplicidade e foco para a atividade em questão. Naturalmente, os
designers minimalistas foram influenciados pelo design tradicional
japonês. </div>
<br />
<b>03 - Descreva o processo de desenvolvimento do produto do ponto de vista de implementação, destacando sua participação nas diversas etapas realizadas. </b><br />
<br />
<div style="text-align: justify;">
Na fase de implementação, começamos pela criação de um infográfico linear com o software Catalyst. Esse infográfico, apesar de ainda não possuir uma interação satisfatória, serviu para visualisarmos a disposição das informações. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Meu principal papel nesse processo, além do de gerência de equipe, foi na parte de pesquisa e organização de conteúdo. E, para isso, inicialmente, busquei textos e outras referências visuais que servissem de base para construção da trajetória transmidiática do anime escolhido. Vários materiais foram encontrados, nos mais diversos idiomas, sobretudo no que diz respeito à descrição da narrativa em sua totalidade ou sobre as relações interpessoais entre os personagens da trama. Todavia, esse não era o foco primordial da pesquisa, que se tratava de encontrar a evolução do mangá/anime transportada para as múltiplas formas midiáticas. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Um infográfico estático espanhol, que se encontra abaixo, foi o que melhor nos serviu como orientação inicial para a elaboração do conteúdo do nosso material interativo. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<img alt="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4asajiXqq7cQuGPdFG0DZZ8FEkerj3HS1C4JiO0IRiLJHDEe7qhFMUEEbOMqOOkpOcMYgDGcaEewYphLhajUJWIBWPA3HD3G1KaVXi7U31odj769amIAufLNEG3JW0LNglUnwihPKPbM/s1600/Dragon+Ball+est%C3%A1+de+fiesta.jpg" class="decoded" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4asajiXqq7cQuGPdFG0DZZ8FEkerj3HS1C4JiO0IRiLJHDEe7qhFMUEEbOMqOOkpOcMYgDGcaEewYphLhajUJWIBWPA3HD3G1KaVXi7U31odj769amIAufLNEG3JW0LNglUnwihPKPbM/s640/Dragon+Ball+est%C3%A1+de+fiesta.jpg" width="620" /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sendo assim, com ele e textos descritivos, junto a uma colega de equipe, parti para seleção dos pontos mais relevantes do mote, resumindo e complementando trechos dos textos, para enfim elaborar a versão final escrita que foi para o infográfico.<br />
<br />
A pesquisa resultante ficou bastante extensa e completa, estruturada nos tópicos: mangá, anime, filmes, jogos, produtos diversos, livros e música. Além disso, foram feitos muitos cruzamentos entre subitens de cada um dos tópicos citados, orientados a partir de data, saga e pontos-chave da trama. Entretanto, por limitações da ferramenta e de conhecimento por parte da equipe, não foi possível implementar todo o emaranhado de ligações.<br />
<br />
Por fim, a ultima parte da seleção de conteúdo, foi obter imagens que ilustrassem cada tópico.<br />
<br />
Enquanto estava cuidando dessa parte, outros membros da equipe desenvolviam a identidade visual e interativa do infográfico, optando por um design flat, como citado na questão anterior, e abrindo mão dos cruzamentos mais elaborados, que foram apresentados no roteiro. Porém, vale ressaltar que cada mudança feita no momento da implementação foi pensada em conjunto por toda a equipe.</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-518164319918370165.post-78686886601915172842014-06-04T10:27:00.000-07:002014-06-09T10:30:28.033-07:00Vídeo final do Produto<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/V8cHvKGDat8?feature=player_embedded' frameborder='0'></iframe></div>
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-518164319918370165.post-20319126778481268492014-05-05T19:34:00.000-07:002014-05-05T20:08:40.283-07:00Novo Projeto Multimídia<div class="Normal1" style="line-height: 150%;">
<a href="https://www.blogger.com/blogger.g?blogID=518164319918370165" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=518164319918370165" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=518164319918370165" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=518164319918370165" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><b><span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">1. Problema
inicial</span></b><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 36.0pt;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">Na
atualidade, a cultura pop norte-americana experimenta uma realidade
relativamente fora do comum, se comparada a muitos anos atrás, trata-se da
‘multiplataforma midiática’. Mas, o que seria isso? Não assistimos mais a um
filme somente nos cinemas ou em vídeo, tampouco sua história acabada com o
início dos créditos finais. Ela ganha novas mídias. Vira jogo, livro, animações
etc. Os Vingadores, O Senhor dos Anéis, Harry Potter são alguns exemplos dessa
nova configuração.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 36.0pt;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">Contudo, é
importante ressaltar que isso, utilizado nas últimas décadas como estratégia
comercial pela indústria de entretenimento norte-americana, a cultura oriental
já fazia há muito tempo com seus famosos <i>mangás</i>
e <i>animes</i>.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 36.0pt;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">Porém, o
que é pouco ou não percebido em meio a essa prática é que ela possui nome e
conceito, que cada vez mais sendo apresentada como objeto de estudo para muitos
pesquisadores na área de tecnologia, comunicação, sociologia etc., a então
chamada de Transmídia.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 36.0pt;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">Basicamente,
Transmídia é uma forma de usar várias mídias para reforçar um mesmo tema ou
história. Por exemplo: quando o filme Matrix é assistido, gera-se um primeira
visão da história e dos personagens. Ao se jogar o <i>game</i>, apesar da mudança de alguns personagens, a atmosfera adiciona
uma nova dinâmica a narrativa, oferecendo um entendimento mais imersivo por
meio da interação. Já se é lido os livros, que discorrem sobre o mesmo enredo,
são percebidos detalhes que vão solidificado a compreensão inicial do filme que
fora assistido. Assim funciona a Transmídia.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 36.0pt;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">Segundo
Henry Jenkins, “uma história Transmídia desenrola-se através de múltiplas
plataformas de mídia, com cada novo texto contribuindo de maneira distinta e
valiosa para o todo.” (Jenkins, 2006).</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 36.0pt;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">Nesse contexto,
uma falta que se nota é a assimilação pelos jovens que utilizam esses produtos,
seja no oriente ou no ocidente, dessa prática que os rodeia. Sendo assim, uma
forma simples, objetiva e divertida de mostrar a Transmídia entre filmes,
jogos, desenhos e outros é o desafio e a problemática, pois os textos que
tratam de sua definição e apreciação tendem a ser formais, acadêmicos e pouco
atrativos para os jovens que esses
produtos.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
<b><span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">2. O
Produto</span></b><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; margin-left: 18.0pt; text-align: justify;">
<b><span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">2.1 Produto base - Infográfico Interativo.</span><o:p></o:p></b></div>
<div class="Normal1" style="line-height: 150%; margin-left: -1.45pt; text-align: justify; text-indent: 19.45pt;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">Um gráfico de informação interativa é uma
representação visual de informação que integra diferentes modos - por exemplo,
imagem (que é o elemento constitutivo), texto escrito, som, disposição - em um
todo coerente e oferece pelo menos uma opção de navegação para controlar o
gráfico; sua função comunicativa é o de informar, por exemplo, por descrever ou
explicar algo ou narrar uma história factual. Infográficos interativos são
representações de informações que permitem que o espectador interaja com os
dados de forma sobreposicional ou conectivo. Como tal, eles são um tipo
diferente de infografia estática. Os infográficos interativos geralmente têm
muito mais dados que os estáticos, e possibilitam que o espectador descubra os
dados por conta própria. Infográficos interativos permitem que os usuários
explorem um conjunto de dados por si, fornecendo detalhes sobre passar do mouse
ou pan e zoom.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 18.0pt;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">Infográficos
interativos são eficientes para explanarem sobre assuntos com dados divididos
em diversas categorias. </span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify;">
<br /></div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 18.0pt;">
<b><span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">2.2 Objeto de exemplo - Anime Dragon Ball</span><o:p></o:p></b></div>
<div class="Normal1" style="line-height: 150%; margin-bottom: 6.0pt; margin-left: 0cm; margin-right: 0cm; margin-top: 6.0pt; text-align: justify; text-indent: 18.0pt;">
<b><i><span style="background: white; font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt; mso-highlight: white;">Dragon Ball</span></i></b><span style="background: white; font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt; mso-highlight: white;"> (ドラゴンボール , <i>Doragon Bōru</i>) é um mangá criado por <b>Akira Toriyama</b> e publicado em 42 volumes, inicialmente na revista <i>Weekly Shōnen Jump</i>, a partir de 1984. O
mangá deu origem a duas séries de anime que tiveram um enorme sucesso, tanto no
Japão como no resto do mundo: <i>Dragon Ball</i>,
<i>Dragon Ball Z</i> e ainda <i>Dragon Ball GT</i>, uma terceira série cuja
história não se baseia no mangá. Com elementos da mitologia chinesa (a história
é baseada na lenda chinesa Viagem ao Oeste (西遊記), Akira criou um mundo
fantasioso, com lutas espetaculares, poderes, aventuras incríveis, dragões,
máquinas futurísticas, alienígenas e qualquer coisa que sua imaginação
permitisse. </span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; margin-bottom: 6.0pt; margin-left: 0cm; margin-right: 0cm; margin-top: 6.0pt; text-align: justify; text-indent: 18.0pt;">
<span style="background: white; font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt; mso-highlight: white;">Em 2006, Toriyama e Eiichiro Oda, autor
de One Piece publicaram um one-shot intitulado <b>Cross Epoch</b>, onde personagens de Dragon Ball e One Piece
protagonizaram um crossover.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; margin-bottom: 6.0pt; margin-left: 0cm; margin-right: 0cm; margin-top: 6.0pt; text-align: justify; text-indent: 18.0pt;">
<span style="background: white; font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt; mso-highlight: white;">Uma adaptação do OVA Dragon Ball Ossu!
Kaette Kita Son Gokū to Nakama-tachi foi ilustrada por Ooishi Naho e publicada
no especial de 40 anos da Shonen Jump, foi anunciado em Novembro de 2010 que
Naho ira ilustrar o mangá Dragon Ball SD (Super deformed), trata-se de uma
releitura da infância de Goku para a revista infantil Super Strong Jump, antes
do anúncio de Dragon Ball SD, havia um boato que Toriyama faria um mangá para
promover o jogo Dragon Ball Online.</span><o:p></o:p></div>
<div align="center" class="Normal1" style="line-height: 150%; margin-bottom: 6.0pt; margin-left: 0cm; margin-right: 0cm; margin-top: 6.0pt; text-align: center;">
<!--[if gte vml 1]><v:shapetype id="_x0000_t75"
coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe"
filled="f" stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="image02.jpg" o:spid="_x0000_i1025" type="#_x0000_t75"
alt="Dragon-Ball-Imagem-1.jpg" style='width:385.5pt;height:240.75pt;
visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\ELTOND~1.ELT\AppData\Local\Temp\msohtmlclip1\01\clip_image001.jpg"
o:title="Dragon-Ball-Imagem-1"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; margin-bottom: 6.0pt; margin-left: 0cm; margin-right: 0cm; margin-top: 6.0pt; text-align: justify; text-indent: 36.0pt;">
<span style="background: white; font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt; mso-highlight: white;">O anime <i>Dragon Ball</i> é baseado nos 16 primeiros volumes do mangá criado por
Akira Toriyama em 1984, e é a primeira parte dos animes da série Dragon Ball,
sendo seguido por Dragon Ball Z e depois por Dragon Ball GT. A saga denominada
como "GT" só surgiu na versão para anime (saga filler), pois no mangá
original (oriental) toda a saga foi chamada de Dragon Ball,enquanto no mangá
ocidental,o que seria "Dragon Ball - Volume 17" na versão original,ficou
"Dragon Ball Z - Volume 1",devido ao fato da série em anime ter
recebido tal título ao chegar naquela etapa do mangá.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; margin-bottom: 6.0pt; margin-left: 0cm; margin-right: 0cm; margin-top: 6.0pt; text-align: justify; text-indent: 36.0pt;">
<span style="background: white; font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt; mso-highlight: white;">Ainda existe a série <i>Dragon Ball Kai</i>, que é o <i>remake</i>
da série de animação japonesa <i>Dragon Ball
Z, </i>totalmente remasterizado em HD, anunciado em fevereiro de 2009 pela Toei
Animation. Kai significa revisão, nada mais sendo que uma nova versão editada
por Akira Toriyama para comemorar os 20 anos de <i>Dragon Ball Z.</i></span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<b><span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">3. Porque?</span></b><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 36.0pt;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">Mediante a
questão esplanada no início deste projeto, encontramos o porquê criar um
produto interessante e atraente que mostre aos jovens a definição de Transmídia
através de produtos que eles já consomem.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;"> Para melhor exemplificar a
Transmídia para os jovens da cultura pop, para ser mais específico, os otakus.
Optamos por fazer um infográfico interativo usando um exemplo do que eles
gostam, no caso o Dragon Ball e assim mostrar que eles já vivem a Transmídia na
prática mesmo não reconhecendo-a com tal.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<b><span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">4. Para
quem?</span></b><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 36.0pt;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">O público
que se relaciona a temática “Transmídia”, seja como estudo, seja
entretenimento, é bastante amplo e diversificado. Para este experimento,
contudo, foi delimitado o segmento que corresponde a jovens brasileiros que se
valem de produtos transmidiáticos advindos da cultura pop japonesa para
obtenção de distração prazerosa, ou seja, os chamados <i>otakus</i>.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 36.0pt;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">A partir de
pesquisa em artigos acadêmicos direcionados ao assunto, foi possível traçar o
perfil desses jovens, que se caracteriza por possuir faixa etária média entre
16 e 34 anos; ter o costume de fazer coleções e adquirir conhecimento
especializado sobre seus bens culturais favoritos, contudo sem tender ao
fanatismo; são fascinados por tecnologias digitais; e apreciam participar e
promover encontros e convenções de socialização e trocas de experiências.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<b><span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">5.
Identidade Visual</span></b><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%; text-indent: 36.0pt;">
<b><span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">5.1 Design</span><o:p></o:p></b></div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 36.0pt;">
<div class="Normal1" style="line-height: 150%; text-indent: 36pt;">
<span style="font-size: 12.0pt; line-height: 150%;">Optamos por utilizar a identidade
visual o estilo ‘Flat Design’, que é uma tendência que está ganhando muito
destaque atualmente. Nos livraremos de efeitos adicionais como bordas,
gradientes, sombras e reflexos. O foco principal será nos ícones, na cor e na
tipografia. <span style="background: white; mso-highlight: white;">Usa-se muitos
elementos de interface de usuário simples, como botões e ícones. Muitas vezes
são formas simples, como retângulos, círculos ou quadrados. Mas não confunda
elementos simples com um design simples. </span><o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">O produto produzido com o ‘Flat
Design é simples por natureza, deixando as cores, elementos e texto falarem por
si, trazendo essa clareza na identidade visual.<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<!--[if gte vml 1]><v:shapetype
id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t"
path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="image03.png" o:spid="_x0000_s1029" type="#_x0000_t75"
alt="8abf847bb26774a2262e23fb8134a6e6.png" style='position:absolute;left:0;
text-align:left;margin-left:.1pt;margin-top:36.2pt;width:213.9pt;height:191.05pt;
z-index:251635712;visibility:visible;mso-wrap-style:square;
mso-wrap-distance-left:9pt;mso-wrap-distance-top:9pt;
mso-wrap-distance-right:9pt;mso-wrap-distance-bottom:9pt;
mso-position-horizontal:absolute;mso-position-horizontal-relative:margin;
mso-position-vertical:absolute;mso-position-vertical-relative:text'
o:allowincell="f" o:allowoverlap="f">
<v:imagedata src="file:///C:\Users\ELTOND~1.ELT\AppData\Local\Temp\msohtmlclip1\01\clip_image001.png"
o:title="8abf847bb26774a2262e23fb8134a6e6"/>
<w:wrap type="square" anchorx="margin"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><!--[if gte vml 1]><v:shape
id="image01.jpg" o:spid="_x0000_s1028" type="#_x0000_t75" alt="flat_design_elements_preview-o.jpg"
style='position:absolute;left:0;text-align:left;margin-left:.1pt;margin-top:239.6pt;
width:474.8pt;height:247.8pt;z-index:251634688;visibility:visible;
mso-wrap-style:square;mso-wrap-distance-left:9pt;mso-wrap-distance-top:9pt;
mso-wrap-distance-right:9pt;mso-wrap-distance-bottom:9pt;
mso-position-horizontal:absolute;mso-position-horizontal-relative:margin;
mso-position-vertical:absolute;mso-position-vertical-relative:text'
o:allowincell="f" o:allowoverlap="f">
<v:imagedata src="file:///C:\Users\ELTOND~1.ELT\AppData\Local\Temp\msohtmlclip1\01\clip_image003.jpg"
o:title="flat_design_elements_preview-o"/>
<w:wrap type="square" anchorx="margin"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><!--[if gte vml 1]><v:shape
id="image00.jpg" o:spid="_x0000_s1027" type="#_x0000_t75" alt="63b0c6d277504c78b1bf9e0827963b07.jpg"
style='position:absolute;left:0;text-align:left;margin-left:230.65pt;
margin-top:22.9pt;width:211.7pt;height:204.2pt;z-index:251636736;visibility:visible;
mso-wrap-style:square;mso-wrap-distance-left:9pt;mso-wrap-distance-top:9pt;
mso-wrap-distance-right:9pt;mso-wrap-distance-bottom:9pt;
mso-position-horizontal:absolute;mso-position-horizontal-relative:margin;
mso-position-vertical:absolute;mso-position-vertical-relative:text'
o:allowincell="f" o:allowoverlap="f">
<v:imagedata src="file:///C:\Users\ELTOND~1.ELT\AppData\Local\Temp\msohtmlclip1\01\clip_image005.jpg"
o:title="63b0c6d277504c78b1bf9e0827963b07"/>
<w:wrap type="square" anchorx="margin"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><span style="font-size: 12.0pt; line-height: 150%;">Exemplos:<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU5Gxt4z-sjnudLyfl402foF7udBcce09nJkZxbSviMgHb577F7CeZAYsieFQFFl-K0fMioGKL1k_WrueToG5ajo5XGFqqMs0qvHVHIyzx3wtqNp1jJA36b6pCeTNkW4I9HDyCuHlyk68a/s1600/flat_design_elements_preview-o.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: black;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU5Gxt4z-sjnudLyfl402foF7udBcce09nJkZxbSviMgHb577F7CeZAYsieFQFFl-K0fMioGKL1k_WrueToG5ajo5XGFqqMs0qvHVHIyzx3wtqNp1jJA36b6pCeTNkW4I9HDyCuHlyk68a/s1600/flat_design_elements_preview-o.jpg" height="265" width="400" /></span></a></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;"><br /></span></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.blogger.com/blogger.g?blogID=518164319918370165" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=518164319918370165" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=518164319918370165" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=518164319918370165" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=518164319918370165" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=518164319918370165" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=518164319918370165" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=518164319918370165" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><span style="color: black;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheugGWdyLkwnVHMSs_ANaFIWHH3F4q_QdOwHwTbKlwaJc7kkpvoK2mprNpodqAmev5Q7KDvaXSiGOYdCzNe7NzY-X8nwcuSTqHfRO9npZdchu9uA0Qb5f7XcxoNfi2ZJpQA9M83sqkepqg/s1600/8abf847bb26774a2262e23fb8134a6e6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheugGWdyLkwnVHMSs_ANaFIWHH3F4q_QdOwHwTbKlwaJc7kkpvoK2mprNpodqAmev5Q7KDvaXSiGOYdCzNe7NzY-X8nwcuSTqHfRO9npZdchu9uA0Qb5f7XcxoNfi2ZJpQA9M83sqkepqg/s1600/8abf847bb26774a2262e23fb8134a6e6.png" height="320" width="320" /></a></span></div>
<br />
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">Essa tendência do web design é a pura
simplicidade dos elementos, da clareza do layout. Se distingue por suas formas
‘cleans’ e planas. O conceito funciona sem variações na estrutura do layout,
como chanfros, relevo, gradientes ou outras ferramentas que adicionam
profundidade. Cada elemento ou caixa é nítido. Nada realista é adicionado.<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">Usa-se muitos elementos de interface
de usuário simples, como botões e ícones. Muitas vezes são formas simples, como
retângulos, círculos ou quadrados. Se jogue no negrito com cor em botões
clicáveis para incentivar o uso, talvez uma sombra diferenciada. Mas não
confunda elementos simples com um design simples. Os conceitos de Flat Design
podem ser tão complexos quanto qualquer outro tipo de esquema de design.<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje1U7uR4h3ie33qINdw16lwN6JYD1Mlf0YIL55XIAtI8sxxeBrc1uCzvrITqRpMMtpZLYcYZiw6tjeKDAwyl9UT_oeTWLuFHiaOLSxAU2SdR-2uiOLt_t5CpEkW2OzMjgXjsMqTA6nGibO/s1600/p4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: black;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje1U7uR4h3ie33qINdw16lwN6JYD1Mlf0YIL55XIAtI8sxxeBrc1uCzvrITqRpMMtpZLYcYZiw6tjeKDAwyl9UT_oeTWLuFHiaOLSxAU2SdR-2uiOLt_t5CpEkW2OzMjgXjsMqTA6nGibO/s1600/p4.jpg" height="270" width="400" /></span></a></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">A tipografia é extremamente
importante. O tom das fontes deve corresponder ao esquema do resto do layout.
Uma fonte muito produzida pode parecer estranho em um projeto simples. Podem
também ser ousadas, mas de forma simples e eficiente.<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">No Flat Design a paletas de cores, na
maioria da vezes, são muito mais brilhante e mais colorido do que os de outros
sites. Os tons tendem a ser vibrante, sem matizes e tonalidades. Cores
primárias e secundárias são populares. Além disso, certos tipos de cores também
são usadas com frequência.<o:p></o:p></span></div>
<table align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="19" width="0"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody></table>
<div class="Normal1" style="line-height: 150%;">
<!--[if gte vml 1]><v:shape
id="Imagem_x0020_6" o:spid="_x0000_s1026" type="#_x0000_t75" alt="http://nancykimberlin.files.wordpress.com/2014/03/p4.jpg"
style='position:absolute;left:0;text-align:left;margin-left:0;margin-top:14.15pt;
width:468pt;height:315.9pt;z-index:251680768;visibility:visible;
mso-wrap-style:square;mso-width-percent:0;mso-height-percent:0;
mso-wrap-distance-left:9pt;mso-wrap-distance-top:0;mso-wrap-distance-right:9pt;
mso-wrap-distance-bottom:0;mso-position-horizontal:absolute;
mso-position-horizontal-relative:text;mso-position-vertical:absolute;
mso-position-vertical-relative:text;mso-width-percent:0;mso-height-percent:0;
mso-width-relative:page;mso-height-relative:page'>
<v:imagedata src="file:///C:\Users\ELTOND~1.ELT\AppData\Local\Temp\msohtmlclip1\01\clip_image007.jpg"
o:title="p4"/>
</v:shape><![endif]--><!--[if !vml]-->
<!--[endif]--><span style="font-size: 12.0pt; line-height: 150%;"> </span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12pt; line-height: 150%; text-indent: 36pt;">Pode-se afirmar que o nosso produto
além de possuir um Design Flat, também é considerado minimalista, por contar
apenas os elementos essenciais que tornam possíveis a compreensão do conteúdo.</span></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">Adicionar apenas o que é necessário e
retirar o excesso sempre foi o foco do design tradicional japonês. Se olharmos
para a antiga arquitetura japonesa e design de interiores, veremos que havia
poucas flores, opções de cores e um design simples e linhas e formas limpas.<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">A cultura japonesa é baseada na
simplicidade. Tudo a partir de como o alimento é preparado, a forma como ele é
apresentado, a maneira certa de comê-lo, as cerimônias de chá e jardins de
pedra - todos colocam o foco na simplicidade e foco para a atividade em
questão. <o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">Naturalmente, os designers
minimalistas foram influenciados pelo design tradicional japonês.<o:p></o:p></span></div>
<div align="center" class="Normal1" style="line-height: 150%; text-align: center;">
<span style="font-size: 12.0pt; line-height: 150%;"><!--[if gte vml 1]><v:shape id="_x0000_i1025"
type="#_x0000_t75" style='width:212.25pt;height:284.25pt'>
<v:imagedata src="file:///C:\Users\ELTOND~1.ELT\AppData\Local\Temp\msohtmlclip1\01\clip_image009.png"
o:title="japa"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--><o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXZc-WxQLSr03jDo-ISU_uyOOOsu0X-Hp1YlKiVzZIb79jpRCXebnTIUtU5jd8ccQTmvtTKWCmNVtoyWKdPFIviN4oC2cTVTtNK4IffxWFUStF1m1LUzA6d7AjXizSA53gyXyOWLdQwWf/s1600/japa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: black;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXZc-WxQLSr03jDo-ISU_uyOOOsu0X-Hp1YlKiVzZIb79jpRCXebnTIUtU5jd8ccQTmvtTKWCmNVtoyWKdPFIviN4oC2cTVTtNK4IffxWFUStF1m1LUzA6d7AjXizSA53gyXyOWLdQwWf/s1600/japa.png" height="320" width="239" /></span></a></div>
<br />
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;"><br /></span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">Uma abordagem prática do design minimalista.<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">- Menos é mais: utilizar apenas elementos necessários para
identificação.<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">- Omitir informações desnecessárias: não inserir elementos
desnecessários<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">- Subtrair: remover elementos até que o projeto pare de
funcionar da maneira como deveria. Um passo antes é o ápice do design
minimalista.<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">- Cada detalhe conta: as informações são vitais. Os detalhes
vão criar sentimentos e sensações ao público final. <o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">- Cor: usar apenas as cores que interagem bem e criam
sensações.<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">- O espaço em branco é vital: não preencher todos os espaços.<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">- Tipografia: escolher as limpas, fontes simples com um alto
nível de legibilidade, como as fontes sans serif (sem serifas)<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">- Alinhamentos: um arranjo legível e agradável do conteúdo<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="font-size: 12.0pt; line-height: 150%;">- Contraste: maior contraste pode melhorar drasticamente a
legibilidade do design<o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<b style="line-height: 150%; text-indent: 36pt;"><span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;"><br /></span></b></div>
<div class="Normal1" style="line-height: 150%;">
<b style="line-height: 150%; text-indent: 36pt;"><span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">5.2 Plataforma</span></b></div>
</div>
<div class="Normal1" style="line-height: 150%; text-align: justify; text-indent: 36.0pt;">
<span style="font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt;">O
infográfico interativo será criado na plataforma do Adobe Flash e através da
linguagem de programação Actionscript, os elementos do infográfico serão
programados dinamicamente<span style="background: white; mso-highlight: white;">.</span></span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%; text-indent: 36.0pt;">
<b>5.3 Protótipos<o:p></o:p></b></div>
<div class="Normal1" style="line-height: 150%;">
<span style="background: white; font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt; mso-highlight: white;">Versão
do protótipo com as interações entre os elementos gráficos.</span><o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
<span style="color: black;"><a href="https://www.dropbox.com/s/tzmyz54j79p2p06/Info-teste.swf"><span style="background: white; font-size: 12.0pt; line-height: 150%; mso-bidi-font-size: 10.0pt; mso-highlight: white;">https://www.dropbox.com/s/tzmyz54j79p2p06/Info-teste.swf</span></a><o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<span style="color: black;"><a href="https://www.dropbox.com/s/b2deo6zgjh2mrvj/Info-teste2.swf"><span style="background: white; line-height: 150%; mso-bidi-font-size: 11.0pt;">https://www.dropbox.com/s/b2deo6zgjh2mrvj/Info-teste2.swf</span></a><o:p></o:p></span></div>
<div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
<o:p><br /></o:p></div>
<div class="Normal1" style="line-height: 150%;">
<o:p><br /></o:p></div>
<div class="Normal1" style="line-height: 150%;">
<o:p><br /></o:p></div>
<div class="Normal1" style="line-height: 150%;">
<o:p><br /></o:p></div>
<div class="Normal1" style="line-height: 150%;">
<o:p><br /></o:p></div>
<div class="Normal1" style="line-height: 150%;">
<b>6.
Cronograma e equipe<o:p></o:p></b></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0cm 5.4pt 0cm 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 69.2pt;" valign="top" width="92"><div class="Normal1" style="line-height: 150%;">
<b>Data<o:p></o:p></b></div>
</td>
<td style="border-left: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 247.45pt;" valign="top" width="330"><div class="Normal1" style="line-height: 150%;">
<b>Atividade<o:p></o:p></b></div>
</td>
<td style="border-left: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 158.35pt;" valign="top" width="211"><div class="Normal1" style="line-height: 150%;">
<b>Desenvolvedores<o:p></o:p></b></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 69.2pt;" valign="top" width="92"><div class="Normal1" style="line-height: 150%;">
05/05<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 247.45pt;" valign="top" width="330"><div class="Normal1" style="line-height: 150%;">
Apresentação do Projeto<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 158.35pt;" valign="top" width="211"><div class="Normal1" style="line-height: 150%;">
Toda a equipe<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 69.2pt;" valign="top" width="92"><div class="Normal1" style="line-height: 150%;">
06 e 07/05<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 247.45pt;" valign="top" width="330"><div class="Normal1" style="line-height: 150%;">
Produção de conteúdo:<o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
- conceitos a serem abordados<o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
- histórias do anime<o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
- histórias breves dos vários
produtos gerados<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 158.35pt;" valign="top" width="211"><div class="Normal1" style="line-height: 150%;">
Maryane e Jéssica<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 69.2pt;" valign="top" width="92"><div class="Normal1" style="line-height: 150%;">
08/05<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 247.45pt;" valign="top" width="330"><div class="Normal1" style="line-height: 150%;">
Organização do conteúdo em tópicos
e resumos para infográfico.<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 158.35pt;" valign="top" width="211"><div class="Normal1" style="line-height: 150%;">
Maryane<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 69.2pt;" valign="top" width="92"><div class="Normal1" style="line-height: 150%;">
06 a 08 / 05<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 247.45pt;" valign="top" width="330"><div class="Normal1" style="line-height: 150%;">
Criação de ilustrações<o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
- ícones (aprox. 15)<o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
- desenhos (aprox. 15)<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 158.35pt;" valign="top" width="211"><div class="Normal1" style="line-height: 150%;">
Samuel Levi<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 69.2pt;" valign="top" width="92"><div class="Normal1" style="line-height: 150%;">
09 a 10/05<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 247.45pt;" valign="top" width="330"><div class="Normal1" style="line-height: 150%;">
Criação da versão beta<o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
- funcionalidades<o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
- programação<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 158.35pt;" valign="top" width="211"><div class="Normal1" style="line-height: 150%;">
Elton Daniel<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 69.2pt;" valign="top" width="92"><div class="Normal1" style="line-height: 150%;">
11/05<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 247.45pt;" valign="top" width="330"><div class="Normal1" style="line-height: 150%;">
Possíveis ajustes: de conteúdo,
design e funcionalidade<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 158.35pt;" valign="top" width="211"><div class="Normal1" style="line-height: 150%;">
Toda a equipe<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 69.2pt;" valign="top" width="92"><div class="Normal1" style="line-height: 150%;">
12/05<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 247.45pt;" valign="top" width="330"><div class="Normal1" style="line-height: 150%;">
Apresentação da versão Beta<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 158.35pt;" valign="top" width="211"><div class="Normal1" style="line-height: 150%;">
Toda a equipe<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 69.2pt;" valign="top" width="92"><div class="Normal1" style="line-height: 150%;">
13 a 18/05<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 247.45pt;" valign="top" width="330"><div class="Normal1" style="line-height: 150%;">
Implementação do produto<o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
- ajustes da programação<o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
- conclusão de inserção de conteúdo<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 158.35pt;" valign="top" width="211"><div class="Normal1" style="line-height: 150%;">
<br /></div>
<div class="Normal1" style="line-height: 150%;">
Elton e Samuel<o:p></o:p></div>
<div class="Normal1" style="line-height: 150%;">
Maryane e Jéssica<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 69.2pt;" valign="top" width="92"><div class="Normal1" style="line-height: 150%;">
19 a 26/05<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 247.45pt;" valign="top" width="330"><div class="Normal1" style="line-height: 150%;">
Conclusão do produto<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 158.35pt;" valign="top" width="211"><div class="Normal1" style="line-height: 150%;">
Toda a equipe<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 69.2pt;" valign="top" width="92"><div class="Normal1" style="line-height: 150%;">
02/06<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 247.45pt;" valign="top" width="330"><div class="Normal1" style="line-height: 150%;">
Apresentação do produto final<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0cm 5.4pt 0cm 5.4pt; width: 158.35pt;" valign="top" width="211"><div class="Normal1" style="line-height: 150%;">
Toda a equipe<o:p></o:p></div>
</td>
</tr>
</tbody></table>
<br />
<div class="Normal1" style="line-height: 150%;">
<br /></div>
Elton Danielhttp://www.blogger.com/profile/13873060371589523047noreply@blogger.com0tag:blogger.com,1999:blog-518164319918370165.post-91831995372309531362014-04-07T09:00:00.000-07:002014-04-14T11:22:15.375-07:00Prototipação<b>Protótipos de Sistemas</b><br />
<br />
Arquitetura da Informação 1<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZntX0fMxeDuk5E_95cUuuHrRIWw6afBa7xAVxJhHYfV44gnDAORB3SFMUXHHTaUWdPcXeUfdfVIpITY9a-WaP5TqfhrdZo_LIetHmh7SFr-SCUDE1ovUR1FglAsJNR2OVAE16RnDXtJ3/s1600/esquema.png" height="425" /></div>
<br />
Arquitetura da Informação 2<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3BzehW99J31q7FzYLjXAxubtYOr5AYk2GtCzt29595inFHmIaqKgL29rzcWAozId44Op2IZRv4Do7CSvqQDZdp3ri_KJjIqLNl9tyVl8WvbFxh3jnF1_a6RGTE-EBB5bj8n_MapVDdxCc/s1600/arquitetura-da-informa%C3%A7%C3%A3o-princesstutu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3BzehW99J31q7FzYLjXAxubtYOr5AYk2GtCzt29595inFHmIaqKgL29rzcWAozId44Op2IZRv4Do7CSvqQDZdp3ri_KJjIqLNl9tyVl8WvbFxh3jnF1_a6RGTE-EBB5bj8n_MapVDdxCc/s1600/arquitetura-da-informa%C3%A7%C3%A3o-princesstutu.png" height="390" /></a></div>
<br />
Organização dos arquivos<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAinuJKfTz1xcconhyQaIJJuAMAToUot6HEXF4opB4CEqwCDC6TdKuao9D2lJW3wNZfS9BHdpqQaQdHk4tnLxUqFkrW_0_NHxdgc9m2LfwavTvq3KU5MGd8HNup5EjNVdOQVkYU6-wqA2j/s1600/organizacao-arquivos.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAinuJKfTz1xcconhyQaIJJuAMAToUot6HEXF4opB4CEqwCDC6TdKuao9D2lJW3wNZfS9BHdpqQaQdHk4tnLxUqFkrW_0_NHxdgc9m2LfwavTvq3KU5MGd8HNup5EjNVdOQVkYU6-wqA2j/s1600/organizacao-arquivos.png" height="195" /></a></div>
<br />
Estrutura html base para o site<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVd4RtUc3KI5FjXbvGOaHW7eMBLX8tOEAu49dCWyT9LgheXrObuUeE4xs7-EQaVkXKnfM5b1eD5v0XUWhsYp4k0REMSSHlXcQ8vfzlQ1sekURR0Q5M-1tQmja8ezwHUCfOcs3_KJBrA68e/s1600/estrutura-html-site.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVd4RtUc3KI5FjXbvGOaHW7eMBLX8tOEAu49dCWyT9LgheXrObuUeE4xs7-EQaVkXKnfM5b1eD5v0XUWhsYp4k0REMSSHlXcQ8vfzlQ1sekURR0Q5M-1tQmja8ezwHUCfOcs3_KJBrA68e/s1600/estrutura-html-site.jpg" height="390" /></a></div>
<br />
<b>Protótipos de Design</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLfdOVbgDsdkvXleyzLOLeBS6j15nndlCBcAtZklV-Q-lPoT5wweg4SUwBMZ1abeGKHS1VuMjeOnnhDk6tvbIRsS7iJ_E1enXQHTUwy-VEiHvfwRa5QAB4MqdK3P6qV1SrPzymNzEirPo/s1600/Rascunho+Site_2.png" style="margin-left: 1em; margin-right: 1em;"><br /></a></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC6hyKB-Q9om2bY2Ekg7Kd55BiWkjE0wrB5SKc8h23MdHDxpDdBOcty__Aa1flnZW-EdAPit_1mQycNSfUak0g2I9BZdSw-ZOeE1v-lgUSBf1VJASB6kSfZV1kUtULWVKW0dze5_0yDl8/s1600/Base.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC6hyKB-Q9om2bY2Ekg7Kd55BiWkjE0wrB5SKc8h23MdHDxpDdBOcty__Aa1flnZW-EdAPit_1mQycNSfUak0g2I9BZdSw-ZOeE1v-lgUSBf1VJASB6kSfZV1kUtULWVKW0dze5_0yDl8/s1600/Base.jpg" height="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://eltondaniel.com/oficina/prototipo.swf">http://eltondaniel.com/oficina/prototipo.swf</a></td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cS2Xd-BqoUseqomvg-O-7ki-SK8RsJGhAyq3lexUG7eSmHosfvBfvD0PLcIipUBVTHqM8P8FbyLQEHh23kVG71FN1xwplayTZ4H8woq5aYHXBARX1zl6_fwqGOLChhH-3uGaeC7A6ckG/s1600/prototipo-wordpress.jpg" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cS2Xd-BqoUseqomvg-O-7ki-SK8RsJGhAyq3lexUG7eSmHosfvBfvD0PLcIipUBVTHqM8P8FbyLQEHh23kVG71FN1xwplayTZ4H8woq5aYHXBARX1zl6_fwqGOLChhH-3uGaeC7A6ckG/s1600/prototipo-wordpress.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="http://eltondaniel.com/oficina/">http://eltondaniel.com/oficina/</a></td></tr>
</tbody></table>
Elton Danielhttp://www.blogger.com/profile/13873060371589523047noreply@blogger.com0tag:blogger.com,1999:blog-518164319918370165.post-58621368099478787302014-03-24T15:35:00.000-07:002014-04-13T17:40:52.399-07:00Ideação - Brainstorm<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZntX0fMxeDuk5E_95cUuuHrRIWw6afBa7xAVxJhHYfV44gnDAORB3SFMUXHHTaUWdPcXeUfdfVIpITY9a-WaP5TqfhrdZo_LIetHmh7SFr-SCUDE1ovUR1FglAsJNR2OVAE16RnDXtJ3/s1600/esquema.png" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Nuvem de ideias.jpg" border="1" height="270" src="https://lh4.googleusercontent.com/tNiaut4e8u4cM-XZLH2e9O5OaSXWn9YkaWNjUb-gb4DgdNYFLjB6wzexOk87xoHVWLEsOH2UNtzTWd4y0jabI6m0HhOx8NVTxm6Z9Q48SgUZDKEAukA46jzw4YwLBQ" style="border: medium none;" /></a></div>
<br />
Na fase de ideação, com a utilização de "Brainstorm", foi pensado, cogitado e, por fim, definido, em uma viagem de ideias, o conteúdo do site e sua forma de apresentação. Apesar disso, salienta-se que essa é uma fase que não ocorreu somente no momento em que se parou e a nominou como tal, mas ideias de insights já vinham sendo geradas e palavras-chaves (tags), guardadas durante o processo de maturação da proposta desde o início.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Sendo assim, essas tags foram resgatadas e colocadas em uma nuvem para melhor organizar e relacionar os assuntos que se pretendia abordar no produto.</div>
<div style="text-align: justify;">
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZntX0fMxeDuk5E_95cUuuHrRIWw6afBa7xAVxJhHYfV44gnDAORB3SFMUXHHTaUWdPcXeUfdfVIpITY9a-WaP5TqfhrdZo_LIetHmh7SFr-SCUDE1ovUR1FglAsJNR2OVAE16RnDXtJ3/s1600/esquema.png" height="400" /> </div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: justify;">
Após análise dos temas (gerados direta ou indiretamente do anime) e como aplicá-los em um objeto único, apresentado algum caráter inovador, foi chegada a conclusão de que o site trataria de um repositório de informações em que, atendendo a proposta inicial de juntar: entretenimento, cultura e serviço, cada parte "independente" teria algum tipo de mescla, seja de conteúdo (por exemplo, no vídeo, há mescla de estilos de dança) ou de proposta (na parte "instrucional", o usuário deve ter uma experiência de fato agradável, visual ou de interação, que o instigue a aprender algo).</div>
<div class="separator" style="clear: both; text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://lh3.googleusercontent.com/Ry-sr49WWojAihCnZm_WuCkRECYlTV_xCnVt2f3I6lJiMDr9vHbZtGfpq1aI_emdCgza0GumfmYv0P0nuAvQStTZfDgZTPu10WhljENSmEKwEZmrcDcM2qtXuzzE7w" style="margin-left: auto; margin-right: auto;"><img alt="Brainstorm.jpg" border="0" height="400" src="https://lh3.googleusercontent.com/Ry-sr49WWojAihCnZm_WuCkRECYlTV_xCnVt2f3I6lJiMDr9vHbZtGfpq1aI_emdCgza0GumfmYv0P0nuAvQStTZfDgZTPu10WhljENSmEKwEZmrcDcM2qtXuzzE7w" style="border: medium none;" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit;"><span style="font-size: small;"><span style="background-color: transparent; color: black; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Aparentemente, parece um empilhado de rabiscos sem sentido, mas, a partir dele, conforme as ideias eram discutidas, foram traçados a arquitetura de informação e o design do produto.</span></span></span></td></tr>
</tbody></table>
</div>
<div style="text-align: justify;">
</div>
Então, perguntas foram surgindo:<br />
<br />
<div style="text-align: center;">
<span style="color: magenta;"><span style="font-size: small;">"Que informações teremos? | Quais as cores usaremos? | Menu expansivo ou estático? | Infográfico ou texto? | O vídeo ficará na abertura ou na home? | Terá uma abertura?"</span></span></div>
<br />
Sendo assim, tais perguntas, ao serem respondidas durante o processo, possibilitou a estruturação dos primeiros esboços das páginas do site:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-left: 1em; margin-right: 1em; text-align: center;">
<img alt="ideias.jpg" height="180px;" src="https://lh4.googleusercontent.com/YVIvwMEtX1op2tNjzdmY6gTK_N_PV04Rzth7YT1GSkyQKFIeA6Tn2C04yyoTtRMyK-u03L-gWhQ6XDcIBYum8MOT_x6xZyWcE5-uvFGZ_2VH8CKeGPwl0QESAhDMwg" style="border: medium none; line-height: 1.15;" /> <img alt="ideias2.jpg" height="180px;" src="https://lh4.googleusercontent.com/1CtSZpBpdMssj2CJXoC_LPtbiPN_s6H8dExpw8C1QRr1H4y0vQ3m4rYHvgJv6AuhGuBdATS8CEb0F7MFAFirqiHel_A3siRYicLFhDrKAmqZtZ5bTJaPl3mX3nQT6Q" style="border: medium none; line-height: 1.15;" /></div>
<br />
<div dir="ltr" style="line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;">
</div>
<div style="text-align: justify;">
Que deu origem a um design ainda primitivo para visualização do que, a priori, era acreditado ser o conteúdo ideal e o que daria para ser feito:</div>
<br />
1) Ideal:<br />
<br />
<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg_Qoo3_31-y_loIkgVNwlkUpMUlYuDAC8iSGNlp465LKdxqy_I0AkfV5MLJEa8uy2m9FPmBecIp5_ux_W5gJJMaPx8uYqMJvuNrUu-HbMDkLvjQZOozLv8KLCoG6tqkntL56gFRo7_w6c/s1600/Site+Ideal.jpg" height="360" /> </div>
<br />
2) Real:<br />
<br />
<div style="text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQBbb_eKB3yqYSmzwvHwdQnsDsrqEXbBP2B_2hS8kBthrASiF5xEgRalMkc7FJ7e0aCeD3x9NCLviz2L1kFZ1rksHiul6mgmUTPp54qi7Z6JCqDWoGc7WxBN6B0kf_rAAI1_rsgIJ8TZr/s1600/Site+Real.jpg" height="240" /> </div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: justify;">
Com o conteúdo definido, foram idealizados e rascunhados novas propostas de design:</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLfdOVbgDsdkvXleyzLOLeBS6j15nndlCBcAtZklV-Q-lPoT5wweg4SUwBMZ1abeGKHS1VuMjeOnnhDk6tvbIRsS7iJ_E1enXQHTUwy-VEiHvfwRa5QAB4MqdK3P6qV1SrPzymNzEirPo/s1600/Rascunho+Site_2.png" height="400" /></div>
<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLUCYeLWgkkOW0OGtiBRN3OOvGap8Diy36DRP1ammygqy7B-CcOWwaQIbyfftU4DpgvofvSeRltlJJ4Gax05on2iWlkmu7P03ksa7oA-IhV0PoKtDR6KANwhyphenhyphenyfUN0dY-ojVvtH4oX-5tL/s1600/New+modelo.jpg" style="clear: right; display: inline ! important; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLUCYeLWgkkOW0OGtiBRN3OOvGap8Diy36DRP1ammygqy7B-CcOWwaQIbyfftU4DpgvofvSeRltlJJ4Gax05on2iWlkmu7P03ksa7oA-IhV0PoKtDR6KANwhyphenhyphenyfUN0dY-ojVvtH4oX-5tL/s1600/New+modelo.jpg" style="display: inline ! important; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLUCYeLWgkkOW0OGtiBRN3OOvGap8Diy36DRP1ammygqy7B-CcOWwaQIbyfftU4DpgvofvSeRltlJJ4Gax05on2iWlkmu7P03ksa7oA-IhV0PoKtDR6KANwhyphenhyphenyfUN0dY-ojVvtH4oX-5tL/s1600/New+modelo.jpg" height="445" /></a></div>
<div class="" style="clear: both; text-align: center;">
</div>
<div class="" style="clear: both; text-align: justify;">
<br />
Até que se chegou a proposta final, a ser refinada e implementada:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC6hyKB-Q9om2bY2Ekg7Kd55BiWkjE0wrB5SKc8h23MdHDxpDdBOcty__Aa1flnZW-EdAPit_1mQycNSfUak0g2I9BZdSw-ZOeE1v-lgUSBf1VJASB6kSfZV1kUtULWVKW0dze5_0yDl8/s1600/Base.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC6hyKB-Q9om2bY2Ekg7Kd55BiWkjE0wrB5SKc8h23MdHDxpDdBOcty__Aa1flnZW-EdAPit_1mQycNSfUak0g2I9BZdSw-ZOeE1v-lgUSBf1VJASB6kSfZV1kUtULWVKW0dze5_0yDl8/s1600/Base.jpg" height="380" /></a></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-518164319918370165.post-59807256579699099682014-03-09T18:15:00.000-07:002014-03-12T21:14:37.760-07:00Briefing<div style="text-align: justify;">
<b><span style="color: #ff35c3;">01 - Identificação do Projeto</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: #ff35c3;">Nome do projeto ou campanha</span></b></div>
<div style="text-align: justify;">
<u>Nome</u>: Um Tango para Duas Princesas</div>
<div style="text-align: justify;">
<u>Campanha</u>:
Site que aborda os conteúdos de narrativas; transmídia; dança; cinema;
vídeo; anime e mangá; e cosplay, tendo como base o anime <i>Princess Tutu</i>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: #ff35c3;">Cliente: </span></b>Professores
da disciplina "Oficina de Produção em Mídias Digitais" do curso de
Sistemas e Mídias Digitais, da Universidade Federal do Ceará (UFC).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: #ff35c3;">02 - Identificação do Produto Desejado</span></b> </div>
<b><span style="color: #ff35c3;"> </span></b>
<br />
<div style="text-align: justify;">
<b><span style="color: #ff35c3;">Objetivo do projeto: </span></b>Valendo-se
de um processo interdisciplinar de produção, evidenciar o potencial da
transmídia para o desenvolvimento de conhecimento complexo, unindo
entretenimento, pesquisa e prestação de serviço em um site
multimidiático sobre narrativas; transmídia; dança; cinema; vídeo; anime
e mangá; e cosplay, tendo como base o anime <i>Princess Tutu</i>.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: #ff35c3;">03 - Contexto e Especificações</span></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: #ff35c3;">Público-alvo: </span></b></div>
<div style="text-align: justify;">
Escritores, desenhistas, animadores, produtores audiovisual, dançarinos, <i>cosplayers</i>, estudantes, professores e interessados nos temas apresentados em geral.
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: #ff35c3;">Objetivo dos Usuários:</span></b></div>
<div style="text-align: justify;">
- Entretenimento;</div>
<div style="text-align: justify;">
- Pesquisa e acesso a conceitos, informações e sugestões para outros materiais sobre as temáticas abordadas;</div>
<div style="text-align: justify;">
- Obtenção de contato de profissionais e empresas que trabalham e/ou prestam serviço nas áreas propostas.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><span style="color: #ff35c3;">Requisitos Funcionais - Funcionalidade e dados desejados:</span></b></div>
<div style="text-align: justify;">
<b><span style="color: #ff35c3;">Obrigações: </span></b>Possuir caráter inovador e apresentar conteúdo multimídia.</div>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<b><span style="color: #ff35c3;">Substantivos: </span></b>Transmídia, entretenimento, arte, informação, pesquisa, serviços</div>
<span style="background-color: white; color: red; font-family: Georgia; font-size: 16px; vertical-align: baseline; white-space: pre-wrap;"></span>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-518164319918370165.post-13736199600812902352014-03-08T12:55:00.000-08:002014-03-09T18:14:58.207-07:00Introdução<b>TEMA</b><br />
<b><br /></b><b><span style="color: #ff35c3;">Histórias</span></b><br />
<br />
<div style="text-align: justify;">
"Basicamente, uma história é uma <b>narrativa</b> de um evento ou eventos - verdadeiros ou fictícios. A diferença entre dar um exemplo e contar uma história é o acréscimo de conteúdo emocional e detalhes sensoriais na narração. A história entrelaça detalhes, <b>personagens</b> e <b>eventos</b> em um todo que é maior que a soma de suas partes. Um quadro de pessoas e um cavalo é um exemplo. A pintura Guernica de Picasso é uma história. “A ganância causou problemas ao Rei” é um exemplo. Rei Midas e seu lamentável desejo de transformar tudo o que tocava em ouro é uma história." (SIMMONS, 2002, p.29, tradução nossa).
<b><span style="color: #ff35c3;"> </span></b></div>
<br />
<b><span style="color: #ff35c3;">Transmídia</span></b><br />
<br />
<div style="text-align: justify;">
De forma simples e objetiva, transmídia pode ser definida como a transmissão de uma mensagem ou <b>narrativa</b>
através de várias mídias, dando ênfase à <b>história</b> que se deseja contar.</div>
<br />
<b><span style="color: #ff35c3;">Narrativa Transmídia</span></b><br />
<br />
<div style="text-align: justify;">
"<span class="" id="result_box" lang="pt">Narrativa transmidia <span class="hps">representa um processo</span> <span class="hps">em que elementos</span> <span class="hps">integrantes de uma</span> <span class="hps">ficção</span> <span class="hps">se</span> <span class="hps">dispersam</span> <span class="hps">sistematicamente</span> <span class="hps">através de múltiplos</span> <span class="hps">canais de distribuição</span>,<span class="hps"> visando criar uma</span> <span class="hps">experiência de entretenimento</span> <span class="hps">unificada</span> <span class="hps">e coordenada.</span></span>" (JENKINS, 2009, tradução nossa).<br />
<br />
<b><span style="color: #ff35c3;">Narrativa Transmídia, Pesquisa Acadêmica e Prestação de Serviço</span></b><br />
<br />
Atualmente, no contexto da indústria do entretenimento na era da Convergência, a transmídia é utilizada como forte estratégia <span style="background: white; font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 115%; mso-ansi-language: PT-BR; mso-bidi-language: AR-SA; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin;">para a</span>trair e assegurar o
interesse de um público com “nível de tolerância medido em frações de
segundos e número de caracteres”<span style="background: white;"> (BRIDI, 2013), </span>exercendo com isso papel fundamental na esfera da
produção e consumo. Todavia, como se afirma na apresentação da <a href="http://www.jig2014.com.br/" target="_blank"><b>I Jornada Internacional GEMInIS</b> <b> (JIG/2014)</b></a>, evento pioneiro na área, a ser realizado nos dias 13 a 15 de maio de 2014 pela Universidade Federal de São Carlos (UFSCar), a transmídia é "uma noção que permanece relativamente
inédita no campo acadêmico", e também pouco explorada no âmbito da prestação e promoção de serviços e profissionais, o que é bem contraditório, vendo seu potencial para comunicação em Novas Mídias. </div>
<br />
<b>PROBLEMA / QUESTÃO</b><br />
<br />
<div style="text-align: justify;">
Sendo assim, o que pode a transmídia para difusão de conhecimento e para prestação de serviço?</div>
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizewO18JzMgiF9o8MNd8g9l9hCmTPh2StsIaRMlHBy6ynxFuYaJnDAlYm1GHjuTij96Vucm7VzfyK5V_OJK4SbTydetIu_rVDp8_VuZ5xVRkH2JIArB3BN8Nzg0-VS-IEjNDUhS3-qTxI/s1600/Princess+Tutu.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizewO18JzMgiF9o8MNd8g9l9hCmTPh2StsIaRMlHBy6ynxFuYaJnDAlYm1GHjuTij96Vucm7VzfyK5V_OJK4SbTydetIu_rVDp8_VuZ5xVRkH2JIArB3BN8Nzg0-VS-IEjNDUhS3-qTxI/s1600/Princess+Tutu.jpg" height="360" /></a><b>PROPOSTA DO TRABALHO </b><br />
<b> </b><br />
<div style="text-align: justify;">
O trabalho proposto é, então, desenvolver um site, baseado no anime <b><i>Princess Tutu</i></b>, que integre simultaneamente entretenimento, difusão de conhecimento, arte e cultura; prestação de serviço comercial e promoção de profissionais, de forma prática, interativa e esteticamente atrativa, valendo-se de vídeos, imagens, infográficos etc. </div>
<div style="text-align: justify;">
O anime foi escolhido por já se apresentar como uma mescla de linguagens (dança e animação), bem como de conteúdo, onde são abordados enredos e/ou personagens de diversos repertórios de balé e contos de fada. </div>
<div style="text-align: justify;">
Assim, pretende-se expandir esse mote, integrando novas linguagens midiáticas e novos conceitos. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>OBJETIVO<span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"> </span></b><br />
<br />
Em um processo interdisciplinar de produção de um site multimidiático, pretende-se evidenciar o potencial da transmídia para o desenvolvimento de conhecimento complexo, unindo entretenimento, pesquisa e prestação de serviço nos temas de: Narrativas; Transmídia; Dança; Cinema; Vídeo; Anime e Mangá; e Cosplay.<br />
<b><span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"> </span> </b></div>
<div style="text-align: justify;">
<b><!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:RelyOnVML/>
<o:AllowPNG/>
</o:OfficeDocumentSettings>
</xml><![endif]--></b></div>
<div style="text-align: justify;">
<span style="font-family: "Times New Roman","serif"; font-size: 12.0pt; line-height: 150%;"></span></div>
<b></b> <b><b>REFERÊNCIAS</b></b><br />
<div style="text-align: justify;">
<br /></div>
<ul>
<li style="text-align: justify;"><b><b><!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:RelyOnVML/>
<o:AllowPNG/>
</o:OfficeDocumentSettings>
</xml><![endif]--></b></b> BRIDI, Natália. Jack – O Caçador de Gigantes | Crítica: Uma aventura para ver sem prestar atenção. 2013. Disponível em <<a href="http://omelete.uol.com.br/">http://omelete.uol.com.br/</a>>. Acesso em: 22 abr. 2013.</li>
<li style="text-align: justify;">JENKINS,
Henry. The Revenge of the Origami Unicorn: Seven Principles of
Transmedia Storytelling (Well, Two Actually. Five More on
Friday). Disponível em:
<<a href="http://henryjenkins.org/2009/12/the_revenge_of_the_origami_uni.html">http://henryjenkins.org/2009/12/the_revenge_of_the_origami_uni.html</a>>.
Acesso em: 8 mar. 2014.</li>
<li style="text-align: justify;">SIMMONS, Annete. <span style="mso-bidi-font-weight: normal;"><span style="mso-bidi-font-style: italic;">The story factor</span></span>.Cambridge: Basic
Books, 2001.</li>
</ul>
Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-518164319918370165.post-28184091578419912332014-02-27T08:15:00.000-08:002014-03-09T22:04:08.416-07:00Equipe - J.E.M.S<b>MEMBROS</b>:<br />
<br />
<b>Direção de Arte</b>: <b><span style="color: #ff35c3;">J</span></b>éssica Barbosa<br />
<b>Designer: </b><b><b><span style="color: #ff35c3;">E</span></b></b>lton Daniel<br />
<b>Gerente: </b><b><b><span style="color: #ff35c3;">M</span></b></b>aryane Freitas<br />
<b>Direção Audiovisual: </b><b><b><span style="color: #ff35c3;">S</span></b></b>amuel LevyUnknownnoreply@blogger.com0