Tag: iOS

Categories
Development website

Sea Isle City Website and Mobile Apps

Sea Isle CityJust wrapping up some work for Sea Isle City on a new website and some mobile apps as well. The website is www.visitsicnj.com and the mobile apps are available for iOS and Android.

This was a rather large project, and working with the folks at 7 Mile Times was a pleasure yet again. They are extremely organized and great to work worth.

Kim provided an excellent design to build upon and Patty was fantastic is organizing content and keeping things rolling along. It was pretty great.

We built the site on a very stable CMS that made it very easy for the admins to manage the site. Training them literally took minutes if that, given the simplicity of the CMS.

The calendar presented some interesting issues. They wanted the events grouped into months, and working with dates/events can always be a challenge. After much trial an error a solution was found, and it didn’t require much overhead at all to execute.

This is not the first website I have worked on with these folks, so we’ve got a bit of a formula down and it really showed.

A mobile app for both the iOS and Android platforms was to be developed as well. Given the nature of the apps, we decided to build on the PhoneGap/Cordova platform and them create builds for each respective platform from that.

Mobile development is still a bit of an adventure for me, but this one did go a lot smoother than my last. Just having more hours under my mobile app development belt as well as improved libraries/info on hand really helped out.

We are pulling info from the website view web services we created, and the mobile app is consuming those JSON feeds to populate the app. It really is pretty amazing  one everything is setup and producing and consuming the web services. Pretty amazing, slick, and efficient.

While we of course hit some bumps and hurdles along the way, I’m glad to say we did meet our deadline and on budget! Not bad for such a large and complex project!

Still have some minor loose ends to wrap up, but all in all this was a very exciting and rewarding project to work on! I’ve learned much and we’ve put out a very solid product(s). The clients are extremely happy and have been the utmost pleasure to work with.

Categories
Development

Cordova statusbar for iOS Plugin

Since iOS 7 was released a month or so ago I’ve been completely stumped with fixing my Cordova iOS app that relied on jQueryMobile. I couldn’t find a clean solution to fix the now changed handling of the statusbar in iOS 7. I had come up with some CSS hacks to work around, but was having a hard time getting my fixed headers to cooperate with jQueryMobile.

I finally noticed that a statusbar plugin had been released for Cordova (PhoneGap). I immediately went to the command line and added it to my project!

I did have a little bit of a time figuring out how to make my statusbar behave like an iOS 6 app. It turned out to be much simpler than I was expecting and of course I was over thinking it.

I just had to edit the config.xml file. In my case I set the preference tag “StatusBarOverlaysWebView” true and a custom color for the statusbar in the preference tag “StatusBarBackgroundColor” as well. Then the plugin worked it’s magic!

 

Categories
Development

Opening Links in System Browser with Cordova 2.4.0 (PhoneGap)

Found myself a little stumped on this one. I’m making a simple directory mobile app using PhoneGap for iOS and Android. The listings have a website associated with them that we want to link to from the mobile app.

However, when I tested it on my iPhone I discovered that all the links were opening up within the app iteslf. Meaning that user was now trapped in that site with no way back to the Mobile App. Not a very usable experience (though the business clicked on in this case may’ve liked that).

So I tried many things, target=”_blank” seemed to be recommended. Apparently that worked on older versions of Cordova. But, not in my case.

After some more research I did find some documentation on how to handle the InAppBrowser. Finally, exactly what I was looking for!

Apparently you have to use the window.open() function and set the target to _system.

window.open('http://a-website.com', '_system');

So, I updated my links and all seems to be well now!
Categories
Development

jQuery Mobile Hi-Res Images

I’ve been developing a little mobile app using jQuery Mobile and PhoneGap and ran into a little difficulty with supporting both Retina and earlier iPhone displays. Turns out it’s not too difficult using some CSS3 media queries.

However my hi-res images were showing up way too big still.

Simply adding the background-size attribute to what a “standard size” image should be did the job. It did make a lot of sense too, even though I hadn’t thought of it at first.

For instance, my 640px x 1136px image needed a background-size attribute of 320px x 480px to display properly on the Retina display since they pack a much higher pixel density.

1
2
3
4
5
6

@media only screen and (-webkit-min-device-pixel-ratio:2) {
    .ui-body-a, .ui-overlay-a {
        background: url('img/home_bg_2x.jpg') center bottom no-repeat;
        background-size: 320px 480px;
    }
}