تقنيات الويب الحديثة في خدمة تسويق المحتوى

منذ فترة طويلة يقتصر تسويق المحتوى ليس فقط على كتابة نصوص الجودة. يستخدم المسوقون ومصممو الويب المتقدمون الصور والصوت والفيديو للمساعدة في تنشيط المحتوى الثابت. ومع ذلك ، فقد وصل تسويق المحتوى خلال العام الماضي إلى مستوى جديد تمامًا بفضل المحتوى التفاعلي.

خذ ، على سبيل المثال ، المشروع الجديد لصحيفة نيويورك تايمز الإلكترونية التي تحمل اسم Snowfall ("تساقط الثلوج"). يجمع هذا الموقع بشكل متناغم مقاطع الفيديو والصور وقصة مثيرة للاهتمام ، أي أفضل عناصر تقنيات الويب.

بالطبع ، البوابة المذكورة أعلاه هي نتيجة العمل الشاق لفريق محترف ، والتي بذلت جهودًا كبيرة على مدار أشهر طويلة. وقد تترك انطباعًا أنه بميزانية محدودة ، لا يمكن تحقيق نفس النتائج.

أنت مخطئ.

التقنيات التي يقوم عليها هذا المشروع ليست سرًا وراء سبعة أختام ، ويمكنك بسهولة عرض رمز البرنامج بأكمله بصفحات الويب. للقيام بذلك ، انتقل إلى الموقع ، وانقر بزر الماوس الأيمن على الجزء المقابل وحدد خيار "عرض رمز العنصر" (إذا كان لديك Google Chrome) ، و "فحص العنصر" (إذا كان Opera) واستكشف العنصر (إذا كان Mozilla Firefox). إذا كنت ترغب في عرض رمز الصفحة بالكامل ، فيمكنك ببساطة الضغط على ctrl + u. تعمل مجموعة المفاتيح هذه في جميع المتصفحات المدرجة.

بعد القيام بذلك ، يمكنك أن ترى بأم عينيك كيف تمكن المطورون من تحقيق هذه النتائج المذهلة ، وحتى استخدام التكنولوجيا الخاصة بهم في ممارساتهم. بالمناسبة ، استفاد بعض مطوري الويب الأذكياء بالفعل من هذا. على سبيل المثال ، قامت شركة Usvsth3m ، التي خلقت محاكاة ساخرة مثيرة للاهتمام لمشروع Snowfall ، أو شركة ScrollKit ، التي تمكنت من عمل نسخة طبق الأصل من المشروع في غضون ساعة.

بالطبع ، يمكن أن يتباهى القليلون بمعرفة ممتازة بلغات البرمجة ، لكن جوهر المسألة لا يتغير. إذا كان نشاطك مرتبطًا إلى حد ما بتسويق المحتوى ، فيجب أن تفهم على الأقل أساسيات تقنيات الويب الحديثة من أجل تقديم مثل هذه المشروعات إلى عملائك. في هذه المقالة سوف نلقي نظرة على أحدث أدوات وتقنيات تسويق المحتوى التي تقوم عليها. سنحاول تقديمها بكل بساطة ووضوح قدر الإمكان حتى يتسنى لهؤلاء الأشخاص الذين تعتبر البرمجة عبر الإنترنت "غابة مظلمة" أن يفهموها.

التمرير الصور

دعنا ننظر إلى مثال بسيط. نشرت فنادق Concert Hotels على موقعها الإلكتروني صورة تفاعلية تُظهر سعة ذاكرة iPod الكلاسيكية ، معبراً عنها في سجلات الفينيل. ما عليك سوى النقر على السهم لأسفل وسيبدأ في تحميل مجموعة كاملة من السجلات التي تقلل من سعة جهاز iPod. بفضل هذا الاستقبال البسيط ، نفهم على الفور جوهر المسألة. بالإضافة إلى ذلك ، تلقت هذه الصورة أكثر من 26000 مشاركة في الشبكات الاجتماعية. النتائج تتحدث عن نفسها:

من وجهة نظر فنية ، فإن إنشاء هذه الصورة هو عبارة عن زوجين من التوافه. هانا سميث ، وهو أحد مطوريه ، قلق حتى لأنه كان بسيطًا جدًا. في الواقع ، فإن مجموعة السجلات التي تراها أمامك هي مجرد صورة واحدة ، تتكرر مرارًا وتكرارًا حتى يتم الحصول على وحدة التخزين المطلوبة. في الواقع ، يمكنك اختيار عدد الصور التي تريد رؤيتها على الشاشة ، ثم بدء الدورة ، والتي تتكرر خلالها الصورة حتى يتم الوصول إلى القيمة المحددة.

يمكن العثور على البرنامج النصي للصور في الكود المصدري. انها بسيطة جدا. يمكنك حتى استخراج الشفرة ومعرفة كيفية عملها في الممارسة العملية.

هل ترغب في إنشاء نفس المحتوى؟ تحتاج إلى تعلم لغة JavaScript ، وكذلك إحدى مكتباتها - jQuery.

الحوسبة

أحد أحدث الاتجاهات في تسويق المحتوى هو تكييف المحتوى لكل زائر للموقع. يمكن تحقيق ذلك بمساعدة الحسابات الرياضية التي يتم تنفيذها "وراء الكواليس". بتطبيق القليل من السحر بمساعدة الرموز الخاصة ، يمكنك الحصول على نتيجة مماثلة.

لنلقِ نظرة على هذه التقنية في مثال موقع SeeYourFolks:

يحتاج مطورو الموقع إلى يوم واحد فقط لإنشاء هذا التذكير الفعال بأهمية الروابط العائلية. بالإضافة إلى ذلك ، لدينا مثال رائع على استخدام الرياضيات لإنشاء محتوى.

مبدأ استخدام هذا النموذج بسيط للغاية. من الضروري إدخال معلومات حول مكان إقامتك وكم عمر والديك وعدد مرات رؤيتهم على مدار العام. ثم يقوم الموقع تلقائيًا بحساب عدد المرات التي لا يزال بإمكانك رؤيتها أثناء وجودها.

يحدث هذا على النحو التالي:

  • عند إدخال اسم بلدك ، يتم تعيين قيمة محددة لكل منها بناءً على متوسط ​​العمر المتوقع في بلد معين ؛
  • عمر أمك وأبيك مطويان ومقسّمان إلى نصفين للحصول على متوسط ​​؛
  • يتم خصم متوسط ​​القيمة من متوسط ​​العمر المتوقع ؛
  • الرقم الناتج مضروب في عدد اجتماعاتك السنوية مع والديك ؛
  • يتم تقريب النتيجة.

هناك أيضًا رمز آخر يتم تشغيله إذا دخلت عصر أحد الوالدين فقط ، بالإضافة إلى مخطط تشغيل يتم تنشيطه إذا تجاوز عمر والديك متوسط ​​العمر المتوقع في بلدك. يمكنك عرض كل الكود بالنقر على هذا الرابط. كما ترون ، تم ترميزها بوضوح ، بحيث يمكنك بسهولة فهم ما يعنيه.

هل ترغب في إنشاء نفس المحتوى؟ تحتاج إلى معرفة معلومات حول كيفية إجراء العمليات الحسابية باستخدام JavaScript.

الرسوم البيانية التفاعلية

الرسوم البيانية الثابتة هي بالأمس. إذا كنت تريد مفاجأة عملائك ، فاجعلها تفاعلية. يتم تقديم مثال ممتاز على الرسوم البيانية الديناميكية على موقع شركة Town Center Car Parks ، والذي يوفر خدمات وقوف السيارات. بخلاف الأمثلة السابقة ، يطلب JavaScript ، في هذه الحالة ، صفحة على موقع الويب نفسه لإنشاء النتائج ، ثم يقوم بتغيير محتوى الصفحات ديناميكيًا.

هذه الرسوم البيانية تشجع السائقين على ترك سياراتهم في موقف السيارات ليلة عيد الميلاد. في الواقع ، خلال العطلة ، من المستحيل مقاومة إغراء شرب الكحول ، وكما تعلم ، فإن القيادة تحت تأثير الكحول محفوفة بعواقب وخيمة.

يتم إعطاء زوار الموقع الفرصة لمحاكاة الوضع الحقيقي. توجد في الجزء العلوي من الصفحة مشروبات كحولية متنوعة ، يتبعها عداد يوضح عدد وحدات الكحول التي استهلكتها. سيتغير محتوى الصفحة حسب اختيارك. على سبيل المثال ، إذا كنت تخطط لشرب 6 أكواب من الشمبانيا كل مساء ، فإن العداد سيظهر النتيجة التالية:

إذا اخترت شرابًا مختلفًا ، فستكون النتائج مختلفة ، وبالتالي ، سيتغير الكود المصدري. لنفترض أنك قررت تحديد كوب واحد من الفودكا. في هذه الحالة ، سيعرض العداد الوحدة ، لكن لا يزال سيتم تحذيرك:

"ربما لا تتجاوز الحد المسموح به ، لكن لا تنسى أن الكحول يتصرف بشكل مختلف مع أشخاص مختلفين. لذلك ، فإن الحل الأكثر أمانًا هو ترك السيارة في موقف السيارات والعودة إلى المنزل بسيارة أجرة."

ومن هنا الاستنتاج: لا يجب أن يكون المحتوى الخاص بك ثابتًا - يمكن أن يتغير ، بما يعكس اختيار جمهورك. لماذا تكتب مقالًا ضخمًا يصف جميع النتائج المحتملة عندما يمكنك إنشاء رسم بياني يعرض المعلومات ذات الصلة بقارئ معين؟

هل ترغب في إنشاء نفس المحتوى؟ فحص المعلومات حول كيفية استخدام JavaScript لطلب الصفحات ، بالإضافة إلى ميزات DOM.

التمرير الصفحة

في بعض المواقع ، يتغير المحتوى حسب موضعك في الصفحة. مثال على ذلك هو مستقبل مشاركة السيارات. على الرغم من أنه ، في هذه الحالة ، يتم إعادة تمكين JavaScript ، يتم إنشاء العديد من عناصر التصميم بفضل لغة CSS. النظر في الصورة التالية:

هل تصدق أن كل هذه التلال هي عناصر CSS تتداخل مع بعضها البعض؟ إذا كنت في شك ، يمكنك عرضها في ملف CSS الرئيسي.

في ذلك ، سوف تتلقى معلومات حول كيفية تثبيت جميع عناصر الصورة في مكانها. للوهلة الأولى ، يبدو أنها ديناميكية ، ولكن في الواقع ، فإن معظم صورة الخلفية ثابتة. فقط مركبة وبعض الأجزاء التفاعلية تتحرك.

افترض أنك مهتم بكيفية تعيين الطائرة الموجودة في بداية الصفحة. للقيام بذلك ، افتح الرسم التوضيحي وعرض رمز العنصر (كيفية القيام بذلك ، كتبنا أعلاه). سترى أن هناك كودًا خاصًا يغير موضع الجزء السفلي من الطائرة ، مما يخلق وهم حركتها.

هل ترغب في إنشاء نفس المحتوى؟ تعلم CSS وجافا سكريبت الرسوم المتحركة. أيضًا ، لن تتداخل معرفة HTML 5 من أجل تهيئة الشفرة بشكل صحيح.

ومرة أخرى عن مشروع تساقط الثلوج

لسوء الحظ ، في مجال التسويق عبر الإنترنت لم يظهر حتى الآن المصطلح الدقيق لوصف المحتوى ، مثل تساقط الثلوج. على الرغم من هذا ، فإن عدد هذه الأمثلة ينمو باستمرار كل يوم.

    في جوهره ، يتكون مشروع تساقط الثلوج من العناصر التالية:

  • محتوى نصي عالي الجودة
  • الفيديو بتنسيق MP4 (قد يبدو لك أن هذه مجرد صور ديناميكية ، ولكن في الواقع ، هذه هي مقاطع الفيديو التي يمكن تشغيلها) ؛
  • صور مناسبة
  • تخطيط الصفحة جيد.

وهكذا ، أصبح مشروع تساقط الثلوج نفسا منعشًا لمستخدمي الإنترنت ، لأنه يجمع بشكل متناغم جميع العناصر المذكورة أعلاه. من الناحية الفنية ، من السهل جدًا استخراج العناصر الفردية ومعرفة كيفية عملها. على سبيل المثال ، يتم تنشيط الصور عندما تصل إلى موضع معين على الصفحة. في هذه الحالة ، تم استخدام البرنامج المساعد Inview لهذا الغرض. هناك طريقة أخرى لتحقيق هذا التأثير. للقيام بذلك ، تحتاج إلى استخدام JavaScript لتشغيل الصور في نقطة محددة في صفحة الويب. على سبيل المثال ، في إحدى المقالات على Pitchfork ، تتغير الصورة مع كل تمرير الماوس.

إذا نظرت إلى رمز الصفحة ، يصبح من الواضح أن هذا التأثير يتحقق من خلال مجموعة من الصور تحمل الاسم (XXXX-1.jpg) ، وما إلى ذلك ، بالإضافة إلى برنامج نصي يتطلب من الصفحة عرض الصور XXXX-1 (+ 1 ) .jpg مع كل التمرير لأسفل حتى نفد. بمعنى آخر ، يعرض النص أولاً الصورة XXXX-1.jpg ، ثم XXXX-2.jpg ، حتى يتم استنفاد قائمتهم. كما ترون ، كل شيء بسيط للغاية.

وبضع كلمات عن مشروع تساقط الثلوج. كما ذكر أعلاه ، يعد تخطيط الجودة أحد أهم مكوناته. هذا مثال جيد آخر على استخدام لغة CSS لوضع العناصر بصريًا على الصفحة. الشيء العظيم هو أن مؤلفي المشروع لم يجعلوا التصميم خياليًا جدًا. إنه لا يتعارض مع تصور النص ، بل على العكس ، يجعله أكثر مجازية ومفهومة.

هل ترغب في إنشاء نفس المحتوى؟ قدمت صحيفة نيويورك تايمز لقرائها تاريخًا مفصلاً عن إنشاء هذا المشروع. يبقى فقط للتعرف عليها.

يرجى ملاحظة النص باللغة الإنجليزية.

دعنا نلخص

سيتم تحديد مستقبل تسويق المحتوى من خلال تقنيات الويب القديمة والجديدة. الشيء الأكثر أهمية هو استخدامها بشكل صحيح من أجل استكمال المحتوى النصي الرئيسي بنجاح. حتى لو لم تكن مفاهيم jQuery و CSS و JavaScript جديدة ومخيفة ، فلا تشعر باليأس. بمرور الوقت ، سوف تبدأ في فهمها ، وبعد ذلك سيكون من الأسهل بالنسبة لك فهم التقنيات التي تقوم عليها أنواع المحتوى المختلفة.

بالطبع ، لا يمكنك إنشاء محتوى عالي الجودة ومتكامل دون مساعدة مطوري الويب والمصممين المحترفين. ومع ذلك ، يجب أن يكون لديك على الأقل فهم عام لتقنيات الويب إذا كنت تعمل في مجال تسويق المحتوى.

هل أنت على دراية بأحدث تقنيات تسويق المحتوى؟ هل تستخدمها عند إنشاء محتوى على موقع الويب الخاص بك؟ نحن نرحب بتعليقاتكم.

شاهد الفيديو: التسويق الالكتروني بالمحتوى. 7 اخطاء يرتكبها معظم المسوقين. Content Marketing (ديسمبر 2019).

Loading...

ترك تعليقك