Основы проектирования Web-страниц

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

327

HTML — это не язык программирования и не алгоритмический язык, это способ разметки гипертекста. Поэтому он и называется Hyper Text Markup Language — язык гипертекстовой разметки.

Возникает вопрос, почему нельзя взять из Word оформленный текст и вставить его в Интернет? По одной простой причине — Word для Windows не такой уж безоговорочный всемирный стандарт, как нам иногда кажется. Да и IBM-совместимые компьютеры вовсе не единственный тип компьютеров, подключенных к всемирной сети Интернет. И нет для них единого стандарта оформления.

HTML как раз и есть попытка создать единый стандарт для разного вида компьютеров: от IBM PC до карманных компьютеров. Базовые возможности HTML поддерживаются наиболее распространенными браузерами, такими как Internet Explorer и Netscape Navigator. Используя HTML, можно создать Web-страницу начального уровня, особенно если вы умеете рисовать, обладаете чувством меры и стиля.

Web-страница — это документ, созданный средствами HTML.

Проще всего для создания несложной Web-страницы использовать возможности текстового редактора MS Word. Начиная с версии Word-97 в программе предусмотрено сохранение документа в формате. Но одиночная Web-страница, не связанная ссылками с другими Web-страницами, в настоящее время почти не встречается. Обычно при создании сайта несколько страниц связываются между собой ссылками, образуя Web-узел. Значит, Web-узел — это связанная система Web-страниц, и, говоря о Web-странице, мы подразумеваем Web-узел, или сайт.

Выражаясь техническим языком, базовая страница (homepage) — это интерактивный Web-узел. Web-узел может быть малым (2... 3 с), средним (10... 20 с.) или большим (порядка 30 с. и более). Создавать Web-узел можно несколькими способами:

• самим пользователем средствами Word или специализиро-ванных программ;

• самим пользователем средствами стандартных шаблонов, пред-лагаемых провайдерами;

• сторонними организациями — специалистами по созданию

Web-узлов.

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

328

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

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

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

Существует множество редакторов Web-страниц, начиная от простенькой Web Workshop и кончая Front Page-2000 — программ, обладающих большими возможностями и почти таким же дружественным интерфейсом, как популярные текстовые и графические редакторы.

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

Всемирная паутина Web основывается на двух технологиях.

Первая, HTTP (Hypertext Transfer Protocol — протокол передачи гипертекстов), определяет набор правил или протоколов, используемых при взаимодействии компьютеров в Web. Вторая технология — это уже упоминавшийся язык HTML, позволяющий помещать в Web красиво оформленные страницы (с графикой, анимацией и форматированным текстом) и связывать их с другими Webстраницами. HTML по сути представляет собой набор меток, которые незаметны для читателей страниц, но при этом влияют на внешний вид документа и обеспечивают интерактивность. Если на странице присутствуют гипертекстовая ссылка, указывающая на другую страницу, или текст, набранный полужирным либо курсивным шрифтом, или картинка в формате GIF, то за всеми этими элементами стоят соответствующие метки. Web-конструкторы позволяют превращать текст и фафику в документы на языке HTML. Каждая страница в Web имеет свой адрес или URL. Подобно адресу дома на улице указатель URL вполне конкретен и однозначен. Если вы знаете адрес страницы (в большинстве браузеров он выводится в строке состояния), то можете включить в свой документ ссылку на этот адрес, чтобы ваши читатели могли быстро к нему обратиться из созданной вами страницы.

329

Для того чтобы сделать свои Web-страницы доступными для всех желающих, вы должны сохранить их на сервере вашего ISP (Internet Service Provider — провайдер Интернета) или на сервере провайдера коммерческих услуг и получить у провайдера адрес URL. После этого все пользователи Web смогут напрямую связываться с вашей базовой страницей.

Рекомендации по созданию Web-страниц. Для бизнеса очень важен маркетинг товаров и услуг, a Web является прекрасным местом для размещения рекламы. При разработке Web-страниц следует все хорошенько продумать заранее. Ведь вам нужно, чтобы Web-узел получился и содержательным, и интересным, это — визитная карточка вашей организации. Приведем некоторые рекомендации по созданию Web-страниц тем, кто собирается самостоятельно создавать свой Web-узел.

1. Никто не станет читать вашу страничку, если у вас будетидти сплошной текст. Чтобы оживить свой рассказ, используйте заголовки, виньетки и картинки. Умело сочетая эти элементы, можно получить очень симпатичные страницы. И не забывайте оставлять свободные поля и пробелы между абзацами, иначе страницы будут выглядеть громоздкими и неудобочитаемыми.

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

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

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

5. Помните, что на Web-страницах изображения должны иметьформат GIF или JPEG, звуковые файлы — формат WAV, а видео — формат AVI или Quick Time. Можно также использовать кадры (frames), которые позволяют обеспечить постоянное присутствие на странице какого-нибудь элемента, например логотипа или оглавления.

6. Не заполняйте свою страницу большими 24-битными цветными изображениями с высоким разрешением, детально проработанным фоном и полнокадровым видео, чтобы не остаться без посетителей. Загрузка такой страницы будет очень длительной, и посетитель страницы может не дождаться окончания загрузки вашей страницы. Лучше сделать попроще. Графические изображения — максимум 256 цветов, фоновые изображения — не более одного-

330

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

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

8. Для иллюстраций можно использовать изображения с купленных компакт-дисков или позаимствовать рисунки с Web-узлов, где есть бесплатные изображения. Некоторые авторы позволяют заимствовать изображения со своих Web-страниц, однако в каждом случае вам нужно в этом удостовериться. Так, компания Disney разрешает использовать свои иллюстративные материалы на персональных, некоммерческих Web-узлах при условии, что вы ссылаетесь на ее авторские права и указываете другие необходимые сведения.

9. Грамотность — один из признаков, отличающих культурногочеловека от некультурного, а Интернет — зеркало, в котором мы отражаемся такими, какие мы есть. Внешний вид сайта — это его дизайн плюс язык (стиль, форма, грамматика, лексика). Надо, чтобы разработчики сайтов строго соблюдали технологическую дисциплину: все, что предполагается выложить на Web-узле, предварительно должно быть подвергнуто тщательному грамматическому контролю — это касается и орфографии, и пунктуации, и стилистики.

10. Свою Web-страницу надо определить в Web-пространстве.Для этого обратитесь к своему поставщику услуг Интернета; большинство из них предоставляют клиентам место на своих серверах специально для этой цели.

Графические редакторы Web-страниц. Конкретная работа по созданию Web-страниц или Web-узла будет зависеть от того, какое именно программное обеспечение вы для этого выберете. Графические Web-редакторы позволяют компоновать страницу в режиме, близком к WYSYWYG («что видишь, то и получишь»), и формируют за вас весь код. Это очень упрощает работу.

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

ства, адекватные вашему возрастающему мастерству, то вам стоит обратить внимание на следующие программные продукты.

Front Page-2000. Front Page-2000 фирмы Microsoft позволяет стать настоящим Web-мастером. Этот пакет поддерживает все новейшие мультимедийные технологии работы с анимированной графикой, позволяет разрабатывать приложения и управляющие элементы ActiveX и Java. Кроме того, он предлагает большой набор модифицируемых шаблонов и множество оригинальных эффектов.

Эта программа, по интерфейсу напоминающая текстовый процессор, легко скомпонует текст и графические элементы, а все тонкости кодирования на языке HTML останутся для вас невидимыми. Front Page предоставляет превосходные инструменты для создания и редактирования страниц, обеспечивает отличный общий обзор проектируемого узла, позволяя упорядочить страницы и файлы, и облегчает публикацию в Web.

Начать работу по созданию узла вам поможет имеющийся в

Front Page готовый шаблон персональной Web-страницы. Программа облегчает и другие задачи, скажем, вставку иллюстраций в документ. Когда вы открываете файл, она автоматически преобразует графические файлы в формат GIF или JPEG. Редактор изображений позволяет применять фильтры для получения спецэффектов.

В Front Page есть средство для работы с кадрами. Вы можете выбрать один из готовых кадров с помощью мастера или создать свой собственный. Однако редактировать кадры не так-то просто. Программа включает очень удобные инструменты, которые позволяют встраивать в страницы дополнительные функции, в частности механизм поиска и средства обработки данных, вводимых посетителями. И наконец, программа оснащена отличным учебным пособием, включающим образцы документов.

Программа Front Page — один из самых известных пакетов, к тому же он довольно прост в применении. Особенно хорошо этот пакет взаимодействует с офисным набором Microsoft Office. Front Page, как и другие аналогичные пакеты, позволяет без труда создавать простые и удобные формы, позволяющие наладить обратную связь с посетителями вашей Web-страницы.

Visual Page. Visual Page (программа фирмы Symantec) — известный инструмент для создания Web-страниц, имеющий десятки готовых шаблонов с отличным дизайном и с легким уклоном в деловой стиль.

Программа работает с текстом, таблицами, иллюстрациями и кадрами. Из программ для создания Web-страниц у нее самые удобные средства манипулирования кадрами. Программа позволяет легко разделять и перемещать кадры, менять их размер. По мощности инструментов для оформления таблиц Visual Page не уступает пакету Front Page. Вы быстро создадите таблицы и ячейки, а

332

I

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

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

Home Page фирмы Claris. Помимо средств построения Webстраниц, заложенных в ее популярном офисном пакете Claris Work, фирма Claris предлагает специализированный пакет Home Page, предназначенный для подготовки к публикации Web-страниц. Хотя по мощности эта программа явно уступает Front Page, она тем не менее представляет собой мощный программный инструмент с интуитивным и удобным интерфейсом. Программа фирмы Claris, оформленная в виде текстового процессора, позволяет эффективно компоновать текст и изображения, создавать гиперссылки и работать с кадрами и таблицами.

Чтобы упростить работу новичкам, разработчики снабдили программу шаблонами, вам достаточно выбрать приглянувшийся и заполнить его. А по легкости манипуляций с кадрами эта программа в числе лучших.

Home Page включает довольно солидный набор более чем из

1000 изображений, значков, рамок, фонов и кнопок, но эта библиотека не идет ни в какое сравнение с обширной коллекцией изображений, входящей в WebDesigner фирмы Corel. В программе Home Page есть простые средства доступа к изображениям из ее библиотеки. Вы можете просматривать библиотеку, выбирать нужные изображения и с помощью мыши перетаскивать их на свои страницы. Если вы захотите воспользоваться какими-либо другими картинками, Home Page автоматически преобразует их в GIFформат.

В Home Page есть такие мощные средства, как построение таблиц с помощью перетаскивания в документ текста, в котором данные разделены символами табуляции. В программе имеется средство, показывающее, сколько времени посетителю придется ждать при данной скорости соединения, пока загрузится ваша страница. Кроме того, Home Page позволяет построить схему узла, чтобы вы могли посмотреть, как страницы связаны между собой. Хотя программе, возможно, недостает мастеров, которые имеются в Front Page, она все же оказывает некоторую помощь при переносе файлов на Web-сервер.

В целом богатые возможности Claris Home Page позволяют рекомендовать этот пакет начинающим пользователям.

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

333

такой программы, необходимо освоить язык разметки гиперактивных документов. Это позволит вам максимально гибко изменять внешний вид документов и применять новейшие спецификации HTML.

WebEdit Pro фирмы Luckman Interactive относится к HTMLредакторам. Ваш код изображается в главном окне, а рядом показано, как будет выглядеть готовая страница. Мастера WebEdit Pro помогают формировать рамки и заполнять Web-страницу дополнительными элементами.

Поскольку Web-узлы часто компонуются с использованием самодельных инструментальных средств, в этой области разработано немало условно-бесплатного и бесплатного программного обеспечения. Наиболее популярны программы Hot Metal Lite, Hot Dog и Home Site. По сравнению с коммерческими продуктами они сложнее в освоении, но зато их можно испытывать бесплатно.

Одно из основных достоинств редактора Hot Dog Professional фирмы Anawave Software — возможность перетаскивать изображения и гиперссылки с помощью мыши. Программа проверяет правильность вашего кода и помогает при публикации документа на сервере. Программа имеет эффектное внешнее оформление и позволяет создавать довольно качественные Web-страницы.

Индустриальная разработка Web-сайтов. Многие компании специализируются на создании и организации Web-узлов на основе предоставляемых клиентами схем и рисунков. Эти фирмы оказывают помощь в разработке дизайна фирменной Web-страницы. Впрочем, выбрать, какая из них подойдет именно вам, не так просто.

За последние несколько лет в российском компьютерном бизнесе сформировался сектор, представленный фирмами, именуемыми Web-студиями, специализирующимися на разработке сайтов. Лидерами среди Web-студий являются: студия Артемия Лебедева, Actis Systems Павла Черкашина, «Альтер Медиа» Льва Глейзера.

Прежде чем искать того, кто будет разрабатывать ваш Webузел, убедитесь, что вы знаете, как он должен выглядеть. Заказчики определяют функциональные требования к будущему Web-узлу и отвечают на вопрос, что фирме нужно отразить. Заказчики выступают как постановщики задач, или как говорят американцы — researcher или field researcher. Спецификация того, что хочет заказчик, поступает в работу к группе дизайнеров.

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

334

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

Для того чтобы он стал настоящим Web-сайтом, его нужно разместить в Web-пространстве и запустить процедуру сопровождения. Любой Web-сайт мертв, если он не обновляется, не подправляется, не развивается. Именно сопровождение и развитие сайта определяют его успех в Интернете.

Электронная коммерция — это еще один вид специализированной услуги в Интернете, ведь электронная торговля — это будущее торговли. При создании Web-страниц торгового предприятия, скажем универмага или универсама, компонента электронной коммерции вводится в Web-страницу. Но это относится к тем, кому есть что продавать.

Российская фирма Advanced Design Team (www.adt.ru) специализируется в области корпоративного Web-дизайна и связанных с ним технологических и маркетинговых решений. Их маркетинговая программа «Evolution» включает весь комплекс услуг Интернет-маркетинга: разработку маркетингового плана, создание новых Web-серверов и развитие уже существующих, локализацию международных серверов, полномасштабную рекламную раскрутку, хостинг и комплексную поддержку серверов.

Программа нацелена как на компании, только еще желающие выйти в Интернет, так и на уже представленные там. Для этого предлагаются четыре базовых пакета услуг: «Начальный» — для создания и раскрутки небольшого рекламного корпоративного сайта со стандартным дизайном, рассчитанный на 40... 100 посещений в день, ценой 500... 1500 долл.; «Крупный», подразумевающий создание оригинального дизайна узла, имеющего систему поиска, с числом посещений 100... 300 в день, а также «Обновление» и «Локализация».

Как выбирать проектировщиков WWW-узла. Если вы решили нанять фирму для проектирования Web-узла, что следует принять во внимание прежде, чем поставить подпись под контрактом?

Существует несколько различных типов консультантов по созданию Web-узла.

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

2. Профессионалы пользовательских интерфейсов, умеющиесоздавать страницы, удобные и легкие в интерактивной работе. Если они еще и обладают опытом построения гипертекстовых систем, то смогут спроектировать пригодную структуру взаимо-

335

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

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

Следует признать, что ни одна из рассмотренных профессиональных категорий полностью не подходит для проектирования Web. Что же делать? Лучше применить комплексный подход. Найдите специалистов с опытом реализации интерактивных программ, а также профессиональных знатоков пользовательских интерфейсов и рекламного специалиста или профессионала в области некомпьютерных коммуникаций. Но лучше найти Web-студию, в команде которой уже собраны все категории специалистов.

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

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

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

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

Завершая разговор о всемирной сети Интернет, хочется отметить следующее.

Интернет замечателен тем, что Сеть и ее сервисы стали широко распространены в жизни общества. Они оказались так хороши, что река информации потекла руслом Интернета.

336

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

Он предоставил замечательную возможность свободного общения без границ.

Контрольные вопросы

1. Что собой представляет структура Интернет?

2. Какие протоколы используются в сети Интернет?

3. Какие программы просмотра WWW (браузеры) вы можете назвать?

4. Перечислите основные протоколы Интернета.

5. Какие средства поиска существуют в Интернете?

6. В чем заключаются отличия поисковых систем от электронных каталогов?     ,

7. Как работает электронная почта?

8. Чем отличается FTP от IP-телефонии?   _;1

9. Какие средства общения предлагает Интернет?

•••V I

Глава 15