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

 

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

СОДЕРЖАНИЕ

ВВЕДЕНИЕ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ЗАКЛЮЧЕНИЕ

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

ВВЕДЕНИЕ

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

-й Международный симпозиум 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 - #"justify">·исследованы возможные способы реализации;

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

·просмотрено немалое число примеров и видов скриптов, реализованных при помощи библиотек и плагинов 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.2.Работоспособность в условиях массовых запросов

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

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

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

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

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

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

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

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

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

.1.Гибкость

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

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

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

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

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

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

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

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

·Моральное устаревание. Поскольку их разработка велась 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.

.скриптовый язык программирования общего назначения - 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;

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

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

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

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

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

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

§пауза;

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

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

код:

<div>

<div>

<ul>

<li>

<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 {: relative;: 314px;: 235px;: 0;: 0;style: none;}

.gallery ul.img-holder li {: absolute;: 0;: 0;index: 0;}

.gallery .img-holder .active {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({: 'div.img-holder li',: 2000,: true,: 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.

Имя поляТипОписаниеIdint(11)Уникальный номер записиloginchar(100)Логинpasswordchar(255)Парольlastnamechar(50)Фамилияnamechar(50)Имяotchestvochar(50)Отчествоdayint(2)Деньmouthchar(15)Месяцyearint(4)Годsexchar(20)Полemailchar(50)Электронная почтаcountrychar(50)Странаcitychar(50)ГородjoblongtextМесто работыpositionlongtextДолжностьdegreelongtextУченая степеньacademic_ranklongtextУченое званиеphonechar(20)Телефон(с кодом страны)hotelchar(10)Потребность в гостиницеvisachar(10)Потребность в визеattendantlongtextСопровождающее лицо(ФИО)banquetlongtextУчастие в банкетеexcursionslongtextУчастие в экскурсияхarrival_dayint(2)Дата приезда(день)arrival_mouthchar(15)Дата приезда(месяц)departure_dayint(2)Дата отъезда(день)departure_mouthchar(15)Дата отъезда(месяц)

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

Таблица 2.2.2.

Имя поляТипОписаниеidint(11)Уникальный номер записиname_tesislongtextНазвание тезисовtext_tesislongtextТекст тезисовfile_tesischar(255)Поле для записи файлов id_userint(11)Поле для записи участников,которые предоставляют тезисы

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

Таблица 2.2.3.

Имя поляТипОписаниеIdint(11)Уникальный номерNickchar(50)ЛогинPasswordchar(100)ПарольLastnamechar(100)ФамилияNamechar(100)ИмяOtchestvochar(100)ОтчествоDayint(2)ДеньMouthchar(50)МесяцYearint(4)ГодSexchar(50)ПолEmailchar(255)Электронная почтаCountrylongtextСтранаcitylongtextГородJoblongtextМесто работы

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 - файл, содержащий стили оформления главного меню на сайте;

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

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

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

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

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

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

.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 - #"justify">·исследованы возможные способы реализации;

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

·просмотрено немалое число примеров и видов скриптов, реализованных при помощи библиотек и плагинов 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: [Электронный ресурс]. - #"justify">2.Справка по API jQuery. Русская документация по jQuery: [Электронный ресурс]. - #"justify">.Электронный справочник по HTML и CSS: [Электронный справочник]. - #"justify">.Сайт W3C. Документация по XHTML, CSS: [Электронный ресурс]. - #"justify">.Сайт примеров по HTML, CSS, jQuery: [Электронный ресурс]. - #"justify">.Документация по JavaScript: [Электронный ресурс]. - #"justify">7.ShuBlog(дневник программиста): [Электронный ресурс]. - #"justify">.Документация по CSS3: [Электронный ресурс]. - #"justify">.С.П. Гололобова, Т.А. Иваньчева. Методическое пособие "В помощь дипломнику". Новосибирск: Издательство НГУ, 2009г. , 71 с.

.Википедия - свободная энциклопедия: [Электронный ресурс]. - #"justify">.Документация по PHP: [Электронный ресурс]. - http://www.php.su. [15.04.2011].

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

Больше работ по теме: