JHMorales.es>blog » Javascript http://www.jhmorales.es/blog Cuestiones sobre diseño web Mon, 21 Sep 2009 14:28:25 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Comprimiendo .css y .js y almacenando en caché http://www.jhmorales.es/blog/diseno-web/comprimiendo-y-almacenando-en-cache/ http://www.jhmorales.es/blog/diseno-web/comprimiendo-y-almacenando-en-cache/#comments Mon, 06 Jul 2009 17:05:16 +0000 JHMorales http://www.jhmorales.es/blog/?p=181

En diseño web es de gran importancia el tiempo de descarga que necesita la web que diseñemos para mostrarse completa y operativa. Algunos disponemos de banda ancha y la diferencia entre que una web cargue en 4 segundos o en 1 no es muy apreciable. Pero en conexiones lentas, que no sean de banda ancha o que tengan un tiempo de respuesta muy lento por alguna razón, este tiempo se puede multiplicar por 10, 20 ó hasta por 50.

La “inmediatez” que implica el uso de internet en el sentido de que lo que busco lo quiero ya, en parte porque soy yo quien lo estoy buscando activamente -no como en el caso de la televisión que estoy esperando a recibir lo que sea que vaya a salir-, conlleva que si lo que pido tarda demasiado tengo mucho de donde escoger a pocos clicks. Por esto es necesario implementar sistemas que reduzcan ese tiempo de espera, en el caso del diseño web reutilizando recursos que son comunes en nuestro sitio en sus diferenes páginas. Estos se almacenan en el caché del navegador o del servidor y podemos mejorar este almacenamiento de manera sencilla, así esos archivos solo se descargan en la primera visita.

Tenemos por ejemplo un sitio con sus diferentes páginas web y sus hojas de estilo. Lo mas común es que podamos usar scripts php en nuestras páginas aunque dentro de estas no haya que hacer ningún tipo de consulta a bases de datos, ni cálculos, ni gráficas, etc. Estos scripts se ejecutan en el servidor y, para el caso que nos interesa, informarán al navegador del cliente sobre el estado de los recursos que componen la página.

Si tenemos una hoja de estilos .css que no cambiará en mucho tiempo podemos minimizarla, comprimirla y almacenarla en caché, esto mismo se puede hacer con los archivos de javascript que usemos. Así en futuras visitas o en las diferentes páginas que componen nuestro sitio, y usan la misma .css o .js, no será necesario descargar desde el servidor estos archivos cada vez.

Para minimizar la css hay varios servicios gratuitos, entre ellos Css compressor, de Lottery post. Tan sencillo como copiar el código de la css, pegar en Input, picar en Compress y seleccionar todo, copiar y pegar en un documento nuevo de nuestro editor de css. Damos el mismo nombre distinguiéndolo con min, por ejemplo estilo.min.css y guardamos.

Para minimizar los archivos de javascript seguimos los mismos pasos pero usamos el servicio de JS Minifier. En este caso deberemos borrar el código de ejemplo que viene en Code que es donde pegamos nuestro código js. Es recomendable dejar el nivel en “conservative” para evitar errores. Guardamos igual, por ejemplo efectos.min.js.

Para comprimir y almacenar en caché lo hacemos con un solo script:

  1. < ?php
  2. ob_start ("ob_gzhandler");
  3. header("Content-type: text/javascript; charset: UTF-8");
  4. header("Cache-Control: public, max-age=31536000");
  5. $offset = 60 * 60 * 24 * 30 ;
  6. $ExpStr = "Expires: " .
  7. gmdate("D, d M Y H:i:s",
  8. time() + $offset) . " GMT";
  9. header($ExpStr);
  10. ?>

Es imprescindible que este script vaya al comienzo del archivo antes de cualquier otra cosa. El ob_start (”ob_gzhandler”); es el que se encarga de comprimir. El resto del script es el que crea la cabecera para que el archivo sea almacenado en caché, para hojas de estilo usaremos text/css. El Cache-control: public dice al navegador que será útil para cualquier página del dominio que lo solicite, max-age=31536000 establece su fecha de caducidad en un año -en segundos-. El Expires establece su próxima revisión en un mes. Ahora el archivo lo guardamos como estilo.min.css.php o efectos.min.js.php en cada caso.

Ahora solo hace falta llamar a nuestro archivos desde el head de la misma manera pero con los nuevos nombres. Los javascript es mejor ponerlos al final de la página, justo antes del cierre de la etiqueta body, así se arma la página antes de empezar a cargar el javascript, lo que da la sensación de que termina antes de descargar. Nuestras páginas ya no deberán terminar en .htm o .html sinó en .php para que el código php introducido sea ejecutado.

]]> http://www.jhmorales.es/blog/diseno-web/comprimiendo-y-almacenando-en-cache/feed/ 0 Resolucion de pantalla y tamaño de fuente http://www.jhmorales.es/blog/diseno-web/resolucion-de-pantalla-y-tamano-de-fuente/ http://www.jhmorales.es/blog/diseno-web/resolucion-de-pantalla-y-tamano-de-fuente/#comments Fri, 09 Jan 2009 13:40:39 +0000 JHMorales http://www.jhmorales.es/blog/?p=96

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.

]]> http://www.jhmorales.es/blog/diseno-web/resolucion-de-pantalla-y-tamano-de-fuente/feed/ 0