daveruiz.net blog

Una precarga (muy) sencilla para Flash (AS3).  Suponiendo que el primer fotograma está vacío, podemos incluir el siguiente código en la linea de tiempo principal:

stop(); root.loaderInfo.addEventListener(Event.COMPLETE, function(e:Event) { play(); });

Esto comenzará a reproducir el flash en cuanto termine de cargar. Además, podemos aprovechar el primer fotograma para poner un mensaje ‘cargando… ‘, que será lo que se muestre mientras se completa la carga.

Extendiendo el artículo original de aNieto2k, “for reverso para grandes interaciones en Javascript“, he modificado el test que ha creado para realizar una comparativa entre los bucles for y while, sumando o restando valores e incrementándolo mediante las formas i++ y ++i. En este caso, he fijado el número de iteraciones a 5.000.000.

El resultado: probadlo vosotros mismos. Yo obtuve los siguientes valores, con un Firefox 3.0.10:

[ for i++ ] tiempo: 246ms. (5000000 iteraciones)
[ while i++ ] tiempo: 225ms. (5000000 iteraciones)
[ for ++i ] tiempo: 247ms. (5000000 iteraciones)
[ while ++i ] tiempo: 221ms. (5000000 iteraciones)
[ for i-- ] tiempo: 229ms. (5000000 iteraciones)
[ while i-- ] tiempo: 213ms. (5000000 iteraciones)
[ for --i ] tiempo: 221ms. (5000000 iteraciones)
[ while --i ] tiempo: 212ms. (5000000 iteraciones)

Según estos resultados, en Javascript al menos, daría prácticamente igual emplear la forma i++ e ++i. El ganador, un while — por goleada .

Actualización: Acabo de probarlo en IE7, y salta una advertencia de que un script puede estar ralentizando la web (¡si la espera no llega a medio segundo!). Dicha advertencia falsea los tiempos de todas las pruebas (hasta que no pulsas ‘aceptar’ no para de correr el tiempo), así recomiendo ejecutarla en cualquier otro navegador. Por cierto, ¡¡impresionante cómo va el Chrome 2!!

Como aficionado de la creación de web estandar (porque me queda mucho que aprender) me he unido a esta iniciativa, idea de Dustin Diaz, que lleva funcionando desde 2006 y que año a año va acogiendo a más webs.

La idea no es ser uno más, sino que junto al resto de desarrolladores hagamos un poco de ruido de lo importante que es maquetar bien una web, teniendo en cuenta que al otro lado puede haber dificultades físicas o técnicas que impidan disfrutar del contenido de la web.

Puedes comprobar con tus propios ojos este hecho en cualquier página. Si usas Firefox pincha en Ver > Estilo de Página > Sin estilos, y debería desaparecer casi todo el apartado gráfico de la web.

Alternativamente, he hecho un pequeño script (bookmarklet) que hace mas o menos ese trabajo, para aquellos navegadores que no tengan esa opción. Solamente hay que copiarlo, ir a la página ‘victima’, pegar este código en la barra de dirección y darle intro.

javascript:function a() { function g(o) { return document.getElementsByTagName(o) } ; j=g("link"); for (i in j) { if (j[i].rel == "stylesheet") j[i].href = "" } j=g("style"); for (i in j) { j[i].innerHTML = "" }  }; a();

Mientras llega o no la revisión de CSS Level3 ¿Como quedarán mis páginas favoritas con bordes redondeados?

javascript:function a(c) { j=document.getElementsByTagName("*"); for (i in j) { if(j[i].style) j[i].style.WebkitBorderRadius=j[i].style.MozBorderRadius=c+"px"; } };a(15)

Y un ejemplo de cómo queda:

Qué cuco queda youtube

Un nuevo entorno 3D creado para Zomba C&P.

Lo siento por las personas que me han pedido un tutorial con los pasos para realizarlo. Por ahora, son muchas las pruebas que he tenido que hacer para conseguir este resultado, y muchas las correcciones sobre la marcha. Por esta razón, no tengo aún un método “limpio” que poder enseñar. A esto habría que sumarle el poco tiempo disponible (porque estas cosas llevan tiempo).

Sin embargo, no tengo problema en responder preguntas más concretas para aportar un poquito de luz a quien lo necesite

Se trata de un código no intrusivo y accesible que símplemente sustituye el contenido de una selección por una imagen a base de tocar la hoja de estilos.

Para que funcione corréctamente necesitaremos la ayuda de jQuery y, evidentemente, tener instalada la fuente que queremos representar (solo en tu equipo). La técnica consta de los siguientes pasos:

1. Incluir en la cabecera el script en cuestión:

   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.replacefonts.js"></script>

2. Llamar a la función con el selector que nosotros deseemos. Para este ejemplo tomaremos todos los contenedores con la clase “titulo”:

   <script type="text/javascript"><!--
      $(".titulo").replacefonts();
   --></script>

Ya tenemos el script funcionando, pero nos falta crear las imágenes que contienen los textos. Para ello emplearemos cualquier editor de imágenes sencillo (creo que vale hasta el mismísimo paint) y la función de capturar pantalla del sistema. Continuamos con los siguientes pasos:

3. Abrimos la página que estamos modificando con el explorador, pero añadiéndole al final de la URL lo siguiente: #dev. Esto hará que se muestre un recuadro rojo alrededor de los elementos de la clase “titulo” que no han cargado imagen, facilitando así la tarea de recorte.

   

4. Una vez hechas todas las capturas las guardamos. Por defecto el script va a buscar las imagenes a la carpeta img/titles/ y con extensión .gif. Esto se puede modificar en las primeras lineas del script. Y respecto al nombre que se ha de poner, si el elemento tiene el atríbuto ID lo empleará para generar el nombre, de lo contrario generará un nombre a partir del texto del contenido empleando solo las letras en minúsculas. Por ejemplo:

   HOTEL RESERVATION / Registration Deadline: 31/12/2010

   pasaría a ser:

   hotelreservationregistrationdeadline31122010.gif

Y esto es todo. Ventajas veo al usar este método:

• Si no esta habilitado javascript simplemente te deja el texto con la siguiente fuente disponible.
• La edición de imagenes se limita a capturar y recortar el area señalada en rojo, sin tener que reescribir todos los textos.
• Vemos realmente cómo va a quedar en la página antes de crear la imagen.
• Usando los nombres generados automáticamente, al cambiar el contenido del texto cambia la imagen. Así prevenimos que el texto real no coincida con el de la imagen.

Actualización: Más tarde encuentro este enlace: http://www.disenorama.com/articulos/reemplazo-de-textos-una-comparacion, donde explican varios métodos, pros y contras para realizar esto mismo. Como siempre, es muy difícil innovar en estas cosas.

Actualización: He actualizado el código. Ahora detecta si la fuente está instalada (gracias al código de Lalit) y no hace nada en caso afirmativo. Además, si el elemento a sustituir es un contenedor de enlace <A> para el evento mouseover establece la imagen con el mismo nombre acabado en ‘_hover’, simulando la pseudoclase :hover.

[Descarga: http://lab.daveruiz.net/jquery.replacefonts/jquery.replacefonts.js]