Archive for '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!

Continue Reading →
0

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!

Continue Reading →
16

HTML App Distro, Take IV: appMobi

You know, sometimes we wonder if anyone except us actually has any functioning memory whatsoever. Examine this alleged news:

World’s First HTML5 Web App Browser Launches – Could Be Game Changer For Developers

What is being called the world’s first HTML5 web app browser launches today in the App Store. The free and universal MobiUs app provides a way for developers to get apps onto iDevices without first getting Apple’s approval. As such, this could fast become be a game-changer in mobile app development…

Well, anyone who’s calling it that hasn’t been paying much attention, have they? Granted that appMobi does look like a neat turn on the concept that might be worth keeping an eye on, but “first”? Ah … no.

[UPDATE: Please examine rebuttal in the comments, where the miffed mobiUS folk correct us that they are accurate in calling it “the first web app browser”, as it is, in fact, an APP. Why yes, now that we look closer, that is what they said. Did you notice the space between “web” and “app”? Nope, we read it “the first webapp browser” too. So read the rest of this keeping that in mind. We’re not convinced that will actually make a significant difference … but hey, all the best of luck to them proving us wrong!]

… Matter of fact, there seems to be a regular pattern developing here. Let us examine this post from your humble blogger just aout a year ago:

OpenAppMkt

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…

So that would make appMobi “World’s Second”, then. But wait, what’s that we said in the OpenAppMkt post?

… 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…

Huh? Another year ago? Oh, that’s right:

App Store Alternatives

wherein we mentioned Hottrix and their Premier App Shop.

So now we’re down to appMobi being “World’s Third”.

And you know, we could go back another year further than that and be pretty much back to where Apple was telling us that the only way to distribute apps for this brand new shiny “iPhone” thingy would be Apple’s web apps directory, for that matter. So, that makes appMobi the “World’s Fourth” then.

So yeah, this “World’s First” seems to be awarded anew on a pretty darn close to annual basis here. Will this latest one achieve any more traction than the other efforts chronicled above? Why, check back this time next year and see. But you should probably place your bets on there being a fifth “World’s First” HTML app distribution system to introduce to you then, given established practice!

Continue Reading →
2

Free PayPal API Book

Here’s a hot action tip — pop over to the O’Reilly site today or tomorrow for a free book:

PayPal APIs: Up and Running

paypalAPIs.gif

Does your web application provide users with a convenient way to complete transactions? This book introduces you to PayPal’s APIs with instruction and resources for integrating this popular payment solution in different application environments, including mobile. By the end of this book, you’ll have a clear understanding of what PayPal is and how you can get the most out of its powerful features for your particular payment situation.

Note particularly the “including mobile” part of that. Remember quite a while back we noted that they were beta testing an iOS PayPal integration component? Why yes, yes the last chapter of this book is all about that:

Mobile Express Checkout Library for iOS

PayPal provides a MEC library for iOS, available for download… This MEC library supports two different programming flows: it can be called either directly from your mobile application or via a PayPal button on your mobile website.

MEC Mobile Application Integration

MEC can be integrated into your mobile application, allowing you to start and end the payment process with screens inside your application…

And hey, you might want to put PayPal payments into an app sometime … so grab the book for free while you can!

(Or, if you’re stumbling across this via a search engine months later, here’s the regular book page for your convenience.)

h/t: @rwenderlich!

Continue Reading →
3

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

Continue Reading →
0

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!

Continue Reading →
1

Sencha Animator

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:

May 2011 brings us Sencha Animator Beta 1!

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

Continue Reading →
2

Button Design: AppControls

So we’ve mentioned before several options for bringing the shiny to your app’s buttons; well, if you really want to get your button look just so, here’s the tool for you: AppControls!

AppControlsScreen.png
  • Creates buttons and other application controls with pixel-perfect precision
  • Automatically renders high-resolution “@2x” images for use with the iPhone 4
  • Creates color gradients with up to 8 color-stops
  • Text content is accurately rendered and can include an optional shadow
  • Designs can be saved as a single image, 3-part image or 9-part image for automatic scaling
  • CSS output can be generated for use in an external file or as an inline style element
  • Generates custom CSS for WebKit and Mozilla
  • Designs can be saved as Presets
  • Up to 3 Presets can be combined in a single file for use as a “rollover” image for the web

Yep, that gives you pretty much all the customization you could wish for in a standardish looking button, and it’s particularly convenient to have it export CSS along with the images so your app and its website can have a unified look. At $29.90 we’d have to be rather more serious about the look of our buttons than we happen to be at the moment to actually buy it, but hey, it’s always nice to have options!

Continue Reading →
8

OpenAppMkt

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!

Continue Reading →
2

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.

Opensourcing Golingo

Source of a word puzzle game published in the App Store, created with Titanium Mobile and Web code.

Akihabara

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

Japstore – The free Javascript application store

Bookmarkable Javascript applications and a downloadable SDK to create them.

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.

UPDATE:

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

Continue Reading →
1
Page 1 of 6 12345...»