Prácticas con el DOM.
Aplicaciones Telemáticas, 2025-2026
Grado en Ingeniería Telemática
Escuela de Ingeniería de
Fuenlabrada
Universidad Rey Juan Carlos
Crea un directorio ~/at/practica04 para los
ejercicios de esta práctica
Crea un directorio ~/at/practica04/images para las
imágenes de esta práctica
Ahora escribirás ficheros .html que utilizarán ficheros .js de la práctica 3.
En el fichero .html de cada práctica 4, añade una referencia al
fichero .js correspondiente indicando su trayecto relativo. Ejemplo
<script src="../practica03/blabla.js"><script>
En las sucesivas prácticas vas a desarrollar un sistema sencillo de autopedido (self-ordering): una aplicación donde el cliente de un establecimiento pueda ver la carta y, además, hacer su pedido.
Piensa en algún negocio de hostelería: bar, restaurante, cervecería, cocktelería, pizzería, burger, confitería, churrería, heladería...
Piensa en categorías de la carta. Y en los productos de cada carta. No lo compliques demasiado, entre 3 y 6 categorías y un total de 10, 12, 16 productos, aproximadamente.
Las categorías podrían ser :
Entrantes, carnes, pescados, postres y bebidas.
Pan, empanadas, tartas, bollos y otros dulces.
Ensalada, nigiri, maki, sashimi y temaki.
...
Piensa en categorías similares pero no uses exactamente estos ejemplos.
Necesitarás:
Un icono para cada categoría.
Un icono, dibujo o imagen para cada producto.
Requisitos adicionales:
Las imágenes de las categorías y las de los productos tienen que distinguirse claramente a simple vista. Por ejemplo los iconos de las categorías en blanco y negro y las imagenes de los productos en color. O bien las categorías solamente como trazos, sin color ni relleno. O pueden distinguirse por tener tamaño diferente. O proporciones muy diferentes: por ejemplo las categorías tener un tamaño de 400x200, y los productos, de 200x200.
Como decidas. Lo importante es que, en tu aplicación, se distinga cláramente si una imagen representa una categoría o si representa un producto.
Posiblemente lo más fácil es que pidas las imágenes a cualquier plataforma de IA. Con una cuenta gratuita tal vez necesites varios dias para obtener todas las imágenes. Planifica esto.
Recuerda indicar claramente el tamaño en pixeles, si no, las imágenes serán demasiado grandes. Puedes usar cualquier tamaño que te parezca adecuado.
Ejemplo de petición:Genera un icono de 200x200 pixeles para un sistema de autopedido que represente un temaki
Si lo prefieres, en vez de IA puedes usar cualquier otro origen (legal) para las imágenes. Por ejemplo fotos de tus propios platos, de tu colección de latas de cerveza...
Puedes elegir las categorías y los productos como quieras, pero procura ser imaginativo, aprovecha que la IA puede generar casi cualquier cosa. Piensa en cosas exóticas, o muy especializadas, o directamente fantásticas (¿Comida para la tribu de Asterix? ¿Comida para ogros?)
Escribe una página web con Bootstrap 5 y código JavaScript contemporáneo en los ficheros
~/at/practica04/botones.html
~/at/practica04/botones.js para probar los manejadores
sobre botones y la escritura de contenido en elementos.
Ponle al menos tres botones. Escribe un párrafo, inicialmente vacío. Haz que al pulsar cada botón, apareza un texto cualquiera en el párrafo. P.e. botones con el texto Café solo, Café con leche, Chocolate. Al pulsarlos, el texto del párrafo cambirá. P.e. Seleccionado café con leche.
No uses este ejemplo, piensa cualquier otra cosa.
Escribe los ficheros ~/at/practica04/unidades.html
~/at/practica04/unidades.js en HTML 5 y JavaScript
contemporáneo que contengan el interfaz de usuario del programa que
escribiste en la práctica 3.6.
La distancia se supone que la indicará el servidor, por tanto, será un valor escrito en el HTML, tu programa no podrá modificarlo. Para tus pruebas, cambia este valor a mano.
Cumpliendo lo anteriormente indicado, tienes libertad para organizar el HTML como prefieras.
Escribe un programa en JavaScript contemporáneo, con interface de
usuario en HTML 5 en los ficheros
~/at/practica04/tabla.html
~/at/practica04/tabla.js que, a partir de una lista
JavaScript de elementos cualquiera, genere dinámicamente una tabla,
donde cada uno de los elementos de la lista sea una fila en la tabla.
Esto sucederá al cargar la página, sin necesidad de pulsar ningún
botón.
Escribe un programa en JavaScript contemporáneo, con interface de
usuario en HTML 5, con Bootstrap 5, en los ficheros
~/at/practica04/carta.html
~/at/practica04/carta.js según la especificación indicada a
continuación.
El programa partirá de una lista de listas. Lo llamaremos una lista con sublistas. La lista se llamará lista_menu. Contendrán las categorías y los productos que preparaste para la práctica 4.0. Aunque de momento, solo usaremos los nombres, no las imágenes.
El primer elemento de cada sublista será el nombre de la categoría. Los siguientes elementos de cada sublista serán los nombres de cada uno de los productos. La lista no podrá estar vacía. Ninguna sublista podrá estar vacía. Cada sublista debe tener al menos 2 elementos (título y 1 producto). Estos elementos serán cadenas. Ejemplo:
let lista_menu =
[
[ "Primeros platos", "p001", "p002"],
[ "Segundos platos", "p101", "p102"],
[ "Postres", "p201", "p202", "p203"]
]El programa tendrá una función que recibirá una lista, y si el formato no es el aquí indicado, lanzará una excepción para terminar el programa.
El programa tendrá un plain object que asociará a cada identificador de producto, su nombre. Por ejemplo
let productos_es =
{
p001: 'Ensalada de la casa',
p002: 'Macarrones al horno',
p101: 'Chuletas de cerdo',
p102: 'Merluza a la romana',
p201: 'Flan',
p202: 'Arroz con leche',
p203: 'Tarta de la casa'
}El programara generará una tabla HTML para cada categoría, donde el encabezado de la tabla será el nombre de la categoría y cada fila contendrá cada uno de los productos. Por tanto, el ejemplo anterior generaría 3 tablas distintas, con 2, 2 y 3 filas. No una única tabla con tres filas.
Uno de los propósitos de usar un código para los nombres de los platos es facilitar la traducción de la aplicación a diferentes idiomas. Pero no solo habrá que traducir los platos, también las categorías. Por tanto, será conveniente que usemos códigos para las categorías.
Cuando tu práctica anterior funcione, guarda una copia por si estropeas algo, donde quieras, con nombre distinto. Modifica la práctica original de forma que las sublistas de lista_menu, en vez de tener en el primer elemento una categoría, tengan un código de categoría. Añade un plain_object llamado categorias_es que asigne a cada categoría su nombre en español
Modifica tu práctica de autopedido para que, además de los nombres de categoría y de producto, se vean las imágenes de categoría y las imágenes de producto. Es muy conveniente que el nombre de cada fichero coincida con el código de lista_menu. Y, naturalmente, que cada imagen tenga un id con este mismo código.
Añade uno o más botones en tu aplicación que permitan ocultar o mostrar ciertos productos del menú. Por ejemplo ocultar productos con gluten, ocultar productos con alcohol, mostrar solamente productos veganos, mostrar solamente productos light, etc.
Este botón o botones tendrá que cambiar de texto según el estado. El botón siempre dirá qué hace, no cuál es el estado. Ejemplo: si se están viendo los productos con alcohol, el texto del botón será ocultar bebidas alcoholicas. Si se están ocultando las bebidas alcoholicas, el texto del botón será mostrar bebidas alcoholicas.
Haz que en la parte superior de tu aplicación aparezcan iconos con la bandera española y dos o tres banderas más. Al pulsar estas imágnes, todo el contenido aparecerá en el idioma correspondiente.
Esto implica traducir no solo los nombres de productos y categorías, sino cualquier texto que genere la aplicación para el usuario. Para ello, una estructuras similares a la empleada para los productos: una clave para cada mensaje y un plain_object para cada idioma, que asocie a cada clave, su mensaje.
Ejecuta ~mortuno/revisa practicas at para comprobar que
los nombres de los programas son los correctos.