ProtoSite PRJ

Протосайт— это стенд технологических экспериментов для развития процессов разработки и тестирования интернет-решений; для применения веб-стандартовконсорциума W3C; для исследования программных модулей в среде с минимальными ограничениями инфраструктуры; для определения технического отставания публичного ПО при реализации актуальных веб-стандартов.

Три сателлита объединены в проект "Протосайт":

Дизайн-система Протосайтаопределяет правила оформления и поведения элементов интерфейса пользователя. Составлена библиотека компонентов и инструментов для визуализации данных в интернет-браузере. Реализация «визуального языка» доступна через редактируемые параметры дизайн-системы. Дизайн-система Протосайта придерживается ключевых понятий простоты восприятия и удобства взаимодействия с интерактивным контентом.Программное ядро Протосайтаотвечает за реализацию взаимодействия пользователя с цифровым продуктом или услугой. Ядро предлагает коллекцию программных модулей для визуализации элементов графического интерфейса и реализации алгоритмов работы веб-приложения. Инфраструктура сателлита позволяет вести разработку через автоматизированное тестирование. Отчеты о степени покрытия кода тестами (покрытие кода): [chromatic-chandelier], [protosite-core]. Выполняется как функциональное тестирование по спецификации, так и системное тестирование с проверкой визуализации.Палитра Протосайтапредоставляет цветовое решение адаптированое к использованию в разных технологических стеках смежных проектов. Модули CSS применяют правиласпецификации 4-го уровня.

Активы сателлитов представлены пакетами NPM и репозиториями GitHub. Для каждого сателлита определена изолированая среда разработки и тестирования. Инфраструктура сателлитов поддерживается в том состоянии, которое оптимально для проведения экспериментов и применения обновляемых веб-стандартовW3C.

Цель проекта"Протосайт" — разработка решений в сети интернет с использованием нативных для браузера технологий, с применением актуальных веб-стандартов.

Объекты
пользовательского интерфейса

  1. Панель инструментов
  2. Статья
  3. Сообщение

Объект это ...

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

Компоненты
графического интерфейса

Интерактивность:

  1. Кнопка
  2. Вкладки
  3. Модальное окно
  4. Пагинация
  5. Всплывающая подсказка

Ввод данных:

  1. Текстовое поле
  2. Поле выбора значения
  3. Диапазон чисел
  4. Флажки и переключатели

Визуализация данных:

  1. Панель
  2. Параметризованный список
  3. Диаграмма
  4. Аватар пользователя
  5. Миниатюра изображения

Компонента это ...

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

Элементы HTML

  1. Форматирование текста
  2. Параграф
  3. Таблица
  4. Списки перечислений и перечней

Cлужебные веб-страницы

  1. Авторизация не выполнена
  2. Доступ запрещен
  3. Ошибка сервера
  4. Страница не найдена
  5. Ресурс временно недоступен

Косметическое оформление
типовыми стилями

  1. Оформление текста
  2. Окраска
  3. Тени