Лучшая фича в Axure — это бага. Или наоборот
В Axure, программе для проектирования интерфейсов, есть неочевидная функция, которая позволяет встроить в прототип почти любой код. При этом не покидая интерфейса самой Axure.
Чаще всего я использую её, если нужно встроить в прототип какой-нибудь iframe. Например, Яндекс.карту. Или видео с Ютуба.
Заметил такую возможность ещё в пятой версии программы, в 2010 году. И она до сих пор с нами в десятой версии, спустя 14 лет.
Сейчас объясню, как это работает, и покажу пример.
Кстати, если кто-то не знает, что такое Axure, я недавно написал небольшую статью на эту тему.
Итак, для демонстрации создам пустой проект и на первой же странице размещу два серых прямоугольника.
После этого перейду в режим предпросмотра получившегося результата. Проще говоря, открою прототип в браузере. А там взгляну на html получившегося фрейма.
И вот они, наши два прямоугольника. Это можно понять по закомментированным подсказкам. Думаю, те, кто работают с кодом и вёрсткой, уже в этом месте обо всём догадались и, улыбаясь, закрывают статью или листают к секции с комментариями.
Теперь пропишу имя для верхнего прямоугольника: «box1».
И что же я вижу?
Ну да, название прямоугольника оказалось внутри комментария. И теперь я понимаю, что, если вместо «box1» написать тег, закрывающий комментарий, а затем тег, открывающий комментарий, то между ними можно вставлять что угодно и этот код попадёт в сгенерированную версию страницы. Давайте проверим.
Axure 10 автоматически преобразовала два коротких тире и знак «больше» в стрелочку, но на результат это не влияет.
Попробую встроить Яндекс.карту. Для этого мне нужен код виджета. Я иду на Яндекс.карты, нахожу нужный мне адрес, кликаю по трём точкам в правом верхнем углу, выбираю пункт «Поделиться» и копирую код виджета с картой.
Затем я вставляю этот код в имя прямоугольника, обрамив его тегами, закрывающими и открывающими комментарии.
Получилась вот такая шляпа. Чтобы прямоугольник не мешался, достаточно сделать его невидимым.
Но теперь карта находится в левом верхнем углу получившейся страницы. А если я хочу разместить её там, где мне самому нужно, то в этом конкретном случае придётся сделать две вещи:
Первая: в коде, который я получил от Яндекса, нужно оставить только часть, обрамлённую тегами