Formularios, nuevos tipos de input en HTML5

El tema de los formularios es uno de los puntos que han sufrido mejoras considerables con la llegada de HTML5. Se han incorporado nuevos tipos de input y nuevos atributos que permiten un mayor nivel de personalización y funcionalidad, por no hablar se sencillez en algunos puntos.

Aunque se han añadido campos de gran utilidad, como los relacionados con las fechas, quizá el punto más importante sea el haber incorporado una validación propia para poder verificar los datos que el usuario introduce. Hasta ahora, esta verificación había que hacerla usando algún lenguaje de programación como JavaScript, sin embargo ahora es posible hacerlo sin escribir una sola línea de código.

Los nuevos input type que se han añadido en HTML5 son: number, range, date, time, datetime, datetime-local, week, month, color, search, datalist, email, tel y url. Vamos a verlos uno a uno junto con un pequeño ejemplo de uso.

Generador online de degradados o gradientes en CSS

Una de las grandes ventajas actuales de usar CSS es que puedes realizar directamente degradados para los fondos y evitarte el engorro de usar imágenes. Sin embargo presenta el inconveniente de ser compleja su personalización al no poder configurarlos gráficamente, y ni hablamos ya de optimizarlo para los diferentes navegadores.

Para facilitarnos el crear gradientes, existen múltiples herramientas con las que se puede trabajar de un modo similar a los programas de diseño y luego nos da el código equivalente para CSS. Vamos a ver algunas de ellas que resultan de gran utilidad.

Centrar página web horizontalmente con HTML y CSS

Una de las primeras cosas que se aprenden cuando se entra en el mundo del desarrollo web es centrar la página horizontalmente para que, con independencia de la resolución de pantalla con la que entres, siempre quede en medio. Para ello existen varias formas, unas más recomendables que otras dependiendo del proyecto que tengamos entre manos. Vamos a ver tres ejemplos, dos con HTML y otro con CSS.

Compartir un vídeo de Youtube en HD

Youtube nos permite compartir vídeos copiando la ruta del mismo o incrustando mediante el código que te proporciona. Incluso te suministran una URL abreviada para que sea más sencillo hacerlo. Por defecto el vídeo se comparte con la resolución automática, que variará dependiendo de la ubicación final del vídeo y la configuración que tenga cada usuario, tanto en su equipo como en el propio Youtube.



A veces nos puede interesar compartir en HD porque la calidad varía considerablemente, pero no existe ninguna opción que nos permita especificar la resolución con la que se va a visualizar. Sin embargo podemos conseguirlo añadiendo a la ruta '&hd=1', que es la variable que utiliza Youtube para activar o desactivar el modo de alta definición. Así pues, debería quedar algo como http://www.youtube.com/watch?v=i9QMPIW-wZ4&hd=1 y podremos compartir la URL.

Es importante matizar que sólo funciona con la ruta completa que te da el navegador y no la ruta corta que te proporciona el propio Youtube, aunque ya sabemos que todo esto puede cambiar de un día para otro.

Civilization - Justice

Esta vez toca un poco de música electrónica para trabajar. Civilization es el tema principal del segundo álbum de estudio del grupo francés Justice. Un buen ritmo en progresión y que viene acompañado con un estupendo vídeo de infografía de la mano de Edouard Salier.

Problema con las miniaturas al compartir en Facebook

Desde hace algo menos de un mes he notado  problemas cuando comparto un enlace de este blog de Blogger en Facebook, sencillamente no aparece la miniatura de la imagen que acompaña el artículo. Hace algún tiempo ya, tuve problemas también al compartir, ya que siempre me ponía siempre la misma descripción (el pie de la web) y me mostraba otra imagen diferente a la de acompañamiento del artículo. Pero lo solucioné usando meta etiquetas de Facebook y algún que otro truquito.

Qué es Open Graph de Facebook y para qué sirven las meta etiquetas

Open Graph no es más que la API (Interfaz de Programación de Aplicaciones) de Facebook que se utiliza cuando se desarrollan aplicaciones que interaccionan con esta red social, bien para sacar datos, bien para introducirlos. Se trata de todo un sistema que permite al desarrollador conectar su aplicación de una manera mucho más sencilla y unificada.