Hoy pensaba escribir un artículo/tutorial sobre KHMACs (códigos de autenticación de mensajes mediante hash con contraseña). No hay apenas información en castellano al respecto (¡ni siquiera en Wikipedia!) y la verdad es que son herramientas muy útiles y potentes para el desarrollo web, así que supuse que sería un buen artículo.

Al intentar estructurar el artículo, me di cuenta de que era demasiado complejo, muchos términos de seguridad y criptografía, así que pensé que sería mejor empezar con un artículo de introducción a la seguridad web y el uso de criptografía para ello.

Tras pensar esto me pregunté que si mis lectores estáis interesados o no en el tema. Para salir de dudas, he decidido preguntaros:
¿De qué temas os gustaría que escribiese artículos y/o tutoriales?

Algunas posibilidades:

- Desarrollo de webs seguras
- Introducción al diseño gráfico y tipografía
- CSS y HTML
- Photoshop
- PHP
- Javascript
- Fotografía digital
- Pintura digital

Tengo algunos conocimientos de varios temas más, pero supongo que no encajan demasiado bien en mi blog.

Espero que os animéis a escribir. Sería información útil también el nivel que os gustaría para cualquier tema, y si preferís explicaciones detalladas o series de ejemplos concretos. Gracias de antemano.

Hoy os muestro algunos consejos para conseguir que vuestras webs reduzcan su tiempo de carga:

- Crea las imágenes para el tamaño exacto que se vaya a mostrar en la web. Las imágenes de mayor tamaño ocupan más y en gran parte de los navegadores producen aliasing (dentellado) al ser redimensionadas.

- Crea los botones iluminables con transparencias. En bastantes casos se pueden sustituir rollovers creados a base de 2 imágenes por una sola imagen con transparencia y un cambio de color de fondo.

- Usa formato gif para imágenes pequeñas o vectoriales. A la izquierda muestro un ejemplo de logotipo en gif que ocupa menos de 2kb y a la derecha el mismo logotipo con jpg ocupando más de 7kb (y mostrando menor calidad).

- Ajusta el nivel de compresión para cada imagen jpeg. Se trata de una tarea bastante laboriosa, pero puede reducir ampliamente el tamaño de una página.

- El formato png8 ofrece a veces mayor compresión que gif. Para que se muestren los colores de un png idénticos en cualquier navegador a su equivalente en gif, es necesario eliminar el gamma del fichero, cosa que se puede hacer mediante utilidades tipo TweakPNG.

- Las versiones antiguas de Photoshop no disponen de un buen compresor para png, puedes usar Gimp o compresores png especializados para reducir el tamaño.

- Activa la compresión gzip de Apache para los ficheros javascript, css y tml. En el caso de que tu web use librerías como Prototype es especialmente importante; sin gzip son 120kb de descarga, con gzip por debajo de 30 kb.

- Si usas Wordpress, instala una cache. Wordpress sin cache puede tomar varios cientos de milisegundos en generar la página.

- Siempre que sea posible, agrega width y height a tus imágenes <img>. Esto no acelera la carga, pero hace que el navegador no tenga que renderizar varias veces el contenido a medida que recibe las imágenes. Se percibe especialmente en conexiones lentas.

- Para mostrar listados muy grandes (más de mil registros) es preferible usar divs a tables aunque el contenido esté semánticamente mejor representado con tables. La mayoría de navegadores renderizan varias veces más rápido los divs que las tablas (con diez mil registros supone varios segundos de diferencia).

- Usa el menor número de ficheros posible. El tiempo de descarga para un fichero incluye la latencia entre el cliente y el servidor. Cuando se realizan varias peticiones de ficheros simultáneamente, el tiempo de latencia no se acumula. Navegadores como Internet Explorer y ciertas versiones de Firefox no solicitan todos los ficheros de una página al mismo tiempo, están limitados a descargas de 4/5 ficheros en paralelo. Es decir, para un número elevado de ficheros, en el tiempo de carga se incluye una cuarta o quinta parte de la latencia multiplicada por el número de ficheros. Es por ello que es conveniente reducir el número de ficheros al mínimo posible. Un ejemplo concreto es mi portfolio: Desde España (donde la latencia es considerable porque el servidor está en USA), en Internet Explorer y Firefox la carga dura 2 segundos más que en Opera (Opera parece solicitar todas las imágenes simultáneamente).

- Las ventajas de los ficheros .css y .js suelen ser muy claras; se pueden compartir entre diferentes páginas de una misma web y la carga sólo se realiza una vez dado que permanece en cache. Sin embargo, para páginas que no tengan secciones o cuyo acceso a las secciones sea infrecuente, es posible que se mejore levemente el tiempo de carga incrustando los códigos en el html.

- En ocasiones concretas se puede sustituir toda la librería Prototype (y similares) por un iframe y/o unas cuantas líneas de javascript.

Algunos consejos eran bastante conocidos y frecuentes hace varios años, pero parece que con el aumento de la velocidad de conexión se han ido olvidando. Espero que se os haya refrescado un poco la memoria con este post :)

Según la página de Google Chrome: “Si has probado el sitio con el navegador Safari 3.1, entonces debería visualizarse correctamente en Google Chrome.“. Dado que Chrome usa el mismo sistema de renderizado de páginas que Safari, WebKit, en teoría debería ser así. Pero parece ser que algunas partes han sido modificadas, como la encargada de representar el tag <input>… y aquí llegan los problemas.

Un ejemplo es el que ocurre al usar la propiedad css overflow: auto para un input, vista en diferentes navegadores (ejemplo de código):

Como podréis apreciar, el input en Chrome es bastante más alto que en los demás navegadores. 

En principio este problema concreto es fácil de solucionar; basta con eliminar la propiedad overflow del input (que es carente de utilidad para los inputs, pero dado que se suelen formatear inputs y textareas juntos, existen muchas webs que la aplican).

El problema mayor es para los desarrolladores web: es previsible una gran aceptación de Google Chrome y ello implica la corrección de páginas ya existentes y otro navegador web en el que tener que realizar pruebas; más trabajo.

Ya está disponible la beta de Chrome, el nuevo navegador de la mano de Google.

Acabo de instalarlo y he realizado varias pruebas de velocidad… ¡impresionante!

He probado mi pacman-css y el efecto pelo y son mucho más rápidos en Chrome que en ningún otro navegador.

Chrome está basado en WebKit, el sistema de renderizado de páginas de Safari, pero a diferencia de éste, bajo Windows usa ClearType.

(versión en castellano abajo)

I found an interesting article by Ask the CSS Guy about one pixel notched corners CSS trick used by Google. In this article, the CSS Guy show us how Google did it, using <li><a><b><b><b>Option</b></b></b></a></li>. The CSS guy was able to do it with only 2 nested <b>. I just thought that even if it was a better way than Google did, two <b>s doesn’t look good enough… so I had to try to do it better.

I’ve done it with just one <b>:  <li><a><b>Option</b></a></li>, so the semantic meaning remains intact. It is crossbrowser (tested and pixel perfect in 12 browsers, IE 5.5, 6, 7, 8, Opera 9, Firefox 2, 3, Maxthon 1.6, 2, Konqueror 3.9.2, Safari 3, Flock), and also the same code could be used as quirks or strict mode without changes. Of course, the xhtml strict version pass the W3C validation.

Quirks mode version
Xhtml stric mode version

Castellano

En un interesante artículo de Ask the CSS Guy se explicaba cómo Google Analytics crea bordes redondeados de un pixel sin imágenes y sólo CSS. Para ello Google usa una estructura <li><a><b><b><b>Option</b></b></b></a></li>. El Chico CSS fue capaz de mejorar dicha estructura reduciendo el número de <b>s a sólo 2. Pensé que se podía hacer aún mejor, y me puse a intentarlo.

Finalmente he conseguido que sólo tenga una <b>; <li><a><b>Option</b></a></li>, de esta forma se mantiene la semántica. Es crossbrowser (probado y renderizando con resultados totalmente idénticos en 12 navegadores: IE 5.5, 6, 7, 8, Opera 9, Firefox 2, 3, Maxthon 1.6, 2, Konqueror 3.9.2, Safari 3, Flock), y el mismo código se puede usar tanto en modo quirks como strict sin cambios. Por supuesto, la versión xhtml estricta valida según la W3C.

(texto en castellano abajo)

After drawing in CSS (see Homer CSS and Bush CSS), a generator software for CSS Art (jpeg2css) and animated CSS art (CSS-Cola), what to do next?

Pacman CSS uses no images, only pure vectorial and rescalable CSS art composed of hundreds of Verdana font characters, and javascript code for animation and game. It is less than 9kb uncompressed -less than 3 with zip compression-.

It requires a browser with javascript enabled and the Verdana font installed. It has been tested in 11 different browsers, Internet Explorer 5.5 to 8, Firefox 2 and 3, Opera 9, Safari 3, Maxthon 1.6 and 2 and Flock, working on all. To IE 8 beta users: use IE7 emulation to run it (without the emulation it works, but too slow, it takes several seconds to start and generates very few images per second -I assume it is a problem with the beta IE  version-)

Push the START GAME button to play it!

Castellano

Tras dibujar en CSS (ver Homer CSS y Bush CSS), un software generador de arte CSS (jpeg2css) y arte CSS animado (CSS-Cola), ¿qué sería lo siguiente?

Pacman CSS no usa imágenes, sólo arte CSS vectorial y redimensionable compuesto de cientos de caracteres de la fuente Verdana, y código javascript para la animación y el juego. Ocupa menos de 9kb descomprimido (y menos de 3kb con zip).

Requiere un navegador con javascript y la fuente Verdana instalada. Ha sido probado en 11 navegadores distintos; Internet Explorer de 5.5 a 8, Firefox 2 y 3, Opera 9, Safari 3, Maxthon 1.6 y 2 y Flock, funcionando en todos. A los usuarios de IE 8 beta: jugad con la emulación de IE7 activa (sin la emulación funciona, pero demasiado lento; tarda varios segundos en empezar y genera muy pocas imágenes por segundo… supongo que es un problema de la beta de IE)

¡Pulsad el botón START GAME para jugar!

Agradecimientos a Xero por su apoyo moral durante la realización del juego y el beta-testing.

(see English version below) 

Bastantes personas me han sugerido que realice algún tipo de tutorial de CSS y programación web. De estas sugerencias he decidido ir publicando ejemplos de casos prácticos de desarrollo web, realizados con css y xhtml estricto, accesible, semántico, que funcione en la mayor cantidad de navegadores posibles sin hacks y, por supuesto, que valide.

Mapa con areas que se iluminan

En gran cantidad de webs es necesaria la selección geográfica. Además de ser útiles para tal fin, por regla general, los mapas aportan valor estético al website y consolidan la imagen de empresa.

Al realizar estos mapas con xhtml semántico y no en Flash, aumentamos en gran medida la accesibilidad y Google (y otros buscadores) podrá recorrer todo el website sin problema. Suponiendo que se tratase un mapa de Europa para selección de país, se podrían ordenar alfabeticamente los <li> que conforman los paises y resultaría de gran utilidad en navegadores en modo texto o hablado.

El mapa de ejemplo ha sido validado y probado su correcto funcionamiento en los siguientes navegadores:

Windows: IE 6, IE 7, IE 8 beta, Firefox 2, Firefox 3 beta, Opera 9, Safari 3, Flock y Links 0.98
Linux (Kubuntu): Konqueror 3.5.9

Bajo Windows ha sido probado también en Maxthon 1.6 y 2.1, y funcionando correctamente siempre que no se haga zoom (en ese caso se desplazan las areas seleccionables). En IE 5.5 no pierde la funcionalidad; las areas siguen siendo pulsables, pero no se iluminan (es un problema de IE 5.5 con el xhtml strict).

Descargar este ejemplo

English

Several people asked me for tutorials on CSS and web coding. I’ve decided to publish practical examples in web development, done with css, semantic, accessible and stric xhtml, working in the highest number of browsers as possible without hacks and, of course, valid.

Map with highlight on hover

Lots of websites require a geographic area selection. Not only useful for that matter, usually maps add great aesthetic value to a website.

Creating maps with semantic xhtml and not in Flash, accessibility is highly increased and Google (such as other search engines) will be able to spider all your website without problems. In the case you create, for example, an Europe map for country selection, you could even alphabetically order the contry <li>s and would result of great utility in text/voice mode browsers.

The example’s map has been validated and tested in the next browsers:

Windows: IE 6, IE 7, IE 8 beta, Firefox 2, Firefox 3 beta, Opera 9, Safari 3, Flock and Links 0.98
Linux (Kubuntu): Konqueror 3.5.9

Under Windows, it has been also tested in Maxthon 1.6 and 2.1, working correctly if not zoomed (in that case the areas get displaced). In IE 5.5 doesn’t loose its functionality, but the areas are not highlighted (this is a problem with IE 5.5 and strict xhtml).

Download this example

(see English version below)

Tras Homer CSS, Bush CSS y jpeg2css, hacer animaciones con arte CSS era el siguiente paso. Esta Cocaco… CSS-Cola es baja en calorías; ocupa 891 bytes. Dejo la siguiente pregunta a los expertos en Flash: ¿Se podría hacer una animación similar que ocupase menos?

English

After Homer CSS, Bush CSS and jpeg2css, animations with CSS art was the next step. This is a Co… erm… CSS-Cola light; it’s just 891 bytes in size. To the Flash experts out there: Would it be possible to do a similar animation even smaller than that?

(see English version below)

En un foro en el que se hablaba de Homer CSS y Bush CSS, se me retó a realizar una aplicación que generase arte CSS directamente de una imagen jpeg. He aquí la respuesta.

Se trata de una prueba de concepto, sólo genera imágenes en blanco y negro, sólo usa caracteres • y no tiene interfaz de usuario; toma el fichero “image.jpg” y de ahí genera “out.html”. El fichero “image.jpg” puede ser sustituido por cualquier otra imagen en formato jpeg. Podéis ver un ejemplo del resultado aquí.

El software funciona bajo Windows, y ha sido analizado con los siguientes antivirus: Karspersky, Nod32, Trend Micro y Windows Defender. En cualquier caso, se ofrece sin garantías de ningún tipo y asumiendo que el usuario se hace responsable de su descarga y uso. Descargar jpeg2css.

English

After doing Homer CSS I was challenged to do a JPG to CSS image conversion tool. It is a proof of concept really. It takes a black and white jpeg and returns an html copy of the image created with text and CSS, just like homer was. Enjoy!

This is a Windows only software. Since it has not a graphical user interface, in order to use your own image you have to rename it as ”image.jpg” and replace the example’s one.

It has been tested on Karspesky, Nod32, Trend Micro and Windows Defender antivirus and no viruses were found. But remember use it at your own risk. Download jpeg2css.

Thanks goes to:
Thomas Gilray for helping me in the translation of this post
Elías/elcinegratis for beta testing of the software
Zest for challenging me to do it

Hoy se ha vuelto a caer el servidor. El motivo esta vez creo que ha sido a causa de aparecer en portada de digg el Homer CSS… pero no el mio, sino la increíble versión animada de Ned Batchelder. Ned ha hecho un brillante trabajo, mostrando carácter a carácter cómo hice el Homer…

Dado que mi Wordpress es una versión bastante personalizada, no podía instalar wp-cache (no es compatible), así que… simplemente he creado mi propio sistema de caché. Ocupa menos de medio kb y parece que va de maravilla… probablemente he multiplicado por 20 o más la velocidad de generación de las páginas. Si encontráis algún error, avisadme, y si por casualidad os interesa que trabaje un poco más en ello y abra el código, sólo tenéis que dejar el comentario :)