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

Сегодня наиболее авторитетным российским специалистом по вопросам педагогики сетевых сообществ и использованию веб 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 - используется для полнотекстового поиска.

Для того, чтобы использовать данную библиотеку для создания приложения, нужно скачать с официального сайта (http://framework.zend.com/) установочный пакет и скопировать папку Zend в каталог include нашего веб приложения. Поскольку в файле конфигурации уже прописан путь до каталога include, в дальнейшем можно обращаться к компонентам библиотеки следующим образом: require_once('Zend/имя_файла.php');

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

Для того, чтобы веб-приложение позволяло генерировать страницы на основании шаблонов, нужно установить систему управления шаблонами. Для этих целей мы будем использовать

Smarty Template Engine - систему управления шаблонами, написанную для PHP, которая позволяет легко отделять вывод данных и визуальную презентацию от внутренних операций приложения. Все, что увидит пользователь на экране, содержится в файле шаблона (.tpl). После обработки запроса пользователя, этот файл будет выведен на экран через посредничество системы Smarty. Файл шаблона состоит из последовательности текстовых заменителей, используемых для динамического вывода веб-контента.

Код системы Smarty можно загрузить с официального сайта (http://www.smarty.net/). Далее нужно скопировать содержимое папки libs в подкаталог Smarty каталога include.

Чтобы пользоваться системой Smarty, необходимо сконфигурировать следующие свойства каждого созданного объекта Smarty:

· Значение template_dir задает местонахождение всех шаблонов приложения. Ранее, при создании структуры каталогов приложения и файла его рабочих настроек, в качестве этого каталога был указан G:\home\localhost\www\phpweb20\templates

· Значение compile_dir задает каталог, в который система Smarty будет помещать скомпилированные шаблоны.

Поскольку в шаблонах используется собственный метаязык, каждый такой шаблон компилируется в код PHP для ускорения последующего выполнения.

При каждом изменении файла шаблона система автоматически перекомпилирует его и помещает в этот каталог. Каталог compile_dir должен быть доступен для записи веб-серверу. Для этой цели будем использовать каталог: G:\home\localhost\www\phpweb20\data\tmp\templates_c

Далее, с целью программной реализации настроек, мы последовательно создаем файлы, код которых находится в приложении 2 (листинг1.1 - 1.10). Результатом реализации данного программного кода является главная страница сайта, которая автоматически создается по шаблону.

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



Рис. 5 Главная страница будущего веб-приложения

2.2 Учетные записи и личные страницы пользователей. Реализация средств web 2.0

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

1. Создание таблицы пользователей в базе данных

2. Программная реализация аутентификации пользователей

3. Регистрация, вход и выход пользователей

Создание таблицы пользователей в базе данных

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

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

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

· Password - строка символов, по которой выполняется аутентификация пользователя.

· User_type - строка, обозначающая классификацию пользователя по системе типов и категорий (администратор, пользователь или гость).

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

· User_id - ссылка на пользователя, то есть запись в таблице users;

· Profile_key - имя параметра, который хранится в данной записи;

· Profile_value - значение параметра. Если значение поля Profile_key равно e-mail, текущее поле будет содержать сам адрес.

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

Прокомментируем каждую команду:

· Use phpweb20 - обратить к базе данных phpweb20; create table users - создать таблицу users, аналогично создается таблица users_profile; user_id serial not null - устанавливает тип serial для поля user_id. Это счетчик, который автоматически будет меняться для каждой записи данного поля, не может быть пустым; Username varchar(255) not null - поле username может иметь до 255 символов в длину. Поля password и user_type будут иметь длину 32 и 20 символов соответственно.

Рис. 5 Команды sql для создания двух связанных таблиц

· primary key (user_id) - поле user_id является ключевым

· unique (username) - поле username уникальное, то есть его значения для разных пользователей не могут повторяться.

· type = InnoDB - тип таблицы определен таким образом, чтобы была возможность создавать реляционные связи по внешним ключам.

· primary key (user_id, profile_key) - поля user_id, profile_key уникальны.

· foreign key (user_id) references users (user_id) - данная таблица связана с таблицей users по ключевому полю user_id

Программная реализация аутентификации пользователей

Для аутентификации пользователей, то есть проверке вводимых им регистрационных данных используется программный компонент Zend_Auth библиотеки Zend FrameWork. Чтобы пользователь прошел аутентификацию, он должен предоставить контрольную информацию. В нашем случае такой информацией является поле password таблицы users. Проверка идентификационных данных и контрольной информации путем сравнения их с информацией из базы данных выполняется адаптером. Чтобы подключить данный компонент, мы последовательно набираем программный код, находящийся в листингах 2.1 - 2. 3 (приложение 2).

Регистрация, вход и выход пользователей

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

Порядок написания программного кода для реализации данных функций веб-приложения следующая:

1. Создание класса функций, отвечающего за обработку регистрационных форм UserRegistration.php(листинг 2.4)

2. Создание шаблонов для страниц, связанных с регистрацией пользователей (листинг 2.5 - 2.6) Использование обработчика для входа пользователя на сайт AccountController.php.

Рис. 6 Форма для регистрации



Рис. 7 Форма для входа на сайт

Рис. 8 Приветствие вошедшего пользователя

Реализация средств web 2.0.

Реализация средств web 2.0 подробно описана в книге К. Зевраса «Web 2.0: создание приложений на PHP» в главах 8-10. Для создания системы блогов мы последовательно используем приведенный в книге код, не внося в него изменений. Главное, что нужно знать учащимся - это технологии, использование которых дает возможность создавать веб 2.0 - приложения:

· Prototype - библиотека кода JavaScript, которая упрощает написание кода на языке JavaScript, предлагая удобные средства межплатформенной разработки.

· Scriptaculous - библиотека кода JavaScript, предназначенная для создания спецэффектов и улучшения пользовательского интерфейса веб-сайтов. Эта библиотека основывается на средствах Prototype.

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

2.3 Визуальная стилистика web-приложения. Методика преподавания языковых стандартов разметки гипертекста в школе

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

Практическая работа №1 «Создание html-страниц. Простейшие средства оформления»

Задание 1

Создайте html-страницу

1. Имеющую заголовок «Лабораторная работа №1. <Фамилия, Имя. Класс>»

2. Цветной фон (выбрать любой цвет)

Задание 2

1. На созданной странице разместите следующее стихотворение “колыбельная” из приложения 3:

2. Оформите текст следующим образом:

Ш Заголовок выровнен по центру, четверостишья - по левому краю, авторство - по правому;

Ш Каждый абзац написан различным шрифтом, цветом и размером.

Ш Заголовок по размеру больше остального текста и имеет жирное начертание

Ш Авторство написано курсивом

Ш Все компьютерные термины подчеркнуты.

Задание 3

Создайте html-страницу с именем Page2.html, имеющую

1. заголовок «Лабораторная работа №1. <Фамилия, Имя. Класс>»

2. цветной фон (выбрать любой цвет)

На созданной странице разместите следующую классификацию ЛВС из приложения 3 и оформите ее по образцу

Задание 4

1. Откройте документ Page2.html

1. Вставьте в этот документ «синий» текст ниже «классификации компьютерных сетей» и выполните задания:

1) С помощью тэгов <p>, <br> и <ul>список</ul> отформатируйте текст по образцу.

2) Вставьте картинки из папки images в те места, где стоит соответствующая метка

3) Вернитесь к пункту классификации «По типу сетевой топологии ». Сделайте так, чтобы каждый пункт списка (шина, звезда и т.д.) являлся ссылкой на соответствующее место в документе

4) * Измените начертание, размер и цвет текста «по вкусу»

Практическая работа №2

«Создание таблиц с помощью языка html»

Справочный материал

1. ТЭГИ

<table> - начало таблицы

Содержимое таблицы

</table> - конец таблицы

<tr> - начало строки

Содержимое

</tr> - конец строки

<td> - начало столбца

Содержимое ячейки

</td> - конец столбца

Пример

Написать код для создания таблицы, состоящей из 2 строк и 2 столбцов

1	2
3	4

<table>

<tr> <!-- первая строк

<td> 1 </td>

<td> 2 </td>

</tr>

<tr> <!-- вторая строка

<td> 3 </td>

<td> 4 </td>

</tr>

</table>

1. АТРИБУТЫ ТЭГОВ

<table>

1) Размеры

width = “ширина таблицы”

height = “высота таблицы”

2) Отступы

cellspasing = “расстояние между ячейками”

cellspadding = “отступ от границ ячейки внутри нее”

3) Линии

border = “толщина линии рамки” bordercolor = “цвет линии рамки”

4) Заливка ячеек

bgcolor = “цвет заливки ячейки”

background = “фоновая картинка для таблицы”

5) Выравнивание

align = “выравнивание содержимого таблицы по горизонтали”

valign = “выравнивание содержимого таблицы по вертикали”

1. Для тэгов <tr> и <td> применимы те же атрибуты, кроме №2 и №3, НО относится они будут исключительно к содержимому строки (<tr>) и конкретной ячейки (<td>)

2. Если ячейка ничего не содержит, то между тэгами, обозначающими ячейку, нужно вставить специальный код &nbsp;

<td> &nbsp; </td>

6) Объединение строчек

Rowspan= “количество ячеек”

7) Объединение столбцов

Colspan = “количество ячеек”

Задание №1

1. Откройте файл page3.html

2. Используя рассмотренный ранее материал, создайте таблицу по образцу



Этапы выполнения задания:

1. Создайте таблицу, состоящую из 9 строчек и 6 столбцов. Пронумеруйте ячейки следующим образом.

1	2	3	4	5	6
7
8
9
10
11
12
13
14

2. Задайте для тэга <table> следующие атрибуты:

1) Ширина - 1000 пикселей

2) Выравнивание по центру экрана

3) Расстояние между ячейками - 0

4) Отступ от границ ячейки внутри нее - 2 пикселя

5) Толщина линии - 1. Цвет линии - любой.

3. С помощью атрибута colspan= `” объедините 1,2 и 3 ячейки

4. С помощью атрибута rowspan = “” объедините ячейки: 7-9 и 10 - 14

5. Раскрасьте таблицу, задайте ширину столбцов (в %) и внесите в нее данные.

*Ширина столбца «Домашнее задание» - 50%, «Предмет» - 25%. Остальные - 12,5%

Практическая работа №3

“Создание галереи”

Создайте html-документ, имеющий следующую структуру

1 строка: Название галерии и автор работы

2 строка: Список разделов галереи

3 строка: Название первого раздела галереи

4 строка: Содержимое первого раздела

5 строка: Название второго раздела галереи

6 строка: Содержимое второго раздела

7 строка: Название третьего раздела галереи

8 строка: Содержимое третьего раздела

Примечания:

1. Задний фон надо замостить каким-либо изображением из папки background

2. Таблица закрашена любым цветом и выровнена по центру

3. Список разделов состоит из гиперссылок, позволяющих переходить к нужному месту в документе

4. В каждом разделе галереи содержатся миниатюры из папки small, которые являются ссылками на аналогичные изображения, хранящиеся в папке big. Чтобы картинка открывалась в новом окне, нужно в тэге <a>использовать атрибут target="_blank"

5. Весь содержащийся на старнице текст нужно отформатировать “по вкусу”, то есть изменить размер, шрифт, начертание и цвет.

Практическая работа №4

Написать таблицу стилей (CSS) для html-документа "Цвет и цветовые модели" (приложение №3)

Требования:

1. Заголовок 1-го уровня (<h1>...</h1>)

- Выравнивание по центру

- Отступ от верхнего края экрана - 30px

- Высота нижнего поля - 30x

- Размер, цвет и начертание, отличное от других элементов

2. Заголовки 2-го уровня (<h2>...</h2>)

- Выравнивание по левому краю

- Высота нижнего поля в 2 раза меньше высоты верхнего поля (задать самостоятельно)

- Наличие левого отступа (задать самостоятельно)

- Размер, цвет и начертание, отличное от других элементов

3. Абзац (<p>)

- Наличие красной строки (значение задать самостоятельно)

- Выравнивание по ширине экрана

- Ширина левого отступа = ширине правого отступа (задать самостоятельно)

- Размер, цвет и начертание, отличное от других элементов

4*. Создать три класса для следующих частей абзаца (<span>...</span>)

1) Первое предложение каждого абзаца

2) Термины и обозначения

3) Названия цветов

Задание №2

1. С помощью css задайте для элемента body (тело страницы) следующие значения:

- Фон закрашен одним узором из папки background. Изображение повторяется по горизонтали и по вертикали

- Фон во время прокрутки страницы остается неподвижным

2. Создайте три класса элементов "блок" (<div>...</div>)

1) Первый класс содержит в себе заголовок страницы (Цвет и цветовые модели)

- фон закршен одной из картинок из папки background

- Изображение повторять только по горизонтали

- высоту (height) задайте самостоятельно

- ширина (width) 100%

2) Второй класс содержит в себе меню страницы

- фон закрашен произвольным цветом

- высоту (height) задайте самостоятельно

- ширина (width) 100%

3) Третий класс содержит в себе графические изображения, расположенные в конце каждого абзаца. В блоке могут находится несколько изображений.

Практическая работа №5 Разметка web-страницы с помощью «блоков»

Пример:

Создание блока «Шапка страницы»

<div id="top"> <h1> Шапка страницы </h1> </div>

Описание блока «Шапка страницы с помощью CSS»

#top

{

height:200px;

width:100%;

background-color:#cc00cc;

position: absolute;}

Задание №1

1. Создайте 4 блока с разными идентификаторами и расположите в них соответствующий текст

1) Шапка страницы

2) Меню сайта

3) Контент сйта

4) Логотип сайта

2. Напишите таблицу стилей для каждого блока, используя свойства:

height:

width:

background-color:

margin-left:

margin-top:

position: absolute;

Задание №2

1. Замостите любым узором из папки Background фон документа (по желанию, блоки «Меню сайта» и «Шапка страницы»)

2. Закрасьте блок «Контент сайта» цветом, согласующимся с фоном страницы.

3. Вставьте в блок «Логотип» любую картинку из папки Logo

4. Откройте Вашу предыдущую практическую работу, находящуюся в папке «CSS - Прак. раб№2»

5. Скопируйте на страницу:

1) Заголовок «Цвета и цветовые модели» в блок «Шапка страницы»

2) Меню в блок «Меню»

3) Весь остальной текст в блок «Контент сайта»

6. Скопируйте таблицы стилей для этих элементов и добавьте их на новую страницу

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

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

Заключение

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

В ходе теоретического и экспериментального исследования получены следующие основные результаты:

1. Мы изучили методическую и научно-популярную литературу по теме исследования и рассмотрели возможность ее применения в образовательном процессе;

2. Установили взаимосвязь между совместной работой над школьным сайтом и повышением мотивации к учебному процессу;

3. Установили класс теоретических понятий, которые нужно знать и понимать школьнику для выполнения практической части;

4. Определили задания, выполнение которых призвано облегчить процесс понимания технологии web 2.0.

5. Отделили самостоятельную работу по созданию приложения от использования готового кода.

Создание веб-приложения по технологии web 2.0 делится на несколько тематических этапов. На каждом этапе учащийся должен усвоить определенный объем понятий, связанных с темой этапа. Каждый этап имеет свою специфику и предполагает использование тех или иных библиотек, программный код которых менять не нужно. Учащимуся нужно знать, как функции этих библиотек подключаются к страницам веб-приложения и что обозначает каждый используемый компонент. Также результатом проведения данной работы должно стать знание основных команд языка запросов SQL, позволяющих создавать базы данных и связанные в ней таблицы. Цель подобной работы - дать учащимся представление об этапах и способах создания веб-приложений, понимание их структуры, а не научить программировать на PHP и JavaScript. Фактически, создание школьного сайта - это осмысленное использование программного кода, которое должно жать учамися ценный опыт для дальнейшей работы в этом направлении. Основной упор при работе над данным проектом делается на визуальную стилистику приложения, потому как разметка гипертекста наиболее доступная учащимся для понимания.

Цель и задачи работы достигнуты. Был сощдан школьный сайт спортивной тематики, на примере которого учащиеся познакомились с технологией web 2.0, а именно, поняли, в чем она состоит и за счет чего может быть реализована.

Библиография

1. Амуленкан, В. Технологии Web 2.0 [Электронный документ] / В. Амуленкан, Е. Кореко. - (http://av-school.ru/article/a-65.html). 28.03.2010

2. Дэвис, Е.М. Изучаем PHP и MySQL.: Пер. с англ. [Текст] / Е.М. Дэвис, Дж. А. Филипс.- СПб: Символ-Плюс, 2008.- 448 с.: ил.

3. Зеврас, К. Web 2.0 [Текст] : создание приложений на PHP / К. Зеврас.- М.: Вильямс, 2010.- 544 с.: ил.

4. Коннолли, Т. Базы данных: проектирование, реализация и сопровождение: Учебник [Текст] / Т. Коннолли, К. Бегг.- М.: Диалектика, 2001.- 1120 с.

5. Маклафлин, Б. Изучаем Ajax [Текст] / Б. Маклафлин.- СПб.: Питер, 2008.- 443 с.: ил.

6. Макфарланд, Д. Большая книга CSS [Текст] / Д. Макфарланд.- СПб.: Питер, 2010.- 512 с.: ил.

7. Монахов, М.Ю. Создаем школьный сайт в Интернете. Элективный курс [Текст] : Учебное пособие / М.Ю. Монахов, А.А. Воронин.- М.: Бином. Лаборатория знаний, 2005.- 128 с.: ил.

8. Образовательные возможности Веб 2.0. Веб 2.0 - сервисы Интернета - новые формы коллективного педагогического взаимодействия [Электронный документ]. - (www.eelmaa.net/dld/web20.pdf). 10.04.2010

9. Скляр, Д. PHP. Рецепты программирования [Текст] / Д. Скляр, А. Трахтенберг.- 2-е изд.- М.; СПб.: Русская редакция: БХВ-Петербург, 2007.- 736 с.: ил.

10. Что такое WEB 2.0 [Электронный документ].- (http://www.weboptima.ru/2_0.htm/). 28.03.2010

11. (http://coolvds.com/blog/webservers/what-is-a-webserver/) [Электронный документ]. 5.05.2010

12. (http://web20.su/blog/saytostroenie/wordpress-drupal-joomla/) [Электронный документ]. 12.04.2010

Приложение 1

Обзор движков для создания сайтов по технологии web 2.0[12]

Сервисы для создания блогов, вроде LiveJournal или BlogSpot - это, конечно, удобно и просто, но каждый блоггер со временем начинает задумывается об автономном блоге на собственном домене и отдельном движке. Выбрать последний - не самая простая задача. Рассмотрим несколько движков, которые подойдут для создания блога.

Wordpress

Самый популярный в сети движок для создания блогов. Был разработан (Ryan Boren и Matthew Mullenweg) на PHP и MySQL. Среди достоинств Вордпресса можно назвать множество функций, необходимых блоггеру, русскоязычную поддержку в виде сообщества пользователей, большое количество плагинов и скинов, которые можно скачать на официальном и русском сайтах Вордпресса, а также то, что этот движок распространяется бесплатно. К недостаткам - то, что Wordpress - CMS исключительно для создания блога, полноценный сайт на нем не построишь. Идеально подойдет для новичков.

(Скачать WordPress можно с http://wordpress.org/)

Joomla!

Появилась в результате работы команды программистов под началом Эндрю Эдди (команда, разработавшая также Mamba CMS). Вообще, Joomla не «заточена» специально под создание блогов и веб 2.0 сайтов в целом. Базируется на языке PHP с поддержкой MySQL. Движок достаточно известен и популярен среди владельцев сайтов, блоги на этой CMS создаются, но их не настолько много. Сама Joomla! более сложна в использовании и не подходит для новичков, особенно если это касается первоначальной настройки и настройки обновлений. Расширения выпускаются в больших объемах, скачать их можно на официальном сайте разработчиков.

(Официальный сайт - http://www.joomla.org/)

Drupal

Drupal - универсальный движок для создания сайтов любого типа. Блог на Drupal можно разбавить сообществом, форумом и другими расширениями. Построен на базе PHP. С помощью Drupal можно построить не только блог, но и небольшую социальную сеть. Бесплатных приложений к этому движку очень много, многие из них весьма полезны именно для блогов. Drupal - CMS сложная для простого пользователя. У программиста на php она не вызовет сложностей. Скачать Drupal и найти документацию по нему можно на http://drupal.org/

Textpattern

Бесплатный движок на PHP/MySQL. Подойдет для тех, кто не хочет «заморачиваться» по поводу многочисленных функций и настроек, сама настройка займет у пользователя не более получаса. На этой CMS создать блог еще проще, чем на Вордпрессе, правда, здесь придется учить либо язык разметки Textile для форматирования текста в самом интерфейсе движка, либо html, чтобы создавать и закачивать готовые страницы в блог. Поклонников Textpattern куда меньше, но расширений и тем к движку достаточно.

b2evolution

Как и все другие движки, описанные выше, b2evolution создан на языке PHP. CMS подходит для создания как одного блога, так и целой сети. Движок прост в использовании, в редакторе записей имеет минимальный набор настроек. Распространяется, разумеется, также бесплатно. К сожалению, плагинов у него очень немного - около 200 (по сравнению с 3700 у Joomla), скачать их можно в сообществе b2evolution.

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