Following up on the Popular Science Case Study presented at DrupalCon Boston 2008 by Kevin Bridges (cyberswat), Laura Scott and others at pingVision,along with Megan Miller and John Mahoney of PopSci.com, here is awritten case study on the development approaches for PopSci.com. Wewelcome your questions and feedback.

In February 2008, Popular Science,the fifth-oldest continually-published monthly magazine, relaunched itsonline presence with an enterprise-level website developed by pingVision, powered by Drupal.
Founded in 1872, Popular Science, the "What's New, What'sNext magazine," has witnessed, reported on, and evaluated countlessscientific and technological developments, from the dawn of electricityto the latest innovations of today's information age -- advances thathave shaped the way we live, work, play, travel, communicate,understand and interact with the world. Indeed, the archives of PopularScience reflect humankind's progress over the past 135+ years.
Until this year, Popular Science's online presence was dominated by proprietary web content management solutions. With this relaunch, the Popular Scienceteam wanted to take the online presence of the magazine into the opensource world. They decided on Drupal for the website's platform andretained pingVision for the development.
This is a brief run-down of how pingVision developed the site to meet the Popular Science staff's exacting requirements.
Website Goals and ChallengesPrior to its relaunch, the Popular Science website usedvarious different systems to deliver content. One of the goals for thenew site was to bring these disparate sites together into a unifieduser interface while increasing usability and functionality. Drupal'sinherent flexibility and extensibility afforded the delivery of Popular Science'susability and functional requirements. One of the big challenges,however, was converting and importing several years' worth of contentfrom a Vignette 7 CMS and several TypePad blogs.

Another challenge was the integration of several third-partyservices, including a fantasy stock trading system, video conversionand hosting services, and advertising.
In approaching the development of the new PopSci.com, we tookadvantage of various contributed modules, and created a number ofcustom modules, including the Drupal Markup Engine for content placement within nodes and Node Carousel for displaying content.
Finally, scalability was a primary concern, as PopSci already had alarge and active user base. By specifying a load-balanced multi-servercluster to serve up the site, combined with the use of Memcache,PopSci.com post-relaunch was able to weather an average load of 60pages per second with a spike of over 1.1 million page views in 24hours -- a new record for Popular Science.
Content TypesIt was important to the PopSci.com editors that they have completecontrol over the placement of media and supporting content not only infull node view but also in teaser view. They wanted the ability topaginate long articles and place any number of images or even relatedblocks into the content of a node. The media placement also needed tobe intelligent enough to work with legacy content imported fromVignette and Typepad. Most of this was accomplished with the creationof a new module called the Drupal Markup Engine, or DME. The DME works in conjunction with the content-types that were created for this project with the Content Construction Kit (CCK) by providing a custom, extensible input filter.
ArticlesArticles are the main content-type on the site. All blog posts fromTypePad and articles from Vignette were consolidated as articles inDrupal.
The article content-type uses the DME extensively. Referenced images can be placed anywhere in an article using the DME. If a referenced image node isn't specifically placed within the content body by the DME, it is automatically displayed at the top of the article and in the article's teaser view.

Images may also be placed directly in the teaser using the DME.This approach provides maximum flexibility with images entered throughDrupal and with images from legacy content, which required no humanintervention to make the latter work.
The DME is also used to place a relatedcontent block (containing links to nodes in Node Reference fields ornodes with similar taxonomy terms) into the content and to setpagination for the article.
Article Structure

• Article Images -- Node Reference to images used in the article.
• Associated Photo Gallery -- Node Reference to an Photo Gallery.
• Body -- The article's body.
• Category Badge -- A taxonomy image that will apply a graphical badge to the article.
• Credit -- The credit is the contributor of the article.
• DEK -- A brief description of the article.
• Primary Category -- The primary taxonomy for the site represented by the main navigation areas.
• Related Articles -- Node Reference field to relate other articles.
• Tags -- An auto-fill taxonomy field.
• Title -- Core title field.
• V7id -- The Vignette 7 ID of the original article so that it can becross-referenced. This was useful for redirecting old urls to newDrupal content. [See discussion about imports below]
• Video Link -- Node Reference to related videos.

Current Issue
The "current issue" node type represents an issue of the magazine. Itis used to store images of the magazines cover associated with dates.This node type is used in various promotional content throughout thesite.
Current Issue Structure

• Cover -- An image representing the magazine cover.
• Issue Date -- Publication date of the issue.
• Title -- Core title field.

Featured ToutThe Featured tout is a node type created to be used solely in a NodeCarousel driven by a Node Queue. The featured touts simply require thePopular Science editors to create graphics that are of the appropriatedimensions. These can be seen on the front page of http://popsci.com/.

Featured Tout Structure

• Associated Article -- Node Reference to the article being touted.
• DEK -- A brief description of the article being touted.
• Index Display Link -- The word used as the link in the tout.
• Title -- Core title field.

Images
Images are used extensively on the site and needed to be invoked in anumber of ways. Images are used in different forms in articles, teaserwidgets, and photo galleries. If an image has related content, links tothat content are shown in all but teaser views. Images are not servedas stand alone images on the site but are invoked in Articles and PhotoGalleries.
Image Structure

• Credit -- The contributor of the image.
• DEK -- A brief description of the image.
• Photo Gallery Link -- Node Reference to Photo Galleries. If an image references a gallery it shows up in that Photo Gallery.
• Photo Gallery Weights -- This field contains a series of numberpairs with each pair representing the photo gallery and the image'sweight in that photo gallery.
• Primary Category -- The primary taxonomy for the site represented by the main navigation areas.
• Title -- Core title field.
• V7id -- The Vignette 7 ID of the original image so that it can becross-referenced. This was useful for redirecting old urls to newDrupal content.
• Video Link -- Node Reference to related videos.

Photo Gallery
A Photo Gallery is a node type serving to collect image nodes andcontent to be displayed to the end user as a photo gallery. The imagesare designated for a photo gallery by editing the image and enteringthe gallery title in the appropriate Node Reference field. Galleriesare presented as Node Carousels to give them a slick, interactive feel.
Photo Gallery Structure

• Category Badge -- A taxonomy image that will apply a graphical badge to the image.
• Credit -- The contributor of the image.
• DEK -- A brief description of the image.
• Icon -- A Node Reference field to the image to use when viewing the gallery in teaser view.
• Primary Category -- The primary taxonomy for the site represented by the main navigation areas.
• Tags -- An auto-fill taxonomy field.
• Title -- Core title field.
• V7id -- The Vignette 7 ID of the original image so that it can becross-referenced. This was useful for redirecting old urls to newDrupal content.

User VideoThe Video node enables posting of video to either YouTube or OnStream. We developed a custom media module, which creates a custom Media Profile CCK field that can be attached to any node, allowing editors and admins to restrict the services used on a per-content-type basis.
The custom media module differs from the existing emfield module byoffering greater flexibility -- such as allowing users to upload videosto the services straight from Drupal.

Video Structure

• Category Badge -- A taxonomy image that will apply a graphical badge to the video.
• Credit -- The contributor of the video.
• DEK -- A brief description of the video.
• Primary Category -- The primary taxonomy for the site represented by the main navigation areas.
• Tags -- An auto-fill taxonomy field.
• Title -- Core title field.
• Video Link -- A hosted video handled by an extension to the media module.

Data ImportPart of the motivation to move the existing content over to Drupalwas to escape the rigid complexity and cost associated with theVignette CMS. The Vignette dataset was a1.66GB Oracle database -- and that didn't include the more than 15,000images referenced in the Vignette data which also had to be importedinto the new site.
The first step in the migration process was to use the MySQL Migration Toolkitto transfer the data to MySQL. We wrote a custom module that used cronto feed the Oracle data through Drupal's APIs in manageable chunks. Andfinally, we imported the images by extracting their locations from theOracle data and, via shell script, executing a series of wget commandsto download the images.
As each piece of content was created in Drupal it was tagged withthe Yahoo Terms module, which despite some odd results provided a goodstart on tagging the immense amount of un-tagged Vignette data.
Once the preparations were in place, the entire import process took approximately two solid days of execution time to complete.
A portion of the import process centered around how to deal with theurls that had been generated by Vignette, so that an article called upby its old Vignette address could be found in the new Drupalarchitecture. In order to accomplish this, during the import we tookthe associated Vignette ID for each unit of information imported fromVignette into Drupal and placed it into a CCK field in its destination node in Drupal. To actually find those articles in Drupal, a hook was written that works with the Custom Errormodule to look for the old Vignette ID in the url when a 404 occurs andissues the correct redirect code. Not only were we able to handle theredirects while historic links were used, but in a very short timeGoogle had updated their search results showing the new paths.
Search
The design of the PopSci search results required the search resultsto be grouped by content type, with tabs allowing re-sorting of theresults by Most Relevant, Most Recent, Most Viewed, Top Rated, and MostCommented. On top of that, users needed to be able to subscribe to rssfeeds of the results.
We achieved this functionality by developing an extended version ofDrupal's core search, displaying the various results in blocks ofpaginated content, with AJAX tabsets to access other sortings of the results.
Each search is also cached, given a hashed id, and associated withthe user performing the search to allow the saving the searches forfuture reference.
AJAX TabsIn many instances the design comps we received required a nested setof tabs that could function to filter the content being displayed on aparticular page. This was largely handled by the Tabs component of the Javascript Toolsmodule. However, the large tabbed datasets displayed on each of themain category pages and in searches needed to be a custom codedsolution to be able to work in a responsive fashion with larger amountsof data.
PerformanceNaturally, there is a hefty selection of hardware powering thePopular Science website, but the true performance winner of thisproject was the Memcache module which integrates Drupal with Memcached and the PECL Memcache library.Out of the box, this module worked extremely well for us, with theexception of path aliases: A full page load was generating as many as700 queries to determine path aliases. Pulling these queries throughMemcache gave us the speed we needed to maintain an initial averageload of approximately 60-70 page views per second.
Community Contributed ModulesThe true power of Drupal lies in the people that participate. Thesemodules were contributed by the community and helped make the work wedid possible:

• Administration
  • Abuse -- Allows users to flag nodes and comments as offensive for the adminstrator to review.
  • Avatar Approval -- Creates a workflow for moderating user avatars.
  • Custom Error --Allows the site admin to create custom error pages for 404 (not found),and 403 (access denied), without the need to create nodes for each ofthem.
  • JQuery Update-- Facilitates an upgrade of jQuery in Drupal 5. JQuery 1.0.1 isincluded with Drupal 5, however it is not very well supported in thejQuery community.
  • Path Auto --Automatically generates path aliases for various kinds of content(nodes, categories, users) without requiring the user to manuallyspecify the path alias.
  • Update Status-- Checks with drupal.org once a day to see if there are new officiallyreleased versions of Drupal and any modules that you are running.
  • URL List-- Creates a list of node URLs at /q=urllist.txt or (/urllist.txt forclean URLs) for submitting to search engines like Yahoo! Site Explorer.
• User access/authentication
  • Account Reminder -- Resends the welcome email to users who have registered with the site but have not yet logged in.
  • Login Toboggan -- Offers several modifications of the Drupal login system in an external module.
• CCK
  • Content Construction Kit (CCK) -- Allows you create and customize fields using a web browser.
  • CCK Taxonomy Fields -- Taxonomy vocabularies will show up as field types that can be added to content types using CCK.
  • Date -- A flexible date/time field type for the CCK content module.
  • Fivestar -- Adds a clean, attractive voting widget to nodes in Drupal 5.
  • ImageField -- Provides image uploads for CCK.
  • Link -- A CCK content field which lets you add a complete link to your content types.
• Commerce/advertising
  • AdSense -- ProvidesWeb site owners with the means to earn revenue from visitors bydisplaying ads from Google's AdSense or SiteSearch on their sites.
• Developer
  • API -- Animplementation of a subset of the Doxygen documentation generatorspecification, tuned to produce output that best benefits the Drupalcode base.
  • Coder -- Assists with code review and version upgrade.
  • DBA -- Provides Drupaladministrators with direct access to their Drupal database tables fromwithin the standard Drupal user interface.
  • Devel -- A suite of modules containing useful utilities for both module and theme developers.
  • Javascript Tools -- Provides both an integrated set of Javascript and AJAX modules and a common set of methods extending those available in Drupal core (drupal.js) for Javascript and AJAX module development in Drupal.
  • Simple Test -- A framework for running automated unit tests in Drupal.
• Filters/editors
  • Filter by node type-- Allows an admin to restrict the type of input format available to auser by user role. It does not, however, allow the admin to restrictthe available input formats by node type.
  • HTML Corrector -- Corrects HTML entered into content areas.
• Media
  • ImageCache -- A dynamic image manipulation and caching tool.
  • Taxonomy Image -- Allows site administrators to associate images with taxonomy terms.
• Security
  • Captcha -- A CAPTCHA is a challenge-response test most often placed within web forms to determine whether the user is human.
• 3rd party integration
  • Import Typepad / MoveableType -- Allows the importation of typepad content from the typepad export file.
  • Memcahce -- For using Memcached and the PECL Memcache library with Drupal.
  • Omniture -- Integrates the Omniture Site Catalyst statistics monitoring software into a Drupal site.
  • Service Links -- Enables admins to add links to a number of social bookmarking sites, blog search sites etc.
  • XML Sitemap -- Creates a site map in accordance with the sitemaps.org specification.
  • Yahoo Terms -- Provides an interface to other modules to use Yahoo Term Extractor service.
• Mail
  • Mime Mail -- A Mime Mail component module.
  • Send -- Adds "tell afriend" functionality to any node type, tracks send actions in CiviCRM(if installed) and maintains a history of sent items.
• Content Display
  • Node Carousel -- An easy-to-use method for displaying nodes using the jCarousel library for jQuery.
  • Node Queue -- Allows an administrator to arbitrarily put nodes in a group for some purpose.
  • Site Map -- Provides a site map that gives visitors an overview of your site.
  • Views -- Provides a flexible method for Drupal site designers to control how lists of content (nodes) are presented.
  • Views Bookmark -- A flexible bookmark system that is completely customizable the administrator.
• Content
  • Meta Tags -- Allows you to set some meta tags for each node, view or panels page.
  • Scheduler -- Allows nodes to be published and unpublished on specified dates.
  • Similar Terms -- Attempts to provide context for content items by displaying a block with links to other similar content.
• Theme Related
  • Simple Menu -- Creates a menu bar that is displayed at the top of every page.
• Utility
  • Token -- Tokens are small bits of text that can be placed into larger documents via simple placeholders, like %site-name or [user].
• Evaluation/rating
  • Voting API -- Helps developers who want to use a standardized API and schema for storing, retrieving, and tabulating votes for Drupal content.

。。。感覺用dz發表出來有些問題。。。

呵呵