טכנולוגיות אינטרנט מודרניות בשירות של שיווק תוכן

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

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

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

אתה טועה.

הטכנולוגיות שבבסיס הפרויקט הזה אינן סוד מאחורי שבעה חותמות, ואתה יכול בקלות להציג את קוד התוכנית כולה של דפי אינטרנט. כדי לעשות זאת, עבור לאתר, לחץ לחיצה ימנית על החלק המתאים ובחר באפשרות "הצג קוד אלמנט" (אם יש לך את Google Chrome), "בדוק את האלמנט" (אם אופרה) וחקור את האלמנט (אם Mozilla Firefox). אם ברצונך להציג את כל קוד הדף, תוכל פשוט ללחוץ על ctrl + u. צירוף מקשים זה פועל בכל הדפדפנים הרשומים.

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

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

גלילת תמונות

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

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

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

רוצה ליצור את אותו תוכן? אתה צריך ללמוד את השפה JavaScript, כמו גם את אחת הספריות שלה - jQuery.

חישובים

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

בואו נסתכל על טכניקה זו על הדוגמה של האתר SeeYourFolks:

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

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

כך קורה:

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

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

רוצה ליצור את אותו תוכן? אתה צריך ללמוד מידע על איך לבצע חישובים באמצעות JavaScript.

אינטגרפיה אינטראקטיבית

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

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

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

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

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

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

רוצה ליצור את אותו תוכן? בדוק מידע על אופן השימוש ב- JavaScript כדי לבקש דפים, וכן תכונות של DOM.

גלילה בדף

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

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

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

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

רוצה ליצור את אותו תוכן? למד CSS ו- JavaScript אנימציה. כמו כן, הידע של HTML 5 לא יפריע כדי לתבנית נכונה של הקוד.

ושוב על הפרויקט שלג

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

    ביסודו, פרויקט Snowfall מורכב מהרכיבים הבאים:

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

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

אם אתה מסתכל על קוד הדף, מתברר כי השפעה זו מושגת באמצעות קבוצה של תמונות שיש את השם (XXXX-1.jpg), וכו ', כמו גם סקריפט הדורש את הדף כדי להציג את התמונות XXXX-1 (+ 1 ) .jpg עם כל לגלול למטה עד שהם נגמרים. במילים אחרות, התסריט הראשון מציג את התמונה XXXX-1.jpg, ולאחר מכן XXXX-2.jpg, עד לרשימה שלהם מותש. כפי שאתם יכולים לראות, הכל פשוט מאוד.

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

רוצה ליצור את אותו תוכן? הניו יורק טיימס סיפקה לקוראיו היסטוריה מפורטת של יצירתו של פרויקט זה. זה נשאר רק כדי להכיר את זה.

שים לב לטקסט באנגלית.

בואו נסכם

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

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

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

צפה בסרטון: המחלקה ללימודי מידע - ד"ר מילר מדבר על מסלול טכנולוגיות אינטרנט (מרץ 2020).

Loading...

עזוב את ההערה שלך