Archivado por julio, 2009

En El Webmaster comentan unos pocos trucos expuestos en Sentido web, originalmente mostrados en Codeitred, acerca de como optimizar la carga de nuestro sitio web.

De los allí vertidos discrepo en la implementación de uno de ellos. La precarga de imágenes creo que es mejor hacerla ocultándolas sin especificar dimensiones ya que así evitamos trabajo extra del ordenador del cliente. Además tampoco generamos un elemento que, aunque tenga unas medidas mínimas como recomiendan de 1×1, puede alterar el orden o incluso mostrarse como pequeños puntos en algunos navegadores.

Para usar este método pongo al final de la página index y antes del cierre del body:

  1. <img class="hideimage" src="images/nombre_de_la_imagen.jpg" alt="texto_alternativo" tit="titulo_de_la_imagen"/>

esto lo repito con todas las imágenes que quiero precargar.

En el CSS:

  1. .hideimage {
  2.     display: none;
  3. }

Luego en cada página cada imagen tendrá su propio ID que será referenciado en el CSS:

  1. #foto2 img {
  2.     position: relative;
  3.     top: 0;
  4.     left:-5%;
  5.     width:100%;
  6. }

Al no haber establecido antes un tamaño basta poner el witdth en 100% para que se establezca automáticamente el height en 100%, de esta manera se redimensiona la imágen de acuerdo al tamaño de la pantalla. Aunque también es posible darle las medidas exactas.

Esta técnica está aplicada en www.axiscentreclinic.com

Pronto estaré haciendo cambios en el servidor por lo que la web y el blog se pueden quedar innoperativos unas horas, espero que la transición no sea engorrosa y todo vuelva a estar como está ahora.

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.

Vuelvo otra vez con este asunto que me dió mucha guerra. Digo “me dió” ya que por fin lo he solucionado de una forma tan sencilla que me pasé un buen rato entre reir por no llorar y maldecir el hardware-software. Lo dicho en el post anterior sobre Error en la escritura demorada en disco duro externo funciona bien en pequeños dispositivos tipo móviles, lectores de tarjetas, etc.

Pero en discos duros externos de gran capacidad sigue dando problemas. La solución es extermadamente sencilla, solo hay que conectar este tipo de dispositivo en una toma usb que sea directa a la placa. Estas suelen estar por detrás de la torre y es donde conectamos los dispositivos que mantenemos fijos como impresora, escaner, etc. Aunque también puede haber puertos usb en la parte frontal de la torre hay que estar seguros de que estos estén conectados a los conectores usb frontales de la placa (Front USB Connector: F_USB1, F_USB2…) sin intermediación de ningún tipo de circuito o dispositivo, solo cables.

El disco duro externo de gran capacidad lo reconoce el windows inmediatamente y ya no da el error. Pudiendo hacer copias de seguridad (Back-up) de particiones enteras o de todo el disco duro del ordenador. En mi caso lo he hecho por particiones llegando a hacer una de 90Gb sin ningún tipo de corte en un disco de 500Gb.

Pues ya veis como es una solución sencilla y que nos permite el tener resguardo de nuestros archivos de forma segura.

Hola de nuevo, muchas cosas me han tenido entretenido los últimos meses y creo que ahora me podré poner al día un poco en mis asuntos del blog. Entre actualizar las webs que llevo (mejorando su diseño, tiempo de descarga, SEO, nuevas imágenes, etc.) y unos cuantos problemas con el ordenador que ya están resueltos, se me pasó el tiempo y he tenido que dejar de lado el blog justo en sus comienzos. De algunos de estos asuntos les comentaré sobre cosas que creo que pueden ser interesantes.