|
- Поляков Александр, 14.09.2003, компьютерная газета -
 Приятель посмотрел на мой рабочий стол и буркнул:
"Маленькое интеллигентное чудовище. Как сделал?"
Спасибо, друг, мне очень приятно чувствовать себя немного неординарным, хоть ты и польстил. Сделать то, что ты увидел, было несложно, хоть оно и заставило посидеть над справочниками. Впрочем, и этот процесс тоже доставил мне немалое удовольствие. Мы, извращенцы, все такие.
Такую занятную реакцию у моего товарища вызвали новые обои на моем рабочем столе. Фоном стала HTML-страничка, а не традиционные JPEG или BMP, и это выглядело как-то… свежо. Windows имеет собственные планировщики, часы, Quick Launch и меню для быстрого доступа к документам. В Интернете полным-полно заменителей стандартных компонентов операционной системы на любой вкус — с календарями, всяко-разными SmartBar'ами и PowerLauncher'ами. Раньше мне нравилось экспериментировать с ними, а теперь… Сев вечером полистать справочник по HTML, я не думал, что к утру стану любителем обоев, набранных в стандартном "Блокноте".
В принципе, функциональность языка разметки HTML позволяет реализовать любую идею. Мои новые часики тикают на десктопе, отображая, помимо обычных часов-минут, также секунды и текущую дату. Под ними — список ближайших дел, рассортированных в группы, помеченные разными цветами, а в уголке, рядом с кнопкой "Пуск", приютились линки на папки с музыкой, клипартами, еще с парочкой часто используемых каталогов.
Красиво? Пожалуй. Удобно? Уверяю вас: очень удобно. Я уже давно убрал с таскбара панель быстрого запуска и стандартные часы, а на рабочем столе оставил лишь Корзину и иконку "Мой компьютер". Часто используемые программы — недалеко отсюда, всего лишь за щелчком мыши по "Пуску". Списки дел, которые по мере исполнения должны прореживаться, открываются в любом заданном вами редакторе, опять-таки, одним щелчком мыши. Все-таки HTML-обои — не такая уж скверная идея, как мне казалось раньше.
Набирая код, я подумал, что такое украшательство изрядно загрузит процессор. Процессор и правда стал отрабатывать потраченные на него деньги — загрузка при простое возросла с 4-5% до 5-6%. Как бы кулер не взлетел:).
Хотите себе такую игрушку? Давайте сделаем ее вместе. Системные тебования:
ОС: Windows XP (работа на более старых возможна, но не проверялась).
ПО: notepad.exe.
Компьютер: PC-совместимый, 1 шт.
Прямые руки: 1 шт. (рекоменд. 2 шт.).
Перво-наперво создадим каталог, в котором будем хранить самодельный Wallpaper. В нем следует завести несколько файлов — для начала это будут wallpaper.jpg (фоновая картинка), wallpaper.html (собственно движок обоев) и 1.task (файл с первым списком задач). Так как в данном примере почти весь текст расположен в правой части экрана, картинку следует подобрать такую, чтобы правая ее половина была по возможности однородной, не пестрой (это ухудшило бы читаемость текста).
Приступим к кодированию HTML. Обычно гипертекстовый файл заключается в теги <HTML>…</HTML> и состоит из двух частей: заголовка и тела файла.
Заголовок размещается между тегами <HEAD>…</HEAD>. Он, как правило, содержит информацию об авторе, ключевых словах для поиска данного файла, используемом при его создании программном обеспечении, кодировке текста и т.д. В этой же секции рекомендуется размещать используемые на страничке скрипты, т.к. старые браузеры могут не понять их: будучи внедренными в тело документа, тексты скриптов будут не исполняться, а отображаться, засоряя при этом экран. В данном случае это не актуально, но лучше все-таки придерживаться правил хорошего тона при верстке странички; к тому же, это облегчает восприятие текста страницы при кодировании и отладке.
<HTML>
<head>
<script>
var timerID=null;
var timerRunning=false;
var currentcolor="white";
var currentsize=3;
function stopclock()
{if (timerRunning) clear Timeout (timerID);
timerRunning=false;};
function startclock()
{stopclock();
showtime();};
function showtime()
{var now=new Date();
document.clock.display. value=now.toLocaleString();
timerID=setTimeout("startclock()",1000);
timerRunning=true; };
function setcolor(clr)
{currentcolor=clr; };
function setsize(sz)
{currentsize=sz; };
function task(tsk)
{document.write("<font size="+currentsize+
" color="+currentcolor+">"+tsk+"<br></font>")};
</script>
</head>
В приведенном фрагменте присутствует начало страницы (заголовок), которая станет обоями рабочего стола. В заголовке инициализируются переменные, которые понадобятся для работы страницы, и задаются скрипты, обеспечивающие работу часов и отображение списка задач. Функции stopclock(), startclock(), showtime(), как можно догадаться из названия, заведуют работой таймера. Один раз в секунду они обновляют ту часть рабочего стола, на которой должны находиться цифры нашего циферблата.
Функции setcolor (цвет), setsize (размер) и task(задача) будут использоваться при задании списка дел, находящегося для удобства правки в отдельном файле — мы рассмотрим их позже. Пока отмечу лишь, что первые две из них служат для настройки вида отображаемого текста, а третья является как бы оболочкой для более удобного ввода текста в *.task-файлы.
Теперь рассмотрим "ядро" файла обоев — содержимое тега <BODY> — и прокомментируем его:
<body bgcolor="black"
link="#ffffff"
alink="#ffffff"
vlink="#ffffff">
Задаем цвета фона и ссылок:
<basefont size=3 face="arial">
Указываем основной шрифт, который собираемся использовать на страничке. Разумеется, вы можете изменить его на любой другой:
<span style="position: absolute;width:100%;height:100%;z-index:1">
<img src="wallpaper.jpg" width="100%" height="100%">
</span>
В теге <SPAN> размещаются "контейнеры" — независимые участки HTML-кода. В данном случае мы организовали двухслойную структуру, на нижнем слое (обратите внимание на атрибут z-index) которой находится фоновая картинка wallpaper.jpg, а на верхнем — все остальное содержимое.
<span style="position: absolute;width:100%;height:100%;z-index:2">
Второй слой, как и первый, занимает всю возможную площадь — это указывается стилем контейнера: position:absolute; width:100%; height:100%. В данном случае картинка будет занимать весь десктоп, и нам придется немного отступить от края, когда мы будем создавать нижний ряд ссылок, иначе они будут закрываться панелью задач.
<table width=100% height=100%>
Теперь мы вставили в контейнер таблицу, благодаря которой можем гибко управлять размером и положением помещаемых на десктоп текстов.
<tr>
<td align="right" valign="top">
<hr width="50%" color= "#208020">
<font size=10 color="white"> Текущие:</font>
Объявив в таблице первый ряд и первую колонку (которая в данном примере останется единственной), мы задали шрифт нужного размера и цвета, а затем вывели на экран первую надпись.
<form name="clock">
<input type="text" name="display" value="Standby for time" size=25 style="border-width=0; background=color;backgroundColor='black';color='white';font-size=24px;text-align=right;margin-top=-40px;">
</form>
Следующие теги поместили на экран форму ввода в виде текстовой строки. К сожалению, нельзя менять фрагменты выводимого на экран текста без изрядного ущерба производительности, но это не распространяется на поля ввода, чем мы и воспользовались. Дополнительные указания, которые мы задали в атрибуте style, объясняют компьютеру, как именно должно быть модифицировано поле ввода, чтобы органично вписываться в фоновый рисунок и не быть похожим на простой элемент оконного интерфейса. Более подробную информацию по стилям HTML вы сможете найти в великолепной справочной системе MS Office.
<script>startclock()</script>
Данной строкой запускается на исполнение скрипт, управляющий работой часов. Его исполнение рекурсивно: при срабатывании таймера через секунду после запуска скрипт обновляет изображение часов и взводит таймер на одну секунду вперед.
<hr width="50%" color= "#208020">
<a href="1.task" style="text-decoration=none;"><script src="1.task"></script></a>
В этих строчках заключена изюминка создаваемого wallpaper'а. Тег <HR> создает горизонтальную полоску нужной ширины, которая служит для визуального разделения разных частей текста и групп записанных задач. Тег <A> указывает, что выводимый текст является ссылкой (благодаря этому мы можем открывать список задач для редактирования простым щелчком по нужной группе), а в контейнере <SCRIPT> осуществляется импорт команд из файла, на который указывает атрибут src.
<hr width="50%" color= "#208020">
<a href="2.task" style="text-decoration=none;"><script src= "2.task"></script></a>
<hr width="50%" color= "#208020">
<a href="3.task" style="text-decoration=none;"><script src= "3.task"></script></a>
<hr width="50%" color= "#208020">
<a href="4.task" style="text-decoration=none;"><script src= "4.task"></script></a>
<hr width="50%" color= "#208020">
Как видно из данного фрагмента, продолжение кода является повторением импорта текста для разных групп задач. Сам текст и команды форматирования спрятаны внутри импортируемых файлов.
</td></tr><tr><td valign=bottom>
<font color="#606020" size=3>
<a href="D:MEDIAaudio"> музыка</a>   
<a href="D:Clipart">клипарты </a>   
<a href="D:FileArch">архивы </a>   
<a href="D:Current">заказы </a>   
</font>
</td></tr><tr height=60><td> </td> </td></table>
</span>
</body>
<HTML>
Остававшаяся часть кода закрывает ячейку построенной таблицы со списком строк (в данном случае — ваш ежедневник) и в следующей, последней ячейке отображает несколько простых текстовых ссылок на каталоги, к которым вы будете чаще всего обращаться.
Теперь нам нужно построить файлы с текстами, которые будут выводиться на рабочий стол при отрисовке обоев. Вот текст одного из этих файлов:
setcolor("yellow");
setsize(3);
task("купить новый монитор");
task("дать объявление на продажу старого монитора");
task("выписать КГ на следующий год");
setcolor("green");
setsize(2);
task("купить пива");
task("купить рыбу");
task("отпраздновать покупку нового монитора");
Фактически этот файл представляет собой текст программы на JavaScript, использующий функции, описанные в заголовке файла wallpaper.html. Форматирование текста осуществляется элементарными командами, для добавления и удаления строки на десктопе достаточно добавить или убрать строчку task(" … "); в соответствующем *.task-файле в каталоге разработанных обоев.
Стоит заметить, что тип файлов TASK в системе наверняка не зарегистрирован. Я не случайно создал такие файлы, и объясню, почему. Дело в том, что, если MIME-тип файла является text или image, то файл будет выведен в окне браузера, что не очень удобно. В противном случае поток перенаправляется в плагин либо на загрузку (запуск), что нам и требуется.
При первом запуске компьютер спросит вас, что делать с файлом типа task: сохранить на жесткий диск, запустить или отменить неосторожный запуск? В появившемся окне снимите галочку, заставляющую компьютер каждый раз задавать этот вопрос, и выберите запуск. На запрос о выборе приложения я указал "Блокнот".
Здесь мое вдохновение разленилось и, покинув рабочий пост, вышло на перекур. Его место было немедленно оккупировано ленью, которая настоятельно рекомендовала устроить длительный отдых. Я не стал добавлять на новый рабочий стол лишние элементы, но ставить препоны вашей фантазии не могу — у творчества нет границ.
Никто не запрещает вам, например, заменить аскетичную строчку символов с датой и временем на красивые рисованные часики или вставить колонку ссылок на плейлисты с портретами любимых исполнителей. Счастливые обладатели постоянного доступа к Интернету, например, могут вставить фрейм с лентой новостей с любого сервера, а обитатели локальных сетей наверняка сочтут удобным разбить задачи на две группы: одна личная, с перечнем задач, другая загружается с файл-сервера и содержит объявления ваших сетевиков или избранные модератором анекдоты. На построенном ядре реализация любых замыслов не составит большого труда.
Если же у читателя возникнут проблемы с написанием того или иного модуля — жду ваших писем. Ну, а пока — творческих вам успехов, и никогда, никогда не беритесь вечером за справочник по HTML!
|
