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

1. המובילה בעולם - Wordpress

כמו שכולם בטח יודעים וורדפרס (Wordpress) הינה מערכת בניית אתרים וניהול תוכן הפופולארית בעולם.

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

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

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

ההבדל בין WORDPRESS.ORG ל- WORDPRESS.COM:

:::

WORDPRESS.COM: פשוט לבנות אתר/בלוג

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

אישי ב-14₪ לחודש
פרימיום ב- 28₪ לחודש
עיסקי ב- 89₪ לחודש
חנות אונליין ב- 89₪ לחודש
אחמים (VIP) ב- 160₪ לחודש
כדי להבין לעומק מה המשמעות של הקמת אתר בוורדספרס קודם נציין בחלק הבא את היתרונות והחסרונות של הפלטפורמה.

חסרונות WORDPRESS.COM

הדומיין לא שייך לכם: בתוכנית החינמית הדומיין של האתר שלכם הוא דומיין של WORDPREES, כלומר הכתובת של האתר שלכם תהיה your-web-name.wordpress.com. בשביל לקבל כתובת כזו your-web-name.com תצטרכו לשדרג לאחת מהתוכניות בתשלום.
מספר תוספים ותבניות מוגבלות מהמאגר העצום של וורדפרס: תוכלו לבחור רק מהתבניות והתוספים שקיימים במאגר של וורדפרס, ללא אפשרות להעלות תבניות ממקור חיצוני, כך יש לכם פחות שליטה על נראות האתר שלכם. אם יש לכם ידע ב-CSS בחשבון פרימיום ועסקי תוכלו לשנות את התבניות ולבחור ממבחר תבניות יותר מובחר. (חשבון VIP מאפשר העלאה של תוספים חיצוניים)
וורדפרס משתמשים באתר שלך לפרסום מודעות שאתה לא מרוויח מהם: כדי שהגולשים לא יראו מודעות אלו תצטרכו לרכוש את אחת מהתוכנית בתשלום. יתרה מזאת, אינך רשאי למכור שטח פרסום באתר שלך, בעלי אתרים עם תנועה גבוהה יכולים להגיש בקשה לתוכנית שנקראת WordAds ולחלוק את הרווחים מהפרסומים עם וורדפרס (תוכניות הפרימיום והעסקי מגיעות עם אופציה זאת מובנת)
יכולות מעקב באתר מוגבלות: אי אפשר להתקין מעקב של גוגל אנאליטיקס (Google analyics). אפשרות זאת ניתנת רק לבעלי חשבון עסקי.
סיכון למחיקת אתר: בגלל שהם שולטים בשרת הם יכולים למחוק את האתר שלכם אם הם חושדים שהפרתם את תנאי השירות שלהם.
חוסר בפיצ’רים מיוחדים ל-E-commerece: גם לא שילוב של אפשרויות תשלום. אלא אם כן אתם במסלול של החנות אונליין.

יתרונות WORDPRESS.COM

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

WORDPRESS.ORG: אמנם ללא עלות אבל נדרש מאמץ

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

חסרונות WORDPRESS.ORG

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

יתרונות WORDPRESS.ORG

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

אז מה עדיף? WORDPRESS.COM או WORDPRESS.ORG?

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

מתי עדיף להשתמש ב- WORDPRESS.COM?

אם אתם בונים אתר למטרות אישיות בלבד ולא למטרות רווח (בלוג אישי, תיק עבודות לראיונות עבודה, להנאתכם האישית וכולי) אתם לגמרי יכולים לעבוד עם WordPress.com שהוא חינמי, נוח ופשוט למשתמש.

מתי עדיף להשתמש ב- WORDPRESS.ORG?

אם אתם עסק, בלוגרים, נותני שירות שמטרתכם היא לעשות רווח מהאתר, לחלוטין מומלץ לכם להקים את האתר שלכם דרך WordPress.org. אפשרות זאת נותנת לכם יותר גמישות ואפשרויות רבות לפיתוח והגדלת האתר שלכם בכל דרך שתבחרו.
:::
וורדפרס להורדה בעברית
|| https://he.wordpress.org/download/||

---

2. הקוד הפתוח המורכב - Drupal

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

• מאחורי כל אתר דרופל עומד ניסיונם המצטבר של למעלה מ-10,000 מתכנתים ועשרות אלפי בוני אתרים מכל העולם כי דרופל היא למעשה קהילה תוססת של מפתחים שמשתפים פעולה כדי לבנות אתרים טובים יותר.

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

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

• דרופל מציעה Frame Work ייחודי למפתחים ולמתכנתים שמאפשר להם להרחיב את יכולות האתר כדי שיספק מענה ספציפי לדרישות הלקוח.

דרופל להורדה
|| https://www.drupal.org/download||

3. קוד פתוח פשוט - ג'ומלה

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

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

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

לג'ומלה מספר תכונות מובנות המאפשרות פילוח נתונים ושליטה בתוכן האתר כגון: מנהל מאמרים, מודולים (אזורים), מנהל משתמשים, מנהל אשפה, מנהל אנשי קשר, מנהל באנרים, דוא"ל מאורגן (Mass Mail), מנהל קישורי רשת (הקלקות), מנהל תבניות, מנהל סקרים, פילוחים סטטיסטים.

דפי ג'ומלה נכתבים ב-XML ואת המידע שולפים באמצעות פלאגינים הכתובים ב-PHP מבסיס נתונים (mySQL), תבנית האתר כתובה ב-HTML ואפשר לשלב JAVA SCRIPT ו-PHP.

ג'ומלה להורדה
|| http://www.joomla.org.il/?Itemid=546||

4. המקצועית והחינמית wix

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

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

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

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

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

5. ידידודית למשתמש - coi

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

6. google sites

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

7. המומלצת והנוחה - sites123

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

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

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

8. בונה אתרי המסחר הטוב ביותר - weebly

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

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

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

9. המשווק המרשים - GoDaddy

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

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

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

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

10. הבסיסי והמעוצב היטב - simplesite

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

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

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

11. מנהל המוצרים - Volusion

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

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

12. המוכר המקוון - SHOPIFY

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

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

13. ניהול טוב של מוצר - BigCommerce

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

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

14. אתר מוצפן - Jimdo

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

מבחינת SEO, נראה כי האפשרויות המתקדמות ביותר נמצאות רק תחת החבילה של 20$, משהו קצת מאכזב. הצד החיובי הוא שאפילו החבילה בחינם נהנית מהצפנה.

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

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

קשה לי מאוד להמליץ עם המערכת. אתם אמנם יכולים ליצור דרכה אתר תוך 10 דקות, אבל כשאתם מתחרים מול מאות אתרים שנראים בדיוק אותו הדבר, לא בטוח שזה שווה את זה. זה נכון במיוחד כשהעיצובים הקיימים הם לא בדיוק “סוף הדרך”, ונראים כמו כל אתר ממוצע ברשת שלא השקיעו בו יותר מדי מחשבה.

קרדיטים

Spoiler

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

כנסו לפה ופעלו כדלהלן:

ו.....יש לכם קישור!

בהצלחה!

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

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

בשלב הזה, מה שכולם בדרך כלל עושים במידה ואין להם כמה אלפי דולרים לטובת InstallShield והם זקוקים להתקנה טיפה יותר מורכבת ממה שמאפשר MSI Installer החינמי של מיקרוסופט, הוא להשתמש באלטרנטיבות חינמיות דוגמת NSIS ולקוות לטוב. בין לבין, קיימים מספר פתרונות המספקים למפתחים גם את האפשרות לייצר התקנה קצת יותר מורכבת מחד שתעניק פשטות הפעלה מנגד. אחד מאותם פתרונות מדוברים היא תוכנת QSetup של חברת Pantaray, אשר נמצאת בדיוק באותה נישת ביניים מדוברת.

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

אז איך זה עובד?

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

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

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

עיצוב תהליך ההתקנה

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

ניהול קבצי ההתקנה

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

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

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

תיבות שיח וסדר ההתקנה

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

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

נוסף לכל אלו, QSetup מאפשרת לכם גם להוסיף מסכי התקנה מותאמים אישית משלכם באמצעות ממשק עיצוב פשוט למדי. עיצוב המסכים המותאמים אישית מתבצע בצורה הדומה מאוד לעיצוב טפסים וממשק משתמש ב-Visual Basic, כך שכל מי שנגע אי פעם באחת מגרסאותיו השונות של VB ירגיש מיד בבית, אך גם מי שלא, ימצא את עצמו יחסית מהר.

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

מתגים והגדרות נוספות

על אף העובדה שאין צורך לגעת אפילו בהגדרה אחת בלשונית ה-Switchs על-מנת ליצור התקנה מלאה ליישום, הלשונית עצמה מכילה מספר הגדרות שישדרגו את ההתקנה שלכם משמעותית. החל מבחירה בתאימות לגרסאות מערכות ההפעלה השונות החל מ-Windows 95 וכלה ב-Windows 7 ו-Windows Server 2008, דרך התנהגות במקרה שההתקנה מזהה גרסה אחרת של היישום שכבר מותקנת על המחשב, הוספת היישום להגדרות ה-Run או RunOnce של המחשב בעת האתחול ואפילו התקנה אוטומטית של Net Framework, כולל הורדה מהאינטרנט במידת הצורך. כמו כן, בלשונית ה-Switches תוכלו למצוא את האפשרות ליצור קובץ Autorun.inf שיריץ את ההתקנה שלכם באופן אוטומטי במידה וזאת רצה מ-CD או מהתקן אחסון נייד כלשהו.

החלק המשמעותי ביותר במסך ה-Switches לדעתי, הוא החלק שבו מאפשרת QSetup לקבוע את התנהגות ההתקנה בעת התקלות במצבי האבטחה המתקדמים המובנים במערכת ההפעלה חלונות החל מגרסת Vista. כחלק מתהליך הבדיקה של ה-Setup, ניתן לבחון באיזה אזהרות UAC יתקל המשתמש בעת התקנה על Vista ו\או על חלונות 7 ואף להגדיר לו לבקש “שדרוג הרשאות” מהמשתמש במידת הצורך.

קיצורי דרך

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

שיוך קבצים

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

הגדרות Registry

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

קבצי INI

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

משתני סביבה

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

להריץ את כל השאר

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

להנעים את הזמן למשתמש במהלך ההתקנה

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

עדכונים אוטומטיים

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

הסרה

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

לייצר התקנה מאפס בפחות מ-5 דקות

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

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

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

#anchor(קרדיט)
לאתר הזה.

התוכנה להורדה

האתר jyvsoft מציע את התוכנה פרוצה.
||קישור||

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

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

מה זה בכלל תוסף לכרום?

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

התוספים נכתבים באמצעות טכנולוגיות ה-WEB המוכרות – ג’אווהסקריפט, CSS, HTML, וכו’. הם יכולים להשתמש בכל ה-APIים שהדפדפן מספק לאתרים ואפליקציות ווב, והם גם יכולים לתקשר עם שרתים ואתרים.

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

קבצים בתוסף לכרום
בגדול, תוסף כרום מכיל את הקבצים הבאים, עליהם אפרט יותר במדריך עצמו:

קובץ מניפסט (manifest)
קובץ HTML אחד או יותר
קובץ ג’אווהסקריפט אחד או יותר
קבצי עזר (תמונות, קבצים נוספים אשר נדרשים לתוסף וכו’)

את כלל הקבצים מרכזים בתוך תיקייה אחת, כשבזמן ההפצה של התוסף מקבצים אותם לקובץ אחד בסיומת crx.

התייחסות לקבצים בתוסף לכרום

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

<link rel=”stylesheet” type=”text/css” href=”style.css” />

ומה עושים כשרוצים להתייחס לקובץ באמצעות כתובת מלאה?

כתובת URL אבסולוטית של קובץ בתוסף נראית ככה:

chrome-extension://<extension_ID>/<file_path>

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

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

ההודעה המוגדרת מראש המדוברת היא extension_id@@, וניתן להשתמש בה בקבצי ג’אווהסקריפט וCSS – אולם לא בקובץ המניפסט.

ארכיטקטורה של תוסף לכרום
הקונספטים העיקריים (אך לא מחייבים) הנהוגים בפיתוח תוסף לדפדפן הם דף הרקע(Background Page), דף “בלתי נראה” אשר מכיל את הלוגיקה המרכזית של התוסף. בנוסף לדף הרקע, ישנם דפי UI, אשר כשמם כן הם – מכילים את פרזנטציית הUI של התוסף. אחרון חביב הוא סקריפט התוכן(Content Script), אשר משמש ליצירת אינטרקציה עם אתרים, אפליקציות ודפים חיצוניים לתוסף.

דף רקע

דף רקע על פי רוב יקבל את השם background.html ויתייחס לקוד הג’אווהסקריפט המרכזי בהתנהגות התוסף (background.js).

ישנם 2 סוגים שונים של דפי רקע: דפי רקע “עקביים” אשר תמיד נשארים פתוחים, ודפי “אירוע” אשר נפתחים ונסגרים על פי צורך. ההמלצה החמה של גוגל היא להשתמש בדפי אירוע בלבד, אלא אם כן יש צורך ממשי בכך שדף רקע יהיה פתוח וירוץ תמיד.

דפי UI

דפי UI הם דפי HTML רגילים לגמרי אשר מציגים את הUI של התוסף. דוגמאות נפוצות לדפי UI הם דפי הגדרות של תוספים (כמו בחוסמי הפרסומות למיניהם, אשר תמיד מכילים דף אפשרויות והגדרות), פופאפים ותפריטים.

סקריפט תוכן

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

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

עוד על היסודות של בניית תוסף לכרום ניתן למצוא בעמוד הרשמי של גוגל אודות פיתוח תוספים לכרום.

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

מה אנחנו בונים?

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

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

ככה יראה התוסף שלנו בסוף

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

אנחנו אוהבים ציטוטים, ובמיוחד כאלו שקשורים בעיצוב
ל-forismatic יש אחלה של API, אז כן יהיה לנו קצת “בשר” בכתיבת התוסף
אלברט איינשטיין אמר: “תעשו את הדברים הכי פשוטים שאפשר, אבל לא יותר פשוטים מזה”
תכנון התוסף
כל פיתוח טוב מתחיל בתכנון טוב, וזה המקום לעשות קצת סדר בדברים וליצור לנו “מפת דרכים”.
התוסף שאנחנו בונים הוא מאוד פשוט, ולכן אין לנו צורך לא בדפי רקע ולא בסקריפט תוכן. למען האמת, הולכים להיות לנו 5 קבצים בלבד:

manifest.json – קובץ המניפסט אשר חייב להיות קיים בכל תוסף
popup.html – דף ה-UI שלנו
popup.js – קובץ הג’אווהסקריפט אשר יכיל את הלוגיקה
style.css – כי חייבים להוסיף קצת סטייל
icon.png – הסמליל שיוצג בדפדפן וייצג את התוסף שלנו
אני החלטתי לקרוא לתוסף qExt, קיצור של Quotes Extension, אבל תרגישו חופשי להתפרע בשם.
ניצור תיקייה חדשה בשם שבחרנו, ונתחיל לעבוד.

מכינים את המניפסט
קובץ המניפסט נועד בשביל לתת מידע אודות התוסף. למניפסט יש שדות חובה, ושדות שחשובים לתפקוד השוטף של התוסף.

ניצור קובץ בשם manifest.json, ונעתיק את הקוד הבא פנימה:

בואו נעבור על הדברים:

manifest_version, name, ו-version הינם שדות חובה במניפסט. שם התוסף והגרסא ברורים מאליהם, ולגבי גרסאת המניפסט – החל מגרסא 188 של כרום ההנחיה היא להשתמש בגרסא 2.

description איננו שדה חובה, אבל מומלץ להוסיף אותו ולתאר מה התוסף בעצם עושה.

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

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

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

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

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

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

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

http://api.forismatic.com/api/1.0/?&method=getQuote&format=json&lang=en

ה-API מחזיר לנו אובייקט JSON שנראה כך:

מכאן אנחנו מסיקים שהדברים היחידים שמעניינים אותנו הם quoteText ו-quoteAuthor.

תחילה נכתוב את הפונקציה למשיכת הציטוט, שכן היא “מרכז הכובד” של הקוד שלנו – ואחריה שנסיים איתה הכל יהיה פשוט יותר. ניצור קובץ popup.js:

הפונקציה פשוטה למדי, משתמשת ב-Fetch API על מנת לבצע את הקריאה ל-API של forismatic ומקבלת callback להתמודדות עם המידע שהתקבל מהקריאה. Fetch עדיין מוגדרת כטכנולוגיה ניסיונית, אם כי התמיכה שלה בכרום יחסית רחבה (החל מגרסא 42). היא דומה לXMLHttpRequest, אולם מכילה פיצ’רים גמישים וחזקים יותר.

למי שלא מספיק בקיא – אני ממליץ מאוד לקרוא עוד אודות ה-Fetch API.

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

נמשיך ונשלים את קובץ הלוגיקה שלנו, popup.js:

הוספנו eventListener לטעינת ה-DOM, בו מתרחשים מספר דברים:

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

ביצענו קריאה לפונקציה הראשונה שלנו, getQuoteFromAPI, ונתנו לה את setDataToDOM כ-callback. לבסוף, יצרנו עוד eventListener שמאזין ללחיצה על הכפתור שלנו, ומבצע את אותה פעולה – קורא לgetQuoteFromAPI עם setDataToDOM כ-callbackk.

אבל מה שווה הלוגיקה אם לא מתייחסים אליה?
נחזור לקובץ popup.html ונוסיף התייחסות ב-head:

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

ניצור קובץ style.css ונעתיק את הקוד הבא:

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

כמובן שגם פה דרושה התייחסות בקובץ ה-UI שלנו, ולכן נחזור לpopup.html ונוסיף ב-head התייחסות:

ולבסוף, נוסיף אייקון לתוסף. על האייקון להיות קובץ PNG בגודל 19×19. אתם מוזמנים להכין אחד משלכם, או להשתמש באייקון שהכנתי עבורנו:

שמרו את האייקון בתיקייה של התוסף תחת השם icon.png – וזהו, סיימנו את התוסף הראשון שלנו לכרום.

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

הגיע הזמן לראות שהתוסף עובד.

נלך למנהל התוספות בכרום (אפשר גם לגלוש לכתובת: chrome://extensions/), ונוודא שסימנו את תיבת “Developer Mode”:

לאחר מכן נלחץ על הכפתור “Load unpacked extension…” ונבחר בתיקייה שלנו. מיד לאחר מכן נוכל לראות שהתוסף מופיע ברשימת התוספים:

בשלב הזה אנחנו כבר יכולים לראות את האייקון שלנו מבצבץ לו בשורת התוספים – זה הזמן ללחוץ עליו ולראות מה קורה.

לדבג את התוסף

ישנן הרבה מתודות שונות בעזרתן ניתן לדבג תוספים. אבל אם נאמר את האמת, בתוסף שלנו אין יותר מידי מה לדבג. הוא מתנהג כמעט לחלוטין כמו כל דף WEB אחר, ולכן גם הדרך לחקור אותו תהיה זהה – נשתמש בInspect Element.

כן כן, גם על תוספים ניתן לעשות Inspect Element, שם ניתן לחקור את הDOM שלהם, את הבקשות, את קבצי המקור – בקיצור, כל מה שאתם מכירים כבר.

מאוד שימושי, והאמת שגם מאוד טריוויאלי – אבל יש אנשים שיופתעו מהגילוי הזה (עבדכם הנאמן למשל..).

דפדפנים שהם לא כרום
צריך לדבר גם קצת על דפדפנים שאינם כרום. התוסף שכתבנו נבנה במיוחד לכרום, ולמרות שאחוז השימוש נמוך משמעותית – אי אפשר לשכוח מהעובדה שיש עוד דפדפנים חוץ מכרום. כתיבת תוסף לדפדפנים שונים היא דומה בעקרונות שלה, אולם יש שינויים קלים בסמנטיקה ובקוד בדברים מסויימים. למשל בעבור תוספים ל-Edge, חייבים להוסיף שדה author בקובץ manifest.json.

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

ל-MDN יש ספריית תוכן שלמה אודות WebExtensions, מערכת ליצירת תוספים חוצי-דפדפנים. אני ממליץ בחום לכל מי שמתעניין בנושא.

קרדיט לאתר הזה

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

במדריך הזה תלמדו על כל לבני הקטגוריה 'תנועה' לפרטי פרטים.
נתחיל לפי הסדר:

---

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

הסרטון לצפייה:
זוז עשר צעדים.webm

---

כך תסובבו את הדמות כך שתהא נטויה ימינה במספר מעלות לבחירתכם (בחירה בקלט הלבן):

הסרטון לצפייה:
סיבוב ימינה.webm

---

אחרי שהסברנו מהי הלבנה הקודמת - אני לא חושב שיש צורך להסביר את זו

---

כדלהלן:

צפייה כסרטון:
קפוץ אל מיקום אקראי.webm

---

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

לצפייה כסרטון:
קפוץ אל מצביע + לעולמים.webm

---

את הלבנים האלו תבינו לבד ע"י הלבנים הקודמות. זה בדיוק כמו קפוץ אל רק בזמן מותאם אישית.

---

גם את הלבנים האלו אני מאמין שתצליחו להבין לבד

---

עם לבנה זו תוכלו לקבוע את אופן הסיבוב (כסיבוב הקודם או כסיבוב הזה):

לצפייה כסרטון:
שנוי כיוון משמאל לימין.webm

---

לשנוי מיקום הדמות לאורך ולרוחב תשתמשו במקום המסומן (ציר x - מיקום מאוזן, ציר y - מיקום מאונך):

לצפייה בסרטון:
מיקום על ציר y.webm

||להקדמה על סקראץ'||
||לכללי סקראץ'||
יש שאלות?
||שאל פה||
||להורדת סקראץ'|| קרדיט ל @מומחה-ברמה

מצטרף. חזק!

נתחיל מתיאור הקטגוריות והלבנים.

תנועה - פה תוכלו לגרום לדמות שלכם לזוז (מה שאין ברקע).

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

צלילים - תוכלו להשמיע צלילים במשחק.

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

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

חיישנים - כשמו כן הוא: נותן אפשרויות די מורחבות לחיישני נגיעה ועוד.

מפעילים - עלייהם די מסובך להסביר. נדבר עלייהם בהמשך.

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

בצור לבנה אני לא נוגע. זה די מסובך.

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

בהצלחה!!!

Spoiler

יש שאלות?
||שאל פה!||
||להורדת סקראץ'|| קרדיט ל @מומחה-ברמה

@מומחה-ברמה אמר באשמח לעזור| תרגום תוכנה שימושית:

@נגן נתחיל בעזרת ה' אני ו- @יוסי-הגאון

כמו שאמרתי, ניתן לפנות גם אלי.

ראיתי בפרוג שמסמנים התמחות ויש אפשרות לחפש לפי קטגורית התמחות.
@שמואל, @אלישי - אולי אפשר לאמץ?

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

1): לכל דמות מומלץ לשים בתחילת הפרויקט כך:

2): תבדקו את הרצף בין האירועים שעשיתם, כך, תבנו פרויקט ארוך.

3): מדי כל כמה זמן מומלץ לשמור את הפרויקט.

4): כדי להעלות את הפרויקט:

בהצלחה!

Spoiler

יש שאלות?
||שאל פה||
||להורדת סקראץ'|| קרדיט ל @מומחה-ברמה

@יוסי-הגאון בטוח?
@מומחה-ברמה הבוס מאשר?

@זוסיא מי רוצה פורום אחר? מתמחים הכי טוב בעולם!!!

@מישהו12

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

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

@fshlomo הנה - https://send.magicode.me/send-file/file/bc4aabe610238f970328e5cc16440365077f45d4/view

@יוסי-הגאון מדריך יותר טוב

@יוסי-הגאון הבאתי משם לטובת מי שאין לו כח לעבור על השרשור (למרות שאני לא מכיר את זה משם)