Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -

VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

FASE 2 – DISEÑO: CREAR EL GUION Y LA MAQUETACION PARA UN OVI

DISEÑO DE SITIOS WEB

GRUPO: 301122_38

ELABORADO POR:

CRISTHIAN FERNANDO GUTIERREZ ACOSTA

CODIGO: 1151934931

TUTOR:

MARIO LUIS AVILA PEREZ

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA

ESCUELA DE CIENCIAS BASICAS DE TECNOLOGIA E INGENIERIA – ECBTI

SANTIAGO DE CALI

FEBRERO 2020
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

ACTIVIDAD FASE DE PLANEACION Y ANALISIS

CURSO DISEÑOS DE SITIOS WEB - COD. 301122

FORMATO GUION SITIO WEB DEL OVI

Diseñado Por: Director Curso

1. Objetivos del OVI (describa mediante el registro de 1 objetivo general y tres

específicos para que se construye este OVI)

Objetivo general:

Este documento tiene como objetivo implementar a los estudiantes sobre las generalidades
del diseñ o web para poder utilizar de forma debida los lenguajes HTML5 y CSS3. Para que
puedan aplicarlos en la construcció n de paginas web a trabes de sistemas de control de
versiones.

Objetivo específico 1:

Ofrecer informació n al estudiante, para que este puede operar y administrar los sistemas de
control de versiones tales como GIT o GITHUB

Objetivo específico 2:

Explicar la estructura bá sica de HTML5 (etiquetas, atributos y valores), la estructura bá sica

de pá ginas (TMLH. HEAD, BODY)

Objetivo específico 3:

Brindar las pautas necesarias para que el estudiante evalué y desarrolle sitios web que
puedan satisfacer la necesidad del usuario y dar recomendaciones para su actualizació n.
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

2. Contenido informativo del OVI por secciones (Replique el siguiente cuadro

de acuerdo al número de secciones que vaya a crear en el OVI)

Nombre de la sección que se creara en el OVI: SECCIÓN DE INICIO

2.1 Objetivo de la sección: (Registre a continuación el objetivo que

tiene esta sección)

Presentar la estructura, generalidades y unidades que se visualizaran en el

curso de diseño de sitios web, a su vez este orientara al usuario acerca de
los temarios que se ven en la elaboración de una pagina web, diseño,
lenguajes de programación, herramientas y algunos consejos básicos para
elaborar un buen sitio web.

2.2 Recursos de consulta que usara en la sección: (coloque el

nombre del material que usara para crear los contenidos de la sección y el
enlace de descarga de los mismos sean estos Texto, Imágenes, Audios o
Vídeos)

¿QUÉ ES EL DISEÑO WEB?(2018). Recuperado de

https://www.ikkonos.com/ideate/que-es-el-diseno-web

¿TIPS PARA UN BUEN DISEÑO WEB?(2018). Recuperado

https://www.ikkonos.com/ideate/tips-para-un-buen-diseno-web

Lenguajes de programación para el desarrollo web. (2019).

Recuperado de
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

https://www.piensasolutions.com/blog/principales-lenguajes-
programacionweb/

Como elegir el entorno de desarrollo web. (2019). ProgramarFacil

https://programarfacil.com/podcast/36-como-elegir-el-entorno-dedesarrollo-

web/

Logo UNAD. UNAD (2020). Imagen PNG. Logo Universidad Nacional

Abierta y a Distancia. Recuperado de:
https://www.unad.edu.co/templates/unadgeneral/images/logoUNAD.png

Logo HTML. w3c.org (2020). HTML 5. Recuperado de:

https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png

2.3 Redacte un borrador del contenido de lectura en formato de texto

que tendrá la sección: (Sea este la presentación de la sección, el
contenido o ambos; redacte un borrador del texto que publicara como
contenido en la sección coloque un subtítulo para identificar si corresponde a
la presentación de la sección o el contenido de lectura de la sección)

DISEÑO DE PAGINAS WEB

El curso de Diseños de sitios web está dirigido a todos quien estén

interesados en el diseño, programación y administración básica de sitios
web.
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

Presenta introducción, profundización e información complementaria sobre el

uso del GIT y GITHUB para la creación de contenidos en formato web como
páginas y sitios web.

el curso estaría conformado por tres unidades.

 Unidad 1. Introducción.
 HTML5.
 CSS.

Estas unidades abordan aspectos de desarrollo, implementación y

administración de proyectos de diseño web, para el curso se define el uso de
las TICS como agente mediador en el curso entre docentes y estudiantes.

Para esto la universidad cuenta con un campus virtual el cual posee

elementos de aprendizaje como OVAS, tutoriales y videos, que se
complementan con la aplicación de actividades académicas en línea y la
utilización de canales síncronos y asíncronos de comunicación para el
desarrollo del proceso académico que propone el curso.
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

3. Contenido informativo del OVI por secciones (Replique el siguiente cuadro

de acuerdo al número de secciones que vaya a crear en el OVI)

Nombre de la sección que se creara en el OVI: INTRODUCCIÓN

3.1 Objetivo de la sección: (Registre a continuación el objetivo que

tiene esta sección)

Presentar conceptos básicos de diseño y elaboración de sitios web, sistemas

de control de versiones, aplicaciones web y diseño de interfaces web.

3.2 Recursos de consulta que usara en la sección: (coloque el

nombre del material que usara para crear los contenidos de la sección y el
enlace de descarga de los mismos sean estos Texto, Imágenes, Audios o
Vídeos)
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

Lectura de aplicaciones web. NP Rodriguez. (2016). Software libre Carles

Mateu. Recuperado de:
https://libros.metabiblioteca.org/bitstream/001/591/1/004%20Desarrollo
%20de%20aplicaciones%20web.pdf

Lectura Diseño de Interfaces Web. Córcoles Tendero, J. E. (2015).

Diseño de interfaces web. Recuperado de:
http://bibliotecavirtual.unad.edu.co:2077/lib/unadsp/reader.action?
docID=11046236

Video Conceptos Básicos de Desarrollo Web. Farias Navarro (2013).

Conceptos Básicos de Desarrollo Web, Curso de HTML y CSS. Recuperado
de: https://www.youtube.com/watch?v=ddJng5IST1I

3.3 Redacte un borrador del contenido de lectura en formato de texto

que tendrá la sección: (Sea este la presentación de la sección, el
contenido o ambos; redacte un borrador del texto que publicara como
contenido en la sección coloque un subtítulo para identificar si corresponde a
la presentación de la sección o el contenido de lectura de la sección)

Presentación.

Estimado estudiante, la Universidad Nacional Abierta y a Distancia, le da el

gusto de darle la bienvenida al curso de Diseño de Sitios Web. En esta
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

sección podrá ver los conceptos básicos y la introducción al increíble mundo

del diseño web.

Contenido.

En la actualidad la cultura web esta presente en nuestro diario vivir.

Cualquier persona, en especial los estudiantes de diseño de aplicaciones,
sabe o ha oído hablar de lo que es un sitio web. Un sitio web es un conjunto
de páginas web agrupadas bajo y dominio y que comparten una dirección en
la web. Hoy por hoy, muchos son los sitios web que se pueden encontrar en
la internet. De hecho, las instituciones ya sean públicas o privadas, poseen
un sitio web.

En el siguiente video podrá observar los conceptos básicos del desarrollo

web.

CONCEPTOS BÁSICOS DE DESARROLLO WEB

En el siguiente link se encuentra una lectura con la información referente a la

planificación de interfaces, uso de estilos, implantación de contenido
multimedia, desarrollo de webs accesibles, entre otros temas de interés.

DISEÑO DE INTERFACES WEB

En el siguiente documento, esta la información referente a la evolución de las

aplicaciones web, lenguajes de marcas, herramientas de comunicación y
colaboración en línea y otros temas de mucha importancia para el diseño
web.
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

APLICACIONES WEB

4. Contenido informativo del OVI por secciones (Replique el siguiente cuadro

de acuerdo al número de secciones que vaya a crear en el OVI)

Nombre de la sección que se creara en el OVI: INTRODUCCIÓN

4.1 Objetivo de la sección: (Registre a continuación el objetivo que

tiene esta sección)

Presentar y dar a conocer los conceptos básicos, estructura y nuevas

características de HTML5

4.2 Recursos de consulta que usara en la sección: (coloque el

nombre del material que usara para crear los contenidos de la sección y el
enlace de descarga de los mismos sean estos Texto, Imágenes, Audios o
Vídeos)

HTML5. Guía del desarrollador HTML (2019). Guía HTML. Recuperado de:
https://developer.mozilla.org/es/docs/HTML/HTML5
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

Logo HTML. w3c.org (2017). HTML 5. Recuperado de:

https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png

HTML5. Guía del desarrollador. Lista de elementos HTML (2020). HTML.

Recuperado de:

https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_
elementos

4.3 Redacte un borrador del contenido de lectura en formato de texto

que tendrá la sección: (Sea este la presentación de la sección, el
contenido o ambos; redacte un borrador del texto que publicara como
contenido en la sección coloque un subtítulo para identificar si corresponde a
la presentación de la sección o el contenido de lectura de la sección)
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

Presentación.

Estimado estudiante, la Universidad Nacional Abierta y a Distancia, le da el

gusto de darle la bienvenida a esta sección del curso de diseño web, en esta
unidad encontrara los conceptos básicos, estructura y características de
HTML5. Bienvenidos…

Contenido.

HTML5 como se conoce por sus siglas en inglés (Hypertext Markuo

Language, versión 5), es la quinta revisión del lenguaje HTML. En conjunto
con CSS3, se define como los nuevos estándares de desarrollo web,
rediseñado el código para resolver problemas y actualizando así a nuevas
necesidades. No se limita solo a crear nuevas etiquetas o atributos, sino que
incorpora muchas características nuevas y proporciona una plataforma de
desarrollo de complejas aplicaciones web. (Arkaitz (2014),
https://www.arkaitzgarro.com/html5/capitulo-1.html).

En el siguiente link le permitirá ingresar a la guía básica y lista de elementos

en HTML5

GUIA HTML 5 LISTA DE ELEMENTOS EN HTML5

 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

5. Contenido informativo del OVI por secciones (Replique el siguiente cuadro

de acuerdo al número de secciones que vaya a crear en el OVI)

Nombre de la sección que se creara en el OVI: CSS3

5.1 Objetivo de la sección: (Registre a continuación el objetivo que

tiene esta sección)

El objetivo es presentar las diferentes características y novedades del CSS3,

con lecturas y video tutoriales en lo que se puede encontrar una explicación
mas sencilla, detallada y con ejemplos fáciles de comprender.

5.2 Recursos de consulta que usara en la sección: (coloque el

nombre del material que usara para crear los contenidos de la sección y el
enlace de descarga de los mismos sean estos Texto, Imágenes, Audios o
Vídeos)

Guía Completa de CSS3. Navajas Ojeda (2017). Guía Completa de CSS3.

Recuperado de:
http://stadium.unad.edu.co/ovas/10596_9136/gua_completa_sobre_css3_an
tonio_navajas.html

Curso básico de CSS3. Falcon, C, A. [FalconMasters]. (2014, junio 17).

Curso básico de CSS desde 0. Recuperado de
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

https://www.youtube.com/watch?
v=24gNhTcy6pw&list=PLhSj3UTs2_yU0fGoS1bjpHqky4kCEmTbR

HTML5: HEADER, NAV, UL, LI con CSS3. Perdomo, M. [Mauricio

Perdomo Vargas]. (2014, Octubre 12). VIDEOTUTORIAL - HTML5:
HEADER, NAV, UL, LI CON CSS   [Archivo de video]. Recuperado
de https://www.youtube.com/watch?v=3raTq4ebDdQ

HTML5: SECTION, ASIDE, FOOTER CON CSS3. Perdomo, M. [Mauricio

Perdomo Vargas]. (2014, Octubre 17). VIDEOTUTORIAL - HTML5:
SECTION, ASIDE, FOOTER CON CSS   [Archivo de video]. Recuperado
de https://www.youtube.com/watch?v=-i4OHNoW8ms
Menú Desplegable con HTML5 y CSS3. Falcon, C, A. [FalconMasters].
(2012, febrero 26). Como hacer un menú desplegable con HTML y CSS
[Archivo de video]. Recuperado de https://www.youtube.com/watch?
v=oZa2Ut8u2S0

5.3 Redacte un borrador del contenido de lectura en formato de texto

que tendrá la sección: (Sea este la presentación de la sección, el
contenido o ambos; redacte un borrador del texto que publicara como
contenido en la sección coloque un subtítulo para identificar si corresponde a
la presentación de la sección o el contenido de lectura de la sección)

Presentación.

Estimado estudiante, en esta sección encontrará información sobre las

diversas características y novedades de CSS3. Bienvenidos…

Contenido.

Mientras que HTML nos permite definir la estructura de una página web, las
hojas de estilo en cascada (CSS) son las que nos ofrecen la posibilidad de
definir las reglas y estilos de representación en diferentes dispositivos, ya
sean pantallas de equipos de escritorio, portátiles, móviles, impresoras u
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122

otros dispositivos capaces de mostrar contenidos web.

Las hojas de estilo nos permiten definir de manera eficiente la representación

de nuestra página y es uno de los conocimientos fundamentales que todo
diseñador web debe manejar a la perfección para realizar su trabajo.
(fsarachaga (2016). https://fernandosarachaga.com/es/lenguajes-
programacion-css3/).

El siguiente enlace permite ingresar y descargar una Guía Completa de

CSS3.

Guía Completa de CSS3

En cada uno de los siguientes enlaces encontrara videos con temas

relacionados con el funcionamiento de CSS3.

 CURSO DE CSS DESDE 0

 HTML5: HEADER, NAV, UL, LI con CSS3.
 HTML5: SECTION, ASIDE, FOOTER CON CSS3.
 Menú Desplegable con HTML5 y CSS3.

MAQUETACIÓN.
Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Bá sicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas Curso: Diseñ os de
Sitios Web Có digo: 301122