THE BLOCKERDo it by the other

side.

Marta Van Ginkel

Júlia Poll

Helena Silva

Frederic Oliva

Sergi Segú Maig del 2015

Institut d’Altafulla

The Blocker

Índex

1. Introducció..............................................................................................................................3

2. Creació dels grups de treball...................................................................................................3

2.1. Pactes de l’equip..............................................................................................................3

2.2. Auditoria d’habilitats personals i de grup........................................................................5

3. Ideació de l’empresa i l’app......................................................................................................5

3.1. Anàlisis problema. Factor VEX, les 5 grans preguntes i Mètode SCQA............................8

4. Introducció a la programació..................................................................................................10

5. Desenvolupament de l’aplicació.............................................................................................12

5.1. Creació d’un mapa d’escenaris........................................................................................12

5.2. Creació d’un mapa de funcionalitats...............................................................................13

5.3. Elaboració d’un prototip de l’aplicació..........................................................................14

5.4. Desenvolupament de l’aplicació amb AppInventor.......................................................15

6. Publicitat de la nostra empresa..............................................................................................20

6.1. Pre-producció del vídeo.................................................................................................20

6.2 Creació del vídeo............................................................................................................22

6.3. Creació de la falca sonora...............................................................................................23

6.4 Pòster de l’aplicació..........................................................................................................24

7. Comercialització de la nostra aplicació...................................................................................25

7.1. Estudi del mercat...........................................................................................................25

7.2. Definir el mercat.............................................................................................................26

8. Conclusió................................................................................................................................26

9. Referències bibliogràfiques....................................................................................................26

SightSide 2

The Blocker

1. Introducció

El concurs d’apps Mobilitzem l’Informàtica de mSchools és un projecte innovador que

té com a objectiu donar a conèixer la creativitat dels alumnes d’arreu de Catalunya.

Som un grup de nois i noies de 4t d’ESO que hem creat una empresa d’aplicacions per

a treballar en aquest projecte. Hem valorat idees i posat punts en comú per intentar

fer la millor aplicació que poguéssim fer en aquestes 3 hores de classe a la setmana.

Mitjançant els recursos personals i també els del centre, hem aconseguit tenir una idea

i reflexar-la al producte real.

Durant el procés, hem assolit coneixements de creació d’apps, edició de vídeo i imatge,

utilització d’eines de màrqueting, treball en equip…

Així que presentem el nostre projecte amb la companya SightSide, i la creació de

l’aplicació The Blocker.

2. Creació dels grups de treball

Com totes les empreses, vam signar una sèrie de pactes i vam definir les nostres

habilitats i coneixements abans de començar.

2.1. Pactes de l’equip

El primer que varem pactar va ser quin seria el rol de cadascun dels membres dins de

l’empresa per així poder organitzar les tasques d’una forma més còmode.

Per fer-ho vam tenir en compte els interessos i les habilitats de tots els treballadors i

vam fer una taula (adjuntada a continuació) on s’especifica l’especialització cada

empleat:

SightSide 3

The Blocker

Membres de l'equip Rol primari Rol secundari

Helena Silva Creatiu Explorador

Marta Van Ginkel Coordinadora Creatiu

Frederic Oliva Constructor Explorador

Cristina del Aguila Comunicadora Creatiu

Júlia Poll Exploradora Coordinadora

Sergi Segú Roig Explorador Comunicador

Ara bé, per molt que tots estiguin especialitzats en un camp en concret, tots els

components estan obligats a ajudar als seus companys si requereixen de la seva ajuda

encara que no pertanyi al seu camp.

A continuació d’establir els rols de cada membre de l’equip, vam pactar cinc normes

que ens comprometíem a respectar per tal d’evitar que uns membres de l’equip fessin

més feina que d’altres. Aquestes són:

1. Em comprometo a donar el màxim.

2. Em comprometo a no decepcionar als meus companys.

3. Em comprometo a portar la feina al dia.

4. Em comprometo a col·laborar amb els altres membres del grup.

5. Em comprometo a ajudar en tot el que necessitin els meus companys.

SightSide 4

The Blocker

2.2. Auditoria d’habilitats personals i de grup

Com a tots els treballs, al nostre grup hi ha gent amb diferents habilitats, que es

valoren totes per igual.

Aquí tenim un llistat dels components del grup amb les habilitats corresponents

de cada persona.

·Júlia: habilitats d’edició de vídeo, falca sonora i coordinació del grup.

·Marta: Habilitat de coordinació i lideratge del grup, creativitat, i ambició.

·Frederic: Habilitat de programació, i creativitat.

·Helena: Habilitat creativa, disseny i d’edició d’imatges.

·Sergi: Habilitat de comercialització.

·Cristina: Habilitat de comunicació i creativitat.

3. Ideació de l’empresa i l’app

El primer que va fer a l’hora de posar en marxa aquest projecte va ser buscar un nom i

un logo per a la nostra empresa.

SightSide 5

The Blocker

Després de plantejar diverses propostes, vam arribar a l’acord de que l’empresa seria

anomenada SightSide, que és una combinació entre les paraules sight (vista) i side

(costat).

Per tant, vam decidir que per fer el seu logo hauriem d’utilitzar aquest joc de paraules.

Primer vam fer un esboç del logotip amb mà i després el vam digitalitzar amb

Illustrator i Photoshop fins a obtenir el resultat desitjat.

A més, vam crear un eslògan que definís els valors de l’empresa; és aquest:

“Do it by the other side”

Degut a que quan no pots realitzar una tasca o aconseguir un desig el que has de fer és

plantejar-ho des d’un altre punt per tal de poder arreglar allò en que estàs fallant.

Així, al tenir la base del que seria la nostra empresa de software, va arribar l’hora

d’escollir de què tractaria l’app. Per fer-ho, vam pensar en diferentes idees de

problemes que volíem solucionar amb la nostra aplicació i vam analitzar la seva

rellevància, la seva eficiència i la seva viabilitat.

SightSide 6

The Blocker

Aquest va ser el resultat:

Problema Rellevància Eficiència Viabilitat Total Rànquing

Distracció en la conducció 3 4 1 8/15 5è

Incapacitat concentració en

les nostres tasques

4 4 3 11/15 2n

Desconeixement de la

bandera en platges catalanes

5 4 3 12/15 1r*

Desconeixement

contaminació de platges

4 4 1 9/11 4t

Gran dificultat per aixecar-se

del llit

4 4 3 11/15 3r*

La idea guanyadora va ser la de “desconeixement de la bandera de les platges

catalanes” però més tard vam descobrir que, igual que la de “gran dificultat per

aixecar-se del llit”, ja hi havia una aplicació existent que solucionés el problema.

Per tant, vam decidir que creariem una aplicació que ens permetés desconnectar de

les distraccions del nostre dispositiu mòbil bloquejant durant un temps establert

aquelles aplicacions, contactes, números de telèfon o bé, comptes de correu electrònic

que interfereixin en la nostra vida diària.

Un cop decidit de que tractaria l’aplicació, vam haver de pensar en el nom i el logo de

l’aplicació tal i com havíem fet amb l’empresa. Així que vam arribar a la conclusió de

que, ja que es tractava d’una aplicació que permetés bloquejar aquelles distraccions

que t’impedeixen seguir amb el teu dia a dia, el millor nom que li podiem donar a l’app

era The Blocker que, al traduir-lo de l’anglès, té un significat semblant a “el

bloquejador”.

SightSide 7

The Blocker

Al anomenar-se The Blocker i tenir la funcionalitat de bloquejar, vam decidir que el

logo havia de fer referència a un objecte que marques un límit o una prohibició com

ara bé un cadenat o un senyal de trànsit de prohibició. Finalment, ens vam decantar

cap a la idea d’utilitzar un mur de maons per a crear aquest límit. D’altra banda, vam

fer que les lletres que fessin referència a l’aplicació havien de simular un graffitti ja que

aquests són fets per éssers humans amb les seves vides i acostumen a estar disposats

en murs.

Aquest és el resultat:

3.1. Anàlisis problema. Factor VEX, les 5 grans preguntes i Mètode SCQA

Aquesta aplicació serveix per a resoldre el problema de la incapacitat de concentrar-se

a l’hora de realitzar una activitat que la requereixi.

A partir d’aquí, hem desenvolupat el Factor VEX, les 4 grans preguntes i el mètode

SCQA.

SightSide 8

The Blocker

Factor VEX

Familiar: Qui no es distreu mai?

Freqüent: Quan va ser l’última que no et vas concentrar per culpa del mòbil?

Específic: El relat és fàcil d’explicar en poques paraules

Irritant: Molesta molt quan et passa.

Car: La desconcentració pot sortir cara ja que no rendeixis tant com podries.

Mòbil: Mai no estàs segur de quan et passarà.

Les 5 grans preguntes

Qui?: Tot ésser humà que necessiti concentració per a realitzar una certa activitat i

disposi d’un telèfon mòbil i accés a internet.

Què?: Una aplicació que permeti bloquejar el mòbil tant de temps com vulguis de

manera que només puguis

Quan?: Quan tu necessitis concentrar-te.

On?: On tu necessitis concentració: a casa, a la feina, a la biblioteca, a l’aire lliure…

Per què?: Perquè el mòbil és una distracció constant.

SightSide 9

The Blocker

Mètode SCQA (Situació, Complicació, Pregunta, Resposta)

Situació Complicació Pregunta Resposta

Hi ha 3.314.687.966

persones actives al món.

D’aquestes, la gran majoria

necessita el mòbil per

treballar. Però alhora,

també els distreu la

possibilitat de poder

contactar amb els seus

coneguts per motius d’oci.

Contínuament hi ha

persones que es

distreuen massa sovint

amb el mòbil

involuntàriament.

Com podem

ajudar a

aquests

individus a no

distreure’s tant

amb el seu

dispositiu

mòbil?

El bloqueig del

mòbil durant la

estona que

determinis treu

la opció de

distreru-re’s amb

el dispositiu

mòbil.

Així que, mirant els resultats, arribem a la conclusió de que podríem solucionar aquests

problemes amb la nostra aplicació.

4. Introducció a la programació

El programa que hem utilitzat per fer l’aplicació s’anomena AppInventor2, una

plataforma gratuïta proporcionada per Google. Ens permet crear una aplicació de

software únicament pel sistema operatiu d’Android. És molt bàsic i senzill d’utilitzar,

les eines que fem servir amb aquesta plataforma no són gens complicades comparades

amb altres plataformes i encara menys perquè hi ha centenars de vídeos o tutorials

que ens ajuden a guiar-nos per saber emprar els diferents estris de programació.

SightSide 10

The Blocker

Per millorar i ampliar els nostres coneixements sobre app innventor hem fet diferents

tasques per investigar sobre les eines i tècniques de programació.

HelloPur: una app que consisteix en inserir una imatge d’un gat, un cop prems sobre

ella es generarà el mioleig d’un gat.

PaintPot: l’aplicació és molt similar a la de HelloPur hi haurà la imatge del mateix gat

que en comptes d’originar un efecte sonor, s’observarà una barra on podràs

seleccionar diferents color amb que pots pintar la imatge.

Pong: consisteix en un crear un joc que es basa en una pilot que esta en moviment, i

una barra que mourem per aconseguir que la pilota no sobrepassi una determinada

línia, si la sobrepassa perds. També crearem un contador per saber quants cops fem

retrocedir la bola.

Mole: també tracta sobre un joc, la idea pricipal és el moviment d’una imatge, la d’un

talp que es mourà per una zona indeterminadament i l’objectiu serà intentar prémer el

talp per guanyar punts. A mesura que vagis guanyat punts, el desplaçament de la

imatge serà més ràpida complicant el joc.

SightSide 11

The Blocker

5. Desenvolupament de l’aplicació

Hem aconseguit desenvolupar la nostra aplicació seguint un seguit de pasos:

-La creació d’un mapa d’escenaris.

-La creació d’un mapa de funcionalitats.

-La elaboració d’un prototip de l’aplicació.

-La creació de l’aplicació mitjançant app inventor.

5.1. Creació d’un mapa d’escenarisGràcies a la creació del mapa d’escenaris vam plantejar-nos millor el funcionament de

l’app i com seria el seu disseny per tal d’aconseguir un ús més fàcil.

Constisteix en pensar com l’usuari, posar-se en la seva pell per saber com actuaria o

interaccionaria davant certes situacions i quines possibles solucions podria oferir la

nostra aplicació.

El mapa d’escenaris que hem creat segueix els següents punts:

La primera columna mostra una situació

La segona planteja el problema mitjançant preguntes

En la tercera proposem una possible solució

SightSide 12

The Blocker

Situació Problema Solució

Un estudiant en época

d’examens

Distracció causada pel

mòbil

Bloquejar allò que

molesta

Amics passant l’estona

Algú intentant domir

Algú intentant llegir

Conductor al volant

5.2. Creació d’un mapa de funcionalitats

Per planejar i organitzar el funcionament de la nostra app hem utilitzat el Mind42, una

pàgina web que ens proporcionar l’opció de crear mapes, esquemes gratuïtament, els

podem fer de manera individual o col·laborativa.

SightSide 13

The Blocker

5.3. Elaboració d’un prototip de l’aplicació

Hem utilitzat Balsamiq, una eina que ens permet crear uns wireframes impressionants

i molt ben dissenyats per obtenir una millor idea de com serà la nostra futura app.

SightSide 14

The Blocker

5.4. Desenvolupament de l’aplicació amb AppInventor

Un cop acabat el mapa de funcionalitats amb mind42 i el prototip amb Balsamiq

podem començar a desenvolupar i formar l’aplicació.

Comencem afegint tots els botons que volem que surtin, per seleccionar les diferents

opcions de bloqueig, opcions de desbloqueig, temporitzadors, l’opció de

SightSide 15

The Blocker

desbloqueig...I altres elements per donar a conèixer la nostra empresa i aplicació:

enllaç a la pàgina web de Facebook, Twitter, Pinterest etc. L’altre objectiu és fer-la

estèticament atractiva. Hem fet el possible per millorar la seva apariència.

Un cop estan tots els botons insertats de manera correcta afegim les imatges com a

fons dels botons per acabar de polir l’aplicació.

Resultat:

SightSide 16

The Blocker

El següent pas és programar, és a dir, començar a fer funcionar l’app de tal manera

que quan premis qualsevol dels botons apareix una altre, faci una determinada funció

o et dirigeixi a una específica pàgina web.

El primer bloc ens permet veure les primeres opcions de bloqueig: la opció de

bloquejar el mòbil o el botó ``or´´que mostrarà les altres opcions.

Aquest mostra el temporitzador, el temps que vols bloquejar el teu mòbil un cop

prems el botó de bloquejar el telefon mòbil.

El següent bloc és mot important perquè fa visibles totes les altres opcions de bloqueig

o desbloquejar aplicacions, contactes, números correus electrònics. I també la de

resetejar tots els canvis.

El responsable del funcionament del botó de resetejament és el següent.

SightSide 17

The Blocker

El bloc que es mostra a continuació fa possible la generació d’una llista amb les

aplicacions més conegudes i addictives quan prems el botó de bloquejar aplicacions.

Té la meteixa funció que l’anterior però serveix per desbloquejar les apps al prèmer el

botó de desbloquejar apps.

SightSide 18

The Blocker

SightSide info és el botó que fa visible el correu de la empresa, i els botons que

dirigeixen a la web de Facebook, Twitter, Pinterest i a la de SightSide. Aquest

procediment funciona gràcies al blocs mostrats a continuació:

Un cop cliques sobre el botó de les pàgines web et direccionen a elles mitjançant

aquests blocs:

SightSide 19

The Blocker

6. Publicitat de la nostra empresa

Per tal de donar a conèixer la nostra app a la societat, hem creat diversos materials

multimèdia; com per exemple, un vídeo, un pòster i una falca sonora.

6.1. Pre-producció del vídeo  Abans de començar a gravar el vídeo hem seguit una sèrie de passos que ens han

ajudat a aclarir com havia de ser per tal de captar l’atenció dels possibles consumidors.

1r pas. Brainstorming → Això consisteix en escriure les paraules que ens venen

al pensament en relació amb la nostra aplicació. Així, per fer-ho més fàcil ho

hem dividit en dues columnes segons si són la causa de l’ús de la nostra app

(columna vermella) o bé si són allò en que et pots centrar després d’haver

utilitzat The Blocker (columna verda).

Distracció Bloquejar

Soroll Vida

Missatges Exterior

Notificacions Platja

Mal de cap Relax

Estrés Diversió

Fracàs Estudiar

Concentració

Llibertat

2n pas. Trobar el públic objectiu → Aquesta app és adequada per a la gent que

disposi d’un smartphone que el distregui de la seva vida diària.

SightSide 20

The Blocker

3r pas. Selecció del mitjà → Aquest vídeo es visualitzarà a l’ordinador en cases

o oficines. Ja que hem decidit que la millor publicitat és la que visualitzen

voluntàriament els consumidors.

Per a decidir-ho, primer hem fet una taula de l’impacte que provoca la visió en

diferents mitjans de comunicació.

Televisió Major nombre espectadors

Ràdio Major nombre oients

Ordinador Major nombre espectadors voluntaris

Diari Menor nombre lectors

Un cop vist l’impacte des dels diferents mitjans, hem mirat quins són els avantatges i

quins són els inconvenients de cadascun.

Avantatges Inconvenients

Televisió Molts espectadors Cost

Ràdio Molts oients Cost

Ordinador Gratis No tants espectadors

Diari Mitjà culte Cost

3r pas. Selecció del gènere → Per últim, hem decidit que el vídeo serà un

drama general que mostri diferents escenes quotidianes en les que l’estrès ens

supera.

SightSide 21

The Blocker

6.2 Creació del vídeo Per a creació del vídeo tota l’empresa va participar en una pluja d’idees per tal de

decidir quina idea era la més adequada per a basar-hi la creació del vídeo. Després

d’unes quantes propostes, vam decidir que la idea més adient seria seguir aquesta

estructura:

Introducció Petita presentació de la nova creació esmentant que era una producció

de l’empresa de software Sightside.

Primera

part

Escena 1: noi intentant estudiar mentre rep moltes notificacions que li

impedeixen concentrar-se en la tasca que està realitzant.

Escena 2: amigues intentant establir una conversa mentre una de les

quals està amb el telèfon mòbil i no presta atenció a l’altra

Escena 3: noi tocant el piano mentre rep molts missatges, cosa que el

distreu de l’activitat que està duent a terme.

Segona

part

Vista conjunta enfocant el telèfon mòbil a cadascuna de les escenes

anteriors mentre “prémen” el botó de “The blocker” simulant així que

estan bloquejant el seu dispositiu.

Tercera

part

Escena 1: el mateix noi a la mateixa escena, ara estudiant

tranquil·lament sense cap distracció. Es veu el telèfon de fons amb el

logo de “The Blocker”

Escena 2: les mateixes dos noies parlant, rient i passant una bona

estona.

Escena 3: el mateix noi tocant feliçment el piano sense cap distracció. Es

veu el telèfon de fons amb el logo de The Blocker.

Quarta part Imatge final amb el logo de The Blocker i el seu slogan a baix.

Un cop hem tingut clara la idea del vídeo, s’ha gravat les diferents escenes per separat

en els escenaris que hem considerat més adients i atractius. Per votació, vam decidir

SightSide 22

The Blocker

treure el so de cada escena i inserir-ne un de descarregat durant l’edició, per a donar

més qualitat a la creació.

La introducció no s’ha gravat, és una producció amb el programa Motion. La tercera

part (on es veuen les tres escenes en pantalla compartida) també s’ha editat amb

aquest programa, encara que han estat gravades com les altres escenes. La resta dels

vídeos s’han ajuntat, editat i s’hi han inserit els sons i la música (descarregats a bancs

de música i sons gratuïts) amb el programa Final Cut Pro.

Els programes que hem utilitzat no són senzills, però gràcies a diversos tutorials

trobats a internet ens hem ajudat per tal de realitzar l’edició del vídeo de manera

adient.

El resultat del nostre vídeo promocional el trobareu a la nostra pàgina web o bé a

aquest enllaç: https://www.youtube.com/watch?v=lnuqqhiuOUQ

6.3. Creació de la falca sonoraPer a la creació de la falca sonora primer hem redactat un paràgraf en què hem

exposat la idea principal de la nostra aplicació de la manera més didàctica i atractiva

possible per tal que capti l’atenció i agradi als nostres espectadors.

El resultat és el següent:

El telèfon mòbil et distreu de la feina? T’impedeix disfrutar dels petits i grans moments

de la teva vida o simplement relaxar-te? A Sightside tenim la solució: La nova aplicació,

The Blocker, et permet desactivar des d’aplicacions fins a adreces de mail i números de

telèfon durant el temps que tu escolleixis. Què més pots desitjar?

A continuació s’ha gravat la lectura d’aquest paràgraf posant-hi èmfasi i a continuació

s’ha editat el resultat i s’hi ha inserit els efectes sonors (descarregats a bancs de

música i sons gratuïtament) amb el programa SoundTrack.

El resultat final el trobareu a la nostra pàgina web, a l’apartat de l’APP.

SightSide 23

The Blocker

6.4 Pòster de l’aplicació

Per crear el pòster vam utilitzar el programa Adobe Photoshop.

Per a fer-ho ens vam basar en unes quantes idees claus: que fos visualment atractiu,

innovador, i amb un missatge clar i equilibrat, que recollís les característiques de l'app i

que representés a l’empresa.

Aquest és el resultat final:

SightSide 24

The Blocker

7. Comercialització de la nostra aplicació

7.1. Estudi del mercatAquest és el model de negoci que hem seguit:

SOCIS CLAU

-Televisió i ràdio

-Empreses de

publicitat

ACTIVITATS

CLAU

-Publicitat i

propaganda

-Búsqueda

d’inversors

PROPOSTA DE

VALOR

-Bloquejar apps

seleccionades

-Bloquejar e-

mails

-Bloquejar

contactes

-Ajudar a la

concentració dels

estudiants

-Evitar l’addicció

al telèfon mòbil

RELACIÓ

AMB ELS

CLIENTS

-Xarxes

socials

-Televisió

-Ràdio

SEGMENTS DE

CLIENTS

-Tot tipus de gent

que tingui

smartphone

ESTRUCTURA DE

COSTOS

-Publicitat

-Actualitzacions

de programació

RECURSOS

CLAU

-Usuaris

-Publicistes

-Programadors

CANALS

-Play Store

-Facebook

-Instagram

-Twitter

-Pinterest

-Web

FONTS

D’INGRESSOS

-Usuaris

SightSide 25

The Blocker

7.2. Definir el mercat

El mercat de les aplicacions és molt ampli, però nosaltres ens hem especialitzat

en persones joves i bàsicament les persones que utilitzin el seu dispositiu mòbil

freqüentment.

La nostra aplicació The Blocker es classificaria en el grup d'oci i gestió personal perquè

és tracta de poder tenir temps lliure sense la nosa d'aquelles aplicacions o persones

que més molesten i interfereixen en la nostra vida.

8. Conclusió

Aquesta experiència ha estat molt enriquidora per a tots els components del nostre

equip. Hem sabut treballar junts i cooperar, i també organitzar la feina entre tots

nosaltres. En cap moment hi ha hagut discussions i gairebé sempre estàvem d'acord en

el que volíem fer. Tots hem aportat idees i hem aconseguit finalitzar amb èxit aquestes

setmanes de treball invertides en l'empresa SightSide i la nostra creació, The Blocker.

9. Referències bibliogràfiques

·Techne Teacher:

http://informatica4iesbaixpenedes.blogspot.com.es/

·Descobrim els codis QR:

http://descobrimcodisqr.blogspot.com.es/

·Concurs d’apps Mobilitzem l’Informàtica:

http://www.xtec.cat/web/centres/alscentres/premis/apps2014

SightSide 26