AP6-AA3-EV1

DESARROLLO DE INTERFACES GRÁFICAS USANDO HTML5

BYRON ALEXANDER MONTENEGRO QUIÑONEZ

NOVIEMBRE 2018

SERVICIO NACIONAL DE APRENDIZAJE (SENA)

CENTRO DE SERVICIOS FINANCIEROS (BOGOTÁ)
ANÁLISIS Y DESARROLLO DE SISTEMAS DE INFORMACIÓN (1565020)
 AP6-AA3-Ev1-Desarrollo de Interfaces Gráficas usando HTML5

ÍNDICE
1. INTRODUCCIÓN ........................................................................................................ 3
2. OBJETIVOS ................................................................................................................ 3
3. PROCEDIMIENTO ...................................................................................................... 3
BASE DE DATOS MYSQL........................................... Error! Bookmark not defined.
MODELO RELACIONAL DEL SISTEMA DE INFORMACIÓN .... Error! Bookmark not
defined.

2
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 AP6-AA3-Ev1-Desarrollo de Interfaces Gráficas usando HTML5

1. INTRODUCCIÓN
En el presente laboratorio diseñará dos sitios web teniendo en cuenta los tipos de
negocio de dos empresas, se hará necesaria la aplicación de los conocimientos
adquiridos en el OA HTML5, estos ejercicios le ayudarán a aplicar los conceptos de
HTML5 en contextos reales.

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.

2. OBJETIVOS
 Comprender la estructura básica de HTML5.
 Realizar la definición de zonas en HTML5.
 Incluir estilos CSS en la página web.
 Aplicar HTML5 y CSS en varias páginas web asociadas a un tema de negocio
específico.

3. 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 Contenido:
Desarrollo de Interfaces Gráficas con HTML5.
Productos requeridos Actividades de Afianzamiento:
 Completar zonas HTML5 arrastrando bloques.
 Completar conceptos HTML5.
Herramientas SW El IDE (Ambiente de Desarrollo Integrado) de su preferencia:
 NetBeans
 Dreamweaver
 NotePad++

4. PROCEDIMIENTO
 Lea completamente el enunciado de cada ejercicio hasta comprender con claridad
lo que se está pidiendo.
 Revise el diseño dado e identifique los conceptos de HTML5 y CSS que debe
aplicar.
 Realice el diseño de cada ejercicio propuesto y realice las pruebas requeridas
para asegurar su correcto funcionamiento.
 Guarde cada ejercicio en una carpeta independiente con todos los archivos
requeridos para su ejecución.

EJERCICIOS
1. El Centro Veterinario “Caninos y Felinos”, busca llegar a más público y por lo tanto

3
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 AP6-AA3-Ev1-Desarrollo de Interfaces Gráficas usando HTML5

atraer más clientes por medio de un sitio web, que permita dar a conocer los productos,
servicios, costos y políticas de la guardería, y promociones ofrecidas para el beneficio de
los animales.

También piensa incluir secciones de interés general, a manera de tips y consejos para
los cuidados que deben tener los dueños de las mascotas. Como atractivo adicional,
quiere ofrecer la programación de citas médicas, incluyendo datos de la mascota y del
amo de la misma, además de escoger la fecha y hora en la que tendría mayor
oportunidad de asistir.

Notas

• Se debe diseñar un logo (en una aplicación de libre elección), que identifique al centro
veterinario y éste debe ser incluido en el encabezado de la página.

HTML_________________

<a href="index.html"><img class="img-logo" src="images/logo.png" alt="Logo del

sitio"></a>

CSS_________________
.img-logo {
width: 120px;
margin-left: 10%;
}

• Debe incluirse una barra de navegación que maneje mínimo las opciones: Servicios,
Productos, Guardería, Promociones. (Puede agregar más opciones). Además, cada
opción debe vincular otra página web en el caso de ser seleccionada (<a href…).

4
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje