Проект «Перекрестки Петербурга» Текст научной статьи по специальности «Искусствоведение»

Заграничная Светлана Сергеевна

ПРОЕКТ «ПЕРЕКРЕСТКИ ПЕТЕРБУРГА»

Все мы любим наш замечательный город, но так ли хорошо мы его знаем, как нам кажется? Знаем ли мы достопримечательности, архитекторов, скульпторов? Всех тех, кто вложил неизмеримый вклад в то, чтобы наш город мог выглядеть именно таким, какой он есть сейчас? Это очень важные вопросы. Было бы очень интересно и полезно поучиться этому, самому поискать что-то по истории родного города, узнать много нового и интересного. Особенно это полезно школьникам, которые еще не так хорошо знают свой город.

Для этой цели был разработан проект под названием «перекрестки Петербурга». Цель этого проекта - помочь людям лучше ориентироваться в городе и узнать некоторые интересные вещи о различных культурных объектах.

Проект начинается со слов «Представьте себе такую ситуацию: вам нужно попасть в какое-то конкретное место в нашем замечательном городе Санкт-Петербурге. Вам называют нужную станцию метро и описышают это место. И вот Вы приезжаете на нужную станцию метро и отправляетесь в увлекательное путешествие...». В чем же суть проекта? Он похож на игру «лабиринт» - нужно ходить-бродить по городу в поисках заранее описанного здания, сооружения, скульптуры. Но при этом это не просто игра - это познавательная игра. По мере того как Вы ходите по улицам и перекресткам города, вы узнаете много интерес-

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

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

Хотелось бы рассказать о визуальной и технической частях проекта, то есть как

' мобой жжеНЛ с&оих поисков, 'и мофе&е посмо&ре&ь На кар&у...

1.П

И'ГШ

Рисунок 1.

языке HTML и Java Script. Сам проект открывается в любом браузере. Каждый шаг - это перекресток (см. рисунок 1). В центре страницы изображена фотография перекрестка, в четыре стороны идут стрелочки с указанием улиц. Нажатие на стрелку равноценно повороту в ту сторону и проходу по выбранной улице до следующего перекрестка. В правом верхнем углу каждой страницы расположен значок, нажав на который, Вы увидите карту местности. Когда Вы проходите мимо какой-

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

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

Точно так же любой ученик сможет создать свой проект, свою «прогулку по городу», используя мою работу в качестве образца. Можно создать прогулку по любому месту нашего города и не только. По любому городу. Это тоже очень полезное применение - создав прогул-

Рисунок 2.

Рисунок 3.

ку не в родном городе, пользователь сможет познакомиться и узнать много нового именно по культуре этого города.

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

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

улучшить и усовершенствовать таким образом, чтобы можно было сворачивать в любой закоулок и искать там интересующий нас объект.

В проекте есть тринадцать исторических справок по интересным достопримечательностям Васильевского острова. Причем, к одному и тому же памятнику архитектуры можно подойти с разных сторон. То есть нужно сделать в два раза больше ИТМЬ-страниц - по две страницы на каждый памятник. Примеры таких справок можно увидеть на рисунках 3 и 4.

Рисунок 4.

Таблица 1.

Стрелка вверх

Стрелка влево

картинка

Стрелка вправо

Стрелка вниз

Рассмотрим более подробно ИТМЬ-код одной из страниц-перекрестков (листинг 1).

В этом фрагменте указывается таблица стилей, которая подключается к странице. Такая таблица подключена ко всем ИТМЬ-страницам, чтобы весь проект был решен в одном стиле. Также здесь указана кодировка отображаемого на странице текста. При создании проекта выяснилось, что не на всех компьютерах отображается нужная кодировка, поэтому пришлось конкретно указать название (листинг 2).

Почти на всех страницах проекта показывается карта пути. В ИТМЬ-коде это отображается данной строчкой.

Еще раз обратимся к рисунку 1. Видно, что схематически нашу ИТМЬ-стра-ницу можно показать таблицей 1.

Теперь посмотрим, как это показать в ИТМЬ-коде. Стрелки вверх (вперед) и вниз (назад) я просто размещала посередине строки, причем при нажатии на эти стрелки мы переходим на следующий соответствующий перекресток (листинг 3).

А вот вторую строку таблицы 1 для удобства и для лучшего расположения на экране в ИТМЬ-коде я описала именно как таблицу (листинг 4).

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

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

Сам проект расмещен на диске к журналу.

Листинг 1 <head>

<link rel="stylesheet" type="text/css" href="table.css">

<meta http-equiv="content-type" content="text/html;charset=windows-1251">

</head>

Листинг 2

<a href="map.html"Ximg src=8.gif border=0 align=right alt="nocMOTpeTb карту"Х/а>

Листинг 3 <center>

<a href="down22.html">

<img src="sepx.jpg" align=absmiddle alt="snepefl" border=0X/a>

</center> // стрелка вверх (вперед)

<center>

<a href="up22.html">

<img src="HH3.jpg" alt="назад" border=0></a> </center> // стрелка вниз (назад)

Листинг 4 <table>

<tr><th colspan=5Xfont Б12е="+3"ХЬ>Большой пр. </font>3->29 линии BO</bX/thX/tr> <trXth width="5%"> <a href="right22.html">

<img src="лeвo.jpg" alt="нaлeвo" align=left border=0X/a> </th>

<th width="5%">2 и 3 линии BO к HeBe</th> <th width="45%">

<img src=photo/EPSN5162.jpg border=0> </th>

<th width="5%">2 и 3 линии BO к Среднему пр. </th>

<th width="5%"> <a href="left22.html">

<img src="npaBo. jpg" alt="нaпрaвo" align=right border=0X/aX/thX/tr> <trXth colspan=5Xfont size="+3"><b>Бoльшoй np.</font> 2->1 линии BO</bX/thX/tr> </table>

Рисунок 5.

Заграничная Светлана Сергеевна, студентка 4 курса математико-механического факультета СПбГУ.

© Наши авторы. 2006 Ourauthors, 2006.