Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

DoAT - mobile web-app development

1 723 vues

Publié le

Publié dans : Technologie
  • Soyez le premier à commenter

DoAT - mobile web-app development

  1. 1. טיפים לפיתוח אפליקציות מובייל ווב רן בן אהרון
  2. 4. דפדפני מובייל
  3. 5. דפדפני מובייל
  4. 6. דפדפני מובייל ציון פיצ ' רים על פי html5test
  5. 7. יכולות דפדפנים מעניינות <ul><ul><li>local storage, application cache </li></ul></ul><ul><ul><li>html5 syntax </li></ul></ul><ul><ul><li>canvas </li></ul></ul><ul><ul><li>css3 </li></ul></ul><ul><ul><li>JSON parser </li></ul></ul><ul><ul><li>websockets </li></ul></ul><ul><ul><li>pushState </li></ul></ul>
  6. 8. יכולות מכשיר <ul><ul><li>אירועי מגע </li></ul></ul><ul><li>element.addEventListener(&quot;touchstart&quot;, func, bubble); </li></ul><ul><ul><li>מיקום </li></ul></ul><ul><li>navigator.geolocation.getCurrentPosition(successFunc, errorFunc); </li></ul><ul><ul><li>מצפן וחיישן תנועה * </li></ul></ul><ul><li>window.addEventListener(&quot;deviceMotion&quot;, func, bubble); </li></ul><ul><ul><li>אוריאנטציה </li></ul></ul><ul><li>window.addEventListener(&quot;orientationchange&quot;, func, bubble); </li></ul><ul><ul><li>האצת חומרה *  </li></ul></ul><ul><li>DIV { transform: rotate(45deg) } </li></ul><ul><li>* iOS בלבד כרגע </li></ul>
  7. 9. ... לעניינו להבין מגבלות לתת הרגשה של נייטיב
  8. 10. להבין את מגבלות המשאבים <ul><ul><li>כח עיבוד </li></ul></ul><ul><ul><li>רשת </li></ul></ul><ul><ul><li>זכרון </li></ul></ul>
  9. 11. כח עיבוד <ul><li>מעבד חלש מוביל ל : </li></ul><ul><li>שמתבטא ב :  </li></ul><ul><ul><li>איטיות בפרסור קוד </li></ul></ul><ul><ul><li>איטיות בהרצת קוד </li></ul></ul><ul><ul><li>איטיות בתצוגה </li></ul></ul><ul><ul><li>עיכוב בטעינת עמוד </li></ul></ul><ul><ul><li>תגובתיות לקויה </li></ul></ul><ul><ul><li>אנימציות מקרטעות </li></ul></ul>
  10. 12. JS השוואת מהירות הרצת <ul><li>var ul = document. createElement ( &quot;ul&quot; ) ;   var i ;   for ( i = 0 ; i < 100 ; i ++ ) {   var li = document. createElement ( &quot;li&quot; ) ;     var text = document. createTextNode ( &quot;feds&quot; ) ;    li. appendChild ( text ) ;    ul. appendChild ( li ) ; } </li></ul>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
  11. 13. JS השוואת מהירות הרצת <ul><li>var ul = $ ( &quot;<ul/>&quot; ) ;   var i ;   for ( i = 0 ; i < 100 ; i ++ ) {     var li = $ ( &quot;<li>feds</li>&quot; ) ;     ul. append ( li ) ;   } </li></ul>http://jsperf.com/routine-js-functions (jquery) פלטפורמה נבדקת הרצות / שניה Ubuntu Core i7 Firefox 7   41,289 iPhone 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
  12. 14. JS השוואת מהירות הרצת <ul><li>var arr = document. querySelectorAll ( &quot;UL LI&quot; ) ; var i , len = arr. length ; for ( i = 0 ; i < len ; i ++ ){   arr [ i ] . className = &quot;bar&quot; ; } </li></ul>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
  13. 15. JS השוואת מהירות הרצת <ul><li>var arr = $ ( &quot;UL LI&quot; ) ; arr. each ( function () {   this . className = &quot;bar&quot; ; }) ; </li></ul>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
  14. 16. כח עיבוד <ul><ul><li>אופטימיזציה לקוד יעיל </li></ul></ul><ul><ul><li>שימוש בנייטיב JS </li></ul></ul><ul><ul><li>ספריות יעודיות ל -webkit כמו zepto / xui </li></ul></ul><ul><ul><li>שימוש אנימציות hardware accelerated </li></ul></ul>
  15. 17. מגבלות רשת <ul><ul><li>4-6 קריאות HTTP בו זמנית </li></ul></ul><ul><ul><li>אין חלוקה בין הוסטים </li></ul></ul><ul><ul><li>לייטנסי גבוה </li></ul></ul><ul><ul><li>קישור אלחוטי לא אמין </li></ul></ul>
  16. 18. מגבלות רשת <ul><ul><li>CSS3 במקום תמונות </li></ul></ul><ul><ul><li>הטמעת קבצים (base64) </li></ul></ul><ul><ul><li>ספריית סקריפטים מצומצמת </li></ul></ul><ul><ul><li>התאמת גדלי תמונות </li></ul></ul><ul><ul><li>שמירה לזכרון המכשיר   appcache, local storage </li></ul></ul><ul><ul><li>lazy loading </li></ul></ul>
  17. 19. כלי CSS <ul><li>http://css-tricks.com/examples/ShapesOfCSS/ </li></ul><ul><li>http://www.colorzilla.com/gradient-editor/ </li></ul>
  18. 20. זכרון מטמון iOS 4.3 UIWebView Android 2.2 Android 2.3 Blackberry 6 Memory 100MB 4MB 4MB 25MB Persistent 0 4MB 4MB 25MB
  19. 21. הרגשה של נייטיב  
  20. 22. תנועה חלקה בין עמודים <ul><ul><li>הצמדות לאירועי מגע </li></ul></ul><ul><ul><li>תזוזה באמצעות translate </li></ul></ul>
  21. 23. גלילה פנימית <ul><ul><li>position: fixed </li></ul></ul><ul><ul><li>-webkit-overflow-scrolling:touch  </li></ul></ul><ul><ul><li>אלטרנטיבה ב -JS </li></ul></ul>
  22. 24. התאמה למימדי מסך <ul><ul><li>מימדים בלתי צפויים באנדרויד </li></ul></ul><ul><ul><li>שינוי אוריאנטציה </li></ul></ul>
  23. 25. מסך מלא <ul><ul><li>העלמת סרגל כתובת (window.scrollTo(0,0 </li></ul></ul><ul><ul><li>או מצב standalone </li></ul></ul>44px 20px 416px
  24. 26. התאמה ליחס פיקסלים <ul><ul><li>ניתן לגילוי ב -JS window.devicePixelRatio </li></ul></ul><ul><ul><li>וב -CSS ע &quot; י media query </li></ul></ul><ul><li>@media all and (-min-device-pixel-ratio: 2){ </li></ul><ul><li>} </li></ul>
  25. 28. ביטול התנהגויות <ul><ul><li>ביטול scaling </li></ul></ul><ul><li><meta name=&quot;viewport&quot; content=&quot;width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;&quot; /> </li></ul><ul><ul><li>ביטול scrolling </li></ul></ul><ul><li><body ontouchmove=&quot;function(e){e.preventDefault()}&quot;> </li></ul><ul><ul><li>ביטול selection </li></ul></ul><ul><li>-webkit-user-select: none; </li></ul><ul><li>-webkit-touch-callout: none; </li></ul>
  26. 29. חיווי טעינה <ul><ul><li>לא מומלץ animated gif </li></ul></ul><ul><ul><li>עדיפות ל -css animation כמו spin.js </li></ul></ul>
  27. 30. סופר אקסטרה בונוס <ul><ul><li>Pull to refresh </li></ul></ul><ul><ul><li>browser history </li></ul></ul><ul><ul><li>deep linking </li></ul></ul>
  28. 31. דיבוג  
  29. 32. סביבת הפיתוח שלנו <ul><ul><li>Ubuntu </li></ul></ul><ul><ul><li>Apache </li></ul></ul><ul><ul><li>Aptana </li></ul></ul><ul><ul><li>Virtual box </li></ul></ul>
  30. 33. עבודה נוחה מול דפדפן דסקטופ <ul><li>כי אין כמו פיירבאג ... </li></ul><ul><li>הגבילו מימדים בשביל נוחות </li></ul><ul><li>מפו אירועי עכבר לאירועי מגע </li></ul><ul><li>השתמשו ב -moz </li></ul><ul><li>השתמשו ב user agent switcher </li></ul><ul><li>הוסיפו יכולת לעקוף הגדרות מתוך ה -querystring </li></ul>
  31. 34. דיווחי לוג <ul><li>ב -iOS יש console.log </li></ul><ul><li>חסכו באורך מחרוזות - אין הרבה מקום </li></ul><ul><li>פלטרו דיווחים על פי סביבה </li></ul><ul><li>נסו את ה -Webkit Remote Debugging </li></ul>
  32. 35. הרצה במכשיר <ul><li>גלישה מקומית מהמכשיר באמצעות תוכנת פרוקסי </li></ul><ul><li>ניתן גם דרכו לנטר פעילות רשת </li></ul><ul><li>סימולטור אייפון - xcode במאק </li></ul><ul><li>אמולטור אנדרויד - מגיע עם ה -SDK </li></ul>
  33. 36. תודה ובהצלחה ! [email_address]   רן בן אהרון
  34. 37. אנחנו מחפשים FED ים מוכשרים [email_address] [email_address]   רן בן אהרון

×