Layout comienza su viaje desde los tiempos en queel código se escribió en HTML y el marcado se realizó mediante tablas. Con el tiempo, esto se alejó y el marcado se cambió a CSS. Ahora hay varios tipos de diseño. Flex-box, Bootstrap toolbox y las últimas Grids, que brindan grandes oportunidades a los creadores, pueden considerarse modernas. Una de las opciones de transición en el desarrollo de la Web es el diseño de bloques. Anteriormente se usaba para crear marcas para toda la página, pero ahora se considera obsoleto, pero aún se usa ampliamente en casos especiales.
¿Qué es el diseño de bloques?
Ella reemplazó lo obsoleto e imperfectotabular. La página está compuesta por las llamadas capas o bloques, y la etiqueta <div> de cierre sirve como bloques de construcción para esto. Esta es una etiqueta de bloque que abarca todo el ancho del elemento principal y la altura para ajustarse al contenido. Posteriormente, esta tipografía se denominó "maravillosa". La base para la orientación de la página son las llamadas clases.
Por el momento, este tipo de diseño es significativamenteestá en desuso y la etiqueta <div> en sí solo debe usarse según lo previsto. Han aparecido muchas etiquetas semánticamente correctas, que facilitan la navegación por el código. Por ejemplo, hay una etiqueta <nav> especial para el menú de navegación.
Para mayor claridad, un diseño de bloque se puede representar de la siguiente manera:
<div class = "envoltorio">
<div class = "element1"> contenido </div>
<div class = "element2"> contenido </div>
<div class = "element3"> contenido </div>
</div>
Div con envoltorio de clase escontenedor principal o, en otras palabras, un contenedor. Los elementos con la clase de elemento son los componentes básicos de nuestra estructura compleja. Tenga en cuenta que en el código se utiliza un margen diferente del margen en comparación con el elemento padre para mayor claridad, para facilitar la definición de la estructura y jerarquía de los elementos.
Usando tablas
El diseño de tablas de los sitios ha sidoun dolor de cabeza para todos los programadores. Después de cambiar al modelo de bloques de sitios, el uso de tablas en general, incluso para el propósito previsto, no se alentó durante algún tiempo.
Este enfoque es ciertamenteinapropiado e incluso dañino. Obliga a hacer cosas simples de formas más complejas e inconvenientes. Ahora la tabla solo se usa para mostrar los datos relevantes. En otras palabras, según su finalidad directa.
Separación de roles
Si antes toda la construcción se hizo en HTML,el diseño en bloques trajo consigo una separación completa de roles. En este momento, HTML solo sirve para marcado, formato lógico y estructura de alambre de página. Los estilos se eliminan por completo y se incluyen en un archivo separado incluido en el documento. CSS se utiliza para posicionar los elementos y crear un diseño atractivo y receptivo. Para hacer referencia al bloque se utilizan clases, a las que se les da el nombre del elemento. Por ejemplo, para el bloque de encabezado, asignaremos la clase de encabezado. También facilita la navegación por el código. Hoy en día, esto se hace en parte mediante etiquetas especializadas que aparecieron en HTML5.
Usando bloques <div>
Para el diseño de bloques, la etiqueta se usa activamente<div>. Es similar a un ladrillo en un edificio. Si bien constituye la base, la estructura del sitio, no es, sin embargo, la única. Como puertas, ventanas, ventilación, balcones y similares, se utilizan otros elementos HTML para el diseño. Estos son enlaces, formularios, imágenes, listas y tablas.
El uso de la etiqueta <div> creó el códigomás compacto e intuitivo. La transición a un diseño de bloque permitió deshacerse de html de lo innecesario, es decir, de los estilos. Hizo posible eliminar por completo el diseño de tabla sobrecargado y difícil de navegar.
Utiliza activamente el diseño de bloques CSS.Con la ayuda de las herramientas disponibles, puede crear cualquier construcción de página con precisión de píxeles. Este diseño se llama píxel perfecto. Implica una combinación perfecta del sitio con el diseño. En la foto de arriba, puedes ver que con el diseño de bloques, no todo es tan simple. Al principio, era simplemente imposible prescindir de las mesas. Se utilizaron para crear la construcción de página básica y se aplicaron bloques a elementos individuales. Esto fue hasta que aprendieron a establecer la altura de los bloques.
Ventajas
El diseño de bloques del sitio tiene las siguientes ventajas:
- No hay bordes transparentes de píxeles de ancho, como fue el caso con el diseño de la tabla.
- Los bloques son fáciles de colocar entre sí.
- Los bloques se pueden cambiar de tamaño para crear diseños receptivos.
- La capacidad de superponerse no rompe el diseño de la página, pero le permite agregar efectos interesantes.
Desarrollo adicional
Actualmente, el diseño de bloque del div esobsoleto y tiene un uso limitado, solo como un caso especial para ciertas situaciones. Fue reemplazado por posicionamiento y ajuste en el diseño. Tenían muchas deficiencias, pero en general permitían más que el diseño de bloques.
A continuación, apareció una construcción usandoelementos de bloque en línea. Esto facilitó enormemente el trabajo de los programadores. Este método tiene los beneficios de ambos tipos de bloques y permite un diseño más receptivo y receptivo. Vale la pena señalar que todos estos métodos, de una forma u otra, consistían en un elemento div, que le dio el nombre de "diseño maravilloso".
Actualmente para construir la páginausa flex-box y bootstrap. Reducen significativamente el código y hacen que sea más rápido y fácil crear diseños receptivos de alta calidad. Le permite mover bloques sin romper toda la página.
La nueva tecnología está a la vanguardia del progreso:Cuadrículas. Le permite crear rápida y fácilmente diseños de cualquier complejidad. Y los bloques, el envoltorio, el posicionamiento, como sucedió con las tablas a su debido tiempo, se usan solo para su propósito previsto.
