Website 101 for FRC Teams Bob Goetz
FIRST Fare 2010
OCTOBER 30, 2010
� 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.oregonfirst.org � www.dinnerandamoviepdx.com
10/30/2010 Website 101 for FRC Teams 2
Who am I?
* Design Principles – or what is needed to win a FIRST website award
* Options to create a Website
* Getting Started
* Resources 10/30/2010 Website 101 for FRC Teams 3
What We will Cover
* What makes a good website?
10/30/2010 Website 101 for FRC Teams 4
DESIGN PRINCIPLES
* 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 Starcraft 10/30/2010 Website 101 for FRC Teams 5
Reasons FIRST Team Members SURF The Internet
10/30/2010 Website 101 for FRC Teams 6
FRC Website Criteria
10/30/2010 Website 101 for FRC Teams 7
Award Winning FRC Website
* Domain Name Registration o http://www.icann.org/en/registrars/accredited-
list.html
* Hosting account. You generally have three options: o Managed Hosting o Un-managed hosting o Self Hosted
10/30/2010 Website 101 for FRC Teams 8
What you need to start
HTML, PHP & CSS
CMS
10/30/2010 Website 101 for FRC Teams 9
Our Options
Content Management Systems
HTML, PHP & CSS
Extremely customizable
No built-‐in rights mgmt
Must code for different browsers
Content tied to code
Must code database/file support
Need to roll your own PHP code
CMS
Easier to install & use
Multiple users with variable rights
Customizable
WYSWYG
No need to know HTML/CSS
Content separate from code
Built in database support 10/30/2010 Website 101 for FRC Teams 10
Our Options
Content Management Systems
* Tools you’ll need to setup & run a website
10/30/2010 Website 101 for FRC Teams 11
Getting Started
* Prepackaged pache webserver
ySQL database
HP/Python/Perl
* Versions: AMP for Linux
AMP for Macs
AMP for Windows
10/30/2010 Website 101 for FRC Teams 12
*-A-M-P
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.
* FTP Client (e.g. Filezilla)
* Text Editor (e.g Text Wrangler or Edit Pad)
10/30/2010 Website 101 for FRC Teams 13
Tools
* Download WordPress
* Copy files via FTP
* Create database
* Create user
* Connect database to user
* Run setup
* Apply Theme
10/30/2010 Website 101 for FRC Teams 14
WordPress Installation
10/30/2010 Website 101 for FRC Teams 15
Step-by-Step Instructions
* Install *AMP
* Find the Apache Document Rroot * /Users/bob/Documents/
htdocs
10/30/2010 Website 101 for FRC Teams 16
Step 1 – using *AMP
Step 2 – Setup *AMP * Set the Ports to Default * Select Preferences * Select Ports * Select Set to default Apache and MySQL Ports
10/30/2010 Website 101 for FRC Teams 17
* Find the Apache Document Root: * Select Preferences * Select Apache
10/30/2010 Website 101 for FRC Teams 18
Step 2 – Setup *AMP
* Click Open start page
10/30/2010 Website 101 for FRC Teams 19
Step 3 – Create a Database
10/30/2010 Website 101 for FRC Teams 20
Step 3
* Click phpMyAdmin
10/30/2010 Website 101 for FRC Teams 21
Step 3
* Enter wordpress and click Create
* Download the software: http://wordpress.org/download/
* Unzip the software to the Apache Root Document Folder (see step 3 for the location)
10/30/2010 Website 101 for FRC Teams 22
Step 4 – Get WordPress
* Open a broswer (FIreFox, Chrome, IE, Safari, etc.)
* Go to: http://localhost/wordpress
10/30/2010 Website 101 for FRC Teams 23
Step 5 – The Five Minute Install
* http://localhost/wordpress
10/30/2010 Website 101 for FRC Teams 24
Step 5
* Click Create a Configuration File
10/30/2010 Website 101 for FRC Teams 25
Step 5
* Click Let’s go!
10/30/2010 Website 101 for FRC Teams 26
Step 5
* Enter in the information above, Click Submit
10/30/2010 Website 101 for FRC Teams 27
Step 5
* Click Run the install
10/30/2010 Website 101 for FRC Teams 28
Step 5
* Enter your Blog Title * Username * Password * eMail * Click Install WordPress
10/30/2010 Website 101 for FRC Teams 29
Step 5
* Enter your credentials & Log in!!!
10/30/2010 Website 101 for FRC Teams 30
Step 6
* Installation done, almost there…
10/30/2010 Website 101 for FRC Teams 31
Step 6
* You made it!!!
10/30/2010 Website 101 for FRC Teams 32
Diving into WordPress
* A WP Theme is a collection of Template files: HTML + PHP + CSS
* The theme controls the look and feel of your site
* Browse http://wordpress.org/extend/themes for hundreds of free themes.
10/30/2010 Website 101 for FRC Teams 33
Introduction to Themes
" A plugin extends the functionality of WordPress " Find thousands of free plugins here:
http://wordpress.org/extend/plugins
10/30/2010
Website 101 for FRC Teams
34
Introduction to Plugins
10/30/2010 Website 101 for FRC Teams 35
Resources
* Essential FireFox Extensions:
* Yahoo! Yslow: http://developer.yahoo.com/yslow
* Firebug: http://getfirebug.com * Page Speed:
http://code.google.com/speed/page-speed * SenSeo: http://www.sensational-seo.com
10/30/2010 Website 101 for FRC Teams 36
Tuning Websites
* WordPress.org * The Codex: http://codex.wordpress.org * wordpress.tv http://wordpress.tv/
10/30/2010 Website 101 for FRC Teams 37
Useful Websites
" WP Candy Cheat Sheet - Basic and Advanced http://wpcandy.com/articles/tutorials/the-wordpress-help-sheet.html http://wpcandy.com/articles/tutorials/the-advanced-wordpress-help-sheet.html
" WordPress Functions Cheat Sheet http://net.tutsplus.com/freebies/cheat-sheets/wordpress-cheat-sheat/
" WordPress SEO Cheat Sheet http://www.tekka.de/seo-for-wordpress/cheat-sheet-seo-for-wordpress.pdf
" WordPress Template Tags Reference Guide http://www.dbswebsite.com/design/wordpress-reference/
" Optimization Cheat Sheet for WordPress http://codex.wordpress.org/WordPress_Optimization/Cheat_Sheet
" WordPress Visual Cheat Sheet http://woorkup.com/2009/11/01/wordpress-visual-cheat-sheet/
10/30/2010 Website 101 for FRC Teams 38
Cheat Sheets
Plugin Description
Akismet 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 you'll never have to edit any of the CSS files directly. Images are got from custom fields or Easing Slider's own 'custom images' panel where you can specify particular images via their URL.
10/30/2010 Website 101 for FRC Teams 39
Must-Have Plugins
Plugin Description
Embedded Video Easy embedding of videos from various portals or local video files with corresponding link.
Google Analyticator Adds the necessary JavaScript code to enable Google's 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 Ask.com 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 you're 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 it's email from. NextGEN Gallery A NextGENeration Photo gallery for the Web 2.0. NextGEN Smooth Gallery The amazing galery viewer from JonDesign's SmoothGallery for NextGEN
Gallery. 10/30/2010 Website 101 for FRC Teams 40
Must-Have Plugins
Plugin Description
Page 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 posts Redirection Manage all your 301 redirects and monitor 404 errors Shadowbox JS A javascript media viewer similar to Lightbox and Thickbox. Supports all
types of media, not just images. Shadowbox JS - Use Title from Image
Push the title attribute from the img tag to the anchor tag
TinyMCE 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.
10/30/2010 Website 101 for FRC Teams 41
Must-Have Plugins
Plugin Description
W3 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 Woopra's real-time analytics to any WordPress installation. Simply sign up at Woopra.com, 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. 10/30/2010 Website 101 for FRC Teams 42
Must-Have Plugins
Top Related