Сергей Беляев: Интернет-телевизор - самый...
TRANSCRIPT
Интернет-телевизор − самый недооцененный
сегмент разработки
Сергей Беляев
Smart tv
• Что это?
Smart tv
• Что это?• Разработка
Smart tv
• Что это?• Разработка• Перспективы
Smart tv – это
• Интернет в телевизоре
Smart tv – это
• Интернет в телевизоре• Интерактивные сервисы
Smart tv – это
• Интернет в телевизоре• Интерактивные сервисы• Операционная система
Плюшки
Плюшки
• Информационные сервисы• Социальные сети• Видео• Игры
Плюшки
• Информационные сервисы• Социальные сети• Видео• Игры• Магазины
История развития
2010 год
• Большая цена
2010 год
• Большая цена• Мало виджетов
2010 год
• Большая цена• Мало виджетов• Медленное железо
2011 год
• Доля 10%
2011 год
• Доля 10%• Сторонние разработчики
2011 год
• Доля 10%• Сторонние разработчики• Видео-сервисы
2012 год
• Операторы связи
2012 год
• Операторы связи• Новые пульты
2012 год
• Операторы связи• Новые пульты• Быстрое железо
2012 год
• Операторы связи• Новые пульты• Быстрое железо• 3d
Сейчас
• LG – 35%• Samsung – 60%
Сейчас
• LG – 35%• Samsung – 60%• Yandex.Market – 50%
Всё как в мобилках
• Приложения вместо браузера
Всё как в мобилках
• Приложения вместо браузера• Удобство
Ложка дегтя
• Чо за штука?• Цена• Сдержанный интерес
Платформы
1616++
Платформы
Samsung Smart Hub
Платформы
Samsung Smart Hub
LG NetCast Platform
Платформы
Samsung Smart Hub
LG NetCast Platform
Opera TV
Платформы
Samsung Smart Hub
LG NetCast Platform
Opera TV
Google TV
Платформы
Samsung Smart Hub
LG NetCast Platform
Opera TV
Google TV
Microsoft Mediaroom
Платформы
Samsung Smart Hub
LG NetCast Platform
Opera TV
Google TV
Microsoft Mediaroom
STB
Smart tv в РоссииSmart tv в России
Билайн
• Microsoft Mediaroom• Платный каталог видео• Twitter• Погода, пробки, котировки Яндекса• Rutube
Ростелеком
• zabava.ru• музыка, книги по подписке• платные фильмы
МТС
• Погода, пробки, котировки Яндекса
• Видео по запросу• Omlet.ru
Дом.ru
• Погода, пробки, котировки Яндекса
• Новости компании и Яндекса• ivi, tvigle, zoomby, rutube• ivi musik• Vkontakte, instagram• Тв-маркет• Личный кабинет
LG
• LG Apps TV• 11 VoD провайдеров• Встроенный браузер• Регулярные обновления• Кросс-контроль приложений
Samsung
• Smart Hub• Сотни приложений• Встроенный браузер• Камера• Расширенное управление
Разработка
• Нет мышки
Разработка
• Нет мышки• Нет тача
Разработка
• Нет мышки• Нет тача• Нет клавиатуры
Разработка
• Нет мышки• Нет тача• Нет клавиатуры• Нет монитора перед глазами
Разработка
Что же делать?Что же делать?
Мышь
Нет курсора
Мышь
Нет курсораНо есть кнопка «ок» и четырехпозиционный джойстик.
Мышь
Нет курсораНо есть кнопка «ок» и четырехпозиционный джойстик.
Клавиатура
• Экранная клавиатура• Кастомизация• Внешняя клавиатура
Монитор
• Диагональ
Монитор
• Диагональ• Безопасная зона
Монитор
•Диагональ•Безопасная зона• Размеры шрифтов
Монитор
• Диагональ• Безопасная зона
•Размеры шрифтов
Монитор
• Диагональ• Безопасная зона
•Размеры шрифтов• П
Активные зоны Активные зоны Активные зоны
Активные зоны Активные зоны Активные зоны
Верстка
Верстка
• Минимальная вложенность тегов
Верстка
• Минимальная вложенность тегов• Позиционирование элементов
Верстка
• Минимальная вложенность тегов• Позиционирование элементов• Javascript
Верстка
• Минимальная вложенность тегов• Позиционирование элементов• Javascript• Баланс
Версионность ПО
2010-2011гг. Samsung
• Maple
2010-2011гг. Samsung
• Maple– HTML4.01, XHTML1.0, XML1.0 Markup
language specifications– HTTP1.0/1.1– CSS1, CSS2, CSS TV Profile 1.0– DOM1, DOM2– JavaScript 1.6
2010-2011гг. Samsung
• Maple– HTML4.01, XHTML1.0, XML1.0 Markup
language specifications– HTTP1.0/1.1– CSS1, CSS2, CSS TV Profile 1.0– DOM1, DOM2– JavaScript 1.6
• 960x540
2011-2012гг. LG/Samsung
• Webkit
2011-2012гг. LG/Samsung
• Webkit• Css3, html5, canvas
2011-2012гг. LG/Samsung
• Webkit• Css3, html5, canvas• 1280x720
2011-2012гг. LG/Samsung
• Webkit• Css3, html5, canvas• 1280x720• Дебаг
Быстродействие
Быстродействие
• Медленные движки рендера
Быстродействие
• Медленные движки рендера• Кол-во элементов в DOM
Быстродействие
• Медленные движки рендера• Кол-во элементов в DOM• Железо тоже виновато!
Быстродействие
• Медленные движки рендера• Кол-во элементов в DOM• Железо тоже виновато!• Соблюдаем рекомендации
Быстродействие. Samsung
• XmlHttpRequest
Быстродействие. Samsung
•XmlHttpRequest
if (this.XHRObj != null)this.XHRObj.destroy();this.XHRObj = new XMLHttpRequest();
Быстродействие. Samsung
• innerHTML
Быстродействие. Samsung
•innerHTML
putInnerHtml( “<h1>Текст</h1>” , document.getElementById(“title”)
);
Быстродействие. Samsung
• img
Быстродействие. Samsung
•img
Плохой пример:function test() { var a = new Image(); document.getElementById("foo").appendChild(a);}
Быстродействие. Samsung
•img
Хороший пример:function test() { var a = document.createElement("img"); document.getElementById("foo").appendChild(a);}
Быстродействие. Samsung
• removeChild
Быстродействие. Samsung
•removeChild
Плохой пример:element.removeChild(element.firstChild);
Быстродействие. Samsung
•removeChild
Хороший пример:var a = element.removeChild(element.firstChild);
Быстродействие. Samsung
•removeChild
Еще лучше:element.deleteChild(element.firstChild);
Быстродействие. LG
• Не увлекаться Opacity
Быстродействие. LG
• Не увлекаться Opacity• w3c валидация
Быстродействие. LG
• Не увлекаться Opacity• w3c валидация• Разбиение функционала на небольшие
блоки
Быстродействие. LG
• Не увлекаться Opacity• w3c валидация• Разбиение функционала на небольшие
блоки• Изображения < HD
Быстродействие. LG
• Не увлекаться Opacity• w3c валидация• Разбиение функционала на небольшие
блоки• Изображения < HD• Указываем размеры изображений
Хранение данных
Samsung 2010
var fileSystemObj = new FileSystem();
Samsung 2010
var fileSystemObj = new FileSystem();
var fileObj = fileSystemObj.openCommonFile(
curWidget.id + ‘/testFile.data’, ‘w ’
);
Samsung 2010
var fileSystemObj = new FileSystem();
var fileObj = fileSystemObj.openCommonFile(
curWidget.id + ‘/testFile.data’, ‘w ’
);
fileObj.writeLine(‘текст для записи’);
fileSystemObj.closeCommonFile(fileObj);
• Cookie
Samsung 2011-2012, LG
• Cookie• LocalStorage
Samsung 2011-2012, LG
Экранная клавиатура
STB
• Нативная
STB
• Нативная• Вызывается на input или textarea
STB
• Нативная• Вызывается на input или textarea• Особенности
STB
Samsung
Samsung
Samsung
• Нативная• Программный вызов• Разные типы ввода• Позиция на экране• Не можем менять дизайн
LG
LG
• Отдельная js-библиотека• Изменение дизайна• Нельзя менять js-клавиатуры• Один вид
Дебаг
Дом.ru
• Нет дебага
Дом.ru
• Нет дебага• Opera Emulator
Дом.ru
• Нет дебага• Opera Emulator• Придумали свой дебаг
Samsung
Встроенный в SDKВывод всех системных сообщенийВывод собственных данныхВсе версии платформ
LG
Аналогично samsungВывод сообщений через console.logРесурс монитор с 2012 годаГолосовые команды с 2013 года
Авторизация
Нет возможности авторизоваться в iframe
Политика безопасности
Вариант авторизации на примере facebook
Авторизация
- Регистрация приложения- Получаем пин-код на приставке- Вводим пин-код на странице
http://facebook.com/devicehttp://facebook.com/device
- Подтверждаем доступ к своим данным- Запрос на получение токена на приставке
- Пользуемся API
Авторизация
Аналогичная авторизация на GoogleОбратный способ авторизации на Instagram
Тестирование на ТВ
Samsung- Создание пакета в SDK- Заливаем пакет в корень сервера- На телевизоре выкачиваем пакет- Дебаг в SDK
Тестирование на ТВ
LG- Регистрируемся LG Apps TV- Создаем пакет в SDK- Заливаем пакет на developer - Скачиваем DRM пакет- Распаковываем, достаем папку с ID- Размещаем на флешку в lgapps/installed- Флешку в телевизор- Региональные настройки- В My Apps ищем наше приложение
Перспективы
Тренд: Камера в телевизоре
Круто
Круто
• Не нужен компьютер
Круто
• Не нужен компьютер• Легкость доступа
Круто
• Не нужен компьютер• Легкость доступа• Экран
Круто
• Не нужен компьютер• Легкость доступа• Экран• Обзор
Круто
• Не нужен компьютер• Легкость доступа• Экран• Обзор• Расширение аудитории
Плохо
Плохо
• Оборудование
Плохо
• Оборудование• С двух сторон
Плохо
• Оборудование• С двух сторон• Паранойя
Плохо
• Оборудование• С двух сторон• Паранойя• Посторонние люди
Новые средства ввода
Samsung
Samsung
• Тач пад
Samsung
• Тач пад• qwerty
Samsung
• Тач пад• qwerty• Большая
Samsung
Samsung
Samsung smart tv remote
Second screen
Second screen
• Управление• Информация• Интерактив• Бездонные глубины контекстной
рекламы (тм)
Second screen. Проблемы
• Контент• Платформы
Всё!
Нет, не всё!
Интерактивный и видео-дизайн
Front-end-умелец приходи!
Много интересной работы!
JetStyleтебя ждет!
Если ты команда, то тоже не стесняйся!