web gui что это

Что такое GUI или как повысить эффективность веб-сайта

GUI в переводе с английского (Graphical User Interface), графический интерфейс пользователя. Но не стоит думать, что сеть Интернет полностью идентична программному приложению в стиле GUI.

В этой статье я расскажу о том, как создать сайт в стиле GUI или перейти к этому стилю.

Те, кто только что познакомились с GUI, вероятно захотят взять и просто применить к веб правила разработки интерфейса, которые используются в классических программных приложениях с типичным GUI и они будут отчасти правы, если учесть, что веб-сайт всё-таки является разновидностью программы. И всё же я бы не стал делать такие выводы, ведь не стоит забывать и о том, что веб-дизайн имеет свои соглашения.

Для начала, я предлагаю рассмотреть, что же делает веб-сайты отличными от GUI приложений. Это доставка. Доставка информации через сеть интернет. Пользователь веб-сайта получает информацию постранично (т.е. по странице за один запрос), настольным же приложениям свойственно устанавливаться на компьютер пользователя полностью после загрузки дистрибутива через сеть Интернет или через CD-ROM. И то, что настольное приложение сразу полностью устанавливается на компьютер пользователя, даёт ему неоспоримые приемущества по сравнению с веб-сайтом. Но достоинство последнего в обратном. Постраничная загрузка информации даёт пользователю возможность получать только ту информацию, которая ему необходима.

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

Принципы построения GUI

Теперь я расскажу про основные принципы построения GUI, изменённые для веб (другими словами о том, как построить GUI приложение).

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

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

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

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

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

Восприятие постоянства. Пользователи будут чувствовавть себя более комфортно, если дизайн сайта остаётся им понятен и знаком, нежели в том случае, если интерфейс сайта изменяется в случайном порядке. К сожалению не все сайты обеспечивают стабильность в дизайне форм или кнопок. Если вы всё же решили изменить стиль меню или другого элемента дизайна, то делайте это постепенно. Это простое правило может значительно повысить уровень эффективности веб-сайта.

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

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

Заключение

Ну вот я и рассказал об основных принципах GUI.

Теперь предлагаю подытожить всё вышесказанное. Итак. Вот основные принципы GUI:

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

Источник

Универсальный web-GUI для произвольных RESTful сервисов

Во многих компаниях, как и моей, есть много проектов и продуктов. И у продуктов бывают веб-интерфейсы, чтобы этими продуктами как-то манипулировать. В нашем случае это простенькие RESTful веб-сервисы, а поверх них ещё более простенькие веб-странички с формочками и кнопочками. Все эти веб-странички до того похожи друг на друга, что возникла мысль написать унифицированный продукт, который бы спрашивал сервер о поддерживаемых сервисах, и получал бы полное описание параметров к этим сервисам, так чтобы можно было нарисовать те самые простенькие формочки. То есть, веб-сервисы должны описывать себя, достаточно исчерпывающе, чтобы наш клиент мог построить GUI для них, и ничего не надо было бы делать руками. Как раз такая картинка гуглится по запросу «REST»:

Сходу нашлась такая технология, как WADL — Web Application Description Language. Но это XML, с ним не хотелось возиться в javascript, python и perl. Был выбран его более легковесный JSON-аналог — JSDL — JSON Service Description Language.

Требования к сервисам

Валидируем JSDL

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

Расширяем JSDL

Для решения этих проблем схему JSDL-описания параметра (ту самую метасхему) пришлось расширить следующим образом:

Теперь есть все данные, чтобы нарисовать формочку для запроса и правильно отправить её содержимое сервису. Результат выводим на страничку.

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

Источник

🇮🇹 Что такое GUI (графический интерфейс пользователя)?

GUI или графический пользовательский интерфейс – это интерфейс, предоставляемый пользователю, суперпользователю или администратору для простого взаимодействия с системой.

Графический интерфейс обычно состоит из одного прикосновения или нажатия компонентов, таких как кнопка, текстовое поле, слайдер, изображение и т. д.

История GUI

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

Первый коммерчески доступный графический интерфейс разработан Xerox под названием PARC.

Он выпущен с именованной информационной системой Xerox 8010, выпущенной в 1981 году.

После этого Стив Джобс увидел GUI в туре по Xerox. Запущена операционная система Apple на основе графического интерфейса для персонального компьютера Macintosh, выпущенная в 1984 году.

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

GUI Компоненты

Графический интерфейс состоит из разных компонентов.

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

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

До GUI интерфейс командной строки или простой CLI был способом взаимодействия с системой или приложениями.

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

Вот некоторые преимущества GUI.

Примеры GUI

Сегодня многие операционные системы, программы и приложения имеют графический интерфейс. Здесь мы перечислим различные типы GUI

Google Chrome предоставляет классические компоненты графического интерфейса, такие как вкладка, меню, кнопка, изображение и т. д.

Windows Server GUI предоставляет пользователям доступ к рабочему столу.

Windows Проводник GUI предоставляет левую панель для навигации с панелью для списка файлов и папок

Linux GUI

Linux – открытая и вызывающая операционная система.

Linux в основном начинался как операционная система на основе командной строки, которая в основном предназначена для опытных пользователей.

Со временем он сильно изменился и интегрировал различные компоненты и инструменты графического интерфейса, такие как Desktop Manager.

Linux имеет тот же опыт для Windows с точки зрения рабочего стола.

Linux предоставляет различные графические окружения рабочего стола, как показано ниже.

Графический интерфейс Windows

Windows – самая популярная операционная система пользовательского уровня, где ее графический интерфейс делает ее настолько популярной.

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

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

Источник

Универсальный GUI

Введение

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

Кроме того, в связи с бурным распространением интернета популярным направлением разработки ПО стала разработка веб-приложений или веб-сервисов. Веб-приложение является полезным дополнением к клиентской прикладной программе (приложению). Обычно веб-приложение даёт возможность удалённого использования мониторинговой системы. Это означает, что пользователь не привязан к месту расположения аппаратной части мониторинговой системы и может использовать её из любой точки мира, где есть рекомендуемое интернет-соединение. Важно заметить, что разработка веб-приложений в значительной степени отличается от разработки клиентских приложений и это в свою очередь создаёт некоторые проблемы. В частности, это проблема создания универсального графического интерфейса пользователя (GUI). Чтобы клиентское приложение и веб-приложение были реализованы в едином графическом стиле, необходимо приложить достаточно усилий как разработчику интерфейса клиентского приложения, так и разработчику интерфейса веб-приложения. В конечном счёте величина усилий одного или другого разработчика будет зависеть от того, интерфейс какого приложения будет задавать общий стиль.

Современные способы построения интерфейсов

Рассмотрим наиболее популярные в настоящий момент способы построения интерфейсов клиентских приложений на языке C++, как наиболее используемом для разработки ПО, для ОС Microsoft Windows (MS Windows) и ОС Linux. Главным средством разработки ПО для MS Windows является MS Visual Studio [1]. Эта интегрированная среда разработки (IDE) позволяет разрабатывать ПО на разных языках программирования, но основными языками, конечно, являются C++ и C#. Для разработки интерфейса приложения имеются два основных средства — Windows Forms (WinForms) и Windows Presentation Foundation (WPF). Большая часть существующих приложений для MS Windows разработана с использованием WinForms, однако с появлением более современных версий ОС (MS Windows 7, 8), система WPF становится более популярной. Кроме того, последние версии MS Visual Studio позволяют использовать язык разметки HTML5 для построения интерфейсов, близких по стилю к нативным веб-приложениям. Однако стоит заметить, что коммерческая лицензия MS Visual Studio является платной, как и лицензия MS Windows, что несомненно является недостатком для низкобюджетных проектах.

Если говорить о низкобюджетных проектах, то тут наиболее подходящим вариантом является ОС Linux. Помимо того, что большинство дистрибутивов этой ОС являются абсолютно бесплатными, в том числе и для коммерческого использования, также имеется ряд бесплатных средств для разработки качественного ПО для ОС Linux. Самым распространённым средством для разработки ПО на языке С++ является кроссплатформенный инструментарий Qt [2]. Важно подчеркнуть, что Qt позволяет разрабатывать приложения не только для ОС Linux, но и для MS Windows, Mac OS X, Android и других UNIX-подобных ОС. Разработчики Qt предлагают как бесплатную для коммерческого использования, так и платную лицензию с дополнительными возможностями. Но исходя из современной практики разработки ПО с помощью этого инструментария, бесплатной лицензии оказывается больше чем достаточно.

Если проводить аналогию с MS Visual Studio, то в Qt мы имеем IDE Qt Creator. Здесь альтернативой WinForms являются так называемые виджеты (Qt Widgets), а альтернатива для WPF — Qt Quick. Также в Qt Creator имеется возможность создания интерфейсов на основе HTML5. Но наиболее интересным модулем инструментария является встраиваемый веб-движок WebKit, который лежит в основе всех современных веб-браузеров. Подобный модуль имеется и в MS Visual Studio, но он имеет ряд ограничений, и тем более нас больше интересуют низкобюджетные средства, которые позволяют уменьшить издержки при создания программного продукта. Веб-движок — это ядро браузера, он отвечает за правильное отображения веб-страниц. Модуль Qt WebKit позволяет создавать интерфейс клиентского приложения с использованием техники разработки интерфейсов веб-приложений. В основе создания интерфейса веб-приложения лежит устоявшийся стек технологий. Он включает язык разметки HTML (HTML 4, 5), каскадные таблицы стилей (CSS 2, 3) и скриптовый язык JavaScript с богатым выбором дополнительных библиотек (каркасов). Отдельного внимания заслуживает тот факт, что скорость появления новых полезных каркасов для языка JavaScript стремительно растёт, а это делает разработку, насыщенных функционалом приложений, более быстрой и удобной.

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

Традиционный способ: Qt WebKit + Qt-костыли

Рассмотрим традиционный способ создания универсального GUI с помощью модуля Qt WebKit на примере модуля визуализации данных системы акустического мониторинга, разрабатываемой в рамках кандидатской диссертационной работы [3]. Под системой акустического мониторинга подразумевается система, включающая аппаратную и программную части. Аппаратная часть системы состоит из сенсорной сети акустических датчиков, данные с которых обрабатываются на микроконтроллере и отправляются по какому-либо интерфейсу (UART, IEEE 802.X и др.) на персональный компьютер (ПК). Программная часть состоит из набора прикладных программ, работающих как на локальном ПК (клиентское ПО), так и на удалённом сервере (серверное ПО).

Традиционный метод подразумевает использование межпроцессного

Рис. 1. Традиционный метод реализации универсального GUI

взаимодействия по средствам встроенного механизма Qt. Здесь подразумевается взаимодействие между основной логикой клиентского приложения, изображённой на рис.1 как Обработчик данных, и GUI-элементом. Одним из недостатков такого подхода является то, что код для реализации GUI на языке JavaScript будет иметь специфические функции, которые будут актуальны только для клиентского Qt-приложения. Для серверного приложения, отвечающего за GUI, нужен будет другой, специфичный для серверной реализации, код. Например, в случае использования PHP-скрипта для реализации основной логики серверного приложения, понадобится реализация межпроцессного взаимодействия с помощью какой-либо другой технологии (AJAX или WebSocket). Отсюда следует ещё один недостаток, а именно использование дополнительного языка программирования для реализации основной логики серверного приложения и разработка нового алгоритма межпроцессного взаимодействия.

Более интересный подход: Qt WebKit + WebSocket

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

Рис. 2. Новый метод реализации универсального GUI

На рис. 2. видно, что теперь для межпроцессного взаимодействия, как для клиентской, так и для серверной части используется технология WebSocket. То есть теперь мы имеем один универсальный JavaScript код для разных приложений. В этом случае необходимым условием является серверное приложение, основная логика которого реализована с помощью Qt, на не совсем привычном для веб-разработчиков, языке C++. С одной стороны такой подход к реализации серверного приложения усложняет задачу для узкоспециализированного веб-разработчика. Но с другой стороны мы имеем универсальные части кода, которые позволяют нам сэкономить время на дублировании одних и тех по смыслу алгоритмов на разных языках. Важно также подчеркнуть, что для использования технологии WebSocket необходима дополнительная библиотека, которая имеется в интернете в свободном доступе или включается по умолчанию в более поздние версии Qt.

Рис. 3. Локальное (справа) и серверное (слева) приложения, запущенные на ОС Ubuntu 14.04

На рис. 3 приведён пример реализации нового метода создания универсального GUI для ОС Ubuntu 14.04. Как видно на рисунке, в конечном итоге мы получаем универсальный интерфейс, как для локального приложения, запущенного в качестве исполняемого файла ОС, так и для серверного приложения, запущенного в современном веб-браузере. Так как для разработки ПО используются кроссплатформенные инструменты, это позволяет говорить о простой переносимости программного продукта на другие ОС в будущем.

Источник

Веб-интерфейсы: развитие или наоборот?

Текстовый режим

На недостатках текстовых интерфейсов мы не будем останавливаться, они очевидны. Но в текстовом режиме была и неоспоримые преимущества:

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

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

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

Оконные интерфейсы

Веб-приложения

Но все ли так хорошо?
При отсутствии сети не можем работать, ну это еще как-то терпимо, сеть должна быть всегда, иначе нет групповой работы и коммуникации. Если что-то зависло во время ввода или сеть пропала — теряются введенные данные, отправить по сети нельзя, а локально сохранить негде (локальный сторидж и Web SQL пока не везде доступны). На всем печать идеологии REST, полное отсутствие состояния. Отсутствие средств Разные браузеры, а них особенности, требуется дополнительное тестирование и отладка. Верстку иногда делаем отдельно для IE (реже возникают версии для других браузеров), но это при очень хитрой разметке.

Тенденции развития веб-интерфейсов

Рассмотрим подробнее визуальные контролы и решения

Зона прокрутки — для сайтов типична прокрутка полноэкранная, когда весь контент с элементами управления прокручивается разом одним трекбаром справа (или слева для right-to-left). Однако, для веб-приложений это не удобно и гораздо более адекватным решением будет принцип «прикрепления панелей» (как это принято в оконных приложениях), например, инструменты находятся на панели, которая прикреплена к верхней границе окна браузера и растянута на всю ширину, а слева может размещаться панель с динамически подгружаемым деревом, приклеенная к левому краю окна, снизу — строка состояния, справа — панель с контекстными задачами, всю же центральную часть экрана занимает объект работы: документ, карта, таблица, изображение и т.д. Каждая зона имеет свою прокрутку. Конечно идеально, чтобы прокрутку имела только зона в центральной части, а все остальные панели были без прокрутки или прокрутка бы осуществлялась не в трекбаром и только по одной оси.

Сплитер. Для оконных приложений пользуется популярностью динамический разделитель между панелями, который можно перетягивать мышью. Для веб-интерфейсов его тоже реализовали, но пользуются им не часто, а уже в мобильных приложениях сплитер не применим вовсе. Есть несколько решений: «дискретный сплитер», имеющий несколько состояний и переключающийся между ними при нажатии на управляющий элемент. «Умный сплитер» — подстраивает размеры панели под разрешение и конетнт, а перетягивать мышью его нужно крайне редко. «Уплывающий сплитер» — при долгой неактивности скрывает панель, а при подведении мыши — возвращает, но с этим есть проблемы на тачскинах, курсора то мыши там нет.

Дерево — для полного счастью дерево должно удовлетворять почти тому же перечню, что и грид: подгружаться динамически, управляться мышью и с клавиатуры, редактироваться по месту и т.д.

Главное меню — забыть как страшный сон! Этот атавизм от оконных приложений в вебе не имеет права на жизнь.

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

Комбобокс — cтандартный html-ный комбо-бокс ужасен и по дизайну, который нельзя полностью переопределить и по функционалу, который ограничен банаьным выпадающим списком строк. Нам нужен комбо-бокс с многими режимами, с инкрементным поиском, позволяющим выбирать из больших справочников, с возможногстью выбирать несколько значений, с группами, с картинками (и вообще с элементами с богатым html+css оформлением).

Заключение

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

Добавлено: картинку для медитаций убрал, она Вам не нравится, я чувствую.
А иллюстрации попробую все же собрать в ближайшие дни.

Рис 1: Как некрасиво делать уезжающие тулбары на примере GMail