Posts Tagged ‘Javascript’

Tutorial: Efecto de scroll suavizado con jQuery

Wednesday, February 3rd, 2010

Cuando navegamos en paginas Web con mucho contenido y por ende muy ‘largas’ a veces debemos utilizar anclas, una ancla no es mas que la etiqueta <a> de HTML, ahora bien, esta etiqueta nos sirve para crear un link pero no solamente externos si no también dentro de la misma pagina, en este tutorial aprenderemos que debemos realizar para obtener un scroll suavizado dentro de nuestra pagina Web.

¿Cómo puedo lograr el Scroll suavizado en mi pagina?:

Como les decía arriba, la etiqueta <a> además  de crear links hacia otras paginas nos sirve para crear enlaces en la misma pagina donde esta localizada, por ejemplo, en paginas muy largas; al final de la pagina podemos colocar un enlace para ir a la parte de arriba. Todo esto lo podemos lograr con jQuery

Comencemos con el código:

Paso #1:

Deberás asegurarte de que ya estas llamando al archivo jQuery en tu pagina Web. Si no posees el archivo jQuery; lo puedes descargar desde aquí, o bien puedes copiar y pegar el código de abajo:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”></script>

Paso #2:

Lo siguiente que vamos a hacer es crear un archivo de JavaScript y vas a pegar la siguiente función (creada por Krato):

jQuery(document).ready(function(){
jQuery(‘a[href*=#]‘).click(function() {
var name = jQuery(this).attr(‘href’);
var no = new Array (‘#otro’, ‘#otro’);
var total = no.length;
var velocidad = 2000;
for (i=0;i<=total;i++) {
if(no[i] == name){
return false;
}
}

if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) { var target = jQuery(this.hash); target = target.length && target || jQuery(‘[name=' + this.hash.slice(1) +']‘);

if (target.length) { var targetOffset = target.offset().top; jQuery(‘html,body’) .animate({scrollTop: targetOffset}, velocidad); return false; }} }); });

Deberas guardar el archivo en el directorio donde tengas todos los archivos JavaScript (recomendado) y una vez guardado deberas llamarlo en tu HTML. Puedes copiar y modificar el siguiente codigo:

Esta función es mejor tenerla en un archivo externo para no ensuciar mucho nuestro código HTML.

Paso# 3:

Una vez estamos listos con nuestro código JavaScript podemos pasar a nuestro HTML, para ello vamos a necesitar algún texto falso para hacer que nuestra pagina crezca verticalmente. Puedes generar algún texto falso en este sitio. Una vez que tengas el texto falso deberás agregar:

<a name=”arriba”></a><a href=”#abajo”>Ir Abajo</a>

<p>El texto falso va aquí!</p>

<a name=”abajo”></a><a href=”#arriba”>Ir Arriba</a>

Ejemplo (descargar):

Ir Abajo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ir Arriba

Tags: , , ,
Posted in Programacion, Tutoriales | 2 Comments »

Tutorial: Como animar objetos con jQuery

Thursday, January 28th, 2010

¿Que es jQuery?

jQuery es un framework que nos permite realizar animaciones complejas con muy poco código y gran facilidad para principiantes, efectos como fadeIn, fadeout, slideUp, slideDown que antes nos llevaba tanto tiempo en lograr (realizando cálculos) ahora es mucho mas sencillo gracias a una serie de funciones jQuery predefinidas. jQuery utiliza JavaScript pero se puede combinar con PHP y muchos otros lenguajes.

¿Que se puede lograr  con jQuery?

Básicamente todo, desde una animación de desvanecimiento hasta varias animaciones en cadena con la función callback(). Es ideal para galerías de imágenes, descargar datos con AJAX y mostrar u ocultar divs dinámicamente y de una manera muy elegante.

jQuery trabaja a manera de plugins los cuales son archivos mas pequeños que desempeñan una tarea especifica y le agregan a jQuery otras funcionalidades, por ejemplo, hay un plugin para realizar animaciones cíclicas, hay otros varios plugins para realizar animaciones como shuffle y hasta efectos de desenfoque y muchos otros.

¿Quienes pueden utilizar jQuery?

Cualquier persona con conocimientos básicos de JavaScrip u otro lenguaje (ActionScript, PHP) lo importante es tener la noción básica de que es una variable y que papel desempeña una función. Pero para alguien mas avanzado también se pueden aplicar ciclos, condicionales u otros.

Como utilizar jQuery:

A continuación te mostrare como realizar algunas animaciones simples, tales como desvanecimiento, movimiento de un div y veremos las propiedades básicas con las que podemos jugar usando jQuery.

Básicamente para utilizar jQuery en tu sitio Web solo necesitas  3 cosas:

  1. Los archivos javascript de jQuery que puedes descargar aquí, también debes descargar los plugins si los vas a utilizar
  2. Conocimientos básicos de programación
  3. Opcional: Algunos archivos como imágenes podrían servir

Empecemos:

  1. Crea un nuevo directorio llamado ‘practica_js’ dentro de esta carpeta deberas crear otras varias:
    1. Crea una carpeta llamada ‘js’ donde albergaremos los archivos JavaScript de jQuery
    2. Crea una carpeta llamada ‘imagenes’ en la cual colocaremos todas las imágenes que vayamos a utilizar
    3. Descarga el archivo desde jQuery aquí
    4. Coloca el archivo jQuery en la carpeta ‘js’ previamente creada y cambia el nombre del archivo por jquery.js
    5. Crea una archivo HTML dentro de la carpeta practica_js, a este archivo lo nombraras index.html.

El código JavaScript:

  1. Para empezar a utilizar jQuery es necesario que entiendas que es una función y una variable
  2. El código que llamara las funciones de jQuery siempre (aunque también lo puedes escribir en el body de la pagina) es recomendable colocarlo entre los etiquetas <head></head>, por muchas razones tales como el proceso de carga de la pagina, o por simple orden y claridad en el código.
  3. Primero: llamamos al archivo jQuery escribiendo el siguiente código entre los etiquetas <head></head>:
    1. <script src=”js/jquery.js”></script>
    2. Segundo: Agregamos otro script justo debajo del primero:
      1. <script language=”javascript”>
        $(document).ready(function (){
        $(“#ocultar”).click(function(event){
        event.preventDefault();
        $(“#capaefectos”).fadeTo(“slow”, 0);
        $(“#mostrar”).fadeTo(“slow”, 100);
        $(“#ocultar”).fadeTo(“slow”, 25);
        });

        $(“#mostrar”).click(function(event){
        event.preventDefault();
        $(“#capaefectos”).fadeTo(“slow”, 100);
        $(“#mostrar”).fadeTo(“slow”, 25);
        $(“#ocultar”).fadeTo(“slow”, 100);
        });
        });
        </script>

      2. Este ultimo script contiene las funciones y las variables necesarias para que nuestro código funcione.

El código HTML:

  1. Coloca y pega el siguiente codigo entre las etiquetas <body></body>:
    1. <div style=”background-color: #CCCCCC; color:fff; padding:10px; width:560px; padding-top:50px; padding-bottom:50px; font-size:24px; text-align:center;”>
      Esta es una capa que nos servirá para hacer efectos!
      </div><p>
      <a href=”#”>Ocultar la capa</a> |
      <a href=”#”>Mostrar la capa</a>
      </p>
    2. Una vez que hayas pegado este codigo puedes visualizar la pagina en tu navegador. Deberia ocurrir una animación de desvanecimiento cuando haces click en ‘Ocultar capa’ y un efecto de aparicion cuando haces click en ‘Mostrar capa’.

Ejemplo:

Esta es una capa que nos servirá para hacer efectos!

Ocultar la capa | Mostrar la capa

Explicación del código:

jQuery es una librería de JavaScript, en otras palabras es una conjunto de funciones, cálculos, variables y condicionales que fueron creados para proporcionar una mayor facilidad a la hora de crear una animación. Por así decirlo, jQuery es un paquete de paquetes mas pequeños y en cada paquete de jQuery contiene hay un bonito efecto.

Ahora bien, en el código JavaScript que utilizamos para el ejemplo nos estamos refiriendo a los objetos que vamos a animar en el HTML mediante su identificador correspondiente:

$(“#capaefectos”) es lo mismo que pero en el lenguaje JavaScript. Lo mismo sucede con los demás ID que hay en el script.

La el tipo de animación que queremos que suceda es seleccionada por su nombre, jQuery posee varias animaciones básicas (véase documentación de efectos de jQuery) tales como:

Efectos básicos: Show(), hide(), toggle().

Efectos de desplazamiento: slideDown(), slideUp(), slideToggle.

Efectos de opacidad:  fadeIn(), fadeOut(), fadeTo().

Efectos personalizados: animate(), stop().

Cada uno de estos efectos contiene parámetros, tales como la opacidad (para los efectos de opacidad), la posición, la velocidad de la animación, entre otros.

Así funciona el mundo jQuery. Es muy sencillo, pero si necesitas ayuda no dudes en contactarme dejando un mensaje al final de esta entrada.



Tags: , , ,
Posted in Tutoriales | 2 Comments »

Como mostrar tus RSS en tu sitio Web o Blog con Javascript

Sunday, August 30th, 2009

Es bueno mantener a nuestro visitante expuesto continuamente a nuestras noticias (Feeds RSS) ya que de esa manera existen mas posibilidades de que se suscriba y lograr mantener una relación mas estrecha ya que recibirá las actualizaciones directamente en correo electrónico o navegador una vez que lo abra.

rss2js es un sitio que genera un JavaScript para que puedas mostrar tus ultimas noticias en cualquier lugar en tu sitio Web o Blog, solo debes pegar este código donde desees mostrarlas, además, el sitio generador de este código te brinda varias opciones para que el script quede a la medida de tus necesidades, tales como cuantos ítemes deseas mostrar, que cantidad de texto quieres para la descripción y si la deseas visible o no; lo mejor de todo, es totalmente gratis.

Tags: , , , ,
Posted in Tecnologia | 3 Comments »