Разработка учебного пособия по предмету "Web Технологии"
Описание интерфейса электронного учебника
жүктеу/скачать 2,23 Mb.
|
Скроботов
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]. жүктеу/скачать 2,23 Mb. Достарыңызбен бөлісу:
|