Autor: Juan Pablo Fuentes
Layout flex responsive
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/layoutflex.css"> </head> <body> <header> <h1>Cabecera</h1> </header> <main> <aside> <ul> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> </ul> </aside> <section> <h1>Contenido</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, esse! Hic magni voluptate quia, ut eligendi pariatur deleniti. Numquam, perspiciatis. Eius soluta ipsam qui nisi, ea cum quod atque pariatur?</p> </section> </main> <footer> <p>Pie de página</p> </footer> </body> </html>
main{ display: flex; } @media (max-width:728px){ main{ flex-direction: column; } } @media (max-width:400px){ footer,aside{ display: none; } }
Comienzo maquetación Flexbox
html:
<div class="flex"> <div class="first"> </div> <div> </div> <div> </div> <div> </div> </div> <div> <div> </div> </div> <div> <div> </div> </div> <div> <div> </div> <div> </div> <div> </div> </div> <div> <div> </div> <div> </div> <div> </div> </div>
Css:
div div{ background-color: black; width: 200px; margin-left: 20px; } .flex{ display: flex; justify-content: space-between; align-items: center; } .first{ margin-right: 250px; height: 100px; }
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://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:
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:
Mini layout simple
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Layout</title> <link rel="stylesheet" href="css/layout.css"> </head> <body> <div id="cabecera"> <h1>Esto es la cabecera</h1> </div> <div id="barra"> <ul> <li><a href="">Inicio</a></li> <li><a href="">Contacto</a></li> <li><a href="">Productos</a></li> <li><a href="">faq</a></li> </ul> </div> <div id="contenido"> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p> </div> <div id="pie"> <p>(c) Jotapé 2021</p> </div> </body> </html>
css:
*{ margin:0; } #cabecera{ background-color: pink; height: 150px; margin: 0; padding: 5px; } #barra{ background-color: turquoise; width:100px; float:left; min-height: 500px; padding: 20px; } #barra ul{ list-style: none; margin:0; padding: 5px; } #contenido{ background-color: wheat; margin: 0; min-height: 500px; padding: 20px; } #pie{ background-color: black; color: white; height: 50px; clear:left; margin: 0; }
Semántico:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Layout</title> <link rel="stylesheet" href="css/layout.css"> </head> <body> <header> <h1>Esto es la cabecera</h1> </header> <aside> <ul> <li><a href="">Inicio</a></li> <li><a href="">Contacto</a></li> <li><a href="">Productos</a></li> <li><a href="">faq</a></li> </ul> </aside> <main> <section> <h1>Artículo 1</h1> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p> </section> <section> <h1>Artículo 2</h1> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda quasi explicabo, quibusdam quas obcaecati aliquam mollitia ad rerum maxime facere dolor, earum nisi in deleniti sit tempore nam expedita omnis.</p> </section> </main> <footer> <p>(c) Jotapé 2021</p> </footer> </body> </html>
*{ margin:0; } header{ background-color: pink; height: 150px; margin: 0; padding: 5px; } header h1{ text-align: center; } aside{ background-color: turquoise; width:100px; float:left; min-height: 500px; padding: 20px; } aside ul{ list-style: none; margin:0; padding: 5px; } main{ background-color: wheat; margin: 0; min-height: 500px; padding: 20px; } footer{ background-color: black; color: white; height: 50px; clear:left; margin: 0; } section{ float:left; width: 40%; margin-left: 10px; }
Páginas para aprender programación
Para niños que empiezan:
Programando en bloques y su correspondencia en javascript:
https://developers.google.com/blockly/
Proyectos hechos con el anterior:
https://www.madewithcode.com/projects/
App que explica conceptos básicos:
https://grasshopper.app/es_419/
Para aprender lenguajes de programación gratis:
Más cursos gratis:
Orientado a Python y big data:
Completísimos cursos de HTML, JS y SQL:
https://es.khanacademy.org/computing/computer-programming
Una aplicación para repasar día a día:
¿Qué lenguaje de programación usar?
Manuales para empezar con javascript:
Recopilatorios de tutoriales:
Algunas ideas para empezar a programar de adulto (está muy bien):
12 aventuras gráficas gratuitas
Formateo fecha JS y trucos
https://dev.to/shafiemoji/format-date-and-time-with-javascript-13hf
https://dev.to/shafiemoji/format-time-and-date-relatively-with-javascript-47ap
https://kais.blog/p/10-awesome-javascript-string-tips-you-might-not-know-about
https://hackernoon.com/asynchronous-javascript-for-beginners-q11231ep?source=rss
Utilidades y trucos para JS
Destructuring en JS:
https://dev.to/codingnninja/a-simple-guide-to-javascript-destructuring-3o8o
Maneras de usar Math.Random():
Trucos JS:
https://dev.to/noseratio/a-few-handy-javascript-tricks-an9