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