Webmaster Libre

Desarrollo web con software libre

Buscador

Archivo de February de 2007

WYMeditor: Un editor web WYSIWYM

WYMeditor

WYMeditor es un editor web WYSIWYM, en principio similar a openWYSIWYG, del que ya comentamos las características. No obstante WYMeditor está enfocado a crear código XHTML válido, liberando al usuario de los aspectos de presentación que recaen sobre las hojas de estilo (preestablecidas en el sitio web). Comparado con openWYSIWYG, WYMeditor busca menor «potencia» y mayor simplicidad de uso y cumplimiento de los estándares.

Principales características:

  • XHTML estricto y CSS válido
  • No formatea texto, ni tamaños ni colores - WYMeditor está basado en CSS
  • Diseñado para ser sencillamente integrado en tu aplicación
  • Sin instalación, 100% Javascript, sin plugines ni extensiones
  • Código Javascript sencillo. No necesitas ser un Gurú para entenderlo
  • Se mantendrá tan simple como sea posible
  • Enfocado a un código bien testeado, estable y usable antes de añadir nuevas características
  • Soporte para imágenes, enlaces y tablas
  • Personalizable mediante CSS
  • Libre y Open Source

WYMeditor: http://www.wymeditor.org
Documentación: http://trac.wymeditor.org/trac/

Edit: Puede que moleste un poco el cambio de titulo y permalink (espero que no demasiado). Corrijo un error que me apunta Leandono en los comentarios. No es un editor WYSIWYG (lo que ves es lo que obtienes) si no un editor WYSIWYM (lo que ves es lo que quieres decir). Gracias :)

Limpiando el texto por defecto de los campos de texto con Javascript

Sin duda, de entre todos los cambios que le hice al blog este fin de semana, el más interesante desde el punto de la usabilidad y la accesibilidad ha sido mejorar los formularios y una de las mejoras ha sido la siguiente.

Como dicen las pautas de accesibilidad (Prioridad 3, en este caso)

10.4 Hasta que las aplicaciones de usuario manejen los controles vacíos correctamente, incluya valores por defecto en campos de texto y cuadros de verificación.

Muy bien, introducimos un valor por defecto en los campos de texto. No obstante, es realmente molesto tener que borrar el texto para poder comenzar a escribir. Ahí es donde entra el Javascript, este blog siempre ha tenido un simple toquecito de Javascript para solventar el problema (más o menos)

  1. <input type="text" onFocus="this.value=''" value="Buscar en el blog..." name="s" id="s" />

Esta opción siempre me había parecido una pequeña chapuza, había que incluirla a mano en todos los campos de texto, rompía con la validación del XHTML y, una vez habíamos eliminado el texto éste no volvía a aparecer.

Ayer se me ocurrió mirar si había algunasolución mejor por el mundo, de esas listas para usar (y poco pensar) y dí con esta:
Clearing Default Text
Mucho más limpio y más sencillo.

Simplemente importamos dos archivos javascript y agregamos la clase cleardefault a los campos de texto donde queramos utilizarlo.

  1. <script type="text/javascript" src="util-functions.js"></script>
  2. <script type="text/javascript" src="clear-default-text.js"></script> 
  3. ...
  4. <input type="text" name="date" value="yy-mm-dd" class="cleardefault">

Podéis ver un ejemplo en cualquier formulario de este sitio.

Para descargar los archivos o si queréis más explicaciones sobre el script, su funcionamiento y el código, dirigios artículo original: Clearing Default Text

links for 2007-02-04

Sutiles cambios y mejoras en el blog

Bueno, éste fin de semana mientras preparaba un tema para otro blog me ha dado, por fin, por solucionar algunos fallos del código de este blog. ¡Ahora ya valida XHTML 1.0 Transitional! He mejorado, de paso, los formularios cambiando el javascript por uno no obtrusivo.

Además he instalado Comments Policy Plugin, desde ahora para comentar en el blog habrá que aceptar ciertas condiciones de uso.

Y, por último, he estado jugando un poco con el menú lateral. Lo he reordenado para que resulte más cómodo acceder a las funciones principales.

links for 2007-02-02

“HTML in email” nueva lista de correo del W3C

Via Glazblog me entero de que el W3C ha creado una lista de correo para tratar el tema del HTML en los correos electrónicos.
Más allá de la discusión entre si deben o no enviarse correos en HTML (que no tiene lugar en esta lista) se busca crear una lista donde se representen las necesidades y el posible futuro del HTML en los mails, incluso se plantea hacer un taller a este respecto.

El tagline de esta lista es:
Discussion of HTML and email - authoring, security, and rendering.

Se trata de una lista abierta así que todos los interesados en participar y aportar su experiencia serán bien recibidos.

public-html-mail@w3.org

Em Calculator: Convirtiendo de pixeles a em

Una de las excusas más extendidas entre los diseñadores web para no utilizar unidades relativas de medida, como em, es la aparente falta de control que tienen sobre las dimensiones finales de su trabajo.

Para ellos viene hoy esta herramienta, em calculator creada por Piotr ‘Riddle’ Petrus . Con ella podrás convertir medidas en píxeles a em de una forma sencilla y clara, permitiéndote además calcular las medidas de elementos adyacentes o hijos (donde el uso de medidas relativas puede producir efectos no deseados si no tomamos en cuenta el tamaño del elemento padre)

Em Calculator

em calculator: http://riddle.pl/emcalc/

El WaSP anuncia el «International Liaison Group»

El WaSP ha anunciado hoy la creación del International Liaison Group, un grupo que surgió de una iniciativa de Molly y que ha crecido hasta convertirse en un grupo independiente capitaneado por dos mujeres Glenda Sims y Steph Troeth.

La misión del ILG es convertirse en un grupo de trabajo mediante el que compartir progresos y recursos entre desarrolladores, de una forma inclusiva e internacional o como se presenta en la página web del grupo:

El Grupo de Enlace Internacional (ILG en inglés) del WaSP (Web Standards Project) es un colectivo internacional de profesionales de internet que promueven el uso global de los estándares para asegurarnos una Internet igualitaria.

Via Juicy Studio.

Anuncio oficial (traducción al castellano): http://www.webstandards.org/2007/02/01/20070201-es/
International Liaison Group: http://www.webstandards.org/action/ilg/

links for 2007-02-01

CLASS.UPLOAD.PHP: subir y manipular imágenes con PHP

class.upload.php CLASS.UPLOAD.PHP es un script que nos permitirá subir archivos y manipular imágenes de una forma simple.
Puede convertir, cambiar de tamaño y trabajar con imágenes subidas de múltiples formas: añadir etiquetas, marcas de agua, reflejos etc.

Utiliza la librería GD y está liberado bajo licencia GNU GPL, aun que también puedes comprar una licencia comercial si quieres redistribuir tu trabajo sin las restricciones impuestas por la GPL (que tu código también sera GPL).

Si necesitas razones de peso para usar esta librería el autor te da unas cuantas, por ejemplo:

  • Con una sola imagen subida puedes hacer tantas copias, conversiones y cambios de tamaño como quieras
  • Puedes cambiar de tamaño las dimensiones de la imagen por separado, manteniendo o no el ratio
  • Sólo te permite cambiar el tamaño si la imagen es mayor o menor que las medidas requeridas
  • Puedes manipular las imagenes de muchas formas: jugar con los colores, añadir bordes, etiquetas, marcas de agua…
  • Su uso es simple pero es muy potente
  • Tiene más de 60 posibilidades de configuración documentadas

Para más información sólo tienes que visitar la página del autor, en ella encontrarás un ejemplo explicado (que es, sin duda, la forma más sencilla de comprender el uso del script).

verot.net - class.upload.php