Рассылка www.vns.ru
№2 6 февраля 2002 г.
Веб-дизайн от А до Я
в выпуске:
для чего нужна статистика
баннеры
нарезка изображений
интересные ресурсы
 
для дизайнера:
CorelDRAW
Macromedia Flash
MS Front Page
Dreamweaver
Чат-форум
Статьи
Шрифты
Программы


Здравствуйте!

Обновление на сервере: в раздел "шрифты" было добавлено 765 шрифтов для веб-дизайна ...hot!

Мы будем благодарны всем советам, пожеланиям, замечаниям какие можно нам высказать по этому адресу.
Архив рассылок вы можете посмотреть здесь.
Супер преложение для авторов статей! Вы хотите чтобы ваши статьи были опубликованы в этой рассылке?
В качестве гонорара Вы получите показы сети RLE (от 1000 до 10000) + N-кол-во читателей, которые посетят Ваш сайт. + для постоянных авторов бесплатный почтовый адрес имя@vns.ru !!! Присылайте свои статьи на адрес info@vns.ru. Буду рад сотрудничеству.

Для чего нужна статистика


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

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

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

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

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

Не пренебрегайте такой важной вещью, как статистика.

Источник: http://www.dizainer.newmail.ru/


[ к содержанию ]

Баннеры, как достичь высокого CTR, баннерные стандарты


Реклама в сети имеет двухступенчатый характер. Для того, чтобы пользователи узнали о сайте (компании, товарах, услугах) рекламодателя, последний размещает на популярных и тематических сайтах или в рассылках свое рекламное обращение. Реализуется рекламное обращение по-разному. Здесь можно выделить:
- баннеры;
- rich-media баннеры (Flash, Java, Html, Cgi);
- текстовые блоки;
- байрики;
- рекламные вставки (interstitials);
- мини-сайты и коллажи.


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

Баннеры

Баннер представляет собой прямоугольное графическое изображение в формате GIF или JPG. Оба формата позволяют минимизировать размер файла (что очень важно для баннеров), однако гораздо чаще используется именно GIF. Это графический формат несколько хуже, чем JPG передает фотореалистичные изображения, но гораздо лучше отображает графику и текст. Кроме того, GIF - позволяет применять анимацию, что делает баннер более эффектным, привлекающим внимание и информативным.
Рис 2-1

Баннер, рекламирующий сервер Download.Ru (каталог бесплатных программ и утилит)






Баннер помещается на странице веб-издателя и имеет гиперссылку на сервер рекламодателя. Одной из самых важных характеристик баннера является отношение числа кликов на баннер к числу его показов. Так, если баннер был показан на какой-либо странице 1000 раз, а нажали на него и, соответственно, имели шанс попасть на сайт 50 человек, то отклик такого баннера равен 5%. По статистике средний отклик ("click/through ratio", CTR) у баннеров, используемых в WWW, - порядка 1%, и наблюдается тенденция к его постепенному снижению. Разумеется, если у Вашего баннера отношение числа кликов к числу показов не 1%, а 5%, то за то же число привлеченных на Ваш сайт посетителей Вы заплатите в пять раз меньше или во столько же раз меньше покажете чужие баннеры (в случае обмена).

Но CTR не является абсолютным гарантом эффективности баннера. Баннер может быть красивым и интригующим, заставляющим пользователя кликнуть на него. Но начав загрузку сайта и, приблизительно, поняв, куда он попал, пользователь может с легкостью нажать кнопку "back" на своем браузере.

Используя на баннере завлекающие, но мало относящиеся к делу текст и картинки, Вы, возможно, привлечете больше заинтригованных посетителей, но, с другой стороны, потеряете действительно заинтересованных в Вашем сервисе, а следовательно, по-настоящему ценных пользователей.
(Не стоит сбрасывать со счетов и роль баннера как средства имиджевой рекламы. Если отклик баннера 2%, это не означает что остальные 98% были потрачены впустую. Подробнее об этом Вы можете узнать в Главе 8). Однако, "сухой" баннер с четким текстовым изложением содержания сайта тоже не является верным решением - его CTR обычно крайне низок. Он не запоминается и не создает положительного имиджа. По-настоящему эффективный баннер должен быть хорошо выполнен художественно и технически (некачественный дизайн сразу говорит о несолидности рекламируемого сервера/услуг), а также быть оригинальным (запоминаться), возможно быть интригующим (пробуждать любопытство), но одновременно давать представление о характере рекламируемого сервера/услуг и создавать их положительный имидж.

Для рекламных носителей в Интернете, прекрасно работает формула AIDA (attention, interest, desire, action), известная в традиционной рекламе. Формула представляет собой последовательность задач, которые стоят перед рекламным обращением:
- attention - привлечение внимания к рекламному обращению. Если пользователь не обратит внимание на рекламу в течение хотя бы доли секунды, то, разумеется, ничего не случится, и толк от такой рекламы практически нулевой. За привлечение внимания отвечает как место размещения, так и само рекламное обращение - насколько оно заметно и контрастирует с окружением. Плюсом здесь, безусловно, является анимация;
- interest - вызов интереса к предмету рекламы. Задача - за ту долю секунды, в течение которой пользователь обратил свой взгляд на рекламу, задержать его внимание и заинтересовать. Особое значение имеет - исполнение и рекламный креатив, апелляция к аудитории;
- desire - стимуляция желания воспользоваться рекламируемым предложением;
- action - действие. В большинстве случаев щелчок мышкой и переход на сайт рекламодателя, все последующие действия (включая участие, покупку и т.д.).


Как увеличить отклик баннера

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

Волшебная фраза "Click Here"

Самый простой способ увеличить количество щелчков на баннер - попросить об этом пользователя. По статистике, баннеры, содержащие слова типа "click here", "жми сюда", "visit now", "enter", имеют отклик на 30% больше, чем без оных. - Также увеличивает отклик использование на баннерах элементов интерфейса. Таких, например, как кнопки, полосы прокрутки, check-боксы и др. Причем большинство подобных баннеров, встречающихся сейчас в Рунете - баннеры-"обманки" сделанные в GIF-формате, где ни один из элементов интерфейса не работает.

Рис 2-2
Ни один из размещенных на баннере элементов реально не работает, но при попытке взаимодействия с одним из элементов пользователь будет просто перенесен на сайт рекламодателя.


Щелкают на них в большей степени новички, те кто не может их распознать и, на самом деле, пытается не перейти на сайт рекламодателя, а взаимодействовать с элементами меню. Разумеется, взаимодействия не происходит, а пользователь переносится на сайт рекламодателя. Из-за такого "обмана", баннеры с элементами интерфейса запрещены в ряде российских баннерных сетей и сайтов. Хочется отметить, что Html-баннеры (о них речь пойдет чуть ниже), действительно могут содержать подобные элементы, причем реально работающие.

Баннеры, маскирующиеся под контент сайта

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



Ничто человеческое пользователю не чуждо

Сделайте баннер загадочным, пусть пользователь будет заинтригован:
- Что они этим хотели сказать?
- Куда ведет баннер?
Сексуально-эротические мотивы сильно увеличивают отклик баннера.
Но, как уже говорилось выше, большинству рекламодателей важны не столько количество посетителей, сколько их качество. Заинтригованный посетитель может с легкостью нажать кнопку "back" в своем браузере. Действительно заинтересованные в Вашем сервисе люди, могут не "купиться" на подобную рекламу.

Рис 2-3
Сейчас уже редкий, но до недвнего времени достаточно распространенный прием...

Продолжение следует...

Источник: Promo.ru


[ к содержанию ]
Нарезка изображений

Если вы создали большой и сложный рисунок для своей страницы, то имеет смысл его нарезать на несколько маленьких, которые затем поместить в таблицу с невидимыми разделителями (border=0). Зачем это надо? Во-первых, скорость загрузки такой страницы увеличится, за счет параллельной загрузки сразу нескольких файлов. Во-вторых, если правильно подойти к делу, то суммарный размер нарезанных картинок можно сделать меньшим, чем исходного файла. Допустим, на всей картинке у вас используется 256 цветов и вы записываете ее в соответствующий файл gif. Теперь если вы правильно порежете картинку, то обнаружите, что в отдельных областях достаточно 128 или 64 цветов (правильная нарезка как раз и состоит в выделении областей с небольшим количеством цветов). Убирая лишние цвета, вы уменьшите размер файла. Эта же техника позволит сделать как бы единую gif-картинку, содержащую больше 256 цветов - думаю понятно как.

Если кто не знает, поясняю - формат gif может показывать не больше 256 цветов, но эти цвета могут быть любыми из TrueColor (16 млн). Описания цветов, используемых на картинке, хранится в самом файле в проиндексированном виде, например так - цвет номер 0 имеет RGB составляющие 0,0,0 (черный), а номер 2 -255, 255, 255 (белый). Соответственно, чем больше цветов вы используете на картинке, тем больше размер файла. Если у вас на картинке используется только 16 цветов, а вы записали файл gif в 256-цветном режиме, то лишние цвета просто занимают место в таблице, увеличивая размер.

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

Теперь о самой нарезке - берем в правую руку скальпель, в левую - стакан со спиртом (ой, простите увлекся). Значит так - первый вариант - резать в Photoshop. Для этого надо расставить в изображении guides (ну не знаю как это будет по-русски - ну пусть направляющие) - это горизонтальные и вертикальные линии, не влияющие на само изображение. В первую очередь выберите режим показа guides - (View /Show guides или Ctrl+;) и показа линеек (View/Show Rulers или Ctrl+R). Теперь на линейке нажимаем на мышь и тянем ее с нажатой кнопкой на изображение - появляется синенькая линия - вот это guide и есть.
Guides Show
Теперь, если вы выберете инструмент перемещения, guides можно таскать туда-сюда или уничтожать (чтобы временно убрать показ guides, но не уничтожать их перейдите в режим Hide guides). Расставьте guides так, как вы собираетесь порезать картинку. Следующий момент - включаем режим "прилипания" инструментов к guides (View/Snap to Guides). Теперь все инструменты выделения будут липнуть к расставленным направляющим. Все что осталось сделать - выделить соответствующие области и скопировать их в отдельные файлы (или наоборот сделать так сказать crop) и записать их. При записи лучше пользоваться не самим Photoshop'ом, а какой-нибудь программой, позволяющей оптимизировать размер файла - например замечательной программой Smart Saver фирмы Ulead.

Для автоматической нарезки картинок существуют и специальные программы - Adobe ImageReady, Macromedia Fireworks и Image cutter (последняя freeware, остальные shareware). Я работал только с Image Ready, так что речь пойдет о ней. В общем все делается так же, как в Photoshop (они вообще очень похожи) - расставляете guides, а потом программа сама разрежет по ним картинку и даже создаст html-код для таблицы. Все быстро и здорово, но как всегда автоматика справляется с делом несколько хуже - Image Ready не позволяет оптимизировать размер таблицы цветов в каждом отдельном куске gif'a - дело в том, что таблица цветов строится одна для всего изображения еще до нарезки. Так что если вы хотите добиться супервысококачественных результатов используйте Photoshop+Smart Saver, а для быстрой работы - Image Ready. Предлагаю еще промежуточное решение - режете в Image Ready и задаете сохранить нарезанные куски ни в gif и ни в jpeg, а в TrueColor PNG-формате (новый такой очень многообещающий формат, в том числе поддерживает полупрозрачность (!)). Потом открываете PNG файлы и оптимизируете их до нужного количества цветов по отдельности.

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

Успехов в первом опыте хирургического вмешательства.

Источник: InfoCity


[ к содержанию ]
Интересные ресурсы


Zona5.al.RU - Всё о Macromedia Flash - уроки, исходники, статьи...
Andrey.nnov.Ru - Алгоритмы, статьи, книги, faq и многое другое.
Умник - Универсальный поиск
Портал для веб-мастера - скрипты, раскрутка, хостинг...


Сюда может попасть любой желающий. Послать заявку...
Авторам

Вы хотите, чтобы ваши статьи были опубликованы в этой рассылке? Если вы считаете, что можете написать о дизайне, скриптам, графике и т.п., если Вам есть что сказать и о чем рассказать, я буду рад сотрудничеству с Вами. Присылайте свои предложения и статьи.
Давайте вместе делать общее дело! Присылайте свои соображения, мысли, истории... поделитесь своим опытом.
В качестве гонорара Вы получите показы сети RLE (от 1000 до 10000) плюс N-кол-во читателей, которые посетят Ваш сайт.
Буду рад сотрудничеству.

http://www.vns.ru

ведущий рассылки: Павел