תוכן עניינים

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

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

היום נלמד לבנות אתר

לא באמת, לא.

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

במילים אחרות, רכב שנראה טוב אבל אין לו מנוע - לא ממש משרת את המטרה שלו. 

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

ההיסטוריה של בניית האתרים, בקצרה 

כשהייתי ילד בן 13, קניתי לי ספרים על HTML ו-CSS וככה למדתי לבנות אתרים. אהבתי את זה. אחר כך למדתי דברים קצת יותר רציניים כמו Javascript ו-PHP שהכניסו אותי לעולם התכנות ואז בכלל עפתי ובניתי מערכת ניהול תוכן. כן, כמו רבות שקיימות בשימוש היום. לא עשיתי עם זה יותר מדי כמו שאפשר להבין, והחיים לקחו אותי לעולמות אחרים אבל האהבה למחשבים תמיד רחשה בי.

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

young boy sit next to the computer and study programming, chill atmosphere, warm light room, evening, blue hour, comic composition
כאילו הדמייה שלי יושב על המחשב בתור ילד. קצת מקנא בילד הזה שפה.

המאה ה-21 הגיעה ואיתה חברות Web למיניהן. הן באו ויצרו מערכות פשוטות לבניית אתרים, כלומר הנגישו את התהליך של בניית אתר. הן בעצם הנגישו את הקוד הבסיסי. מה שנקרא בשפת הגיקים 'No-Code Platform'. הן הפכו את המשימה של בניית אתר לעבודה הרבה פחות קשה בכך שלא צריך לדעת שום שפת תכנות ולו הפשוטה ביותר. אבל כמו בכל דבר בחיים, מעבר למוצר שאתם מייצרים, תלוי מאוד איך מייצרים אותו.

מי לא מכיר את המלכה

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

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

party of web design and development, queen of the web, 1980s photo style
המחשבה של המלכה הקודמת של האינטרנט. זאת שנתקעה בשנות ה-90.

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

פינת הידעת: מה זה קוד פתוח?

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

ואיך הקוד הפתוח עוזר לנו בחיים?

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

android toy, electric, funny commercial
זה כאילו האנדרואיד בקוד פתוח שמחוברת לכל העולם.

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

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

אז אם זה כל כך פשוט, למה אני כותב את כל זה?

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

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

illustration of the web development since the 1990s
המחשה לא מבוססת ובהחלט לא הגיונית של התפתחות האינטרנט לאורך השנים.

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

המלך החדש

אולי אני תמים, אבל Webflow תשתלט דיי בקרוב על עולם פיתוח ה-Web. בתכלס, Webflow היא מערכת No-Code אמיתית. כשתעבדו איתה לא תצטרכו לרשום שורת קוד אחת. אבל כאן נכנס היופי, כי לא סיפרתי לכם את כל מה שסיפרתי לכם לשווא. באמת יש כאן עקומת למידה.

screenshot of webflow home page
עמוד הבית של וובפלואו (Webflow)

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

וובפלואו קמה ב-2013, והביאה בשורה חדשה לעולם הווב שלקח לו זמן לקבל. בצורה פשוטה, הם באו ואמרו שפיתוח ועיצוב ווב לא יכול להתעלם מקיומם של השפות עליהן הוא בנוי, ה-HTML, CSS ו-JavaScript שהזכרנו קודם. המודל שלהם כלל מערכת שמשתמשת בכל הלוגריתמיקה של שפות התכנות, עם היכולת לעצב הכל בצורה ויזואלית - ממש כמו וורדפרס או וויקס - רק עם הרבה יותר שליטה. אולי המילה "הרבה" לא מתאימה כאן. זה יותר… טונה של שליטה. אינסוף. אינפיניטי של שליטה. חלום.

חזרה למציאות.

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

screen shot of webflow designer while designing simplewords.com
הדיזיינר של וובפלואו - Webflow Designer

ללמוד וובפלואו זה עניין קהילתי

וובפלואו היא הכוכב העולה של שוק בניית האתרים. יש לה מתחרים כמו בכל שוק אבל יש לה כוח יוצא דופן מכל כך הרבה בחינות. לא מדובר כאן רק על מערכת לפיתוח אתרים מפוזרת ברחבי האינטרנט. זו מערכת עם בית, בית שמכיל קהילה שלמה של מפתחים ומעצבים שעוזרים ונותנים כלים חדשים אחד לשני. יש ספריות שלמות של Community Libraries שאפשר להיכנס אליהן ולקבל שם כלים חינמיים לפיתוח הבא שלכם. יש לוובפלואו "אוניברסיטה" שלמה שנקראת, איך לא, Webflow University, שבה הם מלמדים את השימוש במערכת, יחד עם הבסיס של HTML ו-CSS (ג'בה סקריפט זה כבר סיפור אחר ואין טעם להיכנס אליו במיוחד לא בהתחלה). 

screenshot of webflow.com university
האוניברסיטה של פיתוח האתרים. Webflow University

לוובפלואו יש פורומים (כן, כמו אלה של פעם). שנותנים לכם תקשורת עם המקצוענים שיש שם בקהילה. אפשר לשאול שם הכל ולקבל הכוונה עד כדי לשלוח לינק לפרוייקט read-only והקהילה תעזור לאבחן את הבעיה שאתם צריכים לפתור באתר שלכם.

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

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

screenshot of webflow.com forums
הפורומים של וובפלואו - Webflow Forums

לסיכום

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

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

נ.ב,

לוובפלואו יש כוונות להצטרף למהפת ה-AI, והדבר הזה כבר בפיתוח.

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

זה מה שהופך חברה למצליחה.