ОСНОВЫ ПРОЕКТИРОВАНИЯ WEB-СТРАНИЦ

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

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-узла сам будет обеспечивать быстрый доступ к узлу, при этом жела­тельна выделенная оптико-волоконная линия.

Фактически персональный 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 вполне конкретен и однозна­чен. Если вы знаете адрес страницы (в большинстве браузеров он выводится в строке состояния), то можете включить в свой доку­мент ссылку на этот адрес, чтобы ваши читатели могли быстро к Нему обратиться из созданной вами страницы.

Для того чтобы сделать свои 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 цветов, фоновые изображения — не более одного двух цветов. Частота смены видеокадров, количество цветов, раз­решение и длительность клипа — все это должно быть минималь­ным. Что касается видео, можно руководствоваться следующим практическим правилом: сжатый файл размером 3 Мбайт содер­жит достаточно видеоинформации, чтобы стоило дожидаться, пока он загрузится.

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

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

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

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

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

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

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. Вы быстро создадите таблицы и ячейки, а затем, если нужно, измените их размеры по своему усмотрению. Программа имеет простые команды для вставки видеофрагментов в мультимедийные страницы.

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-код приходится вруч­ную. Для того чтобы в полной мере использовать возможности такой программы, необходимо освоить язык разметки гипер­активных документов. Это позволит вам максимально гибко изме­нять внешний вид документов и применять новейшие специфи­кации 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. Спецификация того, что хочет за­казчик, поступает в работу к группе дизайнеров.

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

Для того чтобы он стал настоящим 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. Профессионалы пользовательских интерфейсов, умеющие создавать страницы, удобные и легкие в интерактивной работе. Если они еще и обладают опытом построения гипертекстовых систем, то смогут спроектировать пригодную структуру взаимодействия и навигационные средства. Традиционно в этой области первостепенное внимание уделялось построению интерактивных систем, легких в изучении и эффективных в использовании. Для Web-страниц легкость изучения все еще остается важным крите­рием, так как, если посетитель не сможет сообразить, что делать и как искать информацию, он быстро покинет узел. Однако при­влекательность становится в Web значительно более существен­ным фактором, чем в обычных интерактивных системах.

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

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

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

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

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

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

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

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

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

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

Не нашли, что искали? Воспользуйтесь поиском по сайту: