Contenido

jWindow, el Thickbox que se deja mover

24 Oct

+ 0

jWindow, es una versión del famoso thickbox (solo en concepto) desarrollado con jQuery como base. Con una particularidad que lo hace diferente a las demás herramientas de similar finalidad.

jwindow1.jpg

jWindow, permite abrir varias ventanas a la vez sobre nuestro documento, permitiendonos arrastrarlas por él, pudiendo así colocarlas a nuestro antojo facilitandonos la lectura o visualización de imagenes. El peso de la herramienta completa es de un 38kb inclujendo jQuery, un peso no demasiado bajo pero bastante ajustado (dice el creador).

¿Como lo uso?

Despues de añadir todos y cada uno d los ficheros necesarios, demasiados para mi gusto. 


<link rel="stylesheet" type="text/css" href="jwindow.css" />
<script type="text/javascript" src="./scripts/jquery.js"></script>
<script type="text/javascript" src="./scripts/compressed/ifx.js"></script>
<script type="text/javascript" src="./scripts/compressed/iutil.js"></script>
<script type="text/javascript" src="./scripts/compressed/ifxtransfer.js"></script>
<script type="text/javascript" src="./scripts/compressed/idrag.js"></script>
<script type="text/javascript" src="./scripts/jwindow.js"></script>

Podemos crear nuestros divs con el contenido, para ellos creamos una estructura similar a esta.


<div class="window_content" id="TU_ID">
  <div class="window_main">
    TU TEXTO o IMAGEN
  </div>
</div>

Como podemos ver, usaremos la clase window_content y window_main para indicar que se trata de un <div></div> que nuestro jWindow debe tratar y mostrar como una ventana flotante. Ahora solo nos queda crear los enlaces que nos haran visibles nuestros divs.


<a href="#TU_ID?YYY,XXX" title="TITULO DEL ENLACE" class="window_link">TEXTO DEL ENLACE</a>

Realmente fácil y bastante claro. Usaremos el ID de nuestro div para para indicar que div hemos de mostrar, y mediante los parametros YYY(alto) y XXX(ancho) indicaremos el tamaños del mismo. Únicamente hemos de respetar el class de nuestro enlace que se usará para lanzar nuestros pop-ups.

[Descargar][Demo]

La Web más alta del mundo

24 Oct

+ 10

Curioso proyecto, experimento CSS dicen ellos, que como tambien dicen:

  • One HTML container; // Un Contenedor HTML
  • pure CSS styling; // Diseño únicamente con CSS
  • no workarounds, filters, or hacks. // Ningún tipo de filtro, hack

logo.jpg

Por el momento esta la página web más alta del mundo con una altura de 18.939Km (11.769 millas), y unicamente se trata de un div que mediante CSS se le ha asignado un estilo CSS que le otorga dicho tamaño.


/* The styling of the highest “div” element of the world: */
div#whws { 
	font-size: 100cm; 
	height: 18939.583em; 
	line-height: 1.0; 
}

El experimentos en si, es tambien bastante simple, pero hasta ahora ha demostrado un par de cosas que como mínimo, no nos sorprende.

 

  • For the records – Gecko-based browsers like Firefox show an interesting behavior when you want to make the site any higher, namely by shrinking or collapsing its main container;
  • Internet Explorer doesn’t accept internal references behind the real action, and it’s unclear if the container height really is 18,939 meters (though it’s damn high nonetheless);
  • Netscape 8.1, at least, swallows up the styling.

Yo, he tenido porblemas con Firefox, incluso me ha colgado un par de veces el navegador. ¿A alguien más le ha pasado?

Documentación de Mootools

24 Oct

+ 2

logo1.gifPrimero fue Moo.fx, una librería de 3kb que hizo temblar al gigante, despues apareció moo.ajax, y más adelante mootools. Ahora nos deleitan con esta extensa documentación con la cual podremos usar esta fantástica librería sin tener ningún problema.

Plagada de ejemplos y desglosada en ficheros, podremos conocer las posibilidades de cada uno de ellos y optimizar más aún nuestra descarga.

Zen Garden para IE7

24 Oct

+ 1

Versión IE7 de la famosa ZenGarden, es que nos tienen que tranquilizar, por que así como vemos el futuro… 😀

Internet Explorer 6.0 + 7.0, ahora es posible

24 Oct

+ 7

Parece ser que era inevitable que apareciera la nueva versión de IE, esto además de cambiar nuestra forma de programar y nuestras pruebas tambien nos implica tener que instalar este navegador en nuestro PC.

multiie3-thumb.png

Un problema con el que nos encontramos es que al instalar la versión 7.0 de Internet Explorer perdemos la version 6.0 y aún es demasiado pronto para poder olvidarnos de ella, así que la mejor forma es tener los dos navegadores instalados simultaneamente.

¿Como hacerlo?

Muy facil, un tio de EEUU (como no)  ha modificado la instalación de IE 7 haciendola completamente independiente de la versión anterior.

[Descargar]

¿Problemas?


Uno de los problemas con los que nos podemos encontrar es que nuestro navegador no esté bien configurado para entender la petición.

<!--[if lte IE 7]>

Ojo!! Debería funcionar únicamente con la instalación del fichero anterior.

Pero si así y todo no funciona, tendremos que modificar nuestro registro.

  • Inicio > Ejecutar Escribimos «regedit» y pulsamos Enter.
  • Navegamos hasta HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Version Vector
  • Renombramos la KEY «IE» a «xIE«.

Con esto deberíamos tener instalador IE 7.0 sin necesidad de tener que olvidarnos del famoso y odiado 6.0.

Enlace interesante

Si eres de los que necesitan varias versiones de IE, este enlace te vendrá como caido del cielo.

Mensajes transparentes, el adios del alert();

24 Oct

+ 0

Parece mentira, pero esa función de Javascript nos ha salvado la vida a más de uno en muchas ocaciones. Y este hombre, el creador de carousel con Prototype y ventanas modales pretende acabar con él con su nueva creación.

Transparent Message

No es nada nuevo, un div flotando que muestra el contenido que en su defecto mostraría un alert. Pero está de moda usar librería pesadas para hacer efectos chorras. Se trata de una clase en Javascript que mediante el uso de Prototype y Script.aculo.us se superpone sobre nuestra web mostrando el mensaje que deseemos mostrar.

Por el momento, está probado sobre los principales navegadores, IE6, Firefox (PC y Mac), Opera 9, Safari y Camino. Además tambien disponemos de un ejemplo de como usarlo sobre Ruby.

[Descargar][Demo]

Generador de Barras

24 Oct

+ 0

Una util herramienta con la que podrás generar barras online tomando como referencia una imagen, así no aseguramos que encontraremos un color que se pueda ajustar a nuestro diseño.

Pi, en colores

24 Oct

+ 0

Los chicos de Microsiervos nos tienen muy informados acerca de las curiosidades de PI, un número muy curioso y además muy recurrido dentro del sector geek de la blogsfera. Pero ha tenido que ser via Flickr que me encontrara la versión colorida de PI… lo dicho, gente con mucho tiempo libre 😀

Pi en Colores

Más layouts para nuestras webs

24 Oct

+ 1

¿Necesitas comenzar una web? Necesitarás una estructura base de donde comenzar a montar la web con los contenidos. Podrás encontrar gran variedad de layouts todos validados y completamente optimizados para la web moderna.