Это неделя Интернета вещей в SitePoint! Всю неделю мы публикуем статьи, ориентированные на пересечение интернета и физического мира, поэтому следите за последними обновлениями в теге IoT .
Всемирная паутина постоянно развивалась и трансформировалась на протяжении всей своей 27-летней истории. То, как мы отображаем и стилизуем контент, за это время проходило через различные фазы, самой последней из которых стало появление отзывчивого веба — единого веба, который адаптируется к различным браузерам и размерам устройств. Когда дело доходит до сети с постоянно растущим количеством устройств «Интернета вещей» (IoT), таких как Raspberry Pis, умные часы, персональные помощники, которые работают исключительно с помощью голоса, и многое другое — потенциал отзывчивой сети возрастает быть проверенным
IoT означает еще более разнообразные устройства, которые могут попытаться загрузить контент из Интернета. Мы должны обеспечить, чтобы сеть оставалась максимально доступной и доступной для этих устройств, если мы хотим избежать еще одной большой сегментации, как в ранних битвах между мобильными и настольными системами. Последнее, что нам нужно, — это один веб-сайт, разработанный для Интернета вещей, и один — для мобильных и настольных сетей.
Какие устройства IoT могут отображать Интернет?
Многие разработчики не совсем осознают потенциально большое количество устройств, которые, вероятно, попытаются отобразить веб-контент людям в будущем.
Вычислительные устройства с небольшими дисплеями
Такие устройства, как Raspberry Pis с крошечными экранами от 2,4 ″ и выше, имеют подключения Wi-Fi, Ethernet и даже 3G / 4G, что дает им большой потенциал для отображения веб-контента. Это содержимое может быть в форме веб-страниц из всемирной сети или в форме локальных веб-страниц для руководств по встроенным устройствам, веб-страниц управления устройствами и локальных веб-страниц в виде панели инструментов.
Smartwatches
Android-браузер appfour для Android Wear
Умные часы могут иметь даже меньшие дисплеи с целым диапазоном различных цветовых диапазонов и разрешений экрана. В то время как у Apple Watch пока нет веб-браузера, в Android есть веб-браузер для Android Wear от Appfour, и есть все шансы, что со временем появятся новые веб-браузеры smartwatch (если кто-то взломает, как разработать приложение в способ, которым легко использовать!). По крайней мере, если Интернет должен быть действительно отзывчивым и доступным везде, мы должны быть готовы к такой возможности. Что произойдет, если в будущем кто-то читает электронную почту в своих умных часах и щелкает веб-ссылку? Простой клиент веб-браузера на мощных умных часах не слишком надуман.
Личные помощники по голосу
Амазонское эхо (Источник изображения: Amazon )
Одним из новых направлений в области вычислительной техники является интеллектуальный голосовой помощник, такой как Apple Siri, Amazon Echo Alexa, Google Now и Microsoft Cortana. Роль этих помощников в доме будет включать и выключать свет, устанавливать сигнализацию, регулировать температуру термостата и так далее. Эти службы также отвечают на голосовые команды и вопросы с помощью данных, которые они получают из разных мест в Интернете — обычно это включает в себя сопоставление баз данных каждой компании с информацией, которую она может получить о человеке, использующем сам сервис. Для тех, кто интересуется этой областью, я рассказал о том, как начать создавать собственных простых помощников по искусственному интеллекту здесь, в SitePoint, в прошлом, включая статью « Пять простых способов создания искусственного интеллекта в 2016 году» и серию статей « Как создать свой собственный». Собственный AI Assistant Использование Api.ai.
Со временем, с улучшениями в области искусственного интеллекта и машинного обучения, эти помощники могут просто искать информацию в Интернете и читать ее нам.
Чтобы сделать это возможным, сеть должна быть доступна для ботов, которые планируют считывать информацию, а не отображать ее визуально. В идеале, веб-страницы уже должны быть структурированы, чтобы соответствовать требованиям для программ чтения с экрана, однако принятие доступной разметки сегодня часто становится запоздалым. Появление услуг личного помощника ИИ может помочь изменить это.
Совершенно новые дисплеи
Компьютерные дисплеи будущего, когда дело доходит до Интернета вещей, могут включать в себя целый ряд новых и довольно фантастических возможностей. Подумайте об устройствах, таких как умные зеркала, умные окна, умные автомобильные приборные панели — это будет происходить случайно в течение всей нашей жизни, но насколько хорошо на них будет отображаться веб? Возникает целый ряд новых дизайнерских решений — для отображения контента в зеркале / окне вам может понадобиться больше контраста между цветами. Зеркальные / оконные дисплеи могут иметь ограниченную цветовую гамму, которую веб-разработчики должны будут учитывать? Это будет совершенно новый (и захватывающий) мир.
Прототип приборной панели Mercedes Benz (Изображение предоставлено Mercedes Benz )
Будущая проверка нашего CSS и разметки
Есть несколько ключевых областей, на которые, я думаю, веб-разработчики должны обратить пристальное внимание в будущем, если мы хотим иметь сеть, которая прекрасно работает с новыми технологиями.
Действительно Отзывчивый CSS
Веб-страницы должны будут адаптироваться и быть относительно читаемыми на крошечных дисплеях. Обнаружение невероятно малых разрешений экрана, вероятно, будет ключевым моментом с точки зрения CSS. Будет ли CSS подход к маленькому дисплею похож на мобильный сайт? Или нам нужно будет создать новые правила и стандарты, которые помогут отображать текст более крупным шрифтом? Новые стандарты реструктуризации макета для маленьких экранов с использованием таких технологий, как flexbox? Новые стандарты оформления меню на крошечном дисплее? Только время покажет, но некоторые избранные веб-разработчики, вероятно, в конечном итоге станут пионерами этих усилий, и будет интересно посмотреть, что придумает сообщество.
Элемент <picture>
Элемент picture позволяет указать несколько изображений для отображения в зависимости от разрешения и типа устройства. Окончательная версия этой спецификации будет иметь ключевое значение для обеспечения бесперебойной работы сети при загрузке страниц на устройствах с низким энергопотреблением при более медленных соединениях и на устройствах с очень маленьким разрешением, которые могут не справиться с отображением больших изображений.
Надежность JavaScript опасна
При взгляде на устройства с низким энергопотреблением и устройства персонального помощника, которые будут считывать содержимое веб-страницы, они могут не обязательно работать с JavaScript или иметь возможность обрабатывать его в той же степени, что и смартфон или настольный планшет. Если ваш веб-сайт использует JavaScript для извлечения данных без каких-либо ошибок, новые устройства IoT могут столкнуться с трудностями при доступе к нему. Обеспечение работы интернета без JavaScript все еще стоит усилий!
WAI-ARIA и другие методы доступности
Уже существующие методы, позволяющие сделать Интернет доступным для людей с ограниченными возможностями, также сделают Интернет доступным для искусственного интеллекта, личных помощников и других голосовых технологий. Создание веб-сайтов с WAI-ARIA и другими методами обеспечения доступности с самого начала сегодня может помочь уменьшить объем переделок в будущем. Это также невероятно полезно для людей с ограниченными возможностями сегодня и, тем не менее, является хорошей практикой. Мы рассмотрели это более подробно в разделе Как эффективно использовать ARIA в HTML5 и избежать избыточности с помощью WAI-ARIA на страницах HTML .
Выбор цвета и дизайна
Зеркальные и оконные дисплеи, вероятно, нуждаются в высокой контрастности между цветами в вашем дизайне, чтобы обеспечить его четкость на фоне более разнообразного фона ванной комнаты, неба или другой комнаты… и т. Д.
Такие дисплеи, как интеллектуальные зеркала, могут отображать содержимое, аналогичное «высококонтрастному режиму» в современных операционных системах, режиме, который инвертирует цвета экрана и повышает контрастность. Для отображения на таком другом стиле отображения умные зеркала, возможно, должны принять подобную технику. Если ваш веб-дизайн хорошо отображается в режиме высокой контрастности и имеет сильный контраст между цветами в вашей теме, это не должно быть проблемой.
Впечатление моего художника о высокой контрастности SitePoint на концептуальном зеркале Макса Брауна
DOM Сложность
В то время как настольные ПК и умные часы способны обрабатывать сложные структуры DOM с множеством вложенных элементов и переходов CSS, вполне вероятно, что устройства IoT и носимые устройства будут бороться с ними. Поддержание чистой структуры с вашими DOM-элементами может быть важнее, чем когда-либо, для производительности на новых устройствах.
Тестирование будет жестким
Уже довольно сложно протестировать ваш веб-сайт на различных смартфонах, планшетах, смарт-телевизорах и настольных ОС — по мере того, как Интернет вещей и другие технологические достижения продолжаются (виртуальная и дополненная реальность тоже идут!), Он будет становиться все более и более популярным. Трудно тщательно протестировать абсолютно все. Принятие веб-стандартов, стандартов доступности и упомянутых выше идей должно помочь сделать веб-дизайн максимально доступным.
Уровень предвидения станет необходимым навыком для профессиональных веб-разработчиков в ближайшее десятилетие, поскольку им необходимо будет представить, как веб-дизайн будет настраиваться и отображаться на ряде устройств без физического доступа для тестирования каждого из них. Надеемся, что эмуляторы и автоматизированные тесты тоже немного помогут.
Вездесущий API
Адаптивная сеть не будет единственным источником информации в Интернете для Интернета вещей. У отзывчивой сети будет такой же важный компаньон, о котором я уже говорил, — Вездесущий API . Это будет серверным эквивалентом для Интернета, который должен обеспечить быструю итерацию и адаптацию для появляющейся технологии в областях, где сами веб-браузеры не могут достичь. Вездесущий API — это тот, который обеспечивает доступ к функциональности и данным из приложения / службы независимо от платформы. Отсутствие вездесущих API в сочетании с отзывчивым вебом, который не может адаптироваться достаточно быстро, приведет к огромной сегментации с каждым новым элементом появляющейся технологии.
Важно, чтобы оба сосуществовали. Наша адаптивная сеть должна быть наполнена контентом вездесущих API, которые затем можно адаптировать для работы по всему спектру технологий. На устройствах без веб-браузера должны быть приложения, которые заполняют свой контент из вездесущего API. Как только устройство получит доступ к веб-браузеру, этот контент также должен быть доступен через адаптивную сеть. Для получения дополнительной информации о вездесущих API прочитайте мою статью «Эра вездесущего API» .
Вывод
Методы фронтальной разработки в сети не нуждаются в адаптации таким образом, чтобы соответствовать Интернету вещей и другим изменениям в технологии. Тем не менее, я считаю, что если они этого не сделают, сеть будет сегментирована на что-то, что используется только на настольных компьютерах, а иногда и на мобильных устройствах, так же, как истинный потенциал отзывчивого Интернета был ограничен распространенностью мобильных приложений. Если Интернет не адаптируется, мы можем вместо этого рассматривать сегментацию как носимые приложения, приложения IoT, приложения Alexa и т. Д., Которые становятся их собственными хранилищами, а не разделяют общую экосистему Интернета.
Что вы думаете о будущем фронт-энда и интернета перед лицом новых технологий, таких как Интернет вещей? Дайте мне знать в комментариях ниже или свяжитесь со мной в Твиттере по адресу @thatpatrickguy .