curso basico de maquetacion web

Maquetación Web
Curso básico

Maquetación Web
Introducción a la maquetación web

Maquetación Web . -Comenzamos este Curso básico de Maquetación Web, en el que veremos paso a paso desde cero que es la Maquetación Web, repasaremos conceptos generales de CSS, veremos el pasado, presente y futuro de la Maquetación Web desde el Pixel Perfect de antaño, pasando por el Responisive Design, hasta lo mas nuevo como los modelos de cajas flexibles Flexbox o el Grid Layout

Todos estos nuevos modelos de maquetación serán tratados mas extensamente, en sucesivos cursos que iremos publicando tanto aquí mismo, como en nuestro canal de Youtube, en este Curso de maquetación Web básica serán tratados aunque en menor profundidad, sin más comenzamos.

La Maquetación web, es la técnica por la cual vamos a realizar la distribución de los elementos en nuestra página de acuerdo a nuestro diseño web.

La maquetación web se basa en conceptos mucho más cercanos al diseño que a la programación web, por lo que con este anexo aplicaremos los fundamentos del HTML5 que hemos aprendido hasta ahora, si no es así, echale un vistazo a nuestro Curso de Html5, ademas de nuevas técnicas de CSS3 y verás con ejemplos prácticos cómo funciona La Maquetación web

Maquetación Web con tablas

En los inicios la Maquetación web, se basaba únicamente en el uso de tablas para acomodar los elementos de una página web, esto además de ser enormemente tedioso y difícil de comprender si no se dominaban las tablas en HTML.

El problema de las tablas es que generaban un página muy encorsetada. Además, algunos buscadores encontraban problemas al analizar la estructura de la página.

Su uso actual se basa únicamente para la maquetacion de newsletter, dada la imposibilidad de mandar hojas de estilos adjuntas y aprovechando ese encorsetamiento que hablábamos antes, que hace que todos los gestores de correo muestren los newsletter de modo similar.

Dado este poco uso, no nos vamos a parar en la Maquetación web con tablas dejando para un capitulo posterior la maquetacion de newsletter.

Maquetación Web
Conceptos básicos

1.-Por lo general, la maquetación se realiza sobre elementos con propiedades de bloque. Normalmente div,s, header, section, article, etc…, pero también lo podemos hacer con el resto de las etiquetas, que html5 provee, párrafos, listas, o con el propio body.

2.-Por defecto los elementos de bloque ocupan todo el ancho del elemento que lo contiene, y su alto se ajusta al del contenido, siendo cero el ‘height’ si no existe contenido.

En este ejemplo:

Que tiene esta salida:

Maquetacion web

Vemos que los elementos p al tener propiedades de bloque, ‘display:block’, ocupan todo el ancho de su contenedor, en este caso el body, es por eso que se colocan uno debajo del otro.

3.-Los elementos en linea , ‘display:in-line’, por el contrario ocupan sólo el espacio de su propio contenido, así:

Siendo esta su salida en la web:

Elementos in line

Aquí vemos que al ocupar sólo el espacio que ocupa la propia etiqueta, se colocan una al lado de la otra, ya que su ‘tendencia natural’, por así decirlo es estar ‘en linea’, valga la simplificación.

4.-Cualquier elemento HTML, tiene dos propiedades CSS que definen su tamaño: ancho (width) y alto (height)

Los valores para estas medidas, pueden ser expresados así:

  • Tamaños absolutos, utilizando px, cm, etc…
  • Tamaños relativos al elemento que lo contiene, utilizando porcentajes (%).
  • Tamaños relativos a la fuente, utilizando em.

5.-Todas las etiquetas tienen un valor por defecto. Por ejemplo, un párrafo, por defecto, tiene un ancho del 100% y un alto ajustado al contenido.

6.-Los elementos de bloque pueden ser centrados, siempre que el tamaño lo permita, osea que no ocupen el 100% de su padre, dándole al margen (margin) derecho e izquierdo el valor auto, lo que podríamos traducirlo libremente como que el margen izquierdo y derecho son iguales, osea si hay el mismo margen a izquierda y derecha de un elemento, este está en el centro.

Asi:

Lo vemos:

alinear centro

7.-Otra consideración a tener en cuenta es que podemos alterar las propiedades que un elemento de HTML, tiene por defecto con la propiedad display, así un elemento con propiedades de bloque como una la p, del ejemplo anterior, podemos hacer que coja propiedades inline así;

Viendose asi:

inline

Como vemos las p abandonan las propiedades de bloque y se muestran en linea al darle display: inline.

Lo mismo podemos hacer con una propiedad inline por defecto como por ejemplo una imagen:

Que se ve asi por defecto:

img por defecto

Y que podemos cambiarle la salida modificandole la propiedad ‘display’ por defecto así:

Viéndose así al cambiarle el display

imagen display block

Así que sin más preámbulos pasemos al próximo capitulo donde veremos la maquetacion con float

Capítulos del curso

Maquetación Web

1 julio, 2018
Flexbox

Flexbox
Curso básico de Maquetación Web

Flexbox. - Capitulo 5 del Curso básico de Maquetación Web, en el que veremos las propiedades del modelo de cajas Flexbox ☎ 689 89 42 67
1 julio, 2018
Display: flex

Display: flex
Curso básico de Maquetación Web

Display: flex. - Capitulo 4 del Curso básico de Maquetación Web, en el que veremos en profundidad el modelo de cajas flexibles Flexbox ☎ 689 89 42 67
11 junio, 2018
float maquetar

Float
Curso básico de Maquetación Web

Float. - Capitulo 3 del Curso básico de Maquetación Web, La Maquetación web con float, con sus pros y contras. Pasemos a verlo en profundidad ☎ 689 89 42 67
18 abril, 2018
inline-block

Display: inline-block
Curso básico de Maquetación Web

Segundo capítulo del Curso básico de Maquetación Web, dedicado a la Maquetación web con display: inline-block, un método tradicional de maquetar que vamos a intentar tratarlo en profundidad
11 abril, 2018
curso basico de maquetacion web

Maquetación Web
Introducción a la maquetación web

Comenzamos este Curso básico de Maquetación Web, en el que veremos paso a paso desde cero que es la Maquetación Web, repasaremos conceptos generales de CSS, veremos el pasado, presente y futuro de la Maquetación Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *