Prácticas con el DOM.
Desarrollo de Aplicaciones Telemáticas, 2024-2025
Grado en Ingeniería en Tecnologías de la Telecomunicación
Grado en Ingeniería en Sistemas de Telecomunicación
Escuela de Ingeniería de
Fuenlabrada
Universidad Rey Juan Carlos
Crea un directorio ~/dat/practica04 para los
ejercicios de esta práctica
Crea un directorio ~/dat/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
~/dat/practica04/botones.html
~/dat/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 ~/dat/practica04/unidades.html
~/dat/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
~/dat/practica04/tabla.html
~/dat/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.
Escribe un programa en JavaScript contemporáneo, con interface de
usuario en HTML 5, con Bootstrap 5, en los ficheros
~/dat/practica04/tablas.html
~/dat/practica04/tablas.js según la especificación indicada
a continuación. Observa que el nombre de estos ficheros es similar a los
de práctica anterior, pero en plural.
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 cadena. Ejemplo:
lista_menu =
[
[ "Primeros platos", "Ensalada de la casa", "Macarrones al horno"],
[ "Segundos platos", "Chuleta de cerdo", "Merluza a la romana"],
[ "Postres", "Flan", "Tarta de la casa", "Arroz con leche"]
]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 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 única tabla con tres filas.
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:
Haya nuevas tablas, tantas como categorías. El nombre de cada tabla estará compuesto de la palabra Pedidos, mas el nombre de la categoría. Ejemplo: Pedidos entrantes, Pedidos primer plato, etc
Cada vez que el usuario haga clic sobre un producto de la tabla, se creará una nueva fila, con el producto, en la tabla de pedidos correspondiente.
Sugerencia: usando la rejilla de BootStrap, divide la página en dos columnas. En cada fila, la celda de la izquierda que contenga la tabla con los productos, y en la celda de la derecha, la tabla con los pedidos de esa categoría. Más adelante añadirás los iconos, pero solo a la primera celda. Por tanto, tal vez sea preferible que la primera columna sea un poco más ancha.
Escribe un programa en JavaScript contemporáneo en el fichero
~/dat/practica04/duplicados.js. Tendrá una función que
recibirá una lista no vacía de elementos, donde cada elemento será una
cadena. Ejemplo:
["Caña", "Te", "Caña", "Agua", "Rioja", "Rioja"]y devolverá una lista de sublistas, donde
Habrá una sublista por cada elemento de la lista de entrada, teniendo en cuenta que si hay elementos repetidos, solo se generará una sublista.
El primer elemento de la sublista será un número sin decimales, que indicará cuántas veces aparecía el elemento en la lista de entrada.
El segundo elemento de la sublista será el elemento de la lista de entrada
Ejemplo de lista devuelta:
[
[2, "Caña"],
[1, "Te"],
[1, "Agua"],
[2, "Rioja"],
]Cuando tus dos prácticas anteriores funcionen, guarda una copia por si estropeas algo, donde quieras, con nombre distinto. Modifica tablas para que, cada vez que se repita la petición de un producto, no se añada una fila en la tabla de pedidos, sino que cada fila incluya una primera columna con un número de unidades y una segunda columna con el producto. El número inicialmente será 1, y se incrementará por cada nuevo pedido del producto.
Cuando tus práctica anterior funcione, guarda una copia por si estropeas algo, donde quieras, con nombre distinto. Haz que tu práctica original incluya los iconos de las categorías y de los productos. Solamente en las tablas del menú, no en las tablas de pedidos. El usuario podrá hacer clic sobre el icono o sobre el texto del producto. Esto es, sobre la fila, en general.
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.
Cuando tus práctica anterior funcione, guarda una copia por si estropeas algo, donde quieras, con nombre distinto. Modifica la práctica original para que en cada fila de las tablas de pedidos, aparezca un icono que represente borrar. Cuando el usuario pulse sobre este icono:
Cuando el pedido incluya 2 o más unidades, se decrementará en 1 las unidades de pedido.
Cuando las unidades de pedido sean exactamente 1, se borrará la línea.
Naturalmente, tendrás que actualizar tanto la lista de sublistas en la que tu programa contabiliza internamente las unidades de cada pedido, como la tabla donde se muestra esto al usuario.
Cuando tus práctica anterior funcione, guarda una copia por si estropeas algo, donde quieras, con nombre distinto. Modifica la práctica original para que se pueda simular que hay productos de la carta que se van agotando. En el programa habrá una variable global llamada simula_agotados.
La variable simula_agotados deberá ser un número, positivo y sin decimales. En otro caso, el programa levantará una excepción y concluirá.
Si simula_agotados vale 0, el programa se comportará como hasta ahora.
Si contiene otro número n:
Cada vez que el usuario pida algún artículo, el programa generará un número aleatorio entre 1 y n. Si el valor resultante es 1, el programa simulará que un artículo aleatorio de una categoría aleatoria se ha agotado. Naturalmente, un producto que ya se había agotado, no se puede volver a agotar.
Cuando un producto se agote, se mostrará un mensaje en algún lugar del GUI.
Cuando un producto se agote, su imagen cambiará. Lo más sencillo es que aparezca una imagen que represente producto agotado. Esta imagen será la misma para todos los productos.
Práctica optativa: cuando un producto se agote, su imagen representará que se ha agotado. Pero esta imagen será distinta para cada producto, y estará basada en la imagen original. Por ejemplo puede aparecer en blanco y negro y más pálida, puede aparecer cruzada con una X grande en rojo... como prefieras.
Cuando un producto se haya agotado, si el usuario hace clic sobre el producto, no sucederá nada, esto es, no se añadirá a los pedidos.
Escribe en los ficheros ~/dat/practica04/valida.html y
~/dat/practica04/valida.js el código necesario para
ejecutar dentro del navegador tu práctica de validación de contraseñas.
No repitas nada, haz llamadas al javascript de tu prática 3. Usa
Bootstrap 5.
Ejecuta ~mortuno/revisa practicas dat para comprobar que
los nombres de los programas son los correctos.