resize images for cordova mobile application based on detected device - html

I'v built a cordova mobile application which i intend to deploy for several platforms. The problem i'm facing is images and thumbnails within the app. how to make the application detect which device is being used and based on that resize all images thumbnails and background (not only icon and splash screen) inside the application to be displayed properly?
I'v read about how this is done for native apps but if i'm gonna follow the same approach for example in android declaring a res folder for different sizes, how can i access them in my html file and pick the right size for the right mobile device? i want this to be tested in emulator how can i automate the process?
take it easy on me it's my first app :)

Related

How to debug Canvas LMS mobile app customization

After customized the Canvas LMS desktop webpage with CSS and JS files we need to do the same on the mobile app.
Given the mobile app for both Android and iPhone is a Webview, how can i inspect html tags classes and ids to apply changes through the CSS or JS files?
Thanks!
Given no one knows about it, I proceeded as following:
I've cloned Canvas mobile app from public github repo available at: https://github.com/instructure/instructure-android
I've compiled the project and executed it on my own device, for which i needed a demo license of PSPDF to satisfy it dependence.
I've debugged the app, specifically i've set a breakpoint at: instructure-android/pandautils/src/main/java/com/instructure/pandautils/views/CanvasWebView.java line 396 or somewhere containg a variable with HTML code to show in the app.
Navigate between screens and wait for breakpoint triggers.
I have to say I expected most of the app was a webview, but i were wrong. In fact, is the opposite: this is an Android native app, and just allows a few customizations on few screens through uploadable CSS and JS files.

Sikuli is not recognize the image but earlier it was recognizing it

I am using the sikuli with java and eclipse IDE. I have captured some images and created a repository of images. My code was working fine with captured images and I was able to login into my Desktop Application and able open a project. But now after few days, sikuli is not recognizing those captured images Please help me out
https://answers.launchpad.net/sikuli/+question/289295
Here I list some possible reasons:
Have you changed the screen resolution?
As SnakeFoot mention, if you're using click over the desktop and you have changed your background image, the images could been changed.
PD: Sorry, my english is not perfect.

Silverlight web application loading an external page in the app

Basically i have an application that needs to be able to navigate to a webpage on the app whilst in the browser in silverlight how can i go about doing this?
It does not let me use the web browser tool and i cannot find any other way. I dont think i will be able to use an iframe either as i need to be able to draw a canvas over the webpage that can then be drawn upon using a paint tool and i dont think using an iframe will allow this.
So how do i go about getting an external website to load inside of my web silverlight application?
You're right, there is a WebBrowser control but it is only available when running in out of browser mode.
I'm afraid at the moment, the only way is by using an Iframe (spent many hours searching).
I managed to get it working OK by using this tutorial: Showing HTML content inside silverlight app
However for your requirements (drawing on top of the webpage) this will not work, as it does not allow the Silverlight app to integrate with the html content.
The only option that i can think of is setting your app be be out of browser, then using the WebBrowser control
But this will not be appropriate as i've just noticed that your app needs to be accessible through a browser!

Need to convert my HTML5 based web application into a mobile app which will target all mobile devices

Is it possible to convert my existing HTML/jquery.js website into a mobile app that targets all device (iPhone, Android, Blackberry, etc.). Below are the points I can think of. Please correct me if I'm wrong.
Add jquerymobile.js and change the css style (based on the device which is accessing your site).
What all points should I consider while converting my existing desktop based website into a mobile one. Or should I start creating a mobile website (MVC4 mobile website) from scratch? If that is the case then I have to maintain 2 code bases (1 for desktop and 1 for mobile) which I don't want to do.
You may avoid the need for two code bases if you design your Web app in a device-agnostic way. That means that it can be displayed on many different screen sizes (anything from small mobile phones to plasma TV sets) and navigated using many different input methods (mice, keyboards, touch screens, game pads, etc.). Various techniques to do that are nowadays known as "mobile first" or "responsive design". For a good start, see:
Creating a Mobile-First Responsive Web Design
320 and Up - the ‘tiny screen first’ responsive boilerplate
Mobile HTML5 Boilerplate
the Responsive Mobile First template from Initializr
Twitter Bootstrap
Zurb Foundation
For more see: Nice intro to Web Design frameworks (a video by Edreih Aldana)
Keep in mind that it may not always be possible or convenient if your application is very complicated and in the end you may end up with two (or more) code bases in that case, but most of the websites and Web apps can be built using those principles in mind.
Also keeping in mind the Web Content Accessibility Guidelines can make it much easier to design websites that can work on many devices and with many input methods.
You haven't specifically asked for this but additionally you can use PhoneGap to convert mobile websites or Web apps to actual native mobile applications for iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian, so you can have your apps available for installation from various app stores for those particular platforms.
Update 2016
I wrote this answer in 2012 and some relevant tools have been developed since then:
Ionic - a hybrid mobile app framework based on Angular
React Native - a framework to build native apps based on React
Framework7 - a hybrid mobile app framework based on Dom7 (similar to jQuery)
Intel XDK (formerly known as appMobi)
Appcelerator
AppGyver
NativeScript
Onsen UI
More at the Mobile Frameworks Comparison Chart
This question was asked 3 years ago and has good answers, I just want to add some info, based on my experience:
It's better not create separate mobile design, but modify existing web with responsive web design using Bootstrap.
Then you have two options:
Create Hybrid Web App using Apache Cordova, it's almost the same as PhoneGap, mentioned above.
I'm using Visual Studio, so I used VS project template.
Hosted Web App using Manifoldjs.
I thinks this option is easy, you just take your existing web site and wrap it, creating Web App.
And if you use Visual Studio, you can create hosted Web App even without Manifilod.
You can try PhoneGap, a fast way to deploy your app to various kinds of devices.
Try the free phonegap build service. You upload your html stuff, and it will automatically generate apps for different devices!
You can also try Appery.io to easily build a web app. Here is an article that shows you how to make an iOS app from your website. If your website is responsive, it will automatically target all mobile screen sizes. http://www.techlivewire.com/4844/generate-an-iphone-app-for-your-website.html

How to make an HTML5 that does not require the blackberry browser component?

I used the latest and greatest jQuery Mobile (RC1) to develop an app for the client. I used the latest Webworks version from RIM and packaged the app in a Cod file.
The app works great if accessed through the web browser ETC however when I installed the actual generated JAD/Cod files onto a blackberry device, performance was horrible even with minimum number of jQuery libraries.
Since I have Googled this everywhere and it is apparent that one cannot have a meaningful app experience if Webworks is used, I want to be able to just create something that just places the app icon on the phone. Once clicked, it open the browser and takes the user to the web server where the HTML files are parked.
Is this possible?
You can do that, with a very simple Java-application.
The following code:
Browser.getDefaultSession().displayPage("http://www.yourserver.com");
It will open browser and open page: http://www.yourserver.com
Browser class javadoc is here: http://www.blackberry.com/developers/docs/5.0.0api/net/rim/blackberry/api/browser/Browser.html