В прошлой статье я кратко описал мой необычный нанофреймворк, в котором всего десять тегов и flexbox по умолчанию. Для освоения которого надо учить меньше, а не больше. Он может быть полезен например для обучения детей, или для «творческих» людей, которым тяжело изучить обычное веб-программирование и его сложные непонятные фреймворки.

В этой статье я расскажу о дизайне WCMS сделанной в рамках шаблона HTML10, и опять поделюсь исходным кодом — это мой дипломный проект инженера-программиста.

Задача — разработать клиент-серверную программу для сохранения знаний в виде дерева-иерархии документов (как в библиотеке), максимально простую и удобную, чтобы справились даже дети 12+ и очень пьяные инвалиды.

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

Эта WCMS может быть использована например студентом или писателем, любым Издателем веб-документов. Возможно сделать свою энциклопедию подобную Википедии, но функция поиска документов пока возможна только для владельца и только на локальном сервере.

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

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

1. слово
2. структурный блок
3. изображение
4. аудио
5. видео
6. холст
7. векторная графика

Это соответствует тегам:

1. span или s
2. div
3. img
4. audio
5. video
6. canvas
7. svg

Последние два пока не используются. Дополнительная семантика возможна через WAI-ARIA.

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

Слово может быть выделено цветом, жирным или курсивным начертанием, или может содержать ссылку:

• ссылка на определенный раздел документа — документ прокручивается до «якоря»
• ссылка на другой документ — открывается новый документ поверх предыдущего
• ссылка на внешний сайт — открывается в новой вкладке браузера

Документ содержит информацию для роботов:

• имя автора
• язык
• описание документа в поиске
• теги
• состояние документа — неизменный/изменяемый
• заголовок документа

Проектирование взаимодействия

Основное средство ввода на которое я ориентируюсь — сенсорный экран, Mobile First. В графическом интерфейсе используются только: прокрутка колесом мышки или пальцем, и три универсальных события для кнопки мышки и пальца — нажатие, перемещение, отжатие. Работать с этой WCMS можно сидя за столом или лежа на диване, в транспорте или в поле — в любом нормальном браузере.

Серверная часть

Для работы нужен локальный или удаленный php-сервер. Если хватит мощности то достаточно бесплатного хостинга, потому что не используется БД. Кстати, на бесплатном хостинге можно даже не покупать себе имя домена, и использовать тот адрес который тебе дадут бесплатно, то есть использование ВебИздат может быть совершенно бесплатным.



При первом запуске система предлагает придумать логин и пароль, и открывает страницу редактора, которую для удобства можно сохранить в закладки браузера. В процессе работы все данные сохраняются в папку Данные на сервере — так легко архивировать и восстанавливать данные. Структура Данных простая:



Сервер очень тонкий, десяток простейших микроскопических php-функций:

1. запросить логин и пароль
2. создать папку
3. удалить папку
4. переименовать папку
5. переместить папку
6. сканировать папку
7. создать файл
8. загрузить файл
9. сохранить файл
10. удалить файл

Клиентская часть

1. озвученный графический интерфейс
2. путь-адрес текущего документа или раздела, в папке Данные
3. команды редактора: создать, удалить, вырезать, вставить, переименовать раздел или документ
4. каждое изменение документа автоматически сохраняется
5. отмена и повтор изменений документа
6. поиск и замена слов и словосочетаний
7. настройки информации для роботов
8. собственный буфер обмена для импорта-экспорта текста через диалоговое окно браузера
9. множественные копирование и вставка, стекообразный буфер обмена
10. загрузка медиафайлов на сервер

Графический интерфейс пользователя

Легко заменить оформление и озвучку, заменив папку Оформление.

Владелец/гость может редактировать/просмотривать:

• заглавную страницу
• дерево разделов и документов
• документы

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



Документ состоит из заголовка и разделов-глав. Каждый раздел может быть свернут или раскрыт. Нажатие кнопки Разделы сворачивает все разделы — получается содержание-оглавление книги. Кнопка Экспорт выдает для копирования в буфер обмена системы весь текст документа или выделенный фрагмент.



Раздел может содержать 10 типов подразделов:

1. заголовок
2. абзац текста
3. цитата (подпись + абзац текста)
4. список
5. таблица
6. паспорт (изображение + текст)
7. заставка (изображение)
8. галерея (последовательность изображений)
9. аудио
10. видео

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

Видео-демонстрация работы:


Чтобы вставить ссылку в текст, надо сначала скопировать ссылку в буфер обмена WCMS:

• для копирования якоря надо нажать на Стрелку в заголовке рездела
• для копирования ссылки на документ надо нажать на кнопку Ссылка в меню документа
• www-ссылку надо скопировать в буфер обмена ОС

Далее надо выделить слово в тексте и нажать кнопку вставки ссылки:

• вставка якоря (пунктирная черта снизу)
• вставка внутренней ссылки (сплошная черта снизу)
• вставка-импорт внешней ссылки (сплошная черта сверху)

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

Всё что надо знать для использования ВебИздат написано в этой статье. Ссылка для скачивания zip-архива содержимого корневой папки сервера (111 Кб, бета-версия 7). Просто распакуйте его на сервере и откройте ваш сайт в любом нормальном браузере.



Электропочта на Яндексе для отзывов и предложений: max.minimus@