A week ago, I get a task to develop a site on mobile. After searching the engine, I choose jQuery Mobile! All things like more simple. Until now, I found something was wrong.
Maybe I lost myself, between responsive html and mobile page.
To test my page, I use two tools. One is the chrome developer, and other is the Opera Mobile Emulator!
As the e.g, I write a page with jQuery Mobile.To me, the first question is to change the border-radius size. My page link another css. But the CSS didn't work well, they can't make the right size. After some test, I have to change the file named jquery.mobile.css, to make it the size which I need.
After that, All things test under chrome is look ok,but the bad things happend.The page can't work well under the test tool Opera-mobile-Emulator!
After that, I added the code
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
to my page.Some thing began to look right.
The mobile page to me feel hard. What's the right way to develop them, with jQuery Mobile and how to test them quickly? Help me, the mobile page deeply hurt me. Is there something wrong to my method???
I don't think there is anything particularly wrong with your method or approach. The mobile stuff can be tricky and frustrating.
The big problem is dealing with multiple devices and trying to make it work right on all of them.
The trick I've found is to have 'slightly' different css for some devices. You don't need to change all the css just bits.
I have used this in the past, http://www.jquery4u.com/mobile/detect-mobile-devices-jquery/, and it seems to work pretty well.
There is also another tool called hammerjs, http://eightmedia.github.io/hammer.js/, which allows you to have swipe events on elements which i also use.
But ultimately, mobile development can be very frustrating and fiddly.
Related
So, my cohorts and I have been doing some development with Phonegap +jQueryMobile for an application we've been planning to rollout. We switched off doing this natively for iOS and Android, since its mostly html anyway, and phone gap seemed like a great way to do this without having to write a whole bunch of platform specific code (although we're more or less newbs when it comes to this type of development.)
Previously, all the html, javascript, etc, was going to be housed in the app itself. For the most part, this seemed to work for us, and we advanced our design/testing/etc accordingly. However, things have changed in our approach. For each of our customers (once they go through a log-in/authentication) has a 'starting' html file (essentially 'their' index.html) that is specific to said customer. This was different from before where everyone had the same files.
Now I've played around with storing certain scripts on the web server to try and off-set opening the html running on the server, but it's not really that useful when trying to integrate some of the functionality like the camera or some of the other plugins we're trying to use. It's essentially a form-based application, so this is the ONLY file that will change from customer to customer. Also, this will not be something that changes frequently. For the most part, it will be setup for a customer ONCE AND ONLY ONCE, and it truly is unlikely to change.
Is there a way to more or less pull down this html file from a web server to replace the one that is stored internally in the app, and then load that version? Would doing something like that (if its even possible) violate Apple's or Google's App guidelines? Or is what I'm describing not even possible in the framework?
The only other thing I can think of would be to change the stored 'index.html' file to not load any of the form itself, but rather make ajax (or equivalent) calls to do so, but I've been told by our developer working the web design side of things that it would be a huge pain.
Any insight/knowledge would be appreciated.
If you really need to do this (I don't quite understand why), I think your best bet is to go the AJAX route. At least Apple does not look kindly on applications that update themselves without going through the App Store submission process.
You can do the same index.html for all and a script config.js that be the responsible of load/unload resources/html of each user at app start.
All you need to do then is save that config JSON values in localstorage and go.
I tried Angular, and I liked it. I've began to integrate him into my rails-app, but then appeared some doubts about architecture
Routes. I would like to navigate without refreshing the page, before i used Wiselinks gem, it's easy and cool - just install, patch link_to helper and done. But angular have his own router, and ui-router (which is cool). I want my app to be running at the browser like Opera Mini and IE, but ui-router doesn't have such callbacks as in wiselinks. I wouldn't create mobile site version - the design is adaptive yet. It means, I would use rails routing, but I want to AJAX page refreshing when it can be (progressive enchansement, yep). What do I do?
In many places, the content is rendered by Angular, i.e. a list of posts (by ajaxing json). That fast & cool on desktop, but again old browsers! I need to render it on server for them. Or I haven't?
I'm stuck. Thanks.
This would be best trip to angularjs + rails 4...
This post clear my doubts and now i m very clear about architecture, routes, controllers, model, etc..
http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails
I hope this solves your DOUBTs
and to know further about angularjs visit
http://www.angularjs.org
It's not necessary that you have to use angular routing. You can use ng-controller directive to inject controllers in your view.
Angular in general is very fast. I have been using it even in mobile browsers, it works like a charm. True if do heavy $scope manipulation, things might get little slow.
Talking about old browser support, till IE8, you are pretty good, if you follow http://docs.angularjs.org/guide/ie as already mentioned by shaunhusain, but below that I am skeptical.
I wouldnt recommend using wiselinks alongside with angular. We have tried that in a production app and it took us a long time to make this work, there had been so many issues with undead scopes and other artifacts.
Therefore, we have ended up throwing out wiselinks and replacing it with a similar directive written in angular. This way its easier to avoid problems when destroying or compiling dom.
I built my first rails app but built them using Firefox and Chrome. The web app looks fine in those browsers, but IE is way off. It's nearly unusable (internally as well as the homepage). What is the best way to address this issue without messing up the other browsers?
Should I just resort to doing a browser detect and put up an error message saying it's not optimized for IE?
You should just identify the specific, individual layout problems you see with your site in IE and start fixing them one by one, depending on the issue. There isn't one single answer to making your site render correctly in all browsers, it will likely be a combination of fixes for specific layout issues on your page, and frequently testing in all the browsers you plan to support, to ensure each one is still working after you make a change.
Beyond that, without a more specific description of the rendering issues your site has, there isn't much more direction to give here.
I've been trying to figure out the best way to use Rails, Ember 1.0RC and jQuery mobile but with no success.
I'm building a simple single web app with Rails as a backend that provides simple JSON. Now I know that Ember and JQM don't like each other and you have to write custom helpers to render Ember views. This makes things quite complicated.
I know that there are a few examples out there but they are quite obsolete since Ember was under heavy development and there have been many changes.
I'd like to hear from experienced developers if it is a good idea or not to use Ember with JQM in my case?
Maybe I should go for other MVC framework (which one?)?
Sorry for the question being pretty open but I could not find any reliable resources on the web.
// edited on March 20
I've watched 2 Ember screencasts (from Peepscode and Railscasts) and they shed some light on the matter. Now I know a little bit more. But let me explain what I'm after.
I'm building an internal 'kudos' app based on the merits system. That is every Monday an employee receives 20 'kudos' to give other co-workers. The design is as follows:
the main page shows a list of all employees and at the top, also as an list item, there is position that belongs to himself. It shows for example how many kudos to give left and how many he or she received from others. The owner? do not know how many kudos other employees received. But I think there'll be a 'Top 3 kudoers' page.
When you tap/hold an item, a modal dialog will appear that will ask you if you what to give a kudo.
It is done. But what remained is porting it to Ember.
Now, after watching screencasts I kind of know what to do, but what buggs me is how to make JQM internal hash pages and Ember router a breeze.
I saw that one page app in Ember uses urls like these:
myapp/#/users/user
whereas JQM uses internal pages like this:
myapp/#somepage
I'd like to keep the app as simple as possible (following Ember 'convention over configuration') and make use of JQM internal pages.
So my question is how can they both go with each other?
I'd like to hear from experienced developers if it is a good idea or not to use Ember with JQM in my case?
I've been asking around about this and pretty much everyone who has tried to use JQuery Mobile with ember has advised against it.
Not that it can't be done. It's just that most people have determined the challenges outweigh the benefits. Especially if you are new to one or both frameworks.
The best example of JQM + Ember integration i've seen is by TOMASZ and can be found here: https://coderwall.com/p/ylogzg
Thing is, that app does not use ember router at all. For sure it won't help you make JQM internal hash pages and Ember router a breeze
I'd create a web page with jquery and css3 and is looking good on my computer but after upload on server is awful in IE. In any other browser everything is good.
Any suggestion why is that?
This sounds like your css is not "compatible" to IE. Every brother is interpreting css a little bit different.