¿Y para qué sirve?

La aplicación más obvia es la que se indica en la entrada del blog que hemos vinculado: rellenar campos de un formulario para ahorrarle el esfuerzo al usuario. Lo que la API hace es devolver a una petición como api.zippopotam.us/ES/01001 un documento con este contenido:

{
  "post code": "01001",
  "country": "Spain",
  "country abbreviation": "ES",
  "places": [
    {
      "place name": "Vitoria-Gasteiz",
      "longitude": "-2.6667",
      "state": "Pais Vasco",
      "state abbreviation": "PV",
      "latitude": "42.85"
    }
  ]
}
 

En nuestra demo simplemente hacemos la petición cuando el usuario introduce cinco caracteres de código postal, y con los datos recibidos rellenamos los demás campos. Lo de incluir un mapa de Google no era más que por aprovechar la información acerca de la latitud y la longitud.

El script es el que sigue, que por agilizar hemos basado en jQuery:

$(document).ready(function(){
  $('input').val('');
  $('#mapa').html('');
  $('#cp').keyup(function(){
    if($('#cp').val().length==5){
      $.ajax({
        url: 'zippo.php',
        cache: false,
        type: 'GET',
        data: 'cp='+$('#cp').val(),
        success: function(datos){
          datos = $.parseJSON(datos);
          if(datos.places){
            $('#poblacion').val(datos.places[0]['place name']);
            $('#provincia').val(datos.places[0]['state']);
            if(GBrowserIsCompatible()){
              var mapa = new GMap2(document.getElementById('mapa'));
              mapa.setCenter(new GLatLng(datos.places[0]['latitude'],datos.places[0]['longitude']),13);
              mapa.addOverlay(new GMarker(new GLatLng(datos.places[0]['latitude'],datos.places[0]['longitude']))); 
            }
          } else {
            $('#poblacion').val('');
            $('#provincia').val('');
            $('#mapa').html('<p id="error">No parece que haya datos para ese CP</p>');
          }
        }
      });
    }
  });
});
 

Un apunte: la llamada por AJAX no la estamos haciendo directamente a la dirección de la API porque no funciona, ni siquiera en la prueba de la propia página de Zippopotam.us; pensamos que puede ser porque el documento que devuelve no cuenta con extensión, aunque no estamos seguros. Para solventar este problema, cargamos zippo.php, que proporciona a nuestro script el contenido del documento, y cuyo código es éste:

<?php
  $c = curl_init();
  curl_setopt($c,CURLOPT_RETURNTRANSFER,1);
  curl_setopt($c,CURLOPT_HEADER,0);
  curl_setopt($c,CURLOPT_URL,'http://api.zippopotam.us/ES/'.$_GET['cp']); 
  $json = curl_exec($c);
  curl_close($c);
  echo $json;
?>
 

Caveat lector

Para finalizar, queremos indicar que hemos hecho esta prueba por contar con una herramienta más en nuestro haber, pero de cara a aplicarla en un proyecto real habría que tener en cuenta algunas limitaciones:

• Los datos que devuelve la API proceden de GeoNames, por lo que son todo lo exactos que hayan sido registrados en esa base de datos. Como detalle, nos habría convencido más si la ortografía fuera un poco más correcta.
• El JSON que proporciona a veces cuenta con varios sitios en places; estamos asumiendo que el primero de ellos es el más relevante.

En el archivo functions.php de mi tema de WordPress creo esta función:

function tinyURL($url){
  if(!is_preview()){
    $c = curl_init();
    curl_setopt($c,CURLOPT_RETURNTRANSFER,1);
    curl_setopt($c,CURLOPT_HEADER,0);
    curl_setopt($c,CURLOPT_URL,"http://tinyurl.com/api-create.php?url=".$url); 
    $tiny = curl_exec($c);
    curl_close($c);
    return $tiny;
  }
}
 

Y en loop.php, para cuando se trata de una entrada de blog añado al pie esta línea:

<a href="http://twitter.com/home?status=%23relatosbluetales%20<?php echo tinyURL(wp_get_shortlink()); ?>">[…]</a> 
 

Simple y efectivo.

El punto de partida

La idea inicial era emplear la pseudoclase :target para variar la altura de los elementos con los contenidos a mostrar. El marcado es el siguiente:

<ul id="menu1">
  <li>
    <a href="#menu11">Lorem ipsum</a>
    <div id="menu11">
      <p lang="la">Lorem ipsum dolor sit amet […] </p> 
    </div>
  </li>
  <li>
    <a href="#menu12">Lorem ipsum</a>
    <div id="menu12">
      <p lang="la">Duis aute irure dolor […] </p>
    </div>
  </li>
  …
    <!-- Todos los elementos que hagan falta -->
  …
</ul>
 

Con asignar una altura inicial de 0 a los div y otra altura a su :target, parecía suficiente:

ul div{
  background: #FFF;
  -moz-transition: .75s;     /* Que no se diga que somos en parte responsables */ 
  -ms-transition: .75s;      /* de la debacle de -webkit-. */
  -webkit-transition: .75s;
  -o-transition: .75s;       /* Si no se entiende la referencia, */
  transition: .75s;          /* aquí hay un compendio de vínculos relevantes. */
  overflow: hidden;
  height: 0;
}
  …
#menu1 div:target{
  height: 16em;
}
 

Así, el ejemplo funciona… pero desgraciadamente funciona sólo como ejemplo. ¿A qué me refiero? A que aislado, el acordeón se comporta como deseamos, pero incluido en una página real mostraría un comportamiento tarado. Si incluimos otro acordeón, cuando activamos uno de los dos el elemento desplegado del otro se contrae al perder el foco del vínculo. Igual ocurriría al hacer clic sobre cualquier otro vínculo del documento.

JavaScript al rescate

No obstante, empleando algo de JavaScript, podemos corregir este problema y algunos otros detalles, como son:

• Las transiciones de CSS3 no funcionan desde o hacia un valor de auto. En el ejemplo hemos asignado un valor de 16em calculándolo por aproximación sobre la cantidad de contenido que tenemos, pero no serviría si ésta fuese indeterminada.
• Al hacer clic en el vínculo, se actualiza el hash de la URL, algo que no tiene mucho sentido si su funcionalidad es la de un mero botón.
• Sólo por medio de :target no se puede implementar la funcionalidad de cerrar un desplegable.

El peso de la animación, sin embargo, sigue recayendo sobre las propiedades de CSS3. Aquí está la prueba, y aquí el código del script:

var AC = {
  $: function(el){return document.getElementById(el);},
  $$: function(et,el){el===undefined ? el = document : el = el;return el.getElementsByTagName(et);},
  $$$: function(cl,el){el===undefined ? el = document : el = el;return el.getElementsByClassName(cl);},
  cl: 'ac',
  t: '.75s',
  cA: 'AC'+(new Date().getTime()),
  alts: [],
  cntr: function(x){
    var ex = AC.$(x[0].id);
    var cT = (ex.className.toString()).replace(' expandir','');
    ex.className = cT;
    ex.style.height = '0';
  },
  estado: function(x){
    x.preventDefault() ? x.preventDefault() : x.returnValue=false;
    var t = x.target.toString().split('#'), it = t[t.length-1], p = /expandir/i;
    var ex = AC.$$$('expandir',AC.$(it).parentNode.parentNode);
    if(!(AC.$(it).className.match(p))){
      if(ex[0]!==undefined){
        AC.cntr(ex);
      };
      AC.$(it).className+=' expandir';
      AC.$(it).style.height = AC.alts[it]+'px';
      AC.$(it).focus();
    }else{
      AC.cntr(ex);
    };
  },
  ini: function(){
    var eA = document.styleSheets[document.styleSheets.length-1];
     eA.insertRule('.'+AC.cA+'{overflow:hidden;-moz-transition:'+AC.t+';-ms-transition:'+AC.t+';-webkit-transition:'+AC.t+';-o-transition:'+AC.t+';transition:'+AC.t+';}',eA.cssRules.length); 
    var m = AC.$$$(AC.cl);
    for(i=0;i<m.length;i++){
      var b = AC.$$('li',m[i]);
      for(j=0;j<b.length;j++){
        AC.$$('a',b[j])[0].onclick = AC.estado;
      }
      var d = AC.$$('div',m[i]);
      for(k=0;k<d.length;k++){
        var al = d[k].offsetHeight;
        AC.alts[d[k].id] = al;
        d[k].className+=AC.cA;
        d[k].style.height='0';
        d[k].tabIndex = '-1';
      }
    }
  }
}
window.onload = AC.ini;
 

Hay dos variables de configuración para quien quiera emplearlo:

• cl: es la clase que se va a emplear en el marcado para indicar cuáles son los menús desplegables.
• t: define el tiempo que se desea que dure la animación; se puede expresar en segundos (s) o milisegundos (ms).

El script lo que hace es buscar los menús con la clase indicada y almacenar en una matriz las alturas de los elementos para modificarlas posteriormente. Para que no sea necesario añadir una regla en la hoja de estilo con la definición de la transición, la crea al vuelo y por medio de insertRule la añade a la última hoja de estilo de la página —tranquilos, le asigno un número aleatorio para que no entre en conflicto con ninguna de las reglas ya definidas (bueno, a menos que alguien haya definido una clase como AC1329215346055…)—. El resto del código simplemente se encarga de coordinar los estados de los elementos de los menús.

Accesibilidad

Como es un tema que me preocupa, me agrada comprobar que la funcionalidad está disponible para navegación por medio de teclado. Además, hay tres posibilidades cubiertas:

1. El usuario no cuenta con JavaScript: los contenidos aparecen desplegados sin más.
2. El usuario cuenta con JavaScript, pero el navegador no soporta transiciones de CSS: los deplegables se abren y cierran de manera inmediata sin animación.
3. El usuario cuenta con JavaScript, y el navegador soporta transiciones de CSS: perfecto.

No está mal para un experimento fallido, ¿verdad?

¿Por qué sin un plugin? Bueno, en general prefiero emplear extensiones cuando se trata de funcionalidades que quiero activar temporalmente y luego desactivar, como por ejemplo el WP Maintenance Mode de Frank Bültge; si lo que voy a hacer es instalar un complemento para que permanezca activo indefinidamente, creo que tiene más sentido añadir la funcionalidad como código a mi tema y así no sobrecargar mi página de administración. Aunque si alguien quiere emplear un plugin, hay decenas.

Dicho esto, veamos el código.

La descripción de las entradas del blog

Viendo que la descripción del meta debe ser un resumen no demasiado extenso de la entrada, ¿qué mejor contenido que el resumen que WordPress permite añadir a cada entrada? Este resumen se incluye en el campo Extracto bajo el formulario de edición; si no aparece, hay que activarlo en Opciones de pantalla → Extracto.

Para que el mismo se convierta en la descripción del documento, en un primer momento simplemente incluí este código en el header.php:

<meta name="description" content="<?php echo get_the_excerpt(); ?>" />'
 

No obstante, surgía un problema, y es que el campo del extracto sólo está disponible para las entradas del blog…

La descripción de las demás páginas

Primero, hay que asignar un resumen a las páginas, algo que es posible gracias a la opción de añadir campos personalizados a una publicación. De nuevo, en Opciones de pantalla podemos activar los Campos personalizados. Una vez hecho esto, al pie del editor de la página tenemos esta interfaz:

La interfaz de campos personalizados [Firefox 9]

Lo que hago es crear un campo desc y añadir la descripción. Tras especificar un campo personalizado, todas las páginas contarán con éste en el desplegable.

Sólo queda extraer su contenido pra incluirlo en el documento, lo que se hace por medio de la función get_post_meta(). Y con esto y un par de detalle adicionales, el código final es el siguiente:

<?php
  if((is_single())&&(has_excerpt())){
    $d = get_the_excerpt();
  } elseif(is_page()){
    $d = get_post_meta(get_the_ID(),'desc',true);
  }
  if($d){
    $d = preg_replace("/<.*?>/", "", $d);
    echo '<meta name="description" content="'.$d.'" />'; 
  }
?>
 

El script comprueba si el documento es una entrada con un extracto o una página, $d almacena esta información, y si no es nula se crea el meta. El preg_replace() limpia las posibles etiquetas de la descripción.

Como se ve, no es complicado. Y nos libra de añadir el enésimo plugin a nuestra instalación.

El problema inicial

Para nuestra página de MovilizaWeb nos planteamos que sería interesante incluir datos estadísticos comparativos del acceso a Internet desde equipos de escritorio y desde dispositivos móviles del último año, para mostrar cómo el segundo va en aumento mes a mes.

Dichos datos nos los porporciona StatCounter, pero los formatos digamos que no son los que consideramos más aptos desde el punto de vista de la accesibilidad. Por un lado, podemos descargar el gráfico en JPG, pero esto nos plantea el problema de la descripción alternativa de los contenidos de la imagen, mucho más cuando queremos que esta información sea dinámica y que cambie de manera automática mes a mes. Por otro lado, tenemos el snippet que la página proporciona para incrustar el gráfico:

<div id="mobile_vs_desktop-ww-monthly-201101-201201" width="600" height="400" style="width:600px; height:400px;"></div>
<!-- You may change the values of width and height above to resize the chart -->
<p>Source: <a href="http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201101-201201">StatCounter Global Stats - Mobile vs. Desktop Market Share</a></p> 
<script type="text/javascript" src="http://www.statcounter.com/js/FusionCharts.js"></script>
<script type="text/javascript" src="http://gs.statcounter.com/chart.php?mobile_vs_desktop-ww-monthly-201101-201201"></script>
 

…que desde el punto de vista de la accesibilidad es una pesadilla:

• Los contenidos se cargan por medio de JavaScript, por lo que los usuarios con un cliente que no tenga soporte no podrán visualizarlos.
• El JavaScript lo que hace es incrustar un objeto de Flash, por lo que los usuarios que empleen un dispositivo sin soporte del plugin se encontrarán en la misma situación que los anteriores.
• Los porcentajes de acceso de cada línea de la gráfica sólo se muestran cuando se sitúa el ratón sobre ellos, lo que impide que los usuarios que no puedan emplear un dispositivo de puntero conozcan las cifras. Además, su tamaño también dificulta el acceso a esos datos de los que no puedan emplear un ratón con precisión.

Así, teníamos que buscar una alternativa.

¿Y ahora qué hacemos?

Frente a este problema, el desarrollador perezoso puede encogerse de hombros y aferrarse a hacer una declaración de conformidad parcial con las WCAG 2.0, que es algo así como decir «sí, bueno, esta página sería accesible si no fuera por el formato en el que me proporciona los datos StatCounter; yo ya he hecho mi parte…»; pero esa es una actitud que reduce la accesibilidad a una especie de trámite administrativo a cumplimentar y que delega toda responsabilidad ética para con los usuarios discapacitados, además de que muestra muy poco respeto para los visitantes —o clientes— en situaciones análogas.

Una solución sería emplear la API de StatCounter —que permite recibir los datos en JSON u XML— y trabajar con ellos, pero en principio consideramos que las API tiene sentido emplearlas para un uso intensivo de los recursos que proporcionan, que no es nuestro caso puesto que los datos van a tener una aplicación muy restringida.

Y ahora es cuando viene la solución simple.

La solución: imaginar una alternativa

Un tercer formato que proporciona StatCounter es un CSV. Se trata de un pequeño archivo con este escueto contenido:

"Date","Desktop","Mobile"
2011-01,95.7,4.3
2011-02,95.55,4.45
2011-03,95.3,4.7
2011-04,94.79,5.21
2011-05,94.25,5.75
2011-06,93.47,6.53
2011-07,92.98,7.02
2011-08,92.88,7.12
2011-09,93.26,6.74
2011-10,93.45,6.55
2011-11,93.05,6.95
2011-12,91.96,8.04
2012-01,91.47,8.53
 

Revisando el código de la página, localizamos el vínculo que se genera junto a cada gráfica:

<a href="chart.php?statType_hidden=mobile_vs_desktop&amp;region_hidden=ww&amp;granularity=monthly&amp;statType=Mobile%20vs.%20Desktop&amp;region=Worldwide&amp;fromMonthYear=2011-02&amp;toMonthYear=2012-01&amp;csv=1" id="csv-version"> 
 

Tras esto, el proceso para crear una tabla accesible era trivial:

1. Generamos la URL que necesitamos dependiendo del mes actual.
2. Cargamos el .csv que nos interesa por medio de cURL.
3. Creamos una matriz con los datos separando primero por saltos de línea y despues por comas.

Con la matriz resultante, generamos la tabla. Misión cumplida.

Conclusión

Por supuesto, habrá situaciones en las que no se cuente con los medios para hacer accesibles los contenidos de terceras partes, pero un desarrollador competente debe ser capaz de imaginar todas las alternativas posibles a su disposición para intentarlo.

Según Jakob Nielsen en Website Response Times, contamos con una décima de segundo para convencer a nuestros usuarios de que un elemento interactivo de una interfaz funciona correctamente y que le proporciona el control que su diseño sugiere. Pero no sólo eso, sino que la respuesta inmediata de la interfaz puede además evitar que el usuario realice acciones indeseadas, como reenviar un formulario si piensa que su primer clic no ha tenido efecto.

Técnicamente sólo necesitamos emplear la pseudoclase :active para modificar el aspecto de un vínculo o botón cuando nuestro usuario hace clic sobre el elemento en cuestión. Pero lo que queremos explicar aquí es cómo hacer que un botón se comporte de una forma más natural, y para ello hemos elegido un diseño que últimamente se ha puesto de moda:

El botón [Firefox 9]

La idea es que si se ha empleado un diseño que simula las tres dimensiones, lo coherente es que el botón, al activarlo, se comporte como lo haría un botón real, es decir, que se «hunda» al presionarlo, lo que significa que:

• su posición debe variar verticalmente,
• la sombra que hemos empleado para fingir el relieve inferior debe reducirse, y
• la sombra que proyecta debe contraerse.

Primero lo primero. Para lograr el relieve hemos empleado sombras múltiples, tal y como se indica en la especificación de la propiedad box-shadow:

button{
  [...]
  -webkit-box-shadow: 0 6px 0 0 #80123C,0 8px 6px 0 #515151;
  -moz-box-shadow: 0 6px 0 0 #80123C,0 8px 6px 0 #515151;
  box-shadow: 0 6px 0 0 #80123C,0 8px 6px 0 #515151;
  [...]
}
 

Y después hemos declarado el estado activo de esta manera:

button:active{
  position: relative;
  top: 3px;
  -webkit-box-shadow: 0 3px 0 0 #80123C,0 4px 3px 0 #515151;
  -moz-box-shadow: 0 3px 0 0 #80123C,0 4px 3px 0 #515151;
  box-shadow: 0 3px 0 0 #80123C,0 4px 3px 0 #515151;
}
 

Como variamos la posición relativa del botón en 3 píxeles, modificamos los tamaños correspondientes de las sombras.

Así de sencillo.

Hasta este fin de semana no había accedido a mi cuenta de Google+ a través del móvil, y me sorprendió encontrar un ejemplo tan claro de mala usabilidad. Esto es lo que aparece tras el formulario de acceso:

La interfaz de Google+ en iPhone 4, que me permite aceptar las condiciones de uso —y compartir mi ubicación— o cancelar

Tengo un botón para cancelar y una escueta nota en la que se me informa de que al aceptar permito que Google acceda a mi localización y que acepto los términos de su servicio móvil.

No dudo de que mi experiencia de usuario habría mejorado si hubiera aceptado, pero obviamente tengo derecho a no compartir mi ubicación si quiero preservar mi privacidad —es por ello que la especificación insiste en que el usuario debe permitir expresamente compartir tal dato—. No obstante, al cancelar me encontré con que Google me devolvía a la página inicial, sin permitirme acceder a mi cuenta.

Si hay algo en lo que coincidirá cualquiera que sepa algo de usabilidad es que emplear nuevas tecnologías debe significar que se ofrece al usuario una funcionalidad adicional, y no que se le niegue la posibilidad de acceder a un servicio.

Móvil › Ver Código

A decir verdad, la lanzamos hace un par de meses, pero estas Navidades hemos aprovechado para actualizarla, añadiendo la posibilidad de guardar en el dispositivo —gracias a localStorage— las páginas en las que estamos trabajando.

¿Lo mejor? Que como es una webapp, no hace falta instalarla. Y es gratis.

La web móvil la desarrollamos en HTML5, y para incrustar los vídeos de su canal de YouTube, decidimos emplear la opción del iframe para, en la medida de lo posible, no depender del plugin de Flash —en Android; en iOS es la aplicación nativa de YouTube la que se encarga de la reproducción del vídeo.

Como se ve en la página indicada, incluir el iframe tan sencillo como esto:

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"> 
</iframe>
 

No obstante, el resultado no era el esperado: por algún motivo, los contenidos bajo el iframe desaparecían:

A la izquierda, la interfaz como debería aparecer; a la derecha, como aparecía [iPhone 4]

Tras muchas pruebas, hallamos la solución, y ya de paso revisamos la especificación de iframe de HTML5 para emplear un código válido —tanto el atributo type como frameborder se han descartado:

<iframe width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID"><br></iframe> 
 

Como hemos indicado, con el salto de línea incluido entre las etiquetas se solventa el problema. ¿Por qué? Bueno, eso no lo hemos hemos llegado a entender; pero funciona.

En la barra de navegación de Apple, cuando un usuario hace clic sobre el buscador, la caja del mismo se expande para ofrecer un poco más de espacio al texto de búsqueda, lo cual es un detalle de usabilidad muy de agradecer. Al ampliar el tamaño del buscador, los vínculos de la navegación, en consecuencia, disminuyen su anchura. Visto así, el script debería:

1. Asignar dos eventos en el input, uno en el estado focus y otro en el estado blur, para activar la animación que amplie o reduzca el campo.
2. Lanzar una función encargada de la animación, la cual debe tener en cuenta el tamaño inicial y final de cada vínculo y del formulario de búsqueda, y aumentar o reducir los mismos de manera progresiva.

En principio no es demasiado complejo, pero como dije en una entrada anterior, para este tipo de efectos son mucho más eficientes las animaciones de CSS3. Así que el resultado se basa en ellas, lo que ha reducido considerablemente la cantidad de JavaScript necesario.

La parte de CSS

Para crear la barra de navegación, en lugar de flotar los ítems de la lista, hemos aplicado los valores de tablas de la propiedad display, porque tienen la ventaja de que podemos asignarles inicialmente un ancho, pero posteriormente el navegador tiene la capacidad de adaptar los tamaños de las celdas en función de sus contenidos, como hace con las tablas de HTML.

La idea era que a medida que el input del formulario se fuera extendiendo, la falsa celda crecería con él… pero no. El comportamiento real cuando sólo aplicábamos las reglas…

input{
  […]
  -webkit-transition:.5s;
  -moz-transition:.5s;
  -o-transition:.5s;
  -ms-transition:.5s;
  transition:.5s;
}

input:focus{
  width:250px;
  […]
}
 

…no era el deseado: los navegadores esperaban a que la transición hubiese finalizado para redibujar el elemento padre. Es decir, la caja del formulario se expandía superponiéndose progresivamente al vinculo de su izquierda, para que después sin transición el resto de elementos de la barra se cuadraran ajustándose al nuevo tamaño.

Después de unas cuantas pruebas comprobé que lo que necesitaba era el formulario que contenía el input tuviese la misma transición asociada, para que se expandiera de manera sincronizada. Y en este punto es cuando necesité añadir JavaScript, porque el elemento form no acepta el evento focus.

La parte de JavaScript

El script, visto lo anterior, sólo tenía que asignar al formulario el ancho final cuando el usuario activa el input. Además, sólo debía activar las propiedades de transición de CSS para el campo del formulario en caso de tener JavaScript activado, por evitar el efecto indicado anteriormente; es decir, esto:

var n = {
  $: function(x){
    return document.getElementById(x);
  },
  soporte: function(){
    var pre = ['css','Moz','webkit','o','ms'];
    for(var i in pre){
      if(eval('n.$('b').style.'+pre[i]+'Transition')!==undefined){
        var s = true;
      }
    }
    return s;
  },
  ini: function(){
    if(n.soporte){
      n.$('b').className='trans';
      n.$('b').onfocus = function(){
        n.$('f').className='activo';
      }
      n.$('b').onblur = function(){
        n.$('f').className='';
      }
    }
  }
}
window.onload = n.ini;
 

Como se ve, el script sólo comprueba las condiciones para sincronizar el comportamiento del formulario y su input: la animación queda a cargo de CSS.

Como nota final, indicar que hay una limitación: como siempre que se quiere que el navegador aplique una transición de una propiedad de longitud, hay que indicar la medida en unidades absolutas, por lo que sería difícil emplearlo con una composición fluida.