Wix To Go

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

 

ב - wix to go, אני עוסק  בפרקטיקה של בניית אתר בוויקס בצורה נכונה. אתר נגיש, עם חוויית משתמש משולמת, אתר אוטומטי, יעיל שהקידום שלו לא רק אפשרי, אלא חלק מה-DNA שלו (שמעתי הרבה שמשתמשים ב-DNA כדי להרשים, אז הצטרפתי. מקווה שהתרשמתם). אז יאללה בואו נווקסס.

  • משה אלון

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


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


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


קוד HTML

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


קוד CSS

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


קוד Jave Script

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


ההורים בבית?

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

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


באדיטור X הסיפור דומה, רק שלא ניתן לזרוק אלמנטים לעמוד ושהוא יהיה ההורה שלהם. חייבים לעבוד עם סקשינים, שהם בעצם הסטריפ החדש (סוף סוף בוויקס הפנימו שעמוד HTML שלא מחולק לסקשינים, מתאים יותר לעידן ה- 30GB של גוגל). הסקשיין הוא ההורה הראשי וכך האלמנטים שמתווספים אליו הם הילדים שלו, אלא אם כן מדובר באלמנטים שיש להם ילדים משלהם כמו הקוטיינרים וכדו'.


אז בואו ונעשה סדר... האלמנטים שיכולים להיות הורים הם:

  • עמוד (כמעט ז"ל באדיטור X)

  • סטריפ (סקשיין באדיטור X)

  • הֶדֵר (Header)

  • פוטר

  • קונטיינרים

  • רפיטרים

  • הובר בוקס

  • לייטבוקס

  • טפסים

בנוסף או במקום האלמנטים שבאדיטור הישן באדיטור X:

  • סקשיינים (במקום סטריפים)

  • פריסות

  • מסגרות אפיון (Wireframe)

  • סטאקים


למה ההורים חשובים?

ההורים חשובים כי הם ההורים שלנו, מה השאלה. כמו שאמרתי באדיטור הישן ובייחוד באדיטור X הידיעה מי ההורה מי הילד וכן הלאה, חשובה לא רק לסידור האלמנטים על המסך, אלא גם לרספוניסביות. איך זה קשור? לא מאמין שאתם שואלים . באדיטור X מאפשרים לנו סוף סוף לעבוד במידות יחסיות ולא רק על ידי שימוש באחוזים (על יחידות מידה אכתוב פוסט נפרד). עד היום (באדיטור הישן) השתמשנו בפיקסלים להגדרות גדלים ומרחקים בין אוביקטים ובין אובייקט ביחס להורה שלו, דבר שהיה לא מדוייק וגרם להרבה בעיות של רספונסיביות. הרי 200 פיקסל בדסקטופ נראים אחרת לחלוטין במובייל. עכשיו אנחנו יכולים לעבוד באחוזים למשל, מה שאומר שאנחנו מגדירים את הגודל והמרחק ביחס להורה של האלמנט, שהוא בעצמו מוגדר ביחס למסך עליו הוא מופיע. כשאני מבקש שכפתור יהיה במרחק של 30% משמאל למסך ושיתפוס 20 אחוז משטח מסגרת ההורה שלו, זה לא משנה לי באיזה מסך מדובר, המיקום שלו תמיד יהיה יחסי. אם אני מגדיר שהתמונה תתפוס 50% מהקונטיינר שהיא בתוכו, זה לא משנה באיזה מסך יפתח העמוד, התמונה תמיד תתפוס 50% ממסגרת הקונטיינר והסקשיין יתפוס 100% מהמסך. החוכמה היא, לא רק לעבוד בשיטה יחסית, אלא לשמור על עקביות בשיטה ועל היחסים בין ההורים לילדים ולכלל המשפחה המורחבת.


התקשרות טובה

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




הורים באדיטור הישן ובאדיטור X

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


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


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

 
 
 
וויקס פוינט לוגו
Wix Point logo | בית הדיגיטל החדש שלכם
וויקס פוינט | הבית לדיגיטל שלך | Wix Point
וויקס פוינט | הבית של הדיגיטל שלך | Wix Point