Con salida de Wordpress 2.5 una de las características que talves llamen mas la atención es la posibilidad de subir múltiples imágenes al mismo tiempo, pero no solo eso también te muestre un barra de porcentaje para saber cuanto se subio, y al menos WordPress no lo tiene habilitado pero estos mismos scripts te ofrecen la posibilidad que al hacer click en el botón Examinar la ventana de exploración únicamente te muestre archivos de un formato especifico, por ejemplo que solo te muestre archivos con extensiones .jpg, .gif y .png.

Pero bueno que soluciones hay para hacer esto? investigando he encontrado dos que podria decir son las mejores:

• FancyUpload
• SWFUpload (Este lo usa Wordpress 2.5)

FancyUpload

Es un libreria javascript que es dotado de toda su potencia por MooTools, es realmente facil de implementar y tiene la posibilidad de resivir varios parametros para sus funciones, sus caracteristicas son:

• Selección y cargar de múltiples archivos
• Filtro por tipo de archivo en la ventana de selección (Examinar)
• Manejo de Eventos, se puede crear nuevos eventos
• Puedes mostrar y filtrar información de los archivos antes de iniciar la carga (tamaño del archivo, tiempo de carga, etc…)
• Limites en los uploads tanto en cantidad de archivos como en su peso por Kb
• Plataforma independiente, solo necesita Flash 8 o superior
• EL proceso es discreto, desde el reemplazo del elemento hasta la carga del SWF
• Puedes cancelar cargas y añadir nuevos archivos durante la carga de un archivo, al momento
• Todo es opciones, esta documentado y es realmente fácil de editar
• Las cargas de archivos son con un estilo Ajax es decir la pagina no se recarga.
• Indicador del progreso de los Uploads

En si FancyUpload aprovecha Swiff el cual es una manera de insertar ActionScript y archivos flash mediante simple JavaScript, haciendo que el Flash este totalmente oculto al visitante pero dotando de buenas funcionalidad que el ActionScript permite.

Enlaces: Ver Demo / Pagina Oficial - Descargar FancyUpload / Foro de Soporte

SWFUpload

SWFUpload es otra librería en JavaScript que básicamente nos permite las misma funciones que FancyUpload a diferencia que esta no necesita de ningún FrameWork como es MooTools, y tampoco causa conflictos si usamos alguno, como su nombre lo dice SWFUpload también utilizan flash (SWF es la extención de los archivos resultantes de Flash) e igual que en el anterior es totalmente transparente ya que JavaScript se encarga de insertarlo.

Sus caracteristicas son:

• Selección y cargar de múltiples archivos
• Filtro por tipo de archivo en la ventana de selección (Examinar)
• Manejo de Eventos, se puede crear nuevos eventos
• Puedes mostrar y filtrar información de los archivos antes de iniciar la carga (tamaño del archivo, tiempo de carga, etc…)
• Limites en los uploads tanto en cantidad de archivos como en su peso por Kb
• Plataforma independiente, solo necesita Flash 8 o superior
• EL proceso es discreto, desde el reemplazo del elemento hasta la carga del SWF
• Puedes cancelar cargas y añadir nuevos archivos durante la carga de un archivo, al momento
• Todo es opciones, esta documentado y es realmente fácil de editar
• Las cargas de archivos son con un estilo Ajax es decir la pagina no se recarga.
• Indicador del progreso de los Uploads
• “Graceful degradation” para navegadores que no soporte el otro método.
• Los nombre de las clases permiten la compatibilidad con otras librerías de JavaScript (ej., jQuery, Prototype, etc.).
• Permite crear parámetros personalizados

Enlaces: Ver Demo / Pagina Oficial - Descargar SWFUpload / Documentación

Ambos son realmente fácil de implementar, en el caso de SWFUpload que se necesita? descargar descomprimir, incluir los archivos JS en tu archivo HTML y crear un formulario con un input del tipo file.

Mejor por si no me entendieron ni un poquito aquí les va el JavaScript que deben iniciar:

HTML

Eso es todo, lo que tienen que hacer, upload_url y flash_url, deben ser archivos contenidos en tu sitio web, en el caso de flash_url el archivo viene incluido en el archivo que descargas.

El equipo de desarrollo del Framework ExtJs anuncio el lanzamiento de la primera version alpha de su version 2.0 el cual traen un buen numero de mejores, arreglo de bugs, ahora su documentacion se ha expandido y a sido reorganizada para mayor ayuda en el soporte.

Si en la version 1.1 me sorprendieron con el wysiwig que podias crear ahora con la nueva version he quedado enamorado solo vean los ejemplos son impresionantes la cantidad de cosas que esta libreria con el avanze que tiene ya te permite hacer con unas pocas lineas.

• Ordenamiento de listas
• Creacion de portales (startups)
• Wysiwig
• Tabs
• Tabs Deslizantes
• Escritorio Web
• Ventanas Modales
• etc….

Es impresionante la libreria bastante grande el archivo de la libreria comprimido pesa 84kb (la fuente 400kb) pero si soportamos a prototype con sus 74kb porque no darle una oportunidad a este considerando que en los 84kb nos incluye un sin fin de utilidades, en esta nueva version podemos encontrar:

• Desplazamiento de Tabs
• Table Grids con opcion de agrupacion por lineas y ordenamiento por columnas, ASC, DESC, Group by Field
• Los anchos de los objetos en formularios aseguran una medida y posicion consistente cross-browser
• Menu tipo arbol (treeviews) con opcion a añadir nodos.

Personalmente le estoy empezando a utilizar en un proyecto top-secret y me esta convenciendo demasiado.

Enlace: Sitio Web ExtJS / Anuncion ExtJS v.2.0 Alpha / Documentacion v.2.0 Alpha / Ejemplos

Andres anieto a hecho una recopilacion muy completa de los diferentes scripts de ventanas lightbox que andan por la red es interesante ver la cantidad de clones que existen y mejoras para los mismos utilizando los diferentes frameworks, bastante bueno el post se los recomiendo.

via anieto2k

Te gusta netvibes? te gustaria hacer algo parecido talves no un startup pero si una aplicacion funcional y que se pueda adaptar bien y usar bloques del mismo modo que lo hacen ahi no solo el startup de netvibes hay muchos mas entre ellos el de google, yahoo y otros.

Pues bueno en xilinus que ya estan acostumbrandonos a sacar clases basadas en prototype bastante completas y de muy buena calidad ahora sacan esta Prototype Portal Class.

Aqui les dejo el ejemplo de como aplicarlo:

Primero el HTML facil y sencillo:

<div id=”page”>

<div id=”widget_col_0″></div><div id=”widget_col_1″></div>

<div id=”widget_col_2″></div>

</div>

Toca el archivo CSS aun mas facil:

#page {

margin: 10px auto;}

#widget_col_0 {

float:left;

width: 30%;

}

#widget_col_1 {

width: 50%;

float:left;

}

#widget_col_2 {

float:left;

width: 20%;

}

Ahora iniciamos la clase:

var  portal = new Xilinus.Portal(”#page div”)

Y por ultimo añadamos las cajitas (widgets) =P

portal.add(new Xilinus.Widget(), 0)

// Or with title and contentportal.add(new Xilinus.Widget().setTitle(”Widget Title”).setContent(”bla bla bla”), 1);

Eso es todo nada dificil pero ahora quieres mas estilo mas bonito mas funciones aqui les pongo mas de esto:

• url: Url a la que se hace una peticion despues de mover un widget (default null, no requests)
• onOverWidget: Un evento para ejecutar cuando el mouse este sobre el widget (default null)
• onOutWidget: Evento para cuando el mouse ya quite de encima del widget (default null)
• onChange: Evento para ejecutar algo cuando termines de mover el widget (drag & drop) (default null)
• onUpdate: Evento para ejecutar cuando termines de ejecutar un accion drag & drop (default null)
• removeEffect: Remueve un efecto animado (sin efectos por default)

Muchas funciones no lo creo se podrian hacer mas pero bueno aqui lo basico para crear este portal:

• add(widget, columnIndex): para añadir un nuevo widget .
• remove(widget): remueve un widget.
• serialize(): Convierte un string a parametros para el request de lajax.

Batante bueno el tip no creen? puede ser muy util creo ya se donde lo aplicare, ya pueden hacer su propio startup bueno casi falta mucho jeje pero lo basico ya lo tiene un poquito de CSS y JS es mas que suficiente.

Ver ejemplo / Descargar Script widgets.js

Veo en el blog de Andres una libreria (LiveValidation) mas para hacer nuestros formulario un poco mas amigables se trata de una clase en js que te permite hacer validaciones al momento de tus campos del formulario de manera muy sencilla, dando la posibilidad de hacer comprobacion de todo tipo aqui la lista de posibles validaciones:

• Presence (valida si el campo contiene algun valor o esta limpio)
  
• Format (comprueba una coincidencia en la cadena)
• Numericality (Comprueba que el valor sea numerico)
  
• Length (comprueba el largo de la cadena de texto)
  
• Inclusion (valida si el valor escrito es igual o parcialmente igual a alguno de los listados)
  
• Exclusion (validad que el valor sea diferente a cualquiera incluido en la lista)
  
• Acceptance (puede comprobar si un checked o radio esta seleccionado)
  
• Confirmation (Comprueba la coincidencia de dos campos distintos, ej. contraseña)
  
• Email (Comprueba que el valor sea un correo electronico valido)
  
• Composite validations (combining validations) (El nombre lo dice puedes combinar las validaciones anteriores)
  
• Validating entire forms (valida todo el formulario)
  
• Styling it up (permite pasarle un estilo css segun el resultado de la validacion)
  

Tambien te permite definir la accion o mensajes a ejecutar en caso de que sea validado o falle, esta bastante completa y muy recomendable.

Ejemplo:

var sayHello = new LiveValidation( “sayHello”, { validMessage: “Hey there!” } ); 

sayHello.add( Validate.Presence, 





              { failureMessage: “Don’t just ignore me, I wanna be your friend!” } );

sayHello.add( Validate.Format, 





              { pattern: /hello/i, failureMessage: “How come you’ve not said ‘hello’ yet?” } );

Este ejemplo crea lo siguiente: Valida un campo de texto con id sayHello e imprime el mensaje Hey there en caso de que la validacion sea correcta, en caso contrario imprimiria Don’t just ignore me, I wanna be your friend! , que valida? valida que lo escrito en el campo sea igual a hello en caso de que lo escrito no este correcto imprimiria How come you’ve not said ‘hello’ yet?

El codigo HTML seria:

		<p> 	          Say “hello”:<input class=“LV_valid_field” id=“sayHello” type=“text”><span class=“LV_validation_message LV_valid”>Hey there!</span>

<script type=“text/javascript”>

var sayHello = new LiveValidation(’sayHello’, { validMessage: ‘Hey there!’ });

sayHello.add(Validate.Presence, {failureMessage: “Don’t just ignore me, I wanna be your friend!”});

sayHello.add(Validate.Format, {pattern: /hello/i, failureMessage: “How come you’ve not said ‘hello’ yet?” } );

</script>

</p>

ver Ejemplos

Descargar Libreria

Leyendo el blog de Andres veo una interesante traduccion que menciona 10 punto bastante interesantes de porque MooTools[web] es tan famoso, la lista original fue realizada por Christoph , por mi lado desde el comienzo he utilizado prototype[web] sin embargo ultimamente he estado tentado a probar esta libreria ya que he utilizado algunos scripts bastante interesantes y funcionan muy bien y son bastante potentes.

1. No son solo efectos

Mucha gente cree que MooTools es únicamente para hacer animaciones, efectos a todo elemento disponible en la página. Y MooTools tiene un montón de cosas más que hacen de este framework una maravilla, drag&grop, manipulación del DOM, Extensión de funciones, Ajax, manipulación de cookies, assets, …

var droppables = $$(’div.dropper’);
var container = $(’containment’);
new Drag.Move(’dragger’, {’container’: container, ‘droppables’: droppables});

droppables.addEvent(’over’, function(){
	this.setStyle(’background-color’, ‘#000′);
});

droppables.addEvent(’leave’, function(){
	this.setStyle(’background-color’, ‘#ff3300′);
});

droppables.addEvent(’drop’, function(){
	this.setStyle(’background-color’, ‘#face8f’);
});

2. Es modular

MooTools no es un solo un framework, es completamente modular y puedes personalizar no que necesitas descargar para ahorrarte peso de javascript. Esto quizas el usuario final no entienda o no le llame la atención, pero para un desarrollador es algo realmente digno de alabar ya que es realmente complicado conseguir un alto de grado de modularidad.

3. Se lee como un libro

Leer el código de MooTools es como leer un libro, la versión con código incluido es realmente explicita y simple de entender.

/*
Function: $type
	Returns the type of object that matches the element passed in.

Arguments:
	obj - the object to inspect.

Example:
	>var myString = ‘hello’;
	>$type(myString); //returns “string”

Returns:
	‘element’ - if obj is a DOM element node
	‘textnode’ - if obj is a DOM text node
	‘whitespace’ - if obj is a DOM whitespace node
	‘arguments’ - if obj is an arguments object
	‘object’ - if obj is an object
	’string’ - if obj is a string
	‘number’ - if obj is a number
	‘boolean’ - if obj is a boolean
	‘function’ - if obj is a function
	‘regexp’ - if obj is a regular expression
	‘class’ - if obj is a Class. (created with new Class, or the extend of another class).
	‘collection’ - if obj is a native htmlelements collection, such as childNodes, getElementsByTagName .. etc.
	false - (boolean) if the object is not defined or none of the above.
*/

function $type(obj){ ….}

4. La comunidad alrededor ayuda

Esto ocurre con todas las comunidades, así que no me parece un punto muy importante. Pero el foro de MooTools no para de recibir preguntas y recibir respuestas.

Board statistics
    Total number of registered users: 5056
    Total number of topics: 5275
    Total number of posts: 26414

5. Te ayuda a crear código orientado a objetos

MooTools te permite desarrollar con un código orientado a objetos, esto debido a la capacidad que tiene de extender los objetos nativos del lenguaje.

$(’loadJson’).addEvent(’click’, function(e) {
	e = new Event(e).stop();
	var url = ‘http://demos.mootools.net/demos/Json.Remote/data.js’;
	var request = new Json.Remote(url, {
		onComplete: function(jsonObj) {
			addImages(jsonObj.previews);
		}
	}).send();
});

6. Esto es todo acerca de $type

El nativo

de Javascript devuelve cosas similares a “

“, “

“,… pero con MooTools

nos lleva a otro nivel.

var Monkey = new Class({
	initialize: function(){
		this.fruits = [];
	},
	giveFruit: function(fruit){
		//The Monkey only loves fruits!
		if($type(fruit)==’fruit’)
			this.fruits.push(fruit);
		return this;
	}
});
var Banana = new Class({
	$family: ‘fruit’
});

new Monkey().giveFruit(new Banana());

7. La creación de elementos es muy fácil

Basta ver el código para ver lo fácil que es crear un elemento con MooTools.

new Element(’div’, {
	‘id’: ‘myDiv’,
	‘class’: ’someClass’,
	’styles’: {
		‘width’: ‘0px’,
		‘height’: ‘0px’
	},
	‘events’: {
		‘click’: function(){
			alert(this.getText()); //Alerts Hello
		}
	}
}).setText(’Hello’).injectInside(document.body).effects().start({
	‘width’: [0, 200],
	‘height’: [0, 100]
});

8. Gestores de eventos

MooTools incorpora su propia gestión de eventos. Puedes gestionar los eventos de todo: Clases, elementos, …

La opción más simple, la de añadir una gestión de eventos sobre un elemento sería algo tan simple como esto:

Element.Events.extend({
	‘keyenter’: {
		type: ‘keyup’,
		map: function(e){
			return e.key==’enter’;
		}
	}
});

$(’myInput’).addEvent(’keyenter’, function(){
	doSomething…
	e.stop(); //Paramos la ejecución del proceso.
});

9 . Haz que se mueva

Hacer que los elementos de tu página sean dragables (movibles) es tan fácil como esto:

$(’myElement’).makeDraggable();

10. Hay plugins y extensiones mires donde mires.

En este mismo blog he comentado muchas de las nuevas extensiones y nuevas funcionalidades que MooTools nos ofrece, y gracias a la comunidad de detrás esto irá creciendo y aportando nuevas y valiosas aplicaciones, que harán las delicias de todos.

via Anieto2k

FancyForms, es una axtension mas de MooTools que nos permite cuidar esos detalles ala hora del desarrollo dandole un aspecto mas de acuerdo al bosquejo que nos presenta el diseñador y darles un toque especial a tus formularios asi el usuario final se llevara una buena imagen de nuestro trabajo, ya que se vera cuidado, limpio y detallado, en la imagen pueden ver como son los checkbox y radios despues de aplicarles esta libreria.

La libreria solo pesa 3kb, como se aplica esto:

Incluir los script entre los heads en tu pagina:

<script type=”text/javascript” src=”js/mootools.1.11.js”></script>

<script type=”text/javascript” src=”js/fancyform.js”></script>

Y Crea el CSS para aplicarlo, ej. del css.

.demo label{display:block;padding:0.5em;padding-left:32px;background-position:8px center;background-repeat:no-repeat;border:1px solid #252525;clear:both;cursor:pointer}

.checked{background-color:#222;background-image:url(chk_on.png)}

.unchecked{background-color:#1c1c1c;background-image:url(chk_off.png)}

.selected{background-color:#222;background-image:url(rdo_on.png)}

.unselected{background-color:#1c1c1c;background-image:url(rdo_off.png)}

Ver Demostracion

Ir a Descargar

via Anieto2k