C A P T U L O 1

Las aplicaciones
9
Aunque no parezca, las aplicaciones llevan tiempo
entre nosotros. Antes de empezar a disenarlas,
queremos que las conozcas: Cules son sus tipos y
caractersticas7 Qu diferencias hay entre ellas y
con una web mvil7
Qu son las aplicaciones7
Las apIicaciones -Iambien IIamadas apps- esIn presenIes en Ios
IeIeIonos desde hace Iiempo; de hecho, ya esIaban incIuidas en Ios
sisIemas operaIivos de Nokia o 8Iackberry aos aIrs. Los mviIes
de esa epoca, conIaban con panIaIIas reducidas y muchas veces no
IcIiIes, y son Ios gue ahora IIamamos jccturc phoncs, en
conIraposicin a Ios smcrtphoncs, ms acIuaIes.
n esencia, una apIicacin no de|a de ser un soIIware. Para
enIender un poco me|or eI concepIo, podemos decir gue Ias
apIicaciones son para Ios mviIes Io gue Ios programas son para Ios
ordenadores de escriIorio.
FCURA 1.1. En la AppStore hay casi un milln de apps disponibles.
10
AcIuaImenIe enconIramos apIicaciones de Iodo Iipo, Iorma y
coIor, pero en Ios primeros IeIeIonos, esIaban enIocadas en me|orar
Ia producIividad personaI: se IraIaba de aIarmas, caIendarios,
caIcuIadoras y cIienIes de correo.
Hubo un cambio grande con eI ingreso de iPhone aI mercado, ya
gue con eI se generaron nuevos modeIos de negocio gue hicieron de
Ias apIicaciones aIgo renIabIe, IanIo para desarroIIadores como para
Ios mercados de apIicaciones, como App SIore, CoogIe PIay y
Windows Phone SIore.
AI mismo Iiempo, Iambien me|oraron Ias herramienIas de Ias
gue disponIan diseadores y programadores para desarroIIar apps,
IaciIiIando Ia Iarea de producir una apIicacin y IanzarIa aI
mercado, incIuso por cuenIa propia.
Diferencias entre aplicaciones y web
mviles
Las apIicaciones comparIen Ia panIaIIa deI IeIeIono con Ias webs
mviIes, pero mienIras Ias primeras Iienen gue ser descargadas e
insIaIadas anIes de usar, a una web puede accederse simpIemenIe
usando !nIerneI y un navegador; sin embargo, no Iodas pueden
verse correcIamenIe desde una panIaIIa generaImenIe ms
peguea gue Ia de un ordenador de escriIorio.
Las gue se adapIan especiaImenIe a un disposiIivo mviI se
IIaman web responsivas" y son e|empIo deI diseo IIguido, ya gue
se puede pensar en eIIas como un conIenido gue Ioma Ia Iorma deI
conIenedor, mosIrando Ia inIormacin segn sea necesario. AsI,
coIumnas enIeras, bIogues de IexIo y grIicos de una web, pueden
acomodarse en eI espacio de una manera diIerenIe -o incIuso
desaparecer- de acuerdo a si se enIra desde un IeIeIono, una
IabIeIa o un ordenador.
11
FCURA 1.2. El diseno "responsivo" se adapta dependiendo del dispositivo
dnde es visualizado.
uienes cuenIan ya con una web responsiva" pueden
pIanIearse Ia necesidad de disear una apIicacin, pero Ia
respuesIa a si esIo es o no necesario, depende de enIender IanIo Ios
ob|eIivos de negocio, como Ias caracIerIsIicas gue diIerencian Ias
apIicaciones de Ias webs.
Por e|empIo, Ias apIicaciones pueden verse aun cuando se esI
sin conexin a !nIerneI, adems, pueden acceder a cierIas
caracIerIsIicas de hardware deI IeIeIono -como Ios sensores-,
capacidades gue acIuaImenIe esIn Iuera deI aIcance de Ias webs.
Por Io anIerior, puede decirse gue una apIicacin oIrece una me|or
experiencia de uso, eviIando Iiempos de espera excesivos y
Iogrando una navegacin ms IIuida enIre Ios conIenidos.
No siempre hay gue eIegir enIre una u oIra. Webs y apIicaciones
no son compeIidoras, ms bien, pueden compIemenIarse enIre
12
eIIas; por e|empIo, una web puede ser IiI como canaI de
inIormacin para moIivar Ia descarga de Ia apIicacin.
Primero el mvil
s posibIe gue cuando IIegue Ia hora de disear una apIicacin ya
exisIa una web como anIecedenIe. n esos casos, Ia app Iiene gue
Iomar Ias Iunciones y conIenidos gue se han pensando para Ia web
y adapIarIos para gue Iengan senIido, de acuerdo aI Iamao de
panIaIIa y a Ia Iorma de inIeraccin de un mviI.
n oIros casos, eI diseo comienza desde cero, cuando IodavIa no
hay ni web ni apIicacin, y hay gue decidirse por cuaI de eIIas
empezar. AguI es donde adguiere ms Irascendencia eI concepIo
de mohilc jirst, gue impIica pIanIear eI proceso de diseo Ieniendo
en cuenIa eI mviI en primer Iugar.
La venIa|a de esIa Iorma de Iraba|ar es gue eI pensar en eI mviI
como punIo de parIida, obIiga a concenIrarse en Io esenciaI de un
producIo y a hacer Ioco soIo en Io gue Iiene senIido para esIe
disposiIivo.
Una vez gue Ia apIicacin esI diseada, puede pregunIarse cuI
es Ia me|or Iorma de IIevar Io hecho para eI IeIeIono a una panIaIIa
de ordenador o a oIros disposiIivos, exIendiendo y escaIando eI
conIenido y repensando Ia diagramacin. Todos Ios disposiIivos
Iienen usos diIerenIes, y en eI momenIo de adapIar eI diseo, hay
gue Iener en cuenIa Ias caracIerIsIicas parIicuIares de cada uno de
eIIos.
Mohilc jirst es una propuesIa de Iraba|o gue ha surgido
recienIemenIe; una Iendencia emergenIe gue an esI por
consoIidarse. AcIuaImenIe, es soIo una manera de aIronIar eI
proceso de diseo y como IaI, puede evaIuarse Ia comodidad gue se
Iiene Iraba|ando de esIa Iorma anIes de empezar .
El proceso de diseno y desarrollo de una
app
1
13
I proceso de diseo y desarroIIo de una apIicacin, abarca desde Ia
concepcin de Ia idea hasIa eI anIisis posIerior a su pubIicacin en
Ias Iiendas. DuranIe Ias diIerenIes eIapas, diseadores y
desarroIIadores Iraba|an -Ia mayor parIe deI Iiempo- de manera
simuIInea y coordinada.
Hemos resumido Ias Iases de esIe proceso soIo desde Ia
perspecIiva deI diseo y desarroIIo, es decir, sin Iener en cuenIa Ios
roIes de coordinacin, Ia parIicipacin deI cIienIe, ni Ios accionisIas
de Ia empresa.
Cada una de Ias eIapas -excepIo Ia de desarroIIo- se expIica
ms exIensamenIe en Ios capIIuIos siguienIes, deIaIIando procesos y
meIodoIogIas para ir avanzando enIre eIIas.
FCURA 1.3. El proceso de diseno abarca diferentes etapas donde disenador y
desarrollador traba|an simultneamente, con ms o menos carga de traba|o
dependiendo del momento.
1. Conceptualizacin
I resuIIado de esIa eIapa es una idea de apIicacin, gue Iiene en
cuenIa Ias necesidades y probIemas de Ios usuarios. La idea
responde a una invesIigacin preIiminar y a Ia posIerior
14
comprobacin de Ia viabiIidad deI concepIo.
!deacin
!nvesIigacin
ormaIizacin de Ia idea
2. Definicin
n esIe paso deI proceso se describe con deIaIIe a Ios usuarios para
guienes se disear Ia apIicacin, usando meIodoIogIas como
Personas" y Via|es deI usuario". Tambien aguI se sienIan Ias bases
de Ia IuncionaIidad, Io cuaI deIerminar eI aIcance deI proyecIo y Ia
compIe|idad de diseo y programacin de Ia app.
DeIinicin de usuarios
DeIinicin IuncionaI
3. Diseo
n Ia eIapa de diseo se IIevan a un pIano IangibIe Ios concepIos y
deIiniciones anIeriores, primero en Iorma de wircjrcmcs, gue
permiIen crear Ios primeros proIoIipos para ser probados con
usuarios, y posIeriormenIe, en un diseo visuaI acabado gue ser
provisIo aI desarroIIador, en Iorma de archivos separados y
panIaIIas modeIo, para Ia programacin deI cdigo.
Wircjrcmcs
ProIoIipos
1S
TesI con usuarios
Diseo visuaI
4. Desarrollo
I programador se encarga de dar vida a Ios diseos y crear Ia
esIrucIura sobre Ia cuaI se apoyar eI IuncionamienIo de Ia
apIicacin. Una vez gue exisIe Ia versin iniciaI, dedica gran parIe
deI Iiempo a corregir errores IuncionaIes para asegurar eI correcIo
desempeo de Ia app y Ia prepara para su aprobacin en Ias
Iiendas.
Programacin deI cdigo
Correccin de hugs
5. Publicacin
La apIicacin es IinaImenIe puesIa a disposicin de Ios usuarios en
Ias Iiendas. Luego de esIe paso IrascendenIaI se reaIiza un
seguimienIo a Iraves de anaIIIicas, esIadIsIicas y comenIarios de
usuarios, para evaIuar eI comporIamienIo y desempeo de Ia app,
corregir errores, reaIizar me|oras y acIuaIizarIa en IuIuras
versiones.
LanzamienIo
SeguimienIo
AcIuaIizacin
16
Tipos de aplicaciones segn su desarrollo
A niveI de programacin, exisIen varias Iormas de desarroIIar una
apIicacin. Cada una de eIIas Iiene diIerenIes caracIerIsIicas y
IimiIaciones, especiaImenIe desde eI punIo de visIa Iecnico.
Aungue a primera visIa esIo no parezca incumbencia deI
diseador, Ia reaIidad es gue eI Iipo de apIicacin gue se eIi|a,
condicionar eI diseo visuaI y Ia inIeraccin.
Aplicaciones nativas
Las apIicaciones naIivas son agueIIas gue han sido desarroIIadas
con eI soIIware gue oIrece cada sisIema operaIivo a Ios
programadores, IIamado genericamenIe Sojtwcrc Dcvclopmcnt Kit o
SDK. AsI, Android, iOS y Windows Phone Iienen uno diIerenIe y Ias
apIicaciones naIivas se disean y programan especIIicamenIe para
cada pIaIaIorma, en eI Iengua|e uIiIizado por eI SDK.
sIe Iipo de apps se descarga e insIaIa desde Ias Iiendas de
apIicaciones -con cierIas excepciones en eI caso de Android, gue
veremos en eI capIIuIo Lanzando Ia app"- sacando buen parIido
de Ias diIerenIes herramienIas de promocin y markeIing de cada
una de eIIas.
Las apIicaciones naIivas se acIuaIizan IrecuenIemenIe y en esos
casos, eI usuario debe voIver a descargarIas para obIener Ia IIima
versin, gue a veces corrige errores o aade me|oras.
Una caracIerIsIica generaImenIe menospreciada de Ias apps
naIivas, es gue pueden hacer uso de Ias noIiIicaciones deI sisIema
operaIivo para mosIrar avisos imporIanIes aI usuario, aun cuando
no se esIe usando Ia apIicacin, como Ios mensa|es de WhaIsapp,
por e|empIo.
17
FCURA 1.4. Las aplicaciones nativas permiten aprovechar el sistema de
noticaciones.
Adems, no reguieren !nIerneI para Iuncionar, por Io gue
oIrecen una experiencia de uso ms IIuida y esIn reaImenIe
inIegradas aI IeIeIono, Io cuaI Ies permiIe uIiIizar Iodas Ias
caracIerIsIicas de hardware deI IerminaI, como Ia cmara y Ios
sensores (CPS, aceIermeIro, girscopo, enIre oIros).
A niveI de diseo, esIa cIase de apIicaciones Iiene una inIerIaz
basada en Ias guIas de cada sisIema operaIivo, Iogrando mayor
coherencia y consisIencia con eI resIo de apIicaciones y con eI propio
SO. sIo Iavorece Ia usabiIidad y beneIicia direcIamenIe aI usuario
gue encuenIra inIerIaces IamiIiares.
18
Aplicaciones web
La base de programacin de Ias apIicaciones web -Iambien
IIamadas wchcpps- es eI HTML, con|unIamenIe con ]avascripI y
CSS, herramienIas ya conocidas para Ios programadores web.
n esIe caso no se usa un SDK, Io cuaI permiIe programar de
Iorma independienIe aI sisIema operaIivo en eI cuaI se usar Ia
apIicacin. Por eso, esIas apIicaciones pueden ser IciImenIe usadas
en diIerenIes pIaIaIormas sin mayores inconvenienIes y sin
necesidad de desarroIIar un cdigo diIerenIe para cada caso
parIicuIar.
Las apIicaciones web no necesiIan descargarse e insIaIarse, ya
gue se visuaIizan usando eI navegador deI IeIeIono como un siIio
web normaI. Por esIa misma razn, no se disIribuyen en una Iienda
de apIicaciones, sino gue se comerciaIizan y promocionan de Iorma
independienIe.
AI IraIarse de apIicaciones gue Iuncionan sobre Ia web, no es
necesario gue eI usuario reciba acIuaIizaciones, ya gue siempre va a
esIar viendo Ia IIima versin. Pero, a diIerencia de Ias apps naIivas,
necesiIan una conexin a !nIerneI para Iuncionar correcIamenIe.
19
FCURA 1.5. Facebook cuenta tanto con una webapp como con una app nativa.
AdicionaImenIe, Iienen aIgunas resIricciones e inconvenienIes
en IacIores imporIanIes como gesIin de memoria y no permiIen
aprovechar aI mximo Ia poIencia de Ios diIerenIes componenIes de
hardware deI IeIeIono.
Las apIicaciones web sueIen Iener una inIerIaz ms generica e
independienIe de Ia apariencia deI sisIema operaIivo, por Io gue Ia
experiencia de idenIiIicacin deI usuario con Ios eIemenIos de
navegacin e inIeraccin, sueIe ser menor gue en eI caso de Ias
naIivas.
20
Aplicaciones hibridas
sIe Iipo de apIicaciones es una especie de combinacin enIre Ias
dos anIeriores. La Iorma de desarroIIarIas es parecida a Ia de una
apIicacin web (usando HTML, CSS y ]avascripI), y una vez gue Ia
apIicacin esI Ierminada, se compiIa o empagueIa de Iorma IaI,
gue eI resuIIado IinaI es como si se IraIara de una apIicacin naIiva.
sIo permiIe casi con un mismo cdigo obIener diIerenIes
apIicaciones, por e|empIo, para Android y iOS, y disIribuirIas en
cada una de sus Iiendas.
A diIerencia de Ias apIicaciones web, esIas permiIen acceder,
usando IibrerIas, a Ias capacidades deI IeIeIono, IaI como Io harIa
una app naIiva.
FCURA 1.6. Netix tiene una aplicacin hbrida que se ve prcticamente igual
2
21
en iOS y en Android.
Las apIicaciones hIbridas, Iambien Iienen un diseo visuaI gue
no se idenIiIica en gran medida con eI deI sisIema operaIivo. Sin
embargo, hay Iormas de usar conIroIes y boIones naIivos de cada
pIaIaIorma para apegarse ms a Ia esIeIica propia de cada una.
xisIen aIgunas herramienIas para desarroIIar esIe Iipo de
apIicaciones. Apache Cordova es una de Ias ms popuIares, pero
hay oIras, como !cenium , gue Iienen Ia misma IinaIidad.
Cul deberias usar?
Dadas Ias caracIerIsIicas de cada una de Ias apIicaciones, decidirse
por una u oIra esIar deIerminado por unos pocos IacIores
IundamenIaIes y por Ia Iorma en gue aIecIan IinaImenIe Ia
experiencia de uso. Cuando Ia disponibiIidad de Ia app sin
!nIerneI, Ia posibiIidad de usar noIiIicaciones y eI acceso a Ios
recursos de hardware deI IeIeIono sean imporIanIes, una apIicacin
naIiva ser Ia opcin ms indicada.
Si ninguna de esIas cosas es reaImenIe imporIanIe para Ia
apIicacin, guizs sea ms IciI disear una apIicacin web, si es
gue ya se dispone deI conocimienIo para eIIo, heredado deI
desarroIIo de siIios web. n esIe caso, eI cosIo de desarroIIo es ms
ba|o y Ia Iorma de Iraba|ar un poco ms giI.
!ndependienIemenIe de esIo, Ias apIicaciones naIivas son Ias gue
oIrecen una me|or experiencia de uso y sobre Iodo, rendimienIo.
AIgunas apps como acebook o Linked!n, gue anIes eran hIbridas,
han pasado a ser naIivas por esIe moIivo. AdicionaImenIe, eIIas
responden ms a Ias guIas de diseo de cada sisIema operaIivo.
Por Io anIerior, nos enIocaremos en Ias apIicaciones naIivas. De
aguI en adeIanIe, y por eI resIo de Ios capIIuIos gue guedan por
venir, vamos a esIudiarIas, conocerIas y a ver gue Ias hace
diIerenIes.
3
4
22
Te ha gustado el
captulo de muestra?
Ahora consigue el libro completo.
Casi 300 pginas contando el proceso de diseo de
una app de principio a fn.
Consguelo en www.appdesignbook.com, o en
Amazon, iTunes y Google Play.
9
99
Por slo