El vídeo que debes ver hoy: Inventar por Principio

[vimeo]http://vimeo.com/36579366[/vimeo]

Quizá no sea el vídeo que deba ver todo el mundo, pero desde luego sí todo el público objetivo de este blog :-). Si alguna vez habéis intentado aprender a programar, o mejor todavía, si habéis intentado enseñar a programar es, sencillamente, imprescindible. A mí me ha dejado literalmente con la boca abierta en unas cuantas ocasiones.

Como dicen en WebMonkey (que es donde lo he encontrado):

  • La primera media hora habla de herramientas de programación y de autor y consiguen que lo que usas ahora te parezca, directamente, antediluviano. Las herramientas mostradas no están disponibles para el público y eso es un gran drama, pero el mero hecho de que se puedan hacer debería hacer que unos cuantos geniecillos se dedicaran a competir con las que se muestran en el vídeo.
  • En la segunda mitad la cosa se vuelve más filosófica y me temo que más de uno y más de dos desconectaréis. No pasa nada (aunque si os gusta mínimamente, no dejéis de ver la fantástica Al construir, otra charla de la que nos hicimos eco hace unas semanas por aquí).
  • Bret Victor, el orador, es uno de esos tipos que provocan admiración y envidia cochina a partes iguales por su talento (y su curriculum). worrydream.com, su web, da buena prueba de ello (algunos de los proyectos que muestra ya los había visto y es probable que vosotros también; de hecho, a posteriori, el estilo es bastante reconocible).

De nada :-).

Los tuitlinks de la semana (32)

Como [casi] cada semana, los mejores enlaces aparecidos por @chechar, mi cuenta en Twitter…

Los de diseño y desarrollo web

Diseñando la web móvil con HTML5 y CSS3. las diapos de la charla de @htmlboy de ayer a la que no pude ir http://j.mp/ydf52Y

a veces hay sentencias judiciales buenas… «Jury rules that Eolas’s ‘interactive web’ patent is invalid» http://j.mp/xix2vz

W3C: primer borrador de un módulo de variables para CSS http://j.mp/xbq3bi

#oldschool #cool http://j.mp/xkqD1K

Curiosos números sobre uso de la web móvil, según StatCounter: http://j.mp/wmeQME

Guía Práctica: Puntos de verificación de Pautas de Accesibilidad al Contenido Web WCAG 2.0 (via @UOCicommunity) http://j.mp/wLRmSo

Uno de seguridad

lectura obligatoria: The Perpetual, Invisible Window Into Your Gmail Inbox http://j.mp/AayjJH

De números y datos

del New York Times: The Age of Big Data http://j.mp/y8d749

imprescindible MT @adelgado @medialabprado: vídeo del taller de @malaprensa Periodismo con números para gente de letras http://bit.ly/x1oT57

#podbox: a cloud service to clean up, merge and share any data http://bit.ly/xJmLAp

«Ramji sees free data APIs as The New Open Source» http://j.mp/x4P8yQ

Y los visuales para cerrar

(Esta vez no os incrusto ninguno pero, por favor, no os perdáis el último, cómo mínimo.)

Posters minimalistas para películas Pixar :-) http://j.mp/xhue63

Cómo mola la último de la Tate Modern :-) http://j.mp/zWlIdz

¿recordáis el powers of ten de los eames? pues más… http://j.mp/x08QA3

El -webkit-problema

El que confíe, espere y desee que algún día desarrollar para la web sea una tarea fácil porque sólo hay que comprobar las cosas en un pequeño número de circunstancias debería tener en cuenta que eso ya pasó una vez: cuando Internet Explorer 6 dominaba la Tierra. Que nadie se llame a engaño: cuando Explorer 6 salió al mercado (un 27 de agosto de 2001, no ha llovido…) fue lo mejor que le podía pasar a la web en aquel momento y, cuando un par de años más tarde alcanzó una cuota de mercado del 90%, diseñadores y desarrolladores web pudieron, por primera vez, vivir tranquilos con un navegador decente (para la época). Hoy sabemos que el monocultivo IE6, de hecho, ahorró bastante trabajo a corto plazo… y tuvo tantos efectos perniciosos para la web que hoy en día renegamos de él como si nunca debiese haber pasado (con bastante razón, además).

Un panorama muy Webkit

La situación actual, a primera vista, no tiene muchos puntos en común con la de principios de siglo, pero determinadas prácticas —y, sobre todo, el advenimiento imparable de la web móvil y el cambio de panorama que supone— nos están poniendo en una situación de riesgo que gira alrededor de Webkit, el motor que mueve a Chrome y Safari, principalmente, en el escritorio, pero sobre todo a los navegadores por defecto de iOS y Android. Por poner unos números (y dibujitos) al asunto, en enero de 2011, en este modesto blog estábamos así (disculpas por el uso de tartas, se aceptan sugerencias de mejora):

Cuota de navegadores en obm. Enero de 2011. IE: 42.4, Firefox: 30.1, Webkit: 25.3

Un reparto no óptimo (sobre todo porque la cantidad de IE6 era no negligible), pero diverso. Pero si miramos el mismo reparto en los últimos 31 días, el vuelco ha sido más que notable:

Cuota de navegadores en obm. Enero de 2011. IE: 42.4, Firefox: 30.1, Webkit: 25.3

Esa brutal subida de los navegadores Webkit tiene dos vectores principales: Chrome, por sus avances tecnológicos y la pasta en publicidad que se deja Google, por un lado, y los navegadores móviles, por el otro, como ya comentábamos.

No, no estamos como en 2001 o 2002: de momento la cosa es muchísimo más diversa y, además, no podemos acusar a Google ni a Apple (ni a Adobe, que también invierte lo suyo en el desarrollo de Webkit) de las prácticas monopolísticas que usó Microsoft en su momento. En ocasiones Google juega de manera discutible, al menos en mi opinión, pero es innegable que Webkit avanza más deprisa que Firefox y Opera (Microsoft es capítulo aparte) en bastantes aspectos relevantes (no todos, pero esa es otra historia). Si a eso le sumamos el músculo económico para el marketing del que disponen y la inteligencia que demuestran en usarlo, el resultado no es precisamente de extrañar.

Y luego queda, claro, el tema de la web móvil (y para otros dispositivos, como las teles «conectadas», que cada día abundan más). Ahí el iPhone, el iPod, el iPad y todo el ecosistema Android han hecho maravillas por Webkit. Su dominio no es absoluto (de hecho, Statcounter afirma que Opera sigue siendo el navegador móvil más usado globalmente) pero sí lo es en mindshare: si alguien encarga una web y llega a preguntar por la posibilidad de consultarla desde el móvil lo más probable es que en su bolsillo haya un iPhone o, en su defecto, un móvil Android; en ambos casos, el navegador que usará para sus pruebas será Webkit.

-propiedades-avanzadas-css

Volvamos a los navegadores y su evolución. Ya hemos comentado en alguna ocasión por aquí (y no deja de ser una obviedad) que los comités son lentos. Los grupos de trabajo del W3C son incapaces de seguir el ritmo que marcan los navegadores (de hecho, tampoco es su cometido correr detrás de estos cual galgo tras liebre), especialmente en lo que respecta a los avances en la creación e implementación de nuevas propiedades CSS (ejemplos paradigmáticos: border-radius o gradient). Una vez constatado este punto, se hizo necesario establecer un mecanismo para que los diferentes motores puedan implementar nuevas características sin que todos muramos en el intento… y se llegá la [aparentemente inofensiva] idea de los prefijos de fabricante: si Webkit decide implementar border-radius experimentalmente, lo hace prefijando un -webkit-. Mozilla usa -moz-, Opera -o- y Microsoft -ms-. La idea es que, en algún momento, border-radius pasará a ser una propiedad estandarizada CSS y nos podremos olvidar de los dichosos prefijos (pensad que implementar cuatro propiedades con prefijo más la oficial es más bien incómodo…).

border-radius es un ejemplo en el que todo el mundo se pone de acuerdo más o menos rápida y eficientemente (y un caso en el que, de hecho, nos podríamos haber saltado el proceso de los prefijos). gradient es un ejemplo de lo que pasa cuando cada fabricante tiene sus propias ideas sobre cómo debería funcionar algo: si os pasáis por el Ultimate CSS Gradient Generator podréis comprobar que Microsoft usaba una sintaxis atroz para conseguirlo desde los tiempos de IE6, los Webkits usaban otra sintaxis no tan fea pero que tampoco era ninguna virguería, que Mozilla comenzó a usar una sintaxis algo más razonable con Firefox 3.6 y que, después, esta sintaxis la fueron adoptando sucesivamente Opera, Webkit a partir de una cierta versión (desde Chrome 10 y Safari 5.1), Microsoft con IE10 (el día que salga) y que ahora hasta al W3C le parece bien la sintaxis, con lo que deberíamos poder utilizarla, en los navegadores modernos, sin semejante pesadilla de prefijos…

border-radius, pues, demuestra la necesidad de este mecanismo para introducir, poco a poco, propiedades experimentales

¿Y el problema?

[Un buen trozo de lo que sigue sale, en gran parte, de Vendor Prefixes – about to go south, de Remy Sharp.]

El problema es múltiple. Resulta ser que, naturalmente, siempre hay un navegador que hace las cosas antes que los demás. Y que, además, ese navegador tiene la manía de ser Webkit y, por tanto, acostumbra a llegar al usuario con las marcas Safari y/o Chrome. Y que Firefox y Opera suelen llevar un retraso notable (a ver quién es el guapo que le aguanta el ritmo a Google + Apple + Adobe…). Y que Internet Explorer suele llegar a la fiesta cuando se ha largado hasta el personal de limpieza (estos no tienen la excusa de la falta de recursos, pero también lidian con sus problemas: si fuera por el equipo de desarrollo de IE la cosa sería diferente, pero los ciclos de Microsoft y las necesidades del soporte corporativo son un tema en el que mejor no entrar, si no es estrictamente necesario)…

En algún momento, además, las propiedades experimentales (con prefijo) deberían o bien dejar de existir porque se demuestran poco útiles o bien dejar de existir porque han pasado a ser de uso general y, por tanto, a implementarse sin prefijo. Esto es, que sí o sí, las propiedades experimentales deberían venir con fecha de caducidad, por un motivo u otro.

¿Qué pasa? Los diseñadores, natural y comprensiblemente, implementan las nuevas características que trae Webkit para mejorar sus diseños, tan pronto como les resultan útiles. No importa si uno es de la escuela hard boiled, si predica el progressive enhancement o si es fiel a la doctrina de la graceful degradation, se trata de una práctica extendida y aceptable y respetable… siempre que uno sea consciente de que se trata de propiedades experimentales. ¿Qué significa esto? Que mientras sólo Webkit tira de la propiedad, usamos -webkit-propiedad. Y al cabo de un tiempo, cuando Mozilla y Opera la implementan, añadimos las correspondientes -moz-propiedad y -o-propiedad. Si, por algún milagro, Microsoft finalmente hace lo propio antes de que llegue el W3C, añadimos la -ms-propiedad. Y cuando llega, parsimonioso como debe, el W3C, añadimos la propiedad… y con un poco de suerte, hasta vamos eliminando las propiedades con prefijo a medida que los navegadores anticuados van desapareciendo del mercado.

¿Da miedo el procedimiento del párrafo anterior? Si no miedo, como mínimo una inmensa pereza, ¿no? Si no disponemos de alguna manera automatizada de hacerlo (posibles herramientas son Prefixr o -prefix-free), y tenemos unos cuantos diseños que mantener, el trabajo es digno de Job (siempre he sospechado que Job, de hecho, era front end de profesión). El resultado es que todo el mundo (todos los buenos diseñadores, al menos) corre a implementar las -webkit-. Pero que con cada paso posterior se pierden muchos, muchísimos trabajos. Y no sólo trabajos de demostración, sino sitios en producción, que deberían dar la mejor experiencia posible a todos los usuarios, independientemente del navegador que estén usando en ese momento…

¿Es tan grave la cosa?

Depende del punto de vista, desde luego. Si eres desarrollador en Mozilla y Opera y te acabas de pasar una noche sin dormir para colar en la última release la propiedad CSS de moda, y luego resulta que la mayoría de diseños que la usan en en Webkit pasa de tu cara, tiene que doler mucho.

Pero hasta a los desarrolladores de Webkit les tiene que doler tener que mantener sus -webkit-propiedades en el código: si las quitan, sus navegadores «romperán» muchos sitios que ahora usan toda la potencia de CSS, pero al mantenerlas pierden un milisegundo por aquí, otro por allá… Poco, quizás, pero con la lucha por la velocidad entre navegadores (y la creciente complejidad de los diseños de las páginas), hasta la última centésima cuenta…

Y si eres un diseñador, el dolor de cabeza de seguir la carrera metro a metro y decidir en cada punto cuál es la menos mala de las soluciones tampoco acaba de ser el más deseable de los futuros…

La cosa ha llegado, en los últimos días, a que los no-webkit se planteen (públicamente, en las discusiones del correspondiente grupo de trabajo del W3C) dar soporte a las -webkit-propiedades en su código. Si somos benevolentes, un parche horroroso. Siendo muy estrictos, una vulneración durísima de todo el proceso de estandarización. En cualquier caso, un efecto no previsto y muy poco deseable del proceso de innovación de los navegadores… :-(

Esperemos que el curso de la cosa comience a corregirse. De otra forma, los resultados previsibles (soporte incompleto a navegadores que cumplen los estándares, código spaguetti por todos lados, ineficiencias a mansalva) van a complicar la vida de desarrolladores y usuarios. Poco a poquísimo, pero la situación se iría haciendo más y más insostenible con el tiempo.

Seguiremos informando.


Lecturas y recursos recomendados y recomendables

Los tuitlinks de la semana (31)

Ya os suena la cosa, ¿no? Los mejores enlaces aparecidos esta semana en mi cuenta de Twitter, @chechar. Esta vez la semana ha sido poco prolífica…

Los de desarrollo web

interesante: Mozilla developing Web push notification system for Firefox http://j.mp/wX8evy

el ‘customize and download’ de Bootstrap 2.0 (el framework CSS de twitter) es de ovación cerrada http://j.mp/zCwGMf

más ovaciones cerradas: las Developer Tools de Firefox siguen evolucionando http://j.mp/xhuz8f

Wireframing in Powerpoint? It Works! (UX Magazine) http://j.mp/xhqctC

Morphing particles http://j.mp/yhZb5W

2001 all over again: Internet Explorer 6 share grows (and Chrome falls) http://j.mp/zytp4e

Los de cacharritos

el iPhone representa el 75% del total de beneficios del mercado de móviles. #casiná http://j.mp/wFpZE9

twiteando en morse. pero de verdad http://j.mp/z5qZiI

Y el audiovisual…

The beautiful math behind the ugliest music (ojo: contiene Galois)

[youtube]http://www.youtube.com/watch?v=RENk9PK06AQ[/youtube]

Los tuitlinks de la semana (30, edición ‘jumbo’)

Después de un fin de semana de no recoger los mejores enlaces aparecidos por @chechar, se nos ha acumulado un poco…

Los de diseño y desarrollo web

Mon Dieu! Sir Tim Berners-Lee created the web in France, not Switzerland http://j.mp/wXxhQT

HTML5 Cross Browser Polyfills. The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks http://j.mp/wIqbvV

video.js. vídeo html con ‘fallback’ a flash http://j.mp/wWYRpu

#interfaces *muy* interesante, *muy* de acuerdo: Bring Back the Stylus! http://j.mp/wYwNKz

otro gran recurso #webdev: http://css3clickchart.com/

y otro más: docs de HTML, CSS JS y el DOM (de la MDN) y jQuery y PHP (oficiales), bien indexadas… http://dochub.io/

#infoviz Rickshaw: A JavaScript toolkit for creating interactive time series graphs http://j.mp/whPHAl

curso rápido HTML5 (HTML, CSS, etiquetas específicas, Canvas) de Microsoft, en castellano, vía @genbetadev http://j.mp/yb43S2

RT @brucel Confused about which #HTML5/CSS3/etc features to use? When to use polyfills? http://html5please.us is here to help! via @paul_irish

MUY de acuerdo #webdev #ibooks2 We need a standard zipped HTML file format http://j.mp/yClIgx

Ojo al cambio en el algoritmo… Official Google Webmaster Central Blog: Page layout algorithm improvement http://j.mp/AtnfMd

Nokia tiene un mapamundi en webgl… http://j.mp/zonds3

un repaso a las posibles alternativas para tablas HTML+CSS ‘responsive’ http://j.mp/zbCka4

http://mobilewebbestpractices.com/

Los tecnológicos

#molamazo Kinect and Windows Phone combine to create holographic game engine http://j.mp/wX1Hrf

#technostalgia Neo Geo! http://j.mp/zOUrFN

desde las primeras herramientas de cálculo hasta los ordenadores actuales, en dos minutos… http://j.mp/w2kFOA

RT @brucel RT @lturrentine: 4K of IBM memory found in my grandpa’s pole barn, captured in a 692K photo. http://bit.ly/w3BunI via @simonstl

How Google Spawned The 384-Chip Server http://j.mp/wmxN5X

Tom Bissell on the making of ‘Madden NFL’ (probablemente la mayor franquicia de videojuegos de la historia) http://j.mp/A7pnPB

#longreads Sobre el futuro de YouTube y los contenidos de vídeo para consumo ¿masivo? Streaming Dreams http://j.mp/xItUL0

Doom (el juego, sí) para calculadoras científicas. viva la ley de Moore http://j.mp/yVPA0z

Dos de visualización

arte + visualización http://j.mp/yv580A

RT @mathtourist: Visualizing Classical Music as a Roller Coaster Ride – The Atlantic http://bit.ly/zjUXvi

De propiedad intelectual…

de arte y apropiación… y los problemas que conlleva para la propiedad intelectual. en el NYT http://j.mp/A7a2YQ

Why the feds smashed Megaupload. de Ars Technica, que no es exactamente ‘pro big content’ http://j.mp/yGIp8s

Coincido prácticamente al 100%: El cierre de Megaupload en un campo que puede tener puertas http://www.error500.net/articulo/el-cierre-megaupload-en-un-campo-que-puede-tener-puertas

The Cost of Knowledge. Researchers taking a stand against Elsevier. #openaccess http://j.mp/w8GCDn

#openaccess :-) The Royal Society opens up permanently http://j.mp/wpANF4

Y el visual para cerrar

RT @esenabre Recordando esa Rapsodia Húngara nº 2 de Liszt interpretada por Tom & Jerry

[youtube]http://www.youtube.com/watch?v=QbxArVlS5tU[/youtube]