septiembre 2012

Placeholder en los input con HTML5 y como darles estilo a los placeholder de los input desde css3

Una gran mejora enfocada a formularios que trae de la mano HTML5 y CSS3 es el uso de placeholder. Para quien no lo conozca, un placeholder es ese texto que aparece por defecto en un campo de texto y que en el momento que empezamos a escribir desaparece. Se suelen utilizar en formularios con un texto «escriba aquí su nombre» o «su búsqueda», etc. y con el uso de javascript, se ocultaba el texto al empezar  a escribir. Con la aparición de HTML5, los navegadores empezaron a implementar esta nueva funcionalidad.

Utilizar un placeholder no tiene misterios ni secretos y se pueden utilizar tanto para las cajas de texto como las contraseñas, es decir, en input type text e input type password. Para implementar esta nueva mejora, es tan sencillo como añadir un nuevo atributo placeholder al elemento input con el texto que queramos que muestre en pantalla. A continuación os muestro un formulario de login como ejemplo de como se utilizarían estos nuevos atributos:

<form>
  <input class="user" type="text" placeholder="Usuario" />
  <input class="pass" type="password" placeholder="Contraseña" />
  <input type="submit" />
</form>

¿Es sencillo verdad? Ahora vamos a complicarlo un poco, vamos a darle estilos. Todo el mundo sabe como darles estilos a un elemento, en este caso a un input, pero…. ¿Cómo dar estilos a un placeholder? Tan solo hay que utilizar unos selectores de css especiales porque aún no estan soportados oficialmente por los navegadores, así que funcionan a modo de extensiones experimentales, como el moz-border-radius que lleva unos 7 años en modo experimental. En este caso utilizaremos 2 extensiones, una para webkit (chrome, safari, etc) y otra para mozilla (firefox). Las extensiones son: -webkit-input-placeholder y -moz-placeholder. Os pongo un ejemplo:

.user::-webkit-input-placeholder, .user::-moz-placeholder {
  color: blue;
}

.pass::-webkit-input-placeholder, .pass::-moz-placeholder {
  color: red;
}

Ahora tenéis un formulario de login la mar de mono, con los placeholder azules para el usuario y rojo para la contraseña. Espero que os sirva de ayuda para hacer formularios mas bonitos con HTML5.

Twitter Bootstrap el framework frontend the twitter

Hoy os quiero hablar de una herramienta web muy útil. Todos conocemos los framework de programación en distintos lenguajes, que si pylons, django, aspnet mvc, etc. Pero ¿Qué pasa con los framework de diseño? En internet podemos encontrar miles de themes gratuitos para utilizar en nuestra página, pero pocos son los que podemos utilizar como base genérica y aquí es donde aparece bootstrap.

Bootstrap es un framework de maquetación web desarrollado por Twitter y que de hecho se utiliza en este servicio, así como en otros muchos como ohloh o masterbranch por poner un par de ejemplos. Desde hace bastante tiempo lo utilizo en mis proyectos personales ya que provee de una buena base de estilos y estructura genéricos.

Bootstrap incorpora:

  • Scaffolding: estilos globales que resetean el tipo de body, enlaces, sistema de grids y layouts.
  • Base CSS: estilos para elementos comunes de html como tipografía, tablas, formularios y botones. Incluye Glyphicons, una librería de iconos libre.
  • Componentes: estilos comunes como tabs, barras de navegación, breadcrumbs, encabezados, etc.
  • Plugins de javascript: componentes comunes de javascript como tooltips, modals, etc.

Lista de componentes:

  • Grupo de botones
  • Botones desplegables
  • Tabs y listas de navegación
  • Barras de navegación
  • Etiquetas
  • Encabezados y destacados
  • Thumbnails
  • Alertas
  • Barras de progreso
  • Modals
  • Desplegables
  • Tooltips
  • Accordion
  • Sliders

Tenéis mas información en la web de Twitter Bootstrap.

Scroll al inicio