IntroductionsElissa Thomas, Stephen Eggers, Abby NafzigerHandsOn Tech AmeriCorp VISTAServing at NPower NWvistastaff@npowernw.org
IntroductionsNameOrganizationMy biggest challenge for my nonprofits website is________________________My biggest success for my nonprofits website is________________________
How websites work1. Web pages are stored on a web server (think of a computer or server) far, far away2. A web browser (Internet Explorer, Firefox, etc) asks for a web page3. The web server gives a web page back graphic from www.ccseo.com
Vocab (for your records)Web site: a collection of web pages, documents and multi-media files that are storedon a server on the Internet called a host server.Web page: a simple text file that contains text and HTML tags that describe how thetext and images are formatted on your screen.HTML: a set of HTML tags are simple instructions that tell a web browser how a webpage should look. The tags tell the browser to do things like change the font size orcolor, or arrange things in columns.Web browser: (like Internet Explorer, Firefox, Chrome) interprets HTML tags anddecides how to format the text and images.Web server: delivers web pages to web browsers over the Internet when called on.Domain name: the location of a website and its files on the Internet.File transfer protocol (FTP): used to transfer files over the Internet.Web Content Management System (CMS): software or tool that allows a user topublish content online, usually with an intuitive interface, often using a web browser.
Content Management SystemsWeb CMS: Software installed on a web server that is designed tointegrate features like blogs, forums, and wikis into a seamless userexperience. Most content management systems have user-friendlyinterfaces accessible from any web browser and a WYSIWYG ("whatyou see is what you get") editor.
CMSs we wont cover todayThese frameworks generally require a consultant toconfigure
CMSs we will coverThese frameworks have a gentle learning curve. Easy touse, but also powerful
WordPress -- a much easier CMS● For adding timely content regularly.● Easy interface.● Large directory of "plugins" available.● Volunteers can customize if needed.● Allows for multiple user accounts with different permissions.● No need for FTP. An example of a WordPress site
WordPress - the Dashboard All your functions are on the left-hand sidebar
Hands-on with WordPress1. Go to the link in your email account -- for example: http://www. testsite.net/test1/wp-login.php2. Log in using the username and password in your email account (contributor1, contributor2, contributor3, or editor1) Activity #1: ● Contributors! Create 2 posts to add content to the site and submit for review. ● Editors! Review the posts and approve them if you want. If you have time, feel free to create your own post (s)!
More hands-on with WordPressActivity #2: Log out, then log back in using your new username (admin2, 3, 4, 5, or 6) and password● Admin2: Select a new theme (Appearance -> Themes)● Admin3: Add a new page -- not post● Admin4: Create new user accounts (Users -> Add New)● Admin5: Delete the "Recent Comments" sidebar section (Appearance -> Widgets)● Admin6: Rename the website and tagline (Settings -> General)
10 minute break Meet back at 11:00 image by roboppy (flickr)
Best Practices1. Simple, accessible design with easy page navigation2. Nonprofit mission is readily apparent to website visitors example3. Action links are prominently displayed on your home page (Subscribe to Newsletter, Volunteer, Donate) example4. Contact page, preferably with staff pictures example5. Visitor tracking in place to collect metrics Our next Google Analytics class is 7/11/2012
Depending on goals, some extras ...1. Improve your sites search engine optimization (class: 7/18)2. Social media icons are on home page3. A news section or blog provides updates example4. Consistent branding of logos, color schemes, etc example Bonus points for amazing graphics and multimedia content: videos, interactive maps, graphs, third-party widgets
Google Sites● Easy to update● Static pages● Free for anyone with a Google account● Can embed multimedia, blogs, maps, calendars, documents, etc.
Hands-on with Google Sites1. Log into your Google account.2. Choose "Sites" from the menu at the top or go directly to: http://sites.google.comActivity:● Click "create" and select a design template.● Add 2 new pages, titled whatever you want.● Insert 1 image and 1 link. Insert more items if you like!● Share the URL with the person next to you via email.
Resources● TechSoup.org section on web building● NTENs websites section● Idealware websites section● NPower Northwests Knowledge Center● WordPress.org and WordPress.com● Google Sites tutorial (and another)● 11 website design best practices for nonprofits● How to create web content that works● Principles for an effective nonprofit website● DreamHost -- free web hosting for nonprofits
Any questions? Is that it?!photo by http://www.flickr.com/photos/plasticrevolver/164351244/