First fare 2010 website 101 for frc teams
-
Upload
oregon-first-robotics -
Category
Technology
-
view
632 -
download
0
Transcript of First fare 2010 website 101 for frc teams
![Page 1: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/1.jpg)
Website 101 for FRC Teams Bob Goetz
FIRST Fare 2010
OCTOBER 30, 2010
![Page 2: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/2.jpg)
� 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?
![Page 3: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/3.jpg)
* 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
![Page 4: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/4.jpg)
* What makes a good website?
10/30/2010 Website 101 for FRC Teams 4
DESIGN PRINCIPLES
![Page 5: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/5.jpg)
* 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
![Page 6: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/6.jpg)
10/30/2010 Website 101 for FRC Teams 6
FRC Website Criteria
![Page 7: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/7.jpg)
10/30/2010 Website 101 for FRC Teams 7
Award Winning FRC Website
![Page 8: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/8.jpg)
* 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
![Page 9: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/9.jpg)
HTML, PHP & CSS
CMS
10/30/2010 Website 101 for FRC Teams 9
Our Options
Content Management Systems
![Page 10: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/10.jpg)
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
![Page 11: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/11.jpg)
* Tools you’ll need to setup & run a website
10/30/2010 Website 101 for FRC Teams 11
Getting Started
![Page 12: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/12.jpg)
* 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.
![Page 13: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/13.jpg)
* FTP Client (e.g. Filezilla)
* Text Editor (e.g Text Wrangler or Edit Pad)
10/30/2010 Website 101 for FRC Teams 13
Tools
![Page 14: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/14.jpg)
* 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
![Page 15: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/15.jpg)
10/30/2010 Website 101 for FRC Teams 15
Step-by-Step Instructions
![Page 16: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/16.jpg)
* Install *AMP
* Find the Apache Document Rroot * /Users/bob/Documents/
htdocs
10/30/2010 Website 101 for FRC Teams 16
Step 1 – using *AMP
![Page 17: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/17.jpg)
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
![Page 18: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/18.jpg)
* Find the Apache Document Root: * Select Preferences * Select Apache
10/30/2010 Website 101 for FRC Teams 18
Step 2 – Setup *AMP
![Page 19: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/19.jpg)
* Click Open start page
10/30/2010 Website 101 for FRC Teams 19
Step 3 – Create a Database
![Page 20: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/20.jpg)
10/30/2010 Website 101 for FRC Teams 20
Step 3
* Click phpMyAdmin
![Page 21: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/21.jpg)
10/30/2010 Website 101 for FRC Teams 21
Step 3
* Enter wordpress and click Create
![Page 22: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/22.jpg)
* 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
![Page 23: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/23.jpg)
* 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
![Page 24: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/24.jpg)
* http://localhost/wordpress
10/30/2010 Website 101 for FRC Teams 24
Step 5
* Click Create a Configuration File
![Page 25: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/25.jpg)
10/30/2010 Website 101 for FRC Teams 25
Step 5
* Click Let’s go!
![Page 26: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/26.jpg)
10/30/2010 Website 101 for FRC Teams 26
Step 5
* Enter in the information above, Click Submit
![Page 27: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/27.jpg)
10/30/2010 Website 101 for FRC Teams 27
Step 5
* Click Run the install
![Page 28: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/28.jpg)
10/30/2010 Website 101 for FRC Teams 28
Step 5
* Enter your Blog Title * Username * Password * eMail * Click Install WordPress
![Page 29: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/29.jpg)
10/30/2010 Website 101 for FRC Teams 29
Step 5
* Enter your credentials & Log in!!!
![Page 30: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/30.jpg)
10/30/2010 Website 101 for FRC Teams 30
Step 6
* Installation done, almost there…
![Page 31: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/31.jpg)
10/30/2010 Website 101 for FRC Teams 31
Step 6
* You made it!!!
![Page 32: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/32.jpg)
10/30/2010 Website 101 for FRC Teams 32
Diving into WordPress
![Page 33: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/33.jpg)
* 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
![Page 34: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/34.jpg)
" 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
![Page 35: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/35.jpg)
10/30/2010 Website 101 for FRC Teams 35
Resources
![Page 36: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/36.jpg)
* 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
![Page 37: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/37.jpg)
* WordPress.org * The Codex: http://codex.wordpress.org * wordpress.tv http://wordpress.tv/
10/30/2010 Website 101 for FRC Teams 37
Useful Websites
![Page 38: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/38.jpg)
" 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
![Page 39: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/39.jpg)
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
![Page 40: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/40.jpg)
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
![Page 41: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/41.jpg)
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
![Page 42: First fare 2010 website 101 for frc teams](https://reader033.fdocuments.net/reader033/viewer/2022052900/555a7ab2d8b42abb628b4758/html5/thumbnails/42.jpg)
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