Archivado por enero, 2009

He trabajado varios días poniendo a punto un plugin para jQuery que me facilite las cosas en cuanto a incrementar la accesibilidad de las web. Así que pongo a disposición de todos un archivo javascript que crea un recuadro dinámicamente con -a a a+ para cambiar el tamaño de fuente en pantalla. En la primera visita calcula el tamaño de fuente inicial de acuerdo a la resolución para presentar el texto en la misma proporción en relación al tamaño de pantalla. Así en resoluciones mayores la fuente se muestra adecuadamente.

Una de las cosas que me preocupan cuando diseñas una web es que no sabes en que resolución de pantalla la van a ver. Al final unos terminan con un tamaño de letra grandísimo y otros, por el contrario, diminuto. Con este plugin estableces un tamaño de letra proporcional a la pantalla, un tamaño mínimo y uno máximo, y puedes cambiar el diseño del contenedor de las -a a a+ y de estos enlaces.

Como esto se crea dinámicamente no se muestra a aquellos que no tienen javascript activado. Basado en el font-resize de text-resizing-with-jquery, funciona con jQuery (yo lo he probado con la 1.2.6 pero creo que funcionará con anteriores) y con el plugin de cookies Cookie de Klaus Hartl.

Además almacena en una cookie el tamaño escogido para mantenerlo en la navegación y futuras visitas.

INSTALACIÓN: Antes del final del head poner estas líneas:

  1. <script src="jquery-1.3.1.js" type="text/javascript"></script>
  2. <script src="jquery.cookie.js" type="text/javascript"></script>
  3. <script src="fontReSizer.js" type="text/javascript"></script>

Podeis bajarlo desde aquí:
fontresizer

Para los que lo quereis en inglés:
fontresizer_en

Podeis encontrarlo también en la dirección del proyecto:
jQuery plugins fontReSizer

Aquí podeis verlo en acción:
www.jhmorales.es
www.axiscentreclinic.com
www.centrecapi.es
www.laranda.es

Hala, a disfrutar. Ya me contareis que os parece y si hay que arreglar algo.

Este es un error que suele salir en muy diferentes situaciones, solo hay que hacer una búsqueda en google y la primera respuesta remite a una página de microsoft con muchas causas posibles. El caso que menciono se refiere a lo que me acaba de pasar con un disco duro externo en el que estaba haciendo copia de seguridad de mis archivos del ordenador.

No funciona ninguna de las soluciones que da la página de microsoft, entonces como se soluciona?. En mi caso la respuesta ha sido igual a la que he tenido que aplicar en otras situaciones: conectarme con el movil via bluetooth (por USB) para copiar su agenda al ordenador o descargar fotos de él, pasar las fotos de la tarjeta de memoria de la cámara digital al ordenador (con lector de tarjetas por USB), etc.

En resumidas cuentas, dejan de pasar datos de un dispositivo externo conectado, en este caso, por USB y por consiguiente da un error en la escritura demorada.

La solución ha sido no permitir que windows desconecte los dispositivos USB para ahorrar energía. En Windows XP abrir Panel de control, Sistema, pestaña Hardware, Administración de dispositivos, Controladoras de bus serie universal (USB), en cada Concentrador raíz USB picar dos veces (o abrir porpiedades con botón derecho), pestaña Administración de energía, desactivar la casilla Permitir al equipo apagar este dispositivo para ahorrar energía.

Por lo visto el windows no se entera que hay transferencia de datos entre estos dispositivos externos y el ordenador. Cuando ha pasado un cierto tiempo, desde la acción de seleccionar los archivos y darle a Copiar o Mover, parece no darse cuenta de que sí hay actividad, aunque no se esté picando sobre archivos o carpetas en el dispositivo externo. Y como no cree ver actividad desconecta ese puerto USB para ahorrar energía.

Esto hay que mirarlo cada cierto tiempo ya que parece que se activa de nuevo cuando hay alguna actualización. Haced la prueba, en mi caso siempre funciona y no he tenido que estar pasando herramientas que verifiquen el dispositivo, ni cambiar cables, etc.

En los últimos años el ancho de la resolución de la pantalla se ha ido incremantando de 800 a 1024, a 1280, a 1440, a 1600px, y de repente ahora se hacen populares los ultraportátiles o netbooks con 800. Las webs usualmente se ven igual en todas las resoluciones, ya sea por tener un diseño estático o líquido, mas no así el tamaño de la fuente usada que va disminuyendo proporcionalmente a medida que aumenta la resolución y terminamos dejándonos los ojos.

Con esto en mente es conveniente usar un método que facilite el cambio del tamaño de fuente o texto, que sea visible en pantalla y que además también reaccione igual al efecto de cambio de tamaño que causa. En algunas de mis webs he usado un código de jQuery que encontré en text resizing with jquery, al que le hice algunos cambios para tener las características antes mencionadas. Una de las partes que hice fue la creación de un método que adapte el tamaño de fuente a la resolución de la pantalla del nuevo visitante de la web.

El código fontSize.js usa la librería de javascript jQuery, y el plugin de cookies jquery.cookie.js, que debemos llamarlos en el head así:

  1. <script src="jquery-1.2.6.js" type="text/javascript"></script>
  2. <script src="jquery.cookie.js" type="text/javascript"></script>
  3. <script src="fontSize.js" type="text/javascript"></script>

Luego dentro de la página debemos poner los enlaces:

  1. <div id="changeFont">
  2. <p>
  3. <a href="#" class="decreaseFont">-a</a>
  4. <a href="#" class="resetFont">a</a>
  5. <a href="#" class="increaseFont">a+</a>
  6. </p>
  7. </div>

En el css les damos el estilo que mejor se adapte al diseño de nuestra web. Lo he aplicado en un principio a dos de mis páginas (www.centrecapi.es y www.laranda.es). Ha sido probado con éxito en windowsXP ff3, ie7, opera9.65, safari3.1, chrome 1 y fennec; en windowsVista ie8b2; windows98 ie6, ff2 y opera9.1; macOsX 10.46 safari2; Ubuntu 8.04 ff3 y Konqueror. Las web tienen un tamaño de fuente de 62.5% en el css y a los diferentes elementos se les asigna el tamaño de fuente en ems.

El código lo que hace es crear una función que esté operativa al terminar de cargar la página e inmediatamente activar un botón invisible que usará el tamaño de fuente almacenado en la cookie, o el botón de tamaño inicial para nuevos visitantes.

Primero se añade un botón invisible para activarlo en usuarios que ya han visitado la web, a este no hay necesidad de darle estilo. Luego se encuentra el ancho de la resolución de pantalla y se calcula el tamaño de fuente base de acuerdo a él. Luego se verifica si existe una cookie del tamaño de fuente usado en visitas anteriores, si no existe se usa el tamaño antes calculado.

Se crean las funciones para el botón de decremento (x0.9), el de tamaño base (el calculado), el de incremento (x1.1) y el del botón invisible para usuarios antiguos al que se le da el tamaño almacenado en la cookie. Por último se comprueba si existe la cookie para activar el botón invisible o si no para activar el de tamaño base.
Le he traducido los comentarios para entenderlo mejor.

  1. $(function(){
  2.     var sitefunctions = {
  3.         textresize: function(){
  4.   $("#changeFont p").append("<a href='#' class='font'></a>");//creamos botón de usarios antiguos
  5.   $(".font").css("visibility","hidden").css("font-size",0);//lo hacemos invisible
  6.             // mostramos los enlaces para cambio de tamaño
  7.             $("#changeFont").show();
  8.             var $cookie_name = "sitename-FontSize";
  9.             var originalFontSize = $("html").css("font-size");//código original
  10.    var screenWidth = screen.availWidth;
  11.    if (screenWidth&lt;850) {
  12.             originalFontSize = screenWidth / 48;//tamaño para pantalla pequeñas
  13.    }
  14.    if (screenWidth&lt;1100) {
  15.             originalFontSize = screenWidth / 60;//tamaño para navegadores estandar con ancho de 1024
  16.    }
  17.    else {
  18.             originalFontSize = screenWidth / 72;//tamaño para navegadores estandar con ancho mayor de 1024
  19.    }
  20.             if ($.browser.msie) {
  21.    if (screenWidth&lt;850) {
  22.             originalFontSize = screenWidth / 48;//tamaño para ie a 1024
  23.    }
  24.    else {
  25.             originalFontSize = screenWidth / 56;//tamaño para ie mas de 1024
  26.    }
  27.             }
  28.             if ($.browser.safari) {
  29.                 originalFontSize = screenWidth / 52;//tamaño para safari
  30.             }
  31.             if ($.browser.opera) {
  32.                 originalFontSize = screenWidth / 50;//tamaño para opera
  33.             }
  34.             // si existe la cookie cargamos el valor guardado, si no la creamos
  35.             if ($.cookie($cookie_name)) {
  36.                 var $getSize = $.cookie($cookie_name);
  37.                 $("html").css({fontSize: $getSize + ($getSize.indexOf("px") != -1 ? "" : "px")}); // apaño para el error de doble "pxpx" en IE (siempre dando la nota)
  38.             }
  39.             else {
  40.                 $.cookie($cookie_name, originalFontSize);
  41.             }
  42.             // boton tamaño base
  43.             $(".resetFont").bind("click", function(){
  44.                 $("html").css("font-size", originalFontSize);
  45.                 $.cookie($cookie_name, originalFontSize);
  46.             });
  47.             // boton incremento
  48.             $(".increaseFont").bind("click", function(){
  49.                 var currentFontSize = $("html").css("font-size");
  50.                 var currentFontSizeNum = parseFloat(currentFontSize, 10);
  51.                 var newFontSize = currentFontSizeNum * 1.1;
  52.                 if (newFontSize&lt;40) {
  53.                     $("html").css("font-size", newFontSize);
  54.                     $.cookie($cookie_name, newFontSize);
  55.                 }
  56.                 return false;
  57.             });
  58.             //boton decremento
  59.             $(".decreaseFont").bind("click", function(){
  60.                 var currentFontSize = $("html").css("font-size");
  61.                 var currentFontSizeNum = parseFloat(currentFontSize, 10);
  62.                 var newFontSize = currentFontSizeNum * 0.9;
  63.                 if (newFontSize>12) {
  64.                     $("html").css("font-size", newFontSize);
  65.                     $.cookie($cookie_name, newFontSize);
  66.                 }
  67.                 return false;
  68.             });
  69.             //boton usuarios antiguos
  70.             $(".font").bind("click", function(){
  71.                 var $getSize = $.cookie($cookie_name);
  72.     var prevfontSize = $getSize + ($getSize.indexOf("px") != -1 ? "" : "px");// apaño para el error de doble "pxpx" en IE (siempre dando la nota)
  73.                 $("html").css({fontSize: prevfontSize});
  74.                 $.cookie($cookie_name, prevfontSize);
  75.             });
  76.         }
  77.     };
  78.     $(document).ready(function(){
  79.         sitefunctions.textresize();
  80.         if ($.cookie("sitename-FontSize")) {
  81.             $(".font").click();//usa el valor de tamaño de fuente almacenado en cookie
  82.         }
  83.   else {
  84.             $(".resetFont").click();//usa el tamaño calculado según ancho de resolución
  85.   }
  86.     });
  87. });

En originalFontSize = screenWidth / xx estos valores van bien generalmente, pero el tamaño se puede cambiar según la web. Puede ser que haya que hacer varias pruebas para encontrar el punto preciso.