Análisis de estructura y diseño en sistemas de comercio electrónico (e-commerce) y su aplicación a un caso concreto: "Benlloch Soler, Casa del feriante"

UNIVERSIDAD POLITECNICA DE VALENCIA ESCUELA POLITECNICA SUPERIOR DE GANDIA Licenciatura en Comunicación Audiovisual “Análisis de estructura y diseño en sistemas de comercio electrónico (e-commerce) y su aplicación a un caso concreto: Benlloch Soler, Casa del feriante” TRABAJO FINAL DE CARRERA Autor/es: José Daniel López Rubio Director/es: Dra. Teresa Magal Royo GANDIA, 2012 Índice 1. Introducción ........................................................................................................................................ 7 1.1. Idea. La conceptualización del proyecto. ...................................................................... 7 1.2. Origen y definición de internet y comercio electrónico ............................................... 8 1.2.1. Ventajas y desventajas del comercio electrónico ............................................... 10 1.3. Metodología escogida y contenido ............................................................................. 11 1.4. Objetivos ..................................................................................................................... 12 2. Conociendo al cliente y al usuario .................................................................................................... 13 2.1. La cultura de imagen de la empresa. .......................................................................... 13 2.2. Sector empresarial ...................................................................................................... 13 2.2.1. Ventajas y Desventajas de las pymes .................................................................. 14 2.2.2. Las pymes familiares y sus limitaciones .............................................................. 15 2.2.3. La pyme y el comercio electrónico ...................................................................... 15 2.2.4. La reputación en las pymes. ................................................................................ 16 2.3. A cerca de la empresa Benlloch Soler. ........................................................................ 17 3. Estrategias comunicativas básicas de sitios de e-commerce ........................................................... 18 3.1. Análisis del público objetivo y cliente final ................................................................. 18 3.2. Estudio de pautas de accesibilidad según recomendaciones de estándares web ...... 20 3.2.1. ¿Qué es la Accesibilidad Web? ............................................................................ 20 3.2.2. ¿Por qué la Accesibilidad Web es importante?................................................... 20 3.2.3. Hacer la Web y el sitio web Accesible ................................................................. 21 3.2.4. Evaluación de la accesibilidad de un sitio Web ................................................... 22 3.3. Definir los contenidos informativos de la aplicación. ................................................. 22 3.4. Análisis gráfico y visual de las plataformas que sirven de base del comercio electrónico............................................................................................................................... 25 4. Planificación del trabajo ................................................................................................................... 31 4.1. Desarrollo conceptual de la propuesta. ...................................................................... 31 4.2. Enfoque visual y conceptual partiendo de la imagen gráfica desarrollada. Desarrollo físico del sitio. .......................................................................................................................... 31 4.2.1. El diseño gráfico en los medios digitales ............................................................. 31 4.2.2. Desarrollo de la aplicación web .......................................................................... 32 4.2.3. Comunicación digital ........................................................................................... 32 4.2.4. Jerarquía de los contenidos................................................................................. 33 4.2.5. Espacios de trabajo ............................................................................................. 33 4.3. Enfoque de funcionalidad y navegabilidad. ................................................................ 33 4.3.1. Funcionalidad y legibilidad .................................................................................. 33 4.3.2. Interactividad ...................................................................................................... 34 4.3.3. Navegación .......................................................................................................... 34 4.3.4. Utilización ............................................................................................................ 35 4.3.5. Condicionantes tecnológicos............................................................................... 36 4.3.7. El reticulado ......................................................................................................... 37 4.3.8. Las agrupaciones ................................................................................................. 38 4.3.9. Organización de la página ................................................................................... 38 4.3.10. Las alineaciones ................................................................................................... 39 4.3.11. El equilibrio entre contenidos ............................................................................. 40 4.3.12. La jerarquía visual ................................................................................................ 40 4.3.13. Los códigos cromáticos ....................................................................................... 41 4.3.14. Elementos textuales ............................................................................................ 41 4.4. Creación de las páginas web HTML/ PHP/CSS ............................................................ 41 4.4.1. HTML ................................................................................................................... 42 4.4.2. PHP ...................................................................................................................... 43 4.4.3. Hojas de estilo en cascada (CSS) ......................................................................... 44 4.5. Presentación de la propuesta preliminar al cliente para su aprobación. Verificación y revisión posterior. ................................................................................................................... 46 5. Conclusiones...................................................................................................................................... 52 5.1. Cumplimiento de los objetivos .................................................................................... 52 5.2. Conclusiones personales ............................................................................................. 52 6. Bibliografía ........................................................................................................................................ 53 Análisis de estructura y diseño en sistemas de comercio electrónico (e-commerce) y su aplicación a un caso concreto: “Benlloch Soler, Casa del feriante” José Daniel López Rubio 7 1. Introducción Finalizado el último curso de Comunicación Audiovisual este trabajo final de carrera supone una puesta en práctica de los conocimientos, habilidades y aptitudes adquiridas a lo largo de los estudios. Con el desarrollo de las tecnologías de la comunicación surge un nuevo escenario comunicativo que se define como digital, interactivo y multimedia. Es precisamente la comunicación multimedia el campo de estudio en este proyecto, más concretamente el análisis y estudio de las estructuras y el diseño web de comercios electrónicos aplicado al caso práctico del sitio web de la empresa Benlloch Soler, dedicada a la producción y venta de productos para instalaciones de ferias ambulantes. Se analizarán diferentes estrategias comunicativas para llegar al consumidor de forma óptima prestando especial atención a la apariencia estética y el diseño del sitio web orientada al ecommerce. Finalmente se aplicarán de forma práctica los conceptos analizados en el diseño web para la venta de productos de la empresa, contando con los requisitos y las necesidades del cliente, como el presupuesto o el tiempo establecido, a la vez que detectando y mejorando las posibles carencias. La empresa objeto del trabajo dio amplia libertad para la elaboración gráfico-visual de la marca “Benlloch Soler, Casa del feriante”, por tanto las pautas de realización son definidas desde un punto de vista propio basado en la propia experiencia como diseñador y comunicador. Al finalizar este trabajo un autoanálisis y autocrítica dará la oportunidad de descubrir la necesidad de mejora y aprendizaje en el campo de la comunicación multimedia. Dicho análisis se verá aplicado a futuros proyectos que surgirán en la carrera profesional y serán motivo de satisfacción personal. En definitiva y tras finalizar la carrera es importante prestar atención a las constantes novedades que rodean al amplio mundo de la comunicación y el diseño digital manteniendo el perfil profesional bajo un continuo proceso de aprendizaje. 1.1. Idea. La conceptualización del proyecto. En nuestros días pequeñas y grandes empresas se debaten por hacerse un hueco en un mercado cada vez más competitivo. Obtener un lugar entre las empresas del sector es una tarea complicada en la que no deben escatimarse los esfuerzos. Un análisis de mercado y una buena estrategia de comunicación, pueden ser las claves del éxito de cualquier empresa. La reputación corporativa y la propia imagen han adquirido, en los últimos años, un valor cada vez más importante en el mundo empresarial. Las compañías intentan conseguir un diseño que las diferencie de la competencia y coloque la marca en el lugar preponderante que todos desean. La búsqueda del mejor diseño y el estudio de las mejores estrategias comunicativas se 14 siquiera todos los países miembros se acogían a ella, con los problemas que esto conlleva a la hora de acceder y diseñar los programas de ayuda para la empresa. En su última actualización, la UE divide a las pymes entre microempresas, pequeñas y medianas empresas dependiendo de su facturación, número de empleados y del balance anual 13 .  Microempresa. Hasta un máximo de 10 empleados con un límite de facturación y un balance anual de dos millones de euros, cifra que antes no estaba delimitada.  Pequeña empresa. Entre 10 y 50 empleados con un límite de facturación de 10 millones de euros y otros 10 millones en su balance.  Mediana empresa. Hasta 250 empleados con una facturación de 50 millones de euros y un balance anual de 43 millones de euros. Al igual que ocurre con las grandes corporaciones y el total de las pymes, la relación numérica entre las propias pymes es inversamente proporcional a su tamaño. Es decir, a mayor dimensión, menor número de compañías. De esta forma, las microempresas suponen cerca del 94% del total de pymes, mientras que las pequeñas suponen cerca del 5% y las medianas sólo el 0,70 por ciento. Mención especial supone el hecho de que los autónomos o empresas unipersonales alcancen el 52% del total. 14 Aunque a priori no pueda parecer muy importante, tener un único sistema para ordenar el tipo de empresas permite al Gobierno y a la UE llevar a cabo planes globales específicos para cada área, adaptándose a las necesidades concretas. Además, también es positivo para llevar a cabo negocios entre las propias compañías, ya que cada una sabe con qué tipo de corporación está tratando simplemente por su denominación, todo ello por no hablar de su papel clave para establecer las ayudas y subvenciones. 2.2.1. Ventajas y Desventajas de las pymes Del modelo pymes, como es el caso de nuestra empresa objeto de análisis, las ventajas son la flexibilidad con la que actúan, tanto a nivel del personal, que suele ser multidisciplinar, como a otros niveles (disponibilidad geográfica, adaptabilidad del producto al mercado, transformación rápida, toma rápida de decisiones, etc.), ventajas que deben aprovecharse para poder hacerse con un hueco en el mercado, muchas veces muy competitivo y maduro. Al igual que la pequeña y mediana empresa, ésta es una fuente generadora de empleos. Por otra parte, se transforman con gran facilidad por no poseer una estructura rígida. El principal escollo contra el que deben luchar es la falta de financiación, lo que lleva en muchas ocasiones a no poder marcarse objetivos más altos en un plazo más corto de tiempo y que limita las posibilidades de expansión, tanto tecnológica como geográfica, creándose un 13 Recomendación 2003/361/CE de la Comisión, de 6 de mayo de 2003, sobre la definición de microempresas, pequeñas y medianas empresas. Diario Oficial L 124, 20-5-2003. Consultado en enero de 2012 en http://europa.eu/legislation_summaries/enterprise/business_environment/n26026_es.htm 14 Anónimo. Las pymes se erigen como las principales creadoras de empleo, artículo en el diario Aproximate, mayo de 2010. Consultado en julio de 2011 en http://www.aproximate.es/pymes/empresas/el-paro-se-mantiene-en-laocde-y-las-pymes-se-erigen-como-las-principales-creadoras-de-empleo/ 15 círculo vicioso donde la microempresa encuentra problemas de competitividad y se ve obligada en gran número de ocasiones a limitar su mercado al consumo interno a nivel local. 2.2.2. Las pymes familiares y sus limitaciones De las pymes existentes el 70% son familiares, y son ellos quienes la sustentan como tal. Más de 2.000.000 de empresas tienen una estructura, funcionamiento, capital y accionariado plenamente familiar. El hecho que la empresa sea familiar tiene ciertos inconvenientes a saber 15 :  Tamaño. Las empresas familiares que se inician como un emprendimiento familiar suelen ser más pequeñas dado que el patrimonio de la familia es el capital de la empresa y el cual muchas veces es limitado. Esto hace también que las posibilidades de expansión, crecimiento e incluso endeudamiento sean otras.  Rentabilidad. Muchas veces aparecen con una rentabilidad mayor, ya que el costo del trabajo de los propios familiares no está realmente considerado y por el cual muchas veces no se paga un costo.  Problemas sucesorios. La continuidad en el tiempo y los problemas sucesorios en las pymes, dado que no todos los sucesores quieren y/o pueden hacerse cargo de la empresa.  Menor profesionalismo. El manejo de la empresa por parte de sus creadores, hace que los cargos importantes de gerencia sean ocupados por ellos, que suelen no ser profesionales y no por gente preparada para ese cargo con una visión de negocio distinta. Es por ello que los titulares de pymes familiares como nuestra empresa objeto de análisis deben analizar sus propias limitaciones y tener en cuenta que una apertura hacia terceros, no solo por ingreso de capitales, sino de conocimiento apropiado, es vital para su crecimiento y sostenibilidad. 2.2.3. La pyme y el comercio electrónico Las empresas no difieren tanto de los seres vivos, ya que es durante los primeros años de vida cuando más vulnerables son. En este sentido, se puede decir que las pymes son los cachorros del mundo empresarial y por lo tanto la población con mayor riesgo. 16 Falta de preparación, tanto por parte del empresario como por parte del producto, servicio o idea que se quiere vender, un plan de negocios deficiente o no ser capaz de tomar decisiones rápidas para adaptarse al mercado son sólo algunas de las causas de mortalidad. Lo cierto es 15 Ratto, Daniel. Las pymes familiares y sus limitaciones, artículo publicado en Financial Red Network, julio de 2009. Consultado en julio de 2011 en http://gestionpyme.com/las-pymes-familiares-y-sus-limitaciones/ 16 Trecet, Jose. El ciclo vital de la pyme, artículo publicado en Financial Red Network, noviembre de 2011. Consultado en julio de 2011 en http://gestionpyme.com/el-ciclo-vital-de-la-pyme/ 16 que en muchas ocasiones el factor financiero termina siendo determinante. El patrimonio personal sigue siendo la principal fuente de financiación y muchas veces el plan de negocios apenas contempla el periodo de adaptación lógico que necesita cualquier compañía. Es por ello, que en cuanto surgen dos o tres problemas seguidos se agotan los fondos y hay que cerrar o incluso vender la empresa. En palabras del presidente de la Asociación Española de Comercio Electrónico y Marketing Relacional (AECEM) Martí Manent 17 , "Para las empresas es un canal más de venta, que implica una inversión reducida y permite a empresas que operan localmente hacerlo globalmente con una relativamente modesta inversión en recursos". Por tanto el comercio electrónico para los consumidores es un canal que ofrece la posibilidad de comprar a distancia bienes y servicios que no encuentra en su entorno cercano o a los que tiene difícil acceso y normalmente a un precio inferior al de las tiendas físicas. Es por esto que el e-commerce supone una oportunidad para la internacionalización de la pyme española y una oportunidad de mercado. El programa de divulgación sobre el comercio electrónico se enmarca dentro del Plan Avanza, impulsado por el Ministerio de Industria, en el capítulo de Economía Digital centrado en pymes. AECEM ha diseñado un programa sobre los aspectos más importantes a tener en cuenta para que una pyme se lance a operar online o mejorar su eficacia y rendimiento si ya lo está haciendo: medios de pago, legalidad, logística, marketing online, fidelización, etc. 18 A pesar de que es relativamente fácil lanzarse a la venta online en términos de coste, tal y como indica Martí Manent, las pymes españolas siguen mostrándose reticentes en un alto porcentaje a la venta online por el desconocimiento del medio. 2.2.4. La reputación en las pymes. La creación de la imagen corporativa en las grandes empresas a menudo implica una larga y minuciosa tarea que trae consigo la necesidad de diferentes profesionales de la comunicación. Hoy en día ya es normal que la empresa disponga de un departamento o comité de imagen que se encarga de la labor de estudio y coordinación del proyecto creativo y que supervisa cada etapa del proceso corrigiendo y evaluando posibles errores. Del mismo modo, la intención de su identidad visual ha sido estudiada y queda bien definida para ser plasmada utilizando los mejores recursos técnicos y humanos disponibles. 17 Anónimo. Manent, Martí: “El comercio electrónico es una oportunidad para la internacionalización de la PYME española”, artículo de Confianza Online, marzo de 2009. Consultado en mayo de 2011 en http://www.confianzaonline.es/tag/venta-online-pymes/ 18 Anónimo. El Ministerio de Industria y AECEM cooperarán en la difusión y promoción del Plan Avanza, artículo de La Asociación Española de la Economía Digital, octubre de 2007. Consultado en mayo de 2011 en http://www.adigital.org/noticias/el-ministerio-de-industria-y-aecem-cooperaran-en-la-difusion-y-promocion-delplan-avanza 17 En el caso de las pequeñas y medianas empresas estas tareas suelen verse relegadas a un segundo plano por falta de información o carencia de medios. Sin embargo, la importancia de una imagen positiva es de vital importancia para este tipo de empresas. Una imagen corporativa adecuada permite a los clientes distinguir la empresa de los competidores y ofrece a la pyme la posibilidad de comerciar de una manera más adecuada con sus productos y servicios. Del mismo modo que ocurre en las grandes corporaciones, la imagen de la pyme se considera un distintivo de calidad constante y un instrumento para fomentar la fidelidad de los clientes. 19 2.3. A cerca de la empresa Benlloch Soler. La empresa, Benlloch Soler inicia su andadura en el año 1962, mediante la realización de instalaciones eléctricas en naves industriales, bobinado de motores, etc. En 1975 comienza la producción de la señal luminosa modelo diamante para atracciones de feria, con el que cosecha una gran aceptación del público, y que lleva a Benlloch Soler a aumentar el número de variedad de productos, hasta llegar a disponer de un amplio catálogo en la actualidad, todos ellos destinados a las instalaciones de ferias ambulantes. Cumpliendo siempre con las más estrictas normas de seguridad y obteniendo productos de alta calidad y de diseño decorativo inconfundible, que ofrecen una alta rentabilidad por su larga duración. En 1978 Benlloch Soler abra sus puertas a la exportación cosechando de nuevo grandes éxitos de ventas. Conocido actualmente a nivel internacional Benlloch Soler pone al servicio del público toda su experiencia y conocimiento acumulado durante todos estos años. En la actualidad su hijo se abre paso para continuar ofreciendo el mejor servicio y las más actuales novedades en sus productos a través de la red. En el año 2000 el amplio catálogo es ofrecido a través de internet, permitiendo a sus clientes elegir los productos antes de contactar para ampliarles información y atender sus consultas. 20 Fuente: Benlloch Soler 19 Mariano Álvarez, José Durán. Manual de la Micro, Pequeña y Mediana Empresa. Una contribución a la mejora de los sistemas de información y el desarrollo de las políticas públicas, CEPAL - Naciones Unidas, 2009. 20 Benlloch Soler. Acerca de la empresa, información proporcionada por el cliente, junio de 2009. 18 3. Estrategias comunicativas básicas de sitios de e-commerce 3.1. Análisis del público objetivo y cliente final Denominamos público a aquellas personas para las cuales se diseña específicamente el desarrollo de la aplicación web, a los que van a operar directamente con ella. Sus expectativas, gustos o conocimientos de los medios utilizados influyen directamente en el proceso de diseño gráfico. Si no los tenemos en cuenta corremos el peligro de diseñar una identidad visual y una aplicación que los usuarios encuentren inútil, aburrida o difícil de utilizar. 21 En cuanto al público objetivo, nuestro objetivo es satisfacer las necesidades del usuario potencial, adaptando la web a sus expectativas, sin imponer nunca al usuario un interface que obstaculice sus intenciones. Siempre pensando en el perfil del usuario que lo va a utilizar. Los perfiles varían desde el ámbito más generalista hasta perfiles concretos y específicos y que por tanto obliguen a reconsiderar las opciones y funciones disponibles en la aplicación web. Estos usuarios potenciales determinan las necesidades de un público potencial, llamado también target y gracias a ello, definimos las estrategias de menús y accesos hipermedia que ayuden a clarificar, sistematizar y gestionar la información publicada de la empresa. Partiendo de los aspectos cuantitativos que nos presentan los habituales estudios de mercado (edad, género, nivel sociocultural, clase social, etc.) definimos nuestro perfil de usuario como un usuario familiarizado con la tecnología. En la actualidad la amplia mayoría de perfiles de usuario cuenta con conocimientos informáticos, se está habituado a usar productos similares por lo que en nuestra aplicación web no es necesaria la información sobre el uso de la misma. Para el diseño de la web tenemos en cuenta la distinción de tipos de usuarios dentro de internet que establecen Lynch y Horton 22 según el grado de familiaridad con el medio ya comentado:  Internautas. Están muy familiarizados con la red y esperan encontrar páginas principales con persuasivos gráficos y enunciados claros que les conduzcan al interior de la red. Conocen muy bien el medio y están dispuestos a experimentar nuevas formas de utilización. De ahí nuestras opciones más avanzadas de navegación e interacción con el usuario.  Principiantes y usuarios ocasionales. Su contacto con internet es muy reducido, por lo que prefieren una estructura simple y sin ambigüedades, que puedan percibir rápidamente. Por ello utilizamos páginas de menú sencillas y una estructura simple constante de las páginas, como forma de indicar la estructura del conjunto. 21 Lynch, Patrick J., Sara Horton. Principios de diseño básicos para la creación de sitios web, Ediciones Gustavo Gili, 2000, pág. 42. 22 Lynch, Patrick J., Sara Horton. Principios de diseño básicos para la creación de sitios web, Ediciones Gustavo Gili, 2000, pág. 45. 19  Usuarios y expertos reincidentes. Este tipo de usuario se acerca a internet con el deseo de obtener de forma rápida una información muy concreta. Con la expansión de las tecnologías, este grupo cada vez se hace más numeroso. Como tienen una idea clara de lo que buscan le ofrecemos la información en primer término y sin distracciones que no les dejen encontrar lo que buscan y con un menú fijo que se repite en todas las páginas de la aplicación web.  Usuarios internacionales. La red tiene un carácter mundial, por lo que para poder dar acceso a este tipo de usuarios, se deberían facilitar traducciones y evitar el uso de cualquier jerga profesional o acrónimos o siglas. A su vez, es importante tener en cuenta que no todos los lectores tienen las mismas convenciones en cuanto a las fechas y el tiempo. Nuestra aplicación cuenta con un diseño base que permite la ampliación a todos los idiomas que se deseen. Otros factores a tener en cuenta en el diseño de la aplicación web por parte de nuestro usuario final se basan en:  Disponibilidad de equipamiento. Si el usuario no tiene equipo o éste no es suficientemente potente para acceder a la aplicación, ésta se vuelve inútil, realizamos una web rápida en su carga y sin animaciones que la saturen.  Motivación para usar el producto. Es muy útil conocer qué necesidades de información o entretenimiento quiere ver satisfechas el usuario al utilizar la aplicación. De esta manera sabemos los contenidos que son adecuados y el tipo de navegación que conviene a la web.  Tiempo dedicado. Cuánto tiempo dispone el usuario para prestar atención a la aplicación web, dejamos la información importante muy accesible para un acceso rápido, y en el caso de disponer de más tiempo, el usuario puede deleitarse navegando por el resto de secciones que pueden ofrecerle, a su parecer, una información extra y de mayor calidad gráfica. Cualquiera que sea la magnitud de su proyecto y presupuesto, es casi una certeza que, si se toma el tiempo de averiguar lo que el público necesita antes de empezar, puede evitar errores costosos y asegurar una mejor recepción por parte del público. 20 3.2. Estudio de pautas de accesibilidad según recomendaciones de estándares web 3.2.1. ¿Qué es la Accesibilidad Web? 23 La accesibilidad Web significa que personas con algún tipo de discapacidad van a poder hacer uso de la Web. En concreto, al hablar de accesibilidad Web se está haciendo referencia a un diseño Web que va a permitir que estas personas puedan percibir, entender, navegar e interactuar con la Web, aportando a su vez contenidos. La accesibilidad Web también beneficia a otras personas, incluyendo personas de edad avanzada que han visto mermadas sus habilidad a consecuencia de la edad. Existen millones de personas con discapacidad que no pueden utilizar la Web. Actualmente, la mayoría de los sitios Web y los software Web presentan barreras de accesibilidad, lo que dificulta o imposibilita la utilización de la Web para muchas personas con discapacidad. Cuanto más software y sitios Web accesibles estén disponibles, más personas con discapacidad podrán utilizar la Web y contribuir de forma más eficiente. Pero la accesibilidad Web beneficia también a organizaciones y a personas sin discapacidad. Por ejemplo, un principio básico de la accesibilidad Web es la flexibilidad con el objetivo de satisfacer diferentes necesidades, situaciones y preferencias. Esta flexibilidad va a beneficiar a todas aquellas personas que utilizan la Web, incluyendo personas que no tienen ninguna discapacidad pero que, debido a determinadas situaciones, tienen dificultades para acceder a la Web (por ejemplo, una conexión lenta), también estaríamos hablando de aquellas personas que sufren una incapacidad transitoria (por ejemplo, un brazo roto), y de personas de edad avanzada. 3.2.2. ¿Por qué la Accesibilidad Web es importante? 24 La Web es un recurso muy importante para diferentes aspectos de la vida: educación, empleo, gobierno, comercio, sanidad, entretenimiento y muchos otros. Es muy importante que la Web sea accesible para así proporcionar un acceso equitativo e igualdad de oportunidades a las personas con discapacidad. Una página Web accesible puede ayudar a personas con discapacidad a que participen más activamente en la sociedad. La Web ofrece a aquellas personas con discapacidad una oportunidad de acceder a la información y de interactuar. 23 Shawn Lawton Henry y los participantes del Grupo de Trabajo de Educación y Difusión (EOWG). Documento de la Iniciativa de Accesibilidad Web (WAI): ¿Qué es la Accesibilidad Web?, septiembre de 2005. Consultado en mayo de 2012 en http://www.w3c.es/Traducciones/es/WAI/intro/accessibility/#i-what 24 Shawn Lawton Henry y los participantes del Grupo de Trabajo de Educación y Difusión (EOWG). Documento de la Iniciativa de Accesibilidad Web (WAI): ¿Por qué la Accesibilidad Web es importante?, septiembre de 2005. Consultado en mayo de 2012 en www.w3c.es/Traducciones/es/WAI/intro/accessibility/#important 21 Otra consideración importante para las empresas es que la accesibilidad Web es un requisito establecido en algunos casos por leyes y políticas 25 . En el caso de nuestro país, las leyes relevantes para este ámbito son:  LEY 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio electrónico (LSSICE) 26 : "Quinta. Accesibilidad para las personas con discapacidad y de edad avanzada a la información proporcionada por medios electrónicos." 3.2.3. Hacer la Web y el sitio web Accesible 27 La accesibilidad Web se ha entendido siempre como responsabilidad de los desarrolladores Web. Pero, el software Web tiene también un papel importante en la accesibilidad Web. Es importante que el software ayude a los desarrolladores a generar y evaluar sitios Web accesibles para que las personas con discapacidad puedan utilizarlos. El Consorcio World Wide Web (W3C) es una comunidad internacional donde las organizaciones, personal y el público en general trabajan conjuntamente para desarrollar estándares Web; entre otras iniciativas el consorcio W3C proporciona a través de la Iniciativa de Accesibilidad Web (WAI) funciones para desarrollar pautas y técnicas que proporcionen soluciones accesibles para el software Web y para los desarrolladores Web. Las pautas de WAI son consideradas como estándares internacionales de accesibilidad Web. El documento "Componentes esenciales de Accesibilidad Web" 28 describe las diferentes funciones de la accesibilidad Web, y cómo mejoras concretas pueden beneficiar de forma visible la accesibilidad Web. Hacer un sitio Web accesible puede ser algo sencillo o complejo, depende de muchos factores como por ejemplo, el tipo de contenido, el tamaño y la complejidad del sitio, así como de las herramientas de desarrollo y el entorno. Muchas de las características accesibles de un sitio se implementan de forma sencilla si se planean desde el principio del desarrollo del sitio Web o al comienzo de su rediseño. La modificación de sitios Web inaccesible puede requerir un gran esfuerzo, sobre todo aquellos que no se "etiquetaron" correctamente con etiquetas estándares de XHTML, y sitios con cierto tipo de contenido, como multimedia. 25 Judy Brewer, Shawn Lawton Henry y los participantes del Grupo de Trabajo de Educación. Documento de la Iniciativa de Accesibilidad Web (WAI): Policies Relating to Web Accessibility, agosto de 2006. Consultado en mayo de 2012 en http://www.w3.org/WAI/Policy/ 26 Disposición LEY 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio electrónico (LSSICE) que hace referencia a la accesibilidad, pág. 12. Consultado en mayo de 2012 en http://www.boe.es/boe/dias/2002/07/12/pdfs/A25388-25403.pdf 27 Shawn Lawton Henry y los participantes del Grupo de Trabajo de Educación y Difusión (EOWG). Documento de la Iniciativa de Accesibilidad Web (WAI): Introducción a la Accesibilidad Web, septiembre de 2005. Consultado en mayo de 2012 en http://www.w3c.es/Traducciones/es/WAI/intro/accessibility/ 28 Shawn Lawton Henry y los participantes del Grupo de Trabajo de Educación. Documento de la Iniciativa de Accesibilidad Web (WAI): Componentes esenciales de Accesibilidad Web, 2006. Consultado online en mayo de 2012 en http://www.w3c.es/Traducciones/es/WAI/intro/components/ 22 La iniciativa W3C proporciona una guía en la que se muestran los pasos básicos para introducir la accesibilidad en un proyecto Web 29 . Las Pautas de Accesibilidad al Contenido en la Web y los documentos de técnicas proporcionan información detallada para los desarrolladores. 3.2.4. Evaluación de la accesibilidad de un sitio Web Cuando se desarrolla o rediseña un sitio Web, la evaluación de la accesibilidad de forma temprana y a lo largo del desarrollo permite encontrar al principio problemas de accesibilidad, cuando es más fácil resolverlos. Técnicas sencillas, como es cambiar la configuración en un buscador, pueden determinar si una página Web cumple algunas de las pautas de accesibilidad. Una evaluación exhaustiva, para determinar el cumplimiento de las pautas, es mucho más compleja. Hay herramientas de evaluación que ayudan a realizar evaluaciones de accesibilidad. No obstante, ninguna herramienta en sí misma puede determinar si un sitio cumple o no las pautas de accesibilidad. Para determinar si un sitio Web es accesible, es necesaria la evaluación humana. 3.3. Definir los contenidos informativos de la aplicación. Como punto de partida se analizará el portal corporativo que el cliente ha estado utilizando hasta la fecha. En las capturas de pantalla que se incluyen se puede apreciar el diseño global de la aplicación web. Imagen 1, página de inicio. Fuente: http://www.benllochsoler.com, 2009 29 Judy Brewer, Sarah Horton, y los participantes del Grupo de Trabajo de Educación y Difusión (EOWG). Documento de la Iniciativa de Accesibilidad Web (WAI): Las Pautas de Accesibilidad al Contenido en la Web, octubre de 2002. Consultado en mayo de 2012 en http://www.w3.org/WAI/impl/Overview 23 Si se analiza la página web de la empresa Benlloch Soler se aprecia como el cuerpo de cada una de sus páginas consta de cabecera, sección y pie. En la cabecera se encuentra el logotipo de “BenllochSoler.com, Casa del Feriante” así como el menú para acceder a todas las secciones de la web. El menú consta de las secciones: Catálogo, Empresa, Novedades, Contacto y Situación, Mapa del Sitio. El pie repite dichas secciones añadiendo además un enlace a la página inicial (Home). En ambos menús los botón son hipervínculos que nos lleva a las diferentes secciones de la web. Imagen 2, Página del catalogo del sitio web de la empresa Benlloch Soler, 2009 Home o inicio es la página de bienvenida (ver imagen 1), se muestra un breve texto dando la bienvenida al navegante. La sección Empresa propone la historia de la compañía y amplia la información mostrada en la página inicial. El Catálogo muestra todas las categorías y los productos disponibles de la firma (ver imagen 2). 30 Imagen 9, página de comprobación de la web shop.lego.com, 2010 El menú de la derecha muestra información de apoyo, indicando en todo momento el subtotal del pedido, algún bloque extra como el de código promocional y métodos de pago aceptados. Imagen 10, fuente: http://www.benllochsoler.com, 2009 31 4. Planificación del trabajo 4.1. Desarrollo conceptual de la propuesta. Las páginas web se crean según el diseño y guía de estilos desarrollados y siguen los niveles y estructuras mejor adecuadas a las necesidades del cliente. Para ello diseñamos hojas de estilo para facilitar el cambio de diseño según necesidades y tendencias en un futuro. Estos son los módulos desarrollados para los diferentes niveles de la página web:  Primer nivel, página principal. El index del sitio o página principal, es la página de bienvenida donde mostramos en pequeños bloques todo el contenido que se puede encontrar en la web. Estos bloques incluyen, una barra lateral con todas las categorías, un bloque principal con tres productos destacados, una sección inferior con los últimos productos y un recuadro con instrucciones a cerca de como realizar un pedido en la web. Se mantiene una cabecera y un pie a través de los cuales se accede a los enlaces a los apartados que forman la estructura de la web, así como el acceso a la parte privada de administración de la web.  Montaje de páginas de otros niveles (segundo y tercer nivel). Nuestra web tiene una jerarquía de niveles muy simple y sencilla en la navegación. Ofrecemos así una información de fácil acceso y con una estructura constante en su navegación. Para ello basamos el contenido en texto, elementos gráficos y pequeños códigos JavaScript para las animaciones en las secciones que requieren una presentación más amena. Un claro ejemplo de segundo nivel sería el de la página de sección en el catálogo, donde tanto en la barra lateral de la derecha como en la parte principal se incluyen 2 listados con las secciones y productos. La página de empresa mantiene un diseño básico donde la parte principal contiene texto plano.  Montaje de páginas de nivel de administración A través de una previa identificación, llegamos a las páginas web de este nivel privado, donde la jerarquía de navegación se ve modificada. Una información ya existente puede ser modificada y guardada, por otra parte, una información puede ser creada desde cero a través de los formularios creados para la publicación de productos. Todo esto con la finalidad de ser visible en el área pública de la web. 4.2. Enfoque visual y conceptual partiendo de la imagen gráfica desarrollada. Desarrollo físico del sitio. 4.2.1. El diseño gráfico en los medios digitales Dentro de este trabajo final de carrera contemplamos el estudio, desarrollo y diseño de la aplicación web de comercio electrónico sobre su aplicación a la comunicación multimedia. Lejos de los inicios, donde para una empresa poseer una página web propia era un modo de conseguir toda la atención de su público, los mensajes digitales ya forman parte de nuestro entorno más familiar. Tener una página web ha dejado de llamar la atención. Están al alcance de todos. El punto distintivo para predominar frente al aluvión de mensajes hay que buscarlo en otra parte, en el diseño, pero no un diseño cualquiera. 32 El diseño que no tiene otra razón de ser más que contemplarse en su espejo personal y deleitarse con su figura, es un diseño que, como pasaba en los anteriores medios de comunicación, ya nace muerto, al menos, comunicativamente hablando. Si un mensaje no consigue llegar a su destinatario, no existe comunicación. El diseño para medios digitales debe adaptarse a las características de los nuevos soportes, ha de ser relevante para su público, debe funcionar, debe ser legible y agradable, capaz de llegar a su público y transmitirle con acierto un mensaje. Como dice Roger Black, en su libro Web sites that work 30 : “buen diseño significa información pertinente, contenidos importantes y buena navegación”; se trata de la conjunción de diversos elementos en una misma área con objeto de lograr una interacción que trasmitirá un mensaje dentro de un contexto determinado. El mensaje puede comunicarse e incluso modificarse mediante una cuidadosa manipulación visual de los elementos que van a ser utilizados dentro del área de diseño. Esencialmente esos elementos son palabras, imágenes fotográficas, ilustraciones e imágenes gráficas, combinadas con una fuerza controladora basada en el color. 4.2.2. Desarrollo de la aplicación web La web contempla un desarrollo a nivel de plataforma, contenido y recursos con la capacidad de interacción que ofrece la informática gráfica y visual. Creamos una interface gráfica que se convierte para el usuario en una herramienta fundamental. Se trata de un sistema de información que incorpora imágenes, hipertextos, enlaces, etc. Los documentos web son adaptados a las convenciones del estilo corporativo. 4.2.3. Comunicación digital La comunicación a través de los soportes digitales se caracteriza básicamente por ser multimedia e interactiva. Comunicación multimedia pues es posible integrar diversos formatos de información en una misma aplicación digital. Texto, audio, imagen, animación y vídeo se unen para enriquecer el mensaje. Comunicación interactiva ya que el usuario es el que suele decidir cómo recorrer un producto multimedia. La información se le presenta en una estructura no lineal y son sus acciones las que definen cómo funciona la aplicación. 30 Black, Roger. Web Sites that Work, Adobe Press, 1997. 33 Los medios digitales hacen del usuario el productor, el director y el editor. El diseñador puede establecer un modo de recorrer una página pero no está junto al usuario para dirigirle en el proceso comunicativo. La definición del proyecto web, su arquitectura y su diseño, giran constantemente en torno a la posibilidad de elaborar contenidos multimedia y de hacer participar al usuario en la utilización del producto. 4.2.4. Jerarquía de los contenidos Debemos establecer con claridad la información que se pretende comunicar en el proyecto. Con la jerarquía visual ponemos de manifiesto la lógica visual de nuestro proyecto junto a otros aspectos del diseño. Estas jerarquías pueden ser muy variadas, pero todas ellas tienen una misma finalidad, multiplicar la eficacia de la comunicación sin restar creatividad formal ni conceptual. En este caso, la lógica visual se basa en la sencillez. Mediante epígrafes, títulos y subtítulos, indicamos al usuario en qué lugar se encuentra dentro de las distintas secciones en que hemos dividido la información. Un recurso extensamente utilizado es añadir en la parte superior de la página las llamadas “migas de pan” para así situar en todo momento al usuario en la navegación por nuestro sitio web. 4.2.5. Espacios de trabajo En la página hay dos áreas importantes, la parte superior e inferior que sirve para navegar en el sitio y la zona central que es la más utilizada pues el usuario encontrará toda la información necesaria. En dicha parte principal podemos encontrar listados de elementos, son herramientas muy útiles para la navegación en la web. Pueden servir para la enumeración de elementos en una relación ordenada además de servir como hipervínculo con otras páginas de la web. Aquí encontramos un claro ejemplo en el listado de categorías y productos. 4.3. Enfoque de funcionalidad y navegabilidad. 4.3.1. Funcionalidad y legibilidad La web cuenta con accesos directos a la información mas generalizada para llegar a ella en el menor tiempo posible y con ello reducir al mínimo los pasos para llegar a la información específica. 34 Para ello configuramos una jerarquía de información eficiente para minimizar el número de pasos a través de páginas con menús. Diseños web no optimizados darán como resultado que el usuario pierda interés y no intente acceder a esta página web de nuevo. La funcionalidad y la legibilidad en el diseño de la web es fundamental a través de un sólido patrón de unidades modulares que compartan la misma retícula base, es decir, creamos para la web de comercio electrónico unos primeros planteamientos gráficos y estos se convierten en plantilla que se repite sin problemas a través de la web creada. Con esto conseguimos un modelo gráfico consistente y previsible a través de una fácil navegación y que dispone de una jerarquía visual constante. El uso de la tipografía predominante en toda la web es Arial, se ha utilizado para todo el conjunto de textos la familia “Arial, Helvetica, sans-serif”. Este tipo de fuente es la más utilizada, pues asegura una perfecta legibilidad en todos los tamaños y en todas las plataformas y navegadores. No existe un tamaño de la fuente concreto para todo el texto de la web, en primer lugar tenemos los textos principales, como el texto de empresa o el de la pagina de producto. En estos casos la tipografía se encuentra en 13px, mientras que en los subapartados donde exista texto, éste será más pequeño, a 11px, tampoco queremos reducir la legibilidad, sólo remarcar la jerarquía del contenido. 4.3.2. Interactividad Con interacción nos referimos a la influencia recíproca que existe entre la aplicación y el usuario. Los medios digitales posibilitan que el comportamiento del público influya en el funcionamiento del producto multimedia. En nuestra aplicación web contamos con dos tipos de interactividad. Orientada la navegación donde el objetivo principal es desplazarse de una página a otra de la web de forma optima. Orientada al funcionamiento donde la interacción va destinada a hacer funcionar la aplicación, a través del formulario de contacto o al pulsar sobre las imágenes de cada producto para verlas en mayor tamaño, no estamos navegando por el producto sino haciéndolo funcionar. Con esto conseguimos la motivación de los usuarios que visitan nuestra web, pudiendo de forma sencilla interactuar con la aplicación y dándole control al usuario. Creamos por tanto en nuestra web un conjunto de herramientas y funciones disponibles que permiten al usuario “comunicarse” de una forma fluida para extraer, consultar, y gestionar la información. 4.3.3. Navegación Se crean una gran variedad de enlaces y elementos gráficos que atraen al usuario, permitiéndole hacer uso de las rutas de navegación. De esta forma, proveemos al usuario de 35 enlaces o botones de navegación consistentes y predecibles que le supone un conocimiento rápido del manejo del sitio web. Se percibe rápidamente la estructura y organización de la web teniendo un criterio visual lógico y coherente. Del diseño de la navegación depende que los usuarios lleguen a la información que están buscando o que desistan de su propósito por no poder encontrarla. Utilizamos los enlaces entre páginas o contenidos para fortalecer el mensaje que se desea transmitir, no para distraer al lector enviándolo a otro lugar no solicitado. Para una navegación consistente y estructurada nos basamos en:  Minimizar el viaje del usuario, siendo la ruta de navegación el camino más corto y sencillo de llegar a la información deseada.  Minimizar la profundidad, con una jerarquía que contiene el menor número posible de niveles, de forma que el usuario no tiene que atravesar muchas páginas para llegar a lo que está buscando.  Minimizar la redundancia, de modo que no existen varios caminos para ir al mismo sitio.  Con en el menú constante el la cabecera, cada pantalla permite al usuario volver a la página que acaba de visitar, a la página principal de la aplicación y a las páginas más importantes.  La página debe contener al menos un enlace, evitando pérdida o frustración al usuario de sensación de callejón sin salida.  Utilización del color para definir los distintos elementos de navegación (enlaces)  Consistencia en la navegación, pues el usuario puede predecir el lugar en el que se encuentran los botones de navegación y su apariencia. La inclusión de imágenes y otros elementos gráficos atraen al usuario permitiéndole hacer uso de las rutas de navegación en la aplicación web. La inclusión de botones de navegación consistentes y predecibles suponen ofrecer al usuario un conocimiento rápido del manejo de la web. Las barras de botones o menús están organizadas de manera constante, se repiten en cada una de las páginas, creando el criterio de funcionalidad y coherencia necesario para que el usuario no pierda el contacto directo con la estructura web. Este tipo de enlaces permiten ir en cualquier momento sobre un documento a otros documentos, a la página de inicio, a la página principal de cada sección, etc. 4.3.4. Utilización Al público le importa poco cómo está construida la aplicación sólo le interesa que funcione y que sea agradable, amigable y fácil de entender. A partir de estas palabras prestamos atención a la relevancia de la utilización de la web. Si la aplicación no funciona o su utilización es muy complicada desde el punto de vista del usuario, no sirve de nada que el diseño de todos sus elementos sea perfecto. 36 A diferencia de un producto que sólo tiene que comunicar, un producto interactivo tiene también que presentar operación y utilidad, es decir, tiene que funcionar. Para conseguir una utilización correcta nuestra web responde a estos tres requerimientos:  Fácil aprendizaje. Nuestro usuario no tarda más tiempo en aprender a utilizar la aplicación que en usarla.  Fácil uso. Poco esfuerzo por parte de nuestro usuario para utilizar la aplicación, y así más veces y más tiempo la usará.  Estándar. Mantenemos el mismo estilo corporativo en toda la aplicación web, el usuario sabe de qué manera debe acercarse a ella y que las reglas de comportamiento serán siempre las mismas. 4.3.5. Condicionantes tecnológicos El diseño gráfico de una página web es tan solo una parte del diseño de la misma, ya que, además, hay que considerar un conjunto más o menos extenso de condicionantes que van a limitar nuestra creatividad. En primer lugar, las páginas web se deben descargar de un servidor web remoto por medio de internet, por lo que el ancho de banda de las conexiones de los usuarios va a ser un factor clave en la velocidad de visualización. Los elementos gráficos, ya tengan formato de mapa de bits o vectorial, suelen traducirse en ficheros de bastante peso, dependiendo del tamaño de la imagen y del formato en que se guarde. Esto origina que las páginas que contienen en su diseño muchas imágenes, o pocas pero de gran tamaño, tarden mucho tiempo en ser descargadas desde el servidor web y presentadas en la ventana del ordenador del usuario, que no suele ser muy paciente. Estudios realizados en psicología cognitiva demuestran que el tiempo máximo de aguante de una persona que espera la descarga de una página suele ser de unos 10 segundos, pasados los cuales prefiere abandonar la web y buscar otra más rápida 31 . Por lo tanto, el número de elementos gráficos que introducimos en la página web esta limitado, buscando alternativas mediante el uso imaginativo de fuentes y colores incluidos en la hoja de estilo que ocupa muy poco espacio. Las páginas web son visualizadas en unas aplicaciones específicas, los navegadores web, que imponen grandes limitaciones al diseño de las mismas. En primer lugar, la ventana de un navegador es eminentemente rectangular, con unas medidas concretas, dadas por la resolución empleada por el usuario en su monitor, y con unas capacidades de interpretación de colores que varían mucho según el ordenador usado, el sistema operativo, el monitor y la tarjeta gráfica. Es por ello que siempre buscaremos que las páginas puedan ser visualizadas correctamente por el mayor número de usuarios. 31 Anónimo. Artículo de la web Emergia: Usabilidad: la gran desconocida, enero de 2009. Consultado en enero de 2012 en http://www.emergia.net/investigacion/articulos/000603 37 En segundo lugar, los navegadores existentes en el mercado tienen una forma particular de presentar el contenido de las páginas con la diferente interpretación de los códigos de programación en formato PHP, en HTML y utilizando hojas de estilo con formato CSS. Para intentar solventar estas diferencias, trabajamos a la vez con varios navegadores, diseñando las páginas web de tal forma que la interpretación de ellas sea similar en todos, lo que impone nuevas limitaciones al diseño. Por otra parte, una página web no es un diseño gráfico estático, sino que contiene diferentes elementos que tienen la capacidad de interaccionar con el usuario, como menús de navegación, enlaces, formularios, etc. Además, una página aislada no existe, sino que forma parte de un conjunto de páginas relacionadas entre sí, el sitio web, que deben presentarse al usuario con el mismo estilo, aunque su funcionalidad sea diferente. Por ello, las páginas diseñadas se construyen en un lenguaje específico, el HTML, que por sí mismo es muy limitado, lo que hace que como diseñadores web tengamos que pensar si la interface que se está diseñando gráficamente va a poder ser luego construida. 4.3.6. Las proporciones En el caso de una página web, los tamaños posibles son limitados y específicos, 800x600 píxeles, 1024x768 píxeles, etc. Por ello y para un mejor ajuste de los contenidos a las diferentes resoluciones existentes, elegimos determinar en nuestra hoja de estilo unas dimensiones específicas fijas para la visualización de nuestra web que serán de 1024x768 píxeles, dejando atrás la ya en desuso medida de 800x600 píxeles, y centrando el contenido de nuestra web para los casos de mayores resoluciones en los ordenadores de nuestros usuarios. Definimos los elementos gráficos y textuales que usaremos en la composición web. Esta elección se basa en cómo la empresa desea transmitir el mensaje, el propio mensaje, el tipo de público destinatario de la web y las características funcionales y comunicativas de cada elemento mencionado anteriormente durante el análisis del sector y el análisis de la empresa. 4.3.7. El reticulado La composición gráfica de la web esta equilibrada tanto en sus contenidos, como visualmente. Podemos decir que el orden en la disposición espacial de los elementos de la web es uno de los factores más importantes para su éxito. El usuario busca subconscientemente un orden y una estabilidad que le permitan pasear la vista por la página web de forma organizada y limpia. 32 32 Moreno, Luciano. Artículo en la web Desarrolloweb: El diseño equilibrado. El reticulado, mayo de 2009. Consultado en febrero de 2012 en http://www.desarrolloweb.com/articulos/1407.php 38 4.3.8. Las agrupaciones El ser humano, tanto por su carácter racional como por herencia cultural, tiende a organizar los elementos que percibe en torno a conjuntos significativos organizados. Esta tendencia a agrupar elementos relacionados es un factor que influye de forma relevante en la percepción que tenemos de nuestro entorno, de lo que vemos alrededor nuestro. Las composiciones gráficas no escapan a esta tendencia, por lo que una correcta agrupación de sus elementos les otorga un carácter lógico, racional, que aumenta su valor comunicativo. 33 La agrupación de nuestros elementos gráficos y textuales puede basarse en diferentes criterios.  Proximidad. Tendemos a agrupar aquellos objetos que están próximos, cercanos entre sí.  Semejanza. Tendemos a agrupar los elementos iguales o parecidos.  Continuidad. Nuestra mente tiende a agrupar aquellos elementos que tienen una continuidad significativa.  Simetría. Tendemos a agrupar los elementos para que aparezcan ordenados formando figuras conocidas. En el caso de nuestra página web, las agrupaciones son muy útiles y del todo necesarias, sobre todo en lo que respecta a elementos similares o de funcionalidad análoga, como componentes de menús de navegación, iconos, datos relacionados, botoneras, etc. Las agrupaciones nos resultan útiles en los casos de los formularios, como en Formulario de contacto de nuestra web, siendo muy conveniente dividir estos en grupos de información análoga. Así resulta más claro, lógico y fácil de completar por el usuario. 4.3.9. Organización de la página El equilibrio y la organización de los elementos gráficos de la página web permiten una navegación más fácil e intuitiva y un contenido más accesible. 34 A pesar de que a primera vista lo que antes percibe el usuario es el diseño gráfico, el aspecto que causa un mayor impacto en su experiencia es la organización. La información que damos al usuario no puede estar flotando por la pantalla. Para ello la colocamos en un contexto coherente y claro que responde a la estructura y orden definidos previamente conjuntamente con la empresa. La clara jerarquía visual entre los distintos elementos de la pantalla nos permite guiar al usuario para la comprensión de la información y le ayuda a distinguir lo principal de lo secundario. La construcción de una retícula o cuadrícula nos facilita la distribución ordenada y equilibrada de los diferentes elementos dentro del espacio de la página. 33 Arnheim, Rudolf. Arte y percepción visual. Alianza Editorial, 1979, pág. 246. 34 Arnheim, Rudolf. Arte y percepción visual. Alianza Editorial, 1979, pág. 26. 39 El sistema plano de referencia habitual en los seres humanos es el formado por un eje horizontal y otro vertical, es decir, por dos rectas que se cortan en un ángulo de 90º. En este sistema, el eje horizontal aporta equilibrio y estabilidad, mientras que el vertical facilita la elevación de la vista, marcando prioridades o niveles en la composición. Al representarse las composiciones gráficas en soportes planos, este sistema de referencia es el más adecuado para la distribución de sus elementos. A esto le sumamos el carácter eminentemente rectangular de la mayoría de los soportes, obtenemos por extensión el sistema de organización idóneo para nuestras composiciones: el reticulado. Mediante el reticulado, situamos los bloques de contenido que formarán la composición (zonas principales y secundarias, epígrafes, bloques de texto, fotografías, ilustraciones, gráficos, sistemas de navegación, botones e iconos) dando con ello un estilo propio visualmente lógico, además de equilibrio y estabilidad visual. Esta estructura lógica creada con el reticulado la mantenemos en todas las páginas que forman el sitio web, proporcionando con ello consistencia y homogeneidad al mismo. 4.3.10. Las alineaciones El concepto de alineación hace referencia a la colocación de elementos gráficos y textuales según una línea dada, que generalmente será horizontal o vertical. Generalmente habrá varias líneas guías de alineación en una composición. Con esto conseguimos en nuestra web una composición ordenada y lógica, pues con ello se crean unidades visuales definidas y relaciones entre elementos. Podemos ver su relevancia en los contenidos textuales, de forma que son más fáciles de leer, no cansa la vista y producen un efecto de equilibrio que invita a la lectura. La importancia de la alineación se acentúa en el soporte web, ya que la forma del monitor y de la ventana del navegador impulsa el uso de contornos rectangulares, que únicamente se consiguen con alineaciones perfectas. En cuanto a las verticales, utilizamos una alineación a la izquierda, ya que es la normal en los libros y demás soportes textuales, estando nuestra vista educada para tratar con ella. El alienado justificado lo utilizamos en los bloques textuales de poco ancho para no abusar del espaciado entre las letras. En la web rompemos el esquema simétrico creando bloques descompensados visualmente hacia un lado, alternándolos en la página de forma inversa, es decir, el primero descompensado a la derecha, el segundo a la izquierda, etc. Otra técnica es el uso de un único menú lateral de navegación, que descompensa el peso visual hacia la zona en la que se encuentra. Por otra parte, mantenemos la sensación de simetría y orden en la composición visual a través del aire de nuestra web. Es decir, el espacio libre que queda entre elementos y entre éstos y los límites de la página. 46 4.5. Presentación de la propuesta preliminar al cliente para su aprobación. Verificación y revisión posterior. Tras el estudio y análisis acerca de páginas web y más concretamente aplicaciones de comercio electrónico, se procede a diseñar cada página del sitio “Benlloch Soler, Casa del feriante” en todo momento haciendo uso de las hojas de estilo creadas anteriormente para cada nivel. Imagen 11, página de inicio de la nueva web www.benllochsoler.com, 2010 Siguiendo las premisas de legibilidad y aplicando un diseño agradable capaz de llegar a su público transmitiendo el mensaje de forma adecuada se desarrollan las siguientes propuestas (ver imagen 11). 47 Respetando los deseos iniciales del cliente, la aplicación se ha diseñado con un aspecto limpio y fácil de utilizar. Imagen 12, página de producto de la nueva web www.benllochsoler.com, 2010 Se ha optado por tomar el tono azulado de la antigua web como color principal de la cabecera. El color amarillo, también requisito del cliente, se ha colocado en titulares y epígrafes de la página. El color gris metalizado del menú confiere un aspecto tecnológico aproximándonos al tipo de productos electrónicos que se encuentran en esta aplicación (ver imagen 12). 48 La página de producto es la más completa desde el punto de vista de navegabilidad e interacción (ver imagen 13). Imagen 13, página de producto de la nueva web www.benllochsoler.com, 2010 Al elegir un producto el usuario tiene la posibilidad de seleccionarlo para añadirlo al carrito (ver imagen 13 en la parte superior derecha), eligiendo en su caso: color, potencia y cantidad. Para la creación de estos selectores se han utilizado técnicas HTML combinadas con JavaScript, lo cual enriquece la experiencia de navegación. La lista de productos añadidos al carrito se muestran nuevamente de forma dinámica (ver imagen 14 en el espacio superior derecha), y unas flechas (animadas por JavaScript) permiten mostrar la totalidad de la compra o un enlace redirigir al usuario a la página de confirmación. 49 Imagen 14, página de producto de la nueva web www.benllochsoler.com, 2010 Imagen 15, página de confirmación de la nueva web www.benllochsoler.com, 2010 50 La página de confirmación permite revisar el pedido antes de rellenar todos los datos personales que tras ser aceptado, enviará una notificación por correo electrónico al cliente indicándole que se ha realizado un pedido (ver imagen 15). Imagen 16, página de ocasión de la nueva web www.benllochsoler.com, 2010 Los apartados “Ocasión” y “FAQ” (Preguntas frecuentes) son apartados solicitados por el cliente. Los usuarios tienen la posibilidad, a través de un sencillo formulario, de añadir productos en venta (de ocasión) o hacer preguntas directamente al administrador (que publicará posteriormente en dichos apartados) (ver imagen 16). 51 La sección de administración mantiene un diseño sencillo y funcional (ver imagen 17). Las herramientas que el administrador de la página tiene son sencillas pero potentes. Imagen 17, página de administración de la nueva web www.benllochsoler.com, 2010 Podrá añadir productos a través de un sencillo formulario (incluyendo subida de imágenes, información adicional, precio, etc.), modificar los colores y las potencias disponibles (que posteriormente aparecerán en los productos), administrar las preguntas y respuestas así como modificar los datos de acceso. Tras la propuesta preliminar y la satisfacción mostrada por el cliente, se prepara la página para ser publicada. En el proceso final de revisión, se sugieren al cliente nuevos bloques informativos que mejoran la experiencia del usuario.  En la pagina principal, debajo de la categoría de productos se añade un bloque con las instrucciones para hacer una compra a través de la página “Información útil para el pedido”. Dicha sección es recurrente en otras páginas y muestra a cada momento lo que el usuario puede hacer.  En la página de producto, ofrecemos a nuestro cliente una funcionalidad extra. El administrador puede enlazar productos similares bajo una misma categoría, de manera que al publicar el producto, en la parte inferior aparecen dichos productos similares. Aumentando la posibilidad de venta por parte de nuestro cliente. Cuando la pagina está lista para ser publicada y el cliente ha dado el visto bueno. Repasamos junto al cliente las funcionalidades y herramientas de la web. Asistimos paso a paso al cliente en la inclusión de un producto y contestamos posibles dudas. 52 5. Conclusiones Una vez llegado a este punto, es importante recopilar a lo largo de todo el proceso de elaboración de este proyecto, los resultados que se han obtenido o que en cualquier caso se consigan en un futuro inmediato. En un principio, todos los objetivos marcados al inicio de este trabajo, se han cumplido satisfactoriamente desde un punto de vista técnico. 5.1. Cumplimiento de los objetivos Se ha reforzado la imagen corporativa de la empresa en la red. Se ha realizado un estudio de mercado que ha marcado las principales pautas a seguir para la elaboración de este proyecto. La firma de esta forma muestra su compromiso de servicio a sus clientes, así como la alta calidad de sus productos y recursos. Todo ello en un entorno de cuidada estética y funcionalidad en su aplicación web. Se espera un aumento de ventas por parte de sus clientes, ya que ahora todos los potenciales clientes tienen acceso a su catalogo de productos y a toda la información necesaria para la adquisición de sus productos, así como múltiples facilidades a la hora de ponerse en contacto con la empresa y llevar a cabo la contratación a través de la aplicación web. También se espera una fidelización de clientes. Se han creado herramientas que producirán una importante agilización en la relación con los clientes, ya que podrán hacer sus consultas online sin ningún tipo de restricción horaria, así como al acceso a sus servicios y publicaciones continuamente actualizados. 5.2. Conclusiones personales Con la elaboración de este proyecto final de carrera se han aplicado de forma práctica los conocimientos, habilidades y aptitudes adquiridas a lo largo de los estudios en materia de comunicación multimedia y los conceptos analizados en el diseño web, aplicando los requisitos y las necesidades del cliente, como el presupuesto o el tiempo establecido. En un proceso final de revisión, se han detectando carencias y se han mejorando en lo posible. Se han por tanto analizado diferentes estrategias comunicativas para llegar al consumidor de forma optima prestando especial atención a la apariencia estética y el diseño del sitio web. La empresa objeto del trabajo “Benlloch Soler, Casa del feriante”, ha quedado satisfecha con la aplicación. Ha dado a conocer su satisfacción por una página web de comercio electrónico que ha cubierto sus expectativas y es sencilla a la hora de administrar. Las pautas de realización definidas desde un punto de vista propio basado en la propia experiencia como diseñador y comunicador, han sido por lo tanto adecuadas. Al finalizar este trabajo un autoanálisis y autocrítica dará la oportunidad de descubrir la necesidad de mejora y aprendizaje en el campo de la comunicación multimedia. Dicho análisis se verá aplicado a futuros proyectos que surgirán en la carrera profesional y serán motivo de satisfacción personal. En definitiva y tras finalizar la carrera es importante prestar atención a las constantes novedades que rodean al amplio mundo de la comunicación y el diseño digital manteniendo el perfil profesional bajo un continuo proceso de aprendizaje. 53 6. Bibliografía Cerezo, Javier. Responsabilidad Corporativa, una mirada responsable, Commo Cosulting, 2008. Consultado en enero de 2012 en http://www.commoconsulting.com/data/pdfcastellano/6dab0b_Commonsense-N1-RC.pdf Rodríguez, Daniel. Sitio web. Primer paso para la pyme en Internet, Gestio Polis, mayo de 2012. Consultado en junio de 2012 en http://www.gestiopolis.com/administracion-estrategia2/sitio-web-primer-paso-para-la-pyme-en-internet.htm Barry M. Leiner, Vinton G. Cerf, David D. Clark, Robert E. Kahn, Leonard Kleinrock, Daniel C. Lynch, Jon Postel, Lawrence G. Roberts, Stephen Wolff. Una breve historia de Internet, enero de 1998. Consultado el 4 de junio de 2011 en http://www.ati.es/DOCS/internet/histint/ Sanz, Miguel A. Evolución del Servicio Internet de RedIRIS, Proyecto fin de carrera, ETSIT UPM, 1997. Laudon, Kenneth. E commerce Negocios, tecnología y sociedad, Prentice Hall, 2009. Comunicación de la Comisión de las Comunidades europeas al Consejo, al Parlamento europeo, al Comité económico social y al Comité de las regiones sobre Iniciativa europea de comercio electrónico. COM (97) 157 final, Bruselas, 16-04-1997, págs. 7-10. Academia Española. Diccionario de la lengua española, Real Academia Española, 1992. Anónimo. Las pymes se erigen como las principales creadoras de empleo, artículo en el diario Aproximate, mayo de 2010. Consultado en julio de 2011 en http://www.aproximate.es/pymes/empresas/el-paro-se-mantiene-en-la-ocde-y-las-pymes-seerigen-como-las-principales-creadoras-de-empleo/ Makipaa, Arttu. Las pequeñas y medianas empresas, artículo en la web del Parlamento Europeo, julio de 2008. Consultado en mayo de 2012 en http://circa.europa.eu/irc/opoce/fact_sheets/info/data/policies/smenterprises/article_7312_ es.htm Recomendación 2003/361/CE de la Comisión, de 6 de mayo de 2003, sobre la definición de microempresas, pequeñas y medianas empresas. Diario Oficial L 124, 20-5-2003. Consultado en enero de 2012 en http://europa.eu/legislation_summaries/enterprise/business_environment/n26026_es.htm Ratto, Daniel. Las pymes familiares y sus limitaciones, artículo publicado en Financial Red Network, julio de 2009. Consultado en julio de 2011 en http://gestionpyme.com/las-pymesfamiliares-y-sus-limitaciones/ Trecet, Jose. El ciclo vital de la pyme, artículo publicado en Financial Red Network, noviembre de 2011. Consultado en julio de 2011 en http://gestionpyme.com/el-ciclo-vital-de-la-pyme/ Anónimo. Manent, Martí: “El comercio electrónico es una oportunidad para la internacionalización de la PYME española”, artículo de Confianza Online, marzo de 2009. Consultado en mayo de 2011 en http://www.confianzaonline.es/tag/venta-online-pymes/ 54 Anónimo. El Ministerio de Industria y AECEM cooperarán en la difusión y promoción del Plan Avanza, artículo de La Asociación Española de la Economía Digital, octubre de 2007. Consultado en mayo de 2011 en http://www.adigital.org/noticias/el-ministerio-de-industria-yaecem-cooperaran-en-la-difusion-y-promocion-del-plan-avanza Lynch, Patrick J., Sara Horton. Principios de diseño básicos para la creación de sitios web, Ediciones Gustavo Gili, 2000. Mariano Álvarez, José Durán. Manual de la Micro, Pequeña y Mediana Empresa. Una contribución a la mejora de los sistemas de información y el desarrollo de las políticas públicas, CEPAL - Naciones Unidas, 2009. Shawn Lawton Henry y los participantes del Grupo de Trabajo de Educación y Difusión (EOWG). Documento de la Iniciativa de Accesibilidad Web (WAI): Introducción a la Accesibilidad Web, septiembre de 2005. Consultado en mayo de 2012 en http://www.w3c.es/Traducciones/es/WAI/intro/accessibility/ Shawn Lawton Henry y los participantes del Grupo de Trabajo de Educación. Documento de la Iniciativa de Accesibilidad Web (WAI): Componentes esenciales de Accesibilidad Web, 2006. Consultado online en mayo de 2012 en http://www.w3c.es/Traducciones/es/WAI/intro/components/ Judy Brewer, Sarah Horton, y los participantes del Grupo de Trabajo de Educación y Difusión (EOWG). Documento de la Iniciativa de Accesibilidad Web (WAI): Las Pautas de Accesibilidad al Contenido en la Web, octubre de 2002. Consultado en mayo de 2012 en http://www.w3.org/WAI/impl/Overview Judy Brewer, Shawn Lawton Henry y los participantes del Grupo de Trabajo de Educación. Documento de la Iniciativa de Accesibilidad Web (WAI): Policies Relating to Web Accessibility, agosto de 2006. Consultado en mayo de 2012 en http://www.w3.org/WAI/Policy/ Disposición LEY 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio electrónico (LSSICE) que hace referencia a la accesibilidad, pág. 12. Consultado en mayo de 2012 en http://www.boe.es/boe/dias/2002/07/12/pdfs/A25388-25403.pdf Black, Roger. Web Sites that Work, Adobe Press, 1997. Anónimo. Artículo de la web Emergia: Usabilidad: la gran desconocida, enero de 2009. Consultado en enero de 2012 en http://www.emergia.net/investigacion/articulos/000603e Moreno, Luciano. Artículo en la web Desarrolloweb: El diseño equilibrado. El reticulado, mayo de 2009. Consultado en febrero de 2012 en http://www.desarrolloweb.com/articulos/1407.php Arnheim, Rudolf. Arte y percepción visual. Alianza Editorial, 1979, pág. 26. Fernández-Coca, A. Producción y diseño gráfico para la World Wide Web, Paidós, 1998. Sterne, Jim. Marketing en la World Wide Web : integre Internet en su estrategia de marketing, Promociones Jumerca, 1997. Macia, Fernando y Gosende, Javier. Posicionamiento en buscadores, Anaya Multimedia, 2006.