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
Community formation online and its role in language
Weeks 6 - March 1-7
Faces in the community: developing our web pages
Buthaina Al Othman has linked here from
If coming from that page please back up to Week 5 on Web Presence
- 1. Developing your HTML Skills: Hot Potatoes | Color codes | Absolute vs. relative links | Mouseovers
- 1a. Adding web statistics, chat room, search engine, dictionary
- 2. Manipulating Images:
- 2a. Cropping and resizing
- 2b. GIF or JPEG
- 2c. Thumbnails
- 2d. Thumbs Plus
- 2e. PhotoDraw
- 2f. Microsoft Photo Editor
- 2g. ACDSee
- 2h. Thumbnail Creator
- 2i. Adobe Photoshop
- 2j. The Importance of Photo File Sizes
- 3.How to call media files from web pages : e.g. Real Media and The EMBED command
- 4. Power Point to HTML
- 5. The next steps: ASP, PHP ...
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.
Lena has produced a web page with numerous Hot Potatoes exercises: http://www.oocities.org/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?
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:
- HotPotatoes http://web.uvic.ca/hrd/hotpot/#downloads
- Quandary http://www.halfbakedsoftware.com/index.htm?quandary/
- WWW4Teachers sites: http://www.4teachers.org/
- Quiz Star http://quiz.4teachers.org/index.php3
- Note Star(note-taking tool http://notestar.4teachers.org/
- RubriStar-for making rubrics: http://rubistar.4teachers.org/
- TrackStar-for making lists of websites: http://trackstar.hprtec,org/
and finally Web Worksheet Wizard http://wizard.hprtec.org/ .
Here are some urls you can use to see what color codes you should use to get the color you want:
- Webmonkey is a nice site for deeper pursuit of HTML, and here you will find http://hotwired.lycos.com/webmonkey/reference/color_codes/
- Color Swatch Reference Guide: http://www.netlingo.com/color.cfm
- The Web Design Coloring Book: http://www.netlingo.com/more/color/index.cfm
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.
"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
From the article:
- Web statistics; in the case of Poland it is http://stat.webmedia.pl
- Chat host, such as http://www.webchatting.com
- Java applet chat room for your website: Go to http://www.jpilot.com
- Add Altavista Search to your site http://www.altavista.com
- Use dictionaries online, such as www.dictionary.com, www.dictionary.cambridge.org, www.m-w.com, www.leksyka.pl
- Active dictionary pages, where doubleclicking any word in a page produces a definition of the word; e.g. http://lookwayup.com
Pass your mouse over the image at left.
Susanne made the replacement image of me using Kai Goo.
<IMG SRC="initial_image.jpg" NAME="anyimagelabel" BORDER="0" WIDTH="216" HEIGHT="100">
- You can change the name for anyimagelabel to what you want it to be (the only stipulation is that the label has to be different for any two labels on the same page).
- And your initial_image is the one you want to be displayed on the page when viewed normally whereas
- replacement_image is the one you want to appear on mouseover.
- Both images should be the same size and those dimensions in pixels need to be correct for width and height.
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
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:
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?
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 -->
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.
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:
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="//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.
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:-
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:
- STG Thumb http://www.stgsys.com/
- Easy PEG http://www.hnm-freeware.com/
- Easy Thumbnails http://www.fookes.com/
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.
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.
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|
|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.|
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
2i. Adobe Photoshop
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,
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.
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:
- not a bad idea to use 8 character file names and 3 character extensions (htm instead of html) e.g. filename.htm
- never leave a space in a file name
- avoid any character other than a letter or number except dash - or underscore_
- use only lower case letters in file names. If you use Geocities File Manager, convert all files to lower case.
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,
3. How to call media files from web pages
A resource document of possible interest:
- How to Build a Multimedia Website for Language Study. Written by Randall S. Davis, creator of Randall's ESL Cyber Listening Labs. Internet TESL Journal. February, 2002. http://iteslj.org/Techniques/Davis-MultimediaSite/
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
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
- the Audio FAQ page by Shirley R. Smith in her HTML Help Online
- So, You Want To Embed A Video, Huh? in HTML Goodies by Joe Burns
Here are reference guides:
- HTML Reference Guide, the <EMBED> command
- Netscape Assistance, EMBED TAG SYNTAX
- One suggested by Aiden: http://www.txrebel.com/music.html
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
"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
We are hoping to make this one of our topics for the 2004 EVOnline sessions. Here are a few URLs:
- http://www.w3schools.com/asp/asp_intro.asp <-- This is one I'm looking at now. The principle is it trains you for free and then if you want to document your skills it sells you a means to do that. Pretty clever and everyone wins. Leave it to the Norwegians!
and Studies |
| Games |
Comments and suggestions on this page
to Vance Stevens
Last updated: May 27, 2005 in Hot Metal Pro 6.0