Consultoria y Formacion Adobe

En este Tip mostrare como manejar algunos aspectos de Firefox para ajustarlo a las necesidades de cada usuario (que en este caso, fueron mías; el numero máximo de BookMarks/Marcadores que hay visibles bajo la barra de Direcciones)…

La mano de la sabiduría :

Bagando por los foros de Stylish (addOn para FireFox), me encontré con un simple pero singular Estilo para lograr que los Tabs de Firefox estuviesen centrados a lo largo de la ventana, y aunque este detalle no tiene relevancia en este Tip, me intrigo el hecho de que Stylish no solo es capaz de modificar las cascadas de estilos en un sitio web normal, sino también la apariencia del navegador propiamente dicho. Pero ¿por que?

• NOTA: Si llegaste aquí por indexación buscando el script que acabo de mencionar, PTJ esta aquí:

  Código :

  @-moz-document url(chrome://browser/content/browser.xul){.tabbrowser-tabs .scrollbox-innerbox{-moz-box-pack:center !important;}}

Luego, volviendo al tema, investigando en los foros de soporte de FireFox, descubrí que el diseño esta nutrido por simple Javascript y un poco de CSS. Yay ! Así es como esto comenzó !

Básicamente habran dos maneras de hacerlo:

1.- Old School: Edición manual

Normalmente podrás encontrar artículos donde describen como personalizar los mismos aspectos de FireFox a través de la localización del archivo userChrome.css. Recopile su ubicación dentro de cada SO:

Código :

//- Windows UE
C:Documents and SettingsusuarioDatos de programaMozillaFirefoxProfilesxs1sadub.defaultchrome
//- Windows XP/2000
C:Documents and SettingsusuarioApplication DataMozillaFirefoxProfiles .default
//- Windows Vista
C:usersusuarioAppDataRoamingMozillaFirefoxProfiles .default
//- Linux
~/.mozilla/firefox/ .default/
//- Mac OS X
~/Library/Application Support/Firefox/Profiles/ .default/

• NOTA: En Windows debes poner en lugar de usuario, el nombre de la cuenta de usuario donde has instalado FireFox

Después solamente es cuestión de editarlo un poco lo cual podrás lograr de una manera sencilla bajando Chrome Edit 0.1.1.1, pero, aun así existen mejores métodos sin tener que entrañarse en los archivos fuente que provee FireFox. Finalmente reiniciar FireFox y ver si todo quedo bien. Si no, comenzar de nuevo y buscar el error.

2.- Stylish: Adaptándolo a nuestro uso

1. Primero deberás bajar e instalar Stylish. Recuerda que es un addOn como cualquier otro, así es que su instalación no tiene mayor complicación.
2. Luego, una vez terminado el paso anterior, nos dirigimos al fondo de nuestra barra de estado, y daremos click sobre el nuevo icono de Stylish, para luego entrar en "administrar estilos".
   
3. Luego, debes vamos sobre el icono que dice Escribir y aparecerá una ventana donde colocaremos los Estilos de CSS a emplear:
   
4. Ahora solo es cuestión de manejarnos como si fuese cualquier otro Estilo, conociendo claro esta, algunos de los valores que maneja FireFox, y para que estos tengan efecto debes iniciar con la llamada del objetivo al que apuntaremos Stylish. En este caso el mismo FireFox:

   Código :

   @-moz-document url(chrome://browser/content/browser.xul){/* ... */}

   • NOTA: Si tratas de abrir la dirección chrome://browser/content/browser.xul podrás ver como es nada menos que la barra de direcciones, de menú y demás de FireFox.

5. Finalmente añadir lo que necesitas tal y como si se tratara de una pagina normal, teniendo en cuenta claro esta como ya mencione, los elementos a manejar. He aquí algunos de la lista que se encuentra en la pagina de Mozilla.
   Por ejemplo, como insinué al principio, tengo muchos BookMarks a pesar de que hago limpieza constantemente. Y cuando busco alguno en especifico odio tener que llegar hasta el menú desplegable a la derecha de la pantalla. Asi es que solo fue cuestion de tomar un script para FF2:

   Código :

   #bookmarks-ptf {display: block !important;}
   #bookmarks-ptf toolbarseparator {display: inline !important;}
   #PersonalToolbar {display: none;}
   #navigator-toolbox:hover > #PersonalToolbar {display: -moz-box;}

   Y adaptarlo basándome en las referencias de FireFox, y lograrlo en FF3:

   Código :

   /* Mostrar todos los elementos del los BookMarks dentro de un scroll horizontal */
   #bookmarksBarContent {display:block !important;}
   #bookmarksBarContent toolbarseparator {display:none !important;}
   #bookmarksBarContent .bookmark-item {visibility: visible !important;}
   .places-toolbar-items {overflow-y:auto !important; height: 40px !important;}
   /* Aparecer y desaparecer los BookMarks con el mouse. Estado :hover */
   #PersonalToolbar {display: none;}
   #navigator-toolbox:hover > #PersonalToolbar {display: -moz-box;}

   
   Da click sobre la imagen, para ver el resultado completo

   Listo ! Ahora veras como tu barra de Marcadores ha desaparecido, pero al pasar el cursor sobre su antiguo espacio esta aparecerá con un scroll horizontal para llegar a todos los elementos sin tener que desplegar el antiguo menú. Enjoy !

Da click sobre la imagen, para ver otro posible resultado completo

Old School Vs Stylish

• Buscar, Abrir y Editar nuestros trabajos:

  • Aunque tengo en mente que acceder hasta la carpeta de FireFox se vera mucho mas Cool enfrente de tus amigos, y te hará sentir como todo un programador de Mozilla Labs. Hay que tener en cuenta que puedes mandar todo al c@rajo por un error.
  • En cambio al usar a Stylish solo debes dar click en el icono en la barra de estado, ademas de que como intermediario si fracasas en algo, el mismo complemento te lo alertara. O bien, si el resultado no te agrada, solo desactivas el script y el cambio sera al instante.

• Probar y Revisar todos nuestros experimentos:

  • Para ver los resultados de cada camio que hagas, de la manera manual debes guardar el nuevo archivo CSS, cerrar/reiniciar FireFox, e intentar abrirlo. Esto se vuelve engorroso.
  • Pero con Stylish basta con seleccionar vista previa y veras tu resultado.

• Restablecer a la normalidad la apariencia FireFox:

  • Si estas trabajando directamente con los archivos fuente y quieres restablecerlos como al principio, deberás buscar y eliminar todos los cambios. O bien haber creado un respaldo del archivo original.
  • Si utilizaste Stylish, bastara con desactivar el Estilo que creaste.

Todos sabemos qué es la usabilidad, pero es increíble la cantidad de gente que, por entregar "ya", la ignora de frente. Es culpa de los clientes en ocasiones, pero la no-usabilidad es una falta clara de profesionalismo. Y no sólo eso, agregar un par de arreglos estúpidos, pero que ignoramos por error o por afán, hace una gran diferencia en las visitas a nuestros sitios web. Si además te dedicas a Internet como un negocio, seguir por lo menos la mitad de esta lista te asegurará, más que un éxito inicial, una comunidad.

Dolorosamente obvios

Estos son los consejos que pueden parecer idiotas, pero seguro los ignoramos en uno u otro proyecto. Es importante ser consciente de ellos.

Navegación visible todo el tiempo

Crea una unidad de diseño en navegación y mantenla todo el tiempo. Si tu header tiene una botonera horizontal, asegúrate que se vea en todas partes. Cualquier persona debe ser capaz de navegar desde cualquier parte a cualquier parte de tu sitio. Si no, lo más seguro es que lleves a tu usuario a creer que ha cambiado de página.

Navegación invisible

La navegación invisible es otro problema, originalmente generado por los flashers, pero llevado al mundo de CSS y AJAX. Tienes toda la navegación de tu web escondida bajo iconos y sólo sabes qué hace un botón cuando pasas el mouse por encima. Tu botonera no es la barra de herramientas de Word. Poner una descripción contextual y clara de la función de cada botón es clave. Un usuario debe poder tomar una decisión antes de mover el mouse a un elemento de la interfaz.

Intros en Flash

De esto hemos hablado mil veces en Cristalab y afortunadamente ya están muriendo. Pero por si quedan dudas. Los usuarios en internet tienen la capacidad de concentración de una gallina. No hagan que se distraigan.

No interrumpas el flujo de trabajo del usuario

Popups de Javascript, sonido de fondo, desactivar el click derecho. Toda esa mierda espanta a los usuarios y hace que recuerden un odio especial en contra de tu creación. Es simple, no lo hagas. Intenta ser tan amable y bueno con tu usuario, así te duela a ti. A él jamás le debe doler.

Crea links semanticamente descriptivos

No te atrevas a crear un enlace con "click aquí". Eso no le dice NADA al usuario antes de dar click. Es una mala practica para posicionarte en Google y en general va en contra de toda la filosofía de la web. Simplemente no lo hagas.

Toques profesionales

Implementar ciertos arreglos de usabilidad, simples en su concepción, pueden mejorar mucho la calidad de tu trabajo final y el profesionalismo que reflejas.

Has prototipos

Puede que suene como una de las "dolorosamente obvias", pero hacer prototipos en papel o en programas como Balsamiq Mockups realmente cambia la forma en la que ves las interfaces de tus futuros proyectos. Podrás identificar rápidamente las buenas ideas, las cosas terribles y aquello que puedes mejorar.

Esconde lo que el usuario no necesita saber

El iPod no debe su éxito a sus impactantes características técnicas, sino a lo mucho que no le dice a sus usuarios. El hecho que seas un geek que quiera saber la cantidad de milisegundos en la que cargan tus paginas no implica que eso le sirva de nada al usuario. Pueden haber secciones, enlaces, botones e información completamente irrelevante para tus usuarios. Protegelos de eso. Aprende a "podar" tu arquitectura de contenido y borrar lo que no sirva.

Usa lo que creas

Es increíble la cantidad de gente que crea cosas para otros y jamás las usa. Si no usas lo que creas, jamás crearás un producto para ser usado. Obligate a usar realmente las cosas que creas y verás un cambio en lo que haces.

Escucha tus estadísticas

Google Analytics es un software genial. Te permite, usando pageTracker._setVar, colocar variables de tu creación en las estadísticas. Así puedes ver cosas como las temáticas más visitadas, usuarios registrados vs. invitados, entre muchas otras que serían imposibles con las estadísticas tradicionales. Además tiene el Bounce Rate, un valor que indica el porcentaje de visitas que se van sin dar clicks a nada. A menor porcentaje, tienes un mejor y más envolvente interfaz.

Crea formularios decentes

Aunque tu cliente lo crea, tu no necesitas el cumpleaños de tus usuarios. Hay una gran cantidad de datos que realmente no necesitas al registrar un usuario. Lo mismo pasa con los forms de enviar comentarios en los blogs. A eso sumale los CAPTCHA inentendibles que es mejor desechar. Usa otras técnicas para frenar el spam, como las preguntas matemáticas, las técnicas bayesianas, akismet, javascript o acusalos con su mamá.

Consejos innovadores

No tienes que crear un nuevo elemento de interfaz para mejorar un producto. No tienes que ser Apple para innovar (aunque ayuda).

Autocompletado en los campos de texto

Google y Amazon ya lo implementaron. Un sistema sencillo de autocompletado de acuerdo a las consultas más frecuentes en el campo que uses puede mejorar radicalmente la experiencia de tus usuarios. Lo mejor es que es MUY fácil de implementar. Con jQuery UI sólo tienes que hacer esto. En jQuery:

Código :

$("#autocomplete").autocomplete({
    data: ["aero", "airplane", "book", "movie", "music", "sports", "skating", "swim"]
});

Y en HTML:

Código :

<input id="autocomplete" type="text" />

Y ya está. En serio.

Motores de recomendación

Para Wordpress hay millones de plugins, o si el heroísmo corre por tus venas, puedes programarlo. Los motores de recomendación de productos, de artículos relacionados o lo que sea que enlace el contenido de lo que estás viendo con otros similares capturan a tus usuarios con gran efectividad. ¿O no sientes la necesidad de comprar eso que Amazon te recomendó?

Asesina todos los clicks que puedas

La web de las descargas de Apple tiene un componente Accordion con las descargas por categorías, al cual no necesitas dar click para cambiar de panel. Amazon tiene implementada la peligrosa función "Compra con un click" para eliminar todos los pasos innecesarios y dolorosos del e-commerce. A más clicks hagas desaparecer, mejor será la experiencia y fidelidad de tus usuarios.

Usa AJAX inteligentemente

AJAX es una tecnología que ha sido abusivamente violada por incontables "iniciados" del diseño web. Sin embargo, usarla en los casos correctos puede crear una diferencia. Youtube la usa para cargar las páginas de comentarios y enviarlos sin necesidad de cambiar de URL, así puedes mantenerte escuchando el video mientras lees los comentarios.

Has experimentos de usabilidad

Lo mejor de la web, comparado con otros mercados, es que hacer experimentos es gratis. Prueba, con estadisticas claras, distintas interfaces y arreglos posibles. Mira cual te genera más visitas, cual baja más el bounce rate, cual hace que más usuarios se registren. Los experimentos son la razón por la que Halo 3 es uno de los juegos más vendidos de la historia. No es porque sea el juego más innovador o con mejor historia, es porque es increíblemente usable.

Imagina interfaces nuevas alrededor del contenido existente

Gmail no sólo nos cambió la vida trayendo los correos de gigabytes y el AJAX que hace que no tarde en cargar tu correo. También introdujo un concepto muy obvio, pero que nadie había intentado antes: Conversaciones anidadas.

El hecho de crear una nueva interfaz para el correo electrónico cambió sin duda la forma en la que usamos nuestro email. No crearon una nueva interfaz, no insertaron multitouch o una ruedita al correo. Simplemente lo organizaron en un hilo como un foro.

¿Quieres compartir algún consejo tuyo?

La usabilidad en nuestros proyectos también la crea la experiencia en el medio. Si tienes más consejos o preguntar acerca de estos, déjanos tu comentario. Los que digan que no son 20, serán recibidos con una amable carta de agradecimiento a tu casa y dos puntos láser de snipers.