Notice: Undefined variable: title in /home/area7ru/area7.ru/docs/metodic-material.php on line 165
Развитие творческих способностей учащихся в процессе создания web-сайтов - Преподавание информатики - Методические материалы для преподавателей, учителей, педагогов

Notice: Undefined variable: reklama2 in /home/area7ru/area7.ru/docs/metodic-material.php on line 252

Главная / Методические материалы / Преподавание информатики

Развитие творческих способностей учащихся в процессе создания web-сайтов


Автор(ы): Степаненко Ольга Владимировна, учитель информатики и ИКТ


Notice: Undefined variable: content in /home/area7ru/area7.ru/docs/metodic-material.php on line 278
Кто испытал наслаждение творчества, для того все другие наслаждения уже не существуют.
Чехов А.П.
Модернизация современного образования, изменение приоритетных направлений его развития ставят перед школой задачу развития творческой личности, способной не просто усваивать все увеличивающийся объем информации, а продуцировать новые, оригинальные идеи, отыскивать нетрадиционные способы решения различных проблем.
Творческое развитие личности приобретает наибольшую актуальность в периоды серьезных трансформаций в обществе и школе, когда любая деятельность предполагает не простую репродукцию, то есть воспроизве­дение, а постоянную готовность к изменению. Теоретические и экспериментальные исследования позволили доказать значимость творческого развития школьников в процессе обучения.
Л.С. Выготский писал: «Творческой деятельностью мы называем такую деятельность человека, которая создает нечто новое, все равно, будет ли это созданное творческой деятельностью какой-нибудь вещью внешнего мира или известным построением ума или чувства, живущим и обнаруживающимся только в самом человеке» [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;
  • овладели необходимыми способами проектирования, создания, размещения и обновления веб-сайта;
  • приемами организации и самоорганизации работы по изготовлению сайта;
  • опытом коллективного сотрудничества при конструировании сложного веб-сайта;
  • оценивания своих результатов, корректирования дальнейшей деятельности по сайтостроительству.
Опыт работы летней компьютерной школы «Основы создания web-сайта» показал, что коллективная работа учащихся над проектом по созданию web-сайта способствует повышению качества знаний и творческой активности гимназистов, развитию их творческих способностей. Следует отметить, что работа над проектом продолжается: учащиеся постоянно обновляют страницу новостей сайта, пополняется фотогалерея, осуществляется содержательное наполнение страниц сайта, постоянное их обновление. В разделе сайта «Анонсы и объявления» всегда свежая и актуальная информация о конкурсах, участие в которых также способствует развитию творческих способностей гимназистов.
Но это еще не все. Увлекшись процессом создания сайта учащиеся Ушков Алексей (сайт «Родники родного края»(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).
Мастер-класс «Основы создания web-сайта»
Слайд № 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

ВНИМАНИЕ!
Текст просматриваемого вами методического материала урезан на треть (33%)!

Чтобы просматривать этот и другие тексты полностью, авторизуйтесь на сайте:

Ваш id: Пароль:

РЕГИСТРАЦИЯ НА САЙТЕ

Простая ссылка на эту страницу:
Ссылка для размещения на форуме:
HTML-гиперссылка:

Добавлено: 2010.11.22 | Просмотров: 1365

При использовании материалов сайта, активная ссылка на AREA7.RU обязательна!

Notice: Undefined variable: r_script in /home/area7ru/area7.ru/docs/metodic-material.php on line 340