Showing posts with label Mobile. Show all posts
Showing posts with label Mobile. Show all posts

Tuesday, July 29, 2014

what is best mobile web app framework


Requirements:
1. The mobile web app framework shall be compatible with AngularJS.
2. The framework shall support good UI rendering in Laptop, Mobile Web, Native Mobile
3. MVC, MVP, or MVVM


One Previous Client:
AngularUI/Bootstrap + Jquery + AngularJS

One Other Client:
IIDS + Twitter Bootstrap AngularJS

References:
http://stackoverflow.com/questions/2056/what-are-mvp-and-mvc-and-what-is-the-difference
http://www.slideshare.net/simbo1905/design-patterns-in-zk-java-mvvm-as-modelviewbinder
http://moduscreate.com/5-best-mobile-web-app-frameworks-sencha-touch/

AngularJS with Twitter Bootstrap:
http://stackoverflow.com/questions/22421707/best-way-to-combine-angularjs-and-twitter-bootstrap
http://willvincent.com/blog/angularjs-and-twitter-bootstrap-playing-nicely










Monday, July 28, 2014

How to design wireframes for APP


Learnt:
1. Designing wireframes is a very important skill for startup.
2. UX Design is to essentially resolve the business problems for business users.
3.

Diagrams:
Flowchart, Wireframes, Mockups

Goal of Wireframes:
1. Design the solution to solve user's problems
2. Design good user experience, so users will like your design and use them.

Tool:
Omnigraffle, Omnigraffle Stencile, Konigi Wireframe Stencils

Omnigraffle Stenciles:
Konigi Wireframe Stencils
iOS 7 IPhone Stencils by Sourcebits

Links:
http://zurb.com/playground/iphone-stencils


Knowledge Sharing:
1. One way to capture the output of this design process is with flow charts and wireframes. A high level flow chart for a web app (or any software application for that matter) explains the functionality of the application and how you get to each part of the application at a glance.
2. A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on “what a screen does, not what it looks like.” Wireframes can be pencil drawings or sketches on a whiteboard, or produced by means of a broad array of free or commercial software applications.
3. Website wireframes are 90% thinking/planning and just 10% drawing
4.


Good UX APP:
Twitter
Duo Mi



References:
http://startupworks.co/blog/2014/03/07/top-5-online-wireframing-tools-for-startups/
http://startupmusings.wordpress.com/tag/wireframe/





Saturday, July 12, 2014

How to develop first PhoneGap app on IPhone and IPad

Please reference
How to develop first Phonegap App on Android

Goals:
1. Set up PhoneGap/IOS Development Environment
2. Set up XCode
3. Develop a HelloWorld APP
4. Deploy it to IOS Emulator
5. Deploy it to IPhone and IPad
5. Work with SVN via XCode

Tools:
XCode
IOS Developer Portal
99/year

Tech Stack:

How to use XCode to work with SVN:
1. Start XCode
2. Use Source Control to checkout the IOS PhoneGap Project
3. Import IOS PhoneGap Project as XCode Project
4. Make changes to the files, and synchronize with SVN.

Principles:
1. Use Cordova/PhoneGap to create PhoneGap project
2. Use Cordova/PhoneGap command line to build PhoneGap project to Native Android project and Native IOS Project
3. Import the native project to STS with ADT and XCode
4. Use STS and XCode to develop APP and sychronize with SVN.

Deploy to IOS Device:
https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/AppStoreDistributionTutorial/Introduction/Introduction.html#//apple_ref/doc/uid/TP40013839

Stages:
1. Test the application on IOS Simulator
2. Deploy the application on Device
3. Submit the application to App Store

Issues:
Issue 1: The version of iOS on “your iPhone” is not supported by this installation of the iOS SDK. Please restore the device to a version of the OS listed below, or update to the latest version of the iOS SDK; which is available here.
Solution: Upgrade Xcode to 5.1.1

References:
http://docs.phonegap.com/en/edge/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide