WordPress Web Apps
Upcoming SlideShare
Loading in...5
×
 

WordPress Web Apps

on

  • 3,610 views

Slides from ym p

Slides from ym p

Statistics

Views

Total Views
3,610
Views on SlideShare
2,855
Embed Views
755

Actions

Likes
3
Downloads
19
Comments
0

3 Embeds 755

http://rachelmccollin.co.uk 753
https://twitter.com 1
http://campaignwebsites.co.uk 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

WordPress Web Apps WordPress Web Apps Presentation Transcript

  • WordPress web appstechniques and plugins for creating web-based apps with WordPress Rachel McCollin rachelmccollin.com rachel@compass-design.co.uk @rachelmccollin
  • Why a web app? • Quicker • Cheaper • Platform-agnostic • Not reliant on updates • SEO-friendly rachelmccollin.com @rachelmccollin
  • The starting point - a responsive site http://rachelmccollin.co.uk/carborellis/ rachelmccollin.com @rachelmccollin
  • Part One - building a web app layout • Removing unwanted content • Changing the site title or description • Change and style the navigation • Style the layout rachelmccollin.com @rachelmccollin
  • The web app design • Different navigation structure • Buttons • No home page content • Different site title rachelmccollin.com @rachelmccollin
  • Using a mobile theme for the web app • Switcher plugin (WordPress Mobile Pack) • Existing theme used as starting point for mobile theme rachelmccollin.com @rachelmccollin
  • Removing unwanted content • CTA in the header • Home page content • new template file - home.php • remove everything in the loop ! rachelmccollin.com @rachelmccollin
  • Changing the site description - 1 In the main site the site name is present but hidden: <span id="site-description"><?php bloginfo( description ); ?> </span> #site-description, #site-name { position: absolute; left: -9999px; } rachelmccollin.com @rachelmccollin
  • Changing the site description - 3 In the app the site name is replaced by static text: <span id="site-description"><?php bloginfo( description ); ?> </span> #site-description { position: relative; float: right; width: 60%; text-align: right; left: 0; } rachelmccollin.com @rachelmccollin
  • Changing the site description - 4 Alternative solutions: • use the site name and site description, only using one in each theme • add theme options screen (probably neatest) rachelmccollin.com @rachelmccollin
  • Changing the site description - the result ! rachelmccollin.com @rachelmccollin
  • Web app navigation - 1 • Set up new menu in WordPress admin - save as ‘web- app’ rachelmccollin.com @rachelmccollin
  • Web app navigation - 2 Replace: wp_nav_menu( array( container_class => menu-header, theme_location => primary ) ); with: wp_nav_menu( array(menu => ‘web-app’, container_class => menu-header, menu-class => ‘web-app-menu )); rachelmccollin.com @rachelmccollin
  • Web app navigation - 3 Style the buttons: .access li { width: 100%; margin: 15px 0; } .access a { background: #0cf; border-radius: 5px; color: #fff; height: 50px; font-size: 1.4em; } .access ul li.current_page_item > a { color: #fff; } rachelmccollin.com @rachelmccollin
  • Web app navigation - the result ! rachelmccollin.com @rachelmccollin
  • Style remaining layout • Social media icons • Address • Footer text • Add link to switch to main (responsive) site using plugin, and style ! rachelmccollin.com @rachelmccollin
  • Part Two - web app functionality • Useful plugins • E-commerce and PayPal • Map and directions (with geolocation) • Additional options and the future rachelmccollin.com @rachelmccollin
  • Useful web app plugins - 1 • Events: • Eventbrite for WordPress - http://wordpress.org/extend/plugins/eventbrite • Events Manager - http://wordpress.org/extend/plugins/events-manager/ • E-commerce & subscriptions • WP E-commerce (http://wordpress.org/extend/plugins/wp-e-commerce/) • Jigoshop (http://wordpress.org/extend/plugins/jigoshop/) • WooCommerce (http://www.woothemes.com/woocommerce/) • s2member (http://wordpress.org/extend/plugins/s2member/) • Gravity Forms (http://www.gravityforms.com/) • WordPress Ultra Simple PayPal Shopping cart (http://wordpress.org/extend/ plugins/wp-ultra-simple-paypal-shopping-cart/) rachelmccollin.com @rachelmccollin
  • Useful web app plugins - 2 • Geolocation & maps: • GeoPosty (http://wordpress.org/extend/plugins/geoposty/) • MyGeoPosition.com (http://wordpress.org/extend/plugins/ mygeopositioncom-geotags-geometatags/) • MapPress Easy Google maps (http://wordpress.org/extend/plugins/ mappress-google-maps-for-wordpress/) • Social media • BuddyPress (http://wordpress.org/extend/plugins/buddypress/) • Simple Facebook Connect (http://wordpress.org/extend/plugins/simple- facebook-connect/screenshots/) • Photography • PhotoSmash (http://wordpress.org/extend/plugins/photosmash-galleries/) • iDump (http://wordpress.org/extend/plugins/i-dump-iphone-to-wordpress- rachelmccollin.com photo-uploader/) @rachelmccollin
  • Ice cream sundae builder - adding a form - 1 ! rachelmccollin.com @rachelmccollin
  • Ice cream sundae builder - adding a form - 2 ! ! rachelmccollin.com @rachelmccollin
  • Mobile form UX • Size of buttons etc. • Use correct virtual keyboard • Use select boxes where possible • Access Autofill • Use conditional fields ! • ...anything to reduce the amount of typing! rachelmccollin.com @rachelmccollin
  • PayPal integration ! • Full e-commerce isn’t always necessary • Gravity Forms integrates easily with PayPal (with a developer license) rachelmccollin.com @rachelmccollin
  • Give the user feedback ! • A feedback page, confirmation email or preferably both • Always important, especially when money has changed hands • GF lets you specify a popup or separate page rachelmccollin.com @rachelmccollin
  • Geolocation and maps ! ! • Use a plugin that accesses user location • Provide a map and directions • Link to native maps app (the jury is out on this one right now!) rachelmccollin.com @rachelmccollin
  • Other options - accessing mobile browsercapabilities • File Upload - available with iOS6 • Local storage • Web video and audio APIs (web audio API now available with iOS6) • Canvas • Drag and drop • Location-dependent content rachelmccollin.com @rachelmccollin
  • Summary Web apps are the future of apps! (IMHO) rachelmccollin.com @rachelmccollin
  • And finally... rachelmccollin.com @rachelmccollin