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

Internet Explorer 9 está a la vuelta de la esquina, y su llegada defraudará a muchos por la escasa adopción de estándares y animará a otros con nuevas funcionalidades y herramientas que nos permitirán desarrollar para él con más comodidad.

Una de estas herramientas es la ya conocida Developer Tools para Internet Explorer, que en esta nueva versión para Internet Explorer 9 dispondrá de una pestaña de red que nos mostrará información relacionada a las conexiones realizadas en nuestra aplicación web.

(Ver Imagen)

La posibilidad de capturar las peticiones entrantes y salientes de nuestras aplicaciones web (imágenes, CSS, Ajax,…) pudiendo ver detalles interesantes sobre cada petición.

(Ver Imagen)

Osea, básicamente lo mismo que hacemos con Firebug, Web Inspector, Dragonfly en su respectivo navegador.

Las últimas versiones de WebKit integran una característica realmente interesante. La capacidad de enviar notificaciones al escritorio desde una aplicación web.

(Ver Imagen)

Estas notificaciones están disponibles mediante Javascript y nos permiten informar al usuario de que algún proceso en la página web ha terminado o se requiere cierta atención sobre ella.

function Notifier() {}

// Devuelve "true" si el navegador dispone del soporte
Notifier.prototype.HasSupport = function() {
  retun (window.webkitNotifications);
}

// Petición de permisos para enviar notificaciones desde esa URL.
Notifier.prototype.RequestPermission = function(cb) {
  window.webkitNotifications.requestPermission(function() {
    if (cb) { cb(window.webkitNotifications.checkPermission() == 0); }
  });
}

// Mostramos la notificación indicando icono, título y cuerpo
Notifier.prototype.Notify = function(icon, title, body) {
  if (window.webkitNotifications.checkPermission() == 0) {
    var popup = window.webkitNotifications.createNotification(
      icon, title, body);
    popup.show();
    return true;
  }
  return false;
}

Podemos ver un ejemplo funcionando (desde Chrome o versiones de Webkit más modernas)  (código fuente).

Me suena haber leído algo acerca de una propuesta de estándar para cambiar los odiosos alert() que te llevan a la página que lo provoca automáticamente. Algo realmente molesto. Pero no encuentro donde lo leí, así que si alguien sabe de lo que hablo agradecería me hicieran llegar el artículo.

Via

Hace ya unos meses vimos una implementación para Firefox 3.6 que permita subir ficheros a una página simplemente arrastrándolos desde el escritorio. Ahora gMail, añade esta funcionalidad para los usuarios de Google Chrome y Firefox 3.6+ y en breve en los demás navegadores.

(Ver Imagen)

Realmente se trata de un sistema muy interesante y cómodo. Estoy deseando que sitios como Flickr o Youtube, se adapten a estas nuevas funcionalidades.

HTML5Test es el nuevo test de referencia para los navegadores web. Similar a Acid 3 Test, pero enfocado a las nuevas funcionalidades HTML5, este test nos permite ubicar la estandarizacion de un navegador mediante un valor numérico y así comparar entre ellos.

(Ver Imagen)

Actualmente, Google Chrome es el navegador que más funcionalidades HTML5 ha implementado, lo que hace que se coloque a la cabeza con un 86% de la implementación.

Continua —>

Actualizo (08:00):

El sistema usado en el ejemplo que croczilla.com publica, está desarrollado usando Stratified Javascript (SJS), una implemenetación de Javascript con Javascript O.o. Se trata de una librería multinavegador que nos permite añadir concurrencia a Javascript fácilmente.

La clave está en el uso de tags <script /> de un tipo diferente al que conocemos como text/javascript, usando uno propio se encarga de evaluar el código contenido en él añadiendo una serie de funcionalidades como hold(),resume(), suspend() y la posibilidad de usar concurrencia en Javascript.

Ejemplo

<script type="text/javascript" src="sjs-loader.js"></script>
<script type="text/sjs">
….
function animate(elemname, duration_ms, step_ms) {
 var elem = document.getElementById(elemname);
 var start_time = new Date();
 var x = 0;
 do {
 elem.style.left = x;
 x = (x + 10) % 200;
 hold(step_ms); // Parando la ejecución
 } while (duration_ms > new Date() - start_time);
 }

 function par(a, b) {
 alert("all done");
 }
 // Procesos paralelos
 par(animate("animated_element_1", 10000, 100),
 animate("animated_element_2", 7000, 80));
…
</script>

Como podemos ver, en esta porción de código sacada de una demo de crockzilla.com, usamos hold() para detender la ejecución y usamos el paso de parámetros para comenzar la concurrencia de procesos.

Continua —>

Internet Explorer 6, 7 e incluso la versión 8, aún no soporta ciertas características del estándar CSS3. Para ello, generalmente tenemos que hacer uso de hacks o  soluciones poco recomendadas como generar una serie de capas para simular una sombra o un borde redondeado.

Una solución muy limpia es la de importar mediante behavior() un fichero .htc que nos añadirá al navegador (IE6,7,8) algunas de las características que cualquier otro navegador ya podemos disfrutar.

.box {
 -moz-border-radius: 15px; /* Firefox */
 -webkit-border-radius: 15px; /* Safari and Chrome */
 border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

 -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
 -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
 box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

 behavior: url(ie-css3.htc); /* Activamos el soporte para IE */
}

Como podemos ver, añadimos la llamada behavior() a la especificación de la clase .box. Esto hará que Internet Explorer 6+ use la especificación CSS3 (osea la versión sin prefijos) aplicando los estilos deseados. Para ello usará estándares de Internet Explorer disponibles únicamente para estos navegadores. Simplemente tendremos que descargar el fichero .htc y usarlo como vemos en el ejemplo anterior.

Uno de los principales problemas que nos encontramos los desarrolladores web son las incontables versiones de un mismo navegador que podemos encontrar por internet. Generalmente con la llegada de una nueva actualización (de cualquier navegador) se incluyen mejoras que nos acercan, poco a poco, a los estándares web. Por ese motivo, que estas actualizaciones se produzcan en el menor tiempo posible nos favorece a muchísimo.

La gente de Pingdom ha realizado un estudio, cogiendo los datos de las diferentes versiones de cada navegador y han realizado una gráfica que a lo largo del tiempo muestra como se han ido actualizando cada uno de ellos y como los usuarios finales se han ido actualizando a ellas.

Google Chrome (Ver Imagen)	Internet Explorer (Ver Imagen)
Opera (Ver Imagen)	Firefox (Ver Imagen)
Safari (Ver Imagen)

A primera vista, vemos que tanto el sistema de actualización de Google Chrome como el de Safari funcionan bastante bien (generalmente por que es «automático» y trasparente) y consigue que el menor número de versiones convivan al mismo tiempo. Por otro lado, vemos el sistema de Internet Explorer y Mozilla Firefox, que a estas alturas tenemos 3 versiones disponibles con un share tan alto que no podemos olvidarnos de ninguna de ellas.

Debemos conocer al enemigo para poder atacarle mejor en la batalla del día a día 😉

Via