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

Разработка прототипа системы
управления web-содержимым
Отчёт за III семестр.
Анисимов А.О.
гр. 6209
Руководители:
Васючкова Татьяна Сергеевна,
к.ф.-м.н., НГУ, доцент,
Семёнов Илья Аркадьевич, ген.
директор ООО “Интернет Сервис”
Введение
Данный документ содержит отчёт о проделанной работе над курсовым проектом за третий
семестр учебного курса. Цель курсового проекта - разработка программного средства для
управления содержимым web-сайтов, которое должно предоставить своим пользователям
простой и доступный способ управления информацией на уже созданных web-сайтах. В
отличие от большинства подобных систем, данная система должна позволить управлять
содержимым без вмешательства в работу сайта, используясь как отдельное средство
управления.
За семестр были проведены следующие виды работ:
 изучена предметная область;
 проведён анализ требований;
 определены основные отличия от подобных систем;
 определены границы и основные функции системы;
 определены основные проблемы реализации подобной системы; из возможных
вариантов решения выбраны наиболее приемлемые;
 составлен список пользователей и возможные сценарии их действий;
 подготовлена функциональная спецификация программного продукта;
Результаты работы будут использоваться для развития проекта и начала проектирования.
Проектирование и реализацию планируется осуществить в течение четвёртого семестра.
Описание проекта
Система управления web-содержимым предназначена для изменения содержимого сайтов.
Она не зависит от того, как реализован сайт и какую структуру он имеет. Все основные
функции системы, такие как редактирование и показ информации выполняются на
клиенте (браузере). Поэтому, данная система отличается от большинства других систем
управления содержимым, которые используются как основа для будущего сайта, и
предоставляют минимум функций для изменения содержимого уже созданного сайта.
Основными предпосылками для создания подобной системы являются отсутствие у
заказчика сайта возможности изменить содержимое своего сайта, не прибегая к услугам
разработчиков. Если же такая возможность имеется, то изменению как правило подлежат
только небольшие участки информации, такие как лента новостей или текст статьи. В
таком случае функционал для изменения как правило недостаточно удобный и простой,
чтобы им могли пользоваться люди, имеющий малый опыт работы с компьютером или
internet. Целью данной системы является устранение всех вышеперечисленных
недостатков.
В качестве первого этапа должен быть создан прототип, который включает следующие
функции:
 Изменение содержимого на отдельной странице сайта. Пользователю
предоставляется возможность изменить любой выбранный им элемент страницы.



При этом все изменения видны сразу и нет необходимости перезагружать страницу
или иметь функцию предварительного просмотра.
Для редактирования информации используются стандартные компоненты,
позволяющие изменять стиль текста (жирный, наклонный, подчёркнутый), шрифт,
размер, выравнивание, отступ, создание маркированного и немаркированного
списков, а также вставки и удаления картинок и гиперссылок.
Общие элементы страниц, такие как меню, верхняя и нижняя часть, должны
рассматриваться как один элемент, и редактироваться один раз. Таким образом,
если пользователь изменит один из общих элементов на одной странице,
изменения затронут все страницы, содержащие этот элемент.
Показ изменений для посетителей сайта. После того как пользователь (редактор)
изменит содержимое страницы, и сохранит изменения, обновлённая версия
страницы незамедлительно становится доступной посетителям сайта.
Прототип предназначен для демонстрации возможности осуществления подобной
системы, поэтому он НЕ включает следующие функции:
 Управление списком пользователей;
 Контроль изменений страниц;
 Механизм отмены/возврата изменений при редактировании;
 Функционал для создания новых элементов на странице;
 Функционал для удаления элементов страницы;
 Функционал перемещения элементов страницы.
Замечания
Все эти функции планируется реализовать в качестве развития системы.
Пользователи и их роли
В системе имеется одна группа пользователей – редакторы. Они занимаются
редактированием информации на страницах сайта. Этим пользователям доступны все
функции, перечисленные ниже.
В дальнейшем, при развитии системы, предполагается наличие второй группы
пользователей – администраторов. Этой группе будет доступен функционал для
управления списком пользователей из группы редакторов, а также отслеживания
изменений.
Замечания
В прототипе требуется наличие хотя бы одного пользователя из группы редакторов.
Данные этого пользователя (имя пользователя и пароль) должны храниться в настройках
приложения.
Варианты использования
Ниже приведены варианты использования системы для пользователей из группы
редакторов.
1. Вход в режим редактирования
Описание
Условия
Событие
Порядок
Пользователь активирует режим редактирования на странице.
Пользователь открыл страницу сайта с установленной системой управления
содержимым.
Нажатие на иконку CMS в правом нижнем углу экрана.
1. Рядом с иконкой CMS появляется форма с полями для идентификации
выполнения
Результаты
Замечания
(имя пользователя и пароль).
2. Пользователь вводит необходимую информацию и нажимает кнопку
Войти.
3. Система проверяет введённую информацию. В случае несовпадения с
имеющейся информацией выдаётся сообщение об ошибке ввода и
повторяется п.2.
4. К заголовку страницы добавляется текст “(режим редактирования)”.
5. Курсор изменяется на указатель.
6. Рядом с иконкой CMS появляются ещё две – Сохранить и Отмена,
предназначенные для сохранения и отмены изменений на странице
соответственно.
Просматриваемая страница переведена в режим редактирования.
Форма авторизации может исчезать автоматически, когда пользователь нажал
левую кнопку мыши где-либо на странице.
Если пользователь уже авторизован, то шаги 1-3 опускаются.
2. Выбор элемента страницы
Описание
Условия
Событие
Порядок
выполнения
Результаты
Замечания
Пользователь выбирает элемент страницы для изменения.
Страница находится в режиме редактирования.
Пользователь выбирает указателем мыши нужный элемент и нажимает левую
кнопку мыши.
1. Всё содержимое страницы блокируется для ввода.
2. В центре страницы появляется окно с редактором, в который помещается
содержимое выбранного элемента. В редакторе представлен стандартный
набор функций для изменения содержимого – изменения стиля (жирный,
наклонный, подчёркнутый), шрифта, размера, выравнивания, отступа,
создания маркированного и немаркированного списков, а также вставки и
удаления картинок и гиперссылок. Под редактором находятся две кнопки –
Изменить и Отмена для сохранения и отмены изменений соответственно.
Также рядом с кнопками находится флажок “Изменить все похожие
элементы на сайте” для того чтобы пользователь мог определить текущий
редактируемый элемент как общий.
Выбранный блок доступен для редактирования.
Блокировка страницы осуществляется обычным для оконных приложений
способом: окно редактора переводится в т.н. модальный режим, при котором
всё, что находится снаружи окна, затеняется. При попытке пользователя
обратиться к затенённой области заголовок модального окна мигает, что
означает, что это окно необходимо закрыть, прежде чем обращаться к
заблокированному содержимому.
Для того чтобы пользователю было легче выбрать нужный элемент для
редактирования, при перемещении указателя текущий элемент должен
выделятся цветом или бордюром.
3. Изменение элемента страницы
Описание
Условия
Событие
Порядок
выполнения
Пользователь изменяет текст выбранного элемента.
Пользователь выбрал элемент для редактирования.
Нажата кнопка Изменить в редакторе.
1. Изменяется содержимое редактируемого элемента на странице.
2. Закрывается окно редактора.
Результаты
Замечания
3. Снимается блокировка страницы.
Пользователь изменил содержимое выбранного элемента. Появилась
возможность редактировать другую информацию на странице.
Если выбран флажок “Изменить все похожие элементы на сайте”, то на шаге
1 также изменяется содержимое всех элементов страницы, которые имели
такое же содержимое, какое было у выбранного элемента до начала
редактирования.
При нажатии кнопки Отмена в редакторе выполняются только шаги 2-3.
4. Сохранение изменений
Описание
Условия
Событие
Порядок
выполнения
Результаты
Замечания
Пользователь сохраняет все изменения на странице.
Страница находится в режиме редактирования.
Нажатие на иконку Сохранить в правом нижнем углу экрана.
1. Все активные элементы страницы, которые выделены для
редактирования, снимают выделение.
2. Скрываются кнопки Сохранить и Отмена в левом нижнем углу экрана.
3. Пользователю сообщается о начале процесса сохранения.
4. Вся информация страницы сохраняется на сервере.
5. Пользователю сообщается о статусе сохранения. Если при сохранении
произошли какие-либо ошибки, и страница не сохранена, показывается
соответствующее уведомление.
Все изменения на странице сохранились и стали видны посетителям сайта;
страница вернулась в режим просмотра.
В дальнейшем неплохо было бы сделать контроль изменений для каждой
страницы с целью фиксировать все изменения и иметь возможность отката
после сохранения страницы.
5. Отмена изменений
Описание
Условия
Событие
Порядок
выполнения
Результаты
Замечания
Содержимое возвращается к исходному варианту.
Страница находится в режиме редактирования.
Нажатие на иконку Отмена в правом нижнем углу экрана.
1. Все активные элементы страницы, которые выделены для
редактирования, снимают выделение.
2. Скрываются кнопки Сохранить и Отмена в левом нижнем углу экрана.
3. Восстанавливается вся информация на странице, какая была на момент
начала редактирования.
Все изменения на странице отменены; страница вернулась в режим
просмотра.
Для того чтобы ещё раз изменить содержимое страницы, пользователю
понадобится повторить действия из п. 5.2.
Проблемы создания независимой CMS
Далее описаны основные проблемы, препятствующие реализации независимой системы
управления web-содержимым. Под независимостью системы подразумевается
отделимость системы от web-страниц, содержимым которых она должна управлять.
Основные принципы
Подразумевается, что система абсолютно не зависит от страниц, содержимым которых
она должна управлять. Эти страницы могут иметь различный дизайн и расположение
элементов, а также, рассматривая сайт как набор страниц, они могут иметь общие
элементы, такие как логотип, меню, и т.д.
DOM интерфейс
Основной и единственный интерфейс, который должен позволить системе изменять
содержимое страницы – т.н. DOM интерфейс. Он позволяет представить страницу как
дерево, содержащее элементы оформления и текст. Это дерево строится браузером, после
того, как он получит и обработает HTML-код с сервера.
Ниже приведены основные проблемы реализации и наиболее приемлемые варианты их
решения.
1. Идентификация элементов
После того, как пользователь изменит содержимое отдельного элемента DOM-дерева,
необходимо отображать эти изменения при новом открытии страницы. Для этого
требуется однозначно идентифицировать элемент страницы, который был
отредактирован. Проблема состоит в том, что страница может иметь несколько таких
элементов, не обязательно уникальных. Таким образом, в DOM-дереве могут быть
несколько совершенно одинаковых поддеревьев, которые необходимо однозначно
идентифицировать.
Ко всему этому, один сайт может состоять из нескольких таких страниц, на каждой из
которых могут быть одинаковые элементы, например, меню. Эти элементы должны быть
не только однозначно идентифицированы, но и “распознаны” как общие элементы сайта,
чтобы их изменение на одной странице повлекло автоматическое на всех других
страницах сайта.
Для идентификации таких поддеревьев в одном дереве страницы, необходимо
использовать информацию об остальной структуре страницы, абсолютному пути от корня
дерева, или положение поддерева относительно других поддеревьев. Это приводит нас к
следующей, более серьёзной проблеме.
Решение:
Каждый редактируемый элемент дерева может быть идентифицирован двумя способами:
путём запоминания абсолютного пути из корня дерева и подсчётом значения хешфункции от содержимого этого элемента. Последний вариант помогает решить проблему с
идентификацией одинаковых элементов. Например, если на странице есть два или более
элементов с одинаковым содержимым, то, они будут иметь одинаковое значение хешфункции. После загрузки страницы содержимое всех подобных элементов может быть
заменено, используя эти значения.
Для тех элементов, содержимое которых встречается у других элементах, но подобная
замена не требуется, можно использовать абсолютный путь из корня дерева как
дополнительную информацию, помогающую идентифицировать данный элемент. Этот
путь состоит из пар (<Название_Вершины>, <Номер_Вершины>), где
<Название_Вершины> - это название тега, и <Номер_Вершины> - это порядковый номер
в списке всех вершин с таким названием на одном уровне DOM-дерева. Например, путь
может выглядеть так: (‘body’,0), (‘table’,0), (‘tbody’,0), (‘tr’, 2), (‘td’, 1), (‘a’,0).
2. Различия браузеров
В разных браузерах DOM-дерево может быть совершенно различным. Это может быть
результатом следующего:



Сервер генерирует содержимое страницы в зависимости от модели браузера. При
каждом запросе браузер посылает подробную информацию, включающую название
и версию. Сервер может использовать эту информацию, например, для генерации
HTML-кода, оптимизированного под конкретную модель браузера.
В широко распространённом браузере Microsoft Internet Explorer 6 содержимое
страницы может быть изменено уже на клиенте, в результате работы так
называемых HTC-скриптов, которые не поддерживаются остальными браузерами.
Такие скрипты используются, например, для корректного показа PNGизображений, имеющих альфа-канал.
Браузеры по-разному обрабатывают неправильно оформленный HTML-код. В
результате такой обработки могут получиться совершенно различные DOMдеревья для одной и той же страницы в разных браузерах.
Решение:
Первый вариант, при котором сервер генерирует содержимое страницы, в зависимости от
модели браузера довольно редко встречается на реальных web-сайтах. В основном это
может касаться решения проблемы с PNG-изображениями, имеющими альфа-канал,
описанной во втором пункте. В этом случае структура DOM-дерева существенно не
меняется, изменяются только атрибуты элементов (IMG в примере), что не препятствует
идентификации этих элементов, т.к. их содержимое и абсолютный путь остаются те же.
Остальные случаи следует принять как исключительные, при которых система
действительно может работать не так, как планируется. В силу крайней редкости таких
ситуаций, их стоит отнести за рамки данной системы.
В случае применения HTC-скриптов, используемых для корректного показа PNGизображений с альфа-каналом, DOM-дерево также не меняется, как сказано выше.
Остальные случаи работы HTC-скриптов следует также отнести в разряд
исключительных, т.к. их применение ограничено одним браузером.
Случаи с неправильно оформленным HTML-кодом в большинстве сводятся к отсутствию
закрывающего тега у элементов страницы. В этом случае наиболее распространённые
браузеры, такие как Mozilla Firefox и Microsoft Internet Explorer поступают одинаковым
образом – они автоматически добавляют закрывающий тег и помещают все последующие
элементы внутрь данного элемента. Таким образом, в большинстве случаев DOM-дерево
будет одинаковым.
3. Поисковые системы
Страницы с отдельно хранимым содержимым не могут быть проиндексированы
поисковыми роботами. В случае если последние при индексации обнаружат
перенаправление с одной страницы на другую (например, с адреса содержимого на адрес
страницы, содержащей текст), поисковые системы автоматически заносят страницу в
чёрный список. В таком случае страница не сможет быть найдена с помощью данной
поисковой системы.
Решение:
Для решения проблемы индексации используется специальная ссылка, добавляемая на
страницу, которую необходимо проиндексировать, сразу при установке системы. Эта
ссылка имеет определённый адрес, ведущий на сервер содержимого (content-сервер),
который может быть установлен там же, где и основной сайт. Поисковая система,
индексирующая страницу с такой ссылкой, должна проиндексировать содержимое,
хранящееся на content-сервере. Далее, при поиске, поисковая система должна направлять
пользователей на адрес сервера содержимого. Сервер содержимого же должен
представлять информацию, а также ссылку на страницу, информация которой была
представлена. При этом пользователя необходимо уведомить о том, что он просматривает
не искомую страницу, а лишь часть содержимого этой страницы, и что полная
информация представлена на оригинальной странице.
Глоссарий










CMS (от англ. Content Management System) – система управления webсодержимым.
DOM (от англ. Document Object Model) - интерфейс управления содержимым XML
и HTML документов.
HTML (от англ. Hypertext Markup Language) – язык разметки web-содержимого.
HTTP (от англ. Hypertext Transfer Protocol) – протокол взаимодействия клиента с
сервером, описывающий формат пересылки web-содержимого.
PNG (от англ. Portable Network Graphics) – растровый формат хранения
графической информации.
Альфа-канал - процесс комбинирования изображения с фоном с целью создания
эффекта частичной прозрачности.
Браузер (от англ. Browser) – программа, исполняющаяся на стороне клиента,
посылающая на сервер HTTP-запросы и обрабатывающая ответы сервера.
Индексация - процесс добавления сведений о сайте в базу данных, в последствии
использующуюся для поиска.
Поисковая система – web-сайт, предоставляющий возможность поиска
информации в Интернете.
Поисковый робот - программа, являющаяся составной частью поисковой системы
и предназначенная для обхода страниц Интернета с целью занесения информации о
ключевых словах в базу поисковика.
Ссылки




http://browsing.ru/
http://www.w3.org/MarkUp/html4-updates/translations#Russian
http://www.alistapart.com/articles/pngopacity/
http://webest.info/seo/search-engine-bot.php