1

Fase de Diseño

Tutor:

Josué Ignacio Ochoa

Integrantes grupo 301122_48:

Anderson Arturo Guevara

Angélica María Callejas Pérez
Carlos Moisés García Tapiero
Luis Alberto Rincón
Cristian Alexander Madroñero Pedrosa

Universidad Abierta y a Distancia (UNAD).

Quindío.
Diseños de Sitios Web
Marzo 2017.
 Tabla de Contenidos

Capítulo 1……………………………………………………………………………………1
Introducción…………………………………………………………………………………1
Capítulo 2……………………………………………………………………………………2
Objetivos…………………………………………………………………………………… 2
Capítulo 3……………………………………………………………………………………3
Tabla Definición de Roles………………………………………………...............................3
Capítulo 4……………………………………………………………………………………4
Formato Vimep…………………………………………………………………4,5,6,7,8,9,10
Capítulo 5………………………………………………………………………………… 11
Maquetación Sitio Web…………………………………………………………………… 11
Lista de referencias…………………………..…………………………………………… 12
Conclusiones……………………………………………………………………………… 13
 Lista de figuras

Figura 1. Tabla Definición de Roles ............................................................ …...................3

Figura 2. Formato Vimep ……………………………………………………………… 10

Figura 3. Maquetación Web…………………………………………………………… 11

..
 1

Capítulo 1

Introducción

El desarrollo de la página web conlleva a una serie de pasos que facilitaran la ilustración y la
interacción entre los actores (usuarios) y el software, así mismo innovando y satisfaciendo las
necesidades a futuro por medio de actualizaciones en la plataforma, plasmando con la ayuda de
una maqueta virtual el resultado final de la página web. Se aprovecha además todas las
herramientas que nos facilita la tecnología virtual, implementando un lenguaje de programación
avanzado capaz de reproducir códigos para dar solución a las necesidades del usuario
 Capítulo 2

Objetivos

 Crear alternativas para la interpretación de la página web de la forma adecuada y más

rápida.

 Guiar la modelación y creación de la página web.

 Elaborar la fase de diseño de un sitio web, en la cual se establece su contenido y su

diseño.

 Manejar herramientas online que permiten realizar la maquetación de un sitio web.

 Establecer el contenido a publicar en el sitio web.

 Capítulo 3

Tabla Definición de Roles

Tabla 1. Plan de acción Grupo

Rol dentro del
Datos del
Código Estudiante Fotografía trabajo
Estudiante
colaborativo

Anderson Arturo
1112772132 Compilador
Guevara

Angélica María
1094915658 Revisor
Callejas Pérez

Cristian Alexander
1121862776 Evaluador
Madroñero

Carlos Moisés
1096036909 Entregas
García Tapiero
 1093215539
Luis Alberto
Alertas
Rincón

Figura 1. Tabla de Definición de roles

Capítulo 4

OVI PARA DISEÑAR UN OBJETO VIRTUAL DE INFORMACIÓN - OVI

Objetivo General

Dar a conocer los conceptos básicos sobre HTML5 Y CSS3, explicar su manejo y el uso de
algunas etiquetas como material de apoyo para estudiantes de creación de sitios web.

Contenido informativo de la presentación en PPT para diseñar el OVI

Sección de texto Sección de imágenes

Sobre HTML5 Imágenes sobre Logotipos de HTML5

En esta sección encontramos imágenes de HTML5
En esta sección se realiza una https://www.w3.org/html/logo/
descripción de HTML5, nuevas
etiquetas y a nivel general Imagen sobre HTML5
información sobre su manejo y https://unsplash.com/search/html?photo=OqtafYT5kTw
uso en el desarrollo de sitios web,
la importancia de HTML5 y su Autor Llya Pavlov
fundamentación.

Guía gratuita y de calidad para

aprender sobre HTML5,
Javascript y CSS.

http://www.aulaclic.es/guia-
html5/

Autores:
John Freddy Vega, Christian Van
Der Henst.
 Curso HTML5

Beneficios de HTML5
Características de HTML5
Conceptos básicos de HTML5
Uso de las etiquetas HTML5

https://msdn.microsoft.com/es-
es/ie/hh749019

Autor: Microsoft.

Sección de texto Sección de imágenes

Sobre CSS3
Imagen sobre CSS
Conceptos básicos de
presentación de https://unsplash.com/search/css?photo=5Ntkpxqt54Y&photo_info_po
elementos en pantalla pover=is_visible
con CSS, incluyendo una Autor Sai Kiran Anagani
estructura visual de dos
columnas con ancho fijo, Imagen sobre CSS
utilizando HTML y CSS.
Función de un archivo de https://unsplash.com/search/css?photo=Skf7HxARcoc
"reset" CSS y cómo se Autor Markus Spiske
añade a la página Web.
Esta lección incluye el
uso del elemento <div> y
las propiedades float y
clear de CSS para crear
columnas en la página.

El papel de CSS
 CSS (Cascading Style
Sheets) utiliza un
lenguaje distinto de
HTML. CSS nos permite
aplicar estilos de manera
coherente a los distintos
elementos de las páginas
del sitio web, de modo
que los títulos, listas y
párrafos pueden verse
igual en todas y cada una
de las páginas.

Curos HTML5 – CSS

https://msdn.microsoft.c
om/es-es/ie/hh749019

Autor: Microsoft.

Figura 2. Tabla Formato Vimep

Capítulo 5

Maquetación Sitio Web

Figura 3. Maquetación Sitio Web
 Conclusiones

 Con este informe se puede concluir que la creación y desarrollo de una página web puede
llegar a ser compleja; es necesario llevar una serie de pasos en la creación y diseño de
un sitio web para evitar errores a futuro en la programación, para eso se hace una muestra
visual final de la misma siendo explicativos con todos los elementos que la conforman.
 Se comprende HTML como lenguaje para desarrollo de sitios web, existen varios
programas para edición web por medio de HTML, algunos muy conocidos son:
dreamweaver, sublime text, Notepad ++, Kompozer, Aptana Studio, TextMate, Microsoft
Visual Studio Express for Web.
 Se comprende la diferencia entre HTML y CSS: este último nos brinda las herramientas
para la parte grafica o de diseño de nuestro sitio web, nos ayuda bastante con temas como
la estética o estilo de nuestras páginas.
 Es indispensable antes de construir un sitio web pasar primero por la fase de diseño, ya
que en esta dejamos claro el contenido del sitio y el diseño de su entorno.
 Lista de referencias

ITSON (2009) Inducción al proceso de diseño y desarrollo de objetos de aprendizaje.

Recuperado de http://biblioteca.itson.mx/oa/formacion_profesores/induccion_oa/index.html

Ministerio de Educación Nacional. República de Colombia (2009) ¿Qué es un objeto de

aprendizaje? Recuperado de http://aprendeenlinea.udea.edu.co/lms/men/oac1.html

Mager, R (2002) Pautas de Mager para el diseño de objetivos de aprendizaje. Recuperado de

http://eduteka.icesi.edu.co/articulos/Tema15

Barreto, M. (2016) Procedimiento gestión de recursos educativos digitales. Bogotá, D.C. VIMEP
– UNAD.