design and development of a mobile mashup application for geo-localized news visualization
TRANSCRIPT
![Page 1: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/1.jpg)
Design and developmentof a mobile mashup application
for geo-localized news visualization
by Kristina Stefanova
Sofia UniversityFaculty of Mathematics and InformaticsInformation technologies department
University of L’AquilaDepartment of Information
Engineering, Computer Science and Mathematics
![Page 2: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/2.jpg)
What are we going to talk about?
• What problem are we solving?
• What is our solution?
• Technology background
• The application itself
![Page 3: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/3.jpg)
The News
• Plays important role
• Newspapers, radio, TV, WWW
![Page 4: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/4.jpg)
The Problem
• Too much news
![Page 5: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/5.jpg)
The Problem (2)
• Information overload (infobesity)
![Page 6: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/6.jpg)
The Problem (3)
![Page 7: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/7.jpg)
The effects from infobesity
• Nerves
• Anxiety
• Headache
• Depression
![Page 8: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/8.jpg)
The Goal
• To build a mobile application that shows the news for the user’s occupation or other place of his choosing
• The provided news to be divided in categories
• To be possible to search news for specific things
![Page 9: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/9.jpg)
Who is going to use it?
• Group A – ‘Travellers’
• Group B – ‘Local people’
• Group C – ‘Default’
![Page 10: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/10.jpg)
Tasks originating from the goal
• To find suitable web services
• To integrate them
• To build fast, stable and good looking application
• To minimize the user’s input and to maximize the application’s output
• To deploy on mobile platform
![Page 11: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/11.jpg)
What is a mashup?
• Web application, that uses and combines data from two or more sources to create new services
• Characteristics
o combination
o visualization
o aggregation
![Page 12: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/12.jpg)
Web spiders
![Page 13: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/13.jpg)
Open Calais
• Uses Natural Language
Processing
• Is part of Linked Open Data Cloud
• Extracts data in RDF format
RDF documents
News articles
![Page 14: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/14.jpg)
Semantic wire
SW database
SW API Servers
API
![Page 15: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/15.jpg)
The solution
• Newsy Map
• Build in
![Page 16: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/16.jpg)
Ideology of the application
![Page 17: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/17.jpg)
Asynchronicity
• Difference between synchronous & asynchronous code
• Benefits and disadvantages
• Require.js
![Page 18: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/18.jpg)
Development process
• Modules logical connection
• Overall ~ 2000 lines of code
![Page 19: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/19.jpg)
Libraries, frameworks, tools
• Libraries
o Require.js
o Handlebars.js
o MarkerWithLabel.js
• Frameworks
o jQuery
o jQueryUI
• Chrome developer tools
![Page 20: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/20.jpg)
Request - response flow
• b
![Page 21: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/21.jpg)
Unit testing
• Simulating server responses
oSinon.js
oQunit
• Refactoring
![Page 22: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/22.jpg)
Optimization
• Initial statistics – 11s, 13MB
• Minimizing module globals
• Removing redundant functionality
• Removing memory leaks
• CPU Utilization by jQuery optimization
• Minimizing resources
• Result – 7s, 8MB
![Page 23: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/23.jpg)
Going mobile
• Phone Gap
![Page 24: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/24.jpg)
Testing device
• Device: Samsung Galaxy Nexus
• CPU: Dual-core 1.2 GHz Cortex-A9
• RAM: 1GB
• Display size: 4.65 inches (~316 ppi pixel density)
• OS: Android 4.2.1 Jelly bean
![Page 25: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/25.jpg)
Screenshots
![Page 26: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/26.jpg)
Screenshots (2)
![Page 27: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/27.jpg)
Screenshots (3)
![Page 28: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/28.jpg)
Screenshots (4)
![Page 29: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/29.jpg)
Screenshots (5)
![Page 30: Design and development of a mobile mashup application for geo-localized news visualization](https://reader030.vdocuments.mx/reader030/viewer/2022032714/55ac511b1a28ab05128b46b7/html5/thumbnails/30.jpg)
Questions?