Веб-дизайн и поисковая оптимизация

Создание "схемы проезда" на сайте

На любом сайте, представляющем какую-либо организацию, есть страница контактов. На ней, кроме адреса, телефонов и других реквизитов, обычно приводится схема проезда, которая, по мнению создателей сайта, должна облегчить потенциальным заказчикам этот самый проезд. К сожалению, во многих случаях "схема проезда" только усложняет задачу перемещения из пункта А в пункт В из-за неудачно выбранного способа показа карты проезда.

Рассмотрим варианты создания схем проезда на сайте. Естественно, первоисточником схем служат сервисы Яндекса, Гугла и аналогичные им карты местности из интернета. Там мы находим нужную область и снимаем скриншот с экрана монитора для дальнейшего размещения изображения на сайте. О том, как это сделать, можете посмотреть в статье "Скриншоты - снятие и подготовка для Web".

После размещения такой карты на сайте вы сразу подпадаете под действие статьи 1301 ГК РФ о нарушении авторских прав, и создатель данной карты (правообладатель) может требовать от нарушителя, то есть вас, выплаты компенсации в размере от 10000 рублей до 5 000 000 рублей. Если вас это радует, то "карты вам в руки". Однако рекомендую все же немного "поработать карандашом" в фоторедакторе.

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

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

 1. На сайте даётся небольшой фрагмент карты с указанием вашей конторы, щелчок по которому приводит на картографический сервис, где можно масштабировать изображение и выбирать пути проезда. В интернете можно найти много сайтов, предлагающих услуги поиска по карте. В качестве оплаты эти фирмы обычно просят разместить ссылку на их сайт. Хороший бесплатный инструмент показа карт на сайте с масштабированием и перемещением предлагает Яндекс в своем конструкторе - API Яндекс.Карта.

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

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

 3. Третий вариант, на мой взгляд, самый оптимальный, - это размещение на страничке контактов нескольких карт разного масштаба, по которым пользователь сможет соринтироваться. Для этого удобно использовать так называемую плавающую рамку, разновидность фрейма, создаваемую тегом <iframe>. Удобство плавающей рамки в том, что её содержимое можно менять, не уходя с открытой страницы сайта.

Рассмотрим несложный пример. Покажем несколько разномасштабных схем проезда к вашей фирме с помощью тега <iframe> следующего вида:
<iframe src="map/01.html" width="700" height="500" scrolling="Auto" frameborder="0" >К сожалению, Ваш браузер не поддерживает технологию iframes. Пишите письма!</iframe>.

Рис.1. Вариант оформления "схемы проезда"

На всякий случай привожу код второй из четырех страничек с картой. Отличие их только в ссылках и изображениях:
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><a href="01.html">&lt; уменьшить</a> | <a href="03.html" >увеличить &gt;</a><br clear="all"> <br />
<img src="map02.gif" alt="Схема проезда" width="650" height="425"></td>
</tr>
</table>

Конечно, все странички, открывающиеся во фрейме, вы можете посмотреть (и скопировать для бытовых нужд) прямо на сайте, введя соответствующий адрес. Например, для той же второй страницы это http://www.seomark.ru/images/map/02.html.

Карты с разным масштабом будут открываться в окне фрейма при щелчке по ссылкам уменьшить / увеличить. Таким образом, мы даём схему проезда, масштаб которой пользователь может менять по своему усмотрению. Карты, размещаемые в плавающем фрейме, могут быть любыми, но их размер не должен превышать установленный для окна в теге <iframe>. В рассмотренном примере для "оживляжа" дополнительно использована простейшая gif-анимация стрелки.

4. Если для поиска вашей конторы достаточно двух изображений, то можно воспользоваться простейшей конструкцией JavaScript. При наведении указателя мыши на карту (onMouseOver) она замещается другой, более крупного масштаба (эффект экранной лупы), а при выходе указателя из зоны изображения (onMouseOut) возвращается первая карта - рис.2:

Рис.2. Схема проезда с "лупой"

Обратите внимание, что для корректной работы JavaScript в теге изображения указан атрибут name="map":
<img src="images/map/map01.gif" name="map" border="0" width="650" height="425" alt="Схема проезда" onMouseOver="document.map.src='images/map/map04.gif';" onMouseOut="document.map.src='images/map/map01.gif';">

5. Если вы не хотите размещать несколько вариантов карт, то можно использовать одну, а перемещаться по ней посетитель сможет колесом прокрутки мыши (колесо удобнее нажать) или с помощью лифтов (ползунки снизу и справа картинки). В этом случае размер карты может превышать размеры фрейма, а в его атрибутах не забудьте проконтролировать, что установлено scrolling="Auto" - рис.3:

Рис.3. Вариант оформления "схемы проезда" с прокруткой

6. Шестой, самый трудоемкий и финансово затратный вариант - привлечение художника для создания "схемы проезда" или самостоятельное творчество в Photoshop. Тут уж ваша фантазия поможет сделать самые точные и красивые карты проезда. "Бюджетный вариант" такого решения вы можете посмотреть на схеме проезда к моей фирме.

В дополнение к схеме проезда можно указать номера маршрутов общественного транспорта и ближайшие его остановки. Неплохо смотрится в дополнение к карте проезда и картинка со спутника Google. Особенно хорошо при этом просматривается упомянутая выше статья 1301 ГК РФ о нарушении авторских прав...

23.02.2010 г.,
обновлено 20.02.2011г.

Ещё статьи по теме "Полезные мелочи веб-дизайна":
Создание формы обратной связи на сайте
Создание иконки для сайта
Создание фона для сайта
Вывод текущей даты на сайте
Ключевые слова и продвижение сайта
Веб-дизайн, поисковая оптимизация и продвижение сайтов в интернете
Сжатие фотографий для интернета и электронной почты