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

Escuela: Ciencias Básicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas

Curso: Diseños de Sitios Web Có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 - VIACI
Escuela: 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

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 teóricamente a los estudiantes sobre las generalidades básicas del Diseño Web
para que puedan utilizar de forma correcta los lenguajes HTML5 y CSS3, aplicarlos en la
construcción de Sitios Web e implementarlos a través de sistemas de control de versiones.

Objetivo específico 1:

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

Objetivo específico 2:

Brindar documentación para que el estudiante utilice de forma correcta los lenguajes
HTML5 y CSS3 para aplicarlos en la solución de problemas de construcció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 actualización.
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación - VIACI
Escuela: 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: 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

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 - VIACI
Escuela: Ciencias Básicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas
Curso: Diseños de Sitios Web Código: 301122

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.
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)
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación - VIACI
Escuela: 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: INTRODUCCION

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

esta sección)

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&g
enre=book&issn=&ISBN=9788415656654&volume=&issue=&date=&spage=&p
ages=&title=Aplicaciones+web&atitle=Aplicaciones+web&aulast=&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=1104
6236

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 - VIACI
Escuela: Ciencias Básicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas
Curso: Diseños de Sitios Web Có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.

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

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.

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 - VIACI
Escuela: Ciencias Básicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas
Curso: Diseños de Sitios Web Có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 - VIACI
Escuela: 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

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_anto
nio_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
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
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación - VIACI
Escuela: Ciencias Básicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas
Curso: Diseños de Sitios Web Código: 301122

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, 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.
 Universidad Nacional Abierta y a Distancia – UNAD - Vicerrectoría Académica y de Investigación - VIACI
Escuela: Ciencias Básicas Tecnología e Ingeniería Programa: Ingeniería de Sistemas
Curso: Diseños de Sitios Web Código: 301122

MAQUETACION.