Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Cómo hacer un gadget en Windows 7
#1
[Imagen: 4878538776_56444ce8d5.jpg]
1 ¿Qué necesitamos?
·Sistema operativo Windows 7
·Aprender un poco de HTML + CSS. Para esto pueden seguirme, y dentro de poco los vereis.

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
[Imagen: 4877930213_23b99c9738_z.jpg]

2. Una vez creada nuestra carpeta contenedora necesitaremos algunos archivos indispensables para poder personalisar y a la
vez desarrollar:
[Imagen: 4877930397_912a5736e3_z.jpg]
MiGadget.html: Contiene el código principal para los ajustes de color, fondo, letras, links, feeders, etc
Cita:<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.
Cita:<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>
·Gadget.xml: Contiene el autor, nombre, descripción, ícono, logo. En sí es lo necesario para aparecer en el menú para
seleccionar el Gadget.
Cita:dijo:<?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>© 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).
[Imagen: 4878539210_3d1179ddee.jpg]
[Imagen: 4878539308_5af141246a.jpg]
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:
[Imagen: 4877930675_981c161b84.jpg]
[Imagen: 4877930725_0e4a769418.jpg]
[Imagen: 4877930919_d251acf20b.jpg]
[Imagen: 4877930919_d251acf20b.jpg]

Espero les haya gustado, les motive para hacer sus propias creaciones y así poder compartirlas con los demas. Me despido.
[/quote]
#2
excelente... Me pongo a trabajarlo y cualquier duda te escribo... Hace mucho le tenia ganas
aco cabron
Honda cx500 '81
#3
excelente tutorial man te felicito thanks
WWW
#4
:O wow exelente amigo
WWW
#5
Muy bueno, intentare hacer uno Sonrisa
#6
muy buen tuto, excelente asi ya podre crearlos a mi criterio y a mi gusto


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Windows 7 o 8 Estarly_Eisenberg 17 270 02-08-2017, 08:26 AM
Último mensaje: efbsfcd
Música Tutorial hacer mixes con Adobe Audition 1.5 djsmokingcr 5 179 02-05-2017, 05:33 AM
Último mensaje: garcon
  Cómo saber fecha y hora de instalación original Windows 10 CarlosAlberto 2 173 02-12-2016, 06:25 AM
Último mensaje: shek
  Guia cómo eliminar opción de actualizar a windows 10 [desde win7, win8 y 8.1] escuelasegura 16 673 29-07-2016, 02:49 PM
Último mensaje: K3TZ4L
  Que hacer para "aumentar" la capacidad de un disquete de 1.4 MB a 128 GB darwin17 7 475 14-05-2016, 04:48 PM
Último mensaje: scainline
  Cosas que no deberías hacer si tienes un SSD elcarnes 12 652 12-05-2016, 08:01 PM
Último mensaje: Shirow_Aramaki
  ¿Qué hacer cuando tu equipo se congela? darwin17 2 294 28-04-2016, 03:34 AM
Último mensaje: Lob3zNo
  Cómo cambiar las aplicaciones predeterminadas en Windows 10 CarlosAlberto 0 136 25-03-2016, 02:03 PM
Último mensaje: CarlosAlberto
  Cómo desactivar la publicidad en la pantalla de bloqueo de Windows 10 CarlosAlberto 4 450 11-03-2016, 10:56 PM
Último mensaje: K3TZ4L
  Cómo desactivar las aplicaciones en segundo plano de Windows 10 CarlosAlberto 6 660 01-03-2016, 04:58 PM
Último mensaje: YamaT



Usuarios navegando en este tema: 1 invitado(s)