Centro Universitário Senac Fernanda Carolina Aguilera Abarca Mariana Pérola Rotiroti
Na Balada Festa em tempo real
São Paulo – SP 30 de maio de 2011
Fernanda Carolina Aguilera Abarca Mariana Pérola Rotiroti
Na Balada Festa em tempo real
Trabalho de Conclusão de Curso apresentado ao Centro Universitário Senac – Campus Santo Amaro, como exigência parcial para a obtenção do grau em Bacharel em Design: Habilitação em Interface Digital Orientador: Prof. Anderson Luís da Silva
São Paulo – SP 30 de maio de 2011
A118b Abarca, Fernanda Carolina Aguilera Na balada: festa em tempo real / Fernanda Carolina Aguilera Abarca; Mariana Pérola Rotiroti – São Paulo, 2010. 78f. Il. color. Orientador: Anderson Silva. Trabalho de Conclusão de Curso (Graduação em Design: Habilitação em Interface Digital) - Centro Universitário Senac - Campus Santo Amaro, São Paulo, 2011. 1.Ambiente urbano 2.Balada 3.Eventos 4.Redes sociais 5.Web 2.0 6.Interface 7.Prosumer 8.Conteúdo colaborativo 9.Design 10.Internet I.Rotiroti, Mariana Pérola(autora) II.Silva, Anderson Luí da (orient) II.Título CDD 760
Fernanda Carolina Aguilera Abarca Mariana Pérola Rotiroti
Na Balada Festa em tempo real
Trabalho de Conclusão de Curso apresentado ao Centro Universitário Senac – Campus Santo Amaro, como exigência parcial para a obtenção do grau em Bacharel em Design: Habilitação em Interface Digital Orientador: Prof. Anderson Luís da Silva A banca examinadora dos Trabalhos de Conclusão de Curso em sessão pública realizada em _____/_____/_____ considerou as candidatas: 1) Examinador(a):
2) Examinador(a):
3) Presidente:
Dedicamos este trabalho a todas as pessoas que sempre tĂŞm novidades para compartilhar.
Agradecemos: A Deus Aos nosso pais. Ao nosso orientador Prof. Anderson Silva A ProfÂŞ. DrÂŞ Dagmar Silva. E a todos que nos apoiaram nestes quatro anos de curso.
“É triste chegar depois de acabada a festa.” Erasmo de Rotterdam
Resumo do projeto Redes Sociais online, oriundas da popularização das redes telemáticas é um fenômeno de comunicação em massa do século XXI, constituídas e mantidas pelos indivíduos que as integram, tornaram-se o ponto central de uma vasta rede de relações interpessoais e de troca de arquivos midiáticos na internet. Em conjunto com a popularização dos sistemas de telefonia móvel, torna cada usuário um ponto de referência no mapa, este por sua vez interage com o espaço da rede e com seus pares de onde estiver. Este projeto propõe a criação de um repositório para compartilhamento de conteúdos midiáticos provenientes da interação entre indivíduos em espaços urbanos de convivência e diversão.
Abstract Social networks are a phenomenon of mass communication of the XXI century, constituted and maintained by the individuals comprising them, have become the centerpiece of a vast network of relationships and file sharing media. Along with the popularization of mobile systems, each user makes a point of reference on the map, in turn interacts with the space and network with peers from anywhere. The objective of this project is an area of real-time sharing of information from the location where the user is in, especially living space and fun in wide urban centers.
Lista de tabelas Tabela 1 – Redes sociais mais utilizadas no Brasil.........................................................................................................................................................24 Tabela 2 – Principais serviços das redes citadas............................................................................................................................................................24 Tabela 3 – Diferenças na transmissão de dados entre tecnologias 2.5G...............................................................................................27 Tabela 4 – Operadoras e transmissão 3G no Brasil até agosto de 2009..................................................................................................28 Tabela 5 – Relação de pessoas cobertas com tecnologia 3G até agosto de 2009.......................................................................28 Tabela 6 – Quantidade de telefones celulares 3G no Brasil até agosto de 2009..............................................................................29
Quadro 1 – Comparativo entre redes sociais e sites de busca já existentes e Na Balada (I).......................................................33 Quadro 2 – Comparativo entre redes sociais e sites de busca já existentes e Na Balada (II).......................................................34
Lista de figuras Figura 1 – Esquema de funcionamento de Na Balada.............................................................................................................................................14 Figura 2 – Representação de tela de interface de Na Balada........................................................................................................................16 Figura 3 – Representação de rede social...........................................................................................................................................................................25 Figura 4 – Esquema de funcionamento de GPS automotivo..........................................................................................................................29 Figura 5 – Marca criada para a rede social Na Balada.........................................................................................................................................46 Figuras 6 até 17 – Iconografia web........................................................................................................................................................................................47 Figuras 18 até 22 – Iconografia web........................................................................................................................................................................................48 Figuras 23 até 28 – Iconografia mobile...................................................................................................................................................................................48 Figuras 29 até 35 – Iconografia mobile...................................................................................................................................................................................49 Figura 36 – Ilustração da interface.............................................................................................................................................................................................49 Figura 37 – Ícone para a aplicação mobile............................................................................................................................................................................50 Figuras 38 até 50 – Representação das telas web..........................................................................................................................................................50 Figura 51 – Pop-ups..................................................................................................................................................................................................................................57 Figuras 52 até 65 – Representação das telas mobile...................................................................................................................................................57 Figura 66 – Redução máxima permitida..............................................................................................................................................................................64 Figura 67 – Área de segurança.......................................................................................................................................................................................................64 Figura 68 – Assinaturas da marca.................................................................................................................................................................................................65 Figura 69 – Padrão cromático.........................................................................................................................................................................................................65 Figura 70 – Usos incorretos...............................................................................................................................................................................................................66 Figuras 71 e 72 – Versões da marca...........................................................................................................................................................................................68 Figura 73 – Interfaces web não utilizadas.............................................................................................................................................................................68 Figura 74 – Interfaces mobile não utilizadas.......................................................................................................................................................................68
Sumário Introdução .........................................................................................................................................................................................................................................................13 O problema......................................................................................................................................................................................................................................................15 Motivação...........................................................................................................................................................................................................................................................15 Objetivos gerais............................................................................................................................................................................................................................................15 Objetivos específicos...............................................................................................................................................................................................................................15 Justificativa................................................................................................................................................................................................................................................15 Objeto de estudo......................................................................................................................................................................................................................................17 Metodologia..................................................................................................................................................................................................................................17 Global Gincana...............................................................................................................................................................................................................................................17 Marketing on line........................................................................................................................................................................................................................................18 A tecnologia e a comunicação.........................................................................................................................................................................................................18 André Lemos e o conceito de cibercidades..........................................................................................................................................................................19
Capítulo I - Conceitos fundamentais.............................................................................................................................................21 1.1 – Web 2.0.....................................................................................................................................................................................................................................................22 1.2 – Redes sociais......................................................................................................................................................................................................................................23 1.3 – Web app ou aplicações web...................................................................................................................................................................................................26 1.4 – Conexões wirelles..........................................................................................................................................................................................................................27 1.4.1 – Wap..................................................................................................................................................................................................................................27 1.4.2 – 2G e 2.5G......................................................................................................................................................................................................................27 1.4.3 – 3G 3 3Gs......................................................................................................................................................................................................................27 1.5 – Sistema de posicionamento global (GPS)................................................................................................................................................................28 1.6 – Streaming.............................................................................................................................................................................................................................................29 1.7 – Páginas de geolocalização e redes sociais................................................................................................................................................................30 1.7.1 – Google Maps...........................................................................................................................................................................................................30 1.7.2 – Foursquare...............................................................................................................................................................................................................30 1.7.3 – Places - Facebook................................................................................................................................................................................................30 1.7.4 – YouTube.......................................................................................................................................................................................................................31 1.7.5 – Orkut.............................................................................................................................................................................................................................31 1.7.6 – Época São Paulo.................................................................................................................................................................................................31 1.7.7 – Guia Folha On Line..........................................................................................................................................................................................31 1.7.8 – São Paulo Guia Mais......................................................................................................................................................................................31
Capítulo II - Descrição do projeto.......................................................................................................................................................32 2.1 – Comparativos...................................................................................................................................................................................................................................33 2.2 – Na Balada - projeto..................................................................................................................................................................................................................................34 2.3 – Requisitos de sistema para o funcionamento de Na Balada............................................................................................................................35
2.3 .1 – Computadores.......................................................................................................................................................................................................35 2.3 .2 – Dispositivos portáteis.......................................................................................................................................................................................35 2.4 – Públivo alvo........................................................................................................................................................................................................................................35 2.5 – Cenários.................................................................................................................................................................................................................................................36 2.6 – Orçamento..........................................................................................................................................................................................................................................36 2.7 – Linguagens de programação e softwares utilizados......................................................................................................................................37 2.8 – Testes de usabilidade................................................................................................................................................................................................................37 2.9 – Política do site e direitos autorais.................................................................................................................................................................................38 2.10 – Fluxogramas.......................................................................................................................................................................................................................................40
Capítulo III - Arte e layout.......................................................................................................................................................................45 3.1 – Identidade visual............................................................................................................................................................................................................................46 3.2 – Slogan......................................................................................................................................................................................................................................................46 3.3 – Iconografia..........................................................................................................................................................................................................................................47 3.3.1 – Iconografia web....................................................................................................................................................................................................47 3.3.2 – Iconografia mobile..............................................................................................................................................................................................48 3.4 – Outros elementos de layout................................................................................................................................................................................................49 3.5 – Proposta de interface web....................................................................................................................................................................................................50 3.6 – Proposta de interface mobile..............................................................................................................................................................................................57 3.7 – Usos da marca..................................................................................................................................................................................................................................64 3.7.1 – Redução máxima...............................................................................................................................................................................................64 3.7.2 – Área de segurança............................................................................................................................................................................................64 3.7.3 – Assinaturas..............................................................................................................................................................................................................65 3.7.4 – Padrão cromático.............................................................................................................................................................................................65 3.7.5 – Usos incorretos..................................................................................................................................................................................................66 3.7.6 – Tipografia................................................................................................................................................................................................................67 3.7.7 – Painel semântico.............................................................................................................................................................................................68 3.7.8 – Esboços para interface web................................................................................................................................................................68 3.7.6 – Esboços para interface mobile..........................................................................................................................................................68
Conclusão ...........................................................................................................................................................................................................................................................69 Glossário ................................................................................................................................................................................................................................................................70 Apêndices ...........................................................................................................................................................................................................................................................73 Anexos ...................................................................................................................................................................................................................................................................75 Bibliografia .......................................................................................................................................................................................................................................................77
Segundo dados coletados na matéria “Onde os brasi-
restritos apenas as grandes capitais. Municípios me-
leiros se encontram” (Editora Globo. Onde os brasilei-
nores também possuem suas atividades de grande
ros se encontram. Revista Época. São Paulo, SP, nº 628,
repercussão, como o recente festival de música, SWU,
10 jul. 2010) as pessoas no Brasil apreciam o uso das
ocorrido na cidade de Itu, no interior do estado de São
redes sociais no seu dia a dia. A matéria mostrou que
Paulo, em agosto de 2010.
aproximadamente 60% do tráfego de dados na web brasileira referem-se ao uso destes aplicativos de rela-
Na Balada vem no sentido de atuar como uma trans-
cionamentos para os mais variados fins.
missão ao vivo de um acontecimento. Podemos comparar as baladas com caixas de madeira, onde não se
Na época de publicação desta reportagem, as redes
é possível ver o interior com estas embalagens fecha-
sociais mais populares em território nacional eram o
das. A rede social Na Balada transforma estas caixas de
MSN Messenger (Windows Live) com 76% de usuários
madeira em caixas de vidro, onde as pessoas podem
web conectados aos seus serviços, o Orkut com 72%, o
ver o conteúdo das baladas antes mesmo de se inse-
Twitter com 27% e o Facebook com 26%.
rir nelas através de opiniões de outros usuários que estejam frequentando o local. Para isto utilizamos os
Ainda segundo a matéria, muitos destes usuários aces-
conceitos da web 2.0.
sam estas redes sociais não apenas de computadores, mas, também de aparelhos portáteis com conexão a
A web 2.0, termo que significa internet participativa,
internet como telefones celulares e tablets. De acordo
abriu a possibilidade de construção de conteúdo por
com a Anatel, calcula-se que em 2010 havia cerca de
parte dos indivíduos, gerando o conceito de prosumer,
194,4 milhões de linhas de telefonia móvel em opera-
termo criado por Alvim Toffler para indicar o novo pa-
ção no território brasileiro. Até o fim do ano de 2011,
pel do consumidor na sociedade pós-moderna. Esta
a previsão é de que mais 26,4 milhões de novas linhas
palavra quer dizer “pessoa criadora e consumidora de
sejam ativadas. As maiorias delas, entretanto, perten-
informação”. Ou seja, o termo é a junção dos vocábu-
cem às quatro maiores operadoras nacionais: Vivo,
los de língua inglesa consumer e producer, que signifi-
Claro, Tim e Oi, que possuem 30%, 25%, 24% e 16% de
cam consumidor e produtor, respectivamente. É neste
marcado, respectivamente.
conceito em que se baseiam as redes sociais. A web 2.0, nome dado por Tim O’ Reilly, está relacionado à in-
Baseado nestes dados é possível construir as mais diversas redes sociais voltadas para o mercado nacional, pois a demanda existe, já que os brasileiros apreciam este tipo de mídia. Podemos ainda, integrá-las aos dispositivos portáteis, pois, devido á grande quantidade de telefones celulares em circulação, as redes sociais muitas vezes são adaptadas a esta espécie de gadget.
ternet como plataforma, onde os chamados web sites estão sendo substituídos por aplicativos que, quanto mais utilizados, mais qualidade adquirem. Vale dizer que a web 2.0 utiliza-se da inteligência coletiva para atingir níveis de excelência cada vez maiores. Com estas novas características, a internet se torna uma mídia mais popular e independente de empresas desenvol-
Partindo da identificação de um problema específico
vedoras para a criação do conteúdo. Para um aprofun-
“como está a balada em tempo real sem necessariamente
damento maior no tema, apresentaremos no capítulo
estar nela” propomos o Na Balada, rede social com temá-
1 deste projeto, uma pesquisa mais detalhada sobre
tica de eventos noturnos urbanos, versão web e mobile.
a web 2.0.
Na Balada é voltada a usuários que queiram compar-
Sobre redes sociais, podemos dizer que elas são locais
tilhar informação em tempo real sobre eventos notur-
virtuais onde os usuários trocam informações entre si,
nos urbanos, conhecidos popularmente por baladas.
ao mesmo tempo em que constroem assuntos no ambiente computacional. Para a fundamentação destas
Atualmente as cidades brasileiras possuem uma gran-
redes como fenômenos sociológicos serão expostas
de variedade de opções de eventos. Estes, não são
ideias de estudiosos como Raquel Rucuero e Manuel
13
Castells. Temas como a virtualização das metrópoles que interferem em seu espaço físico e onde o software se transforma em um complemento da área real da cidade também serão abordados neste projeto. Cases com telefonia móvel e redes sociais também serão expostas, como, por exemplo, a Global Gincana e o
do indivíduo pode postar sobre um evento, enquanto outro pode acessar a informação simultaneamente por qualquer dispositivo com conexão à internet. A postagem da atividade pode ser feita através de mensagens de texto, vídeo, mensagens de áudio e imagens para que a pessoa que está conectada possa acompanhar os eventos o mais perto possível.
marketing desenvolvido pela empresa Altimer Group através das redes sociais. Com foco nas possibilidades deste paradigma de internet, a rede social Na Balada mescla dados sobre
Nosso nicho de marcado está no compartilhamento em tempo real das atividades noturnas praticadas no espaço urbano, voltadas, sobretudo, para o público jovem e adulto que frequenta as baladas da cidade.
eventos do ambiente urbano criadas pelos próprios usuários por meio de vídeos, textos, mensagens de áudio e imagens com a vantagem de estar sempre atualizado, pois neste sistema, o usuário cria a própria mídia. Esta aplicação procurará servir como guia para pessoas que procuram por baladas nas metrópoles e recor-
Em suma, neste projeto, o leitor encontrará informações pertinentes às redes sociais e como será a construção de Na Balada, rede ao vivo e alimentada pelos próprios usuários. Também propomos um comparativo de sites que oferecem serviços de localização de baladas, bem como suas vantagens e desvantagens em sua utilização.
rem à web para a busca de informação sobre qual local visitar. Como diferencial para o projeto Na Balada, propomos a interação de modo em tempo real, onde determina-
Quanto a fundamentos conceituais e tecnológicos, traremos assuntos relacionados à web 2.0, web apps, tecnologias de transmissão para dispositivos portáteis e informações referentes ao público alvo.
Figura 1 – Esquema de funcionamento da rede social “Na Balada”, onde usuários podem compartilhar informações sobre eventos em tempo real.
14
O problema
Promover a troca de informação entre usuários com mesmos interesses.
O problema identificado para que a criação de Na Balada se justificasse é “como saber como estão as baladas ago-
Criação de interface para envio de conteúdo sobre os
ra, sem a necessidade de se estar fisicamente nelas”, evitan-
vários tipos de baladas que a metrópole disponibiliza.
do assim, perda de tempo com a locomoção no espaço urbano, gasto desnecessário de dinheiro e sentimento
Criar interface que utilize a inteligência coletiva, ou
de frustração ao se idealizar um evento, e, ao chegar,
seja, quanto maior o número de usuários, mais com-
constatar que o mesmo está abaixo da expectativa.
pleto será o conteúdo.
Para solucuinar este problema, propomos criar uma aplicação que dê ao indivíduo a visualização do interior de baladas em geral, em tempo real, a partir de dispositivo conectado à internet.
Objetivos específicos Criação de uma interface digital para computadores e dispositivos portáteis que contenha informações
Motivação
específicas sobre eventos urbanos para cada usuário.
A motivação deste projeto é a dificuldade de se encontrar
Evitar informações genéricas sobre baladas.
informações em tempo real sobre atividades noturnas urbanas, conhecidas como baladas. Estas, na maioria das vezes, ocorrem em espaços fechados, impossibilitando pessoas que não participam da balada a ter acesso às informações sobre a mesma, como lotação, por exemplo. Para amenizar este tipo de problema, o grupo foi incentivado a criar uma ferramenta de interação, onde se é
Mostrar em tempo real, diferentes pontos da metrópole. Promover o compartilhamento de informação através do conceito prosumer e da web 2.0. Aprimorar a orientação dos usuários sobre os eventos das cidades.
possível ver como estão os locais reais das baladas que se deseja visitar, sem sair de casa ao mesmo tempo em que
Promover maior interação entre pessoas que frequen-
outra pessoa, presente no lugar, envie informações sobre
tam baladas.
a casa noturna em que se encontra. Baseada em uma transmissão ao vivo, pela TV, por exemplo, procuramos
Transformar dispositivos dotados de câmeras em cen-
uma abordagem onde os usuários possam por conta pró-
tros de mídia portáteis.
pria construir o conteúdo na interface proposta por meio de mensagens de áudio, vídeo, texto e imagens pelo compartilhamento de opiniões acerca das baladas visitadas.
Justificativa As pessoas buscam por informações sobre atividades
Objetivos gerais
ou locais para se visitar, porém, na web, muitas vezes,
Criação de rede social de temática específica voltada
sobre o evento em uma determinada situação.
não encontramos a informação que nos é específica
para baladas. Tanto os guias on line, como aplicativos voltados para Promover a interação entre os usuários para a criação
eventos, muitas vezes se tornam ineficientes do ponto
de conteúdo.
de vista do usuário, pois a informação contida nestas
15
mídias é, na maioria das vezes, corporativa e genérica, ou seja, os dados ali expostos são de casas noturnas em geral. Essas ferramentas não refletem como está o local em tempo real, e acabam por passar uma visão assemelhada a um realise institucional.
a sensação das pessoas que estão lá, no espaço físico real. No caso em específico deste projeto, escolhemos como foco os eventos noturnos urbanos, chamados popularmente de baladas.
Quando essas ferramentas permitem a inserção de comentários, as opiniões presentes sempre serão sobre eventos passados. Sabe-se que em baladas, em uma noite a mesma pode estar lotada, enquanto na noite seguinte, pode estar vazia e não gerar um ponto de vista positivo sobre o local. Tudo isto pouco contribui com a questão: Como está o evento agora?
Baladas geralmente ocorrem em ambientes fechados e isso gera a possibilidade de propormos a construção de uma rede social voltada ao público alvo que visita estes lugares. Na Balada, então, traz uma janela ao vivo do espaço, antes que o usuário o ocupe fisicamente, proporcio-
Em outros casos, só se é possível saber as condições de um local determinado, estando lá fisicamente. Com isto, existe a possibilidade de se ir até um acontecimento e não poder desfrutar do mesmo de acordo com a expectativa1.
nando uma metapresença, antecipando a experiência e a interação, diminuindo a ansiedade ao se descobrir, a distância, como o local se encontra. De acordo com André Lemos, a escolha da web participativa se justifica por ser um termo que permite não
Notamos, então, uma necessidade de se criar algo que traga dados mais específicos sobre os eventos urbanos, como: o que visitar, como está o local a ser frequentado em um determinado momento e qual é
apenas colaborar com o que é construído, mais também participar com discussões e procurar por novos interesses compartilhando a informação e fazendo com o que o conteúdo esteja sempre atualizado.
Na Balada
Anna Yuuki
Festa em tempo po real São Paulo
Vila Olímpia
Eletrônica
ir
Anna perfil áudio
A Lanterna
foto
vídeo
Spyzer. Balada eletrônica com vários DJs. Tá fervendo aki!!! 0.0
texto
São Paulo
Lola
Spyzer
Não sei como vcs aguentam esse vuco-vuco. Rsrsrsrsrs.
Descrição: SPYZER não é apenas um projeto de música eletrônica e sim uma experiência áudio-visual única, a união perfeita entre música eletrônica & acústica. Andy, Jay, Lhux e Rick são os nomes por trás desta idéia.
Thiago
x
x
Muito bom essa balada. Vcs sabiam que também existe uma banda com esse nome?
A Loca Armazém Lounge Disco Diferente e criativo, o Spyzer não é apenas um projeto de música eletrônica e sim uma experiência áudio-visual.
00:00
Pacha
Anna
Ébano
Não há comentários sobre este post. Seja o primeiro a escrever!!!
Muito boa! Tb fui na edição do ano passado. Vale muito a pena!!! M
Santa Aldeia Secrett Thiago
Love Story
x
Meu, que louco! Como gostaria de estar aí.
All Black Dolores Bar
x
Unha de Gato
Rafael R
Kasebre
H Hahahaha. Anninha, me diz onde vc está pq eu to nessa balada ttb. Agora eles estão tocando um dance pra ninguém ficar p parado.
Rafael R
x
E Esses caras já foram elogiados por sua vibe, técnica e sonorid dade. Tb já se apresentaram no Altas Horas e Programa do Jô.
Motorhead Spin
ver mais Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 2 – Tela de Na Balada, onde se é possível ver o compartilhamento de informação sobre uma dada balada na rede social.
1 Em 17 de abril 2009, na cidade de São Paulo, houve uma apresentação do tenor italiano Andrea Bocelli. Na ocasião do evento, houve um número maior de espectadores do que esperado, e o espaço definido (que era um local reservado) não suportaria a quantidade de pessoas, como resultando, muitos fãs não puderam entrar. A frustração gerada pelo inconveniente seria menor se houvesse um sistema em tempo real disponível para os interessados na exibição, de se ver o interior da mesma.
16
Objeto de Estudo
confecção de protótipo e vídeo do software mobile e testes de usabilidade também serão feitos.
Para auxiliar o público a visualizar atrações de seu interesse, com mais rapidez e precisão, e com conteúdo ao vivo propomos o aplicativo Na Balada, uma rede social de geolocalização onde o objetivo é ter informações de como e quem está frequentando uma balada em um determinado momento, podendo ser acessada por qualquer dispositivo com conexão a internet.
Referência enquanto mobile – Case Global Gincana (Ronald Lenz)
Com este software, o usuário poderá checar todos os
Primeiramente, como exemplos práticos temos o pro-
eventos noturnos que deseja frequentar e até mesmo
jeto de Ronald Lenz, estrategista, tecnólogo, e pesqui-
classificá-los em tempo real se gostou ou não do local
sador na área de serviços para dispositivos móveis.
e também ver opiniões de outras pessoas a respeito do estabelecimento. Em paralelo, podemos conside-
Lenz possui um projeto de interação entre Brasil e Ho-
rar que transmissões ao vivo, redes sociais na interne
landa chamado Global Gincana, concebida como uma
e a tecnologia modificaram a comunicação entre as
competição para crianças. A gincana consistia em ta-
pessoas e quais foram às consequências disto como
refas de buscar pontos e objetos dentro de um espaço
objetos de estudo.
estipulado pelos participantes e que eram propostas via torpedos. Os resultados destas tarefas eram enviados em forma de vídeos, fotos e áudio. Um exemplo de tarefa executada pelos holandeses e proposta pe-
Metodologia
los brasileiros, foi a de encontrar várias sandálias ha-
Consiste em pesquisas aprofundadas, como coleta
dã. E no Brasil, a atividade proposta foi a de encontrar
de dados sobre o público alvo, sobre aparelhos por-
paredes com grafittis.
vaianas espalhadas pelo centro da cidade de Amster-
táteis, troca de arquivos midiáticos, o uso da internet na comunicação, funcionamento de redes sociais,
Para a participação desta gincana, o participante pre-
comparativos com sites de localização de eventos e
cisava de um celular com GPS, conexão móvel com a
redes sociais já existentes, construção dos diferenciais
internet e um aplicativo criado por Ronald Lenz, cha-
do aplicativo Na Balada, pesquisa sobre hábitos dos
mado 7scenes. Com esse projeto Lenz transformou o
brasileiros sobre web e tecnologia mobile e a viabili-
espaço urbano em um playground, através da mobili-
dade do trabalho apresentado, se os locais propostos
dade tecnológica.
dispõem de conexão à internet, como funcionam as transmissões ao vivo e como integrar as diferentes tecnologias.
Portanto, esse conceito mostra como a tecnologia móvel pode interferir e criar cenários mais cativantes e naturais para que a informação possa ser passada e
Investigações sobre usabilidade, sociologia, design de
entendida de forma simples e objetiva. O projeto da
interação, cibercultura e design de software também
Global Gincana foi selecionado como referência, pois
foram apresentadas. Busca de informação em sites de
assemelha-se com o Na Balada, que também tem
relacionamento sobre eventos urbanos, como o Fours-
como um de seus objetivos, a criação de uma interfa-
quare, também foram analisados.
ce digital para celulares com conexão com a internet.
Em um segundo momento, criação de arte, estrutura-
A Global Gincana tem um público único, e a quantidade
ção de banco de dados para programação, fluxogra-
de informações transmitida é relativamente baixa o que
ma e construção de um protótipo da aplicação web,
difere deste projeto, que possui um público alvo diverso
17
e uma quantidade de informação a ser transmitida mui-
rágrafo acima, imaginemos a seguinte situação: dois
to maior, que necessita de um estudo mais avançado de
amigos que moram em países diferentes se comuni-
usabilidade, estrutura e navegação para a criação da in-
cam via carta. Depois do advento do e-mail, a carta é
terface que mediará o usuário e a informação.
deixada de lado, porém é sempre requisitada quando eles enviam postais impressos entre si. Esta pequena introdução se faz necessária, por que usaremos o conceito de hipertexto neste projeto.
Referência enquanto rede social – Case Marketing Online
Hipertexto é uma forma de comunicação onde os usuários podem produzir conteúdo a partir de algo pré-existente. Idealizado pelo engenheiro Vannevar Bush, em 1945 ao final da Segunda Guerra Mundial, o hipertexto seria algo como uma rede de textos, ou
Uma pesquisa realizada pelas empresas Altimer
seja, cada texto leva a outro que tenha um assunto
Group e Wetpaint (empresas de consultoria de pes-
principal em comum e assim por diante. Pierre Levy
quisa que ajuda empresas e indústrias a alavancar
em seu livro “As tecnologias da inteligência” descreve o
vantagem), mostra que o setor de negócios também
hipertexto, como um espaço onde há a manipulação
utiliza as redes sociais como forma de comunicação
entre textos, sons e imagens para a criação de conteú-
de seus serviços. Estima-se que com essa ferramenta,
do. Segundo Levy, 2000, p.33:
as companhias aumentaram em 18% suas vendas. Há alguns casos de corporações que tiveram sucesso ao
“Ao entrar em um espaço interativo e reticular de manipulação, de associação e de leitura, as imagens e sons
utilizar as redes sociais como veículo de propaganda,
adquirem um estatuto de quase-textos. Tecnicamente
como, por exemplo, a venda de um imóvel de 500 mil
um hipertexto é um conjunto de nós ligados por co-
reais por meio do Twitter, realizada pela construtora
nexões. Os nós podem ser palavras, páginas, imagens,
Tecnisa.
gráficos ou partes de gráficos, seqüências (sic) sonoras, documentos complexos que podem ser eles mesmos hipertextos. [...]. Navegar em um hipertexto significa,
Outro exemplo foi a Palm, fabricante de aparelhos
portanto, desenhar um percurso em uma rede que
portáteis, que aumentou a venda de seus telefones
pode ser tão complicada quanto possível. Por que cada
celulares por meio de um aplicativo no Facebook. As
nó, pode, por sua vez, conter uma rede inteira.”
redes sociais mostram a ligação dos indivíduos à marca que admiram, e por isto, elas são ferramentas importantes nos dias atuais.
Sistemas de hipertexto também podem ser úteis quanto à organização da informação. Estudos comprovam que quando o ser humano conversa oralmente, existe uma tendência ao desvio da informação. Já quando utilizamos a forma escrita a mesma informação passa a ser mais bem organizada. Diferentemente
A Tecnologia e a comunicação
dos livros, onde a informação é gerada e guardada, os
Aparelhos como telégrafos, telefones, computadores,
o que torna os hipertextos sistemas do “para o agora”.
telefones celulares e etc. são incorporados na comu-
Isto não é uma desvantagem, embora certos filósofos
nicação entre as pessoas sempre mudando o modo
receiem que esta nova forma de comunicação não
como as mesmas interagem entre si. Essas novas tec-
deixe sua marca na história. Ainda segundo a ideo-
nologias, também chamadas de ferramentas, pelo
logia de Pierre Levy, podemos dizer que o conteúdo
filósofo Pierre Levy, 2000, não vieram para substituir
digital se constroi a partir da velocidade, do atual e
as já existentes, mas sim, como uma complementação
da pluralidade de autores que uma informação pode
do que já havia anteriormente. Para exemplificar o pa-
ter. Por estarem conectados a uma rede, os autores da
sistemas digitais têm a vantagem da velocidade. Podemos ter acesso a uma informação em tempo real,
18
informação dividem o mesmo espaço no hipertexto,
cia física que, por meio destes dispositivos ligados ao
ou seja, um texto escrito por um autor no Brasil pode
corpo podem sentir sensações de calor, frio, tato, pres-
ser alterado por outra pessoa que esteja na Inglaterra,
são e vibração captadas por sensores instalados em
por exemplo. Futuramente, os hipertextos produzi-
próteses de membros amputados. O sistema é com-
dos hoje também poderão servir como um documen-
posto de pequenos sensores conectados a um circuito
to histórico para as próximas gerações entenderem
integrado. De acordo com Glauco Caurin, professor da
como foi o nosso presente.
Escola de Engenharia de São Carlos, EESC, os usuários de prótese aprendem a lidar com as informações que
Enfim, o conceito deste trabalho gira em torno dos
os sensores estão captando e com o tempo adquirem
próprios usuários criarem seu conteúdo, pois esta
uma percepção apurada de temperatura, por exemplo.
ideia é muito aplicada na internet atual com as redes sociais, blogs, sites jornalísticos, e-mails, troca de men-
Mizuko Ito, socióloga japonesa na área de tecnologia,
sagens, etc., pois cerca de 90% das pessoas pesquisam
afirma em seu livro “Personal, Portable, Pedestrian,
na web as informações que desejam, segundo pesqui-
Mobile Phones in Japanese Life” que o celular em
sa da empresa TNS Research International. O sistema
específico possui uma força agregadora, ou seja, ele
de trocas de mensagens é útil em relação ao presente,
reúne as pessoas. Sem dúvida, vemos isso em exem-
ao “aqui e agora” do usuário enquanto ele manipula
plos de flash mobs, que são reuniões-relâmpago,
o aplicativo. O uso das redes sociais também pode-
onde as pessoas se juntam com determinado objetivo
rá servir como canal de marketing para as empresas
e depois se dispersam. Atualmente as pessoas consi-
organizadoras de baladas, pois ali serão postadas as
deram o celular da seguinte maneira: Não é um mero
impressões do público sobre o mesmo, pois no para-
telefone, é um aparelho personalizável e importante
digma da internet, todos somos consumidores e pro-
para o relacionado entre pessoas. Ao invés de eliminar
dutores de informação.
meios de comunicação tradicionais, o celular agrega valor a elas. Finalmente, o celular contribuiu para a for-
Além do conceito de internet em computadores, tam-
mação de uma sociedade multitarefa em que há uma
bém podemos considerar seu efeito sobre dispositi-
dificuldade em se concentrar em apenas um assunto
vos portáteis. Notamos que atualmente se discute so-
em um determinado momento, mas, com facilidade
bre telefonia celular, um dos objetos de estudo deste
de fazer várias atividades paralelas.
trabalho. Sobre eles podemos dizer que quando os celulares foram criados, havia pessoas que eram contra e a favor dessa (na época) nova tecnologia. Havia indivíduos que se incomodavam com o barulho, com as conversar alheias, por que não se tinha a mesma privacidade de um telefone fixo. As pessoas que eram a favor gostavam por que o aparelho trazia segurança
Em suma, o celular mudou a vida das pessoas, no sentido em que tornou mais fácil a comunicação entre diferentes grupos. Somados as novas tecnologias que surgem no dia a dia, podemos incorporar novas ferramentas ao uso do aparelho, de modo que ele possa facilitar ainda mais.
e facilidade de comunicação. Embora, originalmente tenham sido concebidos com o propósito de realizar as tarefas de um telefone fixo, mas com a praticidade de se levar no bolso, atualmente, os celulares possuem funções de rádio, televisão, máquinas fotográficas, reprodutores de mp3, filmadoras, acesso à internet entre outras. Hoje em dia esses gadgets são verdadeiros computadores de bolso e com cada vez mais recursos.
André Lemos e o conceito de cibercidades Um conceito que desejamos levar ao nosso projeto é o sentido de cibercidade proposto por André Le-
Próteses robôticas também são consideradas gadgets.
mos, onde um espaço virtual de uma dada zona me-
Os usuários desses sistemas são pessoas com deficên-
tropolitana pode influenciar o cotidiano das pessoas
19
que vivem em seu espaço físico real. De acordo com André Lemos, cibercidades são espaços virtuais onde existem os chamados “quase-objetos” que são ícones com função de sinalização, monumentos, dentre outras coisas existentes nas cidades reais. Neste contexto, o usuário passa a ser chamado de cibercidadão, pois passa a transitar nestas cidades eletrônicas e ter uma relação muito próxima a elas. As cibercidades, assim como redes sociais, são sistemas emergentes e sem hierarquia, ou seja, são aplicações do tipo bottom up. Segundo Lemos, em Janelas do Ciberespaço, 2000, página 15: Como virtualizar a efervescência festiva de uma cidade como Salvador, por exemplo, ou como exprimir o charme de Paris ou a dinâmica veloz de Nova York? (...) Como virtualizar uma cidade sem criar uma visão este-
físicas, porém discordamos, a medida que pensamos que isto pode ser relativo ao que esta virtualização representa e a quem se dirige. Ao mesmo tempo são trazidas vantagens, como uma melhor visualização do ambiente em que vivemos. De acordo com Lemos, em Janelas do Ciberespaço, 2000, página 33: Se uma cidade pode ser vista como aquilo que se configura no espaço a partir de trocas de comunicação e transporte de matéria e energia, o ciberespaço pode potencializar e mesmo complexificar nossa visão e interação com o espaço que habitamos. Ele pode criar sinergias comunitárias, auxiliar planificações e execução de projetos em comum, criar canais efetivos com os poderes públicos, e quem sabe, reaquecer os espaços reais a partir de uma maior participação dos cidadãos. As redes podem, e já mostraram, servir como vetor potencializador de formas comunicativas livres e democráticas.
reotipada e asséptica da mesma? Mais ainda, o que vai estimular as pessoas a participarem de suas respectivas cidades digitais se as formas de interação on-line são facilmente (e gratuitamente) construídas como lista de discussão? (...) As respostas ainda não foram encontradas, embora tentativas mais ou menos felizes estejam em marcha.
As metrópoles são agrupamentos onde diferentes grupos convivem, e por isto não é possível organizar uma cidade virtualmente de um modo que agrade a todos. Mas ao mesmo tempo, deve-se, através de uma cibercidade, potencializar o uso do espaço urbano real, e esta é uma das propostas do projeto Na Balada, onde os usuários podem ver o que acontece nas metrópoles em tempo real, mesmo que não esteja no lugar físico de determinado evento. Ainda sobre os conceitos de Lemos, podemos dizer que esse tipo de ferramenta auxilia em uma desterritorialização das cidades, pois o espaço torna-se maior e as fronteiras diminuem. As novas tecnologias construíram dois tipos de espaços urbanos virtuais que podem ser virtualizações de instituições presentes na cidade física e outros que oferecem informações turísticas e culturais dos lugares, Na Balada pode ser enquadrado no segundo grupo, pois seu objetivo visa ao prazer e ao entretenimento de seu público alvo. O autor coloca que a criação de espaços virtuais sobre ambientes urbanos podem torna-se problemas a medida que passam a ser mera propaganda das cidades
Em suma, podemos dizer que o poder de uma cibercidade, ou até mesmo de uma rede social como o Na Balada e outras já existentes podem aumentar a relação das metrópoles com os cidadãos que nela habitam para uma melhor interação nos espaços reais e virtuais. Nos propomos a intensificar esta relação a medida que o nosso usuário-alvo possa se comunicar melhor com os eventos da cidade, se inteirando de modo mais interativo ao que acontece no espaço urbano em que vive.
20
CapĂtulo I Na balada Festa em tempo real Conceitos Fundamentais
O projeto proposto a seguir é uma rede social intera-
organizadas. Os programas também passaram a ter o
tiva, onde os usuários, por meio de computadores ou
código aberto, ou seja, qualquer pessoa pode contri-
aparelhos portáteis terão acesso a diferentes informa-
buir com o seu desenvolvimento e programação.
ções vinculadas a baladas que estejam ocorrendo em suas cidades. Antes da descrição do mesmo, entre-
A web 2.0 tem como iniciativa o uso de softwares que
tanto, é necessária uma reflexão dos conceitos que o
funcionam diretamente da rede, sem a necessidade
tornaram viável.
de te-los instalados em um computador local. Este tipo de aplicação é chamado de cloud computing, que numa tradução aproximada significa “computação nas nuvens.” Este uso da informática tornou-se possí-
1.1- Web 2.0
vel a partir do final da década de 1990, com o advento de novas tecnologias que permitiram à web um au-
É um conceito de internet, onde os produtores pas-
mento de velocidade na transmissão de dados e no
sam a ser consumidores de conteúdo e iniciam a com-
compartilhamento do conteúdo. Também foi possível
partilhar dados entre si. Ou seja, antes desse padrão,
o desenvolvimento de aplicativos quase prontos, de
apenas os desenvolvedores de software e produtores
modo que um beta passou a ser muito parecido com
de web sites criavam todo o conteúdo disponível na
sua versão final. Novas ferramentas como as wikis e os
rede. Atualmente, com o conceito de web 2.0 a inter-
blogs também se tornaram comuns.
net passou a ser chamada de plataforma, envolvendo aplicativos que funcionam com base de redes sociais
Como nesta interface os softwares funcionam dentro
e tecnologias de informação. Com isto, quaisquer
da própria web, os mesmos deixaram de serem produ-
usuários podem construir e disponibilizar dados. O
tos e passaram a ser serviços, alguns pagos e outros
termo, que foi criado pela empresa O’Reilly Media, é
fornecidos gratuitamente. A rede P2P foi um advento
considerado desnecessário por especialistas em tec-
da web 2.0, no qual cada usuário faz o papel do ser-
nologia, pois os críticos alegam que a web atualmente
vidor, trocando arquivos entre si, de modo que os
utiliza muitos recursos que são predecessores da in-
grandes servidores passam a ter uma menor impor-
ternet como um todo e não apenas desse novo para-
tância. Dentro deste conceito de internet também é
digma. Resumidamente, podemos dizer que a web 2.0
possível usar o princípio do software livre, onde cada
é um novo modo de ver a rede, onde aplicativos são
usuário corrige os possíveis erros em comunidades
desenvolvidos ao mesmo tempo em que são utiliza-
que se auto-moderam. Como o conteúdo é aberto,
dos pelas pessoas.
um novo tipo de licença se tornou muito popular, a creative commons (CC) que tem direitos autorais flexí-
Este conceito de internet possui características bem
veis, de modo que qualquer um possa utilizar e alterar
próprias como, por exemplo, a existência do beta
seu conteúdo.
eterno, ou seja, um aplicativo nunca estará totalmente finalizado, dados e serviços se tornam públicos e
A organização da informação neste espaço é feita
passam a ser acessados e editados por outras pes-
através de taxonomia, ou seja, ao invés de criar pastas
soas, aplicações abertas são mais utilizadas, e os da-
e categorias, é utilizado o conceito de palavra chave
dos sobre um determinado tema são gerados pelos
para a busca de determinado assunto. Deste modo,
próprios usuários. O conceito de software para este
quanto mais pessoas marcarem determinado tema,
princípio da web é de que, quanto mais utilizado, mais
mais facilmente o mesmo será encontrado. Na nova
qualidade o mesmo adquire. O usuário experimenta
internet o uso do consumer-generated media (CGM)
um programa, e dá uma resposta aos desenvolvedo-
ou mídia gerada pelo consumidor está amplamente
res dizendo se o mesmo é bom ou ruim. Em paralelo,
presente. Deste modo os usuários passam a expressar
as informações são ligadas a marcadores, que ajudam
suas opiniões de forma mais direta. O sistema CGM
os programadores a tornarem as informações mais
está um vários serviços como fóruns de discussão, Wi-
22
kipedia, YouTube, e Facebook. As pessoas passam a utilizar ferramentas como e-mail, MSN, entre outras para divulgar suas experiências sobre determinados serviços e notícias. Com todos estes recursos, até mesmo empresas físicas passaram a abrir lojas virtuais e sites de compras. No campo da propaganda, foi criado o marketing de desempenho, onde alguém contrata um serviço de publicidade e, só paga, se o mesmo gerar retornos satisfatórios. Links patrocinados e prêmios por clikes a banners também se tornaram uma forma de ganhar dinheiro com esta forma de internet. O cross-media, ou seja, a utilização de várias mídias para se divulgar um produto ou serviço se popularizou graças à versão 2.0. O jornalismo também se tornou participativo, já que cidadãos comuns passaram a opinar sobre as matérias publicadas em sites. A este tipo de serviço damos o nome de Jornalismo Cidadão ou Jornalismo Open-Source. Com o potencial colaborativo, novos assuntos, serviços e notícias são criados. A colaboração também pode ser utilizada como forma de construção de conceitos que utilize ferramenta pedagógica, onde serviços on-line oferecem espaços de debates e trabalho coletivo. Quanto às tecnologias empregadas na web 2.0, podemos dizer que na segunda metade dos anos 1990, a Sun Microsystems lançou a chamada “The network is the computer” (a rede é o computador) fazendo com que a internet se transformasse em uma grande plataforma de desenvolvimento. O slogan veio de uma premissa de utilização de linguagens multiplataformas como o Java, por exemplo. Técnicas como o remote scripting, que mais tarde originou o navegador Firefox se tornaram mais acessíveis e linguagens como ColdFusion e XML tornaram as tecnologias multiplataformas, onde a web passou a ter acesso também de PDAs e de celulares.
1.2 - Redes Sociais Redes sociais fazem sucesso no mundo todo devido à facilidade de compartilhamento da informação, ou seja, os usuários sentem-se satisfeitos ao postar dados pessoais na rede de forma que demais pessoas
vejam. Graças a este comportamento, as redes sociais tornam-se auto-sustentáveis quando observadas pelo ponto de vista financeiro. Em outras palavras, agora é possível para as empresas de vendas selecionarem “a dedo” possíveis compradores, pois, pode-se descobrir o perfil de compras de um usuário por meio de seus gostos postados nos sites de relacionamentos. Nota-se também que todas as classes sociais usam o recurso de rede social igualmente, já que as camadas C e D utilizam computadores públicos para o acesso as mesmas. Uma rede social, também chamada de site de relacionamentos, pode ser definida como uma estrutura cultural composta por pessoas que compartilham de valores e objetivos em comum. Uma das características deste tipo de organização está em uma hierarquia inexistente entre os participantes. Em uma rede social a interação entre as pessoas acontece por meio de sua identidade e podem operar em redes de relacionamentos, profissionais, comunitárias, políticas entre outras, sempre tendo em comum indivíduos que tenham algum interesse em específico. De acordo com a revista Veja, segundo dados coletados na matéria “Nos laços (fracos) da internet” (Editora Abril. Nos laços (fracos) da internet. Veja, São Paulo, SP, nº 2120, 08 jun. 2010), No Brasil, podemos dizer que as redes sociais são responsáveis por cerca de 60% do tráfego de dados na internet. As mais populares são o MSN Messenger, o Orkut, o Facebook e o Twitter. De acordo com matéria publica na revista Veja, edição de abril de 2010, as redes sociais mais populares no Brasil são:
23
Tabela 1 - Redes sociais mais utilizadas no Brasil Rede social
Número de usuários
Número de usuários %
MSN Messenger
27,4 milhões
76
Orkut
26 milhões
72
Youtube
20 milhões
60
9,8 milhões
27
9,6 milhões
26
Skype
Cinco milhões
14
Formspring
Quatro milhões
11
Flickr
3,5 milhões
10
Ning
Três milhões
9
Sônico
Dois milhões
5,5
Myspace
1,5 milhão
4,1
1,5 milhão
4
Foursquare
170 mil
0,3
Vale lembrar que as redes sociais podem ser classificadas de acordo com o tipo de serviço oferecido pelas mesmas.
Tabela 2 - Principais serviços das redes citadas Rede social
Serviço
MSN Messenger
Comunicador instantâneo
Orkut
Serviço de comunidades e fóruns
Youtube
Hospedagem de vídeos
Troca de mensagens curtas
Rede social de interação entre pessoas
Skype
Vídeo-chat e telefonia voip
Formspring
Rede de perguntas e respostas
Flickr
Hospedagem de fotografias
Ning
Site onde empresas criam comunidades próprias
Sônico
Serviço de comunidades e fóruns
Myspace
Conteúdo musical
Contatos profissionais
Foursquare
Voltada para mobile e geolocalização
Os usuários também acessam as redes sociais com o
Notamos que redes sociais são estruturas emergentes
objetivo de ganhar status através das mesmas. Esses
que crescem a partir de laços fortes e laços fracos, de
tipos de reconhecimento podem ser artistas, pen-
acordo com a socióloga Raquel Recuero, utilizando os
sadores, empreendedores, engajados (pessoas que
conceitos do sociólogo espanhol, Manuel Castells. Es-
usam a influência em prol de movimentos virtuais de
tes conceitos falam principalmente sobre Capitalismo
cunho social, cultural e ambiental), alavancados (usu-
Informacional, ou seja, mudanças nos sistemas sociais
ários comuns que realizaram ações que ultrapassaram
influenciadas por novas tecnologias. Nessa perspec-
a barreira do virtual).
tiva, a tecnologia não determina o que a sociedade
24
venha utilizar como modos de interação e vice-versa. Ainda de acordo com Castells, nesse contexto o estado deveria assumir um papel de mediador entre a informática e a sociedade. Podemos dizer que as redes sociais dentro do capitalismo informacional é formada por laços fortes e fracos e cada qual com as características, que serão exemplificadas a seguir. Laços fortes compõem a minoria das ligações das redes sociais, já que são formados por pessoas que se conhecem tanto no plano virtual como no físico. Normalmente são redes com poucos membros e todos recíprocos entre si. Já os laços fracos são formados por usuários que mantém contato apenas no âmbito virtual e que ainda assim, nem sempre interagem entre si.
2. Redes de mundos pequenos: são pequenas redes sociais interligadas umas as outras. 3. Redes sem escalas: é o oposto das redes igualitárias. Nesse tipo, cada perfil de usuário ou cada rede social mais popular possui um número maior de seguidores, enquanto os menos evidentes possuem poucos links entre internautas. Outro ponto valorizado nas redes sociais é o capital social. Este aspecto nada mais é do que a percepção do usuário sobre o sistema. Neste caso podemos associar a quantidade de “amigos” que o internauta possui, já que uma vez adicionadas, essas pessoas são manti-
25
Figura 3 – Rede social de laços fracos, tipo mais comum encontrado na internet. Nota-se que os pontos centrais (perfis mais populares) concentram mais seguidores.
As redes sociais também podem apresentar topologias, ou seja, se comportar de diferentes modos a partir de sua organização.
das pelo sistema. Este tipo de interação é claramente definido por laços fracos. Os aspectos de capital social, mais valorizados pelos usuários são:
1. Redes igualitárias: todos os pontos são ligados de modo equivalente, ou seja, cada perfil possui, aproximadamente, o mesmo número de seguidores.
1. Visibilidade: se refere ao quanto os usuários são visíveis na rede, ou seja, o quanto popular eles são. Isto significa que quanto mais um nó (usuário) é visí-
vel, mais conexões ele possui e, portanto mais acesso
como por exemplo, espalhar recados com imagens
a informação.
ou até mesmo vírus de computador. Segundo Raquel Recuero, em Redes Sociais na Internet, 2009, pg.133:
2. Reputação: é o valor entre os usuários sobre o “eu”, os “outros” e a percepção da comunidade. A reputação então pode ser definida como a impressão dada
“(...) As informações difundidas na internet possuem um forte componente relacionado ao capital social percebido nessas redes. Assim, as pessoas publicam
por um indivíduo da rede social aos demais usuários,
as informações não de forma aleatória, mas baseada
podendo ser boa ou má. Pode estar ligada também ao
na percepção de valor contida na informação que será
número de internautas participando da rede, já que
divulgada.”
uma que tenha mais seguidores pode possuir melhor reputação. 3. Popularidade: está relacionada com a audiência das redes sociais. Podemos associá-las com o número de postagens em um blog, comunidade, visitas a um perfil e quantidade de links na página.
Por fim, nas redes sociais há o conceito de comunidade. As comunidades virtuais são grupos de pessoas que se unem com um objetivo ou um interesse em comum. Neste caso existe a particularidade das pessoas não terem a necessidade de estarem juntas fisicamente para a formação de equipes. Esses indivíduos com questões compatíveis discutem assuntos que lhe são
4. Autoridade: é a influência de um usuário na rede
relevantes como política, artes, cinema e etc. Devido a
social, relacionado à reputação. Normalmente as pes-
este modo de pensar, procuramos interagir com pes-
soas que buscam a autoridade são aquelas que mais
soas que se proponham a trocar informações sobre
se comprometem com a rede social.
baladas na cidade.
Outra característica de redes sociais é que as mesmas
Para concluir, podemos considerar que as redes sociais
podem difundir a informação entre os usuários de
irtuais mudaram o modo de como as pessoas com in-
modo interativo e emergente. A distribuição da in-
teresses particulares se relacionam, pois as mesmas
formação está ligada a teoria dos memes. Um meme
interagem entre si mesmo estando longe fisicamente
é o elemento de discussão de uma dada cultura como
umas das outras.
produto das idéias difundidas numa rede. Segundo Raquel Recuero, em Redes Sociais na Internet, 2009, pg.122: “Dentro desta perspectiva, os memes são compreendidos como potencializados pela rede e parte da dinâmi-
1.3 - Web App ou Aplicação web
ca social desses ambientes. Entre os vários exemplos estão a propagação de informações como jogos, vídeos,
Um web app ou aplicação web é um programa utili-
imagens e etc. Observada pelos autores.”
zado através da internet, em oposição aos softwares, normalmente instalados diretamente no disco rígido
Os memes são replicadores de idéias já que eles pas-
de computadores locais.
sam adiante a informação postada. Eles também são metamórficos por que se transformam com o passar
Web app são úteis devido ao longo alcance da internet
do tempo nas redes, podem ser persistentes (quando
e a facilidade de se utilizar algum programa navegador,
se repetem muitas vezes e epidêmicos (quando os
sem a necessidade de desenvolver um aplicativo que
usuários começam a replicar a informação). Quan-
seja focado em um determinado sistema operacional.
to ao alcance eles podem ser globais, ou seja, estão
A capacidade de atualização de uma aplicação on-line
presentes em comunidades internacionais ou sim-
também é uma das características deste tipo de con-
plesmente locais. Memes e capital social estão rela-
veniência. Os serviços mais comuns desta área são web
cionados entre si. Isto porque há um controle da in-
e-mails, vendas virtuais, leilões e wiki. Este tipo de aplica-
formação criada pelos próprios usuários na internet,
ção se desenvolveu em oposição aos antigos programas
26
do tipo cliente-servidor, onde cada software era instalado separadamente, computador por computador. O inconveniente deste tipo de serviço era de que quaisquer modificações que fossem feitas precisavam ser uma de cada vez. Com os adventos do JavaScript e do Flash as aplicações web tornaram-se possíveis, pois houve uma
na área, a WAP também passou a interpretar a programação XML. Ainda hoje é muito utilizada, mesmo sendo uma linguagem ultrapassada e cara, já que a mesma é cobrada por bits baixados e possui uma velocidade de conexão muito lenta. Por ser muito limitado, este tipo de conexão não será utilizado em nosso projeto.
maior interação e dinamismo das páginas da rede. Por meio destas tecnologias, desenhos dinâmicos, reprodução de áudio entre outros recursos se tornaram disponíveis e muitas interfaces vêm utilizando essas ferramentas conjuntamente para criar outra maior. Para que uma web app funcione corretamente, é preciso que sua programação seja feita em camadas, onde cada uma possui uma função especial, sendo a mais comum, o desenvolvimento em três níveis. Estes planos são chamados de apresentação, aplicação e armazenagem.
1.4.2 – 2G e 2.5G As tecnologias 2G e 2.5G têm como objetivo aumentar a eficiência do sistema GPRS, que nada mais é do que internet via rádio. A principal diferença entre esta geração e a WAP está na taxa de transporte nos dados. Elas também funcionam com os sistemas GSM, GPRS e EDGE. Abaixo, uma tabela com as principais diferenças entre os sistemas.
Entretanto, por não serem softwares armazenados no computador, os mesmos possuem vantagens e desvantagens em relação a programas tradicionais. Como benefícios, podemos citar o pouco uso de memória ROM, não possuem necessidade de atualização, fácil interação com outros aplicativos e geralmente não possuem incompatibilidade com sistema operacional. Já como pontos negativos há a necessidade de browsers compatíveis, conexão com a internet e perda de flexibilidade, já que os aplicativos não costumam possuir código aberto.
1.4.3 - 3G e 3GS A terceira geração da internet sem fio consiste em conexão banda larga para celulares e outros tipos de gadgets. Atualmente, é o tipo de conexão mais utilizado em território nacional, cobrindo quase metade da população do país. A diferença entre 3G e 3GS está apenas na potência de transmissão
Tabela 3 – Diferenças de transmissão de dados entre tecnologias 2.5G Tecnologia GSM GPRS EDGE (2G)
Serviço
Taxa de transmissão ITC
Taxa de transmissão 8 ITC
Voz
13
13
Circuito
14,4
14,4
Voz
13
13
Circuito
21,4
171,2
Voz
13
13
Circuito
59,2
473,6
1.4 – Conexões wirelles
dos dados, já que o “s”, significa speed, ou seja, ve-
1.4.1 - WAP
taxa de transmissão mais veloz que as utilizadas
Criada nos anos 1990, a WAP tinha como objetivo a leitura de páginas HTML, embora na prática reconhecesse apenas a linguagem WML para a visualização em telefones portáteis. Com o passar do tempo, e com inovações
até então, fazendo com que muitos serviços, como
locidade em inglês. Podemos dizer que a 3G é a terceira geração da tecnologia móvel com uma
a vídeo-chamada, se tornassem mais viáveis financeiramente. Isto possibilitou serviços como a banda larga para aparelhos portáteis, TV em aparelhos
27
rência de dados ampliando o que já era oferecido
1.5 – Sistema de Posicionamento Global – GPS
pelos aparelhos 3G. Suas principais diferenças en-
O GPS (sistema de posicionamento global) foi criado
tre a tecnologia anterior é de que seus aparelhos
pelo Departamento de Defesa dos Estados Unidos
possuem maior desempenho (256 Mb RAM contra
no fim da década de 1970 com o objetivo de precisar
152 Mb RAM), melhor processamento de gráficos,
bombardeios contra países inimigos. Como era utili-
comandos de voz, recursos de acessibilidade, Wi Fi
zado principalmente pelas forças armadas norte-ame-
de melhor alcance e com relação ao hardware dos
ricanas, até o início dos anos 2000, por prevenção, o
aparelhos, podemos dizer que as baterias se torna-
sistema tinha margem de erro de cerca de 100 metros.
ram melhores com relação ao tempo de vida útil e
No entanto, a partir daí o GPS foi aberto para uso civil
também com maior duração entre cargas.
e essa margem caiu para entre 5m e 20m. O sistema é
de celular, jogos tridimensionais e do tipo multiplayers e downloads mais velozes. A tecnologia 3Gs já engloba um conceito maior de taxa de transfe-
baseado em 24 satélites militares americanos que fornecem coordenadas precisas de localização geográfica
Por ser uma tecnologia incorporada recentemente em
Tabela 4 - Operadoras e transmissão 3G no Brasil até agosto/2009 Operadora
2008
1T09
2T09
Ago/09
Vivo
314
379
474
546
Claro
282
345
376
376
Tim
23
45
48
48
Oi
50
52
103
103
BrtMóvel
49
49
49
49
CTBC
16
16
23
29
Sercomtel
-
-
2
2
Total
448
523
632
677
território nacional, a 3G atende a uma determinada quantidade de pessoas.
Tabela 5 – Relação de pessoas cobertas com tecnologia 3G até agosto/2009 Operadora
2008
1T09
2T09
Ago/09
Vivo
48,0%
52,6%
55,5%
59,5%
Claro
50,3%
53,4%
53,9%
53.9%
Tim
19,3%
25,4%
25,6%
25,6%
Oi
18,0%
18,0%
31,1%
31,1%
BrtMóvel
9,3%
9,3%
9,3%
9,3%
CTBC
1,1%
1,1%
1,2%
1,2%
Sercomtel
0%
0%
0,3%
0,3%
Total
58,8%
61,0%
62,5%
63,5%
Fonte: ComScore
28
Tabela 6 – Quantidade de celulares 3G no Brasil até agosto/2009 Milhões
4T08
1T09
2T09
Total de Celulares (milhões)
2,1
3,0
4,0
Total de Celulares (milhões)
1,1
1,6
2,1
Fonte: Anantel
aos terminais portáteis com antenas para captar seus sinais. Receptores fixam a posição calculando o tempo de percurso dos sinais de rádio de pelo menos três dos 24 satélites GPS que giram em torno da Terra em órbitas com cerca de 20 mil quilômetros de altitude. Os satélites são referências no espaço, pois com as informações de navegação que os mesmos enviam, é possível calcular a localização geográfica de um usuário em um dado instante. Assim, pelo processo de trilateração é possível calcular a distância de determinados lugares. Mede-se o tempo que o sinal demora a chegar do satélite até
Mais um detalhe que pode afetar a precisão dos cálculos é a localização dos satélites. Se, por exemplo, quatro satélites se encontrarem na mesma órbita, a informação vinda será mais ou menos da mesma área afetando a precisão da localização. Caso a distância seja maior, o que se irá passar é que a área abrangida pelo sinal dos satélites será maior, isso também afeta a exatidão do sistema GPS, o que fará com que a margem de erro seja aumentada. Levamos em consideração o conceito de GPS, que, mesmo não sendo um foco do trabalho, foi uma das referências de pesquisa. Isto se deve ao fato
29
Figura 4 - Esquema de funcionamento GPS automotivo
o receptor e a seguir, divide-se pela velocidade de propa-
de que o nosso objetivo é a criação de uma rede que de
gação do sinal. O satélite envia na verdade dois sinais. Um
certo modo, mostra onde as pessoas estão.
bastante preciso que pode ser utilizado por militares e entidades devidamente autorizadas. O outro sinal é recebido pelos aparelhos usados pelos civis e contém margem de erro. As condições atmosféricas, geográficas ou até mesmo construções como edifícios podem afetar a recepção
1.6 – Streaming
dos dados. Por isso deve-se estar sempre em espaço aber-
Streaming é a tecnologia que permite à internet a trans-
to para receber o sinal nas melhores condições possíveis.
missão de vídeos ao vivo. Esta técnica surgiu em me-
ados dos anos 1986, funcionando primeiramente com
lizados atualmente, que têm por principal objetivo o
áudio no sistema mono e depois com áudio e vídeo no
compartilhamento da geolocalização são o FourSqua-
sistema stereo. Nota-se que o software Real Player, foi
re, e a ferramenta Places da rede Facebook. Em âmbito
fundamental para o desenvolvimento do streaming,
nacional, tomando a cidade de São Paulo como exem-
pois foi através dele que a primeira transmissão audio-
plo, temos o site da revista Época São Paulo e o Guia
visual em tempo real via internet aconteceu.
Folha On LIne. Segue, abaixo, uma breve descrição de cada serviço, bem como as ferramentas disponibiliza-
Esta transmissão em questão foi voltada para os
das por cada um deles:
esportes, onde foi exibido um jogo de rúgbi entre os times Clevelan Indians e Seatle Marines, no EUA, em 9 de abril 1997. Esta tecnologia é frequentemente utilizada para a distribuição de conteúdo
1.7.1 - Google Maps
audiovisual, onde os dados não são arquivados na
Site pertencente ao Google. Nele é possível procurar
máquina pessoal do usuário, seja o hardware de um
por estabelecimentos através de número de CEP, en-
computador ou um dispositivo portátil. Este tipo de
dereço e por nomes de ruas, bairros, cidades e pontos
transmissão depende da largura de banda de inter-
importantes de uma dada região. A página é especí-
net, funcionando melhor com banda larga, pois os
fica para localização e não possui meio de se compar-
vídeos são armazenados em servidores. Vale lem-
tilhar a informação com outras pessoas. Os aspectos
brar que graças a esta tecnologia, foi possível para
positivos desta ferramenta são a possibilidade de se
as pessoas reproduzirem em seus aparelhos, vídeo
acessar um endereço e se ter uma listagem dos servi-
e áudio protegido por direitos autorais sem a ne-
ços disponíveis nas proximidades do mesmo.
cessidade de download, em esquema parecido com o utilizado pelo rádio e televisão. Esta tecnologia também utiliza o conceito de vídeo em demanda, ou seja, o usuário escolhe o que e quando assistir.
1.7.2 - FourSquare
A distribuição deste tipo de material pode ser fei-
Rede social internacional com aproximadamente três
ta através de protocolos de dados e também sobre
milhões de usuários. Nesta comunidade on line os in-
qual será o formato de mídia disponibilizado.
divíduos podem compartilhar informações dos lugares onde estão. À medida que outras pessoas acessam estes locais, o usuário que fez a indicação ganha selos virtuais. Podemos dizer que o site simula um jogo, já
1.7 – Páginas de geolocalização e redes sociais
que quanto mais selos o usuário possui, maior é seu
Atualmente há diversos sites de geolocalização, onde
1.7.3 – Places - Facebook
status na rede social.
as pessoas podem compartilhar dados sobre o que acontece ao redor do mundo em tempo real, ou não.
Ferramenta dentro do site de relacionamentos Facebook, onde o usuário pode dizer em tempo real onde
Se levarmos em conta apenas a localização do espaço
se encontra e compartilhar informações sobre even-
físico, a aplicação de geolocalização mais popular é o
tos com os seus amigos. Não possui transmissão de
site Google Maps, onde temos acesso a ruas, avenidas
vídeo e som, sendo as mensagens escritas a única fer-
e endereços variados, bem como o que existe nesses
ramenta existente. Também é possível ver quem são
lugares como também a visão dos mesmos, embora
as outras pessoas cadastradas no Facebook que tam-
com a desvantagem de não ser uma exibição em tem-
bém estão nesse acontecimento, mesmo que elas não
po real. Os sites, ou até mesmo redes sociais mais uti-
estejam na lista de contatos de determinado usuário.
30
1.7.4 – YouTube
1.7.7 – Guia Folha OnLine
Site onde os usuários postam vídeos e comentam sobre os mesmos através de mensagens de texto, número de estrelas (quanto mais estrelas atribuídas, melhor é o conteúdo do audiovisual). Ao lado de cada vídeo, existem outros relacionados ao tema. Não é possível transmissão ao vivo, porém é muito utilizado no compartilhamento da informação e em ações de marketing viral.
Site pertencente ao Grupo Folha de Jornalismo. Ali o usuário pode encontrar as informações sobre eventos da cidade de São Paulo, nas seguintes categorias: cinema, teatro, restaurantes, shows, bares, criança, baladas e exposições. Para sistema de busca, a página também conta com palavras-chave, vídeos e eventos em destaque. Também é possível imprimir um guia personalizado ao usuário através das ferramentas presentes na aplicação.
1.7.5 – Orkut Site de relacionamentos onde as pessoas podem criar grupos de discussão sobre os mais variados temas por meio de trocas de mensagens de texto. É possível o compartilhamento de vídeos e fotografias, bem como indicação para outros sites de interesse aos usuários. Sobre redes sociais quanto ao Twitter, podemos dizer que ela concentra as mesmas características das redes Orkut e YouTube, já que as pessoas postam informação curtas e links para vídeos e imagens. A mesma também é utilizada como meio de envio e recebimento de mensagens e como fóruns de discussão, pois, a resposta é rápida por parte dos usuários, construindo conversas e informações pertinentes ao grupo de pessoa que estão reunidas no local virtual. As próximas páginas analisadas não se tratam de redes sociais, mas sim de sites de busca de informações sobre eventos, barzinhos e baladas. Notamos neles o problema da situação genérica dos dados, consequência de uma página que deve ser adequar a todo tipo de público alvo frequentador de eventos. Tomamos como exemplo, a cidade de São Paulo para ilustrar a situação .
1.7.6 – Época São Paulo Página onde podemos encontrar diversos eventos que acontecem ou ocorrerão em um futuro próximo na cidade de São Paulo. Pertencente à editora Globo, o site possui desde guia de baladas á guia de restaurantes. O site também conta com acesso por meio de mídias móveis, twitter e também com uma revista impressa quinzenal.
1.7.8 – São Paulo Guia Mais Guia muito parecido com a ferramenta Google Maps. Nesta aplicação, é possível ao usuário buscar locais por endereço, tipo de serviço (se o usuário procura por restaurantes ou baladas, por exemplo). Possui links para redes sociais e vídeos disponíveis na web. Diferentemente das demais páginas não-redes sociais analisadas, este guia não se limita apenas ao município de São Paulo e sim, aborda o estado como um todo. 31
Capítulo II Na balada Festa em tempo real Descrição de projeto
2.1 – Comparativos
4. Consistência: o mesmo comando deverá ter sempre o mesmo efeito.
Todas estas redes sociais ou sites de localização analisados no capítulo anterior possuem aspectos diferentes e semelhantes entre si. Podemos compará-las seguindo dois parâmetros. O primeiro é sobre o e torna cada mídia parecida ou não, em matéria de conteúdos, mostrados nos itens de 1.7.1 até 1.7.8 do capítulo anterior. A segunda comparação se refere às heurísticas de Jakob Nielsen.
5. Feedback: o sistema deve informar ao usuário sobre as suas ações. 6. Saídas claramente demarcadas: o usuário (se desejar) poderá abortar uma tarefa facilmente. 7. Atalhos: tornar as operações mais rápidas para usuários experientes.
Nielsen é um estudioso do que se conhece por métodos de eficiência em tornar as páginas da web fáceis de navegar (pelo ponto de vista do usuário). Esses itens são:
8. Boas mensagens de erro: Devem ser claras, para que o usuário entenda e resolva o problema. 9. Prevenir erros: Evitar erros ou situações que provoquem erros.
1. Diálogos simples e naturais: a interface deve apresentar-se de forma clara ao usuário.
10. Ajuda e documentação: Se for necessária a ajuda deve estar facilmente disponível.
2. Falar a linguagem do usuário: a terminologia deve ser baseada na linguagem do usuário, e não do sistema.
A seguir apresentaremos um comparativo entre os sites e redes sociais mais utilizadas com o intuito de encontrar baladas disponíveis, tomando a cidade de São Paulo, SP como exemplo.
3. Minimizar a sobrecarga de memória do usuário: o sistema deve mostrar os elementos de diálogo e permitir que o usuário faça sua escolhas sem ter que se lembrar de determinado comando.
Quadro 1 – comparativo ente redes sociais e sites de buscas já existentes e Na Balada parte I Feedback
FourSquare
Places
YouTube
sim
depende do browser
depende do browser
sim
Linguagem do usuário
sim
sim
sim
neutra
Saídas
inexistente
depende do browser
botão “parar”
botão “parar” e player
Consistência
boa
média
boa
boa
Prevenção de erros
boa
boa
boa
boa
não
sim
não
não
Atalhos
não possui
não possui
possui
não possui
Mensagens de erros
ocorrem raramente
ocorrem
ocorrem
ocorrem
Documentação
boa
ruim
boa
boa
Sobrecarga de memória
33
Quadro 2 – comparativo ente redes sociais e sites de buscas já existentes e “Na Balada” parte II Feedback
Orkut
Época São Paulo
Guia Folha Online
Na Balada
bom
bom.
depende do browser
bom
Linguagem do usuário
sim
neutra
sim
sim
Saídas
botão “parar”
botão “parar”
botão “parar”
botão voltar
Consistência
boa
boa
boa
boa
Prevenção de erros
boa
boa
boa
boa
não
não
não
não
Sobrecarga de memória Atalhos
boa
ruim
não
não
Mensagens de erros
não
não
sim
não
Documentação
não
razoável
Construída a partir de
Construída a partir de
relatos de usuário
relatos de usuário
2.2 – Na Balada: projeto
de estrelas, a opinião dele sobre a balada, cinco estre-
O projeto Na Balada constitui-se de uma rede social
proporcionou uma boa experiência ou não, onde a
com o objetivo de expor eventos noturnos do meio
casa noturna está localizada na cidade e opções para
urbano, conhecidos popularmente como baladas, por
ver e ouvir o material midiático. Cada postagem terá
meio de vídeos, de mensagens de voz, mensagens de
um tempo de duração de quatro horas de vida útil
áudio e de mensagens de texto.
dentro da rede social, já que o foco é o tempo real.
las – melhor qualidade –, a uma estrela – pior qualidade. Com esta ferramenta será possível ver se a balada
Vale lembrar que essas quatro horas serão divididas Para que o indivíduo utilize os recursos propostos, ele deve possuir computador conectado a internet e/ou também dispositivos portáteis como smart phones, tablet ou notebook. A rede social terá interação entre os usuários para que seja possível a criação do conteúdo colaborativo. Os eventos citados nos tópicos serão sobre casas noturnas, baladas e bares. O serviço terá ferramentas já consagradas em redes sociais como criação de perfil e de avatar, troca de arquivos midiáticos e geolocalização em tempo real, por exemplo.
em ciclos de 1h e 20mim cada um. Caso uma balada dure mais que quatro horas, e se houver mais postagens sobre ela, a mesma permanecerá mais tempo na aplicação e seu tempo começará a contar a partir da última atualização enviada. Apenas os endereços das baladas permanecerão continuamente na rede social. Para a localização das casas noturnas, haverá uma interação com a aplicação Google Maps, que estarão marcadas neste mapa. O tempo de vida útil descrito aparecerá nesta tela, junto com o endereço das baladas. Enfatizamos que, por serem temporárias, as mais novas e mais antigas serão indicadas por cores que
Como características de uso, na primeira conexão, a
mudam a cada 1 hora e 20 minutos, passando pelos
pessoa criará um perfil que conterá seus dados pes-
estágios laranja (recente), amarelo (há pelo menos
soais. Esses dados serão: nome; idade; sexo (mascu-
1:20 mim na aplicação) e azul (mais de 1:20 na rede
lino ou feminino); interesses; (quais são os tipos de
social.
balada de seu interesse), especificar os interesses, por exemplo, baladas rock – metal, interesses sociai; espa-
Por meio de aparelhos portáveis, também será possível a
ço para o usuário falar um pouco sobre si mesmo; e
postagem em tempo real, ou seja, o usuário poderá inte-
upload para foto de perfil.
ragir com a rede social ao mesmo tempo em que participa de uma balada na cidade, porém, para o uso do mesmo
Ao enviar um tópico, o usuário poderá indicar através
será necessário baixar o aplicativo Na Balada para gadgets
34
e que o local visitado tenha conexão com a web. Colocamos esta condição como preferencial, para baratear o custo de acesso, porém, se o usuário desejar, o mesmo pode utilizar-se da conexão 3G para o acesso ao Na Balada.
Com base em pesquisa IBGE, focamos em usuários de ambos os gêneros, já que cerca de 70% dos homens e mulheres que vivem na região sudeste utilizam a internet como uma forma de busca de informação. Os índices de usuários que utilizam a rede como forma
Este recurso funcionará pelo conceito de web app, e servirá como interface adaptada para melhor visualização, não haverá necessidade de browser específico para mobile. Na interface reduzida, porém, é permitido ao usuário apenas o envio de conteúdo e a visualização da tela mapa. Recursos como troca de mensagem e opinar sobre eventos, são vetados neste modo.
de lazer representam 60 e 50% respectivamente entre homens e mulheres. Para estudantes os padrões chegam a 80% para a comunicação entre pessoas e 70% para atividades de lazer. Sobre redes sociais, podemos dizer que o perfil de usuário predominante é o jovem adulto do sexo masculino, sendo 82% maiores de dezoito anos que procuram este tipo de serviço para contatos de amizade e profissionais. Já a faixa dos 12
2.3 – Requisitos de sistema para o funcionamento do “Na Balada” 2.3.1 – Computadores
aos 17 anos utiliza a rede social por afinidade e assuntos de interesse. Quando falamos de telefonia celular, o percentual de pessoas que não tem acesso a este tipo de tecnologia na região sudeste alcança índices de apenas 2% para homens e mulheres acima dos 15 anos de idade. Ou
Notebooks e desktops precisarão de conexão com internet banda larga, via cabo, wirelles ou 3G.
seja, o telefone móvel já faz parte da vida de 98% da
Suporte Ruby on Rails e browser instalado localmente na máquina.
Com base nestes dados, almejamos que nosso público
população que vive nesta região do país.
alvo seja qualquer pessoa que possua um aparelho de telefonia móvel, que já esteja habituada ao ambien-
Suporte para a exibição de vídeo e aúdio.
te virtual que a internet proporciona e que também frequente casas noturnas e baladas. Nosso público deve ter preferencialmente de 16 a 30 anos de idade.
2.3.2 – Dispositivos portáteis
Nota-se que o uso do celular muda conforme a idade. Devemos ter em mente que usuários de:
Conexão com internet banda larga via wirelles ou 3G 15-20 anos: utilizam o celular como ferramenta para Suporte Ruby on Rails Aparelho com interface touch screen
conseguir a “independência” dos pais, e também considera o gadget como algo vital e indispensável para uma boa vida. Este público utiliza o celular como meio
Suporte para a exibição de vídeo e áudio
de comunicação capaz de realizar trocas de musicas, fotos, mensagens, e etc. É um dos públicos que mais
Teclado (podendo ser virtual) Possibilidade de instalação de aplicativos
utilizam os recursos que os aparelhos têm para oferecer. 20-40 anos: é a faixa da população que mais apre-
2.4 – Público alvo
senta posse e utilização do telefone celular. Esta faixa
O público que pretendemos atingir tem base no grupo de pessoas que vivem na zona urbana e que são frequentadores de eventos noturnos.
digitais, fazendo uso de ambas. Nota-se também que
etária também prefere mesclar a mídias físicas com as esta faixa utiliza a telefonia móvel tanto para conversas informais, como para assuntos ligados ao trabalho.
35
40-50 anos: Faixa desconsiderada no projeto. Pessoas
acessa fotos do local e os comentários sobre o evento
dessa idade utilizam o celular apenas como um com-
postados pelos outros usuários. Gostando do que vê,
plemento da vida diária, sem grandes mudanças. Não
Marcus acaba por decidir qual balada frequentar na-
vêem o aparelho como algo indispensável e a maioria
quela noite.
utilizam apenas as funções básicas como a efetuação de chamadas telefônicas ou o envio e recebimento de
A usuária Lola está com gripe e se sente fraca demais
mensagens SMS.
para sair de casa. Naquela mesma noite, suas amigas iriam em uma balada que ela gostaria de ir. Lola então
No geral, também há algumas características comuns
diz para elas enviarem vídeos e fotos do local para o
aos usuários de celular brasileiros que são uso do SMS
Na Balada em determinado horário. Na hora combi-
como principal funcionalidade depois do uso da voz,
nada, as amigas de Lola remetem material para a rede
que pessoas entre 16 e 34 são as que mais utilizam to-
social e Lola acessa a esses dados no mesmo instante.
das as funções do aparelho e que embora a classe A
Vendo como está o local “ao vivo”, ela sente-se como
tenha maior penetração de telefones, é a classe C que
se estivesse fisicamente na balada, podendo ouvir e
possui a maior quantidade dos mesmos.
ver o mesmo que suas amigas, simultâneamente.
Nosso público alvo, resumidamente é o público jo-
Thiago é um frequentador de baladas que gosta de
vem e jovem adulto das classes sociais A, B e C que
compartilhar informação sobre os locais que conside-
possui telefone celular com acesso à internet móvel
ra os melhores para serem visitados. Por meio de co-
e que preferencialmente tenham acesso de sinal das
mentários na rede social ele indica baladas para os ou-
tecnologias EDGE (2G), 3G, 3Gs,e Wi-Fi para que pos-
tros usuários, mostrando sua opinião sobre os eventos
sam obter informações em tempo real das baladas vi-
enviados.
sitadas por meio do telefone celular. Já que o público difere de estilos, raças e modos de vida a interface se
Rafael está na rua junto com seus amigos, quando
adequará ao usuário, no caráter informacional, para
o grupo decide visitar uma balada. Sem ter ideia da
que este usuário possa se identificar melhor na usa-
onde ir, os rapazes consultam o aplicativo mobile por
bilidade.
meio de um smart phone. Utilizando da geolocalização do aparelho, a app de Na Balada indica o endereço e a classificação por meio de estrelas da balada mais próxima. Ao ver que o software acusava cinco estrelas,
2.5 – Cenários Para ilustrar o uso da rede social Na Balada, criamos os seguintes usuários fictícios: Anna, Letícia, Lola, Marcus, Rafael e Thiago. As situações são:
Rafael e seus amigos optam por ir àquele local. Anna está na balada e aprecia muito do que está acontecendo no local. Por saber que a casa noturna permite imagens de seu interior, Anna filma o que está acontecendo e envia este vídeo para a rede social. Ou-
Marcus, a noite, procura por uma balada para visitar.
tros usuários de Na Balada gostam do conteúdo reme-
Tendo entrado em outras aplicações web para obter in-
tido por Anna, e decidem frequentar a mesma balada.
formações sobre baladas, Marcus acabou por encontrar apenas informações institucionais dos eventos que pretende ir, sem saber como de fato estão esses lugares.
2.6 – Orçamento Para se tornar uma ferramenta web disponível no mer-
Ele então, recorre ao Na Balada para ver o que está
cado, Na Balada necessita de R$ 252,00 de capital ini-
acontecendo na cidade. Mesmo sem ter um login e
cial, sendo que os gastos são em itens como:
senha, Marcus pode visitar a página Mapa da rede social que lhe dá algumas opções de baladas. Uma
Compra de domínio: www.nabalada.in = R$ 32,00
das baladas enviadas à rede lhe chama a atenção e ele
(anual)
36
Servidor web remoto com suporte ruby on rails e servi-
foi descartado pelos seguintes motivos:
ço FTP = R$ 220,00 (anual) 1 - Esta tecnologia ainda está em fase de testes, não Para seu desenvolvimento e manutenção, estimamos
tendo embasamento seguro para programação neste
um custo de aproximadamente R$ 1000 anuais, in-
momento.
cluindo a renovação do domínio (www.nabalada.in) e pagamento de programadores-desenvolvedores.
2 - O HTML 5.0 não possui suporte Ruby on Rails. Como servidor e hospedagem web, deverá utilizado aferramenta Xampp. O Xampp é uma ferramenta web open source de licença GPL (General Public Use), que
2.7 – Linguagens de programação e softwares utilizados
possibilita a hospedagem de aplicativos de internet
O desenvolvimento da rede social Na Balada passa-
Adobe Illustrator e Adobe Photoshop: utilizados para
rá por duas etapas, a rede social on line, voltada para
o desenvolvimento da arte e layout da rede social. Po-
computadores e o aplicativo mobile, focado em apare-
rém de forma não funcional.
em servidores locais. Outros programas utilizados no desenvolvimento do sistema de Na Balada serão:
lhos portáteis como smart phones e tablets. Adobe Dreaweaver e Microsoft Visual Studio: utilizaEm ambos os casos, a linguagem de programação
dos para a construção da versão beta 1 da rede social
responsável pela inteligência artificial dos aplicativos
em HTML.
será a Ruby on Rails. Esta linguagem se adequa a todos os modelos de celulares e outros dispositivos com disponibilidade de acesso à internet. Esta programação torna o software mais leve e dinâmico, além de mais confiável e eficiente para qualquer dispositivo portátil. Esta linguagem de programação foi escolhida por ser
Microsoft SQL Server: construção de banco de dados. Aptana Studio 2.0: edição e programação de Ruby on Rails. 37 Xampp: Servidor de locação web.
programação open source, ou seja, livre de direitos
Adobe Flash: Programa realmente utilizado. Usado
autorais. Dinâmica, segura e voltada para a produtivi-
para a construção dos protótipos funcionais dos aplica-
dade das mais diversas aplicações, atualmente é uma
tivos mobile e web. Ressaltamos que devido a proble-
tecnologia muito utilizada no desenvolvimento de
mas de prazo e mão de obra, nos propomos a entregar
aplicações para aparelhos portáteis e de web app.
um protótipo da ferramenta ao invés de uma rede so-
Na aplicação on-line, o Ruby on Rails, fará a ligação en-
cial em pleno funcionamento em versão beta 1.
tre o banco de dados SQL Server e o layout funcional em CSS-HTML. O CSS-HTML serão construídos a partir de imagens jpg. O de desing e ajustes de imagens da rede social. Sua função
2.8 – Testes de usabilidade
é padronizar os layouts e outros itens que se baseiam na
O grupo desenvolvedor de Na Balada se propõe a rea-
parte visual de Na Balada. O HTML utilizado para a cons-
lizar testes de usabilidade com usuários para que, em
trução deve ser o 4.0 e o 4.5, pois estas são as versões que
suas atualizações, a rede social possa se moldar cada
suportam Ruby on Rails, MySQL e SQL Server. O HTML 5.0
vez mais ao gosto das pessoas.
CSS será desenvolvido para suprir 90% das necessidades
A usabilidade é um termo utilizado para demonstrar
- navegador
se as pessoas utilizam uma determinada ferramenta de modo correto e fácil. No caso de desing de interface, uma boa usabilidade deve ser de fácil entendimento do usuário. Em um outro momento, desejamos realizar testes de usabilidade detalhados, como entrevistas com usuários e programas de computador que mapeiem seu comportamento durante a visita à rede social.
- câmera e microfone (opcionais) Já para tecnologia portátil como telefones celulares e tablets é necessário - conexão com a internet via wireless (preferencialmente banda larga) - navegador - câmera e microfone
2.9 – Política do site e de direitos autorais
- a câmera deverá ser sensível o suficiente para capturar imagens em ambiente escuro - compatibilidade do aparelho para a aplicação
O uso da rede social é gratuito, bem como o seu ca-
Nota: na primeira versão, apenas iPhones são compa-
dastro. Pessoas que tenham seu perfil registrado terão
tíveis.
acesso total à rede social que inclui: Telefones celulares que tenham como sistemas ope- Acesso ao mapa de eventos e personalização do mesmo.
racionais os programas Android, Blackberry, Windows Mobile e Windows Phone só terão acesso à aplicação
- Acesso a perfis de outros usuários que compartilhem
nas próximas atualizações de software, pois a equipe
interessem em comum
de Na Balada também preza pelo bem estar de usuá-
- Privilégios para postar eventos e escrever comentários sobre os mesmos - Compartilhamento da informação por meio de dispositivos portáteis
rios que utilizam estes sistemas. Não será permitida o envio de material que contenha nudez e/ou cenas de sexo. Baladas que tenham este tipo de abordagem devem ser postados apenas na forma de texto, sendo expressamente proibido ao
Para a criação de conteúdo o usuário poderá contar
usuário upload de vídeo, som e imagem de aconteci-
com os recursos de texto, áudio, vídeo e imagem dis-
mentos com esta temática.
poníveis na aplicação.
Caso o usuário desrespeite esta regra, o evento será
Para se cadastrar em Na Balada e criar o seu perfil pes-
deletado da rede social. A pessoa que apresentar rein-
soal, o usuário deverá ter no mínimo 16 anos de idade
cidência no envio deste tipo de conteúdo terá o seu
e possuir endereço de e-mail.
perfil banido.
A rede social poderá ser acessada por meio de compu-
Também é proibido aos usuários utilizarem Na Bala-
tadores, telefones celulares e tablets
da para denegrir ou prejudicar a imagem de alguém ou de um estabelecimento comentado. É permitido a
Se o usuário desejar o acesso simples por um compu-
expressão de opiniões negativas sobre eventos, sem
tador o mesmo deverá ter:
que as mesmas sejam ofensivas ou utilizem palavras de baixo calão.
- conexão com a internet (preferencialmente banda larga)
Lembramos a todos que o conteúdo da rede social
38
é de responsabilidade dos próprios usuários. Informações pessoais postadas ficarão expostas na rede social e permanecerão acessível a todas as pessoas conectadas. Não nos responsabilizamos por mensagens errôneas e de má fé e que possam prejudicar os demais usuários. Sobre direitos autorais, é de responsabilidade do usuário que o mesmo se informe se a balada onde se encontra permite o envio de imagem ou vídeo sobre o seu interior. A equipe de Na Balada não se responsabiliza por postagens não autorizadas pelos donos dos estabelecimentos.
39
ESCOLHER O ESTADO
ESCOLHER O EVENTO
ESCOLHER O BAIRRO
ESCOLHER A CIDADE
ESCOLHER PAÍS
MAPA COM OS EVENTOS
PODCASTS
VÍDEOS
PODCASTS
COMENTAR
VÍDEOS
VÍDEOS
FOTOS
COMENTAR
HOME DESLOGADO
TEXTO
BUSCAR POR EVENTOS
FIM DA SESSÃO DESLIGADA
DADOS PESSOAIS
ESQUECI MINHA CENHA
ENVIO POR EMAIL A NOVA SENHA
CADASTRO
SENHA
LOGIN
2.10 – Fluxogramas
Fluxogramas da web app.
40
POSTAR CONTEÚDO BÁSICO
MENSAGENS DE TEXTO, IMAGENS E PODCASTS TERÃO QUE SER LOAGDOS
TEXTOS POSTADOS RECENTEMENTE
VISUALIZAR FOTOS, PODCASTS E TEXTO
OPÇÃO DESLOGADO
41
HOME
MARCADOR DE MAPA
DETALHAMENTO DO CONTEÚDO
ENXERGAR MENSAGENS DE PODCASTS, VÍDEOS E IMAGENS
OPÇÃO LOGADO
DENUNCIAR
EXCLUIR
AUTORIZAR
PODC ASTS
PODERÁ COMENTAR SOBRE O EVENTO
VÍDEO S IMAGE M
DESFAZER
GOSTAR
5 ESTRELAS
CLASSIFICAR EVENTO
FOTOS
INFORMAÇÕES SOBRE SEUS AMIGOS
VER PERFIL DOS AMIGOS
ADICIONAR AMIGO
PERFIL
AMIGOS
42
OS AMIGOS PODERÃO COMENTAR SUA POSTAGEM
10 + DE EVENTOS
HOME LOGADO
VER CLASSIFICAÇÃO
EVENTOS FAVORITOS VÍDEO S
PODC ASTS
TEXTO
ENVIAR POSTAGEM
OPÇÕES SIM
OPÇÕES NÃO
MARCAR IDENTIFICADOR DE MAPA NOS EVENTOS
FOTOS
POSTAR INFORMAÇÕES SOBRE SEU EVENTO
Mapa
Enviar Video
Adicionar Legenda S/N
Cancelar Video
Visualizar Video
Gravar Video
Video
Fotografar
Adicionar Legenda S/N
Enviar Foto
Adicionar Legenda S/N
Cancelar Foto
Visualizar Foto
Foto
Texto
Ação
Login
Pausar Audio
Enviar Video
Pausar Prévia
Adicionar Legenda S/N
Cancelar Video
Parar Prévia
Ouvir Prévia
Parar Audio
Gravar Audio
Audio
Fluxograma da interface mobile.
43
Fluxograma de banco de dados.
44
CapĂtulo III Na balada Festa em tempo real Arte e layout
3.1 Identidade visual A marca de Na Balada procura enfatizar o aspecto vida urbana noturna em sua identidade visual, bem como o aspecto comunicação entre pessoas. Pois salientamos que as informações trocadas entre usuários constroem o conteúdo da rede social proposta. A fonte, com suas formas arredondadas simbolizam a tecnologia, já que este projeto tornou-se viável devido ao novo paradigma da internet: a web 2.0, onde os usuários se tornam produtores e consumidores de informação. A cor vermelha simboliza energia e é utiliza-
da para lugares dinâmicos, onde a informação muda com frequencia. As cores azuis e pretas no alto falante remetem ao ambiente noturno de música e diversão que são as baladas. Os elementos com formas orgânicas nas cores verde, amarelo e laranja simbolizam a energia e o movimento das baladas. Em suma, a marca procura interagir com a identidade visual das demais partes da aplicação para uma identidade visual uniforme e que simbolize os conceitos utilizados no projeto.
Na Balada Figura 5 - Marca criada para a rede social Na Balada.
46
3.2 slogan Festa em tempo real. Slogan criado para a rede social em complementação ao logotipo. Com estes dizeres, passamos aos usuários o conceito de compartilhamento informação em tempo real da informação enviada para a rede. Dinâmica, sempre atualizada e construída contínuamente. Esta é a proposta da rede social e também a do slogan que a representa.
Festa em tempo real
3.3 iconografia Seguindo a identidade visual e com botões baseados em sistemas operacionais como o Windows 7 e iPhone OS (efeito vítreo) Na Balada apresenta uma série de botões que dão ao usuário a gama de ações presentes na aplicação.
Cada ícone além de servir como botão, também possui legenda explicativa de sua função ao usuário. Botões pequenos, possuem legendas flutuantes que aparecem apenas quando o ponteiro do mouse é posicionado sobre os mesmos.
3.3.1 Iconografia web Tipos de postagem Figura 6: Botão texto. Este ícone indica e permite ao usuário o envio de comentários escritos sobre as baladas presentes na aplicação.
Figura8: Botão áudio. Este ícone indica e permite ao usuário o envio de comentários em aúdio sobre as baladas presentes na aplicação.
Figura 7: Botão vídeo. Este ícone indica e permite ao usuário o envio de comentários em vídeo sobre as baladas presentes na aplicação.
Figura 9: Botão “foto”. Este ícone indica e permite ao usuário o envio de comentários em fotografia sobre as baladas presentes na aplicação.
Ações permitidas Figura 10: Botão acesso ao mapa. Na aplicação também chamado de adicionar ou excluir balada. Este ícone permite acesso ao usuário para a área de edição do mapa.
Figura 11: Botão adicionar balada. Este ícone indica e permite ao usuário o envio de novas baladas para a rede social. Na área de mapa, ele muda de estatus de acordo com o tempo da balada na rede social. Quando está laranja indica que a balada foi enviada recentemente à aplicação. Amarelo significa que o evento está lá a pelo menos 1h e 20 min e azul para as baladas antigas. Depois de quatro horas os ícones sobre o mapa são deletados.
Figura 14: Botão ver mapa. Este ícone leva o usuário para a tela mapa, onde ele pode ver o endereço das baladas postadas.
Figura 15: Botão excluir balada. Se o usuário decidir excluir uma balada antes das 4h que a mesma permanece na rede social, poderá fazer-lo por meio deste botão.
Figura 12: Botão upload. Permite ao usuário o upload de informação para a rede social.
Figura 16: Botão download. Permite ao usuário o download de aplicativo para sistemas operacionais mobile. Por enquanto, a primeira versão deverá ser disponível apenas para iPhone.
Figura 13: Botão favoritos. Permite ao usuário favoritar o endereço de suas baladas de preferência. O ícone em cinza permite desfazer a ação.
Figura 17: Botão comentários. Permite ao usuário comentar sobre as baladas postadas e também sobre os comentários de outros usuários. O ícone cinza permite desfazer a ação.
47
Quanto a outros usuários Figura 18: Botão adicionar amigos. Permite a autorização e a adição de “amigos” ao perfil do usuário. Utilizado com o objetivo de agrupar pessoas com os mesmo gostos em relação às baladas.
Figura 19: Botão excluir amigos. Permite a não autorização e a exclusão de “amigos” de seu perfil de usuário.
Classificação de baladas Figura 21: Botão classificação. Permite ao usuário a classificação da qualidade da balada indo de 0 à 5 estrelas de acordo com sua cor. Vale ressaltar que a indicação de faixa etária da balada cabe ao próprio usuário no campo “descrição da balada”.
Legendas
áudio
foto
vídeo
texto
sim
não
ver mais
download
upload
perfil
ad evento
ex evento
ir
voltar
cadastro
Figura 22: Legendas diversas não-flutuantes. Estas legendas fixas estão localizadas abaixo dos ícones maiores para que o usuário tenha uma melhor familiarização com os mesmos tornando a memorização da ação mais rápida e fácil seguindo a terceira heurística de Nielsen que recomenda a não sobrecarga da memória do usuário.
3.3.2 Iconografia mobile A seguir é apresentada a iconografia simplificada para dispositivos portáteis. Tipos de postagem
texto
Figura 23 Botão texto. Este ícone indica e permite ao usuário o envio de baladas em forma escrita.
vídeo
Figura 24: Botão vídeo. Este ícone indica e permite ao usuário o envio de baladas em vídeo.
áudio
foto
Figura 25: Botão áudio. Este ícone indica e permite ao usuário o envio de baladas em aúdio para a aplicação.
Figura 26: Botão “foto”. Este ícone indica e permite ao usuário o envio de baladas em fotografia.
Ações permitidas
Figura 27: Botão avançar. Leva o usuário para a próxima tela da aplicação.
Figura 28: Botão voltar. Leva o usuário para a tela anterior da aplicação.
48
Figura 29: Botão concluir. Este ícone indica e permite ao usuário e a rede social que a balada enviada via mobile poderá ser postada.
Imagem 24: Botão cancelar. Este ícone indica e permite ao usuário e a rede social o cancelamento da balada que seria enviada via mobile.
Figura 30: Botão upload. Envia e conclui a postagem de balada na rede social por meio de dispositivo mobile.
Figura 31: Botão trocar de usuário. Permite a troca de nome de usuário, uma vez que o perfil configurado no primeiro acesso da aplicação mobile permanecerá gravado na mesma.
Gravação de áudio
Figura 32: Botão rec. Permite a gravação de áudio.
Figura 34: Botão pause. Pausa a gravação.
Figura 33: Botão play. Permite o ato de ouvir o áudio gravado.
Figura 35: Botão stop. Para a gravação.
Observação: Para a gravação de vídeo, estes botões não são necessários, uma vez que basta ao usuário clicar que preview e depois em concluir e upload para o envio ao Na Balada, ou em cancelar para anular a ação.
3.4 Outros elementos de layout 49
Figura 36: Ilustração de cidade. Presente na aplicação web esta ilustração tem como objetivo representar o ambiente urbano em que as baladas estão inseridas. Baseda no trabalho de ilustração do grupo portugês Who, especializado em desenho para publicidade e arte vetorial.
Figura 37: ìcone que leva para a aplicação mobile. No primeiro momento, será disponível apenas para iPhone e iPad.
3.5 Proposta de interface web A interface web de Na Balada foi projetada para que os usuários troquem informações entre si na rede social. Para sua identidade visual foram utilizadas referências da ilustração vetorial com formas orgânicas, utilizadas sobretudo, na publicidade, de acordo com o site Who <http://www.who.pt/newsletter/s30-pub/s30-pub. html> acesso em 10 abr. 2011.
As cores prateadas remetem ao glamour das baladas que geralmente ocorrem em ambientes noturnos com música, bebida onde as pessoas se divertem e buscam por seus pares. Os elementos com formas orgânicas nas cores verde, amarelo e laranja simbolizam a energia e o movimento desses locais. A seguir, mostramos as telas e cada conceito que as tornam apropiadas para a aplicação proposta.
Utilizando de conceitos de usabilidade, forma e hierarquia, propomos uma comunicação visual concisa que permite ao usuário criar familiaridade com a aplicação.
Na Balada Festa em tempo real
Entre com seu perfil
Encontre baladas & barzinhos
na nossa rede social
Na cidade que quiser, na nossa festa em ttempo real
login anna@hotmail.com senha * * * * * *
50
São Paulo ir
Vila Olímpia Não tem Na Balada ainda? Esqueceu a sua senha? Clique no botão cadastro e crie seu perfil gratuitamente!
Rock Eletrônica cadastro ir
Balada no seu celular download de aplicativo para celulares (smart phone only) download
Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 38: Representação da página Home. Nesta tela o usuário terá apenas quatro tipos de ações: login em sua conta pessoal, criação de cadastro para novos usuários, procura por baladas sem necessidade de login (neste é possível apenas a consulta de baladas) e download da aplicação mobile.
Na Balada
Anna Yuuki
Festa em tempo real São Paulo
Vila Olímpia
Eletrônica Rock
ir
Encontre baladas
Anna perfil
ad evento
P. Vimtém
ex evento
Boogle
A Lanterna A Loca
Café Piu Piu
Armazém
Happy News
Maeeva Bar
Lounge Disco Club A
Pacha Morrison
Ébano Santa Aldeia
Show Bar
Secrett Love Story Memphis
All Black Dolores Bar Unha de Gato
Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 39: Representação da página Mapa. Nesta tela o usuário poderá pesquisar baladas por estilo e região. No mapa é indicado o endereço dos eventos. Cada balada permanecerá nesta tela por 4h. A cada 1h e 20 min a mesma tem seu estatus alterado para laranja (recente), amarelo (há pelo menos 1h e 20 min) e azul (antiga). A lista lateral indica as mais recentes que não estão sendo visualizadas nessa região do mapa (o usuário deverá mudar o mapa de posição para ver-las). Há também links para as telas de perfil, dados especificos sobre as baladas e envio/cancelamento de baladas enviadas.
Na Balada
Anna Yuuki
Festa em tempo po real São Paulo
Vila Olímpia
Eletrônica Rock
ir
Anna perfil áudio
A Lanterna
foto
vídeo
Spyzer. Balada eletrônica com vários DJs. Tá fervendo aki!!! 0.0
texto
São Paulo
Lola
Spyzer
Não sei como vcs aguentam esse vuco-vuco. Rsrsrsrsrs.
Descrição: SPYZER não é apenas um projeto de música eletrônica e sim uma experiência áudio-visual única, a união perfeita entre música eletrônica & acústica. Andy, Jay, Lhux e Rick são os nomes por trás desta idéia.
Thiago
51 x
x
Muito bom essa balada. Vcs sabiam que também existe uma banda com esse nome?
A Loca Armazém Lounge Disco Diferente e criativo, o Spyzer não é apenas um projeto de música eletrônica e sim uma experiência áudio-visual.
00:00
Pacha
Anna
Ébano
Não há comentários sobre este post. Seja o primeiro a escrever!!!
Muito boa! Tb fui na edição do ano passado. Vale muito a pena!!! M
Santa Aldeia Secrett Thiago
Love Story
x
Meu, que louco! Como gostaria de estar aí.
All Black Dolores Bar
x
Unha de Gato
Rafael R
Kasebre
H Hahahaha. Anninha, me diz onde vc está pq eu to nessa balada ttb. Agora eles estão tocando um dance pra ninguém ficar p parado.
Rafael R
x
E Esses caras já foram elogiados por sua vibe, técnica e sonorid dade. Tb já se apresentaram no Altas Horas e Programa do Jô.
Motorhead Spin
ver mais Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 40: Representação da página Dados Balada. Nesta tela o usuário poderá ver as baladas enviadas, bem como suas postagens em áudio, texto, vídeo e fotografia. Poderá deixar ou excluir seus comentários e ver perfis de outros usuários. Também poderá voltar a tela Mapa e procurar por outros eventos bem como acessar seu perfil pessoal.
Na Balada
Anna Yuuki
Festa em tempo real São Paulo
Anna
Vila Olímpia
Rock
ir
Postar balada/Excluir balada
perfil
Escolha um tipo de arquivo Nome balada
ad evento áudio
ex evento
foto
vídeo
texto
upload
Endereço: Horário de funcionamento: Descrição:
Nome balada A Lanterna A Loca Armazém Pacha Ébano Santa Aldeia Secrett Love Story All Black Dolores Bar Lounge Disco
Nome balada
Nome balada
Unha de Gato
Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 41: Representação da página Enviar Balada. Nesta tela o usuário poderá enviar as suas próprias as baladas. Deverá escolher um tipo de arquivo (áudio, vídeo, texto e imagem) e dar uma breve descrição da balada enviada, incluindo sua faixa etária. Também poderá voltar a tela Mapa e procurar por outros eventos bem como acessar seu perfil pessoal.
Na Balada
Anna Yuuki
Festa em tempo real São Paulo
Anna
Vila Olímpia
Rock
ir
Postar balada/Excluir balada
perfil
Escolha um tipo de arquivo Nome balada
52
ad evento áudio
foto
vídeo
texto
upload
Endereço: Horário de funcionamento: Descrição:
ex evento
Nome balada A Lanterna A Loca Armazém Pacha Ébano Santa Aldeia Secrett Love Story All Black Dolores Bar Você tem certeza que quer excluir esta balada? Lounge Disco
Nome balada sim
não
Unha de Gato
Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 42: Representação da página Excluir Balada. Se o usuário desejar deletar a balada antes do período de 4h em que a mesma permanece na rede social, ele deverá acessar esta tela, onde a balada selecionada poderá ser excluída. Também poderá voltar a tela Mapa e procurar por outros eventos bem como acessar seu perfil pessoal. Vale ressaltar que o usuário só poderá excluir as baladas que ele mesmo tenha enviado à aplicação.
Na Balada
Anna Yuuki
Festa em tempo real São Paulo
Vila Olímpia
Eletrônica Rock
ir
Anna perfil áudio
foto
vídeo
texto
São Paulo Dadynumark
A Lanterna
Descrição: O DJ europeu Dadynumark está no Brasil para trazer dois novos estilos às nossas pistas: Underground e o Tribal House que são a nova moda na Europa.
Rafael R
x
Thiago
x
C Cara, eu também fui, e até fiz um outro poste aqui no Na Balada. EEsse DJ é insanooooo!!!
A Loca Armazém Louge Disco Pacha Ébano Santa Aldeia Secrett
Anna
x
Esse vídeo aí em cima só me deixou com mais vontade de ir, caso esse tiozinho um dia volte aqui no Brasil.
Eu estive lá e a rave foi de arrasar!!!
Love Story All Black
x
Dolores Bar
Thiago
Unha de Gato
Meu, muito legal. pena que não pude ir, por que no dia eu tinha prova na faculdade. Se não me engano, essa rave foi numa sexta-feira...
Kasebre Mothorhead Spin
ver mais
Não há comentários sobre este evento. Seja o primeiro a escrever!!!
Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 43: Representação da página Vídeo. Nesta tela o usuário poderá ver e fazer comentários apenas em baladas que foram enviadas em forma de vídeo. É possivel ver o perfil de outros usuários a partir desta tela. Também poderá voltar a tela Mapa e procurar por outros eventos bem como acessar seu perfil pessoal.
Na Balada
Anna Yuuki
Festa em tempo real São Paulo
Vila Olímpia
Eletrônica
ir
Anna perfil áudio
foto
vídeo
texto
53
São Paulo Skol Beats
A Lanterna
Descrição: Skol Beats. Deixe que um pouco dessa emoção seja estravazada por ti, deixe que suas emoções controlem seu ritmo! (posts enviados em diferentes momentos)
Rafael R
x
SSkol Beats. Eu to akiii!
A Loca Armazém Lounge Disco Pacha Ébano Santa Aldeia Secrett
Thiago
Love Story
x
Esse vídeo aí é o meu irmão DJ dando o show lá em Sampa. Galera a balada vale a pena!
Anna Wow, eu nem estou vendo o tempo passar aqui!!!
All Black Dolores Bar
x
Thiago
Unha de Gato
Por aqui!rave tá bombando!!! Fora que tem um monte de mina linda aqui.
Kasebre Motorhead Spin
ver mais
Não há comentários sobre este evento. Seja o primeiro a escrever!!!
Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 44: Representação da página “Foto”. Nesta tela o usuário poderá ver e fazer comentários apenas em baladas que foram enviadas em forma de imagens. É possivel ver o perfil de outros usuários a partir desta tela. Também poderá voltar a tela Mapa e procurar por outros eventos bem como acessar seu perfil pessoal.
Na Balada
Anna Yuuki
Festa em tempo real São Paulo
Vila Olímpia
Rock
ir
Anna perfil 00:00
áudio
foto
vídeo
texto
M Marcus
x
Rafael R
x
São Paulo Retrô Descrição: Balada Flash back dos anos 80.
D bicão sobre outra balada: show do Roxette em Sampa agoDe rraaaaaaaaaa!
A Lanterna A Loca Armazém 00:00
Lounge Disco 00:00
Pacha
x
Marcus M
x
Leticia L
Baladinha de época hein... B
EEu adoro música dos anos 80. Elas tinham um estilo próprio.
Ébano Santa Aldeia
x
Leticia L
Anna
Secrett
Ihhhh, será que o Marcus não gosta? Ih
Sim... Eu adoro a música eletrônica da época. Tudo era novidade...
Love Story
Anna
All Black
Acho q não. hehehehe.
x
Thiago
Dolores Bar
Eu já gosto mais do pop rock daquela época. Principalmente Kiss e Roxette.
Unha de Gato Kasebre Motorhead Spin
ver mais Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 45: Representação da página Áudio. Nesta tela o usuário poderá ver e fazer comentários apenas em baladas que foram enviadas em forma de áudio. É possivel ver o perfil de outros usuários a partir desta tela. Também poderá voltar a tela Mapa e procurar por outros eventos bem como acessar seu perfil pessoal.
Na Balada
Anna Yuuki
Festa em tempo real São Paulo
Vila Olímpia
Rock
ir
Anna perfil áudio
foto
vídeo
A banda com mais de 25 anos de estrada, já teve participação do guitarrista Slash (Ex Guns N Roses) em diversas canções e uma parceria com Ozzy Osbourne
texto
54
São Paulo
Thiago
Show do Motorhead
Muito bom. Também fui no show do Iron, e espero que ele esteja no Rock in Rio.
Descrição: METAL!!! Show do Motorhead agora em SP!
x
Leticia L METAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALLL!!! M
A banda conhecida como a mais alta do mundo liderada desde 1975 por Lemmy Kilmister está de volta a Via Funchal.
Motorhead no Via Funchal.
Não há comentários sobre este evento. Seja o primeiro a escrever!!!
x
Leticia L Muito bom, recomendo! M
James Hetfield, líder da banda norte-americana Metallica, disse numa entrevista, que a sua principal inspiração quando formou o Metallica foi o Motorhead.
Anna
x
Rafael R
Não gosto de metal, mas reconheço o trabalho da banda.
Da hora. Amo metal! Num outro post tem material do Ozzy! D
Thiago
x
Muito bom, tá muito louco lá! To todo dolorido, acabei de sair de um bate-cabeças...
ver mais Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 46: Representação da página Texto. Nesta tela o usuário poderá ver e fazer comentários apenas em baladas que foram enviadas em forma de texto. É possivel ver o perfil de outros usuários a partir desta tela. Também poderá voltar a tela Mapa e procurar por outros eventos bem como acessar seu perfil pessoal.
Na Balada
Anna Yuuki
Festa em tempo real São Paulo
Vila Olímpia
Rock
ir
up foto
A Lanterna A Loca Armazém Lounge Disco Pacha Ébano Santa Aldeia Secrett Love Story All Black Dolores Bar Unha de Gato Kasebre Motorhead ver mais
Spin
ver mais
Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 47: Representação da página Perfil Vazio. Nesta tela o usuário inciante deverá incluir seus dados pessoais para a criação de perfil pessoal. Nota-se que por hora, apenas o nome do usuário, atrelado ao seu email cadastrado aparece na tela.
Na Balada
Anna Yuuki
Festa em tempo real São Paulo
Vila Olímpia
Rock
Anna
ir
Ver favoritos
Faça com os outros o que vc quer que façam com vc
A Lanterna A Loca Armazém Lounge Disco
aniversário: 21/11 idade: 24 anos interesses: shows e baladas de música eletrônica idiomas que eu falo: inglês, espanhol e alemão quem sou eu: Eu sou uma pessoa extrovertida, que gosta de agito e novas amizades. filhos: não fumo: não bebo: não cidades de interesse: São Paulo, Osasco
P. Vimtém
Morrison
O Loca
A Lanterna
Memphis
Love Story
Show Bar
Dolores Bar
55
ver mais
Solicitações de amizade
Pacha Ébano Amigos/Pessoas com mesmo interesse Santa Aldeia
Lola
Marcos
Secrett Recados
Love Story
Lola L
All Black
Unha de Gato
Rafael
Jonas
Leticia
Thiago
Kasebre
x
Tem uma balada legal chamada Euromusic. Te indico já q vc gosta de flash back.
Motorhead Spin
x
Me add. Não gosto muito de música eletrônica, mas vi que vc tb curte rock. Podemos trocar informações de baladas de rock, se vc me add. ^^
Dolores Bar
ver mais
ver mais
Na Balada
I
2011 Pérola & Abarca
I
x
Termos de uso
Figura 48: Representação da página Perfil. Nesta tela o usuário visualizar seu perfil pessoal e se desejar, fazer modificações. Poderá ver o endereço de suas baladas faviritas e adicionar ou excluir amigos. É possivel ver o perfil de outros usuários a partir desta tela. Também poderá voltar a tela Mapa e procurar por outros eventos.
Na Balada
Anna Yuuki
Festa em tempo real São Paulo
Vila Olímpia
Rock
Rafael
ir
Favoritos dele (a)
Como eu não há ninguém aniversário: 10/02 idade: 27anos interesses: shows de rock e raves idiomas que eu falo: inglês e espanhol quem sou eu: Eu sou eu, o resto é outra história... filhos: não fumo: não bebo: socialmente cidades de interesse: Curitiba
A Lanterna
Maeve
Love Story
Unha de Gato
Kasebre
The Disco
Dolores Bar
Aldeinha
ver mais
Escreva um recado para ele (a)
Amigos dele (a)
Recados dele (a) Anna Quais são as baladas de rock legais aí em Curitiba?
Jonas
Leticia
Anna Thiago Passando para dar um alô. Quando vier visitar Belo Horizonte vá na Balada X. É muito boa. ver mais
ver mais
Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 49: Representação de como um usuário visualiza o perfil de outro. Também poderá voltar a tela Mapa e procurar por outros eventos.
Na Balada
Anna Yuuki
Festa em tempo real
Na Balada
56
Politica da rede social e termos de uso 1 - O que é o Na Balada Na Balada é uma rede social com o objetivo de reunir pessoas que se interessem por eventos urbanos, como casas noturnas, gastronomia (barzinhos e restaurantes), casas de shows, raves e tudo mais que puder ser considerado uma balada por nossos usuários.
Telefones celulares e que tenham como sistemas operacionais Android, Blackberry, Windows Mobile e Windows Phone só terão acesso à aplicação nas próximas atualizações de software, pois a equipe de Na Balada também preza pelo bem estar de usuários que utilizam estes sistemas.
O uso da rede social é gratuito, bem como o seu cadastro. Pessoas que tenham seu perfil registrado terão acesso total à rede social que inclui:
3 - O que é permitido e o que é proibido em Na Balada Não será permitida o envio de material que contenha nudez e/ou cenas de sexo. Eventos que tenham este tipo de abordagem devem ser postados apenas na forma de texto, sendo expressamente proibido ao usuário upload de vídeo, som e imagem de acontecimentos com esta temática.
- Acesso ao mapa de eventos e personalização do mesmo. - Acesso a perfis de outros usuários que compartilhem interessem em comum - Privilégios para postar eventos e escrever comentários sobre os mesmos - Compartilhamento da informação por meio de dispositivos portáteis
Caso o usuário desrespeite esta regra, o evento será deletado da rede social. Se a pessoa apresentar reincidência no envio deste tipo de conteúdo terá o seu perfil banido.
Para a criação de conteúdo o usuário poderá contar com os recursos de texto, áudio, vídeo e imagem disponíveis na aplicação.
Também é proibido aos usuários utilizarem Na Balada para denegrir ou prejudicar a imagem de alguém ou de algum estabelecimento comentado. É permitido a expressão de opiniões negativas sobre eventos, sem que as mesmas sejam ofensivas ou utilizem palavras de baixo calão.
Para se cadastrar em Na Balada e criar o seu perfil pessoal, o usuário deverá ter no mínimo 16 anos de idade e possuir endereço de e-mail.
2 - Requerimentos de sistema para o acesso correto ao Na Balada A rede social poderá ser acessada por meio de computadores, telefones celulares e tablets
Lembramos a todos que o conteúdo da rede social é de responsabilidade dos próprios usuários, sobre os direitos autorais, é de responsabilidade do usuário que o mesmo se informe se a balada onde ele está permite o envio de imagem ou vídeo em seu interior, a equipe de Na Balada não se responsabiliza por postagens não outorizadas pelos donos dos estabelecimentos ou que venham ferir os direitos autorais do local. Informações pessoais postadas ficarão expostas na rede social e permanecerão acessível a todas as pessoas conectadas. Não nos responsabilizamos por mensagens errôneas e de má fé e que possam prejudicar os demais usuários.
Se o usuário desejar o acesso simples por um computador o mesmo deverá ter: - conexão com a internet (preferencialmente banda larga) - navegador - câmera e microfone (opcionais) Já para tecnología portátil como telefonees celulares e tablets é necessário - conexão com a internet via wireless (preferencialmente banda larga) - navegador - câmera e microfone - a câmera deverá ser sensível o suficiente para capturar imagens em ambiente escuro - compatibilidade do aparelho para a aplicação Nota: no momento, apenas iPhones são comptíveis. Na Balada
I
2011 Pérola & Abarca
Na Balada almeja ser um espaço virtual para a troca de experiências urbanas e um ponto de referência para quem busca atividades nas grandes metrópoles. Sua presença é bem vinda nesta rede social, bem como suas opiniões e jeito de ser. Divirta-se Administração de Na Balada I
Termos de uso
Figura 50: Representação da página Política de Uso. Nesta tela o usuário poderá ler as regras de uso da rede social, bem como seus requisitos de sistema. É a única tela da aplicação onde não se é possível ir para o mapa. Para sair dos termos de uso, é necessária a ação do botão voltar do navegador.
Deseja adicionar esta pessoa em sua lista de amigos? sim
não
Deseja inserir esta balada na rede social? sim
Deseja excluir esta pessoa em sua lista de amigos? sim
não
Nome Balada
não
Endereço: Horário de funcionamento: Descrição:
Deseja adicionar esta pessoa em sua lista de amigos? sim
sim
não
não
Deseja excluir esta pessoa em sua lista de amigos? sim
não
Adicionado com sucesso aos favoritos.
57
Figura 51: Mini telas do tipo pop-up. Estas telas são relacionadas a confirmação de ações na aplicação web, como adicionar ou excluir baladas, comentários e amigos.
3.6 Proposta de interface mobile Mais simplificada que a interface web, a proposta mobile tem como foco o envio da informação e procura rápida por baladas. Porjetada para smart phones com
tela sensível ao toque, por enquanto, sua primeira versão será disponível apenas para plataforma Apple.
12:34 PM
USER
Na Balada Festa em tempo real
login senha
Figura 53: Representação da tela login. Esta tela é exibida apenas na primeira vez em que o usuário acessar o aplicativo para dispositivo móvel com o intuito de agrupar seu perfil ao seu aparelho mobile. Para acessar esta tela novamente, a pessoa deverá clicar no botão trocar de usuário.
12:34 PM
USER
58
Na Balada
Envie baladas
Enviar áudio
Enviar foto áudio
foto
Enviar vídeo
Enviar texto vídeo
Voltar para tela anterior Ver mapa Trcar de usuário
texto
Figura 54: Representação da tela ação. Nesta tela o usuário poderá escolher entre enviar baladas através de dispositivo portátil ou consultar baladas já postadas no mapa da rede social.
USER
12:34 PM
Na Balada
Enviar vídeo
preview Figura 55: Representação da tela Gravar Vídeo. Por meio de equipamento portátil dotado de câmera é possivel a gravação de baladas em vídeo. O botão preview é o responsável pela gravação e visualização de conteúdo. Há opção de cancelar, voltar para a tela anterior e upload para a rede social.
Voltar para tela anterior Cancelar ação Upload de balada
USER
12:34 PM
59
Na Balada
Enviar vídeo
Adicionar legenda
Cancelar ação Ok de envio
Figura 56: Representação da tela Inserir Legenda em Vídeo. Nesta tela é perguntado ao usuário se ele deseja inserir legenda ao vídeo que pretende enviar para a rede social.
USER
12:34 PM
Na Balada
Enviar foto
Click aqui para fotografar
Figura 57: Representação da tela inicial de fotografia, onde as únicas opções disponíveis são voltar ou fotografar.
USER
12:34 PM
60
Na Balada
Enviar foto
Figura 58: Representação da tela Fotografar. Por meio de equipamento portátil dotado de câmera é possivel a fotografia de baladas. Há opção de cancelar, voltar para a tela anterior e upload para a rede social.
USER
12:34 PM
Na Balada
Enviar foto
Figura 59: Representação da tela Inserir Legenda em Imagem. Nesta tela é perguntado ao usuário se ele deseja inserir legenda à imagem que pretende enviar para a rede social.
Adicionar legenda
USER
12:34 PM
61
Na Balada
Enviar áudio
Gravar
Parar
Ouvir
Pausar
Figura 60: Representação da tela Gravar Áudio. Como um player de rádio, por meio de botões já consagrados é possivel a gravação de conteúdo de áudio. É praticável cancelar, voltar para a tela anterior e upload para a rede social.
USER
12:34 PM
Na Balada
Enviar áudio
Adicionar legenda
Figura 61: Representação da tela Inserir Legenda em Áudio. Nesta tela é perguntado ao usuário se ele deseja inserir legenda ao áudio que pretende enviar para a rede social.
USER
12:34 PM
62
Na Balada
Enviar texto
Figura 62: Representação da tela Texto. Esta tela permite ao usuário o envio de baladas em comentários escritos. Há opção de cancelar, voltar para a tela anterior e upload para a rede social.
12:34 PM
USER
Na Balada
Enviar En E n vi nvi viar ar texto t ex exto to
Q W E R T Y U I O P A S D F G H J K L Z X C V B N M .
123
/
.com
Go
Figura 63: Representação da tela Legenda. Nesta tela o usuário adicionará a mensagem de texto ou legenda da balada que irá enviar para a rede social. Seu layout dependerá do sistema operacional mobile utilizado.
12:34 PM
USER
63
Na Balada
Envie baladas
áudio
foto
Balada enviada!!! vídeo
texto
Figura 64 Representação da tela Balada Enviada. Ao receber o aviso de balada enviada o usuário poderá ter a certeza de que a mesma já está disponível na rede social. A pessoa que utilizar o sistema é automaticamente direcionada para a tela ação após esta confirmação de envio.
12:34 PM
USER
Na Balada
Nome balada
Nome balada
São Paulo Endereço balada Horário de funcionamento balada
Figura 65: Representação da tela Mapa. Esta tela é uma simplificação da interface mapa da rede social web. Sua função é mostrar as baladas em andamento ao usuário na região onde ele se encontra. A localização do usuário é dada através de software de geolocalização, e se possível, GPS.
3.7 Uso da marca 3.7.1 Redução máxima 64
8 mm
40 px
Na Balada
Na Balada
14 mm
25 px
Figura 66: Redução máxima permitida
3.7.2 Área de segurança
Na Balada
Figura 67: Área de segurança da marca corresponderá a letra A em caixa baixa. Elementos marcantes não poderão se aproximar mais do que o espaço estabelecido.
3.7.3 Assinaturas (versões da marca)
Na Balada Na Balada Versão preferencial
Versões secundárias
Figura 68: Versões de assinatura permitida. Elas são: 1 - Marca em sua totalidade 2 - Apenas símbolo gráfico 3 - Apenas inscrição (para aplicações que exijam horizontalidade)
3.7.4 Padrão cromático C M Y K
- 20 - 100 - 97 - 12
R - 180 G - 25 B - 27
# AD0F22 C M Y K
- 25 - 0 - 88 - 0
-
0 0 50 0
R - 253 G - 146 B - 0
# EB9323 R - 143 G - 192 B - 67
# 90BE35 C M Y K
C - 0 M - 50 Y - 100 K - 0
C - 0 M - 0 Y - 100 K - 0
R - 255 G - 247 B - 42
# FBF743
65
R - 255 G - 243 B - 42
# FCFA9E
C - 0 M - 0 Y - 0 K - 100
R - 0 G - 0 B - 0
# 000000 Figura 69: Padrões cromáticos da marca nas escalas RGB, CMYK e hexadecimal.
C M Y K
-
83 54 44 38
# 2E4854
R - 43 G - 76 B - 90
3.7.5 Usos incorretos
Na Balada
Na Balada
Na Balada
Na Balada
Na Balada
Na Balada Figura 70: Estão vetados como usos que distorçam a marca, bem como fundos que “apaguem” seus elementos visuais.
Na
Ba lada
66
3.7.6 Tipografia
Metro DF A B C D E F G H I J K L M N O P Q R S T U W X Y Z a b c d e f g h i j k l m n o p q r s t u w x y z 1 2 3 4 5 6 7 8 9 0 ! @ # $ % & * ( ) ? [ ] ; : + = -
Miryad Pro (aplicativo) ABCDEFGHIJKLMN OPQRSTUWXYZ abcdefghijklmn opqrstuwxyz 1234567890 !@#$%&*()?[];:+=-
67
3.7.7 Painel semântico Painel Semântico conceitos atribuídos
aspectos perceptivos
resultados tipografia
Figura 71: Marca não utilizada
Na Balada Figura 72: Marca utilizada
forma
cor
conceito 1 (não utilizado) - definições: meio de comunicação entre pessoas interessadas em eventos noturnos urbanos
1 cor 2 contraste 3 formas geométricas 4 ondas 5 espaços vazados
Gravitate
retangular vermelho, com cantos preto, amarelo e arredondados, branco ângulos retos e ondas
conceito 2 - linguagem jovial, para público alvo específico que remeta ao ambiente urbano e eventos noturnos.
1 cor 2 contraste 3 formas geométricas 4 ondas 5 espaços vazados
MetroDF
círculos, formas arredondadas
vermelho, preto, amarelo laranja e verde
3.7.8 Esboços de interface - web Na Balada
home
Festa em tempo real – poste... interaja... participe
Mapa Kasebre Rock Bar
marcar favorito
desmarcar favorito
Kasebre Rock Bar
Ver eventos
Rua Avenida Aricanduva,12000 Bairro: São Mateus Cidade: São Paulo (SP) País: Brasil Telefone: (11) 6919-7022
poadcast
foto
vídeo
texto
68 Na Balada
I
2011 Pérola & Abarca
I
Termos de uso
Figura 73: Esboços de interface não tulizadas por não possuirem quesitos de usabilidade e leitura. Como consequencia a nevegação do usuário nestes meios seria muito prejudicada.
3.7.9 Esboços de interface - mobile USER
12:34 PM
12:34 PM
USER
Encontre baladas
Enviar baladas em texto
ver mapa ir Bus nimus rerit res ducilig endipsa ndaniat magnatas eum eicietum harum quam fuga. Dolo ipid quam facia perro omnis quo occum aligenis ipissi vendellutet ape pa eos impori.
12:34 PM
USER
12:34 PM
USER
Enviar baladas em fotografia Nome Balada Nome balada
Envie baladas Balada adicionada com sucesso
áudio ir
foto ir
vídeo ir
texto ir
Endereço Balada
Nome balada
Nome balada
voltar ir
Q W E R T Y U I O P
São Paulo Nome balada
A S D F G H J K L Entrar como outro usuário
Z X C V B N M
ir voltar ir
Endereço balada Horário de funcionamento balada
voltar ir 123
.
/
.com
Go
Figura 74: Esboços de interface não tulizadas por não possuirem quesitos de usabilidade e leitura. Como consequencia a nevegação do usuário nestes meios seria muito prejudicada.
Conclusão Para tornar a ferramenta mais atrativa, integramos conceitos de web 2.0, vídeos, construção colaborativa e outras ferramentas já presentes em outras redes sociais, já que as mesmas que nos serviram de referência são muito populares entre o público brasileiro, não importando a classe social a qual o mesmo pertence. O uso de telefonia móvel também é bem popular, tornando este nicho de mercado bastante atrativo para o desing de interface. Nossa proposta inicial era de desenvolver um aplicativo de geolocalização para aparelhos mobile que indicasse onde estão, em tempo real, as principais atrações da Virada Cultural. Porém, concluímos que este tipo de aplicação não é viável, pois além de ser algo que é útil apenas uma vez ao ano, notamos que muitas pessoas têm receio de utilizar tecnologia em locais públicos, devido ao problema de furtos e roubos. Partimos então para o campo das redes sociais. Atualmente podemos criar redes sociais com temáticas específicas para atender aos mais variados públicos alvo. Primeiramente pensamos em algo que abarcasse todos os tipos de interesses culturais que possam existir em grandes metrópoles, como baladas, eventos gastronômicos, esportes e eventos culturais. O problema de uma aplicação como esta é a grande diversidade de público alvo existente. Analisando o que seria de mais inédito no mercado, concluímos que o nicho baladas era o que mais precisava de informações construídas pelos próprios usuários. Foi acordado então, dar continuidade ao projeto com foco neste mercado. Assim foi definido o nome Na Balada. Concluímos que para os outros nichos seriam necessárias outras redes sociais de temáticas também específicas como No Esporte (esportes) e Na Cultura (eventos culturais). Sobre o desenvolvimento de interface, quanto mobile, concluímos que mesmo os telefones celulares possuindo interfaces próprias de gravação de áudio, vídeo de fotografia era necessário criar uma específica para o Na Balada. Esta atitude teve como função evitar inconsistências na interface, deixando-a similar
em quaisquer smart phones com tela sensível ao toque. Telefones sem a tecnologia touch screen foram desconsiderados neste projeto, pois utilizamos como referência o iPhone, da Apple, gadget muito popular na atualidade. Enquanto interface web, concluímos que as redes sociais são mídias em ascensão, pois nestes locais, os usuários se tornam os criadores da informação. A virtualização de cidades podem influenciar o modo como as pessoas vêm o mundo físico, ondevirtual e real se complementam. Quanto as questões tecnológicas, nem sempre, uma versão mais atual pode ser melhor que a antiga, por isto a decisão de se utilizar o HTML 4.0 e 4.5, por exemplo. Em suma, podemos concluir que redes sociais, telefonia móvel e tecnologia estão cada vez mais relacionadas, isto acaba contribuindo para um mundo onde todos constroem a informação, tornado a web uma grande inteligência coletiva. Neste novo paradigma, todas as pessoas estão interconectadas e o mundo, por sua vez, sempre atualizado.
69
Glossário Avatar: Personagem assumido pelo usuário para sua exposição na internet.
Consumer-generate media: Mídia gerada pelo consumidor. Cross media: Informação que pode ser encontrada em mídias físicas e virtuais.
Banda estreita: Sistema de transmissão de dados e conexão de internet de baixa velocidade, de ate 56Kbps. Desktop: Computador fixo de mesa. Banda larga: Sistema de transmissão de dados e conexão de internet de alta velocidade, superior a 56Kbps. Banner: Peça gráfica física ou virtual para a divulgação de um serviço ou produto. Beta: Programa de computador inacabado, porém, já disponibilizado aos usuários finais. Blog: Espécie de diário publicado na internet, onde a exibição dos textos começa dos mais antigos para os mais novos. Browser: Programa utilizado para “navegação” web.
CC – Creative Common: Padronização de linguagens de programação e ferramentas de desenvolvimento gratuitas. Chat: No idioma português significa “conversa”. No Brasil também é usada para identificar aplicativos de troca de mensagens em tempo real. Cloud Computing: Técnica que permite que programas não estejam instalados em máquinas locais, e sim, em computadores remotos.
Dispositivo mobile: Mesmo que aparelhos portáteis. Download: Transferência de arquivo de um determinado servidor para o computador do usuário. Copiar arquivo. Baixar da internet.
e-mail: Mesmo que correio eletrônico.
Flash: Linguagem de programação criada pela Micromedia e posteriormente comprada pela Adobe utilizada para a criação de jogos e sites dinâmicos. Flash mob: São aglomerações de pessoas em um local público, combinadas por meios tecnológicos. A dispersão das pessoas é feita tão rapidamente a reunião das mesmas. Flyer: Peça gráfica parecida com cartão postal para a divulgação de produtos e serviços.
Gadget: Dispositivo considerado acessório tecnológico, como, por exemplo, tocadores de mp3, telefones celulares e tablets.
Código aberto: Linguagens de programação gratuitas onde quaisquer pessoas podem fazer alterações e cópias de programas sem necessidade de licença.
Grafitti: Arte urbana onde são feitos desenhos em muros e paredes.
ColdFusion: Software que permitem que desenvolvedores criem, implantem e façam manutenção rapidamente de aplicativos de Internet.
Hardware: Parte física de uma máquina.
70
Interação: Ação de objetos ou pessoas umas com as outras. Interface: Sistema mediador entre o ser humano e uma máquina. Internauta: Usuário de internet.
Javascript: Mesmo que linguagem Java.
P2P: é uma arquitetura de sistemas distribuídos caracterizada pela descentralização das funções na rede, onde cada nodo realiza tanto funções de servidor quanto de cliente. Paradigma: Conceito sobre algo. Ideia sobre alguma coisa.
Remote-scripting: Aplicações web que tem características e funcionalidades de softwares tradicionais.
Layout: Arte, visual de uma peça de desing. Link: Mesmo que nó de hipertexto.
Marketing: Escala do processo de produção de produtos ou serviços relacionados com o fluxo produtor – consumidor. Marketing on line: Área do Mercado publicitário voltado a divulgação de produtos ou serviços via web. Marketing viral: Tipo de publicidade que utilize redes sociais pré-existentes para a divulgação de produto ou serviço. Chama a atenção por ser um tipo de propaganda que raramente seria utilizado em vias tradicionais. Memória ROM: Memória não volátil de um computador. O Mesmo que hard disk ou HD.
Notebook: Computador portátil.
Outdoor: Peça gráfica de divulgação de serviços ou produtos em forma de cartaz ou painel de grande dimensão. On line: Estar disponível na internet.
Sistema mono: Sistema de som, em que o áudio é percebido por apenas uma saída. Sistema stereo: Sistema de som, em que o áudio é percebido por duas saídas. Site: Mesmo que página web. Slogan: Frase que caracteriza um produto ou um serviço. SMS: Mensagem escrita enviadas via telefone celular. Smart phone: Telefone celular com funcionalidade expandida por meio de sistema operacional e aplicativos. Software: Mesmo que programa, geralmente são executáveis armazenados em computadores ou outros dispositivos utilizados para a realização de tarefas determinadas. Story-board: Quadros sequenciais, parecidos com histórias em quadrinhos que descrevem uma determinada tarefa ou cena.
Taxonomia: Ato de classificar objetos, seres vivos e comportamentos. Torpedo: Mesmo que mensagem SMS.
71
Upload: Transferência de arquivo de um computador local para um servidor remoto.
WWW: Sistema de hipermídia no qual se baseia a internet. É a abreviação de WorldWideWeb. Web: Mesmo que internet. Web app: Aplicativos que funcionam diretamente da internet no computador do usuário, sem a necessidade de instalação. Wiki: Aplicativos ou documentos de hipertexto de criação colaborativa. Wirelles: Internet sem fio.
XML: Linguagem de programação utilizada para marcação de dados.
72
ApĂŞndices
Cronograma Na Balada para fase de TCC 2. Mês Semana Recesso
Revisão parte escrita 2
Fluxograma
Reunião em dupla
Desenvolvimento de layout e wireframe
Programação da interface
Teste da interface
Reunião com orientador
Revisão parte escrita 3
Finalização
Apresentação TCC 2
Tempo planejado Execução
Janeiro 1
2
3
Fevereiro 4
1
2
3
Março 4
1
2
3
Abril 4
1
2
3
Maio 4
1
2
3
Junho 4
1
2
3
4
Anexos
Interfaces já existentes utilizadas como referência.
Época São Paulo
Guia Folha On LIne
Foursquare
São Paulo Guia Mais
Google Maps
Places - Facebook
YouTube
Orkut
Bibliografia BERNOFF, Josh. Groundswell: Winning in a World Transformed by Social Technologies. Massachusetts. Editora Havard Business, 2008
Como o GPS se tornou uma ferramenta de localização. Disponível em <http://weblogs.com.br> Acesso em 03 de maio 2010
COSTA, Rogero. A Cultura Digital. São Paulo. Editora Pubfolha, 2003. GROSSO, Gian Bruno. PISANI, Francis. PIOTET, Dominique. Como a Web Transforma o Mundo: a Alquimia das Multidões. São Paulo. Editora Senac, 2010 Instituto DATAFOLHA. DNA Paulistano. Editora Pubfolha, 2009 LAUREL, Brenda. The Art of Human-Computer Interface Design. Boston. Editora Addison-Wesley, 2001 LEMOS, André. Janelas do ciberespaço. São Paulo. Editora Sulina, 2004 LEÃO, Lúcia. O Labirinto da Hipermídia: Arquitetura e Navegação no Ciberespaço. São Paulo. Editora Iluminuras, 2005 LEVY, Pierre. As Tecnologias da Inteligência: o Futuro do Pensamento na Era da Informática. Editora Nacional, 2000
Como o telefone celular revolucionou a comunicação. Disponível em <http://www.overmundo.com.br> Acesso em 15 de maio 2010
Guia Folha On-line. Disponível em <http://www1.folha.uol.com.br> Acesso em 03 de maio 2010
Informações sobre a movimentação financeira em eventos na capital paulista. Disponível em <http:// www.visitesaopaulo.com> Acesso em 22 de jun. 2010
Programação HTML. Disponível em <www.htmlstaff.org> Acesso em 14 set. 2010
PREECE, Rogers. Design de Interação. Editora Bookman, 2005 RUCUERO, Raquel. Redes Sociais na Internet. Editora Sulina, 2009
Editora Globo. Onde os brasileiros se encontram. Revista Época. São Paulo, SP, no 628. 10 jun. 2010 Editora Abril. Nos laços (fracos) da internet. Revista Veja. São Paulo, SP, no 2120. 08 jun. 2010
Qual foi o impacto do GPS no dia a dia das pessoas. Disponível em <http://www.biinternational.com.br> Acesso em 07 de maio 2010
Rede social Foursquare. Disponível em <http://foursquare.com/> Acesso em 15 de maio 2010