Отправляет email-рассылки с помощью сервиса Sendsay

Веб-дизайн. От А до Я.

  Все выпуски  

Веб-дизайн. От А до Я. # 18


Служба Рассылок Subscribe.Ru

Веб - Дизайн. От А до Я.
# 18
18 октября 2001г.
Проект сайта "AGS Design" http://dweb.ru
кол-во подписчиков - 8800

    В этом выпуске:

  Ссылки Вебмастеру:

* Web-дизайн, архив рассылок
* Анимация и графика
* Иконки и кнопки
* Фоновые изображения
* Flash
* Баннеры
* Все скрипты
* Фото
* 3D анимация

Доброе время суток!


Продолжение темы ссылок.


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

Автор статьи "Ссылки... обман?" пишет о "тенденции к "опорталиванию" интернета т.е. к созданию огромного числа сайтов не содержащих никакой полезной информации. Как то: каталоги, рейтинги, линк-листы, коллекции рефератов, анекдотов, картинок, открыток, сайты знакомств, сайты новостей и т.п." Подумайте САМИ, если бы новостные сайты или коллекции анекдотов не содержали полезной информации, вряд ли они имели бы такую высокую посещаемость. Например, новости - это, по-моему, как раз то, что интересует очень большой круг людей и представляет для них очень ценную информацию. Но не будем на этом останавливаться.

В статье в качестве примера взят сайт омен.ру, о котором говорится, что его "главная страница содержит исключительно ссылки. Их много. От них рябит в глазах. Тут тебе и поиски и подписки и чего только нет." Их много - значит и выбор большой, каждый выбирает лишь только то, что ему нужно. Автор также сетует, что "чтобы добраться до полезной информации нужно просмотреть минимум 2-2.5 страницы" Да, это так, но это называется структурированием информации, пусть и не очень совершенным. Конечно, можно вынести все ссылки из подразделов на главную страницу, но что вы тогда ожидаете там увидеть? Я предполагаю, что это будет огромная куча ссылок, непонятно к чему относящихся, но зато вы сократите(потенциально) доступ посетителя к нужной информации до 1 страницы. Почему потенциально? - Потому что вряд ли кто-то сможет там что-то отыскать... Вообще, процесс увеличения ссылок на главной странице обратно пропорционален числу ссылок в подразделах - либо их будет много на главной странице и будет "рябить в глазах", либо вы доберетесь до нужной информации где-то после 2 страницы. Поэтому надо искать золотую середину.

Все вышесказанное, по-моему, следует отнести к ресурсам, ДЕЙСТВИТЕЛЬНО имеющим большое количество информации, требующей продуманного размещения. Для сайтов же небольших размеров, действительно, вполне хватает 25-30 ссылок на главной и промежуточных страницах. В данном случае их увеличение будет уже неоправданным.

WM


Оглавление/Вверх


Заголовки новостей


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

Д. - Что такое "Заголовки новостей" Inethelp?
А. - Сервис "Заголовки новостей" представляет собой ежедневно обновляемую базу данных, которая содержит самые последние новости от ведущих информационных агенств и проектов Рунета. Мы не делаем ограничения на тематики новостей, как это делает например проект "Yandex новости" предоставляя только "стандартные" тематики новостей о "политике", "экономике", "бизнесу", "финансам" и т.п. и предоставляем самые различные новости от "экономики" до "компьютерных игр".

Д. - Какова цель создания вашего сервиса?
А. - Основная цель - предоставление сервиса обновляемых новостей на сайтах устанавливающих код системы. По нашему мнению постоянно обновляемые новости по тематике близкой сайту устанавливающему новости способно уже само по себе заинтересовать определенный круг посетителей. Это добавляет вашему сайту то что называется "контент" и то, что способно заставить посетителей возвращаться на ваш сайт снова и снова. Конечно создание сайта содержащего только наши "Заголовки новостей" не достаточно.

Д. - Есть ли у вашего проекта отличительные особенности?
А. - Безусловно. Мы предоставляем возможность размещения новостей по выбранным тематикам на вашем сайте. При этом новости не ограничены одним или двумя агенствами или проектами, а охватывают целый ряд агенств и проектов. На данный момент в системе принимают участие уже 9 информационных агенств и проектов. Среди них такие хорошо известные как AKM, Компьюлента, Компьютерра, Ibusiness, Нетоскоп и другие. Кроме того ведутся переговоры с рядом агенств и проектов об условиях участия в проекте.

Д. - Какие возможности предоставляет вебмастеру ваш сервис?
А. - Самые широкие. Система построена на основе шаблонов новостей. В каждом шаблоне вы можете выбрать тематики новостей которые должны появляться на сайте, количество заголовков, нужно ли отображать дату, время и краткий текст начала новости, период времени за который показывать новости и самое главное вы сможете ПОЛНОСТЬЮ на 100 процентов контролировать внешний вид заголовков на вашем сайте. Подробно о том как настроить и установить заголовки новостей на вашем сайте вы можете прочитать подробнее.

Д. - Участие в вашей системе бесплатно?
А. - Все наши сервисы абсолютно бесплатны. Мы не требуем взамен установки баннеров, ссылок и т.п. Но каждый кто захочет поддержать наш проект может установить у себя на сайте текстовую ссылку, нашу кнопку, сделать обзор или прорекламировать наши сервисы в своей рассылке и т.д.

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

P.S. Устанавливайте новости на вашем сайте, чтобы привлечь постоянных посетителей и улучшить содержание вашего сайта. Адрес проекта http://inethelp.ru/newsline/

Давыденко Дмитрий



Оглавление/Вверх


Каким должен быть дом для сайта?


Прежде всего, надежным. Если на сервере регулярно происходит "профилактика", "мелкий сбой" или "временные трудности", это уже не для Вас. Сайт должен быть доступен ВСЕГДА, а в случае плановых работ Вас должны заблаговременно об этом предупредить. Безгрешных нет, и у любого, даже самого надежного провайдера, временами возникают сбои в работе. Вопрос в том, насколько часто это происходит. Прежде, чем делать заказ на хостинг, проверьте сайт провайдера на доступность - зайдите на него несколько раз в разное время. Выполните команду ping, оцените время отклика. Воспользуйтесь службой http://tracert.com, проверьте доступность сайта из-за рубежа. Сравните с сайтами других провайдеров. Попросите тестовый доступ, проверьте скорость загрузки файлов по FTP.

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

Третье, что очень важно, это скорость реакции техподдержки на Ваши звонки и письма. Прежде, чем покупать хостинг, задайте какой-нибудь вопрос и посмотрите, как быстро на него ответят. Если ответа нет в течение суток, дело плохо, потом замучаетесь. Хорошо, когда с саппортом можно связаться по ICQ или ODIGO, так Вы сможете решить свой вопрос на порядок оперативнее.

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

Один из самых оптимальных вариантов для хостинга - http://hosting.mnw.ru. Можно, например, купить 5 Мб с PHP и SSI за $3 в месяц по тарифу "гибкий", а потом, по необходимости, расшириться, докупая новые сервисы и дисковое пространство. Очень удобно для небольших сайтов в стадии резвития. А можно взять тариф "безлимитныЙ" - место не ограничено, все услуги включены, а оплата по входящему трафику. Для крупных сайтов - идеальное решение. А еще этот провайдер недавно начал регистрировать домены в зоне .info - много хороших имен там пока еще свободно.

Давыденко Дмитрий


Оглавление/Вверх


Копилка веб-мастера. Часть 4


Продолжаем знакомить вас с некоторыми интересными и полезными приемами в области веб-дизайна в рамках начатого в начале года цикла статей под общим названием "Копилка веб-мастера".

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

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

Для начала откройте любой графический редактор, создайте два небольших изображения: одно для пиктограммы закрытого списка рубрик, другое - для иконки открытого списка (например, в виде обычной и открытой папки, соответственно) и сохраните их под именами closed.gif и open.gif.

Далее в раздел HEAD страницы с навигационным меню нужно вставить следующий код JavaScript-сценария:

<script language="Javascript">
<!--
var Open = ""
var Closed = ""

function preload(){
if(document.images){
     Open = new Image(24,24)
     Closed = new Image(22,17)
     Open.src = "open.gif"
     Closed.src = "closed.gif"
}}

function showhide(what,what2){
if (what.style.display=='none'){
what.style.display='';
what2.src=Open.src
}
else{
what.style.display='none'
what2.src=Closed.src
}
}
-->
</script>


Обратите внимание на следующие строки:

Open = new Image(24,24)
Closed = new Image(22,17)

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

Open.src = "open.gif"
Closed.src = "closed.gif"

Здесь необходимо указать названия файлов пиктограмм для обоих видов списка (в нашем случае это open.gif и closed.gif).

После этого необходимо инициализировать скрипт в "теле" документа: добавляем в BODY инструкцию onLoad="preload()". Теперь нужно задать параметры для самих списков.

Закрытый список:

<span id="menu1" onClick="showhide(menu1outline,menu1sign)" style="cursor:hand; font-Family:Verdana; text-decoration:none; font-weight:bold">

<img id="menu1sign" src="closed.gif">РАЗДЕЛ № 1
</span>


Открытый список:

<span id="menu1outline" style="display:'none'">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">Подраздел № 1</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">Подраздел № 2</a><br>
</span>


В коде для открытого списка вы можете указывать свои собственные ссылки (вместо #) и варьировать расстояние, на котором относительно основного раздела будут отображаться названия подразделов меню. В зависимости от количества разделов и подразделов, в код добавляются аналогичные конструкции (span id="menu2", span id="menu3"..., menu2outline, menu3outline..., menu2sign, menu3sign и т.д.). Чтобы ваше динамическое навигационное меню имело более приглядный вид, укажите в разделе HEAD документа соответствующие атрибуты каскадных таблиц стилей CSS (пример здесь).

Зачем нам скроллинг?
Если вас попросить назвать типы поиска информации в Интернете, вы наверняка назовете поиск по всей глобальной сети, поиск в пределах баз данных и каталогов ресурсов и поиск по структуре конкретного веб-узла. Действительно, эти типы наиболее распространены и поэтому мы, к сожалению, часто забываем о такой чрезвычайно полезной и удобной для пользователя функции, как внутренний поиск - поиск по ключевым словам в пределах одного документа. В оффлайновой жизни любой пользователь ежедневно пользуется этой возможностью, экономя время на просмотр всего большого текстового документа и прибегая к услугам программы, в которой он работает, с целью быстрого нахождения искомого слова или фразы (например, применение комбинации клавиш Ctrl+F в редакторе MS Word).

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

<a href="javascript:
FD983r=
{
x:function()

{
var r,i,s=document.selection.createRange().text;
if(!s)
s=prompt('Введите ключевое слово:','');

if(s)
{r=document.body.createTextRange();
for(i=0;r.findText(s);i++)
{r.execCommand('BackColor','','red');
r.collapse(false)};

alert('Найдено: '+i+' слов(а)')}
}
}
;

FD983r.x()">Начать внутренний поиск</a>


Теперь разберем некоторые строки:

s=prompt('Введите ключевое слово:',''); - функция ввода пользовательского запроса (при нажатии на ссылке начала поиска (об этом чуть ниже), появляется окно со строкой ввода ключевого слова, См. Рисунок 2); предложение в скобках отображается над формой ввода ключевого слова и может быть изменено по вашему усмотрению);

{r.execCommand('BackColor','','red'); - параметры выделения найденных в тексте документа слов (в данном случае найденные слова будут выделяться красным цветом);

FD983r.x()">Начать внутренний поиск</a> - ссылка вызова окна с формой пользовательского запроса.

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

Ждите ответа
Часто бывает, что основная или другие страницы веб-сайта содержат информацию, требующую много времени на загрузку: Flash-анимация, Java-апплеты, элементы ActiveX и пр. В этом случае многие веб-мастеры размещают на странице анимированный прогресс-бар (индикатор загрузки) и ссылку, либо пропускающую процесс загрузки, либо ведущую на полностью текстовую версию сайта. Конечно, можно и не помещать индикатор загрузки на страницу, а ограничиться надписью типа "Идет загрузка. Подождите", но согласитесь, что динамичный элемент в виде прогресс-бара делает процесс ожидания не таким скучным и вообще сильно "оживляет" веб-страницу.

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

<script language="JavaScript">
<!--
vers = 1.0;
// -->
</script>
<script language="JavaScript1.1">
<!--
vers = 1.1;
// -->
</script>
<script language="javascript">
<!--
function initArray() {
 for (var i = 0; i < initArray.arguments.length; i++)
  this[i] = initArray.arguments[i];
 this.length = initArray.arguments.length;
}
var pics = new initArray(
 "status1.jpg",
 "status2.jpg",
 "status3.jpg",
 "status4.jpg");

var transfer_url = "page.html";

function transfer(param) {
 if (vers>1.0)
  location.replace(transfer_url);
 else
  location.href = transfer_url;
}

function done() {
 if (vers < 1.1)
  transfer();
 else
  commence_loading();
}

function commence_loading() {
 for (g=0;g<pics.length;g++)
  eval('document.preload'+g+'.src = "'+pics[g]+'";');
}

if (vers >= 1.1) {
 blue = new Image();
 blue.src = "blue.gif";
 black = new Image();
 black.src = "black.gif";
}

var loaded = new Object();
for (h=0;h<pics.length;h++)
 loaded[h] = 0;
num_loaded = 0;

function update(num) {
 loaded[num]++;
 if (loaded[num] == 2) {
  eval('document.status'+num_loaded+'.src = "blue.gif";');
  num_loaded++;
  if (num_loaded == pics.length)
   transfer();
 }
}
// -->
</script>


В данном случае для индикатора загрузки используются графические изображения blue.gif и black.gif (синие деления на черном фоне), файлом перехода после загрузки назначена страница page.html (var transfer_url = "page.html";), на которой размещены файлы status1.jpg, status2.jpg, status3.jpg и status4.jpg (var pics = new initArray). Чтобы скрипт инициализировался при загрузке документа с прогресс-баром, в раздел BODY вставляется событие языка JavaScript onLoad="done()".

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

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

<script language="JavaScript">
<!--
var m1,m2,m3
m1="ПОДСКАЗКА 1"
m2="ПОДСКАЗКА 2"
m3="ПОДСКАЗКА 3"

var newwin;

function closep()
{
newwin.close();
}

function msg(num)
{
newwin=window.open("","min","width=263 height=181");
newwin.document.write("<FONT FACE='Arial' SIZE='2'>")
newwin.document.write(eval("m"+num))
newwin.document.write("</FONT>")
}
// -->
</script>


где var m1,m2,m3 - переменные для каждого окна с подсказкой;

newwin.close(); - функция закрытия окна при перемещении курсора за пределы ссылки;

function msg(num) - функция вывода сообщений в окнах-подсказках (размеры окон можно менять по желанию);

Теперь в код ссылок, при наведении курсора на которые появляются окна-подсказки, нужно добавить события onMouseOver (с указанием номера сообщения) и onMouseOut (с привязкой к функции закрытия окна closep):

<a href="#" onmouseout="closep()" onmouseover="msg(1)">ССЫЛКА 1</a>
<a href="#" onmouseout="closep()" onmouseover="msg(2)">ССЫЛКА 2</a>
<a href="#" onmouseout="closep()" onmouseover="msg(3)">ССЫЛКА 3</a>


Алексей Петюшкин


Оглавление/Вверх


Рассылки Вебмастера


Вас интересуют вопросы web-дизайна, скриптов, графики, и т.п.? Тогда у Вас есть возможность подписаться на рассылку "Веб-Дизайн, азы" (более 25000 подп.)

У Вас есть вопросы по софту вебмастера, скриптам, графике и т.п.? Эти вопросы Вы можете задать в рассылке "Веб-Дизайн. Вопросы и Ответы" и в следующем номере получить отеты на свои вопросы.

На эти рассылки Вы можете подписаться прямо сейчас (форма подписки внизу этой рассылки), а также на сайте http://dweb.ru/



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


TBE (Tranzit Banner Exchange) http://dweb.ru/go/ - уникальная сеть обмена, позволяющая увеличить посещаемость Вашего сайта. Поддерживаются типоразмеры баннеров 120х60, 100х100 и Текстовые блоки. Комиссия 7-10%. Высокий CTR. Выкуп показов. Каждому новому участнику 20000-50000 БЕСПЛАТНЫХ показов! Узнать подробности и зарегистрироваться можно на сайте http://dweb.ru

XBN (Xmen Banner Network) http://dweb.ru/go/ - уникальная сеть обмена, позволяющая увеличить посещаемость Вашего сайта. Поддерживаются баннеры 468х60. Комиссия 7-10%. Высокий CTR. Выкуп показов. Каждому новому участнику 20000-50000 БЕСПЛАТНЫХ показов! Узнать подробности и зарегистрироваться можно на сайте http://dweb.ru


Ссылки "На Досуге"


* Новости для сайта Вебмастера
* Хостинг - Регистрация в зоне .info
* Кольца сайтов
* BIG-WEB - все для вебмастера: Анимированные GIF, Бакграунды, баннеры, Java Script, Applet, CGI, PHP, HTML, CSS. Советы, статьи, эфективная раскрутка.

Попасть в рубрику, правила.


Оглавление/Вверх


  Подпишитесь:
Рассылки Subscribe.Ru
Веб-дизайн, азы
Веб-дизайн. Вопросы и ответы.
Веб-дизайн. От А до Я.
  ICQ - Клуб
Адрес Клуба http://dweb.ru/1/icq.htm

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

Для тех, кто может, а главное хочет поделиться своими знаниями, Вы можете вступить в наш Клуб, для этого присылайте # ICQ, Имя, E-mail, Город, и темы по которым возможна консультация.


Оглавление/Вверх


    Авторам

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

Ведущий рассылки Дмитрий Давыденко


http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу
Рейтингуется SpyLog

В избранное