Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Створення адаптивних HTML5 банерів FullScreen

  1. Створення банерів в різних програмах з функцією адаптивності і прорахунку кліків Привіт, значить...

Створення банерів в різних програмах з функцією адаптивності і прорахунку кліків

Привіт, значить завдання стоїть таке: «Створити адаптивний HTML банер, який буде підлаштовуватися під різні розміри екрану, у нього буде лічильник часу, що залишився і кнопка закрити і все це повинно ще й кліки вважати, щоб збирати статистику про переходах по ТТ Adriver».

Спочатку розберемося, які власне самі затребувані формати є при створенні таких банерів:

Взагалі цих банерів шалено багато, ознайомитися з усіма технічними вимогами і форматами можна тут: клік , Але ми будемо використовувати лише кілька, тому що інші або вже не актуальні, або майже повторюють ці:

  1. FullScreen банери - банери, які ви могли бачити в метро або на сайті wifi , Дані банери розкриваються на весь екран, мають лічильник і кнопку закриття. Для створення таких банерів ми просто готуємо статичну картинку або просту gif анімацію (не більше 600КБ) і далі верстаємо все на HTML.

    FullScreen Банер

  2. FullWidth банери - вже цікавіше, але насправді це просто звичайний HTML5 банер, тільки розтягується на 100% ширини екрану, але має при цьому фіксовану висоту. У таких банерах часто використовується анімація і вони вже створюються в таких програмах, як google web designer , Adobe Edge Animate , Adobe Animate CC . Особисто я активно юзаю Edge Animate, він зручніше, швидше і є можливість швидкої вивантаження в HTML5. При створенні таких банерів, спочатку робиться розкадровка з варіантами того, як цей банер буде виглядати при різних розмірах екрану, виглядає все це справа приблизно так:

    Розкадрування банера на 100% ширини

  3. Банер з фіксованим розміром або статичний - ну це зовсім просто. Тут створюється просто креатив або розкадровка і все, що залишається зробити - це прописати код для рахунку кліків. Для створення таких банерів я часто використовую Adobe Photoshop або Edge Animate - якщо це анміація. Ніколи не використовуйте тут GIF! Ви ніколи не зможете вивантажити gif анімацію в розмірі до 600КБ, а якщо анімація важить більше, то її не пропустять. Звичайний HTML банер не дотягне за вагою і до 200Кб, а значить, що тут можна творити по повній.

Розкадрування банера з фіксованими розмірами

Гайд по створенню FullScreen банера за всіма правилами

Створення такого банера на увазі, що його розмір буде змінюватися при змінити розмір екрану, а значить він буде займати всю його площу, приблизно так:

Широкий екран Вузький екран

Це означає, що зображення повинно одіаново добре виглядати на всіх пристроях, від сюди висновок, що воно повинно бути досить хорошої якості і розмір наближений до квадрату (фіксованих розмірів немає, тут все досить лояльно). В даний момент ми орінтіруемся на мобільнуе пристрої (mobile) і планшети (tablet), тому беремо прямокутник, для перегляду в портретному режимі (portrait). Заходимо в Photoshop і створюємо документ необхідного розміру, в даному випадку це 536х714:

Заходимо в Photoshop і створюємо документ необхідного розміру, в даному випадку це 536х714:

Gif исходник для створення FullScreen банера

Я створив гифку з двох кадрів, вага у неї 242КБ, вага у нас завжди повинен бути до 600КБ, пам'ятаємо це. Тепер нам необхідно перетворити це в власне банер на HTML. Відкриваємо інструкцію по створенню FullScreen банерів , Беремо з неї технічні вимоги та закриваємо, вона написана дуже коряво. Забудьте про Flash, він загинув смертю хоробрих, у нас тільки HTML5, тому нам потрібні технічні вимоги для створення банерів на коді Ajax.

Обмежень по верстці немає, тут ми вільні творити все, що нам заманеться, головне, щоб були присутні основні атрибути, а саме: читати клік з банера, був лічильник і хрестик для закриття. Для коддінга я використовую безкоштовну програм Sublime Text .

Відкриваємо HTML файл з мого шаблону і бачимо:

Стандартний код банера FullScreen

  1. Стандартна шапка документа, завжди незмінна.
  2. У властивостях стилю Body у нас зазначено height 100%, що означає, що документ буде підлаштовуватися під висоту вікна браузера. В даному документі створений контейнер, який буде змінювати розміри при зміні розмірів екрану і в стилі цього контейнера ми бачимо посилання на фон (background: url), адже наш банер і буде фоном для цього контейнера, таким чином адаптивним у нас є контейнер, а наш банер лише є його фоном і ми просто змінюємо сам банер або посилання на нього і все автоматично замінюється і ми отримуємо вже новий fullscreen банер. Отже, в даному випадку сам банер - це файл bg1.jpg, а фон позаду банера - bg2.jpg, фоном у нас може бути патерн або єдина картинка або взагалі нічого - залежить від дизайну.

    Готовий FullScreen банер

  3. Тут у нас настройки стилю лічильника зворотного відліку, якщо необхідно - змінюється шрифт, кольори, положення, коротше раджу прочитати про стилі css, тут нічого важкого.
  4. Ось тут ми бачимо <div id = "content">, власне для нього ми і прописували стилі вище - це і є наш банер.
  5. Кнопка закрити. У більшості випадків я роблю її просто акуратним хрестиком в правому верхньому куті екрану, якщо нічого міняти тут не збираєтеся, просто замініть посилання на картинку і її розмір.

кнопка закрити

Як же читається сам клік з банера? І чому ми не прописували ніакіх посилань на сторінки, на які повинен вести банер? Так ось ... Система Adriver дозволяє прописувати посилання для переходу на сайт, після завантаження банерів в систему, виходить у нас в исходнике ми лише прописуємо змінну, яка замінюється при завантаженні в систему сама, вже не наша робота. В даному випадку у нас клік прописується для всього контейнера, в якому знаходиться наш банер, в загальному все, що ми помещаяем в <div id = "content"> у нас є банером і з цього зчитуються кліки. Для інших банерів, інші технічні тредованія і там клік зчитується по-іншому, сечас ми розглядаємо конкретний приклад.

Контейнер з банером

В інших уроках я розповім, як створити банер на 100% ширини екрану з анімацією і як за всіма правилами створити і підготувати макет для верстки сайту.

Файли з уроку:

  1. Готові банери FullScreen: клік

Дякуємо за увагу.

І чому ми не прописували ніакіх посилань на сторінки, на які повинен вести банер?
Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    Подготовка к ЕГЭ по математике
    Статьи Опубликовано: 05.10.2017 Подготовка к ЕГЭ по МАТЕМАТИКЕ. 1 часть. Эффективный курс подготовки. Вы находитесь на сайте www.ege-ok.ru - Подготовка к ЕГЭ по математике. Меня зовут Инна Владимировна

    Куда поступить с обществознанием, русским и математикой
    Статьи Опубликовано: 06.10.2017 Сдача ЕГЭ. Куда поступать? Обществознание считается одним из самых популярных предметов, которые выпускники сдают на ЕГЭ. Ввиду высокого рейтинга дисциплины Рособрнадзор

    Сайт Майер Елены - ЕГЭ по математике
    Планируется проведение двух отдельных экзаменов – базового и профильного. Кому сдавать базовый ЕГЭ по математике? Базовый ЕГЭ организуется для выпускников, изучающих математику для общего развития

    ГДЗ решебник по математике 4 класс
    Извините, тут пока ничего нет ((( Решебник по математике 4 класс (Истомина Н.Б.) – не просто возможность быстро выполнить домашнее задание для учащегося, но и способ разобраться в труднорешаемых задачах.

    ГДЗ по математике 1 класс Самсонова самостоятельные работы
    Решебник по математике за 1 класс автора Самсоновой Л.Ю. 2012 года издания. Данное пособие предлагает готовые решения на разнообразные упражнения, направленные на активизацию всего учебного процесса. Здесь

    Для этой работы нужна математика
    Слотов: 956 Рулеток: 7 Лицензия: Pragmatic Play, Microgaming, ELK, Yggdrasil, Habanero, Amatic, Isoftbet, Netent, Rival, Igrosoft, Quickspin. Игры: Автоматы, Покер, Рулетки. Всего 963 Отдача: 98% Бонус

    Веселые задачи по математике 2 класс
    Во время занятий для того, чтобы немного переключить внимание школьников, но при этом не уйти от предмета, можно давать шутливые задачи на сообразительность. Буду пополнять коллекцию таких задач. Дополнительная

    Функция экспонента в Excel
    Одной из самых известных показательных функций в математике является экспонента. Она представляет собой число Эйлера, возведенное в указанную степень. В Экселе существует отдельный оператор, позволяющий

    ЕГЭ по математике 2018
    ЕГЭ по математике, наравне с русским языком , – обязательный экзамен для сдачи выпускниками 11-х классов. По статистике он самый сложный. Мы предлагаем ознакомиться с общей информацией об экзамене и

    Секреты эффективной и быстрой подготовки ко второй части ОГЭ по математике.
    Уважаемые девятиклассники, настоящие или будущие! Часто от вас приходится слышать следующие вопросы. Легко ли подготовиться к заданиям второй части ОГЭ по математике? Сколько для этого понадобится


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: