Эта статья была рецензирована Агбонгхама Коллинз и Саймоном Кодрингтоном . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!
Дебютировав с новейшей линейкой высокопроизводительных телевизионных устройств Panasonic на CES в этом году, Firefox OS уже вышла на рынок Smart TV.
Ассортимент устройств Viera от Panasonic получил удивительно положительные отзывы. В связи с тем, что в этом году Firefox OS принимает новую стратегию, возможно, настало время еще раз вернуться к среде Firefox OS.
SitePoint опубликовал много статей о Firefox OS , но для этой статьи давайте сосредоточимся на том, как Firefox OS будет работать с телевизорами. Я расскажу, как лучше настроить вашу среду и руководство по стилю операционной системы телевизора.
Вещи, чтобы иметь в виду
Разработка приложений для телевизоров с операционной системой Firefox OS аналогична аналогичным разработкам для мобильных устройств, но при разработке специально для телевизионных устройств необходимо помнить о некоторых различиях:
- Механизмы ввода / управления. Приложения для Firefox OS на телевизоре будут использоваться с помощью пульта дистанционного управления телевизора, а не клавиатуры, мыши или сенсорного экрана. Это самое важное, что нужно иметь в виду.
- Разрешение : вам придется работать с разрешениями Full HD (1920 × 1080) или Ultra HD (4K). Соотношение пикселей устройства на телевизорах отличается от большинства мобильных устройств.
Подготовка вашей среды
Примечание . Обычная процедура сборки Gaia не работает в стандартной среде Windows. Пользователи Windows должны использовать инструмент Foxbox , который собирает Gaia внутри виртуальной машины.
Вам нужны три основных компонента для создания среды разработки:
- Настольный симулятор: загрузите и установите последнюю версию Nightly Desktop Simulator (она же B2G Desktop) или создайте ее самостоятельно . Получите тот, который подходит для вашей системы с b2g- в начале имени файла.
- Firefox Nightly / Developer Edition: вам нужно установить Firefox Nightly или Firefox Developer Edition .
- Локально доступный форк репозитория Gaia : Вы можете установить это:
- Форкинг основного репозитория Gaia на GitHub .
- Клонируйте свою форк локально,
git clone https://github.com/your-username/gaia.git - Добавьте обратный поток в GitHub,
git remote add upstream https://github.com/mozilla-b2g/gaia
Найдите больше информации о том, как запустить свою собственную сборку Gaia в Mozilla Developer Network.
Примечание. Формирование репозитория Gaia и настройка апстрима необязательны, но это хорошая практика, если вы хотите внести свой вклад в проект.
Чтобы создать специальный профиль Gaia для ТВ, запустите следующую команду внутри вашей папки репо:
make GAIA_DEVICE_TYPE=tv DEVICE_DEBUG=1
При внесении изменений вы можете обновить приложение (или окно браузера), чтобы увидеть результат. Восстановление профиля и повторное его добавление на устройство не требуется. Этот метод идеально подходит для быстрого взлома CSS / JS / HTML.
Запуск симулятора
Запустите Firefox Desktop Simulator, установив заданный размер экрана, удаленный сервер отладки и путь к профилю:
path/to/b2g-bin -screen 1600x900 -start-debugger-server 6000 -profile /path/to/gaia/profile
Примечания
- Указание разрешения, превышающего разрешение экрана вашего ПК, приведет к неправильной работе системного приложения.
- b2gbin находится внутри пакета
b2g - Точный путь к нужному профилю отображается при создании вашего профиля (запустив команду
make
Теперь вы готовы создавать свои первые приложения для Firefox OS на ТВ. Я рекомендую вам прочитать руководство Hello World от Mozilla, чтобы начать.
Понимание UX
Mozilla провела обширное пользовательское тестирование и исследование телевизионной версии своей операционной системы. Каждый ключевой аспект пользовательского интерфейса и UX в Firefox OS документирован в руководствах по стилю Mozilla, включая статью о MDN .
Философия дизайна Firefox OS для ТВ основана и похожа на элементы Материального дизайна Google. Операционная система телевизора использует метафору карты, где каждая карта представляет точку входа в контент или услугу. Карты выровнены в одном файле, как показано в этом макете:
Эти «базовые» карты называются «колодами карт», поскольку они служат агрегаторами для других подпунктов. Например, колода ТВ-карт может включать более 200 карт, которые являются телевизионными каналами. Анимации текучие и естественные, заимствуя элементы реальной жизни, как в Material Design. Руководство по стилю подчеркивает, что тонкость является ключевой.
… Его следует использовать как акцент в дизайне взаимодействия, помогая пользователю оставаться сосредоточенным, а не доминировать над опытом.
Главное меню — это то, с чего все начинается. Пользователи получают к нему доступ, нажимая кнопку « Домой» на пульте дистанционного управления. Он предлагает большие возможности настройки, чтобы удовлетворить предпочтения пользователя.
Панель инструментов служит основным концентратором для ОС, предоставляя единую область, в которой пользователи могут видеть полезную информацию. Он входит в качестве одной из карт по умолчанию на главной странице.
Панель управления перемещается с помощью направляющей панели пульта.
- Справа: уведомления
- Слева: предстоящие телешоу
- Up: Воспроизведение музыки и управление
- Вниз: мировое время
Наконец, есть карты приложений и устройств . Они хранятся аналогично Android (App Drawer) и могут быть закреплены на главном экране, если пользователь этого захочет.
Ресурсы
Если вы хотите углубиться в руководство по стилю Firefox OS TV, не смотрите дальше, чем на Mozilla Developer Network .
Я рекомендую ознакомиться с макетом телевизора , дизайном иконок , строительными блоками , дизайном интерфейса и анимации и руководствами по настройке анимации .
Для обзора текущих доступных устройств Firefox OS (включая телевизоры), посетите веб-сайт Firefox OS Devices . Он поддерживается Сореном Хенцшелем , волонтером Mozilla, и широко используется в Mozilla.
Смотря лис?
Уже выпущено 5 высококлассных телевизоров, обнадеживает партнерство Panasonic с Mozilla. Firefox OS не впечатлила так сильно, как я надеялся, поэтому видение такой крупной компании, как Panasonic, инвестирующей в Firefox OS, определенно полезно для операционной системы Mozilla.
Экосистема все еще находится на ранних стадиях, но может быть выгодно быть одним из первых пользователей, которые будут разрабатывать для телевизоров с Firefox OS. Давайте посмотрим, что Firefox OS на ТВ может предложить в 2016 году. Что бы вы хотели увидеть?