Editor WYSIWYG para SPIP

Hace unos días me recomendaron un producto llamado SPIP, este es como un CMS pero especifico para sitios de publicación de artículos como por ejemplo diarios digitales, es un producto bastante práctico y sencillo tanto de utilizar como de customizar, lo malo es que los desarrolladores son franceses y tanto el código como la documentación esta en francés (en momentos como este ves lo bueno que es desarrollar en la lengua madre, el ingles), pero existe suficiente documentación traducida.

Trabajando con el producto lo primero que vi desagradable fue su pobre editor para redactar los artículos, así que inmediatamente busque algún Rich Text Editor (Editor de Texto Enrriquecido) o WYSIWYG. Encontré varias alternativas alguna de ellas muy buenas, como por ejemplo FCKEditor, pero al final me quede con un editor llamado Xinha. La decisión de por que lo elegí fue sencilla, probé copiar artículos redactados en Open Office y pegarlos en el editor para ver como salían, grata fue mi sorpresa en el momento que quedaban iguales, salvo por los objetos embebidos como imágenes, para mi gusto fue mas que suficiente.

La instalación es muy sencilla, lo primero es descargarse un parche para SPIP que modifica ciertos archivos para incluir el editor en la sección de edición de artículos, solo para versiones 1.9 o superiores. Puede obtenerse el editor de esta dirección:

http://www.clubinfops.org/cours/spip_patch.zip

Una vez descargado el parche solo resta descomprimirlo y copiarlo en el directorio raíz de SPIP, eso sobreescribirá un par de archivos, al finalizar el editor quedará listo para utilizarse. Quedaría en el tintero personalizar la configuración del editor, para ello se debe entrar a los directorios ecrire/xinha/plugins/ExtendedFileManager/ y ecrire/xinha/plugins/ImageManager, en estos buscar el archivo config.inc.php y como minimo editar los paths de los directorios para subir los archivos e imágenes ($IMConfig['images_dir']).

Mas Sobre Floats

Continuando con mi perfeccionamiento sobre Floats, Divs, Css y estándares Web, me tope con un interesante VideoCast donde el loco explica posta posta los Floats, como usarlos, problemas comunes y soluciones prácticas. Sin lugar a dudas un VideoCast imperdible, duración 23 min.

http://css-tricks.com/video-screencasts/42-all-about-floats-screencast/

Como si fuese poco, también añadió un site con los ejemplos para ver las diferentes combinaciones.

http://css-tricks.com/all-about-floats/

CSS Floats

Disponer los elementos de un site web adecuadamente con un diseño atractivo y no el clásico tabular suele ser todo un desafío. El correcto uso de las propiedades de las Css es nuestro mejor aliado, elegir mas una propiedad puede hacer que nuestro sitio se vea perfecto en Firefox y espantoso en IE.
Una de las utilidades de Css es la propiedad float, la cual permite ubicar los bloques en posiciones que con HTML puro sería imposible. El siguiente documento explica con mucho detalle la correcta utilización de esta utilidad y nos muestra distintos ejemplos de las diferentes combinaciones posibles de la misma.

http://webdesign.about.com/od/advancedcss/a/aa010107.htm

Esquinas Redondeadas en HTML

Quien no recibió alguna vez un diseño web realizado por un diseñador gráfico, esclavo de Fireworks, Adobe ILustrator, Flash y Photoshop, en el cual había animaciones, sombras, esquinas redondeadas por doquier y cosas super extrañas como esas. Díganme si no les dan ganas de cortarse las pelotas de una al ver una cosa así.

Buscando la forma mas práctica y estándar para hacer esquinas redondeadas me tope con una herramienta muy práctica, se llama Nifty Corners, básicamente es un JavaScript que al cargar el documento en el browser del cliente aplica un css especial que provoca que los divs elegidos redondeen las esquinas.

Como se hace, fácil, muy fácil, vean lo documentación y pruebenlo.

Les cuento que es fundamental indicar el tipo de selector CSS que es, para el caso de id es "#" y en el caso que sea un selector de clase deben indicar el ".", en función este tipo el JavaScript sabe si debe aplicar a varios bloques o a solo un bloque. Tambien es fundamental poner el JavaScript en la ubicación correcta y junto con el la CSS, caso contrario no les va a funcionar como debería. El script se encarga de incluir su css automáticamente.

Pueden ver un ejemplo sencillo aquí.

No dejen de revisar su documentación, esta provee mucha info sobre diferentes variantes de uso.

Div desplegables

Estaba buscando como organizar un menú realizado en html dado que el número de ítems creció más de lo esperado. Se me ocurrió poner botones que al precionarlos expandan más botones, para ello se me ocurrió hacerlo con divs desplegables, para que lo vean la idea era esta, el problema es que no tenia la mas pálida idea de como hacerla (sabia que era con javascript pero no como), después de googlear un poco encontré la solución a los que buscaba.
Les dejo el post donde explica como hacerlo.