Информация о документе

Цена 40000UZS
Размер 367.9KB
Покупки 0
Дата загрузки 31 Октябрь 2026
Расширение docx
Раздел Курсовые работы
Предмет Информатика и ИТ

Продавец

DocX Seller

Дата регистрации 31 Октябрь 2026

0 Продаж

Анализ пользовательского интерфейса сотрудника и внедрение на официальном сайте КФУ

Купить
МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ «КАЗАНСКИЙ (ПРИВОЛЖСКИЙ) ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ» ИНСТИТУТ ВЫЧИСЛИТЕЛЬНОЙ МАТЕМАТИКИ И ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ КАФЕДРА ИНФОРМАЦИОННЫХ СИСТЕМ Направление: 09.03.02 Информационные системы и технологии Профиль: Информационные системы в образовании ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА АНАЛИЗ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА СОТРУДНИКА И ВНЕДРЕНИЕ НА ОФИЦИАЛЬНОМ САЙТЕ КФУ Студент 4 курса группы 09-561 "___"_________ 2019 г. Научный руководитель к.п.н., доцент "___"_________ 2019 г. Заведующий кафедрой ________________ (А.А. Коробов) _________________ (Д.К. Галиуллин) канд. физ.-мат. наук, доцент "___"_________ 2019 г. _________________ (Ф.М. Гафаров) Казань – 2019 Содержание Введение ............................................................................................................... 3 1. Понятие, виды и методы разработки пользовательского интерфейса .......... 5 1.1 Понятие интерфейса пользователя и его типы .......................................... 5 1.2 Методы и средства разработки пользовательского интерфейса............. 17 2. Анализ пользовательского интерфейса сотрудника и внедрение обновленного интерфейса на официальный сайт КФУ ................................... 26 2.1 Анализ имеющегося пользовательского интерфейса сотрудника и выявление основных недостатков .................................................................. 26 2.2 Модификация пользовательского интерфейса сотрудника и характеристика проектных решений.............................................................. 27 2.3 Внедрение обновленного интерфейса сотрудника на официальный сайт КФУ.................................................................................................................. 41 Заключение ......................................................................................................... 45 Список использованной литературы................................................................. 47 Приложение………………………………………………………………………482 Введение В наше время при разработке программного продукта очень важна скорость обработки информации, доступность, хранение и передача. Однако, не малую роль играет создание пользовательского интерфейса, так как именно он определяет, насколько легко и удобно будет пользоваться программой. Пользовательский интерфейс представляет собой совокупность используемых в программе средств ввода данных, способов отображения информации и элементов управления. Эффективность работы программного продукта определяется не только его функциональными возможностями, но и доступностью этих возможностей. Поэтому создание интуитивно-понятного дружественного интерфейса является важной задачей при разработке программного продукта. Актуальность данной темы состоит в том, что именно интерфейс видит пользователь и именно по интерфейсу, он оцениваетвесь продукт. Целью данной работы является обновление пользовател ьского интерфейса сотрудника на официальном сайте КФУ, а также наглядно представления о том, что такое пользовательский интерфейс. Данная информационная система должна существенно упростить работу сотрудника. Объектом работы являются информационные технологии, а предметом – пользовательский интерфейс сотрудника на официальном сайте КФУ. В ходе работы решаются следующие задачи: 1.Раскрытие понятия «пользовательского интерфейса», его виды, типы, методы и средства разработки пользовательского интерфейса; 2.Изучение и анализ пользовательского интерфейса сотрудника на официальном сайте КФУ; 3.Внедрение обновленного интерфейса сотрудника. 3 В процессе работы были использованы метод научного анализа и синтеза. Работа состоит из введения, двух глав, заключения, списка использованной литературы. 4 1. Понятие, виды и методы разработки пользовательского интерфейса 1.1 Понятие интерфейса пользователя и его типы С каждым годом информационные технологии играют все большую роль в жизни людей. Все предприятия, образовательные и государственные учреждения, имеют свою собственную систему, несущую в себе весь объем информации для поддержки прямой деятельности данной организации. Для того чтобы облегчить и ускорить работу людей, данные системы и приложения должны быть построены на одинаковых принципах, а также иметь удобный, доступный и простой в использовании интерфейс. Интерфейс – совокупность технических, программных и методических (протоколов, правил, соглашений) средств сопряжения в вычислительной системе пользователей с устройствами и программами, а также устройств с другими устройствами и программами. В информационных технологиях конечного пользователя важное значение имеет пользовательский интерфейс. Пользовательский интерфейс – это совокупность программных и аппаратных средств, обеспечивающих взаимодействие пользователя с компьютером. Основу такого взаимодействия составляют диалоги. Под диалогом в данном случае понимают регламентированный обмен информацией между человеком и компьютером, осуществляемый в реальном масштабе времени и направленный на совместное решение конкретной задачи. Каждый диалог состоит из отдельных процессов ввода/вывода, которые физически обеспечивают связь пользователя и компьютера. Обмен информацией осуществляется передачей сообщения. В основном пользователь генерирует сообщения следующих типов: 5 Запрос информации. Запрос помощи. Запрос операции или функции. Ввод или изменение информации. В ответ пользовате ль получает подсказки или справки; информационные сообщения, требующие ответа; приказы, требующие действия; сообщения об ошибках и другую информацию. Пользова тельский интерфейс реализует работу человека на персональном компьютере посредством элементов взаимодействия. Элемент с взаимодействия — это элемен т пользова тельског интерф ейса, помо щью которого пользователь непоср едстве взаимодействует с программой или вычислительной системой. Различают активные и пассивные элементы взаимодействия. Пассивный элемент взаимодействия — это элемент пользовательского интерфейса, через который пользователь не имеет прямого доступа к системным или программным ресурсам, т.е. не может управлять или изменять эти ресурсы напрямую и непосредственно. К пассивным элементам взаимодействия относятся информационн ые сообщения, подсказки, справочные системы и т.д. Активный элемент взаимодействия - это элемент пользовательского интерфейса, через который пользователь имеет прямой доступ к системным и программным ресурсам с возможностью непосредственного управления и изменения их. К активным элементам взаимодействия относятся команды управления системными настройками и программными ресурсами, средства конфигурации системы, команды работы с файловыми системами. Интерфейс пользователя компьютерного приложения включает: 6 Средства отображения информации, отображаемую информацию, форматы и коды. Командные режимы, язык «пользователь – интерфейс». Устройства и технологии ввода данных. Диалоги, взаимодействие и транзакции между пользователем и компьютером, обратную связь с пользователем. Поддержку принятия решений в конкретной предметной области. Порядок использования программы и документацию на нее. Пользовательский интерфейс часто понимают только как внешний вид программы. Однако на деле пользователь воспринимает через него всю программу в целом, а значит, такое понимание является слишком узким. В действительности пользовательский интерфейс объединяет в себе все элементы и компоненты программы, которые способны оказывать влияние на взаимодействие пользователя с программным обеспечением. Это не только экран, который видит пользователь. К этим элементам относятся: Набор задач пользователя, которые он решает при помощи системы. Используемая системой метафора (например, рабочий стол в MS Windows). Элементы управления системой. Навигация между блоками системы. Визуальный (и не только) дизайн экранов программы. Средства отображения информации, отображаемая информация и форматы. Устройства и технологии ввода данных. Диалоги, взаимодействие и транзакции между пользователем и компьютером. Обратная связь с пользователем. 7 Поддержка принятия решений в конкретной предметной области. Порядок использования программы и документация на нее. Интерфейсы пользователя бывают двух типов: 1. Процедурно-ориентированные: Примитивные. Меню. Со свободной навигацией. 2. Объектно-ориентированные: Прямого манипулирования. Процедурно-ориентированный интерфейс использует традиционную модель взаимодейс твия с пользовате лем, основанну ю на понятиях "процедура" и "операция". В рамках этой модели программное обеспечение предоставляет пользователю возможность выполнения некоторых действий, для которых пользователь определяет соответствие данных и следствием выполнения которых является получение желаемого результата. Примитивн ым называется интерфейс, который организует взаимодействие с пользователем и используется в консольном режиме. Единственно е отклонение от последовател ьного процесса, который обеспечивается данными, заключается в организации цикла для обработки нескольких наборов данных. Интерфейс Меню в отличие от примитивного интерфейса, позволяет пользователю выбирать операцию из специального списка, выводимого ему программой. Эти интерфейсы предполагаю т реализацию множества сценариев работы, последовательность действий в которых определяется пользователями. Древовидная организация меню предполагает строго 8 ограниченную реализацию. При этом возможны два варианта организации меню: Каждое окно меню занимает весь экран. На экране одновременно присутствуют несколько разноуровневых меню (Windows). В условиях ограниченной навигации, независимо от варианта реализации, поиск пункта более чем двух уровневого меню оказывается довольно сложной задачей. Интерфейс со свободной навигацией (графический интерфейс). Поддерживает концепцию интерактивного взаимодействия с программным обеспечением, визуальную обратную связь с пользователем и возможность прямого манипулиров ания объектом (кнопки, индикаторы, строки состояния). В отличие от интерфейса Меню, интерфейс со свободной навигацией обеспечивает возможность осуществления любых допустимых в конкретном состоянии операций, доступ к которым возможен через различные интерфейсные компоненты ("горячие" клавиши и т.д.). Интерфейс со свободной навигацией реализуется с использованием событийного программирования, что предполагает применение визуальных средств разработки (посредством сообщений). Плюсы процедурно-ориентированных интерфейсов: 1. Обеспечива ют пользовател ю функции, необходимые для выполнения задач. 2. Акцент делается на задачи. 3. Пиктограммы представляют приложения, окна или операции. 4. Содержание папок и справочников отражается с помощью таблицы-списка. 9 Объектно- ориентированн интерфейсы используют модель взаимодействия с пользователем, ориентированную на манипулирование объектами предметной области. В рамках этой модели пользователю предоставляется возможность напрямую взаимодействовать с каждым объектом и инициировать выполнение операций, в процессе которых взаимодействуют несколько объектов. Задача пользователя формулируется как целенаправленное изменение некоторого объекта. Объект понимается в широком смысле слова - модель БД, системы и т.д. Объектно- ориентированный интерфейс предполагает, что взаимодействие с пользователем осуществляется посредством выбора и перемещения пиктограмм соответствующей объектно-ориентированной области. Различают однодокументные (SDI) и многодокументные (MDI) интерфейсы. Плюсы объектно-ориентированных интерфейсов: 1. Обеспечивает пользователю возможность взаимодействия с объектами. 2. Акцент делается на входные данные и результаты. 3. Пиктограммы представляют объекты. 4. Папки и справочники являются визуальными контейнерами объектов. Интерфейс – это, прежде всего, набор правил. Как любые правила, их можно обобщить, собрать в «кодекс», сгруппировать по общему признаку. Таким образом, мы пришли к понятию «вид интерфейса» как объединение по схожести способов взаимодействия человека и компьютера. Современными видами пользовательского интерфейса являются: Командный интерфейс; WIMP-интерфейс (Window Image Menu Pointer); 10 SILK-интерфейс (Speech Image Language Knowledge). Командный интерфейс называется так потому, что в этом виде интерфейса человек подает «команды» компьютеру, а компьютер их выполняет и выдает результат человеку. Командный интерфейс реализован в виде пакетной технологии и технологии командной строки. Пакетная технология считается исторически первой из всех видов технологий. Она существовала уже на релейных машинах Зюса и Цюзе. Идея её проста: на вход компьютера подается последовательность символов, в которых по определенным правилам указывается последовательность запущенных на выполнение программ. После выполнения очередной программы запускается следующая, и т.д. Машина по определенным правилам находит для себя команды и данные. В качестве этой последовательности может выступать, например, перфолента, стопка перфокарт, последовательность нажатия клавиш электрической пишущей машинки (типа CONSUL). Машина также выдает свои сообщения на перфоратор, алфавитно-цифровое печатающее устройство (АЦПУ), ленту пишущей машинки. Такая машина представляет собой «черный ящик» (точнее «белый шкаф»), в который постоянно подается информация, и которая также постоянно «информирует» мир о своем состоянии. Человек здесь имеет малое влияние на работу машины – он может лишь приостановить работу машины, сменить программу и вновь запустить ЭВМ. Но, с появлением алфавитно-цифровых дисплеев началась эра по-настоящему пользовательской технологии – командной строки. При технологии командной строки в качестве единственного способа ввода информации от человека к компьютеру служит клавиатура, а компьютер выводит информацию человеку с помощью алфавитно-цифрового дисплея (монитора). Эту комбинацию (монитор + клавиатура) стали называть терминалом, или консолью. Команды набираются в командной строке. 11 Командная строка представляет собой символ приглашения и мигающий прямоугольник – курсор. При нажатии клавиши, на месте курсора появляются символы, а сам курсор смещается вправо.Команда заканчивается нажатием клавиши Enter (или Return). После этого осуществляется переход в начало следующей строки. Именно с этой позиции компьютер выдает на монитор результаты своей работы. Затем процесс повторяется. Технология командной строки уже работала на монохромных алфавитно-цифровых дисплеях. Поскольку вводить позволялось только буквы, цифры и знаки препинания, то технические характеристики дисплея были не существенны. В качестве монитора можно было использовать телевизионный приемник и даже трубку осциллографа. Обе эти технологии реализуются в виде командного интерфейса – машине подаются на вход команды, а она как бы «отвечает» на них. Преобладающим видом файлов при работе с командным интерфейсом стали текстовые файлы – их и только их можно было создать при помощи клавиатуры. На время наиболее широкого использования интерфейса командной строки приходится появление операционной системы UNIX и появление первых восьмиразряд ных персональны х компьютеров с многоплатформенной операционной системой CP/M. Характерной особенностью WIMP-интерфейса является то, что диалог с пользователем ведется не с помощью команд, а с помощью графических образов – меню, окон, других элементов. Хотя и в этом интерфейсе подаются команды машине, но это делается «опосредственно», через графические образы. Этот вид интерфейса реализован на двух уровнях технологий: простой графический интерфейс и «чистый» WIMP-интерфейс. Идея WIMP-интерфейса зародилась в середине 70-х годов, когда в исследовательском центре Xerox Palo Alto Research Center (PARC) была разработана концепция визуального интерфейса. Предпосылко й12 графического интерфейса явилось уменьшение времени реакции компьютера на команду, увеличение объема оперативной памяти, а также развитие технической базы компьютеров. Аппаратным основанием концепции, конечно же, явилось появление алфавитно-цифровых дисплеев на компьютерах, причем на этих дисплеях уже имелись такие эффекты, как «мерцание» символов, инверсия цвета (смена начертания белых символов на черном фоне обратным, то есть, черных символов на белом фоне), подчеркивание символов. Эти эффекты распространились не на весь экран, а только на один или более символов. Следующим шагом явилось создание цветного дисплея, позволяющего выводить, вместе с этими эффектами, символы в 16 цветах на фоне с палитрой (то есть цветовым набором) из 8 цветов. После появления графических дисплеев, с возможностью вывода любых графических изображений в виде множества точек на экране различного цвета, фантазии в использовании экрана вообще не стало границ. Первая система с графическим интерфейсом 8010 Star Information System группы PARC, таким образом, появилась за четыре месяца до выхода в свет первого компьютера фирмы IBM в 1981 году. Первонач ально визуальн ый интерфе йс использовался только в программах. Постепенно он стал переходить и на операционные системы, используемые сначала на компьютерах Atari и Apple Macintosh,а затем и на IBM-совместимых компьютерах. На первом этапе графический интерфейс очень походил на технологию командной строки. Отличия от технологии командной строки заключались в следующем: 1. При отображении символов допускалось выделение части символов цветом, инверсным изображением, подчеркиванием и мерцанием. Благодаря этому повысилась выразительность изображения. 13 2. Вне зависимости от конкретной реализации графического интерфейса курсор может представляться не только мерцающим прямоугольником, но и некоторой областью, охватывающей несколько символов и даже часть экрана. Эта выделанная область отличается от других, невыделенных частей (обычно цветом). 3. Нажатие клавиши Enter не всегда приводит к выполнению команды и переходу к следующей строке. Реакция на нажатие любой клавиши во многом зависит от того, в какой части экрана находился курсор. 4. Кроме клавиши Enter, на клавиату ре все чаще стали использоваться «серые» клавиши управления курсором. 5. Уже в этой редакции графическ ого интерфей са стали использоваться манипуляторы (типа мыши, трекбола и т.п.). Они позволяли быстро выделять нужную часть экрана и перемещать курсор. Появле ние этого типа интерфейса совпадает с широким распространением операционной системы MS-DOS. Именно она внедрила этот интерфейс в массы, благодаря чему 80-е годы прошли под знаком совершенствования этого типа интерфейса, улучшения характеристик отображения символов и других параметров монитора. Типичным примером использования этого вида интерфейса является файловая оболочка Norton CommanРr и текстовый редактор Multi-Edit. А текстовые редакторы Лексикон, ChiWriter и текстовый процессор Microsoft Word for DOS являются примером, как этот интерфейс превзошел сам себя. Вторым этапом в развитии графического интерфейса стал "чистый" интерфейс WIMP. Этот подвид интерфейса характеризуется следующими особенностями: 1. Вся работа с программами, файлами и документами происходит в окнах – определенных очерченных рамкой частях экрана. 14 2. Все программы, файлы, документы, устройства и другие объекты представляются в виде значков – иконок. превращаются в окна. При открытии иконки 3. Все действия с объектами осуществляются с помощью меню. Хотя меню появилось на первом этапе становления графического интерфейса, оно не имело в нем главенствующего значения, а служило лишь дополнением к командной строке. В чистом WIMP-интерфейсе меню становится основным элементом управления. 4. Широкое использова ние манипулят оров для указания на объекты. Манипулятор перестает быть просто игрушкой – дополнением к клавиатуре, а становится основным элементом управления. С помощью манипулятора УКАЗЫВАЮТ на любую область экрана, окна или иконки, ВЫДЕЛЯЮТ ее ,а уже потом - через меню или с использованием других технологий - осуществляют управление ими. Следует отметить, что WIMP требует для своей реализации цветной растровый дисплей с высоким разрешением и манипулятор. Также программы, ориентированные на этот вид интерфейса, предъявляют повышенные требования к производительности компьютера, объему его памяти, пропускной способности шины и т.п. Однако этот вид интерфейса наиболее прост в усвоении и интуитивно понятен. Поэтому сейчас WIMP - интерфейс стал стандартом де-факто. Ярким примером программ с графическим интерфейсом является операционная система Microsoft Windows. SILK- интерфейс наиболее приближен к обычной, человеческой форме общения. В рамках этого интерфейса идет обычный «разговор» человека и компьютера. При этом компьютер находит для себя команды, анализируя человеческую речь и находя в ней ключевые фразы. Результат выполнения команд он также преобразует в понятную человеку форму. Этот вид 15 интерфейса наиболее требователен к аппаратным ресурсам компьютера, и поэтому его применяют в основном для военных целей. Можно выделить следующие виды SILK-интерфейса: 1.Речевая технология. С середины 90-х годов, после появления недорогих звуковых карт и широкого распространения технологий распознавания речи, появилась так называемая "речевая технология" SILK - интерфейса. При этой технологии команды подаются голосом, путем произнесения специальны х зарезервированных слов - команд. Основными такими командами (по правилам системы "Горыныч") являются: «Проснись» - включение голосового интерфейса; «Отдыхай» - выключение речевого интерфейса; «Открыть» - переход в режим вызова той или иной программы. Имя программы называется в следующем слове; «Буду диктовать» - переход из режима команд в режим набора текста голосом; «Режим команд» - возврат в режим подачи команд голосом; и некоторые другие. Слова должны выговариваться четко, в одном темпе. Между словами обязательна пауза. Из-за неразвитости алгоритма распознавания речи такие системы требует индивидуальной предварительной настройки на каждого конкретного пользователя. "Речевая" технология является простейшей реализацией SILK - интерфейса. 2.Биометрическая технология. Эта технология возникла в конце 90-х годов XX века и еще разрабатывается. Для управления компьютером используется выражение 16 лица человека, направление его взгляда, размер зрачка и другие признаки. Для идентификации пользователя используется рисунок радужной оболочки его глаз, отпечатки пальцев и другая уникальная информация. Изображения считываются с цифровой видеокамеры, а затем с помощью специальных программ распознавания образов из этого изображения выделяются команды. Эта технология, по-видимому, займет свое место в программных продуктах и приложениях, где важно точно идентифицировать пользователя компьютера. 3.Семантический (общественный) интерфейс. Этот вид интерфейса возник в конце 70-х годов XX века, с развитием искусственного интеллекта. Его трудно назвать самостоятельным видом интерфейса - он включает в себя и интерфейс командной строки, и графическ ий, и речевой, и мимическ ий интерфей с. Основная его отличительная черта - это отсутствие команд при общении с компьютером. Запрос формируется на естественном языке, в виде связанного текста и образов. 1.2 Методы и средства разработки пользовательского интерфейса Интерфейс имеет важное значение для любой программной системы и является неотъемлемой ее составляющей, ориентированной, прежде всего, на конечного пользователя. Именно через интерфейс пользователь судит о прикладной программе в целом; более того, часто решение об использовании прикладной программы пользователь принимает по тому, насколько ему удобен и понятен пользовательский интерфейс. Вместе с тем, трудоемкость проектирования и разработки интерфейса достаточно велика. По оценкам специалистов в среднем она составляет более половины времени реализации проекта. 17 В литературе не существует единой общепринятой классификации средств для разработки пользовательского интерфейса. Так, программное обеспечение для разработки пользовательского интерфейса можно разделить на две основные группы: Инструмент арий для разработки пользовательско го интерфейса (toolkits); Высокоуров невые средства разработки интерфейса (higher-level development tools). Инструментарий для разработки пользовательского интерфейса, как правило, включает в себя библиотеку примитивов компонентов интерфейса (меню, кнопки, полосы прокрутки и др.) и предназначен для использования программистами. Высокоуровневые средства разработки интерфейса могут быть использованы непрограммистами и снабжены языком, который позволяет специфицировать функции ввода-вывода, а также определять, используя технику непосредственного манипулирования, интерфейсные элементы. К таким средствам относятся построители диалога (interface builРrs) и СУПИ - системы управления пользователь ским интерфейсом (User Interface Management Systems - UIMS). Помимо СУПИ, используются также такие термины, как User Interface Development Systems (UIDS) - системы разработки пользовательского интерфейса, User Interface Design Environment (UIDE) - среда разработки пользовательского интерфейса и др. Специализированные средства для разработки интерфейса позволяют упростить разработку пользовательско го интерфейса, предлагая разработчику специфицировать компоненты пользовательского интерфейса с использованием языков спецификаций. Можно выделить интерфейса: несколько основных способов спецификации 18 1. Языковой, когда применяются специальные языки для задания синтаксиса интерфейса (декларативные, объектно-ориентированные, языки событий и др.). как 2. Графическая спецификация связана с определением интерфейса, правило, средствами визуального программи рования, программированием демонстраций и по примерам. Подобный способ поддерживает ограниченный класс интерфейсов. 3. Спецификация интерфейса, основанная на объектно- ориентированном подходе, связана с принципом, называемым непосредственное манипулирование. Основное его свойство - взаимодействие пользователя с индивидуальными объектами, а не со всей системой как единым целым. Типичными компонентами, используемыми для манипуляц ий с объектами и управляющ ими функциями , являются обработчики, меню, зоны диалога, кнопки различного вида. 4. Спецификация интерфейса по спецификации прикладной задачи. Здесь интерфейс создается автоматически по спецификации семантики прикладной задачи. Однако сложность описания интерфейса затрудняет возможности скорого появления систем, реализующих данный подход. Таким образом, в настоящее время существует большое количество инструментальных средств для разработки интерфейса, поддерживающих различные методы его реализации. Основное назначение тех средств разработки пользовательских графических интерфейсов, которые разрабатываются и поставляются отдельно от оконной системы, является облегчение создания нового графического интерфейса за счет использовани я существую щих параметризованных заготовок. Как видно, в принципе это те же самые идеи, на которых основана объектно-ориентированная библиотека оконной системы Xt Intrinsics. 19 И действительно, наиболее распространенный пакет, предназначенный для быстрой и качественной разработки графических пользовательских интерфейсов, Motif, который был спроектирован и разработан в северо- американском консорциуме OSF, в основном является развитием идей Xt Intrinsics. Motif (официальное название этого продукта - OSF/Motif) представляет собой программный пакет, включающий оконный менеджер, набор вспомогательных утилит, а также библиотеку классов, построенных на основе Xt Intrinsics. Для конечных пользователей оконных систем, опирающихся на Motif, основной интерес представляет менеджер окон. Для разработчиков же графических интерфейсов важны все три компонента Motif. Новый интерфейс разрабатывается в графическом же режиме с использованием оконного менеджера. При этом полезно использование утилит Motif и необходимо использование библиотеки классов Motif. Библиотека классов Motif является расширением библиотеки Xt Intrinsics с целью предания этой библиотеке практического смысла (по-другому можно сказать, что Motif - это то, чем должен был бы быть Xt, если бы при его создании ставились коммерческие цели). Все графические объекты (правильнее сказать, классы) Xt Intrinsics включаются в библиотеку классов Motif, хотя в ней используются другие имена. Но Motif существенно расширяет возможности Xt Intrinsics. В его библиотеке поддерживается большое число классов, позволяющих создавать меню, "нажимаемые" кнопки и т.д. Основное назначение этих классов - определение новых виджетов, связанных с окнами. Однако в Motif поддерживается и новый вид графических объектов (их классов) - так называемые гаджеты (gadgets). Гаджет отличается от виджета тем, что соответствующий класс также может использоваться для создания 20 элементов интерфейса, но графический объект не привязывается к определенному окну. При отображении на экран гаджета используется окно объекта, относящегося к суперклассу класса гаджета. С другой стороны, сравнительно недавно (4-5 лет тому назад) в Калифорнийском университете г. Беркли был создан альтернативный механизм под названием Tcl/Tk. Этот механизм основан на наличии специализированного командного языка, предназначенного для описания графических пользовательских интерфейсов, соответствующег о интерпретатора и библиотеки ранее разработанных заготовок интерфейсов. Пакет Tcl/Tk распространяется (вместе с полной документацией) свободно, и многие профессиональные программисты находят его более удобным, чем Motif. Продукт Tcl/Tk в действительности представляет собой два связанных программных пакета, которые совместно обеспечивают возможность разработки и использова ния приложени й с развитым графическ им пользовательским интерфейсом. Название Tcl относится к "командному языку инструментальных средств - tool command language", и его рекомендуется произносить "тикл". Это простой командный язык для управления приложениями и расширения их возможностей. Язык Tcl является "встраиваемым": его интерпретатор реализован в виде библиотеки функций языка Си, так что интерпретатор может быть легко пристыкован к любой прикладной программе, написанной на языке Си. Tk (рекомендуемое произношение - "ти-кей") является библиотекой Си- функций, ориентированной на облегчение создания пользовательских графических интерфейсов в среде оконной системы X (т.е., по сути дела, некоторый аналог Xt Intrinsics). С другой стороны, аналогично тому, как это делается в командных языках семейства shell, функции библиотеки Tk являются командами языка Tcl, так что любой программист может 21 расширить командный репертуар языка Tcl путем написания новой функции на языке Си. Совместно, Tcl и Tk обеспечивают четыре преимущества для разработчиков приложений и пользователей (мы используем здесь авторские тексты разработчиков). Во-первых, наличие командного языка Tcl дает возможность в каждом приложении использовать мощный командный язык. Все, что требуется от разработчика приложения, чтобы удовлетворить его/ее специфические потребности, - это создать несколько новых команд Tcl, требующихся приложению (и, возможно, другим приложениям - явно традиционный стиль командного программирования в ОС UNIX). После этого нужно связать прикладную программу с интерпретатором Tcl и пользоваться полными возможностями командного языка. Вторым преимуществом использования Tcl/Tk является возможность быстрой разработки графических интерфейсов. Многие интересные оконные приложения могут быть написаны в виде скриптов языка Tcl без привлечения языков Си или Си++ (а Tcl позволяет скрыть многие несущественные детали). Как утверждают разработчики Tcl/Tk, пользователи оказываются способными к созданию новых графических интерфейсов уже после нескольких часов знакомства с продуктом. Другой особенностью языка Tcl, способствующей быстрой разработке оконных приложений, является то, что язык является интерпретируемым. Можно опробовать новую идею интерфейса, выражающуюся в сотнях или тысячах строк кода на языке Tcl, без потребности вызова новых программных средств, путем простого нажатия на клавишу мыши (не наблюдая существенных задержек при использовании современных рабочих станций). Третьим преимуществом языка Tcl является то, что его можно применять в качестве языка "склейки" приложений. Например, любое основанное на Tcl и использующее Tk оконное приложение может направить свой скрипт любому другому аналогично ориентированному приложению. С 22 использованием Tcl/Tk можно создавать приложения, работающие в стиле мультимедиа, и опять же они смогут обмениваться скриптами, поскольку пользуются общим интерпретатором командного языка Tcl и общей внешней библиотекой Tk. Наконец, четвертым удобством интегрированного пакета Tcl/Tk является удобство пользователей. Для написания нового приложения в среде Tcl/Tk достаточно выучить несколько совершенно необходимых команд, и этого окажется достаточно. Другими словами оказывается возможным инкрементальный (пошаговый) стиль погружения в предмет. Такая возможность всегда радует сердце и греет душу. Новым инструментом создания интерфейсов является Microsoft Expression Blend. Появление языка описания пользовательских интерфейсов XAML (произносится – зáммель) и новой среды разработки Expression Blend позволяет заметно ускорить и облегчить проектирование и построение пользовательских интерфейсов как для веб-, так и для настольных приложений. Данный язык позволяет описывать внешний вид и поведение интерфейсных элементов, устанавливать взаимодействие этих элементов с различными данными и событиями. Допускает прямое подключение к Common Language Runtime (CLR), что обеспечивает большую гибкость при проектировании ПО. Функциональность, взаимодействие XAML и процедурного кода XAML – это скриптовый язык, базирующийся на XML, он имеет набор правил, которые устанавливают взаимодействие между объектами и классами, атрибутами и свойствами или событиями и пространствами имен XML и CLR. Для описания элементов, панелей, свойств текста, векторной графики и т.п. используются теги. 23 Каждый тег в XAML имеет соответствующий класс в WPF, который имеет набор инструкций, как выполнить этот тег. XAML включает в себя: панели, элементы управления, элементы управления документами и элементы векторной графики. Основным приложением для работы с XAML является Microsoft Expression Blend. Blend представляет собой современное средство визуального проектирования интерфейсов, оснащенное встроенным редактором XAML, что позволяет, с одной стороны проектировать интерфейсы, не обращая внимания на исходный код, а с другой стороны, позволяет более «тонко» настраивать создаваемый интерфейс. По большому счету, сравнение классических технологий прототипирования интерфейсов и новой технологии WPF – представителем которой является Blend, является не совсем корректным. Таким образом, можно сделать вывод, что процесс проникновения информационных технологий практически во все сферы человеческой деятельнос ти продолжает развиваться и углублятьс я. Помимо уже привычных и широко распространенных персональных компьютеров, становится все больше и встроенных средств вычислительной техники. Пользователей всей этой разнообразной вычислительной техники становится все больше, причем наблюдается развитие двух вроде бы противоположных тенденций. С одной стороны, информационные технологии все усложняются, и для их применения, и тем более дальнейшего развития, требуется иметь очень глубокие познания. С другой стороны, упрощаются интерфейсы взаимодейств ия пользователе й с компьютерам и. Компьютеры и информационные системы становятся все более дружественными и понятными даже для человека, не являющегося специалистом в области информатики и вычислительной техники. Это стало возможным прежде 24 всего потому, что пользователи и их программы взаимодействуют с вычислительной техникой посредством специального (системного) программного обеспечения — через операционную систему. Операционная система предоставляет интерфейсы и для выполняющихся приложений, и для пользователей. 25 2. Анализ пользовательского интерфейса сотрудника и внедрение обновленного интерфейса на официальный сайт КФУ 2.1 Анализ имеющегося пользовательского интерфейса сотрудника и выявление основных недостатков На данной странице сайта КФУ сотрудники имеют возможность видеть какой конкретно отчёт о реализации программы развития в 2018 году им необход имо прикреп ить на сайт, их ФИО появляет ся в ячейке «Исполнитель» (рисунок 1). Рисунок 1. Первоначальный вид сайта После анализа были выявлены следующие основные недостатки: Неудобная в понимании и использовании таблица; Данные бесполезны без возможнос ти визуализир овать их и взаимодействовать с ними. Правильные таблицы позволяют пользователям анализироват ь, сравнивать, фильтровать, сортировать и управлять содержащейся информацией. Недостаток организованности элементов внутри таблицы; Интерфейс пользователя – это то, что должно быть максимально понятным большинству людей, вне зависимости от возраста пользователя. Все элементы должны быть выстроены по принципам элементарной логики. 26 Одним из основных принципов является то, что не нужно запутывать пользователя нестандартным расположением привычных блоков. Отсутствие различимых контрастных стилей; Визуаль ное оформление – цвет, глубина, контраст,- можно использовать в качестве подсказок, помогающих людям понять принцип работы с вашим интерфейсом: где я, и куда я могу пойти. Стили ваших кликабельных элементов, выбранных элементов и текста должны отличаться друг от друга и быть одинаковыми по всему интерфейсу. 2.2 Модификация пользовательского интерфейса сотрудника и характеристика проектных решений После анализа и выявления основных недостатков пользовательского интерфейса сотрудника, первым делом, было изменено название отчёта (рисунок 2). Рисунок 2. Измененное название отчёта Далее для удобства работы сотрудника на сайте была добавлена «вертикальная гармошка» после каждого раздела (например Том1) и подраздела (например СИ1). С помощью этой функции можно показывать и скрывать выбранные элементы на странице, за счет плавного разворачивания и сворачивания. Код для добавления «вертикальной гармошки»: <div class="container"> <div class="custom-table"> 27 <div class="custom-table__head"> <div class="custom-table__th flex-center"> <span class="toggle- table-body opened" data- id="1"></span> 1. Общие сведения об университете</div> <div class="custom-table__th no-padding"> <div class="custom-table__th custom-table__action flex-center"> <A href="https://shelly.kpfu.ru/e- ksu/programm_kfu_content.content_card?p1=&amp;p2=888549827173356 8690578884299371&amp;p_id=365&amp;p_prog_table=366&amp;p_menu=17 40&amp;p_h=DAA652AAF58077EC9335BA93F5AD394E&amp;p_type=2"><IMG width="28" title="Изменить" src="programm_kfu_content2_files/basket(3).png"></A> </div> <div class="custom-table__th custom-table__action flex-center"> <A href="https://shelly.kpfu.ru/e- ksu/programm_kfu_content.content_card?p1=&amp;p2=888549827173356 8690578884299371&amp;p_id=366&amp;p_menu=1740&amp;p_h=F002107964 4CC8AF1A5764A82675A60C&amp;p_type=2"><IMG width="28" title="Создать главу" src="programm_kfu_content2_files/Add-32x32.png"></A> </div> Также для удобства на сайт были добавлены 5 иконок: - редактирование разделов, подразделов; - создание разделов, подразделов; 28 - назначение исполнителя; - добавление на сайт документа в формате *txt, *pdf; - подтверждение добавления на сайт документа в формате *txt, *pdf. Код для добавления иконок на сайт: Центр перспективного развития </div> <div class="custom-table__td flex-center"> <A href="https://shelly.kpfu.ru/e- ksu/programm_kfu_content.open_report?p1=&amp;p2=8885498271733568 690578884299371&amp;p_id=367&amp;p_menu=1740&amp;p_h=1B7D2D1271C 0E1651E45D8E0DB98496E&amp;p_type=1" target="blank"><IMG width="26" title="Просмотр" src="programm_kfu_content2_files/invoice-icon_48.png"></A> </div> <div class="custom-table__td flex-column flex-align- start"> <p>1. Кузьмишин Илья Александрович <IMG width="24" src="programm_kfu_content2_files/document.png"> </p> <p>1.1. Смольникова Елена Владимировна </p> </div> </div> 29 <div class="custom-table__line"> <div class="custom-table__td "> <div class="custom-table__action flex-align-top"> <IMG src="programm_kfu_content2_files/receipt- text.png"> </div> <div class="custom-table__td"> Управление документооборота и контроля </div> </div> <div class="custom-table__td flex-center"> <A href="https://shelly.kpfu.ru/e- ksu/programm_kfu_content.open_report?p1=&amp;p2=8885498271733568 690578884299371&amp;p_id=367&amp;p_menu=1740&amp;p_h=1B7D2D1271C 0E1651E45D8E0DB98496E&amp;p_type=1" target="blank"><IMG width="26" title="Просмотр" src="programm_kfu_content2_files/invoice-icon_48.png"></A> </div> Затем были добавлены кнопки прокручивания для быстрой навигациина странице. Код для добавления кнопки прокручивания «Наверх»: Добавление кнопки “^ Наверх” #toTop { width:100px; border:1px solid #ccc; 30 background:#f7f7f7; text-align:center; padding:5px; position:fixed; bottom:10px; /* отступ кнопки от нижнего края страницы*/ right:10px; cursor:pointer; display:none; color:#333; font-family:verdana; font-size:11px; } <SCRIPT language="JavaScript"> function show_menu(v_name) { if ((document.getElementById(v_name).style.display=="none")||(docum ent.getElementById(v_name).style.display=="")) document.getElementById(v_name).style.display="block"; else document.getElementById(v_name).style.display="none"; } function delete_rec(v_url) { window.location.href=v_url; 31 } </SCRIPT> Стили таблиц были полностью изменены через flexbox. После изменения таблица стала понятной, доступной в использовании и наглядно эстетичной. Flexbox по праву можно назвать удачной попыткой решения огромного спектра проблем при построении лейаутов в css. Основные преимущества flexbox: 1. Все блоки очень легко делаются “резиновым”, что уже следует из названия «flex». Элементы могут сжиматься и растягиваться по заданным правилам, занимая нужное пространство. 2. Выравнивание по вертикали и горизонтали, базовой линии текста работает шикарно. 3. Расположение элементов в html не имеет решающего значения. Его можно поменять в CSS. Это особенно важно для некоторых аспектов responsive верстки. 4. Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место. 5. Множество языков в мире используют написание справа налево rtl (right-to-left), в отличии от привычного нам ltr (left-to-right). Flexbox адаптирован для этого. В нем есть понятие начала и конца, а не права и лева. Т.е. в браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке. 6. Синтаксис CSS правил очень прост и осваивается довольно быстро. Код для изменения таблиц через flexbox: 32 .container { width: 900px; margin: 30px auto; } .custom-table { width: 900px; border:2px solid #d0d0d0; } .custom-table__head, .custom-table__line { display: flex; } .custom-table__head { background-color: #5F9EA0; position: relative; } .custom-table__line { border-bottom: 2px solid #d0d0d0; } .custom-table__line:last-child { border-bottom: 0; } .custom-table__th, .custom-table__td { display: inline-flex; justify-content: flex-start; 33 padding: 3px; border-right: 2px solid #d0d0d0; } .custom-table__th p, .custom-table__td p { margin-top: 0; margin-bottom: 5px; display: block; } .custom-table__th:last-child, .custom-table__td:last- child, .custom-table__td:last-child, .custom-table__td:last-child { border-right: 0; } .custom-table__th { font-weight: bold; } .custom-table__th:first-child { padding-left: 35px; } .custom-table__th:first-child { flex-basis: 441px; } .custom-table__td:first-child { flex-basis: 475px; } 34 .custom-table__th:nth-child(2),.custom-table__td:nth- child(2) { flex-basis: 120px; } .custom-table__th:last-child,.custom-table__td:last-child { flex-basis: 310px; } .custom-table__action { display: flex; align-items: center; justify-content: flex-start; flex-basis: 40px; cursor: pointer; } .color_tr{ background: #B0E0E6; } .custom-table__action:first-child { padding-left: 3px; } .toggle-table-body { display: inline-block; margin-right: 5px; color: white; 35 font-size: 30px; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; transition: all 0.3s ease; } .toggle-table-body.closed:before { content: '+'; } .toggle-table-body.opened:before { content: "\2013"; } Код для подключения main.js для стилей: $(document).ready(function(){ $('.toggle-table-body').click(function(){ var id = $(this).data('id'); $('[data- body="' + +'"]').slideToggle(500,function(){ if($('[data- id="' + +'"]').hasClass('opened')) $('[data-id="' + +'"]').removeClass('opened').addClass('closed'); else 36 $('[data-id="' + +'"]').removeClass('closed').addClass('opened'); }); }); }); Характеристика проектных решений пользовательского интерфейса сотрудника: 1.Естественность интерфейса. Естественный интерфейс – интерфейс, который не вынуждает пользователя существенно изменять привычные для него способы решения задачи. Это, в частности, означает, что сообщения и результаты, выдаваемые прило жение не должн ы требовать дополнительных пояснений. Инфор мация отображается на экране в виде, пригодном для непосредственного использования. Целесообразно так же сохранить систему обозначений и терминологию, используемые в данной предметной области. Использование знакомых пользователю понятий и образов обеспечивает интуитивно понятный интерфейс программы. Примеры естественности интерфейса данного сайта: Терминология сайта будет понятна любому сотруднику; Все сообщения и результаты, выдаваемые сайтом, не требуют дополнительных пояснений; 2.Согласованность интерфейса Согласованность позволяет пользователям переносить имеющиеся знания на новые задания, более быстро осваивать новые аспекты и благодаря этому фокусировать внимание на решаемой задаче, а не тратить время на изучение различий в использовании элементов управления, команд и функций программы. Формат вывода даты, времени и других подобных 37 стандартиз ированных данных должен быть общеприня тым, а не индивидуальным для данной системы. Обеспечивая преемственность полученных ранее знаний и навыков, согласованность делает интерфейс узнаваемым и предсказуемым. Согласованность важна для всех аспектов интерфейса, включая имена команд, визуальное представление информации и элементов управления. Примеры согласованности интерфейса данного сайта: Удобство поиска и ознакомления с нужным отчетом, который можно посмотреть за два клика; Привычное и удобное для пользователя добавление документов на сайт в формате *txt, *pdf 3.Дружественность интерфейса Дружественность интерфейса – это мера того, насколько человеку просто (удобно) применять некоторый инструмент для достижения определенной цели. Обычно пользователи изучают особенности работы с новым программным продуктом методом проб и ошибок. Эффективный интерфейс должен принимать во внимание такой подход. На каждом этапе работы он должен разрешать только соответствующий набор действий и предупреждать пользователей о тех ситуациях, где они могут повредить системе или данным, еще лучше, если у пользователя существует возможность отменить или исправить выполненные действия. Даже при наличии хорошо спроектированного интерфейса пользователи могут совершать те или иные ошибки. Они могут быть как «физического» типа (случайный набор неправильной команды или данных), так и «логического» (принятие неверного решения о выборе команды или данных). Эффективный интерфейс должен позволять предотвращать ситуации, которые, вероятно, закончатся ошибками. Он так же должен уметь адаптироваться к 38 потенциальным ошибкам пользователя и облегчать ему процесс устранения последствий таких ошибок. Примеры дружественности интерфейса данного сайта: На каждом этапе работы разрешается только соответствующий набор действий; Существует возможность отменить или исправить выполненные действия. 4.Простота интерфейса Интерфейс должен быть простым. При этом имеется в виду не упрощение функционала программы, а обеспечение легкости в его изучении и использовании. Кроме того, он должен предоставлять доступ ко всему перечню функциональны х возможностей, предусмотренн ых данной программой. Реализация доступа к широким функциональным возможностям и обеспечение простоты работы противоречат друг другу. Один из возможных путей поддержания простоты – представление на экране информации, минимально необходимой для выполнения пользователем очередного шага задания. В частности, необходимо избегать многословных команд или сообщений. Непродуманные или избыточные фразы затрудняют пользователю извлечение существенной информации. Другой путь к созданию простого, но эффективного интерфейса – размещение и представление элементов на экране с учетом их смыслового значения и логической взаимосвязи. Это позволяет использовать в процессе работы ассоциативное мышление пользователя. Можно так же помочь пользователям управлять сложностью отображаемой информации, используя последовательное раскрытие (диалоговых окон, разделов меню и т.д.). Последовательное раскрытие предполагает такую организацию информации, при которой в каждый момент времени на экране находится только та ее часть, которая необходима 39 для выполнения очередного шага. Сокращая объем информации, представленной пользователю, уменьшается объем информации, подлежащей обработке. Примером такой организации является иерархическое (каскадное) меню, каждый уровень которого отображает только те пункты, которые соответств уют одному, выбранно му пользователем, пункту более высокого уровня. Примеры простоты интерфейса данного сайта: Отсутствует избыточная информация, которая может отвлекать сотрудника от выполняемых задач; Присутствует смысловая и логическая взаимосвязь всех элементов сайта. 5.Эстетическая привлекательность интерфейса Достижение эстетической привлекательности интерфейса является одной из важнейших задач разработки интерфейса программного продукта. Корректное визуальное представление используемых объектов обеспечивает передачу важной дополнител ьной информаци и о поведении и взаимодействии различных объектов. В то же время следует помнить, что каждый визуальный элемент, который появляется на экране, требует внимания пользователя и этим тоже не следует злоупотреблять. Следует обеспечить формирование на экране такой графической среды, которая не только содействовала бы пониманию пользователем представляемой информации, но и позволяла бы сосредоточиться на наиболее важных ее аспектах. Примеры эстетической привлекательности интерфейса данного сайта: На сайте рационально используется рабочее пространство окон; При нахождении на сайте отсутствуют лишние, отвлекающие внимание пользователя элементы. 6.Гибкость интерфейса 40 Гибкость интерфейса – это его способность учитывать уровень подготовки и производител ьности труда пользователя. Гибкость предполагает возможность изменения структуры диалога и/или входных данных. Примеры гибкости интерфейса данного сайта: В программе имеется возможность редактировать имеющиеся разделы и подразделы; 2.3 Внедрение обновленного интерфейса сотрудника на официальный сайт КФУ В данной работе была проделана следующая работа: Изменена табличная верстка; Добавлены дополнительные таблицы для данной структуры; Добавлены скрипты разворачивания элементов таблиц; Изменены иконки на сайте; Выравнены все элементы по «госту». 41 Рисунок 3. Переделанный вариант с добавлением flexbox (1) Рисунок 4. Переделанный вариант с добавлением flexbox (2) Поддержка браузерами пока неполная (2014), так как Internet explorer, поддерживает спецификацию 2011 года только начиная с 10 версии. Не смотря на это, всеми остальными мобильными и десктопными браузерами сайт поддерживается. Если Вам нужна мобильная версия сайта или web-based приложение, то его уже можно (а, возможно, и нужно) делать, используя все преимущества flexbox. Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз. Направление главной оси flex-контейнера можно задавать, используя базовое css свойство flex-direction. 42 Рисунок 5. Направление главной оси Доступные значения flex-direction: row (значение по умолчанию): слева направо (в rtl справа налево); row-reverse: справа налево (в rtl слева направо); column: сверху вниз; column-reverse: снизу вверх. Все примеры, которые мы приводили выше, были построены с учетом однострочного (одностолбцового) расположения блоков. Надо сказать, что по умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap. Доступные значения flex-wrap: nowrap (значение по умолчанию): блоки расположены в одну линию слева направо (в rtl справа налево); 43 wrap: блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо (в rtl справа налево); wrap-reverse: то-же что и wrap, но блоки располагаются в обратном порядке. Подводя итоги проделанной работы хочется сказать что flexbox, конечно же, не вытеснит все остальные способы верстки, но, безусловно, в ближайшее время займет достойную нишу при решении огромного количества задач. 44 Заключение В заключении можно сделать вывод, что процесс проникновения информационных технологий практически во все сферы человеческой деятельнос ти продолжает развиваться и углублятьс я. Помимо уже привычных и широко распространенных персональных компьютеров, становится все больше и встроенных средств вычислительной техники. Пользователей всей этой разнообразной вычислительной техники становится все больше, причем наблюдается развитие двух вроде бы противоположных тенденций. С одной стороны, информационные технологии все усложняются, и для их применения, и тем более дальнейшего развития, требуется иметь очень глубокие познания. С другой стороны, упрощаются интерфейсы взаимодейств ия пользователе й с компьютерам и. Компьютеры и информационные системы становятся все более дружественными и понятными даже для человека, не являющегося специалистом в области информатики и вычислительной техники. В информационных технологиях конечного пользователя важное значение имеет пользовательский интерфейс. Пользовательский интерфейс – это совокупность программных и аппаратных средств, обеспечивающих взаимодействие пользователя с компьютером. Выделяют следующие виды пользовательского интерфейса: Командный интерфейс; WIMP-интерфейс (Window Image Menu Pointer); SILK- интерфейс (Speech Image Language Knowledge). В ходе данной дипломной работы был модифици рован пользовательский интерфейс сотрудника на официальном сайте КФУ, предназначенной для добавления отчетов о реализации плана мероприятий. 45 В процессе работы были рассмотрены понятия, типы, виды, методы и средства разработки интерфейса пользователя. Это позволило сделать интерфейс обновленного сайта понятным, удобным в применении, повысило эффективн ость и быстродейс твие работы с данным сайтом. Пользовательский интерфейс данного сайта обладает такими свойствами, как естественность, согласованность, дружественность, простота, эстетическая привлекательность и гибкость. 46 Список использованной литературы 1.Гультяев А.К. Проектирова ние и дизайн пользовател ьского интерфейса: учебное пособие / А.К. Гультяев, В.А. Машин. - СПб.: Корона-Принт, 2014. - 239 с. 2.Дарков А.В. Информационные технологии: теоретические основы: учебное пособие / А.В. Дарков, Н.Н. Шапошников. - СПб.: Лань, 2016. - 448 c. 3.Джефф Р. Интерфейс: новые направлени я в проектиро вании компьютерных систем: учебник / Р. Джефф. - М.: Символ-Плюс, 2015. - 263 с. 4.Исаев Г.Н. Информационные технологии: учебное пособие / Г.Н. Исаев М.: Омега-Л, 2014. - 464 c. 5.Мандел Т. Разработка пользовательского интерфейса: учебник / Т. Мандел. - М.: ДМК, 2011. - 416 с. 6.Минаси М. Графический интерфейс пользователя : секреты проектирования: учебник / М. Минаси. - М.: Мир, 2016. - 159 с. 7.Нильсен Я. Web-дизайн. Удобство использования Web-сайтов: учебник / Я. Нильсен. - М.: Вильямс, 2009. - 376 с. 8.Портянкин И. А. SWING. Эффективные пользовательские интерфейсы: учебник / И.А. Портянкин. - М.: ЛОРИ, 2016. - 608 c. 9.Рассел Д. Интерфейс пользователя: учебник / Д. Рассекл. – М.: VSD, 2014. - 281 c. 10.Тидвелл Д. Разработка пользовательских интерфейсов: учебник / Д.Тидвелл. - М.: Питер, 2008. - 416 с. 11.Фели чи Д. Типографи ка: шрифт, верстка, дизайн: основы типографики; Технические приёмы работы; Правила для установки и др.: учебник / Д. Феличи. - М.: 2014. - 496 с. 47 Приложение Код для добавления «вертикальной гармошки»: <div class="container"> <div class="custom-table"> <div class="custom-table__head"> <div class="custom-table__th flex-center"> <span class="toggle- table-body opened" data- id="1"></span> 1. Общие сведения об университете</div> <div class="custom-table__th no-padding"> <div class="custom-table__th custom-table__action flex-center"> <A href="https://shelly.kpfu.ru/e- ksu/programm_kfu_content.content_card?p1=&amp;p2=888549827173356 8690578884299371&amp;p_id=365&amp;p_prog_table=366&amp;p_menu=17 40&amp;p_h=DAA652AAF58077EC9335BA93F5AD394E&amp;p_type=2"><IMG width="28" title="Изменить" src="programm_kfu_content2_files/basket(3).png"></A> </div> <div class="custom-table__th custom-table__action flex-center"> <A href="https://shelly.kpfu.ru/e- ksu/programm_kfu_content.content_card?p1=&amp;p2=888549827173356 8690578884299371&amp;p_id=366&amp;p_menu=1740&amp;p_h=F002107964 4CC8AF1A5764A82675A60C&amp;p_type=2"><IMG 48 width="28" title="Создать главу" src="programm_kfu_content2_files/Add-32x32.png"></A> </div> Код для добавления иконок на сайт: Центр перспективного развития </div> <div class="custom-table__td flex-center"> <A href="https://shelly.kpfu.ru/e- ksu/programm_kfu_content.open_report?p1=&amp;p2=8885498271733568 690578884299371&amp;p_id=367&amp;p_menu=1740&amp;p_h=1B7D2D1271C 0E1651E45D8E0DB98496E&amp;p_type=1" target="blank"><IMG width="26" title="Просмотр" src="programm_kfu_content2_files/invoice-icon_48.png"></A> </div> <div class="custom-table__td flex-column flex-align- start"> <p>1. Кузьмишин Илья Александрович <IMG width="24" src="programm_kfu_content2_files/document.png"> </p> <p>1.1. Смольникова Елена Владимировна </p> </div> </div> <div class="custom-table__line"> 49 <div class="custom-table__td "> <div class="custom-table__action flex-align-top"> <IMG src="programm_kfu_content2_files/receipt- text.png"> </div> <div class="custom-table__td"> Управление документооборота и контроля </div> </div> <div class="custom-table__td flex-center"> <A href="https://shelly.kpfu.ru/e- ksu/programm_kfu_content.open_report?p1=&amp;p2=8885498271733568 690578884299371&amp;p_id=367&amp;p_menu=1740&amp;p_h=1B7D2D1271C 0E1651E45D8E0DB98496E&amp;p_type=1" target="blank"><IMG width="26" title="Просмотр" src="programm_kfu_content2_files/invoice-icon_48.png"></A> </div> Код для добавления кнопки прокручивания «Наверх»: Добавление кнопки “^ Наверх” #toTop { width:100px; border:1px solid #ccc; background:#f7f7f7; text-align:center; padding:5px; 50 position:fixed; bottom:10px; /* отступ кнопки от нижнего края страницы*/ right:10px; cursor:pointer; display:none; color:#333; font-family:verdana; font-size:11px; } <SCRIPT language="JavaScript"> function show_menu(v_name) { if ((document.getElementById(v_name).style.display=="none")||(docum ent.getElementById(v_name).style.display=="")) document.getElementById(v_name).style.display="block"; else document.getElementById(v_name).style.display="none"; } function delete_rec(v_url) { window.location.href=v_url; } </SCRIPT> Код для изменения таблиц через flexbox: 51 .container { width: 900px; margin: 30px auto; } .custom-table { width: 900px; border:2px solid #d0d0d0; } .custom-table__head, .custom-table__line { display: flex; } .custom-table__head { background-color: #5F9EA0; position: relative; } .custom-table__line { border-bottom: 2px solid #d0d0d0; } .custom-table__line:last-child { border-bottom: 0; } .custom-table__th, .custom-table__td { display: inline-flex; justify-content: flex-start; 52 padding: 3px; border-right: 2px solid #d0d0d0; } .custom-table__th p, .custom-table__td p { margin-top: 0; margin-bottom: 5px; display: block; } .custom-table__th:last-child, .custom-table__td:last- child, .custom-table__td:last-child, .custom-table__td:last-child { border-right: 0; } .custom-table__th { font-weight: bold; } .custom-table__th:first-child { padding-left: 35px; } .custom-table__th:first-child { flex-basis: 441px; } .custom-table__td:first-child { flex-basis: 475px; } 53 .custom-table__th:nth-child(2),.custom-table__td:nth- child(2) { flex-basis: 120px; } .custom-table__th:last-child,.custom-table__td:last-child { flex-basis: 310px; } .custom-table__action { display: flex; align-items: center; justify-content: flex-start; flex-basis: 40px; cursor: pointer; } .color_tr{ background: #B0E0E6; } .custom-table__action:first-child { padding-left: 3px; } .toggle-table-body { display: inline-block; margin-right: 5px; color: white; 54 font-size: 30px; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; transition: all 0.3s ease; } .toggle-table-body.closed:before { content: '+'; } .toggle-table-body.opened:before { content: "\2013"; } Код для подключения main.js для стилей: $(document).ready(function(){ $('.toggle-table-body').click(function(){ var id = $(this).data('id'); $('[data- body="' + +'"]').slideToggle(500,function(){ if($('[data- id="' + +'"]').hasClass('opened')) $('[data-id="' + +'"]').removeClass('opened').addClass('closed'); else 55 $('[data-id="' + +'"]').removeClass('closed').addClass('opened'); }); }); }); 56

СОДЕРЖАНИЕ

Купить