Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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