4.3.2.1. Пример html-кодасформированного сус до входа пользователя в систему
Если СУС «Цифровая библиотека» была установлена на веб-сервер сети и правильно настроена, то простой переход из браузера с любого подключённого к этой сети компьютера по адресу: http://<имя сервера>/<директория СУС>, выдастHTML-код главной страницы (index) СУС вместе с содержимым этой страницы. Если пользователь выполнил вход в систему, то содержимое вHTML-коде странице будет загружено из базы данных. ВесьPHP-код будет вырезан как и должно а в качестве стиля будет загружен стиль по умолчанию установленный при установке или настройке СУС.
Ниже приведён кусочек сгенерированногоHTML-кодаглавной страницы СУС:index, содержащего толькоHTML-тэгииJavaScript-код(уже безPHP-кода):
Рис. 4. 8. Просмотр сгенерированногоHTML-кода страницыindex(«Главная страница» СУС), используя расширенный текстовый редакторUltraEditTextEditor
Рис. 4. 9. Отображениеэтойжестраницыindex(«Главная страница»СУС) браузере, используетсябраузерInternetExplorer 9
4.3.3. ИспользованиекаскадныхтаблицстилейCss 3
CSS(англ.CascadingStyleSheets— «каскадныетаблицыстилей») — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTMLиXHTML, но может также применяться к любымXML-документам. Файлы стилей обычно хранятся вCSS-файлахне содержащих ниHTML, ниPHPи ниJavaScript-кода.
Применимо к СУС «Цифровая библиотека», каскадные таблицы стилей играют огромнейшую роль и отвечают за оформление абсолютно всего, что видит пользователь системы или администратор панели управления. Фактически, это основа обоих интерфейсов системы.
Для административной панели управления, файл стилей style.phpхранится в директорииadmin\template\и не является напрямую файлом*.css, хотя и содержит все необходимые атрибуты таблиц переопределения стилейHTML-тэгов.
Для пользовательского интерфейса (основной темы оформления) существует один файл стилей style.cssв директорииtheme\dLTheme\.
Для пользовательского интерфейса (темы оформления режима «под печать») существует один файл стилей style.cssв директорииtheme\Print\.
Для пользовательского интерфейса подсистемы общения также существует один файл стилей qa.cssв директорииadmin\qa\css\.
4.3.4. Использование скриптов JavaScript
JavaScript— прототипно-ориентированныйскриптовыйязык программирования. Является диалектом языкаECMAScript.
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивностивеб-страницам.
JavaScript используется в клиентской части веб-приложений: клиент-серверных программ, в котором клиентом выступает браузер, а сервером — веб-сервер, имеющих распределённую между сервером и клиентом логику. Обмен информацией в веб-приложениях происходит по сети. Одним из преимуществ такого подхода является тот факт, что клиенты не зависят от конкретной операционной системы пользователя, поэтому веб-приложения являются кроссплатформенными сервисами.
JavaScript используется в AJAX(англ.AsynchronousJavascriptandXML— «асинхронный JavaScript и XML»), популярном подходе к построению интерактивных пользовательских интерфейсов веб-приложений, заключающемся в «фоновом» асинхронном обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью и интерфейс веб-приложения становится быстрее, чем это происходит при традиционном подходе (без применения AJAX).
Основные архитектурные черты: динамическая типизация,слабая типизация,автоматическое управление памятью,прототипное программирование,функциикакобъекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.
Название «JavaScript» является зарегистрированным товарным знакомкорпорации Oracle Corporation.
Применимо к СУС «Цифровая библиотека», JavaScriptиспользуется везде и почти каждая страница каким-либо образом использует какой-либо скрипт или возможностьJavaScript. КодJavaScriptрасположен в файлах системы как внутри страницы (специальныйHTML-тэг), так и внутриHTML-тэга. Разумеется, есть и отдельные файлы*.js. Поясним применение этих способов размещенияJavaScript-кода ниже:
1. Расположение внутри страницы.
Согласно спецификации HTML 4.01, для добавления JavaScript-кода на страницу, можно использовать теги<script></script>, которые рекомендуется, но не обязательно, помещать внутри контейнера<head>. Контейнеров<script>в одном документе может быть сколько угодно много.
Скрипт, выводящий модальное окнос классической надписью«Hello, World!» внутрибраузера:
<scripttype="text/javascript">alert('Hello, World!');</script>
2. Расположение внутри HTML-тега.
Спецификация HTML 4.01 описывает набор атрибутов, используемых для задания обработчиков события. Пример использования такой:
<ahref="delete.php" onclick="returnconfirm('Выуверены?');">Удалить</a>
В приведённом выше примере при нажатии на ссылку функция confirm('Вы уверены?');вызывает модальное окно с надписью «Вы уверены?», аreturnfalse;блокирует переход по ссылке. Разумеется, этот код будет работать, только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдёт без предупреждения.
Использование кода JavaScript в контексте разметки страницы в рамках ненавязчивого JavaScript расценивается как плохая практика.
Аналогом приведённого выше кода может выступать следующий фрагмент (при условии снабжения ссылки идентификатором alertLink):
<ahref=”delete.php”id=”alertLink”>Удалить</a>
Следующий фрагмент JavaScript и выполняет действие по вызову модального окна для кода выше:
Рис. 4. 10. Простейший скрипт в HTML-документе выводящий модальное окно на странице при нажатии на ссылку
3. Вынесение в отдельный файл.
Есть и третья возможность подключения JavaScript — написать скрипт в отдельном файле, а потом подключить его с помощью конструкции:
<script type="text/javascript" src="http://<путькфайлусоскриптом"></script>
Для пользовательского интерфейса, основные скрипты содержатся в файлах:
dlTheme.js(отвечает за основные рукописные скрипты пользовательского интефрейса) директории theme\dLTheme\assets\js\;
font_resize.js(отвечает за скрипт изменения размеров шрифта по нажатию специальных кнопок на страницах СУС) директории plugins\font_resize\js\;
faq1.php директории plugins\ и файле faq2.php(отвечают за показ и скрытие частей текста при нажатии на них) директории plugins\font_resize\js\.
Для пользовательского интерфейса, дополнительные сторонние скрипты содержатся в файлах:
dd_belatedpng.js(отвечает за корректное отображение файлов изображение *.pngдля старых версий браузеров InternetExplorer) директорияtheme\dLTheme\assets\js\;
html5.js (отвечает за корректную работу некоторых новых тэгов кода HTML 5 для некоторых версий браузеров InternetExplorer), директория theme\dLTheme\assets\js\;
jquery.min (основная библиотека jQueryJavaScriptLibraryверсии 1.5.1 поддерживающая функциональность скриптов СУС; код файла сжат― удалено всё форматирование и пробелы для экономии места), директорияtheme\dLTheme\assets\js\.
Для интерфейса административной панели управления, скрипты содержатся в файлах:
jquery.dl.js (отвечает за основные рукописные скрипты административной панели управления), директория admin\template\js\;
html5.js (отвечает за корректную работу некоторых новых тэгов кода HTML 5 для некоторых версий браузеров InternetExplorer), директория admin\template\js\;
jquery.min (основная библиотека jQueryJavaScriptLibraryверсии 1.5.1 поддерживающая функциональность скриптов СУС; код файла сжат― удалено всё форматирование и пробелы для экономии места), директория admin\template\js;
jquery.quickpaginate.js(дополнительная библиотека jQueryJavaScriptLibraryверсии 1.5.1 поддерживающая функциональность скриптов СУС, в частности создание разделения больших список элементов на части с прокруткой; код файла сжат― удалено всё форматирование и пробелы для экономии места), директория admin\template\js\;
jquery-ui.min.js(дополнительная библиотека jQueryUIверсии 1.8.17 поддерживающая функциональность скриптов СУС,в частности отвечает за поддержку работоспособности функциональности интерфейса административной панели управления; код файла сжат― удалено всё форматирование и пробелы для экономии места), директория admin\template\js;
файлы скриптов стороннего HTML-редактора CKEditorверсии 3.5.2: ключевыми из которых являются файлы ckeditor.js(отвечает за саму функциональность текстового редактора) и config.js(отвечает за саму настройку текстового редактора) директории admin\template\js\ckeditor\ и файл skin.js(отвечает за настройку оформления редактора при интеграции в административную панель управления) директории admin\template\js\ckeditor\skins\dL\;
файлы скриптов стороннего всплывающего окна для страниц административной панели управления fancyBox версии 2.0.4: ключевыми из которых являются файлы jquery.fancybox.pack.js(отвечает за саму функциональность всплывающего окна) и файл jquery.fancybox-1.3.4.pack.js(отвечает за поддержку функциональности всплывающего окна) директорияadmin\template\js\fancybox\;
файл скрипта для обрезки изображений Jcropверсии 0.9.8: jquery.Jcrop.min.js (отвечает за саму функциональность обрезки изображений в административной панели управления на странице «Файлы»; код файла сжат― удалено всё форматирование и пробелы для экономии места), директория admin\template\js\jcrop\;
файл скрипта динамической загрузки файлов SWFUploadверсии 2: jquery.uploadify.js (отвечает за саму функциональность динамической загрузки файлов административной панели управления на странице «Файлы»; код файла сжат― удалено всё форматирование и пробелы для экономии места), директория admin\template\js\uploadify\.