Web-программирование баннера

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Содержание

Введение

Глава 1. Web - программирование баннера

1.1 Web - программирование

1.1.1 Клиентские языки

1.1.2 Серверные языки

1.2 Введение в JavaScript

1.2.1 Что такое событие JavaScript

1.2.2 Основные события JavaScript

1.3 Баннеры

1.4 История Баннера

1.5 Создание баннера

1.6 Виды баннера

1.7 Форматы баннера

1.8 Скрипт показа баннера на РНР4

1.9 Тег <embed>

Глава 2. Пример программирования Flаsh - баннера

Заключение

программирование баннер серверный flаsh



Введение

Можно сказать совершенно точно, что в наше время Интернет-странички просто переполнены графикой. Без этого уже трудно представить себе какой-нибудь популярный проект. Часть такой графики является дизайном сайта, и с этим мы предпочитаем мириться. Другая часть - это баннеры, рекламная информация других сайтов в виде графической (часто даже анимированной) картинки. Это порой раздражает, иногда выводит из себя, а когда - то может и оказаться полезным, так как хорошо сделанный баннер привлекает внимание и к себе и к рекламируемому ресурсу.

Если удается сделать хороший, полезный и посещаемый Интернет-проект, значит, то мы неизбежно сталкиваемся с баннерами. Часто другие Web-мастера сами предлагают обмен, иногда самому хочется поставить свой баннер на каком-либо ресурсе. Но в любом случае очень полезно иметь информацию о том, сколько раз баннер был показан и показывается ли он вообще. Это избавит от необходимости раз в неделю (день, месяц, год…) проверять, работает ли баннер на чужом сайте или давно удален. Конечно, обойтись средствами HTML тут просто невозможно, поэтому нужно приготовиться программировать. Хорошо бы для программирования выбрать один из языков, работающих на стороне сервера. Это избавит посетителя от постоянного перекачивания к браузеру массы информации, причем при каждом посещении. Можно попробовать несложный скриптовый язык программирования РНР.

Самое главное, что обязательно понадобится - это поддержка РНР сервером, где расположен сайт. Без этого, к сожалению, ничего не получится. Но PHP - язык распространенный, и поддерживается он большинством серверов в сети, за исключением очень многих бесплатных.

Цель: Создать Flesh баннер

Для этого не обходимо решить следующие задачи:

1. Изучить назначение, возможности и целесообразность баннеров в интернете

2. Рассмотреть классификацию баннера

3. Изучить теги языка html, применяемые при создании баннера

4. Рассмотреть ресурсы используемые при анимировании баннера

5. Рассмотреть конкретные примеры web - программирования баннера

6. Составление html кода для отображения Flesh баннера формата 300*200



Глава 1. Web - программирование баннера

1.1 Языки web - программирования

Языки web - программирования делятся на две группы: клиентские и серверные. Сервер: это и тот компьютер, где хранится ваш сайт, и та программа, которая обрабатывает запросы браузера к какой-либо странице.

1.1.1 Клиентские языки

Как следует из названия, клиентские языки обрабатываются на стороне клиента пользователя, а если проще - программы на клиентском языке обрабатывает браузер. Из этого следует и недостаток - это то, что обработка скрипта зависит от браузера пользователя, и пользователь имеет полномочия настроить свой браузер так, чтобы он вообще игнорировал написанные кем - либо скрипты. При этом, если браузер старый, он может не поддерживать тот или иной язык или версию языка, на которую мы опираемся. С современными браузерами таких проблем возникать не должно, к тому же языки программирования не так уж часто кардинально обновляются (раз в несколько лет) и лучшие из них давно известны. Также код клиентского скрипта может посмотреть каждый, выбрав в меню “Вид” своего браузера вкладку “Исходный код”.

Преимущество же клиентского языка заключается в том, что обработка скриптов на таком языке может выполняться без отправки документа на сервер. Это легче объяснить на примере: допустим, вам надо проверить правильно ли пользователь ввел e-mail (т.е., например, проверить в нем наличие “@”); чтобы это сделать пользователю, надо было бы отправить форму с заполненными данными, потом дождаться, пока она обработается, и лишь после этого получить сообщение об ошибке. Процесс слишком долгий. С клиентским же языком программа сразу проверит правильное заполнение формы перед отправкой, и, если необходимо, выведет ошибку. Отсюда же вытекает и то ограничение, что с помощью клиентского языка программирования ничто не может быть записано на сервер, то есть, например, с его помощью нельзя сделать гостевую книгу, потому что тогда надо записывать сообщения в какой-либо файл на сервере.

Самым распространенным из клиентских языков является JavaScript, разработчиками которого является компания Netscape (www.netscape.com) совместно с компанией SunMicrosystems (www.sun.com). Другой вариант клиентского языка это, например, VisualBasicScript (VBS). Чтобы начать учить клиентский язык веб-программирования, Вам понадобится поддерживающий этот язык браузер (Internet Explorer (www.microsoft.com), Opera (www.opera.com), Netscape Navigator (

1.1.2 Серверные языки

Итак, теперь разберемся в том, как обрабатываются скрипты на серверном языке программирования. Для начала предоставлю следующую схему:

Рис 1.

Когда пользователь дает запрос на какую-либо страницу (переходит на нее по ссылке, или вводит адрес в адресной строке своего браузера), то вызванная страница сначала обрабатывается на сервере, то есть выполняются все скрипты, связанные со страницей, и только потом возвращается к посетителю в виде простого HTML-документа (то есть посетитель уже никак не сможет увидеть код Вашего скрипта). Но работа ваших скриптов уже полностью зависима от сервера, на котором расположен ваш сайт, и от того, какая версия того или иного языка поддерживается хостингом.

Серверные языки программирования открывают перед программистом большие просторы в деятельности, однако, сколько бы не писали люди, продвигающие язык, что их язык очень легок для обучения, без предварительного груза знаний освоить довольно-таки тяжело.

Здесь же стоит упомянуть, что такое Система Управления Баз Данных, или СУБД. Это, по сути, тоже сервер, на котором в определенном пользователем порядке хранится разная необходимая информация, которая может быть вызвана в любой момент. Это библиотека, в которой все материалы аккуратно сложены по полочкам и в любой момент могут быть взяты. Обычно при покупке хостинга выделяется одна База данных (БД), в которой пользователь может создавать множество таблиц, а в них уже хранить разнообразную информацию. То есть если опять же вернуться к примеру с гостевой книгой, то в какой-либо созданной Вами таблице можно хранить сообщения, оставленные пользователями. Можно, конечно, хранить их и в текстовом файле, но это менее надежно, да и к тому же я привел лишь мелкий пример, а если, скажем Вам надо хранить пароли (а их надо хранить в зашифрованном виде), или связать несколько таблиц при обращении к каким-либо данным, тут без БД не обойтись.

В настоящее время стали известны и не напрасно СУБД, обращение к которым производится посредством Structured Query Language (SQL), или структуризированным языком запросов. Чтобы работать с этими базами данных (дополнять, обновлять, делать запросы и т. д.) вам необходимо знать этот самый SQL. Среди таких СУБД наиболее известна MySQL (www.mysql.com), я же для себя предпочел PostgreSQL (www.postgresql.org).

Сейчас существуют языки, которые встраиваются в сам документ, и те программы, на которых надо предварительно компилировать, то есть превращать, написанные вами исходные коды в готовую программу; недостаток вторых заключается в том, что если вам нужно обновить скрипт, то придется заново компилировать дополненные коды.

Среди серверных языков программирования выделяются PHP (PHP: Hypertext Preprocessor) (www.php.net), Perl (www.perl.com), SSI (Server Side Include). Для тестирования этих скриптов Вам понадобится уже побольше: сервер (www.apache.org), интерпретатор языка (можно взять на сайте производителя), ну и конечно при продуктивной работе еще и СУБД.

1.2 Введение в JavaScript

1.2.1 Что такое событие JAVASCRIPT

Событие - это какое-либо действие, осуществляемое пользователем либо браузером. Например, когда мы щелкаем (кликаем) на ссылке - осуществляется событие, его перехватывает специальный обработчик и перенаправляет нас на нужную страницу; при наведении курсора (указателя мыши) на ссылку в строке состояния (обычно находится в нижней части окна браузера) отображается адрес, так как обработчик "наведения курсора на объект (в данном случае на ссылку)" помещает туда этот адрес и так далее...

Следует различать события генерируемые, как пользователем (щелчок или движение мыши, изменение данных формы), так и браузером (окончание загрузки документа, закрытие страницы, ошибка и т. п.).

Каждое событие имеет свое имя, к примеру: щелчок - click, перемещение курсора за определенный объект - mouseout, получение фокуса (щелчок мыши на объекте, или переход к нему при помощи клавиши табуляции (Tab)) - focus, отправка формы - submit, сброс формы - reset, загрузка страницы - load, возникновение ошибки - error и т. д. Обработчик события имеет имя следующего образца: on + имя_события. Например: onClick, onMouseOut, onFocus, onSubmit, onReset, onLoad...

На многие события можно реагировать с помощью JavaScript.

1.2.2. Основные события JAVASCRIPT

Итак, загрузим страницу с примерами и начнем ее изучение. Для того, чтобы примеры на странице работали нужно иметь браузер с поддержкой JavaScript. Самые распространенные из них (скорей всего одним из них Вы пользуютесь): Netscape 6.0+, Mozilla 1.0+, Microsoft Internet Explorer 4.0+, Opera 3.0+, Firefox 1.0+

а) onmouseout и onmouseover

Для начала наведем курсор на кнопку "Сброс" или "Отправить" и обратим внимание на строку состояния. Мы увидим там надпись с объяснением значения кнопки. Теперь отведем курсор и строка состояния очистится.

Содержимое строки состояния хранится в переменной window.status. Переменная это некоторый объект (можно представить себе ящик), значение которого (содержимое которого) можно изменять. Изменение значения осуществляется операцией присваивания (=), а выглядит она следующим образом:

имя_переменной = "значение"; (какие использовать кавычки: одинарные или двойные значения не имеет)

Поэтому для того, чтобы изменить надпись в строке состояния, нам нужно присвоить переменной window.status нужное нам значение (подсказку к кнопке), а когда курсор будет убран - присвоить пустую строку("").

Вся задача сводится к тому, чтобы определить когда пользователь наводит курсор на кнопку, а когда убирает его. Для этого нужно "сказать" обработчикам этих событий выполнить нужное нам действие. Обработчик события "наведение курсора" - onmouseover, а "отведение курсора" - onmouseout.

Очень многие тэги имеют атрибуты, начинающиеся с on (onclick, onmouseout, onfocus и т. д.). Значение этих атрибутов и есть, задача которую необходимо выполнить соответствующему обработчику. То есть для обработчика onmouseout есть атрибут onmouseout, для onmouseover - onmouseover. И в итоге мы получаем следующее определение кнопок:

<input type="submit value="Готово" onmouseover="window.status='Щелкните для отправки данных'" onmouseout="window.status=''" />

<input type="reset" value="Сброс" onmouseover="window.status='Щелкните для удаления введенного'" onmouseout="window.status=''" />

Как мы видим, атрибут onmouseover имеет в качестве значения JavaScript-код: window.status='Щелкните для отправки данных', как только курсор достигает кнопки, обработчик события mouseover - onmouseover, смотрит, что хранится в атрибуте onmouseover и выполняет необходимое действие(присвоение значения переменной window.status). Аналогично действует и обработчик события onmouseout: как только курсор уводиться от кнопки (то есть выполняется событие mouseout), то обработчик события - onmouseout выполняет код, содержащийся в атрибуте onmouseout.

То же самое и со второй кнопкой.

б) <a href="javascript:function()">Function</a>

Теперь щелкним на ссылке и откроется окошко с подсказкой. Но заметим, что окно небольших размеров и у него нет панели инструментов - такого силами html не сделаешь! В данном примере мы имеем окно размером 300x200, без панелей инструментов, содержащее документ help.html.

Для того чтобы создать такое окошко существует следующий JavaScript-код:

helpWindow = window.open("help.html", "", "toolbar=0,width=300,height=200"); где:

1. helpWindow - это имя переменной (как window.status, только в данном случае имя выбирается произвольно). Эта переменная нужна для последующей работы с окном (например, закрыть его нестандартным способом - с помощью JavaScript-сценария).

- Зачем? Не проще ли указывать просто имя открывающейся страницы, например help.html?

- А если у нас две копии одной и той же страницы? Или две страницы с одинаковым именем(например, в разных папках)? Вот для того, чтобы не перепутать страницы и свободно работать именно с тем окном с которым предполагаешь и сделано, так чтобы "окно" присваивалось переменной, так как имя переменной можно выбрать любое.

2. window.open(что-то) - это функция. Функции выполняют определенную задачу, в данном случае window.open() открывает новое окно.

3. help.html - это страница, которую нужно открыть.

4. "" - В кавычках должно быть имя окна, но оно нам не пригодится, поэтому там нулевая строка. В следующих кавычках указываются "параметры открываемого окна": оно не должно содержать панели инструментов (toolbar=0) и должно быть шириной 300 пикселей, а высотой - 200 (width=300,height=200, соответственно).

Теперь все, что нужно это по событию "щелчка" выполнить этот код, однако есть два "но". Во-первых строка очень длинная, чтобы присвоить ее какому-либо атрибуту - будет некрасиво смотреться, да и вызывать неудобства при чтении кода страницы. Во-вторых, первоначальное предназначение ссылки - это переход на другую страницу, но нам переходить никуда не нужно, нам нужно выполнить вместо этого JavaScript-код.

Первое решается написанием функции. Функция выполняет некоторую задачу, причем для использования функции достаточно указать ее имя. Можно не только использовать предопределенные(функции, которые имеется в языке и без нас), но и писать их самому. Обычно функции определяются(пишутся) в разделе HEAD документа, в котором используются:

<script type="text/javascript">

function help()

{

helpWindow = window.open("help.html", "", "toolbar=0,width=300,height=200");

}

</script>

"function" значит, что дальше будет написана наша функция; help() - это имя функции (оно будет указываться вместо тела функции (между { и })).

Вторая проблема решается тоже довольно просто. Адрес страницы указывается в атрибуте href, а нам надо выполнить JavaScript код вместо перехода по ссылке:

<a href="javascript:help()">Щелкните на ссылке для получения помощи</a>

"javascript:" означает, что дальше должен идти JavaScript-код, и что он должен выполняться вместо стандартного перехода по ссылке. В данном случае наш JavaScript-код - это созданная нами функция help().

в) onclick

Нам не остается ничего более, как закрыть окно со справкой. Для этого воспользуемся кнопкой "Закрыть". Но нас интересует то, как работает эта кнопка, а имеет она следующий вид:

<input type="button" value="Закрыть" onclick="window.close()">

Для того, чтобы закрыть окно мы сделали щелчок(Click) на кнопке "Закрыть", а щелчок это нажатие и отпускание кнопки мыши, причем и то и другое должно быть произведено на одном и том же элементе (например, на кнопке). Кликая, на кнопке мы активируем обработчик события onClick, который выполняет для нас JavaScript-код, прописанный в атрибуте onclick нашей кнопки. Когда мы открывали окно мы писали window.open(),здесь тоже самое только window.close(). window - это текущее окно, а close() - закрыть.

Это одно из наиболее частоупотребляемых событий.

г) onfocus и onblur

Ну что ж будем ближе подбираться к вводу требуемой от нас информации.

Элемент получает фокус когда на нем происходит нажатие кнопки мыши, или на него осуществляется переход посредством клавиши табуляции (Tab), а теряет, когда фокус получает другой элемент. Наше поле для ввода получит фокус тогда, когда пользователь решиться ввести информацию. При этом было бы удобно, чтобы текст с подсказкой ("Введите Ваше имя") автоматически выделялся и посетитель мог его удалить одним нажатием на del, а не удалять по одному символу, или выделять текст вручную. Удобство пользователя свято. Итак, для этого мы воспользуемся событием focus. Для выделения текста используется метод select(). То есть атрибутом к полю надо прописать: onfocus="this.select();", this обозначает, что выделение должно происходить именно в этом текстовом поле (а можно прописать путь и к другому, но это не целесообразно).

А теперь попробуйте ничего не изменяя (или все удалив) убрать фокус (например, щелкнув в любом месте окна, или нажав Tab). Это событие blur, я пропишу в нем выполнение функции: onblur="check();". Сама же функция имеет следующий вид (в разделе head страницы с формой между <script> и

</script>):

function check()

{

var val=document.forms[0].name.value;

if(val == '' || val == 'Введите Ваше имя')

{

alert('Вы не ввели Ваше имя!');

}

}

document.forms[0].name.value - это то, что введено в текстовое поле. document - это текущий документ, forms[0] - первая форма на нашей страницы (отсчет с нуля), name = имя поля (задается атрибутом name (<input name="name">)), а value это и есть нужное нам значение (то, что введенно в текстовое поле, к которому м ы и написали путь). Введенное в поле мы присваиваем переменной val (var значит, что дальше идет имя переменной), чтобы в дальнейшем каждый раз не писать весь путь целиком.

Следующее это оператор if(если). Он выглядит следующим образом:

if (условие)

{

Что делать если условие верно.

}

Мы сравниваем содержание переменной val с пустой строкой ('') и с начальной строкой ('Введите Ваше имя'). Обратите внимание, что сравнение не как в математике(с одним =), а сравниваются двума ==. || - или. Функция alert выводит окно с ошибкой (то, что в скобках - это текст ошибки). Тоесть:

Если (поле == '' или поле == 'Введите Ваше имя')

то

вывести('Текст ошибки');

окончание

Строка с кодом поля input:

<input name="name" type="text" value="Введите Ваше имя" onfocus="this.select();" onblur="check();" />

д) onreset и onsubmit

Допустим, что пользователь заполнил форму неправильно, и он хочет очистить все поля формы одновременно: для этого он воспользуется стандартной кнопкой reset. Но что если пользователь щелкнет на ней по случайности (рука дрогнет, или в суете спутает с кнопкой submit), а форма была огромная, и он долго мучился ее заполнять..., ему будет грустно, и еще он будет долго материться. Поэтому хорошо бы у него дополнительно спросить: действительно ли он хочет очистить форму.

Вообще событие reset обрабатывается до очистки формы. А чтобы отменить очистку вообще, нам просто напросто надо вернуть обработчику события значение false, то есть прописать в соответствующем атрибуте: "return false;", а чтобы продолжить очистку: "return true;". А теперь вспомним функцию, которая выдает вопрос пользователю на подтверждение чего-либо, эта функция: "confirm('Вопрос?');". При нажатии "Ok", эта функция заменяется на true, а при нажатии "Cancel" на false. То есть все что от нас требуется, это прописать в теге <form> атрибут: onreset="return confirm('Вы действительно хотите сбросить форму?');". Тогда при нажатии "Ok" там на самом деле будет "return true;", и форма будет очищена, а если "Cancel", то "return false;" и очистка формы будет отменена.

Подобным образом действует событие submit, которое возникает при попытке отправить форму. Поскольку в нашем случае форму отправлять никуда не надо, то у меня просто написано: onsubmit="return false;". И сколько бы Вы не щелкали ничего не изменится (разве что Вы JavaScript отключите).

Обычно же обработчик onsubmit используется для верификации формы (то есть проверки на заполнение всех необходимых полей, правильность их заполнения, скажем, проверка по определенному шаблону и т. п.), для этого создается функция, которая выполняет все действия. Функция должна содержать операторы "return true" и "return false", которые позволяют, заменить функцию на true или false, соответственно, в зависимости от результатов проверки (если успешно, то true, если нет false). Но верификация данных это обширная тема, которая не может быть рассмотрена здесь. Один из примеров базовой верификации я привел, когда объяснял событие blur - подобную функцию можно использовать и здесь. Тогда <form> будет содержать атрибут: onsubmit="return function();".

Но не забывайте, что нельзя ограничиваться одной лишь проверкой языком JavaScript, ибо его поддержка может быть отключена у посетителя, и тогда все Ваши труды по защите...

<form action="page.cgi" onreset="return confirm('Вы действительно хотите сбросить форму?');" onsubmit="return false;">

е) onmousedown и onmouseup

Еще одна пара событий не нашла достойного места на странице, но я ее реализовал в виде кнопки "Button". Причем это не обычная html-кнопка, она реализована в виде двух картинок. Исходная кнопка хранится в файле с именем npressed.jpg, а нажатая - pressed.jpg. Чтобы достичь эффекта нажатия кнопки нам необходимо, чтобы при при щелчке на ней(this) значение атрибута src (путь к картинке) тега <img> менялось на pressed.jpg, а при отпускании обратно на npressed.jpg. Нажатие кнопки обрабатывает onmousedown, а отпускание - onmouseup, то есть здесь все просто:

<img src="npressed.jpg" onmousedown="this.src='pressed.jpg'" onmouseup="this.src='npressed.jpg'" />

ж) onload, onunload и onabort

Обработчик события onload активируется, когда начинает загружаться графическая часть страницы (все тексты, графика и т.п.). onload является атрибутом тега <body>. Если честно я не вижу сколько бы реального применения этому событию, зато я нашел, что можно сделать с onunload. onunload это тоже атрибут тега <body>. Событие unload происходит когда мы пытаемся покинуть данную страницу (переходим по ссылке на другую, закрываем окно браузера, обновляем страницу и т. д.). Откройте еще раз окошко справки. Допустим, что пользователь прочитал справку, и хочет отправить форму, или уйдет с нашего сайта, но при этом он забыл закрыть это маленькое окошко с подсказкой, мы на выходе закроем его сами. А для этого тег <body> (у начального документа) у нас будет выглядеть следующим образом:

<body onunload="helpWindow.close()">

Вы должны бы помнить, что helpWindow это имя нашего окна (ведь именно этой переменной мы присваивали его открытие: helpWindow = window.open("help.html", "", "toolbar=0,width=300,height=200")), а метод close() закрывает это окно. Некоторые нехорошие люди используют это событие, чтобы когда посетители уходили с его страницы, появлялись какие-либо окна, так называемые pop-up.

onabort - атрибут тега <img>. Когда пользователь отменяет загрузку изображения происходит событие abort. Но отмена загрузки изображения может не входить в наши плане. И в качестве предупреждения у нас может быть написано нечто похожее на

<img src="myimage.jpg" onabort="alert('Изображение до конца не загружено! Это может привести к ошибкам.');" />>

onchange - обработчик события, который активируется, когда Вы изменяете содержимое текстового элемента или текстовой области (<TEXTAREA>) (например, когда Вы вводите или удаляете очередную букву какого-либо текстового поля).

onselect - обработчик события выбора текста. То есть это событие происходит, когда пользователь пытается выделить текст в текстовом элементе или текстовой области.

onerror - обработчик события error, которое возникает при ошибке загрузки документа или изображения (то есть onerror это атрибут тегов <body> и <img>). Оно возникает при синтаксической ошибке JavaScript-кода (но Вы ведь не будете специально делать в нем ошибки), либо ошибкой времени выполнения (например, если Ваш скрипт выполняет какие-либо вычисления и у Вас по ошибке получится так, что некое число будет делиться на ноль, а это недопустимо - это и есть одна из ошибок времени выполнения).

1.3 Баннеры

Баннер (англ. banner -- флаг, транспарант) -- графическое изображение рекламного характера, аналогичное рекламному модулю в прессе. Может быть как статичным изображением или даже текстом так и содержать анимированные элементы (вплоть до видео и интерактивных объектов). Как правило содержит гиперссылку на сайт рекламодателя или страницу с дополнительной информацией.

Главный параметром, на который ориентируются при создании баннера - это CTR (показатель эффективности баннера), вычисляемый по формуле: отношение числа пользователей, перешедших по нему, к общему числу посетителей видевших страницу с данным баннером.

CTR зависит от нескольких факторов:

*Во-первых - расположение баннера. Понятно, что у баннера, размещенного на видном месте, да еще и на главной странице сайта больше шансов быть замеченным посетителем. Соответственно «кликов» (переходов) по нему будет гораздо больше, чем, если бы тот же баннер затерялся бы где-нибудь в конце страницы. Также стоит обращать внимание на содержание веб-страниц, на которых предположительно будет находиться баннер. Если страница переполнена различными ссылками и рекламой, вероятность привлечения внимания именно к вашему баннеру заметно снижается. Поэтому для размещения баннеров лучше выбирать страницы, содержащие исключительно текстовую информацию. Наиболее выигрышными считается размещение баннера вверху страницы.

*Во-вторых, чтобы добиться наибольшей эффективности, баннеры должны размещаться на ресурсах, близких по тематике рекламодателю. Простой пример: баннер, предлагающий чудо-крем от морщин, вряд ли может рассчитывать на внимание посетителей, если он находится на сайте, посвященном проблемам ипотечного кредитования.

*В-третьих, баннер, содержащий качественный и релевантный текст, способен привести на сайт рекламодателя потенциальных потребителей его товаров или услуг. Другими словами, если человек нажимает на баннер, в первую очередь, обращая внимания на его содержание, значит, он действительно заинтересован в той информации или товарах, которые ему обещают в рекламе.

*В-четвертых, дизайн баннера. Напрямую зависит от вида рекламируемых услуг. Если баннер принадлежит развлекательному порталу, он выполняется в ярких, агрессивных цветах. Целью такого дизайна, прежде всего, является привлечение как можно большего числа пользователей. Солидные компании, при изготовлении своих баннеров, большое значение уделяют текстовой составляющей, расположенной на нейтральном фоне. Кроме того, на баннере могут размещаться логотип и прочие атрибуты индивидуального стиля компании.

1.4 История баннера

Существует мнение, что первый баннер появился в 1994 году. На тот момент это была простая картинка, которая вела на рекламируемый сайт. Такой новый вид рекламы по началу использовался просто для того, чтобы на страницах одного сайта прорекламировать другой сайт. Однако довольно скоро стало понятно, что сайт рассказывающий о каких-либо товарах или услугах может получать отчисления от производителей данных товаров или услуг за размещения на своих страницах их рекламы. Это привело к настоящему буму баннеров. Нередко создавались (и по сей день создаются) страницу направленные только и исключительно на получение прибыли от баннерной (и других видов) рекламы.

Чрезмерная эксплуатация графических изображений определенных форматов вынуждала рекламодателей придумывать все новые и новые неожиданные решения для привлечения внимания потенциальных клиентов: сначала рекламисты использовали необычные размеры баннеров («небоскребы», «кнопки»), затем анимацию (от простейших мигалок, до целых мультфильмов). Пользователи отвечали на эти ухищрения сначала всплеском интереса, а затем начинали игнорировать баннеры. В надежде на то, что пользователь найдет свою информацию, а потом посмотрит рекламу появились баннеры, открывающиеся в отдельном окне (Pop-up / Pop-under). Их кажущаяся рекламодателям успешность привела к тому что многие браузеры в наши дни по умолчанию блокируют все всплывающие окна, открытые без ведома пользователя. Рекламодатели тогда сменили политику и теперь баннеры часто стали появляться непосредственно над или даже вместо содержимого страницы (давая возможность пользователю после просмотра рекламы перейти к нужному содержимому). Пользовательская реакция была ещё жестче -- появились программы блокирующие всю рекламу на сайте (например Adblock, Ad Muncher, adguard) Однако развитие сетей и видов контента привело к появлению видео, которое стало возможным просматривать прямо на страницах сайта. Как следствие появились и видео-баннеры и реклама встраиваемая прямо в видеоролики, просматриваемые пользователями. Реклама сегодня пытается привлечь внимание пользователей интерактивными элементами, играми, видеороликами, элементами экспертных систем. Самый большой прирост эффективности современной баннерной рекламе дали технологии контекстного таргетинга, позволившие показывать пользователю только ту рекламу, которая совпадает по тематике с просматриваемой страницей. Все это не мешает многим пользователям и сегодня использовать блокирующие рекламу программы.

1.5 Создание баннера

Первое, что надо сделать - это определиться с кодом баннера и с самим баннером. Вот как выглядит код:

alt="Мой баннер" border="0">

С него мы сможем построить то, что нужно. А нужно нам будет знать, сколько раз показывается тот или иной баннер на определенном сайте. И желательно - время последнего показа. Для этого надо выделить один файл, который будет работать базой данных. Структура сайта выглядит следующим образом - каждая строчка соответствует одному из сайтов, на котором показывают баннеры. Разделителем между строками является, как и обычно, перевод строки. Разделителем в самой строке между информационными данными можно выбрать символ ^. Этот символ не встречается в адресной строке браузера, и нам очень даже подходит.

Структуру строки файла базы данный выберем вот так:

Адрес ^ время последнего посещения ^ количество посещений

Таким образом получается три поля, которые нужно в дальнейшем будет менять в зависимости от того, откуда вызывается баннер. Для того, что бы это знать, надо ввести в код баннера один параметр - идентификатор сайта. Для каждого из сайтов, участвующих в баннерообмене, идентификатор должен быть различным. И кроме того, для того, что бы обработать этот идентификатор, вызовем не сам баннер, а специальный скрипт PHP, который сначала обработает все данные, а затем выведет на экран нужный баннер.

alt="Мой баннер" border="0">

Поменялось имя файла и добавился параметр id. Теперь вызывается не непосредственно сам баннер, а скрипт baner.phtml, который и ведет статистику показов и времени посещения. В конце скрипта должен обязательно быть переход на баннер вот в таком виде:

header ("Location: baner.gif");

Теперь давайте перейдем к вопросу о ведении статистики. Несложно сделать просто подсчет показов, так как задача эта тривиальна - достаточно считать в массив базу данных посещений, и затем увеличить на 1 ячейку массива с индексом, соответствующим переменной id. Это наш идентификатор. Но у нас более сложная задача - организовать возможность просмотра всей статистики в дальнейшем и запоминать время последнего показа баннера. Значит, надо записывать в базу и время, и адрес сайта, с которого вызывается баннер. Адрес мы будем запоминать только для того, что бы в дальнейшем можно было узнать статистику показов, а в самой процедуре подсчета он не участвует.

Итак, начнем. Наш скрипт, прежде всего, должен проверить на правильность полученную переменную id. Если она не больше установленного значения и не меньше ноля, то все нормально, иначе присваиваем переменной id ноль, или выводим сообщение об ошибке. Значение переменной id с индексом ноль нужно специально зарезервировать для таких вот ошибок, и всегда будет ясно - кто-то разместил не правильный код или допустил в нем ошибку при наборе. Но, если же все нормально, а так чаще всего и будет, скрипт должен считать в память файл с базой данных:

$adds = "url.txt";

$txt = file($adds);

Вся информация оказывается в массиве с именем $txt. Идентификатор указывает на тот индекс, где в массиве расположены данные сайта, с которого вызван баннер. Обратиться к этим данным очень просто:

$str = trim(str_replace (" ","", $txt[$id]));

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

list ($add, $time, $counter) = split ("^", $str);

Вот тут нам и пригодился наш разделитель. Все, вся информация извлечена, теперь ее надо обновить и записать обратно. Собственно, нужно просто увеличить переменную $counter на единицу, считать текущее время и присвоить переменной $time его значение. Если со счетчиком все ясно, то время требует пояснения. Лучше и проще всего считывать его в Unix-овском формате. Полученное значение будет равно количеству секунд, прошедшему после 1 января 1970 года. Ну, так уж принято, хоть и немного странно для простого пользователя. Но, нам важно, что это число секунд очень легко преобразуется в дальнейшем в конкретные даты, а хранить его очень просто, так как это, по сути, просто большое число. Его получить можно так:

$time = time(void);

$counter++;

Заодно увеличили показания счетчика. Все - теперь осталось только записать всю информацию обратно. Суммируем строку, и заносим полученное значение в нужную ячейку массива:

$txt[$id] = $add."^".$time."^".$counter." ";

И тут тоже не забываем про наш разделитель и про перевод строки в конце для правильного считывания в дальнейшем. Осталось только записать весь массив в файл с базой данных, но для этого его надо сначала объединить в одну строку:

$str=implode("", $txt);

$fp = fopen($adds, "w");

if ($fp) { $fw = fwrite($fp, $str); fclose($fp); }

Вот и все, так как все поставленные нами задачи мы выполнили.

Скрипт вывода статистики:

$adds = "url.txt";

$txt = file($adds);

$i = 0;

while ($i <= count($txt)):

$temp = trim(str_replace (" ","", $txt[$i]));

list ($add, $time, $counter) = split ("^", $str);

echo $add." - ".$counter." : ".$time."

";

$i++;

endwhile;

?>

Единственная трудность - перевести формат времени в разумный вид, но для этого существует масса хороших и не очень алгоритмов. Их Вы уже найдите сами - пусть это будет в качестве домашнего задания

1.6 Виды баннеров

Типология во многом связана с задачей -- каждый вид эффективен для выполнения определенной задачи в рамках конкретной баннерной сети.

Баннеры существуют для разных целей и в зависимости от этого подразделяются на: целевые, информационные, внутренние, брендовые.

Целевые -- нацелены на определенную аудиторию пользователей сети. Идея этого типа заключается в привлечении на сайт посетителей, заинтересованных в товарах, услугах или информации рекламодателя.

Информационные -- информируют пользователей о товарах, услугах или грядущих событиях с тем, чтобы вызвать у них интерес узнать о перечисленном больше.

Внутренние -- баннеры, ссылающиеся на страницы сайта, на котором они установлены. К примеру, баннеры на сайтах хостинговых компаний часто несут описание тарифных планов и ведут к соответствующим страницам данного сайта.

Брендовые -- делают узнаваемой торговую марку рекламодателя, формируют у пользователя ассоциацию между товаром и торговой маркой.

Кроме того, информация в баннере представляется в разных форматах. Существует 4 типа:

1. Баннер, построенный на flash (Flash-баннер): Наиболее молодой, перспективный и «родной» для нас вид. Основные преимущества flash-технологии следующие.

Flash баннеры: flash технология предоставляет дизайнерам большой размах для осуществления творческих идей. При помощи flash, возможно, визуализировать практически любую фантазию. Использование flash в определенных элементах сайта улучшает имидж компании и узнаваемость сайта, поэтому flash может подарить структуре сайта динамичности и красоты.

Flash баннеры являются эффективнее, чем обычные jpeg или gif баннеры. Создание flash баннеров - это хороший выбор для тех, кто хочет привлечь внимание посетителей на свой сайт и донести до посетителей важную информацию.

В таких видах баннеров возможно создание яркой, полноценной анимации при минимуме затраченных усилий.

Размер flash-анимации во много раз меньше аналогичных по внешнему виду, но реализованных с использованием, например, GIF. Чем сложнее и правдоподобнее мультипликация, тем больше проявляется это различие.

Flash позволяет создавать интерактивные баннеры, причем куда проще, чем с использованием Java.

Flash-баннер по сумме своих достоинств (динамичность, красочность, интерактивность, небольшой размер, информативность) оставляет далеко позади любой другой вид баннеров. Поэтому flash-баннеры намного популярнее у рекламодателей, чем все остальные.

У баннеров такого вида есть еще одно преимущество -- они загружаются даже тогда, когда пользователь отключает отображение графических элементов. В этом случае их эффективность резко возрастает: на фоне полного отсутствия на странице графики яркий flash-баннер обязательно привлечет внимание.

Выбор вида баннера определяется постановкой задачи. Если нужно создать статичный рекламный призыв, то оптимальным будет JPEG. Простенький динамичный баннер лучше сделать, применив GIF. Для создания анимированного или интерактивного баннера -- Вашей флэш визитки -- идеален SWF-формат (flash). Однако может оказаться так, что сеть, в которой у Вас есть определенное количество показов, не поддерживает flash или, наоборот, может работать только с баннерами в формате SWF. Тогда придется, согласовывая собственный полет фантазии с печальной реальностью, искать промежуточные варианты. Благо, различные виды баннеров в некоторой степени взаимозаменяемы.

вставка Swf файла

файлы Flash вставляются с помощью тега <OBJECT>

пример:

<object width="200" height="300">

<param name="movie" value="file.swf">

<embed src="file.swf" width="200" height="300">

</embed>

</object>

2. HTML-баннер - это баннер, содержимым которого является код.

Код может представлять из себя html верстку баннера, либо код вставки сторонней системы управления интернет-рекламой.

3. Java-баннер: Представляет собой обычный Java-апплет, встроенный в HTML-документ. Ввиду технической сложности и большого «веса» использовать баннеры такого вида стоит лишь для достижения интерактивности. Замечено, что если при наведении указателя мыши на баннер происходят динамичные изменения или проигрывается звук, то его эффективность окажется гораздо выше не интерактивного аналога. Основными препятствиями к распространению такого вида баннеров стала сложность их изготовления и несовместимость с большинством баннерных сетей. Кроме того, с появлением flash-баннеров все интерактивные эффекты стало гораздо проще воплощать с помощью ActionScript.

4. Баннер на основе растровой графики (GIF, GIF87a, JPG, pJPEG, PNG, JFIF)

- GIF-баннер

Перечислим положительные черты этого вида баннеров.

Основной плюс использования стандарта GIF - возможность рисовать анимированные баннеры. До широкого распространения flash-технологий это была единственная возможность создания динамических баннеров без использования программирования.

Достаточно небольшой размер получаемых файлов.

Поддержка прозрачности (весьма полезная возможность при изготовлении баннеров).

Недостатки GIF-стандарта:

в таком виде баннеров трудно реализовать «навороченный» экземпляр, возможны лишь несложные смены слоганов и анимации.

в формате GIF невозможно создать интерактивный баннер.

- JPEG-баннер

JPEG-стандарт был создан для сохранения изображений фотографического качества в файлах небольшого размера. Он оптимально подходит для создания статичных графических баннеров с использованием фотографий. Главные достоинства такого вида баннеров -- малый «вес» и возможность размещения практически в любой сети. Недостатки -- статичность и, опять же, невозможность создания интерактивного баннера. В данный момент весьма распространен (прежде всего потому, что прост в изготовлении, однако все активнее вытесняется более эффективными анимированными конкурентами).

1.7 Форматы баннера

Существует пять стандартных размеров (форматов) баннеров:

480х60 - Самый большой по размеру баннер. Чтобы не было проблем при его размещении на сайте и не пришлось в срочном порядке перекраивать структуру ресурса, еще на этапе верстки необходимо предусмотреть место для такого рода баннеров.

400х40 - Мини-баннер, обладающей значительной длиной. Как и в случае с предыдущим форматом, для баннера 400х40 требуется заранее предусмотреть площадь размещения.

234х60 - Для экономии места на сайте, веб-мастера располагают подобные баннеры парами.

120х60 - «Рекламный» кирпич». Размещается в вертикально расположенных элементах веб-страницы.

88х31 - Баннер - «кнопка», названный так из-за небольших размеров. Является самым распространенным в Интернете. Помещается на любом сайте. 

1.8 Скрипт показа баннеров на PHP4

Скрипты показа баннеров, изложенные в этой статье довольно элементарны. Описания баннеров, количество кликов и показов хранится в текстовом файле, поэтому наличия MySQL не требуется.

Для начала создадим файл, в котором будем хранить всю информацию. Назовем его database.txt. Файл будет содержать записи следующего формата:

URL1|IMG1|NAME1|WH1|SHOW1|CL1

URL2|IMG2|NAME2|WH2|SHOW2|CL2

...

Где эти слова означают следующее:

*URL - ссылка баннера, куда будет переходить пользователь по клику;

*IMG - имя файла изображения, которое будет выводится на экран;

*NAME - alt-текст изображения;

*WH - строка вида WIDTH=XX HEIGHT=XX, ширина и высота изображения; если все изображения одного размера, соответственно можно упростить скрипт;

*SHOW - показы баннера, пишем изначально 0;

*CL - клики по баннеру, пишем тоже 0;

Разделим логику на два файла. Один файл будет отвечать за показ баннера, назовем его banner_show.php, другой - за учет кликов по баннеру, назовем его banner_click.php. Пишем baner_show...

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

<?

$array_bann = file ('database.txt');

Потом - инициализируем генератор псевдослучайных чисел, выбираем случайную запись из считанного файла, разделяем ее на элементы через признак "|" и заносим их в массив $data_bann.

srand((double)microtime()*1000000);

$pos = rand(0,sizeof($array_bann)-1);

$data_bann=explode ("|", $array_bann[$pos]);

Далее выводим на экран собственно сам баннер на основе данных из массива $data_bann;

echo "<a hrefєnner_click.php?banner=$pos target=_blank>";

echo "<IMG SRC='$data_bann[1]'";

echo "ALT='$data_bann[2]' $data_bann[3] border=0></a>";

Увеличиваем счетчик показов баннера на единицу.

$data_bann[4]++;

Склеиваем измененную запись и записываем весь массив в файл;

$array_bann[$pos]=join('|',$data_bann);

$fp= fopen ('database.txt',"w");

flock($fp,3);

fwrite ($fp, join('',$array_bann));

fclose ($fp);

?>

Теперь займемся файлом banner_click.php. Открываем файл с данными.

<?

$array_bann = file ('database.txt');

В переменной $banner - у нас уже переданный из html-файла номер баннера, по которому кликнули. Берем запись, соответствующую этому номеру, опять разделяем ее на кусочки через "|" и заносим это в массив $data_bann.

$data_bann=explode ("|", $array_bann[$banner]);

Увеличиваем счетчик показов на единицу, склеиваем запись обратно в $array_bann.

$data_bann[5]=$data_bann[5]+1;

$array_bann[$banner]=join('|',$data_bann)."\n";

И записываем изменненный массив в файл database.txt.

$fp= fopen ('database.txt',"w");

flock($fp,3);

fwrite ($fp, join('',$array_bann));

fclose ($fp);

Отсылаем пользователя по адресу, хранящемуся в переменной $data_bann[0];

header("Location: http://$data_bann[0]");

?>

От накрутки кликов можно некоторым образом защитится, используя запись кукисов в одном скрипте и считывание их в другом.

1.9 Тег <embed>

Элемент <embed> используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.

Синтаксис

<embed width="..." height="..."></embed>

Атрибуты

1. align

Определяет как объект будет выравниваться на странице и способ его обтекания текстом.

2. height

Высота объекта.

3. hidden

Указывает, скрыть объект на странице или нет.

4. hspace

Горизонтальный отступ от объекта до окружающего контента.

5. pluginspage

Адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру.

6. src

Путь к файлу.

7. type

MIME-тип объекта.

8. vspace

Вертикальный отступ от объекта до окружающего контента.

9. width

Ширина объекта.

Пример Тега <embed>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Тег EMBED</title>

</head>

<body>

<embed src="images/mouse.swf" width="400" height="300" type="application/x-shockwave-flash"

pluginspage="http://www.macromedia.com/go/getflashplayer">

</body>

</html>



Глава 2. Пример web-программирования flаsh-баннера

Вставка Swf файла

Файлы Flash вставляются с помощью тега <OBJECT>

пример:

<object width="200" height="300">

<param name="movie" value="file.swf">

<embed src="file.swf" width="200" height="300">

</embed>

</object>

Для того что бы наш баннер заработал нам необходимо наличие следующих файлов: