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

В бумажных документах вы ограничены использованием исключительно статических схем. Но Visio 2010 имеет в своём арсенале средства для создания интерактивности, что может быть полезно при электронном представлении схемы в презентации, на странице Интернет-сайта или корпоративного портала SharePoint. И даже этой областью всё не ограничивается. В данной статье мы попробуем разобраться с принципами построения интерактивных схем средствами Visio 2010.

Создание главной страницы блок-схемы

Прежде чем переходить к интерактивным способностям Visio 2010, давайте создадим простую блок-схему, иллюстрирующую процесс разработки веб-сайта. Для моделирования процессов обычно используется нотация IDEF0 , и в Visio 2010 предусмотрен шаблон для создания соответствующих моделей (группа Блок-схема , шаблон Схема IDEF0 ), однако мы не будем углубляться в дебри стандартов и выберем простую блок-схему.

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

Рисунок 1 – Быстрое добавление функциональных блоков

К сожалению, Visio 2010 не позволяет таким образом добавлять несколько элементов с одной стороны блока, поэтому придётся прикреплять их вручную. Перетащите фигуру Подпроцесса под одну из существующих, а затем воспользуйтесь инструментом Соединительная линия на Главной вкладке (см. рис. 2).

Рисунок 2 – Инструмент «Соединительная линия»

Когда вы подведёте курсор к блоку-родителю, Visio покажет узлы, от которых возможен вывод соединительной линии (см. рис. 3). Протяните стрелку к нужному узлу другого блока, чтобы создать связь.

Рисунок 3 – Связывание блоков соединительной линией

Программа сама нарисует нужный изгиб линии и будет поддерживать связь при перемещении фигур. Прямые углы, установленные по умолчанию, вас могут не устроить, поэтому разработчики предусмотрели возможность повлиять на поведение соединительных линий. Найдите на вкладке Конструктор кнопку Соединительные линии и укажите нужный тип (см. рис. 4). Эта настройка влияет на всю страницу.

Рисунок 4 – Изменение типа соединительной линии

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

Рисунок 5 – Изменение макета страницы

Других особенностей выделять не будем. Что получилось у меня, вы видите на рисунке 6.

Рисунок 6 – Главная страница схемы

Добавление связанных страниц

Теперь, когда у нас есть заготовка, мы можем перейти к установлению связей. Можно выделить два основных типа связывания:

1. Связь с продолжением страницы. При нехватке пространства листа для размещения элементов схемы вы можете поставить ссылку на продолжение схемы на другом листе. Применяется в основном в блок-схемах. Visio 2010 может автоматически расширять рабочую область, однако в некоторых случаях вам требуется уместить элементы в строго заданных рамках.
2. Связь с дочерним элементом. Если вы хотите показать подпроцесс или содержание объекта, можно задать возможность перехода по щелчку мыши. В нашем случае мы можем раскрыть суть блока Программирование скриптов более подробно на другой схеме. Это избавит от нагромождения фигур и внесёт элементы интерактивности в схему.

Несмотря на внешнюю разницу, принцип реализации обоих типов связи абсолютно одинаков.

Важное замечание. Инструменты связывания доступны только пользователям Visio Premium 2010. Редакции Standard и Professional не предоставляют таких возможностей.

Для связывания с продолжением страницы в блок-схеме есть специальный элемент Ссылка на другую страницу (см. рис. 7).

После того, как вы разместите фигуру на листе, вам будет предложено ответить на несколько вопросов (см. рис. 8).

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

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

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

Рисунок 9 – Первая часть схемы ссылается на продолжение

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

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

Рисунок 10 – Связывание со страницей. Задавайте информативные заголовки во избежание путаницы

Как оформить подпроцесс – решать вам. То, что получилось у меня, показано на рисунке 11.

Рисунок 11 – Подпроцесс «Программирование»

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

Рисунок 12 – Контекстное меню объекта со связью

Здесь появились две новые строки – Главная и Изменить гиперссылки (обратите внимание на форму множественного числа). Если вы выберете Главная , то просто осуществите переход по ссылке.

На рисунке 13 показано окно, открывающееся при выборе строки Изменить гиперссылки . Также его можно открыть, выбрав пункт Изменить в раскрывающемся списке Связать с существующим вкладки Процесс (см. рис. 10).

Самое очевидное действие здесь – Удалить . Оно пригодиться в том случае, если вы пожелаете избавиться от связи.

В строке Адрес указывается путь к связанному документу. Для текущего файла поле остаётся пустым. Вы можете выбрать не только схему Visio, но и любой другой файл на жёстком диске. Отмеченный флажок Использовать относительный путь для гиперссылки позволит создавать переносимый набор файлов. Чтобы сослаться на веб-страницу, введите соответствующий URL в строку адреса.

Субадрес – это страница документа. Можете вписать вручную, можете нажать кнопку Обзор и выбрать из списка доступных элементов (см. рис. 14).

Рисунок 14 –Указываем субадрес

Здесь же можно указать масштаб отображения выделенной страницы.

Вы можете создать несколько гиперссылок на одном элементе. Зачем это может быть надо? Например, вы хотите указать адреса сайтов компаний-производителей комплектующих системного блока. В этом случае нажимайте кнопку Создать столько раз, сколько пунктов вам нужно. Одну из ссылок можно сделать главной – По умолчанию . Как выглядит в действии многоссылочный объект, показано на рисунке 15.

Рисунок 15 – Набор ссылок одного объекта открывается списком

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

Выделите все фигуры, которые хотите переместить на новую страницу и на вкладке Процесс нажмите кнопку Создать из выделенного фрагмента (см. рис. 16).

Рисунок 16 – Кнопка создания подпроцесса

В результате будет создана новая страница с названием по умолчанию (например, Страница-2 ), на которой будет размещён выбранный фрагмент схемы, а на старом месте появится замещающая фигура с уже установленной ссылкой. Надпись на блоке подпроцесса будет совпадать с именем новой страницы, но, разумеется, вы в любой момент сможете изменить его.

Экспорт интерактивных документов

Безусловно, вам нужно иметь один экземпляр документа в родном для Visio формате VSD. Однако для распространения содержимого лучше использовать другой формат. Сохранение в статичном виде (PNG, JPEG, GIF) не оправдано, т.к. происходит потеря интерактивности. Выбор форматов, сохраняющих ссылки, в общем-то, невелик. Либо мы получаем веб-страницу, либо документ PDF. Только эти популярные форматы позволяют достичь сразу двух целей: доступности для большого количества пользователей и поддержания ссылочной интерактивности.

И в том, и в другом случае будут созданы файлы, которые не потребуют для просмотра интерактивных схем наличия на компьютере установленной программы Visio 2010. Но вам следует иметь в виду одну небольшую особенность: при экспорте в данные форматы теряются множественные ссылки с одного объекта. Сохраняется только первая из списка.

Заключение

Microsoft Visio 2010 Premium позволяет создавать схемы, наполненные динамикой, несколькими щелчками мыши. При желании вы сможете разработать сложную многоуровневую и многосвязную структуру, демонстрирующую процесс или объект во всех их проявлениях, а то и целую квестовую игру. Но не стоит увлекаться, слишком хорошо проработанная схема может не окупить вложенных в её создание усилий. Здесь, как и во многом другом, важен баланс затрат и детализации.

Самая крупная часть интерактивной схемы торгового центра - это поэтажная планировка. Пусть она будет подробной, но в то же время визуально лёгкой. Должно быть понятно, как располагаются отделы, где находится вход, парковка и другие объекты.

План каждого этажа ТЦ «Водный» выполнен в своей цветовой гамме. Названия крупных брендов подписаны сразу, а более мелких - появляются при наведении мыши. Подписаны входы с разных улиц, видно расположение парковки.

Дайте возможность выбрать этаж

Если расположить все поэтажные планировки торгового центра одну под другой, то схема получится очень объёмной. Выход такой - показывайте всегда план только одного этажа. Но при этом дайте возможность переключаться между планировками разных этажей.Самый простой вариант: написать «Выберите этаж: 1, 2, 3». А можно поступить интереснее и насытить этап выбор этажа небольшой дозой информации. Или вообще - превратить в игру.

На сайте ТРК «Весна» уже на стадии выбора этажа в двух словах написано, что именно на каждом из них находится: на нулевом - паркинг, на первом - кафе и гипермаркет, на втором - кинотеатр.

В шапке сайта ТРЦ «РИО» находится яркий интерактивный элемент для выбора этажа. Это первое, что видят пользователи. Фишка работает на привлечение внимания к разделу с планировкой лучше, чем обычная текстовая ссылка.

Подпишите названия отделов

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

Дайте краткое описание магазинов

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

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

На сайте ТРЦ «БОШЕ» логотипы появляются во всплывающих окошках по клику на соответствующую ячейку на карте.

На сайте ТРК «Атмосфера» логотипы появляются по наведению на отдел.

Хитро поступили на сайте ТК «Центральный». На общем плане сразу выводится подробное описание отдела в правом блоке. При этом карта остается компактной.

Добавьте строку поиска

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

Разбейте отделы на категории

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

Товары «Аэропарка» сгруппированы не только по типам, но и по гендерной принадлежности. Бренды выбранной категории подсвечиваются на планировке, и дополнительно выводится их количество на каждом этаже.

На плане ТЦ «Кит» магазины из одной категории обозначены одним и тем же цветом. В блоке со списком категорий показаны названия входящих в них брендов.

На плане ТРЦ «Планета» банковские услуги обозначаются голубым цветом, спортивные товары - синим, электроника - красным и т.д.

Отделы одного типа в ТЦ «Омский» обозначаются красными маркерами.

Карта ТК «Савёловский» начинается с отдельного плана четырёх крупных центров: модного, детского, компьютерного и мобильного. При наведении на любую из категорий выводится количество магазинов внутри неё.

Добавьте значки инфраструктурных объектов

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

На плане ТРЦ «Радуга Парк» можно включить и отключить слой со всеми информационными значками.

Значки на планировке ТРЦ «Афимолл Сити» появляются по наведению одну из голубых пиктограмм вверху слева.

На карте ТРЦ «Радуга» показаны не только эскалаторы, гардероб и туалеты, но и в мельчайших деталях прорисованы фонтаны, клумбы и скамейки. Так посетителям молла удобно будет договориться о встрече у любого из этих знаковых объектов.

Администрация ТЦ «Capital Mall» не скрывается от посетителей. Её расположение указано на плане.

Расшифруйте условные обозначения

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

Обозначьте входы в торговый центр

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

Укажите расположение и стоимость парковки

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

Московское метро меняется. Желающий представить себе схему, скажем, 1945 года без проблем соберёт данные из открытых источников; остаётся вопрос с представлением результата, - не на круговой диаграмме же его показывать. В статье я расскажу об основных шагах в создании proof-of-concept сервиса , позволяющего показать схему метро, например, на 1 мая 74 года (слева) или станции с глубиной заложения больше 30 метров (справа) .

1 совет

Сохраните схему как картинку, задайте невысокую прозрачность и расположите её под нашим svg-холстом, которому задайте такие же размеры. Это упростит расстановку станций.

Получим что-то вроде этого

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

2 совет

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

Линии

Что же такое линия? Это набор отрезков между станциями. У нас есть координаты, индексы и линии станций - а значит мы легко нарисуем отрезки. Пройдёмся по станциям и будем руководствоваться следующей логикой для каждой из них: если есть станция той же линии, но с индексом старше на единицу, то рисуем между ними сегмент.

Вот наш промежуточный вариант

Переходы

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

Названия станций и подложка

Отобразим названия и выровняем текст с помощью свойства text-anchor . Способа осуществить перенос строки, кроме как созданием дополнительного элемента, к сожалению, нет.

Подложку текста сделаем обычным полупрозрачным прямоугольком. Размеры и координаты текста мы получим с помощью getBBox .

3 совет

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

Перекрашиваем

Я выбрал цвета по умолчанию для станций как цвета их линий. Но что, если мы хотим перекрасить всё по произвольному градиенту? Это не так сложно как может показаться.

Мы имеем произвольный градиент от одного цвета к другому, который для удобства берём в каналах, значение станции (например, глубину заложения 23 метра) и максимальное и минимальное возможые значения (0 для наземных станций и 80 для самой глубокой «Парк Победы»). Посчитаем процентное соотношение значения станции к разности крайних значений и полученное отношение применим к разности значений по кажому каналу. Вот он наш цвет.

Остальные элементы на странице покрасим градиентом, у нас есть координаты и цвета станций - а это всё что нужно.

Фильтруем

Здесь тоже нестрашно. Проверим, находится ли значение станции в выбранном диапозоне и спрячем станцию, если нет. Когда разберёмся со станциями, поймём, что делать с остальными элементами: если станция спрятана, ни название, ни переход к ней, ни отрезок ветки не должны быть отображены.

4 совет

Используйте свойство visibility, так как opacity хоть и спрячет элементы, но оставит их выделяемыми и кликабельными.

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

Остаётся настроить понравившийся вам range slider. По определенным причинам я написал свой. Ленивым адекватным людям посоветую, например, этот .

Масштабируем и двигаем

Ответственность за это возьмёт на себя свойство viewBox . Ребята из «Микрософт» написали с примерами. Для перехвата скрола я использовал jQuery Mousewheel . Признаться, не самая тривиальная задача, так как при изменении масштаба нужно учитывать сдвиг относительно изначального положения с соответсвующим зуму коэффициентом.

Почти всё

Я использовал модульную архитектуру (вышло где-то полтора десятка модулей) , в помощь взял Snap.svg . Данные подгружались динамично, просчитывались и, так как часть вещей была сделана с помощью (я использовал jquery, так что их взял оттуда же) , я даже смог добавить нехитрый прогресс бар пока всё загружается .

Радость длилась, пока я не решил зайти с телефона… На весьма неглупой lumia 1020 сервис грузился дольше, чем пол минуты. Я же абсолютно забыли о цене манипуляций с dom. У нас, на секунду, больше тысячи элементов! Да и манипуляции с viewBox на мобильном устройстве не работали нормально.

Исправляем недочёты

С клиента на сервер

Волевым решением переносим логику на сервер и кешируем выдачу, чтобы не считать каждый раз. Теперь можно отказаться от Snap.svg на клиенте!

А, нет, нельзя

Самописный генератор градиентов для svg весил всего ничего и был изящен, но иногда не срабатывал: к некоторым элементам не применялся ни один из градиентов, только цвет. В то же время с другими элементами градиенты работали абсолютно нормально. Устав от «чёрной магии» я вернул библиотеку в строй. Всё же я пишу доказательство работоспособности, а не «продукт».

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

Я поступил так

Начал с поиска библиотек (остановился на hammer.js) и даже ознакомится с документацией, но вспомнил про ТРИЗ. Генрих Альтшуллер определяет идеальный объект, как объект, которого нет, а его функция выполняется.

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

Что принёс перенос в цифрах?

До

После

Выводы

Проблемы с «Mozilla Firefox»

В процессе работы выяснилось, что «Mozilla Firefox» переоптимизированна. В то время как другие ребята исправно отображают всю графику, «Mozilla» допускает пропуск рендера элементов, если элемент не виден пользователю - закрыт div"ом сверху или просто вне области видимости монитора. Как сознательный гражданин я добавил баг, который до сих пор неподтверждён, так как удовлетворить просьбу предоставить the simplest possible testcase у меня не получается, на малом количестве элементов всё работает нормально, а ссылки на проект, видимо, не достаточно.

Если это читает представитель «Mozilla»: Ребят, работает криво независимо от платформы (windows/mac) и версии (наблюдается и в старых версиях) , чесслово.

В качестве заключения

Несмотря на то, что в html5 осталась некоторая сырость, пришло время его использовать. Не нужно нагружать процессоры пользователей, добавляя на каждый второй сайт «модные» эффекты, которые ещё вчера были в рассылке для frontend-разработчиков.

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

Я не понимаю, почему тот же «Яндекс» не переведёт Я.Метро на новую официальную схему, которая будет работать везде; пользователям мобильных устройств ребята предпочитают показывать ссылки на приложения. Магазины (приложений) полны клиентов для соц.сетей и крупных сайтов и, на мой взгляд, есть в этом что-то неправильное.

UPD

Работа над каждым проектом сопряжена с несколько идеализированными ожиданиями, действительность же отрезвляет.
Я посчитал нужным вынести сюда несколько моментов:
1. Спасибо за обратную связь и первое на моей практике пожертвование. Для авторов (меня в частности) это действитель важно.
2. В существующем независимом виде проект обновляться не будет.
Я допустил много ошибок и согласен с рядом улучшений, которые можно сделать. Их реализация заставила бы отказаться от того, над чем я работаю сейчас, а непрекращающееся развитие метро сделало бы процесс нескончаемым.
3. Я постараюсь ответить на вопросы о реализации или предоставить существующую информацию, если таковые нужны. Спрашивайте в комментариях.

Теги:

• svg
• векторная графика

Добавить метки

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

«Интерактивный сервис» - ETV/Общее ТВ. Развлечения. Опция 2- Совместное использование станции защиты. Миссия развития. Секция 1. Технология Middleware от NDS. Мульти Платформенность/Устройство Что предлагается сейчас. VideoGuard Express: Новое. Хочу смотреть свой собственный контент и иметь функционал ПК на ТВ. Продукты NDS.

«Интерактивное общение» - Серверы интерактивного общения. Высокоскоростной доступ в Интернет с мобильного телефона можно осуществить по технологии GPRS. Серверы интерактивного общения (продолжение). Интерактивное общение с помощью ICQ. Вступление. Программа NetMeeting. Серверы интерактивного общения (конец). Однако «живой» разговор одновременно возможен только между двумя собеседниками.

«Уроки с интерактивной доской» - Что дает использование ИД? Создавать библиотеку изображений и шаблонов. 5. Неограниченные ресурсы. Представление информации с помощью различных мультимедийных ресурсов. Уточнение. Возможности ИД. Энциклопедии. Мультимедиа урок. 4. Эффективность подачи материала. 1. Интенсификация урока. Вопросы мониторинга 9-11 классов:

«Использование интерактивной доски» - «Шторка» в действии. 2. Обзор Интернет-ресурсов. Использование интерактивной доски при обучении математике. Снять видеофильм средствами записи интерактивной доски. Основные вопросы семинара. Дизраэли Бенджамин (английский государственный деятель и писатель). Здоровьесбережение. 4. Использование программного обеспечения интерактивной доски при конструировании заданий.

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

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

Если вы хотите создать новое событие со схемой мест, зайдите в ваш личный кабинет и нажмите "Создать событие" . Дойдите до третьего шага "Настройка участия".

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

На шаге "Настройка участия" нажмите на кнопку "Добавить интерактивную схему мест" внизу формы основной части страницы.

Вы увидите Редактор схемы мест .

Добавьте места на схему

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

При перемещении вы увидите создаваемые места, для удобства размер добавляемой группы мест обозначен в виде "Высота Х Ширина" рядом с курсором.

Отпустите левую кнопку мыши, чтобы закончить создавать места.

Перемещайте и удаляйте места, чтобы получить нужную расстановку

Нажмите кнопку "Изменить места" справа сверху.

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

Выделяйте те места, которые вы хотите переместить или удалить.

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

Чтобы удалить места, просто нажмите клавищу Delete или Backspace.

Пример

У нас имеются только что созданные места — зал размером 15 мест в высоту и 51 в ширину. Допустим у нескольких задних рядов нет по 4 боковых места, между местами нужно сделать проходы и отодвинуть первые ряды от остальных.

Назначайте местам стоимость

Чтобы назначить местам стоимость, выделите их, затем нажмите на кнопку "Задать тип билета" . В выпадающем меню выберите "Добавить категорию".

Назовите категорию билетов, например "Первые ряды" , укажите стоимость, если нужно напишите комментарий (участники увидят его на схеме). Лучше всего дублировать в комментарий стоимость билета.

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

Чтобы изменить стоимость категории мест, выделите места, нажмите "Задать тип билета", и нажмите на карандашик напротив нужной категории мест.

Пронумеруйте места

Чтобы пронумеровать места, выделите все места или часть, которую нужно пронумеровать.

Нажмите "Пронумеровать места" на панели сверху, в появившемся окне выберите способ нумерации и начальные значения, нажмите "Пронумеровать".

Делайте все так, как вам удобно

Масштаб

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

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

Положение холста

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

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

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