נרגש מאוד לכתוב את הפוסט הזה שמספר על האתר החדש של משחק השבת!
את משחק השבת התחלנו בשנת 2018 עם תכנון לשנה אחת של משחקים.
היום אחרי ארבע שנים, ומאות משחקים אנחנו חוגגים את השקת האתר.
סיפורו של האתר של משחק השבת
טעות רצינית
האתר המקורי של משחק השבת נוצר מתבנית של עמוד נחיתה שעבדנו איתו בזמן שהוצאנו את המשחק הראשון.
ההשקעה במשחקים עצמם לקחה כמה שעות בכל שבוע. ובאופן כללי לא השקעתי המון באתר שמציג אותם.
טעות רצינית שגרמה לאתר להראות לא טוב במשך שנים רבות.
הטעות הייתה משמעותית, אבל נגררה ונמשכה כי ככל שהאתר לא נראה טוב, הוא עבד מצוין בגוגל.
צברנו עוד ועוד כניסות והפניות מחיפושים, וראיתי שהאתר למרות הנראות שלו עובד.
הדילמה
לשנות אתר שעובד בגוגל בצורה טובה זו החלטה משמעותית, ומרגע שהבנתי שהאתר עובד. עמדה למולי הדילמה האם לשנות את האתר ואולי להפסיד את החיפושים, או להשאיר אותו כמו שהוא ולהפסיד את האנשים.
הפתרון
ההחלטה היתה לעשות עיצוב חדש ולהטמיע אותו לאט לאט ובזהירות.
וכמו בכל פעם שיש לבית תוכנה משימה שקשורה אליו, לא הצלחנו למצוא זמן לבנות את האתר כמו שצריך.
והעבודה על האתר החדש נמשכה מעל שנה וחצי…
לאחר שראינו שהאתר של משחק השבת בתמונות עובד מאוד יפה. גם בגוגל וגם מבחינת בני האדם.
והבנו שאנחנו שולחים אנשים כל הזמן לאתר עם התמונות, כי הוא יפה יותר ומרשים יותר וברור יותר.
החלטתי, לקראת סיום השנה הרביעית של משחק השבת, לנסות ולשים דגש על השלמת האתר.
האתר החדש באויר!
ואכן בשעה טובה זכינו היום להעלות את האתר של משחק השבת.
קצת מאחורי הקלעים…
משחק השבת פותח ב-HTML5 ובטכנולוגיה שאנחנו מאוד אוהבים ומפתחים איתה המון משחקים (קנבס על גבי HTML5), לעצמנו וללקוחות.
אבל את האתר עצמו פיתחנו ב-HTML, כיוון שהמנוע של גוגל יכול לקרוא טקסטים ותמונות מה-HTML רגיל בצורה טבעית וקלה יותר.
לכבוד האתר החדש ועל מנת לבנות דף יפה, ואחרי שכבר הוצאנו כמה מאות משחקים, היה צורך ליצור תמונות שיוצגו באתר החדש (בהתאם לעיצוב שבחרנו).
הדרך הראשונה היתה באופן ידני לחתוך וליצור תמונה מכל משחק באמצעות צילום מסך.
אנחנו בחרנו באפשרות השניה…
קצת אוטומציה
כתבנו כלי שרץ באופן מקומי, ויוצר בעצמו את העמוד השלם של האתר החדש, מצלם צילומי מסך מתוך המשחקים עצמם, מסדר אותם לפי קטגוריות, ומזין את כל התכנים שהם צריכים באופן אוטומטי.
המנגנון שכתבנו באמצעות NODEJS רץ על רשימה של המשחק הקיימים, וטוען את קבצי ה-JSON שמכילים את המידע שממנו נבנה כל משחק.
מכל קובץ JSON הקוד אוסף את הנתונים שרלוונטים לאתר (שם המשחק, הסברים, כותרות, איזה ספר, איזה פרשה ועוד). ומרכיב את עמוד ה-HTML שמציג את האתר החדש.
ומה עם התמונות?
כלי האוטומציה שכתבנו פותח כל משחק בפני עצמו, יוצר לו צילום מסך בשלושה גדלים, ושומר אותם בתקיה מיוחדת שממנה האתר יטען את התמונות.
סוגרים את כל הקבצים שצריך!
בנוסף על פי תבנית נוצרים כמה קבצים חשובים שהאתר משתמש בהם.
קובץ HTML – הקובץ המרכזי שהוא בעצם התצוגה של האתר. ומכיל את כל הטקסטים, התמונות, קבצי ה-JS + CSS. – הקובץ הזה נבנה על בסיס תבנית בסיסית של קובץ HTML.
קובץ SITEXML – קובץ בסיסי שאומר לגוגל איזה דפים יש באתר, גוגל בודק את קובץ הסייטמפ באופן עצמאי, וניתן גם באמצעות גוגל קונסול לדחוף את הקובץ לבדיקה. (בנוסף לחיפושים והזחלן הרגיל של גוגל)
קובץ JSON – נוצר קובץ JSON שמשמש את השותפים שלנו ליצירת עמודי משחקים עם המשחקים של משחק, השבת באופן אוטומטי, האתר קוראים את הקובץ (קצת דומה לRSS) ובונים עמודי משחקים שלמים אצלהם באתר.
קבצי התמונות – כמו שאמרנו נוצרים לכל משחק שלושה קבצי תמונות שנשמרים בתקיה, ונטענים לאתר.
כל הקבצים שנוצרים עולים אל השרת ומהווים את האתר של משחק השבת.
היתרונות של האתר החדש של משחק השבת
לאתר החדש יש יתרון מרכזי והוא הנראות הנהדרת שלו.
בנוסף ניתן לסנן את המשחקים לפי פרשות, או נושאים.
הוספנו מנגנון חיפוש שמאפשר לחפש פרשה לפי שם וטקסט.
והוספנו כמה אפשרויות חמודות, שאחת מהן היא אפשרות לשחק משחק "מוגרל" שהאתר בוחר.
ואפשרויות נוספות הן סינונים ופילטרים שונים על המשחקים שבאתר.
נראות חדשה תוכן קיים
על מנת לשמר את היתרונות שהיו בחיפוש גוגל באתר הקודם, שמרנו על הטקסטים ועל המבנה של האתר. וכל זה עם נראות חדשה שממש משמחת אותנו (ואנחנו מקווים שגם את הגולשים)
נשמח מאוד לקבל מכם פידבק, הארות ושיפורים שכדאי לעשות באתר החדש.
צרו אתנו קשר וספרו לנו מה חשבתם על האתר החדש.
קראו על פוסטים שכתבנו בעבר על משחק השבת, ותוכלו להרגיש את הסיפור של האתר הנפלא למשחקים לפרשת שבוע.
