FAVA - Formación en Ambientes Virtuales de Aprendizaje

Laboratorio de diseño web usando html, CSS Y JAVASCRIPT

ESTRUCTURA DE CONTENIDOS
Pág.
Introducción .................................................................................................................... 3

1. Objetivos. ..................................................................................................................... 4

2. Consideraciones. ......................................................................................................... 4

3. Procedimiento .............................................................................................................. 4

4. Ejercicios. .................................................................................................................... 5

5. Evidencias. ................................................................................................................ 10

Glosario.........................................................................................................................11

Bibliografía .................................................................................................................... 12

Control del documento .................................................................................................. 13

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 2

 Laboratorio de diseño web usando html, CSS Y JAVASCRIPT

Introducción

En el presente laboratorio se diseñarán dos sitios web

para igual número de empresas u organizaciones.
Estos ejercicios reforzarán los conceptos de diseño
web adquiridos en el objeto de aprendizaje Introducción
al diseño web.

Con el diseño de sitios web el Analista y Desarrollador

de Sistemas de Información está preparado para sacar
el máximo provecho a las plataformas y herramientas
de diseño más modernas y utilizadas en la industria
del desarrollo de software actual.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 3

 Laboratorio de diseño web usando html, CSS Y JAVASCRIPT

1. Objetivos

• Comprender la estructura básica de Html, Css y Javascript.

• Realizar la definición de estructura y manejos del DOM.
• Incluir estilos CSS en la página web.
• Manipular el DOM, implementar funciones, eventos, métodos y elementos.

2. Consideraciones

Ítem Descripción
Soporte Teórico. Para el desarrollo de este laboratorio se
recomienda la lectura, exploración y análisis
del objeto de aprendizaje: introducción al
diseño web.
Productos requeridos. Actividades de afianzamiento:
• estructuras HTML
• estilos css
• Funcionalidades JavaScript

Herramientas SW. El IDE (Ambiente de Desarrollo

Integrado) o editor de texto a elección
del aprendiz:
• Visual studio code
• Sublime text

3. Procedimiento

• Leer completamente el enunciado de cada ejercicio

hasta comprender con claridad lo que se está pidiendo.

• Revisar el diseño dado e identificar los conceptos de

HTML ,CSS y JAVASCRIPT que se debe aplicar.

• Realizar el diseño de cada ejercicio propuesto y realizar

las pruebas requeridas para asegurar su correcto
funcionamiento.

• Guardar cada ejercicio en una carpeta independiente

con todos los archivos requeridos para su ejecución.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 4

 Laboratorio de diseño web usando html, CSS Y JAVASCRIPT

4. Ejercicios

Implemente lo aprendido hasta el momento, estructuras básicas, arreglos, objetos, funciones,

manipulación del DOM y diseñe la siguiente calculadora, utilice html, css y agregarle funcionalidad con
javascript

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 5

 Laboratorio de diseño web usando html, CSS Y JAVASCRIPT

Implemente lo aprendido en HTML, css y JavaScript. Y diseñe una calculadora de índice de masa
corporal

Modelo propuesto:

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 6

 Laboratorio de diseño web usando html, CSS Y JAVASCRIPT

El Blackjack, también llamado veintiuno, es un juego de cartas, propio de los

casinos con una o más barajas inglesas de 52 cartas sin los comodines,
que consiste en sumar un valor lo más próximo a 21 pero sin pasarse.
Implemente lo aprendido y realiza diseño y funcionalidad del juego.

El juego debe contener botones con las opciones que permitan: jugar juego
nuevo, pedir cartas, detener el juego y turno de la computadora. Anexo archivo
con las cartas a utilizar

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 7

 Laboratorio de diseño web usando html, CSS Y JAVASCRIPT

Expresiones Regulares para validar formularios usando JavaScript.

Validar un formulario antes de enviarlo es muy importante. Con esto te evitas de estar lidiando con información
incorrecta en el back. Afortunadamente JavaScript permite hacer estas validaciones usando expresiones
regulares.
Las expresiones regulares son un conjunto de reglas que permiten validar que una cadena de texto cumpla con
ciertos criterios. Éstas validaciones se pueden aplicar a correos, contraseñas, direcciones IPs, etc.

Ejercicio: el programa tecnólogo de análisis y desarrollo de software del SENA centro industrial y aviación
requiere poder registrar los aprendices del programa en una base de datos para la creación y asignación de
correos institucionales se requiere almacenar:

Identificación -> el formulario solo debe permitir el ingreso de números

Primer nombre -> el formulario solo debe permitir el ingreso de caracteres {a … z} en minúscula

Segundo nombre -> el formulario solo debe permitir el ingreso de caracteres {a … z} en minúscula

Primer apellido -> el formulario solo debe permitir el ingreso de caracteres {a … z} en minúscula

Segundo apellido -> el formulario solo debe permitir el ingreso de caracteres {a … z} en minúscula

Usuario -> tiene que ser de 4 a 16 dígitos y solo debe contener números y letras

Contraseña -> debe contener mayúsculas, minúsculas, números y mínimo un carácter especial

Verificación de contraseña-> no debe permitir el ingreso de contraseña diferente a la primera ingresada

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 8

 Laboratorio de diseño web usando html

2. Evidencias

Carpeta comprimida con subcarpetas (una subcarpeta por cada ejercicio) con los
respectivos archivos .html, .css, e imágenes para su ejecución.

NOTA: el laboratorio no es calificable hace parte de una actividad complementaria

necesaria para construir la evidencia de aprendizaje, lo cual implica que para desarrollar
la evidencia es necesario apropiar el conocimiento de este laboratorio.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 16

 Laboratorio de diseño web usando html

GLOSARIO
Etiqueta o Tag: elemento estructural para la construcción de páginas web.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 17

 Laboratorio de diseño web usando html

BIBLIOGRAFÍA
W3Schools.com (2017). Html5 Tutorial. Recuperado de http://www.w3schools.
com/html/default.asp

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 18

 Laboratorio de diseño web usando html

CONTROLDELDOCUMENTO

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 19