Ya de vuelta de las vacaciones procedo al segundo cambio de batería del SAI, algo en que ahorrar que estamos en crisis. Para quienes no sepan que es esto: el SAI o sistema de alimentación ininterrumpida (UPS en inglés) es un aparato que se enchufa a la red eléctrica y a él se conectan el ordenador y el monitor.

imagen de un SAI, la marca da igual

En mi caso, y apañando los cables, he conectado el ordenador, dos monitores CRT (17 y 19 pulgadas), el router y los altavoces. Su función es “equilibrar” la corriente eléctrica que llega (por la red y por teléfono), protegiendo al equipo de picos altos de tensión y suministrando energía el tiempo suficiente para guardar todo y apagar adecuadamente el ordenador cuando se corta la corriente.

Además tiene conexión de entrada y salida para la línea de teléfono que también lleva su voltaje y puede ocasionar problemas. El primer ordenador que tuve en España se quemó en una tormenta en el 96, con una chispa de rayo que cayó cerca de casa en un poste de teléfonos y lo único que no había desconectado era el modem. De la torre del ordenador solo se salvó la disquetera, las demás partes internas se estropearon. Esto lo confirmé con el técnico que estaba a tope de trabajo con muchos faxes que se cargó la tormenta. Con lo delgadito que se ve el cable de teléfono y la que puede armar.

A lo que estábamos. Los SAI salen en varias potencias, la mas común es la de 650VA que soporta unos 360W y cuesta como 70€. Con las reformas al ordenador y lo que le he ido conectando estaba llegando a su capacidad máxima. La primera batería duró 6 años y la segunda apenas 2. No veo la necesidad de gastarme ahora este dinero o mas cuando la batería, que es lo que se gasta, solo vale unos 25€. Así que ya puestos a cambiarla otra vez busqué una de más capacidad.

Las baterías son de 12V (12 voltios como las de los coches), la que trae originalmente es de 7A (7 amperios). Encontré una de 12A que tiene el mismo largo y alto, pero es mas ancha, así que solo había que cortar un poco el lateral de la carcasa del SAI para que cupiera.

bateria 12V7A

bateria 12V12A

comparación del tamaño de las baterias

El aparato es una simple caja con cuatro tornillos que se abre facilmente. En este caso la batería es un poco mas alta que la base de la caja, así que habrá que recortar también un poco de la parte de arriba.

SAI abierto

SAI abierto sin bateria

SAI abierto cortado sin bateria

Ahora ya solo hay que poner la nueva batería en su sitio, conectarla y cerrar la caja esta vez con 3 tornillos ya que hemos perdido el sitio de uno de ellos. Se vuelve a conectar todo por detrás como se debe y a trabajar.

SAI abierto con bateria de 12A

SAI cerrado con bateria 12A

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:

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

En el CSS:

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

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:

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.

Via CSSBlog he encontrado una pequeña guía sobre el uso de las fuentes en la web, la cual remite a información de webtaller.

Discrepo en algunas cosas basándome en mi experiencia y en mucha información que he encontrado en internet y libros sobre diseño gráfico y web.

Por un lado está el contraste, el cual para mí no debe ser demasiado fuerte. Lo primero que se viene a la cabeza en cuanto al contraste es el blanco y negro. Este queda bien en los libros, pero en el ordenador hay que sumarles el brillo que aporta la pantalla. Algo que no tiene el papel a no ser que sea así y en ese caso ya es un defecto de diseño, o un error del diseñador que lo escogió.

Basta con elegir un ligero tono pastel del color que se quiera, ya sea para el fondo o para el texto en caso de fondos muy oscuros. En cuyo caso habrá que aumentar un poco el tamaño de fuente o su espesor para que el fondo no se la coma.

Coincido en esto con los de CSSBlog, los colores deben tener una armonía. Pero esta debe ser preferiblemente análoga o monocroma, es decir, entre colores muy parecidos o el mismo color. Acercándose uno al negro y el otro al blanco, texto y fondo o viceversa. Evitando en lo posible las armonías complementarias que provocan vibración tonal. Como es el caso del naranja-violeta o magenta-verde, por ejemplo.

El interlineado y el interletrado deben ser algo que no se debería tocar a no ser que se quiera hacer algo especial. Ya quien diseñó la fuente estudió esas características para hacerlas adecuadas a la lectura. En cuanto al largo de los renglones diversas investigaciones han dado como resultado que un largo de 62-66 caracteres es el mas apropiado.

Salirse de estas bases es posible pero para casos puntuales, publicidad, logotipos, titulares impactantes, etc., pero no es recomendable para bloques de texto. Con efectos, contrastes extraños, interletrados e interlineados especiales, etc. en textos largos provocamos dificultad de lectura y cansancio visual. Lo que deriva en abandono de la web, lo primero que debemos evitar.

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:

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í:

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

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.

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.