Nombre del Proceso:

CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS

Nombre del Documento: VERSION: 7

FORMATO PRACTICAS DE LABORATORIOS FECHA: 15/junio/2022

GUÍA DE LABORATORIO DE INGENIERÌA WEB I

Unidad didáctica 1: Fundamentos de Ingeniería Web
Eje Temático: Personalización
No. Guía

2 Resultados de Aprendizaje de la Unidad Didáctica

Enumera y reconoce características de usabilidad en un proyecto web y la

2 importancia de cada una de ellas para el éxito de un proyecto
3 semana
sesiones
Horas de Trabajo Investiga sobre las características de usabilidad de un portal web, así como es capaz
Trabajo con Trabajo de diseñar una arquitectura de información.
Docente Autónomo
3 6
Tipo de trabajo
Grupal X Ind Laboratorio Requerido Asistido por computador / Laboratorio de Informática
Introducción
En esta guía el estudioso identifica las características de usabilidad de un portal web, así como es capaz de presentar su
arquitectura de información.

Por otra parte, investiga sobre las características de usabilidad de un portal web, así como es capaz de diseñar una
arquitectura de información. Desarrollando el proceso propuesto en la guía de laboratorio en grupos de trabajo
buscando trabajar competencias como el trabajo en equipo y la comunicación entre pares académicos.

Sesión 1:

Leer el marco teórico de la guía de laboratorio, comprender e interpretar los requerimientos.

Diligencie el aparte de consulta previa y resultados.

Realiza el curso básico de HTML presentado en el sitio Web https://www.sololearn.com/ entregando el certificado a
través de la plataforma de aprendizaje utilizada.

Sesión 2:

1. Ingrese el siguiente código en un proyecto creado en Visual Code, en un archivo llamado index.html.

Figura No.1 index.html

1
 Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS

Nombre del Documento: VERSION: 7

FORMATO PRACTICAS DE LABORATORIOS FECHA: 15/junio/2022

Fuente Autor

2. Crear un archivo de javascript llamado archivoJS.js en la misma carpeta que esta el archivo HTML. Digite
el siguiente código de Javascript:

Figura No.2 Archivo archivoJS.

Fuente: Autor.

Solicitar la hoja de estilo al docente, es un archivo .CSS reutilizado de Bootstrap v5.0.2

(https://getbootstrap.com/)

“Bootstrap es una biblioteca multiplataforma o conjunto de herramientas de código abierto para diseño de
sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús

2
 Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS

Nombre del Documento: VERSION: 7

FORMATO PRACTICAS DE LABORATORIOS FECHA: 15/junio/2022

de navegación y otros elementos de diseño basado en HTML y CSS, así como extensiones de JavaScript
adicionales. A diferencia de muchos frameworks web, solo se ocupa del desarrollo front-end. ”

3. Se le solicita crear una primera versión de las páginas web del front-end de su proyecto de semestre.

Subtemas:
UX, Usabilidad, Métricas y medición, calidad de la experiencia y arquitectura de información.

Preguntas Orientadoras

En este apartado se realiza el análisis de los datos obtenidos, estos pueden ser de forma cualitativa o cuantitativa según
la naturaleza de la práctica.

¿Cuáles fueron los aprendizajes obtenidos al realizar esta guía?, liste como mínimo 3 aprendizajes y relaciónelos con
su futuro que hacer profesional.

¿Dónde presento mayor dificultad resolviendo la guía? y ¿cómo lo resolvieron? ¿cuáles fueron las estrategias de
solución?

Presaberes Requeridos

Se requiere conocer los principios de ingeniería de software y bases de datos. Programar en diferentes lenguajes de
programación.

Marco conceptual o referencial *

El ciclo de vida de desarrollo software - CVDS en gran parte no es diferente de al ciclo de vida de desarrollo para
aplicaciones web o de escritorio. En general hay 5 partes principales del proceso:

1. Concepción: Todas las aplicaciones se inician con una idea. Esa idea se refina en una base sólida para
una aplicación.
2. Diseño: La fase de diseño consiste en definir la experiencia del usuario de la aplicación (UX) con su
disposición general, cómo funciona, etc., así como convertir esa UX en una interfaz adecuada de
usuario de diseño (IU), por lo general con la ayuda de un diseñador gráfico.
3. Desarrollo: Por lo general, es la fase más intensiva, esto es la construcción real de la aplicación.
4. Estabilización: Cuando el desarrollo está lo suficientemente avanzado, el control de calidad por lo
general comienza con probar la aplicación, encontrar errores y corregirlos. Muchas veces una
aplicación entrará en una fase beta limitada en la que se le da a un público más amplio la oportunidad
de utilizarlo y encontrar otros errores.
5. Despliegue: Consiste en la publicación de una versión estable de la aplicación. En esta fase se puede
utilizar cualquier número de metodologías como: ágil, espiral, cascada, entre otras.

La usabilidad en una página web tiene que ver con la facilidad de entender la organización de dicha página; una
página web con una buena usabilidad permite a los usuarios que hacen la visita, puedan tener una interacción
sencilla, intuitiva, agradable y segura. La usabilidad de acuerdo con la definición de ISO 9241 es: “la efectividad,
eficiencia y satisfacción con la que los usuarios específicos logran objetivos específicos en entornos
particulares”.

UX (user experience) hace referencia a la totalidad de la experiencia emocional de un usuario en una página web.
El diseño UX se caracteriza básicamente por conocer al público objetivo de una página web y sus necesidades.
En otras palabras: se refiere a la combinación de una atractiva interfaz de usuario con la funcionalidad,
convincente y ajustada a su audiencia.

Actividad de Trabajo Autónomo

3
 Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS

Nombre del Documento: VERSION: 7

FORMATO PRACTICAS DE LABORATORIOS FECHA: 15/junio/2022

Read the paper “Exploring Usability Enhancements in W3C Process” of Marja-Riitta Koivunen and Matt
May, W3C. Available in: https://www.w3.org/2002/09/usabilityws.html

1. What features do websites that lack usability have problems with?

2. What is the difference between usability and accessibility?
3. What is the similarity between usability and accessibility?
4. Specify a checklist to verify the usability of a website (approx. ten items).
Read the paper “10 Usability Heuristics for User Interface Design”. Available in:
<https://www.nngroup.com/articles/ten-usability-heuristics/>

Make the prior consultation, answer in English. and make a video explaining all content developed in the
guide.

El estudioso realiza un video de mínimo 1 y máximo 3 minutos exponiendo la actividad de trabajo

independiente, el marco teórico y el código desarrollado en el ejemplo práctico propuesto en el
procedimiento a utilizar.

Actividad de Comprobación del Trabajo Autónomo

The student makes a video IN ENGLISH of a minimum of 1 and a maximum of 3 minutes exposing a summary of the
main idea of the theoretical framework, the consultation of the independent work activity and the code developed in the
practical example proposed in the introductory process session 1 and 2. The scholar publishes the video in the activity
FORUM.

Materiales, equipos e insumos a utilizar

Materiales, equipos e insumos proporcionados por la Universidad
Ítem Cantidad
Computador
Microsoft Office
Netbeans
Plugin de EasyUML en Netbeans
Acceso a Internet
Acceso a las bases de datos digitales de la Universidad.

Materiales del estudiante

Ítem Cantidad
Tiempo de estudio

Precauciones, nivel de riesgo y recomendaciones a considerar

CLASIFICACIÓN DEL Muy alto Medio
RIESGO Alto Bajo
FACTORES DE RIESGO CÓMO MINIMIZAR LOS FACTORES DE RIESGO
El factor de riesgo para este laboratorio está Siga las recomendaciones y consideraciones para el uso del
clasificado como BAJO, debido a que no se han laboratorio y los computadores del laboratorio.
detectado consecuencias y la eficacia del conjunto
de las medidas preventivas existentes es alta. En
otras palabras, el riesgo está controlado

RECOMENDACIONES, CONSIDERACIONES PARA EL USO DE MATERIAL Y EPP

4
 Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS

Nombre del Documento: VERSION: 7

FORMATO PRACTICAS DE LABORATORIOS FECHA: 15/junio/2022

• Identificar y conocer el protocolo de seguridad de laboratorios de informática.

• No navegar en internet sin autorización del docente.
• No ejecutar programas sin autorización del docente.
• No instalar en los equipos Software de ninguna índole.
• No trasladar equipos de cómputo de su módulo sin autorización del personal del área.
• Cuidar sus objetos personales.
• Cada alumno tiene como responsabilidad recibir las actividades de cada clase y apropiarse del material
necesario para el desarrollo de las mismas.
• Está prohibido el ingreso o consumo de alimentos, bebidas, chicle... dentro de la sala.
• Está prohibido el uso e ingreso de dispositivos como celulares, parlantes y memorias USB sin autorización.
• No conectar ni desconectar dispositivos como teclados, mouse o conexiones, en caso de anomalía avisar al
profesor para realizar cambios o conexiones.
• El trabajo debe hacerse en silencio, evitando las reuniones o interrumpiendo las actividades de otros
estudiantes.
• Cuide el buen funcionamiento del equipo que la ha sido asignado, evite cambiar configuraciones o
intervenir los programas y propiedades del sistema operativo, el auxiliar de laboratorio es el único
autorizado.
• Todo dispositivo (teclado o mouse) que se pierda o se dañe con intención deberá ser repuesto.
• No portar maletines o morrales, estos deben quedar depositados en los lockers destinados para ello. En caso
de duda pida el respectivo candado con los auxiliares de cada laboratorio.
• No rayar mesas, sillas, paredes y equipos, cuidar el aseo y orden de su puesto de trabajo.
• Se prohíbe el ingreso o exploración de páginas no autorizadas y pornográficas, es causal de sanción y
expulsión (vetado) de la sala de informática por varias sesiones.

CONSIDERACIONES ÉTICAS
 Tener siempre presente el código de ética del ingeniero de software en especial el ítem relacionado con:

 Colegas: Cada ingeniero deberá apoyar y ser justos con los colegas, motivando a sus colegas sujetándose al
código, ayudando también a su desarrollo profesional, reconocer los trabajos de otros y abstenerse a atribuirse
de méritos indebidos, revisar los trabajos de manera objetiva, sincera y propiamente documentada.

Procedimiento y Metodología de la práctica

 El taller es grupal (en parejas).
 Cada estudiante debe ubicarse en un equipo y asegurarse de tener instaladas las aplicaciones requeridas.
 En el laboratorio el estudiante debe proceder a realizar la práctica y posteriormente puede enviar la solución
del taller para ser revisada por el profesor.
 En caso de requerirse realizar la entrega de código fuente de programas comprimir como archivo .zip y
anexar al correo o entrega.
 El estudiante puede formular inquietudes al profesor durante el desarrollo de la práctica.

Figura. No. Procedimiento de la práctica

5
 Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS

Nombre del Documento: VERSION: 7

FORMATO PRACTICAS DE LABORATORIOS FECHA: 15/junio/2022

Fuente: Autor

Criterios de Entrega – Informe de Laboratorio

Se entrega un informe ejecutivo en Word con

1. Código y nombre completo de los integrantes del grupo de trabajo.
2. El resultado especificado en la Introducción
3. La respuesta a las preguntas orientadoras
4. El link compartido en youtube del video solicitado en la Actividad de Trabajo Autónomo
5. Todo trabajo presentado debe incluir normas APA V7.
6. Diligencie en la siguiente tabla la información solicitada

Concepción de un Proyecto de Software

Defina el origen del proyecto: Justificación:

a) Idea de emprendimiento
b) Requerimiento
c) Necesidad de negocio
Elabore un esquema abstracto del producto final

¿Qué problema resuelve su propuesta? Justificación:

¿Su propuesta corresponde a un producto innovador? Justificación:

6
 Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS

Nombre del Documento: VERSION: 7

FORMATO PRACTICAS DE LABORATORIOS FECHA: 15/junio/2022

a) Si
b) No

¿Qué tipo de solución propone? Justificación:

a) WebApp
b) App
c) PC

Determine el tipo de distribución de su aplicación: Justificación:

a) Distribución pública
b) Distribución privada

Ventaja(s) competitiva(s): ¿Cómo nos vamos a diferenciar respecto al resto Descripción:

de la competencia? ¿Es innovadora nuestra aplicación?

Integración con la infraestructura: ¿Cuenta la organización con una Descripción:

infraestructura apropiada, o debemos extenderla o adaptarla a los
requerimientos funcionales y no funcionales de la aplicación?

Valor(es) agregado(s): ¿Cómo nuestra aplicación entrega valor Descripción:

diferenciador a sus usuarios o clientes? ¿Cómo estos usuarios/clientes
aprovechan este valor para ser más productivos, eficientes, ágiles, etc.?

Tecnologías adicionales: ¿Cómo podemos otros recursos (cámaras IP, Uso:

georreferenciación, etc.) integrados a la tecnología?

Criterios de Evaluación – Práctica de Laboratorio

INDIVIDUAL CRITERIOS DE EVALUACIÓN
NOTA
Criterio Competencia 0 – 1,5 1,6 - 2,9 3,0 - 3,9 4,0 - 4,5 4,6 - 5,0

7
 Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS

Nombre del Documento: VERSION: 7

FORMATO PRACTICAS DE LABORATORIOS FECHA: 15/junio/2022

1. Aplica todas las Cognitiva No los Identifica Identifica Identifica Identifica todos
características de la identifica, no algunos, no algunos conoce todos, conoce los mecanismos y
metodología de desarrollo para conoce las conoce las algunas algunas conoce sus
el trabajo en equipo métricas métricas métricas métricas métricas

Investigativa La
bibliografía Uso bibliografía
Utilizó
Utilizó reseñada no y realizó las
2. Realiza investigaciones del bibliografía,
No utilizó bibliografía no corresponde citaciones
tema propuesto utilizando la pero no
bibliografía científica o con las citas correspondientes
bibliografía existente. realizó las
educativa empleadas en de forma
citaciones
la adecuada
investigación

Comunicativa, Las ideas

Las ideas que Las ideas son
Cognitiva plasmadas Las ideas son
No utiliza expresa con coherentes,
3. Logra expresar ideas propias son confusas, coherentes,
palabras coherentes, pero están en
a partir los conocimientos que desordenas y ordenadas y
propias ni pero no desorden y no
adquiere en la investigación. no pertenecen a la
ideas propias corresponden logran
corresponden temática
al tema concluir
a al tema

Cognitiva La interpretación
La
No muestra La no se limita a los
No utiliza interpretación
4. Forma conceptos utilizando una interpretación conceptos
palabras que muestra
las guías conceptuales del tema interpretación que muestra investigados,
propias ni no
propuesto de forma crítica. de las ideas solo repite lo dejando claras
ideas propias corresponde a
investigadas leído sus ideas en torno
la temática
al tema

Comunicativa, La
Socio-afectiva La presentación
La presentación está completa
presentación está completa pero la La presentación
5. Comunica de forma verbal No realiza no contiene pero la expresión está completa y la
los resultados obtenidos en su presentación todos los expresión verbal solo expresión verbal
investigación, siendo claros y de su conceptos verbal no expresa el logra transmitir
concretos investigación involucrados logra contenido de los conocimientos
en la transmitir los la adquiridos
investigación conocimientos presentación
adquiridos misma (lee la
presentación)

Total Total = (N1 + N2 + N3 + N4 + N5) / 5

Palabras Clave
WEB USABILITY
Bibliografía Recomendada
Tema Subtema Referente bibliográfico

8
 Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS

Nombre del Documento: VERSION: 7

FORMATO PRACTICAS DE LABORATORIOS FECHA: 15/junio/2022

Contreras Castañeda, M. Á. (2016). Desarrollo de

aplicaciones web multiplataforma. Ministerio de
Educación y Formación Profesional de España.
(Recuperado Base de Datos E-libro)

Celaya Luna, A. (2014). Posicionamiento web

(SEO/SEM).
Editorial ICB. (Recuperado Base de Datos E-libro)
Domes, S. (2017). Progressive Web Apps with
React. Packt Publishing(Recuperado Base de Datos
UX, Usabilidad, Métricas y medición, EBSCO)
Personalización calidad de la experiencia y arquitectura
de información Zofío Jiménez, J. (2013). Aplicaciones web.
Macmillan Iberia, S.A. (Recuperado Bases de
Datos e-libro)

Pressman, R. S., Campos Olguín, V., & Enríquez

Brito, J. (2010). Ingeniería del software: un enfoque
práctico (Séptima edición). McGraw-Hill
Interamericana. (Recuperado base de datos EBSCO
Publishing).

Control de cambios
Fecha de Actualización Descripción Participantes

Actualización formato guía de

7/07/2022 Olga Lucía Roa
laboratorio