Доброе время суток!
Продолжаем знакомиться с некоторыми интересными и полезными приемами в области веб-дизайна. Многие из вас, дорогие читатели, уже хорошо отдохнули, погрелись на горячем солнышке, набрались свежих сил и энергии и полны различных творческих идей и замыслов. Поэтому очередной выпуск "Копилки" постарается помочь вам в реализации ваших планов и поделится новой порцией "примочек" для веб-мастера. Итак, начнем.
Пользовательские настройки
Представьте, что вы создали некий веб-сайт, который оформили в определенной цветовой гамме, по-вашему, наиболее подходящей, не режущей глаз и не раздражающей посетителей. Однако, как известно, сколько людей, столько и мнений, поэтому первый посетитель может быть в восторге от "боевой раскраски" вашего Интернет-детища, второй болезненно сморщится при виде цветового решения, а третий того и гляди сбежит на другой сайт, т.к. хронически не переваривает используемый в качестве заднего фона страниц цвет. Возникает классический вопрос - что делать? Как же угодить всем посетителям? В принципе, абсолютно всем угодить просто невозможно ("фон нормальный, а вот иконки для кнопок слишком вызывающие!"), но существенно ослабить принципиальную разницу между цветовыми пользовательскими предпочтениями вполне реально за счет модного сегодня инструментального средства под названием кастомизация.
Слово "кастомизация" ("customization") в переводе с английского примерно означает "процесс, систему действий по сопоставлению определенных объектов конкретным потребительским предпочтениям". Другими словами, это возможность для каждого пользователя сделать процесс потребления (услуг, товаров и пр.) таким, как ему нужно (самый близкий каждому пользователю ПК пример - настройка интерфейсов программного обеспечения).
Данное понятие применительно и к нашей ситуации с цветовой гаммой сайта: необходимо предоставить возможность каждому посетителю быстро и удобно менять цветовые настройки оформления веб-страниц. Одним из наиболее простых решений является встроенный в код каждой страницы инструмент изменения цвета заднего фона. Реализуется этот инструмент за счет следующего JavaScript-сценария (вставляется в раздел HEAD):
<script language="JavaScript">
<!--
function changeBG(hexNumber) {
document.bgColor=hexNumber
}
prefix="#"
rnum1=0
bnum1=0
gnum1=0
rnum2=0
bnum2=0
gnum2=0
hexNumber2="#000000";
rcount=0;
bcount=0;
gcount=0;
function num2hex(num) {
if (num==15) return "f";
else if (num==14) return "e";
else if (num==13) return "d";
else if (num==12) return "c";
else if (num==11) return "b";
else if (num==10) return "a";
else if (num==9) return "9";
else if (num==8) return "8";
else if (num==7) return "7";
else if (num==6) return "6";
else if (num==5) return "5";
else if (num==4) return "4";
else if (num==3) return "3";
else if (num==2) return "2";
else if (num==1) return "1";
else return "0";
}
// -->
</script>
Теперь в нужном месте веб-страницы (раздел BODY) вставляем элементы переключения цветов и связываем их с указанным выше скриптом с помощью события onClick:
<form name="background" method="post">
<input type="button" value="Красный" onClick="changeBG('#FF0000')">
<input type="button" value="Зеленый" onClick="changeBG('#00FF00')">
<input type="button" value="Синий" onClick="changeBG('#0000FF')">
<input type="button" value="Серый" onClick="changeBG('#C0C0C0')">
</form>
где
"changeBG" - функция смены цвета заднего фона;
"#C0C0C0" и др. - шестнадцатиричный цветовой код заднего фона.
Теперь посетитель сможет сам выбрать цвет заднего фона по душе и наслаждаться содержанием вашего сайта.
Безусловно, у данного инструмента есть один недостаток: скрипт не запоминает указанную посетителем цветовую настройку и при переходе на следующую страницу узла загружается цвет, определенный по умолчанию. Устранить этот минус можно при помощи дополнительного скрипта, написанного на языке Perl или PHP (несмотря на заметную приверженность данного цикла к клиентским языкам веб-программирования, в следующих выпусках "Копилки" я расскажу о том, как это сделать).
Обязательные поля формы
Бьюсь об заклад, что вы не раз сталкивались с необходимостью указания обязательной информации в различных Интернет-сервисах: при регистрации, анкетировании, голосовании, авторизации, на конференциях, форумах и пр. Иногда это раздражает (мало кто "горит" желанием сообщать свой почтовый адрес или девичью фамилию своей бабушки), а порой такое требование просто необходимо. Например, на сайте юридической фирмы организована возможность онлайн-заказа бесплатной консультации и выставлена форма: Ф.И.О., e-mail, WWW, статус и суть вопроса. Все поля, за исключением адреса сайта (WWW), помечены особым символом, означающим обязательное заполнение (чаще всего это "звездочка" - *). Если в страницу с формой заказа не вставить специальный сценарий, контролирующий заполнение обязательных полей, к специалистам фирмы может прийти частично "пустое" письмо: нет имени или электронного адреса, не указан статус или суть задаваемого вопроса. Если посетитель отправит анонимное сообщение, обращение специалиста будет неперсонифицированным (в конце концов кто вам мешает вписать вымышленные данные?); если не будет указан e-mail, вы не сможете получить ответ; если вы не сообщите свой социальный статус, консультанту будет гораздо сложнее дать вам исчерпывающий ответ без знания специфики вашей жизнедеятельности; ну а если вы вдруг "забудете" задать свой вопрос...
От долгого лирического вступления перехожу к непосредственно самому скрипту (раздел HEAD):
<script>
function checkrequired(which){
var pass=true
if (document.images){
for (i=0;i
var tempobj=which.elements[i]
if (tempobj.name.substring(0,8)=="required"){
if (((tempobj.type=="text"||tempobj.type=="textarea")&&tempobj.value=='')|
|(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1)){
pass=false
break
}
}
}
}
if (!pass){
alert("Вы забыли заполнить одно или несколько обязательных полей!")
return false
}
else
return true
}
</script>
где
"function checkrequired(which)" - функция проверки конкретного элемента формы (в данном примере проверяются текстовые поля TEXT и TEXTAREA, а также ниспадающие меню SELECT);
"alert("Вы забыли заполнить одно или несколько обязательных полей!")" - вывод диалогового окна с сообщением о том, что не все обязательные поля заполнены.
Далее необходимо пометить нужные элементы формы как обязательные для заполнения. Делается это очень просто: впереди значения атрибута NAME каждого обязательного элемента добавляется приставка required (не забудьте указывать символ * для таких полей), например:
* Ваше имя:<br>
<input type="text" name="requiredname" size="25" maxlength="50">
Сообщение об ошибке
Язык JavaScript на сегодняшний день весьма популярен как у профессиональных разработчиков, так и у начинающих веб-мастеров. Некоторые документы могут включать в себя десятки различных сценариев (взаимосвязанных и автономных), и бывают случаи, когда работа того или иного скрипта дает сбой. В итоге что имеет пользователь? Простое и лаконичное сообщение об ошибке JavaScript-сценария. Результаты таких ошибок могут варьироваться от мелких сбоев в функциональности сайта до полной дезактивации его механизмов. И что прикажете делать в такой ситуации пользователю, особенно неопытному? Лично я предлагаю вам аналог вывода сообщения об ошибке, более приятный по восприятию и исчерпывающий по содержанию:
<script>
function JSerror(){
errorwindow=window.open("","","width=300,height=200")
errorwindow.document.write('<title>Сообщение об ошибке JavaScript</title><strong>Произошла ошибка JavaScript.</strong><br>Закройте это окно и
попробуйте перезагрузить требуемую страницу.<br><form><input type="button" value="Закрыть окно" onClick="window.close()"></form>')
errorwindow.document.close()
errorwindow.document.bgColor="#FFFFFF"
return true
}
window.onerror=JSerror
</script>
где
"function JSerror()" - функция вывода сообщения об ошибке;
"errorwindow=window.open("","","width=300,height=200")" - настройки окна с сообщением об ошибке: наличие панели инструментов, размеры и т.д.);
"errorwindow.document.write" - содержание окна (свободное форматирование, включая таблицы, изображения, CSS и пр.).
Если вставить этот код в каждую страницу, содержащую JavaScript-сценарий, то при возникновении ошибок в работе скриптов появится окно с сообщением об ошибке (там же можно порекомендовать перезагрузку страницы, попросить сообщить об ошибке авторам сайта и пр.)
В этом выпуске я уже упоминал такое понятие, как персонифицированное обращение к пользователю, - на мой взгляд, чрезвычайно важный элемент в общем подходе к разработке Интернет-проектов любой сложности и направленности. Следующий пример напрямую с данным понятием не связан, однако во многом определяет отношение посетителей как к сайту в целом, так и к его автору. Речь идет о соответствующем приветствии в зависимости от времени суток. Согласитесь, что фраза типа "Доброе утро, дорогой посетитель!" в 12 ночи немного сбивает с толку и часто вызывает недоумение и даже ироническую улыбку. Поэтому, если на вашем сайте диалог с посетителем играет немаловажную роль и вы просто не хотите "сесть в лужу" как веб-мастер (пусть даже и начинающий), используйте следующий скрипт:
<script language="JavaScript">
<!--
var time = new Date();
var hour = time.getHours();
if(hour >= 0 & hour <= 5) document.write("Доброй ночи!");
if(hour >= 6 & hour <= 11) document.write("Доброе утро!");
if(hour >= 12 & hour <= 18) document.write("Добрый день!");
if(hour >= 19 & hour <= 23) document.write("Добрый вечер!");
// -->
</script>
Код вставляется в "теле" документа, после чего идет стандартный неизменяемый текст (обращение в заголовке этого раздела генерируется посредством вышеприведенного скрипта).
Соглашение сторон
Следующий пример будет также исключительно практического плана и в какой-то мере поможет вам уберечь свои или чужие авторские права, если на своем сайте вы распространяете авторские материалы. Например, вы хотите организовать на своем сайте свободное распространение некоего материала, защищенного законом об авторском праве. Но одно дело предупредить посетителей об ответственности, которую они могут понести в случае нарушения упомянутых прав, а другое - иметь после этого прямое доказательство того, что люди, получившие в пользование материал, дали свое согласие на сохранение авторского права.
Для этого нужно дать посетителям возможность ознакомиться с выдержками из "Закона РФ об авторском праве и смежных правах" (или его краткими тезисами), после чего попросить указать, согласны ли они с ними или нет. Если согласны, будьте любезны - говорите e-mail и ждите обещанный материал. Не согласны, уж не обессудьте - ввести адрес в поле формы вам не удастся. Делается это следующим образом. Сначала в HEAD документа вписывается маленький скрипт:
<script language="JavaScript">
agree = 0;
</script>
Далее идут текст соглашения, элементы согласия/несогласия, поле ввода электронного адреса и кнопка подтверждения:
<form name="enableform">
Ознакомьтесь с нашим Соглашением:<br><br>
<textarea cols="25" rows="7">
Здесь идет текст соглашения, тезисов Закона или его выдержек...
</textarea>
<br><br>
<input type="radio" name="enable" value="agree" onClick="agree=1; document.enableform.box.focus();">Я согласен<br>
<input type="radio" name="enable" value='disagree' onClick="agree=0; document.enableform.box.value='';">Я несогласен
<br><br>
Введите E-mail, на который будет выслан материал:
<br><br>
<input type="text" name="box" onFocus="if (!agree)this.blur();" onChange="if (!agree)this.value='';" size="25">
<br>
<br>
<input type="submit" value="Подтвердить">
</form>
где
name="enableform" - атрибут NAME и его значение (обязательны!);
document.enableform.box.focus() - становление фокуса формы на поле ввода e-mail (при согласии);
document.enableform.box.value='' - блокировка поля ввода e-mail (при несогласии).
Алексей Петюшкин
Размещение на сайте иконок рейтингов и каталогов.
|
Достоинства:
- Для некоторых рейтингов и каталогов размещение их иконки на Вашем
сайте автоматически повышает позицию сайта в этом рейтинге / каталоге.
- Иногда, размещение иконки - единственный шанс попасть в этот рейтинг
/ каталог.
- Иногда, размещение иконки позволяет автоматически включить сайт
в этот рейтинг / каталог.
Недостатки:
- Снижение скорости загрузки страницы.
- Если один из этих сайтов, чьи иконки размещены у Вас, перегружен,
то это вызовет подвисание и Вашей страницы.
- Уменьшение полезной поверхности на Вашей странице.
То есть, размещение большого количества таких
иконок приведет к увеличению времени загрузки, а следовательно к
раздражению пользователей и в конечном счете это приведет не к увеличению
посещаемости, а к снижению.
Думаю, не надо приводить примеры, сайтов с десятками
иконками очень много, самое смешное, что некоторые WEB-студии на
этом попадаются, в прочем интересно было бы знать и их мнение.
Кстати, размещение на сайте больше 5-6 таких иконок
- по мнению известного WEB-мастера Артемия Лебедева - признак стиля
порно-сайтов. Нужны ли Вам эти иконки ? Тот же WEB-мастер, если
честно, упрекнул бы меня в наличии баннеров на этих страницах, но
как иначе получить новых посетителей сайта ?
Бурусов Д.В. (с) 2001
Ведущий рассылки Дмитрий Давыденко
|