וויקס, עמוד פייסבוק, כלים וחברים

כשמתפתחת שיחה על מה רואים בטלוויזיה או מה עושים בערב בזמן הפנוי, כמעט כל הידע שלי בתכניות טלוויזה בא מהאיש שלי השולט בשלט, בָּיֵס ובנטפליקס; זה שיודע ומכיר כל שחקן וזוכר כמעט בעל פה איפה הם שיחקו וכמה פרסי אוסקר גרפו (או סתם היו מועמדים). אני, אעפס, קצת פחות יושבת מול הטלוויזיה ואת זמני החופשי מכלה בערבים מול המחשב. ומה עושה? בוחשת בפרויקטים שונים ומשונים (וזאת הסיבה שהאלבום הדיגיטלי של 2019 עדיין נמצא בחיתוליו 😉 ).

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

ניהול עמוד פייסבוק

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

 

 

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

 

 

בניית אתר ב-WIX

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

א. כי אין כמו לדעת את האוייב  🙂

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

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

הכל התחיל מחבר של חבר שהיה צריך סיוע קליל באתר סדנאות כתיבה שהוא בנה ב-wix. את wix הכרתי שלום שלום, לא יותר מזה. התנסיתי שם לפני כמה שנים, אבל לא הצלחתי להשלים את הבנייה שם. בעיקר היה לי קשה לא לשלוט ב-css. חייבת לציין – שזה עדיין היה לי קשה. אבל החוכמה היא לחפש תבנית שאוהבים, כזאת שתתאים ל-80% מהצרכים של האתר ולדעת ש: או שמוותרים על ה-20% הנותרים או שמתפשרים. התגלחתי על אתר שסתם שיחקתי איתו וכך למדתי לשלוט על העברית, למקום אלמנטים ולהוסיף אזורים. בכל פעם שנתקלתי בשאלה שלא הייתה לי תשובה עליה פניתי אל אלוהים, הלוא הוא גוגל 🙂
ללא ספק, יש עקומת למידה בשליטה על העבודה ב-wix, אבל ברגע שמבינים את העניין, החיים קלים יותר שם.

 

 

מגישה לכם באהבה כמה טיפים על קצה המזלג לעבודה ב-wix:

עברית

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

האלמנט הכי פשוט למעבר לעברית הוא טקסט. בעריכה של טקסט ניתן:

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

חשבתי להוסיף צילומי מסך ואז מצאתי את המדריך הזה – אז חוסכת לי תמונות 🙂

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

סטריפים מעוצבים

העיצוב ב-wix הוא בשוּרוֹת, כל שורה (strip) יכולה להמתח מקצה לקצה או להיות מוגבלת וממורכזת או צמודה לאחד הצדדים (ימין או שמאל), כאשר הרוחב המקסימאלי שלו הוא 960 פיקסלים (כן, עצוב אבל זה מה שיש…).

כל שורה אפשר לחלק לעמודות (columns), ובתוכם למקם אלמנטים. מה שקורה בעצם זה שלוקחים את הרוחב של 960 ומחלקים אותו שווה בשווה על פי מספר העמודות שיש. אם למשל יש לי סטריפ עם 4 עמודות, כל עמודה היא ברוחב של 240 פיקסלים. אם הגדרתם מתיחה מקצה לקצה של השורה, כל עמודה תקבל 240 פיקסלים שטח "פעיל"  + X פיקסלים שחולקו בין העמודות מסך הפיקסלים הנותרים (100% – 960 פיקסלים), אבל האזור הזה נחשב שטח מת, ואם נקטין את המסך ייתכן ודברים שנמצאים שם יעלמו. מודה לניר חורש על העזרה וההבנה של העבודה עם שורות ב-wix. אגב, תוך כדי הקיטורים שלי אליו על חוסר היכולת שלי לשלוט ב-css ב-wix, ניר הציע לי לנסות את editorX, טרם ניסיתי, מבטיחה לדווח אם כן 🙂

Mobile

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

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

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

SEO

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

 

 

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

תמונות

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

זכרתי ששמעתי בהרצאה של אלעד "מהו פיקסל, ועבודה עם תמונות בשנת 2020 באינטרנט"  טיפ לשמירה על תמונות. הטיפ במקור של ויטאלי פרידמן. ומהו? ובכן, ההמלצה היא לשמור תמונה בגודל כפול ממה שצריך אותה. נניח אם התמונה שלנו צריכה להיות בגודל של 600*800 פיסקלים, אז נייצר תמונה בגודל 1200*1600 פיקסלים. כאשר נייצא אותה ל jpeg נשמור באיכות של 0%. נשמע הזוי? אכן. אבל התוצאה משביעת רצון ומאוד קלה במשקל.

מה הבעיה?

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

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

 

linkpad.bio

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

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

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

חושבים שיכול להתאים גם לצרכים שלכם? מזמינה אתכם להתנסות 🙂

 

למה זה בכלל היה טוב?

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

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

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