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!

lunes, enero 13, 2014

¿Por qué usar un motor de envío de correos?

Si se cuenta con un alojamiento web, seguro cuenta con el alojamiento de listas de correo electrónico. Ahora, se podría pensar que esta es una buena opción, pero para los negocios, lo que realmente se está buscando es una vía de sentido único donde usted puede enviar mensajes a un grupo de clientes, socios, medios de comunicación, etc. El software que su proveedor de alojamiento ofrece es bidireccional, lo que significa que cualquier persona que es miembro de la lista puede enviar mensajes a toda la lista. Esto probablemente no es ideal si usted está enviando un anuncio del producto, el boletín semanal o comunicado de prensa, pero es posible que le resulte útil en otros escenarios. Por otra parte ¿está seguro de que su anfitrión le permite enviar una gran cantidad de correos electrónicos al mismo tiempo? ¿Es su propio servidor o VPS o un servidor compartido? Un servidor compartido probablemente limite la salida de correo electrónico enviado, lo que significa que va a tomar horas o días enviar un solo mensaje a su lista entera.


Las preguntas que usted debe pensar alrededor cuando usted está eligiendo una solución lista de correo son:
  • ¿Cuántos mensajes se me enviaba cada semana / mes?
  • ¿A cuántas personas voy a tener en mi lista?
  • ¿Quiero que la gente sea capaz de inscribirse a mis listas de correo en mi sitio web?
  • ¿Necesito saber cosas como la cantidad de gente abierta y leer mis mensajes y, ya sea que haga clic en los enlaces en los mensajes?
  • ¿Puedo pagar por un servicio de lista de correo, o tengo que encontrar una opción gratuita?

jueves, enero 09, 2014

Tendencias 2014 en desarrollo web

El tiempo no se detiene y se dice que un año en Internet es como siete años en el mundo fuera del teclado. Así de rápido se mueve la tecnología, y lo que es nuevo el día de hoy, en unas cuantas semanas se queda en el olvido; es así que algunos nos atrevemos a decir que es lo que nos depara el destino. Para el caso de este blog, y tomando fuerza con el impulso de la nueva pagina de facebook (http://www.facebook.com/llanuracom), revisar las tendencias en desarrollo web es lo que nos ocupa.



Vamos pues con la lista:

1. Mobil multiplataformas.

Esta claro que no es novedad, que todo el mundo se mueve hacia el desarrollo móvil, el crecimiento y éxito de las tiendas de IOS, Android, Windows Phone es una muestra de ello. Pero en Llanura.com lo que interesa es la facilidad del desarrollo, y el problema actual, es que una misma aplicación se debe realizar en diferentes lenguajes para las diferentes plataformas, y por supuesto entender las diferentes idiosincrasias de los sistemas operativos. En muchas ocasiones en el pasado se ha intentado que las aplicaciones web sean un común denominador para todos los sistemas operativos, pero con el crecimiento de HTML5, CSS3 (el nuevo CSS4) y las diversas librerías basadas en Javascript, pareciera que esto esta más próximo. Ejemplos de esto: emscript, node-webkit, phonegap, y algunos mas.

2. Computo en la nube privado.

Snowden, el famoso americano que ha divulgado documentos sobre la agencia de seguridad de EEUU, ha puesto a la luz, los problemas que enfrentan los servicios en la nube, por lo que la necesidad de crear nubes de computo privados para empresas de gran tamaño irá en aumento.

3. Perifericos conectados.

Los dispositivos de diverso tipo se están conectando a Internet, desde refrigeradores hasta impresoras en 3D. Los navegadores empiezan a incorporar la interacción con este tipo de periféricos.

4. Herramientas de desarrollo en linea.

Están apareciendo casi todas las semanas diferentes tipos de editores de programación en linea. Con esto el trabajo en equipo, se vuelve mas eficiente y cien porciento accesible en cualquier momento.

5. M2M.

Maquina a maquina. Los servicios web están evolucionando en las maquinas que nos rodean, carros que se pueden conectar a nuestros dispositivos y estos a su vez a servidores remotos que envían los problemas mecánicos o de accidentes automovilísticos. Serán la norma.

6. Maquinas virtuales.

Es imposible contar con una infinidad de equipo de computo destinado a las distintas plataformas que existen en el mercado. Es por eso que la virtualización de maquinas con diferentes sistemas operativos, y en el menor de los casos, con un perfil diferente, no solo la veremos en nuestra pc de escritorio.
Tenemos 12 meses para ver los resultados de estas tendencias. Tal vez veamos cómo algunas, resultan vencedoras y algunas otras terminan en el olvido, pero cierto es que la tecnología y el desarrollo web se mueve muy rápido.

Listo!

miércoles, enero 01, 2014

Crear un sitio de una página con desplazamiento usando Foundation

Tutorial para crear un sitio web de una página (onepage website) con desplazamiento local (smooth scroll) usando el marco de trabajo Foundation de Zurb.



En ésta ocasión me voy a aventurar a crear un pequeño tutorial para crear un sitio web de una pagina, que ahora están muy de moda, usando como base Foundation. 
Foundation es un muy buen marco de trabajo (framework en inglés) para desarrollar sitios de forma rápida y sobretodo que sean ajustables a la pantalla (responsive en inglés).
Es así que empecemos con este tutorial; para comenzar necesitaremos descargar:
  1. Foundation Zurb - http://foundation.zurb.com/  
  2. Jquery Smooth Scroll Plugin - https://github.com/kswedberg/jquery-smooth-scroll

HTML

Comenzaré por crear una página sencilla la cual estará formada por una galería de fotos y un mensaje que será la sección de bienvenida del sitio, para esto usaremos el componente javascript que incluye Foundation llamado Orbit. En la sección siguiente a la bienvenida, irá una barra de navegación que servirá para desplazarse y el resto de la pagina serán las secciones propias del sitio web; en términos generales debe quedar algo parecido a lo siguiente:



CSS

Para el ejemplo se necesita que las secciones de página tengan una altura mínima y además un poco de espacio entre sección y sección, para esto se necesita agregar en la sección de "head" unas cuantas lineas de estilo que darán un poco de forma a la página web:

 <style type="text/css">
 .page-section {padding-top:20px;min-height:650px;border-top:solid 2px gray}
 .page-section-first {padding-top:60px;}
 .page-divider {min-height:100px;}
        </style>

Ahora se debe aplicar la clase de estilo ".page-section" a las secciones en nuestro código de html:


MAGELLAN

Lo siguiente, es configurar el componente de javascript "Magellan" que viene incluido en Foundation. Este componente permite desplazar el contenido de la página y al mismo tiempo se vuelve una barra fija en la parte superior del navegador, es decir es un famoso menú pegajoso (sticky menu en Inglés):

Se ha agregando una clase de estilo "magellan-link" a todos los enlaces de el menú de navegación, esta clase se usará con el javascript smooth scroll.

Ya en este punto se deben crear los destinos de los enlaces de el menú de navegación usando de "data-magellan-destination" en los encabezados (en las etiquetas <h2>) de cada seccion:

<h2 id="section-1" class="page-section-first" data-magellan-destination="section-1">Empresa</h2>
.
.
.
<h2 id="section-2" data-magellan-destination="section-2">Servicios</h2>
.
.
.
<h2 id="section-3" data-magellan-destination="section-3">Productos</h2>
.
.
.
<h2 id="section-4" data-magellan-destination="section-4">Contacto</h2>

En el primer encabezado existe una clase extra, que lo único que hace es agregar un poco de margen superior a la primera sección.

SMOOTH SCROLL

El turno de usar el agregado de Jquery: smooth-scroll, el cual permitirá que el efecto de desplazamiento por la página tenga una mejor animación:

<script src="js/jquery.smooth-scroll.min.js"></script>
<script>
$("a.magellan-link").smoothScroll({offset: -60, speed:1000});
</script>

El numero -60 para el valor offset esta basado en el alto de 65 pixeles que tiene la barra de
El código anterior debe ir al final, antes de cerrar la etiqueta de body. Con esto ultimo el sitio web de una pagina con desplazamiento quedará funcionando.

EXTRA

En muchos sitios que usan esta forma de navegación se presenta un botón al inicio de la pagina, por lo cual en la sección de bienvenida se puede agregar un botón de la siguiente forma:

<div class="text-center">
 <ul class="button-group">
   <li data-magellan-arrival="section-1"><a class="magellan-link button" href="#section-1">ir a sitio</a></li>
 </ul>
</div>

Otra modificación es agregar un enlace al inicio de la página mediante el menú de navegación. Primero habrá que poner un ancla al inicio de la misma despues de la etiqueta body:

<a name="home" id="home" data-magellan-destination="home"></a>

Y finalmente se modifica la barra de menu:


<h1><a data-magellan-arrival="home" class="magellan-link" href="#home">Mi Sitio</a></h1>

Listo!

El código fuente puede ser descargado en https://github.com/vgarcias/onepage-ss-foundation
Y un demo puede ser visualizado en http://vgarcias.github.io/onepage-ss-foundation/