WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!


Pages:     || 2 | 3 | 4 |
Санкт-Петербургский государственный университет Факультет филологии и искусств Кафедра информационных систем в искусстве и гуманитарных науках В. В. ЗАХАРКИНА Разработка веб- ресурса с использованием HTML, CSS, JavaScri pt, PHP Применение базовых т ехнолог ий для создания фотоархива в веб- инт ерфейсе Санкт-Петербург 2007 1 Рекомендовано к изданию Введение Кафедрой информационных систем в искусстве и гуманитарных науках Факультета филологии и искусств Санкт-Петербургского государственного университета Фотоархив (или фотогалерея) – типичный и актуальный раздел многих современных информационных ресурсов глобальной сети Интернет.

С одной стороны, современные ресурсы, выполненные, как сейчас принято говорить, «в стиле web 2.0», представляют собой уже не Захаркина В. В.

просто информационную среду, а среду общения, в которой Разработка веб-ресурса с использованием HTML, CSS, содержание создают сами пользователи, которым даны гибкие JavaScript, PHP. Применение базовых технологий для создания средства настройки «личного пространства». Пользователи таких фотоархива в веб-интерфейсе: Учебное пособие. — СПб.: Ф-т ресурсов могут публиковать свои фотографии, организовывать их в филологии и искусств СПбГУ, 2007. — 49 с.

альбомы. Процесс публикации фотоальбомов в этом случае не требует никаких специальных знаний. Такая возможность, реализованная на популярных ресурсах, выполненных высокопрофессиональными Учебное пособие посвящено аспектам разработки фотоархива – разработчиками, уже кажется вполне естественной. Однако жесткие типичного и актуального раздела многих современных информационных ресурсов глобальной сети Интернет. Рассмотрены вопросы компоновки вебрамки интерфейса не позволяют реализовать запросы отдельных страницы, функционального дизайна и применения клиентских и серверных творчески ориентированных пользователей.

технологий. Изложение сопровождается иллюстрированными примерами.

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

исследовательские проекты по созданию веб-ресурсов, связанных с Рассмотрены сценарии на языках JavaScript и PHP.

сохранением культурного наследия, публикацией электронных коллекций, созданием виртуальных музеев. Представление фотоархивов в веб-интерфейсе, очевидно, может быть важной задачей Подготовка и издание учебного пособия осуществлено в рамках проекта СПбГУ «Инновационная образовательная при реализации подобных проектов.

среда в классическом университете» Помимо этого, уже давно существует весьма значимое виртуальное (Приоритетный национальный проект «Образование»).

сообщество фотографов – профессионалов и любителей.

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

© Факультет филологии и искусств Наконец, не будем забывать и многочисленные инициативные Санкт-Петербургского государственного проекты в разных предметных областях, связанные с публикацией университета, фотодокументов в глобальной сети.

Отпечатано с готового оригинал-макета в секторе цифровой печати Института искусств Факультета филологии и искусств СПбГУ 199178 Санкт-Петербург, 10 линия В.О., д. 49.

Подписано в печать 10.11.2007. Заказ № 47. Формат 60х84/16. Усл. печ. л. 3,25. Тираж 100 экз.

2 • После этого параллельно работают верстальщик, создающий Этапы создания веб- ресурса макет, и программист, обеспечивающий функциональность.

• На этом этапе ответственный исполнитель проекта (или верстальщик) формулирует требования к форматам и качеству Кратко и в некоторой степени условно перечислим некоторые исходного материала. Окончательно определяется, кто отвечает за основные этапы разработки информационного веб-ресурса.

своевременную поставку и обработку материала.

Естественно, эта схема применима и для предмета нашего рассмотрения – фотоархива.

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

содержания всегда является формулировка конечной цели.

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

предложить разумные варианты публикации материала.

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

сферы нашего рассмотрения. Сосредоточимся на нескольких аспектах.

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

• Предлагаеются варианты дизайнерского решения.

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

публикации фотоматериалов в глобальной сети Интернет.

• Предложенные варианты оцениваются с точки зрения удобства Фактически, это один из приближающихся к «преподавательскому использования.

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

• Между тем материал (в нашем случае, фотоматериал) уже как-то обрабатывается.



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

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

использованием сценариев JavaScript, • Предлагаются параметры подготовки исходного материала и • подходов к реализации серверных сценариев на языке PHP.

даются соответствующие указания.

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

Приведем несколько характерных примеров, существенно различных как по внешним параметрам компоновки, так и по функциональности Используемые программные приложения для пользователя. Попробуем оценить их преимущества и недостатки и оценим необходимость применения тех или иных клиентских или • Adobe Photoshop – графический редактор.

серверных технологий. Подробное рассмотрение технологических • Adobe Dreamweaver – средство разработки HTML-документов аспектов будет проведено далее в разделах, посвященных приемам и организации сайта.

клиентского и серверного программирования.

• TextPad – текстовый редактор, ориентированный на создание программных кодов со встроенными анализаторами синтаксиса языков разметки и алгоритмических языков.

Простейший вариант фотоархива • IrfanView – программа просмотра изображений с возможностью пакетного переименования и преобразования.

В этом варианте реализовано простейшее расположение графического • Apache webserver и его эмулятор Denver, работающий на материала без аннотаций - а они здесь и не нужны. Такая компоновка клиентском компьютере под ОС Windows.

фотоматериала, простая и в то же время функциональная, применялась еще в прошлом веке и не потеряла актуальности по сей день.

Функциональный дизайн Приведу пример от далекого 1999 года. Фрагмент набора избранных фотографий Исаакиевского собора, полученных web-камерой, установленной интернет-центром Петербургского отделения фонда Пожалуй, в большинстве web-документов графические элементы Сороса. Здесь все фотографии имеют одинаковые пропорции и играют декоративную или иллюстративную роль, а информационная размеры, поэтому оптимальный вариант - вывести их сплошным роль остается за текстом. Однако при представлении, скажем, потоком. Вне зависимости от разрешения экрана и размера окна фотоархива или каталога выставки главной становится графика, а браузера миниатюры непринужденно перестраиваются.

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

много вопросов: структурирование информации (при большом объеме Приведенный фрагмент скриншота имеет, на мой взгляд, архива - в виде базы данных), разработка удобной системы навигации, определенное историческое значение. Обратите внимание на фразу внешнее представление графики в web-документе.

«Click thumbnail to view image». В 1999 году пользователь мог не В этом разделе обсуждается компоновка элементов графического догадаться щелкнуть мышью по миниатюре, чтобы увидеть архива на web-странице и вопросы функциональности. Чаще всего полномасштабную фотографию.

пользователю предлагается набор миниатюр, соответствующих Contents of St. Isaac's Cam views.

выбранному разделу архива, и так или иначе дается возможность Click thumbnail to view image.

просмотра полномасштабных изображений. Какого размера должны быть миниатюры, сколько их одновременно выводить на экран, как располагать, снабжать ли кратким текстовым описанием, как осуществить показ полномасштабного изображения - решение этих 6 Технологический аспект Этот простой вариант, в принципе, может быть реализован только с помощью HTML. Верстка такого варианта фотоархива в HTML элементарна: последовательно объявляются элементы img с соответствующими атрибутами. Если эту последовательность заключить в раздел с атрибутом

, миниатюры будут выровнены по центру.

Простейший вариант компоновки абсолютно технологичен и удобен для дальнейшего сопровождения. Не надо задумываться о том, Итак, в этом случае было принято (и реализовано) традиционное в тот сколько миниатюр надо вывести в одном ряду в зависимости от исторический период решение: щелчком по миниатюре выводить разрешения клиентского монитора. Браузер сам их расположит таким полномасштабное изображение в новом окне.

образом, чтобы максимально использовать свободное пространство Необходимость открыть окно заданных размеров – очень окна.

распространенная ситуация. Одно из распространенных (и вполне Итак, компоновка средствами HTML близка к идеалу. Но как быть с технологичных) решений состоит в выводе заранее заготовленных показом полномасштабной фотографии Можно каждую миниатюру миниатюр, щелчком по которым в отдельном окне показывается оформить как гиперссылку на полномасштабное изображение, и полномасштабное изображение. При этом, разумеется, возможны открывать целевой документ гиперссылки в новом окне. Однако в разные варианты в рамках дизайнерской концепции.





этом случае новые окна откроются с полным набором интерфейсных • Все изображения одинакового размера (точнее, при элементов: адресной строкой, панелями инструментов и т.д. Это предварительной обработке фотоматериала приведены к некрасиво и нефункционально. К тому же, средствами HTML нельзя одинаковому размеру). В этом случае миниатюры также повлиять на размер и положение нового окна.

одинакового размера.

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

• Изображения разного размера и разных пропорций. Но миниатюры представляют собой вырезанные и масштабированные фрагменты одинакового размера.

Простой вариант фотоархива с • Изображения разного размера и разных пропорций. Миниатюры также имеют разные пропорции, но масштабированы таким аннотациями образом, чтобы вписаться в квадрат заданных размеров. Кстати, именно такой вариант реализован в большинстве программ Вот пример простейшего расположения графического материала, просмотра графических объектов. Так организован и вывод снабженного аннотациями (фрагмент фотоархива Д.С.Лихачева).

миниатюр в MS Windows «проводнике» в режиме «эскизы Фотографии имеют существенно разные пропорции, поэтому вывести страниц».

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

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

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

Представляются очевидными два естественных варианта компоновки.

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

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

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

привлечь язык клиентского программирования JavaScript.

Вопрос: как улучшить второй вариант Естественный ответ:

разместить фрейм с миниатюрами внизу, тогда полоса прокрутки будет выглядеть естественно и не испортит впечатления. А сколько Вывод изображений во фреймах еще таких вопросов возникает в процессе разработки… В предыдущих примерах полномасштабное изображение выводилось Технологический аспект в отдельном окне. Однако, если позволяет экранное пространство, иногда уместно выводить крупное изображение во фрейме исходного Несмотря на, казалось бы, определенную структурную сложность, окна. При этом можно все же одновременно вывести ряд миниатюр, а этот вариант может быть реализован исключительно средствами можно и заставить пользователя "пролистывать" изображения HTML. Это выгодно отличает его от предыдущих, явно требующих последовательно.

хотя бы минимального клиентского программирования.

10 Простейшее решение – задать для миниатюр гиперссылки, Возможно, при реализации такого варианта будет уместна загружающие полномасштабную фотографию в соседний фрейм. декоративная рамка, в которой показывается фотография. Видимо, Недостаток этого подхода для фотографий разного размера и разных потребуются рисованные «кнопки» щелчком по которым пропорций очевиден: они будут выведены в левом верхнем углу пролистываются фотографии. Кнопки можно, например, создать в фрейма, и центрировать их средствами HTML нельзя. Тем более редакторе Adobe Photoshop или отсканировать и обработать невозможно снабдить их подписями. подходящее изображение.

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

сценарием. В этом случае легко задать центрирование фотографии и вывести текст. Технологический аспект Структурная разметка при помощи HTML, скорее всего, не вызовет "Пролистывание" изображений затруднений. Все элементы, представленные на скриншоте, легко располагаются в ячейках таблицы. Справа от скриншота тонким При таком варианте пользователь будет последовательно пунктиром показаны границы табличных ячеек. Фотография может просматривать изображения, не имея возможности выйти из этого быть выведена во встроенном фрейме iframe. Его границы линейного процесса, выбрав заинтересовавшую его миниатюру. В выделены жирным пунктиром.

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

Pages:     || 2 | 3 | 4 |










© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.