Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


HTML5 iOS app development

No description

Leo Horie

on 28 November 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML5 iOS app development

iOS App
Development Hello world. Wut? Much better: <h1>Hello World</h1>

h1 {color: red;}

$("h1").fadeIn(); HTML 5
allows us to build content quickly... ...And for many platforms Veeva iRep
Klick iConnect
Android version? No problem. Ok then!
How do we
get started? Just kidding. That's just boilerplate code,
if you're starting from scratch.

http://github.com/lhorie/html5-ios-app-boilerplate Learn CSS 3! -webkit-transform: rotate(0deg) -webkit-transition-delay Seriously, go play with these tonight: @-webkit-keyframes Touch API $(document).on("touchstart", doStuff) touchstart

e.touches (e.originalEvent.touches in jQuery) Tip 1 http://github.com/lhorie/swipe.js
http://github.com/lhorie/pinch.js It's fast, and allows multi-touch events and save to home screen, to get rid of the address bar when developing in mobile Safari Tip 2 <meta name="apple-mobile-web-app-capable" content="yes" /> Use this meta tag: iOS6 only triggers it via -webkit-perspective: 1000;
breaks position:fixed;
can be slower if used incorrectly (overlapping DOM elements)
can crash if abused (watch for memory warnings in Xcode) Tip 3 Parallax is expensive Beware of the promise of hardware acceleration Premature optimization is the root of all evil onscroll is broken
javascript-based full-page redraws are slow Supporting Retina displays: .thing {
background-size:200px 150px;
} Tip 4 Use CSS 3 transitions as much as possible Beware: high-res images make animations slower
Compress your images aggressively!
JPGs: save w/ low quality (like, 2 of 12 in Photoshop)
PNGs: tinypng.org Tip 5 Beware the promise of SVG's infinite scale animations Raphael.js and friends are slow
Exporting from Illustrator is not perfect (time consuming to label layers, and produces visual artifacts)
SVG image sizes aren't necessarily smaller... SVG (100kb) Indexed PNG (19kb) Questions so far? Ok, Objective-C! It's actually not that scary Ok, maybe a little OOP 101: Interfaces & Classes @interface Thing
//signatures go here

@implementation Thing
//code goes here
@end Objective-C C# interface IThing {
//signatures go here

class Thing : IThing {
//code goes here
} Class members @interface Thing
int _secret;
- (int) getSecret;
- (void) setSecret: (int) secret

@implementation Thing
- (int) getSecret {
return _secret;

- (void) setSecret: (int) secret {
_secret = secret;
@end interface IThing {

public int _secret;

public int getSecret();
public void setSecret(int secret);

class Thing : IThing {
public int getSecret() {
return _secret;

public void setSecret(int secret) {
_secret = secret;
} Objective-C C# More realistic example @implementation MyAppDelegate
- (void)applicationDidFinishLaunching:(UIApplication *)application {
UIWindow *window = [UIWindow alloc];
@end class MyAppDelegate {
public void applicationDidFinishLaunching(UIApplication application) {
UIWindow window = UIWindow.alloc();
} Objective-C C# Message passing (aka calling functions) Objective-C Thing *thing = [Thing new];
int random = [thing random: 0]; C# translation Thing thing = Thing.New();
int random = thing.random(0); If you really want to learn Objective-C Programming in Objective-C
(Stephen Kochan) iOS API Reference Search the UIKit documentation

http://bit.ly/gANtJz Animating a graph let's run through a simple example http://lhorie.github.com/web-app-demo/ Improving Performance Watch your Frame Budget! 60fps = 16ms per frame

If it takes longer to draw a single frame,
the overall animation will be choppy Decrease memory usage Don't overuse images
Use CSS3 instead of images
Compress images
Drop support for Retina

Lazy load, don't preload

Avoid libraries and frameworks
reduce dead code paths
use HTML5 form features if possible
stay close to the metal, not to the PSD Spread out animations over time
Use CSS3 transitions instead of Javascript
Consider removing smaller animations Avoid CPU/GPU overloading Delegates A delegate is a class where you can write code to handle application events: application finished loading
user changed device orientation
battery is low @interface HTML5AppDelegate : UIResponder <UIApplicationDelegate, UIWebViewDelegate>


@implementation HTML5AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

UIWindow *window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
UIWebView *webview = [[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
UIViewController *controller = [[AppController alloc] init];

window.rootViewController = controller;
controller.view = webview;
webview.delegate = self;

[window makeKeyAndVisible];


@end "Did Finish Launching With Options" event handler example MVC in UIKit UIWebView *webview MyAppController *controller UIWindow *window write code to handle webview events here
(e.g. what to do when a link is clicked) the visible window the view to display HTML5 content write code to handle logic for the view here
(e.g. what to do on orientation change) MyWebViewDelegate *myWebViewDelegate window.rootViewController = controller; controller.view = webview; webview.delegate = myWebViewDelegate; window.rootViewController = controller;
controller.view = webview;
webview.delegate = myWebViewDelegate; UIKit classes classes you create This example responds to application and web view events Initialize objects connect everything together Language Syntax Note Class methods with more than one argument look like this: - (void) doSomethingWithA: (int) a andB: (int) b {

} Note that in obj-c, every argument always has a label.
This helps avoid bugs due to parameters in the wrong order In C#, the code above would be similar to this: public void doSomethingWithAandB(a, b) {

} Another Note Typically, getter/setters like the previous example are done using @property declarations: @interface Thing
@property int secret;

@implementation Thing
@synthesize secret = _secret;
@end Deploying apps App Store - aka every app you know
Enterprise - for private apps
Web - no walled garden 3 ways to deploy: App Store / Enterprise Requires an Apple Developer account ($100/yr)
Requires a Mac and Xcode
Requires an iOS device Certificates and Provisioning Profiles Keychain Access.app > Certificate Assistant > Request a Certificate from a Certificate Authority

developer.apple.com > Provisioning Portal > upload the certificate request

Download the certificate and put it in your Keychain

In the provisioning portal, register your iOS device as a development device (under Devices) and create an App ID and a provisioning profile for that App ID

Download the provisioning profile and open it w/ Xcode

Make sure your project's bundle ID in Xcode matches what you entered when creating the App ID Deploying to the App Store itunesconnect.apple.com > Create an app

when the app status is "waiting for upload", go to Xcode

Product > Archive > Distribute > Submit to iOS App Store Deploying Enterprise apps Product > Archive > Distribute > Save for Enterprise or Ad-hoc Deployment

Drop the resulting .IPA file into iTunes and sync it to your device Enterprise apps can only be distributed to devices you registered in the Provisioning Portal Deploying on the Web No Apple Developer account required
Mac and Xcode are not required
iOS device is not required Just open the Web App in Safari and save it to Home Screen Offline Web Apps <html manifest="cache.manifest"> cache.manifest file: CACHE MANIFEST
/popup.html *make sure your web server serves .manifest files w/ the text/cache-manifest MIME type Let's just run through the bullet points quickly,
you can come back for reference when you actually need it Thanks! lhorie.blogspot.ca You can find a link to this presentation and files on GitHub on my blog
Full transcript