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

Займусь им сразу, как допилю мой замечательный color picker getColor.

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

Методом тыка в рамблере нашёл крупную веб-студию «Cosmos-web», оценил её работы и понял, что могу сделать лучше. На сайте, были указаны контакты, среди которых была и ICQ.

Далее отрывок примерного диалога в ICQ:

Я: Работы выслал на почту, зацените.
Cosmos-web: Неплохо. Предлагаю завтра встретиться.
Я: Нет проблем.
Cosmos-web: *тут какая-то шутка про студию*
Я: лол!
Cosmos-web: офигел что ли?
Я: а что такое?
Cosmos-web: Да ничего, завтра придёшь и расскажешь студии, кто лол.
Я: блин, лол это lol
Я: lot of laugh

Больше мне никто ничего не написал, а аська Комос-веба была на всякий случай занесена в игнор.
Вот такая история, лол!

2 компьютера: рабочий и домашний. Требуется, чтобы файлы в определённых папках с одного компьютера по завершению работы (да, компьютеры мы выключаем) были любым способом доступны на другом компьютере по его включению.

В прошлый раз для этого потребовалась флэшка на 4 Gb, LightBriefcase, USB Safely Remove и немного мозга средней плотности.

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

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

Знакомьтесь, Dropbox.

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

• Простейшая регистрация открывает врата к 2 ГБ хранилищу;
• Скачиваем специальное приложение под Windows, Mac или Linux;
• После установки приложения появляется папка «My Dropbox», в которую можно положить любые файлы, которые, в свою очередь, после синхронизации окажутся в точно такой же папке на другом компьютере.

Если вдруг, по каким-либо религиозным причинам, вам не захочется перемещать свои папки и файлы в «My Dropbox» — можете попробовать создать на них ссылки. Подробнее о создании ссылок на папки и других использованиях Dropbox’а вы сможете почитать здесь.

Из минусов можно отметить упорное нежелание синхронизовывать использующиеся файлы (насколько мне известно, проблема актуальна только для Win-пользователей), т.е. ту же миранду приходится выгружать перед уходом из дома и с работы.

Всё! Никаких программ для автозапуска, никаких .bat-файлов, никаких забытых флэшек!
Стоит так же отметить, что синхронизация уже существующих файлов происходит изменёнными кусками, что экономит трафик и, самое главное, время.

Удачной вам синхронизации!

Со слов хостинг-провайдера, во время первых залпов неизвестных по Писькомеру, сайт создал критическую нагрузку на сервер, опасную для его работоспособности (Писькомера, разумеется).
Высшим руководящим составом мгновенно было принято решение: закрыть frankov.ru до прекращения атак, чтобы уберечь самый ценный контент.

Суровый натиск продолжался 3 долгих дня, но на 4-й день нам удалось отбить площадку и всё же восстановить полноценную работу сайта.

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

Свой ник, twenty, я набираю менее, чем за секунду и довольно часто вместо ника обнаруживаю в инпуте «ецутен». Ну тут всё понятно — дело в раскладке клавиатуры, на которую я не обратил внимания. После долгих и весьма безуспешных попыток привыкнуть к автоматической смене раскладки Punto Switcher’а, мой мозг выдал концепцию typoFix’а.

И как же оно работает?

typoFix функция, использующая jQuery, которая “блокирует” раскладку клавиатуры в input-полях. Любой вводимый символ заменяется на соответствующий из нужной раскладки. Доступны: русская, английская и украинская раскладки.

Требования и установка:

typoFix — это функция, использующая селекторы jQuery, поэтому без него работать не будет.
Встраивание typoFix.js на страницу:

1
2

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="typoFix.js"></script>

Затем нужно задать инпутам атрибут lang:

• ru — для “блокировки” русской раскладки;
• en — для “блокировки” английской раскладки;
• uk — для “блокировки” украинской раскладки.

1

<input type="text" lang="en" name="login" />

Кому это нужно и где вообще это можно применять?

Превосходное применение typoFix может найти в формах авторизации, в анкетах, да и в любом input-поле, где подразумевается использование какого-то одного языка для ввода.

Кому это не нужно и где это вообще нельзя применять?

В формах авторизации, если в пароле всё же можно использовать более одного языка, дабы не смущать пользователя.

Известные и не очень проблемы

• Некорректная работа с F-клавишами во всех браузерах, кроме fucking IE.

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

Почему нелегальные? Ну, наверное, потому что внаглую был скопирован сам swf’ник, декомпилирован, изменён для генерации собственных ссылок и всё… Ни писем с просьбой использовать у себя на сайте, ни ссылки на автора. Хоть бы гуй, что ли, переделали…

Нет, я не против, используйте пожалуйста, на своих сайтах что угодно с моего блога, но не приписывайте мой труд себе!

Однако, есть и нормальные ребята в рунете. К примеру Wyllf. И письмо написал, и гуй переделал, и ссылку поставил. Молодец, одним словом.

Радует, что воруют только хорошие идеи. Воруй, убивай!

• Негативно влияет на производительность страницы из-за неоптимизированной работы фильтра в слабеньком стареньком браузере;
• Не позволяет использовать CSS-свойства, регулирующие отображение background’а (такие, как backround-position и background-repeat);
• Не валиден, а значит нуждается в отдельном стилевом файле.

Но мало кто знает (а те, кто знает — почему-то молчат), что по стандарту PNG-изображения могут содержать до 32 бит альфа-канала.
И что интересно, IE6 показывает серый фон для изображений PNG-24, но с PNG-8 работает вполне себе корректно. Хм… в этом определённо есть какой-то скрытый смысл.
Если ещё не очевидно — наша цель: сделать альфа-канал в PNG-8.

Основной проблемой является тот факт, что самый популярный, несмотря на свою дикую для русского человека цену в $700, графический редактор, Adobe Photoshop, не умеет ни работать, ни сохранять альфа-канал в PNG-8. Что действительно странно, так это то, что продукт Fireworks от того же Adobe, изумительно работает с более детальной настройкой экспорта PNG-изображений.
Кстати говоря, есть замечательная бесплатная консольная программа pngquant, делающая то же самое, однако не все любят консоль.

Для примера возьмём какое-нибудь изображение, аккуратно вырежем его и положим на прозрачный фон.
Предлагаю взять из общедоступных источников Антона Спиридонова, который всё ещё продаёт свои кедровые фитобочки, у которого скоро День рождения и которому я не скажу, что же подарю в этот знаменательный день.

Слева — отображение в большинстве браузеров, справа — в IE6.

Этого изображения уже достаточно, чтобы показать суть метода, однако хочется рассмотреть и подводные камни.

В данном случае, бабл с сообщением имеет полупрозрачность, а так же непонятно откуда взявшуюся тень.

Итак, нам дано изображение в формате PNG-24.

В отличии от того же Photoshop’а, в Fireworks’е нет интуитивно понятного интерфейса базирующегося на одном из других продуктов Adobe. Поэтому предлагаю вашему вниманию небольшой гайд по экспорту изображений в Fireworks.

Первым делом нужно открыть наше изображение в Adobe Fireworks.
Затем нужно его как-то сохранить: File → Export Wizard… → соглашаемся со всем, чем можно и делаем точно так же, как на изображении ниже:

После чего необходимо сделать вообще что-то удивительное: нажать кнопку «Export…» и задать имя файлу, отличное от текущего (исходник может потом понадобиться).

На выходе получаем замечательное изображение в формате PNG-8 с альфа-каналом. Сбыча всех мечт уже близко, нужно только поверить.

Чего и следовало ожидать: IE6 другого мнения о формате PNG-8 и, несмотря на стандарт PNG от 1996г., игнорирует альфа-канал.
Можно заметить, что пропали только пиксели с полупрозрачностью. Антон же остался почти девственным.

Умело используя этот метод, можно создавать изображения, которые будут минимально отличаться от оригинала, несмотря на некоторые технические ограничения отображения формата.

Начну, пожалуй, с того, что пользователи IE6 ущербны, так же как и профнепригодные сисадмины, оставляющие эту огромную дыру на подведомственных компьютерах. Они, в силу особенностей восприятия интернета через IE6, неспособны видеть нормальную семантичную вёрстку, видеть полупрозрачные PNG-изображения, быть уверенными в безопасностости веб-сёрфигна. Ну а чего хотеть от браузера, которому почти 9 лет? Да просто вдумайтесь в эту цифру!

Поскольку ущербности пользователям IE6 не занимать, я предлагаю подливать масла в огонь:

• Видите, какой-то малозначимый элемент интерфейса, который везде смотрится изумительно, а в IE6 совсем наоборот? Не тратим на него время и удаляем;
• Что-то где-то поехало дальше чем должно было? Функционал не потерялся? Оставляем так. Не тратим драгоценное время. Практика показывает, что наиболее тудозатратной и в итоге менее необходимой является отладка под IE6. Вспоминаем, что на текущий момент IE6 — это всего 20% российских пользователей;
• Заказчик требует попиксельного кроссбраузерного совпадения вёрстки? Пытаемся объяснить, почему этого и вот этого нельзя сделать в древнем браузере. Очень настойчиво прелагаем увеличить стоимость и сроки разработки. Объясням отличия mail.ru и одноклассников от текущего проекта. Не получается? Get The Fuck Up!

Комментарии я себе уже обеспечил, теперь можно и о хорошем

В дополнение к вышеописанным способам, изменить браузерную ориентацию пользователя IE6 поможет noMoreIE6.

noMoreIE6

Что же оно делает?

Показывает информационный бар в IE6, внешне схожий с таким же баром в IE7.

В тексте предлагается кликнуть по бару для установки более безопасного браузера. При клике появляется нечто, напоминающее контекстное меню, где предлагается выбор между Firefox’ом и IE7. Бар можно закрыть единоразово с помощью крестика или на 30 дней с помощью соответствующего пункта в контекстном меню.

Требования и установка:

Для корректной работы noMoreIE6 необходимы:

• Наличие оригинального Internet Explorer 6;
• Включённые JScript и cookies у пользователя;
• Все файлы noMoreIE6 должны лежать в одной директории «no-more-ie6» в корневом каталоге сайта.

Подключение к странице производится через условные комментарии, однако в этом нет острой необходимости.

1
2
3
4

<!--[if lt IE 7]>
	<link href="/no-more-ie6/no-more-ie6.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="/no-more-ie6/no-more-ie6.js"></script>
<![endif]-->

Да, кстати, если у вас стоит IE6 standalone — куки, а значит и отключение показа бара, работать не будут.

Как всегда, при возникновении проблем с удовольствием приму надлежащие меры.

Можно выделить 3 типа двухколоночных сайтов: статичные, плавающие, смешанные.
Далее можно читать выборочно.

Статичные (Fixed)

Отличительные черты: общая ширина сайта фиксирована (обычно под какое-нибудь универсальное разрешение), что позволяет легко управлять шириной каждой колонки без каких либо проблем, задавая чёткую ширину в px.

Плавающие (Fluid)

Отличительные черты: ширина каждой колонки меняется вместе с изменением размера окна. Ширина колонок задаётся в %. Кстати, весьма интересное поведение в IE6 описано и решено в техногрете студии Артемия Лебедева.

Смешанные

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

Ситуация раз: ширина левой колонки 200px, правая же плавающая. Тут нужно вспомнить, что на самом деле делает свойство float, а именно: определяет обтекаемость текстом заданного элемента. Применим наши знания на практике.

1
2
3
4
5
6
7
8

...
<div id="left">
	Левый, 200px
</div>
<div id="right">
	Правый, плавающий
</div>
...

1
2
3
4

#left {
	width:200px;
	float:left;
}

Вроде бы всё нормально. Хорошо, давайте посмотрим, что будет, если мы расширим контентный блок.

На первый взгляд может вызвать недоумение, но на самом деле здесь всё логично — достаточно вспомнить, как текст выше обтекает изображения.

Как вы, наверное, уже догадались, нужно просто добавить воды левый margin, равный ширине левого блока.

1
2
3
4
5
6
7

#left {
	width:200px;
	float:left;
}
#right {
	margin-left:200px;
}

Ситуация два: на этот раз всё наоборот: правая — фиксированная, левая — плавающая.

Ну, по сути, мало что изменилось. Предлагаю сначала попробовать наработки из предыдущего примера.

1
2
3
4
5
6
7
8

...
<div id="left">
	Левый, плавающий
</div>
<div id="right">
	Правый, 200px
</div>
...

1
2
3
4
5
6
7

#left {
	margin-right:200px;
}
#right {
	width:200px;
	float:right;
}

Я специально увеличил высоту левой колонки для наглядности.
Что случилось? Почему правая колонка съехала вниз? Как всегда, на самом деле, тут всё логично.
Для понимания причины такого отображения снова нужно вспомнить, для чего используется свойство float.
Самый простой пример для понимания работы float’а — изображение вставленное в текст.

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

Решение очень простое, но не совсем семантичное. Достаточно просто структурно поменять левый и правый блок местами, тем самым восстановив логику обтекания.

1
2
3
4
5
6
7
8

...
<div id="right">
	Правый, 200px
</div>
<div id="left">
	Левый, плавающий
</div>
...

Вот так. К сожалению, иногда приходится жертвовать семантикой ради достижения желаемого отображения.

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