miércoles, octubre 22, 2014

Cupon DELL hasta 27/101/2014

Recibí un cupón para la compra de laptops en DELL en particular las:

  • Inspiron 15
  • Vostro 5470


CUPON: 7S8HPBK03HC438

Listo!

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!