مدخلمثال على إنشاء لافتة ديناميكية في لغة تأشير النص الفائق. إعلان بانر مستجيب باستخدام HTML5 و CSS3
منشئ إنشاء رمز اللافتة. يعد رسم رمز البانر عبر الإنترنت إجراءً بسيطًا ومباشرًا. لماذا نحتاج لافتة على الموقع؟
نضيف لافتة إلى الموقع للإعلان عن السلع والخدمات والترويج للعلامة التجارية وإظهار بضائعنا.
نضيف لافتة إلى الموقع للإعلان عن السلع والخدمات والترويج للعلامة التجارية وما إلى ذلك.
عند وضع رمز البانر على الموقع ، نريد إبراز شيء ما ، وبالتالي جذب الانتباه.
كيف يمكن استخدام اللافتات عمليا؟
يمكن أن يكون هناك عدد من الاحتمالات لاستخدام لافتة إعلانية. لنأخذ مثالاً من واقع الحياة. على سبيل المثال ، لقد قمت بالتسجيل في أحد البرامج التابعة. كجزء من هذا البرنامج ، تحصل على روابط تابعة يمكنك من خلالها الترويج لمنتجك.
كقاعدة عامة ، إلى جانب الترويج للمنتج ، من أجل زيادة دخلك ، تتلقى رابط إحالة لجذب شركاء آخرين.
كمواد في البرنامج التابع ، يمكن تزويدك بلافتات جاهزة. وهكذا ، عن طريق وضع كود البانرفي الشبكة ، على موقع الويب الخاص بك على سبيل المثال ، تقوم بالإعلان عن المنتج وتوظيف شركائك.
خدمة عبر الإنترنت للحصول على رمز البانر
بمساعدة هذا المولد ، يمكنك إنشاء رمز HTML والحصول عليه للزر أو الشعار الخاص بك. إذا لم تتمكن من كتابة الشفرة بنفسك ، فعند ملء النموذج ، ستتلقى HTML جاهزًا بنقرة واحدة ، والتي يمكن إدراجها في صفحات الموقع. |
الإعلان هو شيء ضروري لأي موقع. فقط تكلفة أدوات الإعلان أعلى من الدخل من ذلك. عندها يبدأ الكثيرون في أن يكونوا أذكياء من أجل توفير القليل على الأقل. لمثل هذه "المخادعة" سنخبرك كيف تصنع لافتة.
ما هي اللافتات
تعني لافتة على الإنترنت صورة إعلانية مستطيلة ذات محتوى ثابت أو ديناميكي (متحرك). يمكن أن يتضمن الشعار كلاً من النص والرسومات. عادةً ما يتم تزويد اللافتة برابط يتم تنشيطه بعد النقر فوقه بزر الماوس.
يرتبط النمو الحالي في فعالية إعلانات البانر باستخدام استهداف المحتوى. في الوقت نفسه ، يتم الإعلان فقط عن السلع والخدمات "المتوافقة" مع موضوع المورد على لافتات الموقع:
سيكون من الجيد معرفة كيف يمكنك إنشاء لافتة لموقع الويب الخاص بك. لكن أولاً ، عليك أن تفهم الأنواع الحالية من اللافتات. هناك الأنواع التالية:
- اللافتات الثابتة - تتكون من صورة ثابتة. إنها صور بتنسيق JPEG أو PNG. وتتميز بقلة وزنها الذي لا يؤثر على سرعة تحميل الصفحة.
- لافتات متحركة - رسوم متحركة تم إنشاؤها باستخدام GIF. يتكون من عدة صور ، مع استبدال بعضها البعض بتردد معين. يعتمد وزن اللافتة على عدد الصور المستخدمة فيه.
- الفلاش - في هذا الشعار المتحرك يعتمد على الفلاش. يمكنها الرد على إجراءات المستخدم.
يمكن أن يكون المحتوى التفاعلي في شكل لعبة أو استبيان مع صوت مضاف. يتم إنشاء رسومات للرسوم المتحركة باستخدام الرسومات المتجهة.
هناك العديد من أحجام الشعارات المختلفة لموقع الويب. لكن الأكثر شيوعًا هم:
- 88 × 31 بكسل ؛
- 120 × 60 بكسل ؛
- 120 × 90 بكسل ؛
- 120 × 240 بكسل ؛
- 125 × 125 بكسل ؛
- 120 × 600 بكسل ؛
- 160 × 600 بكسل ؛
- 180 × 150 بكسل ؛
- 234 × 60 بكسل ؛
- 240 × 400 بكسل ؛
- 250 × 250 بكسل ؛
- 300 × 600 بكسل ؛
- 300 × 250 بكسل ؛
- 336 × 280 بكسل ؛
- 150 × 150 بكسل ؛
- 468 × 60 بكسل ؛
- 728 × 90 بكسل.
علامات لافتة إعلانية فعالة
لا تعتمد فعالية لافتة إعلانية موضوعة على موقع ما على شعبية الموقع فقط. إلى حد كبير ، تعتمد فعاليتها على مستوى تنفيذ الإعلان نفسه. يجب أن يفي إعلان بانر عالي الجودة بعدة معايير أساسية:
- اجذب انتباه المستخدم - لكن هذا لا يعني أن اللافتة يجب أن تكون شديدة السطوع والوميض. مثل هذه الإعلانات ستزعج الزائر ، وليس الانتباه. يجب أن "يلمح" محتوى اللافتة المستخدم بشكل غير ملحوظ إلى وجوده. لذلك ، عند اختيار صورة ونص لها ، يجب دائمًا مراعاة العامل النفسي ؛
- إثارة الاهتمام - يجب أن تثير اللافتات الخاصة بالموقع اهتمام المستخدم بموضوع الإعلان. يجب تقديم منتج أو خدمة ليس فقط بذوق ، ولكن أيضًا بطريقة أصلية. يتم تشجيع استخدام الفكاهة والذكاء:
- يتم تحقيق الحافز لمتابعة رابط البانر بسبب تأثير بعض الغموض والبساطة ،
مضمن في محتوى الشعار. - الدافع لطلب خدمة أو شراء - يعتمد أولاً وقبل كل شيء على محتوى إعلان البانر. يجب أن يُظهر أفضل جوانب الكائن الإعلاني أو الفائدة التي يمكن أن يحصل عليها المستخدم من شرائه.
- إذا كان الهدف من اللافتة زيادة الوعي بالعلامة التجارية وزيادة صورتها ، فيجب أن يغرس المحتوى الإعلاني إحساسًا بالثقة لدى المستهلك. لكن لا تسبب ارتباطات سلبية في نفس الوقت.
الانتظامات التي يجب مراعاتها قبل وضع لافتة على موقع الويب:
- كلما زاد حجم الشعار ، زاد احتمال نقر المستخدم عليه. يعتبر الحجم الأكثر فاعلية هو 240 × 400 بكسل ؛
- إعلانات البانر الموضوعة في الأعلى (في الرأس) لها التأثير الأكبر. يمكن أيضًا وضعه على جانب الصفحة أو أسفلها ، لكن الفعالية أقل إلى حد ما هنا ؛
- يمكن للافتات المتحركة جذب انتباه المستخدم بسرعة - تتفاعل العين البشرية بشكل حدسي مع الحركة.
إنشاء ووضع لافتة إعلانية
قبل أن تقوم بإدراج لافتة على موقع ما ، عليك أن تقرر مكان وضعها. في هذه الحالة ، يجب أن تأخذ في الاعتبار حجم اللافتة والمساحة الخالية المتوفرة على الصفحات. بعد تحديد موقع الوحدة الإعلانية ، يمكنك إدخال رمز البانر في صفحة html.
يتطابق رمز معظم الشعارات مع النمط:
- a href = "/ رابط إلى موقع المعلن" - عنوان المورد الذي سيتم توجيه المستخدم إليه بالنقر فوق الشعار ؛
- title = "title" - النص المعروض في تلميح الأدوات المنبثقة عند التمرير فوق منطقة الشعار ؛
- target = "_ blank" - يحدد قواعد عرض موقع المعلن بعد النقر على رابط البانر ("_blank" - سيفتح في نافذة جديدة) ؛
- rel = "nofollow" - يمنع محركات البحث من معالجة هذا الارتباط ؛
- img src = "https: //www.site/wp-content/uploads/path to image" - يحدد المسار إلى الصورة المعروضة في الشعار ؛
- alt = "نص بديل" - النص الذي سيتم عرضه في الشعار إذا لم يتم تحميل صورته.
لكن ليس عليك تصميم لافتة بنفسك. للقيام بذلك ، يمكنك استخدام مولدات خاصة عبر الإنترنت. لإنشاء رمز بانر لمثل هذه الخدمة ، تحتاج إلى ملء عدة حقول والنقر فوق الزر:
أو يمكنك طلب إنشاء لافتة في استوديو احترافي. ثم سيكلف أكثر ... ها هي الأسعار التقريبية:
- تطوير لافتة GIF عادية - من 25 دولارًا ؛
- إنشاء لافتة على أساس الفلاش - 70-150 دولار ؛
- تغيير الحجم - حوالي 50٪ من سعره الأصلي.
ولكن إذا كنت ذكيًا بعض الشيء ، فيمكنك إنشاء لافتة بسيطة بنفسك. إليك معجزة بعد عشر دقائق من معالجة كود وصورة html في Coreldraw:
كود البانر:
إذا حصلت على القليل من الذكاء مع الكود وأضفت اثنين من معالجات الأحداث ، فستحصل على لافتة بها صورة متغيرة. تتغير الصورة في الشعار عندما تحوم فوقه.
إليكم ما حدث:
رمز المثال:
إنشاء لافتات متحركة وفيديو
لنلقِ نظرة على مثال عن كيفية عمل لافتة متحركة باستخدام برنامج Ulead GIF Animator.
في قائمة "ملف" ، حدد عنصر "معالج الرسوم المتحركة". في النافذة التي تظهر ، عيّن حجم لافتة المستقبل. في الخطوة التالية ، قم بتحميل الصور المعدة:
ثم يتم ضبط سرعة تغيير الصور في الرسم المتحرك. في نافذة صغيرة ، تظهر هذه السرعة من خلال تغيير الأرقام.
القدرة على التكيف- يعد هذا أحد المعايير المهمة للمواقع التي يتم إنشاؤها حاليًا. يستخدم العديد من المستخدمين شاشات الهاتف المحمول لتصفح الويب. إعلانات البانر شائعة على مواقع الويب وإعلانات البانر التقليدية ليست مرنة. يتم إصلاح لافتات Flash و GIF المتحركة بالبكسل ، لذا فهي غير متوافقة مع التنسيقات سريعة الاستجابة الحديثة.
نحن بحاجة إلى طريقة جديدة لعمل لافتة إعلانية.
نحن نحتاج لافتات مستجيبة …
شكل جديد لإعلانات البانر
الطريقة الوحيدة لجعل إعلانات البانر الخاصة بك متجاوبة مثل تنسيقات HTML5 هي جعلها مع HTML5 أيضًا. قد تبدو هذه فكرة مجنونة في البداية ، لكنني أؤكد لك أنها ليست كذلك. في الواقع ، هناك العديد من الفوائد للإعلانات المستندة إلى HTML.
- يمكن الوصول إلى إعلانات HTML بشكل كامل، والعلامات الدلالية تجعلها متوافقة مع قرارات مختلفة.
- نصوص وصور وفيديو وجافا سكريبت وأشكاليمكن استخدامه في لافتة تمامًا مثل أي صفحة ويب.
- يمكن أن تستخدم اللافتات نصوص خادم ديناميكيةوقواعد البيانات ، إذا لزم الأمر.
- يمكن أن تشغل إعلانات HTML مساحة صغيرة جدًا على القرص.
- خدمة لافتة هي في الأساس نفس استضافة الويب.
- لا توجد تقنية جديدة لمطوري الويب- هو نفس تطوير الويب العادي.
- وبالطبع، يمكن تغيير حجم إعلانات HTML5 إلى أي حجم باستخدام استعلامات وسائط CSS3- هذا هو بالضبط ما نحتاجه للافتات سريعة الاستجابة!
إذن كيف يمكننا إنشاء إعلانات متجاوبة؟
الحيلة الوحيدة هي جعل حجم iframe ديناميكيًا باستخدام استعلامات وسائط CSS3 ، وسأغطي ذلك بعد قليل ... ولكن بشكل أساسي ، هذا كل شيء!
دعونا نرى كيف يعمل
في ما يلي مثال لإعلان HTML5 معروض بالحجم الشائع 125 × 125 بكسل:
وإليك نفس إعلان العرض المرن:
لاحظ كيف يتفاعل الإعلان الثاني عند تغيير حجم نافذة المتصفح ... رائع جدًا! 🙂
تتطلب التخطيطات المتجاوبة أن يكون لعناصر الصفحة عروض متغيرة ، لذلك يجب أن تتبع الشعارات الآن هذا المطلب.
لا يهم ارتفاع البانر حقًا في التصميم سريع الاستجابة ، لذا يمكننا استخدام أي ارتفاع نريده. لكن اختيار ارتفاع لا يعني أن إعلاننا عالق عند هذا الارتفاع ، يمكننا تحديد ارتفاعات متعددة لكل إعلان!
للحفاظ على التوافق مع الإصدارات السابقة ، يجب أن تستخدم الإعلانات المتجاوبة نفس ارتفاعات البكسل مثل أحجام البانر التقليدية.
من الناحية النظرية ، يمكننا إنشاء إعلانات بانر سريعة الاستجابة تعمل بأي عرض أو ارتفاع ، ولكن هذا غير عملي للبناء أو الاختبار.
أقترح الالتزام بحد أدنى للعرض يبلغ 88 بكسل والحصول على مجموعة الارتفاعات الافتراضية التالية:
- 31 بكسل "ميكرو"
microbar (88 × 31) - 60 بكسل "زر"
الزر 2 (120 × 60)
شبه بانر (234 × 60)
بانر كامل (468 × 60) - 90 بكسل "بانر"
الزر 1 (120 × 90)
ليدربورد (728 × 90) - 125 بكسل "مستطيل صغير"
زر مربع (125 × 125) - 250 بكسل "مستطيل متوسط"
بانر عمودي (120 × 240 * قريب بما فيه الكفاية!)
نافذة منبثقة مربعة (250 × 250)
مستطيل متوسط (300 × 250) - 400 بكسل "مستطيل عريض"
مستطيل عمودي (240 × 400) - 600 بكسل "سكاي سكريبر"
سكاي سكريبر (120 × 600)
سكاي سكريبر عريض (240 × 600)
إعلان نصف صفحة (300 × 600)
تمنحنا ارتفاعات البكسل السبعة التي اخترتها أعلاه نطاقًا رأسيًا جيدًا وبعرض متغير ، فنحن نغطي أحجام إعلانات البانر الأكثر شيوعًا المستخدمة اليوم. بالطبع ، كما هو الحال مع الشعارات التقليدية ، يمكنك إنشاء أحجام مخصصة إذا كنت في حاجة إليها.
ليس هذا فقط ، ولكن تكلفة العرض التوضيحي لإعلان البانر أقل من 25 كيلوبايت (صورة HTML و CSS و JPG). هذا أقل من الحد الأقصى لحجم ملف بانر صغير واحد!
جرب أحجام البانر الجديدة هذه باستخدام مدقق الإعلانات المتجاوب.
تغيير حجم الإطارات باستخدام استعلامات وسائط CSS
قد تحتاج أحيانًا إلى ارتفاع إعلان متجاوب ، لذلك تحتاج إلى تغيير حجم إطار iframe باستخدام استعلامات وسائط CSS. أعتقد أن أفضل طريقة للقيام بذلك هي ضبط عرض وارتفاع إطار iframe على 100٪ ووضعهما في div بأبعاد محددة تم تعيينها في CSS. هكذا تبدو:
< div id = "ad" > < iframe src = "ad.html" الحد = "0" التمرير = "لا" allowtransparency = "صحيح" العرض = "100٪" الارتفاع = "100٪" النمط = "الحدود: 0 ؛" > < / iframe > < / div > |
وإليك CSS:
/ * الارتفاع الافتراضي * / #ad (الارتفاع: 60 بكسل ؛) @ شاشة الوسائط فقط و (الارتفاع: 90 بكسل) (/ * ارتفاع 90 بكسل * / #ad (الارتفاع: 90 بكسل ؛)) شاشة الوسائط فقط و (الارتفاع: 125 بكسل) ) (/ * ارتفاع 125 بكسل * / #ad (الارتفاع: 125 بكسل ؛))
/ * الارتفاع الافتراضي * / #ميلادي ( الارتفاع: 60 بكسل ؛ شاشةmedia فقط و (الارتفاع: 90 بكسل){ / * ارتفاع 90 بكسل * / #ميلادي ( الارتفاع: 90 بكسل ؛ شاشةmedia فقط و (الارتفاع: 125 بكسل){ / * ارتفاع 125 بكسل * / #ميلادي ( الارتفاع: 125 بكسل ؛ |
تتبع مرات الظهور والنقرات
أفضل شيء بخصوص إعلانات HTML5 هو أنه يمكن تتبعها باستخدام Google Analytics تمامًا كما تفعل على مواقع الويب العادية.
بانر (لافتة إنجليزية - علم ، لافتة) - صورة بيانية ذات طبيعة إعلانية ، تشبه وحدة الإعلان في الصحافة. يمكن أن تكون إما صورة ثابتة أو حتى نصًا ، أو يمكن أن تحتوي على عناصر متحركة (حتى كائنات فيديو وكائنات تفاعلية). كقاعدة عامة ، قد يحتوي على ارتباط تشعبي إلى موقع الويب الخاص بالمعلن أو صفحة بها معلومات إضافية. مهام اللافتة هي كما يلي. أولاً ، قم ببيع المنتج. وبالتالي - جذبانتباه الزائر ، فائدةعميل محتمل لديه منتج أو خدمة معلن عنها ، ادفعهم للذهاب إلى الموقع و الحث على العمل(دعوة للعمل). إن CTA هو الهدف النهائي للإعلان. وثانيًا ، تتمثل مهمة اللافتة في صورة أو إعلان للعلامة التجارية ، والغرض منها هو وزيادة الوعي بالعلامة التجاريةوبناء صورة إيجابية للعلامة التجارية.
أنواع الإعلانات الشائعة على الموقع:
- الرسم- نوع بسيط من البانر للإعلان على الإنترنت. يتكون من صورة بحجم معين وتحتوي على رابط لمورد إعلاني.
- بانر فلاش- لديه إمكانيات كبيرة للرسوم المتحركة ، فهو يسمح لك بنقل المعلومات بشكل أفضل باستخدام مجموعة من الرسومات المتجهة والنقطية
- شعار HTML5- دمج عناصر HTML مع الرسوم المتحركة والتصميم المرئي الجيد ، ومواءمتها مع أي جهاز ومتصفح.
الاختلافات الرئيسية بين HTML وأنواع أخرى من اللافتات
مقارنة بالطرق الأخرى لإنشاء لافتات ، توفر تقنيات HTML5 عددًا من المزايا لجذب الجمهور إلى أحد الموارد:
- سيتم عرض الإعلانات بهذا التنسيق على جميع الأجهزة بدون ملحقات متصفح إضافية.
يوفر HTML5 المزيد من الخيارات لدمج النماذج وأزرار الوسائط الاجتماعية والتقويمات والخرائط والتطبيقات الأخرى في إعلاناتك. - لا يؤثر الوزن الخفيف واستخدام موارد أقل على سرعة تحميل الصفحات في المتصفح. لا تسمح تقنيات الفلاش بتحقيق هذه النتيجة.
- لتقييم فعالية إعلانات بانر HTML5 ، يمكنك عرض الإحصائيات في Google Analytics. هناك يمكنك العثور على معلومات متنوعة حول الضيوف والنقرات على الروابط.
كان العيب الكبير في تقنية الفلاش هو التخلي التدريجي عن الشركات الكبرى مثل Apple و Mozilla و Amazon. كانت Google هي المحرك الرئيسي وراء اختفاء Flash. قاموا أولاً بإيقاف تشغيل رسوم الفلاش المتحركة في Google Chrome ، ثم تخلصوا من إعلانات الفلاش في خدمات الإعلان على شبكة البحث ، واختاروا HTML5.
طرق إنشاء لافتات HTML
يبدأ تطوير اللافتة بإنشاء صفحة منفصلة ويتم تضمينها في الموقع من خلال "iframe". هناك عدة طرق لتطوير اللافتات الإعلانية للموقع نعتبرها الأكثر شهرة.
1. قم بإنشاء إطار باستخدام CSS3 و JavaScript
يسمح لك الإطار بتحميل أي مستندات مستقلة في منطقة ذات أحجام محددة. يمكن أن يكون رمز HTML مختلفًا باستخدام أنماط ونصوص للزينة. من الممكن أيضًا تنفيذ لافتة من خلال منطقة "Canvas" ، حيث يتم تطوير الرسوم المتحركة والرسومات والرسومات وحتى الألعاب باستخدام JavaScript. لتسريع التطوير ، يُسمح باستخدام مكتبات الطرف الثالث ، على سبيل المثال CreateJS.
فوائد:
- لا تقتصر الوظيفة على أي برامج ، يمكنك تنفيذ أي شيء.
سلبيات:
- هذه العملية معقدة للغاية وتتطلب مهارات تخطيط خاصة.
- تكاليف العمالة الكبيرة من حيث الوقت بالنسبة للطرق الأخرى.
2. Adobe Edge Animate
أولئك الذين يعرفون Adobe After Effects سيجدون واجهة Adobe Edge Animate مألوفة جدًا. يحتوي Adobe Edge Animate على وظائف محدودة تهدف إلى تطوير محتوى متحرك بسيط باستخدام HTML5 و JavaScript و CSS3. يدعم البرنامج استيراد تنسيقات مثل .svg ، .png ، .jpeg ، .gif ، HTML ؛ دعم تنسيقات الفيديو والصوت.
يوجد أكثر من 30 تأثيرًا مدمجًا ، مما يبسط وقت إنشاء رسوم متحركة عالية الجودة عدة مرات:
فوائد:
- هناك العديد من دروس الفيديو المتوفرة على الويب حول استخدام البرنامج.
- وظائف بسيطة ، معظم العمليات مؤتمتة.
- لا يتطلب البرنامج معرفة HTML5 و JavaScript و CSS3.
- عند الانتهاء من العمل ، نتلقى جميع المستندات اللازمة لوضع اللافتة على الموقع. الصور - مجلد به عناصر رسومية لافتة ، والعديد من ملفات JavaScript ، وملفات html وملف - للتحرير اللاحق للملف في البرنامج.
- يتم دعم اللافتة النهائية من قبل جميع المتصفحات الحديثة وتطبيقات الهاتف المحمول ، وتلبي جميع المتطلبات الفنية للحملات الإعلانية في Yandex و Google.
سلبيات:
- الواجهة باللغة الإنجليزية فقط.
- منذ عام 2015 ، توقفت Adobe عن تطوير مشروع Adobe Edge Animate ، ولم يتم تحديث البرنامج منذ ذلك الوقت ووصل إلى حد التطوير. لا تزال Edge Animate متاحة للتنزيل من أرشيفات Creative Cloud.
3. Adobe Animate CC
Animate CC هو منتج Adobe Flash Professional تم إعادة تسميته. في الآونة الأخيرة ، فقدت تقنية Flash ثقة المستخدمين ، ويحتاج البرنامج إلى تغيير الاسم والعديد من التحسينات. في الأساس ، هذا هو نفس برنامج Flash Professional ، ولكن يتم فيه حفظ الملفات بشكل إضافي في HTML5 و JavaScript.
الواجهة شبيهة جدًا ببرنامج Flash Professional ، لكن تختلف إمكانيات البرامج.
فوائد:
- القدرة على إنشاء رسومات ثلاثية الأبعاد. هناك أداة كاميرا تسمح لك بالتقاط عمق الإطار للرسوم المتحركة الحقيقية.
- بخلاف Edge Animate ، يحتوي Animate CC على مجموعة كبيرة من فرش المتجهات والقدرة على العمل باستخدام رسومات نقطية.
- البرنامج جديد نسبيًا ، لذا تعمل Adobe بنشاط على تطوير المشروع وإصدار التحديثات وتحسين Animate CC.
- هناك نسخة باللغة الروسية.
- خيارات موسعة لتصدير ملف إلى تنسيقات: JavaScript / Html ، jpeg ، png ، oam ، svg ، mov ، gif. بالضغط على زر واحد ، يتم حفظ عناصر البانر في نقوش متحركة ، وبالتالي تقليل وقت تحميل الشعار.
سلبيات:
- حداثة البرنامج هي أيضا عيب. لا يوجد العديد من دروس الرسوم المتحركة في Animate CC كما هو الحال في Adobe Edge Animate. لذلك فإن عمل بعض الوظائف يحتاج إلى الدراسة بشكل مستقل ، وهذا ليس بالأمر السهل. البرنامج صعب للغاية للدراسة المستقلة ، لكن يمكنك معرفة ذلك.
- بعض الميزات غير مؤتمتة كما هو الحال في Edge Animate ، مما يزيد أيضًا من وقت إنشاء الشعارات.
4. Google Web Designer
يسرنا Google باستخدام محرر مجاني تم إنشاؤه خصيصًا لتنفيذ لافتات html. تم تصميم Google Web Designer تمامًا نحو تنفيذ الإعلانات ، حيث يتم توجيه انحيازها الأساسي نحو AdWords.
إذا نظرنا إلى النافذة لإنشاء ملف جديد ، فسنلاحظ أن أحجام نموذج الإعلان مضمنة بالفعل في البرنامج.
فوائد:
- واجهة بسيطة.
- توافر قوالب للدعاية على جوجل.
- برنامج مجاني تماما.
- توافر نسخة باللغة الروسية.
- تم وضع تصميم بانر سريع الاستجابة ، سيبدو html-banner رائعًا في أي دقة شاشة.
سلبيات:
- وظائف Google Web Designer محدودة بما يكفي لإنشاء روائع من الرسوم المتحركة. البرنامج مقيد بشكل كبير بالقوالب.
- قلة البرامج التدريبية. مساعدة Google ليست كافية لتعليم الوظيفة بشكل كامل.
جميع الأساليب المذكورة أعلاه ليست جديدة ، لكنها مجربة. هذا يعني أن هناك ضمانًا بأن لافتات html التي تم إنشاؤها سيتم الإشراف عليها على معظم منصات الإعلان ، نظرًا لأن متطلباتها الفنية تتوافق مع المعايير العامة.
لنقم بإنشاء لافتة إعلانية باستخدام CSS3. حاليًا ، فقط متصفحات Firefox و WebKit تدعم الرسوم المتحركة CSS3 بشكل كامل. لكن من السهل جعل اللافتة تعمل في المتصفحات الأخرى. ومع ذلك ، لا يجب أن تتوقع أداءً رائعًا في كل مكان (خاصة في IE 7 وما فوق) لتجربة أحدث تقنيات CSS.
ملحوظة:تم حذف جميع بادئات بائع المستعرض لتوفير مساحة الصفحة. انظر شفرة المصدر.
ترميز HTML
أولاً ، لنلقِ نظرة على بنية إعلان بانر في HTML. في هذه المرحلة ، نحتاج إلى تخيل كيفية عمل الرسوم المتحركة:
ضائع؟
استرخ - سنساعدك.
لفهم أعمق لهيكل العلامات ، دعنا نركز على القارب:
هناك ثلاث رسوم متحركة تحدث مع القارب:
انزلاق القارب إلى اليسار. ينطبق على قائمة (مجموعة) غير مرتبة.
تقليد زورق يتأرجح على الماء. ينطبق على عنصر القائمة (القارب).
ظهور علامة الاستفهام. ينطبق على عنصر div (علامة الاستفهام).
إذا نظرت إلى صفحة العرض التوضيحي ، يمكنك أن ترى أن الرسوم المتحركة لعنصر القائمة (القارب) تؤثر أيضًا على عنصر div الموجود بداخلها (علامة الاستفهام). أيضًا ، تؤثر حركة "الانزلاق للخارج" لقائمة غير مرتبة على عنصر القائمة (القارب وعلامة الاستفهام).
ومن ثم ، يمكننا أن نستنتج أن الأطفال يتلقون رسومًا متحركة من آبائهم بالإضافة إلى أفعالهم. الآن كل ما تبقى هو سرد الهياكل الأصل / الطفل.
CSS
قبل أن نبدأ في تحليل كيفية إنشاء الرسوم المتحركة ، نحتاج إلى ضمان التوافق مع الإصدارات السابقة مع المتصفحات القديمة.
التوافق
سنضمن التوافق مع الإصدارات السابقة بمجرد تصميم الترميز كما لو لم تكن هناك رسوم متحركة لـ CSS على الإطلاق. إذا نظر شخص ما إلى الصفحة في متصفح قديم ، فسيرى صورة ثابتة عادية ، وليست مساحة بيضاء فارغة.
على سبيل المثال: إذا كنت تستخدم CSS؟ على غرار ما يلي ، ستكون هناك مشاكل:
/* خاطئ! * /keyframe our-fade-in-animation (0٪ (عتامة: 0 ؛) 100٪ (عتامة: 1 ؛)) div (عتامة: 0 ؛ / * هذا div مخفي افتراضيًا - أوه! * / الرسوم المتحركة: 1s - تتلاشى في الرسوم المتحركة 1 ؛)
إذا كان المستعرض لا يدعم الرسوم المتحركة ، فسيظل عنصر div غير مرئي للمستخدم.
هذه هي الطريقة التي نضمن بها التوافق مع الإصدارات السابقة مع المتصفحات القديمة:
/ * CORRECT * /keyframe our-fade-in-animation (0٪ (عتامة: 0 ؛) 100٪ (عتامة: 1 ؛)) div (عتامة: 1 ؛ / * هذا div مرئي افتراضيًا * / رسوم متحركة: 1s - تتلاشى في الرسوم المتحركة 1 ؛)
سيتم عرض عنصر div الآن حتى إذا فشلت الرسوم المتحركة في البدء. وفي المتصفحات الحديثة ، سيتم إخفاء div أولاً أثناء الرسوم المتحركة.
الأساس
نحن الآن نعرف كيفية ضمان التوافق مع الإصدارات السابقة (مما سيساعد في تجنب المشاكل عند العمل مع مشاريع حقيقية). حان الوقت لإنشاء جوهر كود CSS الخاص بنا.
هناك 3 نقاط يجب وضعها في الاعتبار:
نظرًا لأنه سيتم استخدام اللافتة في مواقع مختلفة ، سنجعل جميع محددات CSS الخاصة بنا خاصة.سيبدأون جميعًا بمعرّف # ad-1. وبالتالي ، سنحاول تجنب تداخل الكود الخاص بنا مع كود الموقع.
نحن نتجاهل عن قصد تأخير الرسوم المتحركةفي المنشآت. إذا كنت تستخدم تأخير الرسوم المتحركة عند التصميم برؤية العنصر الافتراضية ، فسوف تتعطل بنية الشعار عن طريق الاختفاء المفاجئ أو عودة ظهور أجزاء من الصورة بعد انتهاء الرسم المتحرك. يتم محاكاة تأخير الرسوم المتحركة بواسطة مدة الإطارات وإعدادها.
عندما يكون ذلك ممكنا استخدم رسمًا متحركًا واحدًا لعدة عناصر.وبالتالي ، فإننا نوفر الوقت ونقلل من حجم الكود.
لذلك دعونا ننشئ أساس البانر الخاص بنا. دعنا نضع لها الموضع النسبي بحيث يمكن وضع العناصر الداخلية بشكل صحيح. سيخفي أيضًا كل شيء خارج العنصر:
# ad-1 (العرض: 720 بكسل ؛ الارتفاع: 300 بكسل ؛ تعويم: يسار ؛ الهامش: 40 بكسل تلقائي 0 ؛ صورة الخلفية: url (../ images / ad-1 / background.png) ؛ موضع الخلفية: المركز ؛ الخلفية -تكرار: عدم التكرار ؛ تجاوز: مخفي ؛ الموضع: نسبي ؛ ظل الصندوق: 0px 0px 6px # 000 ؛)
ثم نقوم بتصميم النص وحقول الإدخال. نسمي الرسوم المتحركة المناسبة. تحتاج أيضًا إلى التأكد من احتواء المحتوى على أعلى فهرس z للأجزاء المتحركة حتى لا تتداخل:
# ad-1 #content (width: 325px؛ float: right؛ margin: 40px؛ text-align: center؛ z-index: 4؛ position: dynamic؛ overflow: visual؛) # ad-1 h2 (font-family: "Alfa Slab One" ، مخطوطة ؛ اللون: # 137dd5 ؛ حجم الخط: 50 بكسل ؛ ارتفاع الخط: 50 بكسل ؛ ظل النص: 0 بكسل 0px 4px #fff ؛ الرسوم المتحركة: الرسوم المتحركة المتأخرة المتلاشية 7s 1 easy-in-out ؛ / * ظهور h2 مع تأخير محاكاة * /) # ad-1 h3 (مجموعة الخطوط: "Boogaloo" ، مخطوطة ؛ اللون: # 202224 ؛ حجم الخط: 31 بكسل ؛ ارتفاع الخط: 31 بكسل ؛ ظل النص: 0 بكسل 0 بكسل 4px #fff؛ animé: delayed-fade-animation 10s 1 easy-in-out؛ / * ظهور h3 مع تأخير محاكى * /) # ad-1 form (margin: 30px 0 0 6px؛ position: النسبي ؛ الرسوم المتحركة: شكل الرسوم المتحركة 12s 1 easy-in-out؛ / * Ease-in-out؛ / * مرر نموذج البريد الإلكتروني للخارج مع تأخير مقلد * /) # ad-1 #email (العرض: 158 بكسل ؛ الارتفاع: 48 بكسل ؛ تعويم: يسار ؛ المساحة المتروكة: 0 20 بكسل ؛ حجم الخط: 16 بكسل ؛ عائلة الخطوط: "Lucida Grande"، sans-serif؛ color: #fff؛ text-shadow: 1px 1px 0px # a2917d؛ border-top-left-radius: 5px؛ borde r-bottom-left-radius: 5px ؛ الحد: 1 بكسل صلب # a2917d ؛ المخطط التفصيلي: لا شيء ؛ مربع الظل: -1 بكسل -1 بكسل 1 بكسل #fff ؛ لون الخلفية: # c7b29b ؛ صورة الخلفية: تدرج خطي (أسفل ، RGB (216،201185) 0 ٪ ، RGB (199،178،155) 100 ٪) ؛ ) # ad-1 #email: focus (background-image: linear-gradient (bottom، rgb (199،178،155) 0٪، rgb (199،178،155) 100٪)؛) # ad-1 #submit (height: 50px ؛ float: left ؛ cursor: pointer؛ padding: 0 20px؛ font-size: 20px؛ font-family: "Boogaloo"، cursive؛ color: # 137dd5؛ text-shadow: 1px 1px 0px #fff؛ border-top-right-radius: 5px ؛ نصف قطر الحد السفلي الأيمن: 5 بكسل ؛ الحد: 1 بكسل صلب # bcc0c4 ؛ الحد الأيسر: لا شيء ؛ لون الخلفية: #fff ؛ صورة الخلفية: التدرج الخطي (أسفل ، rgb (245247249) 0٪ ، rgb ( 255،255،255) 100 ٪) ؛) # ad-1 #submit: تحوم (صورة الخلفية: التدرج الخطي (أسفل ، rgb (255،255،255) 0٪ ، rgb (255،255،255) 100٪) ؛)
الآن دعونا نصمم الماء ونحركه وفقًا لذلك:
# ad-1 ul # water (/ * إذا كنت بحاجة إلى رسم متحرك آخر للمياه ، يمكنك إضافته هنا * /) # ad-1 li # water-back (width: 1200px؛ height: 84px؛ background-image: url ( .. /images/ad-1/water-back.png) ؛ تكرار الخلفية: تكرار x ؛ مؤشر z: 1 ؛ الموضع: مطلق ؛ أسفل: 10 بكسل ؛ يسار: -20 بكسل ؛ رسوم متحركة: حركة خلفية مائية 3s لانهائية سهولة في الخروج ؛ / * محاكاة اللف الموجي * /) # ad-1 li # water-front (العرض: 1200 بكسل ؛ الارتفاع: 158 بكسل ؛ صورة الخلفية: url (../ images / ad-1 / water) -front .png) ؛ تكرار الخلفية: تكرار x ؛ z-index: 3 ؛ الموضع: مطلق ؛ أسفل: -70 بكسل ؛ يسار: -30 بكسل ؛ رسوم متحركة: رسوم متحركة أمامية 2 ثانية سهولة غير محدودة للداخل ؛ / * تقليد آخر لموجات اللف. سيتم تشغيل الرسوم المتحركة بشكل أسرع قليلاً لإنشاء تأثير منظور. * /)
دعونا نصمم القارب وعناصره. نسمي أيضًا الرسوم المتحركة المقابلة:
# ad-1 ul # boat (العرض: 249 بكسل ؛ الارتفاع: 215 بكسل ؛ مؤشر z: 2 ؛ الموضع: مطلق ؛ أسفل: 25 بكسل ؛ يسار: 20 بكسل ؛ تجاوز: مرئي ؛ رسوم متحركة: قارب في الرسوم المتحركة 3s 1 سهولة الخروج ؛ / * تحريك المجموعة عند بدء الإعلان * /) # ad-1 ul # boat li (width: 249px؛ height: 215px؛ background-image: url (../ images / ad-1 / boat.png)؛ الموضع: مطلق ؛ أسفل: 0 بكسل ؛ يسار: 0 بكسل ؛ فائض: مرئي ؛ رسوم متحركة: رسم متحرك للقارب 2 ثانية سهل الخروج بلا حدود ؛ / * محاكاة القارب المتمايل على الماء - على غرار الرسوم المتحركة المستخدمة بالفعل على الماء نفسه. * /) # ad-1 # علامة استفهام (العرض: 24 بكسل ؛ الارتفاع: 50 بكسل ؛ صورة الخلفية: url (../ images / ad-1 / question-mark.png) ؛ الموضع: مطلق ؛ اليمين: 34 بكسل ؛ أعلى: -30 بكسل ؛ الرسوم المتحركة: تلاشي متأخر للرسوم المتحركة 4 ثوانٍ 1 سهولة في الخروج ؛ / * تلاشي في علامة الاستفهام * /)
الآن دعونا نصمم الغيوم. لهذه سوف نستخدم الرسوم المتحركة مع تأثير الحركة الذي لا نهاية له. يوضح الرسم التوضيحي جوهر الفكرة:
وهنا كود CSS:
# ad-1 #clouds (الموقف: مطلق ؛ أعلى: 0 بكسل ؛ z-index: 0 ؛ الرسوم المتحركة: الرسوم المتحركة السحابية 30 ثانية خطي لانهائي ؛ / * مرر السحب إلى اليسار ، أعد التعيين والتكرار * /) # ad-1 # مجموعة السحابة -1 (العرض: 720 بكسل ؛ الموضع: مطلق ؛ اليسار: 0 بكسل ؛) # ad-1 # cloud-group-2 (العرض: 720 بكسل ؛ الموضع: مطلق ؛ اليسار: 720 بكسل ؛) # ad-1 .cloud- 1 (العرض: 172 بكسل ؛ الارتفاع: 121 بكسل ؛ صورة الخلفية: url (../ images / ad-1 / cloud-1.png) ؛ الموضع: مطلق ؛ أعلى: 10 بكسل ؛ يسار: 40 بكسل ؛) # ad-1. cloud-2 (العرض: 121 بكسل ؛ الارتفاع: 75 بكسل ؛ صورة الخلفية: url (../ images / ad-1 / cloud-2.png) ؛ الموضع: مطلق ؛ أعلى: -25 بكسل ؛ يسار: 300 بكسل ؛) # إعلان -1. cloud-3 (العرض: 132 بكسل ؛ الارتفاع: 105 بكسل ؛ صورة الخلفية: url (../ images / ad-1 / cloud-3.png) ؛ الموضع: مطلق ؛ أعلى: -5 بكسل ؛ اليسار: 530 بكسل ؛ )
الرسوم المتحركة
تذكير:من الآن فصاعدًا ، لا يوجد شيء متحرك بالفعل. إذا نظرت إلى لافتة لدينا الآن ، فسترى صورة ثابتة. هذا هو المكان الذي يتم فيه إنشاء الرسوم المتحركة التي تم استدعاؤها في الكود أعلاه.
الآن دعونا نبث الحياة في صورتنا الثابتة الجميلة:
/ * تُستخدم الرسوم المتحركة ذات التأخير المحاكي لعرض عناصر متعددة. يتم محاكاة التأخير عن طريق بدء العملية مع استمرار 80٪ من الرسوم المتحركة (وليس فورًا). لذا يمكنك محاكاة أي تأخير: * /keyframes delayed-fade-animation (0٪ (opacity: 0؛) 80٪ (opacity: 0؛) 100٪ (opacity: 1؛)) / * Animation لعرض نموذج باستخدام عنوان بريد إلكتروني وزر. تُستخدم محاكاة وقت الاستجابة أيضًا * /keyframes شكل رسوم متحركة (0٪ (عتامة: 0 ؛ يمين: -400 بكسل ؛) 90٪ (عتامة: 0 ؛ يمين: -400 بكسل ؛) 95٪ (عتامة: 0.5 ؛ يمين: 20 بكسل ؛ ) 100٪ (عتامة: 1 ؛ يمين: 0 بكسل ؛)) / * تُستخدم هذه الرسوم المتحركة لإخراج القارب من الشاشة في بداية الفيديو: * /keyframes boat-in-animation (0٪ (يسار: -200 بكسل ؛ ) 100٪ (يسار: 20 بكسل ؛)) / * الرسوم المتحركة للسحب. تبدأ المجموعة الأولى من السحب في التحرك من المركز ، والثانية - إلى يمين الشاشة. تظهر المجموعة الأولى ببطء من الشاشة ، بينما تظهر المجموعة الثانية على اليمين. بمجرد إخفاء المجموعة اليسرى تمامًا ، تعود السحب إلى موقعها الأصلي بسرعة كبيرة: * /keyframes cloud-animation (0٪ (left: 0px؛) 99.9999٪ (left: -720px؛) 100٪ (left: 0px؛) )) / * الرسوم المتحركة الثلاثة الأخيرة هي نفسها تقريبًا - يكمن الاختلاف في تحديد موضع العناصر. إنها تحاكي ارتطام موجات المحيط: * /keyframes حركة القارب (0٪ (أسفل: 0 بكسل ؛ يسار: 0 بكسل ؛) 25٪ (أسفل: -2 بكسل ؛ يسار: -2 بكسل ؛) 70٪ (أسفل: 2 بكسل ؛ يسار: - 4 بكسل ؛) 100٪ (أسفل: -1 بكسل ؛ يسار: 0 بكسل ؛)) @ keyframes حركة خلفية مائية (0٪ (أسفل: 10 بكسل ؛ يسار: -20 بكسل ؛) 25٪ (أسفل: 8 بكسل ؛ يسار: -22 بكسل ؛ ) 70٪ (أسفل: 12 بكسل ؛ يسار: -24 بكسل ؛) 100٪ (أسفل: 9 بكسل ؛ يسار: -20 بكسل ؛)) رسوم متحركة أمامية على شكل keyframes (0٪ (أسفل: -70 بكسل ؛ يسار: -30 بكسل ؛) 25٪ (أسفل: -68 بكسل ؛ يسار: -32 بكسل ؛) 70٪ (أسفل: -72 بكسل ؛ يسار: -34 بكسل ؛) 100٪ (أسفل: -69 بكسل ؛ يسار: -30 بكسل ؛))
استنتاج
في هذا البرنامج التعليمي ، تعلمنا بعض المفاهيم الأساسية:
- تتلقى العناصر السليفة رسومًا متحركة من والديهم بالإضافة إلى الرسوم المتحركة الخاصة بهم.
- عند إنشاء لافتة ، يجب أن تسعى جاهدة لاستخدام معرّف فريد لتجنب تداخل الكود مع مشروع CSS موجود.
- يجب اختيار موضع العناصر ونمطها كما لو لم تكن الرسوم المتحركة متاحة للحفاظ على التوافق مع الإصدارات السابقة.
- إذا أمكن ، يجب عليك استخدام رسم متحرك واحد لعدة عناصر.