Tcc texto teorico

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

Twitter

9,8 milhões

27

Facebook

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

Linkedin

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

Twitter

Troca de mensagens curtas

Facebook

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

Linkedin

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

Google

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