Быстрый поиск

Дипломная работа: Методика обучения технологии web 2.0 на примере создания школьного сайта спортивной тематики

(http://youtube.com, http://www.teachertube.com, http://www.l-vision.ru).

4. Создание и редактирование документов. Онлайн-офис может быть доступен с любого компьютера, у которого есть доступ в Интернет, независимо от того, какую операционную систему он использует. Это позволяет людям работать вместе по всему миру и в любое время, что ведет к созданию международных виртуальных команд для совместной работы над проектами. Можно совместно создавать или взаимно редактировать самые разные документы (см. список с адресами сервисов, предназначенных для совместного редактирования). Презентации (http://scratch.mit.edu, http://slideshare.net, http://slideshare.net,http://www.alice.org, http://zoho.com, http://docs.google.com) Текстовые документы (http://www.scribd.com, http://docs.google.com) Блог – сайт, основное содержимое которого — регулярно добавляемые авторские записи, изображения. Для блогов характерны недлинные записи временной значимости, отсортированные в обратном хронологическом порядке (последняя запись сверху). Отличия блога от традиционного дневника обусловливаются средой: блоги обычно публичны и предполагают сторонних читателей, которые могут вступить в публичную полемику с автором (в отзывах к блог-записи или своих блогах).

(http://www.livejournal.com, http://www.blogger.com)

5. ВикиВики – сайт, структуру и содержимое которого пользователи могут сообща изменять с помощью инструментов, предоставляемых самим сайтом. Крупнейший и известнейший вики-сайт — Википедия. Вики характеризуется следующими признаками:

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

· особый язык разметки — так называемая вики-разметка, которая позволяет легко и быстро размечать в тексте структурные элементы и гиперссылки, форматировать и оформлять отдельные элементы;

· учёт изменений (версий) страниц: возможность сравнения редакций и восстановления ранних; проявление изменений сразу после их внесения;

· множество авторов: вики могут править все посетители сайта

(http://ru.wikipedia.org,http://www.mediawiki.org,http://www.dokuwiki.ru).

6. Диаграмма связей (от англ. mind maps – интеллект-карта, карта памяти, карта ума). Это способ изображения процесса общего системного мышления с помощью схем. Может рассматриваться как удобная техника альтернативной записи. Диаграмма связей реализуется в виде древовидной схемы, на которой изображены слова, идеи, задачи или другие понятия, связанные ветвями, отходящими от центрального понятия или идеи. В основе этой техники лежит принцип «радиантного мышления», относящийся к ассоциативным мыслительным процессам, отправной точкой или точкой приложения которых является центральный объект. Диаграммы связей используются для создания, визуализации, структуризации и классификации идей, а также как средство для обучения, организации, решения задач, принятия решений, при написании статей. 7. Социальные сети – сайты с возможностью указать какую-либо информацию о себе (дату рождения, школу, вуз, любимые занятия и другое), по которой страницу пользователя смогут найти другие участники сети. Одна из обычных черт социальных сетей — система «друзей» и «групп». Социальные сети предназначены для выстраивания онлайн-сообществ людей, объединенных какой-либо деятельностью (интересами) и заинтересованных в ее распространении.

(http://odnoklassniki.ru, http://vkontakte.ru, http://www.linkedin.com,

http://www.facebook.com, http://www.privet.ru).

8. Мэшапы – это веб-приложения, объединяющие данные из нескольких источников в один интегрированный инструмент: географические (http://wikimapia.org, http://sketchup.google.com, http://www.unype.com, http://earthify.org);

фотографические

http://www.locr.com, http://www.comeeko.com, http://www.netvides.com).

9. Общение в 3D (трёхмерной реальности) (http://secondlife.com).

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

Глава 2. Создание школьного сайта с использованием технологии web 2.0

2.1 Проектирование сайта. Настройка рабочей среды

Вторая глава нашей дипломного исследования посвящена практической работе по созданию школьного сайта спортивной тематики с использованием технологии web 2.0. В каждом параграфе главы будет разобран отдельно взятый этап работы над приложением, а именно: основные понятия и программный код, нужный для создания сайта. За основу создания сайта мы взяли руководство, описанное Квентином Зеврасом в книге «Web 2.0: создание приложений на PHP» [3].

Методика преподавания данной не простой, не только для учащегося школы, темы заключается в следующем: за основу берется программный код, расположенный на оф. сайте автора описанного выше пособия. Он переписывается последовательно в том порядке, который представлен в книге. Поскольку изучить в школе языки PHP и асинхронный JavaScript на уровне позволяющем писать подобные приложения без помощи книги, мы ставим перед собой следующие цели: учащийся должен знать основные понятия по каждому тематическому разделу, понимать структуру веб-приложения, порядок выполнения действий, этапы работы, способы подключения библиотек функций к приложению, уметь менять программный код, в зависимости от потребностей. Имеется ввиду HTML/CSS код и команды на языке SQL, позволяющие создавать базы данных и запросы к ним.

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

1. Определение функций веб-сайта

2. Описание структуры веб-приложения

3. Установка и настройка веб-сервера

· Файловая структура приложения

· Настройка виртуального сервера

· Настройка базы данных

4. Установка библиотеки Zend Framework

5. Установка системы управления шаблонами

Определение функций будущего веб-сайта

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

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

2. Регистрация пользователей. Необходимо создать систему регистрации пользователей, чтобы новые посетители смогли регистрировать свои учетные записи и создавать личные страницы. Данная система должна уметь делать следующее:

· Проверять предоставленные пользователем данные;

· Создавать учетную запись пользователя в базе данных;

· Отправлять по электронной почте письмо с подтверждением регистрации.

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

· Управление своим блогом

· Изменение данных учетной записи

· Выход из системы.

4. Блоги пользователей. Ведение блогов (личных страниц) – главная функция нашего веб-приложения. Чтобы создать удобную и полезную систему управления блогами, надо реализовать много разных функций:

· Добавлять, редактировать и удалять свои записи в блогах;

· Присваивать записям блога тематические метки;

· Добавлять в записи блогов графические изображения, показывать галереи изображений того или иного пользователя;

5. Поиск по сайту.

Основные понятия параграфа

Веб-сервер - сервер, обеспечивающий предоставление информации в службе глобального соединения.

Веб-сервер хранит и предоставляет во внешнюю сеть данные, организованные в виде веб-страниц. Веб-сервер отвечает за обработку запросов клиентов к веб-сайту и исполнение CGI-, JSP, ASP-, PHP- и других приложений.

Веб-сервером принято называть совокупность программного и аппаратного обеспечения, которое выполняет стандартные (хранение информации), так и дополнительные функции – ведение журнала запросов, поддержка защищенного протокола HTTPS, динамически генерируемых страниц.

Apache - это web-сервер, один из наиболее распространенных, безопасных и удобных во всем мире. Если вы создаете свой динамичный сайт с использованием языков программирования (например, таких как Perl или PHP) или просто пишете сайт, то без него Вам не обойтись. Конечно, если вы работаете дома с простыми страничками, которые написаны на HTML, то сервер Вам пока не нужен. Существуют версии как под Windows так и под Unix-платформы.

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

База данных — совокупность данных, хранимых в соответствии со схемой данных, манипулирование которыми выполняют в соответствии с правилами средств моделирования данных

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

PHP - это широко используемый язык программирования с открытым исходным кодом. Открытый исходный код означает, что он может быть каждым и в любое время использован и изменён. Причём практически всё ПО бесплатно. PHP был сделан специально для ведения разработок в интернете и может вставляться в HTML-код. Отличием PHP от другого кода, например JavaScript, является то, что PHP-скрипты выполняются на сервере. Если бы у вас на сервере был размещен скрипт, то посетитель страницы получил бы только результат выполнения скрипта, причём он не смог бы выяснить, какой именно код выполняется. Вы даже можете настроить свой сервер таким образом, чтобы HTML-файлы обрабатывались процессором PHP, так что посетители страницы даже не смогут узнать, получают ли они обычный HTML-файл или результат выполнения скрипта. PHP крайне прост для освоения, но подходит и для профессиональных программистов. За несколько часов изучения PHP можно создавать простые PHP-скрипты.

Общая структура веб-приложени

Структура будущего приложения показана на рис. 1. Для хранения используемых им данных используется база данных. Для управления функциональными возможностями приложения в ее структуре создано несколько логических областей. Кроме того, один из ключевых аспектов приложений для web 2.0 – строгое соблюдение стандартов XHTML и CSS. Для максимальной совместимости и согласованности доступа к данным необходима качественная гипертекстовая разметка и хорошо структурированные классы JavaScript. Также в ходе разработки стоит рассмотреть следующие аспекты: доступ к базам данных, управление шаблонами, идентификация и допуски пользователей, использование сторонних веб-служб.

Рис. 1 Общая структура веб-приложения

Установка и настройка веб-сервера

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

· Веб-сервер Apache

· Сервер баз данных – MySQL

· Язык серверных сценариев – PHP

Процесс установки

Для установки данных программных компонентов мы использовали базовый пакет Denwer. «Денвер» переводится дословно как «джентельменский наюор веб-разработчика». Это программа, позволяющая использовать уже настроенные Apache, PHP, MySQL и другие компоненты, необходимые для разработки приложений. Данный пакет бесплатен и его можно скачать с официального сайта производителя (http://www.denwer.ru/).

Для установки пакета нужно запустить инсталлятор и следовать его инструкциям. После завершения установки нужно выполнить команду Start, которая запускает виртуальный диск.

Файловая структура приложения

Рассмотрим структуру файлов, из которых будет состоять приложение. Все файлы, нужные для работы сайта будем помещать в каталог: G:\home\localhost\www\phpweb20\. Полная файловая структура web-приложения изображена на рис. 2

Рис. 2 Структура каталогов веб-приложения

Рассмотрим подробнее назначение каждого каталога:

· Htdocs – корневой каталог, к которому будет обращаться веб-сервер. Именно этот каталог указывается в конфигурационной информации Apache и именно к нему обращается сервер, когда пользователь запрашивает страницу на веб-сайте.

· Data – каталог для хранения данных. Он будет содержать журналы регистрации событий, закачанные пользователями на сайт файлы и различные временные данные. Данный каталог будет содержать несколько подкаталогов для отдельных типов данных: logs, uploaded-files, tmp.

· Include – каталог классов PHP. В нем будут храниться все функции и библиотеки PHP. Кроме собственного кода, здесь же будут размещаться и все готовые сценарии, заимствованные у других разработчиков. Контроллеры приложения (сценарии, которые определяют операции, разрешенные пользователю на веб-сайте) будут располагаться в подкаталоге Controllers. После того как мы создадим виртуальный сервер Apache для приложения, каталог Include будет включен в директиву PHP include_path.

· Temlates – каталог шаблонов, в нем будут храниться шаблоны веб-сайта. Настройка виртуального сервера

Рис. 3 Конфигурация веб-сервера Apache

Виртуальный сервер - сервер, который используются для присвоения одному компьютеру нескольких доменных имен. Чтобы успешно сконфигурировать веб-сервер, необходимо вначале создать запись <VirtualHost> для Apache. Для этого нужно в директории G:\usr\local\apache\conf отредактировать уже имеющийся файл httpd.conf. Код для конфигурации web-сервера приведен на рис.3.

Остановимся подробнее на некоторых записях:

· VirtualHost 127.0.0.1 – адрес виртуального сервера

· ServerName phpweb20 – имя сервера «phpweb20»

· Directory "G:\home\localhost\www\phpweb20\htdocs" – указывает, в какой директории искать главный файл index.php. Благодаря данной записи появилась возможность обращаться к index.php с помощью адреса http://localhost/.

· php_value include_path ".;G:\home\localhost\www\phpweb20\include\; G:\usr\local\php5\PEAR" – данная запись сообщает модулю PHP, где искать нужные для работы приложения функции на языке PHP.