Angular 4: Convierte cualquier template HTML en una WebAPP!
4.7 (311 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
5,652 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 4: Convierte cualquier template HTML en una WebAPP! to your Wishlist.

Add to Wishlist

Angular 4: 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.
New
4.7 (311 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
5,652 students enrolled
Created by Fernando Herrera
Last updated 8/2017
Spanish
Price: Free
Includes:
  • 3.5 hours on-demand video
  • 5 Articles
  • 3 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
Requirements
  • Bases 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.

 El curso se enfoca 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.

 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.

Espero lo disfrutes mucho.

Who is the target audience?
  • 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
Compare to Other Web Development Courses
Curriculum For This Course
50 Lectures
03:33:48
+
Introducción
5 Lectures 14:51
Introducción
01:37

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

Instalaciones necesarias para seguir el curso
06:19

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:43

Aquí veremos el resultado final del curso

Objetivo del curso
02:10
+
Estructuras HTML a componentes de Angular
9 Lectures 34:27

Un breve resumen de lo que veremos a continuación

Introducción a la sección
01:07

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:44

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
06:09

Crearemos el componente del encabezado que tendrá nuestro menú

Componente del encabezado
06:16

Aquí crearemos el componente del pie de página

Componente del pie de la página
05:06

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

Componente del cuerpo de la página
06:46

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

GIT - Guardando el estado de nuestro proyecto
02:45
+
Páginas adicionales, rutas, y constantes
6 Lectures 21:34

Un breve resumen de lo que aprenderemos en esta clase.

Introducción a la sección
01:05

Aquí crearemos la página "about" 

Creando la página about
04:14

La tarea es crear una página del producto

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

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

Resolución - Creando la página del producto
03:56

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
06:09

Trabajaremos un poco con el menú de navegación

Editando el menú de navegación
04:55
+
Servicios, Constantes y HTTP
5 Lectures 28:09

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

Introducción a la sección
01:21

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

Creando un archivo JSON con la información
05:25

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
07:03

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

Usando el servicio para reemplazar información en la página web
10:17

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

Agregando animaciones a nuestras páginas
04:03
+
Utilizando Firebase para nuestra automátización
5 Lectures 20:22

Un breve resumen de lo que veremos a continuación

Introducción a la sección
01:00

Crearemos nuestra base de datos para usarla en nuestro sitio web

Creando nuestra base de datos en Firebase
05:59

Subiremos unas fotografías a Firebase para poder mostrarlas de forma dinámica

Subiendo fotografías a Firebase
03:46

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
04:32

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

Mostrando la información de Firebase en el HTML
05:05
+
Preparar Firebase con nuestros productos
7 Lectures 26:21

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

Introducción a la sección
01:26

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:59

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
08:01

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
05:14
+
Pantalla de productos y búsquedas
8 Lectures 45:46

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

Introducción a la sección
01:01

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

Enviando parámetros por URL
05:22

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

Servicio para obtener el producto
05:16

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

Actualizando la página del producto
04:29

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
07:26

Crearemos la página de búsqueda

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

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

Diseño y filtro de la página de búsqueda
07:09

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

Lógica del proceso de carga y filtro
08:50
+
Desplegando nuestra WebApp a GitHub Pages
3 Lectures 19:53

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

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

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

Probando nuestra app en pre-producción
07:33

Subiremos los archivos a GitHub

Subiendo los archivos a GitHub
10:58
+
Fin del Curso - Despedida
2 Lectures 02:26

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:13
About the Instructor
Fernando Herrera
4.6 Average rating
7,431 Reviews
25,919 Students
13 Courses
Analista de Sistemas y Desarrollador Web

Soy un analista de sistemas de computo, con poco más de 17 años en el mundo del desarrollo de aplicaciones de todo tipo.

Me encanta programar, crear cosas que la gente use, enseñar, también soy maestro sustituto en una universidad en las clases de programación, soy autor de código en Envato Marketplace.

Aquí en Udemy, he tenido la increíble experiencia de poder enseñar a muchos alumnos, y espero seguir mejorando mis cursos y los temas con forme la actualidad vaya cambiando.