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: Fundamentos de Ingeniería Web
No. Guía

1 Resultados de Aprendizaje de la Unidad Didáctica

Enumera y reconoce los componentes necesarios para la existencia de la Web y el

4 funcionamiento de la misma pudiendo determinar las diferencias y la importancia
1 y 2 Semana de cada uno de ellos.
sesiones
Horas de Trabajo
Investiga sobre fundamentos de Ingeniería Web aplicándolos en la formulación de
Trabajo con Trabajo un proyecto de semestre.
Docente Autónomo
6 12
Tipo de trabajo
Grupal X Ind Laboratorio Requerido Asistido por computador / Laboratorio de Informática
Introducción
En esta guía el estudioso enumera y reconoce los componentes necesarios para la existencia de la Web y el
funcionamiento de la misma pudiendo determinar las diferencias y la importancia de cada uno de ellos.

Por otra parte, investiga sobre fundamentos de Ingeniería Web aplicándolos en la formulación de un proyecto de
semestre. 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.
1. Una vez que se compruebe que el entorno de trabajo Microsoft Visual Studio Code se
encuentre instalado, el estudioso abrirá una carpeta Lab01 en su computador, luego entrará a Visual Studio
Code, menú – Archivo – Abrir Carpeta y buscar y seleccionar la carpeta Lab01
creada anteriormente. (Ver figura No.1)

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

Figura No.1

2. Crear el primer archivo HTML, en el panel derecho de la carpeta Lab01 haga clic en el icono
De nuevo archivo y digite el nombre del archivo, para el caso index.html. (Ver Figura No.2)

Figura No.2

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

1. Una vez creado el archivo index.html, los estudiosos empezaran a escribir código en él, ingrese el texto html, se
deben desplegar una serie de opciones, por favor seleccionar html:5. (Ver Figura No.3)

Figura No.3

Una vez seleccionado html:5 debe aparecer el código de la estructura básica de html, verifique que en su pantalla
aparezca lo que muestra la figura No.4

Figura No.4

1. En este paso el estudioso debe escoger 6 imágenes que sean del mismo tema (Carros, Comida, zapatos, animales,
etc.), cree una carpeta con el nombre de imágenes dentro de la capeta Lab01 y guárdelas en ella.

2. Ahora agregaremos líneas de código, etiquetas de título principal (H1 y H2), etiquetas de párrafo (p), tablas (table)
y vincular imágenes. (Ver Figura No.5)

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

Figura No.5

6. Guarde los cambios y continúe con el punto No.7

7. Para ver la página que acaba de hacer el estudioso debe entrar por la opción de Extensiones, aparecerán una serie
de opciones, busque Live Server e instálela. (Ver Figura No. 6)

Figura No.6

Una vez que se instale de ir al lado derecho de la pantalla y recargarla en el icono dispuesto
Para realizar esta acción. (Ver Figura No.7)

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

Figura No.7

Aparecerá en la parte inferior de su pantalla la opción de Go Live (Ver Figura No.8)

Al dar clic sobre esta opción mostrará su aplicación en un navegador.

Sesión 2:

1. Se le solicita realizar un ejemplo que utilice HTML5 y la etiqueta canvas para presentar en una página
web la gráfica de algunas figuras geométricas, revisar el tutorial de la siguiente página
https://www.w3schools.com/graphics/canvas_drawing.asp

Sesión 3:

2. Realizar una página web que solicite la fecha de nacimiento y genere un alert con el signo zodiacal del
usuario. Por favor utilizar las tecnologías: HTML, CSS, Javascript Y JQuery, para este ejercicio.

3. Diligencie el aparte de resultados.

Sesión 4:

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.

Subtemas:
La Web
Arquitectura Web
Servidor

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

URL Y URI
Navegador
Tecnologías
Apache y NginX
Servidor de Base de Datos

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 HTML5 (HyperText Markup Language) Ver en Webgrafía (HTML5. ,2021). es la quinta revisión del
lenguaje de programación “básico” de la World Wide Web. Esta nueva versión pretende remplazar al actual
(X)HTML, corrigiendo problemas con los que los desarrolladores web se encuentran, así como rediseñar el
código actualizándolo a nuevas necesidades que demanda la web de hoy en día.

Figura N.1 Estructura General de un archivo HTML (HTML5, )

Fuente: Autor

Fuente: Autor
En el cuerpo o body: en esta parte se coloca el contenido de la página. Puede incluir estructuras de organización
como div, tablas, menús, hipervínculos, imágenes entre otras.

El Modelo de Objetos del Documento (DOM) es una interfaz de programación de aplicaciones (API) para
documentos validos HTML. Ver en Webgrafía (Philippe Le Hégaret, W3C y otros. ,2004). Con el Modelo de
Objetos del Documento, los programadores pueden construir documentos, navegar por su estructura, y añadir,
modificar, o eliminar elementos y contenido.

El DOM presenta los documentos como una jerarquía de objetos Node (Nodos).
Dentro de la etiqueta head o Cabecera. Se pueden incluir opciones como:

1. Set de caracteres a utilizar (Figura N.2 – línea 6)

2. Un archivo de hojas de estilo en cascada (del inglés Cascading Style Sheets) (. CSS) a utilizar.

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

(Figura N.2 – línea 8)

3. Un archivo de Código JavaScript. (Figura N.2 – línea 7)
4. También se pueden incluir librerías desarrolladas con javascript como jquery. (Figura N.2 – línea
5)

Figura N.2 Encabezado

Fuente: Autor.

El siguiente es un ejemplo en el cual se tiene un archivo HTML llamado index.html con la estructura básica:

Figura N.3 Archivo index.html

Fuente: Autor.

Un archivo de javascript llamado archivoJS.js que se incluye en el html de la figura N.3 en la línea 6 de la figura
N.3. Como se puede observar en la figura N.4 se observa la sintaxis de javascript para crear una función.

Figura N.4 archivoJS.js

Fuente: Autor

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

Para completar este ejemplo solicita al docente en el laboratorio el archivo styles.css que corresponde a una hoja
de estilo en cascada (del inglés Cascading Style Sheets) (.CSS).

Codifica el ejemplo completo en tu computador y analiza el funcionamiento del mismo. Es importante observar
que un FRONT-END de un sitio Web se desarrolla de base con estas tres tecnologías HTML, CSS y JS (y
librerías desarrolladas con JavaScript de las cuales hablaremos más adelante).

Actividad de Trabajo Autónomo

Consulta bibliográfica en bases de datos digitales.

(Realice un diagrama jerárquico de objetos Javascript DOM explicando brevemente cada uno de los elementos
contenidos).

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.

Make the prior consultation, answer in English and make a video explaining all content developed in the guide.
Make a hierarchical diagram of javascript DOM objects briefly explaining each of the contained elements.

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

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

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

• 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

9
 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. Listado de 10 requerimientos funcionales a desarrollar.
7. Diligencie en la siguiente tabla la información solicitada

Nombre del Grupo:

Integrantes del grupo:
Tema:
Título del Proyecto:
Descripción General del Proyecto:

Criterios de Evaluación – Práctica de Laboratorio

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

Nombre del Documento: VERSION: 7

FORMATO PRACTICAS DE LABORATORIOS FECHA: 15/junio/2022

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

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

Investigativa La bibliografía
Uso bibliografía
Utilizó reseñada no
Utilizó y realizó las
2. Realiza investigaciones del tema bibliografía, corresponde
No utilizó bibliografía citaciones
propuesto utilizando la bibliografía pero no con las citas
bibliografía no científica o correspondiente
existente. realizó las empleadas en
educativa s 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 a son confusas, coherentes,
palabras coherentes, pero están en
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
Habilidad

4. Forma conceptos utilizando las una interpretación conceptos

palabras que muestra
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
la temática
torno al tema

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

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

Palabras Clave
ARQUITECTURA WEB
Bibliografía Recomendada

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

Nombre del Documento: VERSION: 7

FORMATO PRACTICAS DE LABORATORIOS FECHA: 15/junio/2022

Tema Subtema Referente bibliográfico

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
Fundamentos de Ingeniería Web React. Packt Publishing.(Recuperado Base de Datos
Arquitectura Web EBSCO)
Servidor
URL Y URI Zofío Jiménez, J. (2013). Aplicaciones web.
HTML5 (introducción) Navegador Macmillan Iberia, S.A. (Recuperado Bases de
Tecnologías Datos e-libro)
Apache y NginX
Servidor de Base de Datos Pressman, R. S., Campos Olguín, V., & Enríquez
Brito, J. (2010). Ingeniería del software : un
enfoque práctico (Septima edición). McGraw-Hill
Interamericana .(Recuperado base de datos EBSCO
Publishing).

WEBGRAFÍA
Firebase. Obtenido de:
<https://youtu.be/jsRVHeQd5kU> [Recurso
Internet]

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

Actualización formato guía de

7/07/2022 Olga Lucía Roa
laboratorio

12