Создание информационного сайта «Афиша Магнитогорска»
Разработаны сайт (https://afisha.magnitogorsk.ru/) и мобильное приложение, где объединена информация о всех события, проводимых в городе Магнитогорске и предоставлена возможность для жителей города Магнитогорска онлайн приобретения билетов.
Цель проекта. Повышение осведомленности жителей города о новинках городских событий в сфере культуры и спорта.
Описание системы
Общая информация
Афиша города Магнитогорска – информативный сайт с расписанием и анонсами городских событий в сфере культуры и спорта, проходящих в городе Магнитогорске.
Возможности сайта:
- Автоматический сбор информации о событиях с билетных систем с использованием API.
- Добавление мероприятий и учреждений.
- Переход в событие на сайт театра для покупки билета.
- Формирование групп событий по тэгам (театр, музыка, спорт и т.д.).
- Фильтр по возрастному ограничению и категориям.
- Сортировка по дате, по типу, по цене, по месту проведения.
- Функция «Поделиться с друзьями» через разные социальные сети.
- Синхронизация со сторонними сервисами, а именно radario.ru, Единое Поле - единая билетная система и kassy.ru.
- Возможность отправки пользователем Сайта на электронный адрес Администратора Сайта информации о наличии ошибки на странице без использования сторонних грамматических сервисов, а по аналогии «выделите текст, нажмите CTRL+Enter».
Система управления контентом и программное обеспечение
- Операционная система: «Astra Linux Common Edition»;
- Система управления контентом - веб-фреймворк с открытым кодом: «Laravel» 5.8;
- Веб-сервер: «Apache» не ниже 2.4;
- Язык программирования: «PHP»;
- СУБД: «PostgreSQL» не ниже 9.6 или «MySQL» не ниже 5.7.
Надежность сайта
- Сайт предусматривает базовую защиту от основных видов атак: межсайтового скриптинга (XSS), SQL-инъекций, CSRF-уязвимостей;
- Обеспечен защищенный канал связи между Сайтом и пользователем сайта на основе расширенного протокола передачи гипертекста с обеспечением безопасности транспортного уровня (Transport Layer Security, TLS) и протокола защищенных соединений (Secure Socket Layer v.3, SSL3);
- Обеспечена защита передаваемой информации от несанкционированного доступа, ее искажения или блокирования с момента поступления указанной информации на сайт до момента передачи ее пользователю;
- Настроено ежедневное резервное копирование данных из базы данных Сайта и каталога с исходными кодами Сайта. Резервные копии хранятся в предоставленном Заказчиком месте. Использована система инкрементного резервирования, для уменьшения исходящего трафика с сервера. Единовременное хранение резервных копий за 30 дней;
- процессе выполнения работ строго соблюдались действующие требования к информационной безопасности, в том числе:
-
- обеспечивалася защита информации, содержащейся на сайте от уничтожения, изменения и блокирования доступа к ней со стороны третьих лиц;
- все файлы проверены сертифицированным антивирусным программным обеспечением;
- Обеспечено ведение журналов работы с Сайтом, отображающих реквизиты входа и выхода администратора, модераторов, изменяемые разделы и страницы сайта.
Адаптивная верстка
- Разработан и согласован с Заказчиком макет-дизайн Сайта;
- Сайт корректно отображается в мобильных (iOS и Android) и в популярных настольных (Windows и Mac OSX) операционных системах в популярных браузерах.
- Обеспечено корректное отображение информации Сайта в версии для инвалидов по зрению в соответствии с постановлением Губернатора Челябинской области от 01.10.2010 № 292 «Об обеспечении доступа к информации о деятельности Губернатора Челябинской области, Правительства Челябинской области и органов исполнительной власти Челябинской области, размещаемой в информационно-телекоммуникационной сети общего пользования Интернет» и приказом Министерства связи и массовых коммуникаций Российской Федерации от 30.11.2015 № 483 «Об установлении порядка обеспечения условий доступности для инвалидов по зрению официальных сайтов федеральных органов государственной власти, органов государственной власти субъектов российской федерации и органов местного самоуправления в сети Интернет»;
- Использована адаптивная верстка (ширина рабочей области от 320рх до 1340рх);
- HTML-документы соответствуют стандарту W3C с применением CSS;
- Определение стилей вынесены в отдельные файлы style.css. Стили для оформления HTML-текста едины для всего сайта;
- Все теги прописаны в нижнем регистре;
- У всех ссылок прописан параметр title;
- У всех изображений прописаны параметр alt и title;
- Применяется кодировка UTF-8.
Административная часть сайта
- Административная часть Сайта имеет стандартный оконный интерфейс, отвечающий следующим требованиям:
-
- реализация в графическом оконном режиме;
- единый стиль оформления;
- интуитивно понятное назначение элементов интерфейса;
- отображение на экране только тех возможностей, которые доступны конкретному пользователю;
- отображение на экране хода длительных процессов обработки.
- Обеспечено разграничение прав доступа по разделам сайта. Для этого предусмотрена возможность регистрации администратора сайта, а также модераторов, имеющих полные или ограниченные права на отдельные разделы сайта.
- Доступ к ведению учетных записей модераторов имеет только администратор сайта.
Структура сайта
Главная страница (Афиша)
На странице выводится основная информация о мероприятиях города Магнитогорска.
Шапка сайта
Шапка - это сквозной элемент сайта, который присутствует на всех страницах. И всегда содержит:
- Логотип,
- Ссылки на разделы сайта.
Ссылки на основные разделы сайта. В правой части шапки выводятся ссылки на разделы сайта:
- Афиша. Осуществляет переход на главную страницу с мероприятиями.
- Учреждения. Осуществляет переход на страницу с учреждениями.
- Информация. Осуществляет переход на информативную страницу о проекте «Афиша города Магнитогорска».
- Контакты. Осуществляет переход к контактным данным организаторов.
Слайдер с баннерами
Баннеры в слайдере переключаются автоматически. Каждый баннер состоит из изображения и минимальной информации о мероприятии.
Блок с фильтрацией, сортировкой и поиском
Фильтр состоит из пунктов:
- Возрастное ограничение: 0+, 6+,12+,18+;
- Бесплатно/Электронный билет.
Выбор категории.
Сортировка:
- По дням;
- По тегам.
Поиск
При скроле блок крепится к верхней части экрана.
Блок «Новинки»
Слайдер с новинками мероприятий с краткой информацией:
- Название мероприятия;
- Дата;
- Возрастное ограничение;
- Стоимость;
- Хештеги.
Блок «Мероприятия»
Карточки мероприятий с краткой информацией:
- Категория;
- Название мероприятия;
- Дата;
- Возрастное ограничение;
- Стоимость;
- Хештеги.
Подвал
Подвал - это сквозной элемент сайта. Он присутствует на всех страницах сайта, не изменяя своё состояние.
Подвал состоит из:
- Copyright.
Детальная страница мероприятия
На данной странице выводится подробная информация о выбранном мероприятии города Магнитогорска.
Блок с картинкой
В левом блоке располагается картинка с афишей мероприятия.
Блок «Информация о мероприятии»
В правом блоке располагается полная информация о мероприятии:
- организатор;
- название;
- тип события;
- начало;
- длительность;
- цена билета.
Блок «Описание мероприятия»
Текстовый блок с описанием мероприятия.
Слайдер с фото
Блок со фотографиями этого мероприятия.
Карта
Карта местонахождения учреждения, где будет проводиться мероприятия.
Страница «Учреждения»
На данной странице выводится список учреждений культуры города Магнитогорска.
Блок фильтрации и поиска
- Слева располагается фильтр по виду учреждений;
- Справа поиск по учреждениям.
Блок «Карточки учреждений»
В этом блоке находятся карточки учреждений с краткой информацией:
- Фото;
- Название;
- Адрес;
- Телефон.
Детальная страница «Учреждения»
На данной странице выводится подробная информация о выбранном учреждении культуры города Магнитогорска.
Блок с фото
В левом блоке располагается картинка с фотографией учреждения.
Блок «Информация об учреждении»
В правом блоке располагается полная информация о мероприятии:
- название;
- адрес;
- часы работы;
- руководитель;
- контакты;
- сайт;
- социальные сети.
Блок «Описание мероприятия»
Текстовый блок с описанием учреждения.
Карта
Карта местонахождения учреждения, где будет проводиться мероприятия.
Мобильное приложение
Разработан и согласован с Заказчиком макет-дизайн экранов мобильного приложения «Афиша города Магнитогорска» и мобильные приложения для операционных систем «iOS» (версии 12+) и «Android» (версии 5+) адаптированы для использования на устройствах категории «смартфон» с диагональю экрана от 4” до 5,5”, а также «планшет» от 5,5” до 10” в соответствии с согласованным с Заказчиком дизайном.
Используется деградация функциональности элементов дизайна, связанных с техническими ограничениями версий мобильных операционных систем.
Основной функционал мобильного приложения:
- Автоматический сбор информации о событиях с билетных систем по API.
- Поиск по названию мероприятия.
- Транзакция покупки билета.
- Фильтр по возрастному ограничению и категориям.
- Фильтр билета (бесплатно, по стоимости).
- Сортировка по дате, по типу, по цене, по месту проведения.
- Календарь, добавление события напоминания (локальное Push-уведомление).
Технологии
React Native, React.js, Node.jsСтруктура мобильного приложения
Главный экран (Афиша)
При запуске мобильного приложения отображается главный экран – Афиша. На этом экране выводится основная информация о мероприятиях города Магнитогорска.
Шапка навигационного меню
Шапка - это сквозной элемент приложения, который присутствует на всех страницах. И всегда содержит:
- Бургер меню с ссылками на разделы сайта;
- Логотип;
- Поиск дублируется для удобства на всех страницах приложения.
Бургер меню
В левой верхней части шапки выводятся бургер меню с ссылками на разделы сайта:
- Афиша. Осуществляет переход на главную страницу с мероприятиями.
- Учреждения. Осуществляет переход на страницу с учреждениями.
- Информация. Осуществляет переход на информативную страницу о проекте «Афиша города Магнитогорска».
- Контакты. Осуществляет переход к контактным данным организаторов.
Слайдер с баннерами
Баннеры в слайдере переключаются автоматически. Каждый баннер состоит из изображения и минимальной информации о мероприятии.
Блок с сортировкой
Выбор категории
Сортировка:
- По дням.
Блок «Новинки»
Слайдер с новинками мероприятий с краткой информацией:
- Название мероприятия;
- Дата;
- Возрастное ограничение;
- Стоимость;
- Хештеги.
Блок «Мероприятия»
Карточки мероприятий с краткой информацией:
- Категория;
- Название мероприятия;
- Дата;
- Возрастное ограничение;
- Стоимость;
- Хештеги.
Кнопка «Показать еще».
Нижний сайдбар
Сайдбар - это сквозной элемент приложения, который присутствует на всех страницах. И всегда содержит:
- Шаг назад – на всех страницах, кроме тех, которые не ссылаются на разделы сайта (согласно тепловой карте поместили кнопку вниз);
- Уведомления – напоминания о предстоящем событии;
- Тегирование – сортировка по тегам и с поиском нужного;
- Мои билеты – страница с забронированными или купленными билетами;
- Фильтр состоит из пунктов:
- Возрастное ограничение: 0+, 6+,12+,18+;
- Бесплатно/Электронный билет.
Экран «Мероприятие»
На этом экране выводится подробная информация о выбранном мероприятии города Магнитогорска.
Блок с картинкой
Самым первым блоком располагается картинка с афишей мероприятия.
Блок «Информация о мероприятии»
Ниже располагается полная информация о мероприятии:
- организатор;
- название;
- тип события;
- начало;
- длительность;
- цена билета;
- кнопка забронировать.
Блок «Поделиться с друзьями»
Ниже располагаются кнопки поделиться в социальных сетях.
Блок «Описание мероприятия»
Текстовый блок с описанием мероприятия.
Слайдер с фото
Блок со фотографиями этого мероприятия.
Карта
Карта местонахождения учреждения, где будет проводиться мероприятие.
Экран «Учреждения»
На этом экране выводится список учреждений культуры города Магнитогорска.
Блок фильтрации и поиска
- После заголовка сразу ниже располагается фильтр по виду учреждений;
- Ниже располагается поиск по учреждениям.
Блок «Карточки учреждений»
В этом блоке находятся карточки учреждений с краткой информацией:
- Фото;
- Название;
- Адрес;
- Телефон.
Ниже расположена кнопка «Показать ешё».
Экран «Учреждение»
На этом экране выводится подробная информация о выбранном учреждении культуры города Магнитогорска.
Блок с фото
Самым первым блоком располагается картинка с фотографией учреждения.
Блок «Информация об учреждении»
После блока с фото, располагается полная информация о мероприятии:
- название;
- адрес;
- часы работы;
- руководитель;
- контакты;
- сайт;
- социальные сети.
Блок «Описание мероприятия»
Текстовый блок с описанием учреждения.
Карта
Карта местонахождения учреждения, где будет проводиться мероприятия.
Экран «Информация»
На этом экране выводится информация о приложении.
Блок «Информация о приложении»
Текстовый блок с описанием учреждения.
Экран «Контакты»
На этом экране выводится описание для связи с владельцем.
Блок «Информация о владельце»
Текстовый блок с описанием для связи с владельцем.
Авторизация пользователей
Приложения публичны, использование контента внутри приложений никак не ограничивается для пользователей.
Загрузка Приложения на планшетные компьютеры и мобильные устройства конечного пользователя
Обеспечена публикация Приложения в международных магазинах приложений Apple AppStore и Google Play Market для бесплатного распространения на неограниченной территории, в том числе:
- Размещено описание приложения;
- Созданы визуальные материалы оформления страницы приложения в магазинах приложений Apple AppStore и Google Play Market.
Для Заказчика создан аккаунт разработчика в магазинах приложений и переданы идентификационные данные аккаунтов (логин/пароль).
Примеры страниц сайта
Популярное
Мы используем cookie. Они помогают нам понять, как вы взаимодействуете с сайтом. При посещении страниц сайта вы даете согласие на использование и хранение файлов cookie на вашем устройстве. Подробнее