Интерактивная программа что это
Интерактивная программа для детей – лучшее решение для детского праздника
Наверное, у каждого мысль о детском празднике вызывает улыбку на лице и желание окунуться в мир сказочного детства. Лучшим помощником для воплощения в жизнь детской мечты может оказаться праздничная интерактивная программа для детей.
Зритель – участник
Дети нетерпеливы и требовательны, они желают успеть повсюду и испытать всё. По этой причине организации детских праздников следует уделять большое значение и грамотно подходить к этому процессу. Конечно, помощь родителям могут оказать многочисленные готовые сценарии детских праздников. Их несложно найти в специально посвящённых этому книгах и через интернет. Кроме того, специализированные компании, предлагают сегодня самые разные услуги профессиональных ведущих, актеров в ролях любимых сказочных персонажей, детских аниматоров, фокусников и клоунов.
Сегодня не сложно вызвать Деда Мороза или любого другого известного персонажа прямо на дом. Поэтому родителям и профессиональным организаторам приходится проявлять всё большую изобретательность при составлении сценария или программы детского праздника, чтобы он действительно стал необычным и запоминающимся.
Всё большую популярность в последнее время набирают детские игровые интерактивные программы. В ходе реализации таких программ, дети становятся её активными участниками и постоянно заняты решением интересных задач, а не сидят на месте, выполняя только исключительно роль зрителей. Как правило, такая программа не предполагает чёткого сюжета, а базируется на игровых модулях. Опираясь на возраст участников детского праздника, их интересы, активность и способности ведущий-модератор интерактивной программы может видоизменять игровые модули и менять их местами.
Естественно, что каждой возрастной категории детей присущи свои интересы, поэтому игровые программы подбираются соответственно возрасту и интересам детей.
Программы детских праздников для разного возраста
Разработка общего сценария и по-настоящему талантливые артисты, способные заставить детей радоваться искренне и с удовольствием – главные составляющие успеха такого праздника. Кстати, если на празднике присутствуют мамы и папы, то и они могут быть вовлечены в интерактивную программу. Этому обстоятельству дети, как правило, очень рады.
Абсолютно не важно, организовали ли вы этот праздник сами или силами сторонней компании. Важно объединить всех участников праздника, создать светлую праздничную атмосферу и не оставить без внимания ни одного ребёнка.
Интерактивная программа – лучшее решение детского праздника
Детский праздник у каждого вызывает на лице улыбку и желание окунуться в мир сказочного детства. Интерактивная программа может оказаться лучшим помощником для воплощения в жизнь мечты подарить ребенку сказку.
Зритель – участник
Ни для кого не секрет, что дети – это самые нетерпеливые и требовательные создания, они желают повсюду успеть и все испытать. По этой причине имеет большое значение грамотная организация детских праздников. В помощь родителям могут прийти многочисленные готовые сценарии детских праздников, которые легко найти через интернет, а также специализированные компании, предлагающие услуги профессиональных ведущих, детских аниматоров и клоунов, фокусников, актеров в ролях любимых сказочных персонажей.
В последнее время все большую популярность набирают детские интерактивные игровые программы, благодаря которым дети не сидят на месте, а постоянно заняты интересными задачами. Интерактивная программа – это по сути своей детская развлекательная программа, в которой дети играют не роль зрителей, а роль активных участников. Такая программа, как правило, не имеет четкого сюжета, а состоит из игровых модулей. В зависимости от возраста участников детского праздника, от их интереса, активности и способностей ведущий-модератор интерактивной программы меняет местами игровые модули.
Для каждой возрастной категории детей характерны различные интересы, поэтому игровые программы выбирают соответственно интересам и возрасту детей.
Программы для разного возраста
Для малышей от 3 до 5 лет оптимальным вариантом послужит часовая программа, поскольку такие детки очень быстро устают. Лучше всего подойдут игровые программы с веселыми викторинами и короткими играми, в которых задействованы яркие реквизиты и игрушки. На «ура» пройдут детские праздники, в которые будут включены детские песенки и необычные элементы – к примеру, аква-грим. О присутствии в программе ростовых кукол детей лучше предупреждать заранее, иначе некоторые из участников праздника могу просто испугаться.
Дети в возрасте от 5 до 7 лет очень любят клоунов, актеров в ярких костюмах, которые умеют веселить ребятню своими смешными песенками и трюками. Сценарий для данной возрастной категории должен быть разработан с учетом специфики данного возраста и может быть рассчитан на двухчасовую программу.
Ребята в возрасте от 7 до 12 лет могут веселиться на празднике достаточно длительное время, поэтому продолжительность интерактивной программы занимает около трех часов. Главным в таком празднике остается разработка общего сценария и приглашение по-настоящему талантливых артистов, с которыми дети искренне и с удовольствием радуются.
Зачастую дети присутствуют на празднике вместе со своими мамами и папами, и иногда интерактивная программа требует и их вовлечения в общее действо.
Абсолютно не важно, будет ли праздник организован силами сторонней компании, или же вы сами сможете организовать необычное мероприятие. Самое важное – это единение всех участников праздника, создание светлой праздничной атмосферы и то внимание, которым ребенок будет наделен с вашей стороны.
Интерактивный – что означает это слово?
В последнее время в нашей жизни появилось много слов, которых раньше не было в повседневном обиходе. Теперь мы слышим непонятные термины повсюду: с экранов телевизоров, в магазине, в речи молодого поколения. Давайте разберемся сейчас со значением одного из таких слов. Интерактивный – что это означает? Почему это прилагательное ставят рядом со словами из совершенно разных сфер жизни?
Что означает слово «интерактивный» в общем?
Прилагательное интерактивный – означает, что тот или иной предмет, к которому оно относится, подразумевает взаимодействие с пользователем. То есть, если сказать простым языком – это процесс взаимных действий человека с предметом, программой или любым другим продуктом.
Интерактивность – это способность устройства, с которым взаимодействует человек, задействовать искусственный интеллект, подстроиться под потребности пользователя.
Чтобы понять лучше, что такое интерактивный, лучше рассмотреть несколько конкретных примеров, в совокупности с которыми мы наиболее часто встречаем употребление этого термина.
Интерактивное ТВ – что это?
Остались в прошлом времена, когда наши бабушки и дедушки спешили по вечерам в определенное время к телевизору, чтобы посмотреть любимую передачу, новости или фильм. Сегодня можно посмотреть любой телевизионный контент когда пожелаешь.
Стало возможным это с изобретением интерактивного телевидения. Это все те же телевизионные программы и фильмы, но в хорошем качестве и с удобными функциями записи, остановки, перемотки назад и т. д.
Чтобы пользоваться таким телевидением понадобится купить современный телевизор с функцией смарт или специальную IPTV приставку.
Интерактивный урок – что это?
Интерактивный урок – это современная методика обучения, которая предполагает активное взаимодействие между учителем и обучающимися. Причем ученики могут проявлять те или иные реакции и действия как по отношению к преподавателю, так и между собой.
Неотъемлемая часть таких уроков – это интерактивные задания и упражнения. Они направлены не только на закрепление ранее пройденного материала, но и на лучшее усвоение нового.
Такая форма обучения стимулирует ребенка к получению новых знаний и самостоятельной деятельности. Она способствует выявлению различных точек зрения на ту или иную проблему, дает возможность анализировать личный опыт, соединяет воедино теорию и практику.
Интерактивная доска – что это?
Интерактивная доска является мощным современным инструментов, позволяющим усовершенствовать процесс обучения, сделать его более ярким и эффективным. Она используется при применении стандартных методов обучения. То есть, это устройство, которое заменяет обычную школьную доску.
Но, теперь ребенку и учителю не нужно писать задания мелом. Программа выводит информацию на ровную вертикальную поверхность в виде картинки или видео. Такие устройства оснащаются специальными камерами, которые отслеживают действия человека. Они анализируют жесты или касания и реагируют на них соответствующим образом. Это можно сравнить с работой планшета, но только в гораздо больших масштабах. Иногда такие системы могут работать бесконтактно.
Еще более интересным и увлекательным сделать обучающий процесс способно устройство интерактивный пол-стена Master Touch. Это особый проектор, который может проецировать изображение, как на стену, так и на пол. Его используют при обучении детей младшего возраста. Устройство позволяет проводить обучающий процесс, а также отдыхать детям, взаимодействуя с изображением на полу или стене.
Интерактивный класс – что это?
Интерактивный класс – это помещение для учебного процесса, оборудованное специальными высокотехнологичными устройствами. Такие комнаты выводят на совершенно новый уровень процесс обучения, проведение лекций, семинаров, презентаций.
Оборудование, которое используется для оснащения таких классов и аудиторий, это:
Согласитесь, учиться в таких аудиториях намного интересней. Следовательно, процесс обучения будет более эффективным, так как материал лучше усваивается, подается наглядно и доступно.
Интерактивная игра – что это?
Интерактивная игра – это, в первую очередь, средство для доступного освоения новых знаний и умений маленькими детьми. Играть в нее может один ребенок или одновременно группа малышей.
Инструментом для проведения таких игр выступают все те же интерактивные доски, пол.
Очень нравится детям играть в интерактивной песочнице. Они могут в этой игре одновременно совмещать получение тактильных ощущений и соединять их с познавательным процессом.
Особое значение в таких групповых играх имеет приобретение социальных навыков детьми. Ведь в процессе игры они взаимодействуют между собой, учатся лучше понимать друг друга, прислушиваться к мнению окружающих.
Интерактивные игрушки
Особой популярностью у современных детей пользуются интерактивные игрушки. Мамам, папам, дедушкам и бабушкам стоит учитывать этот факт при выборе подарка ребенку на День рождения или Новый год.
Что можно отнести к таким игрушкам? Любые устройства, взаимодействующие с малышом, реагирующие тем или иным образом на его действия.
Девочки с удовольствием играют в куклы и пупсы, имитирующие поведение грудного ребенка. Их можно кормить, укладывать спать, ухаживать за ними. Будущие мамы развивают в такой игре естественный, присущий всем женщинам материнский инстинкт.
Нравится мальчикам и девочкам играть с разными зверушками (котятами, щенками, птичками и т. д), роботами. Радости вашего сына или дочери не будет предела, если вы купите им Собаку робота WOWWEE Chip или забавного зверька Ферби.
Для самых маленьких создатели игрушек придумали всевозможные гаджеты (детские мобильные телефоны, планшеты, компьютеры), которые взаимодействуют с ребенком, откликаются на его команды и действия.
Интерактивная карта – что это?
Понять, что такое интерактивная карта несложно. Если сказать простыми словами, то это онлайн ресурс, предоставляющий в реальном времени ту или иную информацию пользователям. Работают они на основе реальных карт. Показывать могут самую разную информацию – от географических данных до всевозможных социальных аспектов.
В интернете вы можете найти все, что угодно. Например, интерактивную карту гроз, ветров, осадков, погоды, боевых действий, полетов воздушных судов и даже коронавируса. На таких ресурсах события изменяются постоянно через определенные промежутки времени. Также они позволяют просмотреть информацию, которая была актуальна несколько дней или часов назад. Некоторые из сервисов способны делать прогноз.
Интерактивная ставка – что это?
Термин интерактивный – это понятие, которое стало использоваться даже в букмекерских конторах и тотализаторах. Он означает ставку, сделанную через онлайн сервис.
Стоит отметить, что даже в России, где игорный бизнес запрещен, существует две легальные букмекерские платформы для перевода онлайн ставок.
К чему еще применимо слово интерактивный?
Как вы уже поняли, понятие интерактивный – это то, что тесно вошло в жизнь современного человека. Оно уже сегодня применимо ко многим процессам и событиям. Мы пользуемся интерактивными устройствами, игрушками, сервисами, порой не замечая, что имеем дело с искусственным интеллектом.
Ведь многим знакома Алиса, живущая в Андроидах. К ней уже присоединился голосовой помощник «Салют» от Сбер. Пользоваться этими виртуальными ассистентами просто и удобно. Они делают нашу жизнь комфортной, а выполнение различных манипуляций доступными и простыми.
Нетрудно спрогнозировать, что в ближайшее время понятие интерактивный станет привычным и обыденным. Ведь наука не стоит на месте. Технологии постоянно развиваются. И нам остается лишь ждать от ученых и изобретателей новых умных устройств, предназначенных облегчить нашу жизнь, сделать ее еще более интересной.
Интерактивное веб-приложение без программирования? Легко! Mavo вам в руки
Вы владеете HTML и CSS и умеете создавать простые (и не очень) статические веб-страницы, а хотели бы вдохнуть в них больше «жизни» и интерактивности? У вас есть работы (картины, фотографии, стихи, коллекция марок и т. п.), которыми вам хотелось бы поделиться с миром, но создание сайта-портфолио или блога, куда можно их разместить и без лишних усилий обновлять, вам не под силу? Или мечтаете вести дневник путешественника, или собирать необычные кулинарные рецепты, или отслеживать свою фитнес-активность и делать всё это онлайн на собственном сайте? Возможно, у вас есть любимый питомец, уход за которым требует особых процедур, и их обязательно нужно отслеживать и оперативно фиксировать?
Но от упоминания JavaScript вас бросает в лёгкую (а иногда и не очень) дрожь, а количество технологий и концепций, которыми нужно овладеть, чтобы реализовать ваши задумки, приводит вас в замешательство и отчаяние? В итоге вы задаётесь вопросами: «Почему веб-программирование должно быть таким трудным? Неужели нельзя что-то придумать, чтобы сделать его проще?».
Тогда вы пришли точно по адресу. Прочитав статью, вы получите в руки инструмент, с помощью которого, я уверен, сможете воплотить в жизнь, если не все, то многие свои идеи, аналогичные перечисленным выше.
Автор оригинальных картинок: Mart Virkus (toggl.com)
Маститые и умудрённые опытом фронтенд-разработчики, не спешите закрывать статью с криками, что сейчас тут будут что-то «втирать» новичкам и вам здесь делать нечего. Я уверен, вы тоже сможете почерпнуть для себя что-то полезное. Главное, помните: если что-то станет простым для новичков, это автоматически станет простым для всех! А значит, в какой-то мере упростит жизнь и вам. Это неплохо, согласитесь?
Итак, к делу! Эта статья будет целиком и полностью посвящена Mavo.
Mavo — это новый подход к разработке интерактивных веб-приложений только за счёт написания HTML и CSS, без необходимости написания кода на языке JavaScript и разворачивания собственного сервера.
Mavo разрабатывается группой учёных Haystack Group лаборатории компьютерных наук и искусственного интеллекта Массачусетского технологического института (MIT CSAIL) под руководством Лии Веру.
Следуй за белым кроликом!
Хотите узнать чуть больше о том, какие идеи были положены в основу Mavo, какие черты своих предшественников он впитал, какие развил, а от каких пришлось отказаться и почему? Тогда очень рекомендую к прочтению эти две публикации, специально подготовленные для ежегодного форума, посвящённого иновациям в области человеко-машинного взаимодействия, — The ACM Symposium on User Interface Software and Technology (UIST):
Сайт Mavo хостится на серверах Netlify, адреса которых попали в «чёрный список» в результате «войны» с мессенджером Telegram. А значит, ресурсы, размещённые на этих серверах, равно как и все связанные с ними сервисы заблокированы на территории России (по крайней мере, на момент написания этой статьи).
Есть, правда, и хорошая новость: мы с Лией Веру (Lea Verou) активно работаем над решением этой проблемы. Надеюсь, в скором времени мы и это уладим. А до тех пор, пожалуйста, пользуйтесь, например, VPN для работы с Mavo (это справедливо как при доступе к сайту Mavo, так и при изучении демо-приложений на Codepen, а также и при создании собственных веб-приложений).
(ОБНОВЛЕНИЕ) Те, кто не готов и/или не хочет связываться с VPN, могут поиграть с Mavo на Stackblitz или подключить его к свому проекту через cdnjs.
Я убежден (и, думаю, я не одинок), что лучший способ «пощупать» новую технологию и оценить, на что она способна, — это построить что-то полезное с её помощью. Не очень сложное, иначе мы можем просто не увидеть леса за деревьями, но нужное. Осталось только выбрать что. О! Есть идея.
Думаю, многие из вас изучают иностранный язык (может быть, для кого-то таким является язык программирования). И, скорее всего, для его изучения вы используете какое-нибудь приложение. Новые слова в этих приложениях обычно изучают с помощью карточек. Кстати, этот приём изучения иностранного языка отлично работает и в офлайне. Но сейчас не об этом.
Так вот, почему бы нам с вами вместе не разработать такое приложение? Назовём его… (барабанная дробь!) «Карточки». Это будет полноценное CRUD-приложение для изучения иностранного языка с помощью карточек, которое позволит:
Годится? Надеюсь, да. Тогда в путь!
На протяжении статьи я проведу вас по всем этапам разработки приложения. И по ходу чтения вы будете встречать фрагменты, помеченные с помощью особых меток.
Во фрагментах, помеченных таким образом, содержится важная, но дополнительная информация про Mavo. При первом чтении эти фрагменты можно пропускать, не боясь упустить главную мысль.
В конце некоторых разделов я буду предлагать вам небольшие самостоятельные упражнения, выполнив которые, вы сможете чуть лучше познакомиться с возможностями Mavo и одновременно улучшить разрабатываемое приложение. Подобного рода упражнения будут помещаться вот в такие фрагменты.
Готовы, следуя за нитью моего изложения, сразу применять новые знания на практике? Отлично! Ведь, как известно, мы лучше запоминаем то, что делают наши руки. Вы можете постепенно разрабатывать своё приложение, читая статью от начала и до конца, либо можете начать с любого интересующего вас этапа.
В таких фрагментах будут приводиться ссылки на соответствующие версии приложения на Codepen.
Теперь всё. Начинаем!
Статическая веб-страница
Чтобы проиллюстрировать, как Mavo расширяет возможности HTML, мы создадим статическую HTML-страницу, которую затем с помощью Mavo превратим в полнофункциональное веб-приложение.
Предположим, у нас есть следующий HTML-код внутри элемента :
В приведённом выше фрагменте кода элемент соответствует одной карточке.
Добавим немного стилей, чтобы наша страничка стала больше похожа на будущее приложение:
Хотите полностью увидеть исходный код? Вы можете сделать это здесь.
Подключаем Mavo
Пока у нас есть только статический макет. Настало время превратить его в полноценное веб-приложение. Вот тут как раз Mavo и вступает в игру!
Чтобы использовать Mavo, нам необходимо подключить его JavaScript- и CSS-файлы к нашей странице. Для этого добавим в элемент две следующие строки:
Вы можете загрузить соответствующие файлы из репозитория Mavo и подключить их к своей странице аналогичным образом.
(ОБНОВЛЕНИЕ) Вы также можете подключить Mavo к свому проекту через cdnjs.
Возможно, ваше приложение должно корректно работать в старых браузерах? Или вы хотите иметь возможность заглянуть в исходный код Mavo и ожидаете, что он будет читаемым? Всё в ваших руках. Вы можете тонко настроить, с какой сборкой и/или версией Mavo вы хотите поработать, ответив на несколько простых вопросов.
Если не присвоить атрибуту mv-app значение и при этом в том же самом элементе нет ни одного из атрибутов: id или name, — Mavo автоматически присвоит приложению имя mavo1, mavo2 и т. п.
Однако я настоятельно рекомендую вам явно указывать имя приложения, так как оно используется (явно и неявно) в других местах приложения.
Итак, пусть в нашем случае элемент будет содержать будущее приложение. Добавим к нему атрибут mv-app, а в качестве его значения укажем имя нашего приложения — flashcards:
Атрибут property
Теперь пора сообщить Mavo, какие элементы приложения являются важными, то есть будут редактироваться и/или сохраняться, а также, возможно, будут использоваться в выражениях (но об этом чуть позже — запаситесь терпением).
В нашем приложении пока есть два таких элемента — это элементы
. Добавим к этим элементам атрибут property, сообщив тем самым Mavo, что эти элементы содержат данные, с которыми нужно работать. Элементы с атрибутом property называются свойствами (properties).
Атрибут property можно добавить к любому HTML5-элементу — Mavo знает, как сделать его редактируемым. Например, содержимое элемента вы сможете редактировать вручную с клавиатуры, а значение элемента (дату или время) вы сможете установить с помощью соответствующего виджета.
Набор правил, по которому Mavo делает элементы редактируемыми, может быть легко расширен с помощью плагинов. Нужно, чтобы пользователь мог форматировать текст с помощью панели инструментов, аналогичной той, что есть у таких программ, как Microsoft® Wordpad или Microsoft® Word, т. е. работать с текстом, как в любом WYSIWYG-редакторе? Или вы хотите разрешить пользователю набирать текст с использованием команд языка Markdown? Нет никаких ограничений. Просто активируйте соответствующие плагины. Нет подходящего плагина? Не проблема. Напишите свой. Mavo поддерживает соответствующий функционал прямо «из коробки».
Имейте в виду, что значение атрибута property должно описывать назначение элемента так, как обычно его описывают значения атрибутов id или class.
Превратим наши элементы
Если у элемента уже есть атрибут id, class или itemprop, точно описывающий его назначение, можно не присваивать атрибуту property значение. Например, одно из свойств нашего приложения можно было бы описать так:
Заметили какие-нибудь изменения в нашем приложении после добавления в него свойств? Уверен, что да. Вверху приложения появилась панель инструментов Mavo (Mavo bar) с кнопкой Edit. Эта кнопка позволяет переключаться между двумя режимами работы приложения: режимом чтения и режимом редактирования. Сейчас наше приложение находится в режиме чтения. Это означает, что мы не можем редактировать его данные непосредственно в окне браузера.
Панель инструментов Mavo полностью настраиваемая (как и все элементы интерфейса, автоматически добавляемые Mavo в приложение): вы можете изменить её положение, внешний вид, задать набор доступных на ней кнопок или даже назначить ей свой HTML-элемент.
Чуть позже мы увидим один из вариантов такой кастомизации панели инструментов Mavo. А пока, если хотите чуть подробнее познакомиться с описанными возможностями, почитайте документацию на официальном сайте.
Что ж, самое время переключиться в режим редактирования и познакомиться с ним. Нажмите кнопку Edit.
Что же изменилось? Поменялось название кнопки: теперь её имя Editing. Это визуальный сигнал для нас: внимание, мы находимся в режиме редактирования. Попробуйте навести курсор мыши на любой из абзацев с текстом («Слово или фраза» или «Перевод»). Mavo сообщает нам с помощью жёлтой подсветки, что по этому фрагменту можно щёлкнуть и отредактировать его.
Смелее! Щёлкните по тексту и внесите в него изменения. Ну разве это не здорово?! Мы можем редактировать содержимое страницы непосредственно в окне браузера!
Предположим, что помимо изучаемого слова (или фразы) и его перевода, мы хотим, чтобы на карточке присутствовал пример употребления этого слова (фразы) в предложении. Мы же знаем, что именно так нужно учить иностранные слова — в контексте, правда?
Усовершенствуйте приложение, добавив в него недостающий элемент, и дайте ему имя, например, example.
Атрибут mv-multiple
На данный момент в нашем приложении всего одна карточка. Откровенно говоря, это не очень-то полезно! Для полноценного приложения нам не хватает возможности добавлять новые карточки, удалять ненужные, а также переставлять карточки так, как нам удобно. Но как мы можем всё это реализовать?
Будучи разработчиками приложения, мы могли бы добавить в него новые карточки, просто добавив ещё элементов в его HTML-код. Но тогда каким образом пользователь сможет добавлять и удалять карточки самостоятельно?
К счастью, в Mavo есть то, что позволит нам добавить в приложение соответствующий функционал на раз-два — атрибут mv-multiple. С помощью этого атрибута мы указываем Mavo, какие элементы приложения могут быть размножены. Атрибут mv-multiple превращает элемент, к которому он добавлен, в редактируемую коллекцию элементов (collection). При этом Mavo добавит к элементам такой коллекции элементы управления, с помощью которых можно добавлять в коллекцию новые элементы, удалять существующие и упорядочивать элементы коллекции с помощью перетаскивания. И да, стиль этих элементов управления тоже полностью настраиваемый!
Если добавить атрибут mv-multiple к элементу без атрибута property, Mavo автоматически исправит эту ситуацию: добавит property со значением collection (или collection2, collection3, чтобы сохранить уникальность имени).
Однако, как и в случае с именем приложения, я рекомендую обязательно использовать атрибут property с коллекциями: это гарантирует сохранность данных приложения при внесении изменений в его HTML-структуру.
Что ж, давайте добавим атрибут mv-multiple к элементу приложения, чтобы превратить нашу одинокую карточку (flashcard) в полноценную редактируемую коллекцию карточек (обратите внимание, что при этом мы добавили ещё и атрибут property):
Теперь смело переключайтесь в режим редактирования. Заметили, что под карточкой появилась кнопка Add flashcard? Устроим ей тест-драйв: добавьте с её помощью пару новых карточек. Это просто что-то невероятное: мы можем динамически добавлять новые карточки в приложение, даже если в его исходном коде нет соответствующих элементов!
Заметили, что добавление атрибута property к элементу не сделало его содержимое редактируемым? Mavo считает этот элемент группой. Так происходит, когда атрибут property добавляется к элементу, содержащему внутри себя другие свойства, то есть элементы с атрибутом property.
Но и это ещё не всё! Наведите курсор мыши на любую из карточек. Видите, что у правого верхнего угла карточки Mavo добавил три новые кнопки (слева направо): для удаления карточки, добавления новой и перемещения существующей. И наводя курсор мыши на любую из этих кнопок, можно легко догадаться по генерируемой Mavo подсветке, к какой именно карточке они относятся.
Генерируемые Mavo кнопки работы с элементами коллекции полностью настраиваемые. Например, вы можете создать свою собственную кнопку перемещения элемента коллекции, добавив класс mv-drag-handle к соответствующему HTML-элементу.
Также имейте в виду, что со всеми кнопками работы с элементами коллекции можно взаимодействовать с помощью клавиатуры. Например, поместите фокус ввода на кнопку перемещения карточки и с помощью клавиш управления курсором изменяйте положение карточки внутри коллекции.
Атрибут mv-storage
https://codepen.io/dsharabin/pen/WNeYwpj
Теперь, когда основной интерфейс будущего приложения разработан, предлагаю сделать следующее:
Только спокойствие! На самом деле, мы никогда не указывали Mavo, что он должен сохранять редактируемые данные. Тем более мы не указывали, где конкретно он должен их сохранять.
Так давайте сделаем это сейчас. Для этого в Mavo есть специальный атрибут — mv-storage. Осталось только выяснить, какие значения он может принимать. И оказывается, Mavo открывает нам широчайшие возможности. А плагины — открывают ещё большие!
Пусть наше приложение сохраняет данные в локальном хранилище браузера — localStorage. Это самый простой из доступных в Mavo вариантов и отлично подходит для нашего первого приложения. Всё, что нам нужно сделать, — просто добавить атрибут mv-storage со значением local к корневому элементу приложения (так называется элемент с атрибутом mv-app, помните?):
А теперь взгляните на панель инструментов Mavo. Заметили новую кнопку Save? Помимо прямого назначения — сохранять изменения в приложении — у неё есть ещё одна полезная функция. Попробуйте отредактировать данные ещё раз. Обратите внимание, что кнопка Save теперь подсвечена. Наведите на неё курсор мыши, и Mavo подсветит вам данные, которые вы отредактировали, но не сохранили!
Нажмите кнопку Save и обновите страницу (при этом не обязательно переключаться в режим чтения). Ну что, теперь ваши данные сохранились? Отлично! Мы стали ещё на один шаг ближе к полноценному веб-приложению.
Атрибут mv-autosave
Сейчас наше приложение работает так, что пользователь должен нажимать кнопку Save всякий раз, когда ему нужно сохранить внесённые в приложение изменения. Это правильно с точки зрения сохранения жизненно важной информации, но часто пользователи забывают это делать. Как же быть? Вот бы наше приложение могло сохранять данные автоматически через какие-то промежутки времени! «А что, это реально можно сделать с помощью Mavo?» — спросите вы. А я с радостью и гордостью отвечу, что да, можно!
Итак, чтобы научить приложение автоматически сохранять изменения, вносимые пользователем в данные, мы можем воспользоваться атрибутом mv-autosave. Добавить его нужно к корневому элементу приложения. Значение этого атрибута — количество секунд, которое должно пройти с момента внесения пользователем изменений в данные до их сохранения приложением. Внесём соответствующие изменения в наше приложение:
Атрибут mv-autosave=»3″ предписывает Mavo сохранять вносимые в данные изменения раз в три секунды. Наличие подобного рода задержки между сохранениями становится принципиально важным, если выбранный для сохранения данных сервис (бэкенд) хранит историю их изменения (например, GitHub и Dropbox). Отсутствие такой задержки сделает историю изменений просто-напросто бесполезной.
Чтобы увидеть и оценить внесённые в приложение изменения, ещё раз обновите данные на какой-либо из карточек и обратите внимание на кнопку Save. Заметили? Сначала она была подсвеченной, но через три секунды погасла, указывая тем самым, что несохранённых данных в приложении нет. Теперь все изменения сохраняются автоматически!
Таким образом, основная часть нашего приложения выглядит сейчас следующим образом:
Мы почти закончили с альфа-версией нашего приложения. Ура-ура! Теперь ваша очередь сделать его ещё лучше. Не волнуйтесь! Вы вооружены всеми необходимыми знаниями, чтобы выполнить задание, которое я вам предложу.
Усовершенствуйте приложение так, чтобы карточки, объединённые общей тематикой, можно было собирать в группы. Например, в одну группу входят все слова, имеющие отношение к одежде, в другую — названия профессий, в третью — названия продуктов питания и т. п.
Подсказки!
Существует несколько способов решить поставленную задачу. Вам решать, какой из способов выбрать и по какому пути пойти. Но я хочу, чтобы вы подумали над ответами на пару вопросов, которые, возможно, помогут вам с поиском решения.
Чтобы «набить руку» и чуть больше познакомиться с Mavo и его возможностями, реализуйте оба этих способа решения.
Атрибут mv-bar
Продолжим расширять функционал нашего приложения. Мы настроили его так, что данные пользователя хранятся в локальном хранилище браузера. Но наше приложение остаётся однопользовательским: пользователи не могут делиться своими карточками с другими пользователями. А было бы здорово иметь такую возможность! Да и учить иностранный язык в компании куда веселее, не так ли?
Есть ли в Mavo способ разрешить пользователям экспортировать из приложения свои карточки и импортировать в него чьи-то чужие? Нам повезло! И этот функционал поддерживается в Mavo, как говорится, «из коробки». Конечно, это не сделает наше приложение многопользовательским в каноническом понимании этого слова, но наличие подобного функционала — уже немало для столь простого приложения, согласитесь.
Для подобных задач в Mavo есть атрибут mv-bar, с помощью которого можно указывать, какие кнопки отображаются на панели инструментов Mavo (если там вообще нужны какие-либо кнопки). Обычно этот атрибут добавляется к корневому элементу приложения. Сами кнопки имеют очень логичные (с точки зрения их наименования на английском языке) идентификаторы. Вот лишь некоторые из них: edit, import, export.
Поскольку мы хотим лишь добавить кнопки к уже имеющемуся на панели инструментов Mavo набору, мы можем воспользоваться так называемым относительным синтаксисом (relative syntax). Такой синтаксис позволяет нам добавлять и удалять кнопки из дефолтного набора без необходимости явно перечислять все кнопки, входящие в него. Всё, что нам достаточно сделать в нашем случае, — просто начать значение атрибута mv-bar с ключевого слова with, а затем перечислить (через пробел) идентификаторы нужных нам кнопок:
Устройте тест-драйв только что добавленному функционалу: добавьте в приложение несколько карточек и экспортируйте их в файл. Удалите все карточки из приложения, а затем импортируйте в него ранее экспортированные карточки.
Выражения. MavoScript
Перефразируя известную фразу, произнесённую персонажем Евгения Евстигнеева в знаменитом советском фильме «Берегись автомобиля», спрошу: «А не замахнуться ли нам в нашем приложении на статистику?!» Предлагаю отображать где-то вверху приложения общее количество карточек в нём. Заинтригованы? На это я и рассчитывал.
Но прежде чем суметь «замахнуться» и реализовать намеченное, нам нужно узнать кое-что новое о Mavo.
Мы уже знаем, что важные элементы приложения (которые, в частности, можно редактировать и сохранять) называются свойствами. Напомню, это элементы, для которых указан атрибут property. Значение этого атрибута — имя свойства, описывающее его роль в приложении.
Так вот, мы можем использовать значение любого свойства, ссылаясь на него, в любом месте внутри приложения Mavo (даже в значениях HTML-атрибутов). Для этого нужно просто заключить имя свойства в квадратные скобки. Вот так: [имяСвойства]. Эта запись является примером так называемого простого выражения. Простые выражения позволяют нам производить вычисления всякий раз, как только что-то в приложении меняется, то есть реактивно.
Язык выражений, поддерживаемый Mavo, называется MavoScript. Он очень похож на язык формул в электронных таблицах (таких как Microsoft® Excel, Apple Numbers или Google Sheets) и позволяет производить вычисления и другие операции с числами, текстом, списками и т. п.
Создатели Mavo разработали MavoScript так, чтобы выражения, записанные на этом языке, были хорошо читаемыми: продолжая аналогию с электронными таблицами, можно сказать, что в выражениях используются не безликие адреса ячеек, а именованные диапазоны, делающие формулу более простой для восприятия человеком.
Плюс, MavoScript позволяет работать с данными, имеющими иерархическую структуру.
Более подробно о выражениях Mavo и языке MavoScript можно почитать в официальной документации.
Перейдём от слов к делу и посмотрим на реактивность в действии. В качестве эксперимента, давайте добавим выражение [source] внутрь свойства flashcard. Например, между свойствами source и translation:
Какие же изменения произошли в нашем приложении? Как минимум, мы видим, что значение свойства source отображается в карточке дважды. Так? Так!
Идём дальше. Переключимся в режим редактирования и попробуем изменить значение свойства source. Видите, что происходит в то время, как вы меняете значение этого свойства? Значение выражения [source] реактивно вычисляется, и изменения, которые вы вносите в значение свойства source, автоматически отображаются ниже: там, где мы использовали выражение. Ну не чудо ли?!
Это, разумеется, здорово, но пока мы не приблизились к решению нашей задачи — отображению информации о количестве карточек в приложении. Почему? Просто выражение [source], помещённое внутрь карточки, всегда будет возвращать ровно одно значение — значение свойства source именно этой карточки. А нам бы нужно как-то добраться до всех карточек в приложении.
А что если теперь мы поместим выражение [source] не внутри свойства flashcard, а снаружи? Вот так:
Как это будет отличаться от рассмотренного ранее случая? Чтобы увидеть эти самые изменения, добавьте в приложение несколько карточек. Обратите внимание, что теперь вместо одного значения над карточками мы видим список разделённых запятыми значений свойства source всех(!) имеющихся в приложении карточек. Если мы посчитаем, сколько значений в этом списке, то получим количество карточек в приложении. Согласны?
Осталось устранить одно маленькое логическое противоречие. Какое? Не кажется ли вам, что логичнее было бы считать количество самих карточек, а не количество значений их свойства source? В конце концов, добавляемая в приложение карточка уже существует до того, как пользователь заполнит её свойство source или translation. Как же поступить? Я предлагаю просто скорректировать выражение и сделать его более логичным: вместо [source] написать [flashcard]. В итоге получим:
Как же отразились внесённые нами изменения на том, что мы видим в приложении? У нас всё ещё есть список разделённых запятыми значений, но значения эти теперь являются комплексными значениями — объектами. Каждый объект соответствует одной карточке и содержит все её свойства (даже если карточка пустая(!)).
Таким образом, теперь у нас есть, что посчитать (количество объектов, соответствующих карточкам, в списке), но остаётся вопрос, как это сделать. Что ж, у Mavo есть ответ и на этот вопрос. В MavoScript есть функция count(), которая позволит нам посчитать количество элементов в списке.
MavoScript — достаточно богатый язык выражений. В нём изначально есть почти всё необходимое, включая наиболее часто используемые функции.
Дело за малым — научиться правильно использовать функции в выражениях. Есть всего пара моментов, которые нужно иметь в виду.
Мы получили ровно то, к чему стремились, — теперь наше приложение показывает полезную статистику!
Надеюсь, вы уже достаточно разогрелись и готовы продолжить экспериментировать с Mavo и… статистикой. Предупреждаю, здесь задание будет чуть позаковыристее, и вам придётся кое-что самостоятельно изучить. Но не волнуйтесь, нужными подсказками я вас вооружу.
Усовершенствуйте приложение так, чтобы статистика отображалась не только по общему количеству карточек в приложении, а также отдельно по каждой группе карточек (если вы добавляли соответствующий функционал ранее).
Подсказка!
Вам может понадобиться умение отбирать карточки, удовлетворяющие определённому критерию, и подсчитывать их количество. Для этих целей вам пригодится оператор where или функция filter().
Самооценка
У нас уже есть готовое приложение, которое позволяет создавать, редактировать и хранить набор карточек. Но как отслеживать наш прогресс: какие карточки мы уже хорошо выучили, а с какими нужно поработать ещё? Давайте подумаем, что мы можем здесь сделать.
Предлагаю остановиться на очень полезной и в то же время модной (можно сказать, хайповой) функции — функции самооценки.
Итак, добавим в наше приложение две кнопки: Плохо и Хорошо. Какого поведения мы ожидаем от приложения, когда пользователь нажимает эти кнопки? В принципе, идея достаточно простая:
Теперь, когда мы определились с тем, что мы хотим сделать, нужно провести небольшие подготовительные работы и добавить соответствующие элементы в наше приложение:
Атрибут mv-action
Mavo предоставляет нам возможность описывать собственные правила, по которым должны обрабатываться пользовательские данные нашим приложением, — так называемые настраиваемые действия (custom actions).
Чтобы определить настраиваемое действие, необходимо добавить атрибут mv-action к соответствующему элементу приложения. Описанное с помощью данного атрибута действие выполняется при каждом щелчке по элементу, к которому добавлен этот атрибут. Это как раз соответствует тому, какое поведение мы ожидаем от кнопок самооценки — Плохо и Хорошо.
Значением атрибута mv-action является выражение. При построении этого выражения можно использовать любые операции и функции, предоставляемые нам MavoScript, а также несколько специальных функций манипулирования данными: add(), set(), move() и delete().
Важно иметь в виду, что, в отличие от обычных выражений, которые пересчитываются реактивно при изменении данных, указанные функции манипулирования данными выполняются только при запуске соответствующего настраиваемого действия.
Итак, вернёмся к реализации функции самооценки. При нажатии кнопок Плохо и Хорошо мы должны перемещать карточку внутри коллекции карточек на новое место: первое или последнее. Именно это действие позволяет реализовать функция move(). В качестве первого аргумента функции нужно указать перемещаемую карточку, а в качестве второго — новое место (позицию) этой карточки в коллекции. Имейте в виду, что элементы коллекции нумеруются с нуля, то есть первая карточка имеет в коллекции позицию 0.
Теперь у нас достаточно знаний, чтобы реализовать первую часть функционала самооценки: при нажатии пользователем кнопки Плохо соответствующая карточка перемещается в начало коллекции, т. е. становится первой. В коде приложения это будет выглядеть следующим образом:
Обратите внимание, что в значении атрибута mv-action мы ссылаемся на свойство flashcard внутри самого этого свойства. Это позволяет нам работать с текущей карточкой и перемещать именно её.
Если мы попытаемся по аналогии реализовать и вторую часть функционала самооценки, то неминуемо столкнёмся с проблемой. Можете, не заглядывая вперёд, догадаться, с какой?
Вспомним, что происходит при нажатии кнопки Хорошо: соответствующая карточка перемещается в конец коллекции, то есть становится последней. А чтобы сделать карточку последней, нам нужно знать, сколько всего карточек в коллекции (приложении). К счастью, мы уже знаем, как решить задачу вычисления количества карточек в приложении, и даже реализовали соответствующий функционал. Сможем ли мы воспользоваться найденным ранее способом решения в этой новой ситуации?
К сожалению, нет. И вот почему: чтобы подсчитать количество карточек в коллекции, мы ссылались на соответствующее свойство — flashcard — вне самого этого свойства. Но в этом случае нам пришлось бы сослаться на свойство flashcard внутри него. То есть нам пришлось бы написать что-то типа такого:
И это не сработает! Вы можете легко в этом убедиться экспериментальным путём.
Так как же нам быть в этой ситуации?
Вычисляемые свойства. Элемент
Итак, с одной стороны, мы знаем, что выражение [count(flashcard)] возвращает в качестве результата количество карточек в приложении, если оно записано вне свойства flashcard. С другой стороны, нам необходимо использовать результат этого выражения внутри свойства flashcard. Да, дилемма!
Чтобы её разрешить, нам нужно суметь вычислить значение выражения [count(flashcard)] вне свойства flashcard и каким-то образом сохранить результат, чтобы впоследствии можно было его использовать в любом месте приложения. А в нашем случае — внутри свойства flashcard. Для решения такого рода задач в Mavo есть, так называемые, вычисляемые свойства (computed properties).
Имейте в виду, что по умолчанию вычисляемые свойства, в отличие от обычных свойств, не сохраняются.
Добавим вычисляемое свойство flashcardCount в приложение. Но не забывайте, что мы должны добавить это свойство обязательно вне свойства flashcard (но использовать его значение мы сможем в любой части приложения):
Теперь мы сможем реализовать недостающий шаг в функционале самооценки: при нажатии кнопки Хорошо соответствующая карточка перемещается в конец коллекции, то есть становится последней. В коде это будет выглядеть следующим образом:
Вот мы и закончили! Наше приложение готово. Поздравляю!
Есть и другой способ решения этой задачи — с помощью специального свойства $all.
Специальное свойство $all, использованное внутри коллекции, соответствует ей всей. Таким образом, отпадает необходимость прибегать к вычисляемому свойству для работы со всей коллекцией внутри этой коллекции. Попробуйте самостоятельно применить специальное свойство $all вместо вычисляемого свойства flashcardCount для реализации функционала самооценки другим способом. Какой из способов вам нравится больше? Почему?
В реализованном нами приложении осталась крошечная деталь, которую нужно поправить. Теперь, когда у нас есть вычисляемое свойство, мы можем (и должны) использовать его для вычисления количества карточек в приложении. Внесите соответствующие изменения.
Выводы
Мы прошли с вами достаточно долгий путь разработки пусть и простого, но полноценного интерактивного веб-приложения. И при этом мы не написали ни одной строчки кода на языке JavaScript. Если это не чудо, то я не знаю, как это назвать по-другому. И если вы читаете эти строки, то вы оказались «крепкими орешками». Благодарю вас за это.
Как известно, образование — то, что остается после того, как забыто все, чему учили в школе. Давайте напоследок соберём воедино всё, что, я надеюсь, останется в вашей памяти после прочтения этой статьи. Итак, чтобы превратить статическую HTML-страницу в полноценное приложение Mavo, необходимо выполнить нескольких несложных шагов:
Вместо эпилога
Вот мы и разработали наше приложение. Идеальное ли оно? Конечно, нет. В этом мире нет ничего идеального. Всегда есть, что можно улучшить, и всегда найдётся функционал, который можно было бы включить в приложение (например, можно сделать приложение многоязычным). Как говорится, нет предела совершенству. Дерзайте! Улучшайте приложение на ваше усмотрение. Не бойтесь экспериментировать и пробовать что-то новое — это прекрасный способ учиться и закреплять приобретённые знания! Откуда знаю? Просто уже больше 17 лет учить людей — моя профессия (работаю в учебном центре «Сетевая Академия ЛАНИТ»)!
Всё, что мы узнали про Mavo, — всего лишь верхушка айсберга, и он способен на гораздо большее. Изучите документацию и примеры реализованных с помощью Mavo проектов и убедитесь в этом лично. Вот несколько источников для самостоятельной работы: официальный сайт Mavo и коллекции демо-приложений, выполненных Лией Веру и вашим покорным слугой.
Mavo ещё очень молод. И если вам понравился заложенный в него подход к разработке веб-приложений, вы можете стать полноценными участниками нашего сообщества. Как? Есть несколько вариантов:
Благодарности
В этой части статьи я бы хотел упомянуть двух потрясающих людей и выразить им свою признательность.
В первую очередь, я очень благодарен Лие Веру (Lea Verou), которая не только сподвигла меня к написанию оригинала этой статьи на английском языке (и помогла мне воплотить её в жизнь), но и постоянно вдохновляет меня своим примером: тем, как она делает мир веб-разработки лучше для всех. Я никогда не встречал столь одарённого человека и безумно рад, что мне выпала счастливая возможность поработать с ней!
Я также благодарю Джеймса Мура (James Moore). Примеры, которые он использует в своем курсе «Функциональное программирование в JavaScript для начинающих» на платформе Udemy, а также выбранный им подход к обучению, мотивировали меня к созданию первой версии приложения «Карточки». Он замечательный учитель!