بنر تبلیغاتی 150 در هر کد html. بنر تبلیغاتی ریسپانسیو با استفاده از HTML5 و CSS3. داخلش چیه؟ چرا در آرشیو؟ چرا این همه فایل وجود دارد؟

بنرهای HTML5

از 2299 روبل

در حال حاضر، بنرهای HTML5 تنها قالب فعلی برای تبلیغات بنر متحرک تمام عیار هستند. این قالب چند پلتفرمی جهانی جایگزین بنرهای فلش شد که دارای محدودیت ها و معایبی بود.

دلایل اصلی این امتناع به شرح زیر است:

• ادعاهایی علیه فناوری Flash در زمینه امنیت رایانه و افزایش مصرف قدرت پردازنده دستگاه های تلفن همراه انباشته شده است.
• برخی از مرورگرها به طور پیش فرض شروع به مسدود کردن فلش کرده اند.
• در دستگاه های تلفن همراه iOS (iPhone، iPad)، صفحه نمایش فلش توسط سازنده ارائه نشده است.
• محبوبیت برنامه های مسدود کننده تبلیغات بنر فلش.
• امتناع از پشتیبانی بیشتر و توسعه فناوری Flash توسط مالک آن، Adobe.

بنرهای متحرک HTML5 را می توان بدون محدودیت در هر مرورگر، روی صفحه نمایش هر دستگاهی، از جمله گوشی های هوشمند، تبلت ها و تلویزیون های رسانه ای نمایش داد. این کراس پلتفرم و تطبیق پذیری آنهاست.

برای مشتری، استفاده از بنرهای HTML5، اول از همه، به معنای گسترش پوشش مخاطب بدون ضرر است.

یک بنر HTML5 چه کاری می تواند انجام دهد؟

خیلی از این گذشته ، این پیشرفته ترین قالبی است که توجه کاربر را به خود جلب می کند و حتی با او در تعامل است (یک بنر تعاملی).

از نظر انیمیشن، چنین بنری می تواند انیمیشن برداری (بدون افت مقیاس)، انیمیشن شخصیت ها، عکس ها، لوگوها، نمودارها و نمودارها، متن و حتی انیمیشن های سه بعدی را نشان دهد. از منظر تعاملی، یک بنر HTML5 می تواند به اقدامات کاربر پاسخ دهد و محتوا و ویژگی های اضافی را ارائه دهد. از نقطه نظر رسانه، یک بنر HTML5 می تواند ویدئو، اسلاید و ضبط های صوتی را پخش کند. از نظر واکنش‌پذیری، یک بنر HTML5 می‌تواند در تمام عرض صفحه کشیده شود، پانل‌های اضافی را گسترش دهد یا کل صفحه را پر کند.

بیایید به انواع اصلی بنرهای HTML5 نگاه کنیم.

بنر متحرک HTML5 با اندازه ثابت.
محبوب ترین قالب در اکثر شبکه های تبلیغاتی. عرض و ارتفاع بنرهای مورد نیاز از لیست پذیرفته شدگان برای قرار دادن انتخاب می شود. ما همیشه رایج ترین اندازه ها را پیشنهاد می کنیم.

کشش بنر HTML5 (پاسخگو، لاستیکی).
این بنری است که می تواند تمام عرض (گاهی ارتفاع) صفحه را اشغال کند. (جزئیات بیشتر را می توانید در این مقاله بیابید)

بنر تمام صفحه HTML5.
بنری که تمام صفحه باز می شود. به عنوان یک قاعده، شامل یک تایمر نمایش و یک دکمه "بستن" است. به خصوص برای نمایش در دستگاه های تلفن همراه محبوب است.

غالباً چنین بنری باید با در نظر گرفتن جهت گیری ها و وضوح های مختلف دستگاه تلفن همراه سازگار باشد.

بنر HTML5 قابل ارتقا (قابل گسترش).
در ابتدا فقط پنل شروع چنین بنری (تیزر) روی صفحه نمایش وجود دارد. هنگامی که یک الگوریتم معین اجرا می شود (هفت ماوس یا کلیک، تایمر یا رویدادهای دیگر در صفحه)، قسمت دوم بنر با اطلاعات گسترده اضافی باز می شود.

بنر ویدیویی HTML5.

بسته به تنظیمات و الزامات پلتفرم تبلیغاتی، می‌تواند ویدیویی را با شروع خودکار یا پس از فشار دادن دکمه «پخش» نمایش دهد. ممکن است حاوی دکمه های کنترل و بی صدا باشد. فایل ویدیویی معمولاً در هاست خارجی قرار دارد و در صورت نمایش دانلود می شود.

بنرهای تعاملی بازی
بنرهایی که با انجام کارهای ساده کاربر را تشویق به پیوستن به بازی می کنند.

چنین بنرهایی توجه مخاطبان هدف را به خود جلب می کنند، علاقه شدیدی را برمی انگیزند، اما در عین حال دارای تعدادی محدودیت هستند (به عنوان مثال، عدم وجود یک رویداد ماوس بر روی دستگاه های تلفن همراه یا محدودیت در استفاده از اسکریپت های اضافی). اگر قصد دارید یک بنر HTML5 بازی ایجاد کنید، همیشه در مورد این ویژگی ها به شما خواهیم گفت.

بنرهای HTML5 "هوشمند" (ماشین حساب).
آنها برای درگیر کردن و تعامل با کاربر استفاده می شوند و به او یک محاسبه فوری با توجه به پارامترهای لازم و یک فرمول مشخص شده توسط یک الگوریتم داخلی (به عنوان مثال، محاسبه وام، وام مسکن، مصرف مصالح ساختمانی و سایر عملیات ساده) ارائه می دهند.

بنرهای HTML5 قابل ویرایش- در برخی موارد، مشتری نیاز دارد که بدون استفاده از کمک توسعه دهنده، به سرعت در بنرها تغییراتی ایجاد کند (مثلاً تغییر مکرر قیمت ها، درصدها یا قیمت ها). ما می‌توانیم با این کار کنار بیاییم و پارامترهای لازم را مستقیماً در کد HTML بنر خارج کنیم، جایی که مشتری می‌تواند به طور مستقل تغییراتی را ایجاد کند. شما می توانید راه حل دیگری ارائه دهید که برای خروجی داده های استفاده شده توسط بنر به فایل های خارجی راحت باشد.

بنرهای HTML5 که با بارگیری داده های خارجی و API کار می کنند.
در حال حاضر، بسیاری از شبکه های تبلیغاتی دسترسی بنرها را به منابع خارجی ممنوع می کنند. با این حال، اگر بنر در سایتی قرار گیرد که چنین فرصتی را فراهم می کند، بنر HTML5 می تواند اطلاعات لازم (متن، اعداد، نقل قول ها) را از طریق API سایت درخواست کند و پس از پردازش آنها بر اساس یک الگوریتم داده شده، آن را به سایت نشان دهد. کاربر.

بنرهای سه بعدی HTML5.
چنین بنرهایی با ایجاد مدل های تصویری سه بعدی در صفحه توجه کاربر را به خود جلب می کنند.

یک بنر سه بعدی HTML5 را می توان به عنوان یک شیء چرخان که لبه های آن حاوی قاب های بنر است، به عنوان یک کتاب کشویی یا با استفاده از جلوه های سه بعدی دیگر پیاده سازی کرد.

توجه داشته باشید که یک بنر HTML5 می تواند چندین ویژگی توصیف شده را به طور همزمان شامل شود. برای مثال، یک بنر ویدیویی می‌تواند در تمام عرض صفحه کشیده شود و یک انیمیشن سه بعدی بسته به اقدامات کاربر می‌تواند در صفحه گسترش یابد.

اگر می خواهید یک بنر HTML5 را در وب سایت ما سفارش دهید و ایده خلاقانه شما مستلزم ترکیب فرمت های مختلف است، متخصصان ما همیشه می توانند این کار را انجام دهند.

بنر HTML5 - از نظر فنی چیست؟

بهتر است یک بنر HTML5 را به عنوان یک وب سایت کوچک در نظر بگیرید. بدون اغراق.

HTML5 که به این فرمت بنر نام خود را می دهد، یک زبان نشانه گذاری صفحه وب یا به عبارت دیگر زبان طرح بندی است. و طبق قوانین مشابه هر وب سایت مدرن تنظیم شده است. این می تواند حاوی ظروف div، فونت های افزونه، سبک های css و اسکریپت های js باشد. عنصر اصلی ظرف انیمیشن بوم است. خود انیمیشن با استفاده از یک اسکریپت جاوا، اغلب با استفاده از کتابخانه های js که مخصوص انیمیشن طراحی شده اند، پیاده سازی می شود.

داخلش چیه؟ چرا در آرشیو؟ چرا این همه فایل وجود دارد؟

درست است، زیرا ما به این واقعیت عادت کرده ایم که یک بنر یک فایل تصویری JPG یا یک "گیف" یا یک "درایو فلش" است. اما به یاد داشته باشید، همانطور که در بالا نوشتیم، بنر HTML5 اساسا یک سایت کوچک است. این شامل فایل های زیادی است و در یک آرشیو فشرده به پلتفرم تبلیغاتی ارائه می شود. در داخل بایگانی یک فایل HTML اصلی، فایل های اسکریپت جاوا، کتابخانه ها، شیوه نامه ها و تصاویر استفاده شده وجود دارد.

توجه داشته باشید. در برخی موارد، یک پلت فرم تبلیغاتی ممکن است از شما بخواهد که کل بنر را در یک فایل، شامل تمام اسکریپت ها و تصاویر استفاده شده در قالب پایه 64 ارائه دهید. این مشکل برای یک توسعه دهنده با تجربه نیست. با این حال، چنین الزامی زمان تولید بنر و ایجاد تغییرات در آن را افزایش می دهد. خوشبختانه این نیاز نادر است.

چگونه می توانم بنر ارسال شده HTML5 را در رایانه خود مشاهده کنم؟

بسیار ساده. آرشیو فشرده را باز کنید و فایل HTML داخل آن را در مرورگر خود باز کنید.

چگونه می توانم بررسی کنم که بنر صحیح HTML5 را دریافت کرده ام؟

اگر یک بنر برای خدمات تبلیغاتی Google ایجاد شده است، یک ابزار عالی برای بررسی کیفیت کار طراح در خدمت شما است - اعتبارسنجی HTML5 آنلاین Google. استفاده از آن آسان است: بایگانی فشرده خود را با یک بنر آپلود کنید و ببینید آیا لیست چک را تایید می کند یا خیر. خطاها با نمادهای قرمز مشخص خواهند شد. اگر آنها آنجا نیستند، کار توسعه دهنده شما بیهوده نبوده و بنر برای قرار دادن در Google adWords یا Double Click آماده است.

در شبکه های تبلیغاتی Yandex، Mail.ru، Rambler، adFox، adRiver و دیگران، بنر پس از آپلود در وب سایت سیستم از نظر مطابقت با الزامات فنی نیز بررسی می شود. در صورت بروز مشکل، می توانید یک نظر از ناظم دریافت کنید که خطا را توضیح می دهد. برخی از سایت ها به مشتری تبلیغاتی این امکان را می دهند که پیش نمایش بنر را در یک صفحه آزمایشی مشاهده کند.

با این حال، بهترین تضمین برای تولید صحیح یک بنر HTML5، تجربه توسعه دهنده، دانش او از الزامات فنی پلتفرم های تبلیغاتی و تمایل او برای تصحیح سریع اشتباهات است.

آیا بنر با انیمیشن در جاوا اسکریپت متفاوت است؟

گیج نشو "بنر جاوا اسکریپت"، "بنر بوم" - دقیقاً در مورد چیزی صحبت می کنیم که معمولاً "بنر HTML5" نامیده می شود. بسته به ابزار توسعه‌دهنده، کتابخانه‌های js یا قوانین طرح‌بندی ممکن است تغییر کنند، اما طرح اسمبلی عمومی یکسان باقی می‌ماند.

چگونه یک بنر HTML5 ایجاد کنیم؟

محبوب ترین ویرایشگر در بین طراحان برای ایجاد انیمیشن های HTML5، برنامه Adobe Animate است.

گوگل ابزار توسعه خود را ارائه می دهد - Google Web Designer. از مزایای آن می توان به وجود بسیاری از قالب های داخلی و امکان انتشار مستقیم بنر برای سرویس های تبلیغاتی گوگل اشاره کرد: adWords و Double Click. از جمله معایب، قابلیت های محدود انیمیشن است.

برخی از طراحان، اغلب آمریکایی، از ویرایشگر و کتابخانه های پلتفرم انیمیشن سبز جوراب استفاده می کنند. اما در کشور ما توزیع قابل توجهی دریافت نکرده اند.

با توجه به اینکه تمام اجزای لازم متن باز هستند، یک متخصص خوب می تواند یک بنر HTML5 را حتی در یک ویرایشگر متن ساده ایجاد کند. اما این روش در مقایسه با استفاده از برنامه های انیمیشن حرفه ای کارآمد نیست.

الزامات فنی برای بنرهای HTML5.

الزامات مربوط به:

• وزن کل بنر HTML5 به کیلوبایت؛
• ساختار آرشیو فشرده، تعداد پوشه ها و فایل ها.
• لیست فرمت های مجاز فایل؛
• راهی برای فعال کردن لینک های URL با کلیک کردن بر روی یک بنر (سیستم افزار بنر)؛
• لیست کتابخانه های مجاز js در هاست خارجی؛
• رویه و محدودیت برای اتصال فایل های ویدیویی و صوتی؛
• الزامات طراحی فریم، سلب مسئولیت، فرکانس و تعداد چرخه های انیمیشن، بارگذاری روی پردازنده دستگاه.

و این لیست کاملی از الزاماتی نیست که توسعه دهندگان ما باید آنها را در نظر بگیرند تا یک بنر HTML5 را که آماده قرار دادن و شروع یک کمپین تبلیغاتی بدون تاخیر در اختیار مشتری قرار دهد، ارائه دهند.

با بنرهای فلش که قبلا ایجاد کرده بودم چه کار باید بکنم؟

خودتان ببینید - بزرگترین شبکه‌های تبلیغاتی دیگر بنرهای فلش را برای قرار دادن نمی‌پذیرند، اجزای فلش در مرورگرها و دستگاه‌های iOS مسدود شده‌اند، Swiffy (تنها مبدل آنلاین کافی بنرهای فلش به HTML5) از کار افتاده است.

تبدیل خودکار فرمت فلش به HTML5 تقریبا غیرممکن است - در واقع، نیاز به بازسازی دستی کامل در ویرایشگر HTML5 دارد. در چنین شرایطی، تصمیم درست این است که دستور ایجاد مجموعه جدیدی از بنرهای متحرک در قالب مدرن و جهانی HTML5 را صادر کنیم.

در مورد "گیف" چطور؟

باید بدانید که هر انیمیشن GIF مجموعه ای متوالی از تصاویر فریم است، درست مانند فایل های ویدئویی. فایل GIF ممکن است حاوی اطلاعاتی در مورد سرعت پخش فریم و تعداد تکرارها باشد. این توانایی های او را محدود می کند.

یک بنر GIF نمی تواند با گرافیک های برداری کار کند، انیمیشن را به صورت برنامه نویسی ایجاد کند، با اندازه دلخواه سازگار شود و خیلی چیزهای دیگر، که یک بنر متحرک HTML5 به راحتی می تواند از پس آن برآید.

این برای تبلیغ کننده چه معنایی دارد؟

مشکل اضافه وزن. بله، حتی بنرها نیز در معرض آن هستند. همه پلتفرم های تبلیغاتی بزرگ محدودیت های سختی را برای وزن بنر به کیلوبایت تعیین می کنند.

یک بنر GIF برای نشان دادن چند فریم ثابت، شاید با کمی انیمیشن از متن، یک دکمه یا تغییر عکس خوب است. در این حالت، وزن کل بنر GIF از الزامات پلتفرم های تبلیغاتی فراتر نمی رود.

اگر انیمیشن شامل تغییر چند صد فریم باشد، وزن بنر GIF، همانطور که در انگلیسی می گویند، "به طور چشمگیری"، یعنی به طور چشمگیری افزایش می یابد. یک GIF 20 ثانیه ای با وزن چندین مگابایت رایج است. و شبکه های تبلیغاتی که به درستی نگران میزان ترافیکی هستند که کاربر برای مشاهده بنر باید دانلود کند، به شدت مورد بیزاری قرار می گیرد.

بنابراین، اگر به بنری با جلوه های انیمیشن، انیمیشن شخصیت، بنر تعاملی، تطبیقی ​​یا ویدیویی نیاز دارید، انتخاب به نفع سفارش یک بنر HTML5 است.

بنر (بنر انگلیسی - پرچم، بنر) یک تصویر گرافیکی از ماهیت تبلیغاتی است، شبیه به یک ماژول تبلیغاتی در مطبوعات. این می تواند یک تصویر ثابت یا حتی متن باشد یا حاوی عناصر متحرک (حتی ویدئو و اشیاء تعاملی) باشد. به عنوان یک قاعده، ممکن است حاوی یک لینک به وب سایت تبلیغ کننده یا صفحه ای با اطلاعات اضافی باشد. وظایف بنر به شرح زیر است. ابتدا محصول را بفروشید. یعنی - جذب کنندتوجه بازدید کننده، علاقهمشتری بالقوه با یک محصول یا خدمات تبلیغ شده، آنها را برای رفتن به سایت و تشویق به اقدام(فراخوانی برای اقدام). CTA هدف نهایی تبلیغات است. و ثانیاً وظیفه بنر تبلیغات تصویری یا برند است که هدف آن است افزایش آگاهی از برندو تصویر مثبتی در مورد برند ایجاد کنید.

انواع تبلیغات محبوب در سایت:

• گرافیک- یک نوع بنر ساده برای تبلیغات در اینترنت. شامل یک تصویر با اندازه معین و حاوی پیوندی به یک منبع تبلیغاتی است.
• بنر فلش- دارای امکانات بسیار خوبی برای انیمیشن است، این به شما امکان می دهد با استفاده از ترکیبی از گرافیک های برداری و شطرنجی اطلاعات را بهتر منتقل کنید.
• بنر HTML5- ترکیبی از عناصر HTML با استفاده از انیمیشن ها و طراحی بصری خوب، سازگار برای هر دستگاه و مرورگر.

تفاوت های اصلی بین HTML و سایر انواع بنرها
در مقایسه با سایر روش‌های ایجاد بنر، فناوری‌های HTML5 تعدادی مزیت را برای جذب مخاطب به منبع ارائه می‌کنند:

• تبلیغات در این قالب در همه دستگاه‌ها بدون افزونه‌های مرورگر اضافی به صورت یکسان نمایش داده می‌شوند.
  HTML5 گزینه‌های بیشتری برای ادغام فرم‌ها، دکمه‌های رسانه‌های اجتماعی، تقویم‌ها، نقشه‌ها و سایر برنامه‌ها در تبلیغات خود در اختیار شما قرار می‌دهد.
• وزن کم و استفاده از منابع کمتر بر سرعت بارگذاری صفحات در مرورگر تأثیر نمی گذارد. فن آوری های فلش اجازه دستیابی به چنین نتیجه ای را نمی دهد.
• برای ارزیابی اثربخشی بنرهای HTML5، می توانید آمار را در Google Analytics مشاهده کنید. اطلاعات مختلفی درباره مهمانان و کلیک‌های لینک ارائه می‌کند.

یکی از اشکالات قابل توجه فناوری های فلش، کنار گذاشتن تدریجی آنها توسط شرکت های بزرگی مانند اپل، موزیلا و آمازون است. محرک اصلی ناپدید شدن فلش گوگل بود. آنها ابتدا انیمیشن فلش را در گوگل کروم غیرفعال کردند و سپس تبلیغات فلش را در سرویس های تبلیغاتی جستجوی خود به نفع HTML5 رها کردند.

راه های ایجاد بنرهای HTML
توسعه بنر با ایجاد یک صفحه جداگانه آغاز می شود و از طریق "iframe" در سایت تعبیه می شود. روش های مختلفی برای توسعه بنرهای تبلیغاتی برای یک وب سایت وجود دارد که در ادامه به محبوب ترین آنها می پردازیم.

1. یک فریم با استفاده از CSS3 و جاوا اسکریپت ایجاد کنید
قاب به شما امکان می دهد هر سند مستقلی را در یک منطقه با اندازه های مشخص بارگذاری کنید. این می تواند کدهای مختلف HTML با استفاده از سبک ها و اسکریپت ها برای طراحی باشد. همچنین امکان پیاده‌سازی یک بنر از طریق ناحیه «بوم» وجود دارد که در آن انیمیشن‌ها، نقاشی‌ها، گرافیک‌ها و حتی بازی‌ها با استفاده از جاوا اسکریپت توسعه می‌یابند. برای سرعت بخشیدن به توسعه، می توانید از کتابخانه های شخص ثالث مانند 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 نیاز ندارد.
• پس از اتمام کار، تمامی مدارک لازم برای قرار دادن بنر در سایت را دریافت می کنیم. تصاویر - پوشه ای با عناصر گرافیکی بنر، چندین جاوا اسکریپت، فایل های html و یک فایل An - برای ویرایش بعدی فایل در برنامه.
• بنر تمام شده توسط تمام مرورگرهای مدرن و برنامه های تلفن همراه پشتیبانی می شود و تمام الزامات فنی کمپین های تبلیغاتی در Yandex و Google را برآورده می کند.

ایرادات:

• رابط فقط به زبان انگلیسی است.
• از سال 2015، ادوبی توسعه پروژه Adobe Edge Animate را متوقف کرده است؛ این برنامه از آن زمان به روز رسانی نشده و به محدودیت توسعه خود رسیده است. Edge Animate همچنان برای دانلود در بایگانی Creative Cloud موجود است.

3. Adobe Animate CC
Animate CC یک محصول تغییر نام یافته از Adobe Flash Professional است. اخیراً فناوری Flash اعتماد کاربران را از دست داده است؛ این برنامه نیاز به تغییر نام و چندین اصلاح داشت. در اصل، این همان برنامه Flash Professional است، اما در آن فایل ها علاوه بر این در HTML5 و جاوا اسکریپت ذخیره می شوند.

رابط کاربری بسیار شبیه به Flash Professional است، اما برنامه ها قابلیت های متفاوتی دارند.

مزایای:

• امکان ایجاد گرافیک سه بعدی. یک ابزار دوربین وجود دارد که به شما امکان می دهد تا عمق فریم را برای انیمیشن واقعی ثبت کنید.
• برخلاف Edge Animate، Animate CC دارای انتخاب زیادی از براش های برداری و توانایی کار با گرافیک های شطرنجی است.
• این برنامه نسبتا جدید است، بنابراین Adobe به طور فعال پروژه را توسعه می دهد، به روز رسانی ها را منتشر می کند و Animate CC را بهبود می بخشد.
• نسخه روسی هم هست
• گزینه های پیشرفته برای صادرات فایل ها به فرمت ها: JavaScript/Html، jpeg، png، oam، svg، mov، gif. با فشار دادن یک دکمه، عناصر بنر به صورت sprites ذخیره می شوند و در نتیجه زمان بارگذاری بنر کاهش می یابد.

ایرادات:

• جدید بودن برنامه نیز یک نقطه ضعف محسوب می شود. آموزش های زیادی در مورد نحوه ایجاد انیمیشن در Animate CC به اندازه Adobe Edge Animate وجود ندارد. بنابراین، عملکرد برخی از توابع باید به طور مستقل مورد مطالعه قرار گیرد، که کار آسانی نیست. این برنامه برای مطالعه به تنهایی بسیار پیچیده است، اما شما می توانید آن را کشف کنید.
• برخی از عملکردها مانند Edge Animate خودکار نیستند، که همچنین زمان ایجاد بنر را افزایش می دهد.

4. طراح وب گوگل
گوگل ما را با ویرایشگر رایگانی که مخصوص پیاده سازی بنرهای HTML ایجاد شده خوشحال کرد. Google Web Designer کاملاً برای اجرای تبلیغات طراحی شده است که تمرکز اصلی آن بر روی AdWords است.

اگر به پنجره ایجاد یک فایل جدید نگاه کنیم، متوجه می شویم که اندازه های قالب تبلیغات از قبل در برنامه تعبیه شده است.

مزایای:

• رابط کاربری ساده
• در دسترس بودن قالب های تبلیغاتی در گوگل.
• برنامه کاملا رایگان.
• در دسترس بودن نسخه روسی.
• طراحی بنر تطبیقی ​​گنجانده شده است؛ بنر html در هر وضوح صفحه نمایش عالی به نظر می رسد.

ایرادات:

• عملکرد Google Web Designer به اندازه کافی محدود است تا شاهکارهای انیمیشن ایجاد کند. این برنامه توسط قالب ها بسیار محدود شده است.
• فقدان برنامه های آموزشی Google Help برای آموزش کامل عملکرد کافی نیست.

تمام روش های ارائه شده در بالا جدید نیستند، اما ثابت شده اند. این به این معنی است که تضمینی وجود دارد که بنرهای html ایجاد شده در اکثر پلتفرم های تبلیغاتی از اعتدال عبور می کنند، زیرا الزامات فنی آنها مطابق با استانداردهای عمومی است.

البته مخاطب این مقاله کسانی نیست که چند روزی است در اینترنت برنامه نویسی وب انجام می دهند. اما پس از گشت و گذار در اینترنت، متوجه شدم که این موضوع برای مبتدیان مرتبط است، بنابراین تصمیم گرفتم مقاله ای بنویسم.

اکثر شبکه های وابسته یک راه حل آماده ارائه می دهند، که در آن شما فقط باید کد دریافتی را کپی کرده و آن را در وب سایت خود در مکان مورد نیاز قرار دهید. اما اتفاق می افتد که شرکا به دلیل تغییرات احتمالی در عملکرد پلتفرم های تبلیغاتی، پیشنهاد آپلود تصویر در سایت شما را می دهند. دلیل دوم برای ایجاد کد تبلیغاتی ممکن است تصمیم به ایجاد بنر خود با پیوند به وب سایت شریک باشد. به عنوان مثال، من اغلب این کار را انجام می دهم. اول اینکه این بنر را منحصر به فرد می کند و ثانیاً همه شرکا تصاویر زیبا و متحرک ارائه نمی دهند.

کد بنر را ایجاد کنید.

و بنابراین بیایید شروع کنیم. اول از همه، شما باید یک تصویر را در یک پوشه خاص آپلود کنید، به عنوان مثال "تصاویر"، یا هر پوشه دیگری ایجاد کنید که در آن تصاویر ما برای تبلیغات ذخیره شوند. سپس تصاویر فرمت های محبوب (jpg، gif، png) را در آنجا آپلود می کنیم. حال بیایید مسیر تصویر خود را بنویسیم:

این کد موارد زیر را می گوید. برچسب بزنید به مرورگر می گوید که عنصر یک تصویر یا تصاویر است. در مرحله بعد، ویژگی “src” مسیر این تصویر را مشخص می کند. سپس خود مسیر می آید، این آدرس سایت، پوشه "uploads" و خود فایل است که من آن را "banner_sitestroy" با پسوند "gif" نامیدم. پس از همه اینها، اکشن ویژگی را ببندید مانند این " />". اکنون باید موارد زیر را مشخص کنید: عرض بنر (عرض)، ارتفاع بنر (ارتفاع)، متن جایگزین (alt=)، متن روی تصویر (title=) قرار دهید و یک مقدار صفر برای حاشیه (border="0") تعیین کنید. ، به طوری که به طور تصادفی در برخی از مرورگرها ظاهر نشد.

Gif" width="468" height="60" alt="banner_sitestroy.gif" title="مقداری متن روی شناور!!!" border="0" /> !}

ما این کد را دریافت کردیم و اکنون می توانیم آن را در مرورگر باز کنیم و ببینیم آیا همه چیز کار می کند؟

شکل شماره 1.

بله، همه چیز کار می کند، همه چیز خوب است، اما او هنوز هم فقط یک عکس معمولی است. اکنون باید پیوندی به وب سایت شریک اضافه کنید.

در اینجا ما برچسب را می بینیم ، که به مرورگر می گوید که این یک پیوند است، سپس ویژگی "href" که شروع مسیر پیوند را نشان می دهد، پیوند خود کل مراسم را کامل می کند، تگ "target" با ویژگی "_blank" که شریک را باز می کند. آدرس در یک برگه جدید بدون بستن سایت ما. همه این کدها باید قبل از کد، یک عکس و بعد از آن یک تگ پیوند بسته درج شود. به طور کلی، اتفاقی که می افتد به این صورت است:

به طور کلی، این یک کد آماده برای یک بنر 468x60 است که می توانید آن را کپی کنید، داده های واقعی را پیست کنید و آماده است. برای بنرهایی با اندازه های دیگر، به سادگی مقادیر "عرض" (عرض) و ارتفاع (ارتفاع) را تغییر دهید.