Совершенствование WEB - сайта предприятия ООО "РеалТрансТревел"

Первый подход следует традиции WWW (World Wide Web), согласно которой для разработки гипертекстовой страницы нужен только обычный текстовый редактор. Второй подход позволяет повысить эффективность выполнения программы и защищенность кода от несанкционированных модификаций. Как первый, так и второй способ опираются на объектно-ориентированный подход к программированию [22]..

Рассмотрим использование первого подхода. Создание динамического документа подразумевает использование языка сценариев JavaScript или VBScript. Более универсальным является JavaScript, поскольку он появился раньше и поддерживается как Microsoft Internet Explorer, так и Netscape Navigator. Несмотря на то, что оба производителя предлагают свои версии языка – различия в них не очень велики и заключаются в большинстве случаев в поддержке различных объектов. Оптимальной версией языка для поддержки всех основных возможностей свойств и методов объектов является JavaScript.

Для понимания того, каким образом функционирует механизм внедрения кода скриптов в HTML-документ, необходимо подробнее рассмотреть объектную модель документа.

В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволяет легко управлять объектами web-документа, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML. Как это все действует, можно быстро понять на следующем примере.

Рассмотрим простой HTML-документ содержащий два рисунка, одну ссылка и некую форму с двумя полями для ввода текста и одной кнопкой. С точки зрения языка JavaScript окно браузера - это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состояния. Внутри можно разместить документ HTML (или файл какого-либо другого типа).

Такая страница является ни чем иным, как объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. Объект document является очень важным объектом в языке JavaScript. К свойствам объекта document относятся, например, цвет фона для web-страницы. Однако гораздо важнее то, что все без исключения объекты HTML являются свойствами объекта document.

Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма. На рис.2.13 иллюстрируется иерархия объектов, создаваемая HTML-страницей из приведенного примера.

Рис. 2.13.  Иллюстрация иерархии объектов Web-страницы

 

Разумеется, необходимо иметь возможность получать информацию о различных объектах в этой иерархии и управлять ею. Для этого нужно знать, как в языке JavaScript организован доступ к различным объектам. Как видно, каждый объект иерархической структуры имеет свое имя. Следовательно, если требуется узнать, как можно обратиться к первому рисунку на HTML-странице, то необходимо сориентироваться в иерархии объектов. И начать нужно с самой вершины. Первый объект такой структуры называется document. Первый рисунок на странице представлен как объект images[0]. Это означает, что имеется возможность получить доступ к этому объекту, записав на JavaScript document.images[0]. Если же, например, нужно знать, какой текст ввел пользователь в первый элемент формы, то сперва необходимо выяснить, как получить доступ к этому объекту. И снова обзор начинают с вершины иерархии объектов.

Затем прослеживается путь к объекту с именем elements[0] и последовательно записываются названия всех объектов, которые проходятся. В итоге получается, что доступ к первому полю для ввода текста можно получить, записав: document.forms[0].elements[0].

А если требуется  узнать текст, введенный пользователем. Элемент, соответствующий полю для ввода текста, имеет свойство value, которое как раз и соответствует введенному тексту. Чтобы прочитать искомое значение нужно написать на языке JavaScript строку:

Name = document.forms[0].elements[0].value;

Полученная строка заносится в переменную name. Следовательно, теперь можно работать с этой переменной.

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

Для встраивания скриптов в тело HTML-документа используется контейнер SCRIPT.

Все данные возможности языка сценариев JavaScript, относящиеся и к языку VBScript, обеспечивают создание всех интерактивных элементов управления современных документов и справочных систем. 

 

 

 

 

 

 

 

2.7 Программная реализация сайта " сайта ООО "РеалТрансТревел"

Программная реализация сайта включает в себя:

1. Создание страниц сайта, основываясь на современных методах и средствах Web-дизайна.
2. Информационное наполнение страниц сайта.

При разработке Web-сайта использовались Dreamweaver MX 2004 v7.0, а также возможности встроенного языка скриптов JavaScript, а при оформлении каскадные таблицы стилей: CSS-стили. Программный код таблицы стилей приведен в Приложении Г.

При создании информационных страниц Web-сайта теги HTML использовались для следующих целей:

• использование гипертекстовых ссылок на информационные ресурсы;
• вставка графических элементов;
• форматирование текста;
• разбиение на абзацы и другое тексторазделение;
• использование заголовков различных уровней;
• представление текста в виде списков;
• создание таблиц.

 Принципиальная структура информационной страницы HTML-документа Web-сайта состоит из следующих основных частей:

• заголовок страницы (область метаиндексов);
• меню навигации;
• информационная область страницы.

Заголовок страницы (область метаиндексов) описывается следующими тегами:

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

<HTML><HEAD><TITLE>рекламное агентство</TITLE>

<META http-equiv=Content-Type content="text/html; charset=windows-1251">

Логотип туристической компании  ООО "РеалТрансТревел" (рис. 2.14) представлен в ячейки таблицы, что описывается следующим образом:

<TABLE width="95%" align=center>

  <TBODY>

  <TR>

    <TD width="19%"><IMG height=97 alt="туристическая компания"

      src="images/logotip.jpg" width=200></TD>

    <TD class=TD3 colSpan=2>

      <H2> туристическая компания компании  Real Tranc Travel"  </H2></TD></TR>

  <TR>

 

Рис. 2.14. Логотип туристическая компания компании  ООО "РеалТрансТревел"  в Web – сайте

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

С помощью метатегов в код Web-страницы можно поместить следующую информацию:

• краткое описание страницы;
• набор ключевых слов;
• интернет-адрес страницы, на которую будет выполнен переход по истечении некоего промежутка времени (задержка перед перенаправлением на другую Web-страницу);
• базовый адрес, от которого будут отсчитываться все относительные адреса (об абсолютных и относительных интернет-адресах;
• "родственную связь" между двумя страницами и тип этой "связи";
• текстовую кодировку страницы;
• некоторые другие данные, создаваемые и используемые, в основном, специальными программами, например популярнейшим Web-редактором Macromedia Dreamweaver MX 2004 v7.0.

Все метатеги помещаются в секции HTML-заголовка (тег <HEAD>) Web-страницы. Большинство из них создается с помощью одинарного тега <МЕТА> и трех его атрибутов. Тип метатега задается атрибутом NAME или НТТР-EQUIV, а сами данные — атрибутом CONTENT. Выше приведен метатег, задающий текстовую кодировку.

Любая таблица определяется в HTML с помощью тега <TABLE> . Все, что расположено между тегами <TABLE> и </TABLE> , считается таблицей.

Строки таблицы создавались с помощью тега <TR> и его закрывающего тега, а ячейки — с помощью тега <TD> и его закрывающего тега. Для того чтобы таблица из одной ячейки имела рамку, нужно задать ее ширину, установив атрибут BORDER=. Этими тегами были созданы: колонка с пунктами меню, а так же информационная область.

Пункты Меню навигации сайта созданы в виде ячеек таблицы с помощью тега <TABLE>, <TR>, <TD>. Пункты меню определены в программе следующим образом:

<TD class=TD2 vAlign=top width="19%"><BR><BR>

      <TABLE cellSpacing=4 width="80%">

        <TBODY>

        <TR>

          <TD><A href="index.htm">Главная</A></TD>

        </TR>

        <TR>

          <TD><A href="okompany.htm">О компании</A></TD>

        </TR>

        <TR>

          <TD><A href="spprodukt.htm">Образование </A></TD>

        </TR>

        <TR>

          <TD><A href="spyslug.html">Визы </A></TD></TR>

        <TR>

          <TD><A>

      href="mailto:tv@znak.ru/">E-MAIL</A></TD></TR></TBODY></TABLE><BR><BR>

      </TD>

Программный код меню представлен в Приложении А.

Информационная область создавалась с помощью тегов: <TABLE>,  <TBODY>,<TR>,<TD>. Размещение тегов приведено на рис. 2.15.

 Программный код страниц сайта для представлен в

 

Рис. 2.16. Экранная форма размещения кода при создании информационной области

 2.8. Тестирование и продвижение WEB-сайта предприятия ООО "Реалтранстревел"

 

Тестирование сайта предполагает собой выполнение следующих действий:

• проверка содержимого гиперссылок;
• определить продолжительность временных задержек;
• проверка работы при включенной работе с графикой и при отключении ее;
• проверка работы сайта на различных типах мониторов;
• проверка работы в различных браузерах.

После того как web-сайт создан, необходимо проверить правильность перехода со страницы на страниц. Браузеры разных фирм иногда по-разному интерпретируют  встречающиеся HTML-команды. У многих стоят различные версии, расширение мониторов, поэтому финальное тестирование положено проводить на различных компьютерах. Сайт должен одинаково хорошо выглядеть в различных браузерах, на разных мониторах и разрешениях. При этом выявляются и исключатся ошибки в программировании. В идеале тестирование, при разработки web сайтов, должно проводится несколькими людьми. Проверка всех ссылок изображений, информации, прежде чем выкладывать сайт в сеть необходимо все довести до ума, ведь сайт это лицо вашей организации.[23]

Что касается продвижения, то к основным его этапам можно отнести следующие:

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

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

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

Исследуется потенциал сайта для решения поставленных перед ним задач и преследуемых целей на базе анализа:

- уровня оптимизации страниц под ключевые запросы и видимости сайта поисковыми системами;

- статистики посещений вашего  сайта;

- сайтов конкурентов и степени  конкуренции на данном сегменте  рынка.

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

- какие мероприятия необходимы  для повышения уровня видимости  сайта, в частности по ключевым  запросам (оптимизация сайта);

- какие изменения в контент, а возможно, и в структуру сайта  необходимо внести для того, чтобы  повысить usability сайта, и для конвертации  посетителя в клиента;

Аудит сайта — лишь начало глобальной работы по его продвижению. На основе аудита сайта можно проводить оптимизацию сайта под поисковые запросы.

 Поисковая оптимизация сайта.

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

К мероприятиям по поисковой оптимизации сайта, которые проводят SEO специалисты, можно отнести следующие:

 — внесение коррективов на  страницы сайта (изменение различных  тэгов заголовков);

 — работа с текстами на  страницах сайта;

 — внутриссылочное ранжирование (работа с ссылками);

 — внесение дополнений, возможно, новых страниц сайта и др.;

 — создание SEO-карты сайта;

 — подготовка пакета ссылок  для сайта с целью последующего  обмена.

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