Este portfolio nace sin ninguna pretensión profesional, simplemente por la obligación moral de tener mi propio espacio en internet, de tener esa presencia “física” en internet y no estar escondido detrás de un nick (aunque bien es cierto que nunca renunciaré ni renegaré de él).

Entrando un poco en la parte técnica, el portfolio esta montado bajo un Drupal con un tema “personalizado”, creado a partir del tema Zen. Este tema utiliza al 100% HTML5 y muchas de las características de CSS3 que ya están disponibles para los navegadores decentes (sacándole partido a aquellas ocho horas en las que Jose Florido estuvo “dándonos la brasa“).  Se me queda la espinita de no haber utilizado una versión más reciente de jQuery, pero hasta que no salga la versión 7 de Drupal, tendremos que seguir conformándonos con la 1.2.6.

Y por el momento, poco más… Contento por el trabajo realizado y por un diseño medio decente para ser “made in me”.

Espero que este sea el principio para retomar las actualizaciones del blog, pues la última actualización fue en diciembre de 2009, aunque no prometo nada. Tengo varios temas en la cabeza, me gustaria encontrar el tiempo y las ganas suficientes para poder dejarlos aquí plasmados.

Hace unos meses, a raíz de un de un artículo de Jakob Nielsen, comentaba la posibilidad de hacer más usables los formularios de login mediante un checkbox para mostrar y ocultar la contraseña.

Y aunque la idea no me parecía descabellada, pasó de largo por mi cabeza como tantas y tantas cosas que vemos al día por Internet.

Sin embargo, después de tener la posibilidad utilizar un móvil para conectarme a Internet, me doy cuenta de cuan engorroso puede llegar a ser meter nuestra contraseña utilizando el teclado del móvil, y lo frustrante que es no saber si lo que has introducido es la contraseña correcta.

El resultado de todo esto es un pequeño script en jQuery que nos permite mostrar y ocultar el valor de un input de tipo password.

DEMO | DESCARGAR EJEMPLO

Más info, después del salto

La forma de hacerlo es muy sencilla. Simplemente creamos un input de tipo “text” donde copiaremos lo que se escriba en el password, y viceversa. Mediante el checkbox, mostraremos u ocultaremos ese input con la contraseña “legible”.

Mediante el HTML, creamos el típico formulario de login, con sus campos usuario y contraseña:

<form action="#">
     <fieldset>
          <p>
               <label for="user">Usuario</label>
               <input type="text" id="user" />
          </p>
          <p>
               <label for="password-hide">Contraseña</label>
               <input type="password" id="password-hide" />
          </p>
          <p>
               <input type="submit" id="send" value="Enviar" />
          </p>
     </fieldset>
</form>

Con jQuery hacemos el resto.

jQuery(document).ready(function() {
     var passwText = jQuery('#password-hide');

     // Creamos el input que contendrá la contraseña "visible"
     // y el checkbox
     passwText.after('<span class="showpass"><input type="text" id="password-show" /><input type="checkbox" id="toogle-check"/><label for="toogle-check">Mostrar Contraseña</label></span >');
     var toogCheck = jQuery('#toogle-check');
     var inputText = jQuery('#password-show');

     inputText.hide();

     // Recogemos los caracteres introducidos como contraseña
     // y los compiamos al otro campo
     inputText.keyup(function() { passwText.attr('value', inputText.attr('value')); });
     passwText.keyup(function() { inputText.attr('value', passwText.attr('value')); });

     // Click sobre el checkbox
     $(toogCheck).click(function() {
          if( toogCheck.is(':checked') ) {
               inputText.show(); passwText.hide();
          } else {
               inputText.hide(); passwText.show();
          }
     });
});

Creamos el campo que contendrá la contraseña visible (#password-show) y el checkbox que los habilitará. Es necesario crearlos con jQuery, ya que si el usuario no tiene activado javascript en su navegador, no le aparecerán campos inservibles en el formulario de login que le puedan confundir.

Con el evento keyup de jQuery, recogeremos los caracteres de la contraseña para tener exactamente igual ambos campos (#password-hide y #password-show). Mapeamos el evento keyup de los dos input, ya que el usuario también puede introducir su contraseña en “modo visible”.

Por último, con el evento click controlamos el checkbox, para mostrar el “input password”, o el “input text”.

DEMO | DESCARGAR EJEMPLO

A través de los comentarios he conocido Mylyn, una herramienta para integrar los gestores de incidencias en Eclipse, el IDE que utilizo para desarrollar.

Para completar el círculo, y como Bug Tracker utilizaré Mantis, un gestor de incidencias desarrollado en PHP que utiliza MySQL como motor de bases de datos. Podría haberme decantado por Bugzilla, Jira o Trac, pero el hecho de conocer ya el funcionamiento de Mantis, así como que esté desarrollado en PHP, han decantado la balanza. Quizás no sea el mejor, pero para lo que necesito por el momento, cumplirá su función.

La instalación

Instalando Mantis

Empezaremos instalando el gestor de incidencias Mantis. Para ello, nos bajamos la última versión estable del proyecto (en estos momentos, la 1.1.8), desde aquí: http://www.mantisbt.org/download.php

La instalación de Mantis es sencilla:

1. Creamos la base de datos que utilizará la aplicación en MySQL.

2. Modificamos el archivo config_inc.php.sample, concretamente a partir de la línea 40:

# --- database variables ---------

# set these values to match your setup
$g_hostname      = "localhost";
$g_db_username   = "mantisdbuser";
$g_db_password   = "";
$g_database_name = "bugtracker";
$g_db_type       = "mysql";

# --- email variables -------------
$g_administrator_email  = 'administrator@example.com';
$g_webmaster_email      = 'webmaster@example.com';

# the "From: " field in emails
$g_from_email           = 'noreply@example.com';

# the return address for bounced mail
$g_return_path_email    = 'admin@example.com';

Las variables $g_hostname, $g_db_username, $g_db_password y $g_database_name, son las típicas de cualquier configuración para conectar con MySQL. $g_db_type por su parte, lo dejaremos tal cual está, ya que por el momento tan solo soporta mysql.

Las cuentas de email de las líneas inferiores, las configuraremos al gusto, para el envío-recepción de los emails correspondientes.

3. Una vez finalizada la modificación de este archivo, guardamos los cambios y lo renombramos. Quitaremos el .sample del final, para quedarnos tan solo con config_inc.php.

4. Ya hemos terminado la configuración. Ahora tan solo tendremos que seguir los pasos de la instalación, que se realiza desde http://servidor-mantis.com/admin/install.php.

5. Por último, y como medida de seguridad, es recomendable eliminar del servidor la carpeta admin.

Instalando Mylyn en Eclipse

El siguiente paso es instalar Mylyn en Eclipse. Como siempre, nos vamos al menú Help > Install New Software, y añadimos esta url: http://download.eclipse.org/tools/mylyn/update/e3.4/. Seleccionamos los complementos deseados (en Mylyn Integration podéis desmarcar el de C/C++ y Java si nos los vais a necesitar) y continuamos hasta finalizar la instalación. Reiniciamos Eclipse y seguimos

Conectando Mylyn con Mantis

Para acabar, instalaremos el plugin Mylyn-Mantis, necesario para que Mylyn reconozca las incidencias generadas en Mantis. Para ello, seguimos los mismos pasos que hemos realizado para instalar Mylyn, recogiendo los paquetes necesarios de esta url: http://mylyn-mantis.sourceforge.net/eclipse/update/. Instalamos el conector y volvemos a reiniciar Eclipse.

Importar las incidencias de Mantis a Eclipse

Ya solo nos queda conectar Mylyn con el servidor donde hemos instalado Mantis. Para ello, mostramos el panel Task List en Eclipse desde Window > Show View > Other, y dentro de la carpeta Tasks, encontraremos Task List. Es importante no confundir este panel con el propio de Eclipse, Tasks, ya que no tienen la misma utilidad. El nativo de Eclipse recoge los TO-DO, DONE, etc. que marcamos en el código.

Pinchamos con el botón derecho sobre el panel, y seleccionamos New > Query.

A continuación, seleccionamos Add Task Repository, y seleccionamos el de Mantis.

En la ventana que nos aparece a continuación, seleccionaremos en el desplegable Server la opción Mantis Connector 1.1.0 or greater, modificamos la url que nos aparecerá en su lugar (http://your.domain.com/api/soap/mantisconnect.php) por la de nuestro servidor, y terminamos de configurar el resto de parámetros (incluido nuestro usuario de Mantis).

Para finalizar, le damos un nombre a la Query, seleccionamos el proyecto creado en Mantis del cual queremos importar las incidencias, y seleccionamos un filtro (lo más lógico es elegir uno que devuelva todas las incidencias de ese proyecto abiertas asignadas a nuestro usuario).

Para crear un filtro, podemos hacerlo desde el propio Mantis realizando una búsqueda avanzada.

Finalizamos el proceso, y ya es el propio Mylyn quien se encarga de importar todas las incidencias que cumplan el filtro a nuestro Eclipse.

Ahora tan solo nos queda trastear con él para explotar todas sus posibilidades.

Seguiremos informando

Algo no tan común, y que quería añadir al blog desde el principio, era la de señalizar el idioma de los enlaces externos. Desgraciadamente, en el mundo web el 80% de los contenidos de calidad están en ingles, y hoy en día todavía hay gente a la que esto le supone un problema.

Por ello, he decidido que en este blog se señalizarán aquellos enlaces que lleven a páginas en otros idiomas que no sean castellano, tanto por código como visualmente.

Para señalizar el idioma en del enlace mediante el HTML, es realmente sencillo. Tan solo deberemos utilizar el atributo hreflag

<a href="#" title="Titulo del enlace" hreflang="en-US">Enlace</a>

El atributo hreflang proporciona a los agentes de usuario información sobre el idioma del recurso del otro extremo del vínculo, igual que el atributo lang proporciona información sobre el idioma del contenido o de los valores de los atributos de un elemento.

Ahora, para mostrar la bandera del idioma, utilizaremos el pseudo-selector :after junto con el selector [attr|=val]

a[hreflang|='en']:after {
content: url(images/gb.png);
margin-left: 3px;
vertical-align: middle;
}

El selector [attr|=val] se utiliza para seleccionar elementos cuyo atributo sea exactamente “val” o empiece por “val” seguido inmediatamente por un guión “-”. Este selector se creó para utilizarlo en el atributo hreflang de los elementos a, por lo que si fue creado especialmente para esto, ¿no vamos a desperdiciarlo, verdad?

Marcando nuestro html correctamente, y mediante una sencilla regla de CSS, ya tendremos señalizados aquellos enlaces que, en este caso, dirijan a páginas en inglés.

Un ejemplo:
Enlace a google.es, en castellano
Enlace a la W3C, en inglés

Documentación.

Selectores por atributos en CSS

Vínculos en HTML

Ese sistema nos puede interesar cuando no necesitamos la valoración del usuario, y tan solo queremos mostrar un ranking estático de forma mucho más visual de lo que podría ser el típico numero de 1 a 5.

Hoy, para cerrar el círculo, vamos a ver como crear otro sistema de valoración, esta vez utilizando jQuery.

- VER DEMO - | - DESCARGAR EJEMPLO -

Creando el HTML

El código HTML necesario es muy simple:

<h1>Test rating jQuery</h1>
<div id="rating">
<span class="moving-bg">&nbsp;</span>
<span>&nbsp;</span>
</div>
<div id="status2">8.0</div>
<div id="msg"></div>

Necesitamos 2 capas, una para la barra (rating), otra para el valor numérico de la votación (status2). La tercera capa (msg) es simplemente para mostrar al usuario la votación que ha realizado, y es totalmente prescindible.

Como veis, el código no es demasiado semántico, pero es algo que se puede perdonar en favor de una mayor interactividad por parte del usuario.

Los resultados, por ahora, no son espectaculares.

Añadiendo CSS.

Para formar la “rejilla” de valoración, necesitaremos 2 imágenes: la rejilla y el fondo con el degradado.

La idea es la siguiente:

rainbow.png y grid.png son imágenes de fondo para el div#rating y el segundo span, respectivamente. El span.moving-bg, situado en medio de los dos, es el que iremos moviendo dependiendo de la posición del cursor, o del valor de la votación.

Al desplazar el span gris,  a través de las transparencias de grid.png se podrá ver el degradado que hay como fondo, dando la sensación de que son las “celdas” de grid.png las que se van “llenando”.

El CSS quedaría así:

#rating {
background: transparent url(images/rainbow.png) 0 0 no-repeat;
width: 216px;
height: 41px;
float: left;
position: relative;
z-index: 2;
overflow: hidden;
cursor: pointer;
}
#rating span{
display: block;
width: 216px;
height: 41px;
background: transparent url(images/grid.png) 0 0 no-repeat;
position: relative;
z-index: 1;
}
#rating span.moving-bg{
position: absolute;
top:0;
left:0;
background-image: none;
background-color: #CCC;
}
#status2 {
width: 50px;
float: left;
border: 1px solid #ccc;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
font-size: 2em;
text-align: center;
font-weight: bold;
margin-left: 10px;
}
#msg {
clear: both;
}

Después aplicar los estilos del CSS, el resultado mejora notablemente.

Dale vida con jQuery

Ahora, lo tenemos todo ya preparado para añadir el “toque mágico” con jQuery, y convertir esto en un sistema de valoración como esperamos.

Analizando la situación, nos damos cuenta de que tendremos cuatro escenarios diferentes:

1. Carga de la página
2. El usuario sitúa el cursor encima de la barra.
3. El usuario hace clic para emitir su voto.
4. El usuario quita el cursor de la barra.

Sabemos que una tarea que tendremos que repetir con frecuencia es la de actualizar la posición del fondo gris, por lo tanto vamos a crear una sencilla función, para que nuestro código esté lo más limpio posible.

/**
 * Mueve la capa de "color" para que se adapte al valor
 * pasado.
 * @param valor int
 * @param tamanyo_capa int
 */
function actualizarPos (valor, tamanyo_capa) {
var p = Math.round(valor * tamanyo_capa / 10);
$('#rating span.moving-bg').animate( { left: p }, 500 );
}

actualizarPos tan solo actualiza, dependiendo del tamaño de la capa contenedora, la posición del fondo gris, dependiendo de la valoración (valor).
Nos valdremos de la función de jQuery document.ready, para ejecutar nuestro código cuando ya el DOM esté cargado:

$(document).ready( function() {
// Obtenemos el valor inicial
var valoracion_defecto = parseFloat($('#status2').html());
// Obtenemos el tamaño del div
var w = $('#rating').css('width');
// eliminamos el px
var width_div = parseInt(w.slice(0,w.length-2));

// Al usuario siempre mostraremos una cifra con un solo decimal
var valoracion_defecto_num = valoracion_defecto.toPrecision(2);
actualizarPos(valoracion_defecto, width_div);

   $("#rating").mousemove(function(e){

// Obtenemos la posición del cursor dentro del elemento
var x = e.pageX - this.offsetLeft;
// Desplazamos la barra gris hasta esa posición
$('#rating span.moving-bg').css('left', x);
// Actualizamos el valor numérico
// Este valor siempre será un entero
$('#status2').html(Math.round(x*10/width_div));

   });
   $("#rating").click(function(e){
// Obtenemos la posicion del cursor dentro del elemento.
var x = e.pageX - this.offsetLeft;
// Obtenemos el resultado de la votación
var r = Math.round(x*100/width_div/10);

// Actualizamos el valor numerico
valoracion_defecto = (valoracion_defecto + r) / 2;
// lo mostramos en pantalla, siempre con un solo decimal
valoracion_defecto_num = valoracion_defecto.toPrecision(2);
$('#status2').html(valoracion_defecto_num);

// Actualizamos la posición de la barra gris
actualizarPos(valoracion_defecto, width_div);
// Mostramos el mensaje al usuario de su voto.
$('#msg').html("Has votado: " + r);
   });

   $("#rating").mouseout(function(e){
// Actualizamos el valor numérico al que pertenece
$('#status2').html(valoracion_defecto_num);
// Actualizamos la posición de la barra gris
actualizarPos(valoracion_defecto, width_div);
   });

});

Dividimos el código en cuatro bloques:
Al cargar la página, obtenemos el valor por defecto de la votación y posicionamos la barra gris dependiendo del valor obtenido.
La valoración que se muestra al usuario siempre será una cifra con 1 decimal, por lo que utilizamos la función toPrecision().

Cuando el usuario situé el cursor encima del elemento, se ejecutará la función mousemove. En este caso, obtenemos la posición del cursor dentro del elemento, y movemos la barra gris a la posición del cursor. También actualizamos el valor numérico, que deberá ser un entero.

Cuando el usuario mueva el cursor fuera de la barra (mouseout), esta volverá a tomar el valor del campo numérico por defecto.

Si el usuario hace click sobre la barra (click), lo tomaremos como que quiere realizar una valoración. Entonces, actualizaremos el valor para hacer la media entre el valor existente, y su votación.
Si asociamos el sistema a una base de datos, es en este método donde deberemos realizar la consulta de actualización mediante AJAX. Para este tutorial, nos conformaremos con actualizar el valor en pantalla, y que se vea reflejado en la barra.

Utilizando los métodos mousemove, mouseout y click de jQuery, cubrimos todos los posibles estados por los que puede pasar nuestro sistema de valoración, y con pageX y offsetLeft, seremos capaces de conocer la posición del cursor dentro del elemento.

Cómo conectar este sistema a una base de datos, y registrar las votaciones mediante AJAX, lo dejaremos para un próximo capítulo

- VER DEMO -
- DESCARGAR EJEMPLO -

Durante la maquetación de mi portfolio, me propuse utilizar este método de valoración para representar mi participación en los proyectos que he participado.

La idea.

El sistema es el típico método de valoraciones que todos conocemos (las tan conocidas estrellitas). Dándole “media” vuelta al diseño, cambiando las estrellas por asteríscos, podemos obtener algo así:

– VER EJEMPLO FUNCIONANDO -

Ejecución

A la hora de convertir el diseño en código HTML semántico, lo más adecuado es utilizar la etiqueta <dl>, para definir una lista compuesta por términos (<dt>) y descripciones (<dd>).  Veamos el HTML necesario para crear esta lista:

<dl>
<dt>xhtml</dt>
<dd class="star stars5" title="Total">Total</dd>

<dt>css</dt>
<dd class="star stars4" title="Muy significativa">Muy significativa</dd>

<dt>zendFramework</dt>
<dd class="star stars3" title="Significativa">Significativa</dd>

<dt>jQuery</dt>
<dd class="star stars2" title="Parcial">Parcial</dd>

<dt>diseño</dt>
<dd class="star stars1" title="Puntual">Puntual</dd>
</dl>

Observamos el código html antes de empezar con los estilos para comprobar que es perfectamente legible y comprensible sin la necesidad de CSS.

A la hora de crear las imágenes, vamos a utilizar sprites. Es decir, juntaremos todas las imágenes necesarias en una sola, que posicionaremos mediante CSS para obtener el resultado deseado. En el caso del diseño original, las imágenes de las “estrellas” debían tener el fondo transparente, sin embargo la versión que os muestro para que se aprecie mejor tiene color de fondo:

Utilizar sprites para nuestras imágenes tiene como resultado más significativo la reducción de peticiones al servidor. Suponiendo que creando las cinco imágenes por separado el peso será el mismo que creando tan solo una, la mejora la encontramos en que reducimos de 5 a 1 las veces que el servidor debe entregar archivos al navegador para obtener el mismo resultado.

Mejor con estilos…

Es el momento de darle vida a nuestro HTML, para ello hemos dotado a los elementos de difinición (<dd>) de la lista con dos clases: star y stars5.

Con la primera clase (star) proporcionaremos los estilos comunes a todos los elementos: ancho, alto, imagen de fondo, etc… La segunda clase será diferente dependiendo de la valoración que queramos asignar. En este caso hay cinco posibles opciones: stars5, stars4, stars3, stars2 y stars1. En función a esta clase, posicionaremos la imagen para obtener el resultado deseado. Por lo tanto, el CSS quedaría tal que así…

.star {
width: 74px;
height: 10px;
text-indent: -9999px;
background: transparent url(bg_interface.png) 0 0 no-repeat;
margin: 0 0 16px 13px;
}
.stars5 {
background-position: -1px 0;
}
.stars4 {
background-position: -1px -11px;
}
.stars3 {
background-position: -1px -22px;
}
.stars2 {
background-position: -1px -33px;
}
.stars1 {
background-position: -1px -44px;
}

Más sencillo imposible; asignamos al elemento un tamaño fijo, movemos el texto mediante text-indent para que sea invisible al usuario, y asignamos la imagen de fondo.

Después, tan solo necesitamos posicionar la imagen de fondo para que se muestre la sección correspondiente. Es importante el uso del atributo title, para que el usuario conozca el significado de nuestra puntuación al pasar el cursor por encima de los asteriscos.

- VER DEMO -