Сергей Беляев: Интернет-телевизор - самый...

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

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

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

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

Alex@jetstyle.ruwww.jetstyle.ru

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