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

Содержание

1. Общие сведения

1.1 Сведения об организации

1.2 Существующий сайт и структура ЭИОС

1.3 Постановка задачи

2. Разработка шаблона оформления

2.1 Обзор платформы Moodle

2.2 Основные функциональные возможности

2.3 Структура шаблонов

2.4 Структура каталогов шаблона

2.5 Структура Moodle курса

2.6 Выбор стандарта верстки

2.7 Блочная верстка

2.8 Верстка

3. Результат проделанной работы

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

Приложение

1. Общие сведения

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

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

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

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

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

Сайт библиотеки СибГУТИ является одним из ярких примеров информационного ресурса отвечающего современный тенденциям развития общества и входит в состав: официального сайта СибГУТИ (https://sibsutis.ru, https://сибгути.рф), сайта структурных подразделений СибГУТИ, в том числе библиотеки (http://lib.sibsutis.ru) и информационной системы поддержки образовательного процесса (http://csc.sibsutis.ru/moodle/).

В данной работе пойдет речь об Электронной информационно-образовательной среде (далее ЭИОС) СибГУТИ (http://csc.sibsutis.ru/moodle/), для которой будет разработан шаблон оформления на платформе Moodle и далее применен в производстве.

1.1 Сведения об организации

Разработка выпускной квалификационной работы проходила в Сибирском Государственном Университете Телекоммуникаций и Информатики, который был основан в 1953 году.

Полное наименование Университета на русском языке: федеральное государственное бюджетное образовательное учреждение высшего образования «Сибирский государственный университет телекоммуникаций и информатики».

Сокращенное наименование Университета: СибГУТИ.

Полное наименование Университета на английском языке: Federal State-Financed Educational Institution of Higher Education «Siberian State University of Telecommunications and Information Sciences».

Сокращенное наименование Университета на английском языке: SibSUTIS.

Университет базируется в городе Новосибирск. Сам по себе город позиционируется как один из основных научных центров России. Является базовым образовательным комплексом Федерального агентства связи в регионе, крупным научным центром по изучению проблем связи и развитию телекоммуникационных технологий.

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

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

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

Взаимодействие на международном уровне является одним из значимых направлений деятельности университета. Международные отношения ведут свой отсчёт с 1961 г., когда НЭИС открыл направления подготовки рабочих кадров для зарубежных стран. В начале 90-х годов в вузе обучалось около 300 иностранных студентов из 16 стран Европы, Азии, Африки и Южной Америки.

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

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

Основание библиотеки датируется 4 сентября 1953 года, одновременно моментом основания института.

В 1954 г. Новицкая Анна Степановна возглавила библиотеку и проработала заведующей до 1965 г.

В 1957 г. - был сформирован читальный зал.

В 1958 г. - отдел художественной литературы.

В 1967 г. - научный абонемент.

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

Фонд библиотеки состоит из:

социология

бухгалтерский учёт и аудит

экономика и управление на предприятиях связи

физика и механика оптической связи

радиотехника

проектирование и технология радиоэлектронных средств

сети и системы коммутации

многоканальные телекоммуникационные системы

радиосвязь, радиовещание и телевидение

аудиовизуальная техника

системы связи с подвижными объектами

программное обеспечение вычислительной техники и автоматизированных систем

защищенные системы связи

гуманитарные дисциплины

Библиотечно-библиографическое услуги читателям предоставляются как традиционными методом, так и современным, что является новым для библиотеки:

обслуживание читателей на абонементах и в читальных залах;

тематические выставки и просмотры литературы;

информационные обзоры новых поступлений в библиотеку и т.п.;

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

доступ к полнотекстовым электронным учебно-методическим материалам СибГУТИ через Интернет.

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

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

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

нию справочно-библиографического аппарата и электронных ресурсов библиотек.

1.2 Существующий сайт и структура ЭИОС

сайт библиотека университет

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

Фонд библиотеки состоит из различных видов отечественных и зарубежных изданий (научной, учебной, художественной литературы и д.р.), неопубликованных и аудиовизуальных документов, электронных изданий.

Электронная информационно-образовательная среда СибГУТИ - это интегрированная совокупность информационных (в том числе электронных) и образовательных ресурсов, информационно-телекоммуникационных технологий и соответствующих технических и технологических средств, предназначенная для обеспечения:

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

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

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

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

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

В состав ЭИОС СибГУТИ входят следующие информационные и образовательные ресурсы:

официальный сайт СибГУТИ (https://sibsutis.ru, https://сибгути.рф), включая его открытую и закрытую части;

сайты структурных подразделений СибГУТИ, в том числе: библиотеки (http://lib.sibsutis.ru), филиалов (http://www.uisi.ru, http://www.biik.ru, http://www.hiik.ru), колледжа телекоммуникаций и информатики (http://ncti.ru), межрегионального центра переподготовки специалистов (http://center.sibsutis.ru) и др.

электронно-библиотечные системы, включая ЭБС СибГУТИ (http://lib.sibsutis.ru/libs.php);

информационная система поддержки образовательного процесса (http://csc.sibsutis.ru/moodle/);

портал дистанционного образования (http://do.sibsutis.ru);

информационная система дистанционного образования;

система видеоконференций (http://vks.sibsutis.ru);

социальная сеть СибГУТИ (https://sibsutis.ru/students/social/), включающая личные страницы участников образовательного процесса, форумы, блоги и т.п.

официальные группы и страницы СибГУТИ в социальных сетях Вконтакте, Facebook, Twitter, LifeJournal и др.

Для обеспечения функционирования ЭИОС СибГУТИ используются следующие информационно-телекоммуникационные технологии:

корпоративная электронная почта (https://mail.sibsutis.ru);

облачные ресурсы Google Apps, в том числе: почта Gmail (домен sibguti.ru), Google-календарь, Google-диск, сервис синхронного взаимодействия Google Talk (Hangouts) и др.;

система заявок на обслуживание информационно-телекоммуникационной инфраструктуры (https://sibsutis.ru/support_form/);

свободно-распространяемые средства видеоконференций (Skype);

и др.

ЭИОС СибГУТИ обеспечивает доступ участников образовательного процесса к разработкам учебного процесса, планам дисциплин и практик, а так же итоговой аттестации, к публикациям библиотечных систем и цифровому образовательному контенту, указанного в рабочих планах по всем образовательным программам, реализуемым в университете.

Учебные планы, рабочие программы дисциплин (модулей), программы практик и итоговой аттестации размещаются в открытой части официального сайта СибГУТИ и сайтов филиалов и Колледжа телекоммуникаций и информатики в разделе «Сведения об образовательной организации», подразделе «Образование», пункте «О реализуемых образовательных программах с указанием учебных предметов, курсов, дисциплин (модулей), практики, предусмотренных соответствующей образовательной программой» (в том числе: https://sibsutis.ru/about/ organization_info/education.php)

Доступ к электронным библиотечным ресурсами осуществляется из любой точки мира, имеющей подключение к сети «Интернет». Перечень электронно-библиотечных систем размещён на сайтах библиотеки СибГУТИ (http://lib.sibsutis.ru/libs.php). Идентификационную информацию, необходимую участникам образовательного процесса для доступа к электронным библиотечным системам, предоставляет библиотека СибГУТИ при первой регистрации читателя.

Для организации электронного обучения используется информационная система поддержки образовательного процесса (http://csc.sibsutis.ru/moodle/). Идентификационную информацию, необходимую участникам образовательного процесса для доступа к указанной систему, предоставляют деканаты факультетов.

ЭИОС СибГУТИ обеспечивает доступ участников образовательного процесса к информации о ходе образовательного процесса, результатах промежуточной аттестации и результатах освоения образовательной программы.

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

ЭИОС СибГУТИ обеспечивает проведение всех видов занятий, процедур оценки результатов обучения, реализация которых предусмотрена с применением электронного обучения, дистанционных образовательных технологий.

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

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

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

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

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

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

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

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

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

Всеобщей проблемой электронного обучения является создание и эффективное использование образовательной среды на основе коммуникационных технологий. Были выявлены несколько проблем разработки и использования среды такого рода:

система групповой учебной работы студентов.

реализация самостоятельной научной деятельности обучающихся.

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

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

1.3 Постановка задачи

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

Проанализировать существующую версию официального сайта СибГУТИ и выделить основные отличительные фрагменты.

Проанализировать стандарты верстки и определить какой из них применить для формирования шаблона сайта.

Реализовать шаблон оформления сайта на платформе Moodle для электронной информационно-образовательной среды СибГУТИ.

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

2. Разработка шаблона оформления

2.1 Обзор платформы Moodle

Moodle - это динамическая учебная среда, которая прекрасно подходит под требования электронного обучения. Также данная среда представлена как пакет, который обычно определяется как CMS или LMS. Эти аббревиатуры расшифровываются следующим образом:

CMS - course managment system - система управления курсами

LMS - learning managment system - система управления обучением

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

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

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

Все курсы разделены на соответствующие категории. Например, курсы «Многопоточное программирование» или «Параллельное программирование» будут располагаться в категории «Виды программирования».

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

Способности и характеристики системы Moodle привлекают администраторов:

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

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

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

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

Особое внимание отводится безопасности на любом уровне. Формы проходят проверку, данные анализируются на достоверность, куки шифруются и т.д.

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

Основной рабочей единицей Moodle является учебный контент. В рамках такого контента можно реализовать:

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

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

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

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

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

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

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

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

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

Широкие возможности для коммуникации - одна из самых сильных сторон Moodle. Система поддерживает обмен файлами любых форматов - как между преподавателем и студентом, так и между самими студентами. Сервис рассылки позволяет оперативно информировать всех участников курса или отдельные группы о текущих событиях. Форум дает возможность организовать учебное обсуждение проблем, при этом обсуждение можно проводить по группам. К сообщениям в форуме можно прикреплять файлы любых форматов. Есть функция оценки сообщений - как преподавателями, так и студентами. Чат позволяет организовать учебное обсуждение проблем в режиме реального времени. Сервисы «Обмен сообщениями», «Комментарий» предназначены для индивидуальной коммуникации преподавателя и студента: рецензирования работ, обсуждения индивидуальных учебных проблем. Сервис «Учительский форум» дает педагогам возможность обсуждать профессиональные проблемы.

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

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

Moodle позволяет контролировать “посещаемость”, активность студентов, время их учебной работы в сети.

2.2 Основные функциональные возможности

Moodle прежде заточен под Linux с использованием Apache, MySQL и PHP (также иногда именуемой платформой LAMP), но также регулярно опробывается с PostgreSQL и на операционных системах Windows XP, Mac OS и Netware 6.

Требования для Moodle следующие (Рисунок 2.1):

Программное обеспечение Web-сервера. Большинство людей использует Apache, но Moodle прекрасно работает на любом веб-сервере, который поддерживает PHP, например IIS на платформе Windows.

PHP (версия 4.1.0 или выше).Moodle 1.4.и выше поддерживает PHP5.

Сервер базы данных: MySQL или PostgreSQL полностью поддерживаются и рекомендованы для использования с Moodle.



Рисунок 2.1 - Пакет Moodle

Управление сайтом:

выполняется администратором.

настройки сайта редактируются, как во время установки, так и в тот момент, когда система развернута.

при желании можно настроить визуальную составляющую страниц (цвета, шрифты, расположение объектов).

при желании можно расширить функциональные возможности системы Moodle с помощью дополнительных модулей.

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

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

Управление, доступное пользователю:

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

система ДО Moodle гарантирует возможность автоматического напоминания паролей пользователям. Пароль высылается пользователю на почту.

в рамках системы реализованы все необходимые механизмы защиты от несанкционированного доступа.

информация о слушателях хранится в профайлах. Слушатели могут наполнять свой профайл информацией по своему усмотрению.

для назначения слушателям курсов в системе дистанционного обучения Moodle применяется широкий диапазон инструментов: ключ назначения дистанционного курса, ручное назначение, и т.д.;

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

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

Управление курсами:

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

для создания курсов используются различные форматы. Например, SCORM-формат, формат на основе топиков и т.д.;

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

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

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

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

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

дистанционные курсы могут быть запакованы в один ZIP-пакет с использованием функции Backup;

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

Взаимодействие пользователей:

чат.

блог.

форум.

вики.

2.3 Структура шаблонов

Файлы шаблонов являются основным строительным материалом для сайта на платформе Moodle. Файлы соединяются вместе как кусочки пазла для создания полноценной web-страницы. Некоторые шаблоны, например, заголовок (header) и "подвал" (footer) обычно используются на всех web-страницах сайта (Рисунок 2.2), в то время как остальные могут использоваться только при некоторых условиях.

Классическая web-страница имеет структуру из двух файлов:

Страница HTML хранит структуру и контент страницы

CSS описывает параметры внешнего вида страницы.

В Moodle присутствует структура HTML и стили CSS, но контент формируется в фоновом режиме различными файлами шаблона и эти операции не видны пользователю. Файлы шаблона и таблицы стилей хранятся в папке темы.



Рисунок 2.2 - Структура web-страницы

Сначала Moodle производит поиск каждой строчки запроса по типам запросов, т.е. определяет какой тип страницы (страница поиска, страница категорий, главная страница и др.) была запрошена.

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

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

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

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

Зaгoлoвoк coдeржит вcю инфoрмaцию, кoтoрaя дoлжнa быть наверху, т.е. внутри тeгa вaшeй HTML web-cтрaницы, так же и ccылки нa таблицы стилей. Он включaeт oткрытый тeг и видимый заголовок вашего блога (кoтoрый oбычнo coдeржит нaзвaниe вaшeгo caйтa, a также может содержать нaвигaциoннoe мeню, лoгoтип, oпиcaниe caйтa и т.д.).

Блoк контента содержит записи и cтрaницы вaшeгo блoгa, т.e. "ocнoву" caйтa.

Пoдвaл содержит информацию, которая нaхoдитcя в caмoм низу cтрaницы, нaпримeр ccылки на остальные страницы или кaтeгoрии вaшeгo caйтa в мeню, aвтoрcкиe права, контактную информацию и т.п.

2.4 Структура каталогов шаблона

Для начала необходимо создать каталоги и файлы, которые будут использоваться в процессе работы. Далее, создается фактический каталог для нашейго шаблона. Это должно быть название нашей темы, в моем случае это «волнение». Каталог должен быть расположен в каталоге темы от Moodle, ./moodle/theme/excitement/.

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

config.php - файлы настройки.

/стиль/ - каталог, который будет содержать таблицы стилей.

/style/excitement.css - стили CSS.

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

/ Макет / - каталог, где хранятся файлы разметки.

/layout/standard.php - основной файл макета.

Теперь мы имеем такую структуру (Рисунок 2.3) каталогов шаблона.

Рисунок 2.3 - Структура каталогов.

2.5 Структура Moodle курса

Moodle-курс любого типа состоит из системы блоков (Рисунок 2.4). Основной блок любого курса - учебный модуль, в теле которого содержатся собственные учебные материалы. Неотъемлемой частью является блок управления. По желанию преподаватель может добавить в курс дополнительные блоки для общения с аудиторией, мониторинга результатов, для удобства навигации по курсу и т.п.



Рисунок 2.4 - Структура курса

Модули учебного содержания могут быть сформированы разными способами. Два наиболее применяемых - недельные (Рисунок 2.5) и тематические (Рисунок 2.6) модули.

Рисунок 2.5 - Пример недельного модуля



Рисунок 2.6 - Пример тематического модуля

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

Также система имеет несколько режимов работы с курсами, это:

Режим просмотра (Рисунок 2.7)

Рисунок 2.7 - Режим просмотра

Режим редактирования (Рисунок 2.8)

Рисунок 2.8 - Режим редактирования

Студенческий вид (Рисунок 2.9)

Рисунок 2.9 - Студенческий вид

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

Элементы деятельности и их особенности:

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

Глоссарий - создание словарных статей

Задание - ответ на задние, загружаемый в виде файла. Преподаватель может выставить оценку и написать рецензию.

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

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

Семинар - преподаватель выдает задание, студенты присылают свои ответы.

Тест - включает в себя материал с выбором ответа.

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

Чат - общение, предполагаемое одновременное присутствие обучаемого и проподавателей.

2.6 Выбор стандарта верстки

Вёрстка web-страниц -- создание структуры при помощи html-кода, который располагает элементы web-страницы в окне браузера, в соответствии с разработанным макетом.

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

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

HTML - это гипертекстовый язык разметки (HyperText Markup Language), который используется для создания документов в Интернет(веб-страниц). При помощи HTML создается веб-страница, содержащая все нужные элементы.

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

HTML 5 будет иметь два синтаксиса - "custom" HTML и XML. HTML синтаксис определяет детализированные правила синтаксического анализа (включая "обработку ошибок"). Пользовательские агенты будут следовать этим правилам для документов, имеющих MIME тип text/html.

Для синтаксиса HTML разработчики могут использовать три способа установки кодировки: - на транспортном уровне. При использовании Content-Type HTTP заголовка, например. - используя символ Unicode Byte Order Mark (BOM) в начале файла. Этот символ обеспечивает сигнатуру используемого кодирования. - используя мета тег с атрибутом charset, который должен быть определен как первый дочерний элемент head.

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

Главное отличие в том что, HTML создания структуры содержимого страницы, а CSS для форматирования созданной структуры.

HTML также можно применять для оформления web-сайтов. Но CSS располагает большим инструментарием, а также более точен и проработан. CSS, на сегодняшний день, имеет поддержку всеми браузерами (программами просмотра).

Появление CSS является колоссальным прорывом в мире web-разработки. При этом мы имеет следующие преимущества:

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

более детальный контроль над внешним видом страниц;

различные представления для разных носителей информации (экран, печать, и т. д.);

сложная и продуманная техника дизайна.

CSS состоит из (Рисунок 2.10):

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

Селекторы - метки, которые позволяют браузеру понять, к каким именно элементам html кода нужно будет применять данные правила.

Рисунок 2.10 - Структура CSS

Далее обсудим как оформление заданное в стилях подключается к основному коду. Существуют несколько вариантов связи CSS с HTML:

Вложение -- CSS код прописывается непосредственно в нужном теге элемента с помощью атрибута Style

Встраивание -- весь стилевой код для web документа прописывается в его шапке (внутри тегов Head) с помощью элемента Style

Связывание -- весь CSS код размещается (выносится) в отдельном внешнем файле, который подключается к документу с помощью элемента Link в его шапке.

Рисунок 2.11 - Синтаксис CSS

Одно правило (Рисунок 2.11) в CSS коде состоит из двух параметров -- свойство (в моем случае это color -- цвет текста и background -- цвет фона) и его значение (в данной ситуации это код цвета red и #CCCCCC). Обязательным условием является отделение свойства от его значения двоеточием.

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

Первый способ называется методом вложения CSS в Html с использованием атрибута Style (Рисунок 2.12)

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

Как правило, верстальщик получает от дизайнера утверждённый дизайн-макет страницы. Далее, верстальщик проводит анализ полученного макета. Разбивает его на горизонтальные линии (полосы) -- «этажи». Далее, каждый «этаж» анализируется отдельно и разбивается на прямоугольные блоки -- колонки.

Рисунок 2.12 - Вложение при помощи Syle

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

После верстки страница обязательно проверяется на кросс-платформенность. В общем случае необходимо ответить на следующие вопросы:

одинаково ли отображается страница в браузерах и на разных операционных системах?

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

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

оказывает ли существенное влияние на целостность страницы разрешение монитора?

Критические исправления вносятся в документ и проверка выполняется с самого начала.

Верстка отличается различными подходами к этому вопросу:

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

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

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

жёстко фиксированные (Rigid fixed),

адаптивные резиновые (Adaptable fluid),

расширяемые эластичные (Expandable elastic) макеты.

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

Преимущества:

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

у дизайнера есть возможность следить за размером строки.

Недостатки:

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

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

Преимущества:

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

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

Недостатки:

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

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

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

Преимущества:

Сайт выводит информацию на экранах различного типа так, как это наиболее комфортно пользователю.

Недостатки:

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

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

2.7 Блочная верстка

В процессе разработки шаблона применялась блочная верстка, которая прекрасно подходила для реализации проекта.

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

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

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

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

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

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

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

Подведу итоги. В HTML4 и XHTML слой - это основной элемент при вёрстке веб-страниц, в которой интенсивно применяются стили и придерживаются спецификаций HTML и CSS. При данном подходе создания важная роль уделяется тегу <div>, с которым у большинства людей и ассоциируются слои. В какой-то мере это утверждение является верным. Поэтому в дальнейшем будем считать нормальным употреблять термин «слой» к тегу <div>, для которого указан стилевой идентификатор или класс. Таким образом, выражение «слой с именем content» подразумевает, что используется тег <div id="content"> или <div class="content">.

В HTML5 добавлен ряд принципиально новых тегов разметки для обозначения разного типа блоков страницы. К примеру, <header> и <footer> используются для создания «шапки» и «подвала», <nav> для навигации, <aside> для боковой панели. Включение в спецификацию HTML подобных элементов призвано снизить доминирование тега <div> и придать больше смысла разметке. Поэтому в вёрстке на HTML5 активно применяется термин «элемент», под которым подразумевается соответствующий тег и элемент который он создаёт.

2.8 Верстка

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



Рисунок 2.13 - Структура страницы.

Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id. Получается такая структура (Рисунок 2.14):

Затем к уже созданной структуре сайта на html строкой <link rel="stylesheet" type="text/css" href="style.css" /> прикрепляем файл css. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.



Рисунок 2.14 - Структура слоев

Тэг <head>. В нём находится служебная информация различного рода: название страницы, кодировка, ключевые слова для поисковых роботов, описание страницы и т.п. Вся эта информация записана в служебных тэгах meta, которые также не отображаются на странице в браузере.

Листинг 1 - Демонстрация начального этапа

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1251" />

<meta name="description" content="Электронная информационно-образовательная среда." />

<meta name="keywords" content="СибГУТИ, главная страница, кафедра ВС/>

<link rel="stylesheet" href="style.css" type="text/css" />

Первый meta-тэг указывает на кодировку сайта. В интернете желательно пользовать все-таки windows-1251 для поддержки более поздних версий браузеров.

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

В третьем meta-тэге ключевые слова для поисковиков.

В последний meta-тег заносится ссылка на наш лист стилей CSS, который мы будем использовать.

Следующим парным тегом будет title -- это тот текст, который появляется на самом верху браузера при открытии странички:

Листинг 2 - Структура тега title

<title>”]Электронная информационно-образовательная среда | Главная</title>

По окончанию всех манипуляций вписываем закрывающий тэг </head>. Все, со служебной информацией пока что поконченно. Обратите внимание -- тэги как бы вложены друг в друга: <head><title></title></head>

Вот мы и добрались до тела нашей страцы, которое именуется соответствующим тэгом <body>.

Сохраним документ в отдельной папке. Сохраняем под именем index.html. Почему именно index? Любой браузер, зайдя по адресу сразу станет искать страницу с этим названием. Устроены они так. Индексная страница для них всегда является главной, стартовой.

Листинг 3 - Верстка шапки страницы

#header {

background-image: fon(header.jpg);

width: 760px;

height: 158px;

}

Здесь мы указали, что вся наша шапка залита фоном-картинкой с размерами 760х158 пикселей. fon(header.jpg) -- это ссылка на картинку. Важным моментом является то, что ссылка выглядит как простое имя с расширением для картинки. Все это потому, что сама картинка лежит в той же самой папке, где и лист стилей. Это так называемая относительная ссылка.

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

3. Результат проделанной работы

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

Рисунок 3.1 - Разработанный шаблон оформления

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

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

1. Будилов В.А., Практическое занятие по HTML.Краткий курс [Текст] : монография / В.А. Будилов. - СПб. : Наука и техника, 2001. - 253с. - 64 р.

2. Матросов А.В., HTML 4.0 [Текст] : монография / А.В. Матросов, А.О. Сергеев, М.П. Чаунин. - СПб. : БХВ-Петербург, 2003. - 671с. - Предм. указ.: с.664-671 . - 115 р.

3. Петюшкин А.В., HTML. Экспресс-курс [Текст] : монография / А. В. Петюшкин. - СПб. : БХВ-Петербург, 2004. - 242с. - 135 р.

4. Хейз Д., Освой самостоятельно HTML и XHTML. 10 минут на урок [Текст] : монография / Д. Хейз. - М. : Издат.дом "Вильямс", 2003. - 223с. - 88 р.

5. Петюшкин А.В., HTML в Web - дизайне [Текст] : монография / А. В. Петюшкин. - СПб. : БХВ-Санкт-Петербург, 2005. - 400с. - 280 р.

6. Евсеев Д.А., Web-дизайн в примерах и задачах [Текст] : учеб. пособие / Д.А. Евсеев, В.В. Трофимов; под ред. В.В. Трофимова. - М. : Кнорус, 2009. - 263с. - 400 р.

7. Комолова Н.В., HTML. Учебный курс [Текст] : учебное пособие / Н.В, Комолова. - СПб. : ПИТЕР, 2007. - 267с. - 230 р., 250 р.

Приложение

Наиболее употребляемые текстовые сокращения

ВС - вычислительная система

ПЗ - пояснительная записка

БР - бакалаврская работа

ДО - дистанционное образование

СДО - система дистанционного обучения

СибГУТИ - Сибирский государственный университет телекоммуникаций и информатики

ЭИОС - Электронная информационно-образовательная среда.

Размещено на Allbest.ru