Casi siempre cuando desarrollamos para web, los detalles y efectos extras que por lo general no implican una mayor eficiencia, son los que marcan las diferencias y hacen mas atractivos nuestros productos finales. Aquí les dejo un pequeño tutorial donde se detalla como aplicar este efecto usando MooTools y PHP.

Espero que les sea útil… VER TUTORIAL

Se que varios opinan muchas cosas y hay lluvia de diferencias entre estos dos frameworks, me encontre un sitio en donde habla de la diferencias entre ellos o más bien sus caracteristicas de cada uno.

Este es el contenido de este pequeño manual creado por Aaron Newton of Clientcide.

• Los Definiciones lo dicen todo
• La Curva de Aprendizaje y La Comunidad
• Para qué es bueno JavaScript
  • Más que solo el DOM
  • Herencia con JavaScript
  • Auto Referencia
• MooTools Hace JavaScript en sí Más Divertido
• jQuery Hace el DOM Más Divertido
• Cualquier cosa que hagas yo lo puedo hacer mejor
• MooTools te permite tenerlo a tu manera
• Encadenado (Chaining) como un patrón de diseño
• Reusando código con jQuery
• Reusando código con MooTools
  • MooTools y Herencia
  • Extendiendo e Implementando Clases
• Tiempo de Decisión
• Discusión

Visto en: jqueryvsmootools.com

Mootools Forge es un directorio que tiene muchas librerías para los adictos a usar mootools en sus desarrollos web, sucedio el milagro esperado ya que con jquery hay miles de sitios donde puedes encontrar ejemplo, ahora con mootools puede hacer buenos proyectos web.

En Mootools Forge podrás encontrar plugins categorizados por tipo y, si eres desarrollador, también podrás subir los tuyos.

Sin duda un gran recurso para esta excelente libreria.

Enlace: Mootools Forge

mocha (IU) es un plugin para mootools que nos ayudan a crear la interfaz de usuario en muy poco tiempo, nos ayuda proporcionando la colección de la interfaz de usuario para aplicaciones web, los escritorios virtuales, sitios web, los widgets, independiente ventanas de diálogo, modales o cualquier asistentes webapps.

Mediante el uso de este plugin podemos conseguir efectos como expandible, plegable y paneles de cambiar de tamaño, horizontal y vertical, actualizar dinámicamente contenido de la ventana, carga de contenido mediante innertHTML, XHR o un iFrame, etc mocha (ui) trabaja en Fireforx 3, Safari 3, Opera 9.5, IE 6 y 7, que utiliza elementos de lona para la elaboración de ventanas y sus sombras para ExplorerCanvas también se necesita para hacer que funciona en IE.

Aquí puedes descargar la libreria y aquí ver el ejemplo.

Enlace: mochaui.org

Les presento un listado de frameworksútiles para el desarrollo web, estos nos permiten hacer muchas cosas con menos codigo, al igual qeu sus estilos y efectos.

Aqué les dejo la una tabla de comparación de algunos de los Framework más utilizados

• Animator.js
• Burst Engine
• Canvas 3D
• Facebook Animation Library
• $fx()
• Glimmer
• GX
• jsAnim
• JSTweener
• moo.fx
• Pixastic
• Processing.js
• Raphael
• script.aculo.us
• Scriptio.us
• Scripty2
• xAnimation

Mootools
http://mootools.net/

JQuery
http://jquery.com/

Prototype
http://www.prototypejs.org/

YUI
http://developer.yahoo.com/yui/

Dojo
http://www.dojotoolkit.org/

Qooxdoo
http://qooxdoo.org/

GWT Google Web Toolkit
http://code.google.com/webtoolkit/

Rico
http://openrico.org/rico/home.page

Ext JS: “Documentación, diseño y código limpio”
http://extjs.com/

Hola de nuevo!!!
Hoy les voy a mostrar un lightbox que esta muy xido, llamado Sexy LightBox!!!
lo puedes utilizar con jquery o con mootols

Les muestro como!

Lightbox Con Mootols!!

1
2
3

<script type="text/javascript" src="mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.mootools.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

Lightbox Con jQuery!!

1
2
3
4
5

 
<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.jquery.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

Por ultimo, llamamos a nustra Funcion!!!

Funcion del Lightbox Para mootols!!!

1
2
3
4
5

<script type="text/javascript">
  window.addEvent('domready', function(){
    SexyLightbox = new SexyLightBox();
  });
</script>

Funcion del Lightbox Para jQuery

1
2
3
4
5

<script type="text/javascript">
  $(document).ready(function(){
    SexyLightbox.initialize();
  });
</script>

Ahora vamos a aplicarlo en nuestro html

Para usarlo en un link de imagen

1

<a href="imagen.jpg" title="some title" rel="sexylightbox">View image</a>

Para usarlo en una galeria de imagenes!!!!

1
2
3

<a href="senorms.jpg"     rel="sexylightbox[galeria]">Link 1</a>
<a href="imagen.jpg"      rel="sexylightbox[galeria]">Link 2</a>
<a href="cualquiera.jpg"  rel="sexylightbox[galeria]">Link 3</a>

Ahora aplicamos el fondo

Fondo CSS Para mootols!!

1
2
3
4
5
6

SexyLightbox = new SexyLightBox({
  OverlayStyles:{
    'background-color':'#fff',
     'opacity': 0.6
  }
});

Fondo CSS Para Jquery!!!

1
2
3
4
5
6

SexyLightbox.initialize({
  OverlayStyles:{
    'background-color':'#fff',
     'opacity': 0.6
  }
});

Podemos utilizar dos colores para nuestro Sexy LightBox (negro y blanco)

Para aplicarlo!!

Color de Fondo con mootols!!!

1

SexyLightbox = new SexyLightBox({color:'white'});

Color de Fondo con jQuery!!!

1

SexyLightbox.initialize({color:'white'});

Eso fue todo!!!

Les dejo el link de los demos con Mootols y jQuery

Y por ultimo los archivos de descarga!!!!