Cookie Clicker con HTML+CSS+Javascript (parte 2): Galletas extra por cada click

En esta unidad vamos a explicar cómo agregar una mejora al Cookie Clicker que permita ganar galletas extra con cada clic.

Imagen para activar la mejora

Al hacer click sobre esta imagen activarás la mejora de galletas extra. Puedes elegir cualquier imagen para tu juego, teniendo en cuenta simplemente que deberás colocarla dentro de la carpeta img. A continuación te proporcionamos una imagen de ejemplo:

Modificaciones del fichero «index.html»

Primero añadiremos una nueva imagen que represente una mejora que podremos comprar dentro de nuestro juego. Cuando el usuario haga clic en esta imagen, podrá comprar una mejora que le dará galletas extra por cada clic:

  • Para poder representar la mejora, utilizaremos una imagen adicional que meteremos dentro de un bloque div.
  • Al hacer clic sobre el bloque div, el jugador podrá adquirir la mejora si tiene suficientes galletas. Este proceso se llevará a cabo en la función comprarMejora('galletasExtra'), que crearemos a continuación en un fichero JavaScript.
...
<body>
    ...
    <div onclick="comprarMejora('galletasExtra')">
      <img src="img/muchas-galletas.png" width="125">
      <div id="textoGalletasExtra"></div>
    </div>

    <script src="variables.js"></script>
    <script src="utils.js"></script>
    <script src="script.js"></script>
</body>
</html>

Modificaciones del fichero «variables.js»

En este archivo, añadiremos una propiedad nueva dentro del objeto juego para almacenar las mejoras del juego, incluyendo la cantidad de galletas extra que el jugador ganará con cada clic y el precio de esta mejora:

  • La mejora tiene un precio (5 galletas) y un contador que muestra cuántas veces ha sido comprada.
  • Dentro de juego, ahora tenemos una sección llamada mejoras, que incluye la mejora de galletas extra.
// Objeto que almacena toda la información relativa al progreso y configuración del juego
let juego = {
    galletas: 0, // Cantidad total de galletas conseguidas
    mejoras: {
        galletasExtra: { cantidad: 0, precio: 100, descripcion: "Galletas extra por cada click" }, // Mejora de galletas extras por click
    }
}

Fichero «utils.js»

Este archivo contendrá funciones auxiliares, como una que muestra mensajes al jugador. Por ejemplo, cuando compra una mejora o cuando no tiene suficientes galletas:

  • mostrarMensaje(mensaje) muestra una ventana emergente con un mensaje. Es útil para informar al jugador si ha comprado una mejora o si no tiene suficientes galletas.
// Función para mostrar mensajes por pantalla, para avisar por ejemplo de las mejoras adquiridas
function mostrarMensaje(mensaje) {
    alert(mensaje);
}

Modificaciones del fichero «script.js»

Aquí vamos a modificar las funciones que actualizan el contador de galletas y que permiten comprar mejoras:

  • Función incrementarContador(): Ahora esta función no solo aumentará el contador de galletas en 1, sino que también sumará las galletas extra si el jugador ha comprado la mejora.
  • Función comprarMejora(nombreMejora): Esta función permite al jugador comprar mejoras. Verifica si tiene suficientes galletas y, si es así, descuenta el precio, aumenta la cantidad de la mejora y muestra un mensaje de confirmación.
...

// Función para incrementar el contador de galletas cuando el jugador hace clic en la galleta
function incrementarContador() {
    juego.galletas++;  // Aumenta la cantidad de galletas
    juego.galletas += juego.mejoras.galletasExtra.cantidad;  // Suma las galletas extra si se ha comprado la mejora    
    mostrarProgreso();  // Muestra la cantidad de galletas
}

// Función para comprar una mejora
// "mejora" es el objeto que representa la mejora que el jugador intenta comprar
function comprarMejora(nombreMejora) {
    const mejora = juego.mejoras[nombreMejora];
    if (juego.galletas >= mejora.precio) {  // Verifica si el jugador tiene suficientes galletas
        juego.galletas -= mejora.precio;  // Resta el precio de las galletas
        mejora.cantidad++;  // Aumenta la cantidad de la mejora
        mostrarMensaje(`¡Tienes ${mejora.cantidad} x ${mejora.descripcion}!`);  // Muestra un mensaje de confirmación
        mostrarProgreso();  // Muestra la cantidad de galletas después de pagar la mejora
    } else {
        mostrarMensaje("¡No tienes suficientes galletas!", 'warning');  // Si no tiene galletas suficientes, muestra una advertencia
    }
}

Cookie Clicker con HTML+CSS+Javascript (parte 1): Contando galletas

En esta parte implementaremos la funcionalidad básica del juego, es decir, un contador que acumule galletas a media que vayamos haciendo clicks.

La galleta

Puedes elegir cualquier imagen para tu juego. A continuación te proporcionamos una de ejemplo:

Como iremos utilizando más imágenes a medida que vayamos añadiendo funcionalidad a nuestro juego, lo ideal es crear una carpeta img que contendrá todas las imágenes, y así las mantendremos agrupadas y separadas del resto de ficheros.

Estructura del archivo «index.html»

El archivo HTML define cómo se verá el juego en el navegador. Aquí vamos a crear una página con un título, una imagen de una galleta, y un contador que muestra cuántas veces se ha hecho clic en la galleta:

  • Primero incluiremos las etiquetas básicas de HTML. Por ejemplo, utilizaremos <!DOCTYPE html> para especificar que estamos usando HTML5.
  • En la sección <head>:
    • Seleccionaremos el idioma de la página.
    • El juego tendrá un título (que aparecerá en la pestaña del navegador).
    • Especificaremos que nuestra aplicación será adaptable a diferentes tamaños de pantalla.
  • En la sección <body>:
    • Colocaremos el título visible «Cookie Clicker».
    • Añadiremos la imagen de la galleta sobre la que el usuario puede hacer clic.
    • Por último definiremos un div donde aparecerá el contador de clics.
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cookie Clicker</title>
</head>
<body>
    <h1>Cookie Clicker</h1>

    <div onclick="incrementarContador()">
        <img src="img/galleta.png" alt="Galleta" width="200">
        <div id="contador">0</div>
    </div>

    <script src="variables.js"></script> 
    <script src="script.js"></script>
</body>
</html>

Código JavaScript «variables.js»

Este archivo contiene una variable llamada juego, que almacena la información relacionada con el estado del juego, como el número de galletas que ha conseguido el jugador.

Definimos un objeto llamado juego, que contiene las propiedades del juego. Aquí, solo vamos a almacenar el número de galletas que el jugador ha ganado.

// Objeto que almacena toda la información relativa al progreso y configuración del juego
let juego = {
    galletas: 0, // Cantidad total de galletas conseguidas
}

Código JavaScript «script.js»

Este archivo maneja la lógica del juego. Cada vez que el jugador hace clic en la galleta, el número de galletas aumenta y se actualiza el contador en la pantalla:

  • Función mostrarProgreso(): Esta función actualiza el título del navegador para mostrar cuántas galletas se han conseguido. Además, cambia el texto en el contador de la página para reflejar la cantidad actualizada.
  • Función incrementarContador(): Esta función es llamada cada vez que se hace clic en la galleta. Incrementa el número de galletas en el objeto juego y llama a mostrarProgreso() para actualizar el resultado en la ventana del navegador.
// Función para mostrar al usuario los progresos actualizados a medida que van cambiando los datos
function mostrarProgreso() {
    // Cambia el título de la pestaña del navegador para mostrar el número de galletas
    document.title = `Cookie Clicker - ${juego.galletas} galletas`;

    // Actualiza el contador de galletas en pantalla
    document.getElementById('contador').textContent = juego.galletas.toLocaleString();
}

// Función para incrementar el contador de galletas cuando el jugador hace clic en la galleta
function incrementarContador() {
    juego.galletas++;  // Aumenta la cantidad de galletas
    mostrarProgreso();  // Muestra la cantidad de galletas
}

Cookie Clicker con HTML+CSS+Javascript

En las siguientes unidades aprenderemos a desarrollar nuestra propia versión del popular juego Cookie Clicker, utilizando simplemente tecnologías web. Además, podremos compilar nuestra aplicación en formato «apk» para instalarla en cualquier dispositivo móvil.

Contando galletas

Galletas extra por cada click

Guardando el progreso

Reiniciando el progreso del juego

Añadiendo icono y estilos

Compilando la aplicación para móvil

Auto clickers

Comprando abuelas

Comprando granjas

Comprando fábricas

El resultado

Puedes probar el resultado en este enlace.

Manual básico de Matplotlib

Introducción a Matplotlib

¿Qué es Matplotlib?

Matplotlib es una librería de Python utilizada para crear visualizaciones de datos en forma de gráficos 2D. Es altamente versátil y permite generar una amplia gama de gráficos, desde simples gráficos de líneas y barras hasta complejos gráficos de dispersión, histogramas, gráficos de pastel, entre otros. Matplotlib es particularmente popular en campos como ciencia de datos, estadística e ingeniería, ya que ofrece una manera fácil y flexible de representar visualmente datos de manera clara y comprensible. La librería se integra bien con otras herramientas de análisis de datos en Python, como NumPy y Pandas, lo que facilita el análisis y la visualización de grandes conjuntos de datos. Con Matplotlib, los usuarios pueden personalizar cada aspecto de un gráfico, desde los colores y estilos de línea hasta la inclusión de leyendas, títulos y anotaciones, lo que la convierte en una excelente herramienta para crear visualizaciones que representen la información de manera eficaz.

Instalación

Para comenzar a utilizar Matplotlib, necesitas instalar la librería en tu entorno de Python. Esto se hace fácilmente utilizando pip, que es el gestor de paquetes de Python. Este comando descargará e instalará la última versión de Matplotlib y sus dependencias:

pip install matplotlib

Importar Matplotlib

En Python, las librerías se importan para acceder a sus funcionalidades. Para Matplotlib, la parte que se utiliza con mayor frecuencia es pyplot, un módulo que proporciona una interfaz de alto nivel para crear gráficos. Se suele importar con el alias plt para simplificar su uso. De hecho, este alias plt es un estándar de facto y verás que la mayoría de los ejemplos y tutoriales utilizan esta convención:

import matplotlib.pyplot as plt

En entornos donde no se tiene una pantalla (como en servidores web o scripts que generan gráficos sin mostrarlos), se recomienda utilizar matplotlib.use('Agg') para configurar Matplotlib en un backend que no requiere una interfaz gráfica:

import matplotlib
matplotlib.use('Agg')
import matplotlib.pyplot as plt

Creación de gráficos básicos

Gráfico de líneas

Los gráficos de líneas son uno de los tipos de gráficos más comunes y se utilizan para mostrar la relación entre dos variables continuas. Son especialmente útiles para mostrar cómo cambia una variable en función del tiempo u otra métrica continua.

Ejemplo: Ventas a lo largo del año

import matplotlib.pyplot as plt

# Datos
meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio']
ventas = [150, 200, 250, 300, 350, 400]

# Crear el gráfico
plt.plot(meses, ventas)

# Añadir títulos y etiquetas
plt.title("Ventas Mensuales")
plt.xlabel("Meses")
plt.ylabel("Ventas en $")

# Mostrar el gráfico
plt.show()

Explicación:

  • plt.plot(meses, ventas) genera una línea que conecta los puntos definidos por las listas meses y ventas.
  • plt.title, plt.xlabel, y plt.ylabel se usan para añadir un título y etiquetas a los ejes.
  • plt.show() muestra el gráfico en la pantalla.

Gráfico de barras

Los gráficos de barras son ideales para comparar diferentes categorías. Cada barra representa una categoría, y su altura o longitud representa la magnitud de la variable asociada a esa categoría.

Ejemplo: Comparación de ventas por producto

productos = ['Producto A', 'Producto B', 'Producto C']
ventas = [300, 450, 150]

plt.bar(productos, ventas)

plt.title("Ventas por Producto")
plt.xlabel("Productos")
plt.ylabel("Ventas en $")

plt.show()

Explicación:

  • plt.bar(productos, ventas) crea un gráfico de barras donde cada barra corresponde a un producto y su altura muestra el volumen de ventas.
  • Este tipo de gráfico es útil para visualizar comparaciones directas entre diferentes elementos.

Gráfico de dispersión

Un gráfico de dispersión es útil cuando deseas visualizar la relación entre dos variables numéricas. Cada punto en el gráfico representa un par de valores.

Ejemplo: Relación entre publicidad y ventas

publicidad = [100, 200, 300, 400, 500]
ventas = [10, 20, 30, 40, 50]

plt.scatter(publicidad, ventas)

plt.title("Relación entre Publicidad y Ventas")
plt.xlabel("Publicidad en $")
plt.ylabel("Ventas en $")

plt.show()

Explicación:

  • plt.scatter(publicidad, ventas) dibuja un punto para cada par de valores en las listas publicidad y ventas.
  • Este gráfico es excelente para identificar patrones, tendencias o posibles correlaciones entre las variables.

Histograma

Los histogramas se utilizan para mostrar la distribución de un conjunto de datos. Dividen el rango de datos en intervalos (o «bins») y cuentan cuántos valores caen en cada intervalo.

Ejemplo: Distribución de edades en un grupo

edades = [23, 25, 26, 29, 30, 32, 35, 36, 40, 41, 42, 45, 50, 55, 60]

plt.hist(edades, bins=5)  # 'bins' define el número de barras en el histograma

plt.title("Distribución de Edades")
plt.xlabel("Edades")
plt.ylabel("Número de Personas")

plt.show()

Explicación:

  • plt.hist(edades, bins=5) crea un histograma que divide los datos en 5 intervalos y cuenta cuántos valores caen en cada intervalo.
  • Los histogramas son útiles para comprender la distribución de los datos, por ejemplo, si los datos están sesgados hacia un extremo o si tienen una distribución normal.

Personalización de gráficos

Colores y estilos de líneas

Matplotlib permite personalizar el color y el estilo de las líneas en los gráficos, lo que es útil para mejorar la claridad y la estética de la visualización.

Ejemplo: Personalización de un gráfico de líneas

dias = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes']
temperaturas = [22, 24, 20, 21, 19]

plt.plot(dias, temperaturas, color='green', linestyle='--', marker='o')

plt.title("Temperaturas Diarias")
plt.xlabel("Días")
plt.ylabel("Temperatura (°C)")

plt.show()

Explicación:

  • color='green' cambia el color de la línea a verde.
  • linestyle='--' convierte la línea en discontinua.
  • marker='o' añade marcadores de círculos en cada punto de datos.

Añadir leyendas

Las leyendas identifican las distintas series de datos en un gráfico, lo que es esencial cuando se comparan varias series.

Ejemplo: Comparación de ventas de dos productos

meses = ['Enero', 'Febrero', 'Marzo', 'Abril']
ventas_producto_a = [200, 220, 250, 270]
ventas_producto_b = [180, 190, 200, 210]

plt.plot(meses, ventas_producto_a, label='Producto A')
plt.plot(meses, ventas_producto_b, label='Producto B')

plt.title("Comparación de Ventas")
plt.xlabel("Meses")
plt.ylabel("Ventas en $")
plt.legend()  # Añadir leyenda

plt.show()

Explicación:

  • label='Producto A' y label='Producto B' especifican el nombre de cada línea en la leyenda.
  • plt.legend() coloca la leyenda en el gráfico.

Gráficos con subtramas

Los subgráficos permiten colocar múltiples gráficos en una sola figura, organizándolos en una cuadrícula.

Ejemplo: Gráficos de ventas y beneficios

meses = ['Enero', 'Febrero', 'Marzo', 'Abril']
ventas = [250, 300, 350, 400]
beneficios = [50, 60, 70, 80]

fig, (ax1, ax2) = plt.subplots(1, 2)  # Una fila y dos columnas

ax1.plot(meses, ventas)
ax1.set_title("Ventas")

ax2.plot(meses, beneficios, color='red')
ax2.set_title("Beneficios")

plt.show()

Explicación:

  • plt.subplots(1, 2) crea una figura con una fila y dos columnas de subgráficos.
  • ax1.plot(...) y ax2.plot(...) permiten dibujar gráficos en los diferentes ejes.

Gráficos avanzados

Gráfico de series temporales

Los gráficos de series temporales son fundamentales para mostrar cómo cambian los datos a lo largo del tiempo.

Ejemplo: Evolución de precios de acciones

import pandas as pd
import matplotlib.pyplot as plt

# Datos de ejemplo
fechas = pd.date_range(start='2023-01-01', periods=6, freq='M')
precios = [100, 105, 102, 108, 110, 115]

plt.plot(fechas, precios, marker='o')

plt.title("Evolución de Precios de Acciones")
plt.xlabel("Fecha")
plt.ylabel("Precio ($)")
plt.xticks(rotation=45)

plt.show()

Explicación:

  • pd.date_range(start='2023-01-01', periods=6, freq='M') genera un rango de fechas mensuales a partir de enero de 2023.
  • Este gráfico es ideal para mostrar datos financieros, meteorológicos, u otras métricas que varían con el tiempo.

Gráfico de pastel

Los gráficos de pastel se utilizan para mostrar la proporción de diferentes categorías en un conjunto de datos.

Ejemplo: Distribución de ventas por región

regiones = ['Norte', 'Sur', 'Este', 'Oeste']
ventas = [400, 300, 150, 150]

plt.pie(ventas, labels=regiones, autopct='%1.1f%%')

plt.title("Distribución de Ventas por Región")

plt.show()

Explicación:

  • plt.pie(ventas, labels=regiones, autopct='%1.1f%%') crea un gráfico de pastel y muestra los porcentajes de cada categoría en el gráfico.
  • Este tipo de gráfico es útil para mostrar cómo se distribuyen los datos en diferentes categorías.

Gráfico de barras apiladas

Los gráficos de barras apiladas son útiles para mostrar cómo diferentes subcomponentes contribuyen a un total.

Ejemplo: Ventas por categoría en diferentes meses

import numpy as np

meses = ['Enero', 'Febrero', 'Marzo', 'Abril']
categoria_a = [20, 35, 30, 35]
categoria_b = [25, 32, 34, 20]
categoria_c = [30, 30, 30, 30]

ind = np.arange(len(meses))  # La posición de los grupos
ancho = 0.35  # El ancho de las barras

p1 = plt.bar(ind, categoria_a, ancho)
p2 = plt.bar(ind, categoria_b, ancho, bottom=categoria_a)
p3 = plt.bar(ind, categoria_c, ancho, bottom=np.array(categoria_a)+np.array(categoria_b))

plt.ylabel('Ventas')
plt.title('Ventas por Categoría y Mes')
plt.xticks(ind, meses)
plt.legend(('Categoría A', 'Categoría B', 'Categoría C'))

plt.show()

Explicación:

  • bottom=categoria_a apila las barras de categoria_b sobre las de categoria_a.
  • Este gráfico es útil para ver la contribución relativa de diferentes categorías a lo largo del tiempo.

Guardar y compartir gráficos

Guardar gráficos en un archivo

Matplotlib permite guardar gráficos en diferentes formatos de archivo como PNG, PDF, SVG, entre otros. Esto es especialmente útil si deseas incluir gráficos en informes o presentaciones.

Ejemplo: Guardar un gráfico como PNG

x = [1, 2, 3, 4, 5]
y = [10, 20, 25, 30, 40]

plt.plot(x, y)

plt.title("Gráfico para Guardar")
plt.xlabel("Eje X")
plt.ylabel("Eje Y")

plt.savefig('grafico_guardado.png')  # Guarda el gráfico como PNG

Explicación:

  • plt.savefig('grafico_guardado.png') guarda el gráfico en el archivo grafico_guardado.png en el formato especificado.
  • Es posible cambiar el formato del archivo guardándolo con una extensión diferente, como .pdf o .svg.

Uso de BytesIO para generar gráficos en memoria

En algunos casos, no es necesario guardar los gráficos en el disco como archivos para compartirlos o visualizarlos en otras aplicaciones. Por ejemplo, en aplicaciones web se pueden enviar los gráficos dinámicamente al navegador sin crear archivos temporales. Aquí es donde entra en juego BytesIO, una clase de la librería estándar io en Python, que actúa como un contenedor de datos en memoria que se comporta como un archivo. Puedes escribir en él, leer de él, y tratarlo como si fuera un archivo regular, pero todo ocurre en la memoria RAM en lugar de en el disco duro.

Además, BytesIO no necesita ser instalado por separado porque forma parte de la biblioteca estándar de Python, específicamente dentro del módulo io. Esto significa que BytesIO está disponible automáticamente en cualquier instalación de Python moderna (Python 3 y superior) y no requiere ninguna instalación adicional:

from io import BytesIO

Ejemplo: Generación de un gráfico y almacenamiento en BytesIO

A continuación se muestra cómo se puede crear un gráfico con Matplotlib, almacenarlo en un objeto BytesIO en lugar de guardarlo en un archivo físico, y luego usar plt.close() para liberar recursos de manera eficiente:

import matplotlib.pyplot as plt
from io import BytesIO

# Datos de ejemplo
x = [1, 2, 3, 4, 5]
y = [10, 20, 25, 30, 35]

# Crear un gráfico
plt.plot(x, y)
plt.title("Gráfico en Memoria")
plt.xlabel("Eje X")
plt.ylabel("Eje Y")

# Crear un objeto BytesIO para almacenar el gráfico
img = BytesIO()

# Guardar el gráfico en el objeto BytesIO en formato PNG
plt.savefig(img, format='png')

# Colocar el puntero del archivo en memoria al inicio
# Ahora `img` contiene el gráfico en formato PNG, listo para ser enviado o procesado
img.seek(0)

# Cerrar la figura para liberar memoria
plt.close()

Explicación:

  • BytesIO() crea un objeto en memoria que se comporta como un archivo.
  • plt.savefig(img, format='png') guarda el gráfico en el objeto BytesIO en formato PNG.
  • img.seek(0) reposiciona el puntero al inicio del archivo en memoria para poder leerlo desde el principio.
  • plt.close() cierra la figura actual y libera los recursos de memoria asociados al gráfico. Esto es especialmente importante en aplicaciones que generan muchos gráficos, ya que evita el consumo excesivo de memoria.

Uso de BytesIO en Aplicaciones web con Flask

Una de las aplicaciones más comunes de BytesIO es en el desarrollo de aplicaciones web con frameworks como Flask. En estas aplicaciones, los gráficos se generan en respuesta a las solicitudes HTTP y se envían directamente al usuario para que los pueda visualizar en el navegador:

from flask import Flask, send_file
import matplotlib.pyplot as plt
from io import BytesIO

app = Flask(__name__)

@app.route('/grafico')
def generar_grafico():
    # Datos de ejemplo
    x = [1, 2, 3, 4, 5]
    y = [10, 20, 25, 30, 35]

    # Crear un gráfico
    plt.plot(x, y)
    plt.title("Gráfico Generado en Flask")
    plt.xlabel("Eje X")
    plt.ylabel("Eje Y")

    # Crear un objeto BytesIO
    img = BytesIO()

    # Guardar el gráfico en el objeto BytesIO en formato PNG
    plt.savefig(img, format='png')
    img.seek(0)  # Reposicionar el puntero al inicio del archivo en memoria

    # Cerrar la figura para liberar memoria
    plt.close()

    # Enviar el gráfico como respuesta HTTP
    return send_file(img, mimetype='image/png')

if __name__ == '__main__':
    app.run(debug=True)

Explicación:

  • send_file(img, mimetype='image/png') envía el contenido del BytesIO al cliente web como una imagen PNG.
  • plt.close() cierra la figura una vez que el gráfico ha sido guardado en memoria, asegurando que no queden gráficos abiertos que puedan consumir memoria innecesariamente.
  • Esta configuración permite que cada vez que un usuario acceda a la ruta /grafico, se genere un gráfico dinámicamente en memoria y se envíe al navegador.

Ventajas del uso de BytesIO y plt.close()

  • Eficiencia: No se necesita escribir archivos temporales en disco, lo que reduce el I/O del disco y mejora el rendimiento. Además, plt.close() asegura que la memoria se libere inmediatamente después de generar el gráfico.
  • Seguridad: Al no crear archivos temporales, se minimiza el riesgo de dejar datos sensibles en el disco.
  • Flexibilidad: Este enfoque se puede utilizar con aplicaciones que requieren gráficos dinámicos, como servicios web o scripts automatizados, sin preocuparse por el manejo de archivos en el sistema.

Ejemplos reales

Análisis de datos meteorológicos

Este ejemplo muestra cómo crear un gráfico con la evolución de la temperatura a lo largo de un día. Es común en aplicaciones de monitoreo del clima o en la presentación de datos meteorológicos:

import matplotlib.pyplot as plt

horas = ['6 AM', '9 AM', '12 PM', '3 PM', '6 PM', '9 PM']
temperaturas = [15, 18, 22, 26, 23, 20]

plt.plot(horas, temperaturas, marker='o', linestyle='-', color='blue')

plt.title("Evolución de la Temperatura")
plt.xlabel("Hora del Día")
plt.ylabel("Temperatura (°C)")
plt.grid(True)

plt.show()

Explicación:

  • marker='o', linestyle='-', color='b' personaliza la línea del gráfico.
  • plt.grid(True) añade una cuadrícula al gráfico para mejorar la legibilidad.

Análisis de datos financieros

Con el siguiente código creamos un gráfico que muestra la evolución del precio de cierre de las acciones de una empresa durante una semana. Este tipo de gráfico es fundamental en finanzas para analizar el rendimiento de acciones, bonos, etc.:

import matplotlib.pyplot as plt

dias = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes']
precios = [150, 152, 148, 155, 160]

plt.plot(dias, precios, marker='o', linestyle='-', color='green')

plt.title("Evolución del precio de las acciones")
plt.xlabel("Días de la Semana")
plt.ylabel("Precio de la Acción ($)")
plt.grid(True)

plt.show()

Explicación:

  • plt.grid(True) añade una cuadrícula al gráfico para facilitar la comparación entre los días.

Análisis de resultados de exámenes

Este ejemplo muestra cómo comparar los resultados de dos clases en un examen. Puede resultar últil para analizar el rendimiento de los estudiantes de grupos diferentes:

import matplotlib.pyplot as plt

clases = ['Clase A', 'Clase B']
promedio_matematicas = [78, 85]
promedio_lenguaje = [82, 88]

x = range(len(clases))

plt.bar(x, promedio_matematicas, width=0.4, label='Matemáticas', align='center')
plt.bar(x, promedio_lenguaje, width=0.4, label='Lenguaje', align='edge')

plt.xlabel('Clases')
plt.ylabel('Promedio de Examen')
plt.title('Comparación de Resultados de Exámenes por Clase')
plt.xticks(x, clases)
plt.legend()

plt.show()

Explicación:

  • plt.bar(x, promedio_matematicas, width=0.4, label='Matemáticas', align='center') dibuja barras para Matemáticas.
  • plt.bar(x, promedio_lenguaje, width=0.4, label='Lenguaje', align='edge') dibuja barras para Lenguaje justo al lado de las de Matemáticas.
  • plt.legend() añade una leyenda que identifica qué barras corresponden a cada materia.

Recursos adicionales para aprender Matplotlib

Aprender a utilizar Matplotlib a fondo requiere tiempo y práctica, pero afortunadamente, la documentación oficial está muy bien redactada y organizada, y se actualiza con frecuencia. Además, dispone de una extensa galería de ejemplos donde puedes consultar muchos fragmentos de código, y observar el resultado generado.

Documentación oficial

La documentación oficial de Matplotlib es el recurso más completo y fiable. Este es el lugar al que debes recurrir cuando necesites información específica sobre cómo hacer algo con Matplotlib. Aquí encontrarás información detallada sobre todas las funciones y características. La documentación incluye:

  • Tutoriales: Introducciones paso a paso para principiantes que cubren desde los gráficos más básicos hasta técnicas avanzadas.
  • Guías de Uso: Explicaciones detalladas sobre cómo usar diversas partes de la API de Matplotlib.
  • Referencia de API: Una lista exhaustiva de todas las funciones, métodos y clases disponibles en Matplotlib, junto con ejemplos de cómo usarlos.
  • Ejemplos de Código: Pequeños fragmentos de código que ilustran cómo lograr resultados específicos con Matplotlib.

Galería de ejemplos

La galería de ejemplos de Matplotlib te proporciona un excelente recurso visual que muestra una gran cantidad de gráficos que puedes crear con Matplotlib. Cada ejemplo en la galería está acompañado del código fuente, lo que te permite ver exactamente cómo se generó el gráfico y experimentar por ti mismo. Esta sección de la documentación oficial incluye:

  • Cientos de ejemplos: La galería es ideal para obtener ideas sobre cómo visualizar tus propios datos de manera efectiva.
  • Código listo para usar: Puedes copiar y pegar el código directamente en tu propio proyecto y ajustarlo según tus necesidades.
  • Tipos de gráficos muy diversos: Desde gráficos de líneas y barras hasta gráficos más complejos como gráficos de violín, mapas de calor, y gráficos 3D.

CSS. Unidad 4. Aplicando estilos a listas.

Presentación

Infografía

Diapositivas y vídeo

A través de esta presentación, estas diapositivas, y este vídeo, te familiarizarás con los contenidos clave de esta unidad.

Introducción

Las listas se comportan como cualquier otro texto en su mayor parte, pero hay algunas propiedades CSS específicas de las listas que debes conocer y ciertas recomendaciones a tener en cuenta. En esta unidad conoceremos algunas de ellas.

Un ejemplo sencillo de lista

Para empezar, veamos un ejemplo sencillo de una lista. A lo largo de esta unidad veremos listas no ordenadas, listas ordenadas y listas de descripciones. Todas tienen características de estilo similares, pero algunas propiedades son particulares del tipo de lista.

Utilizaremos el siguiente código HTML:

<h2>Ingredienetes (lista no ordenada)</h2>

<ul>
  <li>Hummus</li>
  <li>Pan pita</li>
  <li>Ensalada verde</li>
  <li>Queso halloumi</li>
</ul>

<h2>Ingredientes (lista descriptiva)</h2>

<dl>
  <dt>Hummus</dt>
  <dd>Una salsa espesa hecha generalmente de garbanzos, tahini, jugo de limón, sal, ajo y otros ingredientes.</dd>
  <dt>Pan pita</dt>
  <dd>Un pan plano suave y ligeramente leudado.</dd>
  <dt>Queso halloumi</dt>
  <dd>Un queso semiduro, sin madurar, en salmuera con un punto de fusión superior al habitual, generalmente hecho de leche de cabra/oveja.</dd>
  <dt>Ensalada verde</dt>
  <dd>Esa cosa verde y saludable que muchos de nosotros solo usamos para adornar kebabs.</dd>
</dl>

<h2>Receta (lista ordenada)</h2>

<ol>
  <li>Tostar el pan pita, dejar enfriar y cortar por el borde.</li>
  <li>Freír el queso halloumi en una sartén antiadherente poco profunda hasta que esté dorado por ambos lados.</li>
  <li>Lavar y picar la ensalada.</li>
  <li>Rellenar el pan pita con ensalada, hummus y queso halloumi frito.</li>
</ol>

Los valores predeterminados son los siguientes:

  • Los elementos <ul> y <ol> tienen un margin superior e inferior de 16px (1em) y un padding-left de 40px (2.5em.)
  • Los elementos de lista <li> no tienen valores de espacio predeterminados.
  • El elemento <dl> tiene un margin superior e inferior de 16px (1em), pero no tiene ningún padding establecido.
  • Los elementos <dd> tienen un margin-left de 40px (2.5em).
  • Los elementos de referencia <p> que hemos incluido tienen un margin superior e inferior de 16px (1em), al igual que los diferentes tipos de lista.

Ejercicio propuesto: Listas con los estilos por defecto

Crea una página web con la lista del ejemplo anterior y observa el resultado en tu navegador. Se debería mostrar con los estilos por defecto, ya que no estamos utilizando CSS todavía.

Deberías obtener un resultado parecido al siguiente:

Ingredientes (lista no ordenada)

  • Hummus
  • Pan pita
  • Ensalada verde
  • Queso halloumi

Ingredientes (lista descriptiva)

Hummus
Una salsa espesa hecha generalmente de garbanzos, tahini, jugo de limón, sal, ajo y otros ingredientes.
Pan pita
Un pan plano suave y ligeramente leudado.
Queso halloumi
Un queso semiduro, sin madurar, en salmuera con un punto de fusión superior al habitual, generalmente hecho de leche de cabra/oveja.
Ensalada verde
Esa cosa verde y saludable que muchos de nosotros solo usamos para adornar kebabs.

Receta (lista ordenada)

  1. Tostar el pan pita, dejar enfriar y cortar por el borde.
  2. Freír el queso halloumi en una sartén antiadherente poco profunda hasta que esté dorado por ambos lados.
  3. Lavar y picar la ensalada.
  4. Rellenar el pan pita con ensalada, hummus y queso halloumi frito.

Estilos básicos de las listas

Al crear listas, es necesario ajustar el diseño para que mantengan los mismos espaciados verticales (a veces denominados ritmos verticales) que el resto de elementos circundantes, como párrafos e imágenes.

El CSS que vamos a utilizar para aplicar estilo al texto y al espaciado de texto es el siguiente:

/* Estilos generales */
html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul, ol, dl, p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}

/* Estilos para las listas de descripciones */
dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}
  • La primera regla establece un tipo de letra y un tamaño de letra base de 10px. Estos valores se heredan para toda la página.
  • Las reglas 2 y 3 establecen tamaños de letra relativos para los títulos, diferentes tipos de listas (que heredan los hijos de los elementos de listas), y párrafos. Esto significa que todos los párrafos y todas las listas tendrán el mismo tamaño de letra y el mismo espaciado superior e inferior, lo que ayudará a mantener el ritmo vertical constante.
  • La regla 4 establece el mismo interlineado (line-height) en los párrafos y los elementos de las listas, de modo que todos los párrafos y todos los elementos individuales de las listas tendrán el mismo espaciado entre las líneas. Esto también ayudará a mantener el ritmo vertical consistente.
  • Las reglas 5 y 6 se aplican a las listas de descripciones. Establecemos la misma altura de interlineado (line-height) en los términos y las descripciones de la lista de descripciones, así como hicimos con los párrafos y los elementos de la lista. De esta forma mantenemos un estilo coherente. También establecemos que los términos de las descripciones tengan un estilo de negrita, para que destaquen visualmente.

Ejercicio propuesto: Listas con tus propios estilos

Crea una página web con las listas y estilos del ejemplo anterior, y cambia o añade los estilos que quieras. A continuación enlaza el fichero CSS desde el fichero HTML, y comprueba el resultado en tu navegador. No olvides validar tanto el código HTML como el CSS.

El resultado obtenido podría ser similar al siguiente:

Ingredientes (lista no ordenada)

  • Hummus
  • Pan pita
  • Ensalada verde
  • Queso halloumi

Ingredientes (lista descriptiva)

Hummus
Una salsa espesa hecha generalmente de garbanzos, tahini, jugo de limón, sal, ajo y otros ingredientes.
Pan pita
Un pan plano suave y ligeramente leudado.
Queso halloumi
Un queso semiduro, sin madurar, en salmuera con un punto de fusión superior al habitual, generalmente hecho de leche de cabra/oveja.
Ensalada verde
Esa cosa verde y saludable que muchos de nosotros solo usamos para adornar kebabs.

Receta (lista ordenada)

  1. Tostar el pan pita, dejar enfriar y cortar por el borde.
  2. Freír el queso halloumi en una sartén antiadherente poco profunda hasta que esté dorado por ambos lados.
  3. Lavar y picar la ensalada.
  4. Rellenar el pan pita con ensalada, hummus y queso halloumi frito.

Estilos específicos de listas

Ahora que hemos analizado el espaciado general de las listas, exploremos algunas propiedades específicas de las listas. Para empezar, debes conocer tres propiedades que pueden establecerse en los elementos <ul> o <ol>:

  • list-style-type: Establece el tipo de viñetas para la lista, por ejemplo, viñetas cuadradas o circulares para una lista no ordenada; números, letras, o números romanos para una lista ordenada.
  • list-style-position: Establece si las viñetas aparecen dentro de los elementos de la lista o fuera de ellos, antes del inicio de cada elemento.
  • list-style-image: Te permite usar una imagen personalizada para la viñeta, en lugar de un simple cuadrado o círculo.

El estilo de la viñeta

Como hemos comentado, la propiedad list-style-type te permite establecer qué tipo de viñeta usar. En nuestro ejemplo, hemos establecido que se usen números romanos en mayúsculas para la lista ordenada, con:

ol {
  list-style-type: upper-roman;
}
  1. Tostar el pan pita, dejar enfriar y cortar por el borde.
  2. Freír el queso halloumi en una sartén antiadherente poco profunda hasta que esté dorado por ambos lados.
  3. Lavar y picar la ensalada.
  4. Rellenar el pan pita con ensalada, hummus y queso halloumi frito.

Puedes encontrar más opciones si echas un vistazo a la página de referencia de list-style-type.

La posición de la viñeta

La propiedad list-style-position establece si las viñetas aparecen dentro de los elementos de la lista, o fuera de ellos antes del inicio de cada elemento. El valor por defecto es outside, que provoca que las viñetas se sitúen fuera de los elementos de lista, como se observa arriba.

Si estableces el valor en inside, las viñetas se ubican dentro de las líneas:

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}
  1. Tostar el pan pita, dejar enfriar y cortar por el borde.
  2. Freír el queso halloumi en una sartén antiadherente poco profunda hasta que esté dorado por ambos lados.
  3. Lavar y picar la ensalada.
  4. Rellenar el pan pita con ensalada, hummus y queso halloumi frito.

Usando una imagen personalizada como viñeta

La propiedad list-style-image te permite usar una imagen personalizada para tu viñeta. La sintaxis es muy simple:

ul {
  list-style-image: url("https://api.iconify.design/mdi:star.svg?color=red");
}

Sin embargo, esta propiedad es un poco limitada por lo que respecta al control de la posición, el tamaño, etc., de las viñetas. En algunos casos puede resultar más conveniente usar la propiedad background, tal como haremos nosotros. En nuestro ejemplo vamos a definir el estilo a la lista no ordenada utilizando esta última propiedad. Para ello añadiremos el siguiente código al que ya teníamos previamente:

ul {
  padding-left: 2rem;
  list-style-type: none;
}

ul li {
  padding-left: 2rem;
  background-image: url("https://api.iconify.design/mdi:star.svg?color=red");
  background-position: left;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}
  • Hummus
  • Pan pita
  • Ensalada verde
  • Queso halloumi

Aquí hemos hecho lo siguiente:

  • Reducir el valor de la propiedad padding-left del elemento <ul> desde su valor predeterminado de 40 px hasta 20 px. A continuación, establecer la misma cantidad para los elementos de la lista. De este modo, todos los elementos de la lista siguen alineados con los elementos de la lista ordenada y las descripciones, pero los elementos de lista tienen algo de relleno (padding) para poder insertar las imágenes de fondo. Si no hiciéramos esto, las imágenes de fondo se solaparían con el texto de los elementos de la lista y quedaría un aspecto desordenado.
  • Establecer la propiedad list-style-type en none, para que no aparezca la viñeta predeterminada. En lugar de ello, vamos a utilizar las propiedades background para cambiar las viñetas.
  • Insertar una viñeta en cada elemento de la lista no ordenada. Las propiedades relevantes son las siguientes:
    • background-image: Proporciona la ruta que apunta al archivo de imagen que quieres usar como viñeta.
    • background-position: Define en qué lugar del elemento seleccionado va a aparecer la imagen; en este caso le decimos que la viñeta debe aparecer a la izquierda de cada elemento de lista.
    • background-size: Establece el tamaño de la imagen de fondo. En teoría queremos que las viñetas sean del mismo tamaño que los elementos de lista (o solo un poco menores o mayores). Utilizamos un tamaño de 1.6rem (16px), que encaja muy bien con el área de relleno de 20px que hemos elegido para que quepa la viñeta; 16 px más 4 px de espacio entre la viñeta y el texto del elemento de lista funciona bien.
    • background-repeat: Por defecto, las imágenes de fondo se repiten hasta rellenar todo el espacio de fondo disponible. En este caso solo queremos una copia de la imagen, de modo que establecemos el valor de esta propiedad en no-repeat.

Ejercicio propuesto: Juntándolo todo

Utilizando el código del ejercicio anterior, cambia las viñetas que aparecen por defecto para utilizar una imagen, y cambia también la numeración por defecto para utilizar cualquier otro estilo que te guste. Finalmente comprueba el resultado en tu navegador y valida el código HTML y CSS.

Un posible resultado podría ser el siguiente:

Ingredientes (lista no ordenada)

  • Hummus
  • Pan pita
  • Ensalada verde
  • Queso halloumi

Ingredientes (lista descriptiva)

Hummus
Una salsa espesa hecha generalmente de garbanzos, tahini, jugo de limón, sal, ajo y otros ingredientes.
Pan pita
Un pan plano suave y ligeramente leudado.
Queso halloumi
Un queso semiduro, sin madurar, en salmuera con un punto de fusión superior al habitual, generalmente hecho de leche de cabra/oveja.
Ensalada verde
Esa cosa verde y saludable que muchos de nosotros solo usamos para adornar kebabs.

Receta (lista ordenada)

  1. Tostar el pan pita, dejar enfriar y cortar por el borde.
  2. Freír el queso halloumi en una sartén antiadherente poco profunda hasta que esté dorado por ambos lados.
  3. Lavar y picar la ensalada.
  4. Rellenar el pan pita con ensalada, hummus y queso halloumi frito.

Propiedad abreviada list-style

Es importante mencionar la existencia de la propiedad abreviada list-style, que nos permite configurar las tres propiedades del ejemplo anterior en una sola línea. Por ejemplo, observa el CSS siguiente:

ul {
  list-style-type: disc;
  list-style-image: url("ejemplo.png");
  list-style-position: inside;
}

Se podría reemplazarse por esto:

ul {
  list-style: disc url("ejemplo.png") inside;
}

Los valores pueden escribirse en cualquier orden, y puedes usar uno, dos o los tres (los valores por defecto que se utilizan para las propiedades que no están incluidas son discnone y outside). Si se especifican tanto type como image, el valor de type se usa como una segunda opción en el caso de que no sea posible cargar la imagen por cualquier motivo.

Test

Comprueba tus conocimientos con este test sobre estilos de listas.

CSS. Unidad 3. Aplicando estilos a los enlaces.

Presentación

Infografía

Diapositivas y vídeo

A través de esta presentación, estas diapositivas, y este vídeo, te familiarizarás con los contenidos clave de esta unidad.

Introducción

A la hora de dar estilo a los enlaces, es importante comprender cómo utilizar las pseudoclases para diseñar los estados de un enlace de manera efectiva y cómo diseñar enlaces para su uso en diversas funciones de interfaz comunes, como menús y pestañas de navegación. Veremos todos estos temas en esta unidad.

Los estados de un enlace

Lo primero que hay que entender es el concepto de estados de un enlace (diferentes estados en los que pueden estar los enlaces, que pueden diseñarse usando diferentes pseudoclases):

  • Link (no visitado): El estado predeterminado que presenta un enlace cuando no está en ningún otro estado. Se puede especificar usando la pseudoclase :link.
  • Visited: Un enlace cuando ya se ha visitado (está grabado en el historial del navegador); se le aplica otro formato con la pseudoclase :visited.
  • Hover: Un enlace cuando se le pasa el cursor por encima; se le aplica otro formato con la pseudoclase :hover.
  • Focus: Un enlace cuando tiene el foco (por ejemplo, se salta a este con la tecla Tab del teclado o se le da el foco mediante programación usando HTMLElement.focus()); se le aplica un formato diferente con la pseudoclase :focus.
  • Active: Un enlace cuando se activa (por ejemplo, se hace clic encima); se le aplica un formato diferente con la pseudoclase :active.

Enlaces predeterminados

El ejemplo siguiente ilustra cómo se comportará un enlace por defecto (el código CSS simplemente amplía y centra el texto para que destaque más):

p {
  font-size: 2rem;
  text-align: center;
}
<p><a href="https://fernandoruizrico.com">Un enlace simple</a></p>

Un enlace simple

A medida que vayas observando los estilos predeterminados, te darás cuenta de algunas cosas:

  • Los enlaces están subrayados.
  • Los enlaces no visitados se ven de color azul.
  • Los enlaces visitados se ven de color morado.
  • Al pasar el puntero del ratón sobre un enlace, cambia a un pequeño icono en forma de mano.
  • Los enlaces que tienen el foco presentan un contorno alrededor: deberías poder saltar por los enlaces de esta página con el teclado pulsando la tecla de tabulación (en Mac, es posible que necesites habilitar la opción Acceso total por teclado: Todos los controles presionando Ctrl + F7 para que funcione).
  • Los enlaces activos se muestran de color rojo (intenta mantener el cursor sobre el enlace mientras haces clic).

Ejercicio propuesto: Enlaces más grandes y centrados

Crea una página web con al menos 5 párrafos, cada uno con un enlace diferente a cualquier sitio que te guste. También tienes que estilizar tu página de modo que los enlaces sean el doble del tamaño del resto del texto y estén alineados en el centro, tal como se muestra en el ejemplo anterior.

No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste.

A tener en cuenta…

Curiosamente, los estilos predeterminados son casi los mismos que utilizaban los primeros navegadores en la década de 1990. Esto se debe a que los usuarios conocen y esperan que sea de esta forma. Podría confundir a mucha gente que los enlaces se mostrasen de manera diferente. Esto no quiere decir que no puedas cambiar el formato de los enlaces, solo que no deberías alejarte mucho de la conducta esperada. Al menos deberías:

  • Subrayar los enlaces, pero no otros elementos. Si no quieres hacerlo, al menos destacarlos de alguna otra forma.
  • Hacer que reaccionen de alguna manera cuando se les pasa el cursor por encima, y de una manera algo diferente cuando se activan.

Los estilos por defecto se pueden cambiar usando las siguientes propiedades CSS:

  • color para cambiar el color del texto.
  • cursor para cambiar el estilo del cursor (no debes deshabilitar esta opción a menos que tengas una muy buena razón para hacerlo).
  • outline para cambiar el contorno del texto (un contorno es similar a un borde, la única diferencia es que el borde ocupa un espacio en la caja y el contorno solo se solapa sobre el fondo). El contorno es una ayuda de accesibilidad útil, así que piénsatelo bien antes de desactivar esta opción; al menos deberías plantear dos estilos para los estados de pasar el puntero por encima y de tener el foco.

Aplicando formato a los enlaces

Ahora que hemos visto los estados predeterminados, veamos un conjunto típico de estilos que podemos aplicar a nuestros enlaces.

Para empezar, escribiremos nuestro conjunto de reglas vacío:

a:link {
}

a:visited {
}

a:focus {
}

a:hover {
}

a:active {
}

Este orden es importante porque los estilos de enlace se construyen sobre los anteriores. Por ejemplo, los estilos de la primera regla se aplicarán a todas las reglas siguientes, y cuando activas un enlace también pasas con el cursor por encima. Si los pones en un orden incorrecto, no funcionarán adecuadamente. Para recordar este orden, puedes intentar utilizar una fórmula nemotécnica como LoVFears HAte.

Ahora vamos a añadir algo más de información para darles formato:

p {
  font-size: 2rem;
  font-family: sans-serif;
  text-align: center;
}

a:link {
  color: green;
}

a:visited {
  color: olive;
}

a:focus {
  background: orange;
}

a:hover {
  background: yellow;
  text-decoration: underline orange wavy;
}

a:active {
  background: orange;
  text-decoration: underline red wavy;
}

Analicemos el efecto que tendrá el código anterior:

  • Utilizamos los selectores a:link y a:visited para establecer un par de variaciones de color en los enlaces no visitados y visitados respectivamente, para que sean diferentes respecto a los colores por defecto.
  • Las dos reglas siguientes usan a:focus y a:hover para establecer colores de fondo diferentes para los enlaces con el foco y los enlaces activados con el paso del cursor, y además un subrayado diferente para que el enlace destaque aún más.
  • Finalmente, a:active se usa para dar a los enlaces también un esquema de color diferente cuando hacemos clic sobre ellos, para dejar aún más claro que el navegador saltará a una nueva página.

Y para finalizar mostramos un ejemplo de código HTML en el que podemos aplicar el código CSS que hemos sugerido:

<p>
  Dispones de varios navegadores, como <a href="https://www.mozilla.org/es-ES/firefox/new/" target="_blank">Mozilla Firefox</a>, <a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a> y <a href="https://www.apple.com/safari/" target="_blank">Safari</a>.
</p>

Al utilizar el código HTML junto con el código CSS observamos el siguiente resultado:

Ejercicio propuesto: Aplicando estilos y subrayados

Crea una nueva página web con al menos 5 enlaces que apunten a tus sitios web preferidos. Debes cambiar los colores y subrayados por defecto para que cada posible estado (enlace, visitado, en foco, al pasar el ratón, activo) tenga un color diferente al predeterminado, y también otro subrayado, de forma similar a como hicimos en el ejemplo anterior, donde utilizamos por ejemplo el subrayado rojo ondulado.

Como has visto, puedes cambiar el color del texto utilizando la propiedad color, y el color de fondo utilizando la propiedad background. Puedes echar un vistazo a los diferentes colores aquí. Acerca de la decoración del texto, recuerda que se puede cambiar fácilmente con la propiedad text-decoration.

Incluyendo iconos en los enlaces

Una práctica común es incluir iconos en los enlaces. Echemos un vistazo a un ejemplo muy simple que añade un icono a enlaces externos (enlaces que conducen a otros sitios web). Este icono suele parecerse a una pequeña flecha que sale de un cuadro; para este ejemplo, usaremos este ejemplo de icons8.com.

Podemos usar el mismo código HTML que en el ejemplo anterior:

<p>
   Dispones de varios navegadores, como <a href="https://www.mozilla.org/es-ES/firefox/new/" target="_blank">Mozilla Firefox</a>, <a href="https://www.google.com/chrome/" target="_blank">Google Chrome</a> y <a href="https://www.apple.com/safari/" target="_blank">Safari</a>.
</p>

Y ajustaremos el código CSS para incluir el icono en todos los enlaces:

a {
  background: url('https://api.iconify.design/mdi:external-link.svg') no-repeat right;
  background-size: 2rem;
  padding-right: 2.5rem;
}

Si aplicamos el código CSS al HTML propuesto, obtendremos el siguiente resultado:

Utilizamos la propiedad abreviada background  y establecemos la ruta a la imagen que queremos insertar, especificamos el valor no-repeat para que solo se inserte una copia, y luego especificamos la posición a la derecha del contenido de texto.

También usamos background-size para especificar el tamaño de la imagen de fondo (es útil tener un icono más grande y luego cambiar su tamaño de esta manera, según sea necesario para fines de diseño web adaptativo).

Finalmente, establecemos un área de relleno a la derecha (padding-right) para los enlaces, para crear un espacio en que aparezca la imagen de fondo, de modo que no se superponga con el texto.

Ejercicio propuesto: Enlaces con iconos

Crea una nueva página web con al menos 5 enlaces que apunten a tus sitios web preferidos (puedes usar el código que escribiste anteriormente) e incluye un icono al final de cada uno. También cambia algunos otros estilos como el color del texto o la decoración del texto.

Dar aspecto de botón a un enlace

Las propiedades CSS que hemos utilizado hasta ahora en esta unidad también se pueden usar de otras maneras. Por ejemplo, los estados como hover se pueden usar para diseñar muchos elementos diferentes, no solo enlaces. Es posible que desees diseñar un estado que señale el paso del cursor por encima de párrafos, elementos de lista u otras cosas.

Además, suele ser bastante común dar a los enlaces un aspecto y un comportamiento de botón en ciertas circunstancias. Por ejemplo, el menú de navegación de un sitio web generalmente es una lista que contiene enlaces, y es posible aplicarle estilo fácilmente para que se parezca a un conjunto de botones o pestañas que proporcionan al usuario acceso a otras partes de la página web. Vamos a ver cómo.

En primer lugar, partiremos del siguiente código HTML:

<ul class="navbar">
  <li><a href="#">Inicio</a></li>
  <li><a href="#">Noticias</a></li>
  <li><a href="#">Sobre nosotros</a></li>
  <li><a href="#">Contactar</a></li>
</ul>

Y sobre ese código HTML aplicamos el siguiente código CSS:

/* Clase general para la barra de navegación */
.navbar {
  font-size: 1.25rem;
  font-family: sans-serif;
  text-align: center;
  background: yellow;
}

/* Selecciona sólo los elementos de lista (li) que se encuentran dentro de la barra de navegación */
ul.navbar li {
  display: inline;
}

/* Selecciona sólo los enlaces (a) que se encuentran dentro de la barra de navegación */
ul.navbar a {
  text-decoration: none;
  display: inline-block;
  padding: 1rem;
}

/* Selecciona sólo los enlaces que se encuentran dentro de la barra de navegación cuando el ratón pase por encima (a:hover) */
ul.navbar a:hover {     
  background: orange;
}

/* Selecciona sólo los enlaces que se encuentran dentro de la barra de navegación cuando hagamos click sobre ellos con el ratón (a:active) */
ul.navbar a:active {
  color: white;
  background: red;
}

Este código nos proporciona el siguiente resultado:

Expliquemos qué está pasando aquí, centrándonos en las partes más interesantes:

  • Una nueva clase para la lista:
    • Hemos creado la clase navbar para que solo los elementos dentro de esa clase tengan el estilo de una barra de navegación.
    • ul.navbar: Al poner esto antes de cualquier selector, las propiedades CSS entre llaves se aplicarán solo a los elementos dentro de una lista no ordenada con clase navbar.
  • Los estilos relacionados con el elemento <ul>:
    • Cambiamos la propiedad font-size para agrandar un poco el texto.
    • Cambiamos la propiedad font-family para que sea diferente al resto del texto.
    • Cambiamos la propiedad text-align para que los enlaces queden centrados.
    • Cambiamos la propiedad background a color amarillo.
    • Los elementos <li> normalmente se comportarán como elementos de bloque (se asientan en sus propias líneas). En este caso, queremos crear una lista horizontal de enlaces, por lo que configuramos la  propiedad display, lo que hace que los elementos de la lista se encuentren en la misma línea uno tras otro (ahora se comportan como elementos en línea).
  • Los estilos relacionados con los elementos <a>:
    • Comenzamos desactivando los valores por defecto de text-decoration (no queremos que estropeen nuestro aspecto).
    • A continuación, configuramos la propiedad display en bloque en línea (esto permitirá dimensionarlos, como explicaremos en otra unidad).
    • Configuramos el valor del padding en 1rem para darle a los botones algo de espacio alrededor del texto (también explicaremos esto en otra unidad).
    • También cambiamos el color de los elementos cuando el puntero del ratón está sobre ellos y al hacer clic.

Ejercicio propuesto: Barra de navegación

Crea una página web con una barra de navegación con tu propio estilo. Puedes cambiar cualquier propiedad que desees (colores, decoración de texto, tamaño de fuente, familia de fuente, etc.). Después de eso, justo debajo inserta algunos otros enlaces. También puedes intentar usar algunas otras reglas de CSS para dar estilo a estos enlaces, como se muestra a continuación:

Algunos de los navegadores que recomendamos son:

Mozilla Firefox

Google Chrome

Apple Safari

Test

Comprueba tus conocimientos con este test sobre estilos de enlaces de texto.

Felicitación navideña con HTML, CSS y JavaScript

Utilizando una combinación de código HTML, CSS y JavaScript vamos a crear una página web de temática navideña con animaciones. Además, el usuario podrá interactuar haciendo clic en las imágenes.

HTML

  • Estructura Básica: El documento HTML comenzará con la declaración <!DOCTYPE html> y utilizará las etiquetas <html>, <head>, y <body> para estructurar el contenido.
  • Metadatos: Dentro de <head>, definiremos el conjunto de caracteres (charset) como ‘utf-8’, y estableceremos la configuración ‘viewport’ para asegurar una correcta visualización en dispositivos móviles.
  • Título: El título de la página será «Felicitación de Navidad».
  • Estilos y Fuentes: Enlazaremos hojas de estilo externas para los estilos CSS y para incluir la fuente «Mountains of Christmas». También incluiremos la librería ‘animate.css‘ para animaciones CSS.
  • Contenido del Cuerpo: Dentro de <body> colocaremos un encabezado <h1> con la frase «¡Feliz Navidad!» y una clase que aplique una animación. A continuación incluiremos un div con la clase ‘contenedor’ que agrupará tres imágenes con animaciones y eventos de clic asociados.
  • Elementos de Audio: Incluiremos tres elementos <audio> para reproducir sonidos para interactuar con las imágenes.
  • JavaScript: Enlazaremos un fichero externo llamado ‘script.js’ que contendrá todo el código JavaScript.

CSS

  • Estilos generales: Estableceremos estilos para html y body, incluyendo márgenes, padding, ancho, fuentes de letra, alineación del texto, color, color de fondo, tamaño de fuente y sombra de texto.
  • Distribución del contenido: Definiremos un layout de tipo flexbox, con un alineamiento central y una disposición en fila por defecto.
  • Media query: Cambiaremos la disposición a columna cuando el ancho de la pantalla sea menor de una resolución específica, lo que mejorará la visualización en dispositivos móviles.
  • Estilo de imágenes: Definiremos la anchura en píxeles, y el máximo ancho relativo a la vista y un filtro de sombra para todas las imágenes.

JavaScript

Desarrollaremos una función que se ejecute al hacer clic en las imágenes. Dicha función realizará tres acciones:

  1. Vibración: Generaremos una breve vibración en dispositivos compatibles.
  2. Reproducción de audio: Reproduciremos un archivo de audio asociado con la imagen en la que hagamos clic.
  3. Cambio de imagen y animación: Actualizaremos cada imagen al hacer clic sobre ella y activaremos una nueva animación.

Imágenes y archivos de audio

A continuación mostramos todas las imágenes y los ficheros de audio que vamos a utilizar en nuestra felicitación. También puedes descargar un ZIP con todos los ficheros (incluido el código fuente).

Las imágenes iniciales

Los archivos de audio

Al hacer clic sobre las imágenes (utilizando JavaScript)

Utilizando código JavaScript cambiaremos las imágenes originales por estas otras, cada vez que hagamos clic en una de ellas:

Cómo colocar las imágenes y los audios, y cómo definir las animaciones

Mediante código HTML crearemos la estructura principal de la felicitación. Incluiremos imágenes y elementos de audio, y estableceremos animaciones para captar la atención del usuario.

Para definir las animaciones utilizaremos la librería animate.css. Para ello deberemos enlazarla primero desde nuestro fichero ‘index.html’:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

Una vez enlazada la librería, ya podemos aplicar animaciones a cualquier elemento añadiendo las clases correspondientes, y opcionalmente, un posible retraso para comenzar la animación, que puede ir de 1 a 5 segundos:

<div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
  ...
</div>

La combinación de imágenes y audio, junto con las animaciones, proporcionarán finalmente un diseño interactivo para nuestra página de temática navideña:

<h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>

<div class="contenedor">
    <div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
      <div id="img-trineo">
        <img src="img/santa-claus.png" alt="Santa Claus">
      </div>
      <audio id="audio-trineo" src="audio/santa-claus.mp3" controls></audio>
    </div>
    <div class="animate__animated animate__backInDown animate__delay-2s">
      <div id="img-campana">
        <img src="img/bola-nieve.png" alt="Bola de nieve">
      </div>
      <audio id="audio-campana" src="audio/campana.mp3" controls></audio>
    </div>
    <div class="animate__animated animate__lightSpeedInRight animate__delay-3s">
      <div id="img-cantando">
        <img src="img/amigos.png" alt="Amigos">
      </div>
      <audio id="audio-cantando" src="audio/musica-fondo.mp3" controls></audio>
    </div>
</div>
  1. Encabezado <h1>:
    • <h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>: Este es un encabezado de nivel 1, utilizado generalmente para el título más importante en la página. Hemos añadido dos clases de CSS para definir la animación:
      • animate__animated: Esta clase indica que el elemento tendrá una animación aplicada.
      • animate__flip: Específica el tipo de animación, en este caso, un efecto de giro (‘flip’).
  2. Div contenedor:
    • <div class="contenedor">: Este div actúa como un contenedor para agrupar los elementos relacionados. La clase ‘contenedor’ se usa para agrupos los elementos de imagen y audio.
  3. Bloques con imágenes y audio:
    • Cada uno de los tres divs internos representa una sección con una imagen y un audio. Hemos añadido clases específicas para definir las animaciones y retrasos:
      • animate__animated: Establece que se va a definir una animación.
      • animate__lightSpeedInLeft, animate__backInDown, animate__lightSpeedInRight: Estas clases definen el tipo de animación. Cada div tiene una animación distinta que describe cómo entra la imagen en la pantalla.
      • animate__delay-1s, animate__delay-2s, animate__delay-3s: Estos retrasos (1s, 2s, 3s) controlan cuándo comienza la animación después de que se carga la página.
    • Dentro de cada div, hay un sub-div con un id único (img-trineo, img-campana, img-cantando) que contiene una imagen (<img>):
      • src: Indica la ruta del archivo de imagen.
      • alt: Proporciona un texto alternativo que describe la imagen. Es útil para accesibilidad y en situaciones donde la imagen pudiera no llegar a cargarse.
    • Después de cada imagen, colocamos un elemento <audio> con un id único para cada uno:
      • src: El archivo de audio a reproducir.
      • controls: Indica que se deben mostrar controles de reproducción (play, pause, volumen) en la interfaz de usuario.

Cómo conseguir una página más interactiva (utilizando JavaScript)

Mediante el atributo ‘onclick’ de las imágenes y el atributo ‘onplay’ de los elementos de audio podemos hacer que nuestra página web sea más interactiva. Si definimos y ejecutamos la correspondiente función JavaScript, podemos actualizar cada imagen sobre la que hagamos clic, y definir a su vez nuevas animaciones, e incluso reproducir al mismo tiempo el audio correspondiente:

<img src="img/santa-claus.png" onclick="anima('trineo', 'shakeX')" alt="Santa Claus">
...
<audio id="audio-trineo" src="audio/santa-claus.mp3" onplay="anima('trineo', 'shakeX')" controls></audio>

El código fuente completo

HTML

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Felicitación de Navidad</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>

<body>
  <h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>

  <div class="contenedor">
    <div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
      <div id="img-trineo">
        <img src="img/santa-claus.png" onclick="anima('trineo', 'shakeX')" alt="Santa Claus">
      </div>
      <audio id="audio-trineo" src="audio/santa-claus.mp3" onplay="anima('trineo', 'shakeX')" controls></audio>
    </div>
    <div class="animate__animated animate__backInDown animate__delay-2s">
      <div id="img-campana">
        <img src="img/bola-nieve.png" onclick="anima('campana', 'swing')" alt="Bola de nieve">
      </div>
      <audio id="audio-campana" src="audio/campana.mp3" onplay="anima('campana', 'swing')" controls></audio>
    </div>
    <div class="animate__animated animate__lightSpeedInRight animate__delay-3s">
      <div id="img-cantando">
        <img src="img/amigos.png" onclick="anima('cantando', 'heartBeat')" alt="Amigos">
      </div>
      <audio id="audio-cantando" src="audio/musica-fondo.mp3" onplay="anima('cantando', 'heartBeat')" controls></audio>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>
  1. Doctype e idioma: <!DOCTYPE html> indica al navegador que se trata de un documento HTML5. <html lang="es"> especifica que el contenido del documento está en español.
  2. Etiqueta <head>: Contiene metadatos y enlaces a recursos externos.
    • charset="utf-8": asegura que se usen caracteres Unicode, adecuados para muchos idiomas y símbolos.
    • name="viewport" content="width=device-width": hace que el layout sea responsivo al ancho del dispositivo.
    • <link>: para enlazar hojas de estilo externas y la fuente «Mountains of Christmas».
    • animate.min.css: es una librería de animaciones CSS.
  3. Etiqueta <body>: Define el contenido principal de la página.
    • <h1>: es el encabezado principal, decorado con animaciones de ‘animate.css’.
    • <div class="contenedor">: es un contenedor para las imágenes. Cada <div> hijo tiene un id único y contiene una <img>.
    • Cada imagen tiene clases para animaciones y un evento onclick que llama a la función JavaScript anima().
    • Los elementos <audio> están asociados a cada imagen para reproducir sonidos específicos.

CSS

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;

  font-family: "Mountains of Christmas";
  text-align: center;
  color: #ae2929;
  background-color: #2929ae;
  font-size: 150%;
  text-shadow: 2px 2px 2px black;
}

.contenedor {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

@media (max-width: 900px) {
  .contenedor {
    flex-direction: column;
  }
}

img, audio {
  width: 300px;
  max-width: 100vw;
  margin: 5px; 
  filter: drop-shadow(5px 5px 5px black);
}
  1. Estilos Globales:
    • margin: 0px; padding: 0px; elimina márgenes y rellenos por defecto.
    • width: 100%; establece el ancho del cuerpo y el HTML al 100% del viewport.
    • font-family, text-align, color, background-color, font-size, text-shadow aplican estilos de texto y fondo.
  2. Clase .contenedor:
    • display: flex; activa Flexbox, un método de layout.
    • justify-content: center; centra los elementos hijos horizontalmente.
    • flex-direction: row; coloca los elementos hijos en una fila.
  3. Media Query:
    • @media (max-width: 900px) aplica estilos cuando el ancho de la ventana es menor a 900px, cambiando flex-direction a column para alinear los elementos verticalmente.
  4. Estilo de Imágenes:
    • width: 300px; establece un ancho fijo de las imágenes.
    • max-width: 100vw; establece la anchura máxima de las imágenes para asegurar que no se salen de la pantalla.
    • filter: drop-shadow(5px 5px 5px black); añade una sombra a las imágenes.

JavaScript

function anima(dibujo, animacion) {
  navigator.vibrate(50);

  document.getElementById(`audio-${dibujo}`).currentTime = 0;
  document.getElementById(`audio-${dibujo}`).play();

  document.getElementById(`img-${dibujo}`).innerHTML =
    `<img src="img/${dibujo}.png" 
     class="animate__animated animate__${animacion}"
     onclick="anima('${dibujo}', '${animacion}')">`;
}
  1. Vibración:
    • navigator.vibrate(50): hace que el dispositivo vibre durante 50 milisegundos, en el caso de móviles, tabletas, u otros dispositivos compatibles.
  2. Control de Audio:
    • document.getElementById(audio-${dibujo}): selecciona el elemento de audio correspondiente al dibujo sobre el que hemos hecho clic.
    • .currentTime = 0: para que el audio comience a reproducirse desde el principio.
    • .play(): inicia la reproducción del audio.
  3. Actualización de Imagen y Animación:
    • document.getElementById(img-${dibujo}).innerHTML = ...: actualiza el contenido HTML del div que contiene la imagen sobre la que hemos hecho clic. El nuevo contenido es una imagen con una animación específica.
    • onclick="anima('${dibujo}', '${animacion}')": asegura que al hacer clic en la nueva imagen, se vuelva a llamar a anima() con los mismos parámetros.

El resultado

Puedes comprobar aquí el resultado final al completar esta felicitación de Navidad. También puedes descargar aquí un fichero ZIP con todo el código fuente, imágenes y ficheros de audio.

Programación con JavaScript

JavaScript es un lenguaje de programación esencial en el desarrollo web moderno. Es importante aprenderlo por varias razones:

  1. Multiplataforma: JavaScript se ejecuta en prácticamente todos los navegadores web, lo que lo convierte en uno de los lenguajes más accesibles y utilizados para desarrollar interfaces de usuario web.
  2. Desarrollo Front-End y Back-End: Originalmente diseñado para el front-end (parte del cliente en una aplicación web), JavaScript también se usa ahora en el back-end gracias a entornos como Node.js. Esto permite a los desarrolladores utilizar un solo lenguaje en toda la aplicación.
  3. Amplia variedad de herramientas y recursos: Existe una amplia gama de bibliotecas y frameworks de JavaScript (como React, Angular, y Vue) que facilitan la creación de aplicaciones web robustas y de alta calidad.
  4. Interactividad y dinamismo: JavaScript es clave para añadir interactividad y funciones dinámicas a las páginas web, mejorando la experiencia del usuario.
  5. Demanda en el mercado laboral: La demanda de desarrolladores de JavaScript sigue siendo alta, lo que lo convierte en una habilidad valiosa para carreras en el desarrollo web y tecnología de la información.

En resumen, aprender JavaScript abre puertas a numerosas oportunidades en el desarrollo web y es fundamental para cualquier persona interesada en la programación de aplicaciones multiplataforma.

Conceptos importantes

Programación con JavaScript: Objetos

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:

let coche = {
  marca: "Toyota",
  modelo: "Corolla",
  año: 2022,
  obtenerDetalles: function() {
    return `${this.marca} ${this.modelo}, ${this.año}`;
  }
};

console.log(coche.obtenerDetalles()); // Salida: "Toyota Corolla, 2022"

Creación de objetos usando constructores

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.

Test

Comprueba tus conocimientos con este test sobre objetos y otros conceptos relacionados con esta unidad.

Programación con JavaScript: Funciones

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

Test

Comprueba tus conocimientos con este test sobre funciones y otros conceptos relacionados con esta unidad.