Vance's CALL resources main page | View Site Index | Vance's papers and presentations
What is EV Online? | How to get a Yahoo ID and enroll in YahooGroups
Webheads in Action Portal Page for 2002 and 2003 | April 10, 2002 CALL-IS Academic Session in Salt Lake City | Jan 20-March 7, 2003 EVOnline workshop Portal Page | March 26, 2003 Colloquium at TESOL 2003 Convention in Baltimore
Translate this page - http://world.altavista.com/ | Gloss this page - http://www.voycabulary.com/
(C)opyright 2004 Vance Stevens

Webheads in Action:
Community formation online and its role in language learning

Gallery | URLs and YahooGroups | Community members | Syllabus | Online Schedule

Weeks 6 - March 1-7

Faces in the community: developing our web pages

Navigate this page: << back to Week 5 || on to Week 7 >>

Buthaina Al Othman has linked here from http://alothman-b.tripod.com/handout_creatingwebpages.htm
If coming from that page please back up to Week 5 on Web Presence

1. Developing your HTML Skills

Hi, All, Two sites that you might want to consider once you have the nuts and bolts part of your web designing under your belts are Bobby and Knowability:

Two I like are Webmonkey and a little ditty that I created when someone challenged me to write a tutorial that would 'teach her how to make a web page.' Here are the urls:

I find the best way to learn HTML is to practice using it. I started by checking the "source" (view source) of pages that I liked and seeing how they coded their page. I also use sites that offer free resources. The one I prefer (and use a lot) is the HTML Goodies site at http://www.htmlgoodies.com although webmonkey and bravenet are also quite good.

http://www.w3schools.com contains full tutorials and ready codes for HTML, XML, Scripting, SQL, ASP, Java scripts and many other interesting web dev. tools. The advantage about the site is that once you choose a tool or a technique, you will find a new window appearing with a preview of the code included and on the other frame the result of applying this technique as it will appear in your web site.

Navigate this site | Navigate this page
Hot Potatoes

Lena has produced a web page with numerous Hot Potatoes exercises: http://www.geocities.com/lena_parshina/Exercises.html

Many community members congratulated here. John's reaction:

A very interesting page. I've been on the web for a few years, and I'm still not brave enough to try my hand at interactive pages. I think that is going to be my next exercise. Was it easy to write these exercises?

Lena replied:

This is Hot Potatoes software. It's not so difficult to make these exercises, after you have read Help several times and the Tutorial. There are a couple of tricky questions.

And Vance comments:

Hot Potatoes wasn't originally on the syllabus because it is, as Lena says, more a tool for making interactive exercises. But having said that, not mentioning it our session is almost a lapse, since it is probably the single most influential battery of free exercise development programs to have ever appeared on the Internet. The programs have been years in development and have become quite sophisticated, yet they are backwardly compatible, so in case you find for example that you had become adept at fiddling the html code in the text frame to display video rather than a reading, you can still output that code in the most recent version. The developers follow the CALL lists and will usually respond to questions about the programs.

The developers have a great support site with downloads, examples, and tutorials: http://www.halfbakedsoftware.com/

Lena provided further information:

the URLs for making different kind of exercises are as follows:

and finally Web Worksheet Wizard http://wizard.hprtec.org/ .

Navigate this site | Navigate this page
Color Codes

Here are some urls you can use to see what color codes you should use to get the color you want:

Navigate this site | Navigate this page
Absolute vs. Relative links

I like to work with relative links as much as possible. This way, I can create a web site in folders on my computer and then move the master folder with its subfolders anywhere on the Internet, and all the links will work.

When I start a website I create a folder for it. Inside the folder I might have other folders, for example, one for pics. Let's say the structure looks something like this:

-- In the big [myweb] folder I have a [pics] folder etc. --

Now in the [myweb] folder I have my html documents, and in [pics] I put my jpgs, and if I create a document.htm and I want to use a picture such as me.jpg I tell it to go to the [pics] folder and find that picture. The code in document.htm might look something like this SRC="pics/me.jpg". To anybody's browser, this means, "in the same folder I'm in now, look for the pics folder and display the me.jpg file in that folder here".

The beauty of this is that if I copy my [myweb] folder containing a [pics] folder on your computer and you doubleclick on document.htm then your browser will find the code in that file and display me.jpg. I can copy my [myweb] folder anywhere on the Internet, and as long as the RELATIONSHIP of the [myweb] superfolder and its subfolders such as [pics] is the same, all the links will work. This is because all the links are relative ones.

If however I want to jump outside the [myweb] folder to a url whose location I can't keep static with relation to the location of my [myweb] folder then I have to use an ABSOLUTE link. This sends your browser to an exact location on your computer, your LAN, or the Internet. It doesn't matter if the document.htm file is on the hard drive or a floppy or on the Internet somewhere, the browser seeks out the location pointed to and displays what it finds there.

Both have their advantages. Use relative links when you have control over the relationships between your files and subfolders, and absolute links when you have to.

Disadvantages are that if you've made a relative link to a directory that is not present in the expected location when the html document is opened, then the browser can't find it, and if an absolute link changes addresses, or if it's on a network say, and the computer isn't on the network, then the browser won't find that either, and you'll have 'broken links'.

One example of an absolute url is the location of the thumbnails we use to display our icons at Tapped In. We tell the Tapped In server the location of our image files and it tells our browsers to go there and retrieve the image. It doesn't matter to our browsers where 'there' is as long as it's a resolvable address.

Vance

Navigate this site | Navigate this page
Adding web statistics, chat room, search engine, dictionary

"Enhancing the Class Website with Additional Features (Web Statistics, Chat Room, Search Engine, Dictionary)" by Jarek Krajka Department of Applied Linguistics, Maria Curie-Sklodowska University, Lublin, Poland
http://www.iatefl.org.pl/sig/call/j_tech8.htm

From the article:

Navigate this site | Navigate this page
Mouseovers

Pass your mouse over the image at left.

Susanne made the replacement image of me using Kai Goo.

Here's the javascript code that enables the mouseover:

<A HREF="#" ONMOUSEOVER="window.document.anyimagelabel.src='replacement_image.jpg';"
ONMOUSEOUT="window.document.anyimagelabel.src='initial_image.jpg';"
ONCLICK="return false;">
<IMG SRC="initial_image.jpg" NAME="anyimagelabel" BORDER="0" WIDTH="216" HEIGHT="100">
</A>

Navigate this site | Navigate this page

2. Image manipulations

Where to get the images in the first place? Many webheads have replied to Don's posting below with their own reposts in favor of the convenience of getting images right from a digital camera, not having to wait till a roll is all shot before 'developing' it, and the inconvenience of finding, working, and otherwise involving a scanner in the development process. Still for what it's worth, Don is an accomplished and experienced photographer, and his two yen amount to something - Vance

I don't know what you plan to do with your photos but here is a tip from an avid photographer. Forget buying a digital camera and just have the film from a regular camera scanned onto CD. Here in Japan this costs about $4 for negative development and $2 for the CD. I assume both film development and the CD would cost less in the US. An entry level "point and shoot" digital camera costs around $300 and produces shots in the 2 mega-pixel range. For $700 you can get a higher end camera that will do 4-5 mega-pixel shots.

By comparison 35mm film holds the equivalent of 15 mega-pixels of information and the cheapo snaps from the local photolab will probably be sharper than any digital camera less than $1000. So if you already have a regular camera (or just want to use a disposable) you might want to seriously consider this high-quality alternative to using a digital camera. - Don

For more info and indepth reviews of various digital cameras I recommend the following sites:

OK, have to respond!-- I love my digital camera. I had the 35mm full works camera--by the time I got it in focus with the right f-stop, the subject had run away. Great pictures when you could get everything just right. Then I dropped it--oops--it was heavy! (My husband says I am a tester for camera and binocular durability...) Bought another. Had 20 rolls of undeveloped (great) pictures stolen from a suitcase in Sri Lanka. Sob. And the camera only weighed two tons to carry around. 40 yrs of photos are slowly deteriorating in a closet...(esp. slides).

I have used the throwaways, including underwater. Lousy pictures--7 MGB of non-clarity. Didn't work in low light, couldn't focus on head shot vs. background, et al. The scanner process was so cumbersome I rarely used it. Then I got a 1.2 MGB digital camera for $69 as an experiment--great stuff, but instantly went to a 2.4 in order to get better clarity in my screen saver. I would never go back. You can slide in extra flashcards and carry dozens of them in a pocket. Download to laptop anywhere, or directly print to photopaper and/or e-mail them. Burn them to a CD or DVD. So light weight I can carry it in a jeans pocket. The clarity is amazing--all those pictures in my mind's eye are now right on my laptop. I need to add on a room to hang the pictures in... (and it makes little movies, too). Digital is just plain more fun.

BTW, for anyone interested, an excellent, very inexpensive photo utility for Mac is GraphicConverter by Thorsten Lemke, now in its 4th edition. It converts back and forth to various formats, has lots of paint and other picture manipulation tools, makes thumbnails, etc. And it's only $30 US. Latest editions handle AppleScript also. http://www.lemkesoft.de/us_index.html

Here's a site Elizabeth likes that explains aspects of digital photography: http://www.photocourse.com/01/01-09.htm

Vance, i'm having trouble uploading my photo. How can I upload it without the photo appearing so huge and enlarged?

Aiden Yeh

ANSWER 1: One answer is, you can send me the enlarged photo and I can reduce it to a thumbnail and put it on our page. That applies to anyone in our group who wants to submit a photo. Send the photo (any size) to vstevens at emirates.net.ae

ANSWER 2: A slightly more clever thing to do would be to upload the photo to the Files area of our Webheads Yahoo Group at http://groups.yahoo.com/group/evonline2002_webheads/files/. If you've managed to associate your email address for this group with your Yahoo ID then when you go to the Home url you will not only see Files as one of the menu items on the sidebar to the left, but it will be hyperlinked, and you will be able to visit the area, see what's there, and upload files to it. I've created a Photos folder there. If you upload a file there you can click in where it will ask you to send email to the group letting us know it's there, and we'll all get a hyperlink to it in our email.

ANSWER 3: This is the answer Aiden is looking for. Get an image manipulation program and use it to crop and resize your photos. I use Thumbs Plus, a shareware program from http://www.cerious.com, but there are dozens of such programs. http://www.download.com is usually a good source for a great variety of shareware and freeware. This is what I'm using to reduce the huge photos I've been receiving to the tiny thumbnails you see on our Community page.

So, to anticipate week 6, if anyone else has suggestions regarding what they use for this purpose, if you write us I'll encorporate your suggestions at week 6 of the syllabus. Chris Jones and Peter MacKichen were two of our members who sent me 60x70 thumbnails. How did you reduce your photos? See Peter's answer here -->

When you talk about the size of a file it is not (only) the number of pixels - it also depends on the quality of resolution, that is the sharpness of colors and contrasts - the larger file, the better resolution (necessary for a perfect color print), and the smaller file, the faster it will load on the internet! That is why the scale of "Dots per Inch" (DPI) has a great importante to us web designers (in spe:-) Less dots, faster load. "Millions of colors " are much more information-rich than , say, 256 colors which is usually enough for getting a neat image on a computer screen - but will look pale in print.

I think the most reliable image formats for the net are GIF and PICT. Many (or all?) scanner/ image programmes do not make those formats; I have found that when I open my scanner Twain resource in the shareware programme Graphic converter, I can decide for almost any format. You will be able to check the file size somewhere in your informations - a reasonable size for a smaller image might be less than 100 kb. For the size in inches or centimeters, The homepage images will not always correspond with your WYSIWYG pagemaker - that may depend on the browser type and version, and the screen resolution - which is (I think) also meassures in dots per inch - DPI. I usually have a low resolution, 800 x 600, that will give me clear fonts and a good contrast (And is the recommended resolution for Tapped In).

Susanne is correct that dots per inch or density of information has much to do with the FILEsize of an image and therefore how long it will take to download over the Internet. In PhotoDraw there is a compression option (high compression gives smaller filesize). In Thumbs Plus you can adjust color 'depth' but I don't think you can set dpi.

Navigate this site | Navigate this page

2a. Cropping and resizing

There are three ways of resizing your pictures: (1) pixel size (2) dimensions such as inches or cm (3) ratio, such as 1/3 size

The important thing is to keep aspect constant. Aspect is the relation of width to height. If you reduce height for example but don't change width then your picture will look squashed. If you use ratio then aspect will be maintained. If you use pixels or cms then try changing only width or height and see if the other dimension will change automatically. Thumbs Plus lets you set 'Aspect Fit' to 'both' to accomplish this.

You can see the url for any picture on the Internet by right clicking on the pic and selecting properties. If you put that url in a browser the picture should display in the browser of its own accord, and you could display the picture from your own web pages simply by putting its URL in an IMG SRC command, like so:

<img src="http://www.pic-url-dot.com/picname.jpg">

Also, when you right click on any pic displayed in Internet Explorer and select properties, you should see it's dimensions in pixels. Aspect is the relationship between width and height in pictures.

You can resize a picture in a browser by setting its attributes in the above command, like so:

<img src="http://www.pic-url-dot.com/picname.jpg" width="320" height="240>

In order for a picture to display correctly its aspect ratio must be maintained when it is displayed. For example, if you see that a picture's dimensions are given as 640x480, you can display it in a smaller size, but each dimension should be reduced by the same factor. For example, you could reduce both dimensions by a factor of 2 and make the above pic 320x240.

There might be reasons to do this when displaying pictures from remote URLs on the Internet, but if the picture is on YOUR web site, you might want to resize the picture itself and then store the smaller image at your host server. This will keep you from filling up your alloted space with files that were much bigger than you needed to store there, and it would reduce download time when viewers of your pages could retrieve the smaller files off your server. Small dimension reductions in photos can result in exponential gains in file size since the area will be reduced by a multiple of the width and height removed.

For my own pages, I use 'big' pictures of no more than 300 x 400 pixels, and these could be anywhere from 20 to 60 kbytes. All the thumbnails on the webheads pages are 60x70 pixels and range in size from 1.5 to 5 kbytes. To get your pictures to that size I cropped the face as much as possible, reduced either L or W to its correct dimension, and then cropped the other dimension to get it to the correct size.

Navigate this site | Navigate this page

2b. GIF or JPEG?

Susanne says she thinks gif is most appropriate for web quality. One advantage to gif is that you can set a background color to transparent so it blends in with your web page background, and another is that you can run gif images together to make an animated gif. Still another, or so I have read, is that gif is not as lossy as jpeg during processing (meaning that if you alter a gif you won't lose quality with each operation as much as you will with jpeg). The advice in the article I read was to work in gif and do a final save as jpeg. Image software (Thumbs Plus for example) will let you convert to and save in whichever format you want. Most web images I encounter are either gif or jpeg.

GIF files are good for pictures that contain large chunks of flat colour, whereas JPEG files are good for phtographs. You can find out more about the differences here:-
http://webdesign.about.com/library/weekly/aa031698.htm
http://hotwired.lycos.com/webmonkey/geektalk/97/30/index3a.html?tw=design

Navigate this site | Navigate this page

2c. A few suggestions about thumbnails

I use Microsoft Photo Editor to create thumbnails of images - just use the resize option on the Image menu and resize it to a suitably small size like 100X80 or 80X64. I would then save it either as a .gif or as a .jpeg file (see above)

There are a number of freeware programmes that you can use to create thumbnails. These include:

Best wishes,

Pete

Navigate this site | Navigate this page

2d. Thumbs Plus

My favorite tool for doing these operations is Thumbs Plus, http://www.cerious.com . Using this tool, you browse your hdd for images and click on the thumbs icons to see their thumbnails. You can then click on an image to bring it up and drag a box on it to crop it (Edit/Crop), or use Image / Rotate & Resize to make the picture smaller.

One nice feature of this program is the Options / Preferences features. The File List tab for example allows you to display the File Size in bytes and Dimensions in pixels of your image. It's very handy to have this information right in front of you when viewing images. As Susanne mentioned, you want to keep your file sizes down to well below 100 kbytes, in fact below 50 in most cases, for fast download to your vistors' browsers.

Navigate this site | Navigate this page

2e. Microsoft PhotoDraw

With Microsoft PhotoDraw 2000 and I can see that I can drag the image smaller though I can't specify a filesize as I can with Thumbs Plus. I can only drag smaller.

Navigate this site | Navigate this page

2f. Microsoft Photo Editor

I used the Microsoft Photo Editor that I think came with Windows 98. It's simple to use, and lets you crop and resize images with a couiple of mouse clicks. Best wishes Pete MacKichan

I tried using microsoft photo editor. I also used the crop and resize, paste methods. The photo was reduced but the size of the lay-out is still the size of an A-4. I want to reduce the size of the lay-out so when I paste my reduced photo, it will only appear exactly the same size as I've reduced it.I don't want to see any whites on the lay-out. You said 'a couple of mouse tricks', would you be so kind enough to share those tricks? Desperate Photo Editor, Aiden Yeh

Navigate this site | Navigate this page

2g. ACDSee

You may try to use ACDSee instead. All you do after installing the program is to double click the folder of photos so you can see all your images in with one click. You browse to the photo you want to reduce then use the mouse to draw a table around the part you need and right click on it. Use the option save crop as and save it as a new smalled image.. It will appear without the whites.. To get a free copy of the software visit this link: http://www.acdsystems.com/products/acdsee/ Regards, Ismail Fayed.

Navigate this site | Navigate this page

2h. Thumbnail Creator

Randa Effat adds: I have used a program called Thumbnail Creator for resizing pictures, it is wonderful, it does it all for you, excellent for webpages. It is a freeware, you can download it from the following URL: http://www.fookes.com/ezthumbs/index.html?1.0

Navigate this site | Navigate this page

2i. Adobe Photoshop

Hi everyone,

For photo manipulation software, I like Adobe Photoshop the best, but it is the most expensive. In the past I have had access via my employers (graphic design, mulitmedia producer or university).

With Adobe PS there is great flexibility for altering an image -- scan in a photo and fix what life didn't: remove your boyfriend's zit from his otherwise lovely face, compensate for an under/overexposure or a hotspot, even shift color palettes and contrast (much as you can with all the other programs, though with lesser control I think).

The best feature is the one Dafne probably wants to know the most about -- not so much the IMAGE size but the FILE size; the combination of both will help images load quickly on slow computers/connections. First: manipulate your image at the highest resolution. With each major change, save a different version(i.e., Matt1.psd, Matt2.psd, etc) -- don't overwrite (it's very hard to go back and get that highlight 'just so', etc.). Notice these are not image files yet, still Photoshop docs.

When you finally have the version you like and want to put it on the web -- Photoshop lets you chose a format (stick with .gif or .jpg - though .gifs load faster -- I prefer .jpg). (e.g., Matt.jpg) In .jpg, you have the option to "save for the web" at various degrees of resolution (best, okay, etc.). Again, save this version differently (Matt4web.jpg); you may not be happy with the loss of quality on the first go and will have to make adjustments by reopening the 'good version'(e.g., Matt.jpg) and trying again at a higher resolution. (I've also cut the size of an image but kept the resolution higher as a compromise to the reverse).

Best example: Do you know how large the file of your pic is on the Webheads Yahoo Groups page is? Mine is a faculty photo and 92K -- larger than it should be -- I don't have any image manipulation software at the moment. Though the image is tiny -- but the file size is not. This same file is approx. four times larger on my homepage and takes that much more time to load on the screen. At the smaller image size, no one will notice the difference in file size but -- on a slower computer -- the larger image could load up annoyingly slow (my apologies - 2001-02 has been rough and rapid; web has been the last thing on my mind).

I hope this helps (and doesn't confuse-- I'm getting confused just reading it over!).

all the best,

Arlyn

Navigate this page

Navigate this site | Navigate this page

2j. The Importance of Photo File Sizes

María Irene Albers de Urriola wrote:

> I use Photo Editor, which is one of my scanner's program, but for the one in my page I only used the mouse to reduce its size.

ok, but be careful here. It is possible with a mouse in an HTML editor to reduce the size of a photo as it appears on your web page BUT if this doesn't reduce the size of the photo itself then the download time will be the same because the BIG photo file will be downloaded each time the small picture is to be placed on your page.

If you are resizing in Photo Editor and saving the photo file and then inserting the small photo on the web page then you are ok. You can look at your files directory and see the size of the photo you are inserting in the page.

Peter explains in greater detail in email meant to assist another Webhead with her page:

Your photograph is 597KB which means that the page is quite slow to load - it took four minutes over a pretty fast dialup connection. You could try reducing the size of the pictures using a thumbnail programme. I have been trying "Easy Thumbs" http://www.fookes.com/ezthumbs/index.html and it really does seem pretty straightforward. Looking at the code for your page you (or Yahoo SiteBuilder) have set the size of your photograph as 129x153 - doing this just determines the size it will display at, not the actual size of the picture that is downloaded. If you make a thumbnail of your picture at 129x153 it comes out at about 4KB (quite a bit smaller), and your page will load much faster.

> The problem with the secondary pages links is related to the file names. I used long names, as I'm used to do whith Word or any other Office program. I learnt that those file names should not be more than eight characters and that no spaces or accent marks are allowed because the server cannot interpret them. Therefore it gives addresses like Consultabibliogr20%/. The percentages indicate that one of those forbidden characters was included.

Yes, 20% replaces a space in a file name. The problem is that your computer will link files more tolerantly than will the Internet. For example, your computer doesn't care if a file name has upper or lower case characters, but on the Internet upper and lower case are significant. SO you should adopt certain conventions when saving and naming files. Some of these are:

A lot of times when things don't link it's because you've violated one of these conventions. Like you have a file called Filename.htm or a pic called picture.JPG. Make sure you stay with lower case to avoid problems.

> I've also learnt that using Netscape to build your web page has an extraordinary advantage, which is that wherever you are, you can modify the page, whereas if you work with a program like Publisher, Dreamweaber, etc. they should be loaded in that specific PC in order to make the changes.

This is good advice, though if you use Dreamweaver to create a page you SHOULD be able to edit it in Netscape Composer, but maybe not. Sounds like you've found a good system.

Congratulations on your page,

Vance

Navigate this site | Navigate this page

3. How to call media files from web pages

A resource document of possible interest:

Calling Real Media files from web pages

See Vance's instructions on using Real Media Producer and installing Real Media files on your web pages - http://sites.hsprofessional.com/vstevens/files/efi/tutorials/tutorlist.htm#real_producer

Using the EMBED command to call media files from web pages

The basic syntax is: <EMBED SRC="filename.???"></EMBED>
where .??? is .mpg, or .au etc.

As with pictures, pay close attention to the SIZE of the file you intend to embed. WAV audio and video files tend to be H U G E !!

The most readable references I have found on the EMBED command are

Here are reference guides:

For more information, do a google search on 'embed command in html' http://www.google.com/search?hl=en&ie=ISO-8859-1&oe=ISO-8859-1&q=embed+command+in+html&btnG=Google+Search

Navigate this site | Navigate this page
4. Power Point to HTML

"Converting MS Power Point Screen Shows to HTML for your Web Site" from San Diego State University, http://www-rohan.sdsu.edu/~bats/PDF/FacStaff/PPt/Ppt_HTML.pdf

Navigate this site | Navigate this page
5. The next steps: ASP, PHP ...

We are hoping to make this one of our topics for the 2004 EVOnline sessions. Here are a few URLs:

I asked Tom Cobb how he created his Compleat Lexical Tutor at http://132.208.224.131/. He said, "I use PHP for some of this stuff, but more likely PERL, which is similar anyway and lives on our server while PHP is only at Concordia. And of course Javascript for the client-side bits. The best starter for PERL is Liz Castro book (Quickstart Press) - including how to mount the program on your own computer as web server (free)." (permission to quote requested, July 9, 2003)

Navigate this site | Navigate this page

Webheads - Main Page | Join us | Welcome | Students | Virtual Community | Online class | Chat Logs | Reports and Studies | Grammar | Tutorials | Games | Teaching for Webheads
Time conversions - http://www.timeanddate.com/worldclock/full.html and more
Chats – Homestead text chat or leave a message | GroupBoard text chat, whiteboard, and guestbook | Tapped In - /join VanceS in Office N2201, North Wing, 22nd Floor or /join JohnSte | Palaces – avatar text chat at plantation.chatserve.com and mycorner.xsia.com, both on port 9998 | Active Worlds – animated avatar 3D text chat
Discussion forums – voice: Wimba voice discussion board | text: Delphi Forum
Instant Messengers – ICQ | Yahoo! Messenger | MSN Messenger Service
Gloss this page - http://www.voycabulary.com/ | Translate this page - http://world.altavista.com/

Comments and suggestions on this page to Vance Stevens
Last updated: May 27, 2005 in Hot Metal Pro 6.0