Unidad I Unidad II Unidad III

DISEÑO WEB
JS – JavaScript
• Jquery
• LocalStorage
SESIÓN

18-19
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe
www.usat.edu.pe
www.usat.edu.pe
 Propósito de la sesión
Objetivo de la sesión:
✓ Utilizar librerías de programación en JavaScript para el manejo de datos
y estructuras HTML

Contribuye al logro

Resultado de Aprendizaje de la Unidad 02:

R2: Diseña páginas web con herramientas de maquetado avanzado.

Contribuye al logro

Competencia del perfil de egreso : La asignatura DISEÑO WEB, que corresponde al área de
estudios de Especialidad, contribuye al logro del perfil de egreso, específicamente a la(s)
competencia(s):
- CE3: DESARROLLO DE SOFTWARE
- CG4: COMUNICACIÓN ORAL Y ESCRITA
2 www.usat.edu.pe
 Temas de exposición
jQuery

Descarga del framework

Como utilizar jQuery

Ejemplos Jquery

Objetos Storage

Ejemplos LocalStorage
3 www.usat.edu.pe
 Jquery

• jQuery es un framework Javascript. Sirve

como base para la programación avanzada
de aplicaciones, que aporta una serie de
funciones o códigos para realizar tareas
habituales. Por decirlo de otra manera, el
framework jQuery presenta una serie de
librerías de código que contienen procesos
o rutinas ya listos para usar.

4 www.usat.edu.pe
 Descarga
• Dan dos posibilidades para descargar, una que le llaman PRODUCTION,
que es la adecuada para páginas web en producción, puesto que está
minimizada y ocupa menos espacio, con lo que la carga de nuestro sitio
será más rápida.
• La otra posibilidad es descargar la versión que llaman DEVELPOMENT,
que está con el código sin comprimir, con lo que ocupa más espacio,
pero se podrá leer la implementación de las funciones del framework,
que puede ser interesante en etapa de desarrollo, porque podremos
bucear en el código de jQuery por si tenemos que entender algún asunto
del trabajo con el framework.
https://jquery.com/download/
5 www.usat.edu.pe
 Uso de CDN

• CDN significa Content Delivery Network, que se traduciría como red de

entrega de contenido y no es otra cosa que un servicio que nos permite
incluir las librerías de código de jQuery desde los servidores de algunas
importantes empresas. Si no queremos descargar el framework,
podemos utilizarlo en línea haciendo uso de un CDN

https://code.jquery.com/

Ejemplo CDN min versión 3.6.0

• https://code.jquery.com/jquery-3.6.0.min.js

6 www.usat.edu.pe
 Como usar JQuery en mis páginas

• El primer requisito para usar JQuery es agregar la librería, que podemos

cargar desde su principal repositorio o desde otros CDN de internet.
• A continuación debemos de insertar dentro de un elemento SCRIPT, las
instrucciones de la siguiente forma:
– <script>
$(function () { • Recuerda que puedes crear un archivo
// Instrucciones de JQuery
externo y enlazarlo. En el archivo
});
</script> externo ya no usas la etiqueta SCRIPT

7 www.usat.edu.pe
 Una descripción del uso de JQuery
• <script>
$("selector inicio").evento(function () {
$("selector destino").funcion o método(atributo)
});
</script>

8 www.usat.edu.pe
 Ejercicio

9 www.usat.edu.pe
 Ejercicio 02

10 www.usat.edu.pe
 Trabajo Grupal
• Revisar en internet y probar alguna utilidad de jQuery en diversas
situaciones de una página web:
Grupo 1
Grupo 2
• Eventos Grupo 3
relacionados • Eventos Grupo 4
al mouse relacionados • Eventos Grupo 5
a formularios relacionados • Eventos Grupo 6
al teclado relacionados • Objeto
a manejo de Evento
estilos • Eventos
relacionados
al navegador

Cada grupo sube en el foro respectivo los archivos

utilizados para su ejemplo (más de un archivo comprimir
en uno solo)
12 www.usat.edu.pe
 Trabajo de aplicación

• Presentación de Mockup de su proyecto.

• La presentación consiste en presentar el diseño de su sitio web ya
utilizando una aproximación más real del producto final
• Puede realizar cambios, sin salirse del contexto del wireframe inicial
• Puede utilizar otras herramientas para realizar el prototipo como por
ejemplo Adobe XD, Moqups.com, etc.
• La presentación de acuerdo a fecha establecida en el silabo.

Ejemplo (Mockup usatvirtual)

13 www.usat.edu.pe
 Rúbrica de evaluación

14 www.usat.edu.pe
 Objeto Storage

• El objeto Storage (API de almacenamiento web) nos permite almacenar

datos de manera local en el navegador y sin necesidad de realizar alguna
conexión a una base de datos. En este artículo te mostraré cómo
utilizarlo mediante JavaScript.

15 www.usat.edu.pe
 localStorage y sessionStorage: ¿qué son?

• localStorage y sessionStorage son propiedades que acceden al objeto

Storage y tienen la función de almacenar datos de manera local, la
diferencia entre éstas dos es que localStorage almacena la información
de forma indefinida o hasta que se decida limpiar los datos del
navegador y sessionStorage almacena información mientras la pestaña
donde se esté utilizando siga abierta, una vez cerrada, la información se
elimina.

16 www.usat.edu.pe
 Storage vs Cookies

• La capacidad es de 5Mb mientras que la de las cookies era de tan solo

4Kb.
• La información no es incluida en cada petición al servidor como sucede
con las cookies, sino que solo se obtiene cuando se quiere usar.
• La información es almacenada en pares clave-valor por lo que se puede
usar como si se tratase de variables.
• Una página web únicamente puede acceder a la información que ha
almacenado ella por lo que es más seguro.

17 www.usat.edu.pe
 Instrucciones básicas para el manejo de los objetos
Storage (I)
• Guardar datos

18 www.usat.edu.pe
 Instrucciones básicas para el manejo de los objetos
Storage (II)
• Recuperar datos

19 www.usat.edu.pe
 Instrucciones básicas para el manejo de los objetos
Storage (III)
• Eliminar Datos

• Limpiar todo el storage

20 www.usat.edu.pe
 Ejercicio

• Realizar una aplicación que guarde en localStorage un usuario y

contraseña y luego pueda mostrar la información guardada

21 www.usat.edu.pe
 Conclusiones

• El uso de librerías y frameworks agilizan el proceso de

programación de javascript.
• Existen varios frameworks para javascript del cual uno de los
mas conocidos es jQuery.
• Podemos almacenar datos de manera local y utilizarlos para
procesos posteriores.

23 www.usat.edu.pe
 Próxima sesión

• Casos de aplicación

24 www.usat.edu.pe
 Referencias
[1] NorfiPC, «Como escribir con JavaScript texto y elementos en páginas web,» 29
mayo 2020. [En línea]. Disponible: https://norfipc.com/inf/javascript-como-escribir-
texto-elementos-paginas-web.html. [Último acceso: 9 junio 2020].
[2] P. Ribes, Manual JavaScript, Madrid: CEP S.L., 2011.
[3] A. Mora, «¿Qué es y cómo utilizar localStorage y sessionStorage?,» 27
diciembre 2018. [En línea]. Disponible: https://ed.team/blog/que-es-y-como-utilizar-
localstorage-y-sessionstorage. [Último acceso: 15 junio 2020].
[4] norfipc.com, «JQuery, ejemplos prácticos para usar en páginas web,» s.f.. [En
línea]. Disponible: https://norfipc.com/codigos/jquery-ejemplos-practicos-usar-
paginas-web.php. [Último acceso: 15 junio 2020].

25 www.usat.edu.pe
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe

http://www.facebook.com/usat.peru

https://twitter.com/usatenlinea

https://www.youtube.com/user/tvusat

https://plus.google.com/+usateduperu

www.usat.edu.pe