Материал: Разработка Web-приложения для создания презентаций

Для обеспечения визуального оформления веб-страниц применяется технология каскадных таблиц стилей или CSS [10], предназначенных для описания внешнего вида документа, написанного с использованием языка разметки, которым является веб-страница, базирующаяся на HTML. Применение правил таблицы стилей к элементам страницы позволяет представить ее как дружественный и интуитивно-понятный интерфейс.

Для придания отзывчивости и интерактивности веб-страницам применяется язык сценариев JavaScript, который позволяет манипулировать элементами страницы [15]. Кроме того, JavaScript позволяет разрешить проблему архитектуры запрос-ответ протокола HTTP, занимающегося передачей веб-страниц, которая заключается в необходимости полной перезагрузки страницы с сервера для обновления информации.

Скриптовый язык JavaScript позволяет обновлять часть данных на странице с помощью фоновых запросов к серверу и последующем обновлением некоторых элементов страницы в соответствии с полученными данными. Такой подход к построению интерактивного пользовательского веб-интерфейса называют AJAX [12]. AJAX позволяет значительно сократить передаваемый трафик и нагрузку на сервер, а так же ускорить реакцию интерфейса, поскольку объем получаемых данных мал и запрос происходит в фоновом режиме. Таким образом, отзывчивость интерфейса значительно повышается.

Для сокращения времени разработки и объемов кода на JavaScript обычно применяют фреймворки или библиотеки, содержащие типовые функции. Наиболее популярным представителем библиотек JavaScript является библиотека jQuery, которая располагает удобными функциями для манипулирования элементами страницы, совершения фоновых запросов к серверу [16], что полностью удовлетворяет требования разрабатываемого сайта. Кроме того, она легко расширяется дополнительными библиотеками.

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

1.2 Мультимедийное представление информации

сайт презентация интернет серверный

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

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

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

1.3 Аналоги существующих платформ

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

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

Программа платная, для личного пользования Office 365 за 2499 руб в год..

Ключевое отличие - знаменитая простота использования Apple (“ease of use”). Функционал программы намного проще и практичнее. Хороший дизайн шаблонов слайдов и графических элементов.

Программа платная , и запускается на операционной системе OS XПрезентации.

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

Глава 2. Разработка Web-приложения для создания презентаций

.1 Техническое задание на разработку приложения

.1.1 Введение

Настоящее Техническое задание разработано в соответствии с требованиями ГОСТ 19.201-78 и является основным документом, определяющим требования и порядок создания Web-приложения, согласно которому проводятся все работы от разработки до внедрения.

Краткая характеристика области применения

Программное обеспечение позволяет сократить время создания и размещения презентаций.

2.1.2 Основания для разработки

Основание для проведения разработки

Основанием для проведения разработки является задание на дипломный проект, утверждённый в МОУ ВПО «ЮУПИ».

Наименование и условное обозначение темы разработки

Наименование темы разработки - Разработка Web-приложения для создания презентаций.

2.1.3 Назначение разработки

Функциональное назначение

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

.1.4 Требования к программе или программному изделию

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

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

Пользователь от лица которого происходит взаимодействие должен:

.     Пользователь должен иметь доступ к серверу (серверам) базы данных.

2.      Для полноценной работы в роли администратора необходима авторизация пользователя.

Пользовательский компьютер на котором запускается программа должен:

1.   Быть оснащён операционной системой с установленным браузером.

2.      Персональный компьютер пользователя должен быть подключен к глобальной сети Internet.

Требования к программному обеспечения, выполняющемся на сервере

Программное обеспечение, выполняющееся на сервере, должно представлять собой:

1.   Debian 7.0

2.      Python

3.      Nginx

4.      uWsgi

5.      Django

Требования к взаимодействию клиентов с сервером

Взаимодействие клиентов с сервером должно быть организовано по схеме «запрос-ответ»:

1.   Пользователь с помощью клиента отправляет серверу SQL запрос;

2.      Сервер возвращает клиенту ответ в виде структурированной HTML страницы.

Требования к надежности

Надежное (устойчивое) функционирование программы должно быть обеспечено выполнением специалистами HOST провайдера совокупности организационно-технических мероприятий, перечень которых приведен ниже:

1.   Организацией бесперебойного питания технических средств серверов БД PostgreSQL;

2.      Использованием лицензионного программного обеспечения (клиенты);

3.      Регулярным выполнением рекомендаций Министерства труда и социального развития РФ, изложенных в Постановлении от 23 июля 1998 г. «Об утверждении межотраслевых типовых норм времени на работы по сервисному обслуживанию ПЭВМ и оргтехники и сопровождению программных средств»;

4.      Регулярным выполнением требований ГОСТ 51188-98. Защита информации. Испытания программных средств на наличие компьютерных вирусов;

Время восстановления после отказа не должно превышать времени, требуемого на восстановление работоспособности (или перезагрузку) технических и программных средств серверов PostgreSQL.

Условия эксплуатации

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

Требования к видам обслуживания

Программа нуждается в постоянном обновлении учитывая специфику организации, масштаб сети и количество записей в БД.

Конечные пользователи должны обладать навыками работы с IBM-совместимыми персональными компьютерами и устройствами периферии, в том числе:

1.   Самостоятельно (в требуемой последовательности) включать и отключать пользовательский компьютер и периферийное оборудование от электропитания;

2.      Производить первоначальную загрузку пользовательской операционной системы;

3.      Вводить данные с клавиатуры;

4.      Использовать манипулятор-мышь для работы с элементами графического пользовательского интерфейса на экране монитора;

5.      Обеспечивать загрузку бумаги в подающее устройство используемого принтера;

6.      Уметь пользоваться средствами операционной системы и оперировать ею с помощью графического пользовательского интерфейса, в том числе:

a.  Самостоятельно производить регистрацию на компьютере пользователя;

b.      Осуществлять запуск программ на выполнение;

c.       Использовать базовые функции оконного интерфейса, позволяющего изменять размер окна программы и перемещать его на экране монитора;

d.      Переключаться между окнами выполняющихся на пользовательском компьютере программ;

e.       Применять стандартные программы для поиска, копирования, перемещения, удаления и открытия файлов дисковой подсистемы;

f.       Активизировать режим подсказки (справки операционной системы);

Специальные требования

Программа должна обеспечивать взаимодействие с пользователем посредством графического пользовательского интерфейса. Графический пользовательский интерфейс должен обеспечивать:

1.   Формирование запросов с компьютера пользователя посредством клиента.

2.      Текстовый и графический способы представления информации пользователям.

3.      Интерактивный (диалоговый) режим взаимодействия пользователей с программой.

2.2 Разработка структуры сайта

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

Алгоритм использования Web-приложения, представлен на рисунке 1.

Рисунок 1 - Алгоритм использования Web-приложения

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

-       Названия

-       Обложка (картинка с изображением главной страницы презентации)

-       Файл (docx файл с материалом для презентации)

Кроме того, необходимо предусмотреть информационные страницы с материалами о работе с сайтом.

2.2 Разработка макетов страниц

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

За основу страниц можно взять макет из двух колонок, представленный на рисунке 2. Данный макет универсален и часто применяется для структуризации данных на веб-страницах [29]. Он позволяет разместить все необходимые данные в соответствии с условиями задачи, а также подходит под все типы страниц проекта.

Рисунок 2 - Макет из двух колонок

Правая колонка макета содержит дополнительную информацию, поэтому её ширину можно установить в 300 пикселей. Основная часть страницы - центральная колонка - займет оставшуюся ширину, что вполне достаточно при минимальной ширине страницы на экране в 1024 пикселя, в соответствии с условиями разработки, описанными в п. 1.2 данной работы.

Детальные макеты страниц создаются в любом графическом редакторе или в виде эскизов на бумаге.

2.3 Разработка структуры базы данных

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

Хорошо спроектированная структура базы данных - один из главных факторов быстродействия и расширяемости сайта. В Django работа с базами данных осуществляется с помощью ORM [17], которая представляет все таблицы, поля и запросы в базу данных в виде объектов с методами и параметрами, что избавляет от необходимости писать SQL-запросы вручную независимо от того, какая СУБД используется в данный момент.

Следует заметить, что разработчики Django изначально рекомендовали СУБД PostgreSQL, а также что некоторые сложные приложения работают только с этой СУБД за неимением достаточного функционала в остальных [42].

Для описания структуры базы данных в Django используются классы Python. Каждый класс представляет собой таблицу, а свойства класса являются ее полями. Причем, свойства класса, в свою очередь, являются объектами, созданными на базе встроенных классов, служащих для описания типов данных полей в базе с их параметрами.

На рисунке Е.4 из приложения Е показан код, описывающий две таблицы в базе данных. Эти таблицы представляют собой структуру информационных страниц с материалами о работе с сайтом:

-       Класс Category описывает категорию страницы и имеет лишь одно текстовое поле «title». В этом поле сохраняется название категории.

-       Класс Page описывает страницу и представляет собой таблицу с четырьмя полями - «title», «text», «category» «slug».Поле «category», служит для связи с помощью Foreign Key таблицы Page с Category. Иными словами, поле указывает принадлежность страниц к категории. Первое и второе поле - название и тексты страницы. Поле «slug» - текстовый идентификатор блюда, который используется для формирования URL, о чем сказано в п. 2.5.

Рисунок 3 - Внешний вид таблиц в панели администратора Django

Следует заметить, что для работы с базой данных в состав Django включено приложение admin, которое автоматически собирает все описания таблиц и выстраивает для работы с ними соответствующие формы, которые собираются в единый интерфейс панели администратора сайта (см. рисунок 3). Весь процесс происходит автоматически [36].

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

2.4 Верстка шаблонов страниц