UNIVERSIDAD MAYOR REAL Y PONTIFICIA DE
SAN FRANCISCO XAVIER DE CHUQUISACA
FACULTAD DE CIENCIAS Y TECNOLOGIA
LAB 8 TABLERO DE BASQUET
MATERIA: INGENIERIA DE SOFTWARE [SIS 324]
UNIVERSITARIOS: CARRERA:
Gamboa Castel Erick Ing. en Ciencias de la
Computación Mamani Calizaya Jose Mario Ing. en Ciencias de la Computación
Morales Choque Roberto Carlos Ing. en Ciencias de la Computación
DOCENTE: Ing. Ramiro Durán
Funcionamiento.
El proyecto es una aplicación web sencilla e interactiva que funciona como un tablero de baloncesto
digital, mostrando en tiempo real las estadísticas clave de los jugadores de un equipo: nombre, dorsal,
puntos y faltas. La aplicación se sustenta en tres pilares: HTML para la estructura, CSS (indispensable
para el estilo visual) para el diseño, JavaScript para la lógica y JSON para la gestión de datos.
1. Estructura y Presentación (HTML y CSS)
El archivo principal [Link] define la interfaz. Contiene un encabezado para el título del tablero y un
contenedor principal que albergará la lista de jugadores, estructurada posiblemente como una tabla.
Cada jugador se presentará en una fila, mostrando los campos: Nombre, Dorsal, Faltas y Puntos. Los
botones para sumar puntos y faltas se incluyen junto a la información de cada jugador.
El CSS (en un archivo como [Link]) se encarga del diseño visual y es fundamental para la regla de
expulsión. Cuando el contador de Faltas de un jugador llega a 5, el elemento que muestra el número de
faltas (o la fila completa) debe cambiar su color de fondo o texto a rojo. Esta aplicación de estilo
condicional se gestiona directamente desde JavaScript, que añade una clase CSS específica al elemento
HTML afectado.
2. Gestión de Datos (JSON)
La información de los jugadores se almacena y gestiona en formato JSON (JavaScript Object Notation).
Esta estructura ligera y legible se utiliza para representar el estado inicial y actual de los jugadores. El
archivo de datos o la variable JavaScript contiene un array de objetos, donde cada objeto corresponde a
un jugador e incluye las propiedades: nombre, dorsal, puntos y faltas.
JavaScript lee estos datos al cargar la aplicación para inicializar el tablero. Durante el uso, los datos de
puntos y faltas se actualizan en esta estructura JSON, que actúa como la fuente única de verdad para la
aplicación.
3. Lógica y Dinamismo (JavaScript)
El archivo [Link] contiene la lógica principal de la aplicación. Sus responsabilidades incluyen:
1. Carga Inicial: Al cargar la página, una función lee la estructura JSON. Luego, itera sobre el array
de jugadores y utiliza las funciones del DOM para crear dinámicamente los elementos HTML
(filas de la tabla, celdas, botones) que componen la interfaz del tablero, inyectándolos en el
contenedor principal del [Link].
2. Actualización de Puntos y Faltas: Se definen funciones (por ejemplo, sumarPunto(dorsal) o
sumarFalta(dorsal)) vinculadas a los botones de la interfaz. Al hacer clic, estas funciones:
o Buscan al jugador en el array JSON usando su dorsal.
o Incrementan el valor de la propiedad puntos o faltas.
o Verificación de la Expulsión: Si el valor de faltas alcanza o supera 5, JavaScript
inmediatamente añade una clase CSS (como .expulsado) al elemento HTML de ese
jugador. Esta clase es la que define el color rojo.
o Actualización del DOM (Interfaz): La función actualiza el texto del elemento HTML
visible para reflejar el nuevo número de puntos o faltas.
4. Documentación del Proyecto ([Link])
El archivo [Link] sirve como documentación esencial. Describe el propósito de la aplicación, lista
las tecnologías usadas (HTML, CSS, JavaScript, JSON), explica los pasos para ejecutar el proyecto y detalla
la funcionalidad, haciendo énfasis en cómo el contador de faltas opera bajo la regla de expulsión al
llegar a 5, marcado con color rojo.