Creating and Maintaining a Web Site with Manila

1
Creating and Maintaining a Web Site with Manila
Carol Burritt - Web Development SpecialistETS
Computing Services
2
Types of Web Editing Software

• HTML editors
• Notepad, Simple Text, HomeSite
• What You See Is What You Get (WYSYWYG) editors
• FrontPage, Dreamweaver, GoLive
• Form or Wizard based site creation tools like
  Manila

3
Types of MCC Manila Sites

• Faculty/Class sites
• http//web.monroecc.edu/rwalter
• http//web.monroecc.edu/crc110
• Clubs and Organizations
• http/web.monroecc.edu/FacultySenate
• Special Projects/Working Groups
• http//web.monroecc.edu/MCCBanner
• http//web.monroecc.edu/mobile

4
The structure of a Uniform Resource Locator for
a Manila site at MCC
http//web.monroecc.edu/yoursitename
Protocol
site name
Server address/domain name
5
The public Uniform Resource Locator for a Manila
site at MCC
http//www.monroecc.edu/go/yoursitename
redirect page
Protocol
site name
Server address/domain name
6
Purpose and Audience Statement

• The Purpose and Audience Statement is a simple
  statement that says
• Why you are putting up this Web site?
• Who you are putting it up for?

7
Planning your Web site

• What is the purpose of the site?
• Who is your audience?
• What do you want to say to them?
• Do you want them to talk back?

8
Know your audience(s)

• Who is your audience?
• Students
• Faculty Staff
• Media
• Professional Peers
• Most of your visitors want to complete a very few
  tasks. Identify those tasks.

9
Know your audience(s)

• Use voice, tone, and language your audience
  expects and understands
• Avoid jargon or institution-speak
• Acronyms
• Internal terms

10
Design for the web is visual information
management

• Documents to be read online must be concise and
  easy to navigate.
• No one reads anything anymore. Divide your
  message into digestible chunks.

11
Planning Your Site
12
Planning Your Site Navigation

• When creating a menu structure, remember the
  Seven Plus/Minus Two Rule.

13
Planning Your Site Navigation

• Place links to top level pages in this area.

14
Planning Your Site Navigation

• Links to secondary level content can be placed on
  individual pages.

15
Using links

• Make it clear what user will get from a link
• Ex. Using the testing system (PDF, 708KB)
• Link title should match target
• Avoid using too many links in running text
• Use links, dont talk about them
• The link should be The Name of the Target, not
  Click here, Point your browser, etc.

16
Three content components of a Manila Web site

• Text
• Images
• Files (pdf and MS Word documents, Excel
  spreadsheets, PowerPoint presentations, sound
  files, video files, etc.)

17
Content in the Language of Manila

• The common elements that make up most Manila
  sites are
• Messages (items in the Discussion Group)
• Stories (pages)
• Pictures (images gif and jpeg)
• Files (site attachment files)

18
What is good content?

• Good Content Is Timely
• News, events, announcements
• Time-sensitive information requires upkeep!
• Good Content Is Informative
• Service information, course information, who we
  are, what we do
• Good Content Facilitates Contact
• Where, how, directions, contact us in X number of
  ways (the more the better)
• Good Content Makes Life Easier for the User
• Great links to other resources, file downloads,
  schedules, other features that draw users to your
  site

19
Finding content

• Brochures, flyers and newsletters
• Forms and Applications
• Class information
• Course information sheets
• Syllabi
• Class exercise sheets
• Lesson overview documents
• All kinds of current class hand out material
• Event calendar
• Handbooks and policies
• Any information you would disseminate over the
  phone, e-mails, etc.

20
How Web users view your site

• Scanning picking out key words or phrases
• Reading speed 25 percent slower on Web than
  print
• Dont make me read write 50 percent less text
  than you would in print

21
How Web users view your site

• Every new visitor is lost if they cant find
  what they want right away they will leave
• Navigation
• Descriptive page names and headings
• Entry page may not be home
• Users dont scroll (so keep it short)

22
Scannable text

• Put important key terms where readers look first
  top of the page, headings, etc.
• Bold keywords (use sparingly or they lose desired
  effect)
• Do not emphasize text by underlining. On a Web
  page that usually indicates a link

23
Scannable text

• Make headings and subheadings clear, meaningful,
  consistent, and descriptive titles should
  survive out of context
• Use bulleted lists allows for skimming
• USING ALL CAPS FOR MORE TEXT THAN A TWO OR THREE
  WORD HEADING GREATLY REDUCES THE READABILITY OF
  THE CONTENT.

24
No one reads anything anymore. Divide your
message into digestible CHUNKS.

• Make paragraphs short and meaningful
• Divide paragraphs into precise segments or
  chunks
• Two-three lines per paragraph
• Three-four paragraphs per page most users do
  not want to scroll below the visible portion of
  the page

25
Chunking
Short
One Large Paragraph
Focused
Chunks
26
Creating a story/page

• Adding text to a story is done by typing
  directly, or copying and pasting text into the
  editing form.

27
Files/Gems

• Text can be part of a story (page) of a Manila
  site, or
• Text can be part of a document that is served up
  as a file/gem
• These files can be thought of as the attachments
  to a Manila Web site

28
Adding a file to your site

• browse for the file on a local drive or any
  accessible resource, such as the M drive.

29
Images/Graphics

• Graphics can be added to a Manila site and then
  included in stories/pages, as long as they are
  properly formatted and optimized for Web display

30
Web Graphics

• Choose graphics wisely. Be sure they are relevant
  to your message.
• Make sure the size (physical and file size) will
  not interfere with your design or slow the
  download time of the page
• Maximum width 600 pixels
• Maximum file size 10-20 kilobytes, depending on
  what else is on the page
• Save graphics with blocked color areas and
  definite lines as gif .GIF files
• Save continuous tone images (such as photographs)
  as jpeg .JPG files

31
Graphic Format Comparisons

• GIF Graphic Image Format
• Images that display properly using the 8 bit, 256
  web color model
• Images with one color displayed as transparent
  (gif 89a filter)
• Images that can be saved as animations animated
  gifs

32
Graphic Format Comparisons

• JPEG Joint Photographic Expert Group
• Images that display a representation of the 24
  bit true color model millions of colors, such
  as photographs
• JPEG files can be saved across a wide compression
  range (0 100)

33
Graphic Format Comparisons

• Overview of Web graphic basics at efuse.com
• http//www.efuse.com/Design/web_graphics_basics.ht
  ml

34
Designing with the limitations of the screen in
mind
600 pixels
13-15 inch screen (640x480) resolution browser
safe area
350 pixels
35
Membership and Roles
Manila includes a built-in membership system that
lets you maintain a database of members to send
out email bulletins, restrict posting access to
the discussion group and to allow selected
members to become editors of the site.
36
Membership and Roles

• Editorial Roles
• There are three editorial roles on a Manila site
  Managing Editor, Contributing Editor and Content
  Editor. If you run the site, you're probably the
  Managing Editor. In that role, you can
• Change the Home Page
• Create Stories, Pictures and Discussion Group
  messages
• Use Preferences to change the way the site looks
  and operates
• Maintain the site using the Administration
  features
• Send Bulletins
• Decide what role others will play on the site
• As Managing Editor you can also edit any Story,
  Picture or Message on the site, no matter who
  created it.

37
Membership and Roles

• Editorial Roles
• The Managing Editor can name other Managing
  Editors, who then gain the same level of control
  over the site.
• Any Member can be selected as a Contributing
  Editor or Content Editor. This lets them create
  Stories, Pictures and Discussion Group Messages,
  but doesn't allow them to change the Home Page,
  or access the Prefs, Admin and Bulletins
  features.
• Contributing Editors can edit the Stories,
  Pictures or Messages they created.
• Content Editors can create and work with all
  stories, pictures and Discussion Group messages.

38
Membership and Roles
The Managing Editor can turn Membership on or
off. Membership is normally turned on for a new
Manila site and the Home Page will have a Members
box with links for joining and logging in. Once
someone joins, site Membership Preferences
determine what kind of access they have.
39
Membership and Roles
Visitors Your Home Page is usually open to all
visitors, although there are site preference
settings to block everyone but members, or even
editors. Otherwise, visitors can look at what you
have on the Home Page and follow links to the
Stories you have posted. Only members, can
receive bulletins or participate in the
Discussion Group. Visitors can become Members by
following the Join Now link in the Members Box
and filling out a simple form, if membership is
enabled.
40
The Language of Manila

• In Manila the message is the basic unit of
  content. Every time you upload a picture, write a
  story or post in a discussion group, a message is
  created. Some messages are selected to be
  stories, some are pictures and one is chosen to
  be the current home page story.
• The diagram below shows a very simple Manila
  site.

41
Manila Site Components

• Messages
• Stories, pictures and the home page all begin as
  messages in the discussion listing. All messages
  have a number.
• Stories
• Stories can be thought of as the Web pages of a
  Manila site. They make up the content of the
  site.

42
Manila Site Components

• Pictures
• Pictures are the gif and jpeg graphic files that
  are added to the site and then included within
  stories.
• Files/gems
• Files/Gems do not start out as messages. They are
  resources such as PowerPoint presentations, PDF
  documents, Excel spreadsheets that you offer for
  downloading from your Manila site.

43
The Manila Home Page

• Site Name
• Tag Line
• Navigation Links (shortcuts)
• Page Title
• Body
• Members Box (can be hidden)
• Link to Discussion Group (can be hidden)
• Calendar (can be hidden, home page only)

44
Home Page Overview

• Although the Home Page may look like an ordinary
  Manila Story, it's really a container for Stories
  or News Items. The way you set up your Home Page
  depends on the kind of site you want to run.
  There are three main modes
• Single Story One Story at a time appears on the
  Home Page
• Multiple Stories A configurable number of Stories
  (one per day) appear on the Home Page

45
Other Manila Pages

• Pages other than the Home or Discussion pages of
  a Manila site are stories. Each page will
  display
• Page Title
• Graphics
• Body

46
Discussion Page

• Topics
• Messages
• Calendar

47
(No Transcript)
48
(No Transcript)
49
(No Transcript)
50
(No Transcript)
51
Logging In

• Follow these steps to login.
• Enter your email address into the Email address
  field.
• If you know your password, enter it into the
  Password field (otherwise leave it blank).
• Click Login. If you provided the right email
  address and password, you'll be returned to the
  Home Page. If you left the password blank, check
  your email until you receive the password and
  then repeat the steps above.

52
Changing Passwords

• Members can change their Manila password by
  logging into the site as usual, then calling up
  the Sign Up page http//web.monroecc.edu/sitename/
  member/signup,
• entering a different password and submitting the
  form.

53
Other Manila Site URLs

• http//web.monroecc.edu/sitename/member/login/,
• This will allow you to log in to your site if the
  login link is not visible on your pages.
• http//web.monroecc.edu/sitename/member/signOutCon
  firm/
• This will allow you to log off your site if the
  log off link is not visible on your pages.
• http//web.monroecc.edu/sitename/profiles/
• This will allow you to view the profiles of all
  your site members.
• http//web.monroecc.edu/sitename/prefs/
• This will take you directly to your own site
  preferences page.
• http//web.monroecc.edu/sitename/stats/
• This allows you to view certain statistics about
  your site.
• http//web.monroecc.edu/sitename/member/changepass
  word/,
• This will allow members to change their password,
  once they have logged in to the site.