Universidad Tecnológica

Santa Catarina.
Campus Montemorelos

Ingeniería en Desarrollo y
Gestión de Software

Aplicaciones Web Progresivas.

Actividad 2.
Herramientas utilizadas para crear aplicaciones web progresivas.

Docente: Ing. Eliseo Ezquierdo.

Alumno: Jesús Alejandro Rodríguez Solís.
Matrícula: 20268.
Grupo: IDGS-10 AV. MONT

Montemorelos, N.L a 14 de septiembre del 2022

Herramientas de desarrollo de Aplicaciones Web Progresivas:

Knockout:

Knockout es una herramienta gratuita de código abierto que puede ayudar con los enlaces
Modelo-Vista-Vista Modelo o MVVM. Esto le permite simplificar el proceso de
codificación de IU de JavaScript permitiéndole definir vistas y enlaces declarativos
controlados por modelo de vista propiedades.

Requisitos de instalación:

Funciona en cualquier navegador principal (IE 6+, Firefox 2+, Chrome, Safari, Edge, otros)
El conjunto integral de especificaciones (desarrollado al estilo BDD) significa que su
correcto funcionamiento puede verificarse fácilmente en nuevos navegadores y
plataformas.

Navegadores compatibles:

- Mozilla Firefox (version 3.5 - actual).

- Google Chrome (actual).
- Microsoft Edge (actual).
- Microsoft Internet Explorer (version 6 - 11).
- Apple Safari for Mac OS (actual).
- Apple Safari for iOS (versions 6 - 8)
- Opera (versión actual).
PWABuilder:

El PWA Builder de Microsoft es una aplicación web que facilita la creación de versiones
nativas para varios sistemas operativos, incluido Android, mientras que BubbleWrap es lo
mismo, pero como herramienta de línea de comandos centrada en Android.

PWA Builder usa ahora la tecnología de BubbleWrap, lo cual permite a las aplicaciones
web generadas con esta herramienta integrarse mejor en Android. Para empezar, con
soporte de serie para crear aplicaciones que aprovechen los nuevos Web Shortcuts como
App Shortcuts de Android, sin necesidad de hacer ningún cambio.

La forma más rápida de crear una PWA es utilizar PWABuilder y construir rápidamente un
service worker para la funcionalidad offline, que funciona sacando y sirviendo el
“offline.html” del servidor web cada vez que los usuarios pierden la conectividad a
Internet. También se puede enviar la PWA a la tienda de aplicaciones para Android e iOS.

Requisitos de instalación:

- Conexión HTTPS segura válida.

- JSON Manifest instalado válido.
- Service Worker instalado.
- La librería OneUI CSS para agregarle diseño responsive, es decir, que se vea bien
en cualquier dispositivo.

Navegadores compatibles:

- Chrome (Android, Windows, Os X y Linux).

- Edge (Android).
- Firefox (Android, Windows, Os X y Linux).
- Opera (Android, Windows, Os X y Linux).
AngularJS:

Es un framework MVC (Modelo Vista Controlador), desarrollado por Google para el

Desarrollo Web Front End que permite crear aplicaciones SPA (Single-Page Applications).
Al usar un patrón MVVM (model view view-model) se separa la lógica de la capa de
diseño pero se mantienen ambas partes conectadas (data binding). De manera que la capa
visual no sabe lo que está pasando en la capa lógica pero manteniendo control sobre el
DOM (el cuerpo de la web) y actualizar su contenido como se quiera.

Si con jQuery ya se podía manipular el contenido y estructura de un sitio web, con Angular
también es posible, además entablar comunicación con el servidor, recuperar datos,
gestionar estas llamadas y mostrar el resultado en la vista. Todo esto y más en un entorno
web.

Requisitos de instalación:

- Un IDE para poder editar el código. (Visual Studio Code ocualquier otro).
- Git, para poder almacenar el código.
- Node JS y npm, para poder instalar Angular.
- CLI Angular 8, que será lo último que se instalará.

Navegadores comaptibles:

- Chrome (el más reciente).

- Firefox: última versión de soporte extendido (ESR).
- Edge (2 versiones principales más recientes).
- Safari (2 versiones principales más recientes).
- iOS (2 versiones principales más recientes).
- Android (2 versiones principales más recientes).
Webpack:

Es una herramienta extremadamente útil para agrupar los recursos de su aplicación

JavaScript, incluidos los activos que no son de código, como fuentes e imágenes. Estos
serán tratados como objetos de JavaScript, lo que a su vez permite que se carguen más
rápido. La plataforma también hace que sea mucho más fácil administrar las dependencias.

Esta herramienta de compilación (una build tool) coloca en un grafo de dependencias a

todos los elementos que forman parte de un proyecto de desarrollo: código JavaScript,
HTML, CSS, plantillas, imágenes, fuentes... Esta idea central es la que lo convierte en una
herramienta tan poderosa.

Requisitos de instalación:

- Tener instalado NodeJS, porque Webpack necesita el runtime del mismo, porque es
un paquete de Node.
- Tener instalado NPM, que se instala automáticamente al instalar NodeJS.
- Tener los paquetes webpack y webpack.cli.
- Un editor de código, para poder procesar los ficheros de configuración y poder
crearlos. Se puede utilizar cualquier editor, por ejemplo Visual Studio Code.

Navegadores compatibles:

- Google Chrome versión 28.0+.

- Mozilla Firefox versión 26.0+.
- Opera versón 17.0+.
- Microsoft Edge versión 25.10+.
- Apple Safari versión 5+.
- Navegador Android versión 4.3+.