Best Practices in Web Publishing

1
Best Practices in Web Publishing

• Margaret Wong
• Web Technologies Consultant
• 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

• 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
• Transparency
• Graphical text
• Animated icons
• PNG
• Just about everything

7
Image Compression Resizing

• Use an image editing software, like Adobe
  Photoshop, to resize images and compress for web
  usage (in Photoshop there is a save for web
  function)
• Do NOT resize images with HTML
• Browsers will load the full image
• Image will appear skewed or pixelated

8
MIT Free Web Publishing Environment

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

9
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

10

• 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/

11
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 categorical folder

12
(No Transcript)
13
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 é, ç, æ, ñ

14

• 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

15
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 are 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

16
Content Presentation

• Content Publishing via Dreamweaver MX 2004
• This is another quickstart P. The next one is
  Wednesday, March 23rd
• Using Cascading Style Sheets (CSS) quickstart is
  Thursday March 17th
• Quickstart Schedule
• http//web.mit.edu/ist/topics/training/training-QS
  .pdf

17
Some Basic Conventions

• Links in running text should be underlined
  (default) or a different color from the regular
  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
• Provide sufficient color contrast between linked
  text and non-linked text

18

• Use header tags (lth1gt, lth2gt, lth3gt, etc) in your
  content to help search engines identify what is
  important on your page
• If graphics are used for text, make sure the alt
  attribute of the image has corresponding text
  information
• Do NOT use frames, users cannot properly bookmark
  your pages
• Do NOT use ltblinkgt tags or infinitely looping
  images or materials that are eye candy rather
  than content

19
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

20

• Multiple content editors
• Check-in Check-out

21

• Macromedia Contribute 3
• Pilot project in progress
• Saves edit drafts
• Waits for appropriate approval before publishing
  live

22
Content Distribution

• Putting your content on the Web
• File transfers via Dreamweaver MX 2004
• Setup Instructions http//itinfo.mit.edu/articl
  e?id6762

23

• Remote Site
• Files on the web server
• Local Site
• Your computer desktop
• Testing Server
• Prototype (also on the web server)

24

• 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

25

• Remote site
• Note might need to reconnect / re-login
• Keep folder structures identical
• Double check in various browsers

26
Other File Transfer Methods

• Macintosh
• Fetch
• Windows
• FileZilla
• SecureFX
• See Secure File Transfer at MIThttp//web.mit.edu
  /ist/topics/filetransfer/index.html

27
Questions Comments

• Margaret Wong
• Web Technologies Consultant
• 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/