First fare 2010 website 101 for frc teams


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

First fare 2010 website 101 for frc teams

  1. 1. Website 101 for FRC Teams Bob Goetz FIRST Fare 2010 OCTOBER 30, 2010
  2. 2. Who am I? —  Mentor teams 1510, 2898 —  Sixth year veteran of FIRST —  Oregon & Seattle Robot Inspector —  Board member for Oregon FIRST Robotics —  Webmaster for several websites, including — —  www.dinnerandamoviepdx.comWebsite 101 for FRC Teams 2 10/30/2010
  3. 3. What We will Cover * Design Principles – or what is needed to win a FIRST website award * Options to create a Website * Getting Started * ResourcesWebsite 101 for FRC Teams 3 10/30/2010
  4. 4. DESIGN PRINCIPLES *  What  makes  a  good  website?  Website 101 for FRC Teams 4 10/30/2010
  5. 5. Reasons FIRST Team Members SURF The Internet*  Find hints for the next challenge*  Solve a technical problem*  Research the competition (e.g. other teams)*  Order spare parts*  Get programming help*  Oh.. yeah... something about StarcraftWebsite 101 for FRC Teams 5 10/30/2010
  6. 6. FRC Website CriteriaWebsite 101 for FRC Teams 6 10/30/2010
  7. 7. Award Winning FRC WebsiteWebsite 101 for FRC Teams 7 10/30/2010
  8. 8. What you need to start *  Domain Name Registration o list.html *  Hosting account. You generally have three options: o  Managed Hosting o  Un-managed hosting o  Self HostedWebsite 101 for FRC Teams 8 10/30/2010
  9. 9. Our Options HTML,  PHP  &   CMS   CSS   Content Management SystemsWebsite 101 for FRC Teams 9 10/30/2010
  10. 10. Our Options HTML,  PHP  &   CMS   Systems CSS   Content Management Extremely  customizable   Easier  to  install  &  use   Multiple  users  with  variable  rights   No  built-­‐in  rights  mgmt   Customizable   Must  code  for  different  browsers   WYSWYG   Content  tied  to  code   No  need  to  know  HTML/CSS   Must  code  database/file  support   Content  separate  from  code   Need  to  roll  your  own  PHP  code   Built  in  database  support  Website 101 for FRC Teams 10 10/30/2010
  11. 11. Getting Started *  Tools you’ll need to setup & run a websiteWebsite 101 for FRC Teams 11 10/30/2010
  12. 12. *-A-M-P *  Prepackaged *  Versions: pache webserver AMP for Linux ySQL database AMP for Macs HP/Python/Perl AMP for Windows These tools allow you to run a website on your desktop/laptop without needing a hosting site. Use this to develop and design your website prior to public launch. Website 101 for FRC Teams 12 10/30/2010
  13. 13. Tools *  FTP Client (e.g. Filezilla) *  Text Editor (e.g Text Wrangler or Edit Pad)Website 101 for FRC Teams 13 10/30/2010
  14. 14. WordPress Installation *  Download WordPress *  Copy files via FTP *  Create database *  Create user *  Connect database to user *  Run setup *  Apply ThemeWebsite 101 for FRC Teams 14 10/30/2010
  15. 15. Step-by-Step InstructionsWebsite 101 for FRC Teams 15 10/30/2010
  16. 16. Step  1  –  using  *AMP   *  Install  *AMP   *  Find  the  Apache   Document  Rroot   *  /Users/bob/Documents/ htdocs  Website 101 for FRC Teams 16 10/30/2010
  17. 17. Step  2  –  Setup  *AMP   *  Set  the  Ports  to  Default   *  Select  Preferences   *  Select  Ports   *  Select  Set  to  default  Apache  and  MySQL  Ports  Website 101 for FRC Teams 17 10/30/2010
  18. 18. Step  2  –  Setup  *AMP   *  Find  the  Apache  Document  Root:       *  Select  Preferences   *  Select  Apache  Website 101 for FRC Teams 18 10/30/2010
  19. 19. Step  3  –  Create  a  Database   *  Click  Open  start  page  Website 101 for FRC Teams 19 10/30/2010
  20. 20. Step  3   * Click  phpMyAdmin  Website 101 for FRC Teams 20 10/30/2010
  21. 21. Step  3   * Enter  wordpress  and  click  Create  Website 101 for FRC Teams 21 10/30/2010
  22. 22. Step  4  –  Get  WordPress   *  Download  the  software:             *  Unzip  the  software  to  the  Apache  Root  Document   Folder  (see  step  3  for  the  location)  Website 101 for FRC Teams 22 10/30/2010
  23. 23. Step  5  –  The  Five  Minute  Install   *  Open  a  broswer  (FIreFox,  Chrome,  IE,  Safari,  etc.)   *  Go  to:    http://localhost/wordpress  Website 101 for FRC Teams 23 10/30/2010
  24. 24. Step  5   * http://localhost/wordpress   * Click  Create  a  Configuration  File  Website 101 for FRC Teams 24 10/30/2010
  25. 25. Step  5   * Click  Let’s  go!  Website 101 for FRC Teams 25 10/30/2010
  26. 26. Step  5   *  Enter  in  the  information  above,  Click  Submit  Website 101 for FRC Teams 26 10/30/2010
  27. 27. Step  5   * Click  Run  the  install  Website 101 for FRC Teams 27 10/30/2010
  28. 28. Step  5  * Enter  your   Blog  Title  * Username  * Password  * eMail  * Click  Install   WordPress  Website 101 for FRC Teams 28 10/30/2010
  29. 29. Step  5   * Enter  your  credentials  &  Log  in!!!  Website 101 for FRC Teams 29 10/30/2010
  30. 30. Step  6   * Installation  done,  almost  there…  Website 101 for FRC Teams 30 10/30/2010
  31. 31. Step  6   *  You  made  it!!!  Website 101 for FRC Teams 31 10/30/2010
  32. 32. Diving into WordPressWebsite 101 for FRC Teams 32 10/30/2010
  33. 33. Introduction to Themes *  A WP Theme is a collection of Template files: HTML + PHP + CSS *  The theme controls the look and feel of your site *  Browse for hundreds of free themes.Website 101 for FRC Teams 33 10/30/2010
  34. 34. Introduction to Plugins " A plugin extends the functionality of WordPress " Find thousands of free plugins here: 101 for FRC Teams 34 10/30/2010
  35. 35. ResourcesWebsite 101 for FRC Teams 35 10/30/2010
  36. 36. Tuning Websites *  Essential FireFox Extensions: *  Yahoo! Yslow: *  Firebug: *  Page Speed: *  SenSeo: http://www.sensational-seo.comWebsite 101 for FRC Teams 36 10/30/2010
  37. 37. Useful Websites * *  The Codex: * 101 for FRC Teams 37 10/30/2010
  38. 38. Cheat Sheets" WP Candy Cheat Sheet - Basic and Advanced" WordPress Functions Cheat Sheet" WordPress SEO Cheat Sheet" WordPress Template Tags Reference Guide" Optimization Cheat Sheet for WordPress" WordPress Visual Cheat Sheet 101 for FRC Teams 38 10/30/2010
  39. 39. Must-Have PluginsPlugin DescriptionAkismet Akismet checks your comments against the Akismet web service to see if they look like spam or not. You need an API key to use it. You can review the spam it catches under "Comments." To show off your Akismet stats just put <?php akismet_counter(); ?> in your template. See also:  WP Stats plugin.AmR iCal Events List Display simple or highly customisable and styleable list of events. Handles all types of recurring events, notes, journals, freebusy etc. Offers links to add events to viewers calendar or subscribe to whole calendar. Write Calendar Page and put [iCal http://yoururl.ics ] where you want the list of events.Contact Form 7 Just another contact form plugin. Simple but flexible.Countdown Timer Add template tags and widget to count down or up to the years, months, weeks, days, hours, minutes, and/or seconds to a particular event.Easing Slider Easing Slider is an image slider which uses the jQuery Easing Plugin. It comes with many different transition and styling settings so youll never have to edit any of the CSS files directly. Images are got from custom fields or Easing Sliders own custom images panel where you can specify particular images via their URL.Website 101 for FRC Teams 39 10/30/2010
  40. 40. Must-Have PluginsPlugin DescriptionEmbedded Video Easy embedding of videos from various portals or local video files with corresponding link. Google Analyticator Adds the necessary JavaScript code to enable Googles Analytics. After enabling this plugin visit the settings page and enter your Google Analytics UID and enable logging.Google XML Sitemaps This plugin will generate a special XML sitemap which will help search engines like Google, Yahoo, Bing and to better index your blog.ICS Calendar A plugin for importing multiple (or one) ICS files from Google, Outlook or iCal into a blog page as an event list or an ajax calendar.Inline Google Maps This plugin shows google maps anywhere on blogpage. Just add a permalink of google map to any text (with images) in a page, set title="googlemap" and youre done. Also works with complex multimarker maps and KML-based maps.Koumpounophobia A plugin for adding custom buttons to the WordPress HTML Editor.Mail From Change the default address that WordPress sends its email from.NextGEN Gallery A NextGENeration Photo gallery for the Web 2.0.NextGEN Smooth Gallery The amazing galery viewer from JonDesigns SmoothGallery for NextGEN Gallery.Website 101 for FRC Teams 40 10/30/2010
  41. 41. Must-Have PluginsPlugin DescriptionPage Links To Allows you to point WordPress pages or posts to a URL of your choosing. Good for setting up navigational links to non-WP sections of your site or to off-site resources.Post-to-Post Links II Using a shortcode, easily link to another post, page, or category in your WordPress blog.Post Notification Sends an email to all subscribers. See Readme2.txt or instructions for details.QuickTime Posting Create QuickTime Object and Embed Tags in postsRedirection Manage all your 301 redirects and monitor 404 errorsShadowbox JS A javascript media viewer similar to Lightbox and Thickbox. Supports all types of media, not just images.Shadowbox JS - Use Title Push the title attribute from the img tag to the anchor tagfrom ImageTinyMCE Advanced Enables advanced features and plugins in TinyMCE, the visual editor in WordPress.Twitter Tools A complete integration between your WordPress blog and Twitter. Bring your tweets into your blog and pass your blog posts to Twitter. Show your tweets in your sidebar, and post tweets from your WordPress admin.Website 101 for FRC Teams 41 10/30/2010
  42. 42. Must-Have PluginsPlugin DescriptionW3 Total Cache The fastest and most complete WordPress performance plugin. Dramatically improve the speed and user experience of your site. Add browser, page, object and database caching as well as minify and content delivery network (CDN) to WordPress.Woopra This plugin adds Woopras real-time analytics to any WordPress installation. Simply sign up at, then activate the plugin!WP-DBManager Manages your WordPress database. Allows you to optimize database, repair database, backup database, restore database, delete backup database , drop/empty tables and run selected queries. Supports automatic scheduling of backing up and optimizing of database.WP-Table Reloaded This plugin allows you to create and easily manage tables in the admin- area of WordPress. A comfortable backend allows an easy manipulation of table data. You can then include the tables into your posts, on your pages or in text widgets by using a shortcode or a template tag function. Tables can be imported and exported from/to CSV, XML and HTML.WP Security Scan Perform security scan of WordPress installation.WP System Health Comprehensive Overview for your WordPress Parameter and Server Performance.Website 101 for FRC Teams 42 10/30/2010