Модернизация Web-ресурса профкома студентов Поволжского государственного университета телекоммуникаций и информатики

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

9

Федеральное агентство связи

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

Факультет Информационных систем и технологий

Направление (специальность) Информатика и вычислительной техники

Кафедра Информатики и вычислительной техники

Выпускная квалификационная работа (бакалаврская работа)

Модернизация Web-ресурса профкома студентов Поволжского государственного университета телекоммуникаций и информатики

Утверждаю зав. кафедрой д.т.н., проф. Н.Ф. Бахарева

Руководитель ст.препод. О.В. Сирант

Н. контролер доцент каф ИВТ, к.т.н., доцент Т.А. Коваленко

Разработал ПО-31 Ю.А. Савельев

Самара 2017

Введение

В Поволжском Государственном Университете Телекоммуникаций и Информатики существует такая организация: «Профком Студентов ПГУТИ», которая работает в различных направлениях, в основном помощь и защита прав студентов. В настоящий момент времени фактически у каждого студента есть доступ в интернет, но не у каждого есть возможность прийти в Профком студентов и узнать нужную ему информацию, получить ответ на интересующие его вопросы. Для предоставления такой возможности в 2013 году был создан веб-ресурс «Профком Студентов ПГУТИ» и с того времени не обновлялся. В наше время технологии развиваются с большой скоростью, и по настоящим оценкам веб-ресурс «Профком студентов ПГУТИ» устарел, содержит в себе не актуальную информацию и проигрывает по параметрам и возможностям веб-ресурсов Профкомов студентов других вузов. Таким образом, в настоящее время является актуальным модернизация данного web-ресурса.

Цель работы: Модернизировать веб-ресурс «Профком студентов ПГУТИ», с возможностью получения обратной связи по вопросам студентов, максимальной информативностью, визуальной простотой.

При выполнении работы следует выполнить следующие задачи:

1. Исследовать современные CMS (Content Management system) и выбрать из них самую востребованную и удобной в использовании.

2. Изучить литературу по выбранному CMS.

3. Проанализировать принцип работы наиболее востребованных и просматриваемых веб-ресурсов «Профкома студентов» других университетов.

4. Выявить популярные и современные возможности, которые потребуются на веб-ресурс.

5. Осуществить установку последней версии CMS.

6. Разработать шаблоны и схему работы веб-ресурса.

7. Осуществить работу обратной связи на «веб-ресурсе».

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

Объектом исследования выступают средства и инструменты разработки современного веб-ресурса.

Предмет исследования: применение универсальных CMS (Content Management system): возможности данных систем для создания веб-ресурсов.

Работа содержит три раздела, введение и заключение.

В первом разделе проведен анализ требований к ресурсу, произведен анализ существующего ресурса и предъявлены предложения по модернизации.

Во втором разделе рассмотрены и выбраны средства создания Web-ресурса.

Третий раздел посвящен подробному описанию разработки и особенностям реализации Web-ресурса.

Основными источниками для написания работы послужили книги и статьи по разработке Web-сервиса с применением PHP, CMS.

1. Анализ требований к разрабатываемому Web-ресурсу

1.1 Анализ существующего Web-ресурса

Веб-сайт - система электронных документов (файлов данных и кода) частного лица или организации в компьютерной сети под общим адресом (доменным именем или IP-адресом).

Сайт структурного подразделения ПГУТИ предназначен для представления интересов в глобальной сети Интернет, получения доступа пользователей Интернета к информационным ресурсам, развития связей, установления персональных контактов, а также обеспечения эффективной коммуникации между структурными подразделениями университета [1].

- На Сайте должны присутствовать элементы символики университета и факультета (кафедры), размещенные в верхней части главной страницы Сайта.

- На Сайте должна присутствовать ссылка на главный портал университета (psuti.ru), размещенные в верхней части главной страницы Сайта.

- На Сайте рекомендуется размещение ссылок на официальные группы в социальных сетях.

- На Сайте рекомендуется наличие системы поиска информации.

- На Сайте рекомендуется использование форма обратной связи (гостевая книга, форум, блог, система «вопрос-ответ»), а также новостного RSS-канала.

Созданный в 2013 году веб-ресурс «Профком Студентов ПГУТИ» не соответствует этим требованиям. Его вид до модернизации представлен на рис. 1.1.

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

Рис. 1.1 - Вид страниц Web-ресурса ПГУТИ до модернизации

Веб-ресурс написан на старой версии WordPress, с простейшим шаблоном, основанный на теме «Mosaic», без должной анимации веб-ресурса.

Веб-ресурс содержит 5 главных страниц, виджеты: «Последние новости» и «Календарь». Веб-ресурс сделан с малейшим изменением программного кода. Отсутствуют современные возможности данного CMS и требования к сайтам структурных подразделений ПГУТИ:

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

Таким образом, главные требования, которым должен отвечать сайт:

1. Полезность

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

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

3. Навигация Система навигации - это то, с помощью чего посетитель перемещается по страницам сайта. Она должна быть простой и очевидной.

4. Функциональность Веб сайт должен выполнять те функции, которые на него возложены. Функциональность должна отражаться в структуре сайта и поддерживаться адекватным дизайном.

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

1.2 Предложения по модернизации веб-ресурса

1. Обновить старую версию WordPress на последнюю.

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

2. Обновить шаблон. Старые и простые шаблон и тема веб-ресурса.

Шаблон и тема являются дочерними от темы Мosaiс. Визуально очень простые и не привлекают должного внимания посетителя. Сама тема не дает определенных возможностей и ничем не отличается от других однотипных и простых веб-ресурсов. Шрифт текста был стандартным. В некоторых случаях тема не настраивалась должным образом под экран посетителя и происходило наложение текста на изображение.

3. Хостинг и домен ПГУТИ.

Производительность старого хостинга и домена ПГУТИ в настоящее время является низкой, производительности не хватает чтобы открыть сам веб-ресурс, а при загрузке некоторых страниц определенные возможности и виджеты не загружались. Административная панель WordPress данного ресурса не загружалась.

4. Обновить информацию и визуальную составляющую.

Информация, на данном веб-ресурсе долгое время не обновлялась, и в настоящее время является не актуальной.

2. Анализ современных средств создания сайта

2.1 Разновидности CMS

В настоящее время большинство сайтах работают на современных CMS.

CMS расшифровывается как «Content Management System» (Cистема управления содержимым (контентом)) - компьютерная программа или информационная система, используемая для обеспечения и организации совместного процесса создания, редактирования и управления содержимого (контентом)[2].

Существует две разновидности CMS:

· Система управления содержимым масштаба предприятия (Enterprise Content Management System) - программное обеспечение для управления корпоративным контентом(содержимым) и имеет глубокую внутреннюю классификацию по предметным областям (HRM, DMS, CRM, ERP)

· Система управления веб-содержимым (Web Content Management System) - программный комплекс, предоставляющий функции создания, редактирования, контроля и организации веб-страниц.

В связи с тем, что ECMS имеет такой масштаб, термин CMS заменил собой WCMS, превратившись в синоним Системы управления сайтами.

CMS устанавливается на хостинг площадке и выполняет следующие функции:

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

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

3. Публикация содержимого

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

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

Возможности CMS для разработчиков и заказчиков:

· В работе используется наиболее эффективный инструмент для решения конкретной задачи (в зависимости от вида сайта и требований к его функционалу подбирают оптимальную CMS);

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

· Работа сайта постоянно тестируется множеством пользователей, а найденные ошибки и уязвимости оперативно устраняются, при этом сайт работает на самых передовых и проверенных технических решениях;

· Временные затраты на разработку сайта существенно снижаются, так как разработчику не надо уделять своё внимание техническим задачам : «Как сделать ленту с новостями» или «как научить CMS искать нужную информацию в каталоге», а можно сосредоточиться на информационной и визуальной составляющих будущего сайта.

· Если работает команда разработчиков, то доступ ко всем возможностям редактирования и панелям администрации не составляет труда, нужно в самом CMS дать права доступа.

· Возможность обычному пользователю без особого труда и знания HTML, CSS создать свой сайт, а опытному программисту создавать на основе данной CMS свои темы, плагины различные утилиты.

По способу работы выделяют три типа CMS:

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

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

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

2.2 Рейтинг и каталог платных и бесплатных CMS

CMS делятся на платные и бесплатные.

Преимущества платных CMS:

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

2. Полностью настроенный и готовый к работе продукт. Отсутствует необходимость вмешательства в настройки CMS ползователю.

Преимущества бесплатных CMS:

3. Общедоступность в интернете абсолютно любому пользователю

4. Большое число бесплатных плагинов, модулей и шаблонов для этих CMS.

Рейтинг платных и бесплатных CMS

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

В мае 2016 года компания ITrack предоставила следующие рейтинги по самым популярным платным и бесплатным CMS (рис 2.1)

Рис. 2.1 - Процент использования различных CMS

Несмотря на то, что в рейтинге присутствуют и платные CMS, на первых двух местах находятся бесплатные CMS: WordPress и Joomla, на которых в общей сложности построено и работает более половины всех исследуемых web-ресурсов.

«Рейтинг Рунета» объявил итоги рейтинга самых популярных CMS 2016 года, основываясь на ТИЦ (Тематический индекс цитирования) и посещаемость (рис. 2.2).

Рис. 2.2 - «Рейтинг Рунета» по всем CMS

По «Рейтингу Рунета» можно отметить, что большим преимуществом обладает 1С-Битрикс, на котором написано 17759 проектов, когда на 2 месте WordPress с 5516 проектами и на 3 месте Joomla с 6453 проектами.

По результатам рейтинга платных CMS от ITrack за 2016 год почти с таким же результатом, как и «Рейтинг Рунета» по всем CMS лидирует 1С-Битрикс (рис. 2.3).

Рис. 2.3 - Сравнение платных CMS по рейтингу ITrack

Так как в работе будет использоваться бесплатная CMS, то следует проанализировать рейтинги по бесплатным CMS и выбрать лучшие. По результатам рейтинга от компании ITrack с большим отрывом лидирует WordPress, на 2 месте Joomla с достаточным отрывом (рис. 2.4).

Рис. 2.4 - Процент использования бесплатных CMS от ITrack

В ситуации с «Рейтингом Рунета» WordPress и Joomla также находятся на 1 и 2 местах (рис. 2.5).

Рис. 2.5 - «Рейтинг Рунета» по бесплатным CMS

2.3 Обзор CMS

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

MODx

MODx - система управления содержимым с открытым исходным кодом и открытой лицензией. Написана на языке программирования PHP, использует для хранения данных СУБД MySQL или MS SQL.

Одна из самых молодых CMS (разработка ведется с 2004 года), которая появилась в самом начале становления так называемого Веб 2.0. Идея заключалась в привлечении пользователей к редактированию и дополнению контента на сайте. MODx подходит для разработки любого сайта: блога, форму, огромного портала, сервиса с онлайн платежами[3].

Возможности:

· Создание любых сайтов на стандартах XHTML и CSS, адаптирующихся под разные браузеры.

· Настройка ключевых слов, дружественных URL

Преимущества:

· Поддержка RSS, веб-статистики, подписок.

· Платформа позволяет контролировать все элементы страницы (от платежной системы до документооборота и чата).

Недостатки:

· Мало готовых шаблонов.

· Чтобы восстанавливать удаленные объекты, нужно установить специальные плагины.

Drupal

Drupal - система управления сайтом, написанная на языке PHP и использующая в качестве хранилища данных реляционную базу данных (поддерживаются PotsgreSQL, MySQL, а также любые СУБД поддерживаемые библиотекой PEAR).

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

Преимущества:

· Наличие хуков (hooks), которые позволяют избежать практически любых проблем в системе.

· Высокий уровень безопасности.

· Модули CCK и VIEWS позволяют конструировать произвольные типы данных и их отображение.

· Удобная оптимизация.

· Модуль Taxonomy, который позволяет систематизировать контент по уровням, признакам и категориям.

· Адаптация для мобильных устройств.

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

Недостатки:

· Из-за своей сложности Drupal определенно не подходит для неопытного пользователя. Для того, чтобы кастомизировать модули в Drupal, необходимы дополнительные навыки в области программирования. Но вы можете нанять специалиста для этих целей.

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

· После установки дополнительных модулей формируется слишком большая вложенность тегов.

· В сборке Drupal по умолчанию отсутствует визуальный текстовый редактор.

· При установке дополнительных модулей Drupal генерирует технические страницы, их попадание в индекс оказывает негативное влияние на цели SEO;

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

Joomla

Joomla - система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базы данных СУБД MySQL. Joomla отличается частотой своих обновлений и решением массы проблем в новых версиях. Joomla представляет собой минимальный набор инструментов для администрирования, но при желании его можно расширить, скачав дополнительное программное расширение. Панель не дает большой нагрузки на сервер и экономист место на хостинге[5].

Возможности:

· Быстрая смена шаблонов.

· Создание неограниченного количества страниц.

· Вывод календаря публикаций.

· Настройка прав доступа, групповое администрирование.

· Генерация случайных новостей.

· Работа на серверах под управлением ОС Linux, MacOSX и других.

· Расширение функционала.

Преимущества:

· Простота настройки и управления.

· Поддержка более 60-и языков.

· Четкая структура, понятное главное меню.

· Наличие встроенного менеджера рассылки новостей, поддержка RSS.

· Архив публикаций скрывает старые статьи.

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

· Наличие большого количества русскоязычной документации.

Недостатки:

· Нужно регулярно обновлять.

· Если на Joomla нужно создать что-то более сложное, чем простую визитку, придется переписывать половины кода

· Лишний программный код в Joomla замедляет загрузку страниц сайта, даже при низкой посещаемости.

WordPress

WordPress - система управления содержимым сайта с открытым исходным кодом, написанная на PHP, использующая в качестве хранилища базы данных СУБД MySQL.WordPress отличается предельно простым интерфейсом, простота в создании публикаций и установки CMS на хостинг. Изначально WordPress создавался как система для ведения блогов, но в настоящее время на данной CMS разрабатывается большое количество сайтов, социальные сети и большое множество видов веб-ресурсов[6].

Возможности:

· Интеграция сайта со сторонними сервисами.

· Моментальная публикация.

Преимущества:

· Простая установка и настройка.

· Легкая реализация сложных решений.

· Много шаблонных «тем» для изменения внешнего вида страниц.

· Поддерживаются RSS, trackback, Atom, pingback.

· Адреса страниц пишутся простыми и понятными словами, а не кодируются в сложные знаково-числовые идентификаторы.

· Поддерживаются стандарты XHTML и CSS.

Недостатки:

· Генерация множества дублей страниц при работе, что негативно сказывается на SEO;

· Сразу после установки WordPress обладает минимумом возможностей, практически все реализуется дополнительными плагинами;

· WordPress требует много затрат к ресурсам хостинга, причем, с каждой новой версией требования только увеличиваются;

· Плохо подходит для реализации Интернет-магазина, хотя соответствующие плагины доступны;

· Многие дополнения нестабильно работают с различными версиями движка, поэтому при их установке можно нарушить стабильность работы сайта;

· WordPress постоянно пытаются взломать.

Анализ выбранных CMS представлен итоговой таблицей 2.1.

Таблица 2.1 Сравнение CMS

	MODx	Drupal	Joomla!	WordPress
Тип CMS	портальная	портальная	портальная	блог
Нагрузка на сервер	высокая	высокая	средняя	высокая
Язык программирования	php	php	php/JavaScript	php
Веб-сервер	Apache,IIS	Apache, Nginx, Lighttpd	Apache, IIS, nginx	Apache
База данных	MySQL, MS SQL	MySQL, PostgreSQL	MySQL, MsSQL, SQLite, InnerDB	MySQL
Операционная система	Кроссплатф. ПО	Кроссплатфор. ПО	Кроссплатформ. ПО	Кроссплатф. ПО
Модульность	+	+	+	+
Сложность проектов	от средней до высокой	высокая	от средней до высокой	низкая
Сложность доработки	высокая	высокая	средняя	средняя
Сложность администрирования	средняя	высокая	средняя	низкая
Уровень безопасности	высокий	высокий	средний	низкий
Русскоязычная документация	-	-	+	+
ЧПУ	+	+	+	+
Распределение прав пользователей	+	+	+	+
Возможность локализации админки	+	+	+	+
Возможность редизайна административной панели	+	-	+	+
Наличие готовых расширений	мало	достаточно	очень много	достаточно
Поддержка XML	+	+	+	+

На основе проведенного анализа различных CMS для разработки веб-ресурса «Профком студентов ПГУТИ» был выбран WordPress.

2.4 Программы разработки веб-ресурса

При разработке веб-ресурса были использованы следующие программные продукты:

· WordPress 4.7.5- инсталляционный пакет CMS;

· MySQL 5.7 - база данных для веб-ресурса

· Notepad++ 5.9.3 - для создания и редактирования css-файлов и xml-файлов;

· PhpMyAdmin - работа с базами данных MySql;

· Open-Server 5.2.2 - для локальной отладки и использования базы данных;

· FileZilla 3.0.7.1 - ftp-клиент;

· Total Commander 9.0 - для оперативной работы с файлами.

· Adobe Photoshop CC 2017 (18.0.1.29) - для создания дизайн-макета и получения графики для сайта;

· Для проверки валидности CSS и HTML используем сервисы сайтов: www.jigsaw.w3.org и www.validator.w3.org .

Разработка веб-ресурса велась исключительно под управлением операционной системы Windows.

3. Разработка веб-ресурса

3.1 Постановка задачи

Определение этапов разработки веб-ресурса:

1. Подготовка и формирование требований к веб-ресурсу;

2. Определение структуры страниц веб-ресурса;

3. Прорисовка дизайна веб-ресурса;

4. Установка WordPress на локальный сервер;

5. Карта веб-ресурса;

6. Создание шаблона;

7. Наполнение веб-ресурса контентом;

8. Запуск на локальном компьютере и отладка;

9. Проверка верстки на кроссбраузерность и валидность;

10. Размещение веб-ресурса на хостинге, проверка работоспособности.

3.2 Подготовка и формирование требований к веб-ресурсу

Организация - заказчик Первичная Профсоюзная Организация Студентов Поволжского Государственного Университета Телекоммуникаций и Информатики определила следующие требования к веб-ресурсу:

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

2. Форма обратной связи. Каждый заходящий на веб-ресурс пользователь должен иметь возможность задать интересующий его вопрос и получить на него ответ, не уходя с веб-ресурса.

3. Слайдер с фотографиями. Наличие на главной странице слайдера с фотографиями данной организации.

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

5. Галерея с мероприятиями. Красивая и оригинальная галерея для просмотра фотографий.

6. Записи и последние записи. Возможность администратора с помощью записей оставлять новости на веб-ресурсе.

7. Ссылки на другие ресурсы организации.

3.3 Определение структуры страниц веб-ресурса

Для создания данного веб-ресурса был выбран макет с автоматической шириной.

Основная структура страниц представлена на рис. 3.1.

«Логотип» - изображение Профкома студентов ПГУТИ, являющаяся ссылкой на главную страницу.

«Название и девиз» - название и девиз организации, которые являются ссылкой на главную страницу.

«Главное меню» - горизонтальное меню, содержащее страницы: «Главная», «О нас», «События», «Галерея», «Документы».

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

«Контент» - блок с различного рода информацией и функционал.

«Контактная информация» - блок, содержащий контактную информацию организации и ссылки на другие ресурсы организации.

«Диалоговое окно» - всплывающее окно, с возможностью задания вопроса у представителя организации.

«Футер» - блок с дополнительной информацией.

Рис. 3.1 - Структура страниц сайта

3.4 Создание дизайн-макета.

На основе разработанного макета и предоставленной организацией цветовой схемы веб-ресурса был создан Дизайн-макет. Дизайн-макет сделан в программе Adobe Photoshop CC 2017 (18.0.1.29). Дизайн-макет содержит реальные размеры всех элементов веб-ресурса и их расположение.

В верхней части страницы (шапки) расположен логотип ППОС ПГУТИ, справа от логотипа находится название и девиз ППОС ПГУТИ. В правой стороне верхней части сайта располагается «Главное» меню.

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

В правом нижнем углу располагается всплывающее «Диалоговое окно».

В нижней части сайта располагается контактная информация о ППОС ПГУТИ.

Каждый модуль повторяется на всех страницах.

Дизайн-макет главной страницы представлен ниже на рис. 3.2.

Рис. 3.2 - Дизайн макет главной страницы

Чтобы установить CMS нам необходимо установить Open-Server (портативный локальный WAMP/WNMP сервер, имеющий многофункциональную управляющую программу и большой выбор подключаемых компонентов) и инсталляционный пакет WordPress 4.7.5-ru.

Распаковываем файлы сервера на диск, после создаём папку OpenServer\domains\ProfcomPsuti и в неё распаковываем архив WordPress 4.7.5-ru.

Для обеспечения нормальной работы OpenServer в настройках устанавливаем следующие версии модулей (рис. 3.3):

Рис. 3.3 - Необходимые версии модулей в OpenServer

С помощью OpenServer создадим базу данных для нашего веб-ресурса. Открываем OpenServer и заходим Дополнительно > PhpMyAdmin. В появившемся окне вводим: Пользователь - *******; Пароль - ********, и нажимаем «Вперед». Создаем базу данных, как показано на рис. 3.4:

Рис. 3.4 - Необходимые данные в PhpMyAdmin

Приступаем к установке WordPress на OpenServer.

1. Запускаем Open Server и в нем открываем Мои Сайты > ProfcomPsuti.

2. В появившемся окне нажимаем «Вперёд!».

3. Конфигурация базы данных:

· Имя базы данных - ProfcomPsuti

· Имя пользователя - **********

· Пароль - ********

· Сервер базы данных - localhost

· Префикс таблиц - wp_

Нажимаем «Отправить».

4. В появившемся окне нажимаем «Запустить установку».

5. Главная конфигурация:

· Название сайта - ProfcomPsuti

· Имя пользователя - ********.

· Пароль - ********.

· Ваш e-mail.

Нажимаем «Установить WordPress».

6. Завершаем установку вводом: Имя пользователя и Пароль Нажимаем «Войти» и заходим в административную панель (рис. 3.5)

Рис. 3.5- Административная панель WordPress

3.5 Карта и шаблон веб-ресурса

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

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

Переход от страницы к странице и все меню нашего веб-ресурса представлены на рис. 3.6.

Рис. 3.6 - Карта веб-ресурса

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

Для создания шаблона и оснащения каждой страницы нам потребуется тема Layers. Установив данную тему на WordPress можно визуально редактировать каждую страницу и добавлять необходимый функционал.

Базовая структура шаблона на WordPress:

· файл index.php

· файл style.css

· файл single.php

· папка css

· файл comments.php

· файл sidebar.php

· файл header.php

· файл footer.php

· файл page.php

· файл functions.php

· папка images

index.php

Главный файл-шаблон темы WordPress, определяющий визуальное расположение элементов сайта, именно он отвечает за вывод главной страницы. В index.php внедряются подключаемые файлы: header.php (шапка сайта), sidebar.php (боковая панель с виджетами сайта) и footer.php (подвал сайта).

Содержимое файла index.php представлена ниже:

<?php

get_header();

do_action( 'layers_before_index' ); ?>

<div class="container content-main archive clearfix">

<div class="grid">

<?php get_sidebar( 'left' ); ?>

<?php if (have_posts() ) : ?>

<div id="post-list" <?php layers_center_column_class(); ?>>

<?php while ( have_posts() ) : the_post();

global $post; ?>

<?php get_template_part( 'partials/content' , 'list' ); ?>

<?php endwhile; // while has_post(); ?>

<?php layers_pagination(); ?>

</div>

<?php endif; // if has_post() ?>

<?php get_sidebar( 'right' ); ?>

</div>

</div>

<?php do_action( 'layers_after_index' );

get_footer();

Style.css

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

Single.php

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

Содержимое файла single.php представлена ниже:

<?php

get_header(); ?>

<div <?php post_class( 'content-main clearfix' ); ?>>

<?php do_action('layers_before_post_loop'); ?>

<div class="grid">

<?php get_sidebar( 'left' ); ?>

<?php if( have_posts() ) : ?>

<?php while( have_posts() ) : the_post(); ?>

<article id="post-<?php the_ID(); ?>" <?php layers_center_column_class(); ?>>

<?php get_template_part( 'partials/content', 'single' ); ?>

</article>

<?php endwhile; // while has_post(); ?>

<?php endif; // if has_post() ?>

<?php get_sidebar( 'right' ); ?>

</div>

<?php do_action('layers_after_post_loop'); ?>

</div>

<?php get_footer();

Comments.php

Файл отвечает за отображение комментариев у шаблона.

Содержимое файла comments.php представлена ниже:

<?php

do_action('layers_before_comments'); ?>

<div id="comments" <?php echo layers_wrapper_class( 'comment_container', 'push-top-large' ); ?>>

<?php if ( have_comments() ) { ?>

<div class="section-title small">

<h3 class="heading comment-title">

<?php

printf( _n( 'One Comment on &ldquo;%2$s&rdquo;', '%1$s Comments on &ldquo;%2$s&rdquo;', get_comments_number(), LAYERS_THEME_SLUG ),

number_format_i18n( get_comments_number() ),

'<span>' . get_the_title() . '</span>' );

?>

</h3>

</div>

<div <?php layers_wrapper_class( 'comment_list', 'comment-list clearfix' ); ?>>

<?php wp_list_comments( array( 'callback' => 'layers_comment', 'style' => 'div' ) ); ?>

</div><!-- .commentlist -->

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) { // are there comments to navigate through ?>

<nav id="comment-nav-below" class="pagination" role="navigation">

<div class="previous"><?php previous_comments_link( __( '&larr;' , 'layerswp' ) ); ?></div>

<div class="next"><?php next_comments_link( __( '&rarr;' , 'layerswp' ) ); ?></div>

</nav>

<?php } // check for comment navigation ?>

<?php }

/* If there are no comments and comments are closed, let's leave a note.

* But we only want the note on posts and pages that had comments in the first place.

*/

if ( !is_page() && ! comments_open() && get_comments_number() ) : ?>

<p class="nocomments"><?php _e( 'Comments are closed.' , 'layerswp' ); ?></p>

<?php endif; ?>

<?php comment_form(); ?>

</div><!-- #comments .comments-area -->

<?php do_action('layers_after_comments');

Sidebar.php

Файл отвечает за функционирование боковой панели на сайте.

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

Содержимое файла sidebar.php представлена ниже:

<div class="wrapper invert off-canvas-right" id="off-canvas-right">

<a class="close-canvas" data-toggle="#off-canvas-right" data-toggle-class="open">

<i class="l-close"></i>

<?php _e( "Close", LAYERS_THEME_SLUG ); ?>

</a>

<div class="content nav-mobile clearfix">

<?php wp_nav_menu( array( 'theme_location' => LAYERS_THEME_SLUG . '-primary' ,'container' => 'nav', 'container_class' => 'nav nav-vertical', 'fallback_cb' => 'layers_blank_menu' ) ); ?>

</div>

<?php dynamic_sidebar( LAYERS_THEME_SLUG . '-off-canvas-sidebar' ); ?>

</div>

Header.php

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

Содержимое файла header.php представлена ниже:

<!DOCTYPE html>

<html <?php language_attributes(); ?>>

<head>

<meta charset="<?php bloginfo( 'charset' ); ?>">

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>

<?php get_sidebar( 'off-canvas'); ?>

<?php do_action( 'layers_before_site_wrapper' ); ?>

<div <?php layer_site_wrapper_class(); ?>>

<?php do_action( 'layers_before_header' ); ?>

<?php get_template_part( 'partials/header' , 'secondary' ); ?>

<?php if ( 'header-sidebar' == layers_get_theme_mod( 'header-menu-layout' ) ) { ?>

<div class="header-side-wrapper"><!-- header side wrapper -->

<?php } ?>

<section <?php layers_header_class(); ?>>

<?php do_action( 'layers_before_header_inner' ); ?>

<div class="<?php if( 'layout-fullwidth' != layers_get_theme_mod( 'header-width' ) ) echo 'container'; ?> header-block">

<?php if( 'header-logo-center' == layers_get_theme_mod( 'header-menu-layout' ) ) {

get_template_part( 'partials/header' , 'centered' );

} else {

get_template_part( 'partials/header' , 'standard' );

} // if centered header ?>

</div>

<?php do_action( 'layers_after_header_inner' ); ?>

</section>

<?php do_action( 'layers_after_header' ); ?>

<section id="wrapper-content" <?php layers_wrapper_class( 'wrapper_content', 'wrapper-content' ); ?>>

Footer.php

Файл отвечает за отображение самой нижней части веб-ресурса (подвал).

Содержимое файла footer.php представлена ниже:

<div id="back-to-top">

<a href="#top"><?php _e( 'Back to top' , 'layerswp' ); ?></a>

</div> <!-- back-to-top -->

<?php if ( 'header-sidebar' == layers_get_theme_mod( 'header-menu-layout' ) ) { ?>

<?php get_template_part( 'partials/footer' , 'standard' ); ?>

<?php } ?>

</section>

<?php if ( 'header-sidebar' == layers_get_theme_mod( 'header-menu-layout' ) ) { ?>

</div><!-- /header side wrapper -->

<?php } else {

get_template_part( 'partials/footer' , 'standard' );

}?>

</div><!-- END / MAIN SITE #wrapper -->

<?php do_action( 'layers_after_site_wrapper' ); ?>

<?php wp_footer(); ?>

</body>

</html>

Page.php

Файл формирует статичные страницы.

Содержимое файла page.php представлена ниже:

<?php

get_header(); ?>

<div <?php post_class( 'container content-main clearfix' ); ?>>

<?php do_action('layers_before_page_loop'); ?>

<div class="grid">

<?php if( have_posts() ) : ?>

<?php while( have_posts() ) : the_post(); ?>

<article id="post-<?php the_ID(); ?>" <?php layers_center_column_class(); ?>>

<?php get_template_part( 'partials/content', 'single' ); ?>

</article>

<?php endwhile; // while has_post(); ?>

<?php endif; // if has_post() ?>

</div>

<?php do_action('layers_after_page_loop'); ?>

</div>

<?php get_footer();

Function.php

Файл содержит дополнительный функционал шаблона.

После создания шаблона и его редактирования под наш макет рассмотрим необходимые виджеты и плагины и добавим их в наш шаблон.

· Слайдер

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

Реализация данного виджета представлена ниже:

$swiper_js_obj = str_replace( '-' , '_' , $this->get_layers_field_id( 'slider' ) ); ?>

<script type='text/javascript'>

jQuery(function($){

var <?php echo $swiper_js_obj; ?> = $('#<?php echo $widget_id; ?>').swiper({

mode:'horizontal'

,onInit: function(s){

$(document).trigger( 'layers-slider-init', s);

}

,bulletClass: 'swiper-pagination-switch'

,bulletActiveClass: 'swiper-active-switch swiper-visible-switch'

,paginationClickable: true

,watchActiveIndex: true

<?php if( 'fade' == $this->check_and_return( $instance, 'animation_type' ) ) { ?>

,effect: '<?php echo $instance['animation_type']; ?>'

<?php } else if( 'parallax' == $this->check_and_return( $instance, 'animation_type' ) ) { ?>

,speed: 700

,parallax: true

<?php } ?>

<?php if( isset( $instance['show_slider_dots'] ) && ( !empty( $instance[ 'slides' ] ) && 1 < count( $instance[ 'slides' ] ) ) ) { ?>

,pagination: '.<?php echo $this->get_layers_field_id( 'pages' ); ?>'

<?php } ?>

<?php if( 1 < count( $instance[ 'slides' ] ) ) { ?>

,loop: true

<?php } else { ?>

,loop: false

,noSwiping: true

,allowSwipeToPrev: false

,allowSwipeToNext: false

<?php } ?>

<?php if( isset( $instance['autoplay_slides'] ) && isset( $instance['slide_time'] ) && is_numeric( $instance['slide_time'] ) ) {?>

, autoplay: <?php echo ($instance['slide_time']*1000); ?>

<?php }?>

<?php if( isset( $wp_customize ) && $this->check_and_return( $instance, 'focus_slide' ) ) { ?>

,initialSlide: <?php echo $this->check_and_return( $instance, 'focus_slide' ); ?>

<?php } ?>

});

<?php if( 1 < count( $instance[ 'slides' ] ) ) { ?>

<?php echo $swiper_js_obj; ?>.enableKeyboardControl();

<?php } // if > 1 slide ?>

<?php if( TRUE == $this->check_and_return( $instance , 'autoheight_slides' ) ) { ?>

$( '#<?php echo esc_attr( $widget_id ); ?>' ).imagesLoaded(function(){

layers_swiper_resize( <?php echo $swiper_js_obj; ?> );

});

$(window).resize(function(){

layers_swiper_resize( <?php echo $swiper_js_obj; ?> );

});

<?php } ?>

$('#<?php echo $widget_id; ?>').find('.arrows a').on( 'click' , function(e){

e.preventDefault();

$that = $(this);

if( $that.hasClass( 'swiper-pagination-switch' ) ){

<?php echo $swiper_js_obj; ?>.slideTo( $that.index() );

} else if( $that.hasClass( 'l-left-arrow' ) ){

<?php echo $swiper_js_obj; ?>.slidePrev();

} else if( $that.hasClass( 'l-right-arrow' ) ){

<?php echo $swiper_js_obj; ?>.slideNext();

}

return false;

});

<?php echo $swiper_js_obj; ?>.init();

if ( ! $('#<?php echo $widget_id; ?>').prev('.widget').length ) {

if ( ! $('#<?php echo $widget_id; ?>').hasClass( '.full-screen' ) ) {

jQuery('.header-site.header-overlay').css( 'transition', '0s' );

setTimeout( function(){ jQuery('.header-site.header-overlay').css( 'transition', '' ); }, 1000 );

jQuery('body').addClass( 'header-overlay-no-push' );

}

}

$( '#<?php echo $widget_id; ?>' ).removeClass('loading').addClass('loaded');

});

</script>

· Контент

Удобное размещение необходимого контента (информации) на веб-ресурсе, с возможности добавления медиа-файла, текстового форматирования и анимации необходимых медифайлов.

Код, предоставляющий место для виджета на странице показан ниже:

/**

* Generate the widget container class

*/

$widget_container_class = array();

$widget_container_class[] = 'widget';

$widget_container_class[] = 'layers-content-widget';

$widget_container_class[] = 'content-vertical-massive';

$widget_container_class[] = ( 'on' === $this->check_and_return( $instance , 'design', 'background', 'darken' ) ? 'darken' : '' );

// Only enable animation if enabled form advance settings

$widget_container_class[] = $this->get_animation_class( $instance );

$widget_container_class[] = $this->check_and_return( $instance , 'design', 'advanced', 'customclass' ); // Apply custom class from design-bar's advanced control.

$widget_container_class[] = $this->get_widget_spacing_class( $instance );

$widget_container_class = apply_filters( 'layers_content_widget_container_class' , $widget_container_class, $this, $instance );

$widget_container_class = implode( ' ', $widget_container_class );

// Custom Anchor

echo $this->custom_anchor( $instance ); ?>

<div id="<?php echo esc_attr( $widget_id ); ?>" class="<?php echo esc_attr( $widget_container_class ); ?>" <?php $this->selective_refresh_atts( $args ); ?>>

<?php do_action( 'layers_before_content_widget_inner', $this, $instance ); ?>

<?php if ( NULL !== $this->check_and_return( $instance , 'title' ) || NULL !== $this->check_and_return( $instance , 'excerpt' ) ) { ?>

<div class="container clearfix">

<?php

/**

* Generate the Section Title Classes

*/

$section_title_class = array();

$section_title_class[] = 'section-title clearfix';

$section_title_class[] = $this->check_and_return( $instance , 'design', 'fonts', 'size' );

$section_title_class[] = $this->check_and_return( $instance , 'design', 'fonts', 'align' );

$section_title_class[] = ( $this->check_and_return( $instance, 'design', 'background' , 'color' ) && 'dark' == layers_is_light_or_dark( $this->check_and_return( $instance, 'design', 'background' , 'color' ) ) ? 'invert' : '' );

$section_title_class = implode( ' ', $section_title_class );

?>

<div class="<?php echo $section_title_class; ?>">

<?php if( '' != $this->check_and_return( $instance, 'title' ) ) { ?>

<<?php echo $this->check_and_return( $instance, 'design', 'fonts', 'heading-type' ); ?> class="heading">

<?php echo $instance['title'] ?>

</<?php echo $this->check_and_return( $instance, 'design', 'fonts', 'heading-type' ); ?>>

<?php } ?>

<?php if( '' != $this->check_and_return( $instance, 'excerpt' ) ) { ?>

<div class="excerpt"><?php echo layers_the_content( $instance['excerpt'] ); ?></div>

<?php } ?>

</div>

</div>

<?php } ?>

· Карта Google Maps

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

Код по подключению необходимых ресурсов представлен ниже:

// Custom Anchor

echo $this->custom_anchor( $instance ); ?>

<div id="<?php echo esc_attr( $widget_id ); ?>" class="<?php echo esc_attr( $widget_container_class ); ?>" <?php $this->selective_refresh_atts( $args ); ?>>

<?php do_action( 'layers_before_contact_widget_inner', $this, $instance ); ?>

<?php if( $show_title_or_excerpt ) { ?>

<div class="container clearfix">

<?php /**f

* Generate the Section Title Classes

*/

$section_title_class = array();

$section_title_class[] = 'section-title clearfix';

$section_title_class[] = $this->check_and_return( $instance , 'design', 'fonts', 'size' );

$section_title_class[] = $this->check_and_return( $instance , 'design', 'fonts', 'align' );

$section_title_class[] = ( $this->check_and_return( $instance, 'design', 'background' , 'color' ) && 'dark' == layers_is_light_or_dark( $this->check_and_return( $instance, 'design', 'background' , 'color' ) ) ? 'invert' : '' );

$section_title_class = implode( ' ', $section_title_class ); ?>

<div class="<?php echo $section_title_class; ?>">

<?php if( '' != $this->check_and_return( $instance, 'title' ) ) { ?>

<<?php echo $this->check_and_return( $instance, 'design', 'fonts', 'heading-type' ); ?> class="heading">

<?php echo $instance['title']; ?>

</<?php echo $this->check_and_return( $instance, 'design', 'fonts', 'heading-type' ); ?>>

<?php } ?>

<?php if( '' != $this->check_and_return( $instance, 'excerpt' ) ) { ?>

<div class="excerpt"><?php echo layers_the_content( $instance['excerpt'] ); ?></div>

<?php } ?>

</div>

</div>

<?php } // if title || excerpt ?>

<?php /**

* Generate the Widget Body Class

*/

$widget_body_class = array();

$widget_body_class[] = 'row';

$widget_body_class[] = $this->get_widget_layout_class( $instance );

$widget_body_class[] = ( $this->check_and_return( $instance, 'design', 'background' , 'color' ) && 'dark' == layers_is_light_or_dark( $this->check_and_return( $instance, 'design', 'background' , 'color' ) ) ? 'invert' : '' );

$widget_body_class = implode( ' ', $widget_body_class ); ?>

<div class="<?php echo $widget_body_class; ?>">

<?php if( $show_address_or_contactform ) {?>

<div class="column <?php echo $form_class; ?> form content">

<?php if( $this->check_and_return( $instance, 'show_address' ) ) { ?>

<address class="copy">

<p><?php echo $instance['address_shown']; ?></p>

</address>

<?php } ?>

<?php if( $this->check_and_return( $instance, 'contact_form' ) ) { ?>

<?php echo do_shortcode( $instance['contact_form'] ); ?>

<?php } ?>

</div>

<?php $mapwidth = 'span-6'; ?>

<?php } // if show_contact_form || address_shown ?>

<?php if( isset( $hasmap ) ) { ?>

<div class="column no-push-bottom <?php echo esc_attr( $mapwidth ); ?>">

<?php if ( isset( $wp_customize ) ) { ?>

<?php if( $this->check_and_return( $instance, 'google_maps_location' ) ) {

$map_center = $instance['google_maps_location'];

} else if( $this->check_and_return( $instance, 'google_maps_long_lat' ) ) {

$map_center = $instance['google_maps_long_lat'];

} ?>

<div class="layers-map" style="height: <?php echo esc_attr( $instance['map_height'] ); ?>px; overflow: hidden;">

<img src="https://maps.googleapis.com/maps/api/staticmap?center=<?php echo esc_attr( $map_center ); ?>&zoom=<?php echo ( isset( $instance['google_maps_zoom'] ) ? $instance['google_maps_zoom'] : 14 ) ; ?>&size=1960x<?php echo ( isset( $instance['map_height'] ) && '' != $instance['map_height'] ) ? $instance['map_height'] : 400; ?>&scale=2&markers=color:red|<?php echo esc_attr( $map_center ); ?>" class="google-map-img" />

</div>

<?php } else { ?>

<div class="layers-map" style="height: <?php echo esc_attr( $instance['map_height'] ); ?>px;" data-zoom-level="<?php echo ( isset( $instance['google_maps_zoom'] ) ? $instance['google_maps_zoom'] : 14 ); ?>" <?php if( '' != $instance['google_maps_location'] ) { ?>data-location="<?php echo $instance['google_maps_location']; ?>"<?php } ?> <?php if( '' != $instance['google_maps_long_lat'] ) { ?>data-longlat="<?php echo $instance['google_maps_long_lat']; ?>"<?php } ?>></div>

<?php } ?>

</div>

<?php } ?>

</div>

<?php do_action( 'layers_after_contact_widget_inner', $this, $instance );

// Print the Inline Styles for this Widget

$this->print_inline_css( $this, $instance );; ?>

</div>

<?php if ( !isset( $wp_customize ) ) {

wp_enqueue_script( LAYERS_THEME_SLUG . "-map-api" );

wp_enqueue_script( LAYERS_THEME_SLUG . "-map-trigger" );

} // Enqueue the map js

}

· Обратная связь

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

Код обратной связи представлен ниже:

<br>

<!-- VK Widget -->

<div id="vk_community_messages"></div>

<script type="text/javascript">

VK.Widgets.CommunityMessages("vk_community_messages", 9181196, {tooltipButtonText: "Есть вопрос? Мы ответим!"});

</script>

Реализация на веб-ресурсе представлена на рис. 3.7. При нажатии на знак появляется диалоговое окно

Рис. 3.7 - Вызов окна обратной связи.

· Новостная лента из социальной сети «Вконтакте»

На веб-ресурсе есть своя новостная система записей и необходима трансляция записей с группы организации в социальной сети «Вконтакте».

Код новостной ленты представлен ниже:

<script type="text/javascript" src="//vk.com/js/api/openapi.js?146"></script>

<!-- VK Widget -->

<div id="vk_groups"></div>

<script type="text/javascript">

VK.Widgets.Group("vk_groups", {mode: 4, wide: 1, height: "550", width:"1000"}, 9181196);

...