{Web Progresiva}

Dr. Alfredo de Jesús Gutiérrez Gómez

{Presentación}

{Presentación}

  1. Piense en el nombre de un animal que inicie con la primera letra de su nombre.
  2. Este no deberá repetirse.
  3. Al presentarse deberá completar la siguiente frase: Mi nombre es: _______ y he venido sobre un/a: _______ a la escuela desde _____
  4. Dar respuesta a las preguntas:
    1. ¿Porqué estudio está carrera?
    2. ¿Qué me ha gustado de la carrera hasta ahora?

Unidad 1.

Temas

# Temas

Introducción al desarrollo de Aplicaciones Web Progresivas

  • Fundamentos de Aplicaciones Web Progresivas (PWA)
  • Identificar el concepto de PWA.
  • Explicar las características de las PWA.
  • Identificar ventajas de las PWA.
  • Identificar diferencias entre aplicación web, aplicación nativa y aplicación web progresiva.

Unidad 1.

Temas

# Temas

Introducción al desarrollo de Aplicaciones Web Progresivas

  • Identificar las herramientas, librerías, frameworks para el desarrollo de una PWA.
  • Reconocer conceptos básicos de programación en javascript
  • Estructuras de control.
  • Funciones
  • Eventos
  • Notificaciones.

Unidad 2.

Temas

# Temas

Desarrollo de aplicaciones web Progresivas.

  • Arquitectura PWA
  • Identificar las herramientas para la arquitectura para PWA
    • Manifiesto.
    • Services workers
    • Web components
    • App shells.
    • Cache API
  • Reconocer los enfoques de la arquitectura para PWA
    • del lado del servidor SSR
    • del lado del cliente CSR

Unidad 2.

Temas

# Temas

Desarrollo de aplicaciones web Progresivas.

  • Service Worker
    • Identificar las características y funcionalidades del service worker.
    • Identificar los requisitos de implementación del service worker
    • Describir el proceso de desarrollo del Service Worker
      Identificar estructura para la codificación del services worker.
    • Identificar estructura para la codificación de APIs Cache, Fetch y Shell.
    • Describir estrategias offline.
    • Identificar estructura de codificación de patrones para trabajo offline.

Unidad 2.

Temas

# Temas

Desarrollo de aplicaciones web Progresivas.

  • Transacciones
    • Describir el proceso para manipulación de base datos en PWA.
    • Identificar estructura para codificación de transacciones en BD: lectura, escritura, borrado.

Unidad 3.

Temas

# Temas

Distribución de la Aplicación Web Progresivas

  • Publicación de la PWA
    • Describir el proceso para publicación de la PWA.
    • Identificar las diferencias entre hosting tradicional y hosting en la nube.
  • Herramientas para pruebas en PWA
    • Identificar herramientas para pruebas en PWA.
    • Describir el proceso de instalación y configuración de la herramienta de pruebas.
    • Identificar el entorno de trabajo de la herramienta.
    • Identificar los parámetros y métricas a evaluar

Unidad 1.

Actividades a evaluar

# Temas

Introducción al desarrollo de Aplicaciones Web Progresivas.

  • Trabajo
  • Propuesta de proyecto
  • Asistencia
  • Análisis de casos
  • Examen

Unidad 2.

Actividades a evaluar

# Temas

Desarrollo de aplicaciones web Progresivas.

  • Trabajo
  • Avance del proyecto
  • Asistencia
  • Análisis de casos
  • Examen

Unidad 3.

Actividades a evaluar

# Temas

Distribución de la Aplicación Web Progresivas

  • Presentación del proyecto
  • Documentación del proyecto
  • Asistencia
  • Ranking del proyecto
  • Examen

Políticas de clase

# Temas
  • Teléfono móvil en modo silencio.
  • Las llamadas urgentes /prio se contestan fuera del salón.
  • Turnos de una sola persona para ir al WC.
  • Dos faltas a la semana sin justificante perderían derecho a las cuestiones de aprendizaje.
  • Levantar la mano para participar.
  • Respetar la participación de cada alumno.
  • No hay retardos.

Lineamientos de clase

# Temas
  • Mantenerse informado acerca de las lecturas, actividades y tareas del curso asistiendo por lo menos dos veces por semana, durante la duración del curso.
  • Cumplir dentro del aula virtual con todas las tareas, foros y actividades detalladas por el programa académico y el profesor, en el tiempo y forma establecidos.

  • El incumplimiento de las tareas en tiempo y forma llevarán a una no aprobación del curso.

Lineamientos de clase

# Temas

  • Realizar el seguimiento personal desde el Aula Virtual.

  • Estar pendiente de los resultados de las evaluacion/es parcial/es y final/es.

  • Notificar al tutor por escrito, con copia a la coordinación académica, si, por alguna razón excepcional, se encontrara en una circunstancia especial que le impidiera continuar con el curso y recibir así indicaciones de cómo proceder a partir de ese momento.

# Temas

¿Dudas, preguntas, comentarios?

# Recomendaciones

Recomendaciones

Se enumeran las recomendaciones que se deben seguir para la realización de las actividades

# Recomendaciones

Recomendaciones

Trabajos

  • Portada
  • Presentación
  • Introducción
  • Conclusión

Párrafos

  • Mayores a tres líneas
  • Menores a ocho líneas
  • Coherencia entre párrafos
# Recomendaciones

Recomendaciones

Ortografía

  • Acentuación en mayúsculas y minúsculas.
  • Evitar redundancia.
  • Evitar pleonasmos.
  • Mínimo tres errores.

Referencia bibliográfica

  • Al menos tres citas dentro del trabajo.
  • En formato APA 7ma edición.
# Recomendaciones

Recomendaciones

Lista de referencias bibliográfica

  • Al menos tres fuentes de diversos autores.
  • Con sangría francesa al inicio de cuatro espacios.
  • Fuente Times New Roman.
  • 12 puntos.
  • Sin enlaces activos.

Introducción y conclusión

  • Mínimo tres párrafos
# Recomendaciones

Recomendaciones

Formato del trabajo

  • Fuente Arial.
  • Tamaño de título: 14 puntos.
  • Tamaño de texto: 12 puntos.
  • Interlineado 1.5
  • Alineación justificada del texto.
  • Los títulos alineados a la izquierda.
  • En el encabezado del documento colocar el logotipo del instituto alineado a la derecha. Nombre de la carrera a la izquierda.
# Recomendaciones

Recomendaciones

Tablas

  • Colocarle al pie de la tabla un nombre a la tabla, bajo el siguiente formato:  <nombre_tabla numero consecutivo>. <nombre_tabla> <fuente:> <donde_fue_tomada> .
  • Colocar un párrafo descriptivo
# Recomendaciones

Recomendaciones

Imágenes / diagramas / gráficas

  • Colocarle al pie de la tabla un nombre a la tabla, bajo el siguiente formato:  <nombre_tabla numero consecutivo>. <nombre_tabla> <fuente:> <donde_fue_tomada> .
  • Colocar un párrafo descriptivo
# Recomendaciones

¿Dudas, comentarios, preguntas?

Actividades de encuadre

# Temas

En una hoja escribe la respuesta a la siguiente pregunta:

 

  • ¿Qué esperas que se enseñe en este curso?
  • ¿A qué te comprometes en este curso?
  • ¿Qué deseas aprender en este curso
# PWA

Aplicación Web Progreciva

  • Conceptos.
  • Aspectos Claves
  • Ventajas
  • Desventajas
  • Usos
  • Como usar una PWA
  • Requisitos de harware
  • Requisitos de software
  • Ejemplo
# PWA - CONCEPTO

Una Aplicación Web Progresiva (PWA, por sus siglas en inglés) es una aplicación que se construye utilizando tecnologías web estándar como HTML, CSS y JavaScript, pero que ofrece una experiencia similar a la de una aplicación nativa en dispositivos móviles. 

Las PWAs combinan lo mejor de las aplicaciones web y las aplicaciones móviles, ofreciendo funcionalidades avanzadas como la capacidad de trabajar sin conexión, notificaciones push y acceso a hardware del dispositivo, todo desde el navegador.

¿PWA?

# PWA - a. Claves

Progresiva: Funciona en cualquier navegador y es accesible para todos los usuarios, independientemente del dispositivo o sistema operativo.

Aspectos Claves

Responsive: Se adapta a diferentes tamaños de pantalla y orientaciones.

# PWA - a. Claves

Independiente de Conexión: Puede funcionar sin conexión o con conexiones de red limitadas.

Aspectos Claves

Similitud a una App: Ofrece una experiencia de usuario similar a la de una aplicación nativa, con interfaces fluidas y rápidas.

# PWA - a. Claves

Actualizaciones Automáticas: Se actualiza automáticamente sin necesidad de intervención del usuario.

Aspectos Claves

Seguridad: Utiliza HTTPS para garantizar la seguridad de los datos y evitar ataques como la interceptación de información.

# PWA - Ventajas

Compatibilidad Multiplataforma: Funciona en cualquier dispositivo con un navegador compatible, reduciendo la necesidad de desarrollar aplicaciones separadas para diferentes sistemas operativos.

Ventajas

Instalación Sencilla: Los usuarios pueden añadir la PWA a su pantalla de inicio directamente desde el navegador, sin pasar por tiendas de aplicaciones.

# PWA - Ventajas

Mejor Rendimiento: Las PWAs pueden cargar contenido de manera más rápida y eficiente, mejorando la experiencia del usuario.

Ventajas

Coste de Desarrollo Reducido: Al ser una aplicación web, el desarrollo y mantenimiento son generalmente más económicos en comparación con aplicaciones nativas.

# PWA - Ventajas

Acceso a Funciones del Dispositivo: Las PWAs pueden acceder a características como la cámara, GPS, y notificaciones, integrándose mejor con el dispositivo.

Ventajas

1

Limitaciones en Funcionalidades

2

Soporte Limitado en Navegadores

3

Interfaz de Usuario

4

Menor Visibilidad en Tiendas de Aplicaciones

# PWA - Desventajas

Desventajas

Usos

E-commerce

Experiencia rápida y similar a una app sin necesidad de que los usuarios descarguen una aplicación.

1.

2.

Ap. de Productividad

editores de texto, listas de tareas, calendarios y aplicaciones de notas que necesitan funcionar tanto en línea como fuera

3.

R.S y Blogs

Garantizar una experiencia de lectura fluida y sin interrupciones, incluso sin conexión.

# PWA - Usos

¿Cómo uso una PWA?

# PWA - ¿Cómo lo uso?

Desarrollo con Tecnologías Web

 Usar HTML, CSS y JavaScript para construir la aplicación.

Implementación de un Service Worker

Es un script que el navegador ejecuta en segundo plano, que permite la funcionalidad sin conexión, entre otras características.

¿Cómo uso una PWA?

# PWA - ¿Cómo lo uso?

Manifesto Web App

Un archivo JSON que define cómo debe comportarse la PWA cuando se instala en la pantalla de inicio de un dispositivo, incluyendo iconos, tema, y pantalla de inicio.

Optimización para Rendimiento

Asegura que la aplicación cargue rápidamente y que funcione de manera eficiente en una variedad de dispositivos.

Requerimientos de hardware

# PWA - Hardware

Computadora o portatil

  • Procesador: Intel i5 o superior, o su equivalente en AMD.
  • Memoria RAM: 8 GB de RAM.
  • Almacenamiento: 256 GB. 
  • Conexión a Internet: Una conexión estable para descargar dependencias, frameworks, y realizar pruebas en línea.
  • Dispositivos Móviles: para Pruebas (Opcional, pero recomendable)

Requerimientos de Software

# PWA - Software

Para casos académicos

  • Un editor.
  • Conocimiento de html, css y js
  • Un servidor web

Html básico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi PWA</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hola, Mundo!</h1>
    <p>Bienvenido a mi primera PWA.</p>
</body>
</html>
# PWA - Ejemplo

Manifiesto básico

{
  "name": "Mi PWA",
  "short_name": "PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}
# PWA - Ejemplo

Service Worker Básico

self.addEventListener('install', (e) => {
  e.waitUntil(
    caches.open('pwa-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/icon.png'
      ]);
    })
  );
});

self.addEventListener('fetch', (e) => {
  e.respondWith(
    caches.match(e.request).then((response) => {
      return response || fetch(e.request);
    })
  );
});

# PWA - Ejemplo
# PWA

Librerías

Identificar las herramientas, Framework, librerías, para la creación de PWA 

Herramientas para crear PWA

# PWA - Herramientas

Existen varias herramientas, librerías y frameworks que facilitan la creación de una experiencia optimizada, offline y con características similares a las aplicaciones nativas.

Herramientas para crear PWA

# PWA - Herramientas

Service Workers

Es el corazón de una PWA. Los service workers son scripts que el navegador ejecuta en segundo plano y permiten manejar el almacenamiento en caché, las notificaciones push, la sincronización en segundo plano y el funcionamiento sin conexión.

App Manifests

El archivo manifest.json es un componente esencial de las PWA, ya que contiene metadatos de la aplicación, como el nombre, íconos, temas y colores. Este archivo permite que la aplicación sea instalable en dispositivos móviles y que aparezca en la pantalla de inicio como una aplicación nativa.

Herramientas para crear PWA

# PWA - Herramientas

Lighthouse

Es una herramienta de Google que permite auditar y evaluar la calidad de una PWA. Lighthouse mide parámetros clave como el rendimiento, accesibilidad y cumplimiento con las mejores prácticas de PWA.

Librerías y Frameworks para Crear PWAs

# PWA - Herramientas

Workbox

Es una librería de Google que simplifica la implementación de service workers y permite gestionar el almacenamiento en caché, las estrategias de precarga de recursos, y la actualización del contenido.

PWABuilder

Es una herramienta de Microsoft que ayuda a generar rápidamente una PWA desde una aplicación web existente. También ofrece soporte para empaquetar la PWA y publicarla en tiendas de aplicaciones como Google Play Store y Microsoft Store.

Librerías y Frameworks para Crear PWAs

# PWA - Herramientas

Angular + Angular Service Worker

Angular, uno de los frameworks más populares de JavaScript, incluye soporte para PWA con su módulo Angular Service Worker, el cual facilita la integración de service workers y la creación de aplicaciones offline.

React + Create React App (CRA)

React, en conjunto con Create React App, ofrece plantillas para comenzar con una PWA de manera rápida. CRA incluye configuraciones básicas de service workers y manifiestos, facilitando el desarrollo de PWAs con React.

Librerías y Frameworks para Crear PWAs

# PWA - Herramientas

Vue.js + Vue CLI PWA Plugin

Vue.js ofrece un plugin para Vue CLI que permite convertir un proyecto en una PWA. El plugin facilita la configuración de service workers y el archivo manifest.json.

Ionic + Ionic PWA Toolkit

Onic es un framework orientado a crear aplicaciones móviles y web híbridas. Con su PWA Toolkit, es posible desarrollar PWAs con una experiencia similar a la de aplicaciones nativas, utilizando tecnologías web como HTML, CSS y JavaScript.

Frameworks Full-Stack para PWAs

# PWA - Herramientas

Next.js (React Framework)

Next.js es un framework basado en React que permite generar aplicaciones web y PWAs con funcionalidades avanzadas como renderizado del lado del servidor (SSR) y generación estática. Es una excelente opción para desarrollar PWAs altamente optimizadas.

Nuxt.js (Vue Framework)

Nuxt.js es el equivalente a Next.js para Vue.js, y es útil para la creación de aplicaciones universales con características de PWA. Incluye herramientas para optimización, service workers, y generación de manifiestos.

Hosting y Optimización de PWAs

# PWA - Herramientas

Firebase Hosting

Firebase es una plataforma de Google que ofrece hosting especializado para aplicaciones web, incluyendo soporte para PWAs. Firebase facilita la configuración de HTTPS, uno de los requisitos fundamentales para que una aplicación funcione como PWA.

Netlify

Netlify es una plataforma de hosting especializada en sitios web estáticos y PWA. Ofrece integración con herramientas como GitHub para desplegar aplicaciones de forma continua.

Actividad de aprendizaje

# PWA - Herramientas
  1. Genera una investigación a profundidad, sobre las herramientas, librerías y framework para crear PWA.
  2. Completa la siguiente tabla solo con herramientas, librerías y framework Open Sources
Herramientas Librerías Framework

Web Progresiva

By Alfredo de Jesús Gutiérrez Gómez

Made with Slides.com

Web Progresiva

Se aborda los conceptos, ventajas, desventajas y un pequeño ejemplo

  • 5

More from Alfredo de Jesús Gutiérrez Gómez