Si os pasa como a mi, estaréis registrados en multitud de páginas web, y en la mayoría utilizaréis el mismo usuario y clave para entrar, con el peligro que ello conlleva. Por ejemplo si nos registramos en una web con la misma clave que utilizamos en gmail, al webmaster le bastaría con averiguar cual es nuestro usuario de gmail, logearse y cambiar la contraseña para tomar control de toda nuestra cuenta de Google. Incluso hay en sitios en los que en el nombre de usuario es la propia dirección de correo.

Para evitar esto hay varias alternativas:

1. En nuestro navegador habilitar la opción de recordar contraseñas, utilizando distintas contraseñas para cada sitio, y que a la hora de logearse la cubra automáticamente el navegador.

   Normalmente viene habilitada por defecto, pero hay que tener cuidado. En el caso de Firefox deberíamos asignar también un Master Password (Preferences->Security). De otra manera, cualquiera que tenga acceso al navegador podrá ver todas nuestras claves. Sería peligroso si le dejamos navegar a alguien desde nuestro ordenador y nuestro usuario, o si lo llevamos a reparar dejando abierto el acceso.

   En el caso de Safari, utiliza por defecto el KeyChain, que es un gestor de contraseñas seguro para cualquier aplicación que lo soporte.

   Éste método tiene la desventaja de que si no recordamos la contraseña, y estamos en otro ordenador, no podremos acceder. A no ser que tengamos un backup del Firefox Profile o de nuestros Keychains, y que tengamos los suficientes permisos en el equipo para instalarlos.

   La extensión para Firefox Google Browser Sync nos crea un backup de las contraseñas y otras configuraciones de Firefox, y podremos recuperarlas desde cualquier otro equipo con Firefox y esa extensión instalada.

2. Crear una clave aleatoria para cada sitio y anotarla. Puede ser peligroso por si alguien accede a ese archivo, o lo perdemos. Además es un engorro tener que buscar la clave cada vez. También seguimos necesitando ese archivo accesible para cada ordenador en el que queramos acceder.
3. Utilizar unas cuantas contraseñas, una individual para los sitios importantes y otra genérica para el resto de sitios que relativamente no pasa nada si nos roban la identidad. Un ejemplo sería una clave para la cuenta Google, otra para acceso a banca electrónica, y otra para foros, blogs, comunidades, etc. De esta manera recordando solo unas cuantas contraseñas podemos evitar las peores consecuencias.
4. Una forma que ha salido hace poco es a través de OpenID. Se trata de un sistema de autenticación descentralizado. Un OpenID es una URL, que te dan al registrarte (gratuito) por ejemplo en MyOpenID, y podremos registrarnos y logearnos con ella en sitios que lo soporten, sin necesidad de crear una nueva contraseña.

La desventaja de éste método es que apenas está soportado actualmente.

Conclusión

Yo me quedaría con Firefox y la Google Browser Sync, siempre que protejamos correctamente el gestor de contraseñas. Ésta solución se puede encontrar en cualquier plataforma y es gratuito. Aunque siempre habrá los que no se fían de Google y no les haga gracia que tengan nuestras contraseñas.

Lo ideal también sería que se sincronizase con los gestores de contraseñas de los sistemas operativos, como el KeyChain en Mac o el Kwallet en Linux. de esta manera podríamos tener acceso a las mismas contraseñas desde cualquier navegador.

Para los que tengáis Mac, accedáis siempre desde un Mac, utilicéis Safari y no os importe pagar un poco al año la mejor opción es utilizar la sincronización con .Mac. De esta manera tendremos todas nuestras claves (incluidas las de cualquier aplicación que soporte KeyChain) almacenadas de forma segura en nuestro equipo, a las cuales podremos acceder con nuestro KeyChain Password. Se guardará una copia de seguridad en nuestra cuenta .Mac, y podremos recuperarlas desde cualquier otro Mac. Pero bueno, ya veis que es bastante restrictivo y hay que pagar. Así que repito: Firefox + Google Browser Sync.

Resumo la teoría, su puesta en práctica, y un ejemplo de configuración para el Photoshop.

Teoría

Cada hardware (camaras, scanners, impresoras, pantallas, etc.) y cada software tiene un rango de colores que puede representar, usando distintos espacios de color para representarlos. Por tanto si movemos documentos de un hardware o software a otro, la apariencia de los colores que nos muestran puede variar.

Para evitar que los colores se representen de distinta manera entre hardware o software, necesitamos un sistema que interprete y traduzca el manejo de color entre ellos. Un color management system (CMS) compara el espacio de color donde el color ha sido creado, con el espacio de color a donde lo queremos llevar, y realiza los ajustes necesarios para representar el color de la manera más consistente.

Para ello necesita un perfil de color, que es la descripción del espacio de color, y son los archivos .icc. Pueden ser de distintos tipos: perfil de monitor, perfil de aparato de entrada (scanner), perfil de aparato de salida (impresora), o perfil de documento (el documento trae incrustado un perfil de color).

Un caso especial es el de la representación en el monitor. Cada monitor puede estar calibrado de una forma distinta, y nosotros podemos tener bien calibrado el nuestro de manera que muestre bien los colores que pretendemos. Pero por ejemplo en el caso de las páginas web, es imposible que todos los monitores muestren el mismo color, debido a las distintas calibraciones de cada usuario en particular y los distintos posibles sistemas de pantalla (CRT, TFT…). Para minimizar las diferencias, se puede utilizar un espacio de color reducido común a la mayoría de pantallas. Para ello utilizaremos los llamados web-safe colors, o crearemos las imágenes utilizando un perfil estándar. Adobe recomienda utilizar el sRGB.

Práctica

En líneas muy generales la gestión de color podría resumirse en éstos puntos.

• Lo primero que necesitamos es tener bien calibrado nuestro monitor. Lo ideal es con un colorímetro, pero hay otros sistemas que nos lo permiten hacer a mano.
• Cada vez que nos llega un archivo de imagen lo primero que tenemos que hacer es convertir su perfil de color incrustado al perfil de color de nuestro espacio de trabajo. Si no lo trae le aplicamos el nuestro igual. El perfil que tengamos configurado puede ser diferente dependiendo de varios factores que ya veremos.
• Una vez realizados los cambios, guardamos el archivo con el perfil de nuestro espacio de trabajo.
• Si el archivo vuelve a ser abierto por otro software o hardware repetiremos la operación de convertir su perfil al nuestro. Por ejemplo a la hora de imprimir le tendremos que indicar a la impresora que convierta el perfil que lleva incrustado al perfil de color propio de la impresora. Si supiéramos de antemano el perfil de esa impresora, podríamos convertirlo antes de mandárselo.

Configurar nuestro perfil de color, y qué espacio de color utilizar

La configuración dependerá del software y hardware que utilicemos. Esto sería un ejemplo de configuración para el Photoshop.

• Working Spaces:
  • RGB: Para trabajos online utilizar Adobe sRGB, que tiene una gama de colores pequeña pero nos aseguramos de que se vea de forma parecida en todos los ordenadores. Si queremos aprovechar al máximo las gamas de colores mejor utilizar Adobe RGB.
  • CMYK: Dependerá de la impresora y el soporte utilizado para imprimir. En Europa se suele utilizar el Euroscale Coated v2, pero lo mejor es preguntar a la imprenta cómo quiere que le enviemos el trabajo.

  Normalmente cuando trabajemos con algo que se va a llevar a imprenta lo mejor es trabajar en modo CMYK, porque si trabajamos en RGB, en algún momento se tiene que pasar de RGB a CMYK, y se podrían perder algunos colores, porque la gama de CMYK es menor que la de RGB.

  La mayoría de impresoras domésticas funcionan mejor si trabajamos en RGB, y que ellas se encarguen de hacer la conversión a CMYK. Y muchas imprentas también prefieren realizar la conversión ellas mismas.

  ¿Qué pasa si vamos a mostrar el trabajo tanto por pantalla como impreso? Pues dependerá de nuestras preferencias. Podemos utilizar RGB y al terminar guardar una copia para pasarla a CMYK y realizar las correcciones para que no haya colores fuera de gama. Photoshop tiene herramientas para controlar esto como el Proof setup y el Gamut warning. Hay quien prefiere trabajar en CMYK para ahorrarse problemas, aunque el resultado por pantalla no sea tan vivo. La otra opción es dejar que la impresora realice esa conversión. Tenemos que tener en cuenta que algunos colores serán los más cercanos posibles al original, y tendremos que fiarnos de que lo haga bien, pero el resultado suele ser bastante bueno.

• Color Management Policies: Aquí indicaremos que queremos que haga cuando se encuentra una imagen con un perfil de color. No normal es que queramos convertirlo al nuestro. Podemos indicarle que nos pregunte qué hacer cada vez.
• Conversion Options: Cuando transforma un perfil en otro lo puede hacer de varias formas. Aquí el punto importante es el Intent. El resto de opciones las podríamos dejar como están. El Intent puede ser Perceptual o Relative Colorimetric.
  • Perceptual: Cuando un color de un perfil no entra en la gama del otro, mantiene las relaciones entre los colores, lo que suele ser más agradable para la vista, sin saltos entre gamas. Es la mejor opción cuando no es importante la precisión, como en fotografías.
  • Relative Colorimetric: La conversión de un color de un perfil en un color del otro perfil se hace de manera exacta, y si no entra en la gama elige el más cercano posible. Es la mejor opción cuando necesitamos que los colores sean lo más precisos posible.

Los microformatos son una versión light de la verdadera web semántica. Aprovecho la explicación dada hablando sobre la Web 2.0:

Se trata de añadir informaciones adicionales describiendo el contenido, el significado y la relación de los datos, de manera que pueden ser evaluadas por máquinas. Todavía es algo que apenas se está utilizando, en gran parte debido a su dificultad de implementación, pero que está estandarizado por la W3C. Mientras no llega (ya hay quien le empieza a llamar web 3.0) ya hay otra iniciativa menos seria para añadir esos significados y relaciones: los Microformatos, que también están empezando pero que ya se utilizan hoy en día, debido a su facilidad de implementación sobre HTML normal.

Imaginemos que quiero poner en una web mi nombre con la dirección de mi página web personal y mi teléfono. El código HTML podría ser algo así:

<a href="http://www.jesuscarrera.info">Jesús Carrera</a>
<div class="miclass">687627130</div>

De esta manera las personas que visiten esa web, podrían ver mi nombre enlazado a mi web, junto con mi teléfono. Si además le añadimos microformatos, cualquier robot o spider web podría extraer esa información sabiendo cual es nuestro nombre, nuestra URL, y nuestro teléfono, para luego utilizar esa información de la manera que tenga programado.

Microformateamos nuestro código:


<div class="vcard">
<a class="url fn" href="http://www.jesuscarrera.info">Jesús Carrera</a>
<div class="miclass tel">687627130</div>
</div>


Vemos que lo único que hace falta es añadir pequeños códigos a nuestra estructura HTML inicial.

Existen microformatos para contactos (hCard), eventos (hCalendar), votaciones (vote-links), críticas (hReview), curriculum (hResume), etc. etc. Algunas están en fase experimental, y la lista sigue creciendo. Un microformato puede estar compuesto por la combinación de otros. Por ejemplo en nuestro curriculum (hResume) también están nuestros datos de contacto (tiene dentro un hCard).

Suelen basarse en estándares como el vCard para definir el hCard. De hecho hay aplicaciones que transforman un hCard en un vCard para utilizar en el Outlook de Microsoft o el Address Book de Mac.

Soportando microformatos, los buscadores y otros servicios pueden indexar y tratar los datos como contactos, eventos o críticas, y no como un bloque de contenido sin significado.

Uno de los pioneros en su utilización ha sido Technorati, que nació como un buscador de blogs y que está creciendo hacia otros servicios. Otras grandes compañías como Yahoo Tech los empiezan a utilizar, y seguramente poco a poco irán apareciendo más.

Más información en el fantástico artículo de Luis Villa, que también nos comparte una presentación que hizo:

Y si vais a experimentar con microformatos, existe una extensión de Firefox llamada Operator que os puede ayudar.

Desde hace un tiempo se lleva utilizando éste término para referirse a la nueva filosofía con la que se crean webs, que trataré de resumir (cosa que no es fácil ya que tiene montones de matices):

Hasta hace poco las webs eran un proyecto aislado, donde el dueño creaba sus contenidos y los mostraba a los visitantes en una estructura determinada, pero poco a poco se ha ido incluyendo a ese visitante como parte activa de la web, permitiéndole participar en el contenido de esa web. Y además de eso, también se tiende a una interconexión entre las diferentes webs, añadiendo servicios de otras webs a la propia. Por ejemplo podemos añadir un mapa de Google Maps a nuestra web de manera sencilla para cualquier desarrollador por medio de su API. De hecho hay webs que se basan en utilizar diferentes APIs para ofrecer un nuevo servicio. Estas empresas se les suele denominar mashups.

A veces este término también viene ligado a las nuevas tecnologías que han aparecido paralelamente a ésta tendencia social, como AJAX (que permite comunicarse con el servidor sin necesidad de recargar la página), o a nuevos conceptos como la organización de contenidos por medio de etiquetas o tags definidos por el usuario (folksonomías), en vez de una estructura fija predefinida.

También muy importante para esta socialización de la web está siendo la tendencia hacia la llamada web semántica. Se trata de añadir informaciones adicionales describiendo el contenido, el significado y la relación de los datos, de manera que pueden ser evaluadas por máquinas. Todavía es algo que apenas se está utilizando, en gran parte debido a su dificultad de implementación, pero que está estandarizado por la W3C. Mientras no llega (ya hay quien le empieza a llamar web 3.0) ya hay otra iniciativa menos seria para añadir esos significados y relaciones: los Microformatos, que también están empezando pero que ya se utilizan hoy en día, debido a su facilidad de implementación sobre HTML normal.

Pero dejemos de lado todos estos tecnicismos, porque lo que hay que tener claro es que el verdadero protagonista de la web 2.0 es el usuario, la inteligencia colectiva, y el concepto de servicio frente a software empaquetado.

Podéis ver un vídeo que resume el concepto de web 2.0:

O profundizar más con el fantástico artículo de Tim O’Reilly.

Los gestores de contenido o CMS (Content Management System) hablando de páginas web, son aplicaciones que nos permiten manejar páginas web complejas sin necesidad de conocimientos técnicos y de una manera sencilla.

Su funcionamiento puede variar de unos a otros pero en general nos permitirá crear contenidos y administrarlos, dentro de la estructura deseada. El contenido suele ser independiente de la presentación, porque por lo general se apoyan en una base de datos donde reside el contenido, y una serie de plantillas para la presentación.

La gestión suele realizarse desde la propia web, y el acceso suele estar restringido a los usuarios con permiso. Se suele hablar de backend refiriéndose a la parte del CMS que nos permite administrar, y frontend a la parte pública a la que accede cualquier visitante.

La funcionalidad del CMS suele ser ampliable por medio de módulos o plug-ins.

Dependiendo del objetivo para el que están pensados esos CMS pueden clasificarse en diferentes tipos:

• Foros: para discusiones en línea dependiendo de la temática. Por ejemplo SMF.
• Blogs: para contenidos en orden cronológico, con posibilidad de comentarios y discusión. Por ejemplo Wordpress.
• Wikis: para que todo el mundo pueda publicar y editar los contenidos, también pudiendo discutir sobre ellos. Por ejemplo Media Wiki.
• Galerías: para contenido audiovisual. Por ejemplo Gallery.
• E-Commerce: para tiendas virtuales de comercio electrónico. Por ejemplo Zen Cart.
• Groupware o colaborativos: para la realización de algún proyecto o trabajo entre varios participantes. Por ejemplo eGroupWare.
• E-Learning: para impartir cursos. Por ejemplo Dokeos.
• Portales: de carácter general, para cualquier tipo de página web, pudiendo ser incluido cualquiera de los tipos anteriores. Por ejemplo Drupal.

En la elección de un CMS u otro tenemos que tener claro la finalidad de la web. Por ejemplo con Drupal podríamos crear un blog, pero si sólo necesitamos un blog, lo más sencillo y optimizado para ello sería instalar Wordpress.

Por mucha potencia de herramienta que tengamos, nunca debemos olvidarnos de la experiencia de usuario final. Muchas veces nos encontramos con portales cargados de entradas, enlaces, y más cosas que hacen que el usuario acabe perdiéndose, entre tanta funcionalidad añadida a la web debido a la facilidad que ofrece el CMS, sin llegar a transmitirse realmente al usuario. Para evitarlo tenemos que cuidar nuestra Arquitectura de la Información y Usabilidad.

Si se que escribir algún código para mostrar a alguien y no se utiliza algún tipo de resaltado de sintaxis lo más probable es que resulte ilegible.

Para solucionar esto en las páginas web lo mejor que he encontrado es dp.SyntaxHighlighter y hasta tiene un plugin para Wordpress.

De esta manera nuestros códigos, en vez de mostrarse así:

songlist = SongList.new
class JukeboxButton < Button
  def initialize(label, &action)
    super(label)
    @action = action
  end
  def button_pressed
    @action.call(self)
  end
end
start_bton = JukeboxButton.new("Start") {songlist.start}
pause_bton = JukeboxButton.new("Pause") {songlist.pause}

Se podrán mostrar así:

Además de ahorrarnos problemas con comillas y caracteres HTML especiales. Los colores y demás estilos se pueden cambiar en un CSS.