Мир программирования

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

Давайте оглянемся назад. У вас уже есть сайт, и не просто домашняя страничка, а цельный и единый образ ваших устремлений в Сети. У него есть концепция, макет, дизайн, готовы материалы, все или почти все продуманно до мелочей, и в следующей лекции вы уже сможете выбрать место для размещения, и ваш проект заживет своей собственной, возможно, отличной от ваших первоначальных задумок, жизнью. Однако перед тем как запустить проект для всеобщего обозрения, нужно внести несколько небольших корректировок: тут подкрасить, там подклеить, здесь зачистить, словом, как говориться в одном старом анекдоте "обработать напильником". Именно этим мы сейчас и займемся.

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

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

<title>
Название на любом языке длиной не более 256 знаков.
</title>

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

Я рекомендую начинать название страницы со значимого слова: названия продукта, торговой марки, бренда, услуги или тематики, например, очень часто можно встретить названия следующего вида: "новости сервера такого-то". Это грубая ошибка. Если пользователь поставит закладку на такую страницу, то просматривая впоследствии закладки, он увидит только "новости сервера…", таким образом, ссылка теряет для него свою значимость и, в конце концов, рискует отправиться в корзину, а ведь закладки - одно из самых значимых маркетинговых достижений. Куда лучше будет назвать страницу "Варенье в массы. Новости сервера" - название куда более информативное и, кстати, динамичное, что немаловажно: когда человек читает названия страниц в результатах работы поисковых машин, то динамичное название привлечет его куда больше, нежели вялое. Суть в том, что динамичное название уже содержит призыв к действию, оно как бы влечет за собой человека.

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

2. Мета теги
Вы можете посмотреть, как это выглядит на других сайтах, заглянув в исходники командой View=>Page Source. Мета-теги также часто упоминаются в руководствах по созданию HTML страниц и в материалах по маркетингу. Что же это такое?

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

Выглядят мета-теги следующим образом:

В каждый контейнер <META NAME=___ CONTENT="___"> вы помещаете соответствующие значения, индивидуальные для каждой страницы (то есть, каждая страница должна содержать свое собственное описание и свои собственные ключевые слова, которые ей наиболее соответствуют). Это довольно большая работа, но необходимая, и ее станет значительно больше, если отложить "на потом" (в этом я имел возможность лично убедиться). От этой работы, в частности, зависит, некоторым образом, количество посетителей на вашем сайте.

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

Длина каждого поля content ограничена килобайтом (1024 знака, включая пробелы и знаки препинания), чего более чем достаточно для комфортного проживания небольшого стада слонов, поэтому не стесняйтесь написать большое, продуманное описание и тщательнее работайте над ключевыми словами. Однако следует помнить, что мета-теги включены в код страницы, так что увеличение их длины ведет к увеличению объема страницы, а следовательно, увеличивает время загрузки. Поэтому не следует увлекаться. Кстати, в целях экономии места можно (и это имеет известный смысл) помещать в мета-теги внутренних страниц сокращенную версию описания всего ресурса, таким способом вы экономите место и подчеркиваете собственное описание страницы.

3. Подписи и копирайты
Ваш сайт - это ваша интеллектуальная собственность, которая охраняется международными законами об авторском праве. Мы не будем обсуждать сейчас степень соблюдения этих законов в нашей стране (скажем только, что при желании они очень даже соблюдаются), важно, что законы эти существуют и они адекватно отражены в Российском законодательстве. Так что, если вы их не нарушаете, то они работают на вас. Механизм вступления в действие закона достаточно прост: под каждым материалом, который вы хотите защитить, ставится значок копирайта и фамилия человек, которому эти права принадлежат. Теперь ваши права защищены законом.

Конечно, никакой закон не помешает стащить ваши материалы любому, кто пожелает, но они служат предупреждением: "воровство может быть наказано!", также как и красный свет не является физическим барьером для автомобилистов, а лишь предупреждает об опасности столкновения или штрафа. Учтите также, что если дело дойдет до суда, то одним копирайтом дело все же не ограничится, вам придется доказывать свое авторство документально.

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

Хорошим тоном с вашей стороны будет поставить рядом с копирайтом не только фамилию, но и ваш официальный e-mail (то есть, адрес для деловой переписки). Такое расположение адреса уже стало стандартом de facto, поэтому заинтересованные в контакте с вами посетители будут, прежде всего, искать адрес именно там. Не случиться беды, если вы продублируете свой адрес в разных местах страницы, однако на всякий случай, подгружайте его с помощью SSI директивы, особенно, если ваш адрес расположен на бесплатном почтовом сервере.

4. Комментарии
Стоит предположить, что ваш сайт будет разрастаться и наступит время, когда вы будете не единственным человеком, работающим над проектом. В то же время, не так-то просто разобраться в том, как именно верстальщик собрал страницу, особенно, если на ней применены сложные таблицы многократного вложения (то есть, таблицы в таблицах). Да и сами вы вряд ли сможете удержать в голове все детали и нюансы вашего собственного макета, когда объем страниц перевалит за пару сотен. Чтобы создать себе и своим партнерам более комфортные условия, добавьте в тело страницы комментарии, поясняющие значение того или иного участка кодов. Комментарии, как уже говорилось, оформляются тегом , в них удобно указывать также и области распределения материалов, например:

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

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

5. Изображения
Важной частью "ошкуривания" вашего сайта является оптимизация картинок в теле страницы. Мало того, что картинки должны быть качественно сжаты, о чем я уже рассказывал в лекции о подготовке материалов, но нужно оптимизировать и тег , который подгружает картинки на страницу. Тег этот имеет несколько важных параметров, к сожалению, используемых реже, чем должно. Первый такой параметр - это спецификация высоты и ширины картинки - атрибуты weight и height. Когда вы верстаете страницу, то обязательно проверяйте наличие этих атрибутов у каждого (!) тега img (вот здесь сказывается преимущество текстового редактора - там это сразу заметно). Большинство современных редакторов расставляет эти теги автоматически при переносе картинок на рабочее поле. При наличии этих атрибутов браузер сразу оставляет необходимое поле для картинки и загружает страницу дальше, не дожидаясь окончания подгрузки картинки. Таким образом, посетитель сразу видит вашу страницу и может начинать изучать ее, не дожидаясь загрузки всех компонентов.

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

Последние два атрибута - border и bordercolor. Эти атрибуты устанавливают толщину и цвет рамки вокруг изображения. Разные браузеры по умолчанию принимают разные значения этих атрибутов, поэтому я рекомендую везде проставить атрибут border и установить его значение равное 0, атрибут bordercolor при этом не нужен. Если вы хотите поставить рамку вокруг изображения, то учтите, что толщина рамки прибавляется к размерам картинки (то есть, рамка толщиной 1 точку увеличивает размеры картинки на 2 точки по высоте и ширине). Поэтому заранее закладывайте рамки в макет. Также я не советую использовать черные рамки вокруг фотографий - даже при минимальной толщине они выглядят очень траурно. Если вам нужно обозначить край фотографии, возьмите тонкую рамочку земляного цвета (серого, коричневого), - она не будет слишком яркой, чтобы не вызывать раздражение, но и слишком темной, чтобы не выглядеть траурной.

Складываем кубики Предпродажная подготовка

Складываем кубики
Предпродажная подготовка