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

VIACIEscuela: Ciencias Baá sicas Tecnologíáa e Ingenieríáa Programa: Ingenieríáa de Sistemas Curso: Disenñ os de
Sitios Web Coá digo: 301122

Unidad 1: Fase de Diseño - Crear el Guión y la maquetación

para un OVI en formato WEB con HTML5 y CSS3.

Presentado a:
Mauricio Perdomo Vargas
Tutor

Entregado por:

Kelly Johanna Garavito Motta

Código: 40740587

Grupo: 301122_43

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD

ESCUELA DE CIENCIAS BÁSICAS TECNOLOGÍA E INGENIERÍA
SEPTIEMBRE DE 2017
FLORENCIA
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Baá sicas Tecnologíáa e Ingenieríáa Programa: Ingenieríáa de Sistemas Curso: Disenñ os de
Sitios Web Coá 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

CURSO: Diseños de Sitios Web

CODIGO: 301122

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

específicos para que se construye este OVI)

Objetivo general:

Fundamentar teoá ricamente a los estudiantes sobre las generalidades baá sicas del Disenñ o Web
para que puedan utilizar de forma correcta los lenguajes HTML5 y CSS3, aplicarlos en la
construccioá n de Sitios Web e implementarlos a traveá s de sistemas de control de versiones.

Objetivo específico 1:

Ofrecer informacioá n para que el estudiante pueda operar y administrar sistemas de control de
versiones como GIT o GITHUB.

Objetivo específico 2:

Brindar documentacioá n para que el estudiante utilice de forma correcta los lenguajes HTML5 y
CSS3 para aplicarlos en la solucioá n de problemas de construccioá n de Sitios Web.

Objetivo específico 3:

Brindar pautas para que le estudiante pueda evaluar y desarrollar Sitios Web que satisfagan las
necesidades del usuario y dar recomendaciones concretas para su actualizacioá n.
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Baá sicas Tecnologíáa e Ingenieríáa Programa: Ingenieríáa de Sistemas Curso: Disenñ os de
Sitios Web Coá 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: SECCION DE INICIO

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

tiene esta sección)

Presentar la estructura, las generalidades y las unidades temáticas con que

cuenta el curso de Diseño de Sitios 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)

Tendencias de Diseño Web. Maida (2017). 5 tendencias del diseño web

para el año 2017. Recuperado de: https://www.youtube.com/watch?
v=YqTFlY5kkco.

Tendencias de Diseño Web. Castaño (2017). 10 Tendencias de Diseño

Web para 2017 y 2018. Recuperado de: https://www.youtube.com/watch?
v=LWajvdpFn_c.

Logo UNAD. UNAD (2017). Imagen PNG. Logo Universidad Nacional Abierta
y a Distancia. Recuperado de:
https://sur.unad.edu.co/templates/unadgeneral/images/logoUNAD.png
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Baá sicas Tecnologíáa e Ingenieríáa Programa: Ingenieríáa de Sistemas Curso: Disenñ os de
Sitios Web Coá digo: 301122

Logo HTML. w3c.org (2017). 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)

El curso de Diseño de Sitios Web está dirigido a estudiantes que estén

interesados en el diseño web y la administración básica de sitios web.

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

uso de GIT y GIHUB para gestionar proyectos colaborativos de diseño web,
HTML5 y CSS3 para creación de contenidos en formato web como páginas y
sitios Web.

El curso esta estructurado en 3 unidades didácticas:

Unidad 1. Introducción al Diseño Web.

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

HTML 5.
CSS3.

Las tres unidades abordan aspectos de desarrollo , implementación y

administración de proyectos de diseño web, para el curso se define a su vez
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 interactivo como OVAS, Tutoriales y Vídeos,
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. (Sillabus Curso de
Diseño Web, 2017)

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: INTRODUCCION

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

tiene esta sección)
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Baá sicas Tecnologíáa e Ingenieríáa Programa: Ingenieríáa de Sistemas Curso: Disenñ os de
Sitios Web Coá digo: 301122

Presentar los conceptos básicos de Diseño 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)

Lectura Aplicaciones Web. Zofío Jiménez, J. (2013). Aplicaciones web.

[N.p.]: Macmillan Iberia, S.A. Recuperado

de:http://bibliotecavirtual.unad.edu.co:2162/openurl?sid=EBSCO
%3aedsebk&genre=book&issn=&ISBN=9788415656654&volume=&issue=&
date=&spage=&pages=&title=Aplicaciones+web&atitle=Aplicaciones+web&a
ulast=&id=DOI%3a&site=ftf-live

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
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Baá sicas Tecnologíáa e Ingenieríáa Programa: Ingenieríáa de Sistemas Curso: Disenñ os de
Sitios Web Coá digo: 301122

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 la

bienvenida al curso de Diseño de Sitios Web. En esta sección encontrará los
conceptos básicos y la introducción al fabuloso mundo del Diseño Web.

Contenido.

Actualmente la cultura Web está presente en nuestra vida diaria. Cualquier

persona, sobre todo estudiantes de Diseño de aplicaciones Web, 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 un dominio y que comparten una dirección en la Web.
Hoy por hoy, muchos son los sitios web que se pueden encontrar en
Internet. De hecho, cualquier institución pública o privada posee un sitio en
la Web.

El siguiente video presenta los conceptos básicos de desarrollo web. Te

invitamos a verlo.

Concepto Básicos

En el siguiente link encontrará un documento con información sobre

planificación de interfaces, uso de estilos, implantación de contenido
multimedia, desarrollo de webs accesibles, entre otros temas interesantes.
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Baá sicas Tecnologíáa e Ingenieríáa Programa: Ingenieríáa de Sistemas Curso: Disenñ os de
Sitios Web Coá digo: 301122

Diseño de Interfaces Web

El siguiente documento contiene información sobre evolución de las

aplicaciones web, lenguaje de marcas, herramientas de comunicación y
colaboración en línea y otros temas de mucha importancia para el diseño
web.

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: HTML5

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

tiene esta sección)

Dar a conocer los conceptos básicos, estructura y nuevas características de

HTML 5.
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Baá sicas Tecnologíáa e Ingenieríáa Programa: Ingenieríáa de Sistemas Curso: Disenñ os de
Sitios Web Coá digo: 301122

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)

Guía de HTML. Vega, Van Der Henst (2011). Guía HTML. Recuperado de:

https://radiosyculturalibre.com.ar/biblioteca/PROGRAMACION/HTML5/Curso-
HTML5-v1.pdf

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

https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Baá sicas Tecnologíáa e Ingenieríáa Programa: Ingenieríáa de Sistemas Curso: Disenñ os de
Sitios Web Coá digo: 301122

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)

Presentación.

Estimado estudiante en esta sección encontrará los conceptos básicos,

estructura y nuevas características de HTML 5. Bienvenidos…

Contenido.

HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del

lenguaje HTML. En conjunto con CSS3, define los nuevos estándares de
desarrollo web, rediseñando el código para resolver problemas y
actualizándolo 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)

El siguiente link le permitirá ingresar y descargar una Guía Básica de HTML

5.

Guía HTML 5
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Baá sicas Tecnologíáa e Ingenieríáa Programa: Ingenieríáa de Sistemas Curso: Disenñ os de
Sitios Web Coá digo: 301122

5. Contenido informativo del OVI por secciones

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)

Presentar las diversas características y novedades de CSS3, con lecturas y

videos cortos en los que se puede encontrar explicaciones sencillas y
ejemplos.

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_a
ntonio_navajas.html

CSS3 y HTML5. Damián De Luca y Alejandro De Luca (2010). CSS3 y

HTML5. Recuperado de: http://html5.dwebapps.com/que-es-css3/.

Introducción a CSS3. Peña, G. [Geekytuts]. (2016, febrero 24). Aprende

HTML5 y CSS3 - Introducción al CSS - Video 8 [Archivo de video].
Recuperado de https://www.youtube.com/watch?v=NKYCOrnZomU

Como Insertar CSS. Peña, G. [Geekytuts]. (2016, febrero 25). Aprende

HTML5 y CSS3 - Cómo Insertar CSS - Video 9 [Archivo de video].
Recuperado de https://youtu.be/hMIBsaZn0VA

Selectores en CSS. Peña, G. [Geekytuts]. (2016, febrero 26). Aprende

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

HTML5 y CSS3 - Selectores Básicos de CSS - Video 10 [Archivo de video].

Recuperado de https://www.youtube.com/watch?v=ydC4j9BAf6w

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 (Cascading Style Sheets o 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,
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación -
VIACIEscuela: Ciencias Baá sicas Tecnologíáa e Ingenieríáa Programa: Ingenieríáa de Sistemas Curso: Disenñ os de
Sitios Web Coá digo: 301122

móviles, impresoras u otros dispositivos capaces de mostrar contenidos web.

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

de nuestras páginas y es uno de los conocimientos fundamentales que todo
diseñador web debe manejar a la perfección para realizar su trabajo.
(Damián De Luca y Alejandro De Luca (2010).
http://html5.dwebapps.com/que-es-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.

 Introducción a CSS3.
 Como Insertar CSS.
 Selectores en CSS.
 HTML5: HEADER, NAV, UL, LI con CSS3.
 HTML5: SECTION, ASIDE, FOOTER CON CSS3.
 Menú Desplegable con HTML5 y CSS3.

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