מדריך - יצירת תבנית ג'ומלה מקובץ גרפי קיים 

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

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

כלי העבודה דרושים/מומלצים:

1.      תוכנת גרפיקה המאפשרת לנהל שכבות ולגזור פרוסות (slices) ולייצא אותן כגון: Fireworks, Image ready, GIMP,Photoshop
2.      תוכנת עריכת html/css כגון Dreamweaver אולם אפשר גם לעבוד עם notepad פשוט או Notepad++ החינמי והמצוין.
3.      שרת מקומי כגון WAMP
4.      התקנת ג'ומלה על השרת המקומי

טוב, אחרי שסיימנו עם המנהלות, אפשר להתחיל:

שלב א' - גזירת הגרפיקה מה-PSD

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

2.      במידה ומדובר בקובץ PSD, ב-photoshop ישנה אפשרות  לבצע שמירה מותאמת לתוצרי אינטרנט באמצעות save for web. זה מאפשר לנו לשמור את הגרפיקה בפורמט PNG הכולל שקיפות.

3.      להלן גרסאות העיצוב שאני נוהג לשמור:

א.      גרסה מלאה עם טקסט (לטובת רפרנס של התוצר הסופי אליו אנו שואפים  ולכן אפשר כ-jpg באיכות גבוהה)
ב.      גרסה נקייה מטקסט
ג.       גרסה עם רקע שקוף כדי שנוכל אח"כ לגזור ממנה את החלקים הדרושים (כגון מודולים עם פינות מעוגלות) ללא הרקע של כל העיצוב
ד.      גרסה הכוללת את הרקעים בלבד (במידה והרקע הוא גרפי ולא צבע אחיד שנוכל להגדיר אח"כ בקלות באמצעות CSS)

4.      אופן הביצוע של שמירת גרסאות שונות הוא פשוט לכבות בכל פעם שכבה שלא רוצים להציג (כמו רקע למשל) ולשמור בפורמט png עם שקיפות.

5.      כעת נעבור לתוכנת גרפיקה המאפשר יצירת slices (להלן: "פרוסות"). לטובת העניין, יש מספר תוכנות שיכולות לסייע: כאמור,  Fireworks, Image ready, GIMP.

6.      להלן מדריך (מעט ישן אך עדיין אפקטיבי) המסביר כיצד ליצור ולייצא פרוסות באמצעות תוכנת fireworks: http://www.wise-women.org/tutorials/fw1/

7.      שיקול שיש לקחת בעת ייצוא הפרוסה לגרפיקה הוא באיזה פורמט נרצה לשמור את הפרוסה. השיקולים הם משקל הקובץ מצד אחד, האיכות שלו מהצד השני והפונקציונליות שלו (שקיפות לדוג') מהצד השלישי: תמונות וגרפיקות מורכבות בהן אין חשיבות לשקיפות נרצה לשמור כ-jpg. גרפיקות פשוטות הכוללות 2-3 צבעים בסיסיים, נוכל לשמור כ-png8 שגם מאפשר שקיפות, או gif, וגרפיקות מורכבות שלהן גם דרושה שקיפות נוכל לשמור ב-png32.

8.      נפתח את הגרסה הנקייה ונחלק את העיצוב לאזורים השונים באמצעות slices.

9.      גם אם לא נייצא את כל הגרפיקות מהפרוסות, הפרוסות יקלו עלינו להגדיר את מבנה העיצוב בשלב מאוחר יותר בהגדרת ה-css.

שלב ב' - יצירת קבצי התבנית

1.      אחרי שהגדרנו את המבנה של העיצוב, נעבור ליצירת קבצי התבנית. כל תבנית נמצאת בתיקייה משלה ומבוססת על שלושת המרכיבים הבאים: קובץ index.php, קובץ template.css שנמצא בתיקיית משנה בשם css וקובץ templateDetails.xml. מעבר לזה תהיה לנו גם תיקיית images בה נשמור את הגרפיקות הספציפיות של התבנית.

2.      במידה ולטובת יצירת התבנית החדשה, שכפלנו תבנית קיימת כדי לקצר תהליכים, חשוב לבצע את הצעדים הבאים:

א.      לשנות ב-index.php  את ההפניה לקובץ ה-css (כי לאחר השכפול הוא עדיין מפנה לקובץ של העיצוב הקודם) 
ב.      בקובץ ה-css נמחק את החלק הראשון שעוסק בהגדרת העיצוב הספציפי ונשאיר רק את הגדרות ה-joomla הכלליות שיש בהמשך.
ג.       בקובץ ה-xml נשנה את שם התבנית לשם החדש.

3.      כעת נעבור להמרת העיצוב. היום כבר לא נעשה שימוש בגישה הטבלאית לעיצוב אלא בשיטת ה-css ולכן, כדי לדעת כיצד ליצור עיצוב מבוסס css, להלן מדריך מפורט וידידותי בנושא: http://www.subcide.com/tutorials/csslayout/index.aspx

4.      אני נוהג ליצור שתי תבניות לכל אתר: תבנית לדף הראשי ותבנית לדפים הפנימיים. אמנם ג'ומלה מאפשרת הגדרת תצוגות שונות בהתאם למאפיין הדף (ראו מדריך זה בנושא class suffix באתר הראשי של ג'ומלה) אולם אני מעדיף את ההפרדה הקשיחה הזו כדי למנוע תקלות תפעוליות מאוחר יותר ולפשט את אופן ניהול  האתר.

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

6.      לפני שמתחילים ביצירת התבנית, חשוב לתכנן את המבנה שאנו רוצים ליצור, כלומר איזה div יכיל אילו divים אחרים, ומה אמור להיות העיצוב של כל div. יכולת תכנון טובה נרכשת עם הזמן ואחרי לא מעט ניסוי וטעייה אז לא להירתע אם בשלב ראשון לא ממש תופסים את זה. כדי מעט לסייע, בשלב זה הייתי מציע להבחין ולהגדיר איזה רכיב אחראי על הגדרת העיצוב של איזה חלק. לטובת ההסבר, חילקתי את הרכיבים העיצוביים שניצור ל-3 קטגוריות:

א.      מרכיבי עיצוב כלליים של התבנית - רקעים, לוגו ואזור ה-header  וכיוב'. חלקים אלו מפורטים בחלק הראשון של קובץ ה-css (הגדרות עיצוביות ספציפיות של התבנית)
ב.      אלמנטים של ג'ומלה (לדוגמא כותרות דפים או הגדרות עיצוביות של מודולים) - ההגדרות של אלמנטים אלו נמצאות בחלק השני של קובץ ה-css (הגדרות עיצוב כלליות של ג'ומלה)
ג.       רכיבים ספציפיים בעלי הגדרות עיצוביות נפרדות - לדוגמא, תפריט עליון דינאמי אשר העיצוב שלו נקבע על ידי קובץ css עצמאי שלו או מודול slideshow המציג תמונות מתחלפות.

אחרי שהבנו איזה חלק בעיצוב יישלט על ידי איזה חלק בקובץ ה-css הכללי, מהם הדברים שיישלטו על-ידי קבצי css חיצוניים ואילו אלמנטים עיצוביים אנחנו נכניס "ידנית" באמצעות מערכת ניהול התוכן לאתר, ניתן להתקדם.

7.      יוצרים ב-index.php את המבנה הכללי שאנחנו רוצים ואח"כ עוברים ל-css כדי להגדיר את המידות, הרקעים והתכונות של כל div. בשלב זה אנחנו נמצא את עצמנו חוזרים לקובץ הגרפיקה המחולק לפרוסות כדי להבין מהם המימדים של כל div ואיזה רקע אמור להיות לו.

8.      אחרי שיצרנו את המסגרת הכללית, נכניס הפניות למודולים השונים שאנחנו רוצים בתוך ה-divים שיצרנו, לדוגמא, ב-div של התפריט העליון, נכניס את ההפנייה:

"jdoc:include type="modules" name="user3" se="xhtml 

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

א.      תפריט עליון - מיקום user3
ב.      מודול אודות בדף הבית - מיקום user1
ג.       מודול גרפיקה מרכזית (slideshow כזה או אחר) - user4
ד.      מודול חדשות ועדכונים - updates
ה.      דפים פנימיים או בדפים ראשיים עם מודולים בימין ושמאל  - מיקום right/left
ו.        שורת קרדיט וקישורים בחלק התחתון - bottom
ז.       גרפיקת Header בדפים פנימיים - top
ח.      מודול רכיב פונקציונאלי עליון (כמו החלפת שפה) - user9
ט.      מודול מידע משני בדף הבית (כמו spotlight) - בדר"כ user2 אבל לא מחייב

בנוסף, אפשר ליצור איזה שם מודול שרוצים (לדוגמא "clients" ולהגדיר אותו תחת positions בקובץ ה-xml. 

בדף הבית, על פי רוב, אני מעדיף להימנע מאפשרות הצגת דפי תוכן ומגדיר בו מודולים בלבד. הסיבה שאני מעדיף לא לאפשר פרסום דפי תוכן בדף הבית היא שברוב אתרי התדמית, אין צורך בהצגת דפי תוכן מלאים אלא קישורים לאזורים פנימיים. יתרה מזאת, משתמש יכול בטעות לפרסם עמוד תוכן בדף הבית (front page - enabled) וזה יכול לחרבש את העיצוב (תמונה גדולה שדוחפת את כל העיצוב ועוד מיני הברקות שנתקלתי בהן). לכן, בדף הבית יש לנו רק מודולים (תוכניים או פונקציונליים).

שלב ג' - בדיקה מקומית של התבנית ועדכון הגדרות ה-css של ג'ומלה

1.      התקנת מערכת ג'ומלה מקומית (WAMP)

2.      באמצעות Wamp  אני נכנס לממשק האחורי של ג'ומלה ומגדיר  את התבנית החדשה כתבנית ה-default. כרגע אני יכול לראות אם מה שיצרתי פחות או יותר עובד.  זה הזמן גם לתיקונים ראשונים כי עד עכשיו לא ממש יכולתי לראות האם התבנית עובדת בפועל.

3.      זה השלב בו אני מכניס טקסטים לדוגמא ורואה אילו שינויים אני צריך לבצע בהגדרות ה-css של ג'ומלה עצמה כדי שזה יתאים לעיצוב (גודל/פונט/צבע כותרות, טקסטים פנימיים, עיצוב התפריט העליון וכו').

4.      אחרי שבדקתי את התבנית של עמוד הבית וראיתי שהיא מתפקדת באופן טוב, אני משכפל אותה ויוצר ממנה תבנית לדפים הפנימיים. בדר"כ, במקום בוא הייתה הגרפיקה המרכזית בדף הבית, נכניס את הקוד - "jdoc:include type="component   מה שיאפשר לנו הצגה של דפי התוכן והקופוננטות באתר.

שלב ד' - העלאת האתר: העלאת התבנית לרשת, ליטושי css

1.      התקנת מערכת ג'ומלה ברשת, אם באמצעות רכיב התקנה אוטומטי כמו fantastico installatron או באופן ידני (עדיף), לטובת אתרים בעברית, חשוב שבסיס הנתונים יהיה בקידוד utf-8.

2.      העלאת תיקיות התבניות שיצרנו לתיקיית templates של מערכת הג'ומלה שהתקנו.

3.      הגדרת תבנית דף הבית עבור דף הבית (לפי לחצן התפריט שלו) ותבנית default לכל היתר

4.      כעת כבר אפשר להזין תכנים ראשונים כדי שנוכל לראות מה יש לתקן. את התיקונים בשלב זה אפשר לבצע ישירות על גבי קובץ ה-css באמצעות FTP ועורך טקסט (אני אישית עובד עם filezilla ועם notepad++, שתיהן תוכנות קוד פתוח).

5.      כאשר מבצעים תיקונים בתבנית חשוב לבצע 2 דברים:

א.                          לשמור גיבוי - ליצור בתיקיית התבנית תיקייה בשם  bu, שם נשמור גיבוי אחרון של העיצוב. בכל מקרה, לפני שמעלים קובץ עדכני יותר לתיקיית התבנית (css או php), להעביר את הקובץ הקיים לתיקיית הגיבוי כך שתמיד יש למה לחזור.
ב.                          אחרי שסיימנו לעדכן קובץ באמצעות ftp, להחליף את הקובץ המקומי שיש לנו בזה העדכני והמרוחק (כבר היו לי מקרים שאחרי שתיקנתי משהו online, עבדתי על הגרסה הלוקלית ודרסתי את השינויים שעשיתי online)

6.      התקנות מודולים וקומפוננטות שדרושות באתר ולא קיימות בהתקנה הבסיסית ועדכון העיצוב שלהם לפי הצורך.

שלב ה' - תפעול האתר: הזנת התכנים

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

http://gisight.co.il/tutorials.html

מקווה שהמדריך הזה יסייע לכם בהבנת תהליך היצירה של אתר מבוסס ג'ומלה ואשמח לשמוע הערות והארות לגביו.