1
UNIVERSIDAD TECNOLÓGICA EQUINOCCIAL
FACULTAD DE CIENCIAS SOCIALES Y COMUNICACIÓN
CARRERA DE DISEÑO GRÁFICO PUBLICITARIO
TESIS DE GRADO PREVIA A LA OBTENCIÓN DEL TÍTULO DE
INGENIERO EN DISEÑO GRÁFICO PUBLICITARIO
TEMA
DESARROLLO DE UNA GUÍA PARA LA ELABORACIÓN DE
PLATAFORMAS MULTIMEDIA EN UNIDADES EDUCATIVAS
AUTOR
WALTER GONZALO SUNTAXI OÑA
DIRECTOR
SAMUEL YANEZ M. SC
AUTORÍA
Yo, Sr. Walter Gonzalo Suntaxi Oña, residente en Sangolquí, certifico que los datos
presentados en el presente proyecto profesional de tesis, son producto de la
investigación realizada a través de varios procesos.
Atentamente.
Sr. Suntaxi Oña Walter Gonzalo
C.I. 1716196280
DEDICATORIA
Con mucho cariño a dedico esta tesis a mi madre por su apoyo incondicional y un gran
ejemplo de lucha para hacer de sus hijos, personas con valores que puedan realizarse en
el ámbito profesional, laboral y espiritual.
A toda mi familia por su apoyo amigos y maestros que han servido como ejemplo y son
AGRADECIMIENTO
Agradezco a mi familia que con su apoyo he podido culminar una de las etapas
planteadas. A mis maestros que gracias a sus conocimientos y compromiso con el
alumno han sido guías en el camino del aprendizaje e investigación. También doy las
gracias a las Instituciones educativas públicas y privadas del valle de los chillos que
fueron un aporte para la culminación de la tesis. A la Universidad Tecnológica
Equinoccial quien ha sido uno de los principales facilitadores de conocimiento, técnicas
RESUMEN
Este proceso de investigación está dirigido a la creación de una guía para desarrollar
plataformas multimedia en unidades educativas. Esta guía será una gran herramienta
para el diseñador gráfico porque estará enfocada en un CMS. De esta forma, el
diseñador gráfico no necesitará conocimientos avanzados de lenguajes de programación
y podrá trabajar sin complicaciones en la interfaz gráfica de la plataforma web, así
podrá dar apertura a la aplicación de conocimientos avanzados en imagen. Por ello
logrará desarrollar una plataforma web multimedia educativa atractiva y funcional,
además no desperdiciará tiempo buscando extensiones para el CMS debido a que la guía
contará con toda la información necesaria. En función de lo mencionado anteriormente
se ha tomado referencia a diferentes autores en el campo multimedia y en el campo web
ya que es fundamental el conocimiento teórico para estructurar de la manera más
adecuada la plataforma web multimedia educativa.
La investigación de campo se realizó tomando como muestra las unidades educativas
del valle de los chillos, mientras los instrumentos de investigación empleados fueron la
encuesta y entrevista. Esto con la finalidad de obtener información de los gustos y
necesidades del grupo objetivo, cuya información sea publicada en la guía. De esta
forma el diseñador gráfico podrá usar dicha información para crear la plataforma web
INTRODUCCIÓN
La presente tesis es una investigación que tiene por objetivo identificar la maquetación
adecuada, el uso del color, la tipografía, el contenido, la navegación y las herramientas
adecuadas para posteriormente elaborar una guía para desarrollar plataformas web
multimedia en unidades educativas, esta guía será de gran ayuda para los diseñadores
gráficos ya que estará enfocada en la interfaz gráfica de las plataformas web educativas
y no será necesario contar con un conocimiento técnico de programación web, debido a
que se enfocará en un CMS. Los datos se obtuvieron de:
Estudiantes de diferentes Unidades educativas fiscales y particulares en el Valle de los
Chillos.
Las fuentes Bibliográficas provienen de investigación en libros de diferentes bibliotecas
TABLA DE CONTENIDO
HOJA DE RESPONSABILIDAD……….I
DEDICATORIA………...II
AGRADECIMIENTO……….III
RESUMEN………..IV
INTRODUCCIÓN………V
TABLA DE CONTENIDO……….6
PROTOCOLO...10
I. TEMA………..……10
II. PLANTEAMIENTO DEL PROBLEMA………..….10
III. JUSTIFICACIÓN………..………….………...11
IV. OBJETIVOS………..………11
GENERAL………..……….11
ESPECÍFICOS……… ……….………...12
CAPÍTUTLO I………..…….13
1.1 ¿QUÉ ES LA MULTIMEDIA?...13
1.2 HISTORIA………..………...14
1.3 EL DESPEGUE DE MULTIMEDIA………...16
1.4 ¿DÓNDE SE UTILIZA LA MULTIMEDIA?...17
1.5 ¿PARA QUE ME SIRVE LA MULTIMEDIA?...18
CAPÍTULO II...19
2.1 EDUCACIÓN………...…….19
2.2 IMPACTO EN LA EDUCACIÓN………21
CAPÍTULO III………...………...25
CONSTRUCCIÓN DE UN PROYECTO MULTIMEDIA ……..………25
3.1 INTRODUCCIÓN……….25
3.2 COMPONENTES DE UN PROYECTO MULTIMEDIA………..………..26
3.3 DISEÑO DE UN PROYECTO MULTIMEDIA…………..………28
3.4 NAVEGACIÓN………29
3.5 ÁREAS SENSIBLES Y BOTONES……….34
CAPÍTULO IV………...35
WEB………35
4.1 HISTORIA………35
4.2 HTML………36
4.3 EL ESTÁNDAR HTML 2.0………..37
4.4 EL ESTÁNDAR HTML 3.2………..38
4.5 HTML 4.0 ……….39
4.6 EL FUTURO DE HTML………...39
CAPÍTULO V………40
DISEÑO WEB………...40
5.1 LA EVOLUCIÓN DEL DISEÑO DE PÁGINAS WEB………..40
5.2 TÉCNICAS AVANZADAS DE DISEÑO WEB………..42
5.3 ESTRUCTURA BÁSICA DE UNA PÁGINA WEB………...42
5.5 DENTRO DEL CUERPO……….46
5.6 USO DEL COLOR………48
5.7 PROPORCIONES DORADAS……….50
CAPÍTULO VI………...54
PRESENTE Y FUTURO DE LA TECNOLOGÍA WEB………..54
6.1 PRESENTE..……….54
6.2 EL FUTURO DE LA TECNOLOGÍA WEB………...……….55
6.3 LO MÁS IMPORTANTE……….55
CAPÍTULO VII……….56
METODOLOGÍA DE INVESTIGACIÓN……….56
7.1 DISEÑO DE INVESTIGACIÓN………..56
7.2 TIPO DE INVESTIGACIÓN………56
7.3 MÉTODOS DE INVESTIGACIÓN……….57
7.4 TÉCNICA………..57
7.5 UNIVERSO………...58
7.6 MUESTRA………58
7.7 INSTRUMENTO………..59
7.8 RESULTADO DEL INSTRUMENTO……….63
PREGUNTAS………….………..63
7.8.1 ENTREVISTA………...76
PREGUNTAS………..77
7.9 CONCLUSIONES DEL INSTRUMENTO………..88
PROPUESTA……….90
CAPÍTULO IX………...91
CONCLUSIONES Y RECOMENDACIONES...91
9.1 CONCLUSIONES……….91
9.2 RECOMENDACIONES………...92
CAPÍTULO X………..………..94
10.1 ANEXOS...94
10.1.1 MODELO DE ENCUESTA……….94
10.1.2 PREGUNTAS DE LA ENTREVISTA………...…….97
10.2.1 PROPUESTA………..….98
PROTOCOLO
I. TEMA:
Desarrollo de una guía para la elaboración de plataformas multimedia en unidades
educativas.
II. PLANTEAMIENTO DEL PROBLEMA
En la actualidad el avance de la tecnología ha desarrollado diversas formas de
comunicación y a través de internet la información se encuentra al alcance de todos. Por
lo cual es necesario contar con un contenido claro para no confundir a las personas que
acceden a la información. Lo cierto es que la tecnología trae muchas ventajas en
diferentes campos y uno de ellos es el educativo ya que existe un gran número de
aplicaciones. Y la mayor parte de instituciones cuentan con plataformas web
multimedia que ayudan a los estudiantes en el desarrollo académico, además sirve para
dar a conocer la propuesta académica de la institución pero a menudo estas plataformas
web no cuentan con un buen manejo adecuado de sus elementos como; navegación,
estructura, contenido, herramientas y color. Esto se debe a que estas plataformas web
son creadas por profesionales informáticos que no tienen conocimiento en diseño, por
otro lado los diseñadores gráficos cuentan con amplio conocimiento en diseño pero
carecen de conocimientos técnicos o desconocen los distintos lenguajes de
programación web, por tal razón se ven limitados a la creación de plataformas web
III. JUSTIFICACIÓN
Es muy conveniente para un diseñador gráfico que exista una guía para desarrollar
plataformas web multimedia en unidades educativas porque facilitaría el trabajo y se
aprovecharía el tiempo del diseñador. En función de estos beneficios se pretende
elaborar una guía con información en cuanto al uso del color en las plataformas web
multimedia, la maquetación específica capaz de facilitar el uso a los usuario, la
tipografía adecuada que sea legible en la plataforma web multimedia y la codificación o
sintaxis básica que use la plataforma web multimedia.
IV. OBJETIVOS
GENERAL
• Desarrollar una guía que sirva como herramienta para los diseñadores
gráficos en la elaboración de plataformas web multimedia enfocadas en
ESPECÍFICOS
• Conocer los elementos importantes que deben tener las plataformas web
multimedia.
• Investigar la maquetación adecuada para facilitar su uso al usuario.
• Investigar los colores adecuados para el buen uso de la plataforma web, con el
fin de tener un contenido completamente claro para el usuario.
• Investigar la programación básica y la navegación adecuada para elaborar
plataformas web multimedia.
• Identificar el contenido apropiado de una plataforma web educativa para
mejorar el desempeño de los estudiantes de las Instituciones educativas.
• Dar a conocer las herramientas necesarias de la plataforma web que ayuden al
CAPÍTULO I
MULTIMEDIA
1.1 ¿QUÉ ES MULTIMEDIA?
Vaughan (1995) afirma:
Multimedia se compone, como ya se descubrió, de combinaciones entrelazadas
de documentos de texto, arte gráfico, sonido, animación y video. Cuando usted
permite a un usuario1
final, el observador de un proyecto de multimedia
controlar ciertos elementos y cuándo deben presentarse, se llama multimedia
interactiva.
Cuando usted proporciona una estructura de elementos ligados a través de los
cuales el usuario puede navegar, entonces multimedia interactiva se convierte
en Hipermedia. (p.5)
Selín (1995) “El concepto actual de multimedia hoy, en el mundo informático se refiere
a la utilización, en un ordenador, dentro de un mismo programa o aplicación, de
elementos que comprendan: información estructurada (datos), textos, sonidos, e
imágenes (estáticas o en movimiento).” (p.7)
1En informática un usuario es aquella persona que utiliza un dispositivo o un ordenador y realiza múltiples operaciones con distintos propósitos.
Multimedia no es más que la capacidad de transmitir información de diferentes formas
en el mismo tiempo, esta información a menudo es presentada en combinación de los
siguientes elementos : audio, video, texto, fotografías.
Hoy en día multimedia se enfoca en la interacción con los usuarios ya que les permite
formar parte de su entorno.
1.2 HISTORIA
El concepto habitual de multimedia nace con la invención de la imprenta en china. El
día en que el corrector de estilos, el profesional encargado de la edición, cuya tarea se
enmarca en el control de calidad de la edición de textos, comenzó a leer en voz alta las
pruebas de impresión; se basó en el sonido de su voz y el texto escrito. Algunas
personas creen firmemente que fue Johannes Gutenberg quien invento la imprenta. Éste
es uno de los grandes hitos de la historia y cultura alemana. (Selín José, 1995).
Es necesario recalcar que multimedia existe mucho antes que aparezca la primera
imprenta occidental, ya que antiguamente en Asia se contaba con diferentes formas
combinadas de comunicación y los antiguos editores de texto leían en voz alta las
pruebas de impresión. A este sistema de elementos combinados de información se le
llama multimedia, lo cierto es que en la actualidad multimedia tiene una gran
proyección en diferentes ámbitos como los juegos de video y aplicaciones móviles.
García (1995) “En la actualidad multimedia se encuentra ligada a diferentes entornos :
pedagógicos y culturales. A menudo relacionan a multimedia como un gran
descubrimiento de esta época pero desconocen que ya muchas personas vienen
Multimedia es la agrupación de varias tecnologías que se han ido desarrollando con el
paso del tiempo hasta llegar a lo que hoy se conoce. En la actualidad existen
dispositivos móviles que procesan mayor cantidad de datos a velocidades
impresionantes, algo que hace varios años atrás no se podría imaginar ya que a mayor
velocidad es más fácil reproducir cualquier tipo de contenido multimedia.
García (1995) señala que:
Existe un gran número de personas que identifican el origen de multimedia en
los años 70; su primera aparición fue en el Massachusetts Institute of
Technology. En aquel tiempo nadie podía imaginar el gran impacto de las
investigaciones de aquella época. También a multimedia se le cataloga en el
campo interactivo2
debido a que ésta e interactividad son parte del mismo
equipo. Es así que a ambas se las relaciona con cualquier media: sonidos, texto,
imágenes, video. Este conjunto establece un diálogo interactivo con el usuario.
A inicios de los años 80 aparece el primer videodisco interactivo, al principio
estaba destinado a los profesionales de la comunicación y en segundo plano se lo
designaba para el consumo, y debido a que era de ultima tecnología su costo era
muy alto. Años más tarde se intenta concentrar toda la información en una sola
pantalla. Sin embargo al final de los años 80 nacen los lectores de CD-ROM, al
principio tenía funciones muy limitadas ya que solo podía reproducir textos.
Pero con el avance del tiempo aparecen nuevos computadores con tarjetas que
2 Sistema que permite una comunicación continua entre el usuario y la máquina.
reproducían más de 256 colores y memorias de amplia capacidad, por lo cual
podían ampliar las funciones del CD-ROM. Ahora los computadores integran
lectores de disco que reproducen imágenes sonidos y textos. (p.47)
Gracias al desarrollo de multimedia se puede contar con todo tipo de información y
trasladarla de formas sencillas. Si bien es cierto al principio multimedia era solo para
técnicos profesionales en informática, pero con el pasar del tiempo multimedia se ha
vuelto un elemento fundamental para el desarrollo de la sociedad, debido a que en la
actualidad se cuenta con periféricos de almacenamiento3
con una gran capacidad de
memoria que permite trasladar archivos tales como; fotografías, audio, video. Algo que
en la antigüedad no se podría imaginar.
1.3 EL DESPEGUE DE MULTIMEDIA
Multimedia tiene un gran despliegue en 1994, en esa época empiezan a circular los
primeros juegos multimedia e incluso se los entrega en CD-ROM debido a su gran
capacidad de memoria para almacenar datos, además son mucho más fáciles de
transportar gracias a que es muy compacto. Hoy en día existe un gran número de
aplicaciones en el mercado y una gran parte de ellas están siendo enfocadas en la
educación, pero no todas las aplicaciones son fáciles de usar y para la mayoría de
usuarios resulta algo tedioso. Sin embargo la revolución multimedia será más
importante que la revolución micro informática. (Selín José, 1995).
Desde la aparición de multimedia la informática ya no volverá a ser igual, la sociedad se
encuentra frente a una revolución que tendrá consecuencias masivas y más cercanas con
las profesiones. Así para entender multimedia no será necesario estudiar la herramienta,
ni tampoco la ciencia porque la multimedia es una herramienta que es requerida por
todas las profesiones en sus múltiples aplicaciones. (Selín José, 1995).
Si es necesario destacar una fecha importante en el desarrollo de multimedia se pondrá
énfasis en 1994. Ya que la aparición del CD-ROM a cambiado la vida y los métodos de
enseñanza, también a generado un gran beneficio para las corporaciones creadoras de
consolas de videojuegos que comercializan sus juegos en discos compactos de gran
capacidad de almacenamiento. Además los discos son fácilmente adaptados a las
características de sus consolas lo cual previene mucho la piratería.
Multimedia es una herramienta fundamental ya que es requerida en todos los ámbitos
profesionales, además con multimedia no es necesario estudiar su parte técnica para
comprenderla debido a que se adapta fácilmente a cualquier entorno.
1.4 ¿DÓNDE SE UTILIZA LA MULTIMEDIA?
Es importante usar multimedia en cualquier tipo de información electrónica ya que
proporciona beneficios importantes, como facilitar la interfaz al usuario debido a que
no se encasilla en la interfaz tradicional basada solo en textos. Esto hace que los
usuarios mantengan atención e interés. Además con el beneficio de multimedia el
usuario mejora la retención de información y generalmente esto ocurre cuando existe un
Habría que decir también que multimedia es un medio muy eficaz para personas que
temen a los computadores ya que expone la información de formas en las que el usuario
está acostumbrado, además relacionando imágenes y sonidos es mucho más fácil que
cualquier persona pueda retener más información porque asignará una imagen al tema
que se esté tratando. Un ejemplo importante son las personas de la tercera edad que se
niegan a usar computadores o simplemente no saben como usarlos. Por ello también se
podría aplicar multimedia en los supermercados así se oprimirá un botón para tener
acceso a las ofertas del día.
(Vaughan Tay, 1995).
Uno de los beneficios fundamentales de multimedia es la fácil adaptación de la
información, de este modo multimedia transmite información de una forma sencilla para
la comprensión del usuario. Además multimedia esta siendo usada en todos los entornos
un ejemplo de esto son las tiendas de moda, las cuales presentan en pantallas
interactivas catálogos digitales en los que se puede encontrar todo el contenido de la
tienda y los precios en oferta. También esta tecnología se está aplicando en
supermercados y es de gran ayuda para las personas de edad avanzada que no pueden
usar dispositivos móviles y computadoras.
1.5 ¿PARA QUE SIRVE LA MULTIMEDIA?
Multimedia cambia los medios de comunicación tradicionales ya que si bien
antiguamente se enviaba cartas por correo postal, hoy en día se puede enviar correos
electrónicos textuales y a la vez adjuntar fotografías. Y a estas fotografías se las puede
agregar sonidos con la posibilidad de tener momentos importantes ya sea con la familia
En la actualidad se puede comprar directamente dispositivos móviles, así con la
evolución de multimedia, el dinero electrónico será muy frecuente en las compras en
red sin la necesidad de salir de casa a las tiendas o supermercados para realizar las
compras diarias: solo hay que presionar un botón. Esto es un gran beneficio para los
usuarios. (Selín José, 1995).
La base de la tecnología multimedia es la comunicación, debido a que ésta se puede
transmitir de diferentes formas y tiene algunas utilidades dependiendo el ámbito en la
que sea enfocada. En el campo laboral sirve para transmitir correos electrónicos dando
la posibilidad de adjuntar imágenes, textos y sonidos. En el campo editorial es
comúnmente usada en libros y revistas ya que traen discos con información adicional al
material impreso comprado, también existen empresas que envían por correo postal
CDS con catálogos y promociones.
CAPÍTULO II
MULTIMEDIA EN LA EDUCACIÓN
2.1 EDUCACIÓN
La tecnología multimedia se adapta fácilmente al campo educativo. Hay una gran
cantidad de aplicaciones didácticas para los estudiantes pero principalmente para
enseñar idiomas, matemáticas, física, anatomía entre otras. (Selín José, 1995).
En el campo educativo, multimedia genera beneficios para los maestros ya que es
multimedia que respalde los conocimientos del maestro, así en caso de enseñar historia
con un recorrido virtual ganaría el interés del alumno y sería mucho más didáctico y sin
preocupación de perder atención de su alumno. (Selín José, 1995).
Si bien es cierto multimedia es adaptable a diferentes entornos y uno de ellos es el
entorno educativo debido a que es más fácil retener la información cuando se la
relaciona con una imagen o sonido, por este motivo existe un gran número de
aplicaciones en el mercado que son de gran utilidad y están enfocadas en diferentes
asignaturas. Un claro ejemplo son las aplicaciones que se usan en la enseñanza de
idiomas.
Es necesario recalcar que multimedia es un elemento importante de la informática que
se puede adaptar a la educación. Esta tecnología es necesaria en el área practica para
observar fenómenos físicos de ingeniería, médicos-biológicos. Ya que esto reduciría el
costo al no ser necesario realizar los experimentos simplemente con la observación. Es
así que el seguimiento por parte de los estudiantes será de forma sencilla y el estudiante
seguirá adquiriendo conocimientos. (Hernández Manuel, 1990).
Así mismo multimedia se introduce en el campo estudiantil, principalmente en la
elaboración de experimentos donde el estudiante puede practicar y observar, además no
tendría ningún costo. En la actualidad existen software de medicina que ayudan a
identificar los huesos y músculos importantes en un cuerpo creado en tres dimensiones.
También multimedia interactiva puede ser un dolor de cabeza y a menudo se la compara
con un rompecabezas porque requiere diferentes dispositivos: lector de discos, video
más habitual es que requiere de software que unifique todos estos dispositivos para que
pueda existir multimedia. (Hernández Manuel, 1990).
Las escuelas son los lugares más importantes en que se puede aplicar la multimedia
pero la gran mayoría de escuelas no cuentan con los recursos necesarios para
implementar multimedia. Lo elemental sería implementar laboratorios audiovisuales y
proyectores de imágenes ya que a largo plazo esto generará grandes beneficios a los
estudiantes. Los cambios que causa multimedia en la enseñanza han sido fundamentales
porque los estudiantes pueden descubrir que no tiene límites con las nuevas formas de
enseñanza ya que multimedia abre muchas puertas al conocimiento.
El gran salto de la multimedia aparece con la historia reconocida y premiada por el auto
Mercer Meyer, quien desarrollo una historia animada (“solo mi abuelita yo”). Ésta
historia estaba dirigida para niños de ocho años, donde con un solo clic el computador
podía leer y deletrear palabras en voz alta. Por otro lado también proporciona técnicas
de enseñanza para estudiantes de medicina, cardiólogos, radiólogos; multimedia te
permite profundizar técnicas clínicas. Los adultos y los niños aprenden de mejor manera
explorando y descubriendo. (Vaughan Tay, 1995).
2.2 IMPACTO EN LA EDUCACIÓN
Es evidente el gran impacto en la educación cuando los alumnos o personas utilizan
herramientas multimedia ya que pueden tener la sensación de estar dentro de un
laboratorio de física, química, etc. Es así que con las herramientas de multimedia se
puede realizar gran cantidad de practicas sin costo alguno. Multimedia genera mayor
sus altos costos. Se puede obtener mayores mejoras en la educación de los alumnos ya
que se podrá obtener mayores resultados de su aprendizaje, cosa que con los métodos
tradicionales no es imposible. (Hernández Manuel, 1990).
Lo más importante de la tecnología multimedia es contar con un tutor que sirva de guía
y ayude a resolver problemas característicos de estudiantes debido a que se debe
interactuar en el mismo tiempo con el tutor y multimedia.
Habría que decir también que multimedia se usa en diferentes áreas como las artes, la
música, la pintura, la escultura. Por ejemplo en el campo musical existen diferentes
tipos de software uno de los más conocidos y de gran utilidad es Guitar Pro. Este
software es utilizado por todo tipo de músicos: músicos de conservatorio, autodidactas y
también empíricos. Lo cierto es que éste es muy fácil de usar ya que cuenta en su
interfaz con dos sistemas de lectura musical: la tablatura y partitura clásica. Así con este
software se puede crear composición y arreglos musicales para guitarra, piano, bajo. Y
si se trabaja en guitarra se puede acceder a su tablatura, de igual forma para cualquier
instrumento sea piano, violín etc. Lo interesante de este software educativo es la
reproducción en tiempo real de tus composiciones, el software reproduce las notas que
se están escribiendo. Hasta mediados del 2007 se utilizaba sonido MIDI, hoy en la
actualidad cuenta con sonidos reales procesados, lo único que se tiene que hacer es
escribir una partitura y obtener la melodía con el instrumento designado.
Un gran ejemplo de la aplicación de multimedia es el de los integrantes de coro de
cámara quien acompañados de estímulos visuales y persuasivos textos han sido
conocidos por reproducir respuestas efectivas. Scriabin, gran compositor ruso del siglo
famosa obra: Prometeo. Se le atribuía una enfermedad llamada sinestesia (una
enfermedad que afectaba a los estímulos sensoriales, como un color evoca una
respuesta). Scriabin creía firmemente que los colores se podían escuchar. (Vaughan
Tay, 1995).
Vaughan Tay (1995): afirma:
Prometeo se estrenó ante el público en Moscú en 1911, pero el color del órgano
resultó demasiado complicado tecnológicamente y se eliminó del programa.
Después Scriabin murió repentinamente de envenenamiento de la sangre
causa-do por un forúnculo en su labio, así que su última visión de multimedia,
Mysterium, quedó inconclusa. El habría gozado el mundo de hoy con los
sintetizadores MIDI4
, con los ricos colores de las computadoras y los
digitalizadores de video, y aunque los olores no son aún parte de ninguno de los
estándares de multimedia, seguramente él habría investigado también este
con-cepto. (pg19)
Actualmente existe una gran facilidad para adquirir conocimientos como las
aplicaciones enfocadas en música y pintura. En el caso de la música si se persuade a los
cantantes con impactos visuales podrá mejorar su técnica o podrá empeorarla. Lo cierto
es que en la actualidad existe un gran número de software que ayudan a mejorar el
sonido, otros son editores de partitura y del mismo modo también hay programas de
ilustración grafica que no son limitados en colores. Por un momento hay que imaginar
Las obras que hubiera realizado Mozart con este software y también a Da Vinci con un
software de ilustración.
Tabla Nº1
Colores de Scriabin
Frecuencia (HZ) Nota Color de Scriabin
256 C Rojo
277 O Violeta
298 D Amarillo
319 D# Centello de acero
341 E Blanco perlado
362 F Rojo profundo
383 F# Azul brillante
405 G Naranja rosáceo
426 G# Púrpura
447 A Verde
469 A# Centello de acero
490 B Azul aperlado
Fuente:Vaughan,T. (1995). Todo el poder de multimedia. McGraw-Hill.
Elaborado por: Vaughan Tay
CAPÍTULO III
CONSTRUCCIÓN DE UN PROYECTO MULTIMEDIA
3.1 INTRODUCCIÓN
Una buena aplicación multimedia de enseñanza se elabora con una metodología de
trabajo que el desarrollador está en la obligación de seguir.
Al trabajar en una aplicación para encontrar sitios culturales y representativos de una
ciudad, lo principal es identificar las herramientas básicas que se necesita para elaborar
la aplicación multimedia. En este caso en particular se necesitará como herramienta
principal un computador equipado con un software capaz de desarrollar aplicaciones
multimedia y una base de datos. Esta base de datos debe contener todos los lugares
turísticos de la ciudad y se la puede gestionar con imágenes de los lugares que se haya
investigado. En el caso de está aplicación una fotografía es la que debe ir acompañada
de texto que detalle toda la información del sitio. (Selín José, 1995).
La metodología empieza con la recolección de datos e imágenes de los lugares más
emblemáticos de la ciudad, esta metodología que se está aplicando es similar a la
construcción de un libro. (Selín José, 1995).
Se debe definir la estructura adecuada para la aplicación y se tiene que escoger las
fotografías y la información de cada sitio turístico y cultural, una vez identificado esto
es necesario crear una base de datos con la cual trabajará la aplicación. (Selín José,
Es decir, en la elaboración de una aplicación multimedia hay que tomar en cuenta una
serie lógica de pasos. Algo importante en el proceso es que el desarrollador no tendrá
que cerrarse a opiniones de colegas, también se debe adquirir siempre nueva
información y se debe aprender a identificar los elementos con los que se puede
trabajar, pero no hay que olvidar la planificación de la estructura de la aplicación.
3.2 COMPONENTES DE UN PROYECTO MULTIMEDIA
Según Peñaloza Alberto (2004) los componentes más importantes de una plataforma
web son:
Comunicación.- La comunicación es uno de los puntos más importantes que hay que
tomar en cuenta en la elaboración de las plataformas. Una plataforma bien elaborada
permite la comunicación de forma sincrónica (en tiempo real) y asincrónico (en tiempo
diferido), para ello contamos con grandes alternativas como: Foros de discusión, Chat y
Videoconferencias.
Interfaz Fácil e intuitiva.- La plataforma debe ser sencilla sin ningún tipo de
complicación al momento de usarla, por lo cual se debe tomar en cuenta que está creada
para todo tipo de usuarios y éste no necesitará de ningún conocimiento técnico para usar
sus herramientas.
Control de acceso.- Debe existir un nombre de usuario y contraseña para cada profesor
y alumno ya que será fundamental para el ingreso a la plataforma personalizada. En
caso de perdida de contraseña el usuario está en la libertad de llamar a la persona
Herramientas de comunicación .- Existe una gran cantidad de herramientas de
comunicación pero a continuación se nombran las más eficaces, tales como:
información de usuarios, foro de discusión, tablón de noticias, chat. Lo que se toma en
cuenta de estas herramientas es su capacidad de comunicación vertical
(profesor-alumno) y horizontal (alumno – (profesor-alumno) sin olvidar que sea de manera asincrónica y
sincrónica.
Componentes multimedia.- En una plataforma es importante tomar en cuenta recursos
multimedia como: videos, audio y enlaces que nos trasladen a sitios web.
Herramientas de seguimiento.- Cada profesor podrá llevar un seguimiento de sus
alumnos ya que usando las herramientas de la plataforma se puede tener un registro
detallado de la asistencia y notas del estudiante, con esto se puede identificar fácilmente
al alumno que tiene problemas con su asignatura. (Peñaloza Alberto, 2004).
La importancia de una buena plataforma web multimedia radica en la identificación de
sus componentes. Los componentes son esenciales en una plataforma ya que ayudan al
estudiante en su rendimiento académico. También facilitan la comunicación entre
padres de familia y profesores, además de tener un seguimiento del estudiante. Cuando
3.3 DISEÑO DE UN PROYECTO MULTIMEDIA
La parte de diseño es fundamental para cualquier proyecto, es aquí donde se pone a
prueba y se utiliza todos los conocimientos adquiridos con el computador: video,
música y la creatividad al realizar artes gráficas. El diseño no simplemente es el manejo
del software; diseñar es conceptualizar, escoger , crear, probar y editar. En el diseño hay
que tener claro que las ideas y conceptos deben acercarse más a la realidad. Y un buen
concepto de diseño es lo que distingue a un aficionado de un buen profesional.
(Vaughan, Tay 1995).
Un buen diseño se debe crear analizando el tamaño del proyecto y el talento del equipo
humano que participa en el mismo. Por lo cual se puede elegir dos tipos de enfoques:
uno de ellos es poner un gran énfasis en los guiones (storyboards) o en los índices
gráficos, para ello hay que describir utilizando bocetos, tipografías, colores, formas,
estilos, botones, sonido y navegación; por otro lado se puede emplear un guión como
guía esquemática sin grandes esfuerzos en el diseño del principio y más cuando el
producto está siendo usado. (Vaughan Tay, 1995).
No se debe dejar de lado al diseño ya que es una parte fundamental para no desmotivar
al usuario. Hay que recordar que un buen diseño tiene varios conceptos y no es
simplemente el conocimiento del software, además se debe llevar a cabo una serie de
pasos de bocetaje y al mismo tiempo identificar las imágenes más apropiadas para el
sitio, las formas, los colores y los botones. También se debe tomar en cuenta el tamaño
del proyecto para destinar los recursos apropiados y proporcionar un enfoque al
En la realización de un sitio web se requiere un conocimiento profundo de las
herramientas multimedia, ambos enfoques deben poseer un guión o un índice gráfico.
Los clientes que prefieren el primer enfoque son los que más se interesan en el proceso
de producción y los costos laborales; el segundo enfoque es más práctico ya que pone
énfasis en la parte técnica y a menudo se puede perder el tiempo con este enfoque
debido a que es el diseño el responsable de realizar interacciones para refinar el trabajo.
(Vaughan Tay, 1995).
Lo más importante de un proyecto multimedia es el diseño y la composición, ya que
son los responsables de proporcionar una identidad al proyecto. Para ello se puede
aplicar dos tipos de enfoques, esto depende del cliente si el cliente prefiere énfasis en la
parte técnica o el proceso del diseño. Pero es ahí donde el desarrollador tiene que
analizar cual es el enfoque más adecuado al proyecto que se va a realizar.
Vaughan (1995) sostiene “Nunca empiece un proyecto de multimedia sin primero
perfilar su estructura y contenido.” (pg 389)
3.4 NAVEGACIÓN
Vaughan (1995) señala que:
En la fase de planeación lo primordial es crear un mapa de la estructura del
proyecto. Un mapa de navegación es un boceto de los vínculos a los diferentes
contenidos del proyecto, a este mapa de navegación también se lo conoce como
(navMap). La ventaja de realizar un mapa de navegación es que mantiene la
Existen cuatro estructuras de navegación que a menudo son usadas en proyectos
multimedia pero lo más importante es usarlas en combinación.
Lineal: se puede navegar en secuencia, de un cuadro o fragmento de la
información a otro.
Jerárquica: se puede navegar en ramas de la estructura de árbol que se forma
dada la lógica natural del contenido.
No lineal: se puede navegar libremente a través del contenido del proyecto, sin
limitaciones.
Compuesta: se puede navegar libremente (no linealmente) pero también están
limitados en ocasiones. (p.390)
Un proyecto multimedia se inicia primordialmente con la creación de un (navMap). Este
mapa de navegación será de gran ayuda para el desarrollador, ya que mantendrá todos
los enlaces organizados antes de ser plasmados en el proyecto multimedia. Por ello se
debe tomar en cuenta varios tipos de navegación, además el desarrollador debe contar
Tabla Nº 2
Las cuatro estructuras de navegación primarias utilizadas en multimedia
Fuente : Vaughan, T. (1995). Todo el poder de multimedia. McGraw-Hill.
Elaborado por: Vaughan Tay
En algunas plataformas se observa que los mapas de navegación son no lineales y el
usuario puede saltar el índice o incluso el mismo mapa de navegación, con lo cual los
usuarios sienten que tienen toda la libertad de navegar en la plataforma. En algunos
casos es necesario brindar este tipo de navegación para tener un usuario satisfecho.
También es necesario aclarar que un guión se realiza con un proceso extenso de
bocetaje, cada pantalla trabaja con un boceto inicial con todas las acotaciones antes de
ser generada. Es imprescindible crear un menú bien estructurado con botones seguros
que los enlacen a los contenidos esperados, además la estructura tendrá que ser simple
para que el usuario se familiarice y pueda navegar fácilmente en la plataforma.
(Vaughan Tay, 1995).
El proceso de bocetaje es una parte fundamental en los proyectos multimedia, pero cabe
recalcar que si se maneja un guión previamente a la construcción del proyecto podrá ser
corregido a tiempo. Además no se debe dejar de lado la posición de los botones y su
ubicación en la plataforma es sumamente importante, debido a que es más novedoso
colocar un botón en movimiento. Esto ultimo llamará la atención al usuario y creará
A continuación se presenta un modelo de guión básico en multimedia.
Tabla Nº 3
Lista de un guión multimedia
Fuente : Vaughan, T. (1995). Todo el poder de multimedia. McGraw-Hill.
3.5 ÁREAS SENSIBLES Y BOTONES
El desarrollador usando multimedia puede crear en cualquier tipo de pantalla un botón o
área sensible y a la vez convertir cualquier objeto en un botón. Por ejemplo hacer clic en
un botón que contenga animación se convierte en una motivación para el usuario. Por
lo cual se convierte en multimedia interactiva, también el menú de navegación contará
con botones lógicos con un mensaje claro en su texto, pero también existe la posibilidad
de respaldarnos con íconos. (Vaughan Tay, 1995).
Sin embargo no se debe saturar a los usuarios con íconos innecesarios y se debe
mantener una línea gráfica sencilla y fácil de entender sin usar terminologías técnicas
que desmotiven a los usuarios. Además, es importante crear botones con funciones
básicas como salir del sistema o cargar una página de la plataforma. Existen varias
categorías en las que se encasillan los botones ya que a cada botón se puede agregar
imágenes o simplemente dejar solo el texto. (Vaughan Tay, 1995).
Hay que considerar que el proyecto no se debe saturar. Aunque algunos desarrolladores
piensan que poner varias animaciones, texto en movimiento y una gran cantidad de
botones enlazados, el proyecto será más novedoso. Lo cierto es que esto satura al
proyecto, lo hace irritante al usuario y además la información no llega clara. Un
proyecto multimedia eficaz y buen estructurado debe manejar una línea gráfica sencilla
CAPÍTULO IV
WEB
4.1 HISTORIA
Mora (2002) señala que:
A lo largo de los años el internet se ha ido desarrollando por un gran grupo de
personas no se puede decir quien lo creo porque el internet en la actualidad se ha
ido desarrollando poco a poco por personas que trabajan diariamente en este
campo. Una de las personas más representativas y es reconocido como el padre
del internet es A Lawrence (Larry) Roberts fue el director del grupo de
ingenieros que crearon el sistema ARPANET5
. Lawrence desarrollo un sistema
de red abierta que tenía la posibilidad de comunicar a un computador con otro
sin usar cualquier tipo de software especifico para sus computadores. (p.6)
Un gran avance científico es la creación del internet: una herramienta fundamental que
se ha ido desarrollando con el pasar del tiempo. Internet fue creado por un grupo de
personas pero el más importante es Lawrence (Larry), quien investigó como comunicar
un computador a otro de manera que se desarrolló un sistema de redes abiertas.
Del mismo modo que el internet, la Web está en constante desarrollo por lo cual no se
debe dar el merito a una sola persona. Pero si hay que mencionar a alguien será a Tim
Bernes Lee. Lo cierto es que a él se le debe los tres elementos claves del nacimiento de
la Web.
HTML: es un lenguaje que nos sirve para crear los contenidos Web, está formado por
una serie de etiquetas que el navegador interpreta en la pantalla.
HTTP: es un protocolo de comunicación ente computadores y la Web, pero su función
principal es la transferencia de los contenidos web.
URL: se lo utiliza como un medio de identificación para todos los contenidos Web
fotografías, sonidos etc. (Mora Sergio, 2002)
Es importante aclarar que el desarrollo de la Web tal como hoy en día se conoce, se
debe al trabajo diario de personas que día a día han trabajando para mejorar la
experiencia del usuario en internet. Pero es necesario recordar a dos personas que han
sido fundamentales en el desarrollo de la web, ya que sin la investigación de uno de
ellos no existiría internet. Por un lado se tiene a Lawrence (Larry) quien junto a su
equipo crearon internet a base de redes abiertas. Sin embargo Tim Bernes Lee fue el
creador de Word Wide Web un sistema de páginas creadas en HTML, un lenguaje de
programación enfocado en presentar información en páginas estructuradas a base de
códigos, pero estas páginas se encontraran alojadas en internet.
4.2 HTML
Ferrer, García y García (2014) afirman que:
HTML comenzó a usarse a principios de 1990. Este gran avance científico fue
Suiza. Berners desarrolló un sistema para compartir información basándose en
un sistema de páginas, a estas páginas Berners las llamo webs más conocidas
como páginas webs, con esto comenzaba el nacimiento de World Wide Web
pero su abreviación más conocida es WWW, y se la entendía como la telaraña
mundial.
Para crear las páginas que conformaban la telaraña mundial fue usado el
lenguaje HTML, este lenguaje era muy sencillo de usar y permitía al
desarrollador introducir varios caracteres como texto, sonido, imágenes, etc.
Debido a su gran alcance y al potencial que tenía WWW, el lenguaje HTML se
popularizó y muchas empresas comenzaron a crear y comercializar software, su
función principal era buscar páginas HTML en el internet, por lo cual
aparecieron los primeros exploradores y estos software entendían el lenguaje
HTML y presentaban la información en la pantalla. (p. 227)
HTML es el lenguaje de programación más conocido en el mundo. Este lenguaje
permite crear páginas a base de códigos y debido a la suma importancia de las páginas
creadas con HTML empresas desarrolladoras de software crearon navegadores web. Lo
cual puso al alcance de todo el mundo los sitios creados con este código.
4.3 EL ESTÁNDAR HTML 2.0
HTML 2.0 fue creado con la finalidad de mejorar el lenguaje y a la vez aumentar las
etiquetas HTML. Al principio funciono bien porque los navegadores se adaptaron y
soportaban este lenguaje, con el pasar del tiempo HTML salió de control ya que las
técnico fue extensiones que solo podrían ser visualizadas en sus navegadores. Sin
embargo esto fue la causa de un gran desorden. (Ferrer García y García, 2014).
4.4 EL ESTÁNDAR HTML 3.2
HTML 3.0 apareció con nuevas etiquetas pero algunas de éstas no tenían una buena
utilidad. Además HTML fue el responsable de crear algunas extensiones de gran
utilidad, sin embargo tenía una gran diferencia con HTML 2.0, y al cabo de poco
tiempo aparece el estándar HTML 3.2. Este estándar tenía correcciones y mejoraba la
compatibilidad con 2.0 y en el nuevo estándar se introdujo nuevos elementos como:
Código JavaScript <SCRIPT>, <STYLE>, <META>, <BASE>
También se agregaron nuevos atributos como la etiqueta BODY, con los cuales se podía
cambiar el color de fondo o establecer una imagen de fondo. Otra etiqueta que se agrego
fue <FONT> y quizá una de las más importantes era la posibilidad de realizar tablas.
(Ferrer García y García, 2014).
El desarrollo y la actualización del lenguaje es muy común debido a que está en
constante evolución. HTML 3.2 fue creado con la finalidad de aumentar etiquetas en el
lenguaje. Hoy también se busca estabilidad en los navegadores que van apareciendo en
el mercado, pero más aún su objetivo es el de facilitar y aumentar las posibilidades de
4.5 HTML 4.0
HTML 4.0 introduce etiquetas novedosas creadas específicamente para trabajar con
frames, se puede decir que el nuevo estándar es completo y además es estable por su
buena compatibilidad con la mayoría de navegadores. Lo cierto es que hay que
agradecer y reconocer el esfuerzo del proyecto Mozilla debido a que la idea de este
navegador es poner más importancia a los estándares HTML para visualizar
correctamente la información. (Ferrer García y García, 2014).
Lo cierto es que gracias a esta actualización se puede trabajar de forma fácil y estable
con diferentes lenguajes de programación como Java Script. El objetivo de estas
actualizaciones es estandarizar su lenguaje para todo tipo de navegadores, debido a que
algunas compañías han creado sus propias etiquetas y solo se las puede visualizar en sus
navegadores.
4.6 EL FUTURO DEL HTML
HTML es la base fundamental de las páginas web y cada día sigue un proceso de
evolución. También brinda amplias posibilidades para los desarrolladores, sin embargo
es importante conocer el estándar. El lenguaje HTML tiene una gran expectativa porque
cada vez sigue adquiriendo mucho reconocimiento y su objetivo a futuro es
proporcionar de dinamismo o interacción con el usuario a todas las páginas web. (Ferrer
García y García, 2014).
HTML también ofrecerá mayor compatibilidad con otros lenguajes de programación
tedioso para un desarrollador cuando el lenguaje se limita para ciertos navegadores. El
objetivo que sigue el actual HTML es estandarizarse y aumentar su compatibilidad con
todos los navegadores incluyendo los lenguajes de programación que ya han trabajado
con HTML. Esto posibilita la creación de sitios dinámicos y atractivos para una mejor
interacción con los usuarios. (Ferrer García y García, 2014).
HTML busca en su futuro estandarizar su lenguaje de programación para trabajar en
cualquier navegador sin ningún problema. Además su estabilidad está en constante
desarrollo, por lo cual busca compatibilidad con otros lenguajes de programación, como
es el caso de Java Script. Es decir que HTML busca crear sitios más interactivos.
CAPÍTULO V
DISEÑO WEB
5.1 LA EVOLUCIÓN DEL DISEÑO DE PÁGINAS WEB
Equipo Vértice (2009) afirma:
Las páginas web de los primeros tiempos de vida de Internet eran tan simples
como un documento de texto o un simple folleto en el que el desarrollo más
complicado consistía en usar efectos en las fuentes y colores. El diseño solía
realizarse de arriba a abajo y de izquierda a derecha, intercalando secuencias de
imágenes y textos, con muchos saltos de línea y otros elementos separadores
como las barras horizontales y las viñetas de lista. Se construían en lenguaje
bien, los programadores se encontraron con problemas como la superposición de
colores o efectos de textos demasiado resaltados y sobredimensionados. (pg7)
Antiguamente las páginas web no contaban con un buen diseño debido a que los
desarrolladores carecían de conocimientos en diseño, también existía grandes problemas
con la superposición de objetos ya que las páginas eran programadas en código HTML.
Las páginas eran tan sencillas que parecían documentos de texto y las páginas más
complicadas contaban con efectos en el texto y en sus colores. Dichas páginas tenían
una buena estructura y funcionamiento pero carecían de diseño. (Equipo Vértice, 2009).
A lo largo del tiempo las empresas han tenido la necesidad de establecer un sistema de
comercio electrónico, por lo cual las páginas web estaban desarrolladas con una
estructura más compleja. Está fue la oportunidad para que lenguajes de programación
como JavaScript se den a conocer. JavaScript permite crear programas pequeños con un
alto grado de utilidad y con la expansión de World Wide Web (WWW). Ahora los
desarrolladores se dan cuenta que hay que enfocarse en crear sitios más atractivos para
los usuarios. (Equipo Vértice, 2009).
Un sitio web es un conjunto de páginas HTML alojadas en un hosting en internet que
para ser visualizadas en un navegador se las asigna a un dominio. También, hay que
mencionar que la web ha ido evolucionando a la par con las necesidades de los usuarios.
En la actualidad las empresas ya cuentan con páginas de ventas en línea y para ello es
5.2 TÉCNICAS AVANZADAS DE DISEÑO WEB
Hoy en día con la evolución de internet y la gran demanda de compras en línea es
indispensable enlazar la interfaz gráfica de la web con una base de datos, en la cual se
alojen los archivos que contenga el sitio web. Para ello existen empresas que brindan
servicio de alojamiento y es muy sencillo contratar estos servicios. Si se cuenta con un
sitio dinámico se puede ordenar que busque datos en el servidor y los inserte en la
página. (Equipo Vértice, 2009).
Sin embargo, si el objetivo es crear aplicaciones web empresariales lo más aconsejable
es usar una base de datos basada en SQL Server, Oracle Data Base o MySQL, ya que
servirá de gran ayuda para crear una aplicación web rápida y eficiente.
5.3 ESTRUCTURA BÁSICA DE UNA PÁGINA WEB
Una página web básica se encuentra formada por elementos esenciales que todas las
personas interesadas en el campo web deberían conocer.
La cabecera, sin duda, es una pieza fundamental de la página web, en la cual se puede
destacar la información esencial de la empresa y normalmente en este espacio se incluye
el logotipo de la empresa. Un buscador que facilite el uso de la página y algunos
El menú del sitio web facilita la navegación entre las páginas web enlazadas al sitio, con
esto se pretende ayudar al usuario a localizar de una forma rápida los contenidos.
En el cuerpo estará ubicado todo el contenido de la página.
En el pie de página es habitual destacar el copyright de la empresa la dirección y el
contacto. (Equipo Vértice, 2009).
Es importante manejar una buena estructura en la página web y para ello se tiene que
aplicar algunos elementos, tales como : cabecera, menú, contenido, pie de página.
5.4 ESTRUCTURA DEL CUERPO DE UNA PÁGINA WEB
Gauchat (2012) señala que:
Para crear contenido en la página es necesario utilizar la etiqueta <body> esta
etiqueta genera la parte visible del documento.
Al principio HTML usaba el código <table> para generar información visible en
el documento, los diseñadores generaban tablas que contenían textos, imágenes
y datos dentro de filas. Estas tablas fueron es sus primeros días una gran
revolución ayudaban a los diseñadores a mantener organizada la información y
mejoraba la visualización ofrecida a los usuarios.
A lo largo del tiempo crearon nuevas etiquetas capaces de realizar la misma
función con la ventaja de utilizar menos código. Una de ellas y quizá la más
etiqueta se pudo crear sitios interactivos y a la vez integrar CSS y Javascript, con
el pasar del tiempo la etiqueta <div> se volvió una practica común.
Los puntos básicos que se usa para crear una web básica son:
1. Cabecera
2. Barra de navegación
3. Sección de información principal
4. Barra lateral
5. El pie o la barrera institucional
En la siguiente tabla se muestra la estructura básica de un blog y servirá de gran
ayuda para identificar las secciones definidas del sitio web. (p.8)
Hay que tomar en cuenta que el contenido designado a cada posición es el adecuado. Un
ejemplo claro es la etiqueta <body>: el cuerpo de toda la página. Con el paso del tiempo
HTML ha ido evolucionando y sus etiquetas también: una de ellas es <div>, la cual
permite presentar la información en bloques de texto. Pero la clave fundamental de su
estructura son los siguientes puntos básicos: cabecera, barra de navegación, sección de
Tabla Nº 4
Representación visual de un diseño utilizando elementos HTML
Fuente: Gauchat, J. D. (2012). El gran libro de HTML5, CSS3 y JavaScript.
Marcombo.
Elaborado por: Gauchat Juan
Un elemento importante que incorpora HTML es la etiqueta <header>, ésta etiqueta a
menudo se la confunde con la etiqueta <head> ya que tienen algunas funciones
similares. En esta nueva etiqueta se pueden destacar títulos, subtítulos y logos. Estas
documento, mientras que <header> solo proporciona a partes específicas. (Gauchat
Juan, 2012).
5.5 DENTRO DEL CUERPO
Una vez que la página web se encuentre bien estructurada, es tiempo de trabajar en su
contenido interior: hay que comenzar asignando información en el interior de cada una
de las secciones. Cabe recalcar que ya a se ha visto una gran parte de elementos que
forman la estructura del exterior de una página, estos son :
• <body> es la sección en la cual se coloca la información visible del documento
• <header> permite agrupar información importante para el cuerpo
• <nav> ayuda a mantener la navegación para un sitio bien ordenado
• <section> crea secciones para presentar la información en el documento
• <footer> sirve para destacar información adicional en el documento
Es importante diferenciar la estructura del cuerpo de un documento: la parte exterior
generalmente se usa como base de una página; mientras en la interior se pueden
mostrar elementos como imágenes, video, audio, aplicaciones interactivas, títulos y
textos. Es decir que se debe prestar mayor atención al estudio de etiquetas básicas
usadas en el cuerpo del documento. Ejemplo: el caso de la etiqueta <section> y
<article>. (Gauchat Juan, 2012).
<section>: esta etiqueta es usada para crear bloques de contenido, además es padre de la
<article>: esta etiqueta es de mucha importancia en el cuerpo del documento ya que
permite crear divisiones dentro de la etiqueta <section>; pueden existir un gran
número de estas etiquetas en un <section>.(Gauchat Juan, 2012).
A continuación se presenta una tabla del cuerpo
Tabla Nº 5
Representación visual de la etiqueta <article>
Fuente: Gauchat, J. D. (2012). El gran libro de HTML5, CSS3 y JavaScript.
Marcombo.
5.6 USO DEL COLOR
Acerca del color se puede decir que una página sin una buena combinación de color
desmotiva al usuario. Además es difícil comprender su contenido ya que el mal uso de
sus colores puede cambiar el contexto del mensaje. Cabe mencionar que una página
realizada en blanco y negro es demasiada sencilla y el usuario perderá interés en el sitio,
además es necesario comprender cuando se utiliza y se combina un color.
Mora Sergio (2002) señala que las formas de emplear el color son:
Para etiquetar: en este caso el color actúa para destacar y subrayar la
información.
Para medir: se puede emplear pare representar medidas por medio de la escala de
colores y esto se aplica mucho en los gráficos estadísticos.
Para representar o imitar la realidad: el color se utiliza para representar algo real.
Para decorar: el color es utilizado para enriquecer de belleza a la página.
Los expertos creen que la capacidad humana para distinguir colores es de un
millón pero la gran mayoría de seres humanos solo distinguen 20000. Lo
recomendable para una página es limitar su uso a 20 colores distintos como
máximo, es importante no tomar en cuenta a los colores que se empleen en
Consejos básicos para el uso del color:
Un color claro sobre una superficie clara va a saturar la página y a la vez es
irritante a la vista. Un ejemplo claro es un texto verde claro sobre amarillo, sin
embargo un texto claro sobre un fondo apagado destaca y proporciona
dinamismo al texto.
Colores claros y brillantes demasiado cerca causan un efecto desagradable.
Un color de fondo tiene que ser suave y a la vez discreto, de modo que no sea
una distracción para el usuario y se enfoque en los elementos de primer plano.
En el caso del texto es necesario que exista un buen contraste en el color debido
a que no se quiere que el texto sea tan ilegible que el usuario termine con dolor
de cabeza a mitad de la lectura, la combinación más usada es el negro sobre
blanco y generalmente se usa en libros y todo tipo de documentos escritos,
cuando menor sea el contraste de claridad y oscuridad en las letras y el fondo,
menos legible resulta el texto.
No es recomendable el blanco sobre fondo negro, lo cierto es que no es bien
visto estéticamente y los usuarios le dan menor importancia a la información,
este estilo se aplica para la lectura en lugares que carecen de luz.
El amarillo sobre negro, esta combinación es la adecuada para destacar un
Es necesario tomar en cuenta las combinaciones de color estandarizadas para presentar
información, si el sitio no cuenta con el uso apropiado del color se entregará un sitio
confuso para el usuario y será de mala calidad. Ejemplo: se tiene el color de texto
brillante sobre fondo brillante. Este estilo no sirve porque el contenido se vuelve
confuso y no llega claro al usuario ya que para presentar textos siempre se debe usar
colores que puedan ser contrastados con el fondo.
5.7 PROPORCIONES DORADAS
Careaga (2009) señala que:
También conocida como proporción áurea; a esta proporción se le asocia
directamente con la belleza y también se la puede encontrar en la naturaleza y en
figuras geométricas. En la antigüedad fueron usadas por artistas en pintura y
escultura, un claro ejemplo es la Gioconda de Leonardo da Vinci.
Existen varios escritos que mencionan al número áureo en el 2000 a.C. Lo cierto
es que no existe un documento que pruebe su utilización de manera consiente, en
la antigüedad fue usada por los griegos para la edificación de sus templos, el
gran filosofo griego Platón afirmaba que era la matemática perfecta, pero no fue
el quien hizo un estudio formal de la proporción áurea ya que fue Euclides el
primero en estudiar la proporción y la llamo Corte dorado. (p.5)
Sin la divina proporción no existirían importantes obras. En este sentido una de ellas es
la Gioconda de Leonardo da Vinci, la cual está formada en su totalidad con rectángulos
Tabla Nº 6
Ejemplo proporción 62% y 38%
Fuente: (Careaga Mercadillo, A. L. (2009). La web de oro: Cómo diseñar una página
web 2.0 con proporciones doradas).
Elaborado por: Careaga Mercadillo
La proporción áurea se obtiene dividiendo el tamaño del contenido para 1,618 de modo
que el número obtenido sea un rectángulo áureo. Al seguir dividiendo se tiene más
rectángulos áureos y al unir estos rectángulos se forma una espiral logarítmica. Un
ejemplo clave es la concha nautilus ya que su parecido es similar a la espiral obtenida.
Tabla Nº 7
Ejemplo rectángulos áureos
Fuente: (Careaga Mercadillo, A. L. (2009). La web de oro: Cómo diseñar una página
web 2.0 con proporciones doradas).
Tabla Nº 8
Ejemplo retícula básica
Fuente: (Careaga Mercadillo, A. L. (2009). La web de oro: Cómo diseñar una página
web 2.0 con proporciones doradas).
Elaborado por: Careaga Mercadillo.
Si se utiliza bien la proporción áurea se puede aumentar las posibilidades de crear un
desarrollador. La proporción áurea es la puerta a un mundo de posibilidades infinitas de
diseño, si se junta esto con una buena navegación, el uso del color adecuado, tipografía,
animación y elementos multimedia, se podrá crear una web interactiva y a la vez muy
atractiva. (Careaga Ana, 2009).
CAPÍTULO VI
PRESENTE Y FUTURO DE LA TECNOLOGÍA WEB
6.1 PRESENTE
Hoy en día la Web está enfocada en crear sitios web interactivos donde los usuarios son
quizá tan o más importantes que los clientes, y cada día sigue teniendo mayor
importancia en la sociedad y en la economía. Las páginas que existen en la actualidad
son creadas a base de tecnología responsive, ya que esta tecnología mejora la
experiencia de usuario. (Equipo Vértice, 2009).
Bootstrap: permite crear interfaces web con estilos CSS y JavaScript; su singularidad es
la de adaptar la interfaz del sitio al tamaño del dispositivo en que se visualice. Lo cierto
es que el sitio web se adapta automáticamente al tamaño del dispositivo móvil, tablet o
computador de escritorio. Este es un framework creado por Twitter. Este estilo de
diseño se le conoce como “responsive design” o diseño adaptativo.6
6 Solis Johnny.(2014) ¿Qué es Bootsrap y cómo funciona en el diseño web? Información obtenida en el sitio Web:
