Recursos web, diseño, joomla!, tutoriales, opinión, algunas noticias...

Suscríbete a través del feed RSS
Recibe los últimos artículos a tu e-mail
Realizar una búsqueda

AutoSuggest: Sugiriendo palabras usando Ajax Compartelo!
sábado, 17 de marzo de 2007

¿Quieres agregar la posibilidad de sugerir palabras en los campos de texto como hace Google Suggest ?

Autosuggest
 

AutoSuggest permite mostrar en los campos de textos un globo con sugerencias de palabras para conveniencia del usuario. Por si fuera poco posee un diseño muy agradable, con la posibilidad de modificarlo. Además funciona tanto en IE 6/7 como en Firefox, Opera y Safari [ Ver ejemplo ]

 

 
Nueva versión de jActivating (antes JS Embedded Content) Compartelo!
miércoles, 14 de marzo de 2007

jActivating (antes llamado JS Embedded Content ) es un pequeño script "no obstructivo" que permite interactuar con contenido embebido (películas Flash, películas Quicktime, applets de Java, etc.) sin tener que primero activarlos manualmente en Internet Explorer y Opera por el famoso caso EOLAS.

La última versión estable del script es la 1.1.1 y ya posee una versión 1.2.0 alfa con varias características interesantes. Además jActivating fué relanzado bajo dominio público. Enhorabuena a David Muñoz (creador) por el script y por informarme de la noticia!

 

 
swfIR, agregando efectos a nuestras imágenes con Flash y JavaScript Compartelo!
lunes, 05 de marzo de 2007

swfIRCombinando Flash y JavaScript, swfIR (SWF Image Replacement) es un nuevo desarrollo que permite agregar de manera fácil efectos a nuestras imágenes. Estos efectos van desde sombras degradadas y bordes redondeados hasta rotación y elasticidad.

Para utilizar a swfIR debemos contar con dos archivos que vienen en el paquete de descarga : swfir.js y swfir.swf. Lo siguiente será añadir la librería JS a nuestra web:

 

HTML
  1. <script type="text/javascript" src="swfir.js"></script>

  

Luego tendremos que incorporar las funciones y parámetros para agregar los efectos. La estructura JavaScript básica es:

 

  1. window.onload = function() {
  2.   var sir = new swfir();
  3.   sir.specify([parametro], [valor]);
  4. }

 

En donde parametro es el efecto que queremos incorporar seguido por su valor (numero, booleano o string, dependiendo del efecto). De esta forma si queremos incorporar a todas las imágenes de una página un efecto de sombra degradada, borde redondeado y una rotación de 15 grados tendremos que incorporar antes de cerrar el body:

 

HTML
  1. <script type="text/javascript">
  2. window.onload = function(){ 
  3.   sir = new swfir();
  4.   sir.specify('src', 'swfir.swf');
  5.   sir.specify("shadow-offset", "10");
  6.   sir.specify("shadow-color", "666");
  7.   sir.specify("shadow-blur-x", "10");
  8.   sir.specify("shadow-blur-y", "10");
  9.   sir.specify("border-radius", "30");
  10.   sir.specify("rotate", "15");
  11.   sir.swap("img");
  12. }
  13. </script>

 

Quedando las imágenes de este modo :

 

Ejemplo de swfIR  

 

En caso de querer solo aplicar el efecto a una sola imagen tan solo debemos especificar su id o clase que le hallamos asignado:

 

HTML
  1. <script type="text/javascript">
  2. window.onload = function(){ 
  3.   sir = new swfir();
  4.   sir.specify('src', 'swfir.swf');
  5.   sir.specify("shadow-offset", "10");
  6.   sir.specify("shadow-color", "666");
  7.   sir.specify("shadow-blur-x", "10");
  8.   sir.specify("shadow-blur-y", "10");
  9.   sir.swap("#imagen img");
  10. }
  11. </script>

 

 

De esta manera le asignamos sombra a  las imágenes que tengan el id imagen.

En conclusión swfIR es una interesante tecnología para aplicar efectos, pero que posee un par contras, su peso (22 KB) y su velocidad de renderización, que puede tardar varios segundos dependiendo de la cantidad de imágenes y su peso. La elección de utilizarlo o no va a depender de cada uno.

Finalmente vale aclarar dos puntos: La librería swfir.js trae incorporada una versión modificada de SWFObject para no tener problemas con Internet Explorer , esto hace que su peso sea elevado (al ser dos scripts en uno). Y si el usuario posee desactivado JavaScript o Flash, las imágenes se mostrarán normalmente.

 

 

 

 
OpenLayers, la alternativa Open Source a Google Maps Compartelo!
sábado, 17 de febrero de 2007

Con varios puntos a su favor, OpenLayers vendria a ser la alternativa libre a Google Maps. Hecho 100% en JavaScript, se destaca su simpleza para poder integrarlo a una web.

 

OpenLayers

 

Además de tener las opciones básicas para moverse y hacer zoom,  OpenLayers no solo puede renderizar sus propios mapas, sino también permite integrarlo con los de Google, Yahoo o Live Local. Por si fuera poco podemos incorporar capas a los mapas y utilizar su API para crear aplicaciones online .

La forma más básica y rústica de integrarlo es incorporando en <body>:

 

 

HTML
  1.       src="http://openlayers.org/viewer/"
  2.       width="450" height="300"
  3.       scrolling="no"
  4.       marginwidth="0" marginheight="0"
  5.       frameborder="0">
  6. </iframe>

  

Como digo, esta es la forma más rústica, la manera correcta y "final" es utilizando su librería JavaScript e incorporando todos los parámetros (como se hace en ejemplo )

Vale la pena echarle un vistazo, el paquete de descarga trae una documentación muy completa con varios ejemplos para ver su funcionamiento.

 

 

 

 
JS3D: Nueva librería JavaScript para crear objetos 3D Compartelo!
sábado, 03 de febrero de 2007

Bajo licencia GPL , a salido a la luz una nueva librería JavaScript llamada JS3D , la cual permite crear objetos 3D y poder interaccionar con ellos [Ver ejemplo]. Por ahora es solo una versión Alpha, pesa 6 KB y posee compatibilidad con Firefox, Safari e IE7.

 

 
<< Inicio < Anterior 1 2 3 4 5 6 7 8 9 10 Siguiente > Final >>

Resultados 36 - 40 de 56