Министерство образования и науки Украины

 

Государственное высшее учебное заведение

«Донецкий национальный технический университет»

 

 

Портал магистров Донецкого национального технического университета Masters Portal of Donetsk National Technical University

 

 

Методические указания

 к лабораторным работам по курсу

«Интернет-технологии»

 

 

(для магистрантов всех специальностей ДонНТУ)

 

 

 

Утверждены 

на заседании кафедры

компьютерной инженерии

протокол № 1 от 29.08.2013 г.

 

 

 

Составители:    Аноприенко Александр Яковлевич

Цололо Сергей Алексеевич

Завадская Татьяна Владимировна

Мирошкин Александр Николаевич

Надеев Дмитрий Владимирович

Иваница Сергей Васильевич

Щербаков Александр Сергеевич

 

 

 

Донецк, 2013


 

УДК 519.768.2

 

 

 

 

Методические указания к лабораторным работам по курсу «Интернет-технологии» (для  магистрантов всех специальностей ДонНТУ). Составители: Аноприенко А.Я., Цололо С.А., Завадская Т.В., Мирошкин А.Н., Надеев Д.В., Иваница С.В., Щербаков А.С.  – Донецк: ДонНТУ, 2013 г. – 40 с.

 

 

 

Целью лабораторного курса «Интернет-технологии» является поэтапное выполнение основных работ, связанных с созданием персонального тематического веб-сайта, основное содержание которого  посвящено теме выпускной работы магистра.  Методические указания содержат материалы по лабораторным работам, примеры и контрольные вопросы.

 

 

Составители:                                 к.т.н., профессор А.Я. Аноприенко,

                                                        к.т.н. , доцент С.А. Цололо,

к.т.н., доцент Т.В. Завадская,

к.т.н., доцент А.Н. Мирошкин,

ассистент Д.В. Надеев,

ассистент С.В. Иваница,

аспирант А.С. Щербаков

 

 

 

 

Ответственный за выпуск:          д.т.н., проф. В.А. Святный

 

 

Рецензент:                                     д.т.н., проф. Е.А. Башков



Содержание

 

 

 

стр.

1.

Вводная работа

5

2.

Работа с веб-сервером: инсталляция файлов с помощью FTP-клиента

9

3.

Поиск информации и его документирование

14

4.

Разработка HTML-документов с минимальной разметкой

18

5.

Оформление резюме и биографического раздела

21

6.

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

25

7.

Работа с портретными фото

27

8.

Разработка динамических изображений

31

9.

Разработка и оформление реферата по теме магистерской работы

33

10.

Оформление библиотеки по теме

36

11.

Оформление перечня ссылок и отчета о поиске

38

12.

Комплексная инсталляция, проверка, отладка и сдача сайта

40

 


Введение

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

При этом на каждую работу, кроме работы №12, отводится одно лабораторное занятие (табл. 1). 

Таблица 1– Примерное соответствие разделов сайта магистра

и выполняемых лабораторных работ

Номер недели

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

Номер лабораторной работы

1

2

3

4

5

6

7

8

9

10

11

12

12

12

12

12

Текстовые файлы

·

·

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Персональный каталог и информационный файл

 

 

·

·

·

 

 

 

 

 

 

 

 

 

 

 

Резюме и биография на русском языке

 

 

 

·

·

 

 

 

 

 

 

 

 

 

 

 

Резюме и биография на украинском языке

 

 

 

 

·

·

 

 

 

 

 

 

 

 

 

 

Резюме на английском языке

 

 

 

 

·

·

 

 

 

 

 

 

 

 

 

 

Портретная фотография

 

 

 

 

 

·

·

 

 

 

 

 

 

 

 

 

Анимация для реферата

 

 

 

 

 

 

·

·

 

 

 

 

 

 

 

 

Реферат на русском и украинском языке

 

 

 

 

 

·

 

·

·

 

 

 

 

 

 

 

Перевод статьи с иностранного языка

 

 

 

 

 

·

 

 

·

 

 

 

 

 

 

 

Реферат на английском языке

 

 

 

 

 

·

 

 

·

·

 

 

 

 

 

 

Библиотека

 

 

 

 

 

 

 

·

·

·

 

 

 

 

 

 

Ссылки

 

 

 

·

·

·

·

·

·

·

·

 

 

 

 

 

Отчет о поиске

 

 

·

·

·

·

·

·

·

·

·

 

 

 

 

 

Индивидуальный раздел

 

 

 

 

 

 

 

 

·

·

·

·

 

 

 

 

Сдача сайта

 

 

 

 

 

 

 

 

 

 

 

·

·

·

·

·

 


 Лабораторная работа № 1 – Вводная работа

Цель работы

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

Задание

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

Методические указания к выполнению задания

Выполнение данной лабораторной работы рекомендуется начать с того, что на рабочем компьютере на диске D: (или, в случае отсутствия второго диска, на C:) необходимо найти (или создать в случае отсутствия) каталог masters с каталогом своего факультета (например, fknt – для факультета компьютерных наук и технологий, kita – для факультета компьютерных и информационных технологий, fem – для факультетов экономики и менеджмента, и т.д.). В каталоге своего факультета необходимо создать 2 персональных каталога, название которых определяется собственной фамилией, написанной латиницей (с маленькой буквы). При этом каталог, в котором будет храниться точная копия серверного варианта текущей версии страницы, будет называться просто по фамилии, а каталог со всеми  рабочими материалам должен содержать дополнительно в названии элемент _tmp. Например, для студента с фамилией Иваненко эти каталоги будут выглядеть как ivanenko_tmp и ivanenko.

Далее с помощью какого-либо из установленных на компьютере браузеров (Google Chrome, Opera, Mozilla Firefox, Internet Explorer и др.) получить доступ к порталу магистров ДонНТУ (http://masters.donnu.edu.ua).

Портал магистров и его главная страница структурно состоят из нескольких частей:

1.    Раздел «Персональные сайты магистров». Ключевой раздел, который содержит (в виде таблиц) ссылки на сайты магистров, сгруппированные по годам и факультетам.

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

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

 

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

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

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

Идентификационный файл, шаблон которого называется ivanenko.txt, должен содержать следующую информацию на трех языках:

1.    Фамилия, Имя, Отчество;

2.    Тема магистерской работы;

3.    Специальность.

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

ru

Иваненко Иван Иванович

Исследование методов оптимизации управляющего автомата

Компьютерные системы и сети

 

ua

Iваненко Iван Iванович

Дослідження методів оптимізації керуючого автомату

Компьютерні системи та мережі

 

en

Ivanenko Ivan

Research of optimization methods for control automaton

Computer systems and networks

 

Для редактирования идентификационного файла может быть использован любой доступный текстовый редактор, например, Блокнот из набора стандартных программ операционных систем семейства Microsoft Windows (рис. 1).

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

Рис. 1 – Идентификационный файл магистра

в текстовом редакторе Блокнот

Отчетная документация

Персональные каталоги на локальном диске (основной, например, ivanenko, и рабочий, например, ivanenko_tmp) с предварительными текстовыми версиями файлов с информацией о рабочем месте и теме выпускной работы.

 

Контрольные вопросы

1.           Какие каталоги и файлы необходимы на начальном этапе работы в рамках данного курса?

2.           Каковы основные разделы портала магистров?

3.           В чем назначение основных разделы портала магистров?

4.           Что входит в состав раздела «Учебно-методические материалы» портала магистров ДонНТУ?

5.           Назначение и состав архивного файла template_example?

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

7.           Какие программные продукты представлены в разделе «Рекомендуемое программное обеспечение» портала магистров ДонНТУ?

8.           Для чего предназначен идентификационный файл магистра?

9.           Какая информация содержится в идентификационном файле магистра?

10.      Какова структура идентификационного файла?


Лабораторная работа № 2 – Работа с веб-сервером: загрузка файлов с помощью FTP-клиента

Цель работы

Освоение базовых способов работы с веб-сервером.

Задание

Освоить работу с FAR-менеджером в качестве FTP-клиента для передачи файлов на веб-сервер. Скопировать на сервер подготовленные текстовые информационные файлы.

Методические указания к выполнению задания

Предполагается, что в процессе выполнения данной и всех последующих лабораторных работ их результаты должны копироваться на веб-сервер для просмотра и последующей работы с ними. Для копирования файлов на сервер в рамках данного курса традиционно используется менеджер файлов FAR (рис. 7) – свободно распространяемая (shareware) работающая в текстовом режиме программа управления файлами для ОС семейства Windows, которая обеспечивает обработку файлов с длинными именами и имеет обширный набор дополнительных функций, в том числе возможность использования ее в качестве FTP-клиента для передачи файлов на веб-сервер.

При работе с FAR интенсивно используются функциональные клавиши F1, …, F10 (рис. 2, меню в нижней части окна). Например, для получения детальной справки (рис. 3) можно воспользоваться клавишей F1. Наиболее часто используются следующие клавиши и их комбинации:

Tab – Изменить активную панель;

Ins – выделить файлы и/или каталоги для группового копирования, перемещения или удаления (или отменить выделение для уже выделенных элементов);

Alt+F1 – изменить текущий диск в левой панели;

Alt+F2 – изменить текущий диск в правой панели;

F5 – копировать из активной панели в неактивную;

F6 – переместить из активной панели в неактивную;

F8 – удалить файл, каталог или выделенные элементы.

Рис. 2 –  Внешний вид менеджера файлов FAR

Рис. 3 – Окно справки, выводимое при нажатии клавиши F!

Для подключения к серверу по протоколу FTP в меню изменения текущего диска выбирается пункт FTP (рис. 4).

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

 

Рис. 4 – Меню, выводимое при нажатии комбинации клавиш  <Alt>F2. Выделен пункт, выбираемый для подключения к серверу по протоколу FTP

 

Рис. 5 Задание нового адреса (в виде URL) для меню подключения к удаленному серверу по протоколу FTP

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

Рис. 6 – Окно подключении к FTP-серверу

При успешном подключении к серверу в соответствующей панели отображается список каталогов на сервере (рис. 7).

 

Рис. 7 – При успешном подключении к серверу отображается список каталогов на сервере

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

Рис. 8 –  Копирование файлов на сервер по команде F5

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

Для просмотра скопированной информации на сервере с помощью браузера может быть использован адрес формата http://masters.donntu.edu.ua/mXXXX, где «XXXX» соответствует текущему году.

Отчетная документация

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

Контрольные вопросы

1.    Что такое FTP-клиент?

2.    Что собой представляет программа FAR?

3.    Какие клавиши и их комбинации наиболее часто используются при работе с FAR?

4.    Как в программе FAR можно задать адрес нового сервера?

5.    Каким образом с помощью FAR осуществляется копирование файлов на веб-сервер?


Лабораторная работа № 3 – Поиск информации и его документирование

Цель работы

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

Задание

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

Методические указания к выполнению задания

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

 

Рис. 9 –  Шаблон таблицы для фиксации результатов информационного поиска в формате Excel

 

При поиске обязательными для использования являются поисковые системы Google, Яндекс, Bing и Meta, однако приветствуется использование и других поисковых систем (например, Yahoo!). Однако при выборе дополнительных поисковых систем необходимо учитывать тот факт, что многие поисковые современные системы используют не собственные поисковые механизмы (движки), а лицензируют их у других, более крупных компаний. Это может приводить к тому, что разные поисковые системы выдают одинаковые результаты поиска, и их сравнение становится нецелесообразным. Таких ситуаций следует избегать, и учитывать этот факт при формировании списка поисковых систем для информационного поиска.

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

1.    Тема магистерской работы.

2.    Фамилия имя отчество руководителя (при необходимости запрос может быть уточнен названием ВУЗа, факультета или кафедры).

3.    Первая ключевая фраза, связанная с темой и основной идеей магистерской работы.

4.    Вторая ключевая фраза, связанная с магистерской работой.

5.    Третья ключевая фраза, связанная с магистерской работой.

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

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

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

Также необходимо учитывать, что некоторые современные поисковые системы пытаются выполнить автоматический перевод с некоторых языков (например, украинский à русский). Поэтому при выполнении запросов на украинском и английском языках необходимо явно задать поисковой системе язык, на котором будет выполняться поиск. Это можно сделать с помощью раздела «Расширенный поиск», который в том или ином виде присутствует в любой поисковой системе (рис. 10).

 

Рис. 10 – Раздел «Расширенный поиск» в поисковой системе Google

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

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

Отчетная документация

Первичная таблица результатов поиска по теме и анализ результатов поиска по названию выпускной работы (в конспекте с датой и подписью преподавателя).

Контрольные вопросы

1.    Что необходимо для того, чтобы эффективно подготовить и провести поиск по теме магистерской работы?

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

3.    Какие поисковые системы дополнительно рекомендуются для использования при поиске информации по теме?

4.    Следует ли использовать шаблон таблицы отчета о поиске и где он находится?

5.    Какие требования выдвигаются к поисковым запросам?

6.    Каков перечень рекомендуемых запросов?

7.    Чем отличаются понятия «поисковый механизм» и «поисковая система»?

8.    Какие особенности мультиязычного поиска необходимо учитывать?


Лабораторная работа № 4 – Разработка HTML-документов с минимальной разметкой

Цель работы

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

Задание

Выполнить гипертекстовую разметку информационного файла (с информацией о названии темы на разных языках) и скопировать его (в составе персонального каталога) на сервер.

Методические указания к выполнению задания

Предполагается, что в процессе данной лабораторной работы должны быть использованы 5 основных тегов гипертекстовой разметки: html, head, title, body и h. В качестве основного инструмента при этом используется простейший текстовый редактор, например, «Блокнот».

Первым гипертекстовым документом, подлежащим реализации, является специальный информационный файл (в качестве примера рассматривается ivanenko.txt), который должен содержать эталонные варианты написания фамилии, имени, отчества, названия темы и специальности на разных языках (рис. 11).

 

Рис. 11 – Пример неразмеченного текстового файла, открытого в «Блокноте» для гипертекстовой разметки

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

 

Рис. 12 – Пример размеченного гипертекстового файла с использованием основных тегов HTML

При создании новых гипертекстовых документов и при разметке существующих текстовых файлов может использоваться как стандартный текстовый редактор «Блокнот», так и более универсальные решения (Notepad++, PsPad и другие). Их основными особенностями являются:

-      подсветка синтаксиса для файлов HTML и CSS;

-      пакетная обработка файлов;

-      встроенные средства редактирования HTML-тегов;

-      расширенные функции поиска и замены;

-      дополнительные функции работы с текстом.

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

1.    Редактируемый документ (он должен быть сохранен на локальном компьютере) открывается в браузере.

2.    Выбирается опция просмотра исходного текста гипертекстового документа.

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

4.    Обновляется содержимое окна браузера (функциональная клавиша F5) с открытым файлом и осуществляется просмотр и проверка сделанных изменений.

5.    При необходимости пункты 3 и 4 повторяются многократно вплоть до завершения работы с соответствующим файлом.

Размеченный файл (например, ivanenko.htm) копируется на локальном компьютере в соответствующий каталог магистра. Далее данный каталог копируется с помощью FTP-клиента в факультетский каталог на сервере. Затем с помощью браузера осуществляется контрольный просмотр скопированных файлов на сервере.

Отчетная документация

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

Контрольные вопросы

1.    Какие теги HTML относятся к числу обязательных?

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

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

4.    Какая последовательность действий рекомендуется при разметке существующих документов?

5.    Какие универсальные текстовые редакторы предпочтительнее использовать для редактирования HTML-документов.

6.    Какие специфические функции поддерживают специализированные редакторы HTML документов?

 


Лабораторная работа № 5 – Оформление резюме и биографического раздела

Цель работы

Разработка моноязычных вариантов резюме и  биографического раздела.

Задание

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

Методические указания к выполнению задания:

При выполнении данной и последующих лабораторных работ предполагается активное использование шаблона. При этом предполагается параллельная работа с редактором («Блокнот» или специализированный редактор HTML документов) и браузером в соответствии с ранее описанной методикой.

Основная работа выполняется с файлами index.htm (резюме) и bio/index.htm (биография). Кроме этого используется и при необходимости редактируется файл стилей master_style.css. Для подключения файла стилей в заглавную часть HTML-файлов добавляется специальная строка:

 

<head>

<title>Магистр ДонНТУ Иваненко Иван Иванович</TITLE>

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

</head>

 

При этом используется простое описание стилей в файле master_style.css, предполагающее задание общих свойств содержимого ключевых тегов <body>, <p>, <h> и <a>. Вот этот фрагмент стилевой таблицы с необходимыми комментариями:

body { /**** Тело документа ****/

  background-image:

       url('../images/bg1.png'); /* фоновая картинка */

  margin-bottom: 20pt;          /* отступ снизу */

}

 

p { /**** Абзац ****/

  text-indent: 20pt; /* отступ красной строки */

  font: 15pt/120% Times New Roman, serif; /* шрифт */

  margin: 0pt; /* поля (верх, право, низ, лево) */

  padding: 2pt 15pt 3pt 15pt;  /* отступы (верх, право, низ, лево) */

  text-align: justify; /* выравнивание текста - по ширине */

}

 

h1 { /**** Заголовок страницы ****/

  font: bold 18pt Century, serif; /* шрифт */

  text-align: center;      /* выравнивание текста  - по центру */

  padding: 0pt;            /* отступы (со всех сторон) */

  color: #0000a3;          /* цвет текста */

  margin-top: 0pt;         /* поле сверху */

}

 

h2 { /**** Подзаголовок страницы (названия подразделов) ****/

  font: bold 15pt Century, serif; /* шрифт */

  text-align: left;        /* выравнивание - по левой стороне */

  text-indent: 25pt;       /* отступ красной строки */

  margin: 20pt 10pt 10pt 10pt; /* поля (верх, право, низ, лево) */

  color: #0000a3;             /* цвет текста */

}

 

h3 { /**** Подзаголовок страницы (названия подподразделов) *****/

  font: bold 13pt Century, serif;    /* шрифт */

  text-align: left;    /* выравнивание текста  - по левой стороне */

  text-indent: 10pt;    /* отступ красной строки */

  margin: 20pt 10pt 0pt 10pt;    /* поля (верх, право, низ, лево) */

  color: #0000a3;    /* цвет текста */

}

 

a { /**** Простая ссылка ****/

  font: 14pt Century, serif; /* шрифт */

  color: blue; /* цвет текста */

}

Редактирование таблицы стилей выполняется с помощью тех же универсальных редакторов, которые используются для работы с HTML-документами. При этом подсветка синтаксиса соответствует особенностям разметки CSS-файлов (рис. 13).

Необходимо отметить, что резюме (файл index.htm) предлагается реализовать в виде таблицы с невидимыми границами. В стилевом файле master_style.css этому соответствует идентификатор #resume (см. содержимое рис. 13). В оформлении таблицы с резюме учитывается выделение четных/нечетных строк для улучшения восприятия информации, а также подсветка текущей строк под курсором мыши.

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

 

Рис. 13 – Описание идентификатора #resume во внешняя таблица стилей master_style.css в среде редактора PSPad

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

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

Отчетная документация

Файлы index.htm (резюме) и bio/index.htm (биография) и master_style.css на сервере в персональном каталоге.

Контрольные вопросы

1.    Назначение и особенности использования CSS?

2.    В чем особенности использования внешнего файла с таблицей стилей?

3.    Каким образом на сайте магистра может использоваться общий для всех документов файл стилей?

4.    Какие требования выдвигаются к оформлению биографии?

5.    Как рекомендуется оформлять резюме?

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

7.    Что может рассматриваться в качестве дополнительных средств обеспечения орфографической и стилистической правильности текстов?

 


Лабораторная работа № 6 – Мультиязычное представление информации

Цель работы

Завершение разработки разделов резюме и биографии на различных языках.

Задание

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

Методические указания к выполнению задания:

При выполнении данной работы рекомендуется использовать доступные через Интернет переводчики и словари. Например, для перевода с русского на английский, немецкий и французский могут использоваться  свободно доступные ресурсы компании ПРОМТ (www.translate.ru).

Наиболее популярным и качественным онлайн-переводчиком на данный момент является «Переводчик Google», который располагается по адресу translate.google.com/ (рис. 14). Данный ресурс обеспечивает наиболее качественный перевод для максимально доступного набора языков.

 

Рис. 14 – Окно «Переводчика Google»

Весьма полезным может быть также Lingvo – один из наиболее известных в Интернет словарей, разработанный компанией  ABBYY Software (www.lingvo.ru). Но во всех случаях необходима «ручная» доработка и вычитка переведенного текста, а также проверка англоязычных (или немецких, или французских) переводов преподавателем соответствующего языка и/или руководителем работы, что должно подтверждаться подписью на печатном или рукописном варианте перевода.

Отчетная документация

Файлы indexu.htm и indexu.htm (с англоязычным и украиноязычным вариантом резюме) и файл bio/indexu.htm (с украиноязычным вариантом биографии) на сервере.

Контрольные вопросы

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

2.    Какие системы онлайн-переводы являются наиболее популярными?

3.    В чем отличия систем автоматического перевода и онлайн-словарей?

4.    В чем заключатся особенности подготовки переводов для портала магистров ДонНТУ?


Лабораторная работа № 7 – Работа с портретными фото

Цель работы

Освоение методики и приобретение практических навыков подготовки портретных фото для публикации в интернете.

Задание

Подготовить три фото (необходимые размеры – 90х120, 180х240, 360х480) для персонального сайта магистра и разместить их на сервере.

Методические указания к выполнению задания

При подготовке и редактировании фотографий рекомендуется использовать свободно распространяемую программу PhotoFiltre  или аналогичную ей. Методика подготовки фото является  последовательностью шагов, представленных на рис. 15-20.   

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

 

Рис. 15 – Первый шаг в подготовке персональных фото:

получение исходных фотографий

 

Рис. 16 – Второй шаг: копирование фотографий и сохранение их в каком-либо из форматов без сжатия (RAW, TIFF, PSD)

 

Рис. 17 – Третий шаг: обрезка фото c требуемыми пропорциями (соотношение сторон 3:4 + правила «золотого сечения»)

Рис. 18 – Четвертый шаг: ретуширование фото

 

Рис. 19 – Пятый шаг: масштабирование фото до необходимых размеров (ivanenko.jpg – 90х120, photo.jpg – 180х240, ivanenko_big.jpg – 360х480)

Рис. 20 – Шестой шаг: преобразование фото в формат JPG (в случае необходимости регулируется процент качества)

Отчетная документация

Три варианта персональных портретных фото на сервере (ivanenko.jpg – 90х120, photo.jpg – 180х240, ivanenko_big.jpg – 360х480).

Контрольные вопросы:

1.    Какие портретные фотографии являются обязательными для сайта магистра и их назначение?

2.    Какие программные средства рекомендуется использовать при подготовке фотографий?

3.    Из каких шагов состоит рекомендуемая методика подготовки фотографий для сайта?

 


Лабораторная работа № 8 – Разработка динамических изображений

Цель работы

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

Задание

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

Методические указания к выполнению задания

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

1.        Выбирается базовое статическое изображение и/или сюжет анимации (для этого может использоваться поиск изображений в интернете).

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

3.        С помощью специальной программы последовательность кадров объединяется в единое динамическое изображение. Для того может, например, использоваться программа MP GIF Animator (рис. 21, см. раздел «Рекомендуемое программное обеспечение» на портале магистров).

4.        Полученная анимация оптимизируется (в том числе минимизируется по объему) путем подбора наилучшего сочетания параметров и доработки отдельных кадров.

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

Рис. 21 – Главное окно программы программа MP GIF Animator

 

Отчетная документация

Анимация (файл .gif или .swf) по теме магистерской работы на сервере в каталоге diss.

Контрольные вопросы

1.    В чем состоит методика подготовки анимации?

2.    Какие программные средства необходимы для подготовки динамических иллюстраций?

3.    Каково минимальное количество кадров в создаваемой динамической иллюстрации?


Лабораторная работа № 9 – Разработка и оформление

реферата по теме магистерской работы

Цель работы

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

Задание

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

Методические указания к выполнению задания

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

Обязательными разделами реферата являются:

1.    Интерактивное содержание. Все элементы содержания являются ссылками на соответствующие разделы (или подразделы) реферата.

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

3.    Список литературы. Содержит перечень использованной литературы, на которую указывают интерактивные ссылки по тексту реферата.

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

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

Примеры фрагментов страницы с тематическим рефератом приведены на рис. 22-23.

 

Рис. 22 – Фрагмент реферата (содержание)

 

Рис. 23 – Фрагмент реферата (список литературы)

Отчетная документация

Реферат на трех языках по теме выпускной работы на сервере в папке diss (файлы index.htm, indexu.htm и indext.htm).

Контрольные вопросы

1.    Какие требования выдвигаются к структуре научных публикаций?

2.    Какова опорная структура реферата по теме магистерской работы?

3.    В чем заключаются особенности содержания реферата по теме магистерской работы?

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

5.    Каким образом оформляется список использованных источников?


Лабораторная работа № 10 – Оформление библиотеки по теме магистерской работы

Цель работы

Приобретение практических навыков оформления тематических электронных библиотек.

Задание

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

Методические указания к выполнению задания

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

В библиотеке размещаются также собственные публикации (статьи, доклады, презентации и переводы), надлежащим образом оформленные. В каталоге библиотеки (library/index.htm) ссылки на источники информации также являются обязательными. В виде исключения в библиотеке допускаются также  файлы в форматах PDF, PPT и некоторых других. При этом применение соответствующих форматов должно быть достаточно обоснованным и оправданным (большое количество формул, сложных встроенных картинок и так далее).

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


Рис. 24 – Пример организации папки library.

 

Отчетная документация

Каталог и файлы электронной библиотеки в папке library.

Контрольные вопросы

1.    Какие документы могут быть включены в состав библиотеки сайта?

2.    Какие требования предъявляются к оформлению материалов библиотеки?

3.    В чем особенности сохранения материалов электронной библиотеки?


Лабораторная работа № 11 – Оформление перечня ссылок и отчета о поиске

Цель работы

Приобретение практических навыков оформления тематических перечней ссылок (гиперссылок) и отчетов о поиске по теме.

Задание

Оформить и разместить на сайте структурированный аннотированный перечень ссылок и отчет о поиске по теме работы.

Методические указания к выполнению задания

В ходе поиска по теме формируется максимально полный и точный перечень ссылок по теме, охватывающий все наиболее значимые и информативные материалы по теме (на различных языках) из числа доступных через интернет. При этом перечень должен быть достаточно структурирован (5-7 тематических разделов), ссылки должны сопровождаться содержательными аннотациями и быть 100 % работоспособными (на момент создания сайта). Пример оформления перечня ссылок приведен на рис. 25.

 

Рис. 25 – Фрагмент перечня ссылок

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

 

Рис. 26 – Фрагмент отчета о поиске.

 

Отчетная документация

Файлы перечня ссылок (index.htm) и отчета о поиске (zvit.htm) в каталоге links.

Контрольные вопросы

1.    Каким требованиям должен соответствовать перечень ссылок по теме?

2.    Назначение и состав отчета о поиске?

3.    Какие основные поисковые системы используются в отчете о поиске?


Лабораторная работа № 12Комплексная инсталляция, проверка, отладка и сдача сайта

Цель работы

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

Задание

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

Методические указания к выполнению задания

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

При этом проверка, корректировка и сдача сайта происходят в следующей последовательности:

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

2.    Сдача сайта преподавателю, ведущему лабораторные занятия. Выявленные и устраненные при этом замечания фиксируются и нумеруются. Список устраненных замечаний, подписанный преподавателем, предъявляется на последующем этапе сдачи.

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

Отчетная документация

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

 


 

Методические указания

 

 

к лабораторным работам  по курсу

«Интернет-технологии»

(для  магистров всех специальностей ДонНТУ).

 

Составители:

Аноприенко А.Я., Цололо С.А., Завадская Т.В., Мирошкин А.Н., Надеев Д.В., Иваница С.В., Щербаков А.С.

 

 

© ДонНТУ, 2008, 2013

© ООО «Технопарк ДонГТУ УНИТЕХ», 2008, 2013

 

 

 

 

 

Издательство: ООО «Технопарк ДонГТУ УНИТЕХ»

 

Свидетельство о внесении субъекта издательского дела в государственный реестр издателей, изготовителей и распространителей издательской продукции: ДК № 1017 от 21.08.2002.

83000, г. Донецк, ул. Артема, 58, к.1.311

Тел.: (062) 304-90-19

Технический редактор: С.А. Цололо.

 

 

Подписано к печати 21.09.2013. Формат 29,7х42 1/4

Усл. печ. л. 2.. Печать лазерная. Заказ №

Тираж 100 экз.

 

Отпечатано в типографии «Друк-инфо»

83001, Украина,  г. Донецк, ул. Артема, 58

Тел.: (062) 335-64-55