Автор: Vanger85. Дата публикации: 08.03.2005
Ваша домашняя баннерная сеть
Первым сегодня будет небольшой скрипт, который может заинтересовать многих веб-мастеров (в особенности начинающих). Скрипт представляет собой что-то вроде упрощенной системы показа баннеров. Конечно, до таких механизмов-гигантов, как BannerBank или RotaBanner, данному скрипту очень и очень далеко, однако он вполне сможет претендовать на роль локальной системы баннерных показов в пределах вашей домашней странички или персонального проекта. Тем более, если ваш Интернет-ресурс содержит интересную информацию, владельцев других сайтов по схожей тематике, желающих обменяться с вами баннерами, наверняка окажется много. Вот здесь вам и придет на помощь данный скрипт. Сначала добавляем в нужное место веб-страницы (раздел <BODY>) следующий код:
Переменная var z изменяется по вашему усмотрению - в зависимости от того, сколько баннеров будет участвовать в ротации. Отсчет баннеров должен начинаться с Banner[0], количество объектов неограничено. Нелишне добавить, что указание атрибутов изображения WIDTH, HEIGHT и BORDER обязательно (за исключением, если вы нарочно хотите сделать вокруг баннера рамку). Сразу же после этого кода вставляем следующий:
Цифра в конце строки var z=(now.getSeconds())%3; должна совпадать с указанной в var z (предыдущий листинг). Готово! Теперь при каждой перезагрузке страницы будет показываться другой баннер, причем выбор изображения происходит случайным образом (См. Если вы хотите защитить показываемые баннеры от кэширования, пропишите в разделе <HEAD> специальную мета-инструкцию.
Сим-Сим, откройся!
Всю информацию условно можно поделить на две большие группы: общедоступные данные и конфиденциальные данные. К последним относятся такие элементы деятельности пользователя Интернета, как личная переписка, частные фотоколлекции, программное обеспечение, компьютерные файлы и многое другое. Очень часто к подобной информации (или конкретной ее части) имеют доступ десятки, сотни и даже тысячи различных людей. Чтобы один пользователь не смог получить доступ к информации другого человека, используются специальные серверные программы, которые сверяют введенные пользователем логин и пароль доступа с записями в базе данных. В случае если авторизация проходит успешно, пользователь переходит в защищенную зону, а если введенные данные оказываются неверными или на сервере не существует записи данного пользователя, появляется сообщение об отказе в доступе.
Само собой разумеется, преобладающее количество механизмов авторизации реализуется посредством серверных приложений. Но что делать, если вы не владеете PHP или Perl настолько хорошо, чтобы самому написать подобную программу, или ваш веб-сервер не поддерживает (или запрещает использование своим пользователям) такие технологии, как ASP, CGI и PHP? Выход, оказывается, есть. Простейшую систему авторизации можно реализовать и с помощью клиентских языков, например, JavaScript. Очевидно, что написанный на этом языке скрипт авторизации знающий человек обойдет за десять секунд, но если информация, которую вы хотите скрыть от чужих глаз, не является государственной тайной, а главное для вас - удобный многопользовательский интерфейс для работы с фрагментами данных, то подобная система вам определенно подойдет.
В отличие от аналогичных сценариев, которые содержат учетные записи (логины и пароли) прямо в HTML-коде документа, данный скрипт запускается отдельно от страницы, на которой вы организуете вход в защищенную зону. Здесь нужно только указать в разделе HEAD путь на сервере к JavaScript-файлу, в котором и будет размещаться конфиденциальная информация:
Далее в любом текстовом редакторе создается чистый документ, сохраняется в указанной выше директории (в данном случае это папка USERS) под определенным именем с расширением .js и вписывается следующий код:
Теперь дам небольшие разъяснения к некоторым строкам листинга.
Запись типа
означает, что если пользователь введет логин "Vasya" и пароль "snickers" и нажмет кнопку подтверждения (Submit), то попадет в директорию "vasya", которая в свою очередь размещена в папке "users".
Строка
вызовет появление системного окна с сообщением об ошибке, если логин или пароль (либо и то, и другое) указаны неверно или отсутствуют в JavaScript-файле с настройками скрипта.
Если данные для доступа введены правильно, то пользователь увидит персональное приветствие, после чего перейдет в защищенную зону:
Когда все записи в скриптовом файле сделаны, остается лишь установить на нужной веб-странице формы для входа:
Вот и все. Система авторизации готова. Казалось бы, мелочь, но все-равно приятно - и автору и посетителям Интернет-ресурса.
Фокус на форму
Когда заходит речь о размещении на веб-странице HTML-форм, многие веб-мастера не уделяют данному моменту должного внимания: ни оформления с помощью CSS, ни симметричного расположения и тем более - удобства для пользователя. Здесь распространены две крайности: либо веб-мастер забывает о том, что делается все это для пользователя (к примеру, забывает применять атрибут VALUE, в большинстве случаев использующийся для подсказок), либо он стремится к достижению максимума удобства настолько сильно, что забывает о чувстве мере. Последний вариант влечет за собой такое же недоумение посетителя, что и в случае с ленивым веб-мастером.
Писать о том, как правильно работать с HTML-формами можно много, однако в рамках сегодняшнего выпуска я оставлюсь лишь на одном полезном приеме. Реализуется он посредством JavaScript и облегчает действия пользователя при работе с формами. Наверняка многие из вас встречали сайты, на которых сразу же после загрузки страницы в поле формы появляется мигающий значок текстого курсора. Это позволяет посетителю сразу вводить требуемые данные (логины и пароли для авторизации, ключевое слово при поиске и пр.) без предварительной установки курсора вручную. Например, у нас есть функция поиска:
Значения атрибута NAME в формах обязательны, а строка document.search.query.focus() задает функциональное отношение текущий документ.значение NAME тега FORM.значение NAME тега INPUT.название функции
Динамическое отображение информации
В процессе разработки или усовершенствования Интернет-ресурса у веб-мастера может возникнуть проблема динамического отображения информации. Под данной формулировкой кроется множество случаев, поэтому приведу один конкретный пример.
Предположим, у нас есть карта России с нанесенными на ней названиями городов. Посетитель должен быстро и в удобном виде получить информацию по каждому из городов. Какие есть пути реализации? Разрезать карту на части или задать активные области для Imagemap? Неудобно, т.к. каждый раз посетитель будет переходить по ссылке и назад, что снова потребует загрузки графического файла. Поместить нужный текст в поле ALT, чтобы тот отображался в виде всплывающей подсказки при наведении курсора? Бессмысленно, т.к. подсказка через несколько секунд исчезнет, а текста может быть много (десятки предложений и т.п.). Самый подходящий и эффективный способ - это применение JavaScript и Dynamic HTML в совокупности с Imagemap. В этом случае при наведении курсора мыши на заданную активную область карты в определенном месте страницы появляется информация о городе (как текстовая, так и графическая). Такой подход имеет два важных достоинства: корректная работа и в Internet Explorer, и в Netscape Navigator и экономия времени посетителя (графика загружается только один раз, а все действия выполняются непосредственно из кода документа).
Сначала нужно вписать в раздел HEAD следующий код:
Далее определяем координаты информационных слоев, которые невидимы до тех пор, пока курсор мыши не переместится над активной областью (в начале раздела BODY):
Строка #link3{position:absolute; left:160; top:250; visibility:hidden;} означает, что при активации области link3 скрытый до сего момента информационный слой, соответствующий данной области, появится на странице на 160 пикселей от левой границы окна и на 250 пикселей - от верхнего края окна. После этого переходим к наполнению слоев (идет сразу после вышеприведенного кода):
И последнее, что нужно сделать, - это задать активные области при помощи Imagemap и привязать их к функциям сценария по активации/дезактивации слоев:
В данном случае при перемещении курсора, например, над надписью "Санкт-Петербург" на карте, аналогичная надпись, но уже в текстовом виде, появляется прямо под изображением карты России . Наполнение слоев можно осуществлять в соответствии с индивидуальными предпочтениями и оформительскими требованиями: вместо текстовых блоков вставлять графику, таблицы, гиперссылки и др.
Java Script - как инструмент web-дизайна
Ваша домашняя баннерная сеть
Первым сегодня будет небольшой скрипт, который может заинтересовать многих веб-мастеров (в особенности начинающих). Скрипт представляет собой что-то вроде упрощенной системы показа баннеров. Конечно, до таких механизмов-гигантов, как BannerBank или RotaBanner, данному скрипту очень и очень далеко, однако он вполне сможет претендовать на роль локальной системы баннерных показов в пределах вашей домашней странички или персонального проекта. Тем более, если ваш Интернет-ресурс содержит интересную информацию, владельцев других сайтов по схожей тематике, желающих обменяться с вами баннерами, наверняка окажется много. Вот здесь вам и придет на помощь данный скрипт. Сначала добавляем в нужное место веб-страницы (раздел <BODY>) следующий код:
<script language="JavaScript">
<!--
var z= 3;
Banner = new Array(z);
Banner[0] = ’<a href="http://www.page1.ru/"><img src="banner1.gif" alt="Баннер1" width=468 height=60 border=0></a>’;
Banner[1] = ’<a href="http://www.page2.ru/"><img src="banner2.gif" alt="Баннер2" width=468 height=60 border=0></a>’;
Banner[2] = ’<a href="http://www.page3.ru/"><img src="banner3.gif" alt="Баннер3" width=468 height=60 border=0></a>’;
//-->
</script>
Переменная var z изменяется по вашему усмотрению - в зависимости от того, сколько баннеров будет участвовать в ротации. Отсчет баннеров должен начинаться с Banner[0], количество объектов неограничено. Нелишне добавить, что указание атрибутов изображения WIDTH, HEIGHT и BORDER обязательно (за исключением, если вы нарочно хотите сделать вокруг баннера рамку). Сразу же после этого кода вставляем следующий:
<script language="JavaScript">
<!--
var now=new Date();
var z=(now.getSeconds())%3;
document.write(Banner[z]);
//-->
</script>
Цифра в конце строки var z=(now.getSeconds())%3; должна совпадать с указанной в var z (предыдущий листинг). Готово! Теперь при каждой перезагрузке страницы будет показываться другой баннер, причем выбор изображения происходит случайным образом (См. Если вы хотите защитить показываемые баннеры от кэширования, пропишите в разделе <HEAD> специальную мета-инструкцию.
Сим-Сим, откройся!
Всю информацию условно можно поделить на две большие группы: общедоступные данные и конфиденциальные данные. К последним относятся такие элементы деятельности пользователя Интернета, как личная переписка, частные фотоколлекции, программное обеспечение, компьютерные файлы и многое другое. Очень часто к подобной информации (или конкретной ее части) имеют доступ десятки, сотни и даже тысячи различных людей. Чтобы один пользователь не смог получить доступ к информации другого человека, используются специальные серверные программы, которые сверяют введенные пользователем логин и пароль доступа с записями в базе данных. В случае если авторизация проходит успешно, пользователь переходит в защищенную зону, а если введенные данные оказываются неверными или на сервере не существует записи данного пользователя, появляется сообщение об отказе в доступе.
Само собой разумеется, преобладающее количество механизмов авторизации реализуется посредством серверных приложений. Но что делать, если вы не владеете PHP или Perl настолько хорошо, чтобы самому написать подобную программу, или ваш веб-сервер не поддерживает (или запрещает использование своим пользователям) такие технологии, как ASP, CGI и PHP? Выход, оказывается, есть. Простейшую систему авторизации можно реализовать и с помощью клиентских языков, например, JavaScript. Очевидно, что написанный на этом языке скрипт авторизации знающий человек обойдет за десять секунд, но если информация, которую вы хотите скрыть от чужих глаз, не является государственной тайной, а главное для вас - удобный многопользовательский интерфейс для работы с фрагментами данных, то подобная система вам определенно подойдет.
В отличие от аналогичных сценариев, которые содержат учетные записи (логины и пароли) прямо в HTML-коде документа, данный скрипт запускается отдельно от страницы, на которой вы организуете вход в защищенную зону. Здесь нужно только указать в разделе HEAD путь на сервере к JavaScript-файлу, в котором и будет размещаться конфиденциальная информация:
<script language="JavaScript" src="./users/users.js"></script>
Далее в любом текстовом редакторе создается чистый документ, сохраняется в указанной выше директории (в данном случае это папка USERS) под определенным именем с расширением .js и вписывается следующий код:
function Login(){
var done=0;
var username=document.login.username.value;
username=username.toLowerCase();
var password=document.login.password.value;
password=password.toLowerCase();
if (username=="Vasya" && password=="snickers") { window.location="./users/vasya/"; done=1; }
if (username=="Andrey" && password=="huggies") { window.location="./users/andrey/"; done=1; }
if (username=="Natasha" && password=="oriflame") { window.location="./users/natasha/"; done=1; }
if (done==0) { alert("Неправильный логин или пароль. Попробуйте еще раз"); }
if (username=="Vasya" && password=="snickers") { alert("Васька, здорово!"); }
if (username=="Andrey" && password=="huggies") { alert("Андрюха, привет!"); }
if (username=="Natasha" && password=="oriflame") { alert("Ой, кто к нам пришел!"); }
}
Теперь дам небольшие разъяснения к некоторым строкам листинга.
Запись типа
if (username=="Vasya" && password=="snickers") { window.location="./users/vasya/"; done=1; }
означает, что если пользователь введет логин "Vasya" и пароль "snickers" и нажмет кнопку подтверждения (Submit), то попадет в директорию "vasya", которая в свою очередь размещена в папке "users".
Строка
if (done==0) { alert("Неправильный логин или пароль. Попробуйте еще раз"); }
вызовет появление системного окна с сообщением об ошибке, если логин или пароль (либо и то, и другое) указаны неверно или отсутствуют в JavaScript-файле с настройками скрипта.
Если данные для доступа введены правильно, то пользователь увидит персональное приветствие, после чего перейдет в защищенную зону:
if (username=="Vasya" && password=="snickers") { alert("Васька, здорово!"); }
Когда все записи в скриптовом файле сделаны, остается лишь установить на нужной веб-странице формы для входа:
<form name="login">
Логин:<br>
<input type="text" size=14 name="username">
<br>
Пароль:<br>
<input type="password" size=14 name="password">
<br><br>
<input type="button" name="submit" value="Вход" onClick="Login()">
<input type="reset" name="reset" value="Очистить">
</form>
Вот и все. Система авторизации готова. Казалось бы, мелочь, но все-равно приятно - и автору и посетителям Интернет-ресурса.
Фокус на форму
Когда заходит речь о размещении на веб-странице HTML-форм, многие веб-мастера не уделяют данному моменту должного внимания: ни оформления с помощью CSS, ни симметричного расположения и тем более - удобства для пользователя. Здесь распространены две крайности: либо веб-мастер забывает о том, что делается все это для пользователя (к примеру, забывает применять атрибут VALUE, в большинстве случаев использующийся для подсказок), либо он стремится к достижению максимума удобства настолько сильно, что забывает о чувстве мере. Последний вариант влечет за собой такое же недоумение посетителя, что и в случае с ленивым веб-мастером.
Писать о том, как правильно работать с HTML-формами можно много, однако в рамках сегодняшнего выпуска я оставлюсь лишь на одном полезном приеме. Реализуется он посредством JavaScript и облегчает действия пользователя при работе с формами. Наверняка многие из вас встречали сайты, на которых сразу же после загрузки страницы в поле формы появляется мигающий значок текстого курсора. Это позволяет посетителю сразу вводить требуемые данные (логины и пароли для авторизации, ключевое слово при поиске и пр.) без предварительной установки курсора вручную. Например, у нас есть функция поиска:
<form name="search">
<input type="text" size="20" name="query">
<br><br>
<input type="button" name="submit" value="Найти">
</form>
Теперь после закрывающего тега </FORM> вписываем следующий код:
<script>
<!--
document.search.query.focus()
// -->
</script>
Значения атрибута NAME в формах обязательны, а строка document.search.query.focus() задает функциональное отношение текущий документ.значение NAME тега FORM.значение NAME тега INPUT.название функции
Динамическое отображение информации
В процессе разработки или усовершенствования Интернет-ресурса у веб-мастера может возникнуть проблема динамического отображения информации. Под данной формулировкой кроется множество случаев, поэтому приведу один конкретный пример.
Предположим, у нас есть карта России с нанесенными на ней названиями городов. Посетитель должен быстро и в удобном виде получить информацию по каждому из городов. Какие есть пути реализации? Разрезать карту на части или задать активные области для Imagemap? Неудобно, т.к. каждый раз посетитель будет переходить по ссылке и назад, что снова потребует загрузки графического файла. Поместить нужный текст в поле ALT, чтобы тот отображался в виде всплывающей подсказки при наведении курсора? Бессмысленно, т.к. подсказка через несколько секунд исчезнет, а текста может быть много (десятки предложений и т.п.). Самый подходящий и эффективный способ - это применение JavaScript и Dynamic HTML в совокупности с Imagemap. В этом случае при наведении курсора мыши на заданную активную область карты в определенном месте страницы появляется информация о городе (как текстовая, так и графическая). Такой подход имеет два важных достоинства: корректная работа и в Internet Explorer, и в Netscape Navigator и экономия времени посетителя (графика загружается только один раз, а все действия выполняются непосредственно из кода документа).
Сначала нужно вписать в раздел HEAD следующий код:
<script language="JavaScript1.2">
<!--
var ie = document.all ? 1 : 0;
var ns = document.layers ? 1 : 0;
var topcss = 165;
if (ns)
topcss = 200;
function showLayer(name)
{
if (ie)
document.all[name].style.visibility = "visible";
else if (ns)
document.layers[name].visibility = "show";
}
function hideLayer(name)
{
if (ie)
document.all[name].style.visibility = "hidden";
else if (ns)
document.layers[name].visibility = "hide";
}
//-->
</script>
Далее определяем координаты информационных слоев, которые невидимы до тех пор, пока курсор мыши не переместится над активной областью (в начале раздела BODY):
<style type="text/css">
<!--
#link1{position:absolute; left:160; top:250; visibility:hidden;}
#link2{position:absolute; left:160; top:250; visibility:hidden;}
#link3{position:absolute; left:160; top:250; visibility:hidden;}
#link4{position:absolute; left:160; top:250; visibility:hidden;}
//-->
</style>
Строка #link3{position:absolute; left:160; top:250; visibility:hidden;} означает, что при активации области link3 скрытый до сего момента информационный слой, соответствующий данной области, появится на странице на 160 пикселей от левой границы окна и на 250 пикселей - от верхнего края окна. После этого переходим к наполнению слоев (идет сразу после вышеприведенного кода):
<div id=’link1’><strong>Санкт-Петербург</strong></div>
<div id=’link2’><strong>Ростов-на-Дону</strong></div>
<div id=’link3’><strong>Красноярск</strong></div>
<div id=’link4’><strong>Владивосток</strong></div>
И последнее, что нужно сделать, - это задать активные области при помощи Imagemap и привязать их к функциям сценария по активации/дезактивации слоев:
<img src="russiamap.gif" width=400 height=230 border=0 usemap=#russia>
<map name="russia">
<area shape="rect" coords="63,70,162,85" href="link1.html" onmouseover="showLayer(’link1’);" onmouseout="hideLayer(’link1’);">
<area shape="rect" coords="98,137,193,157" href="link2.html" onmouseover="showLayer(’link2’);" onmouseout="hideLayer(’link2’);">
<area shape="rect" coords="249,125,326,141" href="link3.html" onmouseover="showLayer(’link3’);" onmouseout="hideLayer(’link3’);">
<area shape="rect" coords="289,89,368,105" href="link4.html" onmouseover="showLayer(’link4’);" onmouseout="hideLayer(’link4’);">
</map>
В данном случае при перемещении курсора, например, над надписью "Санкт-Петербург" на карте, аналогичная надпись, но уже в текстовом виде, появляется прямо под изображением карты России . Наполнение слоев можно осуществлять в соответствии с индивидуальными предпочтениями и оформительскими требованиями: вместо текстовых блоков вставлять графику, таблицы, гиперссылки и др.
Комментарии |
| отсутствуют |
Добавление комментария |