Your SlideShare is downloading. ×
0
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Fake it 'til you make it
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Fake it 'til you make it

32,665

Published on

Diving into creating native-like applications using HTML technologies.

Diving into creating native-like applications using HTML technologies.

Published in: Technology
5 Comments
57 Likes
Statistics
Notes
  • Christopher: It's not really clear what behaviour you're running into. Could you describe what is going wrong? Try just making sure that the orientation javascript is even running by using a console.log or an alert. Once you know that's working, then make sure the CSS is correct by starting with a simple selector like whether .orientleft has a 5px green border and see what happens on orientation.

    WIth that said, iOS5 had a bug where orientation change would resize the viewport awkwardly.

    The technique is a little awkward, which the next slide actually tries to demonstrate and should probably be best just to avoid.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Compartido por Cesar
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Danny: The file is a Keynote file, made on the Mac.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Yeah, it was a great presentation. I was trying to download the slides, but it came down as an 18MB .key file. Is the file corrupted or just the wrong file extension? I tried forcing it to pdf, ppt, doc to no avail. Any help will be appreciated.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks for sharing! Very nice summary to show the native app fanatic people!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
32,665
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
580
Comments
5
Likes
57
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \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
  • \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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Fake It ‘tilYou Make Itcreating mobile apps thatfeel like native apps
    • 2. Fake It ‘tilYou Make Itcreating mobile apps thatfeel like native apps
    • 3. What I won’t betalking about.
    • 4. Who cares aboutfeature phones?
    • 5. 75% developing for iOS and Android
    • 6. Mobile Safari
    • 7. Mobile Safari Local Storage
    • 8. Mobile Safari Local Storage CSS3 features like transforms, transitions and animations
    • 9. Mobile Safari Local Storage CSS3 features like transforms, transitions and animations Geolocation
    • 10. Mobile Safari Local Storage CSS3 features like transforms, transitions and animations Geolocation HTML5 forms support for search, number and email field types.
    • 11. Mobile Safari Local Storage CSS3 features like transforms, transitions and animations Geolocation HTML5 forms support for search, number and email field types. SVG on the iPhone but not on Android or webOS
    • 12. Mobile Safari Local Storage CSS3 features like transforms, transitions and animations Geolocation HTML5 forms support for search, number and email field types. SVG on the iPhone but not on Android or webOS Access to some hardware acceleration
    • 13. Why Web over Native?
    • 14. Why Web over Native? don’t need access to device APIs
    • 15. Why Web over Native? don’t need access to device APIs most apps don’t
    • 16. Why Web over Native? don’t need access to device APIs most apps don’t need quick iteration without app store approval process
    • 17. Could be a Web App Calculators (CalcBot) Twitter Things.app Epicurious Weather Apps UI Sketcher
    • 18. 37Signals: Chalk
    • 19. 37Signals: Chalk
    • 20. http://chalk.37signals.com/
    • 21. Could be a Web App Words With Friends/Scrabble Angry Birds Canabalt Bejeweled Ramp Champ
    • 22. ConvertBot
    • 23. Demo athttp://snook.ca/testing/convertbot/
    • 24. Detecting within Browserif(window.navigator.standalone)
{

//
run
code
in
“app”
mode}
else
{

//
run
code
in
mobile
safari
mode}
    • 25. Home Screen Icon<link
rel="apple‐touch‐icon"
href="images/icon.png"><link
rel="apple‐touch‐icon"
sizes="72x72"
href="touch‐icon‐ipad.png"><link
rel="apple‐touch‐icon"
sizes="114x114"
href="touch‐icon‐iphone4.png">rel="apple‐touch‐icon‐precomposed"
    • 26. Start-up Image<link
rel="apple‐touch‐startup‐image"
href="/startup.png">
    • 27. Start-up Image No apparent support for horizontal image When loading in landscape, the status bar creates a gap to one edge of the loading screen.
    • 28. Going “Full screen”<meta
name="apple‐mobile‐web‐app‐capable"
content="yes">
    • 29. Status Bar<meta
name="apple‐mobile‐web‐app‐status‐bar‐style"
content="black">defaultblack‐translucent
    • 30. Viewport<meta
name="viewport"
content="width=device‐width"><meta
name="viewport"
content="width=590"><meta
name="viewport"
content="initial‐scale=
1.0"><meta
name="viewport"
content="initial‐scale=
2.3,
user‐scalable=no">
    • 31. Don’t Need a Framework!
    • 32. Don’t Need a Framework! DOM APIs in newer browsers quite capable
    • 33. Don’t Need a Framework! DOM APIs in newer browsers quite capable ConvertBot demo is 9k
    • 34. Don’t Need a Framework! DOM APIs in newer browsers quite capable ConvertBot demo is 9k uncompressed.
    • 35. Don’t Need a Framework! DOM APIs in newer browsers quite capable ConvertBot demo is 9k uncompressed. ungzipped.
    • 36. Don’t Need a Framework! DOM APIs in newer browsers quite capable ConvertBot demo is 9k uncompressed. ungzipped. including CSS.
    • 37. Don’t Need a Framework! DOM APIs in newer browsers quite capable ConvertBot demo is 9k uncompressed. ungzipped. including CSS. including JavaScript.
    • 38. HTML PrototypesHTMLElement.prototype.__defineSetter__("ontap",
function(func){

});document.getElementById(keypad).ontap
=
function(){


alert(just
the
keypad);};
    • 39. HTML PrototypesHTMLElement.prototype.switchClass
=
function(fromClass,
toClass){

if(this.className
==
fromClass)
{





this.className
=
toClass;

}
else
{





this.className
=
fromClass;

}
 
}document.getElementById(spinner‐shell).switchClass(collapsed,
expanded);
    • 40. querySelector(All)document.querySelector(.active);
//
one
eldocument.querySelectorAll(.active);
//
all
    • 41. But I WANT jQUERY!function
$(selector){

return
document.querySelector(selector);}
    • 42. Looping[3,2,1].forEach(function(itm,
idx){ 

console.log(itm,
idx);
//
3,0
|
2,1
|
1,2})
    • 43. Demo athttp://snook.ca/testing/convertbot/demo/
    • 44. Use CSS for UI#units
div:nth‐child(2)
{
‐webkit‐transform:rotate(45deg);
}#units
div:nth‐child(3)
{
‐webkit‐transform:rotate(90deg);
}#units
div:nth‐child(4)
{
‐webkit‐transform:rotate(135deg);
}#units
div:nth‐child(5)
{
‐webkit‐transform:rotate(180deg);
}#units
div:nth‐child(6)
{
‐webkit‐transform:rotate(225deg);
}#units
div:nth‐child(7)
{
‐webkit‐transform:rotate(270deg);
}#units
div:nth‐child(8)
{
‐webkit‐transform:rotate(315deg);
}
    • 45. Use Transitions‐webkit‐transition‐property:
‐webkit‐transform;
‐webkit‐transition‐duration:
.5s;el.style.webkitTransform
=
rotate(+pos+deg);
    • 46. Webkit Animations@‐webkit‐keyframes
{

0%
{
background‐position‐y:
0;
}

100%
{
background‐position‐y:
‐100%;
}}body
{

background‐image:url("canvas‐crumpled.jpeg");

‐webkit‐animation:
bg
3s
linear
infinite;}
    • 47. Touch vs Click Using touch events can make the app feel faster than click events. You can customize tap hightlight colour
    • 48. Touch vs Click‐webkit‐tap‐highlight‐color:rgba(200,0,0,0.4);
    • 49. Input Features<input
autocorrect="on">
<!‐‐
or
“off”
‐‐><input
placeholder="Example
Text"><input
type="email"><input
type="url"><input
type="number"><input
type="search">
    • 50. Locking Orientationwindow.addEventListener(orientationchange,
function(){

if(window.orientation
==
‐90)
{



document.getElementById(orient).className
=
orientright;

}

if(window.orientation
==
90)
{



document.getElementById(orient).className
=
orientleft;

}

if(window.orientation
==
0)
{



document.getElementById(orient).className
=
;

}},
true);
    • 51. Locking Orientation.orientleft
#shell
{
‐webkit‐transform:
rotate(‐90deg);

‐webkit‐transform‐origin:160px
160px;
}.orientright
#shell
{

‐webkit‐transform:
rotate(90deg);

‐webkit‐transform‐origin:230px
230px;
}


    • 52. Locking Orientation
    • 53. Performance Use CSS instead of JavaScript for Animations use CSS Transitions use CSS Animations use 2D and 3D transforms to force hardware acceleration
    • 54. Hardware Acceleration 2D and 3D transforms may be hardware accelerated use translateX/Y instead of top/left use rotateX(0) to push items with heavy CSS to use hardware acceleration (it’s like IE’s zoom:1 to force hasLayout)
    • 55. Wait, what about Android and webOS?
    • 56. Testing Environments
    • 57. Testing Environments Android emulator is slow
    • 58. Testing Environments Android emulator is slow webOS runs on Virtual Box
    • 59. Testing Environments Android emulator is slow webOS runs on Virtual Box
    • 60. Testing Environments Android emulator is slow webOS runs on Virtual Box Best to test on device
    • 61. Testing Environments Android emulator is slow webOS runs on Virtual Box Best to test on device For multi-touch testing, must do on the device.
    • 62. Testing Environments Android emulator is slow webOS runs on Virtual Box Best to test on device For multi-touch testing, must do on the device. pinch/zoom, rotate possible in iOS simulator
    • 63. webOS 2.1 No support for touch events has “2-finger” gesture support such as pinch/ zoom rendering issues
    • 64. Mobile Web Frameworks
    • 65. Mobile Web Frameworks jQTouch jQuery Mobile Sencha Touch
    • 66. jQTouch Targetted for iOS Makes web app feel like native app with controls and list views http://jqtouch.com/
    • 67. The Two Hour App Frameworks allow for rapid development
    • 68. Demo athttp://pushups.snook.ca/
    • 69. Local StorageJSON.parse(localStorage.getItem(pdata));localStorage.setItem(pdata,
JSON.stringify(items));
    • 70. jQuery Mobile Designed for iPhone, Android, webOS plus bada, Meego, Windows Mobile and more Includes touch and gesture support http://jquerymobile.com/
    • 71. Sencha Touch Designed for iPhone and Android Includes enhanced touch events Allows for rapid development http://www.sencha.com/products/touch/
    • 72. Going Native
    • 73. Why Native over Web? Access to native hardware and other applications Camera, Address Book, Filesystem Streamlined Revenue Process
    • 74. Meet in the middle Many apps take advantage of native WebView to load application components from remote server allows for iteration of some app components without requiring complete approval process from app store
    • 75. PhoneGap and Titanium Titanium Mobile targets iPhone and Android PhoneGap targets iPhone, Android, Palm, Symbian and Blackberry. http://www.appcelerator.com/ http://www.phonegap.com/
    • 76. “I really like my work and I try really hard.”
    • 77. @snookcahttp://snook.ca

    ×