30 sliders, scrollers y scrollbars hechos con javascript/ajax 0

javascripts sliders

Una de las posibilidades que javascript haciendo uso de ajax, nos permite es la creacion y modificacion de ciertos elementos neutros de nuestro navegador, en este caso hablamos del scrollbar, ya muchos han de conocer la opcion de cambiar el diseño de nuestros scrollbars usando CSS, pero esa tecnica solo funciona para Internet Explorer.

Bien haciendo uso de Ajax podemos crear nuevos scrollbars, sliders como el del menu de apple, y scrollers bastante dinamicos y utiles, en noupe han recopilado 30 scripts javascripts y ajax para crear sliders, scrollers y scrollbars.

Enlace: 30 Javascript/Ajax techniques for sliders, scrollers and scrollbars

Efecto cambio de pagina con jQuery 0

efecto de cambio de paginas con jQuery

jQuery si bien no es el framework de javascript con mas efectos, al menos no tantos como MooTools, tambien se pueden lograr cosas bastante buenas si no que mejores, una prueba de esto es el siguiente efecto.

Se trata de simular el efecto de cambiar de pagina de un libro o revista quien dice que solo flash hace esto? pues no javascript y ajax estan demostrando su poderio y han logrado que muchos eviten flash y usen los efectos de los frameworks.

Enlace: Page turner with jQuery

60 soluciones ajax y javascript para desarrolladores

Ajax y Javascript se han convertido en el elemento clave para identificar si un sitio web esta en la categoría web 2.0 o no, sin embargo el aplicar de una manera efectiva estas acciones puede resultar tedioso, asi que para ayudarte un poco, aqui te dejo una excelente recopilación de Smashing Magazine que lista 60 soluciones en Ajax y Javascript para desarrolladores.

Enlace: 60 More Ajax and Javascript solutions

# (Nadie ha comentado)

Subir multiples imagenes, como en Wordpress 2.5 3

solo imagenes

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

Fancy Upload

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

SWF Upload

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:

  1. var swfu;
  2. window.onload = function () { swfu = new SWFUpload({
  3. file_post_name : “Filedata”,
  4. upload_url : “http://www.swfupload.org/upload.php”,
  5. flash_url : “http://www.swfupload.org/swfupload_f9.swf”,
  6. file_size_limit : “20480″,
  7. file_types : “*.jpg;*.gif”,
  8. file_types_description: “Web Image Files”,
  9. }); };

HTML

  1. <form> <input id=“Filedata” name=“Filedata” type=“file” />
  2. </form>

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.

Proyecto: PHP to JavaScript, php.js 0

phpjs2 PHP to JavaScript es un excelente proyecto del cual me he encontrado hace 3 días pues andaba buscando una función de JavaScript que hicieron lo mismo que hace number_format() en PHP.

Se trata de un archivo .js (JavaScript) con una serie de funciones en JavaScript que son equivalentes a funciones en PHP.

Es un recurso realmente útil ya que ay funciones en PHP que nos pueden sacar del apuro en JavaScript, entre las funciones rescritas están:

  • file
  • file_get_contents
  • array_fill
  • explode
  • md5
  • utf8_decode , utf8_encode
  • end
  • trim
  • print_r
  • stripslashes
  • rand
  • include, require, include_once, requiere_once
  • printf
  • strip_tags

y un largo etc….

Esta bajo MIT License lo que quiere decir que es gratuito, contiene alrededor de 100 funciones rescritas de PHP a Javascript, las cuales han sido desarrolladas por un gran numero de programadores, y la puedes descargar tanto en su versión extendida que pesa poco mas de 100kb o su versión comprimida de 37kb.

Enlace: PHP to Javascript Project

Muestra imagenes como en iTunes usando Javascript 0

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.

Coverflow Web con Prototype y Scriptaculous

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

Enlace: ProtoFlow - Descargar ProtoFlow 

via Ajaxian 

Corta imagenes usando Prototype y Script.aculo.us 0

Prototype Javascript image cropper UI (uufff que nombre tuve que leerlo 3 veces), es una interesante herramientra para editar imagenes en linea, que facilmente puede ser implementada en tu sitio web, fue desarrollada con Prototype y Script.aculo.us.

Editor de Imagenes Online Gratis

La herramienta te permite hacer varias cosas todas destinadas unicamente a cortar una porción de la imagen sin alterar la original.

Requerimientos: Prototype v1.5 rc_0 y Script.aculo.us v1.6.1

Enlace: Prototype Javascript Image Cropper UI | Ver Demo

via Web Resources Depot

suscribete via RSS suscribete via Correo Electronico

Google

Web www.frogx3.com

  • Free Advertising