белогорцев глеб белогорцев
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,821 views

 

Statistics

Views

Total Views
2,821
Views on SlideShare
1,206
Embed Views
1,615

Actions

Likes
3
Downloads
31
Comments
1

13 Embeds 1,615

http://widgetok.ru 1278
http://feeds2.feedburner.com 110
http://profyclub.ru 86
http://ritconf.ru 84
http://www.ritconf.ru 17
http://new.profyclub.ru 15
http://xss.yandex.net 10
http://profyclub.ontico.ru 7
http://feeds.feedburner.com 2
http://feeds.feedburner.com 2
http://hghltd.yandex.net 2
http://ritconf.ontico.ru 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Виджеты: интернет-проект за пределами сайта
    Глеб Белогорцев (РБК)
  • Введение
    Виджет - это небольшой, лёгкий в установке и использовании программный модуль, требующий для своей работы некоторой среды (т.н. «движка», widget engine) и исполняющий, как правило, одну определённую функцию.
  • В чем прелесть виджетов
    Для пользователей:
    • Новые возможности
    • Украшение рабочего стола и сайта
    Для владельцев интернет-проектов:
    • Распространение влияния за пределы сайта
    • Новые посетители, повышение лояльности старых
  • Обзор платформ для виджетов
  • Виджеты для веба
  • ВКонтакте
    Технологии:Flash.
    Популярность: у самого популярного более 8 млн. участников, меньше года назад было 3 млн.
  • МойМир@Mail.Ru
    Технологии: Flash, iframe (HTML, JS, Silverlight ит.д.)
    Популярность: У самого популярного приложения 3 с лишним млн. пользователей.
  • LiveJournal
    Технологии: HTML, Flash, не разрешён JavaScript
  • Стартовые страницы
  • iGoogle
    Технологии: XML, JavaScript. Есть поддержка OpenSocial.
  • Мой Rambler (Netvibes)
    Технологии: XHTML, JavaScript, используется движок http://netvibes.com
    Open source: http://netvibes.org
  • Виджеты Яндекса
    Технологии: XHTML, JavaScript
  • Виджеты для рабочего стола
  • Yahoo! Widgets
    Самый популярный русский виджет, который я нашёл, имеет 31 000 загрузок.
  • Гаджеты Windows 7/Vista
    Благодаря распространенности ОС, имеют большие перспективы.
    Наиболее популярный русский гаджет имеет 1 млн. загрузок
  • Примеры:
  • Виджеты Opera
    У самого популярного русского, который я нашёл, 2700 загрузок за последнюю неделю
  • Для мобильных телефонов
    Samsung – уже можно разрабатывать.
    LG – есть SDK и эмулятор, но устанавливать в телефон ещё нельзя.
    Своя технология есть у Nokia.
  • Для телевизоров
    Yahoo! Widgets под конец подались в ТВ.
    Телевизоры с виджетами делают Sony, Samsung и Panasonic.
  • Особенности проектирования и разработки виджетов
  • Основные составные части
    • Серверная
    • Функциональное «ядро»
    • Хранилище данных виджета
    • Система загрузки обновлений
    • Система сбора статистики
  • Как добиться максимальной степени кроссплатформанности
    Проблема: у всех платформ разные API, требования к разметке и описанию приложения.
    Задача: облегчить написание версий одного виджета для разных платформ
  • Способ №1
  • Способ №2
  • Статистика использования
    Задача: собрать данные об использовании виджета.
    Дополнительные требования: нужно уметь различать уникальных пользователей, иметь возможность отслеживать любые события в виджете.
  • Мой вариант решения
  • Посмотреть систему в действии можно здесь: http://widgetok.ru/wstat/view/wikiday/
  • Загрузка обновлений
    • У виджета есть номер версии, и сам виджет его всегда знает.
    • На сервере лежит XML с описанием последней стабильной версии
  • <?xml version="1.0" encoding="utf-8" ?><update>
    <version>1.0</version><url>http://widgets.rbc.ru/files/windows/TNews.gadget</url></update>
    В XML хранится номер версии и ссылка для скачивания виджета.
  • Нужно ли вообще заморачиваться с обновлениями?
  • Гаджеты Windows 7/Vista
  • Почему о них стоит знать?
    По данным LiveInternet
  • Материалы для знакомства
    • находятся в Гугле по запросу «msdn gadget»
    • на русском: «Создание гаджетов для Windows sidebar» на сайте http://designformasters.info
  • Что они из себя представляют
    • HTML документ, отображаемый движком от IE
    • Добавлено несколько дополнительных тегов разметки (g:background, g:image, g:text)
    • Разрешен JavaScript
    • Есть JS-API для работы с гаджетом и системой
  • Верстка
    • Можно не думать о кроссбраузерности
    • Проверять - прямо в гаджете, или в IE
  • Основная проблема с вёрсткой – прозрачный фон
    g:background + PNG с прозрачностью => могут появиться розовые и чёрные области. Как этого избежать?
  • Если гаджет имеет фиксированный размер
    Прописать для элементов body и g:background в css-стилях нужную ширину и высоту.
    Сделать картинку-фон для g:background точно таких же размеров.
    Если не помогло и на фоне остались розовые пикселы, скорее всего они не полностью прозрачные
  • Шапка
    Если размер гаджета заранее не известен
    g:background.addImageObject()
    Код можно посмотреть в гаджете РБК, скачав с http://w7.rbc.ru
    Фон, N x 1px
    Подвал
  • Текст на прозрачном фоне – увы... :(
  • JavaScript
    Можно использовать JS-фреймворки, я пользуюсь JQueryи JQueryUI
  • Особенности onсlick
    • Если навесить его на элемент, за этот элемент виджет нельзя будет перетаскивать мышью по экрану
    • Клики на прозрачных областях не обрабатываются.
  • Устанавливать обработчик события можно только в виде
    element.onclick=function(){…}
    $(‘selector’).get(0).onclick= function(){…}
    А вот
    element.attachEvent(‘onclick’, function(){…})
    $(‘selector’).click( function(){…})
    не сработают.
  • Хранение данных
    • Встроенный механизм - значения до 2048 символов
    • Если хочется больше и дольше - PersistentSettings.js
    http://blogs.msdn.com/sidebar/
  • Доступ к системе
    С помощью объекта ActiveX можно читать, писать, копировать файлы, смотреть содержимое директорий и т.д.
    Также можно использовать VBSctipt.
  • Безопасность
    • Гаджеты ближе к программам, чем к веб-страницам
    • Запускаются со стандартными правами пользователя
    • Если для выполнения операции гаджету требуются права администратора, операция не выполняется и не показывается диалоговое окно разрешения действия
  • Спасибо за внимание
    Вопросы?
    Контакты
    E-mail: belgleb@gmail.com
    Блог: http://WidgetOK.ru