SEO | PokrovBlog

— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.

Сейчас работаю над:

Техническая поддержка popsop.ru( url )

Текущий статус - изменнение функционала шаблона.
Разработка интерфейса для Korv ( url, design )

Текущий статус - мелкие доработки графического интерфейса.

Заказать мне работу

25.02

Структурируем HTML. Версия Покровского.

Комментарии (16) HTML

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

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

— За что? Все верно,правильно, кроссбраузерно, — послыщалось робкие возражения.
— Ну и что. Код он как одежда на человеке. Человек может быть хороший, но если как бомж одевается, то вряд ли путного в жизни добьется. Верстать надо красиво и чисто. Про чистый код я уже рассказывал. Теперь о красоте будем говорить.

— Первое правило - это соблюдение иерархии отступов. Для этого, диво как хорош notepad++ Вот, например, как выглядит хорошо структированный код в нем.

— Второе правило - это знать меру. Логика здесь такая. Мало оформления - пиши в строчку, много - блюди иерархию. Проиллюстирую:

Оформление контейнера

Нам нужно оформить контейнеру четыре уголка. Забьем пока болт на современные методы, благодаря которым можно оформить все в одном div

Красиво:

<div class="lt-bg"><div class="rt-bg"><div class="lb-bg"><div class="rb-bg"> <!-- оформление -->

   <!-- Содержимое -->

</div></div></div></div>

Некрасиво:

<div class="lt-bg">

   <div class="rt-bg">

      <div class="lb-bg">

         <div class="rb-bg">

            <!-- Содержимое -->

         </div>

      </div>

   </div>

</div>

Простой список

Красиво:

<ul>

   <li><a href="#">О нас</a></li>

   <li><a href="#">Услуги</a></li>

   <li><a href="#">Наши работы</a></li>

   <li><a href="#">Наши партнеры</a></li>

</ul>

Некрасиво:

<ul>

   <li>

      <a href="#">

         О нас

      </a>

   </li>

   <li>

      <a href="#">

         Услуги

      </a>

   </li>

   <li>

      <a href="#">

         Наши работы

      </a>

   </li>

   <li>

      <a href="#">

         Наши партнеры

      </a>

   </li>

</ul>

Сложный список:

Красиво:

<ul>

   <li>

      <div class="lt-bg"><div class="rt-bg"><div class="lb-bg"><div class="rb-bg"> <!-- оформление -->

         <a href="#">О нас</a>

      </div></div></div></div>

   </li>

   <li><a href="#">Услуги</a></li>

   <li><a href="#">Наши работы</a></li>

   <li><a href="#">Наши партнеры</a></li>

</ul>

Бррр…:

<ul>

   <li>

      <div class="lt-bg">

         <div class="rt-bg">

            <div class="lb-bg">

               <div class="rb-bg">

                  <a href="#">

                     О нас

                  </a>

               </div>

            </div>

         </div>

      </div>

   </li>

   <li>

      <a href="#">

         Услуги

      </a></li>

   <li>

      <a href="#">

         Наши работы

      </a>

   </li>

   <li>

      <a href="#">

         Наши партнеры

      </a>

   </li>

</ul>

Простая таблица:

По аналогии с простым списком

<table>

   <tr>

      <td><a href="#">О нас</a></td>

      <td><a href="#">Услуги</a></td>

      <td><a href="#">Наши партнеры</a></td>

   </tr>

</table>

Сложная таблица:

По аналогии со сложным списком

<table>

   <tr>

      <td>

         <ul>

            <li>

               <div class="lt-bg"><div class="rt-bg"><div class="lb-bg"><div class="rb-bg"> <!-- оформление -->

                  <a href="#">О нас</a>

               </div></div></div></div>

            </li>

            <li><a href="#">Услуги</a></li>

            <li><a href="#">Наши работы</a></li>

            <li><a href="#">Наши партнеры</a></li>

         </ul>

      </td>

   </tr>

</table>

Собственно вся наука.

Метки:CSS, HTML, SEO

03.09

Убираем отступ у последнего элемента списка.

Комментарии (17) CSS

Возьмем обычное стандартное горизонтальное меню, между которыми будут отступы в 10px. Как правило, последний элемент списка прижимается к внутреннему краю либо окна, либо контейнера (в моем примере я, для наглядности, сделал контейнер) и вот тут частенько возникает загвоздка….

14.08

Чистота кода и SEO

Комментарии (3) CSS, HTML, SEO

Я решил рассмотреть проблему «замусоренности» кода не с позиции профессионализма или красоты (пеньку понятно, что чем красивее код, тем больше ваш уровень как специалиста), а с позиции посещаемости сайта, но для начала поясню, что я подразумеваю под понятием чистый код.

Все стили вынесены в файл
Со скриптами ситуация сложнее, но по возможности тоже в один файл.
Скажем нет формированию отступов через
Таблицы хороши в меру. Если у вас есть хотя бы одна вложенная таблица – это серьезный повод задуматься.
Чем меньше контейнеров тем лучше.
Использование селекторов CSS здорово улучшает код.
Использование CSS, вообще, здорово улучшает код