Blog Tecnológico de Azalorea

Tras implementar Google Maps en algunos proyectos decidí crear una clase (no encontré ninguna que me ofrecía lo que biscaba) con las funcionalidades que necesito.

Al final resultó ser bastante modular y supongo que le puede servir a otra gente para facilitar el uso del API. Iré ampliandola con el tiempo según surja la necesidad.

Para usar la clase hay que disponer de Prototype y Scriptaculous (builder.js para la creación de nodos en caso de querer usar controles costumizados).

El uso de la clase es muy fácil:

myMap = new azaPlotter( ‘idDivDelMapa’ );
myMap.setCoords( latitud, longitud );
myMap.add_control( ‘tipoControl’ ); // opcional
myMap.add_custom_control( {img:’pathDeLaImagen’,x:posicionX,y:posicionY,onclick:miFuncion} ); // opcional
myMap.add_marker( posicionX,posicionY, ‘texto para el tooltip’ ); // opcional
myMap.draw();

add_control(): añade un objeto control predefinido por Google como el zoom o el tipo de vista (mapa,satélite,mixto).
add_custom_control(): añade un objeto control propio… por momento solo puede ser una imagen y la posición se define partiendo del rincón derecho arriba.
add_marker(). añade un objeto tipo marcador al mapa. El tooltip aparece cuando el usuario hace click en el marcador.

La diferencia entre el objeto control y el objeto marcador está en que el control es fijo y el marcador se mueve con el mapa.

Ir a la página de la librería

Es una primera versión que seguramente irá evolucionando

[UPDATE] He creado una página aparte para la librería en la cual se podrá seguir la evolución de la misma.

Unas pocas horas tras lanzarse la nueva versión de Prototype (ver anterior artículo), Scriptaculous ha lanzado una nueva versión. A cambio de Prototype, Scriptaculous si viene con novedades.

Además de usar la nueva versión de Prototype, la librería ha implementado Effect.Morph… efectos visuales basados en CSS.

Pongamos un ejemplo:

$(’mi_elemento’).morph({color:#abcdef;fontSize:’15px’});

Esto hará que “mi_elemento”, suponiendo que contenga texto, aumente progresivamente el tamaño del texto a 15px y cambie el color de este a #abcdef.

Lo mismo se consigue si en vez de definir el estilo final se define una clase css…

CSS:
.texto_grande{
color: #abcdef;
font-size: 15px;
}

JavaScript:
$(’mi_elemento’).morph(’texto_grande’);

Con esta nueva implementación las animación también nos resultarán más fluidas ya que ahora se realizan a 60fps en contraste con los 25fps de las anteriores versiones.

Ya solo falta que Scriptaculous tenga mejor documentación .-)

Miguel

Ha salido una nueva versión de Scriptaculous en la cual han arreglado algunos Bugs y también hay nuevas funcionalidades.

La comunidad alrededor de Scriptaculous/Prototype parece haberse abierto debido al fuerte empuje de otras librerías de JavaScript que muchas veces se aprovechan de los puntos flojos de Scriptaculous cómo la documentación y el peso.

Por momento Scriptaculous/Prototype sigue siendo líder en lo que respecta al número de usuarios, pero los desarrolladores ya se han dado cuenta que tienen que cambiar su modelo si quieren seguir siendolo a medio/largo plazo.

Thomas Fuchs anuncia que se está trabajando en la versión 1.7 que saldrá con muchas novedades y paralelamente hay gente trabajando en una documentación completa de todas las funcionalidades de Scriptaculous y Prototype.

Veremos lo que nos depara el futuro

Los creadores de Moo.fx han sacado un framework que podría hacerle la competencia a Scriptaculous & Co. El nuevo jugador se llama MooTools y, aunque recien salido aún tiene sus defectos, trae todo para poder posicionarse muy adelante.

La principal ventaja que trae es la ligereza… con todas las extensiones y sin comprimir solamente pesa 35 KB. El autor mantiene que MooTools funciona en IE6 y 7, Firefox & amigos, Opera, Safari y Camino, pero algún comentario encontrado por internet afirma que en IE7 da errores.

Una gran diferencia entre Scriptaculous y Mootools es que el primero presupone muchas de las posibles opciones donde MooTools deja totalmente en la mano del desarrollador la tarea de definir las opciones… hasta el punto de no funcionar si alguna opción no ha sido definida.

En resumen este nuevo candidato tiene muy buena pinta y queda esperar ver cómo evoluciona y su aceptación entre los desarrolladores.

Muchos desarrolladores que usan Prototype para sus proyectos estaban algo asustados porque hacía meses que no había movimiento en el desarrollo de este. Hoy, por fin, Encytemedia ha publicado un artículo con los cambios que ha habido está misma mañana en el repositorio de Prototype.

Uno de los cambios más importantes se refiere a que Sam ha implementado chaining (encadenamiento de comandos) para muchos de los métodos de Prototype. Esto posiblemente se deba a que últimamente han sido publicados varios artículos comparando Prototype/Scriptaculous con jQuery… este último tenía hasta ahora la gran ventaja de ofrecer chaining desde hace tiempo. El día que salga la nueva versión (o si lo bajamos del SVN) y actualizamos nuestro código tendremos que ir al tanto ya que este cambio romperá con algunas metodologías usadas hasta ahora.

Otro cambio ha sido incluir los métodos de formularios (Form y Form Element) dentro de $() y $$(). Por tanto podremos hacer $(’miForm’).getElements();

Lo mismo vale para la gestión de eventos… Para observar un elemento podemos hacer $(’miElemento’).observe(’click’, function(){//código a ejecutar});

Con estos cambios se nos abre un nuevo mundo para poder ser más vagos a la hora de programar

Ha salido una nueva versión de Scriptaculous…

No trae funcionalidades nuevas… “solamente” arreglos cómo evitar posibles memory leaks y mostrar mensajes de error más significativos en caso de que falte cargar una de las librerías.

Algunos de los efectos ahora se ven más suaves gracias a estos arreglos y otros se dejan emplear bajo nuevas circunstancias (por ejemplo el autocompleter en un div con barras de scroll).

En resumen, la librería se ha vuelto más sólida aunque no traiga novedades.
Para descargar Scriptaculous ves a http://script.aculo.us/downloads
Miguel

Tras probar muchos scripts para ventanas flotantes por fin he dado con uno que se basa en Scriptaculous, es funcional y bonito. Hace uso de skins, lo que lo hace facilemente adaptable al entorno de la aplicación que estemos programando y permite cargar los contenidos dinámicamente… y de allí a cargar los contenidos mediante Ajax ya solo queda un pequeño paso
La única pega que le veo es que no ofrece la posibilidad de adaptar su tamaño al contenido, aunque si ofrece la funcionalidad de scroll.

Podeis ver la demo en http://net4visions.com/dev/dialog/dialog.htm.
Para descargar el código… http://net4visions.com/dev/dialog/

La implementación de dialog.js en nuestra aplicación es muy fácil…
Después de cargar prototype.js y scriptaculous.js se carga _dialog.js.
Para abrir una ventana flotante se usa

var dlg0 = new Dialog(null, {options});

Las opciones disponibles y el manual completo lo encontrais aquí.

Miguel

Thomas Fuchs, el inventor de Scriptaculous, ha creado un script para crear reflejos de imágenes dinámicamente. Lo asombroso es que, basandose en Scriptaculous, el script consiste of solamente 20 líneas.

Puedes ver el script en acción en http://mir.aculo.us/stuff/reflector/reflector.html.
En el código fuente se ve el JS usado para crear el efecto. Prefiero no publicar aquí el código porque Thomas Fuchs va haciendo mejoras y en el ejemplo siempre estará el código actualizado.

Scriptaculous ha vuelto a sacar una nueva versión.
El corto tiempo que ha pasado desde que han sacado la versión anterior se debe a que con la ampliación de código se han metido unos “Memory Leaks” que hacían su uso casi imposible en Internet Explorer.

La nueva versión resuelve este problema y algunos detallitos más.
Aparte de un nuevo parámetro para draggables no hay funcionalidades nuevas en esta versión.

Miguel

Ya está disponible la nueva versión de Scriptaculous. Esta versión se basa en Prototype 1.5.

Novedades en esta versión:
- Scrolling de la ventana si se arrasta un objeto fuera del area visible de esta.
- Ampliado chaining para muchas de sus funciones.

Desafortunadamente la nueva versión de Prototype trae problemas con IE. Cualquier comando que haga uso de $() (es decir casi todos) tiene un severo Memory Leak. Por suerte ya existe un patch para resolverlo… se puede descargar aquí.

Por lo demás Tomas Fuchs nos asegura que ha mejorado mucho el rendimiento con esta nueva versión. Queda por probar que sea verdad

Miguel