كيفية بناء إعلان HTML5 تفاعلي في 10 دقائق
مع زوال Flash ، تم تمرير مسؤولية الإعلانات التفاعلية إلى HTML5. هنا نتعلم كيفية إنشاء إعلان HTML5 تفاعلي خلال 10 دقائق فقط.
اليوم نود أن نوضح كيفية إنشاء إعلان بانر HTML5 تفاعلي.
كان هذا مشروعًا قمنا به كارلسبرغ لفترة من الزمن ، والتي نعتقد أنها يمكن أن تكون مفيدة للمصممين والمبرمجين المهتمين بأعمال التصميم الأمامية.
Carlsberg هي علامة تجارية عالمية للبيرة تبلغ قيمتها عدة مليارات من الدولارات وتوظف أكثر من 40000 شخص حول العالم. إلى جانب العلامة التجارية المنزلية Carlsberg ، فإنها تضم أيضًا ماركات أخرى مثل Tuborg و Somersby (cider) و Kronenbourg و Dali Beer (علامة تجارية سريعة النمو في آسيا).
ما هو الإعلان التفاعلي؟
دعونا نفعل ملخص سريع. في الأيام القديمة ، كان لدينا إعلانات نصية ، وهي في الأساس عبارة عن نشرة دعائية قصيرة النص تحتوي على رابط إلى صفحة المعلن أو منتجه أو خدمته.
ثم جاءت إعلانات البانر الثابتة. هذه هي صور ثابتة عادة. فهم أكثر إقناعًا بالإعلانات النصية ، لأن الصور تساوي ألف كلمة. تنسيقات رئيسية تأتي في 300 × 250 بكسل (مربع) ، 728 × 90 (واسعة) أو 90 × 728 (ناطحة سحاب).
ثم ، لعبة فلاش التكنولوجيا على طول متصفح سطح المكتب. كان فلاش ثوريًا ، لأنه مكن من ظهور إعلانات بانر متحركة ، بالإضافة إلى إعلانات تفاعلية. الإعلانات الجذابة تجذب انتباه المستخدم مما يؤدي إلى الحصول على نسبة نقر إلى ظهور أعلى (CTR). يمكن للاعبين حتى لعب لعبة صغيرة مثل اطلاق النار شيء ما ، أو رمي الكرة في الطوق.
في عام 2010 ، أقنعت Apple العالم بفضائل التحول إلى HTML5 ، ومع الشركات العملاقة بما في ذلك Google ، حذفت تقنية Flash بسرعة.
ترى شركات تكنولوجيا الإعلانات إمكانات النمو الهائلة في الجوّال ، وبالتالي بدأت في تشغيل HTML5 في وحدة إعلانية جديدة عبر الأنظمة الأساسية. تُعرف هذه الوحدة بالإعلان التفاعلي HTML5 ، مدعومًا بمعايير صناعية جديدة مثل MRAID و MRAID2.
قصة قصيرة طويلة ، إعلان HTML5 تفاعلي ، هو الإعلان الذي يعمل الآن على الهواتف الذكية والأجهزة اللوحية ومتصفحات سطح المكتب.
ما هو هذا الإعلان كارلسبيرج؟
هنا وصلة للفيديو التي تعرض الإعلان التفاعلي الذي يعمل على iPhone:
الهدف من هذا الإعلان التفاعلي هو رفع الوعي حول بطولة العالم للرجبي للسباع ، وهو حدث سنوي للرجبي يحدث في هونغ كونغ. تتنافس أفضل الفرق من جميع أنحاء العالم سنوياً للفوز بالجائزة الأولى. Carlsberg هو واحد من الرعاة الرئيسيين.
تجربة الإعلان بسيطة. يرى المستخدمون زجاجة بيرة Carlsberg متوهجة. رسالة تطلب من المستخدم أن ينقر على الزجاجة المتوهجة.
عند التنصت عليه ، يتم تشغيل رسوم متحركة قصيرة للاعب رجبي يحمل دلوًا باردًا مثلجًا من بيرة Carlsberg.
يظهر شعار العلامة التجارية الممتعة: "هل أنت جاهز للبيرة"؟
يمكن للمستخدمين بعد ذلك النقر على رابط "العثور على فيسبوك" لزيارة صفحة المعلن لمزيد من المعلومات.
العودة إلى البرمجة العادية
يتكون إعلان HTML5 التفاعلي من 5 عناصر رئيسية:
- index.html (نقطة الدخول الرئيسية)
- main.js (javascript الذي يحتوي على المنطق)
- main.css (ورقة أنماط CSS)
- الأصول (الأصول المرئية)
- الرابط الخارجي (حيث يجب أن يأخذ الإعلان المستخدمين)
لنبدأ في بناء الإعلان ...
الجزء 1: index.html
يتكون index.html من إعلانات HTML القياسية.
انظر القلم Carlsberg Interactive Ad Demo - index.html بن شونغ ( marketjs ) على CodePen .
ما يهم هنا هو إطار عرض العلامة الوصفية ورابط main.css و main.js
كما ترون ، الأمر بسيط إلى حد ما. لا شيء خارج عن المألوف.
الجزء الثاني: main.js (اللحوم والعظام)
main.js هو ملف Javascript الذي يحرك كل التفاعل مع الإعلان.
انظر القلم Carlsberg Interactive Ad Demo - main.js بن شونغ ( marketjs ) على CodePen .
في الجزء العلوي ، نقوم بإدراج JS المشطوف بأكمله. لاحظ أنه يمكنك استخدام أحدث إصدار من jQuery from http://jquery.com/
سيكون jQuery مفيدًا لمعظم تقنيات معالجة DOM التي نستخدمها.
بعد ذلك ، نقوم بإنشاء وظيفة التحميل المسبق للصورة البسيطة.
نقوم بتحميل مجموعة من الأصول الرسومية المرتبطة بالإعلان مسبقًا.
الآن ، إلى المنطق. عندما يتم تحميل الإعلان ، ستلاحظ أننا أنشأنا 2 divs ، يطلق عليه scene1 و scene2 .
scene1 يحتوي على قسم زجاجة متوهجة. عند النقر عليه ، ينتقل إلى scene2 ، عبر وظيفة gotoScene2
scene2 نفسه يحتوي على div tagline ، الذي يعيد التوجيه إلى صفحة Facebook من Carlsberg ، عند النقر فوقها.
هذا هو في الأساس. هناك حاجة إلى منطق بسيط للغاية.
الجزء 3: main.css (ورقة الأنماط)
يحتوي ملف main.css على جميع الأنماط المرتبطة بـ CSS.
انظر القلم Carlsberg Interactive Ad Demo - main.css بن شونغ ( marketjs ) على CodePen .
في هذا المثال ، قمنا ببعض الرسوم المتحركة الرائعة التي تراها عبر CSS
على سبيل المثال ، تستخدم زجاجة بيرة متوهجة القيمة الوامضة من خاصية -webkit-animation
نضيف أيضًا بعض الخوارزميات القياسية التي يميل المستخدمون إلى حبها ، مثل bounceIn و bounceOut
الجزء 4: الأصول المرئية
تتطلب الإعلانات التفاعلية مرئيات مرحة مرتبطة بالعلامة التجارية. لذلك ، من المستحسن العمل مع مصمم على إعلانات HTML5 التفاعلية.
في حالتنا نحن استخدمنا: الخلفية الخضراء الفارغة. الزجاجة؛ الخلفية مع رجل الرجبي يحمل دلو الثلج البارد من البيرة ؛ الرسومات التي تحث على اتخاذ إجراء.
الجزء 5: دعوة إلى العمل (CTA)
هذا هو الجزء الأكثر أهمية لأي إعلان تفاعلي. يجب تصميم العبارة التي تحث المستخدم على اتخاذ إجراء بشكل جيد ، بحيث يريد المستخدمون فعلاً النقر عليها لمعرفة المزيد.
يجب أن تكون رسالة مقنعة ترتبط بفضول المستخدم.
ملخص
نأمل أن تكون هذه المقالة مفيدة للمجتمع. كما ترى ، فإن هذا الإعلان التفاعلي سهل الإنشاء ولا يستغرق أكثر من 10 دقائق لتجميعه.
انقر هنا لتنزيل ملفات المشروع وشفرة المصدر.