aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Pixastic es una librería desarrollada en Javascript con la que será posible hacer un Photoshop Online en tu propia web. Usando las propiedades del elemento <canvas /> que únicamente tienen disponible los navegadores como Firefox 2+, Opera 9.5+ y Safari/WebKit con la ultima versión disponible.

Esta librería nos permite aplicarle efectos a nuestras imagenes en tiempo real con una velocidad similar a la que nos ofrecen las herramientas de escritorio. Nos han montado un ejemplo para que podamos verlo funcionando y la verdad es que me ha sorprendido la velocidad con la que se aplicaban los efectos.

var img = document.getElement("myImage"); // get the image element

if (img.complete) {	// make sure the image is fully loaded
	Pixastic.process(
		img,
		"brightness",	// brightness/contrast adjustment

		{		// options object

			"brightness" : 60,	// set brightness option value to 60
			"contrast" : 0.5,	// set contrast option value to 0.5,
			"rect" : {		// apply the effect to this region only
				"left" : 100,
				"right" : 100,
				"width" : 200,
				"height" : 150
			}
		}
	)
}

Documentación / Descargar

Si aún no has hecho una galería en condiciones es por que no has querido. Con la cantidad de plugis, aplicaciones y códigos que os he ido mostrando habéis tenido posibilidad, pero si así y todo nunca os habéis aventurado o simplemente no hacía falta hacerlas, os recomienda Galleriffic.

Se trata de un plugin desarrollado sobre jQuery, que permite que crear una galería de imagenes con los ojos cerrados.

¿Como montarla?

Primero hemos de crear el contendor en el que irán las imagenes y controles:

<div id="content">
	<div id="controls"></div>
	<div id="slideshow"></div>

	<div class="embox">
		<div id="download"><a id="download-link" class="download">Download Original</a></div>
		<div id="image-title"></div>
		<div id="image-desc"></div>
	</div>
</div>
<div id="navigation"></div>

Una vez ya declarada la estructura de nuestra galería únicamente tendremos que indicar las imagenes que queremos mostrar, para ello usaremos Javascript.

var data = [ 
	{
		slide: 'http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg',
		thumb: 'http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg',
		original: 'http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg',
		title: 'Title #0',
		description: 'Description'
	},
	...
];

Así, todas las imágenes que deseemos, indicando un título y una descripción que veremos en parte inferior de la galería.

$(document).ready(function() {
	var gallery = $(document).galleriffic.init(data, {
		delay:                2000,
		numThumbs:            12,
		imageContainerSel:    '#slideshow',
		thumbsContainerSel:   '#navigation',
		controlsContainerSel: '#controls',
		titleContainerSel:    '#image-title',
		descContainerSel:     '#image-desc',
		downloadLinkSel:      'a#download-link'
	});
});

Una vez definidas las imágenes solo nos queda indicar mediante jQuery que elementos interfieren en la galería, el número de miniaturas y el tiempo que tarda la transición de los efectos.

Personalmente no es de las que más me gusten, pero es realmente fácil.

Las aplicaciones online están invadiendo Internet, con la intención de convertirse en sustitutos de las aplicaciones de escritorio más famosas.

Los editores de imagenes intentan plantarle cara a aplicaciones como Photoshop, GIMP, Pixelmator,… aún les queda un largo camino para poder ofrecer las funcionalidades que sus parientes de escritorio, pero poco a poco van cogiendo forma y ofreciendo una funcionalidad básica (y en ocasiones no tan básica :D).

1. Pixer.Us
2. Photoshop Express
3. Pixenate
4. Picture2Life
5. Snipshot
6. Picnik
7. Cellsea
8. Pixlr
9. Improve Your Images
10. EasyCropper
11. Phixr
12. FlauntR
13. Splashup
14. Resizr
15. Online Image Editor

Cuando queremos mostrar una galería de imagenes, siempre podemos optar por un sistema que nos las vaya mostrando como si de diapositivas se trataran, sin necesidad de interactuar (o muy poco) e ir viendolas una a una. Javascript es el lenguaje perfecto para ello ya que nos permite añadir dinamísmo de una forma rápida y sencilla, además gracias a los frameworks de los que disponemos en la actualidad, esta tarea es todavía más fácil.

Veamos 10 galerías dinámicas para usar en nuestras aplicaciones:

1. SpaceGallery / jQuery / 8kb
2. noobSlide / MooTools / 4kb
3. Accesible News Slider / jQuery / 4kb
4. SmoothGallery / MooTools / 52kb
5. jQuery Multimedia Portfolio / jQuery + dimensions + UI / 32kb
6. jCarousel / jQuery / 12kb
7. Glider / Prototype + Script.aculo.us / 5kb
8. Carrousel / YUI / 24kb
9. Carrousel Slideshow / No Framework / 8kb
10. Carousel.us / Prototype + Script.aculo.us (o MooTools) / 8kb

Los pesos de los scripts solo hacen referencia al JS de la galería, los CSS, Imagenes, y frameworks no los he contado.

Via

Unos de los puntos flacos de WordPress siempre ha sido la dificultad de trabajar con imagenes, por ello, plugins como MultiUploader 4 WordPress y ImagesControlSize han sido de los plugins más descargados de la web. Con ellos podíamos corregir de forma fácil y cómoda ciertas carencias de WordPress.

Este fin de semana he estado revisando el código de WordPress para ver como migraba estos plugins a la nueva versión. Tras 5 min revisando el código me ha dado por mirar el funcionamiento actual desde el Media Library para ver que tal funcionaba con los cambios de hoy y bueno, he llegado a la conclusión de que no he de hacer nada.

WordPress 2.5 integra todo lo que MultipleUploader 4 WordPress e ImagesControlSize pueda ofrecerle al usuario.

MultiUploader

Mediante SWFUpload y jQuery, consiguen que subir multiples imagenes a nuestro WordPress sea tan fácil como seleccionarlas desde el componente del navegador.

Tamaño de las miniaturas

Para solucionar el problema de las miniaturas, WordPress ha añadido una opción al dashboard para gestionar el tamaño de dos posibles miniaturas, thumbnail y medium size. Para encontrar dicha opción, nos iremos a Settings > Writing

Despues, desde el panel de insercción de imagenes, podremos seleccionar entre las 3 posibilidades existentes, thumbnail, medium y full.

¿Cuando saldrá?

 Pues la verdad, es que desde que Alex publicó que no saldría la semana pasada, he visto como el SVN se ha revolucionado a la orden de 20-50 ficheros modificados diariamente. Personalmente lo veo muy justo para que este Lunes (osea mañana) salga, pero no pondría la mano el fuego en que no lo vayan a sacar… así que … tendremos que esperar y ver como evoluciona el tema.

Google Maps es la herramienta de Google que ha revolucionado la idea de los mashups en Internet. Gracias a la geolocalicación, aplicaciones como Panorámio son posibles. Algo que se echaba en falta era la posibilidad de usar los mapas como imagenes estáticas, y ahora eso es posible.

Para usar estas imagenes necesitaremos disponer de una key, que obtendremos al registrar nuestro sitio en Google Maps API. Una vez con esta key, podremos obtener la imagene estática como si de una imagen externa a nuestro server se tratara.

<img src="http://maps.google.com/staticmap?center=47.238336,8.827171&zoom=12&markers=40.416741,-3.70325,red&size=512x512&key=MAPS_API_KEY">

Si descomponemos la URL veremos los diferente parámetros que intervienen y con los que podemos personalizar nuestro gráfico.

• center:              //Centro de la imagen (ej: 0.0000,0.0000)
• zoom:                //Zoom que se le aplica a la imagen, de 0 a 19 (0 más lejos, 19 más cerca)
• size:                  //Tamaño de la imagen en pixeles (máximo 512×512)
• maptype:          //Tipo de mapa (roadmap => Mapa para páginas web, mobile => Mapa para bajas resoluciones)
• markers:          //Marcadores dentro del mapa. (ej: markers=40.702147,-74.015794,blues|40.711614,-74.012318,green)