Методики и рекомендации
Дата публикации: 12/06/2003
Категория: Веб-дизайн
Версия для печати В данной статье приводятся общие методики и практические советы, призванные помочь начинающим дизайнерам избежать лишней нервотрепки. Некоторые материалы носят рекламный характер, но приводятся исключительно в демонстрационных целях.
Как назвать файлы
По стандарту, первый файл проекта называется index.html. Все остальные - на ваше усмотрение. Учтите, что регистр букв имеет значение. Если в ссылке файл заявлен, как index.html, а на самом деле он называется INDEX.HTML, то система его просто не "узнает". Если вы "трогали" файлы через NORTON COMMANDER или DOS, будьте готовы к двум неприятностям: "срежутся длинные имена" и все буквы станут заглавными. WINDOWS же при создании нового файла делает заглавной первую букву имени.
Поэтому, лучше давать имена не длиннее 8 символов и без букв. Мои предложения: если вы работаете только в WINDOWS, используйте маленькие буквы, в NORTON COMMANDER - может быть, разумнее оставить заглавные. Мой способ именования:
| !ndex.htm | - главный файл подраздела (может содержать фреймы) | (1-й уровень) |
|---|
| 00.htm | - файл, содержащий панель навигации (если есть фреймы) | (1-й уровень) |
|---|
| 01.htm | - файл 1-й страницы | (1-й уровень) |
|---|
| 99.htm | - файл 99-й страницы (обычно их не более 10-15) | (1-й уровень) |
|---|
| 01-01.htm | - файл по первой ссылке из 1-й страницы | (1-й уровень) |
|---|
| 01-10.htm | - файл по десятой ссылке из 1-й страницы | (2-й уровень) |
|---|
| 01-02-03.htm | - файл по третьей ссылке второй ссылки из 1-й страницы | (3-й уровень) |
|---|
| -03_04.htm | - файл по третьей ссылке третей ... | (4-й уровень) |
|---|
| -03_04_5.htm | - файл по пятой ссылке четвертой ... | (5-й уровень) |
|---|
| _5_06.htm | - файл по шестой ссылке пятой ... | (6-й уровень) |
|---|
| _5_06_07.htm | - файл по седьмой ссылке шестой ... | (7-й уровень) |
|---|
Можно продолжать и дальше, но маловероятно, чтобы у вас был такой многоуровневый подраздел. Рисункам же я даю порядковые имена:
01.gif ...
99.gif - тогда их удобно загружать с помощью средств Javascript.
Имеет смысл для больших проектов.
Структура сайта с нуля
Если концепция будущего сайта предельна ясна, удобнее сначала разметить структуру - сделать пустой каркас, содержащий только заголовки и навигацию. А пустующие документы наполнять по мере прихода вдохновения!
И сразу небольшой совет: частообновляемые документы (страница новостей) лучше "вытаскивать" поближе к корню сайта, а еще лучше - в отдельную папку в корне. Тогда вам не придется каждый раз лазить по всему дереву каталогов, обновляя нужные файлы.
Размер шрифта и контрасность
Слышали про такую вещь, как on-line читаемость? Ваш документ может содержать исключительно важную информацию, но быть совершенно нечитабельным. Первое, самое главное - цвета фона и текста должны быть предельно контрастными. Второе - не экономьте на размере шрифта. Сейчас пользователи все чаще работают с высоким разрешением экрана. Даже если при 800 x 600 ваш текст кажется крупным, при 1024 x 768 он значительно "измельчает". Я использую 16-й шрифт, но об него можно "сломать глаза".
Применение шаблонов
Готовые шаблоны ускоряют процесс формирования структуры сайта в сотни раз! Потратив время однажды, вы можете создать красивый документ и далее "клонировать" его нужное количество раз, только меняя содержимое.
Ссылки на неготовые документы
Структуру сайта вы разметили, разместили заголовки и навигацию. Только вот большинство документов - пустые. Такие ссылки советую перечеркивать. А если они вообще никуда не ведут, повесьте на них стандартное сообщение:
вот так.
МАХ информационность ссылок
Подумайте о пользователе, ведь он впервые забрел в дебри вашего сайта. Потрудитесь расставить грамотные указатели. Кстати, если предлагаете что-то скачать, то сразу сообщите вес. Например, этот учебник:
Архив RAR - 176 Кб.
Ссылки во вне
Если вы хотите сделать ссылки на другие сайты, но боитесь оттока посетителей, поставьте атрибут
target="_blank". При щелчке на такую ссылку она откроется в новом окне!
Навигация
Выбрать текстовую или графическую - вам решать. Текстовая - легче и универсальнее, графическая - тяжелее, но красивее. Если склоняетесь в сторону графики, не забудьте обязательно использовать атрибут
ALT="текст" для каждого изображения.
Оптимизация графической навигации
Хороший эффект достигается при совмещении пустых кнопочек и надписей (см. верх экрана). Достигнуто это с помощью стилей. Мне достаточно всего двух видов кнопки (светлая и темная) - экономия налицо.
Проверить все с отключенной графикой
Не стоит забывать, что часто пользователи отключают отображение рисунков для ускорения загрузки. В результате, внешний вид вашего сайта может пострадать. Так что не поленитесь сделать еще одну проверку: вдруг вы забыли указать размеры какого-либо рисунка!
Рисунок можно сделать и фоновым
Если вы при отключенной графике не хотите видеть пустые квадраты вместо рисунков, есть смысл сделать их фоном ячеек таблицы. Задайте нулевой бортик, размер ячеек точно подгоните под рисунки, и поместите их в фон. В этом случае поверхность останется "гладкой" - пользователь ничего не увидит.
Псевдографика вместо графики
Уж если заговорили об отключении графики, грех не упомянуть о спецсимволах. Эти верные помощники могут выручить нас во многих ситуациях. Вот немного: € ‰ ☺ ☻ ☼ ♠ ♣ ♥ ♦ ♪ ♫ ... Нравятся? Мне тоже!
Ключевые точки вашего сайта
Любой сайт имеет ключевые точки - документы, через которые проходит основной потоки посетителей. Стандартно ключевой точкой является главная страница (пользователи попадают сначала на нее), но возможны дополнительные места. Например, вы обменялись ссылками с другим сайтом, но указали не главную страницу, а какой-либо подраздел. Вот и еще одна точка. Такие места должны иметь идеальный вид и обязательно содержать ссылки на другие разделы. Туда же хорошо повесить счетчик, а вот рекламу - не советую (время загрузки необходимо минимизировать).
Имеет смысл для больших проектов.
Преимущества фреймов
Если документ содержит фреймы, то сам бог велел использовать его в качестве ключевой точки. У меня главная страница подраздела всегда называется
!ndex.htm, а далее пошли ключевые точки -
!ndex1.htm,
!ndex2.htm, ... Эти файлы абсолютно идентичны, но указывают на разные рубрики. Кстати, восклицательный знак в начале имени - мое изобретение! Такой файл всегда будет в начале каталога (если установлен режим сортировки "по имени")!
Имеет смысл для больших проектов.
Знак "Осторожно, ФРЕЙМЫ"
Относительно свежая идея, которую я собираюсь внедрить. Для удобства пользователя стоит разместить предупреждающий знак в правом верхнем углу документа. Тогда пользователь будет знать, что страницу следует сохранить полностью.
Если SSI недоступен
SSI - удобное средство для WEB-мастера, но не поддерживается на большинстве бесплатных хостингов. Это не беда. Ведь у нас есть
JavaScript. Конечно, вот так запросто вставить в документ любой файл не удастся. Но можно воспользоваться возможностью динамической генерации документа/его части. Думаете, я сам пишу код для страничной нумерации внизу некоторых разделов? Да делать мне больше нечего! Я только помещаю вызов функции с параметрами, а уж она генерит остальное. Размер файлов существенно сокращается (как и в случае с
SSI), и плюс к этому надо отметить "гибкость"
JS: другими простыми средствами такую нумерацию не сделать! Если же еще использовать фреймы - получится почти шедевр.
Внутренние редиректы
Если какой-то популярный раздел запрятан очень глубоко, используйте механизм редиректа. Создайте в корневом каталоге файл, который автоматически перешлет пользователя вглубь. У меня пока семь:
Кстати, как вариант для ключевых точек. Сюда неплохо и рейтинги (счетчики) повесить. Впоследствии, они могут быть трансформированы в "парадный" вход.
Имеет смысл для больших проектов.
А интеграция полезней
Немного подумав, уточняю тему редиректов. Если у вас их особенно много, то лучше создать единый документ, содержащий ссылки на самые интересные и актуальные подразделы (
миникарта сайта). Тогда пользователь, пришедший по одной ссылке, может заинтересоваться чем-то еще. Старайтесь помещать в анонсы только самую привлекательную информацию.
Имеет смысл для больших проектов.
Когда счетчиков много
Администрировать большой проект не просто (знаю на собственном опыте), а отслеживать динамику посещений - еще сложнее. Чтобы не лазить по всему сайту, скрупулезно выписывая показания счетчиков, создайте в корневике страничку, разместите на ней "двойников" (некоторые рейтинговые службы позволяют размещать один счетчик на разных URL), и сделайте соответствующие надписи. Если такую страничку сделать стартовой, то вы всегда будете в курсе своих дел! А если зарегистрировать туда же еще один счетчик, то вы получите "чистые данные", вычитая из всех показаний количество ваших заходов.
Имеет смысл для больших проектов.
"Приманки" для поисковиков
Как известно, поисковые системы составляют существенную долю нашей виртуальной аудитории. Но при регистрации действуют ограничения на объем описания ресурса. Часто, большой ресурс не удается охватить целиком. Вот тут-то и пригодятся ключевые точки. Регистрирую каждую в отдельности, мы сможем составить более точное и значит - весомое описание. При соответствующих запросах каждая наша ссылка будет расположена выше в общем рейтинге, чем если бы мы делали одно общее описание.
Имеет смысл для больших проектов.
Пара слов о META
Перед тем, как зарегистрировать ваш ресурс, необходимо составить к нему грамотное описание. При индексации наибольшую важность имеют слова и выражения, находящиеся в тегах
<TITLE>,
<META name="description" ...до 200 б...>,
<META name="keywords" ...до 1 К...>. По ним идет основной поиск и по ним определяется положение вашего сайта в списке найденных. Поэтому, поставьте себя на место пользователя: какие запросы составили бы вы, разыскивая эту информацию? Для чистоты эксперимента привлеките пару незаинтересованных людей. С полученным набором слов уже можно работать. Помните - как можно больше синонимов и специальных терминов. К примеру, если вы введете в RAMBLER-е название малоизвестной у нас итальянской фирмы
Conrero, то на первом месте будет сайт моего брата!
Кроме того, нужно установить опцию "запрет кеширования" для частообновляемых страниц (новости, ленты, ...). Это поможет избежать многих "сюрпизов" при просмотре.
Связи со скриптами на других сайтах
Вы разрабатываете свой сайт дома, но он содержит связи с ресурсами (скриптами) других сайтов. Как сделать так, чтобы сайт смотрелся одинаково в интернете и на локальном компьютере? Я предлагаю использовать пару: локальный и глобальный скрипт. Первым идет локальный (если сайт на харде, то выполняется; следующий же - игнорируется). Сразу после него - глобальный (все наоборот). В любом случае, сработает только один из них. Красота!
"Разделы-хиты" и "разделы-паразиты"
Проанализировав показания ваших счетчиков за некоторый период времени, можно точно указать, какие рубрики пользуются спросом, а какие только "для мебели". Действительно, затратив одинаковые усилия на рекламу различных разделов, вы получите разную отдачу. В дальнейшем имеет смысл сосредоточиться именно на раскрутке "хитов". Такой пример: вряд ли пользователи будут искать информацию о мутировавших этим летом осах, а вот статья о возможном изменении климата России их вполне заинтересует. Вывод: рекламируйте климат, но прямо из него должна быть бросающаяся в глаза ссылка на ос-мутантов!
Имеет смысл для больших проектов.
Последовательная загрузка рисунков
Если вы хотите, чтобы сначала загрузился текст, а потом - рисунки, да еще и в определенном порядке, нет ничего проще. Не заполняйте в теге
IMG атрибут
SRC (или установите на невидимый
GIF). Используйте событие Onload, сперва в
BODY укажите
SRC первого рисунка, затем в первом -
SRC второго и т.д. до последнего. Тогда при загрузке получится красочный эффект последовательной загрузки изображений!
Комментарий-закладка на ваш адрес
Пользователю очень понравилась ваша статья. Он ее сохранил, чтобы прочесть в спокойной обстановке. На другой день, уже прочтя ее, он захотел вернуться. Но вот беда - ваш адрес он не запомнил, а из статьи ничего нельзя узнать. На этот случай я добавляю в большинство документов первую строку специального вида. К примеру, у этой страницы:
<!-- By Alex_soldier: www.alex-world.nm.ru/ie/school/3-06.htm -->
Копия сайта в архиве
Допустим, у вас большой и разветвленный сайт, содержащий, в основном, текстовую информацию. Не стоит удерживать пользователя слишком долго - сделайте архив с копией сайта. Если информация действительно нужна, он будет приходить за обновлениями. Если же вы боитесь, что какой-нибудь умник внаглую воспользуется вашими трудами, используйте архиватор под DOS. Тогда все имена файлов станут заглавными, и копия сайта будет работать только на локальной машине. Для закачки в интернет умнику придется долго и нудно переименовывать кучу файлов. Можно приколоться еще извращеннее - давать имена со смешанным регистром (пусть-ка полазит по ссылочкам, да воспроизведет название буква в букву).
Имеет смысл для больших проектов.
Статистика обновлений
Знак хорошего тона - указывать дату обновления. Для одиночного документа достаточно
LastModificated, но что делать, если сведения должны отразиться в 3-4 местах многоуровневой структуры? Здесь поможет специально созданный JS-файл, содержащий информацию обо всех разделах. Вы просто вызываете нужную функцию. При обновлении остается всего-то внести в него поправку.
Имеет смысл для больших проектов.
Проверка грамматики в WORD
Еще одна простая проверка, которой все пренебрегают. Просто скопируйте текст с вашего документа и вставьте в WORD. Даже у меня выявляется куча явных опечаток!
Блокировка принудительной вставки рекламы
Часто на бесплатных хостингах в код ваших документов вставляют рекламу (баннер или угловое окно). В результате, внешний вид вашего ресурса может пострадать. Но тут есть выход. Зайдите на свой сайт, как обычный пользователь и посмотрите исходный код. Из него вы узнаете ИМЯ этого злополучного объекта. А далее программно делаем его невидимым (хотя бы средствами Javascript - свойство
VISIBILITY="hidden").
WEB-мастера, прячьте ваш e-mail от роботов
Спамеры не остановятся ни перед чем, чтобы заполучить новые адреса. В своей деятельности они широко используют так называемых роботов - программы, сканирующие сеть на предмет e-mail. Надо уметь защитить себя. Предлагаю несколько способов на примере моего адреса, надеюсь, они "подавятся" этим:
| a | l | e | x | _ | s | o | l | d | i | e | r | @ | m | a | i | l | . | r | u | | | | | | - красные буквы записаны русским шрифтом |
| a | l | e | x | _ | s | o | l | d | i | e | r | @ | m | a | i | l | . | r | u | | | | | | - тост за спецсимволы (@ m . r) |
| a | l | e | x | _ | s | o | l | d | i | e | r | | @ | | m | a | i | l | | . | | r | u | | - лишние пробелы нам помогут |
| adress = 'alex_soldier' + '@' + 'mail.ru'; | - Javascript склеит строку из кусочков |
Авторский знак
И последнее: если вы публикуете свои собственные эксклюзивные материалы, не забудьте в конце поставить знак охраны авторской собственности. От плагиата, конечно не спасет, но на душе станет спокойнее!
Источник: http://www.alex-world.nm.ru/
Статьи по теме:
