Максим Покровский

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

Сделал за последнее время:


  • Добавил в портфель около 48-и новых работ:

  • Сделал очень много всяких штук при работе над поддержкой сайтов.
    Как бы это теперь в портфель запихнуть?

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

Рубрики / Теги

Последние записи

RSS лента 475 читателей
16.10

Некоторые моменты эмуляции min-width и max-width для IE 6

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

Момент один

Это самый распространенный и рабочий вариант:

#block{
  width:expression((document.documentElement.clientWidth< =1000)?'1000px':'auto');
  }

Аналогично эмулируется и max-width.
Если же вы используете метод document.body вместо documentElement, то следите за тем чтобы у этого самого body были обнулены padding и margin, иначе вы рискуете сильно сжечь мозг IE. Хотя я пока не нашел моментов, в которых бы не работал documentElement.
[Далее...]

07.09

Лечим IE 7

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

C появлением Висты, а точнее с появление в Висте IE7 разработчикам приходится обходить глюки не только в IE6, но и в семерке. Хотя IE7 развит больше чем его предшественник, но все же приходиться лечить и его. Итак, вот хаки которые понимает только IE7
[Далее...]

16.08

Центрирование “плавающего” меню

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

Потрясающее в своей элегантности решение. Обязательно должно быть на заметке у каждого.

html, body {
    margin: 0; padding: 0;
    font-family:Tahoma, Arial, Helvetica, sans-serif;
    background-color: #fff;
}

.navi {
    width: 775px; /*Устанавливаем фиксированную ширину*/
    position: relative;
    overflow: hidden;
    font-size: .8em;
    border: 1px dotted red;
    text-align: center;
    margin: 5px auto;
}

.navicontainer {
    float: left;
    left: 50%; /*Сдвигаем влево на 50%*/
    position: relative;
    text-align: center;
    border: 1px dotted green;
}

.wrpr {
    position: relative;
    left: -50%; /*Возврашаем меню точно в центр*/
    float: left;
    list-style: none;
    margin: 0; padding: 0;
    border: 1px dotted blue;
}

.navi a, .navi li  {
    float: left;
    padding: 10px; margin: 0;
    color: #3B6783;
    font-weight: bold;
    text-decoration: none;
}

.navi li {padding: 0; margin: 0;}

.navi a:hover {
    text-decoration:none;
    background: lightblue url(navirobg.gif) repeat-x 0 0;
}

.navi li a:hover {
    background: lightblue url(navirobg.gif) repeat-x 0 0;
}

Раскладка включает в себя два блока для позиционирования и собственно меню

<div class="navi">
    <div class="navicontainer">
        <ul class="wrpr">
            <li><a href="#">Item # 1</a></li>
            <li><a href="#">Next item (# 2)</a></li>
            <li><a href="#">Do you have another item?</a></li>
            <li><a href="#">#4</a></li>
            <li><a href="#">What about more</a></li>
            <li><a href="#">Done</a></li>
        </ul>
    </div>
</div>

Рабочий пример
Автор: Alex Mauzon

14.08

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

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

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

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

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

Во-первых, не каждый поисковик будет индексировать всякий там хлам. Оптимально для любого поисковика – 100 кб. Вот цитата с Рамблера

Максимальный размер документа для роботов Рамблера составляет 200 килобайт. Документы большего размера усекаются до указанной величины. Впрочем, размещать в Сети документы такого размера без особой на то необходимости – все равно дурной тон; мы рекомендуем в любом случае ограничивать объем документа разумными рамками.

Во-вторых динамический код индексирует только Yandex, Google и Rambler наказывать за это не будут, но и индексировать тоже.

Третье чем легче код, тем больше робот «пережует страниц» за сессию.

Не верите мне? Сейчас докажу.
Как часто вы, набирая в поисковике какой-либо запрос, попадали на форумную страницу для печати? Уверен частенько. А все потому, что если вы перейдете на стандартную версию, то увидите «там грязный» код и кучу вложенных таблиц. Страница для печати более релевантна и потому выше в выдаче. (если она не запрещена для индексации)

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

09.08

Изящное отсеивание спама

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

Делаем в форме дополнительное поле и прячем его стилями от пользователя. Пользователь не видит поле и не заполняет его, а бот заполнит. Затем проверяем поле на стороне сервера на заполненность. Все!

html:

    <form method="post" action="process.php">  
    <fieldset>
      <label>Name: </label><input name="name" type="text" /><br />
      <label>Email: </label><input name="email" type="text" /><br />
      <label>Comment: </label><input name="comments" type="text" />
      <input name="info" class="special" type="text" />
      <input value="Send" type="submit" />  
    </fieldset>
    </form>

css:

    body {
    line-height:35px;
    font-family:Arial, Helvetica, sans-serif;
    color:#333;
    font-size:14px;
    }
    .special {
    width:5px;
    visibility:hidden;
    }
31.07

Пара тегов которые не должны встречаться в хорошем коде

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

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

[Далее...]

27.07

Всплывающее гибридное меню на CSS

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

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

Хорошо звучит? Давайте начнем. В итоге может получиться вот так

[Далее...]

 Страница 3 из 3 « 1  2  3 
!

Самое обсуждаемое

Они читают меня, я читаю их

    — Мы можем делать дешево, быстро и качественно. Выбирайте два любых показателя!
    Фрилансерскиая хитрость

    Rambler's Top100