2. Website 101 for FRC Teams
2
Who am I?
— Mentor teams 1510, 2898
— Seven year veteran of FIRST
— Robot Inspector
— Board member for Oregon FIRST Robotics
— 20+ year IT guy
— Webmaster for several websites, including
— www.oregonfirst.org
— www.dinnerandamoviepdx.com
3. Website 101 for FRC Teams
3
What We will Cover
" Options to create a Website
" Getting Started
" Resources
4. Website 101 for FRC Teams
4
Our Options
HTML, PHP CMS
& CSS Content Management Systems
5. Website 101 for FRC Teams
5
Our Options
HTML, PHP & CSS CMS
Content Management Systems
Extremely customizable Easier to install & use
No built-in rights mgmt Multiple users with variable rights
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
7. Website 101 for FRC Teams
7
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
9. Website 101 for FRC Teams
9
WordPress.com
" Hosted
" You use the WordPress.com system
" Your URL is foo.WordPress.com
" Enhanced services allow you to use your
domain name
" Can only use approved themes and plug-ins
10. Website 101 for FRC Teams
10
WordPress.org
" Self-Hosted
" Open Source, free to download
" 5-Minute Install
" http://codex.WordPress.org/Installing_WordPress#Famous_5-Minute_Install
" Requirements:
" Web Host – YourDomain.com
" Web Database provided by your host
" FTP access
" HTML or Text Editor
" Some general knowledge of computer file structures
11. Website 101 for FRC Teams
11
Installing WordPress
" After you have a domain name
" After you have a host
" Now you can install WordPress
12. Website 101 for FRC Teams
12
Tools
" FTP Client (e.g. Filezilla, Transmit)
" Text Editor (e.g Coda)
13. Website 101 for FRC Teams
13
WordPress Installation
" Download WordPress
" Copy files via FTP
" Create database
" Create user
" Connect database to user
" Run setup
" Apply Theme
15. Website 101 for FRC Teams
15
Step 1 - Domain Name
" Set up a domain name on your web host account.
16. Website 101 for FRC Teams
16
Step 2 - Database
" One click Database setup – MySql Administration
17. Website 101 for FRC Teams
17
Step 2 - MySql
DB
" Create your database.
" Description (Name your Database)
" Choose MySql Version (choose latest – 5.0)
" Enter a Password, re-enter (write it down!)
" Set-up
18. Website 101 for FRC Teams
18
Step 2 - MySQL DB info
" Save
your
DB
info,
you’ll
need
it
later
19. Website 101 for FRC Teams
19
Step 3 – Get WordPress
" Download the software:
http://WordPress.org/download/
" Unzip the software
20. Website 101 for FRC Teams
20
Step 3 - Download WordPress
" WordPress.org
" .zip (PC)
" tar.gz (Mac)
21. Website 101 for FRC Teams
21
Step 3 - Extract Files
" Double click on file to extract
22. Website 101 for FRC Teams
22
Step 3 - WordPress Files
" Review contents of
WordPress folder
" Look for wp-config-
sample.php
23. Website 101 for FRC Teams
23
Step 3 - wp-config.php
" Open wp-config-
sample.php
" Add DB information
" Save to /WordPress
directory as wp-
config.php
(removed the word
“sample”)
25. Website 101 for FRC Teams
25
Step 4 - Upload to your Host
" Log-in to host
account via FTP
" Upload
“WordPress”
folder to main
directory.
" You can rename
“blog” or “site”
now. Not later.
26. Website 101 for FRC Teams
26
Step 5 – The Five Minute Install
" Open a broswer (FireFox, Chrome, IE, Safari,
etc.)
" Open browser to:
http://yourdomain.com/wordpress/wp-admin/
install.php)
Or yourdomain.com/blog/…
Or yourdomain.com/site/…
27. Website 101 for FRC Teams
27
Step 5
" Enter your
Blog Title
" Username
" Password
" eMail
" Click Install
WordPress
28. Website 101 for FRC Teams
28
Step 5
" Enter your credentials & Log in!!!
29. Website 101 for FRC Teams
29
Step 6 - Login
" Installation done, almost there…
35. Website 101 for FRC Teams
35
Personalize WordPress
" Three simple ways to customize and personalize
your website:
" Themes
" Widgets
" Plugins
36. Website 101 for FRC Teams
36
" Themes
" Controls the overall color palette, images, size,
placement of content
" Site has one theme
" Widgets
" Allows specialized content and features, placed in
special “containers” based on the theme
" Plugins
" Changes the functions and workings of WordPress
37. Website 101 for FRC Teams
37
Introduction to Themes
" A WP Theme is a collection of Template files -
(X)HTML + PHP + CSS
" The CSS (aka stylesheet) usually controls the
layout and design
" http://WordPress.org/extend/themes contains
over 1,400 free themes
" Most have options to customize the theme
39. Website 101 for FRC Teams
39
Introduc:on
to
Widgets
" Widgets can be
used in sidebars
" Widgets perform
various functions
outside scope of
main system
" Widgets are
flexible and can
be moved up or
down in a
sidebar
40. Website 101 for FRC Teams
40
Introduction to Plugins
" A plugin
extends the
functionality of
WordPress
" Find thousands
of free plugins
here:
http://
WordPress.org/
extend/plugins
43. Website 101 for FRC Teams
43
WordPress Content
Post Page
" Individual entries within a " Pages are just what they
blog, they can include sound like - whole pages
things like:
on a site
" The title of the entry, the " Meant to be used for static
date, tags, categories, content - content that
comments
rarely changes
" Typical blog entries, but
" Example : the about page
can also be any dynamic
content (events list, etc.)
49. Website 101 for FRC Teams
49
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.
50. Website 101 for FRC Teams
50
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.
51. Website 101 for FRC Teams
51
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.
52. Website 101 for FRC Teams
52
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.
