Utopian Webdeveloper

Entradas

Mostrando entradas de mayo, 2009

Highslide JS

Esta librería la he utilizado para visualizar imágenes (sueltas o agrupadas en una galería); desde mi punto de vista su mayor virtud es que permite utilizar thumbnails para cargar la página más rápido y versiones de buena calidad que son desplegadas al momento en que el usuario hace clic sobre la imagen que le interesa. Además de útil sus efectos la hacen muy vistosa, lo cual evidentemente es un valor agregado. Instalación: Incluir lo siguiente: <link rel="stylesheet" type="text/css" href="/highslide/highslide.css">  Uso: Si se trata de una imagen aislada se debe incluir el archivo highslide.js y utilizar el siguiente código de inicialización*: hs.registerOverlay({ overlayId: 'closebutton', position: 'top right', fade: 2 }); hs.graphicsDir = '/highslide/graphics/'; hs.wrapp...

Rich Text Editor

Hace apenas unos meses mi conocimiento de javascript era prácticamente nulo, pero poco a poco me fui familiarizando por la necesidad de crear interfaces más amigables y llevar a cabo validaciones básicas. Me he topado con muchas librerías hechas con javascript que mejoran de manera notable la experiencia del usuario. Una de ellas es el Rich Text Editor (RTE), que convierte un simple textarea en un campo que permite darle formato al texto. Básicamente, lo que hace es generar dinámicamente código html. NOTA: todos los archivos necesarios (imágenes, script, hoja de estilo, etc.) se encuentran en la página que incluyo al final. Para utilizarlo es necesario incluir la librería richtext.js o richtext_compressed.js en la sección <head> Posteriormente hay que inicializarlo con la siguiente instrucción: initRTE(imagesPath, includesPath, cssFile); Finalmente se coloca el siguiente código JS donde debe aparecer el campo: writeRichText(nombreCampo, textoHtmlDefault, ancho, alto, botones, sól...

Syntax Highlighter

No cabe duda de que uno aprende cosas todos los días. Resulta que Blogger interpreta el código html, así que para poder poner un ejemplo tuve que investigar cómo darle la vuelta a este problema. Hay una manera "chafa" que consiste en reemplazar por "& gt;" (los separo porque si no me aparecen los simbolitos =P) y poner todo dentro de un bloque <code> </code> Este primer método lo encontré el 8 de abril, pero me entró el gusanito de encontrar algo mejor; un mes después di con el SyntaxHighlighter. Este hermoso plugin hecho en javascript no sólo me resolvió este problema, sino que también me va a permitir mostrar código (en muchos lenguajes de programación, no sólo html) de una manera muy amigable. Les debo la explicación de cómo le hice para instalarlo, pero éste es el resultado: Java: public class Prueba() { System.out.println("A poco no está bonito?"); } PHP: $var = "Hola"; echo($var); CSS: BODY { font-size: 12px; colo...