Archive for the ‘Programacion’ Category

Tutorial: Efecto de scroll suavizado con jQuery

Wednesday, February 3rd, 2010
  • Delicious

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 Crear Un Sitemap Para Google

Tuesday, February 2nd, 2010
  • Delicious

Okay, de vuelta a mi blog, hacia ya varios días no publicaba una entrada sin embargo ya estoy de vuelta con mas cosas interesantes para enseñaros. Hoy vengo con este tutorial acerca de cómo crear un mapa de sitio para Google, espero les sea de ayuda.

Los mapas de sitio (sitemaps) son muy importantes para guiar a los bots (robots), las arañas de Internet e indicarles por cuantas y cuales paginas esta compuesto tu sitio. En este documento que vamos a crear se deben o pueden incluir mediante algunos parámetros los siguientes atributos:

Los atributos:

<urlset>: Es requerido. Encapsula el conjunto de direcciones Web de después incluiremos dentro de el. Es requerido.

<url>: Es requerido. Esta etiqueta encierra un conjunto de otros atributos que veremos luego. Es requerido.

<loc>: Es requerido. Nos indica la dirección URL de la pagina Web.

<lastmod>: Esta etiqueta es opcional. Este se refiere a la fecha de la ultima modificación del archivo en si. El formato de la fecha debe ser incluido de la siguiente manera: AA/MM/DD; donde AA = Año, MM = Mes y DD = Dia.

<changefreq>: Es opcional.  Esta etiqueta se refiere a cuan frecuentes son los cambios en el archivo (la pagina Web), tiene varios valores, entre ellos: always, hourly, daily, weekly, monthly, yearly, never.

<priority>: Es opcional.  Es la prioridad que la pagina Web tiene con respecto a el sitio completo; el valor por defecto es 0.5 (medio) y llega hasta 1.0.

En el XML:

Por si no lo sabían, si; es recomendable utilizar XML como el lenguaje base para nuestro sitemap, ahora bien; si no están acostumbrados a utilizar XML, pueden realizar su sitemap en un simple documento de texto, puedes ver mas abajo para ejemplos de cómo hacerlo. Si lo que estas buscando es como crear un mapa de sitio índice para controlar varios mapas de sitio deberás bajar un poco mas.

Este seria un ejemplo que puedes pegar y copiar y modificar para crear tu mapa de sitio:

<?xml version=”1.0″ encoding=”UTF-8″?>

<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″>

<url>
<loc>http://www.example.com/</loc>
<lastmod>2005-01-01</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>

<url>
<loc>http://www.example.com/catalog?item=12&amp;desc=vacation_hawaii</loc>
<changefreq>weekly</changefreq>
</url>

<url>
<loc>http://www.example.com/catalog?item=73&amp;desc=vacation_new_zealand</loc>
<lastmod>2004-12-23</lastmod>
<changefreq>weekly</changefreq>
</url>

<url>
<loc>http://www.example.com/catalog?item=74&amp;desc=vacation_newfoundland</loc>
<lastmod>2004-12-23T18:00:15+00:00</lastmod>
<priority>0.3</priority>
</url>

<url>
<loc>http://www.example.com/catalog?item=83&amp;desc=vacation_usa</loc> <lastmod>2004-11-23</lastmod>
</url>

</urlset>

Como crear un mapa de sitio índice para controlar varios mapas de sitio:

Para crear un mapa de sitio que contenga a otros mapas de sitio dentro de el existen dos etiquetas nuevas que deberás usar:

<sitemapindex>: Esta etiqueta nos indica que este archivo XML es un mapa de sitio raiz que nos cargara otros ‘sub-mapas’ de sitio.

<sitemap>: Esta etiqueta encapsula todos los parámetros para ese mapa de sitio que vamos a cargar específicamente.

Este seria un ejemplo de un mapa de sitio raiz:

<?xml version=”1.0″ encoding=”UTF-8″?>

<sitemapindex xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″>

<sitemap>
<loc>http://www.example.com/sitemap1.xml.gz</loc>
<lastmod>2004-10-01T18:23:17+00:00</lastmod>
</sitemap>

<sitemap>
<loc>http://www.example.com/sitemap2.xml.gz</loc>
<lastmod>2005-01-01</lastmod>
</sitemap>

</sitemapindex>

Crear un sitemap en un archivo de texto:

Como puedes ver no hay tantas complicaciones si a la hora de crear mapas de sitio se trata, si no sabes utilizar XML puedes usar un simple documento de texto (.txt, preferiblemente). Lo que debes hacer es colocar cada URL en una línea del documento, por lo que si tu sitemap contiene 25 URL distintas, el documento de texto deberá estar conformado por 25 líneas de texto y en cada una de estas un URL.

Este seria un ejemplo:

http://www.example.com/page1.html

http://www.example.com/page1.html

como ves es muy sencillo.

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