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

</script>

· Галерея

Для адекватного восприятия картинок и фотографий на веб-ресурс устанавливается виджет «Галерея». В котором можно редактировать необходимые фотографии, их порядок и расположение самого виджета на экране.

class C_Widget_Gallery extends WP_Widget

{

function __construct()

{

$widget_ops = array('classname' => 'ngg_images', 'description' => __('Add recent or random images from the galleries', 'nggallery'));

parent::__construct('ngg-images', __('NextGEN Widget', 'nggallery'), $widget_ops);

}

function form($instance)

{

// used for rendering utilities

$parent = C_Widget::get_instance();

// defaults

$instance = wp_parse_args((array) $instance, array('exclude' => 'all', 'height' => '75', 'items' => '4', 'list' => '', 'show' => 'thumbnail', 'title' => 'Gallery', 'type' => 'recent', 'webslice' => TRUE, 'width' => '100'));

$parent->render_partial('photocrati-widget#form_gallery', array('self' => $this, 'instance' => $instance, 'title' => esc_attr($instance['title']), 'items' => intval($instance['items']), 'height' => esc_attr($instance['height']), 'width' => esc_attr($instance['width'])));

}

function update($new_instance, $old_instance)

{

$instance = $old_instance;

// do not allow 0 or less

if ((int) $new_instance['items'] <= 0) {

$new_instance['items'] = 4;

}

// for clarity: empty the list if we're showing every gallery anyway

if ($new_instance['exclude'] == 'all') {

$new_instance['list'] = '';

}

// remove gallery ids that do not exist

if (in_array($new_instance['exclude'], array('denied', 'allow'))) {

// do search

$mapper = C_Gallery_Mapper::get_instance();

$ids = explode(',', $new_instance['list']);

foreach ($ids as $ndx => $id) {

if (!$mapper->find($id)) {

unset($ids[$ndx]);

}

}

$new_instance['list'] = implode(',', $ids);

}

// reset to show all galleries IF there are no valid galleries in the list

if ($new_instance['exclude'] !== 'all' && empty($new_instance['list'])) {

$new_instance['exclude'] = 'all';

}

$instance['title'] = strip_tags($new_instance['title']);

$instance['items'] = (int) $new_instance['items'];

$instance['type'] = $new_instance['type'];

$instance['show'] = $new_instance['show'];

$instance['width'] = (int) $new_instance['width'];

$instance['height'] = (int) $new_instance['height'];

$instance['exclude'] = $new_instance['exclude'];

$instance['list'] = $new_instance['list'];

$instance['webslice'] = (bool) $new_instance['webslice'];

return $instance;

}

function widget($args, $instance)

{

$router = C_Router::get_instance();

wp_enqueue_style('nextgen_widgets_style', $router->get_static_url('photocrati-widget#widgets.css'), FALSE, NGG_SCRIPT_VERSION);

wp_enqueue_style('nextgen_basic_thumbnails_style', $router->get_static_url('photocrati-nextgen_basic_gallery#thumbnails/nextgen_basic_thumbnails.css'), FALSE, NGG_SCRIPT_VERSION);

// these are handled by extract() but I want to silence my IDE warnings that these vars don't exist

$before_widget = NULL;

$before_title = NULL;

$after_widget = NULL;

$after_title = NULL;

$widget_id = NULL;

extract($args);

$title = apply_filters('widget_title', empty($instance['title']) ? '&nbsp;' : $instance['title'], $instance, $this->id_base);

$renderer = C_Displayed_Gallery_Renderer::get_instance();

$factory = C_Component_Factory::get_instance();

$view = $factory->create('mvc_view', '');

// IE8 webslice support if needed

if (!empty($instance['webslice'])) {

$before_widget .= '<div class="hslice" id="ngg-webslice">';

$before_title = str_replace('class="', 'class="entry-title ', $before_title);

$after_widget = '</div>' . $after_widget;

}

$source = $instance['type'] == 'random' ? 'random_images' : 'recent';

$template = !empty($instance['template']) ? $instance['template'] : $view->get_template_abspath('photocrati-widget#display_gallery');

$params = array('slug' => 'widget-' . $args['widget_id'], 'source' => $source, 'display_type' => NGG_BASIC_THUMBNAILS, 'images_per_page' => $instance['items'], 'maximum_entity_count' => $instance['items'], 'template' => $template, 'image_type' => $instance['show'] == 'original' ? 'full' : 'thumb', 'show_all_in_lightbox' => FALSE, 'show_slideshow_link' => FALSE, 'show_thumbnail_link' => FALSE, 'use_imagebrowser_effect' => FALSE, 'disable_pagination' => TRUE, 'image_width' => $instance['width'], 'image_height' => $instance['height'], 'ngg_triggers_display' => 'never', 'widget_setting_title' => $title, 'widget_setting_before_widget' => $before_widget, 'widget_setting_before_title' => $before_title, 'widget_setting_after_widget' => $after_widget, 'widget_setting_after_title' => $after_title, 'widget_setting_width' => $instance['width'], 'widget_setting_height' => $instance['height'], 'widget_setting_show_setting' => $instance['show'], 'widget_setting_widget_id' => $widget_id);

switch ($instance['exclude']) {

case 'all':

break;

case 'denied':

$mapper = C_Gallery_Mapper::get_instance();

$gallery_ids = array();

$list = explode(',', $instance['list']);

foreach ($mapper->find_all() as $gallery) {

if (!in_array($gallery->{$gallery->id_field}, $list)) {

$gallery_ids[] = $gallery->{$gallery->id_field};

}

}

$params['container_ids'] = implode(',', $gallery_ids);

break;

case 'allow':

$params['container_ids'] = $instance['list'];

break;

}

echo $renderer->display_images($params);

}

}

Для приятного восприятия контента, в частности картинок и фотографии добавим анимацию, в которой при наведении на картинку она менялась в размерах, цвете и производила различного рода «трансформацию» (рис. 3.8 и рис.3.9).

Рис. 3.8 - Вывод текста и фона при наведении

Рис. 3.9 - Увеличение изображения при наведении

3.6 Наполнение сайта контентом

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

Список и местоположение всех страниц изображено на рис. 3.10.

Рис. 3.10 - Главное меню

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

Рис. 3.11 - Расположение виджетов на главной странице

Аналогичным образом делаем другие страницы с нужными виджетами для каждой. Загружаем необходимые для главной страницы медиафайлы в библиотеку файлов WordPress, изображенной на рис. 3.12.

Рис. 3.12- библиотека файлов WordPress

Располагаем предоставленные организацией медиафайлы и информацию на главной странице согласно макету. Главная страница с полностью заполненным контентом изображена на рис. 3.13.

Рис. 3.13 - Готовая Главная страница

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

После проделанной работы имеем следующую базу данных (рис. 3.14) содержащую 17 таблиц.

Рис. 3.14 - База данных

3.7 Отладка работы и проверка верстки на кроссбраузерность и валидность

На компьютере запускаем локальный сервер OpenServer и в нём открываем Мои сайты > ProfcomPsuti.

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

В WordPress устанавливаем плагин Jetpack необходимый для обеспечения безопасности и производительности нашего веб-ресурса.

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

Проверка корректности отображения верстки была проведена в следующих браузерах:

· Google Chrome (версии 41, 48 и новее);

· Яндекс.Браузер (версии 16.3, 16.9 и новее);

· Mozilla Firefox (версии 34.0 , 42.0 и новее);

· Safari;

· Internet Explorer (7,8,9 версии);

Пример реализации на Google Chrome и Яндекс.Браузер на рис. 3.15 и рис. 3.16.

Рис. 3.15 - Web-ресурс на Google Chrome

Рис. 3.16 - Web-ресурс на Яндекс.Браузер

Проверка была произведена и на различных разрешениях мониторов:

· 1024x768

· 1280x720

· 1280x960

· 1366x768

· 1440x960

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

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

Для проверки нашего веб-ресурса на валидность были использованы сайты http://jigsaw.w3.org/css-validator/ (проверка валидности файла таблиц стилей) и http://validator.w3.org/ (проверка валидности html-верстки). Запускаем браузер и загружаем файл с версткой нашей главной страницы index.php.

Рис. 3.17 - Результат проверки файла style.css

Рис. 3.18 - Результат проверки файла index.php

По результатам проверки ошибок в файле стилей не обнаружено, html-верстка является валидной.

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

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

Необходимые требования от WordPress к хостингу:

· PHP версии 7 или выше

· MySQL версии 5.6 или выше

· Протокол HTTPS

· Модуль Apache mod_rewrite

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

Заключение

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

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

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

- Ознакомление с CMS: типы, рейтинги самых популярных и востребованных;

- Анализ и сравнение самых востребованных CMS, выбор из них наиболее подходящего;

- Изучение WordPress - основные принципы работы, популярные расширения;

- Разбор взаимодействия WordPress с базами данных и локальным сервером;

- Разработка дизайн-макета и карты веб-ресурса;

- Создание шаблона, модернизация и адаптация виджетов, размещение контента;

- Верстка веб-ресурса по дизайн макету;

- Тестирование и отладка веб-ресурса;

- Размещение веб-ресурса на хостинге;

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

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

По результатам ВКР получен акт внедрения в эксплуатацию веб-ресурса для профкома студентов ПГУТИ.

Веб-ресурс доступен в сети интернет по адресу: www.studprof.psuti.ru

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

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

...