Difference between revisions of "IS480 Team wiki: 2012T2 Viaxeiros Application Development"
() |
|||
Line 255: | Line 255: | ||
|} | |} | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |- | ||
+ | | colspan="2" class="radius_bottom" style="background:#ffffff; border-top:8px solid #7cc1c7; border-bottom:0px; border-left:1px; border-right:1px"| | ||
+ | |} | ||
+ | |||
+ | |||
+ | |||
+ | <!------------------------------------Storyboard---------------------------------------> | ||
+ | |||
+ | <div id="StoryBoard" style="padding:0px; text-align: right; margin-bottom:0px;" align="center"></div> | ||
+ | {| cellpadding="1" cellspacing="1" style="width: 100%; background-color: #ffffff; vertical-align: top; " | ||
+ | | colspan="2" style="padding: 0;" | | ||
+ | |- | ||
+ | | style="width: 100%; vertical-align: top;" align="center" | | ||
+ | {| border="0" cellspacing="0" cellpadding="0" width="100%" | ||
+ | | style="background-color:#ffffff;" width="0" | | ||
+ | {| style="width="30%"; font-size:95%; text-align: justify;" padding:-2px; background:FFFFFF" cellpadding="0" cellspacing="0" | ||
+ | | rowspan="1" width="30%" colspan="2" height="37px" valign="top" style="background:#e4fcfe; border:8px solid #7cc1c7; border-bottom:0; padding:0; padding-right:1em; margin:0; -moz-border-radius-topright:1em" | <div style="margin-top: -20px; padding-left:3px"></div> | ||
+ | |||
+ | <div style="padding-left:10px; margin-top:36px; font-size:180%; font-family: Elephant;" >'''Storyboard'''</div> | ||
+ | |} | ||
+ | | style="border-bottom:8px solid #7cc1c7; background:#ffffff;" width="8" | | ||
+ | | style="border-bottom:8px solid #7cc1c7; background:#ffffff;" width="100%"| | ||
+ | |} | ||
+ | {| style="width:100%; margin-bottom:.5em; font-size:95%; text-align: justify;" padding:-2px; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" | ||
+ | | rowspan="1" width="100%" colspan="2" valign="top" style="background:#e4fcfe; border:8px solid #7cc1c7; border-bottom:0; border-top:0; padding:0; margin:0" | | ||
+ | |||
+ | {| cellspacing="0px" align="center" cellpadding="0" style="width:70%; background:#e4fcfe;vertical-align:top;" | ||
+ | | style="width:100%; vertical-align:top; border:1px solid #e4fcfe; background:#e4fcfe;"| | ||
+ | |} | ||
+ | |||
+ | <div style="padding: 1em 1em 1em 1em; " align="center"> | ||
+ | {| style="width:100%; border: 1px solid darkgray;" | ||
+ | |- | ||
+ | | | ||
+ | <br/> | ||
+ | You can find our Storyboard here: [[Media:ViaxeirosStoryboard_v1.pdf|Version 1]] | ||
+ | |||
+ | |} | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |- | ||
+ | | colspan="2" class="radius_bottom" style="background:#ffffff; border-top:8px solid #7cc1c7; border-bottom:0px; border-left:1px; border-right:1px"| | ||
+ | |} | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | ===<!------------------------------------Technical Complexity--------------------------------------->=== | ||
+ | |||
+ | <div id="TechnologyComplexity" style="padding:0px; text-align: right; margin-bottom:0px;" align="center"></div> | ||
+ | {| cellpadding="1" cellspacing="1" style="width: 100%; background-color: #ffffff; vertical-align: top; " | ||
+ | | colspan="2" style="padding: 0;" | | ||
+ | |- | ||
+ | | style="width: 100%; vertical-align: top;" align="center" | | ||
+ | {| border="0" cellspacing="0" cellpadding="0" width="100%" | ||
+ | | style="background-color:#ffffff;" width="0" | | ||
+ | {| style="width="30%"; font-size:95%; text-align: justify;" padding:-2px; background:FFFFFF" cellpadding="0" cellspacing="0" | ||
+ | | rowspan="1" width="30%" colspan="2" height="37px" valign="top" style="background:#e4fcfe; border:8px solid #7cc1c7; border-bottom:0; padding:0; padding-right:1em; margin:0; -moz-border-radius-topright:1em" | <div style="margin-top: -20px; padding-left:3px"></div> | ||
+ | |||
+ | <div style="padding-left:10px; margin-top:36px; font-size:180%; font-family: Elephant;" >'''Technical Complexity'''</div> | ||
+ | |} | ||
+ | | style="border-bottom:8px solid #7cc1c7; background:#ffffff;" width="8" | | ||
+ | | style="border-bottom:8px solid #7cc1c7; background:#ffffff;" width="100%"| | ||
+ | |} | ||
+ | {| style="width:100%; margin-bottom:.5em; font-size:95%; text-align: justify;" padding:-2px; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" | ||
+ | | rowspan="1" width="100%" colspan="2" valign="top" style="background:#e4fcfe; border:8px solid #7cc1c7; border-bottom:0; border-top:0; padding:0; margin:0" | | ||
+ | |||
+ | {| cellspacing="0px" align="center" cellpadding="0" style="width:70%; background:#e4fcfe;vertical-align:top;" | ||
+ | | style="width:100%; vertical-align:top; border:1px solid #e4fcfe; background:#e4fcfe;"| | ||
+ | |} | ||
+ | |||
+ | <div style="padding: 1em 1em 1em 1em; " align="center"> | ||
+ | {| style="width:100%; border: 1px solid darkgray;" | ||
+ | |- | ||
+ | | | ||
+ | <br/> | ||
+ | <b>1. ActionBarSherlock</b> | ||
+ | <br/><br/> | ||
+ | An Action Bar is a bar at the top of the screen which is used across the application to identify the application brand and to support navigation. As Action Bar is not available for pre-honeycomb Android devices, we decided to make use of the ActionBarSherlock library, an open-sourced library designed to facilitate the implementation of Action Bar natively across all versions of Android devices using a single API. This library also provides additional features such as Fragments which is currently not present in the standard ActionBar mode. | ||
+ | <br/><br/> | ||
+ | <b>2. Fragments</b> | ||
+ | <br/><br/> | ||
+ | To integrate with the Sherlock Action Bar used as a header bar, fragments are used to allow multiple interfaces within a single activity. This allows a better manipulation of functions when users navigate through the application. For example, the navigation between a web view and a native view with differing interface will only require two different fragments, instead of creating a new activity. In addition, due to the flexibility of fragments, each of them can be recycled and used in other activities within the application, reducing the need for repeated codes. | ||
+ | <br/><br/> | ||
+ | <b>3. Image Loading</b> | ||
+ | <br/><br/> | ||
+ | To speed up the display of pages and improve user experience, we have made use of “lazy loading” to enable the display of native pages (template) first while images are downloaded and displayed on the pages as and when they are ready. We have been able to do so with the use of the “Asynchronous” feature available in Android development. | ||
+ | <br/><br/> | ||
+ | <b>4. URL Tracking</b> | ||
+ | <br/><br/> | ||
+ | The android application that we are building for Qiito is a mixture of Qiito’s current mobile web and pure native pages. Some of the native pages include travelogue listing, travelogues and places. To enable switching between mobile web and native pages, there is a need to monitor the changes in URL. Should a following URL point to a webpage that requires native display, example travelogue listing, travelogues or places, there will be a need to call the native codes for display. Else, the mobile web should be called instead. | ||
+ | <br/><br/> | ||
+ | <b>5. Different phone models with different OS versions</b> | ||
+ | <br/><br/> | ||
+ | Since the Android software is offered on many different phone models, our team needs to cater for different image sizes to these phones. This is because phones tend to vary in size, features and user experience. Thus, this further complicates the native design process as additional time is required in resizing images and there is difficulty in ensuring consistency of the application for the rest of the other models. Additional testing is required as different sizes of phone models are tested to ensure that the images are displayed correctly.<br/> | ||
+ | Furthermore, older Android OS, which may not be able to support the newer OS, will not have the luxury to enjoy certain functionalities. Thus, extra time is needed to search for the best implementations without reducing usability of the application. | ||
+ | <br/><br/> | ||
+ | <b>6. Offline Map Display </b> | ||
+ | <br/><br/> | ||
+ | Whilst overseas, users may have difficulty obtaining data connectivity to have access to the full functionalities of Google Maps. With the implementation of OSMDroid (Open Street Maps for Android), the application will download a specific map area pertaining to the user’s itinerary. The maptiles (of .png file format) will then be zipped up so that it can be used to render the map, thus allowing users to view the touring area on the offline map with zooming features. This specificity is done through a customized algorithm to determine the right boundaries and zoom levels for the map for both the travelogue and place offline map. | ||
+ | <br/>Being an open-sourced package increases the difficulty of implementation, due to lack of proper documentation to explore customized functions. There are also certain restriction of its usage due to it being free, thus algorithms for download are required to be stricter. | ||
+ | <br/><br/> | ||
+ | <b>7. QBeam – Augmented Reality View (Pending)</b> | ||
+ | <br/><br/> | ||
+ | Even as locals, users may be surprised to discover unknown places of interest around their town. This is where QBeam comes in to help with the discovery, by displaying places of interests surrounding the user’s current location. This will be viewed through the lens of the phone camera, complete with the direction and distance away from the user. | ||
+ | The team will be looking into exploring the Vuforia and Wikitude SDKs for Android in later iterations to deploy the Augmented Reality View function. | ||
+ | |||
+ | |||
+ | |||
+ | |} | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |- | ||
+ | | colspan="2" class="radius_bottom" style="background:#ffffff; border-top:8px solid #7cc1c7; border-bottom:0px; border-left:1px; border-right:1px"| | ||
+ | |} | ||
+ | |||
+ | |||
+ | |||
+ | ===<!------------------------------------Resources--------------------------------------->=== | ||
+ | |||
+ | <div id="Resources" style="padding:0px; text-align: right; margin-bottom:0px;" align="center"></div> | ||
+ | {| cellpadding="1" cellspacing="1" style="width: 100%; background-color: #ffffff; vertical-align: top; " | ||
+ | | colspan="2" style="padding: 0;" | | ||
+ | |- | ||
+ | | style="width: 100%; vertical-align: top;" align="center" | | ||
+ | {| border="0" cellspacing="0" cellpadding="0" width="100%" | ||
+ | | style="background-color:#ffffff;" width="0" | | ||
+ | {| style="width="30%"; font-size:95%; text-align: justify;" padding:-2px; background:FFFFFF" cellpadding="0" cellspacing="0" | ||
+ | | rowspan="1" width="30%" colspan="2" height="37px" valign="top" style="background:#e4fcfe; border:8px solid #7cc1c7; border-bottom:0; padding:0; padding-right:1em; margin:0; -moz-border-radius-topright:1em" | <div style="margin-top: -20px; padding-left:3px"></div> | ||
+ | |||
+ | <div style="padding-left:10px; margin-top:36px; font-size:180%; font-family: Elephant;" >'''Resources'''</div> | ||
+ | |} | ||
+ | | style="border-bottom:8px solid #7cc1c7; background:#ffffff;" width="8" | | ||
+ | | style="border-bottom:8px solid #7cc1c7; background:#ffffff;" width="100%"| | ||
+ | |} | ||
+ | {| style="width:100%; margin-bottom:.5em; font-size:95%; text-align: justify;" padding:-2px; background:#FFFFFF" cellpadding="0" cellspacing="0" align="center" | ||
+ | | rowspan="1" width="100%" colspan="2" valign="top" style="background:#e4fcfe; border:8px solid #7cc1c7; border-bottom:0; border-top:0; padding:0; margin:0" | | ||
+ | |||
+ | {| cellspacing="0px" align="center" cellpadding="0" style="width:70%; background:#e4fcfe;vertical-align:top;" | ||
+ | | style="width:100%; vertical-align:top; border:1px solid #e4fcfe; background:#e4fcfe;"| | ||
+ | |} | ||
+ | |||
+ | <div style="padding: 1em 1em 1em 1em; " align="center"> | ||
+ | {| style="width:100%; border: 1px solid darkgray;" | ||
+ | |- | ||
+ | | | ||
+ | <br/> | ||
+ | Below are the tools are resources our team is currently employing during this project:<br><br> | ||
+ | <center> | ||
+ | {| border="1" | ||
+ | | [[http://www.eclipse.org/downloads/ Eclipse IDE For Mobile Developers]] | ||
+ | | Our trusty IDE that provides our coding environment! | ||
+ | |- | ||
+ | | [[http://subclipse.tigris.org/ Subclipse]] | ||
+ | | Subclipse is an Eclipse Team Provider plug-in providing support for Subversion within the Eclipse IDE. | ||
+ | |- | ||
+ | | [[http://developer.android.com/sdk/index.html Android SDK Package]] | ||
+ | | Providing the API libraries and developer tools necessary to build, test, and debug apps for our application. | ||
+ | |- | ||
+ | | [[http://actionbarsherlock.com/download.html ActionBarSherlock]] | ||
+ | | This library supports the use of ActionBar across all versions of Android using a single API. | ||
+ | |- | ||
+ | | [[https://github.com/JakeWharton/ActionBarSherlock/blob/master/samples/fragments/src/com/actionbarsherlock/sample/fragments/FragmentCustomAnimationSupport.java Fragments]] | ||
+ | | Library that provides multiple interfaces within an Activity. | ||
+ | |- | ||
+ | | [[http://code.google.com/p/osmdroid/ OSMDroid]] | ||
+ | | Map library we are exploring and deploying for our offline map viewing functionality. | ||
+ | |} | ||
+ | </center> | ||
+ | |||
+ | |} | ||
</div> | </div> |
Revision as of 15:04, 27 February 2013
Contents
Welcome to Viaxeiros FYP Wiki Page
|