first fare 2011 website 101 for frc teams

Websites with WordPress

for FRC Teams

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

Website 101 for FRC Teams 2

What We will Cover

"  Options to create a Website

"  Getting Started

"  Resources

Website 101 for FRC Teams 3

Our Options

HTML, PHP & CSS

CMS

Website 101 for FRC Teams 4

Content Management Systems

Our Options

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

Website 101 for FRC Teams 5

Content Management Systems

Website 101 for FRC Teams 6

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 7

Website 101 for FRC Teams 8

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

Website 101 for FRC Teams 9

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

Website 101 for FRC Teams 10

Installing WordPress

"   After you have a domain name

"   After you have a host

"   Now you can install WordPress

Website 101 for FRC Teams 11

Tools

"   FTP Client (e.g. Filezilla, Transmit)

"   Text Editor (e.g Coda)

Website 101 for FRC Teams 12

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 13

Step-by-Step Instructions

Website 101 for FRC Teams 14

Step 1 - Domain Name

"   Set up a domain name on your web host account.

Website 101 for FRC Teams 15

Step 2 - Database

"   One click Database setup – MySql Administration

Website 101 for FRC Teams 16

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

Website 101 for FRC Teams 17

Step 2 - MySQL DB info

"   Save  your  DB  info,  you’ll  need  it  later  

Website 101 for FRC Teams 18

Step 3 – Get WordPress

"   Download the software: http://WordPress.org/download/

"   Unzip the software

Website 101 for FRC Teams 19

Step 3 - Download WordPress

" WordPress.org  

"   .zip (PC)

" tar.gz (Mac)

Website 101 for FRC Teams 20

Step 3 - Extract Files

"   Double click on file to extract

Website 101 for FRC Teams 21

Step 3 - WordPress Files

"   Review contents of WordPress folder

"   Look for wp-config-sample.php

Website 101 for FRC Teams 22

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”)

Website 101 for FRC Teams 23

Step 3 - wp-config.php

"   Security feature

"   Authentication Key

" https://api.WordPress.org/secret-key/1.1/

"  Visit link, copy paste results

Website 101 for FRC Teams 24

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.

Website 101 for FRC Teams 25

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/…

Website 101 for FRC Teams 26

Step 5

Website 101 for FRC Teams 27

"   Enter your Blog Title

"   Username

"   Password

" eMail

"   Click Install WordPress

Step 5

"   Enter your credentials & Log in!!!

Website 101 for FRC Teams 28

Step 6 - Login

"   Installation done, almost there…

Website 101 for FRC Teams 29

Step 6 – The Dashboard

Website 101 for FRC Teams 30

Diving into WordPress

Website 101 for FRC Teams 31

Some WordPress Basics

"   Content

"   Structure

"   Database

Website 101 for FRC Teams 32

Database ➜

Scripting Language ➜

Markup Language ➜

Structure Presentation

Dynamic Functions

Data

Website 101 for FRC Teams 33

WordPress Layout

Website 101 for FRC Teams 34

Personalize WordPress

"   Three simple ways to customize and personalize your website:

"   Themes

"  Widgets

"  Plugins

Website 101 for FRC Teams 35

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

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

Website 101 for FRC Teams 37

Free Themes

Website 101 for FRC Teams 38

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

Website 101 for FRC Teams 39

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 40

Shameless plug goes here.

Website 101 for FRC Teams 41

Website 101 for FRC Teams 42

WordPress Content

Post

"   Individual entries within a blog, they can include things like:

"   The title of the entry, the date, tags, categories, comments

"   Typical blog entries, but can also be any dynamic content (events list, etc.)

Page

"   Pages are just what they sound like - whole pages on a site

"   Meant to be used for static content - content that rarely changes

"   Example : the about page

Website 101 for FRC Teams 43

Post Page

Website 101 for FRC Teams 44

Resources

Website 101 for FRC Teams 45

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

" Other tools:

" http://browserlab.adobe.com

Website 101 for FRC Teams 46

Useful Websites

" WordPress.org

"   The Codex: http://codex.WordPress.org

" WordPress.tv http://WordPress.tv/

Website 101 for FRC Teams 47

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 48

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.

Website 101 for FRC Teams 49

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.

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 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.

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.