International Journal o f Geo-Information ProjectReport One-Page Multimedia Interactive Map NicolaMaiellaro*andAntoniettaVarasano ConstructionTechnologiesInstitute,NationalResearchCouncilofItaly,70124Bari,Italy;[email protected] * Correspondence:[email protected];Tel.:+39-329-2604167 AcademicEditors:BertVeenendaal,MariaAntoniaBrovelli,SerenaCoetzee,PeterMooneyandWolfgangKainz Received:27September2016;Accepted:18January2017;Published:24January2017 Abstract: Therelevanceoflocalknowledgeinculturalheritageisbynowacknowledged. Ithelpsto determinemanycommunity-basedprojectsbyidentifyingthematerialtobedigitallymaintained inmultimediacollectionsprovidedbycommunitiesofvolunteers,ratherthanfor-profitbusinesses or government entities. Considering that the search and browsing of texts, images, video, and 3Dmodelsrelatedtoplacesismoreessentialthanusingasimpletext-basedsearch,aninteractive multimediamapwasimplementedinthisstudy. Themap,whichisloadedonasingleHyperText MarkupLanguage(HTML)pageusingAJAX(AsynchronousJavaScriptandXML),withaclient-side controlmechanismutilisingjQuerycomponentsthatarebothfreelyavailableandad-hocdeveloped, isupdatedaccordingtouserinteraction. Tosimplifythepublicationofgeo-referencedinformation, theapplicationstoresallthedatainaGeographicJavaScriptObjectNotation(GeoJSON)filerather than in a database. The multimedia contents—associated with the selected Points of Interest (PoIs)—canbeselectedthroughtextsearchandlistbrowsingaswellasbyviewingtheirpreviews onebyoneinasequencealltogetherinascrollingwindow(respectively: “Table”,“Folder”,and “Tile”functions). PoIs—visualisedonthemapwithmulti-shapemarkersusingasetofunambiguous colours—canbefilteredthroughtheircategoriesandtypes,accessibilitystatusandtimeline,thus improvingthesystemusability. ThemapfunctionsareillustratedusingdatacollectedinaComenius project. Notesontheapplicationsoftwareandarchitecturearealsopresentedinthispaper. Keywords: Single-PageApplication;modelviewcontroller;multimedia;mapping;VGI 1. Introduction The value and significance of local knowledge in cultural heritage and the importance of preserving it for future generations is already recognised. Consequently, the process of involving communitieshasmaturedgraduallyovertime,overcomingtheunwillingnessofknowledgeholders torevealinformationandstories. Inthiscontext,mapsplayacentralroleingatheringandsharing knowledge,asillustrated,forexample,bytherecentcrowdsourcinginitiativetocreatethePhilippines HeritageMap,poweredbytheArches,andmaintainedbythelocalstakeholders,governmentunits, heritage practitioners, and volunteers [1]. The means of publishing geo-information may differ. Theyincludethefollowing: • Individualsusingeasy-to-useinternettoolstoconstructsitesthatarealmostentirelypopulated byuser-generatedcontent,withoutrestrictiononthenatureofthecontent[2]. • The public using services—such as Wikimapia and Flickr—allowing citizens to provide descriptionsofPointsofInterest(PoIs)togetherwithgeographiccoordinates,anactivitydepicted withtheterm“volunteeredgeographicinformation”(VGI),coinedin2007byGoodchild[3]. Largely missing are “the mechanisms needed to ensure quality, to detect and remove errors, andtobuildthesameleveloftrustandassurancethatnationalmappingagencieshavetraditionally enjoyed”[3].Moreover,ithasbeenestimatedthatmorethanhalfoftheculturedpopulationdonothave ISPRSInt.J.Geo-Inf.2017,6,34;doi:10.3390/ijgi6020034 www.mdpi.com/journal/ijgi ISPRSInt.J.Geo-Inf.2017,6,34 2of16 abIaSPsRicS aInbti. lJi. tGyeow-Inift.h 20m17a, 6p, s3,4 s uggestingthatdevelopinginteractivemapsincorporatingmultim2e dofi a16[ 4] would satisfy the perception of the information. To date, however, interactive maps do not use muhlativme eda iabcaosinct eanbtiloitryo nwlyithu semiatpass, ansuagigdetsotinugn dtehrastt anddevtehloepminagp cinotnetreanctt,ivwe ithmpaposo riantctoernptoiornattinogt he multimedia [4] would satisfy the perception of the information. To date, however, interactive maps useofcoloursandiconsinthemarkers,asinthefollowingexamples. do not use multimedia content or only use it as an aid to understand the map content, with poor 2. Ianttteenrtaicotni vtoe tMhea pusCe aosfe coSltouudrise asnd icons in the markers, as in the following examples. DifferentapproachestomappingPoIsareillustratedbelowthroughtheanalysisoftheinterfaces 2. Interactive Map Case Studies andarchitecturesoftheinteractivemapsofCyprus,Malta,andJapan. Acomparativetableoftheir Different approaches to mapping PoIs are illustrated below through the analysis of the interfaces features—includingourmap—isalsopresented. and architectures of the interactive maps of Cyprus, Malta, and Japan. A comparative table of their 2.1f.eTathuerIenst—eriancctliuvediMnga pouofr Cmyappr—usis also presented. 2.1I.n Ttheer fIancteer.aTcthiveei Mntaepr aocf tCivyeprmusa pofCyprus(Figure1)startswithoutdisplayingmarkers;theuser selects/deselects PoIs categories to show on the map by clicking on their markers from a list in Interface. The interactive map of Cyprus (Figure 1) starts without displaying markers; the user thewindow“PoIsCategories”(locatedontheleftsideofthewindow),whichiscommittedtouser selects/deselects PoIs categories to show on the map by clicking on their markers from a list in the interfaceinteractions. Themarkershavethesameshape(ashield)withdifferentbackgroundcolours window “PoIs Categories” (located on the left side of the window), which is committed to user anddifferentforegroundimages.Thecoloursarenotveryusefulbecausedifferentcategoriessometime interface interactions. The markers have the same shape (a shield) with different background colours have the same background colour (for example, violet, in “Landmarks”, “Museums”, “Theatres”, and different foreground images. The colours are not very useful because different categories and“Info”types). Overlappingmarkersarereplacedwithaspecialcircularmarkerwithcolourand sometime have the same background colour (for example, violet, in “Landmarks”, “Museums”, diameter proportional to the overlapped PoI’s number. Clicking on a marker in the map opens a “Theatres”, and “Info” types). Overlapping markers are replaced with a special circular marker with calclooluotuwr aitnhdt hdeiaPmoeIt’esrn parmopeo,ratdiodnraels sto, athned ocvaeterlgaoprpye;dth PeorIe’sa nreumfivbeerf.u Cnlcitcikoinngk eoyns a: marker in the map opens a callout with the PoI’s name, address, and category; there are five function keys: • “FromHere”and“ToHere”replacethe“PoIsCategories”windowwiththe“Navigation”window, • all“oFwroinmg tHheerree”c eapntdi o“nToof Hdierreec”t iorenpslatoce/ ftrhoem “tPhoeIsP oCIaatengdoraineso”t hwerinPdooIwo rwaintha dthder e“sNs.avigation” • “Swhainred”oowp, eanllsowapinogp t-huep rwecienpdtioown otof dseirnedctitohnesP too/If’rsolmoc tahtieo PnoaI nadnda amneosthsaegr ePobIe otwr aenen adtwdroesesm. ails. • • “R“eSphoarrte””s oepnednssa a cpoompm-uepn wtainnddotwh etou sseenrd’s tehme PaiolIa’sd ldorceastisotno atnhde da emveeslsoapgeer .between two emails. • “Report” sends a comment and the user’s email address to the developer. • “More”opensanotherwindowwithadditionalinfo(suchastelephonenumber,ifavailable)and • “More” opens another window with additional info (such as telephone number, if available) and asmallzoomablemapwiththePoI’slocation. a small zoomable map with the PoI’s location. Theotheruserinterfaceinteractionwindowsare“Search”,toshowthePoIselectedinthetextsearch The other user interface interaction windows are “Search”, to show the PoI selected in the text box(itworksirrespectiveoftheactivatedcategories);“Layers”,toselectthebasemap(Geomatic/Satellite), search box (it works irrespective of the activated categories); “Layers”, to select the base map the(Glaenogmuaatgice/S(aGteRll/itEeN), t)haen ladnogvuearglea y(GsR(N/EiNco)s ainadB oikveerRlaoyust (eNs)i;co“Psirai nBtik”;e aRnodut“eCs)l;e “aPrrMinta”p; a”n.d “Clear Map”. Figure 1. The interactive map of Cyprus—screenshot of screen session in the website [5]. Figure1.TheinteractivemapofCyprus—screenshotofscreensessioninthewebsite[5]. ISPRSInt.J.Geo-Inf.2017,6,34 3of16 Architecture. The interactive map is a rich web-based Geographic Information System (GIS)I—SPRpSl aInttf. oJ.r Gmeo-I(ngf. m201a7p, 6i., j3s4) . Based on the OpenLayers application programming interfa3 coef 16( API), ituses“iframes”toloadcontentfromdifferentservers. Today, mostinteractivemapsuseiframes Architecture. The interactive map is a rich web-based Geographic Information System (GIS)— (todisplayawebpagewithinawebpage)andmostimplementationsrequiretheuseofJavaScript, platform (gmapi.js). Based on the OpenLayers application programming interface (API), it uses CascadingStyleSheets(CSS),andHTML5tobuildaresponsiveiframes-basedwebsite. However, “iframes” to load content from different servers. Today, most interactive maps use iframes (to display therearedisadvantagestousingiframes,forexample: a web page within a web page) and most implementations require the use of JavaScript, Cascading • iSftryalme Sehseceatns (mCaSSk)e, tahned dHeTvMeloLp5 mtoe bnutioldf aa wreesbpsointesivcoe mifrpalmiceast-ebda.sed website. However, there are disadvantages to using iframes, for example: • It is easy to create badly constructed websites using iframes. The most common mistake is i•n cluidfrianmgeas cliannk mthakaet cthree adteevsedlouppmliecnatt eofw a ewbepbsaigtee scodmispplilcaayteedd. withinaniframe. • S• earcIth ise neagsiyn etso tchreaatter ebfaedrelyn cceonastrwucetbedp wageebsiotensl yusginivge iftrhame easd. dTrhees smoofst tchoamtmspoenc imfiicstadkoec uism ent. including a link that creates duplicate web pages displayed within an iframe. Thismeansthatsearchenginesmightlinkdirectlytoapagethatwasintendedtobedisplayed • Search engines that reference a web page only give the address of that specific document. This withinaframeset. means that search engines might link directly to a page that was intended to be displayed within • Usershavebecomesofamiliarwithnormalnavigationusingtables,thebackbutton,andsoon, a frameset. t•h atUnasverisg hataivneg btehcroomueg sho afasmitielitahr awtiuths ensorifmraaml neasvicgaantiobne upsrionbgl etamblaetsi,c t.he back button, and so on, • Theuthsaet onfavtoigoamtinagn tyhriofruagmh eas scitaen thpaut tuasehs iigfrhamweosr ckalno abde pornobthleemsaetricv.e r. • The use of too many iframes can put a high workload on the server. ThemainadvantagesofHTML5iframesarethepossibilitytoviewmultipledocumentswithin The main advantages of HTML5 iframes are the possibility to view multiple documents within asinglewebpageandabilitytoloadpagesfromdifferentserversinasingleframeset. Thissolution, a single web page and ability to load pages from different servers in a single frameset. This solution, althoughevolvingwiththeadoptionofnewattributesanddeprecationofothers,mighthinderevolution although evolving with the adoption of new attributes and deprecation of others, might hinder andupgradesoftheapplicationanditsresponsiveness. Asanalternative,ourapplicationusesjQuery evolution and upgrades of the application and its responsiveness. As an alternative, our application with CSS3 lightening for the user interface (for example, in order to simplify the manipulation of uses jQuery with CSS3 lightening for the user interface (for example, in order to simplify the elememnatnsiapsultahteionna vofi gealteimonenmtse nasu ;thseee nSaevcitgiaotnio4n. 1m),eannud; AseJeA SXec(Atiosny n4c.1h)r, oannodu sAJJaAvXa S(cArispytncahnrdonXoMusL )for expedJaitvianSgcrtihpet uansder XinMteLr)a fcotri oenxp(feodriteinxga mthpel eu,sienr oinrtdeerarcttoiounp (dfoart eextahmepwlee,b inp aogrdeewr ittoh uopudtarteel otahde iwngebi t). page without reloading it). 2.2. TheInteractiveMapofMalta 2.2. The Interactive Map of Malta Interface. TheinteractivemapofMalta(Figure2)isabletoproduceoptimalresultsbecauseofa gooddesiIgnnte.rfIatcset.a Trhtse winittehraocutitvme marakpe orsf ;Mthaeltau (sFeirguserele 2c)t sis/ adbeles etole pctrsodPuocIes otpytpimesa(l grerosuulptse bdecbayuscea toefg ao ries) good design. It starts without markers; the user selects/deselects PoIs types (grouped by categories) toshowonthemapbycheckingitemsfromalist,withoutconnectiontothecolouredmarkerson to show on the map by checking items from a list, without connection to the coloured markers on the themap. Themarkershavethesameshape(anupturnedandtiltedreddrop)withacolouredcore. map. The markers have the same shape (an upturned and tilted red drop) with a coloured core. Sometimesdifferenttypesinthesamecategoryandindifferentcategorieshavethesamecolourinthe Sometimes different types in the same category and in different categories have the same colour in core(forexample,black,in“TravelAgents”and“FortificationandTowers”). the core (for example, black, in “Travel Agents” and “Fortification and Towers”). Figure 2. The interactive map of Malta—screenshot of screen session in the website [6]. Figure2.TheinteractivemapofMalta—screenshotofscreensessioninthewebsite[6]. ISPRSInt.J.Geo-Inf.2017,6,34 4of16 Moreover,thelistofcategoriesandtypesisonlygivenalphabetically,makingitimpossibleto associatethemarkerswiththetypestheyrepresent. Clickingonamarkerinthemapopensacallout ISPRS Int. J. Geo-Inf. 2017, 6, 34 4 of 16 withthename,image,andshortdescriptionofthePoI,witha“Readmore”link(alllinksloadapage withazoMomorienogvesra,t tehleli tleistm oaf pcawteigthoroieust acnodn tteynptess) .isT ohnelrye giisvaenls oalpah“aGbeetticDaillrye,c mtioankisn”gn iot nim-fpuonscstibiolen atol link. Twelavsesolacinagteu tahgee msaarrkeearsv awiiltahb tlheef otyrptehse thinetye rrefapcree,sebnutt. Ccalitcekginogri oens aan mdatrykpere sino tfhtee nmraepm oapiennisn a Ecanlgloliusth . wAirtchh tihteec ntuamree., Timheagine,t earnadc tsihvoertm daepscurispetsioan“ oRf Ethper ePsoeIn, wtaittiho na a“lRSetaadte mTorraen”s lfienrk” ((aRllE lSinTk)sw loeabds ae rpvaigcee and with a zooming satellite map without contents). There is also a “Get Directions” non-functional link. allofthefeaturesthatthe“.net”frameworkprovides.RESTusestheHyperTextTransferProtocol(HTTP) Twelve languages are available for the interface, but categories and types often remain in English. forallfourCRUD(Create/Read/Update/Delete)operations; consequently, thisapplicationrunson Architecture. The interactive map uses a “REpresentational State Transfer” (REST) web service almostany“online”deviceorapplication,buttheMaltaapplicationisnotaresponsivewebpage. and all of the features that the “.net” framework provides. REST uses the HyperText Transfer Protocol Asanalternative,ourapplicationisnotonlyconformedtotheRESTconstraints(RESTful)but (HTTP) for all four CRUD (Create/Read/Update/Delete) operations; consequently, this application alsoresponsive,havingadoptedtheleadingframeworkinthiscategory,jQuery,whichprovidesnot runs on almost any “online” device or application, but the Malta application is not a responsive web page. onlyaunAifso armn aAltejarnxaAtivPeI,, obuurt aaplspoliacaltaiorgn eisn nuomt obnelryo cfocnrfoosrsm-bedro two sthere hReElSpTe rcofunsntcratiionntss .(RESTful) but aRlseos preosnpsoinvseivwe, ehbasviitneg dadesoipgtnedi sthae lweaedliln-ng ofrtaemdeawpoprrko ianc thhisfo cratwegeobrysi, tjeQudeersyi,g wnhtihcha tprcoavteidress onpott imal viewoinnglye ax upneirfioernmce Atjoaxu AsePrIs, bwuht ialelsob rao lwarsgien gn,uwmibtehr eoaf scyrorsesa-bdrionwg,senra hveiglpaetrio funn,sctiimonpsl.e scrolling,minimal browserrReessipzoinngsi,vaen wdecbrosistes- ddeesviigcne ciso ma pwaetlilb-niloitteyd. Wapepbrsoitaechre fsopro wnseibvseitnee sdseshigans bthecaot mcaetearst roapntsimceanl dent searcvhieewnignign eex-praenrikeninceg tfoa uctsoerrsa wnhdilsei gbrnoiwficsainngt,l ywiitnhfl euaesyn creeasdGinogo, gnlaevsigeaatricohn,r seimsuplltes .scTrhoellipnrgi,m mainryimgaol alof browser resizing, and cross-device compatibility. Website responsiveness has become a transcendent responsivewebdesignistocateraconsistentbrowsingexperiencetoeveryone,regardlessofwhat search engine-ranking factor and significantly influences Google search results. The primary goal of sortofdeviceisbeingused. Itfluidlyadaptstoalmostalltheresolutionsandscreensizesandworks responsive web design is to cater a consistent browsing experience to everyone, regardless of what smoothlyoneachdevice. Withseamlessexperience,contentandmediaareeasilydigestiblewhile sort of device is being used. It fluidly adapts to almost all the resolutions and screen sizes and works browsingonmultipledevicesincludingiPhone,smartphone,laptop,anddesktop. smoothly on each device. With seamless experience, content and media are easily digestible while Responsivewebsitesarebecomingthefutureofwebsitedesign,astheyeliminatetheneedtohave browsing on multiple devices including iPhone, smartphone, laptop, and desktop. multipleRdeesspiognnssivfoe rwdeebsskitteosp a,rme boebciolem,ianngd thtea bfuletutsr.eM ofo wreeobvsietre, dtheesiygna,r easm thoerye esluimitainbaltee, twheit hnereeds ptoe ctto mobihlaevwe embuslittiepsl,e fdoerstighnesa fporp dliecsakttioopn, omfo“bSielea, racnhdE tanbglientse. MOporteimoviesar,t tihoeny” a(rSeE mOo)rme seutihtaobdleo,l wogityh— resstpreactet gies, techntoiq umeosb,ialen dwteabcstiitcess,u sfoerd tthoei nacprpelaicsaettiohne aomf o“Suenatrcohf vEinsigtoinres tOopatiwmeisbastiitoenb” y(SoEbOta)i nminegthaodhoiglohg-yra—nking placesmtraetnegtiiens, ttheechsneiaqrucehs, raensdu lttasctpicasg ueseodf atos ienacrrcehasee nthgein aem—ouinnct loufd viinsigtoGrso toog al ew,eBbisnitge, bYya hobotoa,inainndg ao ther searchhigehn-grainnkeisn.g placement in the search results page of a search engine—including Google, Bing, Yahoo, and other search engines. 2.3. TheInteractiveMapofJapan 2.3. The Interactive Map of Japan Interface. TheinteractivemapofJapan(Figure3)providesfivecategories,usingmarkerswith Interface. The interactive map of Japan (Figure 3) provides five categories, using markers with thesameshapeanddifferentcolours. Aclusteringmarkerisnotprovidedandthecalloutcontains the same shape and different colours. A clustering marker is not provided and the callout contains onlythePoI’sname. Themapcanbevisualisedbyregion. only the PoI’s name. The map can be visualised by region. Figure 3. The interactive map of Japan—screenshot of screen session in the website [7]. Figure3.TheinteractivemapofJapan—screenshotofscreensessioninthewebsite[7]. ISPRSInt.J.Geo-Inf.2017,6,34 5of16 Architecture. Theinteractivemapusesawebservicetoretrievea“commaseparatedvalue”(CSV) fileavailableatagivenUniformResourceLocator(URL),usinganHTTPGETrequest. Itparsesdata inafileandnextvisualizesonthemapthedatastoredinthatfile;someURLparameterscustomize andfiltertheCSVcontenttobereturned. However,thissolutioncouldbelimiting. Whendealingwithlargevolumesofdataoradopting datathatcontainhierarchicalinformation(e.g.,multiplemediaforasinglePoI),the“JavaScriptObject Notation”(JSON)dataformatisusedinsteadofCSV. Moreover,mostmodernAPIsareRESTful,andthereforenativelysupportJSONinputandoutput. Severaldatabasetechnologiessupportitanditissignificantlyeasiertouseitinmostprogramming languagesaswell. 2.4. ComparisonofFeatures Theapplicationsdiscussedabovehavedifferentinterfacesandsimilararchitecture(JSON,REST API,AJAX,jQuery,CSS),buttheyarenotasfunctionallycompleteasourinteractivemap(Table1), extensivelyillustratedintheSections4and5. In a traditional web application, every time the application calls the server, it renders a new HyperTextMarkupLanguage(HTML)page,triggeringapagerefreshinthebrowser. Thisdoesnot happeninourapplication,showingbasiccontentsinaninitialpage,whichisstaticforSEOreasons. Later,allUI(UserInterface)interactionsoccurontheclientside,throughjQueryandCSS,andafterthe initialpageisloaded,theserveractspurelyasaservicelayer,throughAJAXwhichcallsreturndata (notmarkups)inaparticularJSONformatcalledGeoJSON,dynamicallyupdatingthemapwithout reloadingit. Table1. Comparisonofthefeaturesoftheinteractivemapsusedinthecasestudiesandourmap (non-functionaland/orincompletecontentfunctionsareconsideredabsent). PoI,PointofInterest; SEO,SearchEngineOptimisation. Features Cyprus Malta Japan OurMap Startingmapwithmarkersturnedon X X PoIclassifiedinthecategoriesandtypes X X Markerswithicons X X Clusteringmarker X X Calloutwithadditionalinformationbeyond Interface X X X name Searchfunction X X Multimediamanagement X Timeslider X Filters(Data/Accessibility/Multimedia X object/Period) Coloursaccessibleforall X Responsivewebdesign X X HierarchicalDataStructure(GeoJSON) X X Architecture ScalableWebArchitecture X X SEOCompliance X X SendingtheapplicationdataasGeoJSONcreatesaseparationbetweenthepresentation(HTML5 markup and CSS3) and the application logic (AJAX requests and GeoJSON responses), making it easiertodesignandevolveeachlayer. Inawell-architected“Single-PageApplication”(SPA;RESTful) application, we can change the HTML5 markup and CSS3 style without modifying the code that implementstheapplicationlogic. Moreover,inallthemapsusedinthecasestudies,itisnoteasytorecognisethecategoriesand typesofPoIsbecausetheyadoptauniqueshapeandsometimesusethesamecoloursfordifferent categories/types. Theaboveexamples,mainlycentredonPoImapping,showtheneedtoimprovetheinterfacein ordertogiveusersbetterinstrumentstofindresultsaccordingtotheirneeds. Withthisobjective,a ISPRSInt.J.Geo-Inf.2017,6,34 6of16 procedurehasbeendesignedtosimplifythepresentationofCulturalHeritage(CH)contentsbelonging togeISoP-RrSe fInetr. eJ.n Gceeo-dInPf. o20I1s7,t 6h, r3o4 u ghamultimediamapavailableontheWebwithadvancedfuncti6o onf a16li ties. ItwasdevelopedintheframeworkoftheMustSeeAdvisor(Mu.S.A.)project,whichaimstogive belonging to geo-referenced PoIs through a multimedia map available on the Web with advanced visibilitytocommunitiesbyvaluingknowledgefromselectedstakeholders. functionalities. It was developed in the framework of the Must See Advisor (Mu.S.A.) project, which aims to give visibility to communities by valuing knowledge from selected stakeholders. 3. KnowledgeCollecting 3T. KhenoMwul.eSd.Age. PCrooljleeccttbinegg anwiththeaimtogivevisibilitytolesser-knownsitesbyvaluingknowledge fromseleTchteed Mcuo.Sm.Am. uPrnoijteicets bseugcahn awsitmh tuhnei aciimpa tloit gyivteea vmisisb,icliutylt tuor laelssaesrs-okcnioawtino nsist,eas nbdy vsaelcuoinngd akrnyowsclhedogoel s. frAompp sleilceactteiodn csomhmavuenitibees esnuchd aesv meluonpiecidpalfiotyr teTaimrasn, caulitnuraAl alsbsaonciiaatio[n8s], aanndd seScoynrdaacruys sechionolsI.t a ly [9], progressiAvpeplyliscatrteionngst hheanvine gbteheeni ndteevrceolonpneedc tifoonr sTbiertawnae einn kAnolbwalneida g[e8—] eaxnpdr eSsyseradcuthsero uing hItmalyu lt[i9m],e dia objepctrso—graesnsdivpellya cesst.rengthening the interconnections between knowledge—expressed through mMuoltrimeeredciae notbljye,ctasn—eaxnpde prilmaceesn.t alactivitywascarriedouttotesttheapplicationincollaboration More recently, an experimental activity was carried out to test the application in collaboration with the “Ricciotto Canudo” secondary school in the city of Gioia del Colle (a small town in the with the “Ricciotto Canudo” secondary school in the city of Gioia del Colle (a small town in the hinterlandofsouthItaly). hinterland of south Italy). Thestudentsworkinginthe“TheEuropeanTravellerGuide”Comeniusprojectaimtodevelop, The students working in the “The European Traveller Guide” Comenius project aim to develop, amongotherthings,anawarenessoftheTownship’sheritage. Engagementoftheyouthisnecessary among other things, an awareness of the Township’s heritage. Engagement of the youth is necessary toensurethattheseresidentswillbecommittedtothetownshipinthefuture. Aschildrenaremore to ensure that these residents will be committed to the township in the future. As children are more involvedintheircommunity,italsoenticestheparentstostayinvolvedaswell[10]. involved in their community, it also entices the parents to stay involved as well [10]. TheTahcet iavcittiyviotyf othf ethset ustduednetnstsin invvoolvlveedd ccoolllleeccttiinngg ffoorr eeaacchh PPooI Isesleelcetecdte idn itnhet hCeoCmoemniuens ipursojpecrot, jae ct,a numnbuemrboefra totrf ibautttreisb:unteasm: en,almocea, tiloocna(tlioonn g(iltoundgeitaundde laantidtu dlaet;itauddde;r easds)d,raenssd),c aatnedg ocrayt,ewgoitrhy,a wthituhm ab nail ofatrheupmrebsnenaitla toivf eap rheoptroe,spenhtyastiivcael apchcoetsos, ibpihliytysicsatal tuacsc,ecsesnibtuilirtyy, asgtaet,uasn, dcesnhtourrtya, nadgeex, taenndd esdhodrets carnidp tion. eIxntetnhdeeds edceosncrdipptihoans. e , the multimedia documents pertaining to each PoI are collected, and the followingInd tahtea ssetcoornedd ipnhaanseo, tthheer mexucletilmfieled:iar edfeorceunmceenPtso Ip,edrotaciunminegn tton eaamche ,PdoeI sacrreip ctoiollnec,tceadt,e agnodry th(seh eet, following data stored in another excel file: reference PoI, document name, description, category image,video,and3Dmultimediaobject),sourceanditsURL,withapreviewimage. Thesedataare (sheet, image, video, and 3D multimedia object), source and its URL, with a preview image. These storedinanexcelfileandusedtogeneratetheone-pagemultimediainteractivemap(Figure4)through data are stored in an excel file and used to generate the one-page multimedia interactive map (Figure anauthorwareenvironment. 4) through an authorware environment. Amongothers,threeindustrialarchaeologyPoIswerelocated,withtheaimofovercomingthe Among others, three industrial archaeology PoIs were located, with the aim of overcoming the oftennegativeassociationsofneglectedorabandonedindustrialsites,whichareoftendemolished, often negative associations of neglected or abandoned industrial sites, which are often demolished, resultinginthelossofanimportantpieceofourhistory. resulting in the loss of an important piece of our history. Figure 4. The interactive map of “Gioia del Colle”; the map displays all PoIs because the “Time slider” Figure4.Theinteractivemapof“GioiadelColle”;themapdisplaysallPoIsbecausethe“Timeslider” (on the left, detached from the frame) is set on the XX Century. The main components of our (ontheleft,detachedfromtheframe)issetontheXXCentury.Themaincomponentsofourinteractive interactive map are: “Menu” (left); “Callout” (centre); and “Sidebar” (right). mapare:“Menu”(left);“Callout”(centre);and“Sidebar”(right). ISPRSInt.J.Geo-Inf.2017,6,34 7of16 ISPRS Int. J. Geo-Inf. 2017, 6, 34 7 of 16 Theexamplesreportedinthefiguresreferto“DistilleriaCassano”,oneofthemostimportant monuISmPReSnT Inthste. Jo.e Gxfeaoim-nInpdf.l u2e0ss1 t7rr,e i6pa, ol34ra t erdch ina etohleo fgigyurines Arepfeur ltioa ,“Danisdtillienrical uCdaessdanoon”, tohnee loifs tthoe fmmosot nimumpoe7r ntoaft na16tl and monuments of industrial archaeology in Apulia, and included on the list of monumental and environmentalheritage. envirTohnem eexnatmal phleersi traegpeo. r ted in the figures refer to “Distilleria Cassano”, one of the most important Uponitsrenovation,ithostsevents.ForthatPoI,theinteractivemaphasalinktoa3Dmultimedia monuUmpoennt si tso fr einnodvuasttiroianl, aitr chhoasetosl oegvye nitns . AFpour ltiah,a ta nPdo I,i ntchleu diendte roanc titvhee mlisatp ohf ams oan luinmke ntota la a3nDd objecmet:nuavlitvriomirntemudaiealn ottaobluj ehrcetor: ifata tvghieer.t ub auli ltdouinr gof( Fthige ubrueild5)in.g (Figure 5). Upon its renovation, it hosts events. For that PoI, the interactive map has a link to a 3D multimedia object: a virtual tour of the building (Figure 5). Figure 5. Virtual tour of “Distilleria Cassano”—a 3D multimedia object accessible through the map. Figure5.Virtualtourof“DistilleriaCassano”—a3Dmultimediaobjectaccessiblethroughthemap. It is possible to activate the site’s layout, displaying all the viewpoints of the virtual tour (right). Itispossibletoactivatethesite’slayout,displayingalltheviewpointsofthevirtualtour(right). Figure 5. Virtual tour of “Distilleria Cassano”—a 3D multimedia object accessible through the map. 4. ThIet iIsn pteorsfsaibclee to activate the site’s layout, displaying all the viewpoints of the virtual tour (right). 4. TheInterface The desktop map interface is articulated into three main components: “Menu” (Figure 4, left), 4. The Interface T“Chaelldoeust”k t(oFipgumrea 4p, icnentetrrefa),c aenids “aSritdiecbualar”t e(dFiginutroe 4th, rriegehtm). a incomponents: “Menu”(Figure4,left), “Callout”MT(Fhueilg tdiumerseekd4toi,apc c emonnattrpeen )itn,sta e(nfrifdlatec“reSa ibisdl eae rbbtyaic rcu”alta(eFtgeidogr uiynr: tegoa4 tl,hlerrrieyge,h smth)a.eient, cvoimdepoo, naenndt s3:D “ Mmeunltuim” e(Fdiigau orbej e4c, tl)e afrt)e, Ma“cCcuaellstlsiomiubtle”ed (tiFhairgocuuorgneht 4e t,n hcteesinr(t fiprelrt)e,ev arianebwdl s“e,S bmidyaencbaaatgre”eg d(oF brigyyu :“rgFeao 4ll,dl ereirrgy”h,, ts“)h.T ei leet”,, vaindde o“T,aanblde”3 fDunmctuiolntism perdoviaidoebdj einct )are the “MMeunltuim” (efdoira a clol nthteen Ptso I(sfi)l taenrdab inle tbhye cPaoteI’gso “rCya: gllaolulet”ry (,F sihgeuerte, 6v)i.d eo, and 3D multimedia object) are accessiblethroughtheirpreviews,managedby“Folder”,“Tile”,and“Table”functionsprovidedinthe accessible through their previews, managed by “Folder”, “Tile”, and “Table” functions provided in “Menu”(forallthePoIs)andinthePoI’s“Callout”(Figure6). the “Menu” (for all the PoIs) and in the PoI’s “Callout” (Figure 6). Figure 6. Interconnections between knowledge—expressed through multimedia objects—and PoI.s. Figure 6. Interconnections between knowledge—expressed through multimedia objects—and PoI.s. Figure6.Interconnectionsbetweenknowledge—expressedthroughmultimediaobjects—andPoI.s. ISPRSInt.J.Geo-Inf.2017,6,34 8of16 4.1. The“Menu” ThISePR“SM Inet.n J.u G”eo-cInof.m 20p17o, n6,e 3n4 t hasthefollowingfunctions: 8 of 16 ISPRS Int. J. Geo-Inf. 2017, 6, 34 8 of 16 • “B4e.1s.t Tshiete “”M,teonul”o catethemostinterestingsiteaccordingtoitsranking(indevelopment). • “S4a.1te. Tllhitee “”M,teonus”w itchthemapto/fromtheearthview. The “Menu” component has the following functions: • “Slideshow”, toswitchon/offamovingsetofoneimage/PoI.Thisfunctioncanbeactivated • T“Bhees “t Msiteen”u, ”to c olomcaptoen tehnet m haoss tt hinet eforellsotwinign gsi tfeu naccctioorndsi:n g to its ranking (in development). usingthecommand“?photo”intheURL.Itisusefulforpublicinstallations(as,forexample,the •• ““BSaetset lsliittee””,, ttoo slowciatcteh tthhee mmoaspt itnot/efrroemsti nthge s eitaer tahc cvoierdwi.n g to its ranking (in development). in••s tall““aSStailiotdenellsiihtneo”Sw, yt”or, astcwou istswcehi[ ttc9hh]e, owmnah/opef frt oea/ famrotoomvu itcnhhges escaertre teohnf v oitenowet e.i mmaigseu/PsoeId. )Tthoisc faupntcutiroent hcaenu bsee ra’cstiavtatteendt ion. • “T•i me“usSslliiinddgee strhh”eo, wctoo”m,fi mtlotea snrwdmi “tca?hpr khoeonrt/oso”fa fic nac tomhredo UviniRngLg. t soIte tits ho uefs soeefnuleel cfimotera dpguecb/ePlnioctI ui.n rTsyht.ailsl aftuionnctsi o(ans ,c faonr ebxea macptilvea, ttehde • “Foldeuinrs”sint,agtlol tahstieho conow imn imSnyaarnadwc u“is?nepd h[o9o]wt, ow”a hilnler ptehr aee vUtoiReuwLch. sIstco irnse euensb etyfoutole fmnoer i sipn uubsseelidqc) ui nteosn tcacaleplat(tumiorena snth (uaea su,l lsfyoer/r’ esa xuaattmtoemnptliaeo,t nitch. ael ly)—a to•o lbai“rnTsaitmlalloela wstliisodnteh rin”e, m Styor tfaoilctubesree mfi [9alt]re,k wreerhdse arbceyc ao crtdoauitnecggh ostocrr ytehe(enF sitegoltueecrmtee di7s , cueosnnetdut)rh yteo. lceafptt)u.rAe ltlheth ueseprr’se avtiteewntsioonf. images •• ““TFoimldee rs”li,d teor s”h, otow f iilnte ar wmianrdkoewrs aalclc porredviniegw tos othnee sbeyl eocnteed i nc esneqtuureyn. ce (manually/automatically)— couldbevisualisedinan“Imageviewer”thatallowstheusertopanandzoomtheimage—like • “aF toolodlbera”r, a tlolo swhos wth ienm a two ibned foilwte raelld p brye vciaetwegso ornye ( Fbiyg uornee 7in, o sne qthuee nlecfet) (.m Aalln tuhael lpyr/eavuiteowmsa otifc iamllayg)—es using a magnifying glass—thereby creating a sense of immersion and stimulating curiosity. aco tuooldlb baer valilsouwalsi stehde min taon b “eI fmilategree dv ibeyw ceart”e gthoarty a (lFloigwusr eth 7e, ounse trh teo l epfat)n. Aanlld t hzeo opmre vthieew ims oafg iem—algikees Anoverviewpanelgivestheuserfullcontroloverdetails(Figure7,ontheright). cuosuinldg ab em vaigsunaiflyisiendg ignl aasns —“Imthaegreeb vyi ecwreeart”in tgh aat saelnloswe os ft hime museerrs tioon p aannd a nstdim zouolamti nthge c iumriaogseit—y.l Aikne • “Tableuo”vs,ietnrogv liaies wmt iapngannaiefwly giinnivgde gosl wathsesa— ullstihetree rfmueblsly ca colrpnehtaratoibln oegvt aiec rsa edlnleysteao iolrsfd i(emFriemgduerrbes ai7os,n eo dnan otdhn es ttrhiimgehufitl)ae. tli dngs ecluercitoesdityb. yAtnh euser. A•c asco“aTvdeaerbvlleiies”wt, ta opl laloinswet lis gnti vha eewsm itnhtdeo ouwbsee arfi lflul itltele rcmeodsn tabrloyplh coaavbteeertg idcoaertllyay.il soA r(dFsieegrauerdrce hb 7a,f suoennd c tohtineo rtnhigeihs ftia)e.l lsd o spelreocvteidd ebdy t(hFeig ure8, on• the“ulTseeafrbt.)l .eA” ,c taos claisdt ei nli sat walilnodwosw t haelml i tteom bse a flpilthearbeedt ibcyal lcya toergdoerrye.d A b asesaedrc ho nf uthnect fioienld i ss eallescot epdr obvyi dthede • “Tile”,u(Ftsoiegrdu. riAsep 8cl,aa osycna itdnheea llisescft tra)o.l lloliwnsg twheimnd toow bea flilltieteremd sb—y acattoeoglobrayr. Aal lsoewarcsht hfuenmcttioonb ies fiallstoe rperdovbiydecda tegory • (“FTiigleu”r,e t8o, odni stphlea yle fitn). a scrolling window all items—a toolbar allows them to be filtered by (Figure8,ontheright). • “caTtieleg”o,r yto ( Fdigisuprlea y8 , ionn at hsec rroigllhint)g. window all items—a toolbar allows them to be filtered by category (Figure 8, on the right). Figure 7. The interactive map—”Folder” window (left) with an image preview; it is possible to Figure7.Theinteractivemap—”Folder”window(left)withanimagepreview;itispossibletoactivate Facigtiuvraet e7 a. nT “hIem iangtee rvaicetwiveer ”m wapit—h t”hFeo oldveerr”v iwewin pdaonwe l ((lreifgth) tw). ith an image preview; it is possible to an“Imageviewer”withtheoverviewpanel(right). activate an “Image viewer” with the overview panel (right). Figure 8. The interactive map—”Table” window (left) with filter and search functions called from the Fcaiglluoruet 8(i.n T bhaec ikngterroaucntidv)e a mndap “—Ti”leT”a bwlein”d woiwn d(roiwgh (tl)e. ft) with filter and search functions called from the Figure8.Theinteractivemap—”Table”window(left)withfilterandsearchfunctionscalledfromthe callout (in background) and “Tile” window (right). callout(inbackground)and“Tile”window(right). ISPRSInt.J.Geo-Inf.2017,6,34 9of16 Two function icons are provided on each preview, giving users the possibility to locate the ISPRS Int. J. Geo-Inf. 2017, 6, 34 9 of 16 referencePoI(availableonlyinthe“Folder”and“Tile”windowscalledbythe“Menu”)ortoactivate inanewwTwinod ofuwnctthioenm icuolntism aerde iparcoovnidneedc toend etoacthh eprseevleiecwte,d gpivrienvgi euwse(rfso trheex paomsspilbei:lit“yI mtoa gloecavtiee wtheer ”for reference PoI (available only in the “Folder” and “Tile” windows called by the “Menu”) or to activate images—Figure7,ontheright). in a new window the multimedia connected to the selected preview (for example: “Image viewer” 4.2. Tfhoer “imCaaglleosu—t”Figure 7, on the right). T4.h2e. Tchael “loCualtlocuotm” ponent, which can be opened by clicking on a PoI box in the sidebar or on a markeronthemap,showsname,address,andthethumbnailofthePoI.Italsoshowsfunctionicons,a The callout component, which can be opened by clicking on a PoI box in the sidebar or on a shortdescription,thebuildingperiod,andstatusicons. A“more”linkallowsuserstoseetheextended marker on the map, shows name, address, and the thumbnail of the PoI. It also shows function icons, descraip sthioonrt (dFeigscurripet9io).n,T thhee fbuunicldtiionng ipceorniosd“,F aonldd esrt”a,tu“sT iilceo”n,sa. nAd ““mTaobrele”” li(naks ianllothwes “uMseerns uto” csoeem tphoe nent) applyexotnenlydetod tdheescmriuptltioimn e(Fdiigaucroe n9t)e. nTtheb efulonncgtiionng ictoontsh “eFPooldIeur”n,d “eTrileex”a, manidn a“tTioabnle(t”h (easl oinca tthee f“uMncetniuo”n icon isnotcoamvapiolanbelnet)). apply only to the multimedia content belonging to the PoI under examination (the locate Tfuonacltlioonw icmona pis enmotb aevdadilianbgle)i.n apagerelatedtoaspecificPoI,thisfunctioncanbeactivatedusing the commTaon adllo“w?n m=a#p& ecmalbleodudt=inogn i”n ain pathgee rUelRatLed, wtoh ae srpee#cifiisc tPhoeI, PthoiIs fcuondceti.onIt ciasna bles oacptiovsasteibdl uestiongs how the command “?n=#&callout=on” in the URL, where # is the PoI code. It is also possible to show the themapassigningthezoomfactorusingthecommand“?zoom=#”,centredonapointwithgiven map assigning the zoom factor using the command “?zoom=#”, centred on a point with given coordinates(“lat=#&lon=#”),orgivencode,aspreviouslyviewed(“?n=#”). Onthebottom,twostatus coordinates (“lat=#&lon=#”), or given code, as previously viewed (“?n=#”). On the bottom, two status iconsarereported;theyshowthephysicalaccessibilitystatusofthatPoI(throughthreeemoticons: icons are reported; they show the physical accessibility status of that PoI (through three emoticons: easy,uneasy,andrestricted). easy, uneasy, and restricted). Figure 9. The interactive map (improved version for Albania)—the “Callout” with the extended Figure 9. The interactive map (improved version for Albania)—the “Callout” with the extended description (centre). In the “Menu” (opened on the left) the function “Satellite” and “Slideshow” are description(centre).Inthe“Menu”(openedontheleft)thefunction“Satellite”and“Slideshow”are active, then the map is in earth view and the slideshow runs on bottom. The map shows only the PoI.s active,thenthemapisinearthviewandtheslideshowrunsonbottom.ThemapshowsonlythePoI.s belonging to the “Architectural ensemble”, the only type switched-on in the sidebar (right). belongingtothe“Architecturalensemble”,theonlytypeswitched-oninthesidebar(right). 4.3. The “Sidebar” 4.3. The“Sidebar” The sidebar has two sections: a search box with a dynamic legend (Figure 10, on the left and Thesidebarhastwosections: asearchboxwithadynamiclegend(Figure10, ontheleftand centre) and a filter panel (Figure 10, on the right). centre)andafilterpanel(Figure10,ontheright). 4.3.1. Search Box with Dynamic Legend 4.3.1. SearchBoxwithDynamicLegend The search box allows the user to find PoIs according to the typed letters, while updating the Tdhyneasmeaicr clehgebnodx caolnlotewntss tahcecourdseinrgtloy fi(FnigduPreo 1Is0,a ocnc othrde ilnefgt)t. oThthe edtyynpamedicl eletgteernsd, dwishpillaeyus padn aintifnog the dynabmoixc olef gPeonIsd lcisotendte bnyt scaatcecgoorrdyi nangdly t(yFpieg uifr aev1a0il,aobnle t(haes lfeofrt )“.BTashielicday” naanmd i“cClheugrecnhd” dtyipspesl aiyns thane info “Architectural monuments” category—Figure 10, on the centre) using colours unambiguous to both box of PoIs listed by category and type if available (as for “Basilica” and “Church” types in the colour-blind and non-colour-blind people [11]. “Architecturalmonuments”category—Figure10,onthecentre)usingcoloursunambiguoustoboth colour-blindandnon-colour-blindpeople[11]. ISPRSInt.J.Geo-Inf.2017,6,34 10of16 ISPRS Int. J. Geo-Inf. 2017, 6, 34 10 of 16 Figure 10. The interactive map— Dynamic legend with meters showing the number of PoIs according Figure10.Theinteractivemap—DynamiclegendwithmetersshowingthenumberofPoIsaccording to the search results for “nic” (left); the legend opened at PoI level (centre); filter panel (right). tothesearchresultsfor“nic”(left);thelegendopenedatPoIlevel(centre);filterpanel(right). These constraints limit the total number of different categories to five. However, this is not a proTbhleesme bcoecnasutrsae ihnatsvilnimg imtothree tthoatnal fnivuem cobleoruorsf adti faf etirmenet ccaautseegso croielosutro tfirovueb.leH ionwsteeavde ro,ft hreisduiscinnogt a proabmlebmigubietyc a[1u2s]e. h avingmorethanfivecoloursatatimecausescolourtroubleinsteadofreducing ambiguEitaych[1 c2a]t.egory/type box contains data according to the map status (i.e., each content can change froEma cthimcea tteog toimrye/ atcycpoerdbionxg ctoon thtaei nsesadrcahta/fialctecro rredsiunlgtst)o: themapstatus(i.e.,eachcontentcanchange fro•m timOen ttohet ilmefte, aa c“cmoradrkinegr btuottthone”s efialtrecrhs/ ofinl ttehre rmesaupl atsl)l :the markers for that category—subsequently, the box colour changes to a grey/default colour. • Ontheleft,a“markerbutton”filtersonthemapallthemarkersforthatcategory—subsequently, • In the centre, the “category/type name button” shows/hides its group of PoI info boxes theboxcolourchangestoagrey/defaultcolour. (containing a thumbnail image, and the name and address of each PoI). • • InAth meecteern torne ,thteh erig“hcta tsehgoowrys /thtye pneumnabmere ofb PuottIos na”vasihlaobwles a/th tihdaets miotsmgernot;u tpheo sfeaProcIh ifnofro “nbioc”x es (containingathumbnailimage,andthenameandaddressofeachPoI). produced one “Architectural ensemble” and two “Architectural monument” PoIs– among them • Atmhee tPeorIo nnamtheedr “igChhtusrhcho wofs Stahinet nNuimcoblaesr”.o fPoIsavailableatthatmoment; thesearchfor“nic” producedone“Architecturalensemble”andtwo“Architecturalmonument”PoIs–amongthem 4.3t.h2e. FPilotIern Pamaneedl “ChurchofSaintNicolas”. The filter panel allows the user to select the following parameters: 4.3.2. FilterPanel • Th“eDfialttae”r (pdaenfaeullatl lfoiewlds ftohre teuxste sretaorcshe:l eticttlet;h aedfdoiltlioownainl fgieplda:r aamdderteesrss :and description). • “Accessibility” (default: no filter; any combination of easy/uneasy/restricted available). • • “D“aMtau”lt(idmeefaduialt” fi(deledfafuolrt: tnexot fsiletaerr;c han:yti tcloe;mabdidniattiioonna olffi gealdll:erayd/dshreesest/vaniddeod/e3sDc rmiputilotinm).edia object • “Aicf caevsasiilbaibliltey).” (default: nofilter;anycombinationofeasy/uneasy/restrictedavailable). • • “M“uPletrimioded” i(ad”ef(aduelfta: unlot: fniltoerfi; latenry; apneryiocdo mrebgiinstaetrieodn ionf tghael ldeartya/bsahsee eatv/aviliadbeloe/).3 Dmultimediaobject ifavailable). The multimedia category can be selected directly through a toolbar (in the “Folder” and “Tile” • wi“nPdeorwiosd) ”or( dtherfoauuglth: nao mfielnteur ;(iann tyhep “eTriaobdler”e gwisintedroewd)i.n thedatabaseavailable). 5. TThhee Amruchltiitmecetduirae categorycanbeselecteddirectlythroughatoolbar(inthe“Folder”and“Tile” windows)orthroughamenu(inthe“Table”window). Every software system has its own architecture, but not every software architecture is defined. 5. TThhies Aisr cwhhitaetc tcuarne make the difference as to whether a system works and how it is received by stakeholders. Sometimes the technology decisions mistakenly shape the architecture. The application Everysoftwaresystemhasitsownarchitecture,butnoteverysoftwarearchitectureisdefined. must support a variety of different clients including desktop browsers, mobile browsers, and native Thmisoibsilwe haaptplcicaantiomnask. eIt tmheigdhitf faelrseon icneteagsrattoe wwihthet hoethrear aspypstleicmatiwonosr kvsiaa enidthehro wwebit siesrvreicceesi voerd ab y stamkeehsosaldgee rbsr.oSkoemr. eLtaimrgees ctohmeptelecxh nsoofltowgayred egcoiessio tnhsromugishta ak seenrliyess ohfa dpeectohnestarrucchtiitoencst uarte d.iTffheereanpt plelvicealtsi.o n mustsupportavarietyofdifferentclientsincludingdesktopbrowsers,mobilebrowsers,andnative