Comments 0

Document transcript

                                                        Every child deserves a champion —an adult who will never give up on them,who understands the power of connection,and insists that they become the best thatthey can possibly be.—Rita PiersonTo M.Antille,G.Baumbach and my parents...AbstractInvenio is free software platformfor digital libraries and document repositories on the web.Invenio was originally developed at CERNto power its scientiﬁc document server containingabout 1 million of articles,books,photos,videos,and more.Invenio software is nowadays used by about thirty large institutions and library networksworldwide andis being co-developedby institutions suchas Cornell University,EPFL,Harvard-Smithsonian Centre for Astrophysics,or SLACNational Accelerator Laboratory.The goal of this project is to enhance user experience with Invenio on modern mobile plat-forms.This includes studying suitability of various techniques such as developing native iOSor Android application versus using HTML5 web-based frameworks such as jQuery Mobile orSencha Touch.vRésuméInvenio est une suite logicielle libre pour les bibliothèques numériques et les dépôts de docu-ments sur le web.Invenio a été initialement développé au CERNpour équiper leur serveur dedocuments scientiﬁques contenant environ 1 million d’articles,livres,photos,vidéos,etc.Logiciel Invenio est aujourd’hui utilisé par une trentaine de grandes institutions et réseaux debibliothèques à travers le monde.Il est co-développé par des institutions telles que l’Universitéde Cornell,EPFL,Harvard-Smithsonian Centre for Astrophysics,ou SLACNational AcceleratorLaboratory.Le but de ce projet est d’améliorer l’utilisation d’Invenio sur les plateformes mobiles mo-dernes.Cela comprend d’examiner la pertinence des différentes techniques telles que ledéveloppement native iOS/Android ainsi que les frameworks HTML5 comme jQuery Mobileou Sencha Touch.viiContentsAbstract (English) vAbstract (French) viiIntroduction 11 Introduction 11.1 Motivation.........................................11.1.1 Mobile Internet Growth.............................11.1.2 Fragmentation..................................21.1.3 Invenio.......................................31.2 Project’s Goals.......................................32 Apps Development Approaches 52.1 Approaches........................................52.2 Native Apps........................................62.3 Web Apps..........................................72.4 Hybrid Apps........................................82.4.1 Apache Cordova..................................92.4.2 Adobe PhoneGap.................................102.4.3 Other Hybrid Mobile App Frameworks....................102.5 Comparison........................................112.6 Choice Of Approach...................................122.7 Touch-Optimized Web Frameworks..........................143 Requirements for Mobile ApplicationDevelopment 153.1 Mobile User Interface..................................153.1.1 Common Android UI...............................163.1.2 Common iOS UI.................................173.2 User Habits.........................................183.2.1 Overall Appearance................................183.2.2 Interactive Elements...............................203.3 Native Feel.........................................203.3.1 Improve Hybrid App Feel............................21ixContents3.4 App Store ReviewGuidelines..............................233.5 Responsive Web Design.................................243.5.1 Key Elements...................................244 DesignAnd Implementation 254.1 Elements..........................................254.1.1 Mobile Phone...................................254.1.2 App.........................................254.1.3 Server Side.....................................264.2 Components........................................264.3 User Interface And Functionality............................274.3.1 Search View....................................284.3.2 Toolbar.......................................284.3.3 Menus.......................................294.3.4 Search Result View................................294.3.5 Record View....................................304.3.6 Saved Records View...............................314.3.7 Other Views....................................314.4 Tablet UI..........................................314.5 Web App stucture.....................................334.5.1 Files Organization................................334.5.2 Execution.....................................344.6 Off-line Records......................................354.7 Conﬁgurations Files...................................364.8 Optimizations.......................................375 Results And Conclusion 395.1 Invenio Mobile......................................395.2 Hybrid App.........................................395.3 Futures Outlook......................................406 Bibliography 416.1 Books............................................416.2 Technical Articles.....................................426.3 Conference.........................................426.4 Websites..........................................43x1Introduction1.1 MotivationIn a World on the move and where the need for information seems important,the mobilesolution becomes essential.Whether at work,in the mall or in the train,mobile devices areubiquitous.With 6.8 billion mobile subscriptions,the mobile market doesn’t stop growing.That is equivalent to 96 percent of the world population (7.1 billion).[ITC(2013)].The success of the smartphone was very fast.We are just six years after the sale of the ﬁrstApple smartphones and people already want to consult information everywhere,even awayon a trip.It can be something very important,especially in the professional ﬁeld.This marketdon’t stop evolving.Information was never so accessible though this technology is very recent.1.1.1 Mobile Internet GrowthThe global mobile data trafﬁc grows incessantly.It grew70 percent in 2012.According to Cisco,it’s not ready to cease.Global mobile data trafﬁc reached 885 petabytes per month at the endof 2012,up from520 petabytes per month at the end of 2011.[Cisco(2013)]In the developed world,77% of the population are Internet users in 2013.Internet usersare people using the Internet in the last 12 months.The smartphone penetration continued togrow.At the end of 2012,two-thirds of Americans who acquired a newmobile phone chose asmartphone instead of a feature phone.[Nielsen(2012)] [Wroblewski(2011)]In the developing world,only 33% of the population are Internet users in 2013.But thesituation is evolving and several projects are in the progress of improving the situation.We can mention 2 projects:• The Google"Loon"project is a network of balloons traveling on the edge of space,designed to connect people in rural and remote areas.[Google(2013b)]1Chapter 1.Introduction• The 50x15 Initiative,launched by AMD,which seeks to give 50 percent of the world’spopulation access to the internet by 2015.[Ruiz(2007)]Figure 1.1:Global Mobile Data Trafﬁc,2012–2017,by device (TB per Month).[Cisco(2013)]1.1.2 FragmentationWith 79%of smartphone sales,Android realized 23.0%growth compared to the same 3 monthslast year.iOS was secondduring the periodwith14.2%of smartphone sales,down23.4%versuslast year.Windows continues to make gains,upto 3.3%of smartphone sales.[Gartner(2013b)]Table 1.1:Worldwide Smartphone Sales to End Users by OS.[Gartner(2013b)]OS 2nd quarter 2012 2nd quarter 2013Android 64.2 79.0iOS 18.8 14.2RIM 5.2 2.7Windows 2.6 3.3Symbian 5.9 0.2Other 3.3 0.6One of the severe problems of the smartphones is the fragmentation of this market.It presentsa lot of problems for developers.It is very difﬁcult to make an app1which is compatible withall devices.To have different OS leads to have different versions that makes supporting devicesa nightmareIf we want to do an app only for Android,because it’s a start,in reality this marker is frag-mented in different version of this OS.iOS have also a fragmentation,but not as much asAndroid.Additionally,Android on some device has been modiﬁed to work closely with itshardware.[Jones(2013)]1mobile application21.2.Project’s Goals(a) Android Fragmentation(b) iOS FragmentationFigure 1.2:Android and iOS Fragmentation Visualized.Data:[Signal(2013)]A lot of projects could provide newpossibilities and be more accessible with this newgrowingmarket.It’s the case of Invenio.1.1.3 InvenioInvenio is a free software suite enabling you to run your own digital library or documentrepository on the web.The technology offered by the software covers all aspects of digitallibrary management fromdocument ingestion through classiﬁcation,indexing,and curationto dissemination.[Invenio(2013)]Invenio has been originally developed at CERN to run the CERN document server,man-aging over 1,000,000 bibliographic records in high-energy physics since 2002,covering articles,books,journals,photos,videos,and more.Invenio is being co-developed by an internationalcollaboration comprising institutes such as CERN,DESY,EPFL,FNAL,SLAC and is being usedby about thirty scientiﬁc institutions worldwide.[Invenio(2013)]1.2 Project’s GoalsThe goal of this project is to enhance user experience with Invenio on modern mobile plat-forms.This includes studying suitability of various techniques such as developing native iOSor Android application versus using HTML5 web-based frameworks such as jQuery Mobile orSencha Touch.The project will include enriching APIs of various Invenio modules in order tosuit chosen solution.The server-side code will be written in Python programming languageand Flask web development framework,using SQLAlchemy toolkit for persistence.Different options could be investigated for the project:one possibility would be to implementa full-featured mobile version of an Invenio site,while another direction would be to builda"companion"app that would complement/extend the features of Invenio,without fullyreplacing it.3Chapter 1.IntroductionAt the beginning of the project a number of use cases have been imagined:• Search.Searching is the most important functionality offered to users.Make sure it isrelatively touch-optimised.(Already good thanks to responsive layout.) Beware of facets,beware of detailed record pages etc.Adapt responsive design as needed.Unclutteredsearch box.Easy-to-get and easy-to-use add-to-search.Stripped-down formats for theresults (title/author,DOI,citation count).Priority:high.• Submit material via mobile devices is another important functionality of Invenio webapp.Priority:moderate,not really essential yet.• Journal.Invenio offers overlay journal capabilities e.g.see Atlantis Times demo journalat http://invenio-demo-next.cern.ch/journal/.Make sure this is nicely readable onmobile devices.Priority:lowdue to possible move of to http://bulletin.cern.ch/Drupal.• Annotations,Baskets,Tags.User baskets contains items of interest,possibly annotated.Desirable to access favourite papers in ofﬂine mode.Desirable to allowofﬂine taggingand annotations.Sync on becoming online again.Push/pull considerations.Alternative:revive tagging UI and use tags for"Read Later","Sync to Mobile",etc.• Ofﬂine reading.Users may mark certain pages for future ofﬂine access,say author pageon INSPIRE.Populate local ofﬂine store,study possible use of Box,Dropbox,Drive andfriends in this context.Possible sync of pages on becoming online again.• Multimedia.Responsive design slideshowwith navigation controls.Once multimediaslideshowis ready,do the same for Plots tab.• Switch between Invenio sites.Some users have split functionality e.g.internal notesliving behind password on http://cds.cern.ch/and public papers living on http://inspirehep.net/.Make sure users caneasily switchbetweenservices.Study cross-servicecapabilities,annotations etc.• BibCirculation and push notiﬁcations.Send push notiﬁcations when the status of abook has changed,for e.g.when a loan is about to expire (or has expired),when areserved book becomes available,etc.• Retrieve PDF of printed document.Add the possibility to take a picture of a printedpaper,and receive the corresponding electronic version (in your basket,or as linkin email,etc.).The implementation could try using OCR on the photo of the paper,and then use fulltext-search to retrieve the corresponding record,or rely on the somebarcode/QR-code on the printed document.42Apps Development ApproachesThis chapter presents three different approaches to develop a mobile ap-plication and compares their advantages and disadvantages.The chapterexplains and justiﬁes the technologies choose in the project2.1 ApproachesThere is not only one way to create an application for a mobile.The organisations have todecide whichtechnologies tofollowwhenthe project starts because this choice is animportantdecision that will inﬂuence the results entails parameters,such as cost,project time-frame,performances,functionalities and platformsupport to name a few.[IBM(2012)] This chapterdistinguishes three mobile application development options:• Native apps are designed for a speciﬁc operating systemand device.They are developedwith their respective software development kit in their programming language (e.g.,Xcode and Objective-Cwith iOS,Eclipse and Java with Android).• Web apps or HTML5 apps are applications that is handled with a web browser as aclient over a network such as the Internet or an Intranet.[Daniel Nations()]• Hybrid apps are web apps using a web-to-native abstraction layer providing the abilityto use native capability.The hybrid apps are hosted in the smartphone like a nativeapps.5Chapter 2.Apps Development Approaches2.2 Native AppsNative apps consist of binary executable ﬁles developed for a speciﬁc kind of device.To getthe apps,the users have to download it by visiting the respectively app store.On some devices,alternative methods can be provided by the mobile manufacturer.The native apps have a full access to the provided Low-level and High-level APIs.The low-levelAPIs are close to the hardware and they can interact with the device,network,audio or graph-ics render,...such as GPS,ﬁle system,camera,compass,and so on.Hight-level APIs are OSbuilt-in components and services such as contact,calendar,phone calls,text messages,...To work,the developers need a platform-speciﬁc SDK1for each mobile OS.The SDK providestools to write the source code,to debug the project or to join additional resources.Eachupdate of the application needs a newsubmission and a user update.Let’s sumthose up inthe following table:Table 2.1:Speciﬁc software development kitOS Languages Tools App storesiOS Objective-C,C,C++ Xcode Apple App storeAndroid Java (some C,C++) Android SDK Google PlayBlackberry Java BB Java Eclipse Plug-in Blackberry App WorldWindows Phone C#,VB.net and more Visual Studio Windows Phone StoreEach mobile OS gives you its own user interface elements,such as buttons,menus,inputﬁelds,tab,and more.As a result,apps that are designed to work for more than one OS requirethe designer to be familiar with the different GUI.Using the GPU2,the native elements are loaded quickly and their animations are ﬂuid.Nativeapps have faster graphics performance because they use the graphic accelerator.1Software Development Kit2Graphics Processing Unit62.3.Web Apps2.3 Web AppsFigure 2.1:HTML5 Logo[W3C(2012)]The web apps constitute the mobile applications that are basedon a browser-supported programming language and are dis-played in a web browser.Web browser are ubiquitous insmartphones,which makes web apps particularly accessiblefor mobile devices.To popularize,it is a website for smart-phone.The web apps don’t need to be submitted on an app storeor to be downloaded by a user.That requires almost nodisk space on the smartphones and that requires no upgradeprocedures except to publish the new version on they webserver.People who already have experience with web development can easily implement web apps.Technologies are HTML5,CSS,JavaScript in client-side and PHP,Java,Python or all server-sidelanguages relevant for web development.Figure 2.2:Link to the homescreeniOS and Android devices allow users to add the web appslinks to the home screen of the OS.In the case of iOS,there is no difference in the look of a web app and a nativeapp.Compared to previous versions of HTML,HTML5 bringsnew features summary:Semantics,Ofﬂine & Storage,Con-nectivity,Device Access,Multimedia,3D & effect,Perfor-mance & Integration,CSS3 & Styling.All details are onthe W3C website3.For the mobile devices,the essential el-ement of HTML5 is we can use touch events,geolocationAPI(GPS,cellular and WIFI),canvas drawing and local stor-age.In practice,compared to native application,HTML5 keeps sig-niﬁcant limitations.The web apps developers have access toa limited number of these APIs.For exemple,HTML5 doesn’tpermit to use the accelerometer or to send a message,to read a contact or to capture song.For the storage,HTML5 provides an initial local storage of 5MB per domain and an unlimitedsession storage (limited only by systemresources).[Google(2012)].The browser needs user’sagreement for some packages (up to 10MB,or 25MB,or more...).Moreover,all phone’s webbrowsers don’t have implemented the same features.3http://www.w3.org7Chapter 2.Apps Development Approaches2.4 Hybrid AppsHybrid development combines the native execution and another multi-platformdevelopingtechnologies.In our case,we focus on native execution with web technologies.The apps arebuilt in HTML5,CSS and JavaScript and are wrapped inside a thin native container.Theyare neither truly native4nor purely web-based5.With this approache the apps can be pro-grammed in a web language but have access to the advanced native features.This kind of apps uses the browser rendering engine in a webview control6.iOS and An-droid use the webkit as layout engine software but the render can differ slightly and doesn’tsupport same features.For example,calc() as CSS unit value is supported by iOS but not byAndroid [CanIUse(2013)].Some websites like that supply compatibility tables for support ofHTML5,CSS3 can be very precious.This solution is cross-platform,the developer can develop only one application in HTML5for all platformand publish it on the different app stores.The mobile application can use thenative APIs and works without an internet connexion.For the web ﬁles,they are two ways to store it.The web ﬁles are generally stored in theapp itself locally as a resource ﬁles.The alternative is to store the ﬁles on a server.In thissecond case,the app must have a web connexion to work correctly.Hybrid appNative containerWeb code<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"content="width=device-width,initial-scale=1, user-scalable =Device APIsWeb appMobile browserWeb codeWeb code<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport"content="width=device-width,initial-scale=1, user-scalable =no"><meta name="apple-mobile-web-app-capable"content="yes"><title>Invenio Mobile</title></head>Native appNative appDevice APIs001001011010110100010101010010010110101101000101010101101010110000100101101011010001010101011010101100001001011010110100010101010110101011000110101001001011010110100010101010010010110101101000101010104The layout rendering is done via web views render5They have access to native device APIs6UIWebViewfor iOS and WebViewon Android,...82.4.Hybrid Apps2.4.1 Apache CordovaFigure 2.3:Apache CordovaLogo[Codrova(2012)]Apache Cordova is a free and open source mobile de-velopment framework that allow developers to use webtechnologies for cross-platform development avoiding eachmobile native language [Codrova(2012)].With a touch-optimized web framework,they provide tools to develop hybridapps.If a developer wants to use Cordova only for one part of theapps,Cordova allows to mix freely native application compo-nent by implementing a Cordova Web Viewin the project.PlatformsThe Cordova JavaScript libraries are consistent across mobile platforms.As you can see in thefollowing table of features.Cordova produces mobile or desktop applications.Table 2.2:Set of development tools and device APIs available for each mobile platform.Android Blackberry iOS Windows Phone 8 Windows 8Accelerometer Yes Yes Yes Yes YesCamera Yes Yes Yes Yes YesCompass Yes ✗ Yes Yes YesContacts Yes Yes Yes Yes YesFile Yes Yes Yes Yes YesGeolocation Yes Yes Yes Yes YesMedia Yes ✗ Yes Yes YesNotiﬁcatoin Yes Yes Yes Yes YesSplahscreen Yes ✗ Yes ✗ ✗Storage Yes Yes Yes Yes YesCordova also supports some less popular mobile operating systemsuch as webOS,Symbian,Tizen Bada,...ContributorsCordova is developed by the open-source community.The project sources are available onthe Apache git repository:http://projects.apache.org/projects/cordova.htmlApache Cordova graduated in October 2012 as a top level project within the Apache Soft-ware Foundation (ASF).Through the ASF,future Cordova development will ensure openstewardship of the project.It will always remain free and open source under the Apache9Chapter 2.Apps Development ApproachesLicense,Version 2.0.[Codrova(2012)]2.4.2 Adobe PhoneGapFigure 2.4:PhoneGap Logo[PhoneGap(2012a)]PhoneGap is a hybrid framework created by Nitobi,pur-chased by Adobe Systems in 2011 [Systems(2011)].PhoneGapwas shared with Apache under the name Apache Corodova.There are many articles on the Internet talking about Phone-Gap without reference to Corodova.PhoneGap is just a dis-tribution of Apache Cordova.Libraries are the same andwhat you can do with one can be done with the second.This product can also be found under the name of ApacheCallback7.In practice,Adobe PhoneGap,Apache Callback,Apache Cordova are three names for almost the same prod-uct.Adobe purposes a cloud service named Adobe PhoneGap Build.You upload your web ﬁles,theservice compiles and returns the iOS,Android,Windows Phone,Blackberry 5/6/7 and webOSmobile applications.[Systems(2013)]The PhoneGap code was contributed to the ASF8under the name Apache Cordova.Throughthe ASF,future PhoneGap development will ensure open stewardship of the project.It willalways remainfree andopensource under the Apache License,Version2.0.[PhoneGap(2012b)]2.4.3 Other Hybrid Mobile App FrameworksThere are other hybrid mobile app frameworks.To name a few:• Appcelerator Titaniumis a web-based platformthat supports iPhone,Android andBlackBerry.JavaScript sources are compiled to a native apps.More information:http://www.appcelerator.com• IBMWorklight is a commercial development platformbased on Cordova.More information:http://www-03.ibm.com/software/products/us/en/worklight/• Oracle ADF Framework is a framework that supports iPhone,Android.Java,EnterpriseJavaBeans,JSP are compiled to a native apps.More information:http://www.oracle.com/technetwork/developer-tools/adf/overview/index.html• Mono Touch and Mono for Android are web-based platforms for iOS,android and7The project original name8Apache Software Foundation102.5.ComparisonWindows devices.C#and.Net libraries compiled to a native app.More information:http://xamarin.com/monotouch• Adobe Flash + Adobe Air is a framework that executes Flash application to a phonedevices.More information:http://get.adobe.com/fr/air/These solutions have probably good result,but will not be considered for this project.Thereason is that all have partially or totally proprietary licences or are not free.One goal of thisproject is to work only with open source and free solutions.2.5 ComparisonThese three different approaches provide very different solutions that have consequent differ-ences to the result that we obtain.The following schema summarizes the features usable foreach solution:Table 2.3:Mobile Application Development Options.Native HTML5 HybridApp FeaturesGraphics Native APIs HTML,Canvas,SVG HTML,Canvas,SVGPerformance Fast Slow SlowNative look and feel Native Emulated EmulatedDistribution Appstore Web AppstoreDevice AccessNotiﬁcations Yes No YesContacts,calendar Yes No YesGeolocation Yes Yes YesOfﬂine storage Secure ﬁle storage Shared SQL Secure ﬁle systemand shared SQLConnectivity Online and ofﬂine Mostly online Online and ofﬂineDevelopment skills ObjectiveC,Java,..HTML5,CSS,JS HTML5,CSS,JS11Chapter 2.Apps Development ApproachesTo summarize,the main differences are:Native:Hybrid HTML5- Advanced UI interactions - Web developer skills - Web developer skills- Fastest performance - Access to native platform - Instant updates- App store distribution - App store distribution - Unrestricted distribuionNative HybridHTML5Full capabilityPartial capabilityMultipleplatformsSingleplatforms2.6 Choice Of ApproachThe choice of the technology is an important and difﬁcult ruling.Each solution has its ad-vantages and disadvantages.This question arises in many companies and the results arecontradicted.On one side,Facebook and LinkedIn decide to stop working with HTML5/hybrid solutionsand to implement native apps.In this regard,Mark Zucker (co-founder of Facebook) said:"When I’mintrospective about the last few years I think the biggest mistake that we made,as a company,is betting too much on HTML5 as opposed to native...because it just wasn’t there.And it’s not that HTML5 is bad.I’mactually,on long-term,really excited about it."–Mark Zuckerberg,Disrupt SF,September 2012And on the other side we have other big companies such as IBM,Gartner and other pun-dits,who predict the market will stay fragmented.They said cross-platformtools should staya good solution.More speciﬁcally Gartner,Inc.said that hybrid apps,which offer a balancebetween HTML5-based web apps and native apps,will be used in more than 50 percent ofmobile apps by 2015:[Gartner(2013a)]122.6.Choice Of Approach“While hybrid apps will be the majority of enterprise mobile apps,web technologies like HTML5will make up the most commonly used languages for building mobile applications by 2015.”–David Mitchell Smith,vice president and Gartner Fellow,April 2013.However,different requirements for consumer (B2C) and enterprise (B2E) scenarios willresult in very different uses of native,web and hybrid approaches.[Gartner(2013a)]Table 2.4:Consumer/Enterprise Split in 2015.[Gartner(2013a)]Category Native Hybrid WebConsumer 40 40 20Enterprise 10 60 30In recent years with its web services like Google Documents,Google maps or Gmail,Googleshows it’s possible to have web application widely used with over 425 million active users forGmail.My opinion,is that there is not one solution that stands out in all situations.The follow-ing charts can help you get an idea of which technology to choose but doesn’t work in eachcase.Some less easily measurable factors such as knowledge,experiences,costs,etc are alsoimportant.ComplexityDoes your app require featuresHTML5 simply does not provide?SpeedHow important isUI speed for you?AbsolutelyReachHow many devices doyou intend to reachNot that importantNativeHybridVery importantAs many as possiblespecific OSMaintenanceDoes your app have to bequickly update or withoutapp store validationHTML5Not necessarilyAbsolutelyNot necessarilyIn the case of Invenio,I chose to focus my project to a hybrid apps.HTML5 doesn’t pro-vide all future needed features.The actual web site is almost responsive and already works on13Chapter 2.Apps Development Approachesmobile screen.There is not the necessity to have another responsive web site.The speed is not a very important criterion in this project.The user will employ this appto display texts,pictures,videos and pdf.That not require large graphical resources,while itis important to be functional on multiple platforms.However,the Invenio teamhas a greatexperience with HTML and other web technologies.2.7 Touch-Optimized Web FrameworksThere are a lot of web frameworks for mobile application that we can classiﬁed into twocategories.First,we have frameworks which generate a design compatible with many mobileOS such as Sencha Touch and jQuery Mobile.Secondly,we have frameworks like Ratchet andFries which reproduce a design speciﬁc for a given OS.jQuery Mobile and Sencha Touch are touch-optimized HTML5 UI frameworks designed tomake websites and apps that are compatible with all major smartphones,tablets and desktopdevices.jQuery Mobile is built on top of jQuery core by the jQuery Fundation with the MITLicense.Sencha Touch is a product of Sencha based on GPLv3 or commercial Licenses de-pending on the use.Ratchet is a HTML5 UI toolkit initially used for prototyping iOS apps.Ratchet is under the MITlicense.Fries was inspired by Ratchet but for Android apps.There are dozens of HTML5 UI Frameworks,but my choice was jQuery mobile.jQueryMobile has more or less the same performances as Sencha Touch and a large amount of docu-mentations,plugins,etc.We should keep an eye on Ratchet and Fries.These two solutions arevery young but can be promising.The ﬁrst release of Ratchet have less than 3 months whenthis thesis began and Fries didn’t exist.It is a domain that evolves quickly.143Requirements for Mobile ApplicationDevelopmentIn this chapter is discussed requirements and constraints a mobile applica-tiondeveloper has to be careful.First,we talk about howthe users employ themobile applicationand what we have to be attentive about the user interface.In a second time,the chapter explains howto improve the hybrid app feeland howApple and Google reviewall apps to ensure they are reliable andwhat are the provided rules.The last part presents the Responsive Web De-sign,or what are the rules if we want to implement a mobile app for differentresolution and pixel density devices.3.1 Mobile User InterfaceTo obtain an application pleasant to use,its development must be thought to conformitsecosystem.This section describes the global differences between the two main mobile OS.To justify the explanations,examples are based on some existing applications already adaptto both OS.As explained in the next section,the differences between the OS should not beoverlooked.It can seemsimple to design a mobile app,but in fact is not so trivial to adapt a Androidapp to an iOS app and vice versa.It’s not possible to just cut and paste you interface.Someelements are share between Android and iOS,but generally they performdifferent functions.[Rowinski(2013)]15Chapter 3.Requirements for Mobile ApplicationDevelopment3.1.1 CommonAndroid UI1) Status BarFigure 3.1:Android Play StoreThe status bar contains time,battery charge,networkconnexion and signal strength,volume,update infor-mation,or notiﬁcations.2) MainActionBarThis Bar contains the main elements for the naviga-tion.The action bar has several areas.The ﬁrst element is the app icon.It can change if youwish.It provides information about the app.After that,there is the view control that allows toswitch between different views or accounts.In the third position we found the action button thatprovides the most important actions in the currentsection.And ﬁnally we have the action overﬂowpinned to theright side.It’s a contextual menu with the speciﬁc lessfrequently used actions.All details can be found on http://developer.android.com/design/patterns/actionbar.html3) Content AreaIt’s the area where the content is displayed4) Tab BarThe bar provides links to the different subsections of this app.5) NavigationBarOnly on Android,the navigation bar provides the device navigation controls:Back,Home andRecents.There is no equivalent on iOS.On tablet navigation and status bars are combined intoa single"combined bar".163.1.Mobile User Interface3.1.2 CommoniOS UIFigure 3.2:iOS App StoreHere is just a small summary of the iOS UI for thosenot familiar with this OS.More details can be foundon http://developer.apple.com/1) Status BarThe status bar contains information about the devicesuch as time,battery charge,network connexion andsignal strength,alarminformation.2) ToolbarThe Toolbar contains 2 kinds of elements:the naviga-tion controllers which enable navigation through aninformation hierarchy and items speciﬁc to the con-text of the current view.iOS devices don’t have nativenavigation speciﬁc bar.Therefore,navigation actionare made with this ToolBar.3) Content AreaLike in Android,it’s the area where the content is dis-played4) Tab BarA tab bar appears at the bottomedge of a screen orview and gives people the ability to switch betweendifferent sub-tasks,views,or modes.17Chapter 3.Requirements for Mobile ApplicationDevelopment3.2 User HabitsAs you sawin the previous chapters,iOS,Android and other OS have signiﬁcant differences inthe GPU1.This involve differences in the user behaviours.For example,one difference between iOS,Android and Windows Phone is the Back/Quitbutton.Android Phone provides a button at the bottomedge of a screen,displayed by the OS.Smartphones with Windows Phone supply a touchable area at the bottomof the screen.ForiOS there is no back button.For that,you must design a back solution on iOS.The iOS user is in the habit of havinga back button on top left corner in the mobile application.For android and WP8,displayed aback button on the top left is useless and may seemodd.But when you develop,you have tobe sure that the OS back button is supported2.For example,if you load contents without toload a newpage,you should change parameters in the URL hash tag to obtain a newentry inthe history and to have the possibility to use the back button correctly.3.2.1 Overall AppearanceThis kind of problemis not only for hybrid apps,it also happens on native apps.You musttake these differences into consideration when you choose the GUI.They are different pointsof viewto solve the issue.One solution consists in having a platform-independent GUI.The application has the sameGUI on all mobile OS.It’s the case in most of full screen games.They don’t have to implementstandard elements such as,menus,buttons,...(a)(b)Figure 3.3:Angry Birds game on Android(a) and iOS(b)In the idea to have the same GUI on different devices and if the app needs to use standardelements.You can design you own GUI or use existing frameworks.In this case,you must beespecially careful with user habits.1Graphical User Interface2based on history for Apache Cordova183.2.User HabitsOn the one hand you can mix GUI elements formdifferent OS and try to ﬁnd compromises.It’s the case of the UBS Mobile Banking app based on PhoneGap.[AdNovum(2012)]On the other hand you can try to design something new or different from usual.It’s thecase of the Facebook app that was one of the ﬁrst mobile apps to use an unusual menu.Themain content slides out by button tap or drag right.(a)(b)(c)(d)Figure 3.4:UBS Mobile Banking Android(a),iOS(b) and Facebook app Android(c),iOS(d)If having exactly the same GUI on different device is not your priority.It is recommendedto personalize the apps for the given OS.The user will ﬁnd a known environment with per-sonalized elements.A majority of apps are in this case,such as Dropbox,Gmail,Shazaam,...(a)(b)Figure 3.5:Dropbox for Android(a) and iOS(b)19Chapter 3.Requirements for Mobile ApplicationDevelopment3.2.2 Interactive ElementsIs important to have a GUI adapted for the user,but it’s also important to have the usualanimations for the interactive elements too.The elements like menus don’t work the sameway.For example,Android’s menus are displayed on the front of the app and hide a part of thecontent.The rest of the content is darkened.On iOS it’s almost the opposite,the content slideson the right and reveals the menu.(a)(b)Figure 3.6:Gmail menu for Android(a) and iOS(b)3.3 Native FeelFor an application,the waiting time makes the user experience unpleasant.Ideally,the usershould not spend time to wait.Inpractice,there are three important times basedonthe humanperceptual abilities.[Jakob(1993)]These times are the same for thirty years.[Miller(1968)] [Card and Mackinlay(1991)]:0.1 second:The user feels that the system is reacting instantaneously if the delay is 0.1second or less.1.0 second:With a time less than 1.0 second the user has the feel that he is navigatingfreely without to unduly wait for the computer.For the user the 0.2-1.0 delay is normal whenthe computer is working.10 second:The delay higher than 10 second are in general not acceptable.203.3.Native Feel3.3.1 Improve Hybrid App FeelIt is very important to respect the delays cited above.In the case of Hybrid apps,it is not trivialtoreact instantaneously andtoloadcontent inless thanone second.For that,here is some tips:Use CSS animationsCSS animations are hardware-accelerate by ofﬂoading themto the GPU3.Normally,hard-ware acceleration is an important milestone to handle details 3Dmodeling but in our casewe want our HTML element appear smooth and animate smoothly via GPU.[Hales(2011)]Figure 3.7:Hardware-Accelerated ele-ments are redWebkit provides hardware acceleration for someCSS animations.When it is possible,think touse CSS animation instead of JavaScript anima-tion.With this solution,animations could runsmoothly.Not all CSS properties Properties trigger HardwareAcceleration.[Ubl(2011)].The mainly aspects of yourdocument can be accelerated by the GPUare:• General layout• CSS3 transition and 3Dtransforms• WebGl 3Dand Canvas DrawingIf you want to know which elements are Hardware-accelerated use this command to run the iPhone sim-ulator.1                                                                                                                                                                        Hardware-Accelerated elements become red and notare green.Don’t use click eventUsually for a button,a div,or any other elements,we trigger event by click event.Like this:1                                    or with jQuery:1                                  2        3                                 4         3Graphics Processing Unit21Chapter 3.Requirements for Mobile ApplicationDevelopmentBut inthese bothapproaches have a signiﬁcant weakness.The mobile browser will wait almost300ms.The reason is that the browser is waiting to detect if you are actually performing adouble tap.[Fioravanti(2011)]As we saw,if the latency is more than 100ms the user will notice and be disturbed.Wecannot afford to wait 300ms.With this delay the application feel more laggy.Moreover,wegenerally don’t use double click/touch event on mobile device.There are several solutions tosolve this problem:• touchStart and touchEnd can be used to simulate a touch event.With this solution youhave to be sure that the element where you start to touch and where your ﬁnish is thesame.• vclick is a virtualized click event handler provide by jQuery Mobile.This solutioncan be easily used if you already use Jquery Mobile framework in your project.Theyrecommend using vclick with caution anytime the action being triggered has the pos-sibility of changing the content underneath the point that was touched on screen.[jQuery Mobile API(2013)]• FastClick plugin is a simple and popular library for eliminating the 300ms delay underthe MIT licence developed by FT Labs,part of the Financial Times.Use Phonegap featuresWhen a feature exists on both JavaScript and Phonegap/Cordova prefer the Cordova method.Your feature is interpreted by the web viewer in the JavaScript case.Contrariwise,it is partiallyexecuted in native code with the Cordova solution.Moreover,with Cordova the feature is oftenmost complete and customizable.For example,with conﬁrmbox,the title is deﬁnable withCordova,but that is not the case with JavaScript.(a)(b)(c)Figure 3.8:Conﬁrmbox on iOS6(a) iOS7(b) Android(c)Consider smartphone displays differenceTo improve the native feel,don’t forget that you work with a smartphone screen and they havetwo main particularities which must be considered:• There are muchvariety of pixel density.While iOS support two type of resolution retina screen(2x) and regular screen(1x),An-droid support XHDPI(2x),HDPI(1.5x),MDPI(1x),LDPI(0.75x).You have to adjust you223.4.App Store ReviewGuidelinesgraphic elements to be well supported by the screen.More explanation are on the"Responsive Web Design"chapter.• They are touchable.Withthe ﬁnger,the user is less precise thanwitha mouse.Interactive elements shouldbeenough big to be easy target with a ﬁnger.Google recommends using button with 48dp(≈9mm).It’s acompromise betweenbigsize andoverall informationdensity.[Google(2012)]3.4 App Store ReviewGuidelines"If you’re coming fromthe web,you need to make sure that you give people an iOS app experi-ence,not a web experience.Remember,people can visit your website on their iOS devices usingSafari on iOS."–"App Design Strategies",Apple Inc.[Apple(2013b)]During the ﬁrst years,hybrid apps have not been accepted on the app store.Two yearsafter Apple opened this ﬁrst app store,the company allowed the developers to provide hybridapplications.As for native applications,apple control all applications before publishing andcan reject some applications.Apple does not refuse an application because the UI is builtusing HTML but can reject it if the application does not respect some rules.Apple rejects applications that do not[Trice(2012)]:• have a user experience that feels like an"app"• feel"at home"in the iOS ecosystem• offer a differentiation froma mobile web experienceMore precisely,Apple’s"App Store Review Guidelines"has additional tips relate to HTML-based experiences,including the following tips:•"2.12:Apps that are not very useful,unique,are simply web sites bundled as Apps,or donot provide any lasting entertainment value may be rejected"•"10.3:Apps that do not use systemprovided items,such as buttons and icons,correctlyand as described in the Apple iOS Human Interface Guidelines may be rejected"•"10.6:Apple and our customers place a high value on simple,reﬁned,creative,wellthought through interfaces.They take more work but are worth it.Apple sets a high bar.If your user interface is complex or less than very good,it may be rejected"•"12.3:Apps that are simply web clippings,content aggregators,or a collection of links,may be rejected"23Chapter 3.Requirements for Mobile ApplicationDevelopmentThe Google play policies are less restrictive concerning the UI but ask that the app must havea good stability,performance and visual quality.[Google(2013a)]To summarize if you want to publish an app on an apps store you need to get the app readyand obtain a good visual quality.The feel is very important.Users should not feel that is awebsite.3.5 Responsive Web DesignAs explained in the previous paragraph it is mandatory to obtain a good feel with the app.TheRWD4can give a good approach.The notion of Responsive Web Design groups several tenets,technologies and design ap-proach that aims to provide an optimal viewing experience and interaction across a widerange of device resolutions,screen densities.The RWDconcept is describedinthree Key Elements.[Marcotte(2011)] [jQuery Foundation(2013a)]3.5.1 Key Elements• CSS media queries,used to target styles to speciﬁc device characteristics such as screenwidth break-point or resolution.• Aﬂuidgridspeciﬁes elements andwidgets inﬂexible units withthe goal of making themﬂowto ﬁll their containers.In some cases,the ﬂuid grid is not considered necessary tohave RWD.• Flexible images and media,are also sized in relative units so they re-size to ﬁt withintheir containers.RWDis not only for mobile applications,but can also be used for all technologies which useHTMl,such as websites,emails,...4Responsive Web Design244Design And ImplementationIn this chapter are discussed the most relevant parts of the project’s imple-mentation.First,we talk about the global architecture of Invenio Mobile,highlighting its main components.Then,the user interface and the func-tionality is deeply studied,with a special section for the tablet UI.The lastparts present the ﬁles organisation and the optimizations speciﬁc for InvenioMobile.4.1 ElementsAs mentioned in the previous chapters,for the Invenio mobile application,I focused theproject on a hybrid application.This hybrid app is built with Apache Cordova and jQuerymobile as UI framework.To operate the project needs three main components:a mobilephone,an app and the server-side.4.1.1 Mobile PhoneWith Apache Cordova,which is an abstraction layer,the project should works with a widerange of mobile devices.By pragmatismthe project focus on Android and iOS devices whotogether represent 95.3%of smartphone sales.[Worldpanel(2013)]It is not very hard to add other OS support such as Windows Phone or Blackberry but the UIDesign needs to be adjust in order to be consistent with the given OS guideline.4.1.2 AppThe app should be executable in local without internet connection but not all function areaccessible off-line.The application is in large part the same on each device except for somegraphical elements which are personalized in function of the OS or screen size.25Chapter 4.DesignAnd Implementation4.1.3 Server SideInvenio is a software used by several institutes who personalize the software for their needs.All of these institutes use more or less recent versions of Invenio but not all the same.To becompatible with the wide range of Invenio instance,the server side modiﬁcations must be aslight as possible and compatible with most of them.Invenio has the possibility to deﬁne some output formats.For example,we can requestto get the result of the query in HTML,MARCXML,BibTeX,etc.To communicate with themobile application the project supplies two newoutput formats which are computed to bedirectly displayed on the mobile screens:mobile brief (mobb) and mobile details (mobd).Mobile brief contains only the strict necessary to display the search results.Mobile detailscontains all information for a given recode.4.2 ComponentsCordova ApplicationCordova Javascript codeWeb AppHTMLJavaScriptCSSResourcesCordova native codeAccelerometerCameraCompass +GeolocationConnectionstatusDeviceinformationGlobalizationFileInAppBrowserNativepluginsJS LibrariesJS pluginsNotificationWebbrowserengine(Webview)CordovaNative APIHTML5 APIMobile OSOS APIServicesSensorsCordovaJS APIHTML5 APIOS APIFile systemThe Invenio mobile app is built with Apache Cordova.The components of the app are directlylinked to the Apache Cordova structure.The components in the mobile application are:• The Cordova native code is supplied by Apache.It is compiled in native application andprovide to Invenio mobile the possibility to use native features.The project is designed264.3.User Interface And Functionalityto work with the version 2.9 of this development framework.The Cordova native codedepend on the OS• The Cordova JavaScript code is the bridge between the HTML5/JS code and the ApacheCordova native code.In Android,the JS to Cordova native communication is set to theprompt dialog.In iOS,communicate with the native APIs through aniframe.The JS callsare storedinaJSqueue that is readandexecutedby the native component.[Puthraya(2012)]• the webviewis generated by Apache Cordova,it’s the visible part of the app.iOS andAndroid use Webkit but the render is not the same in both cases.Some HTML iOSfeature are not supported Android and vice versa.• The webapplicationis the mainpart of the project.It is the essential code inHTML5,CSSand JS of the project.• Plugins can be added to the project to supplement Cordova features.Plugins are com-posed of JS and native code.Plugins for Phonegap and Cordova are the same.Peoplepropose a lot of open source plugins such as bluetooth,extract zip ﬁles,NFC,Speechrecognizer,barcode scanner,...In the case of this project,I had a ﬁle opener pluginwhich opens popular ﬁle (pdf,word,jpg,videos,...) for android.[github(2013)]• The ﬁle system,some services and sensors are managed by the Mobile OS.It executethe application and provide information that Apache Cordova needs4.3 User Interface And FunctionalityIn the interest of saving time and not reinventing the wheel,the user interface was designedwith jQuery Mobile.After some tests and musings about the user interface,I came to theconclusion that it is not ideal to have exactly the same UI on different sort of devices.The project keeps some jquery mobile elements and look almost similar in the whole inAndroid and iOS while maintaining OS speciﬁc.However,the project include a version foriPad with a beta of iOS7 that is pretty different with the smartphones Android and iOS version.For the project we want to keep the advantage of hybrid apps to not need to be programmedfor each OS or device and to have visual differences.For that only almost 5%of the sourcecode of this app change between the different versions.iOS and Android don’t have the same set of font.You can’t count on standard font such as Arialor Helvetica being present.Add you own font to the project.To help you,Google provides awebsite with a list of open and free font.http://www.google.com/fonts/For the project I use"Open Sans"by Steve Matteson.Apache License,version 2.0.Open Sans was optimized forprint,web,and mobile interfaces,and has excellent legibility characteristics in its letterforms.27Chapter 4.DesignAnd Implementation4.3.1 SearchViewFigure 4.1:Search viewThe main goal of this app is to search documents.Afterthe splash screen the user arrives on the main viewwhichpermits to search record.Contrary to web search engine like google,mostof the time Invenio’s users know what kind of in-formation they key.Sometime,they are searchinga book from a given author,a record with a spe-ciﬁc word in the title,or all information about atopic.To obtain pertinent result,the user is encour-aged to key the request in the good request cate-gories.Whatever the kind of smartphone or tablet used,theuser sees directly all possibilities and can search withoutscrolling.When the keyboard is displayed on the screenand hide a part of the screen,a key gives the possibility tosearch without to scroll on the bottomand click to the search button.4.3.2 ToolbarThe toolbar (or action bar) depends on the OS.Both don’t have the same button and its actionsare not the same neither.For example.iOS has a back button not displayed on Android.284.3.User Interface And Functionality(a)(b)Figure 4.2:Android action bar(a) and iOS tool bar(b)4.3.3 MenusThe left menu is a jQuery Mobile menu,it is also personalized for each OS as mention in theparagraph 3.2.2.The contents,the displays,and the animations are not the same.The appallows the user to work with different services using Invenio (Invenio Demo,CDS,INSPIRE onthe following pictures).(a)(b)Figure 4.3:Android action bar(a) and iOS tool bar(b)This menu can be opened by clicking on the selected service icon on Android or the menuicon on iOS in the upper left.The menu can also be opened by sliding the ﬁnger fromleft toright.About,Settings and Tests items are not in this menu on android but on the contextualmenu.4.3.4 SearchResult ViewAs soon a request is made,the query appears in a blue tape at the top of the screen who isdisplayed beyond the scope of the view.The query can be edited and changed.An auto-completion tools help the user to correctly write his research.The request can be combinedwith logical elements.For example:"TITLE:science ANDNOT AUTHOR:darwin"29Chapter 4.DesignAnd Implementation(a)(b)Figure 4.4:iOS search result(a) and search autocomplet(b)4.3.5 Record View(a)(b)(c)(d)Figure 4.5:Information(a) and Files(b) tabs,photo slideshow(b) and ﬁles dialogue box(d)The records are displayed with tabs.The ﬁrst tab"Information"is displayed on each record,the other tabs depend on the content.Users can see texts,pictures slideshow and videosdirectly on this ﬁrst tab.All tabs except the"Files"tab can be downloaded to be displayed later by clicking to thearrowon the top.The arrowbecomes blue if the tab is already downloaded.On the"Files"tab,ﬁles can be opened by clicking on the name or can be downloaded off-line by clicking on the304.4.Tablet UIstart near the ﬁle name.The project uses a Cordova plugin who permit the user to chose withwhich app he want to open the ﬁle.4.3.6 Saved Records ViewWhen a pdf,a video,a picture,or any other record’s contents are downloaded,the user canconsult it in this view.The user can look every record fromany domain order by name.Theuser can delete only one ﬁle or directly a whole record with many ﬁles.To delete the user hastwo possibilities:By sliding his ﬁnger on the given ﬁle/record or by selecting ﬁles with thecheckbox and clicking on the trash.(a)(b)Figure 4.6:Saved records (a) and detailed items(b)4.3.7 Other ViewsThe app contain other views such as:•"Settings"gives the possibility to add and manage newdomain,to enable a debug mode,clear cache,and deﬁne some options...•"About".Just displays some information concerning the app.4.4 Tablet UIInspire is a high-energy physics literature database at CERNbased on Invenio.The followingstatistics of the inspire mobile user community highlight the importance of the iPad.31Chapter 4.DesignAnd ImplementationTable 4.1:Mobile user community in one month- INSPIRE,April 2013OS VisitorsiPad 6866Android 4560iPhone 4294iPod 145BlackBerry 121Windows Phone 47Bada 44Symbian 40Other 41For this reason,I decide to implement an iPad version of Invenio Mobile.The tablet UI israther different.The screen is large enough to showall information.Consequently,the swipemenu is not requisite.The screen is divided into two parts.The design and colors are copied of what it can be found on the ﬁrst betas of iOS7.Theoverall looks is inspired by the iOS7 app"Mail".The tabs are the same of what we can see inthe app"Calendar".The functionality are the same as the smartphone versions.Figure 4.7:iPad home view324.5.Web App stuctureFigure 4.8:iPad record view4.5 Web App stucture4.5.1 Files OrganizationThe app is a web app wrapped in a Cordova native app.The main part of the app consists ofweb ﬁles.The ﬁle organization which composes the app is made in the following way:• index.html is the ﬁrst ﬁle loaded.It’s just a redirection to the correct index for the gooddevice.• index.iphone.html,index.android.html and index.ipad.html are three different cat-egories of devices.These ﬁles with the linked CSS are the only differences betweenthe different versions of the app.These ﬁles contain the UI of the speciﬁc devices tocorrespond to the user habits.• pages is the folder who are the HTML content of the several views.All views have a ﬁle inthe folder such as:home.html,ofﬂineFile.html,record.html,search.html,settings.html,and so.• img is the folder who are the images of button,icon,...• The css folder contains– Invenio-mobile.css who are the main CSS.It’s the common CSS with all mobiledevice and contain the main CSS parameters.– Invenio-mobile.iphone.css,Invenio-mobile.android.css andInvenio-mobile.ipad.csswhich are the css linked with the speciﬁc index ﬁles.33Chapter 4.DesignAnd Implementation– A font folder with different the Open Sans fonts with different font weight.– jquery.mobile-1.3.0.min.css,the css for jQuery Mobile.– photoswipe.css for the photoswipe JavaScript tool.• js is the folder with the functionalities for speciﬁc for Invenio Mobile:– Invenio-mobile.js is the main JavaScript ﬁle for the proper functioning of InvenioMobile.It contains a set of functions usable in the pages such as functions toload new pages,to read and write ﬁles ofﬂine,to parse and clean the pages,tocommunicate with servers,...– Invenio-mobile.conﬁg.js contains global variable with some initial parameters.– Invenio-mobile.debug.js is set of tools to help the developer and display informa-tion for optimization– Invenio-mobile.domain.json is a JSONﬁle with the list of domains accessible bydefault– Invenio-mobile.initialization.js takes care of the ﬁrst initialization of the app.Itloads the initial parameters,enables click and touch event listeners,loads auto-complete,...– Invenio-mobile.settings.js provides tools to manage the personal settings of theusers.• js_external is the folder withthe external JavaScript tools and libraries use inthe project:– Android and iOS Cordova 2.9 JavaScript code– jQuery 1.9.1 and jQuery Mobile 1.3.0– photoswipe 3.0.5 for jQuery for images galleries and its dependencies.– ﬁleopener is a free and open source Cordova plugin for Android to open pdf,photos and video in native apps4.5.2 ExecutionThe execution of the mobile application can be summarized in the following way.There arefour different steps:1.The"pageready"event starts the initialization• The Cordova native code run index.html• index.html loads Invenio-mobilie.conﬁg.js and redirects the initialisation to thecorrect index ﬁle like index.android.html or index.iphone.html.• When the speciﬁc index ﬁle is loaded and Cordova become ready to work,Cordovatriggers a"pageready"event.344.6.Off-line RecordsInvenio Mobile executionGlobal init."Pageinit" eventinvenio-mobile.jsLocal init.FirstinitializationRunglobalinitStartglobalinit()Copy theresquest in theSearch barLoadautocompleteLoad domainlist and displaymenuLoad settingsChange hashwithhome.htmlStart onhashchangeRead hashparametersLoad the pagein hash andclean the pageLoad icons,search bar andevent listenerHide theprevious pageClick on a linkStartlocalinit()Run the newpage localinitfunctionRun specificcodeShow the newpageFinishFigure 4.9:Invenio Mobile execution2.There is a global initialization common with all pages.At the end,the url hash ischanged with the parameter of the home page.3.Invenio-mobile.js loads the HTML page in parameters.4.To ﬁnish the app executes the local initialization speciﬁc for this HTML page.4.6 Off-line RecordsIf a user downloads records,its data are saved in the smartphone in a"Invenio"folder.Foreach record saved on the phone,the app does a folder named with the references of the recordand save all information in this folder.• Files such as video,photos,pdf,...are directly copied in the folder.• Pages such as information,references,citations are saved in HTML ﬁles and are readyto be show.• In addition,a JSONﬁle is create with the title and domain information.For example,if a user wants to save the record 113 from Invenio-demo.cern.ch with theinformation and the references pages and one video,it will obtain the following result in thethe folder/Invenio/demo-next113/:• CERN-MOVIE-2010-subformat-big.jpg35Chapter 4.DesignAnd Implementation• record_page_Information.html• record_page_References.html• record_info.json:1 2                                                      3                     4 4.7 Conﬁgurations FilesThere are two conﬁguration ﬁles.The ﬁrst one is a read-only ﬁle with the initial conﬁgurationand the second is editable and contains the personal settings of the user.Conﬁguration ﬁles are written directly in JSON.I made the choice of JSON because it islight and well supported by JavaScript without plugins or external libraries.Here is anexample witha part of Invenio-mobile.domain.jsonthat contains the list of domainsaccessible by default:1 2          3 4                 5                                     6                                7                     8              9          10                    11                     12                                                              13               14       15 16                    17                   18  19 20                   21                  22  23 24                  25                 26 27 28 29  30     31 32 364