WEBS APPS

Vista previa del material en texto

DESARROLLO DE 
APLICACIONES MOVILES)
M.A. Alex Pacheco Moya
alex.pacheco.moya@gmail.com
WEBS APPS
Webs Apps. Qué son?
• Una web app (aplicación web en español) se basa en HTML, 
JavaScript o CSS. 
• Puesto que se carga en el servidor web y se ejecuta en el 
navegador, no requiere ninguna instalación. 
• Además, también se puede crear un acceso directo para ella en el 
escritorio del ordenador o en la pantalla de inicio de los terminales 
móviles mediante un marcador.
https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/que-es-una-web-app-y-que-clases-hay/
Caracteristicas de las Web Apps
• Las aplicaciones web no se adaptan tan bien al hardware del dispositivo 
en el que se usan, pero sin embargo, funcionan en todos los sistemas 
operativos y terminales que cuentan con los navegadores web que las 
soportan (en general, todos los navegadores actuales). En el mejor de los 
casos, una única aplicación es suficiente para todas las plataformas, 
aunque no siempre es posible optimizar la aplicación para todos los 
navegadores.
Caracteristicas...
Una ventaja adicional de este tipo de aplicaciones está
relacionada con los fallos de seguridad. En el caso de las apps
nativas, estos solo se solucionan descargando una nueva
versión o llevando a cabo una actualización. Por su parte, la
actualización de seguridad de una web app se implementa
directamente en el software, de modo que todos los usuarios
puedan disfrutar de la versión más segura. Otro rasgo
ventajoso de este tipo de aplicaciones es que suelen ser más
asequibles y más rápidas.
Ventajas de las WebApps
• La principal ventaja que tienen es su capacidad de adaptación a 
cualquier dispositivo móvil.
• Es suficiente con que el dispositivo cuente con un navegador móvil 
actualizado, como Chrome o Safari. 
• Para poder visualizar la página correctamente en las diferentes 
plataformas es necesario incluir algunos fragmento de códigos 
especiales para cada una. 
• No ocupa memoria en los dispositivos ya que no es una app que te 
puedas descargar desde los Market Places. 
• No hacen falta actualizaciones ya que siempre se accederá a la 
última versión de la página como cualquier página web, al no ser 
una aplicación nativa, el consumo de recursos del dispositivo es 
mínimo. Por lo tanto, no afecta al rendimiento del mismo.
https://www.qode.pro/blog/que-es-una-web-app/
Ventajas de las WebApps
• Gracias a que se crea con lenguajes universalmente 
conocidos para los programadores como HTML o CSS, las 
WebApps se pueden abrir desde cualquier dispositivo y 
sistema operativo.
• Se ejecutan a través de una URL y no hay que descargarlas 
de un Market, por lo que los usuarios no tienen que hacer 
los pesados trámites de descarga.
• Crear una Web App es más barato que hacer una App 
Nativa
https://scoreapps.com/blog/es/web-app/
Desventajas de las WebApps
• Uno de sus contras es que al no ser una app como tal, pierde la 
posibilidad de aparecer en los markets y utilizarlos como forma de 
promoción y distribución; para utilizarlas se requiere de conexión a 
internet; al no ser nativa no puede aprovechar recursos del propio 
dispositivo como la geolocalización, notificaciones push y el grado 
de usabilidad es inferior.
¿Usar o no web App?
• Depende de la dimensión de tu proyecto, de los objetivos y de los 
recursos económicos disponibles. 
• Desde Qode recomendamos las web app para proyectos con bajo 
presupuesto o para empresas que simplemente quieran acercar al 
usuario a su página web pero no para proyectos que requieran 
funcionalidades que aprovechen las capacidades de los dispositivos 
móviles.
https://www.qode.pro/blog/que-es-una-web-app/
Diferencias entre Web App vs App Nativa
• Las Apps Nativas se ubican en las plataformas o markets desde las que 
los usuarios se las descargan. Android e iOs son las más conocidas, 
mientras que las Web App son independientes.
• Los datos de almacenamiento de las App Nativas se alojan en el 
dispositivo del usuario y consumen espacio del teléfono. Sin embargo, las 
Web App se encuentran en el servidor.
• Las Aplicaciones nativas pueden tener todas las funcionalidades en 
funcionamiento. Utilizan las de los dispositivos. Por su parte, las App Web 
no puedes aprovecharlas.
• Una App Nativa te la tienes que descargar del App Store o de Google Play. 
Con todo lo que ello supone. Sin embargo, las aplicaciones Web se 
activan con la visita a la página Web.
• Las App nativas no necesitan obligatoriamente de conexión a Internet. 
Pero las Web Apps sí.
Diferencias entre web apps y 
páginas web
Para averiguar cuáles son las diferencias concretas entre las
aplicaciones web y las páginas web tradicionales, hay que echar un
vistazo al funcionamiento de una página web.
En general, las aplicaciones web ponen a disposición de sus
usuarios determinados servicios. En el caso de Google se puede
hablar, por ejemplo, del uso de un buscador, de un correo web
(webmail) o del servicio de mapas. Algunas ofertas de Amazon
también pueden ser identificadas como web apps debido a las
funciones de la tienda online o del servicio de vídeos a la carta.
Diferencias entre web apps y 
paginas web
Además, mientras que las páginas web suelen tener, en general, 
carácter informativo y son estáticas, las aplicaciones web 
contienen elementos interactivos para realizar transacciones, 
solicitar un servicio o utilizar un software con un 
determinadofin(aplicación de Office, edición de imágenes, etc.).
https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/que-es-una-web-app-y-que-clases-hay/
Diferencias entre Web App vs Página 
Web
• Mientras que los sitios Web son estáticos, las App Web son dinámicas, 
existen para resolver una necesidad particular y necesitan de la 
interacción del usuario para cumplir su objetivo.
• Las App Web necesitan de un desarrollo más profundo, y son más 
costosas que las páginas Web.
• Las Apps nativas se diseñan teniendo en cuanta las características de 
las plataformas donde van a estar alojadas (Android o iOS). Esto limita 
el uso de las Apps, ya que no todos los sistemas operativos son 
adecuados para una aplicación nativa. 
• Si está diseñada para Android, la aplicación sólo funcionará en Android. 
Sin embargo, una Web App funciona en cualquier sistema operativo y 
navegadores web que tengan los navegadores web donde se alojan.
https://scoreapps.com/blog/es/web-app/
Progressive web app
PWA
PWA
¿Qué son las Progressive Web 
Apps o PWAs?
• Las progressive web apps 
(PWAs) son una opción para el 
desarrollo de aplicaciones a 
medio camino entre web apps y 
aplicaciones nativas. En la 
práctica se trata de páginas 
web, pero aprovechan varias 
tecnologías que les permiten 
tener prestaciones más 
cercanas a las aplicaciones 
desarrolladas para un 
determinado sistema operativo.
https://www.imaginae.net/pwa-que-es-una-progressive-web-app-y-cuales-son-sus-ventajas/
Características de una PWA
• No están condicionadas por 
la conectividad. 
• Una PWA es capaz de 
funcionar incluso cuando falla 
la conexión. Esto es así 
porque se almacena en 
caché la información mínima 
de HTML, CSS y JavaScript 
necesaria para que la 
aplicación puede ejecutarse.
https://linube.com/blog/que-es-pwa-futuro-app-mobile/
Características de una PWA
• Cargan al instante. Este es, 
además del diseño, uno de 
los motivos por los que el 
usuario cree que está 
interactuando con una app 
nativa. La velocidad de carga 
y de navegación suelen ser 
dos de las principales causas 
que influyen en el abandono 
de un sitio web.
https://linube.com/blog/que-es-pwa-futuro-app-mobile/
Características de una PWA
• Seguras y actualizadas. Para 
acceder a una PWA no es 
necesario descargarla desde 
una tienda de la Play Store o 
Apple Store. Y tampoco es 
necesario descargar las 
actualizaciones de seguridad 
correspondientes. Las PWA se 
actualizan automáticamente 
para proporcionar siempre la 
mejor seguridad al usuario.
https://linube.com/blog/que-es-pwa-futuro-app-mobile/Características de una PWA
• Permiten interactuar con el 
dispositivo. Antes, solo las 
aplicaciones nativas podían 
enviar notificaciones push al 
usuario, ahora las PWA 
interactúan con él 
directamente. Ya no es 
necesario abrir la aplicación 
para recibir mensajes, el 
navegar se encarga de 
hacérselas llegar al usuario.
https://linube.com/blog/que-es-pwa-futuro-app-mobile/
Características clave de las 
aplicaciones web progresivas
• Velocidad. Su funcionamiento 
basado en los service workers 
brinda rapidez incluso cuando el 
usuario está offline o conectado 
a una red inestable.
• Confiabilidad. Una vez abierta, 
la app funciona a pesar de la 
inestabilidad de la red.
• Eficiencia. Se desarrollan para 
permitir una experiencia similar 
o igual a una app nativa.
https://www.imaginae.net/pwa-que-es-una-progressive-web-app-y-cuales-son-sus-ventajas/
Ventajas de las PWA
• Una PWA facilita que los motores de búsqueda descubran tu 
web.
• Están especialmente optimizadas para dispositivos móviles, 
tanto en aspecto como en velocidad.
• Se pueden instalar en los dispositivos móviles, añadiendo un 
icono a la pantalla para un fácil acceso.
• Se puede navegar por los contenidos incluso estando 
desconectado, solo con haberlos visitado una vez.
• Son independientes del dispositivo y sistema operativo.
https://ayudawp.com/pwa/
¿Es una PWA una aplicación 
nativa para móviles?
• No, son cosas distintas, una 
Progressive Web App es mucho 
más sencilla de crear, instalar y 
usar que una aplicación nativa, 
pero también menos 
personalizable.
• Lo mejor de la PWAs es que las 
creas muy fácilmente, y se 
instalan en un clic en los 
dispositivos móviles.
Diferencias entre Web App vs PWA
• Las Web Apps son aplicaciones web, mientras que las Progressive Web 
Apps son, en esencia, páginas web que se comportan como aplicaciones 
nativas. Aprovechan las funcionalidades de los dispositivos móviles en las 
que se visualizan.
• Las Web App no pueden utilizar las funcionalidades que, como afirma 
Google, sí pueden aprovechar las PWA de los teléfonos móviles en las 
que se ejecutan.
• Una Web App no se pueden descargar en el dispositivo. Accedes a través 
de la URL en el navegador. Las PWA, sin embargo, aunque también 
accedes a través de una URL, si pueden descargarla y tener siempre el 
acceso en tu dispositivo móvil.
• Para usar una Web App necesita conexión a Internet. En las PWA, que 
pueden utilizarla sin conexión.
Características de las Apps del futuro
https://scoreapps.com/blog/es/web-app/
EJEMPLOS DE WEBS APPS
Google Web App
Todos los servicios que ofrece Google puedes encontrarlos en Web 
App. Desde Google Maps, hasta su buscador o el gestor de correo 
electrónico Gmail o Calendar. De hecho, la experiencia que ofrecen 
al usuario es muy similar a la de sus Apps nativas.
En este caso, su Web App es tan potente, que puedes consultar en 
maps tu localización y rutas en coche, a pie o en transporte público 
como podrías hacerlo a través de su app nativa. También puedes 
acceder a la información de locales, reseñas… Y en el caso de 
Youtube, la experiencia es prácticamente la misma que a través de la 
app nativa.
Amazon
• Puedes ver su web app en la 
tienda online, en Amazon 
Video y Amazon Music. Como 
pasa con Google, la 
experiencia es muy similar a la 
que podrías obtener a través 
de su App nativa.
FilmAffinity
• Esta web de referencia sobre 
cine y televisión no dispone de 
App nativa. En su lugar cuenta 
con una web app que ofrece a 
los usuarios todas las 
características propias de su 
página web: votar en las 
películas, consultar críticas, 
comentar…
Web App Fifa
Se trata de la Web App estrella del mercado ahora mismo. Y es que 
los primeros resultados de búsqueda de «Web Apps» están copados 
de resultados que hacen referencia a la Web App Fifa. ¿A qué se 
debe esto? Obviamente al volumen de jugadores online que hay 
actualmente en el mercado hispano y al éxito que tiene en la 
actualidad este conocido videojuego de fútbol.
Sus propios creadores la definen como una «aplicación web de 
fútbol». Y lo cierto es que su éxito está garantizado en los próximos 
años. La Web App Fifa 2020 ya lo reventó en el mercado del año 
anterior. 
La Web App Fifa 2021 es la más buscada en la actualidad. Y se 
espera que la Web App Fifa 2022, así como la Web App Fifa 2023 y la 
Web App Fifa 2024 sean búsquedas top en los años venideros si no 
cambia el modelo de negocio.
https://scoreapps.com/blog/es/web-app/
Web App WhatsApp
• La Web App de Whatsapp te permite abrir tus propias 
conversaciones de esta herramienta de mensajería 
instantánea en el ordenador. Es muy cómodo porque 
mientras estás trabajando puedes acceder a estas 
conversaciones y checkearlas de una forma muy rápida.
• Pero, ¿eso es todo? ¿No, tiene ninguna otra ventaja? La 
respuesta es que sí, esta herramienta de Whatsapp te 
permite arrastrar documentos desde tu propio ordenador y 
compartirlos con cualquier contacto de tu libreta. De esta 
forma, puedes hacer llegar imágenes que tienes en tu PC 
a amigos que tienes en whatsapp, sin necesidad de 
pasarlas previamente por tu teléfono móvil. Puedes enviar 
y transferir por tanto archivos de una forma totalmente 
óptima
REFERENCIAS BIBLIOGRÁFICAS
Referencias electrónicas
• Web App: Qué Es, Ventajas, Características y Ejemplos
https://scoreapps.com/blog/es/web-app/
• Conceptos básicos: definición de web app y ejemplos
https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/que-es-una-web-app-y-
que-clases-hay/
https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/que-es-una-web-app-y-que-clases-hay/
https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/que-es-una-web-app-y-que-clases-hay/
	Diapositiva 1
	Diapositiva 2: DESARROLLO DE APLICACIONES MOVILES)
	Diapositiva 3
	Diapositiva 4: Webs Apps. Qué son?
	Diapositiva 5: Caracteristicas de las Web Apps
	Diapositiva 6: Caracteristicas...
	Diapositiva 7: Ventajas de las WebApps
	Diapositiva 8: Ventajas de las WebApps
	Diapositiva 9: Desventajas de las WebApps
	Diapositiva 10: ¿Usar o no web App?
	Diapositiva 11: Diferencias entre Web App vs App Nativa
	Diapositiva 12: Diferencias entre web apps y páginas web
	Diapositiva 13: Diferencias entre web apps y paginas web
	Diapositiva 14: Diferencias entre Web App vs Página Web
	Diapositiva 15: Progressive web app
	Diapositiva 16: PWA
	Diapositiva 17: ¿Qué son las Progressive Web Apps o PWAs?
	Diapositiva 18: Características de una PWA
	Diapositiva 19: Características de una PWA
	Diapositiva 20: Características de una PWA
	Diapositiva 21: Características de una PWA
	Diapositiva 22: Características clave de las aplicaciones web progresivas
	Diapositiva 23: Ventajas de las PWA
	Diapositiva 24: ¿Es una PWA una aplicación nativa para móviles?
	Diapositiva 25: Diferencias entre Web App vs PWA
	Diapositiva 26: Características de las Apps del futuro
	Diapositiva 27
	Diapositiva 28: Google Web App
	Diapositiva 29: Amazon
	Diapositiva 30: FilmAffinity
	Diapositiva 31: Web App Fifa
	Diapositiva 32: Web App WhatsApp
	Diapositiva 33: REFERENCIAS BIBLIOGRÁFICAS
	Diapositiva 34