Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Ing Web 01
Ing Web 01
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS
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
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
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
Figura No.5
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
Figura No.7
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.
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
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.
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:
6
Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS
Fuente: Autor.
El siguiente es un ejemplo en el cual se tiene un archivo HTML llamado index.html con la estructura básica:
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.
Fuente: Autor
7
Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS
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).
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.
8
Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS
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
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.
9
Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS
Fuente: Autor
10
Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS
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
Cognitiva La interpretación
La
No muestra La no se limita a los
No utiliza interpretación
Habilidad
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)
Palabras Clave
ARQUITECTURA WEB
Bibliografía Recomendada
11
Nombre del Proceso:
CODIGO: LA-FM-001
GESTIÓN DE LABORATORIOS
WEBGRAFÍA
Firebase. Obtenido de:
<https://youtu.be/jsRVHeQd5kU> [Recurso
Internet]
Control de cambios
Fecha de Actualización Descripción Participantes
12