FORMATO PARA PRACTICAS DE LABORATORIO

PROCESO: GESTIÓN DE RECURSOS, INFRAESTRUCTURA Y

LABORATORIOS

LA-FM-007 Versión: 5 Fecha: 28/11/2019 Página 1 de 9

INFORMACIÓN BÁSICA

PRÁCTICA No.: 3
NOMBRE DE LA PRÁCTICA: JAVASCRIPT JQUERY, AJAX JSON

ASIGNATURA: Ingeniería web 2

TEMA DE LA PRÁCTICA: Programación del lado del cliente

LABORATORIO A UTILIZAR:
Laboratorio de Programación.

TIEMPO: (4 horas) TRABAJO GRUPAL: TRABAJO INDIVIDUAL:

x
CONTENIDO DE LA GUÍA
(Para elaborar por el Docente)
COMPETENCIAS DISCIPLINARES.
Implementar funcionalidades avanzadas en una página web mediante el uso de librerías de
última generación
.COMPETENCIAS INVESTIGATIVAS.
- Consulta bibliográfica en bases de datos digitales
- Análisis de casos de estudio aplicables
- Búsqueda de información sobre nuevos avances en interoperabilidad
- Planteamiento de preguntas y/o problemas de investigación
MARCO TEORICO.
“JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del
estándar ECMAScript. Se define como orientado a objetos,3 basado en prototipos, imperativo, débilmente
tipado y dinámico.
Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de
un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas4 aunque existe una
forma de JavaScript del lado del servidor(Server-side JavaScript o SSJS). Su uso en aplicaciones externas a
la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también
significativo.
Desde el 2012, todos los navegadores modernos soportan completamente ECMAScript 5.1, una versión de
javascript. Los navegadores más antiguos soportan por lo menos ECMAScript 3. La sexta edición se liberó en
julio del 2015.5
JavaScript se diseñó con una sintaxis similar a C, aunque adopta nombres y convenciones del lenguaje de
programación Java. Sin embargo, Java y JavaScript tienen semánticas y propósitos diferentes.
Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para
interactuar con una página web se provee al lenguaje JavaScript de una implementación del  Document Object
Model (DOM).
Tradicionalmente se venía utilizando en páginas web HTML para realizar operaciones y únicamente en el
marco de la aplicación cliente, sin acceso a funciones del servidor. Actualmente es ampliamente utilizado para
enviar y recibir información del servidor junto con ayuda de otras tecnologías como AJAX. JavaScript se
interpreta en el agente de usuario al mismo tiempo que las sentencias van descargándose junto con el
código HTML.
 FORMATO PARA PRACTICAS DE LABORATORIO

PROCESO: GESTIÓN DE RECURSOS, INFRAESTRUCTURA Y

LABORATORIOS

LA-FM-007 Versión: 5 Fecha: 28/11/2019 Página 2 de 9

Desde el lanzamiento en junio de 1997 del estándar ECMAScript 1, han existido las versiones 2, 3 y 5, que es
la más usada actualmente (la 4 se abandonó). En junio de 2015 se cerró y publicó la versión ECMAScript 6.”,
(Cespedes Yela, G. A., & Caicedo Mosquera, D. F. (2015). Sistema de información web para el repositorio de
los documentos generados en el proceso de auto evaluación y el plan de mejoramiento de los programas.)

CONSULTA PREVIA.
 Repaso de HTML y HTML5.
 GIT.
PALABRAS CLAVE
 JAVASCRIPT
METODOLOGÍA.
 El taller es individual.
 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.
El estudiante puede formular inquietudes al profesor durante el desarrollo de la práctica.

MATERIALES, EQUIPOS Y REACTIVOS A UTILIZAR

Materiales y Equipos Reactivos Materiales Estudiante
1 Computador por estudiante Programas de ejemplo
previamente elaborados. Apuntes
de clase. Libros de referencia.
Software instalado: Microsoft
office u power point
Acceso a internet en cada
computador
CLASIFICACION BAJA

El factor de riesgo para este laboratorio está clasificado como BAJO, debido a que la eficacia del conjunto de
las medidas preventivas existentes es alta. 

En otras palabras, el riesgo está controlado 

PRECAUCIONES Y MANEJO DE MATERIALES Y EQUIPOS. CONSULTA DE EQUIPO ESPECIALIZADO.

 El material desarrollado por cada estudiante es de su responsabilidad y debe efectuar las copias o
backups necesarios.
 Los riesgos existen y hacen referencia a que es posible que la información o el trabajo realizado se
pierda por caída del sistema, por lo tanto, se deben realizar copias de seguridad.
 Otro riesgo existente hace referencia a que es posible que los administradores de la sala cierren la
sesión de trabajo. Se requiere entonces de programar copias de seguridad automáticas.
 No consumir alimentos ni bebidas de ningún tipo dentro del laboratorio.
 No entrar al laboratorio bajo el efecto de substancias psicoactivas o alcohólicas.
 No entrar a internet sin autorización del docente
 FORMATO PARA PRACTICAS DE LABORATORIO

PROCESO: GESTIÓN DE RECURSOS, INFRAESTRUCTURA Y

LABORATORIOS

LA-FM-007 Versión: 5 Fecha: 28/11/2019 Página 3 de 9

 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
 El material desarrollado por cada estudiante es de su responsabilidad y debe efectuar las copias o
backups necesarios.
 No des configurar las herramientas de programación ni los sistemas operativos.
 Observar todas las normas de comportamiento en los laboratorios de sistemas.

PROCEDIMIENTO A UTILIZAR.

Procedimiento para la sesión 1.

- NetBeans
Utilizar un editor de HTML para diseñar un lenguaje para describir cuestionarios.- Visual Studio
- XML Editor

Crear un documento HTML Y JS para definir un cuestionario

Utilizar el lenguaje XSL para definir una transformación hacia HTML sobre el documento XML Creado.

La transformación funciona?
Revise la documentación sobre transformaciones XSL:FO

Solución del profesor

Diseñe una transformación XSL:FO para el cuestionario XML.

Procedimiento para la sesión 2.

 FORMATO PARA PRACTICAS DE LABORATORIO

PROCESO: GESTIÓN DE RECURSOS, INFRAESTRUCTURA Y

LABORATORIOS

LA-FM-007 Versión: 5 Fecha: 28/11/2019 Página 4 de 9

Subir archivos a hosting por Sustentar y presentar

FTP informe

BIBLIOGRAFÍA RECOMENDADA.

 Media Active, (2015) Aprender javascript avanzado con 100 ejercicios prácticos. Alfaomega(Catálogo
biblioteca UMB)

Quijado, J. (2010) Domine JavaScript. Ra-Ma. (Catálogo biblioteca UMB)

 Gross, C. (2006) Ajax patterns and best practices. Apress (Catálogo biblioteca UMB)

 Cibelli, C. (2012) PHP programación web avanzada para profesionales. Alfahomega (Catálogo
biblioteca UMB)

 Frentzen, J. (1999) Superutilidades para javascript. Osborne - McGraw-Hill (Catálogo biblioteca UMB

ELABORÓ REVISÓ APROBÓ

Grupo o Programa de: Ingeniería Director de Programa de: Jefatura de Laboratorios

de Software ______________________.
_____________________. Carlos Sánchez
Fecha:
Fecha: Diciembre 2020 Fecha: Diciembre 2020

INFORME DE LABORATORIO
(Para elaborar por el Estudiante)
 FORMATO PARA PRACTICAS DE LABORATORIO

PROCESO: GESTIÓN DE RECURSOS, INFRAESTRUCTURA Y

LABORATORIOS

LA-FM-007 Versión: 5 Fecha: 28/11/2019 Página 5 de 9

ESTUDIANTES: ASIGNATURA:


 GRUPO:


 NOTA:



CARRERA: TRABAJO GRUPAL: TRABAJO INDIVIDUAL:

FORMULE TRES HABILIDADES QUE DESEE ADQUIRIR O DESARROLLAR A TRAVÉS DE LA PRÁCTICA DE

LABORATORIO. El estudiante formulará desde la revisión de la guía las habilidades que desarrollará a través de la
práctica





Elabore un Mapa conceptual del tema a tratar en la Práctica de Laboratorio. El estudiante construirá un mapa
conceptual a partir de las palabras claves suministradas por el docente

RESULTADOS. Incluir tablas, diagramas en la que los estudiantes puedan ir consignando los datos y observaciones
obtenidos en la práctica y generar un análisis de los mismos mediante comparación con la literatura actualizada
disponible.
Como se integran JSON, Ajax y JavaScript:   
    
 FORMATO PARA PRACTICAS DE LABORATORIO

PROCESO: GESTIÓN DE RECURSOS, INFRAESTRUCTURA Y

LABORATORIOS

LA-FM-007 Versión: 5 Fecha: 28/11/2019 Página 6 de 9

 
 
 

 
 
Algoritmo de reloj digital con JavaScript:               

    

Algoritmo Validación de datos de usuario:   

 
    
 
 

CUESTIONARIO.

1. Elabore un aplicativo HTML5 que llame a un archivo .JavaScript que permita crear y eliminar campos de una
Una tabla mediante el uso de eventos y funciones. La estructura de la tabla debe ser:

+ AGREGAR
Código Nombre Apellido Notas Edad X ELIMINAR

2. Elabore un método para consultar la información de un estudiante partiendo de su código y debe mostrar
un historial de notas

3. Subir el ejercicio a su hosting gratuito, compartir por medio de git y enviar el link en la tarea de Aulanet.

PREGUNTAS.

1. AJAX es una técnica que permite, mediante programas escritos en Javascript, que un servidor y un
navegador intercambien información, en un lenguaje, de forma asíncrona. ¿Qué formatos de
intercambio podría utilizar?
a. texto, HTML, JSON y XML
b. PDF, XML, DOC, PPTX
 FORMATO PARA PRACTICAS DE LABORATORIO

PROCESO: GESTIÓN DE RECURSOS, INFRAESTRUCTURA Y

LABORATORIOS

LA-FM-007 Versión: 5 Fecha: 28/11/2019 Página 7 de 9

c. JPG, BMP, GIT, TIFF

d. zip, tar,bzip2,rzip
2. Una sesión es una serie de comunicaciones entre un cliente y un servidor en la que se realiza un
intercambio de información. ¿Cuándo se eliminan los datos de una sesión en HTML5?
a. Los navegadores eliminarán los datos de almacenamiento de la sesión inmediatamente después
de que finalice la sesión.
b. Cuando se alcanza un tiempo de inactividad que es previamente establecido, en este caso la
sesión es automáticamente eliminada.
c. Se ha cerrado o reiniciado el servidor.
d. Si desea borrar todas las configuraciones, debe llamar al método localStorage.clear ().
3. HTML5 incorpora elementos nuevos para gestión de recursos multimedia, para utilizarlos se debe
conocer sus características y posibilidades. ¿Cuál de las siguientes afirmaciones es verdadera sobre la
etiqueta "video" en HTML5?
a.  Se admiten archivos MPEG4 con códec de video H.264 y códec de audio AAC.
b.  Puede usar la etiqueta <source> para especificar el medio junto con el tipo de medio y muchos
otros atributos.
c. Un elemento de video permite múltiples elementos de origen y el navegador utilizará el primer
formato reconocido.
d. Todas las anteriores son válidas

CAUSAS DE ERROR Y ACCIONES PARA OBTENER MEJORES RESULTADOS. El estudioso describirá las
variables que a su consideración dificultaron el alcance de las habilidades propuestas

CONCLUSIONES. El estudiante consignará en este espacio la síntesis de los logros alcanzados a través del
desarrollo de la práctica de Laboratorio.

APLICACIÓN PROFESIONAL DE LA PRÁCTICA REALIZADA. Exponga en este espacio la relación de las

competencias y habilidades desarrolladas con el ejercicio de su futura profesión.

BIBLIOGRAFIA UTILIZADA. Utilizando las normas APA

 FORMATO PARA PRACTICAS DE LABORATORIO

PROCESO: GESTIÓN DE RECURSOS, INFRAESTRUCTURA Y

LABORATORIOS

LA-FM-007 Versión: 5 Fecha: 28/11/2019 Página 8 de 9

ANEXOS. En este espacio presente los anexos si la práctica lo requiere

RUBRICA DE EVALUACIÓN

RUBRICA DE EVALUACIÓN INGENIERÍA WEB II

INDIVIDUAL CRITERIOS DE EVALUACIÓN NOTA
Estudiante 0 – 1,5 1,6 - 2,9 3,0 - 3,9 4,0 - 4,5 4,6 - 5,0
1.
Habilidad

2.
3.
4.
5.
6.
GRUPAL % 0 – 1,5 1,6 - 2,9 3,0 - 3,9 4,0 - 4,5 4,6 - 5,0 NOTA
competencia
a hacer)Procedimental

No son Son Son Son

Son
precisos o organizados organizados organizados,
Organiza los resultados y algunas y ayudan a precisos y
no ayudan precisos y
35%

obtenidos a través del uso de veces la ayudan a la

a la ayudan a la
dibujos, gráficas y tablas comprensió
comprensió ayudan a la entendimie entendimien
n del tema
n del tema comprensió nto del to del tema
n del tema tema
Cognitiva
(aprender

Estableció
No Estableció la
afectivaSocio (aprender a conocer)

Establece la importancia de la
estableció importancia
utilizar javascript como importancia
25%

la y se reflejó
lenguaje de programación pero no se
importancia en la
orientado al cliente reflejó en la
práctica
práctica
15%

Desarrolla habilidades de No hace Parcialment Hace parte Participa en Participa

trabajo en equipo, parte del e hace del trabajo el trabajo activamente
priorizando la toma de trabajo parte del propuesto propuesto el trabajo
decisiones y la escucha de propuesto trabajo por el por el propuesto
 FORMATO PARA PRACTICAS DE LABORATORIO

PROCESO: GESTIÓN DE RECURSOS, INFRAESTRUCTURA Y

LABORATORIOS

LA-FM-007 Versión: 5 Fecha: 28/11/2019 Página 9 de 9

(aprender a convivir)Comunicativa ser)(aprender a

por el
equipo de equipo de
propuesto equipo de
por el acuerdo a manera
diferentes propuestas por el manera
equipo parámetros responsable
equipo responsable
básicos y puntual
y puntual

Construye
el informe
Construye Construye
Practica el uso de lenguaje No de Construye
el informe de manera
escrito como medio de construye laboratorio de buena
de sobresalient
15%

identificación y el informe de acuerdo manera el

laboratorio e el informe
diferenciación en la de a los informe de
de manera de
elaboración de informes laboratorio requerimie laboratorio
incompleta laboratorio
ntos
mínimos

Las fuentes Las fuentes Las fuentes Las fuentes Las fuentes
Realiza la búsqueda
de de de de de
bibliográfica en fuentes
Investigativa

información información información información información

confiables que permitan dar
son pocas o son son son son variadas
10%

respuesta a las situaciones

ausentes. Si restringidas relevantes variadas e y
problema evidenciados en la
las usa son o con poca e informativa pertinentes.
consulta previa y en el
poco diversidad. informativa s. Además
informe de laboratorio
confiables y Además no s. Presenta Adicionalm están
no están los ente son actualizadas