КАРТА САЙТА
  ПОИСК
полнотекстовый поиск
ФОРУМ ВИДЕО
ИГРЫ: НОВЫЕ    0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z А-В Г-З И-М Н-П Р-Я

В ХОЗЯЙСТВЕ ПРИГОДИТСЯПАНЕЛЬ ИНСТРУМЕНТОВ

Опубликовано в журнале
«Лучшие компьютерные игры»
№11 (60) ноябрь 2006
вид для печати

Стартовая страница

То, что мыслимо, то осуществимо.

Мао Цзе-Дун

Когда я включаю компьютер, первым делом рука сама тянется к заветному значку доступа в интернет. И если телефон не отключили в очередной раз за неуплату или у провайдера неожиданно не сгорел центральный сервер, то мое желание оказывается удовлетворенным — в нижнем правом углу экрана появляются симпатичные подмигивающие мониторчики. Традиционный запуск ICQ, проверка почты, прочие формальности, и вот приходит время интернет-серфинга — хождения по разным сайтам.

Конечно, многие вполне привыкли к тому, что по включении браузера открывается пустая страничка с популярным адресом about: blank (или — «Пустая страница» для пользователей Opera). Потом они мучительно вспоминают, куда же хотели сегодня пойти. И позже корят себя за то, что куда-то не попали по вине своей дырявой памяти или потерявшейся бумажки с адресом.

А ведь эту проблему можно и нужно решить. Достаточно сделать себе стартовую страничку, которая не только поможет нам сделать все нужное во время очередного визита во всемирную сеть (что очень актуально для тех, кто пользуется модемами) — посетить необходимые сайты, узнать последние новости, хотя бы просто поиграть. При желании вы сможете выразить ее внешним видом свою индивидуальность, мироощущение. Начинаем?

Делаем страницу стартовой

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

Для Internet Explorer’а: «Сервис/ Свойства обозревателя…». В первом же окошке задается нужный адрес.

Для Opera: «Инструменты/ Настройки…». В выпадающем списке «Запуск» выбирайте «Начать с домашней страницы», строкой ниже — вводите нужный адрес. Можно выбрать вариант «Продолжить с места разъединения», тогда после повторного запуска браузер автоматически загрузит последние открытые страницы.

Интернет — все уже готово

89KB

Начнем с тех, кому не хочется ничего создавать самому. Специально для них любая поисковая система на запрос «стартовая страница» выдаст множество готовых вариантов вроде YaMail.ru. Удобная стартовая страница для входа в интернет. Вход в почтовую систему Mail.ru. Все рубрики каталога Rambler.ru. Поиск через популярные русские поисковые системы Yandex, Rambler, Aport — так описывают эту страничку создатели. Как видите, ничего на этой страничке вам изменить не удастся, а то, что уже имеется, устроит далеко не каждого пользователя. К примеру, для себя я увидел на этой страничке всего один полезный пункт — курс валют. Электронную почту удобнее проверять при помощи специальных программ, для поиска в интернете лучше подойдет мини-страничка www.ya.ru.

+ Для создания стартовой страницы вообще не нужно себя утруждать.

– Результат вряд ли вас всесторонне устроит, на странице много рекламы.

Интернет — специально для пользователя

113KB

Для примера возьмем сайт www.starting.ru. Как утверждают создатели, «проект является попыткой воплощения мечты интернет-пользователя — создания идеальной стартовой страницы». Начальное меню действительно выглядит всесторонне развитым, но мы сразу пройдем дальше — по ссылке «Создать тематическую страницу», туда, где для пользователя разрабатывается его личный вариант. После прохождения нехитрой регистрации вам придется самому рассортировывать нужные ссылки по разделам. Как бы то ни было, в итоге под ваши ссылки будет отведена лишь половина страницы — остальное место все равно занимают пункты вроде «проверка электронной почты», курсы валют и т.п. Основательно изменить стиль вам не разрешат, поэтому придется довольствоваться тем, что есть. Интересный вариант — ознакомиться с теми страницами, которые создали другие пользователи. Есть несколько узкотематических страниц вроде http://starting.ru/f1/, которая целиком и полностью посвящена Формуле-1. Весьма полезные ссылки для интересующихся, но ставить такую страницу в качестве стартовой лично я бы не стал. Один из пользователей создал страничку на игровую тематику http://starting.ru/games/ — это уже ближе к идеалу, но ее наполнение, к сожалению, оставляет желать лучшего…

+ Относительно быстро, без особых усилий, создаем коллекцию тематических ссылок для себя и других пользователей сети.

– Коллекция ссылок и ничего больше. Ну, почту еще проверить с этой страницы дадут…

Специальные программы

125KB

Как и почти для любой задачи, для создания стартовых страниц даже написаны специальные программы. Мы рассмотрим программу SurfXpert, которую вы найдете на нашем диске.

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

+ Вы получите именно ту страницу, о которой только могли мечтать.

– Модулям свойственно устаревать, поэтому приготовьтесь к постоянным обновлениям…

Своими руками

Можно не прибегать ни к чьей помощи, а создать стартовую страницу собственными руками. Ни у кого больше не будет точно такой же странички — все ограничивается только вашим воображением и талантом.

При создании стартовой страницы важно учесть то, что храниться она будет на локальном диске. Можно нарисовать ваше произведение в Word’е и сохранить его как HTML — главное, чтобы получилось красиво и радовало глаз. Нет необходимости оптимизировать код, редактировать страничку при помощи блокнота, выигрывая пару сотен байт, — все равно чтение с диска на более-менее современной системе произойдет мгновенно.

Если делать страничку самому, то перед вами огромный простор для творчества. Вот примерный список актуальных пунктов:

  • В виде маленьких значков создать меню для быстрого запуска игр. Вариант — сетевых игр (мы же в интернете). Еще лучше — браузерных.
  • Можно расположить где-нибудь внизу странички свой логотип (как вариант — своего клана в любимой игре) — никто не отменял маленький культ личности, а если вы решите распространять свою страничку между другими пользователями, то подобный copyright будет очень даже к месту.
  • По необходимости поместите на страничке текущие дату и время (если часто забываете или если панель задач со стандартными часами Windows у вас прячется за пределами экрана). Можно создать для себя список напоминаний и тоже поместить его на стартовой странице.
  • Если вам нравится, можете прикрутить к своей страничке разнообразные Java-скрипты. Например, какой-нибудь персонаж, летающий за указателем мышки, или же знаменитые падающие снежинки (классно смотрится под Новый год).
  • Ссылки вида mailto: для быстрого создания писем.
  • Раз уж мы с вами игроки, вполне актуальным будет таймер финального отсчета до выхода, скажем, S.T.A.L.K.E.R.’а…

При наличии дизайнерских способностей можно оформить всю страницу в духе какой-либо игры, к примеру, того же S.T.A.L.K.E.R.’а. Кровососы скрываются в тени деревьев, по небу движутся облака, а на третьем энергоблоке ядовитым цветом написано «до выхода осталось…». В траве прячутся ссылки на официальный сайт и множество фанатских. Тут же неподалеку расположились вырезки из интервью с разработчиками и самые последние новости о процессе разработки…

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

– Чтобы уметь обращаться с тем же JavaScript, нужны определенные знания.


JavaScript: первое знакомство

Если в освоении HTML-редактора для создания стартовой страницы нет ничего сложного (опять же — не нужно считать каждый лишний байт объема, открыта полная свобода творчества), то первая встреча с JavaScript и попытка использовать их в своей странице может создать определенные проблемы для неподготовленного пользователя. В скромных рамках данного материала сложно отразить все хитрости общения с ними, однако на помощь может прийти все тот же интернет. На запрос типа «коллекция JavaScript» Яндекс моментально выдает множество страниц, где авторы совершенно безвозмездно отдают в пользование наработки, которые пригодятся вам в процессе разработки личной стартовой страницы.

Как правило, они приводят множество решений самых разнообразных задач — «идущие часики», «изменение фона документа» и прочего. Читатель может самостоятельно подобрать и украсить свою страницу практически любой подобной изюминкой. Мы расскажем об основных принципах.

Это важно: далеко не всем скриптам, размещенным в сети, стоит доверять. Так что перед использованием попытайтесь все-таки понять, что тот или иной скрипт делает.

Во-первых, JavaScript — это язык, выполняющийся на «клиентской стороне», то есть его код загружается вместе с кодом страницы в браузер компьютера посетителя сайта и запускается уже на нем.

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

Каждый кусочек кода надо обрамлять тегами <script language="JavaScript"> и </script>. Раньше рекомендовали еще и HTML-комментарии добавлять, но сейчас этим уже вполне можно пренебречь. Между этими тегами помещается собственно код.

Любимый первоначальный пример с сообщением пользователю Hello world! можно написать вот так:

<script language="JavaScript">

     alert("Hello world!");

</script>

В JavaScript есть переменные:

<script language="JavaScript">

     var message="Hello world!";

     alert(message);

</script>

Есть массивы и циклы:

<script language="JavaScript">

     var messages=["Hello world!","My name is JavaScript","How are you?"];

     for (var i=0; i< messages.length; i++) {

          alert(messages[i]);

     }

</script>

Есть условный оператор:

<script language="JavaScript">

     var messages=["Hello world!","My name is JavaScript","How ar[--bunned--]e you?"];

     for (var i=0; i< messages.length; i++) {

          if (messages[i].indexOf(‘[--bunned--]’) == -1) {

               alert(messages[i]);

          }

     }

</script>

Более подробно об основных операторах языка вы сможете прочитать, например, в любимом мной справочнике веб-разработчика http://wdh.suncloud.ru/.

С точки зрения JavaScript любая страница описывается как набор объектов. Например, существует объект document, создаваемый автоматически и соответствующий загруженному в браузер HTML-документу, объект window, соответствующий окну браузера или текущему фрейму.

Однотипные объекты объединяются в коллекции — так, у объекта document есть коллекция объектов forms, соответствующая всем формам, присутствующим на странице. В результате конструкция document['forms']['WorkForm1']['Message'], несмотря на угрожающий вид, всего-навсего возвращает значение поля с именем Message из формы с оригинальным именем WorkForm1.

Вообще, объектная модель JavaScript достаточно богата — объекты соответствуют формам и элементам форм, картинкам, гиперссылкам.

Часть объектов ничему на странице не соответствует — так, объекты типа Date инкапсулируют работу с датами и позволяют получить, например, текущий год или день недели.

<script language="JavaScript">

     var current_date = new Date();

     document.writeln("Сейчас "+ current_date.getYear()+" год!");

</script>

Все объекты, соответствующие чему-либо на странице, можно заставить реагировать на различные события — как правило, действия пользователя вроде перемещения мыши (onmousein, onmouseout) или щелчка любой из ее кнопок (onclick, ondoubleclick), выбора пункта в выпадающем меню или ввода текста (onchange). Но некоторые события от пользователя не зависят — например, загрузка или выгрузка страницы (onload, onunload).

Это — проблема: в разных браузерах, да и в разных версиях одного и того же браузера один и тот же код может работать по-разному — из-за разной объектной модели.

Рассмотрим сравнительно простую задачу — проверку введенных в форму данных на корректность.

Это важно: на сервере полученные данные все равно придется проверять еще раз — злоумышленник может легко обойти все эти проверки. Помогут они, в основном, от человека неаккуратного.

Разделим задачу на две подзадачи: хранение правил корректности ввода данных и их обработка

Для начала определим пакет функций-правил, каждая из которых отвечает за единственную проверку введенного значения.

function CheckFunctions () {

//короткий текст

/*

Определим скрытое свойство, в котором будет хранится максимальная длина короткого текста:

*/

     var MaxSizeOfShortText=128;

/*

...и функцию, которая будет осуществлять проверку на то, является ли исследуемый текст коротким, т.е. по длине не большим чем MaxSizeOfShortText

*/

this.TheShortText=function(Field) {

     return ((Field.value+'').length<=MaxSizeOfShortText)

}

/*

Теперь напишем еще два метода для чтения/записи скрытого параметра

MaxSizeOfShortText

*/

this.GetMaxSizeOfShortText=function() { return MaxSizeOfShortText; }

this.SetMaxSizeOfShortText=function(NewValue) { MaxSizeOfShortText=NewValue; }

//Примерно то же самое для длинного текста:

var MaxSizeOfLongText=1024;

this.TheLongText=function (Field) {

     return ((Field.value+'').length<=MaxSizeOfLongText)

}

this.GetMaxSizeOfLongText=function() { return MaxSizeOfLongText; }

this.SetMaxSizeOfLongText=function(NewValue) {MaxSizeOfLongText=NewValue }

//Проверка на то, что текст вообще введен:

this.NotTheEmptyText=function(Field) {

     return (Field.value!='')

}

}

Обратите внимание на строки, начинающиеся с //, и блоки, начинающиеся с /* и заканчивающиеся */. Это — комментарии, без них разобраться в скрипте будет куда труднее..

Теперь определим объект-обработчик правил, которые пользователь наложил на форму.

Каждое правило будет иметь три свойства:

Rule: Имя ПРАВИЛА в экземпляре комплекта правил
WorkObject: Указатель на обрабатываемый объект-элемент формы
ErrorMessage: Сообщение об ошибке, если данное правило не выполняется

Конструктор обработчика корректности ввода формы

function FormChecker() {

//Массив правил.

     var Rules = new Array();

//определим сообщение об ошибке по умолчанию (скрытое свойство)

     var DefaultErrorMessage = "Ошибка!";

//... открытый метод его переопределения

     this.SetDefaultErrorMessage=function(NewErrorMessage) {

/*

если NewErrorMessage пуст или не определен,

то сообщение по умолчанию не менять

*/

          DefaultErrorMessage = NewErrorMessage || DefaultErrorMessage;

     }

//... открытый метод его чтения

     this.GetDefaultErrorMessage=function() {

          return DefaultErrorMessage;

     }

//открытый метод добавления правил

     this.AddRule             = function (Rule, WorkObject, ErrorMessage) {

          Rules[Rules.length] = {

               'Rule'              :Rule,

               'WorkObject'   :WorkObject,

//если сообщение не определено, поставим вместо него системное сообщение

               'ErrorMessage' :ErrorMessage       || DefaultErrorMessage

          };

     }

//открытый метод проверки выполнения всех условий корректности формы

     this.CheckIt             = function (CheckFunctionsSET) {

//по умолчанию форма введена корректно

          var Flag = true;

//последовательно проверяем все заявленные правила на корректность.

          for (var i = 0; i < Rules.length; i++) {

//вызываем заранее определенное правило Rules[i].Rule для объекта

//Rules[i].WorkObject

               Flag = Flag &&      CheckFunctionsSET[Rules[i].Rule](Rules[i].WorkObject);

//Если возникла ошибка, сообщаем об этом пользователю и заканчиваем работу

               if (Flag==false) {

                    Message(Rules[i]);

                    break;

               }

          }

//Вернем результат

          return Flag;

     }

//скрытый метод сообщения пользователю об ошибке

     function Message(Rule) {

          alert(Rule.ErrorMessage);

          Rule.WorkObject.select();

          Rule.WorkObject.focus();

     }

}

Теперь — собственно проверяемая форма. Имя формы нам нужно для того, чтобы получить доступ к ее элементам. Будем обрабатывать событие onSubmit, которое возникает при нажатии кнопки «Сохранить» в нашей форме.

<form

     method=POST action="/cgi-bin/guestbook"

     name=WorkForm1

     onsubmit="return Form1Checker.CheckIt(CheckFunctionSET)"

>

Представьтесь:<br>

<input name=field1><br>

<br>

Ваши пожелания:<br>

<textarea cols=20 rows=10 name="Message"></textarea><br><br>

<input type=submit value="Сохранить!"><br><br>

</form>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

     // получим экземпляр пакета условий

     var CheckFunctionSET = new CheckFunctions();

     // переопределим максимальную длину короткого текста

     CheckFunctionSET.SetMaxSizeOfShortText(256);

     // переопределим максимальную длину длинного текста

     CheckFunctionSET.SetMaxSizeOfLongText(2048);

     // получим экземпляр класса обработчика условий

     var Form1Checker = new FormChecker();

     // переопределим сообщение об ошибке по умолчанию

     Form1Checker.SetDefaultErrorMessage("Неправильно заполнено поле!")

     Form1Checker.AddRule("NotTheEmptyText",

          document['forms']['WorkForm1']['field1'],

          "Не забудьте представиться!")

     Form1Checker.AddRule("TheShortText",

          document['forms']['WorkForm1']['field1'],

          "Ваше имя не должно превышать " +

               CheckFunctionSET.GetMaxSizeOfShortText() + " симв.")

     Form1Checker.AddRule("NotTheEmptyText",

          document['forms']['WorkForm1']['Message'])

     Form1Checker.AddRule("TheLongText",

          document['forms']['WorkForm1']['Message'])

</SCRIPT>

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

Использование JavaScript позволяет строить сколь угодно сложные web-приложения, о чем свидетельствует расцвет веб-приложений Google, Yandex, Mail.ru и других известных компаний.

Последнее слово

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

Статьи появляются на сайте не ранее, чем через 2 месяца после публикации в журнале.
ЧИТАТЕЛЬСКИЙ
РЕЙТИНГ
МАТЕРИАЛА
8.5
проголосовало человек: 16
1 2 3 4 5 6 7 8 9 10
вверх
Rambler's Top100 Рейтинг@Mail.ru Яндекс цитирования