Evaluation and prototyping of an HTML5 Client for iOS devices
•Als ODP, PDF herunterladen•
1 gefällt mir•451 views
thesis presentation 2012
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (17)
Andere mochten auch
Andere mochten auch (10)
Ähnlich wie Evaluation and prototyping of an HTML5 Client for iOS devices
Ähnlich wie Evaluation and prototyping of an HTML5 Client for iOS devices (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Evaluation and prototyping of an HTML5 Client for iOS devices
- 1. Thesis Presentation: Evaluation and prototyping of an HTML5 Client for iOS devices Amit Purkait
- 5. Native Java Objective C C# .NET Java ME Lua Visual Editor Ruby Java EE C/C++
- 6. Native
- 7. Native !
- 8. Native What if? Other platforms Defragmentation
- 9. web http://www.publicdomainpictures.net/pictures/10000/velka/spider-web-pattern-1128739369633HK.jpg
- 10. Web why web? Runs on browser Universal HTML5 + CSS3 + JavaScript Rapid development Rapid deployment
- 11. Web Programming Languages
- 12. Web HTML5 CSS3 JavaScript
- 13. 1989 HTML 1997 HTML4 2011 HTML5
- 15. Web 3D acceleration Animations Translation Word wrap Rounded borders Web fonts Multiple Backgrounds CSS3 Transformation Gradient Background Transperancy Overflow-y Border Image Overflow-x
- 17. Frameworks Jquery UI The-M-Project Jquery Mobile jQ Touch iUI Sencha Touch iWebKit zepto.js Jo-Mobile
- 19. Frameworks Comparison Chart Comparision tables 1 http://www.markus-falk.com/mobile-frameworks-comparison-chart/
- 20. Frameworks Filters: ● Platform : iOS, Android, Windows Phone, Blackberry OS, Symbian ● Languages : HTML CSS Javascript ● Target : Mobile website, web app ● UI Widgets : yes
- 21. Frameworks
- 22. mQuest HTML5 Client for iOS devices
- 23. Analysis GWT (Java) Web (HTML5, CSS3, JavaScript + Frameworks)
- 24. Analysis GWT Callbacks JSNI Calls Javascript interacts UI Web Techonologies
- 26. Analysis
- 27. THESIS OBJECTIVES - Define a better User Interface - iOS look and feel - Implement the required functions
- 28. UI Change
- 29. Themeing mQuest jQuery Mobile Package CSS JS
- 30. iOS Styling with CSS3 .ui-header { ... } li.ui-buttons { ... } ui-text { ... } ui-footer{ ... }
- 31. iOS Styling with CSS3
- 32. Results
- 33. Functions Better UI Architecture
- 34. Functions Expression parser
- 35. Functions Date/time Questions
- 36. Functions Matrix Question
- 37. Functions Rank Question
- 38. Functions GPS with HTML5
- 39. Deploying mQuest With PhoneGap
- 40. Deploy why PhoneGap?
- 41. Deploy PhoneGap's features Source: http://phonegap.com/about/feature
- 42. Deploy Process
- 43. Results
- 44. Final thoughts mQuest HTML5 Client
- 45. Questions?
Hinweis der Redaktion
- Introduce Welcome Theme
- Let me start with a brief overview of mobile application development process. It is differentiated maily in two categories, native and web. We all know about native applicaiton. The apps that we use in our mobile phones. Clocks, phone, sms, camera app etc. Then there are web applications. Online always availabe. Lets start with native development process.
- Developing in native is easy. Let me explain. And Id explain later why i have the ! Mark behind it.
- We need to choose out of many platform the one we are going to develop. Choosing it can be tricky since there are many of them these days.
- Well that was the easy part. The second task is to choose the language to be written with. We choose the correct language we have to develop in. And most of the time it is already given by the software development kit provided by the mobile OS.
- We develop the software and we deploy it in corresponding markets.
- And wait for user to buy the software or click on the ads to generate income. That was easy. But what if we need to develop for other platforms.
- The question is what if we need to develop same software for other platform. Yes the same process repeats again. Choose platform Choose language Develop Deploy Then there is also a defragmentation problem in all major platforms. The developers have to change their code in order to fit with the device and hope it wont crash. Weren't it better if i could just write once and deploy in every device without the fear that it wont work in some.
- This is where web application development comes in. With web the problem with the platform differences and defragmentation is solved(?).
- So what does web do better than native application? Web applications run on browser. It universal because every mobile devices today have a mobile browser. It runs with known technologies like HTML5, css3 and JavaScript, which are easy to learn and understand. Moreover the development process for web applications are reduced when developing for cross platforms. It runs with the „motto code once use everywhere“
- So this means no more choosing the right platforms, no more learning various programming launguages and no more deploying it to the markets and waiting for it to be accepted. Web apps can be deployed in the Internet and is instantly available. Moreover there are tools with which web applicaitons can be packed like native applications which makes them easier to deploy in the markets.
- These three techonologies are the best technologies for the web. HTML5, CSS3 and JavaScript create the best team for web application development.
- HTML5 is the fifth revision of the original HTML for WWW in 1989. With HTML5, there are many features added to the last revision. Features like
- Features like Drag and Drop, Canvas 2D, Canvas 3D, audio-video integration, websql, webstorage, media capture, file api, web fonts, calendar api are included in the new HTML5 revision. Some of them are still in drafts and are in the the process of being implemented. HTML5 can do native functions like 3D acceleration, geolocation, webgl, contacts api, file api, touch events, canvas, which were not present in the last revision. With these functions being implemented in HTML web is now a powerful platform to develop native like applications.
- CSS3 brings in lots of new styling features too. Features like .......... gives the look and feel of the web applications a meaning. Now web application can have the look and feel of a native application with CSS3 and the difference is unnoticable. Various functions like animations and transformations, gradient backgrounds also make css preferable than using image in the application.
- And finally there is javascript and the javascript mobile frameworks which make life easier for mobile web developers. These frameworks brings in ready made tools to make mobile application look more like native applications.
- These are some of many javascript frameworks that exist today for mobile web development. So how do i choose from all these frameworks. Which one is good. Which is better? What suits to my project? There are actually so many frameworks that it would take a day or more to do the research. Luckily, there is help.
- Yes there is help. But not from this guy.
- This is it. A complete comparision of all the javascript frameworks that exists today. This chart is a part of a master project from markus falk. Previously this chart was static and was updated locally. Now it is updated from the developers themselves when new features are implemented or in progress. The frameworks are evaulated under the categories like Platform, language, Target, hardware, User Interface, SDK, Encryption, License. Yes i know what you are thinking, it hurts. Well luckily again he has a filter option where frameworks can be searched and filtered according to some categories.
- With the search which is relevant to this thesis, i can into following conclusion. The client need most of the platform support, it need to support web languages. It should be used to make mobile website and web app. Hybrid is not a concern yet. And it should have a cooperate design and support a set of native like widgets. It came up to these results.
- jQuery Mobile and Application Craft. Unfortunately Application craft is a could based application development process. And is charged monthly.
- mQuest a software developed by cluetec GmbH to interview... Let us analyse the client
- The logic part of the Client is handled by GWT Java. The UI is manipulated by javascript and HTML5 and CSS3. Jquery Mobile and other framework are used to provide the application most of the native look and feel.
- This is how it works. Java in GWT can call native javascript methods using the JSNI interface. Calls are sent to javascript which then builds up the UI. Upon an event in the UI, the javascript part get the response from the UI and sends it back to java in GWT. Which is also know as JSNI callbacks. Java part then evaluates the response and reacts accordingly. The Javascript and UI are the web technologies used and seen by the user.
- At the start of this thesis, there existed a mQuest HTML5 Client. This thesis implementation is based on previous implemenation. Lets analyse the previous mquest client and what it has to be worked on.
- Followin the start screen of the previous client. The widgets seen are a part of jQuery mobile widgets. The questions are contained in a drop down box. When a question is chosen it can be started with the button click. Async can be made with the mquest server whenever required. The collasped menu items seen belown of the screen provide additional settings, like deleting questionnaires, results, data or setting up the host address.
- What are the objectives of this thesis. - define... - ios … - implementation of..... To start with a better design, interface, lets start with what is wrong with the previous one.
- The start screen to the left is more web app than mobile web app. Why is that? Drop down boxes are mostly seen in websites, buttons like submit and cancel are seen in websites, collapsable items are amazing but not for mobile web apps. This had to be changed. And the changes were made. Drop down box is now a list with big clickable items which starts the questions selected. The list allows to see the information related to the questions at once. There is a new footer which supports the sync and menu button . The new interface is clean and easily accessible. It is more touch friendly and has a mobile look and feel. Lets get to the second objective to style it.
- jQuery mobile brings in its own style for its widgets. This can be seen in the jQuery Mobile package which includes the JS file along with a CSS. Without the CSS jQuery mobile is plain HTML. So how is the styling done,
- Each widget gets it own class in the CSS file. When a page is loaded with the widgets, CSS runs through the page and defines the styling of the corresponding class names. The re are many styling option from setting backgrounds, to margins, height, width, font set, padding, and transformation, translation along with animating objects.
- So when a page loads the jQuery stylesheet (CSS) themes the pages. This can be overridden if we need to create a custom stylesheet. In this example the iOS stylesheet is loaded after the jQuery mobile CSS and overrides the old styles. Similary another CSS overrides the iOS styling which give a persistent look and feel of mQuest Client over all devices and platforms.
- And after the CSS are applied with the Cleint following was the result of iOS sytling. This look pretty much similar to native iOS applications. Lets see the implemented features and function in the client.
- The final client can scale to any device sizes. A client has been loaded in the devices for a try out of the functions implemented the mQuest client provides.
- The client has still many rooms where optimisations can be done. Optimisation like reducing the jQuery selectors, using less frameworks, optimising the CSS files, less styles overriding, optimising the performance can still be made. There were also problems during the implementation of the Client. Those were integration the expression parsing, optimising the client from flickerings, and transistions, optimising the look and feel. Some of these were solved but some still need work. Not all the required functions were realised during this thesis. Many functions will be implemented in the future and this thesis provides a solid base for those implementations. All in all mQuest is a fully HTML5 Client which integrates lots of advanced features provided by today web technologies and has an advance set of questioning tools for face to face interview. Thank you.