Agregando efectos Retro a nuestras imágenes con vintageJS

Categoria : Informatica, Javascript, redes sociales · No Comentario · Por Apr 1st, 2012

El siguiente articulo va dedicado a fotógrafos, y los amantes de las redes sociales que nos gusta publicar imágenes con efecto retro. Te cuento que “surfeando” por la web me encontré con una excelente librería hecha en Javascript, el cual recibe el nombre de vintageJS, cuyo principal objetivo es darte la facilidad de editar tu fotografía en la web sin necesidad de instalar ninguna extensión a tu navegador o computadora y luego darle tweet para tu Twitter o Share para que aparezca en tu muro de Facebook, o simplemente descargar tu fotografía editada.

Como usar vintajeJS?

  • Entrar al sitio de vintageJS —> www.vintagejs.com
  • Hacer click en el icono de la flecha “Try it out”:

  • Edita tu fotografía utilizando los controles proporcionados por vintageJS

Antes

Después

Sitio Oficial: vintageJS

Less: Un framework para hojas de estilo de forma dinámica

Categoria : Diseño Web, Lenguajes de Programación · No Comentario · Por Mar 17th, 2012

A medida va transcurriendo el tiempo, muchas tecnologías, frameworks y lenguajes de programación van quedando obsoletos, y a la vez van surgiendo soluciones que logran ahorrar recursos dentro de una organización. Hoy hablare sobre la “evolución” de CSS (Cascading Style Sheets). Muchos programadores FrontEnd (Los que programan la parte visual en una aplicación…) les gustaría ahorrarse tiempo escribiendo hojas de estilo (CSS), esto se puede lograr mediante el framework Less.

Definamos Less

Te comento que Less extiende a CSS con un comportamiento dinámico, gracias a variables, mixins, operaciones y funciones lo gusta a todo programador. Un aspecto muy importante es que Less se ejecuta tanto en el lado del navegador (Chrome, Firefox y Safari) como en el lado del servidor con Node.js y Rhino.

Incluyendo Less en nuestros proyectos

Client-side (Lado del navegador)

Incluye tu hoja de estilo antes que la librería de Less de la siguiente forma:
[cc lang=”css” tab_size=”2″ lines=”40″] [/cc]
Luego incluye la librería de Less, la cual puedes descarga Aca ambas lineas dentro de la etiqueta <head>. Un regla de Less, es incluir tu(s) hoja(s) de estilo antes del llamado de Less.
[cc lang=”javascript” tab_size=”2″ lines=”40″]


[/cc]

Client-side (Lado del servidor)

La forma mas rápida de instalar Less en tu servidor es utilizando la utilidad npm de la siguiente forma:
[cc lang=”html” tab_size=”2″ lines=”40″]
$ npm install less
[/cc]

¿Como es la sintaxis de Less?

Como mencione anteriormente, Less incluye elementos que nos ahorran al momento de codificar una hoja de estilo (CSS), su sintaxis es bastante fácil, veamos un ejemplo:
[cc lang=”css” tab_size=”2″ lines=”40″]
// CSS TRADICIONAL

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

// EJEMPLO CON LESS

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}
[/cc]

Mas ejemplos sobre Less Aqui…

Algunos tutoriales de Less (Ingles)

Sitio Oficial: Lesscss.org
Descargar: Less

Elaborar presentaciones en el navegador gracias a Impress.js

Categoria : Diseño Web, Informatica, Javascript, Programacion · No Comentario · Por Feb 27th, 2012

Librerías, librerías y mas librerías señores y señoras, esta vez se trata de una libreria javascript llamada Impress.js que nos permitira crear presentaciones con transiciones y otro tipos de efectos muy “cool”, combinando tecnologia CSS3.

Es importante aclarar que obtendras excelentes resultados en navegadores modernos, en cuanto para navegadores mas antiguos, el creador de la libreria se ha preocupado y ha agreagado un poco de compatibilidad, muchos usuarios opinan que el rendimiento de esta libreria en navegadores modernos es mejor que en los navegadores antiguos, y esto es logico.

Es compatible con los siguientes navegadores: Ultimas versiones de Chrome/Chromium, Safari 5.1, Firefox 10, agregando algunos elementos de HTML5 funciona con Internet Explorer 10, no funciona con Opera ya que este navegador no soporta los elementos “transform” del CSS3.

 

Compatibilidad con navegadores moviles (Telefonos y Tabletas)

Originalmente esta libreria no fue creada para dispositivos móviles, esto debido al hardware. Pero para el caso de las tabletas, nos comenta el creador de la libreria que existen algunas que si ejecutan la libreria sin ningún tipo de problema, entre esas tabletas que han pasado la prueba son el iPad de Apple y el Blackberry Playbook de Rim.

Demostracion de Impress.js

Si quieres hacer la demostracion, prueba haciendo click Aqui y luego presiona la tecla espaciadora (La mas grande del teclado =) ).

Otros Ejemplos usando la libreria Impress.js

CSS 3D transforms (Presentación)
What the Heck is Responsive Web Design (Presentación)
Data center virtualization with Wakame-VDC (Presentación)

lioshi.com (Sitio Web)
nice-shots.de (Sitio Web)
alingham.com (Sitio Web)

Sitio Oficial: Impress.js

jsPerf: Midiendo el rendimiento de tu Javascript

Categoria : Diseño Web, Informatica, Javascript · No Comentario · Por Feb 5th, 2012

En la web existen un gran número de herramientas que ayudan a monitorear el rendimiento de nuestras aplicaciones, una de esas “web-tools” se denomina jsPerf, el cual nos permite crear comparativas entre código midiendo el rendimiento de Javascript y a la vez posibilidad de compartir dichos resultados.

A continuación más detalles sobre jsPerf…

¿Que es un API?

Es tiempo de hablar un poco sobre un término que en los últimos años se ha vuelto muy popular, me refiero a las API, cuyas siglas significan (Application Programming Interface). La primera vez que utilicé un API fue hace 8 años en un proyecto de inventarios, en resumen era una aplicación de escritorio (desktop) el cual me permitía usar las funcionalidades nativas del sistema operativo como por ejemplo “Guardar como”, “Abrir” entre otras opciones. Dicho concepto se expandió y hoy en día ya contamos con API para desarrollar aplicaciones web y móviles.

jQ.Mobi un framework para móviles

Casualmente he descubierto un nuevo framework para desarrollo de aplicaciones móviles (Celulares/Tablets/iPods/Otros) el cual he decidido compartir, ya esta dando de que hablar en la comunidad de desarrolladores, se denomina jQmobi.

Según los creadores semana tras semana aparecen nuevos framework de HTML 5, pero con algunos problemas como ser poco rendimiento, errores en el sistema Android, problemas de memoria, entre otros. Se dedicaron a estudiar y probar los frameworks que existían actualmente y decidieron desarrollar jQmobi.

qrTip: Plugin de jQuery para desplegar códigos QR sobre enlaces

Categoria : Diseño Web, Informatica, Javascript, Programacion · (2) Comentarios · Por Feb 13th, 2011

qrTip es un excelente plugin de jQuery que podremos implementar en nuestros proyectos web, consiste en mostrar códigos QR sobre los enlaces que nosotros queramos en nuestro sitio web, como lo muestra la imagen.

Con este plugin se puede proporcionar un enlace a una versión móvil de tu sitio web, por lo que la gente pudiera escanear el código QR mediante sus teléfonos móviles. Aún no es compatible con todos los navegadores y dispositivos.

Les aconsejo visitar la fuente original, para obtener detalles más específicos sobre los archivos y librerías a utilizar: kovshenin.com

Si desean crear códigos QR (Quick Response) o conocer un poco más sobre dicha tecnología les recomiendo visitar el siguiente enlace: mayadigital.com/2010/10/27/likify-te-permite-crear-un-qr-code-para-paginas-en-facebook/

Demo: kovshenin

jQuery 1.5 recién salido del "horno"

Disponible jQuery 1.5Muchos se preguntarán que significa jQuery, les brindo la respuesta a continuación según Wikipedia: es una biblioteca o framework de JavaScript, el cual nos permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web.

Después de conocer un poco sobre lo que es jQuery, les comento que ya esta disponible la versión final de jQuery 1.5, recién salida del “horno” lista para implementarla en nuestros proyectos de desarrollo web.

La versión final de jQuery 1.5 estará disponible a últimos de este mismo mes de enero, aunque antes se espera la llegada de una versión candidata.

Más Información y Descargar: jQuery 1.5
Vía: DesarrolloWeb

Video JS: Reproductor de video para HTML 5

Reproductor de video para HTML 5

El desarrollo de proyectos web bajo el lenguaje HTML 5 cada día va tomando más y más poder a medida que los navegadores van mejorando. Pues hoy les presento un reproductor de vídeo llamado Video JS, basado en JavaScript que utiliza la funcionalidad de video HTML5.

Algunas Características

  • Código Libre (Open Source)
  • Ligero
  • 100% personalizable mediante CSS
  • Biblioteca independiente
  • Fácil de usar
  • Fácil de entender y extender
  • Pantalla completa
  • Control de volumen
  • Repliegue forzoso a Flash (incluso cuando no hay una fuente sin soporte)

Compatibilidad

Compatibilidad de Video JSSe preguntarán sobre la compatibilidad de Video JS, pues a continuación les dejo una imagen ilustrando dicha compatibilidad con varios navegadores modernos, formatos de video (H.264 / Theora OGG / WebM) plataformas móviles (iOS de Apple/Android de Google).

Hay Plug-ins disponible para WordPress, jQuery, Drupal y Joomla. Si desean obtener mayor información sobre como implementar dicho reproductor en sus proyectos, pueden visitar la web oficial: www.videojs.com donde nos ilustran paso a paso como agregar las librerías y el resto del código en el “cuerpo” del sitio web.

¿Como modificar las búsquedas en WordPress?

Tips sobre programacion

Ya días que no publicaba Snippets (Porciones de código de programación que puedes utilizar en tus proyectos), el día de hoy hablaremos de como modificar las búsquedas del administrador de contenidos WordPress, en otras palabras modificar las búsquedas por defecto de este sistema, para que pueda arrojar resultados basadas en nuestros parámetros.

Para lograr el objetivo anterior debemos crear dos funciones para dos filtros respectivamente, a continuación les dejo las funciones:

[cc lang=”php” tab_size=”5″ lines=”40″]

add_filter(‘posts_results’, ‘mi_search’);
function mi_search($posts) {
$s = get_query_var(‘s’);
if (condicion($s)) {
$posts = array();
$paged = intval(get_query_var(‘paged’));
if ($paged < 1) $paged = 1; $posts_per_page = intval(get_query_var(‘posts_per_page’)); $from = ($paged-1)*$posts_per_page; global $wpdb; $_posts = $wpdb->get_results(“select post_id from $wpdb->posts where loquesea order by post_id desc limit $from, $posts_per_page”);
foreach($_posts as $p) {
$posts[] = get_post($p->post_id);
}
}
return $posts;
}

add_filter(‘found_posts’, ‘mi_found_posts’);
function mi_found_posts($n) {
$s = get_query_var(‘s’);
if (condicion($s)) {
global $wpdb;
$res = $wpdb->get_results(“select count(*) as n from $wpdb->posts where condicion “);
$n = $res[0]->n;
}

return $n;
}

[/cc]