Reveal что за программа

Информация на сайте ни при каких условиях не является публичной офертой, определяемой положениями статьи 437(2) ГК РФ.

АДРЕС

г. Москва, 1-ый Волоколамский проезд, д. 10, стр. 1 БЦ «Диапазон»

E-mail

Интернет-магазин

Новости

• Новости Syssoft
• Новости вендоров
• SoftPower
• Записи вебинаров
• Квиз-тесты
• Акции и скидки
• Спецпроекты

Компания

Поддержка

• Карта сайта
• Юридические документы

Reveal 3 – отладка интерфейса iOS-приложения в реальном времени

Любой разработчик скажет вам, что отладка пользовательских интерфейсов в iOS-приложения — та ещё головная боль. Когда требуется выполнить дебаггинг программного кода, без проблем подключается LLDB, но по части выстраивания визуальной иерархии приложения он бессилен. Поэтому на данном этапе будет включаться Reveal, который делает фактически то же самое, что веб-инспектор Safari, позволяющий изучить и разобрать DOM веб-страницы вдоль и поперёк, но с тем отличием, что отладка сопровождается красивыми 2D/3D-анимациями. Сейчас мы рассмотрим Reveal на примере проекта Artsy.

ТЫ БЫ НИКОГДА ТАКОЕ НЕ ЗАГУГЛИЛ #15

Подготовка

Сперва необходимо загрузить и скомпилировать проект Artsy с Github. Чтобы это сделать, вставьте в терминал следующие строки и нажмите Enter:

git clone https://github.com/artsy/eigen.git

cd eigen

git checkout 0590e315e3246b88209003885f8466af30c6dc0b bundle install make oss

bundle exec pod install

open Artsy.xcworkspace

Команда clone продублирует репозиторий Arsy, а checkout запустит 0590e315e3246b88209003885f8466af30c6dc0b.

Когда Artsy откроется в Xcode, выберите симулятор iPhone 6 Plus (или любую модель с экраном 5,5″), создайте билд и запустите его, чтобы убедиться в работоспособности. Далее мы состыкуем Artsy и Reveal, чтобы посмотреть на отладку.

Интеграция с Reveal

Загрузите пробную версию Reveal на 14 дней, либо приобретите программу за $60, если уже наслышаны и наш обзор стал финальным аргументом. Хоть первоначальное знакомство способно отпугнуть новичка дебаггинга, поскольку на экране не наблюдается ровным счётом ничего, не переживайте – это легко поправить за счёт интеграции с образцовым проектом Artsy. Обозреваемой программе потребуется запустить определённый код в вашем приложении, чтобы установить связь посредством Bonjour. Есть два способа:

1. Статичная привязка фреймворка, используя Reveal.framework — самый простой и народный вариант;
2. Динамическая привязка фрейморвка внутри приложения при запуске, используя libReveal.dylib — позволяет подробнее отслеживать загрузку библиотек в приложение.

Чтобы не перегружать читателей и без того замороченным обзором/уроком, выберем первый способ — статическую привязку:

Докодемо дуруғай❌️ ё рост✅️? DokoDemo маьлумоти пура

1. Убедитесь, что окно Reveal активно и перейдите в: Help -> Show Reveal Library in Finder. Там как раз спрятались статические и динамические библиотеки Reveal.framework и libReveal.dylib соответственно.
2. Перетяните Reveal.framework в Project Navigator в Xcode, в группу Frameworks. Поставьте галочку на Copy items if needed и отметьте Artsy. Затем Finish.
3. Выберите проект Artsy в Project Navigator, затем перейдите: Build Phases -> Link Binary with Libraries и добавьте libz.dylib, нажав на значок «+» в левом нижнем углу. Пропишите libz в поле поиска, потом выберите libz.dylib и кликните Add.
4. Удалите приложение из симулятора, а потом создайте билд и запустите. Во время запуска, в выпадающем меню, у вас должно отобразиться Artsy (iPhone Simulator). Выберите его и произойдёт чудо! 🙂

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

Введение в Reveal

Функция Refresh (Обновить)

Перед глазами раскрывается слоёная развёртка проекта Artsy, которая может измениться в мгновение ока, если пользователь Reveal внесёт какие-либо изменения. Однако, ничего не произойдёт, пока вы не нажмёте кнопочку Refresh, чтобы обновить проект. В качестве примера нажмите на SIGN UP в обозреваемом макете: приложение перейдёт в раздел Sign Up, но Reveal будет по-прежнему показывать оригинальный экран. Исправляется недоразумение кнопкой Refresh в правом верхнем углу.

Хотите вернуть всё назад? Жмите стрелочку назад и снова Refrech. Не понравилось? Вносите корректировки и — Refresh. Только так изменения вступят в силу.

Интерфейс

Reveal придерживается классического трёхпанельного интерфейса. Центральная панель является самой интересной для тех, кто любит книжки с картинками — здесь отображается «слоёный пирог» вашего проекта, вся иерархия приложения (в нашем случае — Artsy), которая любезно разворачивается в 3D-виде, позволяя обнаружить любые тонкости дизайна. Чтобы прокрутить своё творение, просто щёлкайте левой кнопкой мыши и двигайте конструкцию. Также Reveal добавляет немного свободного пространства между слоями, дабы вы могли оценить, как они гармонируют друг с другом.

На самом верху центральной панели находятся 3 регулировки:

• Три иконки, отвечающие за отображение сегментов: View Wireframes (тонкая граница, каркас), View Contents (содержимое) и View Both (каркас вместе с содержимым).
• Выпадающее меню с масштабированием, которое — обратите внимание — соотносится с естественным размером элементов приложения.
• Оставшаяся опция переключает 2D и 3D перспективы. Трёхмерный вид активирован по умолчанию.

Левая панель — это дерево, содержащее в себе весь контент проекта, который перестраивается, опираясь на действия пользователя. Например, нажмите на кнопку SIGN UP на центральной панели, а затем посмотрите на левую, где подсветится ARWhiteFlatButton. Теперь вы знаете, что отвечает за описанную кнопку.

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

Правая панель специализируется на редактировании — она содержит множество различных «инспекторов»:

• Application Inspector: предоставляет исчерпывающую информацию о подключённых девайсах, версии ОС, текущей ориентации и другие параметры.
• Identity Inspector: показывает выбранный объект или узел, такой как класс, занимаемую память и универсальный доступ.
• Attributes Inspector: показывает общие свойства для каждого класса в иерархии подобно Builder. Например, верхняя секция под название UILaber будет обладать атрибутами вроде Text и Font.
• Layout Inspector показывает рамки, связки, маски, автоматически меняющие размер, и характеристики Auto ILayout — по степени значимости контента и изменения его габаритов.
• Layer Inspector: показывает границу слоя, радиус углов, не забывает подметить растровый контент и прочие параметры.

Ограничения по слоям

Снова нажимаем на SIGN UP, что на центральной панели. Далее разворачиваем узел ARWhiteFlatButton, чтобы посмотреть «детские» категории. Там вместе с кучей записей вы обнаружите узел под названием Constraints (ограничения). Данные ограничения прикручиваются к определённому виду. Расширив Constraints, вы увидите 2 правила крепления: 280 точек по ширине и 44 точки по высоте.

На правой панели откройте четвёртую вкладку Layout Inspector и пролистайте до секции Participating Constraints, содержит два ограничения для кнопки LOG IN, по примеру предыдущей обозначенные как UIButton. Также обратите внимание, что ограничения синего цвета генерируются автоматически, а фиолетовые отметки добавляются вручную разработчиком (ограничения напрямую зависят от контента). У кнопки SIGN UP в нашем примере используется синий цвет, потому система сама подобрала данные ограничения.

Основной рабочий экран

Вот мы и добрались до главного козыря Reveal. Он заключается в том, что приложение помогает разработчику осознать, из каких деталей конструируется его проект. Чтобы продемонстрировать это, нужно перейти на основной рабочий экран и выбрать опцию 3D в самом верху центральной панели, таким образом «запустив приложение на iPhone».

Активируйте Identity Inspector на второй вкладке правой панели и щёлкните по свободному месту рядом с вашим «слоёным пирогом» — волшебным образом включилась подсветка видов. Правая панель пополнилась различными деталями, из которых стоит выделить ARSignUpSplashTextViewController, куда перебрался View Controller.

Непосредственные виды переворачиваются на 45 градусов, если вы нажмёте и потяните влево на центральной панели.

Самые интересные плюшки скрываются под капотом основного рабочего экрана. Отображающаяся иерархия создаёт жуткий бардак, поэтому зачастую лучше спрессовать элементы приложения. Благо Reveal позволяет гибко настроить вывод информации.

Чтобы сделать определённые части вашего приложения более плоскими (слитыми), перейдите к ARSignUpSplashTextViewController в левой панели и сворачивайте раскрывающиеся слои до тех пор, пока результат не придётся по душе. К слову, аналогичным образом раскрываются папки в macOS (OS X). Самым последним узлом, которым управляются детали на экране, будет UTTransitionView.

Если выберете UILayoutContainerView и заглянете в Identity Inspector на правой панели, то контроллер AROnboardingViewController разграничит содержимое экрана и остатки интерфейса проекта, например, раздел авторизации, который был посещён ранее.

Отладка элементов интерфейса в реальном времени

Думаем, на данном этапе вы достаточно узнали о возможностях Reveal, поэтому пришла пора закрепить теорию. Работать будем всё с тем же шаблоном Astry.

Если вы хотите поменять визуальные стили, такие как текст и цвет заднего фона, всего лишь щёлкните на соответствующих элементах и откройте Attributes Inspector на правой панели. Долистайте то секции UIView, где находится группа Color. Для background мы выбрали Light Gray Color, и Reveal моментально внёс изменения.

Добавить рамок, дабы усилить контраст? Без проблем! Выбираем нужное изображение, в левой панели нажимаем на ARBrowseViewCell (подкласс UIImageView), а затем подкручиваем значение Border на правой панели по вкусу и определяемся с цветом.

Выберите надпись AUCTIONS — Attributes Inspector в это время подготовит поле text, куда можно вписывать всё, что душе угодно. Чтобы избежать сворачивания слов, рекомендуется выставить параметр lines на 0.

Работать в Reveal не сложнее, чем в Microsoft Office или в iWork с его панелями-инспекторами. Пусть и на небольшом примере, но мы убедились, что отлаживать интерфейс на «слоёной» вращающейся 3D-модели приложения намного удобнее, чем вслепую, при этом разработчикам не надо обладать исключительными знаниями, ведь всё находится под рукой, на трёх панелях, переключение между которыми быстро войдёт в привычку.

Иными словами, если планируете создавать своё iOS-приложение, то для отладки интерфейса рекомендуем именно Reveal.

Источник: appstudio.org

reveal.js: HTML-презентации

Привет, меня зовут Александр, я старший разработчик ПО в Центре разработки Orion Innovation и я люблю делиться своими мыслями с людьми, разумеется, любимые форматы – статьи на Хабре и доклады на конференциях и митапах. Сложно представить доклад без презентации, о них и хочу поговорить.

Практически 10 лет слова презентация, слайды, PowerPoint (KeyNote) были для меня равносильны. Однажды мне необходимо было продемонстрировать большое количество кода (80 из 100 слайдов содержали код), и моя работа в PowerPoint превратилась в «День сурка»:

1. Взять пример из кода.
2. Отформатировать и убрать всё лишнее.
3. Скопировать код в VS Code, чтобы получить подсветку синтаксиса.
4. Выбрать тему, подходящую к фону слайдов.
5. Скопировать код в презентацию как Rich Text.
6. Просмотреть слайд, понять, есть ли что-то не так.
7. Повторить с пункта 1.

Тот доклад я, конечно, доделал в PP, однако твёрдо решил найти альтернативу:

• чтобы вся работа с кодом сводилась к «скопировать из источника и редактировать на месте» (а всё форматирование и подсветку синтаксиса отдать на усмотрение инструмента);
• чтобы можно было привлечь внимание к под-фрагменту кода (строка, переменная, синтаксическая конструкция);
• чтобы можно было отображать большие объемы кода (40 строк и более) на одном слайде (путём прокрутки фрейма с кодом до места, о котором идёт речь).

И в результате поисков я открыл для себя HTML-презентации (они же веб-слайды) на примере reveal.js.

Следует заметить, что reveal.js далеко не единственный фреймворк веб-презентаций, наверное, самые популярные альтернативы: Impress.js и Webslides.tv.

И, разумеется, на Хабре так же были статьи про HTML-слайды:

• Как делать презентацию с помощью веб-технологий?
• Презентация как код, или Почему я больше не пользуюсь Powerpoint-ом
• Презентация приложения для проведения презентаций

О reveal.js

Reveal.js — движок презентаций, разработанный Хакимом Эль-Хаттабом, привлекающий своей простотой и 3D-эффектами из коробки.

HTML-презентация — особым образом размеченная HTML-страница, которая превращается в слайды посредством JS

Ничего сверхъестественного и архисложного: обычная веб-страница со скриптом и парой css-include’ов. Открыв такую страницу в браузере мы обнаружим два слайда:

Разумеется, вы можете указывать заголовки, под-заголовки, под-под-заголовки и т.д.

Таким образом вы получаете структурированные слайды.

Так же вам доступны фрагменты — возможность отображения содержимого слайда по частям (по клику) (Аналог Appearance Animation по клику из PP).

Или укажите свой собственный порядок отображения:

Или же используйте разные варианты фрагментов:

Итак, как вы могли заметить, базовый функционал аналогичен PowerPoint, с той лишь разницей, что мы используем html-тэги вместо GUI, а для получения дополнительных возможностей используются особые атрибуты и css-классы.

Особенности reveal.js

Удобная работа с кодом

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

Объемный код

#include using namespace std; bool checkPrimeNumber(int); int main() < int n; cout > n; if (checkPrimeNumber(n)) cout bool checkPrimeNumber(int n) < bool isPrime = true; // 0 and 1 are not prime numbers if (n == 0 || n == 1) < isPrime = false; >else < for (int i = 2; i > > return isPrime; > float calculateSD(float data[]) < float sum = 0.0, mean, standardDeviation = 0.0; int i; for(i = 0; i < 10; ++i) < sum += data[i]; >mean = sum / 10; for(i = 0; i < 10; ++i) < standardDeviation += pow(data[i] — mean, 2); >return sqrt(standardDeviation / 10); >

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

Автоанимирование

Автоанимирование, оно же Morph transition в PowerPoint, — анимация смены слайдов, при которой объекты предыдущего слайда плавно превращаются в объекты следующего.

Auto-Animate

Auto-Animate

Auto-Animate

Разумеется, превращение форм — не единственное проявление:

Задний план

Разумеется, фон — имеет значение. И reveal.js позволяет вам использовать в качестве фона: сплошной цвет, изображения (в том числе анимированные, например .gif), видеозаписи, и даже целые веб-сайты.

К сожалению, гифка этого примера получается совсем уж невменяемого размера, так что предлагаю просто посмотреть пример онлайн (осторожно, откроется в этой же вкладке).

Ну и помимо всего прочего, можно добавлять различные css-фишки и трюки. Например, красивые листочки в честь уже почти ушедшей осени:

Использование Markdown

Reveal.js позволяет описывать как контент одного слайда, так и контент всей презентации не HTML-тэгами, а обычным markdown, что бывает довольно полезно, если необходимо условный README.md превратить в презентацию.

## Markdown ### Подзаголовок «` [1-4] int main() < printf(«Hello!»); return 0; >«`

Это всего лишь веб-страница

Ну и напоследок особенность, которая всё это время скрывалась на виду. Формально, reveal.js-презентация это всего лишь HTML-страница, а это значит, что ваша презентация всегда готова к публикации в сети (например, Github pages) и её можно встроить куда угодно, используя обычный

Немного критики

Никакого GUI

Крайне непривычно после PowerPoint’а размечать слайды на html, особенно, если есть желание переместить какой-либо объект на слайде “на глаз” (разумеется, есть GUI в виде slides.com, но бесплатная версия имеет свои ограничения). Однако, если вы любите bash/cmd/vim, то процесс создания слайдов вам определенно может понравиться. А уж если вы слышали про Emmet.

Как ни странно, проблемы с кодом

Поскольку такие символы как и некоторые другие интерпретируются браузером как части тегов, могут возникать сложности с демонстрацией кода, где эти символы активно используются. Например, include’ы С++, метапрограммирование в C++, Rust и т.д.

#include

Благо, вложив код в еще один тэг об этой проблеме можно забыть:

#include

Произвольные анимации

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

В свою очередь, в reveal.js крайне сложно, например, создать движение объекта по произвольной траектории, но замена текста/зачёркивание и т.д. делаются буквально за 2 секунды.

Иными словами, PowerPoint — это сложно, но с богатыми возможностями, а reveal.js — это просто и со вкусом, автоматически, но где-то без богатых возможностей.

Заключение

Reveal.js имеет широкую возможность кастомизации: внушительное количество плагинов (весьма вероятно, что то, что вам необходимо уже реализовано в виде плагина)

Reveal.js идеально подходит для демонстрации кода, а также для дальнейшей публикации слайдов в сети. Наличие возможности отображать markdown, а также html-формат в целом, позволяют генерировать контент слайдов автоматически.

Взамен нет возможности использовать GUI (за исключением slides.com), а также добавление произвольного функционала (например, анимации) времязатратно.

Однако, у вас есть JS и CSS, дающие практически безграничные возможности для творчества.

Ссылки

1. Веб-сайт reveal.js
2. Плагины для reveal.js

• презентация
• revealjs
• HTML-презентации

Источник: habr.com