Cómo utilizar JavaScript en sitios web con diseño adaptable

En el artículo Managing JavaScript on Responsive Websites explican cómo trabajar con JavaScript cuando se emplea un diseño web adaptable o adaptativo.

Por ejemplo, ¿qué pasa si tenemos un diseño web adaptable de una página web y en una resolución tenemos un carrusel de imágenes que van cambiando, mientras que en otra resolución las imágenes se muestran en forma de rejilla? Al pasar de una resolución a otra, es decir, de un diseño al otro, habrá que activar o detener el código JavaScript que gestiona el carrusel de imágenes.

¿La solución? La librería jRespond.

¿Es lento PHP?

¿Lento o rápido? Depende de con qué se compare…

En el artículo New Year’s Benchmarks podemos encontrar el resultado de una prueba que consistía en comparar el tiempo de ejecución de diferentes frameworks de PHP: Cake, Solar, Symfony y Zend. También realizaron una prueba base en la que compararon “sólo HTML” y PHP. El resultado de esta comparación fue:

framework 1 2 3 4 5 avg
baseline-html 2613.56 2284.98 2245.98 2234.94 2261.01 2328.09
baseline-php 1717.74 1321.49 1292.86 1511.40 1327.35 1434.17

Como podemos ver, PHP supone un procesamiento que hace que el tiempo de respuesta sea significativamente menor.

Cualquiera puede realizar un experimento similar con la herramienta Apache HTTP server benchmarking tool, que suele estar disponible con cualquier instalación de Apache. Con esta herramienta podemos descubrir cuántas peticiones por segundo es capaz de responder cualquier instalación de Apache.

Por ejemplo, podemos realizar un experimento para ver qué es más rápido, escribir “¡Hola mundo!” directamente en HTML o desde PHP.

Es decir, tenemos dos páginas, una sólo contiene HTML:

<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
</head>
<body>
<p>
¡Hola mundo!
</p>
</body>
</html>

La otra contiene un pequeño fragmento de PHP:

<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
</head>
<body>
<p>
<?php
 echo "¡Hola mundo!";
?>
</p>
</body>
</html>

Los resultados de HTML estático:

Apache es capaz de devolver 2280 peticiones por segundo cuando se trata de la página con HTML estático.

Los resultados de PHP:

Apache es capaz de devolver 1439 peticiones por segundo cuando se trata de la página con código PHP.

Como podemos ver, otra vez la ejecución de una página con PHP, por poco que sea, supone una gran penalización.

Las mejores universidades de Estados Unidos también cometen errores

Acabo de encontrar la infografía Best Education Sites, en la que podemos encontrar mucha información sobre la presencial en la Web de las universidades de Estados Unidos más importantes.

Me ha llamado la atención un par de datos que ofrece sobre los errores que tienen las páginas web. La University of Phoenix, una universidad online con más de 200 centros distribuidos por todo el mundo, tiene una página principal con casi 200 errores de CSS:

Por otro lado, entre las 10 principales escuelas de ingeniería hay algunas con numerosos errores en su página principal, y destaca Caltech con 51 errores, demasiados errores para una universidad en la que enseñan a hacer cohetes espaciales:

Nota: en la infografía se indica que la fecha de realización fue el año 2011, así que las versiones actuales de estos sitios web puede ser que ya no presenten estos errores.

chtemele, un juego de mesa para aprender

A través de Twitter me han informado de que existe chtemele, el primer juego de mesa sobre HTML colaborativo y educativo. ¡Genial, qué buena idea, aprender o repasar HTML5 jugando!

Este juego es gratuito y se pueden descargar unos PDF para que cada uno se lo pueda imprimir, ya que se distribuye mediante licencia creative commons. Pero además, también es posible conseguir la versión “de verdad”, con la caja, el tablero y las cartas.

Más información en la web cHTeMeLe – le jeu de plateau certifié HTML5 (en francés).

Todo lo que quisiste saber sobre los arrays en JavaScript

¡Y no te atrevías a preguntar!

Te recomiendo la lectura de los artículos Arrays in JavaScript y What They Didn’t Tell You About ES5’s Array Extras. Te aseguró que te sorprenderás o incluso pensarás que no sabes nada sobre los arrays en JavaScript.

Y para terminar, el vídeo JavaScript: objeto Array del curso iDESWEB, en el que te cuento lo básico sobre los arrays en JavaScript:

[kml_flashembed movie=”http://www.youtube.com/v/DLX2ON9Q7Ao” width=”560″ height=”315″ wmode=”transparent” /]

Plantillas en el lado del cliente

La programación en el lado del cliente de las aplicaciones web, es decir, la programación con JavaScript en el navegador siempre ha sido poco estructurada, con poca organización. Hasta hace poco eso no era un problema, ya que se programaba poco en el lado del cliente. Si no te preocupabas por escribir “bien”, no era un problema importante.

Sin embargo, desde hace unos cinco años, debido a las “aplicaciones ricas de Internet” (Rich Internet Applications), la programación del lado del cliente ha sufrido un aumento impresionante y organizar bien el código se ha convertido en una prioridad.

En el artículo Client-Side Templating nos presentan una forma de crear plantillas en el lado del cliente y aplicar el patrón modelo, vista, controlador (model, view, controller, MVC). Sin duda alguna, una gran idea.

Mozilla Mobile OS

La fundación Mozilla está desarrollando un sistema operativo, o más bien, una plataforma de desarrollo para dispositivos móviles basada en los estándares abiertos de la Web, como HTML5, CSS3 y JavaScript.

Inicialmente llamado B2G (Boot to Gecko), y ahora conocido como Firefox OS, está previsto que se lance al mercado en enero de 2013. Según se puede leer en su página web, ya han firmado un acuerdo con Telefónica para desarrollar un proyecto conjunto: Telefónica and Mozilla pioneer first Open Web Devices.

Mensaje de error por el juego de caracteres

Últimamente no usaba mucho Mozilla Firefox, encontraba mucho más interesantes las herramientas de desarrollador de Google Chrome. Sin embargo, lo estoy empezando a redescubrir…

La consola de errores de Mozilla Firefox (versión 16.0.2) muestra el siguiente menaje de error:

La codificación de caracteres del documento HTML no ha sido declarada. El documento se mostrará con texto “basura” en algunas configuraciones de navegador si el documento contiene caracteres externos al rango US-ASCII. La codificación de caracteres de la página debe ser declarada en el documento o en el protocolo de transferencia.

¡Muy bien por Mozilla Firefox! A ver si así más gente descubre lo que es el juego de caracteres y se anima a usarlo.

Para ayudar a ello, unos vídeos que tengo sobre el juego de caracteres y sobre posibles problemas que pueden surgir:

HTML: juego de caracteres:

[kml_flashembed movie=”http://www.youtube.com/v/_MwDNB3jOx0″ width=”560″ height=”315″ wmode=”transparent” /]

 

HTML: el juego de caracteres y los editores de texto:

[kml_flashembed movie=”http://www.youtube.com/v/4vF41rQU_4Y” width=”560″ height=”315″ wmode=”transparent” /]

 

HTML: ¿migrar a un nuevo juego de caracteres?:

[kml_flashembed movie=”http://www.youtube.com/v/erNmaW-_tNM” width=”560″ height=”315″ wmode=”transparent” /]