— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.
Сделал за последнее время:
| Заказать мне работу |
| 25.02 | Структурируем HTML. Версия Покровского. |
Про чистый код я уже рассказывал. Теперь о красоте будем говорить.
— Первое правило – это соблюдение иерархии отступов. Для этого, диво как хорош notepad++ Вот, например, как выглядит хорошо структированный код в нем.
— Второе правило – это знать меру. Логика здесь такая. Мало оформления – пиши в строчку, много – блюди иерархию. Проиллюстирую:
Оформление контейнера
Нам нужно оформить контейнеру четыре уголка. Забьем пока болт на современные методы, благодаря которым можно оформить все в одном div
Красиво:
<!-- Содержимое -->
</div></div></div></div>
Некрасиво:
<div class="rt-bg">
<div class="lb-bg">
<div class="rb-bg">
<!-- Содержимое -->
</div>
</div>
</div>
</div>
Простой список
Красиво:
<li><a href="#">О нас</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Наши работы</a></li>
<li><a href="#">Наши партнеры</a></li>
</ul>
Некрасиво:
<li>
<a href="#">
О нас
</a>
</li>
<li>
<a href="#">
Услуги
</a>
</li>
<li>
<a href="#">
Наши работы
</a>
</li>
<li>
<a href="#">
Наши партнеры
</a>
</li>
</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>
Бррр…:
<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>
Простая таблица:
По аналогии с простым списком
<tr>
<td><a href="#">О нас</a></td>
<td><a href="#">Услуги</a></td>
<td><a href="#">Наши партнеры</a></td>
</tr>
</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>
Собственно вся наука.
| 03.09 | Убираем отступ у последнего элемента списка. |
Возьмем обычное стандартное горизонтальное меню, между которыми будут отступы в 10px. Как правило, последний элемент списка прижимается к внутреннему краю либо окна, либо контейнера (в моем примере я, для наглядности, сделал контейнер) и вот тут частенько возникает загвоздка….
| 14.08 | Чистота кода и SEO |
Я решил рассмотреть проблему «замусоренности» кода не с позиции профессионализма или красоты (пеньку понятно, что чем красивее код, тем больше ваш уровень как специалиста), а с позиции посещаемости сайта, но для начала поясню, что я подразумеваю под понятием чистый код.
- Все стили вынесены в файл
- Со скриптами ситуация сложнее, но по возможности тоже в один файл.
- Скажем нет формированию отступов через
- Таблицы хороши в меру. Если у вас есть хотя бы одна вложенная таблица – это серьезный повод задуматься.
- Чем меньше контейнеров тем лучше.
- Использование селекторов CSS здорово улучшает код.
- Использование CSS, вообще, здорово улучшает код
Если ваша страница быстро и легко грузиться, если ваш код легко читается и также легко угадывается общая структура, то у вас чистый код. Теперь посмотрим как он влияет на позиции в поисковиках.
Во-первых, не каждый поисковик будет индексировать всякий там хлам. Оптимально для любого поисковика – 100 кб. Вот цитата с Рамблера
Максимальный размер документа для роботов Рамблера составляет 200 килобайт. Документы большего размера усекаются до указанной величины. Впрочем, размещать в Сети документы такого размера без особой на то необходимости – все равно дурной тон; мы рекомендуем в любом случае ограничивать объем документа разумными рамками.
Во-вторых динамический код индексирует только Yandex, Google и Rambler наказывать за это не будут, но и индексировать тоже.
Третье чем легче код, тем больше робот «пережует страниц» за сессию.
Не верите мне? Сейчас докажу.
Как часто вы, набирая в поисковике какой-либо запрос, попадали на форумную страницу для печати? Уверен частенько. А все потому, что если вы перейдете на стандартную версию, то увидите «там грязный» код и кучу вложенных таблиц. Страница для печати более релевантна и потому выше в выдаче. (если она не запрещена для индексации)
И разумеется не забывайте, что если вас сайт на первой позиции в Яндексе, но грузится при этом по 5-10 минут, и имеет развалившееся страницы , то посетитель слиняет от вас и никогда больше не вернется.
| 27.07 | Всплывающее гибридное меню на CSS |
Мы собираемся создать гибридное меню, которое работает горизонтально – поперек окна. Оно имеет два уровня навигации (в нашем примере это главные разделы и связанные с ними страницы). Наше меню учтет всплывающий доступ ко всем страницам в обоих навигационных уровнях, отобразит текущие изменения в выбранной области пункта меню, чтобы пользователь знал, где он находится, и будет иметь легкий и чистый код.
Хорошо звучит? Давайте начнем. В итоге может получиться вот так
| ! | Самое обсуждаемое |
- 16 признаков крутого верстальщика - 52
- Bundles для e-texeditor - 37
- Переходим на em - 33
- Семантика или как же лучше - 28
- Веб-дизайнер. Кто такой? - 26
- Контейнер для float - блоков - 23
- Убираем отступ у последнего элемента списка. - 21
- Меняем лицо - 20
- Как сделать upload в комментариях - 20
- Пиксельмания. Ату его, ату! - 19
— Как предоплата мобилизует отоношения - так и и гибкость в отношениях позволяет зарабатывать больше
комментарий заказчика к статье http://pokrovskii.com/predoplata-i-druzya
Они читают меня, я читаю их