• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 apps for iOS (and probably beyond)
 

HTML5 apps for iOS (and probably beyond)

on

  • 5,220 views

Slides for the talk I gave at SuperMondays on July 25th, 2011.

Slides for the talk I gave at SuperMondays on July 25th, 2011.

Statistics

Views

Total Views
5,220
Views on SlideShare
5,177
Embed Views
43

Actions

Likes
2
Downloads
40
Comments
0

3 Embeds 43

http://bethestart.live 39
http://virgin.cravens-digital.co.uk 3
http://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

HTML5 apps for iOS (and probably beyond) HTML5 apps for iOS (and probably beyond) Presentation Transcript

  • HTML5 APPS FOR iOS(and probably beyond)by Andi Farraka @semiBadandi@semibad.comhttp://semibad.com ;(
  • WHY HTML5 APPS?• ‘Install’ to device• Cross-platform• Perfect for small ideas• Buildapps quickly and using simple and familiar techniques• Deploy instantly from any web space• Potential for ‘dynamic’, personalised apps
  • UNFLappABLE
  • UNFLappABLEA very simple notecardapplication to help me through myfirst time speaking!Lives at unflappable.semibad.comOptimised for use on an iPhone /iPod Touch, but should work onany device
  • UNFLappABLELogin screen makes a simple AJAXcall and retrieves data from auser’s online accountWe store the JSON object locally,and from this point we can accessthe data whenever we like – evenwithout a network connection
  • UNFLappABLE
  • UNFLappABLEThe app is a single HTML page,divided into ‘views’ which the appmoves betweenPlain Old Semantic HTML!Most of what’s going on, happensin the <head>Uses jQuery, but only so I coulddevelop it quickly
  • DESIGNING ITDesign for touch – buttonsand interactive elementsare nice and bigAlso, think abouthow a user will holdthe device – the nextbutton is placed to beeasy for a user holdingin that orientation
  • DESIGNING ITUses a few image texturesfor a smaller number ofrequests, with CSS to stylethe graphical elements
  • DESIGNING ITiOS devices now support Futuratruetype @font-face Baskervilleembedding, but havea surprisingly good Gill sansselection of decent fonts Cochinavailable by default AmericanKeep it lightweight – mobile / Typewritertablet devices are a lot lesspowerful, even at the top end
  • STYLING IT UP• CSS3 – more than just rounded corners and drop shadows!• Imageless gradients – saves file size• Multiplebackgrounds – adds texture over bg gradient background: url(/img/bg.png) top center, -webkit-gradient(linear, left top, left bottom, from(#1feee7), to(#16a6a1));
  • STYLING IT UP• Multiplebox-shadow on flat textured elements – inset light colours for highlights• Use box-sizing to change the box model of an element – useful for fluid designs
  • STYLING IT UP• Uses rgba() throughout for blended colours and transform for ‘shuffling’ the menu• :nth-child cards a bit #menu li:nth-child(3n+2) { -webkit-transform: rotate(0.7deg); } #menu li:nth-child(3n+3) { -webkit-transform: rotate(-1deg); }
  • MEDIA QUERIESServe different stylesheets based ondifferent browser / device configurations
  • MEDIA QUERIES• For this app, the main stylesheet styles the app for iPhone / small screen devices• This depends on the project, but using the simplest version is a good fallback for older mobile devices• It also means that phones download use the smallest amount of bandwidth
  • MEDIA QUERIESmain.css contains a sectionwhich restyles for landscapeorientation/* landscape mode */@media only screen and(orientation:landscape) { body { xxx: xxx }}
  • MEDIA QUERIES
  • MEDIA QUERIESbig.css is used for anydevices with a higher widththan 481px – desktopbrowsers, iPads, etc.<link href=/css/big.css rel=stylesheet media=only screen and (min-device- width: 481px) />
  • HI RESOLUTION STYLESInclude using a min-device-pixels media query toserve to high-DPI devices<link href=/css/hi-res.css rel=stylesheet media=only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) />
  • HI RESOLUTION STYLESAdd double-size graphics, then shrink them to theproper size with background-sizeRemember that these extra images take up a lotof precious spacehtml { background: url(/img/bg-hi.png) top center (50%, 50%);}footer { background-image: url(/img/wood-hi.jpg); background-size: cover;}
  • APP CACHINGYour cache manifest is a simple file that tells thebrowser to cache certain filesYou specify it using a manifest attribute on youropening <html> tag:<html manifest=‘cache.manifest’>
  • APP CACHINGThe browser will need to be told how to read it,either in the .htaccess file or using a PHPwrapper file (or similar):AddType text/cache-manifest .manifestYou could quite easily write a backend script togenerate your manifest automatically
  • APP CACHINGThis one is very simple – CACHE MANIFESTit’s just a list of files that # unflappable : cache v0.17need caching (I’ve cut /css/reset.csssome out here) /css/main.css /css/big.css /css/hi-res.cssYour file must start withCACHE MANIFEST /img/icon.png /img/bg.png /img/bg-hi.png /img/brass.jpg /img/brass-hi.jpg /img/paper.jpg /img/wood.jpg /img/wood-hi.jpg
  • APP CACHINGDifficult to debug – fails silently if missingfiles or on bad syntax. Chrome dev tools areyour friend!
  • APP CACHING5MB limit on cached apps –keep an eye on file / data sizeWhen you update, you mustchange the manifest in someway – usually incrementing aversion number is best# unflappable : cache v0.946
  • LOCAL STORAGESimple key / value pairsEssentially just persistent variables, specific toyour app / domainlocalStorage items are always strings – you cansave objects into it by using JSON.stringify()This app uses localStorage to store the JSONobject with all the presentation data in
  • LOCAL STORAGETo set a localStorage variable:localStorage.setItem(‘key’, ‘value’);To retrieve a localStorage variable:localStorage.getItem(‘key’);And then delete it permanently:localStorage.removeItem(‘key’)
  • LOCAL STORAGEFor more complex data storage, you can alsouse WebSQL – client side SQL databasesCross-browser support isn’t as wide, though iOSsupports it fine
  • META TAGS & ICONSA bunch of stuff in the <head> to set upyour app!<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes" /><link rel="icon" href="/img/icon.png" /><link rel="apple-touch-icon" href="/img/apple-icon.png" /><link rel="apple-touch-icon" href="/img/apple-icon-hi.png" sizes="114x114" />
  • META TAGS & ICONSThe viewport meta tag lets you set how iOS (andother devices) will handle resizing, scrolling, andother detail<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  • META TAGS & ICONSThe apple-mobile-web-app-capable meta tag tellsiOS to not display browser chrome when a userruns this app from the home screen<meta name="apple-mobile-web-app-capable" content="yes" />
  • META TAGS & ICONSapple-mobile-web-app-status-bar-style allows youto set the status bar colourDefault is the light bar, also black or black-translucentIf you use black-translucent, your content willhave an extra 20px to fill:
  • META TAGS & ICONSIcons specified in the <head> are used on theuser’s home screen alongside native appsUse a 72px icon for iPad, and a 114px icon forRetina displays – if you have more than one,specify which is which using the sizes attribute<link rel="icon" href="/img/icon.png" /><link rel="apple-touch-icon"href="/img/apple-icon.png" /><link rel="apple-touch-icon"href="/img/apple-icon-hi.png" sizes="114x114" />
  • WHAT NEXT?This is a very simple introduction to what HTML5apps can do in the mobile spaceA surprising amount of features are exposed tomobile browsersCanvas interactivity, video, audio, geolocation,and the accelerometer are just a few thingswhich are available for your apps
  • WHAT NEXT?Dive into HTML5 (Mark Pilgrim)http://diveintohtml5.orgThe HTML5 Doctor (various)http://html5doctor.comHTML5 Poker cheat sheet (by... me)http://semibad.com/s/poker
  • THANK YOUPlease refrain from asking difficult questions@semibadandi@semibad.comhttp://semibad.com