Archivo para la categoría ‘Sobre la Web’

Optimizando sitios Web

Muy buen artículo de Ricardo Galli, el creador y mantenedor de Menéame, sobre cómo optimizar sitios Web.

Más o menos viene a decir:

  • Reducir al máximo tus CSS y Javascript; y no incluyas los que no necesites (o cárgalo más tarde).
  • Si es posible, carga los elementos bloqueantes (widgets,…) de forma paralela (hay muchas formas de hacerlo, por ejemplo usando iframes).
  • Maquetar de forma que se pueda ir “dibujando” la página antes de tener todo el HTML. Con esto se reducirá el tiempo de carga percibido por el usuario.
  • Usar dominios, no subdominios, diferentes para contenido estático.
  • Comprimir el HTML y usar sprites para las imágenes (siempre que dichos sprites no sean demasiado complejos).
  • Intercalar la generación del contenido con el envío, mandando antes las partes que primero se generan (como la cabecera) para ir “dibujando” la página en el menor tiempo posible.

De esto yo deduzco que el modelo MVC es una auténtica mierda a la hora de optimizar sitios Web: lo que hace es procesar todo y luego generar y enviar el HTML al usuario, que es justamente lo que dice Ricardo Galli que es lento y que lo que realmente reduce el tiempo de carga percibido por el usuario es dibujar la página cuanto antes, aunque todavía no se halla generado completamente.

Mira que cosas, todos poniendo al MVC como la panacea y resulta que las pruebas dicen otra cosa… ¡Ains!

De Netscape 4.5 a Chrome 5

Desde que salió Firefox 1.0 no he vuelto a usar otro navegador Web. Antes (mucho antes) fue Netscape 4.5 y luego, cuando este dejó de ser el mejor, fue Internet Explorer (no se exactamente qué versión, aunque supongo que la 5.5 y la 6).

Firefox fue “el navegador”. Lo primero que introdujo fue la navegación por pestañas. Acostumbrados a tener unas cuantas ventanas, esta característica hizo que tu escritorio estuviera más limpio, más ordenado. Luego vinieron los plugins, y ahí ya todo cambió. Eso de poder tener tus añadidos era impresionante. Sobre todo para temas de desarrollo.

En sucesivas versiones de Firefox, lo que principalmente se mejoró fue su gestión de recursos (siempre se acusó un alto consumo de memoria) y su adaptación a los estándares Web. A parte de esto no hubo muchas más características nuevas. Además, tampoco se esmeraron suficiente en el desarrollo de su motor de Javascript, SpiderMonkey/TraceMonkey, con lo que el uso extensivo de Javascript en la Web 2.0 no ha sido todo lo “gran experiencia del usuario” que debería.

Pero el tiempo pasa, la tecnología evoluciona y… salen nuevos navegadores, como Google Chrome, la incursión de Google en el software de clientes Web.

Chrome es un navegador basado en WebKit, es decir, el motor de renderizado del HTML no lo han hecho ellos, mientras que el motor de Javascript, V8, sí que lo han construido desde cero. Y es ahí donde realmente destacan, aparte, por supuesto, de su interfaz de usuario minimalista y funcional, su integración con Flash, su geolocalización, su WebGL,… en definitiva, muchas características de las que otros navegadores carecen.

Y es precisamente por esto, tanto su velocidad como su mayores “features” por lo que he cambiado (casi) definitivamente de navegador principal: de Firefox a Chrome.

Lo único que hecho de menos, principalmente para desarrollo, es un validador de HTML al estilo del HTML Validator de Firefox. Pero el resto de herramientas es bastante buena ya que cuenta con Web Developer y con Firebug (Lite, eso sí).

Pero como siempre, dejo la puerta abierta al próximo navegador Web. Si es mejor que Google Chrome, no dudaré ni un segundo en cambiarme ;) .

Mozilla Thunderbird 3 y el Locale

Icono de Mozilla Thunderbird 3

Ya me he actualizado a Mozilla Thuderbird 3 y, a parte de la nueva interfaz y que algunas cosas cambian de sitio y la forma de hacerlas, la experiencia es totalmente recomendable.

El único problema que he tenido… bueno, problema no, simplemente que no me gusta como está, es que ciertas cadenas de la traducción al español (la localización de la aplicación también conocido como Locale) vienen todas en minúsculas cuando a mi me gustan como el comienzo de frase, con la primera letra mayúscula.

Y como no puedo parar quieto, he buscado por los archivos de Thunderbird y he dado con una solución, a falta de que alguien lo cambie dentro del grupo de desarrollo o de traducción (que supongo no lo harán porque, como he dicho, no es que sea un problema).

El caso es que hay que ir al archivo C:\Archivos de programa\Mozilla Thunderbird\chrome\ y coger el archivo es-ES.jar y hacer una copia de seguridad. Luego se abre con el WinZIP, WinRAR o similares y se descomprime (recordemos que un .jar es un .zip con un formato de carpetas específico).

Una vez descomprimido, dentro de la carpeta locale\es-ES\messenger se abre el archivo msgHdrViewOverlay.dtd con un editor de texto y se cambian ahí todas las cadenas que queramos corregir teniendo cuidado de no alterar el formato del archivo ni de comernos ninguna comilla.

Luego se recomprime con el programa anterior en formato ZIP, que puede variar desde Sin compresión hasta La mejor; funcionará de cualquier forma. Después de comprimir se renombra a es-ES.jar y se sobrescribe la versión anterior de este archivo.

Se inicia el Thunderbird y todo debería haber funcionado sin problemas teniendo ya nuestras cadenas cambiadas. Si algo falla, siempre tendremos la copia de seguridad.

Y esto es todo. Supongo que no seréis tan tiquismiquis como yo y tampoco es que lo vayáis a hacer, pero aquí lo tenéis.

Tetris en primera persona

Gracias a un twitter de @pinano, he encontrado el mejor Tetris ever made: First Person Tetris.

First Person Tetris

Simplemente probadlo. Digamos que no es exactamente lo que estáis pensando ;) . Incluso tiene un modo noche que ya es para flipar.

¿Un buen anti-spam para WordPress?

¿Alguien sabe de algún widget anti-spam para WordPress que sea bueno y que no tenga que deshacer todo el theme para maquetarlo?

He probado un par de ellos de los que están en el Codex pero no me convence ninguno… también de esos que son invisibles, pero no funcionan. Y la verdad es que no tengo ganas de hacerme el mío propio. Si sabéis de alguno poned un comentario :) .

Wikipedia somos todos

Gracias, Wikipedia

Ya he comentado por aquí que la Wikipedia me parece el mejor proyecto de Internet, y con diferencia. Porque en la Wikipedia está mucho del conocimiento humano (no en profundidad, pero sí lo suficiente como para estar informado) y, además, es de todos. Todos podemos ampliarlo y todos podemos ampliar nuestros conocimientos gracias a ella. Así que yo he donado una pequeña cantidad para que siga ahí. Para que todos estemos ahí, porque la Wikipedia somos todos.

Por supuesto, con esto no gano nada, no es publicidad, no hay beneficio económico, es simplemente apoyo. ¿Y tú, has donado ya?

Manifiesto en defensa de los derechos fundamentales de Internet

Ante la inclusión en el Anteproyecto de Ley de Economía sostenible de modificaciones legislativas que afectan al libre ejercicio de las libertades de expresión, información y el derecho de acceso a la cultura a través de Internet, los periodistas, bloggers, usuarios, profesionales y creadores de Internet manifestamos nuestra firme oposición al proyecto, y declaramos que:

  1. Los derechos de autor no pueden situarse por encima de los derechos fundamentales de los ciudadanos, como el derecho a la privacidad, a la seguridad, a la presunción de inocencia, a la tutela judicial efectiva y a la libertad de expresión.
  2. La suspensión de derechos fundamentales es y debe seguir siendo competencia exclusiva del poder judicial. Ni un cierre sin sentencia. Este anteproyecto, en contra de lo establecido en el artículo 20.5 de la Constitución, pone en manos de un órgano no judicial —un organismo dependiente del Ministerio de Cultura—, la potestad de impedir a los ciudadanos españoles el acceso a cualquier página web.
  3. La nueva legislación creará inseguridad jurídica en todo el sector tecnológico español, perjudicando uno de los pocos campos de desarrollo y futuro de nuestra economía, entorpeciendo la creación de empresas, introduciendo trabas a la libre competencia y ralentizando su proyección internacional.
  4. La nueva legislación propuesta amenaza a los nuevos creadores y entorpece la creación cultural. Con Internet y los sucesivos avances tecnológicos se ha democratizado extraordinariamente la creación y emisión de contenidos de todo tipo, que ya no provienen prevalentemente de las industrias culturales tradicionales, sino de multitud de fuentes diferentes.
  5. Los autores, como todos los trabajadores, tienen derecho a vivir de su trabajo con nuevas ideas creativas, modelos de negocio y actividades asociadas a sus creaciones. Intentar sostener con cambios legislativos a una industria obsoleta que no sabe adaptarse a este nuevo entorno no es ni justo ni realista. Si su modelo de negocio se basaba en el control de las copias de las obras y en Internet no es posible sin vulnerar derechos fundamentales, deberían buscar otro modelo.
  6. Consideramos que las industrias culturales necesitan para sobrevivir alternativas modernas, eficaces, creíbles y asequibles y que se adecuen a los nuevos usos sociales, en lugar de limitaciones tan desproporcionadas como ineficaces para el fin que dicen perseguir.
  7. Internet debe funcionar de forma libre y sin interferencias políticas auspiciadas por sectores que pretenden perpetuar obsoletos modelos de negocio e imposibilitar que el saber humano siga siendo libre.
  8. Exigimos que el Gobierno garantice por ley la neutralidad de la Red en España, ante cualquier presión que pueda producirse, como marco para el desarrollo de una economía sostenible y realista de cara al futuro.
  9. Proponemos una verdadera reforma del derecho de propiedad intelectual orientada a su fin: devolver a la sociedad el conocimiento, promover el dominio público y limitar los abusos de las entidades gestoras.
  10. En democracia las leyes y sus modificaciones deben aprobarse tras el oportuno debate público y habiendo consultado previamente a todas las partes implicadas. No es de recibo que se realicen cambios legislativos que afectan a derechos fundamentales en una ley no orgánica y que versa sobre otra materia.

Este manifiesto, elaborado de forma conjunta por varias personas, es de todos y de ninguno. Si estás de acuerdo y quieres sumarte a él, difúndelo por Internet.

Yo lo vi en Barrapunto, en Microsiervos y en muchos otros sitios más. Porque eso sí que es un atentado contra nuestros derechos fundamentales. Y todo por dinero, como siempre. Por mantener un negocio de cuatro a costa de todos. Pero lo peor es que nuestro maravillos gobierno de izquierdas, legisladores para el pueblo, ha sucumbido ante las presiones de empresas privadas. Genial.

Clonar un objeto en Javascript

En Javascript las variables que apuntan a objetos son referencias, por lo que la asignación entre las mismas se hace de esta forma con lo que la modificación de una de estas variables afecta al resto de referencias. Por ejemplo:

var myObject = {
text: ‘Clonning Objects’
};

var mySecondObject = myObject;
mySecondObject.text = ‘Clonando Objectos’;

// saldrá una alerta con el texto ‘Clonando Objetos’ ya
// que las variables se asignan por referencia
alert(mySecondObject.text);

En el alert(...) saldrá el texto ‘Clonando Objetos’ ya que ambas variables apuntan a la misma zona de memoria, de ahí las referencias. Es debido a esto, y que en algunas ocasiones necesitas clonar un objeto, por lo que es necesario implementar una función que lo haga. Para ello tenemos esta función, que la he visto en StackOverflow aunque la he retocado un poco, que funciona perfectamente:

function clone(from) {
if(from == null || typeof from != “object”)
return from;

if(from.constructor != Object &&
from.constructor != Array)
return from;

if(from.constructor == Date ||
from.constructor == RegExp ||
from.constructor == Function ||
from.constructor == String ||
from.constructor == Number ||
from.constructor == Boolean)
return new from.constructor(from);

var to = {};
to = to || new from.constructor();

for (var name in from) {
to[name] = typeof to[name] == “undefined” ?
this.clone(from[name]) :
to[name];
}

return to;
}

Con esta función, el ejemplo anterior se convierte:

var myObject = {
text: ‘Clonning Objects’
};

var mySecondObject = clone(myObject);
mySecondObject.text = ‘Clonando Objectos’;

// saldrá una alerta con el texto ‘Clonning Objects’ ya que,
// aunque las variables se asignan por referencia, nuestra
// función ha clonado nuestro objecto con lo que son dos
// objetos distintos
alert(mySecondObject.text);

Y aquí el mensaje del alert(...) ya será ‘Clonning Objects’. Con esto ya podemos duplicar objetos… Pero, como no había quedado muy conforme con la solución seguí buscando, más por encontrar otro tipo de solución (no veo lógico que Javascript no tenga una forma nativa de clonar objetos) que por mejorar rendimiento. Y, aunque no encontré la forma nativa (creo que no la hay), sí encontré otra mucho más corta y más elegante:

function clone(o) {
return eval(uneval(o));
}

La función eval(...) coge un texto y lo evalúa como su fuese Javascript, de forma dinámica. Y, lógicamente, la función uneval(...) hace lo contrario: dado un código en Javascript —una clase, un array, etc.— lo convierte en el texto correspondiente, por lo que esta función lo que hace es convertir el objeto en texto y el texto generado otra vez en objeto, clonando así el objeto que se pasa como parámetro.

De estas dos formas, la segunda solución me parece más elegante —pocas cosas se consiguen en una sola línea de código—. El problema que puede existir es el rendimiento, ya que no he visto nada por ahí y yo tampoco he hecho pruebas, así que la decisión queda para cada uno. Yo he probado las dos y ambas funcionan sin problemas. Si alguien hace sus pruebas, que comente sus resultados.

La duda ofende

Error en Facebook con el navegador

Quizás los ingenieros de Facebook deberían revisar su algoritmo para reconocer con qué navegador estás viendo su página porque, que yo sepa, uso Firefox (la duda ofende) y no uso IE desde… vamos, que todavía tengo la versión 6 en mi máquina porque no quiero actualizar; para qué, si no lo uso. Además, este cacharro tampoco es que la aguantara.

Nuevo dominio (por fin)

Por fin he registrado Héctor me ha registrado el nuevo y definitivo dominio para este blog: beosman.org.

A partir de ahora tanto el blog como el feed estarán bajo esta URL por lo que ya pueden pasar a actualizar ustedes sus lectores RSS.

Supongo que quizás en un par de días habrá fallos de resolución de DNS hasta que no se extienda por todos los servidores pero el dominio está listo y, de momento, funcionando.

Las peleas de Xiao Xiao

No sé si os acordáis de los famosos vídeos en Flash de Xiao Xiao (mucho antes de que existiese YouTube) sobre peleas de kárate con monigotes de alambre:

Pantallazo de uno de los Flash de peleas de Xiao Xiao

La fecha en la que yo lo guardé es de 2001, pero seguro que estaba desde bastante antes. Pero todavía hoy impresiona ver la coreografía de los personajes monocolor de las peleas.

Mi página aún más antigua

Hablando el otro día de mis antiguas páginas Web, hoy he encontrado una todavía más antigua; y eso no es todo: ¡la hice en inglés!

Mi primera página Web pública en Geocities
Mi primera página Web (sobre BeOS)

El caso es que la encontré probando el Haiku e intentando que mi primera (y única) aplicación para BeOS funcionase. En los créditos todavía ponía mi antigua dirección de correo (beosman@bemail.com, que aunque la página existe, ya no funciona) y la primera de mis páginas. Y como Geocities va a dejar de funcionar pues la pongo aquí para que no se me olvide ;) .

P.D.: Tampoco tenía tantos errores de HTML; incluso había puesto el DOCTYPE, eso sí, en minúsculas, y no valía, pero la intención era buena.

Mis antiguas páginas Web

Ya en el 2004 cuando estaba finalizando la carrera, se me dio por hacer mi propia página Web por eso de compartir la información y los proyectos que uno hacía. Además, desde cero, sin gestor de contenidos (tampoco sabía lo que era en aquella época) ni nada. Directamente en PHP. Además, también hacía mis pinitos con Photoshop:

Pantallazo de mi primera página Web (del año 2004)

No podía publicar noticias ni nada, simplemente se añadían más archivos PHP con los datos de las nuevas páginas y listo. Ni siquiera hacía uso de una base de datos.

Luego ya, viendo que la página era de crecimiento limitado, me decidí ha hacer un pequeño gestor de contenidos a medida. También en PHP y esta vez con acceso a bases de datos para las noticias:

Mi primer blog

Se notaba por aquella época mi predilección por el Firefox dejando de lado el IE (y vuelve esa idea), además de la resolución de pantalla y de la —todavía en uso en muchas páginas que se las dan de estándar— maquetación usando tablas. Vamos, no tenía casi ni idea de CSS y ni mucho menos de usabilidad y de accesibilidad. Pero por algo hay que empezar y esto era una buena idea.

Incluso hasta tenía una parte de administración con seguridad (usuario y contraseña, como casi todas) desde donde se podían añadir noticias, categorías, gestionar usuarios, proyectos, descargas, estadísticas,… vamos, como era a medida podía añadir lo que necesitara (¡pedazo de cabecera! Como se notaba que también estaba practicando con el Photoshop):

Consola de mantenimiento del blog personalizada

¿Alguien se acuerda de todo esto?

Luego descubrí WordPress (la versión 2.0), lo instalé y a funcionar. Y con él sigo.

La verdad es que desarrollando un blog hubiera aprendido mucho de PHP, además del HTML correspondiente y su maquetación, sobre todo por los fallos de principiante, esos que veo ahora que miro el código :) .

De todas formas, por aquella época (más o menos el 2004) ya tenía más o menos bastante claro como hacer un software mantenible, ya que había hecho que todo se procesase desde el index.php cargando éste las partes que eran necesarias, cosa que sigo llevando a la práctica.

Ahora, eso sí, con un pequeño framework en PHP personal, no para el blog pero sí para otros pequeños proyectos.

WWW SQL Designer

Una de las cosas que más me ha llamado la atención estos días, por su simplicidad y potencia a la vez, ha sido WWW SQL Designer.

WWW SQL Designer es una aplicación Web hecha en Javascript que te puedes descargar para que funcione desde tu ordenador y sirve para hacer diseños sencillos de tablas y relaciones de bases de datos.

Ejemplo de funcionamiento de WWW SQL Designer

Desde el propio navegador puedes crear tablas, añadir campos a las tablas de diferentes tipos y añadir relaciones entre campos de diferentes tablas.

Luego, estos datos se pueden guardar en XML o se puede generar el SQL para distintas bases de datos entre las que están MySQL y PostgreSQL. Eso sí, el XML no se puede guardar en un archivo sino que se genera para que tú lo guardes en un archivo local (recordemos que Javascript no puede acceder a otros archivos del ordenador que no sean las cookies) aunque también tiene la opción de guardar tu diseño en su servidor. Por supuesto, también se puede cargar un diseño en XML (el mismo que se generó anteriormente) ya que en cada recarga del navegador se pierden los cambios.

Lo que realmente me gusta de esto no es que sea vía Web, para nada, de hecho en Firefox en Linux va de pena mientras que en Firefox en Windows va muy bien. Lo que realmente me gusta es la sencillez tanto de manejo como de opciones. Es decir, en muy pocos pasos tienes un pequeño diseño válido para cualquier aplicación pequeña (pongamos… un blog :) ).

Y es que esta sencillez no la he encontrado en otros programas que tienen más opciones, que generan mejor el SQL y, sobre todo, que son más caros. En Linux hay algunos, pero ninguno tan sencillo como este. Por supuesto, para diseños grandes o hazlo a mano (cosa que recomiendo, así siempre tendrás el control sobre las tablas) o búscate/cómprate un programa profesional.

¿Y a vosotros qué os parece esa aplicación? ¿Alguna mejora? ¿Algún programa similar a este para el escritorio?

Otra solución para las imágenes PNG en Internet Explorer 6

La solución propuesta en varios sitios (donde lo vi) para solucionar el problema de las imágenes PNG en Internet Explorer 6 no es una buena solución porque es extremadamente lenta. Hay que darse cuenta de que, para cada imagen, ya sea <img src="..." /> en el HTML o cada elemento background-image o background que lleve el CSS , hay que ejecutar el archivo .htc con lo que hay que ir al servidor, bajarlo y ejecutarlo. Por cierto, donde está la caché cuando se la necesita…

A mi no me ha quedado otra que rendirme. Pues sí, qué queréis que os diga. Prefiero que en IE se vean peor las imágenes (ojo, siempre que no sean fondos espectaculares y tu web se base en el diseño en lugar de en la funcionalidad) pero ganar en velocidad; en mucha velocidad.

Es por eso que la otra solución que propongo es: primero, convertir todas las imágenes a formato GIF (por eso de que tengan, al menos, algo de transparencia, aunque se pueden convertir al formato que se necesite). Esto se puede hacer mediante el comando convert en Linux:

diego@dbox:~/projects/MyApp/public/images/:$ find -name ‘*.png’ | while read; do name=`basename $REPLY .png`; convert $REPLY ${name}.gif; done

Una vez hecho esto, nos creamos otro archivo CSS específico para IE donde sólo estén los selectores donde se usa background o background-image. Además, en estos selectores se debería eliminar el resto de código CSS para minimizar el ancho de banda usado por el nuevo CSS. Luego, lógicamente, cambiados todas las referencias a imágenes en PNG por las referencias a las imágenes en GIF.

Para incluir este CSS sólo en IE usamos el truco de inclusión condicional (sólo válido para IE, obviamente):

<!––[if lte IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie.css” media=”all” />
<![endif]––>

Y para las imágenes dentro del HTML usamos un poco de javascript (yo, personalmente uso jQuery):

$(“document”).ready(function() {
$(“img”).each(function() {
var src = $(this).attr(“src”);
src = src.substring(0,src.length-4);
$(this).attr(“src”,src + “.gif”);
});
});

Esta no es ni de lejos la solución definitiva y, ni muchos menos, es una buena solución, pero es mucho más rápida que la solución del archivo .htc porque una de las cosas que hace es que sí que usa la caché para las imágenes, con lo que después de cargarlo la primera vez, las siguientes van más rápido.

Ahora sois vosotros los desarrolladores los que tenéis que decir qué os interesa más, si que vuestra página se vea perfecta en IE a costa de sacrificar la velocidad, o que vaya rápido a costa de sacrificar vuestro diseño. Yo, en este preciso caso, elegí la velocidad. La proxima vez ya se verá.

Otra vez con incompatibilidades

Pobrecito Opera para Linux, cada vez que intento acceder a alguna página ¿rara? me pasa siempre lo mismo:

El Plural en Opera para Linux
«Esta página no está optimizada para su navegador, ¿quiere continuar?» Igual no, a ver si va a explotar el invento…

Por supuesto, la página se ve correctamente. Por eso Opera es uno de los navegadores que cumplen con los estándares Web.

Por cierto, la noticia que iba a ver y de la que me iba a reir un rato es de que los monjes Salesianos han editado un libro para dejar de ser gay. Lo mismito lo mismito que editar un libro para ser más alto (o para que te crezca la polla el pene, como promenten muchos mensajes de spam. ¿No estarán editados por los mismos?).