1. Website 101 for FRC Teams
Bob Goetz
FIRST Fare 2010
OCTOBER 30, 2010

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.oregonfirst.org
— www.dinnerandamoviepdx.com
Website 101 for FRC Teams
2
10/30/2010

3. What We will Cover
* Design Principles – or what is
needed to win a FIRST website
award
* Options to create a Website
* Getting Started
* Resources
Website 101 for FRC Teams
3
10/30/2010

4. DESIGN PRINCIPLES
* What
makes
a
good
website?
Website 101 for FRC Teams
4
10/30/2010

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 Starcraft
Website 101 for FRC Teams
5
10/30/2010

6. FRC Website Criteria
Website 101 for FRC Teams
6
10/30/2010

7. Award Winning FRC Website
Website 101 for FRC Teams
7
10/30/2010

8. What you need to start
* 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
Website 101 for FRC Teams
8
10/30/2010

9. Our Options
HTML,
PHP
&
CMS
CSS
Content Management Systems
Website 101 for FRC Teams
9
10/30/2010

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. Getting Started
* Tools you’ll need to setup & run a website
Website 101 for FRC Teams
11
10/30/2010

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. 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. WordPress Installation
* Download WordPress
* Copy files via FTP
* Create database
* Create user
* Connect database to user
* Run setup
* Apply Theme
Website 101 for FRC Teams
14
10/30/2010

15. Step-by-Step Instructions
Website 101 for FRC Teams
15
10/30/2010

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. 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. Step
2
–
Setup
*AMP
* Find
the
Apache
Document
Root:
* Select
Preferences
* Select
Apache
Website 101 for FRC Teams
18
10/30/2010

19. Step
3
–
Create
a
Database
* Click
Open
start
page
Website 101 for FRC Teams
19
10/30/2010

20. Step
3
* Click
phpMyAdmin
Website 101 for FRC Teams
20
10/30/2010

21. Step
3
* Enter
wordpress
and
click
Create
Website 101 for FRC Teams
21
10/30/2010

22. Step
4
–
Get
WordPress
* Download
the
software:
http://wordpress.org/download/
* 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. 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. Step
5
* http://localhost/wordpress
* Click
Create
a
Configuration
File
Website 101 for FRC Teams
24
10/30/2010

25. Step
5
* Click
Let’s
go!
Website 101 for FRC Teams
25
10/30/2010

26. Step
5
* Enter
in
the
information
above,
Click
Submit
Website 101 for FRC Teams
26
10/30/2010

27. Step
5
* Click
Run
the
install
Website 101 for FRC Teams
27
10/30/2010

28. Step
5
* Enter
your
Blog
Title
* Username
* Password
* eMail
* Click
Install
WordPress
Website 101 for FRC Teams
28
10/30/2010

29. Step
5
* Enter
your
credentials
&
Log
in!!!
Website 101 for FRC Teams
29
10/30/2010

30. Step
6
* Installation
done,
almost
there…
Website 101 for FRC Teams
30
10/30/2010

31. Step
6
* You
made
it!!!
Website 101 for FRC Teams
31
10/30/2010

32. Diving into WordPress
Website 101 for FRC Teams
32
10/30/2010

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 http://wordpress.org/extend/themes for
hundreds of free themes.
Website 101 for FRC Teams
33
10/30/2010

34. Introduction to Plugins
" A plugin extends the functionality of WordPress
" Find thousands of free plugins here:
http://wordpress.org/extend/plugins
Website 101 for FRC Teams
34
10/30/2010

35. Resources
Website 101 for FRC Teams
35
10/30/2010

36. Tuning Websites
* 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
Website 101 for FRC Teams
36
10/30/2010

37. Useful Websites
* WordPress.org
* The Codex: http://codex.wordpress.org
* wordpress.tv http://wordpress.tv/
Website 101 for FRC Teams
37
10/30/2010

38. Cheat Sheets
" 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/
Website 101 for FRC Teams
38
10/30/2010

39. Must-Have Plugins
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.
Website 101 for FRC Teams
39
10/30/2010

40. 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.
Website 101 for FRC Teams
40
10/30/2010

41. 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 Push the title attribute from the img tag to the anchor tag
from Image
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.
Website 101 for FRC Teams
41
10/30/2010

42. 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.
Website 101 for FRC Teams
42
10/30/2010