какие типы шрифтов следует использовать при формировании контента урока в сдо
10 правил для шрифтов в веб-дизайне
Использование шрифтов в веб-дизайне имеет много нюансов, которые необходимо знать для того чтобы профессионально оформить контент и донести информацию до пользователей. Предлагаем 10 правил идеальной типографики, которые помогут создать контраст и задать настроение при взаимодействии пользователей с веб-сайтом.
Типографикой называется художественное оформление текста на сайте. Веб-типографика —мощный инструмент для передачи основного посыла в маркетинге. С ее помощью объединяется в единый смысл текстовая и графическая информация.
Потому, что на веб-сайте принципиальным является необходимость задержать пользователя как можно дольше – в идеале, чтобы он дочитал статью до конца. Такой результат может быть достигнут созданием текста простым и удобным для чтения. Другими словами, текст должен читаться с комфортом.
Каноны типографики в web дизайне, созданы как раз для того, чтобы дизайнеры делали текст удобным для восприятия и чтения, таким чтобы он направлял пользователей к целевым действиям: заказать услугу, подписаться на новости, оформить покупку, прочесть материал до конца.
1. Крупный, мелкий или средний текст?
Довольно часто «якобы для дизайна» коверкают текст – а следует делать наоборот! Текстовая составляющая веб-сайта всегда приоритетнее графики. Сама по себе картинка без подсказки текстом не подталкивает к выполнению целевого действия. А вот вместе с текстом – легко! Следовательно, для получения желаемого, правильно расставляйте приоритеты.
Ваши шрифты на сайте делайте как можно крупнее! Они особенно классно смотрятся в сочетании с лаконичным дизайном. Используйте адаптивные шрифты, потому что они одинаково хорошо читаемы на декстопной и мобильной версиях.
Требования к оформлению материалов для системы дистанционного обучения
Требования к оформлению материалов для системы дистанционного обучения
1. Структура материалов. 3
2. Оформление текста курса в документе Word. 3
2.1. Параметры документа. 3
2.2 Оформление текста. 3
2.5. Формулы и уравнения. 3
1. Структура материалов
Для удобства добавления, материалы курса должны предоставляться в следующем виде:
1. Текст курса в документе Word
2. Папка с иллюстрациями
3. Папка с документами и законодательными актами, на которые есть ссылка в курсе
4. Разбивка текста на слайды в документе PowerPoint (при наличии)
Оформление текста курса в документе Word должно соответствовать данному документу (см. 2. Оформление текста в документе Word).
Изображения в папке с иллюстрациями должны быть названы в соответствии с номерами изображений, представленному в тексте курса в документе Word (например, файл изображения, обозначенного в тексте как “Рисунок 1” должен называться 1).
Названия документов в папке с документами должны состоять только из названия этого документа на русском языке. (Например “ФЗ 69-ФЗ. О пожарной безопасности” или “Инструкция о порядке действия работников ОУ в случае возникновения пожара”).
К оформлению слайдов в документе PowerPoint особых требований нет.
2. Оформление текста курса в документе Word
2.1. Параметры документа
Текст работы должен быть выполнен с использованием компьютера на одной стороне листа белой бумаги формата А4. Размеры полей для текста: правое — 1 см, верхнее и нижнее — 2 см, левое не менее — 3 см.
Для установки этих значений нужно перейти на вкладку Разметка страницы и нажать кнопку в нижнем правом углу блока Параметры страницы.
В открывшемся окне во вкладке Поля необходимо проставить все требуемые размеры и нажать кнопку ОК.
Страницы нумеруют арабскими цифрами, соблюдая сквозную нумерацию по всему тексту. Их располагают в пределах рабочего поля страницы снизу по центру.
Титульный лист считают страницей 1. Номер на титульной странице не ставится.
Иллюстрации и таблицы, расположенные на отдельных листах, включают в общую нумерацию страниц работы.
Для вставки номеров страниц нужно перейти вкладку Вставка, выбрать кнопку Номер страницы и в всплывающем меню выбрать Внизу страницы, а затем Простой номер 2 (расположение по центру).
Чтобы убрать номер страницы на титульном листе делаем двойной щелчок на номере страницы внизу листа.
Затем в открывшейся наверху вкладке Работа с колонтитулами ставим галочку Особый колонтитул для первой страницы и нажимаем кнопку Закрыть окно колонтитулов.
2.2 Оформление текста
Для оформления текста работы и заголовков необходимо использовать инструмент Стили с вкладки Главная.
Стили в Microsoft Word используются для придания одинакового вида одним и тем же элементам (основной текст, заголовки, списки и т. п.) а также для автоматического формирования оглавления. При изменении стиля автоматически меняется оформление всех абзацев, для которых этот стиль задан.
При оформлении материалов должны использоваться следующие стили:
Для всего текста работы, за исключением заголовков разделов и подразделов, должен быть использован стиль Обычный.
Для заголовков разделов – стиль Заголовок 1. Для заголовков подразделов – стиль Заголовок 2.
Для применения стиля к фрагменту текста необходимо выделить этот фрагмент и нажать на кнопку с соответствующим стилем. Стиль также можно применить к определенному абзацу. Для этого нужно нажать мышкой в любое место этого абзаца, а затем нажать кнопку с соответствующим стилем.
Для настройки стиля необходимо нажать на нем правой кнопкой мыши и выбрать из выпадающего меню пункт Изменить.
В открывшемся окне в разделе Форматирование вы можете выставить шрифт, используемый для этого стиля, его размеры, жирность наклон, подчеркивание и цвет текста. Строчкой ниже можно выставить выравнивание текста на странице и междустрочное расстояние. А также расстояние между абзацами одинаковых стилей и отступ от левого края страницы.
Для более точного задания отступов и интервалов для абзацев определенного стиля необходимо нажать на кнопку Формат и выбрать пункт Абзац…
Основной текст печатается с полуторным интервалом между строк, красная строка (отступ первой строки абзаца) печатается с интервалом 1,5 см. и отступом 1,25 см. Для основного текста необходимо использовать шрифт Times New Roman размером 14 пт. Цвет шрифта должен быть черным.
Заголовки разделов и подразделов следует нумеровать арабскими цифрами и записывать с абзацного отступа, без точки в конце, не подчеркивая.
Заголовки должны иметь порядковую нумерацию в пределах всего текста, за исключением приложений.
Пример — 1, 2, 3 и т. д.
Номер подраздела или пункта включает номер раздела и порядковый номер подраздела или пункта, разделенные точкой.
Пример — 1.1, 1.2, 1.3 и т. д.
2.3 Иллюстрации
Иллюстрации следует располагать в работе непосредственно после текста, в котором они упоминаются впервые, или на следующей странице.
Для добавления иллюстрации необходимо перейти на вкладку Вставка и нажать кнопку Рисунок и выбрать в открывшемся окне иллюстрацию для добавления.
Допускается нумеровать иллюстрации в пределах раздела. В этом случае номер иллюстрации состоит из номера раздела и порядкового номера иллюстрации, разделенных точкой.
Иллюстрации, при необходимости, могут иметь наименование и пояснительные данные (подрисуночный текст, рекомендуется печатать более мелким шрифтом, для визуального его отделения от текста). Слово «Рисунок» и наименование помещают после пояснительных данных и располагают следующим образом: «Рисунок 1 — Детали прибора».
Иллюстрации каждого приложения обозначают отдельной нумерацией арабскими цифрами с добавлением перед цифрой обозначения приложения. Например, «3».
При ссылках на иллюстрации следует писать «. в соответствии с рисунком 2» при сквозной нумерации и «. в соответствии с рисунком 1.2» при нумерации в пределах раздела.
2.4. Таблицы
Цифровой материал, как правило, оформляют в виде таблиц. Таблицы применяют для лучшей наглядности и удобства сравнения показателей. Название таблицы, при его наличии, должно отражать ее содержание, быть точным, кратким. Название таблицы следует помещать над таблицей слева, без абзацного отступа в одну строку с ее номером через тире.
Для добавления таблицы необходимо перейти на вкладку Вставка и нажать кнопку Таблица и выбрать требуемое количество столбцов и строк.
Таблицы, за исключением таблиц приложений, следует нумеровать арабскими цифрами сквозной нумерацией.
Допускается нумеровать таблицы в пределах раздела. В этом случае номер таблицы состоит из номера раздела и порядкового номера таблицы, разделенных точкой. Таблицы каждого приложения обозначают отдельной нумерацией арабскими цифрами с добавлением перед цифрой обозначения приложения.
Если в документе одна таблица, то она должна быть обозначена «Таблица 1» или «1», если она приведена в приложении В.
Таблицу следует располагать в работе непосредственно после текста, в котором она упоминается впервые, или на следующей странице.
На все таблицы должны быть ссылки в тексте. При ссылке следует писать слово «таблица» с указанием ее номера.
Таблицу с большим количеством строк допускается переносить на другой лист (страницу). При переносе части таблицы на другой лист (страницу) слово «Таблица» и номер ее указывают один раз справа над первой частью таблицы, над другими частями пишут слово «Продолжение» и указывают номер таблицы, например: «Продолжение таблицы 1». При переносе таблицы на другой лист (страницу) заголовок помещают только над ее первой частью.
Если повторяющийся в разных строках графы таблицы текст состоит из одного слова, то его после первого написания допускается заменять кавычками; если из двух и более слов, то при первом повторении его заменяют словами «То же», а далее — кавычками. Ставить кавычки вместо повторяющихся цифр, марок, знаков, математических и химических символов не допускается. Если цифровые или иные данные в какой-либо строке таблицы не приводят, то в ней ставят прочерк.
Заголовки граф и строк таблицы следует писать с прописной буквы в единственном числе, выделять полужирным шрифтом и записывать параллельно строкам таблицы. При необходимости допускается перпендикулярное расположение заголовков граф.
Подзаголовки граф пишутся строчными буквами, если они составляют одно предложение с заголовком, или с прописной буквы, если они имеют самостоятельное значение. В конце заголовков и подзаголовков таблиц точки не ставят.
Таблицы слева, справа и снизу, как правило, ограничивают линиями. Допускается применять размер шрифта в таблице меньший, чем в тексте.
Разделять заголовки и подзаголовки боковика и граф диагональными линиями не допускается.
Горизонтальные и вертикальные линии, разграничивающие строки таблицы, допускается не проводить, если их отсутствие не затрудняет пользование таблицей.
Шапка таблицы должна быть отделена линией от остальной части таблицы.
Если все физические величины, приведенные в таблице, выражены в одних и тех же единицах, то обозначение единицы помещают в заголовке через запятую, например: «Размеры изделий, мм».
Обозначение единицы физической величины, общей для всех данных в строке или графе, указывают в соответствующей строке или в заголовке графы.
2.5. Формулы и уравнения
Формулы предпочтительно вписываются средствами компьютерного текстового редактора.
Уравнения и формулы следует выделять из текста в отдельную строку. Выше и ниже каждой формулы или уравнения должно быть оставлено не менее одной свободной строки. Если уравнение не умещается в одну строку, то оно должно быть перенесено после знака равенства (=) или после знаков плюс (+), минус (-), умножения (х), деления (:), или других математических знаков, причем знак в начале следующей строки повторяют. При переносе формулы на знаке, символизирующем операцию умножения, применяют знак «х».
Пояснения значений символов приводят непосредственно под формулой в той же последовательности, в какой они даны в формуле. Пояснения начинают со слова «где» без двоеточия.
При написании формул применяют обычные знаки препинания, например, разделяют запятыми несколько формул, написанных подряд, или ставят точку, если формулой заканчивается предложение.
Формулы, помещаемые в приложениях, должны нумероваться отдельной нумерацией арабскими цифрами в пределах каждого приложения с добавлением перед каждой цифрой обозначения приложения, например формула (В.1).
Для вставки формулы необходимо перейти на вкладку Вставка и нажать кнопку Формула.
Пример отображения формулы:
(1.1)
5 методов, которые помогут добиться визуальной согласованности в электронном обучении
Ресурсы дизайна никогда не перестают напоминать нам, как важно быть последовательным при создании любого графического объекта. Как разработчик электронного обучения вы знаете, как сложно поддерживать единый стиль внешнего вида на протяжении всего курса. В душе мы все творческие натуры. К тому времени, как мы просматриваем пару слайдов, наш мозг устает, хочет разнообразия и немного отвлечься.
Преимущества визуальной согласованности
Есть причина (скорее даже несколько), по которой гуру электронного обучения настаивают на визуальной согласованности материалов. Вот как это может помочь вашему курсу:
Как добиться согласованности и не быть скучным
Быть последовательным и придерживаться согласованности не обязательно должно быть скучным. Вот пять правил, которые помогут вам создать визуально согласованный курс электронного обучения, который не вызовет зевоты:
1. Создайте четкую визуальную иерархию
Сильная визуальная иерархия помогает придать курсу единообразный внешний вид. Наиболее важно то, что визуальная иерархия облегчает обучение, создавая последовательный порядок просмотра на экране, который четко различает важную (я лучше запомнил это) и периферийную (хорошо, это было приятно узнать) информацию.
Вот показатели, которые помогут вам создать сильную визуальную иерархию:
2. Используйте гармоничную цветовую гамму
Согласованная цветовая гамма не только создает визуальную симметрию, но и упрощает использование. Это облегчает обучение, определяя порядок просмотра множества объектов на экране и различая функционально разнородные элементы.
Вот что нужно помнить при использовании цветовой схемы для вашего курса:
3. Повторяйте визуальные элементы для повышения удобства использования
Ниже приведены некоторые общие визуальные элементы, которые приводят к повторению, не превращая курс в раздражающее занятие:
4. Иногда будьте непоследовательны
Вы можете добавить элемент неожиданности, чтобы немного оживить ситуацию, не жертвуя гармоничным внешним видом вашего курса электронного обучения. Некоторая непоследовательность время от времени добавит интересную точку в ваш в остальном последовательный курс. Непоследовательность подобна тому шикарному аксессуару, который оживляет простые наряды и не дает им стать скучными.
Главное – найти баланс, а практическое правило таково: будьте непоследовательны в меру и служите определенной цели, а не только потому, что хотите повеселиться. В противном случае вы получите курс электронного обучения, который выглядит хаотичным и запутанным для понимания.
Несогласованность хорошо работает в следующих случаях:
5. Создайте руководство по стилю
Это может показаться не столь важным, как создание сильной визуальной иерархии или соблюдение одной цветовой схемы на протяжении всего курса, но руководство по стилю поможет вам выровняться с общей визуальной темой. Руководство по стилю очень удобно и служит готовым шаблоном, когда несколько дизайнеров работают над одним курсом или вам нужно создать несколько курсов как часть серии.
Многие авторы электронного обучения любят создавать руководство по стилю и делиться им со своими клиентами, прежде чем приступить к разработке курса. Это дает клиентам представление о том, как будет выглядеть курс.Согласованность и последовательность лежит в основе отличного (красивого, интуитивно понятного и эффективного) визуального дизайна. Перед вами, как перед дизайнером электронного обучения, стоит непростая задача. Вы должны создавать визуально привлекательные курсы, которые легко увлекают и обучают. Будьте последовательны, чтобы помочь своим ученикам пройти сложный процесс обучения.
к оформлению материалов дистанционного урока на Web-сайте.
Технические требования
К авторским материалам при разработке учебного курса
Требования к текстовым файлам
1. Формат страницы: А4, все поля (снизу, сверху, слева, справа) не менее 1,5 см.
2. Шрифт «Times New Roman», только 14-й кегль. Междустрочный интервал- одинарный.
3. Заголовки и подзаголовки должны быть отделены от последующего и предыдущего текста пустыми строками.
4. Разрешается использовать только следующие средства выделения: полужирный шрифт (bold), курсив (italic), подчеркнутый шрифт (underline), верхние и нижние индексы. Никакие другие средства выделения текста использовать не следует.
6. Схемы должны представлять из себя единый графический объект (т.е. все графические элементы схемы должны быть сгруппированы).
7. Если в тексте имеются гиперссылки, их необходимо оформить как обычный текст, выделив синим цветом.
8. Список литературы (если в нем есть необходимость) следует разместить в конце документа. Пункты нумеруются с 1. В тексте ссылки на литературу оформляются в квадратных скобках [1].
Требования
к оформлению материалов дистанционного урока на Web-сайте.
На Web-сайте рекомендуется размещать следующую информацию:
При подготовке учебных материалов для размещения на Web-сайте необходимо учитывать ряд требований:
1. Рекомендуется соблюдать принцип единства при оформлении учебных материалов: выдерживать единую цветовую гамму (рекомендуется использовать не более 3-х цветов), одинаковое использование шрифтов, одинаковые цвета гиперссылок, единый стиль оформления и т.д.
5. Гипертекстовая структура может оказаться очень полезной при чтении, максимально используйте возможности гипертекста; информацию значительного объема следует разбивать на несколько страниц, связанных между собой гиперссылками.
6. Все гиперссылки выделяются одним цветом, например цвет синий с подчеркиванием.
7. Все ссылки на глоссарий выделяется одинаково, одним цветом и возможно курсивом.
8. Возможно размещение гиперссылок в пределах одной web-страницы, например, для быстрого перехода вверх страницы, или в определенное место данной страницы.
9. Текст должен быть коротким или, по крайней мере, поделен на абзацы; текст должен быть удобным для беглого ознакомления. Не следует заставлять ученика читать крупные абзацы текста. Вместо этого лучше использовать небольшие абзацы, подзаголовки и маркированные списки. Например:
10. Рекомендуется использование цвета в курсе, наиболее эффективно выделять отдельные куски текста цветом и отдельные ячейки таблицы или всю таблицу цветом (фон ячейки или фон таблицы).
11. Не рекомендуется использовать подчеркивание в тексте, чтобы не путать с гиперссылками.
12. Каждый графический файл должен иметь текстовую подпись, которая будет видна при отключении графики обучаемым у себя на компьютере. (Пользователь имеет возможность отключить у себя на компьютере прием графических изображений, для ускорения загрузки Web-страницы из сети).
13. Графические элементы должны дополнять текст.
14. Каждая Web-страница должна иметь заголовок раздела (цвет черный) и заголовок занятия (цвет темно синий).
15. Каждая страница может иметь слева вертикальное поле, которое можно использовать для размещения различных подзаголовков, комментариев, графических изображений.
16. На любой Web-странице можно открыть новое окно с просмотром информации в нескольких окнах одновременно или попеременно. Возможно использование фреймовой структуры, когда экран компьютера разбивается на несколько независимых окон (фреймов).
17. Возможно использование звуковых и видео фрагментов.
18. Большие рисунки можно представлять в два приема. Сначала на экране появляется маленький рисунок – уменьшенная копия большого рисунка, при нажатии на маленький рисунок появляется большой рисунок в новом окне. Размер графических файлов оптимизируется для уменьшения загрузки Web-страницы.
Необходимо предусмотреть два режима обучения: online (синхронная) или offline (асинхронная), так как существуют ограничения по времени работы за компьютером.
Список литературы
1. Закон РФ «Об образовании» от 10.07.1992 No 3266-1 [Электронный ресурс]. Режим доступа: http://www.consultant.ru/popular/edu/
2. Приказ Минобрнауки России от 6 мая 2005 г. No 137 «Об использовании дистанционных образовательных технологий» [Электронный ресурс]. Режим доступа: http://www.edu.ru/db-mon/mo/Data/d_05/m137.html
3. Об обеспечении успешной адаптации ребенка при переходе со ступени начального общего образования – на основную: Письмо Министерства образования РФ от 21 мая 2004 г. No 14-51-140/13 [Электронный ресурс]. Режим доступа: http://www.businesspravo.ru/Docum/DocumShow_ DocumID_91309.html
4. Андреев А.В., Андреева С.В, Доценко И.Б. Практика электронного обучения с использованием Moodle. – Таганрог: Изд-во ТТИ ЮФУ, 2008.
5. Анисимов А.М. Работа в системе дистанционного обучения МООDLE. – Харьков, Харьковская городская академия городского хозяйства.
6. Борисова Н.В. От традиционного через модульное к дистанционному. – М., 2000
7. Гурье Л.И. Проектирование педагогических систем: Учебное пособие. – Казань, КГТУ, 2004
8. Майоров А.Н. Тесты школьных достижений: конструирование, проведение, использование [Текст]. – СПб, 1996.
10. Челышкова М.Б. Теория и практика конструирования педагогических тестов: Учеб. пособие. – М.: Исследовательский центр проблем качества подготовки специалистов, 2001.
11. Теория и практика дистанционного обучения: Учеб. пособие для студ. высш. пед. учеб. заведений /Е.С. Полат, М.Ю. Бухаркина, М.В. Моисеева. – М.: Академия, 2004
Шрифты и работа с ними — Основы вёрстки контента
Помимо насыщенности, CSS позволяет управлять следующими настройками:
Не пугайтесь такому количеству различных свойств, их необязательно использовать все сразу. Некоторые используются достаточно редко.
Семейство шрифтов
Если у пользователя в системе есть шрифт Georgia, то будет применён он. В противном случае браузер будет искать шрифт Times New Roman. Теперь возможны две ситуации:
А какой шрифт именно выберет браузер? Тут всё зависит от настроек. Может случиться так, что стандартный шрифт будет из другого типа. Это может «сломать» визуальную часть сайта. Все шрифты можно разделить на три большие группы:
При указании шрифтов также возможно указать и основное семейство шрифтов. Если ни один из указанных шрифтов не был найден, то браузер подберёт системный шрифт из того семейства, которое было указано. Дополним пример семейством шрифтов по умолчанию. В примере указаны шрифты из семейства антиква, поэтому стоит добавить соответствующее значение.
Всегда указывайте семейство шрифтов по умолчанию. Это считается хорошей практикой, так как не все шрифты могут присутствовать в системе пользователя.
Установка новых шрифтов
Необязательно полагаться только на системные шрифты. В проекте могут использоваться совершенно разные шрифты и верстальщик должен уметь их подключать. Сам по себе шрифт представляет собой файл. Форматов таких файлов может быть несколько и важно знать, какими браузерами они поддерживаются.
Пусть наш проект имеет директорию fonts, внутри которой находятся файлы шрифтов.
Хорошим тоном является указание @font-face в самом начале CSS файла, а не перед первым использованием шрифта. Это позволит правильнее структурировать CSS. Есть два основных свойства, которые принимает @font-face :
После указания этих свойств уже можно пользоваться шрифтом. Подключим Roboto-Regular.
Следующий шаг — подключить другие два начертания. Можно воспользоваться примером выше. Тогда наш CSS приобретёт следующий вид:
Способ хоть и рабочий, но немного сложный. Вместо одного названия шрифта и управления его насыщенностью свойством font-weight приходится указывать три разных названия для каждого начертания в отдельности.
Стиль шрифта
Строчные символы
С помощью CSS можно задать такой вид строчных символов как «Капитель».
Капитель — вид строчных букв, размер которых совпадает (или приближен) к размеру заглавных букв. Такой приём используется в дизайне в виде стилистического оформления. Посмотрите на этот параграф:
Текст с использованием капители
По своей высоте эта фраза не отличается от простого набора строчными символами, но стилистически они подстраиваются под заглавные символы.
Межстрочный интервал
Межстрочный интервал, или, как его ещё называют интерлиньяж — это расстояние по вертикали между базовыми линиями одного и другого символа в соседних строках. Так создаётся расстояние между этими строками. Важным элементом при создании дизайна является использование достаточного межстрочного интервала. Чаще всего это 150% от значения размера шрифта. Например, если шрифт имеет размер 16 пикселей, то межстрочный интервал должен быть не менее 24 пикселей. Такое значение не является необходимым правилом и от него всегда можно отступить.
Обобщённое правило
Теперь, для работы со шрифтами, вы знаете все основные правила. Это:
Использование одного правила или нескольких
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.