Creating iOS & Android app from a simple html5 + javascript game? - android

I've written some simple online games using purely HTML5 and JavaScript. Nothing fancy, no server side stuff involved, essentially each game is just a single .html (which includes javascript and css) and some .png and .jpg images.
Now, this kinda works on mobile devices as well (android/iphone/ipad) by just surfing to the particular page, but I guess a dedicated app would work better / be more convenient on these devices.
I have exactly zero experience developing for iOS or Android, so maybe this question is too complicated to fully answer right away, but:
Is it possible to create an app for Android, and similarly for iOS (iphone/ipad), based on my html page, other than basically rewriting the entire game for those particular platforms?
If yes, how do I go about this? What would be the easiest way? Is there a ton of Android / iOS knowledge required, or is there some kind of generic "conversion" that wraps my html page (+required images) into a mobile app?

I guess that phonegap would perfectly fit your needs.
Hope it helps

Appcelerator can do that. It builds native Android apps and iOS. The language is based on HTML5 and JS so I think it can help you.
http://www.appcelerator.com/

https://cordova.apache.org
Mobile apps with HTML, CSS & JS
Target multiple platforms with one code base
Free and open source

I recommend you to use construct 2. It has better development tools for HTML5. Here is a link to construct 2 website.

Related

Will my CSS render correctly across Android's WebView and IOS UIWebView?

I am working on a mobile application project which sometimes require me to display some HTML/CSS content within the app. The app is coded as native programs in IOS as well as Android. Now I know I can use Webview in android and UIWebView in IOS to display my web stuff, but my question is, will the HTML/CSS content be displayed exactly the same in both devices? Or will CSS differ in rendering as it often does in different web browsers? Are there any common pitfalls, or known inconsistencies? Any help will be hugely appreciated.
Generally speaking yes. Both browsers will display html/css correctly, but certainly there are little differences.
I recomend you K.I.S.S: Keep It Simple Stupid.
Simple Layout prevents missbehaviour.
But you can check this, is a non-exhaustive collection of cross-browser css coding
Good luck.

making simple app for both iphone/android(super basic)

Basically i need 2 apps that work on both Android/IOS with a simple sign in button and 5 push notifications that can be dowloaded for a little project.
The conclusion I reached was html? and some way to let the user download the files without needing hosting etc.
perhaps someone knows of a more efficient way to do this? or since its non profit get some skeleton code for each os and then just add buttons from x code and android api?
I am not really sure what you are asking but, you can use 'Phonegap' which is cross platform and can use web development languages such as html, JavaScript, and css.

Hard to choose between native or cross platform for mobile application

I would like to create an application that support in both Android and iPhone.
It will be a interactive system for people to chat,share photos, etc.
So, it will consist lo-gin system, and all information for users will stored in mysql.
The question is here, should I write two sets of code for Android and iPhone or use some cross platform tools such as Phonegap + jQueryMobile for development.
1)I am wondering if html + css + javascript can complete all the functions that I want to include in this application if I use Phonegap.For example, how to handle the data transfer when loading data from db, should I create many .html for different pages. And the performance of using Phonegap...
2)Also, how about the time of development. Suppose there is one developer for Android, and one for iPhone. If we develop separately, we cannot help each other. On the other hand, web may be easier and we can research on this together.
3)Then, for the UI, it is easier for native language. But it is much difficult for web to make the things like mobile application.
I have asked a lot of questions. But I really think about this kind of issue for a long time and this is the time for me to have the decision.
Can anyone help me and give me some idea? Really thx....
Consider these Factors & Make your own wise decision,
which coding technique are you familiar with (HTML, CSS, JS) or (Java, C#).
For your First Question about data transfer from db,(your question is not clear internal db or server side db) if internal db Here is My QuestionI couldn't find the solution with the given answers, Help me if you can solve the same.(if you are talking about server side db) both for native & Cross platform it has to be achieved by API's
Time of Development is less in PhoneGap, when consider for both platforms since you are coding for both platforms simultaneously.
UI is Easier in Native ONLY when you go with Default styles,
For example consider yourself adding a Customized Button in *.png format.
you are gonna add single button multiple times in multiple sizes. If you wanna achieve clicked or Hover Effect you are Gonna add 2 more Customized Buttons. Which makes totally 3 images for single click for single Screen & Single Orientation, to achieve Correct Quality, u have to add same image in different sizes in ldpi, mdpi, hdpi, x-hdpi, no-dpi which finally brings you 5x3=15 images for single Button.(imagine the size of your app). Finally you have to add few lines of Codes to achieve Clicked effect
The same can be achieved in CSS with few lines of Codes(hardly 5 KB). Many animations also can be achieved easily with js.
UI can be changed when ever you want with change in few lines of codes.UI - PhoneGap Wins your app runs in Browser, both Android & iOS use the same browser engine Webkit, but still significant differences even in Webkit
Here are few more issues in PhoneGap,
Performance Native wins. In PhoneGap your browser has to load js, CSS which gives you notable delay, which cannot be ignored. If you want awesome UI go with CrossPlatform. To achieve performance choose Native.
Finally time to take decision.
It depends on what your requirements are. Evaluate if all your requirements are possible with Phonegap. For a list of supported features see: http://phonegap.com/about/features
Note that you can only use the native phone functionality that phonegap provides.
The development time depends on various factors, such as complexity, size of project and developer skill. I think the main difference here is developer skill, as the complexity and size of project are the same.
This is a tradeoff you have to make. An example phonegap application can be found here:
http://coenraets.org/blog/2011/10/sample-application-with-jquery-mobile-and-phonegap/
1.If you build application using cordova with more page, you app will get slow and some time it will get more bugs of design. So it
is better if you use single html page with different dives for each
pages and use "display: none;" from your java script or JQuery to
show and hide you current pages.then your application will more
fast.
there a lot of plugins in cordova those are supporting for both iOS and android so you don't need a iOS developer or android
developer if you have proper html and css design like responsive web
site.
UI won't be problem if you build a responsive html pages using bootstrap

Efficiently converting a web UI to be better viewed on an iPhone or Android device?

I'm sure there are plenty of discussions about this floating around, but I'm curious what may be considered most useful by folks in the community here presently:
What is a solid approach, css framework or otherwise that would facilitate proper display of a web app on an iOS device (meaning, in particular, iPhone displays) or Android devices?
This is especially pointed at a web app that's already done UI wise and so I'm looking to tune the display a bit, although it already looks good, it could be a little more clear for smaller displays.
Have a look at jQuery mobile and also Sencha framework.
I have rather mixed feelings about jQuery mobile, but it does give you an almost-native-app look & feel out of the box.
Is there any need to use Jquery mobile or sencha.
Cant he display the web UI on iphone or android browsers using any User Agent.

Two questions about HTML5 web coding to Android device

1
Which one method is faster to open and use HTML5/jQuery Mobile page in android device?
Use Phonegap or just make normal activity with WebView? Page is in assets folder and App doesn't need to use any hardware component. It's just list of different web page links. And Every link should open second activity and open the link in WebView.
2
Someone says that Sencha Touch is faster than jQuery Mobile and someone else says that jQuery is as fast but much more stronger because there is more abilities to do. So which one is more recommended. Or is it only what you like is better? (Like it really doesn't matter which one you use)
jQuery is much more easier to start if you don't have experience about web coding. Am I right?
Which one method is faster to open and use HTML5/jQuery Mobile page in android device?
Use Phonegap or just make normal activity with WebView? Page is in assets folder and App doesn't need to use any hardware component. It's just list of different web page links. And Every link should open second activity and open the link in WebView.
Normal Activity with Webview will be faster then using phonegap because phonegap takes more time to get the document to be ready as compared to Native thing.
Someone says that Sencha Touch is faster than jQuery Mobile and someone else says that jQuery is as fast but much more stronger because there is more abilities to do. So which one is more recommended. Or is it only what you like is better? (Like it really doesn't matter which one you use)
jQuery is much more easier to start if you don't have experience about web coding. Am I right?
Yes you are right Jquery is much more easir then sencha touch. I use jquery mobile and its awesome. Although Sencha is little bit faster but i will recommend you to use Jquery mobile. :)
In general yes JQM is a lot easier to learn. I've spent about a week now looking through Sencha and if you don't know EXT.js it seems pretty complex. Even the demos are confusing and it seems to be way more programmer oriented in the way things are constructed versus design oriented.
I'm also looking at netbiscuits tactile - but I haven't spent enough time looking at that yet.

Categories

Resources