Contenido

elRTE, editor WYSIWYG open-source a tener en cuenta

30 Ago

+ 10

elRTE es un editor WYSIWYG open source desarrollado con jQuery UI que nos permite disponer de un editor enriquecido muy fácil de implementar en nuestros sitios web.

screenshot0
(Ver Imagen)

Características:

  • Uso avanzado de estilos CSS
    • Usado para identaciones
    • Usado para controlar bordes
    • En la mayoría de propiedades de los elementos usados.
  • Ligero, rápifo y fácil de integrar
  • Apariencia del interfaz configurable mediante CSS
  • i18n. Fácilmente idiomatizable.
  • Flexible para extender mediante plugins.

Existen muchos editores similares, y muchos respetan la accesibilidad web este es otro más a tener en cuenta.

Colección de editores enriquecidos del futuro

2 Feb

+ 2

SixRevisions publica una interesante recopilación de editores de texto enriquecidos que nos permiten reemplazar los tristes <textarea /> por completos editores que facilitan la visualización del resultado al usuario. Muy a tener en cuenta.

La W3C se renueva

14 Oct

+ 4

La W3C ha rediseñado su sitio web y TorresBurriel nos muestra los puntos fuertes del nuevo rediseño.

Simple sistema de log para nuestro Javascript

4 Oct

+ 0

Hace ya un tiempo vimos un sistema para gestionar los errores javascript que nos podemos encontrar en nuestra aplicación, para ello nos complicábamos con el uso de Ajax para hacer llegar el error al servidor.

Existen sistemas más sencillos como este que ví en una presentación de Nicholas C. Zakas:

function log(code, str){
 var img = new Image();
 img.src = log.php?code=' + encodeURIComponent(code) + '&str=' + encodeURIComponent(str);
}
// Uso
log(1,"Esto es un error");

Como podemos ver el sistema es sencillo y muy cómodo de implementar en nuestras aplicaciones.

Gestionando errores en nuestras aplicación

Las aplicaciones Javascript tienden a delegar la gestión de errores al navegador, lo que se traduce en mensajes de notificación y elementos que dejan de funcionar para el usuario.

Un concepto que debemos tener en cuenta es que somos los encargados de hacer saber al usuario que algo ha fallado y que acciones debe realizar para solventar el problema.

Ciclo de vida de un error

ciclo_de_vida_error
(Ver Imagen)

Como vemos en la imagen, de abajo a arriba nos encontramos el ciclo de vida desde que se ejecuta un error hasta que llega al navegador. Partiendo de esta imagen podemos definir una serie de acciones para controlar el error.

try…catch()

El primer nivel para controlar el error nos lo encontramos en nuestro código, ahí es donde definimos una escapatoria a un código que pueda dar error.

try {
 ....
} catch(ex){

 // X == tu código de error
 // ex.message == Mensaje de error devuelto por catch()
 log(X, ex.message); // Guardamos el log() en el servidor
}

window.onerror

En este punto nuestro código ya ha quedado atrás, y el navegador pasa a ejecutar el evento onerror de window. Como el resto de eventos del DOM podemos redefinir la funcionalidad del mismo y controlar un poco más el error producido.

window.onerror = function (msg, url, line){
 log(X, msg);
 return true; // Evitamos llegar al navegador
}

Conclusión

Estas herramientas únicamente nos deben proporcionar una solución a la gestión de errores de nuestras aplicaciones, con ellas podemos ofrecer al usuario alternativas cuando un error interrumpa el normal funcionamiento de nuestra aplicación y además registramos dichos errores para su evaluación posterior con el fin de solventarlos.

10 errores comunes en el diseño web

5 Ago

+ 3

Via Bitacoras descubro un impresionante artículo de Kabytes en el que nos recuerdan 10 errores comunes del diseño web. No tienes desperdicio, altamente recomendable.

Google Web Elements, integra todos (o casi) los servicios de Google en tu Web

27 May

+ 4

La estrategia de Google, siempre ha sido ofrecer servicios de calidad de forma gratuita. De esta forma, la gente los usa (y mucho). Ahora, una nueva estrategia entra en juego, la de sacarle partido a estos servicios, y ¿como mejor que ofrecer «widgets» para que los desarrolladores los integremos en nuestras web?

google-web-elements
(Ver Imagen)

Google Web Elements, entra en juego para conseguir ofrecer más a los usuarios de una forma fácil y cómoda. Con ellos, podrás integrar desde Presentaciones hasta Calendarios, pasando por Chats, Maps o busquedas. Todo ello, en forma de <iframe /> que simplemente tendremos que pegar en nuestro HTML.

google-web-elements-configuration
(Ver Imagen)

Gracias a una sencilla configuración, podremos adaptar el elemento a nuestra web sin ningún tipo de problema.

10 gestores de complejidad de contraseñas en Javascript

10 May

+ 7

Hace un tiempo vimos como controlar la seguridad de nuestras contraseñas con Javascript y es que las contraseñas, actualmente, son una pieza indispensable en Internet. Con ellas accedes a todos los servicios web que existen, de ahí que se preste tanta atención a ellas.

Nuestras aplicaciones no deben ser menos, y una forma de ofrecer al usuario un valor añadido que les ayudará a crear contraseñas más complejas y por lo tanto más seguras, es usar sistemas basados en Javascript que muestren el grado de complejidad de la contraseña introducida. De esta forma el usuario puede ir viendo en tiempo real como de compleja es su contraseña, y cambiarla si cree conveniente antes de añadirla a nuestro sistema.

Estos 10 ejemplos que ha recopilado WebResourceDepot nos permitirá hacerlo muy fácilmente, dependiendo del framework o las necesidades del proyecto.

  1. PasswordMeter (No framework)
  2. Ultimate Password Strength Meter (Prototype & Script.aculo.us)
  3. Yet Another Password Meter (No Framework)
  4. jQuery Password Strength Meter(jQuery)
  5. Javascript Password Strength Meter (No Framework)
  6. How to Make a Password Strength Meter Like Google (No Framework, tutorial)
  7. jQuery Password Strength Meter Plugin (jQuery)
  8. Password Strength Field (A jQuery Plugin) (jQuery)
  9. PHP Password Strength Meter (No framework, basado en PHP)
  10. Password Strength Meter With Ext JS (Ext JS)

Javascript Image Combobox, dale vida a tus select

16 Abr

+ 16

Javascript Image Combobox es un plugin jQuery que permite que nuestros elementos <select/> tenga una vida que hasta ahora no podían tener.

preview
(Ver Imagen)

Se trata de una extensión que permite que los items de los <select /> tengan una imagen para facilitar la selección de items dentro de un listado de opciones.

Para ello hacen uso de un atributo (no estandar) del elemento <option /> llamado icon, que indicará de donde coger la imagen que mostraremos junto al <option />.

 <select name="webmenu" id="webmenu" onchange="showValue(this.value)">
    <option value="calendar" icon="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" icon="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" icon="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" icon="icons/icon_email.gif">Email</option>
    <option value="faq" icon="icons/icon_faq.gif">FAQ</option>
    <option value="games" icon="icons/icon_games.gif">Games</option>
    <option value="music" icon="icons/icon_music.gif">Music</option>
    <option value="phone" icon="icons/icon_phone.gif">Phone</option>
    <option value="graph" icon="icons/icon_sales.gif">Graph</option>
    <option value="secured" icon="icons/icon_secure.gif">Secured</option>
    <option value="video" icon="icons/icon_video.gif">Video</option>
  </select>

Despues con una línea de Javascript este atributo se convertirá en una imagen alojada dentro del <select />.

MSDropDown.init();

Si quieres ver una demo de como quedaría, puedes echarle un vistazo aqui.

keyTable, muevete por tus tablas con el teclado

18 Mar

+ 1

keyTable nos permite movernos por las tablas de datos mediante las flechas del teclado, como si del Microsoft Excel se tratara.

keytable

Sin duda me parece una técnica muy interesante que nos permite dar a nuestras tablas un valor añadido.

¿Como usarlo?

var keys = new KeyTable();

Este código nos aplicará esta funcionalidad a todos los elementos <table /> que encuentre en la página y que contengan la class keyTable como atributo.

Compatibilidad

El script está testeado y funcionando correctamente sobre:

  • IE6+
  • Firefox 3+
  • Safari 3+ (Safari 4 recomendado)
  • Opera 9.6+

Descargar

Versión 1.0.2

Colección de editores enriquecidos para tus aplicaciones web

11 Feb

+ 4

Desde Woork, están ultimamente haciendo listado de colecciones bastante interesantes, primero fueron los mejores sistemas para hacer «crop» a imagenes con Javascript, despues nos mostraron los mejores scripts para mejorar las subidas de ficheros mediante Javascript y ahora le toca a los editores enriquecidos.

Los conocidos WYSIWYG nos ayudan a darle una facilidad extra a los usuarios para escribir un código más correcto sin necesidad de conocer HTML. Poner negritas, integrar imagenes, centrar texto o cambiar el tamaño y color de las fuentes es sencillo desde estos editores enriquecidos.

  1. Yahoo! UI Library: Rich Text Editor, no lo he llegado a usar nunca pero tiene buena pinta.
  2. Free Rich Text Editor,  con solo 3 líneas de código logramos incrustar un Word en nuestra aplicación.
  3. TinyMCE, quizas el más conocido y desde su integración en WordPress uno de los más usados y soportados.
  4. FCKeditor, junto al anterior se convierten en los dos con más documentación disponible.
  5. Xinha, de esta ya hemos hablado previamente y puedo entender perfectamente que esté en la lista ya que es sin duda una opción realmente interesante.