Сайтостроительство
       

Общие требования к веб-сайту.


Теперь рассмотрим требования предъявляемые к веб-сайту. Постараемся перечислить их в порядке значимости.

  1. Совместимость с основными версиями броузеров.
  2. Минимальный объем HTML-кода.
  3. Модификация сайта при минимуме человекочасов.
  4. Портабельность сайта.

Теперь поясним каждый пункт в отдельности. Безусловно, самым важным является совместимость HTML-кода страниц вашего сайта с основными броузерами. На сегодняшний день основными являются: Internet Explorer 4.x, 5.x, Netscape Navigator 4.x, 6.x, Opera 4.x, 5.x., также рекомендую просматривать ваши страницы в третьих версиях броузеров. В них, скорее всего, ваш сайт будет отображаться не совсем корректно, т.к. третьи версии не поддерживают многих элементов, например, каскакадных таблиц стилей. Но если ваша страница отображается совсем неправильно, то скорее всего вы что-то не так сверстали. Иногда, для сайта очень важно, чтобы он приемлемо отображался не только в четвертых, но и в третьих версиях броузеров. Например, сайт компании Философт - http://www.philosoft.ru, которая занимается техническими переводами. Если кто-то из потенциальных клиентов не сможет ознакомиться с предлагаемыми услугами, то, понятное дело, реальным клиентом он вряд ли станет. Если сайт не просматривается или отображается некорректно в четвертых версиях броузеров, то теряется значительная часть посетителей.

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

Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 1 Ячейка 2
Ячейка 3
Вариант 1. <table> <tr><td>Ячейка 1 <td> <table><tr><td>Ячейка 2<tr><td>Ячейка 3</table> </table>

Вариант 2. <table> <tr><td rowspan=2>Ячейка 1 <td>Ячейка 2 <tr><td>Ячейка 3 </table>

Более правильным, с практической точки зрения совместимости с различными броузерами, является второй вариант HTML-кода. Старайтесь избегать использования лишних команд, и особенно, вложенных таблиц. Ни в коем случае нельзя допускать пробелы между HTML-командами, т.к. они часто приводят к разрывам на страницах. В первую очередь это относится к верстке с использованием таблиц и картинок. В этих случаях наиболее часто проявляются подобного рода дефекты. Ниже идет пример правильного оформленного HTML-кода взятого с сайта . Здесь пришлось внести много переносов на новую строку из-за ограничения по ширине страницы. Тем не менее, обратите внимание на символы ><, т.е. пробелы между HTML-командами исключены.

<table width=100% cellspacing=0 cellpadding=0 ><tr><td width=120><a href=/><img src=/logo.gif width=120 height=60 border=0 alt="На главную страницу"></a></td ><td width=147><img src=/head/<!--#echo var="QUERY_STRING"-->.gif width=147 height=60></td ><td width=100% background=/headvline.gif><img src=/0.gif width=1 height=1></td ><td width=468 bgcolor=#CCCCCC><img src=/itsoft.gif width=468 height=60></td ></tr></table><table width=100% cellspacing=0 cellpadding=0 ><tr><td width=104><a href=/><img src=/inforgru.gif width=104 height=20 border=0 alt="На главную страницу"></a></td ><td width=100% background=/headvline2.gif><img src=/0.gif width=1 height=1></td ><td width=632><img src=/m1.gif width=19 height=20><a href=/main.html?<!--#echo var="QUERY_STRING"-->><img src=/mmain.gif border=0 width=67 height=20></a><img src=/msep.gif width=11 height=20><a href=/cgi-bin/find.pl?<!--#echo var="QUERY_STRING"-->><img src=/mbd.gif border=0 width=105 height=20></a><img src=/msep.gif width=11 height=20><a и т.д.

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


  1. Сайт имел структуру, пример предлагаемой структуры сайта см. выше.
  2. Исходный HTML-код должен быть читабельным.
  3. Верхние и нижние колонтитулы были вынесены в отдельный файл.
  4. CSS (таблицы каскадных стилей), используемые в нескольких документах находились в отдельном файле.
  5. Функции JavaScript, используемые в нескольких документах находились в отдельном файле.
  6. Гиперсылки имели правильные пути - абсолютные и относительные.
  7. В именах файлов и адресах гиперссылок использовались только цифры и буквы английского алфавита нижнего регистра, также допускается использование символа подчеркивания. Все остальные символы русского алфавита, английские символы верхнего регистра значительно могут осложнить поддержку веб-сайта.


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

Об использование стилей, JavaScript, новых технологиях и прочих извращенных фантазиях. Интерфейс веб-сайта - это средство навигации и доступа к информации. Исходя из этого определения, применяйте только те технологии и те средства тех или иных технологий, которые вам действительно необходимы. Например, в языке гипертекстовой разметки HTML достаточно большое количество команд, однако реально на практике мы применяем лишь меньшую половину из них, в остальных просто нет надобности. Совсем не стоит применять самые последние технологии, которые могут не поддерживаться какими-либо броузерами. Главная задача - дать пользователям удобно работать с информацией на вашем сайте, а не затруднить к ней доступ. Например, стили позволяют очень большой спектр возможностей для веб-мастера, однако, если правильно сделать файлы верхнего и нижнего заголовков HTML-документа - /include/head.inc и /include/footer.inc, то во многих случаях можно обойтись без стилей

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

Содержание раздела