aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Ya hemos visto en muchas ocasiones técnicas para mejorar el tiempo de carga del javascript de nuestras páginas. Todas pasan por generar dinámicamente las llamadas a los scripts desde el propio Javascript, de esta forma estamos haciendo que los ficheros se carguen de forma simultánea haciendo que la carga total de la página se reduzca.

Versión HTML

(Ver Imagen)

Versión LABjs

LABjs, es una librería que nos permitirá gestionar de forma muy intuitiva permitiéndonos cargar nuestros ficheros javascript en paralelo, minimizando el tiempo de carga.

(Ver Imagen)

// HTML
<script src="framework.js"></script>
<script src="plugin.framework.js"></script>
<script src="myplugin.framework.js"></script>
<script src="init.js"></script>

// LABjs
$LAB
.script("framework.js").wait()
.script("plugin.framework.js")
.script("myplugin.framework.js").wait()
.script("init.js");

Como podemos ver, disponemos de una serie de métodos que nos permitirán gestionar la carga de ficheros, haciendo que unos carguen después para que las dependencias estén cargadas a la hora de usarse.

Metodos de la API

• $LAB.setGlobalDefaults():Método que nos permite definir los valores por defecto para la carga de ficheros.
• $LAB.setOptions(): Indicamos opciones que serán pasadas en la cadena de carga.
• $LAB.script(): Método usado para cargar los ficheros Javascript, permite encadenar varios.
• $LAB.wait(): Método que detiene la ejecución y que permite ejecutar una funcionalidad (o cargar otro fichero).

Bueno, como algunos habrán visto, he comenzado a usar comentarios anidados (solo un nivel) en el blog. Yo creo que puede ayudar a comprender ciertas conversaciones ya que la profundidad no es muy alta y permite seguir las conversaciones surgidas en un hilo.

Pero sois vosotros los que decidis, así que ¿que os parece?

Jaipho, nos permite crear una galería de imágenes ideal para los dispositivos iPhone.

(Ver Imagen)

La apariencia, muy similar a la galería del propio iPhone, nos permite visualizar muy fácilmente esas imágenes que queremos mostrar al mundo.

Demo / Descargar / Manual de instalación

Este artículo llevaba ya más de un año entre los borradores, pero creo interesante darle salida. Así que es muy probable que este artículo te aburra, lo siento.

Una de las buenas prácticas de Javascript es el uso de eventos para separar la estructura de la funcionalidad, en ella especificamos la funcionalidad que los elementos indicados deberán ejecutar al ser accionados.

Este uso de eventos, puede ser tratado de dos formas:

• Gestión de eventos
• Delegación de eventos

Ambas ofrecen el mismo resultado, aunque, como veremos una es más óptima que otra a la hora de gestionar grandes cantidades de elementos.

Para enteder las diferencias entre ellas, mejor ver unos ejemplos y luego los comentamos.

HTML

<ul id="nav">
 <li><a href="#hola">Hola</a></li>
 <li><a href="#hola2">Hola2</a></li>
 <li><a href="#hola3">Hola3</a></li>
 <li><a href="#hola4">Hola4</a></li>
 <li><a href="#hola5">Hola5</a></li>
</ul>

Gestión de eventos

<script type="text/javascript">
   var nav = document.getElementById("nav");
   var as = nav.getElementsByTagName("a");
   for (var x = 0; x < as.length; x++) {
     as[x].onclick = function(){
        alert(this.innerHTML);
     }
   }
</script>

Como vemos esta técnica se basa en asociar un evento a cada link del listado #nav. Esto nos hace tener que recorrer todos los enlaces que encontramos dentro del listado y asociarle el evento.

Delegación de eventos

<script type="text/javascript">
   var nav = document.getElementById("nav");
   nav.onclick = function(e){
      var e = e || window.event; // Obtenemos el evento
      var el = e.target || e.srcElement; // Obtenemos el elemento que lanza el evento
      alert(el.innerHTML);
   }
</script>

Con esta opción delegamos al elemento #nav la tarea de decidir que elemento se está ejecutando y la tarea asociada a ellos. Esto es posible gracias al orden de ejecución de eventos sobre varios elementos.

Rendimiento

He hecho una serie de pruebas, sobre este mismo código, añadiendo 300/900 y 5000 elementos.

Tenemos que partir de dos mediciones a tener en cuenta:

• Tiempo en aplicar los eventos
• Tiempo en ejecutar el evento

A simple vista ya podemos conocer el resultado, la primera opción se vé penalizada por tener que aplicar a cada elemento del listado la funcionalidad, pero una vez hecho esto, la ejecución rápida y simple, ya que está asociada al elemento.

Por otro lado, la segunda opción es mucho más rápida a la hora de asociar la funcionalidad al elemento ya que siempre, sin importar el número de subelementos haya,  será un único elemento al que asociar. Pero por otro lado nos encontramos con que la ejecución de la funcionalidad debe detectar el elemento y despues la funcionalidad asociada.

Conclusiones

Como siempre digo, no es una forma mejor que otra, son diferentes formas que al conocerlas nos permitirá decidir cual es la que más se ajusta a las necesidades de cada proyecto.

Más información

1. Javascript Event Delegation is Easier than you think
2. Javascript Event Delegation and Event Handlers
3. Event Delegation with jQuery
4. Event Delegation made Easy
5. Event Delegation with javascript

IEBlog publica un artículo para acercarnos Internet Explorer 9 (o lo que pretenden que sea) a los desarrolladores. Son conscientes de que el navegador necesita un cambio, y principalmente de imagen ya que entre los desarrolladores no podría tener peor fama.

(Ver Imagen)

Para hacer frente a las nuevas aplicaciones web, cargadas de Javascript, IE8 mejoró algo el tiempo de proceso frente a los resultados obtenidos por su versión anterior, como vemos en la imagen.

Por otro lado, el más importante, la adopción de estándares asoma un triste 32/100 en los resultados actuales de Acid3 con la versión de desarrollo, que aunque se trata de un resultado muy inferior a sus contrincantes (que hace ya tiempo lo pasaron al 100%), nos permite vislumbrar una pequeña mejoría que quiero coger con ilusión 😀

(Ver Imagen)

Como vemos en la imagen, border-radius pasará a formar parte de las nuevas funcionalidades disponibles en esta última versión que junto a los selectores CSS3 y el almacenamiento DOM hará que IE9 parezca hasta un navegador 😀

Una de las nuevas funcionalidades que nos encontraremos en WordPress 2.9 es el llamado post-image, que como ya hemos explicado previamente se trata de un sistema que nos permite asociar a un post una imagen y poder usarla en un theme.

Justin Tadlock muestra un completo artículo mostrando como hacer uso de esta funcionalidad.

1) Permitir la funcionalidad

Como vimos en el post de las nuevas funcionalidades de WordPress 2.9, el theme iba a coger algo de relevancia permitiendo activar/desactivar funcionalidades de WordPress desde el fichero functions.php.

Esta capacidad nos permitirá activar esta funcionalidad añadiendo un simple línea a nuestro theme:

add_theme_support( 'post-thumbnails' );

Esta línea, nos activará la funcionalidad de post-image en nuestro WordPress, permitiendo que podamos ver un box más en nuestra página de «Nueva Entrada».

(Ver Imagen)

Allí podremos seleccionar una imagen que será asociada al post.

2) Usar la funcionalidad

Una vez asociada la imagen, ya solo nos queda hacer que nuestro theme muestre la imagen donde queramos. Para ello tenemos una serie de funciones que debemos conocer:

the_post_image($size)

Esta función nos permite mostrar la imagen en el punto en el que la llamamos, requiere estar incluida dentro del Loop para funcionar.

<?php while( have_posts() ) : the_post(); ?>
 <div>
 <h1><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h1>
 <?php the_post_image() ?>
 <?php the_content() ?>
</div>
<?php endif; ?>

Podemos usarla con un parámetro para especificar el tamaño de la imagen que queremos mostrar:

• thumbnail
• medium
• full

Todas hacen referencia a la configuración de imagenes del apartado Opciones > Media de nuestro panel de control.

has_post_image()

Para comprobar si un post tiene asociada una imagen deberemos usar has_post_image() que nos devolverá true o false.

<?php
	if ( has_post_image() )
		the_post_image( 'thumbnail' );
	else
		echo '<img src="default-image.png" alt="Example Image" title="Example" />';
?>

get_post_image_id()

Si necesitamos obtener el ID de la imagen podremos hacer uso de esta función que nos devolverá el ID.

$image_id = get_post_image_id();

get_the_post_image( $id, $size )

Si necesitamos obtener la imagen de un post fuera del Loop podemos acceder directamente a ella indicándole el ID del post y el tamaño de la imagen que necesitamos.

$image = get_the_post_image( $post->ID, 'thumbnail' );

3) Filtros y actions

Además de las funciones que nos permiten trabajar cómodamente con la imágen asociada, tenemos una serie de filtros que nos permiten personalizar más aún la funcionalidad y obtener resultados de lo más dispares.

//Filters
 - post_image_size
 - post_image_html
// Actions
 - begin_fetch_post_image_html
 - end_fetch_post_image_html

Veamos un ejemplo de Justin nos muestra con el que podemos cambiar el HTML de salida de la imagen que vamos a mostrar.

add_filter( 'post_image_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id );
	$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
	return $html;

}

Se trata de una gran funcionalidad, que muchos desarrolladores de themes estarán deseando usar en sus creaciones.

TimeFrame es un selector de fechas múltiple desarrollado con Prototype.

(Ver Imagen)

El script nos permite configurar los aspectos básicos de un selector de fechas y además nos permite usar el formato de fechas similar al usado por DateJS.

<script type="text/javascript" charset="utf-8">
      //<![CDATA[
        new Timeframe('calendars', {
          startField: 'start',
          endField: 'end',
          earliest: new Date(),
          resetButton: 'reset' });
      //]]>
</script>

Parámetros

Como vemos en el ejemplo anterior, el primer parámetro hace referencia al ID del elemento que usaremos para alojar el calendario y el segúndo parámetro se trata de un objeto con una serie de opciones que especificarán el aspecto que ha de tener el selector.

months

Número de meses que mostramos (default: 2).

format

Formato para las fechas en los elementos <input /> (default: %b %d, %Y)

weekOffset

Fecha de inicio de la semana (usa 1 para empezar la semana en Lunes).

startField, endField

Declara un rango de inicio y fin. (por defecto lo genera automáticamente)

previousButton, todayButton, nextButton, resetButton

Declara los botones de navegación (por defecto lo genera automáticamente)

earliest, latest

Permite espeficiar los rangos de fechas anteriores o posteriores que no podrán ser seleccionadas

maxRange

Limita el máximo de días a la vez

Demo y Descarga

Si lo quieres ver funcionando o descargarlo para probarlo en tu local puedes hacerlo aquí.