LABORATORIO 14

Desarrollo de Interfaces grficas

con HTML5

GUA DE LABORATORIO N 14

Actividad de Proyecto: DESARROLLAR LA ESTRUCTURA DE DATOS

Y LA INTERFAZ DE USUARIO DEL
SISTEMA DE INFORMACIN.

Estructura de contenidos.

1. Introduccin. 2

2. Objetivos. 2

3. Consideraciones. 3

4. Procedimiento. 3

5. Evidencias a entregar. 10

GLOSARIO 11

RECURSOS BIBLIOGRFICOS 12

FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje

 Desarrollo de Interfaces grficas con HTML5

GUA DE LABORATORIO 14

Desarrollo de Interfaces
grficas con HTML5

ACTIVIDAD DE PROYECTO
Desarrollar la estructura de datos
y la interfaz de usuario del
sistema de informacin.

INTRODUCCIN

1. INTRODUCCIN

En el presente laboratorio disear dos sitios web teniendo en cuenta los tipos
de negocio de dos empresas, se har necesaria la aplicacin de los
conocimientos adquiridos en el OA HTML5, estos ejercicios le ayudarn a
aplicar los conceptos de HTML5 en contextos reales.

Con el diseo de sitios web el Analista y Desarrollador de Sistemas de

Informacin est preparado para sacar el mximo provecho a las plataformas
y herramientas de diseo ms modernas y utilizadas en la industria del
desarrollo de software actual.

2. OBJETIVOS

Comprender la estructura bsica de HTML5.

Realizar la definicin de zonas en HTML5.

Incluir estilos CSS en la pgina web.

Aplicar HTML5 y CSS en varias pginas web asociadas a un tema de

negocio especfico.

2
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces grficas con HTML5

3. CONSIDERACIONES

tem Descripcin
Para el desarrollo de este laboratorio se recomienda
Soporte Terico
la lectura, exploracin y anlisis del Objeto de
Contenido: Desarrollo de Interfaces Grficas
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 diseo dado e identifique los conceptos de HTML5 y CSS que

debe aplicar.

Realice el diseo 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 ejecucin.

3
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces grficas con HTML5

Ejercicios :

1. El Centro Veterinario Caninos y Felinos, busca llegar a ms pblico y

por lo tanto atraer ms clientes por medio de un sitio web, que permita
dar a conocer los productos, servicios, costos y polticas de la guardera, y
promociones ofrecidas para el beneficio de los animales.

Tambin piensa incluir secciones de inters general, a manera de tips y

consejos para los cuidados que deben tener los dueos de las mascotas.
Como atractivo adicional, quiere ofrecer la programacin de citas
mdicas, incluyendo datos de la mascota y del amo de la misma, adems
de escoger la fecha y hora en la que tendra mayor oportunidad de asistir.

El diseo propuesto (opcional) es el siguiente:

4
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces grficas con HTML5

Notas:

Se debe disear un logo (en una aplicacin de libre eleccin), que

identifique al centro veterinario y ste debe ser incluido en el encabezado
de la pgina web.

Debe incluirse una barra de navegacin que maneje mnimo las

opciones: Servicios, Productos, Guardera, Promociones. (Puede agregar
ms opciones). Adems cada opcin debe vincular otra pgina web en el
caso de ser seleccionada (<a href).

La pgina debe contener dos o ms artculos que presenten

informacin sobre recomendaciones para el cuidado de los animales,
adems debe incluir al final de cada prrafo la vinculacin a otra pgina
web para profundizar ms sobre el tema expuesto. Incluir una imagen
referente al tema.

5
FAVA - Formacin 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 mdica:

Como pie de pgina, incluir informacin de contacto de la empresa:

Puede manejar los colores de su preferencia.

2. BanCoop, es una entidad financiera que tiene mltiples servicios y

productos para sus clientes y requieren una pgina web que facilite
consultas y transacciones a sus clientes.

El diseo (opcional) propuesto es el siguiente:

6
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces grficas con HTML5

Notas:

Se debe disear un logo (en una aplicacin de libre eleccin), que

identifique al Banco y ste debe ser incluido en el encabezado de la pgina
web.

7
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces grficas con HTML5

Debe incluirse una barra de navegacin que maneje mnimo las

opciones: Crditos, Leasing, Ahorros, Servicio al cliente. (Puede agregar
ms opciones).
Adems cada opcin debe tener la opcin de vincular otra pgina web en
el caso de ser seleccionada (<a href).

La pgina debe contener 4 artculos que contenga informacin sobre

productos del banco, cada artculo debe contener una imagen referente al
tema y debe incluir al final de cada prrafo la vinculacin a otra pgina
web para profundizar ms sobre el producto expuesto.

8
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces grficas con HTML5

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

cuenta, Informacin de transacciones, Informacin de tarjetas de crdito.

9
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Desarrollo de Interfaces grficas con HTML5

Como pie de pgina, incluir informacin 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 imgenes para su ejecucin.

10
FAVA - Formacin 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 - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje
 Usar lenguaje transaccional sobre la base de datos

RECURSOS BIBLIOGRFICOS

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

12
FAVA - Formacin 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 Andrs Julin Valencia Osorio

Experto temtico Diana Marcela Loaiza Ciro

Asesor Pedaggico Claudia Milena Hernandez Naranjo

Productor Multimedia Rafael Ricardo Valds Prada

Lder expertos temticos Ana Yaqueline Chavarro Parra

Lder lnea de produccin Santiago Lozada Garcs

Atribucin, no comercial, compartir igual

Este material puede ser distribuido, copiado

y exhibido por terceros si se muestra en los
crditos. No se puede obtener ningn bene-
ficio comercial y las obras derivadas tienen
que estar bajo los mismos trminos de
licencia que el trabajo original.

13
FAVA - Formacin en Ambientes Virtuales de Aprendizaje SENA - Servicio Nacional de Aprendizaje