Разработка веб-сайта международного симпозиума SCAN 2012

Размещено на http://www.allbest.ru/

РАЗРАБОТКА ВЕБ-САЙТА МЕЖДУНАРОДНОГО СИМПОЗИУМА SCAN 2012



СОДЕРЖАНИЕ

• ВВЕДЕНИЕ
• 1. ПОСТАНОВКА ЗАДАЧИ
• 1.1 Описание предметной области
• 1.2 Постановка задачи
• 1.2.1 Общие требования
• 1.2.2 Функциональные требования
• 1.2.3 Требования качества и надежности
• 1.3 Анализ подобных веб-сайтов
• 1.4 Список используемых технологий и программных средств
• 2. РЕАЛИЗАЦИЯ
• 2.1 Исследовательская часть
• 2.1.2 Изучение взаимодействия скриптов и плагинов библиотеки jQuery
• 2.2 Описание структуры базы данных
• 2.3 Схема функционирования
• 2.4 Модульная архитектура проекта
• 2.5 Отладка и тестирование
• 2.6 Руководство пользователя
• ЗАКЛЮЧЕНИЕ
• СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ



ВВЕДЕНИЕ

Темой моего проекта является разработка и реализация веб-сайта международного симпозиума SCAN 2012.

15-й Международный симпозиум GAMM - IMACS по научным вычислениям, компьютерным арифметикам и доказательным численным методам SCAN-2012 пройдёт в Новосибирском Академгородке 23-29 сентября 2012 года.

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

Основной задачей моего дипломного проекта является создание веб-сайта международного симпозиума SCAN 2012.

Сайт разрабатывается средствами XHTML,PHP 5 и CSS(версии 1.2-3),при помощи библиотек JavaScript, jQuery.

Веб-сайт корректно отображается на таких браузерах как Mozilla, Google Chrome, Opera, Internet Explorer.

Пользователями разрабатываемого сайта будут, прежде всего, участники и гости международного симпозиума SCAN-2012, а также все интересующиеся данной отраслью знаний. В более широком контексте сайт имеет представительскую функцию и призван служить пропаганде идей интервального анализа, достижений сибирской школы прикладной математики и Новосибирского Академгородка.

Что касается новизны, то тут следует отметить, что для разработки использовались современные технологии веб-программирования.

В процессе выполнения проекта мной проделаны следующие виды работ:

· ознакомился с информационным сопровождением симпозиумов;

· найдены и рассмотрены существующие аналоги ( веб-сайт симпозиума SCAN 2008 - http://www.scan2008.com, веб-сайт симпозиума SCAN 2010 - http:/scan2010.ens-lyon.fr );

· исследованы возможные способы реализации;

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

· просмотрено немалое число примеров и видов скриптов, реализованных при помощи библиотек и плагинов jQuery;

· составлены общие требования, требования качества проектирования веб-интерфейсов;

· изучены технологии верстки и построения дизайна на тестах;

· реализованы все функции системы.

Во время разработки были использованы программные средства, такие как: веб сайт скрипт плагин

· среда разработки NetBeans IDE;

· графический редактор Adobe Photoshop CS3;

· web-браузеры - Internet Explorer 7.*, Google Chrome 4.*, Mozilla Firefox 3.*, Opera 10.*.



1. ПОСТАНОВКА ЗАДАЧИ

1.1 Описание предметной области

Настоящее мероприятие продолжает серию международных симпозиумов SCAN-XX, проводимых под совместным патронажем

· GAMM - International Association for Applied Mathematics and Mechanics (Международного общества прикладной математики и механики) и

· IMACS - International Association for Mathematics and Computers in Simulation (Международной ассоциации по математике и компьютерному моделированию).

Симпозиумы SCAN-XX традиционно охватывают широкий круг вопросов, связанных с научными вычислениями, причем особое внимание уделяется доказательности (гарантированности) получаемых результатов, а также разнообразным средствам для их получения. Конкретная тематика симпозиумов традиционно включает работы по интервальному анализу и его приложениям, компьютерным арифметикам, программным и языковым средствам.

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

· Базель, Швейцария (1989);

· Албена, Болгария (1990);

· Ольденбург, Германия (1991);

· Вена, Австрия (1993);

· Вупперталь, Германия (1995);

· Лион, Франция (1997);

· Будапешт, Венгрия (1998);

· Карлсруэ, Германия (2000);

· Париж, Франция (2002);

· Фукуока, Япония (2004);

· Дуйсбург, Германия (2006);

· Эль-Пасо, США (2008);

· Лион, Франция (2010).

1.2 Постановка задачи

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

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

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

· средства языка разметки XHTML[4] (Extensible Hypertext Markup Language);

· каскадные таблицы стилей CSS(CSS3)[3,4,8] (Cascading Style Sheets);

· средства объектного языка JavaScript[6], с подключением библиотек jQuery[1,2,5];

· скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений - PHP[11].

Во время реализации, поставленная задача была разбита на ряд подзадач сформированных следующим образом:

§ Изучение средств, представленных выше технологий;

§ Изучение самого контекста;

§ Разработка общего дизайна;

§ Создание каркаса сайта;

§ Наполнение страницы контекстом;

§ Тестирование на совместимость с наиболее распространёнными видами браузеров, такими как Mozilla Firefox 3.*, Google Chrome 4.*, Opera10.*.

1.2.1 Общие требования

Сформулируем общие требования:

· Создание привлекательного образа Новосибирска, Академгородка и симпозиума, в частности;

· Ясное и понятное представление основной информации о симпозиуме;

· Возможность регистрации участников симпозиума и их представления ими материалов через сайт.

1.2.2 Функциональные требования

Сформулируем следующие функциональные требования к создаваемому сайту:

Администратор:

§ Ведение детальных списков пользователей вместе с их личной информацией и служебной информацией конференции;

§ Редактирование пользователей сайта;

§ Редактирование информации, предоставленной пользователем.

Пользователь:

§ Просмотр общей информации о конференции на веб-сайте;

§ Добавление и редактирование информации о себе

(личных сведений, тезисов, докладов).

Гость:

§ Просмотр общей информации на веб-сайте.

1.2.3 Требования качества и надежности

К созданному сайту были предъявлены следующие качественные требования:

1. Надежность

1.1. Устойчивость функционирования

1.2. Работоспособность в условиях массовых запросов

2. Показатели сопровождения

2.1. Структурность

2.2. Относительная несложность конструкций

2.3. Наглядность

3. Показатели удобства применения

3.1. Легкость освоения

3.2. Показатели эффективности

3.3. Ресурсоемкость

4. Показатели универсальности

4.1. Гибкость

4.2. Модифицируемость

1.3 Анализ подобных веб-сайтов

Было рассмотрено два существующих аналога:

1. Веб-сайт симпозиума SCAN 2008 (Sept 29 - Oct 3, 2008);

http://www.scan2008.com/ (см. на рис. 1.3.1.)

2. Веб-сайт симпозиума SCAN 2010 (Sept 27-30, 2010)

http://scan2010.ens-lyon.fr/ (см. на рис. 1.3.2.)

Оба этих сайта имеют схожее содержание. Разница заключается во внешнем оформлении и пользовательском интерфейсе.

В качестве ключевых особенностей данных продуктов следует выделить:

· Простой и интуитивно понятный интерфейс;

· Моральное устаревание. Поскольку их разработка велась 2-3 года назад, то многие элементы данных программ существенно устарели;

· Веб-сайт симпозиума SCAN 2008 не предусматривает регистрацию.

Рис. 1.3.1.

Рис. 1.3.2.



Среди этих аналогов, данный проект наиболее соизмерим с веб-сайтами, реализованными с применением современных веб-технологий (XHTML, jQuery, CSS3).

1.4 Список используемых технологий и программных средств

В процессе реализации были применимы следующие технологии и программные средства:

1. язык гипертекстовой разметки - XHTML[4] (Extensible Hypertext Markup Language);

XHTML - язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML.

2. каскадные таблицы стилей - CSS3[8] (Cascading Style Sheets);

CSS[3,4] - технология описания внешнего вида документа, написанного языком разметки. CSS используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате, включая XML и XVL.

3. скриптовый язык программирования общего назначения - PHP5[11] (Hypertext Preprocessor);

PHP - язык написания скриптов, которые встраиваются непосредственно в гипертекстовые файлы и исполняются на Web-сервере.

4. средства скриптового языка - JavaScript[6];

JavaScript - скриптовый язык объектно-ориентированного программирования. JavaScript обычно используется как встраиваемое средство выполнения данных. В веб-программирование JavaScript применим в качестве средства динамического изменения веб-страницы.

5. средства jQuery 1.3.1[1,2,5];

jQuery - библиотека JavaScript, производящая взаимодействия с HTML файлами. Библиотека jQuery позволяет легко взаимодействовать и манипулировать с элементами DOM (Document Object Model - объектная модель документа). Также библиотека jQuery предоставляет удобный интерфейс прикладного программирования (API - Application Programming Interface) для взаимодействия с AJAX (Asynchronous JavaScript and XML).

6. Adobe Photoshop CS3;

Adobe Photoshop - графический редактор, разработанный компанией Adobe, в основном предназначенный для редактирования фотографий, но является незаменимым для создания дизайна в веб-разработке.

7. среда разработки NetBeans IDE;

NetBeans IDE - свободная интегрированная среда разработки приложений IDE (Integrated Development Environment) на языках программирования Java, JavaFX, Ruby, Python, PHP, JavaScript, C++ и ряда других языков.



2. РЕАЛИЗАЦИЯ

2.1 Исследовательская часть

Исследование составляет немалую часть моего дипломного проекта. Так как для разработки проекта используются на сегодняшний день современные технологии веб-программирования. В частности было произведено:

· Изучение языка разметки веб-страниц - XHTML;

· Изучение технологии описания внешнего вида документа - CSS3;

· Изучение скриптового языка общего назначения - PHP5;

· Изучение скриптового языка объектно-ориентированного программирования - JavaScript;

· Изучение взаимодействия скриптов и плагинов библиотеки jQuery;

· нахождение оптимального варианта отображения среди средств, перечисленных выше технологий.

2.1.1 Изучение взаимодействия скриптов и плагинов библиотеки jQuery

jQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими.

Плагин, который я подключил имеет следующие функции:

§ возможность автоматического переключения картинок(использовал именно эту функцию для реализации слайд-шоу);

§ переключение картинок при помощи навигации;

§ пауза;

§ отображение в слайдах не только картинок, но и различный контент;

§ отображение номера текущего слайда.

HTML код:

<div class="slide">

<div class="gallery gallery2">

<ul class="img-holder">

<li class="active">

<img src="images/1nsk.jpg" alt="" />

</li>

<li>

<img src="images/2nsk.jpg" alt="" />

</li>

<li>

<img src="images/3nsk.jpg" alt="" />

</li>

</ul>

</div>

</div>

Соответственно для этого кода я применил такие CSS свойства:

gallery .img-holder {

position: relative;

width: 314px;

height: 235px;

margin: 0;

padding: 0;

list-style: none;}

.gallery ul.img-holder li {

position: absolute;

top: 0;

left: 0;

z-index: 0;}

.gallery .img-holder .active {

z-index: 1;}

Для активного элемента я поставил z-index:1, а для остальных z-index:0, это сделано для того чтобы при загрузке сайта лежала первая картинка, а не последняя.

На данный момент прокручивается 31 фото с видами Новосибирска.

Подключение и настройка плагина:

Для работы плагина подключил два скрипта, файл основной библиотеки jQuery (начиная с версии 1.2.*), скрипт jquery.slideShow, а также сделал инициализацию плагина:

<script type="text/javascript" src="js/jquery-1.3.1.pack.js"></script>

<script type="text/javascript" src="js/jquery.slideShow.js"></script>

<script type="text/javascript">

$(document).ready(function(){

/* инициализация плагина при загрузки DOM документа */

$('.gallery').slideShow({

slideEl: 'div.img-holder li',

duration: 2000,

autoSlideShow: true,

switchTime: 5000});

});

</script>



§ $(`.gallery').slideShow() - в качестве главного объекта, для слайд-шоу, указывается селектор главного родителя;

§ slideEl - параметр в который передается селектор слайда;

§ duration - время fade эффекта (1000 - 1сек);

§ autoSlideShow - Булево значение, которое включает autoslide;

§ switchTime - время переключения между слайдами (1000 - 1сек).

2.2 Описание структуры базы данных

Для реализации работы сценариев необходимо было сделать хранение данных. В соответствии с технологическим заданием хранение данных предусмотрено посредством СУБД MySQL.

В данном проекте используется база данных Scan, в которой содержится 3 таблицы:

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

Таблица 2.2.1.

Имя поля	Тип	Описание
Id	int(11)	Уникальный номер записи
login	char(100)	Логин
password	char(255)	Пароль
lastname	char(50)	Фамилия
name	char(50)	Имя
otchestvo	char(50)	Отчество
day	int(2)	День
mouth	char(15)	Месяц
year	int(4)	Год
sex	char(20)	Пол
email	char(50)	Электронная почта
country	char(50)	Страна
city	char(50)	Город
job	longtext	Место работы
position	longtext	Должность
degree	longtext	Ученая степень
academic_rank	longtext	Ученое звание
phone	char(20)	Телефон(с кодом страны)
hotel	char(10)	Потребность в гостинице
visa	char(10)	Потребность в визе
attendant	longtext	Сопровождающее лицо(ФИО)
banquet	longtext	Участие в банкете
excursions	longtext	Участие в экскурсиях
arrival_day	int(2)	Дата приезда(день)
arrival_mouth	char(15)	Дата приезда(месяц)
departure_day	int(2)	Дата отъезда(день)
departure_mouth	char(15)	Дата отъезда(месяц)

2) Tesis(см.Таб.2.2.2.) - таблица для хранения информации, предоставленной участниками симпозиума.

Таблица 2.2.2.

Имя поля	Тип	Описание
id	int(11)	Уникальный номер записи
name_tesis	longtext	Название тезисов
text_tesis	longtext	Текст тезисов
file_tesis	char(255)	Поле для записи файлов
id_user	int(11)	Поле для записи участников,которые предоставляют тезисы

3) Users(см.Таб.2.2.3.) - таблица в которой хранятся данные об администраторе.

Таблица 2.2.3.

Имя поля	Тип	Описание
Id	int(11)	Уникальный номер
Nick	char(50)	Логин
Password	char(100)	Пароль
Lastname	char(100)	Фамилия
Name	char(100)	Имя
Otchestvo	char(100)	Отчество
Day	int(2)	День
Mouth	char(50)	Месяц
Year	int(4)	Год
Sex	char(50)	Пол
Email	char(255)	Электронная почта
Country	longtext	Страна
city	longtext	Город
Job	longtext	Место работы

2.3 Схема функционирования

Схема функционирования веб-сайта заключается в следующем. У нас имеется html-файл index.html, который является основным файлом отображения веб-страницы. К этому файлу подключены библиотеки jquery.slideShow.js и jquery-1.3.1.pack.js, файлы стилей css(css3).

Ниже приведена графическая блок-схема функционирования (см. рис. 2.3.1.).

Рис. 2.3.1.



2.4 Модульная архитектура проекта

Ниже представлен список, используемых мною модулей, необходимых для решения поставленной задачи:

1. index.html - основной файл, содержащий в себе весь контекст сайта;

2. style.css - файл, содержащий стили оформления;

3. slide.css - файл, содержащий стили оформления слайд-шоу;

4. menu.css - файл, содержащий стили оформления главного меню на сайте;

5. regform.html - файл,содержащий форму для регистрации участников симпозиума;

6. connect.php - файл для подключния к базе данных и некоторых функций для веб-сайта;

7. participants.php - файл,который отображает всех участников данного сайта;

8. edituser.php - файл для редактирования информации об участниках и администраторе;

9. vxod.html - файл,содержащий форму для входа пользователей,а также администратора;

10. jQuery.slideShow.js - библиотека, содержащая данные, имитирующие работу слайд-шоу с видами Новосибирска;

11. jquery-1.3.1.pack.js - библиотека, также отвечающая за работу слайд-шоу.

2.5 Отладка и тестирование

Отладка и тестирование данного веб-сайта включает следующее:

§ проверка соответствия результата проекту сайта;

§ тестирование корректности работы функционалов и программ;

§ тестирование интерактивных функционалов на предмет предоставления заведомо невыполнимых условий (т.н. "проверка на дурака");

§ тестирование корректности XHTML-верстки в различных браузерах под различными операционными системами и на различных разрешениях экрана;

§ тестирование удобства представления информации на сайте, системы навигации, структурирования информации (usability-тестирование).

2.6 Руководство пользователя

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

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

На рисунке 2.4.1. изображена главная страница веб-сайта(index.html),на которой содержится вся информация о предстоящем международном симпозиуме.

Рис. 2.4.1.



В системе существуют три группы пользователей:

§ Администратор;

К этой группе относятся администраторы сайта (один или несколько). Пользователи данной группы имеют полный доступ к управлению сайтом и всеми остальными пользователями сайта.

§ Пользователь;

Каждый зарегистрированный пользователь сайта обладает уникальными идентификационными данными: логином и паролем (см. на рис.2.4.2.). После авторизации в системе (ввода логина и пароля в специальную форму авторизации рис. 2.4.3.) пользователь получает доступ к ресурсам сайта в соответствии с уровнем прав его группы (добавление тезисов докладов и т.п.).

Рис. 2.4.2.



Рис. 2.4.3.

§ Гость;

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



ЗАКЛЮЧЕНИЕ

Поставленная задача создания веб-сайта SCAN(2012) выполнена полностью.

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

Пользователями разрабатываемого сайта будут, прежде всего, участники и гости международного симпозиума SCAN-2012, а также все интересующиеся данной отраслью знаний. В более широком контексте сайт имеет представительскую функцию и призван служить пропаганде идей интервального анализа, достижений сибирской школы прикладной математики и Новосибирского Академгородка.

Во время выполнения работы были достигнуты следующие действия:

· Ознакомился с информационным сопровождением симпозиумов;

· найдены и рассмотрены существующие аналоги ( веб-сайт симпозиума SCAN 2008 - http://www.scan2008.com, веб-сайт симпозиума SCAN 2010 - http:/scan2010.ens-lyon.fr );

· исследованы возможные способы реализации;

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

· просмотрено немалое число примеров и видов скриптов, реализованных при помощи библиотек и плагинов jQuery;

· составлены общие требования, требования качества проектирования веб-интерфейсов;

· изучены технологии верстки и построения дизайна на тестах;

· реализованы все функции системы.

Во время разработки были использованы программные средства, такие как:

· среда разработки NetBeans IDE;

· средства языка разметки - XHTML (Extensible Hypertext Markup Language);

· каскадные таблицы стилей - CSS (Cascading Style Sheets);

· скриптовый язык программирования общего назначения - PHP;

· средства объектного языка - JavaScript, с подключением библиотек jQuery;

· графический редактор Adobe Photoshop CS3;

· web-браузеры - Internet Explorer 7.*, Google Chrome 4.*, Mozilla Firefox 3.*, Opera 10.*.



СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ

1. Официальный сайт jQuery. Сайт о функциональном представление библиотеки javascript jQuery: [Электронный ресурс]. - http://jquery.com. [11.10.2010]

2. Справка по API jQuery. Русская документация по jQuery: [Электронный ресурс]. - http://jquery-docs.ru. [18.10.2010]

3. Электронный справочник по HTML и CSS: [Электронный справочник]. - http://htmlbook.ru. [9.11.2010]

4. Сайт W3C. Документация по XHTML, CSS: [Электронный ресурс]. - http://www.w3.org. [25.11.2010]

5. Сайт примеров по HTML, CSS, jQuery: [Электронный ресурс]. - http://linkexchanger.su. [17.01.2011]

6. Документация по JavaScript: [Электронный ресурс]. - http://javascript.ru/ [4.02.2011]

7. ShuBlog(дневник программиста): [Электронный ресурс]. - http://shublog.ru. [12.03.2011]

8. Документация по CSS3: [Электронный ресурс]. - http://www.css3.info. [8.02.2011]

9. С.П. Гололобова, Т.А. Иваньчева. Методическое пособие "В помощь дипломнику". Новосибирск: Издательство НГУ, 2009г. , 71 с.

10. Википедия - свободная энциклопедия: [Электронный ресурс]. - http://wikipedia.org. [5.04.2011]

11. Документация по PHP: [Электронный ресурс]. - http://www.php.su. [15.04.2011].

Размещено на Allbest.ru