doat - mobile web-app development
TRANSCRIPT
- 1.
2. 3. 4. 5. 6. ' html5test 7.
-
- local storage, application cache
-
- html5 syntax
-
- canvas
-
- css3
-
- JSON parser
-
- websockets
-
- pushState
8.
- element.addEventListener("touchstart", func, bubble);
- navigator.geolocation.getCurrentPosition(successFunc, errorFunc);
-
- *
- window.addEventListener("deviceMotion", func,bubble);
- window.addEventListener("orientationchange", func,bubble);
-
- *
- DIV { transform: rotate(45deg) }
- * iOS
9. ... 10.
11.
- :
- :
12. JS
- varul=document. createElement ( "ul" ) ; vari ; for ( i= 0 ;i< 100 ;i ++ ) { varli=document. createElement ( "li" ) ; vartext=document. createTextNode ( "feds" ) ; li. appendChild ( text ) ; ul. appendChild ( li ) ; }
http://jsperf.com/routine-js-functions / Ubuntu Core i7 Firefox 7 418,078 iPhone 4 iOS5 Safari 82,677 iPhone 3Gs iOS5 Safari 61,531 Galaxy S2 Android 2.3.3 39,201 Galaxy S Android 2.3.3 19,214 13. JS
- varul=$ ( "" ) ; vari ; for ( i = 0 ;i < 100 ;i ++ ) { varli=$ ( "
- feds" ) ; ul. append ( li ) ; }
http://jsperf.com/routine-js-functions (jquery) / Ubuntu Core i7 Firefox 7 41,289iPhone 4 iOS5 Safari 6,902 iPhone 3Gs iOS5 Safari 4,607 Galaxy S2 Android 2.3.3 9,914 Galaxy S Android 2.3.3 4,846 14. JS
- vararr=document. querySelectorAll ( "UL LI" ) ;vari ,len=arr. length ;for ( i = 0 ;i < len ;i ++ ){ arr [ i ] . className = "bar" ; }
http://jsperf.com/traversing / Ubuntu Core i7 Firefox 7 17,274 iPhone 4 iOS5 Safari 934 iPhone 3Gs iOS5 Safari 605 Galaxy S2 Android 2.3.3 1,763 Galaxy S Android 2.3.3 765 15. JS
- vararr=$ ( "UL LI" ) ;arr. each ( function () {this . className = "bar" ;}) ;
http://jsperf.com/traversing (jquery) / Ubuntu Core i7 Firefox 7 9,053 iPhone 4 iOS5 Safari 546 iPhone 3Gs iOS5 Safari 364 Galaxy S2 Android 2.3.3 1,291 Galaxy S Android 2.3.3 528 16.
-
- JS
-
- -webkitzepto / xui
-
- hardware accelerated
17.
-
- 4-6HTTP
18.
-
- CSS3
-
- (base64)
-
- appcache, local storage
-
- lazy loading
19. CSS
- http://css-tricks.com/examples/ShapesOfCSS/
- http://www.colorzilla.com/gradient-editor/
20. iOS 4.3 UIWebView Android 2.2 Android 2.3 Blackberry 6 Memory 100MB 4MB 4MB 25MB Persistent 0 4MB 4MB 25MB 21. 22.
-
- translate
23.
-
- position: fixed
-
- -webkit-overflow-scrolling:touch
-
- -JS
24.
25.
-
- (window.scrollTo(0,0
-
- standalone
44px 20px 416px 26.
-
- -JS window.devicePixelRatio
-
- -CSS " media query
- @media all and (-min-device-pixel-ratio: 2){
- }
27. 28.
-
- scaling
-
- scrolling
-
- selection
- -webkit-user-select: none;
- -webkit-touch-callout: none;
29.
-
- animated gif
-
- -css animationspin.js
30.
-
- Pull to refresh
-
- browser history
-
- deep linking
31. 32.
-
- Ubuntu
-
- Apache
-
- Aptana
-
- Virtual box
33.
- ...
- -moz
- user agent switcher
- -querystring
34.
- -iOSconsole.log
- -
- -Webkit Remote Debugging
35.
- - xcode
- - -SDK
36. ! [email_address] 37. FED [email_address] [email_address]