Кто испытал наслаждение творчества, для того все другие наслаждения уже не существуют.
Чехов А.П.
Модернизация современного образования, изменение приоритетных направлений его развития ставят перед школой задачу развития творческой личности, способной не просто усваивать все увеличивающийся объем информации, а продуцировать новые, оригинальные идеи, отыскивать нетрадиционные способы решения различных проблем.
Творческое развитие личности приобретает наибольшую актуальность в периоды серьезных трансформаций в обществе и школе, когда любая деятельность предполагает не простую репродукцию, то есть воспроизведение, а постоянную готовность к изменению. Теоретические и экспериментальные исследования позволили доказать значимость творческого развития школьников в процессе обучения.
Л.С. Выготский писал: «Творческой деятельностью мы называем такую деятельность человека, которая создает нечто новое, все равно, будет ли это созданное творческой деятельностью какой-нибудь вещью внешнего мира или известным построением ума или чувства, живущим и обнаруживающимся только в самом человеке» [1, с. 145].
Стратегия современного образования заключается в предоставлении возможности всем учащимся проявить свои таланты и творческий потенциал, подразумевающий возможность реализации личных планов. Эти позиции соответствуют современным гуманистическим тенденциям развития отечественной школы, для которой характерна ориентация педагогов на личностные возможности учащихся, их непрерывное «наращивание».
На сегодняшний день актуальнапроблема поиска средств развития творческих способностей, связанных с творческой деятельностью школьников, как в учебной, так и во внеучебной форме обучения.
Формы внеурочной работы по информатике, способствующие развитию творческих способностей учащихся могут быть разнообразными, это и внеклассные мероприятия, и кружки, и олимпиады, и «часы», и «вечера», и набирающая в последнее время большие обороты индивидуальная (тьюторская) работа с учащимися.
Опыт работы летней компьютерной школы «Основы создания web-сайта», прошедшей в МОУ «Борисоглебская гимназия №1» с июля по август 2008 года показывает, что создание в Интернете постоянно действующего сайта – процесс творческий, требующий от учащихся мобилизации всех знаний, умений и навыков по работе с такими программами, как: Adobe Photoshop CS3, Microsoft Office FrontPage 2003, Microsoft Office Word 2007, Microsoft Office Picture Manager, Internet Explorer и др.
Сайт детско-юношеской организации «Республика добра» разработан по технологии PHP и MySQL, с внедрением в отдельные странички HTML-кода и размещен на платном хостинге в домене http://gimnaziya-1.ru.
Основными этапами создания сайта были:
- Зарождение идеи, обличение идеи в проект.
- Разработка веб-дизайна.
- Верстка подготовленных макетов в HTML.
- Веб-программирование.
- Верстка материалов на сайте.
- Раскрутка и продвижение сайта.
В результате работы над сайтом учащиеся:
- научились программировать на языках HTML и PHP, передавать информацию в сеть Интернет с помощью специальных программ по ftp;
- применять при создании веб-страницы основные принципы веб-дизайна и производить анализ и формулировать собственную позицию по отношению к их структуре, содержанию, дизайну и функциональности;
- овладели способами работы с программами Adobe Photoshop CS3, Microsoft Office FrontPage 2003, Microsoft Office Word 2007, Microsoft Office Picture Manager, Internet Explorer;
- овладели необходимыми способами проектирования, создания, размещения и обновления веб-сайта;
- приемами организации и самоорганизации работы по изготовлению сайта;
- опытом коллективного сотрудничества при конструировании сложного веб-сайта;
- оценивания своих результатов, корректирования дальнейшей деятельности по сайтостроительству.
Но это еще не все. Увлекшись процессом создания сайта учащиеся Ушков Алексей (сайт «Родники родного края»(http://gumnaziya.narod.ru/rodniki/index.html), Трифонова Екатерина (сайт «Роль муравьев в экосистеме леса»(http://gumnaziya.narod.ru/lesimurav/index.html), Степаненко Олег (сайт «Лес – наше богатство!» (http://stepanenkoo.narod.ru) даже выполнили индивидуальные проекты – создали сайты, которые участвовали в I Всероссийском конкурсе интернет-сайтов «Лесные сети», организованном Общественным экологическим советом при Федеральном агентстве лесного хозяйства России. 10 ноября 2008 года в Рослесхозе были подведены итоги (http://www.forest.ru/rus/news/index.php?id=189) этого конкурса. Сайт Степаненко Олега «Лес – наше богатство!» занял 3 место в номинации «Детский взгляд».
Развитию творческих способностей гимназистов способствует также проведение разнообразных мастер-классов. Так в рамках городского фестиваля ЮНПРЕСС в сотрудничестве с МОУ ДОД «САМ» и Союзом детских объединений Борисоглебского городского округа нами был проведен для юных журналистов мастер-класс "Основы создания web-сайта". Была продела огромная подготовительная работа: создана презентация (Приложение 1), разработан порядок выполнения заданий (Приложение 2), создано оформление шаблона сайта, подобраны из личного архива фотографии гимназии, найдены тексты подходящих статей (заготовки для сайта) (Приложение 3).
Слайд № 1. (Приложение 1)
Интернет постепенно входит в нашу жизнь. Возможности, предоставляемые им, привлекают все больше и больше пользователей, в том числе и учащихся. Многие школы начинают обращаться к глобальной сети с целью размещения информации о жизни школы.
Слайд № 2.
WWW (World Wide Web, «Всемирная паутина») представляет собой единую среду, наполненную гипертекстовыми документами.
ЯЗЫК HTML – это универсальный язык, который понимают все компьютеры во всем мире (HYPER TEXT Markup Language), это язык гипертекста, который используется для создания любого сайта.
HTML (файл) - документ, созданный на основе языка HTML.
Информация в Интернете организована в виде системы связанных Web-страниц.
Web-страничка – документ, основа которого HTML файл.
Страницы объединяются в сайты.
Web-cайт — это совокупность информационных единиц — страниц, объединенных общей целью.
Web-браузер – это программа, которая общается с Web-сервером, передает ему запросы, получает HTML документы и показывает их пользователю.
Слайд № 3.
Для обращения к ресурсам сети Интернет используются адреса URL
http://gumnaziya.narod.ru/html/nov.htm
Слайд № 4.
Для создания Web-сайта разработано много программ - Microsoft Office FrontPage 2003, Macromedia Dreamweawer и др. Процесс создания и редактирования страницы сайта в Microsoft Office FrontPage 2003 очень нагляден, т.к. производится в режиме - «Что видишь, то и получаешь». Для создания простейшей Web-странички можно воспользоваться и текстовым редактором «Блокнот».
Так как мастер-класс проводится в рамках фестиваля ЮНПРЕСС, то сегодня мы с Вами будем создавать сайт юного журналиста.
Слайд № 5.
Итак, основными этапами создания сайта являются:
- Зарождение идеи (с нашем случае - это фестиваль ЮНПРЕСС), обличение идеи в проект (мы будем создавать сайт «Азбука юного журналиста»).
- Разработка веб-дизайна.
- Верстка web-страничек.
- Размещение сайта в сети Интернет.
- Раскрутка и продвижение сайта.
Слайд № 6.
Дизайн сайта - это художественное и функциональное оформление сайта, предполагающее единство содержательных и навигационных элементов, выбранных исходя из интересов пользователей.
Слайд № 7.
Основные требования:
- правильная компоновка информации на странице;
- удобство и наглядность представления элементов управления и кнопок навигации;
- соответствие определенному стилю и самобытность;
- быстрая загрузка страницы;
- комфортное сочетание цветовой гаммы;
- учет интересов целевой аудитории.
Разработка дизайна сайта «Азбука юного журналиста»
Слайд № 8.
1. Создаем на локальном диске C в папке «Мастер класс» папку с именем press. В данной папке создаем папку с именем images. В имени папки используем только английские строчные буквы. В папку images из папки Материалы для сайта (Приложение3) копируем все файлы с расширением jpg.
2. Открываем Microsoft Office FrontPage 2003: Пуск – Программы – Microsoft Office – Microsoft Office FrontPage 2003 – Файл – Создать – Пустая страница.
3. В меню Таблица выбираем пункт Макетные таблицы и ячейки. Выбираем макет таблицы, содержащий верхний колонтитул, нижний колонтитул, столбец слева, столбец справа, четыре строки.
Слайд № 9.
4. В верхнюю ячейку нашей таблицы добавляем созданное в Фотошопе logo нашего сайта. Для этого выделяем верхнюю ячейку нашего макета, вызываем контекстное меню, щелкнув правой кнопкой мыши, выбираем Свойства ячейки, ставим галочку Использовать фоновый рисунок и выбираем из нашей папки images файл logo.jpg (Приложение3)
5. Закрасим цветом Hex={40,00,40} левую, правую и нижнюю ячейки макетной таблицы. Для этого выделяем ячейку, щелкаем правой кнопкой мыши, вызываем контекстное меню, открываем пункт Свойства ячейки. Нажимаем Цвет. В раскрывшемся окошке выбираем Дополнительные цвета. Вводим значение цвета - Hex={40,00,40}. - ОК.
Слайд № 10.
6. Задаем ширину нашей таблицы. Для этого в меню выбираем пункт Таблица – Свойства таблицы – Таблица.
В открывшимся окне ставим галочку Задать ширину в точках и вводим число 1100, ставим Выравнивание по центру.
Слайд № 11.
Выделяем левую ячейку и задаем ей ширину в точках 150, устанавливаем выравнивание по центру. Ту же ширину и выравнивание устанавливаем и для правой ячейки.
7. Заполняем фоном fon.jpg из нашей папки images (Приложение3) четыре ячейки по центру. Для этого выделяем их вместе. Потом щелкаем правой кнопкой мыши и в открывшемся контекстном меню выбираем Свойства ячейки. Ставим галочку Использовать фоновый рисунок и нажав Обзор указываем файл, из папки images fon.jpg, ставим галочку Задать ширину ячеек в точках 500.
Слайд № 12.
8. Выделяем верхнюю ячейку таблицы и в Формате ячейки справа указываем границу по ширине 10, цвет выбираем розовый, применить к – нижней границе.
Делаем тоже само, для нижней макетной ячейки, но по верхней границе.
9. В ячейке слева печатаем пункты нашего меню: Главная, Уроки, Об авторе (тип шрифта по вашему усмотрению, размер 18 пт.).
10. В нижней ячейке сайта печатаем название организации, которой принадлежит сайт, например МОУ «Борисоглебская гимназия № 1».
11. Наш шаблон сайта готов! Теперь сохраняем данную страницу под именем index.html в нашу папку press. Файл – Сохранить как→press/index.html12. Делаем копии страницы, т.е. сохраняем текущую страницу под именем uroki.html в папке нашего сайта: Файл – Сохранить как – press/uroki.html, затем под именами stat1.html, stat2.html, avt. Html.
Верстка web-страничек сайта «Азбука юного журналиста»
Слайд № 13.
13. Открываем все созданные нами страницы:
14. В главную страницу нашего сайта index.html вставим с вами фрагменты статей юных журналистов. При этом полные статьи будут открываться у нас в новом окне. Для этого: откроем файл со статьёй из папки Материалы для сайта Тяжела и неказиста жизнь начинающего журналиста.doc (Приложение3), выделим первые два абзаца текста, скопируем их в буфер обмена и вставим в центральную ячейку нашей главной страницы index.html. После текста напечатаем Читать далее>>
15. А весть текст полностью вставим на страницу stat1.html, объединив 3 центральные ячейки в одну.
16. Делаем то же самое и со статьей Как мы делаем газету.doc (Приложение3), первый абзац статьи вставляем в главную страницу сайта index.html, а полный текст статьи – в страницу stat2.html.
17. На страничку uroki.html вставляем текст из файла Уроки.doc (Приложение3)
18. На страничке avt.html печатаем: Над проектом работали: Ф.И.О. и т.д.
Слайд № 14.
19. На главной страничке сайта index.html в ячейку справа вставим три фотографии. Фотографии заранее обработаны в Фотошопе и имеют размер не более 100 Кб. Вставляем миниатюры 1m.jpg, 2m.jpg и 3m.jpg в левую ячейку: Файл – Вставка – Рисунок – Из файла – По центру – Enter.
Слайд № 15.
20. Вставим гиперссылки на миниатюры фотографий. Для этого щелкаем левой кнопкой мыши по первой фотографии с рябиной и вызываем контекстное меню, щелкнув правой кнопкой мыши. Нажимаем пункт Гиперссылка.
Выбираем файл 1.jpg из нашей папки images, который будет открываться при нажатии на 1 миниатюру. Нажимаем пункт Выбор рамки… и указываем Новое окно, нажимаем ОК. Гиперссылка установлена! Делаем аналогично для миниатюры 2 (2.jpg) и 3 (3.jpg). На страничку Об авторе вставляем 4 миниатюру (4m.jpg) и добавляем гиперссылку на большую фотографию (4.jpg).
Слайд № 16.
21. На главной странице index.html делаем 5 гиперссылок. Выделяем текст слова Главная, вызываем контекстное меню - Гиперссылка - выбираем файл index.html и нажимаем ОК. Цвет нашего пункта меню Главная стал синий, а вид подчеркнутый. Возвращаем белый цвет, подчеркивание убираем. Аналогичным образом ставим гиперссылки на пункты меню Уроки и Об авторе, также на слова Читать далее>>. Так же делаем гиперссылки и на четырех других страницах нашего сайта. Сохраняем все наши страницы, нажимая на изображение дискетки. Сворачиваем Microsoft Office FrontPage 2003, нажав на черточку вверху окна.
Тестирование и публикация web-сайта
22. Заходим в папку press открываем файл index.html и проверяем работу каждой гиперссылки нашего сайта. Если все ссылки работают, фотографии открываются в новом окне - НАШ САЙТ ГОТОВ!
Слайд № 17.
Перед опубликованием сайта в Интернете необходимо:
- Просмотреть страницы сайта в различных браузерах;
- Проверить:
- Нормально ли читается текст на выбранном фоне;
- Правильно ли расположены рисунки;
- Правильно ли работают гиперссылки.
Слайд № 18.
В качестве основных ошибок при создании Web-страниц можно отметить:
• неудачное цветовое решение;
• неработающие ссылки;
• слабое информационное наполнение;
• плохая навигация, неудобное перемещение по сайту;
• неработающие разделы;
• отсутствие контактной информации;
• только контактная информация.
Слайд № 19.
Творческое задание “Моё мнение о мастер-классе «основы создания web-сайта»”
23. Самостоятельно на главной странице сайта index.html в третьей центральной ячейке напишите фрагмент заметки «Моё мнение о мастер-классе «Основы создания web-сайта».
Создайте новую страничку сайта под именем zametka.html, на которой напечатайте полный текст заметки, указав Ваше имя, фамилию, класс, школу. Вставьте все необходимые гиперссылки.
В качестве примера, хочется привести отзывы учащихся, принимавших участие в данном мастер классе:
«Очень понравилось создавать сайт своими руками, научился очень многому, хочется усовершенствовать знания и делать свои сайты. Гавриленко Н.»
«В результате выполнения этой работы я научился создавать сайты в FrontPage, вставлять гиперссылки, картинки и многое другое. Горшенёв А.»
«На мой взгляд, мастер-класс "Основы создания web-сайта" дает четкий порядок выполнения заданий, что упрощает нашу работу. Благодаря мастер-классу я научилась создавать web-сайты: создавать страницы, вставлять картинки, создавать гиперссылки, разрабатывать дизайн страницы и многое другое. Осадчева Т.»
«Мы научились делать сайты. Мне очень понравилось - это интересно, увлекательно и познавательно. По моему мнению, данный мастер-класс помог каждому ученику получить представление о создании сайта. Пономаренко Э.»
«Я считаю, что мастер-класс "Основы создания web-сайта" - это одна из неотъемлемых частей обучения информатике. В наше время, во время развития сети Интернет каждый ученик должен владеть элементарными основами создания веб-сайта. На этом курсе я научился создавать страницы сайта, делать гиперссылки, и многое другое, что в дальнейшем, надеюсь пригодится мне, не только как ученику, но и, возможно, как работнику профессиональной сферы. Попов Д.»
Работа с учащимися по созданию web-сайтов продолжается. Материалы мастер-класса размещены на сайте гимназии (http://gumnaziya.narod.ru/html/nov191008.htm).
В заключение хотелось бы отметить, что творчество и творческая деятельность определяют ценность человека, его индивидуальность, поэтому формирование творческой личности приобретает сегодня не только теоретический, но и практический смысл. Прогресс нашего общества зависит от творческих людей. Эффективность работы современной школы определяется тем, в какой мере как учебно-воспитательный процесс, так и внеурочная деятельность обеспечивают развитие творческих способностей учащихся, готовят их к творческой познавательной деятельности.
Литература, используемые Интернет-источники:
- Выготский Л.С. Избранные психологические исследования. М.: Изд-во АПН РСФСР, 1956. - 520с.
- http://jgk.ucoz.ru/load/15-1-0-94
- http://jgk.ucoz.ru
- МедиаШкола ЮНПРЕСС (школа юного журналиста): http://www.mediashkola.ru/bukv.html
- Букварь начинающего журналиста http://allday.ru/2008/10/10/klipart-special-backgrounds.html