CSS

Ξ 22 comentarios

Cómo hacer un gadget en Windows 7

por Cri
Cómo hacer un gadget en Windows 7

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:

Comparte este tutorial

El culpable de todo esto

El único que se ha atrevido a agredir a ToPHeR con una silla en la cara y salir sin ningun rasguño ante tal acto de maldad, Muahahahahha. Me pueden ubicar en twitter. @Cri_Vasquez

En los barrios marginales se le conoce como: Cri

Comentarios en Facebook

22 Comentarios

  • [...] This post was mentioned on Twitter by Como Lo Hago, ComoHago. ComoHago said: Cómo hacer un gadget en Windows 7: Hola amigos de Cómo Lo Hago, tratando de sorprenderlos día a día nos empeñamo… http://bit.ly/aw5klr [...]

  • [...] This post was mentioned on Twitter by Como Lo Hago, Jaime Pérez Peñaloza. Jaime Pérez Peñaloza said: RT @comolohago: Cómo hacer un gadget en Windows 7 http://fb.me/EljMXtgo [...]

  • ya que alguien se anime a hacer en el menú emergente (clic secundario) la opción  subir a google docs :P

  • hooolaaa, he seguido las instrucciones, pero no logro que aparezca mi gadget en la lista de la primera imagen que pusiste:( alguna solución? que estoy haciendo mal? gracias de antemano

  • mira lo que pasa es que Gadget.XML no
    esta bueno (no es que el post este malo,
    esta de lo mejorXD) los codigos estan mal
    el que sirve es este:

    CómoLoHago-Novedades
    1.0

    © CómoLoHago 2010
    Novedades acerca de tutoriales nuevos en tu escritorio

    true

    Full

  • como hacer una funcion

  • como tengo que poner el contenido personalizado, con document.write()?

  • there are a from a chis is welcomen

  • estos comentarios son bb okkkkkkkkkk brutos

  • hola yo meyamo valeria tan lindo

1 2 3

Deja un comentario

Ingresa con tu cuenta de Cómo Lo Hago

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Gente linda que nos quiere

Donde mas estamos