Отправляет email-рассылки с помощью сервиса Sendsay

HTML, CSS, JS в примерах

  Все выпуски  

HTML, CSS, JS в примерах 14


Информационный Канал Subscribe.Ru

Web-мастерство для каждого

( выпуск # 14: 27.01.2006 )

Alex_soldier Здравствуйте, уважаемые WEB-дизайнеры!

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

Позвольте с некоторым опозданием поздавить Вас с Новым Годом и Рождеством! Всем своим читателям я решил сделать подарок - все выпуски всех моих рассылок за все время их существования!

Для этого нужно следующее: отправьте мне пустое письмо на alex_soldier@mail.ru с темой RASS2006. Через несколько дней вам придет письмо с 7 архивными файлами (в сумме около 2 МБ). С помощью интерфейса любой почтовой службы вы сможете скачать те из них, которые вам действительно интересны! Пишите!

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

1-я: www.alex-world.nm.ru/update/html-css-js.htm

2-я: www.alex-world.nm.ru/web014.htm


Там же вы можете прочесть все выпуски рассылки, или скачать их, запакованные в один архив:
www.alex-world.nm.ru/update/html-css-js.rar

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




Заметка «Дизайн и элементы SEO»

Сегодня я затронул весьма неоднозначный момент. С одной стороны, работа web-мастера ограничивается созданием контента сайта, а дальше уже подключается промоутер. Но, с другой стороны, почти все мы сами себе и дазайнеры, и промоутеры, и программеры, и даже служба поддержки! К тому же, SEO (поисковая оптимизация) очень сильно переплетена со структурой и содержанием сайта.

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

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

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

Для начала разберемся с заголовком. Как правило, он не позволяет значительных вариаций, иначе утратится связь с остальным текстом. Самый простой выход из такой ситуации - заключить его внутрь тегов <noindex> ... </noindex> К сожалению, это не всегда срабатывает. Поисковые роботы каким-то образом просачиваются в закрытую зону.

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

Наиболее надежный, но и тернистый путь - генерировать надпись с помощью JavaScript. Дело в том, что тело скрипта обычно обрамляется в комментарии, а уж на закомментированный текст поисковики не должны обращать внимания по определению! Для пущей уверенности можно сделать еще и побуквенную генерацию, но думаю, для наших целей вполне достаточно будет и простого document.writeln('Заголовок')';



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

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

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

Для таблиц я придумал такой способ: да, ячейки обрабатываются слева направо, с этим ничего не поделаешь, но можно поиграться со строками! Поясню свою мысль на нижеследующих иллюстрациях:

ТЕКСТ М
Е
Н
Ю

Так должно быть
М
Е
Н
Ю
ТЕКСТ

Так было бы лучше
  М
Е
Н
Ю
ТЕКСТ

А вот как стало



Вместо таблицы из 1 строки и 2 столбцов я сделал таблицу 2х2, и во втором столбце склеил две ячейки в одну. Поскольку теперь меню описывается в первой строке, а текст - во второй, меню располагается раньше в документе! А чтобы вас не смущала пустая ячейка над текстом, задайте минимальную высоту первой строки (height = 1 или 0). Визуально не будет заметно никаких различий!



Ну и еще один простой способ, о котором я узнал уже позже. Попробуйте воспроизвести вот такой код (если перед s t y l e = появится х - удалите его):

<div style="float:right;margin:5;padding:5;background-color:grey;"> МЕНЮ </div>
<p align="justify">ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ</p>



Вот что получится - врезка в текст:

ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ

МЕНЮ

ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ ТЕКСТ



Вот сайт, на котором это очень неплохо сделано: www.exp-plant.nm.ru


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

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

Alex_soldier        
(alex_soldier@mail.ru)



Конкурс WEB-дизайнеров


К сожалению, пока не было прислано не одной работы на конкурс. Думаю, виной тому искажение последних 2 выпусков. Так что хочет принять участие, подробности здесь:
www.alex-world.net.ru/web013.htm

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


Alex_soldier        
(alex_soldier@mail.ru)




Рассылка партнера

Бесплатные мелодии для сотовых в архивах

Ведущий: Melody Maker

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

Сайт: www.melodies-for-free.narod.ru



Вот уж действительно только правда в названии: и абсолютно бесплатные, и в архивах! Не надо никуда посылать никаких SMS-ок с кодами, просто переходите по ссылке и качаете, сколько успеете. Файлов на сайте уже порядочно. Так что скорее пользуйтесь такой шикарной возможностью!



В последних выпусках:

25.01.2006:
#8 - 12-й архив + мелодии mp3 + мелодий pmd для Trium Eclipse + обои

20.01.2006:
#7 - 11-й архив + новые обои + как получать файлы по почте!

13.01.2006:
#6 - 10-й архив + теперь еще и обои + мелодии mmf

10.01.2006:
#5 - 9-й архив + накрылась служба доставки WWW4MAIL :(

02.01.2006:
#4 - 8-й архив ("Пинк Флойд")

27.12.2005:
#3 - 7-й архив + мобильный анекдот + телефонный прикол

20.12.2005:
#2 - (исправленный) 6-й архив + мобильный юмор

19.12.2005:
#2 - 6-й архив + мобильный юмор

14.12.2005:
#1 - 5-й архив + мобильный юмор

11.12.2005:
#0 - 1-й, 2-й, 3-й и 4-й архивы по 21 рингтона каждый!




ОБРАТНАЯ СВЯЗЬ
Рассылка "САМЫЕ УБОЙНЫЕ АНЕКДОТЫ СЕТИ"

Рассылка "WEB-МАСТЕРСТВО ДЛЯ КАЖДОГО!"

Рассылка "ОБЗОР ИНТЕРЕСНЫХ РАССЫЛОК"

Рассылка "КОСМОС: НОВОСТИ ВСЕЛЕННОЙ"

Рассылка "ЧЕГО НАМ НЕ ХВАТАЕТ В ИГРАХ"

Рассылка "HTML,  CSS,  JS   В  ПРИМЕРАХ"

Рассылка   "HEROES  -  НОВЫЕ  ИДЕИ"

Мой e-mail: alex_soldier@mail.ru

Мой сайт: "МИР ИДЕЙ"

(C) Copyright 2006 by Alex_soldier


«Каталог» «Ищи CD» «Зона И» «HMM 5» «WEB» Мир Идей

Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора
Подписан адрес:
Код этой рассылки: comp.design.htmlcssjs
Архив рассылки
Отписаться Вебом Почтой
Вспомнить пароль

В избранное