HTML, CSS, JS, AJAX. Клиентская часть центра тех поддержки.

Две динамические страницы.  Клиентская страница и страница редактирования.  

ТЗ  на центр поддержки Iron Logic

Цель

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

Ограничения:

- минимальный размер кода клиента. Используем непосредственно HTML, CSS, JS

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

Инструмент для получения информации

Любое устройство способное  просматривать веб страницы

База знаний

Для программирования  информация делится на два типа:

• Статья – ответ на вопрос – она не имеет перехода на другие ресурсы
• Статья – маршрут – позволяет выбрать направление поиска информации. Как оглавление в книге.

База знаний состоит из статей. Каждая статья является набором блоков. Блок это фрагмент информации в виде текста и/или  рисунка или фильма.  Блок может иметь  ссылку на другую статью или на другой ресурс.

Блок – единичный элемент информации. Состоящий из текста , картинки (фильма)  и ссылки.

Два способа поиска информации

• Переходы по пунктам меню
•  Поиск по ключевым словам  \ группам слов

Массив блока

Номер, версия, текст, ссылка перехода, ссылка картинки (фильма), признак оформления

Массив статьи

Номер, версия, текст (название статьи), массив номеров блоков (ссылок на блоки),  количество блоков в строке, массив редакторов

Типы абонентов

Имеют разные задачи и возможности. Для входа используют разные адреса.

- ПОЛЬЗОВАТЕЛЬ, главный получатель информации, тот для кого все это делается. Входит на главную страницу  ,например, help8.ru без пароля и регистрации.

- РЕДАКТОР.  Готовит информацию на сайте для пользователя. Входит в кабинет по адресу  редактор.help8.ru 

Описание

При первом  входе на сайт получаю страницу  и уникальный ID

Далее все запросы отправляю вместе со своим ID. Он хранится в куки  или (предпочтительно) в веб хранилище.

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

Нажимая на блоки  можно передвигаться по статьям в поиске  нужной информации.

Обмен данными  клиент сервер

Подключение

• Отправляю пустой запрос на сайт (без номера статьи и без ID)
• Получаю  HTML, CSS, JS,  новый ID

Поиск по меню

• Отправляю серверу номер стартовой  статьи = 1( сервер понимает, что это стартовая страница  и  отрабатывает номер, который назначен стартовым),  ID
• Получил статью в виде массива
• Построил страницу
• Догружаю рисунки
• По клику на блоке отправляю серверу номер новой статьи,  ID
• Получил новую статью в виде массива
• Переписал блоки
• Догружаю рисунки
• 
  
• Поиск по ключевым словам (группам слов) – из поисковой строки
• Получил строку поиска,  удалил запрещенные символы
• отправляю серверу  ID,  строку поиска
• Получил статью в виде массива
• Переписал блоки
• Догружаю рисунки

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

Окно редактирования

• Повторяет окно просмотра
• Блок разделен на две  части 2/3 и 1/3,   левая – переход, правая редактирование, открывается контекстное меню
• Название статьи,  левая треть – редактирование статьи
• Контекстное меню
  • Добавить
  • Удалить – Для статьи вставляется текст “информация удалена” и очищается массив номеров блоков.  Для блока – удаляется номер из массива номеров блоков
  • Редактировать
  • Копировать
  • Вставить копию
• Редактировать 
  • Количество блоков в строке (статья)
  • Порядковый номер блока в статье – сортировка (статья)
  • Авто нумерация (статья)
  • Текст
  • Ссылка перехода
  • Ссылка на рисунок
  • Признак   оформления  текст/рисунок
    • Рисунок – при наведении появляется текст, по клику открывается  рисунок в новом  маленьком окне
    • Текст на фоне рисунка – при наведении появляется рисунок, текст становится полупрозрачным. Текст можно скопировать