В помочь разработчикам Интернет-ресурсов

Материал из Letopisi.Ru — «Время вернуться домой»
(Различия между версиями)
Перейти к: навигация, поиск
 
Строка 1: Строка 1:
 +
(из Горюнова М.А., Клименков А.Г. Создание образовательных ресурсов в сети Интернет, СПб, ЛОИРО, 2002г.) Написано давно, поэтому, что касается технологии, правильнот говорить о стилевом подходе, но вряд ли в школах именно так и будут поступать начинающие.
 +
 +
 +
== Понятии образовательного  Интернет-ресурса ==
 +
 +
Прежде чем говорить о приёмах и средствах создания, поясним понятие «образовательный Интернет-ресурс».
 +
 +
Традиционно в рамках Интернета его трактуют очень широко. Например, на Всероссийский конкурс сетевых образовательных ресурсов «Образование в Рунете» (http://konkurs.auditorium.ru), проходящий под эгидой Министерства образования Россий-ской Федерации, Института "Открытое общество" (Фонд Сороса) и ФИО принимались сайты, содержащие материалы:
 +
* учреждений и организаций, которые реализуют образовательные программы для детей, юношества и молодежи, которые обеспечивают научно-методическое и ин-формационное обеспечение системы образования, а также обеспечивающих науч-но-техническую и инновационную политику в сфере образования;
 +
* в области гуманитарных, социально-экономических, точных и естественных наук, а также для учителей и школьников по школьным предметам;
 +
* дистанционного обучения и тестирования, научно-образовательных конкурсов и Интернет-олимпиад;
 +
* электронные библиотеки, каталоги, коллекции для целей образования, а также об-разовательная пресса;
 +
* персональные сайты работников сферы образования.
 +
 +
Рекомендуемый список сетевых образовательных ресурсов, с которыми, с точки зрения авторов, следует познакомиться для получения представления о разных типах образовательных Интернет-ресурсов, приводится в приложении.
 +
 +
Обратите внимание на то, что представленные в этом списке ресурсы создавались разработчиками различного профессионального уровня при неодинаковой технической и финансовой поддержке. Наряду с сайтами, созданными энтузиастами, представлены работы, выполненные профессиональными дизайн-студиями.
 +
 +
'''''Стремитесь к совершенству, но здраво оценивайте свои силы, планируя объем работ.'''''
 +
 +
 +
== Об особенностях Интернет-ресурсов ==
 +
 +
Поскольку мы говорим об образовательных ресурсах, эффективно функционирующих именно в сети Интернет, то наша задача - максимально реализовать потенциальные воз-можности Интернета с учётом существующих ограничений.
 +
 +
С одной стороны, Интернет-ресурс - это ресурс глобальной компьютерной сети, следова-тельно, имеется возможность передавать представленную в цифровом формате информа-цию на большие расстояния посредством сетевого оборудования. К сожалению, скорость передачи информации имеет физические ограничения, что влечёт за собой ограничения на объём передаваемых файлов.
 +
Дизайнеры, создававшие мультимедийные обучающие программы на CD, впервые взявшиеся за создание сайтов, приходят в ужас от количества ограничений. Ведь если объем стандартного CD составляет от 600 до 750 Mb, что, например, позволяет записывать на него изображения размером больше 1 Mb, то объем одной картинки на странице сайта только в особых случаях может превышать 50 Kb.
 +
 +
Вместе с тем, развитая инфраструктура Интернет предоставляет такие возможности, как:
 +
# Охват широчайшей аудитории (не только российской, но и международной)
 +
# Оперативное обновление информации
 +
# Использование непосредственных ссылок на другие ресурсы Интернета.
 +
# Широкое распространение информации о существовании ресурса с помощью инфор-мационно-поисковых систем сети Интернет
 +
 +
Следует также подчеркнуть, что, говоря об образовательных ресурсах сети Интернет, мы имеем в виду веб-сайты (набор гипертекстовых документов), грамотное структурирование которых позволяет существенно повысить эффективность работы с информацией.
 +
Поэтому:
 +
# Создание сетевых образовательных ресурсов требует особого технического и концептуального подхода. Способ их создания в корне отличается от технологии создания прочих образовательных ресурсов.
 +
# Любая информация, взятая из другого вида ресурса, должна быть соответствующим образом преобразована для включения ее в информационный образовательный ресурс сети Интернет.
 +
 +
 +
== Как начинать работу над Интернет-ресурсом==
 +
 +
Начиная делать сайт, следует сразу же проектировать его структуру. Но, составлять структуру в отсутствии материалов, которые будут в ней размещаться - дело бессмыслен-ное. Готовый материал обычно уже в должной мере структурирован. Если же при разра-ботке структуры материала нет и предполагается дальнейшее наполнение, то вы можете столкнуться с ситуацией, когда некоторые разделы на вашем сайте будут состоять из од-ного-двух абзацев, а некоторые - из десятков, сотен страниц информации. Итак, сначала создайте материалы для сайта, а потом преобразуйте их в структуру.
 +
 +
Не повторяйте ошибку многих начинающих дизайнеров, не начинайте разработку сайта с создания первой страницы. Типичная ситуация, когда тщательно разрабатывает-ся первая страница и она объявляется концепцией дизайна сайта. Бытует глубоко ошибоч-ное мнение, что внутренние страницы делать легче. Это не так. Начните разработку ди-зайна с внутренних страниц. А потом уже преобразуйте стандартную внутреннюю стра-ницу, внеся в нее необходимые изменения, в первую страницу сайта. Откажитесь от идеи создания первой страницы с центральным рисунком и парой кнопок - она не несет ника-кой смысловой нагрузки и в большинстве случаев только раздражает пользователя. Пом-ните то, что мы обсуждали выше: Интернет-старница - не мультимедийная программа, требующая заставки и не книжка, требующая обложки.
 +
 +
Разработайте навигацию сайта. Придумайте ее раз и навсегда. Не меняйте ее по сайту. Распространенная ошибка - на первой странице безумный коллаж,
 +
призванный символизировать идею вашего сайта, и разбросанные кнопки, а на второй - навигационная система резко меняется, заставляя пользователя заново разбираться в сис-теме навигации.
 +
 +
Постарайтесь, чтобы физическая структура соответствовала логической структуре вашего сайта, т.е. названия файлов и каталогов отражали их содержание.
 +
 +
== Структура страницы ==
 +
 +
Естественно, дать универсальные советы по выбору структуры страницы невозможно. Каждый сайт несет свою цель, которой подчиняется все - дизайн, графика, структура сай-та и его отдельных страниц. Но важно не увлекаться и все время помнить о том, что стра-ница должна быть удобна для пользователя.
 +
# Сведите до необходимого минимума количество графики на странице. Скорее всего, вы создаете сайт, на который пользователь будет заходить за информаци-ей, а не за сложной высокохудожественной графикой. Не все пользователи имеют выделенный доступ в Интернет. Необходимо всегда помнить о тех, кто выходит в сеть с помощью модема, и не заставлять его ждать загрузки вашей прекрасной графики в течение минуты (да он, скорее всего, и не будет дожи-даться - уйдет на другой сайт).
 +
# Если меню можно сделать текстовым способом, не стоит рисовать красивые кнопочки, которые увеличивают общий размер страницы.
 +
# Самую важную информацию следует располагать в верхнем левом углу экрана, туда в первую очередь устремится взгляд посетителя. По той же причине, рас-полагайте меню у левого края страницы. При этом старайтесь, чтобы все пунк-ты меню поместились на один экран и не требовали прокрутки. Как можно ближе к левому верхнему углу неплохо расположить ссылку на главную стра-ницу сайта и на верхний уровень иерархии по отношению к текущей странице.
 +
# При формировании страницы не старайтесь заполнить ее полностью, не бойтесь пустот, они будут приятнее глазу, чем пёстрая графика, полностью заполнив-шая всю страницу.
 +
# В некоторых случаях имеет смысл ограничить текст по ширине, оставив у краев страницы поля. Это можно сделать средствами CSS или поместив текст в таб-лицу с нулевой толщиной бордюра. Для небольших текстов оптимальная шири-на колонки 500-600 пикселей, для статей - 400 (чтобы осталось место для ма-ленькой колонки со ссылками и комментариями). При этом, не следует ограни-чивать большой текст (например, если на одной странице выложен текст целой книги).
 +
# Имеет смысл указать внизу каждой страницы адрес электронной почты, а не выносить ее на отдельную страницу “контакты”. Тогда человеку, который со-хранил любую страницу вашего сайта, не составит труда связаться с вашей ор-ганизацией.
 +
 +
== Особенности написания гипертекста для Интернета ==
 +
 +
Тексты, написанные для Интернета, имеют ряд особенностей, продиктованных специфичностью работы с ними. Статья, написанная для включения в журнал, не подхо-дит для выкладывания на сайт и требует дополнительной обработки. Читать тексты с эк-рана компьютера сложнее, чем с листа, кроме того, всегда нужно помнить о том, что мы пишем не просто текст, а гипертекст, что также накладывает свои требования на порядок создания текста.
 +
 +
Для того, чтобы правильно писать тексты для Интернета, необходимо знать психо-логию их читателя, его мотивации и привычки. Их изучением занимается сравнительно новое исследовательское направление, которое называется юзабилити (Usability). Один из самых известных ученых, проводящих исследования в этой области - Якоб Нильсон (http://www.useit.com). По результатам многочисленных опытов и опросов он вырабатыва-ет рекомендации по правильному структурированию информации, предназначенной для сети Интернет. Некоторые из них мы приводим в этом издании.
 +
 +
Необходимо помнить, что пользователь, находясь в Интернете, не читает страни-цы подряд - вместо этого он лишь просматривает их, пытаясь обнаружить искомую ин-формацию в нескольких предложениях или даже частях предложений. Просмотр текста страницы вместо чтения - норма поведения пользователей. Девиз пользователя:  "Если информация не попадается на глаза сразу, значит ее нужно искать в другом источнике". Это нужно учитывать при написании любых информационных материалов, которые пред-назначены для чтения с экрана.
 +
 +
 +
Еще один аспект поведения пользователей заключается в том, что пользователи терпеть не могут все, что похоже на рекламу или написано в рекламном стиле, - они пред-почитают, чтобы текст был сжатым и исключительно "по делу". Вот одна цитата из письма недовольного пользователя, приводимая Нильсоном: "Когда я вас спрашиваю, поддерживает ли Sun cтарую версию Solaris, а вы мне отвечаете, что "Sun - ведущая операционная система в современном деловом мире...", - это не дает мне, инженеру, ни малейшего намека на технические возможности Sun. Черт возьми, почему бы тогда просто не выкрасить свой сайт в красный цвет и не написать "Компьютеры всего мира, объединяйтесь под флагом Sun"!"
 +
 +
При написании текста, помните, что визуальная разметка не повредит любому тек-сту. Ни в коем случае не пишите текст сплошным блоком, поделенным на абзацы, как вы это делаете при написании статей. Тег <P> не случайно оставляет промежуток между аб-зацами - это помогает пользователю быстрее найти нужную часть текста. Размер одного абзаца не должен превышать вертикального размера экрана. Не пишите слишком боль-ших текстов, лучше поделите текст на логические части и вынесите каждую на отдельную страницу.
 +
Вот основные составляющие хорошего текста в Интернете:
 +
# тщательная сгруппированность информации;
 +
# использование слов и понятий, знакомых и понятных читателю;
 +
# правильное написание первых фраз абзацев;
 +
# отведение каждой идее отдельного абзаца текста;
 +
# правильное определение оптимального объема текста.
 +
 +
В структуре текста пользователям нравятся всевозможные оглавления и стиль "перевернутой пирамиды", когда каждый новый уровень заголовков начинается чуть сдвинутым вправо относительно родительского уровня.
 +
 +
Помните, что юмор и игровой стиль делают сайт более привлекательным. Пред-почтение пользователей отдается простому и неформальному стилю письма. Естественно, это не относится к научным и справочным материалам, но, любой автор учебника знает, что чем легче и веселее написан текст, тем популярнее будет этот учебник.
 +
 +
Пишущий должен формировать доверие к тексту сайта. Как можно чаще ссылай-тесь на источники информации. Внешние ссылки также повышают доверие читателей к содержимому сайта.
 +
 +
На больших сайтах, состоящих из нескольких десятков страниц, имеет смысл разместить поисковую систему. Как бы хорошо ни была структурирована информация, пользователи все равно захотят воспользоваться поиском для получения быстрой справки по интересующей их информации, а не выискивать ее в дебрях сотен страниц с текстом. Нильсон выдвигает лозунг: "Хорошая поисковая машина - основа хорошего ресурса"
 +
 +
Графические элементы, не относящиеся к навигации сайта, используйте только, если они дополняют текст. Не увлекайтесь всевозможными виньетками и украшательст-вами - они уместны в томике стихов, но никак не на Интернет-странице.
 +
 +
Не увлекайтесь пиктограммами. Они либо должны быть интуитивно понятными - тогда они помогут пользователю в работе с сайтом, либо должны быть заменены или со-провождены текстовыми подписями. Если пользователю с первого взгляда не понятно, что означает какая-либо пиктограмма, то лучше отказаться от нее вовсе.
 +
 +
Грамотное использование гиперссылок - своего рода искусство. Никогда не ставьте пользователя в положение буриданова осла - что делать: идти по ссылке или чи-тать дальше. Многие авторы любят превращать в ссылку целое предложение или даже аб-зац. Это грубейшее непонимание самого смысла гипертекста. Максимальный кусок тек-ста, который может стать гиперссылкой - словосочетание. Причем примерное содержание того, что пользователь увидит, нажав на ссылку, должно быть очевидно для него уже по тексту ссылки.
 +
Продумайте маршруты перемещения пользователя по сайту. Избегайте сложных и запу-танных конструкций с перекрестными ссылками.
 +
 +
Нильсоном было выработано «правило двух ссылок». Оно гласит: “В пределах сай-та кратчайшее расстояние между двумя узлами гипертекста не должно превышать двух переходов”. Старайтесь его соблюдать. Для этого очень полезно будет начертить для себя древо ссылок.
 +
 +
Ожидание загрузки чего-либо крайне нежелательно. Если на сайте есть большие элементы (графика, анимация и т.п.) - дайте пользователю возможность выбрать, за-гружать их или не загружать. Будьте уверенны - 99 из 100 пользователей не станет ждать загрузки одной страницы больше 30 секунд. Они просто покинут ваш сайт, причем, навсегда. Одна страница, размер которой вместе с графикой превышает 50 Kb, уже считается большой.
 +
 +
 +
== Особенности web-графики. ==
 +
 +
Первым графическим форматом, использовавшимся в Internet, был XBM. Файл с изобра-жением XBM был по сути программой на языке C, которая рисовала изображение (черно-белое). Сейчас XBM очень редко встречается в Internet, но по-прежнему поддерживается в броузерах.
 +
 +
В современном Интернете есть два основных формата, в которых хранится подав-ляющее большинство графических изображений: GIF и JPEG.
 +
GIF (Graphics Interchange Format) - разработан в 1987 году для быстрого обмена графиче-скими изображениями в сети CompuServe. Он содержит в своей структуре алгоритм упа-ковки данных, почти не уступающий по эффективности программам-архиваторам. Это снискало ему большую популярность. По степени сжатия он уступает только формату JPEG (от названия организации Joint Photographic Experts Group). Но если JPEG достигает большого уровня сжатия за счет потерь качества изображения, то GIF сохраняет всю ин-формацию без потерь. При этом, следует заметить, что JPEG позволяет хранить полно-цветные изображения с 16 миллионами цветов (true color), а GIF довольствуется 256-цветовой палитрой.
 +
 +
Формат JPEG обычно используется для хранения фотографических изображений с плавными полутонами, где снижение качества практически незаметно. Формат GIF при-меняют для хранения изображений, где участвуют большие плоскости ровного цвета, чет-кие линии и границы. Обычно это искусственные изображения, созданные с помощью компьютера - логотипы, тексты, заголовки. Если вы попытаетесь сохранить логотип с чет-кими границами в формате JPEG, он неминуемо будет выглядеть неряшливо и нечетко, на изображении появится мусор, размытые области и рябь. Фотография же, сохраненная в формате GIF, будет испорчена после втискивания в 256-цветовую палитру, плавная игра светотени заменится на четко ограниченные площади близких по тону, но все-таки разных цветов.
 +
 +
У формата GIF есть несколько дополнительных возможностей. Во-первых, он по-зволяет задавать количество цветов или размер палитры, используемой в изображении. Удаление из палитры ненужных цветов - очень эффективный способ снижения размера файла. Во-вторых, GIF позволяет вводить в изображение прозрачность (формат “GIF89a”). Эта возможность в полной мере была реализована с широким развитием Интернета и про-грамм-броузеров. Один из цветов при создании рисунка объявляется прозрачным и при выводе изображения на экран вместо него выводится то, что расположено под картинкой (например, фон страницы). По сути, эта возможность позволяет создавать изображения произвольной (а не только прямоугольной) формы.
 +
 +
Еще одна возможность формата GIF89a - включение в него анимации. В один файл может быть записан ряд отдельных кадров-изображений, которые с заранее заданными промежутком времени и периодичностью сменяют друг-друга. Этой возможностью ак-тивно пользуются создатели рекламных баннеров.
 +
 +
Формат JPEG был разработан группой экспертов по фотографии под эгидой ISO - Международной организации по стандартам. Алгоритм сжатия формата JPEG ранее ис-пользовался на телевидении в схеме телевизионной трансляции США - NTSC. Он основан на ограниченности человеческого зрения и на сегодняшний день является одним из самых эффективных алгоритмов сжатия графической информации. Коэффициент его сжатия достигает 1:100. Он, в отличие от формата GIF, позволяет хранить изображения в true color. Однако, нужно помнить, что при повторном сохранении изображения в формате JPEG он повторно запускает алгоритм сжатия, что, естественно, ухудшает качество. По-этому, всегда помните, что сохранять изображение в формате JPEG нужно только после его окончательной обработки.
 +
 +
Оба формата поддерживаются по умолчанию всеми броузерами и могут быть обработаны любым мало-мальски серьезным графическим редактором.
 +
 +
Существует и ещё один полноправный член сообщества графических форматов для гло-бальной компьютерной сети, хотя и менее популярный. Это формат – PNG (Portable Net-work Graphics). У него есть много своих «плюсов». Например, PNG поддерживает три ти-па изображений: цветное с глубиной 24 бита, 256 оттенков серого и цветное с глубиной 8 бит. Как и в GIF, 256 цветов изображения с глубиной 8 бит могут быть взяты из палитры, где их 16 млн. Но, поскольку в PNG нет четкого деления между этими типами, то в графи-ческий файл формата PNG записывается описание всей палитры, что позволяет гибко подстраиваться под реальное число цветов в изображении. К тому же, в PNG усовершен-ствован принцип альфа-канала, и по сравнению с GIF в нем уже не 2, а 254 уровня, что позволяет строить сложные многослойные изображения. Как и GIF, PNG поддерживает чересстрочную развертку. Но не все броузеры поддерживают PNG.
 +
 +
 +
== Аспекты графического оформления страниц. ==
 +
 +
Естественно, на страницах этого издания мы не сможем сформулировать азы дизайна, а тем более, привить нашим читателям вкус. Но, имеет смысл, сформулировать основные рекомендации по графическому оформлению страниц, которых следует придерживаться.
 +
 +
# Никогда не пишите светлыми буквами по светлому фону и темными буквами по темно-му фону. Никакие изыски дизайна не стоят того, что ваши посетители не смогу прочитать текст вашей страницы, который написан голубыми буквами по желтому фону. Выбирайте цветовые схемы, которые не раздражают глаз и способствуют удобному и быстрому чте-нию. Подбирайте сочетаемые друг с другом цвета. Если вы сомневаетесь в собственных силах, воспользуйтесь готовыми цветовыми схемами, предлагаемыми большинством ре-дакторов.
 +
# Не перегружайте дизайн большим количеством цветов. Наличие на вашей странице всех цветов радуги еще не сделает ее красивой. Выберите одну гамму, включающую от-тенки 2-3 цветов и придерживайтесь ее при оформлении всех графических и текстовых элементов.
 +
# Если вы затрудняетесь с выбором цветовой гаммы оформления, используйте универ-сальный набор "Белый – Черный – Красный". Эти цвета сочетаются друг с другом при любых композиционных условиях.
 +
# Старайтесь не вставлять на страницу графический фон. В большинстве случаев он лишь затруднит чтение текста. Если без фона обойтись нельзя, то самый мелкий графический элемент изображения фона должен во много раз превышать размер одной буквы текста. Фон должен иметь низкую контрастность и плавные переходы между цветами.
 +
# Если вы все же используете фоновое изображение, поставьте такой фоновый цвет стра-ницы, чтобы он примерно совпадал по тону и контрасту с фоновым рисунком.
 +
# Используйте только цвета из так называемого набора web-цветов  (безопасной палит-ры). Только тогда вы можете быть полностью уверенными, что цветовая гамма вашей страницы верно отобразится во всех броузерах и на всех мониторах. Этого можно достичь используя два одинаковых числа в записи каждого из трех цветовых каналов (например, цвет #CC6701 не будет верно отображаться в некоторых версиях броузеров, и будет авто-матически приводиться к цвету #CC6600, который, в свою очередь, понимается любой программой одинаково). В последних версиях редактора Adobe Photoshop при выборе цвета есть возможность включить автоматическое отображение только web-цветов на цве-товом поле.
 +
# Помните о том, что белый цвет фона стоит по умолчанию далеко не во всех броузерах. Если вы используете в дизайне страницы белый фон, не забывайте каждый раз прописы-вать его в коде страницы.
 +
# Не используйте больше двух шрифтов в оформлении страницы. Старайтесь, чтобы стиль шрифта соответствовал стилю и смыслу страницы.
 +
# Не прописывайте название конкретного шрифта в коде HTML. Совсем не обязательно, что у пользователя будет на компьютере тот шрифт, который вы насильно навязали ему, например, в файле стиля. Нередка ситуация, когда текст страницы становится полностью нечитаемым только из-за того, что ее автор стремился навязать пользователю свое шриф-товое оформление.
 +
# У всех изображений всегда прописывайте атрибуты "ширина" и "высота". Во-первых, это не позволит расползтись структуре страницы во время загрузки, а во-вторых позволит сохранить структуру даже в том случае, когда у пользователя отключена графика.
 +
# Не увлекайтесь всякими графическими эффектами (java-апплетами, фильтрами, ани-мацией), если они не несут существенной смысловой нагрузки. Они мешают восприни-мать текст страницы и замедляют ее загрузку. Кроме того, они в большинстве своём рас-считаны на один определенный броузер и не будут работать в других.
 +
# Не увлекайтесь графическими элементами с текстовой информацией. Любой тексто-вый заголовок, пункт меню и т.п. можно написать средствами HTML, а не включать его в страницу в виде картинки.
 +
Исключение составляют те случаю, когда нужно отразить информацию, написанную рус-скими буквами, в рамках англоязычной версии, например, заголовок вашего сайта. Обыч-но у иностранных партнёров на компьютере не установлена кириллица, и этот текст будет представлен в виде бессмысленных знаков. В этой ситуации – единственное спасение, «зацементировать» русский текст в графике.
 +
 +
 +
== Работа над сайтом ==
 +
 +
Надёжнее всего создавать сайт в простом текстовом редакторе непосредственно в HTML-кодах. Значительно ускоряет эту работу использование визуального web-редактора, но будьте при этом осмотрительны. Страницы в Интернете просматриваются с помощью различных броузеров, в различных операционных системах и добиться, чтобы во всех случаях страница выглядела одинаково, картинки не разъехались в разные сторо-ны, текст не переместился в другой угол страницы, можно только зная тонкости языка HTML. Визуальные HTML-редакторы в большинстве своем этих тонкостей не учитывают, поэтому пользоваться ими надо крайне аккуратно.
 +
 +
Один из лучших WYSIWYG-редакторов для работы над сайтом – DreamWeaver, продукт компании Macromedia. При создании страницы в DreamWeaver вы можете иметь полный контроль над HTML-кодом, поскольку он позволяет редактировать документ сразу в двух режимах – визуальном и в кодах.
 +
У этого редактора много достоинств, в том числе, в рамках текущего сеанса работы мож-но отменить (“Undo”) даже те «шаги», которые были сделаны до сохранения файла.
 +
Рекомендации по работе с этой программой приводятся в приложении.
 +
В момент написания пособия существует возможность скачать 30-ти дневную версию программы на законных основаниях на сайте фирмы Macromedia.
 +
 +
Необходимы программы для работы с графикой. Для растровой графики чаще всего используется Adobe Photoshop, а для векторной - Corel Xara. Мощный инструмент для оптимизации web-ориентированной графики – Ulead Smart Saver Pro.
 +
 +
Помните, что нужно очень аккуратно относиться к именам файлов и каталогов. Подавляющее большинство серверов, составляющих Интернет, работает под управлением ОС Unix, FreeBSD и т.д., но никак не Windows (из-за ее крайне низкой надежности). В Windows регистр букв в названиях файлов и каталогов не имеет значения, т.е.  Index.HTML и INDEX.html - это один и тот же файл, чего нельзя сказать о наименованиях файлов в ОС Unix. Поэтому, возьмите за правило всегда использовать в именах файлов, каталогов и расширениях маленькие буквы - так вы никогда не ошибетесь. Кстати, это еще один минус большинства визуальных HTML-редакторов, работающих под Windows. Они очень свободно обращаются с именами файлов и ссылками на них. Ну и, конечно же, не пытайтесь использовать русские буквы в названиях ваших файлов.
 +
 +
== Основные ошибки при структурировании сайта ==
 +
 +
Продолжим знакомиться с исследованиями и рекомендациями Якоба Нильсона, приведенными в предыдущем разделе. Теперь обратимся к самой структуре сайта и его дизайна. Нильсон очень удачно выделил основные ошибки и “подводные камни”, на которые наталкиваются многие дизайнеры.
 +
 +
* Вначале - об использовании фреймов. Спор по поводу того, использовать их или нет, не утихает и по сей день. Есть как ярые сторонники их использования, так и ярые противники. В любом случае, очевидно, что они делают страницу громоздкой и неудоб-ной. Кроме того, они затрудняют индексацию страниц поисковыми системами. Поэтому, от фреймов лучше отказаться совсем. Если же они необходимы (бывают такие очень редкие случаи), то лучше формировать их программным способом.
 +
 +
* Многие любят увлекаться использованием новейших технологий. Это одна из серьезнейших проблем современного Интернета. Любой пользователь, столкнувшись с при-митивной ошибкой JavaScript, немедленно покинет ваш сайт.  Прежде чем использовать новые технологии (анимацию, виртуальный мир и т.п.), подумайте, насколько они необ-ходимы на вашей станице. Простая погоня за модой и нововведениями не имеет смысла.
 +
 +
* Старайтесь не включать в оформление сайта, если это не необходимо, анимацию GIF. Пользователи отождествляют такой дизайн с рекламой, которую они уже научились автоматически игнорировать. Заставить их прийти на ваш сайт вторично будет гораздо сложнее.
 +
 +
* При составлении структуры каталогов и присваивании имен файлам на сайте, помните об еще одной очень серьезной проблеме: нелогичные адреса URL. Сегодня люди уделяют адресам меньше внимания, чем раньше, благодаря сильно развитой навигации по страницам. Тем не менее, все каталоги и названия документов должны быть связаны с их содержанием.
 +
 +
* Старайтесь не терять пользователей при неправильном наборе ими адресов. Изме-ните страницу, выдающуюся по ошибке (если вы имеете возможность ее менять), включив в нее ссылки на основные страницы сайта. Большинство пользователей знает, что в случае отсутствия страницы на сайте, нужно просто отсечь конец адреса. Но такой способ неизвестен новичкам и раздражает опытных пользователей. Кстати, в связи с этим, проследите, чтобы любой каталог на вашем сайте имел файл index.html.
 +
 +
* По проведенным Нильсоном исследованиям, 90% пользователей не прокручивают навигационный блок, который вылезает за пределы экрана, а выбирают несколько види-мых на экране пунктов. Сделайте соответствующие выводы.
 +
 +
* Делайте навигацию на сайте простой и интуитивно понятной. Люди привыкли к определенным канонам в дизайне. Если базовые элементы (например, наличие на любой странице сайта ссылки на главную страницу) отсутствуют, пользователь может даже рас-теряться.
 +
 +
* Серьезная проблема современного Интернета - устаревшая информация. Помните, что множество сайтов, сходных по тематике с вашим, продолжают постоянно обновляться и развиваться. Показать пользователю устаревшую информацию - верный способ занизить оценку вашего сайта. Но при этом архивы старой информации - это достоинство сайта, и они очень сильно отличаются от устаревшей информации.
 +
 +
* При написании ссылок, не открывайте страницу в новом окне броузера. Появ-ление новых окон броузера - это самое раздражающее любого пользователя действие. "Когда на экране появляется новые окна, которые я не просил открывать, мне сразу при-ходит в голову продавец пылесосов, который, войдя в дом, вываливает на ковер пепель-ницу, а потом успешно убирает мусор. Так вот - не надо засорять мне экран, особенно учитывая то, как убого управляется с окнами самая популярная операционная система! Если мне нужно будет новое окно броузера, я сам его открою." (Якоб Нильсен). Многие пользователи автоматически закрывают любое выпадающее окно еще до того, как оно за-грузится.
 +
 +
* Есть вещи, которые интуитивно напоминают пользователю рекламу. За годы суще-ствования Интернета у многих выработался специфический рефлекс, называемый бан-нерная слепотой - пользователи никогда не фиксируют взгляд на графическом элементе, который находится на традиционном месте баннеров - вверху или внизу страницы. По той же причине пользователи избегают смотреть на мигающий, движущийся текст или дру-гую агрессивную анимацию.
 +
 +
* Несколько слов стоит сказать о сайтах различных организаций. Типичной ошибкой является вынесение на видное место страницы с фотографиями сотрудников и их должностями. Это информация, которая может понадобится только сотрудникам внутри самой компании, но никак не стороннему посетителю, которого наверняка больше волну-ет деятельность вашей организации. По той же причине, не стоит размещать на первой странице сайта фотографию директора.
 +
 +
* Надпись “Under Construction” - один из признаков того, как вы относитесь к сво-ему сайту. Пользователь не должен увидеть этой надписи никогда. Вместо того, чтобы выкладывать пустые страницы с этой надписью, оставьте их на своем винчестере.
 +
 +
* При создании навигационного блока, не создавайте “закрытых” пунктов меню, которые разворачиваются при наведении на них мышкой. Это первый признак непрофес-сионализма. Ни один пользователь не будет выучивать, что они означают.
 +
  
 
[[Категория:Cельская школа]]
 
[[Категория:Cельская школа]]
 
[[Категория:Информатизация сельской школы]]
 
[[Категория:Информатизация сельской школы]]

Версия 21:14, 5 ноября 2006

(из Горюнова М.А., Клименков А.Г. Создание образовательных ресурсов в сети Интернет, СПб, ЛОИРО, 2002г.) Написано давно, поэтому, что касается технологии, правильнот говорить о стилевом подходе, но вряд ли в школах именно так и будут поступать начинающие.


Содержание

Понятии образовательного Интернет-ресурса

Прежде чем говорить о приёмах и средствах создания, поясним понятие «образовательный Интернет-ресурс».

Традиционно в рамках Интернета его трактуют очень широко. Например, на Всероссийский конкурс сетевых образовательных ресурсов «Образование в Рунете» (http://konkurs.auditorium.ru), проходящий под эгидой Министерства образования Россий-ской Федерации, Института "Открытое общество" (Фонд Сороса) и ФИО принимались сайты, содержащие материалы:

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

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

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

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


Об особенностях Интернет-ресурсов

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

С одной стороны, Интернет-ресурс - это ресурс глобальной компьютерной сети, следова-тельно, имеется возможность передавать представленную в цифровом формате информа-цию на большие расстояния посредством сетевого оборудования. К сожалению, скорость передачи информации имеет физические ограничения, что влечёт за собой ограничения на объём передаваемых файлов. Дизайнеры, создававшие мультимедийные обучающие программы на CD, впервые взявшиеся за создание сайтов, приходят в ужас от количества ограничений. Ведь если объем стандартного CD составляет от 600 до 750 Mb, что, например, позволяет записывать на него изображения размером больше 1 Mb, то объем одной картинки на странице сайта только в особых случаях может превышать 50 Kb.

Вместе с тем, развитая инфраструктура Интернет предоставляет такие возможности, как:

  1. Охват широчайшей аудитории (не только российской, но и международной)
  2. Оперативное обновление информации
  3. Использование непосредственных ссылок на другие ресурсы Интернета.
  4. Широкое распространение информации о существовании ресурса с помощью инфор-мационно-поисковых систем сети Интернет

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

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


Как начинать работу над Интернет-ресурсом

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

Не повторяйте ошибку многих начинающих дизайнеров, не начинайте разработку сайта с создания первой страницы. Типичная ситуация, когда тщательно разрабатывает-ся первая страница и она объявляется концепцией дизайна сайта. Бытует глубоко ошибоч-ное мнение, что внутренние страницы делать легче. Это не так. Начните разработку ди-зайна с внутренних страниц. А потом уже преобразуйте стандартную внутреннюю стра-ницу, внеся в нее необходимые изменения, в первую страницу сайта. Откажитесь от идеи создания первой страницы с центральным рисунком и парой кнопок - она не несет ника-кой смысловой нагрузки и в большинстве случаев только раздражает пользователя. Пом-ните то, что мы обсуждали выше: Интернет-старница - не мультимедийная программа, требующая заставки и не книжка, требующая обложки.

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

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

Структура страницы

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

  1. Сведите до необходимого минимума количество графики на странице. Скорее всего, вы создаете сайт, на который пользователь будет заходить за информаци-ей, а не за сложной высокохудожественной графикой. Не все пользователи имеют выделенный доступ в Интернет. Необходимо всегда помнить о тех, кто выходит в сеть с помощью модема, и не заставлять его ждать загрузки вашей прекрасной графики в течение минуты (да он, скорее всего, и не будет дожи-даться - уйдет на другой сайт).
  2. Если меню можно сделать текстовым способом, не стоит рисовать красивые кнопочки, которые увеличивают общий размер страницы.
  3. Самую важную информацию следует располагать в верхнем левом углу экрана, туда в первую очередь устремится взгляд посетителя. По той же причине, рас-полагайте меню у левого края страницы. При этом старайтесь, чтобы все пунк-ты меню поместились на один экран и не требовали прокрутки. Как можно ближе к левому верхнему углу неплохо расположить ссылку на главную стра-ницу сайта и на верхний уровень иерархии по отношению к текущей странице.
  4. При формировании страницы не старайтесь заполнить ее полностью, не бойтесь пустот, они будут приятнее глазу, чем пёстрая графика, полностью заполнив-шая всю страницу.
  5. В некоторых случаях имеет смысл ограничить текст по ширине, оставив у краев страницы поля. Это можно сделать средствами CSS или поместив текст в таб-лицу с нулевой толщиной бордюра. Для небольших текстов оптимальная шири-на колонки 500-600 пикселей, для статей - 400 (чтобы осталось место для ма-ленькой колонки со ссылками и комментариями). При этом, не следует ограни-чивать большой текст (например, если на одной странице выложен текст целой книги).
  6. Имеет смысл указать внизу каждой страницы адрес электронной почты, а не выносить ее на отдельную страницу “контакты”. Тогда человеку, который со-хранил любую страницу вашего сайта, не составит труда связаться с вашей ор-ганизацией.

Особенности написания гипертекста для Интернета

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

Для того, чтобы правильно писать тексты для Интернета, необходимо знать психо-логию их читателя, его мотивации и привычки. Их изучением занимается сравнительно новое исследовательское направление, которое называется юзабилити (Usability). Один из самых известных ученых, проводящих исследования в этой области - Якоб Нильсон (http://www.useit.com). По результатам многочисленных опытов и опросов он вырабатыва-ет рекомендации по правильному структурированию информации, предназначенной для сети Интернет. Некоторые из них мы приводим в этом издании.

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


Еще один аспект поведения пользователей заключается в том, что пользователи терпеть не могут все, что похоже на рекламу или написано в рекламном стиле, - они пред-почитают, чтобы текст был сжатым и исключительно "по делу". Вот одна цитата из письма недовольного пользователя, приводимая Нильсоном: "Когда я вас спрашиваю, поддерживает ли Sun cтарую версию Solaris, а вы мне отвечаете, что "Sun - ведущая операционная система в современном деловом мире...", - это не дает мне, инженеру, ни малейшего намека на технические возможности Sun. Черт возьми, почему бы тогда просто не выкрасить свой сайт в красный цвет и не написать "Компьютеры всего мира, объединяйтесь под флагом Sun"!"

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

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

  1. тщательная сгруппированность информации;
  2. использование слов и понятий, знакомых и понятных читателю;
  3. правильное написание первых фраз абзацев;
  4. отведение каждой идее отдельного абзаца текста;
  5. правильное определение оптимального объема текста.
В структуре текста пользователям нравятся всевозможные оглавления и стиль "перевернутой пирамиды", когда каждый новый уровень заголовков начинается чуть сдвинутым вправо относительно родительского уровня. Помните, что юмор и игровой стиль делают сайт более привлекательным. Пред-почтение пользователей отдается простому и неформальному стилю письма. Естественно, это не относится к научным и справочным материалам, но, любой автор учебника знает, что чем легче и веселее написан текст, тем популярнее будет этот учебник. Пишущий должен формировать доверие к тексту сайта. Как можно чаще ссылай-тесь на источники информации. Внешние ссылки также повышают доверие читателей к содержимому сайта. На больших сайтах, состоящих из нескольких десятков страниц, имеет смысл разместить поисковую систему. Как бы хорошо ни была структурирована информация, пользователи все равно захотят воспользоваться поиском для получения быстрой справки по интересующей их информации, а не выискивать ее в дебрях сотен страниц с текстом. Нильсон выдвигает лозунг: "Хорошая поисковая машина - основа хорошего ресурса" Графические элементы, не относящиеся к навигации сайта, используйте только, если они дополняют текст. Не увлекайтесь всевозможными виньетками и украшательст-вами - они уместны в томике стихов, но никак не на Интернет-странице. Не увлекайтесь пиктограммами. Они либо должны быть интуитивно понятными - тогда они помогут пользователю в работе с сайтом, либо должны быть заменены или со-провождены текстовыми подписями. Если пользователю с первого взгляда не понятно, что означает какая-либо пиктограмма, то лучше отказаться от нее вовсе. Грамотное использование гиперссылок - своего рода искусство. Никогда не ставьте пользователя в положение буриданова осла - что делать: идти по ссылке или чи-тать дальше. Многие авторы любят превращать в ссылку целое предложение или даже аб-зац. Это грубейшее непонимание самого смысла гипертекста. Максимальный кусок тек-ста, который может стать гиперссылкой - словосочетание. Причем примерное содержание того, что пользователь увидит, нажав на ссылку, должно быть очевидно для него уже по тексту ссылки. Продумайте маршруты перемещения пользователя по сайту. Избегайте сложных и запу-танных конструкций с перекрестными ссылками. Нильсоном было выработано «правило двух ссылок». Оно гласит: “В пределах сай-та кратчайшее расстояние между двумя узлами гипертекста не должно превышать двух переходов”. Старайтесь его соблюдать. Для этого очень полезно будет начертить для себя древо ссылок. Ожидание загрузки чего-либо крайне нежелательно. Если на сайте есть большие элементы (графика, анимация и т.п.) - дайте пользователю возможность выбрать, за-гружать их или не загружать. Будьте уверенны - 99 из 100 пользователей не станет ждать загрузки одной страницы больше 30 секунд. Они просто покинут ваш сайт, причем, навсегда. Одна страница, размер которой вместе с графикой превышает 50 Kb, уже считается большой.

Особенности web-графики.

Первым графическим форматом, использовавшимся в Internet, был XBM. Файл с изобра-жением XBM был по сути программой на языке C, которая рисовала изображение (черно-белое). Сейчас XBM очень редко встречается в Internet, но по-прежнему поддерживается в броузерах.

В современном Интернете есть два основных формата, в которых хранится подав-ляющее большинство графических изображений: GIF и JPEG. GIF (Graphics Interchange Format) - разработан в 1987 году для быстрого обмена графиче-скими изображениями в сети CompuServe. Он содержит в своей структуре алгоритм упа-ковки данных, почти не уступающий по эффективности программам-архиваторам. Это снискало ему большую популярность. По степени сжатия он уступает только формату JPEG (от названия организации Joint Photographic Experts Group). Но если JPEG достигает большого уровня сжатия за счет потерь качества изображения, то GIF сохраняет всю ин-формацию без потерь. При этом, следует заметить, что JPEG позволяет хранить полно-цветные изображения с 16 миллионами цветов (true color), а GIF довольствуется 256-цветовой палитрой.

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

У формата GIF есть несколько дополнительных возможностей. Во-первых, он по-зволяет задавать количество цветов или размер палитры, используемой в изображении. Удаление из палитры ненужных цветов - очень эффективный способ снижения размера файла. Во-вторых, GIF позволяет вводить в изображение прозрачность (формат “GIF89a”). Эта возможность в полной мере была реализована с широким развитием Интернета и про-грамм-броузеров. Один из цветов при создании рисунка объявляется прозрачным и при выводе изображения на экран вместо него выводится то, что расположено под картинкой (например, фон страницы). По сути, эта возможность позволяет создавать изображения произвольной (а не только прямоугольной) формы.

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

Формат JPEG был разработан группой экспертов по фотографии под эгидой ISO - Международной организации по стандартам. Алгоритм сжатия формата JPEG ранее ис-пользовался на телевидении в схеме телевизионной трансляции США - NTSC. Он основан на ограниченности человеческого зрения и на сегодняшний день является одним из самых эффективных алгоритмов сжатия графической информации. Коэффициент его сжатия достигает 1:100. Он, в отличие от формата GIF, позволяет хранить изображения в true color. Однако, нужно помнить, что при повторном сохранении изображения в формате JPEG он повторно запускает алгоритм сжатия, что, естественно, ухудшает качество. По-этому, всегда помните, что сохранять изображение в формате JPEG нужно только после его окончательной обработки.

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

Существует и ещё один полноправный член сообщества графических форматов для гло-бальной компьютерной сети, хотя и менее популярный. Это формат – PNG (Portable Net-work Graphics). У него есть много своих «плюсов». Например, PNG поддерживает три ти-па изображений: цветное с глубиной 24 бита, 256 оттенков серого и цветное с глубиной 8 бит. Как и в GIF, 256 цветов изображения с глубиной 8 бит могут быть взяты из палитры, где их 16 млн. Но, поскольку в PNG нет четкого деления между этими типами, то в графи-ческий файл формата PNG записывается описание всей палитры, что позволяет гибко подстраиваться под реальное число цветов в изображении. К тому же, в PNG усовершен-ствован принцип альфа-канала, и по сравнению с GIF в нем уже не 2, а 254 уровня, что позволяет строить сложные многослойные изображения. Как и GIF, PNG поддерживает чересстрочную развертку. Но не все броузеры поддерживают PNG.


Аспекты графического оформления страниц.

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

  1. Никогда не пишите светлыми буквами по светлому фону и темными буквами по темно-му фону. Никакие изыски дизайна не стоят того, что ваши посетители не смогу прочитать текст вашей страницы, который написан голубыми буквами по желтому фону. Выбирайте цветовые схемы, которые не раздражают глаз и способствуют удобному и быстрому чте-нию. Подбирайте сочетаемые друг с другом цвета. Если вы сомневаетесь в собственных силах, воспользуйтесь готовыми цветовыми схемами, предлагаемыми большинством ре-дакторов.
  2. Не перегружайте дизайн большим количеством цветов. Наличие на вашей странице всех цветов радуги еще не сделает ее красивой. Выберите одну гамму, включающую от-тенки 2-3 цветов и придерживайтесь ее при оформлении всех графических и текстовых элементов.
  3. Если вы затрудняетесь с выбором цветовой гаммы оформления, используйте универ-сальный набор "Белый – Черный – Красный". Эти цвета сочетаются друг с другом при любых композиционных условиях.
  4. Старайтесь не вставлять на страницу графический фон. В большинстве случаев он лишь затруднит чтение текста. Если без фона обойтись нельзя, то самый мелкий графический элемент изображения фона должен во много раз превышать размер одной буквы текста. Фон должен иметь низкую контрастность и плавные переходы между цветами.
  5. Если вы все же используете фоновое изображение, поставьте такой фоновый цвет стра-ницы, чтобы он примерно совпадал по тону и контрасту с фоновым рисунком.
  6. Используйте только цвета из так называемого набора web-цветов (безопасной палит-ры). Только тогда вы можете быть полностью уверенными, что цветовая гамма вашей страницы верно отобразится во всех броузерах и на всех мониторах. Этого можно достичь используя два одинаковых числа в записи каждого из трех цветовых каналов (например, цвет #CC6701 не будет верно отображаться в некоторых версиях броузеров, и будет авто-матически приводиться к цвету #CC6600, который, в свою очередь, понимается любой программой одинаково). В последних версиях редактора Adobe Photoshop при выборе цвета есть возможность включить автоматическое отображение только web-цветов на цве-товом поле.
  7. Помните о том, что белый цвет фона стоит по умолчанию далеко не во всех броузерах. Если вы используете в дизайне страницы белый фон, не забывайте каждый раз прописы-вать его в коде страницы.
  8. Не используйте больше двух шрифтов в оформлении страницы. Старайтесь, чтобы стиль шрифта соответствовал стилю и смыслу страницы.
  9. Не прописывайте название конкретного шрифта в коде HTML. Совсем не обязательно, что у пользователя будет на компьютере тот шрифт, который вы насильно навязали ему, например, в файле стиля. Нередка ситуация, когда текст страницы становится полностью нечитаемым только из-за того, что ее автор стремился навязать пользователю свое шриф-товое оформление.
  10. У всех изображений всегда прописывайте атрибуты "ширина" и "высота". Во-первых, это не позволит расползтись структуре страницы во время загрузки, а во-вторых позволит сохранить структуру даже в том случае, когда у пользователя отключена графика.
  11. Не увлекайтесь всякими графическими эффектами (java-апплетами, фильтрами, ани-мацией), если они не несут существенной смысловой нагрузки. Они мешают восприни-мать текст страницы и замедляют ее загрузку. Кроме того, они в большинстве своём рас-считаны на один определенный броузер и не будут работать в других.
  12. Не увлекайтесь графическими элементами с текстовой информацией. Любой тексто-вый заголовок, пункт меню и т.п. можно написать средствами HTML, а не включать его в страницу в виде картинки.

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


Работа над сайтом

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

Один из лучших WYSIWYG-редакторов для работы над сайтом – DreamWeaver, продукт компании Macromedia. При создании страницы в DreamWeaver вы можете иметь полный контроль над HTML-кодом, поскольку он позволяет редактировать документ сразу в двух режимах – визуальном и в кодах. У этого редактора много достоинств, в том числе, в рамках текущего сеанса работы мож-но отменить (“Undo”) даже те «шаги», которые были сделаны до сохранения файла. Рекомендации по работе с этой программой приводятся в приложении. В момент написания пособия существует возможность скачать 30-ти дневную версию программы на законных основаниях на сайте фирмы Macromedia.

Необходимы программы для работы с графикой. Для растровой графики чаще всего используется Adobe Photoshop, а для векторной - Corel Xara. Мощный инструмент для оптимизации web-ориентированной графики – Ulead Smart Saver Pro.

Помните, что нужно очень аккуратно относиться к именам файлов и каталогов. Подавляющее большинство серверов, составляющих Интернет, работает под управлением ОС Unix, FreeBSD и т.д., но никак не Windows (из-за ее крайне низкой надежности). В Windows регистр букв в названиях файлов и каталогов не имеет значения, т.е. Index.HTML и INDEX.html - это один и тот же файл, чего нельзя сказать о наименованиях файлов в ОС Unix. Поэтому, возьмите за правило всегда использовать в именах файлов, каталогов и расширениях маленькие буквы - так вы никогда не ошибетесь. Кстати, это еще один минус большинства визуальных HTML-редакторов, работающих под Windows. Они очень свободно обращаются с именами файлов и ссылками на них. Ну и, конечно же, не пытайтесь использовать русские буквы в названиях ваших файлов.

Основные ошибки при структурировании сайта

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

  • Вначале - об использовании фреймов. Спор по поводу того, использовать их или нет, не утихает и по сей день. Есть как ярые сторонники их использования, так и ярые противники. В любом случае, очевидно, что они делают страницу громоздкой и неудоб-ной. Кроме того, они затрудняют индексацию страниц поисковыми системами. Поэтому, от фреймов лучше отказаться совсем. Если же они необходимы (бывают такие очень редкие случаи), то лучше формировать их программным способом.
  • Многие любят увлекаться использованием новейших технологий. Это одна из серьезнейших проблем современного Интернета. Любой пользователь, столкнувшись с при-митивной ошибкой JavaScript, немедленно покинет ваш сайт. Прежде чем использовать новые технологии (анимацию, виртуальный мир и т.п.), подумайте, насколько они необ-ходимы на вашей станице. Простая погоня за модой и нововведениями не имеет смысла.
  • Старайтесь не включать в оформление сайта, если это не необходимо, анимацию GIF. Пользователи отождествляют такой дизайн с рекламой, которую они уже научились автоматически игнорировать. Заставить их прийти на ваш сайт вторично будет гораздо сложнее.
  • При составлении структуры каталогов и присваивании имен файлам на сайте, помните об еще одной очень серьезной проблеме: нелогичные адреса URL. Сегодня люди уделяют адресам меньше внимания, чем раньше, благодаря сильно развитой навигации по страницам. Тем не менее, все каталоги и названия документов должны быть связаны с их содержанием.
  • Старайтесь не терять пользователей при неправильном наборе ими адресов. Изме-ните страницу, выдающуюся по ошибке (если вы имеете возможность ее менять), включив в нее ссылки на основные страницы сайта. Большинство пользователей знает, что в случае отсутствия страницы на сайте, нужно просто отсечь конец адреса. Но такой способ неизвестен новичкам и раздражает опытных пользователей. Кстати, в связи с этим, проследите, чтобы любой каталог на вашем сайте имел файл index.html.
  • По проведенным Нильсоном исследованиям, 90% пользователей не прокручивают навигационный блок, который вылезает за пределы экрана, а выбирают несколько види-мых на экране пунктов. Сделайте соответствующие выводы.
  • Делайте навигацию на сайте простой и интуитивно понятной. Люди привыкли к определенным канонам в дизайне. Если базовые элементы (например, наличие на любой странице сайта ссылки на главную страницу) отсутствуют, пользователь может даже рас-теряться.
  • Серьезная проблема современного Интернета - устаревшая информация. Помните, что множество сайтов, сходных по тематике с вашим, продолжают постоянно обновляться и развиваться. Показать пользователю устаревшую информацию - верный способ занизить оценку вашего сайта. Но при этом архивы старой информации - это достоинство сайта, и они очень сильно отличаются от устаревшей информации.
  • При написании ссылок, не открывайте страницу в новом окне броузера. Появ-ление новых окон броузера - это самое раздражающее любого пользователя действие. "Когда на экране появляется новые окна, которые я не просил открывать, мне сразу при-ходит в голову продавец пылесосов, который, войдя в дом, вываливает на ковер пепель-ницу, а потом успешно убирает мусор. Так вот - не надо засорять мне экран, особенно учитывая то, как убого управляется с окнами самая популярная операционная система! Если мне нужно будет новое окно броузера, я сам его открою." (Якоб Нильсен). Многие пользователи автоматически закрывают любое выпадающее окно еще до того, как оно за-грузится.
  • Есть вещи, которые интуитивно напоминают пользователю рекламу. За годы суще-ствования Интернета у многих выработался специфический рефлекс, называемый бан-нерная слепотой - пользователи никогда не фиксируют взгляд на графическом элементе, который находится на традиционном месте баннеров - вверху или внизу страницы. По той же причине пользователи избегают смотреть на мигающий, движущийся текст или дру-гую агрессивную анимацию.
  • Несколько слов стоит сказать о сайтах различных организаций. Типичной ошибкой является вынесение на видное место страницы с фотографиями сотрудников и их должностями. Это информация, которая может понадобится только сотрудникам внутри самой компании, но никак не стороннему посетителю, которого наверняка больше волну-ет деятельность вашей организации. По той же причине, не стоит размещать на первой странице сайта фотографию директора.
  • Надпись “Under Construction” - один из признаков того, как вы относитесь к сво-ему сайту. Пользователь не должен увидеть этой надписи никогда. Вместо того, чтобы выкладывать пустые страницы с этой надписью, оставьте их на своем винчестере.
  • При создании навигационного блока, не создавайте “закрытых” пунктов меню, которые разворачиваются при наведении на них мышкой. Это первый признак непрофес-сионализма. Ни один пользователь не будет выучивать, что они означают.
Персональные инструменты
Инструменты