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

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

2) Инструменты для работы с HTTP и XML есть в любом современном языке программирования, поэтому веб-службы переходят в разряд платформонезависимых. XML(eXtensible Markup Language) — язык разметки данных. Он представляет собой свод общих синтаксических правил, что делает его существенно лучше html.  Веб-синдикация - одновременное распространение информации в том числе аудио- и видео- на различные страницы или web-сайты, как правило, с использованием технологий RSS или Atom. Принцип заключается в распространении заголовков материалов и ссылки на них (например, последние сообщения форумов, и т. п.). Первоначально эта технология использовалась на новостных ресурсах и в блогах, но постепенно сфера применения расширилась.

Чистый HTML. Хотя многие разработчики и полагают, что у всех пользователей, как и у них самих, стоит последний Firefox с десятью самыми популярными плагинами, в действительности на многих машинах для доступа в интернет по-прежнему используются Netscape 3.x или Internet Explorer 4.x. Браузеры этого уровня могут применяться с целью доступа к конкретному приложению (исходники которого потеряны и его нельзя изменить), или же они могут просто быть установлены дома у консервативного пользователя, продолжающего использовать Internet Explorer 4.0, лишь потому, что он придерживается принципа "работает - не чини" в отношении обновления браузера. Совершенно очевидно, что HTML не может обеспечить такого удобства пользователя, как любая из вышеперечисленных технологий, основанные на HTML пользовательские интерфейсы в долгосрочной перспективе по-прежнему будут играть важную роль. Никакая другая технология не позволит приложению быть доступным для такого большого числа пользователей, как чистый HTML. В результате многие приложения по-прежнему будут предоставлять такие пользовательские интерфейсы ещё много лет.

Сегодня наиболее авторитетным российским специалистом по вопросам педагогики сетевых сообществ и использованию веб 2.0-сервисов является Е. Д. Патаракин, заведующий лабораторией учебных коммуникаций Института программных систем (Нижний Новгород), автор и координатор проекта Летописи.Ру – «Время вернуться домой» (http://letopisi.ru). Им была составлена примерная классификация социальных сервисов (сетевого программного обеспечения, поддерживающего групповые взаимодействия). Приведем описания основных функциональных особенностей сервисов.

1.  Совместный поиск информации

http://www.swicki.com

http://www.rollyo.com,

http://google.com.

2. Совместное хранение закладок. Это продолжение и логическое развитие идеи закладок (ссылок на избранные сайты) в «Избранном» браузера. В отличие от таких закладок, социальные закладки хранятся не на компьютере пользователя, а на сервере в Интернете. Преимущества такого похода: доступ к своей коллекции «Избранного» с любого компьютера, подключенного к Интернету; возможность поделиться своими закладками с другими пользователями; закладки можно систематизировать с помощью категорий или меток (http://del.icio.us, http://bobrdobr.ru, http://rumarkz.ru, http://memori.ru) 3. Совместное хранение медиафайлов. Фотохостинг. Существуют сайты, позволяющие публиковать любые изображения (напр., цифровые фотографии) в Интернет. Фотохостинги служат для размещения, хранения и показа изображений другим пользователям Сети. Это удобное средство демонстрации фотографий. При размещении на фотохостинге каждому фото присваивается уникальный адрес. Автор снимка может легко поделиться гиперссылкой, ведущей на фотографию, с любым человеком, имеющим доступ в Интернет, а также разместить её на своем сайте. (http://flickr.com, http://www.panoramio.com, http://flamber.ru, http://picasaweb.google.com). Видеохостинг. Сайт, позволяющий загружать и просматривать видео в браузере через специальный Flash-плеер.

(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.

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

Задача данного этапа – создать базу данных MySQL, которая будет использоваться в работе веб-приложения. У MySQL есть собственный интерфейс для организации взаимодействия с клиентами, с помощью которого можно перемещать данные и изменять параметры базы данных. Назначение пользователей базы данных позволяет ограничить круг пользователей, обладающих правом доступа к таблицам на сервере. Каждый сервер MySQL может содержать несколько баз данных, где группируются таблицы. Веб-приложения, работающие на стороне сервера, могут использовать как свои собственные или как единую. Общую для всех приложений базу данных [2]. Чтобы подключиться к базе данных с целью ее использования, нужно знать:

·  IP-адрес сервера баз данных;

·  Имя базы данных;

·  Имя пользователя;

·  Пароль

Один из способов взаимодействия с MySQL основан на использовании клиента командной строки MySQL. Чтобы запустить режим командной строки, нужно найти исполняемый файл. В нашем случае он находится по адресу:

G:\usr\local\mysql-5.1\bin. Запустив файл mysql_run_to_import_dumps.exe, появится ожидание команды вода (mysql>).

Для создания базы данных мы используем последовательность команд, изображенную на рис.4.

Рис. 4 Создание базы данных для веб-приложения

Рассмотрим подробнее каждую команду:

mysql> CREATE DATABASE phpweb20d; - данная команда создает базу данных под названием «phpweb20d»;

mysql> use phpweb20d – переход к использованию указанной базы данных;

grant all on phpweb20d.* to phpweb20d@localhost identified by 'diplom'; - данная команда создает учетную запись пользователя phpweb20d. Ему присваиваются все права на указанную базу данных и пароль «diplom».

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

Zend Framework представляет собой библиотеку компонентов PHP5 с открытым кодом, которую можно использовать для решения повседневных задач веб-программирования. Мы будем использовать эту библиотеку для создания веб-приложения. Поскольку она позволяет сосредоточиться на реализации возможностей web 2.0. Рассмотрим некоторые компоненты:

·  Zend_Auth и Zend_Acl – используется для идентификации пользователей и проверки уровня их доступа.

·  Zend_Controller – используется для обработки запросов клиентов и перенаправления запросов в соответствующие классы.

·  Zend_Db – используются для связи с MyAQL-базой данных приложения

·  Zend_Mail – используется для рассылки пользователям сообщений электронной почты.

·  Zend_Validate и Zend_Filter – используется для проверки и коррекции данных, введенных пользователями в формах.

·  Zend_Search – используется для полнотекстового поиска.

Страницы: 1, 2, 3, 4, 5, 6