Tesis-Carlos-Benavides-Salazar.pdf

UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE COMUNICACIÓN SOCIAL
CARRERA DE DISEÑO GRÁFICO
TESIS DE GRADO
PREVIO A LA OBTENCIÓN DEL TÍTULO
INGENIERO EN DISEÑO GRÁFICO
TEMA:
El diseño web adaptativo como componente
fundamental para la elaboración de páginas web
PROPUESTA
Diseño y elaboración de una guía informativa impresa
con técnicas y pautas de diseño que permitan adaptar
sitios web al entorno de navegación del usuario
AUTOR
Benavides Salazar Carlos Leonardo
TUTORES
Lcdo. Arteaga Medina Galo, Msc
Ing. Navarrete Zavala Fernando, Msc
2015
GUAYAQUIL – ECUADOR
REPOSITORIO NACIONAL EN CIENCIA Y TECNOLOGÍA
FICHA DE REGISTRO DE TESIS
TÍTULO Y SUBTÍTULO: El diseño web adaptativo como componente
fundamental para la elaboración de páginas web
AUTOR/ES:
Carlos Leonardo Benavides Salazar
TUTORES: Lcdo. Galo Arteaga Medina Msc
Ing. Fernando Navarrete Zavala Msc
REVISORES:
INSTITUCIÓN: Universidad de
FACULTAD: Comunicación Social
Guayaquil
CARRERA: Diseño Gráfico
No. DE PÁGS: 179
FECHA DE PUBLICACIÓN:
TÍTULO OBTENIDO: Ingeniero en Diseño Gráfico
ÁREAS TEMÁTICAS: Aumentar el nivel competitivo de los estudiantes mediante la
información sobre el diseño web adaptativo
PALABRAS CLAVE: Diseño web, Tecnología, Diseño adaptativo, Diseño web
adaptativo, Adaptativo.
RESUMEN: Actualmente el diseño web adaptativo es una solución necesaria
para ajustar sitios web a los diferentes entornos de navegación que utiliza el
usuario al navegar por el internet, esta práctica surge por el incremento de
dispositivos móviles en el mundo, y por el concepto “One Web” expuesto en el
2008 por la W3C (Consorcio de la World Wide Web), el cual hace referencia a
construir una web para todos que permita interactuar desde cualquier dispositivo.
Sin embargo, dentro del syllabus para el quinto semestre de la Carrera de
Diseño Gráfico no se encuentra un modulo sobre el diseño web adaptativo,
siendo este una dificultad para el estudiante al momento de crear páginas web.
Es por eso que este estudio busca difundir la información sobre el diseño web
adaptativo con el propósito de mejorar el nivel competitivo de los estudiantes.
No. DE REGISTRO (en base de
datos):
DIRECCIÓN URL (tesis en la web):
ADJUNTO PDF:
X
CONTACTO CON
AUTOR/ES
CONTACTO EN LA
INSTITUCIÓN:
No. DE CLASIFICACIÓN:
SI
NO
E-mail: [email protected]
Teléfono:
0983673792
Nombre: Carrera de Diseño Gráfico
Teléfono: 042643991
E-mail: [email protected]
II
UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE COMUNICACIÓN SOCIAL
CARRERA DE DISEÑO GRÁFICO
DIRECTIVOS
_________________________
_______________________
MSc. Kléber Loor Valdiezo
MSc. Christel Matute Zhuma
DECANO
SUBDECANA
________________________
_______________________
MSc. Oscar Vélez Mora
DIRECTOR DE LA CARRERA
DISEÑO GRÁFICO
Abg. Xavier González Cobo
SECRETARIO GENERAL
III
ACEPTACIÓN DEL TUTOR
Máster
Kléber Loor Valdiviezo
DECANO DE LA FACULTAD DE COMUNICACIÓN SOCIAL
Universidad de Guayaquil
Ciudad.-
Tengo a bien informar que el (la) egresado (a): CARLOS LEONARDO
BENAVIDES SALAZAR, con C.C. # 094079335-9; diseño y ejecutó el
Proyecto de investigación con el tema: El diseño web adaptativo como
componente fundamental para la elaboración de páginas web.
El mismo que ha cumplido con las directrices y recomendaciones dadas
por el suscrito.
El
autor
ha
ejecutado
satisfactoriamente
las
diferentes
etapas
constitutivas del proyecto; por lo expuesto se procede a la APROBACIÓN
DEL PROYECTO, y pongo a vuestra consideración el informe de rigor
para los efectos legales correspondientes.
Atentamente,
…………………………………….
Lcdo. Galo Arteaga Medina, Msc.
Tutor Académico
IV
ACEPTACIÓN DE LA PROPUESTA
Máster
Kléber Loor Valdiviezo
DECANO DE LA FACULTAD DE COMUNICACIÓN SOCIAL
Universidad de Guayaquil
Ciudad.-
Tengo a bien informar que el (la) egresado (a): CARLOS LEONARDO
BENAVIDES SALAZAR, con C.C. # 094079335-9; diseño y ejecutó el
Proyecto de investigación con la Propuesta: Diseño y elaboración de una
guía informativa impresa con técnicas y pautas de diseño que permitan
adaptar sitios web al entorno de navegación del usuario.
El mismo que ha cumplido con las directrices y recomendaciones dadas
por el suscrito.
El
autor
ha
ejecutado
satisfactoriamente
las
diferentes
etapas
constitutivas del proyecto; por lo expuesto se procede a la APROBACIÓN
DEL PROYECTO, y pongo a vuestra consideración el informe de rigor
para los efectos legales correspondientes.
Atentamente,
…………………………………….
Ing. Fernando Navarrete Zavala, Msc.
Tutor Técnico
V
CERTIFICADO DE REVISIÒN DE LA REDACCIÒN Y ORTOGRAFÌA
Yo, Lcdo. -------------------, Certifico: que he revisado la redacción y
ortografía del Contenido del Proyecto de Investigación con el Tema: El
diseño web adaptativo como componente fundamental para la elaboración
de páginas web. Propuesta: Diseño y elaboración de una guía
informativa impresa con técnicas y pautas de diseño que permitan adaptar
sitios web al entorno de navegación del usuario, elaborado por CARLOS
LEONARDO BENAVIDES SALAZAR con cédula de ciudadanía #
094079335-9, previo a la obtención del Título de INGENIERO EN DISEÑO
GRÁFICO.
Para el efecto he procedido a leer y a analizar de manera profunda el
estilo y la forma del contenido del texto:
•
•
•
•
•
•
•
•
•
Se denota la pulcritud en la escritura en todas sus partes.
La acentuación es precisa.
Se utilizan los signos de puntuación de manera acertada.
En todos los ejes temáticos se evitan los vicios de dicción.
Hay concreción y exactitud en las ideas.
No incurre en errores en la utilización de las letras.
La aplicación de la sinonimia es correcta.
Se maneja con conocimiento y precisión la morfosintaxis.
El lenguaje es pedagógico, académico, sencillo y directo, por lo
tanto de fácil comprensión.
Por lo expuesto, y en uso de mis derechos como especialista en
Ciencias de la Educación Especialización Literatura y Castellano,
recomiendo la VALIDEZ ORTOGRÁFICA del proyecto previo a la
obtención del Título de INGENIERO EN DISEÑO GRÁFICO.
Atentamente,
-----------------------------------Lcda.
Reg. SENESCYT #
VI
ACTA DEL TRIBUNAL EXAMINADOR
UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE COMUNICACIÓN SOCIAL
CARRERA DE DISEÑO GRÁFICO
EL TRIBUNAL EXAMINADOR, previo la obtención del título de:
INGENIERO EN DISEÑO GRÁFICO, otorga al presente proyecto las
siguientes calificaciones:
TOTAL: ………………………………………………….
(
)
EQUIVALENTE: ……………………………………….. (
)
……………………………………..
Miembro del Tribunal
…………………………………..
Miembro del Tribunal
…………………………………….
Miembro del Tribunal
…………………………………..
Secretario
…………………………………….
Alumnas(os)
VII
UNIVERSIDAD DE GUAYAQUIL
FACULTAD DE COMUNICACIÓN SOCIAL
CARRERA DISEÑO GRÁFICO
VIII
Máster
Kléber Loor Valdiviezo
DECANO DE LA FACULTAD DE COMUNICACIÓN SOCIAL
Ciudad.-
De mis consideraciones:
Para los fines legales pertinentes comunico a usted que los derechos
intelectuales del Proyecto de Investigación: El diseño web adaptativo
como componente fundamental para la elaboración de páginas web.
Propuesta: Diseño y elaboración de una guía informativa impresa con
técnicas y pautas de diseño que permitan adaptar sitios web al entorno de
navegación del usuario.
Pertenecen a la FACULTAD DE COMUNICACIÓN SOCIAL.
Atentamente,
Carlos Benavides Salazar
C.C. # 094079335-9
IX
AGRADECIMIENTO
Agradezco a DIOS por orientarme y dar entereza en tan dura tarea, a mis
padres por enseñarme el valor del esfuerzo y la responsabilidad al cumplir
mis objetivos. A mis hermanos(as), amigos (as) por brindarme su apoyo
durante mi formación profesional en especial a dos grandes amigos
Geovanny y Mercy. También
agradezco al personal administrativo,
docente y comunidad estudiantil de la Carrera de Diseño Gráfico, la cual
hizo posible el desarrollo de este proyecto.
Carlos Leonardo Benavides Salazar
X
DEDICATORIA
Quiero dedicar este proyecto de investigación a DIOS, por ser pilar
esencial en mi vida a mi familia, en especial a mis padres, Raúl y Daysi
por ser cimiento en el transcurso de mi formación como padre e hijo. A mi
hija Ania por ser motor e inspiración en la culminación de mis metas con
éxito. A mis amigos(as) y cada una de las personas que me apoyaron
moral y económicamente.
Carlos Leonardo Benavides Salazar
XI
ÍNDICE GENERAL
Portada
I
Repositorio nacional (senescyt)
II
Acta de directivos
III
Informe académico del proyecto
IV
Informe técnico del proyecto
V
Certificado de revisión de la redacción y ortografía
VI
Acta de tribunal examinador
VII
Advertencia
VIII
Derechos intelectuales
IX
Agradecimiento
X
Dedicatoria
XI
Índice de general
XII
Resumen
XX
N°
Descripción
Pág.
INTRODUCCION
1
CAPÍTULO I
EL PROBLEMA
N°
Descripción
Pág.
1.1
Planteamiento del problema
2
1.2
Ubicación del problema en un contexto
3
1.3
Situación en conflicto
4
XII
1.4
Causas y consecuencias
5
1.5
Delimitación del problema
5
1.6
Formulación del problema
5
1.7
Evaluación del problema
6
1.8
Variables de la investigación
7
1.9
Objetivos de la investigación
7
1.10
Hipótesis
8
1.11
Interrogantes de la investigación
8
1.12
Justificación
9
CAPÍTULO II
MARCO TEÓRICO
N°
Descripción
Pág.
2.1
Antecedentes del estudio
10
2.2
Fundamentación teórica
10
2.3
Fundamentación andragógica
16
2.4
Fundamentación tecnológica
17
2.5
Fundamentación legal
18
CAPÍTULO III
METODOLOGÍA DE LA INVESTIGACIÓN
N°
Descripción
Pág.
3.1
Diseño de la investigación
24
3.2
Modalidad de la investigación
25
XIII
3.3
Tipos de investigación
26
3.4
Población y muestra
29
3.5
Técnicas de la investigación
32
3.6
Procedimientos de la investigación
33
3.7
Recolección de la información
33
CAPÍTULO IV
RESULTADOS
N°
Descripción
Pág.
4.1
Análisis e interpretación de resultados
35
CAPÍTULO V
PROPUESTA
N°
Descripción
Pág.
5.1
Título
59
5.2
Justificación
59
5.3
Fundamentación Teórica
60
5.4
Objetivos
62
5.5
Importancia
62
5.6
Ubicación Sectorial y Física
63
5.7
Factibilidad
63
5.8
Descripción de la propuesta
64
5.9
Misión
76
5.10
Visión
77
XIV
5.11
Beneficiarios
77
5.12
Impacto Social
77
5.13
Definiciones de términos relevantes
77
CAPÍTULO VI
CONCLUSIONES Y RECOMENDACIONES
N°
Descripción
Pág.
6.1
Conclusiones
82
6.2
Recomendaciones
83
ANEXOS
84
BIBLIOGRAFÍA
156
LINKOGRAFÍA
157
XV
ÍNDICE DE CUADROS
N°
Descripción
Pág.
1
Causas y consecuencias
2
Población objetivo
29
3
Muestra obtenida de la población objetivo
31
4
El diseño web adaptativo como componente fundamental
37
5
Herramientas de consulta que contengan información
sobre diseño web adaptativo
38
6
Consulta de una guía informativa relacionada al diseño
web adaptativo
39
7
Importancia del dominio del diseño web adaptativo en el
diseñador gráfico
40
8
El diseño web adaptativo brinda una oportunidad de
trabajo para los diseñadores gráfico
41
9
Socializar técnicas y pautas que permitan adaptar sitios
web al entorno de navegación del usuario
42
10
Difundir información relacionada al diseño web adaptativo
43
11
Aumento del nivel profesional mediante la creación de una
guía
44
12
El diseño web adaptativo mejora la experiencia de
navegabilidad del usuario
45
13
Guía informativa sobre diseño web adaptativo como
material de consulta
46
14
Conocimiento del estudiantes de la carrera de diseño
gráfico en diseño web
47
15
El diseño web como oportunidad de trabajo para los
estudiantes de diseño gráfico
48
16
Suficiente conocimiento web de parte de los estudiantes
de diseño gráfico
49
17
Fortalecimiento en el conocimiento del diseño web de
parte de los estudiantes de diseño gráfico
50
5
XVI
18
Desconocimiento de parte de los estudiantes en el diseño
web adaptativo
51
19
El estudiantes utiliza dispositivos móviles para navegar por
internet
52
20
Fortalecimiento del nivel profesional mediante una guía
informativa
53
21
Conocimiento de guía relacionada al diseño web
adaptativo
54
22
Acceso de una guía informativa
55
23
Importancia de difundir una guía informativa
56
XVII
ÍNDICE DE GRÁFICOS
N°
Descripción
Pág.
1
Frecuencia con que se utiliza diversos dispositivos
2
Frecuencias con que se utiliza los diversos navegadores
web
17
3
El diseño web adaptativo como componente fundamental
37
4
Herramientas de consulta que contengan información
sobre diseño web adaptativo
38
5
Consulta de una guía informativa relacionada al diseño
web adaptativo
39
6
Importancia del dominio del diseño web adaptativo en el
diseñador gráfico
40
7
El diseño web adaptativo brinda una oportunidad de
trabajo para los diseñadores gráfico
41
8
Socializar técnicas y pautas que permitan adaptar sitios
web al entorno de navegación del usuario
42
9
Difundir información relacionada al diseño web adaptativo
43
10
Aumento del nivel profesional mediante la creación de una
guía
44
11
El diseño web adaptativo mejora la experiencia de
navegabilidad del usuario
45
12
Guía informativa sobre diseño web adaptativo como
material de consulta
46
13
Conocimiento del estudiantes de la carrera de diseño
gráfico en diseño web
47
14
El diseño web como oportunidad de trabajo para los
estudiantes de diseño gráfico
48
15
Suficiente conocimiento web de parte de los estudiantes
de diseño gráfico
49
16
Fortalecimiento en el conocimiento del diseño web de
parte de los estudiantes de diseño gráfico
50
3
XVIII
17
Desconocimiento de parte de los estudiantes en el diseño
web adaptativo
51
18
El estudiantes utiliza dispositivos móviles para navegar por
internet
52
19
Fortalecimiento del nivel profesional mediante una guía
informativa
53
20
Conocimiento de guía relacionada al diseño web
adaptativo
54
21
Acceso de una guía informativa
55
22
Importancia de difundir una guía informativa
56
23
Ubicación Sectorial
63
24
Pantone de identidad gráfica
64
25
Familia tipográfica utilizada en la identidad de la guía
65
26
Área de trabajo de programa de diseño
67
27
Isotipo
69
28
Dimensiones del isotipo
69
29
Uso correcto e incorrecto del isotipo
70
30
Proceso para la creación del isotipo
71
31
Portada de la guía
71
32
Contraportada de la guía
72
33
Separador de unidad
73
34
Retoque fotográfico
74
35
Diagramación de la guía
75
36
Introducción del contenido en la guía
76
XIX
AUTOR:
Benavides Salazar Carlos Leonardo
TEMA:
El diseño web adaptativo como componente
fundamental para la elaboración de páginas web
PROPUESTA:
Diseño y elaboración de una guía informativa
impresa con técnicas y pautas de diseño que
permitan adaptar sitios web al entorno de
navegación del usuario
TUTORES:
Lcdo. Galo Arteaga Medina, MSc.
Ing. Fernando Navarrete Zavala, MSc.
RESUMEN
Actualmente el diseño web adaptativo es una solución necesaria para
ajustar sitios web a los diferentes entornos de navegación que utiliza el
usuario al navegar por el internet, esta práctica surge por el incremento de
dispositivos móviles en el mundo, y por el concepto “One Web” expuesto
en el 2008 por la W3C (Consorcio de la World Wide Web), el cual hace
referencia a construir una web para todos que permita interactuar desde
cualquier dispositivo. Sin embargo, dentro del syllabus para el quinto
semestre de la Carrera de Diseño Gráfico no se encuentra un modulo
sobre el diseño web adaptativo, siendo este una dificultad para el
estudiante al momento de crear páginas web. Es por eso que este estudio
busca difundir la información sobre el diseño web adaptativo con el
propósito de mejorar el nivel competitivo de los estudiantes.
PALABRAS CLAVES: Diseño web, Tecnología, Diseño adaptativo,
Diseño web adaptativo, Adaptativo.
XX
AUTHOR:
Benavides Salazar Carlos Leonardo
THEME:
The adaptive web design as a key component for
the development of web pages
PROPOSAL:
Design and production of a printed informative
guide with technical and design guidelines for
adapting websites to the user's browsing
environment
GUARDIANS:
Lcdo. Galo Arteaga Medina, MSc.
Ing. Fernando Navarrete Zavala, MSc.
ABSTRACT
Currently the adaptive web design is necessary to adapt to different
websites navigation settings used by the user to navigate the Internet
solution , this practice arises from the increase of mobile devices in the
world , and the concept of " One Web " exposed in 2008 by the W3C
(Consortium for the World Wide Web ) , which refers to building a web for
all that allows interaction from any device. However, within the syllabus for
the fifth semester of the School of Graphic Design is not a module on the
adaptive web design, which is a difficulty for the student when creating
web pages. That is why this study aims to disseminate information on the
adaptive web design in order to improve the competitive level of the
students.
KEY WORDS: Web design, Technology, Responsive design, Responsive
web design, Responsive
XXII
INTRODUCCIÓN
Actualmente en el mundo existen millones de dispositivos conectados
al internet, esta evolución crece a pasos agigantados. En nuestro país la
mayoría de las personas se han conectado alguna vez con un dispositivo
móvil, especialmente los estudiantes universitarios de las carreras
tecnológicas.
Es evidente que en los últimos años los diseñadores web han buscado
soluciones para adaptar sus interfaces a los diferentes tamaños de
pantalla. Una de estas soluciones es conocida como diseño web
adaptativo el cual logra adaptar todos los elementos de un sitio web a los
diferentes dispositivos, mediante técnicas de diseño web que permitan
aprovechar las particularidades de cada aparato, con el propósito de
mejorar la experiencia de navegación del usuario.
A pesar que existe este recurso, para los estudiantes de quinto
semestre de la Carrera de Diseño Gráfico aún es desconocido, es por eso
que este trabajo tiene como objetivo brindar conocimiento mediante
técnicas y pautas que permitan adaptar sitios web a los diferentes
entornos de navegación del usuario.
1
CAPÍTULO I
EL PROBLEMA
1.1.
Planteamiento del problema
Las tecnologías web han adquirido gran fuerza gracias a las últimas
revisiones de HTML (HyperText Markup Language, en español lenguaje
de marcas de hipertexto) y CSS (Cascading Style Sheets, en español
hojas de estilo en cascada); estas tecnologías han otorgado al diseño web
grandes ventajas, una de ellas es la compatibilidad con distintos
navegadores móviles que tiene como objetivo llegar a todo tipo de
usuario, este concepto adquirió gran importancia con la llegada de
diversos dispositivos, los cuales tienen diferentes resoluciones de pantalla
y diferentes navegadores, cuyas formas de interactuar no son iguales
unas con otras.
Todo esto obliga al diseñador gráfico a gestionar y jerarquizar la
información, para presentar lo necesario del contenido a los diferentes
usuarios, y determinar las pautas necesarias para un buen diseño, sin
olvidar las características que tiene cada uno de los dispositivos. Además
podemos mencionar como factor importante la insuficiencia de los
conocimientos técnicos que tiene el diseñador gráfico, al momento de
establecer los distintos elementos para representar la información
adaptada a los diferentes entornos del usuario.
Por último, al momento de crear un entorno adaptativo, la maquetación
web puede resultar complicada para algunos diseñadores y fastidioso
para otros. Por ello, es necesario otorgarles materiales o herramientas
que les faciliten realizar su trabajo, y llevar a cabo todos los procesos para
2
la elaboración de entornos adaptativos, capaces de mostrar la información
sin perder el concepto del diseño.
1.2.
Ubicación del problema en un contexto
La competitividad de un diseñador gráfico profesional se muestra con
sus habilidades y conocimientos, es por eso que los estudiantes de quinto
semestre de la Carrera de Diseño Gráfico de la Facultad de Comunicación
Social de la Universidad de Guayaquil, como futuros profesionales, deben
acoger los nuevos conocimientos y recursos que el mundo moderno
ofrece. Para ello, se debe tener en cuenta que en los últimos dos años se
ha duplicado el número de usuarios que en el mundo acceden al internet
mediante un dispositivo móvil.
GRÁFICO 1
FRECUENCIA CON QUE SE UTILIZA LOS DIVERSOS DISPOSITIVOS
Estadísticas globales del uso de plataformas web en los distintos
dispositivos de junio 2013 a junio 2015
Fuente:
StatCounter GlobalStats
Elaboración:
Benavides Salazar Carlos Leonardo
3
Actualmente vivimos en una sociedad que con mayor frecuencia
maneja dispositivos móviles como medio de recolección de datos,
información o noticias que utilizan para realizar distintas actividades.
Por lo tanto, es preciso que los estudiantes de quinto semestre afinen
los conocimientos sobre nuevas tecnologías web (diseño web adaptativo),
sin olvidar potenciar las aptitudes que caracteriza a un diseñador gráfico.
1.3.
Situación en conflicto
El actual pensum académico de la Carrera de Diseño Gráfico de la
Universidad de Guayaquil apuesta a la preparación del perfil profesional
correspondiente del estudiante, aun así podemos decir que en las aulas
no se reciben los conocimientos requeridos en su totalidad. Si bien es
cierto, la universidad no es una institución a la cual solo se va a obtener
un título, sino un espacio público donde se debaten diversos temas y
problemas, de tal forma que está en la obligación de mejorar la sociedad
en la que vivimos.
Actualmente, muchos estudiantes de la Carrera de Diseño Gráfico que
salen al mercado laboral se topan con la difícil tarea de realizar un diseño
que se adapte a los diferentes tipos de pantallas, la inexperiencia los
obliga a buscar información en el internet, y pocas veces estos datos pasa
por un filtro de calidad, por ello se ven en la necesidad de frecuentar uno
o varios sitios web para resolver el problema, lo cual provoca pérdida de
tiempo, mal funcionamiento del sitio web hasta perder al cliente.
Es por eso, que se necesita tener como recurso una guía informativa
impresa que permita a los estudiantes estimular nuevos intereses y
destrezas que den soluciones a los problemas relacionados al tema de
investigación.
4
1.4.
Causas y consecuencias del problema
CUADRO 1
CAUSAS Y CONSECUENCIAS
CAUSAS
CONSECUENCIAS
Escaso conocimiento de las nuevas
Complicaciones al crear entornos
tendencias en diseño móvil
para distintos dispositivos
Poco interés de algunos estudiantes por
Dificultad con las nuevas tendencias
los nuevos avances en el diseño web
relacionada con el diseño web
Desconocimiento del
No saber cómo actuar en situaciones
diseño web adaptativo
relacionadas con el diseño web adaptativo
Ningún dominio de herramientas
No culminar los proyectos, con los
para el diseño web
resultados esperados
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
1.5.
Delimitación del problema
Campo: Educativo-Tercer Nivel
Área: Diseño Gráfico
Aspecto: Técnico, Diseño web
Tema: El diseño web adaptativo como componente fundamental para la
elaboración de páginas web.
1.6.
Formulación del problema
¿Es el diseño web adaptativo un componente fundamental en la
elaboración de una página web para los estudiantes de quinto semestre
5
de la carrera de Diseño Gráfico de la Facultad de Comunicación Social de
la Universidad de Guayaquil?
1.7.
Evaluación del problema
Delimitado: Este estudio tiene como población objetivo a los estudiantes
del quinto semestre de la Carrera de Diseño Gráfico cuyos resultados
aparecerán en el 2016 y la muestra obtenida corresponderá en el
transcurso del año 2015, estos resultados serán utilizados para demostrar
la falta de una herramienta impresa, que otorgue a los estudiantes nuevas
capacidades.
Claro: La investigación reconoce los nuevos retos que enfrentan los
estudiantes en el transcurso de su formación académica los cuales se ven
afectados por una sociedad que exige en los profesionales el dominio de
ciertos conocimientos web, lo que resulta un gran desafío para los
estudiantes de la carrera de diseño gráfico.
Contextual: Es preciso resaltar el desarrollo de esta investigación la cual
está bajo el contexto de un alto mercado consumidor, debido al actual
incremento de dispositivos móviles, esto ha provocado el crecimiento de
relaciones mercantiles y el aumento de la demanda en servicios
profesionales, en torno al diseño web.
Evidente: La educación es un derecho para todos los seres humanos, de
modo que el conocimiento para los estudiantes de diseño gráfico es
fundamental para aumentar el nivel de competitividad al momento de
exponer sus habilidades, más evidente con la falta de un material que
aporte al conocimiento, manejo y dominio de las nuevas preferencias en
base al diseño de páginas web.
6
Relevante: Es notable el extenso mercado que existe en el campo web,
esto aumenta la necesidad de profesionales que estén acorde a las
nuevas actualizaciones de la tecnologías web y requerimientos del
mercado laboral, por lo que se debe afinar los conocimientos en el área
de diseño web, con el fin de cumplir sus objetivos propuestos.
Original: Se plantea un nuevo perfil profesional en el diseñador gráfico, y
así logar la inclusión socio-profesional de los estudiantes de la Carrera de
Diseño Gráfico, la cual se orienta en función de su alineación académica.
1.8.
Variables de la investigación
Variable Dependiente: Sitios web con diseños adaptativos.
Variable Independiente: La difusión y conocimiento de nuevos entornos
web.
1.9.
Objetivos de la investigación
Objetivo General:
Orientar a los estudiantes de quinto semestre de la Carrera de Diseño
Gráfico en el conocimiento básico y aplicación de técnicas de diseño web
adaptativo, como componente fundamental para la elaboración de
páginas web.
Objetivos Específicos:
•
Determinar
la
importancia
del
diseño
web
adaptativo,
como
componente fundamental para la elaboración de páginas web.
7
•
Categorizar y analizar la información necesaria para la elaboración de
la guía informativa impresa con técnicas y pautas de diseño web
adaptativo.
•
Diseñar y socializar el contenido de la guía informativa impresa con
técnicas y pautas de diseño web adaptativo, a los estudiantes de
quinto semestre de la Carrera de Diseño Gráfico para su estudio.
1.10. Hipótesis
Con la implementación de una guía informativa impresa con técnicas y
pautas de diseño web adaptativo, el estudiante de quinto semestre de la
Carrera de Diseño Gráfico de la Facultad de Comunicación Social de la
Universidad de Guayaquil, podrá elaborar sitios web que se adapten al
entorno de navegación del usuario.
1.11. Interrogantes de la investigación
¿Cómo afecta a los estudiantes en el entorno laboral el desconocimiento
del diseño web adaptativo?
¿Es necesario concienciar a los estudiantes sobre la importancia de
aprender nuevas tecnologías web?
¿Una herramienta con técnicas y pautas web permitirá al estudiante
aumentar su nivel de conocimiento sobre el diseño web adaptativo?
¿Cómo ayudaría el diseño web adaptativo en la vida profesional del
estudiante de la Carrera de Diseño Gráfico?
8
1.12. Justificación de la investigación
Los estudiantes deben estar capacitados para resolver algunas
situaciones relacionada con el diseño web. Por lo cual, esta investigación
tiene como propósito aportar una herramienta que facilite conocimientos
fundamentales para el desarrollo de páginas web, y así cubrir las
necesidades antes dichas, con el propósito de aumentar su nivel de
competitividad.
En el caso de esta investigación se halla justificación en el
cumplimiento de uno de los principales objetivos de la educación, como
es, el formar a profesionales independientes capaces de razonar y
resolver problemas que se dan en su entorno.
En estos momentos de cambios se busca preparar a los estudiantes
para el futuro inmediato el cual presenta grandes avances en las
tecnologías web y por lo consiguiente en el diseño web. Por tal motivo, la
importancia de este tema, se presenta con la elaboración de una guía
informativa impresa sobre el diseño web adaptativo, con el cual se
pretende disminuir el grado de desconocimiento que existe en los
estudiantes de quinto semestre.
Además, la guía informativa impresa no solo beneficiaría a los
estudiantes de quinto semestre de la Carrera de Diseño Gráfico, sino a la
población estudiantil que gira a entorno al diseño web, la cual busca
respaldarse en esta investigación con el propósito de orientarse e
informarse sobre el diseño web adaptativo.
9
CAPÍTULO II
MARCO TEÓRICO
2.1.
Antecedentes del estudio
Examinando las fuentes de información de la Universidad de
Guayaquil no se encontraron trabajos similares con el tema a tratar en
esta investigación cuyo título es: El diseño web adaptativo como
componente fundamental para la elaboración de páginas web. Aun así
dentro de la Universidad de Alcalá se encontró un estudio similar, pero
con un enfoque diferente bajo el titulo “Responsive Web Design:
Interfaces Web Adaptable al dispositivo empleando HTML5 y CSS3”
elaborado por: Adrián Alonso Vega en el año 2013.
2.2.
Fundamentación teórica
Antecedentes históricos
El diseño web ha evolucionado debido a los nuevos avances
tecnológicos, de las cuales se generaron cuatro generaciones que
muestran las mejoras en el diseño web.
La primera generación se remonta desde el año 1993 con la llegada
del
navegador
Mosaic
desarrollado
por
la
National
Center
for
Supercomputing (en español Centro Nacional de Supercomputación), la
información que se mostraba en estas páginas web era limitada y su
estructura era lineal. La particularidad de esta generación era la velocidad
de transferencia de datos, la cual limitaba el peso de las páginas
dificultando la comunicación visual.
10
Con el paso del tiempo las exigencias comunicativas aumentaron y
con ellas la estructura de las páginas web. Es por ello, que en 1994 se
creó el consorcio W3C con el objetivo de establecer normas y pautas para
el desarrollo web.
La segunda generación surgió con la tendencia del uso de iconos,
fondos, botones, banners y ciertas propiedades del código html en
especial las tablas al introducir la etiqueta <table>. Con la llegada de
estos componentes, muchos diseños no favorecían la accesibilidad y
estabilidad de las páginas web. Pero aun así, algunos diseñadores
innovaban sus páginas web usando correctamente el código html,
comenzando a maquetar y jerarquizar los contenidos de la misma forma
que en una revista, dándole mayor estética a las páginas web.
Por otro lado, la resolución de los monitores era una de las
complicaciones que se le presentaba al diseñador, ya que necesitaba
saber cómo trabajar las imágenes para una optima comunicación hacia el
usuario.
Otro problema que se dio, fue con la llegada del navegador Internet
Explorer, lanzado por Microsoft en agosto de 1995, aparecieron
dificultades en base a los diferentes estándares de adaptación que tenia
este navegador con Netscape Navigator, uno de los más utilizados en
esta generación.
La tercera generación, sigue limitando el diseño web con las
restricciones en el lenguaje para los distintos navegadores, es decir no se
veía igual una página web en Netscape Navigator que en Internet
Explorer, gracias a la competencia que existía entre Microsoft y Netscape
surgieron grandes avances en la tecnología web, y así las páginas web
11
pasaron hacer más dinámicas con el objetivo de promover o vender
servicios, productos, información y noticias.
Todos estos cambios ocasionaron en el usuario un criterio superior en
base a su experiencia de navegación, dando a relucir las páginas de mala
calidad, tanto por la información de poca utilidad e interactividad. Con este
problema los diseñadores y desarrolladores entraron en el mundo de la
interactividad, revolucionando el concepto del diseño web, cuyo objetivo
era generar una estructura intuitiva para mejorar la navegabilidad del
usuario al momento de buscar la información, logrando un diseño
agradable y llamar su atención en los contenidos más importantes.
Muchas de las páginas web adoptaron una mejor estructura; con la
inclusión de la etiqueta <div>, se reemplazo el método limitado del uso de
las tablas, también se añadieron nuevos elementos, como es el uso de
clips flash y css.
La cuarta generación integra completamente en el diseño web los
elementos multimedia tales como sonidos, videos, animación. Con la
creación de nuevas plataformas (PC, Mac, etc.) se tuvo que normalizar la
comunicación entre ellas. Es así que se fueron optimizando las páginas
web, de tal manera que se ajustó la comunicación entre las diferentes
plataformas y se fueron creando nuevas versiones de los navegadores.
También se difundieron nuevos lenguajes de programación (PHP, JAVA,
MYSQL, etc.) permitiendo enlazar las páginas a una base de datos.
Por último, hoy en día el diseño web está dirigido a una necesidad
adaptada a todo tipo de usuario, en la actualidad hay grandes cantidades
de dispositivos móviles, cuya resolución es distinta a las plataformas
tradicionales. Es por ello que se crearon técnicas de diseño y desarrollo
web que permitan la adaptación de páginas web a los distintos dispositivo.
12
Diseño web adaptativo
El término de diseño web adaptativo también conocido por las siglas
RWD (Responsive Web Design, en inglés) fue creado en el año 2010 por
Ethan Marcotte diseñador y desarrollador web, partiendo del “Mobile Web
Best Practices” (en español, mejores prácticas web móvil) expuesta por la
W3C en el 2008 bajo el concepto One Web, el cual hace referencia a
construir una web para todos, donde nos posibilite interactuar desde
cualquier dispositivo.
Con la llegada de nuevos dispositivos y plataformas informáticas
móviles nos encontramos con navegadores, resoluciones y formas de
interactuar diferentes. El diseño web adaptativo busca realizar un diseño
flexible que pueda adaptarse a todo tipo de dispositivo, sin afectar la
estabilidad de la página web y sea agradable para el usuario.
Según Ethan Marcotte “Las grillas fluídas, las imágenes flexibles y
las media queries son los tres ingredientes técnicos para un diseño
web responsivo, pero también se requiere de una forma diferente de
pensar” (A List Apart, 2010)
Tal como lo indica Ethan Marcotte sin estos tres componentes
técnicos, una página web no puede tener una estructura flexible, la cual
permita adaptar el sitio web a los diferentes dispositivos.
Importancia del diseño web adaptativo
Gracias a las mejoras que se han venido dando en las tecnologías web
aumentó el número de usuarios que utilizan el internet mediante
dispositivos móviles en el mundo. Por otra parte, Adrián Alonso Vega en
su investigación aporta con la siguiente cita: “El término Responsive
13
Web Design no depende únicamente de un código como tal, es
también usabilidad, conlleva diseñar una experiencia para el usuario
donde el contenido es lo más importante” (Adrián Alonso Vega, 2013)
También es necesario conocer el nuevo algoritmo que Google puso a
funcionar desde el 21de Abril de 2015, el cual busca dar al usuario una
mejor experiencia con los resultados de su búsqueda, favoreciendo a todo
sitio web que implemente un diseño web adaptativo.
W3C (World Wide Web Consortium)
El W3C cuyas siglas son por Consorcio de la World Wide Web (red
informática mundial), tiene como objetivo desarrollar normas que permitan
la comunicación y compatibilidad adecuada entre los distintos elementos
web. Desde el 1996 ha tenido como resultado 110 tecnologías, entre ellas
están el HTML y CSS.
HTML (HyperText Markup Language)
El HTML (HyperText Markup Language, en español lenguaje de
marcas de hipertexto), se ha convertido en la herramienta más popular
para los diseñadores y desarrolladores web, especialmente por ser la
estructura principal del contenido de un documento web, la cual está
conformado por etiquetas.
Las etiquetas sirven para interpretar el contenido que se encuentran
dentro de ellas, las cuales están encapsuladas entre los símbolos <>,
toda etiqueta tiene un inicio y un cierre el cual esta antepuesto por /.
A continuación se muestra una estructura jerárquica básica HTML:
14
<html>
<body>
<p>Contenido a presentar</p>
</body>
</html>
En la actualidad el lenguaje HTML ha llegado hasta la versión 5.0
conocido comúnmente como HTML5, esta versión trae nuevos elementos
y una estructura semántica estandarizada.
CSS (Cascading Style Sheets)
El CSS (Cascading Style Sheets, en español hojas de estilo en
cascada), este componente describe la apariencia en pantalla a través de
un dispositivo de lectura, otorgando al diseñador o desarrollador web el
control del formato y estilo del documento. Es decir el CSS especifica la
forma en la se visualiza el contenido que se encuentra en el archivo
HTML.
Las hojas de estilos están conformadas por reglas que definen la
presentación del documento, y están compuestas por dos partes: el
selector y la declaración, por consiguiente toda declaración cuenta con
una propiedad y un valor asignado Ejemplo:
h1 {color: red;}
h1 es el selector
{color: red;} es la declaración
Hoy en día con las nuevas especificaciones de CSS se ha llegado a
elaborar efectos gráficos útiles para la realización de páginas dinámicas,
llegando a la versión 3.0 conocida también como CSS3.
15
2.3.
Fundamentación andragógica
La andragogía a diferencia de la pedagogía, cuenta con técnicas de
enseñanzas dirigidas a adultos, si bien es cierto el hombre puede llevar
un proceso educativo durante toda su vida, pero la mayor capacidad de
aprendizaje esta en los primeros años. Sin embargo la andragogía cuenta
con ciertos aspectos similares a la pedagogía. Por otra parte el adulto
está en la necesidad de acoger determinados temas para aplicarlos en su
entorno laboral aumentando su nivel de competitividad,
basada en la
capacidad del sujeto.
La Lic. Carmen Baquerizo Matute define La Educación Básica de
Adultos de la siguiente manera:
“Un conjunto de acciones dirigidas a lograr que el adulto
llegue a una interpretación consciente y positiva de sí
mismo
y
de
la
necesidad
que
tiene
de
renovar
continuamente sus conocimientos y perfeccionar sus
actitudes, como medio para desempeñar con éxito, los
roles que le corresponda en el ambiente socio-económico,
cultural e histórico al cual pertenece y para aportar
elementos
que
conduzcan
al
mejoramiento
de
ese
ambiente” (Aplicación de lectura crítica…,, 2013)
De tal forma como lo describe la Lic. Carmen Baquerizo Matute que
gracias a los últimos avances tecnológicos, la sociedad recibe un
compromiso que los incita a desempeñar funciones modernas, que
contribuyan al desarrollo de la humanidad. Por lo tanto, se debe
proporcionar recursos personales adecuados, con el fin de facilitar el
desarrollo personal dentro de su entorno laboral y mejoramiento de la
sociedad.
16
2.4.
Fundamentación tecnológica
Con el incremento de nuevas plataformas y evidente evolución de las
tecnologías web, el concepto del diseño web adaptativo a obtenido gran
importancia en el desarrollo de páginas web y competencia entre
navegadores. En el siguiente gráfico se presenta el incremento del uso de
navegadores web más empleados por parte del usuario.
GRÁFICO 2
FRECUENCIA CON QUE SE UTILIZA LOS DIVERSOS
NAVEGADORES WEB
Estadísticas globales del uso de navegadores web en
el mundo de mayo 2011 a mayo 2015
Fuente:
W3Counter
Elaboración:
Benavides Salazar Carlos Leonardo
Actualmente, se cuenta con CSS3 y HTML5, archivos fundamentales
para el diseño web adaptativo, los cuales son utilizados para crear una
estructura adaptable y mejorar el rendimiento de las páginas web.
17
2.5.
Fundamentación legal
Esta investigación se respalda en los siguientes artículos expuestos en
la Constitución de la República del Ecuador, Plan Nacional para el Buen
Vivir y la Ley de Comunicación, resguardando el hecho de realizar un
medio de comunicación impreso que logre el desarrollo pleno del
individuo en base al tema a investigar.
Constitución de la República del Ecuador
Derechos del buen vivir
Comunicación e información
Art. 16.- Todas las personas, en forma individual o colectiva, tienen
derecho a:
1. Una
comunicación
libre,
intercultural,
incluyente,
diversa
y
participativa, en todos los ámbitos de la interacción social, por
cualquier medio y forma, en su propia lengua y con sus propios
símbolos.
2. El acceso universal a las tecnologías de información y comunicación.
3. La creación de medios de comunicación social, y al acceso en
igualdad de condiciones al uso de las frecuencias del espectro
radioeléctrico para la gestión de estaciones de radio y televisión
públicas, privadas y comunitarias, y a bandas libres para la explotación
de redes inalámbricas.
4. El acceso y uso de todas las formas de comunicación visual, auditiva,
sensorial y a otras que permitan la inclusión de personas con
discapacidad.
18
5. Integrar los espacios de participación previstos en la Constitución en el
campo de la comunicación.
Art. 18.- Todas las personas, en forma individual o colectiva, tienen
derecho a:
1. Buscar, recibir, intercambiar, producir y difundir información
veraz, verificada, oportuna, contextualizada, plural, sin censura
previa acerca de los hechos, acontecimientos y procesos de
interés general, y con responsabilidad ulterior.
2. Acceder libremente a la información generada en entidades
públicas, o en las privadas que manejen fondos del Estado o
realicen funciones públicas. No existirá reserva de información
excepto en los casos expresamente establecidos en la ley. En
caso de violación a los derechos humanos, ninguna entidad
pública negará la información.
Constitución de la República del Ecuador
Derechos del buen vivir
Cultura y ciencia
Art. 25.-Las personas tienen derecho a gozar de los beneficios y
aplicaciones del progreso científico y de los saberes ancestrales.
Derechos del buen vivir
Educación
Art.26.- La educación es un derecho de las personas a lo largo de su vida
y un deber ineludible e inexcusable del Estado. Constituye un área
19
prioritaria de la política pública y de la inversión estatal, garantía de la
igualdad e inclusión social y condición indispensable para el buen vivir.
Las personas, las familias y la sociedad tienen el derecho y la
responsabilidad de participar en el proceso educativo.
Art.27.- La educación se centrará en el ser humano y garantizará su
desarrollo holístico, en el marco del respeto a los derechos humanos, al
medio ambiente sustentable y a la democracia; será participativa,
obligatoria, intercultural, democrática, incluyente y diversa, de calidad y
calidez; impulsará la equidad de género, la justicia, la solidaridad y la paz;
estimulará el sentido crítico, el arte y la cultura física, la iniciativa individual
y comunitaria, y el desarrollo de competencias y capacidades para crear y
trabajar.
La educación es indispensable para el conocimiento, el ejercicio de los
derechos y la construcción de un país soberano, y constituye un eje
estratégico para el desarrollo nacional.
Art.28.- La educación responderá al interés público y no estará al servicio
de intereses individuales y corporativos. Se garantizará el acceso
universal, permanencia, movilidad y egreso sin discriminación alguna y la
obligatoriedad en el nivel inicial, básico y bachillerato o su equivalente.
Es derecho de toda persona y comunidad interactuar entre culturas y
participar en una sociedad que aprende. El Estado promoverá el diálogo
intercultural en sus múltiples dimensiones.
El aprendizaje se desarrollará de forma escolarizada y no escolarizada.
La educación pública será universal y laica en todos sus niveles, y gratuita
hasta el tercer nivel de educación superior inclusive.
20
Art.29.- EI Estado garantizará la libertad de enseñanza, la libertad de
cátedra en la educación superior, y el derecho de las personas de
aprender en su propia lengua y ámbito cultural.
Las madres y padres o sus representantes tendrán la libertad de escoger
para sus hijas e hijos una educación acorde con sus principios, creencias
y opciones pedagógicas.
Análisis de la Constitución de la República del Ecuador
Los artículos antes expuestos sostienen la importancia de crear y
difundir información relacionada con los avances tecnológicos (diseño
web adaptativo), estimulando al desarrollo competitivo en base al perfil
profesional al cual está dirigido esta investigación, sin discriminación
alguna.
En total acuerdo con este planteamiento, expuesto en el Plan Nacional
para el Buen Vivir:
“El conocimiento se fortalece a lo largo de la vida, desde el
nacimiento, con la cotidianidad y con la educación formal y
no formal. El talento humano también se nutre de los
saberes existentes, del vivir diario, de la indagación y de la
retroalimentación constante de conocimientos. Educar en
este modelo se convierte en un diálogo constante, en el
cual aprender y enseñar son prácticas continuas para los
actores sociales. Hay que tomar en cuenta no solo la
calidad del profesor y del estudiante, sino también la
calidad de la sociedad.” (Objetivo 4 - Fortalecer las
capacidades y potencialidades desde la ciudadanía)
21
Análisis del Plan Nacional para el Buen Vivir
Considerando la anterior cita, se sostiene que el talento de las
personas es acrecentado con los conocimientos diarios e indagados, en el
caso de esta investigación busca fortalecer ese talento en base a los
nuevos avances web (diseño web adaptativo).
Ley orgánica de comunicación
Disposiciones preliminares y definiciones
Art.8.- Los medios de comunicación, en forma general, difundirán
contenidos de carácter informativo, educativo y cultural, en forma
prevalente. Estos contenidos deberán propender a la calidad y ser
difusores de los valores y los derechos fundamentales consignados en la
Constitución y en los instrumentos internacionales de derechos humanos.
Derechos a la comunicación
Derechos de libertad
Art.29.- Todas las personas tienen derecho a recibir, buscar, producir y
difundir información por cualquier medio o canal y a seleccionar
libremente los medios o canales por los que acceden a información y
contenidos de cualquier tipo.
Esta
libertad
solo
puede
limitarse
fundadamente
mediante
el
establecimiento previo y explícito de causas contempladas en la ley, la
Constitución o un instrumento internacional de derechos humanos, y solo
en la medida que esto sea indispensable para el ejercicio de otros
derechos fundamentales o el mantenimiento del orden constituido.
22
Toda conducta que constituya una restricción ilegal a la libertad de
información, será sancionada administrativamente de la misma manera
que esta Ley lo hace en los casos de censura previa por autoridades
públicas y en los medios de comunicación, sin perjuicio de las otras
acciones legales a las que haya lugar.
Análisis de la Ley Orgánica de Comunicación
Como lo indican los artículos anteriores, no hay restricción alguna en
producir y difundir una guía impresa con información sobre el diseño web
adaptativo,
teniendo en cuenta que todas las personas están en el
derecho de acceder a cualquier tipo de medio y buscar libremente la
información necesaria por el mismo
23
CAPÍTULO III
METODOLOGÍA
En este trabajo de investigación se utilizaron las técnicas y métodos
necesarios, en base a un sistema científico y empírico, que se aplica al
fenómeno a estudiar.
3.1. Diseño de la investigación
Se tiene en consideración, en base a la hipótesis que se plantea en
esta investigación, un proceso secuencial y deductivo, el cual brinde un
análisis estadístico del fenómeno. Usando los datos recolectados y
apuntando a un enfoque mixto (combinación de enfoque cuantitativo y
cualitativo), se obtiene la factibilidad y comprensión del tema a investigar.
Los datos cuantitativos se respaldan por medio de la recolección de
información mediante las encuestas contestada por los docentes y
estudiantes de la Carrera de Diseño Gráfico de la Facultad de
Comunicación Social de la Universidad de Guayaquil, con el propósito de
analizar por medio de los docentes la importancia que tiene el diseño web
adaptativo en la formación profesional de un diseñador gráfico, así mismo
por medio de los estudiantes medir el nivel de conocimiento e interés
sobre el diseño web adaptativo.
Los datos cualitativos se miden gracias a los resultados brindados por
la entrevista realizada al Lcdo. Jaime Torres, quien actualmente se
desempeña como docente de la asignatura “Diseño Web” de la Carrera
de Diseño Gráfico, esta información sirve para sustentar y evaluar la
factibilidad e importancia del proyecto.
24
3.2.
Modalidad de la investigación
Este estudio plantea un proyecto factible, el cual se obtiene mediante
una investigación de campo y búsquedas bibliográficas.
Investigación de campo: Tiene como objetivo resolver un problema
determinado, mediante la información extraída directamente de la
realidad, en base a la relación que existe entre las variables a tratar en la
investigación.
Como lo expone el Ab. Oswaldo Pacheco Gil Msc. la
investigación de campo “Es el estudio sistemático de
problemas
en
el
lugar
en
que
se
producen
los
acontecimientos, con el propósito de descubrir, explicar
sus
causas
y
efectos,
entender
su
naturaleza
e
implicaciones, establecer los factores que lo motivan y
permiten
predecir
su
ocurrencia.”
(Proyecto
de
Investigación, 2013)
Al tener en cuenta la cita del Ab. Oswaldo Pacheco referente a la
investigación de campo, se observa el comportamiento de los estudiantes
de quinto semestre de la Carrera de Diseño Gráfico, con la intención de
conocer y explicar su aptitud frente a las nuevas tecnologías web (diseño
web adaptativo).
Investigación
bibliográfica-documental:
Es
la
compilación
de
información bibliográfica la cual es analizada mediante un enfoque crítico
y empírico por medio de la lectura. “La elaboración del marco teórico a
partir de la revisión documental resulta imprescindible, ya que,
fundamentalmente, nos permite delimitar con mayor precisión
25
nuestro objeto de estudio y constatar el estado de la cuestión.”
(David Rodríguez Gómez y Jordi Valldeoriola Roquet, 2012)
Se creó el marco teórico en base a la revisión bibliográfica y
documental tal como lo indican David Rodríguez Gómez y Jordi
Valldeoriola Roquet en su cita, estableciendo la importancia que tiene
este estudio y delimitando con claridad la población objetivo.
Proyecto factible o de intervención: Se refiere a la creación de una
posible propuesta, creativa y definida la cual tiene como objetivo resolver
un problema de cualquier naturaleza.
Como lo expone el Ab. Oswaldo Pacheco Gil Msc. el proyecto
factible o de intervención “Comprende la elaboración y
desarrollo de una propuesta de un modelo operativo viable
para solucionar problemas, requerimientos o necesidades
de organizaciones o grupos sociales; puede referirse a la
formulación de políticas, programas, tecnologías, métodos
o procesos. Para su formulación y ejecución debe
apoyarse en investigaciones de tipo documental, de campo
o un diseño que incluya ambas modalidades.” (Proyecto de
Investigación, 2013)
Tal como lo indica el Ab. Oswaldo Pacheco Gil Msc. en su cita, la
implementación y ejecución de la propuesta se llevo a cabo mediante un
análisis de los resultados obtenidos en este estudio, el cual prueba la
viabilidad del proyecto.
3.3.
Tipo de investigación
Para obtener los resultados necesarios en esta investigación se
utilizaron los siguientes factores: exploratorios, descriptivos y explicativos
26
en base a las definiciones planteadas por los diferentes autores Roberto
Hernández Sampieri, Carlos Fernández, Pilar Baptista Lucio.
Investigación Exploratoria: Nos proporciona información valiosa, la cual
ayuda a adaptarnos al fenómeno a estudiar o incrementar nuestro
conocimiento sobre ella, con el objetivo de obtener una visión general de
la realidad determinada, en base a un problema poco o nada estudiado.
“Los estudios exploratorios sirven para familiarizarnos con
fenómenos
relativamente
desconocidos,
obtener
información sobre la posibilidad de llevar a cabo una
investigación más completa respecto de un contexto
particular,
investigar
nuevos
problemas,
identificar
conceptos o variables promisorias, establecer prioridades
para investigaciones futuras, o sugerir afirmaciones y
postulados.” (Metodología de la investigación, 1998)
Se fortaleció la información recopilada sobre el diseño web adaptativo,
con el propósito de difundir datos efectivos y aclarar ciertas dudas que se
presentan dentro del proceso del estudio.
Investigación Descriptiva: Se muestran los detalles determinados del
fenómeno a estudiar en base a su situación, con el propósito de describir
las características de la población involucrada con el problema de
investigación.
“Con frecuencia, la meta del investigador consiste en
describir fenómenos, situaciones, contextos y eventos;
esto es, detallar cómo son y se manifiestan. Los estudios
descriptivos buscan especificar las propiedades, las
características
y
los
perfiles
de
personas,
grupos,
27
comunidades,
procesos,
objetos
o
cualquier
otro
fenómeno que se someta a un análisis. Es decir,
únicamente pretenden medir o recoger información de
manera independiente o conjunta sobre los conceptos o
las variables a las que se refieren, esto es, su objetivo no
es indicar cómo se relacionan éstas.”(Metodología de la
investigación, 1998)
Esta investigación se fundamenta en la recopilación de resultados que
describe la situación actual del problema, siendo esta la manera más
viable de estar al tanto el perfil de los individuos que conforman la
población objetivo.
Investigación Explicativa: Sirve para identificar las causas del problema
a estudiar y tiene como objetivo explicar lo que ocurre con este fenómeno.
“Los estudios explicativos van más allá de la descripción
de conceptos o fenómenos o del establecimiento de
relaciones entre conceptos; es decir, están dirigidos a
responder por las causas de los eventos y fenómenos
físicos o sociales. Como su nombre lo indica, su interés se
centra en explicar por qué ocurre un fenómeno y en qué
condiciones se manifiesta, o por qué se relacionan dos o
más variables.” (Metodología de la investigación, 1998)
Existen diferentes definiciones sobre el diseño web adaptativo que
sirven para entender su utilización, sin embargo algunos estudiantes de la
Carrera de Diseño Gráfico desconocen sobre este tema, por lo tanto la
investigación explicativa busca las causas de este problema, con el
propósito de responder a toda las interrogantes.
28
3.4.
Población y muestra
Población:
La población objetivo para esta investigación se estratificó en:
Especialista (docente de la asignatura “Diseño Web” ), docentes que
imparten asignatura relacionada con las nuevas tecnologías web, y
estudiantes del periodo lectivo 2015-2016 que se encuentran cursando el
quinto semestre en la Carrera de Diseño Gráfico de la Facultad de
Comunicación Social de la Universidad de Guayaquil. Los individuos
escogidos en este proyecto, tienen las características requeridas para
este estudio.
CUADRO 2
POBLACIÓN OBJETIVO
ÍTEM
INFORMANTES
POBLACIÓN
1
Especialista
1
2
Docentes
11
3
Estudiantes
232
TOTAL:
Fuente:
Carrera de Diseño Gráfico
Elaboración:
Benavides Salazar Carlos Leonardo
244
Muestra:
Para extraer el subconjunto de la población objetivo se implemento el
muestreo probabilístico. Francisco Parra Rodríguez se refiere al muestreo
probabilístico de la siguiente manera “Este muestreo es científico y
permite acotar los errores cometidos, obtener estimadores de los
29
parámetros poblacionales y calcular intervalos de confianza.”
(Manual para la elaboración de encuestas: Diseño, ejecución y
tratamiento de datos, 2010)
De todos los tipos de muestreo probabilísticos, se escogió el aleatorio
simple sin reposición, por lo cual se empieza por establecer la población
origen, en el caso de esta investigación se escoge a los estudiantes del
periodo lectivo 2015-2016 que se encuentran cursando el quinto semestre
en la Carrera de Diseño Gráfico de la Facultad de Comunicación Social de
la Universidad de Guayaquil, siendo ellos los indicados para implementar
el proyecto de investigación, ya que según la malla curricular a partir de
este semestre se familiarizan con el diseño web.
Para poder obtener la muestra se utilizo la siguiente formula, del cual
se establece un 5% de error tolerable.
n= Tamaño de la muestra.
e= Error tolerable.
N= Universo de población.
n=
N
𝑒𝑒 2 (𝑁𝑁 − 1) + 1
Teniendo como resultado lo siguiente:
n= ¿?
e= 5%
N= 244
30
n=
244
(5%)2 (244 − 1) + 1
n=
n=
244
(0,05)2 (243) + 1
244
(0,0025)(243) + 1
n=
244
0,6075 + 1
n=
244
1,6075
n = 152
Una vez utilizada la formula se obtiene las siguientes cifras que
corresponde a la muestra obtenida de la población objetivo.
CUADRO 3
MUESTRA OBTENIDA DE LA POBLACIÓN OBJETIVO
ÍTEM
ESTRATO
POBLACIÓN
1
Especialista
1
2
Docentes
11
3
Estudiantes
140
TOTAL:
Fuente:
Carrera de Diseño Gráfico
Elaboración:
Benavides Salazar Carlos Leonardo
152
31
3.5.
Técnicas de investigación
Para obtener los resultados e información necesaria se utilizaron las
técnicas primarias y secundarias para el análisis del actual estudio en las
cuales
intervienen
la:
observación,
entrevista,
encuesta
y
la
documentación bibliográfica.
Observación: Se adquiere la información mediante observaciones del
fenómeno a tratar, teniendo como instrumento principal los cinco sentidos
humanos. Concordando con la Lic. Carmen Baquerizo Matute en la
siguiente cita: “La observación es un elemento fundamental de todo
proceso investigativo; en ella se apoya el investigador para obtener
el mayor número de datos.” (Aplicación de lectura crítica…, 2013)
Entrevista: Son preguntas dirigidas al individuo de interés con el objetivo
de obtener información referente al problema a investigar. Teniendo en
cuenta la definición del ab. Oswaldo Pacheco “Es una conversación
seria que tiene como propósito extraer información sobre un tema
determinado.” (Proyecto de Investigación, 2013)
Encuesta: Esta técnica nos permite recolectar datos de un parte de
nuestra población objetivo a través de un adecuado interrogatorio más
conocido como cuestionario.
Carmen Baquerizo Matute define la encuesta como:
“La encuesta es una técnica destinada a obtener datos de
varias personas cuyas opiniones impersonales interesan al
investigador. Para ello, a diferencia de la entrevista, se
utiliza un listado de preguntas escritas que se entregan a
32
los sujetos, a fin de que las contesten igualmente por
escrito.” (Aplicación de lectura crítica.., 2013)
Documentación
bibliográfica:
Es la recolección de información
mediante material o fuentes bibliográficas que estén relacionada con el
tema a investigar, con el fin de garantizar los fundamentos del contenido
de la investigación.
3.6.
Procedimiento de la investigación
Para el desarrollo de esta investigación se procedió con las siguientes
fases:
•
Fase I. Limitación y planteamiento del problema a resolver.
•
Fase II. Selección del tema a investigar, con el propósito de dar
orientación al estudio.
•
Fase III. Recopilación bibliográfica para la elaboración del marco
teórico y fundamentación del proyecto.
•
Fase IV. Elaboración y ejecución de técnicas e instrumentos de
investigación para la recolección de datos.
•
Fase V. Interpretación y análisis de los resultados, obtenido de la
población objetivo e individuos de interés para la investigación.
•
Fase VI. Diseño e implementación de la propuesta.
•
Fase VII. Conclusiones y recomendaciones.
3.7.
Recolección de la información
Los estudiantes de quinto semestre de la Carrera de Diseño Gráfico de
la Facultad de Comunicación Social de la Universidad de Guayaquil, son
el objeto principal de este estudio. Tomando en cuenta la malla curricular
y syllabus del periodo 2015-2016, se pudo verificar que actualmente no
33
cuentan con un estudio sobre el diseño web adaptativo; motivo por el cual
surge la necesidad de crear una guía informativa impresa relacionada al
diseño web adaptativo.
Mediante la técnica de observación y documentación bibliográfica se
determinaron las causas y consecuencias del problema a resolver en esta
investigación, con el propósito de fortalecer este estudio se realizo un
seguimiento de conducta y comportamiento de los estudiantes de la
Carrera de Diseño Gráfico y su interés hacia las nuevas tendencias web.
Para detectar la necesidad que existe en la Carrera de Diseño Gráfico
sobre el diseño web adaptativo, se implementaron preguntas y
cuestionarios en base a las técnicas de encuesta a los estudiantes y
docentes como sujetos de estudios, logrando obtener gran magnitud de
conocimientos y opiniones sobre el estudio a tratar, así mismo por medio
de la entrevista realizada al
Lcdo. Jaime Torres que actualmente es
docente de la materia Diseño Web se pudo determinar la factibilidad de
crear una guía informativa impresa sobre el diseño web adaptativo,
necesario para logar un cambio en la formación del estudiante de diseño
gráfico.
34
CAPÍTULO IV
RESULTADOS
4.1. Análisis e interpretación de los resultados
En este capítulo se analizaran los resultados obtenidos mediante las
técnicas planteada en la metodología, en este proceso se obtendrán los
respectivos datos estadísticos en base a un cuestionario estructurado,
sobre el tema a tratar en esta investigación, así mismo la factibilidad de
crear una guía informativa sobre el diseño web adaptativo.
El Lcdo. Jaime Torres quien en la actualidad es docente de la
materia “Diseño Web”, proporcionó su punto de vista a las
siguientes preguntas relacionada al diseño web adaptativo.
1.- ¿Cuál es su criterio profesional sobre el diseño web adaptativo?
Hoy en día el internet no se maneja tan solo en una computadora de
escritorio, también se encuentra en varios dispositivos móviles (tablet,
celulares); esto obliga al diseñador gráfico a trabajar en distintas
resoluciones. El diseño web adaptativo es una respuesta a esta
necesidad ya que se enfoca a los diferentes tipos de usuarios.
2.- ¿Cree usted que el diseño web adaptativo afecta la experiencia
del usuario?
Desde luego, si se trata de ver una página web que no tenga
Responsive Design
(Diseño Adaptativo) la tipografía, los botones van a
35
visualizarse de manera incorrecta, al espacio de navegación del usuario, y
como diseñador te afecta.
Al usar el diseño web adaptativo se puede lograr que el usuario
mantenga la misma experiencia en diferentes dispositivos.
3.- ¿Ve usted el diseño web adaptativo como oportunidad de trabajo
para los estudiantes?
Por supuesto, si el diseñador gráfico se dedica al diseño web tiene que
saber elaborar una página multiplataforma, la cual se pueda ver en los
diferentes dispositivos, ya que muchos diseñadores profesionales como
yo no dominamos estas herramientas y contratamos a alguien más que la
sepa dominar.
4.- ¿Cree usted que el diseño web adaptativo es un tema de
importancia para los diseñadores gráfico?
Efectivamente, acotando a esta entrevista este año estamos
empezando incluir el diseño web adaptativo en el syllabus, ya que
actualmente no se encuentra, pero ya hay un proceso para incluir un
modulo sobre este tema dentro de la materia de diseño web.
5.- ¿En qué beneficiaría al diseñador gráfico el avance de las nuevas
tecnologías web?
Hacer que el usuario mantenga la misma interacción que se ha
diseñado para la página web, así mismo la experiencia que tiene en un
ordenado la pueda tener en los diferentes dispositivos móviles.
36
Resultados de las encuestas realizadas a profesores
1.- ¿Usted cree que el diseño web adaptativo es un componente
fundamental en el perfil de un diseñador gráfico al momento de
elaborar páginas web?
CUADRO 4
EL DISEÑO WEB ADAPTATIVO COMO
COMPONENTE FUNDAMENTAL
ÍTEM
1
2
3
4
5
VALORACIÓN
Totalmente de acuerdo
De acuerdo
Indiferente
En desacuerdo
Totalmente en desacuerdo
TOTAL:
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
f
7
3
1
0
0
11
%
64
27
9
0
0
100
GRÁFICO 3
EL DISEÑO WEB ADAPTATIVO COMO
COMPONENTE FUNDAMENTAL
Totalmente de acuerdo
100
De acuerdo
Indiferente
50
En desacuerdo
Totalmente en desacuerdo
0
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: Más del 90% de los docentes de la Carrera de Diseño Gráfico
consideran que el diseño web adaptativo es un componente substancial
para el perfil de los estudiantes de diseño gráfico, al momento de
desarrollar páginas web.
37
2.-
¿Cree
usted
que
el
estudiante
debe
familiarizarse
con
herramientas de consulta que contengan información sobre diseño
web adaptativo?
CUADRO 5
HERRAMIENTAS DE CONSULTA QUE CONTENGAN INFORMACIÓN
SOBRE DISEÑO WEB ADAPTATIVO
ÍTEM
1
2
3
4
5
VALORACIÓN
Totalmente de acuerdo
De acuerdo
Indiferente
En desacuerdo
Totalmente en desacuerdo
TOTAL:
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
f
9
2
0
0
0
11
%
82
18
0
0
0
100
GRÁFICO 4
HERRAMIENTAS DE CONSULTA QUE CONTENGAN INFORMACIÓN
SOBRE DISEÑO WEB ADAPTATIVO
Totalmente de acuerdo
100
De acuerdo
Indiferente
50
En desacuerdo
Totalmente en desacuerdo
0
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 100% de los docentes creen que los estudiantes deben
familiarizarse con herramientas de consulta que contengan información
sobre el diseño web adaptativo, tomando en cuenta la suma del 82% de
totalmente de acuerdo y un 18% de acuerdo.
38
3- ¿Considera conveniente que se introduzca en el syllabus la
revisión y consulta de una guía informativa relacionada al diseño
web adaptativo, en la carrera de Diseño Gráfico?
CUADRO 6
CONSULTA DE UNA GUÍA INFORMATIVA RELACIONADA AL DISEÑO
WEB ADAPTATIVO
ÍTEM
1
2
3
4
5
VALORACIÓN
Totalmente de acuerdo
De acuerdo
Indiferente
En desacuerdo
Totalmente en desacuerdo
TOTAL:
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
f
3
6
2
0
0
11
%
27
55
18
0
0
100
GRÁFICO 5
CONSULTA DE UNA GUÍA INFORMATIVA RELACIONADA AL DISEÑO
WEB ADAPTATIVO
60
Totalmente de acuerdo
50
De acuerdo
40
Indiferente
30
En desacuerdo
20
Totalmente en desacuerdo
10
0
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: En cuanto al cuadro N°6 se manifiesta que el 82% de los
docentes de la Carrera de Diseño Gráfico considera conveniente que la
revisión y consulta de una guía informativa relacionada al diseño web
adaptativo se introduzca dentro del syllabus de la misma carrera.
39
4- ¿Considera importante que el diseñador gráfico domine el diseño
web adaptativo?
CUADRO 7
IMPORTANCIA DEL DOMINIO DE DISEÑO WEB ADAPTATIVO EN EL
DISEÑADOR GRÁFICO
ÍTEM
1
2
3
4
5
VALORACIÓN
Totalmente de acuerdo
De acuerdo
Indiferente
En desacuerdo
Totalmente en desacuerdo
TOTAL:
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
f
5
4
2
0
0
11
%
45
37
18
0
0
100
GRÁFICO 6
IMPORTANCIA DEL DOMINIO DE DISEÑO WEB ADAPTATIVO EN EL
DISEÑADOR GRÁFICO
Totalmente de acuerdo
60
De acuerdo
40
Indiferente
20
En desacuerdo
Totalmente en desacuerdo
0
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 18% les es indiferente que el diseñador gráfico tenga como
punto importante el dominio del diseño web adaptativo, mientras el 82%
manifiesta lo contrario considera que el dominio del diseño web adaptativo
es importante para la formación de un diseñador gráfico.
40
5- ¿Considera usted que el diseño web adaptativo brinda una
oportunidad de trabajo para los diseñadores gráficos?
CUADRO 8
EL DISEÑO WEB ADAPTATIVO BRINDA UNA OPORTUNIDAD DE
TRABAJO PARA LOS DISEÑADORES GRÁFICOS
ÍTEM
1
2
3
4
5
VALORACIÓN
Totalmente de acuerdo
De acuerdo
Indiferente
En desacuerdo
Totalmente en desacuerdo
TOTAL:
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
f
7
2
2
0
0
11
%
64
18
18
0
0
100
GRÁFICO 7
EL DISEÑO WEB ADAPTATIVO BRINDA UNA OPORTUNIDAD DE
TRABAJO PARA LOS DISEÑADORES GRÁFICOS
80
Totalmente de acuerdo
60
De acuerdo
Indiferente
40
En desacuerdo
20
Totalmente en desacuerdo
0
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 82% de los docentes considera que el diseño web adaptativo
brinda una oportunidad de trabajo para los diseñadores gráficos,
obteniendo el 18% de indiferencia de parte de los docentes.
41
6- ¿Cree usted que es necesario socializar técnicas y pautas que
permitan adaptar sitios web al entorno de navegación del usuario?
CUADRO 9
SOCIALIZAR TÉCNICAS Y PAUTAS QUE PERMITAN ADAPTAR
SITIOS WEB AL ENTORNO DE NAVEGACIÓN DEL USUARIO
ÍTEM
1
2
3
4
5
VALORACIÓN
Totalmente de acuerdo
De acuerdo
Indiferente
En desacuerdo
Totalmente en desacuerdo
TOTAL:
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
f
7
4
0
0
0
11
%
64
36
0
0
0
100
GRÁFICO 8
SOCIALIZAR TÉCNICAS Y PAUTAS QUE PERMITAN ADAPTAR
SITIOS WEB AL ENTORNO DE NAVEGACIÓN DEL USUARIO
80
Totalmente de acuerdo
60
De acuerdo
Indiferente
40
En desacuerdo
20
Totalmente en desacuerdo
0
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El
100% de los docentes ven necesario difundir técnicas y
pautas que permitan adaptar sitios web al entorno de navegación del
usuario, esto nos da como resultado la importancia de publicar a los
estudiantes contenido relacionado con el diseño web adaptativo.
42
7- ¿Le gustaría difundir información relacionada al diseño web
adaptativo?
CUADRO 10
DIFUNDIR INFORMACIÓN RELACIONADA AL DISEÑO WEB
ADAPTATIVO
ÍTEM
1
2
3
4
5
VALORACIÓN
Totalmente de acuerdo
De acuerdo
Indiferente
En desacuerdo
Totalmente en desacuerdo
TOTAL:
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
f
5
6
0
0
0
11
%
45
55
0
0
0
100
GRÁFICO 9
DIFUNDIR INFORMACIÓN RELACIONADA AL DISEÑO WEB
ADAPTATIVO
60
Totalmente de acuerdo
50
De acuerdo
40
Indiferente
30
En desacuerdo
20
Totalmente en desacuerdo
10
0
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 100% de los docentes están en la predisposición de difundir
información relacionada con el diseño web adaptativo y mejorar los
conocimientos de los estudiantes en sus futuros trabajos como diseñador
gráfico.
43
8- ¿Considera usted que la creación de una guía informativa
referente a las nuevas actualizaciones web, favorecería el nivel
profesional de los estudiantes?
CUADRO 11
AUMENTO DEL NIVEL PROFESIONAL MEDIANTE LA CREACIÓN DE
UNA GUÍA INFORMATIVA
ÍTEM
1
2
3
4
5
VALORACIÓN
Totalmente de acuerdo
De acuerdo
Indiferente
En desacuerdo
Totalmente en desacuerdo
TOTAL:
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
f
9
2
0
0
0
11
%
82
18
0
0
0
100
GRÁFICO 10
AUMENTO DEL NIVEL PROFESIONAL MEDIANTE LA CREACIÓN DE
UNA GUÍA INFORMATIVA
100
Totalmente de acuerdo
80
De acuerdo
60
Indiferente
40
En desacuerdo
20
Totalmente en desacuerdo
0
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 100% de los docentes están de acuerdo con la creación de
una guía informativa referente a las nuevas actualizaciones web (diseño
web adaptativo) favoreciendo el nivel profesional de los estudiantes.
44
9- ¿Estima usted que el diseño web adaptativo mejora la experiencia
de navegabilidad del usuario?
CUADRO 12
EL DISEÑO WEB ADAPTATIVO MEJORA LA EXPERIENCIA DE
NAVEGABILIDAD DEL USUARIO
ÍTEM
1
2
3
4
5
VALORACIÓN
Totalmente de acuerdo
De acuerdo
Indiferente
En desacuerdo
Totalmente en desacuerdo
TOTAL:
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
f
10
1
0
0
0
11
%
91
9
0
0
0
100
GRÁFICO 11
EL DISEÑO WEB ADAPTATIVO MEJORA LA EXPERIENCIA DE
NAVEGABILIDAD DEL USUARIO
Totalmente de acuerdo
100
De acuerdo
Indiferente
50
En desacuerdo
Totalmente en desacuerdo
0
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 100% de los docentes cree que el diseño web adaptativo
mejora la experiencia de navegabilidad del usuarios, y tener en cuenta el
cambio que provoca en el usuario interactuar con una página web
elaborada con las técnicas relacionadas al diseño web adaptativo.
45
10- ¿Le interesaría tener como material de consulta para sus clases
una guía informativa impresa con técnicas y pautas que permitan
adaptar sitios web al entorno de navegación del usuario?
CUADRO 13
GUÍA INFORMATIVA SOBRE DISEÑO WEB ADAPTATIVO COMO
MATERIAL DE CONSULTA
ÍTEM
1
2
3
4
5
VALORACIÓN
Totalmente de acuerdo
De acuerdo
Indiferente
En desacuerdo
Totalmente en desacuerdo
TOTAL:
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
f
10
1
0
0
0
11
%
91
9
0
0
0
100
GRÁFICO 12
GUÍA INFORMATIVA SOBRE DISEÑO WEB ADAPTATIVO COMO
MATERIAL DE CONSULTA
Totalmente de acuerdo
100
De acuerdo
Indiferente
50
En desacuerdo
Totalmente en desacuerdo
0
Fuente:
Docentes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 100% de los docentes ven favorable tener una guía
informativa impresa con técnicas y pautas que permitan adaptar sitios web
al entorno de navegación del usuario, para implementarla como materia
de consulta en sus clases.
46
Resultados de las encuestas realizadas a estudiantes
1- ¿Sabe usted qué es el diseño web?
CUADRO 14
CONOCIMIENTO DEL ESTUDIANTE DE LA CARRERA DE DISEÑO
GRÁFICO EN DISEÑO WEB
ÍTEM
VALORACIÓN
f
%
1
Si
119
85
2
No
21
15
140
100
TOTAL:
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
GRÁFICO 13
CONOCIMIENTO DEL ESTUDIANTE DE LA CARRERA DE DISEÑO
GRÁFICO EN DISEÑO WEB
100
50
SI
NO
0
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 85% de los estudiantes conoce que es el diseño web,
teniendo en base los resultados expuestos en el cuadro N°14 y el syllabus
del periodo 2015-2016, es decir, el estudiante de quinto semestre de la
Carrera de Diseño Gráfico está familiarizado con el diseño web
47
2- ¿Ve usted al diseño web como una oportunidad de trabajo?
CUADRO 15
EL DISEÑO WEB COMO OPORTUNIDAD DE TRABAJO PARA LOS
ESTUDIANTES DE DISEÑO GRÁFICO
ÍTEM
VALORACIÓN
f
%
1
Si
116
83
2
No
24
17
140
100
TOTAL:
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
GRÁFICO 14
EL DISEÑO WEB COMO OPORTUNIDAD DE TRABAJO PARA LOS
ESTUDIANTES DE DISEÑO GRÁFICO
100
SI
NO
50
0
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 83% de los estudiantes ve el diseño web como una
oportunidad de trabajo, mientras el 17% por desinterés o desconocimiento
no creen tener una oportunidad de trabajo en base al diseño web.
Por lo tanto la mayoría de estudiantes tiene conocimiento de la gran
demanda que existe actualmente por el diseño web
48
3- ¿Cree tener el suficiente conocimiento en diseño web?
CUADRO 16
SUFICIENTE CONOCIMIENTO WEB DE PARTE DE LOS
ESTUDIANTES DE DISEÑO GRÁFICO
ÍTEM
VALORACIÓN
f
%
1
Si
14
10
2
No
126
90
140
100
TOTAL:
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
GRÁFICO 15
SUFICIENTE CONOCIMIENTO WEB DE PARTE DE LOS
ESTUDIANTES DE DISEÑO GRÁFICO
100
SI
80
NO
60
40
20
0
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 90% no creen tener el suficiente conocimiento en diseño web,
es decir la propuesta a plantear es factible para los estudiantes.
Se puede observar la necesidad que tienen los estudiantes por elevar
su conocimiento en base a las nuevas actualizaciones web.
49
4- ¿Le gustaría fortalecer sus conocimientos en diseño web?
CUADRO 17
FORTALECIMIENTO EN EL CONOCIMIENTO DEL DISEÑO WEB DE
PARTE DE LOS ESTUDIANTES DE DISEÑO GRÁFICO
ÍTEM
VALORACIÓN
f
%
1
Si
130
93
2
No
10
7
140
100
TOTAL:
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
GRÁFICO 16
FORTALECIMIENTO EN EL CONOCIMIENTO DEL DISEÑO WEB DE
PARTE DE LOS ESTUDIANTES DE DISEÑO GRÁFICO
100
SI
NO
50
0
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 93% de los estudiantes quiere fortalecer su conocimiento en
diseño web. El interés del estudiante es notorio, por lo cual se encuentra
necesario incrementar su conocimiento mediante técnicas y pautas de
diseño web que favorezcan sus trabajos e incrementen su nivel
profesional.
50
5- ¿Conoce usted qué es el diseño web adaptativo?
CUADRO 18
DESCONOCIMIENTO DE PARTE DE LOS ESTUDIANTES
EN EL DISEÑO WEB ADAPTATIVO
ÍTEM
VALORACIÓN
f
%
1
Si
20
14
2
No
120
86
140
100
TOTAL:
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
GRÁFICO 17
DESCONOCIMIENTO DE PARTE DE LOS ESTUDIANTES
EN EL DISEÑO WEB ADAPTATIVO
100
80
SI
60
NO
40
20
0
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 86% de los estudiantes desconoce lo que es el diseño web
adaptativo. Esto indica que los alumnos tienen poca información sobre el
tema, provocando de esta manera la inexperiencia en la elaboración de
páginas web adaptativas.
51
6- ¿Utiliza usted algún dispositivo móvil (celulares, tablet) para
navegar por internet?
CUADRO 19
EL ESTUDIANTE UTILIZA DISPOSITIVOS MÓVILES
PARA NAVEGAR POR INTERNET
ÍTEM
VALORACIÓN
f
%
1
Si
122
87
2
No
18
13
140
100
TOTAL:
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
GRÁFICO 18
EL ESTUDIANTE UTILIZA DISPOSITIVOS MÓVILES
PARA NAVEGAR POR INTERNET
100
SI
NO
50
0
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 87% de los estudiantes utilizan un dispositivo móvil para
navegar por internet, esto nos refleja el gran uso que se les da a las
distintas plataformas móviles. Sin embargo algunos lo utilizan para el
manejo de redes sociales, siendo Facebook una de las más grande del
mundo.
52
7- ¿Considera usted que la creación de una guía informativa
referente a las nuevas actualizaciones web, favorecería su formación
profesional?
CUADRO 20
FORTALECIMIENTO DEL NIVEL PROFESIONAL MEDIANTE
UNA GUÍA INFORMATIVA
ÍTEM
VALORACIÓN
f
%
1
Si
125
89
2
No
15
11
140
100
TOTAL:
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
GRÁFICO 19
FORTALECIMIENTO DEL NIVEL PROFESIONAL MEDIANTE
UNA GUÍA INFORMATIVA
100
SI
NO
50
0
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 89% de los estudiantes considera que favorecería en su
formación profesional una guía informativa referentes a las nuevas
actualizaciones web (diseño web adaptativo). Estas opiniones aseveran el
fortalecimiento del estudiante mediante una guía informativa impresa
sobre el diseño web adaptativo.
53
8- ¿Conoce alguna guía informativa con técnicas y pautas que
permitan adaptar sitios web al entorno de navegación del usuario?
CUADRO 21
CONOCIMIENTO DE GUÍA RELACIONADA
AL DISEÑO WEB ADAPTATIVO
ÍTEM
VALORACIÓN
f
%
1
Si
30
21
2
No
110
79
140
100
TOTAL:
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
GRÁFICO 20
CONOCIMIENTO DE GUÍA RELACIONADA
AL DISEÑO WEB ADAPTATIVO
80
SI
60
NO
40
20
0
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 79% de los estudiantes desconocen una guía informativa que
contengan técnicas y pautas sobre diseño web adaptativo. Por medio de
esta respuesta se puede obtener unos de los factores que ocasionan el
desconocimiento del tema.
54
9- ¿Le gustaría tener acceso a una guía informativa con técnicas y
pautas que permitan adaptar sitios web al entorno de navegación del
usuario?
CUADRO 22
ACCESO A UNA GUÍA INFORMATIVA
ÍTEM
VALORACIÓN
f
%
1
Si
125
89
2
No
15
11
140
100
TOTAL:
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
GRÁFICO 21
ACCESO A UNA GUÍA INFORMATIVA
100
SI
NO
50
0
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 89% de los estudiantes les gustaría tener una guía con
técnicas y pautas que permitan adaptar sitios web al entorno de
navegación del usuario. El estudiante siente interés por obtener una
herramienta impresa, la cual les ayude a mejorar sus trabajos
relacionados con el diseño web adaptativo.
55
10- ¿Cree usted que es importante difundir información relacionada a
las nuevas actualizaciones web, en la carrera de Diseño Gráfico de la
Universidad de Guayaquil?
CUADRO 23
IMPORTANCIA DE DIFUNDIR LA GUÍA INFORMATIVA
ÍTEM
VALORACIÓN
f
%
1
Si
133
95
2
No
7
5
140
100
TOTAL:
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
GRÁFICO 22
IMPORTANCIA DE DIFUNDIR LA GUÍA INFORMATIVA
100
SI
NO
50
0
Fuente:
Estudiantes de la Carrera
Elaboración:
Benavides Salazar Carlos Leonardo
Análisis: El 95% de los estudiantes creen que es importante difundir
información relacionada a las nuevas actualizaciones web, en la carrera
de Diseño Gráfico de la Universidad de Guayaquil. Se tiene en cuenta la
opinión antes expuesta por los estudiantes por difundir un material
impreso sobre diseño web adaptativo.
56
Después de analizar e interpretar los resultados obtenidos del público
objetivo de esta investigación, se encuentra factible la implementación de
una guía informativa impresa con técnicas y pautas de diseño que
permitan adaptar sitios web al entorno de navegación del usuario.
Respuestas a las interrogantes de la investigación
¿Cómo
afecta
a
los
estudiantes
en
el
entorno
laboral
el
desconocimiento del diseño web adaptativo?
Algunos de los estudiantes implementan el conocimiento adquirido
durante su formación académica, sin embargo las nuevas tecnologías
web, crea la necesidad de instruirse sobre el diseño web adaptativo. Este
factor ocasiona pérdidas de tiempo y falta de profesionalismo de parte del
estudiante.
¿Es necesario concienciar a los estudiantes sobre la importancia de
aprender nuevas tecnologías web?
Es importante socializar información relacionada al diseño web
adaptativo, siendo este parte de las nuevas actualizaciones web, con el
propósito de mejorar el desenvolvimiento de los estudiantes al momento
de crear páginas web.
¿Una herramienta con técnicas y pautas web permitirá al estudiante
aumentar su nivel de conocimiento sobre el diseño web adaptativo?
Las nuevas actualizaciones web tienen como objetivo llegar a todo tipo
de usuario, mediantes técnicas y pautas que permitan adaptar sitios web
al navegador de cualquier usuario, por lo tanto conocer esta información
resulta necesario para conocer el diseño web adaptativo.
57
¿Cómo ayudaría el diseño web adaptativo en la vida profesional del
estudiante de la Carrera de Diseño Gráfico?
Con el dominio del diseño web adaptativo el estudiante tiene mayor
posibilidad de obtener una oportunidad de trabajo, así mismo elevar su
nivel profesional y competitivo frente a otros estudiantes.
58
CAPÍTULO V
LA PROPUESTA
5.1.
Título de la propuesta
Diseño y elaboración de una guía informativa con técnicas y pautas de
diseño que permitan adaptar sitios web al entorno de navegación del
usuario.
5.2.
Justificación
La implementación de una guía informativa impresa sobre el diseño
web adaptativo para los estudiantes de quinto semestre de la Carrera de
Diseño Gráfico de la Facultad de Comunicación Social presenta ventajas
que permiten brindar conocimientos mediante la lectura, de una forma
fácil y cómoda.
El conocimiento y uso correcto de las tecnologías web ha ayudado al
desarrollo y avance de la sociedad. El incremento de los diferentes
dispositivos móviles, a nivel mundial generó un aumento del tráfico web
por medio de estos aparatos y gran importancia al concepto de diseño
web adaptativo al momento de desarrollar páginas web.
El diseño web adaptativo permite mejorar la experiencia del usuario,
por medio de técnicas y pautas de diseño que permiten
adaptar el
contenido de las páginas web a los diferentes entornos de navegación. Es
así que este proyecto de investigación busca contribuir con una guía
informativa impresa, que sirva como herramienta tanto para los
estudiantes del quinto semestre de la Carrera de Diseño Gráfico de la
59
Facultad de Comunicación Social de la Universidad de Guayaquil, como
para cualquier sujeto que desee incrementar sus conocimientos en diseño
web.
5.3.
Fundamentación
Esta propuesta tiene como resultado un documento impreso, el cual
asegura la veracidad de la información mediante un proceso de estudio
riguroso, el cual potencia el nivel competitivo del estudiante. A diferencia
de un contenido electrónico, donde el usuario se despista del propósito
preliminar, el texto impreso lleva una secuencia lineal manteniendo un
manejo simple de la idea del estudio.
Introducción al diseño web adaptativo
El diseño web adaptativo es el término que se aplica para describir las
técnicas de diseño web, utilizadas para adaptar sitios web a las diferentes
resoluciones. Este término más conocido como (Responsive Web Desing,
en ingles) fue creado por Ethan Marcotte, pero la idea parte del consorcio
internacional W3C, en base al concepto expuesto en el 2008 nombrado
One Web el cual tiene como significado web para todos, y posibilitar la
interacción desde cualquier dispositivo.
Cuadrículas fluidas
Es un sistema empleado para estructurar el contenido de forma
ordenada y fluida, mediante una serie de columnas, las cuales sirven
como guías para mantener uniformes todos los componentes de una web.
Todos los elementos que componen la página web se trabajan con
medidas relativas, es decir para fijar una cifra se lo hace mediante
porcentaje.
60
Para obtener el resultado en porcentaje se aplica una formula la cual
consiste en dividir el ancho original en píxeles entre el ancho del contexto
y multiplicamos este resultado por cien. Por ejemplo teniendo un ancho
máximo de 960 px como contenedor, se debe insertar una columna de
240px, dividimos 240 por 960px, el resultado sería 0,25 y lo multiplicamos
por 100, obteniendo el 25%.
Imágenes flexibles
Al tener clara la fórmula para convertir las cantidades de píxeles a
porcentaje, se tiene que fijar ciertos límites, tanto para las imágenes como
elementos a utilizar en cualquier sitio web, y para esto se utiliza una regla
CSS llamada max-width, esta regla permite limitar una imagen a una
medida absoluta.
Tipografía web
La mejor unidad de medida a utilizar en el texto para el diseño web
adaptativo es el rem (root em), esta unidad se escala por medio de una
cifra base en píxeles. Para utilizar esta unidad de medida se tiene que
dividir el valor en pixeles por la cifra base.
Actualmente el uso de tipografías web es más común en los sitios web,
gracias al uso de la regla @font-face, el cual importa la tipografía
mediante un código CSS y los formatos de las fuentes a agregar.
Media queries
Las media queries son consultas que limitan uno o varios atributos
CSS, mediante un rango especifico de los dispositivos, los cuales se mide
61
mediante funciones, que se condicionan por el ancho o alto del dispositivo
como también por su orientación.
5.4.
Objetivos
Objetivo general
•
Desarrollar en el joven de quinto semestre de la Carrera de Diseño
Gráfico de la Facultad de Comunicación Social de la Universidad de
Guayaquil competencias que aumenten su nivel de conocimiento, a
través de sus habilidades y destrezas mediante la guía informativa.
Objetivo específicos
•
Organizar la información obtenida en este estudio, sobre el diseño
web adaptativo, para la elaboración de una guía informativa.
•
Diseñar una presentación llamativa y armónica para los estudiantes,
sin olvidar las condiciones de impresión y recepción.
•
Enunciar la guía con técnicas y pautas de diseño web adaptativo a los
estudiantes de quinto semestre de la Facultad de Comunicación
Social de la Universidad de Guayaquil.
5.5.
Importancia
Su importancia radica en el desconocimiento de algunos estudiantes
de la Carrera de Diseño Gráfico de la Facultad de Comunicación Social
sobre el diseño web adaptativo, así también se encuentra justificación en
las acotaciones de muchos profesores de la carrera, los cuales
encuentran necesario la implementación de una guía informativa que
62
fortalezca el nivel profesional de los futuros diseñadores gráficos,
mediante el conocimiento de el diseño web adaptativo. Siendo estos uno
de los factores principales, para llevar a cabo esta investigación.
5.6.
Ubicación sectorial y física
Lugar: Provincia del Guayas, Cantón Guayaquil.
Sector: Norte (Ciudadela Alborada III etapa, Mz. C1, Solar 8)
GRÁFICO 23
UBICACIÓN SECTORIAL
Fuente:
www.google.com.ec/maps
Elaboración:
Google Maps
5.7.
Factibilidad
El fácil acceso, junto a la aceptación y respaldo por parte de los
estudiantes y docentes de la Carrera de Diseño Gráfico hacen que la
guía informativa sobre el diseño web adaptativo, expuesta como resultado
63
de este estudio de investigación, sea factible para su implementación. Así
mismo por su fácil asimilación en base a los parámetros establecidos en
el diseño, como en la estructuración del contenido.
5.8.
Descripción de la propuesta
La diagramación y colores escogidos en la propuesta planteada son
idóneos para otorgar una lectura entretenida y asimilar correctamente la
información expuesta en la guía informativa.
Colores
Los colores escogidos para la ejecución de la línea gráfica fueron el
PANTONE 5405 C, PANTONE 7544 C, de los cuales se derivan de los
siguientes valores.
GRÁFICO 24
PANTONE DE IDENTIDAD GRÁFICA
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
64
Estos colores se eligieron por el efecto perceptivo que causa en el ser
humano. Según Eva Heller, en su libro psicología del color, el color azul
es el más apreciado, representa la simpatía y la armonía. Entre los
diferentes tonos de azul conocidos se escogió el azul grisáceo en dos
luminancias diferentes, definiéndolo color de identidad para la guía
impresa con el propósito de estimular al sujeto tranquilidad y satisfacción.
Tipografía
La familia tipográfica seleccionada fue la Nexa, la cual ofrece una
excelente legibilidad y una sencilla variedad tanto para los titulares como
para el cuerpo de texto, así mismo para implementación de cualquier
pieza gráfica.
GRÁFICO 25
FAMILIA TIPOGRÁFICA UTILIZADA EN LA IDENTIDAD DE LA GUÍA
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
65
Programa utilizados
Los programas utilizados en el proceso de elaboración de la guía
informativa impresa, han sido tres programas reconocidos en la familia de
Adobe, de los cuales se detallan cada uno.
Para iniciar la aplicación en un sistema operativo Windows 7 se tiene
en cuenta la versión CS5 de Adobe, se siguen estos pasos:
•
Clic en el botón inicio.
•
Clic en la Todos los programas.
•
Clic en la carpeta Adobe Design Premium
•
Clic en el programa a seleccionar
Área de trabajo
Cada uno de estos programas cuenta con su espacio de trabajo, es
decir la parte principal del programa, que es donde el usuario realiza el
trabajo, el cual está conformado por:
•
Ventanas de documento en forma de fichas
•
Barra de aplicaciones
•
Conmutador de espacios de trabajo
•
Barra de título de panel
•
Panel de control
•
Panel Herramientas
•
Botón Contraer en iconos
•
Cuatro grupos de paneles acoplados verticalmente
66
GRÁFICO 26
ÁREA DE TRABAJO DE PROGRAMAS DE DISEÑO
Fuente:
https://helpx.adobe.com/es/flash/using/flash-workflow-workspace.html
Elaboración:
Adobe
Adobe Illustrator
Es una aplicación informática creada para realizar todo tipo de diseño
vectorial, cuenta con varias herramientas, empleadas en diferentes áreas
del diseño tales como diseño editorial, diseño web, etc. Las herramientas
principales utilizadas en este programa fueron los siguientes:
Selección: Selecciona un elemento completo o agrupado.
67
Selección directa: Manipula uno o varios nodos seleccionado de uno o
más elementos.
Pluma: Dibuja líneas rectas y curvas para formar nuevos objetos.
Texto: Crea contenedores y textos individuales los cuales pueden ser
insertados y modificados.
Degradado: Ajusta el degradado dependiendo el ángulo, el punto inicial y
final dentro de los objetos u objeto a aplicar.
Segmento de línea: Dibuja línea rectas individuales.
Rectángulo: Crea cuadros y rectángulos.
Rectángulo redondeado: Crea rectángulos y cuadrados con vértices
redondeados.
Elipse: Dibuja elipses y círculos.
Rotar: Fija un punto para poder girar un objeto.
Escala: Cambia el tamaño de los objetos.
Mano: Mueve la mesa de trabajo.
Lupa: Aumenta y reduce la vista de la mesa de trabajo.
Esta aplicación se utilizó para la creación del isotipo y varias piezas
gráficas implementada en la guía, tales como portada, separador de
unidades, etc.
68
GRÁFICO 27
ISOTIPO
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
Línea gráfica
La dimensión del isotipo en base al espacio mostrado en el gráfico, es
de 5cm de ancho por 3,6cm de alto.
GRÁFICO 28
DIMENSIONES DEL ISOTIPO
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
Para el uso correcto del isotipo se tiene que utilizar los colores
designados por el autor del estudio de investigación, sea implementado
69
como fondo o en el logo, así mismo cuidando su posición o la utilización
de otro elemento, tal como se muestra en el siguiente gráfico.
GRÁFICO 29
USO CORRECTO E INCORRECTO DEL ISOTIPO
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
El proceso que se tomo para la creación del isotipo, fue la suma de
dos elementos, la primera letra de la palabra web usando la tipografía
elegida para la creación de la guía, más la topología de una red y
finalmente se estilizo el isotipo para su implementación.
Este isotipo muestra la representación gráfica de una red en forma de
W, tal como se muestra en el siguiente gráfico.
70
GRÁFICO 30
PROCESO PARA LA CREACIÓN DEL ISOTIPO
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
El diseño de la portada está formado por un fondo tramado con el color
del pantone 5405 C, junto con tres representaciones gráficas de los tres
aparatos electrónicos principales para navegar por el internet (ordenador,
smarphone, tablet), más la implementación del titular (Guía informativa
sobre diseño web adaptativo) con forma rectangular, del cual esta
complementado con el isotipo, utilizado como letra W.
GRÁFICO 31
PORTADA DE LA GUÍA
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
71
Para la contraportada se utilizó el mismo fondo tramado que en la
portada, pero a diferencia de ella, no aparecen las representaciones
graficas, ni el titular.
El isotipo se lo posiciono del lado derecho con un efecto de
transparencia, acompañado de una frase de John Galliano del lado
izquierdo, para finalizar en el centro de la barra inferior blanca se coloco
los logos de la Carrea de Diseño Gráfico, la Facultad de Comunicación
Social y la Universidad de Guayaquil.
GRÁFICO 32
CONTRAPORTADA DE LA GUÍA
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
Finalmente para los separadores de unidades se utilizó el mismo fondo
que en la portada y contraportada, así también el isotipo se muestra a la
derecha en blanco y centrado horizontalmente, con el título de la unidad a
la izquierda sobre un rectángulo de color azul grisáceo (pantone7544 C)
con un efecto de transparencia.
72
GRÁFICO 33
SEPARADOR DE UNIDAD
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
Adobe Photoshop
Es una aplicación informática que sirve para editar imágenes y
retoques fotográficos. Esta herramienta se utilizó para mejorar las fotos de
varios personajes que surgen en la propuesta y eliminar fondos
innecesarios. Las herramientas principales utilizadas en este programa
fueron las siguientes:
Mover: Mueve selecciones de capas y guías.
Lazo poligonal: Realiza selecciones rectilíneas.
Recortar: Recorta o separa la imagen.
73
Parche: Repara una parte de la imagen seleccionada con una muestra a
elegir.
Pluma: Dibuja líneas rectas y curvas.
Lupa: Aumenta y reduce la vista de la mesa de trabajo.
Mano: Mueve la imagen dentro de la ventana.
GRÁFICO 34
RETOQUE FOTOGRÁFICO
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
Adobe Indesign
Es una aplicación informática desarrollada
para la maquetación o
diagramación de páginas. Su principal característica es incorporar los
74
elementos de forma rápida y sencilla. Fue utilizada para la estructuración
de cada página interna mediante la incorporación de cada pieza gráfica.
GRÁFICO 35
DIAGRAMACIÓN DE LA GUÍA
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
Las herramientas principales utilizadas en esta aplicación son las
siguientes:
Selección: Selecciona un elemento completo o agrupado.
Selección directa: Manipula uno o varios nodos seleccionado de uno o
más elementos.
Texto: Crea contenedores y textos individuales los cuales pueden ser
insertados y modificados.
75
Marco rectangular: Crea cuadros y rectángulos para marcar la posición
de los elementos.
Mano: Mueve las páginas dentro del área del documento.
Lupa: Aumenta y reduce la vista de la mesa de trabajo.
El proceso para la diagramación o maquetación de la propuesta
empieza desde la estructuración y ordenamiento de cada elemento, junto
con la creación de páginas maestras con el diseño respectivo de cada
página interna, así como también la designación de los colores y fuente
tipográfica elegida, Terminando con la inserción de contenido y demás
elementos gráficos.
GRÁFICO 36
INTRODUCCIÓN DEL CONTENIDO EN LA GUÍA
Fuente:
Autor de la investigación
Elaboración:
Benavides Salazar Carlos Leonardo
5.9.
Misión
Elevar el nivel profesional y competitivo de los estudiantes de quinto
semestre de la Carrera de Diseño Gráfico de la Facultad de Comunicación
Social mediante la aplicación de la guía informativa impresa sobre el
diseño web adaptativo.
76
5.10. Visión
Despertar el interés de los estudiantes sobre el manejo de las nuevas
tecnologías web, relacionadas al diseño web adaptativo, y dotar a los
docentes la guía informativa como material de consulta para los alumnos.
5.11. Beneficiarios
Beneficiarios directos: Estudiantes de quinto semestre de la Carrera de
Diseño Gráfico de la Facultad de Comunicación Social de la Universidad
de Guayaquil.
Beneficiarios indirectos: Los docentes que imparten materia relacionada
con el diseño web adaptativo de la Carrera de Diseño Gráfico de la
Facultad de Comunicación Social de la Universidad de Guayaquil.
5.12. Impacto social
•
Mayor comprensión sobre el diseño web adaptativo.
•
Mayor interés por las nuevas tecnologías web relacionada con el
diseño web adaptativo.
•
Mejor desempeño académico en el área del diseño web.
•
Mejoras en las clases dictadas por docentes conforme avanza las
tecnologías web.
5.13. Definición de términos relevantes
Tecnología Web: Es aquella que hace uso de todas aquellas tecnologías
para la interconexión de ordenadores y las tecnologías de presentación y
configuración e implementación de páginas Web, presentando su
funcionamiento tan intuitivo y sencillo al usuario.
77
HTML: Es el lenguaje que se emplea para el desarrollo de páginas de
internet. Está compuesto por una serie de etiquetas que el navegador
interpreta y da forma en la pantalla. Dispone de etiquetas para imágenes,
hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea,
listas, tablas, etc.
CSS: Es un lenguaje utilizado en la presentación de documentos HTML.
Un documento HTML viene siendo coloquialmente “una página web”.
Entonces podemos decir que el lenguaje CSS sirve para organizar la
presentación y aspecto de una página web.
Diseño Web: Es una actividad que consiste en la planificación, diseño e
implementación de sitios web y páginas web.
Navegador: Conocido también como web browser o navegador es una
aplicación que opera a través de Internet, interpretando archivos y sitios
web desarrollados a menudo en código HTML que contienen información
y contenido en hipertexto de todas partes del mundo.
Navegador móvil: Es un navegador web diseñado para el uso en
dispositivos móviles y de reducidas dimensiones, como PDAs, teléfonos
móviles, teléfonos inteligentes o tabletas.
Usuario, ria: Que usa ordinariamente algo.
Dispositivos: Es un aparato o mecanismo que desarrolla determinadas
acciones.
78
Resolución: Se refiere al nivel de detalle que puede observarse en una
imagen. La noción es habitual en la fotografía digital: a mayor resolución,
mayor calidad visual y detalle.
Diseñador Gráfico: El diseño gráfico es una disciplina y profesión que
tiene el fin de idear y proyectar mensajes a través de la imagen. Al diseño
gráfico se lo llama también “Comunicador visual” y esto es así puesto que
entraña una íntima relación con la comunicación como ciencia teórica y
disciplina gráfica.
Gestionar: Hacer las acciones o los trámites necesarios para conseguir o
resolver una cosa.
Maquetación: Composición de una página, compaginación de diferentes
elementos. Son términos diferentes, que se utilizan para hacer referencia
a una misma cosa; la forma de ocupar el espacio del plano mesurable, la
página.
Competitividad: Capacidad de competir.
Plataformas web: Hace referencia al conjunto de programas y sistemas
que hacen que un sitio web esté en funcionamiento: el servidor web, la
base de datos, el intérprete de programación, etc.
Sitios web: Un sitio web, por lo tanto, es un espacio virtual en Internet. Se
trata de un conjunto de páginas web que son accesibles desde un mismo
dominio o subdominio de la World Wide Web (WWW).
Componentes: Que compone o entra en la composición de un todo.
79
Mosaic: Fue el primer navegador público que se basó en estaciones
UNIX (un sistema operativo multitarea y multiusuario, es decir, que podía
ejecutar varios programas y gestionar varios usuarios simultáneamente),
que fueron creadas por el Centro Nacional para Aplicaciones de
Supercomputación (NCSA por sus siglas en inglés) de la Universidad de
Illinois.
W3C: Es una organización internacional creada por el británico Tim
Berners Lee en 1994. Esta organización es la encargada de definir todos
los estándares de la web.
Netscape Navigator: Es un navegador web desarrollado por la compañía
Netscape Communications, creada por Marc Andreessen. Netscape fue el
primer navegador comercial.
PHP: (acrónimo recursivo de PHP: Hypertext Preprocessor) es un
lenguaje de código abierto muy popular especialmente adecuado para el
desarrollo web y que puede ser incrustado en HTML.
JAVA: Es un lenguaje de programación y una plataforma informática
comercializada por primera vez en 1995 por Sun Microsystems. Hay
muchas aplicaciones y sitios web que no funcionarán a menos que tenga
Java instalado y cada día se crean más. Java es rápido, seguro y fiable.
Desde portátiles hasta centros de datos, desde consolas para juegos
hasta súper computadoras, desde teléfonos móviles hasta Internet, Java
está en todas partes.
MYSQL: Es un sistema de gestión de base de datos relacional (RDBMS)
de código abierto, basado en lenguaje de consulta estructurado (SQL).
80
Base de datos: Es un “almacén” que nos permite guardar grandes
cantidades de información de forma organizada para que luego podamos
encontrar y utilizar fácilmente. A continuación te presentamos una guía
que te explicará el concepto y características de las bases de datos.
W3Counter: Sistema de estadísticas para sitios web.
81
CAPÍTULO VI
CONCLUSIONES Y RECOMENDACIONES
Luego de analizar los resultados y de concluir la propuesta, se
establecen las siguientes conclusiones y recomendaciones:
6.1.
•
Conclusiones
Los estudiantes de quinto semestre de la Carrera de Diseño de la
Facultad de Comunicación Social de la Universidad de Guayaquil,
cuentan con el conocimiento básico para la elaboración de una página
web, pero no tienen noción de lo que es el diseño web adaptativo.
•
Hoy en día los estudiantes de quinto semestre de la Carrera de Diseño
Gráfico de la Facultad de Comunicación Social de la Universidad de
Guayaquil, tienen el interés de incrementar su nivel de conocimientos
en diseño web, considerando el avance de las nuevas tecnologías
web, por medio de técnicas y pautas que permitan adaptar sitios web
al entorno de navegación del usuario, lo que podría otorgarle nuevas
oportunidades de trabajo.
•
Actualmente los docentes de la Carrera de Diseño Gráfico cuyas
materias se relacionan con el entorno web ven necesario que los
estudiantes consulten e investiguen información relacionada al diseño
web adaptativo y más aun que se introduzca este tema en el syllabus.
•
Los estudiantes de manera directa se beneficiarán con estas técnicas
y pautas que permiten adaptar sitios web al entorno de navegación del
82
usuario, mejorando y aumentando su conocimiento en base al diseño
web adaptativo.
6.2.
•
Recomendaciones
Se debe difundir el diseño web adaptativo, como componente
necesario para la elaboración de páginas web y fortalecer el
conocimiento de los estudiantes de la carrera de Diseño Gráfico de la
Facultad de Comunicación Social de la Universidad de Guayaquil.
•
Se recomienda aumentar el nivel académico del estudiante de quinto
semestre
mediante
la
orientación
a
realizar
investigaciones
relacionadas con el diseño web adaptativo que otorguen al estudiante
técnicas y pautas que permitan adaptar sitios web al entorno de
navegación.
•
Se encuentra necesario insertar al syllabus de la materia de diseño
web, la revisión y consulta de un material relacionado al diseño web
adaptativo.
•
Es necesario que el estudiante de la Carrera de Diseño Gráfico
obtenga material que aumente su interés por las nuevas tecnologías
web y eleve su nivel profesional, para un mejor desenvolvimiento en el
área laboral relacionada con el desarrollo de páginas web.
•
Aconsejar el uso de la guía como fuente primaria de investigación para
los estudiantes de la Carrera de Diseño Gráfico.
83
ANEXOS
84