//Usar letras, números, $, _ //Nombre no puede empezar por número //Case sensitive, sensible a mayúsculas y minúsculas //Válidos let juan=0; let $juan=5; let _juan=56; let juan1980=43; let juan1980_es_un_crack=43; let precio_unidad=900; let estoeslacaña=21; //No recomiendo usar acentos o ñ en nombres de variables //No válidos //let 6juan=5; //let juan&=90; //Estas variables son diferentes; let Juan=10; let JUAN=20; let JuaN=30; console.log(juan+" | "+JUAN+" | "+JuaN+" | "+Juan); //Error típico let Precio=200; let cantidad=5; console.log(cantidad*Precio); //Cuando usar mayúsculas //Nunca let sueldo_mensual=1200; let sueldomensual=1200; //Utilizar CamelCase: empezar en minúsculas y el inicio de cada palabra mayúscula let sueldoMensual=900;
Autor: Juan Pablo Fuentes
JS variables
//Variables //La forma tradicional var edad=15; //Esto no se hace muy mala práctica nombre="Juan"; //Crear variable ES6 let apellidos="Pérez"; //Crear constante ES6 const pi=3.1416; console.log(pi+" | "+typeof(pi)); //pi=4; //Esto da error console.log(pi); //No tipado: al declarar variables no especificamos el tipo let precio=100; //precio es de tipo number console.log(precio+" | "+typeof(precio)); //El tipo es Number precio="Muy caro"; //precio es de tipo String o cadena console.log(precio+" | "+typeof(precio)); let booleano=true; console.log(booleano+" | "+typeof(booleano)); let elementos=[1,2,3]; console.log(elementos+" | "+typeof(elementos)); //Esto es a efectos de ejemplo: NO HACER let multitipo=1; console.log(multitipo+" | "+typeof(multitipo)); multitipo=1123123; console.log(multitipo+" | "+typeof(multitipo)); multitipo=false; console.log(multitipo+" | "+typeof(multitipo)); multitipo="Hola que tal"; console.log(multitipo+" | "+typeof(multitipo)); multitipo=[1,2,3]; console.log(multitipo+" | "+typeof(multitipo)); //Resumiendo //Declaramos variables con let y const y NO se redeclaran let sueldo=3000; const irpf=.15; //Las variables no están tipadas pero deberíamos actuar como si lo estuvieran //El tipo lo obtenemos con typeof console.log(typeof(sueldo)); //Number //Los tipos básicos son: Number, String, boolean y object let numero=5; let cadena="Hola"; let bool=true; let objeto=[1,2,3]; //Las variables (let) pueden cambiar su valor. Las constantes (const) no sueldo=5000; irpf=.2 //Error
Mini ejercicio flex
Usando solo flexbox crear una fila con cuatro artículos que ocupen todo el ancho de la página y dentro de cada artículo una cabecera y debajo un botón centrado.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #contenedor { display: flex; justify-content: space-around; } #contenedor>div { background-color: bisque; background: linear-gradient(to right, bisque, #eacda3); flex-basis: 200px; border-radius: 20px 0; box-shadow: 7px 7px 5px #DDDDDD; } #contenedor h1 { text-align: center; } #contenedor>div>div { display: flex; justify-content: center; align-items: center; height: 100px; } </style> </head> <body> <div id="contenedor"> <div> <h1>Artículo</h1> <div><button>Pínchame</button></div> </div> <div> <h1>Artículo</h1> <div><button>Pínchame</button></div> </div> <div> <h1>Artículo</h1> <div><button>Pínchame</button></div> </div> <div> <h1>Artículo</h1> <div><button>Pínchame</button></div> </div> </div> </body> </html>
Tres artículos con espacio lateral
<div class="row"> <div class="col-md-2"></div> <div class="col-md-8 "> <div class="row"> <article class="col-md-4 bg-primary"> <h1>Artículo</h1> </article> <article class="col-md-4 bg-primary"> <h1>Artículo</h1> </article> <article class="col-md-4 bg-primary"> <h1>Artículo</h1> </article> </div> </div> <div class=" col-md-2"> </div> </div>
<div class="col-md-8 d-flex justify-content-around"> <article class="bg-primary"> <h1>Artículo</h1> </article> <article class="bg-primary"> <h1>Artículo</h1> </article> <article class="bg-primary"> <h1>Artículo</h1> </article> </div>
Usabilidad
Definición:
https://es.semrush.com/blog/usabilidad-web-principios-jakob-nielsen/
https://kschool.com/blog/usabilidad-ux/sabes-la-usabilidad-la-experiencia-usuario/
https://boluda.com/tutorial/25-puntos-clave-de-la-usabilidad/
La fuente de todo esto:
Ejemplos:
Caminos del deseo (Desire paths)
Así no:
Así sí:
Definición de UX:
Enlaces interesantes:
Como ganar el concurso a la peor web del año:
https://uxdesign.cc/21-tips-for-winning-the-worst-site-2021-award-5e3cee7f5551
https://raiolanetworks.es/blog/heatmap-o-mapa-de-calor-para-tu-web/
Selectores básicos CSS
<!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/selectores.css"> </head> <body> <header> <div><img src="img/baldosa.jpg"></div> <div> <h1>hola</h1> </div> <ul> <li> <h1>Que pasa??</h1> </li> </ul> <h1>Hola</h1> <h1>Hola</h1> </header> <h1>Hola que tal estamos. Yo muy bien.</h1> <h1 id="especial" class="varios sombra">Hola que tal <span class="susto">estamos</span>. Yo muy bien.</h1> <h1 class="varios tipo sombra">Hola que tal estamos. Yo muy bien.</h1> <h1 class="tipo">Hola que tal estamos. Yo muy bien.</h1> <h1 class="varios sombra">Hola que tal <span>estamos</span>. Yo muy bien.</h1> <h1 class="varios">Hola que tal estamos. Yo muy bien.</h1> <h1 class="varios">Hola que tal estamos. Yo muy bien.</h1> <h1 class="sombra verde">Hola que tal <span class="verde">estamos</span>. Yo muy bien.</h1> <a href="pepe.html">ENlace</a> <a href="fotos.html">ENlace</a> <a href="articulos.html">ENlace</a> <div> <p>parrafo</p> <p>parrafo</p> <p>parrafo</p> <p>parrafo</p> <p>parrafo</p> </div> <footer> <div> <div> <p>Párrafos dentro de muchos divs</p> <p>Párrafos dentro de muchos divs</p> <p>Párrafos dentro de muchos divs</p> <p>Párrafos dentro de muchos divs</p> <p>Párrafos dentro de muchos divs</p> <a href="">Enlace</a> </div> <p>estoy solo</p> <p>estoy solo</p> <p>estoy solo</p> </div> </footer> </body> </html>
h1{ color:blue; clear: both; } #especial{ color:red; background-color: green; } #especial .susto{ background-color: yellow; } .varios{ color:green; } .varios span{ color:yellow; } .tipo{ font-family: Verdana, Geneva, Tahoma, sans-serif; } .sombra{ text-shadow: 10px 10px 5px grey; } /*El estilo se aplica a las dos clases */ .tipo, .sombra{ font-size:4em; } /* El estilo se aplica a todos los headers y a todas las imágenes */ header, img{ border:1px solid black; } /*El estilo se aplica a todas las imágenes que estén dentro de un header*/ header img{ width:20%; float: left; } /*Esto se aplica a todos los h1 dentro del header, estén donde estén (anidados dentro de otros elementos) */ header h1{ color:purple; } /*Esto se aplica a todos los h1 hijos directos del header, si hay anidación no se aplica */ header > h1{ color:salmon; } header + h1{ background-color: sienna; } /*Todos los elementos de clase verde que estén dentro de un h1 */ h1 .verde{ background-color: green; } /* Todos los h1 que además tengan la clase verde */ h1.verde{ background-color: green; } [class]{ border:3px solid black; } /*Todos los elementos con un atributo href que empieza por 'foto' */ [href^=foto]{ background-color: chartreuse; } .susto:hover{ background-color: chocolate; } p:last-child{ color:red; }
Selectores CSS
Pero mejor no memorizarlos 😉
En esta página de w3schools se muestran diferentes tipos de selectores css:
Ejemplo layout bootstrap
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="css/estiloboot.css"> </head> <body> <div class="container-fluid"> <div class="row"> <header class="col-12 bg-info"><h1>Cabecera</h1></header> </div> <div class="row"> <aside class="col-sm-2 col-md-3 bg-success"> <ul> <li>111111</li> <li>111111</li> <li>111111</li> <li>111111</li> </ul> </aside> <section class="col-sm-8 col-md-6 bg-info" id="contenido"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores esse illum qui. Ut laudantium fuga officia esse at harum pariatur dicta. Reprehenderit excepturi quibusdam fuga debitis eaque nemo adipisci!</p> </section> <aside class="col-sm-2 col-md-3 bg-danger"> <img src="img/baldosa.jpg" width="50"> </aside> </div> <div class="row"> <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article> <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article> <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article> <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article> <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article> <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article> <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article> <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article> <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article> <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article> <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article> <article class="col-md-3"><img src="img/baldosa.jpg" width="100"></article> </div> <div class="row"> <footer class="col-12 bg-warning"><p>Esto es el pie</p></footer> </div> </div> </body> </html>
article{ background-color: paleturquoise; border:1px solid black; } @media (max-width:576px){ #contenido{ order:-1; } }
Bootstrap
Para empezar, nuestra amiga w3schools:
https://www.w3schools.com/bootstrap4/default.asp
Ahí encontraremos la explicación de todos los elementos de bootstrap muy bien explicados, pero también podemos ir a las fuentes:
https://getbootstrap.com/docs/4.6/getting-started/introduction/
Aquí encontraremos diferentes bootstraps tuneados:
Y aquí templates listos para usar:
https://colorlib.com/wp/free-bootstrap-templates/
En trifulcas hay código de muchos ejemplos:
https://trifulcas.com/ejemplos-bootstrap/
https://trifulcas.com/ejemplo-bootstrap-2/
https://codepen.io/ajaypatelaj/pen/prHjD
Un análisis exhaustivo del grid de bootstrap:
https://trifulcas.com/analisis-del-grid-de-bootstrap/
Ejemplos del grid de bootstrap:
https://coreui.io/docs/layout/grid/
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
Layout flexbox + media query
<header> <h1>Cabecera</h1> </header> <div class="slider"></div> <main> <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> <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> <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> <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>
header{ height:150px; background-color: burlywood; } .slider{ width: 100%; height: 300px; background-image: url('../img/baldosa.jpg'); background-size: cover; } main{ display: flex; flex-wrap: wrap; } main section{ flex:25%; } @media (max-width:728px){ main section{ flex:50%; } } @media (max-width:400px){ .slider{ height: 100px; } footer,aside{ display: none; } main { flex-direction: column; } }