2019 г.  "Вебмастеру"

Порядок работы над Веб-сайтом

1. Разработка концепции вэб-сайта и, соответственно – дизайн, основные темы, контент, логика;

2. Вёрстка, отладка;

3. Выбор хостера. Размещение страниц;

4. Регистрация сайта в поисковиках и каталогах;

5. Дальнейшее развитие проекта: создание мобильных версий сайта (WAP, pda) и т.д.

 

Разработка сайта

Поменьше "бантиков" и анимации. Стиль – единый для всех страниц. Нарисовать значок - иконку favicon.ico и поместить этот файл в корневой каталог. Контент – информативный, лаконичный. Дизайн сайта – соответствует основному контенту (содержанию).

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

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

Структура сайта создаётся "на всегда", т.к. если она когда-нибудь изменится - соответственно, появятся "битые ссылки" (с выдачей ошибки: код статуса HTTP 404 - не найдена страница или 301, 302 - страничка перемещена на постоянку или временно), размещённые по старым адресам, раньше, на других ресурсах.


Прописать основные метатеги:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Название страницы</title>
<meta name="Description" content="Описание страницы">
<meta name="Keywords" content="ключевые, слова, этой, страници">


Размеры рисунков указывать в явном виде (Width= ... Height=...) – для быстрой загрузки странички в браузер. Общий размер графики – до 50 килобайт на странице (большие картинки - открываются кликом по уменьшенным их копиям, в отдельном окне). Чем меньше их объём – тем быстрее скорость загрузки, особенно, на мобильных устройствах (телефонах, смартфонах, айфонах и планшетниках). Используя методы сжатия Gzip и буферизацию вывода (ob_start) - можно значительно ускорить выгрузку контента страниц с сервера в браузер клиента.


Явное форматирование (предпочтительно - в таблице стилей CSS для классов и селекторов элементов кода документа) с заданием цвета текста и фона, и с универсальным, стандартным набором шрифтов – для его читаемости в любом броузере:

<style type="text/css">
BODY { font: 100% Arial,sans-serif; background-color:#ffffff; color:#000000; }
</style>

Для вывода значков Юникода и надписей только определённым шрифтом - применяется динамическая подгрузка (с сервера, на котором размещён сайт или из сервиса Google Web Fonts) файлов нужных шрифтов к открываемой веб-странице. Это может осуществляться через CSS, с помощью правила @font-face. При загрузке малых блоков, содержащих только необходимые буквы и знаки, достигается увеличение скорости открытия страницы.


При необходимости включения скриптов – предусмотреть "дежурные сообщения":

<font color=red><noscript>
Для правильного отображения страницы должна быть включена поддержка JavaScript
</noscript></font>

- это сообщение появится в случае отключённой обработки скриптоф


Если система навигации по сайту выполнена на Java Script'е, тогда поисковый паук на сможет пройтись по страницам для их индексации, поэтому – ссылки рекомендуется указывать в явном виде. При ссылках в виде реакции на событие "onclick" или "onmouseover" над текстом, чтобы пользователь понял, где можно кликать мышкой - надо задать курсору форму в виде руки, когда указатель находится в пределах элемента:
<span style="cursor: pointer; cursor: hand; text-decoration: underline"

Часто применяемые значения: text - текст, move - перемещение, help - помощь (знак вопроса), pointer / hand - рука, crosshair - перекрестие, no-drop / not-allowed - "нет доступа".

Для сокращения количества внешних ссылок на странице - вместо них ставятся "внутренние", на единственную страницу-обработчик. Используется РНР-скрипт, который открывает ВС по GET-переменной (в соответствии со значением числовой переменной, из списка выбирается нужный адрес или, напрямую):
http://свой-сайт.ру/go.php?url=N  или  http://свой-сайт.ру/go.php?url=site.ru
...
код PHP:
header("Location: $url");


Есть и другие способы. Например, через редирект, с помощью метатега <meta http-equiv="refresh", который ставится на отдельную страничку, под каждую гиперссылку. Другой вариант - делать не ссылку, а кнопку формы.


Аккуратнее использовать всяческое расслоение - <DIV ...>, "style=POSITION: relative;" и тому подобное, чтобы Интернет-страница сохраняла свою структуру в любом браузере и на всех устройствах.


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

 
User-agent: * 
Disallow: /arhiv2005/
Disallow: /dir/page1.htm/
Disallow: /name

в примере файла robots.txt, блоком директив, из четырёх строк, 
для индексирования запрещены всем роботам (User-agent: *):
– директория "arhiv2005" и всё её содержимое, 
– файл "page1.htm", располагающийся в директории "dir" 
(закрывающий слэш = спецсимвол $, ограничивает "полный URL")

– файлы и каталоги, имя которых начинается с последовательности 
символов name (нет закрывающего слэша = спецсимволу *, частичный URL)
файлы name.htm, name.html, names.htm..., находящиеся в корневом 
каталоге, или любые файлы, находящиеся в каталогах name, names...



# Для бота поисковой системы Яндекс - разрешено 
# посещение всех страниц и папок сайта
# Директивой Host - основным зеркалом назначено http://site.ru/
User-agent: Yandex
Disallow:
Host: site.ru



# To exclude all robots from the entire server
# - полный запрет на индексацию 
# всего сайта для всех роботов
User-agent: *
Disallow: /



# To allow a single robot
# - разрешен только робот Гугла
# и запрещены все остальные
User-agent: Google
Disallow:

User-agent: *
Disallow: /



# Удалить конкретное изображение 
# из Картинок Google 
User-agent: Googlebot-Image
Disallow: /images/imageN.jpg 



Официальная документация, 
спецификация robots.txt: 
http://www.robotstxt.org/orig.html 
- стандарт описания для файла robots.txt 
http://help.yandex.ru/webmaster/?id=996567 
- робот Яндекса 

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

В robots.txt допустима только латиница в кодировке ANSI, то есть, готовый файл сохраняется в среде Windows (Win), в Unix-формате (с переводом строки через [ 0 x 0A ], вместо [ 0x0D 0x0A ] ).

Написание директив Disallow и User-agent не зависит от регистра, в отличие от символов их значений (file.html и File.html - для робота, это разные файлы).

В соответствии со стандартом, перед каждой очередной директивой User-agent рекомендуется вставлять пустой перевод строки (или комментарий, начинающийся с символа #).

Блоки, содержащие ошибки или не поддерживаемые конкретным роботом - игнорируются им.

Роботс может содержать несколько записей (блоков). Между блоками должна быть пустая строка (или несколько строк).

Инструкции, содержащие спецсимволы, вида Disallow: *.html или User-agent: Ya* не поддерживаются некоторыми спецификациями различных поисковых систем.

Блок параметров, для каждого Юзер-агента - не должен содержать пустых строк.

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

В одной директиве User-agent - можно указать только одного робота (список из нескольких имён, через пробел или запятую - Российские поисковики не обрабатывают).

Если нет запретов по индексации - на сервер грузят пустой роботс.

Возможна чувствительность к регистру в имени юзерагента (надо уточнить у хостера).

Директивы по разному обрабатывают шаблон типа "*" (звёздочка):
- для User-agent это означает - "все роботы"
- в "disallow" - обрабатывается не во всех спецификациях роботса

Для ограничения частоты посещения сайта роботами (для снижения нагрузки на сервер) существует специальная директива:
User-agent: *
Disallow: /search
Crawl-delay: 4.5 # задает таймаут в 4.5 секунды

- минимальная задержка для бота (не больше одной страницы в пять секунд)
http://help.yandex.ru/webmaster/?id=996567#1022359

Поисковая система Google использует в своих алгоритмах большое количество оригинальных расширений - директиву Allow (и на Яндексе), символы подстановки * и $ (Рамблер тоже обрабатывает звездочку)

# блокируются все адреса с параметром u
User-agent: Google
Disallow: /*u=*

# запрещена индексация файлов, заканчивающихся на php
User-agent: StackRambler
Disallow: /*.php$



Строка с комментариями - начинается с символа #

Аргумент директивы Host (доменное имя с номером порта - 80 по умолчанию, изобретение Яндекса) указывает роботу на главное зеркало сайта.


Карты сайта, путь до них - можно указать специальными директивами:
Sitemap: http://site.ru/sitemap1.xml
Sitemap: http://site.ru/sitemap2.xml


Правильная кодировка карты сайта - utf-8 с префиксом (0xEF 0xBB 0xBF), то есть, в начале файла sitemap.xml должна быть метка BOM (byte-order mark, подпись сигнатуры УТФ).
Периодичность, регулярность обновлений (в теге <changefreq>): ежедневно, еженедельно, ежемесячно, ежегодно (daily, weekly, monthly, yearly). Sitemap, расположенный в каталоге http://primer.ru/catalog/sitemap.xml (это возможный вариант размещения, но рекомендуется - размещать карту сайта в корневом каталоге), может включать только URL-адреса, начинающиеся с http://p r i m e r.r u/c a t a l o g/ и использовать один и тот же протокол (в данном случае — HTTP).
подробнее: http://help.yandex.ru/webmaster/?id=1007070
http://www.sitemaps.org/ru/protocol.html


После чтения указаний в роботсе, поисковый паук смотрит наличие в HTML-файлах META-тега с именем ROBOTS, где указываются допустимые параметры работы с Интернет-страницей:
<meta name="robots" content="noindex,nofollow">
- запрещает индексирование документа и проход по ссылкам

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

примечание автора сайта – способы, как сделать перенос на новую строку в файлах robots.txt и .htaccess


 

Вёрстка, отладка сайта


Вёрстку страниц, нарезку таблиц – проще делать в html-редакторе. Доводку страницы-шаблона сделать в "блокноте" (или сохранять в текстовом редакторе notepad++ - если нужен формат UTF без метки ВОМ) – удалить всё лишнее (пробелы и т.д.). Шаблонную страницу делать "под ключ", до её полной готовности.

В процессе создания своих страниц – периодически делать их резервные копии, хранимые на внешнем носителе (флэшке или CD).

Проверить правописание, грамматику текста (с помощью специальных сервисов-спеллеров, помогающих находить и исправлять орфографические ошибки в тексте на русском, украинском или английском языке, например, по адресу https://tech.yandex.ru/speller/ ). При необходимости мультиязычности и расширения географии посетителей сайта - заказать профессиональный перевод (в этом случае - настроить кодировку UTF и разместить на страницах кнопки переключения языковой раскладки RU, EN и т.д.). Протестировать все ссылки на страницах. Регистр в именах файлов, например, file и File – это разные файлы.

Тестировать страницы на кроссбраузерность – в разных браузерах, при различных разрешениях экрана, при изменении размера окна на разных аппаратах.

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

Валидность (соответствие кода страниц стандартам HTML и CSS) – можно проверить в http://validator.w3.org/ и http://jigsaw.w3.org/css-validator/ соответственно. Некоторые специальные теги (к примеру, noindex) - там будут названы ошибкой, но это не всегда критично. Проверка проводится по спецификации (определению типа документа, ОТД), указанной в начале страницы, например – для HTML4.01 и XHTML 1.0 (в русском переводе):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

 

По шагам

Создание сайта это "капитальное строительство" на перспективу. Ведь на раскрутку сайта и его регистрацию на досках объявлений и в каталогах - будут потрачены средства. Поэтому, выбор доменного имени (вида SITE.RU или С А Й Т.РФ) - очень важный момент. Если, в дальнейшем, адрес сайта меняется - то опять надо будет тратиться на рекламу нового имени.

Будущий владелец сайта:
1) регистрирует, оформляет домен на свое имя (или по названию организации, фирмы) - регистраторе доменных имён.

2) заказывает разработку сайта или самостоятельно его делает;

3) размещает свой сайт у выбранного хостера;

4) в своём аккаунте у регистратора - указывается ДНС сервера хостера, где разместился.

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

 

 

Выбор хостера


Критерии при выборе хостера: надёжность, скорость, техподдержка...

Для малобюджетного сайта – можно поискать начинающие компании. У них, в первое время работы, обычно есть недорогие тарифы (сохраняющиеся для первых клиентов и в дальнейшем) и при этом может быть "всё включено". Усли повезёт - воспользуетесь акциями и бонусами для первых клиентов. Надёжнее и дороже – крупные хостинговые компании, ДАВНО работающие и хорошо себя зарекомендовавшие.

Если веб-сайт без форума и интерактива (нет загрузки графики и больших файлов) – будет достаточно виртуального хостинга.

Дублирование – размещение частей ресурса (при наличии доменов / поддоменов третьего уровня) на разных хостинг-площадках (работает не один, так другой). Надёжность сервера можно мониторить по "количеству перезагрузок" и ошибок 502-504 (из данных статистики, например - Liveinternet, при настроенном в .htaccess обработчике, к примеру: ErrorDocument 503 http://www.сайт.ru/?error=503   - линк с пятьсот третьей ошибкой будет виден в стат.списке, а их суммарное количество будет считаться для каждого дня, по отдельности).

Чтобы создать свой первый сайт и потренироваться в сайтостроении, подойдут бесплатные системы управления, такие как www.ucoz.ru (конструктор с шаблонами и плагинами) и blogspot.com (движок заточен под блоги). Ресурсы с этих площадок тоже индексируются поисковиками.


Поиск площадки под вэб-сайт:
почитать Форумы. Здесь, к примеру: http://forum.ru-board.com/forum.cgi?forum=11



 

Примечание: основной показатель - отзывы клиентов (на форумах и т.д.)

Если устраивает - смотреть сайт хостера, тарифы, объём и  к а ч е с т в о  сервисов.

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

 

Мониторинг хоста - Аптаймы и т.д.

Рейтинг хостеров по UpTime (стабильность, в процентном соотношении - общее время работы хостинга в течение месяца) и средняя скорость соединения (без учёта явных выскоков). При суммарном времени простоев серверов хостера в десять минут, в течение месяца - аптайм составит, примерно, 99.7% Нормальная средн. скорость передачи данных - не меньше трёхсот килобайт в секунду по нужному таргеттингу (географии пользователей).

Ссылка на сервис: http://ping-admin.ru/hosting_rating/

 

CMSки (движок сайта)

CMS (Content Management System, система управления контентом, конструктор сайтов) - инструмент для облегчения работы с Интернет-ресурсом, как его владельца (даже с минимальным уровнем компьютерной грамотности), так и конечных клиентов. Основные, наиболее распространённые бесплатные движки: Joomla, Wordpress, MODx, OpenCms. Популярные платные CMS: Drupal, Битрикс (Bitrix), UMI и, специально для создания Интернет-магазина - ShopCMS (бывший АvalonShop), Shop-script, PHPshop и т.д. В качестве хранилища базы данных, эти системы, чаще всего, используют MySQL или современную MsSQL. Дорогие решения используют Oracle, PostgreSQL или SQLite. Есть и простые "файловые" CMS, работающие без MySQL: Rumba, CMSimple, Wikipad, Leviaf, LinkorCMS и другие.

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

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

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

 

 

Настройки сервера


Права доступа (CHMOD)

Первая цифра задаёт права доступа для администратора (user), вторая - для группы (имеют право подключаться к серверу по FTP) и третья - для всех остальных (смотрят через броузер).

U = user; G = group; W = world (other)
r = Read; w = Write; x = Execute;

'r--'  – 4  - чтение.
'-w-' – 2  - запись,
'--x'  – 1  - исполнение,
'---'  – 0

'rwx' соответствуют 7 (4+2+1=7),
'rw-' – 4+2+0=6
'r-x'  – 4+0+1=5,
'r--'  – 4+0+0=4,
'-wx'  – 0+2+1=3,

 

 

Создание мобильных версий сайта (WAP, pda)

Для возможности просмотра сайта через сотовый телефон - создаётся его WAP-версия. Главная страница - в минимальном формате WAP1.1 (2.0 - не рекомендуется, т.к ещё существуют мобильники, работающие только на старых версиях ВАП). На странице разместить ссылки на более "навороченные" версии сайта. Для отладки и предварительного просмотра понадобится браузер "Opera" (кодировку поставить - "Автоопределение" или " Юникод UTF-8").  IE и Firefox - не работают с WML-страницами.

На сервере, в файле .htaccess указываются MIME-типы применяемых документов, главная страница и обработчик ошибок:

AddType text/vnd.wap.wml wml 
AddType application/vnd.wap.wmlc wmlc
AddType image/vnd.wap.wbmp wbmp 
AddType audio/midi .mid .midi 
DirectoryIndex index.wml ErrorDocument 404 http://сайт.ru/error-404.wml в примере - минимальный набор (вмл-странички, вбмп-картинки, миди-файлы), без скриптов


Основные теги WML:

<br/> - перевод строки
<img src="..." alt="..."/> - графика, картинки

парные тэги:
<p>...</p> - параграф
<strong> - выделение жирным шрифтом
<u> - подчеркивание
<small> - мелкий текст

символы:
&#160; - неразрывный пробел
&#34; - двойные кавычки
&#39; - апостроф " ' "
&#60; - "<"
&#62; - ">"


Для КПК - создаётся облегчённая версия сайта. Для этого можно использовать старый HTML 4.0 или новый "XHTML Mobile". Ширина таблиц и графики ограничивается до 200-250 точек (для показа не только на планшетниках, но и в других компактных, переносных мобильных устройствах (телефонах, смартфонах, айфонах).

 

 

"Полезности"

Три способа редакции файла .htaccess (Unix - формат) в среде Windows
"перевод строки" через [ 0x0A ] (Unix - формат), вместо [ 0 x 0D   0 x 0A ] (возврат каретки и переход на следующую строку (CR/LF) - в DOS и Windows)

1. Из ком.строки (работает и в Windows Commander)

copy con .htaccess

набор с переходом на нову строку через Alt+10 (в правой цифровой панели)
при выходе - нажать F6 и Enter
в итоге - создан .htaccess

2. В текстовом редакторе FAR – редактирование с переводом строки через Alt+10

3. В FAR - после редактирования в обычном режиме (с переводом строки энтером) – "сохранить как" (Shift+F2) -> "Unix format"

 

Редактирование текста или таблицы вертикальными (прямоугольными) блоками
на примере FAR (диспетчера файлов):
Alt+Shift+Стрелка - выделение вертикального блока
Ctrl+U - снять пометку с блока
Ctrl+C - скопировать в Буфер Обмена.
Ctrl+V - вставить из Буфера
Ctrl+D - удалить что выделено.
Ctrl+M - перенести / сдвинуть блок в текущую позицию курсора.


Shift+Стрелка - выделение поточного / строчного блока.

Ins - включение / отключение режима курсора - "сдвиг текста" / стирание.

 

Релизы программ - к примеру, релиз 2009 года, осеннего обновления, будет лучше весеннего, и почти наверняка, получше и надёжнее первого выпуска следующего, 2010-го, в котором, скорее всего, что-то кардинально поменяют и на отладку новой версии уйдёт как минимум полгода, как раз - до осени.

 

 

[ на главную страницу ]