Universidad Nacional Abierta y a Distancia UNAD - Vicerrectora Acadmica y de Investigacin - VIACI

Escuela: Ciencias Bsicas Tecnologa e Ingeniera Programa: Ingeniera de Sistemas

Curso: Diseos de Sitios Web Cdigo: 301122

Unidad 1: Fase de Diseo - Crear el Guin y la maquetacin

para un OVI en formato WEB con HTML5 y CSS3.

Presentado a:
Mauricio Perdomo Vargas
Tutor

Entregado por:

Kelly Johanna Garavito Motta

Cdigo: 40740587

Grupo: 301122_43

UNIVERSIDAD NACIONAL ABIERTA Y A DISTANCIA - UNAD

ESCUELA DE CIENCIAS BSICAS TECNOLOGA E INGENIERA
SEPTIEMBRE DE 2017
FLORENCIA
 Universidad Nacional Abierta y a Distancia UNAD - Vicerrectora Acadmica y de Investigacin - VIACI
Escuela: Ciencias Bsicas Tecnologa e Ingeniera Programa: Ingeniera de Sistemas
Curso: Diseos de Sitios Web Cdigo: 301122

ACTIVIDAD FASE DE PLANEACION Y ANALISIS

CURSO DISEOS DE SITIOS WEB - COD. 301122

FORMATO GUION SITIO WEB DEL OVI

Diseado Por: Director Curso

CURSO: Diseos de Sitios Web

CODIGO: 301122

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

especficos para que se construye este OVI)

Objetivo general:

Fundamentar tericamente a los estudiantes sobre las generalidades bsicas del Diseo Web
para que puedan utilizar de forma correcta los lenguajes HTML5 y CSS3, aplicarlos en la
construccin de Sitios Web e implementarlos a travs de sistemas de control de versiones.

Objetivo especfico 1:

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

Objetivo especfico 2:

Brindar documentacin para que el estudiante utilice de forma correcta los lenguajes
HTML5 y CSS3 para aplicarlos en la solucin de problemas de construccin de Sitios Web.

Objetivo especfico 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 actualizacin.
 Universidad Nacional Abierta y a Distancia UNAD - Vicerrectora Acadmica y de Investigacin - VIACI
Escuela: Ciencias Bsicas Tecnologa e Ingeniera Programa: Ingeniera de Sistemas
Curso: Diseos de Sitios Web Cdigo: 301122

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

de acuerdo al nmero de secciones que vaya a crear en el OVI)

Nombre de la seccin que se creara en el OVI: SECCION DE INICIO

2.1 Objetivo de la seccin: (Registre a continuacin el objetivo que

tiene esta seccin)

Presentar la estructura, las generalidades y las unidades temticas con que

cuenta el curso de Diseo de Sitios Web.

2.2 Recursos de consulta que usara en la seccin: (coloque el nombre

del material que usara para crear los contenidos de la seccin y el enlace
de descarga de los mismos sean estos Texto, Imgenes, Audios o Vdeos)

Tendencias de Diseo Web. Maida (2017). 5 tendencias del diseo web

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

Tendencias de Diseo Web. Castao (2017). 10 Tendencias de Diseo

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 - Vicerrectora Acadmica y de Investigacin - VIACI
Escuela: Ciencias Bsicas Tecnologa e Ingeniera Programa: Ingeniera de Sistemas
Curso: Diseos de Sitios Web Cdigo: 301122

2.3 Redacte un borrador del contenido de lectura en formato de

texto que tendr la seccin: (Sea este la presentacin de la seccin, el
contenido o ambos; redacte un borrador del texto que publicara como
contenido en la seccin coloque un subttulo para identificar si corresponde
a la presentacin de la seccin o el contenido de lectura de la seccin)

El curso de Diseo de Sitios Web est dirigido a estudiantes que estn

interesados en el diseo web y la administracin bsica de sitios web.

Presenta introduccin, profundizacin e informacin complementaria sobre el

uso de GIT y GIHUB para gestionar proyectos colaborativos de diseo web,
HTML5 y CSS3 para creacin de contenidos en formato web como pginas y
sitios Web.

El curso esta estructurado en 3 unidades didcticas:

Unidad 1. Introduccin al Diseo Web.
HTML 5.
CSS3.

Las tres unidades abordan aspectos de desarrollo , implementacin y

administracin de proyectos de diseo 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 Vdeos,
que se complementan con la aplicacin de actividades acadmicas en lnea y
la utilizacin de canales sncronos y asncronos de comunicacin para el
desarrollo del proceso acadmico que propone el curso. (Sillabus Curso de
Diseo Web, 2017)
 Universidad Nacional Abierta y a Distancia UNAD - Vicerrectora Acadmica y de Investigacin - VIACI
Escuela: Ciencias Bsicas Tecnologa e Ingeniera Programa: Ingeniera de Sistemas
Curso: Diseos de Sitios Web Cdigo: 301122

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

de acuerdo al nmero de secciones que vaya a crear en el OVI)

Nombre de la seccin que se creara en el OVI: INTRODUCCION

3.1 Objetivo de la seccin: (Registre a continuacin el objetivo que tiene

esta seccin)

Presentar los conceptos bsicos de Diseo de Sitios Web, Sistemas de Control

de Versiones, aplicaciones web y diseo de interfaces web.

3.2 Recursos de consulta que usara en la seccin: (coloque el nombre del

material que usara para crear los contenidos de la seccin y el enlace de
descarga de los mismos sean estos Texto, Imgenes, Audios o Vdeos)

Lectura Aplicaciones Web. Zofo Jimnez, 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 Diseo de Interfaces Web. Crcoles Tendero, J. E. (2015). Diseo

de interfaces web. Recuperado de:
http://bibliotecavirtual.unad.edu.co:2077/lib/unadsp/reader.action?docID=1104
6236

Video Conceptos Bsicos de Desarrollo Web. Farias Navarro (2013).

Conceptos Bsicos de Desarrollo Web, Curso de HTML y CSS. Recuperado de:
https://www.youtube.com/watch?v=ddJng5IST1I
 Universidad Nacional Abierta y a Distancia UNAD - Vicerrectora Acadmica y de Investigacin - VIACI
Escuela: Ciencias Bsicas Tecnologa e Ingeniera Programa: Ingeniera de Sistemas
Curso: Diseos de Sitios Web Cdigo: 301122

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

que tendr la seccin: (Sea este la presentacin de la seccin, el contenido
o ambos; redacte un borrador del texto que publicara como contenido en la
seccin coloque un subttulo para identificar si corresponde a la presentacin
de la seccin o el contenido de lectura de la seccin)

Presentacin.
Estimado estudiante, la Universidad Nacional Abierta y a Distancia le da la
bienvenida al curso de Diseo de Sitios Web. En esta seccin encontrar los
conceptos bsicos y la introduccin al fabuloso mundo del Diseo Web.

Contenido.
Actualmente la cultura Web est presente en nuestra vida diaria. Cualquier
persona, sobre todo estudiantes de Diseo de aplicaciones Web, sabe o ha odo
hablar de lo que es un sitio web. Un sitio web es un conjunto de pginas web
agrupadas bajo un dominio y que comparten una direccin en la Web. Hoy por
hoy, muchos son los sitios web que se pueden encontrar en Internet. De hecho,
cualquier institucin pblica o privada posee un sitio en la Web.

El siguiente video presenta los conceptos bsicos de desarrollo web. Te invitamos

a verlo.
Concepto Bsicos

En el siguiente link encontrar un documento con informacin sobre planificacin

de interfaces, uso de estilos, implantacin de contenido multimedia, desarrollo de
webs accesibles, entre otros temas interesantes.

Diseo de Interfaces Web

El siguiente documento contiene informacin sobre evolucin de las aplicaciones

web, lenguaje de marcas, herramientas de comunicacin y colaboracin en lnea
y otros temas de mucha importancia para el diseo web.

Aplicaciones Web
 Universidad Nacional Abierta y a Distancia UNAD - Vicerrectora Acadmica y de Investigacin - VIACI
Escuela: Ciencias Bsicas Tecnologa e Ingeniera Programa: Ingeniera de Sistemas
Curso: Diseos de Sitios Web Cdigo: 301122

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

de acuerdo al nmero de secciones que vaya a crear en el OVI)

Nombre de la seccin que se creara en el OVI: HTML5

4.1 Objetivo de la seccin: (Registre a continuacin el objetivo que

tiene esta seccin)

Dar a conocer los conceptos bsicos, estructura y nuevas caractersticas de

HTML 5.

4.2 Recursos de consulta que usara en la seccin: (coloque el nombre

del material que usara para crear los contenidos de la seccin y el enlace
de descarga de los mismos sean estos Texto, Imgenes, Audios o Vdeos)

Gua de HTML. Vega, Van Der Henst (2011). Gua 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 - Vicerrectora Acadmica y de Investigacin - VIACI
Escuela: Ciencias Bsicas Tecnologa e Ingeniera Programa: Ingeniera de Sistemas
Curso: Diseos de Sitios Web Cdigo: 301122

4.3 Redacte un borrador del contenido de lectura en formato de

texto que tendr la seccin: (Sea este la presentacin de la seccin, el
contenido o ambos; redacte un borrador del texto que publicara como
contenido en la seccin coloque un subttulo para identificar si corresponde
a la presentacin de la seccin o el contenido de lectura de la seccin)

Presentacin.
Estimado estudiante en esta seccin encontrar los conceptos bsicos,
estructura y nuevas caractersticas de HTML 5. Bienvenidos

Contenido.

HTML5 (HyperText Markup Language, versin 5) es la quinta revisin del

lenguaje HTML. En conjunto con CSS3, define los nuevos estndares de
desarrollo web, rediseando el cdigo para resolver problemas y
actualizndolo as a nuevas necesidades. No se limita solo a crear nuevas
etiquetas o atributos, sino que incorpora muchas caractersticas 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 Gua Bsica de HTML 5.

Gua HTML 5
 Universidad Nacional Abierta y a Distancia UNAD - Vicerrectora Acadmica y de Investigacin - VIACI
Escuela: Ciencias Bsicas Tecnologa e Ingeniera Programa: Ingeniera de Sistemas
Curso: Diseos de Sitios Web Cdigo: 301122

5. Contenido informativo del OVI por secciones

Nombre de la seccin que se creara en el OVI: CSS3

5.1 Objetivo de la seccin: (Registre a continuacin el objetivo que tiene
esta seccin)
Presentar las diversas caractersticas 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 seccin: (coloque el nombre del
material que usara para crear los contenidos de la seccin y el enlace de
descarga de los mismos sean estos Texto, Imgenes, Audios o Vdeos)
Gua Completa de CSS3. Navajas Ojeda (2017). Gua Completa de CSS3.
Recuperado de:
http://stadium.unad.edu.co/ovas/10596_9136/gua_completa_sobre_css3_anto
nio_navajas.html
CSS3 y HTML5. Damin De Luca y Alejandro De Luca (2010). CSS3 y HTML5.
Recuperado de: http://html5.dwebapps.com/que-es-css3/.
Introduccin a CSS3. Pea, G. [Geekytuts]. (2016, febrero 24). Aprende
HTML5 y CSS3 - Introduccin al CSS - Video 8 [Archivo de video]. Recuperado
de https://www.youtube.com/watch?v=NKYCOrnZomU
Como Insertar CSS. Pea, G. [Geekytuts]. (2016, febrero 25). Aprende
HTML5 y CSS3 - Cmo Insertar CSS - Video 9 [Archivo de video]. Recuperado
de https://youtu.be/hMIBsaZn0VA
Selectores en CSS. Pea, G. [Geekytuts]. (2016, febrero 26). Aprende
HTML5 y CSS3 - Selectores Bsicos 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 - Vicerrectora Acadmica y de Investigacin - VIACI
Escuela: Ciencias Bsicas Tecnologa e Ingeniera Programa: Ingeniera de Sistemas
Curso: Diseos de Sitios Web Cdigo: 301122

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

que tendr la seccin: (Sea este la presentacin de la seccin, el contenido
o ambos; redacte un borrador del texto que publicara como contenido en la
seccin coloque un subttulo para identificar si corresponde a la presentacin
de la seccin o el contenido de lectura de la seccin)

Presentacin.
Estimado estudiante, en esta seccin encontrar informacin sobre las diversas
caractersticas y novedades de CSS3. Bienvenidos.

Contenido.
Mientras que HTML nos permite definir la estructura de una pgina 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 representacin en diferentes
dispositivos, ya sean pantallas de equipos de escritorio, porttiles, mviles,
impresoras u otros dispositivos capaces de mostrar contenidos web.
Las hojas de estilo nos permiten definir de manera eficiente la representacin de
nuestras pginas y es uno de los conocimientos fundamentales que todo
diseador web debe manejar a la perfeccin para realizar su trabajo. (Damin De
Luca y Alejandro De Luca (2010). http://html5.dwebapps.com/que-es-css3/)

El siguiente enlace permite ingresar y descargar una Gua Completa de CSS3.

Gua Completa de CSS3

En cada uno de los siguientes enlaces encontrara videos con temas relacionados
con el funcionamiento de CSS3.
Introduccin 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 - Vicerrectora Acadmica y de Investigacin - VIACI
Escuela: Ciencias Bsicas Tecnologa e Ingeniera Programa: Ingeniera de Sistemas
Curso: Diseos de Sitios Web Cdigo: 301122

MAQUETACION.