LA WEB CORPORATIVA. Claves para el éxito de la ventana a Internet de una organización.

Transcripción

1 LA WEB CORPORATIVA Claves para el éxito de la ventana a Internet de una organización. José Antonio González García 10/03/2011

2 CONTENIDO 1. Introducción Para qué la web corporativa? Arquitectura de contenidos Definición de los objetivos, fases y equipo de trabajo Fase de análisis Análisis de usuarios Selección de la metodología a aplicar Modelado de usuario Análisis de la web actual (en caso de rediseño) Análisis web de la competencia Análisis de la tecnología a utilizar Propuesta de estructura de contenidos Listado de contenidos Realizar test de usuarios: card-sorting Categorización temática de los contenidos Sistema de navegación Principales elementos de navegación Página de inicio Contenidos en la página de inicio Distribución de los espacios en blanco Conceptualización Negocios y Dirección 2

3 Prototipado estático Ejemplo de prototipo para página de inicio Ejemplo de prototipo para páginas interiores Realización del diagrama de interacción de plantillas por niveles Prototipado interactivo en html Propuesta para página de inicio Propuesta para Página interior Evaluación heurística del prototipado y validación Diseño de la interfaz web Usabilidad Directrices Google para webmasters Persuabilidad Accesibilidad Pautas para un buen diseño de interfaz Tamaño: ancho/alto del interfaz Color de fondo Textos Enlaces Formularios: cómo organizar los campos Dónde colocar las etiquetas de campos Cuándo usar combos, radio buttons y check box Ayudas visuales Pestañas Negocios y Dirección

4 Botones Elementos gráficos Listas Errores Feedback Respuesta Qué información solicitar Qué hacer con los formularios extensos Funcionalidad Mapa web Legalidad Implementación de la web Tecnologías de implementación Enterprise portals : Integradores de contenidos Software colaborativo y social Gestores de contenidos Tareas post-implantación Evaluación de usabilidad en laboratorio Fase de control Joomla! Secciones, categorías y artículos Gestión de usuarios Gestión de enlaces web Negocios y Dirección 4

5 6.4. Gestión de noticias externas Crear menús Menú principal Presentación de las categorías Presentación de los contactos Presentación de los enlaces web Presentación de las noticias externas Presentación del buscador Crear módulos Módulo de sindicación Módulo de acceso Módulo de noticias en flash Módulo de rutas Gestión de plantillas Wordpress Menú del administrador Escritorio Entradas Multimedia Enlaces Páginas Apariencia Drupal Negocios y Dirección

6 8.1. Drupal Gardens Elección de plantilla Gestión de contenidos Estructura del sitio Apariencia del sitio Gestión de usuarios Gestión de módulos Configuración de la página e informes Alojamiento Paneles de control CPanel Negocios y Dirección 6

7 1. INTRODUCCIÓN Hay muchas empresas especializadas en el diseño y construcción de webs, y normalmente se recurre a ellas cuando se necesita llevar a cabo un proyecto relacionado con la web corporativa. Las tareas que se deben llevar a cabo son muchas y son especializadas: arquitectura de contenidos, diseño, configuración de gestores de contenidos, programación Evidentemente, ningún gestor o responsable de marketing de una empresa puede pretender convertirse en un experto en cada una de estas tareas, que llevan profesiones distintas por detrás, pero sí que es importante tener una visión completa de la gran cantidad de tareas relacionadas con la creación de una web, conociéndolas todas y lo que implican con detalle. Es muy frecuente que se tienda a menospreciar la importancia de una buena inversión en la web corporativa, y existe una tendencia a comprar pequeños paquetes de diseño web a empresas externas sin conocimiento previo del negocio de su cliente y que ofrecen soluciones enlatadas, a veces con buenos diseños, siempre a bajo precio, pero que en ningún caso suelen estar alineadas con una estrategia global de marketing con una parte web. Con todo esto, los objetivos que pretendemos cubrir con este tema son: Que el lector entienda la importancia de tomar en serio un proyecto de construcción de una web. Que tenga presente las decenas de tareas que son altamente recomendables tener en cuenta y llevar a cabo. Que se tengan criterios suficientes para enfocar con garantías la externalización de un proyecto de construcción o remodelación de una web. Una vez más, feliz lectura! 7 Negocios y Dirección

8 2. PARA QUÉ LA WEB CORPORATIVA? A las alturas de siglo XXI que nos encontramos, es imprescindible comprender en toda su profundidad que hacer una web corporativa sólo por salir del paso, cumplir el expediente o porque tal competidor tiene también una, escatimando todo lo posible, supone una severa y aún bastante extendida miopía. Las posibilidades que brinda el canal Internet desde la filosofía web 2.0 para comprender, clasificar, atender personalizadamente y fidelizar al cliente nunca antes habían existido. Tener simplemente una web de por sí sirve para relativamente poco, salvo que se acompañe con una adecuada estrategia de marketing online en la que se debe priorizar la difusión de la marca a través de posicionamiento SEO, SMO o publicidad SEM o en redes publicitarias, aprender lo que el cliente quiere (obteniendo a toda costa información sobre él, incluso aunque no llegue a efectuar ninguna compra), ser ágiles y tener la estructura adecuada para ofrecérselo y, por supuesto, conseguir todas las ventas que sea posible. En resumidas cuentas, la web de una empresa, corporación o entidad jurídica debe servir al menos para: Transmitir la misión, visión y valores de la empresa, su know-how y casos de éxito. Mostrar el catálogo detallado de productos y servicios de la forma más experiencial posible. Obtener un canal de retroalimentación por parte del cliente o futuro cliente. Ofrecer un servicio de valor añadido por el canal Internet que no se puede ofrecer por ningún otro canal de una forma tan ágil (servicio técnico, ofertas personalizadas, etc). Una web corporativa puede, y en muchos casos debe, hacer uso de alguna de las tecnologías web 2.0 que hemos mencionado. Crear un blog para difundir el trabajo o conocimiento de la empresa o de sus empleados, generar redes sociales privadas de clientes o empleados, crear proyectos en los que todos los participantes apoyen y aporten a través de una wiki, tener noticias y eventos actualizados en la web y en redes sociales públicas, dar soporte online a un cliente a través de una herramienta de gestión de clientes (CRM) Todas estas prácticas, que redundan en la comunicación bidireccional con el cliente, deberían ser tenidas en cuenta como posibles partes del diseño de una web corporativa o, en algunos casos, de alguna web anexa relacionada o subsite (normalmente dedicada en exclusiva a un producto o servicio). Negocios y Dirección 8

9 Pero, aparte de tener muy presente la filosofía web 2.0 en cuanto a lo que funcionalmente ofrece un sitio web corporativo, para garantizar el éxito del mismo, y aparte de la promoción, se tienen que tener en cuenta en su diseño la arquitectura de sus contenidos, la aplicación de criterios de usabilidad, directrices para conseguir conversión (persuabilidad) y otras buenas prácticas, para que el resultado final plasmado en la web sea de por sí un aporte significativo para conseguir ventas o conversiones de visitantes en clientes. Lo vemos en detalle: 9 Negocios y Dirección

10 3. ARQUITECTURA DE CONTENIDOS El primer paso en la construcción de una web, previo al diseño y a la construcción de la misma, es plantear sus contenidos y en base a ellos definir una arquitectura. Louis Rosenfeld (louisrosenfeld.com) y Peter Morville (semanticstudios.com/about) plantean que la Arquitectura de Información se define a través de estas tres frases: La combinación de esquemas de organización, etiquetado y navegación, dentro de un sistema de información. El diseño estructural de un espacio de información para facilitar la terminación de tareas y el acceso intuitivo al contenido. El arte y la ciencia de estructurar y clasificar sitios web e intranets, para ayudar a las personas a encontrar y administrar información. Respecto de qué tareas debería desarrollar un arquitecto de información plantean definiciones muy concretas al respecto: Aclarar la misión y la visión del sitio, haciendo un balance entre las necesidades de la organización que lo impulsa y las necesidades de sus audiencias. Determinar qué contenidos y funcionalidades deberá contener el sitio. Especificar cómo buscarán información en el sitio los usuarios, mediante la definición de sus sistemas de organización, navegación, etiquetado y búsqueda. Proyectar cómo se acomodará el sitio al cambio y el crecimiento a lo largo del tiempo. A continuación se enumeran los pasos a seguir (o fases) en el desarrollo de la arquitectura de contenidos. El orden establecido en la misma es susceptible de variar en función del proyecto, siendo posible aunar las dos primeras fases en una misma fase llamada Definición y Análisis DEFINICIÓN DE LOS OBJETIVOS, FASES Y EQUIPO DE TRABAJO El primer paso en el proceso de la arquitectura de información es definir los objetivos de la web, las fases y el equipo de trabajo que se va a encargar de la construcción de la web: Planificar unas primeras reuniones de equipo y con cliente (brainstorming o lluvia de ideas) donde se recojan las opiniones y sensibilidades de todos los actores posibles para: Determinar quién o quiénes van a intervenir en la formulación de los objetivos. Negocios y Dirección 10

11 Determinar si contamos con tiempo y/o recursos para establecer una declaración formal de esos objetivos o si por el contrario una declaración informal de los mismos va a ser suficiente. Preguntas indispensables: Cuál es la misión o el propósito de la organización/empresa/institución de la web? Cuáles son los objetivos, a corto y largo plazo, de la web? Qué usuarios se espera? Hacia qué usuarios va dirigida? Por qué deberían visitar la web? Qué beneficio se prevé alcanzar con la web? Cómo? Confrontando esta información se definirán los requerimientos del sitio, entre los que podemos contar requerimientos técnicos (back-end y front-end), recursos humanos y perfiles profesionales necesarios, y adecuación del presupuesto disponible FASE DE ANÁLISIS ANÁLISIS DE USUARIOS El objetivo de esta fase es determinar cuál va a ser el perfil del público objetivo del sitio web. Este público objetivo (en el mejor de los casos y si se hace bien) debería estar determinado por un plan de marketing global, pero aún en ese caso será preciso conocer, sobre ese target, alguna información adicional que será útil para la arquitectura y diseño de la web: Qué necesita el usuario. Cuáles son sus objetivos. Cómo se comporta y actúa. Cuál será su contexto de uso. Cómo afectará a su interacción, experiencia y conocimientos previos. SELECCIÓN DE LA METODOLOGÍA A APLICAR La respuesta a estas preguntas se resuelve estudiando a la audiencia a través de métodos de indagación. Éstos engloban métodos de aproximación contextual, estudios de campo o etnográficos, métodos de aproximación por grupos y métodos de aproximación individual y de grupo. 11 Negocios y Dirección

12 Encuestas: Las encuestas son una de las formas tradicionales de sondear a tus usuarios acerca de sus gustos. Son un buen recurso porque permiten plantear la duda exacta que se estime necesaria a la audiencia. Podemos preguntarles si les gusta un producto concreto, si consideran útil tal sección, qué tipo de contenido les gustaría que se incluyera y cualquier otra cosa que se considere procedente. Focus groups: Entrevistas en grupo (5 a 8 personas). Su objetivo está relacionado con la obtención de opiniones y sentimientos por parte de los usuarios, para saber qué es lo que les gusta, que necesitan, etc. Foros: Se localizan foros que hablen sobre la misma temática de nuestra web y se observa qué asuntos son los más tratados, las dudas que se exponen, las cosas que les desagradan y les gustan a la audiencia, o incluso se puede montar una encuesta improvisada para preguntarles sobre lo que les interesa. Algunos autores afirman que otra metodología es la Observación directa. Toda la información obtenida de dichos estudios debe servir como base para la arquitectura de la Información, pero para ello se debe resumir y sintetizar dicha información en lo que se denomina Modelado de usuario : MODELADO DE USUARIO Consiste en la definición de clases o perfiles de usuarios en base a atributos comunes. Los atributos sobre los que se hará la clasificación dependen de la información que se tenga de la audiencia, pero normalmente se tratarán de atributos tales como necesidades de información, condiciones de acceso, experiencia y conocimientos. El problema de esta técnica de modelado de usuario se produce cuando la audiencia es demasiado extensa y heterogénea, la categorización total de la audiencia puede no ser viable. En estos casos es conveniente hacer uso del enfoque 'persona', ideado por Alan Cooper ( Esta técnica se basa en la definición de arquetipos de usuarios que representan patrones de conducta, objetivos y necesidades. Estos arquetipos, llamados "personas", son descripciones en forma narrativa de usuarios, a los que se les da una identidad inventada: fotografía, nombre,... Todos los atributos, características y necesidades del arquetipo deben estar basados en información real extraída de la audiencia objetiva del sitio web, ya que si éstos fueran datos inventados la técnica perdería toda su utilidad. Negocios y Dirección 12

13 ANÁLISIS DE LA WEB ACTUAL (EN CASO DE REDISEÑO) Si lo que se va a abordar es un proyecto de renovación de la web conviene realizar un análisis de la web actual para detectar aciertos y errores que sirvan como información previa. Este análisis se realizará a través del estudio de los siguientes aspectos: Estadísticas de la web. Estructura de contenidos. Principales problemas reportados por los usuarios. ANÁLISIS WEB DE LA COMPETENCIA Resulta útil ver cómo han solucionado las necesidades para el mismo tipo de usuarios la competencia, para ello haremos una búsqueda de las webs con objetivos similares y analizaremos aciertos y errores de las mismas. Es una buena forma de empezar a conocer los gustos de tu audiencia. Mirar qué ofrecen, qué secciones tienen, cómo estructuran los contenidos. Analizar los comentarios en sus artículos o productos, observar cuáles generan más polémica, qué dudas plantean en base a ellos los usuarios, etc. Algunos métodos para conocer a la competencia serían: Encuesta a usuarios objetivo sobre qué webs visitan relacionadas con la temática y cuáles prefieren. Webs bien posicionadas en buscadores (Google, etc.) sobre la temática. Consulta y análisis de visitas de las webs mejor posicionadas mediante herramientas online como Compete (compete.com) o Alexa ( Análisis del interés suscitado por los usuarios en los buscadores a través de Google Trends ( ANÁLISIS DE LA TECNOLOGÍA A UTILIZAR Aunque este paso se incluye en esta fase y se aconseja que se tenga lo más claro posible este aspecto cuanto antes se puede ir realizando el análisis de manera paralela por parte del equipo técnico, siempre y cuando las decisiones no afecten a la propuesta de contenidos y conceptualización de los mismos. Se recomienda finalizar este análisis antes de acometer la fase de prototipado. 13 Negocios y Dirección

14 Con qué lenguaje se va a desarrollar la el sitio web? Qué gestor de contenidos es el más apropiado? Será necesario proporcionar soporte? Cómo se analizará el tráfico de visitas del sitio web? Seleccionar un sistema de estadísticas web. Consultar y realizar un informe sobre toda esta información con el soporte de la parte técnica del equipo del proyecto web PROPUESTA DE ESTRUCTURA DE CONTENIDOS Desde este punto en adelante, en todo el proceso de arquitectura de contenidos, se tienen que tener en cuenta en paralelo al proceso de arquitectura de contenidos los criterios sobre diseño detallados en el apartado 4. LISTADO DE CONTENIDOS Los contenidos son el principal fundamento de un sitio web y para que el usuario llegue sin problemas a ellos estos han de estar organizados de la forma más lógica y reconocible por el usuario. Realizaremos un listado general de todos los contenidos que demanda el cliente (o que ya existen, en el caso de que se trate de una renovación de una web ya existente) más aquellos que puede necesitar el usuario. REALIZAR TEST DE USUARIOS: CARD-SORTING Una vez se hayan recopilado los contenidos a incluir en el sitio web se recomienda realizar la prueba de usuarios llamada card sorting para conocer la forma que será mejor aceptada de relacionar y agrupar los contenidos por parte de los usuarios con el perfil hacia el que se dirige el sitio web. La técnica de card sorting se basa en la observación de cómo los usuarios agrupan y asocian entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías temáticas del sitio web. Negocios y Dirección 14

15 De esta forma, partiendo del comportamiento de los propios usuarios, es posible organizar y clasificar la información de un sitio web conforme a su modelo mental. Se puede encontrar un ejemplo práctico y muy detallado de aplicación de esta técnica en: CATEGORIZACIÓN TEMÁTICA DE LOS CONTENIDOS La lista de temas resultante de la categorización básica de los contenidos (mejor si se ha realizado la prueba del card sorting) nos valdrá como base para sería realizar una propuesta de estructura más en detalle y de los nombres de las páginas. Se realizará una primera categorización de la los contenidos proponiendo una lista básica ordenada y jerarquizada de los temas que incluiría el sitio web, con una primera descripción y palabras clave: Nº Títulos Contenidos (general) Palabras clave 1 1. Sección 1 2 a. Página 1 3 b. Página 2 4 c. Página Sección 2 6 a. Página 1 7 b. Página 2 8 c. Página 3 Una vez se ha completado la estructura anterior se recomienda trasladar esa información a una estructura gráfica en árbol, que básicamente muestra la misma información pero que además permite visualizar las conexiones entre cada página, es decir, la navegación propuesta entre las páginas de los niveles principales: 15 Negocios y Dirección

16 3.4. SISTEMA DE NAVEGACIÓN Los sistemas de navegación son los elementos de una interfaz que permiten la navegación por las diferentes secciones y páginas que componen el sitio web. Establecen un modo de ir de un sitio a otro dentro de la web. La navegación debe ser clara, concisa, consistente y fácilmente identificable dentro de la página. Comunican al usuario la relación entre el contenido que está visualizando y la navegación del sitio. Debemos permitir que el usuario sepa en todo momento dónde se encuentra, hacia donde puede ir desde este punto y que partes del sitio ha visitado ya. Reflejan la arquitectura del sitio que subyace al sistema de navegación. Debemos diferenciar la navegación global, la navegación jerárquica, la navegación local y la navegación contextual. Permiten volver a la página de inicio. En un sitio web la página de inicio sirve como punto de partida y como lugar al que volver cuando nos encontramos perdidos, por eso debe ser sencillo ir a este punto desde cualquier parte del sitio. PRINCIPALES ELEMENTOS DE NAVEGACIÓN 1) Cabecera a. Logotipo con enlace a la página de inicio b. Nombre del sitio web 2) Utilidades del sitio a. Contacto b. Directorio (cuando sea necesario) c. Accesibilidad d. Mapa de sitio Negocios y Dirección 16

17 e. Ayuda 3) Buscador 4) Menú principal 5) Breadcrumb / Miga de pan 6) Títulos de las páginas / rótulos 7) Menú local 8) Paginación 9) Pie de página a. Navegación recursiva (en caso de incluirla) La ubicación recomendada de los elementos de navegación suele ser la siguiente: Navegación Global continua (accesible desde todas las páginas) Navegación jerárquica (páginas interiores) Navegación local (páginas interiores) Navegación contextual (páginas interiores) Navegación Global continua (accesible desde todas las páginas) Importante: Una página huérfana es aquella desde la cual no se puede acceder a ninguna otra. Cuando el usuario se encuentra con una de estas páginas la confusión y el enfado pueden ser considerables, con lo que hay que evitarlas a toda costa PÁGINA DE INICIO CONTENIDOS EN LA PÁGINA DE INICIO La página de inicio debe ser diferente al resto de páginas del sitio web y cumplir la función de 'escaparate' del sitio, para ello debe mostrar de forma precisa y completa qué contenidos o servicios ofrece realmente. La página de inicio de tu web es la puerta principal de acceso a tu web. Por ella entrarán la mayor parte de visitantes, por lo que hay que cuidar al máximo cada detalle. 17 Negocios y Dirección

18 Se recomienda enlazar la página de inicio a las secciones principales de la web, desde las cuales se enlazaría al contenido de esa sección concreta, etc. Se recomienda utilizar la página de inicio para: Definir los objetivos del sitio. Resaltar áreas de contenido de la web y conducir a los visitantes hacia las mismas. Destacar lo nuevo. Es recomendable utilizar un cuestionario como el siguiente para ayudar a hacer el planteamiento de la página de inicio: 1. Cuáles son los principales motivos por los que se desea rediseñar la web? 2. Cuál es el público objetivo de la web? Identificar colectivos. 3. Qué se espera conseguir de cada uno de los colectivos identificados en el punto anterior? 4. Cuáles son los motivos por los que los clientes eligen los productos y servicios de la empresa? 5. Cómo se diferencia la empresa de su competencia? 6. Cuáles son los motivos por los que los futuros empleados eligen esta empresa para trabajar 7. Desde un punto de vista de imagen y marketing, qué mensaje transmite actualmente la empresa fuera del mundo de la web? 8. Se desea transmitir el mismo mensaje en la web? Si es diferente, describirlo. 9. Qué clase de respuesta emocional deberían sentir los usuarios cuando visiten la web? 10. Cuál es la información de la empresa cuya aparición en la página de inicio se considera imprescindible? DISTRIBUCIÓN DE LOS ESPACIOS EN BLANCO El espacio en blanco resulta vital para contribuir a la visibilidad de los elementos y su comprensión. Por tanto, saturar la página principal de contenidos propicia que éstos, o buena parte de ellos, resulten invisibles al lector, que se ve desbordado, sobreestimulado, y termina por no poder rastrear fácilmente sus contenidos. Lo malo es que destacar algo sobre el resto implica que el resto se vea menos. Por eso hay que elegir bien qué se pone en la página principal y, de ello, qué se destaca sobre el resto. Es Negocios y Dirección 18

19 imposible destacarlo todo. Si se cae en el error de poner todos los contenidos de color diferente al resto tendremos un parchís (o arco iris) difícil de manejar. El problema, por tanto, es determinar la cantidad exacta de espacio en blanco que debe tener una página de inicio para estar en los márgenes correctos. Según Nielsen y Marie Thair, el espacio sin utilizar de una página de inicio debería situarse en torno al 25%, y el empleado como mero relleno en el 6%. Un buen ejemplo de uso de espacio en blanco en página de inicio es el de la UOC ( 19 Negocios y Dirección

20 3.6. CONCEPTUALIZACIÓN En proyectos de gran volumen es recomendable que la arquitectura muestre el prototipo de la página de inicio y de uno o dos interiores para que, una vez revisados, se trabaje en el resto de prototipos y se realice una Biblioteca de prototipos. Este es un documento que recoge todos los prototipos para la nueva web, y que se efectúa una vez se tiene clara la organización de contenidos, la navegación y el enfoque de la página de inicio. PROTOTIPADO ESTÁTICO Prototipos: imágenes que muestran la organización de los contenidos en una página, resultan básicos para el posterior diseño gráfico de la web. Estos pueden ser de dos tipos: Baja fidelidad: Indican la disposición de los contenidos por regiones, a modo de mapa. Alta fidelidad: Indican la ubicación de los contenidos más al detalle. Los formatos más utilizados para hacer estos prototipos son ppt, doc, vsd, o incluso en bolígrafo, aunque se recomienda utilizar el programa VISIO (vsd). A continuación vamos a ver algunos ejemplos reales, en este caso prototipos de la web institucional de la Oficina de Cooperación Universitaria: EJEMPLO DE PROTOTIPO PARA PÁGINA DE INICIO Baja fidelidad Alta fidelidad Cabecera (Logotipo y Nombre) Menú de navegación global Editar Logo Oficina de Cooperación Universitaria Mapa web Buscar Accesibilidad Contacto Acceso privado Banner El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo Accesos directos Banner de imágenes Dónde estamos Trabaja con nosotros Destacado principal Actualidad Destacados Accesos Directos Universitas XXI, la solución OCU ofrece a las universidades una solución integral de gestión a través de su ERP UNIVERSITAS XXI, siempre a la vanguardia de las funcionalidades universitarias. Académico Recursos Humanos Económico Imagen Investigación Data Warehouse Portal Mas información sobre Universitas XXI. > Clientes de OCU en el mundo Son ya más de 100 universidades iberoamericanas las que han depositado su confianza en OCU como Imagen proveedor de soluciones. Clientes de OCU en el mundo UNIVERSITAS XXI ha supuesto un vínculo entre las universidades en materias comunes Imagen relacionadas con el trabajo de los departamentos. Especiales de OCU Conoce el portal de los Costes Proyecto Universidad Digital 2010 Foro de Universitas XXI Académico Ver todos los Especiales > Noticias de OCU Casos de éxito Garantía de calidad Promotores Pie de página FORAC 2008 Celebrado el Foro Imagen Universitas XXI Académico los días 21 y 22 de Febrero en Universidad d'alacant. 10/02/2006. Implantación del Sistema de Gestión de la Calidad en OCU. Resumen y resultados. 03/04/2006. Curso de Oracle Application Server 10g. El Rector del Politécnico Colombiano Jaime Isaza Imagen Cadavid nos habla de las mejoras que ha supuesto Universitas XXI Espacio Europeo de Educación Superior (EEES) OCU garantiza el cumplimiento de la nueva normativa Imagen referente al Espacio Europeo de Educación Superior. Certificado con la Norma ISO 9001:2000. Posicionado entre los mejores en la gestión de la educación superior 2007 OFICINA DE COOPERACIÓN UNIVERSITARIA / SOCIOS Logo Logo Logo Logo Logo Logo Logo Política de privacidad Sistema de Calidad Trabajo Contacto Negocios y Dirección 20

21 EJEMPLO DE PROTOTIPO PARA PÁGINAS INTERIORES Baja fidelidad Alta fidelidad Breadcrumb (migas de pan) Menú de navegación local Título de la página Cabecera Menú de navegación global Contenido de la página Pie de página Contenidos relacionados Editar Logo Oficina de Cooperación Universitaria Está en: Inicio > Sección > Subsección > Página SECCIÓN Subsección 1 Subsección 2 Subsección 3 Subsección 1 Subsección 1 Título de la página Imagen Subtítulo de la página IMapa web Buscar Accesibilidad Contacto El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Política de privacidad Sistema de Calidad Trabajo Contacto Acceso privado Contenidos relacionados Enlace relacionado 1 Enlace relacionado 2 REALIZACIÓN DEL DIAGRAMA DE INTERACCIÓN DE PLANTILLAS POR NIVELES Para ilustrar la idea de los diferentes niveles que va a tener la web y las plantillas que han de construirse en la implementación de la misma se realizará un esquema en el que podamos ver la disposición de los prototipos por niveles. 21 Negocios y Dirección

22 Editar Está en: Inicio > Sección > Subsección > Página SECCIÓN Subsección 1 Subsección 2 Subsección 3 Subsección 1 Subsección 1 Cooperación Universitaria Imagen Subtítulo de la página Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Inicio Mapa web Buscar Contacto Accesibilidad El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Oficina de Cooperación Universitaria, S.A. Calidad Bolsa de Trabajo Contacto Editar Está en: Inicio > Sección > Subsección > Página SECCIÓN Subsección 1 Subsección 2 Subsección 3 Subsección 1 Subsección 1 Contenidos relacionados Enlace relacionado 1 Enlace relacionado 2 Cooperación Universitaria Imagen Acceso privado Subtítulo de la página Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Inicio Mapa web Buscar Contacto Accesibilidad El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Oficina de Cooperación Universitaria, S.A. Calidad Bolsa de Trabajo Contacto Editar Editar Está en: Inicio > Título de la página Cooperación Universitaria Editar Inicio Mapa web Buscar Contacto Accesibilidad Cooperación Universitaria Inicio Mapa web Buscar Contacto Accesibilidad Acceso privado El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo Universitas XXI, la solución OCU ofrece a las universidades una solución integral de gestión a través de su ERP UNIVERSITAS XXI, siempre a la vanguardia de las funcionalidades universitarias. Imagen Noticias de OCU Imagen Académico Recursos Humanos Económico Investigación Mas información sobre Universitas XXI. > Data Warehouse Portal FORAC 2008 Celebrado el Foro Universitas XXI Académico los días 21 y 22 de Febrero en Universidad d'alacant. 10/02/2006. Implantación del Sistema de Gestión de la Calidad en OCU. Resumen y resultados. 03/04/2006. Curso de Oracle Application Server 10g. OFICINA DE COOPERACIÓN UNIVERSITARIA / SOCIOS El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo Imagen Está en: Inicio > Sección > Subsección Imagen IMAGEN OPTATIVA Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Oficina de Cooperación Universitaria, S.A. Calidad Bolsa de Trabajo Contacto Subtítulo de la página Editar Está en: Inicio > Sección > Subsección Contenidos relacionados Contenido 1 Contenido 2 Acceso privado Cooperación Universitaria Imagen Subtítulo de la página Clientes de OCU en el mundo Imagen Son ya más de 100 universidades iberoamericanas las que han depositado su confianza en OCU como proveedor de soluciones. Clientes de OCU en el mundo Imagen Casos de éxito Imagen UNIVERSITAS XXI ha supuesto un vínculo entre las universidades en materias comunes relacionadas con el trabajo de los departamentos. El Rector del Politécnico Colombiano Jaime Isaza Cadavid nos habla de las mejoras que ha supuesto Universitas XXI Espacio Europeo de Educación Superior (EEES) Imagen OCU garantiza el cumplimiento de la nueva normativa referente al Espacio Europeo de Educación Superior. Logo Logo Logo Logo Logo Logo Logo Oficina de Cooperación Universitaria, S.A. Calidad Bolsa de Trabajo Contacto Inicio Mapa web Buscar Contacto Accesibilidad El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo SECCIÓN Subsección 1 Subsección 2 Subsección 3 Subsección 1 Subsección 1 Inicio Mapa web Buscar Contacto Accesibilidad Título Separador 1 El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo SECCIÓN Subsección 1 Subsección 2 Subsección 3 Subsección 1 Subsección 1 Acceso privado Contenidos relacionados Enlace relacionado 1 Enlace relacionado 2 Título Separador 1 Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Título Separador 2 Título Separador 3 Título Separador 4 Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Oficina de Cooperación Universitaria, S.A. Calidad Bolsa de Trabajo Contacto Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Acceso privado Contenidos relacionados Contenido relacionado 1 Contenido relacionado 2 Título Separador 2 Título Separador 3 Título Separador 4 Oficina de Cooperación Universitaria, S.A. Calidad Bolsa de Trabajo Contacto Contenidos relacionados Contenido relacionado 1 Contenido relacionado 2 Editar Acceso privado Editar Está en: Inicio > Noticias > Detalle Accesos directos Dónde estamos Trabaja con nosotros Especiales de OCU Conoce el portal de los Costes Proyecto Universidad Digital 2010 Foro de Universitas XXI Académico Ver todos los Especiales > Garantía de calidad Certificado con la Norma ISO 9001:2000. Posicionado entre los mejores en la gestión de la educación superior 2007 Está en: Inicio > Acceso privado Cooperación Universitaria Inicio Mapa web Buscar Contacto Accesibilidad Acceso privado El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo Imagen Cooperación Universitaria INICIO Utilidades Mapa web Buscar Accesibilidad Contacto Acceso Privado El Grupo OCU Historia Socios accionistas Qué ofrecemos Nuestro equipo. Tour virtual Trabaja con nosotros La solución Académico Recursos Humanos Data Warehouse Económico Investigación Portal Recursos Humanos Servicios Servicios técnicos Formación Consultoría estratégica Consultoría web Moodle Licencias Implantaciones Desarrollos a medida Los clientes OCU España OCU América Casos de éxito Casos de éxito Partners/Socios tecnológicos Oracle Microsoft Noticias Archivo Histórico OCU en el mundo España Colombia Chile Ecuador Nicaragua República Dominicana Venezuela Información corporativa de interés Política de privacidad Sistema de calidad Informe de Gartner Oficina de Cooperación Universitaria, S.A. Calidad Bolsa de Trabajo Contacto Editar Está en: Inicio > Los Clientes > OCU España LOS CLIENTES OCU España OCU América Casos de éxito Inicio Mapa web Buscar Contacto Accesibilidad El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo Los días 21 y 22 de febrero de 2008 se celebrará el I Foro de Gestión Académica en las Universidades (I FORAC). 17-ENE :29 Los días 21 y 22 de febrero de 2008 la Oficina de Cooperación Universitaria reunirá en la Universitat d Alacant a 250 responsables universitarios para debatir los retos de la Europa del Conocimiento en la realidad de la Universidad Española, implantación de los nuevos estudios y tendencias en el marco legislativo español referidas a la estructura de las enseñanzas universitarias superiores. Se trata del I Foro de Gestión Académica en las Universidades (I FORAC). Se presentará cómo UNIVERSITAS XXI - ACADÉMICO, sistema líder de gestión académica con 24 Universidades usuarias en España y 15 en América, da respuesta a la gestión del nuevo marco académico al que se enfrentan las Universidades. Asistirán Rectores, Vicerrectores y Gerentes de todas las universidades españolas. Contaremos además con la presencia de Vicegerentes, Jefes de Servicio y de Gestión Académica, Profesorado, Ordenación Académica, Extensión Universitaria y Convergencia Europea y, por último, añadiremos un perfil tecnológico con los Directores de Informática y responsables técnicos de gestión académica. Se trata del I Foro de Gestión Académica en las Universidades (I FORAC). Se presentará cómo UNIVERSITAS XXI - ACADÉMICO, sistema líder de gestión académica con 24 Universidades usuarias en España y 15 en América, da respuesta a la gestión del nuevo marco académico al que se enfrentan las Universidades. Se trata del I Foro de Gestión Académica en las Universidades (I FORAC). Se presentará cómo UNIVERSITAS XXI - ACADÉMICO, sistema líder de gestión académica con 24 Universidades usuarias en España y 15 en América, da respuesta a la gestión del nuevo marco académico al que se enfrentan las Universidades. Más noticias Cooperación Universitaria Imagen Inicio Mapa web Buscar Contacto Accesibilidad Las Universidades españolas Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum. Editar Está en: Inicio > Noticias El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo Acceso privado 10/02/2006. Implantación del Sistema de Gestión de la Calidad en OCU. Resumen y resultados. 03/04/2006. Curso de Oracle Application Server 10g. 10/02/2006. Implantación del Sistema de Gestión de la Calidad en OCU. Resumen y resultados. Archivo de noticas Andalucía Universidad de Almería Universidad de Cádiz Universidad de Córdoba Universidad de Granada Universidad de Huelva Universidad de Jaén Universidad de Málaga Universidad Pablo de Olavide Universidad de Sevilla Universidad Internacional de Andalucía Aragon Universidad de Zaragoza Universidad de San Jorge Castilla La Mancha Universidad de Castilla la Mancha Madrid Universidad Alfonso X el Sabio Universidad Antonio de Nebrija Universidad Autónoma de Madrid Universidad Camilo José Cela Universidad Carlos III de Madrid Universidad de Alcalá Universidad Europea de Madrid Universidad Francisco de Vitoria Universidad Nacional de Educación a Distancia Universidad Politécnica de Madrid Universidad Pontificia de Comillas Universidad Rey Juan Carlos Universidad San Pablo CEU Cooperación Universitaria Inicio Mapa web Buscar Contacto Accesibilidad Acceso privado El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo Imagen Acceso privado Contenidos relacionados Contacta con nosotros Sedes de OCU IMAGEN Los días 21 y 22 de febrero de 2008 la Oficina de Cooperación Universitaria reunirá en la Universitat d Alacant a 250 responsables universitarios para debatir los retos de la Europa del Conocimiento en la realidad de la Universidad Española. 10/02/2006. Implantación del Sistema de Gestión de la Calidad en OCU. Resumen y resultados. 03/04/2006. Curso de Oracle Application Server 10g. 10/02/2006. Implantación del Sistema de Gestión de la Calidad en OCU. Resumen y resultados. 03/04/2006. Curso de Oracle Application Server 10g. 10/02/2006. Implantación del Sistema de Gestión de la Calidad en OCU. Resumen y resultados. 03/04/2006. Curso de Oracle Application Server 10g. Oficina de Cooperación Universitaria, S.A. Calidad Bolsa de Trabajo Contacto Contenidos relacionados Archivo histórico La web corporativa Página de inicio Logo Oficina de Banner de imágenes Prototipo Primer nivel Logo Oficina de Título de la página Prototipo Logo Oficina de Título de la página Prototipo Logo Oficina de Mapa web Prototipo Logo Oficina de Noticias Prototipo Segundo nivel Logo Oficina de Título de la página Prototipo Logo Oficina de Título de página Prototipo Logo Oficina de OCU España Prototipo Tercer nivel Oficina de Logo Cooperación Universitaria Título de página Prototipo Logo Oficina de Detalle de Noticia Prototipo PROTOTIPADO INTERACTIVO EN HTML Suele ser una práctica realizar un maquetado básico en HTML con una herramienta que facilite el diseño basado en plantillas, y sobre él las correcciones o modificaciones que hubiera que realizar con posterioridad. Los prototipos interactivos son los que mejor permiten validar la experiencia que se tendrá con la web una vez esté construida, ya que tienen un aspecto e interacción idénticos a la web que finalmente será construida, y tampoco es muy costoso hacer esta implementación una vez que el diseño está completado. Se puede utilizar como herramienta Adobe Dreamweaver ( para crear este tipo de prototipos interactivos por la facilidad de actualización de modificaciones en diseño y estructura que ofrece. Siguiendo con el mismo ejemplo: Negocios y Dirección 22

23 PROPUESTA PARA PÁGINA DE INICIO Editar Mapa web Buscar Accesibilidad Contacto Acceso privado Logo Oficina de Cooperación Universitaria El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo Banner de imágenes Accesos directos Dónde estamos Trabaja con nosotros Universitas XXI, la solución OCU ofrece a las universidades una solución integral de gestión a través de su ERP UNIVERSITAS XXI, siempre a la vanguardia de las funcionalidades universitarias. Académico Recursos Humanos Económico Imagen Investigación Data Warehouse Portal Mas información sobre Universitas XXI. > Clientes de OCU en el mundo Son ya más de 100 universidades iberoamericanas las que han depositado su confianza en OCU como Imagen proveedor de soluciones. Clientes de OCU en el mundo UNIVERSITAS XXI ha supuesto un vínculo entre las universidades en materias comunes Imagen relacionadas con el trabajo de los departamentos. Especiales de OCU Conoce el portal de los Costes Proyecto Universidad Digital 2010 Foro de Universitas XXI Académico Ver todos los Especiales > Noticias de OCU Casos de éxito Garantía de calidad Imagen FORAC 2008 Celebrado el Foro Universitas XXI Académico los días 21 y 22 de Febrero en Universidad d'alacant. Imagen El Rector del Politécnico Colombiano Jaime Isaza Cadavid nos habla de las mejoras que ha supuesto Universitas XXI Certificado con la Norma ISO 9001: /02/2006. Implantación del Sistema de Gestión de la Calidad en OCU. Resumen y resultados. 03/04/2006. Curso de Oracle Application Server 10g. Espacio Europeo de Educación Superior (EEES) OCU garantiza el cumplimiento de la nueva normativa Imagen referente al Espacio Europeo de Educación Superior. Posicionado entre los mejores en la gestión de la educación superior 2007 OFICINA DE COOPERACIÓN UNIVERSITARIA / SOCIOS Logo Logo Logo Logo Logo Logo Logo Política de privacidad Sistema de Calidad Trabajo Contacto PROPUESTA PARA PÁGINA INTERIOR Editar IMapa web Buscar Accesibilidad Contacto Acceso privado Logo Oficina de Cooperación Universitaria El Grupo OCU La Solución Servicios Los clientes Partners Noticias OCU en el Mundo Está en: Inicio > Título de la página Título de la página Contenidos relacionados IMAGEN OPTATIVA Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Contenido 1 Contenido 2 Imagen Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Política de privacidad Sistema de Calidad Trabajo Contacto EVALUACIÓN HEURÍSTICA DEL PROTOTIPADO Y VALIDACIÓN Tras realizar los prototipos conviene realizar un primer análisis de heurística que servirá para evaluar y auditar la propuesta de arquitectura de contenidos, diseño de la página de inicio, navegación y prototipos, a través de las respuestas a un cuestionario como el siguiente (cualquier respuesta dudosa debería hacer que cuestionásemos el diseño): 23 Negocios y Dirección

24 Cuáles son los objetivos del sitio web? Son concretos y bien definidos? Los contenidos y servicios que ofrece se corresponden con esos objetivos? Muestra de forma precisa y completa qué contenidos o servicios ofrece realmente el sitio web? Esto está relacionado directamente con el diseño de la página de inicio, que debe ser diferente al resto de páginas y cumplir la función de 'escaparate' del sitio. La estructura general del sitio web está orientada al usuario? Los sitios web deben estructurarse pensando en el usuario, sus objetivos y necesidades. No se debe calcar la estructura interna de la empresa u organización, al usuario no le interesa cómo funciona o se organiza la empresa. El look & feel general se corresponde con los objetivos, características, contenidos y servicios del sitio web? Por ejemplo, los colores empleados. Aunque el significado que comunica un determinado color es muy subjetivo y dependiente de la cultura y el entorno, y por lo tanto diferente para cada usuario, ciertas combinaciones de colores ofrecen una imagen más o menos formal, seria o profesional, como pueden ser los tonos de azules con el blanco, que trasmiten una imagen corporativista. Es coherente el diseño general del sitio web? Se debe mantener una coherencia y uniformidad en las estructuras y colores de todas las páginas. Esto sirve para que el usuario no se desoriente en su navegación. Es reconocible el diseño general del sitio web? Cuánto más se parezca el sitio web al resto de sitios web, más fácil será de usar. El sitio web se actualiza periódicamente? Indica cuándo se actualiza? Las fechas que se muestren en la página deben corresponderse con actualizaciones, noticias, eventos...no con la fecha del sistema del usuario. Se muestra claramente la identidad de la empresa-sitio a través de todas las páginas? El logotipo, es significativo, identificable y suficientemente visible? El eslogan o tagline (si existe), expresa realmente qué es la empresa y qué servicios ofrece? Se ofrece algún enlace con información sobre la empresa, sitio web, 'webmaster',...? Se proporciona mecanismos para ponerse en contacto con la empresa? ( , teléfono, dirección postal, fax...) Se proporciona información sobre la protección de datos de carácter personal de los clientes o los derechos de autor de los contenidos del sitio web? En artículos, noticias o informes... Se muestra claramente información sobre el autor, fuentes y fechas de creación y revisión del documento? Negocios y Dirección 24

25 El sitio web habla el mismo lenguaje que sus usuarios? Se debe evitar usar un lenguaje corporativista. De igual modo, hay que prestarle especial atención al idioma, y ofrecer versiones del sitio en diferentes idiomas cuando sea necesario. Emplea un lenguaje claro y conciso? Es amigable, familiar y cercano? Es decir, lo contrario a utilizar un lenguaje constantemente imperativo, mensajes crípticos, o tratar con "desprecio" al usuario. 1 párrafo = 1 idea? Cada párrafo es un objeto informativo. Hay que transmitir, sean ideas o mensajes, pero se deben evitar párrafos vacíos o varios mensajes en un mismo párrafo. Una vez realizada la evaluación heurística y las modificaciones pertinentes ya es posible comenzar con la implementación. 25 Negocios y Dirección

26 4. DISEÑO DE LA INTERFAZ WEB Vamos a hacer un repaso a todos los criterios que se han de tener en cuenta a la hora de abordar el diseño de una web que, como ya hemos visto antes, se aplican en paralelo a la construcción de la arquitectura de contenidos: 4.1. USABILIDAD Hay innumerables definiciones de usabilidad para la web, pero un resumen muy acertado es el que proporciona Eduardo Manchón en Los principios generales a aplicar para un buen diseño web son: Anticipación. El sitio web debe anticiparse a las necesidades del usuario. Autonomía. Los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total). Consistencia. Las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo. Eficiencia del usuario. Los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas. Reversibilidad. Un sitio web ha de permitir deshacer las acciones realizadas. Ley de Fitts, que indica que el tiempo para alcanzar un objetivo con el ratón está en función de la distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más facilidad para usar un mecanismo de interacción. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un uso inadecuado de estas puede dificultar enormemente el aprendizaje. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error. Negocios y Dirección 26

27 Legibilidad. El color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc. Otros principios para el diseño de sitios web son: Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos resultados máximos. Un sitio web no ha de tratar al usuario de manera hostil. Cuando el usuario comete un error el sistema ha de solucionar el problema, o en su defecto sugerir varias soluciones posibles, pero no emitir respuestas que meramente informen del error culpando al usuario. Un sitio web nunca debe venirse abajo ni producir un resultado inesperado. Por ejemplo, no deben existir enlaces rotos. Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un sitio web es un término peligroso, cuanto mayor sea el número de acciones que un usuario pueda realizar, mayor es la probabilidad que cometa un error. Limitando el número de acciones al público objetivo se facilita el uso de un sitio web. Los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio web y no sabe dónde comenzar a leer, existe sobrecarga de información. Un sitio web debe ser consistente en todos los pasos del proceso. Aunque pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al usuario el uso de un sitio. Un sitio web debe proveer de un feedback a los usuarios, de manera que éstos siempre conozcan y comprendan lo que sucede en todos los pasos del proceso DIRECTRICES GOOGLE PARA WEBMASTERS Directrices de diseño y contenido Cree un sitio con una jerarquía y enlaces de texto claros. Se debe poder acceder a todas las páginas desde al menos un enlace de texto estático. 27 Negocios y Dirección

28 Ofrezca a los usuarios un mapa del sitio con enlaces que conduzcan a las secciones importantes del mismo. Si el mapa del sitio contiene un número de enlaces demasiado elevado, es preferible dividirlo en varias páginas. Una página debe contener un número razonable de enlaces. Cree un sitio útil con mucha información y redacte páginas que describan el contenido con claridad y exactitud. Piense en las palabras que podrían introducir los usuarios para localizar sus páginas y asegúrese de que esas palabras estén incluidas en su sitio. Intente utilizar texto en lugar de imágenes para mostrar nombres, contenido o enlaces importantes. El rastreador de Google no reconoce el texto integrado en imágenes. Si debe utilizar imágenes para contenido textual, considere la posibilidad de utilizar el atributo "ALT" para incluir algunas palabras de texto descriptivo. Asegúrese de que los elementos <title> y los atributos "alt" de su sitio sean descriptivos y precisos. Busque los enlaces dañados y corrija el código HTML. Si decide utilizar páginas dinámicas (es decir, si la URL contiene el carácter "?"), tenga en cuenta que no todas las arañas de los motores de búsqueda rastrean tanto páginas dinámicas como páginas estáticas. Se recomienda que los parámetros sean cortos y reducidos en número. Para obtener más información sobre las prácticas recomendadas para la publicación de imágenes, consulte las directrices para imágenes. Directrices técnicas Utilice un navegador de solo texto como Lynx para examinar su sitio, ya que la mayoría de las arañas de los motores de búsqueda visualizarán el sitio de forma muy similar a Lynx. Si el uso de funciones avanzadas (como JavaScript, cookies, identificadores de sesión, marcos, DHTML o Flash) impide la visualización de todo el sitio en un navegador de texto, es posible que las arañas de los motores de búsqueda tengan problemas para rastrearlo. Permita que los robots de búsqueda rastreen su sitio sin identificadores de sesión ni argumentos que efectúen un seguimiento de su ruta por el sitio. Estas técnicas son de gran utilidad para supervisar el comportamiento de un determinado usuario, pero el patrón de acceso de los robots es completamente distinto. El uso de estas técnicas puede generar una indexación incompleta de su sitio, ya que es posible que los robots no puedan eliminar las URL que tengan un aspecto distinto pero que en realidad dirijan a la misma página. Negocios y Dirección 28

29 Asegúrese de que su servidor web admita la cabecera HTTP "If-Modified-Since". Esta función permite que su servidor web avise a Google si el contenido de su sitio ha cambiado desde la última vez que lo rastreamos. El uso de esta función le permitirá ahorrar ancho de banda y reducir gastos generales. Utilice el archivo robots.txt en su servidor web. Este archivo indica a los rastreadores qué directorios se pueden rastrear. Asegúrese de mantenerlo actualizado para evitar un bloqueo accidental del rastreador Googlebot. Visite la página para obtener información sobre cómo dirigir el comportamiento de los robots que visiten su sitio. Para asegurarse de estar utilizando correctamente el archivo robots.txt, puede probarlo con la herramienta de análisis de robots.txt disponible a través de las Herramientas para webmasters de Google. Si su empresa adquiere un sistema de administración de contenido, asegúrese de que ese sistema cree páginas y enlaces que puedan rastrear los motores de búsqueda. Utilice robots.txt para evitar el rastreo de páginas de resultados de búsqueda u otras páginas generadas automáticamente que carecen de valor para los usuarios procedentes de motores de búsqueda. Dicho de otra forma, conseguir que los motores de búsqueda indexen sólo las páginas relevantes. Realice una prueba para asegurarse de que su sitio aparezca correctamente en distintos navegadores. Controle el rendimiento de su sitio y optimice los tiempos de carga. El objetivo de Google es ofrecer a los usuarios los resultados más relevantes y un buen servicio. Los sitios rápidos aumentan la satisfacción del usuario y mejoran la calidad general de la Web (especialmente para los usuarios que disponen de conexiones a Internet lentas); así que esperamos que a medida que los webmasters mejoren sus sitios, mejore también la velocidad general de la Web. Google recomienda a todos los webmasters que controlen regularmente el rendimiento del sitio mediante Page Speed, YSlow, WebPagetest u otras herramientas. Para obtener más información, herramientas y recursos, consulte el artículo Exploremos la Web de forma más rápida. Además, la herramienta de rendimiento de sitio de las Herramientas para webmasters de Google muestra la velocidad de su sitio según la experiencia de usuarios de todo el mundo. Principios básicos de las directrices de calidad Cree páginas principalmente para los usuarios, no para los motores de búsqueda. No engañe a los usuarios de su sitio ni muestre a los motores de búsqueda un contenido distinto del que ofrece a los usuarios (práctica conocida como "encubrimiento"). 29 Negocios y Dirección

30 Evite trucos destinados a mejorar la posición obtenida a través de los motores de búsqueda. Una buena regla general es preguntarse si se sentiría cómodo al tener que explicar a un sitio web de la competencia lo que ha hecho. Otra prueba de gran utilidad es preguntarse: " Ayuda esto a mis usuarios?; haría esto si no existiesen los motores de búsqueda?". No participe en esquemas de enlaces destinados a mejorar la posición de su sitio o a manipular los resultados del algoritmo PageRank en su favor. Evite en concreto los enlaces a emisores de spam o "vecindarios indeseables" de la Web, ya que estos enlaces podrán influir negativamente en su propia posición. No utilice programas informáticos no autorizados para enviar páginas, comprobar las clasificaciones, etc. Este tipo de programas consumen recursos informáticos e infringen las Condiciones del servicio. Google no recomienda el uso de productos como WebPosition Gold, que envían consultas a Google de forma automática o mediante programación. Directrices específicas de calidad Evite utilizar texto o enlaces ocultos. No utilice técnicas de redireccionamiento engañoso o encubrimiento. No envíe consultas automatizadas a Google. No cargue páginas con palabras clave irrelevantes. No cree varias páginas, subdominios o dominios que presenten básicamente contenido duplicado. No cree páginas de comportamiento malicioso, como páginas de suplantación de identidad (phishing) o páginas que instalen virus, troyanos u otro tipo de software malicioso. Evite las páginas "puerta" creadas exclusivamente para motores de búsqueda u otros medios extendidos, como programas de afiliación con escaso o nulo contenido original. Si su sitio participa en un programa de afiliación, asegúrese de que aporte un valor añadido. Proporcione contenido único y relevante que ofrezca a los usuarios una razón para visitar el sitio PERSUABILIDAD Haber construido una web con todos los requisitos de usabilidad, con un buen diseño, sin fallos o problemas derivados de la tecnología, incluso habiendo tenido en cuenta la arquitectura de Negocios y Dirección 30

31 contenidos para facilitar su posicionamiento (veremos SEO más adelante) y las directrices de Google, no garantiza en absoluto el éxito de una campaña publicitaria o de una web. Es preciso hacer uso de la persuasión para convertir visitantes en clientes, contactos (leads) o suscriptores. Hay que hacer uso de la persuabilidad, que no es una herramienta en sí misma sino un enfoque desde el que enfocar nuestras decisiones. Esta tendencia se da desde 2005 con la evolución del mundo online según David Boronat, director de Multiplica ( propietario de y referencia en esta materia: Factores que impiden o dificultan la conversión: Mal posicionamiento. Mala frase publicitaria (copy). No tener llamadas a la acción o que éstas no sean claras. Ausencia de proporciones comerciales atractivas. Poca usabilidad (ver apartado anterior); procesos engorrosos. Agobiar al usuario; tratar de conseguir demasiada información de él. Malos buscadores internos. Pobre calidad de los contenidos. Mala o nula utilización de landing pages (páginas creadas ad-hoc para recibir a los visitantes de una campaña de promoción de un producto o servicio). 31 Negocios y Dirección

32 En general, para maximizar los ratios de conversión es preciso atender especialmente a: 1. El grado de persuabilidad del site, utilizando toda la agresividad comercial que llevas dentro. 2. La relevancia y pertinencia de los contenidos y utilizar la tecnología existente para ser lo más proactivo que sea posible. Centrándonos en la persuabilidad, al diseñar una web corporativa (si lo que queremos vender es la marca de la empresa) o una web o site para un producto, y ya asumiendo que se han tenido en cuenta las consideraciones de usabilidad, hay que plantearse lo siguiente para conseguir la conversión de los usuarios: Construir un modelo de negocio que facilite el registro de usuarios. Mensaje a transmitir desde las páginas de inicio o desde landing pages hechas a medida para un producto o campaña. Ofrecer motivos a lo largo de todo el site para provocar el registro. Plantear un proceso de registro y activación de cuentas adecuados. Conseguir que un registro potencialmente pueda generar nuevos registros. Negocios y Dirección 32

33 Las claves facilitadoras del éxito en la conversión: Transmitir rápidamente el mensaje publicitario. Sólo se dispone de unos pocos segundos. Para ello, es preciso utilizar unos taglines adecuados y ser capaces de sintetizar los mensajes: 33 Negocios y Dirección

34 Informar sobre la actividad del sitio y dar cifras impactantes: Conseguir relevancia: Negocios y Dirección 34

35 Poner a disposición de nuevos usuarios ayudas o guías: 35 Negocios y Dirección

36 Generar al usuario deseo, sensación de ser alguien especial: Dejar claras las ventajas para el usuario; lo que el usuario obtendrá: Negocios y Dirección 36

37 Conseguir inmediatez en el proceso de registro: Indicar al usuario la distancia a su objetivo: 37 Negocios y Dirección

38 Utilizar un gancho y, si es posible, invitar a probar: Considerar bien, en caso de una web basada en contenidos, la utilización de un buen servicio de búsqueda y que tenga el protagonismo adecuado. Negocios y Dirección 38

39 Indicar de manera clara las llamadas a la acción para que el usuario no dude y proceda: 4.4. ACCESIBILIDAD Hablar de accesibilidad web es hablar de un acceso universal a la Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios. La accesibilidad es una obligación legal en España desde que entró en vigor el 12 de octubre de 2002 la Ley 34/2002 de Servicios de la Sociedad de la Información y de Comercio Electrónico (LSSICE): Disposición adicional quinta. Accesibilidad para las personas con discapacidad y de edad avanzada a la información proporcionada por medios electrónicos. 39 Negocios y Dirección

40 Uno. Las Administraciones públicas adoptarán las medidas necesarias para que la información disponible en sus respectivas páginas de Internet pueda ser accesible a personas con discapacidad y de edad avanzada, de acuerdo con los criterios de accesibilidad al contenido generalmente reconocidos, antes del 31 de diciembre de Así mismo, el Real Decreto 1494/2007 especifica el grado de accesibilidad aplicable a las páginas de internet de las administraciones públicas, estableciendo como nivel mínimo obligatorio el cumplimiento de las prioridades 1 y 2 de la Norma UNE :2004 ( prácticamente idénticos a los definidos en la norma WCAG 1.0. Evidentemente, sólo las administraciones públicas, y aún no todas (pese a que lo marca la Ley), están teniendo en cuenta estas directrices de accesibilidad, ya que casi siempre son costosas de implementar, y más si no se tienen en cuenta en el diseño de una web desde el principio. No obstante, es importante conocerlas por si en algún caso es necesario hacer accesible un diseño orientado a la accesibilidad por el target de audiencia previsto para alguna web específica. Existe un modo rápido de hacer la comprobación del nivel de accesibilidad alcanzado por una web con la herramienta web de Test de Accesibilidad Web TAWdis en que a su vez da una información clara de qué modificaciones se deben acometer para conseguir el nivel exigido de accesibilidad según las normas WCAG 1.0 y 2.0. A través de esta web se puede asimismo integrar este test de accesibilidad en los editores de texto de los gestores de contenidos PAUTAS PARA UN BUEN DISEÑO DE INTERFAZ Con todo lo anterior quizá parezca que hay que tener demasiadas cosas a la vez en cuenta para hacer un buen diseño, probablemente muchas más de las que uno podría imaginarse en un principio. Para facilitar la aplicación de todas esas recomendaciones en aspectos concretos del diseño web, vamos a ver unas pautas específicas para elementos gráficos y decisiones sobre los contenidos y sus formatos, que son aplicables directamente. Hay que tener en cuenta que estas pautas no son los diez mandamientos, y algunas afirmaciones podría ser más o menos válidas según el contexto de la web que se esté diseñando, pero lo que es indudable es que siguiendo estas reglas conseguiremos más fácilmente webs usables y accesibles (es buena práctica hacer una lista de comprobación para comprobar si un diseño cumple lo siguiente): Negocios y Dirección 40

41 TAMAÑO: ANCHO/ALTO DEL INTERFAZ El ancho de la aplicación será preferentemente flexible, permitiendo la visualización a 800x600 píxels (resolución de muchos netbooks actuales) o a 1024x768 sin utilizar el scroll horizontal. En el caso de los formularios hay que tener en cuenta que en muchas ocasiones van a ir integrados en una página con otros objetos por lo que deberá limitarse al espacio asignado para tal efecto. Se procurará, siempre que sea posible, que el alto/largo de la página no exceda de las 2 pantallas (1200 o 1500 píxels). En general, se establecerá este alto como límite para pasar la información a otra página. Se procurará evitar al máximo el desplazamiento vertical (scroll) en las páginas de inicio. Se procurará evitar el desplazamiento horizontal (scroll) en la totalidad de páginas. COLOR DE FONDO Se recomienda aplicar colores claros como color de fondo para para el contenido general, preferentemente blanco, para que puedan leerse bien los textos (éstos han de ser oscuros, por lo tanto). Para los encabezados y mensajes de advertencia es recomendable asignar un color diferente, nunca demasiado vivo ni destacado. TEXTOS Es necesario proporcionar un título al formulario/aplicación que exprese claramente su función. Si se necesitan instrucciones, que éstas sean breves y comprensibles. Hay que usar una nomenclatura clara y familiar, sin tecnicismos ni extranjerismos. Es preciso evitar preguntas complejas ni hacer pensar al usuario. Se debe ser consistente en el uso de los términos. Es decir, usar siempre las mismas palabras para los mismos conceptos. Las opciones deben ser redactadas siempre de forma afirmativa. Por ejemplo, junto a un check es preferible Deseo recibir el boletín" a "No deseo recibir el boletín". A una menor longitud de línea, mayor velocidad de lectura, esta es la razón de que los periódicos tengan columnas muy estrechas. o Aunque no existe una recomendación única en cuanto a la longitud máxima de línea se suele hablar de un número máximo que ronda los caracteres. 41 Negocios y Dirección

42 o En líneas muy cortas es importante la distribución de las unidades de significado, una línea=una unidad de significado, como se puede ver en este ejemplo tomado de Jarret, C. Nielsen, J (The importance of meaningful line breaks). Los estudios realizados 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. Además por la costumbre y familiaridad los usuarios generalmente prefieren este formato. Sin embargo, en los monitores, por su menor resolución en comparación con el papel, los pequeños remates aparecen borrosos y dificultan la lectura por lo que se recomiendan fuentes similares a "sansserif" (arial, verdana). Se sugiere arial para los títulos y verdana para los textos. Tamaño del texto legible (se recomienda texto de contenido a 1 em y encabezados a mayor tamaño). ENLACES Los enlaces tienen que ser reconocibles como enlaces, no sólo con el uso del color, ya que puede haber usuarios con problemas para distinguir los colores. (Subrayado al pasar el ratón, tipografía, negrita ). Se recomienda también, en la medida de lo posible, distinguir los enlaces visitados de los no visitados. Negocios y Dirección 42

43 FORMULARIOS: CÓMO ORGANIZAR LOS CAMPOS Siempre que se pueda organizaremos los campos en una sola columna de datos. Se lee y realiza más rápidamente. Organizar los campos en grupos lógicos, utilizando para ello la mínima cantidad de elementos visuales (evitando así ruido visual). Agrupar, si es posible, los campos obligatorios al comienzo del formulario. Evitar fragmentar la petición de información. Por ejemplo, no se recomienda pedir por separado el tipo de vía, la calle, el número, etc. si no es estrictamente necesario. Distinguir visualmente los campos deshabilitados en el caso de que los haya, siguiendo las normas de facto (poniéndolos en gris claro) El tamaño visible de los campos de texto debe corresponderse con la longitud del contenido que ha de introducir el usuario. Dotar a los campos de texto de flexibilidad para que admitan los datos en cualquier formato. Por ejemplo, un campo para introducir el número teléfono debería admitir paréntesis, guiones, espacios; un campo para introducir importes debería admitir decimales con punto o con coma, etc. DÓNDE COLOCAR LAS ETIQUETAS DE CAMPOS El diseño debe ser ordenado, alineando verticalmente todas las etiquetas y todos los campos entre si. Además, según un estudio de eyetracking en formularios publicado en UX Matters, y los trabajos de Luke Wroblebsky ( se proponen las siguientes opciones según el tipo de formulario que tengamos que rellenar. En concreto: Si tenemos que rellenar datos que son familiares y éstos no son muchos: Usaremos etiquetas en vertical encima del campo. Tal y como se muestra en la figura: 43 Negocios y Dirección

44 Cuando necesitemos ajustar el espacio vertical porque tenemos un gran número de campos, se recomienda añadir las etiquetas a la izquierda del campo, alineadas a la derecha tal y como se muestra a continuación: Cuando hay que ajustar el espacio vertical, y los datos no son familiares o son complejos, las etiquetas se colocarán al lado del campo, como en el ejemplo anterior, pero alineadas a la izquierda (las etiquetas de los campos se leen mejor con esta alineación). CUÁNDO USAR COMBOS, RADIO BUTTONS Y CHECK BOX Directrices generales: Si se utilizan, habrá que agrupar visualmente de forma clara y unívoca los distintos grupos de opciones. Situar las respuestas de los campos radio buttons y check box después de los mimos. Negocios y Dirección 44

45 Si se utilizan combos o radio buttons seleccionar siempre una opción por defecto, asegurándose de que sea la más probable. De lo contrario, el usuario no puede volver al estado inicial del formulario. Si es necesario, se incluirá una opción "Ninguna". Combos: Evitar siempre que se pueda el uso de combos, es mejor usar radio buttons. No los use a no ser que sea estrictamente necesario, en cuyo caso habrá que incluir una opción del tipo Otros o Todos que pueda englobar casos no recogidos en las opciones proporcionadas y que esté seleccionado por defecto. Lo ideal es que las opciones del combo estén a la vista, aunque no siempre será posible por problemas de espacio. Evitar que las combos recarguen la página para rellenar otros campos, pero cuando así sea hay que asegurarse de que el formulario conserva el mismo estado que tenía antes de recargar la página: con los mismos campos visibles o activos, y con todos los campos rellenos con los mismos datos que antes de la recarga. Radio buttons: Se deben utilizar para restringir la respuesta a una pregunta a unas determinadas opciones de respuesta, de las cuales solo es posible escoger una. Sí No Sin respuesta Si se utilizan hay que asegurarse de que todas las opciones son claramente excluyentes. Si un radio button tiene más de dos respuestas se colocarán en vertical, una debajo de otra y alineadas a la izquierda. 45 Negocios y Dirección

46 Check boxes: Soy un check box Se utiliza para presentar una única opción que no es obligatoria (recibir publicidad, aceptar unas cláusulas). No debe ir marcada por defecto. AYUDAS VISUALES Ayudas visuales: Incluir ayudas breves o ejemplos junto a los campos, pero sólo cuando sea realmente necesario para saber cómo ingresar un dato. Asegurarse de que estas ayudas o ejemplos se lean antes que el campo. Por ello, un buen lugar para colocarlas es encima del campo. En el caso de que existan (que se recomienda siempre) atajos de teclado estos han de estar visibles y accesibles para los usuarios. Identificar claramente los campos obligatorios y los opcionales mediante el literal Obligatorio u Opcional, según si se van a marcar los obligatorios o los opcionales, colocando dicho literal detrás de la etiqueta del campo y por tanto antes del campo. Para saber cuándo diferenciar los obligatorios o los opcionales, seguir las directrices de Luke Wroblewski: o Indicar los campos obligatorios cuando sean menos que los opcionales. o Indicar los campos opcionales cuando sean menos que los obligatorios. PESTAÑAS Utilizar las pestañas para movernos dentro del mismo contexto y no para navegar por áreas diferentes (Error introducido por amazon.com). Utilizar títulos lógicos en las pestañas para que los usuarios puedan predecir fácilmente qué encontraran cuando seleccionen una pestaña. Las pestañas deben contener texto corto y con un lenguaje simple. Las pestañas, en general, deben contener una o dos palabras. Las pestañas cortas son más escaneables. Si se necesitan pestañas más grandes será indicativo de que las opciones son demasiado complicadas para este tipo de control y se deberá estudiar una manera alternativa de agrupar la información. Negocios y Dirección 46

47 La pestaña que se encuentra seleccionada tiene que estar destacada. Puede destacarse por su color, por un tipo de fuente distinta o bien haciendo aparecer esta pestaña delante de las demás. Mantener siempre un mismo estilo de capitalización. En este punto Jakob Nielsen ( no recomienda poner todas las letras en mayúscula cuando definimos el texto de cada pestaña puesto que dificulta la legibilidad. Las pestañas que no están seleccionadas deben estar claramente visibles. Un color que se confunde con el fondo puede lograr que el usuario nunca pulse en ellas y, por lo tanto, nunca acceda a su contenido. La pestaña común y corriente está conectada con el área que posee el contenido, de igual manera que miramos en las tarjetas de un índice físico. Esta conexión ayuda al usuario a visualizar las pestañas / separadores activas y reforzar la conexión entre el contenido y su solapa. El alcance de uso de las pestañas o el área que controlan debe estar claramente definidos en el aspecto visual. Utilizar solo una fila de pestañas. Muchas filas destruyen la memoria espacial y hace imposible a los usuarios recordar que etiquetas ya han visitado. También muchas filas de pestañas son un síntoma de complejidad excesiva. Si se necesita más de una fila de pestañas, habrá que hacer un ejercicio de simplificación del diseño. Las filas de pestañas deben en la parte superior y no sobre los costados ni abajo, lugares en donde seguro pasarán desapercibidas. Velocidad de respuesta. Al presionar sobre una pestaña el contenido deberá ser desplegado de manera instantánea. Es aconsejable que el tiempo de respuesta sea menor a 0.1 seg. Vemos unos ejemplos de buen uso de pestañas extraídos de la web de Jakob Nielsen: 47 Negocios y Dirección

48 BOTONES A no ser que sea necesario evitar incluir un botón "Reset" (es decir, de limpiar o borrar el contenido de un formulario). En los formularios de un sólo paso evitar tener un botón "Cancelar" cuya función sea en realidad volver a la página anterior. Distinguir entre las acciones primarias y secundarias (volver, imprimir etc.) de su formulario. Evitar en todo caso las secundarias cuando sea posible, pero si tenemos que usarlas, deben distinguirse visualmente de forma inequívoca, destacando visualmente las primarias por su ubicación, o poniendo las acciones primarias como botones y las secundarias como enlaces: Negocios y Dirección 48

49 Colocar los botones o enlaces que realizan las acciones primarias (por ejemplo el botón "Enviar") lo más cerca posible del último campo del formulario. No hay que separarlos del formulario mediante, por ejemplo, una línea. Dar un nombre adecuado a los botones, relacionado con su acción y no de carácter general. Por ejemplo, en un formulario de búsqueda es mejor que tenga un botón "Buscar" en vez de un genérico "Aceptar" o Enviar. ELEMENTOS GRÁFICOS Imágenes: El tratamiento de las imágenes de la web permite formatos png, jpg y gif. Su utilización debe estar justificada con temas relacionados con el contenido. El uso de imágenes como adorno se debe limitar al máximo ya que no está permitido y penalizan la descarga de la página en nuestro navegador y están desaconsejadas. Siempre que el usuario escriba el código HTML debe colocar el atributo alt dentro del código propio de una imagen. <img src= nombrefoto.jpg alt= descripción de la imagen >. 49 Negocios y Dirección

50 Gráficos de datos: La representación de datos de forma gráfica debe ayudar a presentar datos de forma sencilla donde las conclusiones sean fáciles de entender. Iconos: No son necesarios y muchos autores de usabilidad web los obvian a favor de enlaces claros y botones. Si se deciden utilizar han de ser lo más universales posibles, usando siempre los mismos para las mismas funciones e ir siempre acompañados de texto descriptivo de la acción que representan. Hay algunos casos en los que sí hay mayor quórum sobre la conveniencia de usar iconos: o Acompañando a mensajes de error. o Para acciones comunes como imprimir o exportar la información a otro formato. LISTAS Cuando se muestre información a modo de lista como sucede, por ejemplo, al mostrar los resultados de una búsqueda, se tendrá en cuenta que: La página de resultados debe ofrecer información suficiente. Si se estima necesario se puede mostrar una imagen acompañando al resultado (menor de 100x100 píxels suele ser adecuado). La página de resultados debe ofrecer los enlaces bien claros. ERRORES Cuando haya un problema al rellenar el formulario es preciso proporcionar en la parte superior del mismo, y con suficiente contraste, un listado de los errores producidos. Por cada error se indicará qué campo lo ha provocado, por qué motivo, cómo solucionarlo y un enlace a dicho campo. Destacar los campos que han dado error, pero no basándose únicamente en el color sino con algún otro elemento gráfico adicional. Acompañarlos de un icono de error que aparezca también en el resumen del comienzo de la página. En la medida de lo posible, se repetirá el mensaje de error al lado del campo para no tener que volver a la lista inicial para saber qué error lo provocó. Negocios y Dirección 50

51 Cuando se produzca un error el formulario no debe resetearse. Es decir, los campos no erróneos deben seguir manteniendo la información en ellos introducida. Redactar claramente los textos de error mediante términos claros, sencillos y no técnicos. No utilizar mensajes genéricos del tipo No se ha podido enviar el formulario. El proceso de validación de un formulario debe validar todos los campos a la vez y no detenerse en el primer error. Es preferible mostrar de manera global todos los errores para que el usuario los pueda corregir todos a la vez y no tengan que hacer varios intentos para enviar correctamente el formulario. A los usuarios les incomoda mucho esta práctica. FEEDBACK Cuando el usuario envía el formulario, hay que informarle del resultado de su acción: indicarle si se ha realizado correctamente, qué datos se han enviado, cómo puede ponerse en contacto con los responsables del sitio si ha habido problemas o para hacer un seguimiento del mismo, o cómo puede modificar los datos enviados. Si el proceso de envío es lento se ha incluir en la página un mensaje de "enviando datos". RESPUESTA Informar a los usuarios de por qué deben rellenar el formulario y cuándo y a través de que medio recibirán una respuesta. Si es un formulario de contacto enviar un automático confirmando que se ha recibido. En general, hay que asegurarse de que la empresa tenga los mecanismos necesarios para responder de forma rápida y adecuada al mismo. QUÉ INFORMACIÓN SOLICITAR Pedir sólo la información absolutamente necesaria. Si es posible, inferir información a partir de otra disponible. Por ejemplo, una provincia se puede inferir a partir de un código postal. Reutilizar los campos cuando sea posible. Por ejemplo, el puede servirnos en ocasiones como nombre de usuario. 51 Negocios y Dirección

52 No pedir la información dos veces. Por ejemplo, si el usuario ha rellenado la dirección de facturación, no obligarle a volver a rellenar la dirección de envío si no es necesario. Preguntémosle si quiere que sea la misma con un check. QUÉ HACER CON LOS FORMULARIOS EXTENSOS Si los formularios son muy extensos la solución no son las columnas, sino la división en páginas bien rotuladas que indiquen al usuario en que paso está del proceso. Si el formulario se presenta en varias páginas hay que seguir el lema 1 tema = 1 página. El usuario debe poder volver a los pasos anteriores. No solicitar información externa en medio del proceso mediante la apertura de una ventana nueva del navegador. Evitar la utilización de pestañas para crear formularios de varias páginas. FUNCIONALIDAD No implementar saltos automáticos del foco del formulario. Por ejemplo, en los campos de cuenta, no haga que el foco se mueva sólo al siguiente campo cuando se ha rellenado el anterior. Este uso no es adecuado porque quita control a los usuarios, no es un funcionamiento estándar y es necesario mirar la pantalla para saber en qué campo se está. Asegurarse de que la tecla "Intro" realiza la acción principal. Evitar que el usuario pueda impacientarse y enviar dos veces el formulario. Comprobar que el tabulador permite acceder a todos los campos en el mismo orden que el visual. Es conveniente mejorar la experiencia del usuario mediante el uso de tecnologías JavaScript ó AJAX, pero hay que asegurarse de que el formulario funciona correctamente sin ellos para mantener la accesibilidad. Como norma general, no es conveniente establecer un límite de tiempo muy ajustado para complementar el formulario, ya que el usuario podría perder la información por la caducidad de su sesión y esto le generaría frustración. En cualquier caso, si por seguridad es preciso tener un tiempo muy ajustado, hay que informar al usuario. MAPA WEB Todas las webs deben disponer de un mapa del Web que comprenda al menos hasta el tercer nivel de navegación. Negocios y Dirección 52

53 LEGALIDAD Incluir las cláusulas de protección de datos cuando sea pertinente. 53 Negocios y Dirección

54 5. IMPLEMENTACIÓN DE LA WEB Pasadas las fases de definición de la arquitectura de contenidos y el diseño, es turno de ponerse manos a la obra con la implementación. En la web 1.0, donde casi todas las páginas eran estáticas, no había casi diferenciación entre la fase de diseño e implementación, ya que la totalidad del contenido de una web se hacía directamente desde la herramienta de diseño web. Pero ahora no es así. Las herramientas de diseño se utilizan para hacer prototipos o para diseñar la plantilla gráfica que aplicaremos a toda nuestra web, que estará construida en base a una plataforma. Además, durante todo el proceso de creación de una web normalmente son también necesarias herramientas de otro tipo. Las repasamos todas: Diseño: Herramientas usadas para el diseño de imágenes, botones, fondos o para construir toda la plantilla gráfica de una web. También en tecnología Flash. Adobe Photoshop The GIMP Adobe Fireworks Adobe Flash Wix Artisteer Codificación: Herramienta usadas desde la maquetación en HTML con hojas de estilo CSS y Javascript hasta la más pura programación en Java, PHP ó.net. Adobe Dreamweaver NetBeans IDE Zend Studio CSS Edit Ultra Edit PS Pad Microsoft Visual Studio Extensiones: Ayudas en Mozilla Firefox para depurar HTML, CSS y Javascript. Firebug Web Developer Gestión de proyectos: Para ayudar a gestionar proyectos complejos. Negocios y Dirección 54

55 Jira Project Pier Microsoft Project Transferencia de ficheros: Para actualizar ficheros en un servidor a través de FTP o SFTP. FileZilla Pese a todo este aluvión de herramientas y tecnologías implicadas en el desarrollo de una web corporativa (incluso hay otras más, como las destinadas a la gestión de la configuración del código y la documentación, o inspectores de la calidad del mismo, por ejemplo), aún falta la más importante, que es la plataforma que antes mencionábamos. Actualmente, todas las cosas que se diseñan durante un proyecto de construcción de una web y todo el código que se programa, cuando es necesario, se ejecuta en el contexto de una plataforma software que proporciona una serie de funcionalidades básicas comunes en cualquier desarrollo web, como la gestión de usuarios, por ejemplo. Existen varios tipos de estas plataformas, orientadas a un uso de un tipo u otro según las necesidades. Vamos a verlo en detalle: 5.1. TECNOLOGÍAS DE IMPLEMENTACIÓN Existen centenares de plataformas en el mercado concebidas para construir en base a ella una web corporativa y/o una intranet. Tal es la cantidad de ellas y la variedad de tecnologías que utilizan por debajo que normalmente la elección de la tecnología base no es nada trivial a la hora de abordar un proyecto web. Hay muchos factores estratégicos que influyen en la decisión, entre los que destacamos: Software propietario o libre. Coste de la licencia. Tipo de soporte y coste del mismo. Evolución prevista y previsión de continuidad a largo plazo. Posibilidades de crecimiento y ampliación. Estabilidad de la plataforma. Facilidad de uso. Tiempo o curva de aprendizaje. Integración con estándares. 55 Negocios y Dirección

56 Pero, además de estas consideraciones, están las puramente funcionales. No es lo mismo un proyecto en el que sólo se trate de hacer una web pública, más o menos extensa y con más o menos necesidades de integración, que una intranet que requiera autenticación e integración con otras aplicaciones corporativas o el planteamiento de construir un acceso web en la intranet de todos los documentos de la empresa. Para ayudar a despejar las dudas una primera referencia suele ser el mapa de metro que anualmente elabora el Real Story Group ( antes conocido como CMS Watch, en el que cada línea representa un mismo tipo de producto y las paradas del metro son plataformas comerciales: De las 7 líneas del mapa, descartaremos para nuestro estudio, por ser demasiado específicas para algunos usos concretos, las relacionadas con la gestión documental pura (Document & Records Management), la relacionada con la gestión de recursos digitales (Digital Asset Negocios y Dirección 56

57 Management), la relacionada con el mundo de Microsoft Sharepoint (Sharepoint Ecosystem) y las soluciones específicas para la búsqueda de información (Search & Information Access). Nos quedan las líneas más utilizadas, que pasamos a ver con más detalle: ENTERPRISE PORTALS : INTEGRADORES DE CONTENIDOS Integración es la palabra que define a las herramientas de tipo Enterprise Information Portal (EIP). Hablamos de integración de procesos, de información y de personas, con lo que estas características hacen propensos a los EIP para proyectos sobre todo de intranets o extranets de medianas y grandes corporaciones. Los EIP están pensados para que dentro de ellos se ejecuten pequeñas aplicaciones denominadas portlets, diseñadas y programadas a medida para cada portal y que se encargan de hacer la integración de estos contenidos y procesos. Ejemplos típicos podrían ser la integración del mail corporativo o cualquier aplicación a medida que la empresa tenga: canales de noticias internos, reservas de salas o recursos, acceso a cuadros de mando para directivos, recibos de nómina o solicitudes de vacaciones. En estos portales la sensación que se transmite al usuario es que el portal está hecho a medida para él; se muestran automáticamente los datos y el tipo de información que para él son pertinentes, y se oculta o se bloquea el acceso a aquellas partes de la información que no le incumben o que la empresa no desea compartir entre todos los miembros. Los EIP de código libre más famosos y con más penetración en el mercado, que compiten directamente con los gigantes del software, son Liferay y Plone. 57 Negocios y Dirección

58 Con más ambición que los EIP están los Enterprise Content Management (ECM), que cubre las áreas de los EIP pero que además abarca la gestión documental global de una organización y la de contenidos digitales (DAM). Como se puede observar en el mapa anterior, existen unas cuantas suites que cubren este amplio espectro (las de IBM o las de Oracle), es decir, que son puntos comunes en todas estas líneas, pero ni que decir tiene que tienen precios desorbitados que sólo están al alcance, y que sólo necesitan, las grandes corporaciones. SOFTWARE COLABORATIVO Y SOCIAL Como se define en Wikipedia, el software colaborativo o groupware se refiere al conjunto de programas informáticos que integran el trabajo en un sólo proyecto con muchos usuarios concurrentes que se encuentran en diversas estaciones de trabajo, conectadas a través de una red (internet o intranet). Por su concepción, el software puramente colaborativo suele ser una herramienta auxiliar dentro de la web de una empresa, particularmente en la parte interna (intranet o extranet). El software colaborativo se puede dividir en tres categorías: Herramientas de comunicación electrónica que envían mensajes, archivos, datos o documentos entre personas y facilitan la compartición de información (colaboración asíncrona), como por ejemplo: o Correo electrónico. o Correo de voz. o Publicación en web. Herramientas de conferencia que facilitan la compartición de información, de forma interactiva (colaboración síncrona), como por ejemplo: o Conferencia de datos: PC en red que comparten un espacio de presentación compartido que cada usuario puede modificar. o Conferencias de video (o audio conferencia): PC en red que comparten señales de audio o video. o Salas de chat o mensajería instantánea: una plataforma de discusión que facilita el intercambio inmediato de mensajes. o Sistemas para facilitar reuniones: un sistema de conferencias integrado en una sala. Estas salas suelen disponer de un avanzado sistema de sonido y presentación que permite una mejor interacción entre participantes en una Negocios y Dirección 58

59 misma sala o entre salas separadas. Ejemplos de ello son los sistemas de soporte a decisiones. Herramientas de gestión colaborativa que facilitan las actividades del grupo, como por ejemplo: o Calendarios electrónicos, para acordar fechas de eventos automáticamente y enviar notificaciones y recordatorios a los participantes. o Sistemas de gestión de proyectos, para organizar y hacer seguimiento de las acciones en un proyecto hasta que se finaliza. o Sistemas de control de flujo de actividad, para gestionar tareas y documentos en un proceso organizado de forma estructurada. o Sistemas de gestión del conocimiento para recoger, organizar, gestionar y compartir varios tipos de información. o Sistemas de soporte a redes sociales, para organizar las relaciones de colectivos. GESTORES DE CONTENIDOS Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es un programa que permite crear una estructura de soporte (framework) para la creación y administración de contenidos, por parte de los participantes. El término CMS puede englobar todo tipo de contenidos, pero lo más frecuente hablando de herramientas de soporte web es referirse a gestores de contenidos web, Web Content Management systems, WCM. Un WCM tiene una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio. Como característica principal, el sistema permite manejar de manera independiente el contenido y el diseño. Así, es posible manejar el contenido y darle en cualquier momento un diseño distinto al sitio sin tener que darle formato al contenido de nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores. Un ejemplo clásico es el de editores que cargan el contenido al sistema y otro de nivel superior (directorio) que permite que estos contenidos sean visibles a todo el público (los aprueba). Los gestores de contenido web son normalmente la herramienta idónea para construir cualquier web pública corporativa y, en muchas ocasiones, también sirven para construir intranets o extranets en organizaciones no demasiado grandes o con muchos sistemas de información internos. Otra característica esencial de estas herramientas es que son fácilmente ampliables mediante miles de extensiones o plugins, que son gratuitas o de un precio muy asequible, normalmente inferior a los 100. Estas extensiones pueden llegar a dotar al gestor de contenidos web de una 59 Negocios y Dirección

60 enorme potencia que hacen que los WCM se puedan convertir también en herramientas colaborativas integradas en el contexto de la web, con un coste muy bajo o nulo de desarrollo, ya que se reutilizan componentes que tienen, en algunas ocasiones, verdaderas comunidades de desarrolladores por detrás que les dan soporte. Para hacernos una idea, a través de estas extensiones se puede: Mejorar y hacer una gestión fina de los permisos de acceso y de la seguridad del sitio web. Mejorar la interfaz de administración, incluyendo informes. Gestionar anuncios de redes de afiliación. Gestionar de eventos y calendarios. Construir comunidades virtuales, con blogs, muro, libro de visitas, conexiones con redes sociales o gestión de suscripciones de pago. Convertir la web en un centro de gestión de relaciones con clientes (CRM). Integrar gestión de proyectos en la web. Integrar herramientas de comunicación, como chats, foros, videoconferencias, soporte en vivo, mensajería instantánea o envíos por SMS. Crear formularios de contacto, testimonios de clientes, libro de invitados, agradecimientos, encuestas, sondeos o comentarios de artículos. Integrar newsletters, publicación de artículos en redes sociales o generar feeds RSS a medida. Incluir gestores de descarga de archivos sencillos, visualizados como un explorador de ficheros. Integrar y gestionar zona de preguntas frecuentes (FAQs) y portfolios de productos o servicios. Crear tiendas virtuales y todo tipo de herramientas necesarias para el comercio electrónico de cualquier naturaleza: subastas, donaciones, descargas de pago, pasarelas de pago, cestas de la compra. Incluir mapas e información meteorológica. Adaptar la interfaz para dispositivos móviles. Integrar códigos QR. Mejorar la experiencia multimedia, embebiendo fotos, vídeos, presentaciones, galerías completas o generando slideshows en base a artículos. Mejorar el aspecto visual incluyendo nuevos recursos gráficos, personalizando las plantillas, mejorando los títulos, la accesibilidad o las ayudas contextuales. Negocios y Dirección 60

61 Dado el enfoque del tema sobre la construcción de webs corporativas, y visto que los WCM son las herramientas más adecuadas, en los siguientes apartados veremos con más detalle los gestores de contenido más populares: Joomla!, Drupal y Wordpress. Observamos en Google Trends la comparativa de interés y la evolución que suscitan: 5.2. TAREAS POST-IMPLANTACIÓN EVALUACIÓN DE USABILIDAD EN LABORATORIO Una vez implementada la web es el momento adecuado de realizar un test de usuarios. Se realizará, cuando sea posible, un test de usuario en laboratorio, especialmente cuando: Se ha realizado una evaluación heurística previa. Existen controversias y discusiones en el diseño. Es necesario generar impacto con la presentación de la nueva web. Es una prueba de usabilidad que se basa en la observación y análisis de cómo un grupo de usuarios reales utiliza el sitio web, anotando los problemas de uso con los que se encuentran para poder evaluar si hay que efectuar alguna corrección postrera en la web. Se trata de una prueba llevada a cabo en laboratorio, que no debe confundirse con un estudio de campo. 61 Negocios y Dirección

62 El proceso sería el siguiente: Diseñar escenarios de uso y tareas realistas y potentes, que permitan medir los principales objetivos en el diseño de la web. Seleccionar un mínimo de 5 usuarios, se recomienda llegar a 10 si se puede. Usar los criterios: o Usuarios y no usuarios del sitio o aplicación o Usuarios y no usuarios de servicios similares o Usuarios con experiencia en Internet/Ofimática o usuarios principiantes o Usuarios del perfil del usuario actual del servicio o de diferentes perfiles Anotar las siguientes observaciones en el comportamiento de los usuarios: o Principales: Éxito o fracaso: ratio de éxito, núm. éxitos / núm. Intentos. Errores recuperados y errores fatales. Tiempo en completar la tarea. o Complementarias: Número de elementos de la interfaz recordados (memoria). Número de elementos reconocidos (reconocimiento). Tiempo en dibujar la estructura de la aplicación. Diferencias entre el mejor y el peor usuario. o Comportamiento físico: Lenguaje no verbal: expresiones faciales, gestos. Nivel de ansiedad, estado de ánimo. FASE DE CONTROL Una vez en puesta la web en producción la web se deberá realizar la fase de posicionamiento natural o promoción en general (explicado en el tema de promoción online), y el continuo análisis de las estadísticas del sitio y opiniones de usuarios (explicado en el tema de análisis), normalmente canalizadas a través de un community manager para abordar, en caso necesario, posibles mejoras. Negocios y Dirección 62

63 6. JOOMLA! Joomla! es el gestor de contenidos con mayor uso y aceptación para la generación de webs, si bien en los últimos tiempos quizá haya sido sobrepasado por Wordpress en cuanto a usuarios totales, ya que Wordpress aglutina una gran cantidad de instalaciones para millones de blogueros. La rapidez en el aprendizaje de la herramienta y las extensiones disponibles para la misma son los dos factores que juegan a favor de Joomla!, que sumados el uno al otro dan como resultado la posibilidad de construir webs de todo tipo con un tiempo de desarrollo realmente reducido y con buenos resultados. Para ilustrar un uso básico de la herramienta presentaremos el contenido de la guía de inicio rápido de la Comunidad Joomla (comunidadjoomla.org) con el ejemplo de la Jardinería Secuoya ligeramente adaptaro, que no pretende tanto explicar todas las posibilidades del gestor de contenidos ni aplicar todas las buenas prácticas que ya conocemos como ver con un ejemplo concreto lo fácil que resulta usarlo y sus posibilidades: 6.1. SECCIONES, CATEGORÍAS Y ARTÍCULOS En Joomla! los artículos pueden ordenarse por dos vías: secciones y categorías. Las secciones pueden contener gran cantidad de categorías y las categorías pueden contener gran cantidad de artículos. 1. Para agregar una sección a tu sitio web ve accedemos a la parte de administración con el nombre de un usuario con permisos de administración y su contraseña. 2. Para empezar a gestionar secciones, hacemos clic sobre el gestor de secciones: 63 Negocios y Dirección

64 3. Hacemos clic sobre Nuevo desde la barra de herramientas de Joomla!. 4. Introducimos un título y descripción para la sección y luego pulsamos Guardar desde la barra de herramientas. 5. Crearemos tantas secciones como necesitemos. Usaremos las secciones para agrupar elementos similares o que estén dentro de una misma rama. Para nuestro sitio de jardinería, agregaremos una sección Corporación y otra sección para Productos. 6. Cuando hayamos terminado con las secciones, hacemos clic sobre el menú superior Contenido y seleccionamos el Gestor de categorías 7. Para crear categorías, seguimos los mismos pasos que con las secciones, asignando a cada una alguna de las secciones creadas anteriormente. Usaremos las categorías para agrupar más específicamente las cosas o para agrupar cosas que formen parte de una misma jerarquía. Para la sección Productos, crearemos una categoría para Árboles, otra para Arbustos y una para Césped. Para la sección Corporación crea una categoría llamada Presidente : Negocios y Dirección 64

65 8. Finalmente, necesitamos crear algunos artículos. Hacemos clic sobre Contenido y luego sobre Gestor de artículos y seleccionamos Nuevo desde la barra de herramientas. 9. En la pantalla de artículos hay un muchas cosas que se pueden hacer: 65 Negocios y Dirección

66 Agregar un título al artículo y catalogarlo dentro de una sección y categoría. Se puede publicar o anular la publicación de un artículo, así como seleccionar si se muestra o no el artículo en la página principal. Insertar el contenido del artículo en el campo de texto grande. Se puede usar el botón Paginar para dividir el artículo en páginas. Se puede usar el Leer más para dividir el artículo de tal modo que primero se muestre un texto de introducción y luego, tras pulsar sobre el Leer más, se pueda acceder al texto completo. También es posible usar el botón imagen para insertar una imagen en el artículo, usando un simple formulario de subida que está combinado con el gestor multimedia de Joomla!. 10. Para el sitio web de jardinería, creamos cinco artículos diferentes en cada una de las categorías. Podemos usar el botón Leer más para dividir cada artículo con un texto de introducción y así luego, tras pulsar sobre el Leer más, poder acceder al contenido al completo. De cada categoría, elegiremos dos elementos a mostrar en la página de inicio, seleccionando Sí en el parámetro de configuración de cada artículo llamado Página principal. Negocios y Dirección 66

67 11. Cada vez que terminemos de escribir un artículo, haremos clic sobre Guardar para guardarlo y regresar a la página de inicio, o haremos clic sobre Aplicar para guardarlo sin salir de la edición. Si seleccionamos Sí para el parámetro Página principal, el artículo se mostrará en la página de inicio GESTIÓN DE USUARIOS A continuación, supongamos que tanto el presidente de la compañía como el director de relaciones públicas y gestor de productos necesitarán poder editar el sitio. Por lo tanto, necesitaremos crearles cuentas de acceso. 1. El primer paso es acceder a la interfaz de administración (si no estábamos autenticados). Una vez autenticados, iremos al menú superior Sitio y selecciona Panel de control. 67 Negocios y Dirección

68 2. Hacemos clic sobre Gestor de usuarios : 3. Hacemos clic sobre Nuevo desde la barra de herramientas de Joomla!. 4. Introducimos los detalles para cada usuario que deseemos crear. Otrogamos al presidente y al director de relaciones públicas el nivel de acceso de Administrador, de tal modo que ellos también puedan hacer cambios en el sitio. Otorgamos al gestor de productos el nivel de acceso de Gestor, lo cual, le permitirá agregar productos; pero, no podrá cambiar el sitio: Negocios y Dirección 68

69 5. Pulsamos sobre Guardar cuando acabemoss de crear a cada usuario. 6. A continuación, necesitamos configurar una vía para que los visitantes del sitio puedan contactar con el presidente, con el director de relaciones públicas y con el gestor de productos. Desde el menú superior Componentes seleccionamos Contactos y luego Categorías. 7. Creamos una nueva categoría llamada Corporación y pulsa Guardar. 8. Hacemos clic sobre la pestaña Contactos y luego pulsa Nuevo 9. Creamos cuatro contactos diferentes: uno para el presidente, uno para el director de relaciones públicas, uno para el gestor de productos y uno para nosotros: el webmaster. Nos aseguraremos de incluir su dirección de correo electrónico y posición dentro de la empresa. Ubicamos a cada usuario dentro de la categoría Corporación que habíamos creado anteriormente y enlazamos a cada contacto con su correspondiente usuario que también anteriormente habíamos creado: 69 Negocios y Dirección

70 6.3. GESTIÓN DE ENLACES WEB En nuestra reunión con el presidente se solicitaba una sección para enlaces que tuvieran que ver con los recursos de jardinería. Vayamos a ello y configurémoslo. 1. De nuevo, el primer paso es acceder a la interfaz de administración (si no estábamos autenticados). 2. Desde el menú superior Componentes, seleccionamos Enlaces web y luego Categorías. 3. Pulsamos Nuevo y creamos una categoría para Información de jardinería, y luego, el botón Guardar. 4. Hacemos clic sobre la pestaña Enlaces. 5. Hacemos clic sobre Nuevo para crear un nuevo enlace. Crea un enlace con información sobre jardinería. Pulsamos el botón Guardar para guardar tu enlace. Agregaremos varios enlaces en la categoría Información de jardinería como estos: Negocios y Dirección 70

71 GESTIÓN DE NOTICIAS EXTERNAS El presidente también solicita una sección que muestre noticias externas desde otros sitios de jardinería. 1. Accedemos a la interfaz de administración (si no estábamos autenticados). 2. Desde el menú superior Componentes, seleccionamos Servidor de noticias externas y luego Categorías. 3. Pulsamos el botón Nuevo y creamos una categoría para Jardinería. Luego pulsamos el botón Guardar. 4. Hacemos clic sobre la pestaña Servidores. 5. Hacemos clic sobre Nuevo para agregar un servidor de noticias externas. Buscaremos en internet varios servicios RSS con información sobre jardinería y luego, agregaremos la URL del RSS en el campo Enlace. Nos tendremos que asegurar de que cada una está en la categoría Jardinería y tendremos que elegir el número de artículos a mostrar para este servidor de noticias externas. Algunos ejemplos podrían ser: 71 Negocios y Dirección

72 6. Hacemos clic sobre Guardar cuando lo tengamos listo CREAR MENÚS Uno de los elementos clave en el diseño de un sitio web es un buen menú que ayude al usuario a encontrar lo que busca. Joomla! tiene un sistema integrado para gestionar menús. Este sistema está construido alrededor de tres tipos de información a mostrar en Joomla! componentes, módulos y plugins. Los componentes son la información principal en Joomla! y están conducidos por menús. Si miramos en la página principal del sitio, podremos ver solo artículos que hayan sido publicados para salir en la página principal. La información de contacto, los enlaces web, las noticias externas y los artículos no publicados, no son visibles desde la página principal. Esto es porque cada página muestra un solo componente a la vez. Agreguemos los componentes que ya tenemos configurados al sitio: MENÚ PRINCIPAL 1. Accedemos a la interfaz de administración (si no estábamos autenticados). 2. Desde el menú superior Menús selecionamos Menú principal Negocios y Dirección 72

73 Ya sobre el menú está por defecto el enlace Inicio (Home), que proporciona acceso a los artículos que tengas publicados en la Página principal. Podemos hacer clic sobre Inicio para editar muchos de sus parámetros, incluyendo el nombre de la página de inicio o número de artículos a mostrar. 3. Hacemos entonces clic sobre Inicio para configurar la página principal. 4. En el área de los Parámetros Básico hay un número de opciones diferentes que se pueden configurar. # Destacando es el número de artículos destacados a mostrar en la página de inicio. Estos artículos ocupan todo el ancho para el marco de noticias y se cortan con un Leer más. # Introducciones es el número de introducciones de artículo a mostrar en la página principal con un enlace leer más para poder ver el artículo al completo. Estos artículos toman solo el ancho de la columna (a definir más abajo) y no el de la página entera. Columnas es el número de columnas con las que se muestran las introducciones de los artículos (definido más arriba). # Enlaces es el número de artículos a mostrar, solo como enlaces, al final de la página. 5. En el área de Parámetros Avanzados comprobaremos que Mostrar un enlace a la noticia externa está habilitado. Esto hará que la página principal sea accesible por un servidor RSS. 6. En Parámetros Sistema, introducimos un título para la página dentro del campo Título de la página. Esto se mostrará tanto en el encabezado del navegador como en el de esa página dentro del documento. Para este sitio web, introduciremos Jardinería Secuoya reemplazando el texto Bienvenido a la página de inicio 73 Negocios y Dirección

74 7. Haremos clic en Guardar para finalizar la configuración de la página principal. Comprobaremos los resultados: Negocios y Dirección 74

75 PRESENTACIÓN DE LAS CATEGORÍAS A continuación, necesitamos crear un enlace a cada una de las categorías Árboles, Arbustos, Césped y Presidente que habíamos creado: 1. Desde el menú superior Menús, seleccionamos Menú principal 2. Hacemos clic en Nuevo, seleccionamos Artículos y luego Presentación, en formato blog, de los artículos de una categoría. 75 Negocios y Dirección

76 3. Desde el aŕea de Parámetros Básico seleccionamos una de las cuatro categorías creadas anteriormente. Llamaremos al elemento del menú de manera acorde a la categoría seleccionada. Ajustamos los parámetros de un modo similar al Inicio y nos aseguraremos de incluir un enlace RSS a la noticia desde Parámetros Avanzado. Daremos un título a la página desde Parámetros Sistema. También podría ser interesante cambiar el Orden primario a Título Alfabético desde los Parámetros Avanzados : Negocios y Dirección 76

77 4. Hacemos clic en Guardar y revisamos el sitio para ver los resultados: 77 Negocios y Dirección

78 5. Repetiremos estos pasos para Arbustos, Césped y Presidente. PRESENTACIÓN DE LOS CONTACTOS Luego, necesitamos agregar un enlace al Contactar : 1. Desde el menú superior Menús, seleccionamos Menú principal : 2. Seleccionamos Nuevo y luego hacemos clic sobre Contactos seguido de Presentación de los contactos de una categoría : Negocios y Dirección 78

79 3. Llamaremos a la página Contactar y seleccionaremos Corporación para la categoría. No hay necesidad de servir noticias externas desde esta página, por lo tanto, deshabilitaremos esa opción desde Parámetros Sistema : 79 Negocios y Dirección

80 4. Hacemos clic en Guardar y revisamos desde el sitio los resultados: PRESENTACIÓN DE LOS ENLACES WEB Nuestro próximo componente es el Enlaces web : 1. Desde el menú superior Menús, seleccionamos Menú principal. 2. Hacemos clic sobre el botón Nuevo, seleccionamos Enlaces web y luego Presentación, en formato lista, de los enlaces de una categoría : Negocios y Dirección 80

81 3. Llamamos a la página Enlaces web y seleccionamos la categoría Información de jardinería. De nuevo, no hay necesidad de servir noticias externas desde esta página, por lo que deshabilitamos esa opción: 4. Hacemos clic en Guardar y revisamos el sitio para ver los resultados: 81 Negocios y Dirección

82 PRESENTACIÓN DE LAS NOTICIAS EXTERNAS El siguiente elemento del menú que necesitamos agregar es el de Noticias externas : 1. Desde el menú superior, seleccionamos Menú principal. 2. Hacemos clic sobre Nuevo, seleccionamos Servidor de noticias externas y a continuación Presentación de una categoría de servidores de noticias externas : Negocios y Dirección 82

83 3. Llamaremos a la página Noticias externas de jardinería y seleccionaremos Jardinería para la categoría asociada: 4. Hacemos clic en Guardar y revisamos en el sitio los resultados: 83 Negocios y Dirección

84 PRESENTACIÓN DEL BUSCADOR El último elemento del menú que necesitamos crear es de la página Buscar 1. Desde el menú superior, seleccionamos Menú principal. 2. Hacemos clic sobre el botón Nuevo, seleccionamos Buscar y luego de nuevo Buscar : 3. Llamamos a la página Buscar : Negocios y Dirección 84

85 4. Hacemos clic en Guardar y revisamos en el sitio los resultados: 85 Negocios y Dirección

86 6.6. CREAR MÓDULOS El próximo tipo de contenido Joomla! son los módulos. Los módulos son contenedores que aparecen predefinidos alrededor del componente principal. Los nombres de los contenedores pueden ser del tipo left, right, o footer. El Menú principal mostrado en la página principal es un ejemplo de módulo. Para este sitio web, vayamos a agregar varios módulos muy útiles: 1. Accedemos a la interfaz de administración (si no estábamos autenticados). 2. Desde el menú superior Extensiones, seleccionamos Gestor de módulos MÓDULO DE SINDICACIÓN Esta es la página de gestión de módulos. Desde aquí podemos decidir que módulos se muestran en cada página, Primeramente, vayamos a agregar un módulo que muestre las RSS que habíamos creado para la página principal: 1. Hacemos clic sobre el botón Nuevo y luego selecciona Sindicación y haz clic sobre Siguiente : 2. Escribiremos un título para el módulo de sindicación. Selecciona una posición en la que mostrar el módulo de sindicación (normalmente left o right ). Para este módulo, la plantilla predeterminada tiene una sección especial para Sindicación. Estas secciones Negocios y Dirección 86

87 están definidas en la plantilla gráfica. Desde la asignación de menús, elegimos de entre la lista Seleccionar elemento(s) del menú las páginas por donde el módulo de sindicación estará habilitado y se mostrará: 3. Hacemos clic en Guardar y revisamos el sitio para ver los resultados: MÓDULO DE ACCESO Ahora, vayamos a agregar una caja de acceso, por medio de la cual los usuarios que hemos configurado podrán acceder rápidamente al sitio. 1. Desde el menú superior Extensiones, seleccionamos Gestor de módulos. 87 Negocios y Dirección

88 2. Hacemos clic sobre el botón Nuevo y luego seleccionamos Iniciar sesión y hacemos clic en Siguiente : 3. Configuraremos este módulo con el nombre Formulario de acceso y elegiremos la posición left. Esto mostrará al módulo inmediatamente después del menú principal, que también está a la izquierda. Como queremos que este módulo aparezca en todas las páginas no necesitamos cambiar esa configuración: Negocios y Dirección 88

89 4. Hacemos clic en Guardar y revisamos el sitio para ver los resultados: 89 Negocios y Dirección

90 MÓDULO DE NOTICIAS EN FLASH Otro módulo a agregar es el Noticias en flash. Este módulo muestra un artículo aleatorio desde una categoría específica. Para nuestro sitio de demostración, el módulo Noticias en flash mostrará las noticias publicadas por el presidente: 1. Desde el menú superior Extensiones, seleccionamos Gestor de módulos. 2. Hacemos clic en Nuevo y luego selecciona Noticias en flash y pulsa el botón Siguiente : 3. Llamaremos al módulo Noticias en flash y elegiremos la posición Top con la intención de mostrarlo después de nuestro logo. Elegimos la categoría Presidente para mostrar las noticias del presidente dentro de este módulo. Para que el título sea enlazable y que el lector pueda ver el artículo al completo tras pulsar sobre él, marcaremos en Sí el Título del artículo para mostrar el título del artículo: Negocios y Dirección 90

91 4. Hacemos clic en el botón Guardar y revisamos el sitio para ver los resultados: MÓDULO DE RUTAS Agreguemos el módulo final, el módulo Breadcrumbs, de rutas o miga de pan. Este módulo ayuda a los usuarios a navegar por el sitio, mostrando la ruta de las zonas por donde han pasado para llegar adonde están. 1. Desde el menú superior Extensiones, seleccionamos Gestor de módulos. 2. Hacemos clic sobre Nuevo y luego seleccionamos Ruta y pulsamos sobre Siguiente. 91 Negocios y Dirección

92 3. Llamaremos al módulo Ruta. Pero deshabilitaremos Mostrar título desde la configuración (este elemento de navegación debe mostrarse sin un título por encima). Le asignaremos la posición Breadcrumbs y un texto de entrada para el inicio llamado Inicio. Dejaremos el resto de las opciones como están: Negocios y Dirección 92

93 4. Hacemos clic sobre el botón Guardar y revisamos el sitio para ver los resultados. Navegamos por las diferentes páginas para poder ver como a cambiando la ruta: 6.7. GESTIÓN DE PLANTILLAS Las plantillas permiten definir el aspecto visual de nuestro sitio (recordemos que una de las características de los CMS es que separan contenidos de visualización). Joomla! viene con tres plantillas, pero es posible encontrar muchas más buscando en Joomla.org. 1. Accedemos a la interfaz de administración (si no estábamos autenticados). 2. Desde el menú superior Extensiones, seleccionamos el Gestor de plantillas. La plantilla seleccionada como predeterminada es la plantilla actual. Para cambiar una plantilla por otra, seleccionamos la plantilla que deseemos usar y hacemos clic sobre Predeterminada. Para nuestro sitio de jardinería la plantilla rhuk_milkyway se ajusta bien: 93 Negocios y Dirección

94 3. Hacemos clic sobre la opción rhuk_milkyway con la intención de editar algunos parámetros de la plantilla. Debido a que se trata de un sitio sobre jardinería, cambiemos el color a verde: 4. Y, finalmente, echamos un vistazo al cambio que se ha aplicado en el aspecto visual: Negocios y Dirección 94

95 95 Negocios y Dirección

96 7. WORDPRESS Wordpress es, probablemente, el CMS más popular del mundo, principalmente por el uso intensivo que se hace de esta herramienta para crear sitios web con formato de blog, gracias a su extremada facilidad de uso. Para otros usos no es tan potente ni es TAN utilizado como para hacer exclusivamente bitácoras tradicionales, pero es perfectamente válido, como podemos ver en millones de webs como, por ejemplo el magazine de humor El Mundo Today ( o la web sobre web y software GenBeta ( que usan el formato blog de otra forma y combinado con otro tipo de información. Wordpress es altamente extensible, con unos plugins disponibles en marzo de 2011, que han sido descargados más de 160 millones de veces. Pese a lo elevado de esta cantidad, la calidad de los mismos no es, de media, tan buena como las extensiones de Joomla! ni mucho menos como los módulos de Drupal. Esto es debido a que es muy sencillo desarrollar para Wordpress y esto hace que desarrolladores no demasiado expertos publiquen su propio software. No obstante lo anterior, es posible construir sitios de todo tipo de alta calidad con Wordpress. Vamos a repasar el aspecto de la interfaz de administración: 7.1. MENÚ DEL ADMINISTRADOR El menú del administrador aglutina los enlaces a todo lo que podremos necesitar para administrar nuestro Wordpress. Allí aparecerán enlaces a todas las opciones que Wordpress trae por defecto (las situadas más arriba), así como las opciones de configuración de los distintos plugins que vayamos instalando. A través de este menú tendremos acceso a opciones para: Escribir artículos o páginas. Configurar el sitio. Cambiar el diseño. Comentar las publicaciones. Crear usuarios y asociarles privilegios. Añadir archivos para su descarga. Instalar widgets y plugins. Insertar multimedia: imágenes, links, etc. Negocios y Dirección 96

97 Editar las caracteristicas del sitio Vamos a repasar las opciones más relevantes: 7.2. ESCRITORIO El escritorio es la página inicial al acceder a nuestro panel de gestión de Wordpress. Desde aquí vamos a tener una visión general del contenido que mantenemos en nuestro sitio tales como la cantidad de publicaciones, número de páginas creadas, comentarios de los usuarios (aprobados son los que hemos autorizado para que permanezcan, pendientes los que no hemos aprobado aún y spam los que hemos clasificado como comentarios basura o publicitarios) y, eventualmente, información estadística agregada de algunos plugins. En el escritorio también contamos con la sección de publicación rápida, que nos permite realizar una publicación básica en nuestro sitio de manera inmediata. Además, si hay nuevas actualizaciones de Wordpress, podemos realizarlas desde esta pantalla sin necesidad de ser expertos en el tema y sin ayuda del administrador del proveedor de hosting. Con un solo clic: 97 Negocios y Dirección

98 NOTA: Es muy recomendable que se realice un backup del sitio antes llevar a cabo cualquier actualización ENTRADAS Esta sección te ofrece cuatro opciones: Entradas, Añadir nuevo, Categorías y Etiquetas. Aprendamos a administrar cada una de ellas: Entradas: Desde esta vista vas a poder ver todos los post que has publicado tanto tu como los usuarios que estén autorizados para publicar en tu sitio y a si mismo poder editar, borrar, ver una vista previa, ver las fechas de publicación y algunas otras opciones que pueden estar disponibles. Añadir nueva: Es aquí donde escribes tu post o artículo que deseas publicar. Ahí como podrás ver debes tienes los siguientes espacios: título, donde colocas el título de tu post; entrada, que Negocios y Dirección 98

99 es el lugar donde introducirás el post, es un cuadro de editor de texto muy similar al que te ofrece un correo electrónico. En los iconos al lado del texto Subir/Insetar es desde donde podremos subir a nuestro blog las imágenes, videos, música y hasta algún objeto (archivo). Vamos a analizar la opción de insertar imágenes. La interfase que nos muestra WordPress al momento de presionar cualquiera de esos cuatro botones es prácticamente la misma. Se abre una ventana donde aparece el clásico botón de Browse, que utilizamos para ir a buscar ese archivo desde nuestro ordenador como es más común y luego subirlo. Pero además de esto, también nos da la opción de ir a buscar o cargar ese archivo desde la Web, 99 Negocios y Dirección

100 Una vez que carguemos la imagen a subir, se nos abre una ventana donde vamos a poder configurar un poco la imagen. Le podemos indicar: el Titulo o nombre de la imagen, Texto alternativo: que es el texto que aparece en caso de que un usuario no pueda cargar la imagen desde su pc y otras opciones que no vienen al caso. Además también puedes especificar el tamaño, la posición donde se ubicará y al lado que se verá el texto. Al lado derecho de la opción de redactar, tenemos varias opciones que nos ayudaran a trabajar y a categorizar de una mejor forma nuestra publicación, de manera que esta quede optimizada para las búsquedas tanto internas de nuestro sitio como para buscadores externos. Analicemos cada una: Negocios y Dirección 100

101 Publicar: Es la herramienta que nos va a permitir publicar nuestro post, previsualizarlo antes de publicarlo, actualizar el contenido de este o bien, guardarlo como un borrador. También nos brinda la información del momento en que se publicó, guardó o actualizó por última vez. Categorías: En una sección más adelante veremos como se crean las categorías para nuestras publicaciones. Estas lo que hacen es una referencia directa sobre el tema que estamos publicando. Por ejem, este post esta bajo las categorías de tutoriales y tambien de wordpress. Podría si lo quisiera, crearle otra categoría como blogs y adicionarla aquí. Estas categorías facilitan la búsqueda de los usuarios por un tema en especifico. Asi, si alguien llegó a mi post buscando un tutorial de WordPress, tambien se va a interesar por otros temas segun su categoria, como HTML, CSS, Flash, etc. Etiquetas: Una etiqueta o tag es una palabra clave jerárquica asignada a un dato (como una imagen digital o un archivo informático). Este tipo de metadato describe el dato y permite recuperarlo navegando o buscando. O sea, es un sistema que ayuda a los usuarios a buscar un tema en especifico en nuestro blog. 101 Negocios y Dirección

102 En este espacio denominado etiquetas, podrás colocar seguido por una coma todas las palabras que podrían identificar tu post en un buscador de Internet como google o yahoo. Por ejm, las etiquetas puestas para este post que estas siguiendolas he puesto como wordpress 3 y blogs. Y estas etiquetas son las que vemos en el final de cada uno de los post que publicamos, claro, siempre y cuando las agreguemos MULTIMEDIA Esta parte nos muestra las imágenes que ya hemos cargado en nuestro sitio Web. Añadir nuevo, se utiliza para cargar un recurso y almacenarlo en nuestra galería para utilizarlo luego ENLACES Negocios y Dirección 102

103 Estos son esos links que puedes ver en el panel lateral de tu blog. Como podrán notar, según la imagen de arriba, la categoría es la que va a definir en cual de los segmentos se va a ubicar ese enlace. La relación con el enlace lo unico que hace es identificar, por decirlo así, que ese link te va a dirigir a una web amiga, un desconocido, a otra de mis web, etc. La valoración es como el grado de importancia que le das a ese link. Existen variaciones y mas opciones en algunos casos, dado que según el diseño que trabajes y los plugins y widgets que vallas instalando o que ya traiga por defecto el diseño, estas pueden ser mas amplias o con selecciones diferentes. Pero en si, todo cae en lo mismo PÁGINAS Esta sección es la que te permite poner las páginas de tu blog, así como se ve en la cabecera de mi sitio. Las páginas pueden ser estáticas si lo deseas o pueden estar en cambio constante según les vallas incluyendo publicaciones. 103 Negocios y Dirección

104 7.7. APARIENCIA Esta sección si es muy importante, ya que es nuestro centro de mando para cambiar el estilo de nuestra web de forma total. Como hacemos esto? simplemente cambiando el tema de nuestro sitio. Existen infinidad de temas libres para descargar en internet, y los podemos agregar de manera manual o desde el mismo panel de wordpress e instalarlos de una vez. Un tema no es más que un diseño web o template, que ha sido prefabricado para cambiar el estilo de todo el sitio. Puede abarcar desde los menus de la derecha, hasta poner calendarios, relojes, banners, en fin, casi de todo. Cada Tema es un posible mundo diferente, ya que algunos incluyen Widgets preinstalados que pueden hacer maravillas o desastres en tu web. De igual manera que los plugins que se pueden escoger e instalar en tu sitio. Negocios y Dirección 104

105 8. DRUPAL Drupal arrancó casi junto con Joomla! y, aunque no fue el más popular desde el principio, a día de hoy es uno de los CMS más potentes y el preferido por los desarrolladores por las facilidades y la arquitectura que presenta. Una vez configurado Drupal es, efectivamente, muy potente, pero el tiempo de configuración, de ajustes y de puesta en marcha es superior al de Joomla!, con lo que lo hace un poco más incómodo para los no iniciados y a su vez preferido entre los más exigentes. Hay algunas funcionalidades más o menos básicas que no vienen en la instalación de serie de Drupal y que hay que instalar a posteriori añadiendo módulos adicionales, con lo que repasar lo que Drupal ofrece no tiene sentido sin tener en cuenta además estos módulos que casi siempre se usan. Afortunadamente para nuestros intereses didácticos, Acquia (acquia.com) ha creado Drupal Gardens ( y ha lanzado la versión definitiva en marzo de Se trata de un sitio web basado en Drupal 7 que nos permite generar gratuitamente a su vez otro sitio siguiendo unas sencillas instrucciones. Una vez completado el proceso de alta y creación del sitio, tendremos a nuestra disposición una instalación de Drupal aderezada con una colección de extensiones muy adecuada que nos permitirá crear un sitio para lo que queramos y tener una buena experiencia de usuario con Drupal. Haremos un breve repaso a lo más esencial de Drupal Gardens: 8.1. DRUPAL GARDENS ELECCIÓN DE PLANTILLA Durante el proceso de alta para usuarios nuevos o de creación de un sitio adicional para usuarios ya registrados, lo primero que se debe hacer es elegir el tipo de plantilla que se aplicará durante la creación de nuestro sitio. Drupal Gardens nos ofrece distintas opciones dependiendo del tipo de uso que le vayamos a dar. Nos ofrece cuatro preconfiguraciones distintas ya sea para ofrecer productos o servicios, para una campaña determinada en base a una agenda, un blog o nuestra propia plantilla, que nos permite definir los servicios que tendremos disponibles. Aquí no se trata de elegir la apariencia de nuestra página, sino más bien la funcionalidad que le vamos a otorgar, de elegir el conjunto de módulos de Drupal que se activarán al crear el sitio. 105 Negocios y Dirección

106 Una vez definido el uso que le vamos a dar entramos en la consola de administración de Drupal Gardens donde podemos ir definiendo el contenido, la estructura, la apariencia, usuarios, módulos, configuración e informes de nuestra página: Estas opciones nos permiten personalizar nuestra página, definir cómo queremos que se vea y resaltar determinados aspectos u ocultar otros. Vamos a ver un poco más en detalle cada uno de ellos. Negocios y Dirección 106

107 GESTIÓN DE CONTENIDOS En este primer apartado del menú controlaremos todas las opciones de los contenidos que tenemos en nuestra página. Podemos ver los artículos que ya tenemos publicados en nuestro blog, las páginas que tenemos creadas, como por ejemplo la página de contacto, y a la vez crear nuevos contenidos. Lo mejor de todo son las facilidades de configuración que tenemos, para publicar, o dejar en borrador algún artículo o reordenar y borrar contenidos. El editor de contenidos que tenemos es muy similar al de Wordpress, un editor de tipo Wysiwyg, que nos muestra las páginas tal y como las veremos publicadas en su momento. En la opción de configuración podremos elegir el tipo de editor, si no nos convence el que viene por defecto, con el que trabajamos. Existen varios para elegir que tendremos que descargar e instalar. Por último, desde esta opción tenemos la posibilidad de administrar los comentarios y los archivos multimedia que luego incorporaremos a nuestros artículos a través del editor. En este aspecto la herramienta ayuda a trabajar de una manera sencilla. Es intuitivo y ágil en la estructura, permitiéndonos administrar todos los aspectos importantes de nuestra página. 107 Negocios y Dirección

108 ESTRUCTURA DEL SITIO En esta opción es donde administramos la estructura que tendrá nuestro sitio. Se trabaja mediante bloques de contenido, ya sean estos menús, banners, búsquedas, identificación de usuarios, etc. Nos permitirá definir tanto donde situamos cada uno de estos elementos como si queremos mostrarlos o tenerlos ocultos. Además nos permitirá añadir botones que nosotros definiremos en su función, posición, que acción se ejecuta al pulsarlos, etc. También nos permitirá crear los formularios de contacto para nuestras páginas, definir los parámetros básicos de los tipos de contenidos, ya sea una página, un producto o una entrada de blog. A la vez podemos definir los distintas opciones que permitimos en los archivos multimedia, ya sean tipos de archivos, longitud, si permitimos streaming o no, etc. También podemos definir en este apartado la organización por tags, categorías a la hora de definir posteriormente nuestros artículos de contenido y agruparlos de forma sencilla. APARIENCIA DEL SITIO Este es un aspecto en el que Drupal Gardens está bastante conseguido, puesto que aunque hay que decir que tienen muy pocas plantillas, sólo siete, la posibilidad que nos da de personalizar a nuestro gusto cada una de ellas hace que podamos elegir colores, áreas de trabajo, etc para cada una de las plantillas, lo que hace que las opciones de personalización crezcan de manera exponencial. Otra de las cuestiones que nos permite definir es el tipo de fuente que utilizaremos en nuestra página, el formato por defecto, tamaño, color, fondo, bordes y espaciado entre las fuentes y el elemento que ocupa o el fondo de página. Aquí también podemos editar y configurar nuestro logotipo, la forma en que se verá y subir la imagen del mismo. Negocios y Dirección 108

109 GESTIÓN DE USUARIOS Es el módulo que nos permitirá administrar las identidades que acceden a nuestra página. Podemos crear usuarios, asignar distintos perfiles, ya sea de propietario, administrador o publicador. Permite una gestión modular de los permisos, es decir, a un usuario le podemos dar permiso para que publique en un módulo, pero denegarlo en otro. GESTIÓN DE MÓDULOS En este caso lo que se administra en este apartado son las distintas opciones de nuestra página, activando o desactivando módulos, como pueden ser la opción de los RSS, bloquear contenido, permitir comentarios y notificarnos cuando esto se produce, entradas de blog, ayudas, menús, gestión de estadísticas e informes con Google Analytics, o habilitar una lista de correo. La única pega que tenemos al trabajar en la nube con Drupal Gardens es que no se pueden instalar más módulos de los que vienen por defecto, pero sí que existe la posibilidad de exportar todo el sitio y reinstalarlo en otro hosting que queramos donde sí tengamos acceso al sistema de ficheros. 109 Negocios y Dirección

110 CONFIGURACIÓN DE LA PÁGINA E INFORMES En la pestaña de configuración encontraremos las opciones que tenemos para configurar muchos de los parámetros por defecto, como la dirección de correo la que nos llegan notificaciones, permitir html en comentarios, opciones regionales y de idioma, fecha y hora, etc. Respecto a los informes nos permitirá revisar cuestiones como qué partes de nuestra página son las más vistas, cuáles son las búsquedas más frecuentes, si tenemos errores al encontrar alguna página o una lista de los eventos generados por el sistema o el log de sucesos que nos permitirá crear filtros para facilitar su uso. Negocios y Dirección 110

111 9. ALOJAMIENTO Cualquier PYME media, salvo que se dedique al sector de la informática y, más concretamente, al del alojamiento, normalmente carece de infraestructura necesaria para dar el soporte adecuado a sus sistemas de información, y especialmente los orientados a dar un servicio 24x7 accesible desde Internet. Por esta razón, y porque lo ideal es que cada negocio se centre precisamente en el núcleo de su negocio y no en temas de intendencia, casi cualquier empresa termina externalizando la parte de la presencia de su negocio en Internet, tanto a nivel de diseño y construcción como a nivel de alojamiento. Si el planteamiento de la web abarca también alguna parte interna (intranet o extranet), habría que ver las necesidades de interacción de estas partes de la web con sistemas de información preexistentes, en cuyo caso podría complicarse la arquitectura de la solución, ya que la parte web necesitaría una comunicación adicional con otro software. Pero en general, para un proyecto exclusivamente de web corporativa pública de tamaño medio para una PYME, es suficiente con un proveedor de alojamiento (hosting) que pueda cumplir con los siguientes requisitos, a modo orientativo: Capacidad de almacenamiento de al menos 3 GB. Capacidad de transferencia de al menos 30 GB. Compatibilidad con lenguajes de programación. Soporte a PHP es lo deseable en la mayoría de los casos. Antivirus. Administración remota. Transferencia de ficheros. Edición de ficheros en remoto. Gestión de la seguridad. Bloqueo de IPs. Seguridad a nivel de fichero. Gestión de claves y acceso encriptado. Protección contra enlaces externos. Gestión de páginas de error. Estadísticas y análisis de uso. Gestión de dominios, subdominios y redirecciones. Soporte de cuentas y dominios de correo electrónico con anti-spam y configuración de respuestas automáticas. 111 Negocios y Dirección

112 Soporte a bases de datos MySQL y PostgreSQL. Seguridad física en las instalaciones. Soporte online y telefónico 24x7. Copias de seguridad PANELES DE CONTROL El término panel de control en los servicios de hosting hace referencia a la interfaz que da la compañía de alojamiento para el mantenimiento y monitorización del sitio hospedado. Generalmente son en sistemas operativos GNU/Linux pero, sin embargo, también existen otras plataformas usadas para esto como Windows Server, BSD, etc. Estas son algunas de las funciones que contienen la mayoría de los paneles: Estadísticas de visitas. Detalles sobre el ancho de banda usado. Gestión de archivos. Configuración de la cuenta de . Gestión de bases de datos. Gestión de usuarios de FTP. Acceso a ficheros de log del servidor. Gestión de subdominios. Y estos son los paneles más utilizados a día de hoy: cpanel ( DirectAdmin ( Plesk ( H-Sphere ( Helm ( Hosting Controller (hostingcontroller.com) Ensim ( Interworx ( Vemos con más detalle el aspecto y las características de uno de los más populares, CPanel: Negocios y Dirección 112

113 CPANEL En la imagen de la izquierda vemos un ejemplo de una pantalla de administración de CPanel versión 11 proporcionada por un proveedor de servicios de alojamiento. Como se puede apreciar, el administrador del sitio tiene a un solo clic todas las funcionalidades que necesita: Gestión de archivos, copias de seguridad y accesos remotos al servidor de ficheros. Gestión de cuentas de correo electrónico, filtros, reenvíos, auto-responders y anti-spam. Gestión de la seguridad. Gestión de dominios y subdominios. Administración de bases de datos. Instalación de aplicaciones mediante instaladores automáticos y soporte a lenguajes de programación, en este caso PHP y Ruby on Rails. Gestión avanzada: antivirus, tareas de mantenimiento programadas (cron jobs), gestión del servidor web, administrador de imágenes y páginas de error. 113 Negocios y Dirección