Resumen layouts

El layout es la organización de nuestra página, es un elemento de diseño que nos indica dónde van a ir los diferentes elementos.

Aquí tenemos ejemplos de diferentes layouts:

https://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/

https://websitesetup.org/website-layouts/

Para diseñar los layouts normalmente se utilizan herramientas de wireframing. Hay algunas online:

https://wireframe.cc/

https://www.lancetalent.com/blog/top-5-herramientas-wireframes-ch/

O podemos hacerlo directamente en una libreta.

Para implementar nuestro layout usaremos las etiquetas div o las nuevas etiquetas semánticas:

Elementos semánticos

Que nos permitirán crear nuestro layout:

https://www.w3schools.com/html/html_layout.asp
https://www.w3schools.com/css/css_website_layout.asp

Hoy hemos visto la manera más sencilla que es utilizando float:

https://www.w3schools.com/css/css_float.asp

Pero más adelante veremos otras maneras de hacerlo. Dentro de trifulcas podéis encontrar varios ejemplos:

https://trifulcas.com/layout-one-page/

https://trifulcas.com/layout-semantico-2/

Y una búsqueda por internet os mostrará miles de páginas que tratan el tema:

https://www.geeksforgeeks.org/html-layout/

https://css-tricks.com/the-holy-grail-layout-with-css-grid/

Publicado por

Juan Pablo Fuentes

Formador de programación y bases de datos