Download Design 1 - Computing Science and Mathematics

CSCU9N5-MultimediaandHCI
Autumn2016
CSCU9N5DesignOne
ThisisthefirstinaseriesofpracticalsonthethemeofHCI,designandtheWWW.ThefirsttwouseAdobe’s
Dreamweaversoftware,oneofthemostpopulartoolsforcreatingwebpages.WeareusingDreamweaverto
makeyouthinkaboutthedesignprinciplesfromthelecturessinceitoffersanumberofdifferentinterface
approachestowebdevelopment.
Registeryourattendance
Beforeyoubegin,pleasenavigatetotheRegistrationdirectorywithintheCSCU9N5directoryonyourKdrive
andregisteryourattendancebyclickingonRegister.
DesignAnalysisandDiscussion:
Inthispractical,therearesuggestedtasksforyoutoacquaintyourselfwithDreamweaver,butpleasefeelfree
toexperimentandtryoutfurtherfeaturesofthesoftware–it’sabigpackagewithlotsoffeatures!
AsyouuseDreamweaverhere,trytomonitoryourselfobjectivelyasauser:andconsiderthefollowing
points.Whenyou'vedoneabitofexploration,discussyourconclusionswithyourdiscussiongroup.
MentalModels
Youwill,ofcourse,formyourownmentalmodelofexactlywhatisgoingonasyouuseDreamweavermore
andmore,butpartofyourmentalmodelispresumablygoingtobethattheWYSIWYGdisplayexactly
correspondstotheHTMLtextyoucanseeintheotherwindow.Indeedthisisclearlywhatthedevelopersof
Dreamweaverwantedyoutothinkaspartofyourmentalmodelofwhatisgoingon.
Whatsortofmentalmodelisthis?(structuralorfunctional?)
HowwelldoesDreamweaverhelpyoudevelopthatmodel?
DoesDreamweaverdoanythingtoviolatethemodel?
(Andifso,isthisafatalflaw,ormerelyannoying?)
‘KnowthyUser’/GOMS
WhatdifferentusergroupsisDreamweaveraimedat?ConsidertheShneidermanprincipleof"KnowThy
User".HowdoesDreamweavercaterfordifferentsortsofuser?EgNovicevsExpert.Whataboutother
nationalitiesorcultures?Whataboutdifferenteducationalbackgrounds?Whataboutdifferentagesofuser?
ConsiderthesepointsintermsofGOMS(goals,operations,methods,selection).
Affordances
IdentifyaffordancesintheDreamweaverinterface.Mostoftheaffordancesyouwillhaveusedalready,butif
thereareonesyouhaven’t,firsttryguessingwhattheydo,thentrythemout.Wereyouright?
IfyoufindafeatureinDreamweaverdifficulttouse,considerhowyouwouldhavedesignedit.Youwill
probablyneedtotakeintoaccounthowyourapproachmightaffectotherfeaturesandpotentiallymakethem
moredifficulttouseorveryhardtoimplement.Thereisfrequentlyatradeoffindesignwheremakingone
aspecteasieraffectstheusabilityofotheraspects.
1
CSCU9N5-MultimediaandHCI
Autumn2016
PracticalTask:Constructawebpage
StartDreamweaverbyselectingAllPrograms->AdobeDesignPremium->AdobeDreamweaverCS5fromthe
Startmenu.OnceyouhaveopenedDreamweaver,createanewHTMLprojectandexperimentwith
Dreamweaverbyconstructingawebpage(thetopiccanbeanythingyoulike)including:
o moretext
o simpletextstyles,includingheadings
o atitleforthepage
o hyperlinks
o images
o alist
o atable
Foreverything,keepinmindhowDreamweaverishelpingyoufigureoutitsinterface.Takenotesasyougo.
UsetheDreamweaverhelpifyougetstuck.Therearesometipsbelowtoo.Explorethefeaturesof
Dreamweaver.
Hints
ThedefaultworkspaceforanHTMLprojecthastheDocumentViewtakingupthemajorityofthespace.Atthe
bottomofthescreen,youwillseethePropertyInspector:
Notethetabsofthedocumentwindow:
Observewhathappenswhenyouselecteachofthesebuttons.TheyallowustoseeaWYSIWYG(WhatYou
SeeIsWhatYouGet)displaywiththeDesignbutton,adisplayoftheHTMLcodeofourdocumentwiththe
CodebuttonoracombinationoftheseoptionswiththeSplitbutton.Splitwillbemosthelpfulhere.
TypesomethingintotheWYSIWYGwindowontherightsideoftheDocumentView.Youshouldalsoobserve
thetextappearingintheleftCodewindowaswell.
Saving
Saveregularly.OneconceptimportanttoDreamweaver’sfilemanagementisthatitrequeststhatyounamea
foldertobeusedasaSite.Thatway,itautomaticallydoeslotsofusefulthings,likekeepingallthefilesofyour
websiteinoneplace,checkinglinkURLsrelativetothatfolder,andsoon.Italsomeansthatyoucandoyour
developmentseparatelyfromthefilesactuallyonthewebserver.Yoursitecontainsallyourlocalfilesandyou
doyourdevelopmentonthemlocally,thenwhenyouhavetestedyourfilesthoroughlyandarereadyto
publishyourfilesontheweb,Dreamweavercancopyallofthefolder’scontentsovertoaserverinonego.
Tocreateanewsite,selecttheSite→NewSitemenuoption.Thiswillpromptyouforthenameofyoursite
andthetoplevelfolderthatwillcontainyoursiteonthelocalcomputer.Giveyoursiteaname,thenselect
theminifoldericontobrowsetoyourhomedirectory(normallythe‘H’drive).Youshouldthenselectthe
wwwfolder,andcreateanewfolderatthislocation(e.g.cscu9n5)andfinallyselectthisfolderasyourtop
levelfolder.Onceyouhavecompletedtheabovesteps,selectthesavebutton.Thisclosesthedialogandwill
createyoursite.OnthebottomrighthandsideoftheDreamweaverapplicationwindow,youshouldnowbe
2
CSCU9N5-MultimediaandHCI
Autumn2016
abletoobserveyouremptyprojectfolder.NowusethenormalFile→SavemenuoptiontosaveyourHTML
file.Itshouldautomaticallypromptyoutosaveitwithinthetoplevelsitefolderyoujustcreated.
Creatingthewebpage
Hints:manyitemsareaddedviathe
InsertTabthatispartofasetofpanels
ontherightsideoftheapplication
window.Youmayfindalternativewaysto
doit:there’sanInsertmenutoo.
ThewordCommonindicatesthecommoncategoryofobjectsthatcanbe
inserted.Clickingontheword‘Common’willrevealotherfeaturesthatcan
beinserted.
Totryoutsomemorefeatures,therearesomeimagefilesprovidedforyou
inafoldercalledpracticals/Web1intheCSCU9N5modulefolderonyourK
drive.Copyanyfilesyourequireandsaveinthesamefolderasyour
Dreamweaversitefolder(thisshouldbethesamefolderasyourHTMLfile).
Thefilesareasfollows:
• Images–eitherofstars.gif,pumpkins.jpg,lightning.gifaresuitable.Insert/Imagetoaddthem.Orfind
yourownimagesontheWWW.Choosepicturesthatyouhavepermissiontouse.
• Rolloverimages–theseareasimplewaytohighlighttheimagethatthemouseisover.Youchoose
twoimagesforeachrollover,oneforwhenthemouseisoverthelink,andoneforwhenitisn’t.
redpens.gif,redpencils.gif,redbiros.gif,bluepens.gif,bluepencils.gif,andbluebiros.gifareallsuitable,
forexampleyoucouldhavealineofbluebuttonsthateachturnedredwhenthemousepointer
passedover.
Thisworksinasimilarwaytoinsertinganimage;however,inthiscaseyoushouldselectthe
Images/RolloverImageoptioninsteadofImages/Image(orImageObjects/Rolloverifyou’reusingthe
Insertmenu).
• ClickableImagemap–youwillneedthefollowing:campus.jpg,dumyat.jpg,library.gif,
macrobert.gif,residences.gif,airthrey.jpg
Youneedtoadd“hotspots”whicharelinkstoyourchosenimage.Tobeginthisprocess,addthe
campus.jpgimagetoyourwebpage,usingtheImagebuttonasbefore.NowensuretheProperties
paneisvisible,displayingpropertiesaboutyourimageasfollows:
Inthebottomleftcorneryoushouldobserveimagemapoptionsandshapeselectors.Selectthe
rectangleshapecreator,putyourmouseovertheimagethenclickanddragoutashape.The
PropertiespanewillchangetoaHotspotPropertiescontextandprovideyouwithoptionstofillinthe
linkthatthehotspotshouldjumptoandthetexttodisplayforthathotspot.
3
CSCU9N5-MultimediaandHCI
Autumn2016
Trycreatinganumberofhotspotsgoingtodifferentlinks,forexamplecreateahotspotforthecastle
ontheimagethatjumpstothepictureofAirthreycastle.Linkscanbelinkstolocalfiles,ortoabsolute
URLs.Whenyouhavefinishedwiththemap,saveyourpageandpreviewit,testingtomakesurethe
hotspotlinksgowhereyouexpectthemto.Notethatifyoursitehasbeencorrectlysavedunderyour
wwwdirectoryonyourHdrivethenitwillbedirectlyaccessiblefromtheComputingSciencemain
webserverviatheURLpattern:
http://www.cs.stir.ac.uk/~<YourUserID>/<YourSiteFolderName>/<HTMLfile>
Forexamplewiththeusernamedec,sitefoldern5andhtmlfileindex.htm,theURLwouldbe:
http://www.cs.stir.ac.uk/~dec/n5/index.htm
Takecarethatyoudonottrytoaccessthewebcontentdirectlyviathefileserverratherthantheweb
server(yourURLshouldnotstartwithfile://).ForHTMLfilesyouwillnotseeanyrealdifferencebut
assoonasyouincludePHPonyourwebsite,itwillonlygetrunifitiscalledviathewebserver.Also
notethatanythingyouputinyourwwwdirectoryisdirectlyvisibletothewholeworldsopleasetake
carewhatyouputinthere.
Tables
Createatable(Insert/Common/Table).Propertiesareimportanthere.Youcansettheminthecreatetable
dialog,orviathePropertiespane.Commonlyimportantitemsinclude:Cellpadding,Cellspacing,TableWidth,
Borderthickness.
Experimentwithdifferentstylesandsettings.Givethisdialogagoodworkout.Ensureyouunderstandthe
effectsofsettingcellpaddingversuscellspacing.
Previewingthedocument
Nowwecantrypreviewingthedocument,toseewhatitlookslikeinawebbrowser.Dreamweaverprovidesa
quickwaytotestoutyourwebpagecreationsforrealinabrowser,notjustintheWYSIWYGdocument
window.Tryoutthepreviewfacility,byusingthemenuoptionFile→PreviewinBrowser→Firefox(ifthelist
ofbrowsersisgreyedout,selectFile→PreviewinBrowser→EditBrowserList,thenclickOKandtryagain).
4