Перейти к содержанию

Программирование Викиданных/Artolela-web

Материал из Викиверситета

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

О приложении

[править]
Картина "Дети с птичкой и кошкой"
Автор: Ван дер Нер, Эглон
Год: 1680-е годы

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

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

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

Язык разработки: PHP, CSS, Javascript

Язык интерфейса: английский

Описание приложения

[править]

Приложение предназначено для проверки навыков владения языками в игровой форме.

Суть игры

[править]
  1. В начале игры пользователь выбирает два языка (первый язык для подписей к картинам и второй язык для вариантов ответа) и уровень (количество картин, названия которых ему нужно отгадать).
  2. Затем пользователю показывается картина и четыре варианта названия этой картины на втором языке. Название картины на первом языке скрыто от пользователя.
  3. Пользователю необходимо выбрать верный вариант названия картины на втором языке.

Сценарий игры

[править]
  1. Пользователь выбирает два языка.
  2. Пользователь выбирает количество уровней.
  3. Пользователь нажимает кнопку «START».
  4. Пользователю показывается картина, четыре варианта ответа и ссылка на картину на Викискладе.
  5. Пользователь выбирает один из предложенных вариантов ответов.
  6. Пользователь нажимает кнопку «NEXT».
  7. После того как пользователь прошёл заданное количество уровней, он видит на экране свою оценку в виде отношения количества правильно отвеченных вопросов к общему количеству вопросов.
  8. Если пользователь нажимает кнопку «NEW GAME», то пункты 1-8 повторяются.

Примечания

[править]
  1. На 2017 год приложение поддерживает три языка (русский, английский, немецкий). Количество картин-объектов на сайте Викиданных, имеющих label (описание) одновременно на:
    • русском и английском — 3035;
    • английском и немецком — 5012;
    • русском и немецком — 724.
  2. По нажатию на картину во время игры пользователь увидит её увеличенную версию.
  3. По нажатию на ссылку «W» во время игры пользователь переходит на страницу с картиной на Викискладе.
  4. По нажатию на ссылку "About" во время выбора языков пользователь может увидит описание игры.
  5. По нажатию на ссылку "Look answers" по завершении игры пользователь увидит весь список вопросов. На странице отображаются все уровни. Для каждого уровня есть картина, её название на первом языке, варианты ответов, где зелёным цветом выделен правильный ответ, а красным — неправильный ответ.

Архитектура приложения

[править]
Схема базы данных приложения Artolela-web

Приложение состоит из 5 основных форм и базы данных, включающей три таблицы.

База данных

[править]

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

  • Таблица en_de содержит данные о картинах, у которых на сайте Викиданные есть label (описание) одновременно на английском и немецком языках. Таблица включает пять атрибутов:
    • идентификатор картины (EDid),
    • название картины на английском (EDlabel_en),
    • название картины на немецком (EDlabel_de),
    • название файла на Викискладе (EDp_name),
    • ссылка на картину на Викискладе (EDurl).
  • Таблица en_ru содержит данные о картинах, у которых на сайте Викиданные есть label (описание) одновременно на английском и русском языках. Таблица включает пять атрибутов:
    • идентификатор картины (ERid),
    • название картины на английском (ERlabel_en),
    • название картины на русском (ERlabel_ru),
    • название картины на Викискладе (ERp_name),
    • ссылка на картину на Викискладе (ERurl).
  • Таблица ru_de содержит данные о картинах, у которых на сайте Викиданные есть label (описание) одновременно на русском и немецком языках. Таблица включает пять атрибутов:
    • идентификатор картины (RDid),
    • название картины на русском (RDlabel_ru),
    • название картины на немецком (RDlabel_de),
    • название картины на Викискладе (RDp_name),
    • ссылка на картину на Викискладе (RDurl).
Картина "Звездная ночь"
Автор: Винсент Ван Гог
Год: 1889

Пример таблицы en_de для картины «Звёздная ночь»:

EDid 56
EDlabel_en The Starry Night
EDlabel_de Sternennacht
EDp_name Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg
EDurl http://commons.wikimedia.org/wiki/Special:FilePath/Van%20Gogh%20-%20Starry%20Night%20-%20Google%20Art%20Project.jpg

Пример таблицы en_ru для картины «Звёздная ночь»:

ERid 122
ERlabel_en The Starry Night
ERlabel_ru Звездная ночь
ERp_name Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg
ERurl http://commons.wikimedia.org/wiki/Special:FilePath/Van%20Gogh%20-%20Starry%20Night%20-%20Google%20Art%20Project.jpg

Пример таблицы ru_de для картины «Звёздная ночь»:

RDid 72
RDlabel_ru Звездная ночь
RDlabel_de Sternennacht
RDp_name Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg
RDurl http://commons.wikimedia.org/wiki/Special:FilePath/Van%20Gogh%20-%20Starry%20Night%20-%20Google%20Art%20Project.jpg

Примечание 1: Таблицы избыточны, так как url = concat('http://commons.wikimedia.org/wiki/Special:FilePath/', StringEscape(p_name)). Эта избыточность позволяет ускорять работу приложения, потому что мы получаем из базы данных всю информацию о картине, и у нас нет необходимости затрачивать время еще и на обработку полученных данных. Примечание 2: перед внесением в базу данных URL необходимо экранировать знаки "%".

Было найдено два подхода к созданию структуры данной БД:

  1. создать одну таблицу, которая бы хранила все картины, у которых есть label хотя бы на двух из трех языков. Если label на одном из языков для определенной картины отсутствовал, то соответствующее поле в таблице оставалось бы незаполненным;
  2. создать три таблицы для каждой пары языков.

Первый подход позволяет избавиться от избыточности в базе данных, и существенно сократить ее объем. Однако, при этом запросы к БД требуют больше времени, так как приходится добавлять условие на поиск только тех записей, которые содержат label на первом и втором языках.

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

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

Формы

[править]
Начальная форма приложения
Игровая форма приложения
Форма с результатами игры
Форма с ответами игры

Приложение состоит из пяти форм:

  1. Начальная форма приложения. В этой форме устанавливаются настройки приложения (языки и количество уровней). Элементы формы:
    • два блока, каждый из которых состоит из трех переключателей для выбора языков;
    • один ползунок для выбора количества уровней;
    • одна кнопка для начала игры;
    • один блок, содержащий ссылку на описание игры.
    Примечание 1: При выборе языков нужно проверять, что пользователь выбрал разные языки в качестве первого и второго языков. Если пользователь выбрал одинаковые языки, то пользователь увидит соответствующее сообщение и приложение автоматически выберет другой второй язык.
    Примечание 2: Пользователь может выбрать от 1 до 50 уровней. Шаг шкалы составляет 1 картину.
  2. Форма с описание приложения. На данной форме находится подробное описание данной игры. Элементы формы:
    • текстовый блок для отображения описания игры;
    • одна кнопка для перехода к начальной форме игры.
  3. Игровая форма приложения — это главный экран в игре. Элементы формы:
    • один текстовый блок для отображения номера уровня;
    • один блок для отображения картины;
    • один блок, содержащий ссылку на картину на Викискладе в виде буквы "W";
    • один блок, состоящий из четырех переключателей для отображения вариантов ответов;
    • одна кнопка для перехода к следующей картине;
    • одна кнопка, чтобы начать игру заново.
    Примечание: Если изображение не удаётся загрузить с сервера, то, чтобы блок с картиной не оставался пустым, на его месте отобразится изображение-заглушка, используемое вместо изображения картины, если файл с картиной недоступен (например, файл не загрузился с сервера или отсутствует в приложение).
  4. Форма с результатами игры. Элементы формы:
    • один текстовый блок для отображения отношения успешно пройденных уровней к общему количеству уровней;
    • одна кнопка для перехода на начальный экран;
    • один блок, содержащий ссылку для просмотра правильных и неправильных ответов пользователя.
  5. Форма с ответами игры. На данной форме отображаются ответы пользователя. Элементы формы:
    • текстовый блок для отображения номера уровня;
    • один блок для отображения изображения;
    • текстовый блок для отображения названия картины на первом языке;
    • один блок, содержащий список вариантов ответа;
    • одна кнопка для возврата к результатам игры.
    Все элементы, кроме кнопки, повторяются столько раз, сколько было выбрано уровней.

Случайный выбор

[править]

Для получения данных о картине и об ответах необходимо было сгенерировать соответствующие идентификаторы. Для этих целей использовалась функция языка PHP rand(int $min, int $max) [1] ($min - наименьшее значение, которое может быть возвращено и $max - наибольшее значение, которое может быть возвращено), которая возвращает псевдослучайное число в диапазоне от $min до $max. В качестве параметра $min принимается 1, так как нумерация кортежей в базе данных начинается с 1; в качестве параметра $max принимается число картин для выбранной пары языков в базе данных.

Подготовка изображений

[править]

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

SPARQL

[править]

Картины, используемые в приложении, получены из Викиданных. Рассмотрим пример заполнения таблицы en_ru. Картина сохраняется в БД приложения только при условии наличия у неё заполненного поля label на английском и русском языках и при наличии ссылки на картину на Викискладе (image (P18)). Для получения всех картин, удовлетворяющих этим условиям, использовался SPARQL-скрипт, по которому были получены 3035 записей. 

#List of pictures in Russian and English  having property "image" 
SELECT ?picture ?label_ru ?label_en ?image
WHERE
{
  #Instance of painting
  ?picture wdt:P31 wd:Q3305213.

  #Pictures with label in Russian
  ?picture rdfs:label ?label_ru filter (lang(?label_ru) = "ru").

  #Pictures with label in English
  ?picture rdfs:label ?label_en filter (lang(?label_en) = "en").

  #Pictures with link to Wikimedia
  ?picture wdt:P18 ?image.
}

Получение ссылок

[править]

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

Загрузка изображений

[править]

Для загрузки большого количества файлов использовалась программа Download Master. Была выбрана эта программа, поскольку у неё есть функция загрузки файлов по импортируемому списку URL-адресов. Ещё одним преимуществом программы Download Master является возможность экспортировать список загрузок, содержащий ссылки на изображения, хранящиеся на Викискладе, и названия загруженных файлов, в XML-файл.

Примечание 1: C помощью программы Download Master получилось извлечь ссылки на картины из JSON-файла без его предварительной обработки.

Примечание 2: Поскольку количество ссылок на картины оказалось очень много, возникли проблемы с их загрузкой программой Download Master. Главная проблема - скорость прочтения файла программой. Во время прочтения файла программой компьютер может зависать. Если мощность компьютера не хватает, необходимо разделить JSON-файл на несколько файлов. Это можно сделать вручную или с помощью нескольких SPARQL-скриптов и ключевых слов LIMIT и OFFSET. Ключевое слово LIMIT задает максимальное значение решений, которые будут в результате (т.е. максимальное количество строк). Ключевое слово OFFSET позволяет не показывать в результате первые n решений.

Сжатие изображений

[править]

После загрузки изображений, суммарный размер изображений, которые имеют label (описание) одновременно:

  • на английском и русском языках составил 14,9 Гб (средний размер одной картины – 5 Мб);
  • на английском и немецком языках составил 20,0 Гб (средний размер одной картины - 4 Мб);
  • на русском и немецком языках составил 7,23 Гб (средний размер одной картины - 10 Мб).

Картины такого большого объёма могут медленно загружаться из интернета, из-за чего у пользователя может возникнуть ощущение, что приложение «зависает». Поэтому было принято решение сжать картины до приемлемого размера. Для сжатия изображений использовалась программа FILEminimizer Suite[2], так как она позволяет сжимать изображения в пакетном режиме и обеспечивает хороший процент сжатия[3] (средний процент сжатия более 90%). После сжатия суммарный размер изображений, которые имеют label (описание) одновременно:

  • на английском и русском языках составил 737 Мб (средний размер одной картины – 248 Кб);
  • на английском и немецком языках составил 1,02 Гб (средний размер одной картины - 213 Кб);
  • на русском и немецком языках составил 177 Мб (средний размер одной картины - 250 Кб).

Размещение на сервере

[править]

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

Установка

[править]

Конфигурация

[править]
  • Версия PHP: PHP version 5.4 и выше
  • Версия Apache: Apache 2.4 и выше
  • Модель базы данных: MySQL 4.0 и выше

Скачивание приложения

[править]

Скачиваем приложение Artolela-web с сайта GitHub архивом. Распаковываем проект Artolela-web, например в директорию: 

D:\artolela-web-master

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

  • json,
  • python,
  • sql.

Установка базы данных

[править]
Открытие страницы "Базы данных"
Открытие страницы "PHPMYADMIN"
Переход к вкладке "Импорт"

Создание базы данных

[править]

Открываем страницу "Базы данных" на вашем сервере. Создаем собственную базу данных, например 

pictures

Пример установки базы данных под Unix

[править]
mysqladmin -p -uroot create ИМЯ_БД
mysql -p -uroot mysql

mysql> CREATE USER 'ИМЯ_ПОЛЬЗОВАТЕЛЯ'@'localhost' IDENTIFIED BY 'your_password';
mysql> GRANT select ON ИМЯ_БД.* TO ИМЯ_ПОЛЬЗОВАТЕЛЯ@'localhost';
mysql> FLUSH PRIVILEGES;

mysql> use ИМЯ_БД 
mysql> charset binary
mysql> source .sql/pictures.sql

PhpMyAdmin

[править]

Открываем панель управления вашего сервера. Открываем панель управления PHPMYADMIN. Войдем в панель PHPMYADMIN. Для этого вводим логин и пароль, которые используем для входа на ваш сервер.

Загрузка данных

[править]

Выбираем вашу базы данных на левой панели PHPMYADMIN. Открываем вкладку "Импорт" в верхней панели PHPMYADMIN. Выбираем файл "sql/pictures.sql" в директории на вашем компьютере, куда вы распаковали архив проекта и нажимаем клавишу "Далее". PHPMYADMIN импортирует все строки из файла в выбранную базу данных.

Файл config.php

[править]

Открываем директорию, куда вы распаковали проект. Выберите файл config.php. Измените этот файл, записав в него логин, пароль вашего сервера и название базы данных.

Результат

[править]

Исходный код приложения размещен на GitHub в репозитории Artolela-web.

Примечания

[править]
  1. ↑ Функции языка PHP: RAND
  2. ↑ FILEminimizer Suite
  3. ↑ Extremum, 2013

Литература

[править]

Extremum Обзор инструментов для сжатия изображений (Русский). — Хабрахабр, 2013.

Ссылки

[править]
Источник — https://ru.wikiversity.org/w/index.php?title=Программирование_Викиданных/Artolela-web&oldid=145551