Назад в библиотеку

Миллион пикселей для библиотеки

Авторы: Беседа Д.Г., Семенистый Н.В., Аоприенко А.Я.
Источник: Материалы III всеукраинской научно-технической конференции «Информационные управляющие системы и компьютерный мониторинг (ИУС и КМ 2012)» – 17-18 ап реля 2012 г., Донецк, ДонНТУ, 2012. С. 358-362.

Аннотация

Беседа Д.Г., Семенистый Н.В., Аноприенко А.Я. Миллион пикселей для библиотеки. Рассмотрены методы реализации движков для обслуживания и администрирования сайтов. При выполнении данного проекта был реализован свой движок на языке PHP с использованием других языков для динамического оформления и создания интуитивного интерфейса сайта.

Общая постановка проблемы

На сегодняшний день интернет является наибольшим сосредоточением информации и одним из самых целесообразных мест для размещения упоминания о себе. Существует множество идей и методов его размещения. Основным критерием выбора является количество человек, которые это увидят. Как известно, у ДонНТУ строится современная библиотека, и одновременно с этим портал магистров ДонНТУ является одним из самых посещаемых ресурсов Донецка. Таким образом, появилась идея создания проекта для помощи в строительстве библиотеки под названием «Миллион пикселей для библиотеки».

Идея

За основу была взята идея британского студента Алекса Тью, который 26 января 2005 года запустил сайтhttp://milliondollarhomepage.com/. Идея сайта очень проста – на главной странице размещена сетка из 10 000 квадратов размером 10х10 (100 пикселей). Каждый такой квадрат продавался за 100$, то есть по 1$ за пиксель. Таким образом, можно сказать, что Алекс придумал оригинальный способ демонстрации рекламы в интернете. Пользователи могли разместить на данном сайте баннер своей фирмы, свой собственный портрет и прочую информацию. Приобретенная популярность предрекла его успех, так как люди готовы платить деньги за то, что точно увидит множество людей ежедневно, и менее, чем через 5 месяцев, картинка в миллион пикселей была заполнена полностью, что принесло автору более 1 000 000 $.

Последующие реализации проекта

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

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

Реализация

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

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

Данный каркас должен был предусматривать такие разделы:

Серверным языком реализации был выбран PHP, как самый популярный и поддерживаемый серверами, на которых подразумевалось тестирование проекта. Для реализации же различных динамических эффектов веб-страницы использовался язык JavaScript и популярная библиотека jQuery.

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

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

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

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

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

Перейдем к более детальному рассмотрению каждого из разделов.

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

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

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

Следующим разделом является раздел заказа пикселей. Процесс оформления заказа разбит на несколько этапов:

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

Рис. 1 - Сообщение об ошибке

Такими ошибками могут быть:

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

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

Последним этапом заказа является оплата. На сайте интегрированы такие платежные системы, как Приват24, LiqPay и WebMoney, что позволяет пользователям быстро оплатить размещение картинки, не отходя от компьютера. Суть работы с платежными системами заключается в составлении необходимого запроса и отправки его в ассоциативном массиве $_POST на сервер банка. Далее пользователь, следуя подсказкам, завершает платеж, после чего на наш сайт приходит ответ. Картинка появляется на главной странице в результате успешно выполненного платежа.

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

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

В данном разделе содержится информация о каждой из областей. Она может быть представлена двумя способами: в полном объеме или по каждой области отдельно. В первом случае администратору будет доступен полный список областей, которые были когда-либо заказаны пользователями. Кроме адреса, на который ссылается область, доступна загруженная картинка, количество пикселей, дата регистрации области, статус и в том случае, если баннер уже был добавлен на главную страницу, количество кликов по нему. Если администратор еще не принимал решения по добавлению области на сетку, ему доступны два варианта: принять или отказать. В зависимости от того, какой выбор он сделал, на странице пользователя будет отображено сообщение о состоянии его баннера. Другой вариант получения информации по области – клик по требуемому баннеру на главной странице раздела администрирования.

На данный момент сетка пикселей выглядит следующим образом:

Рис. 2 - Сетка пикселей

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

Выводы

Итак, можно сделать вывод, что реализовать подобный проект можно многими способами. Нам для выполнения данной задачи понадобились такие технологии как HTML, CSS для оформления внешнего вида сайта, PHP для взаимодействия с сервером, MySQL для хранения данных, JavaScript и AJAX для динамического оформления сайта.

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

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

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

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

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

Литература

  1. Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript [Текст] / Р. Никсон – СПб : Питер, 2012 – 497 с.
  2. Гутманс Э. PHP 5.Профессиональное программирование [Текст] / Э. Гутманс, С. Баккен, Д. Ретанс – СПб : Символ, 2006 – 703 с.
  3. Web Merchant Interface [Electronic resourse] / Интернет-ресурс. - Режим доступа : www/ URL: http://wiki.webmoney.ru/wiki/show/Web+Merchant+Interface - Загл. с экрана.
  4. Интерфейс для разработчиков, API LiqPay [Electronic resourse] / Интернет-ресурс. - Режим доступа : www/ URL: https://liqpay.com/?do=pages&p=api - Загл. с экрана.