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

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

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


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

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

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

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

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

RSS лента 459 читателей
10.08

Как получить доступ к DOM iframe через jQuery

Комментарии (3) HTML, JavaScript
Iframe
<iframe id="i" name="i" frameborder="0" allowtransparency="1" src="form.php"></iframe>
Содержимое iframe
<div id="j">Абракабабра</div>
jQuery
$('#i').contents().find('#j').html();
26.07

Размещаем что-либо поверх flash блока

Комментарии (4) CSS, HTML
Размещаем любой блок над флеш
      <div class="flash-wrap"> <!--  Нужен для того что бы размещенная ссылка была именно там где нужно нам, а не там где хочет она. -->
         <a class="flash-link" href="#">Перейти на PokrovBlog</a>
         <object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
            <param name="wmode" value="opaque"> <!-- Флеш ведет себя так как нам надо. Если он лежит в body, то слои будут его закрывать, если в слое - то он закрывает нижние (по z-index) слои и закрывается верхними. Фон имеет фоновый цвет. Без этой штуки работать ничего не будет. -->
            <param name="movie" value="flash.swf" />
            <param name="quality" value="high" />
         </object>
      </div>
         .flash-wrap{
            position: relative;
            }
         
         .flash-link{
            position: absolute; top:0px; left:0px;
            }

Это наитипичнейшый пример, но иногда требует нечто более сложное. Например, мне нужно было сделать чтобы баннер с активной ссылкой (то есть уже вшитой в код самого флеша), вел на другой адрес.

Размешаем активную область над флеш.
      <div class="flash-wrap">
         <a class="flash-link" href="#"></a>
         <object type="application/x-shockwave-flash" data="flash.swf" width="180" height="220">
            <param name="wmode" value="opaque">
            <param name="movie" value="flash.swf" />
            <param name="quality" value="high" />
         </object>
      </div>
      .flash-wrap{
         position: relative;
         }
     
      .flash-link{
         position: absolute; top:0px; left:0px;
         width:180px; /*Размеры флешки*/
         height:220px;
         background: url('images/0.gif') no-repeat; /*Особенный костыль для всех IE. Если фона нет, то воспринимается ссылка вшитая во флеш, а не наша. Думаю понятно, что 0.gif это прозрачный однопиксельный гиф.*/
         }

Пример

17.03

2 способа расположить картинку сбоку от текста

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

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

Читать дальше...

15.03

Что надо сделать, чтобы люди перестали пользоваться IE6

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

Первой ласточкой борьбы с IE была всеобщая эйфория от семантики и стандартизации.

Откройте эту страницу – http://pokrovskii.com/misc/index.html в IE6 и любом другом браузере (оригинал страницы взят с http://anton.shevchuk.name/). Поводите мышкой по кнопкам в IE и в нормальных браузерах. Чувствуйте разницу?

Как работает:

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

Я использовал уже готовый скрипт выводящего предупреждение в IE – http://upgradebrowser.org/webmasters и заблокировал исполнение скрипта анимации с помощью <![if !IE 6]>IE Conditional Comment: NOT Internet Explorer<![endif]>. Проще некуда.

Любители скупой технической информации на этом могут перестать читать. Потому что дальше я буду многословно объяснять.

Читать дальше...

09.02

Крутой верстальщик понимает это….

Комментарии (16) CSS, HTML, IMHO-мысли

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

Крутой верстальщик понимает, что промосайтам чхать на кол-во тегов, для них больше важна оптимизация картинок, а на сайтах типа “чтоб было” можно выжать максимально оптимизированный код… А еще он не упирается рогом в семантику, когда не надо, и понимает, что валидность, это гарант того, что через 5 лет ваш начинающий YouTube не развалиться в супер новом браузере от Яндекса.

06.01

Объектно ориентированная верстка

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

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

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

Отследить, как повлияет корректировка существующего правила на такой портал — проблематично. А если это еще и не ваш портал? Если вас просто попросили внести пару десятков изменений? Тот еще мозготряс.

В таком случае верстать лучше объектами или блоками (кому как нравится). Для тех кто не знаком с термином ООП, объясню понятным языком. Например, у нас есть дверь. Дверь обладает свойствами: она белая, прямоугольная и открыта. Теперь если нам надо закрыть дверь, то мы просто меняем свойство «открытая» на «закрытая». Или добавить новое свойство — «застекленная»… Довольно примитивное описание, но в целом ясно, я полагаю.

Ниже я займусь практикой.

Читать дальше...

02.10

Вот вам истина

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

В 90% случаев контент верстать сложнее, дольше и дороже, чем промо.

Это догма.

24.05

5 советов верстальщику

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

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

  1. Перед началом работы смоделируйте каркас работ в голове. Настоящая работа верстальщика происходит ДО того как открывается редактор. Все остальное лишь инструмент.
  2. Не злоупотребляйте <div>. Чем меньше вы сможете использовать тегов тем лучше. Впрочем всегда есть исключения (Статья на эту тему).
  3. Не зацикливайтесь на одних и тех же методах. Возможно именно сейчас появился более совершенный способ реализации png, закругленных уголков или чего еще. Не нашли в рунете — придумайте сами.
  4. Каждый дизайнер обладает своим собственным стилем. Верстальщик тоже, просто это не так заметно. Поэтому не старайтесь копировать стиль верстки подчистую. Я например не разделяю блоки кода комментариями, потому что использую структурированный стиль написания и интуитивные id. Мне так удобно, не не факт, что это будет удобно вам. Используйте, то что вам подходит, а не то что СЧИТАЕТСЯ удобным.
  5. Не забывайте про то что браузеров много. Отмазка, “у меня нет этого браузера” — смешна.

Эстафету передам Евгению, Дмитрию и Владимиру

12.03

Много текста в кнопке. (IE6-7)

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

Довольно нетипичная проблема длины кнопок в самизнаетекакомбраузере. Решения нет. Но о проблеме знать надо.

Читать дальше...

25.02

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

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

Про чистый код я уже рассказывал. Теперь о красоте будем говорить.

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

notepad_printscreen.jpg

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

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

Нам нужно оформить контейнеру четыре уголка. Забьем пока болт на современные методы, благодаря которым можно оформить все в одном 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>

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

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

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

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

    — Как предоплата мобилизует отоношения - так и и гибкость в отношениях позволяет зарабатывать больше
    комментарий заказчика к статье http://pokrovskii.com/predoplata-i-druzya

    Rambler's Top100