Conditions I look for in a client-side solution to posting a message with a lot of graphics:

  1. It should work 100% of the time
  2. It should be easy
  3. It should not take a lot of time
  4. It should be easier the second time and beyond
  5. Over time, with multiple posts, it should avoid filename conflicts
  6. It should be scalable - i.e., it should work as well for 30 images as it does for 1

If you select a method wherein you must save your document as HTML, you will have to deal with the difference between formatting in a Rich Text environment vs formatting in HTML. You will find that the document may take on a very different appearance in the more limited environment of HTML. 

Method A - Use Attachments

Method B for ad hoc pastes of graphics into OLS or web-based messages

  
This is probably the easiest method, but presents serious challenges by severely interrupting the flow of thought.

However, note that if there are no graphics, no EE or MathType objects, and no graphs, then the text CAN be pasted directly inbto the OLS Edit Window.

This method is exteremely effective for ad-hoc jobs. Jing will automatically capture your screen image and automatically upload the image to its own server; furthermore, it wil l also render the i mage in a browser window so that you can copy it directly without having to look at the html.  For details and an instructional video, click here.  For large amounts of graphics in a message, however, this does not meet criterion (f) above.  
Method C - Upload the file as an HTML file to a web server and provide a link in the OLS message
The simplest solution is to create a web site. When you create a new document with images, upload the document using FTP [ What's FTP?] (this is as easy for 100 images as it is for 1), along with the dependent graphics folder, link to it in OLS and you are done.

The next time you need it, all you have to do is link to it. This is the simplest of solutions.

However this works only if you have full FTP access to your web server. If your ISP does not provide full FTP access,  you might like to check out some Free Web Hosting Services.  Click here

The ONLY trickery is in getting the link to the document into your OLS message.  You can use Word to create the hyperlink (Using the World-with-links button on the toolbar of Word. Then you can paste it in from Word. Click here for How to create a Hyperlink within OLS editor and/or change the smiley to a remotely stored graphic image.

 

Method D - Getting professional-looking math expressions into the body of the OLS message

  
OK so how can we display professional-looking math in an OLS message? The short answer is "By trickery." Since we cannot store images on the OLS server and cannot type HTML directly into an OLS Edit Window, we have some formidable obstacles.

1. We need to store images on some other server

All solutions start with putting your image(s) on some web server somewhere.  Even Googledocs requires this (the images would then be on the google server). For small jobs, with only one image or two, I recommend using Jing (see Method B above) . If you have a lot of images, this method would take hours and would be unacceptable. 

For more substantial text files with lots of math expression in professional format, read on.

Most of us are granted space on our ISP server to store a web page. Hopefully you get FTP access to the space provided. Let's suppose your ISP server is www.joesWeb.org and you are assigned a folder named ~smith.  Then the path to your space on your ISP server is  www.joesWeb.org/~smith.  If you upload  img_033.gif to that folder, its "fully qualified" address will be  www.joesWeb.org/~smith/img_033.gif  In that case you will need the following HTML code to load your picture where you want it:

<img src="http://www.joesWeb.org/~smith/img_033.gif"

Of course you may have to add other in-between folders as you go on.

However it works only if you have full FTP access to your web server. If your ISP does not provide full FTP access,  you might like to check out some Free Web Hosting Services.  Click here

2. We need to generate the documents with separated images to accompany the HTML.

Sometimes our lectures can have 30 or more images.  I cannot recommend working on each image, one at a time. Besides the fact that it is very tedious, you may generate something that is not reusable.

Start by generating the entire document using Word.  Include EE or MathType objects and graphs from whatever source you wish.  Graphs can come from screen captures in Aleks, or Excel graphs; simply paste them in using any source. When the document is prepared, save it as HTML, being careful to note where you placed the HTML document. For the sake of this discussion, suppose you save your document as  c:\Math209\LectureWeek1.htm.

Once you have saved it, navigate to the folder where you saved it - in this case Math209 folder.  In that folder you will find LectureWeek1.htm. But you will also find a folder named  LectureWeek1_files.  In that folder you will find a lot of files, and they will be generically named. Depending on which version of Word and which method you used to save, you will find either GIF or JPG files (used for the internet) and other Word-specific files.  Look at these files. You will find that these are your EE or MT math expressions, and your graphs.  The typical auto-generated filename will be  img_012.gif.

Note: If you upload this to a server, you MUST keep them in their own folders. The next time you prepare a document for the web, the same filenames will be used, so there will be filename clashes if you upload to the same folder as previously used.

Upload all of the GIF or JPG files to your web server.  To make life easier, put them all in a folder named the same as your original file - in this case, LectureWeek1_files.  On your ISP, then, a typical GIF file will carry a Fully Qualified Filename of something like

 

Note the switch to the use of "/" instead of  "\" in the filename.

If you want to reference that from any other server, you MUST add the "http:// in front, to get a compelte reference of

http://www.joesWeb.org/~smith/LectureWeek1_files/img_012.gif

If you leave off the http://" part, the browser will attempt to go to some subfolder on the server being accessed.

This works only if you have full FTP access to your web server. If your ISP does not provide full FTP access,  you might like to check out some Free Web Hosting Services.  Click here

Now switch to a text editor (not Word or Word Perfect). For example, you may switch to Notepad. You could also use FrontPage or Dreamweaver, but if so, you want to get into th e Code View.

Use Search and Replace

Search for    LectureWeek1_files

Replace with    HTTP://www.joesWeb.org/LectureWeek1_files

Visually verify the slash after LectureWeek1_files to make sure it is a forward slash in each case.

From here, you have a couple of options.  One thing you can do it upload the LectureWeek1.htm file to the ISP, thereby placing ALL of the content anb graphics on the web server. In this case you will want to LINK to it instead of pasting it into the OLS message. Click here to see how to insert a hyperlink in the OLS message.

If you want to arrange it so that the text of your message appears in the OLS message for the reader, go on to the next step.

3. We need to trick OLS into accepting HTML.

Open the HTML file on your computer using a Browser or something that gives you a WYSIWYG view of it.  Use Ctrl-A to mark all, and Ctrl-C to copy all of  it to the clipboard.  On the OLS Editor Window, find the button with a W on it - that button is used to paste Word documents in (with formatting).  Click on that and paste in the material using Ctrl-V.  Then click Submit.  What you pasted in will have IMG tags pointing to your ISP's server, so when anyone views it, the servers should send the graphics from your ISP server so that your browser can render it.

 

  

 

 

 

1. We need to store images on some other server

Most of us are granted space on our ISP server to store a web page. Hopefully you get FTP access to the space provided. Let's suppose your ISP server is www.joesWeb.org and you are assigned a folder named ~smith.  Then the path to your space on your ISP server is  www.joesWeb.org/~smith.  If you upload  img_033.gif to that folder, its "fully qualified" address will be  www.joesWeb.org/~smith/img_033.gif  In that case you will need the following HTML code to load your picture where you want it:

<img src="http://www.joesWeb.org/~smith/img_033.gif"

Of course you may have to add other in-between folders as you go on.

However it works only if you have full FTP access to your web server. If your ISP does not provide full FTP access,  you might like to check out some Free Web Hosting Services.  Click here

2. We need to generate the documents with separated images to accompany the HTML.

Sometimes our lectures can have 30 or more images.  I cannot recommend working on each image, one at a time. Besides the fact that it is very tedious, you may generate something that is not reusable.

Start by generating the entire document using Word.  Include EE or MathType objects and graphs from whatever source you wish.  Graphs can come from screen captures in Aleks, or Excel graphs; simply paste them in using any source. When the document is prepared, save it as HTML, being careful to note where you placed the HTML document. For the sake of this discussion, suppose you save your document as  c:\Math209\LectureWeek1.htm.

Once you have saved it, navigate to the folder where you saved it - in this case Math209 folder.  In that folder you will find LectureWeek1.htm. But you will also find a folder named  LectureWeek1_files.  In that folder you will find a lot of files, and they will be generically named. Depending on which version of Word and which method you used to save, you will find either GIF or JPG files (used for the internet) and other Word-specific files.  Look at these files. You will find that these are your EE or MT math expressions, and your graphs.  The typical auto-generated filename will be  img_012.gif.

Note: If you upload this to a server, you MUST keep them in their own folders. The next time you prepare a document for the web, the same filenames will be used, so there will be filename clashes if you upload to the same folder as previously used.

Upload all of the GIF or JPG files to your web server.  To make life easier, put them all in a folder named the same as your original file - in this case, LectureWeek1_files.  On your ISP, then, a typical GIF file will carry a Fully Quyalified Filename of something like

www.joesWeb.org/~smith/LectureWeek1_files/img_012.gif

Note the switch to the use of "/" instead of  "\" in the filename.

(However this works only if you have full FTP access to your web server. If your ISP does not provide full FTP access,  you might like to check out some Free Web Hosting Services.  Click here)

Now switch to a text editor (not Word or Word Perfect). For example, you may switch to Notepad. You could also use Frontpage or Dreamweaver, but if so you want to get into th e Code View.

Use Search and Replace

Search for    LectureWeek1_files

Replace with    HTTP://www.joesWeb.org/LectureWeek1_files

Visually verify the slash after LectureWeek1_files to make sure it is a forward slash in each case.

From here, you have a couple of options.  One thing you can do it upload the LectureWeek1.htm file to the ISP, thereby placing ALL of the content anbd graphics on the web server. In this case you will want to LINK to it instead of pasting it into the OLS message.

If you want to arrange it so that the text of your message appears in the OLS message for the reader, go on to the next step.

3. We need to trick OLS into accepting HTML.

This part is iffy, as I do not currently have access to OLS's Editor Window to re-confirm in my mind the details of how the Word Import works.

Open the HTML file on your computer using a Browser or something that gives you a WYSIWYG view of it.  Use Ctrl-A to mark all, and Ctrl-C to copy all of  it to the clipboard.  On the OLS Editor Window, find the button with a W on it - that button is used to paste Word documents in (with formatting).  Click on that and paste in the material using Ctrl-V.  Then click Submit.  What you pasted in should have IMG tags pointing to your ISP's server, so when anyone views it, the servers should send the graphics from your ISP server so that your browser can render it.