ВВЕДЕНИЕ 4
1 АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ 7
1.1 Постановка задачи 8
1.2 Возможные варианты решения задачи 9
2 ПРОЕКТИРОВАНИЕ МОДУЛЯ РАСШИРЕНИЯ СИСТЕМЫ
ПРОТОТИПИРОВАНИЯ 11
2.1 Проектирование интерфейса пользователя 15
2.2 Проектирование структуры модуля 15
3 ОПИСАНИЕ РАЗРАБОТКИ МОДУЛЯ 17
3.1 Описание принципа работы модуля 19
3.2 Описание разработки основных функций 23
3.3 Описание разработки пользовательского интерфейса 24
4 РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ 27
5 Тестирование ПО 33
ЗАКЛЮЧЕНИЕ 38
СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ 39
Приложение А.1 Файл «Codejs» 40
Приложение А.2 Файл «uijs» 45
Приложение А.3 Файл «ui.html» 47
Приложение А.4 Файл «ui.css» 59
Приложение А.5 Файл «category_page_nav_func.php» 62
Приложение А.6 Файл «webpack.config.js» 63
В последние несколько лет ведущими программными продуктами в сфере разработки пользовательских интересов являются программы «Sketch» и «Figma» но их возможности не совершенны, но они имеют достаточно хороший набор API для восполнения этих пробелов. В данной работе будет разработан модуль который расширит возможности данных средств прототипирования и автоматизирует процесс оценки контрастности элементов веб-сайта.
Это важно поскольку на данный момент интернет становится доступным и всё больше людей с нарушением зрения пользуются им, к тому же огромное количество государственных сервисов смещает приоритет в пользу онлайн - оформления документов и составления заявок на различные услуги, поэтому в данном случае критически важно становится доступность подобных ресурсов людям с ограниченными возможностями. На ряду с такими людьми люди без отклонений так же должны с комфортом потреблять «контент» и пользоваться возможностями беспроводной сети, так как не правильный контраст способен нанести вред здоровью при длительном использовании среды с которой человек взаимодействует ежедневно, например в рамках трудового договора либо используя государственные порталы. Подобным сервисам необходимо соблюдать рекомендации описание в соответствующих рекомендациями.
Согласно ГОСТ Р 52872-2019 «Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме. Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности» требования контрастности к элементам веб-страниц и мобильных приложений должно быть 4,5:1 за исключением укрупнённой текстовой информации где допускается контрастность 3:1, что соответствует второму грейду (AA) от Web Content Accessibility Guidlines (WCAG — рекомендации по доступности веб контента), разрабатываемый модуль призван быстро давать оценку двум элементов, непосредственно в программной среде, тем самым ускоряя процесс разработки и демонстрации их контраста и оценки по системе WCAG, для понимания доступности и комфортности разрабатываемого интерфейса
В ходе выполнение работы был разработан и протестирован программный модуль расширения для программы Figma и Sketch, который способен рассчитывать относительную яркость двух выбранных объектов и на основе этих значений определять уровень контраста, а так же давать ему оценку на основе рекомендаций Web Content Accessibility Guidlines (WCAG — рекомендации по доступности вебконтента). При этом данный модуль прост в использовании и позволяет проверить уровень контраста непосредственно в среде разработки, не отвлекаясь от процесса прототипирования. Что особенно актуально в случае работы с объектами которые имеют показатель непрозрачности менее 100% и для подгонки таких объектов до контраста оптимального уровня необходимо несколько итераций.
Данный модуль поможет разработчикам проектировать интерфейсы с правильной контрастностью отвечающей ГОСТ Р 52872-2019 «Интернет- ресурсы и другая информация, представленная в электронно-цифровой форме. Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности », что позволит сделать разрабатываемый ресурс доступным для людей с ограниченными возможностями.
На ряду с широкими функциональными возможностями, данный модуль расширения имеет простой и интуитивно понятный интерфейс, который позволяет быстро адаптироваться разработчику и получать результаты расчётов в удобном и наглядном формате.
1. Макфарланд, Д. Большая книга CSS3. - Питер, 2014. - 608 с.
2. Флэнаган, Д. JavaScript: Карманный справочник. - Вильямс, 2014. - 320 с.
3. Хоган, Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. - Питер, 2014. - 320 с.
4. Contrast-ratio.com[Электронный ресурс] - Онлайн сервис проверки контраста. - Режим доступа:https://contrast-ratio.com/ (Дата обращения 15.05.2020)
5. Consultant.ru[Электронный ресурс] - Актуальная информация по ГОСТ Р 52872-2019 Режим доступа:http://www.consultant.ru (Дата обращения 15.05.2020)
6. Figma.com[Электронный ресурс] - Сервис по API Figma - Режим доступа:https://www.figma.com/plugin-docs(Дата обращения 15.05.2020)
7. Htmlbook.ru[Электронный ресурс] - Онлайн справочник языка HTML Режим доступа:http://htmlbook.ru (Дата обращения 15.05.2020)
8. W3.org[Электронный ресурс] - официальный сайт с рекомендациями «Web Content Accessibility Guidelines (WCAG)» - Режим доступа:https://www.w3.org/WAI/standards-guidelines/wcag/(Дата обращения 15.05.2020)
9. 9dots.ru[Электронный ресурс] - Математический справочник. - Режим доступа:https://9dots.ru(Дата обращения 15.05.2020)
10. McMillan, M. Data Structures and Algorithms with JavaScript» - O’reilly Media, 2014. - 252 c.