The Tech Side of Project Argo
8 likes1,385 views
The document summarizes Project ARGO, an NPR initiative to create a network of 12 topical websites staffed by a single blogger/editor associated with an NPR member station. It describes the WordPress-based platform used, which includes customizations for features like audio posts, taxonomies, menus and templates. It also outlines the hosting infrastructure using Amazon Web Services and strategies for performance, caching and aggregation across sites.
![Audio
// Create shortcode text for built-in audio link
add_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;
}
Wednesday, October 20, 2010](https://image.slidesharecdn.com/techsideofargo-101020143012-phpapp02/85/The-Tech-Side-of-Project-Argo-23-320.jpg)
![Conditional
comments
<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--
<![endif]-->
.ie6 .meta-gestures {width: 610px;}
Wednesday, October 20, 2010](https://image.slidesharecdn.com/techsideofargo-101020143012-phpapp02/85/The-Tech-Side-of-Project-Argo-29-320.jpg)
The Tech Side of Project Argo
- 1. 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
- 2. OVERVIEW Wednesday, October 20, 2010
- 3. BACKGROUND What is Project ARGO? Wednesday, October 20, 2010
- 4. 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 Wednesday, October 20, 2010
- 5. Our model • Editorial Strategy • Technology Platform • Sustainability Plans Wednesday, October 20, 2010
- 6. 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 Wednesday, October 20, 2010
- 7. Basically, we’re a startup flickr / Rev. Xanatos Satanicos Bombasticos ... within Wednesday, October 20, 2010
- 8. 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 flexibility to use best tool for the job. Wednesday, October 20, 2010
- 9. OUR STARTING POINT Maintainability, Structure and Flexibility Wednesday, October 20, 2010
- 10. Maintainability OUR DEVELOPMENT TEAM You’re looking at it... Wednesday, October 20, 2010
- 11. Structure from Alaskan Dude via Flickr Wednesday, October 20, 2010
- 12. Flexibility From Melvin Schlubman via Flickr Wednesday, October 20, 2010
- 13. Develop as little as possible Wednesday, October 20, 2010
- 14. Modularity and code reuse Wednesday, October 20, 2010
- 15. Argo Theme framework Child Theme Parent Theme Wednesday, October 20, 2010
- 16. Giving the system structure and shape dcentric.wamu.org Wednesday, October 20, 2010
- 17. Featured Content Wednesday, October 20, 2010
- 18. 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 } Wednesday, October 20, 2010
- 19. Custom Menus http://codex.wordpress.org/Appearance_Menus_SubPanel Wednesday, October 20, 2010
- 20. Mega Menu Wednesday, October 20, 2010
- 21. 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, ) ); ?> Wednesday, October 20, 2010
- 22. Post types like Audio SoundManager: schillmania.com/projects/soundmanager2 Wednesday, October 20, 2010
- 23. Audio // Create shortcode text for built-in audio link add_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; } Wednesday, October 20, 2010
- 24. Anatomy of a template Wednesday, October 20, 2010
- 25. html5boilerplate.com 960.gs Wednesday, October 20, 2010
- 26. 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; } Wednesday, October 20, 2010
- 27. 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 Wednesday, October 20, 2010
- 28. HTML5 semantic template tags <header> <nav> <article> <aside> <section> <footer> modernizr.com Wednesday, October 20, 2010
- 29. Conditional comments <!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9]> <html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!-- <![endif]--> .ie6 .meta-gestures {width: 610px;} Wednesday, October 20, 2010
- 30. Embracing the Web as our CMS Wednesday, October 20, 2010
- 31. The Status Quo Wednesday, October 20, 2010
- 32. 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 Wednesday, October 20, 2010
- 33. Example: Link Roundups and aggregation • Blogger saves links to Delicious • The aggregator automatically pulls in those links • Blogger sees links in WordPress admin Wednesday, October 20, 2010
- 34. Link Roundups • Blogger edits links and sends to editor window. • Blogger adds video, does final check, and publishes. Wednesday, October 20, 2010
- 35. Link Roundups Wednesday, October 20, 2010
- 36. 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. Wednesday, October 20, 2010
- 37. How this all works Wednesday, October 20, 2010
- 38. 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 Wednesday, October 20, 2010
- 39. 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 Wednesday, October 20, 2010
- 40. 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. Wednesday, October 20, 2010
- 41. 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. Wednesday, October 20, 2010
- 42. Behind the scenes from bagaball via Flickr Wednesday, October 20, 2010
- 43. What’s next Wednesday, October 20, 2010
- 44. 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/ Wednesday, October 20, 2010