Разработка учебного пособия по предмету "Web Технологии"


Описание интерфейса электронного учебника



бет26/37
Дата29.03.2022
өлшемі2,23 Mb.
#29107
түріДиплом
1   ...   22   23   24   25   26   27   28   29   ...   37
Байланысты:
Скроботов

2.5 Описание интерфейса электронного учебника

Получив набор функциональных требований, в виде диаграмм вариантов и анализа задач, решаемых ЭУ, также проанализировав предложения на рынке и сопоставив все принципы разработки интерфейса, был разработан макет интерфейса (Mockup) ЭУ – набор форм интерфейса, на котором должны быть реализованы функциональные требования.



Таким образом, были выделены два основных режима: обучение и тест. На режим Обучение была возложена реализация следующих функций:

    • легкочитаемость;

    • наглядность материала;

    • удобный поиск необходимого материала;

    • презентации по выбранным темам.

Итак, ярлык приложения будет выглядеть таким образом, как на рисунке 5.

Рисунок 5 - Ярлык приложения

На экране смартфона ярлык будет иметь вид, как на рисунке 6.



Рисунок 6 – Экран смартфона
При нажатии на ярлык появится главное меню как на рисунке 7.

Рисунок 7 – Главное меню приложения
В главном меню приложения отображаются пункты приложения «WEB - технологии». Первым пунктом является теория в виде лекций и презентаций, для прохождения данной части нужно нажать кнопку «Лекции». Тогда перед пользователем будет следующий вид, как на рисунке 8.

Рисунок 8 – Лекции
Далее при нажатии на требуемую лекцию появляется следующее окно рисунка 9.

Рисунок 9 – Лекции

В появившемся окне пользователю нужно выбрать в каком формате он хочет освоить материал и приступить к изучению материала. Если сделать выбор в пользу Word нужно нажать кнопку «СКАЧАТЬ DOCX», тогда получим вид, как на рисунке 10.



Рисунок 10 – Лекции в формате DOCX
Причем при скачивании на смартфон получаем хорошо читаемую страничку выбранной лекции, показанную на рисунке 11.

Рисунок 11 – Лекции в формате DOCX

В случае выбора презентации, получим вид как на рисунке 12.



Рисунок 12 – Лекции в виде презентаций
В открытом виде, презентация будет иметь как на рисунке 13

Рисунок 14 – Лекция в виде презентации
Изучив теоретическую часть, перейдем к лабораторной части предмета, нажав на кнопку «Лабораторка» (Рисунок 15) получим два вида отображения в зависимости от выбора одной из кнопок :


Рисунок 15 – Виды отображения лабораторных работ


Причем в странице «Лабораторка» вложены три вкладки, имеющие виды, показанные на следующих рисунках 16.

Рисунок 16 – Виды отображения вкладок лабораторных работ
На режим Тест была возложена реализация следующих функций:

–тестирования знаний пользователя учебника;

–обеспечение удобной навигации между тестовыми заданиями;
–доступность и корректность вопросов тестирования;

–подсказки;


–вывод результатов.


Рисунок 17 – Режим «Тест»
В результате тестирования студент отвечает на 20 вопросов, причем в случае правильного ответа при нажатии на выбранный ответ в графе «Правильные ответы» изменится число на единицу. В случае неправильного ответа число не изменится, а кроме нажатого ответа другим цветом отобразятся два ответа – выбранный и правильный.

В целом для эстетичности и придания солидности было создано еще одно окно «About» (Рисунок 18), при нажатии на него получим следующий вид:



Рисунок 18 – Режим «About»
Электронный учебник по WEB технологии был разработан в среде Eclipse в соответствии с требованиями, представленными в разрабатываемой документации. Исходя из макетов составленных ранее, была создана общая структура и интерфейс приложения. С помощью Java были реализованы основные функции. С помощью принципов разработки интерфейса были проработаны элементы пользовательского интерфейса, которые в последующем были созданы в графическом редакторе AdobePhotoshop CS6[11].

Графический пользовательский интерфейс для Android приложения построен с использованием иерархии View и ViewGroup объектов. View объекты, как правило– это UI виджеты, такие как кнопки или текстовые поля и ViewGroup, а также невидимые контейнеры, которые определяют, как будут использованьchild– элементы, например, в сетке или вертикальном списке [12].





Достарыңызбен бөлісу:
1   ...   22   23   24   25   26   27   28   29   ...   37




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет