View
1.724
Download
1
Category
Tags:
Preview:
Citation preview
Wesley Lindamood Project ARGO web designer
@lindamood wlindamood@npr.org
THE TECH SIDE OFPROJECT ARGOMarc Lavallee
Project ARGO tech. architect@lavallee
mlavallee@npr.org
10/19/2010
Wednesday, October 20, 2010
OVERVIEW
Wednesday, October 20, 2010
BACKGROUND
What is Project ARGO?
Wednesday, October 20, 2010
"...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
Wednesday, October 20, 2010
Our model
• Editorial Strategy• Technology Platform• Sustainability Plans
Wednesday, October 20, 2010
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
Wednesday, October 20, 2010
Basically, we’re a startup
flickr / Rev. Xanatos Satanicos Bombasticos
... within
Wednesday, October 20, 2010
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.
Wednesday, October 20, 2010
Maintainability, Structure and
Flexibility
OUR STARTING POINT
Wednesday, October 20, 2010
Maintainability
OUR DEVELOPMENT TEAM
You’re looking at it...
Wednesday, October 20, 2010
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
ArgoTheme
framework
Parent Theme
Child Theme
Wednesday, October 20, 2010
Giving the system
structure and shape
dcentric.wamu.org
Wednesday, October 20, 2010
Featured Content
Wednesday, October 20, 2010
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 }
Wednesday, October 20, 2010
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' ); 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
Audio
SoundManager: schillmania.com/projects/soundmanager2
Post types like
Wednesday, October 20, 2010
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; }
Wednesday, October 20, 2010
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');! 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
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}
Wednesday, October 20, 2010
HTML5 semantic template tags
<header> <nav> <article> <aside> <section> <footer>
modernizr.com
Wednesday, October 20, 2010
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
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 manual effort as possible
For the user:• Don’t let the origin drive the placement
Wednesday, October 20, 2010
Example: Link Roundupsand aggregation
• Blogger saves links to Delicious• The aggregator automatically pulls in those links• Blogger sees links in WordPress admin
Wednesday, October 20, 2010
Link Roundups
• Blogger edits links and sends to editor window.• Blogger adds video, does final check, and publishes.
Wednesday, October 20, 2010
Link Roundups
Wednesday, October 20, 2010
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.
Wednesday, October 20, 2010
How this all works
Wednesday, October 20, 2010
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
Wednesday, October 20, 2010
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
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
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
Behind the scenes
from bagaball via Flickr
Wednesday, October 20, 2010
What’s next
Wednesday, October 20, 2010
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/
Wednesday, October 20, 2010
Recommended