Frogx.Three » Librerías...

50 increibles aplicaciones con jQuery

Jorge — Sun, 18 Jan 2009 22:46:23 +0000

Excelente recopilación de aplicaciones con jquery, es una selección de impresionantes aplicaciones web que utilizan jQuery para mejorar la usabilidad y sus caracteristicas, muy buena la selección tan recomendable como el considerar utilizar este framework de javascript.

Enlace: 50 stunning jquery applications

Utiliza cualquier tipografía en web con Javascript

Jorge — Sun, 02 Nov 2008 22:00:45 +0000

Typeface.js es la librería javascript esperada por muchos diseñadores, typeface mediante el uso de

Es decir normalmente en un diseño web únicamente puedes utilizar tipografías como Verdana, Arial, Georgia u cualquier otra con el único requisito que esa fuente exista en el equipo de tu visitante, cosa que generalmente no sucede.

Typeface soluciona este detalle dando la posibilidad de usar cualquier tipografía sin necesidad de preocuparte, como se hace y cuales son su ventajas en comparación a otras alternativas como sIFR3 y FLIR?

Ventajas

Legibles para buscadores
No es necesario Flash ni PHP, solo javascript el 99% de los navegadores lo tiene.
Multiplataforma
Fácil de utilizar
Ligero
Permite seleccionar y copiar el texto

Como utilizarlo?

1.-Descargar la libreria TypeFace.js

2.-Renombrar la fuente que deseas utilizar por ejemplo de: helvetica.ttf > helvetica.typeface.js

3.-Utilizar el siguiente codigo en la cabezera




	Text here in Helvetiker font...

Eso es todo en caso de que el script no pueda cargar la fuente personalizada esta mostrara automáticamente la dispuesta como fuente por default para el sitio web.

Si quieres puedes ver algunos ejemplos del uso de este excelente script:

Ejemplos de typeface

Vía: Render text with javascript typeface

Subir multiples imagenes, como en WordPress 2.5

Jorge — Thu, 03 Apr 2008 10:35:43 +0000

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:

[code lang="javascript"]
var swfu;
window.onload = function () { swfu = new SWFUpload({
file_post_name : "Filedata",
upload_url : "http://www.swfupload.org/upload.php",
flash_url : "http://www.swfupload.org/swfupload_f9.swf",
file_size_limit : "20480",
file_types : "*.jpg;*.gif",
file_types_description: "Web Image Files",
}); };
[/code]
HTML
[code lang="html"]

[/code]

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.

Muestra imagenes como en iTunes usando Javascript

Jorge — Wed, 12 Mar 2008 22:28:29 +0000

Si ponia el titulo que herramientas usa el siguiente recurso estuviese demasiado largo, pero bueno aqui va, Coverflow es la forma como se muestran las portadas de los discos en tu iTunes el estilo es bastante atractivo y han salido muchos intentos por portar esa interface a Web (Coverflow en Flash) y bueno pues aqui va uno mas se trata de ProtoFlow el cual usando enteramente Javascript mas concretamente Prototype y Script.aculo.us han conseguido simular el mismo efecto de la interface de iTunes.

El resultado final es bastante bueno si no me creen pues vean este demo, demo de protoflow.

Enlace: ProtoFlow – Descargar ProtoFlow

via Ajaxian

Haz tu codigo XHTML Valido incluso con Objetos Flash

Jorge — Mon, 21 Jan 2008 13:03:41 +0000

Por mas que intentemos que nuestro codigo XHTML pase las pruebas de validacion de la W3C siempre se nos escapa algo y en los blogs el común denominador son los videos de youtube u otro sistema mas concretamente los objetos flash que insertemos ya que el codigo para el embed suele tener ciertos parametros que no permiten que nuestro codigo sea valido.

Pero para todo hay solución, se llama SWFObject es una libreria javascript que nos permite de manera sencilla insertar un objeto flash haciendo su codigo completamente valido.

Ejemplo Usando SWFObject:

[code lang="html"]

To view this, you need to install the Flash Player 7.

Please go
here and download it.

[/code]

Si ves mucho rollo ahi pues mira que solo basta con insertar una lista como esta:

[code lang="html"]

var so = new SWFObject('swf/header.swf', 'flash-header', '500', '200', '7', '#fff');

//var so = new SWFObject('archivo swf', ‘ID del objecto', ‘ancho', ‘alto', ‘version de flash requerida', ‘color de fondo en formato HEX');

[/code]

Es sencillo utilizar esto, apoco no?

Enlaces:

El directorio de apps ajax AjaxRain cambia de look

Jorge — Wed, 09 Jan 2008 13:32:14 +0000

Ya con un total de 913 aplicaciones en Ajax en sus directorios este moustro que recopila widgets ha cambiado su look sufriendo un rediseño con u nresultado basatente bueno.

El toquer web 2.0 no lo ha perdido, han dejado un estructura que facilita al maximo la lectura, felicidades a la gente detras de este gran directorio de aplicaciones en AJAX, dieron un paso adelante.

Entre los cambios que consideraron esta la adición de 2 secciones que manejan los ultimos scripts y los mas populares asi como las implementación de Feeds de Digg, Ajaxian y Del.Icio.Us

Enlace: AjaxRain [931 +]

Via: Ajaxian

Iconos, Frameworks, Mashups, Tutoriales, Tips y Utilidades para GoogleMaps

Jorge — Tue, 18 Dec 2007 12:22:42 +0000

Antes que nada una disculpa por la falta de constancia estos dias pero el trabajo apremia, pero bueno aquí les dejo un post porque igual ando muy cansado y en un rato comienza la posada del Citi Centro (es el edificio donde esta ubicado mi oficina).

Bueno pues e estado trabajando en reescribir un plugin para un CMS que tenemos en la oficina el cual busca explotar la API de Google Maps, durante este proceso me e encontrado con muy buenos tutoriales, utilidades y tips, y pues bueno aquí se los comparto son algunos sitios que tienen estas herramientas para el desarrollo con el API:

FrameWorks para programar con Google Maps API

Set de Iconos para Google Maps

Inicia tu Web OS con MooTools y Mocha UI

Jorge — Thu, 22 Nov 2007 21:39:13 +0000

MooTools Mocha UI es una excelente clase que aprovechando la potencia de MooTools v1.2 nos brinda la posibilidad de generar ventanas flotantes con una buena cantidad de efectos, utilizando canvas para generar las curvas en las ventas y otros aspectos pero sin duda la propiedad a considerar es su peso ya que es una libreria que pesa apenas 15 kb.

Sin duda una alternativa para empezar a crear tu Web OS, entre sus características estan :

No utiliza imágenes, el diseño de las ventanas es generado mediante canvas.
Esquinas redondeadas ajustables.
Las ventanas pueden activarse, maximizarse, arrastrarse y re-dimensionarse.
Permite la generación de ventanas de manera dinámica.
Cuando la ventana es maximizada esta se ajusta al tamaño de la ventana en caso que esta sea redimensionada.
Es mínimo el HTML que se utiliza para generarse.
Probado con Firefox 2, Internet Explorer 6 & 7, Safari 2, and Opera 9.

Su creado de nombre Greg tiene en mente ya mas caracteristicas entre las que estan (ver despues del salto):

Creación de los scrollbars con canvas.
Añadir ventanas modales.
Añadir mas opciones a la clase para hacerla mas personalizable.
Añadir opcion para minimizar ventanas.
Añadir un dock.
Permitir ajustar la densidad de las sombras.

via Ajaxian

Liberado Prototype 1.6.0 y Script.aculo.us 1.8

Jorge — Wed, 07 Nov 2007 22:19:31 +0000

Las nuevas versiones de dos de los frameworks en javascript mas utilizados en la red han sido liberadas el dia de hoy, ambas traen muchos cambios y mas errores arreglados como cada subversion, pero en el caso de script.aculo.us 1.8 esta ya trae integrado prototype 1.6.0, a la vez liberaron un libro solo que este tiene un costo de $22 dlls.

Menu estilo Mac, Lista de Mesnus Fish Eye OpenSource

Jorge — Tue, 30 Oct 2007 07:59:10 +0000

A quien no le gusta el estilo del Menu del Dock de Mac, pues WebAppears nos dejo una excelente lista de menus como los del Dock de Mac (Fish Eye) totalmente OpenSource y para web, le podras dar un toque de Mac a tu web esto siempre le da frescura a un sitio solo que no lo cargues mucho que la frescura se convertiria en espanto para tus usuarios.

Enlace: Nice List of Open Source Fish Aye Menu