CC BY
22
Интернет-журнал «Мир науки» / World of Science. Pedagogy and psychology https://mir-nauki.com
2018, №1, Том 6 / 2018, No 1, Vol 6 https://mir-nauki.com/issue-1-2018.html
URL статьи: https://mir-nauki.com/PDF/21PDMN118.pdf
Статья поступила в редакцию 28.01.2018; опубликована 21.03.2018
Ссылка для цитирования этой статьи:
Миронова Ю.Н. Организация индивидуальной работы студентов на занятиях по веб-дизайну // Интернет-журнал «Мир науки», 2018 №1, https://mir-nauki.com/PDF/21PDMN118.pdf (доступ свободный). Загл. с экрана. Яз. рус., англ.
For citation:
Mironova Yu.N. (2018). Career guidance during lessons on web design. World of Science. Pedagogy and psychology, [online] 1(6). Available at: https://mir-nauki.com/PDF/21PDMN118.pdf (in Russian)
УДК 378
Миронова Юлия Николаевна
ФГАОУ ВО «Казанский (Приволжский) федеральный университет»
Елабужский институт (филиал), Россия Доцент кафедры «Математики и прикладной информатики» Кандидат физико-математических наук Профессор РАЕ E-mail: mironovajn@mail.ru РИНЦ: http://elibrary.ru/author_profile.asp?id=384800 SCOPUS: http://www.scopus.com/authid/detail.url?authorId=6603018879
Организация индивидуальной работы студентов на занятиях по веб-дизайну
Аннотация. В последнее время стремительно развиваются различные информационные технологии, используемые в образовании. Проблемы информатизации образования были изучены в работах авторов из различных стран.
Также в настоящее время остро встает задача профориентации школьников, помощи им при выборе вуза, в котором они будут учиться. В данной работе предлагается подход, который сочетает обучение, воспитательный момент и реальный практический информационный продукт на выходе. Предлагается провести лабораторные работы по веб-дизайну, на которых студентам дается индивидуальное задание - создать неофициальный сайт, рекламирующий свой вуз или свой факультет: «Поступайте в наш университет». Студенты могли использовать как программное обеспечение, установленное на конкретных компьютерах, так и сетевые ресурсы университета. Для выполнения лабораторных работ с помощью визуального HTML-редактора использовалась возможность выхода в сеть интернет, для создания неофициального сайта университета также использовались ресурсы интернета, такие, как бесплатный хостинг. Кроме того, для выполнения заданий вне компьютерного класса студенты могли использовать учебно-методические материалы, расположенные в свободном доступе в сети интернет.
При такой постановке учебного задания увеличивается мотивация студентов при изучении ими материала, студентами осознается практическая значимость полученных знаний и навыков. Также после прохождения курса занятий создается практический материал, который может быть использован как в дальнейшей учебной работе, так и в профориентационной деятельности вуза.
Ключевые слова: сайт; язык HTML; теги HTML; веб-дизайн; HTML-редактор; профориентация; университет
Введение
В последнее время стремительно развиваются различные информационные технологии, используемые в образовании.
Проблемы информатизации образования были изучены в работах авторов из различных стран. Так, если рассматривать последние разработки в области информатизации и компьютеризации, проблемы дистанционного обучения исследуются в работах Анисимовой Т.И. [1], Миронова А.Н. и Тороповой А.А. [3], проблемы компьютеризации математического образования изучаются в работе Kapustina T.V., Popyrin A.V. & Savina L.N. [10], проблемы применения компьютерной техники при чтении лекций по курсу высшей математики исследуются в статье Мироновой Ю.Н. [5], JimR ubin & Manikya Rajakaruna [13] изучали обучение и оценку уровня мышления высшего порядка в классе математики с помощью компьютерных технологий. Таким образом, проблема информатизации обучения является актуальной в настоящее время.
Автором были изучены следующие аспекты проблемы информатизации обучения:
1. Использование новейшего мультимедийного оборудования в обучении;
2. Использование элементов дистанционного образования в обучении;
3. Исследование результатов с помощью создания студентами сайта для реальных целей (профориентационной работы среди школьников).
В настоящее время остро встает задача профориентации школьников, помощи им при выборе вуза, в котором они будут учиться. При решении этой проблемы могут быть различные подходы, которые описаны в работах [1]-[13]. Таким образом, возникает естественная цель исследования - как с минимальными потерями времени и сил достичь наилучшего результата по профориентации, например, создать большое количество некоторых интернет-ресурсов, вызывающих у пользователей интернета желание больше узнать о конкретном учебном заведении.
В данной работе предлагается подход, который сочетает обучение, воспитательный момент и реальный практический информационный продукт на выходе. В курсе лабораторных работ по дисциплине «Информационные технологии» предлагается провести лабораторные работы по веб-дизайну.
Студенты создают свой сайт, используя теги языка HTML, а также визуальный HTML-редактор. Из-за неоднородности группы некоторые студенты быстрее других осваивают учебный материал. Тогда им дается индивидуальное задание - создать неофициальный сайт, рекламирующий свой вуз или свой факультет: «Поступайте в наш университет».
Методы
Были проведены занятия в 8 академических группах второго курса университета, включающих в себя различные факультеты: факультет математики и естественных наук, факультет иностранных языков, инженерно-технологический факультет и факультет истории и филологии. Во всех группах были проведены занятия по веб-дизайну. Студентам был предложен следующий ниже лабораторный практикум, с которым, в основном, справились все группы. Для работы использовалось новейшее мультимедийное оборудование. Студенты могли использовать как программное обеспечение, установленное на конкретных компьютерах, так и сетевые ресурсы университета. Для выполнения лабораторных работ с помощью визуального HTML-редактора использовалась возможность выхода в сеть интернет, для создания неофициального сайта университета также использовались ресурсы интернета, такие, как
бесплатный хостинг. Кроме того, для выполнения заданий вне компьютерного класса студенты могли использовать учебно-методические материалы [10], расположенные в свободном доступе в сети интернет.
Содержание лабораторного практикума по теме «Веб-дизайн»
Теги HTML. Теоретический материал к лабораторным работам
В начале лабораторного практикума предлагается теоретический материал, необходимый для выполнения лабораторных работ. Этот материал можно посмотреть в интернете на соответствующем сайте1, или в источниках [2], [6]. Необходимые для выполнения лабораторных работ теги и атрибуты:
• Тег <HTML>;
• тег <BODY>;
• тег <BR>;
• тег <Р>;
• Атрибут ALIGN=;
• теги <Н1>, <Н2>, <НЗ>, <Н4>, <Н5> и <Н6>;
• тег <FONT>;
• атрибут SIZE=;
• атрибут color=;
• тег <U>;
• тег <I>;
• тег <В>;
• атрибут ТЕХТ=;
• атрибут BGCOLOR=;
• тег <А НRЕF=;
• тег <UL>;
• тег <OL>;
• тег <LI>;
• тег <TABLE>;
• тег <TR>;
• тег <TD>;
• атрибут BORDER=;
• атрибут BGCOLOR=;
1 Интернет-ресурс «Библиотека учебной литературы» http://labs2010.narod.ru/. Страница 3 из 11
• атрибут WIDTH=;
• атрибут BACKGRO UND=;
• тег <IMG>;
• атрибут WIDTH=;
• атрибут HEIGHT=.
Лабораторная работа №1. Создание сайта с помощью языка HTML
Создайте сайт, представляющий некоторую фирму, используя основные средства языка HTML. Сайт должен состоять не менее чем из трех файлов index.htm, index1.htm, index2.htm. На главной странице index.htm находится информация о фирме, на двух других - сведения о товарах и услугах.
1. На главной странице использовать заголовки нескольких уровней, шрифт разного размера.
2. Задать цвет фона, текста и гиперссылок.
3. Перечень товаров и услуг оформить в виде списка.
4. Использовать гиперссылки в пределах сайта, внешние гиперссылки. На каждой странице предусмотреть возможность перехода на все остальные страницы сайта.
Лабораторная работа №2. Создание новой страницы сайта с использованием таблиц и графики
Создайте четвертую страницу сайта index3.htm, используя основные средства языка HTML, таблицы и графику (рис. 1).
1. Таблица должна состоять не менее чем из трех строк и двух столбцов.
• на первой строке находится логотип фирмы (анимированный рисунок размером 250 х 250), информация о фирме;
• на второй - сведения о товарах и услугах;
• на третьей - анимированный рисунок с фамилией автора (размер 468 х 60).
2. На второй строке используйте заголовки нескольких уровней, шрифт разного размера. В левом столбце создайте не менее трех гиперссылок на другие страницы сайта. Рисунки в правом столбце сами должны являться гиперссылками на другие страницы сайта.
Белыми прямоугольниками на схеме обозначены рисунки.
iil ГОЛОВОК (н<1Ш<Ш1К фирмы)
Гиперссылка Гиперссылка Гиперссылка Гиперссылка Основной текст. На странице находится информация о фирме, сведения о товарах и услугах. Рисунки справа являются гиперссылками на другие страницы сайта.
Рисунок 1. Задание к лабораторной работе №2
Лабораторная работа №3. Создание сайта с помощью визуального HTML-редактора
Создайте страницу index4.htm сайта с помощью визуального HTML-редактора
1. Запустите визуальный HTML-редактор.
2. Введите в визуальном HTML-редакторе текст документа.
3. С помощью панели инструментов форматирования отформатируйте текст по собственному усмотрению.
4. Создайте гиперссылки с помощью команды меню Вставка ^ Гиперссылка (Insert ^ Hyperlink).
5. Для создания таблицы щелкните на кнопке Добавить таблицу (Insert Table) на стандартной панели инструментов или используйте пункт меню Таблица (Table ^ Insert Table или Table ^ Draw Table).
6. Задайте цвет ячеек и границ таблицы с помощью контекстного меню.
7. Для добавления иллюстраций используйте кнопку Добавить рисунок из файла (Insert Picture From File) на стандартной панели инструментов или пункт меню Вставка ^ Рисунок -> ... (Insert ^ Picture ^ From File).
8. Дайте команду Файл ^ Сохранить как (File ^ Save As) и сохраните файл в своей папке. Задайте имя файла index4.htm. Подтвердите сохранение изображений, требующих преобразования формата.
9. Запустите файловый менеджер. Откройте полученный файл index4.htm с помощью браузера Internet Explorer.
10. Убедитесь, что созданный документ правильно отображается обозревателем. Обратите внимание на наличие отличий вида документа при отображении в браузере и в визуальном HTML-редакторе.
11. 12.
13.
14.
15.
16.
17.
18.
Просмотрите код HTML полученной страницы с помощью браузера (Вид ^ Просмотр HTML-кода).
Измените ширину окна браузера и посмотрите, как при этом меняется вид документа.
Вернитесь в программу визуального HTML-редактора и дайте команду Вид ^ Показать теги (View ^ Reveal Tags).
Откройте файл с помощью программы Блокнот.
Изучите автоматически сгенерированный код HTML, определите, как с помощью тегов HTML реализованы использованные команды форматирования.
Создайте интернет-магазин вашей фирмы с помощью визуального HTML-редактора и ручной правки тегов HTML (рис. 2, 3). На рисунках белыми прямоугольниками показаны рисунки и надписи. Основная страница интернет-магазина содержит изображения не менее 6 товаров, каждое из которых является гиперссылкой на страницу описания товара (рис. 2).
Следующие 6 страниц содержат подробное описание приведенных товаров, причем на каждой из них есть возможность перейти как на две соседние страницы, так и на основную страницу интернет-магазина (рис. 3).
В пункте «Меню» нужно создать гиперссылки на остальные страницы сайта вашей фирмы - index.htm, index1.htm, index2.htm, index3.htm, index4.htm.
Рисунок 2. Задание к лабораторной работе №3. Основная страница интернет-магазина
Интернет-магазин
Название Цена
Рисунок 3. Задание к лабораторной работе №3. Страница описания товара
Лабораторная работа №4. Создание сайта, рекламирующего учебное заведение
Используя полученные в процессе выполнения лабораторных работ знания, создайте неофициальный сайт, рекламирующий ваше учебное заведение.
1. На первой странице сайта должно быть описание вуза, контактная информация вуза, гиперссылка на официальную страницу вуза, а также способы связи с автором сайта.
2. На следующих страницах сайта возможны такие элементы, как фотоальбом, фонотека, форум, чат и пр.
3. Разместите Ваш сайт на любом бесплатном хостинге, например, http://www.narod.ru.
4. Покажите работу преподавателю.
Результаты
Приведем конкретные примеры выполнения творческого задания (лабораторная работа № 4) учащимися. Всего было создано более 20 сайтов за один семестр.
Рисунок 4. Пример сайта2
Рисунок 5. Пример сайта3
Рисунок 6. Пример сайта4
2 Интернет-ресурс https://knyazevaknyazeva98.wixsite.com/mysite.
3 Интернет-ресурс https://flori-98.wixsite.com/eikfu.
4
Интернет-ресурс http://i90681gq.beget.tech/.
Полученные работы полностью можно посмотреть в интернете по адресам:
URL1: https://knvazevaknvazeva98.wixsite.com/mvsite.5
URL2: https://flori-98.wixsite.com/eikfu.6
URL3: https://marinaushnur25.neocities.org/index.htm.7
URL4: http://i90681gq.beget.tech/.8
Обсуждение
В результате проведенной исследовательской и научно-педагогической работы была выявлена положительная связь между использованием творческих заданий учащимися и их заинтересованностью в освоении материала. Студенты использовали как традиционную форму получения теоретического материала в виде лекций и учебных пособий, так и получение информации через интернет-ресурсы.
В результате проведенного исследования были предложены способы связи учебной работы студентов и профориентационной работы вуза. Кроме того, при такой постановке учебного задания увеличивается мотивация студентов при изучении ими материала, студентами осознается практическая значимость полученных знаний и навыков. Также после прохождения курса занятий создается практический материал, который может быть использован как в дальнейшей учебной работе, так и в профориентационной деятельности вуза. Таким образом, цель нашего исследования достигнута в пределах поставленных ограничений. Результаты данной работы могут быть использованы в дальнейших исследованиях по смежной тематике.
ЛИТЕРАТУРА
1. Анисимова Т.И. Организация самостоятельной работы бакалавров средствами дистанционного обучения // Фундаментальные исследования. 2013. - №11, часть 4. С. 747-750.
2. Глушаков С.В. Программирование Web-страниц / С.В. Глушаков, И.А. Жакин, Т.С. Хачиров. - М.: ООО «Издательство АСТ»; Харьков: «Фолио», 2003. - 387 с.
3. Миронов А.Н. Электронный образовательный ресурс "Дифференциальные уравнения" для бакалавров направления "Математика и компьютерные науки" / А.Н. Миронов, А.А. Торопова // Современная наука. Актуальные проблемы теории и практики. Серия "Гуманитарные науки". - 2015. - № 11-12. - С. 107-109.
4. Миронова Ю.Н. Изучение геоинформационных систем // Международная научно-практическая конференция «Географические аспекты устойчивого развития регионов», 23-24 апреля 2015 г.: материалы: в 2 ч. Ч. 2 - Гомель: ГГУ им. Ф. Скорины, 2015, с. 158-160.
5. Миронова Ю.Н. Использование интерактивной трибуны при чтении лекций по высшей математике // Проблемы и перспективы информатизации физико-
5 Интернет-ресурс https://knyazevaknyazeva98.wixsite.com/mysite.
6 Интернет-ресурс https://flori-98.wixsite.com/eikfu.
7 Интернет-ресурс https://marinaushnur25.neocities.org/index.htm.
8 Интернет-ресурс http://i90681gq.beget.tech/.
математического образования: Материалы Всероссийской научно-практической конференции, г. Елабуга, 14 ноября 2016 г., ред. кол.: Ф.М. Сабирова (отв. ред.) и др. - Елабуга: ЕИ КФУ. 2016. - с. 51-55.
6. Миронова Ю.Н. Лабораторные работы по информатике. Применение языка HTML. Учебно-методическая разработка. - Елабуга: ЕФ КГТУ им. А.Н. Туполева, 2009. - 12 с.
7. Экслер А.Б. Интернет: как быстро подключиться и пользоваться. М., НТ Пресс, 2005.
8. Tatyana I. Anisimova. Forming Bachelors' Labor Actions in Teacher Training When Studying Disciplines of Mathematical and Natural Science Cycle // Mathematics Education. Volume 10, Issue 3 (December 2015), pp. 157-165 - DOI: 10.12973/mathedu.2015.111a.
9. Mansur F. Gilmullin & Evgeniya L. Pupysheva. Workshop on Design and Implementation of Education Programs // Mathematics Education. Volume 11, Issue 1 (April 2016), pp. 35-44. D0I:10.12973/iser.2016.2104a.
10. T.V. Kapustina, A.V. Popyrin & L.N. Savina. Computer Support of Interdisciplinary Communication of Analytic Geometry and Algebra // Mathematics Education. Volume 10, Issue 3 (December 2015), pp. 177-187 - DOI: 10.12973/mathedu.2015.113a.
11. Julia Mironova. The use of modern computer technologies with lectures on higher mathematics // II International Forum on Teacher Education - 2016. 19-21 may 2016. Forum programme. - Kazan, KFU, 2016. P. 288-289.
12. Mironova Yu.N. The study of geoinformatics with the use of gaming moments // International Journal Of Applied And Fundamental Research. - 2016. - № 3 - URL: www.science-sd.com/465-25000 (09.08.2016).
13. Jim Rubin & Manikya Rajakaruna. Teaching and Assessing Higher Order Thinking in the Mathematics Classroom with Clickers // Mathematics Education. Volume 10, Issue 1 (April 2015), pp. 37-51. DOI: 10.12973/mathedu.2015.103a.
Mironova Yuliya Nikolaevna
Kazan federal university Elabuga branch, Russia E-mail: mironovajn@mail.ru
Career guidance during lessons on web design
Abstract. Recently, various information technologies used in education are rapidly developing. The problems of Informatization of education have been studied in the works of authors from different countries.
Also now the task of vocational guidance of school students, the help them at the choice of higher education institution in which they will study sharply. In this paper we propose an approach that combines learning, an educational moment and real practical information product. It is proposed to carry out laboratory work on web design, where students are given an individual task-to create an unofficial site that advertises your University or your faculty: "Enter our University." Students could be used as the software installed on specific computers and network resources of the University. To perform laboratory work with the help of a visual HTML-editor used the opportunity to access the Internet, to create an unofficial website of the University also used Internet resources, such as free hosting. In addition, students could use teaching materials located in free access on the Internet to perform tasks outside the computer class.
In this setting, the study task increases the motivation of students in the study of their material, students are aware of the practical significance of the knowledge and skills. Also, after the course of training, a practical material is created that can be used both in further educational work and in career guidance activities of the University.
Keywords: website; HTML language; HTML tags; web design; HTML editor; vocational guidance; University
