50 примеров использования CSS

Отличная подборка подходов в использовании CSS. Будет полезна как дизайнерам так и непосредственно разработчикам курсов.

Я и сам для себя подчеркнул ряд идей.

50 New Useful CSS Techniques, Tutorials and Tools

Сообщество дизайнеров

Думаю, что этот ресурс будет очень полезен тем, кто занимается разработкой электронных курсов. Мы почти постоянно ищем какие-то идеи и реализации. Сервис о котором я хочу рассказать должен вам очень помочь.
Dribbble - почти тоже самое, что twitter, только вместо слов - картинки! Dribbble - элитная социальная сеть для дизайнеров! Dribbble - неисчерпаемый источник вдохновения.
Dribbble - сообщество лучших западных дизайнеров.
Мне он очень понравился, хоть я и не дизайнер, но как программисту мне сразу захотелось запрограммить несколько интерфейсов )
Кстати, она считается элитной не только из-за того, что там много крутых дизайнеров, но и потому, что сложно там зарегистрироваться(нужен инвайт)

Ресурсы с бесплатными фотографиями для электронных курсов

1) Microsoft Office Online : Бесплатные фотографии и картинки с Microsoft;
2) FreeFoto : Есть некоторые правила по использованию;

3) 4FreePhotos : Фотография - как общественное достояние;
4) Dreamstime : Большинство контента платное, но есть раздел с бесплатными фото.

5) Morquefile : Простой в использовании бесплатный поисковик фотографий. Фотографии можно изменять и использовать в коммерческих проектах.

6) Every Stock Photo : Поисковая система для бесплатных фотографий. 4,997,523 бесплатных фото .

7) USAID : Разрешается использовать бесплатно только в некоммерческих и образовательных целях.

8) Turbo Photo : Более 5000 фотографий которые представлены как общественное достояние.

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

А какими сайтами вы пользуетесь?

Сборник ссылок на интересные дизайны

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

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

- 70+ Fresh and Inspirational Single Page Website Designs

- CSS Gallery

- 99 Creative And Beautiful Looking Portfolio Designs

- 60+ Amazing Examples Of Illustrative Web Designs With Overview

- 50+ Beautiful Website Designs Using Office Stationery

ADDIE: Дизайн(Design) часть 2

Вторая часть описания этапа ADDIE - Дизайн. Предыдущей части мы остановились на дизайн уроков и материалов. И так, продолжим:

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

1. Создание шаблонов уроков.
Этот шаг можно начать с создания общего шаблона для уроков. Сюда нужно включить все те аспекты, которые должны быть освещены в каждом уроке. Ниже описаны некоторые возможные элементы.
- предварительные - строки или деятельности, которых фокусирует учащихся на тему урока.
- целевые – это те, которые учащиеся может сделать после урока.
- моделирование – изображения, графика и другая информация, свидетельствующая о том, как навыки работают на других и имеют конкретный результат.
- контент урока - навыки, понятия и терминология которые приобретает учащиеся.
- практичные - возможность освоение навыков с контролем и определение уровня усвоения знание.
- оценка: вопросы, которые используются для того что бы убедиться что учащийся достиг желаемого уровня понимания.
- заключение: показывают что было выучено в конце урока.
(список этих элементов основаны на исследованиях доктора Dr. Madeline Hunter's)

2. План каждого урока.
Если у Вас есть общий шаблон можно начинать планирование каждого урока.
Отметьте, какие интерастивы (activity) или медиа ресурсы вы планируете использовать, с их описанием и краткими комментариями – почему нужно использовать их.

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

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

Учебные соображения:
ИМР не должны быть использованы только потому, что мы можем это использовать. Использование ИМР всегда должны поддерживать цели. Поэтому нужно не боятся лишний раз задуматься «а нужно ли это использовать и усложнять курс?».

- дизайн тестирования
Многие рассматривают тестирования как негативный процесс, в котором те, которые не достигают определенного уровня эффективности, исключаются из дальнейшего обучения. Хотя тестирование может быть выгодным для контролирующими органов, но это не должно быть целью тестирования в ходе самого обучения или профессиональной подготовки.
Цель тестирования заключается в оценке учащихся, с тем чтобы обеспечить конструктивную обратную связь и назначение на дополнительные задачи в случае негативного результата.
Обычно испытания состоят из:
- Вопрос теста;
- Возможных вариантов ответов (множественный выбор);
- Правильный ответ и обратная связь;
- Неверный ответ и дополнительная попытка или обратная связь.

Тестовые вопросы должны быть четкими. Использование множественного выбора предпочтительнее вариантов ответа типа: "да/нет", "все что перечислены выше", "ни один из предложенных выше вариантов".

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

- дизайн интерфейсов

Интерфейс (Interface)

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

Есть несколько частей и интерфейса:

- Ориентация: позволяет учащимся знать, где что находится.

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

- Темы или скинирование: это то, как выглядит курс.

Макет(Layout)

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

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

Юзабилити-тестирование (Usability testing)

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

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

Шаблоны(template design)

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

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

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

ADDIE: Дизайн(Design) часть 1

Вторым этапом ADDIE является Дизайн(Design).

- определение цели;

- создание цели обучения;

- исследование существующих сайтов и ресурсов;

- произведение инвентаризации содержания;

- разработка учебной стратегии;

- создание карт и схем;

- дизайн уроков и материалов;

- план использования мультимедиа и интерактивов;

- дизайн тестирования;

- определение оценки подхода;

- дизайн интерфейсов.

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

- определение цели;

Определение цели помогает определить что должен знать, понимать и применять учащиеся.

Хорошо поставленные цели могут оказать помощь в:

- Сосредоточения усилий и минимизации отклонений в процессе проектирования;

- Обеспечение обучения с ориентирами, по которым можно оценить эффективность;

- Создании точных ожиданий.

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

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

- создание цели обучения;

Существуют различные виды учебных целей. Но сейчас давайте концентрируемся на конечных и стимулирующих целях.

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

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

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

- исследование существующих сайтов и ресурсов

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

- описание чужого опыта;

- поиск материалов для дополнения информацией сценария;

- поиск материалов для поддержки обучаемых;

- снижение затрат;

Следующие вопросы могут помочь определить вашу оценку имеющихся ресурсов:

- есть ли дополнительная информация в найденном вами ресурсе;

- существуют ли доступные курсы или другие материалы с других источников;

- есть ли ресурсы, обьекты из других курсов которые можно повторно использовать;

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

- какие есть доступные сетевые ресурсы – онлайн библиотеки, вики, сайты, форумы…

- какие есть дополнительные ресурсы на местах – библиотеки, книги, видео, журналы…

- произведение инвентаризации содержания

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

Помните, чтобы ресурсы можно охарактеризовать как:

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

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

- ресурсы, которые могут быть использованы как дополнение курса (например, книги, журнальные стати, компьютерные приложения)

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

- разработка учебной стратегии

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

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

Несколько советов для развития учебных объектов(Learning Objects):

- Каждый учебный объект должна иметь четкую цель.

- За каждый учебный объект определяет выбранную стратегию обучения.

- Создавайте эффективные и учебные объекты которые направлены к цели обучения.

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

- Все должно отвечать стандартам, никаких компромиссов.

- создание карт и схем

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

Схема должна включать все компонентами курса:

- главное меню,

- модули,

- уроки (страницы курса, слайды),

- тесты,

- дискуссионные форумы,

- раздел помощи и любые другие элементы,

- т.д. и т.п.,

которые мы планируем использовать.

(продолжение следует...завтра планирую выложить описание второй и заключительной части этого этапа)

Подборка материалов по ADDIE

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

Что такое ADDIE?

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

Как и другие учебные System Design (ISD) модели, ADDIE обеспечивает пошаговый подход к проектированию курса или обучения.

Из чего же состоит эта модель?

Есть 5 компонентов ADDIE, или как их еще называют 5 этапов проектирования: Анализ, Дизайн, Разработка, Проведение, Оценка (Analysis, Design, Development, Implementation, Evaluation).

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

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

- http://en.wikipedia.org/wiki/ADDIE_Model

- http://ed.isu.edu/addie/

- http://www.learning-theories.com/addie-model.html

- http://www.intulogy.com/addie/

- http://www.e-learningguru.com/articles/art2_1.htm

- http://edweb.sdsu.edu/Courses/EDTEC700/ETP/addie.htm

- http://www.about-elearning.com/addie-instructional-design-model.html

- http://www.addiesolutions.com/addie.htm

UPD: Вот на русском еще чуть информации

- http://websoft-elearning.blogspot.com/2007/05/addie.html

Ресурс для поиска идей и уроков по графике

А где вы ищите идеи для графики?

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

http://www.dejurka.ru/

http://twitter.com/dejurka

А вы чем пользуетесь?

Несколько общепринятых визуальных ошибок проектирования дизайна электронных курсов

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

Отсутствие единства

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

Я могу привести хороший пример из личного опыта. Очень давно, делая свои первые курсы, мы частенько забывали о таком важном элементе курса как, выравнивание текста. В итоге, мы могли получить несколько страниц, которые имели только текст и фото, но их внешний вид и расположение текстов было разным. Нарушалось чувство единства. Одним из вариантов решение есть использования сетки. Вот отличный пример как это выглядит: Статья Grid-based Layout

Не учитывается воздействие визуального дизайна.

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

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

Не правильное использование графических изображений

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

Злоупотребление шрифтами

В интернете, я несколько раз встречал курсы, в которых использовалось около 5-10 различных шрифтов. Это нарушает целостность курса и читаемость текста. В большинстве случаев рекомендуется использование san serif font.

Узнать больше о различных шрифтов и их "личностях" можно из видео "Font conference"

Сложность графического интерфейса

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

В нескольких следующих постах я собираюсь дополнить этот список, а так же рассказать, какие есть способы решения таких ошибок ;)

Color in Motion (примеры сочетания разных оттенков)

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

Ссылка: COLOR IN MOTION