Методические указания по выполнению курсовой работы по дисциплине «WEB-технологии»

1. Требования к курсовой работе

Общие положения

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

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

Курсовая работа по дисциплине «Web - технологии» выполняется студентами после освоения программы дисциплины «Web - технологии», основ языка гипертекстовой разметки (HTML) и каскадных таблиц стилей (CSS).

В ходе выполнения курсовой работы студент должен разработать Web - сайт. В рамках курсовой работы студент должен продемонстрировать:

знание теоретических основ web - технологий;

умения использовать графические редакторы для подготовки графического контента;

умения готовить текстовый и графический контент для размещения на страницах сайта;

умение проводить поиск и анализ информации;

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

умения создавать страницы уровня Web - сайта в соответствии с разработанным интерфейсом начальной страницы, соблюдая отличительные особенности визуализации вложенных уровней иерархии сайта;

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

 Выбор темы курсовой работы

Тема курсовой работы выбирается:

из числа тем предложенных преподавателем. Примерный перечень приведен в Приложении 1;

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

Технология организации выполнения курсовой работы и ее оценка

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

Основными функциями руководителя курсовой работы являются:

консультирование по вопросам содержания и последовательности выполнения курсовой работы;

оказание помощи студенту в подборе необходимой литературы;

контроль хода выполнения курсовой работы.

Для обеспечения управления качеством учебной деятельности студентов можно использовать рейтинговую систему контроля, которая обеспечивает систематическую обратную связь, позволит отследить качество выполнения курсовой работы на всех этапах. Описание рейтинговой системы контроля по выполнению курсовой работы приведено в «Основных этапах выполнения курсовой работы и требования к отчетности (Таблица 1), ориентировочные критерии оценки отчетности по выполнению этапа курсовой работы (Таблица 2) и «Критерии оценки выполнения и защиты курсовой работы» (Таблица 3).

Для подведения итогов текущей работы студентов над курсовой работой (перед выходом на защиту) накопленные баллы (R_it) переводятся в 100 - балльную шкалу, умножив итоговый результат на отношение 70/R_max. Где R_max – максимальная сумма баллов за текущую работу по курсовой работе.

При оценивании результатов работы студента над этапами курсовой работы преподаватель руководствуется «Критериями максимальной оценки выполнения этапа курсовой работы» и «Ориентировочными критериями оценки отчетности по выполнению этапа курсовой работы».

Критерии максимальной оценки выполнения этапа курсовой работы:

Своевременность сдачи отчетности.

Правильность и полнота раскрытия вопросов каждого этапа курсовой работы:

глубина проработки материала;

правильность и полнота разработки поставленных вопросов;

правильность использования понятий, терминов;

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

Правильность проектирования и реализации Web - сайта:

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

степень решения проблемы взаимодействия разнородного информационного наполнения страницы;

грамотность создания макетов страниц при помощи основ языка гипертекстовой разметки (HTML) и каскадных таблиц стилей (CSS).

Соответствие текста пояснительной записки следующим требованиям:

четкость структуры;

логичность и последовательность;

точность приведенных сведений;

ясность и лаконичность изложения материала;

соответствие изложения материала нормам русского литературного языка.

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

Весь материал - смотрите документ.

Методические указания

по выполнению курсовой работы

по дисциплине «WEB-технологии»

для специальности 230103 «Автоматизированные системы
обработки информации и управление»

(углубленный уровень)

2013

Методические указания разработаны в соответствии с «Рекомендациями по организации выполнению и защиты курсовой работы (проекта) по дисциплине в образовательных учреждениях среднего профессионального образования» (Письмо Министерства общего и профессионального образования РФ от 05 апреля 1999 г. № 16-52-55ин/16-13).

Содержание

1. Требования к курсовой работе 5

1.1. Общие положения 5

1.2. Выбор темы курсовой работы 6

1.3 Технология организации выполнения курсовой работы и ее оценка 6

1.4. Отчетность по курсовой работе 13

2. Этапы процесса выполнения курсовой работы 14

2.1.Выявление целей создания сайта и постановка проблемы, решаемой с созданием сайта 14

2.1.1. Определение целей создания сайта 14

2.1.2. Определение целевого сегмента потребителей 14

2.2. Выбор темы 15

2.2.1. Анализ сайтов - «аналогов» проекта 15

2.2.2. Обоснование типа разрабатываемого Web-узла 17

2.3. Создание наброска сайта 17

2.3.1. Перечень требований по содержимому и функциям Web-сайта 17

2.3.2. Создание рабочего наброска сайта 19

2.3.3. Создание карты сайта 20

2.4. Разработка набора макетов страниц 20

2.4.1. Определение функциональных зон страниц сайта 20

2.4.2. Нахождение идеи пластического решения, определение колорита страниц 22

2.4.3. Разработка композиционного решения страниц сайта 23

2.4.4. Нахождение идеи решения основных зон страниц сайта 23

2.5. Декомпозиция макета на структурные блоки и модули 24

2.5.1. Разработка модульной сетки на основе утвержденного макета 24

2.5.2. Разработка руководства по стилю 25

2.6. Оптимизация контента сайта 26

2.7. Верстка 28

2.7.1. Разработка логической и физической структуры сайта 28

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

2.8. Тестирование сайта 30

Список рекомендуемых источников 31

Приложение 1 34

Приложение 2 36

Приложение 3 ………………………………………………………………………37

Приложение 4 ………………………………………………………………………38

Приложение 5 ………………………………………………………………………40

Приложение 6 ………………………………………………………………………47

1. Требования к курсовой работе

1. Общие положения

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

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

Курсовая работа по дисциплине «Web- технологии» выполняется студентами после освоения программы дисциплины «Web-технологии», основ языка гипертекстовой разметки (HTML) и каскадных таблиц стилей (CSS).

В ходе выполнения курсовой работы студент должен разработать Web-сайт. В рамках курсовой работы студент должен продемонстрировать:

• знание теоретических основ web-технологий;

• умения использовать графические редакторы для подготовки графического контента;

• умения готовить текстовый и графический контент для размещения на страницах сайта;

• умение проводить поиск и анализ информации;

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

• умения создавать страницы уровня Web-сайта в соответствии с разработанным интерфейсом начальной страницы, соблюдая отличительные особенности визуализации вложенных уровней иерархии сайта;

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

1. Выбор темы курсовой работы

Тема курсовой работы выбирается:

• из числа тем предложенных преподавателем. Примерный перечень приведен в Приложении 1;

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

1.3 Технология организации выполнения курсовой работы и ее оценка

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

Основными функциями руководителя курсовой работы являются:

• консультирование по вопросам содержания и последовательности выполнения курсовой работы;

• оказание помощи студенту в подборе необходимой литературы;

• контроль хода выполнения курсовой работы.

Для обеспечения управления качеством учебной деятельности студентов можно использовать рейтинговую систему контроля, которая обеспечивает систематическую обратную связь, позволит отследить качество выполнения курсовой работы на всех этапах. Описание рейтинговой системы контроля по выполнению курсовой работы приведено в «Основных этапах выполнения курсовой работы и требования к отчетности (Таблица 1), ориентировочные критерии оценки отчетности по выполнению этапа курсовой работы (Таблица 2) и «Критерии оценки выполнения и защиты курсовой работы» (Таблица 3).

Табл. 1. Основные этапы выполнения курсовой работы и требования к отчетности

Для подведения итогов текущей работы студентов над курсовой работой (перед выходом на защиту) накопленные баллы (R_it) переводятся в 100-балльную шкалу, умножив итоговый результат на отношение 70/R_max. Где R_max – максимальная сумма баллов за текущую работу по курсовой работе.

При оценивании результатов работы студента над этапами курсовой работы преподаватель руководствуется «Критериями максимальной оценки выполнения этапа курсовой работы» и «Ориентировочными критериями оценки отчетности по выполнению этапа курсовой работы».

Критерии максимальной оценки выполнения этапа курсовой работы:

1. Своевременность сдачи отчетности.

2. Правильность и полнота раскрытия вопросов каждого этапа курсовой работы:

• глубина проработки материала;

• правильность и полнота разработки поставленных вопросов;

• правильность использования понятий, терминов;

• грамотность исполнения схем, рисунков.

1. Правильность проектирования и реализации Web-сайта:

• степень использования графических редакторов для разработки и подготовки графического контента, создания элементов пользовательского интерфейса;

• степень решения проблемы взаимодействия разнородного информационного наполнения страницы;

• грамотность создания макетов страниц при помощи основ языка гипертекстовой разметки (HTML) и каскадных таблиц стилей (CSS).

1. Соответствие текста пояснительной записки следующим требованиям:

• четкость структуры;

• логичность и последовательность;

• точность приведенных сведений;

• ясность и лаконичность изложения материала;

• соответствие изложения материала нормам русского литературного языка.

1. Соответствие оформления курсовой работы стандартам, в том числе правилам орфографии и пунктуации.

Таблица 2. Критерии оценки по выполнению этапа курсовой работы

Студент допускается к защите курсовой работы, если:

• по каждому из перечисленных видов этапов курсовой работы набранный балл не ниже минимального балла;

• итоговая сумма набранных студентом баллов курсовой работы не менее 45 баллов.

При выставлении оценки за защиту курсового проекта используются «Критерии оценки защиты курсовой работы».

Таблица 3. Критерии оценки защиты курсовой работы

Учет рейтинговых оценок ведется в «Журнале учета рейтинговых баллов курсового проектирования» (Приложение 2).

Итоговая оценка по курсовой работе выставляется с учетом работы в семестре и рассчитывается в соответствии с правилом пересчета рейтинговых баллов в оценки по 4-балльной шкале.

Правило пересчета рейтинговых баллов в оценки по 4-балльной шкале

1. Отчетность по курсовой работе

Отчетность по курсовой работе включает предоставление самого web-сайта и пояснительной записки с отчетом обо всех этапах проектирования web-сайта.

Разработанный web-сайт предоставляется на носителе (компакт-диск). Продукт должен быть полностью работоспособен и совпадать с тем, что предоставляется к защите.

Пояснительная записка предоставляется в печатном виде на сброшюрованных листах формата А4 в формате Microsoft Word (файл с расширением *.doc *.rtf), а также на компакт-диске и состоит из следующих обязательных частей:

• титульный лист (Приложение 3);

• лист-задание на курсовую работу;

• содержание (Приложение 4);

• введение (не более 2 страниц, необходимо сформулировать цель и задачи выполнения курсовой работы);

• основная часть;

• заключение (не более 2 страниц, сформулировать выводы в соответствии с поставленной целью);

• список используемых источников (не менее десяти).

По объему пояснительная записка должна быть не менее 15 – 20 страниц печатного текста.

1. Этапы процесса выполнения курсовой работы

2.1.Выявление целей создания сайта и постановка проблемы, решаемой с созданием сайта

1. Определение целей создания сайта

В соответствии с приведенными в таблице 1 основными этапами выполнении курсовой работы, на первом этапе Вы должны выявить цели создания сайта, и, в соответствии с ними, определиться с постановкой проблемы, т.е. выяснить, для чего нужен Ваш сайт, какие функции он будет нести. Результат этой работы Вы должны отразить в пояснительной записке к курсовой работе, в разделе «Выявление целей и постановка проблемы». Корректные формулировки целей web-сайтов должны представлять собой нечто вроде:

• разработать сайт по обслуживанию покупателей, который будет повышать степень их удовлетворенности, обеспечивая круглосуточный доступ в течение семи дней в неделю к ответам на самые распространенные вопросы, что позволит уменьшить на 25% нагрузку на службу телефонной поддержки;

• создать on-line магазин автомобильных запчастей, который будет продавать непосредственно покупателям товары на сумму, по крайней мере $10000 ежемесячно;

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

1. Определение целевого сегмента потребителей

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

1. Выбор сегмента рынка:

• тип целевой аудитории, целевая аудитория в сфере индивидуального потребителя;

• сегментация (выделение) участка рынка, на котором эта аудиторию базируется.

1. Портрет целевой аудитории:

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

• демографические: возраст, пол, семейное положение, национальность, профессия, образование;

• экономические: занятость (сфера, в которой работает посетитель), уровень дохода и покупательная способность;

• психологические или психографические: стиль жизни;

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

1. Выбор темы

1. Анализ сайтов - «аналогов» проекта

При выборе тематики будущего проекта постарайтесь провести анализ сайтов аналогичных вашей тематике в сети. Главное условие – четкое различие дизайна анализируемых проектов. Скопируйте Web-страницы, представляющие два уровня информации Web-узла (главную и внутреннюю). Проведите анализ сайтов-«аналогов» проекта по следующим аспектам:

• отметьте с помощью выносок характеристики унифицированных страниц, например, одинаковые цвета, шрифты, графику и макет (как примеры удачного Web-дизайна);

• отметьте с помощью выносок резкие и бросающиеся в глаза несоответствия на узле (например, резкие изменения элементов дизайна);

• отметьте области активных и пассивных пустых полей;

• посещаемость данных ресурсов;

• корректное отображение сайта в различных браузерах при различных настройках экрана;

• быстрота доступа к сайту, скорость загрузки отдельных страниц;

• анализ размера страниц и элементов мультимедиа. Скорость загрузки сайта;

• удобство и полнота навигационных элементов;

• организация структуры сайта, легкость перемещения между страницами, как для пользователя, так и для поискового робота;

• актуальность информации, удовлетворение запросам целевой аудитории;

• анализ содержимого и структуры страниц сайта;

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

• анализ соответствия содержимого страниц заявленной теме, а так же наличия описания страницы в мета-теге description;

• составьте рекомендации по улучшению дизайна узла.

Пример оформления анализа сайтов – «аналогов» проекта

Сайт №1 (его url, название)

1. Удачное доменное имя – содержит корни ключевых слов;

2. Хорошее решение навигационной структуры – дерево разделов/подразделов каталога товаров представлено на главной странице;

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

4. Высокий индекс цитирования, 52.51% аудитории приходит с поисковых систем (59.80% – Google, 23.48% – Yahoo, 16.02% – MSN), 47.47% – со ссылающихся сайтов, некоторое количество – от e-mail рассылок (на сайте работает сервис рассылок, форма подписки на рассылку находится на главной странице). Ссылающихся сайтов – более 110, ссылающиеся сайты – с высоким значением PR (25 сайтов-доноров имеют вес (PageRank) от 4 до 6); текст ссылок от ссылающихся сайтов содержат ключевые слова;

5. География аудитории: 54.59% – страна;

6. В поисковиках сайт находился в большей степени по ключевым словам – название ключевых слов (в % соотношении);

7. Последние запросы, по которым найден сайт (например, на 16.09.2013);

8. Хороший Description: «Здесь Текст МетаТега, Удачно Содержащий Ключевые Слова»;

9. Сайт зарегистрирован в коммерческих/и/тематических каталогах (к примеру, Froogle, RamblerShop, DMoz ). Оплачена баннерная реклама – их баннер крутится в баннерообменных тематических сетях (пример – http://rotabanner.url на баннерообменную сеть);

10. За последние полгода статистика посещений сайта выросла в Х раз(а)! За два с половиной года – в Y раз(а).

1. Обоснование типа разрабатываемого Web-узла

Интернет-ресурсы резко отличаются по структуре информационного содержания (называемого контентом). Эти отличия не количественные, а качественные. Контент жестко связан с целевой аудиторией. Состав целевой аудитории определяет дизайнерское оформление ресурса, форму представления контента и другие особенности ресурса. Затруднения в отнесении ресурса к той или иной категории часто свидетельствует о недостаточно глубокой проработке концепции сайта и его структуры. Обоснуйте, какой тип узла вы создаете с точки зрения соответствия целям, задачам и контенту сайта.

1. Создание наброска сайта

1. Перечень требований по содержимому и функциям Web-сайта

Как только завершены и задокументированы этапы формулирования цели, проведено исследование аудитории, должны быть разработаны требования к сайту и создан набросок Web-сайта. На базе этого наброска создайте карту сайта (site map) наподобие блок-схемы, где будет показана организация всего web-сайта.

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

Таблица 4. Список содержимого сайта

Технические требования. Этот раздел должен включать общий обзор технологий, которые предполагается использовать при реализации сайта, например, HTML, JavaScript, CGI, и т.д. Технологические требования должны напрямую соответствовать возможностям пользователей.

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

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

1. Создание рабочего наброска сайта

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

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

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

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

4. Задайте приоритет для каждой группы. Не каждая группа элементов вашего содержимого обладает одинаковой степенью важности для компании и ее клиентов. В зависимости от приоритета каждой группы проставьте звездочки. Таким образом – три звездочки будут соответствовать наибольшему приоритету группы, две – группе с меньшим приоритетом и одна – наименее важной группе.

1. Создание карты сайта

Набросок, который создан для Web-сайта, можно преобразовать непосредственно в карту сайта (site map). Такая карта сайта поможет с визуализацией структуры будущего web-сайта, которая называется архитектурой информации. Для создания карты сайта нужно использовать набросок, преобразовать каждую группу элементов и ее подпунктов в блок-схему. Блоки связать линиями со стрелками для обозначения возможных переходов по сайту. Создание карты сайта – очень важный этап проектирования. В ходе последующей разработки вы часто будет обращаться к созданной карте.

Для преобразования наброска в карту сайта выполните следующую последовательность действий:

1. Обозначьте прямоугольниками каждую Web-страницу.

2. Добавьте прямоугольники для групп элементов..

3. Пронумеруйте элементы блок-схемы.

Рисунок 1. Блок-схема сайта

1. Разработка набора макетов страниц

1. Определение функциональных зон страниц сайта

Создание макета страницы – важный этап, который позволяет проработать на бумаге ее содержимое и дизайн (связывающий воедино элементы сайта).

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

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

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

Рисунок 2. Схема размещения контент-зон главной страницы

Рисунок 3. Схема размещения контент-зон внутренней страницы

1. Нахождение идеи пластического решения, определение колорита страниц

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

Начните с дизайн-студий: поройтесь в их портфолио, затем посмотрите на художественные, развлекательные, рекламные сайты и ищите идею, которую сможете использовать в своей работе. Не копируйте чужие наработки, но используйте идеи. Синтезируйте и объединяйте их между собой, сочиняйте что-то свое, отталкиваясь от чужих наработок. Главное - это единый образ сайта, поэтому стоит обратить пристальное внимание на общность шрифтового и графического оформления. Используйте единые шрифтовые теги для всех заголовков сайта, для близких по смыслу элементов и пр.

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

1. Разработка композиционного решения страниц сайта

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

Kомпозиция. Иными словами, компоновка – общий вид страницы. Это соотношение между различными объектами, их позиции. Нужно учесть, что на странице будут некоторые служебные компоненты: элементы навигации/субнавигации, рекламные баннеры, выбор кодировки, формы для взаимодействия с пользователем, надписи (последнее обновление, copyright…) – все это каким-то образом должно уложиться в общую композицию страницы.

Композиция создаваемой Web-страницы – это структура элементов, созданная на основе ритмов, контрастов и законов визуального восприятия. Web-дизайн — это творчество, причем творчество ярко выраженное. Именно в сфере web-дизайна можно полностью проявить все свои способности, ведь здесь цензором результатов вашего труда являетесь вы сами и посетители вашей странички.

1. Нахождение идеи решения основных зон страниц сайта

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

Представьте логическую структуру контента, выделите основные моменты и «подмоменты» текста. Основным содержимым на любом сайте является текстовый и графический контент. Многие web-мастера допускают большую ошибку, когда не следят за количеством графики на сайте. Графический контент не должен преобладать над текстовым – это основной принцип построения информации на сайте.

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

Макет страницы должен содержать следующие элементы:

• схему глобальной навигации (элементы навигации, которые содержатся на всех страницах сайта);

• текстовые блоки, рисунки и элементы мультимедиа (Flash-анимация или видеофайлы), их относительное расположение на страницах сайта;

• все элементы навигации, а также заголовки основных элементов содержимого;

• интерактивный дизайн (как пользователи будут работать с элементами на странице);

• основные компоненты текстовой части.

Требования к представлению элементов макета страницы:

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

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

• все элементы графического содержимого обозначаются на макете в виде прямоугольников .

1. Декомпозиция макета на структурные блоки и модули

1. Разработка модульной сетки на основе утвержденного макета

Теперь по полученному макету нужно определить модульную сетку, которая будет составлять основу HTML-страницы. Основная задача на этом этапе – создать такую модульную сетку, в которой можно разместить все указанные нами элементы.

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

1. Разработка руководства по стилю

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

Руководство по стилю графического и HTML-текста должно включать в свой состав следующие элементы:

1. Заголовки и подзаголовки. Определите стиль, цвет и размер шрифта.

2. Основной текст. Определите стиль, цвет и размер шрифта.

3. Надписи. Если для различных элементов требуются разные виды надписей, учтите в каких случаях и каким образом использовать каждую из надписей.

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

5. Ссылки. Кроме задания стиля и размера шрифта, должен быть определен цвет ссылки в разных ее состояниях.

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

7. Цвет фона и мозаичный узор. Если определенные области сайта имеют разный цвет фона или мозаичный узор, задайте перечень используемых цветов и мозаичного узора в пределах всего сайта.

8. Размер графических элементов. Важно показать, какие размеры должны задаваться в пикселях, а какие – в процентах.

9. Размер текстовых блоков. Определите, какие блоки текста на сайте будут фиксированного размера, а какие – масштабируемого. Желательно, чтобы весь шрифт был масштабируемый.

Таблица 5. Пример руководства по стилю графического и HTML-текста для Web-сайта

1. Оптимизация контента сайта

Применительно к Web-ресурсам, контент можно разделить на три основных типа:

• Графический. Это различные иллюстрации, фотографии, диаграммы, чертежи, схемы, а также анимация и видео;

• Фактический. Сюда включаются технические характеристики, инструкции по эксплуатации, данные исследований, числовая информация;

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

Общие принципы

1. Все материалы сайта должны быть единообразны внутри каждой категории.

2. Работа с текстами. Главное – пишите о том, о чем хотите написать. Качественный текст должен иметь свою собственную направленность, и быть рассчитанным на наиболее легкое восприятие целевой аудиторией. Текст должен быть относительно ровным (длина фразы, количество знаков препинания и т.д.), но не слишком однообразным. Старайтесь использовать интересные, интригующие названия: иногда стоит напустить туману, использовать иносказания, вопросы, загадки и пр. Любое название, даже самое скучное, можно переделать так, чтобы оно зазвучало интригующе.

3. Расположение текста на странице. Поисковые машины индексируют сайт сверху вниз и слева направо. Таким образом, они увидят меню слева, Лого-картинку сверху и другую графику до того, как дойдут до основного текста сайта.

• Оптимизация графического контента. Сейчас говорим только о тех картинках, которые составляют содержание сайта, а не являются элементами его оформления. Выбор цветовой модели и формата файла определяется двумя факторами: сохранение качества при минимальном объеме: GIF, RGB, JPG, PNG.

В зависимости от назначения изображения стоит придерживаться следующих эмпирических размеров:

• для большого баннера 468х60 – не более 15 kb – это требование большинства баннерных сетей;

• для кнопок навигации – 1-2 kb, чтобы они не перегружали страницу;

• для основного изображения – не более 100 kb, причем, только в том случае, если изображение самое главное содержание конкретной страницы (например, репродукция картины);

• для фонового изображения – 5 kb, но лучше сделать фон не более 3 kb.

Все эти размеры, теоретически должны укладываться в общую величину 70-100 килобайт на страницу, хотя, надо сказать, что и эти цифры достаточно высоки для средних страниц, обычно, если вы не слишком увлекаетесь анимацией и Java, общий объем не будет получаться более 30-40 kb (если это не галерея картинок).

1. Верстка

Верстка – это процесс сборки HTML-страницы (шаблона) по статичному макету. Результатом процесса вёрстки является «верстка как продукт» – HTML, CSS, JavaScript-код, который в конечном итоге и попадает на стол экрана посетителей сайта. На данном этапе осуществляется:

1. Перевод статичных графических макетов дизайна сайта в шаблоны:

• нарезка и оптимизация графических элементов;

• построение корректных и оптимальных HTML-конструкций;

• внесение новых свойств в продукт, связанных с появлением новых степеней свободы и ограничений:

  • «резиновость», адаптация к размеру окна браузера;

  • выявление «контента», который больше не может быть частью картинки а живёт своей жизнью;

  • ограничения, связанные с особенностями вёрстки;

• встраивание интерактивности элементов (реакции на наведение, нажатие, и.т.п.).

1. Поддержка изменений «внешней среды»:

• когда это касается изменений внешнего вида, элементов оформления – артефактов вёрстки;

• когда это касается структурной перекомпоновки отдельных модулей;

• когда это касается незначительных изменений поведения.

1. Разработка логической и физической структуры сайта

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

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

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

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

Только после всех описанных выше процедур можно приступать непосредственно к сборке страницы: созданию ее макета в HTML-редакторе, написанию и окончательной отладке кода.

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

1. Тестирование сайта

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

1. Тестирование визуальной приемлемости.

2. Тестирование функциональности.

3. Проверка содержимого.

4. Тестирование реакции пользователей.

Хорошо ли выглядит наш сайт?

1. Совершенно бесплатные услуги http://www.anybrowser.com/ могут много поведать Вам о сайте за считанные минуты.

2. HTML-валидатор рассмотрит и прокомментирует HTML – код сайта, а в конце укажет построчно все ошибки.

3. Link Check укажет все неработающие ссылки.

4. Screen Size Test рассмотрит сайт в экране с другим разрешением.

5. SiteViewer покажет сайт таким, каким его могут увидеть посетители, использующие другие браузеры.

6. На сайте http://www.netmechanic.com/ представлены аналогичные услуги. Здесь можно отследить даже реальное время загрузки сайта.

7. На сайте http://www.htmlhelp.com/ также бесплатно доступен онлайновый комплект инструментов – сервис по проверке HTML, неработающих ссылок и многое другое.

1. Веб-дизайн: книга Дмитрия Кирсанова. – СПб: Символ-Плюс, 1999 – 376 с.: цв. ил.

2. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!» - Пер. с англ. – СПб: Символ-Плюс, 2006, 200 с: цв. ил.

3. Вильямсон X. Универсальный Dynamic HTML. Библиотека программиста. – СПб.: Питер, 2001. – 304 с.: ил.

4. Гарретт Дж. Веб-дизайн: книга Джесса Гарретта. Элементы опыта взаимодействия». – Пер. с англ. – СПб.: Символ-Плюс, 2008. – 192 с.: ил.

5. Дубаков М. Веб-мастеринг средствами CSS. – СПб.: БХВ-Петербург, 2002. – 518 с.: ил.

6. Евдокимов, Н.В. Основы контентной оптимизации. Эффективная Интернет-коммерция и продвижение сайтов в Интернет. – М.: Издательский дом «Вильямс», 2007. – 160 с. :ил.

7. Ломов А.Ю. HTML, CSS, скрипты: практика создания сайтов. – СПб.: БХВ-Петербург, 2006. – 416 с.: ил.

8. Матросов А.В., Сергеев А.О., Чаунин М.П. HTML 4.0. – СПб.: БХВ-Петербург, 2003. – 672 с.: ил.

9. Мержевич В.В. HTML и CSS на примерах. – СПб.: БХВ-Петербург, 2005. – 48 с: ил.

10. Мержевич В.В. Ускорение работы сайта. – СПб.: БХВ-Петербург, 2005. – 384 с.: ил.

11. Наварро Э. XHTML: учебный курс. СПб.: Питер, 2001. – 336 с.: ил.

12. Основы Web-технологий: учебное пособие / П.Б. Храмцов, С.А. Брик, А.М. Русак, А.И. Сурин – 2-е изд., испр. – М: Интернет-Университет Информационных Технологий; БИНОМ. Лаборатория знаний, 2007. – 374 с.: ил., табл. – (Серия «Основы информационных технологий»).

13. Прайс Джонатан, Прайс Лиза. Текст для Web: доступность и привлекательность.: Пер. с англ. – М.: Издательский дом «Вильямс», 2003. – 464 с.: ил. – Парал. тит. англ.

14. Разумный Web-дизайн. Как сделать ваш сайт удобным для пользователей / Сара Хортон: пер. с англ. М.Л. Тарасовой. – М.: НТ Пресс, 2007. – 288 с.: ил.

15. Сетевой информационный поиск: Практ. пособие/ Романенко В.Н., Никитина Г.В. Российская академия естественный наук. Северо-Западное отделение образование и развития науки. СПб.: «Профессия», 2005. – 288с.

16. Создание интерактивного web-сайта: учебный курс / Д. Лещев. – СПб.: Питер, 2003. – 544 с.: ил.

17. Строим Web-сайты. Дизайн•HTML•CSS•GARAGE: пер. с англ.яз./ Марк Кэмпбел: [пер.с англ. Александр Горлач, Александр Климович]. – М.: Изд-во ТРИУМФ, [2006]. – 480 с.: ил. – (Серия «Carage») – Доп. тит. л. англ.

18. Философия CSS-дизайна / Дэйв Ши, Молли Е. Хольцшлаг; пер. с англ. А.А. Слинкина. – М.: НТ Пресс, 2005. – 312 с.: ил. – (Школа Web-мастерства).

19. Холл, Марти, Браун, Лэрри. Программирование для Web. Библиотека профессионала.: Пер. с англ. – М.: Издательский дом «Вильямс», 2002. – 1264 с.: ил. – Парал. тит. англ.

20. Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX. Текст, графика, звук и анимация. Пер с англ./Крис Джамса, Конрад Кинг, Энди Андерсон – М.: ООО «ДиаСофтЮП», 2005. – 672 с.

21. Якоб Нильсен, Мари Тахир Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов Вильямс, июль 2002. – 336 с.

22. http://webmanual.iatp.by – Учебник по созданию интернет-ресурсов.

23. http://designformasters.info – Design For Masters.

24. http://kolesnik.ru – Экспериментальная теория веб-композиции 10.05.2005.

25. http://www.seo-copywrite.ru/web11 – Прямоугольники с закругленными углами на основе CSS.

26. http://braingames.spb.ru/add/sidorov/index.htm – Советы.

27. http://www.getinfo.ru/article668.html – Техническая концепция сайта.

28. http://www.getinfo.ru/article278.html – Подавайте информацию правильно.

29. http://www.getinfo.ru/article361.html – Какой вид дизайна выбрать?

30. http://capri.ustu.ru/Web-site/chap1.htm – Эффективный web-сайт. Р. Ноблес, К.Л. Греди.

31. http://www.advertology.ru/modules.php?file=article&sid=16748 – Цвет в дизайне портала.

32. www.actech.starport.ru – Руководства и секреты Web-технологий. Авторская страница Алексея Страшко.

33. www.tepka.ru – Практические аспекты web-мастеринга.

34. www.artus.ru – Рекламная компания Артус

35. www.rosdesign.com – Теория веб-дизайна

36. www.dserg.com – Проектирование сайтов. Блог Дмитрия Сергеева

37. www.seo-copywrite.ru/51 – Структурная разметка

38. www.yaransk.com/izone – Визуальные рассказы: что такое визуальная организация.

39. www.raskru.ru – Раскрутка сайтов. Учебное пособие для начинающих.

40. artreal.exler.ru/theme – Технология сайтостроения.

41. www.antula.ru – Профессиональная студия веб-дизайна.

42. habrahabr.ru/blogs/typography/25958 – Веб-типографика сегодня.

43. htmlbook.ru – Для тех, кто делает сайты.

44. expertplus.ru – Разработка и создание сайта визитки.

45. www.seo-copywrite.ru – SEO-копирайтинг – текст для поисковой оптимизации.

46. www.webmascon.com – Визуальные рассказы: что такое визуальная организация.

47. www.raskru.ru – Раскрутка сайтов Учебное пособие для начинающих.

48. NunDesign.com – Основы веб-дизайна.

49. design.i2r.ru – Библиотека сайтостроительства.

50. MySmartLab.ru – Самый полный анализ сайта в Рунете.

Примерный перечень тем курсовых работ

1. Web-сайт компьютерного центра.

2. Web-сайт культурно–оздоровительного комплекса.

3. Web-сайт торгового комплекса.

4. Web-сайт спортивного комплекса.

5. Web-сайт туристической фирмы.

6. Web-сайт агентства недвижимости.

7. Web-сайт детского сада.

8. Web-сайт школы.

9. Web-сайт библиотеки.

10. Web-сайт музея.

1l.Web-сайт кинотеатра.

12. Web-сайт дискотеки.

13. Web-сайт диско-клуба.

14. Web-сайт фирмы по производству мебели.

15. Web-сайт салона красоты.

16. Web-сайт парка культуры и отдыха.

17. Web-сайт автомобильного салона.

18. Web-сайт коммерческой фирмы.

19. Web-сайт салона новобрачных.

20. Web-сайт факультета информатики.

21 .Разработка личного Web-сайта.

22. Web-сайт телевизионного канала.

23. Web-сайт развлекательного журнала.

24. Web-сайт газеты бесплатных объявлений,

25. Web-сайт магазина бытовой техники.

26. Web-сайт магазина игрушек.

27. Web-сайт аэропорта.

28. Web-сайт центра дистанционного обучения.

29. Web-сайт строительной фирмы.

30. Web-сайт для кулинаров.

31. Web-сайт для садоводов.

32. Web-сайт метеостанции.

33. Web-сайт зоопарка.

34. Web-сайт ресторана.

35. Web-сайт футбольного клуба.

36. Web-сайт клуба любителей кошек (собак и т.д.).

37. Web-сайт кадрового агентства.

38. Web-сайт администрации города.

39. Web-сайт благотворительного фонда для детей-сирот.

40. Web-сайт общественно–политической организации (партии).

Журнал учета рейтинговых баллов курсового проектирования

Приложение 3

Государственное бюджетное образовательное учреждение
среднего профессионального образования

«Кунгурский сельскохозяйственный колледж»

Пояснительная записка

к курсовой работе по дисциплине «Web - технологии»

Тема: Разработка Web-сайта фирмы по производству мебели

Работу выполнил:

студент гр. А-51

Иванов А.А.

Проверил

2014

Приложение 4

Одноколонная сетка

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

Академический дизайн характеризуется минимализмом оформления и даже аскетизмом. Основной упор делается на содержательную часть, а дизайну как таковому практически не уделяется внимания. Преимущественно академический дизайн встречается в научной среде.

На рис. показана типичная схема одноколонной модульной сетки. Как правило, наблюдается четыре основных блока – заголовок страницы, набор ссылок на другие страницы сайта (навигация), собственно сам текст и в самом низу контактная информация. Если высота страницы достаточно велика, то блок навигации дублируют внизу или делают ссылку «Наверх», которая перемещает к началу документа.

Двухколонная сетка

Это один из самых распространенных вариантов при использовании на сайтах. При такой модульной сетке используется две колонки – одна отводится под основной текст, а вторая используется для навигации и другой полезной информации (рис. 8).

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

В каком-то смысле двухколонная сетка стала стандартом де-факто для информационных сайтов из-за своего удобства. Действительно, все «под рукой» – и текст и ссылки, к тому же данная сетка не исключает подключения горизонтальной навигации, как это принято в одноколонной сетке.

Двухколонные сетки удобны при создании самых разнообразных сайтов и не требуют особых знаний по верстке веб-страниц. Единственный недостаток, который им вменяют, что подобные сайты выглядят достаточно однообразно. Но с другой стороны пользователям удобнее работать с сайтом привычного вида, без лишних «наворотов».

Трехколонная сетка

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

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

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

Приложение 5

Эргономические аспекты электронного дизайна

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

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

2. Фактором, влияющим на скорость получения информации, является также и объем исходного кода страницы. Уже становится стандартом ограничение максимального размера страницы в 50 Кбайт. Для сокращения размеров кода страницы рекомендуется использовать каскадные стили и скрипты.

3. Важно придерживаться одного стиля для всех страниц сайта. Стиль должен соответствовать тематике сайта.

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

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

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

7. Необходимо учитывать разницу отображения страниц на различных браузерах с различным разрешением экрана. Дизайн не должен нарушаться при 256 цветах, на трех разрешениях экрана (640´ 480, 800´ 600, 1024´ 768) и пониматься двумя основными броузерами (Internet Explorer, Netscape Navigator).

8. Нет необходимости подписывать каждую страницу сайта. Достаточно указать авторские права снизу первой страницы. Но наличие информации по авторским правам позволит проще решать морально-правовые вопросы.

9. Важно ограничивать объем информации на каждой странице, особенно на первой. Для простоты психологического восприятия желательно, чтобы количество ссылок не превышало 7. Семерка не даром является священным числом в различных сферах человеческого бытия, не миновала она и психологии. Если необходимость в превышении этого числа обоснованна, то здесь ничего не поделаешь. Но, все-таки, важно еще раз оценить ее.

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

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

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

13. Не рекомендуется смешивать типы шрифтов, главным образом из-за того, что их различие не выделяет нужную информацию, как хотелось бы, зато портит общий вид страницы, когда смешивают рубленый и плавный шрифт. Arial, Tahoma, Vardana, Sans-Serif - плавные шрифты; Times New Roman, Courier New - рубленые шрифты. Чаще всего для обычного текста, как в таблице, так и прямо в тексте страницы лучше всего использовать Tahoma или Sans-Serif, а для различных заголовков подойдет Courier New (жирный) или Verdana.

14. Необходимо использовать только стандартные шрифты, какими являются: Times New Roman, Arial, Tahoma, Verdana, Sans-Serif, Courier New, сейчас в этот список пробивается еще один - Comic Sans MS. В противном случае, у пользователя может не быть указанного шрифта, и броузер будет использовать стандартные: Times New Roman - для Body, Arial - для таблиц.

15. Размеры шрифтов должны соответствовать структуре гипертекстовой страницы. Если вы используете размер в пунктах, то допустимы следующие варианты: - для комментариев - для обычного текста или - для крупных заголовков - для средних заголовков. Если вы используете размер в пикселях, т.е. через CSS (Cascading Style Sheets), то выбирайте из следующего списка: {font-family: tahoma,verdana; font-size: 11px;} - для комментариев и многочисленного текста {font-family: tahoma,verdana,sans-serif; font-size: 12px;} - для обычного текста {font-family: courier new; font-size: 45px;} - для крупных логотипов {font-family: courier new; font-size: 22px; font: bold;} - для крупных заголовков {font-family: verdana,tahoma; font-size: 22px;} - для средних заголовков {font-family: verdana,tahoma; font-size: 18px;} - для посредственных заголовков.

16. Фон страницы может быть как в виде рисунка, так и монотонным. Естественно, фоны с рисунком загружаются дольше и не обязательно в первую очередь. Наиболее часто для строгого делового стиля используется монотонный. Если используется специальный фон, то необходимо учитывать, что фон должен быть подложкой, на втором плане, а не центром внимания пользователя, поэтому выбирайте не сочные цвета, а близкие к прозрачным. Цвет отдельных объектов, фон страницы, таблиц и ячеек не должны доминировать над информацией, пользователь не должен отвлекаться дизайном страницы.

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

При редактировании HTML-кода старайтесь сохранять структуру программы, смещая более важные теги левее, например,

должен быть левее, чем

. Все теги должны иметь одинаковое написание (начинаться с заглавной буквы, быть полностью из прописных или строчных букв). Расположение параметров в описании тега также желательно выполнять в соответствии с нотацией языка HTML. Для уменьшения размера получаемого HTML-кода, можно использовать таблицы каскадных стилей CSS. За счет этих таблиц можно избежать многократного повторения описания стилей шрифтов. Поскольку невозможно предугадать, какого размера будут экраны у пользователей, надо проектировать страницы для любого разрешения, другими словами, страницы, которые не зависят от разрешения монитора и адаптируются к любым размерам экрана. У разных пользователей различные предпочтения относительно размеров шрифтов, поэтому убедитесь, что ваш дизайн одинаково подходит и для больших и для меньших шрифтов по сравнению с выбранным вами размером. Люди используют различные размеры шрифтов из-за проблем со зрением или из-за того, что на экранах с большим разрешением маленькие шрифты читаются с трудом. Графические элементы надо проектировать, также принимая во внимание различное разрешение. В частности, все значки должны по-прежнему хорошо смотреться, когда они отображаются при разрешении 100 dpi или больше. Чем больше разрешение, тем меньше становятся размеры графических элементов. Поэтому, чтобы текст, включенный в графику, оставался читаемым, необходимо задавать для него относительно большой размер шрифта. Обычно не рекомендуется включать текст в графические элементы, так как это замедляет процесс передачи и увеличивает объем работы при переводе элементов пользовательского интерфейса на иностранные языки. Основной совет относительно времени ожидания практически не менялся после классического доклада Роберта Б. Миллера (Robert В. Miller) на конференции Fall Joint Computer Conference в 1968 г.: одна десятая секунды (0,1) – предельное значение для того, чтобы ответ системы, полученный пользователем за это время, воспринимался бы как мгновенный, то есть не требующий никакой обратной связи для вывода результатов на экран. Это значение должно стать предельным временем ответа в приложениях, позволяющих пользователям двигать, изменять размеры и производить другие манипуляции с элементами на экране в реальном времени. одна секунда (1,0) – предельная длина промежутка времени, в течение которого ход мыслей пользователя не прерывается, даже если он и замечает задержку. Обычно обратная связь не требуется, если задержки больше 0,1 и меньше 1 секунды, но пользователь уже не чувствует, что он работает непосредственно с данными. Если новая страница появляется в течение 1 секунды, это означает, что пользователь не сталкивается с чрезмерными задержками. десять секунд (10,0) – предел, в течение которого пользователь сфокусирован на диалоге. Если задержки дольше, то пользователь начинает заниматься другими делами, пока дожидается окончания работы компьютера. И хотя это раздражает, но пользователь продолжает переходить по ссылкам на сайте, если новые страницы появляются в течение 20 секунд. Пустое пространство – активный элемент дизайна. Позвольте вашему тексту дышать. Использование пустого пространства – это не прихоть отдельного дизайнера и не имеет отношения к чувству прекрасного. «Ширина колонки должна быть пропорциональна размеру шрифта. Чересчур широкие колонки утомляют глаза и ещё имеют некоторый неблагоприятный психологический эффект. Чересчур сжатые тоже могут мешать, потому что прерывают процесс чтения и фрустрируют читателя, заставляя глаза сменять строку слишком часто». Использование пустого пространства уменьшает уровень напряжения, так как позволяет проще фокусироваться на главном. Вам не надо заполнять всё окно браузера. То что пустое простанство делает сайт приятнее – не случайный эффект: это логичное следствие конструктивного дизайна. Пожалуйста, убедитесь что колонка не слишком широка и что вы добавили пустого места слева и справа чтобы глазу проще было прыгать (с одной части страницы на другую). Мы (пользователи) не хотим менять размер шрифта или окна. Мы хотим сразу начать его читать. Разумное регулирование колонки по ширине это славно; некончающиеся строки текста поперёк экрана – нет. Простое правило: по 10-15 слов в строке (это для английского языка; для русского, где слова в среднем длиннее, стоит взять величину поменьше). Для резиновой вёрстки, при 100% величины шрифта, половина окна для основной колонки будет хорошим решением на большинстве разрешений экрана. Поменяйте высоту строки на удобную для чтения. Вот что говорят специалисты по чтению: Строки текста, расположенные слишком тесно, ухудшают скорость чтения потому что в таком случае соседние линии считываются одновременно. Глаз не может фокусироваться на чрезмерно близких строках и … читатель тратит энергию в неправильном месте и утомляется быстрее. Всё то же остаётся правдой и для строк, которые слишком далеко отстоят друг от друга. Межстрочное расстояние в HTML слишком мало по умолчанию. Если вы увеличите его, текст станет более легко читаемым. 140% будет в самый раз. Используйте контрастные цвета. Об этом даже необязательно говорить. Но если вы используете любую из нижеследующих комбинаций: светло-серый текст на тёмно-сером фоне; серебряный текст на снежно-белом фоне; серый на жёлтом; жёлтый на красном; зелёный на красном и так далее… … значит вы не веб-дизайнер, а всего-лишь дизайнер-самодур. Если вы настаиваете на бытии своём веб-дизайнером, то должны знать что никто не сможет прочитать, что написано. Прекратите этот абсурд и позвольте людям прочитать то, что пишете. Заметьте, для экранного дизайна наиболее сильный контраст тоже неидеален, так как буквы начинают мерцать (flicker; кажется, имеется ввиду неравномерность отрисовки). Попробуйте #333 на фоне #fff. Нет тексту в изображениях! Мы хотим искать текст, копировать текст, сохранять текст, играть курсором и выделять/помечать его, пока читаем. Текст в изображениях выглядит приятно, но приятность – не то для чего существует интернет. Он существует для общения и доступа к информации, и эту информацию должно быть легко читать, масштабировать, цитировать, копировать и передавать. Если не можете сделать сайт, хорошо выглядящий без текста, облачённого в изображения, вы должны будете начать учиться с самого начала. Приложение 6 Советы по организации пространства главной страницы и ускорению ее загрузки В процессе создания и развития коммерческого сайта главный приоритет - продаваемые продукты/услуги. Не стоит надеяться, что посетитель будет долго рассматривать наш сайт в поисках того, что с него продается. Если потенциальные клиенты не в состоянии быстро найти то, что предлагает сайт, оценить выгоды этого предложения, насколько велики шансы что – то продать? Информация о продаваемом продукте/услуге должна располагаться выше «сгиба» страницы, то есть таким образом, чтобы посетитель мог ее заметить без использования полосы прокрутки. Каждая часть сайта должна иметь определенную цель: вести потенциальных клиентов к продуктам и услугам. Многие советуют сделать главную страницу как можно меньше (это не относится к мини – сайтам), но, тем не менее, включить в ее содержание наиболее важные элементы. Левый верхний угол главной страницы – не менее важная ее часть, чем центр. Если там располагается логотип, то в описание изображения должен быть включен тег «alt» именно с ключевыми словами, а не просто произвольным названием картинки. Это один из моментов, которому авторы всех руководств по раскрутке сайтов придают большое значение, потому что это важно для позиционирования сайта в поисковых машинах. Не знаю, правда, насколько это актуально для отечественных поисковых серверов... Форму для подписки на рассылку желательно расположить как можно выше. Главная страница сайта должна загружаться быстро и обеспечивать посетителей кратким обзором всех Ваших предложений. Чтобы избежать переполнения главной страницы, создайте несколько разделов, от которых идут ссылки к более подробной информации. Все мы знаем, что скорость загрузки – одна из важнейших вещей для любого сайта, все слышали о правиле тридцати секунд. У владельца сайта есть всего тридцать секунд, в течение которых страница должна загрузиться и намертво «схватить» внимание посетителя. Или тот просто покидает этот сайт навсегда. Идеальным считается вариант, когда главная страница загружается в пределах восьми - десяти или менее секунд при скорости модема 56 Кб. Согласно данным Forrester Research и Gartner Group, коммерческие сайты теряют 1,1- 1,3 миллиарда долларов в год из-за того, что клиенты уходят с сайтов, так и не дождавшись их загрузки. -80% Курсы дополнительного образования Основы HTML Продолжительность 72 часа Документ: Cвидетельство о прохождении курса 4000 руб. 800 руб. Подробнее Получите комплекты видеоуроков + онлайн версии Электронная тетрадь по информатике 6... Электронная тетрадь по информатике 9... Информатика 10 класс (Россия) Основы алгоритмизации и... Информатика 2 класс ФГОС Информатика 9 класс ФГОС Электронная тетрадь по информатике 8... Видеоуроки по информатике 6 класс (к... Скачать разработку Сохранить у себя: Методические указания по выполнению курсовой работы по дисциплине «WEB-технологии» (0.2 MB) Файлы по информатике 0 1693 68   Нравится 0 Добавить эту разработку в избранное Похожие файлы ОДП.02 ИНФОРМАТИКА 09.02.07 Информатика базовый уровень Творческий проект «Цифровая живопись – новое искусство» Алгоритм Хаффмана Архиватор файлов Развитие систем электронной коммерции в россии Комментарии 0 Чтобы добавить комментарий зарегистрируйтесь или войдите на сайт Скачивание сейчас начнётся... Не забудьте поделиться материалом в социальных сетях с Вашими коллегами Вы смотрели Методические указания по выполнению курсовой работы по дисциплине «WEB-технологи Зарегистрироваться Электронная почта Такой пользователь уже существует, вы можете войти или восстановить пароль Пароль Повторите пароль Я ученик Я учитель Я родитель Регистрируясь Вы соглашаетесь с пользовательским соглашением и политикой конфиденциальности, а также даёте согласие на получение информационных и рекламных писем от ООО “Мультиурок” на указанный Вами e-mail. Отказаться от рассылки Вы сможете в любой момент, кликнув на ссылку "отказаться от рассылки", которая будет в каждом письме. Или войти с помощью аккаунта в соцсети Войти в профиль Электронная почта Пароль Оставаться в системе Вспомнить пароль Войти в кабинет ученика Или войти с помощью аккаунта в соцсети Зарегистрироваться Восстановление пароля Введите вашу электронную почту, чтобы восстановить пароль!