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
Individual ☐ Colaborativa ☒ 4
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
miércoles, 10 de abril de 2019
2019
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 Fox electronics necesita lo

siguiente:
 Una calculadora 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.
 Debe diseñar un programa en JavaScript que permita calcular y
mostrar al usuario el valor de venta del producto en cuestión e
indicar cuál es el valor de la utilidad o ganancia para el
administrador de la tienda.

 Los empleados de la tienda requieren una calculadora del 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

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 con ejemplos de aplicación.

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.

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.
Individuales:
Productos
a entregar
Se debe realizar un documento en Word, donde evidencie
por el
por medio de capturas de pantalla y comentarios el
estudiante
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 trabajo
para el 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
Compilador: Consolidar el documento que se
Roles y constituye como el producto final del debate, teniendo
responsabili en cuenta que se hayan incluido los aportes de todos
dades para los participantes y que solo se incluya a los
la participantes que intervinieron en el proceso. Debe
producción informar a la persona encargada de las alertas para
de que avise a quienes no hicieron sus participaciones,
entregables que no se les incluirá en el producto a entregar.
por los
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
Tipo de Actividad Actividad
☐ ☒
actividad: individual colaborativa
Momento de la Intermedia,
Inicial ☐ ☒ Final ☐
evaluación unidad: 2
Niveles de desempeño de la actividad individual
Aspectos
Valoración Puntaje
evaluados Valoración alta Valoración baja
media
En el desarrollo de
En el desarrollo
la actividad el
de la actividad el
estudiante
estudiante
evidencia En el desarrollo
evidencia el
parcialmente el de la actividad el
manejo de
manejo de estudiante no
Diseño de Frameworks de
Frameworks de evidencia el
interfaz de lado del cliente, ya
lado del cliente, ya manejo de
usuario que diseña la
que diseña la Frameworks de
mediante interfaz de usuario 20
interfaz de usuario lado del cliente,
Framework mediante el
mediante el ya que no diseña
Bootstrap lenguaje de
lenguaje de la interfaz de
etiquetas HTML y
etiquetas HTML y usuario.
Bootstrap
Bootstrap
incluyendo los
incluyendo los
menús solicitados.
menús solicitados.
(Hasta 20 (Hasta 10 (Hasta 0
puntos) puntos) puntos)
En el desarrollo de En el desarrollo de El en desarrollo
la actividad el la actividad el de la actividad el
estudiante estudiante estudiante no
Diseño de
evidencia el evidencia evidencia el
formularios
manejo de parcialmente el manejo de
usando 20
Frameworks del manejo de Frameworks del
Framework
lado del cliente ya Frameworks del lado del cliente
Bootstrap
que diseña los lado del cliente ya ya que no diseña
formularios que no diseñó la los formularios
solicitados para los totalidad de solicitados para
 menús del sitio formularios los menús del
web haciendo uso solicitados para los sitio web
de Bootstrap menús del sitio haciendo uso de
web haciendo uso Bootstrap
de Bootstrap
(Hasta 20 (Hasta 10 (Hasta 0
puntos) puntos) puntos)
El en desarrollo de
la actividad el
estudiante
El en desarrollo de evidencia
la actividad el parcialmente el
El en desarrollo
estudiante manejo de
de la actividad el
evidencia el lenguajes de
estudiante
manejo de programación web
evidencia el
lenguajes de del lado del cliente
manejo de
programación web ya que diseño la
Manejo de lenguajes de
del lado del cliente calculadora de
Lenguaje de programación
ya que diseño la resistencias y/o la 40
programació web del lado del
calculadora de calculadora de
n JavaScript cliente ya que no
resistencias y la precio de venta al
diseño las
calculadora de público haciendo
calculadoras
precio de venta al uso de JavaScript
solicitadas.
público haciendo y/o tras diseñar
uso de JavaScript los códigos, las
aplicaciones no
funcionan
adecuadamente.
(Hasta 40 (Hasta 20 (Hasta 0
puntos) puntos) puntos)
Niveles de desempeño de la actividad colaborativa
Aspectos
Valoración Puntaje
evaluados Valoración alta Valoración baja
media
En el desarrollo En el desarrollo En el desarrollo
Resumen
de la actividad el de la actividad el de la actividad el
acerca de la
estudiante estudiante estudiante no
seguridad en
evidencia evidencia evidencia 20
sitios web
conocimientos en parcialmente conocimientos en
del lado del
seguridad de sitios conocimientos en seguridad de
cliente
web del lado del seguridad de sitios sitios web del
 cliente ya que web del lado del lado del cliente
contribuyó a la cliente ya que no ya que no
realización del contribuyó contribuyó a la
resumen donde efectivamente a la realización del
explique los realización del resumen donde
aspectos más resumen donde se explique los
importantes a expliquen los aspectos más
tener en cuenta en aspectos más importantes a
seguridad de sitios importantes a tener en cuenta
web del lado del tener en cuenta en en seguridad de
cliente y propone seguridad de sitios sitios web del
ejemplos de uso. web del lado del lado del cliente y
cliente y/o no tampoco propone
propone ejemplos ejemplos de uso.
de uso.
(Hasta 20 (Hasta 10 (Hasta 0
puntos) puntos) puntos)
La propuesta
seleccionada
La propuesta
evidencia el
seleccionada solo
mejoramiento No se realizó
evidencia
realizado a interfaz ninguna mejora a
Mejoramient mejoramiento en
del usuario, la propuesta
o de la algunos de los 10
formularios de seleccionada.
propuesta aspectos
ingreso de datos,
solicitados.
calculadoras
diseñadas.
(Hasta 10 (Hasta 0
(Hasta 5 puntos)
puntos) puntos)
La carpeta
comprimida
contiene: el
informe con los La carpeta no
Estructura ítems solicitados contiene todos los
No presenta el
del producto en la guía de ítems solicitados 20
producto final
final actividades, como en la guía de
lo son interfaz del actividades.
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