Indianapolis Museum of Art

Версия системы:

Друпал 6

Источник:

Студия Palantir.net рада объявить о прошедшем недавно запуске нового сайта на Друпале — Indianapolis Museum of Art. Один из ведущих национальных музеев искусств, IMA использует самые современные технологии для привлечения и просвещения своих посетителей.

В сотрудничестве с Studio Blue и сотрудниками IMA, был разработан очень функциональный и визуально привлекательный сайт, который сочетает в себе многие технологии «Паутины 2.0», такие как теги, блоги, подкасты, интеграцию с YouTube, эффекты реализованные с использованием AJAX. Использование Друпала 5 в значительной мере способствовало успеху этого амбициозного проекта.

В процессе разработки основного сайта IMA, Palantir одновременно разработала и сайт выставки Roman Art from the Louvre, который относится к IMA и также сделан на Друпале. Этот сайт, который также был разработан с участием Studio Blue, дополняет основной сайт IMA, обеспечивая пользователей информацией об этой выставке, включая галерею изображений, видеороликов, карт Google. Все эти технологии связанные вместе позволяют пользователям ознакомиться с представленной на сайте экспозицией.

«Паутина 2.0»-музей

В конце 2006 года, мы обратились к нашим давним партнёрам в Studio Blue, чтобы совместно разработать новый сайт IMA. IMA хотел улучшить своё присутствие в Интернете путём использования новых технологий, что позволило бы музею лучше общаться со своей аудиторией. В процессе проектирования, который длился до весны 2007 года, мы работали с Studio Blue и IMA для определения потребностей аудитории, определения существующих ресурсов и разработки проекта, который бы сочетал в себе новую архитектуру, содержание и технологии. В процессе этого, мы решили делать сайт на Друпале. После успешного использования Друпала при разработке сайта Washington University Arts & Sciens, мы знали возможности и гибкость этой системы, которые полностью удовлетворяли нашим нуждам. Мы также выбрали Друпал, потому что это свободно распространяемый продукт и на нём уже работал и сайт другого музея — Sience Museum of Minnesota’s — Science Buzz.

В начале 2007 года мы тесно работали с Studio Blue, так как они разрабатывали архитектуру сайта доступную пользователям и наполняли сайт информацией. Заключительные файлы дизайна были переведены из формата PSD в HTML Жоржем де Метом. После упорядочивания содержания сайта, Colleen Carroll переделал этот HTML-образец в тему Друпала и с другими участниками команды Palantir поддерживал эту тему в процессе разработки сайта. Ларри Гарфилд руководил техническими вопросами проекта, отвечал за архитектуру сайта, разработку модулей, дополнительное программирование и координировал работу всех участников. Сайт рассказывающей о выставке о Риме, был запущен в июле 2007 года, а затем, в начале октября был запущен основной сайт IMA.

В мире блоков

Сайт IMA строится вокруг 4 регионов: «Экспонат», «Связь», «Календарь», «Галерея». Каждый регион имеет как краткую, так и полную версию, в зависимости от того, где находится посетитель сайта. На первой странице все регионы представлены в краткой версии. На всех других страницах, регионы «Экспонат», «Связь» или «Календарь» представлены в полной версии и составляют всё содержание страницы, в то время как другие регионы исчезают. Каждый закрытый регион тем не менее, может принимать различный вид в зависимости от контекста представленной информации на открытой странице. Они могут использовать свою краткую версию представленную на первой странице или показывать какое-либо изображение относящееся к просматриваемой пользователем странице.

Решение, которое мы приняли, состояло в том, чтобы сделать каждый закрытый регион дополнительным блоком, в то время, когда открытый регион представляет собой открытую страницу. Мы определили серии подборок изображений путём использования терминов, добавили тип документов «изображение», использовали для него модуль CCK и ImageField. Изображение при этом могло быть включено в одну или несколько подборок. Для любого документа, администратор может выбрать подборку изображений для любого из регионов («Связь», «Календарь» и «Галерея») или определённое изображение. Если подборка выбрана, в дополнительном блоке выводятся изображения в чередующемся виде (для этого используется свой код).

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

Доступ к экспонатам

Сайт IMA предоставляет доступ к более чем 64 000 предметам искусства из коллекции музея. Вместо того, чтобы импортировать 64 000 документов в базу сайта, сайт предоставляет доступ через API к этой коллекции, которая находится в системе Mercury. Мы сделали в Друпале обёртку к этой системе, которая позволяет выполнять поиск по коллекции, а затем использует механизм подгрузки результата для создания заглушки документа Друпала при просмотре найденного материала. Несмотря на то, что данные для каждой работы предоставляются системой Mercury и не используется кеширование в Друпале, создание документа для каждой работы позволило нам легко добавить связанные с документами возможности, такие как комментирование, ссылки, дополнительные блоки и так далее.

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

Теги, добавляемые посетителями

IMA – ведущий партнёр проекта Steve.museum. Steve — это свободно распространяемая система фолксономии (тегов добавляемых пользователями), разработанная специально для музеев. Идея состоит в том, чтобы дать возможность посетителям сайта отмечать представленные работы тегами, которые они считают уместными для данной работы. Это даёт пользователю ощущение управления сайтом, а работникам музея позволяет видеть, как общественность классифицирует представленные работы, в отличие от того, как их классифицировали хранители музея.

Также как и с системой Mercury, Palantir разработала обёртку и для системы Steve, для представления её данных в документах сайта. Зарегистрированные пользователи имеют возможность добавлять новые теги и выбирать популярные теги добавленные другими пользователями для любой работы, используя либо встроенную, либо всплывающую форму добавления тегов. Новые теги немедленно отображаются для тех работ к которым они добавлены и в общем облаке тегов. Steve также используется на сайте выставки Roman Art from the Louvre.

Использование jQuery

Несмотря на большое количество визуальных эффектов, на сайте почти не используется Flash. Единственным местом где используется Flash, является обертка для видеофайлов с YouTube и других подобных ресурсов. Все остальные визуальные эффекты создаются с использованием jQuery. Мы обновили сайт для использования на нём jQuery 1.4.4, что позволило нам использовать много удобных дополнений. Самым полезным был плагин Dimensions, который теперь объединён с jQuery 1.2 и jqModal.

В различных разделах сайт есть большое количество всплывающих окон. Большинство из них являются пассивными, как например ссылки в нижней колонке и используют jqModal. Интерактивные всплывающие окна, такие как окно добавления тегов и форма комментирования работ, используют <iframe>. Для использования <iframe> сделаны специальные простые формы, так как нет необходимости перехватывать отправку форм. Это также позволяет легко изменять размер форм, так как <iframe>, в случае необходимости, предоставляет интерфейс прокручивания окна.

jQuery делает реализацию визуальных эффектов очень простой. Статичный «chunklet» миниатюры видеоролика представлен на каждой страницы и, к примеру, очень просто реализовать наложение анимированного GIF-файла на миниатюру и скрытое использование jQuery при наведении на объект мышки. То же самый анимированный GIF используется для всех видеоминиатюр, но прикреплён к различным углам изображения. Это создаёт впечатление различных статических эффектов для каждой миниатюры и позволяет сделать загрузку страниц быстрее.

Передовой подход к разработке

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

Кроме очевидных преимуществ связанных с доступностью возможностей и лучшей поддержкой поисковых систем, такой подход делает проще всю разработку в целом. В процессе разработки и даже после её окончания, мы можем с лёгкостью менять любые эффекты не боясь нарушить работоспособность и доступность возможностей сайта. Весь сайт был создан с максимальным соответствием требованиям Web Accessibility Initiative (WAI).

Работа с событиями

Информация о событиях управляется с помощью CCK-поля Date. Так как события могут происходить нерегулярно, мы добавили текстовые поля «custom date» и «custom time». Если они используются, то на уровне темы используется эта строка для вывода информации об актуальной дате. Таким образом, администраторы сайта могут указывать даты события и делать к ним примечания, например «в ноябре каждый вторник и четверг, за исключением дня благодарения».

Другим вопросом стал обмен информацией о событиях между основным сайтом IMA и выставочным сайтом Roman Art from the Louve. Использование RSS не давало необходимой гибкости для этого, поэтому мы воспользовались таким моментом, что оба сайта расположены на одном сервере. Мы настроили необходимый вид на основном сайте, а затем написали небольшой код, который использовался на сайте Roman Art from the Louve. Страница на выставочном сайте переключалась на базу данных основного сайта, загружала вид или документ с информацией о событии, а затем переключалась обратно на свою базу данных. В результате мы получили сквозной доступ к событиям на основном сайте, вывод которых контролировался выставочным сайтом, тем самым избежав дублирования информации или ненужных RPC-вызовов.

Возникшие трудности

Мы были вынуждены изменить ядро Друпала в 3-х разных местах.

Мы применили патч JavaScript compressor backport из Друпала 6. Учитывая количество кода JavaScript, которое используется на сайте, этот простой патч позволил резко сократить время загрузки страниц сайта
Мы нуждались в изменении некоторых слов в справочном тексте модуля Search. Так как этого не было в исходной форме, то мы не могли использовать form_alter(), а включать систему локализации для изменения нескольких строк было неразумно, так как это несоизмеримо с потребностью увеличивало нагрузку на сервер. В итоге, мы просто немного изменили код модуля и вписали в него нужный нам текст напрямую. Отметьте: Друпал 6 позволяет изменять текст определённых строк через файл settings.php, без необходимости включения всей системы локализации
Мы нуждались в дополнительном контроле за тем как и где выводятся комментарии. К сожалению, параметры Друпала 5 оказались недостаточно гибкими для этого. В итоге, мы переопределили функцию node_view() в модуле Node, чтобы получить возможность показывать комментарии прямо в документе и выводить их с использованием AJAX во всплывающих окнах

Невозникшие трудности

Использование таксономии для создания подборок изображений очень удобно и мы используем этот приём на многих других наших сайтах. В данном случае мы использовали дополнительный код для случайного вывода изображений в блоке. Менее сложная и более лёгкая настройка случайного вывода изображений может быть сделана с помощью модуля Views
Для создания эффекта «вид как документ», мы использовали Viewfield. Слабым местом здесь является невозможность использования динамических аргументов из URL, но они могут быть добавлены непосредственно в документ. Другие возможности видов, такие как формы фильтров, работают без проблем
Создание календарей это всегда проблема, используете вы Друпал или нет. Мы нашли, что самый эффективный способ создания календаря для нашего сайта, заключался в использовании хука hook_views_query_alter(), с помощью которого мы смогли точно управлять условием запроса WHERE. Мы удалили с помощью него часть запроса, которую генерировала стандартная форма и заменили его нужным нам условием

Статья написана Жоржем де Метом и Ларри Гарфилдом.