Записи сентября 2008

Писать в блог — целая наука.

Подборка ссылок: virtual-lab.ru/72-faq-po-bloggingu.

Фотошоп, безусловно, гениальная и мощная программа. Только стоит, мягко говоря, недёшево, а старые версии (мне вот полюбилась CS, она же восьмая) уже не продаются. А вы, допустим, не хотите использовать пиратские версии.

Есть бесплатные программы, которые по отдельности или вместе вполне способны справиться с поставленными задачами при отстутствии фотошопа, а иногда и выполнить некоторые задачи сверх. (А если вы пользуетесь ещё и векторными программами, всё ещё сложнее: Иллюстратор, Корел или Фрихэнд тоже так уж дёшевы.)

В обзоре даются постоянно действующие ссылки на упомянутые программы (все запакованы в zip-архивы).

Программа Artweaver (9 Мб) переняла не только многие из функций фотошопа, но и его интерфейс: ориентироваться в нём совсем легко, если вы знакомы с Adobe Photoshop. Даже клавиатурные сокращения повторяются (Ctrl+T и другие). Из существенных минусов — неудобная работа с цветовыми режимами. Естественно, возможности беднее, но работает вполне корректно. Лучше всего использовать её не для рисования, а для обработки существующих изображений.

Для рисования очень удобными оказываются бесплатные же Artrage (1,5 Мб) и Project Dogwaffle (4,5 Мб). Первая (у неё достаточно необычный интерфейс) бесплатна именно в этой, первой версии. Artrage 2 весит раз в 6-7 больше и уже является платной. Dogwaffle же выглядит не так необычно, хотя и имеет свои особенности. Обе позволяют имитировать рисование настоящими кистями, карандашами, маркерами и т.п.

Из векторных программ хочется остановиться на пакете Creature House Expression (7,5 Мб). Она хоть и является платной, но компании, которая её выпускала, сейчас не существует: все последующие версии выпускает Microsoft. Из особенностей — малый вес, быстрая работа, имитация рисования кистями, лёгкая работа с кривыми Безье.

Наконец, стоит назвать две программки специального назначения. Одна из них — @icon sushi (640 Кб) — делает из изображений иконки в формате .ICO, а вторая — Photorazor (1 Мб) — позволяет пакетно обрабатывать файлы, например, создать для сотен изображений уменьшенные копии по заданным размерам.

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

Веб-мастеру постоянно оказываются нужны различные символы (©, «, ’), не входящие в стандартные алфавитные наборы. Часть из них мы вставляем мнемоническими кодами, часть цифровыми, часть Alt-комбинациями, а часть имитируем последовательностями вроде этой: (с). Чтобы держать всё это в одном месте, я подготовил небольшой справочник:

— в виде HTML-страницы

— то же самое в zip-архиве

Наслаждайтесь.

Internet Explorer 6 и ниже в числе прочего не умеет распознавать псевдокласс :hover для элементов, за исключением ссылок. А нам вдруг понадобилось стилями задать смену состояния для блоков или ячеек таблицы. Исправляем ситуацию: берём файлик csshover3.htc, кладём его в директорию, допустим, со скриптами (пусть это будет /js/), а в стилевой таблице пишем отдельное правило:

body {
	behavior: url('/js/csshover3.htc');
	}

Правило понимает только Эксплорер, но это нам и нужно. Опера, Сафари, Файрфокс и подобные Gecko-браузеры понимают :hover для любых элементов.
Первоначальный вариант файла написал Владимир Токмаков из Студии Лебедева. Мы с Андреем Филипповым исправили его: теперь он корректно обрабатывает и :hover на элементах, которым уже присвоены какие-то классы (ранее это работало с ошибками).

http://norsk.h14.ru/books/

Татарский разговорник

Изумительная аранжировка «Охоты на волков» Владимира Высоцкого:

Еду в троллейбусе, стою около сиденья, на котором сидит некая бабулька. По её движениям я понимаю, что сейчас будет её остановка, отхожу на полшага (дальше люди) вправо, чтобы пропустить.

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

Думаю, должен ли был я снять куртку и постелить ей под ноги.

Как много раздражения в людях.

Требуется работа в несколько этапов:
1. Создание основного шаблона (X)HTML
2. Создание CSS-файла с основными определениями
3. Вёрстка отдельных семантических блоков на HTML-странице
4. Описание классов и идентификаторов в CSS

1. Создание основного шаблона (X)HTML
Основной шаблон необходим, чтобы сразу забыть обо всей технической информации. Обычно я беру те сайты, которые уже сделал, беру оттуда основу, вычищаю всё остальное. Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<meta http-equiv="Content-Type" content="text/html; 
		charset=windows-1251">
	<title>{ПРИМЕЧАНИЕ:4}</title>
	<link rel="stylesheet" type="text/css" 
		href="/css/css.css" media="all" />
	<link rel="shortcut icon" type="image/x-icon" 
		href="/images/favicon.ico" />
	<link rel="alternate" type="application/rss+xml" 
		title="{ПРИМЕЧАНИЕ:4}" href="/alter/rss.xml">
</head>
<body id="{ПРИМЕЧАНИЕ:6}">
	<div id="general">
		<h1>Заголовок</h1>

		<ul id="navigate">
			<li id="li_1">
				<a id="menu_1" href="/1">первое</a>
			</li>
			<li id="li_2">
				<a id="menu_2" href="/2">второе</a>
			</li>
		</ul>
			
		<div id="content">

		</div>

	</div>	
</body>
</html>

Примечания:
1) Определение типа документа может быть различным. Поскольку очень редко удаётся при одновременной работе над проектом нескольких людей (особенно в разных организациях) отслеживать валидность кода, обходимся доктайпом, который является более вольным, чем стандартное для XHTML описание:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Если же использовать этот доктайп, то <head> необходимо изменить на
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
2) Два тэга отвечают за запрет кэширования браузером, особенно если сайт динамически изменяется.
3) Кодировка указана как пример: в случае с англоязычными сайтами логичнее указывать
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
или
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4) Содержимое тэга <title></title> логично генерировать автоматически (так же, как и заголовок ленты RSS) на основе настроек (в обоих случаях) и h1 страницы (про <title />).
5) Пути к CSS-файлам, картинкам и фидам лучше указывать относительно корня виртуального сервера (на что указывает слэш): в этом случае при Clean URLs типа /about, /news у сервера не возникнет недоумений относительно их расположения.
6) Для BODY следует генерировать ID. Удобнее всего это делать на основе URL с некоторыми изменениями. Например, в своих проектах на PHP я с помощью простой строковой замены меняю /web/articles/abcd на id="web_articles_abcd". В этом случае верстальщик получает полный контроль над специфическими элементами для каждой страницы, если они есть.
7) Внутри BODY обязательно должен быть элемент, который отвечает за всё содержимое страницы, а внутри него логично сделать блок для содержимого конкретной страницы (идентифицированный), заголовок h1 и заготовку для меню с помощью маркированного списка (каждый элемент списка можно снабдить ID).

2. Создание CSS-файла с основными определениями
В любом браузере есть встроенные стили, отличающиеся от браузера к браузеру. Чтобы получить максимальный контроль над видом элементов страницы, стоит произвести т.наз. «обнуление» некоторых стилей. Это делается в самом начале основного CSS-файла (в примере выше /css/css.css)

/* General Cleaning */

* {
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, Sans-Serif;
	font-size:8pt;
	font-weight:normal;
	font-style:normal;
	color:#131313;
	}
b, strong, h1, h2, h3 {
	font-weight:bold;
	}
i, em {
	font-style:italic;
	}
table, img {
	border:0;
	}
table {
	border-collapse:collapse;
	}
table td {
	padding:0px;
	vertical-align:top;
	}
table td {
	vertical-align:top;
	}

body {
	background:#EAB476;
	}

a, a:link, a:visited, a:active {
	color:#CC3300;
	text-decoration:none;
	}
a:hover {
	color:#FF6600;
	}

/* Special Elements */

Сначала убираются все отступы, выступы, интервалы между ячейками, нежелательные полужирные и курсивные начертания, неправильные выравнивания, переопределяются основные цвета.
Естественно, что весь текст становится одинакового размера, и кегль h1, h2 и h3 нужно назначать индивидуально исходя из стилистики сайта.
Цвета, размеры, шрифт, соль и перец по вкусу.

3. Вёрстка отдельных семантических блоков на HTML-странице
Обязательная программа выполнена, теперь произвольная. Допустим, дизайн уже нарисован. Следует определить, какие блоки в нём можно выделить только на основании семантики. Обычно это заголовок страницы, логотип, меню, основной содержательный блок, сведения правового характера. Они заключаются в отдельные блоки, которым присваиваются идентификаторы.
Следует использовать тэги, подходящие по семантике: т.е. для заголовков hX, для меню списки (добрая практика: семантика соответствует и удобно верстать), для цитат blockquote и т.п.
Лучше всего верстать, отключив таблицу стилей. В этом случае мы увидим белый (или серый, если мы гордо пользуемся Netscape 4) фон страницы с чёрным текстом и синими или лиловыми ссылками. Но мы чётко видим, что на странице есть, а чего нет. Вся семантика налицо, только оформления нет.
Не уверен насчёт семантики, но всё содержимое страницы в общем случае лучше заключить в один блок с ID, своего рода BODY-2. Это удобно для верстальщика, потому что позволит добиться любого типа вёрстки.
К сожалению, не всегда удаётся придерживаться чисто семантической вёрстки. Во-первых, есть логически выделяемые блоки, во-вторых, есть чрезмерно изобретательный дизайн.
Первая проблема не так страшна. Дело в том, что от страницы к странице повторяются целые комплексы блоков (шапка с логотипом и меню, например), что реализуется программной логикой. Удобно оборачивать такие комплексы в поименованные блоки. После этого на странице оказывается от двух до четырёх логических блоков, в которых есть деление на семантические блоки. Резать и верстальщику, и программисту очень удобно.
Сложнее со второй проблемой. Если дизайн изобилует нефункциональными элементами, которые без введения дополнительной разметки почти невозможно внедрить в вёрстку, приходится вводить несемантические и нелогические элементы. Это зло, потому что засоряет разметку, при редизайне от этих блоков приходится избавляться или display:none, при нарезке программистами в разные шаблоны какой-то элемент может потеряться, а если вёрстка с position:relative... Желательно несемантические элементы включить в семантические (с помощью CSS или лишней разматки) во избежание таких потерь.
Последнее замечание касается таблиц.
Верстальщики-блочники категорично отказываются от использования таблиц, хотя это тоже семантический элемент.
Очень много данных не только удобно, но и нужно представлять в виде таблиц: отчёты, прайсы, вывод результатов поиска по категориям с несколькими параметрами, статистика, сравнение показателей. Если смысл требует табличного представления данных, незачем имитировать их блоками с нагромождением float и clear в классах.

4. Описание классов и идентификаторов в CSS
Заключительный этап, самый долгий, который предполагает определение стилей для всех классов и идентификаторов, тестирование результата во всех браузерах, ругательства на IE и отладку. Ничего интересного, просто CSS и различия в реализации нужно знать.

От Насти Манно мне досталась эстафета: 5 любимых и 5 нелюбимых вещей. И я должен передать эстафету 5 другим блоггерам.

Я не буду говорить о любимых и нелюбимых людях — в первом случае список получится слишком большой, во втором слишком короткий ;-)

Часть I

1. Я люблю, когда люди любят своё дело. Когда могут жить работой, своим увлечением (хорошо, если оно совпадает с работой). Только в этом случае достигается профессионализм. Да, и сюда же — внимание к деталям. Это больше из области дизайна.

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

3. Люблю веб-дизайн во всём его многообразии (проектирование, дизайн, вёрстка, программирование...). Это такой многоплановый конструктор, что сложно найти для меня настолько же увлекательную деятельность.

4. Но она есть. Это лингвистика. Я люблю экзотические (и не очень) языки и всё, что с ними связано. Грамматика, типология, переписка, алфавиты, реконструкция. Народы и страны. Культуры.

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

Часть II

1. Не люблю компьютерные игры и молоко.

2. Ненавижу равнодушие и необязательность.

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

4. Не люблю терять время или всё, что заставляет меня его терять.

5. Не терплю самодовольство, излишние снобизм и амбиции, пустые заявления, громкие слова и всякие группировки, основанные на лозунгах и пустой болтовне.

Часть III

Перехватить эстафету и передать пятерым следующим должны:

1. Юрий «akella» Артюх (сжульничал)

2. Игорь Цыгырлаш (отказался)

3. Вика-Fjola (ответила)

4. Александр Макаров / Sam Dark (отозвался)

5. Оля Иванова-Макарова (усовершенствовала)

1. Для веб-ревю: concept007.ru.

2. Не забыть про статистику в LBl, в т.ч. откуда кто.

Придумал для своего одного проекта такую кулуарную регистрацию.

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

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

Ждите декабря.

Я не иду на встречу однокурсников.

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

Хочется отдыхать и писать книгу. Для себя, для души, которую, вероятно, даже никто не захочет издавать.

А осень не только на улице, но и в душе у меня.

P.S. Фото отсюда.

Я гляжу на некоторых студентов. Лет по 20 плюс-минус. И замечаю такую вещь: для них совершенно не критична глобальная потеря времени. Т.е. они могут часами сидеть в аське, спать, сколько хочется, гулять, просто так ничего не делать.

Боже, как этого иногда хочется.

Я помню: я в 97-02 гг. был такой же. Я ждал электричку по 2 часа, я слонялся, прогуливая пары. Вечерами тоже особо как-то не занимал себя.

А сейчас... Всегда спешу. Заполняю отчёты по минутам. Если в день что-то не сделал, считаю его потерянным. Не могу сидеть без дела. Не играю в компьютерные игры. А дни всё равно пролетают, недели и месяцы мимо, и успеваю я далеко не столько, сколько хочется.

И как правильно?

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

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

Ты окажешься в подшивке.

Стук в дверь, Р. открывает, здоровается с девушкой, принимает пакет и смотрит внутрь:

— Там не бомба?

Я:

— Нет. Эта девушка будет нам приносить еду каждое утро. Запомни её. Она безопасна.

Вл. Путин и Дж. Буш расслабляются под «Puttin in the Ritz» Тако.

С одной стороны, во фреймворке FairWork есть встроенный iLyte, который можно использовать и как новостную колонку, и как однопользовательский блог. Вся основная функциональность для этого есть, он достаточно настраиваемый.

С другой стороны, фреймворк позволяет расширять себя до бесконечности: модели, функции, модули управления и в крайнем случае структуры.

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

Пока формулируем задачи:

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

2. Утверждённый пользователь может добавлять записи, редактировать свои, комментировать любые. Администратор может редактировать и удалять любые записи и комментарии.

3. Пользователи могут готовить статьи и рекомендовать их для публикации администратору. До публикации статьи видимы только из системы управления.

(Запись будет дополняться.)

Сегодня, верстая нарисованный дизайн для этого блога, в очередной раз убедился в широких возможностях CSS и в глючности IE.

Для дизайна оказалось достаточно трёх картинок, одна из которых — 2 на 1 пиксель. Заставить их правильно координироваться друг относительно друга в Интернет Эксплорере оказалось не так сложно: основные проблемы возникли с мелочами (отступы абзацев, рамки). Вывод один, и глобальный: чем точнее указываешь вложенность селекторов, тем больше вероятность, что это будет работать везде, потому что правила в ИЕ перекрываются весьма прихотливо.

Калинка-Малинка.

Laying near the water you read your memory, 23 aged girl with fresh grass coloured eyes.

Listening to soft whisper of grass and trees near the river, you can edit your past.

Little jungle bells in your thoughts ask you if you want to save this piece of memory or not.

Lime of the grass around is connecting to the flowers images and returns the rainbow of lovely moments.

Lights on the water are indicating that your memory works in normal mode.

Laying you touch tender little flowers with your toes — you like walking barefoot.

Like a sky with water-colour little clouds you are dressed with unnoticeable white clothes.

Lazy afternoon gives you precious pearls of river sparks, that remain on your skin.

Look, there is a piece of your happiness and smile in every drop.

1. Собеседофобия. (готово)

2. Корпоративные праздники. (готово)

3. Боязнь начальства.

4. Про отношения на работе, дружба, например. (готово, блин, тоже)

5. Комфортная рабочая обстановка.

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

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

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

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

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

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