Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков

Нажмите для полного просмотра!

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №2

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №3

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №4

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №5

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №6

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №7

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №8

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №9

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №10

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №11

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №12

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №13

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №14

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №15

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №16

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №17

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №18

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №19

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №20

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №21

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №22

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №23

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №24

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №25

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №26

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №27

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №28

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №29

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №30

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №31

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №32

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №33

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №34

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков, слайд №35

Содержание ▲

Вы можете ознакомиться и скачать Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков. Презентация содержит 35 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Кроссбраузерные решения в Рекламной сети Яндекса Юрий Беляков

Слайд 2

Описание слайда:

Главная страница РСЯ

Слайд 3

Описание слайда:

Требования к рекламному блоку Код должен работать независимо от: посещаемости сайта; браузера посетителя; верстки и дизайна сайта; «кривизны рук» веб-мастера; попыток умышленно (или случайно) повлиять на работу кода или внешний вид рекламного блока.

Слайд 4

Описание слайда:

Защита от конфликтов Для того, чтобы снизить вероятность конфликтов мы используем: префиксы; специальный «ластик»; инструкцию !important; длинные селекторы; случайные имена классов.

Слайд 5

Описание слайда:

Нестандартная отрисовка иконок

Слайд 6

Описание слайда:

Получение маски

Слайд 7

Описание слайда:

Представление маски var aIconMask = [ [0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0], [0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0], [0,0,0,0,0,0,1,1,1,1,1,0,1,0,0,0], [0,0,0,0,0,1,1,1,0,1,0,1,0,0,0,0], [0,0,0,0,1,1,1,0,0,0,1,0,0,0,0,0], [0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0], [0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0], [0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0], [0,0,1,1,1,0,1,0,0,0,0,0,0,0,0,0], [0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0] ];

Слайд 8

Описание слайда:

Функция отрисовки иконки var sIconCode = ''; for (var i = 0; i < aIconMask.length; i++) { var sIconRow = ''; for (var j = 0; j < aIconMask[i].length; j++) { sIconRow += aIconMask[i][j] ? '<td />' : '<th />'; } sIconCode += '<tr>' + sIconRow + '</tr>'; } sIconCode = '<div class="icon"><table>' + sIconCode + '</table></div>'; document.write(sIconCode);

Слайд 9

Описание слайда:

HTML-код и стили <div class="icon"> <table> <tr><td/>... <td/></tr> ... </table> </div> div.icon table {height: 16px; width: 16px;} div.icon td, div.icon th {height: 1px; width: 1px;} /* colors */ div.icon td {background-color: #eaedef;} div.icon th {background-color: #000000;}

Слайд 10

Описание слайда:

Пример цветового оформления

Слайд 11

Описание слайда:

Быстрый показ рекламы

Слайд 12

Описание слайда:

Структура сайта на фреймах

Слайд 13

Описание слайда:

Событие DOMContentLoaded /* Firefox, Opera */ if (document.addEventListener) { document.addEventListener('DOMContentLoaded', init, false); }

Слайд 14

$Решение для IE /* Internet Explorer */ document.write('<script src="//:" id="ie_onload" defer="defer"><\/script>'); var script = document.getElementById('ie_onload'); script.onreadystatechange = function() { if (this.readyState == 'complete') { init(); } };$

Описание слайда:

Решение для IE /* Internet Explorer */ document.write('<script src="//:" id="ie_onload" defer="defer"><\/script>'); var script = document.getElementById('ie_onload'); script.onreadystatechange = function() { if (this.readyState == 'complete') { init(); } };

Слайд 15

Описание слайда:

Решение для Safari /* Safari */ if (/WebKit|Khtml/i.test(navigator.userAgent)) { var timer = setInterval(function() { if (/loaded|complete/.test(document.readyState)) { clearInterval(timer); init(); } }, 1); }

Слайд 16

Описание слайда:

Для остальных браузеров window.onload();

Слайд 17

Описание слайда:

Динамический градиент

Слайд 18

Описание слайда:

Элемент canvas var oCanvas = document.createElement('canvas'); var oContext = oCanvas.getContext('2d'); var oGradient = oContext.createLinearGradient(0, 0, 0, iBlockHeight); oGradient.addColorStop(0, sColorStart); oGradient.addColorStop(1, sColorEnd); oContext.fillStyle = oGradient; oContext.fillRect(0, 0, iBlockWidth, iBlockHeight);

Слайд 19

Описание слайда:

Метод toDataURL() var sDataUrl = oContext.canvas.toDataURL('image/png'); oBlock.style.backgroundImage = 'url(' + sDataUrl + ')'; oBlock.style.backgroundRepeat = 'repeat-x'; oBlock.style.backgroundPosition = 'top';

Слайд 20

Описание слайда:

Фильтр Gradient oBlock.style.filter = 'progid:DXImageTransform.Microsoft.Gradient(Enabled=true, GradientType=0, StartColorStr=' + sColorStart + ', EndColorStr=' + sColorEnd + ')';

Слайд 21

Описание слайда:

Пример блока с градиентом

Слайд 22

Описание слайда:

Поведение градиента при resize

Слайд 23

Описание слайда:

Вертикальные надписи

Слайд 24

Описание слайда:

Поворот и отражение

Слайд 25

Описание слайда:

Код для IE <div class="header">Яндекс.Директ</div> div.header {background-color: white; filter: flipv() fliph(); writing-mode: tb-rl;}

Слайд 26

Описание слайда:

Формат SVG <svg xmlns="http://www.w3.org/2000/svg"> <text transform="rotate(-90)"> <tspan>Яндекс.Директ</tspan> </text> </svg> <object type="image/svg+xml" data="data:image/svg+xml,…"></object>

Слайд 27

Описание слайда:

Примеры фиксированного блока

Слайд 28

Описание слайда:

Другие решения «Выпрыгивание» из iframe Определение контрастности «Всплывающий» баннер

Слайд 29

Описание слайда:

«Выпрыгивание» из iframe if (top.document && (self != top)) { try { if (self.document.domain != top.document.domain) isSameDomain = false; } catch (error) { isSameDomain = false; } } if (!isSameDomain) { self.parent.location = document.location; }

Слайд 30

Описание слайда:

Определение контрастности

Слайд 31

Описание слайда:

Логотипы Яндекса

Слайд 32

Описание слайда:

Вычисление яркости var sColor = '#393939'; var iRed = parseInt(sColor.substr(1, 2), 16); var iGreen = parseInt(sColor.substr(3, 2), 16); var iBlue = parseInt(sColor.substr(5, 2), 16); var fBrightness = (iRed * 299 + iGreen * 587 + iBlue * 114) / 1000; return (fBrightness > 125) ? 'black' : 'white';

Слайд 33

Описание слайда:

Пример блока на темном фоне

Слайд 34

Описание слайда:

«Всплывающий» баннер var oHtml = document.getElementsByTagName('html')[0]; if (!document.body) { oHtml.appendChild(document.createElement('body')); } var oBody = document.body; var oBlock = document.createElement('div'); oBlock.innerHTML = sHtml; oBody.insertBefore(oBlock, oBody.firstChild);

Слайд 35

Описание слайда:

Спасибо за внимание! Юрий Беляков адрес: 111033, Россия, Москва ул. Самокатная д. 1, стр. 21 телефон: +7 (495) 739-00-00 факс: +7 (495) 739-70-70 эл. почта: belyan@yandex-team.ru