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.3 (43 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.
154 students enrolled
$19
$35
46% off
Take This Course
  • Lectures 41
  • Length 3.5 hours
  • Skill Level All Levels
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2016 Spanish

Course 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.

What are the 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

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introducción al Curso
04:53

Veamos lo que aprenderás en este curso.

Section 2: Configurando ambientes de desarrollo Windows y MAC
02:30

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

03:34

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

Section 3: Introducción a Workflows con Node JS y Gulp
01:42

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.

03:24

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.

04:19

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

Section 4: Primeros pasos con SASS
04:07
SASS te permite crear variables y asignarles un valor, veremos como comenzar a incorporarlas a nuestro proyecto.
03:16

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

03:32

Veamos como agregar una fuente de Google Fonts utilizando SASS

06:37

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

06:29

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

04:40

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

05:55

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

03:42

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

02:50

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

06:02

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.

Section 5: Conceptos más avazados de SASS
06:35

@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.

04:43

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.

08:27

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.

06:20
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.
02:08

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

06:50

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.

06:19

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.

06:30

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

07:34

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.

Section 6: Creando el Workflow desde cero.
03:30

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

07:02

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.

07:58

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.

04:51

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.

05:47

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.

04:38

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

04:34

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

02:40

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

07:24

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

04:55

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

03:34

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

03:36

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

06:29

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

02:55

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

02:41

Veamos ahora como Minificar el CSS con GULP

03:47

Continuamos ahora Minificando el HTML

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Juan Pablo De la torre Valdez, 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.

Ready to start learning?
Take This Course