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

План лекции
2
1. Общие замечания (24 замечания).
2. Требования к разделу «Резюме» (6 требований).
3. Требования к разделу «Биография» (5 требований).
4. Требования к разделу «Реферат» (10 требований).
5. Требования к разделу «Биография» (7 требований).
6. Требования к разделу «Ссылки» (5 требований).
7. Требования к разделу «Отчет о поиске» (4 требования).
8. Требования к индивидуальному разделу (4 требования).
9. Оформление текстовой информации.
10. Дополнительная информация.
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту

3
Общие замечания
Максимальный общий объем сайта — 3 Мбайта
Проверка одинакового вида сайта во всех браузерах (Chrome, Firefox, Opera и даже Internet Explorer).
Базовая структура папок и файлов должна быть четко соблюдена (см. лекцию № 1).
Идентификационный файл должен быть заполнен аккуратно, без лишних строк и пробелов.
Название специальности
на всех трех языках у всей группы
должно быть одинаковым.
иначе не попадете
в общий список
по специальности и будете одиноко «висеть» внизу веб-страницы
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту

4
Общие замечания
Все требуемые (в частности, предельные) параметры по сайту смотрите в оценочном листе!
Заголовки: структура текста в шапке сайта — ФИО (h1), факультет (h3), кафедра (h3), специальность (h3), тема магистерской работы (h2), уч. степень, звание и ФИО руководителя (h3).
В разделе «Реферат» тема — h1, ФИО — h2
(уровень заголовков меняется)
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Опционально: шапка не должна занимать весь экран,
с шириной не более 1000 пикселей.
Подсказка: max-width:1000px

5
Общие замечания
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Заполняем правильно содержимое элемента title
в разделе «Реферат»:
Реферат – Тема магистерской работы – Фамилия Имя Отчество
Ссылки на университет и портал магистров должны открываться в новом окне (или вкладке).
Переход на сайт ДонНТУ и портал магистров — на те же языковые версии, с которых осуществляется переход
(из украинской веб-страницы магистра на украинскую версию веб-страницы портала магистров).
Это правило применяется к внутренним страницам сайта магистра. Обязательно проверьте нижнее навигационное меню!
target=“_blank”

6
Общие замечания
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Все дополнительные картинки размещаем в отдельную папку (images). Основные картинки — в подпапку соответствующего раздела (diss/images, ind/images и т. д.).
Все названия файлов — маленькими латинскими буквами (особенно проверять расширения файлов!).
Только *.htm, никаких *.html (см. лекцию № 1).
Навигационное меню нужно дублировать внизу страницы (как в шаблоне!).
Поэтому ссылки «Вверх»
или «К началу страницы»
по тексту не имеют смысла.
или в крайнем случае обеспечить доступность к меню из любого места веб-страницы, например «плавающее» сбоку или зафиксированное вверху меню

7
Общие замечания
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Для кавычек использовать теги
…
. Прописывать язык страницы .
Правильные кавычки
для каждого языка уже
прописаны в CSS
(но нужно проверить UA).
Для вставки нестандартных символов пользуйтесь таблицей спецсимволов (подстановок) HTML.
в шаблоне укр. и англ. страниц должно бырть веб-страницах прописано соответственно
,
неразрывный пробел:
тире: –
длинное (книжное) тире: —
неразрывный дефис: ‑
«мягкий» перенос: ­
апостроф: ‑ или ʼ
многоточие: …

8
Общие замечания
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Персональное фото магистра — согласно требованиям: размеры; объем; пропорции лица (см. оценочный лист). Никаких букетов, цветов, встроенных в голову очков, взглядов исподлобья, сверху вниз и т. д.
Ориентир — фото на визу или загранпаспорт.
Персональное фото магистра: название фото магистра (кроме photo.jpg) должно соответствовать названию папки (фамилия магистра латиницей).
Урок (пошаговая инструкция) по созданию портретного фото:
http://masters.donntu.org/ivanitsa/materials/it/p-photo_beta.pdf

9
Общие замечания
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Картинки: у каждого элемента IMG должны быть заполнены атрибуты alt и title.
Картинки (управление размером): ширина в процентах (для комфортного просмотра на смартфонах или планшетах), но ограничить максимум! (для мониторов больших диагоналей).
Тема следующей лекции!
Картинки (качество):
избегать сильного пережатия!
Не сохранять фото в PNG или GIF, а графику —
в JPEG. Размер картинок по ширине —
600–900 пикселей.
Подсказка:
width:90%; max-width:600px;

10
Общие замечания
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Таблицы (управление шириной): таблица, как правило,
не помещается на экранах мобильных устройств (появляется горизонтальная полоса прокрутки). Выход — сделать таблицу «скроллируемой» индивидуально.
Проверять «адаптивность» всех страниц сайта
на различных устройствах. Сайт должен правильно отображаться и на 4- и на 40-дюймовых экранах устройств различных производителей.
таблицу «оборачивать» в DIV со свойством CSS: overflow: auto;
используйте сервисы:
http://quirktools.com/screenfly/
http://viewlike.us

11
Общие замечания
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Фон: фоновая картинка (или фоновый цвет) не должны «забивать» текст, текст должен оставаться читабельным!
Переменные: все переменные (разделы «Реферат», и может быть «Индивидуальный раздел»)
в теги
…
.
Аббревиатуры:
1-й вариант: полное описание (аббревиатура);
2-й вариант: в тегах
…
.
один раз полное описание (аббревиатура
в скобках), затем только аббревиатура
АСУ

12
Общие замечания
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Шаблон «по умолчанию»,
без индивидуальных правок оформления сдавать нельзя!
(минимум — подключение цветовой схемы
или использование фоновых изображений)
цвета кнопок меню также нужно изменить
под цветовую палитру сайта
Фон (продолжение): если фоновая картинка все же «забивает» текст — используйте полупрозрачный фон для текстовых блоков: rgba(255, 255, 255, 0.5).
если фоновое изображение зафиксировано и «мостит фон» (картинка повторяется), избегать резких переходов в цвете
(рисунок изображения должен быть симметричным!)

13
Требования к разделу «Резюме»
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Единообразность стиля без глаголов, в каждой
ячейке текст начинать
с большой (маленькой)
буквы, в конце ячейки точки (не) ставить.
Краткость — сестра таланта!
Помните, что на чтение резюме работодатель потратит
в среднем 30 секунд!
Единообразность формата: сначала дата
(или диапазон дат) затем тире и описание.
Не дублировать тексты: не копировать куски
из биографии (особенно в планы на будущее).
В разделе «Вуз»: диапазон лет, университет, факультет, [кафедра], специальность, уровень образования.
в Украине существует три уровня высшего образования:
бакалавриат, специалитет, магистратура

14
Требования к разделу «Резюме»
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Контактная информация (тел., e-mail, skype, twitter, …) может быть размещена в файле index.htm в папке x и на страницах резюме (это если нет желания показывать всем свои полные контакты. Также e-mail может быть представлен на всех страницах сайта по желанию магистра.
Раздел «x» содержит русскоязычное резюме
с расширенным блоком контактной информации.
Папку «x» лучше переименовать — «х385519».
В разделе «Контактная информация» указывать вид контакта (e-mail, skype, twitter, …).
E-mail: [e-mail],
тел.: [phone], skype.:ivanenko@.

15
Требования к разделу «Биография»
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Структурированность: личностное становление, профессиональное становление, планы на будущее.
Использовать падежные окончания:
например, в 1-м классе…, 5-й курс….
Не начинать
абзац с цифры!
Ориентировочный объем — 4000 знаков (без пробелов)
Все инициалы расшифровывать:
ФИО писать в порядке ИОФ.
Запись дат: например, 1 сентября 2010 года…
Дни и годы записываются без падежных окончаний
Избегать сокращения: и т. д., т. к., т. е (писать полностью).

16
Требования к разделу «Реферат»
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Не «автореферат», а «реферат»!
Анимация: 6–7 циклов; 5–8 кадров; объем до 150 кБайт;
задержка между кадрами
достаточная для просмотра.
Минимальный объем — 12 000 знаков (без пробелов)
английская версия — минимум 60 % от русской
В начале реферата обязательно должно быть интерактивное содержание с переходом к разделам.
Картинки: минимум 2–5 штук, больше — лучше, одна из них анимированная.
Анимацию не делать бесконечно цикличной!

17
Требования к разделу «Реферат»
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Подпись под анимацией: название + описание в скобках (количество кадров, количество циклов, объем). Описание также выносится в атрибуты alt и title.
Список литературы: по требованиям ВАК
(минимум 7–10 источников). Электронные ссылки оформляются в соответствии с форматом:
Многоязычная анимация: если в анимации присутствуют надписи, то необходима отдельная анимация для каждой языковой страницы (надписи переводятся на соответствующий язык).
Автор Название источника [Электронный ресурс]. —
Режим доступа: ссылка (URL).

18
Требования к разделу «Реферат»
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Интерактивная ссылка: по тексту обязательно должны быть ссылки на литературу, которые оформляются как интерактивные ссылки на элемент списка литературы.
Формулы: в крайнем случае (ввиду сложности написания) оформляется в виде картинки (формат PNG), с прозрачным фоном. Формула размещается в текстовом блоке
с выравниванием по центру без обтекания.
Подпись под рисунками:
оформляется как текст, а не как часть рисунка.
Квадратные скобки не входят в ссылку: [ссылка].
Например: [1]; [1, 3]; [1, с. 23]; [1–3] (ссылка на 1).

19
Требования к разделу «Библиотека»
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Статьи на отдельных страницах с белым фоном.
Не воровать! Проверять найденные статьи на предмет наличия у магистров прошлых лет — не заимствовать.
Минимальное количество — 10 статей
(минимум — одна переводная)
Обязательно указывать источник на статьи
(в разделе и на страницах статей)
Открывать статьи в том же окне.
Как вариант:
background-image: none;
В title страниц со статьями — только авторы и названия статей.

20
Требования к разделу «Библиотека»
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Переводная статья: обязательно указывать источник (если электронный — гиперссылка) и автора перевода (себя любимого).
Источник переводной статьи: если источник для перевода бумажный — его нужно также размещать. Например, в виде скана в PDF. Этот скан не учитывается в общем количестве файлов PDF библиотеки.
Не более 3–5 файлов PDF. Причина размещения: много формул, «массивные» таблицы, сложная верстка, скан из бумажного источника и пр.
Переводная статья в формате *.htm.

21
Требования к разделу «Ссылки»
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Ссылки у других магистров не «воровать»!
Для длинных ссылок отображаемый адрес сокращается, например, до доменного имени.
Описание ссылок делать таким, чтобы было понятно, что находится «за ссылкой».
Орфография: не забываем ставить точки в конце абзацев в описании.
Структурирование! (материалы магистров ДонНТУ, научные работы и статьи, техническая и справочная литература и пр.).

22
Требования к разделу «Отчет о поиске»
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Названия поисковых систем (или их логотипы) в шапке таблицы, а также числовые результаты должны быть ссылками.
Обязательно приводить диаграммы, демонстрирующие изменения в результатах поиска. Лучше — несколько.
Делать «продуманный» анализ полученных результатов.
в диаграммах при необходимости использовать
логарифмическую шкалу или подписи данных
Можно использовать любые типы диаграмм (круговая, линейчатая, кольцевая и пр.).

23
Требования к индивидуальному разделу
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Без плагиата! Если позаимствовано, то должна быть ссылка на источник. Аналогично — со всеми иллюстрациями.
Если подобная тема рассматривалась магистрами ранее, то ссылку на эти страницы с заголовком: «Похожие темы».
Список источников в соответствии со стандартными требованиями (аналогично реферату).
Собственный текст — минимум 30%
Дополнительные (рекомендуемые) источники оформляются списком ниже списка источников (со своим заголовком).
иллюстрации обязательно!

24
Оформление текстовой информации
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
Если не знаете что и как записывается (ставится), пользуйтесь соответствующими современными
справочниками, например:
http://masters.donntu.org/ivanitsa/materials/it/pravila.chmПравила русской орфографии и пунктуации. Полный академический справочник под редакцией В. В. Лопатина, 2009 г.
Очень помогает книга
«Веб-типографика. Искусство оформления текстов для Интернета»
Рекомендации по оформлению текстов (РИА Новости):
http://masters.donntu.org/ivanitsa/materials/it/ria-rules.pdf

25
Оформление текстовой информации
Курс «Интернет-технологии». Лекция 9. Основные замечания по сайту
На что нужно обратить внимание:
Правила употребления дефиса и тире (и вообще всех знаков-черточек).
Использование символов кавычек и штрихов.
Использование правильного символа для апострофа
(также угловых величин, букв греческого алфавита и пр.).
Правила сокращений и расстановки в них пробельных символов.
Запись чисел и знаков математических операций.
Правила переноса строк.
Ознакомление с рекомендациями по оформлению текстов (РИА Новости)

26
Дополнительная информация
Курс «Интернет-технологии». Лекция 9. Графическая информация в Интернете
Глава 11 ♦ Грамматика и веб-типографика
НЕКОТОРЫЕ СКРИНШОТЫ
Глава 5 ♦ Основы типографского
оформления текста.
Глава 9 ♦ Веб-типографика:
оформление текста
Глава 10 ♦ Типографские знаки и специальные символы
для веб-типографики
ИЗ КНИГИ
c устными коммента-
риями
Эта книга есть в нашей библиотеке (НТБ)
в бумажном виде, электронном виде нет!

27
Дополнительная информация
Курс «Интернет-технологии». Лекция 9. Графическая информация в Интернете

28
Дополнительная информация
Курс «Интернет-технологии». Лекция 9. Графическая информация в Интернете

29
Дополнительная информация
Курс «Интернет-технологии». Лекция 9. Графическая информация в Интернете

30
Дополнительная информация
Курс «Интернет-технологии». Лекция 9. Графическая информация в Интернете

31
Дополнительная информация
Курс «Интернет-технологии». Лекция 9. Графическая информация в Интернете

32
Дополнительная информация
Курс «Интернет-технологии». Лекция 9. Графическая информация в Интернете

33
Дополнительная информация
Курс «Интернет-технологии». Лекция 9. Графическая информация в Интернете