Desarrollo Web Eficiente con SASS, NPM, Gulp y Web Workflows
4.5 (85 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.
317 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Desarrollo Web Eficiente con SASS, NPM, Gulp y Web Workflows to your Wishlist.

Add to Wishlist

Desarrollo Web Eficiente con SASS, NPM, Gulp y Web Workflows

Descubre las ventajas de incorporar a tu trabajo SASS y Gulp, y conviertete en un Diseñador Web más eficiente
4.5 (85 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.
317 students enrolled
Last updated 12/2016
Spanish
Current price: $10 Original price: $95 Discount: 89% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Incorporar SASS a tus proyectos web
  • Manejar las dependencias con NodeJS
  • Crear un Workflow con Gulp
  • Incrementar tus habilidades, SASS y Gulp son 2 habilidades muy buscadas por los empleadores hoy en día.
  • Crearemos un Grid parecido al de Frameworks como Bootstrap y Foundation que podrás utilizar en tus proyectos
  • Crearemos un proyecto que será adaptable a distintas resoluciones utilizando SASS
  • Serás más eficiente en tu trabajo, con SASS tu proyecto tendrá mejor estructura, se verá más profesional y será más fácil de mantener
  • Crearas un workflow con tareas como BrowserSync, livereload, compilación de SASS y mucho más
View Curriculum
Requirements
  • Será necesario instalar NodeJS, Gulp, Git, para poder continuar, el como hacerlo se incluye en este curso.
  • Necesitarás un editor de Texto, Sublime Text, Atom, Visual Studio Code, cualquiera te permitirá finalizarlo sin problemas
  • No tener miedo a instalar paquetes desde la consola
  • Paciencia para escribir algo de código
Description

SASS y Gulp son dos herramientas que te ayudarán a ser un diseñador más eficiente y profesional.

Este curso fue diseñado cuidadosamente para llevarte desde lo básico a temas más avanzados.

Durante el curso instalaremos Node JS, Git y Gulp, crearemos todo el código nosotros y se explicará cada parte. Todo el código se incluye en los archivos del curso, para que puedas continuar sin problemas.

Desarrollaremos un proyecto del mundo real, con distintos escenarios que te podrás encontrar. Se incluye la realización de un Grid como el que utilizan frameworks CSS de hoy en día.

Who is the target audience?
  • Diseñadores web que deseen expandir sus habilidades
  • Todo el código será escrito por nosotros, (se proveerán los ejemplos al inicio de cada sección)
  • Personas que deseen aumentar sus habilidades y realizar un trabajo más eficiente
Students Who Viewed This Course Also Viewed
Curriculum For This Course
41 Lectures
03:24:11
+
Introducción al Curso
1 Lecture 04:53

Veamos lo que aprenderás en este curso.

Preview 04:53
+
Configurando ambientes de desarrollo Windows y MAC
2 Lectures 10:56

Si usas Mac, veamos como instalar NodeJS, NPM y Git

Instalando Node JS, NPM y Git en Mac
07:22

Si utilizas Windows, veamos en este video como instalar NodeJS, NPM y GIT

Instalando Node JS, NPM y Git en Windows 7
03:34
+
Introducción a Workflows con Node JS y Gulp
3 Lectures 09:25

En este video descargaremos el Workflow que he hecho para este curso, y revisaremos algunas de las caracteristicas que tiene, antes de finalizar el curso te mostraré como realizar este mismo workflow.

Preview 01:42

NodeJS nos ayudará a manejar las dependencias de proyecto que definimos en nuestro package.json, veremos como hacerlo en este video:

Los comandos deben ser:

npm install

y al final hay que agregar Gulp de forma global:

npm install -g gulp

El video será actualizado brevemente :) pero con esto será suficiente.

Preview 03:24

Una vez descargadas las dependencias de nuestro proyecto, correremos nuestro archivo gulp por primera vez, veremos que es y que hace BrowserSync, livereload y la compilación de SASS

Primeros pasos con nuestro Workflow
04:19
+
Primeros pasos con SASS
10 Lectures 47:10
SASS te permite crear variables y asignarles un valor, veremos como comenzar a incorporarlas a nuestro proyecto.
Preview 04:07

Una vez creadas nuestras variables, veamos como utilizarlas en nuestros proyectos

Asignando nuestras variables a etiquetas html de nuestro diseño.
03:16

Veamos como agregar una fuente de Google Fonts utilizando SASS

Agregando una fuente de Google Fonts con SASS
03:32

Mixins te permitirán crear un código de CSS y re utilizarlo en distintos lugares pasándole algunos parámetros, veamos un ejemplo claro utilizando MediaQueries

Creando un @mixin para Media Queries
06:37

Veamos como es que debes escribir SASS, como ejemplo crearemos un menú de navegación.

Conociendo la sintaxis de SASS
06:29

Finalizaremos nuestro menú de navegación, creando y utilizando un mixin para darle los últimos detalles.

Finalizando nuestro menú de navegación.
04:40

Ya vimos el poder de los Mixins, veamos como elaborar un mixin que puede tomar distintos parámetros.

Creando un @mixin Avanzado para las imágenes de fondo.
05:55

Finalizaremos nuestro Mixin para nuestras imágenes de fondo, agregando unas sombras de CSS3 y posicionando el texto correctamente.

Finalizando nuestro @mixin para imágenes de Fondo agregando un efecto de CSS3
03:42

Daremos un poco de estilo a nuestro contenido principal y colocaremos una barra lateral.

Creando los contenedores principales para nuestro contenido
02:50

Continuamos nuestra práctica con SASS en este video, a estas alturas ya debe serte familiar como se escribe el código SASS, pero nunca esta de más un poco de práctica.

Editando la sección de últimas noticias con SASS
06:02
+
Conceptos más avazados de SASS
9 Lectures 55:26

@extend te permitirá heredar todos los atributos de una clase y usarlos en otra, donde solo podrás cambiar lo necesario sin necesidad de tener que escribir todo el código.

Creando una clase para nuestros botones y conociendo @extend
06:35

A veces solo es necesario utilizar el mismo color pero un poco más oscuro o claro, SASS incluye las funciones darken y lighten para hacer eso, veamos como en este video.

Agregando lighten y darken para manejo de colores en SASS
04:43

Las tablas ya no son muy utilizadas hoy en día en Diseño Web, sin embargo en ocasiones es la forma más sencilla de hacer el trabajo, veamos algunos selectores que podemos utilizar en nuestro diseño.

SASS en tablas de HTML
08:27

CSS por si solo no te permite realizar operaciones matematicas, sin embargo SASS si, veamos un ejemplo de como crear una pequeña galería de imágenes.
Creando un @mixin con operaciones matemáticas para nuestra galería.
06:20

En este video crearemos un Mixin que nos permitirá agregarle esquinas redondeadas a nuestra galería o cualquier elemento.

Creando un @mixin para agregar bordes redondeados a las imágenes
02:08

SASS te permite dividir tus archivos para fácil uso y fácil mantenimiento, nuestro código ha crecido, pero es momento de dividirlo en pequeños módulos.

Dividiendo nuestros archivos SASS en pequeños componentes para fácil uso
06:50

En este video crearemos un pequeño Grid, para hacer que nuestro diseño se adapte fácilmente a distintas pantallas, veremos una vez más el poder de SASS para crear algo muy complejo con un mínimo de código.

Creando un Grid de Columnas para nuestro diseño
06:19

Finalizaremos nuestro grid agregando algunos pequeños detalles de SASS y reutilizando algunas funciones que ya hemos hecho.

Realizando los últimos toques a nuestro Grid
06:30

Veamos lo sencillo que es maquetar nuestro sitio web gracias a nuestro grid que hemos hecho, antes de finalizar, trabajaremos con la sección de servicios.

Utilizando nuestro Grid en la sección de Servicios y editando SASS
07:34
+
Creando el Workflow desde cero.
16 Lectures 01:16:21

Veremos como crear nuestro archivo package.json y el gulpfile para comenzar a crear nuestro workflow.

Preview 03:30

En este video crearemos nuestra primer tarea de SASS, veremos como compilar un archivo SASS y colocar el archivo CSS en nuestra carpeta de producción.

Creando nuestra primer tarea, compilador de código SASS
07:02

BrowserSync y livereload te ahorrarán tener que estar recargando tu proyecto cada que realices un cambio. Además te permitirán visualizar tu sitio web en tu teléfono o tablet sin necesidad de publicarlo a un servidor.

Creando un servidor con BrowserSync y Livereload
07:58

Además de escuchar los cambios del Index.html (o cualquier HTML) también podemos ver los cambios de JavaScript o CSS, veamos como en este video.

Agregando Watch para escuchar los cambios a la hoja de estilos y livereload
04:51

Hay algunas propiedades de CSS3 que requieren prefijos, saber cuales a veces puede generar una perdida de tiempo, autoprefixer nos ayudará a darle prefijo solo a lo que debe llevarlo, veamos como en este video.

Agregando Autoprefixer a nuestro workflow
05:47

Si quieres unir diferentes archivos de JavaScript, el paquete de gulp-concat te ayudará a hacerlo más fácil

Concatenar Diferentes archivos de JavaScript
04:38

Browserify te permitirá agregar dependencias a tu proyecot de forma fácil, veamos como agregar Bootstrap, Mustache y jQuery

Manejar dependencias con Browserify
04:34

Hemos agregado unos archivos de JavaScript, vamos a hacer que tomen el reload de browser sync cuando hagamos algún cambio

Agregando Live Reload para JavaScript
02:40

Bootstrap viene como LESS o CSS al instalarse por medio de NPM, veamos como agregar esta librería a nuestro archivo SASS para solo tener como salida un archivo

Concatenar archivos SASS Y CSS en uno solo
07:24

Ya vimos como agregar nuestras dependencias con Browserify, pero en realidad funcionan? vamos a probar creando un Slider para ver si los resultados son los esperados

Probando nuestras dependencias de Browserify
04:55

Nuestro ejemplo del anterior video funcionó correctamente, sin embargo hicieron falta las fuentes, vamos a crear un nuevo task que se encargará de mover archivos de una carpeta a otra

Mover archivos de una carpeta a otra
03:34

Vamos a crear un ejemplo con Bootstrap, jQuery, JSON y mustache para darle un toque más real a nuestro ejemplo

Creando un Ejemplo con Bootstrap, jQuery, JSON Y Mustache (1 de 2)
03:36

Vamos a finalizar nuestro ejemplo del video anterior antes de continuar agregando más funcionalidad a nuestro Workflow

Creando un Ejemplo con Bootstrap, jQuery, JSON Y Mustache (2 de 2)
06:29

Nuestro código de JS es de más de 12 mil lineas, veamos como minificarlo con Gulp

Minificar JavaScript con Gulp
02:55

Veamos ahora como Minificar el CSS con GULP

Minificar CSS con Gulp
02:41

Continuamos ahora Minificando el HTML

Minificar HTML con Gulp
03:47
About the Instructor
Juan Pablo De la torre Valdez
4.6 Average rating
2,401 Reviews
8,910 Students
17 Courses
Freelance Web Developer and Owner of Easy-WebDev

My name is Juan Pablo De la torre Valdez, i´m from Guadalajara. Mexico.
For the last 10 years i been working with the web, i have a lot of experience in modern Web Technologies such as Foundation, Bootstrap, RWD, WordPress, Drupal, PHP, JavaScript & jQuery, HTML5, CSS3, SASS and Photoshop.

I started a company called CreativaWeb where i design and develop WordPress based websites.

I really like to design and develop websites, in the recent years i made hundreds of websites for Government, Universities, Startups and Medium-Size Companies from my city, the whole country and  from another countries.

----------------------------------------------------------------------------------------

Soy diseñador y programador web desde hace más de 10 años, tengo amplia experiencia y trabajo diariamente con tecnologías como Foundation,  Bootstrap, WordPress, Drupal, PHP,JavaScript y jQuery, HTML5, CSS3, SASS y Photoshop.

Comencé una compañia llamada CreativaWeb, donde principalmente diseño y desarrollo sitios web en WordPress.

Me gusta combinar mi trabajo en diseño y programación; en los años anteriores he hecho cientos de páginas para dependencias del Gobierno, Universidades, Pequeños y Medianos de negocios de mi ciudad, a nivel nacional y de otros países.