HTML5 Avanzado - Progressive Web Apps

HTML5 Avanzado - Progressive Web Apps

Crea apps móviles (no híbridas) con las tecnologías web que ya conoces: HTML, CSS, JS.

Las progressive web apps (PWA) nos permiten tener aplicaciones web HTML5 que se comportan como aplicaciones nativas del teléfono. Estas nos brindan múltiples ventajas en el desarrollo web/movil. Si ya tienes conocimientos básicos de HTML, CSS y Javascript puedes tomar este curso.

FrontendJavascriptDesarrollo web
8
Poster del curso
Avatar

Jonathan MirCha

HTML5 Avanzado - Progressive Web Apps

Este curso está disponible sólo para usuarios premium

Accede a todos los cursos, talleres y especialidades de EDteam

¿Qué aprenderás?

  • Trabajar con web workers.
  • Guardar datos en caché para apps offline.
  • Usar firebase para obtener datos.
  • Acceso a cámara del dispositivo, Crear tu primera PWA

¿Qué conocimientos necesitas?

Nivel

avanzado

+14 horas

Temario del curso

¿Eres estudiante premium o has comprado este curso? Empieza aquí

Introducción a las Aplicaciones Web Progresivas (PWA's)

  • 1.1 ¿Que es una PWA?13:14
  • 1.2 - Caracteristicas de una PWA25:00
  • 1.3 ¿Cual es mi audiencia?13:15
  • 1.4 - ¿Qué tipo de contenido ofrezco?12:45
  • 1.5 - ¿Por qué hacer una PWA?11:35
  • 1.6 Herramientas para desarrollo de PWA06:22
  • 1.7 ¿Qué pueden hacer la web hoy?05:30

Tecnologías Core de las PWA's I

  • 2.1 - Tecnologías core PWA05:12
  • 2.2 - Responsive web design16:57
  • 2.3 - App shell architecture14:27
  • 2.4 - Manifest.json04:36
  • 2.5 - Manifest.json e iconos17:11
  • 2.6 - Extension Webserver para Google Chrome06:15
  • 2.7 - Promises (promesas)16:45
  • 2.8 - Service Worker07:44
  • 2.9 - Registrar service worker11:21

Tecnologías Core de las PWA's II

  • 3.1 - Que es fetch API10:03
  • 3.2 - Ejemplo de fetch API24:56
  • 3.3 - Registrar service worker11:44
  • 3.4 - Guardando en cache12:23
  • 3.5 - Recuperar cache12:54
  • 3.6 - Probando aplicacion offline09:29
  • 3.7 - Push notifications12:30

Tecnologías Core de las PWA's III

  • 4.1 - Notificaciones con acciones17:26
  • 4.2 - Configurar acciones07:59
  • 4.3 - Eventos online y offline18:48
  • 4.4 - Registrar sincronización de fondo17:31
  • 4.5 - Demo con API Github13:13
  • 4.6 - Demo con API Github: Búsqueda de usuarios08:02
  • 4.7 - Evento message18:36
  • 4.8 - Compartir contenido con el API share10:13

Creando una PWA I

  • 5.1 - Aclaraciones y temario05:09
  • 5.2 - Flujo de trabajo, Kit de inicio y instalación de Dependencias10:51
  • 5.3 - Estructura de archivos kit de inicio07:05
  • 5.4 - Estructura package JSON13:11
  • 5.5 - Estructura Webpack24:42
  • 5.6 - Ejecutando StarterKit05:34
  • 5.7 - Estructura de carpetas de Desarrollo19:30
  • 5.8 - Probando StarterKit en desarrollo y produccion15:38

Creando una PWA II

  • 6.1 - Depurando kit inicio e introducción a Firebase19:24
  • 6.2 - Autenticación con Firebase y Github sign in37:32
  • 6.3 - Autenticación con Firebase y Github sign out07:06
  • 6.4 - Dividiendo aplicacion en Componentes18:07
  • 6.5 - Definiendo el App Shell de la aplicación33:45
  • 6.6 - Programacion, animaciones del menu y terminando App Shell19:38

Creando una PWA III

  • 7.1 - Seccion Uploader, Input File y API File39:09
  • 7.2 - Creando componente auxiliar para mensajes07:03
  • 7.3 - Integracion de Uploader de archivos y Firebase Storage31:30
  • 7.4 - Integracion de Uploader, archivos y Firebase Database22:50
  • 7.5 - Seccion Profile15:47
  • 7.6 - Sección de camara: Accediendo a la camara23:03
  • 7.7 - Seccion de Camara: Tomando foto21:59
  • 7.8 - Seccion de Camara: Subiendo foto15:55

Creando una PWA IV

  • 8.1 - Terminando Seccion Profile13:06
  • 8.2 - Seccion Timeline13:11
  • 8.3 - Dependencia de Webpack para PWA's20:30
  • 8.4 - Convirtiendo EDgram en PWA21:14
  • 8.5 - Desplegado y Publicacion de EDgram20:59

¿Por qué elegir EDteam?

Profesores reales

Profesores reales

Todos nuestros profesores tienen experiencia real en aulas.Porque no basta saber un tema, sino saber enseñarlo.

Especialidades

Especialidades

Las especialidades son rutas de aprendizaje detalladas que te llevan a traves de cursos cortos a tu objetivo.

Aprende con proyectos

Aprende con proyectos

Somos la primera plataforma en incluir un proyecto del mundo real (no un examen) para completar los cursos.

Comunidad

Comunidad

No te quedes con dudas, busca apoyo en la comunidad, ayuda a tus compañeros y gana reputación.

Seguimiento de aprendizaje

Seguimiento de aprendizaje

Lleva seguimiento de tus avances, tomar notas y obtén un certificado de culminación desde nuestra plataforma.

Clases en vivo

Clases en vivo

Toda la semana tenemos clases en vivo en las que nuestros estudiantes interactuan con los profesores y sus compañeros.