LABORATORIO 14

Desarrollo de Interfaces gráficas

con HTML5

GUÍA DE LABORATORIO Nº 14

Actividad de Proyecto: DESARROLLAR LA ESTRUCTURA DE DATOS

Y LA INTERFAZ DE USUARIO DEL
SISTEMA DE INFORMACIÓN.

Estructura de contenidos.

1. Introducción. 2

2. Objetivos. 2

3. Consideraciones. 3

4. Procedimiento. 3

5. Evidencias a entregar. 10

GLOSARIO 11

RECURSOS BIBLIOGRÁFICOS 12

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

 Desarrollo de Interfaces gráficas con HTML5

GUÍA DE LABORATORIO 14

Desarrollo de Interfaces
gráficas con HTML5

ACTIVIDAD DE PROYECTO
Desarrollar la estructura de datos
y la interfaz de usuario del
sistema de información.

INTRODUCCIÓN

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.

2
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces gráficas con HTML5

3. CONSIDERACIONES

Ítem Descripción
Para el desarrollo de este laboratorio se recomienda
Soporte Teórico
la lectura, exploración y análisis del Objeto de
Contenido: Desarrollo de Interfaces Gráficas
con HTML5.
Actividades de Afianzamiento:
Productos
requeridos
• 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.

3
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces gráficas con HTML5

Ejercicios :

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

por lo tanto 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.

El diseño propuesto (opcional) es el siguiente:

4
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces gráficas con HTML5

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 web.

• 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…).

• La página debe contener dos o más artículos que presenten

información sobre recomendaciones para el cuidado de los animales,
además debe incluir al final de cada párrafo la vinculación a otra página
web para profundizar más sobre el tema expuesto. Incluir una imagen
referente al tema.

5
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Usar lenguaje transaccional sobre la base de datos

• Debe crear un espacio lateral, para ingresar datos de una cita médica:

• Como pie de página, incluir información de contacto de la empresa:

• Puede manejar los colores de su preferencia.

2. BanCoop, es una entidad financiera que tiene múltiples servicios y

productos para sus clientes y requieren una página web que facilite
consultas y transacciones a sus clientes.

El diseño (opcional) propuesto es el siguiente:

6
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces gráficas con HTML5

Notas:

• Se debe diseñar un logo (en una aplicación de libre elección), que

identifique al Banco y éste debe ser incluido en el encabezado de la página
web.

7
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces gráficas con HTML5

• Debe incluirse una barra de navegación que maneje mínimo las

opciones: Créditos, Leasing, Ahorros, Servicio al cliente. (Puede agregar
más opciones).
Además cada opción debe tener la opción de vincular otra página web en
el caso de ser seleccionada (<a href…).

• La página debe contener 4 artículos que contenga información sobre

productos del banco, cada artículo debe contener una imagen referente al
tema y debe incluir al final de cada párrafo la vinculación a otra página
web para profundizar más sobre el producto expuesto.

8
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces gráficas con HTML5

• Debe crear un espacio lateral que contenga 3 elementos: Ingreso a la

cuenta, Información de transacciones, Información de tarjetas de crédito.

9
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces gráficas con HTML5

• Como pie de página, incluir información de la empresa:

• Puede manejar los colores de su preferencia.

4. EVIDENCIAS

Carpeta comprimida con subcarpetas (una subcarpeta por cada ejercicio)

con los respectivos archivos .html, .css, e imágenes para su ejecución.

10
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Usar lenguaje transaccional sobre la base de datos

GLOSARIO

Etiqueta: Marcas que destacan un fragmento de texto.

11
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Usar lenguaje transaccional sobre la base de datos

RECURSOS BIBLIOGRÁFICOS

http://www.w3schools.com/html/default.asp
http://html5tutoriales.com/tutoriales/tutorial-basico/seccion-de-contenido.html

12
FAVA - Formación en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Usar lenguaje transaccional sobre la base de datos

Usar lenguaje transaccional

LABORATORIO 14 sobre la base de datos

Desarrollador de contenido Andrés Julián Valencia Osorio

Experto temático Diana Marcela Loaiza Ciro

Asesor Pedagógico Claudia Milena Hernandez Naranjo

Productor Multimedia Rafael Ricardo Valdés Prada

Líder expertos temáticos Ana Yaqueline Chavarro Parra

Líder línea de producción Santiago Lozada Garcés

Atribución, no comercial, compartir igual

Este material puede ser distribuido, copiado

y exhibido por terceros si se muestra en los
créditos. No se puede obtener ningún bene-
ficio comercial y las obras derivadas tienen
que estar bajo los mismos términos de
licencia que el trabajo original.

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