1

Actividad de Aprendizaje 4: Actividad de Cierre

Presentado por:

Alexi Ferney Ayala gil

Docente: Jose Luis Aguilar Camacho

Ingeniero en Sistemas

Ingeniería Web I

PREPROF2201PC-TDS0248

Institución Universitaria Digital de Antioquia

Tecnología en Desarrollo de Software

Departamento de Antioquia
 2

Pregunta Planteada

¿Consideras que una aplicación web debe enfocarse más en las funcionalidades que
ella demanda y no tanto en la experiencia de usuario?

Una aplicación web se debe analizar desde diferentes puntos de vista, se requiere que una
aplicación web tenga una buena funcionalidad, porque esto influye mucho en la posible
experiencia que el usuario pueda tener acerca de la misma.

Es muy importante que el usuario tenga una experiencia agradable con cualquier tipo de
aplicación web, si se logra cumplir esta expectativa en el usuario, se ha logrado pasar una
etapa difícil, ya que por medio de la experiencia del usuario podemos determinar si en
realidad se ha logrado el objetivo, o si se debe implementar cambios que permitan
satisfacer la necesidad del usuario.

Entonces se puede decir que tanto la funcionalidad que demanda la app como la experiencia
del usuario tienen la misma importancia, y nos debemos enfocar en los dos como si fuera
uno sólo, ya que uno depende del otro, y esto quiere decir, que si se realiza una app web
con unas funcionalidades bien implementadas, el usuario podrá tener una buena
experiencia, de lo contario simplemente la experiencia del usuario, será pésima y esto no es
lo deseado, ni lo planeado, entonces podemos determinar la conectividad, entre las
funcionalidad de la app web y la experiencia del usuario.

Entonces no debe ser más importante enfocarnos solo en las funcionalidades que demanda
la app, y dejar por fuera la experiencia que tendrá el usuario, debido a que, si sólo nos
enfocamos en esa parte, se estaría cometiendo un error que podría costarnos caro, ya que el
usuario es quien interactuara con la misma y de él depende todo, si logramos satisfacer la
necesidad del usuario, se podrá decir que se ha cumplido el objetivo.
 3

Resumen de la evidencia de aprendizaje 4

Para realizar la evidencia de aprendizaje 4, nos enfocamos en que los productos que se
mostrarán en pantalla, sean dinámicos, esto hace referencia a que cuando eliminemos a
agreguemos un nuevo producto, este pueda ser visualizado.

Entonces para el desarrollo del nuevo ítem, se crea un arreglo, él cual va a contener cada
uno de los productos con su respectiva imagen, precio y la cantidad.

En la nueva página dinámica también contamos con el menú que tenemos para las otras
páginas ya creadas, el logo también aparece en la parte de arriba.

En el archivo car.html tenemos varias clase en los contenedores de <div>, entre ellas se
encuentra la clase card-tbl, que será llamada en la función del archivo car.js.

Tenemos la etiqueta <h4> y dentro de esta se encuentra la etiqueta <i> la cual contiene "fas
fa-shopping-cart", esto hace referencia al ícono del carrito de compra que aparecerá en la
página de la tienda, este ícono lo podemos encontrar en la página Font-Awesome

"El elemento <thead>, contiene un bloque de filas <tr>, que representa a la sección de
encabezado de una tabla <table>, donde las celdas de encabezado <th>, son encontradas
habitualmente". (ELEMENTO THEAD, s.f.)

El elemento <tbody>, se encarga de definir el cuerpo de una tabla.

El atributo src en la etiqueta <script>, indica una ruta de un archivo externo, que enlazamos
a nuestro documento html.

Ahora en el archivo car.js se define una funcionalidad por medio de function, para los
productos de nuestra tienda, en esta función se realizan las instrucciones para que los
productos mostrados en pantalla sean dinámicos.

Entonces para esto hacemos definimos lo diferente, creamos un evento flecha:

El método addEventListener () nos sirve para registrar un evento, el evento

DOMContentLoaded, entonces el evento DOMContentLoaded ocurre en el objeto
document, y para poder capturarlo se usa addEventListener.
 4

Al método add le pasamos como parámetro el elemento "productos".

Definimos primero addCar le pasamos el parámetro productos y por medio del operador

tbl-
=> o función flecha, dentro de este se declaran dos constantes una llamada tbl-car y la otra
car-body en la cual se especificaron las siguientes constates, con sus respectivos métodos.
En la segunda constante se declara el método getElementById que nos permite seleccionar
los elementos del documento por medio del Id de la clase tbl-card.

En la tercer constante definimos tbl_card.querySelector, en donde se seleccionan los

elementos de la página car.html, para luego utilizarlos, en este método pasamos cómo
parámetro los elementos definidos en el cuerpo de la tabla en tbody.

Dentro de la misma función flecha, contamos con la sentencia for, en la cual vamos a
ejecutar la línea de código definida para cada elemento del objeto iterable.

Creamos los elementos html haciendo uso del método createElement (), por medio de
comillas le pasamos el elemento "tr", que es el que representa las filas de la tabla definida
en car.html.

Por medio de la constante que ha definido para el método createElement, después del
nombre de la constante, sigue el innerHTML, que es una propiedad que nos permite leer o
asignar los datos al contenido del <div>, en el cual se encuentran definidos cada uno de los
elementos <th>, que se encuentran en el archivo car.html, dichos elementos son: imagen
que será de 80 px, nombre, precio, cantidad, también de acuerdo a un determinado objeto,
en una determinada posición, se realiza la operación de precio por cantidad, en la que se va
a conseguir que los productos mostrados en pantalla, sean dinámicos.

Por último, por medio del método appendChild, llamamos al parámetro productos, que es el
que contiene los productos creados en la página TheStore y que son los mostrados en
pantalla.

Como resultado se obtiene la siguiente evidencia:

 5

Referencias
ELEMENTO THEAD. (s.f.). Obtenido de
https://www.htmlquick.com/es/reference/tags/thead.html#:~:text=El%20elemento%
20thead%20contiene%20a%20un%20bloque%20de,de%20encabezado%20para%2
0el%20resto%20de%20la%20tabla.

Ingeniería Web I IUD. (s.f.). Obtenido de

https://iudigital.instructure.com/courses/7090/modules