Google Glass browser. Новый ориентир для веб-разработки.

Ребят, у Google Glass теперь есть веб-браузер! Это означает, что появился новый ориентир для веб-разработки и отзывчивого веб-дизайна. В этой статье пойдет речь о браузере Google Glass и его совместимости с HTML5.


Все устройства Google Glass Explorer Edition получили XE7 update, который включает в себя веб-браузер.Так что теперь можно добавлять Google Glass в список веб-экранов, таких как мониторы ПК, планшеты, смартфоны и смарт-телевизоры.

На данный момент единственным способом запустить браузер Google Glass, это с помощью своего голоса открыть приложение Search и задать поисковый запрос. Все происходит таким образом: «ok glass, google, и ваш запрос». Если в результате поиска нет ссылок на распространенные ресурсы (например, Wikipedia, погода и т.д), то Google покажет вам первые 7 результатов поиска, и, следовательно, дальше пользователь уже может браузерить эти веб-сайты. Вот как это выглядит:



Скорее всего, Mirror API будет обновлен таким образом, что бы позволить приглашать владельцев Google Glass заходить на веб-сайты из разных источников.
Не исключено, что в будущих обновлениях будут включены QR-код ридер и возможность создания закладок.
Веб-страницы загружаются в полноэкранном режиме. С помощью жестов можно прокрутить вниз и вверх содержимое веб-страницы.



Единственное взаимодействие с браузером — это клик. Чтобы кликнуть, нужно коснуться touch-панели двумя пальцами, после этого на экране фиксируется курсор. Удерживая пальцы на touch-панели и поворачивая голову, мы передвигаем курсор. А потом, воображая себя Циклопом из X-men’ов, мы как бы стреляем в нужное место.



Еще доступнен жест «уменьшение/увеличение масштаба» (если провести двумя пальцами вперед или назад). Для панорамирования мы повторяем движение головы из предыдущего абзаца.

И еще одно возможное действие «Go back».



Мобильный ли это браузер?
Если заходить на веб-сайты со смартфонов, то вы автоматически будете попадать на мобильную версию сайта(если он есть) для того, что бы было удобно читать новости, смотреть видео и т.д. Если ваш сайт оптимизирован для мобильных устройств, то он будет выглядеть должным образом и в Google Glass браузере.

В Гугл очках стоит не Google Chrome. Кажется этот браузер основан на браузере Android, но в нем есть некоторые кода из хрома. API саппорт состоит из Android Browser 4.x,
но также присутствуют обьекты window.chrome (как в Chromium).

В настоящее время user agent таков:
Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Glass 1 Build/IMM76L; XE7) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

Поддержка HTML5
Гугл Глас полностью поддерживает HTML, CSS и JavaScript, в том числе CSS анимацию. Также дожным образом поддерживается анимированные GIF, SVG и WebP.
Есть полная поддержка HTML5 видео и аудио. Мы можем зайти на YouTube и включить любое видео.



На данный момент взаимодействие с веб-сайтами с помощью Гугл Глас ограничено прокруткой и кликами, так что пока невозможно использовать регистрацию или поиск внутри сайта.
Говоря о формах, с которыми можно взаимодействовать, то это чекбоксы, радиокнопки и выпадающие меню.



Основные диалоговые окна JavaScript, такие как предупреждения или prompt запускают диалоговые окана Android.

HTML5Test.com поставила оценку браузеру Гугл Глас 287.
Для сравнения, у Android Browser- 298, а у Google Chrome- 410.



О производительности
Пока веб-страница не будет загружена полностью, она не будет показана. Производительность анимации и Canvas — на данный момент не из лучших. Аппаратное ускорение, кажется, отсутсвует, так как для Canvas Animation мы получаем всего 1 FPS.

Адаптивный веб дизайн
С точки зрения RWD и CSS, Glass Browser будет выступать в качестве:
  • настольного браузера (окно = 960px), если не предусмотрен viewport
или
  • как смартфон в горизонтальном положении, если используется viewport c мета-тегом width=device-width.

Вот значения viewport для мобильного:

• device-width: 640px
• device-height: 360px
• width: 427px
• height: 240px
• orientation: landscape
• webkit-device-pixel-ratio: 1.5

Хотя тут существует небольшая странность: размеры устройств выражаются в физических пикселях, а размеры окна — в пикселях CSS. Поэтому, чтобы поставить другой layout для Гугл Глас, мы можем использовать это:

@media screen and (width: 427px) {
/* Glass layout */
}


Абсолютная позиция работает должным образом, даже в движении и панорамировании головой.

JAVASCRIPT API
Немного о том чего нет: у Гугл Глас браузера нет Web Storage API и нет геолокации (API есть, но не работает). Отсутвуют API голоса и API камеры.

Хорошей новостью является то, что у устройства есть API движения, и мы можем получить данные из акселерометра и гироскопа. Это означает, что мы можем узнать, двигает ли пользователь головой или нет. С помощью этого API можно сделать что-то интересное. Например: автоматический scrolling или игра, в которой контроллером будет голова пользователя.

В общем, в веб-приложении можно будет использовать: клик, прокрутку, движение устройства и ориентацию устройства.

Это только начало. Мы еще не знаем, как Гугл Глас изменит (или нет) поведение пользователя, но всегда важно быть готовым ко всему. Это первая версия браузера, и я уверен, что на него будет еще много обновлений, прежде чем он выйдет на на широкий рынок потребления.
Но нам уже сейчас нужны эффективные способы загружать и управлять URL-адресами и взаимодействовать с веб-сайтами с помощью голоса. А что вы думаете по этому поводу?
Источник