Transcript PowerPoint Presentation - Best Practices in Web Publishing

Best Practices in Web Publishing
Margaret Wong
Web Technologies Consultant
[email protected]
http://web.mit.edu/ist/web/reference/quickstart/best-practices/
Basic Components of Web Publishing
• Content creation
• Content organization
• Content presentation
• Content administration
• Content distribution
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 PNG’s correctly.
• 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
Images on the Web
• JPG / JPEG
– Photographs
– Graphics with
gradients /
transitioning colors
– Graphics with mixed
photographic image
and line art
• GIF
– Line art
– Simple Transparency
(fully transparent or
fully opaque)
– Graphical text
– Animated icons
• 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)
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
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/
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
• 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/
(go to the Google session from 2:45-4:15 for more info)
• See Web Publishing References for more info
– http://web.mit.edu/ist/web/reference/
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
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 ~, @, $, &,
+, ’ and accented letters, such as é, ç, æ, ñ
• Name files base on page
content’s 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
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
Content Presentation
• Content Publishing via Dreamweaver MX 2004
– IS&T 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
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
• Use header tags (<h1>, <h2>, <h3>, etc) in your
content to help search engines identify what is
important on your page
• Use headers in semantic order, such that <h1> isn’t
followed by an <h3> without an <h2> 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
• 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=“<empty>”
• Do NOT use <blink> tags or infinitely looping images
or materials that are eye candy rather than content
• Use list items (<ul><li> or <ol><li>) instead of
paragraphs with a bullet character (<p>&bull;)
• Use meaningful titles (<title>subject of your page,
maybe include group name or acronym</title>)
• Use meta keywords and descriptions to help search
engines find your site
– http://mit.edu/ist/web/reference/create/metatags.html
• Do NOT use frames, users cannot properly
bookmark your pages
Content Administration
• Locking down sections of
your pages
– Dreamweaver
Templates
(this will be a
quickstart some day)
• Reference –
http://itinfo.mit.edu/article
?id=6750
– Library Items
• Multiple content
editors
– Check-in &
Check-out
• Macromedia
Contribute 3
– Pilot project in
progress
– Saves edit drafts
– approval before
publishing live
– In Depth session
2:45-4:15
Content Distribution
• Putting your content on the Web
– File transfers via Dreamweaver MX 2004
– Setup Instructions –
http://itinfo.mit.edu/article?id=6762
• Remote Site
– Files on the web
server
• Local Site
– Your computer
desktop
• Testing Server
– Prototype
(also on the web server)
• Testing Server
– Use your own web space
/afs/athena.mit.edu/user/m/e/meponine/dontindex/siterootfolder/
– Preview in a few different web browsers
site may appear differently in different web browsers
• Remote site
– Note: might need to reconnect / re-login
– Keep folder structures identical
– Double check in various browsers
Other File Transfer Methods
• Macintosh
– Fetch
– Terminal / Command line
• Windows
– FileZilla
– SecureFX
• See Secure File Transfer at MIT
http://web.mit.edu/ist/topics/filetransfer/index.html
Questions & Comments
Margaret Wong
Web Technologies Consultant
[email protected]
Presentation files will be at
http://web.mit.edu/ist/web/reference/quickstart/best-practices/
Visit the Web Publishing Reference web site
http://web.mit.edu/ist/web/reference/