Popular Science Magazine

Посмотрите видео с Boston DrupalCon о создании этого сайта. В дополнение к видеозаписи с Boston DrupalCon 2008 сделанное Кевином Брижджесом (cyberswat), Лаура Скот и другие сотрудники pingVision, включая Меган Миллер и Джона Махоуни из PopSci.com, написали эту статью о разработке этого сайта. Если вы хотите нас о чём-нибудь спросить, то мы будем рады ответить на ваши вопросы.

В феврале 2008 года, сайт ежемесячного журнал Popular Science был перезапущен на Друпале. Разработкой сайта занималась студия pingVision.

Журнал был основан в 1872 году под названием «What's New, What's Next». С тех пор издание засвидетельствовало, сообщило и оценило бесчисленное количество научных и технических разработок, от электричества до последних новинок сегодняшнего информационного века — образа жизни, работы, игр, путешествий, связи, понимания и взаимодействия с окружающим нас миром. В самом деле, архивы Popular Science отражают прогресс человечества за последние 135+ лет.

До этого года, сайт журнала работал на коммерческой системе управления содержанием. В связи с этим перезапуском, команда Popular Science захотела перейти в мир открытого программного обеспечения. Они выбрали Drupal и заказали разработку сайта в pingVision.

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

Цели и проблемы

До перезапуска, Popular Science использовал несколько разных систем управления содержанием. Одной из цельй нового сайта было объединение этих систем в одну, чтобы получить однообразный интерфейс, которым было бы удобнее и эффективнее пользоваться. Системе Drupal присуща гибкость и расширяемость, которая позволила реализовать все выдвинутые требования. Одной из самых сложных задач была конвертация и импорт данных из CMS Vignette 7 и нескольких блогов на TypePad.

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

При разработке PopSci.com, мы воспользовались многими дополнительными модулями и разработали несколько специальных модулей, включая Drupal Markup Engine для размещения содержания в документах и Node Carousel для вывода содержания.

Кроме того, одной из наших забот была расширяемость сайта, так как у PopSci уже было большое и активное количество пользователей. Создав для сайта мультисерверный кластер с распределением нагрузки и используя Memcache, сайт PopSci.com после перезапуска в состоянии выдерживать нагрузку связанную с запросом 60 страниц в секунду и 1,1 миллионов просмотров страниц за 24 часа — новый рекорд Popular Science.

Типы документов

Для редакторов PopSci.com было важным управлять не только размещением медиаданных в полных версиях документов, но и управлять этими данными в кратком содержании. Они хотели получить возможность разбивать длинные статьи на несколько меньших, размещать в статье любое количество изображений или даже связанных с документов блоков в содержание документа. Размещение медиаданных также должно было поддерживать работу с содержанием импортированным из Vignette и Typepad. Большинство из этих вопросов было решено путём создания модуля Drupal Markup Engine. Этот модуль работает в связи с типами документов, которые были созданы с помощью модуля CCK.

Статьи

Статьи являются основным типом документов на сайте. Все записи в блогах из TypePad и статьи из Vignette были перенесены с статьи Drupal.

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

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

DME также используется для размещения связанного содержания (содержит ссылки на документы из поля CCK Node referance или документов с такими же терминами) в документ и установки пейджера для статьи.

Структура

• Article Images — для добавления ссылок на изображения используется поле Node Reference
• Associated Photo Gallery — поле Node Reference в Photo Gallery
• Body — содержание статьи
• Category Badge — значок термина
• Credit — авторы статьи
• DEK — краткое содержание
• Primary Category — рубрика из основного меню сайта
• Related Articles — поле Node Reference указывающее на другие документы этого типа
• Tags — автозаполняемое поле
• Title — заголовок документа
• V7id — идентификатор оригинальной статьи из CMS Vignette 7 (используется для перенаправления на текущий адрес статьи, при запросе пользователем старого адреса)
• Video Link — поле Node Reference для ссылки на видео

Текущий номер

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

Структура

• Cover — изображение обложки
• Issue Date — дата номера
• Title — заголовок документа

Featured Tout

Тип документов «Featured tout» создан для использования в Node Carousel, который управляется Node Queue. «Featured tout» требование редакторов Popular Science для создания графики, которая имеет определённые размеры. Она показывается на первой странице сайта.

Структура

• Associated Article — поле Node Reference ссылающееся на статью
• DEK — краткое содержание документа
• Index Display Link — слово, которое используется в качестве ссылки на статью
• Title — заголовок документа

Изображения

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

Структура

• Credit — автор изображения
• DEK — краткое описание
• Photo Gallery Link — поле Node Reference для ссылки на фотоальбом. Если изображение связано с альбомом, то оно показывается в этом альбоме
• Photo Gallery Weights — это поле содержит два элемента: фотоальбом и вес изображения в этом альбоме
• Primary Category — рубрика из основного меню сайта
• Title — заголовок документа
• V7id — идентификатор оригинального изображения из CMS Vignette 7 (используется для перенаправления на текущий адрес изображения, при запросе пользователем старого адреса)
• Video Link — поле Node Reference для ссылки на видео

Фотоальбом

Фотоальбомы служат для сбора изображений и документов. Изображения помещаются в альбом при их редактировании и выбора заголовка альбома в поле Node Reference. Альбомы показываются в Node Carousels, чтобы придать им скольжение и ощущение интерактивности.

Структура

• Category Badge — значок термина
• Credit — автор изображения
• DEK — краткое описание
• Icon — поле Node Reference ссылающееся на значок, который используется для изображения при выводе краткого описания
• Primary Category — рубрика из основного меню сайта
• Tags — автозаполняемое поле
• Title — заголовок документа
• V7id — идентификатор оригинального фотоальбома из CMS Vignette 7 (используется для перенаправления на текущий адрес фотоальбома, при запросе пользователем старого адреса)

Видео

Эти документы позволяют добавлять на сайт видео через сервисы YouTube или OnStream. Мы разработали специальный модуль, который создаёт поле CCK Media Profile, которое может быть прикреплено к любому документу, позволяя редакторам и администраторам ограничивать использующиеся сервисы на основе типов документов.

Специальный модуль отличается от существующего модуля Embedded Media Field, предоставляя большую гибкость — он позволяет пользователям загружать видео на поддерживаемые сервисы прямо из Drupal.

Структура

• Category Badge — значок термина
• Credit — автор документа
• DEK — краткое описание видео
• Primary Category — рубрика из основного меню сайта
• Tags — автозаполняемое поле
• Title — заголовок видео
• Video Link — ссылка на добавляемое видео, загрузка которого управляется медиамодулем

Импорт данных

Одной из причин, которая потребовала переноса существующего содержания в Drupal, было желание избавиться от ограничений и платы связанной с CMS Vignette. База данных (Oracle) Vignette имела размер 1,66 ГБ и это не включая более 15000 изображений, на которые ссылались эти данные.

Первым шагом был перенос данных в формат MySQL, который был сделан с использованием MySQL Migration Toolkit. Мы написали специальный модуль, который работал при запусках cron и частями забирал информацию из базы данных Oracle и обрабатывал её через Drupal API. Изображения импортировались путём считывания информации об их размещении из старой базы данных и последующим их скачиванием (через shell-скрипт выполнялись серии команд wget).

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

После окончания приготовлений, весь процесс импорта данных занял по времени два полных дня. Частью процесса импорта был вопрос работы с адресами страниц, которые были сгенерированы Vignette. Нужно было, чтобы статья запрошенная по старому адресу была найдена в Drupal. Для решения этой задачи, в процессе импорта мы связали Vignette ID с каждой единицей импортируемой информации и поместили эти данные в поле CCK, которое указывало на новый адрес страницы в Drupal.

Чтобы начался поиск статьи в Drupal, был написан хук, который работает с модулем CustomError для просмотра старых адресов Vignette ID и при возникновении 404 ошибки перехаватывает обработку адреса и выполняет перенаправление. Мы получили возможность не только обработки старых адресов и управления перенаправлениями, но и сказали Google где нужно искать новые документы и в очень короткое время Google заменил ссылки в результатах своей выдачи.

Поиск

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

Мы получили этот результат путём разработки расширенной версии стандартной поисковой системы, показывая результаты в блоках с разбивкой их на страницы и вкладками использующими AJAX для переключения сортировки.

AJAX-вкладки

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

Быстродействие

Как и следовало ожидать, рассмотрение вариантов оборудования на котором работает сайт потребовало серьёзного подхода. Решить вопрос производительности нам помог модуль Memcache, который интегрирует с Друпалом Memcached и библиотеку PECL Memcache. Этот модуль хорошо нам подошёл и со своими стандартными возможностями, за одним исключением работы с альтернативными путями, из-за чего для загрузки страницы требовалось выполнять до 700 запросов, из которых значительная часть занималась выяснением альтернативных путей. Перенос этих запросов в Memcache дал нам нужную скорость обработки и сайт стал справляться с обработкой 60-70 страниц в секунду.

Дополнительные модули

The true power of Drupal lies in the people that participate. These modules were contributed by the community and helped make the work we did possible:

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

• abuse — система сигнализации о злоупотреблениях на сайте
• Account reminder — напоминания о создании аккаунта
• AdSense — контекстная реклама Google AdSense
• API — документация по Друпалу для разработчиков
• Avatar Approval — отправка изображений пользователей на проверку
• CAPTCHA — тест на спам
• CCK — создание и управление дополнительными полями
• CCK Taxonomy Fields — добавление документам словарей в виде дополнительных полей
• Coder — составление обзоров кода
• CustomError — настройка страниц 403 (доступ запрещён) и 404 (страница не найдена)
• Database Administration — интерфейс для работы с базой данных
• Date — тип поля — дата
• Devel — набор инструментов для разработчика
• Filter by node type — форматы ввода в типах документов
• Fivestar — оценка документов и комментариев
• HTML corrector — закрытие ХТМЛ-тегов
• ImageCache — создание и управление правилами обработки изображений
• ImageField — тип поля — изображение
• Import Typepad / MoveableType — импорт в Друпал данных с движка Moveable Type
• Javascript Tools — набор яваскрипт-утилит
• jQuery Update — обновление jQuery
• Link — тип поля — ссылка
• LoginToboggan — настройка входа в аккаунт
• Memcache API and Integration — улучшение быстродействия на основе memcache
• Meta tags — управление мета-тегами страниц
• Mime Mail — сервис модуль для работы с почтой
• Nodecarousel — показ серий документов в сменной (слайдами) или выставочной манере
• Nodequeue — сбор документов в упорядоченные группы
• Omniture Integration — интеграция с Omniture Site Catalyst
• Pathauto — автоматическая генерация альтернативных путей
• Scheduler — публикация документов по расписанию
• Send — отправка ссылки на просматриваемую страницу по почте
• Service links — кнопки ссылок для сохранения закладок в социальных сетях
• Similar By Terms — список похожих документов
• SimpleMenu — быстрый доступ к любому пункту меню
• Site map — создание карты сайта
• Taxonomy Image — назначение изображения термин
• Testing — система тестирования кода
• Token — использование токенов
• Update Status — статус обновления проектов
• URL list — создание файла /urllist.txt и его отправка поисковым системам
• Views — создание и управление списками содержания
• Views Bookmark — персональные каталоги закладок
• Voting API — АПИ голосований
• XML Sitemap — создание карты сайта в соответствии с протоколом Sitemap
• Yahoo Terms — автоматическое присвоение терминов документу