Angular: Convierte cualquier template HTML en una WebAPP
4.8 (3,087 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
34,208 students enrolled

Angular: Convierte cualquier template HTML en una WebAPP

¿Quieres aprender a crear un sitio web dinámico con Angular, Firebase y GitHub Pages? Estas en el lugar correcto.
4.8 (3,087 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
34,208 students enrolled
Created by Fernando Herrera
Last updated 7/2018
Spanish
Spanish [Auto-generated]
Price: Free
This course includes
  • 3.5 hours on-demand video
  • 11 articles
  • 10 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What you'll learn
  • Crear una página web administrada por Angular y Firebase
  • Tener el conocimiento necesario para convertir cualquier template HTML en una aplicación de Angular

  • Desplegar una aplicación a un sitio web

  • Usar GitHub Pages para desplegar sitios y aplicaciones web
  • Crear un portafolio de proyectos o productos
Course content
Expand all 57 lectures 03:30:43
+ Introducción
5 lectures 12:18
Introducción
01:08

Aquí enseño las herramientas con las que trabajaremos en el curso

Instalaciones necesarias para seguir el curso
04:45

Configurar GIT para poder trabajar con un repositorio central para manejar backups.

Opcional - Configurar GIT
04:02

Esto es bastante lógico, pero es necesario

¿Cómo hacer preguntas?
00:50

Aquí veremos el resultado final del curso

Objetivo del curso
01:33
+ Estructuras HTML a componentes de Angular
10 lectures 29:26

Un breve resumen de lo que veremos a continuación

Introducción a la sección
00:46

Aquí descargaremos el tema que usaremos en este curso

Descarga del tema que usaremos de ejemplo
01:30

Copyright del template

Información del template a usar
00:04

Usaremos el Angular CLI para inicializar nuestro proyecto.

Iniciando el proyecto de Angular
04:32

Tomaremos la estructura básica del template HTML y comenzaremos a moverlo a nuestro proyecto de Angular

Estructura HTML básica a nuestro proyecto de Angular
03:50

Crearemos el componente del encabezado que tendrá nuestro menú

Componente del encabezado
05:43

Aquí crearemos el componente del pie de página

Componente del pie de la página
04:35

Aquí vamos a crear el body de nuestra página web

Componente del cuerpo de la página
05:43

Aquí crearemos un snapshot o fotografía del proyecto en este momento para hacer un backup

GIT - Guardando el estado de nuestro proyecto
02:34

Aquí les dejo el código fuente de la sección por si lo llegan a necesitar

Código fuente de la sección
00:09
+ Páginas adicionales, rutas, y constantes
8 lectures 30:26

Un breve resumen de lo que aprenderemos en esta clase.

Introducción a la sección
01:06

Aquí crearemos la página "about" 

Creando la página about
03:50

La tarea es crear una página del producto

Tarea - Creando la página del producto
01:21

Resolveremos la tarea de la creación de la página del producto

Resolución - Creando la página del producto
02:44

Aquí vamos a realizar un trabajo para que nuestra página web, se mueva de página en página

Creando rutas para nuestro sitio web
09:51

Trabajaremos un poco con el menú de navegación

Editando el menú de navegación
08:37

Cambiaremos como funcionan las rutas de nuestra aplicación

Uso del hash en las rutas
02:48

Código en el material adjunto

Código fuente de la sección
00:09
+ Servicios, Constantes y HTTP
7 lectures 32:03

Un breve resumen de lo que haremos en esta sección

Introducción a la sección
00:40

Vamos a crear un archivo JSON, con la información de nuestra página

Creando un archivo JSON con la información
04:00

Aquí crearemos el servicio que nos permitirá consumir el JSON y hacer fácil la edición de la página web

Servicio - Información de la página
09:41

Esta clase es opcional, pero nos sirve para explicarle a TypeScript, que tipo de propiedades tiene nuestra info en el servicio

Crear interfaz para controlar la información de la página
04:40

Usaremos el servicio para actualizar los valores de nuestra página web

Usando el servicio para reemplazar información en la página web
06:35

Agregaremos aquí una pequeña animación a la hora de cargar la página web

Agregando animaciones a nuestras páginas
06:21

Pueden descargarlo del material adjunto

Código fuente de la sección
00:06
+ Utilizando Firebase para nuestra automátización
4 lectures 19:36

Un breve resumen de lo que veremos a continuación

Introducción a la sección
00:54

Crearemos nuestra base de datos para usarla en nuestro sitio web

Creando nuestra base de datos en Firebase
10:00

Aquí aprenderemos a utilizar el servicio rest de firebase, para obtener la información

Carga de la información de Firebase a nuestra página
03:35

Tomaremos el objeto que vino de Firebase, y lo usaremos en la página.

Mostrando la información de Firebase en el HTML
05:07
+ Preparar Firebase con nuestros productos
8 lectures 23:07

Un breve resumen de lo que haremos en esta sección

Introducción a la sección
01:07

Aquí puedes descargar el material que usaremos en esta sección

Material de la sección
00:09

Vamos a importar información a Firebase que nos permita retornarla posteriormente.

Cargando información a Firebase
03:46

Necesitamos un servicio encargado de manejar los productos

Creando el servicio de productos
07:22

Desplegando los artículos en el home

Desplegando los artículos en el home
05:44

Aquí les dejo el URL del loading que usaremos

URL del Loading que usaremos - SVG
00:10

Aquí añadiremos un loading a nuestro portafolios, para indicarle al usuario cuando ya se cargo todo.

Agregando un loading a nuestro portafolio
04:40

Código fuente de la sección en caso de que lo necesiten

Código fuente de la sección
00:09
+ Pantalla de productos y búsquedas
9 lectures 48:00

Un breve resumen de lo que lograremos en esta sección

Introducción a la sección
00:30

Enviaremos parámetros por URL para poder construir la página del producto

Enviando parámetros por URL
05:31

Nos conectaremos a Firebase para obtener la información del producto seleccionado.

Servicio para obtener el producto
06:51

Aquí usaremos la información del servicio, para actualizar nuestra página del producto

Actualizando la página del producto
08:31

Según la lógica aplicada al curso, aquí usaremos las imágenes que copiamos a la aplicación en la sección 6

Reemplazando las imágenes del producto
04:40

Crearemos la página de búsqueda

Creando la página de búsqueda
06:27

Vamos a realizar un diseño y filtro para nuestra búsqueda.

Diseño y filtro de la página de búsqueda
06:34

Aquí resolveremos el problema de los tiempos de carga y el filtro

Lógica del proceso de carga y filtro
08:46

Código fuente de la sección hasta el momento

Código fuente de la sección
00:10
+ Desplegando nuestra WebApp a GitHub Pages
4 lectures 13:35

Un breve resumen de lo que haremos en esta sección

Introducción a lo que veremos en la sección
01:01

Probaremos nuestra aplicación que funcione en un ambiente casi real.

Probando nuestra app en pre-producción
04:50

Subiremos los archivos a GitHub

Subiendo los archivos a GitHub
07:37

Aquí les dejo el código final del programa

Código fuente de la sección
00:07
+ Fin del Curso - Despedida
2 lectures 02:14

Por si te gusto este curso

Descuentos especiales a los alumnos de este curso
00:13

Aquí tenemos el cierre del curso.

Despedida del curso - Un placer tenerlos como estudiantes
02:01
Requirements
  • Ideas o conceptos de Angular son necesarias ( Servicios y Componentes)
  • Conocimiento de HTML, CSS y JavaScript es recomendado
  • No es necesario saber Firebase
  • No es necesario saber GIT
  • No es necesario saber GitHub
  • No es necesario tener un un domino web
Description

Este curso se enfoca en enseñar como convertir una plantilla HTML a una aplicación de Angular, usando Firebase como backend, desplegando el sitio web en GitHub Pages y utilizando Git como repositorio.

El curso es totalmente gratuito y tiene como objetivo ayudarte en tu conocimiento de Angular, Firebase y otras herramientas que pueden interesarte mucho. Nos enfocaremos en aprender haciendo, crearemos todo de cero, eso incluye la configuración de la base de datos y los repositorios para trabajar en GitHub y Git. Hay un par de tareas y ejercicios que te pondrán a prueba, pero siempre con las soluciones al siguiente video.

Temas puntuales a tratar:

  • Componentes en Angular

  • Rutas utilizando módulos

  • Generar aplicación de producción

  • Firebase REST API

  • Git

  • GitHub

  • Servicios de Angular

  • Convertir un template HTML en una aplicación de Angular

  • Y mucho más

El objetivo final es crear y desplegar la página web que creamos a un sitio web real, adquiriendo el conocimiento necesario para poder trabajar con confianza temas que no están hecho nativamente para el Framework de Angular.

 Requisitos importantes:

Este curso no te enseñara Angular de Cero, debes de tener una pequeña base de lo que son los servicios y los componentes, si sabes de que hablo, este curso es para ti, pero si es la primera vez que tocas Angular, el curso te llevará de la mano.

Espero lo disfrutes mucho.

Who this course is for:
  • Cualquier persona que conozca un poco de Angular
  • Cualquier persona que desee aprender un poco de Git, GitHub, Angular y Firebase
  • Cualquier persona con deseos de aprender un poco más
  • Personas que deseen aprender a realizar despliegues de una aplicación de angular