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.