Ya empezamos a descubrir las primeras obras trabajando con todo el potencial de HTML5 que viene cargado de mejoras como: Bases de datos locales, Aplicaciones web Offline, Fin de las etiquetas de presentación, Etiquetas para contenido específico, Web Workers, y muchas otras.

Entre todas, las que nos interesan para este artículo, es la mejora de la etiqueta “Canvas“: que es algo así como un nuevo componente que permitirá dibujar, por medio de las funciones de un API, en la página todo tipo de formas, que podrán estar animadas y responder a interacción del usuario. Es algo así como las posibilidades que nos ofrece Flash, pero dentro de la especificación del HTML y sin la necesidad de tener instalado ningún plugin.

Gracias a esto podremos construir animaciones como las que podéis ver en en SVG en la web svg-wow.org

Por ejemplo, podemos probar el nuevo HTML5 (teniendo en cuenta que tengas un navegador actualizado apropiadamente) con estas animaciones de Vincent Hardy llamadas Animated Lyrics. En ellas, Hardy junta audio y animaciones de texto y gráficos sin necesidad de ningún plugin externo, como podéis ver. Todo ello escrito en HTML5, con la simple ayuda de las etiquetas ‘audio’ y ‘foreignObject’. Las animaciones están hechas con Scripts.

Hace unos días, Rubén Díaz (a.k.a. Outime) un amigo nuestro desde hace tiempo, (fundador de la red social de código abierto llamada Jisko) y otro compañero. Descubrían una vulnerabilidad crítica en la red social Tuenti.

A modo de explicación corta, scromega explicaba que la vulnerabilidad consistía en:

Cualquier usuario mal intencionado, con solo insertar en el perfil de cualquier usuario un comentario (con un código) podía hacer varias cosas (como dar de baja la cuenta, cambiar el email,…) y además este código se propagaría automáticamente a todos los amigos de se usuario, y así sucesivamente… 

Un poco más en profundidad

Esto lo conseguían, dado que juntando una URL (terminada en /) con código HTML, falla la validación del mismo (XSS). Sin hacer la citada combinación, todo era convertido a HTML Entities (gracias a htmlentities()). Esto se traduce en resumidas cuentas al impedimento de que si alguien escribe código HTML, el navegador lo interprete como tal. ¿Qué es lo que falla en el proceso? El parseado.

Rubén y su compañero estuvieron haciendo varios PoC y consiguieron dar con datos reveladores con los que avisar a Tuenti de dicha vulnerabilidad.

Lo que más me ha llamado a la atención es el tiempo que han tardado los chicos de Tuenti en arreglar dicho fallo tan gordo:  5 días.No sé si tanto tiempo se puede permitir en una red que está cobrando tanto auje entre los jóvenes españoles. Y esto me lleva a recordar lo que ya se está escuchando por muchos lares:

Tuenti = Todos Ustedes Están Negando Tener Intimidad

Esperemos que todo se quedara en un susto y que la próxima vez actúen con algo más de rapidez, como merece una red de tales proporciones.

+ info | Detalles de la vulnerabilidad de Tuenti

Es una aplicación muy sencillita que lo que hace es que te convierte la web que tu quieras en un bonito PDF protegido para descargartelo sin problema y cuando más lo necesites.

Muy útil desde luego para enseñar o ver alguna web en modo offline.

Sitio Web | Html-Pdf-Converter

Navegando por Internet en busca de bases de datos para usarlas de prueba en ciertos proyectos que estoy haciendo, me he topado con ésta página. Se llama generatedata, y más claro el agua: con ella podremos generar tablas/listas/bases de datos para poder hacer pruebas!

Para mi, es genial! Se pueden definir muchos tipos de campos (nombre, direcciones, textos, e-mails, números autoincrementados…) y el resultado de la generación aleatoria la puedes pedir en HTML, XML, SQL, XML o CSV que son los formatos más usados en las bases de datos. También se puede especificar el país, aunque sólo hay unos pocos países americanos (pero para hacer pruebas, eso nos da igual…)

Por cierto, por si fuera poco, también tienen disponible el código fuente para bajártelo.

Enlace | generatedata

La imágen que véis arriba corresponde a un esquema de un Slider. Está hecho con una combinación de CSS, HTML Markup y jQuery JavaScript. Tenéis todos los códigos en la web css-tricks, está hecho por Chris Coyier. Podéis ver una demostración en este site.

He visto (como seguramente vosotros también) muchos Sliders para webs, pero me ha gustado especialemtne la función de pararlo o de reproducción automática que tiene éste, porque muchas veces me pasa qeu quiero leer cierto artículo sin tener que entrar pinchando en él y se hace imposible en ciertas webs. Por dar ideas, por ejemplo se podría utilizar para mostrar los últimos post de tu weblog.

Si ya has diseñado alguna vez una página web, seguro que habrás pensado de cabeza el número de contenedores (DIV) que tienes que poner y cómo ponerlos para conseguir cierta estructura de página. Esto suele llevar un rato, y si lo haces rápido y corriendo sin pensar, no suele salirte a la primera (en diseños algo complejos); yo siempre acabo por dibujarmelo en un papel poniendo el nombre de cada uno y después lo paso al código…

Pues Drawter es una de esas aplicaciones maravillosas que hay por la red, para ayudar a la gente a no perder el tiempo. (Aplicaciones en las que seguro que si conoces al autor, de darías un beso en la frente, después de las gracias!) Con Drawter podrás “dibujar a mano” tantos conetendores como necesites, unos dentro de otros, flotantes por encima de otros, al lado… y cuando tengas más o menos un boceto Drawter te genera el código HTML y el código del archivo de la hoja de estilos CSS para conseguir dicha estructura.

Es genialmente sencillo! Muy recomendable apra gente que está empezando! Hay si yo hubiera tenido esto antes de ciertos diseños… El sistema es muy técnico a lavez, dejandonos elegir entre muchas opciones (para lagente avanzada) como en que versión de HTML trabjamos, así como la versión del XHTML, el idioma de la página, etc… ¡una maravilla!

Enlace | Drawter