PROCESO DIRECCIÓN DE FORMACIÓN PROFESIONAL INTEGRAL

FORMATO GUÍA DE APRENDIZAJE

IDENTIFICACIÓN DE LA GUIA DE APRENDIZAJE

Denominación del Programa de Formación: TÉCNICO EN DISEÑO E INTEGRACION MULTIMEDIA

Código del Programa de Formación: 524139
Nombre del Proyecto: CREACIÓN DE EMPRESAS ENFOCADAS A LA SOLUCIÓN DE NECESIDADES MULTIMEDIALES DENTRO DEL SECTOR PRODUCTIVO.
Fase del Proyecto EJECUCIÓN
Actividad de Proyecto: Identificar los elementos del diseño gráfico para la composición de la multimedia
Actividad de Proyecto: Comprender, aprehender, retroalimentar los conceptos y lenguajes del diseño web teniendo en cuenta un plan de pre-producción.
Competencia: DISEÑAR LA SOLUCIÓN MULTIMEDIAL DE ACUERDO CON EL INFORME DE ANÁLISIS DE LA INFORMACIÓN RECOLECTADA
Resultados de Aprendizaje Alcanzar:
CREAR EL PROTOTIPO DE LA MULTIMEDIA SIGUIENDO EL PATRÓN ESTABLECIDO EN EL GUIÓN, EL MAPA DE NAVEGACIÓN Y EL STORYBOARD
PROGRAMAR ELEMENTOS INTERACTIVOS DE LA MULTIMEDIA SIGUIENDO LAS ESPECIFICACIONES DEL MAPADE NAVEGACIÓN Y EL STORYBOARD.
INCORPORAR LOS ELEMENTOS DE LA MULTIMEDIA SEGÚN LOS CRITERIOS DEL STORYBOARD
INTERPRETAR EL GUIÓN MULTIMEDIA (LITERARIO Y TÉCNICO) DE ACUERDO A LOS CONCEPTOS DE DISEÑO GRÁFICO.
480
Duración de la Guía: 80 horas
horas

A. PREPRODUCCIÓN WEB
2. PRESENTACIÓN

Desde los años 90´s el internet no ha dejado de reinventarse y se ha ido convirtiendo en un medio de conexión a nivel global, desde el cual es
posible compartir información, aprender, opinar y mantenerse al corriente con las tendencias y noticias mundiales. Internet ha logrado con ello
ampliar las fronteras del conocimiento, la economía y la cultura. Este sistema tiene un protocolo llamado World Wide Web (www) que nos permite
acceder a diferentes documentos de hipertexto y plataformas web desde cualquier parte del mundo haciendo uso de diferentes navegadores como
lo son Microsoft Edge, Chrome, Mozilla, Safari, Opera, entre otros.

1
3. FORMULACIÓN DE LAS ACTIVIDADES DE APRENDIZAJE

3.1 Reflexión Inicial

Descripción de la actividad: Tengamos en cuenta que la planeación de un sitio web nos permite identificar los fines y mecanismos comunicativos,
organizar el flujo de información, preparar el material, redactar los contenidos, poner a prueba las características y navegabilidad del sitio, de tal
modo que a partir de una fase de pre-producción podemos diseñar una serie de instrumentos que servirán de referente en la fase de producción.

3.2 Actividades de Reflexión inicial. Actividad Individual

Descripción de la actividad: Reflexione sobre las siguientes preguntas. Responda por escrito en un informe a mano o en Word y envíelo adjunto al
desarrollo de toda la guía.

1. ¿Hace cuánto tiempo utiliza internet?

2. ¿Conoce la diferencia entre un navegador y un buscador?
3. ¿Qué navegador y qué buscador utiliza?
4. ¿Alguna vez utilizó otro?

Algunos navegadores han dejado de existir porque no han evolucionado a la misma velocidad que otros; no han tenido en cuenta las tendencias y
sus herramientas no han cubierto las necesidades de los usuarios. Esto no ha causado que desaparezcan (no todos al menos), pero si les ha vuelto
obsoletos. Con el diseño ocurre otro tanto, pues los sitios cuyo estilo no reflejen las tendencias, dejen de ofrecer los servicio mínimos esperados en
un sitio o no sean compatibles con todos los navegadores, pasarán al olvido. Es por eso muy importante que los diseños que desarrollemos para un
sitio web sean testeados en diferentes plataformas.

3.3 Actividades de contextualización e identificación de conocimientos necesarios para el aprendizaje. Actividad Individual

HTML5 provee básicamente, tres características: estructura, estilo y funcionalidad. Adicionalmente, es posible relacionar otros lenguajes de
programación para el desarrollo frontend como lo son CSS y JavaScript. Estas tecnologías son independientes pero actúan como una sola unidad
organizada bajo las especificaciones de HTML5. Por su parte el lenguaje CSS (Hoja de estilo en cascada) es un lenguaje que nos permite utilizar un
campo de propiedades para maquetar y diseñar una plataforma web.

2
1. Realice un análisis sobre el siguiente sitio web www.hierro.tv identificando las secciones que lo componen.
2. Señale con un marcador la marca de la página web.
3. Señale cuál es el menú y qué secciones tiene.
4. Señale dónde está el pie de página.
5. ¿Cuáles son las redes sociales que utiliza hierro TV, en qué lugar se ubican?

Tenga en cuenta el siguiente esquema para entender la estructura básica de un sitio web. Encabezado (Header), cuerpo (Bod) y pie de página
(Footer).

3
4
5
3.4 Actividades de apropiación del conocimiento (Conceptualización y Teorización). Actividad individual.

1. Estimado estudiante, lea la siguiente historia y tenga presente la definición de los elementos con los que Lorenza ha venido trabajando
(palabras en negrita), revise la definición de cada concepto al final de la lectura.

Estudio de caso
Lorenza es jefe de proyectos digitales en una agencia de Diseño llamada ADD. Recientemente ingresó un requerimiento para desarrollar una plataforma web
a un empresa del sector financiero -Banco Forte-, el cliente entregó un brief y toda la información necesaria para el desarrollo digital.

Con toda la información Lorenza se dispone a desarrollar la sábana de contenidos de la mano del UX, al finalizar la sábana de contenidos el UX debe trabajar
en el respectivo mapa de navegación. Lorenza debe reunirse con el cliente para lograr la aprobación en este documento.

El contacto en el Banco Forte aprueba esta información y Lorenza habla de nuevo con el UX para comenzar con las propuestas de wireframes de la página
web. Cuando el UX termina este trabajo lo escala al equipo creativo, habla con el diseñador UI quién se encargará de construir la propuesta de moodboard y
la siguiente fase será el respectivo mockup.

Con el mockup finalizado Lorenza vuelve a reunirse con su cliente quién está muy satisfecho por el trabajo realizado en ADD, ya que han logrado plasmar en
el proyecto digital los objetivos planteados en el brief inicial. Ahora Lorenza y su equipo pueden comenzar a desarrollar la plataforma del Banco Forte.

El anterior texto nos demuestra que entender cada una de las fases en el desarrollo de un proyecto digital (preproducción, producción y postproducción)
genera grandes beneficios en las empresas pues se minimizan tiempos de producción y se logran las metas.

Brief Requerimientos puntuales del proyecto, se debe tener la mayor cantidad de información (la cual ya se ha recolectado
previamente). Información de la empresa, situación del mercado además referentes de otras empresas. Características y generalidades
del producto (imagen, posicionamiento, diferenciación, atributos del proyecto, plaza, precio y promoción), competencia y perfil del
consumidor.
UX Campo que se encarga del conjunto de factores y elementos relativos a la interacción del usuario con un entorno o dispositivo,
quien revisa todos los elementos de interacción y aprobación del producto o dispositivo.
UI Interfaz de usuario es el medio con que el usuario puede comunicarse con una máquina, equipo, computadora o dispositivo, y
comprende todos los puntos de contacto entre el usuario y el equipo.
Sábana de contenido Datos de cada una de las secciones y elementos que se van a implementar en una página o proyecto web.

6
Esquema de navegación Los sistemas de navegación son los elementos de una interfaz que permiten la navegación por las
diferentes secciones y páginas que componen el sitio web.
Wireframe Esquema básico donde se organiza toda la información de la web
Moodboard Tablero de inspiración, se dispone tanto color, tipografías con los tamaños sugeridos para: títulos, subtítulos,
párrafos, entre otros. Estilo gráfico de la página web, para este caso. Normalmente se realizan varias propuestas de moodboard
para lograr desarrollar el mockup.
Mockup Término en inglés que significa maqueta. En proyectos multimedia, un mockup o maqueta es un prototipo de cómo se
verá la web.

2. Elabore una historieta en el siguiente espacio que incluya las definiciones de cada uno de los conceptos.

7
8
3.5 Actividades de contextualización e identificación de conocimientos necesarios para el aprendizaje.

Teniendo en cuenta las actividades desarrolladas previamente desarrolle

Sábana de contenidos del proyecto (Tener en cuenta el formato modelo). Teniendo en cuenta la definición dada de sábana de contenido,
desarrolle la descripción de los elementos a utilizar en la página web de su proyecto.

Sabana de contenido proyecto web

PÁGINA WEB
ELEMENTO DESCRIPCIÓN PROYECTO
URL www.nombre del proyecto.com
Extensión de la página dependiendo del
proyecto .edu .co .com entre otros
Logo En qué lugar estará dispuesto.
Lema Realice un lema de máximo una oración
Registro ¿Es necesario que el usuario cree un cuenta? ¿Si o No. Por qué?
Carro de
compras ¿Este elemento es necesario para el proyecto? ¿Si o No. Por qué?
Búsqueda Barra de búsqueda
Menú Inicio
Sección (Nombre)
Sección (Nombre)
Sección (Nombre)

Tenga en cuenta todo el material requerido para

cada una de las secciones:imágenes (fotografías,
ilustraciones, esquemas, mapas), videos;
animaciones; textos (Títulos, subtítulos, párrafos)

9
 Contenido

Pie de página Correo:

Teléfono:
Políticas de privacidad
Año:
Ciudad:
Red social:
Derechos de autor

Nota: Si requiere realizar una sábana de contenido más extensa, puede hacerlo en hojas de cuaderno y anexar a la guía.

10
Mapa de navegación del sitio web del proyecto. Realice el esquema de navegación en una hoja cuadriculada con cada sección de la página web
propuesta en su sábana de contenido, para ello tenga en cuenta el siguiente ejemplo:

11
3.6 Actividades de apropiación del conocimiento (Conceptualización y Teorización).

Realice el wireframe del sitio seleccionado de acuerdo al siguiente ejemplo donde la navegación se realiza por scroll, es decir en sentido vertical, de
esta manera se disponen todas las secciones. Luego recorte y/o dibuje de acuerdo a los iconos que se le presentan después del ejemplo, disponga:
textos, títulos, subtítulos, imágenes, redes sociales, carrito de imágenes; formas como círculos, cuadrados, triángulos, entre otros de acuerdo a su
propuesta y ubíquelos en el formato de doce columnas.

12
13
14
15
16
SIGNIFICADO DE CADA UNO DE LOS ICONOS QUE ENCUENTRA A LA IZQUIERDA

Texto: Se emplea para crear cajas de texto.

Círculo: Marca la posición de un espacio delimitado de forma circular.
Línea Horizontal: Se utiliza como separador de espacios.
Botón: Marca la posición de un botón
Anuncio: Marca el espacio destinado para anuncios publicitarios.
Calificación: Indica que el usuario podrá interactuar calificando un elemento o producto.
Barra de Navegación: Indica la posición de una barra de scroll, normalmente se usa para sub-ventanas insertas.
Menú desplegable: Marca la posición de un menú desplegable.
Rectángulo: Marca la posición de un espacio delimitado de forma rectangular.
Imágen: Identifica la posición de una imagen, independientemente de su forma. Puede ir en compañía de un botón.
Elipse: Marca la posición de un espacio delimitado de forma elíptica.
Triángulo: Marca la posición de un espacio delimitado de forma triangular.
Línea Vertical: Se utiliza como separador de espacios.
Contador numérico: Utilizado generalmente en sitios de comercio para especificar la cantidad de productos a ordenar.
Barra de menú: Marca la posición de la barra de menú.
Lista: Marca la posición de un listado.
Chat: Indica la existencia de un servicio de atención vía chat.
Navegar Galería: Indica que se colocará una galería automática.
Ícono de carga: Indica que se aloja un elemento que requiere de precarga.
Buscar: Indica la ubicación de la barra de búsqueda.
Navegación paso a paso: Marca que se deben completar pasos para avanzar, por ejemplo un formulario o proceso de
compra.
Logo: Marca la posición del logo.
Espacio de reserva Imagen: Identifica que el usuario podrá subir contenido en imágen.
Botón de Activación: Funciona como un “interruptor”.
Menú de Acordeón: Es una lista cuyo contenido se puede “expandir” o “contraer”.
Control deslizante: Se emplea para calificar o controlar funciones como el zoom, también para navegar contenidos.
Línea: Puede tener funciones estéticas o de separación de espacios.
Paginación: Indica que una galería o página de resultados ocupa más de una página. También ayuda al usuario a
localizarse.
Imágen de perfil: Marca la ubicación de una imagen de perfil o Avatar.
Simulación de texto: Marca la ubicación y espacio aproximado de un texto que no ha sido definido aún.

17
18
4. ACTIVIDADES DE EVALUACIÓN

Evidencias de Aprendizaje Criterios de Evaluación Técnicas e Instrumentos de Evaluación

Evidencias de Conocimiento

Desarrolla los elementos de preproducción de la página Estructura el mapa de navegación según las 1. Formulación de
web donde incluya los términos consultados en la fase especificaciones del guión técnico. preguntas.
de reflexión, contextualización e identificación y 2. Estudio de caso.
apropiación del conocimiento. 3. Lista de chequeo.
Evidencias de Desempeño Participa de manera activa Realiza el boceto de la interfaz gráfica del
en las actividades planteadas. proyecto aplicando técnicas creativas y
Evidencias de Producto elementos del diseño gráfico.

Historieta. Sábana de contenidos, mapa de navegación,

wireframe, moodboard y mockup.

B. PRODUCCIÓN WEB: ACTIVIDAD HTML Y CSS

2. PRESENTACIÓN
Con la siguiente guía usted dará inicio a los conocimientos previos de estructuración de la capa de presentación o interfaz de usuario de un sitio
web (frontend) a partir de los lenguajes hmtl (Lenguaje de Marcado de Hipertexto) Para ello procederá a la consulta y reflexión colectiva de
conceptos, herramientas y elementos requeridos para la construcción de un landing page (página de aterrizaje). Posteriormente se debe desarrollar
un taller individual que le guiará paso a paso en el procedimiento de maquetación de un sitio a partir del modelo de cajas. Finalmente, se
verificarán los resultados obtenidos resolviendo las inquietudes generales del grupo, se propone trabajo autónomo para abordar en casa y se
concluye la sesión identificando la importancia de la construcción idónea de una interfaz de usuario.

19
3. ACTIVIDADES DE APRENDIZAJE
Sin duda la industria tecnológica presenta un nuevo esquema de representación visual y de experiencia de usuario ante las novedades que se dan
en torno a los productos que se fabrican, por tal motivo, cada día requieren de profesionales expertos para cumplir con las demandas solicitadas
por el mundo contemporáneo, especialmente a lo que respecta al desarrollo de software. Es indispensable aclarar que este proceso ha sido
progresivo y desde los años 90´s se ha estructurado un estándar ante los lenguajes que se deben implementar y los recursos que facilitan la
elaboración de contenido. Para profundizar en este proceso, lea el articulo “CONOZCA CUALES SON LOS BENEFICIOS DE APRENDER A PROGRAMAR”
https://www.eltiempo.com/tecnosfera/novedades-tecnologia/beneficios-de-aprender-a-programar-40497, analice y discuta en clase lo que usted
comprende por programar escriba las ideas primarias y secundarias en un documento de Word a desarrollar en su sesión de clase correspondiente
y envíe a su instructor.

“CONOZCA CUALES SON LOS BENEFICIOS DE APRENDER A PROGRAMAR”

Aprender a programar es una gran idea en tiempos en los cuales la tecnología es la mano derecha de las personas: permite tomar decisiones
estructuradas y fomenta la creatividad.
Si bien programar es un lenguaje que puede resultar difícil de entender, expertos en el tema aseguran que en un futuro no muy lejano saber de
código computacional, su funcionamiento, etc., será una habilidad que todos deben tener, sin importar su profesión u oficio.
En entrevista con EL TIEMPO, Freddy Vega, director ejecutivo de Platzi, una herramienta en línea que ofrece cursos de programación, dijo que
escribir código ayuda a pensar de una manera más analítica, en vez de pensar con prueba y error.
“El software se comió al mundo, no hay nada que no hagamos en este momento que no tenga tecnología por detrás. Nosotros tenemos dos
opciones hoy en día: podemos ser simplemente consumidores o podemos ser una de las personas que crea. Quienes escriben código pueden tomar
un problema grande y romperlo en problemas pequeñitos. Eso es pensar de manera diferente”, agrega.
El experto detalla que uno de los mayores beneficios de ser programador es que es una de las profesiones con mayor demanda en la actualidad.
La Comunidad Colombiana de Diseño y Programación (ColombiaDev) realizó una encuesta con el objetivo de conocer el estado actual de los
programadores en nuestro país y entre sus resultados más importantes se encuentra que el 50 por ciento gana más de 40 millones al año, lo que
representa un salario de 3’333.000 pesos al mes, una cifra significativa teniendo en cuenta que más del 55 por ciento tiene menos de cinco años de
experiencia.
Según cálculos de Cisco, fabricante de tecnología, para el 2019 se necesitaron en Colombia 28.350 trabajadores en el sector de tecnologías y las
comunicaciones.
Vega, quien desarrolló su primer software a la edad de 12 años, asegura que si bien no hay una edad establecida para escribir código, sí es
importante que se enseñe desde el colegio, ya que permite que los niños tengan un pensamiento estructural para la construcción de software.

20
Por su parte, Germán Escobar, fundador de Make it Real, una plataforma que imparte clases sobre desarrollo web, explica que con la programación
es posible emprender. “Especializarme en esta área me ayudó a crear empresa y a mejorar la comunicación con las personas”, agrega.
Dice además que para comenzar a programar no es necesario saber matemáticas (como muchas personas lo creen), pero sí es primordial tener
disciplina.
Programar, un segundo idioma

Para el Ministerio de Tecnologías de la Información y las Comunicaciones programar es casi como dominar un segundo lenguaje y, por ende, es
posible ser parte de un mundo amplio que se conoce como ‘Cultura Digital’.
Las personas que optan por carreras relacionadas con tecnologías de información y afines tienen un amplio campo de acción en el sector TI y otros
sectores de la economía y en la generación de iniciativas de emprendimiento, lo que significa que pueden crear su propia empresa.

¿Hay una edad específica para aprender a programar?

Así como los idiomas, entre menos edad tenga la persona le será más fácil aprender y entender un lenguaje. No existe una edad determinada para
aprender a programar: se puede ser muy joven o muy viejo, y siempre la programación estará lista para ser parte de la vida de la persona.

3.1 ACTIVIDAD DE REFLEXIÓN INICIAL:

¿Qué es Diseño Web?

El diseño web implica trabajo relacionado con el layout y diseño de páginas online, así como la producción de contenido, aunque generalmente se
aplica a la creación de sitios web. En este caso, los diseñadores web crean las páginas utilizando lenguajes de marcado como HTML o XML. Por otro
lado, la parte visual de los sitios está a cargo del CSS, término utilizado para estilizar los elementos escritos en HTML. Por lo tanto, es común que los
diseñadores web usen ambos para construir un site porque juntos definirán cómo aparecerán las páginas en los navegadores. El proceso de
creación de sitios se puede realizar desde herramientas como NOTEPAD, ATOM, SUBLIME o DREAMWEAVER CC (que requerirá que el profesional
sepa más sobre los códigos) y CMS que son plataformas de administración de contenido Teniendo en cuenta la lectura anterior responda y socialice
los siguientes interrogantes con sus compañeros e instructor, en un documento de word a desarrollar en su sesión de clase correspondiente y envíe
a su instructor.

21
 1. Consulte y responda ¿Cuál es la importancia del diseño en un sitio web?

2. Consulte y responda ¿Con qué elementos debe contar una interfaz de usuario en un sitio web para considerarlo un buen diseño?

3. Consulte y describa un sitio web que considere tiene una buena interfaz gráfica, pero carece de funcionalidad en la búsqueda o
procesamiento de datos.

4. Describa un sitio web que considere tiene un buen diseño funcional, pero carece de apariencia estética o presenta elementos
deficientes como: botones, imágenes, texto, entre otros.

3.2 ACTIVIDAD DE CONTEXTUALIZACIÓN:

NOCIONES SOBRE HTML

¿QUÉ ES HTML?, siglas en inglés de HyperText Markup Language (‘lenguaje de etiquetas de hipertexto’), hace referencia al lenguaje de marcado
para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus
diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web,
como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización
dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. HTML se
considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el
estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

¿QUÉ ES UNA ETIQUETA?: HTML se trabaja con etiquetas (“tag” en inglés). Una etiqueta se abre y se cierra con los símbolos de menor qué y mayor
qué, respectivamente. Ejemplo: <table> La mayoría de los objetos tienen etiquetas de apertura y etiquetas de cierre. La forma de escribirlas se
muestra a continuación respectivamente: <table> </table>

SINTAXIS DEL ELEMENTO: El elemento es el componente básico de una página web. Una página web está compuesta por un conjunto de elementos

22
escritos en un orden concreto. Un elemento se compone de una etiqueta inicial (o de apertura) y una etiqueta final (o de cierre). La etiqueta final
se define con una barra inclinada y el nombre de la etiqueta inicial. En este ejemplo, <p> </p>, la etiqueta se llama “p” y define un párrafo de
texto de la página. La etiqueta inicial puede llevar atributos, pero la final nunca lleva. En HTML los atributos pueden llevar un valor. Por último, las
etiquetas pueden tener contenido, que es todo lo que se escriba entre la etiqueta inicial y la etiqueta final. El contenido puede estar formado por
otras etiquetas de HTML o puede ser simplemente texto como en este ejemplo.

ESTRUCTURA DE UN DOCUMENTO HTML

La estructura básica del html es:

<!DOCTYPE html> La etiqueta doctype declara el tipo de documento, por lo que esta señalando que este es un documento HTML.

<html> </html>: Esta etiqueta debe abarcar todo lo que constituya el documento.

<head> </head>: Contiene información que caracteriza el documento pero que no incluye objetos de la interfaz con los que interactúa el

usuario. incluye la siguiente información:

<title> </title> Título del documento.

23
 <meta charset="UTF-8"> Establece el tipo de codificación del documento.
<link href="estilos.css" rel="stylesheet" type="text/css"/> Enlace de archivos externos como hojas de estilos (css) y
programación de java script.
<body></body> La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro navegador.
Imágenes, textos, enlaces, video, etc…

Ejemplo de una estructura

HTML:

Organización del <body>

</body> en HTML5

DOCTYPE La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un documento HTML.

<!DOCTYPE html>
HTML Delimita el documento HTML.

24
 <html></html>
Atributo a destacar:

LANG Indica el lenguaje de contenido del código.

<html lang="es"></html>
HEAD El elemento head delimita la cabecera del documento, entre sus etiquetas contiene información como scripts, metadatos, estilos,
ubicación de documentos de estilos, título de la página, etc.

<head></head>
META Las meta etiquetas se utilizan para identificar propiedades del documento como por ejemplo el autor, el título y la descripción que
mostrarán los buscadores, etc.

<meta name="description" content="Descripción de la WEB">

Usos a destacar de META

META CHARSET Establece el tipo de codificación del documento.

<meta charset="UTF-8">

META TITLE Contiene el título que se mostrará en los buscadores.

<meta name="title" content="Título de la WEB">

25
 META DESCRIPTION Es el texto que se muestra bajo el título en los motores de búsqueda.

<meta name="description" content="Descripción de la WEB">

LINK Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este documento.

<link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/css"/>

Atributo a destacar de LINK

HREF Especifica la url donde se localiza la hoja de estilo.

BODY La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro navegador. Imágenes,
textos, enlaces, video, etc…

<body></body>

HEADER El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele encontrar el título, el logotipo y poco
más.

<header></header>
NAV Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces internos para movernos entre
nuestras diferentes secciones del sitio web.

<nav></nav>
A Representa un enlace o hipervínculo.

26
 <a href="http://dominio.com/seccion2.html">... </a>
Atributos a destacar de A

HREF Dirección URL hacia la que apunta el enlace.

H1, H2, H3, H4, H5, H6 Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más importante y H6 el menos
importante.

<h1></h1> <h2></h2> <h3></h3> <h4></h4>

SECTION La etiqueta section engloba una sección de texto, imágenes y otros elementos que guardan cierta relación entre ellos.
Normalmente siempre le podremos poner un título o encabezado.

<section></section>

ARTICLE La etiqueta article se suele encontrar dentro de una etiqueta section y sirve para dividir y ordenar los contenidos en su
interior.

<article></article>

DIV Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo.

<div></div>

27
P Entre las etiquetas P colocaremos un párrafo de texto.

<p></p>
IMG Esta etiqueta coloca una imagen en el documento mediante un enlace.

<img src="http://dominio.com/imagen.jpg" alt="paisaje">

Atributos a destacar.

ALT Representa el texto alternativo, muy importante para que los buscadores puedan obtener información de la imagen.
SRC URL donde se encuentra la imagen.

ASIDE Contiene información no vital o que no está estrechamente relacionada con el contenido principal de la página como podrían ser
banners de anuncios, citas o enlaces externos.

<aside></aside>

FOOTER Aquí encontraríamos el código perteneciente al pie de página, donde se suelen colocar los enlaces a textos legales, el copyright, etc.

<footer></footer>

Una herramienta útil para reconocer las diferentes etiquetas y sus usos en HTML 5, es una CHEAT SHEET, ello es un listado de las etiquetas que
pueden ser usadas, a continuación, el link que lo llevara a dicho listado:
https://mashtrelo.com/wp-content/uploads/2018/06/html5-cheat-sheet.jpg

28
3.3 ACTIVIDAD DE APROPIACIÓN HTML

1. Descargue e instale el editor web recomendado por el instructor o usar block de notas para desarrollar la actividad, recuerde que hay
editores pagos y gratuitos. Recuerde que el editor se llama block de notas porque cumple la misma función que una libreta de
apuntes. No se necesita computador para escribir código.
2. Crear una carpeta donde se guardarán los archivos a trabajar. Esta carpeta será el “Sitio Local” el cual contiene todos los archivos

(imágenes, estilos, html, videos, etc) que constituyen el sitio web. La organización también puede planificarse en medio análogo.

3. Al abrir el editor web o el block de notas, guarde el archivo con el nombre “index.html”

NOTA: Debe digitar literal la extensión del archivo, en este caso .html → Index es el archivo por defecto que buscará un explorador
cuando se digita un dominio cualquiera (ej: “mineducacion.gov.co”). Sin embargo, se puede configurar el servidor para que dirija la solicitud
a otro archivo.

· Nuestro primer ejercicio consiste en diseñar una plantilla de documento HTML para iniciar rápidamente todas nuestras páginas y
ahorrarnos escribir los elementos mínimos de una página. Para comenzar a escribir un código, podemos utilizar un editor de web o de
texto cualquiera. el diseño se verá así:

29
· Dentro de la etiqueta <header></header> se incluirá un encabezado de la web usando un <h1> así:

· Dentro de <nav> ubicara la etiqueta <a> y genera dos hipervínculos de su elección. asi:

· Dentro de <section> se creará una etiqueta <article> y dentro de ella se ubicara un encabezado y un párrafo, además se creará una
etiqueta <div> que contenga un párrafo y una imagen.

30
 · Dentro de <aside> se incluirá un encabezado, además se incluirá una etiqueta de hipervínculo asociado a una imagen, se le agregara un
encabezado y un párrafo

· Por último, se hará el <footer> dentro de él, se incluirá un encabezado, un link de política de cookies y un encabezado y un link relativo a
redes sociales

4. QUE ES CSS?

Las hojas de estilo en cascada (CSS, acrónimo de Cascading StyleSheets) son una herramienta fantástica para añadir presentación a los sitios web.
Pueden ayudar a ahorrar mucho tiempo y permiten diseñar sitios web de un modo totalmente nuevo. CSS es imprescindible para todos aquellos
que trabajen en el campo del diseño web. Para usar CSS es necesario tener una experiencia básica en HTML.

31
¿QUE SOFTWARE SE NECESITA?

Al igual que HTML, Todo lo que se necesita es un editor de texto sencillo y gratuito. Por ejemplo, Microsoft Windows incorpora un programa que se
llama Bloc de notas. Se localiza normalmente en el menú de Inicio, sección Todos los programas dentro de la carpeta Accesorios. Si no es éste,
puedes usar un editor de texto parecido.

Este tipo de editores de texto sencillos son ideales para aprender HTML y CSS puesto que no afectan o cambian el código. De esta manera, los
éxitos y errores sólo se te podrán atribuir a ti... y no al software

SINTAXIS DE CSS

La regla de CSS se compone de la siguiente manera:

selector (selector) a que etiqueta de HTML se aplica la propiedad, por ejemplo section h2

propiedad (property) determina la propiedad a usar en este caso font-family

valor (value) determina el valor de la propiedad, por ejemplo arial

Para abrir y cerrar la declaración en CSS se usa los corchetes { } , la continuidad entre una propiedad y un valor siempre va con el signo de dos
puntos : y para la separación de propiedades y valores se usa el punto y coma ; , tal como se ve en el ejemplo.

32
APLICAR CSS A UN DOCUMENTO HTML

En línea (el atributo style)

Un modo de aplicar CSS a HTML es usando el atributo de HTML style. Si ampliamos el ejemplo anterior sobre el color de fondo rojo, CSS se puede
aplicar así:

<html>
<head>
<title>Ejemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta es una página con fondo rojo</p>
</body>
</html>

Interno (la etiqueta style)

Otra forma es incluir el código CSS usando la etiqueta HTML <style> dentro de la etiqueta <head>. Por ejemplo, así:

<html>
<head>
<title>Ejemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta es una página con fondo rojo</p>
</body>
</html>

33
Externo (enlace a una hoja de estilo)

Una hoja de estilo externa es sencillamente un fichero de texto con la extensión .css. Como cualquier otro fichero, puedes colocar la hoja de estilo
en el servidor web o en el disco duro.

Para que ello funcione se debe crear un vínculo desde el documento HTML (por ejemplo, default.html) con la hoja de estilo (style.css). Dicho vínculo
se puede crear con una sencilla línea de código HTML:

<link rel="stylesheet" type="text/css" href="style/style.css" />

La línea de código debe insertarse en la sección de encabezado del código HTML, es decir, entre la etiqueta <head> y </head>. De esta manera:

<html>
<head>
<title>Mi documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...

COLOR

La propiedad color describe el color de primer plano de un elemento. Los colores se pueden introducir como valores hexadecimales, como en el
ejemplo anterior: #ff0000; o se pueden usar los nombres de los colores: "red" (rojo), o bien como valores rgb: (rgb(255,0,0)).

h1 {
color: #ff0000;
}

34
La propiedad background-color describe el color de fondo de los elementos. El elemento <body> contiene todo el contenido de un documento
HTML. Así pues, para cambiar el color de fondo de una página, la propiedad background-color debería aplicarse al elemento <body>.

body {
background-color: #FFCC66;
}

IMAGEN COMO FONDO

La propiedad CSS background-image se usa para insertar una imagen de fondo.

body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}

Por defecto, una imagen de fondo se posiciona en la esquina superior izquierda de la pantalla. La propiedad background-position te permitirá
cambiar este valor por defecto y posicionar la imagen de fondo en cualquier lugar de la pantalla que se requiera, a continuación, unos ejemplos.

Valor Descripción

background-position: 2cm 2cm La imagen se posiciona a 2 cm del margen izquierdo y a 2 cm del margen superior de la página

background-position: 50% 25% La imagen se posiciona en el centro de la página y un 25 % del margen superior de la misma

background-position: top right La imagen se posiciona en la esquina superior derecha de la página

35
FUENTES

La propiedad font-family se usa para establecer una lista ordenada de fuentes que se usarán para mostrar un elemento determinado o una
página web.

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}
h3 {font-family: "courier new", monospace;}

ESTILO DE LA FUENTE

La propiedad font-style define la fuente elegida bien con el valor normal, el valor italic o el valor oblique.

h1 {font-family: arial, verdana, sans-serif; font-style: oblique;}

h2 {font-family: "Times New Roman", serif; font-style: italic;}

PESO DE LA FUENTE

La propiedad font-weight describe qué intensidad o "peso" en negrita debería tener la fuente. Toda fuente puede tener los valores normal o
bold.

p {font-family: arial, verdana, sans-serif; font-weight: bold;}

TAMAÑO DE LA FUENTE

El tamaño de la fuente se establece por medio de la propiedad font-size.

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

36
Existe una diferencia clave entre las cuatro unidades anteriores. Las unidades 'px' (pixeles)y 'pt' (puntos), establecen el tamaño de la fuente de
forma absoluta, mientras que '%' y 'em' permiten al usuario ajustar el tamaño de la misma según considere oportuno.

COMBINACION DE PROPIEDADES

El orden de los valores para la propiedad font es:

font-style | font-variant | font-weight | font-size | font-family

y se escribiría de esta manera:

ABREVIADO NO ABREVIADO

p { p {
font: italic bold 30px arial, sans-serif; font-style: italic;
} font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}

CAJAS DE CSS

El modelo de caja en CSS describe las cajas que se generan a partir de los elementos HTML. El modelo de caja también contiene opciones detalladas
en lo referente al ajuste de márgenes, bordes, relleno (padding) y contenido de cada elemento. La siguiente imagen muestra cómo se construye el
modelo de caja:

37
MARGEN (margin)

Todo elemento tiene cuatro lados: derecho, izquierdo, superior e inferior. La propiedad margin hace referencia a la distancia desde cada lado
respecto al elemento colindante (o respecto a los bordes del documento).

38
 ABREVIADO NO ABREVIADO

body { body {
margin: 100px 40px 10px 70px; margin-top: 100px;
} margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}

RELLENO (padding)

La propiedad padding puede entenderse como "relleno". Esto tiene sentido puesto que el relleno (padding) no afecta a la distancia de un
elemento respecto a otros elementos, sino que sólo define la distancia interior entre el borde y el contenido del elemento.

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

BORDES (border)

La anchura del borde se define por medio de la propiedad border-width, que dispone de los valores thin, medium y thick, o de un valor
numérico indicado en píxeles. La propiedad border-color define el color del borde. Los valores de esta propiedad son los valores de color
normales, por ejemplo, "#123456" (en notación hexadecimal), "rgb (123,123,123)" (en notación RGB) o "yellow" (por nombre del color). El
estilo del borde se define por medio de la propiedad border-style, que dispone de los valores dotted, dashed, solid, doublé, groove,
ridge, inset, outset. Si no queremos mostrar ningún borde, se puede usar los valores none o hidden.

39
 ABREVIADO NO ABREVIADO

p { p {
border: 1px solid blue; border-width: 1px;
} border-style: solid;
border-color: blue;
}

ANCHURA (widht) y ALTURA (height)

Con la propiedad width se puede definir la anchura concreta de un elemento, ademase puede influir en la altura de un elemento con la propiedad
height.

aside {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}

ELEMENTOS FLOTANTES (float)

Los elementos se pueden hacer flotar a la derecha o a la izquierda usando la propiedad float. Es decir, que la caja con su contenido flota bien a la
derecha o la izquierda de un documento (o de la caja contenedora)

40
 aside{
position:relative;
background-color:#7A7;
width:18%;
height:55%;
color:#FFF;
float:left;
}

LA PROPIEDAD CLEAR

La propiedad clear se usa para controlar cómo se comportarán los elementos que siguen a los elementos flotados de un documento.

La propiedad clear puede tomar los valores: left, right, both o none. El principio consiste en que, si clear, por ejemplo, se fija en both para
una caja, el borde del margen superior de esta caja siempre estará debajo del borde del margen inferior para las posibles cajas flotantes que vengan
de arriba.

footer{
position:relative;
background-color:#AA7;
width:98%;
height:5%;
color:#FFF;
clear:both;
}

41
POSICIONAMIENTO ABSOLUTO (posicion:absolute)

Para posicionar un elemento de forma absoluta, la propiedad position se establece como absolute. Posteriormente puedes usar las
propiedades left, right, top, y bottom para colocar la caja.

#box1 {
position:absolute;
top: 50px;
left: 50px;
}

POSICIONAMIENTO ABSOLUTO (posicion:relative)

Para posicionar un elemento de forma relativa, la propiedad position se establece como relative. La diferencia entre posicionamiento
absoluto y relativo consiste en cómo se calcula la posicion.

nav {
position:relative;
background-color:#CC9;
color:#FFF;
width:98%;
height:13%;
margin: 0px auto;
}

4.1 ACTIVIDAD DE APROPIACION CSS

Para la segunda actividad de apropiación es necesario tener en cuenta la maqueta de HTML desarrollada con anterioridad (punto 3.3 ACTIVIDAD DE
APROPIACIÓN HTML)

A partir de los elementos que la componen el aprendiz deberá generar lo siguiente:

42
 1. Crear un documento externo de estilos.css en block de notas, editor web o a mano.

2. Darle estilo al selector body generándole los valores de las siguientes propiedades: width, height, font-family, font-weight, background-
color.
3. Darle estilo al selector header generándole los valores de las siguientes propiedades: position, background-color, color, width, height,
margin.
4. Darle estilo al selector nav generándole los valores de las siguientes propiedades: position, background-color, color, width, height,, margin.
5. Darle estilo al selector section generándole los valores de las siguientes propiedades: position, float, background-color, width, height, color.
6. Darle estilo al selector article generándole los valores de las siguientes propiedades: background-color, width, height, color.
7. Darle estilo al selector aside generándole los valores de las siguientes propiedades: position, background-color, width, height, color, float.
8. Darle estilo al selector footer generándole los valores de las siguientes propiedades: Position, background-color, width, height, color, clear.

NOTA: Si el desarrollo de su ejercicio es de manera digital recuerde que debe enviar a su instructor la carpeta raíz de la página web, si el ejercicio es
desarrollado a mano debe enviar la actividad en hojas de papel, marcadas con su NOMBRE, COLEGIO Y NUMERO DE FICHA.

4. ACTIVIDADES DE EVALUACIÓN

Evidencias de Aprendizaje Criterios de Evaluación Técnicas e Instrumentos de Evaluación

Evidencias de Conocimiento

Conceptos técnicos, teóricos, de contextualización y de apropiación Estructura el mapa de 1. Formulación de preguntas.

navegación según las 2. Desarrollo de prototipos
Evidencias de Desempeño especificaciones de la 3. Lista de chequeo.
rúbrica
trabajo y participación activa dentro y fuera de la sesión

Evidencias de Producto

prototipos off-line de html y css.

43
C. Desarrollo de concepto gráfico e imágenes del proyecto web

3.1 Reflexión Inicial

Una vez se han establecido las bases conceptuales o la fase de preproducción que determinará el desarrollo y elaboración del proyecto web, y
hemos entendido los conceptos básico de HTML5 y CSS3, es necesario comenzar la producción de contenidos del proyecto, el objetivo de esta guía
es construir los elementos visuales específicos que harán parte de la página web.

Lo primero que se realizará es el diseño del concepto gráfico de manera análoga, es decir dibujando en su cuaderno o en hojas blancas-, lo que
permitirá finalizar el diseño del aspecto visual de los elementos inanimados del proyecto y desarrollar la interfaz de la multimedia, lo cual es
fundamental para continuar con el desarrollo de los elementos.

Todo esto nos ayudará a tener claridad en el mensaje visual más adecuado a nuestro público objetivo.

3.2 Actividad Individual

Antes de entender el tema de lenguaje visual vamos a trabajar en el concepto gráfico del proyecto web, para ello recomendamos buscar referentes
para aplicar al concepto de diseño acorde tanto al tipo de producto y/o servicio que presta como al público o usuario. Tenga en cuenta si es más
adecuado trabajar ilustración o fotografía.

Le invitamos a responder las siguientes preguntas:

1. Qué tipo de proyecto web está trabajando (educativo, publicitario, de entretenimiento, servicios)
2. Su proyecto requiere un tipo de imagen específico (fotografía o ilustraciones).
3. Piense en proyectos digitales que utilicen ilustraciones. De algunos ejemplos de estos proyectos digitales (página web, aplicación, serie
animada).
4. Ahora recuerde o revise material donde se utilice la fotografía cite algunos ejemplos y reflexione sobre por qué es más adecuada la
fotografía para mostrar los productos o servicios en este proyecto.
5. Luego de revisar y responder las preguntas previas redacte en un documento ¿qué tipo de estilo aplicará a su sitio web? y ¿por qué?, tenga
en cuenta su público objetivo, requiere ilustración de personajes, escenarios, elementos o por el contrario serán fotografías de productos
específicos.

44
Sus respuestas deben realizarse en un documento con portada: nombre, curso al que pertenece, número de ficha e institución educativa. Puede
desarrollar el trabajo a mano o imprima un documento con sus respuestas.

Luego de revisar el concepto gráfico más adecuado al proyecto web nos adentramos al tema del lenguaje visual y más adelante lo integraremos al
audiovisual (sonido y movimiento). Cuando vemos caricaturas, comics, revistas, libros, anuncios en redes sociales, películas, noticias, entre otros,
podemos identificar ciertos tipos de ángulos y de planos en la imagen; seguramente ya conoces el ángulo frontal y el plano general por que lo has
visto en imágenes tanto estáticas como animadas. A continuación verás los tipos de planos y ángulos audiovisuales y luego desarrollarás una
actividad en torno a estos conceptos:

Estos son los planos de encuadre de las imágenes, cuando planeamos nuestros proyectos es importante bocetar y lograr el estilo gráfico definitivo,
para ello vamos a aprender los conceptos que aplicaremos en el momento de desarrollar nuestro material.

45
Ahora vamos con los planos:

Siempre encontramos mezcla entre planos y ángulos, por ejemplo,

en este caso el plano es denominado medio y el ángulo es normal
o también llamado frontal. Este tipo de encuadre es muy utilizado
en noticias o programas de entretenimiento.

En esta imagen se observa tanto el ángulo picado con el plano general En este ejemplo vemos el ángulo contrapicado con el plano
donde se alcanza a ver parte del espacio donde se encuentra el sujeto. americano, este tipo de plano se utilizaba en las películas de
pistoleros o western.

46
 El encuadre de esta imagen está realizado por medio de un ángulo En esta imagen se observa tanto el ángulo nadir con el plano
cenital y plano entero. completo.

Aplica los conocimientos

En el siguiente espacio identifica, dibuja y describe cada uno de los tipos de planos y ángulos. Revisa el material que tengas en casa: libros, revistas
o programas de televisión.

47
48
3.3 Actividades de contextualización e identificación de conocimientos necesarios para el aprendizaje. Actividad Individual.

El lenguaje visual y entender para qué sirve cada tipo de plano y ángulo nos ayuda a configurar un mensaje acorde al proyecto que estamos
desarrollando. Tengamos en cuenta que cuando hablamos de imágenes podemos trabajar con distintas tipologías: ilustración, fotografía, mapas,
esquemas, entre otros, por esta razón,no es lo mismo un proyecto web educativo dirigido a niños y niñas de 6 a 8 años donde se busca reforzar
temas de lectura y para ello se requieren ilustraciones, que una tienda virtual para jóvenes de 24 a 27 años donde se ofrecerá vestuario y
accesorios, en este caso se necesitan fotografías de los productos específicos.

Además reflexione si serán imágenes a color o en blanco y negro, o tendrán un tipo de interacción o hipervínculo, por ejemplo: se utilizarán
fotografías a blanco y negro pero cuando el usuario pase el mouse por encima su transición será a color y además cuando se dé click en la imagen
esta se ampliará y tendrá una descripción del producto.

1. Responda la siguiente pregunta

¿Cuál es el tipo de imagen que va a implementar en el proyecto web? Elijalo según los temas planteados y la tipología web a desarrollar.

2. Revise el material elaborado previamente, tanto la sábana de contenidos como los wireframes, allí se decidieron en qué espacios se ubican las
imágenes del proyecto. Ahora tenga en cuenta tanto planos como ángulos para dibujar una a uno cada boceto de sus imágenes.
3. Realice un esquema teniendo en cuenta el siguiente ejemplo donde se trabaja sección, el dibujo y la descripción de ángulo y plano de la imagen.

49
Nombre de la sección (Ej: inicio, nosotros, contáctenos según lo trabajado en sabana de contenidos)

Dibuje tipo de ángulo y plano de composición de la imagen Dibuje tipo de ángulo y plano de composición de la imagen

Describa el ángulo y el plano utilizado Describa el ángulo y el plano utilizado

Nota: este esquema se aplica a todas las secciones y para cada imagen que se va a trabajar.

50
4. Realice un boceto de cada imagen según el lugar, la intención comunicativa y la sección en la cual se va a ubicar, tenga en cuenta el wireframe
que ya desarrolló:

1. Sección home o inicio, qué imágenes vas a realizar y cuántas. Cuáles serán los planos y ángulos que vas a trabajar en cada imagen.
2. Sección 2 qué imágenes vas a realizar y cuántas. Cuáles serán los planos y ángulos que vas a trabajar en cada imagen.
3. Sección 3 qué imágenes vas a realizar y cuántas. Cuáles serán los planos y ángulos que vas a trabajar en cada imagen.
4. Sección 4 qué imágenes vas a realizar y cuántas. Cuáles serán los planos y ángulos que vas a trabajar en cada imagen.
5. Sección 5 (Si aplica)

5. Entregue la actividad en hojas anexas a la presente guía.

4. ACTIVIDADES DE EVALUACIÓN

Evidencias de Aprendizaje Criterios de Evaluación Técnicas e Instrumentos de Evaluación

Evidencias de Conocimiento
Realiza el boceto de la interfaz
Desarrolla los elementos de preproducción de la página gráfica del proyecto aplicando 1. Formulación de preguntas.
web donde incluya los términos consultados en la fase técnicas creativas y elementos del 2. Ejercicio aplicado
de reflexión, contextualización e identificación y diseño gráfico. 3. Story board de imágenes del proyecto
apropiación del conocimiento. web.
3. Lista de chequeo.
Evidencias de Desempeño Participa de manera activa
en las actividades planteadas.

Evidencias de Producto Concepto gráfico. Aplicación de

ejercicio a los conceptos de planos y ángulos de
composición de la imagen. Desarrollo del story board de
las imágenes para el proyecto web.

51
D. Desarrollo del concepto narrativo y textos del proyecto web.

3.1 Reflexión Inicial

Ya se ha abordado la forma de crear un sitio web desde la preproducción o alistamiento de los contenidos a nivel conceptual. Se han desarrollado
los conocimientos de construcción del sitio a partir del código HTML y los estilos CSS. También se ha abordado el tema de generación de los
elementos gráficos finales del sitio. Corresponde ahora dirigirnos a los contenidos textuales. Con la siguiente guía se recordarán los aspectos
teóricos de la redacción en general y en específico, cómo crear textos adecuados y asertivos para el sitio web. Hay que tener en cuenta que, desde
la preproducción, el aprendiz ha ido construyendo una identidad y una narrativa que comunica y que no se debe romper o contradecir ahora que se
van a incluir textos.

Lectura de contexto:

Al hablar de narrativa, es fácil dejarse llevar por el concepto literario e imaginar que toda narración está sujeta a las normas de la dramaturgia
(Presentación, Desarrollo y Desenlace). Existen, sin embargo, otras maneras de narrar, algunas de las cuales ni siquiera emplean palabras.

Para poner la situación en un contexto comprensible, se sugiere un ejercicio de memoria en dirección a la nostalgia. Los videojuegos que
acompañaron la infancia son un ejemplo de narrativa. Y no nos referimos solamente a los títulos ricos en historia como The Witcher (Inspirado en
libros), Grand Theft Auto (Que jugado correctamente tiene una compleja historia para contar) o Age of Empires (con su fuerte componente
histórico); también hay narrativa en juegos de acción como Super Mario Bros (Con el tiempo, la narrativa se ha hecho más evidente (En Super Mario
World hay un texto introductorio), pero en su primera entrega, hay una narrativa no textual, no verbalizada en la que la acción sólo se desarrolla en
la medida que el jugador aprenda a moverse y en especial que domine la técnica de salto.

Se puede ir más allá, Tetris es un juego sin personajes, sin historia, sin otro objetivo que acumular piezas que caen indefinidamente, y que, al
hacerlo correctamente, desaparecen. Pero, mientras se juega, el jugador hila su propia historia, se involucra y cuando finalmente pierde, la
expresión es que “me maté”.

Los videojuegos actuales más populares apelan a una narración que se construye a partir de la interacción, la comunidad otorga el significado a los
personajes y a la misión. Fortnite maneja una mecánica principal muy similar, pero ha ido narrando una historia (no siempre comprensible) en la

52
medida que el mundo se ha ido modificando. La accesibilidad, el bajo costo, y un eficiente manejo de las redes sociales son parte de la formula de
éxito de estos juegos. Precisamente, en el manejo de las redes sociales, se puede apreciar el manejo de un lenguaje orientado a los gustos y
características del jugador. Apelan al desafío, a la emoción, al poder, la riqueza o lo que sea que garantice que el interés por el juego no decline.

Actividad Individual:

Realice una lectura de su proyecto hasta el momento actual (aún sin los textos) y responda las siguientes preguntas:

1. ¿Qué tipo de proyecto web se está trabajando?

2. ¿Qué sensaciones transmiten las imágenes seleccionadas para incluir en el proyecto? ¿Todas las imágenes transmiten la misma sensación?
3. Identifique el tono comunicativo que ha elegido para su proyecto y evalué si es consistente con la narración visual que desarrolló
4. Si el sitio no incluyera ningún tipo de texto, ¿qué acciones cree que el usuario se sentiría inclinado a tomar al navegar el sitio?
5. Luego de éste análisis, redacte un texto amplio, de por lo menos tres párrafos, describiendo el mensaje que transmite su proyecto y la
manera en la que le gustaría que fuera percibido. Igualmente, explique lo que desea transmitir con los textos que acompañarán al sitio y al
usuario final.

Nota: Sus respuestas y redacción deben realizarse en un documento con portada: nombre, curso al que pertenece, número de ficha e institución
educativa. Puede desarrollar el trabajo a mano o imprimir el documento. Anexe el documento al momento de entregar la guía.

3.2 Actividades de contextualización e identificación de conocimientos necesarios para el aprendizaje. Actividad Individual.
Existen diferentes estilos de lenguaje al momento de redactar un texto. Cada estilo está definido por el tipo de mensaje, el llamado a la acción
deseado y por supuesto, del receptor.

En la reflexión inicial, se menciona la narrativa sin palabras, y hay un par de buenos ejemplos que se pueden evocar. Para personas conocedoras del
mundo de la música y el teatro, “El barbero de Sevilla” tiene un significado y trae a la mente una historia y unas escenas particulares propias de la
Ópera. Pero para quienes crecimos viendo los dibujos animados de Bugs Bunny (Probablemente todos los colombianos con vida en la actualidad), la
música del Barbero de Sevilla nos trae a la mente escenas muy diferentes en las que un conejo atiende a un perplejo cazador. Esas divertidas
imágenes hacen parte de nuestra cultura.

53
Otro perfecto ejemplo de narración sin palabras es precisamente el caso que aplica al ejercicio de Moodboard que se abordó anteriormente. El
también llamado Tablero de Inspiración es uno de los primeros espacios para construir una narrativa visual del sitio web que se va a construir. En
cuanto a la narrativa textual, ésta debería abordarse (o al menos delimitarse) durante la creación de la sábana de contenidos y previa consideración
del público objetivo (o target) en la elaboración del brief del proyecto. Una vez más, vemos como todos los procesos están interconectados y los
resultados de cada paso se reflejan en los anteriores.

A continuación, se comparten desde lo general, hasta lo específico, algunos conceptos propios de la narrativa, el lenguaje y la construcción del
texto y su mensaje:

Funciones del Lenguaje:

Tomado de https://es.wikipedia.org/wiki/Uso_del_lenguaje

Todos los mensajes, orales y escritos, son importantes para el emisor y son emitidos con un propósito particular, tienen la intención comunicativa de dar a
conocer un suceso, una emoción, convencer, obtener un favor o realizar una actividad. Todos hablamos con una finalidad. Dentro de la comunicación lingüística se
emplean seis funciones.

1. Función referencial o representativa: Consiste en informar o transmitir un contenido o hecho tal como el emisor lo juzga.

La leyenda es una narración que pertenece a la tradición y cultura de un pueblo. // Perú es un país sudamericano.

2. Función apelativa o conativa: Influye, aconseja o llama la atención del receptor para que actúe de una determinada manera.

¡Cállate! // Observe las imágenes y responda a las siguientes preguntas.

3. Función expresiva o emotiva: Transmite o expresa los sentimientos o estado de ánimo del emisor.

!Te odio! // ¡Te quiero mucho! // ¡Qué alegría me da de verte!

4. Función fática o de contacto: entrar en contacto con el medio ambiente y las personas en este, sean conocidas o no. Se divide en tres etapas:

Primera etapa: el mensaje no es importante, se utilizan los clichés

Segunda etapa: el mensaje se utiliza la sincronización para darlo porque es importante

54
Tercera etapa: el mensaje es el mismo, pero surge una barrera que imposibilita darlo

5. Función metalingüística: Explica y aclara aspectos referidos al código, es decir, a la lengua.

La palabra texto deriva del latín "textum", que significa tejido.

Función poética o estética: Expresa mensajes de forma figurativa, y su interpretación no debe ser literal.

Las nubes, cuales copos de algodón esponjosos, flotan en el aire.

6. Función poética o estética: Expresa mensajes de forma figurativa, y su interpretación no debe ser literal.

Las nubes, cuales copos de algodón esponjosos, flotan en el aire.

Función sintomática: Expresa los síntomas del receptor al recibir el mensaje o los del emisor al emitirlo. Esto da información sobre ellos.
la voz, ropa, postura, acento, etc
Función lúdica: Esta se encuentra cuando, a través de un juego, se dan las funciones.

Actores del ejercicio comunicativo:

A nivel técnico, se queda corta la vieja descripción de Emisor-mensaje-receptor que se enseñaba antes. En vez de eso, se mencionan once factores
que intervienen en la transmisión de un mensaje:

 Fuente: Es la información propiamente dicha y el que exista antes del emisor permite expandir el ejercicio comunicativo más allá del habla
y mantiene su aplicación aún en tiempos del podcast y el video blog.
 Emisor: Es quien recoge la información y la codifica para construir un mensaje.
 Código: El sistema de signos y reglas de combinación de los mismos empleado para construir un mensaje. Es muy importante que exista
un código en común o la posibilidad de convertirlo a uno que el receptor pueda comprender.
 Canal: El medio empleado para transmitir el mensaje. En el escenario que nos atañe, el sitio web se utiliza para transmitir mensajes
codificados en forma de texto, imágenes, y elementos audiovisuales.
 El mensaje: La información recogida, codificada y transmitida. Su lectura y comprensión dependen en gran medida de las condiciones que
presenten los demás factores.

55
  La señal: Habla de la claridad con la que se percibe el mensaje, tiende a degradarse en el tiempo y la distancia. La interpretación al medio
web puede darse por la capacidad técnica de las redes de transmitir los datos. Así, una mala conectividad puede provocar que la página no
cargue correctamente o que se vean los textos sin imágenes.
 El contexto: Es un elemento lingüístico que hace que la lectura de una misma información sea diferente de acuerdo con los intereses,
conocimientos y circunstancias del emisor, el medio y el destinatario.
 La situación: Al contrario del contexto, no es una variable lingüística, sino que refleja el tiempo, el ambiente o el espacio que rodea el
mensaje y su transmisión.
 El ruido: Los elementos físicos o psíquicos que pueden llegar a impedir que el mensaje llegue de forma íntegra al receptor. En radio puede
ser interferencia, en la prensa y algunos sitios web, el ruido suele venir de una desorganización en la diagramación de textos o una
presencia exagerada o invasiva de publicidad.
 Redundancia. Menos, es más. La repetición sistemática genera ruido y genera rechazo en cuanto sugiere un intento de manipulación. De
manera que la cantidad de veces que se repite el mensaje (total o parcialmente) influye en la forma e intensidad en la que se va a captar.
 El Destinatario: La persona que descifra (interpreta bajo el mismo código o uno equivalente) el mensaje luego de que ha pasado por
medio de los demás factores. El destinatario puede o no recibir la información que venía de la fuente, dependiendo de, además de todo lo
anteriormente mencionado, su propio conocimiento y experiencia.

El lenguaje Publicitario:

Cuando los sitios web alojan una actividad comercial, sea porque ofrezcan bienes, servicios o simplemente difusión, aplica el uso del lenguaje
publicitario. A diferencia de otros lenguajes que buscan informar o involucrar al lector a participar de una historia, el lenguaje publicitario busca
persuadir o incitar una determinada acción por parte del destinatario. El lenguaje publicitario se emplea en la actividad política, como difusión de
mensajes de prevención y naturalmente, en la publicidad, para incentivar el consumo, la compra o contratación de lo ofertado.

1. Actividad Individual:

Identifique los elementos que correspondan a su proyecto y realice un documento en el que describa, en mínimo una página (letra normal, espacio
sencillo) el contenido y características de su sitio. Haga de esta redacción un “discurso de venta” demostrando los beneficios del sitio, del lenguaje
visual y textual sugerido y presente varios ejemplos de los textos que podrían ir allí.

56
Si está trabajando en grupo, reúnase (llamadas o chat) con sus compañeros y compartan su redacción. Como párrafo final, haga un análisis de las
similitudes o diferencias detectadas.

Realice la redacción a mano o en computador. Si tiene acceso a internet, suba la evidencia a su carpeta o de lo contrario anexe el documento a la
guía. Recuerde que toda entrega debe tener su respectiva portada.

Guion: Toda producción multimedia requiere de una cuidadosa planeación. Aún sin tratarse de una animación o un audiovisual, es importante
planear y tener una guía de antemano que contenga los datos que vamos a utilizar. El sitio web del proyecto debe tener, en su parte textual, un
guion que sirva de base para el trabajo a desarrollar.

2. En la siguiente tabla, encuentra diferentes tipos de texto utilizados en los sitios web, junto a una descripción para comprender la función y uso de
cada uno. Complete la tabla con los textos que considere necesarios para cada tipo que aplique en su proyecto.

TIPOS DE TEXTO DESCRIPCIÓN REDACCIÓN

Textos de cabecera Incluyen los botones que sean hipervínculos y dirijan al

usuario a otros enlaces; generalmente se usan las palabras,
quienes somos, servicios, productos, contacto; esto
dependerá directamente de la tipología de la página web.

Textos de sección Corresponden a textos específicos y laborados para

determinada sección, incluyen una información detallada
pero concisa de la sección desarrollada.

57
Texto Informativo Podría funcionar como textos que de manera persuasiva
lleven a los usuarios a entender datos informativos
relevantes ala contenido web y del objetivo del mismo.

Pie de fotos Hace parte de los textos claves pata identificar la

procedencia y autoría de las imágenes, cuando estas lo
requieran

Textos del Footer Incluyen los botones que sean hipervínculos y dirijan al
usuario a otros enlaces; generalmente se usan las palabras,
quienes somos, servicios, productos, contacto.

Por otra parte en estos textos en ocasiones se detalla el

mapa de navegación, y textos de ubicación o enlaces
internos de manera más detallada.

58
Derechos Usualmente se usa un texto que mencione quienes son los
reservados o el autor de la página web realizada.

Textos adicionales Son Textos que hacen parte de la parte de promoción,

descripción o uso de la web, se utilizan de manera no muy
frecuente en el diseño web, dependerá de nuevo de la
tipología u objetivo de la web.

3.3 Actividades de apropiación del conocimiento (Conceptualización y Teorización).

Características de los textos en web
Tomado de: https://www.globalcc.es/organizar-el-texto-en-el-diseno-de-tu-pagina-web/

Cuando pensamos en diseño web por lo general nos vienen a la cabeza aspectos como el color, la estructura y las imágenes. Sin embargo, no debemos olvidar que
al crear una página web el objetivo es transmitir información para lo que utilizamos, además de otros elementos, las palabras.

Y es que el contenido, es decir, el texto, debe tener protagonismo para que el mensaje cale entre los usuarios. Para ello hay que utilizar la tipografía adecuada,
jerarquizar la información en función de su importancia y lograr que sea legible.

Cuando una empresa de creación de páginas web afronta un proyecto de diseño y creación de web es consciente de que las personas tendemos a leer solamente
una parte de los mensajes. Por lo general, y salvo que estemos navegando por un contenido que nos interesa particularmente, leemos solo por encima y nos
quedamos con lo que llama nuestra atención. Hoy vamos a aprender cómo una empresa de diseño web organiza el texto para sacar el máximo partido al mensaje
que desea transmitir.

59
ORGANIZACIÓN DEL TEXTO EN EL DISEÑO DE UNA PÁGINA WEB: CONCISIÓN Y CLARIDAD

Ya lo decía Gracián: “Lo bueno, si breve, dos veces bueno”. Esta máxima debe ser una prioridad cuando escribimos un mensaje para nuestra página web. Puede
parecer fácil pero una de las tareas más difíciles al escribir para la web es conseguir que el mensaje sea concreto y preciso.

El mensaje debe incluir toda la información necesaria, ser claro y directo, sin dar lugar a ambigüedades. Esta es la clave para resultar interesantes y no aburrir a los
usuarios con información confusa o superficial. Cuando sea necesario incluir información detallada, lo más recomendable es escribir un resumen y añadir un botón
para que el lector pueda seguir leyendo si le interesa.

ORGANIZACIÓN DEL TEXTO EN EL DISEÑO DE UNA PÁGINA WEB: UNA TIPOGRAFÍA PARA CADA NIVEL

Utilizar títulos y subtítulos que se diferencian por el tamaño o por el grosor de la tipografía es fundamental para ayudar a que el usuario entienda cuáles son los
puntos principales y secundarios de un texto. Los títulos y subtítulos deben anticipar lo que el lector va a encontrar y sabrá de antemano si le interesa leer ese
apartado. (También tengamos en cuenta que que el TITLE es lo que primero se carga de una página web y lo que se almacena en los favoritos del
navegador, así que pensemos en estos aspectos al redactarlo.)

ORGANIZACIÓN DEL TEXTO EN EL DISEÑO DE UNA PÁGINA WEB: PÁRRAFOS CORTOS Y LISTAS

Escribir para la web implica que los párrafos deben ser cortos, ya que de otra manera cansan al usuario. Si necesitamos incluir mucha información en un apartado
la podemos resumir creando listas con las ideas principales. De un golpe de vista, el lector tendrá una idea clara de los aspectos importantes del tema.

ORGANIZACIÓN DEL TEXTO EN EL DISEÑO DE UNA PÁGINA WEB: VOCABULARIO DE CALIDAD

Es importante utilizar sinónimos para evitar ser repetitivos. Además, hay que escribir con propiedad y utilizar las expresiones correctas que expliquen con
exactitud las cuestiones de las que estamos hablando. En este sentido, conviene huir de palabras con significados polivalentes y sustituirlas por un término preciso
(por ejemplo, en vez de “hacer un informe” usar “escribir un informe”). Nuestro texto será más rico y ameno.

Si no se sabe qué palabras usar, se puede poner directamente la dirección web destino.

ORGANIZACIÓN DEL TEXTO EN EL DISEÑO DE UNA PÁGINA WEB: USABILIDAD, TAMBIÉN AL ESCRIBIR

La usabilidad se consigue aplicando varias tácticas, como los títulos y las jerarquías. Además, para facilitar una lectura global hay que jerarquizar las ideas,
partiendo de las más importantes y siguiendo con las secundarias.

60
En los textos más largos, un truco es escribir un párrafo de introducción en el que se describa el tema del que se va a hablar y un párrafo a modo de conclusión
que resuma las ideas más importantes del texto.

Finalmente, es importante que otra(s) persona(s) revise(n) la versión final del texto antes de publicarlo. «Cuatro ojos ven más que dos».

Actividad Individual

1. A continuación se le presenta con una representación esquemática de un sitio web. Identifique los campos marcados y escriba los textos que
correspondan a cada sección. Elija para los contenidos entre las siguientes temáticas:

a. Un sitio de artículos deportivos.

b. Un fan site dedicado a un artista del medio del entretenimiento.

c. Un portal de noticias

61
62
63
2. ¿Realizó el ejercicio correctamente? ¿Tuvo en cuenta lo que se vio durante la guía? A continuación, presentamos una lista de chequeo para que
pueda verificar la calidad del ejercicio realizado. Utilizando un lápiz rojo o de cualquier otro color, identifique y enumere los errores que pudo haber
cometido y en una hoja anexa, siguiendo la numeración, proponga textos que corrijan los errores cometidos.

TEXTOS SI NO OBERVACIONES
Cada página es independiente y comprenderse por separado.
Se ha intentado usar la mitad de las palabras que para un medio impreso.
Se usaron expresiones publicitarias sólo cuándo y dónde es necesario.
Los textos se escribieron teniendo en cuenta el público objetivo.
EL ESTILO DE REDACCIÓN

Se ha hecho uso de un lenguaje informal que resulta más cercano y comprensible, por ser directo,
breve, sencillo y conciso.
Los mensajes publicitarios se han limitado a las zonas habilitadas para ello.
Se hace un uso correcto de las siglas.
El texto se dirige personalmente al lector, si corresponde, usando palabras como “usted” o
“nosotros”.
FACILITAR LA LECTURA. REDACTAR PARA EL ESCANEO
Se han dejado suficientes espacios en blanco en la página. Se han alineado los textos preferiblemente
a la izquierda
Se ha evitado el uso de textos en cursiva o todo en MAYÚSCULAS ya que es más difícil de leer. Para
destacar texto, se han usado negritas
Se usan párrafos breves, subtítulos y listas. Se evitan largos bloques de texto y las listas hacen uso de
viñetas.
Se han destacado los elementos más importantes (palabras clave e ideas principales) con negrita o
listados: Se han marcado las palabras clave que diferencian a la página del resto o que indiquen la
esencia de un párrafo, evitando el subrayado.
Se ha aplicado la discrecionalidad para elegir los gráficos y tablas de contenido de manera que sólo se
usen cuando aporten algo, ya que distraen la atención del visitante.

64
Se ha empleado el estilo de pirámide invertida para la redacción de textos: de mayor a menor interés,
limitando las oraciones a una idea por párrafo, con la idea principal al inicio del primer párrafo.
Los artículos extensos se han fragmentado en varias páginas o secciones relacionadas con hipertextos,
evitando el uso excesivo del scroll.
TITULARES Y SUBTÍTULOS

El título de una página web (<TITLE>) es auto descriptivo, breve y usa sólo palabras significativas (sin
artículos ni preposiciones). No se repite en páginas distintas.
Los titulares y subtítulos de la página indican con claridad el contenido de las secciones que titulan, de
forma directa, breve y sencilla (sin metáforas ni juegos de palabras).
HIPERVINCULOS
El texto de cada enlace ayuda al usuario a identificar a dónde se dirige, se usan las palabras más
representativas posibles.
Se ha depurado la página para evitar el uso de “haga clic aquí”, “pulse aquí”, “siga este enlace” o
similares.
Se ha depurado la página para evitar que hayan enlaces al mismo destino dentro de la misma página.
Se ha aprovechado el texto al posicionarse sobre el enlace (“Alt”) para aportar mayor información
sobre el mismo.
PROCESO DE REVISIÓN
Los enlaces externos incluidos llevan al usuario a sitios que afianzan la credibilidad de la página.
Antes de dar por finalizado el texto, se leyó completamente en busca de errores.
El texto fue revisado por una persona externa al proyecto para recibir observaciones.

65
4. ACTIVIDADES DE EVALUACIÓN

Evidencias de Aprendizaje Criterios de Evaluación Técnicas e Instrumentos de Evaluación

Evidencias de Conocimiento Crea el arte de las interfaces, 1. Formulación de preguntas.

elementos y personajes para la 2. Ejercicio aplicado
Documentos e informes solicitados producción multimedia de 3. Documentos, tablas y listas
acuerdo con las asignados.
Evidencias de Desempeño Participa de manera activa especificaciones del guion
3. Lista de chequeo.
técnico.
en las actividades planteadas.

Evidencias de Producto

Tabla de Guión

Lista de chequeo

GLOSARIO DE TÉRMINOS

Interfaz: En ingeniería de software o proyectos multimedia, se denomina interfaz al conjunto de elementos que conforman una página web
o en su defecto una vista del proyecto multimedia.
Interacción: Modo en que el usuario se comunica o trabaja la interfaz del programa.
Mockups: Término en inglés que significa maqueta. En proyectos multimedia, un mockup, o maqueta es un prototipo
de la realidad.
Prototipo: Primer ejemplar que se fabrica de una figura, o cosa, reflejando cómo quedará en la realidad el producto final.
Wireframe: Boceto inicial de un sitio web.
HTML: Lenguaje de Marcado de Hipertexto (Hypetext Markup Language). Por medio de html se generará la estructura de una página web.

66
CSS: Hojas de Estilo en Cascada (Cascading Style Sheet). Por medio de css se aplicarán estilos a los objetos que se encuentran en la página
web, esto es, los que fueron creados con html.
Rel: Relación del enlace a una hoja de estilos.
Type: Tipo de documento, ¿cómo está escrito? = “texto /css”
Href: Ruta o dirección del archivo, respecto al archivo desde donde se enlaza, para este ejercicio, el.css se encuentra al lado del .html por
ende se indica una ruta con el sólo nombre del archivo pues no se debe dirigir a subcarpetas o carpetas externas.
Multimedia: Este término se utiliza para referirse a cualquier objeto o sistema que utiliza múltiples medios de expresión físicos o digitales
para presentar o comunicar información. De allí la expresión multimedios. Los medios pueden ser variados, desde texto e imágenes,
hasta animación, sonido, video, etc.
Plano General: Son de carácter informativo y sirven para describir acciones físicas. Su tamaño puede variar desde una figura de cuerpo
entero, hasta una toma de la tierra hecha desde un satélite. Actúa como el gran plano maestro, estableciendo el escenario donde se
desarrolla la acción.
Plano Medio: Va de la cintura hacia arriba hasta llegar a la cabeza, revela lo suficiente del rostro como para interesar al espectador en lo que
dice o piensa el actor, este plano admite dos o más personas en la toma.
Primer Plano (Close up) En el caso de la figura humana, recogería el rostro y los hombros. Este tipo de plano, al igual que el Plano detalle y
el Primerísimo primer plano, se corresponde con una distancia íntima, ya que sirve para mostrar confidencia e intimidad respecto al
personaje.
Plano Americano Este plano surgió en el cine Western cuando los directores ampliaron el plano medio hasta la rodilla para poder ver la
acción del actor al desenfundar el revólver. Se utiliza mucho en el cine americano.
Ángulo Normal o frontal: la cámara está al mismo nivel que el sujeto a fotografiar de manera que la línea imaginaria entre la cámara y el
sujeto es paralela al suelo.

67
Ángulo picado: Este ángulo de perspectiva se logra cuando la cámara se encuentra en un plano por encima del sujeto a fotografiar.
Ángulo o cenital: Cuando llevamos el ángulo de perspectiva de picado al extremo se conoce como cenital. Este ángulo de perspectiva se
logra situando la cámara de manera que cree una línea recta con la parte superior del sujeto a fotografiar.
Ángulo contrapicado: Este ángulo de perspectiva se logra cuando colocamos la cámara en un plano por debajo del sujeto a fotografiar.
Ángulo nadir: Cuando llevamos el ángulo de perspectiva de contrapicado al extremo se conoce como nadir. Este ángulo de perspectiva se
logra colocando la cámara de manera que cree una línea recta con la parte inferior del sujeto a fotografiar.

6. REFERENTES BIBLIOGRÁFICOS

Blog Webdesdecero. (s.f.). Wireframes: Qué son y cómo crearlos. Recuperado de: http://webdesdecero.com/wireframes-que-son-y-

como-crearlos/

CONCEPTO DEFINICIÓN DE (2014). Definición de Prototipo. Recuperado de: http://conceptodefinicion.de/prototipo/

¿Cómo crear un wireframe con Mockflow?

https://www.tuanalistadigital.com/mockflow-herramienta-crear-wireframes/

Concepto de css
https://rockcontent.com/es/blog/html/ https://lenguajecss.com/p/css/introduccion/que-es-css https://es.wikipedia.org/wiki/HTML
Editores web
https://www.hostinger.co/tutoriales/mejores-editores-html/
Redacción de ideas
http://gralevikar.blogspot.com/2018/05/como-sacar-las-ideas-principales-y.html

68
https://es.wikipedia.org/wiki/Uso_del_lenguaje
https://www.globalcc.es/organizar-el-texto-en-el-diseno-de-tu-pagina-web/
Medellín V., Fabio E. La Realización de Video, Televisión y Cine, Manual básico. Bogotá, Escuela de Medios Facultad de Ciencias de la
Comunicación – Unimituto, 2004. ISBN 958-8165-23-7
https://www.letraslibres.com/espana-mexico/cultura/como-empezaron-narrar-historias-los-videojuegos
https://www.jotdown.es/2018/04/lo-que-siempre-quiso-saber-sobre-la-narrativa-en-los-videojuegos/
https://www.doblandotentaculos.com/2018/07/18/narrativa-videojuegos/
Diccionario de terminos web
https://www.imaginanet.com/diccionario-html5.html
Tutoriales de html y css
https://www.w3schools.com/

Lenguaje Audiovisual
Lina Gañan, Guillermo Sánchez. Pedagogía y Medios Audiovisuales. Universidad Autónoma de las Américas 2000.
OMEGA, 2011. Fotografía Básica – Guía para fotógrafos, Langford
http://www.fotonostra.com/fotografia/reglatrestercios.htm
http://la-fotografia-y-sus-secretos.blogspot.com/2007/01/la-regla-de-los-tercios.html
Sena. Planos, Edición 01 . Año 2012

69
7. CONTROL DEL DOCUMENTO
Nombre Cargo Dependencia Fecha

Autor Dilian Astrid Querubín Instructora Cenigraf 06/07/2020

(es)
Juan Mera Lagos Instructor Cenigraf 06/07/2020

Mario Angel Estepa Instructor Cenigraf 06/07/2020

Jorge Enrique Villafradez Instructor Cenigraf 06/07/2020

8. CONTROL DE CAMBIOS (diligenciar únicamente si realiza ajustes a la guía)

Nombre Cargo Dependencia Fecha Razón del Cambio

Autor
(es)

70