DISEÑO DEL SITIO WEB Y LA INTRANET DE LA CORPORACIÓN ANTEX S.A.

Transcripción

1 DISEÑO DEL SITIO WEB Y LA INTRANET DE LA CORPORACIÓN ANTEX S.A. Autores Irina Gil León Liatmara Santiesteban García Diseño Informacional Instituto Superior de Diseño

2 DISEÑO DEL SITIO WEB Y LA INTRANET DE LA CORPORACIÓN ANTEX S.A. Autores Irina Gil León Liatmara Santiesteban García Tutora Ailén Maleta Diseño Informacional Instituto Superior de Diseño

3 A mis padres, que tanto esperaron por este momento. A Lismy, la mejor donseng del mundo. A Honki, que no pudo ver el final. Lia Para mis padres Para los que están y los que ya no, para Honki Irina

4 Agradecimientos A mi mamá, por garantizarme el apoyo de todos en Antex. A mi papá, que me acompañó en todos mis altibajos. A Ailén, que aunque le ocasionamos momentos de estrés, siempre nos ayudó. A Adonis, al que también estresamos de vez en cuando, pero nos brinda su apoyo incondicional. A Ernesto y Gisela, que me abrieron sus puertas en el momento crucial. A Liermes y a Jasnaiker, por prestarnos sus conocimientos. A los trabajadores de Antex S.A., por ayudarnos en nuestro proyecto. A todo el KP, por alegrarme los días y mantenerme despierta. A toda mi familia, por apoyarme y preocuparse por mi. A Diana, mi mejor amiga, por siempre aliviarme el estrés. A todos, muchas gracias. 사랑해 Lia A Jasnaiker, gracias por todo. A Erne por estar siempre a mi lado. A Gise, por el catering. A Elisa por el entretenimiento necesario. A mis padres, aunque no sufrieron el proceso me mantuvieron a flote. A Ailen muchas gracias por permanecer con nosotras ante toda circunstancia. A las Pelúas por darnos siempre ese impulso necesario. A Ferriol por su ayuda. Adonis esperamos que nuestro trabajo lo enamore esta vez. Hilda que tenga un lindo bebé. A Pupe y a Olivia que querían salir en los agradecimientos. Y a 드라곤 지, 오빠 사랑해 Irina

5 5 Resumen La Corporación Antex S.A. (Antillana Exportadora) es una sociedad mercantil de derecho privado que pertenece al Sistema Empresarial de las FAR. En la actualidad administra un grupo de empresas en Angola y posee asociaciones en Namibia. Representa, además, a las empresas cubanas en el desarrollo de los negocios en estos territorios. Intranet Central de dicha institución. Se propone la realización de un sistema visual para las aplicaciones, empleándose los mismos recursos gráficos con diferente tratamiento, de manera que contribuya a transmitir una imagen unitaria y sistémica de Antex S.A. Para poder proponer una solución que resolviese sus problemas, se realizó una investigación dirigida a varios aspectos fundamentales: la Corporación Antex S.A., su misión y funcionamiento; las tendencias de diseño actuales en el medio web y las particularidades tecnológicas específicas del proyecto. Los resultados de este estudio arrojaron datos que devinieron en atributos y rasgos utilizados para el desarrollo posterior del proyecto. En este Trabajo de Diploma se llevó a cabo el diseño de la imagen online de Antex S.A. a través del Sitio Web Institucional. La Corporación deseaba fomentar y proyectar su imagen, así como dar a conocer sus servicios hacia el resto del mundo. Además de esto, el cúmulo de tareas y transmisión de información que debe llevar a cabo este tipo de organismo precisa de herramientas y aplicaciones que permitan rapidez en los procesos y economía de recursos materiales. Con motivo de satisfacer esta necesidad se solicita también el diseño de la

6 Introducción 07 Introducción Necesidad 09 Solicitud del Cliente 10 Necesidad 11 Validación de la necesidad 12 Valoración de la necesidad 13 Condicionantes 14 Estrategia de Gestión Problema 16 Problema 17 Objetivos 18 Factores de Diseño (Función) 19 Factores de Diseño (Uso) 21 Factores de Diseño (Tecnológico) 25 Factores de Diseño (Mercadológico) 42 Factores de Diseño (Contextual) 43 Requisitos de Diseño 44 Conclusiones de la etapa Concepto 46 Decisiones Estratégicas 47 Mapa de Contenido (Sitio Web) 48 Árbol de Navegación (Sitio Web) 49 Mapa de Contenido (Intranet) 51 Árbol de Navegación (Intranet) 52 Atributos 53 Rasgos de Estilos 54 Premisas 57 Alternativas 62 Zonificación 64 Concepto Óptimo Proyecto 66 Identidad para web 67 Grillas y Columnas 68 Zonificación 71 Código Tipográfico 72 Prototipos Funcionales (Sitio Web) 90 Prototipos Funcionales (Intranet) 107 Conclusiones 108 Recomendaciones 109 Bibliografía 110 Anexos

7 7 Introducción Antex S.A. La Corporación Antex S.A. (Antillana Exportadora), es una sociedad mercantil de derecho privado; diseñada para realizar operaciones comerciales de importación y exportación, desarrollo del comercio mayorista y minorista, además de prestar servicios en esferas tan sensibles como la salud y otras de vital importancia en el desarrollo económico de cualquier país, como son: la construcción, la pesca en su expresión más técnica, la transportación marítima, agropecuaria, gastronomía y la hotelería por sólo referir algunas. En todos los casos Antex S.A. está apta para ofrecer asistencia técnica especializada con alta calificación, adiestramientos, estudios de mercado, elaboración y ejecución de proyectos, estudios de factibilidad económica, asumir representaciones comerciales y llevar a cabo negocios conjuntos. Se destaca en la labor de esta empresa la profesionalidad de sus técnicos, especialistas y ejecutivos. En la actualidad la Corporación administra un grupo de empresas en Angola y presenta asociaciones en Namibia. Representa además, a las empresas cubanas en el desarrollo de los negocios en Angola.

8 Etapa 1 NECESIDAD

9 9 Solicitud del cliente La Corporación Antex S.A. solicita al Instituto Superior de Diseño (ISDi), la actualización de su Manual de Identidad Visual, respondiendo a la necesidad de renovar su visualidad dada la importancia de dicha imagen en el ámbito de las relaciones con el continente africano. Además solicita el diseño de la Intranet Central y el Sitio Web institucional, con motivo de satisfacer la necesidad de comunicación y divulgación de información de la Corporación para sus clientes en el mercado de Angola y Namibia. La Corporación desea fomentar y proyectar su imagen, así como dar a conocer los servicios educacionales, médicos, técnicos y profesionales cubanos hacia el resto del mundo. Encargo de diseño: > Actualización del Manual de Identidad Visual. > Diseño del Sitio Web Institucional. > Diseño de la Intranet.

10 10 Necesidad La Antillana Exportadora Antex S.A. precisa de consolidar su imagen como una sociedad mercantil que rige las relaciones entre Cuba y Angola. Las direcciones que lo componen necesitan de un medio que permita la comunicación y la divulgación de información entre el personal interno de la Corporación hacia toda la red de centros que administra; así como el intercambio con sus clientes y los cooperantes que operan actualmente en dichas empresas. La necesidad de elevar la efectividad de la gestión de la organización se eleva como un problema de mayor envergadura que la imagen desactualizada de la institución. A raíz de esta problemática y ante un alcance de proyecto demasiado extenso se decide reducir el encargo de diseño y fortalecer la imagen existente con las aplicaciones del Sitio Web y de la Intranet.

11 11 Validación de la necesidad Humanismo Se hace necesario que Antex S.A.sea identificado y reconocido por instituciones y públicos afines con sus objetivos, dada la gran importancia que representa para las relaciones culturales entre Angola y Cuba. Esto permitirá un mayor conocimiento de la historia, las tradiciones, la cultura, la ciencia y otros aspectos de la realidad de este país. Por otro lado, el empleo de la informática es hoy una necesidad reconocida en todas las esferas de la vida, en particular en la empresa moderna, sea productora, comercial o de servicios. Es por eso que en la actualidad se crean múltiples aplicaciones y surgen definiciones de sistemas dentro del mundo informático, tal es el caso de los sitios web, ya sean internos o externos. Sirven, como herramienta de comunicación e interacción con los trabajadores y representan a la Corporación. El Sitio Web se muestra como imagen del centro, actuando como vínculo indisoluble con el entorno social externo, lo mismo sucede con la Intranet, en el ámbito interno. Economía El desarrollo de un proyecto para medio digital se caracteriza generalmente por incurrir en menos gastos, desde el punto de vista económico, comparado con proyectos que requieran de otros materiales y medios para su divulgación. Las soluciones de aplicaciones digitales que propone el presente Trabajo de Diploma, cuenta con el apoyo logístico y económico de la Dirección de Negocios y Proyectos de Antex y el apoyo del personal capacitado para la adecuada implementación y mantenimiento del trabajo. Igualmente, se tendrá en cuenta la infraestructura tecnológica con que cuenta la Corporación, evitando gastos adicionales en su implementación. Sustentabilidad Las aplicaciones web necesitan de la tecnología digital para su funcionamiento, proporcionando al usuario una fuente de información rápida y económica, sin necesidad de recurrir a soportes impresos o procesos productivos que pudieran provocar daños al entorno, por lo que permite satisfacer la creciente demanda de información de los usuarios de una forma segura y consecuente con el medio ambiente. Permite satisfacer la creciente demanda de comunicación y transmisión de información de los usuarios de forma segura y consecuente con el entorno.

12 12 Valoración de la necesidad Consideraciones generales El Sitio Web, con un carácter global elevará a la Corporación a un nivel completamente distinto, brindando información actualizada a todo aquel público interesado en el tema, tanto nacional como internacional. Por su parte la Intranet será una importante herramienta para los trabajadores internos, que brindará un acceso centralizado y coherente a los conocimientos de la empresa, agilizando la divulgación y el intercambio de información.

13 13 Condicionantes Consumo Sitio web Estará dirigido fundamentalmente a empresas extranjeras (Angola, Namibia) y cubanas. Sin embargo, también contará con información de interés para el público nacional (cooperantes, etc.). Funcionando como una plataforma digital que dará a conocer a la Corporación y los servicios que presta. Se adoptará el uso de dos idiomas (español y portugués) con el objetivo de llegar a un mayor nivel de usuarios en países como Angola y Namibia. Para acceder al Sitio Web no es necesario identificarse. Como sitio institucional que es contará con información general de la Antex. Intranet Se dirigirá al público interno de la Corporación. Para acceder a la Intranet no será necesario identificarse, sin embargo para añadir contenido y/o realizar cambios en los mismos se crearán niveles de permisos que requerirán de identificación con nombre de usuario y contraseña. Circulación Distribución en la red Los sitios web están escritos en código HTML (Hyper Text Markup Language), o dinámicamente convertidos a éste, y se acceden aplicando un software conveniente llamado navegador web, también conocido como un cliente HTTP. Se tendrá en cuenta la diversidad existente en la utilización de navegadores web, que operan con diferente motor de renderizado. Los sitios web pueden ser visualizados o accedidos desde dispositivos (computadoras de uso laboral o laptop) con conexión a la intranet de ANTEX, red de gran desarrollo tecnológico, siendo esto de suma importancia para la visualización de la página web y la transmisión eficiente de la información. La Intranet circulará en toda la red de centros de la Corporación. Producción La programación de cada uno de los sitios, para su implementación, será realizada por el personal especializado de la empresa UCID. Posteriormente, los informáticos de Antex serán los encargados del mantenimiento y la actualización de ambos sitios. Se deberá tener en cuenta los requerimientos tecnológicos de la plataforma de montaje Drupal 7, en la cual se confeccionaran el Sitio Web y la Intranet. Las plantillas de las aplicaciones que se generen deben ser compatibles con este sistema.

14 14 Estrategia de gestión Este Trabajo de Diploma abarcará las Etapas de Necesidad, Etapa Problema, Etapa Investigativa, Etapa Concepto y Etapa Proyecto del proceso de diseño. > Etapa Necesidad: Se determina la necesidad real del cliente y se valida el impacto social, económico y sustentable de la solución de diseño. > Etapa Problema: Se especifica el problema de diseño, los objetivos generales y específicos, y el alcance del proyecto. De igual manera se describe el análisis de los factores de diseño para establecer requisitos para las soluciones. > Etapa Concepto: Se genera, evalúa y se selecciona el concepto óptimo. > Etapa Proyecto: Se desarrolla la solución de diseño basado en el concepto óptimo. Se confeccionan los manuales de estilos y el demo funcional. Es un proyecto balanceado. Cuenta con un equipo de trabajo conformado por las diplomantes Liatmara Santiesteban García e Irina Gil León y la tutoría de la D.I. Ailen Maleta. características de las herramientas que utiliza la institución, contando para su implementación con los profesionales pertinentes. Por su parte, La Corporación Antex S.A. ha puesto a disposición de este trabajo la ayuda y apoyo de su Dirección de Negocios y Proyectos y de los informáticos de la UCID, conexión de acceso telefónico a internet para búsqueda y recopilación de información, entre otros recursos. Complejidad del Proyecto La Corporación no cuenta con un sitio web ni una intranet que lo identifique, por lo que el proyecto resulta un trabajo sin precedentes para dicha organización. No obstante a esto, la tipología de este trabajo es conocida por las diplomantes teniendo de su lado bibliografía variada y proyectos anteriores de los cuales se consultará su metodología. Culminará con la elaboración de un Manual de Estilo para el Sitio Web y otro para la Intranet, además del demo funcional del Sitio Web. Las soluciones del proyecto no incurrirán en gastos económicos, pues se desarrollará ajustándose a las

15 Etapa 2 PROBLEMA

16 16 Problema Diseño del Sitio Web y la Intranet de la Corporación cubana Antex S.A. con motivo de promocionarla y completar un conjunto de herramientas para facilitar la labor de sus trabajadores.

17 17 Objetivos Objetivos generales > Diseñar el Sitio Web de la Corporación Antex S.A. > Diseñar la Intranet de la Corporación Antex S.A. Objetivos específicos > Estructurar el contenido del Sitio Web y de la Intranet, para optimizar los procesos de gestión y navegación. >Diseñar un Manual de Estilo que recoja las pautas gráficas del Sitio Web. > Diseñar un Manual de Estilo que recoja las pautas gráficas de la Intranet. > Crear un demo funcional del Sitio Web, para mostrar su diseño y funcionamiento.

18 18 Factores de Diseño Factor Función Misión de un sitio web Brindar al usuario un acceso rápido y simple a la información que necesita y que le motive a explorar el sitio para descubrir nuevas posibilidades de servicios. Difundir las actividades de la institución, potenciando la función de transferencia, la creación de servicios y la vinculación. Los servicios del Sitio Web de ANTEX S.A. y de la Intranet permitirán divulgar información, así como facilitar estrategias de colaboración a través de la interacción y otros servicios propios de las páginas Web; en este sentido, se definieron tres tipologías de servicios: Servicios generales: Serán servicios inherentes a la naturaleza de las páginas Web. > Contactos. > Enlaces. > Buscador. Servicios informativos: Informar y orientar sobre temas de la corporación, lo que incluye los servicios que presta e información de actualidad y relevante para el público. Servicios interactivos participativos: Permitir a los usuarios interactuar con la institución, de manera que estos se convierten en proveedores de información; lo cual garantiza una retroalimentación efectiva. > Encuestas. > Solicitudes.

19 19 Factores de Diseño Factor Uso Clasificación de usuarios Sitio web Los usuarios del Sitio Web accederán para informarse y orientarse sobre temas de la Corporación, lo que incluye sus servicios e información de actualidad y relevancia. El sitio será una herramienta de comunicación e interacción con los trabajadores de la Corporación y representará a la institución en Internet. Necesidades y expectativas de la audiencia: De entrevistas realizadas por la Corporación a la audiencia, devienen sus necesidades y expectativas de información y servicios a ofrecer mediante el Sitio Web Corporativo, que favorecerán la realización del trabajo y mostrarán información de forma virtual ante el mundo mediante internet: > Normativas, procedimientos y caracterización de la institución. > Información sobre Antex.SA. > Empresas Administradas. Usuario 1: Ciudadanos o entidades extranjeras interesados en los servicios que presta la Corporación. Las empresas extranjeras que requieren los servicios de la Corporación ANTEX S.A. son en su mayoría naturales de Angola y Namibia, de habla portuguesa. Estos usuarios poseen una cultura visual alta debido al choque diario con la Web desde disímiles dispositivos, por tanto esperan un alto nivel visual en el diseño y depuración de las páginas del Sitio. Usuario 2: Ciudadanos o entidades cubanos interesados en los servicios que presta la Corporación. La Corporación Antex S.A. representa a nuestro país en Angola fundamentalmente, aunque también cuenta con empresas en Namibia, por lo que puede servir de puente de comunicación para las empresas cubanas que quieran intercambiar con las empresas de estos países.

20 20 Factores de Diseño> Factor Uso Usuario 3: Cooperantes o aspirantes a cooperantes. Antex S.A. exporta fundamentalmente capital humano, y esos son los cooperantes con que cuenta y los que aspiran a trabajar para la Corporación. De ahí la vital importancia de este público, que a través del sitio web podrán conocer sobre la Corporación, además de obtener información de interés sobre los viajes a Angola o Namibia. Clasificación de usuarios Intranet Usuario internos: Trabajadores de Antex S.A. en Cuba, que cuenta con dos ubicaciones: la Casa Matriz y Asistencia Técnica. Para este público la Intranet será una de las vías principales para obtener la información que emplean diariamente, además de contar con servicios y herramientas que agilizan y facilitan su trabajo. Cada Departamento tendrá un responsable encargado de actualizar la información de su área, para garantizar que la intranet cuenta con los datos necesarios para el desempeño laboral de cada área. Necesidades y expectativas de la audiencia: De entrevistas realizadas por la Corporación a los Jefes de cada Departamento devienen sus necesidades y expectativas de información y servicios a ofrecer en la intranet. Ver Anexo 2

21 21 Factores de Diseño Factor Tecnológico Recursos Los softwares disponibles para la realización y maquetación digital, de acuerdo a los conocimientos adquiridos y a las necesidades del cliente son: Adobe Photoshop, Adobe Ilustrator, Adobe Flash, Adobe Dreamweaver y Artister for Drupal, debido a que el sitio web y la intranet, serán montados en el gestor de contenidos CMS Drupal.

22 22 Factores de Diseño> Factor Tecnológico CMS Drupal Drupal es un sistema de gestión de contenido (Content Management System, en inglés, abreviado CMS) modular multipropósito y muy configurable que permite publicar artículos, imágenes, u otros archivos y servicios añadidos como foros, encuestas, votaciones, blogs y administración de usuarios y permisos. Drupal es un sistema dinámico: en lugar de almacenar sus contenidos en archivos estáticos en el sistema de ficheros del servidor de forma fija, el contenido textual de las páginas y otras configuraciones son almacenados en una base de datos y se editan utilizando un entorno Web incluido en el producto. A pesar de que empezó como un pequeño BBS Drupal ha llegado a ser mucho más que sólo un portal de noticias gracias a su arquitectura flexible. Drupal se compone de una infraestructura base y un conjunto de módulos que ofrecen un amplio conjunto de funciones, incluyendo sistemas de comercio electrónico, galerías de fotos y administración de listas de correo electrónico. Es posible añadir módulos de terceros para modificar el comportamiento de Drupal u ofrecer nuevas funciones. Se usa, entre otros, en intranets de compañías, enseñanza en línea, comunidades de arte y administración de proyectos. Muchos piensan que la relevancia de Drupal en las comunidades de usuarios es lo que lo hace destacarse de la competencia, muy conocido por la calidad de su código y por la seguridad que brinda, es estable y de actualización continua, configuración sencilla, instalación ágil, importante cantidad de módulos y temas, excepcional documentación. Drupal se distribuye bajo la licencia GNU GPL, y por lo tanto es software libre, desarrollado y mantenido por una activa comunidad de usuarios. Destaca por la calidad de su código y de las páginas generadas, el respeto de los estándares de la web, y un énfasis especial en la usabilidad y consistencia de todo el sistema. El diseño de Drupal es especialmente idóneo para construir y gestionar comunidades en Internet. No obstante, su flexibilidad y adaptabilidad, así como la gran cantidad de módulos adicionales disponibles, hace que sea adecuado para realizar muchos tipos diferentes de sitio Web. Características generales Búsqueda: Todo el contenido en Drupal es totalmente indexado en tiempo real y se puede consultar en cualquier momento.

23 23 Factores de Diseño> Factor Tecnológico Código abierto: El código fuente de Drupal está libremente disponible bajo los términos de la licencia GNU/GPL. Al contrario que otros sistemas de blogs o de gestión de contenido propietarios, es posible extender o adaptar Drupal según las necesidades. Búsqueda: Todo el contenido en Drupal es totalmente indexado en tiempo real y se puede consultar en cualquier momento. Módulos: La comunidad de Drupal ha contribuido muchos módulos que proporcionan funcionalidades como página de categorías, autenticación mediante jabber, mensajes privados, bookmarks, etc. Personalización: Un robusto entorno de personalización está implementado en el núcleo de Drupal. Tanto el contenido como la presentación pueden ser individualizados de acuerdo las preferencias definidas por el usuario. Enlaces permanentes (Permalinks): Todo el contenido creado en Drupal tiene un enlace permanente asociado a él para que pueda ser enlazado externamente sin temor de que el enlace falle en el futuro. Objetos de Contenido (Nodos): El contenido creado en Drupal es, funcionalmente, un objeto (Nodo). Esto permite un tratamiento uniforme de la información, como una misma cola de moderación para envíos de diferentes tipos, promocionar cualquiera de estos objetos a la página principal o permitir comentarios -o nosobre cada objeto. Autenticación de usuarios: Los usuarios se pueden registrar e iniciar sesión de forma local o utilizando un sistema de autenticación externo como Jabber, Blogger, LiveJournal u otro sitio Drupal. Permisos basados en roles: Los administradores de Drupal no tienen que establecer permisos para cada usuario. En lugar de eso, pueden asignar permisos a un rol y agrupar los usuarios por roles. Gestión de contenido Control de versiones: El sistema de control de versiones de Drupal permite seguir y auditar totalmente las sucesivas actualizaciones del contenido: qué se ha cambiado, la hora y la fecha, quién lo ha cambiado, y más. También permite mantener comentarios sobre los sucesivos cambios o deshacer los cambios recuperando una versión anterior. Plantillas (Templates): El sistema de temas de Drupal separa el contenido de la presentación permitiendo controlar o cambiar fácilmente el aspecto del sitio Web. La Plantilla controlará cómo se visualizará el sitio, el diseño y los colores. Consiste en uno o más archivos en PHP que definen la salida HTML, con uno o más archivos en CSS definiendo las fuentes, colores y otros estilos. Región, Bloque, Menú: Drupal se encuentra dividido en Regiones (regions) que pueden incluir la cabecera, el pie, las barras laterales, la sección principal de contenido. Los Bloques (blocks) es la información que se visualiza en las diferentes regiones, pudiendo tomar la forma de menús (como el menú de navegación) o visualizaciones de módulos (como los contenidos más vistos del foro) o información estática o dinámica que fue creada por un usuario (como eventos). Existen tres menús estándar en Drupal: Enlaces primarios, Enlaces secundarios y Menú de navegación. Los primarios y secundarios son construidos a criterio de los administradores y

24 24 Factores de Diseño> Factor Tecnológico mostrados automáticamente. También se pueden crear menús personalizados mediante la creación de bloques. Sindicación del contenido: Drupal exporta el contenido en formato RDF/RSS para ser utilizado por otros sitios Web. Esto permite que cualquiera con un Agregador de Noticias, tal como NetNewsWire o Radio UserLand visualice el contenido publicado en la Web desde el escritorio. Blogging Agregador de noticias: Drupal incluye un potente Agregador de Noticias para leer y publicar enlaces a noticias de otros sitios Web. Incorpora un sistema de caché en la base de datos, con temporización configurable. navegador y no precisa de ningún software adicional. Plataforma Múltiples idiomas y Localización: Drupal está pensado para una audiencia internacional y proporciona opciones para crear un portal multilingüe. Todo el texto puede ser fácilmente traducido utilizando una interfaz Web, importando traducciones existentes o integrando otras herramientas de traducción como GNU ettext. Administración y Análisis Administración vía Web: La administración y configuración del sistema se puede realizar enteramente con un navegador y no precisa de ningún software adicional. Análisis, Seguimiento y Estadísticas: Drupal puede mostrar en las páginas Web de administración informes sobre referrals (enlaces entrantes), popularidad del contenido, o de cómo los usuarios navegan por el sitio. Registros e Informes: Toda la actividad y los sucesos del sistema son capturados en un registro de eventos, que puede ser visualizado por un administrador. Características de comunidad Comentarios enlazados: Drupal proporciona un potente modelo de comentarios enlazados que posibilita seguir y participar fácilmente en la discusión sobre el comentario publicado. Los comentarios son jerárquicos, como en un grupo de noticias o un foro. Encuestas: Drupal incluye un módulo que permite a los administradores y/o usuarios crear encuestas on-line totalmente configurables. Foros de discusión: Drupal incorpora foros de discusión para crear sitios comunitarios vivos y dinámicos. Libro Colaborativo: Esta característica es única de Drupal y permite crear un proyecto o libro a ser escrito y que otros usuarios contribuyan contenido. El contenido se organiza en páginas cómodamente navegables. Rendimiento y escalabilidad Control de congestión: Drupal incorpora un mecanismo de control de congestión que permite habilitar y deshabilitar determinados módulos o bloques dependiendo de la carga del servidor. Este mecanismo es totalmente configurable y ajustable. Sistema de Caché: El mecanismo de caché elimina consultas a la base de datos incrementando el rendimiento y reduciendo la carga del servidor.

25 25 Factores de Diseño Factor Mercadológico Tendencias en la Web La importancia de la arquitectura tiene relación con el tamaño del sitio y resulta evidente que un sitio de la magnitud del que se pretende para una organización como es ANTEX no puede concebirse sin una estudiada arquitectura. La arquitectura de la propia web requiere atender de muchos aspectos con respecto a usabilidad e interactividad con otros sitios. Fundamentalmente, el aspecto tiempo, que, en lo que a esto se refiere, los usuarios son extremadamente intolerantes a las demoras, sumado al hecho de que a un clic de distancia hay más de mil millones de páginas.

26 26 Factores de Diseño> Factor Mercadológico Visualidad Los arquitectos dedican significativo esfuerzo al diseño del frente y la entrada de un edificio y no es casual. El aspecto visual (sobrio, elegante, recargado, informal o académico), el acceso al interior (escaleras, ascensores, puertas) y la señalización adecuada influyen directamente en la forma en que las personas ingresan y circulan por el edificio. En la percepción de calidad y en su experiencia general los visitantes de un sitio navegan tratando de obtener aquello por lo que ingresaron y se retiran con una sensación (grado de satisfacción) que estará en función del diseño de la página principal y los instrumentos de navegación disponibles. Los diseños cargados, inconsistentes y complejos dan una impresión poco profesional y no reflejan el esfuerzo e inversión que se realiza en imagen institucional.

27 27 Factores de Diseño> Factor Mercadológico Atención A lo largo de la dimensión vertical: Los usuarios prefieren desplazarse a lo largo de la página a tener que acceder a otra para continuar la lectura de un artículo extenso, siempre y cuando este sea de su interés. Aun así el material más importante para el usuario y para el cliente debe encontrarse en la zona superior de la página. A lo largo de la dimensión horizontal: La parte más importante de la página se localiza en el área superior izquierda, ya que es justo ahí donde se fija la vista en cuanto el usuario visita un sitio. La lectura se hace de izquierda a derecha, de arriba hasta abajo, evitando el desplazamiento horizontal.

28 28 Factores de Diseño> Factor Mercadológico Lectura A los usuarios no les gusta desplazarse verticalmente por páginas muy extensas, salvo que el material sea de gran valor y lo más probable en ese caso es que lo imprima. El desplazamiento horizontal es aún más odiado por los usuarios con justa razón y por ello deben evitarse a toda costa los diseños que no se ajusten al ancho de pantalla. La lectura en pantalla es un 25% más lenta que en el papel fundamentalmente porque la calidad de los monitores es aún baja. Existe un cierto hábito de zapping que lleva al usuario a no detenerse demasiado en una página y pasar rápidamente a otras. Los usuarios generalmente no leen las páginas palabra por palabra; en cambio, examinan la página, escogiendo palabras individuales y frases. El costo de conexión alienta esta conducta de hojear muchas páginas en el menor tiempo posible para luego leerlas off-line o imprimirlas. Texto El texto debe ser legible y entendible, además de darle tiempo suficiente al usuario para leer y usar el contenido. Para los enlaces hipertextuales se debe usar texto que tenga sentido leído fuera de contexto. Se debe proveer de alternativas textuales para cualquier contenido no textual, para que pueda ser cambiado en otras formas que los usuarios puedan necesitar como impresión, Braille, símbolos. No se debe codificar la información con tamaños de fuente absolutos sino que se deben utilizar tamaños relativos.

29 29 Factores de Diseño> Factor Mercadológico Tipografía Varios estudios han demostrado que sobre papel impreso las fuentes serif son más legibles, ya que esos pequeños remates en los extremos dan más información sobre los caracteres y facilitan la lectura. Sin embargo en los monitores, por su menor resolución en comparación con el papel, los pequeños remates aparecen menos definidos y lo que hacen es dificultar la lectura, por lo tanto, en la web es más recomendable utilizar fuentes sansserif. El ancho de la línea Cuanto menor es la longitud de línea, mayor es la velocidad de lectura (esta es la razón de que los periódicos presentan su información en columnas). Una mayor longitud de línea requiere de un salto de mayor longitud de un punto de fijación ocular al siguiente. A mayor longitud del salto, más inexactitud en la siguiente fijación y por tanto mayor será la dificultad de lectura. Aunque no existe una recomendación única en cuanto a la longitud máxima de línea se suele hablar máximo correcto entre los caracteres.

30 30 Factores de Diseño> Factor Mercadológico Espacio entre letras (kerning) El espacio entre las letras de una misma palabra (kerning) no debería ser siempre fijo. Cuando este espacio se ajusta correctamente, los textos son más legibles y el aspecto estético es mucho mejor. El kerning es lo que da ese aspecto tan profesional a los libros impresos. Sin embargo, en los navegadores es imposible de regular (incluso en algunos programas de edición tampoco), ya que no ofrecen esta posibilidad. Fuentes proporcionales y no proporcionales No debemos confundir el kerning con el ajuste del espacio que ocupa cada letra. Existen dos tipos de fuente: las proporcionales y las no proporcionales (monospaced). En las proporcionales este espacio depende del caracter, por ejemplo una i ocupa menos espacio que una M. En las fuentes no proporcionales todos los caracteres ocupan el mismo espacio. Por ejemplo: La mayoría de los medios escritos: periódicos, libros y websites usan fuentes proporcionales. Arial es una fuente proporcional Courier New es una fuente no proporcional Las no proporcionales (monospaced) son adecuadas para el mostrar muchos datos ya que ofrecen lecturas mas claras en listas de datos, tablas, calendarios, etc... También son más adecuadas para la entrada de datos en las cajas de texto de formularios porque es mas fácil ver los errores por la mayor separación entre letras. El espacio en blanco entre varias letras, aparte de escogiendo el tipo de fuente puede controlarse mediante la utilización de hojas de estilo.

31 31 Factores de Diseño> Factor Mercadológico Color y contraste de fondo La combinación más adecuada para el 90% de los casos es texto negro sobre fondo blanco. En caso, de utilizar color en el fondo, es aconsejable utilizar colores suaves y claros y siempre un color de texto oscuro, por supuesto, las cabeceras de un sitio web son una excepción. También se dee evitar los patrones de fondo que interfieran con la lectura. Se debe usar más de un tipo de decoración para los enlaces, no basta solo con el color.

32 32 Factores de Diseño> Factor Mercadológico Negritas Las negritas (bold) deben utilizarse solo para enfatizar algunas palabras, resaltar puntos clave dentro de la información o resaltar alguna frase de gran importancia. Si son utilizadas correctamente ayudan a hojear rápidamente el texto y facilitan la rápida comprensión de la información. Las negritas llaman poderosamente la atención dentro de un texto e incluso distraen seriamente, por ello nunca se debe abusar de ellas o emplearlas de modo puramente decorativo. En algunas webs por ejemplo se suele escribir en negrita el nombre de la empresa siempre que aparece, lo que no aporta absolutamente nada.

33 33 Factores de Diseño> Factor Mercadológico Tamaño de la fuente Un tamaño de entre 10 y 13 puntos suele ser el más adecuado para la mayoría de textos en la web, a excepción de títulos y nombre de apartado, en los que perfectamente puede utilizarse un tamaño superior.

34 34 Factores de Diseño> Factor Mercadológico Mayúsculas Las mayúsculas son mucho más difíciles de leer que las minúsculas por ello no son recomendadas para textos largos sino para palabras sueltas. Su capacidad de resaltar dentro de un texto las hacen un recurso muy valioso para captar atención sobre un elemento de información.

35 35 Factores de Diseño> Factor Mercadológico Otras valoraciones > Un documento no debería utilizar más de dos fuentes diferentes. > Las cursivas son muy poco legibles y son poco recomendables, solo deberían utilizarse para unas pocas palabras y en caso necesario con fuentes de tamaño suficientemente grande. > El subrayado es un recurso que en papel impreso se utiliza para enfatizar, sin embargo en la web no se debe emplear con este objetivo ya que da lugar a confusión con los vínculos. > Las viñetas (bullets) y sangrías (indent) son recursos útiles para estructurar la información, separar conceptos, subordinar unos a otros, crear dependencias, etc. Bien utilizadas mejoran la comprensión y facilitan la lectura de un texto.

36 36 Factores de Diseño> Factor Mercadológico Imágenes en la web Uno de las principales decisiones a la hora de incluir gráficos en tu web será elegir el formato correcto para cada tipo de imagen de manera que logres una correcta relación entre la calidad visual de la misma y su peso en Kb. Limite el tamaño total de todas las imágenes a 50Kbs. Cuando hablamos de formatos de imagen en la web, hay que limitarse a tres, ya que son los únicos soportados por los navegadores de internet. En el Anexo 3 se muestran algunas pruebas en donde se observa como afecta a cada tipo de imagen el formato de exportación elegido tanto en calidad de la imágen como en peso.

37 37 Factores de Diseño> Factor Mercadológico GIF (Graphic Image File Format): Es el formato más adecuado para aquellas imágenes sencillas, de formas simples y en las que no existe un elevado número de colores. Permite la animación simple. Sus características son: > Número de colores: de 2 a 256 de una paleta de 24 bits. > Formato de compresión sin pérdida basado en el algoritmo LZW. > Carga progresiva en el navegador. > Máscara de trasparencia de 1 bit. > Permite la animación simple. Es el formato más adecuado para aquellas imágenes sencillas, de formas simples y en las que no existe un elevado número de colores. JPEG (Joint Photographic Experts Group): Fue diseñado para la compresión de imágenes fotográficas, basándose en el hecho de que el ojo humano no es perfecto y no es capaz de captar toda la información que se puede almacenar el una imagen de 24 bits. El formato JPEG intenta eliminar la información que el ojo humano no es capaz de distinguir, por eso se dice que posee un formato de compresión con pérdida, porque elimina información. Sus características son: > Número de colores: 24 bits color o 8 bits B/N > Elevado grado de posibilidad de compresión. > Formato de compresión con pérdida. > No permite trasparencia, ni canal alfa. > No permite la animación. Por regla general, es el más indicado para aquellas imágenes que son fotografias. PNG (Portable Network Graphics): Proporciona un formato compresión de imágenes sin pérdida. El más adecuado para imágenes de elementos renderizados, ya que se logran unos degradados muy suaves y una buena definición de las líneas. Sus características son: > Color indexado hasta 256 colores y TrueColor hasta 48 bits por pixel. > Mayor compresión que el formato GIF (+10%) > Compresión sin pérdida. > Canal alfa. (Transparencia variable) > No permite animación.

38 38 Factores de Diseño> Factor Mercadológico Ventanas Pop-Ups Se usan con la teoría de que mantienen a los usuarios en el sitio. Pero, además del mensaje hostil que va implícito en la apropiación de la máquina del usuario, desactivan el botón Atrás del navegador, que es la forma normal en que los usuarios vuelven a las páginas visitadas anteriormente.

39 39 Factores de Diseño> Factor Mercadológico Navegación Proveer herramientas de navegación que ayuden al usuario a encontrar contenidos, a determinar dónde se encuentra y las páginas que ya ha visitado. Menús desplegables Conservan el espacio de la pantalla y los usuarios saben tratar con ellos cuando ellos los encuentran.

40 40 Factores de Diseño> Factor Mercadológico Multimedia El uso de multimedia en la web debe cumplir una función clara de agregar valor al contenido. De lo contrario es preferible descartar el recurso.

41 41 Factores de Diseño> Factor Mercadológico Compatibilidad A los usuarios no les gusta desplazarse verticalmente por páginas muy extensas, salvo que el material sea de gran valor y lo más probable en ese caso es que lo imprima. El desplazamiento horizontal es aún más odiado por los usuarios y por ello deben evitarse a toda costa los diseños que no se ajusten al ancho de pantalla, por lo que en vez de usar tamaños fijos se debe trabajar con porcentajes del espacio disponible.

42 42 Factores de Diseño Factor Contextual Sitio web El Sitio Web de ANTEX S.A. permitirá su acceso nacional e internacional a través de internet. En el contexto cubano su acceso se realiza desde institutos de investigación, hospitales, escuelas, empresas y los propios domicilios de profesionales, entre otros. En resumen, desde donde cualquier afiliado a un organismo nacional pueda acceder a información y especificaciones propias de la empresa para la exportación de su fuerza de trabajo. En estos centros las herramientas tecnológicas existentes para acceder al sitio varían en cuanto a su configuración (sistema operativo instalado, navegadores utilizados, resolución de pantalla); en algunos casos cuentan con tiempo de máquina limitado y no presentan niveles adecuados de actualización. Para los trabajadores que acceden desde sus viviendas las herramientas varían de igual manera. Su acceso a la Red es a través de conexiones de acceso telefónico, contando con una velocidad de conexión más lenta. Intranet El acceso a este sitio será sólo desde la Corporación Antex S.A. (en Cuba), para los trabajadores de la entidad en la propia institución.

43 43 Requisitos de Diseño Funcionales y tecnológicos >Respetar los estándares internacionales de usabilidad y accesibilidad que emite la World Wide Web Consortium (W3C). > Diseñar en función de la tecnología utilizada por el CMS Drupal. > Utilizar tipografías estándar de los Sistemas Operativos más comunes (Windows y Macintosh), para garantizar la correcta visualización de los contenidos. > Determinar el ancho de la página de cada uno de los sitios en función de la resolución de pantalla estándar (1024 x 768 píxeles). > Utilizar las imágenes en formatos:.jpg,.png,.gif con una resolución de 72 píxeles por pulgada (ppp). > Los sitios deben visualizarse en cualquier navegador web sin necesidad de instalar software adicional. > Se utilizará servicios de búsqueda general en ambos sitios. > Será usado el sistema RGB, ya que la pantalla del ordenador será el único soporte de reproducción de los productos (excepto los documentos creados para imprimir que utilizarán el sistema CMYK). > Las imágenes no excederán los 80Kbs. Uso > Utilizar un sistema de navegación global (SNG). > La organización de la información debe permitir el fácil acceso a los contenidos de interés de los públicos. > Los contenidos deben tener una visualidad eficiente en cuanto a legibilidad. > La búsqueda debe resultar de fácil acceso desde cada una de las páginas del sitio. > Se incluirán opciones como el aumento del puntaje de la tipografía y del contraste de los colores para facilitar la accesibilidad a la mayoría de los usuarios. > Es necesario que el usuario pueda realizar el mayor número de tareas con la menor cantidad de acciones posibles (clics). > Los recursos visuales deben ser pertinentes con los atributos y signos de identidad pautados y deberán representar el prestigio de la institución. > Se debe facilitar el acceso a la información de manera que se pueda navegar de una forma sencilla e intuitiva. Mercadológico > El diseño debe hacerse en función de que las páginas sean: navegables, concisas y claras. > Uso de colores suaves y claros y siempre un color de texto oscuro. > El texto debe ser legible y entendible. > Uso de un puntaje entre 10 y 13 puntos para los cuerpos de texto. > Uso de menos de dos familias tipográficas. Contexto > El diseño debe ser accesible para cualquiera de las configuraciones que puedan tener los usuarios navegadores resoluciones de pantalla, etc.) > Los diseños deben ser adaptables a diferentes tamaños de pantalla: tamaños de fuentes y de tablas porcentuales.

44 44 Conclusiones de la etapa La Corporación Antex S.A. es actualmente el máximo exponente de la actividad cubana en Angola. Su quehacer constante en este ámbito ha hecho que gane en importancia como organización. El flujo de información que opera actualmente en Antex S.A. debe ser traducido a la navegación de su Intranet Central. Además su Sitio Web Institucional debe ser reflejo del prestigio y nivel de desarrollo de la Corporación así como de sus actividades en el ámbito internacional. Esta etapa nos permitió conocer con profundidad las características del medio digital, específicamente Internet, sus posibilidades de comunicación y requisitos tecnológicos, proporcionando una base argumental para el desarrollo de este proyecto. El hecho de no poseer precedentes en la web no nos exenta de un análisis de las tendencias actuales, tanto nacionales como internacionales. Todo esto aportó información acerca de la forma de operar contenido en la web. Las deficiencias planteadas por los propios usuarios y el estudio de referentes nacionales e internacionales de otras organizaciones, permitió conocer los recursos más utilizados y la forma de manejar la información. Estos factores llevaron a la conclusión de que las soluciones de diseño resultantes de este proyecto tenían que partir de una renovación total del diseño en el aspecto formal y en la organización de la información, de acuerdo a las nuevas tendencias del medio web y en función de los contenidos para lograr una navegación más eficiente. Específicamente en el diseño de páginas web predominan las fuentes sans serif. Existe una marcada tendencia, de acuerdo al análisis sincrónico, del uso del rotador de imágenes para presentar contenidos como noticias y anuncios de eventos.

45 Etapa 3 CONCEPTO

46 46 Decisiones estratégicas Se creará un sistema que aporte unidad y homogeneidad al sitio web y a la intranet de Antex S.A., a través del empleo de los mismos recursos gráficos. El sitio web tiene como objetivo de comunicación promocionar a la Corporación Antex S.A. y los servicios que brinda a través de cada una de las empresas que administra. Además de facilitar el trabajo de la Dirección de Asistencia Técnica, que trabaja directamente con los cooperantes y aspirantes, brindando información de interés para los mismos. Por su parte, la intranet persigue el objetivo de agilizar la transferencia de información entre todas las áreas departamentales de Antex S.A. Igualmente reúne un grupo de herramientas informáticas y sistemas de información que facilita el trabajo y evita pérdidas de tiempo.

47 47 Mapa de contenido_sitio Web BUSCAR IDIOMA Español Portugués VUELOS INICIO Rotador Bienvenida Líneas de negocios Noticias QUIÉNES SOMOS Misión Visión Política de calidad Valores compartidos DIRECTIVOS Trayectoria laboral Formación Idiomas que domina ANTEX ANGOLA Línea de negocios Datos Generales Galería IMBONDEX COMERCIO GENERAL Línea de negocios Datos Generales Galería IMBONDEX TURÍSTICA Línea de negocios Datos Generales Galería MEDITEX Línea de negocios Datos Generales Galería IMBONDEX CONSTRUCCIONES Y MATERIALES DE CONSTRUCCIÓN LDA. Línea de negocios Datos Generales Galería ANTEX PROYECTOS, FISCALIZACIÓN Y CONSULTORÍA Línea de negocios Datos Generales Galería CONTÁCTENOS COOPERANTES Listado Información DIRECTORIO Presidencia Jefatura de Despacho Negocios Economía Jurídico Recursos Humanos Asistencia Técnica Informática Operaciones Proyectos LEGISLACIONES Ley de inversión privada Pautas aduaneras Decreto Ley No.124 Decreto Ley No.180 ENLACES Embajada de Cuba en Angola AngoNoticias Jornal de Angola AngolaPress RAdio Nacional de Angola Cámara de comercio de Angola Portal del Gobierno de Angola Ministerio de Finanzas Angola Periódico Granma Periódico Granma Internacional Cámara de Comercio Cubadebate Banco Central de Cuba Ministerio de Finanzas y Precios Aduana General de la República

48 48 Árbol de navegación_sitio Web Rotador INICIO Idioma Buscar Vuelos Quiénes Somos Antex Angola Imbondex Comercio General Imbondex Turística Meditex Imbondex Construcciones y Materiales de construcción Lda. Antex Proyectos, Fiscalización y Consultoría Cooperantes Directorio Legislaciones Enlaces Contáctenos Directivos Nota: Para ver el contenido de las páginas del Sitio Web vea el Anexo 4

49 49 Mapa de contenido_intranet CORREO CHAT Planificación de tareas AvilaDOC Sistema de Nóminas SCAT Web ENLACES - CUBA Periódico Granma Periódico Granma Internacional Cámara de Comercio Cubadebate Banco Central de Cuba Ministerio de Finanzas y Precios Aduana General de la República ENLACES Embajada de Cuba en Angola AngoNoticias Jornal de Angola AngolaPress Radio Nacional de Angola Cámara de comercio de Angola Portal del Gobierno de Angola Ministerio de Finanzas Angola INICIO Cumpleaños Menú Comedor Novedades Noticias PRESIDENCIA Nosotros Misión Visión Objetivos de trabajo Directivos Empresas Administradas DESARROLLO Y NUEVOS NEGOCIOS Directorio Industrial de Productores de Cuba ASISTENCIA TÉCNICA Trámites Vuelos ECONOMÍA Plan de aportes Indicadores Controles RECURSOS HUMANOS Calidad Personal Chequeos Médicos Vacaciones SST Perfeccionamiento Empresarial Control Interno Prevención de riesgos Sistemas de Pagos Comisiones-Miembros INFORMÁTICA Estaciones de trabajo Software JURÍDICO Reseña Antex S.A. Actualizaciones Base Reglamentaria Consejo de Dirección Contratos Reclamaciones Legislaciones Empresas de coverturas Inmuebles y Terrenos Litigios legales OPERACIONES Logística de Cooperantes Servicios Portadores Energéticos Transporte ORGANIZACIONES UJC PCC CTC

50 50 Mapa de contenido_intranet PROFORMAS DE DOCUMENTOS Carta Carta a la Jefatura Nota Informativa Valija Mensajes a Angola Documentos Rectores Certificos de Documentos Legales Entrega de Documentos y Cheques Plan de trabajo Informe Temas de la reunión Hoja de asistencia DIRECTORIO Presidencia Jefatura de Despacho Negocios Economía Jurídico Recursos Humanos Asistencia Técnica Informática Operaciones Proyectos BIBLIOTECA Por Título Pot Autor GALERÍA Antex S.A. Imbondex Comercio General Imbondex Turística Meditex Imbondex Construcciones Antex Proyectos

51 51 Árbol de navegación_intranet INICIO Avila DOC Planificación de Tareas Sistema de Nóminas SCAT Web Correo Chat Enlaces - Cuba Enlaces - Angola Presidencia Directivos Empresas Administradas Negocios Asistencia Técnica Economía Recursos Informática Asesoría Humanos Jurídica Operaciones Proformas de Documentos Organizaciones Directorio Biblioteca Galería Nota: Para ver el contenido de las páginas de la Intranet vea el Anexo 5

52 52 Atributos Del análisis de referentes estéticos > Predominio del empleo de un tinte acompañado de escala de grises. > Predominio del identificador justificado a la izquierda. > Coherencia entre el identificador y los rasgos de estilo de los sitios. > La mayoría de los sitios emplean tipografía serif o sans serif, indistintamente, logrando el contrataste tipográfico mediante diferentes valoraciones, puntajes y color. Atributos generales > Profesionalidad > Sobriedad > Contemporaneidad > Humano > Confiable Atributos específicos > Intercambio > Colaborativo > Empresarial > Cubano > Integrado > Especializado Atributos a potenciar > Intercambio: La Antillana Exportadora Antex S.A. es una empresa dedicada al intercambio de conocimientos y servicios con el continente africano. > Profesional: Antex S.A. cuenta con una dinámica y eficiente red de conocimientos de alto valor profesional y humano. > Colaborativo: Antex S.A. trabaja para construir colectivamente un ecosistema de personas, servicios y fuentes de información para la salud, la educación, la contrucción, entre otros; desplegando las capacidades productivas de sus activos en el entorno angolano.

53 53 Rasgos de estilos Generales Profesional Colaborativo-Intercambio > Empleo de colores neutrales (gama de grises). > Utilización del color blanco. Según el factor mercadológico, la mejor combinación para una legibilidad adecuada son fondos claros con tipografías oscuras. > Adecuada jerarquización de los contenidos. > Buena calidad fotográfica y pertinencia de las imágenes. > Precisión en la ubicación de los elementos. > Síntesis de elementos. > Formas básicas y depuradas. >Transparencias en los elementos gráficos. > Tipografía Sans Serif. > Empleo de imágenes en primer y primerísimo plano. > Formas abiertas aludiendo al imagotipo del identificador. > Superposición de planos y/o elementos gráficos. > Predominio de imágenes que denoten el espíritu colaborativo que caracteriza la Red. > Empleo de imágenes donde aparezca la forma humana, pueden ser las manos como símbolo de solidaridad.

54 54 Premisas Premisa 1 Partiendo de una perspectiva empresarial, transmitir sobriedad, respeto y prestigio, como base para la creación de nuevas relaciones comerciales; respetando las características de la identidad. Premisa 2 Orientado al intercambio humano, donde el factor importante es el hombre. Denotando no solo solidaridad, sino también el intercambio cultural, de tradiciones e idiosincrasia, sin desligarse de las características de la identidad y el concepto que potencia.

55 55 Selección Premisa 1 Partiendo de una perspectiva empresarial, transmitir sobriedad, respeto y prestigio, como base para la creación de nuevas relaciones comerciales; respetando las características de la identidad. Premisa 2 Orientado al intercambio humano, donde el factor importante es el hombre. Denotando no solo solidaridad, sino también el intercambio cultural, de tradiciones e idiosincrasia, sin desligarse de las características de la identidad y el concepto que potencia.

56 56 Selección Fundamentación de la selección Generalmente los sitios web institucionales tienden a ser sobrios. Sin embargo, es de interés de la Corporación Antex S.A. promover el intercambio solidario entre pueblos hermanos, ya que presume de que su principal fortaleza es el capital humano. Debido a esto, en el Sitio se potenciará la labor humana, sin dejar de proyectar el prestigio y respeto que inspira la Corporación y el concepto de exportación que trae consigo la imagen identitaria de la misma.

57 57 Alternativas Elementos de interfaz Cabezal > Simplicidad en el uso de recursos gráficos. > Fondos planos. > Identidad en el extremo superior izquierdo.

58 58 Alternativas Elementos de interfaz Menú > Empleo de menús tanto en posición vertical, como horizontal. > Utilización del color y los recursos gráficos para la diferenciación de la navegación y los contenidos. > Jerarquización de los niveles de navegación.

59 59 Alternativas Elementos de interfaz Rotador > Tendencia actual en el diseño web. > En el Sitio Web de Antex S.A. se empleará para mostrar las líneas de negocios de las Empresas Administradas, funcionando además como botón, hacia la página de la empresa a la que pertenezca la imagen seleccionada.

60 60 Alternativas Elementos de interfaz Pie de página > Tienden a ser de gran tamaño. > Generalmente utilizado para el mapa del sitio, grupos de enlaces, así como para definir la propiedad del sitio.

61 61 Alternativas Elementos de interfaz Íconos > Empleo de formas simples y geométricas. > Sobre fondo de color. > Uso de los colores corporativos.

62 62 Zonificación LEYENDA Cabezal Navegación interna Imagen de logo Contenido de página

63 63 Zonificación LEYENDA Cabezal Navegación interna Imagen de logo Contenido de página

64 64 Capítulo 03 > Etapa Concepto > Premisas Concepto óptimo Basándose en las características de la Corporación se decidió orientar el concepto en enfatizar el trabajo humano y de cooperación en los diferentes servicios que presta la Corporación Antex S.A. Se potencia la presencia de la imagen humana, o partes de ella, en acción; el empleo de íconos, tipografía sans serif y gráficas de planos y líneas rectas basados en el imagotipo. La gama cromática estará en función, fundamentalmente de realzar la imagen de la identidad. Para esto se escogió la tercera variante como la más idónea para desarrollar. Para lograr mayor uniformidad en la imagen online de Antex S.A., la intranet se basará, conceptualmente, en la misma variante escogida para el sitio web, pero con un tratamiento diferente, empleando formas y colores planos, sin uso de degradados.

65 Etapa 4 PROYECTO

66 66 Identidad para web Identidad Visual original Versión de la Identidad para el Sitio Web ANTILLANA EXPORTADORA La Corporación Antex S.A. no contempla en su Manual de Identidad Visual actual ninguna versión de su identificador para el ámbito digital. La siguiente versión ha sido creada específicamente para su Sitio, teniendo en cuenta que la web posee códigos visuales característicos de ese medio, atendiendo a las nuevas tendencias. Se recomienda que esta nueva versión sea utilizada específicamente para el entorno digital, ya que para esto fue concebida. Para la Intranet se usará su variante en negativo, donde tanto el imagotipo como el logotipo son blancos, mientras que el fondo adopta el color azul de la Identidad. ANTILLANA EXPORTADORA Versión de la Identidad para la Intranet ANTILLANA EXPORTADORA

67 67 Grillas y columnas 10px 960px ancho de página con 12 columnas 60px Ancho de Página Todos los monitores relativamente modernos soportan al menos una resolución de 1024 x 768 px, 960 es divisible por una gran variedad de números pares e impares, lo que hace que este ancho de página sea muy flexible en cuanto a la organización de los diferentes elementos en la página. Columnas Se emplea una grilla vertical de 12 columnas con 60 px de ancho cada una. La distancia entre las columnas es de 10 px de ancho por unidad.

68 68 Zonificación Sitio Web Para todas las pantallas Intranet Para todas las pantallas

69 69 Zonas Encabezado Navegación (Menú Principal) Rotador Sitio Web Las páginas se visualizarán centradas en el navegador. El color de fondo de la zona de cabecera y pie de página alcanzará el 100 % de ancho del navegador. Navegación (Menú Secundario) Contenido Navegación (vínculos a páginas interiores del sitio)

70 70 Zonas Encabezado Navegación (Menú Secundario) Intranet Las páginas se visualizarán centradas en el navegador. El color de fondo del pie de página alcanzará el 100 % de ancho del navegador. Navegación (Menú Principal) Contenido Navegación (vínculos a páginas interiores de la intranet) Pie de página

71 71 Código tipográfico <VERDANA> ABCDEFGHIJKLMNÑOPQRSTUVWXYZ #* ABCDEFGHIJKLMNÑOPQRSTUVWXYZ #* ABCDEFGHIJKLMNÑOPQRSTUVWXYZ #* ABCDEFGHIJKLMNÑOPQRSTUVWXYZ #* Bold Bold Italic Regular Italic Familia tipográfica Para el diseño de sitios web se deben usar tipografías instaladas por defecto en los ordenadores y que faciliten la lectura del usuario en una patalla. Como código tipográfico en la web, se emplea la Verdana en sus diferentes variantes disponibles por defecto en el sistema para los contenidos de las páginas, esta familia tipográfica garantiza una correcta legibilidad y rendimiento. Se escoge esta tipografía basándose en sus siguientes características: > Diseñada para medio digital. > Buen rendimiento a puntajes pequeños en pantalla. > Legible a baja resolución. > Abundante altura (X-height). > Abundante espacio entre cada letra. > Abundante ancho dentro de cada letra.

72 Sitio Web PROTOTIPOS FUNCIONALES

73 73 Inicio

74 74 Inicio

75 75 Quiénes somos

76 76 Quiénes somos

77 77 Contáctenos

78 78 Contáctenos

79 79 Contáctenos

80 80 Empresas Administrdas

81 81 Empresas Administradas

82 82 Cooperantes

83 83 Legislaciones

84 84 Enlaces

85 85 Directivos

86 86 Directivos

87 87 Galería

88 88 Ventana Modal

89 89 Error 404

90 Intranet PROTOTIPOS FUNCIONALES

91 91 Inicio

92 92 Asesoría Jurínica (no registrado)

93 93 Asesoría Jurínica (registrado)

94 94 Proformas de Documentos

95 95 Directorio (Presidencia)

96 96 Directorio (Asistencia Técnica)

97 97 Biblioteca

98 98 Biblioteca (Título)

99 99 Biblioteca (Autor)

100 100 Galería

101 101 Galería

102 102 Galería (imagen ampliada)

103 103 Acceder

104 104 Registrarse