20 años de W3C

El World Wide Web Consortium (o W3C para los amigos) cumple hoy 20 años. Dicho consorcio se encarga de elaborar las recomendaciones para los estándares en el mundo de la web.

Fue fundado, y todavía es dirigido, por Tim Berners-Lee en el MIT tal día como hoy en 1994, con colaboración de la Comisión Europea y el conglomerado militar estadounidense DARPA (lo cual siempre ha generado bastante recelo por los orwellianos proyectos de esta agencia). Desde entonces han trabajado por mantener una versión standar de HTML y otras tecnologías web, a pesar de los intentos de varios compañías de intentar imponer su modelo (principalmente Microsoft). El lenguaje HTML fue desarrollado por Berners-Lee en el CERN, organismo que también decidió que la World Wide Web debía ser libre para todo el mundo, por lo que se le ofreció ser el anfitrión europeo de la W3C, invitación que declinaron por decidir centrarse más en la física que en las tecnologías de la información.

Primer Servidor WEB CERN
El equipo que Berners-Lee usó como primer servidor web de la historia

Tal día como hoy toca felicitar a esta organización por sus 20 años de trabajo pero también, en estos tiempos oscuros en que los lobbies presionan a los gobiernos para acabar con la libertad y neutralidad de la red, es un buen momento para recordarles que las tecnologías web deben seguir siendo libres, que no queremos ningún DRM en HTML5 y que pueden mandar a todos los lobbistas que presionan para que así sea a la EME (perdón por el chiste malo). Porque más que nunca necesitamos una web que sea libre y neutral, y eso pasa porque la tecnologías para desarrollarla también lo sean.

Instalando Google Web Designer en Linux

Hará cosa de un año Google nos sorprendió con una herramienta de diseño web en fase beta: Google Web Designer. Un editor WYSIWYG muy potente, gratuito (al menos de momento), orientado hacia diseñadores, pensado para sacar todo el jugo de HTML5 y CSS3 (diseño responsivo, animaciones, aceleración 3D) y a su vez ser sencillo. Y, al igual que hicieron con Google Drive, se olvidaron de los usuarios de Linux.

Google-Web-Designer

Lo curioso es que se preguntó al director de proyecto alguna vez que qué pasaba con los Linuxeros y la respuesta fue más sorprendente: sí existía una versión para linux que además se usaba internamente en la empresa, pero tenía diferencias respecto a la que salió para Mac y Windows, por lo que no la sacaban. Al final, tras mucha presión por la comunidad, anunciaron que sí sacarían la versión para Linux.

Y ya la tenemos.

¿Cómo la instalamos? Sencillo: Vamos a la web del proyecto y desde allí descargamos el archivo .deb que mejor vaya con la distribución de Linux con la que trabajemos, lo ejecutamos con nuestro instalador de paquetes y… listo. Ya está, todo muy fácil… ¿o no?

Pues voy a ser jodón, pero no. Si fuera tan fácil no haría una entrada en el blog. Resulta que de momento hay un bug con la carga del idioma, si vuestro sistema no está en inglés Google Web Designer sólo muestra una ventana negra y no carga, no funciona. Por suerte por los foros oficiales ya existe una solución, que os obligará a tirar de consola (hasta que no salga una actualización/parche al menos)

#Lo primero es cargarnos la configuración por defecto tecleando:
sudo rm -r .local/share/google-web-designer

#y ya podemos lanzar web designer desde la consola, forzando que lo haga en inglés, con el siguiente comando
LANGUAGE=en_US google-webdesigner

Ahora sí, con esto ya tenéis funcionando Google Web Designer en vuestro equipo con Linux. Esperemos que dentro de poco la gente de Mountain View se apure a sacar o traducciones o al menos un parche que evite este molesto bug.

URI schemes en HTML 5

Al hablar de URI schemes hablamos de recursos que invocan aplicaciones ya instaladas en un dispositivo móvil y que nos permiten volcar ciertas funcionalidades en ellas, haciendo así más natural y fluída la navegación para el usuario. Aquí vamos a ver el uso de dos de las más básicas: hacer uso del sistema de SMS del teléfono y llamar a un número de teléfono.

  • SMS: Permite enviar rápidamente un mensaje de texto, indicando en el enlace un número e incluso el cuerpo del mensaje. Recuerda que debes poner el código del país antes del ńúmero, por aquello de la internacionalización. El marcado html sería:
    <a href="sms:666777888">Cuerpo del mensaje</a>
    
  • Teléfono: En este caso el enlace nos permitirá hacer una llamada a un número. Como en el anterior acuérdate del código del país antes del número. El marcado sería:
    <a href="tel:666777888">666777888</a>

Esto son ejemplos muy básicos, pero hay gran variedad de opciones: schemes para Facebook, Twitter, Pinterest… Existen múltiples schemes ya creados para iPhone, Android o HTML5 que podéis buscar en la web.

En fin, espero que os sirva de ayuda a los que como yo os estéis iniciando en la programación para dispositivos móviles

Placeholder: texto dentro de los inputs en HTML5

Placeholder es una nuevo atributo y que te permite introducir un texto dentro de un input, siempre y cuando el campo esté vacío o no esté senalado. En la barra de búsqueda de Opera o de Firefox puedes ver algo similar. Si pulsas sobre el campo (o llegas a él mediante el uso del tabulador) el texto se borrará.

Este atributo está soportado ya por casi todos los navegadores, al menos por Firefox, Opera, Chrome y Safari, me ha dado problemas con IE7 e IE8 y no he podido probarlo con IE9. Y… no tiene mucha más ciencia esto. Tiene utilidad sobre todo a la hora de maquetar webs para dispositivos móviles, ya que así te puedes ahorrar la etiqueta y ganas en espacio en pantalla. Un ejemplillo simple para terminar:

      <form>
      	<input placeholder="Prueba" />
      </form>

Con esto tendrías una etiqueta input con el texto “prueba” por dentro.

Firebug, tu mejor amigo.

¿Eres desarrollador web? ¿Estás interesado en serlo? ¿Buscas herramientas que te simplifiquen la vida? Entonces necesitas Firebug

¿Qué es Firebug? te dirás. Firebug es una herramienta cojonuda, Open Source y con licencia BSD (y además gratis), que puedes instalar como un add-on en Mozilla Firefox. Si conoces otras herramientas como el Firefly de Opera, ChromeInspector, o las herramientas de desarrollo web de Internet Explorer te puedo decir que Firebug se las merienda. Mucho más simple, claro, usable y productivo.

¿Qué nos permite Firebug? Nos permite inspeccionar el código HTML de las páginas, depurar código javascript, comprobar la comunicación con el servidor, testear ciertos aspectos de la seguridad de la página, inspeccionar DOM, probar modificaciones en el CSS (con la seguridad de que no te cargas nada)… Todo con pasmosa facilidad, y además, para los hispanoparlantes, disponemos de él en castellano (y es posible que aparezca próximamente una versión en gallego pero… de momento dejadlo en rumore)

¿Su principal defecto? Mayormente que no haya una versión para cada navegador, de momento sólo dispones para él en Mozilla Firefox

Existen inclusive parches que te permitirán utilizarlo para testear código flash, e incluso decompilar los archivos swf.

Tienes también a tu disposición una wiki con diversa información (en inglés) sobre este plugin en el siguiente enlace. Y me reitero, Firebug es una herramienta que me ha salvado el culo en muchos desarrollos, tanto como autónomo como en empresas, no es un juguete, sino una buena herramienta de trabajo. No podía dejar de declararle mi amor en este blog, es un proyecto que merece mucho la pena y que, si lo sabes utilizar, te facilitará mucho el trabajo. No dejes de probarlo.