Билет 20

20. Универсальные средства разработки web-сайтов.

Web-сайт (от англ. web - паутина, site - место) - поименованная совокупность гипертекстовых документов (страниц), связанных пере­крестными ссылками, объединенных общей тематикой, размещенная на сервере WWW.

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

Существует три способа технической разработки Web-страниц. Первый из них – это открыть какой-либо текстовый файл и набрать в нем HTML код. Разумеется, здесь же можно использовать CSS, Javascript, DHTML, Active-X, PHP и другие. Таким способом пользовались до появления специального ПО.

Второй способ - программные средства, которые имеют специальные встроенные компоненты для конвертирования данных, созданных в этих продуктах, в HTML формат. Например, программы широко используемого пакета MS Office, начиная с версии 97, позволяет сохранить документ в формате HTML. При этом сохраняются, насколько это возможно, особенности форматирования символов и абзацев, изображения, таблицы, списки и так далее. Многие современные графические редакторы предоставляют возможность сохранить коллекцию картинок в виде HTML-документа. Надо отметить, что при таком конвертировании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции.

Третий способ – использовать некие программные средства для разработки Web-страниц. Этот способ разумеется легче, т.к. можно «видеть» то, что ты создаешь. Хотя, по–моему, для начинающего web-мастера было бы полезным сначала научиться писать код «по - старинке», т.е. познать HTML, DHTML, Active-X, javascript и CSS, SQL, PHP на собственной шкуре. Примером такого программного обеспечения может служить Adobe Dreamweaver.

Существуют две разновидности web-редакторов: визуальные и не визуальные.

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

Визуальные редакторы позволяют работать с самой web-страницей "как она есть", в режиме WYSIWYG (What You See Is What You Get - То, что ты видишь, то и получаешь). Редактирование и форматирование текстов, вставка рисунков, таблиц, гиперссылок и других элементов происходит как в обычном текстовом редакторе, а сама программа формирует (генерирует) соответствующий HTML-код. Кроме средств визуального редактирования эти web-редакторы одновременно предоставляют доступ к получившемуся HTML-коду. Визуальные редакторы — отличная стартовая площадка для начинающих web-дизайнеров, плохо знакомых с HTML. Но и опытные дизайнеры часто пользуются визуальными редакторами, чтобы быстро "сверстать" web-страничку, а потом довести ее до ума вручную.

Вообще при разработке сайта можно выделить 2 основных этапа.

· Первый этап. Создание дизайна сайта.

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

· Второй этап. Создание кода.

На этом этапе web- мастер принимает то, что ему заказал дизайнер, и начинает воплощать все задумки в реальность. В современном моделировании сайтов используется. например, табличная верстка и верстка слоями.

Технология Flash становится очень популярной. Она позволяет создавать очень эффектные web-страницы, содержащие FLASH-объекты или исполняемые файлы, содержащие большое количество векторной графики, анимационные ролики.

За счет применения векторной графики Flash-страницы быстрее загружаются на компьютеры клиента, чем традиционные (содержащие растровую графику) и одинаково воспринимаются на различных платформах: Windows, Macintosh, Solaris, Unix.

52.Композиционный центр и методы его выделения. Единство цветового решения. Основные, вспомогательные и дополнительные элементы композиции и их место в дизайн-проекте, проблема композиционного центра проекта. Миф, аллегория, гипербола.

Методы выделения композиционного центра:

- контраст по цвету

- по тону

- по форме

- по размеру

- по положению

В творчестве композиция служит определённой цели: донести до пользователя необходимую информацию не вызвав у него отторжения. Используя ассоциативное мышление присущее всем людям, можно заставить взгляд скользить в определённом направлении, воспринимать информацию быстро и легко, и среди множества аналогов запомнить именно данную работу.
Часть произведения, которая выражает главную мысль его содержания, является композиционным центром.
Построение всей композиции выполняется для выявления её композиционного центра – главного идейного содержания, нахождения конструктивных связей второстепенных частей и деталей, подчёркивающих в конечном счёте композиционный центр.
Композиционный центр выделяется прежде всего местоположением на изобразительной плоскости, освещённостью, цветотональными контрастами, колоритом, моделировкой объёма элементов изображения и другими средствами.
Выделение композиционного центра обусловлено особенностями зрительного восприятия человека, который, как правило, фиксирует внимание на сильнодействующем "раздражителе". Когда человек смотрит на какой-либо объект, зрение фиксируется на этом объекте, но глаз чётко видит площадь изображения только в определённом радиусе, так называемом поле ясного видения. Вне поля ясного видения человек смутно различает предметы и может увидеть их достаточно ясно только при изменении фокуса зрения, если переведёт взгляд на другие объекты или предметы.
Размещая определённым образом композиционный центр, определяется процесс восприятия произведения, который начинается, как правило, с восприятия композиционного центра. Важное значение для акцентирования композиционного центра имеет масштаб элементов изображения и их соотношение на плоскости изображения. Композиция неудачна, если элементы изображения композиционного центра оказываются слишком большими или слишком маленькими в соотношении с остальными частями изображения или с его общим размером.
Правило неделимости, или целостности. Неделимость выражается в нахождении такого композиционного решения, при котором из изображения ничего нельзя изъять, к нему ничего нельзя добавить или передвинуть в изображении без ущерба для целого. Целостность композиции выражается в нахождении связей между элементами изображения. При нахождении структуры композиции необходимо сначала найти сочетание основных пластических масс изображения, в силуэты которых могут войти детали. Разработку деталей допускается проводить лишь после определения соотношения основных частей композиции - её структуры.
Наиболее сложно характеризуемое качество, являющееся непременным условием полноценного произведения – это его выразительность. Посредством выразительности проявляется активное, заинтересованное отношение к предмету изображения, его оригинальность, эстетические представления и личное мироощущение автора. Выразительность как воздействующее средство композиции проявляется главным образом в умении пользоваться контрастами. Сущность контраста заключается в противопоставлении двух соотносящихся свойств, качеств, особенностей.
Для создания эстетически полноценного композиции необходимо иметь в виду характер взаимодействия пространства с формой.
Шар, куб, пирамида или цилиндр наиболее просто взаимодействуют с пространством. Простота объема позволяет отчетливо представить невидимые его части, т. е. форму в целом. Но главное, что позволяет это сделать, - не столько простота объема, сколько закономерность, лежащая в основе строения формы.
Важнейшей из закономерностей хорошо организованной объемно-пространственной структуры является органичность связей между отдельными элементами или частями структуры. В интересах целостности композиции надо уметь показать, что форма развивается не случайно, а закономерно. В этом случае, например, активная наклонная линия должна найти развитие и поддержку в других элементах структуры композиции.

Миф, греч., древнее предание и повествование о божествах и обладающих сверхчеловеческой силой героях, в котором в конкретной форме выразились верования и все вообще миросозерцание древних народов; иносказанье в лицах, вошедшее в поверье. Мифы в переносном смысле — ложные, некритические, оторванные от действительности состояния сознания, концепций, представления

АЛЛЕГОРИЯ (греч. allēgoría - иносказание); изваяние в переносном смысле; картинное, чувственное изображение мысли; условное изображение в искусстве отвлечённых идей, Связь между образом и значением устанавливается в А. по аналогии (например, лев как олицетворение силы и т. п.).

В литературе многие аллегорические образы взяты из мифологии и фольклора. На А. строятся басня, притча, а также многие произведения средневековой восточной поэзии; встречается и в др. жанрах ("Три ключа" А. С. Пушкина, сказки М. Е. Салтыкова-Щедрина).

В изобразительном искусстве А. – фигуры с постоянными атрибутами, фигурные группы и композиции, олицетворяющие какие-либо понятия

Гипербола (от греч. hyperbole - преувеличение), стилистическая фигура или художественный приём, основанные на преувеличении: явлению приписывается какой-либо признак в такой мере, в какой оно им реально не обладает (например, у Н. В Гоголя: "шаровары шириной в Чёрное море"). Т. о., Г. является художественной условностью и вводится в экспрессивных целях. Г. характерна для поэтики эпического фольклора, для поэзии романтизма и жанра сатиры (Н. В. Гоголь, В. В. Маяковский).

ЦВЕТ

Гармония — это равновесие, симметрия сил. Учение физиологической стороны цветового видения приближает нас к решению этой проблемы.

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

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

Самый простой способ избежать такой "серости" - прибегнуть к помощи Цвета. Пожалуй, ни один другой элемент дизайна не оказывает такого влияния на наше ощущение пространства (вебсайта, дома и т.п.), как Цвет. Цвета могут мгновенно менять наше настроение и мнение. Им подвластно создать уют, погрузить нас в пучину страха или возбудить нас. Для дизайна интерфейсов в особенности полезны естественные цвета. В широком диапазоне от сложных веб-приложений до презентационных сайтов цветовые комбинации, встречающиеся в природе, обладают набольшей способностью выделяться (помогая создать более запоминающийся вебсайт), направлять (позволяя пользователям сосредотачиваться на взаимодействии с элементами сайта), увлекать (делая общее расположение элементов страницы более удобным и привлекательным), и вдохновлять (предлагая новые идеи в выборе цветов).

Поэтому, сайту нельзя пренебрегать любыми возможностями выделиться из общей массы. Если ваш сайт выделяется, есть шанс, что пользователи уделят ему больше времени или внимания при посещении. Они могут даже запомнить его и посетить вновь. Возможно, нет лучшего средства оставить благоприятное впечатление, чем Цвет. Людям свойственна немедленная реакция на цвет: они возбуждаются, они становятся счастливы или же скучнеют.

Уникальная палитра, основанная на найденных в Природе цветах, может вызволить вас из цветовой унылости World Wide Web (рис.1), помогая создать более запоминающийся веб-сайт. Например, естественная комбинация цветов (рис. 2), использованная при создании макета этого сайта (рис. 3), полностью контрастирует с более "стандартной" версией дизайна этого же сайта (рис. 4). Мягкие цвета достаточно нежны, чтобы быть фоном, но вместе с тем они позволяют достаточно чётко выделить четыре основных информационных области сайта.

Естественные цвета часто менее насыщены и более приятны для глаз, чем их искусственные аналоги. В результате они дают пользователю возможность сосредоточиться на взаимодействии с сайтом, не отвлекая его слишком яркими оттенками. Когда вы пытаетесь сосредоточиться на информации, размещённой в слое с очень яркой цветовой гаммой (рис. 4), ваши глаза постоянно возвращаются к этим ярким цветам (в данном случае к синей полосе наверху). С другой стороны, оттенки жёлтого и голубого на альтернативном варианте дизайна (рис. 3) создают гармоничный баланс между изображениями, панелями навигации и контентом. (Это особенно полезно для веб-сайтов, имеющих значительный объём материалов). Наиболее заметными сделаны самые полезные элементы - меню и блоки с содержимым, но не фоновые цвета, для которых были выбраны природные цвета. Наши глаза привыкли к голубым, жёлтым и серым тонам, так как мы видим их каждый день вокруг себя.

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

Естественные цвета особенно полезны для ещё одного аспекта дизайна - ответной эмоциональной реакции пользователя. Для того, чтобы пользователь легко попал из Точки А в Точку Б, призывают на помощь юзабилити, но для создания у пользователя приятных ощущений от происшедшего и желания вновь их испытать и поделить ими с другими нужна какая-то индивидуальность.

Рассмотрим два варианта транзакционных форм. Одна использует холодную, пугающую палитру. Другая - более удобна в использовании благодаря применению тёплой и дружелюбной цветовой палитры на основе естественных оттенков. Банковским служащим, постоянно работающим с этим сетевым приложением, наиболее дружественный интерфейс покажется наиболее удобным для работы.

Естественные цвета, помимо всего прочего, вдохновляют. Разнообразие Природы непрерывно предлагает новых идеи и подходы при выборе цветов. Например, цвета, использованные в компании по привлечению туристов в Дублин, оказались вовсе не оранжевым, зелёным и белым цветами ирландского флага, как вы могли бы подумать. Вместо них были использована цветовая комбинация, характерная для морского побережья Ирландии. Такое сочетание цветов является более живым и привлекательным,