Blog Tecnológico de Azalorea

En proyectos grandes que hacen mucho uso de Javascript es muy común tener un número considerable de ficheros de Javascript. Normalmente estos se reparten en varios directorios para tenerlos organizados. Entonces, a la hora de cargar una página nos encontramos con que tarda mucho tiempo hasta estar disponible debido al gran número de ficheros Javascript a cargar. Esto se debe a que la W3 recomienda no mantener más de 2 conexiones por servidor, unido al hecho de que los navegadores paran el parseo de la página cuando se encuentran con un tag de <script> para cargar JS externo.

La solución que encontré hace tiempo se llama combine. Tras adaptarlo un poco a mis necesidades me funcionaba de gloria acelerando la carga de las páginas hasta un 400%!!. Esto lo conseguía concatenando varios scripts, comprimirlos y usando un header expire lejano.

Hoy he encontrado otro script que promete hacer lo mismo, pero mejor. Minify es mucho más complejo que Combine, pero promete copar con más situaciones de excepción y, sobre todo, está en desarrollo. Al parecer están trabajando en un sistema que usa Apache para servir los ficheros concatenados sin pasar por el PHP. Esto aceleraría la carga de las páginas muchísimo.

Aún me queda probarlo y ver si las mejoras sobre Combine me valen valen la pena, y comparar la velocidad de ambos. Os mantendré actualizados.

Hace más de un mes desde mi última publicación. Se debe a que estamos hasta arriba de trabajo y ahora nos vemos con la necesidad de ampliar plantilla.

Buscamos los siguientes perfiles:

• Expertos en PHP/MySQL, XML, Ajax, Web 2.0
  Amplia experiencia en PHP + MySQL (se valora experiencia con otras DDBBs), así como dominio en DHTML/DOM, Ajax (preferiblemente con Prototype/Scriptaculous) y CSS.
  Valoramos experiencia en integración con CRM y sistemas de pago online.
  En un principio trabajará como autónomo/contrato por obra, pero nos interesa, en función de los resultados, incorporarlo en plantilla.
• Expertos en Flash/ActionScript y XML
  Valoramos si además puede demostrar experiencia con PHP y MySQL.
  Aún mejor si además domina o sabe de DHTML/DOM, XHTML, CSS.
  El trabajo tiene las mismas condiciones que el mencionado arriba.

Estamos actualmente trabajando en varios proyectos (tanto internos como externos) y se estudiaría conjuntamente en que parte se podría integrar cada perfil.

Interesados han de mandarnos su CV a info@azalorea.com.
Es imprescindible poder demostrar experiencia porque se ha de incorporar a proyectos de mediana/alta complejidad.

Miguel

Ya tocaba publicar algo acerca de la empresa que monté con unos socios hace 2 años. Cómo el año pasado, estaremos presentes en el IGC (Internet Global Congress) de Barcelona desde el 16 hasta el 19 de abril.

Este año expondremos sobre todo nuestra área de alojamiento (Azamedia.com) y los desarrollos relacionados con la fotografía.
Hablando de Azamedia… hace unos minutos hemos lanzado el nuevo site… hemos conservado en gran parte la estructura ya conocida pero lucimos nuevo logo y nueva imagen corporativa.

Antes del lunes añadiremos también nuevas funcionalidades a mifotoblog.com

Bueno… queda mucho trabajo…

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.

Hace cosa de una semana tuve que meterme con Google Maps para un proyecto. Al principio era todo muy fácil, rápido y salía a la primera. Pero al profundizar más en las posibilidades de repente se empezaron a complicar las cosas

Tras varias horas de investigación he conseguido resolver todos los problemas… y para que no se me olviden las apuntaré aquí…

La primera sorpresa era cuando me puse a probarlo en Internet Explorer… no se mostraba el mapa. El DIV para mostrar el mapa tenía la ID “map”… y por la razón que sea no le gustaba a IE… lo cambié a myMap y funcionó

Ya tenía todo funcionando en Firefox y Explorer, y me puse a implementar marcadores. Hasta este punto muy bien. Pero cuando quería hacer que se puedan arrastrar daban errores de JavaScript. Probé el ejemplo de Google en su página de documentación y daba los mismos errores .-(
Les mandé un reporte de error a Google y al día siguiente  volví a probar el ejemplo en la página de Google. Sorpresa… ya no daba error. En seguida probé mi implementació, pero seguía dando el mismo error.
Al mirarme el código fuente que usa Google me dí cuenta que la llamada al API era ligeramente diferente… la versión la definían cómo “2.x” en vez de “2″. Lo probé y resulta que entonces se carga una nueva versión de su API… la 2.73.

Y así el error desapareció… ya solo me quedaba adaptar mi código a los cambios del API (las variables de los marcadores han cambiado de nombre) y funciona.

Miguel

Tras muchos meses de desarrollo y versiones 0.x por fina ha salido la versión 1.0 de MooTools.

Lo que más destacan sus desarrolladores (yo aún no lo he probado) es que todas sus clases usan eventos. Cuando lo leí por primera vez no entendía a que se refieren, pero tras leerlo una segunda vez me dí cuenta que las mismas clases pueden evocar eventos. Por ejemplo onStart para ejecutar código antes de inicializar un método.

También han mejorado su gestión de eventos que ahora consume menos memoria y dispone de la posibilidad de eliminar todos los eventos de un elemento o de un tipo de evento (pe onClick). Además se puede evocar eventos manualmente.

Por el lado negativo nos encontramos con que han hecho cambios en el API (en una librería tan nueva no nos debe extrañar) y si has usado una versión 0.x de MooTools tendrás que actualizar tu código antes de pasarte a la versión 1.0.

ENLACES:

Artículo original:
http://mad4milk.net/entry/mootools-version-1-official-world-release
Documentación:
http://docs.mootools.net/

Desde ayer ya está disponible la versión pública de Firebug 1.0 tras 9 betas y unos 2 meses que han pasado desde el primer beta.

La evolución desde el beta1 hasta lo que nos podemos instalar ahora es impresionante. Aparte de arreglar todos los problemas que presenta una nueva versión, Joe se esforzó en implementar el máximo de funcionalidades que han ido pidiendo los usuarios.

Lo podéis descargar en getfirebug.com o la página de addons de mozilla.

Miguel

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

Prototype ha visto la luz en su nueva versión 1.5. Paralelamente Sam Stephenson (el inventor de Prototype) ha publicado un nuevo website, http.//prototypejs.org, con la documentación online que tanto pidieron los usuarios. Un apartado de la página está dedicado a artículos sobre el funcionamiento de Prototype y otro a la documentación del API.

Al parecer se ha formado un núcleo de desarrolladores para Prototype que se reparte las tareas de actualizar la documentación y empujar el desarrollo de Prototype… cosa que obviamente era imposible para una sola persona.

Miguel

Joe Hewitt ha puesto manos a la obra y ha sacado la versión beta de Firebug 1.0. Al día de hoy es la beta3 que incorpora funcionalidades que usuarios le han pedido tras haber evaluado beta1 y beta2.

Y estamos de suerte porque Joe ha decidido, tras pensarselo detenidamente y hablar con los usuarios, a seguir con el modelo OpenSource [ver su comentario]. Al parecer ha hecho bien porque los mismos usuarios se han volcado en donar importes de 20 a 100€ para que Joe pueda dedicarle recursos a esta herramienta que ya se ha vuelto indisepnsable para muchos desarrolladores.

El interfaz de Firebug está totalmente renovado y mucho más limpio… cosa que era necesaria porque tiene un sinfin de nuevas funcionalidades. Las más importantes son:

• Poder abrir Firebug en una ventana propia
• Editar HTML (y no solo los parámetros como en la versión 0.4)
• Editar CSS (desde beta3 se puede editar enteramente)
• Monitorizar tráfico de red detallando gráficamente cuando tarda cada elemento en cargarse.
• Perfilar tiempo de ejecución

Aparte del AddOn para Firefox Joe ha creado Firebug Lite… una librería JavaScript para disponer de las funcionalidades (limitadas por momento) de Firebug en Internet Explorer, Opera y Safari. Por momento Firebug Lite está limitado al logging y ejecución de comando JS en la consola.

Happy debugging,
Miguel