<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Widget? OK! &#187; JavaScript</title>
	<atom:link href="http://widgetok.ru/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://widgetok.ru</link>
	<description>Блог о виджетах, их разработке и использовании</description>
	<lastBuildDate>Sat, 08 May 2010 18:04:05 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Yahoo! Widgets для разработчиков</title>
		<link>http://widgetok.ru/2009/02/yahoo-widgets-for-developers/</link>
		<comments>http://widgetok.ru/2009/02/yahoo-widgets-for-developers/#comments</comments>
		<pubDate>Sat, 21 Feb 2009 08:33:30 +0000</pubDate>
		<dc:creator>Глеб</dc:creator>
				<category><![CDATA[Технологии]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Konfabulator]]></category>
		<category><![CDATA[Yahoo! Widgets]]></category>

		<guid isPermaLink="false">http://widgetok.ru/?p=299</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<p><img src="http://widgetok.ru/wp-content/uploads/2009/02/poweredby_lightbg.png" alt="Konfabulator" title="Konfabulator" width="315" height="69" class="alignright size-full wp-image-306" vspace="10px" hspace=10px"/><br />
Итак, если вы хотите заняться разработкой виджетов Yahoo!, то первое место, куда следует заглянуть, это раздел <a href="http://widgets.yahoo.com/tools/">Tools and Documentation</a>. Там можно скачать SDK, почитать <a href="http://manual.widgets.yahoo.com/">подробную документацию</a> и найти инструкцию, как сделать свой первый виджет. Если будут возникать какие-то вопросы, можно посоветоваться с другими разработчиками на <a href="http://www2.konfabulator.com/forums/index.php?act=idx">форуме Konfabulator</a>. Народ там вежливый и адекватный: приятное отличие заграничных форумов от отечественных.</p>
<p>В Yahoo Widgets для разметки используется свой диалект XML, а для придания интерактивности &#8211; JavaScript. Также можно вставлять HTML, Flash и использовать CSS (правда, в урезанном варианте).<br />
Свой язык разметки &#8211; это, с одной стороны, хорошо, потому что позволяет легко делать страницы типа &laquo;О программе&raquo; и определять настройки виджета с помощью специальных конструкций. Но с другой стороны, с непривычки вёрстка становится нетривиальной задачей.</p>
<p>Помимо обычного JavaScript, виджеты могут пользоваться дополнительным возможностями: хранить данные в SQLite, легко изменять и получать настройки, работать с операционной системой (например, узнавать загрузку процессора или информацию о беспроводных сетях)&#8230;</p>
<p>У виджетов есть режим отладки, в котором, кроме самого виджета, показывается консоль отладчика, где можно просматривать служебные сообщения и выполнять JavaScript-код.</p>
<p>Готовое приложение уваковывается в файл с расширением .widget. Есть два способа упаковки: zip (просто архивируете каталог с виджетом, после чего меняете расширение) и &laquo;однородный файл&raquo; (flat file), который создаётся с помощью виджета &laquo;Widget Converter&raquo;, входящего в SDK. ZIP считается устаревшим методом упаковки и не рекомендуются к использованию из-за проблем с производительностью.</p>
<p>Когда ваш виджет готов, вы можете попросить других разработчиков потестирвоать его на форуме, в специальном разделе <a href="http://www2.konfabulator.com/forums/index.php?showforum=30">Widget Test Ground</a>. Более того, Yahoo! настоятельно рекомендует это делать, особенно, для первой версии программы. Правда, я, например, комментариев к своему &laquo;Last.fm recent track&raquo; так и не дождался: наверное, он оказался слишком специфическим и пользователей Last.fm на форуме не было.</p>
<p>Теперь вы можете <a href="http://widgets.yahoo.com/submit/">отправить ваш виджет в галерею виджетов Yahoo!</a>. По идее, после этого он попадёт в очередь на утверждение, будет подвергнут автоматизированной проверке на безопасность (не спрашивайте меня, как они это делают) и просмотрен модератором, который сделает скриншот и напишет небольшой обзор. В моём случае скриншот они сделать не смогли, поэтому попросили его выслать, причём непременно с альфа-каналом (и то я просил опубликовать скриншот на тёмном фоне, а они сделали на светлом, из-за чего буквы на нём плохо читаются). Да и моё описание виджета оставили неизменным.<br />
Кстати, будьте готовы к тому, что ваш виджет появится в галерее далеко не сразу. Мой, например, был отправлен на добавление в декабре, а появился в галерее только в первой половине февраля. Надеюсь, эти задержки с рассмотрением были временными.</p>
<p>Наконец-то! Мы подошли к финальной части: наш виджет опубликован и теперь его пора распространять. Делать это можно двумя способами: просто давать ссылку на его страницу в галерее (но это не очень удобно) и <a href="http://widgets.yahoo.com/badges/">сделать бэдж для установки виджета</a> прямо с вашего сайта. Если сразу после попадания виджета в галерею бэдж не создаётся (возникает ошибка вроде &laquo;Виджет не найден&raquo;), подождите день-другой и попробуйте ещё раз: похоже, там есть какая-то задержка. Ваше терпение будет вознаграждено вот таким красивым инсталлятором:</p>
<div align="center"><iframe scrolling="no" frameborder="0" src="http://badge.ydp.clientapps.yahoo.com/badge/widgets/badge?aid=w6725&#038;tc=20619e&#038;bc=F8F8F8&#038;cn=lastfm-recent-track" style="width:180px;height:190px;padding:0;border:0;" allowTransparency="true"></iframe></div>
<p>А в следующей заметке я хочу рассказать об использовании виджетов Yahoo! для бизнеса.</p>
]]></content:encoded>
			<wfw:commentRss>http://widgetok.ru/2009/02/yahoo-widgets-for-developers/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Технологии разработки веб-виджетов: максимальная гибкость</title>
		<link>http://widgetok.ru/2009/02/web-widgets-technologies-dynamics2/</link>
		<comments>http://widgetok.ru/2009/02/web-widgets-technologies-dynamics2/#comments</comments>
		<pubDate>Fri, 06 Feb 2009 22:23:45 +0000</pubDate>
		<dc:creator>Глеб</dc:creator>
				<category><![CDATA[Теория]]></category>
		<category><![CDATA[Технологии]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Silverlight]]></category>
		<category><![CDATA[sprout]]></category>
		<category><![CDATA[widgetbox]]></category>
		<category><![CDATA[веб-виджеты]]></category>
		<category><![CDATA[Вконтакте]]></category>

		<guid isPermaLink="false">http://widgetok.ru/?p=188</guid>
		<description><![CDATA[Заканчивая обзор технологий разработки веб-виджетов, расскажу о самых &#171;мощных&#187; из них.
HTML+JavaScript+серверный язык (например, PHP).
Такая связка позволяет создавать очень гибкие и интерактивные виджеты, поведение которых может зависеть как от действий пользователя, так и, например, от контента страницы, на которой виджет размещается. Эти технологии используются, в частности, для показа контекстной рекламы.
При такой схеме JavaScript, как правило, отвечает [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-thumbnail wp-image-193" style="margin: 10px;" title="maximum flexibility" src="http://widgetok.ru/wp-content/uploads/2009/02/990961_color_and_motion-150x150.jpg" alt="color and motion" width="90" height="90" />Заканчивая обзор технологий разработки веб-виджетов, расскажу о самых &laquo;мощных&raquo; из них.</p>
<h3>HTML+JavaScript+серверный язык (например, PHP).</h3>
<p>Такая связка позволяет создавать очень гибкие и интерактивные виджеты, поведение которых может зависеть как от действий пользователя, так и, например, от контента страницы, на которой виджет размещается. Эти технологии используются, в частности, для показа контекстной рекламы.<br />
При такой схеме JavaScript, как правило, отвечает за формирование внешнего вида виджета, а сервер &#8211; за ресурсоёмкие операции вроде обработки текста и вычислений (а часто ещё и за формирование JavaScript-а).<br />
Распространяться такие виджеты могут везде, где разрешена вставка JavaScript: на сайтах, в автономных блогах, некоторых блогохостингах.</p>
<p><strong>Плюсы:</strong></p>
<ul>
<li> максимальная гибкость и интерактивность, можно реализовать самые смелые идеи</li>
</ul>
<p><strong>Минусы:</strong></p>
<ul>
<li> трудоёмкость разработки</li>
<li> при большой популярности виджета, особенно если он требует много ресурсов для обработки данных, может сильно возрастать нагрузка на сервер</li>
</ul>
<p><strong>Где можно использовать:</strong></p>
<ul>
<li> где угодно. Такие виджеты &#8211; уже практически полноценные веб-приложения, и их можно применять для самых разных задач.</li>
</ul>
<h3>Flash или Silverlight (+ сервер)</h3>
<p>С помощью Adobe Flash делаются самые красивые виджеты, и самые технически сложные: например, всем знакомая вставка видео с YouTube. Сейчас набирает обороты конкурент Flash &#8211; технология Microsoft Silverlight. И хотя виджетов на ней я пока не встречал, уверен, скоро они начнут появляться.<br />
Распространяться такие виджеты могут везде, где разрешена вставка Flash, а в некоторых случаях эта технология является вообще единственным вариантом: например, только с её помощью можно создавать приложения <a href="http://vkontakte.ru">Вконтакте</a>.</p>
<p><strong>Плюсы:</strong></p>
<ul>
<li> большие возможности для дизайнеров</li>
<li> облегчается реализация технически сложных функций</li>
</ul>
<p><strong>Минусы:</strong></p>
<ul>
<li> трудоёмкость разработки</li>
<li> виджеты часто получаются &laquo;тяжёлыми&raquo;, медленно загружаются</li>
</ul>
<p>Ещё одна прелесть flash-виджетов состоит в том, что существуют сервисы для их автоматической генерации. К сожалению, в Рунете я таких не нашёл, а западные использовать неудобно, потому что они ориентированы на другую часть Сети. Приведу лишь пару примеров:</p>
<ul>
<li> <a href="http://sproutbuilder.com">Sprout</a> &#8211; мощный редактор. К сожалению, с февраля становится полностью платным и с русским языком не умеет работать абсолютно.</li>
<li> <a href="http://www.widgetbox.com">Widgetbox</a> &#8211; позволяет легко делать несколько типов виджетов. Например, вот я буквально парой кликов сделал виджет для показа RSS своего блога:</li>
</ul>
<div align="center">
<script src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js" type="text/javascript"></script><script type="text/javascript"><!--
if (WIDGETBOX) WIDGETBOX.renderWidget('24a90f5f-f659-4df9-993e-ded17d23cb3d');
// --></script>
</div>
<p>Но увы, интерфейс этого виджета не русифицирован, местами слетает кодировка, а механизм распространения &laquo;заточен&raquo; под западные социальные сети. Так что полноценно использовать его в Рунете не получится. Хотя, например, в качестве элемента дизайна блога (показывать в сайдбаре анонсы постов) или в качестве рекламы блога на других своих площадках &#8211; почему бы и нет.</p>
]]></content:encoded>
			<wfw:commentRss>http://widgetok.ru/2009/02/web-widgets-technologies-dynamics2/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Технологии разработки веб-виджетов: добавим динамики</title>
		<link>http://widgetok.ru/2009/01/web-widgets-technologies-dynamics1/</link>
		<comments>http://widgetok.ru/2009/01/web-widgets-technologies-dynamics1/#comments</comments>
		<pubDate>Tue, 27 Jan 2009 22:13:02 +0000</pubDate>
		<dc:creator>Глеб</dc:creator>
				<category><![CDATA[Теория]]></category>
		<category><![CDATA[Технологии]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[веб-виджеты]]></category>

		<guid isPermaLink="false">http://widgetok.ru/?p=109</guid>
		<description><![CDATA[Перейдём к динамическим виджетам и рассмотрим ещё пару технологий.
HTML+JavaScript (формируются статически)
Статически &#8211; в смысле, каждый пользователь виджета получает один и тот же код, и его содержимое впоследствии не меняется.
Тут, на мой взгляд, ничего особо интересного нет: добавляя JS, мы придаём немного больше интерактивности нашему виджету (переключение закладок, всяческие таймеры и всплывающие окошки), но при этом [...]]]></description>
			<content:encoded><![CDATA[<p>Перейдём к динамическим виджетам и рассмотрим ещё пару технологий.</p>
<h3>HTML+JavaScript (формируются статически)</h3>
<p>Статически &#8211; в смысле, каждый пользователь виджета получает один и тот же код, и его содержимое впоследствии не меняется.</p>
<p>Тут, на мой взгляд, ничего особо интересного нет: добавляя JS, мы придаём немного больше интерактивности нашему виджету (переключение закладок, всяческие таймеры и всплывающие окошки), но при этом сильно ограничиваем его распространение. Дело в том, что многие сервисы хостинга блогов, и уж тем более форумы, в целях безопасности не разрешают пользователям вставлять JavaScript. Поэтому такие виджеты будут работать, в основном, на автономных блогах, личных сайтах или на каких-то определённых страницах (например, в профиле пользователя LiveJournal, но не в его постах). Да и чтобы сделать что-то завлекательное на одном только JavaScript и HTML, надо постараться.</p>
<p>У меня пока есть только одна идея, как это можно использовать: счётчики. Например, организуете вы конкурс, который должен начаться через 14 дней. Делаете виджет с надписью &laquo;До начала мегаконкурса осталось:  столько-то часов-минут-секунд&raquo;, на котором тикает время в обратную сторону, вешаете у себя в блоге и предлагаете посетителям тоже повесить на своих блогах. Постоянно тикающий таймер будет подогревать аудиторию ничуть не хуже зажигательных постов, и вам для этого ничего не надо будет делать.</p>
<h3>Микросайтинг</h3>
<p>Очень интересная технология, которую нельзя не упомянуть. Интересная своей простотой, изяществом и &laquo;живучестью&raquo;.</p>
<p>Придумал её <a href="http://ainu.habrahabr.ru/">Дамир Ramainen ainu Фахрутдинов</a>, и началось всё <a href="http://habrahabr.ru/blogs/microsites/40089/">с этого поста</a> (по крайней мере, это первое упоминание, которое мне известно).</p>
<p>В чём &laquo;фишка&raquo;. Микросайт &#8211; это маленький самостоятельный сайт, встраиваемый в код другого, &laquo;большого&raquo; сайта. Код его представляет собой только ссылки и картинки, чем и объясняется &laquo;живучесть&raquo;: такой сайт-виджет можно разместить мало того что на любом блоге, но даже в подписи на форуме, где кроме BB-кодов вставлять ничего не разрешается.</p>
<p><em>Для разработчиков: исходники можно скачать по ссылке с приведённого выше поста на Хабре. Общий принцип работы: ссылки микросайта ведут на скрипты его родительского сайта-хостинга. Там, при клике, для пользователя стартуется сессия, в которой сохраняется его текущее положение на микросайте, и заново отрисовываются все картинки.</em></p>
<p><strong>Плюсы:<br />
</strong></p>
<ul>
<li>такой виджет может внедряться куда угодно, где можно вставлять картинки и ссылки</li>
<li>контроль над виджетом в ваших руках: вы можете изменить дизайн или даже отключить показ виджета везде, где он уже установлен</li>
</ul>
<p><strong>Минусы</strong>:</p>
<ul>
<li>При клике по ссылке микросайта происходит перезагрузка страницы (есть варианты без перезагрузки, но они используют JavaScript)</li>
<li>Улучшение дизайна &#8211; несколько более трудоёмкий процесс по сравнению с HTML</li>
</ul>
<p><strong>Где это можно использовать? </strong></p>
<p>В первую очередь там, куда не доберутся другие динамические виджеты: на форумах, в комментариях, в постах на блогохостингах. Например, проявив немного фантазии, можно сделать интересную подпись для форума, голосование или даже вставку слайд-шоу!</p>
<p>У меня есть мысль на этой технологии построить игру для блоггеров. Например, крестики-нолики. Представьте: блоггер вставляет картинку с клеткми 3х3 в конец поста. Первый читатель, который видит эту картинку, кликает на клетку &#8211; там ставится крестик и его видят остальные читатели. Потом ходит автор поста, а все остальные ждут, пока он поставит свой нолик, после чего ходить уже может другой читатель, и так далее. Этакое интеллектуальное соревнование между автором и аудиторией. Как считаете, это было бы интересно?</p>
]]></content:encoded>
			<wfw:commentRss>http://widgetok.ru/2009/01/web-widgets-technologies-dynamics1/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
