plugins are blueprints
DESCRIPTION
Decoding the presentation, behavior and structure of WordPress plugins to make them your ownTRANSCRIPT
![Page 1: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/1.jpg)
Credit: Chris Ware- Building Stories
Decoding the presentation, behavior and structure of WordPress plugins to make them your own
WordCamp Boston 2011Marc Lavallee, @lavalleeWesley Lindamood, @lindamood
PLUGINS ARE BLUEPRINTS
![Page 2: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/2.jpg)
Credit: Chris Ware- Building Stories
WordCamp Boston 2011Marc Lavallee, @lavalleeWesley Lindamood, @lindamood
PLUGINS ARE BLUEPRINTS
Decoding the presentation, behavior and structure of WordPress plugins to make them your own
![Page 3: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/3.jpg)
CONFUSION
![Page 4: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/4.jpg)
COHERENCE
Credit: David Arpi/Flickr
![Page 5: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/5.jpg)
DECODING A PLUGIN
Credit: Bob Baxley
http://bit.ly/pKLC7I
![Page 6: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/6.jpg)
PLUGIN USAGE
Useas-is
Start from scratch
Patch Prototype and customize
Draw inspiration
• W3 Total Cache
• Google Analyticator • FD Feedburner • Slides for WordPress • Embed.ly
BUILDPATCHUSE
• Link Roundup
![Page 7: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/7.jpg)
PLUGIN USAGE
Useas-is
Start from scratch
Patch Prototype and customize
Draw inspiration
• W3 Total Cache
• Google Analyticator • FD Feedburner • Slides for WordPress • Embed.ly
BUILDPATCHUSE
• Link Roundup
![Page 8: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/8.jpg)
CUSTOMIZING PLUGINS
Find the best available plugin
Explore through prototyping
Decide to build or patch
Begin development
1
2
3
4
![Page 9: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/9.jpg)
AN EDUCATED GUESS
STRUCTURE
PRESENTATION
BEHAVIOR
![Page 10: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/10.jpg)
WHEN TO USE A PLUGIN
STRUCTURE
BEHAVIOR
PRESENTATION
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
USE
![Page 11: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/11.jpg)
WHEN TO PATCH A PLUGIN
STRUCTURE
BEHAVIOR
PRESENTATION
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
USE
PATCH
![Page 12: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/12.jpg)
WHEN TO BUILD YOUR OWN PLUGIN
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
STRUCTURE
BEHAVIOR
PRESENTATION
USE
PATCH
BUILD
![Page 13: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/13.jpg)
NAVIS SLIDESHOWSExample One
![Page 14: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/14.jpg)
A LIVING PATTERN LIBRARY
I start where the last man left off— Thomas Edison
Credit: Mark Killingsworth
![Page 15: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/15.jpg)
OUR STARTING POINT
Slides for WordPress
http://bit.ly/gKHLvt
![Page 16: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/16.jpg)
WORDPRESS DEFAULT
![Page 17: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/17.jpg)
A PLUGIN JUMPSTART
![Page 18: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/18.jpg)
A FUNCTIONAL PROTOTYPE
![Page 19: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/19.jpg)
CONDITIONAL IMAGE LOADING
<div id="7118-slide3" data-src="http://e.opb.org/files/2011/07/3.jpg*450*600" />
ELEMENT BEFORE
function ensureImageIsLoaded( postID, slideNum ) { var slideDiv = jQuery( "#" + getSlideElement( postID, slideNum ) );
// Do nothing if the slide image already exists if ( slideDiv.has( "img" ).length ) return;
var imgData = slideDiv.attr( "data-src" ); if ( imgData ) { var parts = imgData.split( "*" ); var img = jQuery( "<img/>" ) .attr( "src", parts[0] ) .attr( "width", parts[1] ) .attr( "height", parts[2] ); slideDiv.prepend( img ); }}
ELEMENT AFTER<div id="7118-slide2"><img src="http://e.opb.org/files/2011/07/3.jpg" width="620" height="465" />
JAVASCRIPT
http://bit.ly/pab-images
![Page 20: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/20.jpg)
CONDITIONAL SCRIPT LOADING<?php$argo_include_slideshow_deps = false;add_filter( 'post_gallery', 'argo_handle_slideshow', 10, 2 );add_filter( 'wp_footer', 'argo_add_slideshow_deps' );
function argo_handle_slideshow( $output, $attr ) { global $argo_include_slideshow_deps; $argo_include_slideshow_deps = true; return do_other_slideshow_things( $output, $attr );}
function argo_add_slideshow_deps() { global $argo_include_slideshow_deps; if ( ! $argo_include_slideshow_deps ) { return; }
// jQuery slides plugin from http://slidesjs.com/ $slides_src = plugins_url( 'js/slides.min.jquery.js', __FILE__ ); wp_register_script( 'jquery-slides', $slides_src, array( 'jquery' ), '1.1.7', true ); wp_print_scripts( 'jquery-slides' );} ?>
http://bit.ly/pab-scripts
![Page 21: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/21.jpg)
PLUGIN SEDIMENT
SLIDES FOR WORDPRESSPHP: 39k895 lines 748 sloc
NAVIS SLIDESHOWSPHP: 8k244 lines199 sloc
![Page 22: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/22.jpg)
WHAT WE CHANGED
STRUCTURE
BEHAVIOR
STRUCTURE
BEHAVIOR
PRESENTATION
• Conditionally load slideshow CSS, JS
• Dynamically load images
• Add custom taxonomy for sideshow content type
• Add image permalinks
• Remove unneeded options and features
PRESENTATION
• Add credit and caption
• Adjust placement of UI controls, the width of images and look and feel of the slideshow to conform to Argo standards.
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
![Page 23: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/23.jpg)
WHAT WE CHANGED
STRUCTURE
BEHAVIOR
STRUCTURE
BEHAVIOR
PRESENTATION
• Conditionally load slideshow CSS, JS
• Dynamically load images
• Add custom taxonomy for sideshow content type
• Add image permalinks
• Remove unneeded options and features
PRESENTATION
• Add credit and caption
• Adjust placement of UI controls, the width of images and look and feel of the slideshow to conform to Argo standards.
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
![Page 24: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/24.jpg)
WHAT WE CHANGED
STRUCTURE
BEHAVIOR
STRUCTURE
BEHAVIOR
PRESENTATION
• Conditionally load slideshow CSS, JS
• Dynamically load images
• Add custom taxonomy for sideshow content type
• Add image permalinks
• Remove unneeded options and features
PRESENTATION
• Add credit and caption
• Adjust placement of UI controls, the width of images and look and feel of the slideshow to conform to Argo standards.
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
![Page 25: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/25.jpg)
WHAT WE CHANGED
STRUCTURE
BEHAVIOR
STRUCTURE
BEHAVIOR
PRESENTATION
• Conditionally load slideshow CSS, JS
• Dynamically load images
• Add custom taxonomy for sideshow content type
• Add image permalinks
• Remove unneeded options and features
PRESENTATION
• Add credit and caption
• Adjust placement of UI controls, the width of images and look and feel of the slideshow to conform to Argo standards.
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
![Page 26: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/26.jpg)
RSS & EMAILExample Two
![Page 27: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/27.jpg)
OUR STARTING POINT
FD Feedburner
http://bit.ly/gbx4j2
![Page 28: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/28.jpg)
EMAIL SUBSCRIPTION INTERFACE
![Page 29: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/29.jpg)
MENU PLACEMENT
<?php// In our theme's functions.php fileif ( function_exists( 'feedburner_config_page' ) ) { add_submenu_page( 'plugins.php','Feedburner Configuration', 'Feedburner Configuration', 'manage_options', 'argo_feedburner_menu', 'feedburner_conf' ); remove_submenu_page( 'plugins.php', 'fdfeedburner.php' ); }?>
![Page 30: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/30.jpg)
USER AGENT CUSTOMIZATIONS<?php// In FD Feedburner pluginfunction feedburner_redirect() { global $feed, $withcomments, $wp, $wpdb, $wp_version, $wp_db_version;
do_a_bunch_of_stuff();
// Do nothing if not a feed if (!is_feed()) return;
$skip_useragents = array( '/feedburner/i', '/googlebot/i' ); $skip_useragents = apply_filters( 'feedburner_skip_useragents', $skip_useragents ); foreach ( $skip_useragents as $ua ) { if ( preg_match( $ua, $_SERVER[ 'HTTP_USER_AGENT' ] ) ) return; }
do_more_stuff();}?><?php// In our themeadd_filter( 'feedburner_skip_useragents', 'argo_allow_yahoo_pipes' );
function argo_allow_yahoo_pipes( $useragents ) { $useragents[] = '/yahoo pipes/i'; return $useragents;}?>
![Page 31: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/31.jpg)
WHAT WE CHANGED
STRUCTURE
BEHAVIOR
• Change user agent list
• Add an email subscription form into the footer
• Create an email subscription widget
• No changes
PRESENTATION
• Widget and footer styling
STRUCTURE
BEHAVIOR
PRESENTATION
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
![Page 32: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/32.jpg)
WHAT WE CHANGED
STRUCTURE
BEHAVIOR
• Change user agent list
• Add an email subscription form into the footer
• Create an email subscription widget
• No changes
PRESENTATION
• Widget and footer styling
STRUCTURE
BEHAVIOR
PRESENTATION
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
![Page 33: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/33.jpg)
WHAT WE CHANGED
STRUCTURE
BEHAVIOR
• Change user agent list
• Add an email subscription form into the footer
• Create an email subscription widget
• No changes
PRESENTATION
• Widget and footer styling
STRUCTURE
BEHAVIOR
PRESENTATION
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
![Page 34: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/34.jpg)
WHAT WE CHANGED
STRUCTURE
BEHAVIOR
• Change user agent list
• Add an email subscription form into the footer
• Create an email subscription widget
• No changes
PRESENTATION
• Widget and footer styling
STRUCTURE
BEHAVIOR
PRESENTATION
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
![Page 35: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/35.jpg)
JIFFYPOSTSExample Three
![Page 36: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/36.jpg)
EMBEDDED CONTENT
![Page 37: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/37.jpg)
OUR STARTING POINT
Embed.ly
http://bit.ly/ij3O9C
![Page 38: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/38.jpg)
OUR STARTING POINT
![Page 39: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/39.jpg)
OUR STARTING POINT
![Page 40: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/40.jpg)
WORKFLOW IMPROVEMENTS
![Page 41: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/41.jpg)
WORKFLOW IMPROVEMENTS<?php add_action( 'init', 'argo_register_jiffypost_type' ); function argo_register_jiffypost_type() { register_post_type( 'jiffypost', array( 'labels' => array( 'name' => 'Jiffy Posts', 'singular_name' => 'Jiffy Post', ), 'description' => 'Jiffy Posts', 'supports' => array( 'title', 'comments', 'author' ), # no editor! 'public' => true, 'menu_position' => 6, 'taxonomies' => array(), ) ); } add_filter( 'wp_insert_post_data', 'argo_insert_post_content' ); function argo_insert_post_content( $data ) { if ( 'jiffypost' != $data[ 'post_type' ] ) return $data; $content = ''; if ( isset( $_POST[ 'leadintext' ] ) ) { $content = '<p>' . $_POST[ 'leadintext' ] . '</p>'; } if ( isset( $_POST[ 'embedlyarea' ] ) ) { $content .= $_POST[ 'embedlyarea' ]; } $data[ 'post_content' ] = $content; return $data; } ?>
![Page 42: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/42.jpg)
WORKFLOW IMPROVEMENTS<?php add_meta_box( 'navisleadin', 'Lead in text', 'argo_embed_leadin_box', 'jiffypost', 'normal', 'high' );add_filter( 'teeny_mce_buttons', 'argo_modify_teeny_mce_buttons' ) );
function argo_embed_leadin_box( $post ) { $leadintext = get_post_meta( $post->ID, '_leadintext', true );
wp_tiny_mce( true, array( 'editor_selector' => 'leadintext', 'setup' => 'tinyMCESetup', ) );?> <p align="right"> <a id="edButtonHTML" class="">HTML</a> <a id="edButtonPreview" class="active">Visual</a> </p> <textarea id="leadintext" class="leadintext" name="leadintext" style="width: 98%"><?php esc_textarea( $leadintext ); ?></textarea><?php}
function argo_modify_teeny_mce_buttons( $buttons ) { if ( 'jiffypost' != get_post_type() ) return $buttons;
return array( 'bold', 'italic', 'underline', 'strikethrough', 'link', 'unlink' );}?>
![Page 43: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/43.jpg)
DESIGN IMPROVEMENTS
![Page 44: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/44.jpg)
DESIGN IMPROVEMENTS
![Page 45: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/45.jpg)
DESIGN IMPROVEMENTS
VIDEO
LINK
PHOTO
RICH
![Page 46: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/46.jpg)
WHAT WE BUILT
STRUCTURE
BEHAVIOR
• Create a customized TinyMCE editor for use withcharacter-limited lead-in text
• Preview/edit embedded content in post admin
• Provide proper attribution through source and via fields
• Create bookmarklet for adding JiffyPosts off-site
• Create a custom post type for embedded content
• Keep requests for embedded content on the backend
PRESENTATION
• Provide formatting of all embed.ly content type responses.
• Reveal hierarchy of original and embedded content
• Introduce visual variety for different post types
• Encourage interaction around embedded content on-site
STRUCTURE
BEHAVIOR
PRESENTATION
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
![Page 47: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/47.jpg)
WHAT WE BUILT
STRUCTURE
BEHAVIOR
• Create a customized TinyMCE editor for use withcharacter-limited lead-in text
• Preview/edit embedded content in post admin
• Provide proper attribution through source and via fields
• Create bookmarklet for adding JiffyPosts off-site
• Create a custom post type for embedded content
• Keep requests for embedded content on the backend
PRESENTATION
• Provide formatting of all embed.ly content type responses.
• Reveal hierarchy of original and embedded content
• Introduce visual variety for different post types
• Encourage interaction around embedded content on-site
STRUCTURE
BEHAVIOR
PRESENTATION
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
![Page 48: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/48.jpg)
WHAT WE BUILT
STRUCTURE
BEHAVIOR
• Create a customized TinyMCE editor for use withcharacter-limited lead-in text
• Preview/edit embedded content in post admin
• Provide proper attribution through source and via fields
• Create bookmarklet for adding JiffyPosts off-site
• Create a custom post type for embedded content
• Keep requests for embedded content on the backend
PRESENTATION
• Provide formatting of all embed.ly content type responses.
• Reveal hierarchy of original and embedded content
• Introduce visual variety for different post types
• Encourage interaction around embedded content on-site
STRUCTURE
BEHAVIOR
PRESENTATION
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
![Page 49: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/49.jpg)
WHAT WE BUILT
STRUCTURE
BEHAVIOR
• Create a customized TinyMCE editor for use withcharacter-limited lead-in text
• Preview/edit embedded content in post admin
• Provide proper attribution through source and via fields
• Create bookmarklet for adding JiffyPosts off-site
• Create a custom post type for embedded content
• Keep requests for embedded content on the backend
PRESENTATION
• Provide formatting of all embed.ly content type responses.
• Reveal hierarchy of original and embedded content
• Introduce visual variety for different post types
• Encourage interaction around embedded content on-site
STRUCTURE
BEHAVIOR
PRESENTATION
AMOUNT OF PLUGIN CUSTOMIZATION LargeSmall
BUILDUSE PATCH
![Page 50: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/50.jpg)
LESSONS LEARNED
“I could tell you stories to curl your hair, but it looks like you’ve already heard ‘em.”
— Barton Fink (1991)
credit: iwdrm.tumblr.com
![Page 51: Plugins Are Blueprints](https://reader034.vdocuments.mx/reader034/viewer/2022050801/54870dddb4af9f870d8b52fa/html5/thumbnails/51.jpg)
QUESTIONS?
credit: iwdrm.tumblr.com
Marc Lavallee @lavallee
Wesley Lindamood @lindamood
Slidesharehttp://slidesha.re/qsJEmY