Предположим, мы работаем над долгим и сложным проектом, состоящим из нескольких этапов. Задача - наглядно показать всю хронологию работ по проекту, расположив ключевые моменты проекта (вехи, milestones) на оси времени. Примерно вот так:
В теории управления проектами подобный график обычно называют календарем или временной шкалой проекта (project timeline), хотя я также встречал еще один русскоязычный аналог -"лента времени". В любом случае, главное - не как назвать, а как построить. Поехали...
Шаг 1. Исходные данные
Для построения нам потребуется оформить исходную информацию по вехам проекта в виде следующей таблицы:
Обратите внимание на два дополнительных служебных столбца:
- Линия - столбец с одинаковой константой около нуля по всем ячейкам. Даст на графике горизонтальную линию, параллельную оси Х, на которой будут видны узлы - вехи проекта. В принципе, можно было бы использовать и полный ноль, но тогда график совпадает с осью X, что дает проблемы потом с настройкой внешнего вида диаграммы в Excel 2007-2010. Новый Excel 2013 нули воспринимает спокойно.
- Выноски - невидимые столбцы для поднятия подписей к вехам на заданную (разную) величину, чтобы подписи не накладывались. Значения 1,2,3 и т.д. задают уровень поднятия подписей над осью времени и выбираются произвольно.
Шаг 2. Строим основу
Теперь выделяем в таблице все, кроме первого столбца (т.е. диапазон B1:D13 в нашем примере) и строим обычный плоский график с маркерами на вкладке Вставка - График - График с маркерами (Insert - Chart - Line with markers) :
Убираем линии сетки, вертикальную и горизонтальную шкалы и легенду. Сделать это можно вручную (выделение мышью и клавиша Delete ) или отключив ненужные элементы на вкладке Макет (Layout) . В итоге должно получиться следующее:
Теперь выделите ряд Выноски (т.е. ломаную оранжевую линию) и на вкладке Макет выберите команду Линии - Линии проекции (Layout - Lines - Projection Lines) :
От каждой точки верхнего графика будет опущен перпендикуляр на нижний. В новом Excel 2013 эта опция находится на вкладке Конструктор - Добавить элемент диаграммы (Design - Add Chart Element) .
Шаг 3. Добавляем названия этапов
Эта часть будет простой у тех, кто уже осмелился на установку нового Excel 2013 и более сложной у тех, кто еще работает со старыми версиями.
В Excel 2013 все просто. Как я уже писал , он умеет делать подписи к точкам данных просто беря текст из любого заданного пользователем диапазона. Для этого нужно выделить ряд с данными (оранжевый) и на вкладке Конструктор выбрать Добавить элемент диаграммы - Подписи - Дополнительные параметры (Design - Add Chart Element - Data Labels) , а затем в появившейся справа панели установить флажок Значения из ячеек (Values from cells) и выделить диапазон A2:A13:
В версиях Excel 2007-2010 и старше такой возможности нет, но у вас есть два альтернативных варианта:
Шаг 4. Прячем линии и наводим блеск
Внесем последние правки, чтобы довести нашу уже почти готовую диаграмму до полного и окончательного шедевра:
- Выделяем ряд Выноски (оранжевую линию), щелкаем по ней правой кнопкой мыши и выбираем Формат ряда данных (Format Data Series) . В открывшемся окне убираем заливку и цвет линий. Оранжевый график, фактически, исчезает из диаграммы - остаются только подписи. Что и требуется.
- Добавляем подписи-даты к синей оси времени на вкладке Макет - Подписи данных - Дополнительные параметры подписей данных - Имена категорий (Layout - Data Labels - More options - Category names) . В этом же диалоговом окне подписи можно расположить под графиком и развернуть на 90 градусов, при желании.
Tiki-Toki
Tiki-Toki с порога предлагает «создавать красивые таймлайны». И действительно - работы здесь получаются яркими и удобными. Один период можно разбивать на параллельные сюжеты, выделять события цветом, добавлять изображения и видео из YouTube или Vimeo. Вдобавок в Tiki-Toki есть необычный 3D-режим, где таймлайн не прокручивается слева направо, а уходит вдаль, как дорога.
Правда, в бесплатной версии можно создать только один таймлайн; более гибкий «бронзовый» аккаунт (до пяти таймлайнов) обойдется в $7,50 в месяц. Есть школьное предложение за $125 в год - один «серебряный» аккаунт для учителя (до 25 работ) и 50 «бронзовых» для студентов. Кстати, ученики и преподаватели могут делиться своими таймлайнами или работать над ними вместе.
Dipity
Миссия Dipity грандиозна и утопична: разработчики мечтают организовать всю полезную информацию интернета в хронологическом порядке. Основной акцент сделан на интеграции с другими площадками: Dipity забирает данные из YouTube, Facebook, Google, Twitter, Flickr, Blogspot, RSS-потоков и расставляет в нужном порядке. Учителям будет интересно, что каждое событие цепочки можно описать подробно, не ограничиваясь парой предложений.
Бесплатный аккаунт Dipity позволяет создать три таймлайна по 150 событий в каждом. За $4.95 в месяц число работ возрастает до 10, а за $49.95 становится бесконечным.
TimeRime
В TimeRime можно не просто работать преподавателям и ученикам, но даже создать закрытую школьную сеть (пакет Edu School обойдется школе в 150 евро в год). Мало того, TimeRime прекрасно взаимодействует с интерактивными досками SMART Board. Сервисом уже пользуется университет Портсмута (Великобритания), Лёвенский католический университет (Бельгия) и один из крупнейших голландских колледжей ROC Midden.
Бесплатный аккаунт TimeRime разрешает создавать неограниченное число таймлайнов по 100 событий. Правда, результат выглядит несколько старомодно и не разворачивается во весь экран, да и скорость работы оставляет желать лучшего.
Timeline JS
Timeline JS значительно выделяется в этой подборке - как минимум, потому что сайт не хранит пользовательские работы. Фактически это инструмент по превращению таблиц Google Spreadsheets в хронологические линии: нужно заполнить таблицу по специальному шаблону, вставить ссылку на нее в генератор таймлайнов и получить код для помещения готовой работы на сайт. Здесь нет специальных предложений для учебных заведений, зато сами таймлайны очень удобные и красивые. Сервисом регулярно пользуется сайт французской газеты Le Monde и американский VH1.
Timeline JS сделала Knight Lab - команда разработчиков и журналистов Северо-Западного университета (Иллинойс, США), которая хочет развивать новостные медиа с помощью своих проектов. Программный код Timeline JS можно доработать - он лежит в открытом доступе на GitHub .
BEEDOCS Timeline
Серия Timeline от BEEDOCS работает не в браузере, а разворачивается офлайн. Создание таймлайнов напоминает работу с презентациями: графические темы и шаблоны те же. В десктопной версии Timeline 3D (и облегченном варианте Easy Timeline) есть объемный режим, а готовые таймлайны можно вставлять на сайты. Приложение для iOS позволяет выводить изображение на телевизор с помощью AirPlay - отличный вариант для занятий. Все версии поддерживают «умную» печать: приложение само скомпонует таймлайн для бумаги.
Timeline 3D для Mac обойдется в $65, для iOS - $15. Easy Timeline стоит $19.
Егор Антоненков
Статья, в которой рассмотрим процесс создания адаптивного таймлайна с использованием классов сетки Bootstrap 4.
Что такое таймлайн?
Таймлайн - это элемент интерфейса, предназначенный для отображения на сайте списка некоторых событий в хронологическом порядке.
Например, с его помощью на сайте можно организовать представление истории публикаций или действий пользователя (в личном кабинете).
Что же собой представляет таймлайн? Таймлайн представляет собой "линию времени", на которой посредством контрольных точек отмечаются определённые события. Каждое событие на этой линии поясняется с помощью некоторого контента.
Таймлайны бывают горизонтальные и вертикальные.
Создание вертикального таймлайна
Процесс разработки вертикального таймлайна состоит из создания структуры HTML-кода и CSS.
HTML-структура вертикального таймлайна:
...
Немного о структуре HTML-кода таймлайна. Элемент с классом timeline - это контейнер. Добавление контрольных точек осуществляется посредством помещения элементов с классом timeline-wrapper в этот контейнер.
В свою очередь элемент с классом timeline-wrapper - это тоже контейнер, но уже для элементов таймлайна (timeline-item ).
Элемент таймлайна (timeline-item ) имеет простую структуру и состоит из 5 span элементов. Каждый из них используется элементов для разметки той или части контента контрольной точки.
Следующий шаг - это создание CSS кода для вышеприведённого HTML (действие каждого правила пояснено с помощью комментария).
/* CSS */ /* Добавление отступов к элементу с классом timeline */ .timeline { padding-top: 1rem; padding-bottom: 1rem; position: relative; } /* Создание вертикальной линии с помощью псевдоэлеметна */ .timeline::before { content: ""; position: absolute; width: .125rem; height: 100%; background-color: #dee2e6; left: 2rem; top: 0; } /* добавление нижнего отступа и левого поля для элементов с классом timeline-wrapper */ .timeline-wrapper { margin-bottom: 1rem; padding-left: 4rem; } /* убирание у последнего элемента.timeline-wrapper нижнего отступа */ .timeline-wrapper:last-child { margin-bottom: 0; } /* стили для элементов таймлайна */ .timeline-item { position: relative; background-color: #118c4e; color: #fff; padding: .825rem; border-radius: .25rem; } /* добавление контрольных точек на вертикальную линию */ .timeline-item::before { content: ""; position: absolute; width: .75rem; height: .75rem; background-color: #118c4e; border-radius: .4rem; left: -2.3125rem; top: 50%; transform: translateY(-50%); } /* добавление стрелочек к элементам таймлайна */ .timeline-item::after { content: ""; position: absolute; width: 0; height: 0; border-top: 1rem solid transparent; border-bottom: 1rem solid transparent; border-right: 1rem solid #118c4e; left: -1rem; top: 50%; transform: translateY(-50%); } /* стили для блока, в котором будет отображаться название статьи */ .timeline-item-header { display: block; font-weight: bold; font-size: 1.125rem; } /* оформление блока, содержащего название раздела */ .timeline-item-section { position: absolute; top: 0; right: 0; background-color: rgba(255,255,255,.4); padding: .3rem; font-size: .875rem; border-top-right-radius: .25rem; } /* оформление блока, содержащего дату */ .timeline-item-date { display: block; font-size: .75rem; line-height: 2; color: rgba(255,255,255,.8); } /* стили для блока, в который будет выводиться описание статьи */ .timeline-item-description { display: block; font-size: .875rem; color: rgba(255,255,255,.8); line-height: 1.7; } /* стили для блока, содержащего ссылку "Перейти" */ .timeline-item-link { display: block; font-size: .875rem; line-height: 1.7; text-align: right; } /* стили для ссылки "Перейти" */ .timeline-item-link a { text-decoration: none; color: rgba(255,255,255,1); border-bottom: 1px dashed rgba(255,255,255,1); } /* стили для ссылки "Перейти" при поднесении к ней курсора или когда она находится в состоянии фокуса */ .timeline-item-link a:hover, .timeline-item-link a:focus { color: rgba(255,255,255,.8); border-bottom: 1px dashed rgba(255,255,255,.8); } /* для адаптивности (стили для больших экранов) */ @media (min-width: 576px) { /* для вывода вертикальной линии по центру */ .timeline::before { left: 50%; } /* стили для нечётных элементов с классом timeline-wrapper */ .timeline-wrapper:nth-child(odd) { padding-right: 2rem; padding-left: 15px; } /* стили для чётных элементов с классом timeline-wrapper */ .timeline-wrapper:nth-child(even) { padding-left: 2rem; margin-left: 50%; margin-top: -2rem; } /* дополнительный сдвиг вверх для нечетных элементов (начиная с 3) */ .timeline-wrapper:nth-child(2n+3) { margin-top: -2rem; } /* стили для псевдоэлементов::before элементов таймлайна, расположенных в нечётных контейнерах */ .timeline-wrapper:nth-child(odd) .timeline-item::before { right: -2.5rem; left: unset; } /* стили для псевдоэлементов::after элементов таймлайна, расположенных в нечётных контейнерах */ .timeline-wrapper:nth-child(odd) .timeline-item::after { border-left: 1rem solid #118c4e; border-right: none; left: unset; right: -1rem; } }
Когда ширина viewport имеет значение меньше, чем 576px, таймлайн переключается в мобильный вид. В этом режиме контент событий всегда размещается справа от линии времени.
Те, кому не случилось учиться в школе в период повсеместной компьютеризации, вполне возможно, рисовали ленты времени на бумаге. Автор настоящей статьи был участником подобных экспериментов: несколько листов в клеточку из тетрадки за 2 копейки подклеивались так, чтобы получилась лента. Внизу чертилась горизонтальная временна я шкала, десять клеточек - столетие. Для каждого значимого события проводилась вертикальная черта, над которой надписывалось название события и проставлялась его дата или даже рисовался значок, символизирующий событие. Надо сказать, занятие это было не только интересное, но и весьма полезное. Недостатки его заключались в необходимости стирать одни рисунки, чтобы поместить другие, и в переделывании отдельных фрагментов по нескольку раз.
Те, кто имел в школе доступ к компьютерам, возможно, выполняли подобные задания в том или ином графическом редакторе. В компьютере легко задать скроллинг вдоль временно й шкалы. Временна я шкала может быть линейной, при этом можно сравнивать протяженные события без искажения; на логарифмической шкале иногда удобнее отобразить события, поскольку количество событий, актуальных для их современников, всегда больше в недавнем прошлом, чем в давно минувших веках. Шкала также может быть масштабируемой, как показано на рис. 1.
Рис. 1. Схема масштабируемой шкалы
По мере перемещения красной линии количество отображаемых лет изменяется по гиперболическому закону, то есть вместо скроллинга доступно изменение временно го периода, отображаемого на экране.
Сегодня для школьников, студентов и всех тех, кто хочет представить цепь исторических событий в виде ленты времени, предлагается большой арсенал специализированных инструментов - Timeline Software. В данной статье мы будем в первую очередь рассматривать проекты, нацеленные на визуализацию временны х исторических процессов, и в меньшей степени - инструменты для автоматизации привязки бизнес-задач к временно й шкале. Эта тема может быть отнесена к timelines, но имеет другие акценты и потому заслуживает отдельного разговора.
Средства создания таймлайнов можно разделить на офлайновые и онлайновые, то есть те, которые позволяют разработать проект непосредственно в Сети. В последнее время в Интернете появились обширные ресурсы, касающиеся создания лент времени, а также готовые проекты, где можно почерпнуть интересную информацию, полезную при создании собственных проектов. О том, как выбрать оптимальный инструмент для разработки Timeline-проекта и где найти информацию в Сети, и пойдет речь в данной статье.
Офлайновые timeline-инструменты
Timeline Maker Professional
ОС: Windows
Программа существует в двух редакциях: Timeline Maker Professional (195 долл.) и облегченной Timeline Maker Student (49,95 долл.), имеется также бесплатная ознакомительная версия. Приложение позволяет автоматически построить ленту времени и настроить ее в соответствии с индивидуальными пожеланиями. Пользователю необходимо внести исходные данные в таблицу, подобную таблицам Microsoft Excel (рис. 2), или импортировать их из других приложений, а затем по щелчку мыши автоматически генерируется лента времени. При этом можно настроить фон и выбрать то или иное представление событий (рис. 3 и 4).
Рис. 2. Интерфейс программы Timeline Maker Professional
Рис. 3. Отображение событий (периодов) в виде флажков
Рис. 4. Отображение событий (периодов) в виде полос
Bee Docs’Timeline
О C: Mac OS
Данная программа единственная из рассматриваемых работает только под Mac OS и обеспечивает трехмерное отображение событий (рис. 5). Правда, базовая версия, которая обойдется пользователям в 40 долл., строит плоские таймлайны (рис. 6), а за трехмерность придется раскошелиться - такая версия стоит 65 долл. Имеется также бесплатная ознакомительная версия.
Рис. 5. Трехмерная лента времени придает глубину
исторической ретроспективе
Рис. 6. Привычный двумерный вид
Во всех вариантах доступен просмотр исторических событий, которые могут быть расположены в несколько слоев. Пользователь может редактировать события по двойному щелчку мыши. События на ленте времени могут быть связаны гипертекстовыми ссылками с локальными файлами на компьютере пользователя или с ресурсами в Интернете.
SmartDraw
OC: Windows
SmartDraw - это набор для бизнес-графики стоимостью 197 долл., предоставляющий возможность построения разного рода диаграмм, в том числе диаграммы Ганта, и блок-схем, майндмеппинг и средство построения лент времени (рис. 7). Имеется бесплатная ознакомительная версия.
Рис. 7. Интерфейс программы SmartDraw
Timeline Creator
ОС : Windows, Mac OS 9, X (требуется Java и FlashPlayer)
Timeline Creator - это бесплатный инструмент, который поможет учителям и студентам, не владеющим средствами разработки мультимедиа, создать интерактивные ленты времени (рис. 8). Полученная с его помощью лента времени может быть опубликована в Интернете. Интерфейс программы позволяет отображать одновременно до шести параллельных лент времени, что дает возможность сравнивать события. События снабжаются текстовым комментарием и могут иметь мультимедийное сопровождение в виде фото, аудио или видео.
Рис. 8. Пример ленты времени, полученной на базе Timeline Creator
Пользователи ресурса получают возможность обмениваться файлами timeline.xml на сайте разработчика. Это позволяет использовать и продолжать наработки коллег-учителей.
Timeliner XE
ОС : Windows (все версии)
Timeliner XE (рис. 9) - это весьма совершенный продукт (стоимостью 99 долл.), который предлагает инструменты создания таймлайнов и концепт-карт, то есть позволяет отображать объекты, связанные не только по хронологическому, но и по причинно-следственному принципу. Поэтому с помощью программы, кроме линейных хронологических лент, можно создавать цепочки объектов или даже замкнутые циклы, составленные из объектов.
Рис. 9. Интерфейс программы Timeliner XE
Быстрый старт при создании проекта благодаря шаблонам делает этот продукт востребованным у пользователей, не владеющих сложными средствами создания мультимедиа. Встроенный веб-браузер для поиска информации в Интернете позволяет находить нужные объекты, не покидая проекта.
Excel
ОС: Windows
Excel, как известно, не является специализированным средством создания таймлайнов, однако этот инструмент столь совершенен, что при должном умении его можно приспособить и для данной цели. На сайте Microsoft можно найти целый ряд статей по созданию лент времени с помощью Excel. Например, по адресу http://www.microsoft.com/education/createtimeline.mspx находится пошаговое описание создания примерно такой ленты времени, как показана на рис. 10.
Рис. 10. Пример ленты времени, созданной
с помощью Excel (нелинейная шкала)
Если на рис. 10 таймлайн имеет нелинейную шкалу, то более сложный метод (рис. 11) позволяет создать полноценную ленту с линейной шкалой. Пример создания подобной ленты описан в уроке по адресу: http://www.vertex42.com/ExcelArticles/create-a-timeline.html . Те, кто не готов знакомиться с описанием методики, могут просто скачать темплейт (Timeline Template), который находится на той же веб-страничке.
Рис. 11. Пример ленты времени, полученной с помощью Excel
(линейная шкала)
Современники
ОС : Windows
«Современники» - это одновременно и исторический справочник, организованный в виде ленты времени (около 700 деятелей всемирной и российской истории на одной временно й шкале), и редактор (можно добавлять на ленту деятелей и события), и набор игр на ориентацию в истории (рис. 12).
Рис. 12. Режим «Лента времени» в проекте «Современники»
Программа выполнена в рамках проекта «Единая коллекция цифровых образовательных ресурсов» и свободно распространяется для некоммерческого использования. Она может применяться при изучении истории, а также гуманитарных предметов - мировой художественной культуры и литературы. Организующим стержнем программы служит понятие времени. Два режима - «Россия» и «Мир» - позволяют проводить работу по синхронизации исторических процессов, преодолевать разорванность курсов всемирной и отечественной истории.
Проект отличается большим количеством исторической информации, возможностью выбора и комбинации режимов просмотра, а сочетание сведений о различных исторических персонажах и событиях дает возможность организовать учебный процесс по разным предметам. Хронологические задания программы нацелены на отработку у учащихся навыков уверенной ориентации во времени. Игровые режимы с присущим им азартом позволяют повысить мотивацию учеников к изучению предметов и их интерес к дисциплинам. Учащиеся могут устанавливать разнообразные вертикальные и горизонтальные взаимосвязи по линиям «человек - событие эпохи», «деятель отечественной истории - деятель мировой истории», «предок - потомок».
Анализ выбранных для характеристики какой-либо исторической эпохи событий и их схематических изображений может стать основой дискуссии об «образе эпохи», создания учащимися творческих работ по подбору, рисованию по имеющимся образцам и обоснованию выбора событий, характеризующих данное время.
Возможность редактировать и добавлять новые элементы на ленте времени (рис. 13) позволяет учителю создать ленту времени в качестве иллюстрации для того или иного урока.
Рис. 13. Программа «Современники» дает возможность редактировать
и добавлять новые элементы
ОСЗ ХроноЛайнер
ОС : Windows
Программа создана в рамках проекта «Единая коллекция цифровых образовательных ресурсов» и свободно распространяется для некоммерческого использования. «ХроноЛайнер» - это инструмент, который позволяет интегрировать различные информационные источники на основе хронологических взаимосвязей. Включает средство для визуализации, анализа и печати собранной информации.
Основной модуль программного комплекса «ОС3 ХроноЛайнер 1.0» позволяет работать с линиями времени, подготовленными в «ОС3 ХроноЛайнер 1.0. Редактор», в котором можно интегрировать в ленту времени мультимедийные объекты.
В программе предусмотрен вывод на печать структуры и содержимого линии времени. Причем можно напечатать любое из ее представлений - в виде шкалы разного типа, книги или хронологической таблицы. Можно печатать как одиночные линии времени, так и их всевозможные комбинации, синхронизованные по временно й шкале. А с помощью специальной нумерации распечатанных листов и «реперных» точек на них, показывающих линии совмещения соседних страниц, можно создавать настенные плакаты. В зависимости от потребностей предмета преподаватель может выбирать линии времени из набора, входящего в «ОС3 ХроноЛайнер 1.0», или создавать новые.
Лента времени может быть представлена в разных видах: с подробными карточками событий (рис. 14), с краткими карточками с названиями событий (рис. 15) и в компактном виде, при котором каждое событие отмечено на экране точкой, работающей как кнопка со всплывающей подсказкой при наведении на нее мыши (рис. 16).
Рис. 14. Лента времени с отображением подробных карточек событий
Рис. 15. Режим отображения краткой информации по событиям
Рис. 16. «Компактный» режим в «ОСЗ ХроноЛайнер»
Особенность программы состоит в том, что она предоставляет учителю возможность создавать собственные файлы контентного наполнения ленты времени. Ряд тем уже предлагается в единой коллекции, включая те, что перечислены в таблице.
Ресурс предлагает темы не только по истории, но и по другим предметам. Например, на рис. 17 показана лента времени «Геохронология - геологические эры и эпохи», которая способствует формированию у учащихся представления об основных геологических периодах в истории Земли - от архея до кайнозоя. Материал включает описание наиболее значимых для развития биосферы Земли явлений природы и геологических процессов, а также изображения типичных представителей флоры и фауны различных периодов. Данный материал изучается на уроках физической географии.
Рис. 17. Лента времени «Геохронология - геологические эры и эпохи»
Онлайновые timeline-инструменты
В данном разделе будут рассмотрены ресурсы, позволяющие создать ленту времени в Сети. Подобные инструменты предоставляют несложные средства разработки, давая возможность создать свой проект и сделать его доступным либо только автору, либо всем посетителям Интернета.
Timeline.thinkport
Данный сервис доступен в рамках образовательной среды thinkport, которая задумывалась как площадка для учителей, учеников и их родителей. Один из разделов сайта предлагает простенький ресурс по созданию лент времени. После регистрации вы получаете возможность создать свой таймлайн непосредственно в Сети. Программа позволяет вести поиск иконок для ленты времени, созданный проект можно просматривать, масштабируя ленту в широких пределах. Лента времени хранится в Сети, но к своему проекту можно вернуться, чтобы продолжить работу над ним.
Наличие шаблона упрощает процесс создания ленты времени (рис. 18), но не стоит обольщаться - с помощью этой программы можно создать лишь весьма простенький проект.
Рис. 18. Помощник проведет вас по всем этапам создания
ленты времени на Timeline.thinkport
Mnemograph
Mnemograph - это веб-приложение, позволяющее организовывать информацию и управлять ею на основе timeline. Сведения можно сделать доступными только автору или всем окружающим. Можно создавать как точечные события, привязанные к конкретной дате, так и протяженные (рис. 19). На добавленные события можно давать гиперссылки, отсылая пользователей ленты времени к информации по данному событию, уже опубликованной в Интернете. Можно создать несколько параллельных лент времени, а также добавлять события не только прошлого, но и те, что запланированы на будущее. Mnemograph - это одновременно и редактор и просмотрщик. На момент написания данной статьи ресурс Mnemograph находился в стадии бета-тестирования.
Рис. 19. Интерфейс ресурса Mnemograph
Simile timeline
Для программистов и веб-дизайнеров будет полезен ресурс Simile timeline, где описана методика и приведен код, который позволяет получить онлайновую реализацию ленты времени, подобную той, что показана на рис. 20.
Рис. 20. Внешний вид ленты времени Simile timeline
Готовые timeline-проекты
Вышеописанные продукты позволяют создавать достаточно простые ленты времени. Если вы планируете сложный интерактивный проект, то придется воспользоваться каким-либо средством создания мультимедиапродуктов, обзор которых выходит за рамки данной статьи. Здесь же полезнее сделать краткий обзор ресурсов, где уже реализованы те или иные таймлайн-проекты. Ознакомившись с ними, можно почерпнуть идеи представления материала и найти исторические данные.
Hyperhistory
Великолепный по наглядности и историческому наполнению ресурс. Временны е ленты исторических деятелей (рис. 21), периодов и событий (рис. 22 и 23) плюс исторические карты и текст делают его идеальным учебником по истории.
Проект реализован весьма аскетично с точки зрения дизайна и графических изысков, но все, что нужно, работает.
Рис. 21. Режим «Люди» отображает персоналии
Рис. 22. Режим «История» отображает периоды времени
Рис. 23. Режим «События» отображает события по годам
Timeline of major trends and events (1750-2100)
Уникальный ресурс, в котором анализ истории позволяет сделать прогноз на будущее. При весьма скромной реализации проект поражает своей наглядностью и информативностью.
Лента времени (рис. 24) содержит множество шкал, отображающих следующие факторы:
Рис. 24. Timeline of major trends and events (1750-2100)
- относящиеся к окружающей среде - например уровень населения и другие параметры;
- социальные - уровень преступности, социальные настроения (периоды эйфории, тревоги и т.п.);
- технологические - в частности время появления важнейших технологий (рис. 25);
Рис. 25. Фрагмент ленты времени, на которой отражены периоды зарождения
и зрелости наиболее важных технологий (включая прогноз)
- экономические - периоды рецессии, депрессии, паники на рынке;
- политические - войны и вооруженные конфликты (рис. 26), бунты, мятежи и т.п.
Рис. 26. Фрагмент ленты времени, где отмечены наиболее значимые войны
(Полную версию данной ленты времени в PDF-формате можно найти на нашем CD-диске.)
bbc timelines
Ленту времени по британской истории (рис. 27) мы привели, чтобы показать, какую интерактивность и красоту обеспечивает Flash, на базе которой реализован данный проект. Лента времени охватывает огромный исторический материал, тем не менее скроллинг по ней осуществляется очень быстро и удобно. Подсветка текстов, безупречный дизайн, однако на этом достоинства проекта, пожалуй, и заканчиваются. Для ресурса выбран режим событий, при котором они показаны кнопками со всплывающими подсказками, - это неудачная форма подачи информации, так как она не дает возможности проследить тенденции. Отсутствие иконок и символов, дополняющих кнопки событий, существенно снижает информативность проекта. В результате пользователь получает качественный дизайн, обилие материала, но наглядность его подачи минимальна.
Рис. 27. Интерфейс ленты времени British history timeline
Коллекция проектов по построению лент времени
Великолепный сайт, где собраны проекты лент времени от древности до наших дней. Здесь можно почерпнуть массу идей по созданию нового проекта.
Автору статьи в свое время пришла в голову идея создания ленты времени с отображением изменения площади стран с течением времени. Увы, она оказалась не новой, что обнаружилось при написании данной статьи. Лента времени, в которой реализована данная идея, показана на рис. 28 и находится по адресу: http://www.math.yorku.ca/SCS/Gallery/images/timelines/hammond1_1200x825.jpg . Шкала времени идет сверху вниз.
Рис. 28. Лента времени, отображающая изменение площади стран
с течением времени
На рисунке видно, что в период после Первой мировой войны территория Германии уменьшилась, в середине 40-х годов увеличилась, а после 1945-го вновь уменьшилась. На той же ленте хорошо виден распад колониальной системы Великобритании, рост площади США и разделение Австрии на два «рукава»… Идея реализована великолепно! Увы, ресурс существует лишь в виде JPG-файла с отсканированного бумажного оригинала в уменьшенном виде, а полноценной онлайновой версии нет. Вот идея, которая еще ждет своей реализации в одном из полноценных онлайновых проектов, например на базе Flash.
Поскольку площадь континента - неизменная во времени величина, возможно построение ленты времени, отображающей изменение во времени процентного соотношения площадей в группе сопредельных стран. Кстати, она тоже представлена на данном сайте.
Пути развития народов России
Еще одна разработка, которая доступна бесплатно на сайте «Единой коллекции цифровых образовательных ресурсов» (рис. 29). Данная лента времени отображает пути развития народов России с IX по XVI века и содержит интерактивные задания. Как видно из рис. 30, в тестовом режиме ученику необходимо расположить на ленте времени названия государств, существовавших на территории современной России в эпоху Средневековья.
Рис. 29. Лента времени «Пути развития народов России»
Рис. 30. Интерактивное задание на ленте времени
Выводы
Средств создания лент времени очень много - от простейших, которые в основном предполагают автоматическую расстановку флажков с событиями на ленте времени, до весьма сложных, ориентированных на обучение и, помимо редактора, имеющих изрядное информационное наполнение. Причем, как показывает анализ, стоимость продукта зависит не только от его качества, но и в большей мере от того, кем и в рамках какого проекта создавался продукт. Небольшие редакторы, распространяемые коммерческими фирмами, могут стоить немалых денег, а масштабные проекты, разрабатываемые десятилетиями университетскими коллективами, с многомегабайтным контентом - поставляться бесплатно, например образовательный проект «Единая коллекция образовательных цифровых ресурсов». Кстати, из рассмотренных в статье продуктов на этом портале расположены три, в том числе два наиболее интересных в образовательном плане: «Современники» и «ОСЗ ХроноЛайнер». Поддерживается образовательным онлайн-сообществом и распространяется абсолютно бесплатно и проект Timeline Creator.
Онлайновых редакторов, позволяющих создавать более-менее сложные таймлайны, автор данной статьи в Сети не обнаружил. По-видимому, полноценные Web 2.0-проекты, где каждый желающий может указать свою биографию и биографии всех своих родственников на ленте времени, еще ждут своего часа. Ресурсы по разработке лент в онлайне, которые нам удалось протестировать, пока находятся в стадии бета-тестирования и развиты слабо.
Анализ готовых лент времени, доступных в Сети для просмотра, показывает, что тема эта представлена в самых разных направлениях и есть замечательные ресурсы, правда в основном англоязычные. При этом следует отметить, что наглядность проекта далеко не всегда соответствует возможностям технологической платформы, на которой он реализован. Удачный проект - это не только движок и хороший дизайн панелей и шрифтов, но и наглядность, интересные идеи и их графическая интерпретация. Для создания ленты времени требуется не просто расставить названия событий вдоль линии времени, но и так подобрать иконку к каждому событию, чтобы она занимала минимум места и точно ассоциировалась с ним. Реализаций лент времени в Сети множество, но это не значит, что на долю новых разработчиков ничего не осталось… История - наука живая: появляются новые факты, переосмысливаются старые - так что новые интересные таймлайны будут появляться и впредь. Надеемся, что данная статья поможет в разработке новых интересных проектов.