sábado, 25 de junio de 2016

Curso Maquetación web con Flexible Box Layout Module



En diseño web, la rejilla fluida está cambiando y el uso de algunas propiedades va desapareciendo poco a poco para dar paso a un uso más inteligente del CSS mediante el Flex Grid. Estas propiedades nos ayudan a poder manejar el DOM de una manera más eficiente y óptima, para manejar la visualización de los elementos HTML de una manera más sencilla y elegante, sin perder de vista que el resultado sea responsive. En este curso aprenderás cuáles son las propiedades del Flex Grid, cómo se usan y cómo implementarlas en un proyecto real de manera sencilla.

Introducción a Maquetación con Flexible Box Layout Module
A lo largo de este capítulo explicaremos qué es el Flexible Box Layout, para qué se usa y cuáles son los beneficios que podemos obtener a la hora de usar este tipo de estructuras sobre otras existentes actualmente en la web.

    Objetivos de Maquetación con Flexible Box Layout Module   00:49
    Archivos de Maquetación con Flexible Box Layout Module   01:01
    Qué es Flex Grid Layout y por qué debemos usarlo   02:07
    Requisitos técnicos necesarios para realizar el curso   00:40

Establecer una estructura base con Flexible Box Layout
En este capítulo explicaremos cómo plantear una estructura web mediante Flexible Box Layout teniendo en cuenta un caso real de diseño. Veremos cuál es la sintaxis que se utiliza en este tipo de estructuras y cómo funciona.

    Elementos que configuran el Flex Box Grid Layout   02:19
    Terminología relacionada con Flex Box Layout Module   02:36

Propiedades del elemento contenedor de Flexible Box Layout
A lo largo de este capítulo vamos a ver parte de las propiedades existentes en las estructuras de Flexible Box Layout y cuáles son sus atributos. Mediante un ejemplo real veremos cómo aplicarlas y su efecto en el navegador web.

    La propiedad display y sus valores en una rejilla flexible   02:21
    Flex-flow en plantillas de rejilla flexible   03:47
    Alineación vertical de elementos HTML: justify-content   02:26
    Alineación horizontal y uso con la propiedad align-items   02:00

Propiedades de los ítems hijos en Flexible Box Layout
En este capítulo vamos a ver el resto de las propiedades existentes en las estructuras Flexible Box Layout y cuáles son sus atributos. Mediante un ejemplo real veremos cómo aplicarlas y su efecto en el navegador web.

    Order y su valor numérico nos ayudará con el responsive   03:07
    La forma corta de flex nos ayudara con los elementos HTML   00:37
    Flex-grow controla las dimensiones de un elemento   02:42
    Flex-shrink especificará el tamaño del elemento   01:52
    Flex-basis define el tamaño predeterminado de un elemento   01:18
    Atributos que no afectan y compatibilidad entre navegadores   01:39
    Compatibilidad entre navegadores   00:54

Ejercicio práctico: diseño de un proyecto web real
A lo largo de este capítulo trabajaremos sobre un caso real de diseño web. Definiremos una estructura acorde al Flexible Box Layout, sus atributos y propiedades y jugaremos con el responsive para crear nuestro proyecto web.

    Objetivo del ejercicio con Flexible Box Layout Module   00:46
    Definición de la estructura HTML de nuestro diseño   03:41
    Responsive y flexgrid, elementos para crear proyectos web   02:04
    Implementación de Flexible Box Layout con nuestro diseño   06:33
    Despedida de Maquetación web con Flexible Box Layout Module   02:05

IMAGENES




DATOS TECNICOS
.MP4 | 720p
129.7 MB | Spanish
Formadores: Zuriñe Menéndez Cayrols
22 Videos (47 min)
Software: CSS
Incl. Archivos Base
Fecha de publicación: 31-may-2016
Video2Brain 



ENLACE DE DESCARGA


CONTRASEÑA: discoduroweb

0 comentarios

Publicar un comentario

¡Tu comentario es importante para mantener el blog!

Si quieres insertar una imagen usa este código:
[img]URL de la imagen[/img]

Si quieres insertar un video de YouTube o Vimeo usa este código:
[video]URL del video[/video]

No incluyas material para adultos, ni vulgar u ofensivo; tampoco contenido con odio, racismo o discriminación, de lo contrario tu comentario será eliminado.