WEB-технологии

Термин "юзабилити" можно  рассматривать как "конечную суммарную  степень удобства, меру интеллектуального  усилия, необходимого для получения  полезных качеств этой вещи, и скорость достижения положительного результата при управлении ею". Юзабилити сайта является всеобъемлющим термином, определяющим комплекс мер, результатом которого является создание удобного и понятного сайта.

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

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

Цветовые  решения для сайта

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

Рис. 3.1.  Пример цветового круга: круг естественных цветов по Гете

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

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

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

Кроме того, цвета условно  делят на теплые и холодные. Теплые цвета, содержащие желтый и красный, более динамичные, выступающие и  объемные. Холодные цвета, расположенные  от фиолетовой до зеленой зоны цветового круга, кажутся удаляющимися по мере усиления тона. Эффект движения, вызванный сочетанием холодных и теплых цветов, широко применяется дизайнерами.

Цветовые  схемы

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

Монохроматическая цветовая схема. Монохроматическая цветовая схема соответствует одному базовому цвету и всем его оттенкам, тональностям и теням (см. рисунок 3.2,a). Схема не обладает цветовой насыщенностью, однако она обеспечивает контраст между различными оттенками одного цвета, что очень важно для хорошего дизайна.

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

Рис. 3.2.  Пример монохроматической (а) и дополнительной (б) цветовых схем

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

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

Рис. 3.3.  Пример триадической (а) и тетрадической (б) цветовой схемы

В настоящее  время существует множество сайтов, с помощью которых можно выбрать  цветовую схему не прибегая к помощи цветового круга. Многие из этих ресурсов позволяют пользователям загружать  уже готовые цветовые схемы и  дорабатывать их. Большинство ресурсов позволяют искать и сортировать цветовые схемы по определенным оттенкам или ключевым словам. Это может быть полезно, если основной цвет уже выбран, и есть необходимость подобрать к нему другие цвета. К одним из лучших сайтов для поиска цветовых схем относятся Color Scheme Designer ( http://colorschemedesigner.com/), Toucan (http://aviary.com/tools/toucan), ColoRotate (http://www.colorotate.org/) и Adobe Kuler (http://kuler.adobe.com/).

Полиграфия  в сети Интернет

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

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

Ограниченный  выбор шрифтов. С этим ограничением создатели и посетители Web-сайтов встречаются в первую очередь. Хотя в настоящее время можно определить любой шрифт, посетители оценят замысел автора, только если такой шрифт уже установлен на их компьютере. В противном случае, браузер воспользуется значением шрифта по умолчанию, которым обычно является Times New Roman. В связи с этим большинство Web-дизайнеров ограничиваются наиболее общедоступными шрифтами, к которым относятся Times New Roman, Georgia, Verdana, Arial, Courier и некоторые другие.

Переносы слов. Когда речь идет о выравнивании текста, имеется четыре варианта: выравнивание по левому или правому краям, выравнивание по центру и выравнивание по ширине. Текст, выровненный по ширине, выглядит более эстетично, чем текст с "рванными" краями. Такой способ выравнивания можно видеть в большинстве журналов и книг. Однако в Интернет это связано с некоторыми трудностями, в связи с отсутствием автоматического переноса слов, который разбивает слова в подходящем месте, чтобы лучше разместить их на строке. Чтобы полностью выровнять текст, браузеры могут только изменять интервалы между словами, что зачастую приводит к многочисленным пустым пространствам, образованным несколькими идущими подряд пробелами.

Кернинг. Под  кернингом понимается процесс настройки пробелов между определенными символами пропорционального шрифта. В пропорциональном шрифте (например, Times New Roman) расстояние между отдельными символами изменяется от символа к символу, в отличие от моноширинного шрифта (например, Courier), где расстояние между символами всегда одинаково. Кернинг используется при печати для уменьшения пространства между буквами, которые размещаются естественным образом. Большинство профессиональных шрифтов поставляются со встроенными командами кернинга, чтобы предоставить информацию о пробелах в системе воспроизведения текста.

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

Описав основные ограничения, будет полезным привести некоторые рекомендации, призванные улучшить внешний вид и восприятие текста, размещенного на Web-странице:

• Для глаз утомительны как короткие, так и длинные строки, т.к. читателю приходится напрягать мышцы глаз при переходе от одной строки к другой. Наиболее комфортной является длина строки в 50-65 символов.
• Расстояние между строками текста (интерлиньяж) является важным фактором для удобочитаемости и эстетики текста: слишком малый интерлиньяж затрудняет чтение, слишком большой можно спутать с разделением абзацев.
• Висячие строки, образующиеся в случае, когда последняя строка абзаца слишком короткая или состоит из одного слова, также отрицательно влияют на читабельность текста, т.к. прерывают взгляд читателя, нарушая прямоугольную форму текста.
• В блоках с выравниванием по левому или правому краю необходимо особое внимание уделять "рваным" краям, которые образуются в результате заметной разницы в длине строк и могут сбивать читателя. Край должен быть равномерным, без слишком длинных и слишком коротких строк.
• Выделять слова в тексте нужно так, чтобы не отвлекать читателя. Существует несколько форм выделения: курсивное начертание, полужирное начертание, заглавные буквы, размер шрифта, цвет. Лучше не комбинировать несколько способов, а использовать только один. Так как подчеркнутый текст прочно ассоциируется со ссылкой, недопустимо выделять текст подобным образом.
• Правильное оформление знаков позволяет глазу беспрепятственно скользить по тексту, облегчая чтение и восприятие текста. Плохо оформленная пунктуация отвлекает внимание даже от хорошего дизайна сайта. Особенно часто путают дефис и тире, кавычки, принятые в русском языке и "симметричные кавычки".

 

 

Лекция

6. Статические и динамические HTML-страницы. Язык гипертекстовой разметки документов HTML.

Краткая история HTML

Начало истории HTML можно отнести  к 1986 году, когда Международная организация  по стандартизации (ISO) приняла стандарт ISO-8879, озаглавленный "Standard Generalized Markup Language (SGML)". Этот стандарт описывал обобщенный метаязык, позволяющий строить системы структурной разметки любых разновидностей текстов. Управляющие элементы (так называемые теги), вносимые в текст при такой разметке, не несли никакой информации о внешнем виде документа, а лишь задавали его логическую структуру, т.е. указывали границы и соподчинение составных частей документа. Размеченный таким образом текст могла интерпретировать любая программа, работающая на какой угодно компьютерной платформе с любым устройством вывода.

Несмотря  на всю значительность принципов, лежащих  в основе языка SGML, он не имел заметного  распространения до тех пор, пока в 1991 г. сотрудник Европейского института  физики элементарных частиц Тим Бернерс-Ли не выбрал его в качестве основы для нового языка разметки гипертекстовых документов. Этот язык, ставший самым известным и широко используемым приложением SGML, был назван HTML – HyperText Markup Language, что переводится как язык разметки гипертекста.

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

В сентябре 1993 года группа программистов Национального центра суперкомпьютерных приложений США (NCSA) выпустила первый (и на долгое время единственный) графический браузер Mosaic, благодаря которому язык HTML получил широкое распространение. Браузер покорил виртуальное пространство с поразительной быстротой – всего за год около двух миллионов пользователей установили Mosaic на свои компьютеры.

В апреле 1994 г. под эгидой созданного в том  же году Консорциума Всемирной паутины (World Wide Web Consortium, W3C) началась подготовка новой версии языка HTML 2.0, ставшей официальной рекомендацией W3C лишь в сентябре 1995 г. Стандарт HTML 2.0 вобрал в себя всю сложившуюся к 1994 году практику создания Web-сайтов.

В марте 1995 г. началась работа над проектом HTML 3. К этому времени уже достаточно очевидно стало противоречие между идеологий чисто логической разметки существовавших версий HTML и потребностями пользователей, заинтересованных в расширении средств визуального оформления. Чтобы разрешить это противоречие, не отказываясь от парадигмы структурной разметки, авторы HTML 3 ввели поддержку нового средства - так называемых иерархических стилевых спецификаций (Cascading Style Sheets, CSS). Стилевые спецификации представляли собой отдельный по отношению к структурной разметке "информационный слой" и были предназначены только для визуального форматирования структурных элементов документа. К сожалению, работа над этой версией была прервана в связи с отсутствием поддержки со стороны производителей браузеров. Принятая чуть позже рекомендация HTML 3.2 потеряла многие новые свойства 3.0, однако закрепила разработки популярных в то время браузеров Netscape Navigator и Internet Explorer.