Best Practices in Web Publishing - PowerPoint PPT Presentation

1 / 27
About This Presentation
Title:

Best Practices in Web Publishing

Description:

http://web.mit.edu/ist/web/reference/quickstart/best-practices ... formats displayable in modern web browsers without special plugins or programs ... – PowerPoint PPT presentation

Number of Views:31
Avg rating:3.0/5.0
Slides: 28
Provided by: stude389
Category:

less

Transcript and Presenter's Notes

Title: 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/
Write a Comment
User Comments (0)
About PowerShow.com