Un objeto es una entidad fundamental en JavaScript que permite almacenar y organizar datos de diferentes tipos en una estructura única. Los objetos se componen de pares clave-valor, donde cada clave es una propiedad y cada valor puede ser cualquier tipo de dato, incluyendo otros objetos. Los objetos en JavaScript son muy flexibles y versátiles, lo que los convierte en una parte esencial de la programación en este lenguaje.
Creación de objetos
Existen varias formas de crear objetos en JavaScript. Una de las formas más comunes es utilizando la sintaxis de llaves {} para definir un objeto literal:
// Creación de un objeto literal
let persona = {
nombre: "Juan",
edad: 30,
casado: false
};
console.log(persona.nombre); // Salida: "Juan"
console.log(persona.edad); // Salida: 30
console.log(persona.casado); // Salida: false
Acceso a propiedades
Puedes acceder a las propiedades de un objeto utilizando la notación de punto (objeto.propiedad) o la notación de corchetes (objeto['propiedad']):
let libro = {
titulo: "Alicia en el País de las Maravillas",
autor: "Lewis Carroll"
};
console.log(libro.titulo); // Salida: "Alicia en el País de las Maravillas"
console.log(libro['autor']); // Salida: "Lewis Carroll"
Propiedades y métodos
Las propiedades de un objeto pueden contener valores de cualquier tipo, incluyendo otros objetos. Además, los objetos pueden tener funciones asociadas llamadas métodos:
Los constructores son funciones que se utilizan para crear nuevos objetos. Puedes definir tus propios constructores de objetos o utilizar constructores incorporados, como Object, Array o Date.
// Creación de objetos usando un constructor personalizado
function Persona(nombre, edad) {
this.nombre = nombre;
this.edad = edad;
}
let persona1 = new Persona("Ana", 25);
let persona2 = new Persona("Carlos", 32);
console.log(persona1.nombre); // Salida: "Ana"
console.log(persona2.edad); // Salida: 32
Iteración a través de propiedades
Puedes recorrer las propiedades de un objeto utilizando bucles for...in.
let fruta = {
nombre: "Manzana",
color: "Rojo",
sabor: "Dulce"
};
for (let propiedad in fruta) {
console.log(`${propiedad}: ${fruta[propiedad]}`);
}
Métodos incorporados
JavaScript proporciona varios métodos incorporados para trabajar con objetos, como Object.keys(), Object.values(), Object.entries():
let persona = {
nombre: "María",
edad: 28,
casado: false
};
let propiedades = Object.keys(persona);
let valores = Object.values(persona);
let entradas = Object.entries(persona);
console.log(propiedades); // Salida: ["nombre", "edad", "casado"]
console.log(valores); // Salida: ["María", 28, false]
console.log(entradas); // Salida: [["nombre", "María"], ["edad", 28], ["casado", false]]
Propiedades y métodos prototipados
En JavaScript, los objetos pueden tener propiedades y métodos que se heredan de un prototipo. Esto permite crear objetos más eficientes y compartir comportamiento común:
// Creación de un objeto prototipo
let personaPrototipo = {
saludar: function() {
console.log(`Hola, mi nombre es ${this.nombre}`);
}
};
// Creación de un nuevo objeto utilizando el prototipo
let persona1 = Object.create(personaPrototipo);
persona1.nombre = "Luis";
persona1.saludar(); // Salida: "Hola, mi nombre es Luis"
Clases en JavaScript
Las clases son una forma más moderna de crear objetos en JavaScript. Proporcionan una sintaxis más clara y orientada a objetos:
class Animal {
constructor(nombre, especie) {
this.nombre = nombre;
this.especie = especie;
}
saludar() {
console.log(`Soy un ${this.especie} llamado ${this.nombre}`);
}
}
let perro = new Animal("Max", "perro");
perro.saludar(); // Salida: "Soy un perro llamado Max"
Consideraciones adicionales
Los objetos en JavaScript son dinámicos, lo que significa que puedes agregar, modificar y eliminar propiedades en cualquier momento.
Las funciones que son propiedades de un objeto se llaman métodos.
Los objetos también pueden tener propiedades y métodos heredados de su prototipo.
Los objetos son fundamentales para trabajar con JSON (JavaScript Object Notation), un formato común para intercambio de datos.
Las funciones desempeñan un papel esencial en la creación de programas y aplicaciones porque incrementan la eficiencia, la modularidad y la legibilidad del código. En esta unidad abordaremos todo lo relativo a las funciones en JavaScript, desde su definición y tipos hasta parámetros, valores de retorno, ámbito, funciones anidadas, expresiones de función, y más. Además, proporcionaremos numerosos ejemplos para ilustrar cada concepto.
¿Por qué utilizar funciones?
Aquí tienes algunas de las razones por las que las funciones son vitales en el desarrollo de software:
Reutilización de código: Las funciones permiten escribir un bloque de código que realiza una tarea específica una vez y luego reutilizarlo en múltiples lugares del programa. Esto reduce la duplicación de código y facilita el mantenimiento y la actualización.
Modularidad: Al dividir el código en funciones más pequeñas y autónomas, se crea un enfoque modular en el diseño del programa. Cada función cumple con una tarea específica, lo que facilita la comprensión del código y la identificación de problemas.
Abstracción: Las funciones permiten ocultar los detalles internos de cómo se realiza una tarea y ofrecen una interfaz clara y simplificada para su uso. Los detalles de implementación quedan encapsulados dentro de la función, lo que facilita el uso de funciones sin conocer su complejidad interna.
Organización: Las funciones ayudan a organizar el código de manera lógica y jerárquica. Esto mejora la legibilidad del código y facilita la navegación y búsqueda de secciones específicas.
Resolución de problemas: Dividir un problema complejo en subproblemas más pequeños y abordar cada uno con funciones independientes simplifica la solución general y facilita la identificación y corrección de errores.
Colaboración: Las funciones permiten que varios desarrolladores trabajen en diferentes partes de una aplicación de manera simultánea y coordinada. Cada función puede ser implementada y probada por separado, lo que acelera el desarrollo colaborativo.
Escalabilidad: Al utilizar funciones para modularizar el código, se crea una base que facilita la adición de nuevas características y la expansión de la aplicación sin afectar otras partes del programa.
Mantenibilidad: Las funciones facilitan la identificación y corrección de errores, ya que los problemas suelen estar confinados a una función específica en lugar de afectar todo el programa. Esto reduce el impacto de los cambios y actualizaciones.
Pruebas unitarias: Las funciones independientes pueden ser sometidas a pruebas unitarias de manera aislada, lo que simplifica la identificación y resolución de problemas antes de integrarlas en el programa completo.
Legibilidad y comprensión: Utilizar nombres descriptivos para las funciones y dividir el código en funciones más pequeñas mejora la legibilidad y facilita la comprensión del flujo del programa.
En resumen, las funciones son una herramienta fundamental para abordar problemas complejos de programación de manera eficiente y estructurada. Su capacidad para modularizar el código, promover la reutilización y facilitar la colaboración hace que sean una parte esencial en la creación de programas y aplicaciones de calidad.
Definición de una función
En JavaScript, una función es un bloque de código reutilizable que realiza una tarea específica. Puedes definir funciones utilizando la palabra clave function, seguida del nombre de la función, paréntesis ( ) y un bloque de código entre llaves { }:
// Definición de una función llamada "saludar"
function saludar() {
console.log("¡Hola, mundo!");
}
// Llamada a la función
saludar(); // Salida: ¡Hola, mundo!
Parámetros y argumentos
Las funciones pueden recibir valores llamados parámetros o argumentos. Los parámetros son nombres que actúan como variables dentro de la función. Cuando llamas a una función, puedes pasar valores específicos como argumentos que serán asignados a los parámetros:
function saludar(nombre) {
console.log("¡Hola, " + nombre + "!");
}
saludar("Juan"); // Salida: ¡Hola, Juan!
saludar("María"); // Salida: ¡Hola, María!
Valor de retorno
Las funciones pueden devolver un valor utilizando la palabra clave return. Un valor de retorno permite que la función produzca un resultado que puede ser utilizado en otras partes del programa:
function sumar(a, b) {
return a + b;
}
let resultado = sumar(3, 5);
console.log(resultado); // Salida: 8
Ámbito de una función
El ámbito (scope) de una función se refiere al alcance en el que las variables dentro de la función son visibles y accesibles. Las variables declaradas dentro de una función tienen un ámbito local y solo son accesibles dentro de esa función.
function multiplicar(a, b) {
let producto = a * b;
return producto;
}
// Error: producto no está definido aquí
console.log(producto);
Funciones anidadas
Puedes definir funciones dentro de otras funciones. Las funciones anidadas tienen acceso a las variables de la función exterior:
function operaciones(a, b) {
function sumar() {
return a + b;
}
function restar() {
return a - b;
}
return `Suma: ${sumar()}, Resta: ${restar()}`;
}
let resultado = operaciones(10, 5);
console.log(resultado); // Salida: "Suma: 15, Resta: 5"
Expresiones de función
Una expresión de función es una forma de definir funciones en una variable. Puede ser anónima (sin nombre) o nombrada:
// Expresión de función anónima
let saludar = function(nombre) {
console.log("¡Hola, " + nombre + "!");
};
saludar("Elena"); // Salida: ¡Hola, Elena!
// Expresión de función nombrada
let sumar = function suma(a, b) {
return a + b;
};
console.log(sumar(2, 3)); // Salida: 5
Funciones Flecha
Las funciones flecha son una forma más concisa de definir funciones en JavaScript:
// Sintaxis básica de función flecha
let suma = (a, b) => {
return a + b;
};
// Si la función tiene una sola línea de retorno, puedes omitir las llaves y el "return"
let resta = (a, b) => a - b;
console.log(suma(4, 2)); // Salida: 6
console.log(resta(8, 3)); // Salida: 5
Ejemplos adicionales
Funciones como argumentos
function operacion(func, a, b) {
return func(a, b);
}
function suma(a, b) {
return a + b;
}
function multiplicacion(a, b) {
return a * b;
}
console.log(operacion(suma, 3, 4)); // Salida: 7
console.log(operacion(multiplicacion, 2, 5)); // Salida: 10
Funciones recursivas
function factorial(n) {
if (n === 0 || n === 1) {
return 1;
}
return n * factorial(n - 1);
}
console.log(factorial(5)); // Salida: 120
Closure (Clausura)
function contador() {
let count = 0;
return function() {
count++;
return count;
};
}
let incrementar = contador();
console.log(incrementar()); // Salida: 1
console.log(incrementar()); // Salida: 2
Los tipos de datos son la base fundamental para almacenar y manipular información en cualquier lenguaje de programación. En JavaScript, existen varios tipos de datos básicos que se utilizan para representar diferentes tipos de valores. A continuación veremos los tipos de datos básicos en JavaScript, junto con ejemplos para cada uno de ellos.
Números
Los números representan valores numéricos y pueden ser enteros o decimales:
let edad = 25;
let temperatura = -10;
let precio = 99.99;
let distancia = 1000.75;
Valores booleanos
Los valores booleanos representan solo dos posibles estados: true (verdadero) o false (falso).
let esMayor = true;
let esMenor = false;
let validado = true;
let habilitado = false;
Como veremos en otra unidad, los valores booleanos son útiles para realizar comparaciones y tomar decisiones en el flujo de un programa.
Cadenas de texto
Cadenas de texto simples
Las cadenas de texto representan una secuencia de caracteres y se utilizan para almacenar información textual. En su forma más básica pueden crearse utilizando comillas dobles (") o comillas simples ('):
let nombre = "Juan";
let mensaje = 'Hola, ¿cómo estás?';
let direccion = "Calle 123, Ciudad";
Plantillas de cadenas
La interpolación en JavaScript es una técnica que permite combinar valores y cadenas de texto de una manera más clara y legible. Es una forma conveniente de construir cadenas de texto que incluyan variables y expresiones dentro de ellas. La interpolación se realiza utilizando plantillas de cadenas, también conocidas como «template literals».
Para crear una plantilla de cadena, se utilizan las comillas invertidas (backticks `) en lugar de las comillas simples o dobles que se utilizan para crear cadenas de texto regulares. Dentro de una plantilla de cadena, se pueden incluir expresiones dentro de llaves `${...}`. Cuando la plantilla se evalúa, las expresiones dentro de las llaves se resuelven y se insertan en la cadena final.
En el siguiente ejemplo utilizamos una plantilla de cadena con interpolación para crear la variable mensaje, que incluye las variables nombre y edad dentro de la cadena. Las expresiones ${nombre} y ${edad} se evalúan y se reemplazan con los valores de las variables correspondientes al momento de la creación de la cadena:
// Variables
let nombre = "Juan";
let edad = 25;
// Plantilla de cadena con interpolación
let mensaje = `Hola, mi nombre es ${nombre} y tengo ${edad} años.`;
console.log(mensaje);
// Salida: "Hola, mi nombre es Juan y tengo 25 años."
La interpolación también es útil para realizar cálculos dentro de las plantillas de cadenas:
let a = 5;
let b = 3;
// Plantilla de cadena con interpolación y cálculo
let resultado = `La suma de ${a} y ${b} es igual a ${a + b}.`;
console.log(resultado);
// Salida: "La suma de 5 y 3 es igual a 8."
Además de las variables y expresiones, también podemos incluir cualquier contenido de cadena dentro de las plantillas, e incluso podemos definir la plantilla en varias líneas:
let producto = "manzana";
let cantidad = 3;
let precio = 2.5;
// Plantilla de cadena con contenido adicional
let factura = `
Producto: ${producto}
Cantidad: ${cantidad}
Precio unitario: €${precio}
Total: €${cantidad * precio}
`;
console.log(factura);
/* Salida:
Producto: manzana
Cantidad: 3
Precio unitario: €2.5
Total: €7.5
*/
La interpolación a través de plantillas de cadenas hace que el código sea más legible, más mantenible y menos propenso a errores de concatenación de cadenas. Además, facilita la inclusión de valores dinámicos en las cadenas, lo que es especialmente útil cuando se construyen mensajes personalizados o se generan resultados basados en datos variables.
Es importante destacar que las plantillas de cadenas solo están disponibles a partir de ECMAScript 6 (ES6) y versiones posteriores de JavaScript. Si estás utilizando una versión anterior, es posible que necesites utilizar concatenación de cadenas o métodos como String.prototype.concat() para lograr resultados similares.
Valores "null" y "undefined"
Las palabras clave null y undefined son valores especiales que representan la ausencia de valor:
null se utiliza cuando una variable está intencionalmente vacía o cuando queremos establecer un valor nulo.
undefined se utiliza cuando una variable ha sido declarada pero no se le ha asignado ningún valor.
let valor1 = null;
let valor2 = undefined;
let edad; // esta variable es undefined ya que no se le ha asignado ningún valor
Conversión de tipos de datos
Las conversiones de tipos de datos son procesos en los que JavaScript cambia temporalmente el tipo de un valor para que pueda ser utilizado en una operación específica. JavaScript realiza conversiones implícitas (o automáticas) y explícitas de tipos de datos para facilitar la manipulación de valores en diferentes situaciones.
Conversiones implícitas o automáticas
JavaScript utiliza conversiones automáticas cuando intentamos realizar operaciones entre diferentes tipos de datos. Esto sucede de forma transparente, sin que el programador tenga que hacer nada explícitamente.
Conversión automática de números a cadenas de texto
En los siguientes ejemplos, la conversión automática de números a cadenas de texto ocurre cuando utilizamos el operador de concatenación (+) para combinar valores numéricos con cadenas de texto. Cuando se realiza una operación aritmética que involucra una cadena de texto y un número, JavaScript convierte automáticamente el número en una cadena de texto para que pueda concatenarse con la otra cadena:
// Conversión automática de números a cadenas de texto en concatenaciones
let num1 = 10;
let num2 = 3.14;
let concatenacion1 = "El número es: " + num1; // "El número es: 10"
let concatenacion2 = "El valor de PI es: " + num2; // "El valor de PI es: 3.14"
// Conversión automática de números a cadenas de texto en operaciones aritméticas
let a = 5;
let b = 2;
let resultado1 = "La suma es: " + (a + b); // "La suma es: 7"
let resultado2 = "El producto es: " + (a * b); // "El producto es: 10"
Es importante tener en cuenta que la conversión automática de números a cadenas de texto solo ocurre cuando se utilizan operadores de concatenación. Si utilizamos operadores aritméticos entre números y cadenas de texto, JavaScript tratará de realizar la operación matemática en lugar de convertir los números en cadenas de texto:
let num = 42;
let texto = "El número es: " + num; // "El número es: 42"
let suma = num + 5; // 47, porque es una operación aritmética
let resultado = "El resultado es: " + (num + 5); // "El resultado es: 47"
Recuerda que, aunque JavaScript realiza la conversión automática de números a cadenas de texto, es recomendable utilizar la interpolación de cadenas con plantillas (${...}) cuando sea posible, ya que hace que el código sea más legible y evita confusiones con el uso de operadores de concatenación. La interpolación de cadenas es una característica introducida en ECMAScript 6 y ofrece una forma más clara y sencilla de incluir valores dentro de cadenas de texto.
Conversión automática de cadenas de texto a números
En el siguiente ejemplo, JavaScript convierte automáticamente las cadenas "5" y "2" en valores numéricos antes de realizar la resta. Como resultado, obtenemos el número 3:
let a = "5";
let b = "2";
let resultado = a - b;
console.log(resultado); // Salida: 3
Conversión automática de valores booleanos a valores numéricos
En el siguiente ejemplo, JavaScript convierte automáticamente los valores booleanos true y false a valores numéricos (1 y 0, respectivamente) antes de realizar la suma. Esta conversión automática ocurre porque en una operación aritmética, JavaScript espera valores numéricos, y los valores booleanos se convierten implícitamente a números para que la operación sea válida:
let verdadero = true; // 1
let falso = false; // 0
let sumaBooleanos = verdadero + falso;
console.log(sumaBooleanos); // Salida:
Conversión automática de booleanos a cadenas de texto
Cuando utiliza el operador de concatenación + para combinar un valor booleano con una cadena de texto, JavaScript realiza una conversión automática del valor booleano a su representación en forma de cadena de texto. Los valores booleanos true y false se convierten en las cadenas de texto "true" y "false", respectivamente. En el siguiente ejemplo, las variables esVerdadero y esFalso son valores booleanos. Cuando los concatenamos con cadenas de texto utilizando el operador +, JavaScript realiza la conversión automática de estos valores booleanos a sus representaciones de cadena de texto correspondientes:
let esVerdadero = true;
let esFalso = false;
let cadena1 = "El valor es: " + esVerdadero;
let cadena2 = "El resultado es: " + esFalso;
console.log(cadena1); // Salida: "El valor es: true"
console.log(cadena2); // Salida: "El resultado es: false"
Podemos utilizar también la conversión automática de booleanos a cadenas de texto para construir mensajes que contengan condicionales. En el siguiente ejemplo creamos mensajes que informan sobre si una persona es mayor de edad o si puede ingresar a algún lugar.
let edad = 17;
let mensaje1 = "¿Puede trabajar? " + (edad >= 16);
let mensaje2 = "¿Es mayor de edad? " + (edad >= 18);
console.log(mensaje1); // Salida: "¿Puede trabajar? true"
console.log(mensaje2); // Salida: "¿Es mayor de edad? false"
Ten en cuenta que, aunque la conversión automática de booleanos a cadenas de texto es útil en ciertas situaciones, es recomendable ser explícito cuando sea necesario para mejorar la legibilidad del código. Si deseas asegurarte de que la representación en forma de cadena de texto sea más específica, puedes utilizar funciones como toString() o plantillas de cadenas para lograr un resultado más claro:
let esVerdadero = true;
let cadena1 = "Es verdadero: " + esVerdadero.toString();
let cadena2 = `Es falso: ${false}`;
console.log(cadena1); // Salida: "Es verdadero: true"
console.log(cadena2); // Salida: "Es falso: false"
Conversiones explícitas
La conversión explícita de tipos de datos ocurre cuando el programador decide cambiar manualmente el tipo de un valor a otro tipo específico. JavaScript proporciona varias funciones y métodos que permiten realizar estas conversiones explícitas.
Conversión explícita de números a cadenas de texto
En el siguiente ejemplo convertimos números en cadenas de texto utilizando la función String() y también mediante la concatenación con una cadena vacía. Ambos enfoques producen el mismo resultado:
let numero1 = 42;
let numero2 = 3.14;
// Utilizando la función String()
let textoNumero1 = String(numero1); // "42"
let textoNumero2 = String(numero2); // "3.14"
// Utilizando concatenación con una cadena vacía
let textoNumero3 = numero1 + ""; // "42"
let textoNumero4 = "" + numero2; // "3.14"
Conversión explícita de cadenas de texto a números
En el siguiente ejemplo realizamos conversiones explícitas de cadenas de texto a números utilizando la función Number() y el operador unario +. También vemos que al intentar convertir una cadena de texto no numérica, obtenemos NaN:
let textoNumero1 = "123";
let textoNumero2 = "3.14";
let textoNoNumerico = "hola";
// Utilizando la función Number()
let numero1 = Number(textoNumero1); // 123 (número entero)
let numero2 = Number(textoNumero2); // 3.14 (número decimal)
let noEsNumero = Number(textoNoNumerico); // NaN (no es un número)
// Utilizando el operador unario +
let numero3 = +textoNumero1; // 123 (número entero)
let numero4 = +textoNumero2; // 3.14 (número decimal)
let numero5 = +textoNoNumerico; // NaN (no es un número)
Debemos destacar que la función Number() es muy flexible y puede manejar una amplia variedad de tipos de datos, y sólo devolverá NaN si no puede realizar la conversión:
Number("42"); // 42
Number("3.14"); // 3.14
Number("123abc"); // NaN (caracteres no numéricos)
Number("hello"); // NaN (cadena no numérica)
Number(true); // 1
Number(false); // 0
Number(null); // 0
Number(undefined); // NaN
Podemos utilizar además las funciones parseInt() y parseFloat() para convertir una cadena de texto en un número entero o decimal respectivamente:
let cadena1 = "123";
let cadena2 = "3.14";
let cadena3 = "Hola123";
let cadena4 = "123Hola";
let numero1 = parseInt(cadena1); // 123 (número entero)
let numero2 = parseInt(cadena2); // 3 (solo se toma la parte entera)
let numero3 = parseInt(cadena3); // 123 (comienza con un número)
let numero4 = parseInt(cadena4); // NaN (no comienza con un número)
let cadena5 = "3.14";
let cadena6 = "0.12345";
let cadena7 = "3.14Hola";
let cadena8 = "Hola3.14";
let numero5 = parseFloat(cadena5); // 3.14 (número decimal)
let numero6 = parseFloat(cadena6); // 0.12345
let numero7 = parseFloat(cadena7); // 3.14 (comienza con un número)
let numero8 = parseFloat(cadena8); // NaN (no comienza con un número)
Consideraciones adicionales sobre la función Number():
No se limita únicamente a conversiones de enteros o decimales, ya que también permite convertir booleanos, nulos o valores no definidos.
Genera NaN si encuentra cualquier carácter no numérico en una cadena de texto, aunque esté al final (por ejemplo, «123abc»).
Consideraciones adicionales sobre las funciones parseInt() y parseFloat():
Intentarán convertir la parte numérica inicial de la cadena y detendrán la conversión cuando encuentren un carácter no numérico.
Si la cadena comienza con un espacio en blanco, también lo ignorarán y comenzarán la conversión desde el primer dígito numérico.
Solo convierten la parte inicial numérica de la cadena. Si hay caracteres numéricos después de caracteres no numéricos (por ejemplo, «123abc»), solo se tomará la parte inicial numérica («123» en este caso).
Si la cadena no contiene ningún dígito numérico, devolverán NaN.
Conversión explícita de cadenas de texto a booleanos
En el siguiente ejemplo convertimos cadenas de texto en valores booleanos utilizando la función Boolean() y también mediante comparaciones estrictas (===). Es importante destacar que cualquier cadena no vacía se evalúa como true al utilizar la función Boolean():
let cadenaVerdadera = "true";
let cadenaFalsa = "false";
let cadenaNoValida = "hola";
// Utilizando la función Boolean()
let booleano1 = Boolean(cadenaVerdadera); // true
let booleano2 = Boolean(cadenaFalsa); // false
let booleano3 = Boolean(cadenaNoValida); // true (cualquier cadena no vacía se evalúa como true)
// Utilizando comparación estricta (===)
let booleano4 = (cadenaVerdadera === "true"); // true
let booleano5 = (cadenaFalsa === "true"); // false
Conversión explícita de booleanos a cadenas de texto
En el siguiente ejemplo utilizamos las funciones String() y toString() para convertir los valores booleanos true y false en sus representaciones en forma de cadena de texto. Ambos enfoques producen el mismo resultado:
let esVerdadero = true;
let esFalso = false;
// Utilizando la función String()
let cadena1 = String(esVerdadero); // "true"
let cadena2 = String(esFalso); // "false"
// Utilizando el método toString()
let cadena3 = esVerdadero.toString(); // "true"
let cadena4 = esFalso.toString(); // "false"
Conversión explícita de valores no booleanos a valores booleanos
En este caso, utilizamos la función Boolean() y además el doble operador de negación (!!) para obtener los valores booleanos de cada una de las variables:
let valor1 = ""; // valor falso
let valor2 = 0; // valor falso
let valor3 = null; // valor falso
let valor4; // valor undefined, también falso
let valor5 = NaN; // valor falso
let valor6 = 25; // valor verdadero
let valor7 = "Hola"; // valor verdadero
let booleano1 = Boolean(valor1); // false
let booleano2 = Boolean(valor2); // false
let booleano3 = Boolean(valor3); // false
let booleano4 = Boolean(valor4); // false
let booleano5 = Boolean(valor5); // false
let booleano6 = Boolean(valor6); // true
let booleano7 = Boolean(valor7); // true
let booleano8 = !!valor1; // false
let booleano9 = !!valor2; // false
let booleano10 = !!valor3; // false
let booleano11 = !!valor4; // false
let booleano12 = !!valor5; // false
let booleano13 = !!valor6; // true
let booleano14 = !!valor7; // true
Al utilizar !!, el primer operador de negación convierte el valor a su inverso booleano, y el segundo operador de negación invierte nuevamente el resultado, restaurando el valor original como valor booleano. Es decir, la doble negación convierte los valores "", 0, null, undefined y NaN en false, y por otro lado convierte 25 y "Hola" en true:
Consideraciones
Es fundamental comprender las conversiones de tipos de datos en JavaScript para escribir código robusto y evitar resultados inesperados en nuestros programas. No debemos olvidar que JavaScript es un lenguaje de tipado dinámico, lo que significa que las variables pueden cambiar su tipo de dato durante la ejecución del programa.
En general, se recomienda ser explícito en las conversiones y utilizar con mucha precaución funciones y métodos específicos para cada tipo. No olvidemos que si intentamos convertir valores que no son compatibles, como una cadena de texto no numérica a un número, obtendremos NaN como resultado. Por ejemplo, si intentamos convertir la cadena de texto "hola" en un número utilizando la función Number() o el operador unario +, no podremos obtener un valor numérico válido, y ambas conversiones devolverán NaN:
let textoNoNumerico = "hola";
// Utilizando la función Number()
let numero1 = Number(textoNoNumerico);
// Utilizando el operador unario +
let numero2 = +textoNoNumerico;
console.log(numero1); // Salida: NaN
console.log(numero2); // Salida: NaN
O por ejemplo, también podemos obtener resultados inesperados si intentamos convertir una cadena de texto en un valor booleano. En este caso, como cualquier cadena no vacía se evalúa como true, si utilizamos la función Boolean() para convertir "hola" en booleano, el resultado de la conversión es true en lugar de NaN:
let textoNoNumerico = "hola";
// Utilizando la función Boolean()
let booleano = Boolean(textoNoNumerico);
console.log(booleano); // Salida: true (cualquier cadena no vacía se evalúa como true)
Recuerda que NaN (Not-a-Number) es un valor especial en JavaScript que representa el resultado de una operación matemática inválida o indeterminada. Se obtiene cuando intentamos realizar una operación aritmética con valores no numéricos o cuando una operación matemática no tiene un resultado definido, como por ejemplo, la división por cero. Es importante tener en cuenta estas situaciones al trabajar con conversiones explícitas para evitar obtener resultados inesperados.
Debemos considerar además que al trabajar con variables que puedan contener valores tales como una cadena vacía o null, podemos obtener resultados inesperados si intentamos realizar conversiones para obtener un valor numérico o booleano, ya que en vez de obtener NaN, dichas conversiones se realizarán sin generar ningún error:
let cadenaVacia = "";
let nulo = null;
let numero1 = Number(cadenaVacia); // 0 (conversión válida)
let numero2 = Number(nulo); // 0 (conversión válida)
let booleano1 = Boolean(cadenaVacia); // false (cadena vacía se evalúa como false)
let booleano2 = Boolean(nulo); // false (null se evalúa como false)
Los operadores son elementos fundamentales en cualquier lenguaje de programación, y JavaScript no es una excepción. Los operadores en JavaScript nos permiten realizar diferentes tipos de operaciones con valores, como aritmética, asignación, comparación y lógica, entre otros. A continuación explicaremos los distintos tipos de operadores disponibles en JavaScript, junto con muchos ejemplos para cada uno.
Operadores aritméticos
Los operadores aritméticos se utilizan para realizar operaciones matemáticas con números.
Suma (+): Se utiliza para sumar dos valores numéricos.
Resta (-): Se utiliza para restar un valor numérico de otro.
Multiplicación (*): Se utiliza para multiplicar dos valores numéricos.
División (/): Se utiliza para dividir un valor numérico entre otro.
let a = 5 + 3; // 8
let b = a + 10; // 18
let c = 10 - 4; // 6
let d = 8 - 3; // 5
let e = 3 * 4; // 12
let f = 5 * 2; // 10
let g = 15 / 5; // 3
let h = 20 / 4; // 5
Módulo (%): Se utiliza para obtener el resto de la división de dos números.
let i = 17 % 5; // 2 (17 dividido por 5 es 3 con un resto de 2)
let j = 8 % 3; // 2 (8 dividido por 3 es 2 con un resto de 2)
Incremento (++): Se utiliza para aumentar el valor de una variable en 1.
Decremento (--): Se utiliza para disminuir el valor de una variable en 1.
let k = 10;
k++; // k se convierte en 11
let l = 3;
l++; // l se convierte en 4
let m = 7;
m--; // m se convierte en 6
let n = 9;
n--; // n se convierte en 8
Operadores de asignación
Los operadores de asignación se utilizan para asignar valores a variables.
Asignación básica (=): Se utiliza para asignar un valor a una variable.
let x = 10;
let y = "Hola";
Operadores de asignación combinados (+=, -=, *=, /=): Estos operadores combinan una operación aritmética con una asignación.
let a = 5;
a += 2; // a se convierte en 7 (a = a + 2)
let b = 8;
b -= 3; // b se convierte en 5 (b = b - 3)
let c = 3;
c *= 4; // c se convierte en 12 (c = c * 4)
let d = 20;
d /= 5; // d se convierte en 4 (d = d / 5)
let y = 5;
y += 2; // 'y' se convierte en 7 (y = y + 2)
y -= 3; // 'y' se convierte en 4 (y = y - 3)
y *= 2; // 'y' se convierte en 8 (y = y * 2)
y /= 4; // 'y' se convierte en 2 (y = y / 4)
Operadores de comparación
Los operadores de comparación se utilizan para comparar dos valores y devuelven un valor booleano (true o false).
Igualdad (==): Compara si dos valores son iguales, sin considerar el tipo de datos.
let a = 5;
let b = "5";
console.log(a == b); // true (compara solo los valores)
let c = true;
let d = 1;
console.log(c == d); // true (true es igual a 1)
Desigualdad (!=): Compara si dos valores no son iguales, sin considerar el tipo de datos.
let e = 10;
let f = "5";
console.log(e != f); // true (los valores son diferentes)
let g = false;
let h = 0;
console.log(g != h); // false (false es igual a 0)
Igualdad estricta (===): Compara si dos valores son iguales, considerando también el tipo de datos.
let i = 5;
let j = "5";
console.log(i === j); // false (compara valores y tipos de datos)
let k = true;
let l = 1;
console.log(k === l); // false (true y 1 son diferentes tipos de datos)
Desigualdad estricta (!==): Compara si dos valores no son iguales, considerando también el tipo de datos.
let m = 10;
let n = "10";
console.log(m !== n); // true (los valores son iguales, pero los tipos de datos son diferentes)
let o = true;
let p = 1;
console.log(o !== p); // true (true y 1 son diferentes tipos de datos)
Mayor que (>): Compara si el valor del operando izquierdo es mayor que el valor del operando derecho.
let a = 5;
let b = 3;
console.log(a > b); // true (5 es mayor que 3)
let c = 10;
let d = 20;
console.log(c > d); // false (10 no es mayor que 20)
let e = "25";
let f = 15;
console.log(e > f); // true (la comparación se realiza mediante la conversión a números, "25" es mayor que 15)
En este ejemplo, la comparación e > f evalúa si "25" es mayor que 15, pero como uno de los operandos es una cadena de texto, JavaScript intentará convertirlo a número y luego realizar la comparación. En este caso, "25" se convierte a 25, y la comparación resulta en verdadero (true).
Menor que (<): Compara si el valor del operando izquierdo es menor que el valor del operando derecho.
let a = 5;
let b = 10;
console.log(a < b); // true (5 es menor que 10)
let c = 15;
let d = 5;
console.log(c < d); // false (15 no es menor que 5)
let e = "10";
let f = 15;
console.log(e < f); // true (la comparación se realiza mediante la conversión a números, "10" es menor que 15)
En este ejemplo, la comparación e < f evalúa si "10" es menor que 15, pero como uno de los operandos es una cadena de texto, JavaScript intentará convertirlo a número y luego realizar la comparación. En este caso, "10" se convierte a 10, y la comparación resulta en verdadero (true).
Mayor o igual que (>=): Compara si el valor del operando izquierdo es mayor o igual que el valor del operando derecho.
let a = 5;
let b = 3;
console.log(a >= b); // true (5 es mayor o igual que 3)
let c = 10;
let d = 10;
console.log(c >= d); // true (10 es igual a 10)
let e = "25";
let f = 20;
console.log(e >= f); // true (la comparación se realiza mediante la conversión a números, "25" es mayor o igual que 20)
En este ejemplo, la comparación e >= f evalúa si "25" es mayor o igual que 20, pero como uno de los operandos es una cadena de texto, JavaScript intentará convertirlo a número y luego realizar la comparación. En este caso, "25" se convierte a 25, y la comparación resulta en verdadero (true).
Menor o igual que (<=): Compara si el valor del operando izquierdo es menor o igual que el valor del operando derecho.
let a = 5;
let b = 10;
console.log(a <= b); // true (5 es menor o igual que 10)
let c = 15;
let d = 15;
console.log(c <= d); // true (15 es igual a 15)
let e = "10";
let f = 20;
console.log(e <= f); // true (la comparación se realiza mediante la conversión a números, "10" es menor o igual que 20)
En este ejemplo, la comparación e <= f evalúa si "10" es menor o igual que 20, pero como uno de los operandos es una cadena de texto, JavaScript intentará convertirlo a número y luego realizar la comparación. En este caso, "10" se convierte a 10, y la comparación resulta en verdadero (true).
Operadores lógicos
Los operadores lógicos se utilizan para combinar o negar valores booleanos (true o false).
AND lógico (&&): Devuelve true si ambos operandos son true.
let a = true;
let b = false;
console.log(a && b); // false
let c = true;
let d = true;
console.log(c && d); // true
OR lógico (||): Devuelve true si al menos uno de los operandos es true.
let e = true;
let f = false;
console.log(e || f); // true
let g = false;
let h = false;
console.log(g || h); // false
Negación lógica (!): Devuelve el valor contrario del operando.
let i = true;
console.log(!i); // false
let j = false;
console.log(!j); // true
Otros operadores
Operador ternario
El operador ternario es una forma abreviada de escribir una declaración if...else en una sola línea.
let age = 25;
let result = (age >= 18) ? "Adulto" : "Menor de edad";
console.log(result); // "Adulto"
Operador de concatenación
Los operadores de concatenación se utilizan para unir cadenas de texto.
Concatenación básica (+): Une dos cadenas de texto.
let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // "John Doe"
Operador de tipo
Operador typeof: Se utiliza para obtener el tipo de dato de una variable.
let x = 5;
let y = "Hola";
let z = true;
console.log(typeof x); // "number"
console.log(typeof y); // "string"
console.log(typeof z); // "boolean"
Las variables son elementos fundamentales en cualquier lenguaje de programación, ya que nos permiten almacenar y manipular datos de diferentes tipos. En JavaScript, tenemos tres formas principales de declarar variables: var, let, y const. Cada una tiene sus características y usos específicos. A continuación veremos cómo declarar, asignar valores, y usar variables en JavaScript, junto con ejemplos para cada caso.
Declaración de variables con var
La palabra clave var fue la forma tradicional de declarar variables en JavaScript antes de la introducción de let y const. Aunque var sigue siendo compatible en versiones modernas de JavaScript, su uso ha disminuido debido a algunos problemas asociados con su alcance. Sin embargo, es importante comprender cómo funciona var y cuáles son sus características.
Para declarar una variable usando var, simplemente escribimos var seguido del nombre de la variable.
var x;
Asignación de valores a una variable con var
Podemos asignar un valor a la variable en el mismo paso de la declaración o en cualquier otro lugar del código:
var age = 25;
var name;
name = "John";
Alcance de función con var
Una característica importante de var es su alcance de función. Esto significa que la variable declarada con var es visible en toda la función en la que se declara, incluso si es declarada dentro de un bloque.
function exampleScope() {
if (true) {
var foo = "bar";
console.log(foo); // "bar" - La variable es visible dentro del bloque 'if'
}
console.log(foo); // "bar" - 'foo' es accesible en toda la función 'exampleScope'
}
Problemas con var
Aunque var puede ser útil, tiene algunos problemas asociados con su alcance que pueden conducir a comportamientos inesperados y errores difíciles de detectar.
Hoisting (Elevación)
Una de las características más sorprendentes de var es el hoisting (elevación). Las declaraciones de variables con var se elevan hasta la parte superior del ámbito actual, lo que significa que la variable es «elevada» antes de su declaración real:
console.log(x); // undefined - La declaración de la variable se eleva, pero aún no tiene valor
var x = 10;
console.log(x); // 10 - Ahora 'x' tiene el valor asignado
El código anterior se interpreta como si hubiera sido escrito de la siguiente manera:
var x; // La declaración de 'x' se eleva
console.log(x); // undefined - 'x' existe, pero aún no tiene valor asignado
x = 10; // Asignamos el valor 10 a 'x'
console.log(x); // 10 - Ahora 'x' tiene el valor asignado
Este comportamiento puede conducir a confusiones, especialmente si se olvida declarar una variable antes de usarla, ya que no se producirá un error, sino que obtendremos undefined.
Reasignación en el mismo ámbito
El alcance de función de var permite que la variable sea reasignada dentro del mismo ámbito, lo que puede llevar a errores difíciles de rastrear. En el siguiente ejemplo el resultado es inesperado, ya que y es reasignada dentro del bloque ‘if’ y su valor cambia fuera del bloque:
var y = 5;
if (true) {
var y = 10; // Esto reasigna la variable 'y' en el mismo ámbito
console.log(y); // 10 - La variable 'y' interna tiene precedencia dentro del bloque 'if'
}
console.log(y); // 10 - La variable 'y' externa es reasignada dentro del bloque 'if'
¿Cuándo deberías usar var?
Aunque var tiene algunos problemas y se recomienda evitarlo en la mayoría de los casos, hay situaciones específicas en las que puede ser útil, especialmente en el contexto de versiones antiguas de JavaScript o en ciertos escenarios donde el comportamiento del hoisting es deseado. Sin embargo, en versiones modernas de JavaScript, se prefieren let y const debido a su alcance de bloque y su comportamiento más predecible.
En resumen, var es una palabra clave para declarar variables en JavaScript con alcance de función. Aunque ha sido reemplazado en gran medida por let y const, todavía es importante comprender su funcionamiento y cómo puede afectar el alcance de las variables. Es recomendable utilizar let y const en su lugar, ya que proporcionan un código más seguro y fácil de mantener, pero conocer var te permitirá comprender mejor el código existente y ser más versátil en tu desarrollo.
Declaración de variables con let
Podemos utilizar la palabra clave let para declarar variables con alcance de bloque. Antes solo teníamos var, que tiene un alcance de función y no de bloque. let resuelve algunos problemas asociados con el uso de var y proporciona un alcance más seguro y predecible.
Para declarar una variable usando let, simplemente escribimos let seguido del nombre de la variable. Por ejemplo:
let x;
Alcance de bloque
Una de las principales diferencias entre let y var es su alcance. Las variables declaradas con let tienen un alcance de bloque, lo que significa que solo son visibles dentro del bloque (puede ser un bloque de código dentro de una función, una declaración if, un bucle for, etc.) en el que se han declarado.
function exampleScope() {
if (true) {
let foo = "bar";
console.log(foo); // "bar" - La variable es visible dentro del bloque 'if'
}
console.log(foo); // Error: 'foo' no está definido, ya que está fuera del bloque 'if'
}
Evita el problema de «hoisting»
Otro problema que resuelve let es el comportamiento de «hoisting» que se presenta con las variables declaradas con var. En el caso de let, las variables no son «elevadas» (hoisted) hasta la parte superior del bloque, lo que puede ayudar a evitar errores difíciles de detectar.
console.log(x); // Error: 'x' no está definido, no es elevado (hoisted)
let x = 10;
Redefinición de variables
Con let, no puedes redeclarar la misma variable en el mismo alcance, lo que ayuda a evitar errores y mantener un código más limpio:
let y = 5;
let y = 10; // Error: no se permite redeclarar 'y' en el mismo alcance
Ejemplos adicionales
Los siguientes ejemplos te brindan una visión completa del uso de let en JavaScript. Recuerda que let nos permite evitar problemas de alcance y nos ayuda a mantener un código más limpio y seguro:
function loopExample() {
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4 - 'i' es visible solo dentro del bucle 'for'
}
console.log(i); // Error: 'i' no está definido, está fuera del alcance del bucle 'for'
}
function blockExample() {
let a = 10;
if (true) {
let a = 20;
console.log(a); // 20 - La variable 'a' interna tiene precedencia dentro del bloque 'if'
}
console.log(a); // 10 - La variable 'a' externa no se ve afectada por la interna del bloque 'if'
}
function lexicalScoping() {
let x = 1;
{
let x = 2;
console.log(x); // 2 - 'x' dentro del bloque tiene precedencia sobre el 'x' externo
}
console.log(x); // 1 - 'x' externo no se ve afectado por el 'x' dentro del bloque
}
function temporalDeadZone() {
console.log(x); // Error: 'x' no está definido debido a la zona temporal de la variable (temporal dead zone)
let x = 5;
}
function iterationExample() {
let funcs = [];
for (let i = 0; i < 5; i++) {
funcs.push(() => console.log(i)); // Se captura el valor actual de 'i' en cada iteración
}
funcs.forEach(func => func()); // 0, 1, 2, 3, 4 - Cada función muestra el valor de 'i' en su iteración correspondiente
}
Declaración de constantes con const
La palabra clave const se utiliza para declarar constantes, es decir, variables cuyo valor no puede cambiar una vez que se hayan inicializado.
Para declarar una constante usando const, simplemente escribimos const seguido del nombre de la constante y luego asignamos un valor:
const pi = 3.14159;
Asignación de valores y reasignación
Una vez que una constante ha sido declarada y se le ha asignado un valor, no se puede cambiar su valor. Intentar reasignar una constante resultará en un error:
const name = "John";
name = "Jane"; // Error: No se puede reasignar una constante
Inmutabilidad de los valores
Es importante tener en cuenta que const solo evita la reasignación de la variable, no la inmutabilidad de los valores a los que hace referencia. Si la constante contiene un objeto, por ejemplo, el objeto en sí puede ser modificado, pero no se puede asignar una nueva referencia a la constante:
const person = { name: "John", age: 30 };
person.age = 31; // Esto es válido, ya que se modifica el objeto al que 'person' hace referencia
person = { name: "Jane", age: 25 }; // Error: No se puede reasignar una constante
Debe inicializarse al declarar
A diferencia de las variables declaradas con let, las constantes deben inicializarse al declararlas. No es posible declarar una constante sin asignarle un valor en el mismo paso:
const x; // Error: Las constantes deben inicializarse al declararlas
Ámbito de bloque
Al igual que let, las constantes también tienen un ámbito de bloque. Esto significa que solo son visibles dentro del bloque en el que se declaran.
function exampleScope() {
if (true) {
const foo = "bar";
console.log(foo); // "bar" - La constante es visible dentro del bloque 'if'
}
console.log(foo); // Error: 'foo' no está definido, está fuera del bloque 'if'
}
Ejemplos adicionales
Los siguientes ejemplos te pueden ayudar a comprender cómo usar const en JavaScript. Recuerda que const se utiliza para declarar variables que no cambiarán su valor después de la inicialización, lo que proporciona inmutabilidad y ayuda a escribir un código más seguro y fácil de mantener:
function blockExample() {
const a = 10;
if (true) {
const a = 20; // Es posible tener una constante con el mismo nombre en otro ámbito
console.log(a); // 20 - La constante 'a' interna tiene precedencia dentro del bloque 'if'
}
console.log(a); // 10 - La constante 'a' externa no se ve afectada por la interna del bloque 'if'
}
function iterationExample() {
const funcs = [];
for (let i = 0; i < 5; i++) {
funcs.push(() => console.log(i)); // Se captura el valor actual de 'i' en cada iteración
}
funcs.forEach(func => func()); // 0, 1, 2, 3, 4 - Cada función muestra el valor de 'i' en su iteración correspondiente
}
Resumiendo
En versiones modernas de JavaScript, como ES6 y posteriores, se recomienda utilizar let y const en lugar de var debido a los problemas asociados con su alcance y el «hoisting». Las declaraciones con let proporcionan un alcance de bloque más seguro y predecible, mientras que const se utiliza para declarar constantes inmutables. El uso adecuado de let y const mejora la legibilidad, el mantenimiento y la seguridad de tu código.
Recomendación de uso de let y const
let
let es preferible sobre var debido a su alcance de bloque, lo que significa que una variable declarada con let solo es visible dentro del bloque en el que se declara.
let ayuda a evitar problemas de hoisting y errores relacionados con la reasignación en el mismo ámbito.
let proporciona un código más claro y más seguro en comparación con var.
const:
Utiliza const para declarar constantes, es decir, valores que no cambiarán después de la inicialización.
El uso de const ayuda a que tu código sea más seguro y más fácil de entender, ya que deja claro que el valor no cambiará.
Sin embargo, ten en cuenta que const no hace que los objetos sean inmutables, solo evita la reasignación de la variable.
Ejemplo adicional con let y const
function blockExample() {
let a = 10; // Usa 'let' para evitar problemas con 'var'
const b = 20; // Usa 'const' para declarar una constante
if (true) {
let a = 100; // 'a' tiene un nuevo ámbito dentro del bloque 'if'
const b = 200; // 'b' tiene un nuevo ámbito dentro del bloque 'if'
console.log(a, b); // 100, 200
}
console.log(a, b); // 10, 20
}
Ahora que estamos cómodos añadiendo imágenes simples a una página web, el siguiente paso será empezar a agregar reproductores de audio y video a tu documento HTML. En este artículo veremos cómo hacerlo con los elementos <video> y <audio>; luego terminaremos viendo como agregar subtítulos a nuestros videos.
Vídeo y audio en Internet
Los desarrolladores web han querido usar audio y video en la web por mucho tiempo, desde comienzos del 2000 cuando empezamos a tener un ancho de banda suficientemente rápido para soportar cualquier tipo de video (los archivos de video son mucho más grandes que texto o imágenes). En los inicios, las tecnologías web nativas como HTML no tenían el soporte para incrustar audio y video en la Web, tecnologías privadas (o basadas en plugins) como Flash (y después, Silverlight) se convirtieron populares para manipular este tipo de contenido. Este tipo de tecnología funcionó bien, pero tenía ciertos problemas, incluídos el no trabajar bien con las características de HTML/CSS, problemas de seguridad y problemas de accesibilidad.
Una solución nativa podría resolver mucho de esto si es implementado correctamente. Afortunadamente, unos pocos años después la especificación HTML5 tenía tales características agregadas, con los elementos <video> y <audio>, y algo nuevo JavaScriptAPIs para controlar estos. No veremos Javascript aquí — solo los fundamentos básicos que se pueden lograr con HTML.
No te enseñaremos como crear archivos de audio y video — eso requiere un conocimiento completamente diferente. Por el contrario, te proporcionamos archivos de audio y video de muestra con códigos de ejemplo disponibles en «https://fernandoruizrico.com/test-audio-and-video/» para que tu mismo experimentes, en caso de que no puedas conseguirlos por ti mismo.
El elemento <video>
El elemento <video> nos permite incrustar video fácilmente. De la misma manera que para el elemento <img>, el atributo src (source) contiene una ruta al video que deseas incrustar. Funciona de la misma manera. Los usuarios deben ser capaces de controlar la reproducción de video y audio (esto es especialmente crítico en personas que padecen epilepsia). Se debe utilizar el atributo controls para incluir la interfaz de control del browser, o construir la nuestra utilizando la JavaScript API apropiada. Como mínimo la interfaz debe incluir una manera de empezar y terminar la reproducción, y ajustar el volumen. Un ejemplo muy simple podría ser el siguiente:
Podemos insertar un párrafo dentro de la etiqueta <video> (denominado contenido de reserva) — y será mostrado si el navegador desde el que se está accediendo a la página no soporta el elemento <video>, permitiéndonos proveer un «fallback» para navegadores más antiguos. Se puede elegir cualquier contenido para dicho párrafo; en nuestro caso proporcionamos un enlace directo al archivo de vídeo, para que el usuario pueda al menos acceder de alguna manera, independientemente del navegador que esté usando.
<video src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm" controls>
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
Atributos «width» y «height»
Podemos controlar el tamaño del vídeo con estos atributos o con CSS (esta es la opción más recomendable). En ambos casos, los vídeos mantienen su relación anchura – altura nativa. Si la relación de aspecto no se mantiene con los tamaños establecidos, el vídeo crecerá para rellenar el espacio horizontalmente y el el espacio sin rellenar sólo recibirá un color de fondo sólido de forma predeterminada. Por ejemplo, para establecer la anchura del vídeo a 720px y mantener la relación de aspecto, podemos utilizar un código similar al siguiente:
<video width="720"
src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm"
controls>
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
Ejercicio propuesto: Película de animación «Caminandes»
Crea una página web con el ejemplo anterior y copia el código tres veces para mostrar el mismo vídeo tres veces en total. Cambia el ancho para establecer un valor diferente para cada vídeo (1080, 720 y 480) y cambia también el atributo src para que corresponda con el de cada vídeo. Finalmente, verifica los resultados en tu navegador (actualiza la página web para asegurarte de que el navegador esté mostrando los últimos cambios en tu código). No olvides incluir todas las etiquetas HTML básicas necesarias y validar su código.
<video width="1080"
src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm"
controls>
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
<video width="720"
src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm"
controls>
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
...
El atributo «poster»
Puedes especificar una URL para mostrar una imagen (atributo poster) hasta que el usuario reproduzca el vídeo. Si este atributo no se especifica, no se muestra nada hasta que el primer fotograma esté disponible, momento en el cual se mostrará esa imagen como póster.
<video width="1080"
src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm"
poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg"
controls>
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
Ejercicio propuesto: Película de animación «Caminandes»
Modifica el código del ejercicio anterior, donde tienes el mismo vídeo con tres tamaños diferentes. Ahora tiene que usar el atributo poster para configurar tres imágenes diferentes (puede encontrar debajo los enlaces a los carteles, que están disponibles en https://fernandoruizrico.com/test-audio-and-video/, o puedes usar otras imágenes que te gusten). Cuando termines, verifica los resultados en tu navegador (actualiza tu página web para asegurarte de que el navegador esté mostrando los últimos cambios en tu código). No olvides incluir todas las etiquetas HTML básicas necesarias y validar tu código.
<video width="1080"
src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm"
poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg"
controls>
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
<video width="720"
src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm"
poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png"
controls>
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
...
Compatibilidad con los navegadores
Normalmente se utilizan algunos códecs para comprimir vídeo y audio para conseguir que los archivos sean más manejables, ya que el audio y el vídeo sin procesar son excesivamente grandes. Cada navegador web admite una variedad de códecs, que se utilizan para convertir el audio y el vídeo comprimidos en datos binarios y viceversa. Cada códec ofrece sus propias características positivas y negativas que afectan a las decisiones sobre cuál utilizar. Para maximizar la probabilidad de que tu sitio web o aplicación funcione en el navegador de un usuario, es posible que debas proporcionar cada archivo multimedia en varios formatos. Si tu página web y el navegador del usuario no comparten un formato en común, los ficheros de audio o vídeo simplemente no se reproducirán.
Debemos tener en cuenta un aspecto adicional respecto a este tema: los navegadores móviles pueden admitir formatos adicionales no admitidos por sus equivalentes de escritorio, al igual que es posible que no admitan los mismos formatos que la versión de escritorio. Además de eso, tanto los navegadores de escritorio como los móviles pueden estar diseñados para gestionar la reproducción de medios (ya sea para todos los formatos o solo para tipos específicos que no pueden gestionar internamente). Esto significa que la compatibilidad con los ficheros depende en parte del software que haya instalado el usuario.
Entonces, ¿cómo gestionamos la compatibilidad de formatos? Echa un vistazo al código actualizado del ejemplo:
<video width="1080"
poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png"
controls>
<source
src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm"
type="video/webm">
<source
src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.mp4"
type="video/mp4">
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
Aquí hemos quitado el atributo src del elemento <video> y en su lugar incluimos elementos separados <source> que apuntan a sus propias fuentes. En este caso el navegador irá a los elementos <source> y reproducirá el primero de los elementos que soporte. En primer lugar intentará reproducir el vídeo utilizando el formato WebM, y si no lo reconoce como válido, entonces intentará reproducir el formato MP4. Incluir fuentes WebM y MP4 debería bastar para reproducir el video en la mayoría de los navegadores actuales. Pero en cualquier caso, si el navegador no soporta ninguno de los formatos especificados, también hemos incluido el mensaje de aviso con el enlace correspondiente.
Cada elemento <source> también tiene un atributo type . Es opcional, pero se recomienda que se incluyan, ya que contienen MIME types (en-US) de los archivos de vídeo y los navegadores pueden leerlos y omitir inmediatamente los vídeos que no soporten. Si no están incluidos, los navegadores cargarán e intentarán reproducir cada archivo hasta que encuentren uno que funcione, lo que llevará aún más tiempo y un consumo de recursos innecesario.
Ejercicio propuesto: Película de animación «CaminandeS»
Tienes que modificar el código del ejercicio anterior donde tienes tres vídeos que muestran la película animada «Caminandes», cada uno con un tamaño diferente y un póster diferente. Debes insertar ahora un par de elementos fuente para que los tres vídeos contengan enlaces para los códecs webm y mp4 (puedes encontrar los enlaces en el ejemplo que tienes a continuación y también en https://fernandoruizrico.com/test-audio-and -video/). Verifica los resultados en tu navegador y no olvides añadir todas las etiquetas HTML necesarias y validar tu código.
Fíjate que el ancho del vídeo se puede ajustar a través del atributo «width», y también vamos a utilizar el atributo «poster» para establecer la imagen que se mostrará antes de que se reproduzca cada vídeo:
<video width="1080"
poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/mine.png"
controls>
<source
src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.webm"
type="video/webm">
<source
src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_1080p.mp4"
type="video/mp4">
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
<video width="720"
poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/share.png"
controls>
<source
src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm"
type="video/webm">
<source
src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4"
type="video/mp4">
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
...
Ejercicio propuesto: Película de animación «Sintel»
Crea una nueva página web con el siguiente código para mostrar la película animada «Sintel». Después de eso, duplica el código un par de veces para mostrar tres vídeos en total. Cambia el tamaño de los videos a 1080, 720 y 480 y configura los elementos <source> en consecuencia (elimina también el antiguo atributo src, de modo que obtengas un código similar al que se muestra en el siguiente ejemplo). Finalmente, cambia la imagen del póster para que cada vídeo muestre una imagen diferente cuando se acabe de cargar la página. Puedes encontrar los enlaces a los vídeos y carteles en https://fernandoruizrico.com/test-audio-and-video/, y también aquí:
<video
width="1080" controls
poster="https://fernandoruizrico.com/examples/test-media/video/sintel/stills/scales.png">
<source
src="https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.mp4"
type="video/mp4">
<source
src="https://fernandoruizrico.com/examples/test-media/video/sintel/trailer/sintel_trailer-1080p.ogv"
type="video/ogg">
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
...
Otras funcionalidades del elemento <video>
Hay varias características adicionales que puedes incluir en un vídeo HTML5. Echa un vistazo al ejemplo que aparece a continuación:
<video controls width="720"
autoplay loop muted preload="auto"
poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg">
<source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" type="video/webm">
<source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4" type="video/mp4">
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
El atributo «autoplay»
Este atributo booleano le indica al navegador que el audio o el vídeo deben empezar a reproducirse de inmediato, mientras se carga el resto de la página. Conviene puntualizar que se desaconseja utilizar la reproducción automática ya que los usuarios pueden encontrarlo un poco molesto. Puedes consultar este enlace (autoplay guide) para obtener información adicional sobre cómo usar este atributo de manera adecuada.
El atributo «loop»
Si lo activamos, el vídeo (o audio) comenzará a reproducirse de nuevo cada vez que se acabe. Esta funcionalidad también puede resultar molesta en ocasiones, por lo que se recomienda utilizarlo solo si es realmente necesario.
El atributo «muted»
Este atributo booleano indica la configuración predeterminada del audio contenido en el vídeo. Si está activado, el audio se silenciará inicialmente. Su valor predeterminado es falso, lo que significa que el audio se reproducirá cuando se reproduzca el vídeo.
El atributo «preload»
El objetivo de este atributo enumerado es proporcionar una sugerencia al navegador sobre qué cree el desarrollador que resultará en una mejor experiencia para el usuario . Puede tener uno de los siguientes valores:
«none»: sugiere bien que el desarrollador cree que el usuario no tendrá que consultar el vídeo, o que el servidor desea minimizar su tráfico; es decir, esta sugerencia indica que el vídeo no se debe almacenar en caché.
«metadata»: sugiere que aunque el autor piensa que el usuario no tendrá que consultar este vídeo, es razonable capturar los metadatos (p. ej. longitud).
«auto»: sugiere que el usuario necesita tener prioridad; es decir, esta sugerencia indica que, si es necesario, se puede descargar el vídeo completo, incluso aunque el usuario no vaya a usarlo.
la cadena vacía: que es un sinónimo del valor «auto».
Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque la especificación aconseje que se establezca a «metadata».
Ejercicio propuesto: atributos adicionales
Siguiendo los ejemplos anteriores, crea una nueva página web con tres vídeos cualquiera y establece diferentes valores de los siguientes atributos: «loop», «muted» y «preload». También puedes probar el atributo de reproducción automática, aunque debes tener en cuenta que algunos navegadores pueden tener esta función desactivada. Finalmente verifica los resultados en tu navegador y valida el código.
<video controls width="720"
loop muted
poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg">
<source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" type="video/webm">
<source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4" type="video/mp4">
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
<video controls width="720"
loop preload="metadata"
poster="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/stills/poster.jpg">
<source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.webm" type="video/webm">
<source src="https://fernandoruizrico.com/examples/test-media/video/caminandes-llamigos/caminandes_llamigos_720p.mp4" type="video/mp4">
<p>Tu navegador no soporta vídeo en formato HTML5. Haz click <a href="https://fernandoruizrico.com/test-audio-and-video/">aquí</a> para poder visualizarlo.</p>
</video>
...
Ejercicio propuesto: Tus 10 vídeos preferidos
Crea una página web para mostrar los diez vídeos que más te gusten. Debes establecer al menos los atributos de «width» y «poster» y también el elemento de <source> para asegurarte de que todos se muestren de la manera correcta, como en los ejemplos anteriores.
The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It works just like the <video> element, with a few small differences as outlined below. A typical example might look like so:
<figure>
<figcaption>Trance 2. Instrumental Background Music.</figcaption>
<audio
controls
src="https://fernandoruizrico.com/examples/test-media/audio/Twisterium-Trance2.wav">
<p>Your browser doesn't support HTML5 audio. Click <a href="https://fernandoruizrico.com/test-audio-and-video/">here</a> para poder visualizarlo.</p>
</audio>
</figure>
<figure>
<figcaption>Space battle. Space Fantasy Spot Effect.</figcaption>
<audio
controls
src="http://bbcsfx.acropolis.org.uk/assets/07042219.wav">
<p>Your browser doesn't support HTML5 audio. Click <a href="http://bbcsfx.acropolis.org.uk">here</a> instead.</p>
</audio>
</figure>
The above example shows simple usage of the <audio> element. In a similar manner to the <img> and <video> elements, we include a path to the media we want to embed inside the src attribute. We can include other attributes to specify information such as whether we want it to loop, whether we want to show the browser’s default audio controls, etc.
As with the <video> tag, the content inside the opening and closing <audio></audio> tags is shown as a fallback in browsers that don’t support the element.
This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML video are as follows:
The <audio> element doesn’t support the width/height attributes — again, there is no visual component, so there is nothing to assign a width or height to.
It also doesn’t support the poster attribute — again, no visual component.
Ejercicio propuesto: ejemplos de audio
Following the previous example, create a web page to insert at least ten figures containing audio samples. Update the caption of each figure to show a brief description of each audio file, and check the results in your browser. Do not forget to add all necessary HTML basic tags and validate your code.
By now you should really be getting the hang of embedding things into your web pages, including images, video and audio. At this point we will like to take somewhat of a sideways step, looking at an element that allow you to embed a wide variety of content types into your webpages: the <iframe> element.
Incrustar un vídeo de YouTube
In this section we are going to jump straight into an active learning example to immediately give you a real idea of just what embedding technologies are useful for. The online world is very familiar with Youtube, but many people don’t know about some of the sharing facilities it has available. Let’s look at how Youtube allows us to embed a video in any page we like using an <iframe>:
First, go to Youtube and find a video you like.
Below the video, you’ll find a Share button — select this to display the sharing options.
Select the Embed button and you’ll be given some <iframe> code — copy this.
Ejercicio propuesto: Tus 10 vídeos de YouTube preferidos
Following the previous example, create a web page to insert at least ten figures containing videos from Youtube. Update the caption of each figure to show a brief description of each video, and check the results in your browser. Do not forget to add all necessary HTML basic tags and validate your code.
Incrustar un mapa de Google Maps
You will also find quite interesting embedding a Google Map. Let’s see how to do this with an example:
Go to Google Maps and find a map you like.
Click on the «Hamburger Menu» (three horizontal lines) in the top left of the user interface.
Select the Share or embed map option.
Select the Embed map option, which will give you some <iframe> code — copy this.
Ejercicio propuesto: Tus 10 ubicaciones preferidas
Following the previous example, create a web page to insert at least ten figures containing locations from Google Maps. Update the caption of each figure to show a brief description of each location, and check the results in your browser. Do not forget to add all necessary HTML basic tags and validate your code.
Esta unidad te ayudará a comenzar con las tablas HTML. Vamos a exponer conceptos básicos como filas y celdas, encabezados, celdas que abarcan múltiples columnas y filas, y la forma de agrupar todas las celdas de una columna para aplicarles estilo en el futuro (utilizando CSS).
¿Qué es una tabla?
Una tabla es un conjunto estructurado de datos distribuidos en filas y columnas (datos tabulados). Una tabla permite buscar con rapidez y facilidad valores entre diferentes tipos de datos que indiquen algún tipo de conexión. Por ejemplo, una persona y su edad, o un horario, o información sobre diversos países, como se muestra en este ejemplo:
Países
Capitales
Población
Idioma
USA
Washington, D.C.
309 millones
Inglés
Suecia
Estocolmo
9 millones
Sueco
Las tablas se utilizan con mucha frecuencia en la sociedad desde hace años, como lo demuestra este documento censal de los EUA de 1800:
Por lo tanto, no es de extrañar que los creadores de HTML proporcionen un medio con el que estructurar y presentar datos en tablas en la web.
¿Cómo crear una tabla?
Veamos un ejemplo práctico y construyamos una tabla simple.
1. Hola, soy tu primera celda.
2. Soy tu segunda celda.
3. Soy tu tercera celda.
4. Soy tu cuarta celda.
5. Segunda fila, primera celda.
6. Segunda fila, segunda celda.
7. Segunda fila, tercera celda.
8. Segunda fila, cuarta celda.
Construyamos la tabla paso a paso:
El contenido de cada tabla está delimitado por las etiquetas <table> ... </table>:
<table>
1. Hola, soy tu primera celda.
2. Soy tu segunda celda.
3. Soy tu tercera celda.
4. Soy tu cuarta celda.
5. Segunda fila, primera celda.
6. Segunda fila, segunda celda.
7. Segunda fila, tercera celda.
8. Segunda fila, cuarta celda.
</table>
El contenedor más pequeño dentro de una tabla es la celda, que se crea utilizando el elemento <td> (‘td’ significa ‘table data’). Pondremos el contenido de cada celda entre estas etiquetas:
<table>
<td>1. Hola, soy tu primera celda.</td>
<td>2. Soy tu segunda celda.</td>
<td>3. Soy tu tercera celda.</td>
<td>4. Soy tu cuarta celda.</td>
<td>5. Segunda fila, primera celda.</td>
<td>6. Segunda fila, segunda celda.</td>
<td>7. Segunda fila, tercera celda.</td>
<td>8. Segunda fila, cuarta celda.</td>
</table>
Como se puede observar, las celdas no se colocan unas debajo de las otras, sino que se distribuyen automáticamente en la misma fila. Cada elemento <td> crea una celda individual, que se va colocando al final de la fila, haciendo que cada celda que añadamos incremente el tamaño de la fila. Para conseguir que la fila pare de crecer y las siguientes celdas se coloquen en una segunda fila, debemos usar el elemento <tr> (‘tr’ significa ‘table row’). Vamos a hacer esto ahora (encerraremos cada fila en un elemento <tr>, y dentro tendremos los elementos <td> con los contenidos individuales de cada celda):
<table>
<!-- Primera fila -->
<tr>
<td>1. Hola, soy tu primera celda.</td>
<td>2. Soy tu segunda celda.</td>
<td>3. Soy tu tercera celda.</td>
<td>4. Soy tu cuarta celda.</td>
</tr>
<!-- Segunda fila -->
<tr>
<td>5. Segunda fila, primera celda.</td>
<td>6. Segunda fila, segunda celda.</td>
<td>7. Segunda fila, tercera celda.</td>
<td>8. Segunda fila, cuarta celda.</td>
</tr>
</table>
Importante: Bordes de la tabla
Por defecto, el navegador no mostrará los bordes de las tablas. Para conseguir que se muestren los bordes, usaremos un poco de código CSS. De momento insertaremos el siguiente código en la sección <head> de cada fichero html que creemos (aprenderemos el significado de este código en otra unidad):
Crea una tabla de dos columnas y al menos diez filas, e inserta varias imágenes, como se muestra en el ejemplo anterior (con bordes). Copia la misma tabla en un archivo nuevo y añade el código CSS necesario para observar el resultados ahora sin bordes.
Ahora prestemos atención a los encabezados de las tablas. Son celdas especiales que van al comienzo de una fila o columna y definen el tipo de datos que contiene esa fila o columna. Para ilustrar por qué son útiles, primero echemos un vistazo a la siguiente tabla:
Table without headers
Dog name
Breed
Age
Eating Habits
Knocky
Jack Russell
12
Eats everyone’s leftovers
Poppy
Poodle
9
Nibbles at food
Buddy
Streetdog
10
Hearty eater
Bailey
Cocker Spaniel
5
Will eat till he explodes
Como podemos observar, aunque se puede distinguir perfectamente el contenido de la tabla, no resulta tan fácil hacer referencias cruzadas. Si los encabezados de columna y fila destacaran de alguna manera, podríamos interpretar más fácilmente el contenido de las celdas.
Para reconocer los encabezados de la tabla como encabezados, tanto visual como semánticamente, puedes usar el elemento <th> (‘th’ significa ‘table header’, encabezado de tabla). Funciona exactamente igual que un <td>, excepto que denota un encabezado, no una celda normal. Si cambiamos todos los elementos <td> de la tabla por elementos <th>, los datos que contienen se verán resaltados por defecto de alguna forma. Por ejemplo:
Table with headers
Dog name
Breed
Age
Eating Habits
Knocky
Jack Russell
12
Eats everyone’s leftovers
Poppy
Poodle
9
Nibbles at food
Buddy
Streetdog
10
Hearty eater
Bailey
Cocker Spaniel
5
Will eat till he explodes
En el futuro cambiaremos los estilos de los elementos <td> y <th> utilizando CSS. Por ahora, concentrémonos en el código HTML:
Crea una página web con una tabla similar a la del ejemplo anterior, para guardar la información de todos los clientes de un paseador de perros. Primero debe agregar tres columnas adicionales (para mantener el nombre de los propietarios, sus números de teléfono y las fotos de los perros). Después de eso, debes insertar varias filas para mostrar los datos de al menos diez perros.
En este caso puedes utilizar otro sitio web para obtener imágenes de prueba sobre perros: «https://placedog.net/images«. Accede a esta URL y sigue las instrucciones que aparecen en la parte superior de la página para insertar cada imagen. Por ejemplo:
Dog name
Owner
Phone number
Breed
Age
Eating Habits
Picture
Knocky
Fernando Ruiz
111222333
Jack Russell
12
Eats everyone’s leftovers
Poppy
John Doe
222333444
Poodle
9
Nibbles at food
Buddy
Peter Stark
333444555
Street dog
10
Hearty eater
Bailey
Steve Doe
666777888
Cocker Spaniel
5
Will eat till he explodes
…
…
…
…
…
…
…
Añadir un título a tu tabla con <caption>
Puedes dar un título a tu tabla colocándolo dentro de un elemento <caption> y anidándolo dentro del elemento <table>. Debes ponerlo justo debajo de la etiqueta de apertura <table>:
<table>
<caption>Dinosaurios en el período Jurásico</caption>
...
</table>
Como puedes deducir a partir del breve ejemplo anterior, el título debe contener una descripción del contenido de la tabla. Esto es útil para todos los lectores que deseen descubrir de un vistazo si la tabla les resulta útil mientras ojean la página, pero es útil especialmente para usuarios ciegos. En lugar de que un lector de pantalla lea el contenido de muchas celdas solo para averiguar de qué trata la tabla, el lector puede contar con el título para luego decidir si leer la tabla con mayor detalle.
Ejercicio propuesto: Tabla sencilla con título y encabezados
Crea una página web con una tabla similar a la siguiente e inserta algunas filas adicionales (al menos diez).
Utiliza un elemento <caption> para poner el texto «Tabla simple con encabezados», y utiliza el elemento <th> para los encabezados «Nombre» and «Apellidos» headers.
Tabla simple con encabezados
Nombre
Apellidos
John
Doe
Fernando
Ruiz
…
…
Ejercicio propuesto: Lista de países
Crea una tabla con cinco columnas y al menos diez filas, e inserta los datos relacionados con varios países. Puedes enumerar, por ejemplo, los nombres de los países, sus capitales, su población, el idioma y varias imágenes, como hicimos en el ejemplo al principio de la unidad, pero añadiendo una nueva columna para mostrar una imagen. Tienes que usar encabezados de tabla (<th>) y un título (<caption>). Tu tabla se debería parecer a la que se muestra a continuación.
Puedes usar de nuevo la web «https://picsum.photos/images» para coger diversas imágenes que puedan resultar representativas de cada país.
Countries I like
Countries
Capitals
Population
Language
Images
USA
Washington, D.C.
309 million
English
Sweden
Stockholm
9 million
Swedish
…
…
…
…
…
Ampliar las filas y las columnas
Para proporcionar control adicional sobre cómo las celdas se ajustan o se expanden sobre las columnas, podemos usar el atributo colspan en los elementos <th> y <td>. Este atributo nos permitirá especificar cuántas columnas debe ocupar una celda (el valor por defecto es 1). De forma similar, podemos utilizar el atributo rowspan para especificar sobre cuántas filas se extiende una determinada celda.
El siguiente ejemplo muestra una tabla muy sencilla que enumera los nombres de las personas junto con información diversa sobre la membresía en un club. Hay solo cuatro filas (incluida una fila de encabezado), cada una con cuatro columnas (incluida una columna de encabezado):
Añadamos ahora otra columna que muestre la fecha en que finalizó la membresía de un usuario, junto con un encabezado sobre las fechas de «afiliación» y «cancelada» llamada «Fechas de membresía». Esto implica agregar intervalos de filas y columnas a la tabla, de modo que las celdas de encabezado puedan terminar en los lugares correctos. Veamos primero cómo quedaría la tabla:
Name
ID
Membership Dates
Balance
Joined
Canceled
Margaret Nguyen
427311
n/a
0.00
Edvard Galinski
533175
37.00
Hoshi Nakamura
601942
n/a
15.00
Observa que el área de encabezado aquí ocupa en realidad dos filas, una con los encabezados «Nombre», «ID», «Fechas de membresía» y «Saldo», y la otra con los encabezados «Afiliación» y «Cancelado», que son los subtítulos que aparecen debajo de «Fechas de membresía». Esto se logra mediante:
Poniendo los encabezados de la primera fila («Name», «ID», y «Balance») en una celda que se expanda a la fila siguiente, utilizando el atributo rowspan, de forma que tengan una altura de dos filas.
Poniendo el encabezado «Membership Dates» de la primera fila en una celda que se expanda a la siguiente columna usando el atributo colspan attribute, que provocará que el encabezado tenga una anchura de dos columnas.
Creando una segunda fila de elementos <th> que contenga los encabezados «Joined» y «Canceled». Como las otras celdas ya están ocupadas por sus equivalentes en la primera fila, y se expanden a la segunda, las nuevas celdas se deberían colocar correctamente debajo del encabezado «Membership Dates».
El código HTML es similar al del ejemplo anterior, excepto que debemos añadir una nueva columna en cada fila, y también tenemos que cambiar el encabezado, para que quede de la siguiente forma:
Las diferencias que importan aquí (relativas a la expansión de filas y columnas) se encuentran en las primeras líneas del código del ejemplo anterior. Simplemente utilizamos rowspan para conseguir que los encabezados «Name», «ID», y «Balance» ocupen dos filas en vez de una, y usamos colspan para conseguir que el encabezado «Membership Dates» se extienda a lo largo de dos columnas.
Ejercicio propuesto: Tu horario
Crea una página web para mostrar tu horario del instituto. Deberías crear una tabla similar a la que se muestra a continuación.
Se deben utilizar elementos <th> para los encabezados, y el atributo colspan para los recreos. También puedes usar el elemento <strong> para resaltar el nombre de la asignatura de cada celda.
Monday
Tuesday
Wednesday
Thursday
Friday
07:55h
Computer Safety Peter Williams
Computer Safety Peter Williams
Computer Safety Peter Williams
08:50h
Network Services Samuel Holland
Computer Safety Peter Williams
Network Services Samuel Holland
Computer Safety Peter Williams
09:45h
Network Operating Systems Lucy Scott
Network Services Samuel Holland
Web Applications Fernando Ruiz
Network Services Samuel Holland
Network Services Samuel Holland
10:40h
B R E A K
11:00h
Network Operating Systems Lucy Scott
Network Operating Systems Lucy Scott
Business and Entrepreneurial Initiative Rick Harris
Web Applications Fernando Ruiz
Network Services Samuel Holland
11:55h
Business and Entrepreneurial Initiative Rick Harris
Network Operating Systems Lucy Scott
Network Operating Systems Lucy Scott
Web Applications Fernando Ruiz
Web Applications Fernando Ruiz
12:50h
B R E A K
13:10h
Network Services Samuel Holland
Business and Entrepreneurial Initiative Rick Harris
Network Operating Systems Lucy Scott
Network Operating Systems Lucy Scott
Web Applications Fernando Ruiz
14:05h
Network Services Samuel Holland
Web Applications Fernando Ruiz
Network Operating Systems Lucy Scott
Estructurar la tabla con <thead>, <tbody> and <tfoot>
A medida que la estructura de las tablas se vuelve más compleja, es útil darles una estructura más definida. Una forma clara de hacerlo es con <thead>, <tfoot> y <tbody>, que te permiten marcar un encabezado, un pie de página y una sección del cuerpo de la tabla.
The table header
First cell in the table body
Second cell in the table body
<table>
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>First cell in the table body</td>
<td>Second cell in the table body</td>
</tr>
</tbody>
</table>
Estos elementos no mejoran las características de accesibilidad de la tabla para los usuarios de lectores de pantalla ni su aspecto visual en sí. Sin embargo, son muy útiles para la aplicación de estilo y la compaginación, porque actúan como soportes útiles para añadir CSS a tu tabla. Como ejemplos interesantes, en el caso de una tabla extensa, puedes hacer que el encabezado y el pie de página se repitan en cada página impresa, y también que el cuerpo de la tabla se muestre en una sola página y desplazarte por los contenidos arriba y abajo con la barra de desplazamiento.
Para utilizar todos estos elementos solo debes tener en cuenta las siguientes consideraciones:
El elemento <thead> debe delimitar el encabezado de la tabla; esta suele ser la primera fila, que contiene los encabezados de las columnas, pero no siempre es así. Si utilizas los elementos <col>/<colgroup>, el encabezado de la tabla debe estar justo debajo.
El elemento <tfoot> delimita la parte de la tabla correspondiente al pie de página; esta podría ser una fila final con elementos en las filas anteriores. Puedes incluir el pie de página de la tabla justo en la parte inferior de la tabla, donde esperarías que esté, o justo debajo del encabezado (y el navegador lo mostrará aun así en la parte inferior de la tabla).
El elemento <tbody> delimita las otras partes del contenido de la tabla que no están en el encabezado o en el pie de página de la tabla. Aparecerá debajo del encabezado de la tabla o, a veces, en el pie de página, según cómo hayas decidido estructurarlo.
Los elementos <thead> +<tbody>
Añadamos por ejemplo los elementos <thead> y <tbody> a la tabla de los miembros del club:
Crea una página web para mostrar una lista con los miembros de un club, tal como lo hemos hecho en el ejemplo anterior. Puede usar el mismo código fuente que se explicó anteriormente, pero debes añadir un par de columnas: una para escribir la dirección de correo electrónico de cada miembro y la otra para mostrar sus fotos. También debes añadir varias filas a la tabla para que contenga al menos diez miembros del club (puede usar nombres, fechas y saldos aleatorios).
Los elementos <thead> +<tbody> +<tfoot>
Ahora vamos a ver todos estos nuevos elementos en acción con otra tabla, donde usaremos todas las secciones posibles (<thead>, <tbody> y <tfoot>). Echa un vistazo al siguiente ejemplo:
How I chose to spend my money
Purchase
Location
Date
Evaluation
Cost (€)
SUM
118
Haircut
Hairdresser
12/20
Great idea
30
Lasagna
Restaurant
12/20
Regrets
18
Shoes
Shoeshop
13/20
Big regrets
65
Toothpaste
Supermarket
13/20
Good
5
Debemos poner las filas de los encabezados dentro del elemento <thead>, la fila de la suma dentro de un elemento <tfoot>, y el resto del contenido dentro de un elemento <tbody>. Verás que añadiendo el elemento <tfoot> provoca que la fila de la suma se coloque al final de la tabla. Y para acabar, añadiremos el atributo colspan para conseguir que la celda de la suma se expanda por las cuatro primeras columnas. De esta forma, el número aparece debajo de la columna de costes.
Crea una página web para especificar cómo gastarías tu dinero. Puedes usar el mismo código fuente que en el ejemplo anterior, pero debes realizar los siguientes cambios: agrega varias filas con cualquier cosa que te gustaría hacer (al menos diez filas), y finalmente en la columna «Ubicación» debes usar imágenes en lugar de texto.
Puedes acceder de nuevo a la página web «https://picsum.photos/images» para obtener imágenes de tus sitios preferidos.
Ejercicio propuesto: Títulos
Añade títulos a las tablas que has creado anteriormente y que aún no tienen ningún título. No olvides volver a validar tu código.
Ejercicio propuesto: Estructura de tabla
Añade secciones de encabezado, pie y cuerpo a todas las tablas que hayas creado en ejercicios anteriores y aún no tengan esas secciones. No olvides volver a validar tu código.
Una vez examinados los conceptos básicos, vamos a ver más en detalle los elementos que se utilizan para proporcionar estructura y significado a las diferentes partes de un formulario. La flexibilidad que presentan los formularios los convierte en una de las estructuras más complejas y completas en HTML, puesto que puedes crear cualquier tipo de formulario básico a partir de los elementos y atributos destinados a esta función. El uso de una estructura correcta al crear un formulario HTML te ayudará a garantizar que el formulario presente las características de usabilidad y accesibilidad adecuadas.
El elemento <form>
Tal como explicamos en la unidad anterior, el elemento <form> se utiliza para definir un formulario y los atributos que determinan el comportamiento su comportamiento. Cada vez que desees crear un formulario HTML, debes empezar utilizando este elemento y anidando todo el contenido dentro de él. Muchas tecnologías de asistencia y complementos del navegador pueden descubrir elementos <form> e implementar códigos de apoyo (hooks) especiales para que sean más fáciles de usar.
Es posible usar controles de formulario fuera de un elemento <form>. Si lo haces, por defecto ese control no tendrá nada que ver con ningún formulario específico, a menos que lo asocies a algún formulario con el atributo form. Esto se introdujo para permitir vincular explícitamente un control a un formulario, incluso si este no está dentro de él.
A continuación vamos a exponer los elementos estructurales que puedes utilizar en un formulario.
Los elementos <fieldset> y <legend>
El elemento <fieldset> es una forma cómoda de crear grupos de controles de formulario (también denominados widgets) que comparten el mismo propósito, con fines semánticos y de aplicación de estilo. Puedes etiquetar un elemento <fieldset> incluyendo un elemento <legend> justo debajo de la etiqueta de apertura <fieldset>. El contenido textual del elemento <legend> describe formalmente el propósito del elemento <fieldset> que está incluido dentro.
For maximum usability/accessibility, you are advised to surround each list of related items in a <fieldset>, with a <legend> providing an overall description of the list. Each individual pair of <label>/<input> elements should be contained in its own list item (or similar). The associated <label> is generally placed immediately after the radio button or checkbox, with the instructions for the group of radio button or checkboxes generally being the content of the <legend>. See the examples in the previous unit for structural examples.
Muchas tecnologías de asistencia utilizarán el elemento <legend> como si fuera una parte de la etiqueta de cada control dentro del elemento <fieldset> correspondiente. Por ejemplo, algunos lectores de pantalla como Jaws y NVDA leerán el contenido de la leyenda antes de decir la etiqueta de cada control.
Al leer el formulario anterior, un lector de pantalla dirá «Tamaño del zumo de fruta: pequeño» para el primer control de formulario, «Tamaño del zumo de fruta: mediano» para el segundo y «Tamaño del zumo de fruta: grande» para el tercero.
El caso de uso que se muestra en este ejemplo es uno de los más importantes. Cada vez que tengas un conjunto de botones de opción, debes anidarlos dentro de un elemento <fieldset>. Hay otros casos de uso y el elemento <fieldset> también se puede usar en general para seccionar un formulario. Idealmente, si un formulario se alarga mucho , colocar las diferentes secciones relacionadas dentro de diferentes conjuntos de campos mejora su usabilidad.
Proposed exercise: Drink and hamburger
Using the code of the previous example, create a web page to choose the size of both a drink and a hamburger, each one inside a different <fieldset> with the corresponding <legend>. Also, as done before, the user should be able to choose among three different sizes: small, medium and large:
A form with sections
Beyond the structures specific to web forms, it’s good to remember that form markup is just HTML. This means that you can use all the power of HTML to structure a web form. As you can see in the examples, it’s common practice to wrap a label and its widget with a <p> element within. Lists are also recommended for structuring multiple checkboxes or radio buttons.
In addition to the <fieldset> element, it’s also common practice to use HTML titles (e.g. <h1>, <h2>) and sectioning (e.g. <section>) to structure complex forms. Above all, it is up to you to find a comfortable coding style that results in accessible, usable forms. Each separate section of functionality should be contained in a separate <section> element, with <fieldset> elements to contain radio buttons.
Let’s put these ideas into practice and build a slightly more involved form — a payment form. This form will contain more control types than the previous example. Read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.
First, we will create the form by adding the outer <form> element:
<form>
...
</form>
Inside the <form> tags, we will add a heading and paragraph to inform users how required fields are marked:
<form>
<h1>Payment form</h1>
<p>Required fields are followed by <strong>*</strong>.</p>
...
</form>
We’ll also add a simple <button> of type submit, at the bottom of the form, for submitting the form data:
<form>
<h1>Payment form</h1>
<p>Required fields are followed by <strong>*</strong>.</p>
...
<p><button type="submit">Validate the payment</button></p>
</form>
Next we’ll add a larger section of code into the form, below our previous entry. Here you’ll see that we are wrapping the contact information fields inside a distinct <section> element. Moreover, we have a set of three radio buttons, each of which we are putting in a new line. We also have two standard text <input> and their associated <label> elements, each contained inside a <p>, and a password input for entering a password:
The second <section> of our form is the payment information. We have three distinct controls along with their labels, each contained inside a <p>. The first is a drop-down menu (<select>) for selecting credit card type. The second is an <input> element of type tel, for entering a credit card number; while we could have used the number type, we don’t want the number’s spinner UI. The last one is an <input> element of type date, for entering the expiration date of the card; this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers.
Utilizando el código del ejemplo anterior, crea un formulario de pago más sofisticado. Dentro de la sección «Información de contacto», debes añadir un grupo de botones de opción para que el usuario pueda seleccionar su estado (ya sea «Estudiante», «Profesor» u «Otro») y un nuevo campo de texto para introducir el número de teléfono. Y dentro de la sección «Información de pago» tienes que añadir una nueva casilla de selección para que el usuario pueda elegir el tipo de pago preferido (ya sea «Tarjeta de crédito» o «Paypal») y un nuevo campo de correo electrónico para introducir la cuenta Paypal:
A real example: search engine forms
Searching for text
Let’s now create a simple form which will provide all necessary data (a simple text) to be passed to some of the most known search engines:
You will notice that when you press the submit button, the query (q parameter) is included in the url, and this way the search engine will know what to search. For example, if we are searching the word «dogs» on Google, the resulting url when submitting the form will be this one: https://www.google.es/search?q=dog.
Proposed exercise: Text search
Using the example of the form above to search information on Google, DuckDuckGo and Bing, develop a web page similar to the one below to search information on several search engines (at least five).
The only difference from one form to another is the value of the action attribute («https://google.com/search», «https://duckduckgo.com/», «https://bing.com/search», «https://www.ecosia.org/search», «https://search.givewater.com/serp», etc.). This address can be guessed by having a look at the url when you are using each particular search engine.
Searching for images
Now we will change the code a little bit so that the results provided by the search engines are images instead of text. In some cases we only need to change the action attribute, but sometimes we have to add some additional fields:
You will notice that when you press the submit button, those hidden fields (which are not entered by the user) are included automatically in the url so that the search engine knows that has to show images instead of text. This way, in this example we are passing two parameters: q (the search string) and tbm (to search for images). For example, if we are searching for images about dogs on Google, the resulting url when submitting the form will be this one: https://www.google.es/search?q=dog&tbm=isch.
Proposed exercise: Image search
Using the code of the previous exercise, develop a new web page to search for images on several search engines (at least five).
To search for images using Bing and Ecosia, you only have to use the right value for the action attribute («https://bing.com/images/search», «https://www.ecosia.org/images»). You only have to use the hidden fields for Google (tbm), DuckDuckGo (iax, ia) and giveWater (qc), as done in the example above. Both the addresses and the hidden fields can be guessed by having a look at the url when you are using each particular search engine.
Choosing between text and image search
Now let’s concentrate on Google’s search engine and let’s go one step forward to add a checkbox to give the user the option to choose between searching for text or images:
Develop a web page to search either text or images on Google and giveWater search engines. You have to provide the user with a checkbox so that can easily change from one type to another:
Filtering the results
Finally let’s concentrate again on Google’s search engine to add several controls so that the user can filter the results when searching for images. We will also add a reset button to set the default values:
As you will see, we have added many options to set different values for a parameter called «tbs» (we have guessed this parameter and all its possible values by looking at the url when searching for any information on Google). This way, in this example we are passing three parameters: q (the search string), tbm (to search for images) and tbs (to filter the results). For example, if we are searching for GIF images about dogs, the resulting url when submitting the form will be this one: https://www.google.es/search?q=dog&tbm=isch&tbs=itp:animated.
Also you will notice that inside each <select> element we are using a default option: <option selected disabled>...</option> so that by default, none of the available options are selected and the results are not filtered.
Proposed exercise: Filtering images with dropdown boxes
Using the code of the previous example, develop a web page to search for images on Google and filter the results using several dropdown boxes:
Proposed exercise: Filtering images with radio buttons
Create a new web page to search for images on Google and filter the results using radio buttons:
Esta unidad proporciona instrucciones y ejemplos que te ayudarán a aprender los conceptos básicos de los formularios web, que son una de las principales herramientas para interactuar con los usuarios. Por lo general, se utilizan para recopilar datos o para permitirles controlar una interfaz de usuario. Sin embargo, por razones históricas y técnicas, no siempre es obvio cómo utilizarlos en todo su potencial. En las secciones que se enumeran a continuación, cubriremos todos los aspectos esenciales de los formularios web, incluido el marcado de su estructura HTML, la validación de los datos del formulario y el envío de datos al servidor.
¿Qué son los formularios web?
Los formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento (puedes consultar Enviar los datos de un formulario para más detalles), o se usan en el lado del cliente para provocar de alguna manera una actualización inmediata de la interfaz (por ejemplo, se añade otro elemento a una lista, o se muestra u oculta una función de interfaz de usuario).
El código HTML de un formulario web está compuesto por uno o más controles de formulario (a veces llamados widgets), además de algunos elementos adicionales que ayudan a estructurar el formulario general (a menudo se los conoce como formularios HTML). Los controles pueden ser campos de texto de una o varias líneas, cajas desplegables, botones, casillas de verificación o botones de opción, y se crean principalmente con el elemento <input>, aunque hay algunos otros elementos que también hay que conocer.
Los controles de formulario también se pueden programar para forzar la introducción de formatos o valores específicos (validación de formulario), y se combinan con etiquetas de texto que describen su propósito para los usuarios con y sin discapacidad visual.
Campos de un formulario
En las próximas secciones crearemos formularios web funcionales. Para ello presentaremos primero algunos controles de formulario y elementos estructurales comunes, y nos centramos también en las mejores prácticas de accesibilidad. A continuación, veremos con detalle las funciones de los diferentes controles de formulario, o widgets, y estudiaremos todas las diferentes opciones de que se dispone para la recopilación de diferentes tipos de datos. En este sección en particular, veremos el conjunto original de controles de formulario, disponible en todos los navegadores desde los primeros días de la web.
El elemento <label>
El elemento <label> nos permite definir una etiqueta para un control de un formulario HTML. Este es el elemento más importante si deseas crear formularios accesibles porque cuando se implementan correctamente, los lectores de pantalla leen la etiqueta de un elemento de formulario junto con las instrucciones relacionadas, y esto además resulta muy útil para los usuarios videntes. Tomemos este ejemplo que vimos en el artículo anterior:
Existe otra forma de asociar un control de formulario con una etiqueta. Un elemento <label> también se pueden asociar correctamente con un elemento <input> por su atributo for (que contiene el atributo id del elemento <input>):
Con la etiqueta <label> asociada correctamente con <input> por su atributo for (que contiene el atributo id del elemento <input>), un lector de pantalla leerá algo como «Nombre, editar texto». Si no hay ninguna etiqueta, o si el control de formulario no está asociado implícita o explícitamente con alguna etiqueta, un lector de pantalla leerá algo así como «Editar texto en blanco», lo cual no es de mucha ayuda.
¡También se puede hacer clic en las etiquetas!
Otra ventaja de configurar correctamente las etiquetas es que puedes hacer clic o pulsar en la etiqueta para activar el control de formulario correspondiente. Esto es útil para controles como entradas de texto, donde puedes hacer clic tanto en la etiqueta como en la entrada de texto para proporcionar el foco al control de formulario, pero es útil especialmente para botones de opción y casillas de verificación, porque la zona sensible de este control puede ser muy pequeña, y puede ser útil para facilitar su activación.
Por ejemplo, al hacer clic en el texto de la etiqueta «Me gustan las cerezas» del ejemplo siguiente, cambiará el estado seleccionado de la casilla de verificación cereza:
<label>
<input type="checkbox" name="cereza" value="cereza" />
Me gustan las cerezas
</label><br />
<label>
<input type="checkbox" name="platano" value="platano" />
Me gustan los plátanos
</label><br />
Campos de entrada de texto
Los campos de texto <input> son los controles de formulario más básicos, y permiten al usuario introducir cualquier tipo de datos. Pueden tomar muchas formas diferentes según el valor de su atributo type. Se utiliza para crear la mayoría de los tipos de controles de formulario, que incluyen campos de texto de una sola línea, controles para la fecha y la hora, y también controles sin introducción de texto, como casillas de verificación, selectores de opción y selectores de color, e incluso botones.
Todos los controles de texto básicos comparten algunos comportamientos comunes:
Se pueden marcar como readonly (el usuario no puede modificar el valor de entrada, pero este se envía con el resto de los datos del formulario) o disabled (el valor de entrada no se puede modificar y nunca se envía con el resto de los datos del formulario).
Pueden tener un placeholder: se trata de un texto que aparece dentro de la caja de entrada de texto y que se usa para describir brevemente el propósito de la caja de texto.
Pueden presentar una limitación de tamaño (el tamaño físico de la caja de texto) y de la extensión máxima (el número máximo de caracteres que se pueden poner en la caja de texto).
Debemos tener en cuenta que los campos de texto de los formularios HTML son controles de entrada de texto sencillos sin formato. Esto significa que no puedes usarlos para aplicar una edición enriquecida (negrita, cursiva, etc.). Todos los controles de formulario que encuentres con texto enriquecido son controles de formulario personalizados creados con HTML, CSS y JavaScript.
Campos de texto de una sola línea
Un campo de texto de una sola línea se crea utilizando un elemento <input> cuyo valor de atributo type se establece en text, u omitiendo por completo el atributo type (text es el valor predeterminado). El valor text de este atributo también es el valor alternativo si el navegador no reconoce el valor que has especificado para el atributo type (por ejemplo, si especificas type="color" y el navegador no está dotado en origen de un control de selección de colores).
Veamos este ejemplo en el que aparecen un par de campos de texto de una sola línea:
<label>
Nombre (de 5 a 10 caracteres):
<input type="text" name="nombre" required
minlength="5" maxlength="10" size="15"
placeholder="Escriba aquí su nombre">
</label><br />
<label>
Comentario:
<input type="text" name="comentario" required
placeholder="Escriba aquí su comentario">
</label><br />
HTML5 ha mejorado el campo de texto básico original de una sola línea al añadir valores especiales para el atributo type que imponen restricciones de validación específicas y otras características, por ejemplo, específicas para introducir direcciones URL o números. Los expondremos más adelante, y también puedes encontrar más información en el siguiente enlace: Los tipos de entrada en HTML5.
Campo de contraseña
Uno de los tipos de entrada originales era el tipo de campo de texto password:
El valor de la contraseña no añade restricciones especiales al texto que se introduce, pero oculta el valor que se introduce en el campo (por ejemplo, con puntos o asteriscos) para impedir que otros puedan leerlo.
Ten en cuenta que esto sólo se aplica a nivel de interfaz de usuario; a menos que envíes tu formulario en modo seguro, se enviará como texto plano, lo que es malo desde el punto de vista de la seguridad porque alguien con malas intenciones podría interceptar tus datos y robar tus contraseñas, datos de tarjetas de crédito o cualquier otra cosa que hayas enviado. La mejor manera de proteger a los usuarios de esto es alojar cualquier página que contenga formularios en una ubicación de conexión segura (es decir, en una dirección https://), de modo que los datos se cifren antes de enviarse.
Los navegadores reconocen las implicaciones de seguridad de enviar datos de formulario por una conexión insegura y disponen de mensajes de advertencia para disuadir a los usuarios de usar formularios no seguros. Para obtener más información sobre las implementaciones de Firefox al respecto, consulta el artículo Contraseñas inseguras.
Campos de texto de varias líneas
El elemento <textarea> representa un control de edición de texto de varias líneas, útil cuando deseas permitir que los usuarios introduzcan una cantidad considerable de texto, por ejemplo, un comentario de una revisión o en un formulario de contactar:</p>
<label>Cuéntanos tu historia:
<textarea name="historia" rows="5">
Era una noche oscura y tormentosa...
</textarea>
</label>
Puede usar los atributos rows y cols para especificar el tamaño exacto para el campo <textarea>. Establecer estos a veces es una buena idea para mantener la coherencia, ya que los valores predeterminados del navegador pueden diferir. También estamos usando un contenido predeterminado (el que aparece entre las etiquetas de apertura y cierre), ya que <textarea> no admite el atributo value, tal como veremos en la próximo sección.
El elemento <textarea> también acepta algunos atributos comunes de los que también disponen los elementos <input>, tales como autocomplete, autofocus, disabled, placeholder, readonly, and required.
Valores por defecto en los cuadros de texto
A continuación vamos a exponer una de las rareas que presenta HTML respecto a la sintaxis de <input> en contraposición con la de <textarea></textarea>. La etiqueta <input> es un elemento vacío, lo que significa que no necesita una etiqueta de cierre. Sin embargo, el elemento <textarea> no es un elemento vacío, lo que significa que debe cerrarse con la etiqueta de cierre adecuada. Esto tiene un impacto en una característica específica de los formularios: el modo en que se define el valor predeterminado. Para definir el valor por defecto de un elemento <input>, debemos usar el atributo value de esta manera:
<input type="text" value="por defecto este elemento se llena con este texto">
Por otro lado, si queremos definir un valor predeterminado para un elemento <textarea>, debemos colocarlo entre las etiquetas de apertura y cierre del elemento <textarea>, de esta forma:
<textarea>
Por defecto, este elemento contiene este texto
</textarea>
Casillas de verificación y botones de opción
Los elementos de selección (o checkable items, en inglés) son controles cuyo estado puede cambiar cuando se hace clic en ellos o en sus etiquetas asociadas. Hay dos tipos de elementos de selección: las casillas de verificación (o check boxes) y los botones de opción (o radio buttons). Ambos usan el atributo checked para indicar si el control de formulario está seleccionado por defecto o no.
Vale la pena señalar que estos controles no se comportan exactamente como otros controles de formulario. Para la mayoría de los controles de formulario, cuando se envía el formulario, se envían todos los controles que tienen un atributo name, incluso si en ellos no se ha introducido ningún valor. En el caso de elementos de selección, sus valores se envían solo si están seleccionados. Si no están seleccionados, no se envía nada, ni siquiera su nombre. Si están seleccionados pero no tienen ningún valor asignado, el nombre se envía con el valor on.
Casillas de verificación
Las casillas de verificación se crean estableciendo el atributo type del elemento <input> con el valor checkbox. Los elementos de este tipo se suelen representar como casillas que se marcan al activarse, como las que se pueden ver en muchos formularios oficiales en papel. La apariencia exacta depende de la configuración del sistema operativo en el que se ejecuta el navegador. Generalmente se trata de un cuadrado, pero puede tener esquinas redondeadas. Una casilla de verificación permite seleccionar diversas opciones para enviarlas en un formulario.
Al incluir el atributo checked, la casilla de verificación se marca automáticamente cuando se carga la página. Al hacer clic en la casilla de verificación o en su etiqueta asociada, la casilla de verificación se activa o desactiva.
Debido a su naturaleza activa-inactiva, las casillas de verificación se consideran botones de conmutación, y muchos desarrolladores y diseñadores han ampliado el estilo de casilla de verificación predeterminado para crear botones que parecen interruptores de conmutación. Aquí puedes ver un ejemplo (y también puedes observar el código fuente).
Botones de opción
Un botón de opción se crea estableciendo el atributo type del elemento <input> en el valor radio. Los elementos de este tipo se utilizan generalmente en grupos (colecciones de botones del mismo tipo que describen un conjunto de opciones relacionadas). Solo se puede seleccionar un botón de opción en un grupo determinado al mismo tiempo. Los botones de opción se representan normalmente como círculos pequeños, que se rellenan o resaltan cuando se seleccionan.
Veamos el código fuente de un ejemplo simple que contiene varios botones de opción y cómo lo representa un navegador:
Como hemos visto en este último ejemplo, es posible asociar diversos botones de opción. Si comparten el mismo valor de atributo name, se considera que están en el mismo grupo de botones. Solo un botón dentro de un grupo puede estar activado en cada momento. Esto significa que cuando uno de ellos se selecciona, todos los demás se deseleccionan automáticamente. Al enviar el formulario, solo se envía el valor del botón de opción seleccionado. Si ninguno de ellos está seleccionado, se considera que el conjunto completo de botones de opción está en un estado desconocido y no se envía ningún valor con el formulario. Cuando en un grupo de botones con el mismo nombre se selecciona uno de los botones de opción, no es posible deseleccionar todos los botones sin reiniciar el formulario.
El elemento <select>
El elemento select (<select>) de HTML representa un control que muestra un menú de opciones. Las opciones contenidas en el menú son representadas por elementos <option>, los cuales pueden ser agrupados por elementos <optgroup>. Además, una determinada opción puede estar preseleccionada al cargarse la página.
Veamos el siguiente ejemplo de código y cómo lo representa el navegador:
<label>Escoge la mascota que más te guste:
<select name="mascota" id="mascota">
<option value="">--Selecciona una opción--</option>
<option value="perro">Perro</option>
<option value="gato">Gato</option>
<option value="hamster">Hamster</option>
<option value="loro">Loro</option>
<option value="arana">Araña</option>
<option value="pez">Pez</option>
</select>
</label>
El ejemplo anterior muestra el uso típico del elemento <select>. Lo asociamos con una etiqueta <label> con fines de accesibilidad y utilizamos el atributo name para representar el nombre del campo que se enviará al servidor. Cada opción de menú está definida por un elemento <option> anidado dentro del <select>.
Cada elemento <option> debe tener un atributo value que contenga el valor para enviar al servidor cuando se seleccione esa opción. Si no se incluye ningún atributo value, el valor predeterminado es el texto contenido dentro del elemento. Puedes incluir un atributo selected en un elemento <option> para que se seleccione de forma predeterminada cuando se carga la página por primera vez.
El elemento <select> tiene algunos atributos únicos que puedes usar para personalizarlo. Por ejemplo, con el atributo multiple especificas si se pueden seleccionar varias opciones y con el atributo size puedes especificar cuántas opciones deben mostrarse a la vez. También se aceptan muchos atributos genéricos tales como required, disabled, autofocus, etc.
Por último, conviene mencionar que se pueden anidar varios elementos <option> dentro de <optgroup> para crear grupos separados de opciones dentro del menú desplegable.
Selector de archivos
Hay un último tipo de <input>: el tipo entrada de archivo. Los formularios pueden enviar archivos a un servidor (esta acción específica también se detalla en el artículo Enviar los datos del formulario). El control de selección de archivos se puede usar para elegir uno o más archivos para enviar.
Para crear un control de selección de archivos, podemos utilizar el elemento <input> con su atributo type establecido en file. Es posible restringir los tipos de archivos que se aceptan utilizando el atributo accept. Además, puedes permitir que el usuario elija más de un archivo añadiendo el atributo multiple.
En este ejemplo, se crea un control de selección de archivos que solicita archivos de imágenes gráficas. En este caso, el usuario puede seleccionar múltiples archivos:
En algunos dispositivos móviles, el control de selección de archivos permite acceder a fotos, vídeos y audio capturados directamente por la cámara y el micrófono del dispositivo. Para ello basta con añadir información de captura al atributo accept de la manera siguiente:
El botón de opción no es realmente un botón, a pesar de su nombre. A continuación echaremos un vistazo a los controles de formulario que son botones propiamente. La etiqueta de HTML <button>representa un elemento de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón simple y estándar para iniciar una acción al pulsar sobre él. De forma predeterminada, los botones HTML se presentan con un estilo similar en todas las plataformas, pero estos estilos se pueden cambiar fácilmente utilizando CSS.
El comportamiento por defecto de un botón se puede cambiar mediante el atributo type. Los posibles valores que podemos utilizar son:
submit: El botón envía los datos del formulario al servidor. Este es el valor predeterminado si el atributo no se especifica para los botones asociados con el formulario o si el atributo contiene un valor vacío o no válido.
reset: El botón restablece todos los controles a sus valores iniciales. Debería usarse solo cuando sea necesario, ya que puede provocar que un usuario pierda los datos que acaba de introducir.
button: El botón no tiene un comportamiento predeterminado y no hace nada cuando se presiona de manera predeterminada. Utilizando código JavaScript podemos iniciar diversas acciones para responder a los eventos que genere este elemento.
Veamos algunos tipos de botones con un ejemplo sencillo:
<p>
<label>Introduce un comentario: <input type="text" name="comentario" required="" /></label>
</p>
<p>
<button type="submit">Este es un botón de tipo "submit"</button>
</p>
<p>
<button type="reset">Este es un botón de tipo "reset"</button>
</p>
<p>
<button type="button">Este es un botón de tipo "button"</button>
</p>
Como puedes ver en los ejemplos, los elementos <button> te permiten usar código HTML entre las etiquetas <button> de apertura y cierre. Los elementos <input>, por otro lado, son elementos vacíos; el contenido que muestran está limitado al atributo value y, por lo tanto, solo aceptan contenido de texto sin formato.
Ejercicio propuesto: Campos básicos
Crea una página web para mostrar ejemplos de los elementos de tipo «input» de esta unidad: texto de una sola línea y de varias líneas, contraseña, casillas de verificación y botones de radio, lista desplegable con opciones y selector de archivos. Debes incluir al menos un ejemplo de cada uno de ellos. Debes usar párrafos y etiquetas, y también el atributo «required» y otras posibles restricciones que se puedan aplicar a cada uno de ellos. Verifica el resultado en tu navegador y no olvides incluir todas las etiquetas HTML básicas y validar tu código. Por último, verifica el resultado en tu teléfono móvil.
Nota: Coloca todas las etiquetas dentro de un contenedor <form> y usa un botón de tipo «submit» para verificar que los campos estén validados correctamente. Puedes utilizar un código similar a este:
En la sección anterior vimos el elemento <input> y los valores de su atributo type, disponibles desde los inicios de HTML. Ahora veremos en detalle la funcionalidad de los controles de formulario más recientes, incluyendo algunos tipos de entrada nuevos, los cuales fueron añadidos en HTML5 para permitir la recolección de tipos de datos específicos.
Campo de dirección de correo electrónico
Este tipo de campo se define utilizando el valor email en el atributo type del elemento <input>:
Cuando se utiliza este valor type, se le obliga al usuario a escribir dentro del campo una dirección de correo electrónico válida. Cualquier otro contenido ocasiona que el navegador muestre un mensaje de error cuando se envía el formulario. Puedes verlo en acción en el siguiente ejemplo:
Puedes utilizar también el atributo multiple en combinación con el tipo input email para permitir que sean introducidas varias direcciones de correo electrónico separadas por comas en el mismo input:
En algunos dispositivos, en particular dispositivos táctiles con teclados dinámicos como los smart phones, debería desplegarse un teclado virtual que es más adecuado para introducir direcciones de correo electrónico, incluyendo la tecla @.
Campo URL
Se puede crear un tipo especial de campo para introducir URLs utilizando el valor url para el atributo type:
Este tipo añade restricciones de validación en el campo. El navegador informará de un error si no se introdujo el protocolo (como http: o https:), o si de algún modo la URL es claramente incorrecta. Debemos tener en cuenta que solo porque la URL tenga un formato correcto, no significa necesariamente que la dirección al que hace referencia exista. Puedes hacer pruebas con el siguiente ejemplo:
En dispositivos con teclados dinámicos a menudo se mostrarán por defecto algunas o todas las teclas como los dos puntos, el punto, y la barra inclinada.
Campo número de teléfono
Se puede crear un campo especial para introducir números de teléfono utilizando tel como valor del atributo type:
<label>
Introduce un número de teléfono:
<input type="tel" name="telefono" placeholder="123 456 789" />
</label>
Cuando se accede desde un dispositivo táctil con teclados dinámicos, muchos de ellos mostrarán un teclado numérico cuando se encuentren con type="tel", lo que significa que este tipo es útil no sólo para ser utilizado para números de teléfono, sino también cuando sea útil un teclado numérico.
Debido a la gran variedad de formatos de número de teléfono existentes, este tipo de campo no establece ningún tipo de restricción sobre el valor introducido por el usuario (esto significa que permite incluir letras, etc…). Se puede utilizar el atributo pattern para establecer restricciones (puedes consultar más información sobre este atributo en Validación de formulario en el lado cliente).
Campo numérico
Se pueden crear controles para introducir números con el typenumber de <input>. Este control se parece a un campo de texto pero solo permite números de punto flotante, y normalmente proporciona botones deslizadores para incrementar o reducir el valor del control. En dispositivos con teclados dinámicos generalmente se muestra el teclado numérico.
Con el tipo de input number puedes limitar los valores mínimo y máximo permitidos definiendo los atributos min y max. También puedes utilizar el atributo step para cambiar el incremento y decremento causado por los botones deslizadores. Por defecto, el tipo de input number sólo valida si el número es un entero. Para permitir números decimales, especifica step="any". Si se omite, su valor por defecto es 1, lo que significa que solo son válidos números enteros.
Miremos algunos ejemplos. El primero de los siguientes crea un control numérico cuyo valor está restringido a cualquier valor entre 1 y 10, y sus botones cambian su valor en incrementos o decrementos de 2.
El segundo crea un control numérico cuyo valor está restringido a cualquier valor entre el 0 y 1 ambos inclusive, y sus botones cambian su valor en incrementos o decrementos de 0.01:
El tipo de input number tiene sentido cuando esté limitado el rango de valores válidos, por ejemplo la edad de una persona o su altura. Si el rango es demasiado grande para que los cambios de incremento tengan sentido (por ejemplo los códigos postales de USA, cuyo rango va de 00001 a 99999), entonces sería una mejor opción utilizar el tipo tel: proporciona el teclado numérico mientras que omite el componente de interfaz de usuario de los deslizadores de número.
Controles deslizantes
Otra forma de introducir un número es usando un slider. Habrás observado bastantes controles parecidos en webs donde por ejemplo se tiene que establecer un precio máximo para realizar una compra y se solicita realizar un filtro por dicho campo. Vamos a observar un ejemplo:
En cuanto al uso, los controles deslizantes son menos precisos que los campos de texto. Por lo tanto, se utilizan para elegir un número cuyo valor exacto no es necesariamente importante.
Un control deslizante o barra de desplazamiento se crea usando el <input> con el valor range en el atributo type. El deslizador se puede mover con el ratón, también utilizando dispositivos táctiles, o con las flechas del teclado.
Es importante configurar correctamente este campo, y con ese propósito es muy recomendable utilizar los atributos min, max y step, que establecen los valores mínimo, máximo y de incremento, respectivamente.
Veamos el código fuente correspondiente al ejemplo anterior, para que puedas ver cómo se consigue dicho resultado. En primer lugar, el código HTML básico:
Este ejemplo crea un control deslizante cuyo valor puede oscilar entre 50000 y 500000, que aumenta / disminuye de 100 en 100. En este caso hemos asignado el valor predeterminado de 250000, usando el atributo value.
Un inconveniente que presentan los controles deslizantes es que no ofrecen ningún tipo de retroalimentación visual sobre cuál es el valor actual. Por eso hemos incluido un elemento <input> para mostrar (o también cambiar) el valor actual.
Selectores de fecha y hora
La recopilación de valores de fecha y hora ha sido desde siempre una pesadilla para los desarrolladores web. Para una buena experiencia de usuario, es importante proporcionar una interfaz que permita seleccionar directamente una fecha sobre un calendario, sin necesidad de cambiar de contexto a una aplicación de calendario nativa o a otra aplicación que utilice diferentes formatos que sean difíciles de analizar. Por ejemplo, el último minuto del milenio anterior se puede expresar de las siguientes formas diferentes, por ejemplo: 1999/12/31, 23:59 o 12/31/99T11:59PM.
Los controles de fecha HTML están disponibles para manejar este tipo específico de datos, proporcionando widgets de calendario y haciendo que los datos sean uniformes.
Para crear un campo de tipo fecha utilizamos el elemento <input> y un valor apropiado para el atributo type, dependiendo de si deseas recopilar fechas, horas o ambos. Aquí puedes observar un ejemplo (si el navegador no aceptara alguno de estos tipos, utilizaría un elemento alternativo que permita la introducción mediante texto):
<p><label>
Fecha y hora local: <input type="datetime-local" name="fechayhora" />
</label></p>
<p><label>
Mes: <input type="month" name="mes">
</label></p>
<p><label>
Hora: <input type="time" name="hora">
</label></p>
<p><label>
Semana: <input type="week" name="semana">
</label></p>
Todos los controles de fecha y hora se pueden restringir usando los atributos min y max, con una mayor restricción posible a través del atributo step (cuyo valor varía según el tipo de entrada):
<label>
¿Cuándo es tu cumpleaños?
<input type="date" name="fecha" min="1975-01-01" max="2025-12-31" step="1" />
</label>
Selector de color
Los colores también suelen ser difíciles de manejar. Hay muchas formas de expresarlos: valores RGB (decimal o hexadecimal), valores HSL, palabras clave, etc.
Se puede crear un control de tipo color utilizando el elemento <input> con su atributo type con valor color:
<label>
Selecciona una color: <input type="color" name="color" />
</label>
Si el navegador admite este tipo de campo, al hacer clic en él se utilizará la funcionalidad de elección de color predeterminada del sistema operativo. Puedes observar el resultado con el siguiente ejemplo:
Campo de búsqueda
Los campos de búsqueda se utilizan para crear cajas de búsqueda en páginas web y aplicaciones. Este tipo de campo se define utilizando el valor search en su atributo type:
La diferencia principal entre un campo text y un campo search, es el estilo que el navegador aplica a uno u otro. A menudo los campos search se muestran con bordes redondeados; y a veces también se muestra una «Ⓧ», para limpiar el campo de cualquier valor cuando se pulsa sobre él. Además, en dispositivos con teclado dinámico, la tecla enter del teclado suele mostrar un icono de lupa.
Otra característica que vale la pena señalar es que se pueden guardar los valores de un campo search automáticamente y reutilizarse en múltiples páginas del mismo sitio web para ofrecer autocompletado. Esta característica suele ocurrir de forma automática en la mayoría de navegadores modernos.
Ejercicio propuesto: Campos HTML5
Crea una página web para mostrar todos los elementos de esta última sección: correo electrónico, url, número de teléfono, campo numérico, control deslizante, fecha y hora, selector de color y campo de búsqueda. Debes incluir al menos un ejemplo para cada uno de ellos. Debes usar párrafos y etiquetas, y también el atributo «required» y otras restricciones según el campo del que se trate. Comprueba el resultado en tu navegador y no olvides incluir todas las etiquetas HTML básicas y validar el código. Por último, comprueba el resultado también en tu teléfono móvil.
Coloca todas las etiquetas dentro de un contenedor <form> y usa un botón de tipo «submit» para comprobar que los campos se validan correctamente:
<form>
<p><label>
Correo principal: <input type="email" name="correo1" required="" />
</label></p>
<p><label>
Otro correo: <input type="email" name="correo2" required="" />
</label></p>
<p><label>
Tu página web: <input type="url" name="web1" required="" />
</label></p>
<p><label>
Página web de tu instituto: <input type="url" name="web2" required="" />
</label></p>
...
<p><button>Enviar</button></p>
</form>
Atributos comunes
Muchos de los elementos que se utilizan para definir controles de formulario tienen sus atributos específicos propios. Sin embargo, hay un conjunto de atributos que son comunes para todos los elementos de formulario. Ya has conocido algunos, pero a continuación encontrarás una lista de esos atributos comunes para referencias futuras:
Este atributo booleano te permite especificar que el elemento ha de tener el foco de entrada automáticamente cuando se carga la página. En un documento, solo un elemento asociado a un formulario puede tener este atributo especificado.
Este atributo booleano indica que el usuario no puede interactuar con el elemento. Si no se especifica este atributo, el elemento hereda su configuración del elemento que lo contiene, por ejemplo, <fieldset>. Si el elemento que lo contiene no tiene el atributo establecido en disabled, el elemento está habilitado.
El elemento <form> con el que está asociado el control, que se usa cuando no está anidado dentro de ese formulario. El valor del atributo debe ser el atributo id de un elemento <form> del mismo documento. Esto te permite asociar un formulario con un control de formulario que esté fuera de aquel, incluso si está dentro de un elemento de formulario diferente.
En esta sección crearemos un formulario web completo y funcional. Diseñaremos un formulario sencillo con los campos adecuados y otros elementos HTML, y explicaremos cómo se envían los datos a un servidor. Ampliaremos cada uno de estos subtemas más adelante.
Diseñar el formulario
Antes de comenzar a escribir código, siempre es mejor tomarse el tiempo necesario para pensar cómo queremos que sea nuestro formulario. Diseñar una maqueta rápida nos ayudará a definir el conjunto de datos adecuado que debemos pedirle al usuario. Desde el punto de vista de la experiencia del usuario (UX), es importante recordar que cuanto más grande es un formulario, más te arriesgas a frustrar a las personas que lo usen. Un formulario tiene que ser simple y conciso, y por ello deberíamos solicitar solo los datos que necesitemos.
Diseñar formularios es un paso importante cuando creamos un sitio web o una aplicación. Va más allá del alcance de este sección exponer esto en detalle, pero si deseas profundizar en ese tema, puedes leer los siguientes artículos
En esta sección vamos a crear un formulario de contacto sencillo. Observemos un posible borrador:
Nuestro formulario va a tener tres campos de texto y un botón. Le pedimos al usuario su nombre, su correo electrónico y el mensaje que desea enviar. Al pulsar el botón sus datos se enviarán a un servidor web.
Implementando nuestro formulario
Vamos a proceder ahora a escribir el código HTML para nuestro formulario. Vamos a utilizar los elementos HTML siguientes: <form>, <label>, <input>, <textarea> y <button>.
El elemento <form>
Todos los formularios comienzan con un elemento <form>, como este:
Este elemento define formalmente un formulario. Es un elemento contenedor, como un elemento <section> o <footer>, pero específico para contener formularios; también admite algunos atributos específicos para la configuración de la forma en que se comporta el formulario. Todos sus atributos son opcionales, pero es una práctica estándar establecer siempre al menos los atributos action y method:
El atributo action define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan.
El atributo method define con qué método HTTP se envían los datos (generalmente get o post).
Veremos cómo funcionan esos atributos más adelante.
Los elementos <label>, <input> y <textarea>
Nuestro formulario de contacto no es complejo en absoluto: la parte para la entrada de datos contiene tres campos de texto, cada uno con su elemento <label> correspondiente:
El campo de entrada para el correo electrónico es una entrada de datos de tipo correo electrónico: un campo de texto de una sola línea que acepta solo direcciones de correo electrónico.
El campo de entrada para el mensaje es <textarea>; un campo de texto multilínea.
En términos de código HTML, para implementar estos controles de formulario necesitamos algo como lo siguiente:
Por motivos de usabilidad y accesibilidad incluimos una etiqueta explícita para cada control de formulario. Hacer esto presenta muchas ventajas porque la etiqueta está asociada al control del formulario y permite que los usuarios con ratón, y dispositivos táctiles hagan clic en la etiqueta para activar el control correspondiente, y también proporciona accesibilidad con un nombre que los lectores de pantalla leen a sus usuarios. Puedes encontrar más detalles sobre las etiquetas de los formularios en Cómo estructurar un formulario web.
En el elemento <input>, el atributo más importante es type, ya que define la forma en que el elemento <input> aparece y se comporta. Puedes encontrar más información sobre esto en el artículo sobre Controles de formularios nativos básicos.
En nuestro ejemplo, usamos el valor <input/text> para la primera entrada, el valor predeterminado para este atributo. Representa un campo de texto básico de una sola línea que acepta cualquier tipo de entrada de texto.
Para la segunda entrada, usamos el valor <input/email>, que define un campo de texto de una sola línea que solo acepta una dirección de correo electrónico. Esto convierte un campo de texto básico en una especie de campo «inteligente» que efectúa algunas comprobaciones de validación de los datos que el usuario escribe. También hace que aparezca un diseño de teclado más apropiado para introducir direcciones de correo electrónico (por ejemplo, con un símbolo @ por defecto) en dispositivos con teclados dinámicos, como teléfonos inteligentes. Puedes encontrar más información sobre la validación de formularios en el artículo de Validación de formularios por parte del cliente.
El elemento <button>
El marcado de nuestro formulario está casi completo; solo necesitamos añadir un botón para permitir que el usuario envíe sus datos una vez que haya completado el formulario. Esto se hace con el elemento <button>; basta con añadir lo siguiente justo encima de la etiqueta de cierre </form>:
<button type="submit">Enviar mensaje</button>
Como hemos explicado anteriormente, el elemento <button> también acepta el atributo type, que a su vez acepta uno de estos tres valores: submit, reset o button:
Un clic en un botón submit (el valor predeterminado) envía los datos del formulario a la página web definida por el atributo action del elemento <form>.
Un clic en un botón reset restablece de inmediato todos los controles de formulario a su valor predeterminado. Desde el punto de vista de UX, esto se considera una mala práctica, por lo que debes evitar usar este tipo de botones a menos que realmente tengas una buena razón para incluirlos.
Un clic en un botón button no hace… ¡nada! Eso suena tonto, pero es muy útil para crear botones personalizados: puedes definir su función con JavaScript.
Enviando datos al servidor web
La última parte, y quizás la más complicada, es manejar los datos del formulario en el lado del servidor. El elemento <form> define dónde y cómo enviar los datos gracias a los atributos action y method.
Proporcionamos un nombre (name) a cada control de formulario. Los nombres son importantes tanto en el lado del cliente como del servidor; le dicen al navegador qué nombre debe dar a cada dato y, en el lado del servidor, permiten que el servidor acceda a cada dato utilizando su nombre. Los datos del formulario se envían al servidor como pares de nombre/valor.
Para poner nombre a los diversos datos que se introducen en un formulario, debes usar el atributo name en cada control de formulario que recopila un dato específico. Veamos de nuevo algunos el código fuente de nuestro formulario:
En nuestro ejemplo, el formulario envía tres datos denominados «nombre», «correo» y «mensaje». Esos datos se envían a la URL «contactar.php» utilizando el método GET de HTTP.
En el lado del servidor, la secuencia de comandos de la URL «contactar.php» recibe los datos como una lista de tres elementos clave/valor contenidos en la solicitud HTTP. La forma en que este script maneja esos datos depende de ti. Cada lenguaje de servidor (PHP, Python, Ruby, Java, C#, etc.) tiene su propio mecanismo de manipulación de datos de formulario. No profundizaremos demasiado en esta sección, pero intentaremos completar nuestro ejercicio para que sea completamente funcional. También puedes consultar el artículo Enviar los datos de un formulario.
Validación de formulario en la parte del cliente
Antes de enviar datos al servidor, es importante asegurarse de que se completan todos los controles de formulario requeridos, y en el formato correcto. Esto se denomina validación de formulario en el lado del cliente y ayuda a garantizar que los datos que se envían coinciden con los requisitos establecidos en los diversos controles de formulario.
La validación en el lado del cliente es una verificación inicial y una característica importante para garantizar una buena experiencia de usuario; mediante la detección de datos no válidos en el lado del cliente, el usuario puede corregirlos de inmediato. Si el servidor lo recibe y, a continuación, lo rechaza; se produce un retraso considerable en la comunicación entre el servidor y el cliente que insta al usuario a corregir sus datos.
Si accedes a cualquier sitio web que incluya un formulario de registro observarás que se muestran comentarios cuando no introduces tus datos en el formato que se espera. Recibirás mensajes como:
«Este campo es obligatorio» (No se puede dejar este campo en blanco).
«Introduzca su número de teléfono en el formato xxx-xxx-xxx» (Se requiere un formato de datos específico para que se considere válido).
«Introduzca una dirección de correo electrónico válida» (los datos que introdujiste no están en el formato correcto).
«Su contraseña debe tener entre 8 y 30 caracteres y contener una letra mayúscula, un símbolo y un número». (Se requiere un formato de datos muy específico para tus datos).
Esto se llama validación de formulario. Cuando introduces los datos, el navegador y/o el servidor web verifican que estén en el formato correcto y dentro de las restricciones establecidas por la aplicación. La validación realizada en el navegador se denomina validación en el lado del cliente, mientras que la validación realizada en el servidor se denomina validación en el lado del servidor. En esta sección nos centraremos en la validación en el lado del cliente.
Si la información está en el formato correcto, la aplicación permite que los datos se envíen al servidor y (en general) que se guarden en una base de datos; si la información no está en el formato correcto, da al usuario un mensaje de error que explica lo que debe corregir y le permite volver a intentarlo.
Una de las características más importantes de los controles de formulario de HTML5 es la capacidad de validar la mayoría de los datos de usuario sin depender de JavaScript. Esto se realiza mediante el uso de atributos de validación en los elementos del formulario. Los hemos visto anteriormente, pero recapitulamos aquí:
required: Especifica si un campo de formulario debe completarse antes de que se pueda enviar el formulario.
minlength y maxlength: Especifican la longitud mínima y máxima de los datos de texto (cadenas).
min y max: Especifican los valores mínimo y máximo de los tipos de entrada numéricos.
type: Especifica si los datos deben ser un número, una dirección de correo electrónico o algún otro tipo de preajuste específico.
pattern: Especifica una expresión regular que define un patrón que los datos que se introduzcan deben seguir.
Si los datos que se introducen en un campo de formulario siguen todas las reglas que especifican los atributos anteriores, se consideran válidos. Si no, se consideran no válidos.
Cuando un elemento es válido, se cumplen los aspectos siguientes:
El elemento coincide con la pseudoclase :valid de CSS, lo que te permite aplicar un estilo específico a los elementos válidos.
Si el usuario intenta enviar los datos, el navegador envía el formulario siempre que no haya nada más que lo impida (por ejemplo, JavaScript).
Cuando un elemento no es válido, se cumplen los aspectos siguientes:
El elemento coincide con la pseudoclase :invalid de CSS, y a veces con otras pseudoclases de interfaz de usuario (UI) –por ejemplo, :out-of-range– dependiendo del error, que te permite aplicar un estilo específico a elementos no válidos.
Si el usuario intenta enviar los datos, el navegador bloquea el formulario y muestra un mensaje de error.
A tener en cuenta…
Queremos que completar formularios web sea lo más fácil posible. Entonces, ¿por qué insistimos en validar nuestros formularios? Hay tres razones principales:
Queremos obtener los datos correctos en el formato correcto. Nuestras aplicaciones no funcionarán correctamente si los datos de nuestros usuarios se almacenan en el formato incorrecto, son incorrectos o se omiten por completo.
Queremos proteger los datos de nuestros usuarios. Obligar a nuestros usuarios a introducir contraseñas seguras facilita proteger la información de su cuenta.
Queremos protegernos a nosotros mismo. Hay muchas formas en que los usuarios maliciosos puedan usar mal los formularios desprotegidos y dañar la aplicación (puedes consultar Seguridad del sitio web).
Por todo ello debemos tener en cuenta que la validación en el lado del cliente no debe considerarse una medida de seguridad exhaustiva. Tus aplicaciones siempre deben realizar comprobaciones de seguridad de los datos enviados por el formulario en el lado del servidor, así como también en el lado del cliente, porque la validación en el lado del cliente es demasiado fácil de evitar, por lo que los usuarios malintencionados pueden enviar fácilmente datos incorrectos a tu servidor (puedes leer Seguridad en los sitios web para conocer más detalles).
Nosotros no entraremos en detalle ahora sobre cómo implementar la validación en el lado del servidor, ya que está fuera del alcance de esta unidad, pero debemos tenerlo en cuenta.
En el lado del servidor: Recuperando los datos
Sea cual sea el método HTTP que elijamos, el servidor recibe una cadena que será analizada con el fin de obtener los datos como una lista de pares clave/valor. La forma de acceder a esta lista depende de la plataforma de desarrollo que utilicemos y de las estructuras específicas que utilicemos.
PHP ofrece algunos objetos globales para acceder a los datos. Suponiendo que hayamos utilizado el método GET, el ejemplo que utilizaremos en las secciones siguientes cogerá los datos y los guardará en un fichero. Por supuesto, lo que se hace con los datos depende de nosotros. Es posible visualizarlos, almacenarlos en una base de datos, enviarlos por correo electrónico, o procesarlos de alguna otra manera.
Por motivos de sencillez y posibilidad de realizar pruebas en muchos entornos, utilizaremos PHP para completar nuestros ejemplos y conseguir que sean funcionales.
El método GET
El método GET es utilizado por el navegador para pedir al servidor que se envíe de vuelta un recurso dado: «Hey servidor, quiero conseguir este recurso.» En este caso, el navegador envía un cuerpo vacío. Debido a que el cuerpo está vacío, si un formulario se envía utilizando este método, los datos enviados al servidor se anexan a la URL.
Echando un vistazo a nuestro formulario de contacto, y teniendo en cuenta que hemos utilizado el método GET, cuando enviemos el formulario, veremos que los datos aparecen en la URL (en la barra de direcciones del navegador). Por ejemplo, si introducimos «Fernando» como nombre de usuario, «[email protected]» como dirección de correo electrónico y «Hola» como mensaje, y pulsamos el botón «Enviar», deberíamos ver algo como esto en la barra de direcciones: «contactar.php?nombre=Fernando&[email protected]&message=Hola«.
Los datos se añaden a la URL como una serie de pares de nombre / valor. Después que la dirección web URL ha terminado, se incluye un signo de interrogación ( ?) seguido de los pares de nombre / valor, cada uno separado por un signo ( &). En nuestro caso estamos enviando los siguientes datos al servidor:
Crea una nueva página web con un formulario de contactar, utilizando el código del ejemplo anterior. Debería obtener algo similar al formulario que tienes a continuación. Comprueba el resultado en tu navegador y valida el código. También intente enviar los datos pulsando el botón y verifica la URL que aparece en la barra de direcciones. Finalmente, ajusta la longitud mínima y máxima de los campos de texto utilizando los valores que consideres adecuados para asegurarte de que los datos del formulario sean correctos antes de enviarlos al servidor.
Ten en cuenta que si pulsas el botón enviar, irás a la página «contactar.php», que aún no está implementada. En este punto obtendrás un error, pero podrás ver toda la información en la URL, ya que estamos usando el método GET.
Ejercicio propuesto: Guardar datos de contacto
Continuemos con nuestro ejemplo PHP para guardar nuestros datos del formulario de contacto. Crea un archivo «contactar.php» con el siguiente código. Sube el formulario y el código PHP a tu servidor y prueba el ejemplo completo del formulario de contacto para verificar que los mensajes se van guardando en el servidor. Diles también a tus compañeros que prueben la página web y verifiquen que los datos que han introducido también están guardados.
<?php
// La variable global $_GET nos permite acceder a los datos enviados con el método GET
$nombre = $_GET['nombre'];
$correo = $_GET['correo'];
$mensaje = $_GET['mensaje'];
// Colocamos todos los datos en el archivo "mensajes.csv" en una nueva línea cada vez
file_put_contents("mensajes.csv", "$nombre,$correo,$mensaje\n", FILE_APPEND);
// Mostramos un enlace a la página anterior y también al archivo para comprobar el resultado
echo "<p>Datos guardados</p>";
echo "<p>Haz click <a href='".$_SERVER['HTTP_REFERER']."'>aquí</a> para ir a la página anterior</p>";
echo "<p>Haz click <a href='mensajes.csv' target='_blank'>aquí</a> para ver todos los mensajes</p>";
?>
Ejercicio propuesto: Formulario para saludar
Crea una nueva página web con un formulario similar al siguiente, comprobando el resultado en el navegador y validando el código. Pulsa el botón enviar y eche un vistazo a la barra de direcciones del navegador. Después de eso, introduce otros datos diferentes a los valores predeterminados, presione el botón Enviar de nuevo y verifique que la nueva URL contenga la información correcta. Finalmente, cambia el valor predeterminado de ambos campos de texto («Hola» y «Mamá») para usar otros valores y comprueba el resultado nuevamente.
Ten en cuenta que si presionas el botón enviar, irá a la página «saludos.php», que aún no está implementada. En este punto obtendrás un error, pero verás toda la información en la URL, ya que estamos usando el método GET.
<form action="saludos.php" method="GET">
<p>
<label>
¿Qué quieres decir para saludar?: <input name="saludo" value="Hola" required="" />
</label>
</p>
<p>
<label>
¿A quién se lo quieres decir?: <textarea name="persona" required="">Mamá</textarea>
</label>
</p>
<p>
<button>Enviar el saludo</button>
</p>
</form>
Ejercicio propuesto: Guardar texto genérico
Continuemos con nuestro código PHP para guardar nuestros datos del formulario para saludar. Crea un archivo «saludar.php» con el código que aparece a continuación. Graba el formulario y el código PHP en el servidor y graba el ejemplo completo del formulario para comprobar que ahora los saludos ahora se guardan en el servidor. También diles a tus compañeros que prueben la página web y verifiquen que los datos que han introducido también estén guardados.
Observarás las similitudes respecto al ejemplo anterior. Solo hemos cambiado las variables ($saludo y $persona) y el nombre del archivo donde se guardan los datos («saludos.csv»).
<?php
// La variable global $_GET nos permite acceder a los datos enviados con el método GET
$saludo = $_GET['saludo'];
$persona = $_GET['persona'];
// Colocamos todos los datos en el archivo "saludos.csv" en una nueva línea cada vez
file_put_contents("saludos.csv", "$saludo,$persona\n", FILE_APPEND);
// Mostramos un enlace a la página anterior y también al archivo para comprobar el resultado
echo "<p>Datos guardados</p>";
echo "<p>Haz clic <a href='".$_SERVER['HTTP_REFERER']."'>aquí</a> para volver a la página anterior</p>";
echo "<p>Haz clic <a href='saludos.csv' target='_blank'>aquí</a> para ver todos los saludos</p>";
?>
El método POST
El método POST es un poco diferente. Es el método que el navegador utiliza para comunicarse con el servidor cuando se pide una respuesta que tenga en cuenta los datos proporcionados en el cuerpo de la petición HTTP: «Hey servidor, echa un vistazo a estos datos y envíame de vuelta un resultado apropiado.» Si un formulario se envía utilizando este método, los datos se anexan al cuerpo de la petición HTTP. Es más seguro que el método GET, ya que cuando el formulario se envía mediante el método POST, ninguna otra persona que se encuentre cerca puede ver los datos. Este método se recomienda, por ejemplo, para ser utilizado en formularios donde se envía una contraseña.
Veamos el siguiente ejemplo, que es bastante similar al formulario en la sección GET anterior, pero con el atributo de método establecido en POST y el tipo de campo establecido en «password»:
Crea una nueva página web con un formulario de inicio de sesión, utilizando el código del ejemplo anterior. Deberías obtener un resultado similar al que se muestra a continuación. Comprueba el resultado en tu navegador y valida el código. A continuación intenta enviar los datos pulsando el botón y observa si hay alguna información en la URL. Finalmente, establece la longitud mínima del campo de texto del usuario en 5 y la máxima en 10, y haz lo mismo para el campo de contraseña.
Ten en cuenta que si pulsas el botón enviar, irás a la página «login.php», que aún no está implementada. En este punto obtendrás un error, pero no verás ninguna información en la URL, ya que estamos usando el método POST.
Ejercicio propuesto: Comprobar datos privados
Continuemos con nuestro código PHP para comprobar el usuario y la contraseña del formulario de inicio de sesión. Crea un archivo «login.php» con el siguiente código. Sube el formulario y el código PHP a tu servidor y prueba tu ejemplo completo del formulario de inicio de sesión para comprobar el usuario («admin») y la contraseña («1234»). También dile a tus compañeros que prueben tu página web. Después de eso, cambia la contraseña del archivo «login.php» y pide a tus compañeros que intenten adivinar la nueva contraseña. Debes usar una contraseña muy simple de entre las que aparecen en «https://en.wikipedia.org/wiki/List_of_the_most_common_passwords» (de lo contrario, es posible que tus compañeros no puedan adivinarla).
Observarás las similitudes respecto al ejemplo anterior. Solo hemos cambiado las variables ($usuario y $contrasena) y hemos utilizado una condición para mostrar una imagen con el pulgar hacia arriba o hacia abajo, dependiendo de si la contraseña es correcta o no.
<?php
// La variable global $_POST nos permite acceder a los datos enviados con el método POST
$usuario = $_POST['usuario'];
$contrasena = $_POST['contrasena'];
// Comprueba el usuario y la contraseña
if ($usuario == "admin" && $contrasena == "1234") {
echo "<img src='https://raw.githubusercontent.com/twbs/icons/main/icons/hand-thumbs-up.svg' width='100' />";
echo "<p>¡Perfecto! :-)</p><p>Haz clic <a href='".$_SERVER['HTTP_REFERER']."'>aquí</a> para ir a la página anterior</p>";
}
else {
echo "<img src='https://raw.githubusercontent.com/twbs/icons/main/icons/hand-thumbs-down.svg' width='100' />";
echo "<p>¡Usuario o contraseña incorrectos! :-(</p><p>Haz clic <a href='".$_SERVER['HTTP_REFERER']."'>aquí</a> para probar de nuevo</p>";
}
?>
Durante mucho tiempo, las únicas herramientas fiables para crear diseños CSS con una alta compatibilidad entre navegadores, fueron los elementos flotantes y el posicionamiento. Cumplen su propósito, pero tienen una funcionalidad bastante limitada.
Con tales herramientas resulta difícil, si no imposible, lograr obtener un diseño de página sencillo y flexible que cumpla con unos requisitos como los siguientes:
Centrar verticalmente un bloque de contenido dentro de su elemento padre.
Hacer que todos los elementos secundarios de un contenedor ocupen una cantidad igual del ancho/alto disponible, independientemente del ancho/alto que haya disponible.
Hacer que todos los elementos en una distribución de columnas múltiples adopten la misma altura incluso si contienen cantidades diferentes de contenido.
Como verás en las secciones siguientes, los elementos flexbox facilitan mucho algunas tareas de distribución de elementos dentro de la página.
Un ejemplo sencillo
En esta unidad te guiaremos por una serie de ejercicios para ayudarte a comprender cómo funcionan los elementos flexbox. En el siguiente ejemplo verás que tenemos un elemento <header> con un encabezado de nivel superior en él, y un elemento <section> que contiene tres elementos <article>. Los usaremos para crear una distribución bastante habitual de tres columnas:
<header>
<h1>Comunidad Valenciana</h1>
</header>
<section>
<article>
<h2>Alicante</h2>
<p>El campus de la Universidad de Alicante se encuentra en San Vicente del Raspeig, limitando al norte con la ciudad de Alicante. Más de 25.000 estudiantes asisten a la Universidad.</p>
</article>
<article>
<h2>Valencia</h2>
<p>Valencia es la capital de la Comunidad Valenciana y la tercera ciudad más grande de España después de Madrid y Barcelona, superando los 800.000 habitantes del municipio.</p>
</article>
<article>
<h2>Castellón</h2>
<p>La ciudad es conocida por sus festivales de música, entre los que se encuentran: el festival de música alternativa Tanned Tin, el Festival Internacional de Benicàssim, el Arenal Sound y el Rototom Sunsplash Festival, conocido por su música reggae.</p>
</article>
</section>
Usando el código del ejemplo anterior, crea una nueva página web con un contenido similar. Puedes utilizar el texto que quieras y los colores y fuentes que más te gusten.
Especificar qué elementos serán cajas flexibles
Para comenzar, vamos a seleccionar qué elementos se van a presentar como cajas flexibles. Para ello, establecemos un valor especial de display en el elemento padre de los elementos que deseas editar. En este caso, queremos distribuir los elementos <article>, por lo que lo activaremos la propiedad correspondiente en el elemento <section> (que se convierte en un contenedor flexible):
section {
display: flex;
}
Esto hace que el elemento <section> se convierta en contenedor flex, y sus hijos en elementos flexibles. Así, esta declaración única nos da todo lo que necesitamos. Increíble, ¿verdad? Tenemos nuestra distribución en columnas múltiples con columnas de igual tamaño, y todas las columnas tienen la misma altura. Esto se debe a que los valores por defecto que se han asignado a los elementos flexibles (los elementos secundarios del contenedor flexible) están pensados para resolver problemas comunes como este.
Para dejarlo un poco más claro, vamos a observar detenidamente el resultado. El elemento al que le hemos dado un valor de display de flex actúa como un elemento a nivel de bloque en términos de cómo interactúa con el resto de la página, pero sus elementos secundarios se presentan como elementos flexibles. También podemos usar un valor de display de inline-flex si queremos que los elementos secundarios de un elemento sean elementos flexibles, pero hacer que ese elemento se comporte como un elemento en línea.
Ejercicio propuesto: Cajas flexibles
Añade al ejercicio anterior el código CSS necesario para que todo el contenido dentro del elemento <section> se muestre como cajas flexibles (display: flex) que se muestran de izquierda a derecha, todas ellas con la misma altura.
Como hemos explicado antes, solo tienes que añadir tres líneas de código y ¡solucionado! Dispondrás de cajas flexibles:
section {
display: flex;
}
El modelo flexible
Cuando los elementos se presentan como cajas flexibles, se distribuyen con respecto a dos ejes:
El eje principal (main axis) es el eje en el que se colocan los elementos flexibles. El inicio y el final de este eje se denominan inicio principal (main start) y final principal (main end).
El eje transversal (cross axis) es el eje perpendicular a la dirección en la que se colocan los elementos flexibles. El inicio y el final de este eje se denominan inicio transversal (cross start) y extremo cruzado (cross end).
El elemento padre que tiene establecido display: flex (el elemento <section> en nuestro ejemplo) se llama contenedor flexible.
Los elementos que se presentan como cajas flexibles dentro del contenedor flexible se denominan elementos flexibles (son los elementos <article> de nuestro ejemplo).
¿Filas o columnas?
A los elementos flexbox les podemos aplicar una propiedad llamada flex-direction que especifica en qué dirección aparece el eje principal, o lo que es lo mismo, en qué dirección estarán dispuestos los elementos hijo de un elemento flexbox. Por defecto, está establecido en el valor row, por lo que se presentan en una fila en la dirección en que se escribe el idioma predeterminado de tu navegador (de izquierda a derecha, en el caso de un navegador en español).
Ejercicio propuesto: Distribución en una columna
Añade al ejercicio anterior el código CSS necesario para que los elementos dentro de <section> se muestren en una sola columna (flex-direction: column), de forma similar a la distribución que teníamos antes de aplicar el código CSS.
Bastará con utilizar unas pocas líneas de código CSS:
También puedes distribuir elementos flexibles en una dirección inversa utilizando los valores row-reverse y column-reverse.
Ejercicio propuesto: Distribución en fila en orden inverso
Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en la misma fila, pero en orden inverso (flex-direction: row-reverse).
Al igual que antes, solo tiene que utilizar unas pocas líneas de código CSS:
Ejercicio propuesto: Distribución en columna en orden inverso
Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en una sola columna, pero en orden inverso (flex-direction: column-reverse).
Al igual que antes, solo tiene que utilizar unas pocas líneas de código CSS:
Un problema que surge cuando tienes una cantidad fija de ancho o alto es que los hijos de un elemento flexbox eventualmente desbordan el contenedor y no se ajustan al diseño de nuestra página. Echa un vistazo al ejemplo de este enlace (donde vemos que los elementos hijo se pueden llegar a salir de su contenedor), o fíjate en el resultado que se observa a continuación, donde el ancho de cada columna es muy reducido:
Ejercicio propuesto: Establecer el tamaño de cada columna
Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> tengan un ancho fijo de 200px.
Una forma de conseguir esto fácilmente es añadir una propiedad más (flex-wrap:wrap) para ser aplicada al elemento <section> y añadir además, la especificación del tamaño (flex:200px) para ser aplicada al elemento <article>:
section {
display: flex;
flex-wrap: wrap;
}
article {
...
flex: 200px;
}
Observarás que al haber incluido este código CSS, la distribución de tu página resulta mucho más coherente:
Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración flex: 200px que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.
Ejercicio propuesto: Establecer el número de columnas por fila
Partiendo del ejercicio anterior, utiliza el código CSS necesario para que los elementos dentro de <section> se muestren en dos columnas.
Una forma de conseguir esto fácilmente es utilizar la propiedad correspondiente (flex-wrap:wrap) para ser aplicada al elemento <section> y añadir además, la especificación del tamaño especificando el porcentaje (flex:48%) para ser aplicada al elemento <article>:
section {
display: flex;
flex-wrap: wrap;
}
article {
...
flex: 48%;
}
Observarás que al haber incluido este código CSS, la distribución de tu página resulta mucho más coherente:
Ejercicio propuesto: Orden inverso en cada fila
Partiendo del código anterior, cambia el valor de tu propiedad flex-direction a row-reverse. Ahora verás que todavía tienes tu distribución en diversas filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye al revés:
Usando el código del último ejemplo anterior, añade tres ciudades más (para mostrar al menos 9 ciudades en total) y también inserta una imagen por cada una. Añade sombras al texto y a las cajas y también puedes cambiar los colores y el texto a tu gusto.
El resultado podría ser similar al siguiente (con ancho fijo o con porcentaje):
Alineación horizontal y vertical
También puedes usar las funciones de los elementos flexbox para alinear elementos flexibles sobre el eje principal o transversal. Exploremos este aspecto a partir de un ejemplo nuevo (puedes mirar el resultado aquí), que vamos a convertir en una barra de herramientas/botones ordenada y flexible. En este momento puedes ver una barra de menú horizontal, con algunos botones pegados en línea a la esquina superior izquierda. Si miramos el código HTML, observaremos que simplemente tenemos 5 botones dentro de un bloque <div>:
Si aplicamos algo de código CSS, por ejemplo, utilizando la propiedad align-items podremos controlar dónde se ubican los ejemplos flexibles del eje transversal:
Por defecto, el valor es stretch, que ensancha todos los elementos flexibles para rellenar el elemento primario en la dirección del eje transversal. Si el elemento padre no tiene un ancho fijo en la dirección del eje transversal, todos los elementos flexibles son tan largos como los elementos flexibles más largos. Así es como nuestro primer ejemplo obtuvo columnas de igual altura por defecto.
El valor center mantiene las dimensiones intrínsecas de los elementos pero los centra sobre el eje transversal.
También puedes tener valores como flex-start y flex-end, que alinean todos los elementos al inicio y al final del eje transversal, respectivamente. Consulta align-items para conocer todos los detalles al respecto.
Por otro lado, también podemos modificar el valor de la propiedad justify-content para controlar dónde se ubican los elementos flexibles sobre el eje principal:
El valor por defecto es flex-start, que coloca todos los elementos al comienzo del eje principal.
Puedes usar flex-end para que se coloquen al final.
center también es un valor de justify-content (para alinear contenido), que coloca los elementos flexibles sobre el centro del eje principal.
El valor space-around puede resultar muy útil porque distribuye todos los elementos de manera uniforme sobre el eje principal y deja un poco de espacio en cada extremo.
Hay otro valor, space-between, que es muy similar a space-around, pero no deja espacio en los extremos.
Ejercicio propuesto: Alineación vertical y distribución uniforme
Partiendo del código anterior de los cinco botones, cambia el valor de las propiedades align-items y justify-content como se indica a continuación. Cambia además el tamaño del bloque <div>, la fuente del texto y añade también alguna sombra al elemento <div> y a los botones y actualiza el contenido del navegador para observar el resultado.
div {
display: flex;
align-items: center;
justify-content: space-around;
}
