The Tech Side of Project Argo

Wesley Lindamood Project ARGO web designer

@lindamood [email protected]

THE TECH SIDE OFPROJECT ARGOMarc Lavallee

Project ARGO tech. architect@lavallee

[email protected]

10/19/2010

Wednesday, October 20, 2010

OVERVIEW


BACKGROUND

What is Project ARGO?


"...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."

It’s designed to...

-- Vivian Schiller, CEO and president of NPR


Our model

• Editorial Strategy• Technology Platform• Sustainability Plans


The pilot scopeA 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

flickr / Rev. Xanatos Satanicos Bombasticos

... within


The ARGO Platform

Mostly , with some

Content aggregation app.Hooked into WordPress:• admin widgets• settings panel• content widgets

Standard WP 3.0 with some customizations.

Combination gives us flexibility to use best tool for the job.


Maintainability, Structure and

Flexibility

OUR STARTING POINT


Maintainability

OUR DEVELOPMENT TEAM

You’re looking at it...


Structure

from Alaskan Dude via Flickr


http://www.flickr.com/photos/72213316@N00/


Flexibility

From Melvin Schlubman via Flickr


Develop as little as possible


Modularity and code reuse


ArgoTheme

framework

Parent Theme

Child Theme


Giving the system

structure and shape

dcentric.wamu.org


Featured Content


Featured Content// CUSTOM TAXONOMYadd_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 CROPSadd_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_fields = 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, ) ); ?>


Audio

SoundManager: schillmania.com/projects/soundmanager2

Post types like


Audio// Create shortcode text for built-in audio linkadd_filter( '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">

modernizr.com

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


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 Roundupsand 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 final check, and publishes.


Link Roundups


AggregationIf the Blogger uses certaintags, links automatically appear on other pages.

Same system used foraggregating content fromDaylife and Twitter.

All external content livesin one database and canbe used in multiple ways.


How this all works


HostingHosted 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.• Unfiltered 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 hiringNPR 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/


http://www.npr.org/about/careers/

http://www.npr.org/about/careers/

The Tech Side of Project Argo

Technology

Transcript of The Tech Side of Project Argo