Guion OVI - Fabian - Muñoz

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_48
FORMATO GUION SITIO WEB DEL OVI
Diseñado Por: Fabián Muñoz
A continuación se presenta el formato de Guion para el desarrollo de la actividad de la

Fase de Planeación y Análisis, revise muy bien las instrucciones para que realice un
correcto diligenciamiento del mismo.
Éxitos!!!
1. Objetivos del OVI (describa mediante el registro de 1 objetivo general y tres

específicos para que se construye este OVI)
Objetivo general: Desarrollar y entender los conceptos del Diseño de sitios Web,
destacando las hojas de estilo CSS.
Objetivo específico 1: comprender las hojas de estilos internas (CSS – Estilos Internos)
Objetivo específico 2: Analizar las hojas de estilos externas (CSS – Estilos Externos)
Objetivo específico 3: Explicar la Selectores de CSS

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: PAGINA PRINCIPAL
2.1 Objetivo de la sección: (Registre a continuación el objetivo que

tiene esta sección)
Explicar la introducción al OVI.
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)
Utilizare textos y Videos
Texto: fuente : Franklin Gothic Book tamaño: 14 pts
Videos: OVI Diseño Sitios Web : https://www.youtube.com/watch?

v=HFPrmKFxLk0
Imágenes: HTML https://desarrolloweb.com/home/html
CSS https://formadortionline.blogspot.com/2015/12/css3.html
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)
En este post, realizaremos una breve descripción, guía o apoyo.

Utilizando técnicas, programas y videos demostraremos la facilidad
para crear, diseñar o bocetar OVI.
También abarcaremos como temática de segundo impacto, las hojas

de estilo, las cuales permiten modificar estética y visualmente una
página web, dándole el toque o la esencia del diseñador,
conoceremos de manera introductoria sus temáticas fundamentales y
como implementarlas al HTML.
Nombre de la sección que se creara en el OVI: CSS3: Estilos internos

Explicar que es una hoja de estilo interna, como crearla y como aplicarla.

Vídeos)
Texto: fuente Microsoft Phags tamaño: 14 pts

Videos: Curso Básico de Html: Estilo CSS Internos

https://www.youtube.com/watch?v=mbW6u8tKTSI

sección)
CSS INTERNO
Vamos a ver ahora cómo podemos definir esos estilos en la cabecera del
documento HTML usando la siguiente sintaxis:
<head>
…
<style type="text/css">
elementoAfectadoPorElEstilo {
propiedad1ParaEseTipoDeElemento
s:valor;
s:valor;
s:valor;
…
propiedadnParaEseTipoDeElemento
s:valor;
}
</style>
</head>
Las diferentes propiedades y valores se pueden poner en una misma línea o

en distintas líneas según se prefiera (siempre separados mediante punto y
coma).
Dentro de las etiquetas <head> … </head> incluiremos una etiqueta de

apertura de declaración de estilos <style type=”text/css”>, a continuación
colocaremos la definición de tantos estilos como deseemos y cerraremos la
declaración con </style>. En HTML 5 no es necesario especificar type
=”text/css” pero de momento seguimos recomendando que se use esta
sintaxis.
En nuestro código de ejemplo el cambio de los elementos del menú para que
tengan el texto color verde y el icono o símbolo de viñeta de color rojo se
haría de esta forma:
<!DOCTYPE html>

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web
aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos,
libros">
<style type="text/css">
ul {color:red;}
a {color:green; text-decoration: none;}
</style>
</head>


<body>

<div>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>

<br />

<div>

<div>
<div>Menú</div>
<hr/>
<ul>
<li><a href="#">Inicio</a></li>
<li> <a href="libros.html">Libros de programación</a> </li>
<li> <a href="cursos.html">Cursos de programación</a> </li>
<li> <a href="humor.html">Humor informático</a> </li>
</ul>
</div>


</html>

Puedes comprobar que hemos usado las mismas propiedades CSS y los
mismos valores que usábamos en línea.
Visualiza la página en tu navegador. El resultado para el menú será el mismo

que cuando aplicamos CSS en línea:
Nombre de la sección que se creara en el OVI: CSS3: Estilos Externos

Explicar que es una hoja de estilo externa, como crearla y como aplicarla.

Vídeos)
Texto: fuente Segoe UI Black tamaño: 16 pts
Videos: Creación y vinculación hoja de estilos CSS a un documento

HTML https://www.youtube.com/watch?v=zzEefTCphvE

sección)
CSS EXTERNO
Aunque el CSS interno nos permite unificar en una declaración todos los
estilos para un archivo html, seguimos teniendo el problema de tener que
repetir la definición de estilos en la cabecera de cada uno de los archivos
html de nuestro desarrollo web. Si el desarrollo tiene pocos archivos quizás
sea menos problemático, pero cuando el desarrollo tiene cientos o miles de
archivos sí se convierte en un verdadero problema, ya que cada vez que
introdujéramos cambios habría que hacerlo en los cientos o miles de archivos
de que constara el desarrollo.
Para solventar esta solución se ideó la declaración externa de CSS, basada

en declarar los estilos CSS en un archivo independiente que puede servir
como referente para dotar de estilos a decenas, cientos o miles de archivos
html, que únicamente deberán invocar el nombre de archivo utilizando una
sintaxis específica. De este modo un cambio en los estilos habrá que hacerlo
únicamente en el archivo de estilos correspondiente, lo cual supone una gran
ventaja. Incluso un cambio completo de los estilos de una página web se
puede conseguir simplemente sustituyendo el archivo correspondiente.
Vamos a generar un archivo de estilos independiente. Para ello abre el editor

de texto que estés usando y crea un archivo con el siguiente contenido:
/* Comentario en CSS estilos

aprenderaprogramar.com*/
ul {color:red;}
a {color:green; text-decoration: none;}
Seguimos usando las mismas propiedades CSS y los mismos valores que
hemos usado en la forma CSS en línea y en la forma CSS interna.
Los contenidos que se encuentren entre los símbolos /* …. */ serán

considerados comentarios y se pueden usar para introducir información del
autor del archivo, versión, etc. así como para escribir aquellas aclaraciones
sobre los estilos que se consideren necesarias. Un comentario puede
comprender una o varias líneas según se desee.
Elige Guardar Como… y guarda el archivo con un nombre y extensión css,

por ejemplo estilos.css. Asegúrate que la extensión del archivo sea css. No
es válido si no tiene esta extensión.
En nuestro archivo HTML eliminaremos la definición de estilos interna y

dejaremos sólo la invocación al archivo escrita con la siguiente sintaxis:
<head>
…
<link rel="stylesheet" type="text/css"
href="rutaDelArchivo.css">
</head>

link es una etiqueta que se usa en HTML para establecer vínculos entre un
documento HTML y otros recursos como una imagen de icono o una hoja de
estilos CSS. En este caso se indica con la propiedad rel (relación o
relationship) que el documento HTML debe usar los estilos definidos como
texto/css en un archivo con el nombre indicado. Ten en cuenta que si como
ruta de archivo indicas simplemente el nombre del archivo, éste debe
encontrarse en la misma carpeta en que se encuentre el documento HTML. Si
el archivo CSS se encuentra en otra carpeta deberás indicarlo escribiendo
una URL completa u bien una URL relativa que determine la ruta.
Nosotros ubicaremos de momento el archivo CSS en la misma carpeta que el

archivo HTML. En el archivo HTML tendremos lo siguiente:
<!DOCTYPE html>

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web
aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos,
libros">
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>

</html>

Ahora procedemos a visualizar el archivo HTML en nuestro navegador. Si se

está cargando la hoja de estilos correctamente deberemos obtener el mismo
resultado que habíamos obtenido con la aplicación de estilos interna. Prueba
a hacer distintos cambios en el archivo css y visualiza los resultados.
Nombre de la sección que se creara en el OVI: CSS3: Selectores CSS

Explicar que es un Selector CSS, como crearlo y como aplicarlo.


Vídeos)
Texto: fuente Aharoni tamaño: 16 pts
Videos: 4. Curso de CSS – Selectores : https://www.youtube.com/watch?

v=rps1MC-XdEY

sección)
Selector universal
Se utiliza para seleccionar todos los elementos de la página. El siguiente

ejemplo elimina el margen y el relleno de todos los elementos HTML (por
ahora no es importante fijarse en la parte de la declaración de la regla CSS):
*{
margin: 0;
padding: 0;
El selector universal se indica mediante un asterisco (*). A pesar de su

sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se
pueda aplicar a todos los elementos de una página.
Selector de tipo o etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con
el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la
página:
p{
...
Para utilizar este selector, solamente es necesario indicar el nombre de una

etiqueta HTML (sin los caracteres < y >) correspondiente a los elementos

que se quieren seleccionar.
Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos. Un

elemento es descendiente de otro cuando se encuentra entre las etiquetas de
apertura y de cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos <span> de

la página que se encuentren dentro de un elemento <p>:
p span { color: red; }
Si el código HTML de la página es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
El selector p span selecciona tanto texto1 como texto2. El motivo es que en

el selector descendente, un elemento no tiene que ser descendiente directo

del otro. La única condición es que un elemento debe estar dentro de otro
elemento, sin importar el nivel de profundidad en el que se encuentre.
Al resto de elementos <span> de la página que no están dentro de un

elemento <p>, no se les aplica la regla CSS anterior.
Selector de clase
Si se considera el siguiente código HTML de ejemplo:
<body>
<p>Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector

universal (*) no se puede utilizar porque selecciona todos los elementos de
la página. El selector de tipo o etiqueta (p) tampoco se puede utilizar porque
seleccionaría todos los párrafos. Por último, el selector descendente (body p)
tampoco se puede utilizar porque todos los párrafos se encuentran en el
mismo sitio.
Una de las soluciones más sencillas para aplicar estilos a un solo elemento de
la página consiste en utilizar el atributo class de HTML sobre ese elemento
para indicar directamente la regla CSS que se le debe aplicar:
<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
A continuación, se crea en el archivo CSS una nueva regla

llamada destacado con todos los estilos que se van a aplicar al elemento.
Para que el navegador no confunda este selector con los otros tipos de
selectores, se prefija el valor del atributo class con un punto (.) tal y como
muestra el siguiente ejemplo:
.destacado { color: red; }
Selectores de ID
En ocasiones, es necesario aplicar estilos CSS a un único elemento de la

página. Aunque puede utilizarse un selector de clase para aplicar estilos a un
único elemento, existe otro selector más eficiente en este caso.
El selector de ID permite seleccionar un elemento de la página a través del

valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento
de la página porque el valor del atributo id no se puede repetir en dos
elementos diferentes de una misma página.
La sintaxis de los selectores de ID es muy parecida a la de los selectores de

clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto
(.) como prefijo del nombre de la regla CSS:
#destacado { color: red; }

<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>
En el ejemplo anterior, el selector #destacado solamente selecciona el

segundo párrafo (cuyo atributo id es igual a destacado).
Combinación de selectores básicos
CSS permite la combinación de uno o más tipos de selectores para restringir

el alcance de las reglas CSS. A continuación se muestran algunos ejemplos
habituales de combinación de selectores.
.aviso .especial { ... }
El anterior selector solamente selecciona aquellos elementos con

un class="especial" que se encuentren dentro de cualquier elemento con
un class="aviso".
Si se modifica el anterior selector:
div.aviso span.especial { ... }
Ahora, el selector solamente selecciona aquellos elementos de

tipo <span> con un atributo class="especial" que estén dentro de cualquier
elemento de tipo <div> que tenga un atributo class="aviso".
La combinación de selectores puede llegar a ser todo lo compleja que sea

necesario:
ul#menuPrincipal li.destacado a#inicio { ... }
MAQUETACION O Mockups

Guion OVI - Fabian - Muñoz

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Guion OVI - Fabian - Muñoz

Загружено:

Авторское право:

Доступные форматы

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

ACTIVIDAD FASE DE PLANEACION Y ANALISIS

CURSO DISEÑOS DE SITIOS WEB - COD. 301122_48

FORMATO GUION SITIO WEB DEL OVI

Diseñado Por: Fabián Muñoz

A continuación se presenta el formato de Guion para el desarrollo de la actividad de la

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

Objetivo específico 3: Explicar la Selectores de CSS

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

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

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

Explicar la introducción al OVI.

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

Utilizare textos y Videos

Texto: fuente : Franklin Gothic Book tamaño: 14 pts

Videos: OVI Diseño Sitios Web : https://www.youtube.com/watch?

Imágenes: HTML https://desarrolloweb.com/home/html

2.3 Redacte un borrador del contenido de lectura en formato de

En este post, realizaremos una breve descripción, guía o apoyo.

También abarcaremos como temática de segundo impacto, las hojas

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

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

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

Utilizare textos y Videos

Texto: fuente Microsoft Phags tamaño: 14 pts

Videos: Curso Básico de Html: Estilo CSS Internos

2.3 Redacte un borrador del contenido de lectura en formato de

Las diferentes propiedades y valores se pueden poner en una misma línea o

Dentro de las etiquetas <head> … </head> incluiremos una etiqueta de

Visualiza la página en tu navegador. El resultado para el menú será el mismo

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

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

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

Utilizare textos y Videos

Texto: fuente Segoe UI Black tamaño: 16 pts

Videos: Creación y vinculación hoja de estilos CSS a un documento

2.3 Redacte un borrador del contenido de lectura en formato de

Para solventar esta solución se ideó la declaración externa de CSS, basada

Vamos a generar un archivo de estilos independiente. Para ello abre el editor

/* Comentario en CSS estilos

Los contenidos que se encuentren entre los símbolos /* …. */ serán

Elige Guardar Como… y guarda el archivo con un nombre y extensión css,

En nuestro archivo HTML eliminaremos la definición de estilos interna y

Nosotros ubicaremos de momento el archivo CSS en la misma carpeta que el

archivo HTML. En el archivo HTML tendremos lo siguiente:

Ahora procedemos a visualizar el archivo HTML en nuestro navegador. Si se

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

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

Explicar que es un Selector CSS, como crearlo y como aplicarlo.

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

Utilizare textos y Videos

Texto: fuente Aharoni tamaño: 16 pts

Videos: 4. Curso de CSS – Selectores : https://www.youtube.com/watch?

2.3 Redacte un borrador del contenido de lectura en formato de

Se utiliza para seleccionar todos los elementos de la página. El siguiente

El selector universal se indica mediante un asterisco (*). A pesar de su

Selector de tipo o etiqueta

Para utilizar este selector, solamente es necesario indicar el nombre de una

etiqueta HTML (sin los caracteres < y >) correspondiente a los elementos

Selecciona los elementos que se encuentran dentro de otros elementos. Un

El selector del siguiente ejemplo selecciona todos los elementos <span> de

p span { color: red; }