Маленькая баннерная сеть каждому Javascript


Оглавление (нажмите, чтобы открыть):

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты.

Продвижение веб-сайта.

Контент и авторское право.

JavaScript: полезные функции (часть IV) (Сборник рецептов)

Для чего это нужно?

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

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

Условия задачи и ограничения

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

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

Накладываем на эти условия некоторые ограничения:

  • баннеры будут фиксированного размера и храниться в формате GIF или JPEG;
  • на страничке мы будем одновременно показывать четыре баннера.

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

  • имя файла;
  • альтернативный текст;
  • адрес странички, на которую ссылается баннер.

Для удобства хранения и обновления базы баннеров лучше всего выделить её описание в отдельный файл и подключить при помощи механизма вставки внешнего js-файла. Это делается в секции заголовка при помощи следующей конструкции:

А вот так, будет выглядеть содержимое файла banners.js

var banners = new Array( «pic-01.gif», «Text #1», «https://www.link1.com/», «pic-02.gif», «Text #2», «https://www.link2.com/», «pic-03.gif», «Text #3», «https://www.link3.com/», «pic-04.gif», «Text #4», «https://www.link4.com/», «pic-05.gif», «Text #5», «https://www.link5.com/», «pic-06.gif», «Text #6», «https://www.link6.com/», «pic-07.gif», «Text #7», «https://www.link7.com/», «pic-08.gif», «Text #8», «https://www.link8.com/», «pic-09.gif», «Text #9», «https://www.link9.com/», «pic-10.gif», «Text #10», «https://www.link10.com/» )

Как видите, структура массива не очень сложна. Под каждый баннер отводится три последовательные ячейки, в которых и хранятся: имя файла, альтернативный текст, адрес ссылки.

Вот мы и добрались до программирования. И, сначала, разберёмся с некоторыми моментами.

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

Но, как я уже упоминал раньше, мы договорились, что одновременно на страничке будут показываться четыре баннера. И, следовательно, после каждой генерации случайного числа нам необходимо проверить, что данный баннер не совпадает с 3-мя другими. К тому же нам нужно где-то хранить уже сгенерированные числа. Для решения этих задач мы организуем ещё один массив — случайных чисел и при каждой генерации нового числа будем сопоставлять его с найденными ранее. Полный код, который решает эти проблемы, приведён ниже:

var i, j; var flag; // Флажок, используемый для проверки совпадения var banners_show = 4; // Число показываемых на страничке баннеров var rand = new Array(banners_show); for (i=0; i

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

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

Вот, практически, и всё, наша локальная баннерная система готова. Осталось только четыре раза вызвать функцию Show_Banner() из подходящей части странички. Нужно только не забыть, что код JavaScript отделяется от html тегами : .

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

Архив с примером скрипта, рассмотренного в данной статье, можно взять отсюда.

Генерация правильного кода баннерной зоны на JavaScript

Представим, что мы делаем рекламную сеть или еще что-то подобное, где нужно отдать пользователям определенный JS код, вставив который в разные места страницы, там будут отображаться разные штуки. Баннеры, например. Наиболее часто встречаемые мной варианты были такие:

  • Обычная html вставка кода баннера (флешки, картинки).
  • Вставка iframe, где html код генерируется по отдельному запросу в ифрейме.
  • Когда на js через document.write пишется код для двух вышеуказанных способов.

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

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

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

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

Чтобы решить четыре вышеназванные задачи, нужно сделать единый скрипт загрузчик баннеров, который можно обновлять в любое время, который, до вывода на страницу баннеров, запросит с другого сервиса нужную информацию и сможет показать любой баннер на странице. Как мне показалось, buysellads немного согрешили, разделив код, который они отдают веб-мастерам, на две части. В шапке подключается единый скрипт загрузчик баннеров, а потом на странице расставляются места, где они будут показаны.

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

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


Итак, если я (загрузчик) еще не загружался на страницу, то пишем все функции, которые нам нужны. Здесь сразу вызывается функция showProducts, но баннер не рисуется. Пока нам нужно только запомнить, где его нужно будет показать при загрузке страницы. Для этого при вызове создаем в текущем месте пустой и невидимый div с определенным id, чтобы потом его можно было найти на странице. Кроме этого, для простоты ведем учет вызовов этой функции и сразу генерируем код баннера, который будет показан на этом месте. Это немного неприлично, поскольку еще нет данных с другого сервиса, но пока так. Вот кстати и здесь код баннера может быть любым. Можем еще скрипты какие-либо загрузить, либо флешку вставить сразу, либо просто текст на страницу вывести.

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

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

Далее по коду на window.onload вызываем показ наших баннеров. Таким образом они будут показаны, когда на странице уже все загрузится. Здесь стоит добавить проверку на случай, если данные со стороннего сервиса еще не пришли, тогда нужно подождать и повторить попытку чуть позже по таймеру. Но, обычно, до загрузки страницы эти данные уже приходят. Страница то загружена. Хотя интересно, ждет ли onload загрузки данных, запрошенных в скриптах или просто быстро все загрузилось в данном примере. Кто подскажет?

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

В случае с buysellads, там используют getElementsByClassName и getElementsByTagName для поиска расставленных на странице div-ов. Что-то не просто там все как посмотреть. Но в их случае нет ожидания, пока загрузчик сам загрузится. Вставляется таким кодом асинхронно:

На страницу бросаются div-ы, без вызова JS из этого загрузчика.

Это чуть круче, чем в рассмотренном нами примере. Но в моем случае проще работать с параметрами, они сразу на страницу пишутся и при их большом количестве будет удобнее, без дополнительных запросов за параметрами в базу данных. Как в вашем случае делать — выбирать вам, это общая схема.

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

Ну вот и все. Баннеры на странице. Метод показался самым правильным из пересмотренных по интернету. Что думаете, кроме того, что похоже многих злят баннеры? 🙂

Сети баннерной рекламы — кого выбрать на рынке?

В баннерных сетях существует два метода оплаты: клики и показы. В этом обзоре мы рассмотрим лучшие баннерные сети в рунете.

Ротабан: баннерная сеть с оплатой за показы

Биржу баннерной рекламы Rotaban можно назвать классикой жанра. Здесь рекламодатель платит только за показы баннера в течение 30 календарных дней на выбранном ресурсе.

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

  • Количество показов за месяц (уникальных посетителей);
  • Цена (за 30 дней);
  • Рейтинг сайта (Alexa Rank, Compete Rank, Google Page Rank, Yandex ТИЦ, а также по числу страниц в Яндекс и Гугл);
  • Категория (тематика) сайта;
  • Размер баннера;
  • Новые площадки (по времени добавления на биржу).

Каждый ресурс предоставляет информацию о месте размещения баннера на своих страницах. Цены стартуют от 30 рублей и ограничиваются в верхнем пределе только фантазией вебмастеров.

Реклама в баннерной сети RMBN

Рекламная сеть RMBN специализируется на производстве баннерной рекламы. Различные форматы баннеров призваны привлечь максимум внимания пользователей.

При работе с RMBN заказывать графические и мультимедийные баннеры у сторонних разработчиков не нужно: их изготовление входит в стоимость кампании в целом.

RMBN – это баннерная сеть с оплатой за клики и за показы. Какой из видов выбрать вы решаете самостоятельно.

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

Баннерная рекламная сеть advmaker

В рекламной сети advmaker можно создать баннерную кампанию с оплатой за переходы, показы, регистрации или запустить рекламную акцию на бренд.

В advmaker широкий выбор форматов: статические и интерактивные баннеры, информационные и всплывающие окна, баннер для видеоплеера. Рекламные материалы для постоянных клиентов разрабатываются бесплатно.

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

Одним из преимуществ данной сети является высокоточная настройка таргетинга:

  • по ip-адресу;
  • по странам и городам;
  • по браузеру;
  • по дням недели / часам;
  • фильтрация ботов и frame-трафика;
  • по половому признаку;
  • по интересам;
  • по тематикам площадок.

Мобильные баннерные сети для растущей аудитории

Реклама, адаптированная для показа на мобильных устройствах – планшетах и смартфонах – требование сегодняшнего рынка.

Мобильная рекламная сеть AdWired

AdWired специализируется на создании баннеров именно для аудитории приложений и мобильных сайтов.

Здесь предоставляются широкие возможности таргетинга:

  • Гео таргетинг (с точностью до города);
  • Таргетинг по операционной системе;
  • По производителю устройства;
  • По модели устройства;
  • По типу соединения (3G/WiFi);
  • Частотные настройки показов;
  • Таргетинг по оператору связи;
  • По приложениям;
  • Поведенческий таргетинг (по полу, возрасту).

Отличительная черта мобильного баннера – реализуемые в нем действия (кроме классического перехода на сайт):


  • Звонок в колл-центр или заказ обратного звонка;
  • Сбор лидов;
  • Установка приложений.

Мобильная сеть объявлений Adinch.com

Хорошим решением для покупки мобильного трафика является мобильная сеть объявлений adinch.com.

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

Надеюсь, мой список баннерных сетей помог вам определиться и решить свои задачи!

30 сайтов-примеров отличного использования JavaScript Материал редакции

Ресурс Creative Bloq опубликовал материал, в котором его авторы поделились с читателями лучшими, на их взгляд, примерами использования JavaScript для создания сайтов. ЦП выбрал 30 самых интересных ресурсов.

Мастер Йода рекомендует:  Руководство по созданию ядра для x86-системы. Часть 2. Система ввода вывода

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

1. Портфолио Майка Куса

Портфолио веб-дизайнера Майка Куса выполнено в «чистой и сдержанной манере», пишут редакторы Creative Bloq. В нём большие изображения сочетаются с простыми элементами пользовательского интерфейса.

«Я думаю о своих работах, как о бренде. Нет никакой необходимости добавлять в мой сайт лишние элементы дизайна», — говорит Кус.

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

2. Hello Monday

Сайт креативного агентства Hello Monday претерпел значительные изменения, замечают авторы статьи. Разработчиками компании была проделана огромная работа. Им удалось сделать интерфейс дружелюбным для пользователя.

Старый сайт агентства Hello Monday

Теперь на сайте представлены примеры уже выполненных агентством заказов — у каждого проекта есть своя страница, на которой описана его история, что даёт пользователю более глубокое понимание, чем занимается Hello Monday.

Обновлённый сайт Hello Monday

«Мы пытались отойти от шаблонного представления о том, как должен выглядеть сайт креативного агентства», — рассказывает Кэти Хертел, руководитель проекта по редизайну веб-страницы Hello Monday. Авторы материала находят сайт очень привлекательным и отзывчивым, чему способствует организация проектов на главной странице: она автоматически дополняется новыми работами агентства при прокрутке вниз.

3. Multeor

Multeor — это многопользовательская онлайн-игра, написанная на JavaScript с использованием элемента canvas HTML5. Она разработана Арьеном де Врайзом и Филидором Вайзе, а спроектирована Артуром ван Хугом. Основная задача пользователя в игре — контролировать падение метеоритов, получая очки за оставленные им разрушения.

Игра использует Node.js-сервер для управления связью между настольными и мобильными устройствами с помощью WebSockets.

Вайзе акцентирует внимание на том, что при разработке Multeor не использовались уже существующие игровые библиотеки:

Мы писали всё сами — это было очень увлекательно, к тому же, мы узнали много нового. То, что мы не зависели от конкретных сборок и префабов, дало нам определённую свободу действий: не нужно было заниматься рендерингом существующей графики, обработкой коллизий и отдельно описывать систему, отвечающую за взрывы.

4. Crime Timeline

Crime Timelime — агрегатор, собирающий данные о преступности в Великобритании с помощью публичных API. Он позволяет пользователям узнать, как обстоят дела в их регионе.

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

Ресурс использует API Google Maps, для создания панели с месяцами применялись jQuery и jQRangeSlider. Когда пользователь взаимодействует с картой — например, щелкает мышкой в определенное место на ней, сайт обновляет изображение с помощью JavaScript. «Пузырьки», показывающие количество преступлений, были созданы с помощью CSS и анимированы с помощью jQuery.

5. Here is Today

На сайте Here is Today язык JavaScript использовался для создания анимации. Создатель ресурса, дизайнер Люк Твимэн, так объясняет свою идею: «Я хотел создать что-то, что дало бы каждому человеку ощущение масштаба времени. Here is Today помогает понять, насколько обширна история вселенной».

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

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

6. Tweetmap

Tweetmap изображает на страны на карте пропорционально количеству отправленных из них твитов. Разработчик сервиса Роб Хоукс перечисляет несколько технологий, использованных при его создании: TopoJSON, D3.js, Node.js, PhantomJS, и специальные алгоритмы построения смежных картограмм в режиме реального времени.

Мы выбрали Node.js, потому что у нас уже был опыт его использования, и потому что это простая, быстрая и гибкая платформа. Для анимации карты (в формате TopoJSON) мы используем D3 — фантастическую библиотеку для визуализации данных. В частности, мы широко применяем модуль geo, который позволяет делать сложные географические расчеты и преобразования.

Чтобы избежать проблем с представлением карт в браузере клиента, система генерирует карты на сервере с помощью D3, запускает и рендерит их с помощью движка PhantomJS, и только потом передаёт пользователю — это позволяет не создавать «дыр» при показе карт.

7. The Trip

The Trip — интерактивный фильм, созданный с помощью JavaScript и HTML5 (без использования Flash). Отто Наскарелла, создатель проекта, считает, что задача разработки подобного сервиса оказалась очень сложной:


Большинство трудностей, с которыми мы столкнулись, были связаны с тем, что HTML5 на момент написания сайта не имел средств для кросс-браузерной разработки. Тогда мы решили, что будем рекомендовать клиентам использовать Chrome.

Код сайта на JavaScript использует jQuery практически для всех задач. Разработчики также применяли TextBlur и TextDrop — для размытия и анимации текста.

8. Si Digital

Эта страница, написанная на JavaScript — новое портфолио и блог дизайнерского и маркетингового агентства Si Digital. Ведущий разработчик проекта Алекс Крук так объясняет анимацию на главной странице: «Жидкость, движущаяся по трубам, ведёт пользователей по нашему портфолио — она активирует анимацию изображений на каждом из этапов исследования сайта клиентом».

Для достижения подобного эффекта Крук применил метод jQuery.animate(). К тому же, добавляет он, нужно было правильно выбрать скорость заполнения жидкостью труб — ведь все читают с разной скоростью.

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

9. Сайт Жана Хальфстейна

Жан Хальфстейн — веб-дизайнер. В его портфолио авторов статьи больше всего привлекла главная страница — и анимация на ней. «Я действительно неплохо провёл время, пока возился с различными эффектами. Я очень люблю использовать новые технологии, так что решил сделать основную страницу своего сайта своеобразной песочницей — там я развлекаюсь с Three.js и элементом canvas HTML5», — рассказывает Хальфстейн.

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

10. Портфолио Ника Джонса

По словам Джонса, когда он разрабатывал сайт, у него было больше опыта в работе с Flash, чем с JavaScript, но ему захотелось попробовать что-нибудь новое — чтобы понять, на что он способен. «Я сразу понял, что синтаксис JavaScript почти такой же, как синтаксис ActionScript — поэтому очень скоро полностью освоился», — описывает процесс написания кода Джонс.

Джонс вспоминает, что Flash не давал ему доступа к работе с движениями мыши — это был новый опыт, который ему очень понравился. Разработчик хотел добиться такой отзывчивости сайта, которой он не мог достичь, используя переходы между классами в CSS. Джонс доволен достигнутым результатом:

Если вы собираетесь перейти с ActionScript на JavaScript, не медлите ни секунды. Делая свой сайт, я хотел понять, способен ли JavaScript на то, на что способен Flash. И я очень впечатлён.

11. MapsTD

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

Создатель проекта Дункан Барклай объясняет, как это работает: «Мы использовали API Google Maps, MooTools и JavaScript. Самая сложная часть — поиск маршрута, которым будут следовать враги пользователя. Как только игрок выбрал начальную точку, сервис осуществляет поиск долготы и широты, и вычисляет возможные пути c помощью Google».

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

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

12. Glimpse Catalogs

Ресурс Glimpse разработан совместно командой Windows IE и проектом TheFind, и соединяет в себе систему поиска TheFind и приложение тех же разработчиков для онлайн-шопинга на Facebook. В рамках Glimpse программисты выпустили собственный фреймворк, основанный на Turn.js.

Целью команды с самого начала было сделать из Glimpse веб-приложение, а не обычный сайт. Разработчики использовали парадигму «модель-представление-поведение», которая разделяет на три отдельных компонента модель данных, пользовательский интерфейс и взаимодействие с клиентом. Сервис применяет шаблоны рендеринга моделей на стороне клиента Thrift или JSON — в зависимости от вычислительной мощности клиента.

Библиотека Turn.js также использовалась при разработке каталогов. С помощью CSS и JavaScript моделям, представленным на сайте, придаётся объём — за счет наложения теней на изображение.

13. Red Bull Music Academy Radio

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

Кроме того, при реализации сервиса применена библиотека Backbone.js — с помощью неё подгружаются плитки для создания эффекта бесконечной страницы.

14. Nouvelle Vague

Nouvelle Vague — сайт от французского дизайнерского агентства Ultranoir. Сервис позволяет «отслеживать» твиты по заданному хештегу. Он реализован с помощью JavaScript, WebGL и HTML5. HTML5, правда, отвечает только за тизер при открытии ресурса.

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

Основная цель проекта заключалась в том, чтобы при помощи 3D-изображений воссоздать атмосферу из видеозаставки. Команда погрузилась в новые технологии HTML5, CSS3 и JavaScript, и считает, что эти языки могут стать стандартами для работы с 3D в будущем — из-за качественного рендеринга, богатых возможностей взаимодействия и реагирования.

15. The Convergence

The Convergence — браузерная игра, своей ретро-графикой напоминающая Super Mario Bros. Она демонстрирует потрясающие возможности JavaScript и HTML5 и доказывает, что HTML5 справляется со своими задачами ничуть не хуже, чем Flash.

Разработчики обещают в будущем добавить в игру аудиосопровождение и новые уровни, а также поддержку Mozilla Gamepad API.

16. Kindle Cloud Reader

Это веб-приложение превращает слова «купите один раз, читайте на всех устройствах» в реальность. Оно использует технологии HTML5, JavaScript API, библиотеки jQuery и jQuery UI и несколько плагинов jQuery, в том числе jScrollPane для прокрутки страниц и jQuery Templates. Кроме того, команда разработчиков воспользовалась WebSQL для поддержки офлайн-режима.

17. Les Enfants Terrible

Сайт, запущенный студией WeFail, считают авторы заметки, выглядит страшновато, но всё равно очень круто. Ресурс выполнен в довольно резком стиле. JavaScript используется для анимации при взаимодействии пользователя и системы. Чтобы прокручивание осуществлялось только для отдельных элементов интерфейса, командой был применён плагин jQuery ScrollTo. Для появления видео не во всплывающих окнах, а прямо на сайте использовалась библиотека Shadowbox.js.

Кроме того, в коде Les Enfants применяется плагин jQuery Cycle — он отвечает за отображение картинок и примеров работ агентства.

«Мы запустили Les Enfants, чтобы понять, какие возможности по производительности имеются у JavaScript. Оказалось, что в сочетании с СSS Transform можно добиться отличных результатов», — говорит разработчик Мартин Хью.


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

18. Pinterest

Pinterest — яркий пример использования JavaScript для создания эффекта бесконечной страницы. Для создания сайта понадобились инструменты jQuery, jQuery UI и плагин PageLess.

Как считают авторы заметки, PageLess жизненно важен для Pinterest, потому что бесконечная прокрутка и прогрузка новых пинов гораздо эффективнее помогает удерживать внимание пользователя, чем социальные функции — например, комментирование записей.

19. Love Bomb Builder

Love Bobm Builder помогает пользователям выразить свою любовь или благодарность кому-либо. Это аккуратный и простой сайт, который позволяет создать и отправить послание-бомбу.

Ресурс иcпользует инструмент Modernizr для своевременного обновления кода на JavaScript и HTML5.

20. Michelberger Booze

Когда пользователь попадает на сайт, первым делом он видит так называемый «прелоадер» — может показаться, что он выполнен при помощи Flash, но это не так. За наполнение стакана пивом по мере загрузки отвечает HTML5 и JavaScript.

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

Нажимая на маски животных, клиент отправляется к другим сценам — все анимационные эффекты в которых исполнены при помощи jQuery.animate().

21. Trello

Trello — приложение для совместного или индивидуального планирования, в котором пользователи могут создавать списки выполненных и невыполненных задач и делиться прогрессом в режиме реального времени. Сайт разработан с использованием Node.js, MongoDB и Backbone.js.

Один из создателей Trello Даниэль ле Черминан поясняет, что применение только одного языка при написании сайта помогает новым членам команды быстрее влиться в процесс разработки.

Общение между пользователями реализовано с помощью Web Sockets — ле Черминан отмечает, что это достаточно новая технология, поэтому при её настройке возникали некоторые сложности.

22. BrowserQuest

Это игра в ретро-стиле, созданная студией Little Workshop, призвана продемонстрировать возможности HTML5, JavaScript и, в особенности, Web Sockets. Он может одновременно поддерживать взаимодействие между тысячами пользователей.

«Создание многопользовательской игры — отличный способ продемонстрировать, как такие технологии могут работать вместе. BrowserQuest опирается на серверы Node.js, каждый из которых может запустить несколько экземпляров игрового мира», — рассказывает разработчик студии Гийом Лекольне.

23. JS1k

JS1k — ежегодный конкурс, задача участников которого создать страницу на JavaScript на заданную тему (чаще всего — анимированные изображения). Её вес не должен превышать 1 КБ.

Тема этого года — «Here be dragons».

Работа-победитель конкурса в 2012 году. Автор — Филипп Бучанан, тема — «Любовь»

Работа победителя 2012 года изначально весила 8 КБ — но за день Филипп смог сократить её размер до требуемого 1 КБ, оптимизировав алгоритм генерации дерева:

Моей тактикой был «честный обман» компилятора. Например, использование конструкции «a ? b : c» вместо «if (a) b else c» экономит 8 байтов.

24. Timeline

Сервис помогает пользователям создавать таймлайны, и он очень прост в использовании. В интерактивную шкалу можно включать твиты, видео, фотографии и аудиозаписи. Свой таймлайн можно описать с помощью JSON или Google Docs — как удобнее самому клиенту.

25. Draw a Stickman

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

Мастер Йода рекомендует:  По слухам, Microsoft разрабатывает новый фирменный браузер на движке Chromium

Для создания игры использовались jQuery и библиотека для работы с векторной графикой Raphal.js. Реализация проекта с помощью Raphal помогла разработчикам избежать проблем с производительностью на большинстве устройств и во всех браузерах.

26. Panera Bread

Рекламный сайт сети пекарен Panera Bread был создан агентством Luxurios Animals. Технический директор студии Дэн Федермен говорит, что разработчики с самого начала решили реализовывать проект на CSS3 там, где это возможно, а для всего остального использовать JavaScript.

Анимация с помощью CSS3 обеспечивает плавность переходов на всех типах устройств. Кроме того, команда воспользовалась библиотекой Hammer.js для обработки прикосновений, Backbone.js для создания моделей данных, плагинами jQuery Transit и Isotope и HTML.

27. Peanut Gallery

Peanut Gallery — проект, реализованный Google Creative Lab. Сайт позволяет пользователям добавлять озвучку в «немые» короткометражки с при помощи микрофона. Ресурс использует Google Speech API и JavaScript API — они помогают интегрировать распознавание речи в веб-приложения.

Валден Кламп, один из разработчиков проекта, выделяет на его взгляд интересную особенность Google Speech API — динамического распознавание речи. Например, если англоязычный пользователь начинает произносить «European Union», то сначала распознаётся слово «your» или «year» и лишь под конец оно преобразовывается в «European». Ещё одна полезная возможность — распознавание знаков препинания. Словосочетания «вопросительный знак», «восклицательный знак» и другие автоматически превращаются в соответствующие им пунктуационные знаки.

28. The Interactive Ear

«Интерактивное ухо» создано агентством Epiphany Solutions для своего клиента Amphilon, который специализируется на слуховых аппаратах и других решениях для слабослышащих людей. Ресурс ориентирован на детей возраста младшей и средней школы. Сайт состоит из трёх «витрин», демонстрирующих, как устроено человеческое ухо.

Создатель проекта Брайан Джеймс отмечает, что благодаря использованию JavaScript, HTML5 и CSS команда смогла достичь максимальной производительности даже в устаревших и неподдерживаемых браузерах. Анимации при исследовании уха с помощью лупы — это GIF-изображения.


29. Violin

Violin — инструмент для визуализации кода на JavaScript. Он показывает, как части приложения взаимодействуют друг с другом в режиме реального времени. Сам сайт выполнен на JavaScript с использованием библиотеки D3.js для построения графиков.

30. Сайт Филиппы Грегори

Сайт британской писательницы Филиппы Грегори, автора романа «Ещё одна из рода Болейн», выполнен по её заказу агентством Better. Основной задачей разработчиков являлась оптимизация площадки для всех видов устройств. Ресурс построен на базе FuelPHP CMS. JavaScript отвечает за пользовательский интерфейс, интерактивность и плавность переходов на сайте.

Как выглядит современный веб без JavaScript

Берлинский разработчик решила провести интересный эксперимент: она целый день сёрфила веб без JavaScript.

Давайте попробуем сделать то же самое, ведь это особенно интересно в эпоху, когда средняя веб-страница весит столько же, сколько полноценная игра Doom 1993 года.

Общие наблюдения

  • Веб реально быстро работает без JavaScript.
  • Нет никакой рекламы. Ни назойливых автопроигрывающихся видео, ни всплывашек, запрашивающих ваш e-mail.
  • Но… множество сайтов не работают. Совсем.

Как выглядят популярные сайты без JavaScript

Несколько популярных сайтов вполне справились с испытанием, хоть и не все.

Google Maps

Карты не справились, но сайт, по крайней мере, в курсе, что JavaScript отключен: мы видим просьбу включить JavaScript обратно, чтобы пользоваться Google Maps.

YouTube

На популярном видеохостинге не загружаются обложки видео.

Netflix

Загрузился только логотип. Больше ничего.

Amazon

А вот тут всё вполне неплохо, хотя и выглядит немного непривычно.

Wikipedia

Браво! Всё работает!

Feedly

Просто белая страница. Больше ничего.

Twitter

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

Google Chrome

Страница загрузки Google Chrome — просто пустая белая страница.

24 ways

The New York Times

Иконки вместо картинок, но всё ещё можно читать текст.

BBC News

Поиск Google

Нет автозаполнения, макет снова возвращается к началу 2000-х, и поиск изображений ужасно плохо выглядит. Но Поиск Google выполняет свою главную задачу — ищет.

Баннерообменная сеть и участие в ней


1. Введение

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

В данном мастер-классе внимание будет сосредоточено исключительно на баннерной рекламе.

Нельзя сказать, что она является самым эффективным инструментом привлечения на сайт целевой аудитории. Однако недооценивать ее также не стоит, поскольку вкупе с мероприятиями по оптимизации сайта она может дать существенный положительный результат.

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

2. Что такое баннер?

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

Дизайнеры, разрабатывающие баннеры, чаще всего создают их в формате JPEG. Графический файл, созданный в подобном формате, позволяет не перегружать страницу сайта, в результате чего она будет загружаться быстрее, даже если вы работаете в режиме dial-up. Кроме того, потеря информации, которая происходит при JPEG – сжатии, практически незаметна для человеческого глаза, следовательно, качество баннера существенно не ухудшается.

Те же, кто считает, что снижение качества все-таки происходит при JPEG – сжатии, пользуются форматом GIF. Однако следует заметить, что баннеры, выполненные в этом формате, весят больше.

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

Несомненно, анимированные баннеры на Flash выигрывают у статичных баннеров в формате GIF и JPEG. “Живая” картинка является более притягательной. А это является определяющим в привлечении пользователей на сайт, несмотря на то, что графический файл в конечном итоге будет весить больше. Вместе с тем отметим, что интернет-технологии не стоят на месте: ADSL – соединение, а также различные выделенные каналы связи постепенно входят в нашу жизнь. В связи с этим не приходится особо беспокоиться о превышении веса баннера на несколько килобайт, поскольку скорость загрузки останется высокой при таких видах соединения.

Что касается размеров, баннеры обычно создаются в следующих соотношениях: 88 x 31, 100 x 100, 120 x 60, 468 x 60 (pix).

А теперь самое важное. Для того, чтобы определить эффективность работы баннера, нужно оценить такой показатель, как CTR (click/through ratio). С математической точки зрения он представляет собой отношение кликов по баннеру и число показов баннера на той или иной странице. В среднем число переходящих по баннеру пользователей равно 4-5, это, значит, что при 100 показах баннера на страничке сайта, на него кликнуло около 4-5 человек. Итак, что такое баннер, мы, по большому счету, разобрались. Теперь нужно изучить приципы дейстия баннерных сетей.

3. Баннерообменные сети

Участие в баннерообменной сети

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

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

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

  • ограничения в весе (наиболее часто встречающийся вариант – до 15кб);
  • ограничение в размере (самые популярные баннеры размером 468×60);
  • запрет на размещение баннеров в невидимых фреймах;
  • запрет на размещение баннера, ведущего на сайт, противоречащий законодательству РФ и нормам морали;
  • запрет на размещение баннера в области странице, где он не будет виден пользователю (часто баннер устанавливают в верхней части странички);
  • запрет на размещение баннера на автоматически обновляемых страничках;
  • запрет на использование программ, искусственно увеличивающих число показов баннеров на сайте (используя прокси-сервера, анонимайзеры, программы-автокликеры и др.);
  • запрет на размещение мерцающих баннеров, действующих на зрение и психику человека и мешающих нормальному ходу работы пользователя на сайте.

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

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

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

  • url сайта;
  • название сайта;
  • тематика сайта;
  • краткое описание сайта;
  • контактный e-mail;
  • личные пароли частника обмена.

В-третьих, заполнив анкету, нужно добавить свой баннер в систему непосредственно. Этот шаг вы уже делаете, когда входите в свой собственный аккаунт с зарегистрированным паролем и логином. Процедура эта очень простая и реализуется обычной загрузкой баннера с жесткого диска вашего компьютера в Интернет (баннерообменную сеть). Если у вас появляются проблемы с загрузкой, то напишите администратору сети. Он в большинстве случаев оставляет контакты и список тех файлов, которые ему необходимо выслать в случае неудачной загрузки. Обычно данная проблема характеризует баннеры, созданные на FLASH.

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

Принципы функционирования баннерообменных сетей

Итак, мы полностью зарегистрировались, добавили свой баннер в баннерообменную сеть, поместили специальный код на странице сайта. Что же происходит дальше?

Если вы еще не слышали о таком термине, как “таргетинг”, то пришло время услышать.

Таргетинг — это механизм, позволяющий выделить из всей имеющейся аудитории только ту часть, которая удовлетворяет заданным критериям (целевую аудиторию), и показать рекламу именно ей.

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

Вы самостоятельно выберете:

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

Отнеситесь серьезно к этому пункту. От грамотного выбора площадки для показа и времени показа вашего баннера зависит приток целевых пользователей на ваш сайт.

Каков же механизм действия баннерообменной сети?

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


Вы, наверно, обращали внимание на такое словосочетание как комиссия обмена.

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

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

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

Я отключил JavaScript на неделю, и это было славно

Журналист издания Wired решил выяснить, как изменится его жизнь в интернете без JavaScript. Он отключил эту функцию в браузере на неделю, а по окончании эксперимента возвращаться к нормальному интернету уже не хотел.

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

JavaScript — это язык программирования, который может быть запущен практически во всех современных браузерах. Сначала этот язык использовался для создания простых скриптов, которые выполняли разные полезные функции. Например, проверяли, заполнены ли все поля формы перед нажатием кнопки регистрации. Но по мере того, как интернет стал быстрее, а браузеры — сложнее, JavaScript постепенно превратился в инструмент для создания всех видов веб-приложений. Некоторые из них, например, Google Docs, по размеру и функциональности конкурируют даже с настольными приложениями. Но проблема в том, что при открытии страницы сайта все JavaScript-программы, вложенные в эту страницу, запускаются автоматически. Иногда эти скрипты могут быть зловредными и подвергать компьютер опасности.

Эдвард Сноуден: адблокеры обязательны для всех JavaScript несет ответственность и за большинство несанкционированной рекламы и других неприятных вещей, которые можно встретить на сайтах. В последнее время многие стали устанавливать программы блокировки рекламы — кто-то из соображений безопасности, кто-то просто потому, что надоели мельтешащие баннеры. А на прошлой неделе портал Intercept приводил слова Эдварда Сноудена, который считает, что пользователи не только имеют право, но и обязаны отключать рекламу на сайтах, поскольку разработчики страниц пока не гарантируют защиты ни от незаконной рекламы, ни от так называемых zombie cookies.

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

Это просто работает

Как и ожидалось, поначалу я столкнулся с рядом проблем. Перестал работать Netflix. Как и YouTube, только если не включить Adobe Flash, что лишает смысла отключение JavaScript. И конечно, без JavaScript можно забыть об использовании Google Docs. Facebook порекомендовал мне перейти на мобильную версию сайта с моего ноутбука, но когда я попытался открыть его через телефон, то увидел пустую страницу. Twitter продолжал работать, но пропал счетчик символов, без которых трудно понять, сколько еще осталось до конца сообщения. Я мог открыть сайт Wired, но не мог просматривать или оставлять комментарии. А некоторые другие страницы просто не грузились.

Но самое удивительное, что все остальное работало. Во многих случаях даже лучше, чем раньше. Страницы грузились почти мгновенно, заряда аккумулятора ноутбука хватало надолго, а Сеть загружалась без лишних проблем. И не было того чувства вины, какое возникает, когда используешь ad blocker. В конце концов, мне просто не приходилось специально избегать опасные сайты, так как рекламные сети просто не воспринимали настроек моего браузера.

Конечно, отключив JavaScript, нельзя полностью защитить свой компьютер от отслеживания. Cookies — возможно, наибольшая угроза безопасности личных данных — по-прежнему работают. Открыв любой сайт, можно уже оставить там свои данные. А если этот сайт использует контент посторонних ресурсов, например, изображения или шрифты, то и посторонние ресурсы получают доступ к данным. А по словам главного инженера по безопасности Mozilla Дэниела Ведитца, основную угрозу безопасности в интернете представляет не JavaScript, а такие плагины, как Adobe Flash и Acrobat. Тем не менее, отключение JavaScript снижает уязвимость перед эксплойтами и не дает посторонним ресурсам напрямую выкачивать ваши данные.

Мастер Йода рекомендует:  Свыше 10 плагинов BuddyPress для расширения социального функционала вашего сайта

В том случае, когда мне позарез нужно было попасть на сайт, полностью построенный на JavaScript, я просто открывал его в другом браузере. Кроме того, такие браузеры как Google Chrome и плагины NoScript, позволяют выборочно открывать JavaScript на страницах из белого списка. Но, как считают борцы за свободу интернета, мне не следует открывать неизвестные JavaScript. Впрочем, у этих борцов свой взгляд на его использование.

Свободу интернету

Организация «Фонд свободного программного обеспечения» выступает против полного отказа от JavaScript, но стремится добиться большей прозрачности и контроля над кодом на компьютерах пользователей. Организация, основанная создателем свободной операционной системы GNU Ричардом Столлманом, больше десятка лет апеллирует к разработчикам ПО, призывая их публиковать исходные коды приложений, чтобы пользователи могли не только проверять их, но и при необходимости вносить свои правки. По мнению Столлмана и его единомышленников, пользователь имеет право понимать и контролировать код, запущенный на компьютере.

Изменилось ли поведение людей в интернете после разоблачений Сноудена? Естественно, что фонд выступил против использования лицензионной платформы Adobe Flash, которая добавляет сайту анимации и интерактивности. А после того, как Flash был дискредитирован, активисты взялись за JavaScript. В 2013 году они запустили кампанию за свободный JavaScript, в рамках которой добиваются того, чтобы все разработчики использовали только бесплатный JavaScript с открытым исходным кодом или делали сайты вообще без него. А чтобы пользователи могли отказаться от использования лицензионной версии JavaScript, Фонд свободного ПО разработал LibreJS — плагин для браузера Firefox, который блокирует не все, но большинство модулей, написанных на JavaScript. Не менее важно и то, что Фонд активно работает с разработчиками сайтов, например, с Reddit и Greenpeace, помогая им снизить зависимость от лицензионного JavaScript.

На сегодня одной из крупнейших побед группы стала история с сайтом Crowd Supply, который представляет из себя гибрид Etsy и Kickstarter, то есть помогает разным умельцам и мастерам хендмейда собрать деньги на свое творчество.

Как рассказывает сооснователь сервиса Crowd Supply Джошуа Лифтон, он и раньше думал над проблемой лицензионного JavaScript, но после письма Ричарда Столлмана он окончательно решил присоединиться к кампании за свободный JavaScript. Теперь самые продаваемые товары на Crowd Supply — это ноутбуки с открытым исходным кодом Novena и Purism. А большинство пользователей, разумеется, просматривают этот сайт с выключенным JavaScript.

«В ходе этой кампании мы почти каждый день получали письма поддержки от пользователей и разработчиков. Но мы понимаем, что на каждого сторонника приходится сотня наших противников», — рассказывает Джошуа Лифтон. Кто-то присоединялся из идеологических соображений. Другие даже не догадывались, что JavaScript — причина их проблем. В любом случае, стало понятно, что это — реальная проблема. В конце концов компания Crowd Supply почти полностью отказалась от лицензионного JavaScript. Они еще применяют инструмент Google Analytics, но пользователи, делающие покупки на Crowd Supply могут уже полностью обходиться без JavaScript-приложений. В результате, говорит Джошуа Лифтон, сайт стал работать быстрее, что положительно отражается на продажах: «Конечно, в этом можно усмотреть идеологическую составляющую, но бизнес от этого явно выигрывает».

Что до меня, то по прошествии недели я с неохотой вновь включил JavaScript. Решающим аргументом для меня явилось то, что без JavaScript я не мог пользоваться некоторыми моими любимыми расширениями для Google Chrome. Кроме того, как и все пользователи, я люблю смотреть потоковое видео и пользоваться интерактивной графикой. Но после эксперимента я понял, что мне нравится ощущение контроля над работой моего браузера. И еще я понял, что в Сети много мусора, который можно легко отключить.

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

info-форум поддержки сервиса https://runbler.com/

Меню навигации

Пользовательские ссылки

Информация о пользователе

Вы здесь » info-форум поддержки сервиса https://runbler.com/ » Разные скрипты » Маленькая баннерная сеть каждому

Маленькая баннерная сеть каждому

Сообщений 1 страница 2 из 2

Поделиться12008-06-04 19:25:21

  • Автор: runbler
  • Администратор
  • Зарегистрирован: 2008-05-15
  • Приглашений: 0
  • Сообщений: 154
  • Уважение: [+3/-5]

  • Позитив: [+0/-0]
  • ЗАРОБОТОК ДЛЯ ВСЕХ:
  • РЕКОМЕНДОВАНО:
  • Провел на форуме:
    20 часов 12 минут
  • Последний визит:
    2009-07-06 20:42:59

Представим такую ситуацию, что вы обменялись кнопками с 15 сайтами и всё пространство дизайна сайта заполнено. Что делать . Встаёт вопрос об изготовлении собственной маленькой баннерной сети. Но если вы не программист и не пишете скрипты сами, то нужно взять скрипт из каких-нибудь архивов скриптов. Не нужно этого делать, всё сейчас будет рассказано в этой статье.

Все баннерооменные сети используют CGI скрипты, но мы можем обойтись обычным Java скриптом. Приведём его :

Так как мы приводим этот скрипт не только для профессионалов, но и для новичков, мы не будем разбирать все переменные скрипта. Следует разобрать только одну переменную » J «. Она должна соответствовать количеству показываемых баннеров. У нас это » 3 «. А если у вас много страниц на сайте, следует заключить этот скрипт в отдельную страницу и включить его на все остальные методом SSI.

Поделиться22008-06-04 19:25:42

  • Автор: runbler
  • Администратор
  • Зарегистрирован: 2008-05-15
  • Приглашений: 0
  • Сообщений: 154
  • Уважение: [+3/-5]
  • Позитив: [+0/-0]
  • ЗАРОБОТОК ДЛЯ ВСЕХ:
  • РЕКОМЕНДОВАНО:
  • Провел на форуме:
    20 часов 12 минут
  • Последний визит:
    2009-07-06 20:42:59

SSI
При создании сайта многие Вебмастера испытывают сложности с его оформлением, особенно это проявляется в первые этапы разработки. Приходится всё время что-то менять, исправлять и убирать. С одной страницей это легко, но , что делать когда у Вас более 10 страниц. Возьмём к примеру такую ситуацию. У Вас 100 страниц сайта и Вам вдруг неожиданно потребовалось в верхней части каждой страницы поместить какой-то элемент (баннер, ссылка и т.д.) Исправлять 100 страниц очень и очень туго, да и стоит ли. Даже при помощи всяких программ-заменителей это не просто сделать, особенно когда менять не одну строчку, а несколько. Как решить эту проблему?

Решается эта проблема при помощи SSI (Server Side Include). С помощью этой технологии можно собирать страницы по кускам на лету. Технология очень проста — при запросе клиента сервер проверяет документ на наличие специальных команд и выполняет их, если находит. Вот пример, нам надо собрать страницу из двух частей (logo.html и inform1.html). Первая часть сверху — общая часть (логотип, меню и т.д.), вторая часть — сама информационная страничка. Тогда на информационной страничке мы ставим следующую строчку-команду SSI:

— путь к файлу logo.html указывается от текущего файла inform1.html.

Предполагаем, что файл logo.html лежит на сайте в каталоге SSI. Таким образом при запросе на такой файл, сервер выполнит команду INCLUDE и вместо этой команды выдаст содержимое файла logo.html. Для всех предполагаемых страниц сайта можно написать эту команду, тогда при загрузке они будут показывать верхнюю общую часть и своё соджержание, естественно. Что это даёт? Теперь достаточно изменять файл logo.html, чтобы изменились все 100 страниц сайта. Причём, меняются не сами страницы, а только этот один файл. Остальные же просто при загрузке выводят его содержимое, которое легко менять. Так к примеру можно оформлять в едином стиле весь свой сайт, можно легко менять его дизайн и вид, задавая параметры в общем файле logo.html.

При использовании технологии SSI важно учитывать тот факт, что сервер должен поддерживать для проверки на команды SSI данные расширения файлов. Перед отправкой обычных документов сервер не проверяет их на команды SSI и поэтому работает быстрее, а если он каждый раз проверяет все файлы сайта на SSI, работы сервера замедляется. Чтобы этого избежать многие серверы обрабатывают на SSI только файлы определённого типа (Например *.shtm *.shtml и т.д.) Остальные же файлы не просматриваются на такие команды, а отправляются клиенту сразу. Поэтому не удивляйтесь, если Ваши команды SSI не сработали, вероятно сервер просто не настроен их проверять. В итоге Вы не увидите ничего, хотя сервер выдаст команду клиенту, браузер никак на неё не отреагирует (для него это обычная ремарка). Важно знать какие типы файлов сервер проверяет на команды SSI. Например, сервер https://webservis.ru проверяет и файлы *.html Это конечно хорошо и удобно для самих вебмастеров, но нагрузка на сервер выше.

При создании общего стиля использование SSI просто необходимо, так как нужно использовать общую шапку. Многие сайты используют общие и шапку и низ документа. Это позволяет делать практически идентичные по дизайну страницы. Менять общий стиль очень легко. Когда создаёте сайт с большим количеством страниц, всегда используйте SSI.

Маленькая баннерная сеть каждому Javascript

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

Виды баннерных сетей

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

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

Наиболее популярными форматами являются:

  • 468х60 — наиболее распространённый формат. Часто называют «классическим».
  • 234х60 — «два в одном». Позволяет на одном «показе» баннера 468х60 заработать два показа. Широкого распространения не получил.
  • 100х100 (реже 125х125, 120х120) — второй по популярности формат в Рунете.
  • 120х60 — весьма популярный графический формат.
  • «Тизер» — графический баннер небольшого размера и текст отписания.
  • «Ушки» — однотипные баннеры, чаще всего размещаемые вверху страницы. Практически всегда размещаются группой из 3-4 баннеров горизонтально или вертикально.
  • 468х15 — «текстовый» формат. На самом деле это графический файл, но строгие требования к оформлению создают иллюзию текстовый гиперссылки.
  • «текстовый блок» — размещение текстового блока (или блоков) вместо графического файла. «Вес» значительно меньше чем у графики, но из-за различия в кодировках может отображаться некорректно. В Рунете в последнее время набирает популярность такого рода контекстная реклама от компаний Google, Yandex и Бегун.
  • «Кнопки» — чаще всего имеют формат 88х31. Широко используются при обмене ссылками. В баннерных сетях используются редко.
  • «Шапки» (Topline) — баннеры больших размеров (чаще всего 600х90 и 720х90). Сложно встраиваются в дизайнсайта. Популярности среди веб-мастеров не получили.
  • «Колонны» — вертикально ориентированные баннеры. Например, 120х360 или 120х600.
  • «Pop-up», «попки» — всплывающие (или выскакивающие) окна. Автоматически открывающиеся окна браузера при загрузке страницы или уходе с неё. Наиболее вызывающий раздражение из всех видов баннеров. Чаще всего используется на порно-сайтах и бесплатных хостингах. В большинстве браузеров есть средства для блокировки автоматически открывающихся окон.
  • «Плавающие баннеры» — использующие Javascript или другие средства. Появляются поверх страницы сайта, чаще в верхнем правом углу. Закрывают текст или графику страницы, могут некорректно отбражаться в некоторых браузерах, а также дублироваться при использовании фреймовой структуры. Чаще всего применяются на бесплатных хостингах в качестве платы за услуги.

Графические баннеры являются файлами форматов JPEG, GIF, реже PNG. Весьма часто применяется технология Macromedia Flash.

Ограничения баннерных сетей

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

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

Также существуют требования к «весу» баннера, соответствие изображения и тематики сайта, а также к оформлению.

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

Комиссия

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

Комиссия на показы

За показ чужих баннеров на своём сайте участник сети получает определённый процент показов собственного баннера на сайтах других участников проекта за вычетом процента комиссии. Комиссия составляет от 5 до 50 процентов, чаще 10-15. В одной и той же сети в зависимости от статуса участника, расположения баннера на страницах, количества показов и качества его сайта комиссия может быть разной.

Комиссия при переводе

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

Распоряжение баннерными показами

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

  • Истратить на показ своего баннера на сайтах других участников сети.
  • Перевести определённое количество показов на аккаунт другого участника сети.
  • Продать баннерные показы баннерной сети по её расценкам, если та производит их выкуп.
  • Продать баннерные показы на бирже, предложив свою цену.

Некоторые баннерные сети прямо и косвенно запрещают продажу баннерных показов.

Таргетинг

Участник может установить таргетинг (англ. target — цель). Таким образом, он может запретить показ на своём сайте баннеров конкурента, баннеров определённой тематики. В свою очередь, баннеры участника могут показываться только (или за исключением) посетителям определённого региона, в указанное время, на сайтах определённой категории. Возможности таргетинга зависят от политики баннерной сети.

Перспективность использования баннеров

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

С 2003—2004 гг. широкую популярность приобрёл способ размещения рекламных баннеров «на время». Однако, это происходит вне участия в баннерных сетях.

CTR баннера

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

Маленькая баннерная сеть каждому Javascript

1. Зачем rnd_num? Ломал голову не один час. Зачем им случайное число? Заметил что в результате выполнения кода на комп сбрасывается кука с этим числом. Но зачем? Таким образом они что-то кешируют или это использоуется для других целей?

2. Почему код сети ввыводится JS. Почему сразу не поставить Iframe

3. Зачем выводить Iframe а в него вставлять еще и img, ведь в Iframe указывается src, баннер можно подгрузить сразу в Iframe. Т.е. по сути написать:

Помогите, кто сталкивался с подобными задачами.
Спасибо за ответы.

1. Для инициализации данного показа.
2. Как iframe будет собирать статистику? (поисковики здесь не причем. Код обычно состоит из двух частей. script и noscript.
3. На случай, если в браузере отключен тег iframe и только для этого.

Добавить комментарий