¿Los Sitios Web necesitan experimentarse igual en todos los Navegadores?

Muchos diseñadores web se esfuerzan en que sus proyectos se vean igual y tengan la misma experiencia de usuario en todos los navegadores web. Pero… ¿es realmente necesario? Vamos a hacerle esta pregunta al sitio dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

Ahí tienen la respuesta :-)

Sobre el curioso sitio

Cuando entras al curioso sitio con el extremadamente largo nombre de dominio, verás la respuesta “Nope” de una manera estándar en todos los navegadores, pero cuando pasas el mouse por encima (hover), se visualizan una serie de efectos creados gracias a la magia de las propiedades, transiciones y transformaciones CSS3, efectos que tendrán una experiencia diferente en cada navegador.

El enlace lo descubrí en el fantástico libro CSS3 for Web Designers de Dan Cederholm.

Share

Procesando Video en Tiempo Real con HTML5 y JavaScript

Gracias a un retweet de Dion Almaer, me entero de este fantástico experimento. Se trata del procesamiento en tiempo real de un video de Tron, usando HTML5 Video + Canvas + JavaScript + CSS3.

HTML5 Tron

¡Quiero verlo funcionando! ¿Dónde entro?

Pueden entrar usando el enlace original barbafan.de/html5video?video=tron, o bien, el enlace corto bit.ly/html5tron

¡Está genial! ¿Y cómo funciona?

El video bajo HTML5 se renderiza cada 33 milisegundos (30 cuadros por segundo), dentro de un elemento canvas oculto. La información de los pixeles en dicho canvas es obtenida y transformada via JavaScript y escrita nuevamente en el canvas. Las transformaciones CSS3 son manipuladas dinámica e interactivamente mediante JavaScript.

Notas Finales

El autor advierte que el experimento usará muchos recursos de tu microprocesador… pero la verdad, ¡vale la pena disfrutar de tan geek experimento!

Share

CSS3 Walking Man ¡Asombroso Experimento!

Hace mucho que un experimento no me asombraba tanto; les presento al increíble “CSS3 Walking Man” de Andrew Hoyer, una animación creada usando solo CSS3, ¡sin una línea de JavaScript!

Odio la imagen previa, pues es estática, así que háganse un favor, y entren al asombroso experimento (necesitan un navegador web basado en Webkit, o sea, Chromium, Google Chrome, Safari, etc), para luego examinar cómo fue realizado.

Via CSS Tricks.

Share

Ultimate CSS Gradient Generator

He visto diversas herramientas online que hacen prácticamente lo mismo, pero Ultimate CSS Gradient Generator me ha llamado gratamente la atención, debido a su parecido con el generador de gradientes de Adobe Photoshop.

Ultimate CSS Gradient Generator

Ahora ya no tienes pretextos para no usar gradientes nativos con CSS3 y olvidarte definitivamente de usar imágenes con el mismo efecto como fondos de tus elementos HTML, ya que de manera visual creas el gradiente, y la herramienta genera el código compatible para los navegadores web de primer nivel (Firefox, Chrome, etc) con un gradiente simple como fallback para el odioso Internet Explorer.

Por cierto, Ultimate CSS Gradient Generator fué creado por Alex Sirota, autor de la extensión ColorZilla para Firefox, uno de mis addons favoritos en el navegador de Mozilla.

Enlace: Ultimate CSS Gradient Generator .

Via Blog Freakz.

Share

Firefox 4 Beta 2 disponible

Los de Mozilla no descansan, y a sólo tres semanas de haber liberado la primera beta, hoy ya tenemos disponible Firefox 4 Beta 2.

Firefox 4 Beta 2

¿Novedades? Podemos observarlas en la imagen anterior:

  • Ya se encuentra disponible en 23 lenguajes (incluyendo el español).
  • Las pestañas (tabs) ahora pueden fijarse como pestañas de aplicación (app tabs); esto se logra haciendo click secundario a la pestaña y en el menú conextual seleccionar “Transformar en pestaña de aplicación”
  • Y algo interesante para desarrolladores, es que ya soporta transiciones y transformaciones CSS3 (escalado, traslación y rotación). Ejemplo al final del artículo.

Si no las conoces, te recomendamos leer la lista completa de novedades de Firefox 4.

Descarga Directa de Firefox 4 Beta 2

Es importante señalar que se trata de una versión de prueba, la cual posiblemente tendrá errores (bugs) y muchas extensiones (addons) no funcionarán, por lo que no se recomienda su uso a nivel producción (la última versión estable, al momento de escribir este artículo, es Firefox 3.6.8).

Si deseas probar esta segunda beta, puedes entrar a la página oficial de descargas, o bien, usar los siguientes enlaces de descarga directa.

Instalar Firefox 4 Beta 2 desde Repositorios en Linux

En Linux, es muy sencillo instalar Firefox 4 Beta 2 desde repositorios; aquí algunos de ellos.

Ubuntu

$ sudo add-apt-repository ppa:ubuntu-mozilla-daily/ppa
$ sudo apt-get update
$ sudo apt-get install firefox-4.0

ArchLinux

$ yaourt -Sy firefox-nightly

Fedora

$ sudo rpm -Uvh http://rpms.famillecollet.com/remi-release-13.rpm
$ sudo yum --enablerepo=remi install firefox4

El Rincón del Desarrollador Web

En el siguiente código CSS de ejemplo, podemos observar el uso conjunto de transiciones y transformaciones CSS3.

#caja {
  background-color: yellow;
  color: black;
  transition-duration: 1s;
  transform: rotate(10deg);
  -moz-transition-duration: 1s;
  -moz-transform: rotate(10deg);
  -webkit-transition-duration: 1s;
  -webkit-transform: rotate(10deg);
  -o-transition-duration: 1s;
  -o-transform: rotate(10deg);
}
 
#caja:hover {
  background-color: red;
  color: white;
  transform:  rotate(350deg) scale(1.4) rotate(-30deg);
  -moz-transform:  rotate(350deg) scale(1.4) rotate(-30deg);
  -webkit-transform:  rotate(350deg) scale(1.4) rotate(-30deg);
  -o-transform:  rotate(350deg) scale(1.4) rotate(-30deg);
}

Se agregaron las propiedades con los prefijos propios del resto de los navegadores de primer nivel (-moz para Firefox, -webkit para Safari y Chrome, -o para Opera).

Fuentes: The Mozilla Blog, Mozilla Hacks.

Share

CSS3 Pie – Habilita Propiedades CSS3 en Internet Explorer

CSS3 Pie LogoCSS3 Pie es una interesante utilería para desarrolladores web, pues permite que Internet Explorer 6 a 8 sea capaz de renderizar correctamente las propiedades decorativas más utilizadas de CSS3.

¿Cómo funciona PIE (Progressive Internet Explorer)? Se trata de un archivo de comportamiento para IE (con extensión .htc) que debemos incluir en el elemento donde queramos aplicar las propiedades CSS3.

CSS3 Pie Demo

Por ejemplo, veamos el siguiente fragmento de código.

#elemento {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

Lo anterior funcionará perfectamente en los navegadores web de primer nivel (como Firefox y Chrome), pero no en Internet Explorer… para obligar a IE a reconocer los bordes redondeados, usaríamos:

#elemento {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    behavior: url(PIE.htc);
}

Así de sencillo. Obviamente, debemos descargar el archivo PIE.htc.

CSS3 Pie por el momento sólo funciona con algunas propiedades CSS3, como border-radius, box-shadow y border-image. Les recomendamos leer la documentación oficial para mayor información.

Via Web Resources Depot.

Share

Generador Automático de Código CSS3

Si ya conoces las bases de CSS, pero aún no dominas las nuevas características de CSS3, la herramienta CSS3 Generator es una buena opción para comenzar.

CSS3 Generator

Basta con seleccionar la característica que deseas implementar, y escribir algunos valores para ver una vista preliminar del resultado. CSS3 Generator incluso nos dirá en qué navegadores web es compatible dicha característica.

El código generado, pueden copiarlo y pegarlo directamente en cualquier archivo CSS de sus proyectos web.

Enlace: CSS3 Generator

Share

Amar a HTML5 y CSS3 es odiar a Internet Explorer

IE BasuraSin lugar a dudas, HTML5 y CSS3 han llegado para facilitarle la vida a los diseñadores y desarrolladores web, lo cual conlleva una mejor experiencia del usuario final.

Con HTML5 podemos insertar audio y video en nuestras páginas sin necesidad de plugins de terceros (como Flash), generar gráficas y textos dinámicos a través del manejo de canvas, implementar en esquema más claro a través de sus nuevas etiquetas (header, nav, section, footer, etc), entre otras cosas.

Con CSS3 podemos crear diseños web asombrosos incluso sin la necesidad de recurrir a imágenes, gracias a sus esquinas redondeadas, sombras para textos y bloques, degradados de colores, inclusión de fuentes (tipos de letras) no estándares, entre otros muchos beneficios.

Con tanta belleza tenía que existir un “pero“… y se llama Internet Explorer. Y no sólo me refiero al mundialmente odiado IE6, si no también a IE7 e IE8.

En el estupendo sitio “When can I use…” nos ofrece un análisis detallado de todas y cada una de las características de HTML5 y CSS3 en los navegadores web más populares, en sus versiones pasadas, presentes, e incluso futuras. La siguiente tabla es el resumen global de dicha comparación; en cada celda podemos observar el número de versión del navegador web, junto al porcentaje de características HTML5 y CSS3 soportados; los colores hablan por si mismos.

Tabla comparativa de Navegadores

Como referencia, las versiones estables actuales de cada navegador son: Internet Explorer 8.0, Firefox 3.5 (a pocos días de la liberación de Firefox 3.6), Safari 4, Chrome 3.0 y Opera 10.10.

Enseguida nos damos cuenta que Firefox, Chrome y Safari son los que mejor soportan a HTML5 y CSS3, mientras que Internet Explorer literalmente está para llorar. En el caso de Opera, es una tristeza que siendo un buen navegador tenga un soporte tan mediocre.

¿La tabla anterior les parece demasiado genérica? Ok, veamos a profundidad qué características de HTML5 y CSS3 soportan los navegadores estables actuales.

Firefox 3.5

Firefox 3.5

Aquí es justo mencionar que Firefox 3.6 (actualmente en Beta 4, cuya versión final debe ser liberada este mes) ya ofrece soporte para más características de CSS3, como los gradientes y fondos múltiples.

Chrome 3

Chrome 3

Safari 4

Safari 4

Opera 10

Opera 10

Internet Explorer 6, 7 y 8

Internet Explorer

Las imágenes anteriores fueron elaboradas por Deep Blue Sky, usando su estupenda librería Modernizr, a través de FindmebyIP, donde tú mismo puedes verificar qué características de HTML5 y CSS3 soporta tu navegador web.

¿Lo malo? La gran mayoría de usuarios sigue usando Internet Explorer… ¿lo peor? Microsoft no ha ofrecido grandes expectativas para soportar decentemente HTML5 y CSS3 en el próximo IE9. ¿Qué podemos hacer nosotros como desarrolladores y diseñadores web? ¡dejar de dar soporte a IE! Así de sencillo, pues si seguimos haciéndolo, jamás los usuarios se sentirán obligados a migrar a un navegador web de calidad.

Por el lado dónde lo quieran observar, amar a HTML5 y CSS3 es odiar a Internet Explorer.

Share

Firefox 3.1 Beta 2 Liberado

FirefoxYa está con nosotros la Beta 2 de Firefox 3.1 (la versión final llegará comenzando el 2009). Esta versión tiene varias novedades, las más importantes son:

  • Disponible en 54 lenguajes (obviamente, el español incluido).
  • ¡La tan esperada navegación privada llegó! También se le conoce como “modo porno”.
  • El motor de JavaScript TraceMonkey habilitado por defecto (esto es lo mejor de esta versión).
  • Mejoras en el motor de renderizado Gecko (el corazón de Firefox).
  • Soporte para los nuevos tags <audio> y <video>CSS3 se hace presente!).
  • Soporte para transformaciones SVG.

No olviden que es una versión beta, por lo que puede tener bugs, así que si desean usarla, es mejor instalarlo a la par de nuestra versión de Firefox 3.0, no realizar el reemplazo. Esto me hace pensar, que este tipo de instalación en “paralelo” no es conocida por la mayoría de los usuarios de Firefox… sería interesante preparar un tutorial al respecto. ¡Espérenlo!

Enlaces:

Share

Firefox 3.0 – A la Conquista del Guinness

Dando seguimiento a las descargas de Firefox 3, podemos decir que es prácticamente un hecho, por dos motivos: el primero, no existe un récord anterior con el cual hacer competencia; el segundo, es que la meta trazada por los chicos de Mozilla era de 5 millones (Firefox 2 tuvo 1.6 millones de descargas el día de su liberación), y en el momento en que estoy escribiendo estas líneas, el contador acaba de alcanzar los ¡¡¡7 millones de descargas!!!, y eso que aún quedan aproximadamente 3 horas para que finalice el plazo. ¿Quieren saber cómo va la cuenta? Pueden checar el contador de descargas oficial, el cual se actualiza en tiempo real. Así mismo, pueden checar el mapa de descargas.

De todas formas, apenas sea oficial, ya lo publicaré en otro post. Por mientras, puedes personalizar y descargar el certificado de agradecimiento por haber descargado Firefox 3. Aquí tienen el mío como muestra (denle click a la imagen para descargar el de ustedes).

Firefox 3 Gracias

Por cierto, con motivo de la celebración del lanzamiento de Firefox 3, se ha realizado un lavado de cara al sitio de Mozilla y a su Blog, así que los invito a visitarlos.

Otra novedad, es el lanzamiento de Firefox 3.0 Portable, gracias a los chicos de PortableApps. Nay que recordar que dicha aplicación es compatible sólo para Windows.

¿Otra novedad? ¡Claro! Los inteligentes chicos de Ubuntu, ¡ya pusieron Firefox 3.0 en los repositorios oficiales! Por lo tanto, si eres usuario de Ubuntu, ya habrás recibido la notificación para actualizar Firefox. Si no, usa apt-get o Synaptic para actualizarlo.

Hace un mes, publiqué las novedades para usuarios de Firefox 3; ahora quisiera hacer un repaso de las bondades de Firefox 3 para los desarrolladores web:

  • Está basado en el motor de renderizado Gecko 1.9, lo cual significa estabilidad y velocidad.
  • Mejoras en la compatibilidad con JavaScript 2 y mejor soporte con aplicaciones XUL.
  • Aún no hay soporte completo para HTML 5 y CSS 3. Recordemos que ambos aún son  considerados “Working Draft” por la W3C, por lo que XHTML 1.0 y CSS 2.1 siguen siendo los recomendaciones del Consorcio.
  • Lee, interpreta y renderiza el código HTML más rápido que nunca.
  • Pasa de manera excelente la prueba del Acid 2, y ha mejorado considerablemente la del Acid 3.
  • Visualiza fuentes complejas y gráficos mucho mejor que Firefox 2.
  • Compatibilidad mejorada con SVG.
  • Mejor soporte a navegación fuera de línea (offline).
  • Pronto podremos disfrutar de las bondades de Firefox 3.1, programado para finales de año (ya se puede descargar la versión alpha), el cual contará con mejor soporte para CSS 3 e integración nativa con XHR (XMLHttpRequest), para una mejor ejecución de AJAX.

Sin duda, Firefox está causando una revolución, y cada día que pasa los usuarios de todas partes del mundo se están dando cuenta de la enorme necesidad de usar un navegador más seguro, rápido y confiable, y en Firefox están encontrando lo que otros navegadores (léase Internet Explorer) jamás les habían ofrecido. ¡Hurra por Firefox! :-D

Actualización [13:15 hrs CST]

Las descargas ya rebasaron los 8 millones. Conforme se acerca el final del periodo de 24 horas, la gente se está poniendo las pilas y la “velocidad” de descargas en este momento oscila entre 10,000 y 12,000 descargas por minuto… verdaderamente sorprendente :-)

Actualización [13:20 hrs CST]

Más tardé en escribir la actualización previa, en que fuera declarado concluido el periodo de 24 horas. El resultado final: 8.2 millones de descargas de Firefox 3.0 (el número exacto no ha sido mencionado oficialmente). Ahora sólo falta que la gente de Guinness hagan el comunicado oficial del récord, lo cual puede demorar algunos días. Apenas tenga el dato, lo publicaré en este Blog. ¡Gracias a todos por participar! :-D

Share