|
|
|
|
|
 |
|
|
Web-пространство — это множество сайтов в Интернете. |
|
|
|
На этой странице:
Самые востребованные сервисы Интернета
Сайт, подобно бумажной книге состоит из страниц. Но это особые страницы, их листают при помощи гипертекстовых ссылок — чувствительных областей на экране. При этом щелчок на ссылке может открыть страницу текущего сайта или, так же легко, увести на страницу другого сайта. Совокупность сайтов в Интернете называют гипертекстовым пространством Интернета, WWW-пространством или Web-пространством, а чаще — просто WWW или Web. В текстах на русском языке употребляют слово Веб, реже — Паутина.
WWW — это аббревиатура английской фразы World Wide
Web — всемирная паутина. Web — последнее слово этой фразы,
переводится русским словом “паутина”. Сайты размещаются на
серверах Интернета, и в силу ячеистой топологии этой сети, они
действительно, напоминают узелки паутины, которую сплёл паук с
сомнительным состоянием духовного здоровья (нормальные пауки плетут
геометрически правильные сети, в Интернет-паутине царит ячеистый хаос).
Ниточки-паутинки в этой сети — это гипертекстовые переходы, по которым можно перебираться с сайта на сайт, путешествуя по Web-пространству. Сервер, на котором хранятся сайты, и который обеспечивает загрузку страниц по требованию клиента, называется Web-сервером (или WWW-сервером). Сервис WWW работает по прикладному протоколу HTTP (HyperText Transfer Protocol — протокол обмена гипертекстовой информацией). Для просмотра сайтов запускается специальная программа — браузер. Браузер копирует с Web-сервера файл с гипертекстовым кодом и строит по нему страницу на экране пользователя. Когда пользователь щёлкает на гипертекстовой ссылке, всё повторяется сначала: браузер копирует с сервера код новой страницы и строит её на экране. Понятие сайтаВася. С электронной почтой мы познакомились весьма подробно. Теперь хочется также основательно разобраться с Web-пространством Интернета. Петя. Это моя любимая тема! Web-пространство образуют сайты. Сайт (site — место, синонимы: Веб-сайт, Веб-ресурс) — совокупность гипертекстовых страниц (чаще древовидной структуры), представляющая предприятие или фирму (корпоративный сайт), школу (школьный сайт), частное лицо (личный сайт). Сайт может осуществлять торговлю (сетевой магазин), поставлять информационные услуги (поисковый сайт, библиотека, справочная система, список рассылки, обучающий сайт). Сайт определяется в Интернете своим адресом и имеет своего владельца (частное лицо или организация). В качестве адреса сайта указывают адрес его начальной страницы (стартовая страница, домашняя страница). Таким образом, сайт — это совокупность гипертекстовых страниц, объединённых одним доменным адресом (адресом сервера, на котором они расположены), темой, логической структурой, оформлением и авторством. По нижеприведённым ссылкам можно посмотреть локальные примеры сайтов (примеры открываются в новых окнах щелчком на изображении).
Гипертекстовые страницы, которые составляют сайт, записываются на специальном языке HTML (HyperText Markup Language — язык гипертекстовой разметки) — произносится “эйч-ти-эм-эл” (английская транскрипция) или “аш-тэ-эм-эль” (латинская транскрипция). Указания, записанные на этом языке интерпретируются браузером (приложением для просмотра сайтов). Вася. Значит, браузер выполняет программу, записанную на языке HTML? Это и есть интерпретация? Петя. Да, так и есть. Средства HTML позволяют указать браузеру, в каком виде он должен выводить на экран текст, графику, мультимедийные объекты, а также записывать на страницах гиперссылки. Пример кода HTML и вид страницы, которая строится по этому коду, показаны на рисунке:
HTML-разметка (в отличие, например, от Word-разметки) довольно терпима к различным аппаратным платформам, операционным системам (ОС) и мощностям компьютеров. Это позволяет строить на её основе сайты для Интернета, где разнообразие типов компьютеров и ОС очень велико. Сайты просматривают с помощью браузера — специального компьютерного приложения. Понятие гиперссылкиВася. Я знаю, что гиперссылка — это чувствительная к щелчку область на экране. Если щёлкнуть мышью на такой области, происходит гипертекстовый переход — браузер загружает другую страницу, которая может быть расположена на каком угодно сервере Интернета.
Петя. Чувствительной к щелчку областью может быть фрагмент текста (обычно он выделяется цветом и подчеркиванием), картинка или фрагмент картинки. Попадание мышиного курсора в область действия гиперссылки легко увидеть — он меняет свою форму на “указующий перст”. Часто вместо длинного слова гиперссылка говорят просто ссылка.
Вася. Значит, гиперссылкой может быть или фрагмент текста, или картинка. Петя. Не только. Ссылки могут образовывать на странице выпадающее меню или быть организованы в виде других элементов, привычных для обычного компьютерного приложения (например, в виде меню на кнопках). Переход на страницу с испытателями Как работает WebВася. Страница сайта кодируется на языке HTML. Это можно представить. Для просмотра сайтов используют приложение-браузер. Это понятно: просмотр любого документа на компьютере выполняется каким-либо приложением (компьютерной программой). Браузер строит на экране страницу, следуя указаниям, записанным на языке HTML. Логично. Но мне хотелось бы уточнить, как код страницы попадает в мой компьютер с сервера Интернета! Петя. Сначала разработчик создаёт сайт: кодирует гипертекстовые страницы на языке HTML. Код каждой страницы записывается в обычный текстовый файл (обычно с расширением htm или html). Потом сайт (файлы с его страницами) копируется на сервер Интернета (обычно по протоколу FTP).
Просмотр сайта выполняется следующим образом:
Вася. Когда я захожу на Яндекс, чтобы поработать с почтовым ящиком или найти информацию, то записываю в адресное поле браузера www.yandex.ru. Я не набираю имя протокола, не указываю имя страницы, а сайт всё равно загружается! Почему? Петя. Имя протокола браузер “угадывает” и дописывает автоматически. А имя страницы, когда оно не указано, “угадывает” сервер и отправляет браузеру страницу “по умолчанию” (обычно это стартовая, главная страница сайта). На разных серверах свои соглашения для имени страницы по умолчанию. Это может быть: index.htm, welcome.htm, start.htm. Это соглашение не так важно для пользователя, но его обязан знать разработчик, чтобы правильно именовать стартовый файл. Разнообразие браузеровВася. Ты говорил, что на твоём компьютере установлено не менее десятка браузеров. Зачем так много? Петя. Я же занимаюсь разработкой сайтов и мне важно знать, как выглядит мой продукт у пользователя на экране. Ведь у каждого свои предпочтения: одни без ума от Microsoft Internet Explorer, другие не понимают, как можно смотреть Web чем то отличным от Firefox. Вася. А какой браузер лучше на самом деле? Петя. Конкуренция заставляет разработчиков браузеров постоянно совершенствовать эти изделия, характеристики сближаются, выбор браузера определяется вкусом и привычками. В современные гипертекстовые документы всё чаще встраиваются средства мультимедиа — графика с высоким разрешением, звук, видео, различные спецэффекты, интерактивность (диалог с пользователем). Соответственно, разработчики браузеров добавляют в свои продукты средства поддержки этих новых гипертекстовых технологий. Однако есть браузеры, которые вообще не поддерживают графику, например, текстовый браузер Lynx. Голосовой браузер pwWebSpeek предназначен для незрячих людей. Такие люди не видят картинку, но получают о ней представление, услышав её словесное описание. Существуют браузеры, использующие тактильный ввод/вывод по азбуке Брайля. Некоторые пользователи работают с Web по телефону. Так, например, устроена система Web-on-Call Voice Browser. В последнее время входят в моду автомобильные бортовые компьютеры с интернет-связью. Поскольку смотрит пользователь на дорогу, к браузеру подключают речевой синтезатор. Становится привычным выход в Интернет и при помощи сотовой связи, разрабатываются соответствующие средства для работы с Web. Например, компания Opera Software выпускает браузер Opera Mini, предназначенный для мобильных телефонов. Из множества существующих браузеров наиболее популярным является Microsoft Internet Explorer (более 80% пользователей). Его популярность частично объясняется тем, что этот браузер входит в состав операционной системы Windows и поэтому не требует дополнительных средств и усилий по установке на компьютере. На время написания этих строк рейтинг браузеров выглядит так:
Ниже приведены статистические данные с сайта spylog.ru за период с 09.05.2006 по 06.07.2006.
Управление браузеромВася. Хотелось бы подробнее познакомиться с браузером, чтобы эффективно использовать это средство просмотра сайтов. Петя. Давай разберёмся с особенностями интерфейса браузеров на примере Microsoft Internet Explorer 6. Интерфейс Microsoft Internet Explorer 6 Стоимость просмотра сайтаВася. “Гулять” по Web-пространству очень увлекательно, но я слышал жуткие истории, когда такие прогулки оборачиваются огромными счетами от провайдера. Сколько стоит просмотр сайта? Петя. Разные провайдеры подключения к Интернету по-разному начисляют оплату за работу в Сети. Одни берут деньги за килобайты, другие — за время подключения к Интернету. В любом случае размер файла страницы (т. е. число килобайт) прямо пропорционален числу копеек, которые придётся заплатить за просмотр. Например, у нашего переславского провайдера на сервере botik.ru принято оплачивать трафик (количество информации). Приём (или посылка) одного мегабайта данных стоит примерно 2,5 рубля. Опытные web-разработчики стараются делать страницы размером не больше 40–50 килобайт (вместе с картинками и другими файлами, которые сопровождают файл с кодом страницы). При этом их заботит не столько кошёлек пользователя, сколько его способность ожидать окончания загрузки. Известно, что пользователи спокойно переносят 10-секундную задержку (а это и есть передача примерно 50 килобайт по скоростному аналоговому модему), после чего начинают проявлять нетерпение и покидают сайт, так и не загрузив его полностью. Вася. Просмотр 20 страниц по 50 килобайт обойдётся клиенту сервера botik.ru в 2,5 рубля. Получается дёшево! Кроме того, если не читать страницу от корки до корки, прокручивая экран, можно из 50 килобайт сэкономить килобайт 30-40! Петя. Ну, ну, Вася, не увлекайся! Запрошенная страница доставляется на твой компьютер полностью. Ты можешь вообще её не читать, плата за доставку уже включена в твой счёт программой-администратором на сервере провайдера. Вася. Ну и ладно. Всё равно, два с половиной рубля за 20 страниц — совсем немного! Можно спокойно смотреть сайты в Интернете, не переживая за кошелёк родителей! Петя. К сожалению, в сети мало сайтов, размер страниц которых укладывается в 50 килобайт. Если на странице есть картинки, анимация, музыка — она может быть очень “толстой”. Вася. Хорошо бы рассмотреть конкретные примеры. Петя. Вот пример аскетичной страницы поискового сайта Google (www.google.ru):
Файл с кодом страницы занимает 4 358 байт. Кроме того, на компьютер пользователя загружаются 4 картинки общим весом в 11 342 байт:
Таким образом, для отображения этой страницы на компьютер пользователя передаётся 15 700 байт. Страница загружается очень быстро, её просмотр обходится в 4 копейки по переславским ценам. А вот другой пример — сайт-галерея фотографий (www.photoregion.ru):
Общий вес страницы — 400 килобайт (файл с кодом страницы, файлы с образцами картинок, вспомогательные файлы). Просмотр стоит 1 рубль. Нам показалась интересной картинка с собачкой. Щёлкаем на её иконке и получаем страницу с более крупным изображением (название фото: “Я буду ждать тебя”, автор скрывается под ником VLDR):
Вес этой страницы — снова 400 килобайт, ещё один рубль. Картинка так понравилась, что хочется скопировать её версию для печати — около 2 мегабайт, 5 рублей. Таким образом, трафик с собачкой обойдётся в 7 рублей. Двадцать красивых животных — 140 рублей! Сайты предлагают копировать не только картинки, но и музыку, фильмы. Музыкальная композиция в формате MP3 весит около 10 мегабайт — 25 рублей, копирование фильма размером в 1 гигабайт обойдётся в 2 500 рублей. Вероятно, те финансовые страшилки, которые ты слышал, связаны как раз с копированием из Интернета музыки и фильмов. Или с деятельностью вирусов, которые могут создавать большой сетевой трафик без ведома пользователя. Устройство сайтаПетя. Давай рассмотрим устройство сайта на примере роботландского web-узла www.botik.ru/~robot. В окне браузера с загруженным сайтом, можно выделить следующие важные элементы:
(Выполните щелчок на этом изображении, чтобы увидеть копию сайта в “натуральном” виде.) Сайт состоит из страницКак и печатное издание, например, книга, сайт состоит из страниц. Страницы сайта — это файлы с расширением htm (html). Страницу сайта также называют документом. Как и книга, сайт имеет одну главную страницу (входная точка, домашняя страница, начальная страница). Именно эта страница указывается в качестве адреса сайта. Адрес роботландского сайта: http://www.botik.ru/~robot/index.htm Это и есть адрес главной страницы сайта. Обычно имя файла домашней страницы не указывают в адресе. Пишут так: http://www.botik.ru/~robot/ Или так (эта форма записи адреса почти не отличается от предыдущей, но, присмотревшись, можно заметить разницу): http://www.botik.ru/~robot Или даже так: www.botik.ru/~robot Когда имя HTML-файла в адресе не указано, сервер автоматически дописывает имя, стандартное для данного сервера. Чаще всего это имя index.htm, но может быть welcome.html, main.htm, default.htm. Для сервера botik.ru эквивалентны такие адреса:
http://www.botik.ru/~robot Ввод адреса http://www.botik.ru/~robot/main.htm вызовет сообщение об ошибке, т. к. файла main.htm в каталоге Роботландского сайта нет. К ошибке приведёт и адрес http://www.botik.ru/~robot/Index.htm — регистр в имени файла имеет значение. А вот адрес http://www.Botik.ru/~robot/index.htm сработает нормально — в доменном адресе регистр не важен. В отличие от обычной книги, страницы сайта редко просматривают по порядку. Благодаря гипертекстовым ссылкам пользователь переходит со страницы на страницу по контексту (по смыслу, по необходимости получить только ту информацию, которая относится к интересующей теме). Сайты с иерархической структуройИерархия — это зависимость по подчинению. Иерархическая структура напоминает дерево — от корня отходят ветви, которые также могут разветвляться. Такая структура используется для организации связей между страницами сайта чаще других структур (цепочка, таблица). Причина популярности иерархии кроется в особенностях человеческого восприятия:
Обычно у сайта есть специальная страница с названием “Карта сайта”, где иерархия страниц показана в виде системы вложенных списков. Вложенность отражает иерархическую схему сайта, а элементы списков являются гиперссылками на соответствующие страницы. Пользователь видит полное логическое строение сайта и может открыть любую страницу одним щелчком.
(Щелчок на этом изображении позволит увидеть карту на копии роботландского сайта.) Системы навигации по сайтуПеремещение по сайту (навигация) должно быть организовано понятно и удобно для пользователя. На правильно построенном сайте приёмы навигации едины для всех его страниц. Исключение составляет случай, когда сайт имеет самостоятельные подсайты — на них может быть использована собственная навигационная схема. На сайте Роботландии есть такой учебный подсайт — “Кухня Сидорова” (можно выполнить щелчок на картинке):
Простейшая система навигации на сайте “Кухня Сидорова”На сайте “Кухня Сидорова” использована простейшая схема навигации. Меню текстовых гиперссылок служит для перехода к страницам-потомкам.
Кнопки
Следует признать, что навигационные средства “Кухни Сидорова” не слишком удобны. Удобная навигацияНавигация является удобной, если на любой странице сайта можно легко ответить на три вопроса.
Где я?На этот вопрос помогают ответить следующие элементы сайта.
Куда я могу пойти?На этот вопрос отвечают: меню сайта, меню страницы, меню “хлебные крошки”, ссылки на странице (текстовые и ссылки-картинки), логотип (ссылка на начальную страницу сайта).
Где меню?Пользователь не должен испытывать проблем с доступом к навигационным элементам. Меню помещают в начало страницы, чтобы пользователю было удобно пролистывать сайт. Полезно меню и в конце страницы. Пользователь может продолжить путь, не прокручивая страницу в начало.
В крайнем случае, в конце страницы должна быть хотя бы ссылка вверх для перемещения к началу страницы без прокрутки. Если страница длинная, то ссылка вверх ставится после каждого раздела. Одноуровневая навигационная схемаКогда сайт небольшой и состоит из нескольких не подчинённых друг другу страниц, часто используется навигационная схема, содержащая одно меню (вертикальное или горизонтальное), повторяющееся на каждой странице в верхней её части. Горизонтальное меню присутствует и на концах страниц.
Следует отметить следующее.
Двухуровневая навигационная схема
На сайте со структурой:
часто используют навигационную схему с двумя меню — меню сайта (меню первого уровня) и меню текущей страницы (меню второго уровня):
На левой вертикальной полосе отображается меню текущей страницы. Если пользователь щелкает, например, на ссылке страница 12, он видит на экране содержимое этой страницы:
Такая схема хорошо подходит для двухуровневой иерархии. Меню первого уровня располагается вверху и внизу страницы (в него включается и переход на начальную страницу, то есть корень иерархии и его прямые потомки образуют меню сайта). Страница, которая является родителем текущей страницы, выделяется (на схеме выделение показано квадратными скобками). Меню второго уровня располагается на вертикальной полосе слева. Раздел, соответствующий текущей странице, присутствует, но не является ссылкой. Таким образом, в меню первого уровня входит корень (начальная страница) и его прямые потомки. В меню второго уровня собираются либо потомки текущей страницы (для страниц, входящих в меню первого уровня), либо страницы-сёстры (для потомков страниц первого уровня). Ниже приводится картинка-ссылка на пример сайта с описанной навигационной схемой:
Универсальная схема навигацииСайты только с двумя уровнями иерархии встречаются редко. Обычно уровней гораздо больше. В этом случае может использоваться описанная ниже навигационная схема. В левой полосе отображается меню текущей страницы, а чтобы пользователь не путался, в дополнение к главному горизонтальному меню отображается путь к текущей странице от страницы первого уровня или от корня гипертекстовой иерархии (“хлебные крошки”).
Пусть сайт имеет следующую структуру:
На странице 1 пользователь видит такую картинку:
Щелчок на ссылке страница 12 меняет вид в окне так:
Если теперь щёлкнуть на ссылке страница 121, окно примет вид:
Строка:
начало
показывает, что сейчас на экране — страница 121 (эта надпись — не является ссылкой), что верхние иерархические этажи этой страницы — страница 12, страница 1 и начало. Мы можем напрямую попасть на любой уровень в этой цепочке.
В схеме “хлебные крошки” для связи используется ориентированный знак типа
“ Таким образом, в универсальной схеме два меню на каждой странице. Первое меню — это меню сайта, оно состоит из начальной страницы и его прямых потомков. Второе — меню текущей страницы, его состав зависит от расположения текущей страницы в иерархии сайта:
В дополнение к меню сайта и меню текущей страницы, используют меню с “хлебными крошками”. Ниже приводится картинка-ссылка на пример сайта с описанной навигационной схемой:
Иногда обходятся без вертикального меню, располагая меню всех уровней горизонтально:
Верхняя строка схемы представляет собой меню из прямых потомков корня (сам корень, страница начало, также включён в это меню). Квадратными скобками выделен предок текущей страницы — раздел 4:
Вторая сверху навигационная строка представляет собой меню прямых потомков страницы раздел 4. Квадратными скобками выделен предок текущей страницы — раздел 4.1:
Третья сверху навигационная строка представляет собой меню прямых потомков страницы раздел 4.1. Текущая страница раздел 4.1.2 ссылкой в этом меню не является:
Последняя (четвёртая) навигационная строка показывает путь от корня дерева к текущей странице (“хлебные крошки”). Текущая (последняя) страница раздел 4.1.2 ссылкой в этом меню не является:
На следующем рисунке показано, какие страницы сайта доступны с текущей страницы раздел 4.1.2, и выделен пройденный пользователем путь от начальной страницы сайта.
Видим, что с любой страницы на любую другую в этой иерархии можно попасть максимум за три щелчка. Внутренние и внешние гиперссылкиВнутренняя гиперссылка связана с одной из страниц текущего сайта. Внешняя ссылка уводит пользователя на другой сайт. Внешние ссылки могут встретиться на любой странице сайта. Кроме того, их обычно собирают на отдельной странице (страница с названием ссылки). На правильно организованных сайтах внешние ссылки записываются явно — в виде сетевого адреса:
Внешнее происхождение ссылки здесь видно сразу. Кроме того, “открытую” ссылку пользователь может легко скопировать через буфер обмена операционной системы и сохранить на своем диске, если она ему нужна. Если адрес внешней ссылки “спрятан” в коде страницы, пользователь может покинуть сайт, не поняв, что произошло:
Ссылки на страницы текущего сайта (внутренние ссылки) оформляются без явного указания адреса этой страницы: Это ссылка на внутреннюю страницу Внутристраничные ссылкиГиперссылки могут перемещать пользователя не только между страницами одного сайта (или нескольких сайтов), но и внутри одной страницы. Внутристраничные ссылки внешне ничем не отличаются от ссылок, приводящих к загрузке новых страниц, и это часто путает пользователя. На “правильных” сайтах внутристраничные ссылки снабжаются соответствующими комментариями:
Внутристраничная ссылка является, конечно, внутренней ссылкой. Графические гиперссылки, альтернативный текстКроме текстовых гиперссылок, на сайте могут быть ссылки, оформленные в виде картинок. При наведении мышиного курсора на картинку-ссылку он, как и на текстовой ссылке, меняет свой вид на “указующий перст”. Проверьте это на следующей картинке:
Обычной практикой является придание логотипу функции ссылки на начальную страницу сайта. Графические гипертекстовые картыКартинка может обеспечивать не один, а несколько гипертекстовых переходов. Такие изображения на сайтах называют гипертекстовыми картами. Обычная картинка превращается в гипертекстовую карту при помощи специальной разметки, когда отдельным частям изображения в коде страницы назначаются разные гиперссылки. Проверьте это на следующей картинке:
Альтернативный текстКартинки на “правильных” сайтах обязательно сопровождаются альтернативным текстом. Альтернативный текст — это текст, который записывается на место картинки при её отсутствии на странице. В некоторых браузерах альтернативный текст “всплывает” на экран в момент зависания мышиного курсора над картинкой:
Альтернативный текст имеет особое значение, когда сайт просматривается в браузере, не поддерживающем графику, или если пользователь отключил отображение графики (картинок), чтобы сэкономить время и деньги. В таких случаях на экране вместо картинки изображается прямоугольник, альтернативный текст записывается внутри него: Многообразие действий браузера, задаваемых гиперссылкойВася. Как я понял, щелчок по гиперссылке может привести к очень разным действиям браузера: загрузке новой страницы, показу другой части текущей страницы или даже вызову почтовой программы! Петя. Ты прав! Я подготовил специальную страницу, которая демонстрирует многообразие действий браузера, задаваемых гиперссылкой. Переход на страницу с испытателями
|
|||||||||||||||||||||||||||||||||||||
|
Выход из читального зала | |||||||||||||||||||||||||||||||||||||
Самые востребованные сервисы Интернета — электронная почта
и сайты Интернета. Эти сервисы можно сравнить с бумажной почтой и
книгами. Но возможности электронных аналогов гораздо шире.
и
служат для движения по страницам-сёстрам. Кнопка
—
для перехода к родителю. Кнопка
—
для перехода к
основателю рода (на главную страницу).
