The Challenge
I would like to create a simple website for:
iPhone 3 and 4
iPad
Android 2.2
– BBerry OS 7 and Playbook Browser
Symbian
Desktop Webbrowser
The Problem
Whats the "best-practice" for detect, optimize and deliver the Webapp for each device/screensitze? I know this is about HTML5, CSS3 Mediaqueries and JS. HTML5 Boilerplate is a good point to start.
But:
Should I detect Browser/Devices via backend/front? What are good
libraries?
How Do I detect different screensizes? What are good libraries?
etc.
Use Phone Gap as your starting point.
Depending on your use case, there may be other libraries you may want to pile on top of it, but basically Phone Gap is what you should start with.
My suggestion would be to use Sencha Touch. Its a very mature mobile app frame work with a very active community. They support any mobile that uses the webkit based browser which is everything on your list(Im not sure about the symbian browser).
Sencha 2 which will be released by the end of october will have its own native packaging library, so the use of phonegap wont be required. But it work well with phone gap if preferred.
Mobl is new language for the mobile web. just a look on it.
Adobe's Edge is the most refined HTML5 creator that also supports Android, iOS and Playbook (IMHO forget about Symbian, that's Nokia's half dead platform). BB7 uses webkit like most other desktop and mobile browsers.
Note that coincidentally Phonegap (that I see in other answers here) is part of Adobe now.
You can give a try to Titanium's new web SDK too.
And then look at this SO question which is very similar to yours and has lots of useful links in it.
Related
I am developing a website which will have some math equations and hence, to render them I am planning to use jqMath. Now, before delving into coding I would like to plan in advance, so that it doesn't turn into a nightmare at the end, and want to know whether jqMath can be used (works) on Mobile apps.
I know Android has WebView and hence jqMath has good performance there.
But I am completely alien to Windows and IOS apps .So I want to know whether jqMath works on those platforms also?
By simply browsing to a jqMath website on the phone I could see that it works perfectly fine.
close up
I know both use the same webkit version (537.36) and both use the same javascript engine (V8), but are there any other major differences between them?
I have a webapp with automated tests for desktop Chrome but nothing for Chrome on Android. I'm trying to decide if I know it works on desktop Chrome do I need to go through the trouble of testing it on Chrome on Android, or are they similar enough that I should have confidence it works on both.
Thanks!
Main difference is that Android don't have Flash because of the HTML5 implementation, and also there's a lot of different screen sizes and users don't like to zoom in and out a pan and zoom again, so the best you can do is to create a web designed for mobile devices.
On the other hand, if your site is mainly HTML and Javascript, will work 100% on mobile Chrome. I have a HTML5 game and works equal in desktop and mobile.
Also, you can download the Android SDK and test your site in a bunch of different Android versions and screen sizes with the AVD, is like an official Android emulator.
I'm making an app for Iphone and android. And I'm wondering what the pros and cons are for flashcs6 (as3) and for html 5.
I'm into flash so I have no idea about the possibilities with html5, some guy pointed me on the fact that developing apps for andriod and iphone might be easier to do with hmtl5...
So I'm wondering what you guys think about this..
Greetings,
Merijn
I looked into using HTML5 for a mobile project a few months ago and found that it isn't yet as mature as AS3. It wasn't horrible - if I had decided to stick with it, I'm sure I could have made a great app. The problem was that there was no compelling reason to choose HTML5 over AS3, so I stuck with what gave me the easier development time. In a year or two from now, I imagine that HTML5 mobile dev will be a lot more mature and easier to work with though.
I can't speak feature to feature as I was just looking into making a game which just required being able to render to the screen and no device APIs (accelerometer, camera etc.). Performance-wise, AIR seemed to win out but not by a huge margin.
For now, it would come down to whether you want to pick up HTML5 (certainly a good skill to learn) or whether you want to just deploy as soon as possible in which case I would go with AS3 (more mature tools, libraries, etc.).
Of course there is no "right" answer to this question, but an oppinion. HTML5 with JavaScript is looking promising in my oppinion. HTML5 is not yet "finished" but it is at least in parts implemented on newer mobile devices.
Check out ImpactJS for a demo of what you can do using HTML5 and JavaScript. Its a javascript game engine which shows that you can use this for IPhone and other smartphones. (As well as newer desctop browsers)
Here you can find information about which browser how much of the html5 standard supports allready.
There are also other options depending on the type of app you want to create. For instance jQuery mobile can be used if its a "simple".
I have android app which works fine. And now I want to add some graphical features using WebGL ,but I have not a lot of experience in 3d, especially in android. I need suggestion that how would be worked my android app (I mean performance) after integrating this new feature?
And also I'd like to know in my app can I use "WebGL code", which works fine for pc browsers?
Your question is a little unclear. It sounds to me as if you have a native Android app that you want to add 3D content to. If so, WebGL is maybe not your best bet.
WebGL is a interface to OpenGL that works through a web browser, coded with Javascript. While you can convince some mobile devices to work with it, it's typically not available through most mobile web browsers. That may change in the near future, but it's anyone's guess as to exactly when. Point being, WebGL is not a viable target for phones right now.
If you have a native Android app though (coded with Java), you can access OpenGL ES 2.0. Capability wise it's identical to WebGL, but you can access it through the platforms native language, which will typically lead to better performance. If you have a WebGL app, it should be pretty straightforward to port to Android since the APIs are largely equivalent.
If you want to start using OpenGL in your Android app, the documentation is here.
Chrome experiments now have a section for mobile https://www.chromeexperiments.com/mobile.
Though you can play wide range of webGL examples in android chrome browser by enabling webgl as shown in pic below :-
This way you would be able to use webgl in chrome browser :-
Unfortunately old WebView does not support webGL but WebView V36 does have webGL support . You can openGL for similar purpose.
I'm working on a javascript framework that generates webkit browser pages which emulate a native app for Android & iPhone.
I'm using an iPhone emulator (iBBPhone -- very nice) to see how my pages would look on the iPhone and iPad. I was curious if there was something besides the Android SDK phone emulator that would simulate the Android browsing experience. I'm using desktop Google Chrome right now as a "pretend Android" browser but I'm not sure how alike they really are.
The Android emulator that ships with the SDK is a bit too slow to fire up on my box to be of great use in what I'm doing (even when starting up a saved image), and I was curious if there was anything else out there that simulates Android browsing. Thanks!
I think this Firefox plugin will let you display the site as it would show up in several different types of browsers. I know it supports iPhone so I imagine it will do Android as well. This page also talks about some other Firefox plug-ins that may be useful to you.
Chrome has a nice add-on named Ripple that does the job nicely I've found. http://ripple.tinyhippos.com/
These guys pretend to meet this need. Might be a good idea to check it out.
http://www.browserstack.com/mobile-browser-emulator