MATERIA: Programación con Framework

FECHA DE ENTREGA: 18/05/2020

REPORTE: Evidencia 403
EQUIPO: 8
GRUPO: A
Alumno1: (Merary Zarai López López)

INVESTIGAR LOS CONCEPTOS DE SPA, UX Y PWA.

SPA
Es una aplicación web de una sola página que carga automáticamente todo el
contenido almacenado en el servidor cuando se inicia la página principal (varios
módulos, widgets, archivos CSS, etc.). Básicamente, cuando un usuario hace clic
en un botón en dicha aplicación o inicia algún módulo o llena un formulario de
entrada, solo se actualiza el contenido necesario, y todo el resto permanece como
está.
Este principio aumenta la velocidad general de carga de contenido, lo que afecta el
nivel de UX en una aplicación de manera más positiva. En conjunto, las primeras
menciones del modelo SPA aparecieron en 2014 y estaban parcialmente
relacionadas con la extensión generalizada de HTML5 (la combinación de HTML,
CSS3 y JavaScript).
Existe una idea errónea común de que las soluciones SPA que incluyen muchas
características (lo que significa más archivos basados en scripts) pueden reducir el
rendimiento por su naturaleza de una sola página y la necesidad de cargar todos
los archivos individuales. Sin embargo, en la práctica, todo es al revés. La API de
AMD se utiliza específicamente con dichas aplicaciones, que gestionan la carga sin
problemas de los scripts y la priorización de tareas. Es decir, una aplicación de una
sola página se carga y funciona solo cuando es necesario, durante la interacción
directa del usuario.
Las aplicaciones de múltiples páginas (MPA) son un completo polo opuesto y
predecesor de las soluciones SPA. En las AMP, para que se carguen todas y cada
una de las páginas, se envía una solicitud del servidor y se actualiza todo el
contenido de la página. Estos son, por lo general, un rendimiento bastante más lento
en comparación con los SPA, lo que dificulta el flujo de trabajo de desarrollo también
con una arquitectura de software más compleja y, en particular, una gran cantidad
de dependencias.
Algunas de las principales soluciones de SPA confeccionadas incluyen nombres tan
importantes como Gmail, Wix, Google Maps, Meduza y Twitter.
 MATERIA: Programación con Framework
FECHA DE ENTREGA: 18/05/2020
REPORTE: Evidencia 403
EQUIPO: 8
GRUPO: A
Alumno1: (Merary Zarai López López)

UX
Tiene infinidad de definiciones y estas cada vez son más extensas porque, a pesar
de que esta disciplina comenzó a utilizarse en el diseño de páginas webs y apps,
su uso cada vez se extiende más a todo tipo de sistemas.
Sin embargo, el diseñador peruano Strike Heredia –que lleva años dedicándose al
diseño, creatividad y estrategia de todo tipo de marcas de consumo y haciendo de
la UX la base sobre la que construir la creación de productos digitales–, nos ayuda
conocer de primera mano una definición concreta de UX que promete disipar
algunas de las preguntas más comunes acerca de este concepto.

PWA
Es un conjunto completo de propiedades que pueden presumir estas soluciones. En
pocas palabras, las soluciones PWA deben considerarse especialmente confiables
(una aplicación debe cargarse inmediatamente en el lado del usuario, con cualquier
velocidad de conexión a Internet o incluso en un modo fuera de línea), Rápido (las
transferencias de datos entre el lado del servidor y el del usuario deberían ser rápido,
tomar 3 segundos como máximo) e Involucrar (se debe proporcionar un nivel
destacado de experiencia del usuario; los usuarios deben querer usar la aplicación
una y otra vez).
Para cumplir con todos estos requisitos, los desarrolladores generalmente emplean
una serie de herramientas especializadas, como Service Worker, Web App manifest,
HTTPS, App Shell, Notificaciones Push y otras para definir la lista de los requisitos
de producto final más adecuados. El concepto de PWA en su conjunto se introdujo
por primera vez en 2015.
Obtenga más información sobre los entresijos de las soluciones PWA en este
artículo.
Los casos más conocidos de PWA incluyen aplicaciones como Starbucks,
Housing.com, Pinterest, Flipboard y Soundslice. [1]
 MATERIA: Programación con Framework
FECHA DE ENTREGA: 18/05/2020
REPORTE: Evidencia 403
EQUIPO: 8
GRUPO: A
Alumno1: (Merary Zarai López López)

SPA
Un SPA es un sitio web que genera y actualiza dinámicamente contenido, sin la
necesidad de actualizar la página. En otras palabras, el usuario nunca abandona la
página, ya que el contenido se carga dentro y fuera, en lugar de hacer que el usuario
navegue a otras páginas.
Una mayor navegación e interacción con la aplicación web requiere que se cargue
nuevo contenido, por lo que el navegador se envía para buscar solo contenido
parcial sin la necesidad de volver a representar toda la página. Esta arquitectura
ahorra un viaje de ida y vuelta entre el servidor y el navegador, lo que permite a los
usuarios tener una interacción más rápida y sin molestias.
El error común es que un PWA es solo un SPA con algunas funcionalidades
adicionales. Esto puede deberse al hecho de que los PWA utilizan principalmente
los mismos marcos que los de los proyectos de SPA. Después del SPA inicial, las
características adicionales, como el almacenamiento en caché, los iconos de
manifiesto y las pantallas de carga, a menudo se incluyen en el diseño / arquitectura
inicial, lo que lo empuja al territorio de PWA. [2]

UX
Lo primero que debemos tener en cuenta a la hora de definir UX es qué significan
exactamente estas siglas. UX es el acrónimo de la expresión inglesa User
Experience, que significa "experiencia de usuario". La experiencia del usuario a la
hora de interactuar con un sistema digital puede ser negativa o positiva y su
percepción del producto depende de varios factores.
Strike Heredia hace una definición de UX separándola en 3 conceptos básicos:
- UX es la manera en que el usuario percibe, siente o interactúa con un sistema o
un servicio. Se trata de la sensación del usuario cuando está en contacto e
interactúa con una web, una app o un sistema. Todo lo que percibe al de comprar
un producto online, navegar por una página web o moverse por las opciones de una
interfaz digital, por ejemplo, son ejemplos de experiencia de usuario. Pero UX no es
solo usabilidad, una pantalla puede ser usable, pero no generar buena experiencia
de usuario.
 MATERIA: Programación con Framework
FECHA DE ENTREGA: 18/05/2020
REPORTE: Evidencia 403
EQUIPO: 8
GRUPO: A
Alumno1: (Merary Zarai López López)

- UX es un grupo de disciplinas. No se trata de una materia única centrada

exclusivamente en el aspecto visual de una web o una app, sino que engloba
muchos otros oficios que son necesarios para lograr un UX exitoso: interacción,
arquitectura de la información, animación en diseño, estilo de comunicación... Este
conjunto de puntos de vista tiene como resultado un producto mucho más sólido y
con el que el usuario interactuará de manera más fluida. Un producto de UX debe
tener look (ser atractivo visualmente), feel (el usuario debe sentirse cómodo a la
hora de interactuar) y usabilidad (debe existir un propósito).
- UX es un proceso. No se trata de algo estático; un buen desarrollo de UX involucra
una serie de fases para garantizar la calidad de un producto. Es necesario conocer
las necesidades del cliente o de la marca, debe hacerse un user research para
investigar las audiencias a las que va dirigido el producto – y conocer sus
necesidades, comportamientos, conductas...–, debe hacerse una planificación y
diseño de wireframes y debe planificarse el aspecto visual. [3]

PWA
Las aplicaciones web han existido durante mucho tiempo, pero los PWA se refieren
específicamente a las versiones más avanzadas, incluidos los trabajadores de
servicio y los manifiestos antes mencionados que usamos hoy en día. El término
originalmente vino de Google, pero desde entonces también ha sido respaldado por
Apple, por lo que es una opción popular en la gran mayoría de las plataformas
móviles. La clave está en comprender correctamente el enfoque progresivo como
una forma de habilitar funcionalidades adicionales cuando sea posible, pero la
aplicación aún debería permitir a los usuarios alcanzar sus objetivos sin ellas.
P - Progresivo: la aplicación funciona para todos los usuarios, sin importar el
dispositivo o el navegador, y utiliza un principio de mejora progresiva (es decir,
primero carga el contenido central, luego secundario, tercero, etc., para que los
usuarios obtengan los elementos más valiosos rápidamente).
W - Web - Las aplicaciones se escriben usando los lenguajes típicos de las páginas
web, como JavaScript, HTML y CSS.
A - Aplicación: al proporcionar una interfaz y funcionalidad consistentes, los PWA
funcionan de manera similar a las aplicaciones nativas.
 MATERIA: Programación con Framework
FECHA DE ENTREGA: 18/05/2020
REPORTE: Evidencia 403
EQUIPO: 8
GRUPO: A
Alumno1: (Merary Zarai López López)

Beneficios de una PWA

Debido a que todavía son un tipo de sitio web o página web, los usuarios no
necesitan instalar el PWA a través de métodos de distribución tradicionales, como
las tiendas de aplicaciones.
Del mismo modo, los desarrolladores no necesitan invertir en kits de desarrollo de
software (SDK).
Los PWA son rápidos y optimizados para proporcionar una experiencia fluida a los
usuarios. Dichas aplicaciones se pueden iniciar sin llegar a la red, desde la segunda
ejecución.
Debido a que los PWA pueden acceder a las funcionalidades de un dispositivo y
enviar notificaciones push, así como sentarse en la pantalla de inicio a través de un
atajo / enlace tradicional, la experiencia general está altamente integrada con el
dispositivo, ofreciendo una experiencia de estilo nativo.
Del mismo modo, la capacidad de enviar notificaciones push y otras características
nativas hacen que una PWA sea más atractiva que un sitio web tradicional.
Los PWA también pueden funcionar sin conexión, mostrando los últimos pedidos,
actualizaciones u otra información crítica para mayor versatilidad. [2]
 MATERIA: Programación con Framework
FECHA DE ENTREGA: 18/05/2020
REPORTE: Evidencia 403
EQUIPO: 8
GRUPO: A
Alumno1: (Merary Zarai López López)

BIBLIOGRAFIA

[1] Y. Mudrogo, 11 mayo 2020. [En línea]. Available: https://multi-programming.com/blog/whats-

the-difference-between-pwa-spa.

[2] A. Mortka, 13 febrero 2020. [En línea]. Available: https://medium.com/pgs-software/pwa-vs-

spa-vs-native-mobile-application-whats-right-47f1b071ad09.

[3] domestika, 11 julio 2019. [En línea]. Available: https://www.domestika.org/es/blog/2125-que-

es-ux.