Your Goals

• Determine educational needs
• Determine immediate and potential audience
• Prioritize needs and audiences and project a number of stages of completion
• Decide extent of content to include for each stage and audience
• Develop using a balance of text and non-text elements
• Include interactivity
• Seek technical and design assistance if needed
• Plan implementation and dissemination
• Plan for on-going development
• Schedule revisions

Why Web-based?

• Easy and wide dissemination
• Extensive design possibilities
• File size may be kept small (depending on use of graphics)
• Allows for interactivity
• Presenter not necessary
• Allows for self-instruction

Other Possibilities for Tutorials & Their Limitations

• Chalkboard / Newsprint Pad

  Temporary format

  Slow presentation

  Requires a presenter

• Powerpoint

  Examples
  http://academic.brooklyn.cuny.edu/library/training/powerpoint/webcore/index.htm
  http://academic.brooklyn.cuny.edu/library/training/powerpoint/supstaff/index.htm
  

  Best for adding emphasis to a live presentation

  Limited display space for text and images on each screen

  Limited interactivity (slides advance; creating hyperlinks of included text requires bitmapping, rather than adding a single code)

  Excessively large file size

  May present problems when saving as HTML, thus requiring knowledge of HTML

  Example
  http://academic.brooklyn.cuny.edu/library/training/powerpoint/sserror/index.htm

  • Slide graphic is missing from within slide framework: http://academic.brooklyn.cuny.edu/library/training/powerpoint/sserror/sld001.htm
  • Graphic required is listed in source code as img001.GIF (return to slide and click on View/Page Source): http://academic.brooklyn.cuny.edu/library/training/powerpoint/sserror/sld001.htm
  • Look for missing graphic on server by typing in the appropriate URL on the browser: http://academic.brooklyn.cuny.edu/library/training/powerpoint/sserror/img001.GIF
  • See if the graphic exists with its file extension gif in lower case characters: http://academic.brooklyn.cuny.edu/library/training/powerpoint/sserror/img001.gif
  • Either change source code for each slide so the img src tag refers to img###.gif (note: gif is in lower case); or, change gif extensions on all the slide graphics files to GIF (note: GIF is in uppercase)
  • The mystery is solved. After changing gif extensions on files on local drive to uppercase, GIF, FTP process reconverts extensions to lower case gif after transfer. Changes must be made to extensions after the transfer is made.
  • Test results. Examine source code for http://academic.brooklyn.cuny.edu/library/training/powerpoint/supstaff/sld001.htm
  • Bring up img001.GIF on the browser: http://academic.brooklyn.cuny.edu/library/training/powerpoint/supstaff/img001.GIF

Resources for Development

• Saving Images :
  

  right mouse click on image / left click Save Image As / save in (choose folder) / save as type (keep default .gif or .jpg extension) / file name (type desired name)

• Screen Capture:
  

  Hit Print Screen button on keyboard / click Windows Start icon to open menu / click: Program, Accessories, Paint / click Edit/Paste / manipulate image / click File/Save as: Save as .gif or .jpg if an allowable file format. In older versions of Paint (generally, pre-Windows 98) .bmp is the only file type allowed (the default is 24 bit .bmp image; larger # of bits means a larger file size).

• Manipulating a Screen Capture in Paint:
  

  Change the size of a screen capture with image/attributes

  Create a new image or define an area of an existing image with one of the defined shapes, a free-form shape or the drawing line: click on the icon desired / point and click to drawing screen and position shape or drag drawing line with the mouse / hit delete key if you want to cut the defined area

  Color a shape you define: click on color desired / click on paint can icon / click on shape on drawing screen

  Example: OCLC First Search search form screens: use broken-border rectangle icon to define area to cut / hit delete key / choose color and fill in area cut

  
  
• Converting an Image to .gif or .jpg Format and Manipulating it in Corel Photo House (part of the Corel Word Perfect Suite 8).
  

  Photo House will not allow you to paste your original screen capture from the Internet, but it will allow you to open the .bmp image you modified and saved in Paint (click File/Open).

  Save image once opened as .gif or .jpg or manipulate

  Manipulate (example): OCLC First Search opening screen: To add a star to an image, click the key icon / click Make Changes / click Paint / click Coloring / click your color choice / click Brushes / click star icon / click on spot on image where you want to add star

• Advantages of Using Adobe Photoshop to Manipulate and Save Images:

  Opens and saves in many file formats

  Opens screen captures: Click File/New /name and resize file as necessary / click ok / click Edit/Paste / click File/Save as Copy / choose .jpg format

  Many tools available for image manipulation

• Bitmapping

  Image Maps - an online tutorial
  Creating a Client-side Image Map
  http://www.personal.psu.edu/users/k/x/kxs156/tut1.htm

  Example: Infotrac Searchbank ASAP (the word proceed is a hyperlink)
  

• Creating an Image to Illustrate a Procedure: Infotrac Searchbank ASAP

  Use Paint to create an organizational chart / save as .gif if allowable or as .bmp and convert to .gif in Photo House (NB: Image size default in Paint is 800 x 600 pixels. If you create a chart using the full width in Paint, a computer with its display settings at 640 x 480 pixels will require using the horizontal scroll bar to show the entire chart. Resizing the chart in Photo House may lead to distortion of text. In addition, color may not fill evenly.)
  
  
  
  
  
  

  Use MS Word to create an organizational chart / click Insert/Object / In Create New, scroll to Microsoft Organizational Chart and click to select / create your chart / return to Word document containing your chart as an object / save document as HTML (the object, or your chart, within the document will be saved as a .gif image you can manipulate in a graphics editor. NB: Resizing the chart will distort text (see example below)).
  
  
  
  
  
  
  
  
  

• Examining component parts of large resources: Lexis - The legal resources

• Linking to Other Tutorial Sites: Lexis (don't reinvent the wheel!)

• Revising: FirstSearch Bibliographic Instruction becomes available online

OCLC Gets a New Look - time to change the OCLC opening screen illustration in the tutorial?