Technical Documentation - XS4ALL · Computer Studies Coursework- Internal Assessment- IGCSE Kartik Kumar 1999/2000 Page 17 link, as the name suggests, creates a link that allows the

Computer Studies Coursework- Internal Assessment- IGCSE Kartik Kumar 1999/2000

Page 14

Technical Documentation

Introduction:This section of my documentation is aimed at elucidating all of the technical itemsincluded in my home page. There will be a short description of each item and anexample of its appearance too.

Links

I have many links incorporated into my web site because they allow the user tobrowse through the web pages and created a much more user-friendly atmosphere.Links allow the users to access different web pages within the web site and areoften linked to relevant topics. All of my web pages include a link that takes theuser back to the home page just in case the user wishes to access another part ofthe web site or restart a search for a certain topic through the web site. Linksthat I have included in my web site can be classified as either internal links orexternal links. These links are very simply created using the application Claris HomePage 3.0. This application is very user-friendly and has a good help facility. Creatinga link is therefore very simple. The main difference between internal links andexternal links is that internal links only link web pages within the same web site, butexternal links link my web site to a web page on another web site on the Internet.This globalises the web site and means that the resources available to the user areincreased, thus increasing user-friendliness as well.

Below I have included the general procedure that I used to create all of the linkswithin my web site:


Page 15

I started off by creating an image or writing a piece of text in the web page thatreferred to another web page that this link would be linked to. Next I selected thisimage or piece of text and under the ‘View’ tab I selected the ‘Link Editor’ buttonas depicted above. This then showed me the link editor and all that I had to do nowwas to browse to the web page that I wanted to link this link to, on the hard drive,if this was an internal link, as shown below:

The box above showed up when I clicked on ‘Link Editor’. Next I clicked on the‘Browse Files’ button and the box below appeared:

Next I simply highlighted the file that I wanted to link to and clicked on the button‘Open’. This produced a link that showed up in the link editor and now if I were tobrowse the web page in a web browser such as Internet Explorer, I would find thatthe link would take me to the file that I had highlighted in the box. The link wasnow done. If I were using an image or text now, I would simply have to click on theimage or text to take me to the desired linked web page.


Page 16

For external links the process works in a similar fashion. The only difference wouldbe that I would have to know the URL of the web page or the web address and Iwould input this in the link editor box instead of clicking on ‘Browse Files’. If I wason-line i.e. logged onto the World Wide Web, and I clicked on this external link, itwould take me to the desired web page if it were on the Internet. I could useexternal links also to links other web sites that I had created or even otherdocuments or databases.

There is also a third type of link that can be created using this application. This linkis called an anchor link and is created in much the same manner as the other links.An anchor link, as the name suggests, allows a link to be created e.g. at the bottomof a web page, so that if the user wishes to return to the top, he or she doesn’thave to scroll all the way back. The user can simply click on the link, which is linkedto an anchor that can be inserted at the top of the web page. T he anchor can beinserted by clicking on the ‘Insert’ tab in Claris Home Page 3.0 and then clicking onanchor, as portrayed below:

Then a box will pop up asking for thename of the new anchor. Once this iscompleted an anchor image will be seenon the web page:

This can then be moved around theweb page. Next the link has to becreated using ‘Link Editor’ by enteringthe name of the anchor with a # infront of the name. This is for ananchor in the same file. It is alsopossible to create an anchor link to ananchor in another web page. This issimply done by entering the web pageURL (Universal Resource Locator) ofthe anchor and the anchor name. Thisis similar to an internal link but themain difference is that this link can

link to anywhere in a page and does not by default show the top of a web page.

There are two more links that can be created. The FTP (File Transfer Protocol) linksimply allows an external link to be created to an FTP site on the Internet. The Mail


Page 17

link, as the name suggests, creates a link that allows the users of a web page, whenclicking on this link, to e-mail information to an address inputted in the ‘Link Editor’box.

This is basically the process for creating links using Claris Home Page 3.0 and isrelatively easy. Below is a list of all the links that exist in my web site:

Some of My Internal Links:Voting Web Page - this link takes you from the web page that you are presentlyviewing to the voting web page, which allows you to submit a form, telling me whatyour favourite Magic card is and any additional comments.

Search Engine - this link takes you from the web page that you are presentlyviewing to the search engine web page that allows you to search for keywordswithin my web site.

Spoiler Lists – this link takes you from the web page that you are presently viewingto the spoiler lists web page that houses all of the spoiler lists in my web page.

Deck spoiler lists – The links in the spoiler lists web page take the user to thespecified spoiler list e.g. Exodus spoiler list will take the user from the web pagepresently being viewed to the Exodus Spoiler list web page.

Magic for Beginners – The links in this web page are basically anchor links and willtake you around the web page, allowing the user to read al of the rules concerningthe game of Magic; The Gathering.

Personal Touch – This links you to a web page that contains general informationabout the maker of this web site, namely me. It allows the user to browse throughthe web page containing information about me.

Some of My External Links:Guest Book - this link takes you from the web page that you are presently viewingto the Guest Book web page on the WWW that I personally customised atwww.guestworld.com and allows you to enter your name and add any comments ingeneral about the web site.

Search Engine - This link takes the user to an on-line search engine that searchesfor keywords in my web site. The on-line service produces a list of all the web pagesthat contain the keywords through the use of a site map that maps your entire website. This service was provided by www.freefind.com.


Page 18

Other Magic Web Sites – This web page contains external links to other Magic: TheGathering web sites that I located on the WWW and that I thought wereparticularly good. The links take the user to the specific web site that it isreferring to from the web page currently being viewed.


Page 19

Setting a Background

In Claris Homepage 3.0 you have the option of adding a background image to yourweb pages. I decided to create an image that I could use for all of the web ages sothat it would be consistent and would link all of the web pages in the user’s mind. Icreate the image by downloading an image that I had found on the WWW whilstbrowsing. This image was very dark and I wanted a light image so in ClarisHomepage 3.0 I opened the image. Next I double-clicked on the image(alternatively the object editor could be selected under the ‘window’ tab) and theobject editor popped up. Here I could set transparency and interlacing. I clicked onthis button and all that I had to do was click on a portion of the image that Iwanted to be lighter, and voila, the image was now overall much lighter. This was avery handy function. Next I inserted the image in a web page to see if it functionedby clicking ‘image’ under the ‘insert’ tab. Here I had to select which image to insertand I simply browsed to the file that contained the image in my folder. After Imade sure that it looked proper I deleted the image and clicked on the ‘view’ tab onthe menu bar at the top of the screen. Under this tab I clicked on ‘documentoptions’ where I could set the background by simply browsing to the file under‘Image: Set’:

The final image that Icame up for mybackground is asfollows:

I thought that thisimage was pretty goodbecause it is thesymbol for Magic: theGathering and is verysubtle.


Page 20

Guest Book

I incorporated a guest book into my web site as well. This was initially done bysimply using http://www.altavista.com and searching for ‘free guest book servers’.This search came up with several links to servers that provided free guest booksbut the most appropriate web site was http://www.guestworld.com that allowed fullcustomisation of the guest book. This was very useful. The first thing that I had todo was fill in a form, including all of my personal details and the web page that theguest book had to appear on. An example of the form is below:

The web page where this form can be found is as follows:

http://neptune.guestworld.lycos.com/manage/updateuserinfo.cfm?geartoken=150734795&owner=kartik007

Once this form was filled in I was presented with several functions that I could useto customise my guest book. These functions were easy to use and allowed me toset the criteria. Once I had customised the guest book and had completed theprocedure, I was shown the following information shown on the next page:


Page 21

Congratulations!

Your Guestbook from GuestWorld is now Registered

Here is the code for your homepage to make the guestbook work. Simply copy andpaste it in. How easy can it get!

If you cannot copy and paste then you will need to add the code to the HTML codeon your homepage. Save the contents to a file, print out this page or write it downcarefully. You can also expect an email notification with this information as well. Ifyou do not receive the email, that does not mean you are not registered, nor do youhave to wait for an email to use the service.

The Code...<center><p><ahref="http://neptune.guestworld.lycos.com/wgb/wgbsign.dbm?owner=kartik007">Sign My Guestbook</a><a href="http://GuestWorld.Lycos.com/"><imgsrc="http://guestworld.lycos.com/GuestWorldbutton.gif"height="31" width="87" border ="0" alt="Guestbook by GuestWorld"></a><ahref="http://neptune.guestworld.lycos.com/wgb/wgbview.dbm?owner=kartik007">View My Guestbook</a></center>

Try out your guestbook here...Sign My Guestbook View My GuestbookThis is how you are registered:

Guestbook Name: kartik007 Email: [email protected] Homepage: Deckmeister: Magic the Gathering Password: invader City: Nootdorp State/Province: Country: Netherlands (Holland) Keywords: card game, famous


Page 22

If you find something is incorrect, you can go to the TechCenter and move on to theutilities area to correct it.

Get a Free Membership From Tripod

TechCenter | Be our Guest | Sign Our Guestbook | View Our Guestbook | Partners |About Us |

GuestWorld is a trademark of Lycos, Inc. Copyright © 1998, All Rights Reserved

All that I had to do was select the components under ‘code’ and paste it in HTMLsource of my guest book web page. The HTML source could be edited by clicking on“edit HTML source’ under the ‘view’ tab. Voila, I now had my guest book and it wasfully functional in a web browser, such as Netscape. Below is an example of themessage I received when I signed the guest book myself to see if it was working:

This guest book is an example of one of the external links in my web site becausesigning my guest book would link the user to my on-line guest book athttp://www.guestworld.com. Above you can see that one of the custom options is toallow the user to enter a private message. People with the entry password can thenonly read this message. This maintains a sense of privacy and is reassuring for theuser.


Page 23

Creating a Counter and Search Engine

Counter:I also included a counter in my home page of my web page. This counter was simplyincluded to make the user feel more at home. The counter was obtained from thesame web site where the guest book was obtained, namelyhttp://www.guestworld.com. All that I had to do was visit this web site and selectan image that I wanted to use for my counter. I stumbled upon the counter that Ihave included in my home page when exploring the web site for the guest book. Iselected an image and imported it into Claris Homepage 3.0.Then I pasted it in myhome page ad voila, the counter was done. I accessed my web site in the Internetbrowsing application, Netscape Navigator 4.0. I did this to make sure that thecounter was fully functional. Below shows the image of the counter:

Search Engine:I also included a search engine in my web site. This was done once again by browsingthe World Wide Web using Netscape Navigator 4.0. I accessed the search engine‘altavista’ at the following address: http://www.av.com. Next under the querysearch I searched for ‘free search engines’ and it came up with a list of web sitesthat offered free search engines. After painstakingly browsing through each ofthese web sites individually I decided that the one offered by ‘freefind’ athttp://www.freefind.com was the best. This was because it offered the greatestselection and was also the least cumbersome. All that I had to do was to enter thedetails of my web site and let the server create a ‘site map’ of my web site (a lotlike a road map so that if a user wanted to search for a keyword, this word could beimmediately accessed. This was because the web site freefind server wouldn’tneed to search through all of the web pages but simply search through the mapcreated before). Now I had actually created another external link because thissearch engine was linked to the main search engine provided by ‘freefind’. I also hadto copy and paste some HTML text in the web page so that the search engine wouldappear, as I wanted it to. Below is an example of how my search engine looks:


Page 24

All that the user needed to do was enter the query keyword or keywords in the boxshown on the previous page. Clicking on find would create a list of criteria matchingthe query on the ‘freefind’ web site.

Below is an example of the result that I obtained when I used the search engineand searched for ‘exodus’. As you can see this search engine simply lists the webpages that are found that include this keyword:

Now the user simply has to click on the link and he or she will be taken to the webpage that contains the keyword.


Page 25

Using Adobe ImageStyler 1.0

One of the main programs that I used in creating professional looking graphics formy web site is Adobe ImageStyler 1.0. This application allows you to createprofessional graphics and is very versatile. It can cope with various situations and isvery useful because it can also deal with Java Scripting for web sites because itprovides Java applets. This is the main reason why I used this application. One ofthe images that I created using Adobe ImageStyler 1.0 is the image of the searchengine button on my home page. This image was created using Adobe ImageStyler1.0 and uses Java Scripting too. Below is a screenshot of the image:

Using Adobe ImageStyler 1.0 I created a 3-D image, which when the user movesthe mouse over, changes shape. Also when the user clicks on the image to link to thesearch engine, the image changes. Below are the images that the first imagechanges to when the user performs a certain action:


Page 26

I managed to do this through the use of the Java applet available in AdobeImageStyler 1.0. I started off by creating a shape using the general ‘tools’ toolbarthat shows up at the beginning when the application is run. If the toolbar is notvisible all that has to be done is the ‘Window’ tab has to be clicked and the ‘Tools’button has to be activated by ticking it. Below is a screenshot of the toolbar:

The button that I used to draw the image initially was the one in thesecond column, fourth button (the one with an image of a hexagon):

Next I used another toolbaravailable in Adobe ImageStyler tocreate the texture. This toolbar isalso available under the ‘Window’tab (shown below) as are all of the

other toolbars:

The toolbar that I used to create the texture is ‘Textures’ that also allowed me tocustomise the style and the shape. Since I already had the shape, I only needed tochange the texture and style by selecting the image and then selecting one of thestyles and one of the textures available under each tab on the toolbar. The styleand texture that I chose produced the image on the following page:

This was the basis of my search engine buttonand the final product was achieved by adjustingthe brightness and light intensity using thetoolbar available I the application. Under thetab ‘3-D’ I chose an embossed image so that itwould produce an image that would stand out ofthe page, so that the user would recognise it

when I inserted into my home page.


Page 27

The next thing that I had to do was create the moving image that would changewhen the user performed a certain action. I used the ‘Javascript’ toolbar availableand I created different actions by clicking on each and altering the image.

As can be seen from the screenshot ofthe toolbar, to the left, there were fourfunctions that Adobe ImageStyler 1.0provided: noAction, onMouseOver,onMouseDown, onMouseOut. Thesefunctions all represent things that whenthe user performs a certain activity, willchange the image of the button, in thiscase. All that I had to do was click ononMouseOver and then change the imageto my liking. This is the image that theuser will see when he or she moves the

mouse cursor over the image of the button. This is a form of a Java applet. Next Ialso changed the image for onMouseDown, for when the user clicks on the imageand onMouseout, which would look the same as the first image. I thought that thiswould be interesting and would grasp the user’s attention. In the home page itself,it is rather eye-catching.

Once I had created this image I set out to create various other images using thisapplication, as it created such professional looking images that it really did impressme. I would give it a 9 out of 10 as a general application! The other images that Icreated as also visible in my web site on the various web pages. I created so manyimages that I think it to be more sensible to create hardcopies of the web pagesthemselves instead of giving an example of each.


Page 28

Screenshots

Macintosh Computers:I have mentioned the word ‘screenshot’ very often so far so I think it onlyappropriate to explain what this is. A ‘screenshot’ is basically a method of datacapture on a screen i.e. producing an image of what is visible on the screen. This isvery useful for documentation as it makes explaining all of the functions of aprogram or web site a lot easier. On Apple Macintoshes you can create a screenshot by pressing the following keys on the keyboard: Apple (the apple sign key) +shift (it doesn’t matter whether it is left or right) + 3. The arrow cursor changesinto a crosshair, which can then be used to select a part of the screen to create ascreenshot of. You simply have to press the mouse button and drag it across thescreen so that it covers the area you need. Next you simply leave the mouse buttonand a screenshot is formed. All you have to do now is use the paste function in yourword-processing application and voila, you have a screenshot of what was on thescreen.

Personal Computers (PCs):For PCs the screenshot system that is provided with the Windows operating systemis rather different. Here you have to click on the ‘Print Screen’ on the keyboard.This automatically creates an image of the entire screen. Next you have to paste itin an application that allows you to manipulate Bitmap (mapping of an image binarydigit by binary digit (1s or 0s)) images, such as Microsoft Paint. All that you have todo is paste the image and then select the portion that you want and then copy itusing the copy function. Next you enter the word-processing application that youhave and simply paste it in the document.


Page 29

Creating Frames

What are Frames?In my web site I decided to create a frame for each web page that would contain alist of links to the other web pages. I decided to do this to make the web site moreuser-friendly. Frames literally mean a web page made up of frames of other webpages. This in fact incorporates two or more web pages in one window. Theadvantage of this is that you can create columns down the side of a web page thatcontains all of the links in your web site, so that all of the web pages can beaccessed from that one web page. Luckily, Claris Homepage 3.0 covers this area ofweb authoring and so it was actually quite simple in creating frames.

The Process of Creating Frames:Firstly what I had to do was create a new web page that would contain the links onthe column, to the other web pages. I used Adobe ImageStyler 1.0 again to createthe buttons that I would use as links. These buttons can be seen on a print out ofthe web page for the frames, that I have included. I used the same background asI had used for all of the other web pages and this was set under the ‘view’ tab andunder ‘document options’ in Claris Homepage 3.0, as explained previously. Once thiswas done I simply saved the file and created a new frame page by clicking on ‘File’and ‘New….’ Under this I selected ‘Frame Page. Next a box showed up that asked mewhich files I would like to be viewed in my frame page. This screenshot shownbelow:


Page 30

Now I simply clicked on ‘Add File’ and browsed through the files that I wanted tobe viewed in my frame page. I selected the homepage and the web page containingthe buttons, which I had earlier created. I also selected ‘Document Orientation’ as‘Vertical’; as this meant that the two web pages would stand side by side in theframe page. Once this was done and I had clicked on ‘OK’ a web page with twocolumns appeared. Each had been linked to the web pages that I had previouslyselected. In fact the frames were now actually done. I viewed the web page inNetscape Navigator 4.0.1 and everything seemed to be fine. All that I had to donext was adjust the column width by clicking on the divide and shifting it to theleft so that the column on the left was narrower, where all the links would beshown. On the right now, I had my homepage. Once this was done I returned toClaris Homepage 3.0 and opened the column web page. I also opened the frame page.In the frame page I double-clicked on the right-hand side frame and a boxappeared:

Next I selected the file that this frame was assigned to once again to make surethat it was fully functional. This seemed to be working fine. After this under ‘framename’ I typed in the name ‘right’. This was essential in creating a proper link for thebuttons in the column.

Now I went to the column web page and here I selected firstly the button ‘searchengine’. I opened link editor and set the link by browsing as ‘searchengine.html’,where my search engine was located. Once this was done, on the bottom of the boxunder ‘target frame’ I typed in ‘right’. Alternatively I could have used the optionprovided (_parent) but I only realised this later and it didn’t make much of adifference. On the following page there is a screenshot of the link editor box andthe information that I typed into it.


Page 31

This now meant that if a user clicked on the ‘search engine’ button in the column,the search engine web page would appear in the right-hand side frame and not in anentirely new web page. This saved time as it meant that I didn’t have to create anew1 frame page for each of my web pages, as when the web site was loaded andthe homepage appeared, so would the column. This column would remain in thatframe, whatever other web page was being browsed. This was quite andachievement and took me quite a while to puzzle out as well. My frame page was nowcompletely done.


Page 32

Creating a Table

One item that I frequently used in my web site is a table. Tables are very useful asthey allow you to arrange images and text around a web page. Without tables, text

and images couldn’t runside by side. The majoradvantage of this isthat it saves space, butis also more attractivefor the user. Creating atable in ClarisHomepage 3.0 is quiteeasily done. Firstly youhave to click on the‘Insert’ tab on the menubar at the top of thescreen. From the pop-down menu you have toselect the button‘table’. A table iscreated and the box onthe left shows up:

Here you can set how many columns and rows you want and also the type of border,0 if you don’t want a border (the larger the number the ticker the border). You canalso customise the width and height and even set a background colour or image forthe table.

These tables turned out very handy for me and I used them quite often, even on myhomepage, to bring text and images together and fill up the page both height andwidth wise.


Page 33

Creating a Form

One of the other items that I have included in my web page is a form. I used a formto create my voting page. This voting page would allow the users to vote for theirfavourite Magic card and then submit this data to me, the author of this web site.There are several steps that I had to follow before the form was complete.

Firstly I had to click on the ‘insert’ tab in Claris Homepage 3.0. Of the list ofoptions that were available to me, ‘form’ was one of them. When I moved the mousecursor over ‘form’ another list of options popped up. The fist option that I selectedwas ‘form area’ as this would create an area in my web page that would be linked toany buttons created within it and automatically, therefore, perform a certainfunction on the given information. He tab that appeared is as follows:

As you can see on the imageto the left, there wereseveral options available butfirstly I needed to create a‘form area’ as a basis.


Page 34

Once this was done, a box appeared on the screen and on the web page a box thatlooked like a table appeared too:

After the box appeared, I had to fill in the details to make the form functional.Firstly, under the pop-up menu ‘method:’ I made sure that post was selected,because I wanted the results to be ‘posted’ to me by e-mail. Next, in the box‘action’ I typed in ‘mailto:[email protected]’. This, in effect meant that all thedata would be sent to the e-mail address ‘[email protected]’. The image that wasshown on the web page is as follows:

All that I had to do now was insert all of the information concerning the voting pagein the form box shown above. Once this was done I had almost achieved my votingpage. The only things left to do were to create a ‘reset’ and ‘submit’ button, allowingthe user to reset the information if he or she goes wrong, or send the informationto me once the form had been completely filled in and the text fields and pop-upmenus. The text fields and pop-up menu were used to create the form so that theuser could enter the details. I created a pop-up menu by selecting the ’insert’ tabagain and moving the cursor over ‘form’:


Page 35

As can be seen form this image, I had various types ofform constituents that I could make use of. To create apop-up menu, I simply click on ‘pop-up menu’ and a boxappeared. Here I had to define the values that I wanted inmy pop-up menu, i.e. in this case the editions that thebrowser could select from. Once this was done, I createdseveral ‘text fields’ as these would be used by the user tofill in personal information, for example, name, and ofcourse the name of the card. For each of the text fields Iset the maximum length to 30 characters so that the webpage looked uniform and professional, and also so that theinformation that I would receive, was concise. Once thiswas done I made use of a ‘check box’ as well so that the

browser could select ‘male’ or ‘female’. The last two items that I created were the‘submit button’ and ‘reset button’ I simply inserted these into the form area, at thebottom and the action was therefore already defined. The form was now completeand all that I had to do was dress up the web page. The voting page was then finallydone.

Here is an example of a result I obtained when I submitted the form to check thatit was functional:


Page 36

Verification and Web Site Statistics

Once my web site was completed I checked how long it would take todownload my web site and whether all of the links in my web site were fullyfunctional. This was possible in Claris Homepage 3.0. Firstly I had to click onthe ‘File’ tab and then click on the ‘Open Folder as Site’ button. A boxpopped up and I browsed to the folder that contained all of the files relatedto my web site. The application then fabricated a new file that would allowme to view all of the statistics related to my web site. The following boxappeared on the screen:

This box showed various other information, including size of the files andthe dates that they were last modified. The following thing to do, to checkthe download rate required for web site, is to click on the button on thetoolbar at the top of the box which is third from left. I did this whilsthighlighting the entire folder and the box on the following page appeared:


Page 37

As you can see from this boxon the left, for my entiresite, using an ISDN(Integrated System DigitalNetwork) modem. This is oneof the faster modems. Theother timings are given forother specific modems. A T1line is equivalent to twoISDN lines and is in effect afree phone line that is alwaysavailable. Through means ofselecting each file andchecking the statistics underthe ‘selection’ tab, I foundout that the averagedownload rate of my webpages is 20 seconds, which isquite reasonable.

Next I verified my links by clicking on the button on the toolbar called ‘verify links’.Another box popped up telling which links were not functional and all that I had todo was fix these links by browsing to the appropriate files.

I had now secured all of the links in my web site, thus making it fully functional.


Page 38

Documents

Technical Documentation - XS4ALL · Computer Studies Coursework- Internal Assessment- IGCSE Kartik Kumar 1999/2000 Page 17 link, as the name suggests, creates a link that allows the