Как сделать интерактивную страницу

Обновлено: 07.07.2024

Заходим на сайт Genially - и сразу можно заполнять форму для регистрации: указать адрес электронной почты, придумать пароль, поставить галочку напротив "I have read and accept the user agreement and privacy conditions", а потом нажать "Start". Ту же процедуру можно пройти, нажав "Register" в правом верхнем углу. Кстати, счастливые обладатели аккаунтов Facebook и Google могут зарегистрироваться в сервисе через них.

После регистрации сервис поинтересуется вашей профессией: из списка можно выбрать "Blogger" или "Teacher", например.

Если вы регистрировались по адресу электронной почты, то получите письмо для активации аккаунта: нужно нажать "Confirm my account".

Теперь жмём "Start creating" - и начинаем творить.

Сервис Genially умеет очень много, это настоящий Клондайк для создателей разного интерактивного контента: презентаций, инфографики, плакатов, открыток, игр, викторин. Из верхнего меню выбираем шаблон для создания интерактивных плакатов - Interactive Image.

Шаг второй - загружаем фоновое изображение, на котором будем размещать интерактивные метки. Нажимаем на значок со стрелкой и облачком и загружаем картинку со своего ПК. Лучше, если она будет высокого качества и в хорошем разрешении. После загрузки появится большая красная кнопка "Create my new interactive image". Нажимаем и приступаем к самому вкусненькому.

Давайте-ка осмотримся. В центре экрана - загруженное фоновое изображение, фото книжной выставки, например. Слева сбоку - инструменты для добавления разных интерактивностей. В левом верхнем углу - набор стандартных кнопок: копировать - вставить - удалить - отменить изменения. В правом верхнем углу - очень полезная кнопка "Preview" для предварительного просмотра плаката. В графу "Untitled Genially" вписываем название плаката или выставки.

Летим осматривать кнопки для добавления меток. Самая главная из них - "Interactivity". Она добавляет разные метки всевозможных фасонов и расцветок: маркеры, кружочки, звездочки, домики, сердечки, "лайки", логотипы, в том числе анимированные (бесплатная версия Thinglink нервно курит в углу).

Кнопка "Text" добавляет на изображение разные тексты: и помельче, и покрупнее, и даже списки. Если выбрать один из текстовых шаблонов, откроется дополнительный редактор для набора текста, выбора цвета текста и фона, размера и шрифта (осторожно, не все шрифты поддерживают кириллицу).

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

Хотите изменить фоновое изображение? Нажимаем "Background". Чтобы загрузить новую картинку, жмём на значок с "ладошкой". А можно вообще сделать фоновое изображение однотонным, красиво градуированным или выбрать какой-нибудь понравившийся шаблон из библиотеки.

Кнопка "Embed" добавляет встраиваемые объекты: Google-карты, документы и презентации, видео с YouTube и Vimeo, аудио с SoundCloud, контент из Twitter.

И наконец, "Images" добавляет поверх фонового изображения разные картинки помельче, загружая их с ПК (размер - не более 5 Mb) или из Интернета (по ссылке).

Добавить метку очень просто: выбираем необходимый элемент и щёлкаем по нему левой клавишей "мыши" - метка появляется на плакате.

Если щёлкнуть метку на плакате, появится изображение "ладошки". Нажимаем на него - и переходим к добавлению контента.

К метке можно прикрепить ссылку, текст, изображение и встраиваемый объект (с помощью кода). Вначале откроется конструктор для добавления контента. Вкладка "Tooltip" поможет создать метку в виде всплывающего при наведении курсора окошка (подойдёт для добавления небольших пояснений и маленьких текстов).

Вкладка "Window" создаёт большие окна для просмотра текстов и изображений. В окне есть лента прокрутки, поэтому при добавлении объектов можно не жадничать: например, создать текст с картинками, дополнить пояснение видеофайлом.

Вкладка "Link" превратит метку в интерактивную кнопку: при нажатии на неё зритель сразу отправится на другой веб-сайт.

Вкладка "Go to page" тоже превратит метку в интерактивную кнопку, только зритель отправится не на другой сайт, а на следующую страницу с новым интерактивным изображением. Да-да, сервис позволяет создавать многостраничные интерактивные плакаты! Но об этом чуть ниже.

Для текста можно выбрать шрифт, размер, цвет. Добавление картинок - через нажатие иконки "картинка", там же рядом значок "цепочка" для добавления в текст ссылок.

Очень интересная кнопка "Code view" откроет html-разметку: здесь можно пристроить код видео с YouTube, например, или код любого встраиваемого объекта (осторожно, не все коды поддерживаются). Повторное нажатие клавиши "Code view" вернет исходный вид публикации, заодно можно проверить, насколько удачно вставился объект.

Для предварительного просмотра созданного есть кнопка "Preview". Чтобы сохранить интерактив, нажимаем "Save".

А как же! Самая интересная фишка сервиса - анимация. "Оживить" можно любой объект на картинке, любую метку. Для этого выбираем "мышью" нужную метку и нажимаем "Animation" на панели инструментов слева. В разделе "Element" выбираем нужный тип анимации: как метка будет появляться (Enter), исчезать (Exit), совершать какие-то действия, например вращаться (Continuous), действовать при наведении на нее курсора (Hover). Внутри каждого раздела большое количество видов анимации (Effect type).

Приложения будут полезны всем, кто создает и проектирует онлайн-курсы: методистам, учителям, репетиторам, экспертам, блогерам.

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

1) LearningApps
Языки. 23 языка, в том числе, русский.

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

Пример упражнения на сервисе LearningApps — удобно выбирать из каталога по категориям

Конструктор, как выглядит редактор при создании подобного упражнения

Кабинет платформы CORE, которая интегрирована с сервисом

2) Wordwall

Языки. 26 языков, в том числе, русский.

Возможности. Сервис позволяет создавать интерактивные упражнения и мини-игры. Есть 33 интерактивных шаблона и 21 шаблон для печати, но часть из них — платная: все зависит от выбранного тарифного плана.

Бесплатный пакет дает возможность создать 5 активностей в месяц. Но можно пользоваться готовыми заданиями.

Пример упражнения на сервисе Wordwall — в меню справа можно переключать шаблоны

Как использовать платформу педагогу. Пример: для изучения иностранного языка разбить изучение лексики по узким темам и дать задания на работу с новыми словами.

3) Quillionz

Языки. Английский язык.

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

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

Пример задания. Необходимо зарегистрироваться и зайти в личный кабинет. Откроется конструктор для работы с текстом.

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

Затем уже переходим к непосредственной работе с получившимися вариантами для интерактивных упражнений.

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

4) Quizlet

Языки. 18 языков, в том числе, русский.

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

С помощью мобильных приложений материалы удобно повторять в любое время в любой момент.

Есть бесплатная пробная недельная версия. Стоимость годового тарифа 2 320 рублей и 3 100 рублей — в зависимости от необходимого в работе функционала.

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

Так выглядит редактор при создании упражнения

Пример игры, созданной с помощью данного сервиса, можно посмотреть здесь.

Как использовать платформу педагогу. Пример: создавать карточки для изучения лексики по актуальной теме.

5) Wizer

Языки. 17 языков, в том числе, русский.

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

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

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

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

Как использовать платформу педагогу. Пример: анализ данных по математике или информатике.

6) Quizizz

Языки. Интерфейс на английском языке, задания можно создать на русском.

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

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

Есть тариф Super с расширенным функционалом, но и базовой версии достаточно, чтобы создавать интересные интерактивные задания.

Пример задания. Есть библиотека готовых заданий, которые разделены по темам. Вот так выглядит готовая викторина.

Как использовать платформу педагогу. Пример: викторины по любой области знаний.

7) Padlet

Языки. 38 языков, в том числе, русский.

Возможности. Сервис помогает собирать и хранить цифровые материалы — создавать доски, веб-страницы.

Позволяет открыть доступ к созданной доске для групп учащихся. Доски можно встраивать в персональный блог или поделиться в соцсетях и по QR-Code.

Преподаватель может собирать коллекции дополнительных материалов по темам уроков или проводить коллективные брейн-штормы.

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

Как использовать платформу педагогу. Пример: можно собирать дополнительные материалы для изучения.

8) Kahoot

Языки. 7 языков, русского языка нет.

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

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

Режим Practice помогает в финале прохождения всех вопросов проработать ошибки. С помощью данного сервиса можно создать тест на время. Его стоит использовать в самом конце онлайн-курса в качестве итогового теста.

Есть и другие режимы. Например, для группового прохождения теста или для соревнований.

Пример задания. Квиз с выбором из нескольких вариантов.

Вариант интерактивного задания на сервисе Kahoot

В этом задании из премиум-тарифа необходимо расставить слова в правильном порядке.

Вариант интерактивного задания на сервисе Kahoot

Как использовать платформу педагогу. Создавать тесты, квизы, онлайн-игры для проверки знаний учащихся по разным темам в разных форматах.

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

После регистрации сервис поинтересуется вашей профессией: из списка можно выбрать "Blogger" или "Teacher", например.

Теперь жмём "Start creating" - и начинаем творить.

Для предварительного просмотра созданного есть кнопка "Preview". Чтобы сохранить интерактив, нажимаем "Save".

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

И тогда у нас есть документы.

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

Но как насчет PDF? Стандарт де-факто для переносимых документов имеет множество хитростей, а с Adobe Indesign можно создать PDF-файл, содержащий множество мультимедийных элементов. После добавления файл можно упаковать и распространить, как в любом стандартном PDF-документе.

Что такое Adobe InDesign?

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

Adobe InDesign CC доступен как отдельное приложение или как полноценное приложение с подпиской на Adobe Creative Cloud для физических лиц за 19,99 долл. США в месяц или в составе более широкого пакета, и все это можно более точно определить при посещении Adobe Creative. Облачный сайт .

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

Создание интерактивного PDF

Создание интерактивного документа, который будет распространяться в формате PDF. , вы можете начать с существующего проекта (поддерживаются файлы Adobe InDesign и QuarkExpress). Кроме того, начать новый документ с нуля.

Возможно, вы даже захотите начать с PDF-файла, хотя InDesign не открывает их изначально. К счастью, вы можете конвертировать PDF в формат InDesign, используя PDF2ID от Recosoft, который доступен для Windows и Mac OS X. (Преобразования с пробной версией PDF2ID ограничены 6 страницами и отображаются с разрешением 96 DPI).

Открыв PDF-файл, вам необходимо подготовить его к использованию мультимедийных интерактивных элементов. Сделайте это, переключив раскрывающееся меню рядом с полем поиска со значения по умолчанию на Интерактивный для PDF . Это представит новую коллекцию инструментов, которую вы увидите в правом нижнем углу окна InDesign.

Добавление гиперссылок в интерактивный PDF

Другие варианты включают в себя ссылку на страницу в документе (полезно для создания интерактивной страницы содержимого!) Или привязку текста или общее назначение. Это поле общего назначения гиперссылки следует устанавливать только в том случае, если вы собираетесь повторно использовать URL-адрес в другом месте документа; Это хороший способ сэкономить время, который вы можете использовать, выбрав Shared Destination в поле Destination при создании последующих ссылок.

Навигация по вашей публикации с помощью кнопок

Отображение видео и медиа

Видео и другие средства массовой информации делают интерактивные PDF-файлы незабываемыми, а добавлять их на удивление легко. InDesign поддерживает кодирование MP4 в формате FLV и h.264. файлов, а также MP3.

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

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

Сохранение вашего интерактивного файла PDF

Когда у вас есть интерактивный журнал, брошюра или даже книга, как вы хотите, пришло время упаковать его в виде интерактивного PDF. Сделайте это, открыв File> Export и выбрав Adobe PDF (Interactive) в раскрывающемся меню Format : .

Потратьте немного времени на решение между спредами и страницами тоже; первый выводит файл в виде интерактивного журнала с разворотами на две страницы, второй — на отдельные страницы.

Когда вы довольны вариантами, нажмите OK, чтобы экспортировать интерактивный PDF. Вы увидите предупреждение о переходе из CMYK в RGB, если вы не установили опцию Document RGB в меню Edit> Transparency Blend Space . Если выходной электронный журнал имеет проблемы с цветом, просто повторите экспорт с включенной этой опцией.

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

Помог ли InDesign создать потрясающий интерактивный PDF? Вы нашли альтернативное решение для создания привлекательных интерактивных электронных журналов? Расскажите нам об этом в комментариях.

Читайте также: