Александр Дуванов

О работе в Сети – для тех, кто учит, и тех, кто учится

6. Стоимость просмотра сайта

«Гулять» по web-пространству очень увлекательно, но иногда такие прогулки оборачиваются огромными счетами от провайдера, если у вас не безлимитный доступ. Сколько же стоит просмотр сайта?

Разные провайдеры подключения к Интернету по-разному начисляют плату за работу в Сети. Одни берут деньги за килобайты, другие — за время подключения к Интернету. В любом случае размер файла страницы (т.е. число килобайт) прямо пропорционален числу копеек, которые придётся заплатить за просмотр.

Например, у переславского провайдера на сервере botik.ru принято оплачивать трафик (количество информации). Приём (или посылка) одного мегабайта данных стоит примерно 2,5рубля. Попробуем, исходя из этих цен, разобраться, как посчитать стоимость трафика.

Опытные web-разработчики стараются делать страницы размером не больше 40–50 килобайт (вместе с картинками и другими файлами, которые сопровождают файл с кодом страницы). При этом их заботит не столько кошёлек пользователя, сколько его способность ожидать окончания загрузки. Известно, что пользователи спокойно переносят 10-секундную задержку (а это и есть передача примерно 50 килобайт по скоростному аналоговому модему), после чего начинают проявлять нетерпение и покидают сайт, так и не загрузив страницу полностью.

Просмотр 20 страниц по 50 килобайт обойдётся клиенту сервера botik.ru в 2,5 рубля.

Но, к сожалению, в Сети мало сайтов, размер страниц которых укладывается в 50 килобайт. Если на странице есть картинки, анимация, музыка — она может быть очень «толстой».

Вот пример «аскетичной» страницы поискового сайта Google (www.google.ru) (рис. 1.27).

Рис 1.27. Стартовая страница поискового сайта Google

Файл с кодом страницы занимает 4358 байт. Кроме того, на компьютер пользователя загружаются 4 картинки (с буквами заголовка) общим «весом» в 11 342 байт.

Таким образом, для отображения этой страницы на компьютер пользователя передаётся 15 700 байт. Страница загружается очень быстро, её просмотр обходится в 4 копейки по переславским ценам.

А вот другой пример — сайт-галерея фотографий (www.photoregion.ru) (рис. 1.28).

Рис 1.28. Сайт-галерея фотографий

Общий «вес» страницы — 400 килобайт (файл с кодом страницы, файлы с образцами картинок, вспомогательные файлы). Просмотр стоит 1 рубль.

Нам показалась интересной картинка с собачкой. Щёлкаем на её пиктограмме и получаем страницу с более крупным изображением (название фото: «Я буду ждать тебя», автор скрывается под ником VLDR) (рис. 1.29).

Рис 1.29. Я буду ждать тебя (автор VLDR)

«Вес» этой страницы снова 400 килобайт, ещё один рубль.

Картинка так понравилась, что хочется скопировать её версию для печати — около 2 мегабайт, 5 рублей.

Таким образом, трафик с собачкой обойдётся в 7 рублей. Двадцать красивых животных — 140 рублей!

Сайты предлагают копировать не только картинки, но и музыку, фильмы.

Музыкальная композиция в формате MP3 «весит» около 10 мегабайт — 25 рублей, копирование фильма размером в 1 гигабайт обойдётся в 2 500 рублей.

7. Устройство сайта

Рассмотрим устройство сайта на примере роботландского web-узла www.botik.ru/~robot.

В окне браузера с загруженным сайтом можно выделить следующие важные элементы:

•  заголовок окна — совпадает с заголовком страницы;
•  заголовок сайта — расположен в самом верху страницы;
•  логотип — обычно расположен в левом верхнем углу страницы, на других страницах логотип является ссылкой на главную (начальную) страницу;
•  горизонтальное навигационное меню сайта — обычно располагается под заголовком сайта;
•  вертикальное навигационное меню страницы — обычно располагается под логотипом (рис. 1.30).

Рис 1.30. Элементы гипертекстового документа

7.1. Сайт состоит из страниц

Как и печатное издание, например книга, сайт состоит из страниц. Страницы сайта — это файлы с расширением htm (html). Страницу сайта также называют документом. Как и книга, сайт имеет одну главную страницу (входная точка, домашняя страница, начальная страница). Именно эта страница указывается в качестве адреса сайта.

Адрес роботландского сайта:

http://www.botik.ru/~robot/index.htm

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

http://www.botik.ru/~robot

Или даже так:

www.botik.ru/~robot

Когда имя HTML-файла в адресе не указано, сервер автоматически дописывает имя, стандартное для данного сервера.

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

7.2. Сайты с иерархической структурой

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

Причина популярности иерархии кроется в особенностях человеческого восприятия:

1. Большое воспринимается проще при разбиении на маленькие части — делим изложение на страницы.
2. Сложное воспринимается легче при движении внимания от общих черт к деталям — деление на части выполняем по иерархическому принципу вложенности.

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

Обычно у сайта есть специальная страница с названием «Карта сайта», где иерархия страниц показана в виде системы вложенных списков. Вложенность отражает иерархическую схему сайта, а элементы списков являются гиперссылками на соответствующие страницы. Пользователь видит полное логическое строение сайта и может открыть любую страницу одним щелчком (рис. 1.31).

Рис 1.31. Карта роботландского сайта

7.3. Системы навигации по сайту

Интерфейсные средства перемещения по сайту называют системой навигации сайта.

7.3.1. Удобная навигация

Навигация является удобной, если, находясь на любой странице сайта, можно легко ответить на три вопроса.

•  Где я? — пользователь однозначно понимает, в каком месте сайта он находится.
•  Куда я могу пойти? — есть возможность с каждой страницы попасть на любую другую, минуя главную.
•  Где меню? — пользователю не приходится прокручивать страницу для доступа к навигационным элементам.

7.3.1.1. Где я?

На этот вопрос помогают ответить следующие элементы сайта.

•  Логотип и заголовок — они называют сайт (рис. 1.32).
•  Заголовок страницы и заголовок окна (он повторяет заголовок страницы) (рис. 1.33).
•  Позиция меню, которая не является ссылкой, — отмечает страницу сайта (рис. 1.34).
•  Путь от главной страницы к текущей в иерархическом дереве сайта. Этот приём называется хлебные крошки (рис. 1.35).

Рис 1.32. Заголовок и логотип сайта

Рис 1.33. Заголовок окна и заголовок страницы

Рис 1.34. Позиция меню, которая не является ссылкой

Рис 1.35. Хлебные крошки

7.3.1.2. Куда я могу пойти?

На этот вопрос отвечают: меню сайта, меню страницы, меню «хлебные крошки», ссылки на странице (текстовые и ссылки-картинки), логотип (ссылка на начальную страницу сайта) (рис. 1.36).

Рис 1.36. Куда я могу пойти?

7.3.1.3. Где меню?

Меню помещают в начало страницы, чтобы пользователю было удобно пролистывать сайт.

Полезно меню и в конце страницы. Пользователь может продолжить путь, не прокручивая страницу в начало (рис. 1.37).

Рис 1.37. Где меню?

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

7.3.2. Одноуровневая навигационная схема

Когда сайт небольшой и состоит из нескольких не подчинённых друг другу страниц, часто используется навигационная схема, содержащая одно меню (вертикальное или горизонтальное), повторяющееся на каждой странице в верхней её части. Горизонтальное меню присутствует и на концах страниц (рис. 1.38).

Рис 1.38. Элементы страницы сайта

Следует отметить следующее.

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

7.4. Внутристраничные ссылки

Гиперссылки могут перемещать пользователя не только между страницами одного сайта (или нескольких сайтов), но и внутри одной страницы.

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

На «правильных» сайтах внутристраничные ссылки снабжаются соответствующими комментариями (рис. 1.39):

Рис 1.39. Внутристраничные ссылки

7.5. Графические гиперссылки, альтернативный текст

Кроме текстовых гиперссылок, на сайте могут быть ссылки, оформленные в виде картинок. При наведении курсора мыши на картинку-ссылку он, как и на текстовой ссылке, меняет свой вид на «указующий перст» (рис. 1.40).

Рис 1.40. Графическая ссылка

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

Картинки на «правильных» сайтах обязательно сопровождаются альтернативным текстом.

Альтернативный текст — это текст, который записывается на место картинки при её отсутствии на странице. В некоторых браузерах альтернативный текст «всплывает» на экран в момент зависания курсора мыши над картинкой (рис. 1.41):

Рис 1.41. Всплытие надписи, когда курсор над картинкой

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

Рис 1.42. Альтернативный текст при выключенной графике

8. Техника работы с браузером

8.1. Как сохранить текст со страницы сайта

Пункт Сохранить как меню Файл вызывает диалоговое окно Сохранение веб-страницы. Наряду с указанием папки и файла нужно установить текстовой формат в поле Тип файла. Возможно указание кодировки сохраняемого файла (рис. 1.43).

Рис 1.43. Панель Сохранение веб-страницы

Можно сохранить текст со страницы, используя буфер обмена операционной системы. Для этого нужно:

1. Выделить текстовый фрагмент.

2. Нажать Ctrl+C (или Копировать в разделе Правка главного меню).

3. Нажать Ctrl+V (или Вставить в разделе Правка) внутри текстового редактора, например, Блокнота Windows.

8.2. Как сохранить картинку с сайта

Порядок сохранения картинки со страницы сайта описан ниже.

4. Поместить курсор мыши на изображение и нажать правую кнопку мыши.

5. В появившемся меню выбрать пункт Сохранить рисунок как.

6. На панели Сохранение рисунка задать папку и имя файла.

7. Нажать кнопку Сохранить (рис. 1.44).

Рис 1.44. Сохранение картинки со страницы сайта

8.3. Как сохранить страницу сайта

Пункт Сохранить как меню Файл позволяет сохранить страницу в формате HTML (рис. 1.45).

Рис 1.45. Окно Сохранение веб-страницы

Возможно указание кодировки сохраняемого файла.

8.4. Как распечатать страницу сайта

Быстро распечатать страницу позволяет кнопка Печать на панели инструментов.

Установка настроек печати производится в диалоговом окне Параметры страницы, вызываемого из меню Файл.

Можно установить: размер бумаги, ориентацию, размеры полей, поместить дополнительную информацию в верхний и (или) нижний колонтитулы (рис. 1.46).

Рис 1.46. Задание параметров страницы для печати

Напечатать страницу, предварительно настроив печать, можно через позицию Печать меню Файл (рис. 1.47).

Рис 1.47. Печать страницы

8.5. Как запомнить адрес сайта в папке «Избранное»

Если в меню Избранное выбрать пункт Добавить в избранное, появляется соответствующее диалоговое окно. В поле Имя будет указано имя активной страницы (оно извлекается из заголовка окна браузера).

Например, если загружена первая страница сайта Роботландии, то в поле Имя будет записано «Роботландия» (рис. 1.48).

Рис 1.48. Формирование закладки на сайт Роботландии

В дальнейшем ссылки из раздела «Избранное» (они называются закладками) могут быть использованы для перехода на сайты.

Продолжение читайте, пожалуйста, в следующих номерах

---

^* Продолжение. Начало читайте, пожалуйста, в номере 19, 20–2008.