Перевод. перевод. 1 4 Структура документов html и css структура html
 Скачать 87.61 Kb.
|
|
1.3.4 Структура документов HTML и CSS Структура HTML. HTML, как и любой другой язык разметки, является теговым, т.е. любой документ на языке HTML представляет собой набор элементов, причем, начало и конец каждого элемента обозначается специальными пометками, называемыми тегами <#"justify">·заголовок, ограниченный тегами ; как правило, содержит дополнительные данные о странице, такие как META-теги, заголовок страницы внутри тегов , внутренние таблицы стилей внутри тегов , скрипты внутри тегов ; ·тело документа, заключенное внутрь тегов не пересекаются. Любая информация вне данных тегов, но внутри -области игнорируется, если не несет с собой управляющий характер (например, является java-скриптом). Структура CSS. Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений обрамляется фигурными скобками и состоит из набора свойств и их значений. Схематически это можно показать так: Cелектор, селектор {свойство1: значение; свойство2: значение; свойство3: значение;. } Тег {свойство1: значение; свойство2: значение;. } В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер. Правила задаются в следующем виде. Имя класса {свойство1: значение; свойство2: значение;. } Тег class = Имя класса Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. #Имя идентификатора {свойство 1: значение; свойство2: значение;. } Тег id = идентификатор В отличие от классов, идентификаторы должны быть уникальны, иными словами, встречаться в коде документа только один раз. 1.3.5 Языки сценариев и программирования Для реализации интерактивных функций на сайте необходимо использовать, так называемые, технологии web-программирования. Технологии web-программирования можно разделить на две базисные группы: работающие на стороне клиента и работающие на стороне сервера. Технологии на стороне клиента запускаются на компьютере пользователя сайта в контексте браузера. Программы, которые запускаются на веб-сервере, относятся к технологиям программирования на стороне сервера. Проблема, связанная с web-программированием, состоит в том, чтобы обеспечить точный выбор той технологии, которая нужна для выполнения задачи. У каждой технологии есть свои достоинства и недостатки. Обычно технологии программирования на стороне клиента и на стороне сервера обладают характеристиками, делающими их скорее сочетающимися, чем противостоящими друг другу. К примеру, при добавлении на web-сайт формы для сбора данных и их сохранения в базе данных, очевидно, имеет смысл проверять эту форму на стороне клиента, чтобы убедиться, что пользователь ввел правильную информацию, поскольку при этом для проверки входных данных кругового обращения до сервера и обратно не потребуется. Программирование на стороне клиента сделает проверку достоверности формы более реактивной. С другой стороны, с помещением данных в базу лучше справится технология на стороне сервера, учитывая, что база данных находится в серверной части этого уравнения. Каждый основной тип программирования находится на своем месте, и их смесь зачастую является лучшим решением. В наше время наиболее часто используют программирование на стороне сервера, реализуемое с помощью языка PHP. Для написания программ на стороне клиента, обычно применяют язык JavaScript. PHP (англ. Hypertext Preprocessor, Personal Home Page Tools (устар.), препроцессор гипертекста) - скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. PHP - это мощный кроссплатформенный набор средств, который располагается на сервере и предназначается для обработки кода, встраиваемого в html-документы. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров.представляет собой язык с открытым исходным кодом для выполнения на сервере сценариев, создающих динамические web-страницы. Помимо независимости от браузеров, он предлагает простое и независимое от платформы решение для электронной коммерции и сложных web-приложений, в том числе управляемых базами данных [16]. По сравнению с базовым HTML, представляющим собой систему с довольно ограниченными возможностями, язык PHP обладает гораздо большей гибкостью и динамичностью. Он позволяет добавить больше индивидуальности и персонализировать обыкновенные статические HTML-странички. С помощью РНР можно создавать привлекательные оригинальные Web-страницы на основе любых задаваемых критериев (например, времени суток или операционной системы пользователя). В отличие от HTML, язык РНР также может взаимодействовать с базами данных и файлами, с его помощью обрабатывается электронная почта и выполняются многие другие операции. Структура PHP. Интерпретатор состоит из ядра и подключаемых модулей-"расширений", представляющих собой динамические библиотеки. Расширения позволяют дополнить базовые возможности языка, предоставляя возможности для работы с базами данных, сокетами, динамической графикой, криптографическими библиотеками, документами формата PDF, а также разработать и подключить свое собственное расширение может любой желающий. Синтаксис PHP. Для работы программы не требуется описывать какие-либо переменные и используемые модули. Любая программа может начинаться непосредственно с оператора PHP.исполняет код, находящийся внутри ограничителей, таких как . В основном, это используется для вставки PHP-кода в HTML-документ. Помимо ограничителей , допускается использование дополнительных вариантов, таких как и . Всё, что находится вне ограничителей, выводится без изменений. Имена переменных начинаются с символа $, тип переменной объявлять не нужно. Имена переменных, функций и классов чувствительны к регистру. Константы также чувствительны к регистру.рассматривает переход на новую строку как пробел, так же как HTML и другие языки со свободным форматом. Инструкции разделяются с помощью точки с запятой (;), за исключением некоторых случаев, после объявления конструкции if/else и циклов. JavaScript - скриптовый <#"justify">Структура JavaScript. Структурно JavaScript можно представить в виде объединения трех четко различимых друг от друга частей: ·ядро (англ. ECMAScript), которое описывает типы данных, инструкции, ключевые и зарезервированные слова, операторы, объекты, регулярные выражения; ·объектная модель браузера (англ. Browser Object Model) - специфичная для каждого браузера часть языка, отвечающая за взаимодействие ядра и объектной модели документа. Основное предназначение - управление окнами веб-браузера и обеспечение их взаимодействия, управление фреймами <#"justify">Встраивание программного кода в веб-страницу: ·расположение внутри страницы. Для добавления JavaScript-кода на страницу используются теги: ; ·расположение внутри тега. Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий, например: " onclick = "return confirm ('Вы уверены? '); ">Удалить В данном случае нажатие на ссылку функция "confirm" вызывает модальное окно с надписью "Вы уверены". Разумеется, этот код будет работать, только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдёт без предупреждения; ·вынесение в отдельный файл. Подключение отдельного файла скрипта с помощью конструкции: . 1.3.6 Web-сервер Web-сервер - программа, которая отвечает за получение данных от пользователя сайта и подготовку страниц, отправляемых обратно. При осуществлении запросов к базе данных или обращений к другим активным объектам, реализующим бизнес-логику, web-сервер обращается к серверам базы данных или другим серверам приложений [17]. Одним из самых популярных серверов Интернет является Apache. Его популярность обусловлена, прежде всего, тем, что он является бесплатным и достаточно быстрым. Основными достоинствами Apache считаются надёжность и гибкость конфигурации. Он позволяет подключать внешние модули для предоставления данных, модифицировать сообщения об ошибках. Несмотря на то, что первоначально данный сервер разрабатывался для операционных систем UNIX, сейчас он адаптирован под операционную систему Windows. Web-сервер Apache - своего рода стандарт сервера в сети Интернет. 1.3.7 Базы данных и СУБД для web-приложений Сегодня наиболее распространенным подходом для организации информационной базы web-приложений являются реляционные базы данных. Особенности организации данных в БД по сравнению с файловыми системами обеспечивают использование одних и тех же данных в различных приложениях. БД сводят к минимуму дублирование данных, прибегая к дублированию только для ускорения доступа к данным или обеспечения восстановления БД при ее разрушении. Одна из важных черт БД - независимость данных от особенностей прикладных программ, которые их используют, а также возможность создания этих программ в такой форме, что изменение особенностей хранения, логической структуры или значений данных не требует изменения программ их обработки. Другой важной чертой БД является возможность изменения физических особенностей хранения данных без изменения их логической структуры. Базы данных позволяют хранить и получать доступ к информации. Использование БД на web-сайте позволяет отслеживать данные, автоматически обновлять сайт и распознавать пользователя. Информация может обрабатываться, сохраняться и извлекаться из БД. В БД можно хранить хорошо структурированную информацию, такую как список пользователей, список заказов, прайс-листы. Однако, этим вид хранимой информации не ограничивается. В современных информационных системах в базах данных хранятся и тексты, и изображения, и даже исполняемые программы или скрипты. Если потребуется, то в приложении можно хранить в базе данных инструкции и описания товаров [12]. Функционирование БД обеспечивается совокупностью языковых и программных средств, называемых системой управления базами данных (СУБД). Основная задача СУБД - предоставить пользователю БД возможность работать с ней, не вникая в детали на уровне аппаратного обеспечения. Иными словами, СУБД позволяет конечному пользователю рассматривать БД как объект более высокого уровня по сравнению с аппаратным обеспечением, а также предоставляет в его распоряжение набор операций, выраженный в терминах языка манипулирования данными высокого уровня. СУБД обычно дают следующие преимущества: ·высокая целостность данных; ·улучшенная непротиворечивость данных при множественном доступе; ·улучшенная защита; ·различные представления, основанные на одних и тех же структурах; ·независимость от файловых структур; ·устранение избыточности информации; ·экономия дискового пространства благодаря объединению таблиц без потерь. MySQL - очень быстрая, надежная система управления реляционными базами данных (СУРБД). База данных позволяет эффективно хранить, искать, сортировать и получать данные. Сервер MySQL управляет доступом к данным, позволяя работать с ними одновременно нескольким пользователям, обеспечивает быстрый доступ к данным и гарантирует предоставление доступа только имеющим на это право пользователям. Следовательно, MySQL является многопользовательским, многопотоковым сервером. Он применяет SQL, используемый по всему миру стандартный язык запросов для баз данных [15]. MySQL составляет всё более значительную конкуренцию таким дорогостоящим гигантам, как Oracle и MS SQL Server. Немаловажным фактором является то, что MySQL распространяется совершенно бесплатно. В настоящее время пакет MySQL доступен как программное обеспечение с открытым исходным кодом.отличается хорошей скоростью работы, надежностью, гибкостью. Работа с ней, как правило, не вызывает больших трудностей. Поддержка сервера MySQL автоматически включается в поставку PHP. 1.4 Разработка дизайна 1.4.1 Разработка интерфейса С ростом Интернета широкое распространение получили веб-интерфейсы, позволяющие взаимодействовать с различными программами через браузер (например, управление своим заказом в интернет-магазине). Кроме того, они удобны тем, что дают возможность вести совместную работу сотрудникам, не находящимся в одном офисе. Интерфейс в широком смысле - определенная стандартами граница между взаимодействующими независимыми объектами. Интерфейс задает параметры, процедуры и характеристики взаимодействия объектов. Интерфейс пользователя - элементы и компоненты программы, которые способны оказывать влияние на взаимодействие пользователя с программным обеспечением, в том числе: ·средства отображения информации; ·командные режимы; ·устройства и технологии ввода данных; ·диалоги, взаимодействие и транзакции между пользователем и компьютером; ·обратная связь с пользователем; ·поддержка принятия решений в конкретной предметной области; ·порядок использования программы и документация на нее. Есть несколько простых правил, позволяющих интерфейсу магазина быть понятым клиенту. Чем проще, тем лучше. Это вовсе не значит, что должен быть только текст и контактная информация, но на сайте не должно быть бесполезной информации, шрифт должен легко читаться. Графические элементы должны быть чёткими, выразительными и быстро загружаться. На сайте магазина недопустимо использовать анимацию и звук, которые долго загружаются и отвлекают внимание покупателя. Человеческий глаз просматривает страницы сайта сверху вниз. Наибольшее внимание сосредотачивается на верхней левой части страницы, поэтому в верхней части страницы сайта, как правило, размещается наиболее важная информация: название фирмы, логотип, название сайта и т.д. Чем проще выполнена верхняя часть страницы, тем легче запомнить название сайта и саму фирму. Типовой ошибкой многих сайтов является нагромождение в верхней части страницы сайта авангардной и сложной композиции из многих рисунков, среди которых едва заметно располагается название фирмы и название сайта. В результате человеческий глаз, сканируя данную часть страницы сайта, не успевает распознать и запомнить нужную информацию. Происходит перенасыщение. Вместо увеличения запоминаемости, на таких сайтах, происходит снижение запоминаемости основных надписей (рисунков) сайта, названия фирмы и название сайта. Покупатель должен без труда находить интересующий его товар и иметь возможность получить о нём исчерпывающую информацию (описание в виде текста плюс несколько фотографий). На витрине желательно разместить данные о деятельности фирмы-продавца (чем занимается компания, какие регионы обслуживает, адрес, контактную информацию). Товары должны быть распределены по группам. Необходимо обеспечить возможность поиска товаров по части названия и описания. Для каждого товара обычно предусмотрены: краткое и полное описание, плюс несколько фотографий. При просмотре товарных предложений, у покупателя должна быть возможность сортировать товар по цене или по названию. Для наглядности необходимо предусмотреть специальные разделы, содержащие товары, сгруппированные по маркетинговым признакам, например, "Новинки", "Специальные предложения", "Товары дня", "Лидеры продаж". При оформлении заказа покупатель должен ввести контактную информацию: логин, пароль, адрес доставки, телефон, электронную почту. После регистрации покупателю отправляется по электронной почте письмо с сохраненными данными. Расчёт стоимости и вывод цен должен осуществляться в различных валютах. Чтобы сэкономить время заказчика на оплату товара, неплохо иметь в магазине готовую квитанцию для оплаты через банк. В электронном магазине могут быть и информационные разделы: данные о магазине, контактные данные, схема проезда, информация по доставке товаров и скидкам, новости магазина, статьи (системы управления новостями и статьями предоставляют возможность использовать интернет-магазин как настоящий информационный портал), прочая полезная информация. Рассылка новостей. Посетитель имеет возможность подписаться (и отписаться) на новости интернет-магазина. После подписки покупателю периодически высылается информация о новинках магазина. Раздел "Вопросы и ответы" (FAQ), где покупатель может задать свой вопрос, а администратор магазина - ответить на него. Это способствует повышению качества обслуживания, удержанию старых клиентов и привлечению новых. Отзывы и вопросы по товарам. Покупателю следует предоставить возможность просмотреть отзывы о товаре, оставить свой отзыв или задать вопрос - это способствует повышению качества описаний товаров. Наличие обратной связи администратора с клиентами. Важно, чтобы администраторы как можно быстрее и максимально полно отвечали на письма. Грамотная система управления. Вход в систему администрирования осуществляется только после ввода администратором логина и пароля. Администратор имеет возможность полностью управлять содержимым интернет-магазина: ·добавлять или удалять товары, описания и фотографии к ним, изменять их стоимость, условия доставки товаров и уровень скидок; ·редактировать разделы магазина (новости, статьи, вопросы и ответы, отзывы и вопросы к товарам); ·редактировать специальные разделы магазина (новинки, специальные предложения, товары дня, лидеры продаж); ·редактировать контактную информацию интернет-магазина; ·редактировать содержание заголовков и текстов писем, отправляемых покупателю при регистрации и покупке товара; ·составлять и рассылать письма с новостями магазина подписчикам; ·просматривать историю заказов и статистику покупателей; ·изменять курс валюты на витрине магазина. Если заказчик интернет-магазина собирается работать ещё и с оптовыми клиентами, необходимо предусмотреть работу сайта как с розничными, так и с оптовыми ценами на товары. Загрузка товарных предложений может осуществляться из файла. Файл, в котором будут описаны все группы, подгруппы каталога, а также информация о товарах, создается на локальном компьютере, затем загружается в интернет-магазин. После загрузки прайс-листа товары автоматически появляются на витрине. Таким образом, можно оперативно изменять данные о ценах и наличии товаров. Аккуратная работа с цветом. Правильно примененный цвет может, например, передавать тонкие различия между однородными элементами. Неправильно примененный цвет может мешать работать с программой. Красный цвет может ассоциироваться с некой опасностью. Большое количество красного цвета в каком-либо месте на экране привлекает внимание, заставляет пользователя настораживаться. Дорожные знаки красного цвета либо запрещают, либо предупреждают об опасности. Поэтому, если кнопка на экране окрашена красным, независимо от того, что на ней написано, пользователь будет стараться избегать нажатия на нее. В малых количествах красный цвет может исправно служить в качестве ненавязчивого указания наличия каких-либо проблем. Например, если получившееся в результате расчета число превышает норму. Красный цвет может также использоваться в парах с другими цветами. Существуют две метафоры - "термометр", когда красному противостоит синий, и "светофор" - зеленый. Обе они должны использоваться только тогда, когда это уместно. Подводя итоги, следует выделить основные моменты, на которые нужно делать ставку при разработке интерфейса интернет-магазина: ·простота и информативность. Пользователь, попадая на сайт, должен получать четкую информацию о товаре, новинках, предстоящих релизах, а также о том, как он сможет оплатить заказ, каковы условия и сроки доставки; ·удобный и быстрый поиск необходимого товара; ·все товары, предлагаемые на сайте, должны быть в наличии; ·простая и предельно удобная навигация; ·грамотная цветовая гамма. 1.4.2 Общие правила дизайна страниц Дизайн играет важную роль в привлечении внимания пользователей к определенной веб-странице. При разработке дизайна учитываются особенности восприятия целевой аудитории. При этом оформление должно соответствовать содержанию. Понятие дизайна веб-страницы проще всего определить как внешний вид страницы влияет на ее восприятие посетителем (привлекательность или непривлекательность, легкость или сложность использования). Дизайн - понятие художественное и эстетическое. Сложных или простых правил, позволяющих всегда получать хороший дизайн, не существует. Вместо четких правил в процессе дизайна следует руководствоваться общими принципами, которые дают хороший результат. Тремя основными принципами разработки веб-страниц и небольших веб-узлов являются простота, предсказуемость и целостность [22]. В области web-дизайна простота имеет особые преимущества еще и потому, что на веб-страницы распространяются временные ограничения и отличия настроек компьютеров пользователей. Тот факт, что загрузка каждого элемента занимает определенное время, означает, что страница с простым дизайном, как правило, загружается быстрее сложной. Различия настроек компьютеров пользователей также говорит в пользу простоты. Один пользователь может рассматривать страницу на маленьком мониторе, поддерживающем только 256 цветов, а другой - на большом экране с высоким разрешением в миллион цветов. Чем проще дизайн страницы, тем вероятнее, что на разных компьютерах она будет выглядеть примерно одинаково. Понятие предсказуемость означает, что посетитель может легко понять, где находятся те или иные компоненты страницы и как они работают. Точнее понятие предсказуемости можно определить как предсказуемость содержимого, функций элементов и внешнего вида данной веб-страницы по сравнению с другими похожими страницами. Не менее важна целостность каждой страницы. Не стоит существенно менять шрифты, размер текста или макетирование. Кроме того, все веб-страницы одного сервера должны быть оформлены в едином стиле. Это создаст дополнительное представление о фирме и ее товарах и произведет положительное впечатление Медленно загружающиеся страницы - это основной недостаток дизайна. Существует два способа замедления загрузки страницы. Один из них заключается в невнимательности относительно одного или двух графических изображений. Из-за того, что эти файлы слишком большие, вся страница загружается медленно. Другой способ заключается в небрежном использовании графики в целом. Страницы, насыщенные различными элементами дизайна, могут содержать множество графических компонентов, приводящих к возникновению большого количества отдельных передач файлов по мере загрузки страницы. Особенно важно в области веб-дизайна выбор грамотной цветовой палитры. Не стоит использовать любые возможные сочетания цветов. Пользователи привыкли к черному тексту на белом или светлом фоне. Это сочетание всегда будет наилучшим. Чтобы сделать страницы красочными без ущерба удобочитаемости, в определенном месте страницы можно расположить графическую панель. Очень распространенной ошибкой считается использование на веб-страницах мелкого текста. Таким образом, веб-дизайн предполагает тщательную проработку следующих элементов: цвет, шрифт, графика, компоновка. При этом сеть Интернет налагает некоторые ограничения на возможности оформления веб-страницы - время загрузки, пропускная способность канала передачи данных, размер графических файлов, совместимость браузеров, передача цветовой палитры. [23]. В веб-дизайне нет жестких правил. Поскольку главная задача здесь - сделать содержимое страницы доступным для максимального количества пользователей. Залог успеха дизайнерского решения лежит в понимании потребностей аудитории и в четком представлении практического назначения будущего веб-сайта в общем, и интернет-магазина в частности. 1.4.3 Классификация веб-дизайна Перед началом разработки дизайна необходимо знать, какой вид дизайна можно применить для того, чтобы сайт был стильным. Стиль - это система визуальных элементов, призванная обеспечить цельность восприятия странички или всего сайта. Исходя из разработанной концепции и контента (текстового материала, готовых иллюстраций и рисунков), подбираются шрифты, цвет фона, способ обработки картинок, коллажей, иконок и дугих элементов. Выделяются следующие элементы, участвующие в создании стиля: ·шрифт; в пределах публикации шрифт должен иметь одинаковые характеристики (гарнитура (начертание), кегль (высота), цвет); ·абзац; в пределах публикации предпочтителен единый вид выравнивания; ·цветовая схема; единое оформление создаст у посетителя ощущение связности сайта; ·графическое оформление должно укладываться в общую цветовую схему; используя в оформлении фотографии в качестве иллюстраций, необходимо сделать грамотную тоновую и цветовую коррекцию, кадрирование, найти способ обработки краев; ·логотип. На данный момент в зависимости от контекста можно выделить следующие типы веб-дизайна: ·текстовый дизайн: почти полное отсутствие изображений, что значительно ускоряет загрузку страницы; ·полиграфический дизайн: веб-страница имитирует печатное издание. Подобный дизайн распространен на корпоративных и рекламных сайтах, т.е. там, где необходимо образно-эмоциональное наполнение содержания. Как правило, основное впечатление пользователь получает за счет пиксельной графики; ·интерфейсный дизайн: минимизирование кода и предельная оптимизация изображений, тщательно продуманная навигация и общая схема сайта; ·динамический дизайн: активное использование динамических объектов, в частности, анимации; ·смешанные типы - комбинация представленных типов дизайна [7]. С особенностями разрешения дисплея связан вопрос выбора между подстраивающимися страницами (изменяется размер и осуществляется настройка под разные размеры окон) и фиксированными по размеру (что позволяет разработчику лучше управлять размерами страницы). В пользу каждого из подходов есть веские аргументы [7]. При использовании гибких страниц (т.е. резинового дизайна), текст и элементы HTML-файла попадают в окно браузера, заполняя все доступное пространство, вне зависимости от размеров дисплея. Если размер окна браузера изменяется, элементы повторно выводятся, чтобы настроиться на новые размеры. Этот подход имеет свои достоинства и недостатки: ·гибкую страницу можно настроить для вывода на любом дисплее; ·отсутствует нежелательное свободное место; ·на больших дисплеях длина строки может оказаться чрезмерной, что значительно ухудшает условия чтения; ·возможно негармоничное расположение элементов; ·результаты гибкого дизайна непредсказуемы: страница у разных пользователей будет выглядеть по-разному. При разработке жесткой страницы дизайнер имеет больший контроль над разметкой страницы. Разрабатываются страницы фиксированной ширины, которая будет постоянной для всех пользователей, независимо от размера дисплея или изменений размеров окна. Подобный подход также имеет свои особенности: ·страница всегда будет выглядеть одинаково вне зависимости от размеров дисплея; ·страницы и столбцы с фиксированной шириной обеспечивают лучшее управление длинами строк; ·если размер данного окна браузера меньше сетки страницы, части страницы не будут видны и может потребоваться горизонтальная прокрутка, что почти всегда воспринимается как помеха. Веб-страницы могут быть полностью фиксированными или гибкими, но также могут объединять в себе оба подхода. 1.4.4 Макет страницы Макет веб-сайта (каркас) не отображает детали эстетического оформления, а имеет отношение только лишь к информации основных страниц, показывая сырую навигацию, положение текстов, графики, ключевые заголовки и любые другие элементы, которые должны находиться на странице. Макеты отображают некоторую иерархию информации, но не диктуют точную форму и место её представления [10]. Рекомендуется создавать макеты для всех основных, вторичных и шаблонизированных страниц (имеющих схожее содержимое, расположение и компоновку), а также для всех страниц с уникальными функциональными возможностями. Страницы третьего и четвертого уровней обычно текстовые, поэтому для них макеты, зачастую, бывают не нужны. Создание макетов порой может показаться утомительным, однако время, потраченное на этой стадии, обеспечит более гладкое протекание работ по дизайну и производству сайта. Макеты бывают простыми (компоновка содержимого и навигация по нескольким основным страницам сайта) и сложными (тексты, ссылки, навигация и графическое содержимое в более детальной форме). Макеты должны включать в себя все основные компоненты - контент, навигацию, функциональные элементы и сообщения, которые предназначены для этой страницы. Для облегчения задачи создания макетов используется следующий контрольный список: ·изображения, чертежи, иллюстрации; ·контент (общее направление содержимого или готовый текст); ·глобальная навигация (навигационная панель или общие элементы, которые появляются на каждой странице); ·описание основных функциональных возможностей; ·первичные ссылки (предполагаемая навигация), вторичные ссылки; ·мультимедиа (если есть); ·целевой размер окна; ·данные для заголовка и подвала (название проекта, название страницы, номер версии, дата, авторское право). 1.4.5 Правило оформления текста Около 95% пользователей не читают 80% контента на сайтах. Очень часто, заходя на веб-ресурс, пользователь в поисках информации просто просматривает (сканирует) страницу, т.е. в первую очередь он обращает внимание на заголовки и ключевые слова, и уже на основе этой информации решает, стоит ли читать текст полностью. Поэтому, с целью привлечения внимания посетителя ресурса, следует большое внимание обращать на грамотное оформление текста. Шрифтовая композиция - это способ самовыражения, выливающийся в самостоятельную творческую форму и композицию. Особенностью работы со шрифтом является его знаковость, т.е. любые символы можно видоизменять и компоновать до тех пор, пока дизайнер не достигнет задуманного эффекта. Пример творческого использования шрифта - выделение текста. Он может быть заголовком, девизом, лозунгом. Иногда для выражения мысли достаточно использовать жирность или более крупный кегль. При выборе шрифта необходимо учитывать следующие рекомендации: ·не следует использовать очень крупный размер шрифта (особенно с полужирным и курсивным начертанием) для текстовых надписей, т.к. в большинстве случаев, он чаще всего производит грубое впечатление, тогда как шрифт обычного размера при умелой подаче кажется насыщенным и располагает к вдумчивому прочтению; ·не следует применять такие приемы, как подчеркивание или перечеркивание: подобные эффекты могут ассоциироваться у пользователей с гипертекстовой ссылкой; ·навигационное меню на всех страницах должно иметь одни и те же форму, цвет, размеры и месторасположение, что обеспечивает легкость перемещения по серверу; ·не следует заполнять страницы ресурса избыточным количеством графических материалов; ·использование фонового цвета для отдельных символов текста, дает возможность создавать разнообразные композиции для заголовков, подписей к рисункам и пр. [25]. 1.4.6 Подбор шрифта Шрифт определяет визуальный облик текста, который будет влиять на восприятие, создавать определенный образ или настроение, являться средством выделения или привлечения внимания. В настоящее время существует множество шрифтов, но большую их часть можно классифицировать следующим образом: ·шрифты с засечками (Serif): "Times", "Century", "Garamond" и пр.; этот тип шрифтов состоит из символов, на концах которых располагаются "хвостики", называемые засечками (serifs); ·шрифты без засечек (Sans Serif): "Arial", "Verdana" и пр.; такие шрифты имеют округлый вид; ·декоративные (Decorative); ·рукописные (Script); ·символьные. Кроме того, для всех шрифтов можно выделить еще две группы: ·пропорциональные; ·моноширинные шрифты (все кегельные площадки знаков имеют одинаковую ширину). В веб-дизайне шрифты группируются по семействам и гарнитурам. Семейство гарнитур - специфический набор шрифтов со специфическими свойствами. Гарнитура указывает на шрифт внутри семейства. Использование шрифтов в оформления текста для электронных носителей имеет свои особенности. В частности, для оформления текстовых блоков на сайте стандартным считается использование шрифтов без засечек. Шрифты с засечками могут плохо отображаться из-за некорректного воспроизведения мелких деталей некоторыми мониторами. В настоящее время аппаратных ограничений становится меньше, поэтому уже сейчас можно встретить использование шрифтов с засечками для оформления текстовых блоков, однако использовать их следует с осторожностью. Что касается декоративных и прочих нестандартных шрифтов, то, в этом случае, главной проблемой является отсутствие нормального сглаживания в браузерах [26]. При использовании стандартных шрифтов может возникнуть проблема отсутствия курсива. Шрифты, не имеющие курсива, просто отображаются в наклонном начертании: наклоненный вправо прямой шрифт. Следствием этого является ухудшение визуального образа: изменение пропорций в штрихах, плохая читабельность и восприятие букв. Кроме того, некоторые шрифты не имеют жирного начертания. При применении к ним "font-style: bold; "или получается "математическая модель" жирного шрифта, а не реальный жирный. В веб-дизайне существует понятие "безопасные шрифты", т.е. те, которые одинаково отображаются на большинстве компьютерах. Вот некоторые из них: "Arial", "Arial Black", "Courier New", "Georgia", "Impact", "Times New Roman", "Trebuchet MS", "Verdana". "Verdana" является самым безопасным для зрения экранным шрифтом. Оптимальный для глаз размер экранного шрифта - 10-12 пунктов. При чтении текстов, набранных этим шрифтом, глазные мышцы испытывают наименьшее напряжение. 1.4.7 Подбор цвета При создании веб-ресурса при помощи цвета можно выделить важные или образующие элементы страницы: заголовки, ссылки, навигационные элементы, цитаты в тексте, маркеры, списки, рамки. Первым и главным правилом подбора цвета для будущего веб-ресурса является четкое представление о безопасных цветах. На разных типах компьютеров, мониторов и браузеров цвета с одинаковым кодом могут отличаться. Когда браузер не в состоянии правильно передать тот или иной цвет, он подбирает наиболее близкий к нему. Иногда первоначальный цвет может быть заменён чем-то совершенно неподходящим. С целью облегчения работы дизайнера была создана, так называемая, палитра безопасных цветов, которые правильно и без искажений будут отображаться в любом браузере. Следующий важный момент при создании сайта - умение правильно подбирать цвета различных элементов web-страницы так, чтобы они смотрелись цельно и гармонично. Если весь спектр цветов свернуть в виде трубки, то полученная фигура будет носить название "цветовой круг". С помощью цветового круга удобно подбирать цвета и манипулировать ими [25]. Цвета красный, зеленый и синий называются основными, желтый, голубой и пурпурный - дополнительными цветами. Основанная на представлении цвета человеком, модель HSB описывает цвет тремя основными характеристиками: оттенком, насыщенностью, яркостью. Оттенком (Hue) называют лучи света, отраженные от объекта или прошедшим сквозь него. На цветовом круге выражается в градусах от 0° до 360°. Насыщенность (Saturation) - видимая яркость или интенсивность цвета. Насыщенность определяет количество серого цвета в оттенке, измеряется в процентах от 0% (серый) до 100% (полная насыщенность). Яркость (Brightness) зависит в основном от количества световых лучей, отраженных поверхностью данного цвета, что равно его яркости по отношению к другим цветам при данном освещении. Обычно измеряется в процентах от 0% (черный) до 100% (белый) [8]. При подборе цветовой палитры необходимо придерживаться следующих правил: ) для привлечения внимания используются контрастные цвета, остальные цвета будут находиться в их диапазоне; ) контрастные цвета при смешивании образуют белый цвет, поэтому, если от каждого компонента белого цвета отнять соответствующий компонент выбранного цвета, получим его контрастную пару. Контрастные цвета, слишком "резкие" для восприятия. Исключением является пары "черный-белый" и "желтый-синий". В основном, контрастные пары применяются в рекламе для привлечения внимания. На сайте с большим количеством текстовой информации подобные сочетания лучше не использовать. Нюансовыми цветами называются цвета близкие по оттенку, но различающиеся по насыщенности и яркости. При подборе цвета важна идея, а также конкретное ее воплощение. При воплощении в жизнь собственной идеи следует довериться эмоциональным ощущениям. Сочетание цветов, выбранное для оформления сайта, называют цветовой схемой. Для того чтобы у посетителя создавалось ощущение связанности сайта, его целостности и законченности, цветовую схему повторяют на всех страничках веб-ресурса [22]. Некоторые стандартные цветовые схемы проиллюстрированы на рисунке 1.4.1. "Престижные""Здоровые""Пастельные" "Природные" Рисунок 1.4.1 - Стандартные цветовые схемы 1.4.8 Работа с графикой Изображения оказывают наибольшее воздействие на визуальное восприятие человеком веб-ресурса, т.к. именно с их помощью кодируется больше информации и в более простой для восприятия форме. Графика также помогает упростить навигацию и ориентирование пользователя. Типы графических вставок в web-страницы: ·логотип - идентификатор корпоративного стиля; ·титульная графика - предоставляет посетителям информацию по тематической направленности веб-ресурса; ·навигационные кнопки - дополнительный метод перемещения пользователя по ресурсу; ·маркеры списков - часто используются для разделения параграфов и абзацев в документе; ·разделительные линии - обычно используются для разделения текстов и облегчения их восприятия; ·фоновые рисунки - улучшают внешний вид страниц, однако, зачастую, ухудшают восприятие пользователем текстовой информации и становятся визуальным шумом; ·фотографии - обычно используются для иллюстрирования информации, привлечения внимания, в оформлении основных элементов сайта (например, в титульной графике). Простейшим методом внедрения изображений в HTML-документ происходит с помощью тега Альтернативный текст - текст, который будет показан пользователю в случае невозможности вывода изображения. Рекомендуется всегда указывать в атрибутах тега ширину и высоту с помощью атрибутов |