Sysdent

Muchas veces he usado el objeto DialogBox de GWT para mostrar mensajes emergentes en vez de los intrusivos alerts, sin embargo siempre me había parecido que estos a pesar de tener una buena estética, no dan la impresión que lo que está detrás de él está congelado, entrando así en un problema de usabilidad en nuestras aplicaciones. Hoy, sin necesidad de estarlo buscando, me encontré con GWT Glass Pane, un composite que además se encarga de oscurecer el fondo de nuestra página al mejor estilo de LightBox.

En el sitio además explican como implementarlo de forma muy sencilla en nuestros proyectos, sin necesidad de tener que agregar un nuevo módulo a él, sino creando una clase nueva.

Pruebalo>>

De antemano sé que surgiran muchas ideas contradictorias a este post, sin embargo quiero exponerles a todos estos 16 ejemplos de cuando javascript hace una arremetida contra flash para tratar de quitarle dominio en el campo de las animaciones en la web.

Gracias aNieto2k>>

El contraste de los colores de un sitio web es un aspecto que puede llevarlo a fracasar rápidamente, es fundamental lograr un punto de armonía visual para el lector, de manera que le permita sentirse a gusto, captando su atención en los aspectos más imprtante y sin ir a provocar molestias, cansancio y en peor caso problemas visuales.

Otro lado del diseño en cuanto a colores lograr un buen contraste de los colores de manera que sea sencillo identificar los diferentes objetos de tus páginas, esto último es precisamente en lo que checkMyColours busca ayudarte.

El sitio de checkmycolours te permite validar el contraste de los colores de un elemento y su fondo de manera que sean claramente diferenciables, si bien es recomendable escuchar (o leer?) sus consejos, creo que no debes tomartelo muy a pecho ya que incluso te muestra sugerencias de objetos que no son visibles en tu página.

Para terminar quiero colocar el resultado de efectuar la compriobación en el propio blog ya que me imagino que intentarás hacerlo xD…

Si tu segunda opción es hacerlo a google, también lo intenté y no funciona jeje…

Gracias a KaBytes>>

CheckMyColours>>

Aunque he visto algunas implementaciones de calendarios en javascript y html, tengo que confesar que dhtmlxScheduler me ha dejado realmente sorprendido, no solo por su apariencia sino por por el diseño de interacción que nos presenta, muy al estilo de cualquier aplicación de escritorio, basta con arrastrar y soltar para delimitar el inicio y duración del evento y/o modificar su ubicación en el tiempo.

Entre las características que he podido probar puedo enumerar:

• Permite añadir, modificar y eliminar evento sin necesidad de refrescar la página (el poder de ajax que llaman xD) .
• El comportamiento intuitivo de arrastrar y soltar para configurar eventos permite modificar el inicio, duración e incluso fecha de los mismo, importante que estos se puede transferir de un día a otro, o incluso entre meses.
• El valendariop permite vistas de días, semana y mes.
• La librería viene con compresión GZip, lo que garantiza un menor tamaño (cerca de 19 Kb).
• Además en la página aseguran que es de fácil personalización, por ejemplo cambiar el formato de las fecha, el idioma del calendario y los estilos, y la independencia para el manejo en el lado del servidor (Java, Php, Asp, etc.), ya que es un componente puramente javascript.
• Soporta tanto una licencia GPL como su variante comercial.

Puedes encontrar un demo aquí>>

El sitio original de dhtmlxScheduler>>

El día de hoy un amigo me preguntaba si era posible en un desarrollo suyo lograr que al presionar un enlace de la página apareciera un formulario de contacto al mejor estilo lightbox, para mis adentros me dije si, es posible hacerlo con algunas de las muchas librerías que nos permiten hacer cargas mediante ajax de forma elegante, sin embargo me entero que ya existe un plugin para JQuery, que hace precisamente esto, cómo bien dicen que una imagen vale más que mil palabras, yo añado que un demo vale más que mil imagenes xD.

Clic en la imagen para ver el demo

Otra funcionalidad que podemos agregar en nuestros sitios es la posibilidad de mostrar mensajes al mejor estilo de twitter, estos nos permiten informar al usuario sobre diferentes eventos que vayan ocurriendo.

Estos son solo un par de recursos que al ser incorporados en nuestros sitios harán más amena la estadía por parte de los visitantes.

Ver demo del formulario>>

Descargar ejemplo de carga de formulario con ajax>>

Ver demos de mesajes estilo twitter>>

Descargar el ejemplo de mensajes>>

Una y otra vez gracias a Ribosomatic.

Firebug es un complemento para el navegador firefox, que es de gran ayuda cuando estamos desarrollando sitios web, recuerdo que desde la primera vez que lo probé no he dejado de usarlo ya que me hace las cosas supermamente sencillas. Sin embargo, si hace falta un poco de conocimiento sobre las funcionalidades del mismo, por ejemplo yo no sabía que existía forma de poner puntos de ruptura condicionales, es decir que solo se detenga la ejecución de un script cuando se cumpla la condición que indiquemos.

Uno de los miembros de Adictos  al Trabajo ha elaborado un completo manual sobre este tema, que abarca desde la instalación hasta como modificar los css, html o trabajar con el api de depuración de scripts.

Este creo que es un manual de lecutra recomendada para quienes quieren dejar de sufrir a la hora de desarrollar aplicaciones web.

Ver el manual>>

Sitio de Adictos al trabajo>>

Aunque he hablado un poco de gwt y personalmente me ha parecido la mejor opción a la hora de realizar aplicaciones ricas en internet, he decidido investigar un poco sobre la tecnología JSF de sun ya que después de todo es el estándar, la idea es conocer más sobre esta opción de desarrollo y a la postre poder hacer un comparativo sobre ellas. Ya hace tiempo venia buscando una implementación para enfocarme en ella, probé con RichFaces de JBoss pero con la salida del más reciente podcats de la asociación de javahispano me he decidido por IceFaces.

Qué es ICEFaces?

Bueno pues podemos decir que es un framework de desarrollo web creado sobre la especificación jsf y con capacidad de procesamiento de solicitudes ajax, que nos permiten a los desarrolladores web construir aplicaciones con contenido enriquecido, programando únicamente en java y sin tener que agregar un applet u objetos que dependan de complementos propios de x navegador.

Qué beneficios me aporta usarlo?

Los beneficios son numerosos pero podemos destacar:

• Una mejor experiencia del usuario: Usando los componentes con soporte ajax y con la posibilidad de crear nuevos, se puede mejorar la experiencia del usuario al usar la aplicación.
• Es open source: ICEFaces es un proyecto liberado de código abierto, lo que garantiza que siempre tendremos un soporte por parte de la comunidad, actualmente existen alrededor de 70,000 desarrolladores involucrados con su mejoramiento.
• Basado en estándares: Esto nos permite integrar el framework ya sea en aplicaciones nuevas o existentes, y con la posibilidad de usar las ventajas que ofrecen los mejores ides del mercado como eclipse o netbeans.
• Compatibilidad: Ha sido probado en una gran cantidad de servidores, ides y navegadores. Además es posible integralo con otros productos como hibernate o librerías para el manejo de javascript.
• Ajax push: No encontré una buena forma de traducir esto, pero lo que nos permite no es más que hacer un renderizado de la página en el navegador del cliente que sea iniciado por un evento en el servidor, es decir un renderizado iniciado por el servidor y no por el cliente.
• Seguridad: Es uno de los frameworks más seguros (si no el más) que actualmente podemos encontrar en el mercado. Tiene compatibilidad con SSL, previene la inyección de códogo malicioso XSS, es una tecnología del lado del servidor, lo que nos garantiza que la lógica de negocio de nuestra aplicación no será mostrada al cliente (esto tiene su contraparte en el consumo de recursos de la maquina servidor).

Versiones de java soportadas:

• Sun JDK 1.4 o superior.
• MyFaces y Sun JSF 1.1
• Sun JSF 1.2

Integración con IDES:

Es posible integrarlo en los siguientes IDES.

• Eclipse.
• My Eclipse Enterprise Workbench.
• Sun Netbeans.
• Oracle Jdeveloper.
• IBM RAD.

Servidores de aplicaciones soportados:

• Apache Tomcat.
• BEA Weblogic Server.
• JBOSS Application server.
• IBM WebSphere Application Server.
• Oracle Aplication Server Container for J2EE (OC4J).
• SAP NetWeaver.
• Sun GlassFish.
• Sun Java System Application Server.
• Webtide Jetty.

Compatibilidad con los siguientes navegadores web:

• Microsoft Internet Explorer 6.x, 7.x, 8.x.
• Firefox 2.x, 3x.
• Safari 3.x.
• Google Chrome 1.x.
• Apple Safari (iPhone, iPod Touch).
• Opera Mobile.
• RIM Blackberry Bold.

Información tomada de la documentación de IceFaces.

Ir al sitio de IceFaces.

Es bien sabido por todos que Javascript no tiene de forma nativa un método replaceAll como otros lenguajes (ejemplo java), y ya se que muchos dirán pero JQuery o Mootools si, pero que pasa si en nuestra aplicación no necesitamos una librería de este tipo, valdría la pena incluirla solo para usar esta característica?.

Bueno pensando en esto he buscado una forma sencilla de implementarla y he encontrado la siguiente:

function replaceAll( text, busca, reemplaza ){
    while (text.toString().indexOf(busca) != -1){
        text = text.toString().replace(busca,reemplaza);
    }
    return text;
}

Supongamos que queremos eliminar todos los espacios de una cadena, lo hariamos con la instrucción:

     text = replaceAll(text,' ', '');

Sin embargo siempre está la opción de irnos por las  expresiones regulares:

function replaceAll( text, busca, reemplaza ){
    return text.replace(/(^\s*)|(\s*$)/g,"");
}

Mejor aún si extendemos la clase String:

String.prototype.trim= function() {//Agrega la función trim al objeto String
   return this.replace(/(^\s*)|(\s*$)/g,""); //elimina espacios a izquierda y derecha
}

Y su uso sería:

    text = text.trim();

Hace poco hablaba sobre xeyes en javascript, esto tenía 2 motivos, primero mostrar lo que se puede hacer con un poco javascript y segundo realizar el ejemplo usando únicamente GWT, con el fin de aplicar los conocimientos que he ido adquiriendo sobre el tema y también mostrar que con este framework podemos hacer grandes cosas.

Una reflexión que he hecho luego de esta actividad es que aunque tengamos un buen framework para programar las aplicaciones web, esto debe ser complementado con un buen uso de css ya que en este aspecto gwt si es muy flexible, y máxime cuando seguimos sufriendo el carma de Internet explorer que interpeta nuestras aplicaciones como se le da la gana.

La aplicación la he probado en Firefox 3.0.8, Opera 9.5, Safari 3.0 y Chrome 2.0, en IExplore he realizado la prueba y no ha funcionado de primera y tampoco he sacado el tiempo para revisar por que ya que esto para mi tiene menos relevancia incluso que el tema del scroll en una resolución de 800 por 600 xD…

Pueden ver el ejemplo realizado con gwt aquí

Esperen en un próximo post el código fuente, ahora no lo he publicado ya que aún no lo he documentado como es debido.