ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ

Федеральное государственное бюджетное образовательное

учреждение высшего профессионального образования

«Национальный исследовательский ядерный университет «МИФИ»

ОБНИНСКИЙ ИНСТИТУТ АТОМНОЙ ЭНЕРГЕТИКИ

Факультет кибернетики

Кафедра КССТ

Итоговый отчет по курсовой работе

Web-публикация графического контента AutoCAD Map 3D с использованием технологии ajax и flash

Выполнили студент гр. ВТ1-С07: Лысенко Д.

Родионов А.

Оникиенко Д.

Мужичков Р.

Руководитель:

Ст.преподаватель _________ Тельнов В. П.

Г. Обнинск, 2011г Оглавление

1.Введение 3

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

1.2.Исходные данные 6

1.3.Используемые языки, технологии, framework, toolkit 6

2.Обзорный реферат по изученному материалу 7

2.1.Технология ajax 7

2.2.PHPBB и Wordpress 8

2.3.Toolkit dojo 10

3.Распределение работ 15

4.Спецификация требований к ПО 17

4.1.Диаграммы прецедентов и сценарии к ним 18

4.1.1.Мастер публикаций AutoCAD 18

4.1.2.Приложение для работы с веб-сервисом Google( Picasa) 23

5.Разработанные UML диаграммы 25

5.1.Диаграмма последовательности работы мастера Autodesk для создания публикаций. 25

5.2.Диаграмма последовательности работы веб приложения для работы с сервисом Google 25

5.3.Диаграмма развертывания приложения 26

5.4.Диаграмма компонентов для работы с web-сервисом Google 26

6.Тестирование 27

6.1.Тестирование шаблона с dojo виджетом 27

6.2.Тестирование шаблона Array of Thumbnails 32

7.Руководство пользователя 36

8.Демонстрационный пример 39

8.1.Работа с web сервисом Picasa 39

8.2.Работа с мастером публикаций 43

Приложение 49

1.1.Код list of drawings.js 49

1.2.Код adsk_ptw_image_and_idrop.js 51

1.3.Код List of drawings.htm 53

1.4.Код array_of_thumbnails.js 54

1.5.Код Array of Thumbnails.htm 56

1.6.Шаблон с dojo виджетом 57

1.7.Код приложения для работы с web сервисом Google 60

1. Введение

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

      1. Карты и чертежи, созданные в AutoCAD Map 3D можно сохранить в формате HTML для отображения в виде статической веб-страницы. Далее эти страницы можно просматривать с помощью браузера Internet Explorer. Для создания публикаций используется мастер. В процессе работы мастера генерируется xml файл, который содержит название страниц, описание изображений, название изображений. После этого Javascript файл парсит это xml файл и заполняет HTML форму. Однако у этого решения есть ряд недостатков:

• Отсутствует кроссбраузерность

Вид страницы, полученной с помощью мастера создания публикации в браузере Internet explorer 8.0:

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

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

Вид страницы, полученной с помощью мастера создания публикации в браузере Mozilla firefox 6:

Вид страницы, полученной с помощью мастера создания публикации в браузере Google chrome 12

Таким образом, полученную web-страницу корректно отображает только браузер Internet Explorer.

• Создаются статические странице на основе фреймов, табличной верстки и гиперссылок, что является устаревшей технологией.

• Если страница содержит несколько чертежей, то все они сразу грузятся на страницу, вне зависимости от того какой чертеж нужен в данный момент.

• Система навигации выполнена с помощью примитивных гиперссылок.

• Дизайн web-страниц оставляет желать лучшего.

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

1. Выполнить публикацию чертежей AutoCad с помощью web сервиса Google (Picasa). Организовать передачу файлов с сервиса Picasa на разработанное приложение. Для просмотра изображений использовать флэш анимацию flashxml.net.

2. Сайт кафедры сделан с помощью PHPBB, а сайт кафедры с помощью cms wordpress. У каждой системы есть своя база данных для регистрации пользователей. Необходимо выполнить интеграцию этих БД, для того чтобы зарегистрировавшись на сайте, можно было пользоваться форумом и наоборот.

1. Исходные данные

   1. Исходные коды для шаблонов публикаций и javascript коды.

   2. Программный продукт Autodesk AutoCAD Map 3D Enterprise 2012.

2. Используемые языки, технологии, framework, toolkit

Языки___________________________JavaScript, PHP, HTML, CSS, UML

Инструмент проектирования________Visual Paradigm

Технологии_______________________AJAX

Toolkit___________________________dojo

Сервер___________________________Apache

Управление проектом______________MS Project

2. Обзорный реферат по изученному материалу

1. Технология ajax

AJAX (Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных, веб-страница не перезагружается полностью, и веб-приложения становятся более быстрыми и удобными.

Технологий. AJAX базируется на двух основных принципах:

• использование технологии динамического обращения к серверу «на лету», без перезагрузки всей страницы полностью, например:

с использованием XMLHttpRequest (основной объект);

через динамическое создание дочерних фреймов;

через динамическое создание тега <script>.

• использование DHTML для динамического изменения содержания страницы;

В качестве формата передачи данных обычно используются JSON или XML.

Преимущества

• Экономия трафика

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

• Уменьшение нагрузки на сервер

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

• Ускорение реакции интерфейса

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

Недостатки

• Отсутствие интеграции со стандартными инструментами браузера

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

• Другой недостаток изменения содержимого страницы при постоянном URL заключается в невозможности сохранения закладки на желаемый материал. Частично решить эти проблемы можно с помощью динамического изменения идентификатора фрагмента (части URL после #), что позволяют многие браузеры.

• Динамически загружаемое содержимое недоступно поисковикам (если не проверять запрос, обычный он или XMLHttpRequest)

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

• Старые методы учёта статистики сайтов становятся неактуальными

Многие сервисы статистики ведут учёт просмотров новых страниц сайта. Для сайтов, страницы которых широко используют AJAX, такая статистика теряет актуальность.

• Усложнение проекта

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

• Требуется включенный JavaScript в браузере.

Существует множество библиотек для работы с AJAX:

• AJAX.OOP — JavaScript фреймворк;

• ASP.NET AJAX — библиотека классов JavaScript, библиотека элементов управления для ASP.NET;

• Dojo — многофункциональный JavaScript инструментарий;

jQuery — JavaScript библиотека

2. PHPBB и Wordpress

Немного о WordPress.

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

Благодаря тому, что программный код открыт, CMS WordPress постоянно исправляется, изменяется, а, значит, становится совершенней. За период с 2003 по настоящее время выпущено 13 версий программы. Последняя версия появилась совсем недавно: 17 июля 2010 года.

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

Обновления программы происходят очень часто. Так, уже через 42 дня после появления новой версии было выпущено техническое обновлениеWordPress 3.0.1. Программу можно скачивать на сайте или обновлять автоматически через меню. Скачать обновления и новые локализованные версии для России, а также получить поддержку можно на сайтах myWordPress.ru mywordpress.ru и WordPress Россия ru.wordpress.org. 

Чем же объясняется такая популярность WordPress? Эта программа рассчитана на различные запросы пользователей интернета. С её помощью можно создавать не только простые блоги, но и проекты различной направленности: от новостных сайтов до интернет-магазинов. Архитектура программы со встроенными плагинами и темами предоставляет возможность разрабатывать и воплощать в жизнь самые фантастические проекты.

У программы масса плюсов. Она подходит как для профессионалов, так и для новичков, поскольку легко настраивается и проста в использовании. Преимуществом WordPress является и то, что без знания вёрстки и PHP можно с помощью встроенных плагинов и шаблонов создать дизайн на свой вкус и сделать свой ресурс функциональным. А благодаря тому, что масса неравнодушных людей ежедневно вносит изменения и создаёт новые дополнения к программе, возможности блога на WordPress будут постоянно расти. Программа не создаёт большой нагрузки на сервер, так как движок программы оптимизирован.

Конечно, существуют и минусы в использовании CMS WordPress: 1. Создатели блогов и сайтов могут использовать одинаковые шаблоны. Это приводит к тому, что появляются ресурсы-близнецы.  2. Так как WordPress популярен, сайты часто взламывают хакеры и слишком много появляется СПАМа в комментариях.  3. Некоторые отмечают, что неудобно использовать массу плагинов для того, чтобы сайт работал эффективно. К тому же при избыточном количестве плагинов обращение к базе данных усложняется, что приводит к повышению нагрузки на сервер. Тем не менее, пользователи интернета отдают предпочтение WordPress. Об этом свидетельствует тот факт, что за 42 дня новую версию CMS скачали 11 миллионов человек, а в рейтинге бесплатных систем управления контентом WordPress занимает пятое место.

Немного о phpBB3.

Самый популярный бесплатный веб-форум со свободным исходным кодом, разработанный на скриптовом языке PHP, поддерживающий различные СУБД, включая MySQL, PostgreSQL, MS SQL Server, MS Access,SQLite, а также Oracle (при наличии необходимых изменений).

Кроме поддержки различных СУБД достоинствами phpBB являются:

1. Несложная в использовании система шаблонов.

2. Многоязычный интерфейс: языковые файлы переведены на более чем 50 языков и доступны для свободного скачивания с официального сайта phpBB.

3. Большое сообщество пользователей, готовых прийти на помощь.

4. Большое количество доступных и обновляемых модификаций.

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

3. Toolkit dojo

Dojo Toolkit — это AJAX фреймворк, поддерживаемый группой Dojo Fundation (некоммерческая организация, созданная для продвижения Dojo). Разработка библиотеки была начата Алексом Расселом в 2004 году с целью упростить ускоренную разработку основанных на JavaScript или AJAX приложений и сайтов. Библиотека содержит практически все, что вам может потребоваться — от простых функций манипуляций с DOM до работы с Jabber-сервером. При этом, базовое ядро Dojo (в компрессированном виде - около 100 Kb). Остальной функционал доступен опционально, и его можно подключать по мере необходимости, шаг за шагом. Разумеется, у новичка, увидевшего размер полного дистрибутива (более 22 Mb) глаза из орбит могут вылезть. Однако, не стоит пугаться, ведь начать использовать Dojo в своем проекте очень легко - достаточно подключить один единственный файл dojo.js. Кстати, можно даже не копировать ничего на сервер - Dojo доступен через AOL CDN.

Тип: JavaScript toolkit

Разработчик: Dojo Foundation

Написана на: JavaScript

ОС: Кроссплатформенное

Лицензия: BSD License and the Academic Free License

Оф. Сайт: http: //dojotoolkit. Org

Dojo — это AJAX фреймворк. А посему, в Dojo реализована одна из важных особенностей AJAX-приложений - асинхронная связь клиент-сервер (обмен информацией), благодаря чему вид страницы обновляется без перезагрузки. В JavaScript для этой цели создается объект XMLHttpRequest. Dojo предоставляет в руки разработчику мощный класс-«обертку» (dojo.io.bind), позволяющий абстрагироваться от различных реализаций XMLHttpRequest в браузерах. Этот инструмент позволяет до смешного просто создавать приложения, передающие вводимые пользователем данные на сервер.

Привлекательный интерфейс - 50% успеха в продвижении сайта. Если пользователю приятно работать с предложенным интерфейсом, когда присутствуют элементы игры (мы ведь все родом из детства), тогда с болшой долей вероятности, "гость" станет вашим "зарегистрированным пользователем".

Что с этой целью может предложить Dojo вэб-дизайнеру?

Элементы интерфейса dojo — это пакеты (виджеты), включающие все необходимые компоненты: JavaScript-код, HTML-разметку и стили (CSS). Их легко и просто использовать для добавления различных интерактивных возможностей:

- меню, закладок, всплывающих подсказок;

- селекторов даты и времени; часов;

- сортируемых таблиц, динамических диаграмм, векторной 2D и 3D графики;

- структур интерфейса типа «дерево», с возможностями drag-and-;

- Rich Text Editor;

- различных HTML-форм с возможностью проверки ввода;

- анимации, и возможностей построения своих собственных эффектов.

И еще, и еще...

Ядро Dojo само по себе довольно функциональное (не считая дополнительных библиотек и прочих Dijit, Dojox):

Определение имени и версии браузера

Кодирование/декодирование JSON

Загрузка пакетов

Мощная поддержка AJAX

Механизм событий

Поддержка анимации

Поддержка асинхронного программирования

Движок высокопроизводительного языка запросов CSS3

Языковые параметры

Возможность работы с CSS

Поддержка ООП

Защита от утечки памяти

Интеграция в FireBug

Один из сильных плюсов в Dojo – это механизм отладки, связанный с FireBug. Если Firebug выключен, Dojo создаст как бы консольное окно в браузере под всем контентом и будет выводить туда построчно отладочные сообщения, которые мы будем посылать, или которые будут генерироваться самим Dojo. Если же FireBug включен, Dojo не будет создавать консольное окно, а будет выводить все отладочные сообщения прям в FireBug. Очень удобно.

Недавно внедренные изменения в библиотеке Dojo

Dojo core.

Обновлён модуль работы с событиями клавиатуры, теперь мы можем перехватывать нажатия любых клавиш, даже специальных и обрабатывать их в своём приложении, также исправлены некоторые баги. Модуль детектирования платформы потерпел изменения — теперь нужно проверять отдельные свойства (dojo.isIE, dojo.isFF, dojo.isSafari) для определения платформы, аналогично сделано в другом фреймворке, нашем любимом ExtJS. Кроме этих основных платформ, Dojo поддерживает работу (и автоматически определяет и использует специфический код) и в среде Rhino, Jaxer, Spaydermonkey ну и, конечно, все браузерные платформы, среду Adobe Air и, отдельно выделена поддержка Google Gears. Отмечу, что некоторые компоненты или возможности доступны только на определённых платформах, поэтому Dojo сначала детектирует глобально, запущен он в среде браузера или другим способом.

Обновлена поддержка многоязычности и локалей, оказалось, что за модулем cldr скрывается данные от сервиса Common Locale Data Repository (http://unicode.org/cldr), который предоставляет различные языковые данные в кодировке Unicode для множества языков. Теперь Dojo использует версию 1.6, которая для работы с составе фреймворка была сильно трансформирована в нужный внутренний формат (подробнее в Readme в директории компонента). На основе Dojo многие компании делают серьёзные проекты, рассчитанные на мировой рынок, и там локализация будет как нельзя кстати.

Значительно изменён модуль, отвечающий за конфигурацию при загрузке (djConfig.addOnLoad) и позволяющий выполнять пользовательский код после инициализации фреймворка, теперь даже если Dojo подгружается после загрузки страницы и позволяет исполнять как указанный код, функции, так и методы объектов — по сути, любой возможный вариант теперь может быть использован.

Изменения коснулись и режима отладки, теперь перехват ошибок (try/catch) работает корректно во всех модулях и калл-бек функциях, прерывая исполнение кода для отладки при возникновении ошибки, а если режим отладки отключён, то ошибка направляется в лог.

Dijit

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

Dojox

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

Приятно удивил и компонент для работы с цветом dojox.Color, который теперь может преобразовывать цвета используя различные цветовые модели — RGB, CMYK/CMY и HSL/HSV.

dojox.gfx дает нам самые широкие возможности в плане работы с графикой, теперь имеет возможность работы с векторной графикой формата SVG и, в частности, загружать и использовать шрифты этого формата. Также значительно переписан рендер, использующий возможности плагина MS Silverlight и не требует теперь сторонних библиотек.

Значительно обновлён компонент для работы с HTML, dojox.html, который теперь делать почти все что угодно с HTML и CSS программным образом, а его возможности используют другие компоненты, тот жеgfx.

В пакете Dojox не только различные невизуальные компоненты, но и виджеты, пока не вошедшие в стандартный пакет Dijit, но которые могут пригодится при создании сложных интерфейсов. Здесь есть и визуальный WYSIWYG-редактор с возможностью создания и редактирования таблиц и работой с загружаемыми изображениями, и компонент таблицы (dojox.Grid), который значительно похорошел с предыдущих версий, обзавелся тесной интеграцией с компонентами для работы с данными (dojo.data) и множество улучшений. Так как это самый часто используемый компонент из сложных ajax-виджетов (не считая редакторов), то изменения будут полезны для всех, кто использует таблицы в своих приложениях. Тем более, указывается, что сохранена обратная совместимость с предыдущими версиями.

Кстати, анонсировано, что в будущем компонент для работы с изображениями dojox.image будет работать с компонентами работы с данными, вероятно, мы сможем загружать изображения как и другие данные, через универсальный API.