 |
Этапы разработки веб-сайта
|
|
|
|
На сегодняшний день существуют несколько этапов разработки веб-сайта:
· Проектирование сайта или веб-приложения (сбор и анализ требований, разработка технического задания, проектирование интерфейсов);
· Разработка креативной концепции сайта;
· Создание дизайн-концепции сайта;
· Создание макетов страниц;
· Создание мультимедиа и FLASH-элементов;
· Вёрстка страниц и шаблонов;
· Программирование (разработка функциональных инструментов) или интеграция в систему управления содержимым (CMS);
· Оптимизация и размещение[уточнить] материалов сайта;
· Тестирование и внесение корректировок;
· Открытие проекта на публичной площадке;
· Обслуживание работающего сайта или его программной основы.
В зависимости от текущей задачи, какие-то из этапов могут отсутствовать, либо быть тесно связаны один с другим.
Создание технического задания
Составлением технического задания для специалистов занимается менеджер проекта. Работа с заказчиком начинается с заполнения брифа, в котором заказчик излагает свои пожелания относительно визуального представления и структуры сайта, указывает на ошибки в старой версии сайта, приводит примеры сайтов конкурентов. Исходя из брифа, менеджер составляет техническое задание, учитывая возможности программных и дизайнерских средств. Этап заканчивается после утверждения технического задания заказчиком. Важно сразу отметить, что этапы проектирования веб-сайтов зависят от многих факторов, таких как объём сайта, функциональность, задачи, которые должен выполнять будущий ресурс и многое другое. Однако, есть несколько этапов, которые в обязательном порядке присутствуют в планировании любого проекта.
|
|
|
Дизайн основной и типовых страниц сайта
Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создаёт один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.
При этом дизайнер должен учитывать ограничения стандартов HTML (не создавать дизайн, который затем не сможет быть реализован стандартными средствами HTML). Исключение составляет Flash-дизайн.
Количество эскизов и порядок их предоставления оговаривается с проект-менеджером. Также менеджер проекта осуществляет контроль сроков. В больших веб-студиях в процессе участвует арт-директор, который контролирует качество графики. Этап также заканчивается утверждением эскиза заказчиком.
HTML-верстка
Утверждённый дизайн передаётся HTML-верстальщику, который «нарезает» графическую картинку на отдельные рисунки, из которых впоследствии складывает HTML-страницу. В результате создаётся код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться какшаблоны.
Программирование
Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS — системы управления сайтом. Веб-разработчики часто называют CMS «движком».
В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт, состоящий из заменяемых частей. «Программист» — в данном случае правильно будет назвать его просто специалистом по CMS — должен заменить стандартный шаблон, поставлявшийся с CMS, на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «веб-дизайна».
При программировании сайта специалисту назначаются контрольные точки сроков.
|
|
|
Завершающим этапом разработки сайта является тестирование
Процесс тестирования может включать в себя самые разнообразные проверки: вид страницы с увеличенными шрифтами, при разных размерах окна браузера[1], при отсутствии флэш-плеера и многие другие. Также — юзабилити-тестирование.
Обнаруженные ошибки отправляются на исправление до тех пор, пока не будут устранены. Сроки контролирует менеджер проекта. Также, на этом этапе привлекают к работе дизайнера, чтобы он провёл авторский надзор.
Размещение сайта в Интернет
Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.
Наполнение контентом и публикация
Сайт наполняют контентом — текстами, изображениями, файлами для скачивания и т. д. Иногда тексты составляются специалистом студии, иногда контентом занимается ответственное лицо со стороны заказчика. Это решается на этапе составления технического задания. В случае если контент составляется представителем студии, то это происходит и утверждается параллельно с другими этапами проекта.
Внутренняя SEO-оптимизация
Связана с некоторыми изменениями самого сайта. SEO-оптимизация начинается с определения семантического ядра. Здесь определяются такие ключевые слова, которые привлекут наиболее заинтересованных посетителей, по которым выиграть конкуренцию проще. Затем эти слова вносятся на сайт. Тексты, ссылки, другие теги адаптируются так, чтобы поисковые системы могли их успешно находить по ключевым словам.
Внешняя SEO-оптимизация
Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка сайта. К разработке сайта внешняя SEO-оптимизация не имеет отношения. SEO-оптимизация классифицируется на «белую» и «черную» (такую, после которой сайт за две недели попадает в топ, а потом в бан поисковиков). Настоящая, «белая» SEO-оптимизация, это трудоёмкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.
Сдача проекта
Заказчик или его доверенное лицо просматривают готовый проект и в случае, если все устраивает, то подписывают документы о сдаче проекта.
Также, на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоне сайта.
|
|
|
5.Принципы проектирования веб-ресурсов (сайтов)
• Именно идеи будут основой проектирования. Это самое важное, старт всего проекта. Очень важно не делать копии уже существующих проектов, почти всегда стоит задача сделать лучше, чем любой прямой или косвенный конкурент. Причем лучше на несколько порядков, иначе не получится переманить целевую аудиторию с тех сайтов, где она уже обитает. Идеи должен генерировать как проектировщик, так и инициатор проекта, тот самый носитель главной идеи.
• Важнейшим условием хорошей работы проектировщика сайта является абсолютное желание угодить пользователям, для которых и делается сайт. При этом любые технологии, которые планируется применить при создании сайта, должны приниматься с учетом упрощения работы пользователей.
1. Проектирование для пользователей
• Цель любого бизнеса - зарабатывание денег. Цель любого сайта - работать на целевую аудиторию. Сайт должен отвечать потребностям максимального количества пользователей. Он должен быть доступен и удобен, информативен и функционален для всех, кто им постоянно пользуется или вполне может быть использован в ближайшем будущем
2. Ориентация на широкий круг пользователей
• Для нормального функционирования сайта необходима обратная связь с пользователями.Чем более доступны и удобны функциональные способы взаимоотношений сотрудников компании и клиентов, тем более эффективным становится использование сайта в работе компании.
• Пользователям должно быть достаточно комфортно на сайте. Для этого необходимо внедрять различные средства информационной поддержки пользователей: публиковать на сайте справочные материалы по работе с относительно сложными процессами, публиковать ответы на часто задаваемые вопросы и др.
3. Поддержка пользователей
• Прежде всего это касается технологий. И вот почему. Для того чтобы «угодить» как можно большему количеству пользователей, интернет-разработчикам приходится ориентироваться на самые распространенные технологии. Любое нововведение в Интернет должно пройти достаточно жесткое тестирование на пригодность для большинства пользователей. В противном случае сайт, использующий «эксклюзивные» технологии, может оказаться малопосещаемым.
|
|
|
4. Применение проверенных временем методов
• Еще совсем недавно считалось, что разработкой и сопровождением сайта может заниматься один человек. Называли такого человека веб-мастер. Он должен был совмещать множество функций.
• Вот некоторые из них: системный администратор, администратор баз данных, программист, дизайнер, HTML-кодер (верстальщик), журналист, маркетолог, менеджер веб-проекта и многое другое.
• Однако при правильном планировании сайта необходимо понимать, что вряд ли найдется человек, который способен одинаково хорошо выполнять все эти функции. Понятно, что в чем-то он обязательно окажется профаном.
5. Коллективная работа
• А выход очень прост. Вместе с внедрением сайта следует создать новые бизнес-процессы, в которых сайт был бы инструментом работы. Например, подумать о том, кто мог бы готовить и публиковать новости и пресс-релизы, а равно и общаться через сайт с представителями СМИ и общественностью, кто мог бы взять на себя обязанности обрабатывать поступающие через сайт заказы на услуги и продукты, консультировать потенциальных покупателей, следить за аккуратной публикацией прайс-листов, кто смог бы продумать и осуществить комплексную рекламную компанию для сайта и т.д.
• К сожалению, Интернет - не та среда, в которой можно закрывать глаза на излишества. Слабые каналы связи, высокая стоимость доступа, обилие конкурентной информации, сложность ориентации в огромном количестве информации, трудность чтения текста с экрана монитора - вот некоторые из проблем, с которыми постоянно сталкиваются пользователи Интернета. При проектировании сайта необходимо их учитывать.
• Список наиболее часто встречаемых излишеств, от которых стоит отказаться ради удобства пользователей, таков:
• • Сложные, трудно запоминаемые названия сайтов.
• • Использование нестандартных технологий на стороне клиента, избыточная нагрузка на клиента (в данном контексте «клиент» - это браузер, которым пользуются посетители сайта).
• • Излишнее использование графики и анимации.
• • Перегруз страниц информацией.
• • Излишнее количество пунктов в меню (более 6-8).
• • Слишком много «воды» в статьях. Статьи плохо структурированы.
|
|
|
• • Использование на сайте излишних промежуточных страниц, не несущих существенной информационной нагрузки.
• • Нерациональное использование верхней части страниц (много пустого пространства или несущественной информации).
6. Отсутствие излишеств
6. Место и роль веб-проектирования в системе социокультурных знаний
7. Логическая структура сайта
Логическая структура сайта может быть представлена в виде четырех основных моделей: линейная модель, модели "решетка", "дерево" (иерархия) и "паутина". Кроме того, существуют различные комбинации на базе основных моделей, позволяющие реализовать любую логическую структуру сайта.
Строго линейная структура сайта используется достаточно редко, поскольку позволяет посетителям сайта переходить только от предыдущей страницы к последующей, и никак иначе. Такое представление информации с одной стороны облегчает процесс взаимодействия с посетителями: уже на этапе создания сайта можно довольно точно предсказать поведение посетителей. С другой стороны подобная организация структуры сайта не оставляет посетителям свободы выбора, что может им не понравиться.
Поэтому на практике линейная структура сайта применяется с некоторыми видоизменениями, такими как пропуск определенных страниц, боковые ответвления. Однако чрезмерное увлечение ответвлениями превращает линейную структуру в иерархическую.
Применяется линейная структура сайта для различных онлайн-презентаций, описания пошаговых процессов. Основное преимущество применения такой модели организации сайта заключается в предсказуемости поведения посетителя на сайте, благодаря чему возможно предугадать действия посетителей еще на этапе создания сайта.
Линейная структура сайта не подходит для сайтов с большим объемом информации. Для более удобного представления больших объемов информации используются другие модели логической структуры, например, «решетка».
Логическая структура сайта "решетка" нередко встречается при организации интернет-магазинов. Решетка представляет собой двунаправленную линейную структуру, в который присутствуют и горизонтальные, и вертикальные взаимосвязи между страницами.
Например, если в каталоге интернет магазина товары объединены в категории по виду (брюки, куртки, платья) и в категории по цене (дешевые, средние по цене, дорогие), то такая структура позволяет посетителям просматривать товары по обоим признакам (вид и цена). Как следствие, посетители чувствуют себя удовлетворенными благодаря предоставленной свободе выбора.
Логическая структура сайта "дерево" - это наиболее часто встречающаяся модель организации сайта. "Дерево" – иерархическая структура – позволяет посетителям сайта по своему желанию управлять глубиной посещения сайта. Посетители могут заходить только на страницы верхних уровней иерархии или же «спуститься» к нижним уровням. При этом свобода выбора посетителей зависит от «ширины дерева».
Если посетителям для достижения конечной цели необходимо сделать слишком много щелчков мыши, то иерархическая структура сайтов может оказаться в данном случае слишком узкой. Посетителей раздражает бесконечное «щелканье», не приносящее ожидаемых результатов.
В то же время, слишком широкое «дерево», основываясь на очень большом количестве вариантов выбора, может заставить посетителей потратить много времени на изучение предоставленных вариантов. Это также приводит к раздражению посетителей и они покидают сайт.
Если логическая структура сайта запутана и непонятна, то такую модель организации сайта принято называть "паутиной". Такая структура сайта может появиться вследствие неправильного проектирования сайта или же намеренно, для обеспечения более выразительного представления информации. К примеру, статьи о технических изделиях могут ссылаться на схемы этих изделий, нормы и требования к производству изделий, ряд других документов. Такой подход позволяет посетителям получить максимально полную информацию.
Если модель организации сайта выбрана верно, а логическая структура сайта соответствует потребностям посетителей, то юзабилити и эффективность такого сайта будут высокими. Поэтому к разработке структуры сайта следует подойти самым тщательным образом.
8. Этапы анализа и проектирования веб-узла
9. ЭЛЕМЕНТЫ ДИЗАЙНА(см.презентацию!)
10. Основные средств и принципы композиции в дизайне
11. Дизайн вэб-сайтов(Типы сайтов, устройство сайта, формат страницы)
Веб-дизайн (от англ. Web design) — отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб- интерфейсов для сайтов или веб-приложений.
Веб-дизайн — вид графического дизайна, направленный на разработку и оформление объектов информационной среды интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества. Веб-дизайнеры проектируют логическую структуру веб-страниц, продумывают наиболее удобные решения подачи информации и занимаются художественным оформлением веб-проекта.
В результате пересечения двух отраслей человеческой деятельности грамотный веб-дизайнер должен быть знаком с последними веб-технологиями и обладать соответствующими художественными качествами. Большую часть специалистов, работающих в области дизайна, обычно концентрирует в себе такое творческое образование, как студия дизайна.
Сайты можно разделить на несколько основных типов: Сайт- визитка- сайты этого типа имеют представительские цели
и дают возможность разместить краткую информацию о вашей фирме,
сфере ее деятельности и предоставляемых услугах.
-от 5 до 20-ти HTML-страниц:о компании,
услуги, прайс-лист, контакты, план проезда и т.п.
-стиль – сдержанный деловой;
-дизайн - индивидуальный, с учетом фирменного стиля заказчика;
-система управления сайтом (CMS).
Корпоративный сайт
Идеально подходит для обеспечения имиджевого присутствия в Сети; сайт служит для предоставления подробной информации о компании, истории торговой марки, сведений об оказываемых услугах или поставляемых товарах; корпоративный сайт обычно содержит ленту новостей компании, средства публикации информации о рекламных и торговых акциях, информацию для прессы и другие сведения; нередко корпоративные сайты сочетают информацию о компании с каталогом продукции; используется эксклюзивный оригинальный дизайн, выгодно представляющий компанию; использование нестандартных идей и решений в оформлении, процентное соотношение текст/графика = 50/50
Интернет-магазины предназначены для продажи товаров или услуг через Интернет. В отличие от интернет-каталога, такие сайты содержат функции заказа и оплаты товаров через Интернет, а также работы с корзиной покупок. Используются различные системы расчётов: от пересылки товаров наложенным платежом или автоматической пересылки счета по факсу, до расчётов с помощью пластиковых карт.
Подробная текстовая информация о товарах, а так же тематические статьи на сайте, оказывают положительное влияние на посетителей и побуждают к покупке. Часто на главную страницу выносятся новинки товаров, "хиты продаж", специальные предложения.
-от 100-ти до 1000 HTML-страниц;
-стиль – виртуальный торговый зал;
-дизайн – индивидуальный, с учетом фирменного стиля заказчика;
-поисковая оптимизация сайта, ориентированная под номенклатуру товаров, услуг;
-система управления сайтом (CMS).
Промо-сайт (рекламный сайт) – интернет ресурс, рекламирующий отдельный продукт, услугу (узкий спектр продуктов или услуг), web-сайты посвященные разовым событиям и акциям (выставка, конференция, праздник, концерт) либо продвигающие бренд. Основные составляющие – рекламная информация об объекте рекламы, различные визуальные приемы удержания фокуса посетителя на объекте, описание преимуществ, актуальность информации. Рекламные тексты высокого качества, текстовые маркетинговые элементы и лаконичность имеют важное значение для промо-ресурсов. Такие сайты напоминают рекламные ролики, в частности, это достигается за счет Flash-анимации.
Жизненный срок промо-сайтов ограничен, но "прожить" его требуется максимально ярко и эффективно.
-от 5-ти до 50 HTML-страниц;
-стиль – яркий, красочный, запоминающийся;
-дизайн - индивидуальный, с учетом требований заказчика;
-использование Flash-анимации;
-система управления сайтом (CMS);
Сайт-каталог представляет собой корпоративный web-сайт фирмы, предлагающей большой ассортимент товаров. Предусматривает специальное программное обеспечение для добавления и удаления товаров в рубрики и подрубрики, быстрого создания разветвленной структуры товарных категорий, удобного ввода описания и изображения товаров. Сайт содержит презентации, подробную документацию, технические и потребительские данные, отзывы экспертов, цены на товары и услуги. Посетители заказывают товары с помощью электронной формы «заказа» - обратной связи.
Возможно дальнейшее развития и трансформация интернет-каталога в интернет-магазин.
-от 10-ти до 500 HTML-страниц;
-стиль – сдержанный, деловой; яркий, запоминающийся (определяет специфика товаров, услуг);
-дизайн – индивидуальный, с учетом фирменного стиля заказчика;
-поисковая оптимизация сайта, ориентированная под номенклатуру товаров, услуг;
-система управления сайтом (CMS).
Сайт-каталог представляет собой корпоративный web-сайт фирмы, предлагающей большой ассортимент товаров. Предусматривает специальное программное обеспечение для добавления и удаления товаров в рубрики и подрубрики, быстрого создания разветвленной структуры товарных категорий, удобного ввода описания и изображения товаров. Сайт содержит презентации, подробную документацию, технические и потребительские данные, отзывы экспертов, цены на товары и услуги. Посетители заказывают товары с помощью электронной формы «заказа» - обратной связи.
Возможно дальнейшее развития и трансформация интернет-каталога в интернет-магазин.
-от 10-ти до 500 HTML-страниц;
-стиль – сдержанный, деловой; яркий, запоминающийся (определяет специфика товаров, услуг);
-дизайн – индивидуальный, с учетом фирменного стиля заказчика;
-поисковая оптимизация сайта, ориентированная под номенклатуру товаров, услуг;
-система управления сайтом (CMS).
Для ресурсов этого типа характерно большое количество информационных материалов (новости, аналитические статьи, репортажи, интервью, комментарии, обзоры и т. д.) по тематике сайта. Материалы регулярно обновляются, удобная навигация и поиск, дополнительные сервисы, интерактивные формы: форум, чат, обсуждения, анкеты, опросники, голосования и др.
Такой сайт представляет собой сетевое издание, информационное агентство или интернет-представительство off-лайнового СМИ (печатных изданий, телевизионных каналов и радиостанций и т. д.).
Устанавливается система управления контентом - CMS, обеспечивающая возможность добавления и редактирования информации большим числом пользователей.
-от 100 HTML-страниц;
-стиль – строгий, официальный;
-дизайн – индивидуальный, авторский; с учетом фирменного стиля заказчика;
-система управления сайтом (CMS).
Страницы сайтов — это набор текстовых файлов, размещенных на языке HTML. Эти файлы, будучи загруженными посетителем на его компьютер, понимаются и обрабатываются браузером и выводятся на средство отображения пользователя (монитор, принтер или синтезатор речи). Язык HTML позволяет форматировать текст, различать в нём функциональные элементы, создавать гипертекстовые ссылки (гиперссылки) и вставлять в отображаемую страницу изображения, звукозаписи и другие мультимедийные элементы. Отображение страницы можно изменить добавлением стилей на языке CSS, что позволяет централизовать в определенном файле все элементы форматирования (размер и цвет заглавных букв 2-го уровня, размер и вид блока вставки и другое) или сценариев на языке JavaScript, с помощью которого имеется возможность просматривать страницы с событиями или действиями.
Страницы сайтов могут быть простым статичным набором файлов или создаваться специальной компьютерной программой на сервере. Она может быть либо сделана на заказ для отдельного сайта, либо быть готовым продуктом, рассчитанным на некоторый класс сайтов. Некоторые из них могут обеспечить владельцу сайта возможность гибкой настройки структурирования и вывода информации на веб-сайте. Такие управляющие программы называются системами управления содержимым.
Сайты могут содержать подразделы, ориентированные целиком на ту или иную аудиторию. В этом случае такие разделы называют версиями сайта. Аудитория может различаться по виду используемого оборудования, по используемому языку аудитории. К примеру, известны так называемые мобильные версии сайта, предназначенные для работы с ними с использованием смартфона. Сайты могут иметь языковые версии (русскоязычная, англоязычная и другие).
Каких размеров стоит делать сайт?
Во-первых, если вам заказали дизайн сайта - забудьте о таких концепциях как dpi или метрическая система. Блоки и вставляемые на сайт изображения измеряются в пикселях или процентах (по ширине/высоте) от размера окна браузера (или родительского элемента).
Если размер сайта задан в процентах - это адаптивный (или резиновый/респонсивный) дизайн. Адаптивный или респонсивный дизайн - довольно удобная штуковина. Но, если вы не до конца понимаете, что делаете - используйте фиксированные размеры.
Если заказчик настаивает на адаптивном или респонсивном дизайне, то, прежде чем приступить к исполнению задачи, подумайте хорошенько, какие блоки будут растягиваться при изменении размеров окна браузера, а какие - нет. Вы можете создать дизайн таким способом.
Создайте несколько файлов под стандартные разрешения экранов (к примеру, 1280 на 1024, 1920 на 1280 и 1024 на 768). С их помощью вы получите наглядное представление о том, как выглядит сайт на различных разрешениях. В приложении к шаблону пропишите максимальные и минимальные размеры блоков:
12. Принципы успешной навигации (см.презентацию)
Чем легче работать с сайтом, тем больше вероятность повторного использования, заказа товара, заполнения формы и совершения пользователем других полезных действий.
Так повелось, что большинство сайтов имеют уникальное оформление и структуру. Это приводит к тому, что новым пользователям приходится каждый раз изучать принцип устройства навигации, чтобы добраться до нужной информации или совершить задуманное.
Задача дизайнера и проектировщика — максимально сократить время, которое тратит новый посетитель на подобное обучение и сделать так, чтобы информация стала максимально доступной. Ключ к успеху в решении этой задачи — построение правильной навигационной системы.
Хорошая навигация соответствует следующему набору принципов.
1. Простая и логичная структура данных
В основе удобного интерфейса лежит правильная организация данных. Прежде чем браться за оформление, имеет смысл детально продумать информационную архитектуру проекта.
Данные должны быть распределены по страницам или экранам таким образом, чтобы новый посетитель, не зная полной картины, мог быстро оценить, как добраться до искомой информации. Для этого в первую очередь необходимо построить логичную иерархическую структуру из того набора данных, который был предусмотрен на проекте.
2. Единая навигационная среда
Оформление и расположение ключевых элементов навигации, а также сценарии их поведения должны оставаться неизменными на всех страницах одного уровня.
3. Ответ на вопрос «Где я?»
Страницы должны быть спроектированы таким образом, чтобы пользователь всегда мог быстро оценить их положение в общей иерархической структуре проекта и при желании подняться на один или несколько уровней выше. Один из действенных способов добиться этого — показать, какой путь должен быть пройден с главной страницы до текущей.
Cтальные болты за 400р
Если меню содержит набор ссылок на страницы, одна из которых открыта в данный момент, соответствующий элемент навигации должен быть неактивным и обладать отличительным признаком.
4. Предсказуемость
Разработчик знает свой продукт от и до, а новый посетитель видит его впервые. В таких условиях перед создателями системы возникает важная задача: сделать интерфейс предсказуемым настолько, чтобы пользователь сам всегда мог приблизительно оценить, чего ожидать от того или иного действия.
Следует позаботиться об отсутствии элементов навигации, значение и функции которых могут быть непонятны или истолкованы неоднозначно. Для этого необходимо обеспечить соответствие внешнего вида функциональных элементов привычным сценариям поведения.
В случае, когда на странице остаются элементы, результат взаимодействия с которыми сложно предсказать с первого взгляда, имеет смысл добавлять к ним соответствующие пояснения.
Если сценарий предполагает последовательный переход по заданному набору страниц или состояний, например пошаговое заполнение объемной анкеты, имеет смысл давать пользователю оценить прогресс и показывать, какие шаги еще предстоит пройти.
5. Масштабируемость
После запуска сайты начинают расти и изменяться. Необходимо, чтобы система выдерживала появление новых элементов и при этом сохраняла свою работоспособность
Для этого уже на этапе проектирования имеет смысл закладываться на двукратное увеличение либо сокращение первоначального объема информации.
6. Контраст
Хорошая навигация помогает реализовывать основные пользовательские сценарии и позволяет пользователю в любой момент времени знать ответ на вопрос «Что делать дальше?».
Дизайнер должен спроектировать систему таким образом, чтобы пользователь мог легко пройти по нужному маршруту до совершения ключевого действия. В интернет-магазине это заказ товара, на новостном сайте — чтение большого количества новостей, на сайте компьютерной программы — скачивание файла и так далее.
Чтобы добиться этого, наиболее важные в данном контексте элементы навигации следует делать контрастными и легкодоступными.
13. Типы связей между гипертекстовыми документами. Абсолютный и относительный путь URL
HTML ссылки составляют основу Интернета, ведь именно они связывают все веб-страницы в единую сеть. Ссылка является указателем на фактическое местонахождение объекта.
Ссылки, или гиперссылки, создаются с помощью тега <a>. Ссылка состоит из двух частей: указателя ссылки и адресной части ссылки.
Указатель ссылки представляет собой фрагмент текста или изображение, который визуально выделяется в документе (по умолчанию, синим цветом и подчеркиванием).
Адресная часть ссылки для пользователя не видна, она представляет собой URL-адрес объекта, к которому необходимо перейти.
Единый указатель ресурсов (URL) определяет местонахождение ресурса. В общем виде имеющий следующий формат:
метод://имя_сервера:порт/путь#якорь.
Наиболее распространенные методы доступа: file, http, ftp, mailto.
Метод file обеспечивает чтение файла с локального диска, например:
file:/gallery/pictures/summer.html
Метод http предоставляет доступ к веб-странице по протоколу HTTP, например:
http://www.anysite.ru/
Метод ftp осуществляет запрос к FTP-серверу на получение файла, например:
ftp://pgu/directory/library
Метод mailto запускает сеанс почтовой связи с указанным адресатом и хостом, например:
mailto: nika@gmail.com
hostport — адрес сервера с соответствующим номером порта. Этот параметр отображает так называемую машинную адресацию. Машинная адресация может быть числовой или буквенной.
path — путь.
Вместо аргумента protocol может стоять:
http — любая гипертекстовая информация.
ftp — протокол передачи файлов.
telnet — терминальный доступ.
gopher — «предшественник» WWW.
afs — файловая система Internet.
news — конференции Usenet.
wais — система баз данных Internet.
Абсолютный URL
Абсолютный путь содержит всю информацию, необходимую браузеру для нахождения файла. Абсолютный путь включает: обозначение протокола, доменный или IP-адрес компьютера (хоста), папку (путь к файлу) и имя файла. Например,
http://www.anysite.ru/папка/file.html
Если файл находится в корневой папке, то путь к файлу будет отсутствовать:
http://www.anysite.ru/file.html
В случае отсутствия имени файла будет загружаться веб-страница, которая задана по умолчанию в настройках веб-сервера:
http://www.anysite.ru/
http://www.anysite.ru/папка/
Наличие завершающего слеша / означает, что обращение идет к папке, а если его нет – то напрямую к файлу.
Относительный URL
Относительный URL-адрес описывает путь к указанному документу относительно текущего, он определяется с учетом местоположения веб-страницы, на которой находится ссылка.
Относительные ссылки используются при создании ссылок на другие документы на одном и том же сайте. В таком случае не указывается протокол или домен, а только сам путь к файлу.
Например, вам нужно перейти со страницы http://www.anysite.ru/папка1/папка2/file1.html на страницу
http://www.anysite.ru/папка1/папка2/file2.html.
Если нужная веб-страница находится в той же папке, что и веб-страница, содержащая ссылку, то ссылка будет иметь следующую запись: <a href="file2.html">Анкор (текст) ссылки</a>
Если со страницы http://www.anysite.ru/папка1/папка2/file1.html нужно перейти на страницу http://www.anysite.ru/папка1/папка2/папка3/file2.html, то ссылка будет такой: <a href="папка3/file2.html">Анкор (текст) ссылки</a>
При переходе со страницы http://www.anysite.ru/папка1/папка2/file1.html на страницу http://www.anysite.ru/папка1/file2.html ссылка будет иметь следующий вид: <a href="../file2.html">Анкор (текст) ссылки</a>
В случае перехода с http://www.anysite.ru/папка1/папка2/папка3/file1.html на страницу http://www.anysite.ru/папка1/file2.html ссылка будет такой: <a href="../../file2.html">Анкор (текст) ссылки</a>
14. Верстка русскоязычной и англоязычной версии страницы, переключение между ними (кодировка кириллицы).(см.презентацию)
15. Цветовые модели.Сочетаемость цветов. Воздействие цвета на человека и его психику.
Цветовая модель — термин, обозначающий абстрактную модель описания представления цветов в виде кортежей чисел, обычно из трёх или четырёх значений, называемых цветовыми компонентами или цветовыми координатами. Вместе с методом интерпретации этих данных множество цветов цветовой модели определяет цветовое пространство.
Виды цветовых моделей: CMY(K), RGB, Lab, HSB
RGB - аббревиатура английских слов Red, Green, Blue — красный, зелёный, синий. Аддитивная (Add, англ. - добавлять) цветовая модель, как правило, служащая для вывода изображения на экраны мониторов и другие электронные устройства. Как видно из названия – состоит из синего, красного и зеленого цветов, которые образуют все промежуточные. Обладает большим цветовым охватом.
CMYK - Cyan, Magenta, Yellow, Key color - субтрактивная (subtract, англ. - вычитать) схема формирования цвета, используемая в полиграфии для стандартной триадной печати. Обладает меньшим, в сравнении с RGB, цветовым охватом.
CMYK называют субстрактивной моделью потому, что бумага и прочие печатные материалы являются поверхностями, отражающими свет. Удобнее считать, какое количество света отразилось от той или иной поверхности, нежели сколько поглотилось. Таким образом, если вычесть из белого три первичных цвета - RGB, мы получим тройку дополнительных цветов CMY. «Субтрактивный» означает «вычитаемый» — из белого вычитаются первичные цвета.
В цветовом пространстве Lab значение светлоты отделено от значения хроматической составляющей цвета (тон, насыщенность). Светлота задана координатой L (изменяется от 0 до 100, то есть от самого темного до самого светлого), хроматическая составляющая — двумя декартовыми координатами a и b. Первая обозначает положение цвета в диапазоне от зеленого до пурпурного, вторая — от синего до желтого. В цветовом пространстве Lab значение светлоты отделено от значения хроматической составляющей цвета (тон, насыщенность). Светлота задана координатой L (изменяется от 0 до 100, то есть от самого темного до самого светлого), хроматическая составляющая — двумя декартовыми координатами a и b. Первая обозначает положение цвета в диапазоне от зеленого до пурпурного, вторая — от синего до желтого.
В отличие от цветовых пространств RGB или CMYK, которые являются, по сути, набором аппаратных данных для воспроизведения цвета на бумаге или на экране монитора (цвет может зависеть от типа печатной машины, марки красок, влажности воздуха на производстве или производителя монитора и его настроек), Lab однозначно определяет цвет. Поэтому Lab нашел широкое применение в программном обеспечении для обработки изображений в качестве промежуточного цветового пространства, через которое происходит конвертирование данных между другими цветовыми пространствами (например, из RGB сканера в CMYK печатного процесса). При этом особые свойства Lab сделали редактирование в этом пространстве мощным инструментом цветокоррекции.
Любой цвет в этой модели характеризуется тоном (Hue), насыщенностью (Saturation) и яркостью (Brightness). Тон - это собственно цвет. Насыщенность - процент добавленной к цвету белой краски. Яркость - процент добавленной чёрной краски. Итак, HSB - трёхканальная цветовая модель. Любой цвет в HSB получается добавлением к основному спектру чёрной или белой, т.е. фактически серой кра
|
|
|
