Repositorio Institucional de Documentos

1MEMORIA DE PROYECTO El proyecto consiste en el diseño de la imagen corporativa, para el grupo de investigación GEDiX (Group of Engineering of Design and Innovation for X) y su posterior desarrollo reflejado en un manual corporativo. En la fase inicial se llevará a cabo un estudio que resultará fundamental para la creación de una imagen corporativa que se adapte a las necesidades del grupo y refleje el mensaje que éste quiere transmitir. Además, se estudiará en profundidad a la competencia, sus imagotipos y los valores que transmiten con ellos. Se hará un análisis exhaustivo de los elementos de los logotipos de la competencia, se compararán entre ellos y se sacarán una serie de conclusiones que nos servirán para el posterior desarrollo de la imagen corporativa de GEDiX. En la segunda fase, se establecerán una serie de especificaciones que debe cumplir el imagotipo a diseñar y se presentarán 3 alternativas principales que pueden constar de variaciones. En la tercera fase, una vez seleccionado el concepto, se llevará a cabo el desarrollo del mismo a fin de adaptarlo a la imagen que se pretende transmitir. Además, se establecerán unas normas de aplicación del imagotipo que se recogerán en el Anexo 02: Manual de Imagen Corporativa. Una vez definido completamente el imagotipo, en la fase 4, se procederá al diseño y desarrollo de las diferentes aplicaciones, tanto de papelería como de merchandising. También se diseñarán aplicaciones que tengan un valor divulgativo sobre las actividades del grupo; en concreto se diseñarán catálogo, folleto, poster y stand ferial. Por último, se llevará a cabo el diseño y desarrollo de un sitio web autogestionable que incluirá, entre otras cosas, ficha personal de cada investigador, tablón de anuncios, proyectos en desarrollo, artículos de investigación, museo virtual del área de expresión gráfica, etc. bajo criterios de accesibilidad. Su contenido se recogerá en el Anexo 04. Sitio web y su guía de uso en el Anexo 03: Manual de uso del sitio web RESUMEN 3MEMORIA DE PROYECTO Introducción 1. DOCUMENTACIÓN 1.01. El grupo 1.02. Líneas de investigación 1.03. Palabras clave 2. PROPUESTA DE CONCEPTOS 2.01. Conclusiones acerca del grupo 2.02. Conclusiones del análisis de la competencia 2.03. Alternativas imagotipo 2.04. Alternativa elegida 3. DESARROLLO DEL CONCEPTO 3.01. Análisis del imagotipo 3.02. Construcción 3.03. Área de respeto 3.04. Tamaño mínimo de aplicación 3.05. Versión vertical 4. APLICACIONES 4.01.Papelería 4.02. Merchandising 4.03. Catálogo 4.04. Folleto 4.05. Poster 4.06. Stand FASE 05. SITIO WEB 5.01. Páginas 5.02. Accesibilidad del sitio web 5.03. Diseño responsivo o adaptativo ÍNDICE 4MEMORIA DE PROYECTO Los objetivos del proyecto son: • Llevar a cabo una fase de documentación lo suficientemente amplia y exhaustiva como para que nos permita sacar una serie de conclusiones que nos ayuden a realizar posteriormente el diseño de la imagen corporativa y del sitio web. • Crear una serie de conceptos que representen de la forma más concreta posible los valores que el grupo pretende transmitir. • • Diseñar y desarrollar una imagen corporativa para GEDiX que se adapte a las necesidades del grupo y que sea capaz de transmitir la personalidad y valores del mismo, así como de representar su metodología de trabajo. • Diseñar las aplicaciones de papelería y merchandising necesarias para que GEDiX pueda llevar a cabo su actividad investigadora sin perder su identidad corporativa. El diseño de las aplicaciones reforzará la imagen del grupo en diferentes situaciones de trabajo. • • Diseñar las aplicaciones de comunicación que tengan un carácter divulgativo y que sean llamativas. Éstas permitirán al grupo darse a conocer y promover su actividad investigadora. • Diseñar y desarrollar un sitio web en el que GEDiX pueda mostrar las actividades e investigaciones que lleva a cabo. El sitio web será autogestionable y de fácil uso para todos los usuarios. Además tendrá que cumplir criterios de accesbilidad para todos los usuarios y requisitos de adaptabilidad a diferentes dispositivos (Responsive Design). OBJETIVOS 5MEMORIA DE PROYECTO MARZO ABRIL MAYO JUNIO JULIO AGOSTO SEPTIEM. OCTUBRE NOVIEM. FASE 01. INVESTIGACIÓN Y DOCUMENTACIÓN • Grupo, actividad y competencia • Palabras clave, valores, conclusiones FASE 02. PROPUESTA DE CONCEPTOS • Generación de conceptos FASE 03. DESARROLLO DEL CONCEPTO • Desarrollo del concepto • Elaboración Manual de Imagen corporativa FASE 04. APLICACIONES • Generación de alternativas • Desarrollo de alternativa • Elaboración Manual de Imagen corporativa FASE 05. SITIO WEB • Diseño sitio web • Desarrollo de sitio web • Elaboración Manual de uso del sitio web PLANIFICACIÓN 6MEMORIA DE PROYECTO 1.01. EL GRUPO GEDiX (Group of Engineering of Design and Innovation for X) es un grupo de investigación en el campo de la Ingeniería de Diseño y la Innovación para X. La actividad de investigación del grupo se centra en la aplicación y desarrollo de técnicas y metodologías de diseño enfocadas a la optimización de productos y procesos desde su concepción inicial. El grupo de investigación surge a partir del trabajo individual de varios profesores que desarrollan su labor docente en la Escuela de Ingeniería y Arquitectura de la Universidad de Zaragoza, y que se encuentran adscritos al Departamento de Ingeniería de Diseño y Fabricación. 1.02. LÍNEAS DE INVESTIGACIÓN Desarrolla su actividad de forma organizada a través de 4 líneas de investigación fundamentales: • Diseñodeservicios Para garantizar un correcto funcionamiento y operación en el punto de utilización. Incluye el diseño mecánico, fluidodinámico, estructural, eléctrico y electrónico, mantenimiento, funcionalidad, etc. • Diseñoparaelentorno Para realizar una adecuada adaptación al usuario y al medio en que se integra. Incluye la interacción usuario-producto, ergonomía, reciclado y eco diseño... • Diseñoparalafabricación Para facilitar el desarrollo de producto, asegurando la viabilidad técnica y económica de los procesos productivos. Incluye la selección de materiales y procesos de fabricación, análisis de ensamblajes, montaje y desmontaje, análisis de costes, almacenaje y cadena de distribución, embalaje, etc. • Diseñoasistido,modelado,simulación3Dyanimación Para el desarrollo y aplicación de herramientas gráficas de diseño. 1. DOCUMENTACIÓN Ver Fase 01. Investigación y documentación del Anexo 01: Creación de Imagen Corporativa y Diseño de sitio web. 7MEMORIA DE PROYECTO 1.03. PALABRAS CLAVE • Diseño Diseñar es una tarea compleja, dinámica e intrincada. Es la integración de requisitos técnicos, sociales y económicos, necesidades biológicas, ergonomía con efectos psicológicos y materiales, forma, color, volumen y espacio, todo ello pensado e interrelacionado con el medio ambiente que rodea a la humanidad. • Producto Un producto es cualquier cosa que se puede ofrecer a un mercado para satisfacer un deseo o una necesidad. • Metodología La metodología hace referencia al conjunto de procedimientos racionales utilizados para alcanzar una gama de objetivos que rigen en una investigación científica, una exposición doctrinal o tareas que requieran habilidades, conocimientos o cuidados específicos. Alternativamente puede definirse la metodología como el estudio o elección de un método pertinente para un determinado objetivo. • Optimización Buscar la mejor manera de realizar una actividad. Mejora, crecimiento, innovación, ascenso... • Interdisciplinaridad Es un término que expresa la cualidad de ser interdisciplinario. Un campo interdisciplinario es un campo de estudio que cruza los límites tradicionales entre varias disciplinas académicas o entre varias escuelas de pensamiento, por el surgimiento de nuevas necesidades o la elección de nuevas profesiones. • Innovación La palabra innovación puede designar, en igual medida, a los productos como también al proceso de su fabricación o a su distribución. La innovación en cuanto a la singularidad de artefactos, productos, métodos o servicios hasta ahora desconocidos y sin precedentes hasta el momento. 1. DOCUMENTACIÓN Ver Fase 01. Investigación y documentación del Anexo 01: Creación de Imagen Corporativa y Diseño de sitio web. 8MEMORIA DE PROYECTO 2.01. CONCLUSIONES ACERCA DEL GRUPO Del estudio de la actividad investigadora de GEDiX se han obtenido una serie de conclusiones que se convertirán en pautas a seguir para la creación de la imagen corporativa. • El grupo realiza su actividad basándose en estudios de todos los posibles aspectos que influyen en el desarrollo del producto. • Siguen el desarrollo del producto a lo largo de todo su ciclo de vida. • Estudia aspectos tan variados como la tecnología, materiales, medio ambiente, embalaje, usuarios, diseño, funcionalidad, producción, seguridad…. • Se centra en el macroárea de la tecnología y realiza sus actividades dentro del Departamento de Ingeniería de Diseño y Fabricación de la Universidad de Zaragoza. • Se estructura en 4 líneas de actuación que se interrelacionan entre sí para mejorar la calidad de los productos. • Palabras clave: Diseño, Interdisciplinar, producto, optimización y metodología. • “Estudia todas las fases y aspectos de los productos para optimizarlos”. • “Combinación de estudios y conocimientos para crear mejores productos”. 2. CONCEPTOS DE IMAGEN CORPORATIVA 2.02.CONCLUSIONES DEL ANÁLISIS DE LA COMPETENCIA De los logotipos analizados de grupos e institutos de investigación de diferentes disciplinas y diferentes universidades, así como de estudios de diseño de todo el panorama nacional, se han extraído las siguientes conclusiones: Se dividen a partes iguales entre imagotipos, logotipos y logosímbolos. • La mayoría de los estudios de diseño se representan mediante un 15MEMORIA DE PROYECTO 3.04. TAMAÑO MÍNIMO DE APLICACIÓN Para garantizar la correcta legibilidad del imagotipo se establece un tamaño mínimo. Este imagotipo, no podrá utilizarse con menos de 30 mm de anchura. Offset Serigrafía Soportedigital 25 mm 30 mm 30 mm 3.05. VERSIÓN VERTICAL Para los casos en los que sea muy complicada la reproducción del logotipo en versión horizontal, se propone esta otra representación, en formato vertical. Para crear una imagen compacta, el símbolo y el logotipo irán alineados verticalmente con una separación horizontal entre ellos igual a la mitad de la altura del texto. La anchura del símbolo estará relacionada con la distancia entre el extremo izquierdo de la letra E y el extremo derecho de la i. X X/2 3. DESARROLLO DEL CONCEPTO Ver Anexo 02: Manual de Imagen Corporativa. 16 MEMORIA DE PROYECTO 3.06. IDENTIFICADOR AUXILIAR Se ha ideado también un identificador auxiliar a fin de representar el grupo de manera menos formal y más flexible que su imagotipo. Es una repetición del símbolo (parte del imagotipo principal) presentado únicamente mediante su contorno y creando una sensación de cubos en 3 dimensiones. En su representación se ha utilizado un lenguaje muy técnico para transmitir rasgos propios de GEDiX: está compuesto por líneas finas de contorno presentando con detalle una estructura 3D que se asocia con planos y con el dibujo técnico. Se ha utilizado el color gris corporativo (Pantone Cool Gray 11C) que representa mejor los valores técnicos que se pretenden. El símbolo está formado por una repetición del símbolo del imagotipo original creando una retícula formada por paralelogramos. En la figura inferior se muestra el símbolo trazado sobre una retícula que lo geometriza definiendo sus proporciones generales. Cada paralelogramo mide 1x2 unidades y condiciona el resto del conjunto. Siempre que este símbolo se utilice deberá respetar las medidas de los paralelogramos, que son 10x5 mm. Si se desea reproducir en un tamaño diferente se deberán agregar y eliminar paralelogramos hasta ajustarlo al tamaño idóneo. x 6x 2x 42x 3. DESARROLLO DEL CONCEPTO Ver Anexo 02: Manual de Imagen Corporativa. 17MEMORIA DE PROYECTO 4.01. PAPELERÍA 4.01.01. PAPEL CARTA CON MEMBRETE El papel carta tendrá un tamaño DIN A4 (210x297 mm). Llevará el imagotipo de GEDiX en el margen superior izquierdo y los datos del grupo en el margen superior izquierdo. En el margen inferior aparecerá el identificador auxiliar en color gris corporativo a 30 mm de altura. Se presentarán las artes finales y una plantilla de Word para su edición. 4.01.02. PAPEL A4 El papel A4 tendrá un tamaño DIN A4 (210x297 mm). Llevará el imagotipo de GEDiX en el margen superior izquierdo . Se presentarán las artes finales y una plantilla de Word para su edición. Group of Engineering of Design and Innovation for X 4. APLICACIONES Ver Anexo 02: Manual de Imagen Corporativa. 18 MEMORIA DE PROYECTO 4.01.03. SOBRE AMERICANO El sobre americano llevará el imagotipo de GEDiX junto con los datos a la izquierda del sobre. En la parte superior del sobre aparece el identificador auxiliar en color gris corporativo. La solapa del sobre será en PANTONE 1675 C y llevará encima el identificador auxiliar. 4.01.04. TARJETA DE VISITA La tarjeta de visita tendrá unas dimensiones de 86x54 mm. En la parte delantera aparecerá el imagotipo de GEDiX y los datos del grupo en castellano e inglés tal como aparecen en la imagen. La parte trasera será en PANTONE 1675 C en combinación con el identificador auxiliar. En el centro aparecerá el imagotipo en color blanco. Group of Engineering of Design and Innovation for X [email protected] www.gedix.com Ramón Miralbés Buil 4. APLICACIONES Ver Anexo 02: Manual de Imagen Corporativa. 19MEMORIA DE PROYECTO 4.01.05. CARPETA DOCUMENTOS CON/SIN SOLAPA La carpeta de documentos tendrá unas medidas de 230x320 mm plegada. Como color base tendrá el PANTONE 1675 C. En la parte delantera aparecerá ademásel identificador principal en color PANTONE 1595 C. En el centro de la parte delantera llevará el imagotipo en color blanco, centrado vertical y horizontalmente. En la parte trasera llevará los datos en la parte inferior en color blanco y tipografía Myriad Pro. GroupofEngineeringofDesignandInnovationforX [email protected] www.gedix.com GroupofEngineeringofDesignandInnovationforX [email protected] www.gedix.com 4. APLICACIONES Ver Anexo 02: Manual de Imagen Corporativa. 20 MEMORIA DE PROYECTO Interior 4.01.06. CARÁTULA CD Del CD se han diseñado portada, interior, CD y contraportada. El CD y la contraportada tienen como color de fondo PANTONE 1675C y la portada y el interior tienen fondo blanco para permitir la escritura del contenido del CD. Portada GroupofEngineeringofDesignandInnovationforX [email protected] www.gedix.com Contraportada 4.01.07. SOBRE A4 El sobre en tamaño A4 conserva el diseño del sobre americano. Combina el identificador auxiliar en sus dos versiones, con la parte principal en blanco y la solapa en PANTONE 1675C. En la parte principal lleva los datos del grupo junto con el logotipo. Las dimensiones del sobre son 230x320 mm (con la solapa plegada). Group of Engineering of Design and Innovation for X 4. APLICACIONES Ver Anexo 02: Manual de Imagen Corporativa. 21MEMORIA DE PROYECTO 4.01.08. TARJETÓN El tarjetón conserva las pautas de diseño de la tarjeta de visita adaptándolas a sus dimensiones (210x100 mm). Contiene todos los datos del grupo ya que se servirá como instrumento de presentación. La parte trasera es sobre fondo de color y presenta en logotipo en color blanco. [email protected] www.gedix.com Group of Engineering of Designand Innovation for X 4.01.09. FAX El formato de papel fax será A4 y en él aparecen todos los datos fundamentales en cualquier envío de fax. El diseño se presenta en blanco y negro para que así lo exige su función. Se presenta en una plantilla de Word para ser cumplimentada. FAX Asunto: [Asunto] CC: [Nombres] Fecha: [Fecha] Páginas: [Número de páginas] De: [Nombre] Número de teléfono: [Teléfono] Número de fax: [Fax] Para: [Nombre] Número de teléfono: [Teléfono] Número de fax: [Fax] 4. APLICACIONES Ver Anexo 02: Manual de Imagen Corporativa. 22 MEMORIA DE PROYECTO Diseño d e coche eléctrico c on m ayor capacidad p ara absorber energía y reducir los daños en los ocupantes. OPTIBODY (VII Programa MARCO CEE) Diseñoparalafabricación Facilitar e l desarrollo de p roducto, asegurando l a viabilidad t écnica y económica d e los procesos productivos. - Materiales - Procesos de fabricación - Análisis de ensamblajes - Montaje y desmontaje - Análisis de costes - Almacenaje y cadena de distribución - Embalaje... Portada Portadilla Retícula Contraportada Nombre del proyecto Datos del proyecto GroupofEngineeringofDesignandInnovationforX [email protected] www.gedix.com Group of Engineering of Design and Innovation for X [email protected] www.gedix.com Nombre del proyecto Diseño m ecánico d e nuevos conceptos de b arreras para protección de motoristas. SMART RSS (VII Programa MARCO CEE) 4.01.10. PLANTILLAS POWER POINT Se han diseñado las plantillas para la presentación de proyectos. De este modo, se diseña una portada, diferentes retículas para disposición de los elementos y una contraportada. En los ejemplos se pueden apreciar los resultados de un proyecto presentado sobre dichas plantillas. Se presenta en una plantilla de Power Point. 4. APLICACIONES Ver Anexo 02: Manual de Imagen Corporativa. 23MEMORIA DE PROYECTO 4.01.11. DOSSIER PROYECTOS Se propone la siguiente maquetación para la redacción de dossier para proyecto. En la portada aparece el logotipo centrado, el nombre del proyecto y el identificador auxiliar en el margen inferior. Las páginas carecen de elementos de diseño para dar protagonismo al contenido. Se relacionan con la imagen del grupo gracias al diseño del título, en los colores corporativos. La contraportada tiene fondo de colo PANTONE 1675C y en ella aparecen el logotipo y los datos del grupo. Group of Engineering of Design and Innovation for X Nombre del proyecto GroupofEngineeringofDesignandInnovationforX [email protected] www.gedix.com Portada Página Contraportada 1.01.APARTADO 4. APLICACIONES 4.01.12. IDENTIFICADOR CARPETA Se ha diseñado un identificador lateral para archivadores de anillas. Se ha respetado el formato que suele presentar esta aplicación y se ha colocado el imagotipo del grupo centrado en la parte principal. Se propone la idea de elegir archivadores con las tapas lo más parecido posible a los colores corporativos para respetar la imagen del grupo. Ver Anexo 02: Manual de Imagen Corporativa. 24 MEMORIA DE PROYECTO 4. APLICACIONES 4.02. MERCHANDISING 4.02.01. BOLÍGRAFO 5.02.02. LAPICERO 5.02.03. BLOCK DE NOTAS Ver Anexo 02: Manual de Imagen Corporativa Anexo 01. Creación de Imagen corporativa y diseño de siito web 5.02.04. MEMORIA USB 31MEMORIA DE PROYECTO PÁGINAS En él aparecen las siguientes pestañas: • Inicio El inicio nos permite volver a la página principal independientemente de donde estemos en ese momento de la navegación. Tiene la misma función que el imagotipo, ya que haciendo click sobre él también podremos retornar a la pantalla principal de inicio. 5. SITIO WEB 5.01. PÁGINAS El menú principal se muestra en horizontal, en la parte superior de la página, debajo del imagotipo y algunos datos generales del grupo. Se enmarca en un rectángulo del color web #A53F0F y las pestañas cambian de color al pasar el cursor por encima. Cuando nos encontramos en una de las páginas, la pestaña a la que pertenece aparecerá en un color más claro en el menú principal lo que facilita la navegación a través del sitio web Ver Anexo 01. Creación de Imagen corporativa y Diseño de sitio web (Fase 05) Anexo 03. Manual de uso de sitio web 32 MEMORIA DE PROYECTO • Presentación La pestaña de Presentación recoge la información fundamental de GEDiX, desde cuál es su actividad hasta cuáles son sus intalaciones, su organización o sus objetivos. Para tener una estructura más organizada, se divide en un submenú compuesto por: • El grupo • Objetivos • Miembros • Instalaciones 5. SITIO WEB Ver Anexo 01. Creación de Imagen corporativa y Diseño de sitio web (Fase 05) Anexo 03. Manual de uso de sitio web 33MEMORIA DE PROYECTO 5. SITIO WEB • Líneasdeinvestigación La pestaña de Líneas de investigación recoge la actividad fundamental del grupo. Está dividida en un submenú en el cual aparecen las 4 líneas que sigue el grupo. • Diseño de servicios • Diseño para el entorno • Diseño para la fabricación • Diseño asistido, modelado, simulación 3D y animación Haciendo click en cualquiera de ellas se puede obtener información más detallada de los aspectos en los que se centra cada una y ver un resumen de los proyectos que se realizan dentro de cada una de ellas. Ver Anexo 01. Creación de Imagen corporativa y Diseño de sitio web (Fase 05) Anexo 03. Manual de uso de sitio web 34 MEMORIA DE PROYECTO • Proyectos En esta pestaña se recoge la información acerca de cada uno de los proyectos que realiza el grupo, divididos de igual manera que las líneas de investigación • Diseño de servicios • Diseño para el entorno • Diseño para la fabricación • Diseño asistido, modelado, simulación 3D y animación Cada una de las pestañas del submenú nos lleva a una página en la que vemos información más detallada de cada proyecto según la línea de investigación en la que se desarrolle. 5. SITIO WEB Ver Anexo 01. Creación de Imagen corporativa y Diseño de sitio web (Fase 05) Anexo 03. Manual de uso de sitio web 35MEMORIA DE PROYECTO • Publicaciones Esta pestaña recoge las diferentes publicaciones que realiza GEDiX en diferentes medios y también las que se hacen acerca del grupo. Se divide en diferentes secciones: • Libros • Revistas • Congresos Es una sección que estará en constante actualización para que los visitantes puedan estar al día de las noticias del grupo. En la pantalla principal de esta sección aparece una imagen relacionada con cada opción del submenú. Haciendo click en ella también nos dirige a las subpáginas. 5. SITIO WEB Ver Anexo 01. Creación de Imagen corporativa y Diseño de sitio web (Fase 05) Anexo 03. Manual de uso de sitio web 36 MEMORIA DE PROYECTO • Museovirtual Esta pestaña servirá de expositor para una serie de piezas que están relacionadas con el Departamento de Ingeniería y Fabricación de la Universidad de Zaragoza. A través de esta sección se logrará darles visibilidad. • Contacto Esta pestaña muestra los datos de contacto del grupo GEDiX. 5. SITIO WEB Ver Anexo 01. Creación de Imagen corporativa y Diseño de sitio web (Fase 05) Anexo 03. Manual de uso de sitio web 37MEMORIA DE PROYECTO 5.02. ACCESIBILIDAD DEL SITIO WEB La accesibilidad en un sitio Web consiste en garantizar el acceso a la información y a los servicios de sus páginas sin limitación ni restricción alguna por razón de discapacidad de cualquier carácter o condicionantes técnicos, debiendo tener en cuenta que muchas personas que acceden a la información incluida en páginas Web lo hacen desde diferentes dispositivos y contextos. El sitio web que se ha diseñado para GEDiX ha sido diseñado con ayuda del Sistema gestor de Contenidos Web (CMS) WordPress. Este CMS tiene criterios de accesibilidad predeterminados que nos ayudan a cumplir las especificaciones de los usuarios con limitaciones. A continuación se enumeran las pautas que se han seguido en el desarrollo del sitio web y que hacen de él un lugar accesible. Diseñogeneraldelapáginaysitioweb • Estructurar bien las páginas, mediante títulos y subtítulos (etiquetas H1, H2, H3...), manteniendo una presentación clara y consistente a lo largo de todo el sitio web. La plantilla WordPress por defecto ya pone los titulos mediante codigo PHP. Las funciones de wordpress y la plantilla ya jerarquizan por sí mismas las paginas. • Utilizar html estándar aprobado por el W3C evitando texto deslizante o parpadeante que sólo son interpretadas correctamente por un navegador. En la página no existe ningún elemento creado con Javascript que pueda afectar a la accesibilidad del sitio. • Incluir una nota sobre accesibilidad del sitio web para concienciar a los usuarios y promover su uso en otros sitios web. El sitio web incluye una nota al pie de la página en el que se señala que se está visitando una página accesible. 5. SITIO WEB Ver Anexo 01. Creación de Imagen corporativa y Diseño de sitio web (Fase 05) Anexo 03. Manual de uso de sitio web 38 MEMORIA DE PROYECTO • Especificar en cada página una dirección de email para comentarios y la fecha de última actualización. Al no ser una página tipo blog, no es necesario que cumpla esta recomendación puesto que se trata de una pagina estatica que no admite comentarios. No tiene posts, tiene contenido estático. • Proporcionar alternativas o evitar las páginas con marcos pues no son accesibles para algunos navegadores. En la página no hay marcos Presentacióndeltexto • Presentar un tamaño suficientemente grande de fuentes en pantalla para mejorar la legibilidad. El tamaño de los textos se considera suficientemente grande para ser leido sin dificultad por todos los tipos de usuarios. • Evitar el uso de tablas para formatear texto en pantalla porque esto confunde a veces a los programas lectores de pantalla. En la página no hay tablas, todo el contenido será texto plano. • Proporcionar texto significativo en los enlaces. Evitar el enlace que dice únicamente “pincha aquí”, ya que algunos navegadores de acceso alternativo tienen la opción de listar únicamente los enlaces de la página para acelerar la navegación. Aunque en un principio la página no tiene ningún enlace de texto, si en algún momento hubiera que incluir alguno, se debe tener en cuenta esta recomendación. • Diferenciar claramente los enlaces consecutivos en la misma línea mediante un carácter de separación como “|”. Sólo existen dos enlaces consecutivos en la parte de selección del idioma y se considera que están separados el suficiente espacio como para que no exista confusión. • Mantener la forma habitual de presentar los enlaces subrayados y no utilizar subrayado en texto que no sea enlace, para no confundir al usuario. No existen en la página enlaces de este tipo pero, si en algún momento se decidieran añadir, habría que tener en cuenta la recomendación. 5. SITIO WEB Ver Anexo 01. Creación de Imagen corporativa y Diseño de sitio web (Fase 05) Anexo 03. Manual de uso de sitio web 39MEMORIA DE PROYECTO Característicasgráficas • Proporcionar siempre un breve texto alternativo (ALT tag) o descripciones textuales más amplias (enlace D o atributo LONGDESC) de las imágenes empleadas. Todas las imágenes incluidas en la página tienen asignado unn título y un Texto alternativo para que puedan ser interpretadas por los lectores de páginas. • Utilizar fondos simples, preferiblemente planos y con suficiente contraste. La página tiene fondo plano en color blanco para crear un mayor contraste con los elementos que existen sobre él. • Diseñar los botones y enlaces grandes para facilitar su selección con el ratón. Los botones del menú principal y del menú desplegable se considera que tienen un tamaño suficientemente grande como para no inducir a error . Sólo en el caso del submenú lateral se podría considerar que los enlaces sean un poco pequeños pero, para ello existe el menú desplegable y el menú en forma de imágenes. Respecto a la longitud de las descripciones textuales de las imágenes hay una cierta polémica entre los expertos. Si son demasiado breves pueden dejar al usuario con una comprensión incompleta de la página, mientras que si son demasiado largas pueden sobrecargar el texto de la página y dificultar la navegación. 5. SITIO WEB Ver Anexo 01. Creación de Imagen corporativa y Diseño de sitio web (Fase 05) Anexo 03. Manual de uso de sitio web 40 MEMORIA DE PROYECTO 5. SITIO WEB 5.03. DISEÑO RESPONSIVO El diseño web responsivo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario. El diseño Responsivo permite al usuario acceder a un sitio web desde diferentes medios como dispositivos mobiles, tablets, pantallas wide y diferentes resoluciones en los ordenadores. Partiendo de la base de que todo diseño web debe estar centrado en la experiencia del usuario al momento de acceder a un sitio web, el diseño responsivo se ha convertido en una funcionalidad de uso obligatorio en cualquier sitio web. El principal concepto en el que se apoya el Diseño Responsivo es en abandonar los anchos fijos de la página web. Estos deberán ser fluidos, es decir, reflejados en térmicos de proporciones. De esta manera cuando veamos nuestra web a través de la pequeña pantalla de un móvil todos los elementos de la web se harán más pequeños guardando la proporción entre ellos. El sitio web de GEDiX sigue los criterios de anchos fluidos proporcionales, en lugar de colocarlos mediante píxeles. La plantilla con la que se ha trabajado en WordPress ofrece grandes atributos al Diseño Responsivo del sitio web pero no responde para pantallas de pequeña resolución. Por ello, para estos casos se ha aplicado un plugin que permite la redistribución de la página. Por esta razón, cuando se vea la página a través de un smartphone o una tablet, la distribución de los elementos cambiará su orden. Ver Anexo 01. Creación de Imagen corporativa y Diseño de sitio web (Fase 05) Anexo 03. Manual de uso de sitio web