HTML » PokrovBlog | Максим Покровский. Веб-дизайн устами фрилансера, глазами дизайнера и руками верстальщика.

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

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

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

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

10.08

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

Комментарии (2) 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"> 
<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-разработчиков.

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

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

12.03

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

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

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

25.02

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

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

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

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

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

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

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

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