Your SlideShare is downloading. ×
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Computing Science Dissertation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Computing Science Dissertation

277

Published on

Diabetes - The Truth: An Interactive Web Tutorial consisting of HTML, CSS, Java and JavaScript.

Diabetes - The Truth: An Interactive Web Tutorial consisting of HTML, CSS, Java and JavaScript.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
277
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Diabetes: The Truth – An Interactive Web Tutorial Ross McHardie April 2008 Dissertation submitted in partial fulfilment for the degree of Bachelor of Science with Honours in Computing Science Department of Computing Science and Mathematics University of Stirling
  • 2. AbstractProblem The problem that was set out at the beginning of this project was to find a suitableway of informing newly diagnosed diabetics in such a way that it was fun and not a lot ofmundane reading that made it feel like homework. The existing resources that I found didjust that, although it was content-rich the information was not really conveyed in the bestpossible way in my opinion.Objectives The objectives of this system (as described later on in this document) were to providean educational resource that was both fun and informative, making use of such technologiesas Java and Adobe Flash.Methodology The methodology of the project is quite simple; a design plan was drawn up ofpossible page layouts and also possible logos to represent the system where each presented itsown advantages and disadvantages. The design solutions were cut down to three ideas, thefirst using tabulated data, the second using a chain-like navigation pane with a content paneand the third using an external style sheet and multiple layers. The final solution that wasdecided upon was option three as it provided the most professional looking layout from allthree. The next step was to learn how to use Adobe Flash and how to program inActionScript to allow interactivity to be implemented into some of the multimedia elementsof the system. This proved to be not as challenging as was first thought, as you will see laterin this document. The Flash elements of the system were intended to demonstrate certainthings to the user in a way that was more entertaining than reading a long passage of text andalso to provide the user with some feeling of control. The final step was to produce a Java Game Applet for the more juvenile of users toteach some of the same knowledge that is included in the system. Since Type 1 Diabetes ismore common in younger patients, the game is heavily oriented to that area. Once all of these elements had been created it was simply a matter of saving theminto their own separate files (to minimise on duplicate code) and link them into the pagesusing simple HTML tags.Achievements From the technical chapters below it is evident that the objectives set out previouslyhave been achieved to a full degree. Whether this is the preferable way to teach Diabetesremains to be seen but it all comes down to people having different learning methods andwhatever works for them they should stick with. The greatest achievements in this project are the skills that are transferable to laterlife. For instance, the new found knowledge of Adobe Flash and ActionScript will help in thefuture as this is an area that I am most interested in. 1
  • 3. AttestationI understand the nature of plagiarism, and am aware of the University’s policy on this. Icertify that this dissertation reports original work by me during my University project exceptfor the following:  The colour-blindness images in section 3.2.2 were produced by www.vischeck.com  My supervisor and myself adapted the accessibility code discussed in section 3.2 pending a meeting and the testing of the code.Signature Date 2
  • 4. AcknowledgementsI would like to acknowledge the following people without whom this project could not havereached its fruition:  Dr Simon Jones – my lecturer who has sat through many meetings and listened to me complain about the differences between Internet Explorer and Firefox.  Craig McKenzie – my trusted friend who helped me with design decisions and was one of the testers of the final solution.  Jennifer Shaw – Type 1 diabetic who tested the system and gave her feedback.  The various tutorials and websites I consulted while trying to learn Adobe Flash and how to implement Java applets.  Any one else who has been there for me during this project, thank you for your patience, your kindness and most of all your encouragement. 3
  • 5. Table of Contents Abstract ................................................................................................................................ 1 Attestation ............................................................................................................................ 2 Acknowledgements .............................................................................................................. 3 Table of Contents ................................................................................................................. 4 List of Figures ...................................................................................................................... 5 1 Introduction ................................................................................................................... 6 1.1 Background and Context ....................................................................................... 6 1.2 Scope and Objectives............................................................................................. 7 1.3 Achievements ........................................................................................................ 7 1.4 Overview of Dissertation ....................................................................................... 7 2 State-of-The-Art ............................................................................................................ 9 3 System Overview......................................................................................................... 13 3.1 HTML and Cascading Style Sheets (CSS) .......................................................... 13 3.2 Page Structure ...................................................................................................... 16 3.2.1 Accessibility Issues ..................................................................................... 21 3.2.2 Colour-blindness Issues ............................................................................... 21 3.3 System Interactivity ............................................................................................. 25 3.3.1 JavaScript .................................................................................................... 25 3.3.2 System JavaScript Approach ....................................................................... 26 3.3.3 Java Applets................................................................................................. 30 3.3.4 Adobe Flash ................................................................................................. 32 3.3.5 Blood Monitoring (Drag and Drop)............................................................. 33 3.3.6 Ketone Analysis (The Click ‘n’ See approach) ........................................... 34 3.3.7 ............................................................................................................................ 35 4 Conclusion ................................................................................................................... 37 4.1 Evaluation ............................................................................................................ 37 4.2 Future Work......................................................................................................... 37 References .......................................................................................................................... 39 Appendix A Main Content Source Code ............................................................................ 40 4
  • 6. List of FiguresFigure 1. The possible long-term effects of poorly treated Diabetes .................................... 6Figure 2. The Diabetes UK’s website ................................................................................. 10Figure 3. The American Diabetes Association’s website ................................................... 11Figure 4. The implemented system ..................................................................................... 15Figure 5. The Content Page Layout with Interactivity links ............................................... 18Figure 6. The Categories Page Layout ................................................................................ 19Figure 7. The Content Page Layout without Interactivity links .......................................... 20Figure 8. The main page with enlarged text........................................................................ 21Figure 9. The original image of the system that was input to the vischeck engine ............. 22Figure 10. The system as seen through Deuteranope colour-blindness ............................ 23Figure 11. The system as seen through Protonope colour-blindness ................................ 24Figure 12. The system as seen through Tritonope colour-blindness ................................. 25Figure 13. JavaScript Source Navigation Bar ................................................................... 26Figure 14. Dynamically created Search Results ............................................................... 28Figure 15. Image Rollover: Default on the left, Rollover on the right.............................. 29Figure 16. Example of the popup window JavaScript ...................................................... 30Figure 17. Java Game Applet............................................................................................ 31Figure 18. Blood Monitoring (Drag and Drop Flash Demonstration) .............................. 33Figure 19. Reading produced from blood monitoring test ................................................ 34Figure 20. End result of the Ketone Analysis demonstration ........................................... 34 5
  • 7. 1 Introduction1.1 Background and Context Diabetes is a condition that affects the pancreas and involves not being able to breakdown sugar in the blood. A typical human body produces what is known as insulin to helpcontrol this break down and it is this element that is weakly produced in a diabetic’s body,hence the possible need for insulin injections and each day many people are newly diagnosedwith this condition. There are three main types of diabetes; Type I (or insulin dependent diabetes), TypeII (or insulin-independent diabetes) and Gestational (only occurring during pregnancy). TypeII diabetes is usually treated with either tablets or diet alone, with no need for injections,hence the alternative name of insulin-independent diabetes. If diabetes is not treated correctlyand goes untreated for a long period of time it can have serious terminal effects such asblindness, kidney disease, amputation of limbs and so on. Figure 1. The possible long-term effects of poorly treated Diabetes There is research being conducted every day to try and determine exactly what causes thiscondition and if a possible cure can be found. This is not in the foreseeable future but we area lot closer to it than we were 5-10 years ago. Recently in the Metro newspaper there was anarticle that stated scientists have discovered that black tea and frogspawn could be used totreat Type-II Diabetes instead of the more traditional methods, as described below. Frog slime and black tea could help treat diabetes – though fortunately you don’t have totake them together. A secretion from the skin of a South American paradoxical frog canstimulate the release of insulin – the vital hormone that is deficient in Type II diabetessufferers, researchers found. The frogs use the substance – pseudin-2 – to help protectthemselves against infection. Dr Yasser Abdel-Wahab, from the University of Ulster, said: ‘We have found that pseudin-2 has the potential for development into a compound for the treatment of Type II diabetes.Now we need to take this a step further and put our work into practice to try and helpdiabetes sufferers.’ 6
  • 8. Britain has about 2.3million diagnosed diabetes sufferers. Most have Type II diabetes,which is strongly associated with obesity. Meanwhile, scientists at the University of Dundeehave discovered the potentially therapeutic properties in black tea. They have found severalblack tea constituents, known as theaflavins and thearubigins, mimic insulin action. However, Dr Graham Rena warned in the journal Aging Cell that tests were in their earlystages and diabetes sufferers should continue to take their prescribed medicine before‘rushing to drink masses of black tea.’ [1] The context of this project is to provide an online system to allow newly diagnosedDiabetics to learn about the condition through easy to use pages and interactive tutorials usingFlash and Java technologies respectively.1.2 Scope and Objectives The main objectives of this project are to provide an informative resource and also togive a greater understanding of what diabetes actually is. This project will also describe thetechnologies involved in controlling and monitoring diabetes as well as how they operate.The target audience of this project is essentially newly diagnosed diabetics; however, thisresource could be of use to anyone, from friends and family of diabetics to medicalenthusiasts. There are many diabetes resources available on and offline, many of which arereadily available through a simple Internet search, using a search engine such as Google,however, through research of existing materials in the same field, the existing content seemedrather mundane and text-intensive (see Chapter 2 – State of the Art for more information).1.3 Achievements Through the course of this project I have achieved many things, which were notpossible before undertaking this project. Some of these include:  Gaining a further understanding of HTML, CSS and Java  Learning what Java Applet are, how they differ from Java applications and how to implement them into an HTML document.  Learning how to use the Flash technology and its programming language; ActionScript.  How cross-browser compatibility must be handled to make sure everyone gets the same experience  How much of an issue accessibility in a web system is and how to address it.1.4 Overview of Dissertation The context of the project as stated above is to provide a web-based system to allowDiabetics, essentially newly diagnosed Diabetics, to learn about the condition, its manydifferent types and what to do in each case. Flash and Java technologies, respectively, havebeen implemented into the system to allow an interactive element to be present within thesystem that presents the user with activities that they can perform in relation to certaindiabetic treatments. However, this system is meant as an information resource and is not meant to be areplacement for professional medical advice or a consultation from a practising doctor, thatbeing said, a disclaimer is present on all the pages of the system to make the user aware ofthis fact. The following pages of this dissertation detail exactly what was carried out during thecourse of the project. For example, what worked, what did not work, why and moreimportantly what was done to rectify the components that did not work. Firstly, the existing materials in this specific field will be analysed and discussed, such as,what is wrong with them and why there is need for this system to be implemented. 7
  • 9. In the following technical chapters, each of the technologies used within the system will bebriefly described then a detailed description of how they were applied will be given alongwith screenshots to diagrammatically portray certain elements of what has been described.The basic HTML and Cascading Style Sheet structure of the system will form the basis of thetechnical chapters then branching out into the interactive components i.e. how the Flashanimations were designed and implemented and how the applet was incorporated into thebackbone of the system. The testing and evaluation section gives an insight into users’ reactions to the system, forinstance, what they liked about it, what they did not like about it, what aspects of the systemthey would change and so on. The evaluation section will list any improvements or changesthat may be needed to the system (given more time these changes/improvements would beimplemented into the system) as well as future work intended for the system if it was to beemployed. 8
  • 10. 2 State-of-The-Art The analysis stage of this project involved researching what Diabetes resourcesactually already existed and how they differed from the learning resource I had envisioned. When considering diabetes information and resources there are two mainorganisations that are both well-respected and content rich. These are Diabetes UK (formerlythe British Diabetic Association) and the American Diabetes Association. Both have anextensive resource on what diabetes actually is and how it could be treated. However, sinceeveryone’s genetic make up is different and different bodies respond to different treatments indifferent ways, the information found in these resources should in no way, shape or form besubstituted for real medical advice from a practicing doctor. The following pages describeboth online resources with an accompanying screenshot of each system’s main page. 9
  • 11. Figure 2. The Diabetes UK’s website The Diabetes UK website offers a wide selection of information from a guide ondiabetes through to current research developments and also offers professional information.They also offer a useful two-minute test to find out if you are at risk of getting diabetes andalso the latest news concerning diabetes related issues. Some of the other features of this resource include diabetes specific recipes with lowcarbohydrate content; providing the information in other languages; getting involved infundraising for diabetes research and the essential information that every diabetic (or peopledealing with diabetics) should know, that is, a sort of what to expect resource and so on. Along with this extensive website resource Diabetes UK have also released manyinformative leaflets, which can be picked up from your local health surgery or local hospital,that deal with a lot of the information that can be found on their website because although weare in the age of technology not everyone has access to a computer (or knows how to useone). 10
  • 12. Figure 3. The American Diabetes Association’s website The American Diabetes Association has a more comprehensive site in that it has sub linksto different diabetes related areas that branch out into more detail as you hover over the links.The content in this resource is much the same as in the Diabetes UK resource albeit presentedin a much more elaborate way. The American Diabetes Association also has a sectiondedicated to diabetes prevention and not just the “Are you at risk?” two-minute test like itsUnited Kingdom counterpart. The information on this resource is much more readilyavailable than on the Diabetes UK website although both resources provide a website searchfacility. To coincide with this online resource, the American Diabetes Association also offers forpurchase specialised diabetes books and gifts; for further reading or such like. The readingmaterials available range from cookbooks to books on treatment and care, there are alsobooks for professionals on offer. Instead of giving an extensive list of the gifts available fromthem, there is a link to a “Gift of Hope” catalogue. 11
  • 13. The thought of loads and loads of pages filled with boring, dry information seems likeit will be very mundane and trivial to the reader, especially if this reader is a young child, sowith that in mind, this project implements a resource system that incorporates a littleinteractivity into it. The interactive elements implemented in the system are split into two sections,interactive flash demonstrations and a Java game applet. The first involves visualdemonstrations of how the insulin injection devices, blood-glucose measuring monitors andso on operate. The second section, the game applet, is specifically aimed at young children, oreven for people with a low attention span who just want to have a little fun while they learn.As Type 1 Diabetes is more frequent in young people, the game is more focused to this typeof diabetes than any other, appropriately titled Absorb The Insulin (more can be read about theInteractive elements of the system in Chapter 3.3). 12
  • 14. 3 System Overview3.1 HTML and Cascading Style Sheets (CSS) Hypertext Mark-up Language (HTML) is a set of programming commands thatallows the programmer to create and format web pages for display in a web browser in aspecific way (sort of like a translator for high-level languages). There have been manydifferent variations of the HTML language since its inception, spawning from an early versionknown as SGML to the state that it is now, known as XHTML (this is a combination of XMLand HTML). The “<head>” section of the page is used to include “meta-tags” in the HTMLdocument. Meta-tags allow the programmer to describe the current page and add appropriatekeywords that describe the page; these keywords can be used to find a page via a searchengine. An example of a meta-tag is shown below: <meta name="keywords" content="diabetes, type, one, insulin, injections, syringes, flexpen, syringe,pen, device"> The above meta-tag is taken from the “Insulin Injections” page included in the systemand as you can see the tag has two attributes; “name” which tells the browser which part ofthe meta-tag is being referred to and “content” which tells the browser (or searching script)specific words to look for within the page. The code within the “<body>” tag corresponds to what is actually displayed by theweb browser when it is executed. Each tag in the document comes with its own set ofoptions, known as attributes, which can be used to manipulate the way the tag is “translated”.For example: <img src=”images/image_name.gif” width=”250” height=”250” alt=”Image Description”> The above tag is used to embed an image in the web page and it includes four attributes.The four attributes relate to how the image is displayed on the web browser. The “src”attribute relates to where the file is actually stored on the server, the height and widthattributes relate to the actual height and width of the image, it is important to note that thesecan be any height and width or if they are omitted then the default height and width of theimage will be used, the “alt” attribute stands for alternative text. The alternative text attributeis implemented so that if for some reason the image cannot be displayed then a description ofthe proposed image will be displayed instead. This attribute is also important whenaddressing accessibility issues as it should provide an adequate description of the image foruser’s using a screen reader and so on i.e. for blind people who obviously cannot experiencethe same things as everyone else can. Dynamic HTML is another form of the mark-up language that involves using the“<div>” tag and layers to layout a page instead of using tables; this adds a more professionaland appealing look to the page instead of an apparent list of tabulated data. The combined useof cascading style sheets (CSS) and HTML allows for a page layout that not only looksprofessional and elegant when displayed in a web browser but also in the source code as wellbecause less attributes need to be included in the tags. CSS was developed by the sameorganisation as the developers behind HTML, the World Wide Web Consortium (W3C). “The term cascading derives from the fact that multiple style sheets can be applied to thesame Web page.” Webopedia – What is CSS? (http://www.webopedia.com/TERM/C/CSS.html) 13
  • 15. Using either an external CSS file or the embedded “<style>” tag formatting of pagescan be done once, in the external file or in the head section of the page for each specific tag orsection within the document and every time a particular tag or “id attribute” is used it willhave the attributes that were defined previously, this cuts down on the duplication of code. Acombination of an external CSS file and a JavaScript file were adopted to apply the style tothis system as it makes use of a JavaScript function to detect which browser is being used andreads in the appropriate style sheet accordingly. Dynamic HTML has become the standard for web page design as it allows pages tobe displayed using more images and less text instead of text and colours which is easier on theeyes and less heavily dependent on reading a large excerpt of text, which is always a bonusfor the less literate of users. However, even though this is the preferred method of designingweb pages, it does pose some accessibility issues that may cause some problems. The mostobvious issue is that of blind user’s viewing the system. If the system is heavily imageoriented and the proper accessibility measures are not in place then this will impair the user’sexperience. To ensure user’s running a screen reader or a text only browser experience thesystem the way it was intended, the “alt” attribute will be implemented into all images so tooffer alternative text that describes the image to the user, this also helps if the image cannot beloaded. At this point it is important to mention style sheets and cross-browser compatibility.With the heavy rise in popularity of the web browser Firefox from Mozilla less people areusing the industry standard of Microsoft’s Internet Explorer and as these two differentbrowsers were developed by different companies it is understandable that there will be somecompatibility issues that arise. While it is important to give users of a system the same experience regardless of thesoftware they are using to view it, it is simply not possible to cater to every user, as every userwill want something slightly different than what has been implemented. A way to combat thisis to provide a few options for users to choose from or even use browser detection to displayone style sheet if the user is using Internet Explorer and another style sheet if they’re usingFirefox or any other browser that isn’t Internet Explorer. 14
  • 16. Page header Container Page Header Links Page Heading Page Header Search Accessibility Main Content Login Box15 Left Sub Item Figure 4. The implemented system Right Sub Item Page Footer
  • 17. 3.2 Page Structure The figure on the previous page is a screenshot of the main page of the implementedsystem and the corresponding labels depict all the different sections on the page as they areimplemented in the external style sheet. The page is made up of four main layers: Container, Page Header, Main Content and PageFooter.  The “container” layer is the bottom layer, which all the other layers lie on top of.  The “Page Header” layer is on top of that, which displays information generic to all pages, that is, the system logo, navigation bar and search box.  The “Main Content” layer is the only layer that is present throughout every page in the system; it displays all the information and images that correspond with the current page or section.  The “Page Footer” layer is another consistent layer, in that, it does not change from page to page; the page footer displays the disclaimer for the system. The remaining layers, as illustrated above, all exist within these layers and act aseither part of the consistent system design or as part of the page content. In some cases,particularly the “Multimedia” pages, the sub sections do not appear, because they are simplynot needed. It is important to note that the login box, which is illustrated above under the“Accessibility” layer isn’t actually fully implemented (more on that later). Making good use of the external style sheet element of the system, discarding the genericnavigation elements of the page layout, the pages have either one of three different layouts.The first of which can be seen on the main page consisting of the main content layer, and thetwo sub-item layers which link to their own separate sections. The main content layer describes what the current page is actually discussing with anappropriate picture to the right of the passage which illustrates a certain part of the currenttopic, for instance on the Type 1 Diabetes page there is an image of an insulin deploymentpen device. Separated by the horizontal rule tag (“<HR>”) the information that follows it isseparated into two sub-items. This is usually information that is related to the main contentbut can be split into its own section to allow the reader to distinguish between the two. As you can see from the screenshot of the system, Figure 3 in this document, four differentareas separate the sub sections. The first area is the main section heading which provides thename of the page or section that is being discussed. The area immediately under this providesan alternative name for the section, or a brief tagline so to speak. The third area discussedhere is a brief description of what the section is actually about with a “Read more…” link thatnavigates to the page’s own section. The fourth, and final, area mentioned above displays anappropriate image for that particular section. The skeletal HTML code for the pages and how it relates to the external style sheet isillustrated by the following: 16
  • 18. (Note: Only the HTML for the Page Header is present, the source for the main content canbe found in Appendix A.) <div id="container"> <!-- Start of Page Header --> <div id="page_header"> <div id="page_heading"> <a href="index2.html" title="Home" onMouseOver="document.rollover.src=logo_over.src" onMouseOut="document.rollover.src=logo.src"> <img src="images/logo.gif"name="rollover"> </a> </div> <div id="page_headerlinks"> <ul> <li><a href="general_info.html">General Information</a></li> <li><a href="multimedia.html">Multimedia</a></li> <li><a href="useful_info.html">Useful Information</a></li> <li><a href="glossary.html">Glossary</a></li> <li class="last"><a href="#page_footer">Disclaimer</a></li> </ul> </div> <div id="page_headersearch"> <h3>Search:</h3> <form name="formSear" action="search.html" method="GET" onSubmit="return qs();"> <div> <input name="searWords" type="text" /> <input name="Send" type="image" src="images/button_go.gif" class="button" /> <div class="clearthis">&nbsp;</div> </div> </form> </div> <div class="clearthis">&nbsp;</div> </div> <!-- End of Page Header --> As you can see, as described previously, everything on the page exists within the containerlayer and from this layer additional sub layers are introduced, everything to do with the pageheader resides within the page_header layer with a suffix to each additional inner layer, apartfrom the system logo. The clearthis layer is simply for spacing purposes – to make surelayers do not overlap. By manipulating the way the external style sheet was implemented into the HTMLdocument a new layout could be produced without tampering with the original style sheet inany way. This was done by only including the id attributes that were actually required for thatparticular section for instance, in the Gestational Diabetes section of the system there was noneed to include the sub-items as only the blood monitoring section related to it, so a hyperlinkwas placed after the passage instead of using the sub item layers. The third, and final, manipulation of the external style sheet involves extending the maincontent layer to allow a list of all the sections to be included on the one page. These sectionindex pages where included for the reason mentioned earlier in this document so that everyuser that visits the site has the same experience as everyone else. If the user has JavaScriptturned off for some reason then they will not be able to use the implemented search engineincluded with this system, or even view the system as it was intended (more on this in chapter 17
  • 19. Container Page header Page Header Search Page Header LinksPage Heading Accessibility Main Content can be found within the system. with appropriate image and current location indicator18 Blood Monitoring Figure 5. The Content Page Layout with Interactivity links Demonstration 3.3 – Interactivity). The following are screenshots of the three different types of layout that Insulin Injection Page Footer Demonstration
  • 20. Container Page header Page Header Links Page Heading Page Header Search Accessibility19 Category Links Figure 6. The Categories Page Layout Page Footer Note: The sub item and main content picture layers have been omitted.
  • 21. Container Page header Page Header Links Page Heading Page Header Search Accessibility20 Figure 7. The Content Page Layout without Interactivity links Page Footer Main Content with appropriate picture and current location indicator Note: The sub item layers have been omitted.
  • 22. 3.2.1 Accessibility Issues The “Accessibility” layer draws attention back to the earlier reference of catering to a largeselection of viewers, as a large varied audience is required it would be inadequate that usersnot browse the system simply because they were unable to read it. With this in mind, thesystem is implemented with an increase and decrease text size function to allow its users toenlarge the text as they see fit (kind of like an electronic magnifying glass). The followingfigure shows a screenshot of the system with enlarged text: Figure 8. The main page with enlarged text As you can see from the screenshot above, the accessibility options make the text biggerand much easier to read for people with bad eyesight.3.2.2 Colour-blindness Issues Of course, text size is not the only accessibility issue to consider, there are also severaldifferent kinds of colour-blindness that may affect the way the system is viewed by someusers. The most common type of colour-blindness is known as Deuteranope, which is ared/green deficit. The remaining two types are Protonope, another red/green deficit andTritonope; a blue/yellow deficit – however this type is very rare. The website http://www.vischeck.com allows you to upload an image or submit a URL totheir Colour-Blindness Engine and it will output an image of how the system will look topeople who suffer from different types of colour-blindness. 21
  • 23. Figure 9. The original image of the system that was input to the vischeck engine The Colour-Blindness Engine takes a while to load depending on the size of the image filebut once the operation is complete the original image is presented adjacent to the conditionimage, depending on which type of colour-blindness you selected. The figures that follow are the results that came from running the Colour-BlindnessEngine on a screenshot from the implemented system. 22
  • 24. Figure 10. The system as seen through Deuteranope colour-blindness As you can see from the screenshot above, people suffering from Deuteranope colour-blindness will see the system just the same as any other person without the condition. 23
  • 25. Figure 11. The system as seen through Protonope colour-blindness As this is another form of red/green colour-blindness the system will be displayed inexactly the same way as someone with Deuteranope or someone that is not colour-blind at all. 24
  • 26. Figure 12. The system as seen through Tritonope colour-blindness As Tritonope colour-blindness is a blue/yellow deficit and the page layout is heavilydependent on the use of blue shaded images it is understandable that the system would beperceived slightly differently to people suffering from this condition. As you can see from thescreenshot above, the system does not look to far from the original, although, it looks morelike a shade of grey than blue.3.3 System Interactivity This section of the dissertation involves discussing all the interactive elements that wereimplemented, focusing heavily on the Multimedia section of the system. Interactivity wasnecessary in the system as it added certain elements that were missing from existing learningresources to give the user an interactive experience and also give the feeling that they hadsome level of control over their learning instead of passage after passage of mundaneinformation. There are three different elements of interactivity that will be discussed in thissection; these are JavaScript, Java Applets and Adobe Flash. However, it is important to note at this point that the JavaScript implemented within thesystem as no impact on the user’s learning whatsoever, it is their to aid the inner workings ofthe system, that is, loading in the appropriate style sheet, providing the accessibility functionsas well as running the search engine (more on this in Chapter 3.3.1).3.3.1 JavaScript A Web scripting language developed by Netscape, JavaScript shares selected attributesand data structures with the Java programming language; however, it was developedseparately, and it is not Java. JavaScript works within an HTML page, and is supported byNetscape versions 3.0 and higher. The Microsoft browser, Internet Explorer, supports asubset of JavaScript, called JScript. [2] 25
  • 27. JavaScript is usually used within an HTML page to do things that raw HTML is incapableof doing alone such as browser-detection, manipulating the browser, manipulating the pageand so on. As it is derived from Java, as mentioned above, it is also capable of doingcalculations and other functions and displaying the results in a pre-formatted HTMLdocument. JavaScript is free to interpretation, in that it can be used in whatever way theprogrammer sees fit. The website The JavaScript Source [3] provides an extensive archive ofscripts that programmers from around the world have developed and contributed to thewebsite for learning purposes or for incorporation into websites (as long as the original creditis maintained). Figure 13. JavaScript Source Navigation Bar These scripts are separated into different sections depending on the complexity of thescript and what each script does to the browser or page. Two useful features are also includedhere to aid the user, the first of these features is a Script Count, which tells the user visitingthe site how many scripts in total the website offers. The second of these is more useful for aprogrammer who is in a hurry for a quick solution, instead of searching through the categorypages they can simply use the Script Search box, which is indexed with every script availablewithin the site.3.3.2 System JavaScript Approach JavaScript can be implemented into an HTML document in two different ways, hard codedinline with the HTML code or read in from an external file. However, both methods requirethe <script></script> tag regardless of the approach you adopt. The approach adopted by the system is the latter approach. This approach is more efficientbecause the JavaScript code implemented throughout all of the pages is consistent so this cutsdown on the duplication of code and makes the HTML code more concise and easier to read.The JavaScript file is implemented in more or less the same way as the style sheet except thatthe src attribute is used instead of href. For example: <script src="script_file.js"></script> Coming back to an earlier point made in this document, because of some of the cross-browser incompatibility issues that were discovered, two different style sheets had to beproduced. To combat this issue of which style sheet to use at what time the following scriptwas implemented: if ((navigator.appName).indexOf("Microsoft")!=-1) { document.write(<link rel="stylesheet" href="style_IE.css" type="text/css">); } else { document.write(<link rel="stylesheet" href="style.css" type="text/css">); }The way the script operates is that if the browser is from Microsoft© then a line of code isdynamically written into the HTML document that tells the browser to read in the style sheetcalled “style_IE.css”. However, if the browser used to view the page is not from Microsoft©then the default style.css is dynamically read into the browser instead. 26
  • 28. The JavaScript function that was the most problematic to implement was providingthe accessibility option to allow increasing and decreasing of text size on all of the pageswithin the system. The reason this function was so problematic was because a limit on both incrementsand decrements was implemented to prevent the text size getting too small or too big. Thisposed problems because the originally implemented if statement meant that when the textreached it’s maximum text size the script was rendered useless because it was obviously toldto stop when it reached this size and not do anything else. The only foreseeable way tocombat this was to indicate to the user that once the maximum text size was reached they hadto click on the default text size hyperlink to decrease the text size again; this seemed veryinefficient. The JavaScript function that follows is the an excerpt from the finalimplementation of how the solution was found:if (curSize != maxSize && inc > 0 || curSize != minSize && inc < 0){ newSize += inc; document.getElementById("container").style.fontSize = newSize;} else{ // Do nothing}To increase or decrease the text size the user must click on one of the hyperlinks in theaccessibility table, which hyperlink they click determines how the script executes and thevalue of the inc parameter that is read into the script, either “+2” or “-2”. The if statement above states that if the current text size is not equal to the maximumallowed text size and the parameter value is positive or if the current text size is not equal tothe minimum allowed text size and the parameter value is negative then continue else donothing. If all of these conditions are met the script moves onto the next section of the scriptwhich actually does the increment or decrement. Another variable is used here, newSize,which symbolizes the text size after the change, added to this variable, is the parametervariable read in by the user’s hyperlink click. The final part of the script involves manipulating the style of the document to allowthe text size to change. The script states that all the text within the element container shouldhave the value newSize. See Figure 8 for a screenshot of the results. The JavaScript behind the search engine uses the keywords found in the meta tags ofeach of the HTML pages to search through an array JavaScript file stored on the website’s filestore. When the user clicks on the Search button the script executes and dynamically createsthe results in the main content section of its own page using the same style as the skeletalcode used in the rest of the system. The HTML that executes the script looks something likethis:<form name="formSear" action="search.html" method="GET" onSubmit="return qs();">As you can see the script is executed from the main form tag, when the user submits the datathe browser goes and looks in the external file for a function called “qs()” and passes throughthe keywords that were entered. As mentioned previously, the search results page isdynamically created through the search process, this is done through two files, such as:<script type="text/javascript" language="JavaScript" src="webdata.js"> </script><script type="text/javascript" language="JavaScript" src="searchfunc.js"> </script>The dynamically created page includes numerical results and highlights where the keywordsappear in the results, as illustrated on the following page. 27
  • 29. Figure 14. Dynamically created Search Results The next JavaScript function that was implemented within the system was more of asuperficial extra feature than anything else. As you can see from Figure 4 above, the SystemLogo is always present within the header of every page and when the user hovers over theimage, the colour of the eagle changes from black to blue and a tool tip appears indicating tothe user that if they click on the logo it will navigate them to the homepage. This is done byincluding two extra attributes in the HTML hyperlink tag then cross-referencing them withthe appropriate function in the JavaScript file.<a href="index2.html" title="Home" onMouseOver="document.rollover.src=logo_over.src"onMouseOut="document.rollover.src=logo.src"><img src="images/logo.gif" name="rollover"></a>The HTML here is saying that when the user hovers over the hyperlinked picture go and lookup the script function to find logo_over.src and load it in as the source of the image, it knowswhere the image is by the name attribute being set to “rollover” and the linedocument.rollover.src, the title attribute Home is also displayed as a tool tip when the userhovers over the image. When the user moves the pointer away from the image i.e. is nolonger hovering, then the image reverts to the default image defined in the <img> tag.if(document.images){ logo = new Image logo_over = new Image logo.src=images/logo.gif logo_over.src=images/logo_over.gif }The above is the corresponding JavaScript function for the rollover image feature describedabove. The functionality of this script allows for the creation of two Image objects within the 28
  • 30. document and defines the source of them to images stored in a folder called images on thewebsite’s file store. The last two lines of the JavaScript function relate to the onMouseOverand onMouseOut attributes mentioned above in the HTML code. Figure 15. Image Rollover: Default on the left, Rollover on the right Staying with the topic of images, some of the images used within the system were fartoo big to display at their full size (e.g. pen device diagrams) without compromising theoverall design of the system. To combat this a simple popup window script was implementedthat simply loaded the full size image into its own customised browser window. It isimportant to note that the same effect can be achieved by using the “target=_blank” attributeof the HTML hyperlink tag. The JavaScript function that makes this all possible isimplemented as follows:function popup(url, name, width, height){ settings="toolbar=no,location=no,directories=no," + "status=no,menubar=no,scrollbars=no," + "resizable=no,width="+width+",height="+height; MyNewWindow=window.open(url,name,settings);}The script is basically telling the browser to launch a browser window with those settings andthe URL specified by the user. The following is an example of how the script can beexecuted from within an HTML document:<a href="#" onClick="popup(images/syringe_demo.jpg, Win1, 440, 440); return false"> When the user clicks on the hyperlinked image, the JavaScript function popup is executedwith the following variables; the url (i.e. the full size image) that the browser window is tonavigate to, the name of the window, and the height and width of the window. It is best tomake the window slightly bigger in height and width than the actual image to make sure theentire image fits into the window correctly. For example, 29
  • 31. Figure 16. Example of the popup window JavaScript3.3.3 Java Applets Java is a programming language expressly designed for use in the distributedenvironment of the Internet. It was designed to have the "look and feel" of the C++ language,but it is simpler to use than C++ and enforces an object-oriented programming model. Javacan be used to create complete applications that may run on a single computer or bedistributed among servers and clients in a network. It can also be used to build a smallapplication module or applet for use as part of a Web page. Applets make it possible for aWeb page user to interact with the page. [4] As technology has advanced through the years, Java has become more and more popular.Everywhere you look chances are Java will have had some part to play in what you arelooking at. Java can be found anywhere, from the software on your mobile phone to thesatellite navigation system in your car. It seems that since 1995, Java has become more thanjust an island in Indonesia. It is the latter part of the above definition that will be discussed in this document as aGame Applet was implemented to try and maintain the attention of a younger audience withType 1 diabetes. Java applets are similar to JavaScript in that they can perform simplecalculations and so on, except that applets can use the full power of the Java technology.However, both technologies interact with the user without having to sending anything back tothe server, making the processing completely client-side and much faster to load. The general design of the applet involves five images, the player (who bears a strikingresemblance to Pac-Man© but without the jaw movement), “Captain Sugar” the villain in thegame, the injection to lower sugar level, a bullet to destroy the sugar and the grass to providethe terrain. Instead of having a static background that the player simply moved across, thereis an implementation of what is known as a Tile Map. Tile Maps were very popular back in the days when two-dimensional gaming was all therage, platform games like Super Mario Bros. and Sonic the Hedgehog are examples of these.The way the tile map is implemented in the applet is the map is first created in ASCII formusing a simple text editor, using ASCII symbols for each different tile within the game, thenreading the text file into a 2-d array and corresponding each character in the array with an 30
  • 32. image stored on the website’s file store. The following is an example of a primitive ASCIItile map before it has been read into the applet: 33333333 33333s33 333n3333 33333333 As you can see in this primitive form the tile map is not much to look at, it just looks like aseries of letters and numbers. However, the “3” symbol stands for a grass tile, the “s” symbolstands for the sugar cube tile and the n stands for the injection needle tile. To actually produce the tile map on the screen, using the already implemented paintmethod and a for loop to go through each element in the array, every time the paint methodcame across a certain symbol in the array it would “paint” the corresponding image on thescreen. The following is a screenshot of the game applet with the initial painted tile map, theplayer is an actual moving image and the sugar cube and injection are tiles within the tilemap. Figure 17. Java Game Applet To start the game the user must click inside the applet to allow the focus to be on theapplet window and nothing else. The first thing the user must do is press the space bar to firethe bullet and destroy the sugar, when this has been achieved a message appears along thebottom saying “Sugar Destroyed”. The next step is to collect the insulin to lower the bloodsugar; this is done by using the arrow keys. To implement the use of the arrow keys, aBoolean method was created that took two parameters an event and integer called key. Then aseries of if statements were implemented to test for each key that was pressed, if the key thatwas pressed was left then a series of events would happen, the case is the same for theremaining three arrow keys. To give a greater understanding of this, have a look at thefollowing source code: public boolean keyDown (Event e, int key) { if (key == Event.LEFT){ x_speed = -1; y_speed = 0; leftPressed = true; attackPressed = false; } 31
  • 33. When the left arrow key is pressed, the Boolean expressions leftPressed and attackPressedare set to true and false respectively. The variable x_speed which controls the velocity atwhich the player moves horizontally along the screen is set to “-1” i.e. moves to the left of thescreen, or along the –x axis. As we only want to go left, the variable y_speed, which controlsthe velocity at which the player moves vertically along the screen is set to 0. A subsequent Boolean method, keyUp, deals with all the events that happen when a userremoves their finger from an arrow key i.e. the corresponding velocity is set to 0 and thecorresponding Boolean expression is set to false. Once the user achieves either of these actions, a method was implemented within theapplet to replace that tile with another tile (in this case it was the grass terrain tile). This wassimple to implement, as it was only an array manipulation, such as: public void setTile(int x, int y, char tile) { map[x][y] = tile; } (Then within the paint method) setTile(3, 1, 3); Invoking the setTile method from within the paint method, tells the applet to replacewhatever tile is four tiles along (note tiles start at 0) and one tile down with the tile thatcorresponds with the symbol “3”. There is not much functionality in the game other than this; it was simply to demonstratethe idea of how sugar and insulin affect the increase and decrease of sugar in a Type 1diabetic’s blood.3.3.4 Adobe Flash Flash is used to create content for the Adobe Engagement Platform (such asweb applications, games and movies and content for mobile phones and otherembedded devices). The Flash Player, developed and distributed by Adobe systems(which acquired Macromedia in a merger in late 2005), is a client applicationavailable in most common browsers. It features support for vector and rastergraphics, a scripting language called ActionScript and bi-directional streaming ofaudio and video. There are also versions of the Flash Player for mobile phones andother non-PC devices. [5]. Many people use Flash everyday when working with the Internet, whether they realise it ornot. Take Youtube for example, this is an online video community that has recently becomevery popular as a way to express yourself or just to share something with your fellow man.The technology this website uses is Adobe Flash Player, incorporated into its pages via theHTML tag <EMBED>. Many band and film websites utilise Flash to add interactivity totheir web pages and to provide more of a multimedia experience than simply an aid topromote themselves. As outlined above, although there are many different applications and implementations ofAdobe Flash circulating on and offline the way it has been implemented within the system isby way of various interactive demonstrations varying in content and complexity. Theapplications of Flash within the system range from simple visual “click and see”demonstrations and more interactive demonstrations such as, click the button a certain amountof times for different things to happen to a more complex drag and drop demonstration. 32
  • 34. 3.3.5 Blood Monitoring (Drag and Drop) Instead of having a series of images and text that the user could click through and click back in a presentation like fashion the system presents the user with a drag and drop facility so that they physically have to get involved in their own learning if they want to progress further through the demonstration. This is important as it keeps the user entertained and maintains their attention, it also does not bore them with mountains of information. Figure 18. Blood Monitoring (Drag and Drop Flash Demonstration) As the screenshot shows, the virtual blood monitor is designed to look superficially like amodern MP3 player, the reason behind this design is that, a large majority of young peoplelike (and indeed have) MP3 players, so modelling the blood monitor to look like one may bevisually appealing to young people and encourage them to pay attention or even do moretests, maybe an MP3 player could be incorporated into it for added encouragement. To begin the user must enter the test strip into the top of the blood-monitoring device,dragging and dropping the test strip onto the black area of the monitor achieves this. Onlyonce this has been done correctly does the Continue button appear. Once this button has beenclicked, another button appears in its place labelled Apply Blood, during an actual blood testthis is usually done with a lancet, or “finger pinger” (a name give because of the sound itmakes when operated). When the Apply Blood button is pressed an animation to simulate aclock or timer is displayed to indicate that the test is taking place and after a few seconds, a“reading” appears on the meter screen with an appropriate message according to the reading(Note: The reading is the same every time but future work could have it look up an array ofreadings and messages and randomly display one). The screenshot on the following pageshows the end of the blood monitoring demonstration; complete with blood sugar reading,appropriate message and Reset button. 33
  • 35. Figure 19. Reading produced from blood monitoring test3.3.6 Ketone Analysis (The Click ‘n’ See approach) To carry out a Ketone Analysis test you have to dip a test strip (Note: these are different test strips to blood monitoring strips) into a urine sample, wait around 30 seconds or so, remove it and check it against the ketone scale on the side of the test strip vial. Short of having the user virtually remove a test strip from a vial and place it in a urine sample then remove it again there seemed to be no way for the user to have any hands-on experience in this demonstration. With that in mind, a click ‘n’ see approach was adopted for this demonstration which goes through each step of the analysis process highlighting the current step the user is on and greying out all the previous steps. The end result of this looks something like this: Figure 20. End result of the Ketone Analysis demonstration This demonstration has also been equipped with three navigational buttons for ease of use,when there are no previous frames the reset and previous buttons are hidden, this is similarlythe case when there are no more frames left in the demonstration. As you can see the user isclearly able to distinguish between which step(s) they have just seen and which step they arecurrently on. To the right of this information is an appropriate image that visually shows theuser what is going on. Future work to this demonstration could be possibly adding a primitive 34
  • 36. search box that allows the user to enter the number of the frame they would like to go to andnavigate to that particular frame.3.3.7 Insulin Injection (“Dial a Dose”) To breakdown sugar in the blood, the body needs insulin, but in a diabetic’s body they have built up a resistance to insulin so no sugar is getting absorbed making more and more sugar and this sugar starts to feed off other organs (see Figure 1 for more details), that is why insulin injections are needed. Insulin Injections lower the sugar level and aid the body in breaking down this sugar. This final Flash demonstration is about just that – demonstrating the effect of insulin on sugar in the blood. Pen Device Dial Figure 21. Insulin Injection Demonstration (High Sugar Level) The demonstration starts when the user clicks on the dial as illustrated in the screenshot, as the user continues to click the dial the dosage counter increments by one each time and the blood sugar level steadily decreases. This process is repeated until the dosage reaches about 15 units then the message “This is the perfect blood sugar to insulin ratio” is displayed – this message continues to display for a further five units. Figure 22. Insulin Injection Demonstration (Ideal Sugar Level) As the user continues to click on the dial to increase the insulin dosage, the blood sugar level starts to decrease to dangerously low levels and a warning message is displayed. 35
  • 37. Figure 23. Insulin Injection Demonstration (Danger Sugar Level) When the blood sugar level reaches this level then the warning message “Blood SugarLevel is dangerously low. Please eat something” is displayed. This level of blood sugar isknown as hypoglycemia, or the diabetic might have slipped into a diabetic coma if theirsugar level was not raised in time. Hypoglycemia is a condition that happens to diabeticswhen they have low blood sugar, it can have similar symptoms of being in shock. Some ofthese symptoms include disorientation, feeling hot, slurring of words, lack of concentration,shaking and so on. Possible future work for this demonstration could involve including an“Eat Something” button that raises the sugar level again, also allowing the blood sugar todrop depending on the dose that is taken by adding an “inject” button. 36
  • 38. 4 Conclusion4.1 Evaluation Once the project was completed the testing strategy that was decided upon was to test thesystem on non-diabetics as well as diabetics to find out how the feedback differed becauseone set of test results would be slightly biased towards their particular type of diabetes and theother set of results would be a more general overview of the system. The main problems that were encountered were the incompatibility issues that existbetween browsers as mentioned previously. However, this was easily fixed with a piece ofJavaScript code (see Chapter 3.3.1 for more details). Through testing the system on end users, the final system meets all the objectives thatwere set out at the beginning of this document and had very little complaints. To test thesystem, test subjects were given a short questionnaire of four questions to fill out and theresults obtained were better than expected. It was also required that the test subjects usedifferent browsers so to detect any bugs between the two. The following are the results of the questionnaire that was given to prospective testsubjects: (Note: Q = Question, T1 = Non-Diabetic 1, T2 = Diabetic) Q1. What is your opinion of the overall design and layout of the system? T1. Overall design was very professional looking and very nicely laid out. T2. Overall the system is well laid out and is easy to navigate through. The structure ofthe system is good and is not repetitive. The fact that you can make the text size on screenbigger is good too. Q2. How easy was it to find the information, and was it relative? T1. Information was easy to find and everything was relevant to the subject. T2. Information was completely relative and in some cases more helpful than informationfrom a medical institution. Information was clearly found and not scattered throughout thesystem. Q3. Did you find the multimedia elements easy to use? T1. Yes they were very well explained and very easy to use. T2. Yes it was good having a demonstration of how things are ‘supposed’ to run asopposed to how they actually do. The instructions on how to use them were easily followedtoo. Q4. Is there any improvements you would suggest? T1. The default text size needs to be bigger; it is a bit of a strain to read. T2. In the blood monitor box the text at the bottom flashes past rather quick so it’s hard toread the screen and the information at the bottom. It seems that diabetics and non-diabetics alike received the system very well and the onlyimprovements to make were superficial and not actually anything to do with the content orquality of the information provided.4.2 Future Work The system is far from 100% perfect and a lot more could be done to it such as adding special features and other things. More accessibility features could be implemented into the system such as providing other languages for foreign visitors and pursuing the issue of colour-blindness (mentioned in Chapter 3.2.2) by providing the system in different colour schemes. A most intriguing idea is to implement a member’s only section that displays personalised information depending on the type of diabetes you 37
  • 39. have. However, this would require a lot of preparation and server-side technology.Prototype screenshots of the proposed Sign Up and Members Homepage can be foundbelow. Figure 24. Proposed Sign-up Page Figure 25. Proposed Members Homepage 38
  • 40. References[1] Kirsteen Paterson, Frog slime and black tea to treat diabetes, Metro newspaper, March 3 2008.[2] Distance Learning Resource Network, Web Definitions, May 1 2008, https://www.ncsbn.org/836.htm[3] Internet.com Network, The JavaScript Source, Founded 1996, http://javascript.internet.com[4] Whatis.com, What is Java, Founded 2001, http://searchsoa.techtarget.com/sDefinition/0,,sid26_gci212415,00.html[5] Wikipedia, Adobe Flash, Founded in 1993, http://en.wikipedia.org/wiki/Adobe_Flash 39
  • 41. Appendix A - Main Content Source Code <div id="main_content"> <!-- Start of New Item Description --> <div id="new_item"> <div id="new_item_header"> <h1>What is Diabetes?</h1> </div> <div id="new_item_text"> <p>The most common form of Diabetes is Diabetes Mellituswith such symptoms as an irregular metabolism and abnormally high blood sugar levelswhich is usually caused by low insulin production or absorption.</p> <p>The main symptoms to look out for are excessive urineproduction excessive thirst and an increased fluid intake.</p> <p>There are three main types of Diabetes: Type 1, Type 2and Gestational.</p> <p>Use the links and search box above to navigate throughthe system or see below for the two most common types of diabetes. </p> </div> <div class="clearthis">&nbsp;</div> </div> <!-- End of New Item Description --> <div class="h_divider">&nbsp;</div> 40

×