Moderador del foro: ZorG  
Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » JavaScript (información de referencia acerca de la cosa)
JavaScript
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 16 | 1:30 PM
Librería Javascript para animación jsAnim

Analizamos la librería que nos permite crear animaciones CSS, por medio de Javascript, de una forma muy sencilla

Vamos a hablaros de unas librerías creadas en el lenguaje de programación Javascript, que sirven para realizar animaciones de diversos tipos. Se trata de jsAnim, un producto gratuito y de fácil uso, que se encuentra en fase beta, pero que ya tiene muchas funciones muy útiles para aplicar dinamismos a las páginas web sin por ello perder accesibilidad.

Empezamos por decir que esta librería nos ayuda a crear animaciones CSS utilizando como lenguaje Javascript para alterar los atributos de estilos de una manera suavizada y a lo largo del tiempo, lo que permite crear el efecto de animación. La gran ventaja de utilizar Javascript supone que podremos visualizar las animaciones en cualquier navegador actual.

La última versión a la hora de escribir este artículo es la 0.2 y su peso es de 25kb. Realmente es un peso bastante reducido, al menos para las posibilidades de las librerías, y gracias a ello no supondrá un problema para nuestro servidor y ni para los clientes que tengan que descargar el código fuente a la hora de visualizar el sitio.

Podemos descargar jsAnim desde el enlace: http://jsanim.com/

Instalación de la librería jsAnim
Lo primero que tenemos que hacer es descomprimir la carpeta donde viene jsAdmin y subirla a nuestro servidor. Una vez subida tenemos que colocar el siguiente código en la cabecera de nuestra página para que pueda ser accesible el script de las librerías.

Quote
<script type="text/javascript" src="ruta_al_archivo/jsAnim.js"> </ script>

Como podemos ver, vamos a trabajar con Javascript por lo que puede ser util disponer de un archivo .js para realizar nuestras funciones, en ese caso incluiríamos dicho archivo desde la cabecera, de la misma forma que hemos añadido la librería.

Una vez incluidos los archivos, comenzaremos a crear nuestras funciones en el nuevo archivo .js que hemos creado. Lo primero que debemos de hacer es crearnos una instancia a un objeto jsAnimManager. Este objeto controla la animación de varios objetos.

Quote
var manager= new jsAnimManager();

Casi todas las propiedades de cualquier elemento de una página se pueden animar pero para ello es necesario crear primero un objeto jsAnimObject, indicando el identificador del elemento de la página que deseamos animar:

Quote
var anim=manager.createAnimObject(?id_del_elemento?);

Una vez que hemos creado el objeto, nos queda animar una propiedad del elemento:

Quote
anim.add({property: Prop.top, from: 50, to: 500, duration: 2000});

La linea de código anterior inicializa la animación, que parte de 50 y va hacia 500, en dos segundos.

Con esto ya tendríamos la parte del código Javascript creada y hemos visto que es bastante sencilla.

Ahora sólo nos faltaría la parte del HTML y CSS, pero veremos que es tan simple como crear los elementos y aplicarles los estilos que queramos. En este caso vamos a animar una imagen, y lo único importante es ponerle el identificador a esa imagen igual al identificador que utilizamos para acceder al elemento desde el código Javascript.

Código CSS:

Quote
.ejemp{
witdh:600px
backgroud-color: green;
}

Código HTML:

Quote
<div class=ejemp>
<img src="images/figura.gif" id="id_del_elemento" />
</div>

Con esto ya nos funcionaría nuestra animación. A continuación colocamos el código completo de un primer ejemplo de jsAnim en un único archivo HTML:

Quote
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script type="text/javascript" src="jsAnim.js"> </script>
<script type="text/javascript">
function animacion() {
var manager= new jsAnimManager();
shroom = document.getElementById("elementId");
shroom.style.position = "relative";
var anim = manager.createAnimObject("elementId");
anim.add({property: Prop.left, to: 450, duration: 2000});
}
</script>
<title>Ejemplo animacion con jsAnim</title>
</head>

<body>
<div class="ejemp" style="border: medium solid Fuchsia; width: 600px; height: 200px;">
<img src="images/figura.jpg" id="elementId" />
</div>
<button onclick="animacion()">Animate!</button>
</body>
</html>

Podemos ver el ejemplo funcionando en una página aparte.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 17 | 5:17 PM
Ventana de alerta para AJAX con Javascript, DOM y CSS

En este tip les mostraré como armé esta ventana de alerta para AJAX, con DOM y CSS... la idea es entregar una base para agregar funcionalidades tales como drag, eventos de salida, etc:

Esta es la base:

alerta.js

Código :

Quote
function alerta(titulo, texto) {

Primero definimos la función, que recibirá el titulo de la alerta mas el texto del contenido... Además, trabajaremos con una imagen llamada fondo.gif, que será el fondo de la ventana mientras se muestra la alerta (yo elegí una imagen de 4 píxeles con 3 transparentes para que se opaque el contenido bajo la alerta) y definimos un div contenedor de nuestra ventana de alerta llamado fondo como sigue:

Código :

Quote
var fondo = document.createElement('div');
fondo.style.backgroundImage = "url(img/fondo.gif)";
fondo.style.position = "absolute";
fondo.style.width = "100%";
fondo.style.height = "100%";
fondo.style.top = "0px";
fondo.style.left = "0px";
fondo.style.verticalAlign = "middle";
fondo.align = "center";

Ahora bien, tenemos el fondo, pero necesitamos además crear la ventana de alerta que contendrá lo siguiente:

• Una barra de titulo
• Un contenedor con el texto de la alerta
• Un contenedor con el botón "Aceptar"

veamos como sigue:

Código :

Quote
var ventana = document.createElement('div');
ventana.style.width = "200px";
ventana.style.margin = "5px";
ventana.style.border = "solid 1px #999999";
ventana.style.backgroundColor = "#FFFFFF";

var barraTitulo = document.createElement('div');
barraTitulo.style.backgroundColor = "#e2e3e5";
barraTitulo.innerHTML = titulo;

var contenido = document.createElement('div');
contenido.style.padding = "5px";
contenido.innerHTML = texto;

var cerrar = document.createElement('div');
cerrar.style.padding = "5px";

Ahora bien, tenemos que crear un botón de tipo input al cual le asignaremos la acción de ocultar nuestra ventana de alerta y dejar nuestra pagina como estaba anteriormente:

Código :

Quote
var boton = document.createElement('input');
boton.type = "button";
boton.value = "Aceptar";
boton.onclick = function() {
fondo.style.visibility = "hidden";
}

Bien, solo queda agregar estos contenedores a donde correspondan para poder finalizar mostrando la ventana en el body:

Código :

Quote
ventana.appendChild (barraTitulo);
ventana.appendChild (contenido);
ventana.appendChild (cerrar);

fondo.appendChild (ventana);
document.body.appendChild(fondo);

return true;
}

Retornamos y esa es todo el código necesario para mostrar la ventana de alerta que se llama mediante alerta (titulo, texto). Espero que les haya servido, saludos!


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 18 | 12:05 PM
Método delay() para retrasar la ejecución efectos de la cola

El método delay() de jQuery sirve para generar un intervalo de espera entre la ejecución de funciones de la cola de efectos.

El método delay() es otro de los que algún día, y quizás sea temprano, querrás aprender a utilizar para generar una pausa entre la ejecución de funciones que se encuentran en la cola de efectos.

Es tan sencillo como invocarlo indicando como parámetro el número de milisegundos que deseas que se espere entre una y otra llamada a las funciones encoladas en la cola de efectos, pero aunque sea bastante obvio, quizás estará bien ofrecer algunas notas sobre su funcionamiento.

Como sabemos, las funciones de la cola de efectos se ejecutan una detrás de la otra, sin que transcurra ningún tiempo entre los distintos efectos encolados. Es decir, en el instante que un efecto termina, comienza el siguiente efecto de la cola sin más demora. Pero esto es algo que podemos cambiar si usamos delay().

Nota: Ahora bien, cabe decir que delay() no reemplaza la función nativa setTimeout() de Javascript. el método delay() sólo sirve para generar una pausa entre efectos de la cola de efectos, pero no para producir tiempos de espera en general, que tendrán que realizarse como debemos de saber, con la función nativa setTimeout().

.delay( duración, [ nombreCola ] )

El método delay recibe dos parámetros, que explicamos a continuación:
• El parámetro duración sirve para indicar los milisegundos de espera que tienen que producirse entre efecto y efecto.
• El parámetro nombreCola está para indicar en qué cola de efectos se desea realizar ese retardo. Este segundo parámetro es opcional y si no lo indicamos se realizará la espera en la cola de efectos predeterminada.

Veamos el ejemplo siguiente:

Quote
capa = $("#micapa");
capa.slideUp(1000);
capa.delay(2000)
capa.slideDown(1000);

En este caso estamos encolando dos efectos, con un retardo entre medias de 2 segundos. En total habremos encolado tres funciones, la primera un efecto slideUp(), la segunda un retardo de 2000 milisegundos y la tercera un efecto slideDown().

Esta carga de las tres funciones se podría resumir, concatenando llamadas a los métodos de la siguiente manera:

Quote
capa.slideUp(1000).delay(2000).slideDown(1000);

Ejemplo completo con efectos y delay()
A continuación podemos ver una página de ejemplo completa en la que hacemos varios efectos y aplicamos varios retardos entre ellos.

Quote
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Cola con delay()</title>
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
#micapa{
left: 20px;
top: 20px;
position: absolute;
font-size: 0.75em;
font-family: tahoma, verdana, sans-serif;
width: 740px;
background-color: #ddf;
padding: 10px;
border: 1px solid #bbb;
}
</style>
<script languague="javascript">
function colaEfectos(){
capa = $("#micapa");
capa.slideUp(1000);
capa.delay(2000)
capa.slideDown(1000);

capa.fadeTo(1500, 0.3).delay(3000).fadeTo(500, 1);

capa.delay(500);
capa.animate({
"font-size": "+=0.5em"
}, 1000, colaEfectos);
//alert (capa.queue().length)
}
$(document).ready(function(){
colaEfectos();
});
</script>

</head>
<body>
<div id="micapa">Vamos a ejecutar varios métodos para hacer una cola de efectos, pero vamos a ponerles un retardo entre unos y otros.</div>
</body>
</html>

Podemos ver el ejemplo en funcionamiento en una página aparte.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 19 | 2:33 PM
Javascript: Cómo crear un footer fijo y expandible

Podemos crear un pie de página, o footer, que se mantenga en primer plano mientras navegamos y se desplace con nosotros mientras navegamos. Además, podemos hacer que al pasar el mouse sobre el footer, éste se extienda revelando más opciones. En esta guía te brindamos el código para crear este efecto.

Este script utiliza la propiedad CSS llamada "positon:fixed" más un poco de JavaScript para crear un pie de página (aunque también puede utilizarse para crear un encabezado) que nos siga en toda nuestra navegación por el sitio, y que al posar el mouse sobre él, se expanda brindándonos más contenido.

También podemos cambiar su configuración para que sea necesario hacer clic para que se despliegue el menú en cuestión.

Esto debe colocarse al comienzo del código HTML de tu sitio:

Quote
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<link rel="stylesheet" href="expstickybar.css" />

<script src="expstickybar.js">

/***********************************************
* Expandable Sticky Bar- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

Esto hace referencia a varios archivos. Esos archivos deberías bajarlos y copiarlos en tu hosting a la carpeta en la que se encuentra la página que visualizas. Aquí están esos archivos para descargar:

expstickybar.js
expstickybar.css
open.gif
close.gif
stickybarcontent.htm
Ahora, nos queda crear el footer en cuestión:

Quote
<div id="stickybar" class="expstickybar">

<a href="#togglebar"><img src="open.gif" data-closeimage="close.gif" data-openimage="open.gif" style="border-width:0; float:right;" /></a>
<div style="text-align:center;padding-top:3px"><b>Copyright © 2010 Dynamic Drive</a></div>

</div>

Y eso es todo.

Ver ejemplo


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 20 | 1:03 PM
Testea el soporte a CSS3 con Javascript

Interesante código en javascript que testea el soporte de la propiedad CSS3 que se le especifique. Cuando se pasa la propiedad se debe omitir el guión. Por lo que si deseamos testear "border-radius", deberemos pasar "borderRadius" o "BorderRadius".

Quote
var supports = (function() {
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;

return function(prop) {
if ( prop in div.style ) return true;

propprop = prop.replace(/^[a-z]/, function(val) {
return val.toUpperCase();
});

while(len--) {
if ( vendors[len] + prop in div.style ) {
// browser supports box-shadow. Do what you need.
// Or use a bang (!) to test if the browser doesn't.
return true;
}
}
return false;
};
})();

// EJEMPLO DE USO
if( supports('borderRadius')) {
alert('Tu navegador soporta la propiedad border-radius');
}


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 21 | 4:13 PM
Crea un carrusel doble con la librería DualSlider

DualSlider es un plugin para jQuery que nos va a permitir la creación de dos carruseles juntos, en uno tendremos un slider convencional donde tendremos imágenes o vídeos, mientras que en el otro tendremos un slider que mostrará un texto descriptivo de la imagen activa en el otro carrusel.

Su funcionamiento es muy sencillo, solo hay que crear una estructural XHTML con una determinadas clases que será lo que utilice el plugin para crear los dos carruseles por separado.

También nos proporciona una serie de opciones que podemos configurar como nosotros queramos. Estas propiedades son:

Auto: Para indicar si se pasan las imágenes y texto de forma automática. Recibe un valor booleano, true o false.
AutoDelay: Indicaremos el tiempo en milisegundos que transcurrirá para que se produzca una transición de la imagen.
EasingCarousel: Tipo de efectos en la transición.
DurationCarousel: Valor en milisegundos de la transición de las imágenes.
DurationDetails: Valor en milisegundos de la transición del texto.

Para poder utilizarlo, lo que debemos de crear en el archivo html un contenedor con la clase “carousel”. Dentro de este contenedor tendremos otro contenedor con la clase “details”, que será donde se indiquen los textos descriptivos, y otro “backgrounds” donde se indicarán los elementos del carrusel principal.

También se puede indicar otros contenedores para poder navegar por los distintos elementos que forman parte del carrusel.

Un ejemplo de código sería el siguiente:

Quote
<div class="carousel clearfix">

<div class="panel">

<div class="details_wrapper">

<div class="details">

<div class="detail">
<h2 class="Lexia-Bold"><a href="#">Dolor sit amet</a> Cum sociis natoque penatibus et magnis dis parturient montes</h2>
<a href="#" title="Read more" class="more">Read more</a>
</div><!-- /detail -->

<div class="detail">
<h2 class="Lexia-Bold"><a href="#">Lorem ipsum dolor</a> sit amet, consectetuer adipiscing elit. </h2>
<a href="#" title="Read more" class="more">Read more</a>
</div><!-- /detail -->

<div class="detail">
<h2 class="Lexia-Bold"><a href="#">Aenean massa</a>. Cum sociis natoque penatibus et magnis dis parturient montes</h2>
<a href="#" title="Read more" class="more">Read more</a>
</div><!-- /detail -->


</div><!-- /details -->

</div><!-- /details_wrapper -->

<div class="paging">
<div id="numbers"></div>
<a href="javascript:void(0);" class="previous" title="Previous" >Previous</a>
<a href="javascript:void(0);" class="next" title="Next">Next</a>
</div><!-- /paging -->

<a href="javascript:void(0);" class="play" title="Turn on autoplay">Play</a>
<a href="javascript:void(0);" class="pause" title="Turn off autoplay">Pause</a>

</div><!-- /panel -->

<div class="backgrounds">

<div class="item item_1">
<object width="604" height="340"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=10930565&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=10930565&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="604" height="340" wmode="transparent"></embed></object>
</div><!-- /item -->

<div class="item item_2">
<object width="604" height="340"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12257932&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=12257932&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=00ADEF&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="604" height="340" wmode="transparent"></embed></object>
</div><!-- /item -->

<div class="item item_3">

</div><!-- /item -->

</div><!-- /backgrounds -->


</div><!-- /carousel -->

Luego la llamada a la librería sería lo siguiente:

Quote
<script type="text/javascript">
$(document).ready(function() {

$(".carousel").dualSlider({
auto:true,
autoDelay: 6000,
easingCarousel: "swing",
easingDetails: "easeOutBack",
durationCarousel: 1000,
durationDetails: 500
});

});
</script>

Vía: Sitio oficial


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 22 | 4:48 PM
Crea animaciones con la librería JSAnim

Nosotros ya hemos escrito sobre esta librería pero ahora quería seguir explicando la cosa.

JSAnim es una librería creada en Javascript y que nos ayudará a crear animaciones CSS utilizando código Javascript. Es una librería que aún está en fase beta, pero que ya tiene muchas funcionalidades a las que se les puede sacar mucho partido.

Para poder utilizarla, lo primero que debemos de hacer es añadirla al proyecto como cualquier otra librería que podamos utilizar.

Quote
<script type="text/javascript" src="path/to/jsAnim.js"></script>

Una vez que tenemos añadida la librería a nuestro proyecto, debemos de crear una instancia del objeto jsAnimManager, que será el encargado de gestionar las animaciones de varios objetos.

Quote
var manager = new jsAnimManager(40);

El valor que le pasamos por parámetro es el tiempo en milisegundos entre un frame y otro. Al pasarle el valor de 40, le estamos indicando que cada 40 milisegundos renderice el frame. El valor por defecto es de 40.

Casi todos los elementos de una página pueden ser animados, pero para conseguir esto, primero debemos de crear un objeto jsAnimObject.

Quote
var anim = manager.createAnimObject("elementId");

El elemento ID que le pasamos es el identificador del objeto que queremos animar. Múltiples managers pueden ser creados para un mismo elemento y animar mas de uno de sus atributos al mismo tiempo. La sintaxis para animar una propiedad es simple.

anim.add({property: Prop.top, from: 50, to: 500, duration: 2000});

Este comando empezará con el objeto con un valor top de 50 y gradualmente cambiarlo hasta 500, la transición durará 2 segundos.

Con esto ya tendríamos creado el código JavaScript para crear la animación. Solo nos faltaría crear el código HTML y CSS del elemento que queremos animar.

El código HTML es tan sencillo como crear un elemento y asignarle el id que le hemos indicado al crear el objeto createAnimObject (si es una imagen, entonces esta se moverá hacia arriba), y los estilos son los que nosotros queramos darle.

Entre las numerosas propiedades que se pueden modificar son:

Quote
//Delay the animation, only a duration parameter is needed
Prop.wait

//Position properties expect to and from values of the form
//new Pos(x, y)

//Position, following a line-based path
Prop.position

/*!
Follows a semicircular path
Params:
-clockwise : True for clockwise, false otherwise
*/
Prop.positionSemicircle(clockwise)

/*!
Follows a circular path through target then back to start
Params:
-clockwise : True for clockwise, false otherwise
*/
Prop.positionCircle(clockwise)

//Position and margin properties should not be animated if
//position is registered

Prop.top

Prop.right

Prop.bottom

Prop.left

Prop.margin

Prop.marginTop

Prop.marginRight

Prop.marginBottom

P rop.marginLeft

Prop.padding

Prop.paddingTop

Prop.paddingRight

Prop.paddingBottom

Prop.paddingLeft

//Border width properties require a from parameter

Prop.borderWidth

Prop.borderTopWidth

Prop.borderRightWidth

Prop.borderBottomWidth

Prop.borderLeftWidth

Prop.font Size

//Height, width, and dimension attempt to preserve center
//if position is registered

Prop.height

Prop.width

//Dimension to and from values should be of the form
//new Dim(height, width)

Prop.dimension

//Colour to and from values should be of the form
//new Col(red, green, blue) where parameters are a number
//between 0 and 255 inclusive

Prop.color

Prop.backgroundColor

Prop.borderColor

//Opacity is between 0 and 1

Prop.opacity

Pueden Ver más información en su web oficial


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 23 | 6:15 PM
Personalizando las alertas javascript

En el siguiente post voy a sobreescribir la función javascript window.alert() para mostrar una ventana de dialogo mas atractiva visualmente. Para ello voy a utilizar la librería jQuery, los awesome buttons de Zurb.com y me voy a basar en el diseño de los diálogos de Facebook.

Nota: Aquí voy a utilizar un navegador web de verdad y voy a utilizar propiedades CSS3, por lo el diseño final no va a ser idéntico en Internet Explorer 6,7,8. En caso de querer compatibilidad con estas versiones del navegador bastaría con crear una hoja de estilos especifica, sin embargo en este tutorial no se va a contemplar esta opción.

HTML
El código HTML del diálogo se generará mediante javascript y se insertará al final de la etiqueta body.

El código HTML será el siguiente:

Quote
<div id="dialog">
<div id="dialog-wrapper">

<h1>Titulo</h1>

<div id="dialog-content">
<p>Content</p>
</div>

<div id="dialog-content">
<!-- Botón CSS3 -->
<a class="awesome small orange">Aceptar</a>
</div>

</div>
</div>

CSS
El elemento con id #dialog servirá para posicionar el dialogo en el centro de la ventana respecto al eje Y. Así pues tendrá posición absoluta y definirá la propiedad top con un valor inicial de 150px.

Quote
#dialog{
position: absolute;
top: 150px;
width: 100%;
}

El elemento con id #dialog-wrapper servirá para centrar el dialogo a lo ancho, establecerá su ancho y mostrará el borde semitransparente.
Es importante indicar que este elemento no puede tener un background-color ya que este color quedaría por debajo del borde transparente y entonces no se apreciaría el efecto.

Quote
#dialog-wrapper{
border: 10px solid rgba(150, 150, 150, 0.7);
border-radius: 10px;
-webkit-border-radius: 10px;
-mox-border-radius: 10px;
margin: 0 auto;
width: 500px;
}

Los siguientes elementos h1, #dialog-content y #dialog-footer no tienen mucho que resaltar.

Quote
#dialog h1{
background-color: #f60;
border: 1px solid #c30;
border-bottom: 0;
color: white;
padding: 5px 10px;
}

#dialog-content{
background-color: white;
border: 1px solid #666;
border-width: 0 1px 1px;
padding: 10px;
}

#dialog-content p{
margin-bottom: 10px;
}

#dialog-footer{
background: #ccc;
border: 1px solid #666;
border-top: 0;
padding: 10px;
text-align: right;
}

jQuery
Llega el momento hacerlo funcionar todo. La mayor parte del trabajo va a ser la creación del HTML anterior.

La estructura será la siguiente:

Quote
(function($){
// Uso: $(document).dialog("Texto");
// $(document).dialog({title: "Titulo", content: "Content"});
$.fn.dialog = function(data){
// Inicialización de los datos a mostrar

// Determinar la posición del dialogo

// Creación del dialogo
}
});

Primero, debemos comprobar el tipo de objeto recibido como parámetro. Si éste es una cadena entonces lo usaremos como contenido del dialogo. Si por el contrario recibimos un objeto con las propiedades title y content utilizaremos esta información para mostrar el dialogo.

Quote
var title, content;
if(data && data.title){ title = data.title; }else{ title = "Javascript alert"; }
if(data && data.content){ content = data.content; }else{ content = data; }

Obtener la posición donde se mostrará el dialog es sencilla. lo vamos a situar siempre a 150 px de la parte superior de la ventana, para ello tenemos que tener el cuenta el scroll de la página:

Quote
var currentTop = $(document).scrollTop();

La creación del dialogo tendrá en cuenta este valor:

Quote
var $dialog = $('<div>', {id: 'dialog', css:{top: currentTop + 150}}).prependTo('body');

var $title = $('<h1>').text(title).appendTo($wrapper);
var $content = $('<div>', {id: 'dialog-content'}).html("<p>"+content+"</p>").appendTo($wrapper);
var $footer = $('<div>', {id: 'dialog-footer'}).append(
$('<a>', {'class': 'awesome small orange'})
.text("Aceptar")
.click(function(){
$dialog.fadeOut(function(){$dialog.remove()});
return false;
})
).appendTo($wrapper);

Solo destacar la función del evento click del botón aceptar. Esta función primero hace un fadeOut del dialogo y al terminar lo elimina del DOM.
A continuación lo insertamos en el DOM con un efecto fadeIn.

Quote
$dialog.hide().appendTo('body').fadeIn();

Y para terminar vamos a añadir funcionalidad extra para poder cerrar el dialogo utilizando la tecla escape o la tecla enter.

Quote
return $(this).keyup(function(evt){
if (evt.which == 27 || evt.which == 13){
$dialog.fadeOut(function(){$dialog.remove()});
}
});

Código final
El código final es el siguiente:

Quote
(function($){
$.fn.dialog = function(data){
var title, content;
if(data && data.title){ title = data.title; }else{ title = "Javascript alert"; }
if(data && data.content){ content = data.content; }else{ content = data; }

var currentTop = $(document).scrollTop();
var $dialog = $('<div>', {id: 'dialog', css:{top: currentTop + 150}}).prependTo('body');

var $wrapper = $('<div>', {id: 'dialog-wrapper'}).appendTo($dialog);
var $title = $('<h1>').text(title).appendTo($wrapper);
var $content = $('<div>', {id: 'dialog-content'}).html("<p>"+content+"</p>").appendTo($wrapper);
var $footer = $('<div>', {id: 'dialog-footer'}).append(
$('<a>', {'class': 'awesome small orange'})
.text("Aceptar")
.click(function(){
$dialog.fadeOut(function(){$dialog.remove()});
return false;
})
).appendTo($wrapper);
$dialog.hide().appendTo('body').fadeIn();

return $(this).keyup(function(evt){
if (evt.which == 27 || evt.which == 13){
$dialog.fadeOut(function(){$dialog.remove()});
}
});
}
})(jQuery);

Probando el dialogo y sobreescribiendo window.alert
Ahora podemos invocar este diálogo tal que así:

Quote
$(document).dialog("Texto");

La idea inicial es que este dialogo sustituya al predefinido en nuestro navegador. Esto es muy sencillo, basta con incluir lo siguiente:

Quote
window.alert = $(document).dialog;

Puedes probarlo en la página de demostración desde el inspector de webkit si estas en chrome o desde firebug si estas en firefox.

Descargar código


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 24 | 12:37 PM
Ordenación de arrays con JavaScript

A lo largo de este artículo, vamos a ver como funciona la ordenación de arrays en Javascript, y de las sorpresas que nos podemos encontrar.

Consideremos el siguiente código:

Quote
var a = [30,2,1,9,15];
a.sort();
alert(a);

Si lo ejecutamos, nosotros podríamos pensar que la salida sería 1, 2, 9, 15, 30, pero nada de eso, sino que lo que nos mostraría sería 1, 15, 2, 30, 9. Esto es así, porque JavaScript trata todo como cadenas, y de esa forma, 15 va antes que el 2, de igual forma, que el 30 va antes que el 9.

Para solucionar este problema, a la función Sort, debemos de pasarle una función de comparación, la cual tendrá dos parámetros (a y b) y que retornará lo siguiente:

  • [ Un valor menor que 0 si a es menor que b.
  • Un valor mayor que 0 si a es mayor que b.
  • Un cero si ambos son iguales.

    La función de comparación numérica más simple es por lo tanto:

    Quote
    function compare(a, b) {
    return a - b;
    }

    Una de las grandes cosas que proporciona JavaScript, es que podemos ordenar cualquier tipo de objetos, bajo una de sus propiedades.

    Por ejemplo, pensemos en un ejemplo que utilice coordenadas.

    Quote
    var locations = [
    { name: "shops", x:3, y:4 },
    { name: "library", x:5, y:3 },
    { name: "pub", x:1, y:2 }
    ];

    var home = { name: "home", x:0, y:0 };

    Queremos hacer la ordenación dependiendo de la distancia de los puntos a la home. Para ello creamos la siguiente función:

    Quote
    function distance(p1, p2) {
    return Math.sqrt(Math.pow(p1.x-p2.x,2)+Math.pow(p1.y-p2.y,2));
    }

    Ahora, para hacer la ordenación, debemos de hacer la llamada de la siguiente manera:

    Quote
    locations.sort(
    function(a, b) {
    return distance(home,a)-distance(home,b);
    }
    );

    Como vemos, es sencillo crearnos nuestras propias funciones auxiliares para la ordenación de los objetos que estamos utilizando en nuestras aplicaciones.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 25 | 12:46 PM
    Crea un carrusel de contenido html con jCarousel Lite

    jCarousel Lite es un plugin desarrollado para jQuery que nos permitirá crear un deslizador de contenido HTML en nuestra aplicación, de una forma muy sencilla y con muy pocos pasos.

    Vamos a ver la forma en la que podemos hacer uso de este plugin en nuestras aplicaciones.

    Lo primero que debemos de hacer es descargarnos o referenciar las librerías que necesitaremos, en nuestro caso jQuery y jCarousel Lite.

    Quote
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.min.js"></script>

    A continuación, definimos algunos estilos para los elementos HTML que vamos a utilizar.

    Quote
    #contenedor{
    border:1px solid red;
    width:600px;
    }
    .preview{
    height:200px;
    border:1px solid blue;
    }

    El siguiente paso será configurar jCarousel Lite, indicándole sobre que elemento del DOM deberá de actuar.

    Quote
    jQuery(function() {
    jQuery(".galeria").jCarouselLite({
    visible: 1,
    speed: 2000,
    auto: 2000,
    });
    });

    Por último es indicar el código HTML que formará parte del carrusel.

    Quote
    <div id="contenedor">
    <div class="galeria">
    <ul>
    <li>
    <div class="preview">
    <h2><a href="http://www.ribosomatic.com/articulos/detect-mobile-browser-detectar-navegador-de-telefono-movil/">Detect Mobile Browser, detectar navegador de teléfono móvil</a></h2>
    <p>Muchos me han preguntado por correo una forma de direccionar de una pagina web estandar a una versión para movil cuando se accede desde uno de estos dispositivos. Esto me hace recordar una herramienta web muy práctica que use, se trata de Detect Mobile Browser. Así es, esta herramienta no es nueva, ya tiene su tiempito en la web y...</p>
    </div>
    </li>
    <li>
    <div class="preview">
    <h2><a href="http://www.ribosomatic.com/articulos/carteles-de-anuncios-creativos/">Carteles de anuncios muy creativos</a></h2>
    <p>En muchas de las veces los carteles de anuncios son una molestia en cada edificio alto que encontremos a nuestro paso, carteles con un diseño y conceptos pobres. Sin embargo la recopilación que hace Designer Daily son realmente divertidos, creativos y destacados. Vease algunos:Adidas Strong tape billboard Panasonic hair nose trimmer Law and order McDonalds Lego...</p>
    </div>
    </li>
    <li>
    <div class="preview">
    <h2><a href="http://www.ribosomatic.com/articulos/pong-game-adobe-flash-vs-html-5/">Pong game: Adobe Flash vs HTML 5</a></h2>
    <p>Code Computerlove ha desarrollado el famoso juego Pong con HTML 5, el cual se puede jugar con el teclado, demostrando así que este lenguaje puede competir en el desarrollo de animaciones, incluso complejas, como Adobe Flash. Curiosamente el área juego del Pong está dividido en dos partes correspondiente a cada tecnología, izquierda Flash y derecha HTML, y como éstas interactuán...</p>
    </div>
    </li>
    <li>
    <div class="preview">
    <h2><a href="http://www.ribosomatic.com/articulos/recurso-1000-iconos-de-alta-calidad/">Recurso: 1000 iconos de alta calidad</a></h2>
    <p>Uno de los recursos a tener en cuenta todo desarrollador ó webmaster para sus proyectos en web son: los iconos. De esto no hay duda. Nada mas en nosotros cuando navegamos por la web, fijamos nuestra vista en las imagenes mas que en el texto. En todas las páginas web si algun texto describe, algun producto por ejemplo, seguramente encontrará...</p>
    </div>
    </li>
    </ul>
    </div>
    </div>

    Como podéis ver, es realmente sencillo tener un carrousel en nuestra aplicación.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 26 | 11:31 AM
    Escribir expresiones de condiciones más rápidas en JavaScript

    Javascript es un lenguaje bastante potente, que tiene características muy interesantes, que otros lenguajes de programación no incluyen. Pasemos a ver una de estas características.

    Supongamos que tenemos lo siguiente.

    Quote
    var x = 10;
    var y = true;
    if (x*x > 1000 || y) alert("true!");

    Si examinamos un poco el código, sabremos que la salida será “true”, ya que la variable “y” es true, a pesar de que la primera condición es falsa.

    El interprete de JavaScript, analiza cada condición de la instrucción. Si nosotros cambiamos el valor de “x” a 100, “x*x” será cierto, por lo que no será necesario que evalúe la condición que va detrás del operador OR (||), mostrando el alert de true.

    Sabiendo esto, nosotros podríamos optimizar el código anterior para que se ejecutara de una forma más rápida, ya que si le damos la vuelta a las condiciones, y primero ponemos “y”, al ser esta true, nunca evaluaría la segunda, que podría consumir más tiempo, sobre todo si hay que hacer la llamada a una función que consuma muchos recursos.

    Quote
    if (y || x*x > 1000) alert("true!");

    Esta misma consideración, la podemos utilizar para el operador AND (&), pero en este caso, la condición que sea más factible de ser falsa, la deberemos de poner la primera, para que en este caso, no se evalúe la siguiente.

    Supongamos ahora que tenemos el siguiente código, donde se hace una asignación al evaluar una condición.

    Quote
    if (summary = document.getElementById("post-summary")) {
    alert(summary.innerHTML);
    }

    La variable “summary” se establece en el elemento HTML con un ID de "post-resumen". Si el elemento existe, la condición se evalúa como verdadera y aparece la alerta. Si un elemento no se encuentra, la condición se evalúa como falsa y no se ejecuta el código.

    Esta es una técnica útil, pero poco recomendada debido a que se hace más complejo el entendimiento del código.

    Si embargo, nos podemos encontrar con otra situación, que se evalúe 2 o más condiciones, por lo que la asignación podría no ejecutarse nunca. Por ejemplo:

    Quote
    if (x || y = functionY()) {
    alert(y);
    }

    Si “x” tuviera el valor de true, “y” nunca tendría ningún tipo de valor, pero si que podemos hacer la asignación si se le da la vuelta a las condiciones.

    Quote
    if (y = functionY() || x

    Si nos decidimos por la utilización de este tipo de asignación, debemos de asegurarnos, de que esta ocupe el primer puesto siempre en las condiciones, pero esto también nos puede hacer más lento la ejecución del script.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 27 | 12:25 PM
    Sencillo slider cíclico con Cycle lite

    Cycle lite es un plugin para jQuery muy ligero que nos permite crear un slider cíclico de una forma muy sencillo. A diferencia de otros plugin, este se caracteriza por no tener tantas opciones como otros plugin, pero a su favor está que al ser más liviano, requiere menos recursos.

    El funcionamiento es muy sencillo, ya que una vez descargada la librería e incluida en nuestro proyecto, bastaría con hacer la siguiente llamada.

    Quote
    $('#slideshow1').cycle()

    Esta es la llamada sencilla, pero se puede hacer algo más compleja, si modificamos las características por defecto que trae el plugin. Un ejemplo podría ser el siguiente.

    Quote
    $('#slideshow3').cycle({
    delay: 2000,
    speed: 500,
    before: onBefore
    });

    function onBefore() {
    $('#title')
    .html(this.alt);
    };

    En este caso le estamos indicamos la velocidad de retardo y la velocidad de paso de las diapositivas. También le estamos indicando una llamada a una función que lo que hace es mostrarnos el Alt encima de la imagen.

    La lista de opciones que podemos utilizar son:

    * Timeout: Milisegundos entre transiciones de diapositivas
    * speed: Velocidad de la transición.
    * Next: Id del elemento que sirve para pasar al siguiente elemento.
    * Prev: Id del elemento que sirve para pasar al anterior elemento.
    * Before: se le pasa el nombre de una función que se debe de ejecutar después de la carga.
    * After: nombre de la función que se debe de ejecutar antes.

    Pueden ver más información al respecto en su sitio oficial.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 28 | 12:44 PM
    Maneja los eventos en Javascript

    Javascript es un lenguaje muy dinámico que te permite realizar eventos en tu página. Un evento es un proceso en respuesta a una acción realizada por el usuario en una página web. Un claro ejemplo es "onload()" por el que se realizará una acción nada más cargar una página web. Aprende a manejar los eventos disponibles en Javascript.

    Los detectores de eventos te permitirán disponer de estos eventos en cada página.

    En Javascript dispones de los siguientes detectores de eventos:

    Eventos de Formularios

    * onblur - el campo pierde el foco.
    * onchange - el elemento que tiene el foco ha cambiado su valor.
    * onfocus - cuando el campo recibe el foco.
    * onreset - sucede cuando el usuario ha reseteado el formulario.
    * onselect - cuando un texto ha sido seleccionado.
    * onsubmit - el usuario ha seleccionado enviar el formulario.

    Eventos en Ventanas

    * onblur - Sucede cuando la ventana o frame pierde el foco.
    * onerror - Cuando ocurre un error.
    * onfocus - La ventana o frame recibe el foco.
    * onload - Si el objeto se ha cargado completamente.
    * onunload - Cuando la venta se cierra.
    * onresize - Cuando se redimensiona la ventana o frame.

    Eventos de Enlaces

    * onclick - Cuando se hace click en el elemento seleccionado.
    * onmouseout - Cuando el mouse se mueve encima del enlace o botón.
    * onmouseover - Cuando el mouse se mueve fuera del enlace o botón.

    Eventos del Teclado

    * onkeydown El usuario presiona una tecla.
    * onkeypress El usuario mantiene presionada una tecla.
    * onkeyup El usuario suelta la tecla.

    Como utilizar los detectores de eventos
    Hay 2 formas posibles de implementar un detector de eventos.

    A través del siguiente código lanzaremos un evento en Html:

    Quote
    <form name="datos" onload="alert('Rellena el siguiente formulario');">

    De esta simple forma, cuando carguemos nuestro formulario aparecerá un mensaje o la acción que deseemos.

    Quote
    <form name="datos" onSubmit="validarFormulario();">

    De esta forma cuando le damos al botón de submit o enviar formulario accederemos a una función en Javascript que validará dicho formulario.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 29 | 6:53 PM
    Namespacing en Javascript

    Introducción
    Javascript es un lenguaje puramente orientado a objetos. Sin embargo, en muchas ocasiones comenzamos a programar sin un patrón de diseño y llenamos nuestra aplicación de variables y funciones globales. Esto se considera una mala práctica y puede dar lugar a errores como las colisiones o dificultades para mantener y reusar el código.

    En este artículo vamos a revisar las técnicas más recientes para la creación de objetos en Javascript. Gracias a estos patrones, podremos crear aplicaciones más organizadas, mantenibles y reusables.

    Malas prácticas desde el día cero
    Cuando comenzamos a programar en Javascript es frecuente declarar un sin fin de variables globales que más tarde iremos utilizando en nuestro script conforme las necesitemos.

    Sin embargo, la bibliografía moderna nos recomienda reservar el uso de este tipo de variables a aquellos objetos que tienen un impacto general en el entorno de nuestra aplicación. Evitando las variables globales reducimos el riesgo de colisión entre ellas a la vez que evitamos ambigüedades.

    Para la mayoría de autores, se resume con la misma frase: hay que evitar la creación de variables y funciones (objetos en general) globales siempre que no sean absolutamente necesarios.

    Para ilustrar esto, hay que recordar que en Javascript, cualquier variable global se asigna inmediatamente a un namespace (contexto) general: el objeto window. Esto permite que podamos acceder a ella directamente por su nombre, o como una propiedad del objeto general:

    Quote
    var foo = 'bar'; // Definimos la variable como global
    console.log( foo ); // Invocamos a la variable directamente por su nombre
    console.log( window.foo ); // Invocamos a la variable como un método

    No hay nada nuevo en todo esto. A partir de aquí, ya podemos buscar una estrategia para evitar el uso de variables globales. Para ello, lo ideal es crear un número pequeño de objetos que hagan de contenedores para estas variables o, lo que es lo mismo, recoger todo aquello global que participe de un mismo proceso dentro de un namespace (contexto) propio.

    Creación de un objeto global y asignación de métodos por prefijo
    Es la opción más sencilla pero quizá algo desorganizada. En su favor, tenemos que es segura para refactorizar aquellos códigos que presentan un número considerable de variables globales haciendo difícil su reutilización en otros proyectos.

    Tomemos el siguiente código:

    Quote
    // Opción mala (antipattern)
    var foo = 'Hello';
    var bar = 'World';
    function sum( param1, param2 ){
    return param1 + param2;
    }
    function myMessage(){
    return foo + ' ' + bar;
    }

    console.log( sum( 10, 5 ) ); // 15
    console.log( myMessage() ); // Hello World

    En el ejemplo anterior, definimos dos variables globales y dos funciones dentro del namespace general. Como ya hemos visto, esta forma de programar puede traernos problemas de colisión además de que el código no presenta ninguna cohesión.

    Si quisiéramos reaprovechar parte del script, tendríamos que tener cuidado de no olvidarnos alguna variable o función durante el proceso. Según el método de asignación directa que comentamos, el código anterior quedaría como sigue:

    Quote
    var myApp = {}
    myApp.foo = 'Hello';
    myApp.bar = 'World';
    myApp.sum = function( param1, param2 ){
    return param1 + param2;
    }
    myApp.myMessage = function(){
    return myApp.foo + ' ' + myApp.bar;
    }

    console.log( myApp.sum( 10, 5 ) ); // 15
    console.log( myApp.myMessage() ); // Hello World

    Hemos creado un único objeto global, myApp, que utilizamos como contenedor para el resto de variables y funciones. De este modo, ganamos legibilidad al poder identificar de un solo vistazo, aquellas partes de código que trabajan conjuntamente. A la hora de portar el código, solo tendríamos que preocuparnos de coger aquellas funciones cuyo prefijo coincida con su contexto.

    En el código anterior podríamos utilizar la referencia this en el interior de las funciones para facilitar el mantenimiento en el futuro, pero esto puede dar lugar a errores inesperados. Probemos por ejemplo a asignar uno de los métodos que hemos creado a una nueva función:

    Quote
    var newFunction = myApp.myMessage;
    console.log( newFunction() ); // Hello World

    Las referencias a las variables se conservan y nuestra nueva función accede a ellas siguiendo la ruta original (myApp.foo y myApp.bar).
    Cambiemos ahora la referencia a las variables en el ejemplo original:

    Quote
    // ...
    myApp.myMessage = function(){
    return this.foo + ' ' + this.bar;
    }
    // ...
    console.log( myApp.myMessage); // Hello World

    El código continúa funcionando correctamente pero, si volvemos a asignar el método a una nueva función, el resultado varía:

    Quote
    var newFunction = myApp.myMessage;
    console.log( newFunction() ); // Undefined. this está refiriendo al objeto global.

    Este ejemplo viene a ilustrar una regla que cada vez más gente defiende: nunca debemos referenciar un objeto que estamos utilizando como namespace (contexto) con ‘this‘ ya que podemos obtener errores cuando importamos métodos de un contexto a otro.

    Notación literal
    Utilizando la notación literal, podemos evitar hacer referencia al objeto global cada vez que necesitemos crear un nuevo método. Además, conseguimos un código más limpio y ordenado. Partiendo del ejemplo anterior, el resultado sería:

    Quote
    var myApp = {
    foo : 'Hello',
    bar : 'World',
    sum : function( param1, param2 ){
    return param1 + param2;
    },
    myMessage : function(){
    return this.foo + ' ' + this.bar;
    }
    };

    console.log( myApp.sum( 10, 5 ) ); // 15
    console.log( myApp.myMessage() ); // Hello World

    Esta estrategia sería la más sencilla para la creación de una estructura básica de POO en Javascript. La portabilidad de los objetos resulta sencilla al tener ‘encapsulado’ todo el proceso.

    Módulos
    El patrón que llamamos módulo se configura a partir de una función que actúa como contexto para nuestra aplicación. Por lo general, esta función se autoejecuta devolviendo el objeto que representa la interfaz pública de nuestro módulo.

    Este modelo es más familiar para aquellos que provienen de otros lenguajes de programación orientados a objetos al permitir distinguir entre métodos públicos y privados. Ya que Javascript no implementa el concepto de clases de forma nativa, creamos funciones que actúen como tales.

    Todas las variables y funciones definidas en el interior de nuestra “clase” se consideran métodos privados. Aquellos métodos que queremos hacer públicos los devolvemos mediantes el comando “return” al ámbito general (módulo) de la aplicación.

    Quote
    var myApp = (function(){
    var foo = 'Hello';
    var bar = 'World';
    var sum = function( param1, param2 ){
    return param1 + param2;
    }
    return {
    myMessage: function(){
    return foo + ' ' + bar;
    }
    }
    })();

    console.log( myApp.myMessage() ); // Hello World
    console.log( myApp.sum( 10, 5 ) ); // myApp.sum is not a function. sum es privada

    En el código anterior, myApp.sum no se ha incluido en el objeto return por lo que permanece privada y visible únicamente dentro de su contexto. Sin embargo, myMessage, si que ha sido devuelta y añadida al entorno de myApp, por lo que funciona como se espera. Con este modelo, ya no es necesario referenciar a las variables con this, ya que comparten mismo contexto.

    El aspecto negativo de este patrón es que accedemos de forma diferente a los métodos según sean públicos o privados. Esto supone que si queremos cambiar su visibilidad, tenemos que modificar el código moviendo funciones desde o hacia el método return. Otro inconveniente es que los métodos privados resultarán innacesibles para aquellas funciones que sean añadidas al objeto padre (módulo) con posterioridad a su definición.

    Contexto dinámico
    Si declaramos un entorno y lo pasamos como argumento de una función autoejecutable, evitamos tener que asignar variables y métodos al contexto mediante el comando return. Resulta por lo tanto una solución derivada de la anterior pero más legible e intuitiva.

    Quote
    var myApp = {};
    (function( context ){
    var foo = 'Hello';
    var bar = 'World';
    context.sum = function( param1, param2 ){
    return param1 + param2;
    };
    context.myMessage = function(){
    return foo + ' ' + bar;
    }
    })( myApp );

    console.log( myApp.sum( 10, 5 ) ); // 15
    console.log( myApp.myMessage() ); // Hello World

    Las variables foo y bar, permanecen como privadas, por lo que solo tienen visibilidad dentro de su contexto. Los métodos asignados al objeto contenedor, se convierten en públicos.

    Siguiendo este patrón, incluso podemos asignar el contexto al objeto global tal y como hace, por ejemplo, la librería jQuery. Esto permite al usuario elegir si los métodos de nuestra aplicación se convierten en globales o se restringen a la misma:

    Quote
    (function( context ){
    var foo = 'Hello';
    var bar = 'World';
    context.sum = function( param1, param2 ){
    return param1 + param2;
    };
    context.myMessage = function(){
    return foo + ' ' + bar;
    }
    })( this );

    console.log( sum( 10, 5 ) ); // 15
    console.log( myMessage() ); // Hello World

    Echemos ahora un vistazo al patrón de James Edwards…

    Patrón de James Edwards ‘This namespaces proxy’
    James Edwards ha creado un patrón cuya simpleza esconde una joya en cuanto a arquitectura de código. Utilizando la referencia this para inyectar métodos al contexto, evita que éstos puedan ser reasignados accidentalmente más adelante.

    Quote
    var myApp = {};
    (function(){
    var foo = 'Hello';
    var bar = 'World';
    this.sum = function( param1, param2 ){
    return param1 + param2;
    };
    this.myMessage = function(){
    return foo + ' ' + bar;
    };
    }).apply( myApp );

    console.log( myApp.sum( 10, 5 ) ); // 15
    console.log( myApp.myMessage() ); // Hello World

    Simple y elegante: el uso de los comandos apply y call separan el contexto de los argumentos, lo que mejora aún más el diseño general. Siguiendo este patrón, podemos incluso asignar un mismo módulo a dos contextos direfentes consiguiendo implementaciones paralelas:

    Quote
    var context1 = {}, context2 = {};
    var incrementNumber = function( param1 ){
    var startNumber = param1 || 0;
    this.increment = function(){
    return startNumber++;
    }
    };
    incrementNumber.call( context1 );
    incrementNumber.call( context2, 10 );

    console.log( context1.increment() ); // 0
    console.log( context1.increment() ); // 1
    console.log( context1.increment() ); // 2
    console.log( context2.increment() ); // 10
    console.log( context2.increment() ); // 11
    console.log( context2.increment() ); // 12

    Conclusión final
    En la programación Javascript moderna, evitar la creación de variables y métodos globales resulta básico: si pretendemos integrar librerías de terceros o escribir un código que pueda ser reutilizado, tenemos que estructurarlo correctamente para evitar los errores derivados de las colisiones y ambigüedades.

    Para ello, recurrimos a la creación de objetos que actúen como contenedores de aquellas piezas de código que compartan funcionalidad. A lo largo del artículo hemos visto diferentes aproximaciones al mismo problema analizando tanto sus ventajas como los inconvenientes.

    Corresponde ahora al desarrollador elegir aquel método que mejor se adapte a sus necesidades concretas o crear su propio patrón a partir de los mismos.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 30 | 1:41 PM
    Raphaël: Crea una impactante galería de imágenes con un poco de Javascript

    Raphaël es el nombre de una pequeña librería de archivos JavaScript que simplificará tu trabajo con gráficos de vectores. Utilizando su poder, podremos crear una galería de imágenes bastante moderna. ¡Manos a la obra!

  • Haz clic en este enlace para ver una demostración de la galería >>

    Raphaël actualmente es compatible con Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ y Internet Explorer 6.0+. A la hora de crear tu propía tabla especifica, recorte de imagen o widget que rote, Raphaëlp es el indicado.

    Raphaël usa la VML y además la Recomendación de W3C del SVG como base para crear gráficos. Esto significa que cada objeto gráfico que creas es también un objeto DOM, y puedes añadirle handlers de evento en JavaScript o modificarlos después. El objetivo de Raphaël es proveer un adaptador que haga que el arte de dibujos de vectores sea sencillo y compatible en todos los navegadores.
    En esta ocasión, vamos a utilizar Raphaël y un poco de Query para crear una galería moderna con un efecto de animación muy bien realizado.

    Primero, creamos los tres archivos: index.html, default.css, y init.js[/b[ y luego descargamos la librería [b]Raphaël.

  • Haz clic en este enlace para descargar Raphael >>

    Luego de eso, incluimos los archivos en la sección del head:

    Quote
    <link href="css/default.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/raphael.js" type="text/javascript"></script>
    <script src="js/init.js" type="text/javascript"></script>

    Continuamos luego con un simple código HTML:

    Quote
    <div class="gallery">
        <ul class="reset">
            <li><img src="img/img1.jpg" alt="" /></li>
            <li><img src="img/img2.jpg" alt="" /></li>
            <li><img src="img/img3.jpg" alt="" /></li>
            <li><img src="img/img4.jpg" alt="" /></li>
            <li><img src="img/img5.jpg" alt="" /></li>
            <li><img src="img/img6.jpg" alt="" /></li>
            <li><img src="img/img7.jpg" alt="" /></li>
            <li><img src="img/img8.jpg" alt="" /></li>
        </ul>
    </div>

    Hemos creado la llamada "gallery", la cual es un listado sin ordenar con imágenes. Esas imágenes tendrán un tamaño de 400px de ancho y de alto.

    Quote
    ul.reset,
    ul.reset li {
        display:block;
        list-style:none;
        padding:0;
        margin:0;
    }
     
     
    .gallery ul li {
        width:200px; /* a half of image width */
        height:200px; /* a half of image height */
        margin:0 10px 10px 0;
        float:left;
        position:relative;
    }
     
    .holder {
        position:absolute;
        top:0;
        left:0;
        margin:-100px 0 0 -100px; /* margin-left: a half of 'li' width and margin-top: a half of 'li' height */
    }

    Y finalmente...

    Quote
    $(function(){
         
        var li = $('.gallery').find('li'); // find all 'li' elements
             
        li.each(function(i){
            var t = $(this),
                img = t.find('img'), // find image in 'li' element
                src = img.attr('src'), // get path to your image
                width = li.width(), // get 'li' width
                height = li.height(); // get 'li' height
                 
            img.hide().after($('<div />').attr('id', 'holder'+i).addClass('holder')); // hide all images and create containers for Raphael objects
     
            var r = Raphael('holder'+i, width*2, height*2), // create Raphael objects
                rimg = r.image(src, width/2, height/2, width, height); // create new images using previous variables
             
            rimg.hover(function() {
                this.animate({
                    scale: 2, // enlarge your images to the normal size
                    rotation : 360
                }, 1200, 'elastic');
            }, function() {
                this.animate({
                    scale: 1, // decrease size of images
                    rotation : 0
                }, 1200, 'elastic');
            });
             
        });
         
        li.hover(function(){
            li.css({ 'z-index': 1 }); // set z-index to all 'li' elements
            $(this).css({ 'z-index': 2 }); // set z-index to the hovering element
        });
                 
    });

    Y eso es todo. ¡Hasta la próxima!

  • Haz clic en este enlace para visitar el sitio oficial de Raphael >>

  • Haz clic en este enlace para ver una demostración de la galería >>


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • Foro uCoz » Ayuda a los webmasters » Soluciones personalizadas » JavaScript (información de referencia acerca de la cosa)
    Búscar: