Humanismo, racionalismo y funcionalismo en Frutiger

Charla de Desarrollo Profesional en la UMNG de Bogotá

En el marco del Día de Ingeniería, en la Facultad donde soy docente, tuve la oportunidad de invitar a Juan Duque para que presentara esta interesante charla sobre el Desarrollo Profesional. 
El tema fue "Desarrollo Profesional para artistas digitales". Son consejos para mejorar la presentación de Demo-reels, hojas de vida y portafolios. Esto es algo que me parece de suma importancia pero que creo que la mayoría de los programas de artes digitales no están enfatizando lo suficiente.

Construcción de un template Joomla 3.0 con el framework Bootstrap.

En la siguiente serie de tutoriales tomados del sitio web Inmotionhosting, se muestra cómo crear una plantilla de Joomla 3.0. Esta plantilla incluye inicio y será es adaptable al ancho de pantalla. (las entradas a los tutoriales están en inglés)
La idea es dar la idea básica de desarrollo más que del diseño gráfico.No se promete en absoluto una plantilla atractiva, pero se muestra cómo construir una plantilla Joomla 3.0 que funcione.

Download TEMPLATE BASIC 3.0

Se muestra una captura de pantalla de la plantilla y un enlace de descarga. También está presente una lista de links de los diferentes tutoriales que componen este proyecto.
Traducción al español de las introducciones de los diferetnes turoriales que componen el proyecto. Los destinos están en el sitio original en idioma inglés (http://www.inmotionhosting.com/support/edu/joomla-3/create-template)

Sección 1:		Una plantilla muy básica que pronto será una plantilla de Joomla 3.1 En nuestro primer tutorial sobre la creación de Joomla 3.0 Plantillas. Hits: 26140
Sección 2:		Cómo agregar posiciones de módulo a una plantilla de Joomla 3.1 En este tutorial Joomla 3.0, le mostraremos cómo agregar nuevas posiciones de módulo en una plantilla de Joomla 3.0. Hits: 24201
Sección 3:		Adición de un archivo a un templateDetails.xml Joomla 3.1 Template En este artículo, vamos a mostrar el archivo templateDetails.xml que incluimos dentro de la plantilla de Joomla 3.0 que estamos creando. Hits: 15330
Sección 4:		Cómo comprimir una plantilla Joomla 3.1 Ahora que tenemos todos los archivos necesarios para nuestra plantilla, le mostraremos los conceptos básicos de comprimir el archivo y tenerlo listo para la instalación. Hits: 7320
Sección 5:		¿Cómo instalar una plantilla Joomla 3.1 En este tutorial de Joomla 3.0, que le guiará a través de los pasos para instalar una plantilla Joomla 3.0 Hits: 30575
Sección 6:		Cómo cambiar tu sitio Joomla 3.1 Template Después de instalar una plantilla Joomla 3.0, el siguiente paso es activar la nueva plantilla. Hits: 15537
Sección 7:		Cómo agregar archivos CSS y JavaScript a un Joomla 3.1 Template En este artículo, le mostraremos cómo utilizar $ doc-addStylesheet y $ doc-addscript añadir archivos css y javascript a una plantilla de Joomla 3.0. Hits: 15803
Sección 8:		Cómo agregar Bootstrap a Joomla 3.1 Template En este tutorial, le mostraremos cómo agregar los archivos javascript y css de arranque a una plantilla de Joomla 3.0. Hits: 20965
Sección 9:		¿Cómo hacer un Joomla 3.1 Template Adaptable En este tutorial, vamos a cubrir los cambios que hicimos en el archivo index.php de nuestra plantilla Joomla 3.0 para que sea plenamente responsable. Hits: 22090
Sección 10:		Adición de seguridad a una plantilla de Joomla 3.1 con jexec En este tutorial, le mostraremos cómo agregar jexec a tu Joomla 3.0 para ayudar a agregar una capa de nivel de seguridad a su plantilla. Hits: 5641
Adición de CSS y estilo a la plantilla Conoce cómo agregamos estilo básico de la plantilla mediante la actualización de nuestro css / style.css archivo
Sección 11:		Adición de CSS con el formulario de acceso en una plantilla de Joomla 3.1 Ahora que hemos creado nuestro modelo básico, vamos a empezar a añadir CSS a nuestro archivo css / style.css para ayudar a que los módulos se destacan.  Primero vamos a actualizar el formulario de acceso. Hits: 5958
Sección 12:		Adición de CSS a los elementos laterales en una plantilla de Joomla 3.1 En este Joomla 3.0 tutorial, le mostraremos cómo el estilo de los módulos en la barra lateral derecha de nuestra plantilla usando CSS. Hits: 6704

Diseño sensible, adaptable, o escalable. (Responsive design) con Dreamweaver y Boilerplate.

Con seguridad los diseñadores Web no tuvimos durante mucho tiempo la capacidad de dar una buena solución al diseño de contenidos para pantallas grandes, así como también para pantallas más pequeñas de diferentes tamaños en aparatos móviles y de mejor resolución.

Esta entrada trata sobre un análisis del diseño Web con hojas de estilo CSS3 y HTML5,en Adobe Dreamweaver. Este tipo de diseño en principio se denomina Responsive Design (Diseño adaptable traducido del inglés) y que debe su nombre a un artículo, aparecido en 2010:
http://www.alistapart.com/articles/responsive-web-design/. Se describen los diferentes tipos de archivos que maneja el método, y finalmente se presenta un link a un tutorial en video.

La técnica se basa en un hoja de estilo CSS con Mediaquery, los HTML y una librería Javascript.
Gracias a la aparición de la técnica de Plantillas de  Diseño Fluido de Dreamweaver CS6, se hace más fácil su implementación.

A pesar de que es una buena alternativa para sitios móviles, debe tratarse con cuidado el manejo de los contenidos ya que podríamos estar enviando al dispositivo móvil archivos que son usados para el ordenador de escritorio, que, en relación al móvil, se supone más potente. Para optimizar los contenidos para móviles, estos deberían estar preparados, sobretodo las imágenes y videos, para las pantallas más pequeñas y procesadores menos potentes. Sin embargo, con cada actualización de tabletas o teléfonos, nos damos cuenta que estos tienen un poder de proceso y memoria que compiten ya con los equipos de escritorio. También se podría usar el Framework Jquery Mobile que optimiza los recursos del móvil.

Ventana de diáologo de Dreamweaver 6, mostrando un archivo
nuevo a partir de una plantilla de Diseño Fluido.

Análisis de la plantilla propuesta por Adobe Dreamweaver CS6.

La técnica de Diseño Adaptable mediante Adobe Dreamweaver CS6 se basa en una hoja de estilos CSS básica denominada "Boilerplate.css", un script de Javascript llamado "respond.min.js" y una hoja de estilo CSS propia, que puede tener cualquier nombre.

 

 Boilerplate.css

El archivo vinculado a nuestro HTML5, "boilerplate.css"  es el resultado de una intensa investigación sobre estilos válidos para múltiples navegadores. Adobe dá los respectivos  créditos y agradecimientos en el código fuente a varios desarrolladores y a la comunidad de H5BP ( Información detallada acerca de este CSS: h5bp.com/css).

El archivo "boilerplate" corrige el texto que cambia de tamaño de forma extraña en IE6/7 cuando el tamaño de fuente del cuerpo se establece en unidades "em". Forza la barra de desplazamiento vertical en navegadores distintos de IE. Evita el ajuste de tamaño de texto en iOS cuando cambia la orientación del dispositivo sin que se desactive el zoom de usuario. También establece tamaños de tipografía a "1em", estandariza el ancho de los caracteres para las etiqueta B y STRONG, así como estandariza todo lo relacionado a saltos de línea, reglas, listas ordenadas y desordenadas, colores de links, etc.

Este archivo iguala a ceros muchos de los valores de las reglas CSS básicas dentro de un DIV con clases de CSS no semánticas como .clearfix, .visuallyhidden y .focusable

En conclusión, la hoja de estilos "boilerplate.css" adelanta un gran camino en la estandarización y pruebas de diseño para los diferentes navegadores que por alguna razón muestran resultados inesperados con los CSS.

 

 Respond.min.js

Básicamente, el script recorre la CSS a que se hace referencia en la página (la CSS propia o la que se haya creado con la página y que es independiente de boilerplate.css) y se ejecuta una expresión regular o dos en su contenido para encontrar preguntas de los medios y sus bloques asociados de CSS.

El script analiza el ancho de la pantalla donde se esté desplegando la página, y selecciona una porción del código de  la hoja de estilo precedida con un

 "@media only screen and (min-width: npx) siendo "n" el ancho mínimo de la pantalla"

para colocarla al principio de la renderización del CSS.

Dreamweaver 6 adjunta la dirección relativa del archivo respond.min.js (entre otras) cuando se inicia el diseño mediante la acción de menú Archivo/Nuevo diseño de cuadrícula fluida. Los archivos .css y .js se suben al servidor una vez se quiera publicar el sitio.

La hoja de estilos propia. (miNombre.css)

Además de los dos archivos mencionados, se hace necesario un archivo CSS propio o personalizado, que es el que manejará los estilos de textos personalizados, márgenes, paddings, clases y ID. Este archivo CSS es el que contiene el Media Query.

De acuerdo con mi experiencia, es mejor hacer caso a la advertencia del texto de ayuda de las DIV, la cual dice que no se aconseja anidar DIV-s. Estas se insertan por  el comando de menú:

insertar/Objetos de diseño/DIv de diseño de cuadrícula fluida

Y deben quedar siempre dentro de la DIV principal denominada ".gridContainer clearfix" (nombre de clase). Una tras otra, sin anidar. Las posiciones y estilos se dan a partir de allí en la hoja de estilos, repitiendo los nombres de las clases y ID para cada caso o @media only screen and (min-width: npx) y colocando los valores acertados para cada ancho de pantalla.

Ejemplo de hoja de estilo propuesta por Dreamweaver mediante este método, con @media Query:

@charset "utf-8";
/* Medios fluidos sencillos
   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
width:100%;
}
/*
Propiedades de cuadrícula fluida de Dreamweaver
----------------------------------
dw-num-cols-mobile: 5;
dw-num-cols-tablet: 8;
dw-num-cols-desktop: 10;
dw-gutter-percentage: 25;
Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 
http://www.alistapart.com/articles/responsive-web-design
y Golden Grid System de Joni Korpi
http://goldengridsystem.com/
*/
/* Diseño móvil: 480 px e inferior. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
/* Diseño tableta: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */
@media only screen and (min-width: 481px) {

.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}


/* Diseño escritorio: de 769 px hasta un máximo de 1232 px.  Hereda estilos de: Diseño móvil y Diseño tableta. */
@media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}

En el ejemplo anterior se ve que la primera porción de CSS es la estandard y es la que se desplegará en cualquier pantalla si no encontrara la condición  de medir mínimo 481px o 769px, casos en los cuales desplegará las reglas estipuladas en cada sección (fíjese que las llaves que encierran cada porción están en color rojo).

 

 Manejo de imágenes.

Es posible diseñar las imágenes y contenidos para que mediante el procedimiento Mediaquery cargue en cada dispositivo las que le corresponden a su tamaño. Una solución posible es colocar los tamaños del ancho de las imágenes, DIV y demás características en porcentajes, haciendo que no ocupen el ancho total mediante una regla de ancho máximo

por ej.: img {width: 90%; max-width: 1200px;}

deberíamos, por lo tanto, colocar en la carpeta de imágenes las apropiadas a cada tamaño de pantalla y llamarlas mediante la hoja de estilos en cada porción de @media.

 Otra opción que funciona bien para el cambiante mundo de los tamaños de imagen es el "width: auto;". 

img {width: auto; max-width: 600px;}

Ya que este atributo acomoda los anchos de la imagen con respecto a su contenedor y en relación al tamaño original. Parece también comunicarse muy bien con el atributo Viewport.

  ¿Qué usar, ID o Clases?

Es una buena pregunta. Las ID son identificaciones únicas a objetos como DIV que no se deban repetir en el diseño, van precedidas por el signo "#",  por su lado, las clases son objetos que pueden ser genéricos (van precedidos con "."), tales como tipos de letra en de títulos H1, H2, etc, párrafos, etc, y siempre tienen nombre único con la diferencia que en el HTML el objeto al que se le haya aplicado dicha clase (spam class) renderizará el estilo cuantas veces lo encuentre. Digamos, por lo tanto, que no es  el hecho de qué usar más o menos veces, sino de saberlo aplicar.

Conclusión

El uso de herramientas como Dreamweaver, o un Frameworks para el Javascript, los CSS o el HTML nos ayuda mucho en la consecusión rápida de nuestras metas de diseño ya que adelanta trabajo en las pruebas con navegadores.

Javascript se consolida como el lenguaje de integración de la web ya que es compatible con los programas de navegación, y como vimos, maneja bien las hojas de estilo.

Adobe no es la solución perfecta a todos los requerimientos de diseño, en algunos casos debemos valernos de investigaciones de otras fuentes como  los frameworks de Github , JqueryMobil, Jquery y demás.

Tutorial de este artículo.

Diseño adaptable en Dreamweaver

10 reglas heurísticas de Usabilidad de Jacob Nielsen.

Jakob Nielsen “el gurú de la usabilidad” es una de las personas más respetadas en el ámbito mundial sobre usabilidad en la web.

Jakob estudió 249 problemas de usabilidad y a partir de ellos diseñó lo que denominó las“reglas generales” para identificar los posibles problemas de usabilidad.

1. Visibilidad del estado del sistema: el sistema siempre debería mantener informados a los usuarios de lo que está ocurriendo, a través de retroalimentación apropiada dentro de un tiempo razonable.
2. Relación entre el sistema y el mundo real: el sistema debería hablar el lenguaje de los usuarios mediante palabras, frases y conceptos que sean familiares al usuario, más que con términos relacionados con el sistema. Seguir las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.
3. Control y libertad del usuario: hay ocasiones en que los usuarios elegirán las funciones del sistema por error y necesitarán una “salida de emergencia” claramente marcada para dejar el estado no deseado al que accedieron, sin tener que pasar por una serie de pasos. Se deben apoyar las funciones de deshacer y rehacer.
4. Consistencia y estándares: los usuarios no deberían cuestionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas.
5. Prevención de errores: mucho mejor que un buen diseño de mensajes de error es realizar un diseño cuidadoso que prevenga la ocurrencia de problemas.
6. Reconocimiento antes que recuerdo: se deben hacer visibles los objetos, acciones y opciones, El usuario no tendría que recordar la información que se le da en una parte del proceso, para seguir adelante. Las instrucciones para el uso del sistema deben estar a la vista o ser fácilmente recuperables cuando sea necesario.
7. Flexibilidad y eficiencia de uso: la presencia de aceleradores, que no son vistos por los usuarios novatos, puede ofrecer una interacción más rápida a los usuarios expertos que la que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que los usuarios adapte el sistema para usos frecuentes.
8. Estética y diseño minimalista: los diálogos no deben contener información que es irrelevante o poco usada. Cada unidad extra de información en un diálogo, compite con las unidades de información relevante y disminuye su visibilidad relativa.
9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores: los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugerir una solución constructiva al problema.
10. Ayuda y documentación: incluso en los casos en que el sistema pueda ser usado sin documentación, podría ser necesario ofrecer ayuda y documentación. Dicha información debería ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa.

Texto de :
http://web.braintive.com/10-reglas-heuristicas-de-usabilidad-de-jakob-nielsen/

Esqueumorfismo

Es una palabra proveniente del griego, que es usada en la cerámica y que significa la representación de una pieza o parte en otra, así esta no se use. En la computación es la representación de objetos del mundo real, en las Interfaces Gráficas.

En lo referente a lo ornamental puede usarse para familiarizar al usuario con referencias a objetos a los que visualmente se está acostumbrado. En cuanto al uso, hace referencia a objetos que por su uso referencian interacciones parecidas a la del mundo físico, por ejemplo una cesta de basura, carpetas, etc.

Hasta la fecha, Apple se caracteriza por diseñar interfaces que representan el mundo real.

Muchas veces el diseñador de Interfaces se apega a la imitación esqueumórfica y limita la funcionalidad, imitar un libro en un entorno digital, donde haya que pasar muchas páginas para llegar al objetivo de mi lectura, limita la usabilidad y acceso a la información. Aunque es posible que al lector le guste la parafernalia de pasar las hojas y escuchar el sonido del paso de éstas, tarde o temprano terminará queriendo pasar al contenido mediante el uso de un menu de contenidos.

Una señal más de la interfaz esqueumórfica se da al resaltar frases o palabras en un iBook para iPad, la cual imita perfectamente un resaltador de tinta.

Imagen de un iBook que imita un libro del mundo físico.

La tendencia de imitar los objetos del mundo físico en las Interfaces de Usuario se viene dando desde el momento mismo de la creación de aplicaciones para computador. Como lo es el caso WinAmp, entre otras, que usaba la metáfora visual de la parte frontal de un equipo de sonido Hi-Fi de los años 90.

WinAmps 2.0

La representación del mundo fisico en las interfaces, empieza con la creación también de los teclados llamado hoy "QWERTY" por la disposición de las citadas teclas en el dispositivo de entrada. Dispositivo que cada vez va mejorando en los aparatos móviles, pero que en el fondo sigue recreando la disposición del teclado original de las máquinas de escribir y adicionando una que otra funcionalidad como los signos de "@", ".com" y sus respectivas mezclas junto a la tecla "ALT". 

Vale la pena meditar si hoy día escribimos más pensando en la página como PDF (o sea electrónica) que una para imprimir, más si hay tantas campañas sobre ecología y protección de un medio ambiente sin tintas, tala de árboles para producción de papel, etc.

Disposición original de las letras en un teclado de máquina de escribir.

"Con el diseño esqueuomorfista se consigue una cierta familiaridad de base con la interfaz por analogismo del usuario con los referentes materiales que conoce. Se parte de conocimientos previos para aplicarlos a lo nuevo y eso, en realidad, es siempre positivo. En ocasiones, sin embargo, nos impide aprovechar la liberación de lo material y sus ataduras pueden incluso entorpecer la usabilidad, pero al final esto se vincula más con malas decisiones de diseño en sí mismas que a la influencia real de la inclinación al esqueuomorfismo." 

Revista Caracteres.net

(http://revistacaracteres.net/blogs/pantallas/2012/02/a-favor-y-en-contra-del-esqueuomorfismo/) 

Aunque el uso excesivo o inadecuado de esta técnica provoca en las interfaces su desuso, si hay algunas que lo necesitan, o por lo menos, minimizar el diseño de elementos decorativos en pro del uso. 

La aplicación iBooks de IOS, vs la versión simplificada que elimina la representación de los entrepaños de madera, sombras y demás elementos decorativos que si bien ayudan a ubicar al usuario dentro de un "mundo físico-virtual", su eliminación da un estilo más versátil y contemporáneo si se quiere.

Un ejemplo del diseño Esqueumorfista llevado a su máxima expresión es el software Reason:

Enlaces de interés

Las ideas de diseño detrás de la moderna interfaz de Windows 8

http://www.baboo.com.br/windows/as-ideias-de-design-por-tras-da-interface-moderna-do-windows-8/

Windows 8 y la carga cognitiva

http://www.baboo.com.br/windows/windows-8-e-a-carga-cognitiva/

Por qué el skeumorfismo en su justa medida es positivo

http://applesencia.com/2013/08/razones-uso-skeumorfismo-positivo

Breve Manual de tipografía

Este manual introductorio nos dará una guía para empezar a conocer la tipografía.

Manual De Tipografia by Lameth

Flujo de trabajo para Indesign en DPS

Es la plataforma de Adobe para la publicación y creación de publicaciones para dispostivos móviles como iOS, Android y Kinet.

Las publicaciones se manejan siempre desde el programa Indesign, con las herrramientas Folio Builder y Overlay Creator del menú ventana.

Algunas consideraciones a tener en cuenta son:

Debe crear una ID de Adobe específica para DPS, en https://digitalpublishing.acrobat.com/
Esta ID es gratuita y sirve para dejar grabadas en el sitio web de Adobe los trabajos que se vayan haciendo. Adobe tiene la esperanza de que en algún momento estas cuentas se vuelvan de pago, ya que para poder vender las revistas digitales hay que pagarles una suscripción. Mientras tanto sólo las pueden ver los desarrolladores o los clientes a los que se les haya creado una ID.

Bajar el programa Adobe Viewer en el dispositivo móvil. Loguearse en él para ver las publicaciones que se vayan haciendo en Indesign. En las tiendas de Apps de cada plataforma está el programa.

Actualizar el programa Indesign con los últimos plugins y Adds-on como son Folio Builder y Overlay Creator. Esto se hace mediante el menú ayuda de Indesign y escogiendo Actualizaciones. Allí salen todas las actualizaciones de la Suite CS 5.5 y 6. En caso de ser la Suite 6, esta actualización es automática. Si es 5.5, se indicará una URL en donde bajar dos actualizaciones independientes para Indesign. También están las URLs en el sitio de DPS (https://digitalpublishing.acrobat.com/) a las cuales se accede una vez logueados e inscritos.

Una vez hecha la inscripción en el sitio de DPS, hay la posibilidad de acceder a una serie de recomendaciones y tutoriales para aprender el manejo de las publicaciones digitales.

Recomendaciones

Las publicaciones en Folio Builder (Ventan/extensiones en Indesign), se hacen importando archivos sueltos de indesign o añadiendo la publicación abierta actualmente en Indesign. Al añadir las publicaciones, estas se convierten en artículos. Esto se comienza a hacer en Ventana, Extendiones, Folio Builder.

Las publicaciones en Indesign se deben configurar sin páginas opuestas. Si se debe convertir una publicación impresa en DPS, debe tener en cuenta que las páginas maestras cambiarán al configurar una sola página en la vista de página.

Se deben crear publicaciones diferentes para la vista vertical y horizontal (al voltear el dispositivo). En Folio Builder se puede especificar una carpeta que contiene las dos publicaciones y Folio Builder crea los artículos para cada posición. La manera de hacerlo es poner nombres iguales a cada configuración con la extensión "_v" y "_h". Ejemplo: "revista_h.indd" y "revista_v.indd". Esos archivos se colocan en la misma carpeta.

Sitio de tutoriales para DPS, ¿Qué se puede aprender?

Se pueden crear publicaciones con desplazamiento Vertical y Horizontal (es diferente de la posición del dispositivo), es decir, al arrastrar el contenido con el índice hacia arriba-abajo o izquierda-derecha. Se crea una publicación añadiendo la publicación abierta y colocando la propiedad de Publicación como "vista normal" en folio Builer. Luego se abre el archivo que queremos sea desplazamiento horizontal y se adiciona como artículo a la publicación dentro del panel de Folio Builder, a este se le pone la propiedad de "Vista Horizontal" y haciendo click en el checkbox de desplazamiento horizontal.

La ventana de Overlay Creator y la de Interacción, se usan para crear interacciones de gestos con los contenidos. EN algunos casos la interacción es sólo para la versión Flash o PDF, y en otros casos para DPS, o ambas. Estos se colocan en la publicación mediante la creacion de contenedores. Hay otras interaccione como cubos 3D, Zoom a imágenes, presentación de diapositivas, incrustación de HTML dentro de contenedores, incrustación de URL locales y externas dentro de contenedores, hipervínculos a URL externas, internas y páginas con el uso de "navto", http, etc,  (que para DPS son artículos) de la publicación. Estas ayudas se encuentran en Adobe tutorial para DPS. Otra manera es buscar muchas publicaciones al respecto en Youtube, mediante la búsqueda de DPS, overlay  creator o folio builder.

Tipografia

Tipografias from disenoyempresa

 

Breve Historia de la Escritura from wenceslao verdugo

 

Tipos de escritura from Carmen Madruga

20 el alfabeto griego y latino from Juanluisneoptolemo

Ideas para el Portafolio electrónico

Dismul
http://dismul.blogspot.com/search/label/portafolio

Esta es una recopilación de vínculos de interés para la realización de portafolios. Información en línea.

7 herramientas para lucir tu perfil profesional
http://www.clasesdeperiodismo.com/2012/11/20/7-herramientas-para-lucir-tu-perfil-profesional 

Cómo usar Twitter para encontrar trabajo
Son simples herramientas y tips que te permitirán incrementar tus chances de conseguir un empleo
http://www.elcivico.com/notas/2012/11/18/twitter-encontrar-trabajo-96445.asp

30 Ideas para conservar tus seguidores en Twitter y añadir algunos más
http://clickefectivo.com/?p=11803

 

Cinco maneras de encontrar trabajo en Internet
http://www.enter.co/enterprise/cinco-maneras-de-encontrar-trabajo-en-internet

Cómo armar un portafolio profesional
http://www.grafiscopio.com/como-armar-un-portafolio-profesional/

30 Portafolios minimalistas para su inspiración
http://sixrevisions.com/design-showcase-inspiration/minimalist-portfolio-website/

Las influencias ocultas de las redes sociales
http://formulasparaganardinero.com/video-ted-la-influencia-oculta-de-las-redes-sociales/

Trabajando la marca personal en las redes sociales
http://ecomunicados.wordpress.com/2012/09/07/trabajando-la-marca-personal/

3 herramientas para medir la repercusión de un Tweet
http://marketinghoy.cl/marketing-digital/redes-sociales/3-herramientas-para-conocer-la-repercusion-de-un-tweet 

La idea gráfica de la página de landing
http://www.bluecaribu.com/infografia-anatomia-de-una-landing-page-perfecta

Cómo vivir antes de morir por Steve Jobs

Los expertos de Silicon Valley tienen un término para definir el carisma de Steve Jobs: el campo de distorsión de la realidad. Pero la verdad es que a la mayoría de nosotros nos gusta vivir en la realidad de Jobs, donde un exquisito diseño y la utilidad pura para hacer algunas herramientas útiles es adictiva.  El ordenador Macintosh (que llevó al el ratón, y su interfaz gráfica de usuario a la fama), Pixar Animation Studios (que produjo Toy Story , la primera película largometraje totalmente animada en 3D), el iPod, el iPhone, el iPad fueron sus ideas.

Jobs luchó contra una forma rara de cáncer pancreático - agregando a una historia épica de la vida que refleja la historia de la propia Apple: siempre el más débil, nunca con un éxito espectacular. En agosto de 2011 renunció como CEO de Apple, quedando como Presidente de la Junta. Murió el 5 de octubre de 2011.

"La última década en el negocio pertenece a Jobs". Fortune Magazine

Biografía de Steve Jobs (link)

Conceptos básicos de Diseño de Pantalla

El diseño es mucho más que el embellecimiento de la parte exterior de las cosas. El diseño, se puede decir, es solo una parte de un proceso de hacer que los objetos o cosas sean atractivas, usables, asequibles.

El Diseño es un proceso de creación visual con un propósito comunicativo.

Un buen diseño es la mejor expresión visual de la escencia de "algo", bien sea un mensaje o un producto. Para hacerlo fiel y eficaz, el diseñador debe buscar la mejor forma de que ese "ALGO" sea conformado, usado, distribuido y relacionado a su ambiente. Esta creación deberá estética y funcionalmente reflejar el gusto de su época.

Lenguaje Visual

Es la base de creación en diseño.
Es el seguimiento de unas reglas o conceptos en cuanto a la conformación visual.
Sus leyes no son obvias.

En el diseño de interfaces, el lenguaje visual es la utilización de un conjunto de imágenes y objetos gráficos (iconos, ventanas, tipografía, imágenes, fotografías, ilustraciones, textos, videos, animaciones, menus, etc) para representar la información y acciones disponibles en la interfaz.

Los objetos que se integran en la Interfaz Gráfica de Usuario (GUI), se disponen en el plano llamado pantalla de manera ordenada siguiendo conceptos de diseño básico como pueden ser:

• Elementos conceptuales
• Elementos Visuales
• Elementos Relacionales
• Elementos Prácticos

Conceptuales: Son los que realmente no están en el plano, pero se pueden deducir:

1. Punto: Por ejemplo, una flor roja en un jardín de donde predomine el amarillo.
2. Linea: Una fotografía arquitectónica las refleja.
3. Plano: Una área de cualquier forma geométrica coloreada.
4. Volumen: Objetos que tengan profundidad volumétrica.

Visuales:

1. Forma: Todo lo que pueda ser visto, tiene forma
2. Medida: Todo lo que se ve tiene una medida (pixeles en el caso de la pantalla)
3. Color: Existe toda una teoría aplicable. Primarios, secundarios, teciarios, neutros, tonos, luminosidad, etc. También existe una teoría de esquemas de color: Frios, cálidos, análogos, opuestos, adyacentes,
4. Textura: Atrae el sentido del tacto o la vista. Una fotografía de varias ventanas puede ser una textura.

Relacionales: Nos ubican dentro del espacio y pueden ser sentidos aunque no literlamente como la gravedad y el espacio. Otros más obvios, pueden ser percibidos claramente como la dirección y la posición.

1. Dirección: Varios rectángulos ordenados en fila denotarían una dirección a seguir
2. Posición: Arriba, abajo, derecha, izquierda, etc
3. Espacio: Los espacios vacíos son muy apreciados por los diseñadores de interfaces
4. Gravedad: Es una sensación sicológica. Transfiere sensaciones de pesadez, liviandad, estabilidad, etc.

Prácticos: Subyacen en el contendio y los alcances de un determinado diseño.

1. Representación: Realista o abstracta, una representación pretende mostrar la naturaleza de las cosas en un plano.
2. Significado: El diseño transporta un mensaje.
3. Función: Se hace presente cuando el diseño tiene un determinado propósito.

Todos los elementos visuales están enmarcados dentro de una Pantalla. La Pantalla no es solamente el dispositivo elctrónico del computador o aparato electrónico, puede sonsiderarse también como pantalla a una tela donde se proyecte una imagen, un marco de un lienzo, una hoja de papel.

Basado en el libro "Fundamentos del Diseño"

Autor :Wucius Wong
Editorial: Gustavo Gili S.A.
Titulo original: Principles of Form and Design
1993 by Van Nostrand Reinhold, una división de Wadsworth, Inc, y para la editorial castellana Editorial Gustavo Gili. S.A. Barcelona 1995.

Kit de recursos para los apuros.

A veces se hace necesario salir de trabajos urgentes y en los que generalmente el cliente no tiene muchos recursos económicos. Esta es una guía de sitios web donde hay herramientas de acceso gratuito o de muy bajo costo.

Pre-diseño web

www.prezi.com

Permite crear presentaciones en Flash, las cuales quedan en linea para ser accedidas por el navegador web. En su versión pagada, se pueden bajar al escritorio para llevar en memoria USB. Las presentaciones funcionan todas en "zooming", la interfaz pareciera tener una cámara que hace zoom a los contenidos.

www.wix.com

Permite hacer sitios web en flash, mediante el uso de plantillas preestablecidas. Este CMS está enteramente confeccionado en Flash. Si se desea tener una URL propia se debe pagar, de lo contrario, el nombre del sitio, queda con el prefijo de wix.com.

www.flashmo.com

Sitio para descargar plantillas editables de libre uso, en formato FLA (Flash), con AS3 en su mayoría. El sitio las usa como gancho para acceder a otros templates pagos. ENtre sus links, está también el accesoa a templates en CSS libres y de pago, así como un blog de tips de diseño web.

Activeden.net

Plantillas y scripts de Flash sobre menús, galerías fotográficas, contenidos, ejecutores de música, multimedia, utilidades web, animaciones, transiciones, flips-books y, en fin,todo lo que se les ocurra que pueda existir en formato flash. Todas son pagas y a muy bajo coste. Costos que fácilmente se puede incluir en los proyectos de páginas web por ser accesibles a presupuestos apretados.

scripts.ringsworld.com

Scripts en PHP para hacer que un sitio estático (O sea diseñado en HTML sin CMS) tenga una conexión a alguna aplicación que van desde un rotador de banners, libros de visitas, herramientas financieras, buscadores, chats, quizes, hasta casi cualquier requerimiento.

Recursos de información para el diseño

www.dzineblog.com

Dzine, publica revisiones y colecciones estilo "Top" (los 10 mejores, los 30 más destacados, etc, ) de sitios web con recursos para desarrollo y diseño multimedia. Tiene una interesante sección denominada "Inspiration", donde se destacan innovadoras ideas para diseñadores en cuanto a logotipos, tarjetas, animaciones, ilustración, empaques, diseño de interfaces, y demás temáticas del diseño gráfico.

www.netdiver.net

Netdiver colecciona una gran cantidad de excelentes sitios que se destacan por su diseño gráfico, categorizados como Flashware, Illustration, Imaginative, Industrial, Photography, Portfolios, Reel shorts, Powagirrrls, y Toolbox.

www.cssblog.es

Todo lo que quería saber sobre CSS está aquí, incluidos recursos como bajar 10 tipografías profesionales (por ejemplo, que tengan signos, tildes, numeración, etc) para la web. Está diseñado para aprender CSS desde principiante a avanzado y tiene un foro para discutir problemas relacionados a la maquetación con CSS. www.kabytes.com

De acuerdo con uno de sus creadores, Pablo Javier Suárez, quiere tener una aplicación web con más de 1 millón de usuarios. Arte electrónico, Video, y Tecnología y toda clase de recursos se pueden encontrar en este sitio.

Webestilo

En este sitio se encuentran tutoriales bastante claros sobre PHP, mySQL, HTML, CSS, ASP y otros realcionados a los lenguajes básicos para programar web. Webestilo

Kit de supervivencia con el Video

A veces no es posible editar o visualizar vídeo que esté contenido en algún códec extraño o difícil de acceder.

Perian

Como bien insinúa su logo, es la navaja suiza de los códecs de vídeo para la plataforma MAC, específicamente para hacer que Quicktime, acceda a vídeos en formatos como FLV, AVI, MPG, OGG, etc. Este se instala y se configura desde el Panel de Control (Menú Manzana).

Mega Codec Pack

Es una buena colección (muy grande) de códecs de vídeo y audio para Windows, cuenta con un reproductor propio. Los códecs quedan instalados dentro del sistemas operativo y hace posible que los programas de reproducción hagan su trabajo.

Mpeg Stream Clip

Stream Clip es un buen convertidor de vídeo. Trabaja muy bien en conjunto con los códecs de las utilidades mencionadas anteriormente. Para convertir video desde un DVD debe instalar en el OS Windows otro programa que es el Quicktime Alternative, pero no cualquier versión, sólo funciona con la 1.81, esto porque esa versión de QT Alternative, tiene el códec de MPG2 para ver DVD. En Mac debe tenerse el códec MPG2 que se vende por separado con QuickTime.

HandBrake
Es la herramienta gratuita preferida para convertir DVD a video con estándard web, o sea H264. Los archivos se pueden dejar en formato mp4. Soporta Apple-TV y viene para Linux, MAC y Windows. Puede convertir video para usar en reproductores portátiles. Una explicación de cómo usar handbrake en este blog (blog.k-tuin.com).

Tutoriales en Tucual.com

Están publicados tutoriales en video sobre la instalación, configuración y realización de Portales en Joomla, Motion Graphics, Fireworks, Dreamweaver.

http://www.tucual.com

Guía de evaluación Heurística.

Guía en forma de checklist para la evaluación heurística en base a dimesiones como: identidad, lenguaje y redacción, accesibilidad, layout, elementos multimedia...

Este documento tiene por objeto servir de guía general para la evaluación de la usabilidad de sitios web. Es una versión resumida de la guía que nosotros utilizamos en nuestra actividad profesional, aunque lo suficientemente extensa y específica como para resultar de utilidad a aquellos profesionales que requieran de un documento base (que poder extender según sus propias necesidades) con el que empezar a trabajar en evaluación heurística.

La Guía está estructurada en forma de checklist, para facilitar la práctica de la evaluación. Como se puede observar, todas las puntos están formulados como preguntas, dónde la respuesta afirmativa implica que que no existe un problema de usabilidad, y la negativa que si

.

http://www.nosolousabilidad.com/articulos/heuristica.htm

Apple evolution

Usabilidad

La usabilidad (del inglés usability) es la característica de un sistema que pretende ser utilizado por un(os) usuario/s, en la tarea o tareas que para las cuales el sistema se ha hecho, y el contexto en el que se da la interacción.

El "grado de usabilidad" de un sistema es, por su parte, una medida empírica y relativa de la usabilidad del mismo.

1. Empírica porque no se basa en opiniones o sensaciones sino en pruebas (del inglés tests) de usabilidad, realizadas en laboratorio u observadas mediante trabajo de campo.

2. Relativa porque el resultado no es ni bueno ni malo, sino que depende de las metas planteadas (por lo menos el 80% de los usuarios de un determinado grupo o tipo definido deben poder instalar con éxito el producto X en N minutos sin más ayuda que la guía rápida) o de una comparación con otros sistemas similares.

El concepto de usabilidad se refiere a una aplicación (informática) de (software) o un aparato (hardware), aunque también puede aplicarse a cualquier sistema hecho con algún objetivo particular.

El modelo conceptual de la usabilidad, proveniente del diseño centrado en el usuario, no está completo sin la idea utilidad. En inglés, utilidad + usabilidad es lo que se conoce como usefulness.

Jackob Nielsen definió Usabilidad como el atributo de calidad que mide lo fáciles que son de usar las interfaces Web.[1

Orígenes controvertidos del término.

El término usabilidad, aunque de origen latino, en el contexto que se utiliza deriva directamente del inglés usability. Si bien los filólogos hispánicos consultados coinciden en afirmar que el término puede ser creado en la lengua castellana, su acepción no está clara. En castellano significa capacidad de uso, es decir, la característica que distingue a los objetos diseñados para su utilización de los que no. Sin embargo la acepción inglesa es más amplia y se refiere a la facilidad o nivel de uso, es decir, al grado en el que el diseño de un objeto facilita o dificulta su manejo. A partir de ahora definiremos el término usabilidad basándonos en la segunda acepción. Según David Branderbest, la usabilidad define el objetivo del sistema creado. Sin ella, cualquier mensaje o contenido no tiene sentido, lo que es tan obvio que no debería ser objeto de discusión siquiera. Si bien el concepto mismo de usabilidad es de reciente aplicación, desde hace mucho tiempo se maneja por criterios como facilidad de uso, amistoso con el usuario, etc. Muchos casos y empresas acumulan muestras de cómo el interés por lo que hoy denominamos usabilidad moderna se remonta a varias décadas atrás.

Algunas conclusiones y casos recogidos en estudios e investigaciones por Sun Mycrosystems:[3]

• La usabilidad demuestra reducciones del ciclo de desarrollo de los productos de 33-50% (Bosert 1991).

• 63% de todos los proyectos de desarrollo de software sobrepasan su presupuesto, siendo las cuatro causas más importantes relacionadas con usabilidad. (Lederer y Prassad 1992).

• El porcentaje de código que se dedica al desarrollo de la interfaz con los usuarios ha ido aumentando a lo largo de los años hasta un promedio 47-60% del conjunto de la aplicación. (MacIntyre et al. 1990).

• La empresa Ricoh descubrió que el 95% de los usuarios encuestados nunca utilizaban las tres características claves diseñadas para hacer más atractivo el producto, bien por desconocer su existencia, no saber cómo utilizarlas o no entenderlas. (Nussbaum y Neff 1991).

• 80% de las tareas de mantenimiento se deben a requerimientos de usuarios no previstos, quedando el resto debido a fallos y errores. (Martin y McClure 1993; Pressman 1992)

Por otro lado, la introducción de criterios tendentes a hacer amigable y fácil de usar un producto, no puede negarse desde tiempos inmemoriables, desde la cinta para sujetar una prenda de vestir hasta las asas en viejas ánforas prehistóricas, tuvieron como idea original facilitar el uso de un objeto, por ende éste se hacía más atractivo y por consiguiente cobraba otro valor en el mercado.

Definiciones formales

La Organización Internacional para la Estandarización (ISO) ofrece dos definiciones de usabilidad:[2] [4]

ISO/IEC 9126:

"La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso"

Esta definición hace énfasis en los atributos internos y externos del producto, los cuales contribuyen a su funcionalidad y eficiencia. La usabilidad depende no sólo del producto sino también del usuario. Por ello un producto no es en ningún caso intrínsecamente usable, sólo tendrá la capacidad de ser usado en un contexto particular y por usuarios particulares. La usabilidad no puede ser valorada estudiando un producto de manera aislada (Bevan, 1994).

ISO/IEC 9241:

"Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico"

Es una definición centrada en el concepto de calidad en el uso, es decir, se refiere a cómo el usuario realiza tareas específicas en escenarios específicos con efectividad.

Otros aspectos de la usabilidad

A partir de la conceptualización llevada a cabo por la ISO, se infieren los principios básicos en los que se basa la usabilidad:[2]

Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una interacción efectiva con el sistema o producto. Está relacionada con la predicibilidad, sintetización, familiaridad, la generalización de los conocimientos previos y la consistencia.

Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden intercambiar información. También abarca la posibilidad de diálogo, la multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la optimización entre el usuario y el sistema.

Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos. Está relacionada con la capacidad de observación del usuario, de recuperación de información y de ajuste de la tarea al usuario.

En informática, la usabilidad está muy relacionada con la accesibilidad, hasta el punto de que algunos expertos consideran que una forma parte de la otra o viceversa. Uno de estos expertos y gurú de la usabilidad en los entornos web es Jakob Nielsen, quien definió la usabilidad en el 2003 como "un atributo de calidad que mide lo fáciles de usar que son las interfaces web".

Otra definición clarificadora es la de Redish (2000), para quien es preciso diseñar sitios web para que los usuarios sean capaces de "encontrar lo que necesitan, entender lo que encuentran y actuar apropiadamente… dentro del tiempo y esfuerzo que ellos consideran adecuado para esa tarea".

Ergonomía

La ergonomía parte de los principios del diseño universal o diseño para todos. La buena ergonomía puede lograrse mediante el diseño centrado en el usuario (que no necesariamente dirigido por él), aunque se emplean diversas técnicas. El diseñador de ergonomía proporciona un punto de vista independiente de las metas de la programación porque el papel del diseñador es actuar como defensor del usuario. Por ejemplo, tras interactuar con los usuarios, el diseñador de ergonomía puede identificar necesidades funcionales o errores de diseño que no hayan sido anticipados.

La ergonomía incluye consideraciones como:

• ¿Quiénes son los usuarios, cuáles sus conocimientos, y qué pueden aprender?
• ¿Qué quieren o necesitan hacer los usuarios?
• ¿Cuál es la formación general de los usuarios?
• ¿Cuál es el contexto en el que el usuario está trabajando?
• ¿Qué debe dejarse a la máquina? ¿Qué al usuario?

Las respuestas a estas preguntas pueden conseguirse realizando análisis de usuarios y tareas al principio del proyecto.

Otras consideraciones incluyen:

• 1. ¿Pueden los usuarios realizar fácilmente sus tareas previstas? Por ejemplo, ¿pueden los usuarios realizar las tareas previstas a la velocidad esperada?
• 2. ¿Cuánta preparación necesitan los usuarios?
• 3. ¿Qué documentación u otro material de apoyo están disponible para ayudar al usuario? ¿Puede éste hallar las respuestas que buscan en estos medios?
• 4. ¿Cuáles y cuántos errores cometen los usuarios cuando interactúan con el producto?
• 5. ¿Puede el usuario recuperarse de los errores? ¿Qué han de hacer los usuarios para recuperarse de los errores? ¿Ayuda el producto a los usuarios a recuperarse de los errores? Por ejemplo, ¿muestra el software mensajes de error informativos y no amenazantes?
• 6. ¿Se han tomado medidas para cubrir las necesidades especiales de los usuarios con discapacidades? (Es decir, ¿se ha tenido en cuenta la accesibilidad?)

Ejemplos de técnicas para hallar respuesta a estas y otras cuestiones son:

• análisis de requisitos enfocado al usuario,
• construcción de perfiles de usuarios y
• pruebas de usabilidad.

Beneficios de la usabilidad

• Reducción de los costes de aprendizaje.
• Disminución de los costes de asistencia y ayuda al usuario.
• Optimización de los costes de diseño, rediseño y mantenimiento.
• Aumento de la tasa de conversión de visitantes a clientes de un sitio web.
• Mejora la imagen y el prestigio.
• Mejora la calidad de vida de los usuarios, ya que reduce su estrés, incrementa la satisfacción y la productividad.

Todos estos beneficios implican una reducción y optimización general de los costes de producción, así como un aumento en la productividad. La usabilidad permite mayor rapidez en la realización de tareas y reduce las pérdidas de tiempo.

Un caso real, después de ser rediseñado prestándose especial atención a la usabilidad, el sitio web de IBM incrementó sus ventas en un 400% (InfoWorld, 1999).

Opiniones de Jakob Nielsen

Jakob Nielsen, considerado el padre de la Usabilidad, la definió como el atributo de calidad que mide lo fáciles de usar que son las interfaces web. Es decir un sitio web usable es aquél en el que los usuarios pueden interactuar de la forma más fácil, cómoda, segura e inteligentemente posible.

No sólo la tecnología y el aspecto gráfico son factores determinantes para hacer un sitio web llamativo. Es importante que cumpla con las siguientes características:

• Entendible
• Novedoso
• Comprensible
• Inteligente
• Atractivo

Es decir la finalidad, en este caso de un sitio web, es lograr que el usuario encuentre lo que busca en el menor tiempo posible.

La Usabilidad de un sitio web está determinada por sus contenidos, entre más cercanos estén al usuario, mejor es la navegación por el mismo y más acertada será la experiencia al enfrentarse a la pantalla.

Lógicamente es imposible crear un sitio web ciento por ciento perfecto y en óptimas condiciones, pues no se puede agradar al mismo tiempo a millones de usuarios, sin embargo, los diseñadores y creadores deben tratar de mostrar todos los elementos de una manera clara y concisa, evitando el menor número posible de clics y de scroll.

En ocasiones los cibernautas se enfrentan a sitios web de altísima calidad y contenido, pero que presentan dificultades en su contenido. Por ejemplo, que los menús son de difícil ubicación, o que la herramienta de búsqueda no aparece en un lugar visible.

Aunque no hay estándares definidos para la Usabilidad, depende en cierta forma del espacio donde se desenvuelve el navegante. Pero lo importante en este caso es que el usuario no se deje consumir ni dominar por el sitio, es decir que sea él mismo que tome el control de la navegación por medio de un aprendizaje sencillo y el dominio de los elementos necesarios, para encontrar finalmente y en el menor tiempo posible, lo que busca.

Un buen sitio Web debe responder a las necesidades del usuario. En una comunidad virtual donde confluyen diferentes culturas e intereses, el contexto en el que se desenvuelven los miembros de un grupo virtual, o comunidad, no puede generar molestias en el momento de la navegación.

Un error recurrente de los creadores y diseñadores de sitios Web, es querer imponer sus decisiones y criterios sin pensar en el usuario. Por eso en el momento de diseñar el sitio e introducir contenidos, siendo está última labor de los editores, y no de los diseñadores, es importante pensar en el otro.

Reconocimiento en la industria del software

Actualmente la usabilidad está reconocida como un importante atributo de calidad del software, habiéndose ganado un puesto entre atributos más tradicionales como el rendimiento y la fiabilidad. Incluso diversos programas de estudios se centran en ella. También han surgido diversas empresas de consultoría de usabilidad, y las firmas tradicionales de consultoría y diseño están ofreciendo servicios similares.

Notas

1. ↑ Usability 101: Definition and Fundamentals - What, Why, How (Jakob Nielsen's Alertbox)
2. ↑ a b c d Ainda.info - Definición de usabilidad
3. ↑ La usabilidad y el ROI - alzado.org
4. ↑ Bevan, N. Quality in Use: Meeting User Needs for Quality. Comentarios acerca de ISO 9126 y 9241. (este "paper" no parece estar ya disponible)

Véase también

* Interacción Persona-Ordenador
* Accesibilidad web
* Arquitectura de la información
* Interfaz gráfica de usuario
* Internacionalización
* Prueba de usabilidad
* Diseño centrado en el usuario

Enlaces externos
Asociaciones y centros de investigación en español

1. HCI-UniOvi Grupo de investigación en interacción persona-ordenador de la Universidad de Oviedo
2. Laboratorio Aragonés de Usabilidad Laboratorio Aragonés de Usabilidad
3. Cadius Comunidad de Profesionales de la Usabilidad y el Diseño de Interacción
4. [1] Listado de grupos de investigación en Interacción Persona-Ordenador.
5. [2] Asociación Académica y Profesional de lengua hispana de Usabilidad
6. Grupo de Investigación en Ergonomía Cognitiva de la Universidad de Granada Investigación y desarrollo en usabilidad, accesibilidad, interacción persona-ordenador.
7. ediversia CENTRO EUROPEO DE RECURSOS AVANZADOS PARA LA DIVERSIDAD HUMANA
8. GRIHO Grupo de Investigación en Interacción Humano-Ordenador.
9. UPASPAIN Asociación Española de Profesionales de la Usabilidad
10. CEUS México Centro de Estudios de Usabilidad A.C.
11. Usabilidad y Accesibilidad para la Web México Usabilidad y Accesibilidad para la Web A.C.

12. En inglés

13. UPA Usability Professionals Association
14. Center for Universal Design, Diseño Universal (EE.UU.)
15. WUD World Usability Day (iniciativa de UPA)

Referencias

1. Usability.gov, guía para desarrollar sitios web usables y útiles
2. Qué es la usabilidad de Eduardo Manchón (referencias sobre el artículo)
3. Página personal de Jakob Nielsen, gurú de la usabilidad
4. albertolacalle.com, Artículos en español sobre el diseño centrado en el usuario
5. No Solo Usabilidad, Revista electrónica sobre usabilidad y accesibilidad
6. Reglas Básicas de Usabilidad Consejos para mejorar la usabilidad de páginas web
7. Artículos de Juan Leal: Ergonomía, HCI, Usabilidad, Diseño de Interacción y temas afines*

Proyectos relacionados

• Guía de interfaz humana del proyecto GNOME Guía para desarrolladores en el entorno GNOME (en inglés)
• Información de usabilidad en el proyecto KDE Guías y estudios de usabilidad para el entorno gráfico KDE (en inglés)
• La Guía de Interfaz Humana del entorno Mac OSX Los principios usados para crear aplicaciones consistentes con el entorno OSX (en inglés)
• Guía de Experiencia de Usuario para Windows Vista (en inglés)
• Manifiesto Nuevo León sobre Usabilidad y Accesibilidad para los Portales Gubernamentales Mexicanos (en español)

(texto en wikipedia)

Interfaz de Usuario

Definición.

La interfaz de usuario (IU) es uno de los componentes más importantes de cualquier sistema computacional, pues funciona como el vínculo entre el humano y la máquina. La interfaz de usuario es un conjunto de protocolos y técnicas para el intercambio de información entre una aplicación computacional y el usuario. La IU es responsable de solicitar comandos al usuario, y de desplegar los resultados de la aplicación de una manera comprensible. La IU no es responsable de los cálculos de la aplicación, ni del almacenamiento, recuperación y transmisión de la información.
El éxito de un programa frecuentemente se debe a qué tan rápido puede aprender el usuario a emplear el software, de igual importancia es el que el usuario alcance sus objetivos con el programa de la manera más sencilla posible.

Es importante señalar que dentro del proceso de creación de la IU existen cuatro diferentes tipos de personas involucradas. La primera persona, y probablemente la más importante, es el usuario final o simplemente usuario . El usuario es quien va a utilizar el programa final. La segunda persona es aquella que crea la interfaz de usuario. Esta persona es conocida como diseñador o arquitecto de la interfaz de usuario . Trabajando muy cercanamente con el diseñador estará el programador de la aplicación, este será el encargado de la escritura del software del resto de la aplicación. Muy frecuentemente el diseñador utilizará herramientas especiales para la creación del software de la IU, y estas herramientas son elaboradas por el creador de herramientas. (Definición tomada de http://www.fismat.umich.mx/~crivera/tesis/node11.html)

Dificultad de un diseño iterativo
El diseño iterativo es el método más empleado en el diseño de interfaces ([Myers and Rosson, 1992]). Los dos modelos iterativos más usados son el modelo de cascada (waterfall model), y el modelo de fabricación rápida de prototipos (rapid prototyping model) ([Schach, 1990]).
Básicamente ambos modelos dependen de la realización de un prototipo, el cual es diseñado repetidamente y probado con un grupo de usuarios hasta que el modelo cumpla con las expectativas finales. Este modelo de desarrollo presenta múltiples desventajas, entre ellas altos costos de producción de prototipos y la dificultad de conseguir usuarios reales con los cuales probar la interfaz.

Myers and Rosson, 1992
Myers, B. A. and Rosson, M. B. (1992).
Survey on user interface programming.
In Human factors in computing systems. SIGCHI - ACM.
Schach, 1990
Schach, S. (1990).
Software engineering.
Aksen Asosociates, Boston.
(Tomado de http://www.fismat.umich.mx/~crivera/tesis/node13.html)


Desconocimiento del usuario
Es dificil saber el grado de conocimientos de cómputo del usuario final, lo cual, frecuentemente, hace que las interfaces de usuario desarrolladas no sean las apropiadas. Se da el caso de que el diseñador implemente la IUs pensando en que la van a usar programadores avanzados, como el propio diseñador, por lo que cuando el producto final es usado por el usuario es posible que se presenten una gran cantidad de problemas de usabilidad.

Deben manejar múltiples eventos.
El software de la interfaz generalmente debe de estar organizado para manejar múltiples eventos, los cuales se suelen presentar de manera concurrente. Los usuarios desean tener la posibilidad de abortar acciones, y también de deshacerlas. Así mismo, debe ser posible realizar todas estas acciones por medio de distintos métodos de entrada (con el teclado o el mouse, p. ej.).
El programa en que se haya implementado la IU debe de estar estructurado de tal manera que pueda aceptar los eventos de entrada en cualquier momento, aun y cuando esté ejecutando otros comandos. Consecuentemente, cualquier operación que tome mucho tiempo, como la impresión, búsqueda, e incluso el repintado de la pantalla, deben de ser ejecutados en un proceso separado. Una motivación extra para el empleo de procesos múltiples es el hecho de que el usuario pueda estar trabajando con distintas ventanas pertenecientes a una misma aplicación. Cada una de esas ventanas necesitará recordar y manejar todos los eventos producidos por el usuario, o por la misma aplicación.

Existen requerimientos de tiempo real para la de los eventos de entrada.
La creación de IUs tiene la dificultades de la programación en tiempo real. La mayoría de las interfaces gráficas y con manipulación directa tendrán objetos que sean animados o que sea posible moverlos con el mouse. Para que esto sea atractivo para el usuario, los objetos deben de ser redibujados entre 30 y 60 veces por segundo, sin pausas notables.
La próxima generación de interfaces de usuario incluiría nuevas tecnologías como video, reconocimiento de voz, animación de simulaciones, y otros tipos de multimedia que contarán con las restricciones de la programación de tiempo real.

Deben de ser programadas de ``adentro hacia afuera''.
Las IU modernas son escritas de adentro hacia afuera. En vez de organizar el código para que la aplicación tenga el control, la aplicación debe más bien estar dividida en muchas subrutinas que son llamadas cuando el usuario realiza alguna acción. Se requiere de una programación con un cuidado extremo en la organización y modularización del software de la IU.

El software debe ser especialmente robusto.
Por supuesto que todo el software debe de ser robusto, pero en el caso de la IU este tema es de capital importancia ya que se deberán manejar una gran cantidad de eventos de entrada-salida, ocurriendo de manera concurrente. A diferencia de los programas no interactivos, sin incluir al software para IU, en donde al ocurrir un error se requiere el uso de un debugger para identificar el error y corregirlo, en el caso del software de interfaz de usuario si un error ocurriese se deberá presentar un mensaje de error, explicando que fue lo que sucedió y dar la oportunidad hacer las correciones pertinentes.

Dificultad para modularizar el programa.
El escribir un programa de manera modular facilita el mantenimiento del mismo. La bibliografía especializada recomienda que la porción correspondiente a la IU esté separada del resto del software, para facilitar que esta sea fácilmente alterada (para el diseño iterativo). Desafortunadamente, la separación de estas dos partes es muy dificil, prácticamente imposible, ya que los cambios en la IU requieren inevitablemente cambios en el resto del software. Incluso con la utilización de herramientas para la creación de interfaces de usuario gráficas (Graphical User Interfaces - GUI) el problema de modularidad se hace más dificil por la gran cantidad de funciones call-back. Generalmente, cada widget2.2 en la pantalla requiere que el programador escriba al menos un procedimiento de aplicación a ser llamado cuando el operador lo activa. Cada tipo de widget tendrá su propia secuencia de funciones call-back. Una puede contener miles de widgets, por lo que habrán al menos la misma cantidad de funciones call-back.

Funciones principales
Sus principales funciones son los siguientes:
* Puesta en marcha y apagado
* Control de las funciones manipulables del equipo
* Manipulación de archivos y directorios
* Herramientas de desarrollo de aplicaciones
* Comunicación con otros sistemas
* Información de estado
* Configuración de la propia interfaz y entorno
* Intercambio de datos entre aplicaciones
* Control de acceso
* Sistema de ayuda interactivo.

Tipos de interfaces de usuario
Según la forma de interactuar del usuario
Atendiendo a como el usuario puede interactuar con una interfaz, nos encontramos con varios tipos de interfaces de Usuario:
* Interfaces alfanuméricas (intérpretes de mandatos) que solo presentan texto.
* Interfaces gráficas de usuario (GUI, Graphics User Interfaces), las que permiten comunicarse con el ordenador de una forma muy rápida e intuitiva representando gráficamente los elementos de control y medida.
* Interfaces táctiles, que representan gráficamente un "panel de control" en una pantalla sensible que permite interaccionar con el dedo de forma similar a si se accionara un control físico.

Según su construcción

Pueden ser de hardware o de software:

* Interfaces hardware.- Se trata de un conjunto de controles o dispositivos que permiten la interacción hombre-máquina, de modo que permiten introducir o leer datos del equipo, mediante pulsadores, reguladores e instrumentos.
* Interfaces software.- Son programas o parte de ellos, que permiten expresar nuestros deseos al ordenador o visualizar su respuesta.

Interfaz gráfica de usuario
En el contexto del proceso de interacción persona - ordenador, la interfaz gráfica de usuario es el artefacto tecnológico de un sistema interactivo que posibilita, a través del uso y la representación del lenguaje visual, una interacción amigable con un sistema informático.
La interfaz gráfica de usuario (en Idioma inglés Graphical User Interface, GUI) es un tipo de interfaz de usuario que utiliza un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz. Habitualmente las acciones se realizan mediante manipulación directa para facilitar la interacción del usuario con la computadora.
Surge como evolución de la línea de comandos de los primeros sistemas operativos y es pieza fundamental en un entorno gráfico. Como ejemplo de interfaz gráfica de usuario podemos citar el escritorio o 'desktop' del sistema operativo Windows y el entorno X-Window de Linux y también Aqua de Mac OS X.

(Textos de http://www.fismat.umich.mx/~crivera/tesis/node10.html)