Лента времени в исполнении сервиса Genially — это слайд презентации, на котором расставлены события в сопровождении интерактивных меток. При нажатии на эти «горячие точки» открывается дополнительная информация о представленных событиях: тексты, фото, видео, гиперссылки.
Смотрим, как это работает. Для начала, как всегда, о регистрации в сервисе.
Регистрация
Заходим на сайтGenially,нажимаем «Sign Up» или «Start now. It’s free!» — и сразу заполняем форму для регистрации. В дальнейшем для входа на сайт можно нажимать «Login».
Обладатели аккаунтов Google могут зарегистрироваться в сервисе через них.
А можно пойти традиционным путём — зарегистрироваться с помощью электронной почты (Sign up with your email).
При регистрации надо указать адрес электронной почты, придумать пароль, поставить галочку напротив «I have read and accept Genially’s terms of use and privacy policy», а потом нажать «Sign up».
После этого ищем на почте письмо от создателей сервиса для подтверждения аккаунта: нужно перейти по указанной в нём ссылке.
Дальше нажимаем на кнопку «You’re all set».
А дальше придётся ответить на несколько вопросов.
Во-первых: какой аккаунт будет создан – образовательный или корпоративный. Выбираем «Education» и нажимаем «Continue».
Указываем свою профессию, например, «Teacher».
Выбираем учебное заведение, в котором работаем.
Ещё сервис предложит назвать свою организацию, но можно этот шаг пропустить (Skip this step), что я и сделала.
И вот теперь можно наконец приступить к созданию первого проекта: нажимаем «Start».
Загружаем изображение
А дальше надо выбрать шаблон для создания ленты времени. Для быстроты в поисковой строке сервиса можно написать «timeline». Откроется сразу несколько подходящих вариантов.
Часть шаблонов — платная. С помощью фильтра вверху, можно оставить для выбора только бесплатные: нажав на стрелку, в выпадающем списке оставляем «галочку» только напротив слова «Free».
Чтобы получше рассмотреть шаблон, наводим на него курсор и нажимаем «View Template».
Шаблон может состоять из одного слайда, а может и из нескольких (в этом случае их можно полистать с помощью стрелок справа и слева). Если вариант приглянулся, нажимаем на кнопку «Use this Templates». Кстати, внизу есть кнопки для того, чтобы изменять цветовую гамму шаблона.
Интерактивные метки и другие объекты
Переходим к редактору ленты времени. В центре экрана — выбранный шаблон. На слайде уже есть какие-то картинки, тексты и кнопки (это и есть интерактивные метки, при нажатии на которые откроется дополнительная информация).
Слева сбоку — инструменты для добавления разных интерактивностей. В правом верхнем углу — очень полезная кнопка «Предпросмотр» (с изображением глаза) для предварительного просмотра таймлайна.
В графу с названием шаблона вписываем название работы.
Можно прямо на слйдах стирать тексты и вписывать свои, удалять картинки и загружать свои изображения.
Но для начала давайте осмотрим кнопки для добавления объектов — на панели инструментов слева. Они нам наверняка пригодятся.
Кнопка «Text» добавляет в работу разные тексты: и помельче, и покрупнее, и даже списки. Если выбрать один из текстовых шаблонов, откроется дополнительный редактор для набора текста, выбора его цвета, размера и шрифта.
Надписи, которые уже есть в шаблоне, можно заменить на свои: просто щёлкаем по ним два раза, удаляем прежний текст и вставляем новый.
Осторожно, не все шрифты поддерживают кириллицу! Вот список тех, кто дружит с русским языком (листаем слайды).
Добавляем картинки через кнопку «Image». У сервиса есть небольшая библиотека, а с ПК загружаем картинки весом не более 5 мегабайт.
На верхней панели инструментов есть кнопки для того, чтобы обрезать изображение, сделать его полупрозрачным, добавить к нему рамку.
Картинки, которые уже есть в шаблоне, можно заменить на свои. Для этого щёлкаем по изображению, нажимаем на кнопку «Replace» и загружаем новую картинку.
Кнопка «Resources» добавляет разные геометрические фигуры, иконки, картинки, гифы, линии и карты из большой библиотеки сервиса. Иконки и формы можно перекрашивать и заменять (через кнопку «Replace»).
Смарт-блоки – это соединения графики и текста: готовые диаграммы, блок-схемы, графики. Их можно найти в одноимённом разделе — «Smartblocks».
Редактор такой же, как и при редактировании текста или изображений.
Чтобы добавить диаграмму или график с данными, заполняем таблицу, и сервис автоматически сгенерирует объект.
А вот и раздел «Interactive elements». Он добавляет на плакат разные метки всевозможных фасонов и расцветок: маркеры, кружочки, звездочки, домики, маркеры с текстом и цифрами, логотипы.
Можно даже невидимые метки создавать! Делается это в разделе «Interactive area».
Кнопка «Insert» добавляет встраиваемые объекты: Google-карты, документы и презентации, видео с YouTube и Vimeo, аудио и многое-многое другое…
В разделе «Audio» можно добавить аудиотрек по ссылке, а можно подключить микрофон и сделать аудиозапись онлайн, чтобы прикрепить её к инфографике.
К сожалению, свой трек загрузить с ПК нельзя — это платная опция.
В разделе «Video» добавляем видеофайлы по ссылке — с сервисов YouTube, Vimeo и Google Drive.
Ну и в разделе «Others» добавляем любые встраиваемые объекты — по ссылке или по коду.
Хотите изменить фоновое изображение? Нажимаем «Background». Чтобы загрузить новую картинку, жмём на значок со стрелкой. А можно вообще сделать фоновое изображение однотонным.
Чтобы добавить в ленту времени новый слайд, выбираем в меню «Pages», а потом «Add page».
Сервис тут же предложит выбрать страницу из нескольких вариантов (раздел «Template»).
Иногла удобно использовать шаблон «Blank» — это пустой слайд, на который можно, «не отходя от кассы», разместить свои интерактивные объекты и фоновые картинки.
Выбираем нужный шаблон и нажимаем «Add».
Кстати, добавить новую страницу можно ещё проще — копировать предыдущую. Для этого во вкладке «Pages» наводим курсор на миниатюру слайда и нажимаем на значок с изображением страничек — «Dublicate».
Тут же кнопка для удаления слайда — с изображением корзинки.
И ещё одна опция, о которой я чуть не забыла: можно добавить к ленте времени фоновую музыку. Для этого нажимаем на кнопку «Add background audio».
В бесплатном аккаунте музыкальный трек или озвучку можно добавить по ссылке или записать их с помощью микрофона онлайн.
Добавляем интерактивность
Любой объект, который мы добавили на слайд (текст, изображение, метку), можно сделать интерактивным. Для этого щёлкаем по нему «мышкой» — и сразу появляются изображения «пальца» и «кометы» (ну я так думаю, что это комета, может, и ошибаюсь, может, это метеорит).
Если нажать на «пальчик» – можно перейти к добавлению контента. Если на значок с «кометой» – анимировать этот объект.
Давайте попробуем прикрепить интерактив к метке.
Итак, какие интерактивности нам предложит Genially?
«Tooltip» поможет создать метку в виде всплывающего при наведении курсора окошка (подойдёт для добавления небольших пояснений и маленьких текстов).
«Window» создаёт большие окна для просмотра текстов и изображений. В окне есть лента прокрутки, поэтому при добавлении объектов можно не жадничать: например, создать текст с картинками, дополнить пояснение видеофайлом.
«Link» превратит метку в интерактивную кнопку: при нажатии на неё зритель сразу отправится на другой веб-сайт.
«Go to page» тоже превратит метку в интерактивную кнопку, только зритель отправится не на другой сайт, а на другую страницу с новым интерактивным изображением.
«Full screen» подходит только для картинок, эта опция открывает изображения на весь экран.
«Audio» проигрывает добавленный в сервис аудиотрек.
«Reveal» — новая «фишка» сервиса. При нажатии на метку с этой опцией на экране появится новый объект, до этого скрытый.
Итак, если мы выбрали «Tooltip», то откроется окошко, где вверху находится поле для редактирования текста и добавления медиа. Можно вставить гиперссылку, картинку, таблицу, видео.
Интересная кнопка с косыми скобками: она открывает html-разметку и позволяет добавить любой объект по коду для встраивания.
Например, создан аудиоплеер в каком-либо сервисе, и мы получили код для его встраивания.
Нажимаем на значок с косыми скобками и вставляем код в нужное место (код выделен синим цветом).
Затем повторно нажимаем на кнопку и возвращаем окно в исходный вид. Теперь в нем появится встроенный объект. Чтобы сохранить интерактив, нажимаем «Save».
Во всплывающем окне количество знаков ограничено. Подсчет ведётся справа внизу.
Если мы выбрали интерактивность «Window», то придётся дополнительно выбирать шаблон оформления окна, который предложит сервис или начать «с чистого листа» (Blank). По опыту, лучше выбирать готовый шаблон.
Выбираем подходящий шаблон и нажимаем «Edit window».
Дальше изменяем шаблон по своему вкусу. Это как слайд внутри слайда. Можно стирать надписи и заменять их на свои, загружать изображения. Можно даже добавлять интерактивные метки, ссылки и встраиваемые объекты, используя инструменты на панели слева (о них я рассказывала выше). Вот такая «матрёшка в матрёшке» получается.
Чтобы вернуться назад, нажимаем на кнопку «Back to page».
Вернёмся к нашим интерактивностям. Опция «Go to page» настраивает переход между страницами многостраничной ленты времени.
Выбираем нужную страницу для перехода в разделе «Pages» и нажимаем «Save». В разделе «Actions» есть несколько «быстрых» кнопок, чтобы добавить переход на первый или последний слайд, вперёд и назад.
А эта опция «Link», которая добавляет ссылки на веб-ресурсы. Не забываем нажать «Save».
Интерактивность «Full screen» лучше всего подходит не для меток, а для картинок. Она помогает открыть изображение на весь экран. Ничего особого делать не надо, просто выбираем эту опцию и нажимаем «Save».
Интерактивность «Audio» запускает аудиофайл, который можно тут же добавить по ссылке или записать онлайн с помощью микрофона. К сожалению, загрузить свой трек с ПК не получится — это платная опция.
Ну и наконец, интерактивность «Reveal» поможет «спрятать» объект на плакате, а потом при нажатии на метку его открыть.
Выбираем эту опцию, а дальше стрелочкой указываем, какой объект на слайде необходимо скрыть. Можно добавить опцию вновь скрывать объект при повторном нажатии на интерактивную метку.
Нажимаем «Save».
Настраиваем анимацию
Помните про значок с «кометой», который появляется при нажатии на любую метку или объект на плакате? С его помощью можно добавить анимацию.
Анимация может быть разная: появление (Enter), исчезание (Exit), совершение каких-то действий, например, вращение (Continuous), действия при наведении курсора (Hover mouse) и клике «мышкой» (Click).
Внутри каждого раздела большое количество видов анимации (Effect). Можно выбрать направление движения (Direction) и даже скорость.
Дополнительный бонус — анимация при перелистывании слайдов, если лента времени многостраничная.
Настраиваем её, нажав на значок «волшебная палочка» рядом с каждым слайдом в разделе «Page». Выбранную анимацию можно применить ко всем слайдам (Apply to all slides).
Публикация
Лента времени создана. Сохраняем её и публикуем с помощью волшебной кнопки «Share».
В открывшемся окошке даём название таймлайну, добавляем описание и, если нужно, даём разрешение другим пользователям сервиса создавать ремиксы на нашу работу. Нажимаем «All set!»
Можно получить ссылку (вкладка «Link») или код, чтобы встроить инфографику на страницу блога или сайта (вкладка «Insert»).
Но это ещё не всё!
Среди «плюсов» сервиса — возможность устроить коллективную работу по созданию интерактива. Можно добавить других участников и пригласить их для работы (только чур — пусть сначала зарегистрируются в сервисе). Как это сделать?
Возвращаемся в свой личный кабинет, где хранятся все созданные работы, нажав на логотип сервиса в верхнем левом углу. Выбираем нужную и нажимаем на значок «человечек с плюсом» (Collaborators).
В открывшееся окошко вносим адреса электронной почты своих будущих соавторов и нажимаем «All set».
Готово! Приглашенный участник получит ссылку для редактирования и… море удовольствия от работы в сервисе.
Здесь же, в личном кабинете, нажав на значок с тремя точками (Options), можно вернуть работу в состояние черновика, переименовать, дублировать её или удалить. Остальные опции платные.
Чтобы вернуться к редактированию работы, наводим на неё курсор и нажимаем «Edit».
