Diseño responsivo con cajas flexibles CSS3
4.3 (10 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.
177 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Diseño responsivo con cajas flexibles CSS3 to your Wishlist.

Add to Wishlist

Diseño responsivo con cajas flexibles CSS3

Conoce la poderosa herramienta de las cajas flexibles o flex-box para hacer páginas responsivas
4.3 (10 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.
177 students enrolled
Last updated 6/2016
Spanish
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • 4 Articles
  • 33 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Crear una página a base de las cajas flexibles
  • Cambiar la dirección de las cajas flexibles de horizontal a vertical y el orden de las cajas internas
  • Justificar y alinear las cajas internas
  • Cambiar el orden de las cajas internas individuales
  • Cambiar la proporción del ancho y del largo de los items flexibles
  • Crear páginas responsivas con cajas flexibles
  • Aplicar transiciones en las cajas flexibles
  • Crear una galería a partir de cajas flexibles
  • Crear un menú responsivo
View Curriculum
Requirements
  • Conocimientos medios de HTML y CSS
  • Deseable tener conocimientos básicos de HTML5 y CSS3
Description

En este curso aprenderás a desarrollar páginas responsivas por medio de la poderosa herramienta de las cajas flexibles o flex-box. Nos basaremos en la especificación más reciente de la W3C de 2014 de las "flex-box". Analizaremos desde las bases de este esquema, que nos permitirá hacer formatos o layouts, así como la forma de alinearlos vertical u horizontalmente, centrarlas, cambiar el orden de las cajas internas o ítems flexibles, así como las propiedades para "estirarlas", rotarlas y adaptarse de forma natual, las cajas internas al contenedor flexible.

Haremos ejemplos de páginas responsivas iniciando desde cero, hasta llenarlas de contenido. Realizaremos una galería responsiva con diferentes imágenes, que se adaptarán al tamaño del dispositivo, adaptándose tanto a tabletas como a teléfonos inteligentes. También haremos un ejemplo de cómo animar a las cajas flexibles por medio de las propiedades de transición de los estilos en cascada nivel tres. Por último codificaremos un menú horizontal con cajas flexibles, que cambiará su orientación a vertical cuando se visualice en pantallas pequeñas, como la de los teléfonos, donde es complicado los menús largos.

Para que puedas aprovechar este curso, es necesario que tengas conocimientos mínimos de HTML y CSS. También es deseable que conozcas HTML5 y CSS3, aunque no es indispensable.

Para tomar este curso necesitas un editor de código como SublimeText. Brackets, Aptana o Dreamweaver y un navegador moderno, así como muchas ganas de aprender.


Who is the target audience?
  • Diseñadores web
  • Desarrolladores web
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 30 Lectures Collapse All 30 Lectures 02:31:33
+
Bienvenida al curso Crear páginas responsivas con flow-box de CSS3
1 Lecture 08:50

El objetivo de este curso es que aprendas a utilizar las cajas flexibles (o flex-box) de los estilos en cascada nivel 3 para realizar páginas responsivas. Para que puedas aprovechar este curso es recomendable que tengas conocimientos medios de HTML y CSS, así como es deseable que poseas conocimientos básicos de HTML 5 y CSS3.

Preview 08:50
+
Introducción a las Cajas Flexibles o flex-box de CSS3
8 Lectures 39:22

Por medio de la nueva especificación de las cajas flexibles de CSS3 (2014) nos será muy sencillo realizar páginas responsivas y cualquier diseño de páginas web, tanto para computadoras de escritorio, como para dispositivos móviles.

Preview 07:21

Por medio de la propiedad display y su valor flex, podemos hacer flexible las cajas contenidas dentro de la misma.

La propiedad display en el manejo de las cajas flexibles con CSS3
05:43

Por medio de la propiedad direction y de flex-direction podremos modificar la dirección de los ítems flexibles dentro del contenedor. La dirección podrá ser vertical y horizontal e incluso inversas.

Cambiar la dirección de las cajas flexibles
03:33

Con la propiedad justify-content justificamos los elementos flexibles si es que estos no abarcan todo el espacio del eje principal.

Los posibles valores son::

  • flex-start - Valor por omisión. Alinea al inicio del eje principal.
  • flex-end - Los items son alineados al final del contenedor flexible.
  • center - Los items son alineados con respecto al centro del contenedor.
  • space-between - Los items son alineados en el eje pegado a sus costados.

space-around - Los items son colocados proporcionalmente.

Justificar las cajas flexibles en el eje principal
04:12

Con la propiedad aline-items podemos alinear en el eje complementario. Los valores son:

  • stretch - Valor por omisión. Estira el item para abarcar el contenedor.
  • flex-start - Los items son colocados al inicio del contenedor.
  • flex-end - Los items son colocados al final del contenedor.
  • center - Los items son centrados en el eje complementario.
  • baseline - Los items son colocados en la parte superior del contenedor.
Alinear los elementos flexibles en el eje cruzado o complementario
04:17

La propiedad flex-wrap especifica si los elementos flexibles deben “envolverse” o no, si no hay suficiente espacio para ellos en el eje principal.

Los valores posibles son los siguientes:

  • nowrap - Valor por defecto. Los elementos flexibles no se envuelven.
  • wrap - Los elementos flexibles se envuelven si es necesario.
  • wrap-reverse - Los elementos flexibles se envuelven, si es necesario, en orden inverso.
Crear diferentes lineas con flex-wrap
04:01

La propiedad align-content modifica la propiedad flex-wrap. Es similar a la propiedad align-items, pero en vez de alinear los items, alinea las lineas (renglones) flexibles.

  • stretch - Valor por defecto. Líneas estiran para ocupar el espacio restante.
  • flex-start - Líneas están llenas hacia el inicio del contenedor flexible.
  • flex-end - Líneas están llenas hacia el final del contenedor flexible.
  • center - Líneas de centro se embalan hacia el centro del contenedor.
Modificar los espacios entre las líneas (renglones) de los ítems
06:16

La propiedad flex-flow resume a las propiedades flex-direction y flex-wrap.

Ambas propiedades definen al eje principal y al eje complementario o cruzado.

Su valor por omisión son: row y nowrap.

flex-direction: row, row-reverse, column, column-reverse.

flex-wrap: nowrap, wrap, wrap-reverse.

La propiedad flex-flow para controlar los ejes
03:59
+
Propiedades para los ítems flexibles
7 Lectures 23:55

La propiedad order determina el orden del elemento flexible dentro del contenedor. Se pueden tener valores negativos.

.primero {

-webkit-order: -1;

order: -1;

}

Cambiar el orden de los ítems de la caja flexible
03:59

Ajuste de margen margin: auto; absorberá espacio extra. Puede ser utilizado para empujar los elemento flexibles en diferentes posiciones.

El comportamiento de la propiedad margin en las cajas flexibles
04:11

La propiedad align-self anula la propiedad del contenedor flexible align-items para ese elemento. Tiene los mismos valores posibles que la propiedad align-items.

  • stretch - Valor por omisión. Estira el item para abarcar el contenedor.
  • flex-start - Los items son colocados al inicio del contenedor.
  • flex-end - Los items son colocados al final del contenedor.
  • center - Los items son centrados en el eje complementario.
  • baseline - Los items son colocados en la parte superior del contenedor.
La propiedad align-self para la alineación individual de los ítems
03:49

La propiedad flex-grow especifica la longitud del elemento flexible, en relación con el resto de los elementos en el interior del mismo contenedor.

.item1 { -webkit-flex-grow: 2; flex-grow: 2;}

.item2 { -webkit-flex-grow: 1; flex-grow: 1;}

.item3 {-webkit-flex:-grow 1; flex-grow:1;}


En el siguiente ejemplo, el primer elemento de la flexión consumirá 2/4 del espacio libre, y los otros dos elementos flexibles consumirá 1/4 del espacio libre de cada uno.

La propiedad flex-grow para el ancho proporcional de los items
03:41

La propiedad flex-shrink especifica cómo el item se reducirá o encogerá con respecto al resto de los elementos flexibles dentro del mismo contenedor.

No acepta números negativos.

No funciona en IE10-

Para Safari 6.1- necesitamos el prefijo -webkit-

La propiedad flex-shrink para reducir las dimensiones del ítem flexible
02:44

La propiedad flex-basis especifica el valor inicial en el eje principal (por lo general es el ancho (width) pero depende de la dirección de los ejes.

Si el elemento no es flexible, este comando no afecta en nada.

Acepta el valor de “auto”.

No funciona en IE10-

Para Safari 6.1- necesitamos el prefijo -webkit-

La propiedad flex-basis para establecer las dimensiones del ítem flexible
02:39

La propiedad flex es la forma abreviada de escribir los comandos flex-grow, flex-shrink y flex-basis. Los dos últimos parámetros son opcionales..

Es recomendable que utilice el comando corto. Este comando deshabilita a los demás.

El valor por default es: 1 1 auto

El valor none equivale a: 0 0 auto

Es soportado por IE10 con el prefijo -ms-

La propiedad flex para cambiar los ítems de un contenedor flexible
02:52
+
Crear páginas responsivas con flex-box de CSS3
9 Lectures 01:15:53

Con este video iniciamos la construcción de una página resposnsiva con la caja flexible.

Crea la estructura flexible con flex-box
09:09

En este video añadiremos los media querys para hacer la página responsiva y añadiremos contenidos y estilos.

Hacer una página responsiva con flex-box de CSS3
10:02

En este video iniciamos una segunda página responsiva con cajas flexibles o flex-box.

Crear una segunda página flexible con flex-box
10:10

En este video añadiremos los contenidos y sus estilos correspondientes, antes de hacer a nuestra página responsiva.

Agregar contenido a la página realizada con flex-box
07:00

En este video, corregiremos algunos problemas y añadiremos los media-query para convertir la página en responsiva.

Hacer la pagina responsiva con los media-query
09:47

En este video iniciaremos una galería responsiva muy sencilla por medio de las cajas flexibles o flex-box de CSS3.

Galería flexible utilizando flex-box de CSS3
06:22

En este video terminaremos la sencilla galería de fotos por medio de las cajas flexibles o flex-box de CSS3

Galeria flexible utilizando flex-box, segunda parte
05:52

En este video haremos tres secciones flexibles y las animaremos por medío de una transición de CSS3.

Hacer una animación con cajas flexibles o flex-box de CSS3
07:36

Por regla general, los menús horizontales son complicados de manejar en un dispositivo pequeño, así que necesitamos convertirlo en vertical. Por medio de las cajas flexibles, nos será muy sencillo efectuar este cambio.

Crear un menú responsivo con cajas flexibles o flex-box con CSS3
09:55
+
A manera de conclusión
5 Lectures 03:34
Ejercicios del curso Introducción a Crear páginas responsivas con flex-box
00:05

Despedida del curso Crear páginas responsivas
03:19

En esta sección encontrarás los apuntes de apoyo del curso en formato PDF

Apuntes: Conceptos generales
00:03

En esta sección encontrarás los apuntes de apoyo del curso en formato PDF

Apuntes: Propiedades a las cajas flexibles
00:03

En esta sección encontrarás los apuntes de apoyo del curso en formato PDF

Apuntes: Consideraciones de los elementos flexibles
00:03
About the Instructor
Francisco Javier Arce Anguiano
4.3 Average rating
871 Reviews
12,849 Students
36 Courses
Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.