Responsive Web Design con CSS3, HTML5 y jQuery

Google recomienda utilizar Responsive Web Design para tener un sitio web adaptable. Aprende como en este curso.
4.4 (19 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.
152 students enrolled
$35
Take This Course
  • Lectures 70
  • Contents Video: 5.5 hours
    Other: 0 mins
  • Skill Level Beginner Level
  • 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 8/2014 Spanish

Course Description

Aprenderás lo básico de Responsive Web Design, algunos términos importantes como Mobile First, los principales errores a la hora de desarrollar para móviles, las soluciones más importantes. Así como las herramientas necesarias para Responsive Design modernas y estables.

Comenzaremos el curso con una introducción a media queries de CSS3, pero rápidamente nos moveremos a un caso práctico utilizando las mejores prácticas para Responsive Web Design.

El curso esta acompañado con ejemplos para trabajar con Formularios, Tablas, Videos, Slideshow, Lightbox, Menú, etc. Y como desarrollar para dispositivos móviles.

Terminaremos el curso con una introducción a los Frameworks CSS para desarrollar para móviles como son Foundation y Bootstrap, haremos un ejemplo con ellos para que sepas como implementarlos en tu trabajo diario.

What are the requirements?

  • Solo es necesario contar con un editor de Texto (utilizaremos Sublime Text) los archivos y carpetas estarán disponibles en los archivos del curso

What am I going to get from this course?

  • Aprenderás a implementar Responsive Web Design en tus proyectos
  • Conocerás términos más importantes como Mobile First
  • Donde y como aplicar Media Queries para hacer tu diseño compatible con dispositivos móviles
  • Las mejores librerías de jQuery para desarrollo para equipos móviles
  • Trabajar con Slideshow, Lightbox, Tablas, Videos, Menús y adaptarlos a un dispositivo móvil
  • Conocerás que son y para que sirven los Frameworks CSS para dispositivos móviles como Bootstrap y Foundation
  • Si sigues las lecciones, al terminar el curso tendrás un diseño adaptable a dispositivos móviles así como el conocimiento para elaborar más.

What is the target audience?

  • Se requiere algo de experiencia en HTML, CSS, y jQuery, para sacar mayor provecho del curso, pero si no tienes experiencia y eres nuevo en el mundo de CSS3, HTML5 y jQuery con seguir los ejercicios podrás culminar el mismo diseño

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 (Actualizado Julio 2015)
02:09

En este video veremos una presentación sobre que es Responsive Web Design.

02:28

Una de las recomendaciones que hace Google es tener un solo sitio web, aquí te mostraré algunas ventajas y desventajas

01:27

Una de las preguntas más comunes es ¿Qué es Mobile First? aquí veremos la respuesta

07:36

Para que quede un poco más claro lo que vimos en el video anterior, hagamos un ejemplo práctico de Mobile First

01:30

En este video veremos una introducción de que es exactamente el Viewport.

02:46

Y al Igual que en Mobile First, aquí tenemos un ejercicio sobre el Viewport

Section 2: Iniciando con Responsive Web Design
01:54

En este video compararemos 2 sitios web, uno normal y otro utilizando Responsive Web Design.

03:38

Mobile First no significa iniciar desde una resolución de 320px, es mucho más que eso, aquí aprenderás como sacar provecho de la filosofía Mobile First

03:45

Una de las técnicas más comunes para tener un sitio web para teléfonos y dispositivos es redireccionar mediante .htaccess.

¿Como tener un sitio para móviles? (Aprendiendo MediaQueries)
02:58
Section 3: ¿Qué son los Media Queries? (Actualizado Julio 2015)
01:37

Google recomienda el desarrollo con Media Queries para un sitio móvil, veamos que son y como escribirlos

02:56

Hagamos un pequeño ejercicio para entender un poco más sobre los Media Queries

03:14

Hagamos un segundo ejercicio con Media Queries

06:38

Hasta en los Media Queries hay estilos, veamos como se escriben los Media Queries utilizando el método Mobile First

05:11

Además de Mobile First, existe Desktop First ( y muchas alternativas claro) en este video veremos como son.

02:38

Deseas convertir un diseño a Mobile First? aquí hay un video de como hacerlo, parte 1

08:18

Deseas convertir un diseño a Mobile First? aquí hay un video de como hacerlo, parte 2

Section 4: Media Queries, lo que tienes que saber.
10:10

En este video haremos un boilerplate sencillo, que nos ayudará a comprender como trabajan los Media Queries

04:09

En este Video conocerás la sintaxis para Media Queries.

02:41

En este video veremos como agregar estilos a una resolución entre 1024 y 768 pixeles

02:05

Escribiremos los estilos para las pantallas entre 481 y 767 pixeles

02:33

Escribiremos los estilos para una pantalla de 0 a 481px.

Section 5: HTML5 para Responsive Design
02:23

Las etiquetas <meta name="viewport"> son muy útiles, te mostraré como usarlas.

04:34

Daremos una vista a los diferentes campos de texto soportados por HTML5

Section 6: Patrones de Diseño para Responsive Web Design (Actualizado Julio 2015)
03:53

El más común de todos, Mostly Fluid o Fluido, Diseño que se va teniendo el mismo porcentaje de ancho en la pantalla y que se va adaptando conforme se va haciendo más pequeña. La solución más común para Responsive Web Design.

02:33

Column Drop nos permite colocar una columna arriba de la otra al llegar a cierto punto en especial cuando es la pantalla de un móvil, aquí lo verás funcionando.

03:55

Layout Shifter cambia el diseño basado en la resolución y aunque pueden ser pequeños ajustes, en este video hacemos un cambio total.

03:34

Tiny Tweaks es ideal cuando tienes mucho contenido como un blog o una noticia, son pequeños ajustes basados en la resolución, aquí veremos como hacerlo.

07:24

El Patrón Off Canvas es el más avanzado de todos ( y el más genial ) aquí te mostraré como lo hice.

Tal vez antes de finalizar te preguntas, puedo mezclar todos estos patrones? la respuesta es SI, y Bootstrap y Foundation son claros ejemplos ya que utilizan estos 5 patrones.

Section 7: Trabajando con un sitio web real
Sobre las imágenes de este curso
Article
04:36

Trabajar con HTML5 Boilerplate es trabajar con un trabajo de más de 50 desarrolladores, la base más solida para comenzar un Diseño Responsive o Web App

06:52

Crearemos una plantilla entre todo lo que se comparte a través de todas las páginas de nuestro sitio, aquí escribimos el HTML

11:28

Crearemos una plantilla entre todo lo que se comparte a través de todas las páginas de nuestro sitio, aquí escribimos el CSS

10:57

Crearemos una plantilla entre todo lo que se comparte a través de todas las páginas de nuestro sitio, aquí escribimos los Media Queries

04:27

Trabajar con Sprites para imagenes es genial!! aquí te mostraré como

01:58

En este video crearemos un enlace al home.

07:13

En este video comenzaremos con el HTML de la página principal

09:41

Una vez terminado el HTML, es hora de agregar un poco de CSS, utilizaremos la filosofía de Mobile First.

05:23

Hora de hacer que nuestra página web se vea diferente según el dispositivo.

02:38

Comenzamos a trabajar con la página de informacion.html, escribiremos todo el HTML

04:42

En este video agregaremos los estilos tanto para mobile como para los media queries.

05:40

En este video trabajaremos con la sección que visitar, escribiremos el HTML y re utilizaremos lo más que podamos de CSS.

02:12

En este video escribiremos la sección de consejos, en 2 minutos tendremos una página web responsive.

05:03

En este video utilizaremos los campos de texto de HTML5.

05:56

Hora de trabajar con los estilos y Media Queries para nuestro formulario.

Section 8: jQuery para Responsive Web Design
06:09

En este video veremos como agregar un Slider, los enlaces a los Slider que se muestran en el video están en el área de Material complementario.

05:27

Uno de los requerimientos principales para todo programador de Responsive Design es hacer un video Responsive, aquí te digo como. Las librerías así como el video de muestra, están en la carpeta de enlaces externos.

04:27

Continuamos nuestra serie de requerimientos para Responsive design, otro importante son las tablas, aquí te muestro como hacer una, enlace a la librería en material complementario.

04:53

En este video te mostraré como crear un lightbox y galeria responsive.

03:24

Es hora de hacer nuestra navegación amigable a dispositivos móviles, enlace a la librería en la sección de material externo.

04:33

En este video culminaremos nuestra navegación responsive.

07:36

En este video crearemos un formulario con jQuery avanzado. Enlaces a la librería en material complementario.

Section 9: CSS, Gestos, HTML5 Boilerplate, Introducción a Frameworks
04:35

En este video crearemos una animación con CSS3.

06:31

En este video veremos como sobrellevar el efecto hover en un dispositivo movil

05:39

En este video daremos un tour de algunas de las caracteristicas de HTML5 Boilerplate para móviles

07:53

En este video daremos un tour de algunas de las caracteristicas de HTML5 Boilerplate para móviles

02:45

En este video veremos una introducción de que son y que incluyen los Frameworks de CSS

Section 10: Twitter Bootstrap
04:12

En este video descargaremos Twitter Bootstrap, el framework de CSS más popular del mundo.

11:19

En este video crearemos todo el HTML para nuestro diseño y utilizaremos las clases de Bootstrap.

02:48

Es momento de realizar nuestra navegación con Twitter Bootstrap

06:59

Editar el CSS de Bootstrap es muy fácil, aquí verás como.

07:27

En este video agregaremos los últimos detalles de nuestro diseño con Bootstrap

Section 11: ZURB Foundation
02:05

En este video daremos nuestros primeros pasos con ZURB Foundation el Framework de Front End mas avanzado del mundo.

06:26

En este video comenzaremos a escribir el HTML para nuestro proyecto.

04:06

En este video aprenderás las classes para maquetar con Foundation

01:06

En este video aprenderás como crear una navegación con ZURB Foundation

07:36

En este video editaremos el CSS de Foundation

03:39

En este video trabajaremos con los Media Queries para ZURB Foundation

04:24

En este video conocerás el porque ZURB Foundation es el Framework mas avanzado del mundo.

Section 12: Conclusión y a donde ir de aquí
Conclusión y a donde ir de aquí
01:49

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