VICERRECTORADO DOCENTE	Código: GUIA-PRL-001
CONSEJO ACADÉMICO	Aprobación: 2016/04/06
Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación

	PRÁCTICA DE LABORATORIO

| |

CARRERA : COMPUTACION	ASIGNATURA : HIPERMEDIAL
NRO. PRÁCTICA :	3
---	---
OBJETIVO ALCANZADO: • Entender y organizar de una mejor manera los sitios de web en Internet • Diseñar adecuadamente elementos gráficos en sitios web en Internet. • Crear sitios web aplicando estándares actuales.
---
ACTIVIDADES DESARROLLADAS
---
Github
---
1. Diseñar una interfaz en HTML que permita ingresar los siguientes campos en un formulario: cedula, nombres, apellidos, dirección, teléfono, fecha de nacimiento, correo electrónico y contraseña. Luego, usando funciones de JavaScript se pide validar que todos los campos han sido ingresados, además; que los valores ingresados en cada campo del formulario sean correctos teniendo en cuenta las siguientes condiciones: a. Se debe validar qué, en el campo de la cedula, se ingrese sólo números y que la misma sea correcta, en base, al último dígito verificador. function validarCedula(elemento) { if(elemento.value.length > 0 ){ var miAscii = elemento.value.charCodeAt(elemento.value.length-1); console.log(miAscii) if(miAscii >= 48 && miAscii <= 57){ var cad = document.getElementById("cedula").value.trim(); var total = 0; var longitud = cad.length; var longcheck = longitud - 1; if(elemento.value.length == 10){ for(i = 0; i < longcheck; i++){ if (i%2 === 0) { var aux = cad.charAt(i) * 2; if (aux > 9) aux -= 9; total += aux; } else { total += parseInt(cad.charAt(i)); } }

            total = total % 10 ? 10 - total % 10 : 0;
            if (cad.charAt(longitud-1) == total) {                    elemento.style.border = '1px #00ff00 solid';                    return true;                }else{                    elemento.style.border = '2px red solid';                    return false;                }            }else {                elemento.style.border = '2px red solid';                return false;            }        }else {             elemento.value = elemento.value.substring(0, elemento.value.length-1);            elemento.style.border = '2px red solid';             return false;        }     }else{         elemento.style.border = '2px red solid';        return false;    } }

b. Se debe validar qué, en el campo del nombre, ingrese exclusivamente dos nombres y que permita ingresar sólo letras, por ejemplo: "Gabriel Alejandro", es válido; "Gabriel", no es válido. function validarLetras(elemento) { if(elemento.value.length > 0){ var miAscii = elemento.value.charCodeAt(elemento.value.length-1); // console.log(miAscii); if(miAscii >= 65 && miAscii <= 90 || miAscii >= 97 && miAscii <= 122 || miAscii == 32){ var espacio = 0; var mayu = 0; var min = 0; var cad = elemento.value; console.log(cad) if(cad.charAt(0) == " ") espacio=2; if(cad.charCodeAt(0) >= 65 && cad.charCodeAt(0) <= 90) mayu++; if(cad.charCodeAt(1) >= 97 && cad.charCodeAt(1) <= 122) min++; for (i=0; i < cad.length; i++){ if(cad.charAt(i) == " "){ espacio++; if(cad.charCodeAt(i+1) >= 65 && cad.charCodeAt(i+1) <= 90) mayu++; if(cad.charCodeAt(i+2) >= 97 && cad.charCodeAt(i+2) <= 122) min++; } } if( mayu == 2 && espacio == 1 && min > 1) { elemento.style.border = '1px #00ff00 solid'; return true; }else { elemento.style.border = '2px red solid'; return false; } }else { elemento.value = elemento.value.substring(0, elemento.value.length-1); elemento.style.border = '2px red solid'; return false; } }else{ elemento.style.border = '2px red solid'; return false; } }

c. Se debe validar qué, en el campo del apellido, ingrese exclusivamente dos apellidos y que permita ingresar sólo letras, por ejemplo: "León Paredes", es válido; "León", no es válido. Se utiliza la función validarLetras también en este apartado. d. Se debe validar qué, en el campo del teléfono, permita ingresar sólo números y un máximo de 10 caracteres numéricos. function validarTelefono(elemento){ if(elemento.value.length > 0){ var miAscii = elemento.value.charCodeAt(elemento.value.length-1); var tel = elemento.value; if(miAscii >= 48 && miAscii <= 57){ // (/^\d{10}$/.test(tel) if( elemento.value.length == 10 ) { elemento.style.border = '1px #00ff00 solid'; return true; }else { elemento.style.border = '2px red solid'; return false; } }else{ elemento.value = elemento.value.substring(0, elemento.value.length-1); elemento.style.border = '2px red solid'; return false; } }else{ elemento.style.border = '2px red solid'; return false; }}

e. Se debe validar que la fecha de nacimiento ingrese en el formato dd/mm/yyyy. function validarFecha(elemento){ if(elemento.value.length > 0){ var miAscii = elemento.value.charCodeAt(elemento.value.length-1); var fecha = elemento.value; var dia = 0; var mes = 0; var anio = 0; if(miAscii >= 48 && miAscii <= 57 || miAscii == 47){ dia = fecha.substring(1,2); mes = fecha.substring(3,5); anio = fecha.substring(6,10); if(dia<=31 && mes<=12 && anio > 1900 && anio < 2500 && elemento.value.length == 10 && fecha.charAt(2) == "/" && fecha.charAt(5) == "/"){ elemento.style.border = '1px #00ff00 solid'; return true; }else{ elemento.style.border = '2px red solid'; return false; } }else{ elemento.value = elemento.value.substring(0, elemento.value.length-1); elemento.style.border = '2px red solid'; return false; } }else{ elemento.style.border = '2px red solid'; return false; }}

f. Se debe validar qué, en el campo correo electrónico, permita ingresar un correo válido. Se considera un correo válido, cuando comienza por tres o más valores alfanuméricos, luego un @, seguido por la extensión "ups.edu.ec" o "est.ups.edu.ec". function validarCorreo(elemento){ if(elemento.value.length > 0){ var correo = elemento.value; if(correo.substring(correo.length-15,correo.length)=="@est.ups.edu.ec" || correo.substring(correo.length-11,correo.length)=="@ups.edu.ec"){ elemento.style.border = '1px #00ff00 solid'; return true; }else{ elemento.style.border = '2px red solid'; return false; } }else{ elemento.style.border = '2px red solid'; return false; }} g. Se debe validar que la contraseña ingresada tenga mínimo 8 caracteres, además, debe incluir al menos: una letra mayúscula, una letra minúscula y un carácter especial (@, _, $)function validarPasword(elemento) { if(elemento.value.length > 7){ var especial = 0; var mayu = 0; var min = 0; var cad = elemento.value; console.log(cad) for (i=0; i < cad.length; i++){ if(cad.charCodeAt(i) >= 65 && cad.charCodeAt(i) <= 90){ mayu++; }else if(cad.charCodeAt(i) >= 97 && cad.charCodeAt(i) <= 122) { min++; }else{ especial++; } } if( mayu >= 1 && especial >= 1 && min >= 1) { elemento.style.border = '1px #00ff00 solid'; return true; }else { elemento.style.border = '2px red solid'; return false; } }else{ elemento.style.border = '2px red solid'; return false; } }

Indicaciones: • Todas las validaciones antes descritas se deben realizar en tiempo real, es decir, a medida que el usuario escribe en el campo. • Si no cumple las validaciones, se mostrará un mensaje debajo de cada campo con el error y se pintará el campo con un borde rojo que representará que el campo tiene un error. • Todos los campos de entrada dentro del formulario deben de ser de tipo "text". Excepto el campo de tipo password. • Todos los campos deben ser ingresados de manera obligatoria y esto se verificará al momento de "enviar" (submit) la información del formulario hacia una página php. Si se cumple las validaciones, se enviará a una página php, en donde se mostrará únicamente un mensaje que diga "Bienvenido, ¡pasaste las validaciones!".

| | --- | | 2. Diseñar una interfaz en html que tenga tres botones que diga "Anterior", "Iniciar", "Siguiente", y una imagen. Luego, desde javascript se debe controlar para al hacer clic sobre uno de los botones realice una acción relacionada a una galería de imágenes (ver ejemplo, https://gihp4c.blog.ups.edu.ec/) Indicaciones: • Se debe tener, un arreglo con los nombres de diez imágenes, previamente descargadas y almacenadas en una carpeta llamada "images".

• La galería de imágenes debe visualizar exclusivamente 5 imágenes. <aside class="galeria" > <div id="imagen" > <input type="image" name="imagen1" id="imagen1" alt="image"/> <input type="image" name="imagen2" id="imagen2" alt="image"/> <input type="image" name="imagen3" id="imagen3" alt="image" /> <input type="image" name="imagen4" id="imagen4" alt="image"/> <input type="image" name="imagen5" id="imagen5" alt="image"/> </div> <div id="botones"> <input type="button" id="anterior" name="anterior" value="Anterior" onclick="return anteriorImagen(this)"> <input type="button" id="iniciar" name="iniciar" value="Iniciar" onclick="return iniciarImagenes()"> <input type="button" id="siguiente" name="siguiente" value="Siguiente" onclick="return siguienteImagen(this)"> </div> </aside> • Cada vez que se haga clic en el botón iniciar se deben escoger de manera aleatoria cinco imágenes de las diez que se mostrarán en la galería de imágenes. function iniciarImagenes(){ imagen[0] = document.getElementById('imagen1'); imagen[1] = document.getElementById('imagen2'); imagen[2] = document.getElementById('imagen3'); imagen[3] = document.getElementById('imagen4'); imagen[4] = document.getElementById('imagen5'); lista = lista.sort(function() {return Math.random() - 0.5}); imagen[0].src="imagenes/android"+lista[0]+".jpg"; imagen[0].style.width = "100%"; imagen[1].src="imagenes/android"+lista[1]+".jpg"; imagen[1].style.width = "0%"; imagen[2].src="imagenes/android"+lista[2]+".jpg"; imagen[2].style.width = "0%"; imagen[3].src="imagenes/android"+lista[3]+".jpg"; imagen[3].style.width = "0%"; imagen[4].src="imagenes/android"+lista[4]+".jpg"; imagen[4].style.width = "0%"; contador=0;}

• Al hacer clic en el botón siguiente o anterior se debe cambiar la imagen presentada en la galería. function siguienteImagen(elemento) { if (contador==4) { elemento.disabled = true; document.getElementById('anterior').disabled = false; }else { elemento.disabled = false; document.getElementById('anterior').disabled = false; imagenA = imagen[contador]; imagenS = imagen[contador+1]; interval=setInterval(mover,10); contador++; desplazarA=100; desplazarS=0; }} function anteriorImagen(elemento) { if (contador==0) { elemento.disabled = true; document.getElementById('siguiente').disabled = false; }else { elemento.disabled = false; document.getElementById('siguiente').disabled = false; imagenA = imagen[contador]; imagenS = imagen[contador-1]; interval=setInterval(mover,10); contador--; desplazarA=100; desplazarS=0; }}

• El cambio de imágenes debe simular un efecto, para lo cuál, se debe usar las propiedades left o rigth. function mover() { desplazarA-=1; desplazarS+=1; if (desplazarA>=0 && desplazarA<100) { imagenA.style.width = desplazarA+"%"; imagenS.style.width = desplazarS+"%"; document.getElementById('siguiente').disabled = true; document.getElementById('anterior').disabled = true; }else{ document.getElementById('siguiente').disabled = false; document.getElementById('anterior').disabled = false; clearInterval(interval); }}

• Al hacer clic en el botón siguiente y haber llegado a la última imagen disponible, el botón siguiente deberá ser deshabilitado (sólo cuando se ha llegado a la última imagen el botón siguiente deberá estar deshabilitado) • Al hacer clic en el botón anterior y haber llegado a la primera imagen disponible, el botón anterior deberá ser deshabilitado (sólo cuando se ha llegado a la última imagen y cuando se inicie la galería de imágenes el botón anterior deberá estar deshabilitado)
3. Realizar una calculara en HTML usando botones de javascript y una caja de texto para visualizar el resultado. Las operaciones que podrá hacer la calculadora son:: suma, resta, multiplicación y división. Además, se podrá limpiar la memoria de la calculadora. Por último, se debe usar la función eval() para realizar las operaciones aritméticas //calculadora
function init(){ iniciarImagenes(); //variables de la pagina var resultado = document.getElementById('resultado'); var reset = document.getElementById('reset'); var suma = document.getElementById('suma'); var resta = document.getElementById('resta'); var multiplicacion = document.getElementById('multiplicacion'); var division = document.getElementById('division'); var igual = document.getElementById('igual'); var uno = document.getElementById('uno'); var dos = document.getElementById('dos'); var tres = document.getElementById('tres'); var cuatro = document.getElementById('cuatro'); var cinco = document.getElementById('cinco'); var seis = document.getElementById('seis'); var siete = document.getElementById('siete'); var ocho = document.getElementById('ocho'); var nueve = document.getElementById('nueve'); var cero = document.getElementById('cero');

uno.onclick = function(e){        resultado.textContent = resultado.textContent  + "1";    }    dos.onclick = function(e){        resultado.textContent = resultado.textContent  + "2";    }    tres.onclick = function(e){        resultado.textContent = resultado.textContent  + "3";    }    cuatro.onclick = function(e){        resultado.textContent = resultado.textContent  + "4";    }    cinco.onclick = function(e){        resultado.textContent = resultado.textContent  + "5";    }    seis.onclick = function(e){        resultado.textContent = resultado.textContent  + "6";    }    siete.onclick = function(e){        resultado.textContent = resultado.textContent  + "7";    }    ocho.onclick = function(e){        resultado.textContent = resultado.textContent  + "8";    }    nueve.onclick = function(e){        resultado.textContent = resultado.textContent  + "9";    }    cero.onclick = function(e){        resultado.textContent = resultado.textContent  + "0";    }    reset.onclick = function(e){        resetear();    }    suma.onclick = function(e){        resultado.textContent = resultado.textContent  + "+";    }    resta.onclick = function(e){        resultado.textContent = resultado.textContent  + "-";    }    multiplicacion.onclick = function(e){        resultado.textContent = resultado.textContent  + "\*";    }    division.onclick = function(e){        resultado.textContent = resultado.textContent  + "/";    }    igual.onclick = function(e){        resultado.textContent = eval(resultado.textContent);    }}

function resetear(){ resultado.textContent = "";}//fin calculadora | | --- | | RESULTADO(S) OBTENIDO(S):Se obtuvo nuevos conocimientos sobre javascript y es muy eficiente en hatml. | | --- | | CONCLUSIONES :Se logro completar los puntos anteriores y comprender el uso de javascript para realizar ciertas acciones en una página html. | | --- | | RECOMENDACIONES :Revisar el código y las imágenes. | | --- |

_ Nombre de estudiante _ : Roberto Serpa

_ Firma de estudiante _ :

Resolución CS N° 076-04-2016-04-20