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

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…

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

Ya podemos disfrutar de la versión final de Opera 11

Categoria : Informatica, Javascript, Navegadores, Software · No Comentario · Por Dec 16th, 2010

Version final de Opera 11

Aparece la versión final del navegador innovador Opera 11, y nos trae nuevas características como les habíamos indicado meses atrás. A continuación enumeraremos las funcionalidades más populares.

Funciones Populares

  • Tab Stacking, o apilamiento de ventanas (Agrupación de ventanas).
  • Extensiones al estilo del navegador Chrome.
  • Descargas en Orden.
  • Corrección de ortografía.
  • El motor JavaScript Carakan.
  • Soporte para Geolocalización.

También se han hecho muchas correcciones de fallos comúnmente llamados bugs, si desean ver la lista completa de funciones de esta versión Opera 11, pueden hacer click aquí.

Descarga: Opera 11
Sitio oficial: Opera


Close Pixelate: Efecto de pixel a imágenes con HTML5

Close Pixelate: Efecto de pixel a imágenes con HTML5

Close Pixelate es un script que convierte una imagen normal y aplica un efecto tipo pixel como pueden ver en la imagen superior, todo esto a través de HTML5 y canvas. Podemos “jugar” con los siguientes parámetros: resolución, forma del pixelado, tamaño, desplazamiento y canal alpha.

[cc lang=”javascript” tab_size=”17″ lines=”40″]
var docReady = function() {
document.getElementById(‘portrait-image’).closePixelate([
{ resolution : 24 },
{ shape : ‘circle’, resolution : 24, size: 16, offset: 12, alpha: 0.5 }
]);
};
window.addEventListener( ‘DOMContentLoaded’, docReady, false);
[/cc]

Más Información: Close Pixelate
Vía: WebAppers y SentidoWeb


Ideone: Un compilador online con buenas características

Ideone: Un compilador online con excelentes características

Ideone es un compilador y depurador de código de programación capaz de trabajar con más de 40 lenguajes.

Su uso es muy sencillo, primero deberán seleccionar el lenguaje de programación ubicado en la parte izquierda, como dijimos anteriormente existen 40 lenguajes. La imagen nos muestra una pequeña porción de código en el lenguaje de Java.

Ideone presenta restricciones acerca del tamaño del código, un usuario registrado puede guardar cualquier trozo de código que haya probado anteriormente. Pero más interesante es ver los últimos trozos de código ejecutados en este sitio. Interesante si estás empezando a aprender un lenguaje, o si, simplemente, te preguntas qué aspecto tendrán algunos lenguajes de programación.

Debido a que se puede compilar y ejecutar un código, sin demasiadas restricciones y sin ninguna instalación en tu computadora, parece una buena herramienta para entornos educativos dedicados al mundo de la programación.

Sitio Oficial: Ideone
Vía: Genbeta


jDigiClock: Reloj HTC Hero con jQuery

HTC Interface

Andres Nieto nos cuenta sobre jDigiClock: un plugin jQuery que nos permite conseguir un reloj, inspirado en la interfaz del móvil HTC Sense, e integrarlo en los proyectos web que estes desarrollando, claro deberás consultar a tu cliente si le parece la idea…

Como lo Uso?

Como todo plugin jQuery debemos cargar los ficheros Javascript necesarios.

[cc lang=”html” tab_size=”5″ lines=”-1″]

[/cc]

Una vez cargados ya podemos crear nuestro reloj llamando al plugin indicando el ID del elemento HTML contenedor y especificando una serie de parámetros de configuración.

[cc lang=”html” tab_size=”5″ lines=”-1″]
// HTML

// Javascript

[/cc]

Configuración

Disponemos de una serie de parámetros para personalizar nuestro reloj:

* clockImagesPath: Directorio de imágenes del Reloj
* weatherImagesPath: Directorio de imágenes del tiempo
* am_pm: Booleano para especificar AM/PM
* weatherLocationCode: Código de tu cuidad para el tiempo (Base de datos: WeatherLocationDatabase.txt).
* weatherMetric: Medición de la temperatura (C/F)
* weatherUpdate: Tiempo de actualización del tiempo