viernes, 17 de octubre de 2014

Masonry - Layout en cascada

Masonry

¿Qué es Masonry?

Masonry es una librería de JavaScript que nos permite aprovechar el espacio disponible de una forma inteligente. Funciona colocando los elementos en una posición óptima basada en el espacio libre vertical. Muchas webs ya disponen de esta estructura por lo que te será familiar.

¿Cómo funciona?

Lo primero que tenemos que hacer es descargar los archivos desde la web del autor desde aquí.

Una vez hayamos descargado los archivos, realizaremos la llamada desde nuestra página:


<script src="js/masonry.js"></>

El siguiente paso será crear la estructura. Para que Masonry funcione tenemos que crear una estructura homogénea contenida en una caja principal. A continuación puedes ver un ejemplo:


<div id="container">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>

Por último, iniciamos la librería mediante el siguiente código de ejemplo:


var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // opciones
  columnWidth: 200,
  itemSelector: '.item'
});

Este es un ejemplo básico del funcionamiento de Masonry, si estás interesado en el funcionamiento de esta librería te invito a que descubras por ti mismo las opciones de las que dispone. Más adelante integraremos Masonry y Bootstrap para darle un toque diferente a nuestras webs.

jueves, 2 de octubre de 2014

Placeholder y su uso en HTML5 y CSS3

Placeholder HTML5 CSS3

¿Qué es Placeholder?

Placeholder es un texto descriptivo que incluimos dentro de la etiqueta <input>, cuando introduzcamos un valor se sustituirá automáticamente.

Sintaxis HTML

Su sintaxis es de lo más simple, dentro de la etiqueta <input> añadimos el atributo placeholder incluyendo el texto descriptivo.


<input type="text" name="example" placeholder="Ejemplo de Placeholder">

Debajo podemos ver un ejemplo del código anterior.

Soporte en navegadores

A continuación podemos ver una lista con el soporte en los principales navegadores:

  Chrome 4+   Internet Explorer 10+   Firefox 4+   Safari 5+   Opera 11.5+

Sintaxis CSS

Mediante CSS podemos dar estilo al atributo Placeholder. Hay que tener en cuenta que la sintaxis no está estandarizada, por lo que en un futuro puede que cambie.


::-webkit-input-placeholder {
  color: #2c3e50;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #2c3e50;
}
:-ms-input-placeholder {
  color: #2c3e50;
}
:-moz-placeholder { /* Firefox 18- */
  color: #2c3e50;
}

Una vez vista la sintaxis, vamos a ver que estilos soporta:

  • font (propiedades)
  • color
  • background (propiedades)
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • opacity

Para terminar hay que tener en cuenta que algunos navegadores aplican por defecto una opacidad a Placeholder, por lo que un dato a tener en cuenta será implementar opacity: 1

miércoles, 1 de octubre de 2014

Backstretch - Imagen de fondo adaptable

Backstretch

Backstretch, es un plugin de jQuery que nos va a permitir añadir una imagen de fondo a nuestras páginas web que automáticamente se adaptará a la resolución de cada monitor.

Implementación de Backstretch

Tenemos que incluir la librería jQuery y el plugin Backstretch dentro de nuestro código (preferiblemente al final de la página, antes de la etiqueta de cierre <body>):


<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>

Una vez hayamos incluido las anteriores líneas de código, el siguiente paso será incluir la imagen que queremos utilizar de fondo. Lo ideal es buscar una imagen de un alto impacto visual y de unas dimensiones elevadas para no tener problemas con dispositivos de alta resolución.


<script type="text/javascript">
  $.backstretch("/directorio/imagen.jpg");
</script>