מדריך אומברקו

אומברקו היא מערכת ניהול תוכן. מערכת ניהול תוכן: CMS: Content Management System כשמה כן היא נועדה לנהל את התכנים באתר אינטרנט.
אומברקו היא מערכת ניהול תוכן מבוססת טכנולוגיית דוט נט של מייקרוסופט. המערכת חינמית לגמרי. אומברקו זכתה לשבחים רבים בגלל הקלות והפשטות שלה. לאחר שמבינים איך היא עובדת היא ממש קלה ואינטואיטיבית לשימוש. בנוסף, העוצמה שלה היא בכך שהיא מבוססת על הטכנולוגיות העדכניות ביותר של מייקרוסופט - Razor / MVC.
המערכת נחשבת מאוד יציבה, עם אבטחה גבוהה.
יש כאלה שכבר הגדירו את אומברקו כ - Framework לכל דבר, יותר מאשר מערכת ניהול תוכן.

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

הורדה והתקנה
את אומברקו ניתן להוריד חינם מהאתר שלהם.
http://umbraco.com/

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

ממשק משתמש וסקירה כללית

כך בגדול נראה ממשק המשתמש של אומברקו. אגב, זה הממשק הנוכחי, בקרוב תצא גרסא 7 שתכלול שינוי גראפי משמעותי של ממשק המשתמש. אבל עד אז - זה מה יש.

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

האייקון השמאלי ביותר שנקרא "Content" כשמו כן הוא, החלק של העריכת תוכן. פה כולם נמצאים - גם אלה שלא יודעים כלום על בניית אתר, כלומר מי שמעדכן את האתר.
האייקון הבא נקרא "Media" וכשמו כן הוא - החלק אליו מעלים את קבצי המדיה השונים - תמונות, וידאו, וכו'.
האייקון הבא הוא ה - "Settings". זה כבר מיועד למפתחים בלבד. בחלק הזה מגדירים את ה - Template ואת ה - Document types שעליהם נלמד בהמשך.
מימין לו יש את האייקון של ה - Developer שהוא כולל את כל הסקריפטים השונים, ומי שמשתמש ב - MVC אז את ה - Partial Views.
Partial Views אגב, מקבילים לפקדי משתמש - קבצי .ascx בדוט נט.

שני האייקונים הבאים מיועדים להגדרת משתמשים במערכת, ועוד כל מיני הרשאות והגדרות מתקדמות שעליהן תקראו כבר ברשת.

בניית אתר עם אומברקו

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

המפתח להבנת המערכת טמון בהבנת הקשר בין שלושת המרכיבים:
1. קוד ה - HTML
2. Document types
3. ממשק הוספת ועריכת התוכן

בוא נתחיל דווקא מהמרכיב השני: ה - Document types.
כמעט בכל מדריך או פוסט על אומברקו ברשת תראו שמדברים הרבה על כמה זה חשוב להבין מה זה Document types ואיך משתמשים בהם וכו' וכו'. זה נראה מסובך אבל זה לא באמת מסובך.
האמת בהתחלה גם אני לא ממש הבנתי מה זה אומר. אז הנה ההסבר הקצר והפשוט שלי: ה - Document types זה למעשה הגשר בין קוד ה - HTML לבין העורך הויזואלי - כלומר, החלק של המשתמש הסופי שעורך ומוסיף תוכן.
הרי בסופו של דבר מה עושה מערכת ניהול תוכן? מציגה תוכן מתוך בסיס נתונים בתוך תבנית html.
ניקח את דף האינטרנט הכי פשוט (שהזכרנו מקודם): דף שמציג את המשפט Hello World, ומתחתיו עוד פסקה שכתוב בה: "Welcome to my website. I'm so glad to see you here. Have fun", ונניח מתחת לזה יש תמונה גדולה של סמיילי.
באתר אינטרנט סטטי פשוט אנחנו נשתמש בתגית h1 על מנת להציג את הכותרת "Hello World" ומתחתיה נשתמש בתגית p על מנת להציג את הפסקא, ובתוכה יהיה הטקסט שלנו, ומתחת לפסקא נשתמש בתגית להצגת תמונה, כאשר ב - src יהיה קישור מוחלט או יחסי אל התמונה.
כל זה באתר סטטי.
במערכת ניהול תוכן לעומת זאת, ולא משנה אם זו אומברקו או וורדפרס הכל יראה כמעט אותו הדבר, אך עם הבדל קטן: במקום טקסט בתוך תגית הכותרת h1 יהיה קישור לבסיס הנתונים. כלומר, תהיה קריאה לבסיס הנתונים שמציגה טקסט - כלומר כותרת שמאוכסנת בבסיס הנתונים.
בתוך התגית שמציגה פסקה - כלומר תגית ה - p לא יהיה טקסט אלא שוב - תהיה קריאה לבסיס הנתונים שמציגה טקסט שמאוכסן בבסיס הנתונים.
כך גם לגבי התמונה: במקום קישור לתמונה כלשהי יהיה קישור לבסיס הנתונים שמציג תמונה שמאוכסנת בבסיס הנתונים.

אז מה הקשר ל - Doocument type???
הנה הקשר:
ברגע זה יצרנו document type חדש. זהו למעשה documnet type של דף באתר שלנו.
ה - document type מורכב מכותרת, פסקה ותמונה.
אגב, אנחנו יכולים ליצור איזה - Document type שאנחנו רוצים, ובכל מבנה שעולה בדעתינו - או, אם להיות ספציפיים - שאנחנו צריכים לצורך האתר.
בהמשך נלמד כיצד בפועל מגדירים document type במערכת, אבל כרגע יותר חשוב להבין מה זה.
אגב, document type נוסף יכול להיות למשל עבור דפי הארכיון שמציגים את רשימת הפוסטים במגאזין כלשהו. document type כזה יהיה במבנה שמציג למשל תמונה ממוזערת - מה שנקרא Thumbnail, כותרת, תקציר הפוסט, וקישור אליו. לכן, ב - document type כזה יהיה לנו ארבעה אלמנטים: תמונה, כותרת, טקסט (תקציר) וקישור.

דוגמא נוספת: נניח שאנחנו בונים אתר מתכונים. נחליט שמתכון מוצג באופן הבא:
שם המתכון - מוצג בתגית h1 בתור הכותרת הראשית בדף
תקציר על המתכון - מן הסתם יוצג כפסקא תחת התגית p
רשימת המרכיבים - תוצג בעזרת list. כלומר עם התגיות ul ו - li.
תמונה של המתכון - תוצג בעזרת התגית img כמובן, ואז המתכון עצמו.

איך יראה כזה document type?
פשוט מאוד: עבור הכותרת יהיה לנו מחרוזת כלשהי. עבור התקציר תהיה לנו תיבת טקסט. לאחר מכן רשימה, תמונה, ואז עבור הוראות ההכנה נוסיף עורך טקסט.

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

כאשר אחנו מגדירים documnet type באומברקו אנחנו למעשה מגדירים את כל הרכיבים הללו. מתוך רשימה אנחנו יכולים להוסיף ל - document type עורך טקסט, כפתור הוספת תמונה, תיבת טקסט, ועוד הרבה אלמנטים. ניתן גם להגדיר אלמנטים באופן עצמאי ודי בקלות.
כך, אם נחזור לדוגמא הראשונה של דף אינטרנט פשוט שמציג את הכותרת Hello World, מתחתיה פיסקה קצרה ואז תמונה, אז ה - document type שלנו יכלול תיבת טקסט קטנה עבור הכותרת, מה שבאומברקו נקרא "Text String", עוד תיבת טקסט עבור הפסקא שמתחת - כאשר לפסקאות שארוכות יותר מהכותרת אנחנו נשתמש במה שנקרא באומברקו "Textbox Multiple". ואלמנט נוסף יהיה ה - Media Picker שמיועד להוספת תמונה לדף.
כאשר המשתמש הסופי - זה שעורך את האתר מוסיף דפים לאתר הוא בוחר בכל פעם שהוא יוצר דף חדש מרשימת ה - document types שמוגדרים במערכת. אם הוא יבחר ליצור את הדף הפשוט שזה עתה הגדרנו, יופיעו לפניו שלוש אלמנטים: תיבת הכנסת כותרת. תיבת טקסט. וכפתור הוספת תמונה.
אם הוא למשל יבחר ליצור דף של מתכון חדש למשל - כמו שגם הגדרנו - יופיע לפניו דף עם הרכיבים שהגדרנו שזה כותרת המתכון, רשימת מרכיבים, תמונה ועורך טקסט.

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

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

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

על מנת ליצור דפי html לאתר לוחצים בממשק המשתמש על Settings: