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

2. Smart tv
• Что это?

3. Smart tv
• Что это?
• Разработка

4. Smart tv
• Что это?
• Разработка
• Перспективы

5. Smart tv – это
• Интернет в телевизоре

6. Smart tv – это
• Интернет в телевизоре
• Интерактивные сервисы

7. Smart tv – это
• Интернет в телевизоре
• Интерактивные сервисы
• Операционная система

8. Плюшки

9. Плюшки
• Информационные сервисы
• Социальные сети
• Видео
• Игры

10. Плюшки
• Информационные сервисы
• Социальные сети
• Видео
• Игры
• Магазины

11. История развития

12. 2010 год
• Большая цена

13. 2010 год
• Большая цена
• Мало виджетов

14. 2010 год
• Большая цена
• Мало виджетов
• Медленное железо

15. 2011 год
• Доля 10%

16. 2011 год
• Доля 10%
• Сторонние разработчики

17. 2011 год
• Доля 10%
• Сторонние разработчики
• Видео-сервисы

18. 2012 год
• Операторы связи

19. 2012 год
• Операторы связи
• Новые пульты

20. 2012 год
• Операторы связи
• Новые пульты
• Быстрое железо

21. 2012 год
• Операторы связи
• Новые пульты
• Быстрое железо
• 3d

22. Сейчас
• LG – 35%
• Samsung – 60%

23. Сейчас
• LG – 35%
• Samsung – 60%
• Yandex.Market – 50%

24. Всё как в мобилках
• Приложения вместо браузера

25. Всё как в мобилках
• Приложения вместо браузера
• Удобство

26. Ложка дегтя
• Чо за штука?
• Цена
• Сдержанный интерес

27. Платформы
16+

28. Платформы
Samsung Smart Hub

29. Платформы
Samsung Smart Hub
LG NetCast Platform

30. Платформы
Samsung Smart Hub
LG NetCast Platform
Opera TV

31. Платформы
Samsung Smart Hub
LG NetCast Platform
Opera TV
Google TV

32. Платформы
Samsung Smart Hub
LG NetCast Platform
Opera TV
Google TV
Microsoft Mediaroom

33. Платформы
Samsung Smart Hub
LG NetCast Platform
Opera TV
Google TV STB
Microsoft Mediaroom

34. Smart tv в России

35. Билайн
• Microsoft Mediaroom
• Платный каталог видео
• Twitter
• Погода, пробки, котировки Яндекса
• Rutube

36. Ростелеком
• zabava.ru
• музыка, книги по подписке
• платные фильмы

37. МТС
• Погода, пробки, котировки Яндекса
• Видео по запросу
• Omlet.ru

38. Дом.ru
• Погода, пробки, котировки Яндекса
• Новости компании и Яндекса
• ivi, tvigle, zoomby, rutube
• ivi musik
• Vkontakte, instagram
• Тв-маркет
• Личный кабинет

39. LG
• LG Apps TV
• 11 VoD провайдеров
• Встроенный браузер
• Регулярные обновления
• Кросс-контроль приложений

40. Samsung
• Smart Hub
• Сотни приложений
• Встроенный браузер
• Камера
• Расширенное управление

41. Разработка

42. Разработка
• Нет мышки

43. Разработка
• Нет мышки
• Нет тача

44. Разработка
• Нет мышки
• Нет тача
• Нет клавиатуры

45. Разработка
• Нет мышки
• Нет тача
• Нет клавиатуры
• Нет монитора перед глазами

46. Что же делать?

47. Мышь
Нет курсора

48. Мышь
Нет курсора
Но есть кнопка «ок» и
четырехпозиционный джойстик.

49. Мышь
Нет курсора
Но есть кнопка «ок» и
четырехпозиционный джойстик.

50. Клавиатура
• Экранная клавиатура
• Кастомизация
• Внешняя клавиатура

51. Монитор
• Диагональ

52. Монитор
• Диагональ
• Безопасная зона

53. Монитор
• Диагональ
• Безопасная зона
• Размеры шрифтов

54. Монитор
• Диагональ
• Безопасная зона
• Размеры шрифтов

55. Монитор
• Диагональ
• Безопасная зона
• Размеры шрифтов
• П
Активные зоны Активные зоны Акти
Активные зоны Активные зоны Акти

56. Верстка

57. Верстка
• Минимальная вложенность тегов

58. Верстка
• Минимальная вложенность тегов
• Позиционирование элементов

59. Верстка
• Минимальная вложенность тегов
• Позиционирование элементов
• Javascript

60. Верстка
• Минимальная вложенность тегов
• Позиционирование элементов
• Javascript
• Баланс

61. Версионность ПО

62. 2010-2011гг. Samsung
• Maple

63. 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

64. 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

65. 2011-2012гг. LG/Samsung
• Webkit

66. 2011-2012гг. LG/Samsung
• Webkit
• Css3, html5, canvas

67. 2011-2012гг. LG/Samsung
• Webkit
• Css3, html5, canvas
• 1280x720

68. 2011-2012гг. LG/Samsung
• Webkit
• Css3, html5, canvas
• 1280x720
• Дебаг

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

70. Быстродействие
• Медленные движки рендера

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

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

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

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

75. Быстродействие. Samsung
•XmlHttpRequest
if (this.XHRObj != null)
this.XHRObj.destroy();
this.XHRObj = new XMLHttpRequest();

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

77. Быстродействие. Samsung
•innerHTML
putInnerHtml(
“<h1>Текст</h1>” , document.getElementById(“title”)
);

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

79. Быстродействие. Samsung
•img
Плохой пример:
function test() {
var a = new Image();
document.getElementById("foo").appendChild(a);
}

80. Быстродействие. Samsung
•img
Хороший пример:
function test() {
var a = document.createElement("img");
document.getElementById("foo").appendChild(a);
}

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

82. Быстродействие. Samsung
•removeChild
Плохой пример:
element.removeChild(element.firstChild);

83. Быстродействие. Samsung
•removeChild
Хороший пример:
var a = element.removeChild(element.firstChild);

84. Быстродействие. Samsung
• removeChild
Еще лучше:
element.deleteChild(element.firstChild);

85. Быстродействие. LG
• Не увлекаться Opacity

86. Быстродействие. LG
• Не увлекаться Opacity
• w3c валидация

87. Быстродействие. LG
• Не увлекаться Opacity
• w3c валидация
• Разбиение функционала на небольшие блоки

88. Быстродействие. LG
• Не увлекаться Opacity
• w3c валидация
• Разбиение функционала на небольшие блоки
• Изображения < HD

89. Быстродействие. LG
• Не увлекаться Opacity
• w3c валидация
• Разбиение функционала на небольшие блоки
• Изображения < HD
• Указываем размеры изображений

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

91. Samsung 2010
var fileSystemObj = new FileSystem();

92. Samsung 2010
var fileSystemObj = new FileSystem();
var fileObj = fileSystemObj.openCommonFile(
curWidget.id + ‘/testFile.data’, ‘w’
);

93. Samsung 2010
var fileSystemObj = new FileSystem();
var fileObj = fileSystemObj.openCommonFile(
curWidget.id + ‘/testFile.data’, ‘w’
);
fileObj.writeLine(‘текст для записи’);
fileSystemObj.closeCommonFile(fileObj);

94. Samsung 2011-2012, LG
• Cookie

95. Samsung 2011-2012, LG
• Cookie
• LocalStorage

96. Экранная клавиатура

97. STB

98. STB
• Нативная

99. STB
• Нативная
• Вызывается на input или textarea

100. STB
• Нативная
• Вызывается на input или textarea
• Особенности

101. Samsung

102. Samsung

103. Samsung
• Нативная
• Программный вызов
• Разные типы ввода
• Позиция на экране
• Не можем менять дизайн

104. LG

105. LG
• Отдельная js-библиотека
• Изменение дизайна
• Нельзя менять js-клавиатуры
• Один вид

106. Дебаг

107. Дом.ru
• Нет дебага

108. Дом.ru
• Нет дебага
• Opera Emulator

109. Дом.ru
• Нет дебага
• Opera Emulator
• Придумали свой дебаг

110. Samsung
Встроенный в SDK
Вывод всех системных сообщений
Вывод собственных данных
Все версии платформ

111. LG
Аналогично samsung
Вывод сообщений через console.log
Ресурс монитор с 2012 года
Голосовые команды с 2013 года

112. Авторизация
Нет возможности авторизоваться в iframe
Политика безопасности
Вариант авторизации на примере facebook

113. Авторизация
- Регистрация приложения
- Получаем пин-код на приставке
- Вводим пин-код на странице
http://facebook.com/device
- Подтверждаем доступ к своим данным
- Запрос на получение токена на приставке
- Пользуемся API

114. Авторизация
Аналогичная авторизация на Google
Обратный способ авторизации на Instagram

115. Тестирование на ТВ
Samsung
- Создание пакета в SDK
- Заливаем пакет в корень сервера
- На телевизоре выкачиваем пакет
- Дебаг в SDK

116. Тестирование на ТВ
LG
- Регистрируемся LG Apps TV
- Создаем пакет в SDK
- Заливаем пакет на developer
- Скачиваем DRM пакет
- Распаковываем, достаем папку с ID
- Размещаем на флешку в lgapps/installed
- Флешку в телевизор
- Региональные настройки
- В My Apps ищем наше приложение

117. Перспективы

118. Тренд: Камера в телевизоре

119. Круто

120. Круто
• Не нужен компьютер

121. Круто
• Не нужен компьютер
• Легкость доступа

122. Круто
• Не нужен компьютер
• Легкость доступа
• Экран

123. Круто
• Не нужен компьютер
• Легкость доступа
• Экран
• Обзор

124. Круто
• Не нужен компьютер
• Легкость доступа
• Экран
• Обзор
• Расширение аудитории

125. Плохо

126. Плохо
• Оборудование

127. Плохо
• Оборудование
• С двух сторон

128. Плохо
• Оборудование
• С двух сторон
• Паранойя

129. Плохо
• Оборудование
• С двух сторон
• Паранойя
• Посторонние люди

130. Новые средства ввода

131. Samsung

132. Samsung
• Тач пад

133. Samsung
• Тач пад
• qwerty

134. Samsung
• Тач пад
• qwerty
• Большая

135. Samsung

136. Samsung

137. Samsung smart tv remote

138. Second screen

139. Second screen
• Управление
• Информация
• Интерактив
• Бездонные глубины контекстной
рекламы (тм)

140. Second screen. Проблемы
Всё!
• Контент
• Платформы

141. Нет, не всё!
Front-end-умелец
приходи!
Много интересной
работы!
Интерактивный и видео-дизайн
JetStyle
тебя ждет!
Alex@jetstyle.ru
www.jetstyle.ru
Если ты команда, то
тоже не стесняйся!