Разработка динамического web-сайта с применением open source систем управления контентом (CMS)

Размещено на http://www.allbest.ru/

Разработка динамического web-сайта с применением open source систем управления контентом (CMS)

Введение

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

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

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

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

Цель работы:

Разработать web-сайт муниципального бюджетного общеобразовательного учреждения средней общеобразовательной школы №1913 города Москвы.

Объект исследования:

· Процесс разработки web-сайта муниципального бюджетного общеобразовательного учреждения средней общеобразовательной школы №1913 города Москвы..

Предмет исследования:

· Web-сайт муниципального бюджетного общеобразовательного учреждения средней общеобразовательной школа №1913 города Москвы.

В соответствии с целью, объектом и предметом исследования, были поставлены следующие задачи:

1. Найти теоретический материал по исследуемому объекту;

2. Изучить найденный теоретический материал по исследуемому объекту;

3. Изучить инструментарий, применяемый для разработки web-сайтов;

4. Определить структурную модель сайта;

5. Разработать дизайн web-сайта;

6. Сверстать шаблон;

7. Адаптировать шаблон под CMS;

8. Установить рекомендуемые компоненты;

9. Наполнить сайт контентом;

10. Запустить готовый сайт в Интернет.

В ходе исследования были применены следующие методы исследования:

1. Анализ;

2. Сравнение;

3. Синтез;

4. Наблюдение.

Глава 1. Анализ и функциональное моделирование предметной области

Актуальность и практическая значимость создания web-сайта

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

Содействует контролю деятельности учреждения, его популяризации, то есть возможности выбора учащимися более качественных образовательных услуг. Разработка web-сайтов образовательных учреждений и помещение их в Интернет давно завоевало популярность в странах Америки и Запада, и с не давних времён набирает популярность в России. Большинство ведущих учреждений страны уже отдают этому отдельное предпочтение, так как спрос на эффективное образование беспрестанно растёт. Немаловажное значение заключается в том, что разработанный web-сайт будет регулярно модернизироваться и приобретать новые возможности, такие как новостная лента, возможность анонимных вопросов, организация дистанционного обучения для учеников отсутствующих в школе, общение с учителями, что не позволит потерять web-сайту свою актуальность и востребованность. Школьный web-сайт - визитная карточка школы, коммуникативный инструмент учителей, учеников и родителей, работников образования и культуры. В этом качестве сайт способствует повышению открытости образовательного учреждения. Практическая значимость работы состоит в разработке web-сайта для средней общеобразовательной школа №1913.

Анализ предметной области

Интернет представляет собой сеть взаимодействующих компьютеров друг с другом (рис.1), которые также еще называют серверами. Каждый такой сервер имеет свой уникальный IP-Address, необходимый для идентификации данного сервера в общей сети. Так как эта общая сеть состоит из количества компьютеров, которое на начало 2016 года превышает два миллиарда, естественно, каждый такой компьютер обязан иметь свой IP Address, по которому к нему легко можно было бы обратиться.

Рисунок 1 сеть Интернет

При этом, все такие сервера можно разделить на 2 вида:

· Клиент-сервер

Клиент-сервера хранят содержимое самих сайтов. В зависимости от: мощности сервера, типов сайтов, количества контента и посещаемости - на одном таком клиент-сервере может располагаться от одного и до нескольких тысяч сайтов.

· DNS-сервер

DNS-сервера являются вспомогательными, осуществляющими поддержку работы всей сети. Они позволяют сети и нами и наоборот корректно взаимодействовать. DNS-сервера хранят соответствие обычных имён сайтов их IP-адресам (Internet Protocol Address). Например, мы набираем в строке обычное имя - “Google.ru”, а DNS-сервер занимается тем, что получает сведения на каком сервере хранится web-сайт с таким именем. В сети Интернет переход осуществляется исключительно по IP-адресам. IP-адреса принято записывать в виде четырёх групп цифр, разделённых точками. Например, при наборе в адресной строке 172.217.20.99 мы попадём на web-сайт Google.ru. Переход осуществится по его IP-адресу без использования доменного имени, которое предназначено, по большей части, для удобства пользователей.

Изначально браузер обращается к DNS-серверу. К какому именно DNS-серверу идёт обращение - зависит от интернет-провайдера. Из DNS- сервера браузер получает IP-адрес искомого сервера, по которому отправляет специальный HTTP-запрос, передающий информацию о том, что он желает получить доступ к порталу Google.ru. При учёте того, что сервер доступен, при помощи работающей на сервере специализированной программы (web-сервера), web-сервер формирует ответ и отправляет в браузер совокупность файлов, состоящую обычно из HTML-документа, картинок и CSS-документа.

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



Рисунок 2 Принцип работы сайтов.

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

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

Техническое задание на разработку web-сайта школы

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

Так как школьный сайт прежде всего является официальным документом, который представляет школу в сети Интернет, он должен соответствовать установленным стандартам. Поэтому, при разработке web-сайта образовательного учреждения разработчику следует руководствоваться тремя официальными документами:

1. Постановление Правительства Российской Федерации №582 от 10 июля 2013 г.,

2. Приказ Федеральной службы по надзору в сфере образования и науки от 29 мая 2014 г. №785,

3. Национальный стандарт ГОСТ Р 52872-2012 «Интернет-ресурсы. Требования доступности для инвалидов по зрению».

Первый документ (Постановление Правительства №582) регламентирует качество информации.

Второй документ (Приказ Федеральной службы по надзору в сфере образования и науки) содержит требования к структуре официального сайта образовательной организации. Также в нём оговаривается обязательное наличие раздела «Сведения об образовательной организации». Этот раздел, как правило, досконально проверяется всеми надзорными органами, поэтому его корректное оформление является важнейшей задачей для разработчика школьного web- сайта.

Согласно прописанным в приказе условиям, на web-сайте необходимо создать следующие подразделы:

- Основные сведения.

- Структура и органы управления образовательной организации.

- Документы.

- Образование.

- Образовательные стандарты.

- Руководство. Педагогический (научно-педагогический) коллектив.

- Материально-техническое обеспечение и оснащённость образовательного процесса.

- Стипендии и иные виды материальной поддержки.

- Платные образовательные услуги.

- Финансово-хозяйственная деятельность.

- Вакантные места для приёма (перевода).

В третьем официальном документе (Национальный стандарт ГОСТ Р 52872-2012) оговаривается необходимость адаптировать информацию web- сайта школы людей, имеющих плохое зрение.

Проанализировав официальные документы, выслушав требования заказчика, взяв за основу ГОСТ 34.602-89 (Информационная технология. Комплекс стандартов на автоматизированные системы. Техническое задание на создание автоматизированной системы) и ГОСТ 19.201-78 ( ЕСПД. Техническое задание. Требования к содержанию и оформлению) составим техническое задание на разработку web-сайта для школы.

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

1. Материал, опубликованный на сайте, не должен иметь стилистических и грамматических ошибок;

2. Контент представляется на русском языке;

3. Весь материал, опубликованный на сайте, должен быть актуален и достоверен, а также не содержать логических противоречий;

4. Новости на сайте должны регулярно обновляться;

5. Контактная информация должна быть представлена в исчерпывающем объёме;

6. Представление должно быть в единообразном виде, способствующим удобству восприятия её посетителем web-сайта;

7. Таблицы не должны содержать ошибок в форматировании;

8. Необходимо присутствие на сайте информации об образовательном процессе и воспитательной работе школы;

9. Отсутствие рекламы на сайте за исключением рекламы образовательных ресурсов.

10.Отсутствие информации, не имеющей отношения к образованию и образовательной организации;

Требования к навигации и структуре

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

2. Навигация на сайте должна быть представлена в виде меню, обеспечивающего простой и понятный доступ ко всем страницам сайта;

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

Требования к дизайну

1. Цвет фона и текста необходимо подобрать таким образом, чтобы обеспечивалась хорошая читаемость;

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

3. Дизайн должен иметь единую концепцию, применённую ко всем разделам на сайте. При переходе между страницами и разделами посетитель сайта должен видеть, что он находится на едином сайте;

4. Для удобства восприятия информации, заполнение страниц должно происходить равномерно;

5. Изображения, опубликованные на сайте должны быть читаемы, не содержать ошибок и не перекрывать текстовый материал;

6. Все ссылки на сторонние Интернет-ресурсы должны зрительно отличаться от ссылок, ведущие на другие разделы.

Требования к функциональности

1. Сайт должен быть разработан и выполнен на основе использования актуальных и распространенных Интернет-технологий по выбору исполнителя;

2. Соблюдение авторских прав при использовании элементов чужих разработок;

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

4. Наличие средства обратной связи;

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

6. Добавление контента без редактирования HTML-кода страницы. (Наилучшим образом с этой задачей справляются системы управления контентом (содержимым сайта, CMS), позволяющие неподготовленному пользователю (например, администратору школы или учителю) добавлять и редактировать новости, не разбираясь предварительно в технологиях

FTP, HTML и CSS.

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

Технические аспекты

1. Корректный просмотр и функционирование в браузерах (Interner Explorer (версия 7-я и выше), Opera (7-я и выше) Safari, FireFox, Google Chrome.

2. Сайт должен корректно выглядеть не только на современных мониторах, но и мониторах старого образца с разрешением 800x600px.

Функциональное моделирование предметной области

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

Рисунок 3 Контекстная диаграмма процесса разработки сайта образовательного учреждения.

По результатам разработки контекстной диаграммы выполняется процесс декомпозиции модели. Результат декомпозиции представлен на рисунке №4.

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

После построения модели процесса разработки образовательного сайта произведём декомпозицию работы “Разработка страниц”.

Рисунок 5 Диаграмма декомпозиции работы “Разработка страниц”.

Основные этапы разработки сайта образовательного учреждения

Проанализировав содержание диаграмм, представленных на рисунках 3, 4 и 5, составим и упорядочим этапы разработки образовательного сайта:

1. Определение общей концепции разработки web-сайта образовательного учреждения;

2. Определение категории посетителей;

3. Формулировка задач, которые должен решать web-сайт;

4. Разработка общего стиля оформления страниц и интерфейса;

5. Разработка структуры с использованием подхода “проектирование сверху вниз”: вначале устанавливается состав учебного материала на уровне крупных разделов, детализирующихся и уточняющихся в дальнейшем;

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

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

8. Размещение сайта образовательного учреждения в сети Интернет;

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

Задачи web-сайта школы

Перед началом разработки, на этапе формирования общей концепции, определимся с задачами, которые должен будет решать web-сайт:

10. Предоставление информации о школе, истории создания, основной деятельности, руководителях и преподавателях;

11. Публикация новостей школы;

12. Информация о расписании школы;

13. Публикация информации о внеурочной жизни школы ( кружки, соревнования и т.д.);

14. Представление фотоотчётов с мероприятий в фотоальбоме;

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

Разработка структуры сайта образовательного учреждения

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

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

Контентная область страницы делится на разделы: Основное меню:

1. Главная

2. События

3. Сведения об образовательной организации

· Основные сведения.

· Структура и органы управления образовательной организации.

· Документы.

· Образование.

· Образовательные стандарты.

· Руководство. Педагогический (научно-педагогический) коллектив.

· Материально-техническое обеспечение и оснащённость образовательного процесса.

· Стипендии и иные виды материальной поддержки.

· Платные образовательные услуги.

· Финансово-хозяйственная деятельность.

· Вакантные места для приёма (перевода).

4. Обратная связь Боковое меню:

1. Приём в первый класс

2. Внеурочная деятельность

3. Расписание звонков

4. Учительская

5. Классы

· Начальная школа.

· Средняя школа.

6. Фотоальбом

Рисунок 6 Древовидная структура сайта

Рисунок 7 Макет шаблона главной страницы разрабатываемого web-сайта школы.

Глава 2. Программная реализация

Установка, настройка и работа с локальным сервером Open Server

Перейдём непосредственно к программной реализации web-сайта образовательного учреждения, а именно, для начала, к установке локального сервера Open Server.

Open Server представляет собой портативную серверную платформу, в которую предустановлены и настроены необходимые компоненты для серверной разработки (Server MySQL, PHP и другое). Скачивание сервера происходит с официального сайта разработчика - www.open-server.ru. После распаковки пакета перед нами появляется серверное окружение, в котором можно начинать разработку. Выбран пакет Open Server был по причине того, что в нём реализовано гибкое управление всем его содержимым - управление каждым модулем “на лету” (изменение версии MySQL, PHP и т.д.), а также он соответствует требованию портативности. Open Server не требует установки, его достаточно распаковать на флэшку, что особенно удобно при разработке web-сайта для заказчика. Так как разрабатывается сайт для образовательного учреждения и сайт еще не находится в сети Интернет, он существует только локально, а следовательно есть необходимость на определённых этапах разработки показать результат заказчику. Рекомендуемое решение в данной ситуации - установить портативный пакет серверной платформы на флэшку, поместить туда же свой сайт и прийти с флэшкой к заказчику, где можно будет продемонстрировать сайт в том виде, в котором бы он находился при расположении в сети Интернет.

После процесса распаковки серверной платформы, в корне диска появляется папка с одноимённым названием “OpenServer”. Открыв данную папку, на выбор предоставляется две версии программы Open Server x64 и Open Server x86, для 64 и 32 битных операционных систем (рис.8). В папке domains находятся файлы с нашими сайтами. Пока что он содержит только одну подпапку localhost. Папка modules содержит всевозможные модули такие как PHP, MySQL и другие. Папка userdata содержит временные файлы, файлы конфигурации и прочее. Чаще всего мы будет работать с папкой domains.

Рисунок 8 Файлы локального сервера Open Server

Так как разработка происходит на 64 битной ОС Windows, была выбрана 64 битная версия Open Server. Перед запуском данного пакета разработчики рекомендуют внести его в исключения антивируса т.к. подобные пакеты программ вносят изменения в системные файлы Windows и могут быть ими заблокированы. Во избежание ошибок с контролем учётных записей Windows (UAC), запускать Open Server рекомендуется от имени администратор. После запуска Open Server в нижней правом углу (windows tray) появится значок программы, кликнув по которому мы попадаем в интерфейс программы, из которого производится её запуск и настройки (рис.9).

Рисунок 9 Интерфейс Open Server

Перед тем, как перейти к следующему шагу - установке CMS Joomla, нужно произвести некоторые настройки серверной платформы для их корректной совместимости. Для этого зайдём в настройки Open Server и выберем версии компонентов, соответствующие минимальным требования Joomla CMS версии 3.0 и выше. Узнать системные требования CMS Joomla можно на официальном портале разработчиков Joomla, где с помощью поиска, по запросу “Technical Requirements”, можно найти технические требования (рис.10).

Рисунок 10 Технические требования для Joomla 3.х

Произведём настройку версий модулей локального сервера в соответствии с минимальными требованиями CMS Joomla( рис.11).



Рисунок 11 Настройка Open Server в соответствии с техническими требованиями Joomla CMS

Для создания нового сайта на локальном сервере - нужно перейти в каталог программы, зайти в папку Domains и создать каталог, в котором будут располагаться все файлы нашего сайта. Размещение файлов движка будет происходить в папке “TestTest.Ru”.

Установка и русификация системы управления контентом (CMS) Joomla

Система управления контентом (содержимым) ( англ. Content management system, CMS) - информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления контентом (содержимым). Сленговое название данных систем - “движок”.

Основные функции CMS:

1. Предоставление инструментов для создания содержимого и организации совместной работы над ним;

2. Управление содержимым: хранение, контроль версий, соблюдение режима доступа, управление потоком документов, публикация другое;

3. Представление информации в виде, удобном для поиска и навигации.

Одной из таких систем управления контентом является Joomla. Joomla - система управления содержимым с открытым кодом (Open Source CMS), которая используется по всему миру от простых сайтов до комплексных корпоративных приложений. Представляет собой такой движок совокупность скриптов и файлов, которые, как правило, написаны на языке программирования PHP, позволяющие не писать рутинный код, который, по большей части, схож у большинства сайтов. Выбрана данная CMS была по причине того, что соответствует требованиям бесплатности, открытости и наличия простого и понятного интуитивного интерфейса, позволяющего осуществить обучение новых сотрудников школы в кротчайшие сроки, а также реализовать требуемый функционал. Для скачивания последней версий CMS Joomla перейдём на официальный сайт её разработчиков. Далее в пункт меню “Download”. По ссылке скачиваем архив в формате ZIP, который необходимо извлечь архиватором WinRar либо любым аналогичным. После извлечения архива появляется папка с аналогичным архиву названием, в которой расположены файлы движка (рис.12).

Рисунок 12 Файлы CMS Joomla

Разместим файлы движка на установленном и настроенном ранее локальном сервере Open Server. Перейдём в папку Open Server, далее - domains, после чего выделяем и копируем все файлы, находящиеся в папке движка, в созданную ранее папку TestTest.Ru. Перезапускаем локальный сервер и, введя в браузерной строке “TestTest.Ru”, попадаем в меню установки CMS Joomla (рис.13).

Рисунок 13 Мастер установки Joomla

Так как при будущем переносе сайта с локальном сервера на хостинг все первичные данные, требующиеся при установке, можно будет изменить, в графе логин и пароль введём admin 123456 для лёгкого запоминания. E-mail на локальном сервере не понадобиться, поэтому пишем любой адрес.

При нажатии на кнопку “Далее” попадаем в настройки конфигурации Базы Данных. Так как установка происходит на локальный сервер, графу с именем сервера базы данных оставляем по умолчанию localhost. Имя пользователя также оставляем по умолчанию “root”. Название Базы Данных для удобства зададим - TestTest.

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

Чтобы попасть а администраторскую часть сайта - необходимо в адресной строке, после имени сайта (на локальном сервере это название папки, в которой расположены файлы Joomla) допиcать “/administrator” (рис.14).

Рисунок 14 Вход а администраторскую зону сайта

После осуществления входа мы попадаем непосредственно в администраторскую зону сайта.

После корректной установки CMS Joomla, для удобства русифицируем её интерфейс. Для этого в верхнем меню выберем “Extension”, выпадающий подпункт “Language(s)”, далее - “installed”.

Рисунок 15 русификация интерфейса CMS Joomla

Попадаем на страницу установки языковых пакетов, где выбираем “Install Languages”, после чего перед нами выпадает список всех доступных языковых русификаций.

После установки необходимо вернуться в языковой менеджер (пункт меню “Extensions”, подпункт “Installed”) и назначить установленный пакет русификация по умолчанию для административной панели (Рисунок 16).

Рисунок 16 Назначение русского языка по умолчанию для административной панели

Так выглядит русифицированный интерфейс административной панели CMS Joomla (рис.17).

Рисунок 17 Интерфейс административной панели CMS Joomla

Разработка шаблона

Структура шаблона

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

Первый этап в создании собственного шаблона - это создание файловой основы. Данная основа строго ограничена и используется для всех новых шаблонов Joomla, без исключения.

В шаблоне для Joomla обязательно наличие двух файлов:

1. Index.php (основной файл, который должен обязательно присутствовать в каждом шаблоне. Содержит HTML-разметку и вставки кода языков программирования).

2. templateDetails.xml (хранит в себе описание шаблона в формате xml и необходим для инсталляция шаблона в CMS. В данном файле должен быть представлен весь перечень файлов, использующихся в шаблоне).

Файлы и папки шаблона, наличие которых необязательно:

1. template_thumbnail.png (содержит мини-изображение нашего сайта).

2. template_preview.png (содержится предварительный просмотр внешнего вида шаблона).

3. favicon.ico (содержит изображение, которое отображается в адресной строке сайта).

4. Папка “images” (содержит все картинка нашего шаблона).

5. Папка “css”(содержит все файлы таблиц стилей, отвечающих за внешний вид сайта).

Теги Joomla CMS

Теги Joomla нужны для отображения модулей, сообщений или контента.

Создадим основной файл шаблона с названием index.php и откроем программой NotePad++, которая в отличии от стандартного блокнота Windows, обладаем необходимым функционалом для корректной работы с кодом, а именно: поддерживает цветную разметку, подсветку синтаксиса текста, авто- прописывание тегов и авто-завершение слов, поддержка и работа со всеми необходимыми кодировками и форматами.

Теги в Joomla начинаются с <jdoc:includе. Далее через пробел указываются его атрибуты type ( тип тега), name (имя тега) и style (стили). Закрытие тега осуществляется через /> (рис.18).

Рисунок 18 Шаблон тегов Joomla

Первый тег, присутствующий в каждом шаблоне -head. То есть в атрибуте type указывается значение head. Данный тип тега вставляет в шаблон базовую информацию (т.е. название страницы, мета-теги и другую информацию, которая берётся непосредственно из самой CMSJoomla). Соответственно, когда мы вставляем данный тег - нам не нужно для каждой страницы прописывать мета-теги или название страницы, что очень удобно. Второй тип - modules, позволяющий вставить в любое место нашего шаблона модуль. Вname должно быть указано уникальное имя модуля. В значение атрибута style можно прописать значения как шаблонные - none (выводит содержимое модуля без оформления и заголовка), table (вывод модуля в виде таблицы) и другие, так и созданные специально для уникального оформления.

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

Четвёртый тип - component, отвечающий за отображение содержимого статей, новостей и другого контента. Тег может использоваться исключительно внутри тега body.

Пятый тип - installation. Указывает инструкции для установки. (Рисунок 25)



Рисунок 19 Теги Joomla для вывода или размещения элементов в шаблоне.

Написание шаблона

Как отмечалось ранее, файл index.php является основным и самым важным в шаблоне Joomla. В нём определяется визуальное расположение элементов сайта и сообщает самой CMS куда поместить различные компоненты, модули и т.д. Зайдем в корневую папку CMS Joomla, затем в папке templates создадим папку с будущим шаблоном под названием template. Именно в этой папке будут создаваться все последующие файлы шаблона. Итак, приступим к разработке главного файла шаблона. Первой строкой любого php-файла должна идти строчка запрета прямого доступа. Это нужно для того, чтобы любой пользователь не смог запустить из браузера напрямую наш php-файл (рис.20).

Рисунок 20 функция прямого доступа к php-файлу.

Далее пропишем всю базовую структуру HTML-документов, где сразу в head поместим одноимённый тег Joomla, позволяющий, ничего не прописывая, вставить в “шапку” документа необходимые элементы такие как title (название страницы) и другую служебную информацию (рис.21).

Рисунок 21 Тег Joomla типа head

Затем подключим все файлы, использующиеся в нашем шаблоне. Первым делом подключим системный файл каскадных таблиц стилей, позволяющий использовать нашему шаблону системные стили по умолчанию. Например, если мы не использует для какого-то элемента стиль, то, чтобы этот элемент находился в каком-то оформлении, он должен взять данные стили из файла system.css. Для подключения используем тег link. Пропишем ему атрибут stylesheet, говорящий о том, что идёт подключение файла каскадных таблиц стилей. Для удобства, чтобы при изменении местоположения файла, чтобы постоянно не переписывать путь, используем php-код, автоматически подставляющий путь корневой директории - baseurl. После чего пишем еще один атрибут - type, в котором указываем значение text/css (рис. 22).



Рисунок 22 Подключение файла каскадных таблиц стилей.

Подключаем по аналогии все задействованные в шаблоне файлы. На данный момент будем использовать, помимо основного, только один файл, который назовём template.css. В нём мы будет размещать используемые нами стили (рис. 23).

Рисунок 23 Подключение файла template.css

После подключения файлов переходим непосредственно к блочной вёрстке шаблона в “теле” страницы, в теге <body> документа index.php.

Блочная вёрстка (вёрстка с помощью слоёв) заключается в конструктивном использовании тегов <div> и стилей. Она позволяет разделить содержимое и оформление. HTML код документа содержит только теги разметки и теги логического форматирования, а всё оформление выносится за пределы кода в стили. Такой подход позволяет независимо управлять видом элементов страницы и её содержимым. Благодаря этому работу над сайтом могут осуществлять несколько человек, выполняющих различные функции самостоятельно от других. Верстальщик, дизайнер и программист работают над своими задачами автономно, упрощая процесс разработки и управления сайтом. При блочной вёрстке основное значение уделяется тегу <div>, который является базовым фундаментом вёрстки, благодаря которому - HTML-код распадается на ряд наглядных блоков (рис.24).

Рисунок 24 Блочная вёрстка шаблона главной страницы для разрабатываемого web-сайта образовательного учреждения.

Перейдём в ранее созданный файл template.css, в котором зададим необходимое оформление и расположение наших элементов (рис.25).



Рисунок 25 Продолжение блочной вёрстки шаблона главной страницы для разрабатываемого web-сайта образовательного учреждения.

По завершению вёрстки шаблона главной страницы, web-сайт образовательного учреждения принимает следующий вид: рис. 26.

Рисунок 26 Главная страница web-сайта образовательного учреждения.

Создание установочного файла шаблона.

Первым шагом на пути к установке свёрстанного шаблона в CMS Joomla будет создание установочного файла templateDetails.xml. Создадим этот файл в корневой папке template и, для начала, напишем две базовые строки, отвечающие за версию, сценарий и кодировку файла.

<?xml version =”1.0” encoding=”utf-8”?>.

<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/1.6/template-install.dtd">

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

<extension version="3.5" type="template" client="site">

Допишем атрибут method=”upgrade”, позволяющий в будущем обновлять наш шаблон без предварительного его полного удаления.

За базовыми строками следуют блоки описательных тегов, в которых указывается название шаблона, дата создания, имя автора, копирайты на шаблон, по какой лицензии будет распространяться данный шаблон, его версия и краткое описание (рис.27).

Рисунок 27 Блок описательны тегов

Следующий блок тегов - files. Внутри данного блока в тегах <filename> необходимо перечислить все папки и файлы, которые используются в шаблоне. Здесь нужно быть очень внимательным, если мы укажет какой-то файл или папку, которая не используется или является пустой, то установка шаблона будет невозможной.

На данном этапе разработки имеем 3 файла: файлы index.php template.css, отвечающие за структуру сайта, оформление и прочее, и установочный файл - templateDetails.xml (рис.28).

Рисунок 28 Блок файлов шаблона

Третий блок тегов - positions. В данном блоке между тегами <position> укажем все позиции, использованные на сайте. В соответствии с разработанным и свёрстанным макетом шаблона - таких позиций у нас шесть (header, main menu, search, content, right sidebar, footer). (рис.29).

Рисунок 29 блок позиций шаблона

Созданных трёх файлов index.php, template.css и templateDetail.xml достаточно для того, чтобы установить шаблон на сайт. Для этого заархивируем файлы в ZIP формат с названием template, после чего перейдём в административную зону нашего сайта, находящегося на локальном сервере, по адресу TestTest.Ru/administrator. Далее зайдём в Расширения>Менеджер расширений>Установить (рис.30, 31).



Рисунок 30 Менеджер расширений

Рисунок 31 Установка шаблона

Завершающим этапов установки шаблона является назначение его по умолчанию в Менеджере шаблонов (рис.32).

Рисунок 32 Установка разрабатываемого шаблона на сайт

Вывод динамического в шаблоне.

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

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

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

Для подключения содержимого страницы необходимо в файле index.php вставить тег jdoc:include, с одним атрибутом type="component". Вставим данный тег в созданный заранее div-контейнер, предназначенный для основного контента (рис.33).

Рисунок 33 Подключение динамического контента

После подключения динамического контента подключим к шаблону прописанные в файле TemplateDetails.xml модульные позиции. Подключаются модульные позиции тегом jdoc:include, c двумя атрибутами: type=”module” и name=”название прописанной позиции в файле TempateDetails.xml” (рис.34).



Рисунок 34 Подключение модульных позиций в шаблон.

После подключения, в менеджере модулей административной панели Joomla все созданные позиции появляются автоматически в списке (рис.35).

Рисунок 35 Позиции шаблона

Для примера установим стандартный модуль поиска Joomla “Умный поиск” в позицию search (рис.36). Зайдем в менеджер модулей, откроем его настройки, где включим его отображение и выпадающем списке позиций выберем search.



Рисунок 36 Модуль “Умный поиск”

Так выглядит модуль ”Умный поиск”, выведенный в шаблоне в позиции search (рис.37).

Рисунок 37 Модуль “Умный поиск” на сайте в позиции “search”

Размещение шапки сайта, создание и наполнение страниц.

В верхней части веб-сайта обычно помещается так называемая «шапка» - логотип организации в сочетании с текстом. Текстом может быть название этой организации или её слоган. Для школы №1913 шапка сайта будет выглядеть следующим образом: рис.38.



Рисунок 38 Логотип школы

Размещение шапки на сайте происходит путём перемещения подготовленной картинки в папку сайта images с последующим созданием модуля в административной панели и размещение его в ранее заданной для этого позиции header.

В менеджере меню (рис.39) создаем нужное нам количество меню. В нашем случае это «Главная страница», «События», «Сведения об образовательной организации» «Обратная связь». В менеджере модулей расположим данное меню в позицию main menu. По аналогии создадим правое меню, с пунктами «Приём в первый класс», «Внеурочная деятельность»,

«Учительская», «Классы», «Фотоальбом», которое расположим в позицию right sidebar.

Рисунок 39 Менеджер меню

Далее создаём ссылки. Для этого используем менеджер материалов, в котором мы и привязываем определенную ссылку к нужному меню (рис.40).



Рисунок 40 Менеджер материалов

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

Рисунок 41 Менеджер материалов

После добавления материала в избранное, он отображается на сайте (рис.42).



Рисунок 2 Пример страницы сайта.

Создание формы обратной связи.

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

Помимо удобства для владельца ресурса и пользователя, она еще и существенно экономит время. Это происходит благодаря тому, что человеку, который хочет задать вопрос, не нужно тратить время на запуск почтового клиента, чтобы отправить письмо. Все что требуется - это перейти на страницу с формой обратной связи, ввести в предназначенных для этого полях имя, адрес электронной почты, нужный текст и нажать кнопку отправки. Так как разработка web-сайта происходит с использованием системы управления контентом, для реализации возможности обратной связи был использован бесплатный специализированный компонент для создания форм на Joomla-СhronoForms. После скачивания компонента ChronoFormsс официального сайта разработчика ChoronoEngine.com и установки в CMS Joomla через менеджер расширений, он становится доступным для работы в меню Компоненты (рис.43).

Рисунок 43 Компонент ChronoForms

Формы создаются из вкладки Easy Forms Manager. Используя поля Text Box, Text Area, Submit Button и их настройки, создадим формы для заполнения имени, обратного адреса электронной почты и ввода сообщения (рис.44).

Рисунок 44 Редактор формы обратной связи

После создания форм, во вкладке Email укажем администратора, на который будут приходить данные, введённые посетителями сайта в созданные формы. Во вкладке Form Setting зададим название форме: “contacts”. После чего, в материале, на который ведёт пункт меню “Обратная связь” вставим код для отображения созданной формы на сайте {chronoforms}contacts{/chronoforms}.

Созданная форма имеет следующий вид: рис.45.

Рисунок 45 Форма обратной связи

Создание фотоальбома.

Для реализации фотоальбома используем компонент Phoca Gallery. Скачаем данный компонент с официального сайта разработчика и установим через менеджер расширений административной панели Joomla аналогично компоненту обратной связи ChronoForms. Создание фотоальбома происходит и панели управления компонента PhocaGallery (рис.46).



Рисунок 46 Панель управления компонента PhocaGallery.

В пункте меню “Категории” создадим категорию “Последний”, в которую загрузим фотографии с празднования последнего звонка 2016 года школа №1913.

Для отображения загруженных фотографий на сайте - создадим пункт меню “Фотоальбом” и укажем тип пункта меню “list of categories” (рис.47).

Рисунок 47 Создание пункта меню Фотоальбом

Теперь на сайте, по клику меню “Фотоальбом”, будет доступен выбор из категорий, в которых представлены все загруженные фотографии в виде фотоальбома (рис.48).



Рисунок 48 Фотоальбом PhocaGallery

Перенос и размещение разработанного web-сайта образовательного учреждения с локального сервера в сети Интернет.

Доменное имя мы зарегистрировали как www.sosh1913.mcdir.ru на хостинге https://cp.mchost.ru (рис49).

Рисунок 49 Регистрация доменного имени в административной панели mchost

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

Качественный хостинг -- основа работоспособности любого сайта, поэтому одним из основных вопросов при разработке сайта является постановка технических требований к хостингу.

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

В результате сравнительного анализа был выбран хостинг mchost.

Для переноса web-сайта с локального сервера на хостинг был использован компонент Akeeba BackUp. С помощью Akeeba BackUp можно выполнять резервное копирование, восстанавливать и перемещать сайты между серверами. После скачивания компонента и установки через менеджер расширений, приступаем к созданию резервной копии сайта из панели компонента Akeeba BackUp (рис.50).

Рисунок 3 Панель компонента Akeeba BackUp

После нажатия “Начать резервное копирование” создаётся резервная копия сайта (рис. 51).



Рисунок 51 Созданная резеврная копия сайта с помощью компонента AkeebaBackUp

Созданную резервную копию сайта загрузим (рис.52) в административную панель хостинга mchost (рис.52) вместе с плагином KickStart от Akeeba, загруженным с того же сайта и предназначенным для преобразования резервных копий в полноценный сайт.

Рисунок 52 Загрузка резервной копии с плагином для восстановления на хостинг.

По завершению загрузки резервной копии сайта и плагина, в браузерной строке, после доменного имени, для начала восстановления резервной копии, нужно дописать “kickstart.php”. Процесс восстановления довольно прост и аналогичен установке CMS Joomla на локальный сервер.

После процесса восстановления сайта из резервной копии с помощью плагина Akeeba Kickstart разработанный web-сайт становится доступен по адресу https://www.sosh1913.mcdir.ru. и выглядит так: (рис.53).

Рисунок 43 Разработанный web-сайт школы №1913.

Заключение

Результатом выпускной квалификационной работы бакалавра является web-сайт муниципального общеобразовательного учреждения школы

№1913 города Москвы. Данный web-сайт полностью готов, размещён в сети Интернет и находится по адресу https://www.sosh1913.mcdir.ru.

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

Использование веб-сайта школы предоставляет следующие возможности:

1. Возможность представить всю нужную информацию, включая контактные телефоны, заинтересованным пользователям;

2. Возможность обновлять новости школы в режиме реального времени;

3. Возможность размещения тематических статей и журналов;

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

5. Возможность публикации фотографий в виртуальном фотоальбоме.

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

В ходе выполнения работы была достигнута цель и выполнены все поставленные задачи:

1. Найден теоретический материал по исследуемому объекту;

2. Изучен найденный теоретический материал по исследуемому объекту;

3. Изучен инструментарий, применяемый для разработки web-сайтов;

4. Определена структурную модель сайта;

5. Разработан дизайн web-сайта;

6. Свёрстан шаблон;

7. Шаблон адаптирован под систему управления контентом;

8. Установлены рекомендуемые компоненты;

9. Web-сайт наполнен контентом:

10. Готовый web-сайт размещён и функционирует в сети Интернет.

Благодаря использованию CMS Joomla в разработке, на сайте имеются широкие возможности изменения структуры и содержания разделов. Это позволяет в дальнейшем наращивать сервисные возможности путем подключения дополнительных модулей, расширяя тем самым имеющийся функционал. Web-сайт весьма прост в использовании, имеет понятный интерфейс, удобный даже для неопытного пользователя, и простую в использовании систему навигации, отвечающую требованиям разработки web- сайтов для образовательных учреждений.

Список использованных источников и литературы

web сайт программный

1. Вачкова С.Н. Виртуальная проекция уклада школы как феномен информационного пространства // Вестник Российского университета дружбы народов. Серия: Информатизация образования. 2013.№ 3. С. 87-93.

2. Вачкова С.Н. Проблемы эмпирического изучения уклада современной массовой школы и его отражения в информационно-коммуникационной среде образовательного учреждения // Вестник Московского городского педагогического университета. Серия: Педагогика и психология. 2013. № 2 (24). С. 77-88.

3. Вачкова С.Н. Экспериментальное исследование динамики виртуальной проекции уклада школы в информационно-коммуникационной среде // Современные проблемы науки и образования. 2013. № 6. С. 230.

10 .Вачкова С.Н. Влияние глобальной информационной среды на образовательное пространство и уклад школы // Вестник Московского университета. Серия 20, Педагогическое образование. 2002.С.114-122.

11 .Гайнутдинов Р.М. Вовлеченность персонала при перепроектировании оргструктуры и деятельности административной команды школы // Педагогическая диагностика. 2013. № 2. С. 55 - 64

12 .Егоров Б. Б. Примерное положение об информационном узле (сайте) ОУ // Практика административной работы в школе. 2009. № 3. С. 59-60.

13 .Жугин Д.С. Сайт как средство управления, информирования, коммуникации и организации учебной и внеучебной деятельности // Педагогическое образование на Алтае. 2012. № 1. С. 475-476.

14 .Загвоздкин В. Подружитесь с проблемой! Возможности новой организационной культуры в ОУ // Управление школой (ПС). 2010. № 5. С. 15-20

15. Калужская М. Школьный сайт как управленческий ресурс // Народное образование. 2008. № 2. С. 170-174

16. Карпенко И. Рекомендации по проектированию и поддержке школьных сайтов // Директор школы. 2010. № 8. С. 68-74

17. Коркачева Д. А. Обучение школьников конструированию сайтов // Справочник заместителя директора школы. 2010. № 9. С. 83-90

18. Коровина О.Ю.. Организационная культура в сфере образования. Методические материалы в помощь слушателям курсов повышения квалификации. Вологда 2006. С. 53

19. Котлер Ф. Маркетинг менеджмент. СПб.: Питер, 2003. С. 354.

20. Кузнецов А.А. Корпоративная или организационная культура как объект менеджмета? // Основы экономики, управления и права. 2014. № 4 (16). С. 92-96

21. Латов Ю.В., Латов Н.В. Открытия и парадоксы этнометрического анализа российской хозяйственной культуры по методике Г.Хофстеда // Мир России. 2007. №4. С. 43 - 72.

22. Лифинцев Д.С. Трансляция ценностей корпоративной культуры как инструмент формирования имиджа компании // Бизнес информ. №12. 2014. C.440-443

23. Лошакова Т. Способы формирования корпоративной культуры школы // Методическая работа в школе. 2011. № 4. С. 24 - 25

24. Маркотт И. Отзывчивый веб-дизайн М.: Манн, Иванов и Фебер. 2012. С. 130.

Размещено на Allbest.ru