SERVICIO NACIONAL DE APRENDIZAJE - SENA

ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION – 1412859

FASE IV: DESARROLLO

ACTIVIDAD DE APRENDIZAJE AP6

AP6-AA3-EV2-CONSTRUCCIÓN DE LA INTERFAZ WEB PARA EL PROYECTO
DE FORMACIÓN

JHON ALEXANDER MORALES GAITÁN

GRUPO A3

SERVICIO NACIONAL DE APRENDIZAJE - REGIONAL ANTIOQUIA

CENTRO DE SERVICIOS Y GESTION EMPRESARIAL
ANÁLISIS Y DESARROLLO DE SISTEMAS DE INFORMACIÓN (1412859)
MODALIDAD DE FORMACIÓN VIRTUAL
MEDELLÍN
2018
 SERVICIO NACIONAL DE APRENDIZAJE - SENA
ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION – 1412859
FASE IV: DESARROLLO

Proyecto de formación
Construcción de la Interfaz Web para el proyecto de formación
De acuerdo con el contexto del Sistema de Información a desarrollar, los módulos
definidos para el sistema y los mockups planteados para la interfaz gráfica de
usuario presentados en la fase de Diseño y que fueron validados por el tutor,
construir la interfaz gráfica Web para su proyecto de información aplicando HTML5
y CSS3.

DETERMINACIÓN DE ÁREAS DE TRABAJO

Área de Trabajo: Pagina Inicio

 SERVICIO NACIONAL DE APRENDIZAJE - SENA
ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION – 1412859
FASE IV: DESARROLLO

Área de Trabajo: Registrar Evento

LOGO DE LA APLICACIÓN
 SERVICIO NACIONAL DE APRENDIZAJE - SENA
ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION – 1412859
FASE IV: DESARROLLO

DETERMINACIÓN DE TIPOGRAFÍA Y PALETA DE COLORES

Para el proyecto de formación se ha determinado una paleta de colores vivos y

claros, para una mejor visibilidad del contenido, por institucionalidad y
requerimiento, ya que el usuario puede pasar mucho tiempo en el sistema y la
interfaz no puede ser muy oscura, y la letra debe ser de un tamaño en cada
formulario para mejorar la visualización.

Los colores seleccionados son los siguientes:

GOLD #FBA919
DARK BLUE #00008B
ROYAL BLUE #4169E1
SKY BLUE #87CEEB
WHITE #FFF
BLACK #000000
GAINSBORO #D8D8D8

Para el proyecto de formación se ha determinado 2 diferentes tipos de fuentes, las

cuales son muy sobrias, limpias y muy fáciles de leer sin confundir al usuario,
estas fuentes fueron extraídas de Google Fonts.

Las fuentes seleccionadas son las siguientes:

@import
url('https://fonts.googleapis.com/css?family=Open+Sans');

@import
url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');
 SERVICIO NACIONAL DE APRENDIZAJE - SENA
ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION – 1412859
FASE IV: DESARROLLO

BARRA DE NAVEGACIÓN
En la barra de navegación el usuario puede seleccionar una opción, y tiene la
visibilidad de las otras opciones donde podrá dirigirse.

MAPA DEL SITIO

 SERVICIO NACIONAL DE APRENDIZAJE - SENA
ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION – 1412859
FASE IV: DESARROLLO

ACCESO A LA APLICACIÓN

FORMULARIOS IMPLEMENTADOS
Los formularios tienen como fin mostrar, ingresar y validar información de la base
de datos, en esta imagen se identifica el caso de uso Registrar novedades,
dispositivos y personas.
 SERVICIO NACIONAL DE APRENDIZAJE - SENA
ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION – 1412859
FASE IV: DESARROLLO

Bibliografía:

 Objeto de Aprendizaje : “Introducción al diseño web usando Lenguaje de

Marcación de Hipervínculos -HTML5”
 W3Schools.com. Tutoriales de HTML5 disponibles en:
http://www.w3schools. com/html/default.asp
 Vargas Ferenk (2012), HTML5Tutoriales.com. Tutoriales de HTML5 y CSS3
disponible en: http://html5tutoriales.com/tutoriales/tutorial-basico/seccionde-
contenido.html
 Bloomingdale. Código de conducta de los profesionales y la usabilidad. (10
de 2005). Disponible en http://www.upassoc.org/about_upa/leadership/
 CoC_Spanish.pdfColl, J. C. (02 de 11 de 2008). Contribuciones a las
ciencias sociales. Recuperado el 12 de 10 de 2013, de
http://www.eumed.net/rev/
 Desarrolloweb.com. (s.f.). Recuperado el 14 de 10 de 2013, de http://www.
desarrolloweb.com/articulos/1133.phpNSU. (s.f.).
 Gauchat, Juan Diego. (2012). El gran libro de HTML5, CSS3 y Javascript
(1ª. Ed). Barcelona, España: Ediciones técnicas Marcombo.