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

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. Главное отличие этого движка от других – отсутствие отдельной админки, все управление проходит в пользовательском интерфейсе, на котором владельцу блога доступны дополнительные функции, которых достаточно много.

Приложение 2

Программный код, использовавшийся в практической части

Листинг 1.1 Перенаправление запросов к веб-сайту через файл index.php

(файл .htaccess)

RewriteEngine on

RewriteCond %{SCRIPT_FILENAME} !-f

RewriteCond %{SCRIPT_FILENAME} !-d

RewriteRule ^(.*)$ index.php/$1

Листинг 1.2 Обработка пользовательских запросов методами класса Zend-Controller (файл index.php)

<?php

require_once('Zend/Loader.php');

Zend_Loader::registerAutoload();

$controller = Zend_Controller_Front::getInstance();

$controller->setControllerDirectory($config->paths->base .

'/include/Controllers');

$controller->dispatch();

?>

Листинг 1.3 Контроллер index, используемый на главной странице веб-приложения (файл IndexController.php)

<?php

require_once('CustomControllerAction.php');

class IndexController extends CustomControllerAction

{

public function indexAction()

{

Echo’Будущий школьный сайт’;

}

}

?>

Листинг 1.4 Начальные настройки приложения (файл settings.ini)

[development]

database.type = pdo_mysql

database.hostname = localhost

database.username = phpweb20

database.password = myPassword

database.database = phpweb20

paths.base = /var/www/phpweb20

paths.data = /var/www/phpweb20/data

paths.templates = /var/www/phpweb20/templates

logging.file = /var/www/phpweb20/data/logs/debug.log

Листинг 1.5 Загрузка рабочих настроек приложения с использованием класса Zend_Config_Ini (файл index.php)

$config = new Zend_Config_Ini('../settings.ini', 'development');

Zend_Registry::set('config', $config);

$controller->setControllerDirectory($config->paths->base .

'/include/Controllers');

Листинг 1.6 Расширение Smarty для использования в веб-приложении

(файл Templater.php)

<?php

class Templater extends Zend_View_Abstract

{

protected $_path;

protected $_engine;

public function __construct()

{

$config = Zend_Registry::get('config');

require_once('Smarty/Smarty.class.php');

$this->_engine = new Smarty();

$this->_engine->template_dir = $config->paths->templates;

$this->_engine->compile_dir = sprintf('%s/tmp/templates_c',

$config->paths->data);

$this->_engine->plugins_dir = array($config->paths->base .

'/include/Templater/plugins',

'plugins');

}

public function getEngine()

{

return $this->_engine;

}

public function __set($key, $val)

{

$this->_engine->assign($key, $val);

}

public function __get($key)

{

return $this->_engine->get_template_vars($key);

}

public function __isset($key)

{

return $this->_engine->get_template_vars($key) !== null;

}

public function __unset($key)

{

$this->_engine->clear_assign($key);

}

 public function assign($spec, $value = null)

{

if (is_array($spec)) {

$this->_engine->assign($spec);

return;

}

$this->_engine->assign($spec, $value);

}

public function clearVars()

{

$this->_engine->clear_all_assign();

}

public function render($name)

{

return $this->_engine->fetch(strtolower($name));

}

public function _run()

{ }

}

?>

Листинг 1.7 Новый контроллер, выводящий файл index.tpl

(файл IndexController.php)

<?

class IndexController extends CustomControllerAction

{

public function indexAction()

{

}

}

?>

Листинг 1.8 Шаблон для операции index контроллера index

(файл index.tpl)

{include file='header.tpl'}

Будущий спортивный сайт школы

{include file='footer.tpl'}

Листинг 1.9 Файл заголовка HTML-страницы

(файл header.tpl)

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title>Title</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251 " />

</head>

<body>

<div>

Листинг 1.10 Файл конца страницы, в котором закрываются тэги, открытые в заголовке(файл footer.tpl)

</div>

</body>

</html>

Листинг 2.1 Загрузочный файл приложения с использованием компонента Zend_Auth (файл index.php)

// настройка утентификации пользователей

$auth = Zend_Auth::getInstance();

$auth->setStorage(new Zend_Auth_Storage_Session());

$controller->registerPlugin(new CustomControllerAclManager($auth));

Листинг 2.2 Подключаемый модуль CustomControllerAclManager, проверяющий допуски перед отправкой запроса на обработку

(файл CustomControllerAclManager.php)

<?php

class CustomControllerAclManager extends Zend_Controller_Plugin_Abstract

{

// роль по умолчанию, если не вошел (или роль не определена)

private $_defaultRole = 'guest';

// выполнить операцию, если у пользователя не хватает привилегий

private $_authController = array('controller' => 'account',

'action' => 'login');

public function __construct(Zend_Auth $auth)

{

$this->auth = $auth;

$this->acl = new Zend_Acl();

// добаляем новые роли

$this->acl->addRole(new Zend_Acl_Role($this->_defaultRole));

$this->acl->addRole(new Zend_Acl_Role('member'));

$this->acl->addRole(new Zend_Acl_Role('administrator'), 'member');

// добавляем контролируемые ресурсы

$this->acl->add(new Zend_Acl_Resource('account'));

$this->acl->add(new Zend_Acl_Resource('admin'));

// по умолчанию даем всемпользователям доступ ко всему

// кроме управления учетными записями и администрированием

$this->acl->allow();

$this->acl->deny(null, 'account');

$this->acl->deny(null, 'admin');

// добавляем исключение. чтобы гости могли войти или

// зарегистрироваться, если нет привилегий

$this->acl->allow('guest', 'account', array('login',

'fetchpassword',

'register',

'registercomplete'));

// позволяем зарегистрированным пользователям доступ к управлению учетными записями

$this->acl->allow('member', 'account');

// даем администраторам доступ в область администрирования

$this->acl->allow('administrator', 'admin');

}

/**

* preDispatch

*

* Прежде, чем отправлять запрос на обработку, проверяет есть ли у пользователя

* нужные привелегии. Если нет, инициирует операцию по умолчанию

*

*

* @param Zend_Controller_Request_Abstract $request

*/

public function preDispatch(Zend_Controller_Request_Abstract $request)

{

// проверка, вошел ли пользователь и имеет ли нужную роль

// если нет, то назначается роль по умолчанию (гость)

if ($this->auth->hasIdentity())

$role = $this->auth->getIdentity()->user_type;

else

$role = $this->_defaultRole;

if (!$this->acl->hasRole($role))

$role = $this->_defaultRole;

// контролируемый ресурс - имя запрашиваемого контроллера

$resource = $request->controller;

// привилегия - имя запрашиваемой операции

$privilege = $request->action;

// если ресурс не определен явно. проверить

// глобальные допуски по умолчанию

if (!$this->acl->has($resource))

$resource = null;

// в допуске отказано. Выполняется операция по умолчанию

if (!$this->acl->isAllowed($role, $resource, $privilege)) {

$request->setControllerName($this->_authController['controller']);

$request->setActionName($this->_authController['action']);

}

}

}

?>

Листинг 2.3 Первоначальная версия класса DatabaseObject_User

(файл user.php)

<?

class DatabaseObject_User extends DatabaseObject

{

static $userTypes = array('member' => 'Member',

'administrator' => 'Administrator');

public $profile = null;

public $_newPassword = null;

public function __construct($db)

{

parent::__construct($db, 'users', 'user_id');

$this->add('username');

$this->add('password');

$this->add('user_type', 'member');

$this->add('ts_created', time(), self::TYPE_TIMESTAMP);

$this->add('ts_last_login', null, self::TYPE_TIMESTAMP);

}

}

?>

Листинг 2.4 Полный текст класса FormProcessor_UserRegistration

(файл UserRegistration.php)

<?php

 class FormProcessor_UserRegistration extends FormProcessor

{

protected $db = null;

public $user = null;

public function __construct($db)

{

parent::__construct();

$this->db = $db;

$this->user = new DatabaseObject_User($db);

$this->user->type = 'member';

}

public function process(Zend_Controller_Request_Abstract $request)

{

// проверка правильности имени

$this->username = trim($request->getPost('username'));

if (strlen($this->username) == 0)

$this->addError('username', 'Please enter a username');

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