— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.
Сделал за последнее время:
| Заказать мне работу |
| 26.07 | Размещаем что-либо поверх flash блока |
- Размещаем любой блок над флеш
- <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 это прозрачный однопиксельный гиф.*/
}
| 22.06 | Если в контенте много “жирного” текста |
Порой дизайнеры создают вот такие штуки:
Создавать для каждого типа “жирности” отдельный класс не кажется мне кошерным вариантом. Во-первых, не изящно. Во-вторых, тексты заносят в основном люди далекие от веба, и донести мысль прописывания классов весьма проблемно. Да и не надо. Будем делать так:
<strong><strong>Bold 14px</strong></strong>
<strong><strong><strong>Bold 22px</strong></strong></strong>
strong strong{ font-size: 14px; }
strong strong strong{ font-size: 22px; }
Ну, короче, вы поняли мысль.
====
Маленькое примечание. Расширения для FF Html Validator, может вам сказать что код не валидный. Не верьте ему. Ибо надежный источник заявляет что: This document was successfully checked as XHTML 1.0 Strict!
| 17.05 | Памятка №1 |
Не забывать, прикрепляя какой-нибудь скрипт для IE, прописывать его в <!--[if lte IE7]>...<![endif]-->
| 13.05 | Организация CSS. Думайте своей головой. |
Когда таксопарк нанимает водителя, то им устраивают тест на знание города. Вопреки житейскому опыту, который подсказывает, что хороший таксист знает все зако пере и другие улки, отличается он от “таксиста обыкновенного” совсем не этим. Хороший таксист знает, что вовремя праздников, постов ГИБДД гораздо больше, чем в обычные дни. Знает, что в час пик лучше поехать не самой лучшей, но зато пустой дорогой, а ночью лучше разогнаться по длинной, но прямой и ровной дороге. Знает, что ночью, едя по главной дороге, лучше уступить идиоту несущемуся по второстепенной, чтобы там не говорили правила ПДД (а также знает много других разных штук, которые мне не успел поведать таксит Вадик). Если выжать из этого абзаца истину, то оно будет звучать почти как мантра: классный таксист знает, КОГДА и ГДЕ лучше применить свои знания, а где лучше о них вообще не вспоминать.
Свежевыжатая мантра верна по отношению ко всем аспектам интернет-деятельности (и не только). Например, три дня назад мне достался на редизайн сайт-визитка, состоящий из 3 типовых страниц и имеющий вот такую структуру css:
Структура была взята из вот этой статьи — http://vremenno.net/html-css/progressive-enhancement-with-css/ и хороша для крупных сложносочиненных порталах, над поддержкой которого работает очень много разных людей, чей труд должен быть как-то систематизирован. Поэтому в следующий раз перед тем как применить тот или иной популярный трюк, подумайте: а не будете ли вы похожи на того водителя который, пропускает среди бела дня, мчащихся по второстепенной дороге идиотов, только потому что более опытный водитель посчитал время суток как очевидный факт. Заодно можно подумать чем все это кончится.
| 17.03 | 2 способа расположить картинку сбоку от текста |
Иногда необходимо разместить сопровождающую иллюстрацию сбоку от текста, так чтобы текст не обтекал ее. Например, вот для таких заметок:
| 15.03 | Что надо сделать, чтобы люди перестали пользоваться IE6 |
Первой ласточкой борьбы с 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]>. Проще некуда.
Любители скупой технической информации на этом могут перестать читать. Потому что дальше я буду многословно объяснять.
| 12.03 | Длинные классы |
Длинные классы зло — их труднее вбивать в строке поиска, а читать мы их не читаем
| 09.02 | Крутой верстальщик понимает это…. |
Крутой верстальщик — это не тот, кто знает тыща и один способ реализации всплывающего меню, а тот кто понимает, что для порталов лучше использовать ООП-верстку, а для динамично развивающегося ресурса, не стоит жалеть лишнего дива.
Крутой верстальщик понимает, что промосайтам чхать на кол-во тегов, для них больше важна оптимизация картинок, а на сайтах типа “чтоб было” можно выжать максимально оптимизированный код… А еще он не упирается рогом в семантику, когда не надо, и понимает, что валидность, это гарант того, что через 5 лет ваш начинающий YouTube не развалиться в супер новом браузере от Яндекса.
| 06.01 | Объектно ориентированная верстка |
Когда при одном беглом взгляде на макет, ты уже понимаешь как его разверстать, а строчки тегов превращаются в симфонию нот, делать пост с очередной реализацией менюшки или поддержки png как то не хочется. Поневоле задаешься чем то глобальным.
Очень многие, например убиваются по оптимизации кода, экономия каждый байт. Это в общем то оправдано, когда речь идет о сайте с двумя-тремя типовыми страницами, но при разработке крупных порталов, где каждая страница может иметь незначительное стилевое отличие от другой, такой подход к делу — вреден.
Отследить, как повлияет корректировка существующего правила на такой портал — проблематично. А если это еще и не ваш портал? Если вас просто попросили внести пару десятков изменений? Тот еще мозготряс.
В таком случае верстать лучше объектами или блоками (кому как нравится). Для тех кто не знаком с термином ООП, объясню понятным языком. Например, у нас есть дверь. Дверь обладает свойствами: она белая, прямоугольная и открыта. Теперь если нам надо закрыть дверь, то мы просто меняем свойство «открытая» на «закрытая». Или добавить новое свойство — «застекленная»… Довольно примитивное описание, но в целом ясно, я полагаю.
Ниже я займусь практикой.
| 02.10 | Вот вам истина |
В 90% случаев контент верстать сложнее, дольше и дороже, чем промо.
Это догма.
| ! | Самое обсуждаемое |
- 16 признаков крутого верстальщика - 52
- Bundles для e-texeditor - 37
- Переходим на em - 33
- Семантика или как же лучше - 28
- Веб-дизайнер. Кто такой? - 26
- Контейнер для float - блоков - 23
- Убираем отступ у последнего элемента списка. - 21
- Меняем лицо - 20
- Как сделать upload в комментариях - 20
- Пиксельмания. Ату его, ату! - 19
— Мало родить идею, надо еще найти в себе силы для ее реализации
Они читают меня, я читаю их