Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fake it 'til you make it

61,787 views

Published on

Diving into creating native-like applications using HTML technologies.

Published in: Technology
  • You might get some help from ⇒ www.WritePaper.info ⇐ Success and best regards!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Did u try to use external powers for studying? Like ⇒ www.WritePaper.info ⇐ ? They helped me a lot once.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I have always found it hard to meet the requirements of being a student. Ever since my years of high school, I really have no idea what professors are looking for to give good grades. After some google searching, I found this service ⇒ www.HelpWriting.net ⇐ who helped me write my research paper. The final result was amazing, and I highly recommend ⇒ www.HelpWriting.net ⇐ to anyone in the same mindset as me.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Now there's no need for painful and expensive surgery, you can just find out the natural enlargement method on the web page here... =>> https://dwz1.cc/c0uELUMU
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I thought I was good at writing essays all through freshman and sophomore year of high school but then in my junior year I got this awful teacher (I doubt you’re reading this, but screw you Mr. Murphy) He made us write research papers or literature analysis essays that were like 15 pages long. It was ridiculous. Anyway, I found HelpWriting.net and since then I’ve been ordering term papers from this one writer. His stuff is amazing and he always finishes it super quickly. Good luck with your order!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Fake it 'til you make it

  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

×