Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
THE TECH SIDE OF
                        PROJECT ARGO
                Marc Lavallee                Wesley Lindamood
      ...
OVERVIEW




Wednesday, October 20, 2010
BACKGROUND
       What is Project ARGO?




Wednesday, October 20, 2010
It’s designed to...

          "...beef up coverage of critical issues at the local
         level, and, second, to begin ...
Our model

                 • Editorial Strategy
                 • Technology Platform
                 • Sustainability ...
The pilot scope
    A network of twelve
    topical websites:

    • Staffed by a single
    blogger/editor
    • Associat...
Basically, we’re a startup




                                     flickr / Rev. Xanatos Satanicos Bombasticos




       ...
The ARGO Platform
                     Mostly                 , with some

                     Standard WP 3.0 with   Con...
OUR STARTING POINT
                              Maintainability,
                              Structure and
            ...
Maintainability
                     OUR DEVELOPMENT TEAM



                              You’re looking at it...


Wedne...
Structure




                                      from Alaskan Dude via Flickr




Wednesday, October 20, 2010
Flexibility




                                      From Melvin Schlubman via Flickr




Wednesday, October 20, 2010
Develop as little
                        as possible


Wednesday, October 20, 2010
Modularity and
                               code reuse



Wednesday, October 20, 2010
Argo
           Theme
         framework

                                              Child
                            ...
Giving the
     system
    structure
    and shape


                              dcentric.wamu.org

Wednesday, October 2...
Featured Content




Wednesday, October 20, 2010
Featured Content
 // CUSTOM TAXONOMY
 add_action( 'init', 'argo_custom_taxonomies' );
 function argo_custom_taxonomies() {...
Custom Menus




     http://codex.wordpress.org/Appearance_Menus_SubPanel

Wednesday, October 20, 2010
Mega Menu




Wednesday, October 20, 2010
Mega Menu
class Argo_Categories_Walker extends Walker {
   var $tree_type = array( 'post_type', 'taxonomy', 'custom' );
  ...
Post types like
        Audio




     SoundManager: schillmania.com/projects/soundmanager2
Wednesday, October 20, 2010
Audio
    // Create shortcode text for built-in audio link
    add_filter( 'audio_send_to_editor_url', 'argo_audio_editor_s...
Anatomy of a
                               template


Wednesday, October 20, 2010
html5boilerplate.com




     960.gs




Wednesday, October 20, 2010
CSS3- @font-face



   @font-face {
   ! font-family: 'LeagueGothicRegular';
   ! src: url('font/league_gothic-webfont.eot...
Progressive
                              Enhancement
       <html lang="en" class=" js canvas canvastext geolocation cros...
HTML5 semantic
                           template tags
               <header>
               <nav>
               <artic...
Conditional
                                   comments
               <!--[if lt IE 7]> <html lang="en" class="no-js   ie...
Embracing the
                 Web as our CMS


Wednesday, October 20, 2010
The Status Quo




Wednesday, October 20, 2010
How can we improve it?
     For the blogger:
     • Create the right kind of glue between systems
     • Take away as much...
Example: Link Roundups
     and aggregation
 • Blogger saves links to
 Delicious
 • The aggregator
 automatically pulls in...
Link Roundups

 • Blogger edits links
 and sends to editor
 window.
 • Blogger adds video,
 does final check, and
 publishe...
Link Roundups




Wednesday, October 20, 2010
Aggregation
  If the Blogger uses certain
  tags, links automatically
  appear on other pages.

  Same system used for
  a...
How this all
                                works


Wednesday, October 20, 2010
Hosting
   Hosted in the cloud, entirely with Amazon Web Services:
   Our “webserver” is two parts:
   • A “hard drive”: E...
Webserver setup
     • We run nginx, Apache, and Django on one server
     • nginx handles all requests from users, and
  ...
WordPress architecture
            • WordPress 3.0.1
            • One MultiSite instance for all 12 blogs.
            • ...
Caching & Performance
            • nginx keeps the load off of Apache
            • W3 Total Cache plugin is the Swiss Ar...
Behind the scenes


                              from bagaball via Flickr

Wednesday, October 20, 2010
What’s next



Wednesday, October 20, 2010
We’re hiring
                              NPR is launching a similar project called
                                     ...
Upcoming SlideShare
Loading in …5
×

of

The Tech Side of Project Argo Slide 1 The Tech Side of Project Argo Slide 2 The Tech Side of Project Argo Slide 3 The Tech Side of Project Argo Slide 4 The Tech Side of Project Argo Slide 5 The Tech Side of Project Argo Slide 6 The Tech Side of Project Argo Slide 7 The Tech Side of Project Argo Slide 8 The Tech Side of Project Argo Slide 9 The Tech Side of Project Argo Slide 10 The Tech Side of Project Argo Slide 11 The Tech Side of Project Argo Slide 12 The Tech Side of Project Argo Slide 13 The Tech Side of Project Argo Slide 14 The Tech Side of Project Argo Slide 15 The Tech Side of Project Argo Slide 16 The Tech Side of Project Argo Slide 17 The Tech Side of Project Argo Slide 18 The Tech Side of Project Argo Slide 19 The Tech Side of Project Argo Slide 20 The Tech Side of Project Argo Slide 21 The Tech Side of Project Argo Slide 22 The Tech Side of Project Argo Slide 23 The Tech Side of Project Argo Slide 24 The Tech Side of Project Argo Slide 25 The Tech Side of Project Argo Slide 26 The Tech Side of Project Argo Slide 27 The Tech Side of Project Argo Slide 28 The Tech Side of Project Argo Slide 29 The Tech Side of Project Argo Slide 30 The Tech Side of Project Argo Slide 31 The Tech Side of Project Argo Slide 32 The Tech Side of Project Argo Slide 33 The Tech Side of Project Argo Slide 34 The Tech Side of Project Argo Slide 35 The Tech Side of Project Argo Slide 36 The Tech Side of Project Argo Slide 37 The Tech Side of Project Argo Slide 38 The Tech Side of Project Argo Slide 39 The Tech Side of Project Argo Slide 40 The Tech Side of Project Argo Slide 41 The Tech Side of Project Argo Slide 42 The Tech Side of Project Argo Slide 43 The Tech Side of Project Argo Slide 44
Upcoming SlideShare
Argo
Next
Download to read offline and view in fullscreen.

7 Likes

Share

Download to read offline

The Tech Side of Project Argo

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

The Tech Side of Project Argo

  1. 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. 2. OVERVIEW Wednesday, October 20, 2010
  3. 3. BACKGROUND What is Project ARGO? Wednesday, October 20, 2010
  4. 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. 5. Our model • Editorial Strategy • Technology Platform • Sustainability Plans Wednesday, October 20, 2010
  6. 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. 7. Basically, we’re a startup flickr / Rev. Xanatos Satanicos Bombasticos ... within Wednesday, October 20, 2010
  8. 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. 9. OUR STARTING POINT Maintainability, Structure and Flexibility Wednesday, October 20, 2010
  10. 10. Maintainability OUR DEVELOPMENT TEAM You’re looking at it... Wednesday, October 20, 2010
  11. 11. Structure from Alaskan Dude via Flickr Wednesday, October 20, 2010
  12. 12. Flexibility From Melvin Schlubman via Flickr Wednesday, October 20, 2010
  13. 13. Develop as little as possible Wednesday, October 20, 2010
  14. 14. Modularity and code reuse Wednesday, October 20, 2010
  15. 15. Argo Theme framework Child Theme Parent Theme Wednesday, October 20, 2010
  16. 16. Giving the system structure and shape dcentric.wamu.org Wednesday, October 20, 2010
  17. 17. Featured Content Wednesday, October 20, 2010
  18. 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. 19. Custom Menus http://codex.wordpress.org/Appearance_Menus_SubPanel Wednesday, October 20, 2010
  20. 20. Mega Menu Wednesday, October 20, 2010
  21. 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. 22. Post types like Audio SoundManager: schillmania.com/projects/soundmanager2 Wednesday, October 20, 2010
  23. 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. 24. Anatomy of a template Wednesday, October 20, 2010
  25. 25. html5boilerplate.com 960.gs Wednesday, October 20, 2010
  26. 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. 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. 28. HTML5 semantic template tags <header> <nav> <article> <aside> <section> <footer>  modernizr.com Wednesday, October 20, 2010
  29. 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. 30. Embracing the Web as our CMS Wednesday, October 20, 2010
  31. 31. The Status Quo Wednesday, October 20, 2010
  32. 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. 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. 34. Link Roundups • Blogger edits links and sends to editor window. • Blogger adds video, does final check, and publishes. Wednesday, October 20, 2010
  35. 35. Link Roundups Wednesday, October 20, 2010
  36. 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. 37. How this all works Wednesday, October 20, 2010
  38. 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. 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. 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. 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. 42. Behind the scenes from bagaball via Flickr Wednesday, October 20, 2010
  43. 43. What’s next Wednesday, October 20, 2010
  44. 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
  • phillipadsmith

    Mar. 10, 2013
  • hawkt

    Jul. 17, 2012
  • miguelpaz

    Jan. 19, 2012
  • glecharles

    Sep. 15, 2011
  • davesharpedotcom

    Aug. 14, 2011
  • amyjasper

    Mar. 24, 2011
  • greglinch

    Oct. 21, 2010

Views

Total views

2,554

On Slideshare

0

From embeds

0

Number of embeds

228

Actions

Downloads

23

Shares

0

Comments

0

Likes

7

×