Estructura de control if

//Estructura de control: if
//Sintaxis: if (condicion){Haz alguna cosa}
//Sintaxis: if (condicion){Haz alguna cosa} else{Haz una cosa si no se cumple la condicion}

let a=5;


// a>5 es una condición. Un valor booleano que puede ser cierto (true) o falso (false)
if (a>5){
	console.log("A es mayor de 5");
} else{
	console.log("A no es mayor de 5");
}

//Tipos de condiciones
// Igualdad == Igualdad de valor y tipo ===
// Diferencia !=  Diferencia de valor y tipo !==
// Comparaciones >, >=,<, <=

let b=5;
let c="5";

//Cierto
if (a==b){
	console.log("a es = b");
}
//Cierto
if (a==c){
	console.log("a es = c");
}
//Cierto
if (a===b){
	console.log("a es = b y del mismo tipo");
}
//Falso
if (a===c){
	console.log("a es = c y del mismo tipo");
}

//Falso
if (a!==b){
	console.log("a es != b y del mismo tipo");
}
//Cierto
if (a!==c){
	console.log("a es != c y del mismo tipo");
}

//Falso
if (a>b){
	console.log("A es mayor que b");
}

//Cierta
if (a>=b){
	console.log("A es mayor o igual que b");
}

//Combinación de condiciones
// AND (Y) && : Las dos condiciones se tienen que cumplir
// OR (O) || : Basta que se cumpla una condición
// NOT (NO) ! : Niega la condición

let edad=20;
let dinero=300;

//Puedes hacer un salto en paracaídas si eres mayor de edad y tienes más de 50 €
if ((edad>=18) && (dinero>=50)){
	console.log("Puedes saltar en paracaídas");
}

edad=20;
let altura=170;

//Te puedes montar en la montaña rusa si tienes más de 16 años o mides más de 160
if((edad>=16) || (altura>=160)){
	console.log("Te puedes montar en la montaña rusa");
}

//El ! niega la condición, si es falsa pasa a cierta y viceversa
if (!(edad<16)){
	console.log("No tienes menos de 16 años");
}

Ejercicio repaso JS

Crear una variable cp que valga ‘08010’ y una ciudad que valga Barcelona y mostrar por consola los valores concatenados

Crear una variable precio que valga 75 y una variable unidades que valga 7 y mostrar por consola el precio total

A la variable precio sumarle 10 con atajo
A la variable unidades quitarle una unidad con decremento

Mostrar el resto de la división del nuevo total entre 2 para saber si es par o impar.

Operadores aritméticos

let a=10;
let b=20;
let c;

c=a+b;
console.log(c);
c=a-b;
console.log(c);
c=a*b;
console.log(c);
c=a/b;
console.log(c);

c=5;
c++;//Incremento 1 unidad c(5)->(6)
console.log(c);
c--;//Decremento 1 unidad c(6)->(5)
console.log(c);

//Módulo o resto de la división
/*
14/10 = 1 y de resto 4

*/
console.log(14%10); //El resto de dividir 10 entre 4

let numero=15;
console.log(numero%2); //Impar-->da resto 1
numero=400;
console.log(numero%2);//Par-->da resto 0

console.log(numero%3);//Al dividir entre 3-->da resto 1

//Artimética modular
console.log(30%3);//Al dividir entre 3-->da resto 0
console.log(31%3);//Al dividir entre 3-->da resto 1
console.log(32%3);//Al dividir entre 3-->da resto 2
console.log(33%3);//Al dividir entre 3-->da resto 0

//Atajos de operaciones
//Sin atajo
c=100;
c=c+5; //c ahora vale 105
console.log(c);
//Con atajo
c=100;
c+=5; //c ahora vale 105 equivalente a c=c+5
c++; //c vale 106
console.log(c);
//Estos operadores vienen del C, C++ y muchos lenguajes (JS, Java, C#,...) utilizan la misma sintaxis

//Elevar 2 a la décima potencia
c=2**10;
console.log(c);
a=5**3;
console.log(a);
let nueva=a*b*c;
console.log(nueva);

//Las cadenas se concatenan al sumar
let nombre="Juan";
let apellidos="Pi";
console.log(nombre+" "+apellidos);

//Al mezclar cadenas y números depende de los valores
let x = 5 + 5;  //Si los dos son números: suma
let y = "5" + 5; //Si hay una cadena se concatena, aunque sea número
let z = "Hello" + 5; //Si hay una cadena que no es número se concatena
console.log(x); //10
console.log(y); //55
console.log(z);//Hello5

//Precedencia de operadores 
// (), ++,--, **, *,/,%,+,-
c=10+2*5; //c vale 20
c=10+(2*5); //c vale 20
console.log(c);
c=(10+2)*5; //c vale 60
console.log(c);

Nombres de variables

//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;

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:

Usabilidad

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:

Nielsen

Ejemplos:

Caminos del deseo (Desire paths)

 

Así no:

Así sí:

Definición de UX:

Experiencia de usuario

Qué es UX

Enlaces interesantes:

https://lawsofux.com/

Design better forms

UX Collective

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/