El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Estás navegando por el archivo de la categoría Scripts

Ajax AutoSuggest v2: sugerencias automáticas para tus campos de texto

Ajax AutoSuggest

Con Ajax AutoSuggest podras facilitar la labor de introducir texto en los campos de los formularios de tu sitio.

La clase AutoSuggest
añade un menú emergente con valores sugeridos a un campo de texto. El usuario podrá o hacer click directamente sobre cualquiera de los valores sugeridos o navegar por la lista usando las flechas arriba y abajo, seleccionando las opciones con el tabulador.
Los valores de la lista de sugerencias serán extraídos de un archivo XML.

Mas información y descarga:
Ajax AutoSuggest v2

AJAX, Javascript, Scripts

4 Comentarios

WYMeditor: Un editor web WYSIWYM

WYMeditor

WYMeditor es un editor web WYSIWYM, en principio similar a openWYSIWYG, del que ya comentamos las características. No obstante WYMeditor está enfocado a crear código XHTML válido, liberando al usuario de los aspectos de presentación que recaen sobre las hojas de estilo (preestablecidas en el sitio web). Comparado con openWYSIWYG, WYMeditor busca menor «potencia» y mayor simplicidad de uso y cumplimiento de los estándares.

Principales características:

  • XHTML estricto y CSS válido
  • No formatea texto, ni tamaños ni colores – WYMeditor está basado en CSS
  • Diseñado para ser sencillamente integrado en tu aplicación
  • Sin instalación, 100% Javascript, sin plugines ni extensiones
  • Código Javascript sencillo. No necesitas ser un Gurú para entenderlo
  • Se mantendrá tan simple como sea posible
  • Enfocado a un código bien testeado, estable y usable antes de añadir nuevas características
  • Soporte para imágenes, enlaces y tablas
  • Personalizable mediante CSS
  • Libre y Open Source

WYMeditor: http://www.wymeditor.org
Documentación: http://trac.wymeditor.org/trac/

Edit: Puede que moleste un poco el cambio de titulo y permalink (espero que no demasiado). Corrijo un error que me apunta Leandono en los comentarios. No es un editor WYSIWYG (lo que ves es lo que obtienes) si no un editor WYSIWYM (lo que ves es lo que quieres decir). Gracias :)

Recursos, Scripts

3 Comentarios

Limpiando el texto por defecto de los campos de texto con Javascript

Sin duda, de entre todos los cambios que le hice al blog este fin de semana, el más interesante desde el punto de la usabilidad y la accesibilidad ha sido mejorar los formularios y una de las mejoras ha sido la siguiente.

Como dicen las pautas de accesibilidad (Prioridad 3, en este caso)

10.4 Hasta que las aplicaciones de usuario manejen los controles vacíos correctamente, incluya valores por defecto en campos de texto y cuadros de verificación.

Muy bien, introducimos un valor por defecto en los campos de texto. No obstante, es realmente molesto tener que borrar el texto para poder comenzar a escribir. Ahí es donde entra el Javascript, este blog siempre ha tenido un simple toquecito de Javascript para solventar el problema (más o menos)


Esta opción siempre me había parecido una pequeña chapuza, había que incluirla a mano en todos los campos de texto, rompía con la validación del XHTML y, una vez habíamos eliminado el texto éste no volvía a aparecer.

Ayer se me ocurrió mirar si había algunasolución mejor por el mundo, de esas listas para usar (y poco pensar) y dí con esta:
Clearing Default Text
Mucho más limpio y más sencillo.

Simplemente importamos dos archivos javascript y agregamos la clase cleardefault a los campos de texto donde queramos utilizarlo.




Podéis ver un ejemplo en cualquier formulario de este sitio.

Para descargar los archivos o si queréis más explicaciones sobre el script, su funcionamiento y el código, dirigios artículo original: Clearing Default Text

Javascript, Scripts, Usabilidad y Accesibilidad

2 Comentarios

CLASS.UPLOAD.PHP: subir y manipular imágenes con PHP

class.upload.php CLASS.UPLOAD.PHP es un script que nos permitirá subir archivos y manipular imágenes de una forma simple.
Puede convertir, cambiar de tamaño y trabajar con imágenes subidas de múltiples formas: añadir etiquetas, marcas de agua, reflejos etc.

Utiliza la librería GD y está liberado bajo licencia GNU GPL, aun que también puedes comprar una licencia comercial si quieres redistribuir tu trabajo sin las restricciones impuestas por la GPL (que tu código también sera GPL).

Si necesitas razones de peso para usar esta librería el autor te da unas cuantas, por ejemplo:

  • Con una sola imagen subida puedes hacer tantas copias, conversiones y cambios de tamaño como quieras
  • Puedes cambiar de tamaño las dimensiones de la imagen por separado, manteniendo o no el ratio
  • Sólo te permite cambiar el tamaño si la imagen es mayor o menor que las medidas requeridas
  • Puedes manipular las imagenes de muchas formas: jugar con los colores, añadir bordes, etiquetas, marcas de agua…
  • Su uso es simple pero es muy potente
  • Tiene más de 60 posibilidades de configuración documentadas

Para más información sólo tienes que visitar la página del autor, en ella encontrarás un ejemplo explicado (que es, sin duda, la forma más sencilla de comprender el uso del script).

verot.net – class.upload.php

PHP, Recursos, Scripts

12 Comentarios

Sound Manager 2: Un API de sonido para Javascript

Scott Schiller ha creado un interesante API que nos ayudará a cargar, reproducir y controlar sonido – via Flash 8 – con Javascript.

SoundManager2 es una librería de 2 archivos: un API en Javascript y una pequeña película en Flash 8 que provee de las capacidades de audio. Al combinarlos, puedes manejar tus sonidos directamente con javascript, sin necesidad de editar ninguna película Flash (aunque se incluye el código ActionScript por si te apetece).

Se trata de un proyecto totalmente libre y gratuito, liberado bajo licencia BSD.

Puedes aprender más y ver unos cuantos ejemplos en la página del proyecto: SoundManager 2

Via Ajaxian

Javascript, Recursos, Scripts

1 Comentario

openWYSIWYG: Convierte tus textareas en un potente editor WYSIWYG

openWYSIWYG interface

openWYSIWYG es un interesante editor visual de código HTML, compatible con todos los navegadores y plataformas y completamente libre, licenciado bajo LGPL.

Con él podremos convertir cualquier textarea en un editor visual, simplemente añadiendo una línea de código como esta:

Donde textarea1 es el id del textarea en el que queremos que aparezca el editor.

Entre sus características destacan:

  • Permite incluir listas, dar estilo al texto (negritas, cursivas…)
  • Creación avanzada de tablas
  • Permite alternar entre la vista de edición y la vista de código

Sólo me asalta una duda, que solventaré en cuanto haga unas pruebas (salvo que alguno me la solucionéis primero) ¿Generará código válido?

openWYSIWYG:

http://www.openwebware.com/products/openwysiwyg/
Demo:
http://www.openwebware.com/products/openwysiwyg/demo.shtml

Scripts

9 Comentarios

Visiglyphs para visualizar IP

Ejemplo de VisiglyphVisiglyph es una implementación en PHP, creada por Charles Darke, de un patrón de 9 bloques que pueden generar una imagen basándose en un valor dado.

Los datos representados son los hash de las direcciones ip con una pizca de sal. Una implementación interesante es, por ejemplo, utilizarlo en los foros de discusión o en los comentarios de un blog para identificar de forma sencilla a ciertos trolls que postean bajo distintas identidades (a pesar de que «gracias» a los proxys no de una información muy fiable)

Ejemplo de uso de Visiglyph

En los comentarios del artículo original podréis descargar el código fuente para ir jugando.

Enlace: Visiglyphs for IP visualisation

PHP, Scripts

1 Comentario

Un editor de imágenes online en AJAX con PHP y libre

Si ha habido un sector en el que han proliferado de forma espectacular las aplicaciones web es en el de la edición de imágenes online. No obstante, hasta ahora no se había liberado un script de calidad con el que pudiesemos jugar.

Peter Frueh nos regala bajo licencia LGPL un script que nos permitirá editar online imagenes jpg. El script formaba parte de un CMS y, a pesar de no contar con documentación, es muy sencillo de hacer funcionar.

Ajax Image Editor

Puedes ojear un ejemplo o descargar el archivo en el artículo original, en inglés:
Ajax Image Editor Using PHP

Via Ajaxian

AJAX, PHP, Scripts

2 Comentarios

Uniendo automáticamente y versionando archivos CSS/JS con PHP

Cuando trabajamos con sitios grandes (y no tanto) suele resultarnos mucho más útil y cómodo manejar muchos archivos más pequeños en lugar de uno grande. En principio, no hay ningún mal en ello salvo que, cuando la página vea la luz, realizará muchas peticiones al servidor y esto es especialmente importante en el caso del Javascript que detiene el renderizado de la página mientras carga.

Una solución sencilla consiste en unir manualmente los archivos antes de subirlos al servidor, con los subsiguientes cambios y molestias que nos supondrían las actualizaciones y las nuevas versiones.

Para ahorrarse todo este trabajo de unir y versionear manualmente los archivos de sus sitios, Ed Elliot, ha creado un script en PHP que se encargará precisamente de todo ese trabajo sucio. Además, y como detalle extra a una gran idea, los archivos JS pueden comprimirse con JSMin

Toda la información de uso y demás en el post original, en inglés: Automatic merging and versioning of CSS/JS files with PHP

CSS, Javascript, PHP, Scripts

1 Comentario

Scriptvote: Scripts listos para usar, seleccionados por los usuarios

Los sitios tipo Digg dedicados a los webmasters cada día son más en el mundo angloparlante (¿nos estará haciendo falta algo así en castellano?), en este caso via eHub, he descubierto un servicio interesante.

Scriptvote es un sitio comunitario centrado en los scripts listos para usar. Hay de todo y esperemos que el filtro de los usuarios sea efectivo para que, además, sean buenos scripts.

Scriptvote: http://www.scriptvote.com/

Recursos, Scripts

Comenta

Información:

Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna