Условия оптимального веб-дизайна сайтов

00;33;66	33;66;99	33;66;СС	00;33;99	00;00;99	00;00;СС	00;00;66	00;66;66
00;66;99	00;99;СС	00;66;СС	00;33;СС	00;00;FF	33;33;FF	33;33;99	66;99;99
00;99;99	33;CC;CC	00;CC;FF	00;99;FF	00;66;FF	33;66;FF	33;33;CC	66;66;99
33;99;66	00;CC;99	00;FF;CC	00;FF;FF	33;CC;FF	33;99;FF	66;99;FF	66;66;FF
66;00;FF	66;00;CC	33;99;33	00;CC;66	00;FF;99	66;FF;CC	66;FF;FF	66;CC;FF
99;CC;FF	99;99;FF	99;66;FF	99;33;FF	99;00;FF	00;66;00	00;CC;00	00;FF;00
66;FF;99	99;FF;CC	CC;FF;FF	CC;CC;FF	CC;99;FF	CC;66;FF	CC;33;FF	CC;00;FF
99;00;CC	00;33;00	00;99;33	33;CC;33	66;FF;66	99;FF;99	CC;FF;CC	FF;FF;FF
FF;CC;FF	FF;99;FF	FF;66;FF	FF;00;FF	CC;00;CC	66;00;66	33;66;00	00;99;00
66;FF;33	99;FF;66	CC;FF;99	FF;FF;CC	FF;CC;CC	FF;99;CC	FF;66;CC	FF;33;CC
CC;00;99	99;33;99	33;33;00	66;99;00	99;FF;33	CC;FF;66	FF;FF;99	FF;CC;99
FF;99;99	FF;66;99	FF;33;99	CC;33;99	99;00;99	66;66;33	99;CC;00	CC;FF;33
FF;FF;66	FF;CC;66	FF;99;66	FF;66;66	FF;00;66	CC;66;99	99;33;66	99;99;66
CC;CC;00	FF;FF;00	FF;CC;00	FF;99;33	FF;66;00	FF;66;66	CC;00;66	66;00;33
99;66;33	99;66;33	CC;99;00	FF;99;00	CC;66;00	CC;66;00	FF;33;00	FF;00;00
CC;00;00	99;00;33	66;33;00	99;66;00	CC;33;00	99;33;00	99;00;00	80;00;00
99;33;33	CC;CC;CC	99;99;99	66;66;66	80;80;80	33;33;33	00;00;00	FF,FF,FF

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

Таблица 3. «Режим монитора и число цветов» 

Разрядность	1	2	4	5	6
Число цветов	2	4	16	32	64
Разрядность	7	8	15	16	24
Число цветов	128	256	32768	65536	16777216

            Красным цветом выделены наиболее широко применяемые разрядность и количество цветов.

            Безопасные цвета предполагают шесть возможных значений насыщенности для каждой из составляющих красного, зеленого и синего цветов. Этими значениями являются: 0%, 20%, 40%, 60%, 80% и 100%. Значение 0,0,0 должно быть эквивалентно черному цвету. Значение 100,100,100 должно отображать чисто белый цвет.

Другими словами, безопасные цвета - цвета, для которых насыщенность составляющих соответствует безопасным значениям.       Задание безопасного цвета заключается в выборе комбинации из безопасных шестнадцатеричных значений.       Помимо  цветовой гаммы немаловажной  деталью в веб-дизайне является  формат графических файлов. В веб-дизайне наиболее популярны форматы GIF и JPEG.       Формат GIF первоначально был изобретен для использования в CompuServe, одной из первых коммерческих интерактивных сетей. Так как он разрабатывался для использования в компьютерной сети с низкими скоростями передачи данных, то GIF оказался идеальным форматом для использования в Интернете и стал первым графическим форматом, поддерживаемом в компьютерной сети. Он ограничен 256-цветной палитрой. Это означает, что, независимо от того, сколько цветов содержит файл, после преобразования в формат GIF в нем останется 256 цветов или меньше. Причина этого ограничения состоит в том, что стандарт GIF разрабатывался для низких скоростей сетевых соединений. Так как каждый цвет, включенный в графический файл, представляет собой дополнительные данные, меньшее количество цветов означает меньшие размеры файла и более короткое время загрузки. Например, если 10 красных пикселей стоят в графическом файле рядом, то в формате файла без сжатия 10 красных пикселей будут представлены как 10 символов. GIF же в этом случае использует только два символа: число повторений цвета и сам цвет. Вместо 10 элементов данных получается только два. Другие интересные возможности GIF - чересстрочная развертка и возможность создания анимированных изображений. Обе эти возможности очень широко применяются в создании веб-страниц. Формат JPEG получил свое название от аббревиатуры Joint Photographic Experts Group сommittee (объединенного комитета экспертов по фотографии), который и создал этот стандарт в конце 80-х — начале 90-х годов. Формат JPEG основан на алгоритме сжатия с потерями (дискретном косинусоидальном преобразовании), средствами которого ваше изображение разбивается на области (обычно это квадраты 8Ѕ8 пикселей), внутри которых распределение цветов заменяется на математическую функцию и хранятся только коэффициенты этой функции, позволяющие восстановить ее вид. Главное преимущество JPEG-формата по сравнению с GIF заключается в том, что, в то время как GIF — только 8-разрядный, JPEG — 24-разрядный и может отображать до 16,7 млн. цветовых оттенков. По  этой причине полноцветный JPEG воспроизводит значительно большее количество видеоинформации, чем GIF. Этот формат лучше всего подходит для изображений реальной жизни — отсканированных картинок или цифровых фотографий. Работая с фотографией в JPEG-формате, имеется возможность сохранить 24-разрядное изображение с 16,7 млн. цветовых оттенков, и, несмотря на потерю качества при сжатии, оно все же значительно больше соответствует оригиналу, чем 256-цветное GIF-представление. При этом неизбежные потери качества сильно зависят от размера, качества и типа исходного изображения. Формат JPEG сжимает изображение, сохраняя его полную черно-белую версию и большую часть цветовой информации. Так как сохраняется не вся цветовая информация, формат JPEG называется форматом с потерями. Он более удобен для работы с графикой. В отличие от GIF, JPEG не позволяет включать в файл больше одного изображения. Оба этих средства можно использовать по желанию. Единственная проблема с прогрессивным JPEG, в отличие от чересстрочного GIF, состоит в том, что старые версии браузеров могут его не поддерживать.     Подводя итог  к данному параграфу важно  отметить, что человеческий глаз не одинаково воспринимает различные цвета. Существует понятие спектральная чувствительность глаза4, то есть способность человеческого глаза обладать неодинаковой чувствительностью к различным цветам спектра, на которое следует опираться при создание дизайна сайта. Следует помнить о том, что оптимальными для глаз являются синий, зеленый и желтые цвета и их оттенки.

 

 

 

 

 

 

 

 

 

 

 

 

4Статья профессора Н.Т.  Федорова, 1940 год, журнал «Русский  текст», раздел «Исторические заметки», http://russkij-tekst.ru/publ/25-1-0-395 .

§3. Социологический опрос.

              Цель анкетирования: выяснить, в какой мере люди разных социальных статусов (ученики, учителя, технические работники)  знакомы с понятием web – дизайн, а так же узнать их мнение о важных компонентах в дизайне сайтов.

Вопросы анкеты:

1. Ваш социальный статус:

а) учитель                       б) ученик                       в) технический работник

2. Сайты каких тематических групп Вы чаще всего посещаете?

А) развлекательные сайты, серверы досуга;

б) сайты для детей;

в) научные;

г) бизнес – сайты, серверы  деловой направленности.

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

А) да                                 б) нет                            в) затрудняюсь ответить

4. Важен ли дизайн сайта для его успешного развития?

А) да                              б) нет                            в) затрудняюсь ответить

5. Какие характеристики удовлетворяют понятию «успешный сайт»?

а) легкость освоения;

б) запоминаемость;

в) эффективность использования;

г) надежность использования;

д) удовлетворенность пользователя;

е) все выше перечисленное

6. Знакомо ли вам понятие «web – дизайн»?

а) да                                      б) нет

7. Какие требования важны для эффективного «web – дизайна»?

а) максимально удобный  интерфейс;

б) уникальное, яркое графическое  решение;

в) дизайн сайта не должен мешать восприятию и читабельности  текста;

г) дизайн сайта не должен увеличивать скорость загрузки страниц  сайта;

е) все вышеперечисленное.

 

 

 

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

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

Анализ анкетирования.

        Ученики                                                        учителя              технические работники

          Результаты анкетирования показали, что лишь 57,14% учителей, 80% технических работников и 85,7% школьников знакомы с понятием «web – дизайн». На вопрос «должен ли различаться дизайн различных тематических групп» утвердительно ответили 90,91% опрошенных и 3,03% считают, дизайн различных сайтов различаться не должен. Из числа опрошенных 84,85% считают, что дизайн сайта важен для его успешного развития, и 63,63% относят к характеристикам успешного сайта легкость освоения, запоминаемость, эффективность использования, надежность и удовлетворение потребностей пользователя. Большая часть опрошенных (57,57%) к требованиям эффективного «web – дизайна» относят удобный интерфейс, уникальное и яркое графическое решение, считают, что дизайн сайта не должен мешать восприятию и читабельности текста и не должен увеличивать скорость загрузки сайта. Так же удалось выяснить, что 60,60% покидают сайт из-за его медленной загрузки и из-за большого количества рекламы на сайте.

        На основе проведенного опроса можно сделать следующие выводы:

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Глава 2.

 Технологическая карта  по созданию сайта.

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

       Этапы создания сайта:

1. Разработка сайта на HTML;
2. Разработка шаблона сайта;
3. Верстка сайта на HTML.

      1 этап.

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

<html></html> — данный тег определяет начало и конец документа;

<head></head> — голова, тег отвечает за заголовок страницы;

<title></title> — название сайта, этим тегом прописывается название сайта;

<body></body> — тело документа, в данном теге прописывается основной код сайта.

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

1 2 3 4 5 6 7

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”> <HTML><!—Начало HTML документа à <HEAD><!—Начало заголовка à <TITLE>Заголовок  документа</TITLE> </HEAD><!—Конец заголовка à <BODY>Основной  текст документа</BODY> </HTML><!—Конец HTML документа à

        Где, <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”> – первая строчка, которая определяет версию языка HTML. Она прописывается один раз при создании сайта на HTML и остается неизменной.

        Прописали данный код программе Notepad2, сохранили его в формате .html и открыли в браузере Mozilla Firefox. Открылась совершенно пустая страница.

        2 этап. Разработка шаблона сайта.

       Шаблон сайта был создан в программе Adobe Photoshop CS5.

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

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

       Открываем Photoshop, создаем новый документ «Файл» - «Новый». Указываем высоту, ширину, разрешение и цветовую гамму.

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

Рис.1

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

Рис2

            Для наглядности сразу же выбрали фон сайта - #FFF01. Для этого создаем новый слой, кликаем на панели инструментов «Палитра цветов» - «Узоры» и выбираем нужный узор.

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