Como Lo Hago » XML http://www.comolohago.cl Si se puede, te lo enseñamos Tue, 10 Jan 2012 16:56:56 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Cómo hacer un gadget en Windows 7 http://www.comolohago.cl/2010/08/09/como-hacer-un-gadget-en-windows-7-2/ http://www.comolohago.cl/2010/08/09/como-hacer-un-gadget-en-windows-7-2/#comments Tue, 10 Aug 2010 02:22:32 +0000 Cri http://www.comolohago.cl/?p=3803

Hola amigos de Cómo Lo Hago, tratando de sorprenderlos día a día nos empeñamos en poder crear nuevos tutoriales y ayudarlos en adquirir un mayor conocimiento como también desenvolverse dentro de un nuevo tipo de desarrollo. Esta vez será la ocasión de crear un Gadget el cual nos puede servir para una infinidad de cosas dependiendo del uso que le queramos dar, en este caso veremos como hacer uno con alimentacion RSS de los tutoriales que se hacen en CómoLoHago. Partiendo por una cosa, es muy importante recalcar que no hay que ser programador para poder realizar este tuto, pero sí tener harta paciencia para darle al clavo. Los invito a seguir en este entretenido tuto como siempre despues del salto…

Cómo hacer un gadget en Windows 7

1.  ¿Qué necesitamos?

  • Sistema operativo Windows 7
  • Aprender un poco de HTML + CSS. Para esto puede recurrir a los siguientes tutoriales
  1. Aprender HTML
  2. Aprende CSS

2.  ¿Cómo lo hago?

1. Manos a la obra, primero a buscar donde tenemos nuestros Gadgets los cuales se encontrarán siempre por default en Archivos de programa>Windows Sidebar>Gadgets. Una vez ubicados en esta carpeta procederemos a crear la carpta contenedora de nuestro futuro Gadget por desarrollar. Es muy importante que la extensión del nombre sea así:

NOMBREDEMIGADGET.Gadget

2. Una vez creada nuestra carpeta contenedora necesitaremos algunos archivos indispensables para poder personalisar y a la vez desarrollar:

  • MiGadget.html: Contiene el código principal para los ajustes de color, fondo, letras, links, feeders, etc.
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>ComoLoHago mi primer gadget</title>
<!– Para llamar a nuestros Settings.js del gadget –>
<script type=”text/javascript” src=”MiGadget.js”></script>
<style type=”text/css”>
/*/ El cuerpo de nuestro Gadget /*/
body
{
width: 330px;
height: 450px;
font-family: verdana;
font-weight: lighter;
margin:0px;
font-size: 10px;
overflow-x:hidden;
overflow-y:auto;
background-color:#333333;
scrollbar-face-color:#444444; /*/ Color del cuadro /*/
scrollbar-arrow-color:#999999; /*/ Color de la flecha de nuestro scroll /*/
scrollbar-track-color:#333333;  /*/ Color de la vía donde se mueve el scroll /*/
scrollbar-highlight-color:#444444; /*/ Si queremos color desde un ángulo /*/
scrollbar-darkshadow-color:#444444; /*/Color opuesto al lugar al Highlight-Color /*/
scrollbar-shadow-color:#444444; /*/ Si queremos sombra /*/
scrollbar-3dlight-color:#444444;  /*/ Si queremos color de luz 3d /*/
}
#ContenidoDeMiGadget
/*/Aqui se encuentra parte del contenido que se alimentará dentro de nuestro gadget/*/
{
width: 318px;
margin-left:1px;
height:100px;
vertical-align: middle;
text-align:center;
background-color:#333333;
}
/*/ Este es el codigo especial para poder editar todo dentro del contenido rss /*/
/*/ ya sea colores de letras, colores de fondo, bordes, etc/*/
/*/1-Con esto le indicamos al contenido el ancho que ocupará/*/
.rssxpresschannel { width:318px; font-family: Verdana; }
.rssxpresstable {height:200px; width:318px;}
/*/2-Con esto le indicamos al subtitulo “Sí se puede, te lo enseñamos” lo que queremos/*/
.rssxpresschdesc {font-size:10px; background-color:#333333; color:99BBFF; font-style:italic;}
/*/3-Con esto le indicamos al título “Como Lo Hago” lo que queremos/*/
.rssxpresschtitle {font-size:12px; font-family:Arial; color:#99BBFF; background-color:#333333; background-position:right; background-image:url(logo.png); background-repeat:no-repeat; height:69px; width:88px;margin-top:10px;}
/*/4-Con esto le indicamos al título de cada tema lo que queremos/*/
.rssxpressittitle {font-size:10px; margin-right:5px; background-color:#333333; border-top-style:inset; border-top-color:#999999; border-width:thin; }
/*/5-Con esto le indicamos a la descripcion de cada contenido lo que queremos/*/
.rssxpressitdesc {font-size:10px; background-color:#333333; color:#FFFFFF; margin-top:5px; margin-bottom:5px; font-weight:lighter; }
A:link {text-decoration:none;color:#99BBFF;}
A:visited {text-decoration:none;color:#99BBFF;}
A:active {text-decoration:none;color:#99BBFF;}
A:hover {text-decoration:none;color:#00BBFF;}
</style>
</head>
<b style=”margin-left:210px” style=”color:#555555″>ComoLoHago v1.0</b>
<body>
<!–Contenido de mi gadget–>
<div id=”ContenidoDeMiGadget”>
<!–Script alimentador del contenido Rss–>
<script src=”http://rssxpress.ukoln.ac.uk/lite/viewer/?rss=http%3A%2F%2Fwww.comolohago.cl%2Ffeed”></script>
</div>
</body>
</html>
  • Settings.html: Contiene el código para los ajustes de nuestro Gadget.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<style type=”text/css”>

body
{

/*/ ancho y alto de nuestro menu de ajustes /*/
width:300px;
height:250px;
}

/*/un poco de CSS /*/
#L_settingsTitle
{
font-family:Arial;
font-size:15px;
color:#FF0000;
}

#L_settingsTitleLabel
{
font-family:Arial;
font-size:8px;
font-style:italic;
color:#000000;
}

</style>

<script type=”text/javascript” src=”MiGadget.js”> </script>

</head>

<body>
<p>Aqui agregan su contenido</p>
</body>
</html>

  • MiGadget.js: Contiene el código especial para poder tener ajustes en nuestro Gadget.
// Importantisimo para poder tener los ajustes de nuestro Gadget
System.Gadget.settingsUI = “Settings.html”;
System.Gadget.onSettingsClosing = SettingsClosing;

  • Gadget.xml: Contiene el autor, nombre, descripción, ícono, logo. En sí es lo necesario para aparecer en el menú para seleccionar el Gadget.
<?xml version=”1.0″ encoding=”utf-8″ ?>
<gadget>
<name>CómoLoHago – Novedades</name>
<version>1.0</version>
<author name=”CómoLoHago Team”>
<info url=”www.ComoLoHago.cl” />
</author>
<copyright>&#169; CómoLoHago 2010</copyright>
<description>Novedades acerca de tutoriales nuevos en tu escritorio</description>
<icons>
<icon height=”48″ width=”48″ src=”icono.png”/>
</icons>
<hosts>
<host name=”sidebar”>
<autoscaleDPI>true</autoscaleDPI>
<base type=”HTML” apiVersion=”1.0.0″ src=”MiGadget.html” />
<permissions>Full</permissions>
<platform minPlatformVersion=”1.0″ />
<defaultImage src=”imagenarrastrada.png”/>
</host>
</hosts>
</gadget>

2. La flecha blanca indica el ícono que aparecerá en el menú de Gadgets. Este ícono (icono.png) se direcciona desde nuestro archivo XML, en este caso Gadget.xml. También podemos agregar otra imagen para cuando arrastremos nuestro Gadget al escritorio (imagenarrastrada.png).

3. Finalmente nos podemos dar cuenta que nuestro Gadget va adquiriendo la forma que le damos con CSS y HTML ademas de las programaciones que cada uno le dé en javascript.

Para poder mostrar el contenido RSS, tuve que recurrir a la página http://rssxpress.ukoln.ac.uk/lite/include/?t=1 para obtener el script feeder el cual va inserto en MiGadget.html:

Espero les haya gustado, les motive para hacer sus propias creaciones y así poder compartirlas con los demas. Me despido

Como siempre exclusivamente ha sido:

Staff CLH

]]> http://www.comolohago.cl/2010/08/09/como-hacer-un-gadget-en-windows-7-2/feed/ 14 Cómo crear un feed RSS desde cero http://www.comolohago.cl/2010/01/06/como-crear-un-feed-rss-desde-cero/ http://www.comolohago.cl/2010/01/06/como-crear-un-feed-rss-desde-cero/#comments Wed, 06 Jan 2010 22:21:34 +0000 Xabadu http://www.comolohago.cl/?p=2849

En varios artículos anteriores hemos discutido y detallado la importancia que tienen los feeds para nuestros sitios Web, permitiéndonos entregarles nuevas formas a los usuarios para que se enteren de las actualizaciones de contenido.

Y a pesar de que hoy la mayoría de los sistemas que implementamos (como Wordpress) ya vienen con un feed creado e implementado, listo para validar, siempre es posible crear uno de cero, o bien querer personalizar más a fondo lo que ya existe.

Hoy, en CLH, mediante un sencillo tutorial les enseñaremos a crear un feed RSS desde cero, ya sea con contenido estático o dinámico.

El detalle, como siempre, después del salto.

Cómo crear un feed RSS

Como siempre, lo primero:

Implementos necesarios:

  1. Un sitio Web con contenido, ya sea estático o dinámico.
  2. Un editor Web. Si bien no es necesario y podemos codificar mediante bloc de notas, si es recomendable. En CLH utilizamos Adobe Dreamweaver, el cual pueden obtenerlo desde el siguiente enlace.

Procedimiento:

Para crear un feed RSS, es necesario codificar un archivo en formato XML, el cual contiene las etiquetas necesarias para interpretar y desplegar el contenido en el formato especificado, al cual accederán los usuarios. Este archivo podemos dejarlo nativo en XML, o bien incrustarlo dentro de PHP, como veremos en ámbos casos a continuación.

Para esto realizaremos 2 procesos. En primera instancia crearemos un feed estático, a partir de contenidos que tengamos disponibles en nuestro sitio. Para este caso tomaremos las páginas de información estáticas que están incluídas en CLH (quiénes somos, licencia clh, etc.).

Posterior a eso repetiremos la tarea, pero esta vez recuperaremos contenidos desde una base de datos para meterlos al feed, ideal si están publicando a través de un CMS o si obtienen contenidos directamente desde una base de datos.

Así que sin más, vamos, manos a la obra:

1.- Creando un feed RSS estático

Esta opción es válida solamente si tenemos contenido estático en nuestro sitio, lo cual si bien no se justifica mucho, puede ser una funcionalidad útil para entregarle a los visitantes.

Para esto, es necesario que creemos un archivo XML en nuestro editor Web, y comenzamos a codificar:

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
...
</rss>

Las primeras 2 líneas que hemos añadido corresponden a la definición de la versión y codificación de xml (con el fin de que valide correctamente debemos añadir la versión, en cuanto a la codificación es opcional pero nunca está demás) y la versión de RSS que utilizará el archivo que estamos creando. Actualmente la mayoría de los sitios ofrecen suscripciones tanto para RSS 1.1 como 2.0, pero con el último es más que suficiente. Al final cerramos la etiqueta rss para dar por finalizado el documento.

A continuación de lo anterior, es necesario que todo lo relativo al feed (tanto la información como el contenido), sea incluído dentro de las etiquetas <channel></channel>, lo cual lo agregaremos justo seguido del código anterior, es decir:

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
...
</channel>
</rss>

Y ahora, dentro de las etiquetas channel iremos añadiendo la información del feed, tal como se ve a continuación:

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
<channel>
    <title>Feed de páginas estáticas de CLH</title>
    <link>http://www.comolohago.cl</link>
    <description>Si se puede, te lo enseñamos</description>
    ...
</channel>
</rss>

Y finalmente, a continuación de la información, agregamos lo relativo al contenido que desplegaremos en el feed, esto lo haremos repitiendo las mismas etiquetas que usamos anteriormente, pero encerradas entre <item> e </item>:

<?xml version="1.0" encoding="utf-8" ?>
<rss version="2.0">
<channel>
    <title>Feed de páginas estáticas de CLH</title>
    <link>http://www.comolohago.cl</link>
    <description>Si se puede, te lo enseñamos</description>
    <item>
        <title>Quiénes Somos</title>
        <link>http://www.comolohago.cl/acerca/</link>
        <description>Conoce al equipo de CLH</description>
    </item>
    <item>
        <title>Licencia CLH</title>
        <link>http://www.comolohago.cl/licencia-clh/</link>
        <description>Lo que permitmos, y lo que no</description>
    </item>
    <item>
        <title>Colabora</title>
        <link>http://www.comolohago.cl/colabora/</link>
        <description>Ayúdanos a enseñar</description>
    </item>
    <item>
        <title>Peticiones</title>
        <link>http://www.comolohago.cl/peticiones/</link>
        <description>¿Algo que quieras ver?</description>
    </item>
</channel>
</rss>

Lo anterior lo guardamos con cualquier nombre y con extensión xml, lo subimos y al abrirlo en el navegador podremos ver que nuestro feed estático está completamente listo:

Feed estático visualizado mediante Firefox

2.- Creando un feed RSS dinámico

Ya. Creamos nuestro feed estático, nos demoramos solo unos minutos, nos dimos cuenta que era sencillísimo y estamos listos para conquistar el mundo… ¿no?. Pues bueno, aún no. Tal como indicábamos en el punto anterior, un feed estático no tiene mucha gracia, ya que debemos añadir cada nuevo contenido de forma manual y termina siendo mucho trabajo, o puede que en más de alguna ocasión se nos olvide actualizar. Debido a esto, si tenemos un sitio donde el contenido se obtiene de forma dinámica desde una base de datos, es posible adaptar eso a nuestro feed y que la nueva información se vaya agregando a medida que se genera. Para esto, trabajaremos tanto con XML como PHP, en una combinación rimbombante y circumbirúmbica que sacará chispas y nos convertirá en los chicos más populares de la secundaria.

Para esto, consideraremos que tenemos una base de datos, la cual tiene una tabla de noticias con un campo título, un campo enlace, un campo detalle y un campo de fecha de las noticias, tal como vemos a continuación:

tituloenlacedetallefecha
Dexter va a la lunahttp://www.ejemplo.com/1.phpDexter se fue a la luna ayer y aun no vuelve2010/01/01
Topher es Batmanhttp://www.ejemplo.com/2.phpCiudad Gotica tuvo una sorpresa ayer cuando...2010/01/02
Jorge Nitales compra Googlehttp://www.ejemplo.com/3.phpLuego de interminables negociaciones se supo que...2010/01/03
Goten saca un disco de rancherashttp://www.ejemplo.com/4.phpSu sexto disco de estudio fue lanzado...2010/01/04
Locke3K sigue subiendo en las encuestashttp://www.ejemplo.com/5.phpDe acuerdo al estudio realizado...2010/01/05

Entonces, lo primero que debemos hacer es crear un archivo PHP en nuestro editor Web, el que tendrá una estructura como la que sigue:

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
    <title>Noticias de mi fantabulenial sitio Web</title>
    <link>http://www.ejemplo.com</link>
    <description>Las mejores noticias de Internet</description>

<?php
   ...
?>

</channel>
</rss>

Como podrán ver, en el código anterior dejamos una sección en blanco, entre las etiquetas <?php y ?>. Esta parte del código es donde nos conectaremos a la base de datos, rescataremos las noticias y las desplegaremos dinámicamente.

Para esto, primero haremos la conexión a la base de datos. Como buena práctica utilizaremos DEFINE para, valga la redundancia, definir los datos de conexión, pero si quieren pueden saltarse esta parte y ejecutar la función directamente:

DEFINE ('USUARIO_BD', 'el nombre de usuario de la bd');
DEFINE ('CLAVE_BD', 'la clave de acceso a la bd');
DEFINE ('HOST_BD', 'el servidor de la bd');
DEFINE ('NOMBRE_BD', 'el nombre de la base de datos');

Y ahora hacemos la conexión:

$conexion = mysql_connect(HOST_BD, USUARIO_BD, CLAVE_BD) or
die ('No se pudo conectar a la BD');
mysql_select_db(NOMBRE_BD) or die ('No se pudo seleccionar
la BD');

Ejecutamos la consulta:

$consulta = "SELECT * FROM noticias ORDER BY fecha DESC";
$resultado = mysql_query($consulta) or die ('Error al
ejecutar la consulta');

Ahora que hemos recobrado todas las noticias desde la base de datos de forma ordenada por la fecha, obteniendo primero las más nuevas, las pasaremos a un array para escribirlas en el formato especificado de XML, de la siguiente forma:

while ($fila = mysql_fetch_array($resultado, MYSQL_ASSOC){
    echo '<item>
                 <title>'.$fila['titulo'].'</title>
                 <link>'.$fila['enlace'].'</link>
                 <description>'.$fila['detalle'].'</description>
          </item>';
}

Con lo anterior, ejecutamos un ciclo que pasará a un array de forma asociativa (gracias al parámetro MYSQL_ASSOC, el cual nos permitirá acceder a los registros en el array con el mismo nombre que tienen en la tabla de la base de datos) cada noticia hasta que se acaben y creará un nuevo ítem con los respectivos valores para incluir en el feed.

Con eso estamos casi listos, el último detalle es añadir un pequeño encabezado al comienzo del documento, indicando que estamos ejecutando contenido XML para un mejor reconocimiento al momento de ejecutar el script completo, esto lo hacemos añadiendo al comienzo:

<?php
      header("Content-Type: application/rss+xml; charset="utf-8");
?>

Con esto, nuestro código completo queda de la siguiente forma:

<?php
      header("Content-Type: application/rss+xml; charset=utf-8");
?>

<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
    <title>Noticias de mi fantabulenial sitio Web</title>
    <link>http://www.ejemplo.com</link>
    <description>Las mejores noticias de Internet</description>

<?php

    DEFINE ('USUARIO_BD', 'el nombre de usuario de la bd');
    DEFINE ('CLAVE_BD', 'la clave de acceso a la bd');
    DEFINE ('HOST_BD', 'el servidor de la bd');
    DEFINE ('NOMBRE_BD', 'el nombre de la base de datos');

    $conexion = mysql_connect(HOST_BD, USUARIO_BD, CLAVE_BD) or
    die ('No se pudo conectar a la BD');
    mysql_select_db(NOMBRE_BD) or die ('No se pudo seleccionar
    la BD');

    $consulta = "SELECT * FROM noticias ORDER BY fecha DESC";
    $resultado = mysql_query($consulta) or die ('Error al
    ejecutar la consulta');

    while ($fila = mysql_fetch_array($resultado, MYSQL_ASSOC){
        echo '<item>
                  <title>'.$fila['titulo'].'</title>
                  <link>'.$fila['enlace'].'</link>
                  <description>'.$fila['detalle'].'</description>
             </item>';
    }
?>

</channel>
</rss>

¡Y listo!. Tenemos nuestro feed RSS dinámico, el cual añadirá los resultados obtenidos desde la base de datos y cada vez que publiquemos contenido nuevo se actualizará automáticamente.

Y ahora, ¿a conquistar el mundo?. Aún no. Antes de terminar:

3.- Consejos útiles

Algunos tips que nunca están demás:

Validar el feed

Antes de lanzar nuestro feed al público, es bueno asegurarnos que funcione de forma correcta y que no hayamos cometido errores de codificación. Para esto podemos validar mediante varios servicios, como por ejemplo:

Solo añadimos la URL de nuestro feed y validamos.

Publicar el feed

Existen servicios que nos permiten publicar nuestro feed y ofrecen una serie de funcionalidades bastante interesantes, como añadir publicidad o estadísticas sobre nuestros suscriptores. El más conocido y utilizado sin duda que es Feedburner, en el cual en solo instantes podremos publicar nuestro feed sin problemas.

Mostrarle a los usuarios que existe un feed en el sitio

Si en este preciso instante miran la barra de direcciones de su navegador, podrán ver que hay un ícono de color naranjo:

Este ícono indica que el sitio cuenta con un feed RSS al cual se pueden suscribir. ¿Cómo añadirlo? Muy sencillo, solo debemos agregar las siguientes líneas entre las etiquetas <head> y </head> de cada página en la que queramos que aparezca, tal como si fuese un favicon:

<link rel="alternate" type="application/rss+xml" title="Mi feed RSS"
href="http://www.ejemplo.com/feed/">

Simple, ¿no?

Personalizar el feed

Los detalles sin duda que marcan la diferencia en la mente de los usuarios. Entonces, ahora que aprendimos a hacer un feed desde cero, ¿por qué no jugar un poco y hacerlo más personalizado?. Solo con modificar pequeñas partes del código podemos desplegar cierto tipo de información en nuestro feed (por ejemplo comentarios si existiesen), o bien limitar el número de artículos a mostrar, o hacer un feed independiente para cada persona que escriba en el sitio y así cada lector siga a su autor favorito.

Las posibilidades son muchas, solo hay que experimentar.

Y con esto damos por terminado este tutorial en el que hemos cubierto el proceso de creación de un feed RSS desde cero. Como pueden ver, solo toma unos breves minutos y la dificultad es baja, por lo que los animamos a que lo intenten y nos cuenten su experiencia.

Antes de terminar, les recordamos que como siempre, este tutorial ha sido:

Cualquier duda o comentario que puedan tener, los invitamos a dejarnos unas líneas en el área habilitada a continuación.

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

]]> http://www.comolohago.cl/2010/01/06/como-crear-un-feed-rss-desde-cero/feed/ 5