Hace unos días llegaba a portada de Digg un artículo escrito por Harry Maugans: How to Create a Collapsible DIV with Javascript and CSS. En principio me sorprendió que un script tan simple lograse tanto eco pero lo que más me sorprendió es que utilizase cosas tan intrusivas como display: none en la hoja de estilo para ocultar inicialmente el div y el evento onclick en un elemento a del html.
Como se le podían hacer unas cuantas mejoras sin meterse muy a fondo con el javascript me puse a ello y el resultado lo tenéis en: Divs que aparecen y desaparecen - tgdiv.js
Sé que no es nada del otro mundo pero las mejoras respecto al original son interesantes ya que mantienen separado el contenido de la presentación y el comportamiento de la página.
Si tenéis cualquier duda, queja o sugerencia ahí tenéis los comentarios.
Si alguna vez has querido integrar una vista 360º o una panorámica interactiva a tu sitio web y no has sabido como hacerlo te traigo la solución: Miralo.
A través de Intenta descubro la existencia de estre proyecto de Pablo Veintimilla, totalmente libre cuyas características son:
- Totalmente personalizable, pues usa un archivo XML externo de configuración.
- Fácil de controlar, permite desplazar en todas las direcciones.
- Permite incluir texto descriptivo, totalmente configurable (Tipo de letra, tamaño, color, fondo).
- Cargador dinámico, el cual muestra segmentos de la imagen desde el primer instante, evitando el uso de barras de carga o similares.
Sólo tenéis que echarle un vistazo a las demos para daros cuenta de lo interesante del proyecto.
Miralo: http://miralo.undermedia.com.ec/
Hace tiempo comentamos un estupendo script PHP que nos permitía unir y versionear los archivos css y javascript de nuestros sitios, permitiéndonos comprimir estos últimos.
Mihalcea Romeo, basándose en este mismo script ha hecho unas cuantas modificaciones y, como resultado, tenemos un script que nos permitirá también comprimir nuestras hojas de estilo para ganar en optimización, no sólo reduciendo el número de peticiones HTTP si no también permitiéndonos utilizar tantos archivos, comentarios y espacios blancos queramos en nuestros CSS, ya que el script simplemente copia el contenido de los archivos en uno nuevo y lo comprime. Así nosotros editamos un código humanamente leible y servimos a nuestros usuarios uno optimizado para maquinas.
Web page optimizer
A la hora de incluir imágenes en nuestros sitios web solemos dar por buenas las convenciones de diseño que nos plantean las hojas de estilo. En el caso de querer incluir imágenes con algún efecto recurrimos a complejos trucos y a editores de imágenes. Válido para un sitio con pocas imágenes pero ¿qué pasa si necesitamos dar estilo a muchas imágenes?
swfIR pretende ser a las imagenes lo que sIFR es al uso de tipografías no convencionales en nuestros diseños, mediante Javascript y Flash, de forma no intrusiva, nos permite incluir efectos en nuestras imágenes de forma automática. Entre los efectos que nos permite están:
- Añadir un borde
- Añadir sombras
- Rotar imágenes
- Bordes redondeados
El código generado es completamente válido y, al basarse en la mejora progresiva (progresive enhancement) los usuarios cuyos navegadores no soporten javascript o flash ni lo notarán (recibirán las imágenes normalmente)
swfIR: http://www.swfir.com/
Las galerías están de moda, de diseños con CSS, de logotipos, de pinceles, tipografías… Nos faltaba una galería de scripts AJAX para descargar.
MiniAjax es una recopilación de pequeños scripts encontrados por la red, listos para descargar y utilizar. No se trata de scripts nuevos, estoy segura que la mayoría ya los conocéis de antes, si no de una selección de buenos scripts que nos ahorra tiempo de búsqueda.
MiniAjax: http://www.miniajax.com
Si construyes habitualmente formularios, más o menos complejos, estoy segura que encontrarás interesante la clase javascript validate.js
Con ella podrás validar gran cantidad de datos de tus formularios: campos requeridos, caracteres introducidos, sintaxis…
Validate.js
Marquee Tool es una herramienta Javascript, creada por Sergey Koksharov, que te permitirá seleccionar áreas rectangulares en elementos <div> e <img>, calcular las coordenadas de la selección, mostrarlas o enviarlas al servidor.
Marquee Tool usa una versión reducida de Prototype, como resultado se obtiene un archivo pequeño, que cargará rápido y hará todo lo necesario.
De momento sólo se puede definir un área por imagen pero en la próxima versión, marcada para finales de Marzo, podrán definirse múltiples areas.
Sin duda es una herramienta práctica, con un bonito resultado y sencilla de utilizar. ¡Se acabó tener que explicar quien eres en las fotografías! (mas o menos). Lamentablemente, según se puede leer en los comentarios, no funciona en Opera.
Marquee Tool: http://marqueetool.net/
Slideshow es una clase Javascript para Mootools 1.0 que te permitirá mostrar presentaciones animadas de imágenes en tus sitios.
Características:
- Dimensiones variables
- Opciones de panorámica y zoom
- Presentaciones “wipe and push”
- Navegación basada en flechas
- Modo de navegación rápida
- Presentaciones con fade, pan y zoom y presentaciones combo
- Controla la duración de tus presentaciones
- Navegación basada en miniaturas
- Posibilidad de agregar comentarios a las imágenes
Para funcionar necesita Mootools 1.0 con Fx.Style, Fx.Styles, Fx.Elements y DOM.
Slideshow: A Javascript Slideshow for Mootools 1.0
heySilver es la nueva creación de Andrés Nieto un sistema que permitirá a tus usuarios interactuar con tu sitio mediante combinaciones de teclas, de forma muy similar a como trabaja Quicksilver en Mac OS X.
heySilver, es un sistema de navegación modular para aplicaciones web que aporta una funcionalidad extra a toda aplicación.
heySilver está compuesto de un sistema de plugins que se encargan de añadir funcionalidades extra mediante ficheros cargados con objetos JSON. De esta forma conseguimos una flexibilidad limitada por la imaginación del webmaster. Dispone de una miniAPI con la que podremos hacer más fácil nuestras creaciones.
Si queréis, que estoy segura que si, ver algún ejemplo de uso y conocer más sobre este interesante script no os perdáis el blog que han creado para la ocasión: http://heysilver.anieto2k.com/blog/
Enhorabuena Andrés, te sigues superando cada día. A mi, al menos, me has dejado sin palabras.
Permitir a quienes comenten en nuestro sitio previsualizar lo que han escrito antes de enviarlo nos ahorra muchos post dobles y mucho ups me confundí poniendo eso (si, me lo apunto). No obstante, hacer que nuestros usuarios tengan que recargar la página para verlo puede resultarles molesto, terminando por enviar sin previsualizar con lo que no se soluciona nada.
En sitios como Digg han implementado un interesante sistema, previsualización al vuelo. Según vas escribiendo vas viendo el resultado.
Si te interesa conseguir este efecto para tus sitios web estás de suerte, en Dream It han publicado un script de Javascript con el que podrás implementarlo facilmente.
Javascript Preview - Like Digg
