Тема: “WEB - дизайн. Структура WEB - сайта в Интернете. Язык программирования WEB - документов”

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

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

1. Планирование и формирование бюджета.

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

2. Клиентура - два вида покупателей

В упрощенном варианте всех пользователей Интернет можно разделить на “охотников” и “наблюдателей”. Может быть и смешанный тип. К каждому потребуется разработать адекватный маркетинговый подход.

“Охотники” часто пользуются различными программами поиска. В случае поиска CD пользуясь ключевыми словами “компакт” и “диск”.

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

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

- создать связи с внешними страницами. Если магазин продает CD, стоит создать прямые и обратные связи с узлами Интернет, имеющими отношение к музыке;

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

3. Дизайн сайта - разработка структуры, графического дизайна и программной части веб-ресурса.

4. Процесс совершения покупки ("shopping experience").

5. Обработка заказов и онлайн-платежей.

6. Хостинг.

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

• стоимость доменного имени в зоне .info 197.28 грн. За 2 года (в США 45 у.е. за 5 лет);
• хостинг: 385 грн. в 1 год. ( в США хостинг дешевле).

7. Выполнение заказов.

8. Послепродажное обслуживание.

9. Сбор и обработка информации.

10. Удержание покупателей (превращение в постоянных клиентов).

Основные факторы, воздействующие на совершение покупок в онлайн- магазине:

• медленно загружающийся сайт электронного магазина – 40%;
• сообщение об отсутствии товаров на складе – 31%;
• медленная доставка товаров – 30%;
• невозможность проследить собственный заказ – 25%.

Требования к информационному наполнению WEB – сайта:

• полная, свежая отобранная информация;
• еженедельные или ежемесячные обновления информации. Если товар не изменяется или редко изменяется, должна меняться сопутствующая информация;
• подписка на список рассылки - на усмотрение покупателя. Данные в списках рассылки должны быть крайне информативны и сжаты, не доставляйте им лишних забот и затрат. Лишняя электронная почта оставляет неприятное впечатление;
• учёт поясного времени: выгодное предложение, скидка, не должны предлагаться в неактивное время суток. Отображайте на WEB – странице пометку о часовом поясе;
• многоязыковость предоставляемой информации, расширяющая число покупателей и потенциальных клиентов;
• сервисная поддержка, действующая обратная связь программами реального обмена информацией (ICQ), по телефону, электронной почте.

• увеличение посещаемости (обеспечивает повторные посещения);
• распространение в сообщениях электронной почтой и конференциях информации об удачном WEB – дизайне и информационном наполнении;
• интерес и формирование группы информированных потребителей, готовых к покупке.

Примерный план информационного наполнения сайта по продажам:

• страница должна уместиться на экране пользователя. Большинство пользователей видят ваш web-дизайн на экране с разрешением 640 на 480 и лишь 10% используют экран с разрешением 1024 на 768;
• совместимость HTML - кода для более 90% пользователей Microsoft Internet Explorer и лишь 10% используют для этих целей Netscape Navigator и другие браузеры;
• новые (например, великолепный тэг <MULTICOL> -"многоколоночный" текст) языка HTML распознаются пока еще не всеми обозревателями Internet;
• WEB – сайт должен поддерживать несколько кодировок;
• продвинутые апплеты Java иногда не распознаются даже самыми продвинутыми обозревателями Internet, а потому просто раздражают посетителей;
• длинные бегущие строчки уже не удивляют;
• используйте только безопасную палитру с 256 цветами;
• подпись под картинкой. Используйте для этого альтернативный текст тэга <IMG>. Профессионалы встраивают под этот тэг даже большие текстовые абзацы;
• горизонтальные прокрутки, снижают восприятие информации;
• если документ больше 60-80 кБайт, разбейте его на несколько частей, каждой из которых нужна отдельная ссылка. Ограничьтесь 100 килобайтами графики и распределите их на все страницы;
• цвет ссылки, которую посетили. Цвет фона посещенных ссылок отличается от других и видимая. Ссылки должны быть написаны только маленькими буквами. Не все пользователи Internet работают в Windows;
• роботы загружают 200 строк гипертекста исходя из мета - тэговой информации, разместите информационную суть сайта в них.

Термин HTML (HyperText Markup Language) дословно: "язык маркировки гипертекстов", а сам термин означает - язык для работы с гипертекстом. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. Известны спецификации 2.0, 3.0, 3.2 и 4.0.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional //EN"

"http://www.w3.org/TR/REC-html40/ loose.dtd">

<HTML>

<HEAD>

</HEAD>

<BODY>

</P>

</BODY>

</HTML>

Браузеры игнорируют любой текст, помещенный между <!-- и -->. Это удобно для размещения комментариев. <!-- комментарий -->

<META NAME="description" CONTENT="Курс по HTML"> - Краткое содержание документа для использования поисковыми системами, разумно ограничить 200 (всего 1000 знаков). Данный параметр позволяет показать поисковой машине информацию по документу.

<META NAME="keywords" CONTENT="Интернет, HTML, WWW, гипертекст"> -

<META NAME="Author" CONTENT="Ivanov"> - Авторская информация.

<META NAME="Generator" CONTENT="Homesite 4.0"> - Программное средство создания HTML-документа.

<META NAME="Robots" CONTENT="NOINDEX,FOLLOW - Управление индексацией страницы для поисковых роботов. Возможные значения:

• ALL
• NONE
• INDEX
• NOINDEX
• FOLLOW
• NOFOLLOW

Между флагами <H1> и </H1> располагается текст, который программа просмотра выводит крупным и/или жирным шрифтом. Заголовок кратко описывает содержание раздела, которому он предшествует. Информация из заголовка может использоваться агентами пользователей, например, для автоматического построения оглавления документа.

<H6> ... </H6>

Непарные метки вводятся без тега закрытия, а некоторые (так называемые &-последовательности) к тому же должны вводиться только строчными (маленькими) буквами.

<BR> - Эта метка используется, если необходимо перейти на новую строку, не прерывая абзаца. Такая операция позволяет структурировать документ, и просто необходима при публикации стихов.

<HR> - Метка <HR> описывает горизонтальную линию. Может дополнительно включать атрибуты SIZE (задает толщину линии в пикселях), WIDTH (определяет размах линии в процентах от ширины экрана). Например:

<HR SIZE=2 WIDTH=100%><BR>

<HR SIZE=4 WIDTH=50%><BR>

<HR SIZE=8 WIDTH=25%><BR>

<HR SIZE=16 WIDTH=12%><BR>

Поскольку символы "<" и ">" воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ "<", когда встречает в тексте последовательность &lt; (по первым буквам английских слов less than - меньше, чем). Знак ">" кодируется последовательностью &gt; (по первым буквам английских слов greater than - больше, чем).

Вообще говоря, &-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &-последовательностей.

HTML допускает два подхода к шрифтовому выделению фрагментов текста:

Все, что находится между метками <B> и </B>, будет написано жирным шрифтом.

Все, что находится между метками <U> и </U>, будет написано с подчеркиванием.

Текст между метками <I> и </I> будет написан наклонным шрифтом.

Текст, размещенный между метками <TT> и </TT>, будет имитировать пишущую машинку, то есть имеющим фиксированную ширину символа.

Разные браузеры толкуют одни и те же метки логических стилей по-разному. Некоторые браузеры игнорируют некоторые метки вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили.

<EM> ... </EM> - акцент.

<STRONG> ... </STRONG> - сильный акцент.

<CODE> ... </CODE> - для фрагментов исходных кодовых текстов.

<SAMP> ... </SAMP> - От английского sample - образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами.

<KBD> ... </KBD> - Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.

<VAR> ... </VAR> - Рекомендуется использовать для написания имен переменных.

Текст, расположенный между метками <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки <LI>. У метки <LI> нет парной закрывающей метки. Например:

Соответствует HTML - код:

<UL>

</UL>

Нумерованные списки вместо символов, выделяющих новый элемент, используются цифры. Например:

<OL>

</OL>

Элемент любого списка может содержать в себе целый список любого вида. Число уровней вложенности в принципе не ограничено. Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.

Вместо меток <LI> в списках определений используются метки <DT> (от английского definition term - определяемый термин) и <DD> (от английского definition definition - определение определения). Метки <DT> и <DD> не имеют парных закрывающих меток. Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку <DL COMPACT>.

<DL>

</DL>

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

Например: <A HREF="index.htm">Перейти к оглавлению</A>, что приведет к появлению выделенного фрагмента Перейти к оглавлению, при нажатии на который в текущее окно будет загружен документ index.htm. Если каталог не указан, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.

Например:

<A HREF="ftp://server/directory/file.ext">Выгрузить файл</A>

<A HREF="mailto:user@mail.box">Послать письмо</A>

Вставить изображение в HTML-документ очень просто. Для этого нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.

<IMG SRC="picture.gif">

<IMG SRC="picture.gif" ALT="Картинка">

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

<HTML>

<HEAD>

<TITLE>Пример 7</TITLE>

</HEAD>

<BODY>

<H1>Изображения </H1>

<P><IMG SRC="picture.gif"></P>

<P><A HREF="index.htm"><IMG SRC="picture.gif"></A></P>

</BODY>

</HTML>

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

• background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg);
• bgcolor - определяет цвет фона документа;
• text - определяет цвет текста документа;
• link - определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке;
• vlink - определяет цвет ссылки на документ, который уже был просмотрен ранее;
• alink - определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.
• Цвет кодируется:
• названием на английском языке: bgcolor= “white”
• последовательностью из трех пар символов: bgcolor=#FFFFFF. Каждая пара представляет собой шестнадцатеричное значение насыщенности заданного цвета, одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Разберем несколько примеров.

bgcolor=#FFFFFF

text=#000000

link=#FF0000

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

До настоящего времени мы имели дело с документами, в которых существовал только один "поток" текста. Таблица может помочь расположить текст в несколько колонок.

<HTML>

<HEAD>

<TITLE>Пример 9</TITLE>

</HEAD>

<TABLE BORDER=1>

<CAPTION><!--Это заголовок таблицы--></CAPTION>

</TABLE>

</BODY>

</HTML>

Каждая строка таблицы начинается с метки <TR> и заканчивается меткой </TR>. Метка <TR> может включать следующие атрибуты:

Каждая ячейка таблицы начинается с метки <TD> и заканчивается меткой </TD>. Метка <TD> может включать следующие атрибуты:

VALIGN - Устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: VALIGN=TOP (выравнивание по верхнему краю), VALIGN=MIDDLE (выравнивание по центру), VALIGN=BOTTOM (выравнивание по нижнему краю).