Four Ways to Set up and Maintain Chapter Web Sites

Paul Wesling, SFBA Council Communications Director and Webmaster

SF Bay Area Council Officer TrainingMountain View, CA

January 25, 2014

Outline

Content-Management System (CMS)–WordPress Websites: the Gold Standard–WordPress on IEEE’s EWH Servers– IEEE’s WordPress “Sites”: specialized

WordPress Installations

IEEE’s “Web in a Box”: Simple, well-documentedHTML Editing (eg, with Dreamweaver)Ones NOT to use: MS WORD!

2

Why Do We Need a Website?

Engineers need to find out about your meetings, seminars, eventsThe e-GRID gives engineers a summary, but then it has a link to what your chapter has put on the WebGoogle/Bing/Yahoo can crawl your site and index it

History

Old-fashioned websites were crafted in HTML (Hypertext Markup Language)Problems of training, coordinationBetter: a system to manage the various content elements: a Content Management System (CMS)– Keeps the various “parts” in a database– Creates the web pages “on the fly”

A Chapter needs the ability to allow several Editors to work independently to update certain pages

WordPress (CMS: Content-Mgmt System)

Free, Open-Source, well supportedInstall on your own server, or use EWHEasy to get started; easy to manageDon’t need to know HTML (but it can help)It is editable by multiple authors:– No “single point of failure” or “bottleneck”

IEEE Chapter Templates readily available– Jared can set up one for you on EWH– You can see what others have done– Pick/implement features you want

IEEE’s WordPressSome features of IEEE’s WordPress installations:

Integrated web analytics (no need to sign up with Google Analytics) Official IEEE WordPress themes compliant with IEEE web presence guidelines (no need for complex HTML templates) Easy Integration with social networks (e.g., Facebook, Twitter and LinkedIn) Page and blog post version control Simple password protection Secure login for multiple editorsSitemap generation Spam protection Easy table creation and management Google Map integrationLimitation: Can’t add your own plug-in’s.

Any WordPress Installation

Download the great IEEE 85-page WordPress guide:sites.ieee.org/files/2011/04/WordPress-Editors-Guide-WL.pdf Good books for your Administrator:– WordPress: The Missing Manual (2012)– WordPress Web Design For Dummies (2013)

WordPress Administrator’s View(webmaster, chair, prgm chair, vice-chair)

Your Home Page (actually, a Post) is here

Add/edit static pages here

Your sidebars, footers are here

Select menu types, add page to menu, move

page within menu

Add/Edit a Page (ie, not Home Page)

Click hereto start

To start a NEW page

To edit an existing page

Set this once – may show more options

Click, to sort by column

See who started this

Page

Editing a Page (WYSIWYG and HTML modes)

Make the Permalink

Shorter

WYSIWYG ViewHTML Editing,

touch-up

Limited set of Formatting

Choices

After an Edit

Then:

Click UPDATE to make change

permanent

Best to view finished page in several browsers (IE, Firefox, Chrome) – hit

REFRESH button

Menus Menu Structure:Drag-and-Dropto re-arrange

To add a page:click here –

then look for it atthe foot of the Menu

When finished, click SAVE

Can also add custom links as

Menu items – eg, link to GRID website

Getting Started

If you already have an EWH WordPress site– Ask your Webmaster to add you, as editor– Download and print/use the Tutorial– Considering learning basic HTML

To upgrade to WordPress– Either ask Jared to make a new instantiation– Or, get a “sites.ieee.org” instantiation,

from the IEEE website (next demonstration)

sites.ieee.org A WordPress environment

Best-looking solution; standard look/feelPainfully slow response times (3 to 5 sec.)Standard CMS features:– Same methods are used– multiple editors allowed

Post date confusing –should be suppressed

Sidebar

Navigation

Main (blog) Column

Social NetworkingLinks

CS Website: Archives, About Us

Good way to handle past meeetings

LeftSidebar

RightSidebar

Main (blog) Column

Sites: Nanotechnology Chapter

LeftSidebar

Meetings and Other Announcements

Typical blogPush-down mode

Main (blog) Column

Could use a betterway to handle pastMeetings …

(Some do it wrong) Use good web design:Make your most important info prominent

Next meetings arehidden down here

Visitor lookshere, sees

meeting is overor not listed

Footer cuts off sidebar

vTools: “Web in a Box”

CMS: multiple editors for chapter siteEasy setup and administrationLow amount of flexibility;good basic structure, not flashyBuilt-in Announcements/Meetings systemCan coordinate with vTools Registrationsystem; can accept credit cardsHelp: http://web.vtools.ieee.org/Tutorial: sites.ieee.org/vtools/webinabox-tutorials

Web in a Box: MTT Chapterno

Sidebars

Single CenterColumn

Officers pulledFrom IEEE database

Web in a Box: MTT ChapterGood step-by-step Tutorial/Help files (PPT/PDF)

Good Ol’ HTML

Your site can be hand-craftedContent can be distinct from format/ presentation using HTML5/CSS3/javascriptPerformance is excellent; fast page loadsDoesn’t have a modern lookLimited to only one Webmaster at a time– Difficult to coordinate multiple editors

Not suggested, for Chapters– Upgrade (over the summer) to WordPress

CPMT Chapter

Navigation

Free-form multiple columns

The SFBA Council GRIDall HTML - Special content/formatting needs

Column of rotating banner ads

Three columns of Chapter meetings

Simple; light-weight; fast

Updated in secondsfrom Dreamweaver

Next Steps

See how your current website is being handled:– Is it working well for you?– Are changes needed?– New features?

If it’s WordPress already, you now know can access the tools to making it better!If it’s old-fashioned HTML, this could be the time for a change.

For more information …

Download one or more Tutorials, to studyCheck out some chapter sites in SCV:– www.ewh.ieee.org/r6/scv/chapters.html

– See what some others look like

Contact that Chapter’s webmaster, to see if s/he can assistAsk me for a referral!

Thanks for your attention …Paul Wesling, p.wesling@ieee.org