posting and editing cheat sheet”

Hawley Communications Committee (HCC) Hawley, Massachusetts 01339

Hawley Communications Committee Minutes – of 2

Meeting Minutes of: Hawley Communications Committee Meeting re: Town Website, http://www.townofhawley.com, Saturday, 2/23/13.

Meeting began at: 2:20 PM

Present: Kirby Thwing, Jr., Thom White, Jason Velazquez, Rick Kean. Jason had to leave the meeting at 3:10 pm because of a conflicting commitment. A quorum was present throughout the meeting.

Absent: No one. Former member Pete Mitchell had tendered his resignation via email prior to the meeting.

Others present: Virginia Gabbert

Citizen comments: None.

Documents provided:

Three: Meeting Agenda (attached), training handout entitled, “Web Page Posting and Editing Cheat Sheet” (attached) and two draft pages for the Town website (not attached – incomplete, work in progress). Technology was provided by the Committee Chair and the Town Office to project live images of the Hawley website on the wall, so that training and live website HTML creation and editing could be viewed by all.

Vote to approve minutes:

N/A re: prior meetings. Minutes of this meeting will have been approved by the Committee members via email prior to submission to the Town.

Purpose of the meeting:

1. The primary objective of this meeting was to provide password access and train two members of the Committee on how to use Drupal CMS (Content Management System) technology to create and edit web pages on the Town website. This involved a site overview of the CMS provided by Jason Velazquez and follow-up training on basic HTML codes and commands most commonly used on the website, presented by Rick Kean. This objective was accomplished.

2. Other meeting objectives included:

Discuss benefits of using a CMS – done.

Discuss plans for structure and content of Website – done, although this will be an ongoing conversation.

Determine priorities for what to work on next – it was agreed that the “Town Office” section, which needs to be reorganized and expanded, is next. (Although priorities will be an ongoing conversation.)

Define Editing Process: It was agreed by the group that any page created by any Committee member would be reviewed by at least one other Committee member, but that any member could alert the Committee regarding an error, omission or issue at any time.

Limited Sign-On for Committee Chairs: It was agreed not to make this feature available at this time.

http://www.townofhawley.com/

Hawley Communications Committee (HCC) Hawley, Massachusetts 01339

Hawley Communications Committee Minutes – of 2

Individual Work Assignments – Still Valid?: It was agreed to continue with existing assignments, pending a review by the Committee Chair. Additionally, four other assignments were given . . .

To all members – look at two articles, Hawley Welcome Page and Hawley-At-A-Glance and make recommendations for revision or completion or do rewrites.

To Thom White – i. Become knowledgeable in Audio file posting,

conversion and player display thus serving the Committee as the technical “go-to” person for all things Audio. It was noted that this task does not require him to make audio recordings; just to handle them for the website once they are made.

ii. To research the possibility of implementing (free) software that will reformat the site so that it will work effectively on mobile devices.

Regular Meetings – Should the Committee Have Them?: -- Yes; it was recommended that we hold them monthly, from 5 – 7 pm at the Town Office on the day of every other Selectboard meeting during the month, scheduled so as not to conflict with Police Chief office hours. Rick agreed to schedule the meetings that way.

New Committee Members: It was agreed that the Committee should open its ranks to one or two new members, given the resignation of Pete Mitchell. Rick will ask for volunteers at the next Selectboard meeting.

Next Steps: Beyond individual assignments, Rick Kean (Chair) stated he would be sending Committee members a “barrage” of emails regarding next website steps during the two weeks after the meeting.

Minutes: Rick agreed to write up Minutes of the meeting and present them for review to the group. Once they were revised or approved as is by the Committee, he would convey them to the Town.

The meeting adjourned at:

4:04 pm.

Respectfully Submitted,

Rick Kean, Chairperson – 2/26/2013

Hawley Communications Committee Drupal Workshop – www.townofhawley.com Town Office: Saturday, February 23: 2 – 4 pm

Agenda

Meeting Objectives

Drupal Overview

How to Set up, Post, Format and Edit Drupal web pages, using . . .

o Text Only o Filtered Html o Full Html o Tips and Examples for Each

Discussion of Graphics and other Audio-Visuals

Discussion of Website Structure, Content and Next Steps

o Navigation

o General sections – At-A-Glance, Welcome Page, News

o Specialized Sections – Hawley Office (splitting up), Bulletins, Documents Archive, Links(?)

o Priorities – what to work on first – Office, At-a-Glance, Welcome

o Editing & Publishing Process – How to insure quality & compliance

Style Rules (?)

When to Involve JV or RK

New Posting

Tables or Graphics or AV Players Needed

Don’t Like Result

Something Biased Or Controversial

Error Message

o Access – Do Committee Chairs Get Limited Sign-on?

Discussion or Parameters, Consequences Decision

Assignments – Who wants to do what? What do we need to have done?

Meetings – Should we establish a regular meeting schedule? If so, how often and what days and times?

Given PM -- Do we need a new member or two? Suggestions.

Next Steps & Minutes

Adjourn

http://www.townofhawley.com/

Hawley Communications Committee Drupal Workshop – www.townofhawley.com Town Office: Saturday, February 23: 2 – 4 pm

Web Page Posting and Editing Cheat Sheet

The Drupal content management system (CMS) allows you to enter webpage content in three ways: Plain Text: Easy, but with minimal formatting options. Filtered HTML: Limited built-in HTML commands. Full HTML: Open for full range of format options (if you can write HTML)

The advantage of this approach is that it allows people with less technical training to

build acceptable websites, while also allowing some pages to be much higher tech. The

system is set up with a “theme” that has default fonts, colors, sizes and layouts built into

it without straightjacketing the more advanced designer.

One interesting advantage of this CMS is that you can start in one of the three modes

and then switch to a different one if you need it to support an addition or change you

want to make. One thing we don’t currently have is a built-in WYSIWYG1.

1 ‘What-You-See-Is-What-You-Get’ web design tool.


HCC Drupal Cheat Sheet, Page 2 of 12

Show above, from the Town Office page, is an example of a process that went from full

html to filtered html mode. Reason – full html was going to take too much time right

then – just wanted to get the names and data right.

Before We Begin

While we’re often tempted to do otherwise, it’s usually best to write web content outside

the software before trying to enter it. This is because we, or the system, invariably wrap

code around the text when it’s entered, and that will make it difficult to find and make

our edits smoothly later. Basics like spellcheck get lost in the process.

Best recommended product for this? Notepad.

Why? Because it functions as a “laundry” – it washes the text we’re preparing to put on

the site clean of any prior formatting. If you’re concerned about positioning and layout,

make a mockup in MS Word or some such (and/or call Rick or Jason), but still launder

the text before entering it into the site.

Also, if you’re making extensive edits to a large existing webpage, please

highlight/copy/paste the entire body of the original html into Notepad and save it

somewhere on your computer, in case something goes haywire during the editing

process.

Creating and Editing Pages in Plain Text Mode

Let’s say you wanted to create a webpage that says:

Lazy Dogs are Running Wild [title]

[content] Now is the time for all good citizens to come to the aid of their Town.

The quick brown fox jumped over the lazy dog and bedlam was the result.

To learn more, go to lazydog.com. [link]

You wrote (or pasted) your content into Wordpad. Then you clicked on the “Add

Content” link and selected “Basic Page.” You copied/pasted your title and content into

their appropriate boxes, as shown below:

When you clicked on the “Save” button, this was your result:

You liked what you saw, but wanted to make three changes, as noted in the boxes

above. So you went back in and made three edits:

1. Capitalized the word “Are” in the Title Slot.

2. Used <shift><enter> to add spacing (line breaks) between the lines of type. [You

could have just used the <enter> key, but that would have created paragraph

breaks, which might show up as too much for the amount of spacing you were trying

to accomplish.]

3. Added “www.” to “lazydog.com.”

Too Tight Vertically

Capitalize

Not a Working Link

That gave you this result:

That’s it! If you want to add more bells and whistles than that, it’s time to go to either

Filtered or Full HTML.

Creating and Editing Pages in Filtered Html Mode

Here’s the difference vis a vis Plain Text:

Web page addresses and e-mail addresses turn into links automatically.

Allowed HTML tags: <a> <cite> <blockquote> <code> <ul> <ol>

<li> <dl> <dt> <dd>

Lines and paragraphs break automatically.

You can do a lot using these tags, particularly for formatting semi-standard

presentations and reports. Here’s what they do:

<a> = basic link command, as in <a href=”http://www.townofhawley.com”>

 = Emphasizes a word (with italic or bold)

 = Emphasizes a word (with italic or bold)

<cite> = Creates a citation, usually italic

<blockquote> = Indents both sides of a paragraph of text the same distance from the

“borders” in which the paragraph is placed.

<code> = Displays text in browser’s default monospace typeface. As in . . .

Embed the URL like this, <a href=”http://www.rats.net”>.

<ul> = Used in conjunction with <li>, it creates an unordered (i.e., bulleted) list. It can

also be used by itself to indent one or more lines of copy.

<ol> = Used in conjunction with <li>, it creates an ordered (i.e., numbered) list.

<li> = Demarks the beginning and end of each item in a numbered or bulleted list.

<dl> = The <dl> tag is used in conjunction with <dt> (defines the item in the list) and

<dd> (describes the item in the list).

<dt> = See above.

<dd> = See above, and example, below.

All of these html code items (and most that follow) are applied to a specific string of text

or an image, as appropriate, and must be “closed” after they are “opened.” Otherwise,

the “setting” you have just created is likely to affect the entire document.

For example:

<a href=”http://www.xyz.com”>My Website</a>

Silly!

Time Out!

<ul><li>Purple</li><li>Pink</li><li>Blue</li></ul>

Creating and Editing Pages in Full Html Mode

CREATING FULL HTML PAGES FROM SCRATCH -- Hardly anyone writes web pages

in full HTML code anymore from scratch, although having that ability certainly helps with

editing and modifying existing webpages. Instead, they use WYSIWYG’s – “What-You-

See-Is-What-You-Get” software packages of one flavor or another that generate the

html code automatically in the background while the author is using close-to-plain-

English in the forground.

In addition to WYSIWYG’s, MS Word can be used as a web development tool in that

any page you generate can be saved as a web page, and Word will automatically

generate the needed HTML code during the “save as” process.

We do not recommend using Word (or its equivalents) in this way, as the code it

generates is very cumbersome and difficult to edit, and many modern browsers are

calling for special plug-ins when they encounter an MS Word-based web page. At this

point, it’s just another distraction to confuse the ultimate user and slow down our

development process.

However, you may already be using a WYSIWYG in another application – like Google,

Yahoo, etc., that will generate code that is just fine. Or, you may have a current version

of a product like Dreamweaver that is specifically made for creating web pages. All you

have to do in that situation is create the page, find and copy the underlying html into

Notepad, and then transfer it into the proper Drupal page.

Well, maybe it isn’t quite that simple. But if you create the code, and make sure you

save all of it some place, Jason or Rick can probably find a way to make it work.

Which code?

In general, you want to save the code that is found between the two <body> tags – i.e.:

<html> <head> </head> <body>

Code <code> code </code> code. Save all this stuff

</body> </html>

But it’s not always that simple – that’s why it’s best to save ALL the code you generate,

in case we need to use more of it to achieve the effect you are looking for than just

what’s in the <body>.



USING “FULL” TO MODIFY PAGES STARTED IN PLAIN TEXT OR “FILTERED” – A

much more likely scenario is that you will start by entering a page in Plain Text or

Filtered HTML and then want to upgrade it’s look and formatting beyond what is made

available in either of those two modes. It is possible to do this without starting over, just

by switching to Filtered or Full mode and then inserting your changes using the html (or

javascipt or perl or PHP, etc.2) commands that are allowed by that mode. It is even

possible to switch back and forth between modes while working on the same document.

But just remember this:

Always make sure that the page you’re working on is set

to the “highest” mode you’ve used before clicking on

the “Save” button.

I.e., [Lowest] Plain Text Filtered Full [Highest]

Otherwise, some of your work won’t “take,” and you’ll

have to go back in save it in the correct mode – IF it’s

still there.

To protect yourself from the downside of making this kind of “save” error, here’s another

place where judicious use of Notepad as a backup can help. Save your new html code

there, too.

So. You started with this . . .

Which looked like this on the ‘inside’ (next page):

2 Work with Jason or Rick on this, if it’s other than html – we don’t want to blow up the website.

Now is the time for all good citizens to come to the aid of

their Town.

The quick brown fox jumped over the lazy dog and bedlam was the

result.

To learn more, go to www.lazydog.com.

________________

You want to add some bold highlights and to modify the formatting of the presentation,

so you change the mode to Filtered HTML and change the back end as follows:

Now is the time for all good citizens to come to the

aid of their Town.

<ul><li>The quick brown fox jumped over the lazy dog and

bedlam was the result.</li>

<li>To learn more, go to www.lazydog.com.</li></ul>

________________

This was the result:

________________

Not bad, but the spacing is a little close between the title and the text at the top and

you’d like to make some of the type larger in the first sentence, as well as changing the

color to red and modifying the type font. So you switch the mode to Full HTML and

make the following html modifications to the back end of the posting (see next page –

note new html is all red and in CAPS):

Now is the time for all

good citizens to come to the aid of their

Town.

<ul><li>The quick brown fox jumped over the lazy dog and

bedlam was the result.</li>

<li>To learn more, go to www.lazydog.com.</li></ul>

________________

Here’s the result:

OK, it’s a little gaudy, and hopefully we won’t actually use something quite like this on

the Town of Hawley website, but it probably would capture the viewer’s attention.

Not Much More to Say

While the permutations in the HTML world are endless, we have covered most of the

basics of what you need to know to post information to the Hawley website using

Drupal. As issues and complications come up, our recommendation is to do the best

that you can, and contact Jason or Rick to help iron out the wrinkles. However, if the

Drupal site ever crashes your computer, or if it gives you a ‘fatal error’ type of message,

stop what you’re doing and contact one of us immediately.

For the next 6 months or so, our best recommendation is to try to do your work using

either Plain Text or Filtered HTML mode.

Having said that, the next three pages are dedicated to providing you with a set of cheat

sheets for html.

HTML Cheat Sheet

There are literally thousands of HTML resources on the web. Some of them are

obsolete and may not work on a modern, international-standards-compliant website like

Drupal. Not to worry – we can usually find altrernative ways to get the something done.

The following list is of HTML commands that are used most often.

1. Links:

<a href=”http://www.sillydog.com” target=”new”>

Target options: “self”, “_blank”, “new”. Always within quotes. It’s optional to

add title=”Click here for an example.”

This can be used with text or with an image. As in:

<a href=”http://www.sillydog.com” target=”new”>Our Outrageous

Website</a>

-or-

<a href=”http://www.sillydog.com” target=”new”><img

src=”http://www.sillydog.com/images/sillydog.jpg”></a>

There are two types of link addresses – Absolute, and Relative.

Absolute – full website address goes between the quotes, i.e.:

<a

href=”http://www.arithmetic.net/docpages/12345Minutes.html”>

Relative – IF you are linking to another page on the SAME WEBSITE, you can use

just that part of the URL that distinguishes this particular file and location from all the

others on the website. For example, the address shown just above becomes . . .

<a href=”/docpages/12345Minutes.html”>

<a href=”/?q=node/4”> is the Relative link for our “Hawley News” page.

Relative is more efficient. Absolute is more universal, and precise. When in

doubt, use Absolute.

2. Text Attributes & Spacing:

Font or Type Face, Size, Color:

Individually:

Or combined: 

The “closer” for all three is , at which point the font reverts to the theme.

Note about text sizes: The text size numbering system presented here (i.e., , etc.) is the oldest and simplest method. Available sizes: 1 – 7. Most

popular: “2” (10 pt) and “3” (12 pt).

Note about colors: You can use color names for many basic colors, like “red”,

“blue”, “green”, etc. Or you can look up numbered “Internet colors” on charts

available on the web. The format for numbered colors is [dark green]

[ivory], etc.

Other Text Attributes:

Website = bold

Website = italic

Website = underlined

 = Emphasizes a word (with italic or bold, depending on browser)

 = Emphasizes a word (with bold)

<cite> = Creates a citation, usually italic

<blockquote> = Indents both sides of a paragraph of text the same distance from

the “borders” in which the paragraph is placed.

<code> = Displays text in browser’s default monospace typeface. As in . . .

Embed the URL like this, <a href=”http://www.rats.net”>.

<q>. . .</q> = Use these to put quotation marks around a few sentences of text.

Basic Text Spacing:

Vertical:

. . . sets off a paragraph. It can be used with attributes that create

specific horizontal text formats as well. Examples:

. . . Aligns text to the left margin.

. . . Aligns text to the right margin.

. . . Centers the text.

. . . Justifies the text evenly between the left and

right margins.

 This is a line-break spacer. Use as many as the number of vertical spaces

Note these three can be combined.

you want to place between two items on your web page, i.e., .

No need to “close” this one – it’s self-closing.

Horizontal:

The browser will accept one horizontal space to the right of the end of a word

entered into the html code from your keyboard, and will ignore any additional

spaces. If you want to insert more spaces, use

This is one of the few HTML commands that operates without carets (<>). It looks

like this:

Now is the time. And

this is the place. This will give you 7 horizontal spaces, total – one

from the keyboard space bar and six from the ’s.

Margins:

You can also use <blockquote> for creating indented margins, though there is no

way to adjust the width of the indents. If you need a narrower column than what

<blockquote> will give you, talk to Jason or Rick.

Lists: Lists affect both vertical and horizontal spacing – you may have to experiment

a bit to get it right.

<ul> = Used in conjunction with <li>, it creates an unordered (i.e., bulleted) list.

<ol> = Used in conjunction with <li>, it creates an ordered (i.e., numbered) list.

<li> = Demarks the beginning and end of each listed item in a numbered or bulleted

list.

<dl> = The <dl> tag is used in conjunction with <dt> (defines the item in the list)

and <dd> (describes the item in the list).

<dt> = See above.

<dd> = See above & examples on p5.

3. Images & Objects:

The basic code for drawing an image into a web page is:

<img src=”http://www.trainingtapes.com/images/tapebank.gif”>

There’s a lot to the process of getting the image or object (like a video player or

form) on the site and positioned properly on your page. Jason or Rick will help.

4. Tables:

Great for positioning, but also complex. Jason and Rick will help you with these.