Разработка малобюджетного учебного сайта на основе концепции Wiki Часть 1 3.12.101. - презентация

1 Разработка малобюджетного учебного сайта на основе концепции Wiki Часть

2 Как будем работать? (45 мин+ 5 перерыв + 40 мин) У нас есть продюссер (Юлия Завдовьева) Отвечает на все технические и организационные вопросы Записывает все обещания ведущего На все вопросы, которые прозвучат по ходу вебинара, рассказа, ответы даются перед перерывом (5 мин. в середине) и в конце вебинара Просьба вопросы задавать в спец. подразделе чата «Вопросы» По итогам вебинара будет открыта тема в форуме, где размещаются материалы (презентация и видеозапись)

3 Знакомство О себе ФИО: Порошин Александр Николаевич преподаватель СПб гос. ун-та (СПбГУ, ЭФ) образование: инженер-системотехник (ПО ЭВМ, 1979), web-мастер (ФПК СПбГУ, 1996) преподаватель (колледжи, вузы, ФПК, с 1981 г.) в области ДО с 1997 г.; 2002–2003 гг. – декан факультета ДО СПб филиала Международного университета Личный учебный сайт на сервере ЭФ СПбГУ с 2003 г. (в т.ч. LMS Moodle)

4 Опрос. Смотрите, кто пришел! Интересующийся Студент Преподаватель, желающий применять ИТ Преподаватель, уже использующий ИТ Преподаватель + специалист ИТ Специалист ИТ Администратор/организатор обучения

5 Наша цель Цель: научиться создавать веб-страницы сайта (наполнять их содержанием) При условии: уже развернутой системы И быстро: не дольше одной веб-страницы (25-35 строк текста, возможно, с графикой, таблицей и загружаемыми файлами) за 10–15 минут

6 Использование wiki-системы при разработке и поддержке учебного информационного ресурса 1. Задачи преподавателя и возможные варианты использования его учебного сайта 2. Порядок разработки сайта и принципы подготовки материалов для публикации в сети 3. Принцип работы Wiki-системы и основные "операторы" wiki-разметки 4. Редактирование веб-страниц на основе своего учебного материала 5. Поддержка сайта, плюсы и минусы рассмотренной технологии

7 Ранние работы (тезисы конференции) Учебный сайт преподавателя как базовый элемент современной образовательной среды вуза. ИТО Секция (Образовательные Интернет-ресурсы) Методика разработки и использования учебного сайта при обучении преподавателей. ИТО Секция 1.3. Подготовка и повышение квалификации преподавателей

8 Немного истории Поддержка очного обучения (младшие курсы и магистранты) Организационно-методическая и техническая поддержка («смерть интеллектуальному иждивенчеству!») Постепенное формирование учебно- методического фонда («Сперва ты работаешь на сайт, а затем он – на тебя!»)

9 Особенности учебного контент-сайта размещение преимущественно текстового материала и сравнительно небольшой объем графики, включая отказ от использования анимационных роликов использование документов в формате MS Office необходимость удобной навигации необходимость частого регулярного обновления требование минимизации временнЫх затрат на сопровождение отсутствие необходимости в «раскрутке» сайта, баннерной рекламе и т.п

10 Содержание ресурса учебные материалы – оригинальные и заимствованные (с соблюдением авторских прав); задания для практических занятий; результаты текущей аттестации, контрольных; лучшие образцы работ, выполненных студентами; расписание занятий, консультаций, экзаменов, объявления и другие материалы организационно-технического характера; ссылки на литературу и ресурсы Интернет; рекреационные материалы, способствующие нравственному воспитанию и социокультурной ориентации личности (эпиграфы, цитаты, отрывки литературных и научно-технических текстов по специальности, фотографии и т.п.)

11 Выкристаллизовались методические решения Использование учебного веб-сайта: для организационно-методической поддержки очного обучения и ФПК: сайт как инструмент обучения и объект изучения для накопления фонда учебных материалов в качестве тренажера при обучении (в т.ч. посредством деловых игр) для организации личного информационного пространства преподавателя (и студента)

12 Сопутствующие решения Электронная почта Использование LMS Moodle Использование средств Google (напр. docs)

13 Ваше мнение? Для каких целей еще может быть использован сайт преподавателя? Какие особенности учебного сайта Вы бы назвали дополнительно к перечисленным

14 Подготовка к работе над сайтом Просьба прислать материалы, касающиеся разработки своего сайта на адрес:

15 Жизненный цикл сайта 1 1. Постановка задачи 2. Проектирование 3. Размещение в сети 4. Регистрация ( для государственных сайтов) 5. Эксплуатация 6. Редизайн

16 Трудоемкость разработки сайта

17 Средства разработки сайта 1. Ручные средства Текстовый редактор (ручное HTML-кодирование) Web-редактор WYSIWYG (напр. DreamWeaver) 2. Автоматизированные средства На основе шаблонов сайта хостера СУК (CMS) – системы управления контентом (напр. joomla и др.) Wiki-системы WikiPad MediaWiki Tikiwiki…

18 Стас Фомин о wiki(1) Бизнес-форум "Управление знаниями – стратегические подходы к росту эффективности бизнеса» ( ) Сессия 5. Инновации в сфере управления знаниями: сети и сообщества, сотрудничество и Web 2.0, новые техники и технологии Доклад «Оранжерея знаний с MediaWiki». Стас Фомин, зам. дир-ра по инф. технологиям, Заказные ИнформСистемы, Россия

19 Стас Фомин о wiki (2) Нам всегда приходится выбирать: полнота или актуальность знаний. Какая есть хорошая практика управления знаниями? Человечество решает эту проблему в Интернете. А на корпоративном уровне? Сперва при работе в Интернет появились закладки (в браузерах). Затем – переход к сетевым закладкам, а потом – обратились к персональным закладкам. Следующий шаг – блог как средство фиксации знаний, когда все "привязывается" только к дате. Это – более высокий уровень по сравнению с закладками. Нет актуальности, но зато быстро. Далее – форум: место, где "вопросы встречаются с ответами". Довольно "мусорный" уровень, но по сравнению с блогами – уровень выше. И наивысший уровень – это вики-вики, ресурс, где знания должны поддерживаться актуальными. Т.е. получение максимума эффекта при наименьших затратах. Однако на первый взгляд в Вики есть только «плоский текст». Так ли?

20 Стас Фомин о wiki(3.) Нет! Например сиистема МедиаВики (МВ) – не фетиш плоского текста. Вы можете работать и с pdf-файлами и со всем, что у вас есть; и делаете это быстро. В Вики грузится не только текст, все – майнд-мапы, фото, диаграммы и т.п. Наши программисты проводят ретроспективы, строят диаграммы, фотографируют и т.п. – и все помещают в Вики. У нас на фирме через вики реализуется все – управление заказами, протоколы заседаний и т.п. Вам с МВ не нужны sharepoint-порталы, вам не нужны системы управления требованиями и многое другое. Итак, Вики – это хорошо, но есть нагрузка: требуется поддерживать актуальность. (Форумы требуют ее меньше, блоги – вообще ничего не требуют с точки зрения актуальности.) Может быть конфликт использования, если смешивать блог, форум, вики- движком и т.п. Люди не будут связываться ни с чем. И какое решение? Пусть все будет в Вики – и форумы, и блоги, и закладки, и т.д. Мы распрощались с Word, Sharepoint, html... и многими другими системами – все реализуется через Медиавики!

21 Wikipad и wiki-подход Возможность многократно править текст посредством самой вики-среды: ДА Особый язык разметки : ДА Учёт изменений (версий) страниц: НЕТ Проявление изменений сразу после их внесения: ДА Разделение содержимого на именованные страницы и гипертекстовость системы: ДА. Множество авторов: НЕТ

22 Три «кита» сайтостроения Его величество Контент (содержательное ядро) Ее величество дизайн (единство стиля сайта и эффективность его интерфейса) Их верная служанка Навигация (предсказуемый и надежный доступ)

23 Этапы разработки сайта в среде Wiki Этап 1. Разработка паспорта сайта Этап 2. Структура и навигация Этап 3. Наполнение контентом Этап 4. Редактирование дизайна Этап 5. Комплексная проверка

24 Этап 1. Разработка паспорта сайта Учетные данные: общие сведения Краткое описание сайта (эскиз «что хочу») Целевая аудитория («кто посетитель») Цели и задачи («для чего») Основные функциональные блоки («какое наполнение»)

25 Обсуждение присланных материалов Этап 1: паспорт сайта Обсуждаем: насколько полно и четко указаны цели, аудитория и функциональные блоки сайта

26 Этап 2. Структура и навигация Задача этапа: раскрыть основные функциональные блоки сайта, распределяя их по его отдельным разделам и стремясь к логическому объединению схожих блоков в одном разделе

27 Этап 3. Наполнение контентом Задача этапа: формирование страниц на основе Вики-разметки Основные операторы: Структуризация заголовками Форматирование текста Указание объекта (таблицы, рисунка) Создание гиперссылки на страницу сайта Создание ссылки на загружаемый файл Создание ссылки на внешний ресурс

28 Структуризация заголовками При написании текстов можно использовать заголовки 5 уровней. Каждый заголовок должен быть окружен знаками равно "=" (от 2 до 6 знаков). Чем больше знаков равно "=", тем более вложенным будет заголовок. == Заголовок первого уровня == === Заголовок второго уровня === ==== Заголовок третьего уровня ====

29 Форматирование текста Абзацы разделяются знаком «пустая строка» Разрыв строки дается двойным слэшем (\\) Для выделения в тексте можно использовать два (для ''курсивного'') или три (для '''полужирного''' начертания) апострофа Полужирный курсив – '''''пять апострофов''''' Левый отступ строки задается двоеточием (:) Списки задаются: нумерованный через #, а марированный – с помощью звездочки (*)

30 Указание объекта Указание графического файла (png, jpg, gif): простой вариант: [[Image:picture.png]] сложный вариант : [[Image:picture.png|left|frame|Описание рисунка]] Указание таблицы |100%|highlight|Штатное расписание нашей фирмы |Имя Фамилия ||Должность | Год рождения | |Иван |Иванов |Директор | 1966 | |Семен |Семенов |Бухгалтер | 1958 | |Мария |Петрова |Секретарь | 1980 |

31 Создание гиперссылки на страницу сайта Cсылка указывается ее идентификатором и через вертикальную черту – названием страницы в нужной форме; все заключается в двойные квадратные скобки. Если такая страница существует, то ссылка сразу будет работать. Если нет, то при вызове этой ссылки появится форма создания новой страницы в редакторе. Пример: [[news|Новости]]

32 Создание ссылки на загружаемый файл простой вариант: [[File:archive.zip]] сложный вариант: [[File:archive.zip|Архив c примерами]]

33 Создание ссылки на внешний ресурс При создании внешней ссылки указывается обозначение протокола либо более сложная конструкция (если необходимо дать метку для ссылки). простой вариант: сложный вариант [ ЭФ СПбГУ]

34 Демонстрация редактирования страницы Страницу «Карта сайта» формируем на основании предложенных материалов (функциональные блоки, объединенные в более крупные единицы – разделы сайта)

35 Этап 4. Редактирование дизайна Дизайн может быть изменен путем редактирования файла screen.css Графическая «шапка» сайта может быть отредактирована в гр. редакторе (Photoshop) Элементы страницы могут быть введены (отформатированы) непосредственно средствами языка HTML

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

37 Практическая работа В качестве «испытательного полигона» используется сайт: Каждый желающий сообщает имя своей странички и она появляется в Песочнице на «Карте учебных сайтов»

38 Ограничения системы Навигация через карту сайта и ссылки на страницах Дизайн задается через описание каскадными таблицами стилей

39 Пример сайта преподавателя А. Б. Лебедева (

40 Пример сайта преподавателя А. Б. Лебедева (общая информация) Я смог создать этот сайт после двух ознакомительных лекций в рамках программы повышения квалификации преподавателей в конце 2007– 2008 учебного года, а также ознакомления с учебными материалами, представленными здесь (ссылка на первую версию сайта Всего создание сайта – без загрузки материалов в Интернет – заняло 9 часов (с учётом того, что размещаемые материалы надо было обработать – например, удалить из них тестовые вопросы и т.п.)

41 Временные затраты (1) 1 час – Разобрался, как создавать многочисленные страницы через файлы «карты сайта», сделал шаблоны трёх или четырёх страниц, научился оформлять красивые ссылки (т.е. без отображения полного веб-адреса в тексте). 2 час – Создал шаблоны всех необходимых страниц (11), полностью закончил отладку титульной страницы, страницы «Карта сайта» и первой из информативных страниц. Начал обрабатывать материалы к размещению с учётом требований системы UNIX. 3 час – В соответствии с требованиями оформлена страница по курсу «Экономическая политика». К сожалению, ряд файлов не удалось загрузить в систему, так как они превышают по размеру 2 Мб. 4 час – В соответствии с требованиями оформлена страница по курсу «Экономика Санкт–Петербурга» и страница полезных ссылок

42 Временные затраты (2) 5 час – Оформлена страница «Семинары для МЭ» (реально потрачено 1 час 20 минут), внесены мелкие исправления в другие страницы. 6 час – Оформлена страница «Мои публикации», начал оформление страницы «Макроэкономика–2». Открыл, что для тестовой загрузки файлов в систему необязательно пользоваться интерфейсом Википад, можно просто копировать файлы в нужную папку внутри системы. 7 час – Завершено оформление страницы «Макроэкономика–2». 8 час – Оформлены страницы по семинарам на юрфаке, факультете социологии, страница видеофайлов и расписания. 9 час – Изменено визуальное оформление (4 файла в папке PIC). 10–13 часы (точный хронометраж не вёлся) – адаптация материалов к серверу (нельзя закачивать файлы более 2Мб) и размещение на нем материалов

43 Поддержка сайта Включает: резервное копирование (по FTP-протоколу) регулярное обновление сайта просмотр счетчиков посещений продвижение (при необходимости)

44 Достоинства и недостатки подхода Плюсы Простота разработки и поддержки Быстрота при редактировании страниц Отсутствие необходимости изучать дополнительный инструментарий и устанавливать сложные системы Свободная лицензия Минусы Жесткость навигации и дизайна Отсутствие базы данных

45 Ваше мнение? Какие еще плюсы и минусы Вы видите в рассмотренном подходе? Будете ли Вы использовать эту систему в своей практике? Почему? Какими свойствами (функционалом) Вы бы предложили дополнить систему?

46 До новых встреч! Следите за нашими событиями на Благодарим участников и наших партнеров: