Best Practices in Web Publishing

1
Best Practices in Web Publishing

• Margaret Wong
• Technology Consultant-Developer
• meponine_at_mit.edu
• http//web.mit.edu/ist/web/reference/quickstart/be
  st-practices/

2
Basic Components of Web Publishing

• Content creation
• Content organization
• Content presentation
• Content administration
• Content distribution

3
Content Creation

• Directly insert content in HTML
• Insert content Word style via WYSWIG
• Copy and paste from RTF documents
• Common formats displayable in modern web browsers
  without special plugins or programs
• Web pages HTML, XHTML
• Images JPG / JPEG, GIF, PNG
• older browsers, such as Netscape 4, do not
  interpret PNGs correctly.

4

• Common formats that require additional plugins or
  programs installed
• Video / Audio Quicktime (.mov), RealAudio /
  RealVideo / RealPlayer (.ram / .rm), AVI, Flash /
  Shockwave (.swf), MPEG video (.mpeg), MPEG audio
  (.mp3)
• PDF, Word, PowerPoint, Excel

5
Images on the Web

• JPG / JPEG
• Photographs
• Graphics with gradients / transitioning colors
• Graphics with mixed photographic image and line
  art

6

• GIF
• Line art
• Simple Transparency (fully transparent or fully
  opaque)
• Graphical text
• Animated icons

7

• PNG
• Variable Transparency (same toucan image with
  drop shadow on different backgrounds)
• No animated icons (use MNG instead)
• Gamma correction (more uniform display across
  platforms and screens)

8
Image Compression Resizing

• Compress images to reduce web site loading time
• Use an image editing software to resize images
  and compress for web usage (Adobe Photoshop,
  Adobe Image Ready, Macromedia Fireworks, etc).
• Adobe Photoshop / Image Ready has a save for
  web function that is optimized for web graphics
• Do NOT resize images with HTML
• Browsers will load the full image
• Image will appear skewed or pixelated

9
MIT Free Web Publishing Environment

• Web server web.mit.edu
• Unix-based system (Athena)
• AFS permissions / rules apply
• Organizations, courses, and personal web spaces
  have a 1 GB limit
• http//web.mit.edu/organization/
• http//web.mit.edu/coursenumber/
• http//web.mit.edu/username/www/

10
Dynamic Functions

• Sites that use a database that returns live data
• Scripts that dynamically return search results
• web.mit.edu provides limited dynamic functions
• CGIemail (send e-mail through a form)
• Custom 404 pages
• Restrict access via certificates authentication
• XBitHack
• mod_alias functionality

11

• Additional dynamic services integrated with web
  sites on web.mit.edu
• Custom Events Calendar
• http//web.mit.edu/ist/services/calendaring/events
  -custom.html
• Custom Google Search
• http//web.mit.edu/ist/google/
• See Web Publishing References for more info
• http//web.mit.edu/ist/web/reference/

12
Content Organization / File Management

• The landing page of a category should be the
  index.htm or index.html page (see next slide)
• Avoid putting all files in one directory unless
  you have less than 20 items total, including
  pages, images, stylesheets, and other linked
  documents
• Create folders for content that can be grouped
  together, either by topic, by date (such as news
  archives), or by type (such as images, scripts)
• For larger sites, materials related to a specific
  section should be placed in sub-folders within
  the larger category folder

13
(No Transcript)
14
File and Folder Naming Convention

• Unix-based systems are case sensitive
• Research ? research ? RESEARCH
• Use all lowercase to be safe
• Include the file extension, such as .doc and .jpg
• Special characters get special treatment
• Do not use spaces in file or folder names
• Do not use periods, slashes, quotes, commas,
  semicolons, colons, symbols such as , _at_, , ,
  , and accented letters, such as é, ç, æ, ñ

15

• Name files base on page contents subject matter
  that can be identified without opening the file
  (except index.htm/.html)
• Keep names brief
• If more than one word is necessary, use dashes or
  underscores in places of spaces

16
Dashes vs. Underscores

• Dashes are more visible when the URL is
  underlined (by default they are)
• http//web.mit.edu/the-file-name.html
• Underscores look more like spaces, so the name is
  more readable, but could get lost when the URL is
  underlined (look at your printout)
• http//web.mit.edu/the_file_name.html

17
Content Presentation

• Content Publishing via Dreamweaver MX 2004
• IST offers a free quickstart on Dreamweaver.
• Using Cascading Style Sheets (CSS) quickstart.
• Computer Training at MIT
• http//web.mit.edu/ist/topics/training/
• Quickstart Schedule
• http//web.mit.edu/ist/topics/training/training-QS
  .pdf

18
Some Basic Conventions

• Links in running text should be underlined
  (default) or a different color from the regular
  text
• Provide sufficient color contrast between linked
  text and non-linked text
• Use the same color for linked text throughout
  your content
• Do NOT use underlines on non-linked text
• Do NOT use the link color for non-linked text

19

• Use header tags (, , , etc) in your
  content to help search engines identify what is
  important on your page
• Use headers in semantic order, such that
  isnt followed by an without an in
  between. Some assistive technologies (i.e. screen
  readers) can create an outline of the headers.
  Out of order headings will create a broken
  outline

20

• If graphics are used for text, make sure the alt
  attribute of the image has corresponding text
  information
• If graphics do not contribute meaningful
  information, use an empty or null value in the
  alt attribute. For example, transparent GIF
  images used to hold spaces (spacers or struts)
  should use alt
• Do NOT use alt or alt
• Do NOT use tags or infinitely looping
  images or materials that are eye candy rather
  than content

21

• Use list items (
  • or
    1. ) instead of
       paragraphs with a bullet character (bull)
    2. Use meaningful titles (subject of your
       page, maybe include group name or
       acronym)
    3. Use meta keywords and descriptions to help search
       engines find your site
    4. http//mit.edu/ist/web/reference/create/metatags.h
       tml
    5. Do NOT use frames, users cannot properly bookmark
       your pages
  
  22
  Content Administration
  • Locking down sections of your pages
  • Dreamweaver Templates(this will be a quickstart
    some day)
  • Reference http//itinfo.mit.edu/article?id6750
    
  • Library Items
  
  23
  • Multiple content editors
  • Check-in Check-out
  
  24
  • Macromedia Contribute 3
  • Pilot project in progress
  • Saves edit drafts
  • approval before publishing live
  
  25
  Content Distribution
  • Putting your content on the Web
  • File transfers via Dreamweaver MX 2004
  • Setup Instructions http//itinfo.mit.edu/articl
    e?id6762
  
  26
  • Remote Site
  • Files on the web server
  • Local Site
  • Your computer desktop
  • Testing Server
  • Prototype (also on the web server)
  
  27
  • Testing Server
  • Use your own web space /afs/athena.mit.edu/user/m
    /e/meponine/dontindex/siterootfolder/
  • Preview in a few different web browserssite may
    appear differently in different web browsers
  
  28
  • Remote site
  • Note might need to reconnect / re-login
  • Keep folder structures identical
  • Double check in various browsers
  
  29
  Other File Transfer Methods
  • Macintosh
  • Fetch
  • Terminal / Command line
  • Windows
  • FileZilla
  • SecureFX
  • See Secure File Transfer at MIThttp//web.mit.edu
    /ist/topics/filetransfer/index.html
  
  30
  Questions Comments
  • Margaret Wong
  • Technology Consultant-Developer
  • meponine_at_mit.edu
  • Presentation files will be at
  • http//web.mit.edu/ist/web/reference/quickstart/be
    st-practices/
  • Visit the Web Publishing Reference web site
  • http//web.mit.edu/ist/web/reference/
  • Departmental Consulting and Application
    Development
  • http//web.mit.edu/ist/dcad/