Download Web Sites

Four Ways to
Set up and Maintain
Chapter Web Sites
Paul Wesling, SFBA Council
Communications Director and Webmaster
SF Bay Area Council Officer Training
Mountain 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, welldocumented
HTML 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, events
The e-GRID gives engineers a summary,
but then it has a link to what your chapter
has put on the Web
Google/Bing/Yahoo can crawl your site
and index it
History
Old-fashioned websites were crafted in
HTML (Hypertext Markup Language)
Problems of training, coordination
Better: 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 supported
Install on your own server, or use EWH
Easy to get started; easy to manage
Don’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 WordPress
Some 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 editors
Sitemap generation
Spam protection
Easy table creation and management
Google Map integration
Limitation: 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)
Set this once – may
show more options
Click here
to start
To start a
NEW page
Click, to
sort by
column
See who
started this
Page
To edit an
existing page
Editing a Page
(WYSIWYG and HTML modes)
Make the
Permalink
Shorter
Limited set of
Formatting
Choices
HTML Editing,
touch-up
WYSIWYG
View
After an Edit
Click UPDATE to
make change
permanent
Then:
Best to view finished
page in several browsers
(IE, Firefox, Chrome) –
hit REFRESH button
Menus
Can also add
custom links as
Menu items – eg,
link to GRID website
To add a page:
click here –
then look for it at
the foot of the Menu
When finished,
click SAVE
Menu Structure:
Drag-and-Drop
to re-arrange
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/feel
Painfully slow response times (3 to 5 sec.)
Standard CMS features:
– Same methods are used
– multiple editors allowed
Social Networking
Links
Navigation
Post date confusing –
should be suppressed
Sidebar
Main (blog)
Column
CS Website:
Archives, About Us
Good way to
handle past
meeetings
Left
Sidebar
Main (blog)
Column
Right
Sidebar
Sites: Nanotechnology Chapter
Left
Sidebar
Meetings and
Other Announcements
Typical blog
Push-down mode
Could use a better
way to handle past
Meetings …
Main (blog)
Column
(Some do it wrong) Use good web design:
Make your most important info prominent
Next meetings are
hidden down here
Visitor looks
here, sees
meeting is over
or not listed
Footer cuts off
sidebar
vTools: “Web in a Box”
CMS: multiple editors for chapter site
Easy setup and administration
Low amount of flexibility;
good basic structure, not flashy
Built-in Announcements/Meetings system
Can coordinate with vTools Registration
system; can accept credit cards
Help: http://web.vtools.ieee.org/
Tutorial: sites.ieee.org/vtools/webinabox-tutorials
Web in a Box: MTT Chapter
no
Sidebars
Single Center
Column
Officers pulled
From IEEE database
Web in a Box: MTT Chapter
Good step-by-step Tutorial/Help files (PPT/PDF)
Good Ol’ HTML
Your site can be hand-crafted
Content can be distinct from format/
presentation using HTML5/CSS3/javascript
Performance is excellent; fast page loads
Doesn’t have a modern look
Limited 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 GRID
Column of rotating
banner ads
all HTML - Special content/formatting needs
Three columns of
Chapter meetings
Simple; lightweight; fast
Updated in seconds
from 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 study
Check 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 assist
Ask me for a referral!
Thanks for your attention …
Paul Wesling, [email protected]