ESCUELA PROFESIONAL DE INGENIERIA DE SISTEMAS
GUIA DE LABORATORIO Nro. 02
ESCUELA : INGENIERÍA DE SISTEMAS
ASIGNATURA : INGENIERIA WEB
CICLO : VI
TURNO : Noche
SEMESTRE : 2020 -2
DOCENTE : Mg. DANY MONTOYA NEGRILLO.
I. TEMA: Formularios.
II. OBJETIVOS
Al finalizar la práctica, el estudiante estará en capacidad de construir formularios
básicos y complejos, Formularios y sus elementos. Arrays de recepción de datos,
Cookies, Sesiones, usando las distintas etiquetas de HTML necesarias.
III. METODOLOGIA
El docente plantea un conjunto de ejercicios y los estudiantes los resuelven
realizando programas en HTML, mientras el docente va supervisando la correcta
resolución de los mismos, realizando la retroalimentación adecuada .
IV. RECURSOS
1. Equipo computacional con conexión a internet
2. Lenguaje de Programación HTML
3. Utilizar la plataforma Blackboard para entregar el laboratorio
4. Utilizar la plataforma de Zoom para la Sustentación del Laboratorio
V. DESARROLLO DE ACTIVIDADES:
1.1 Descripción:
La guía de laboratorio busca afianzar de manera práctica los conocimientos
adquiridos por el estudiante durante la sesión el desarrollo de la teoría por parte
del docente.
1.2 Proceso
Estimado participante, en la sesión Nº 02, se procede a programar usando
lenguaje HTML5. Con inclusión de código Bootstrap para realizar páginas web
responsivas, además de las pruebas de usabilidad usando plugins desde el
navegador Web
Verifiquemos este proceso para lo cual es preciso resolver los siguientes
ejercicios.
Guía de Laboratorio N° 02
1) Desarrolle encabezamientos HTML, donde los Títulos HTML se definen
con las etiquetas <h1> a <h6> y grabarlo como ejemplo01.html.
2) Desarrolle en HTML lo siguiente:
3) Desarrolle en HTML lo siguiente con hipervínculos:
PANTALLA DE INICIO
PANTALLA DEL VINCULO ESPECIES
LOS DEMAS HIPERVINCULOS SE LO DEJO A SU ELECCION.
4) Confeccionar una página que muestre la definición de las tres palabras de abajo. Aplicar
el elemento strong a cada palabra previo a su definición. Luego agregar el elemento
"em" a una o a un conjunto de palabras dentro de la definición.
PHP: es un lenguaje de programación usado generalmente para la creación
de contenido para sitios web. PHP es un acrónimo recurrente que
significa "PHP Hypertext Pre-processor"
JSP: en el campo de la Informática, es una tecnología para crear
aplicaciones web. Es un desarrollo de la compañía Sun Microsystems, y su
funcionamiento se basa en scripts, que utilizan una variante del
lenguaje java.
ASP.Net: es una tecnología del lado servidor de Microsoft para páginas web
generadas dinámicamente, que ha sido comercializada como un anexo
a Internet Information Server (IIS).
5) Confeccionar una página Web que contenga hipervínculos a diferentes periódicos o
Revistas del Perú, desde la imagen correspondiente al periódico o Revista.
6) Confeccione una lista ordenada con los tres países con mayor población del planeta.
Disponer un título de segundo nivel <H2> y debajo de la lista la suma de habitantes de
esos tres países en Negrita (solo la suma).
Ejemplo:
7) Mostrar el diseño de la tabla
8) Ejercicio N° 02: Codificar en HTML:
Ejemplos de Formularios
Juego de botones direccionados a páginas LOCALES.
Esto sólo funciona abriendo la página como file:/// no como servicio http://.
Indice Nota s Cómo funciona?
<TABLE>
<TR>
<TD>
<FORM METHOD="GET" ACTION="indice.htm">
<INPUT TYPE="SUBMIT" VALUE="Indice">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="notas.htm">
<INPUT TYPE="SUBMIT" VALUE="Notas">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="como.htm">
<INPUT TYPE="SUBMIT" VALUE="Cómo funciona?">
</FORM>
</TD>
</TR>
</TABLE>
Juego de botones direccionados a páginas REMOTAS.
Puede funcionar abriendo la página como servicio http:// o como file:///. pero
deberá utilizarse METHOD=GET en lugar de METHOD=POST.
Indice Nota s Cómo funciona?
<TABLE>
<TR>
<TD>
<FORM METHOD="GET" ACTION="http://www.uv.es/jac/guia/indice.htm">
<INPUT TYPE="SUBMIT" VALUE="Indice">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="http://www.uv.es/jac/guia/notas.htm">
<INPUT TYPE="SUBMIT" VALUE="Notas">
</FORM>
</TD>
<TD>
<FORM METHOD="GET" ACTION="http://www.uv.es/jac/guia/como.htm">
<INPUT TYPE="SUBMIT" VALUE="Cómo funciona?">
</FORM>
</TD>
</TR>
</TABLE>
1 campo vacío. Longitud no limitada.
1 campo vacío. Longitud limitada a 10
Procesar Inicializar
<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT NAME="campo2" SIZE=10 MAXLENGTH=10>
<P>
<INPUT TYPE="submit" VALUE="Procesar">
<INPUT TYPE="reset" VALUE="Inicializar"></FORM>
1 campo vacío. Longitud no limitada.
1 campo con contenido visible.
1 campo con contenido oculto
TEXTO VISIBLE ************
Procesar Inicializar
<form method="POST" action="http://miservidor/cgi-bin/test2-cgi">
<input name="campo1">
<input name="campo2" VALUE="TEXTO VISIBLE">
<input type="password" name="campo3" VALUE="TEXTO OCULTO">
<P>
<input type="submit" value="Procesar">
<input type="reset" value="Inicializar"></form>
1 campo vacío. Longitud sin limitar.
1 campo vacío. Longitud limitada a 10.
2 botones de selección.
Clase A Clase B
Procesar Inicializar
<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT NAME="campo2" SIZE=10 MAXLENGTH=10>
<P>
Clase A <INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B">
<P>
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
</form>
1 campo vacío. Longitud sin limitar.
1 campo vacio. Longitud limitada a 10.
2 botones selección
2 casillas selección
Clase A Clase B
Tipo 1 Tipo 2
Procesar Inicializar
<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">
<INPUT NAME="campo1">
<INPUT NAME="campo2" SIZE=10 MAXLENGTH=10>
<P>
Clase A <INPUT TYPE="RADIO" NAME="clase" VALUE="A">
Clase B <INPUT TYPE="RADIO" NAME="clase" VALUE="B">
<P>
Tipo 1 <INPUT TYPE="CHECKBOX" NAME="tipo" VALUE="1">
Tipo 2 <INPUT TYPE="CHECKBOX" NAME="tipo" VALUE="2">
<P>
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
</form>
1 lista desplegable de 3 valores. 1 visible
Procesar Inicializar
<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
<SELECT NAME="lista1">
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
</SELECT>
</FORM>
1 lista desplegable de 5 valores. 3 visibles.
Valor 1
Valor 2
Valor 3
Procesar Inicializar
<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">
<SELECT NAME="lista1" SIZE=3>
<OPTION>Valor 1
<OPTION>Valor 2
<OPTION>Valor 3
<OPTION>Valor 4
<OPTION>Valor 5
</SELECT>
<P>
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
</FORM>
1 Ventana de texto de 5x40
Procesar Inicializar
<FORM METHOD="POST" ACTION="http://miservidor/cgi-bin/test2-cgi">
<TEXTAREA NAME="texto1" ROWS=5 COLS=40 ></TEXTAREA>
<P>
<INPUT TYPE="SUBMIT" VALUE="Procesar">
<INPUT TYPE="RESET" VALUE="Inicializar">
</FORM>
EJERCIOS PROPUESTOS
Verifiquemos este proceso para lo cual es preciso resolver el siguiente caso
propuesto.
EJERCICIO 01:
Utilizar el framework, boostrap y jquery para realizar formularios repósives y
asíncronos obteniendo la forma siguiente
Consigna:
Crear un nuevo controlador llamado perfil, el cual representara los modulos
principales del sistema de información web.
En la vista de inicio con el uso de boostrap de le la forma visual:
o .
Construya un formulario responsive de la forma siguiente
Use etiquetas y formularios HTML5 y bootstrap
Use formularios verticales , use Bootstrap Input Groups: al momento de ingresar
un DNI
Para el manejo de mensajes use: alert alert-success y alert alert-danger.
Construya el controlador Persona que permita la validación de componentes en el
lado servidor: de exact_length, max_length, required , etc
Entregue el archivo en formato digital en la sesión de clase.
VI. RESULTADOS
El alumno presenta una página Web utilizando Formularios y sus elementos. Arrays
de recepción de datos, Cookies, Sesiones y las principales etiquetas HTML
VII. RÚBRICA DE LA EVALAUCIÓN (en relación a la competencia del EC)
DESCRIPCTORES.
CRITERIO
4-5 2-3 1 0 Puntaje
La entrega de los
La entrega de No posee orden
ejercicios dados es
Orden en la entrega de los ejercicios en la entrega de
incompleta pero los
PRESENTACIÓN los ejercicios dados. dados es los ejercicios
que presenta posee
incompleta. dados.
orden.
Realiza identación de Realiza
ORGANIZACIÓN Código fuente y identación Código fuente No presenta
DE INFORMACIÓN: comentarios parcial de desordenado código fuentes.
CÓDIGO FUENTE explicativos código fuente
Programa
No presenta
METODOLOGIA DE Programa de acuerdo al parcialmente al Programa sin respetar
metodología de
PROGRAMACIÓN código solicitado. código fuente Formularios HTML
programación
solicitado
Algunos No es cuidadoso
Uso ordenado y El cuidado es mínimo
USO DE LOS materiales son y no utiliza de
correcto de los equipos y utiliza de manera
EQUIPOS DE utilizados manera
y materiales del adecuada los
COMPUTO apropiadamente adecuada los
laboratorio materiales
y otros no materiales
TOTAL
