[archizona]

В продолжении этой темы
случайно наткнулась, что любой кусок веб страницы можно переделать в гаджет для рабочего стола (а такой кусок у меня уже был). нужен блокнот и zip архиватор.

Вот, что у меня получилось http://archizona.ru/color.rar

Ниже урок от Павла, по которому все и получилось. Жаль, что в W8 их уже нет.

Гаджеты рабочего стола для операционной системы Windows7 и не только, широко распространены в сети Интернет в свободном доступе. Но у пытливого ума, всегда возникнет вопрос, как это все работает и из чего состоит? Ведь обучение работе с персональным компьютером связано не только с зубрежкой тех или иных действий, но еще и с глубоким понятием, что происходит при выполнении различных действий. Поэтому, небезынтересным должно стать рассмотрение работы гаджета изнутри, поняв его внутреннюю структуру и принцип действий.

Мы уже говорили о гаджетах для Windows 7, но хочу еще раз напомнить, что это такое. Гаджет или как его еще называют виджет – это небольшая программа, выполняющая определенный круг узконаправленных задач, например, отображение погодного информера на рабочем столе вашего персонального компьютера. Раз уж мы заговорили о погодном информере, то в данной статье, мы его и постараемся сделать. Что нам для этого потребуется? Потребуется лишь обычный редактор HTML, если его нет в вашем арсенале программного обеспечения, то подойдет встроенный по умолчанию «Блокнот Windows», но и конечно подключение к сети Интернет, так как черпать свою информацию наш будущий гаджет будет оттуда. Устраивайтесь поудобнее, приступаем.

Самый простецкий гаджет состоит, по крайней мере, из двух файлов и одной картинки. Первый файл - это файл манифеста, то есть документ с описанием архитектуры, характеристик и т.д. Этот файл имеет расширение - .XML и может хранить в себе структурированные данные. Второй файл - это обычный документ HTML содержащий информацию о внешнем виде самого гаджета, то есть о его стиле отображения, функционале и т.д. В документе HTML может использоваться не только CSS, но и скриптовые сценарии Java Script. Эта возможность значительно расширяет функциональность гаджета, но при этом усложняет его создание. Ведь помимо умений работать с разметкой гипертекста HTML, XML и каскадными таблицами стилей - CSS, добавляется еще и программирование на языке Java Script. Одним словом, файл HTML это обычная Интернет страничка, которые сплошь и рядом мы видим ежедневно. И третья составляющая гаджета - это графическое изображение, оно может быть использовано для логотипа гаджета, фона.

Переходим к рассмотрению и созданию файла манифеста. Назовем его gadget.xml. Откройте редактора HTML или «Блокнот» и впишите следующий код:

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Погода</name>
 <version>1.0</version>
<author name="Павел">
<!-- Если вы желаете отобразить логотип рядом с именем автора, то добавьте элемент logo -->
<logo  src="globe.png" />
<info url=" " />
</author>
 <copyright>Copyright © 2011</copyright>
 <description>Гаджет рабочего стола Windows7 - погода</description>
<!-- Иконка гаджета, которая отображается в меню окна "гаджеты" -->
 <icons>
 <icon width="132" height="128" src="globe.png" />
 </icons>
<hosts>
<host name="sidebar">
<!-- Здесь нужно указать путь к вашему файлу HTML -->
<base type="HTML" apiVersion="1.0.0" src="gadget.html" />
 <permissions>full</permissions>
 <platform minPlatformVersion="0.3" />
<!-- Изображение, которое будет отображаться при перемещении гаджета по рабочему столу -->
 <defaultimage src="" />
</host>
</hosts>
</gadget>

В этом коде нам необходимо указать название гаджета, версию, автора этой программы и его сайт, описание гаджета, ссылку на иконку и на HTML файл в котором хранятся стили и описание внешнего вида гаджета. Заполнить этот файл нужно предельно аккуратно, так как работа будущего гаджета неотъемлемо связана с этим файлом. Особое внимание обратите на ссылку, которая ведет к документу HTML. Если она будет заполнена неправильно, то гаджет работать не будет. Так же подготовьте картинку, которую вы будете использовать, как иконку вашего гаджета, она тоже должна быть прописана в этом файле, иначе, вы его просто не увидите в полной мере, лишь описание. После того, как вы создадите этот файл манифеста, его нужно сохранить под расширением .XML в кодировке UTF-8.

Переходим к созданию файла HTML. Размечаем, как обычную страницу сайта, без всяких премудростей. Даем название, например, gadget.html и сохраняем в том же месте, где у нас лежит файл манифеста. Теперь, наш гаджет практически собран целиком. Осталось лишь раздобыть код самого погодного информера. Сразу оговорюсь, экспериментировать не воспрещается. Можно взять и код информера, например, курса валют или еще какого-нибудь. Но мы остановимся на погодном информере.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Гаджет погода</title>
<style type="text/css">
body{width:160px; height:70px;}
</style>
</head>
<body>
<!-- Параметр определения фона, за прозрачность отвечает opacity="0", допустимые варианты от 0.1 до 1 -->
<g:background id="background" style="position:absolute;z-index:-1;top:0;left:0;" opacity="0"></g:background>
 <div id="gadgetContent">  
<!-- Ссылка на скрипт, отвечающий за вывод информера погоды на сайте

ИЛИ ПРОСТО КОД ВАШЕГО КУСОЧКА САЙТА -->
 <script type="text/javascript" src="http://informer.hmn.ru/types/info.js?value=27612&type=10_2"></script>  
 </div>
</body>
</html>

Перейдите по ссылке на сайт  погода , перед вами откроется страница сайта, где вы сможете выбрать понравившийся вам информер. Отметьте его и внизу нажмите на кнопку "Продолжить", в следующем окне вам предложат выбор из нескольких цветов и самое важное, город, погоду которого вы хотите знать - это можно сделать вверху страницы в выпадающем списке. После того, как вы определитесь с цветом гаджета и городом, нажмите опять кнопку "Продолжить". Скопируйте код информера и вставьте его между тегами <body></body> нашего документа HTML. Но это еще не все. Теперь задайте стиль нашему тегу <body></body>, то есть нужно указать размер документа. Размер нужен для того, чтобы наш гаджет отображался правильно. Делается это, например, так: в открывающем теге body прописываем следующую строку - <body style=”width: 160px;height: 60px;”>. Вот и вся манипуляция, теперь наша HTML страница будет иметь размер 160х60 пикселей, что соответствует размерам нашего гаджета. Еще нужно задать фон нашему рукотворному творению. Для этого после тега body пропишите следующую строку:

<g:background id="background" style="position:absolute;z-index:-1;top:0;left:0;" opacity="0"></g:background>

Теперь, фон гаджета будет прозрачный, так как параметр opacity=”0” не имеет значения. Значением этого параметра может быть число в диапазоне от 0.0 до 1.0, то есть от 0 до 1. Этот параметр принадлежит CSS3 и поддерживается не всеми браузерами на сегодняшний день. 
Все этапы пройдены, осталось превратить наши файлы и картинку в гаджет. Для этого выделите все созданные нами элементы и щелкните правой кнопкой мыши по ним. В появившемся контекстном меню выберите пункт "Отправить" и выберите раздел "Сжатая zip папка". Если у вас установлен архиватор WinRar, то нужно выбрать пункт меню "Добавить в архив" и далее отметить "Архив ZIP". То есть из выше сказанного становится понятно, что необходимо упаковать файлы в архив ZIP. После того, как вы это сделаете, нужно сменить расширение нашего архива. Например, у нас был архив Gadget.zip, меняем расширение на Gadget.gadget. Внешний вид нашего архива мгновенно изменится. Таким образом, мы получили гаджет. Щелкните мышью по гаджету, в появившемся окне выберите "Установить", в следующее мгновение на рабочем столе, справа вверху появится гаджет, который вы создали собственными руками. Можете посмотреть ярлык гаджета в "Панели гаджетов".