Mobile Drupal - סיכום הדרכה

מצ"ב סיכום שכתבתי בהדרכה שהתקיימה ביום שלישי בלינוויט בנושא Mobile Drupal. עם קצת טיפים שלי והשוואה לאומגה.

אמנון

SCSS / SASS – הרחבות של CSS

SCSS ו-SASS הם שני תחבירים שונים בעלי אותה סמנטיקה.

• SCSS – יותר דומה ל-CSS רגיל, ולכן נוח יותר לעבודה. צחי מעדיף אותו.
• SASS – ללא נקודה פסיק בסוף שורה. האינדנציה עושה את העבודה.

יתרונות השימוש בתחביר החדש:

• התועלת העיקרית היא לא מבחינת גודל הקובץ – אלא קודם כל מבחינת הקריאות.
• אם אנחנו מדברים על css3 עם vendor prexies זה מאד עוזר – מטרתנו להקל על העבודה של מי שעובד עם ה-CSS. החידוש הוא באופן הבנייה של ה-CSS. נועד להקל על ה-Themer והפלט הוא CSS רגיל.
• הקוד הופך להרבה יותר מסודר ונוח לתחזוקה. מצד שני חשוב להיזהר עם הקינון ולא להגזים, כי זה יוצר בסוף קוד מנופח.

החסרונות:

• צריך לקמפל.
• צריך firebug (אבל יש FireSASS, תוסף לפיירבג שמציג את קוד המקור שלפני הקימפול).

Variables

התכונה אולי הכי חשובה. אפשר להגדיר משתנים ולהשתמש בהם לאורך הקובץ שלנו.

Mixins

זהו מקרו – גוש של CSS  שאפשר להשתמש בו שוב ושוב לאורך הקוד שלי באתר.

ארגומנטים

הכח הגדול של Mixins הוא כשמעבירים להם ארגומנטים.

פעולות מספריות

כפל,חילוק, חיסור, חיבור, מודולו

קומפאס

הוא היתרון הכי גדול של SASS – קהילה עצומה של Mixins ופונקציות, שמאפשרת לנו לחסוך הרבה מאד שעות של עבודה. והחסרון – שאתה משתמש של עיור בדברים שאנשים כתבו בשבילך ולא בדיוק צפוי מה שהם עושים. אבל יש שם דברים מאד חזקים.

אחד הדברים הכי חזקים בקומפאס זה CSS Sprits. אתה קורא לתמונות כרגיל וקומפאס הופך אותם ל-sprites באופן אוטומטי. חוסך המון קריאות לשרת וטוען אותן באופן אוטומטי. משפר ביצועים.

בגדול - מטרתנו שהעיצוב יהיה בעיצוב. להכניס כמה שפחות תכתיבים עיצוביים לתוך classes של html בקוד. לא להכניס grid3 לתוך ה-html ולא לקרוא לאלמנט sidebar כי במסך קטן הוא יצוף למטה.

דיבגר

הקומפיילר יודע להוסיף debug info בתוך ה-CSS ואז התוסף של הפיירפוקס, FireSASS, יודע להציג את קוד המקור של ה-SASS בתוך הפיירבאג.

תכונות SASSON

ששון היא ערכת בסיס מתקדמת לעיצוב.

• מכילה בתוכה קומפיילר SASS מבוסס PHP.
  הקומפיילר המקורי של SASS – מבוסס רובי. צריך שיהיה רובי מותקן. אנחנו יצרנו כאן בתוך ששון port של הקומפיילר ל-php. בדרך כלל זה מספיק. אם זה לא מספיק, אפשר להשתמש בקומפיילר המקורי של רובי (למשל הספרייטים ייתכן שנתמכים רק בקומפיילר המקורי של ruby).
• Mobile friendly – כלומר responsive מהקופסה. גריד מבוסס אחוזים. אחד הטיפים הכי שימושיים – לשים max-width:100% כדי שזה אף פעם לא יגלוש מרוחב האב. וגם את האבא מגדירים באחוזים...
• ששון מכניס אוטומטית את תג viewport כי אחרת המכשיר הנייד יציג אוטומטית את הדף כמו מחשב רגיל ויעשה zoom out. אם לא נשים viewport, התגים לא יעבדו.
• ששון מאפשרת בחירה בין mobile first ל-desktop first ואינה מאלצת כיוון אחד.
• תפריטים רספונסיביים: במסכים קטנים, מומלץ להפוך תפריט ל-selection list בעזרת javascript. נראה מצויין.
• Modernizer
• מבחינת סטייל, את הגריד עושים באמצעות המיקסים, ב-CSS ולא ב-HTML. יוצא HTML הרבה יותר רזה.
• אפשר ליצור sub-theme חדש של ששון ולהתקין אותו במהירות באמצעות drush:

Drush dl sasson

Drush cc all

Drush sns "My theme" // creates a sasson sub-theme

Drush en mytheme // enable the new theme

Drush vset theme_default mytheme // Set the default theme to my theme

• אפשר להגדיר הגדרה בקובץ ה-info, שתכריח קומפילציה מחדש של css בכל טעינת עמוד.
• יש כאן תמיכה בגוגל webfonts.
• קובץ sasson-rtl.css מכיל בדיוק שורה אחת
• @flip {file: "sasson.scss"};
• חוסך לא מעט עבודה.
• אפשר להוסיף אחרי השורה הזו כללים אחרים.
• החלק הכי מגניב של "sasson" הוא התמיכה בעברית – שיש מצב של "Hebrew first". לפתח אתים עבריים ואח"כ לעשות קובץ ltr בשביל שפות LTR (כמו שדרופל מחפש תמיד RTL. יפה).
• File watcher – ששון יודעת לקחת רשימת קבצים, ולבדוק מתי הם משתנים. ברגע שקובץ כזה משתנה, הדפדפן מתרפרש.

Omega או Sasson

• לדעת צחי אומגה מנסה לעשות ב-UI  שלה הרבה יותר מדי
• יש דברים שצריך פשוט לבנות בקוד \ בתוך ה-SCSS ולא לעשות להם hardcode בעיצוב.

פיתוח אתרים למובייל – באיזה גישה לבחור?

אפשרויות קיימות:

Native App

בשפת התכנות המקורית של המכשיר. צריך לכתוב בנפרד לכל מכשיר. עלויות יקרות.

Hybrid App

יש לה כמעט את כל היכולות של Native App. חלק מממשק המשתמש של האפליקציה בנוי ב-HTML, CSS  וג'אוהסקריפט ואז אורזים אותה בנפרד לכל פלטפורמה ולכן עלויות הפיתוח קצת נמוכות יותר. יש כאן מקום לדרופל דרך שימוש בפריימוורקים כמו Sencha, PhoneGap  ואחרות שידברו עם בסיס הנתונים של דרופל כפי שנחשף על ידי מודול Services.

Mobile Site

אמנם אתר נפרד למכשירים ניידים. אבל עדיין יותר פשוט מאשר לכתוב אפליקציה נפרדת לכל מכשיר. יש עיצובים כאלו לדרופל, אך לא רבים. מצד שני, יש עיצובים רבים שהם לא דרופל אז אולי שווה לבדוק. עם כלים כמו Mobile Tools and Mobile Theme  אפשר להעביר גולשים ממכשירים ניידים לדומיין שונה שבו תהיה להם חוויה מתאימה. יש גם מספר ערכות עיצוב דרופליות ייעודיות, לא רבות, שייעודיות למכשירים ניידים: Mobile jQuery Theme, Mobile, Fusion Mobile. יש ערכות רבות אחרות לא לדרופל שאפשר לשקול את הסבתן לדרופל.

Responsive Site

כאן נמצאת sasson. היתרון מאד ברור – אנחנו מפתחים אתר אחד בלבד, באופן שייראה טוב בכל פלטפורמה. אנו לא צריכים לפתח אתר נפרד לכל פלטפורמה. זה היתרון שבו דרופל ובמיוחד ששון נמצאים ביתרון גדול. אמנם, כדי לבדוק את האתר עדיין נצטרך להשתמש בכלים שמדמים את הפלטפורמות השונות אבל הפיתוח יהיה אחד ויחיד. ערכת עיצוב רספונסיבית טובה אמורה להיבנות בצורה הבאה:

• שאילתות מדיה – media queries.
• Viewport meta tag, שימנע מהמכשיר הנייד לדחוס את האתר כאילו הוא אתר דסקטופ.
• מבנה Content first - חשוב ביותר בערכה שאמורה להיראות טוב גם על מובייל. הכוונה שאיזור התוכן יהיה מיד אחרי ה-header, לפני ה-sidebar.
• עימוד fluid (או מספר רוחבים קבועים).
• תפריטים מגיבים לרוחב הדף – Responsive menus.

Mobile Fist

היום הכיוון הוא לבנות עיצוב תחילה למובייל ואחר כך להוסיף את קבצי ה-CSS  המתאימים לדסקטופ. הסיבות ברורות: Mobile מתרחב בצורה אקספוננציאלית ויותר. יש מדינות, במיוחד מדינות עולם שלישי, שבהן אנשים מחזיקים יותר mobile מאשר דסקטופ. חשוב להתמקד כאן בתוכן – שהתוכן יעבוד כמו שצריך. ואח"כ להוסיף את כל השאר.

האם אפשר לגרום למעצבים לאמץ את התפיסה של mobile first?  האתגר הוא אתגר קודם כל אפיוני. מעצבים ולקוחות עדיין רגילים לחשוב דסקטופ. ואנחנו בתור אנשי דרופל בונים קודם כל אתרים גדולים ורחבים לדסקטופ ורק אח"כ מתאימים אותם למובייל – זה סדר העבודה הרגיל ואלו הדרישות שמגיעות אלינו.

כדי לבנות אתר טוב למובייל צריך אתר שייראה טוב גם בתאוריה בלי CSS  בכלל ורק אח"כ להוסיף את הדברים הנוספים. יש דפדפנים שלא תומכים ב-CSS.

Progressive Enhancement

העולם נמצא במעבר מ-graceful degradation – כלומר להתחיל מהדסקטופ ולהוריד דברים, אל progressive enhancement – כלומר להתחיל מהמובייל ולהוסיף דברים. כלומר אנו נמצאים במעבר מחשיבה שלילית לחשיבה חיובית.

קישורים וטיפים

• אתר הדמו של ששון: http://sasson.rtl-themes.co.il . בתפריט העליון יש קישור למצגת של SASS. היא עובדת רק עם דפדפנים מבוססי Webkit (כלומר רק עם גוגל כרום ודומיו).
• צחי עובד עם עורך טקסט sublime text 2 – חביב ביותר. יש לו פלאג-אין בשם zen coding שמאפשר לחסוך הרבה זמן בבניית HTML  ידנית.  
• אתר HTML5 Boilerplate – אוסף קטעי קוד שאדם אמור להשתמש בהם כשרוצה לכתוב אפליקציה שתרוץ בדפדפן. Boilerplate.css הוא ה-Css Reset שמשמש את sasson.
• יש מתא תג של IE שאפשר לשים ב-HEADER שמבקש מ-IE  להוריד פלאג-אין שמתקין להם גוגל כרום באופן אוטומטי. התג זמין כהרחבה של IE ו-SASSON מאפשרת לשים אותו.
• אם רוצים להשתמש ב-SCSS עם תבניות אחרות שאינן SASSON, המודול הכי יציב כרגע זה SASSY. אבל גם זה בערבון מוגבל כי כל המודולים קוראים לקומפיילר ה-SCSS של PHP. לתכונות מתקדמות כדאי להפעיל ישירות את הקומפיילר של RUBY. יש תכנון שבגירסה הבאה של SASSON הוא יקרא לקומפיילר של רובי באופן אוטומטי אם הוא מותקן.
• כדאי להסתכל גם במצגת משבוע שעבר לגבי responsive theming באומגה: http://developmentgeeks.com/blog/creating-responsive-mobile-first-drupal-themes