Разработка электронного учебного пособия по дисциплине "Архитектура компьютерных систем"

Размещено на http://www.allbest.ru/

Федеральное агентство связи

Федеральное государственное бюджетное образовательное учреждение высшего образования

«Сибирский государственный университет телекоммуникаций и информатики»

Уральский технический институт связи и информатики (филиал) в г. Екатеринбурге (УрТИСИ СибГУТИ)

Цикловая комиссия

Информационных технологий и АСУ кафедры ИСТ

Допустить к защите

Председатель ЦК ИТ и АСУ кафедры ИСТ

Выпускная квалификационная работа

Разработка электронного учебного пособия по дисциплине

«Архитектура компьютерных систем» для АИС кафедры ИСТ

Выпускник Борисова А.Р.

Руководитель Королев Д.Э

Рецензент Белкина А.В.

Факультет ИИиУ Группа 781

2020 г



Федеральное агентство связи

Федеральное государственное бюджетное образовательное учреждение высшего образования

«Сибирский государственный университет телекоммуникаций и информатики» Уральский технический институт связи и информатики (филиал) в г. Екатеринбурге (УрТИСИ СибГУТИ)

КАФЕДРА

Информационных систем и технологий

Цикловая комиссия информационных технологий и АСУ

ЗАДАНИЕ

на выпускную квалификационную работу студенту Борисовой Анастасии Руслановной группы 781

Утверждаю

Председатель ЦК ИТиАСУ Д.Э. Королев (подпись, Ф.И.О.) « 15 » 11 2019 г.

Екатеринбург 2019 г.

1. Тема выпускной квалификационной работы Разработка электронного учебного пособия по дисциплине «Архитектура компьютерных систем» для АИС кафедры ИСТ утверждена приказом № от « 15 » 11 2019 г. по университету.

2. Срок сдачи студентом законченной выпускной квалификационной работы 26.06.2020

3. Исходные данные к выпускной квалификационной работе (эксплуатационно-технические данные)

1)Технические средства. - компьютер на базе windows 7

2) Программные средства: - Microsoft Visual Studio Code ;

- браузер Google Chrome;

- TinyMCE Text Editor.



4. Содержание расчетно-пояснительной записки (перечень подлежащих разработке вопросов).	Срок выполнения по разделам
Введение	28.02.2020
1 Обоснование необходимости выполнения проекта	28.03.2020
1.1 Понятие электронного пособия	25.02.2020
1.2 Основные формы электронных учебных пособий	27.03.2020
1.3 Электронный учебник как средство самообразования	27.03.2020
1.4 Обоснование необходимости разработки электронного пособия	28.03.2020
2 Программная реализация приложения	30.04.2020
2.1 Описание инструментальных средств разработки	10.04.2020
2.2 Алгоритм работы программы	20.04.2020
2.3 Инструкция по использованию	30.04.2020
3 Безопасность жизнедеятельности	21.05.2020
3.1 Требования к помещениям для работы с ПЭВМ	07.05.2020
3.2 Выявление опасных и вредных факторов при работе	15.05.2020
3.3 Меры безопасности при работе на ПЭВМ.	17.05.2020
3.4 Требования безопасности в аварийных ситуациях	18.05.2020
3.5 Требования безопасности по окончании работы	21.05.2020
Заключение	26.05.2020
Библиография	29.05.2020

5. Перечень графического материала (с точным указанием обязательных чертежей):

- описание интерфейса программы;

- структура приложения;

- навигация по приложению;

- интерфейс тестовой части;

- интерфейс основной части.

6. Перечень используемых информационных технологий при выполнении и защите выпускной квалификационной работы:

- персональный компьютер с операционной системой Windows 7;

- Microsoft Office 2010;

- Microsoft Visual Studio Code ;

- Microsoft Office Power Point;

- интернет браузер.

Консультанты по выпускной квалификационной работе (с указанием относящихся к ним разделов работы)

Королев Дмитрий Эдуардович (по содержанию расчетно-пояснительной записки)

Королев Дмитрий Эдуардович (по нормоконтролю)

Дата выдачи задания 15.11.2019

Руководитель выпускной квалификационной работы Д.Э. Королев (подпись, Ф.И.О.)

Задание принял к исполнению « 15 » 11 2019 г. ____________________ (подпись студента)



Аннотация

Данная выпускная квалификационная работа состоит из введения, трех разделов, заключения, библиографии. Содержание работы изложено на 43 страницах, иллюстрировано 8 рисунками. Библиография насчитывает - используемых источников.

Целью выпускной квалификационной работы является разработка электронного пособия «Архитектура компьютерных систем» для АИС кафедры ИСТ для облегчения поиска информации преподавателям и студентам Уральского технического института связи и информатики, а также любых других высших и средних специальных учебных заведений.

В выпускной квалификационной работе рассмотрены следующие вопросы:

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

Итогом выполнения выпускной квалификационной работы стало разработанное электронное пособие «Архитектура компьютерных систем» для АИС кафедры ИСТ для облегчения поиска информации преподавателям и студентам Уральского технического института связи и информатики, а также любых других высших и средних специальных учебных заведений.

This final qualifying work consists of an introduction, three sections, conclusion, and bibliography. The content of the work is presented on 43 pages, illustrated with 8 figures. The bibliography includes-used sources.

The purpose of the final qualification work is to develop an electronic manual "Architecture of computer systems" for the AIS Department of IST to facilitate the search for information for teachers and students of the Ural technical Institute of communications and Informatics, as well as any other higher and secondary specialized educational institutions.

In the final qualifying work, the following questions are considered:

justification of the need, module development and selection of development tools, practical implementation, description of the developed application, user safety.

The result of the final qualification work was the developed electronic manual "Architecture of computer systems" for the AIS Department of IST to facilitate the search for information for teachers and students of the Ural technical Institute of communications and Informatics, as well as any other higher and secondary specialized educational institutions.



Содержание

Введение

1. Обоснование необходимости выполнения проекта

1.1 Понятие электронного пособия

1.1.1 Из разных источников следуют следующие определения электронного учебника

1.1.2 Учебные пособия использующиеся для учебного процесса

1.2 Основные формы электронных учебных пособий

1.2.1 Как и в создании любых сложных систем, при подготовке электронного учебника решающим для успеха является талант и мастерство авторов

1.2.2 Современные электронные учебники должны обеспечивать творческую работу учащегося с объектами изучения и с моделями систем взаимодействующих объектов

1.3 Электронный учебник как средство самообразования

1.4 Обоснование необходимости разработки электронного пособия

1.4.1 Стремительный процесс компьютеризации образования на основе современных компьютерных систем, поступающих в учебные заведения страны, открывает в образовании путь электронным учебникам

1.4.2 Разработка электронного пособия на тему «Архитектура компьютерных систем» необходима и заполнит брешь в составе обучающих программ курса программирования компьютерный систем

2. Программная реализация приложения

2.1 Описание инструментальных средств разработки

2.2 Алгоритм работы программы

2.3 Инструкция по использованию

3. Безопасность жизнедеятельности

3.1 Требования к помещениям для работы с ПЭВМ

3.1.1 Эксплуатация ПЭВМ в помещениях без естественного освещения допускается только при наличии расчетов, обосновывающих соответствие нормам естественного освещения и безопасность их деятельности для здоровья работающих

3.1.2 Не допускается размещение мест пользователей ПЭВМ во всех образовательных и культурно-развлекательных учреждениях для детей и подростков в цокольных и подвальных помещениях

3.1.3 Для внутренней отделки интерьера помещений, где расположены ПЭВМ, должны использоваться диффузно отражающие материалы с коэффициентом отражения для потолка - 0,7-0,8; для стен - 0,5-0,6; для пола - 0,3-0,5

3.1.4 Помещения, где размещаются рабочие места с ПЭВМ, должны быть оборудованы защитным заземлением (занулением) в соответствии с техническими требованиями по эксплуатации

3.2 Выявление опасных и вредных факторов при работе

3.3 Меры безопасности при работе на ПЭВМ

3.4 Требования безопасности в аварийных ситуациях

3.4.1 Пользователь обязан

3.5 Требования безопасности по окончании работы

3.5.1 Привести в порядок рабочее место

Заключение

Библиография



Введение

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

Целью выпускной квалификационной работы является разработка электронного пособия «Архитектура компьютерных систем» для АИС кафедры ИСТ для облегчения поиска информации преподавателям и студентам Уральского технического института связи и информатики, а также любых других высших и средних специальных учебных заведений.

Для реализации поставленной цели необходимо решить следующие задачи:

изучить соответствующую научную литературу;

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

собрать и отредактировать материал, разбить материал на главы и темы;

выполнить анализ инструментов и средств решения задачи, выбрать программы и языки создания пособия;

разработать программу;

определить требования безопасности при работе с персональным компьютером.

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



1. Обоснование необходимости выполнения проекта

1.1 Понятие электронного пособия

1.1.1 Из разных источников следуют следующие определения электронного учебника

Это совокупность графической, текстовой, цифровой, речевой, музыкальной, видео-, фото- и другой информации, а также печатной документации пользователя. Электронное издание может быть исполнено на любом электронном носителе - магнитном (магнитная лента, магнитный диск и другие), оптическом (CD-ROM, DVD, CD-R, CD-1, СD+ и другие), а также опубликовано в электронной компьютерной сети.

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

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

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

Это текст, представленный в электронной форме и снабженный разветвленной системой связей, позволяющей мгновенно переходить от одного его фрагмента к другому в соответствии с некоторой иерархией фрагментов [1].

1.1.2 Учебные пособия использующиеся для учебного процесса

Как уже говорилось, для последовательного усвоения материала необходимы программы обучения. Это может быть учебно-программное издание - учебное издание, регламентирующее состав, объем, порядок, сроки изучения учебных дисциплин, предусмотренных для данного учебного заведения. Разновидностями учебно-программных издания являются:

учебный план;

учебная программа;

учебно-теоретические издания.

Учебные издания содержат систематизированные научно-теоретические сведения, изложенные в форме, удобной для изучения и усвоения. К ним относятся:

учебник;

учебное пособие;

отдельная лекция;

тексты лекций;

курс лекций;

конспект лекций.

1.2 Основные формы электронных учебных пособий

1.2.1 Как и в создании любых сложных систем, при подготовке электронного учебника решающим для успеха является талант и мастерство авторов

Тем не менее, существуют устоявшиеся формы электронных учебников, точнее, конструктивных элементов, из которых может быть построен учебник.

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

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

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

1.2.2 Современные электронные учебники должны обеспечивать творческую работу учащегося с объектами изучения и с моделями систем взаимодействующих объектов

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

Электронный учебник должен быть адаптируем к учебному процессу. Такая среда, например, обеспечивает включение дополнительных материалов в электронную энциклопедию, позволяет пополнять задачник, готовить раздаточные материалы и методические пособия по предмету. Фактически, это подобие инструмента, с помощью которого создается сам электронный учебник.

Традиционно электронные учебники вербальны по своей природе. Они излагают теорию в текстовой или графической форме. Это является наследием полиграфических изданий. Но в электронном учебнике возможно реализовать методический прием «делай как я». Такая среда наделяет электронный учебник чертами живого учителя.

Перечисленные формы электронного учебника могут быть реализованы в виде отдельных электронных учебников либо сгруппированы в рамках единого ансамбля. Все зависит от замысла «автора». Автор должен владеть знаниями об истории и возможностях электронных учебников[2].

1.3 Электронный учебник как средство самообразования

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

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

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

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

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

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

стимулирование интеллектуальной активности учащихся с помощью определения целей изучения и применения материала, а так же вовлечения учащихся в отбор, проработку и организацию материала;

усиление учебной мотивации, что достигается путем четкого определения ценностей и внутренних причин, побуждающих учиться;

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

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

принцип активности;

принцип самостоятельности;

принцип сочетания коллективных и индивидуальных форм учебной работы;

принцип мотивации;

принцип связи теории с практикой;

принцип эффективности.

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

индивидуализировать подход к ученику и дифференцировать процесс обучения; контролировать обучаемого с диагностикой ошибок и обратной связью; обеспечить самоконтроль и самокоррекцию учебно-познавательной деятельности учащегося;

демонстрировать визуальную учебную информацию;

моделировать и имитировать процессы и явления;

прививать умение в принятии оптимальных решений;

повысить интерес к процессу обучения;

передать культуру познания.

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

определить основные цели, устанавливающие, что учащиеся должны изучить;

конкретизировать поставленные цели, определив, что учащиеся должны уметь делать;

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

Очень важно добиваться того, чтобы поставленные цели помогали определить, что ожидается от учащихся после изучения этого курса. Конкретизация целей позволяет дать представление о том, что учащийся в состоянии будет, сделать в конце каждого урока. Фактически необходима постановка целей для каждого урока курса. Цели помогают сконцентрироваться на развитии познавательной деятельности учащихся и определить, на какой стадии познания он находится.

Правильно сформулированные цели позволят учащимся:

настроить мышление на тему обучения;

сфокусировать внимание на наиболее важных проблемах;

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

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

контроль знаний осуществляется с помощью полной и валидной системы тестового контроля по каждой структурной единице и содержанию в целом[4]. Изучение, таким образом, предметов курса может быть использовано студентами, имеющими сложности при традиционном обучении, в качестве своеобразного репетитора по конкретным предметам и темам. электронный учебный интерфейс компьютер

1.4 Обоснование необходимости разработки электронного пособия

1.4.1 Стремительный процесс компьютеризации образования на основе современных компьютерных систем, поступающих в учебные заведения страны, открывает в образовании путь электронным учебникам

Необходимо четко определить отличительные признаки электронного учебника от печатного.

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

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

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

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

1.4.2 Разработка электронного пособия на тему «Архитектура компьютерных систем» необходима и заполнит брешь в составе обучающих программ курса программирования компьютерный систем

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



2. Программная реализация приложения

2.1 Описание инструментальных средств разработки

JavaScript - объектно-ориентированный скриптовой язык программирования.

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

Для создания механизма управления страницами на клиентской стороне было предложено использовать объектную модель документа. Суть модели в том, что каждый HTML-контейнер - это объект, который характеризуется тройкой:

свойства;

методы;

события.

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

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

Данный язык программирования имеет некоторые достоинства:

быстрота;

простота;

универсальность.

Сценарий Java написан для клиентской стороны, для поддержки веб-сервера не требуется поддержка. Он также не нуждается в компиляции на стороне клиента, что дает ему определенные преимущества скорости. Поскольку сценарий выполняется на компьютере пользователя, в зависимости от задачи, результаты выполняются почти мгновенно. Например, вы можете проверить любой пользовательский ввод перед отправкой запроса на сервер. Это снижает нагрузку на сервер.

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

JavaScript отлично работает с другими языками и может использоваться в самых разных приложениях. В настоящее время существует множество способов использования JavaScript через серверы Node.js. Если вы загрузили node.js с помощью Express, используйте базу данных документов, такую как mongodb, и используйте JavaScript в интерфейсе для клиентов, вы можете создать приложение JavaScript полностью из одного окна вперед, используя только JavaScript.

Данный язык программирования имеет недостатки:

безопасность;

поддержка браузера;

много конкурентов;

требуется загрузка файла.

JavaScript явно добавлен к веб-страницам и клиентским браузерам, он может использовать систему пользователя, поэтому вредоносный код может быть запущен на клиентской машине.

JavaScript иногда интерпретируется по-разному разными браузерами. Различные механизмы компоновки могут отображать JavaScript по-разному, что приводит к несогласованности с точки зрения функциональности и интерфейса. Большая часть JavaScript зависит от манипуляции элементами DOM браузеров. Разные браузеры предоставляют разные типы доступа к объектам, в частности Internet Explorer. Если отключить JavaScript в браузере, весь код JavaScript не будет запущен.

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

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

2.2 Алгоритм работы программы

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

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

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

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

постоянство - возможность осуществлять одинаковые операции при помощи одних и тех же команд с клавиатуры или мышью посредством зрительно одинаковых органов управления;

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

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

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

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

привлекательность. Для среднего пользователя привлекательность, а то и развлекательность интерфейса имеет большое значение.

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

- интересное содержание;

- оригинальное техническое задание;

- отличный дизайн.

Отличный дизайн - это не только правильно подобранная и гармонично распределенная цветовая схема программы, но логически правильное размещение компонентов на схеме страницы. Тщательно продуманные, казалось бы, такие мелочи, как ширина полей, размер и цвет шрифта, цвет и рисунок фона, размещение и оформление гиперссылок и такое прочее значительно облегчают восприятие материала и упрощают пользование программой. В итоге интерфейс программы имеет оригинальный дизайн, и в то же время, весьма узнаваем (имеет сходства с программами Microsoft Office), что немаловажно для рядового пользователя[3].

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

1) яркость объекта должна лежать в определенных пределах;

2) контрастность изображения относительно фона должна выбираться с учетом размеров объекта: чем меньше его размер, тем выше должна быть его контрастность;

3) следует учитывать, что наибольшую чувствительность глаз имеет к излучению желто-зеленого цвета, наименьшую - к фиолетовому и красному;

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

5) все поле зрения, охватываемое глазом, можно разбить на три зоны: центрального зрения, где наиболее четко различаются детали; ясного видения, где можно опознать объект без мелких деталей; периферического зрения, где предметы обнаруживаются, но не распознаются;

6) зрительное ощущение нарастает и спадает постепенно, в сумме это время составляет 0,5 секунды.

Нужно соблюдать правила, регулирующие плотность расположения текста на экране:

оставлять пустым приблизительно половину экрана;

оставлять пустую строку после каждой пятой строки таблицы;

оставлять 4 или 5 пять пробелов между столбцами таблицы.

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

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

Меню, содержащее относительно небольшой объем информации, должно быть смещено в левую верхнюю часть экрана.

Один и тот же тип информации должен появляться всегда в одном и том же месте экрана.

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

Из-за низкого разрешения экрана ПК ухудшается различимость шрифтовых знаков. Поэтому экранный шрифт должен быть крупнее, чем при печати на бумаге, а именно - соответствовать как минимум типографскому кеглю цицеро, равному 12 пунктам[3].

Как показывает практика экранной типографики, в основном пользователи используют стандартные гарнитуры Times, Courier, Arial, Sans Serif, изначально имеющиеся в памяти любого ПК. Существует мнение, что благодаря их повсеместному применению, в том числе и в печатных изданиях, они порождают эффект шрифтовой обезлички информации, создавая эмоциональный барьер между сообщением и зрителем-читателем.

Выделяется гигиеническими и художественными достоинствами шрифт Verdana. Он рассчитан на воспроизведение с низким разрешением, прост по рисунку; удобны и красивы его пропорции. Шрифт выглядит легким, открытым и без труда воспринимается с дисплея.

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

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

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

В пределах одного тематического раздела цвет и текстура фона должны оставаться постоянными для всех страниц.

Исходя из выше перечисленного для электронного учебного пособия по визуальному программированию, мною были выбраны:

цвет фона - мягко серый с мягко расфокусированной текстурой;

шрифт - Times New Roman;

размер шрифта - 14 пт;

цвет шрифта - черный, белый;

интервал - полуторный;

выравнивание - по ширине.

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

Формулировка задачи: разработать электронное учебное пособие на тему «Архитектура компьтерных систем», включающее в себя разделы:

теория;

практика;

тест.

Предусмотреть наличие справки, сведений о разработчике, фиксирование информации о прохождении теста.

В ходе решения данной задачи был разработан программный продукт, который включает в себя теорию, практику и тест.

2.3 Инструкция по использованию

На рисунке 2.1 представлено начальное окно программы.



Рисунок 2.1 - Начальное окно программы

В начальном окне программы необходимо ввести ФИО и группу, или же загрузить ранее сохраненный профиль.

При выборе того, или иного пункта главного меню, выполняется вход в программу.

На рисунке 2.2 представленно главное окно программы, в котором пользователю представлено общее содержание программы. В него входит 4 боковые вкладки: «Практика», «Теория», «Тест», «Профиль», а также 4 кнопки в самом окне: «Практики», «Тесты», «Выгрузить данные профиля» и «Выйти».

Рисунок 2.2 - Главное окно программы

На рисунке 2.3 представлен переход по кнопке «Теория», появляется возможность выбрать тему и изучить теоретические сведения. Для изучения теории представлены следующие 5 тем:

Правила перевода чисел из одной системы счисления в другую.

Методы кодирования и формы представления в ЭВМ числовой и графической информации.

Выполнение арифметических операций в обратном и дополнительном коде.

Преобразование логических выражений.

Синтез комбинационного логического устройства с приминением диаграмм Вейча.

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

Рисунок 2.3 - Переход по кнопке «Теория»

На рисунке 2.4 показан переход по кнопке «Практика», где пользователю необходимо выполнить задания и по завершению нажать на кнопку «Завершить».



Рисунок 2.4 - Переход по кнопке «Практика»

После выполнения практических заданий, появляется возможность закрепить знания при прохождении теста. На рисунке 2.5 представлена вкладка «Тест», где необходимо выбрать тему и выполнить тестовые задания.

Рисунок 2.5 - Начало тестирования

Сам тест имеет четыре варианта ответа, ограничение по времени его прохождения он не имеет. По завершению теста, будет показано, с каким результатом он завершен (Рисунок 2.6).



Рисунок 2.6 - Результат выполнения теста

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

Рисунок 2.7 - Сохранение результата

Также на главном окне программы в нижнем правом углу представлена информация о разработчике прогаммы (рисунок 2.8)



Рисунок 2.8 - Информация о разработчике

Далее рассмотрим листинг модулей.

На листинге 2.1 представлен код модуля «Тест»

Листинг 2.1 - Листинг модуля «Тест»

import React from 'react';

import QuizItem from './QuizItem';

import QuizNav from './QuizNav';

import QuizResult from './QuizResult';

import { QuizContext } from './QuizContext';

class Quiz extends React.Component {

/**

* props.quiz

* props.isEnd ?

* props.onComplete {Function}

* props.classes

* props.externalId

* @param {*} props

*/

constructor(props) {

super(props);

this._init();

}

_init() {

// const checkedAnswers = JSON.parse(localStorage.getItem('cachedAnswers')) || this.props.quiz.map(() => -1);

const checkedAnswers = this.props.quiz.map(() => -1);

let isEnd = this.props.isEnd === undefined ? false : this.props.isEnd;

/**

* @type {QuizState}

*/

this.state = {

'currentQuizItemId': 0,

'checkedAnswers': checkedAnswers,

'isEnd': isEnd

};

}

changeQuizItem(direction = 'r', e) {

let id;

switch (direction) {

case 'r': // след.

id = this.state.currentQuizItemId + 1;

break;

case 'l': // пред.

id = this.state.currentQuizItemId - 1;

break;

}

this.setState({

'currentQuizItemId': id

});

}

/**

*

* @param {React.SyntheticEvent} e

*/

endQuiz(e) {

let n = this.props.quiz.length;

const totalCorrect = this.props.quiz.map(e => e.correct).reduce((total, e, i) => {

if (e === this.state.checkedAnswers[i]) {

return total + 1;

}

return total;

}, 0);

this.self.dispatchEvent( new CustomEvent('q-completed', {

bubbles: true,

detail: {

type: 'quiz',

id: this.props.externalId,

total: n,

correct: totalCorrect,

// quiz: this.props.quiz,

// checkedAnswers: this.state.checkedAnswers

}

}));

this.setState({

isEnd: true

});

}

restartQuiz() {

this._init();

// this.

this.setState(this.state);

}

/**

*

* @param {React.SyntheticEvent} e

*/

updateAnswers(e) {

e.persist();

let id;

let item;

if (item = e.target.closest('[data-id]')) {

id = item.dataset.id;

}

else {

id = e.target.dataset.id;

}

if (!id) {

return;

} this.state.checkedAnswers[this.state.currentQuizItemId] = Number(id);

this.setState({

'checkedAnswers': this.state.checkedAnswers

});

}

componentDidMount() {

if (this.props.onComplete instanceof Function) {

this.self.addEventListener('q-completed', this.props.onComplete);

}

}

render() {

let classes = `quiz ${this.props.classes ?

this.props.classes : ''}`;

// число вопросов в текущем тесте

const n = this.props.quiz.length;

let currentQuizItemId = this.state.currentQuizItemId;

let quizStatus = {

'last': false,

'first': false

};

if (currentQuizItemId === 0) {

quizStatus.first = true;

}

else if (currentQuizItemId >= n - 1) {

quizStatus.last = true;

}

let quizItem = this.props.quiz[currentQuizItemId];

const isEnd = this.state.isEnd;

return (

<div className={classes} ref={_this => this.self = _this}>

{isEnd &&

<QuizResult checkedAnswers={this.state.checkedAnswers} correctAnswers={this.props.quiz.map(e => e.correct)} restartQuiz={this.restartQuiz.bind(this)}

></QuizResult>

}

{!isEnd &&

<QuizContext.Provider value={{

'quizItem': quizItem,

'checkedAnswer': this.state.checkedAnswers[currentQuizItemId]

}}>

<QuizItem onClick={this.updateAnswers.bind(this)}></QuizItem>

</QuizContext.Provider>

}

{!isEnd &&

<QuizNav

changeToNext={this.changeQuizItem.bind(this, 'r')}

changeToPrev={this.changeQuizItem.bind(this, 'l')}

endQuiz={this.endQuiz.bind(this)}

quizStatus={quizStatus}

></QuizNav>

}

</div>

);

}

}

export default Quiz;

На листинге 2.2 представлен код модуля «Практика»

Листинг 2.2 - Код модуля «Практика»

import React from 'react';

import PracticeConvert from './PracticeConvert';

import PracticeCodes from './PracticeCodes';

import PracticeFunc from './PracticeFunc';

import PropTypes from 'prop-types';

const Practice = [

{

text: '1. Перевод чисел из одной системы в другую',

// id: 0,

active: false,

contentComponent: PracticeConvert,

contentOptions: {

// key: 'p0',

// externalId: 0,

// onComplete: handlePracticeComplete

}

},

{

text: '2. Выполнение арифметических операций в обратном и дополнительных кодах',

// id: 1,

active: false,

contentComponent: PracticeCodes,

contentOptions: {

// key: 'p1',

// externalId: 1,

// onComplete: handlePracticeComplete

}

},

{

text: '3. Преобразование логических выражений',

// id: 2,

active: false,

contentComponent: PracticeFunc,

contentOptions: {

// key: 'p2',

// externalId: 2,

// onComplete: handlePracticeComplete

}

}

];

export default Practice;

На листинге 2.3 представлен код модуля «Теория»

Листинг 2.3 - Листинг модуля «Теория»

import React from 'react';

class Theory extends React.Component {

constructor(props) {

super(props);

this.state = {

externalId: this.props.externalId

};

}

componentDidMount() {

if (this.props.onComplete instanceof Function) {

this.text.addEventListener('t-completed', this.props.onComplete);

}

}

componentWillUnmount() {

// console.log(this.text);

this.text.dispatchEvent(new CustomEvent('t-completed', {

bubbles: true,

detail: {

cached: this.props.cached,

html:this.props.cached === true ? '' : this.text.innerHTML,

id: this.state.externalId

}

}));

}

render() {

let classes = `theory ${this.props.classes ? this.props.classes : ''}`;

return (

<div className={classes}>

{/*this.state.loaded &&*/

<div className="theory__text" dangerouslySetInnerHTML={{ __html: this.props.html }} ref={_text => this.text = _text}>

</div>

}

{this.props.cached !== true &&

(e => {

if (window.MathJax) {

setTimeout(() => {

window.MathJax.typeset();

}, 0);

}

})()

}

</div>

);

}

}

export default Theory;

На листинге 2.4 представлен листинг модуля «Профиль»

Листинг 2.4 - Листинг модуля «Профиль»

import React from 'react';

import Status from '../Status/Status';

import { downloadJson, sha256, deleteProps, toTeX } from '../helper-functions';

class Profile extends React.Component {

constructor(props) {

super(props);

this.state = {

globalStorage: this.props.globalStorage

}

}

exportData() {

const user = this.state.globalStorage.user;

// const storageCopy = Object.assign({}, this.state.globalStorage);

const storageCopy = JSON.parse(JSON.stringify(this.state.globalStorage));

// delete storageCopy.hash;

deleteProps(storageCopy, ['hash', 'detail']);

const str = JSON.stringify(storageCopy);

sha256(str)

.then(hash => {

this.state.globalStorage.hash = hash;

downloadJson(this.state.globalStorage, `${user.name}-${user.group}`);

})

}

showQuizStats() {

let html = this.state.globalStorage.quizes.reduce((acc, q) => {

if (q.completed !== true) {

return acc + `

<div>

<h3>${q.detail.title}</h3>

<p>Этот тест еще не пройден</p>

</div>

`;

}

return acc + `

<div>

<h3>${q.detail.title}</h3>

<p>Верно отвечено на ${q.detail.correct} из ${q.detail.total} вопросов</p>

</div>

`;

}, '');

this.statsElement.innerHTML = html;

}

showPracticeStats() {

let html = this.state.globalStorage.practice.reduce((acc, p, i) => {

if (p.completed !== true) {

return acc + `

<div>

<h3>${p.detail.title}</h3>

<p>Это задание еще не пройдено</p>

</div>

`;

}

return acc + `

<div>

<h3>${p.detail.title}</h3>

<p>Практика пройдена <span class="more" data-id=${i} data-for="p">подробнее</span></p>

</div>

`;

}, '');

this.statsElement.innerHTML = html;

}

/**

*

* @param {React.SyntheticEvent} e

*/

handleStatsClick(e) {

e.persist();

// console.log(e);

const dataset = e.target.dataset;

if (dataset.id) {

switch (dataset.for) {

case 'p':

const practice = this.state.globalStorage.practice[dataset.id]

// console.log(this.state.globalStorage.practice[dataset.id].detail);

// console.log(practice)

switch (practice.detail.type) {

case 'func':

this.metaElement.innerHTML = `

<div style="width: fit-content; margin: auto;">

<p>Функция: ${practice.detail.boolFunc.reduce((acc, cur) => `${acc} ${cur}`, '')}</p> ${practice.detail.answers.reduce((acc, cur) => `${acc}<div style="display: grid; align-items: center; grid-template-columns: 0fr 1fr;"><span>${cur.type}:</span> <span>${window.MathJax.tex2chtml(toTeX(cur.answer)).outerHTML}</span></div>`, '')}

</div>`;

if (window.MathJax) {

window.MathJax.typeset();

} this.metaElement.classList.remove('profile__meta--hidden');

break;

}

break;

}

}

}

/**

*

* @param {React.MouseEvent} e

*/

handleMetaClick(e) {

e.persist();

// console.log(e.screenX, e.screenY, );

// console.log();

let mR = this.metaElement.getBoundingClientRect(),

wW = window.innerWidth,

wH = window.innerHeight,

mX = e.pageX,

mY = e.pageY;

console.log(e.screenX, e.screenY, mR.top, e);

if (mX >= mR.left + mR.width - 30 && mX <= mR.left + mR.width

&& mY >= mR.top && mY <= mR.top + 30) { this.metaElement.classList.toggle('profile__meta--hidden', true);

}

}

render() {

let classes = `profile ${this.props.classes ? this.props.classes : ''}`;

const quizStats = this.state.globalStorage.quizes;

const practiceStats = this.state.globalStorage.practice;

// console.log(quizStats);

return (

<div className={classes}>

{/* <div className="profile__item">

Теория

</div> */}

<div className="profile__item" onClick={this.showPracticeStats.bind(this)}>

Практики

<Status classes="profile__status" items={practiceStats.map(p => { return { done: p.completed } })}></Status>

</div>

<div className="profile__item" onClick={this.showQuizStats.bind(this)}>

Тесты

<Status classes="profile__status" items={quizStats.map(q => { return { done: q.completed } })}></Status>

</div>

<div className="profile__item" onClick={this.exportData.bind(this)}>

Выгрузить данные профиля

</div>

<div className="profile__item" onClick={this.props.onLogout}>

Выйти

</div>

<div className="profile__meta profile__meta--hidden profile__meta--stats" onClick={this.handleMetaClick.bind(this)} ref={element => this.metaElement = element}> </div>

<div className="profile__stats" ref={element => this.statsElement = element} onClick={this.handleStatsClick.bind(this)}> </div>

</div>

);

}

}

export default Profile;



3. Безопасность жизнедеятельности

3.1 Требования к помещениям для работы с ПЭВМ

3.1.1 Эксплуатация ПЭВМ в помещениях без естественного освещения допускается только при наличии расчетов, обосновывающих соответствие нормам естественного освещения и безопасность их деятельности для здоровья работающих

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

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

3.1.2 Не допускается размещение мест пользователей ПЭВМ во всех образовательных и культурно-развлекательных учреждениях для детей и подростков в цокольных и подвальных помещениях

Площадь на одно рабочее место пользователей ПЭВМ с ВДТ на базе электронно-лучевой трубки (ЭЛТ) должна составлять не менее 6 м2, в помещениях культурно-развлекательных учреждений и с ВДТ на базе плоских дискретных экранов (жидкокристаллические, плазменные) - 4,5 м2.

При использовании ПВЭМ с ВДТ на базе ЭЛТ (без вспомогательных устройств - принтер, сканер и др.), отвечающих требованиям международных стандартов безопасности компьютеров, с продолжительностью работы менее 4 ч в день допускается минимальная площадь 4,5 м2 на одно рабочее место пользователя (взрослого и учащегося высшего профессионального образования).



3.1.3 Для внутренней отделки интерьера помещений, где расположены ПЭВМ, должны использоваться диффузно отражающие материалы с коэффициентом отражения для потолка - 0,7-0,8; для стен - 0,5-0,6; для пола - 0,3-0,5

Полимерные материалы используются для внутренней отделки интерьера помещений с ПЭВМ при наличии санитарно-эпидемиологического заключения.

3.1.4 Помещения, где размещаются рабочие места с ПЭВМ, должны быть оборудованы защитным заземлением (занулением) в соответствии с техническими требованиями по эксплуатации

Не следует размещать рабочие места с ПЭВМ вблизи силовых кабелей и вводов, высоковольтных трансформаторов, технологического оборудования, создающего помехи в работе ПЭВМ.[6]

3.2 Выявление опасных и вредных факторов при работе

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

повышенное значение напряжения электрического тока;

повышенное тепловыделение;

избыточный шум;

ультрафиолетовое, инфракрасное и ионизирующее излучения;

электромагнитное поле;

статическое электричество.

Все устройства ПЭВМ должны быть надежно установлены на столе. Над столом не должно быть никаких посторонних предметов. Категорически запрещается укладывать на ПЭВМ какие-либо предметы или бумагу. Перед началом работы при отключенном электропитании необходимо убедиться:

- в наличии надежного заземления устройства;

- в исправности соединительных кабелей;

- все устройства должны быть в закрытых корпусах.

Согласно основным требованиям техники безопасности запрещается:

- работать с разъемами кабелей, находящихся под напряжением;