Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc

Интернет-телевизор − самый недооцененный

сегмент разработки

Сергей Беляев

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


• 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


• 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


• Webkit• Css3, html5, canvas


• Webkit• Css3, html5, canvas• 1280x720


• Webkit• Css3, html5, canvas• 1280x720• Дебаг

Быстродействие


• Медленные движки рендера


• Медленные движки рендера• Кол-во элементов в DOM


• Медленные движки рендера• Кол-во элементов в DOM• Железо тоже виновато!


• Медленные движки рендера• Кол-во элементов в DOM• Железо тоже виновато!• Соблюдаем рекомендации

Быстродействие. Samsung

• XmlHttpRequest


•XmlHttpRequest

if (this.XHRObj != null)this.XHRObj.destroy();this.XHRObj = new XMLHttpRequest();


• innerHTML


•innerHTML

putInnerHtml( “<h1>Текст</h1>” , document.getElementById(“title”)

);


• img


•img

Плохой пример:function test() { var a = new Image(); document.getElementById("foo").appendChild(a);}


•img

Хороший пример:function test() { var a = document.createElement("img"); document.getElementById("foo").appendChild(a);}


• removeChild


•removeChild

Плохой пример:element.removeChild(element.firstChild);


•removeChild

Хороший пример:var a = element.removeChild(element.firstChild);


•removeChild

Еще лучше:element.deleteChild(element.firstChild);

Быстродействие. LG

• Не увлекаться Opacity


• Не увлекаться Opacity• w3c валидация


• Не увлекаться Opacity• w3c валидация• Разбиение функционала на небольшие

блоки



блоки• Изображения < HD



блоки• Изображения < HD• Указываем размеры изображений

Хранение данных

Samsung 2010

var fileSystemObj = new FileSystem();

Samsung 2010


var fileObj = fileSystemObj.openCommonFile(

curWidget.id + ‘/testFile.data’, ‘w ’

);

Samsung 2010


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тебя ждет!

[email protected]

Если ты команда, то тоже не стесняйся!

mailto:[email protected]

mailto:[email protected]

http://www.jetstyle.ru/

Technology

Сергей Беляев: Интернет-телевизор - самый недооцененный сегмент разработки #uwdc