Как описывать интерфейс программы

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

Слейте в свою ветку изменения из новой ветки lab- 6 . Как это сделать можно подглядеть в шпаргалке или загуглить.

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

• веб приложение (сайт в браузере)
• мобильное приложение
• консольное приложение
• приложение для приставки
• приложение для TV

Какой интерфейс лучше? Ответить на этот вопрос невозможно. Разные интерфейсы используются для работы с различными приложениями в зависимости от требований, находя баланс между удобством, эффективностью, затратами на производство и другими характеристиками. Также, для использования различных визуальных интерфейсов применяются различные аппаратные интерфейсы:

Что такое интерфейс в ООП. Интерфейс c++ пример. Изучение С++ для начинающих. Урок #113

• мышь и клавиатура для работы с веб-приложением
• смартфон для работы с мобильными приложениями
• джойстик для работы с приложением для приставки
• пульт для работы с приложением для TV

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

• Git — изначально консольный интерфейс, для которого также существуют дополнительно написанные интерфейсы — приложения для рабочего стола
• ВКонтакте — веб-приложение, мобильное приложение, приложение для рабочего стола
• Netflix — веб-приложение, мобильное приложение, приложение для TV, приложение для приставки, приложение для рабочего стола

Как видите, часто приложения имеют несколько разных интерфейсов для работы с ними. Каждый из них приходится разрабатывать отдельно, хотя на данный момент активно развивается движение прогрессивного веба. Главная причина появления этого движения — вселенская лень. Среди причин также: экономия денег и времени.

Идея заключается в том, что необходимо разработать одно веб-приложение для работы в браузере, которое будет принимать разные формы в зависимости от размера экрана, а браузер будет запущен на TV, смартфоне или приставке. Будем надеяться, что это станет распространено достаточно быстро.

Но даже сейчас веб-приложения — наиболее распространенный интерфейс. А значит и вакансий в сфере веб разработки наибольшее количество. Познакомимся с веб-приложениями поближе. Начнем разработку интерфейса для использования рекомендателя стран в браузере.

Требования к интерфейсу веб-приложения

Как быстро сделать графический интерфейс на Python

Как мы уже знаем, разработка начинается с требований. В случае разработки интерфейсов — требования представлены в визуальном виде, как правило от дизайнера. У нас, к сожалению, нет возможности нанять профессионального дизайнера, поэтому придется верстать ЭТО . Не самый привлекательный дизайн для нашей программы, но этого достаточно для того чтобы познакомиться с разработкой интерфейсов.

Требования оформляются в профессиональных дизайнерских инструментах, например, Adobe Illustrator , Adobe XD или Sketch . Раньше подобные приложения имели только приложения для рабочего стола, но тенденция перехода на веб-приложения дошла и до них. В нашем случае требования разработаны при помощи Figma. Figma — это онлайн-сервис для разработки интерфейсов и прототипирования .

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

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

Экспресс-экскурсия по ASP.NET Core MVC

После сливания изменений из ветки lab-6 в папке bukep-software-engineering появилась новая папка с решением CountriesRecommendationWebApp . Откройте эту папку в VS Code. Мы видим знакомую ранее структуру — 3 папки с проектами Helpers , Helpers.Texts и новый проект CountriesRecommendationWebApp . Откройте папку этого нового проекта. Перед вами типичная структура приложения ASP.NET Core MVC. Этот «шаблон» из папок и файлов подготовлен Microsoft для облегчения жизни разработчикам. Вы всегда можете создать приложение с шаблоном при помощи команды dotnet new webapp .

Кратко рассмотрим папки в проекте. Открывайте папки и смотрите файлы, чтобы сопоставить увиденное с описанием.

• Controllers — в папке располагаются контроллеры — специальные классы, методы которых связываются с интерфейсом и могут отправлять туда данные или получать данные из интерфейса. В консольном приложении мы писали код для связи интерфейса и нашей программы в классе Program и использовали методы чтения с консоли и вывода в консоль. В ASP.NET Core MVC приложении подобный код пишется в методах классов-контроллеров
• Enums — папка не создается по-умолчанию, но часто встречается в различных проектах. В эту папку помещают файлы с перечислениями (enum), в нашем случае там расположен enum CountrySize
• Models — в папке располагаются модели — классы с логикой приложения: UserPreferences и Country уже находятся там
• Properties — в папку «свойства» положили файл launchSettings.json — настройки запуска приложения. Заметьте, опять формат json
• Views — папка «представления» содержит файлы интерфейса приложения, а точнее — его HTML разметки. Скоро мы увидим что это такое на примере, а затем познакомимся с теорией на лекции
• wwwroot — в папке «www корень» располагаются «статические» файлы — файлы стилей CSS, картинки, код javascript. Эти файлы загружаются в браузер пользователю для работы приложения
• appsettings.json и appsettings.Development.json — настройки приложения. И снова в формате json
• CountriesRecommendationWebApp.csproj — уже известный нам файл проекта. В нем уже есть строка подключения проекта Helpers , вам не придется снова это делать
• Program.cs — класс, в котором инициализируется и запускается приложение
• Startup.cs — класс, с которого начинается запуск приложения. Входная точка приложения с настройками

Экскурсия окончена! Теперь пишем код! Не переживайте если не все понятно (или все не понятно), на этой лабораторной работе мы просто «щупаем» приложение вслепую. Теория последует на лекции.

Разработка разметки на HTML

1. В папке Views/Home Создайте файл CountryInfo.cshtml . Расширение cshtml происходит от cs ( сs harp) и html(hypertextmarkuplanguage — язык гипертекстовой разметки) . Это все потому, что мы сможем писать в этом файле и HTML и C# код
2. Добавьте «шапку» страницы, то есть ее верхнюю часть. У нас там логотип и название приложения «Рекомендатель стран». Для этого нам понадобится следующий код:

Рекомендатель стран

Что это такое? Все это — теги. Ведь HTML — теговый язык разметки документов. Каждый документ — это набор тегов, который описывает структуру (разметку) страницы.

• img — тег im a g e (картинка) для встраивания картинок в приложение. Внутрь картинки ничего поместить нельзя, поэтому тег img — одиночный (у него нет закрывающего тега). У тега img также есть один важный атрибут — src ( s ou rc e — источник). В значении атрибута необходимо указать путь к картинке. В нашем случае файл с логотипом logo.png располагается в папке wwwroot/images . Вместо полного пути к файлу можно указать ~/images/ , где ~ обозначает корневую папку, в нашем случае — папка wwwroot . src — не единственный атрибут, все теги имеют различные атрибуты
• h1 — заголовок ( h eader) первого уровня, то есть самый большой и главный заголовок. Есть еще h2 , h3 , h4 , h5 , h6 , каждый меньше предыдущего. Тег парный, то есть у него есть и открывающийся
  

  и закрывающийся

  теги, а внутри можно помещать текст

Запустим наше приложение. Вы можете сделать это в разделе запуска приложения VS Code, как было показано ранее. Оно запускается на локальном хосте, то есть ваш компьютер — и есть сервер приложения на котором оно работает. Для удобства за вас уже установили веб-сервер вместе с dotnet SDK.

Ваш браузер — это клиент, который может пользоваться этим приложением благодаря серверу. По умолчанию ASP.NET Core MVC приложение запускается на порте 5000. Чтобы открыть нашу новую страничку, необходимо в браузере в адресную строку ввести https://localhost:5001/Home/CountryInfo . Попробуем. Изменений не видно.

Для того, чтобы все заработало необходимо добавить новый метод в класс HomeController в папке Controllers . После метода Index() добавьте следующий код:

public IActionResult CountryInfo ()

Но в браузере все еще ничего не изменилось. Все дело в том, что приложение на C# — компилируемое. А значит, после внесения изменений, каждый раз необходимо перекомпилировать всё приложение и запускать его заново. Избежать этого невозможно, разве что выбрать другой язык программирования. Но компилируемые языки дают слишком много плюсов, чтобы вот так просто от них отказаться.

Хотя избавиться от необходимости перекомпилировать приложение каждый раз после внесения изменений не получится — можно эту задачу автоматизировать! И, конечно, мы не первые кто об этом задумался. У программы dotnet уже есть такая команда.

3. В терминале перейдите в папку bukep-software-engineering/CountriesRecommendationWebApp/CountriesRecommendationWebApp и введите:

dotnet watch run

Эта команда запустила приложение в особом режиме watch . Теперь каждый раз после изменения и сохранения файла в терминале вы увидите это

watch : File changed: /home/vitalii/Documents/Repos/bukep-software-engineering/CountriesRecommendationWebApp/CountriesRecommendationWebApp/Controllers/HomeController.cs

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

Запустили приложение — видим результат! Однако расположения логотипа и названия приложения не соответствуют макету. В макете название идет сразу за логотипом в одну строку, а здесь каждый блок занял свою строку. Наша главная задача при написании html — задать верную структуру расположения элементов. Объединим их в одну строку при помощи еще одного тега.

Для объединения тегов в одну строку первым делом необходимо добавить «внешний» тег, в котором будут располагаться эти теги. В нашем случае отлично подойдет тег header .

• header — специальный тег для обозначения шапки приложения, где часто расположены логотип и название. Как раз то, что нам нужно. Тег «парный», то есть у него есть и открывающийся и закрывающийся теги, а внутри располагаются другие элементы

4. Обернем логотип и название тегом header следующим образом:

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

Класс row (строка) — это класс библиотеки стилей boostrap . Опять же — библиотека, только на этот раз не только с кодом, но и с файлами стилей для внешнего вида страницы и описания правил расположения элементов на этой странице. Часто встречаемая задача — поставить элементы в одну строку решена за нас, а мы просто используем готовый код других разработчиков. Класс!

Добавим остальной контент страницы. Нам нужно добавить название страны (это будет заголовок раздела о стране) и информацию об этой стране в виде списка фактов.

5. После закрывающегося тега header добавьте заголовок второго уровня, и впишите туда текст — Индия

Индия

6. Добавьте список. Списки обозначаются тегами ul или ol в зависимости от того, нужен ли нам ненумерованный список ( u nordered list) или нумерованный список ( o rdered l ist). В нашем случае подойдет ненумерованный список. После тега заголовка добавьте парный тег ul

7. В список добавьте два элемента списка ( l ist i tem) при помощи тега li

8 . В каждом элементе списка будет располагаться текст. Текст добавляется при помощи тега p от слова p aragraph (параграф). В каждом параграфе сразу добавьте текст с информацией о стране

Средняя зарплата: 88 $

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

Для выравнивания блока при помощи bootstrap первым делом необходимо объединить информацию в один блок, как мы это сделали с логотипом и названием приложения.

9. Заключите заголовок с названием страны и список с информацией о стране в тег (секция). Часто контент сайта можно условно разделить на секции, это популярный тег который помогает удобно организовывать блоки верхнего уровня на странице. Тег парный, а значит имеет закрывающийся тег. Вам необходимо организовать разметку таким образом, что заголовок и список будут вложены в этот блок, то есть будут находится между открывающим и закрывающим тегами.

Центрирование при помощи bootstrap предстоит сделать в 3 этапа — задать размер блока, центрировать его посередине страницы, выровнять текст внутри блока посередине.

10. Сперва определим какую часть страницы будет занимать информация о стране. Судя по макету это примерно 1/4 часть страницы. В bootstrap для разметки используют не только строки (класс row ), но и колонки (класс col ), часто с различными значениями ( col-1 , col-2 , col-3 . col-12 ) . В итоге получается сетка из сток и колонок внутри этих строк. Страница в bootstrap разделена на 12 колонок.

Каждую из них также можно разбить на 12 колонок и так далее. Такое количество выбрали, потому что 12 нацело делится на 6, 4, 3 и 2, что очень удобно и позволяет легко покрыть большинство требований верстки. Определим для этого блока 3 колонки при помощи класса col-3

Источник: www.bukep-software-engineering.ru

Что делает интерфейс простым

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

На самом деле, за внимание человека конкурирует целая куча отвлекалок:

• Окружение: коллеги на работе, дети дома, машины и пешеходы на улице.
• Насущные дела: отчёт должен быть готов через 10 минут, от сковороды уже воняет гарью, мерзко пиликает напоминалка о встрече.
• Программы-конкуренты: пуш-оповещения от мессенджеров и других приложений.

Хорошо, если в этом аду человек уделит 30% внимания вашей программе. Но не надолго — всё равно будет постоянно отвлекаться.

Даже в таких неприятных условиях программа может оставаться удобной. Для этого она должна:

• быть простой,
• не нагружать мозг,
• прощать ошибки.

Про «не нагружать мозг» и «прощать ошибки» поговорим в другой раз, а пока остановимся на «быть простой».

Модель программы

Ещё до того, как пользователь в первый раз запустил программу, у него в голове уже сложилось представление, как она работает.

Так, это заказ такси. Значит, я выбираю откуда-куда и тариф, приезжает машина, везёт по адресу, деньги списывает с карты.

Так, это CRM. Значит, там я веду сделки и историю общения по каждому клиенту, а она мне строит воронку продаж и всякие разные отчёты.

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

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

Пользовательская модель программы — это то, как человек воспринимает её логику и устройство. Она может не совпадать (и наверняка не совпадает) с тем, как программу воспринимают:

• продакт-менеджер,
• дизайнер,
• программист,
• тестировщик.

У этих ребят модели намного более полные, целостные и логичные. Но их невозможно вложить человеку в голову. Поэтому самая главная — пользовательская модель.

Это плохая новость. Хорошая новость — пользовательскую модель тоже можно спроектировать. Для этого достаточно представить, как ваш софт будет воспринимать обычный человек, не питающий к программе особо тёплых чувств, зато обременённый нехваткой внимания и времени.

Ключевое свойство хорошей пользовательской модели — простота. Если модель у вас с кучей шагов, нюансов, возможностей, с навороченной логикой взаимодействия, с необходимыми пояснениями — это плохая модель. Если вы рассказали о программе трём посторонним людям, спросили «как это по-твоему работает?» и ни один не угадал — это плохая модель. Если для описания модели приходится рисовать блок-схему — это очень, очень плохая модель.

Здоровая модель и модель курильщика

Вот модель, которая осталась у меня от работы с довольно известным сервисом:

♞ Сервис № 1 по вызову мастера для мелкого бытового ремонта

Я оформляю заявку: пишу, что сломалось, указываю стоимость, адрес и телефон.

Выбираю, буду ли подбирать мастера самостоятельно или с помощью администратора.

Если я выбрал «самостоятельно», сервис подбирает мастеров, которые потенциально подходят для этой работы. Не знаю, почему это называется «самостоятельно», если подбирает сервис, а не я.

Если я выбрал «с помощью администратора», то мастеров подбирает администратор. Но это не точно, я не проверял.

Даже при «самостоятельном» варианте некоторых мастеров всё равно почему-то подбирает администратор. Автоматически и вручную подобранные мастера показываются по-разному, потому что чёрт его знает почему.

Если мастер онлайн, он откликается и присылает мне встречную заявку (такое ощущение, что я государственная корпорация и провожу тендер на много миллионов рублей). Я принимаю заявку и назначаю мастера на заказ.

Если у мастера есть вопросы, он задаёт их в чате. Чат с каждым мастером отдельный, и «чужие» чаты мастерам не видны. Если вопросы повторяются, я копирую ответы из чата в чат.

Ещё иногда мастер может быть оффлайн, но это ничего. Я всё равно могу отправить ему приглашение. Мастер получит его по СМС и откликнется. Но это не точно, я не проверял.

… (пропустим остаток для краткости)

Если бы меня заранее спросили «как работает сервис вызова мастера по ремонту», я бы никогда не предложил такую модель. Я бы ответил примерно так:

♞ Сервис № 2 по вызову мастера для мелкого бытового ремонта

Я оформляю заявку: пишу, что сломалось, указываю стоимость, адрес и телефон.

Мастера видят мою заявку и откликаются на неё.

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

Если мастер задаёт уточняющие вопросы, я отвечаю. Ответы видят все, чтобы мне не повторяться.

Где во второй модели шаги вроде «выбрать самому или с помощью администратора», «мастер отправляет встречную заявку на мою заявку» и разделение между «онлайн» и «офлайн» мастерами? Их нет. Наверняка, для разработчиков они выглядят логично и обоснованно — но не для нормального человека. Я не буду больше пользоваться сервисом № 1 — он сделал мою жизнь сложнее, а не проще.

Внутренняя сложность

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

• Если бы сервис № 1 спрятал все свои нюансы, показал подходящим мастерам мою заявку, а мне — только тех, кто на неё откликнулся — было бы вполне ОК.
• Если бы внутри у него работала сложнейшая система искусственного интеллекта, которая с вероятностью 99,999% нашла лучшего в мире мастера под мой заказ, а я увидел бы только конечный результат — ОК.
• Если бы то же самое делал не искусственный интеллект, а 20 тысяч сотрудников по всей стране — ОК, какая мне разница.

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

Слон кусочками

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

Например, «Дадата» обрабатывает файл с адресами и телефонами, исправляя ошибки и восстанавливая недостающую информацию. Идеальная модель выглядела бы так:

бросил на страницу файл → получил готовый с исправленными данными

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

1. Загрузить файл.
2. Убедиться, что «Дадата» правильно угадала, в каких столбцах какие данные лежат.
3. На 100 записях убедиться, что результат устраивает.
4. Оплатить, если не хватает денег на обработку.
5. Дождаться результата (с этого шага уже можно уйти).
6. Скачать результат.

Если вывалить на пользователя шаги 1–4 одним махом, вышло бы что-то монструозное. А так в каждый момент времени человек сосредоточен на конкретном шаге. Шаги по отдельности несложные, но все вместе решают непростую задачу.

Ментальная переподготовка

Человек подходит к новой программе с готовой ментальной моделью. Обычно, пытаться его переобучить — плохая идея. Проще подстроиться, а не бороться с устоявшимися шаблонами поведения.

Но бывает, что пользователь привык к плохому, а вы придумали что-то такое, что прямо ах:

• Раньше привычка жать Ctrl+S была у каждого опытного пользователя. Потом Гугл-документы многих отучили.
• Раньше уважающий себя бухгалтер регулярно ездил в налоговую с дискеткой. Теперь пользуется «Контуром», жмёт на кнопку и в ус не дует.
• Раньше интернет-магазины требовали адрес из шести полей, и обязательно почтовый индекс. Теперь многие сообразили, что можно не напрягать человека, а мучить «Дадату» (ей всё равно, она железная).

Ради стоящего дела можно и переподготовкой пользователей заняться. Но если вы чаще сталкиваетесь с реакцией «ох, что вы тут напридумывали», чем «ого! а так можно было?!» — лучше не надо.

Соответствие ожиданиям

Если программа ведёт себя так, как ожидает человек, то он воспринимает интерфейс как удобный и «интуитивный».

Ожидания человека формируются из:

• платформы,
• среды и навыков,
• целей.

Платформа

Базовое ожидание пользователя — программа выглядит и ведёт себя, как принято на «родной» платформе: Windows, macOS, iOS, Android или веб. Правила платформы лучше соблюдать — это делает интерфейс привычным для пользователя и не заставляет его напрягать голову без необходимости.

Для десктопных и мобильных ОС написаны гайдлайны 1 . С вебом сложнее — общих руководств нет. Лично мне нравятся «Контур.Гайды 2 ». Если вам они не по душе, можно найти другие или подсмотреть интерфейсные приёмы у известных веб-сервисов.

Среда и навыки

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

Среду и навыки проще всего понять, наблюдая за пользователями. Это отдельная большая тема, которую мы рассматривать не будем.

Цели

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

• никакой теоретической подготовки,
• никаких настроек,
• очень просто в использовании, «одна кнопка»,
• видно, как с каждым разом я всё ближе к цели.

Цели и сценарии лучше прописать до начала проектирования интерфейса. Как это сделать — отдельная тема. Алан Купер посвятил ей целую книгу 3 .

Запомнить

У человека в голове есть представление о том, как устроена ваша программа — ментальная модель.

«Стихийная» модель не получится хорошей, поэтому лучше спроектируйте её.

Хорошая модель — простая. В создании простых моделей помогают приёмы «сложность под капот» и «слон кусочками».

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

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

Пропишите цели и сценарии работы пользователя с программой — это поможет выявить остальные ожидания.

Следующая статья цикла:

Спасибо Ольге Коноваловой за помощь в подготовке статьи.

Ссылки по тексту:

1. Гайдлайны для разных платформ: Apple, Google, Microsoft↩︎
2. Контур.Гайды↩︎
3. «Психбольница в руках пациентов» ↩︎

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

Источник: antonz.ru

Создание пользовательских интерфейсов 3Д-веб-приложений на основе ХТМЛ

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

• Введение
• Куда добавлять ХТМЛ и ЦСС
• Быстрый обзор: Подогреватель чайников
• Урок

• Дизайнерский подход
• Подход веб-разработчиков

Введение

Стандартные шаблоны «Вердж3Д»-приложений предлагают одностраничный широкоэкранный макет с полноэкранной кнопкой и прелоадером. Интерактивные элементы, такие как кнопки, могут быть реализованы как 3Д-объекты, прикрепленные к камере (то же самое относится и к текстовым блокам).

Однако более гибким и эффективным подходом будет использование установленных веб-стандартов для создания пользовательских интерфейсов. С помощью ХТМЛ и ЦСС вы можете создать любой макет для своего приложения. Пользовательский интерфейс и особенно текст, созданные с помощью ХТМЛ и ЦСС, благодаря специализированным механизмам растеризации современных веб-браузеров обычно выглядят более четкими, чем их 3Д-аналоги. Этот подход также позволит вам легко смешивать 2Д-медиа, такие как изображения, видео и веб-ссылки, с ВебГЛ-контентом и стилизовать ваше приложение в соответствии с дизайном веб-сайта, на котором оно будет установлено.

Существует множество инструментов для веб-дизайна, начиная от простого текстового редактора и заканчивая полноценными конструкторами сайтов. Последние могут создавать полные наборы ХТМЛ/ЦСС/«ЯваСкрипт», готовых к использованию веб-страниц, позволяя вам никогда не прикасаться к коду.

Куда добавлять ХТМЛ и ЦСС

Предположим, вы создали свое приложение с помощью менеджера приложений (с параметрами конфигурации по умолчанию) и назвали его my_awesome_app. Если вы заглянете в папку my_awesome_app находящуюся в папке приложений, то найдете там файлы my_awesome_app.html и my_awesome_app.css, которые, казалось бы, естественно начать редактировать — однако не стоит с этим торопиться!

На практике вы, возможно, никогда не захотите редактировать эти файлы, поскольку они автоматически генерируются менеджером приложений и могут быть переопределены в результате обновления. Более надежным способом добавления собственного ХТМЛ/ЦСС в приложение «Вердж3Д» является создание нового файла .html, в который встраивается .html приложения «Вердж3Д» в стиле матрешки.

Быстрый обзор: Подогреватель чайников

Посмотрите на следующий пример («Подогреватель чайников»): весь интерфейс построен с помощью стороннего программного обеспечения для веб-дизайна и сохранен как index.html (это имя не является обязательным). Помимо ХТМЛ-элементов интерфейса, файл index.html содержит элемент iframe, в который встроен проект «Вердж3Д» — teapot_heater.html.

В менеджере проектов «Вердж3Д» такой составной проект имеет два значка запуска, которые можно использовать для независимого запуска чистого проекта «Вердж3Д» или собранного приложения:

Наконец, 2Д и 3Д части логически связаны между собой с помощью ХТМЛ-пазлов.

Урок

В следующем уроке мы покажем, как создать простое приложение с пользовательским интерфейсом на основе ХТМЛ. В этом приложении будет только 2 кнопки для скрытия и раскрытия стандартного куба.