logo 3con14 css cod css
  • CSS
  • Conceptos
  • Selectores
  • Unidades, Color
  • Modelo de cajas
  • Posicionamiento
  • Textos, Enlaces
  • Listas, Menús
  • Tablas, Columnas
  • Diseño (Layout)
    • Grid Layout
    • Flex Box
    • Media queries
  • Imagen, Filtros, ...
  • Movimientos
    • Transformaciones
    • Transiciones
    • Animaciones
  • Formularios
  • 🔴 TAREAS
 
 
icon html5
icon css3
mlogo 3con14 css cod

  • Inicio
  • Diseño (Layout)
  • Qué es el Layout

Qué es el Layout

El diseño de las páginas web habituales se divide en bloques: cabecera, menú, contenidos y pie de página. Visualmente, los bloques se disponen en varias filas y columnas. Por este motivo, hace varios años la estructura de las páginas HTML se definía mediante tablas.

El desarrollo de CSS ha permitido que se puedan realizar los mismos diseños sin utilizar tablas HTML. Las principales ventajas de diseñar la estructura de las páginas web con CSS en vez de con tablas HTML son tantas y tan importantes que no quiero ni recordar el tiempo y el esfuerzo empleados cuando esto era así. Por eso, la estructura basada en tablas dió paso a la estructura basada exclusivamente en CSS.

Layout: Término inglés con el que se conoce en entorno de diseño, los bocetos o maquetas. Es la ordenación y colocación de todos los elementos que componen una página web dentro de la ventana de un navegador. A la hora de realizar los diseños hay que tener en cuenta que un layout claro permitirá una navegación mucho más fácil y eficiente, además de una mejor experiencia de usuario.

Es importante tener el boceto / layout de nuestra web ya definido antes de ponernos manos a la obra, saber si vamos a agrupar el contenido en una sola columna, en dos, en cinco.. si va tener un ancho específico o si queremos que se adapte a cada resolución y dispositivo, etc.

Una vez sepamos esto, será más fácil empezar a teclear código. Un sitio que nos ayuda  a realizar nuestros bocetos es https://ninjamock.com, tanto para escritorio como para dispositivos móviles. Tiene planes de pago y también un plan gratuito que nos puede interesar para empezar. (Funciona mejor con el motor -webkit- de Google Chrome, Opera, etc...).

layout clasico

Ejemplo de boceto (creado con NinjaMock):

layout ninja

Layout

  • Qué es el Layout
  • -- Qué es Grid Layout
  • Propiedades: Grid container
  • Propiedades: Grid Items
  • -- Qué es CSS FlexBox
  • Propiedades: Flex container
  • Propiedades: Flex Items
  • -- Qué es Media querie
  • Ejemplos responsive

Recursos ...

  • Visual Studio code
  • Sublime Text
  • CSS LINT
  • Normalize

codepen

uniwebsidad

overapi

can i use

w3schools

mdn

Licencias ...

3con14─LAB 1998 - 2021
www.3con14.biz
(cc) Jesús Plaza M.
─ Otros Reconocimientos ─

Visitas ...

Hoy ... 13

Ayer ... 32

Week 158

Mes ... 964

TOTAL ... 44389

  • CSS
  • Conceptos
  • Selectores
  • Unidades, Color
  • Modelo de cajas
  • Posicionamiento
  • Textos, Enlaces
  • Listas, Menús
  • Tablas, Columnas
  • Diseño (Layout)
    • Grid Layout
    • Flex Box
    • Media queries
  • Imagen, Filtros, ...
  • Movimientos
    • Transformaciones
    • Transiciones
    • Animaciones
  • Formularios
  • 🔴 TAREAS