Under The Bridge Under The Bridge

Tag: Mobile Safari
Smart App Banners

Chances are you idly noted ‘Smart App Banners’ in the WWDC hoopla — oh, you didn’t? Well, to refresh your memory,

… Instead of those annoying overlays that many mobile sites show you to alert you of their mobile apps, Apple will use a more unified system in iOS 6. Instead of these banners, Apple will now show a link to the App Store (or to the app, if you have already installed it) when you open a site that also offers a mobile app. Apple calls this feature “Smart App Banners” …

— and didn’t think further than “well, that’s another mild annoyance smoothed out of the way”, right? Well, actually, they’re smarter than that; not only can they notify your web surfer of the native app, they can deep link into it:

Smart App Banners

… The second kind of problem that the banners solve in a smart way is to actually allowing website makers to deep-link to specific content. Like in the TED example above I’ve opened up a page of an individual video. If I have the TED.com app installed then tapping the banner button should also open up the app to this very same video.

This is achieved by the second (optional) parameter in the tag, named “app-argument”. This has to be a valid URL because it is passed as NSURL into the app, similar to launching the app with a custom URL scheme. Here TED.com simply passes the URL of the video page to the app because this is probably the permalink to this piece of content. Their app will know how to go to the video that corresponds to this URL…

Nifty, huh? Nagging the user to install an app, that’s mostly just annoying, but giving them a good reason to, now that’s useful!

Settings URLs

WARNING:

The process described below was noted as disabled back in 5.1 beta 1 and not only do they continue to not work in 5.1 final, people are noting review rejections for using them. So the following should be taken as a nugget of historical interest only. Or cause to file a Radar to plead for them back!

***********

So you ever wanted to be able to send the user to a particular Settings page? Yeah, us too … pretty frequently actually.

Well, now you can in iOS 5 with the prefs: URL scheme with [UIApplication sharedApplication] openURL:

Turn on Location Services?

[NSURL URLWithString:@”prefs:root=LOCATION_SERVICES“]];

Set up Twitter?

[NSURL URLWithString:@”prefs:root=TWITTER“]];

Hook up a Bluetooth device?

[NSURL URLWithString:@”prefs:root=General&path=Bluetooth“]];

Handy, indeed. And why yes, yes they do work just fine in Mobile Safari as well; load this page up on your device and tap any of the sample links above to see for yourself!

iPhone JavaScript Cookbook

So as promised when we posted reviewing opportunities for you a couple days back, here’s our just barely too late review of Packt Publishing’s iPhone JavaScript Cookbook — “Clear and practical recipes for building web applications using JavaScript and AJAX without having to learn Objective-C or Cocoa.”

Screen shot 2011-10-01 at 1.28.24 PM.png

Definitely targeting the, ah, ideologically vigorous portion of the developer community; the preface tells us

This is the book for any iPhone developer looking to side step the totalitarian application store regime of Apple.

Indeed. The funny thing is there, lately we’re hearing more and more of people getting rejected by ‘the totalitarian application store regime of Apple’ because their app doesn’t include any functionality that can’t be delivered by a web app. So substitute “being forced to” for “looking to” and that’s the perspective we’re evaluating from, in case it turns out that we ever get one of those rejections; as well as looking for useful tips that can be applied to delivering program functionality inside UIWebViews.

As the title would indicate, it’s organized in the snippet-collection cookbook format, but rather different from most of those we end up reading; the examples are scattered among a collection of different frameworks rather than focusing on one environment. The environments they have you install are:

  • iUI 0.31 (currently up to 0.40 alpha)
  • UiUIKit 2.1 (current)
  • XUI 2.0.0 (currently up to 2.2.0)
  • iWebKit 5.04 (current)
  • WebApp.Net 0.5.2 (current)
  • PhoneGap 0.9.4 (currently up to 1.1.0)
  • Sencha Touch 1.0.1a (currently up to 1.1.1)
  • Apple Dashcode in a Snow Leopard Xcode distro

Pretty decent cross-section of the various options you have for approaching JavaScript app development, yep. Not completely sure what we think of that; it works not badly for a general purpose introduction to provide the flavour of the different frameworks, but if you already have a specific environment in mind it rather reduces the value of the rest. Let’s take a specific example, the ‘Adding Visual Effects’ recipe from Chapter 3:

… Combining these movements with color changes, we can apply visual effects to the user interface of our web applications. The most popular of these animations or effects are fade and slide. Both of them display different elements on the screen showing one element and hiding another one that is applying a transition…

Yes, that absolutely is a recipe we would like for our web app to look native…

… We’re continuing with Sencha Touch because this toolkit implements some visual effects, which are ready-to-use for some elements of the user interface…

… but if you’re not using Sencha Touch, that’s not a very useful recipe, is it? On the other hand, if you’re not set in your ways yet, it’s an indication that if you do want to focus on visual richness, perhaps Sencha Touch would be a particularly good choice. So does this approach make for a useful overview or an annoying dilution of content? Your call. For dilettantes in the JavaScript world like us, we’ll go with useful overview.

And there certainly are lots of recipes that aren’t tied to a specific framework as well; for instance, the quie useful if you don’t know how ‘Running your web application without Internet access’ recipe is pure HTML 5, nothing specific to iPhone or iWebKit the particular framework used in the example. And they cover nicely the Mobile Safari requirements for icons and splash screens and so forth which are iPhone but not framework specific; so there’s certainly plenty of content that you’re likely to find useful no matter what your environment.

The actual categories of recipes, well the Preface does a fine job of describing them:

Chapter 2, Building Interfaces, introduces you to the world of iPhone applications. You’ll learn how to build essential and advanced interfaces, such as buttons, lists, forms, and date pickers.

Chapter 3, Events and Actions, discovers how to deal with events and actions. Both allow us a better control of the interaction between the user and the device.

Chapter 4, A Picture Speaks a Thousand Words, takes advantage of the great screens of iPhone and iPad teaching you how to display a grid of images, how to apply different effects, and how to work with the built-in camera of the device.

Chapter 5, Mastering Sound and Music, explores the audio and video capabilities of iPhone. You’ll learn how to play and record audio and how to create iPod playlists.

Chapter 6, Exchanging Data: AJAX, covers how to use this technology for exchanging data between the server and the client. Readers are walked through the process of sending HTTP requests and processing JSON responses.

Chapter 7, Working with Data: Storage and SQL, provides coverage of the process for storing and retrieving data using the SQL language. Also, you’ll learn how to deal with different kinds of storage available in iPhone.

Chapter 8, This is a Phone, enlightens that we cannot forget that iPhone is a smartphone. This is the reason to get focused on learning how to create, select and display contacts, and how to call a number and send an SMS.

Chapter 9, Location, Location, Location, introduces to readers to geolocation, showing how to detect the current orientation and position, and how to use the API provided by Google Maps for displaying a map at a specific location.

Chapter 10, Web 2.0 Integration, helps readers learn how to integrate their iPhone applications with third-party popular services such as Facebook, YouTube, Twitter, and Flickr.

One thing that does need noting is that a good number of these recipes for accessing native things like the camera or the address book rely on the native bridging functionality of PhoneGap. So whilst ‘without having to learn Objective-C or Cocoa’ is true, the ‘side step the totalitarian application store regime of Apple’ bit is rather given the lie, as PhoneGap produces native applications for its various OS targets and so you’re not side stepping anything. Saving some porting time, at best.

So overall? Almost certainly you’ll find at least some things of use here no matter what your experience level is, given the potpourri of Safari Mobile tips, HTML5 tips, native bridging tips, and framework-specific tips; so it would be a decent choice to add to your reference collection for anybody doing pretty much anything with JavaScript and the iPhone, we’d say.

For someone like us in particular who has as little knowledge of JavaScript as they can possibly get away with but wants to keep somewhat abreast of the state of development options in the non-native world, why yes this is a very educational book indeed, recommended without reservation.

But, well, the flip side of being generally useful to pretty much anybody is that it probably won’t be a must have for anyone in particular; and given how many of the recipes are tied to particular frameworks — particularly the ones that are tied to PhoneGap, which makes them native applications not web applications — can’t quite recommend it unconditionally to everyone. But certainly a very solid indeed four stars, and deserving of your serious consideration if you’re doing any iPhone JavaScript work at all!

HOWTO: Web Apps

So, as perhaps you noted on an earlier post available briefly before the client decided that we were sharing too much so down the memory hole it went, Apple is starting to crack down on enforcing App Store Review Guidelines section

2.13: Apps that are primarily marketing materials or advertisements will be rejected

with a rejection letter reading

We found that your app provides a limited set of features and functionality, and focuses primarily on marketing or promoting your business, which is not appropriate for the App Store…

and will go on to suggest

Alternatively, you may wish to consider building a web app using HTML5. HTML5 is the major new version of HTML and enables audio and video to play natively in the browser without requiring proprietary plug-ins. Using HTML5, web apps look and behave like native iPhone and iPad apps, and using HTML5’s Offline Application Cache, your web apps work even when the device is offline. With web apps, you have flexibility to deliver as much or as little functionality as you desire.

To get started with iPhone or iPad web apps, please review “Getting Started with iPhone Web Apps” .

For a description of the HTML elements and attributes you can use in Safari on iPhone, check out “Safari HTML Reference: Introduction“.

which is all very well, but the couple client inquiries we’ve had since then that we’ve told “yeah, we think you’re risking THIS…” have had their web designers not be overly impressed with the understandability of those referrals.

So, here is what appears to be an definitive, succinct, and nicely geared to web designers’ sensibilities writeup:

HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript

In this article, I’ll explain how to:

  • strip away the browser chrome (the url bar and button bar);
  • prevent viewport scrolling and scaling;
  • respond to multi-touch and gesture events;
  • use webkit CSS to get the iPhone OS look and feel;
  • cache the app so it runs without internet access;
  • get a custom icon on the home screen; and
  • have a splash screen load at the start.

If you want to put it in the app store, you can even package your web app as a “native” Objective-C app. (Although, why you’d want to subject yourself to the app store approval process when you don’t have to is beyond me.)

I’ve put this HOWTO together, because–even on Apple’s site–there’s not one centralized page that tells you how to do all this. I’ve included templates, examples and a stubbed-out XCode project…

Yes. Yes, that should do nicely as a Web App Making For Designers 101 that they’re likely to actually read, we’d say. Anything better you know of, Dear Readers?

h/t: @smashingmag!

UPDATE:

These look like more excellent resource for getting started on web apps:

Mobile Boilerplate – A Base Template For Mobile Web Apps

18 New Useful Frameworks for Web and Mobile App Developers

If the ‘Flash video!!!’ things comes up: Sublime Video

MobileSafari on 4.2

So there was a new iOS version out today, no doubt you noticed; but did you notice all the nifty new stuff in Safari? Nope, us neither, and it’s not documented yet apparently … but some people are hardcore enough to dig around themselves:

Safari on iPhone & iPad 4.2: Accelerometer, WebSockets & better HTML5 support

Apple didn’t update yet Safari documentation to reflect these new APIs. This information is based on JavaScript research and testing over Safari itself I’ve been doing. The list of new features I’ve detected are:

  • Accelerometer support through the DeviceOrientation API
  • WebSockets API from HTML5
  • Updated HTML5 Form Support
  • Partial XHR-2 Support
  • Print Support
  • New JavaScript data types
  • New DOM events
  • Enhanced SVG and Canvas support

All that’s pretty neat yep, and from the comments here’s another one:

@font-face has worked for a long time on iOS given some specific caveats. However, the new news on web fonts in 4.2 is that iOS now prefers the TTF version of a font over the SVG version (formerly SVG was the only format supported.)

The other nice thing about web fonts on 4.2 is that they now work in offline webapps. This was a big deal for me and I only discovered it by luck. Still; this will be a pretty handy feature for a lot of folks I think.

Presumably all these new goodies will apply to your embedded UIWebViews as well.

POSTSCRIPT:

The site PADILICIOUS, mentioned in this year’s WWDC videos, has a wide range of iPad/MobileSafari focused good stuff!

Sencha Animator

[EDIT: Discontinued.]

This looks like something to keep an eye on for your mobile HTML development plans: From the folks we noted in passing have the mildly interesting looking Sencha Touch HTML5 mobile framework, there’s now a very interesting looking tool preview available,

Introducing Sencha Animator: The CSS3 Alternative to Flash

Today we’re thrilled to announce the developer preview release of Sencha Animator, a new GUI-based desktop application that enables interactive designers to easily create rich media animations for HTML5-capable devices. With Apple’s decision to exclude Flash from their iOS, interactive designers have been searching for a way to bring the power of web animation to iOS devices without hand-coding hundreds, if not thousands of lines of CSS3. Well, the search is over. Check out our demos, then download Sencha Animator and give it a whirl…

Sencha Animator allows you simply place objects (text, shapes, and images) onto a re-sizable stage area, configure their properties and then animate to bring them to life. You can move, scale, skew and rotate objects singly or at various levels of nesting, in 2D or 3D space. With Sencha Animator, you can also take advantage of CSS3 capabilities like gradients, blurs, reflections and shadows. You can create basic animations quickly and easily. But Animator is also designed to be a CSS3 power-tool. So when you need to add HTML or custom CSS, it’s easy to do that too. Best of all, Sencha Animator outputs pure CSS3 animation code, so it’s hardware accelerated on Apple iOS, which creates incredibly smooth animations…

Mobile designers and developers should be particularly thrilled since CSS3 animations are the only animation technology that works on the major mobile platforms- iOS, Android and Blackberry OS6. (Android lacks SVG and the BlackBerry Torch is not high powered enough to run Canvas)…

Yes, coupled with something like the PhoneGap or Titanium frameworks, this could be quite interesting indeed for your cross-platform deployments looks like, doesn’t it now?

h/t: @shashivelur!

UPDATE:

Forget Flash, Skip GIF, Control iOS: Phosphor is an interesting alternative to HTML5 video.

HTML5 Mobile Web Development

So as we’ve mentioned occasionally around here, we think that HTML5 app development is something that even real developers (we kid! we kid!) should be keeping their eye on as a likely method of first resort for cross-platform development and non-AppStore distribution; and here (h/t: @Dylan_Beadle) is a LIVE! ONLINE! FREE! course it might be worth at least keeping an eye on in the background every Tuesday the next 10 weeks:

HTML5 Mobile Web Development

Ready to create mobile web applications with HTML5? In this 10-week online course, you’ll learn how to build mobile apps using several HTML5 features—including the new semantic elements, geolocation, audio and video tags, local storage capacity, web forms, and the canvas 2D drawing surface. During the course, you’ll combine HTML5 elements with JavaScript and CSS3 to create apps for Twitter, movie trailers, and an address book.

Discover how to style your apps to respond to a device’s vertical and horizontal orientation, take advantage of global positioning, draw your own controls and create basic animations, make your app available to users offline, and more—in just ten weeks.

First one starts in … oh, look at that, half an hour. So unless you’re right on top of our posts, guess you probably missed that. But hey, it’s just an overview; looks like the interesting stuff starts next week, full session descriptions at the above link.

Aaaaaand while we’re discussing HTML5 development, this looks like a good place to stash some of the looking worth a followup read links in that space we’ve noted recently about the various frameworks available:

18 Mobile Frameworks and Development Tools for Creating iPhone Apps

Getting Started With Appcelerator

Impressive Growth for Appcelerator (note native app showcase)

In-Depth Corona SDK Review

And here’s a jumble of other vaguely HTML related tips and tricks for design and device support:

Configuring an iPhone Web App With Meta Tags

How to make your web content look stunning on the iPhone 4’s new Retina display

Targeting the iPhone 4 Retina Display with CSS3 Media Queries

Tutorials: Swipe Reading, Orientation Support, And Image Slideshows In iPad Web Apps

Safari Web Content Guide: Optimizing for Safari on iPhone

21 Ridiculously Impressive HTML5 Canvas Experiments

HOW TO: Get Started with HTML5 Boilerplate

UPDATES:

12 Great Tips for iPhone Web Development

And you’ll probably want some fonts for that; check out recent news on that front,

Helvetica Joins the Web Font Revolution

OpenAppMkt

[EDIT: Discontinued.]

So, looks like there’s a new App Store alternative around these days: OpenAppMkt! Basically they’re doing their best to replicate the App Store experience with HTML5 apps; and they seem to be getting a little bit of traction. As well as a good deal of frenzied yammering about “loopholes” and the like, from people whose memories apparently are not good enough to extend back to 2007 when we were all being told that HTML5 would be the only way to write iPhone applications. My, my, how things do change.

But, as we’ve pointed out before, Apple has continually improved the HTML app capabilities and development experience right along with SDK development; it’s just that people almost completely ignore that alternative … even when an HTML app makes scads more sense for what they have in mind. As well as being potentially cross-platform and all, especially as WebKit-based browsers continue their apparently inexorable march towards complete dominance of the mobile landscape.

But the thing that actually intrigued us whilst reading around on OpenAppMkt is that although several commentators have mentioned that Apple has their own web app directory, absolutely not a single piece we read seemed to have any idea of the existence of the first HTML app marketplace, that we posted about pretty much exactly a year ago; Hottrix and their Premier App Shop,

Screen shot 2010-08-21 at 10.34.35 PM.png

another genre-specific shop that blushing modesty bars us from mentioning, and Your App Shop for creating your own store.

Why that initiative hasn’t, in a year, seemed to go anyplace in particular and OpenAppMkt seems to have pretty solid interest out of the gate rather escapes us. Maybe the timing was wrong before, maybe the technology is better now (although the Premier App Shop webapp actually seems like the superior user experience to us) or maybe … well, we dunno. if anyone has any insights, please share!

Safari Extensions

So you’ve probably heard that now you can build Safari extensions, and Safari’s got its own Dev Center and certification process and all. Quite the effort they’re putting behind this, isn’t it? Almost as if they have bigger plans to come, or something. In the meantime, here’s a few links that are keeping track of the first attempts at extension building until the official gallery opens:

Safari Extensions (safariextensions.tumblr.com)

UPDATES:

Great, as usual, Ars Technica article on developing Safari extensions!

HTML5 Roundup

Here’s a collection of iPhone-targeted HTML5 links we stumbled across recently, for whenever it is you decide to get into writing cross-platform or non-AppStore apps:

Tutorial: Your First Mobile HTML5 App – The Basics, Forms, and Geolocation (Part 1)

Tutorial: Your First Mobile HTML5 App – Offline Storage (Part 2)

Nice and easy introduction.

HTML fullscreen apps for the iPad

Some handy formatting tips.

Create offline Web applications on mobile devices with HTML5

From IBM developerWorks, no less; provides a sample inventory management application, tested on an iPhone 3GS and a Palm Pre.

Akihabara

Sprite library using the canvas tag, targeted at retro pixelated games; several playable demos.

Parcycle: A Particle System with HTML5 canvas

Oh, we just love those particle systems, yes we do. Browser and offline webapp demos for your hypnotic pleasure. And dig around on the site for other links to various webapp examples.

UPDATES:

Learn HTML5: 10 Must Read Lessons has a bunch of good stuff.