The Tech Side of Project Argo

THE TECH SIDE OF
PROJECT ARGO
Marc Lavallee Wesley Lindamood
Project ARGO tech. architect Project ARGO web designer
@lavallee @lindamood
mlavallee@npr.org wlindamood@npr.org

10/19/2010

Wednesday, October 20, 2010

OVERVIEW


BACKGROUND
What is Project ARGO?


It’s designed to...

"...beef up coverage of critical issues at the local
level, and, second, to begin to establish an online
network that can transform itself into a news
powerhouse of unparalleled depth and quality."
-- Vivian Schiller, CEO and president of NPR


Our model

• Editorial Strategy
• Technology Platform
• Sustainability Plans


The pilot scope
A network of twelve
topical websites:

• Staffed by a single
blogger/editor
• Associated with an NPR
member station
• Adding to that station’s
web presence


Basically, we’re a startup

ﬂickr / Rev. Xanatos Satanicos Bombasticos

... within


The ARGO Platform
Mostly , with some

Standard WP 3.0 with Content aggregation app.
some customizations. Hooked into WordPress:
• admin widgets
• settings panel
• content widgets
Combination gives us ﬂexibility to use best tool for the job.


OUR STARTING POINT
Maintainability,
Structure and
Flexibility


Maintainability
OUR DEVELOPMENT TEAM

You’re looking at it...


Structure

from Alaskan Dude via Flickr


Flexibility

From Melvin Schlubman via Flickr


Develop as little
as possible


Modularity and
code reuse


Argo
Theme
framework

Child
Theme

Parent Theme

Giving the
system
structure
and shape

dcentric.wamu.org


Featured Content


Featured Content
// CUSTOM TAXONOMY
add_action( 'init', 'argo_custom_taxonomies' );
function argo_custom_taxonomies() {
if ( ! taxonomy_exists( 'prominence' ) ) {
register_taxonomy( 'prominence', 'post', array(
'hierarchical' => true,
'label' => 'Post Prominence',
'query_var' => true,
'rewrite' => true,
) );
wp_insert_term( 'Featured', 'prominence' );
wp_insert_term( 'National', 'prominence' );
}
}

// FEATURED IMAGE AND OTHER CROPS
add_action( 'after_setup_theme', 'argo_create_image_sizes' );
function argo_create_image_sizes() {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 140, 140, true ); // skybox thumbnail
add_image_size( '60x60', 60, 60, true ); // argo network thumbnail
add_image_size( '220', 220, 9999 ); // topic featured image
}


Custom Menus

http://codex.wordpress.org/Appearance_Menus_SubPanel


Mega Menu


Mega Menu
class Argo_Categories_Walker extends Walker {
var $tree_type = array( 'post_type', 'taxonomy', 'custom' );
var $db_ﬁelds = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

function start_el( &$output, $item, $depth, $args ) {
$output .= '<li' . $li_class . '><a href="' . $item->url . '">' .
$item->title . '</a>';
...
}
function end_el( &$output, $item, $depth ) {
$output .= "</li>n";
}
}
-----------------------------------------------------------------------------------
<?php wp_nav_menu( array( 'theme_location' => 'categories', 'container' => false,
'walker' => new Argo_Categories_Walker, ) );
?>


Post types like
Audio

SoundManager: schillmania.com/projects/soundmanager2

Audio
// Create shortcode text for built-in audio link
add_ﬁlter( 'audio_send_to_editor_url', 'argo_audio_editor_shortcode', 10, 3 );
function argo_audio_editor_shortcode( $html, $href, $title ) {
return sprintf( '[audio href="%s" title="%s"]Insert caption here[/audio]', $href, $title );
}

// Add handler for [audio] shortcode
add_shortcode( 'audio', 'argo_audio_shortcode' );
function argo_audio_editor_markup( $atts, $content );
extract( $atts );

$out = sprintf( '<ul class="%s"><li>', 'playlist' );
$out .= sprintf( '<a href="%s" class="%s" title="%s">%s', $href, 'inline', $title, $title );
if ( $caption ) {
$out .= sprintf( '<span class="%s">%s</span></a>', 'caption', $caption );
}
$out .= sprintf( '<a href="%s" class="%s">%s</a>', $href,
'exclude', 'Download' );
$out .= "</li></ul>";

return $out;
}

Anatomy of a
template


html5boilerplate.com

960.gs


CSS3- @font-face

@font-face {
! font-family: 'LeagueGothicRegular';
! src: url('font/league_gothic-webfont.eot');
! src: local('☺'), url('font/league_gothic-webfont.woff')
format('woff'), url('font/league_gothic-webfont.ttf') format
('truetype'), url('font/league_gothic-
webfont.svg#webfontLe3hwYFq') format('svg');
! font-weight: normal;
! font-style: normal;
}

Progressive
Enhancement
<html lang="en" class=" js canvas canvastext geolocation crosswindowmessaging
websqldatabase no-indexeddb hashchange historymanagement draganddrop websockets
rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity
cssanimations csscolumns cssgradients cssreflections csstransforms
csstransforms3d csstransitions video audio localstorage sessionstorage
webworkers applicationcache svg smil svgclippaths">

.borderradius #sidebar {
background-color: #ddd;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 1px solid #e3e3e3;
padding: 5px
} modernizr.com

HTML5 semantic
template tags
<header>
<nav>
<article>
<aside>
<section>
<footer> modernizr.com


Conditional
comments


 <html lang="en" class="no-js"> 

.ie6 .meta-gestures {width: 610px;}

Embracing the
Web as our CMS


The Status Quo


How can we improve it?
For the blogger:
• Create the right kind of glue between systems
• Take away as much manual effort as possible
For the user:
• Don’t let the origin drive the placement


Example: Link Roundups
and aggregation
• Blogger saves links to
Delicious
• The aggregator
automatically pulls in
those links
• Blogger sees links in
WordPress admin


Link Roundups

• Blogger edits links
and sends to editor
window.
• Blogger adds video,
does ﬁnal check, and
publishes.


Link Roundups


Aggregation
If the Blogger uses certain
tags, links automatically
appear on other pages.

Same system used for
aggregating content from
Daylife and Twitter.

All external content lives
in one database and can
be used in multiple ways.


How this all
works


Hosting
Hosted in the cloud, entirely with Amazon Web Services:
Our “webserver” is two parts:
• A “hard drive”: Elastic Block Storage (EBS)
• A “CPU”: Elastic Computing instance (EC2)
Our “database server” is the Relational Database Service
(RDS)

Ylastic for monitoring/alerts


Webserver setup
• We run nginx, Apache, and Django on one server
• nginx handles all requests from users, and
• handles static content (.js, .css, etc) itself
• dispatches PHP requests to Apache
• dispatches aggregator requests to Django


WordPress architecture
• WordPress 3.0.1
• One MultiSite instance for all 12 blogs.
• Each site has its own child theme.
• Domain Mapping plugin for multiple domains.
• Unﬁltered MU plugin so bloggers can post videos.


Caching & Performance
• nginx keeps the load off of Apache
• W3 Total Cache plugin is the Swiss Army knife of
caching.
• we implement disk caching for pages
• Not using Amazon’s S3 at this time; no immediate
need.


Behind the scenes

from bagaball via Flickr


What’s next


We’re hiring
NPR is launching a similar project called
“Impact of Government”

• Application Developer
• Editorial/Interactive Designer
• Project Manager
• Editorial Coordinators
Talk to us or go to http://www.npr.org/about/careers/


The Tech Side of Project Argo

Recommended

Recommended

More Related Content

What's hot

What's hot (9)

Viewers also liked

Viewers also liked (7)

Similar to The Tech Side of Project Argo

Similar to The Tech Side of Project Argo (20)

Recently uploaded

Recently uploaded (20)

The Tech Side of Project Argo