השוק רווי במשווקים דיגיטליים כיום. כולם יודעים איך להשתמש בתכונות הבסיסיות כדי לפרסם את התוכן שלך בפלטפורמות דיגיטליות. מה שיבדל אותך משאר משווקים דיגיטליים הוא הידע שלך ב-HTML,CSS וב- JavaScript.
CSS, HTML ו-JavaScript הן הטכנולוגיה שעומדת מאחורי כל דף אינטרנט. ידע זה לא רק יעזור לך בכך שיספק לך את היסודות של יצירת אתרים אלא גם יעזור לך בהתאמה אישית של המסרים, כך שלא תצטרך לרוץ למחלקת ה-IT עבור כל דבר קטן.
במאמר זה, נבין את המושגים של CSS, HTML ו-JavaScript; מה יכולים להיות כמה מהמקומות הטובים ללמוד CSS, HTML ו-JavaScript מקוונים; ומדוע CSS, HTML ו-JavaScript חשובים למשווק דיגיטלי.
הרעיון והשימוש ב-HTML
Hyper Text Markup Language (HTML) היא שפת סימון (Markup Language) המשמשת ליצירת דף אינטרנט.
בעזרת HTML יוצרים את האלמנטים השונים של דף אינטרנט: כותרת, פיסקה, תמונה, וידאו, רשימה, קישור, טבלה ועוד.
שפת HTML היא שפה של תגיות. בדרך כלל תגית פתיחה, תוכן, תגית סגירה העוטפות את התוכן, למשל: כדי להציג פיסקה של טקסט יש להתחיל בתגית פתיחה <p> אחר כך טקסט ולסיום תגית הסגירה
<p/> .
יש גם תגיות בודדות שהתוכן נמצא כחלק מהתגית בין > לבין < בתגית, למשל: תגית <img> שהיא תגית להצגת תמונה.
עכשיו תורך:
- שים את הסמן על הדף
- לחץ לחיצה ימנית בעכבר
- בחר "קוד מקור"
מה שאתה רואה, זה HTML
הרעיון והשימוש ב-CSS
גיליונות סגנון מדורגים (CSS) משמשים לעיצוב הדף כמו למשל: סוג הגופן, גודל הגופן, צבע הגופן, צבע הרקע, מרווח בין פסקאות, גבולות ועוד.
CSS עוזר לך לעשות את כל מה שתיארתי וגם יותר מזה: אנימציות, התאמה של האתר לגדלים שונים של מסכים (רספונסיביות).
עכשיו תורך:
- שים את הסמן על אלמנט (פיסקה, תמונה, כותרת) בדף
- לחץ לחיצה ימנית בעכבר
- בחר Inspect.
מה שאתה רואה בצד שמאל למעלה, זה HTML ולמטה זה CSS.
מטאפורה: HTML זה כמו השלד של האתר, CSS זה העור.
הרעיון והשימוש ב-JavaScript
JavaScript (JS) עוזר להפוך את דפי האינטרנט לאינטראקטיביים.
ללא JavaScript, כמעט כל דפי האינטרנט הם סטטיים עם איזושהיא דינמיות, אבל לא אינטראקטיביות, בסיסית שאפשרית באמצעות CSS.
JavaScript עוזר ליצור אלמנטים אינטראקטיביים וחלונות קופצים בהתאם לפעילות של המשתמש בדף: לחיצה על לחצן, גרירה ושחרור, הצבת סמן מעל וכדומה וכך, באמצעות JavaScript ניתן ליצור תפריטים, לסובב/להפוך אלמנטים, להגדיר ולצמצם רשימות ועוד.
JavaScript יכול לשמש הן ב- Front End (מה שרואה הגולש) והן ב- Back End (ניהול האתר בשרת) וכל הדפדפנים תומכים בו.
מטאפורה: HTML זה כמו השלד של האתר, CSS זה העור ו- JavaScript זאת הנפש הגורמת לאתר להיות "חי".
מדוע חשוב למשווקים דיגיטליים ללמוד CSS, HTML ו-JavaScript?
משווק דיגיטלי יכול לשפר את הנראות ואת הפונקציונאליות של האתר אם יש לו ידע ב- CSS, HTML ו-JavaScript. היתרונות הם:
תוכל לערוך בעצמך את אתר האינטרנט שלך ולקבל אתר מותאם אישית ואינטראקטיבי
בעזרת מערכת ניהול התוכן (CMS) של האתר שלך, כמו WordPress, ניתן לעלות תוכן לאתר. בעזרת וורדפרס ניתן ליצור עמוד חדש, פוסט חדש. אפשר להוסיף תמונה, להגדיר כותרת ועוד.
העורך של וורדפרס הנקרא גוטנברג ונדיר שעובדים איתו. בדרך כלל עובדים עם עורך מסוג WYSIWYG שזה ראשי תיבות של What You See Is What You Get עם מימשק Drag&Drop (גרור ו- שחרר) כמו אלמנטור Elementor.
העורך איתו אתה עובד בוורדפרס, בין אם זה אלמנטור Elementor או WPBakery או Visual Composer או Oxigen מספקים מאות אלמנטים (טקסט, רשימה, תמונה, לחצן, גלריה וכדומה) בעזרתם אתה יכול לבנות דף אינטרנט.
לכל אלמנט שכזה יש תכונות מובנות Built In, למשל, גודל הלחצן יכול להיות: קטן, בינוני, גדול. לך זה לא מתאים. אתה רוצה לחצן ברוחב מסויים של 243px. למה? ככה! זאת הדרישה שלך.
כאן בא לידי ביטוי הידע שלך ב- HTML&CSS.
דוגמה נוספת: תכונה מובנת של לחצן היא שבלחיצה עליו נטען דף חדש. הדרישה שלך היא שבין הלחיצה על הלחצן ובין המעבר לעמוד החדש, יוצג, מתחת ללחצן, סרגל התקדמות למשך 4 שניות ורק אז יתבצע המעבר לדף.
כאן בא לידי ביטוי הידע שלך ב- HTML&CSS ו- JavaScript.
עם ידע ב- CSS, HTML ו-JavaScript, משווקים דיגיטליים יכולים לערוך את אתר האינטרנט ולקבל אתר מותאם אישית ואינטראקטיבי.
לדוגמה, אם במאמר אתה רוצה להגדיל את גודל הגופן, לשנות את צבע הכותרת, להוסיף עוד אנימציות בין לבין, להוסיף גבולות, ואפילו לשנות את סגנון הגופן של הכותרת, תצטרך לפנות למחלקת ה-IT. מצד שני, אם יש לך ידע בסיסי בכלים: HTML, CSS ו- JavaScript , תוכל לעשות זאת בעצמך בזמן קצר הנמדד בדקות.
למרות שאם תדע HTML, CSS ו- JavaScript תוכל לערוך שינויים בעצמך, זה צריך להיות מתואם עם מי שאחראי בארגון על האתר (אם אתה עצמאי, בעל עסק קטן, אני מניח שאתה בקשרים עם האחראי על האתר 🙂 ). תאר לך שכל אחד בחברה בה הינך עובד, יכנס על דעת עצמו לאתר ויערוך שינויים – זה לא טוב.
לכן, השינוי שאתה רוצה לעשות צריך להיות בתיאום ובהסכמה של מי שאחראי על האתר בחברה שלך.
שינויים שאתה יכול לעשות באתר יכולים להשפיע על דברים אחרים, שאינך יודע דבר על קיומם או מודע לקיומם. לכן, לגשת ככה מתי שמתחשק לך ולערוך שינוי באתר – זה לא רעיון טוב, אם אתה עושה זאת לבד, בלי ידיעתו של אף אחד.
זה יעזור לך להסביר למתכנתים מה צריך לעשות באתר
הבנה שלך בטכנולוגיה של דפי אינטרנט, תעזור לך בתקשורת עם צוות הפיתוח, תדבר איתם באותה שפה והפגנת הידע שלך, "תיישר" אותם והם יבינו שאתה מבין מה אתה רוצה ולא רק שאתה מבין, אתה גם עשית זאת בעצמך, "ליכלכת את האצבעות", כך שאתה יודע בדיוק מה הם עושים.
לדוגמה: לאחר שתדע להקים טופס באתר עם שדות, תוכל לדעת איך לנסח את הדרישה שלך מצוות הפיתוח בצורה מקיפה ומפורטת כדי שהמשימה תבוצע "נכון בפעם הראשונה".
לדוגמה: אם תרצה להציג באתר את היום והשעה הנוכחיים, כי זהו אתר חדשות, את זה ניתן לעשות רק עם JavaScript. אתה לא תעשה את התכנות אבל תדע כמה זמן ומה נדרש כדי שיוצג התאריך והשעה באתר.
זה יעזור לך למנוע ממתכנתים לרמות אותך
תהיה לך הערכת טובה יותר של כמה זמן נדרש למתכנת לביצוע העבודה.
אם למשל מחלקת השיווק, שאתה חלק ממנה, תדרוש להוסיף שדה לטופס קיים והמתכנת יתחיל ל"עשות קולות" של 'משימה בלתי אפשרית', אתה כבר יודע כמה זמן נדרש לו לביצוע המשימה, כולל בדיקת איכות QA.
אם תבקש להוסיף לחצן לדף, ומתכנת האתר מתחיל לדבר על זמן ביצוע של ימים ואולי מעבר לזה, אתה יודע בדיוק כמה זמן נדרש (רמז: נמדד בדקות ולא בשעות).
אם תבקש להוסיף תיבת חיפוש בדף שאינה חלק מתבנית האתר וצריך לתכנת אותה, וצוות הפיתוח יאמר שזה "פרוייקט" שנדרשים לו 125 שעות מתכנת, אתה תדע להעמיד את צוות הפיתוח על מקומו ושלא יספר לך סיפורים.
זה יעזור לך לאתר בעיות באתר
כמשווק דיגיטלי, באחריותך לוודא שהאתר נגיש במלואו ושאין בו שגיאות. עם ידע בסיסי ב-HTML, אתה יכול להבטיח ששום קישור לא נשבר. עם ידע בסיסי ב- CSS תוכל לבדוק אם הוא מעוצב לפי הדרישה.
ידע ב-HTML ו-CSS יעזור לך לראות את האתר מנקודת המבט של המבקר ולפיכך לנקוט בפעולה בהתאם. לדוגמה, אם יש באגים, אם זמן הטעינה של הדף גבוה בטלפונים ניידים, או אם התנועה באתר יורדת, HTML ו-CSS יתנו לך את כל התשובות הטכניות לבעיות אלו ויעזרו לך לפתור אותן או לפחות להצביע עליהם למי שאחראי לאתר בחברה.
אתרים ללימוד JavaScript
האתרים שבאמצעותם ניתן ללמוד את היסודות של HTML, CSS ו-JavaScript מופיעים מטה, אבל עליך לזכור כי:
- כל האתרים בהם הקורסים ניתנים חינם או בתשלום מיועדים להכשרת מתכנתים, כלומר הם הרבה יותר מידי עבורך
- אין התייחסות לאלמנטור. נקודה.
Knowledge Hut
https://www.knowledgehut.com
Code academy
https://www.codecademy.com
Udemy
https://www.udemy.com
Solo Learn
https://www.sololearn.com
לסיכום
כדי שמשווק דיגיטלי יבלוט בין שאר המשווקים הדיגיטליים, הוא צריך לדעת את היסודות והיישום של HTML, CSS ו-JavaScript. זה לא רק יעזור לארגון להגדיר באופן שלם יותר את הדרישות אלא גם יבטיח שלא יהיו עיכובים בעמידה בזמנים, ושצוותי הפיתוח לא 'יעבדו' עליך.
אנחנו במרוץ עכברים של להתקדם ומהר. הידע שלך בטכנולוגיית ה- Web יעזור לך להשיג יתרון על פני אחרים. העולם מתקדם לעבר תשתית דיגיטלית, ולא צריך להיות שום דבר שימנע ממך ללמוד את הכלים הכל כך נדרשים.
"…אבל אני לא מפתח", אומר כל משווק דיגיטלי בשלב מסוים בקריירה שלו כשהוא חושב על רעיון מגניב ליישום באתר.
למרות שאתה מכבד את המפתחים בחברה שבה הינך מועסק שעוזרים לך ליישם את הדרישות שלך, ישנם מקרים שבהם אתה, המשווק הדיגיטלי, יכול לקצר את תהליך הפיתוח.
עם לימוד JavaScript תוכל להבין את המסמכים הטכניים, תוכל לתקשר עם צוות המפתחים בצורה טובה יותר, ותוכל לבנות את מה שאין בכלי הפיתוח המובנים של האתר.
האם תרגיש שאתה מתכנת עכשיו? לא.
האם תרגיש שאתה מסוגל טכנית? כן.
לימוד טכנולוגיות אינטרנט HTML&CSS ו- JavaScript הם קרש קפיצה לקריירה שלך.
