jueves, febrero 06, 2014

Agregando Titulos (captions) a una galeria realizada con Foundation Clearing

Implemente en una plantilla de Wordpress, que usa el plugin "legacy nextgen gallery", un álbum de galerías usando para el despliegue el componente de javascript que contiene Foundation de Zurb.
La idea era que el álbum de galerías se desplegara de forma horizontal, empezamos creando un lienzo:
<div class="row">
    <div class="large-4 columns">
    </div>
    <div class="large-4 columns">
    </div>
    <div class="large-4 columns">
    </div>
</div>

Lo siguiente es colocar el código de nuestra galería en cada una de las zonas que acabamos de crear:
<ul class="clearing-thumbs clearing-feature" data-clearing>
  <li class="clearing-featured-img"><a href="http://placehold.it/750x350&text=1"><img src="http://placehold.it/750x350&text=1" data-caption="My Caption"></a></li>
  <li><a href="http://placehold.it/750x350&text=2"><img src="http://placehold.it/750x350&text=2" data-caption="My Caption"></a></li>
  <li><a href="http://placehold.it/750x350&text=3"><img src="http://placehold.it/750x350&text=3" data-caption="My Caption"></a></li>
</ul>



El resultado lo podemos ver en Codepen: http://cdpn.io/ykjBe

clearing01

De esta manera estamos creando un álbum, que cuenta con 3 galerías, que se desplegaran en el ancho y alto de la pantalla:

clearing02

Lo siguiente sera colocar un titulo a cada una de las galerias, tenemos que cambiar el codigo para utilizar las etiquetas de html FIGURE y FIGCAPTION:

   1:  <div class="row">
   2:  <div class="large-4 small-4 columns">
   3:  <ul class="clearing-thumbs clearing-feature" data-clearing>
   4:    <li class="clearing-featured-img"><a href="http://placehold.it/750x350&text=1">
   5:      <figure class="figure-caption"><img src="http://placehold.it/750x350&text=1" data-caption="My Caption"><figcaption>Image 1</figcaption></figure>
   6:      </a></li>
   7:    <li><a href="http://placehold.it/750x350&text=2"><figure class="figure-caption"><img src="http://placehold.it/750x350&text=2" data-caption="My Caption"><figcaption>Image 2</figcaption></figure></a></li>
   8:    <li><a href="http://placehold.it/750x350&text=3"><figure class="figure-caption"><img src="http://placehold.it/750x350&text=3" data-caption="My Caption"><figcaption>Image 3</figcaption></figure>></a></li>
   9:  </ul>
  10:    </div>
  11:  <div class="large-4 small-4 columns">
  12:  <ul class="clearing-thumbs clearing-feature" data-clearing>
  13:    <li class="clearing-featured-img"><a href="http://placehold.it/750x350&text=4">
  14:      <figure class="figure-caption"><img src="http://placehold.it/750x350&text=4" data-caption="My Caption"><figcaption>Image 4</figcaption></figure>
  15:      </a></li>
  16:    <li><a href="http://placehold.it/750x350&text=5"><figure class="figure-caption"><img src="http://placehold.it/750x350&text=5" data-caption="My Caption"><figcaption>Image 5</figcaption></figure></a></li>
  17:    <li><a href="http://placehold.it/750x350&text=6"><figure class="figure-caption"><img src="http://placehold.it/750x350&text=6" data-caption="My Caption"><figcaption>Image 6</figcaption></figure>></a></li>
  18:  </ul>
  19:    </div>
  20:    <div class="large-4 small-4 columns">
  21:  <ul class="clearing-thumbs clearing-feature" data-clearing>
  22:    <li class="clearing-featured-img"><a href="http://placehold.it/750x350&text=7">
  23:      <figure class="figure-caption"><img src="http://placehold.it/750x350&text=7" data-caption="My Caption"><figcaption>Image 7</figcaption></figure>
  24:      </a></li>
  25:    <li><a href="http://placehold.it/750x350&text=8"><figure class="figure-caption"><img src="http://placehold.it/750x350&text=8" data-caption="My Caption"><figcaption>Image 8</figcaption></figure></a></li>
  26:    <li><a href="http://placehold.it/750x350&text=9"><figure class="figure-caption"><img src="http://placehold.it/750x350&text=9" data-caption="My Caption"><figcaption>Image 9</figcaption></figure>></a></li>
  27:  </ul>
  28:    </div>
  29:  </div>



El resultado de lo anterior es lo siguiente:

clearing03

Cierto que no se ve muy agradable, aprovechando que ya utilizamos las etiquetas FIGURE y FIGCAPTION, agregamos un poco de estilo:

   1:  figure {
   2:    display: block;
   3:    position: relative;
   4:    float: left;
   5:    overflow: hidden;
   6:    margin: 0 20px 20px 0;
   7:    width:100%;
   8:  }
   9:  figcaption {
  10:    position: absolute;
  11:    background: black;
  12:    background: rgba(0,0,0,0.75);
  13:    color: white;
  14:    padding: 10px 20px;
  15:    margin:0px;
  16:    opacity: 0;
  17:    -webkit-transition: all 0.6s ease-out;
  18:    -moz-transition:    all 0.6s ease-out;
  19:    -o-transition:      all 0.6s ease-out;
  20:    transition:      all 0.6s ease-out;
  21:  }
  22:  figure:hover figcaption {
  23:    opacity: 1;
  24:  }
  25:  .figure-caption:before { bottom: 10px; left: 10px; }
  26:  .figure-caption figcaption { left: 0; bottom: -30%;}
  27:  .figure-caption:hover figcaption { bottom: 0px; }



Tendremos el siguiente resultado de aplicar el estilo, con una pequeña transición en la FIGCAPTION:




clearing04

Finalmente un arreglo para el navegador de Firefox e Internet Explorer:
li{
  width:100%;
}

Codigo final en Codepen http://cdpn.io/CgJDq

Listo!

domingo, febrero 02, 2014

Tendencias en diseño web 2014


Hace unas semanas me aventuré a predecir las tendencias en el área de desarrollo web para este 2014, ahora toca el turno de la parte de diseño web.

1. Area protagonista (hero area). En este año no dejaremos de ver el crecimiento de esta caracterisiticas en los diseños web, la tendencia comenzo un par de años y parece que a todo el mundo le gusta tener una area importante en la pagina de inicio en la que se pueda promocionar los productos mediante animaciones con javascript, especificiamente con "sliders".



2. Responsive, responsive. Ya han madurado diversos frameworks para el desarrollo de sitios ajustables (responsive) al tamaño de la ventana de diferentes dispositivos, usando una misma hoja de estilos, logrado esto mediante los "media queries" de CSS.





3. Video en lugar de texto. ¿Alguna vez he comentado que todo el mundo prefiere ver y escuchar, en lugar de leer?, y gracias al incremento continuo en el ancho de banda, es mas fácil colocar videos de 2 minutos tipo comercial en el cual se explica los productos y servicios de una empresa. Habrá mas video en cualquier parte de los sitios web, dado que la producción de videos se hace cada vez mas sencilla y llega con mejor fuerza a las personas.


4. Deslizamiento. El efecto de deslizar a una sección en particular dentro de una larga pagina, ha permitido que se generen paginas sencillas, que permite tener todo el contenido de una empresa. Esta versión de "sitios web" es muy útil sobretodo para las microempresas.


5. Texto corto y al grano. Basado en el hecho que mencione en el punto 3, el cual establece que a la gente pareciera no gustarle leer, se vuelve mas socorrido el tener textos lo mas cortos posibles y directos para que la gente reciba el mensaje sobre las características de los productos que se estan presentando en el sitio web. Eso si, no por corto el texto quiere decir que la tipografía sea igual, en este sentido la tipografía viene a cubrir el espacio que solemos usar para el texto, esto mediante fuentes de mayor tamaño y de un estilo que pueda transmitir el sentimiento del mensaje. Y con la ayuda de Google Web Fonts (en mi opinión el mejor recurso de fuentes tipográficas) esto resulta mas fácil de conseguirse.


6. Grandes fondos. Si estamos dispuestos a tener un video en nuestra pagina de inicio que en ocasiones pesa mas de 5 mb por minuto de tiempo, colocar una imagen de fondo con un tamaño de medio mega resulta irrisorio no usarlo, en especial cuando contamos con imágenes que logren captar la atención inmediata de los visitantes al sitio web.


7. Diseño plano. Esperemos que el "Flat Design" como se dice en inglés, haya llegado para quedarse, no hay mejor forma de usar botones, enlaces, componentes de interfaz, iconos, etc, que mediante este tipo de diseño. Es limpio, claro y directo. Fácil de leer, y ligero para los sitios. Preferible usar kbs en fotos o videos, que en un botón.

8. Wordpress. 46 millones de descargas en el 2013, usado en 18.9% del total de sitios en internet y muestra una curva de crecimiento que no parece ser afectada por sus competidores (joomla, drupal, etc), al contrario pareciera que las otras herramientas están en franco declive o en su caso en el mismo nivel. Es por esto, que pensar que el desarrollo y crecimiento de wordpress sera parado en el 2014, no parece viable. Veremos si puede tener un año tan fructífero como el anterior.


Listo!