Archive for the ‘Tutoriales’ Category

« Older Entries
Newer Entries »

Tutorial: Como Crear Un Sitemap Para Google

Tuesday, February 2nd, 2010

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 | 1 Comment »

Tutorial: Diseñando lápices de color en Fireworks

Friday, January 29th, 2010

Hace un tiempo recibí una petición acerca de una demostración de las capacidades de Fireworks, hoy decidí responder a esa consulta y les voy a ensenar solo un poco de lo mucho que puede hacer Fireworks.

Hoy diseñaremos lápices de color usando las herramientas de fireworks solamente. Empecemos:

Abrimos un documento Nuevo de 1024 x 768 y creamos un rectángulo de 130 px de ancho por 30 px de alto, también vamos a crear 2 círculos de 30 px de diámetro las dos. Ver imágenes: 1, 2, 3.

Ambos círculos deben ser escalados en un 25% su diámetro sin conservar las proporciones. Ver imágenes: 4.

Debemos procurar que los vértices del diámetro del circulo se sobrepongan exactamente en los vértices del final del lado derecho del rectángulo previamente creado. Una vez que los vértices han calzado correctamente accedemos al menú ‘modify -> combine paths -> union’ Ver imágenes: 5, 6, 7.

Pasamos al otro circulo (lado izquierdo), podemos cambiarle el color para visualizarlo bien y lo copiamos y pegamos en el mismo lugar, accedemos al menú ‘modify -> transform -> numeric transform’ y lo escalamos a un 25% conservando las proporciones, este circulito servirá para asemejar a la barra de color dentro del lápiz. Ver imágenes: 8.

Para crear la parte fina del lápiz, creamos una cuadrado regular y accedemos al menú ‘modify -> transform -> numeric transform’ y modificamos su tamaño horizontal, debe ser de 30 px y sin conservar las proporciones. Cuando ya tenemos las medidas correctas en el rombo, lo rotamos 90 grados y procuramos que los vértices del ancho calcen (como los círculos) con los vértices del cuerpo de nuestro lápiz. La profundidad de este rombo tiene que ser 0 (por debajo de los otros elementos). Ver imágenes: 9, 10.

Podemos cambiar el color del rombo por una que se asemeje mas a la madera. Para crear la punta del lápiz, creamos otro circulo de 30 px de diámetro, copiamos el rombo y acercamos el circulo al final de la copia del rombo que hemos creado, seleccionamos ambos elementos (el duplicado del rombo + el circulo) y de Nuevo accedemos al menú  ‘modify -> combine paths -> punch’ la opción ‘punch’ nos sustrae la parte del elemento que esta abajo y que esta cubierta por la figura de encima. Ya tenemos la punta del lápiz, podemos cambiar su color para identificarla mejor, ademas, recordad eliminar el sobrante de la parte izquierda. Ver imágenes: 11, 12, 13, 14.

Para crear el reflejo de luz en el material de nuestro lápiz vamos a duplicar el cuerpo de nuestro lápiz y a sobreponer sobre este duplicado otra capa (un rectángulo) que cubra la mitad del alto del duplicado, una vez hecho esto accedemos al menú ‘modify -> combine paths -> punch’ y ya tenemos la capa que utilizaremos como el efecto de luz. La transparencia de esta capa es lo que nos dará el efecto deseado. Véase imágenes: 15, 16.

Seleccionamos la capa que vamos a utilizar como la luz y cambiamos su relleno por dos colores, ambos serán blancos, el primer relleno con una transparencia de 3% y el segundo relleno con una transparencia de 25%. Véase imágenes: 17, 18, 19.

Resultado final. Ahora podes cambiar el color de tu lápiz!

Tags: , , , , ,
Posted in Tutoriales | No 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 los últimos comentarios en WordPress

Monday, January 25th, 2010

El flujo interno de links es muy importante, esto mejora la navegación y ayuda a los usuarios para no perderse, a continuación te dejo una excelente manera para mostrar los últimos comentarios hechos por los usuarios en tus entradas (posts).

Es muy simple, solo debes incluir descargar el plugin y agregar el siguiente código donde quieras que los comentarios aparezcan:

<?php if (function_exists(‘get_recent_comments’)) { ?>
<?php get_recent_comments(); ?>
<?php } ?>

Si tu theme no soporta widgets, deberás reemplazar el código anterior por este:
<?php if (function_exists(‘get_recent_comments’)) { ?>    <li><h2><?php _e(‘Recent Comments:’); ?></h2>         <ul>         <?php get_recent_comments(); ?>         </ul>    </li>    <?php } ?>        <?php if (function_exists(‘get_recent_trackbacks’)) { ?>    <li><h2><?php _e(‘Recent Trackbacks:’); ?></h2>         <ul>         <?php get_recent_trackbacks(); ?>         </ul>    </li>    <?php } ?>

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

Permitir a los usuarios agregar noticias en wordpress

Sunday, January 24th, 2010

Muy seguramente si ya estas en el mundo del SEO y Diseño Web; te habrás dado cuenta de lo mucho que la comunidad te brinda, tienes a tu disposición cientos de consejos, forums, blogs con información y excelentes tutoriales de ‘Cómo se hace’, y supongo que también habrás pensado en agradecer todas estas ventajas y -regalos-, pues no hay mejor manera que poniendo a las disposición de la -Comunidad- tu sitio Web para que ellos agreguen algunas noticias y porque no, nutran sus sitios Web con tu pagerank (no es tan malo dar!).

Hay muchas maneras de logar esto, una de ellas es la siguiente:

  1. Deberás instalar FV Community News
  2. Cuando lo hayas instalado en WordPress; deberás activarlo (WP-admin > Plugins > FV Community News)
  3. Una vez instalado deberás cambiar las opciones y dejarlo listo para lo que lo desees, deberas ir a WP-admin > Plugins > FV Community News, haz click en ‘settings’
  4. Deberás agregar el siguiente código donde desees que aparezca el formulario de noticias y las noticias:
    <?php if (function_exists(‘fvCommunityNewsGetSubmissions’))
    echo fvCommunityNewsGetSubmissions(5, ‘<li><a href=”%submission_url%” title=”%submission_title%”><b>%submission_author%: %submission_title%</b>%submission_description%<i>%submission_date%</i></a></li>’) ?><?php if (function_exists(‘fvCommunityNewsForm’)) fvCommunityNewsForm(); ?>

Lo que hacemos con este código es llamar 2 funciones, fvCommunityNewsGetSubmissions() nos va a mostrar las entradas, y fvCommunityNewsForm() nos mostrara el formulario que verán los visitantes.

La otra sección de código que es muy importante es echo fvCommunityNewsGetSubmissions(5, ‘<li><a href=”%submission_url%” title=”%submission_title%”><b>%submission_author%: %submission_title%</b>%submission_description%<i>%submission_date%</i></a></li>’); ya que dentro de los paréntesis le indicamos a la función mediante unos simples parámetros, cual será la estructura en la que deseamos que aparezcan las noticias, esta sección del código es editable, solamente que deberás introducir el nombre del dato que quieras mostrar (nombre, fecha, titulo, URL, etc) entre %Aquí va el dato%.

Este código nos va a mostrar una estructura básica que tu puedes modificar desde el menú ‘settings’ del plugin (ver imagen abajo).


También nos da la opción para habilitar la subida de imágenes por parte del usuario, todo esto lo puedes activar o desactivar desde las opciones de modificación del plugin, como ves en la imagen.

Y vale agradecer a Frank Verhoeven por este excelente aporte a la comunidad :)

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

« Older Entries
Newer Entries »