viernes, 13 de noviembre de 2015

Diseño de la Estructura Física y Publicación de un Recurso Web

1 comentarios

» Diseño de la Estructura Física.

La estructura del diseño de una página web tiene una serie de reglas que se encuentran estandarizadas gracias al uso continuo. Los usuarios conocen estas reglas y esperan encontrar cada cosa en su sitio.

Esto está sustentado en base a dos grandes criterios, que son los enlaces que permiten la formación de cierta cohesión, y la unidad visual, que en definitiva es lo que brinda al usuario la sensación de unidad del sitio.

Para hacernos una idea de estos conceptos, imaginemos una colección de libros de una editorial. Estas colecciones suelen estar formadas por libros con dimensiones y encuadernación idénticas, para que se tenga la sensación visual de que se trata de una unidad, por más que se trate de una serie de libros independientes, de autores y temáticas disímiles. Lo mismo sucede con los sitios web. Los grandes portales suelen emplear cierta unidad visual para dar a entender al usuario que se encuentra en un sitio determinado.

Al igual que en otras disciplinas, el diseño web ha ido evolucionando hasta llegar a ciertos criterios estándares. Desde el punto de vista del usuario, tiene la ventaja hacer predecibles a los sitios, permitiendo un rápido acceso a todo sin necesidad de realizar búsquedas por toda la página. 

Desde el punto de vista de los diseñadores, salvo pequeños cambios que pueden realizarse, por regla general esta importante parte del diseño ya se encuentra prácticamente resuelta.




Estructura del diseño web

La gran mayoría de las páginas web tienen divisiones o secciones similares. Lo usual es que, en la parte superior de la página se encuentre un encabezado, seguido de un cuerpo principal que suele estar flanqueado por una columna lateral (tanto a la izquierda como a la derecha) o dos columnas laterales, seguidas al final de la página por un pie de página. La imagen siguiente es un esquema típico de una página web. Se debe tener en cuenta que este esquema sufre variaciones, aunque normalmente son pequeñas.

El encabezado

De todas las partes de la estructura del diseño web, el encabezado es la que mayor tendencia tiene a repetirse entre páginas de un mismo sitio. Aun cuando el sitio tenga grandes diferencias en estructura y contenido entre sus páginas, si mantiene una unidad en su encabezado los usuarios percibirán la sensación de unidad que el sitio requiere.

» Publicación del Recurso Web.

¿Qué publicaremos?

Esto es lo primero a resolver. Queremos publicar un sitio personal, profesional, un blog, audio u otros. Esta elección inicial definirá a nuestra publicación, razón por la cual hay que estar bien seguros y planificar lo máximo posible. 

¿Cómo publicaremos?

En este punto juegan los recursos materiales y los conocimientos de los cuales disponemos o podríamos disponer. Este presupuesto primario nos definirá que tipo de publicación podemos gestar. 


¿Dónde publicaremos?

Definidos ya nuestros recursos materiales y capacidades técnicas el próximo paso será elegir el proveedor de hosting. Existe gran oferta de hosting, registro de dominios y cada una puede ajustarse a lo que requerimos si es que lo tenemos bien definido. 

¿Cómo se estructura el sitio?

De acuerdo a las necesidades que implique el proyecto debemos plantear la estructura primaria del sitio. Es decir ¿qué necesitaremos mostrar?, ¿de qué manera? y tener muy en cuenta detalles como navegabilidad, usabilidad, ampliaciones y modificaciones probables futuras.

¿Qué herramientas usaremos?

Si nuestra publicación usará algún asistente de un hosting gratuito o patrocinado deberemos seguir los pasos que nos plantea el mismo y en general no tendremos que acudir a software aparte, excepto para modificar las imágenes que carguemos y algún otro complemento.

Si por el contrario editamos o creamos nuestras páginas sin asistentes tendremos que conseguir al menos tres tipos de software: editor HTML, editor de imágenes y algún cliente de FTP para subir los archivos al servidor contratado.

Uso de imágenes:



Hay que asegurarse de subir la imagen que deseamos mostrar en el HTML.

Las imágenes soportadas por los navegadores en general y con las cuales nos ahorraremos problemas son gif, jpg y png. En cuanto a cualquier otro complemento los cuidados a tener son exactamente los mismos, ya sea que agreguemos archivos de java, flash, mp3, windows media, etc.

Las tipografías:

Si no estamos acostumbrados a editar webs puede que elijamos alguna tipografía extraña que en nuestro ordenador se encuentra instalada pero que en los ordenadores de la mayoría de los usuarios no estén instaladas.
Se recomienda por esto utilizar las tipografías que todo ordenador contiene, Arial, Serif, Helvética, Courier, Times New Roman y a lo sumo Verdana. De otra manera lo que en su ordenador incluso llamando la página subida con un explorador se ve de una manera en el ordenador de otras personas se verá muy diferente.
Editores HTML:

Editores de imagen y multimedia:

Para poder editar imágenes y complementos necesitamos disponer de cierto software que permita realizar nuestro trabajo. 

Función FTP:

Según el software que utilicemos para crear nuestro sitio tendremos o no incorporada la función FTP. Si no tenemos la función FTP para subir el sitio lo más recomendable es usar SmartFTP, si bien se trata de un software con licencia se permite su utilización libre para uso personal o educativo. Con este software lo que haremos es subir nuestro sitio armado en el ordenador a una dirección web.

Hosting:



La elección del hosting se condice absolutamente con el carácter de nuestro proyecto. Si nuestro sitio ha de tener páginas dinámicas necesitaremos bases de datos, sino cualquier hosting que nos satisfaga en cuanto a velocidad, estabilidad y servicio será adecuado.

Dominio:

Si nuestra publicación tendrá dominio, es decir un nombre único a través del cual se identifica nuestro sitio, la elección es tal vez complicada por la gran variedad de opciones disponibles. Es importante tener en cuenta que cuanto más corto y más sencillo sea el nombre, más chances tenemos que los internautas vuelvan a acceder al sitio sólo por recordarlo más fácil.


Referencias:
Andrés Fernández, http://www.lawebera.es/diseno-web/estructura-de-una-pagina-web-estructura-del-diseno.php, Actualizado el 26/02/2010.

Marcelo Zamora, http://www.maestrosdelweb.com/publicarweb/, enero 23 2007

jueves, 12 de noviembre de 2015

Introducción a los Sistemas de Gestión de Contenidos (CMS) de código abierto

1 comentarios




1. Los sistemas de gestión de contenidos

1.1. ¿Qué es un CMS?

De acuerdo a García los sistemas de gestión de contenidos (Content Management Systems o CMS) es un software que se utiliza principalmente para facilitar la gestión de webs, ya sea en Internet o en una intranet, y por eso también son conocidos como gestores de contenido web (Web Content Management o WCM). Hay que tener en cuenta, sin embargo, que la aplicación de los CMS no se limita sólo a las webs.

James Robertson (2003 b) propone una división de la funcionalidad de los sistemas de gestión de contenidos en cuatro categorías: creación de contenido, gestión de contenido, publicación y presentación.

Creación de contenido

Un CMS aporta herramientas para que los creadores sin conocimientos técnicos en páginas web puedan concentrarse en el contenido. Lo más habitual es proporcionar un editor de texto WYSIWYG, en el que el usuario ve el resultado final mientras escribe, al estilo de los editores comerciales, pero con un rango de formatos de texto limitado. Esta limitación tiene sentido, ya que el objetivo es que el creador pueda poner énfasis en algunos puntos, pero sin modificar mucho el estilo general del sitio web.

Hay otras herramientas como la edición de los documentos en XML, utilización de aplicaciones ofimáticas con las que se integra el CMS, importación de documentos existentes y editores que permiten añadir marcas, habitualmente HTML, para indicar el formato y estructura de un documento.

Un CMS puede incorporar una o varias de estas herramientas, pero siempre tendría que proporcionar un editor WYSIWYG por su facilidad de uso y la comodidad de acceso desde cualquier ordenador con un navegador y acceso a Internet.

Para la creación del sitio propiamente dicho, los CMS aportan herramientas para definir la estructura, el formato de las páginas, el aspecto visual, uso de patrones, y un sistema modular que permite incluir funciones no previstas originalmente.

Gestión de contenido

Los documentos creados se depositan en una base de datos central donde también se guardan el resto de datos de la web, cómo son los datos relativos a los documentos (versiones hechas, autor, fecha de publicación y caducidad, etc.), datos y preferencias de los usuarios, la estructura de la web, etc.

La estructura de la web se puede configurar con una herramienta que, habitualmente, presenta una visión jerárquica del sitio y permite modificaciones. Mediante esta estructura se puede asignar un grupo a cada área, con responsables, editores, autores y usuarios con diferentes permisos. Eso es imprescindible para facilitar el ciclo de trabajo (workflow) con un circuito de edición que va desde el autor hasta el responsable final de la publicación. El CMS permite la comunicación entre los miembros del grupo y hace un seguimiento del estado de cada paso del ciclo de trabajo.

Publicación

Una página aprobada se publica automáticamente cuando llega la fecha de publicación, y cuando caduca se archiva para futuras referencias. En su publicación se aplica el patrón definido para toda la web o para la sección concreta donde está situada, de forma que el resultado final es un sitio web con un aspecto consistente en todas sus páginas. Esta separación entre contenido y forma permite que se pueda modificar el aspecto visual de un sitio web sin afectar a los documentos ya creados y libera a los autores de preocuparse por el diseño final de sus páginas




Referencia:
García C.,Xavier. Introducción a los Sistemas de Gestión de Contenidos (CMS) de código abierto. (29-11-2004)(12-11-2015).Tomado de http://mosaic.uoc.edu/2004/11/29/introduccion-a-los-sistemas-de-gestion-de-contenidos-cms-de-codigo-abierto/

viernes, 30 de octubre de 2015

Otras Consideraciones del Diseño Visual

0 comentarios


» Diseño Visual Web.

Mediante esta técnica, el diseñador tendrá en mente para quién diseña, qué espera encontrar el usuario y en qué forma. El diseño del sitio web debe estar orientado al usuario, organizando y estructurando la información según los modelos definidos de usuarios.
El problema de esta técnica de modelado de usuario es que 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 Cooper (1999).
En cambio, 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.
Además se deben definir "scenarios" - descripciones de situaciones de uso del sitio - sobre los que poder contextualizar la interacción persona-aplicación web.
La función de esta técnica es la de servir de soporte para la toma de decisiones en el diseño del sitio, permitiendo al desarrollador realizar un diseño centrado en el usuario, o más correctamente, en "algún" usuario. Este usuario podemos considerarlo 'real', ya que aunque no pertenece al mundo real, su descripción está basada sobre, y por tanto representa a, un nutrido grupo de usuarios reales.
» Diseño visual y definición del estilo.
Con el objetivo de evitar la sobrecara informativa, en el diseño de cada interfaz se debe tener en cuenta el comportamiento del usuario en el barrido visual de la página, distribuyendo los elementos de información y navegación según su importancia en zonas de mayor o menor jerarquía visual - por ejemplo, las zonas superiores del interfaz poseen más jerarquía visual que las inferiores-.
Además de la posición de cada elemento en la interfaz, existen otras técnicas para jerarquizar información como son: uso del tamaño y espacio ocupado por cada elemento para otorgarle importancia en la jerarquía visual, utilización del contraste de color para discriminar y distribuir información, uso de efectos tipográficos para enfatizar contenidos, rotura de la simetría y uso de efectos de relieve / profundidad para resaltar elementos, etc.
Además de evitar la sobrecarga informativa jerarquizando los contenidos mediante las técnicas descritas, para evitar la sobrecarga memorística se recomienda definir menús de navegación con un número de opciones reducido, normalmente no más de nueve diferentes.
» Diseño de contenidos.
La escritura hipertextual se debe realizar de forma diferente a la tradicional. El nuevo medio y sus características obligan a ser concisos, precisos, creativos y estructurados a la hora de redactar. Debemos conocer a quién nos dirigimos y adaptar el lenguaje, tono y vocabulario utilizado al usuario objetivo.
Algunos consejos a seguir en el diseño y redacción de contenidos son:
  • Seguir una estructura piramidal : La parte más importante del mensaje, el núcleo, debe ir al principio.
  • Permitir una fácil exploración del contenido : El lector en entornos Web, antes de empezar a leer, suele explorar visualmente el contenido para comprobar si le interesa.
  • Un párrafo = una idea : Cada párrafo es un objeto informativo. Se deben trasmitir ideas, mensajes... evitando párrafos vacíos o varios mensajes en un mismo párrafo.
  • Ser conciso y preciso : Al lector no le gusta leer en pantalla.
  • Vocabulario y lenguaje : Se debe utilizar el mismo lenguaje del usuario, no el de la empresa o institución. El vocabulario debe ser sencillo y fácilmente comprensible.
  • Tono : Cuanto más familiar y cercano (sin llegar a ser irrespetuoso) sea el tono empleado, más fácil será que el lector preste atención.
  • Confianza : La mejor forma de ganarse la confianza del lector es permitiéndole el diálogo, así como conocer cuanta más información posible acerca del autor.

Referencias:
Bevan, N.; Kirakowski, J.; Maissel, J. (1991). What is Usability?. Proceedings of the 4th International Conference on HCI, Stuttgart, September 1991. Elsevier.
Copper, A. (1999). The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity. SAMS. ISBN: 0-67231-649-8.

jueves, 29 de octubre de 2015

DISEÑO VISUAL

2 comentarios

Una vez que se ha terminado el trabajo en la estructura, ya se cuenta con los insumos suficientes como para avanzar hacia la generación del diseño visual de las pantallas del sitio, momento en que se utilizarán todos los insumos que se han ido generando en las etapas anteriores.
Para ello la recomendación es trabajar en cuatro etapas sucesivas e incrementales, que se describen a continuación:

Diseño de las Estructuras de Páginas

Esta etapa considera la generación de dibujos o diagramas lineales (wireframes) que describen los componentes de cada una de las pantallas del sitio, con el objetivo de verificar la ubicación de cada uno de ellos.
El ideal es que se dibujen diagramas con todas las pantallas que tendrá el sitio, ya que de esta manera será posible que diseñadores y desarrolladores tengan un documento concreto de trabajo, a través del cual resuelvan todas las dudas de los elementos que componen esta página. Si bien este trabajo es largo y puede resultar tedioso, su ventaja es que ningún elemento en las páginas queda puesto al azar sino que responde a necesidades puntuales que se han detectado y que se resuelven por esta vía.
Lo ideal es que estos dibujos no contengan ningún elemento gráfico o visual concreto (como logos, viñetas o fotos), sino que sólo incluyan líneas y bloques que representen objetos de contenido. En este nivel de desarrollo conceptual de la estructura de páginas, el uso de estos diagramas o wireframes permite centrar la discusión sobre cada pantalla en la funcionalidad y no en temas más subjetivos como colores o calidad de los elementos de diseño en la página.
No obstante lo anterior, hay ocasiones en las que es posible desarrollar diagramas o wireframes que contengan elementos o recursos visuales, esto dependerá de la madurez del equipo y las contrapartes que esten trabajando en el proyecto y estos elementos visuales se presenten unicamente como referencias cuyo objetivo sea describir con mayor claridad el sentido de las funcionalidades y objetos presentes en el wireframe.
Diagrama de estructura de páginas.
[D] Figura 3: Estructura de páginas (Wireframe).
Un elemento que se debe considerar junto con estos dibujos de estructura, es que en las pantallas que representen transacciones, se debe incluir un diagrama de flujo sencillo, mediante el cual se ejemplifique cuáles son las interacciones posibles y sus resultados. Naturalmente se deberá incluir las pantallas correspondientes cuando sea adecuado.
Diagrama de Flujo.
[D] Figura 4: Diagrama de Flujo.
Gracias a estos diagramas en combinación con las páginas, tanto diseñadores como desarrolladores podrán tener claro cuál es el trabajo que deben realizar en cada una de las áreas del sitio que se estén generando.

Bocetos de Diseño

Esta etapa consiste en la generación de dibujos digitales acabados de la forma que tendrán las páginas principales del sitio que se desarrolla, considerando como tales la Portada, Portada de Sección y Página de despliegue de contenidos.
Boceto de diseño.
[D] Figura 5: Boceto de diseño.
Para desarrollar los elementos gráficos se utilizan como insumos los dibujos de estructura que se han generado en la etapa anterior.La idea es que en esta etapa se trabaje en software gráfico para facilitar el proceso de corrección, ya que habitualmente habrá mucha interacción con los usuarios.Los elementos que se deben tener presentes en esta etapa, son los siguientes:
Imagen Corporativa de la institución:
se deben seguir los lineamientos de uso de colores, textos y otros elementos definidos para la entidad.
Imagen Corporativa del Gobierno:
se deben seguir los lineamientos indicados por el Gobierno de Chile en este aspecto.
Criterios de Usabilidad:
se deben tener en cuenta los criterios de usabilidad, accesibilidad y la normativa vigente.
Más información sobre la imagen corporativa del Gobieno en: www.gobiernodechile.cl/manual-de-normas-graficas/

Borradores de Página

Una vez que se ha aprobado la etapa anterior, se toman los bocetos de diseño que hayan sido aprobados y se genera un prototipo (páginas clickeables) mediante el cual se pueda comprobar directamente la forma en que se desempeñan, cuando se les aplica la tecnología HTML de construcción de páginas web.
La intención de esta etapa es usar el diseño de pantalla que se ha creado, contando con enlaces reales que permitan ver la forma de usar sus atributos (cada enlace tiene los estados de Enlace, Flotante, Activo y Visitado) y revisar la forma en que se despliegan las páginas que se van a desarrollar.
Adicionalmente, en esta etapa será posible hacer la comprobación efectiva del peso de las páginas una vez construidas y se podrán optimizar los elementos que queden fuera de norma por peso o tamaño.

Maqueta Web

Es la etapa final y consiste en generar todo el sitio en tecnología HTML utilizando imágenes y contenidos reales (figuras 67 y 8) .
En el caso de un sitio estático, esta etapa corresponderá a la construcción del sitio. En el caso de un sitio dinámico, las páginas que se generen permitirán que el diseñador genere las plantillas de trabajo y el desarrollador de software las utilice como elementos para introducir la programación que sea necesaria para la creación del sitio.
Es importante considerar que todas las tareas y actividades incluidas en esta etapa pueden ser abordadas por un diseñador que tenga experiencia en diseño web. Esto debe ser parte de los requerimientos solicitados a las empresas proveedoras de este tipo de servicios.
Borrador de Portada.
[D] Figura 6: Borrador de Portada.
Borrador Segundo Nivel.
[D] Figura 7: Borrador Segundo Nivel.
Borrador Tercer Nivel.
[D] Figura 8: Borrador Tercer Nivel.




Referencias
Tomado de http://www.guiadigital.gob.cl/articulo/definicion-del-diseno-visual

jueves, 15 de octubre de 2015

Importancia de los Sistemas de Navegación en Diseño Web

0 comentarios


Un buen diseño del sistema de navegación es muy importante porque ayuda a los usuarios a la hora de visitar un sitio web. Sin un buen sistema de navegación es sumamente difícil localizar un contenido, es por ello que la falta de coherencia en un sistema de navegación contribuye a un mal diseño del mismo.

Algunas recomendaciones son las siguientes

1. En lugar de la estructura gráfica de los vínculos es preferible el texto basado en vínculos, ya que resulta mucho más fácil para los motores de búsqueda.
2. Es recomendable una estructura de navegación multinivel si es un sitio web más complejo. Esto facilita su uso y permite a los usuarios saltar de un enlace a otro sin tener que pasar por páginas no relacionadas.
3. No es recomendable tener muchos sistemas de navegación dentro de un sitio web.
4. Una estructura uniforme a través de la web garantiza que los usuarios se sientan seguros evitando así desorientarlos dentro de un sitio web.
En conclusión un buen diseño de navegación permite al usuario situarse y moverse con fluidez y rapidez de manera que encuentre la información requerida, permitiendo así crear una web más usable y accesible.


Aquí le estoy publicando algo que me pareció interesante https://sites.google.com/site/disenodepag/home/una-navegacion-apropiada

miércoles, 14 de octubre de 2015

Diseño del Sistema de Navegación

1 comentarios

» Síntomas del usuario al navegar en la Web.

Tal y como comenta Jakob Nielsen en el libro “Usabilidad. Diseño de sitios Web” esta sensación de pérdida se produce cuando el usuario:

No sabe dónde está: El usuario desconoce su situación actual en relación a la estructura global de la información del sitio Web y no percibe la relación que hay entre la página actual y el resto de páginas.

No sabe dónde ha estado: El usuario desconoce la ruta de navegación que ha seguido hasta la posición actual y por consiguiente no es capaz de identificar las páginas ya visitadas.

No sabe a dónde puede ir: El usuario no puede identificar los enlaces que contienen información relacionada con la página actual.

» Formas de organizar los sistemas de navegación.

Existen diversas formas de organizar estos enlaces dentro de una página Web y según los autores Louis Rosenfeld y Peter Morville en el libro "Arquitectura de la información para la World Wide Web" 

Podemos diferenciar entre cuatro tipos diferentes de sistemas de navegación: Sistemas de navegación jerárquicos, Sistemas de navegación globales, Sistemas de navegación locales y Sistemas de navegación ad hoc.

A estos cuatro tipos de sistemas de navegación podemos añadir dos más que denominaríamos Sistemas de navegación directos o buscadores y Sistemas de navegación lineales.

Sistemas de navegación jerárquicos

Los sistemas de navegación jerárquicos se han consolidado como uno de los sistemas más utilizados, ya que a través de la organización jerárquica de los contenidos de los sitios Web se organiza la navegación en los mismos.

Donde los contenidos se organizan en un árbol jerárquico de diferentes niveles tal y como se muestra en la siguiente figura:



Sistemas de navegación globales

Estos sistemas permiten que el visitante acceda directamente a la información que desea consultar sin la necesidad de retroceder por las páginas visitadas para alcanzar otra rama del árbol de contenidos.

Este sistema de navegación no implica que desde una determinada posición podamos desplazarnos hacia cualquier otro punto de la estructura de contenidos, ya que esto podría provocar una sensación de pérdida en el usuario.

Un claro ejemplo de este tipo de sistemas de navegación lo podemos ver en el siguiente vídeo:



Sistemas de navegación locales

Si los sistemas de navegación globales complementaban a los sistemas jerárquicos, los sistemas de navegación locales complementan a los sistemas de navegación globales.
Así pues, en los sitios Web complejos donde existe diversidad en los contenidos o incluso cada subsección posee un estilo propio, los sistemas de navegación globales

por ejemplo:


Sistemas de navegación ad hoc

Los sistemas de navegación no siempre encajan en los sistemas descritos anteriormente. Por ejemplo, un sistema muy utilizado en los documentos electrónicos consiste en relacionar palabras, expresiones o frases con contenidos que amplían la información proporcionada por el autor. 

De esta manera estas palabras, expresiones o frases se convierten en vínculos incrustados en el propio texto.


Sistemas de navegación directos

Los sistemas de navegación directos o buscadores son alternativas o complementos de los sistemas de navegación citados anteriormente y facilitan a los usuarios la posibilidad de buscar directamente una determinada información, sin necesidad de navegar por las distintas secciones que componen el sitio Web.



Sistemas de navegación lineales

Los Sistemas de navegación lineales son aquellos que nos permiten recorrer el contenido de las páginas de una manera secuencial y preestablecida por el diseñador. Las únicas opciones de navegación que se le permiten al usuario son avanzar, retroceder o regresar al índice.

Este tipo de navegación se utiliza en contadas ocasiones pero suele ser de gran ayuda cuando se quiere presentar la información en una secuencia preestablecida, como por ejemplo en el uso de un manual o algún tipo de material docente donde se pretende que la información pueda ser recorrida de una sola manera.



Referencias:

» Ainda.info: Usabilidad, diseño Web fácil de usar.[www.ainda.info, marzo – junio 2004]

»   Alzado. [Alzado.org, marzo – junio 2004]

»  Arquitectura de la información. [www.malisa.cl, marzo – junio 2004]