Web Support Blog

When you open up a web browser in the College, it is pre-set to home in on the Lab/Classroom announcement page.  There are technical reasons for this but it is perfectly OK to change it to another page, such as the COB Main page or ISU or Yahoo or whatever.  The procedure is really simple. I mean, really simple

Just navigate to whatever web page you would like to be your home page.  Then,

• INTERNET EXPLORER – click on the “Tools” menu, Internet Options, General, and under the Home page section click “Use current” and “OK”.
• FIREFOX – depending on which version you have click on the Firefox logo or the “Tools” menu.  Then General, Home page, “Use current pages” and “OK”.
• CHROME – click on the wrench picture, then Options, then Basics and “On startup” and go from there.

The exact procedure may vary slightly from one browser version to another but these instructions should get you in the neighborhood.  You can even set multiple home pages if you like; each one comes up in a tab within the browser.  Just open an extra tab and navigate it to the 2^nd page (or more) and then set your home page(s).

Dr. Isadore Magan Brilliant, PhD

Let’s use the example of professor Isadore Magan Brilliant, PhD, who wants to update her COB web page. Her ULID is imbrilli.

On the web, her website is http://www2.cob.ilstu.edu/imbrilli/

Professor Brilliant can update the files on her website simply by editing files on her w: drive. Her main page (in this example) is called index.shtml and on her computer it would be found at w:\index.shtml.

To edit index.shtml, she opens her w: drive, right-clicks on the file and chooses “Edit with”, then any web editor. Front Page, or Expression Web, are good choices. She may need to “browse” for Expression Web the first time, if it doesn’t show on the list. After that it will show up on the list.

To create a hyperlink, she first types in some text – let’s say “2011 CV” – selects the text with her mouse and chooses; “Microsoft Expression Web”.

(If this is the first time she’s used Expression Web, she might have to “Choose default program” then “Browse” to C:\Program Files\Microsoft Expression\Web Designer\exprwd.exe. After that, Expression Web will appear on the list.)

When she places her CV files in the \downloads folder, she’ll rename the files without any spaces. Web browsers don’t handle spaces very well and substitute a %20 in their place. So it’s best to use dashes or underscores instead of spaces. I prefer dashes because underscores are often visually obscured by the convention of underlined links.

Then the path to her CV on the web looks like this:

http://www2.cob.ilstu.edu/imbrilli/Brilliant-Vita-04-01-2011.pdf

Notice that web addresses have forward-slashes instead of backslashes. So even though her w: drive has backslashes, her website as it shows up in a web browser uses front-slashes. It’s just one of those oddities.

To update a link in Expression Web, right-click on the link and choose “Link properties” to paste in the updated link.

Suppose you have a web page with a ridiculously long URL, like this:

http://www.cob.ilstu.edu/test/examples/folder%20name%20with%20spaces%20in%20it/FolderNameInCamelText/longurl.php

It’s hard to type, the spaces get turned into that weird “%20″ code, and it is often broken by email line wrap.  What to do?

Try using a URL Shortener!

For instance, using tinyurl.com or goo.gl on the long URL above makes it look like this:

http://tinyurl.com/2656og3.

Much smaller, easier to handle, and it goes to the same place.  It only takes a few seconds.  Try it!  (I use goo.gl the most; it’s easiest to remember.)

If you see some empty pages listed in the navigation above, I’m working on establishing how the page and sub-page menu cascade works for other sites.  Please bear with us as we survey the ground (and the pages will be populated with useful data, by and bye…

This post is for our RSO webmasters, valiantly taking on the webmaster role.  If you are interested in learning about web design and technology, here are three good links to get you started:

• As a resource on technical aspects of creating web pages, please consult http://www.htmlgoodies.com
• As a resource on design principles of making attractive websites, please consult this multipage article on the principles of beautiful web design at http://articles.sitepoint.com/article/principles-beautiful-web-design
• For a great article on web color choices, please see http://inspectelement.com/articles/the-principles-of-good-web-design-part-3-colour/

Also consider setting up a website on WordPress.com – it’s free and most of the design work has been done for you.  Simply choose a template and go!  If you have a domain, you can point it at the WordPress blog so when someone types in your domain name, it goes where you want it to.

Don’t forget continuity.  Set up a “Webmaster File” – an expanding file folder – that can be handed off to next year’s webmaster.  Use it to keep access information, passwords, all the irreplaceable stuff.  Keep it up to date!

If the page looks a bit different every time you check this blog, it’s because I also use it as a test platform.  For instance, last week I tried the Arjuna theme base and it worked great… in Firefox.  In Internet Explorer (the web designer’s nemesis), not so much.  So I will be optimizing this week.

Once full compatibility with every major browser, including Internet Explorer back through version 7, is established, I’ll use the tweaked template for many projects.

Win 7 Snip Tool

If you use screen shots to produce instructional material – either on the web or off – you should know about the new Windows 7 “Snipping Tool”.  It’s extremely easy to use: simply start the tool, click “new”, draw a rectangle around just the area you want to capture, and release the mouse button.  A dialog allows you to copy the resulting image to the clipboard, or save it as a .png file.

And what’s a .png file?  It stands for “Portable Network Graphics” and it’s excellent for screen shots because .png files don’t get messy compression artifacts like .jpg files.

If you work with screen shots a lot, I suggest pinning the Snipping Tool to the taskbar.  Just right-click on the Snipping Tool icon in your Start menu, and choose “Pin to taskbar”.

As I work on the building tour, I realize the tiny pictures give no sense of either the size of our building or the richness of the spaces involved.  To that end I’ve started using a Canon G11 camera to make panoramic views.  The G11 handles mixed lighting very well, which is essential for panoramas. The first one is up; our courtyard space.  Check it out and let me know what you think!

The panorama pictures are created by stitching a series of images together using Canon Photo-Stitch software.  It is also possible to get wide-angle views using a fish-eye lens, and in fact the effect is very similar.  But fish-eye lenses tend to become darker at the periphery (unless they are very expensive).  Another way is to use Sony sweep-scan, and I do plan to acquire the necessary camera for that but it is just released and I always let new camera models “season” a bit (firmware updates, etc.) before I get one.

Update:  here’s our main computer lab, and our BIS lab.