first fare 2010 website 101 for frc teams

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?


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


FRC Website Criteria


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


What you need to start

HTML, PHP & CSS

CMS


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


Getting Started

*  Prepackaged pache webserver

ySQL database

HP/Python/Perl

*  Versions: AMP for Linux

AMP for Macs

AMP for Windows


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


Tools

*  Download WordPress

*  Copy files via FTP

*  Create database

*  Create user

*  Connect database to user

*  Run setup

*  Apply Theme


WordPress Installation


Step-by-Step Instructions

*  Install *AMP

*  Find the Apache Document Rroot *  /Users/bob/Documents/

htdocs


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


*  Find the Apache Document Root: *  Select Preferences *  Select Apache


Step 2 – Setup *AMP

*  Click Open start page


Step 3 – Create a Database


Step 3

* Click phpMyAdmin


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)


Step 4 – Get WordPress

*  Open a broswer (FIreFox, Chrome, IE, Safari, etc.)

*  Go to: http://localhost/wordpress


Step 5 – The Five Minute Install

* http://localhost/wordpress


Step 5

* Click Create a Configuration File


Step 5

* Click Let’s go!


Step 5

* Enter in the information above, Click Submit


Step 5

* Click Run the install


Step 5

* Enter your Blog Title * Username * Password * eMail * Click Install WordPress


Step 5

* Enter your credentials & Log in!!!


Step 6

* Installation done, almost there…


Step 6

*  You made it!!!


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.


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


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


Tuning Websites

*  WordPress.org *  The Codex: http://codex.wordpress.org *  wordpress.tv http://wordpress.tv/


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/


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.


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.


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

first fare 2010 website 101 for frc teams

Technology

frc website criteriawebsite

frc teams9

frc teams2410302010

frc teams1710302010

frc teams1910302010

frc teams610302010

frc teams3210302010

frc teams20