Universidad Nacional Abierta y a Distancia

Vicerrectoría Académica y de Investigación

Guía de actividades y Rúbrica de Evaluación - Fase 3 - Diseño e
implementación del lado del cliente

1. Descripción general del curso

Escuela o Unidad Escuela de Ciencias Básicas, Tecnología e

Académica Ingeniería
Nivel de Profesional
formación
Campo de Formación complementaria
Formación
Nombre del Programación de sitios web
curso
Código del curso 301127
Tipo de curso Metodológico Habilitable Si ☐ No ☒
Número de 3
créditos

2. Descripción de la actividad

Tipo de Número de 4
Individual ☐ Colaborativa ☒
actividad: semanas
Momento de
Intermedia,
la Inicial ☐ ☒ Final ☐
unidad: 2
evaluación:
Peso evaluativo de la Entorno de entrega de actividad:
actividad: 130 Seguimiento y evaluación
Fecha de inicio de la
Fecha de cierre de la actividad:
actividad: 13 de marzo de
jueves, 9 de abril de 2020
2020
Competencia a desarrollar:
El estudiante diseña sitios web haciendo uso de Frameworks y
lenguajes de programación del lado del cliente para la implementación
de proyectos web que den solución a problemáticas planteadas.
Temáticas a desarrollar:
Framework de tipo front-end
Lenguajes del lado del cliente
Seguridad del lado del cliente
Pasos, fases o etapa de la estrategia de aprendizaje a
desarrollar
Fase 3 - Diseño e implementación del lado del cliente
Actividades a desarrollar

El estudiante debe:

De acuerdo a la propuesta seleccionada en la fase 2.

Diseño de la interfaz del usuario:

Debe diseñar la interfaz gráfica del aplicativo web con base en el

lenguaje de etiquetas HTML y en el Framework Bootstrap. Puede
hacer uso de “Bootstrap Navigation Bar”. El diseño de la interfaz debe
tener bien claro el nombre del aplicativo, una barra de menús con 4
menús (Administrador, Inventario, Ventas, Utilidades).

Dentro del menú de Utilidades la Tienda Texas Electronics necesita lo

siguiente:
 Un aplicativo en JavaScript que permita ingresar un valor de
compra de un producto, un porcentaje de utilidad, un porcentaje
de impuesto IVA y un botón que permita calcular el valor de
venta del producto y el valor en pesos de la ganancia para el
administrador. Ejemplo:

Valor de compra $5000

% utilidad o ganancia 30%
% IVA 19%
BOTON CALCULAR
Valor de venta $ $7450
Ganancia $ $1500

 Los empleados de la tienda requieren un aplicativo en Java

Script que calcule el valor de resistencias eléctricas, ya que el
cálculo del valor se realiza por medio de una tabla de colores y
requiere de tiempo, lo cual debe optimizarse por medio de un
programa. La resistencia es un componente eléctrico que
consume corriente y la disipa en forma de calor, tiene diversas
aplicaciones dependiendo de su valor comercial y se mide en
 ohmios.
 A continuación, se observa el código de colores el cual será la
base para realizar la aplicación en JavaScript, se recomienda
implementar un formulario donde se seleccione el valor de la
primera banda, el valor de la segunda banda y el valor de la
tercera banda, conforme a los colores y que el usuario observe
el valor en ohmios.

Ejemplo de cálculo:
Primera banda, color azul = 6
Segunda banda, color café = 1
Tercera banda, color rojo = x100
Calculo = 61x100 = 6100 ohmios

Ejemplo del aplicativo:

Dentro del menú de Inventario y apoyado en el framework Bootstrap,

debe diseñar 4 formularios en HTML:
1. Que permita al usuario ingresar un producto con las siguientes
especificaciones: código de producto, nombre de producto, marca
del producto, precio de compra, cantidad comprada y un botón que
se llame guardar producto.
2. Que permita al usuario actualizar un producto con las siguientes
especificaciones: código de producto, nombre de producto, marca
del producto, precio de compra, cantidad comprada y un botón que
se llame actualizar producto.
3. Que permita al usuario eliminar un producto con las siguientes
especificaciones: código de producto y un botón que se llame
eliminar producto.
4. Que permita al usuario consultar un producto con las siguientes
especificaciones: código de producto y un botón que se llame
consultar producto.

Los formularios anteriores, solo deben ser diseñados, ya que serán

usados en la siguiente fase para interactuar con la base de datos del
aplicativo web.

Dentro del menú de ventas debe diseñar un formulario en HTML

apoyado en Bootstrap, que tenga las siguientes especificaciones:
código de producto, valor de la venta, cantidad vendida.
El menú de administrador debe dejarlo en blanco.

Como grupo colaborativo debe:

Realizar un resumen donde describa aspectos importantes que deben

tenerse en cuenta en cuanto a la seguridad de aplicativos del lado del
cliente en JavaScript y HTML.

Deben discutir acerca de la mejor propuesta (Diseño de la interfaz,

diseño de formularios, programas en JavaScript), realimentarla y
proponerle mejoras.

Se debe realizar un informe en Word, donde evidencie la creación de

la interfaz del usuario, los formularios solicitados en cada uno de los
menús del aplicativo, resumen de aspectos de seguridad, los
programas (calculadora de valor de venta y calculadora de
resistencias). Debe agregar capturas de pantalla y descripción de las
actividades realizadas.

Nota: Es de vital importancia que usted comparta en el foro el

documento con las capturas de pantalla de la ejecución de los códigos
con el fin de recibir una retroalimentación clara y oportuna.

Entorno de conocimiento: debe consultar los recursos

educativos requeridos para abordar los temas de la
Unidad

Entornos Entorno de aprendizaje colaborativo: es allí donde el

para su estudiante realiza sus aportes para que el tutor realice la
desarrollo respectiva retroalimentación.

Entorno de seguimiento y evaluación: es el entorno

donde el estudiante con rol de “entregas” realizará la
entrega del producto final de su grupo de trabajo.
Productos Individuales:
a entregar
por el Se debe realizar un documento en Word, donde
estudiante evidencie por medio de capturas de pantalla y
comentarios el desarrollo solicitado.
Se debe compartir una carpeta comprimida en (.zip) con
los ficheros derivados del desarrollo de la actividad
(Diseño de la interfaz del usuario, diseño de formularios
y manejo de JavaScript), en el foro de aprendizaje
colaborativo.

Colaborativos:

Se debe entregar una carpeta comprimida con un

informe en Word, donde evidencie la creación de la
interfaz del usuario, el resumen de aspectos de
seguridad, los formularios solicitados en cada uno de los
menús del aplicativo, los programas (calculadora de
valor de venta y calculadora de resistencias). Debe
agregar capturas de pantalla y descripción de las
actividades realizadas. También debe incluir los ficheros
de la programación realizada.
Dicho comprimido debe ser cargado en el Entorno de
seguimiento y evaluación - Espacio: Fase 3: Diseño e
implementación del lado del cliente – Entrega de la
actividad
Dicho archivo debe llamarse: #degrupo.rar
 Lineamientos generales del trabajo colaborativo para el
desarrollo de la actividad

Para el desarrollo de cada una de las actividades, es

importante que el estudiante revise cada una de las
lecturas dispuestas en el entorno de conocimiento del
curso y los objetos virtuales de información OVI,
disponibles en ese entorno.
Planeación
de Es importante realizar aportes significativos en cada
actividades uno de los aportes que se realice en los foros de
para el trabajo colaborativo y su puntual participación.
desarrollo
del trabajo En el entorno de seguimiento y evaluación, encuentra
colaborativo el e-portafolio, allí usted puede registrar su opinión
personal acerca de la fase desarrollada. Su uso es
opcional, pero se recomienda realizarlo a manera auto
evaluativa con el fin de reflejar el compromiso con su
proceso formativo.

Roles a
desarrollar
Dado que las actividades requieren entregas
por el
colaborativas, se sugiere que se establezca el rol de
estudiante
líder quien estará pendiente de que los aportes sean
dentro del
oportunos en los foros
grupo
colaborativo
Roles y Compilador: Consolidar el documento que se
responsabili constituye como el producto final del debate, teniendo
dades para en cuenta que se hayan incluido los aportes de todos
la los participantes y que solo se incluya a los
producción participantes que intervinieron en el proceso. Debe
de informar a la persona encargada de las alertas para
entregables que avise a quienes no hicieron sus participaciones,
por los que no se les incluirá en el producto a entregar.
estudiantes
Revisor: Asegurar que el escrito cumpla con las
normas de presentación de trabajos exigidas por el
docente.
 Evaluador: Asegurar que el documento contenga los
criterios presentes en la rúbrica. Debe comunicar a la
persona encargada de las alertas para que informe a
los demás integrantes del equipo en caso que haya
que realizar algún ajuste sobre el tema.

Entregas: Alertar sobre los tiempos de entrega de los

productos y enviar el documento en los tiempos
estipulados, utilizando los recursos destinados para el
envío, e indicar a los demás compañeros que se ha
realizado la entrega.

Alertas: Asegurar que se avise a los integrantes del

grupo de las novedades en el trabajo e informar al
docente mediante el foro de trabajo y la mensajería
del curso, que se ha realizado el envío del documento.

Uso de Para el presente producto es importante hacer uso de

referencias las normas APA sexta edición.
El plagio, definido por la Real Academia es la acción
de copiar en lo sustancial obras ajenas, dándolas
como propias.
Se debe referenciar adecuadamente el trabajo de
Políticas de otros, mediante el uso de citas y paráfrasis.
plagio Si se incurre en plagio, la primera vez recibirá una
calificación de 0.0 y si se incurre en esta falta por
segunda vez recibe una calificación de 0.0 y se
informará la situación a la coordinación del programa
y a la escuela.
4. Rúbrica de Evaluación - Fase 3 - Diseño e implementación del
lado del cliente
Rúbrica de Evaluación - Fase 3 - Diseño e implementación del
lado del cliente
Actividad
Tipo de Actividad
☐ colaborativ ☒
actividad: individual
a
Momento de Intermedia,
Inicial ☐ ☒ Final ☐
la evaluación unidad: 2
Niveles de desempeño de la actividad
Aspectos
individual
evaluado Puntaje
Valoración Valoración Valoración
s
alta media baja
 En el En el desarrollo
desarrollo de la de la actividad
actividad el el estudiante
estudiante evidencia En el
evidencia el parcialmente el desarrollo de
manejo de manejo de la actividad el
Diseño de Frameworks de Frameworks de estudiante no
interfaz de lado del cliente, lado del cliente, evidencia el
usuario ya que diseña ya que diseña manejo de
mediante la interfaz de la interfaz de Frameworks
20
Framewor usuario usuario de lado del
k mediante el mediante el cliente, ya que
Bootstrap lenguaje de lenguaje de no diseña la
etiquetas HTML etiquetas HTML interfaz de
y Bootstrap y Bootstrap usuario.
incluyendo los incluyendo los
menús menús
solicitados. solicitados.
(Hasta 20 (Hasta 10 (Hasta 0
puntos) puntos) puntos)
Diseño de En el desarrollo En el desarrollo El en 20
formulario de la actividad de la actividad desarrollo de
s usando el estudiante el estudiante la actividad el
Framewor evidencia el evidencia estudiante no
k manejo de parcialmente el evidencia el
Bootstrap Frameworks manejo de manejo de
del lado del Frameworks Frameworks
 del lado del del lado del
cliente ya que cliente ya que cliente ya que
diseña los no diseñó la no diseña los
formularios totalidad de formularios
solicitados para formularios solicitados
los menús del solicitados para para los
sitio web los menús del menús del
haciendo uso sitio web sitio web
de Bootstrap haciendo uso haciendo uso
de Bootstrap de Bootstrap
(Hasta 20 (Hasta 10 (Hasta 0
puntos) puntos) puntos)
El en desarrollo
de la actividad
el estudiante
evidencia
El en desarrollo parcialmente el
de la actividad manejo de
El en
el estudiante lenguajes de
desarrollo de
evidencia el programación
la actividad el
manejo de web del lado
estudiante
lenguajes de del cliente ya
evidencia el
programación que diseño la
Manejo de manejo de
web del lado calculadora de
Lenguaje lenguajes de
del cliente ya resistencias y/o
de programación
que diseño la la calculadora 40
programac web del lado
calculadora de de precio de
ión del cliente ya
resistencias y venta al público
JavaScript que no diseño
la calculadora haciendo uso
las
de precio de de JavaScript
calculadoras
venta al público y/o tras
solicitadas.
haciendo uso diseñar los
de JavaScript códigos, las
aplicaciones no
funcionan
adecuadament
e.
(Hasta 40 (Hasta 20 (Hasta 0
puntos) puntos) puntos)
Aspectos Niveles de desempeño de la actividad Puntaje
 colaborativa
evaluado
Valoración Valoración Valoración
s
alta media baja
En el
En el
desarrollo de
desarrollo de la
En el la actividad el
actividad el
desarrollo de la estudiante no
estudiante
actividad el evidencia
evidencia
estudiante conocimientos
parcialmente
evidencia en seguridad
conocimientos
conocimientos de sitios web
en seguridad
en seguridad del lado del
de sitios web
de sitios web cliente ya que
del lado del
del lado del no contribuyó
cliente ya que
Resumen cliente ya que a la
no contribuyó
acerca de contribuyó a la realización del
efectivamente
la realización del resumen
a la realización
seguridad resumen donde donde
del resumen 20
en sitios explique los explique los
donde se
web del aspectos más aspectos más
expliquen los
lado del importantes a importantes a
aspectos más
cliente tener en cuenta tener en
importantes a
en seguridad cuenta en
tener en cuenta
de sitios web seguridad de
en seguridad
del lado del sitios web del
de sitios web
cliente y lado del
del lado del
propone cliente y
cliente y/o no
ejemplos de tampoco
propone
uso. propone
ejemplos de
ejemplos de
uso.
uso.
(Hasta 20 (Hasta 10 (Hasta 0
puntos) puntos) puntos)
Mejoramie La propuesta La propuesta  No se realizó 10
nto de la seleccionada seleccionada ninguna
propuesta evidencia el solo evidencia mejora a la
mejoramiento mejoramiento propuesta
realizado a en algunos de seleccionada.
interfaz del los aspectos
usuario, solicitados.
 formularios de
ingreso de
datos,
calculadoras
diseñadas.
(Hasta 10 (Hasta 5 (Hasta 0
puntos) puntos) puntos)
Estructura La carpeta La carpeta no No presenta el 20
del comprimida contiene todos producto final
producto contiene: el los ítems
final informe con los solicitados en
ítems la guía de
solicitados en actividades.
la guía de
actividades,
como lo son
interfaz del
usuario, el
resumen de
aspectos de
seguridad, los
formularios
solicitados en
cada uno de los
menús del
aplicativo, los
programas
(calculadora de
valor de venta
y calculadora
de resistencias)
y esta
referenciado
con normas
APA. Además
contiene los
ficheros
derivados de la
programación
realizada.
(Hasta 20 (Hasta 10 (Hasta 0
puntos) puntos) puntos)
Calificación final 130