Представьте, что вы создали некий веб-сайт, который оформили в определенной цветовой гамме, по-вашему, наиболее подходящей, не режущей глаз и не раздражающей посетителей. Однако, как известно, сколько людей, столько и мнений, поэтому первый посетитель может быть в восторге от «боевой раскраски» вашего Интернет-детища, второй болезненно сморщится при виде цветового решения, а третий того и гляди сбежит на другой сайт, т.к. хронически не переваривает используемый в качестве заднего фона страниц цвет. Возникает классический вопрос — что делать? Как же угодить всем посетителям? В принципе, абсолютно всем угодить просто невозможно («фон нормальный, а вот иконки для кнопок слишком вызывающие!»), но существенно ослабить принципиальную разницу между цветовыми пользовательскими предпочтениями вполне реально за счет модного сегодня инструментального средства под названием кастомизация.
Слово «кастомизация» («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 (несмотря на заметную приверженность данного цикла к клиентским языкам веб-программирования, в следующих выпусках «Копилки» я расскажу о том, как это сделать).
