Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

белогорцев глеб белогорцев

2,557 views

Published on

белогорцев глеб белогорцев

  1. 1. Виджеты: интернет-проект за пределами сайта<br />Глеб Белогорцев (РБК)<br />
  2. 2. Введение <br />Виджет - это небольшой, лёгкий в установке и использовании программный модуль, требующий для своей работы некоторой среды (т.н. «движка», widget engine) и исполняющий, как правило, одну определённую функцию. <br />
  3. 3. В чем прелесть виджетов<br />Для пользователей:<br /><ul><li>Новые возможности
  4. 4. Украшение рабочего стола и сайта</li></ul>Для владельцев интернет-проектов:<br /><ul><li>Распространение влияния за пределы сайта
  5. 5. Новые посетители, повышение лояльности старых</li></li></ul><li>Обзор платформ для виджетов <br />
  6. 6. Виджеты для веба<br />
  7. 7. ВКонтакте<br />Технологии:Flash.<br />Популярность: у самого популярного более 8 млн. участников, меньше года назад было 3 млн.<br />
  8. 8. МойМир@Mail.Ru<br />Технологии: Flash, iframe (HTML, JS, Silverlight ит.д.)<br />Популярность: У самого популярного приложения 3 с лишним млн. пользователей.<br />
  9. 9. LiveJournal<br />Технологии: HTML, Flash, не разрешён JavaScript<br />
  10. 10. Стартовые страницы<br />
  11. 11. iGoogle<br />Технологии: XML, JavaScript. Есть поддержка OpenSocial.<br />
  12. 12.
  13. 13. Мой Rambler (Netvibes)<br />Технологии: XHTML, JavaScript, используется движок http://netvibes.com<br />Open source: http://netvibes.org<br />
  14. 14. Виджеты Яндекса<br />Технологии: XHTML, JavaScript<br />
  15. 15. Виджеты для рабочего стола<br />
  16. 16. Yahoo! Widgets<br />Самый популярный русский виджет, который я нашёл, имеет 31 000 загрузок.<br />
  17. 17. Гаджеты Windows 7/Vista<br />Благодаря распространенности ОС, имеют большие перспективы.<br />Наиболее популярный русский гаджет имеет 1 млн. загрузок<br />
  18. 18. Примеры:<br />
  19. 19. Виджеты Opera<br />У самого популярного русского, который я нашёл, 2700 загрузок за последнюю неделю <br />
  20. 20. Для мобильных телефонов<br />Samsung – уже можно разрабатывать.<br />LG – есть SDK и эмулятор, но устанавливать в телефон ещё нельзя. <br />Своя технология есть у Nokia.<br />
  21. 21. Для телевизоров<br />Yahoo! Widgets под конец подались в ТВ.<br />Телевизоры с виджетами делают Sony, Samsung и Panasonic.<br />
  22. 22. Особенности проектирования и разработки виджетов<br />
  23. 23. Основные составные части<br /><ul><li>Серверная
  24. 24. Функциональное «ядро»
  25. 25. Хранилище данных виджета
  26. 26. Система загрузки обновлений
  27. 27. Система сбора статистики </li></li></ul><li>Как добиться максимальной степени кроссплатформанности<br />Проблема: у всех платформ разные API, требования к разметке и описанию приложения.<br />Задача: облегчить написание версий одного виджета для разных платформ<br />
  28. 28. Способ №1 <br />
  29. 29. Способ №2<br />
  30. 30. Статистика использования <br />Задача: собрать данные об использовании виджета. <br />Дополнительные требования: нужно уметь различать уникальных пользователей, иметь возможность отслеживать любые события в виджете. <br />
  31. 31. Мой вариант решения<br />
  32. 32. Посмотреть систему в действии можно здесь: http://widgetok.ru/wstat/view/wikiday/<br />
  33. 33. Загрузка обновлений<br /><ul><li>У виджета есть номер версии, и сам виджет его всегда знает.
  34. 34. На сервере лежит XML с описанием последней стабильной версии</li></li></ul><li><?xml version="1.0" encoding="utf-8" ?><update><br /><version>1.0</version><url>http://widgets.rbc.ru/files/windows/TNews.gadget</url></update><br />В XML хранится номер версии и ссылка для скачивания виджета.<br />
  35. 35.
  36. 36. Нужно ли вообще заморачиваться с обновлениями?<br />
  37. 37. Гаджеты Windows 7/Vista<br />
  38. 38. Почему о них стоит знать?<br />По данным LiveInternet<br />
  39. 39. Материалы для знакомства<br /><ul><li>находятся в Гугле по запросу «msdn gadget»
  40. 40. на русском: «Создание гаджетов для Windows sidebar» на сайте http://designformasters.info</li></li></ul><li>Что они из себя представляют<br /><ul><li>HTML документ, отображаемый движком от IE
  41. 41. Добавлено несколько дополнительных тегов разметки (g:background, g:image, g:text)
  42. 42. Разрешен JavaScript
  43. 43. Есть JS-API для работы с гаджетом и системой</li></li></ul><li>Верстка <br /><ul><li>Можно не думать о кроссбраузерности
  44. 44. Проверять - прямо в гаджете, или в IE</li></li></ul><li>Основная проблема с вёрсткой – прозрачный фон <br />g:background + PNG с прозрачностью => могут появиться розовые и чёрные области. Как этого избежать?<br />
  45. 45. Если гаджет имеет фиксированный размер<br />Прописать для элементов body и g:background в css-стилях нужную ширину и высоту.<br />Сделать картинку-фон для g:background точно таких же размеров.<br />Если не помогло и на фоне остались розовые пикселы, скорее всего они не полностью прозрачные<br />
  46. 46. Шапка<br />Если размер гаджета заранее не известен<br /> g:background.addImageObject()<br />Код можно посмотреть в гаджете РБК, скачав с http://w7.rbc.ru<br />Фон, N x 1px<br />Подвал<br />
  47. 47. Текст на прозрачном фоне – увы... :(<br />
  48. 48. JavaScript<br />Можно использовать JS-фреймворки, я пользуюсь JQueryи JQueryUI<br />
  49. 49. Особенности onсlick<br /><ul><li>Если навесить его на элемент, за этот элемент виджет нельзя будет перетаскивать мышью по экрану
  50. 50. Клики на прозрачных областях не обрабатываются.</li></li></ul><li>Устанавливать обработчик события можно только в виде<br />element.onclick=function(){…}<br />$(‘selector’).get(0).onclick= function(){…}<br />А вот <br />element.attachEvent(‘onclick’, function(){…})<br />$(‘selector’).click( function(){…})<br />не сработают.<br />
  51. 51. Хранение данных<br /><ul><li>Встроенный механизм - значения до 2048 символов
  52. 52. Если хочется больше и дольше - PersistentSettings.js</li></ul>http://blogs.msdn.com/sidebar/<br />
  53. 53. Доступ к системе<br />С помощью объекта ActiveX можно читать, писать, копировать файлы, смотреть содержимое директорий и т.д.<br />Также можно использовать VBSctipt.<br />
  54. 54. Безопасность<br /><ul><li>Гаджеты ближе к программам, чем к веб-страницам
  55. 55. Запускаются со стандартными правами пользователя
  56. 56. Если для выполнения операции гаджету требуются права администратора, операция не выполняется и не показывается диалоговое окно разрешения действия</li></li></ul><li>Спасибо за внимание<br />Вопросы?<br />Контакты<br />E-mail: belgleb@gmail.com<br />Блог: http://WidgetOK.ru<br />

×