Contenido

Opera Mobile 10 y Opera Widgets Mobile en nuestros escritorios

24 abr

+ 13

Hace un par de días, Opera anunciaba los emuladores de Opera Mobile 10 y de Opera Widgets Movil para poder usarlos sobre nuestros escritorios Windows, Linux y Mac. Estos emuladores, nos sirven para desarrollar nuestras aplicaciones móviles más cómodamente y poder testear como se verán estas en cualquier dispositivo móvil que disponga de esta versión de Opera.

2-multiple-opera-mobile-10s
(Ver Imagen)

Las herramientas, cumplen perfectamente su misión y nos muestran como se verán nuestras aplicaciones en este navegador. Además, para los desarrolladores podremos usar Dragonfly con esta versión y así depurar nuestras aplicaciones antes de subirlas a Internet. Una gran noticia para todos los desarrolladores web.

Un vistazo al futuro: IE9 Developer Tools, la pestaña de red

23 abr

+ 11

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.

NetworkTab_3
(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.

NetworkTab_5
(Ver Imagen)

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

Notificaciones de escritorio con WebKit

22 abr

+ 13

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

Picture 4
(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

Nuevas imágenes de Mozilla Firefox 4.0

21 abr

+ 19

Paul Rouget publica un tweet mostrando nuevas imágenes de Firefox 4.0. Échales un vistazo y juzga tu mismo, personalmente me está gustando mucho el aspecto que le están dando al navegador.

Drag&Drop desde el escritorio para Gmail

16 abr

+ 11

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.

attachments2
(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.

Inyección de código en WordPress 2.9.2+

15 abr

+ 3

Via AyudaWordpress nos llega una noticia sobre otro fallo de WordPress detectado y que afecta a la versión 2.9.2 y superiores. Se trata de una inyección de código producida por un problema de permisos que Fernando ha podido detectar en varios sitios. Además, nos muestra un detallado de listado de acciones para limpiar nuestro WordPress.

Google Chrome apunto de pasar HTML5 Test

15 abr

+ 26

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.

HTML5testChrome
(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 —>

[Corregido] Ejecutando procesos en paralelo con Javascript

14 abr

+ 14

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 —>

Añade soporte CSS3 a Internet Explorer 6, 7 y 8

12 abr

+ 34

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.

El patrón de actualización de los diferentes navegadores

10 abr

+ 11

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
4499455073_a729acd621_o
(Ver Imagen)
Internet Explorer
4499455005_4d140b4b25_o
(Ver Imagen)
Opera
4499455143_1437437ea3_o
(Ver Imagen)
Firefox
4500089918_60fc86f821_o
(Ver Imagen)
Safari
4500089984_e2671e415b_o
(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