1. Интернет вещей. Индустриальный интернет вещей. Кибербезопасность.

2. Особенности HTML5 и CSS2. Возможности элемента canvas.

◀️ Реферат к вопросам экзамена по дисциплине Интернет-технологии 1 курса магистратуры ▶️

Выполнили: Салип Даниил ИДМ-22-03 (ИГ), Заливалов Алексей ИДМ-22-05, Шарипков Леонид ИДМ-22-07, Салимов Фирдавс ИДМ-22-06, Асманкин Сергей ИДМ-22-02, Беркаль Виктор ИДМ-22-04

Взгляд на технологии Интернета вещей и преимущества их применения в промышленности (Индустриальный Интернет вещей). Использование индустриального Интернета вещей подразумевает создание комплексного решения, объединяющего информационные процессы с производственными. Это достаточно новая задача для многих компаний, и при ее решении необходимо учитывать многие факторы, включая отраслевые стандарты и процессы, технологическую безопасность и нормативно-регулятивную базу.

Интернет Вещей (IoT, Internet of Things) – система объединенных компьютерных сетей и подключенных физических объектов (вещей) со встроенными датчиками и ПО для сбора и обмена данными, с возможностью удаленного контроля и управления в автоматизированном режиме, без участия человека.

Индустриальный (часто Промышленный) Интернет Вещей (Industrial Internet of Things, IIoT) – интернет вещей для корпоративного / отраслевого применения - система объединенных компьютерных сетей и подключенных промышленных (производственных) объектов со встроенными датчиками и ПО для сбора и обмена данными, с возможностью удаленного контроля и управления в автоматизированном режиме, без участия человека.

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

Собранная информация впоследствии позволяет компании приобрести объективные и точные данные о состоянии предприятия. Обработанные данные доставляются во все отделы предприятия, что помогает наладить взаимодействие между сотрудниками разных подразделений и принимать обоснованные решения.

Помимо этого, компании могут заменить быстро устаревающую бумажную документацию, а также аккумулировать экспертные знания специалистов.

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

При обработке огромного массива неструктурированных данных их фильтрация и адекватная интерпретация является приоритетной задачей для предприятий. В данном контексте особую значимость приобретает корректное представление информации в понятном пользователю виде, для чего сегодня на рынке представлены передовые аналитические платформы, предназначенные для сбора, хранения и анализа данных о технологических процессах и событиях в реальном времени.

Согласно исследованию консалтинговой компании IDC, в 2011 году человечеством было сгенерировано 1,8 зеттабайт информации. В 2012 году объем ценных данных увеличился почти в два раза и составил 2,8 зеттабайт. К 2020 году эта цифра достигнет 40 зеттабайт. Такие большие объемы данных требуют обработки для того, чтобы быть использованными в процессе принятия решений.

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

Благодаря таким решениям производственные данные превращаются в полезную информацию, которая необходима для безопасного и рационального управления предприятием.

Внедрение таких технологий дает возможность предприятиям из разных отраслей экономики получить определенные преимущества: увеличить эффективность использования производственных активов на 10% за счет сокращения количества незапланированных простоев; снизить затраты на техническое обслуживание на 10%, усовершенствовав процедуры прогнозирования и предотвращения катастрофических отказов оборудования и выявляя неэффективные операции; повысить производительность на 10%, увеличить уровень энергоэффективности и сократить эксплуатационные расходы на 10% за счет более эффективного использования энергии.

Индустриальный интернет вещей кардинально изменяет всю экономическую модель взаимодействия «поставщик – потребитель». Это позволяет:

• автоматизировать процесс мониторинга и управления жизненным циклом оборудования;
• организовать эффективные самооптимизирующиеся цепочки от предприятий – поставщиков до компаний – конечных потребителей;
• перейти к моделям «экономики совместного использования» и многое другое.

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

Таким образом, новые технологии позволяют предприятиям разных отраслей промышленности добиться существенных конкурентных преимуществ.

Безопасность интернета вещей подразумевает защиту интернет-устройств и сетей, к которым они подключены, от онлайн-угроз и взломов. Это достигается путем выявления, мониторинга и устранения потенциальных уязвимостей безопасности на устройствах. Таким образом, безопасность интернета вещей – это набор технологий, обеспечивающий безопасность систем интернета вещей.

Ниже перечислены основные проблемы безопасности интернета вещей.

1. Отсутствие тестирования и разработки

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

2. Взлом методом подбора в результате использования установленных по умолчанию паролей

Многие устройства интернета вещей поставляются с установленными по умолчанию ненадежными паролями, а приобретающие их пользователи часто не осознают, что могут (и должны) поменять такие пароли. Ненадежные пароли и входные учетные данные делают устройства интернета вещей уязвимыми для взлома методом подбора пароля.

3. Вредоносные программы и программы-вымогатели для устройств интернета вещей

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

4. Проблемы конфиденциальности данных

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

5. Расширенные кибератаки

Зараженные устройства интернета вещей могут использоваться для DDoS-атак (распределенных атак типа «отказ в обслуживании»), когда взломанные устройства используются с целью заражения большего количества машин или сокрытия вредоносной активности. DDoS-атакам на устройства интернета вещей подвержены, в основном, компании, однако они также могут быть направлены на умные дома.

6. Незащищенные интерфейсы

Общие проблемы незащищенных интерфейсов, присущие устройствам интернета вещей, включают слабое шифрование или его отсутствие, а также недостаточную проверку подлинности данных.

7. Переход на удаленную работу

В период пандемии Covid-19 во всем мире наблюдался переход на удаленную работу. Устройства интернета вещей позволили многим пользователям работать из дома, однако уровень безопасности домашних сетей гораздо ниже, чем корпоративных. При этом рост использования устройств интернета вещей показал уязвимости в их безопасности.

8. Сложные среды

Исследования показывают, что в 2020 году среднестатистическая семья в США имела доступ к 10 подключаемым устройствам. Достаточно неправильно настроить всего лишь один параметр безопасности на одном из устройств, и вся домашняя сеть окажется в опасности.

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

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

• Соответствие нормативным требованиям. Компании в определенных отраслях и регионах должны соблюдать нормативные требования для защиты конфиденциальных данных от возможных киберрисков. Например, компании, осуществляющие свою деятельность в Европе, должны соблюдать Общий регламент по защите данных (GDPR), который требует от организаций принятия надлежащих мер по кибербезопасности для обеспечения конфиденциальности данных.

• Устранение новых киберугроз. Кибератаки эволюционируют по мере развития технологий. Злоумышленники используют новые инструменты и изобретают новые стратегии для получения несанкционированного доступа к системам. Организации принимают и улучшают меры по кибербезопасности, чтобы соответствовать новым и развивающимся технологиям и инструментам для цифровых атак.

Это стандарт HTML5, документ, лежащий на сайте W3C, в котором описаны все новые теги, атрибуты, новые API, и ряд сопутствующих документов, в которые вынесены некоторые дополнительные детали, вроде API для Canvas.

• Он более простой, более простая структура элементов на странице, что упрощает создание и отладку кода.

• Он предоставляет стандартные элементы для медиа объектов, которые ранее требовали установки отдельных плагинов, которые приходилось постоянно обновлять.

• В нем есть своя интеграция с интерфейсами, которые могут понадобиться в современных приложениях. Как пример можно привести геолокацию, которая позволяет браузеру определить местоположение пользователю (его координаты). Ранее это можно было сделать только через GPS.

Для разработчиков html5 помогает писать понятный семантический код. Позволяет управлять многими процессами на странице своими стандартными методами, без использования javascript или сторонних плагинов и сервисов. Это означает, что решаются некоторые проблемы кроссбраузерности, поскольку браузеры одинаково реализуют новые возможности.

Также html5 делает удобной работу в сети и для обычных пользователей. Например, увеличивается скорость работы, использование браузера становится более удобным. Для того, чтобы смотреть ролики из youtube не нужно устанавливать дополнительные плагины и постоянно обновлять их.

Кратко цели html5 можно назвать так:

1. Ликвидация плагинов, таких как Flash, для общих функций, которые необходимы каждому. Построить собственную поддержку для таких вещей, как аудио, видео и т.д.

2. Снижение потребности в JavaScript и дополнительном коде, благодаря использованию новых html5 элементов.

3. Обеспечение согласованности между браузерами и устройствами.

4. Сделать все это настолько прозрачным, насколько это возможно.

Новых функциональных возможностей в html5 очень много. Сегодня даже самые последние версии современных браузеров поддерживают полностью все функции html5. Поэтому в данной статье мы рассмотрим лишь основные возможности html5.

Новые элементы html5 Новые элементы html5 позволяют быстрее создавать разметку для страницы, она становиться проще, более понятна и упрощается процесс отладки. Вот некоторые новые теги:

и используются для создания верхней части сайта (шапки), где обычно группа вводных или навигационных средств, и нижней части сайта (подвал), где обычно размещают ссылки на другие материалы ресурса, дублируют меню, располагают иконки соцсетей, форму подписки. для любых видов меню для сайдбаров или связного контента для статей практически то же, что и div

и теги позволяют проигрывать видео без плагинов

для рисование на странице использую javascript

для вставки внешнего контента на страницу

Наряду с тем, что появились новые теги часть существующих тегов в HTML5 приобретает новое значение. Так, если раньше выбор между i и em (аналогично b и strong) был чаще в пользу более короткого написания, то сегодня это теги с различной смысловой нагрузкой, даже если по умолчанию они имеют одинаковое представление курсивом или жирным начертанием.

Другая часть нововведений касается непосредственно вопросов доступности: здесь, прежде всего, речь идет об aria- и role-атрибутах, позволяющих разметить предназначение и роли контента. Эта информация впоследствии, к примеру, может использоваться программами для чтения с экрана (screen reader).

Надо сказать, что обеспечение доступности не самая тривиальная задача, и в HTML5 чуть ли не впервые уделено столь большое внимание этому вопросу.

Еще одним преимуществом html5 является наличие в нем продвинутых функций, включая интеграцию API. Это упрощает написание кроссбраузерного кода на javascript для сложных приложений. Вот некоторые из них:

• Audio and video позволяет проигрывать видео в браузере без плагинов.

• Geolocation: определяет положение посетителя.

• Drag and drop: например, для загрузки файла перетаскиванием его в браузер.

• Application cache: обеспечивает поддержку открытия сайтов offline.

• Web workers: запускает JavaScript в фоновом режиме

• Server sent events: позволяет серверам обновлять веб-страницы в браузере после того, как они уже были загружены, проще и эффективнее, чем AJAX и JavaScript.

• Offline data storage: позволяет хранить данные локально в браузере, независимо от cookies

CSS Cascading Style Sheets «каскадные таблицы стилей» — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML). CSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS является ограждение и отделение описания логической структуры веб-страницы от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). CSS — одна из широкого спектра технологий, одобренных консорциумом W3C и получивших общее название «стандарты Web». В 1990-х годах стала ясна необходимость стандартизировать Web, создать какие-то единые правила, по которым программисты и веб-дизайнеры проектировали бы сайты. В связи с данной стандартизацией принято разделять CSS на так называемые уровни, в каждом из которых добавляются новые возможности: CSS1, CSS2, CSS3, CSS4.

Рекомендация W3C, принята 12 мая 1998 года. Основана на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:

• Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
• Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).
• Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
• Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
• Расширенный механизм селекторов.
• Указатели.
• Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.

Преимущества:

• Несколько дизайнов страницы для разных устройств просмотра. Например, на экране дизайн будет рассчитан на большую ширину, во время печати меню не будет выводиться, а на КПК и сотовом телефоне меню будет следовать за содержимым.
• Уменьшение времени загрузки страниц сайта за счёт переноса правил представления данных в отдельный CSS-файл. В этом случае браузер загружает только структуру документа и данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может быть закэшировано
• Простота последующего изменения дизайна. Не нужно править каждую страницу, а достаточно лишь изменить CSS-файл.
• Дополнительные возможности оформления. Например, с помощью CSS-вёрстки можно сделать блок текста, который остальной текст будет обтекать (например для меню) или сделать так, чтобы меню было всегда видно при прокрутке страницы.

Недостатки:

• Различное отображение вёрстки в различных браузерах (особенно устаревших), которые по-разному интерпретируют одни и те же данные CSS.
• Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML, которые сложным и ненаглядным способом связаны с селекторами CSS, что иногда сводит на нет простоту применения единых файлов стилей и значительно увеличивает время редактирования и тестирования.

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

Canvas позволяет разместить на холсте: картинку, видео, текст. Залить всё это сплошным цветом, либо обвести контуры или даже добавить градиент и тени. И, наконец, отрисовка фигур с помощью указания контрольных точек. Причём можно изменять как ширину линий, так и кисть рисовки линий, стиль соединений линий.

Особенности использования Canvas:

• Изменение высоты или ширины холста сотрет всё его содержимое и все настройки, проще говоря он создастся заново;
• Начало отсчёта (точка 0,0) находится в левом верхнем углу. Но её можно сдвигать;
• 3D-контекста нет, есть отдельные разработки, но они не стандартизованы;
• Цвет текста можно указывать аналогично CSS, впрочем, как и размер шрифта.

Размещается на HTML – странице с помощью парного тега canvas. Включенным в страницу элементом canvas можно как угодно манипулировать, используя JavaScript. В него можно добавлять графику, линии и текст, вы можете сами рисовать на нем и даже добавлять в него полноценную анимацию.В случае, если к веб - странице, содержащей холст, обратились посредством браузера, не поддерживающего данный элемент, пользователь увидит содержимое, размещенное в рамках парного тега . Такое содержимое называется альтернативным, или аварийным. Как и в случае большинства элементов HTML, для добавления рамок, пробелов, полей и т.п. в элемент canvas можно использовать CSS-стили. Кроме того, некоторые атрибуты CSS наследуются содержимым canvas. Хорошим примером этого могут служить шрифты, поскольку по умолчанию к шрифтам, рисуемым на холсте, применяются настройки, используемые для самого элемента canvas.

Использование Canvas с продвинутыми фреймворками, такими как React, Vue и Angular, может упростить работу с графикой и анимацией в веб-приложениях. Эти фреймворки предоставляют высокоуровневые инструменты для создания интерактивных интерфейсов, которые могут быть использованы вместе с Canvas.

Например, в React можно использовать компонент Canvas для рисования графики и анимаций. Этот компонент может быть использован вместе с другими компонентами React и управляться с помощью состояния и свойств.

Во Vue также можно использовать компонент Canvas для рисования графики и анимаций. Этот компонент может быть использован вместе с другими компонентами Vue и управляться с помощью данных и методов.

В Angular также можно использовать компонент Canvas для рисования графики и анимаций. Этот компонент может быть использован вместе с другими компонентами Angular и управляться с помощью свойств и методов.

Однако, стоит помнить, что при использовании Canvas с этими фреймворками вам все равно может понадобиться написать некоторый низкоуровневый код для работы с Canvas. Эти фреймворки предоставляют высокоуровневые инструменты, но не заменяют сам Canvas.

Также стоит помнить, что некоторые продвинутые фреймворки, такие как React и Angular, также имеют собственные графические библиотеки, такие как React-Three-Fiber и Angular-Flex-Layout, которые могут быть более удобными для работы с 3D-графикой и анимацией. Так что стоит рассмотреть все варианты.

Некоторые другие продвинутые фреймворки, которые также могут быть использованы с Canvas, такие как D3.js, PixiJS и Three.js. Эти фреймворки специализируются на работе с графикой и анимацией, и могут быть полезными для создания сложных визуализаций и интерактивных приложений.

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

Преимущества использования Canvas:

• В отличие от SVG гораздо удобнее иметь дело с большим числом элементов;
• Имеет аппаратное ускорение;
• Можно манипулировать каждым пикселем;
• Можно применять фильтры обработки изображений;
• Есть много библиотек.

• Низкая производительность при отрисовке большого количества элементов. Это может стать проблемой, если вы пытаетесь создать большую и сложную анимацию или игру.

• Отсутствие стандартных элементов управления. В Canvas нет стандартных элементов управления, таких как кнопки, списки и т. д. Вам нужно будет самостоятельно рисовать их и обрабатывать события мыши и клавиатуры.

• Отсутствие поддержки стилей и шаблонов. В Canvas нет таких вещей, как CSS-стили и шаблоны, которые можно использовать для управления внешним видом элементов. Все стили и шаблоны должны быть написаны вручную.

• Отсутствие поддержки сенсорных устройств. Canvas не имеет встроенной поддержки сенсорных устройств, таких как тачскрины и стилусы.

• Сложность обработки текста. Canvas не имеет встроенной поддержки текста, поэтому вам нужно будет рисовать текст вручную, используя функции рисования. Это может быть сложно и трудоемко, особенно если вы хотите реализовать сложные эффекты текста, такие как обтекание или многоуровневое выравнивание

ИСТОЧНИКИ

• 📃 Индустриальный IOT
• 💬 Что такое кибербезопасность?
• 📃 CSS
• 📃 Canvas (HTML)
• 🎦 Интервью с экспертом

ИСТОЧНИКИ

1. 📑 Учебный материал (лекция, практикум...) или стандарт
2. 📃 Научно-популярная или техническая статья (Википедия...)
3. 🎦 Видео-ролик
4. 💻 Веб-приложение
5. 💬 Чье-то мнение (хабр...)