EXAMEN PRÁCTICO

TÓPICOS SELECTOS DE INFORMÁTICA III

Desarrollo de una pequeña aplicación web con uso de:

• HTML
• CSS
• JavaScript
• ASP
• Dreamweaver
• SQL Server 2005
 Universidad de Guadalajara
Centro Universitario de los Valles
Departamento de Ciencias Computacionales e Ingenierías
Tópicos Selectos de Informática 3 (Programación para web)

EXAMEN PRÁCTICO
(Desarrollo de una pequeña aplicación web)

INSTRUCCIONES
Lee detenidamente y con cuidado lo que se te pide que realicen en cada sección. Este
examen práctico se conforma de varias partes, entre ellas:

• Estructuración de un sitio web (conjunto de carpetas)

• Configuración de un Sitio web bajo Adobe Dreamweaver CS3
• Maquetación de objetos web mediante CSS
• Configuración y Administración de un sitio web secundario bajo IIS
• Elaboración de formularios y de paginas web
• Validación de objetos de formulario mediante JavaScript
• Diseño, desarrollo y estructuración de una pequeña Base de Datos bajo el
servidor SQL Server 2005 Express Edition
• Programación de scripts de ASP que accederán a las tablas de la base de
datos para:
o Consultar datos
o Verificar datos
o Almacenar datos
o Recuperar datos

El examen se deberá realizar en tiempos extra clase (en el laboratorio de prácticas o

en sus casas).

El examen se realizará de manera individual. Cada quien entregará un solo proyecto.

El examen se revisará en las dos horas de clase presencial en el laboratorio de

cómputo, de las 08:00 a las 10:00 hrs. (No habrá otra fecha ni otro horario)

Ya deben de estar funcionales los proyectos de examen práctico antes de que

llegue el asesor al laboratorio de prácticas.

A quienes se les vaya evaluando, podrán retirarse del laboratorio de prácticas. Para
este proyecto no habrá asesorías pues es examen.
PARTE 1
ESTRUCTURACION DE UN SITIO WEB LOCAL

• Deberás tener una carpeta llamada biblioteca directamente en C:\

• Dentro de esa carpeta deberás tener subcarpetas llamadas:
o pags
o imgs
o js
o css
• En la carpeta pags deberás guardar todas aquellas páginas web que
conformarán tu sitio web (excepto la de index (principal.asp))
• En la carpeta imgs deberás guardar todas las imágenes que se usarán en tu
sitio web
• En la carpeta js deberás guardar todos aquellos archivos .js que tendrán tus
funciones de validaciones de JavaScript
• En la carpeta css deberás guardar todos aquellos estilos en cascada (clases,
pseudo clases, etiquetas, etc) que darán maquetación y presentación a tus
páginas web

PARTE 2
CONFIGURACION DE UN SITIO WEB BAJO ADOBE DREAMWEAVER CS3

• Deberás configurar la carpeta que creaste en C:\ llamada “biblioteca” como

un sitio web de Adobe Dreamweaver CS3
• Este sitio web utilizará tecnología ASP VBscript
• Su dirección virtual en web será: http://localhost/biblioteca
• Su acceso de edición será precisamente c:\biblioteca (Local/Network)

PARTE 3
CONFIGURACION Y ADMINISTRACION DE UN SITIO WEB SECUNDARIO BAJO EL
SERVIDOR WEB IIS

• Deberás agregar un sitio web secundario (carpeta virtual) al servidor web IIS
(Internet Information Server)
• Ese sitio web secundario o carpeta virtual deberá apuntar a la carpeta que
creaste en C:\biblioteca
• El alias de este sitio web secundario será: “biblioteca”
• Administrar el sitio web secundario:
o Deberás configurar este sitio web de IIS llamado “biblioteca” con una
pagina de arranque llamada: principal.asp
o Deberás configurar este sitio para que tenga acceso anónimo
PARTE 4
DISEÑO, DESARROLLO Y ESTRUCTURACIÓN DE UNA PEQUEÑA BASE DE DATOS
BAJO EL SERVIDOR SQL SERVER 2005 EXPRESS EDITION

• Deberás crear una base de datos en SQL Server 2005 Express Edition llamada
BDBiblioteca
• Esa Base de Datos la guardarás en el directorio por defecto en el cual SQL
Server almacena sus bases de datos
• Deberás crear tres tablas, una llamada libros, otra llamada autores y otra
llamada usuarios
• La tabla usuarios deberá estar conformada de los siguientes campos
o Id (Entero Autonumérico [Identidad 1,1]) (Llave primaria)
o Usuario (nvarchar de 10) NOT NULL
o Secreta (int de 5) NOT NULL
o Nombre (nvarchar de 20) NOT NULL
o Paterno (nvarchar de 20) NOT NULL
o Materno (nvarchar de 20) NOT NULL
• La tabla autores deberá estar conformada de los siguientes campos
o Id (Entero Autonumérico [Identidad 1,1])
o Claveautor (nvarchar de 10) NOT NULL [Llave primaria]
o Nombre (nvarchar de 20) NOT NULL
o Paterno (nvarchar de 20) NOT NULL
o Materno (nvarchar de 20) NOT NULL
o Nacionalidad (nvarchar de 20) NOT NULL
• La tabla libros deberá estar conformada de los siguientes campos
o Id (Entero Autonumérico [Identidad 1,1])
o Isbn (nvarchar 20) NOT NULL [Llave primaria]
o Claveautor (nvarchar de 10) NOT NULL [Llave foranea]
o Titulo (nvarchar 30) NOT NULL
o Editorial (nvarchar 25) NOT NULL
o Paginas (Entero de 4)
• Deberás introducir manualmente datos en las tres tablas, por lo menos 3
registros en cada una de ellas, por ejemplo:
• TABLA USUARIOS:
o Usuario1, secreto1, Juan, Pérez, García
• TABLA AUTORES
o Cesaromega, Cesar, Hernández, Rodríguez, España
o Patyaa, Patricia, Alatorre, Rosas, México
o Machan, Maria Elena, Chan, Salas, Guatemala
• TABLA LIBROS
o Xw2005esp, Cesaromega, SQL Server 2005, Alfaomega, 500
o Mx2003mex, Patyaa, Teorías del Aprendizaje, Trillas, 388
 o Gm2002gua, Machan, Educación a Distancia, Paidós, 250

PARTE 5
ELABORACION DE FORMULARIOS Y PAGINAS WEB

• Deberás diseñar y estructurar paginas web que servirán a manera de

pantallas de captura para tus tablas de tus bases de datos pantallas de
reportes o de presentación de datos consultados, por lo tanto:
• Tu página web de inicio se llamará principal.asp y deberá tener:
o Formulario web llamado formalogin
o Caja de texto llamada txtusuario
o Caja de texto tipo Password llamada txtpassword
o Botón de comando tipo submit (para envío del formulario)
o Diseño gráfico, imágenes, banner, pie de página con todos los datos
del que hace el examen web (Tus datos personales)
• Deberás tener una página web llamada menubiblioteca.asp en la cual
tendrás una imagen de bienvenida y ligas a las demás páginas que
conformarán tu sitio web, es decir ligas que digan y apunten a:
o Altas de autores
o Altas de libros
o Consulta de autores
o Consulta de Libros
o Información del sitio (Datos generales sobre la web)
• Deberás tener una página web llamada altasautores.asp que tendrá:
o Formulario web llamado: formaautores
o Caja de texto para capturar la clave del autor
o Caja de texto para capturar el nombre del autor
o Caja de texto para capturar el a. paterno del autor
o Caja de texto para capturar el a. materno del autor
o Combo Box o Caja de Selección para capturar la Nacionalidad del Autor
con valores de:
Selecciona un país…
México
España
Guatemala
Estados Unidos
Cuba
Austria
Francia
Alemania
Italia
Japón
• Deberás tener una página web llamada altaslibros.asp que tendrá:
o Formulario web llamado: formalibros
o Caja de texto para capturar la clave del libro (ISBN)
o Caja de texto para capturar el nombre del libro
o Caja de texto para capturar el No. de Páginas del Libro (solamente
deberá aceptar valores numéricos (validada con JS)
o Combo Box o Caja de Selección para capturar la Clave del Autor con
valores dinámicos (Los valores que deberá mostrar esta caja de selección
deberán de ser los valores de la tabla autores. Esta caja de selección
deberá mostrar al usuario los nombres de los autores pero internamente
deberán guardar la clave del autor. Para esto deberás hacer una
consulta a la tabla autores y mediante un While – Wend deberás llenar o
poblar los valores del combo box).
• Deberás tener una página web llamada consultaautores.asp en la cual se
tiene que ver en una tabla HTML todos los valores de los registros de la tabla
autores de la base de datos. Mediante un ciclo While – Wend deberás armar
esta tabla que mostrará en pantalla todos y cada uno de los registros de los
autores que se encuentren en la tabla autores de SQL Server.
o El campo clave del autor deberá ser una liga HTML, es decir, en tu
tabla de HTML ya con los datos en pantalla, la celda que mostrará la
clave del autor deberá ser una liga que al dar clic en esa liga deberá de
enviarnos a otra página web llamada detalleautor.asp y en la cual se
deberán mostrar todos aquellos libros que ha escrito el autor al cual le
has dado clic a su clave. Por ejemplo, en la tabla autores tenemos un
autor llamado Pedro Sánchez con clave 12345 y en la tabla libros
tenemos 5 libros con la llave secundaria o en el campo claveautor el
valor de 12345. Esto quiere decir que el autor Pedro Sánchez tiene en
nuestra biblioteca 5 libros, entonces cuando demos clic en la liga de su
clave 12345 la página llamada detalleautor.asp nos deberá mostrar
solamente los libros de este autor. A esto se le conoce como una
consulta Maestro – Detalle.
• Deberás tener una página web llamada consultalibros.asp la cual será una
tabla HTML que en sus celdas deberá mostrar todos los registros encontrados
en la tabla libros de la Base de Datos.
• Todas las páginas antes mencionadas que conformarán tu sitio web deberán
tener una liga o enlace que apunte o te regrese a la página llamada
menubiblioteca.asp.
PARTE 6
VALIDACIÓN DE OBJETOS DE FORMULARIO MEDIANTE JAVASCRIPT

• En tu carpeta “js” de tu sitio web deberás desarrollar un script o página de

JavaScript llamado validabiblioteca.js en el cuál tendrás las funciones de
validación de todos y cada uno de los formularios.
• Deberás tener una función llamada validaautores la cual en su interior
tendrá código de JavaScript que te permitirá validar que el usuario:
o No deje sin datos la caja de texto donde pides la clave del autor
o No deje sin datos la caja de texto donde pides el nombre del autor
o No deje sin datos la caja de texto donde pides el apellido paterno del
autor
o No deje sin datos la caja de texto donde pides el apellido materno del
autor
o No deje seleccionada la primera opción del combo box o caja de
selección de la nacionalidad del autor que dice “Selecciona un autor”
• Deberás tener otra función en el mismo archivo JS llamada validalibros la
cual en su interior tendrá código de JavaScript que permitirá valida que el
usuario:
o No deje sin datos la caja de texto donde pides la clave del libro (ISBN)
o No deje sin datos la caja de texto donde pides el titulo o el nombre del
libro
o No deje sin datos la caja de texto donde pides el Número de Páginas
del Libro
o No permitas que introduzca valores que no sean números donde pides
el Número de Páginas, es decir, checar que solo se puedan escribir
números en esta caja de textos (Se realiza con JavaScript)
• Deberás tener otra función de código JavaScript en el mismo archivo JS que
se llame validalogin la cual te permitirá validar que el usuario:
o No deje sin datos o vacía la caja de texto donde pides nombre de
usuario al inicio de tu sitio web (la página de logueo)
o No deje sin datos o vacía la caja de texto donde pides Contraseña de
usuario al inicio de tu sitio web (la página de logueo)

Todas estas validaciones deberán mostrar un mensaje de alerta (ALERT de JS)

indicándole al usuario en donde hubo omisiones de datos y además deberás colocar el
cursor o el foco en el objeto de formulario que tenga una omisión o que esté siendo
validado (Función Alert y Función Focus)

Recuerda, todas estas funciones van en un solo archivo del tipo JS y deberás
mandarlo llamar mediante la etiqueta <script> de HTML en todas aquellas paginas
que requieran de las funciones que programaste.
PARTE 7
PROGRAMACION DE SCRIPTS DE ASP PARA GUARDAR Y RECUPERAR DATOS DEL
SERVIDOR DE BASES DE DATOS

• En la página de inicio, la que se llama principal.asp deberás tener código

asp para verificar que el usuario y la contraseña que escriban en tu formulario
de login sean usuarios que realmente existan en la base de datos
• Mediante ASP deberás recuperar los valores escritos en las dos cajas de texto
del fomulario de logueo.
• Con esos dos valores (de las 2 cajas de texto) deberás hacer una consulta
SQL hacia la tabla de usuarios del servidor de base de datos para verificar si es
un usuario que existe en tu tabla antes mencionada.
• Si hay coincidencia en tu tabla de los valores usuario y contraseña, deberás
redireccionar tu usuario a la página de menubiblioteca.asp
• Si no hay coincidencia en tu tabla de los valores de usuario y constreña
deberás redireccionar a la página principal.asp
• Para este script de ASP usarás línea de conexión hacia la base de datos,
usarás recordset para la consulta hacia la tabla usuarios y verificarás el
recordset mediante las propiedades BOF & EOF para saber si tiene datos o no
el recordset. Usará una sentencia IF para ver hacia donde redireccionarás a tu
usuario dependiente de lo que tenga de contenido el recordset.

• Deberás tener una página llamada grabaautor.asp en la cual deberás tener

código de ASP que te permitirá recuperar lo que el usuario escribió en los
objetos de formulario de la página de altasautores.asp. Además deberás
mediante ASP grabar esos datos en la tabla de la Base de Datos llamada
autores y por último mostrar en pantalla un mensaje que diga: Se han grabado
satisfactoriamente los siguientes datos. Y mostrarás en una tabla de HTML los
datos recuperados y recién grabados en la tabla. Esta página deberá tener su
liga hacia la página de menubiblioteca.asp

• Deberás tener una página llamada grabalibros.asp en la cual deberás tener

código de ASP que te permitirá recuperar lo que el usuario escribió en los
objetos de formulario de la página de altaslibros.asp. Además deberás
mediante ASP grabar esos datos en la tabla de la Base de Datos llamada
libros y por último mostrar en pantalla un mensaje que diga: Se han grabado
satisfactoriamente los siguientes datos. Y mostrarás en una tabla de HTML los
datos recuperados y recién grabados en la tabla libros. Esta página deberá
tener su liga hacia la página de menubiblioteca.asp
• La página llamada consultaautores.asp debe tener código ASP con acceso
a los datos de la tabla autores y deberás mostrar en pantalla, en la parte visual
de la página una tabla HTML en donde ubicarás en cada celda un valor de cada
campo de la tabla de la Base de Datos. (Ya se había explicado anteriormente).
En la celda que mostrará la clave del autor se deberá mostrar a manera de liga
o enlace la cual enviará un parámetro llamado “idautor” a la página llamada
detalleautor.asp. Ese parámetro es la clave del autor.

• La página llamada consultalibros.asp debe tener código ASP con acceso a

los datos de la tabla libros y deberás mostrar en pantalla, en la parte visual de
la página una tabla HTML en donde ubicarás en cada celda un valor de cada
campo de la tabla de la Base de Datos. (Ya se había explicado anteriormente).
Deberá tener su respectiva liga o enlace que apunte hacia la página de
menubiblioteca.asp

• Deberás tener una página llamada detalleautor.asp la cuál tendrá código de

ASP para recuperar el parámetro que le es enviado desde la página llamada
consultaautores.asp. Ese parámetro se llama “idautor” y mediante
Request.QueryString deberás recuperar ese valor. Con ese valor deberás hacer
una consulta (query de SQL) hacia la tabla libros y verificarás en todo momento
si tu consulta viene vacía o con datos. Si es positivo el encontrar registros
idénticos al parámetro “idautor” entonces deberás recuperar todos los registros
de la tabla libros y mostrarlos en una tabla de HTML en la parte visual de esta
página web. Mostrarás los registros en una tabla HTML. Si es negativo el
encontrar registros idénticos al “idautor” entonces deberás redireccionar al
usuario a la página de menubiblioteca.asp

• Deberás tener una página web llamada infositio.asp en la cual mostrarás los
datos de tu empresa de desarrollo de aplicaciones web como su nombre, su
dirección, su eslogan y por su puesto el nombre de la persona quien desarrolló
este examen práctico.
PARTE 8
MAQUETACIÓN DE OBJETOS WEB MEDIANTE CSS

• Deberás de formatear o configurar los objetos de formulario con colores de la

siguiente manera:
• En la página altaautores.asp los objetos de formulario deberán estar
configurados así:
o Cajas de texto en color amarillo claro como color de fondo y color
azul fuerte el color de los textos
o Cajas de Selección o Combo Box de color azul claro como fondo y
color blanco los textos
• En la página altalibros.asp los objetos de formulario deberán estar
configurados así:
o Cajas de texto en color violeta claro como color de fondo y color gris
fuerte el color de los textos
o Cajas de Selección o Combo Box de color verde claro o limón como
fondo y color rojo los textos
• En la página principal.asp los objetos de formulario deberán estar
configurados así:
o Cajas de texto en color gris claro como color de fondo y color azul
fuerte el color de los textos
o Botón de Comando o Submit de color Negro como color de Fondo y
Color Blanco los textos que aparecen en él

• Todos los textos de tu sitio web deberán estar configurados con los siguientes
datos:
o Familia Tipográfica: Tahoma, Verdana, Arial
o Tamaño de Fuente: 10 pixeles (10px)
o Esto lo deberás realzar mediante una clase de CSS llamada
.textos_sitios

• Todas las ligas o enlaces de este sitio web deberán de comportarse como
rollover, es decir, que mientras no se coloque el puntero encima de una liga
éstas NO deberán mostrar el clásico subrayado de los enlaces en las páginas
web. Al momento de posicionar el puntero sobre cualquier enlace del sitio web,
estos enlaces deberán mostrar el subrayado clásico. Mientras no estén
subrayadas las ligas, éstas deberán de ser de color AZUL, y al momento de
posicionar el puntero deberán de cambiar a color ROJO. Esto también deberá
estar en clases o pseudo clases dentro de tu archivo llamado
estilos_biblioteca.css que estará almacenado en la carpeta CSS de tu sitio
web.
Todas las páginas de tu sitio web deberán tener las medidas estándar para
visualizarse bien en una resolución de 800 x 600, es decir, de 760 píxeles de ancho
por lo que necesiten de altura.

Todo tu sitio web deberá tener uniformidad u homogeneidad en cuanto a su

estructura, acomodo, diseño, colores, imágenes, banners, fuentes, etc.

Todos los códigos de CSS, de JavaScript y de ASP deberán de estar comentados,

deberán de agregar comentarios a las líneas de código de cada lenguaje para
documentar todos sus scripts. Además deberán estar indentados para que la lectura
de sus códigos sea fácil de comprender y así detectar posibles errores de
programación.

Todos los objetos como RECODSETs y CONEXIONES de ASP hacia la Base de

Datos cuando ya no se utilicen deberán de cerrarse y destruirse forzosamente. Es
obligatorio cerrar y destruir estos objetos de ASP cuando ya no se requieran en la
página ASP que los necesitó. (De lo contrario se penalizará en el puntaje final).

Tabla de Puntajes

Punto a evaluar Tiene parte o Tiene casi Tiene todos los

muy poco de todo de lo puntos solicitados
lo que se le que se le y bien aplicados
solicito solicito
PARTE 1 1 3 5
ESTRUCTURACION DE UN SITIO WEB
LOCAL

PARTE 2 1 3 5
CONFIGURACION DE UN SITIO WEB
BAJO ADOBE DREAMWEAVER CS3

PARTE 3 5 7 10
CONFIGURACION Y ADMINISTRACION
DE UN SITIO WEB SECUNDARIO BAJO EL
SERVIDOR WEB IIS

PARTE 4 5 10 15
DISEÑO, DESARROLLO Y
ESTRUCTURACIÓN DE UNA PEQUEÑA
BASE DE DATOS BAJO EL SERVIDOR SQL
SERVER 2005 EXPRESS EDITION
PARTE 5 5 7 10
ELABORACION DE FORMULARIOS Y
PAGINAS WEB

PARTE 6 10 15 20
VALIDACIÓN DE OBJETOS DE
FORMULARIO MEDIANTE JAVASCRIPT

PARTE 7 10 15 25
PROGRAMACION DE SCRIPTS DE ASP
PARA GUARDAR Y RECUPERAR DATOS
DEL SERVIDOR DE BASES DE DATOS

PARTE 8 5 7 10
MAQUETACIÓN DE OBJETOS WEB
MEDIANTE CSS

42 67 100

MUCHA SUERTE !!!

(Éxito)
Todo lo solicitado en este examen se vio en clases presénciales, o son aspectos
solicitados en las investigaciones de sus tareas.

También se piden aspectos que podrán encontrar en los materiales del curso en línea
de esta materia.

Además, se pueden consultar códigos de ejemplo encontrados en Internet, todo los

solicitado es muy común en el desarrollo de aplicaciones web con ASP. (Pero recuerda
que los códigos deberán ir comentados y acorde con las requisiciones de este examen
práctico).

Diseñador del examen:

Mtro. Abraham Vega Tapia