Сумрачный блог Кирилла Панфилова

2010: I II III IV V VI VII VIII IX X XI XII

2009: I II III IV V VI VII VIII IX X XI XII

2008: I II III IV V VI VII VIII IX X XI XII

Записи марта 2009

Личностный рост и карьерное развитие

Священник предлагает монахине подвезти ее. Сев в машину, она закидывает ногу за ногу, так, что бедро обнажается. Священнику с трудом удается избежать аварии. Выровняв машину, он украдкой кладет руку ей на ногу. Монахиня говорит: «Отец, Вы помните Псалом 129?» Священник убирает руку. Но, поменяв передачу, он опять кладет руку ей на ногу. Монахиня повторяет: «Отец, Вы помните Псалом 129?». Священник извиняется: «Простите, сестра, но плоть слаба». Добравшись до монастыря, монахиня тяжело вздыхает и выходит. Приехав в церковь, священник находит Псалом 129. В нем говорится: «Иди дальше и ищи, выше ты найдешь счастье». Мораль: если Вы плохо знаете свою работу, многие возможности для развития пройдут прямо у Вас перед носом.

Обработка ошибок

При обработке страниц ошибок (при сборке их из фрагментов, как обычных динамических страниц) с помощью фреймворков нужно не забывать, что страница всё-таки должна отдавать ошибку 404, а не 200 (а именно ошибку 200 страница отдаёт, если она собрана правильно, даже при отсутствии необходимых файлов). Например, в PHP до любого вывода в браузер нужно отдать нужный заголовок:


header("HTTP/1.1 404 Not Found");


Поисковые системы будут счастливы.

Коды ответов HTTP сервера

Диапазон кодов — значение ответа
100-199 Информационный
200-299 Запрос клиента успешен
300-399 Запрос клиента переадресован, необходимы дальнейшие действия
400-499 Запрос клиента является неполным
500-599 Ошибки сервера



Ответы в диапазоне 100-199 — информационные; они показывают, что запрос клиента принят и обрабатывается.

100 Continue
Начальная часть запроса принята, и клиент может продолжать передачу запроса.

101 Switching Protocols
Сервер выполняет требование клиента и переключает протоколы в соответствии с указанием, данным в поле заголовка Upgrade.

Ответы в диапазоне 200-299 означают, что запрос клиента обработан успешно.

200 OK
Запрос клиента обработан успешно, и ответ сервера содержит затребованные данные.

201 Created
Этот код состояния используется в случае создания нового URI. Вместе с этим кодом результата сервер выдает заголовок Location, который содержит информацию о том, куда были помещены новые данные.

202 Accepted

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

203 Non-Authoritative Information
Информация в заголовке содержимого взята из локальной копии или у третьей стороны, а не с исходного сервера.

204 No Content
Ответ содержит код состояния и заголовок, но тело содержимого отсутствует. При получении этого ответа браузер не должен обновлять свой документ. Обработчик чувствительных областей изображений может возвращать этот код, когда пользователь щелкает на бесполезных или пустых участках изображения.

205 Reset Content
Браузер должен очистить форму, используемую в данной транзакции, для дополнительных входных данных. Полезен для CGI-приложений, требующих ввода данных.

206 Partial Content
Сервер возвращает лишь часть данных затребованного объема. Используется в ответе на запрос с указанием заголовка Range. Сервер должен указать диапазон, включенный в ответ, в заголовке Content-Range.

Код ответа в диапазоне 300-399 означает, что запрос не выполнен и клиенту нужно предпринять некоторые действия для удовлетворения запроса.

300 Multiple Choices
Затребованный URI обозначает более одного ресурса. Например, URI может обозначать документ, переведенный на несколько языков. В теле содержимого, возвращенном сервером, может находиться перечень более конкретных данных о том, как выбрать ресурс правильно.

301 Moved Permanently
Затребованный URI уже не используется сервером, и указанная в запросе операция не выполнена. Новое местонахождение затребованного документа указывается в заголовке Location. Во всех последующих запросах данного документа следует указывать новый URI.

302 Moved Temporarily
Затребованный URI перемещен, но лишь временно. Заголовок Location указывает на новое местонахождение. Сразу же после получения этого кода состояния клиент должен разрешить запрос при помощи нового URI, но во всех последующих запросах необходимо пользоваться старым URI.

303 See Other
Затребованный URI можно найти по другому URI (указанному в заголовке Location). Его следует выбрать методом GET по данному ресурсу.

304 Not Modified
Это код ответа на заголовок lf-Modified-Since, если URI не изменялся с указанной даты. Тело содержимого не посылается, и клиент должен использовать свою локальную копию.

305 Use Proxy
Доступ к затребованному URI должен осуществляться через proxy-сервер, указанный в заголовке Location.

Коды ответов в диапазоне 400-499 означают, что запрос клиента неполный. Эти коды могут также означать, что от клиента требуется дополнительная информация.

400 Bad Request

Означает, что сервер обнаружил в запросе клиента синтаксическую ошибку.

401 Unauthorized
Этот код результата, передаваемый с заголовком WWW-Authenticate, показывает, что пославший запрос пользователь не имеет необходимых полномочий и что при повторении запроса с указанием данного URI пользователь должен такие полномочия предоставить.

402 Payment Required
Требуется оплата. Этот код в HTTP еще не реализован.

403 Forbidden
Доступ запрещён. Запрос отклонен по той причине, что сервер не хочет (или не имеет возможности) ответить клиенту. Например, запрещён листинг директорий, и при обращении к директории без файлов выдаётся 403.

404 Not Found
Документ по указанному URI не существует.

405 Method Not Allowed

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

406 Not Acceptable
Ресурс, указанный клиентом по данному URI, существует, но не в том формате, который нужен клиенту. Вместе с этим кодом сервер выдает заголовки Content-Language, Content-Encoding и Content-Type.

407 Proxy Authentication Required
Proxy-сервер должен санкционировать запрос перед тем, как пересылать его. Используется с заголовком Proxy-Authenticate.

408 Request Time-out
Этот код ответа означает, что клиент не передал полный запрос в течение некоторого установленного промежутка времени (который обычно задается в конфигурации сервера) и сервер разрывает сетевое соединение.

409 Conflict
Данный запрос конфликтует с другим запросом или с конфигурацией сервера. Информацию о конфликте следует возвратить в информационной части ответа.

410 Gone
Данный код показывает, что затребованный URI больше не существует и навсегда удален с сервера.

411 Length Required
Сервер не примет запрос без указанного в нем заголовка Content-Length.

412 Precondition Failed
Результат вычисления условия, заданного в запросе одним или несколькими заголовками if. . ., представляет собой "ложь" (false).

413 Request Entity Too Large
Сервер не будет обрабатывать запрос, потому что его тело слишком велико.

414 Request-URI Too Long
Сервер не будет обрабатывать запрос, потому что его URI слишком длинный.

415 Unsupported Media Type
Сервер не будет обрабатывать запрос, потому что его тело имеет неподдерживаемый формат.

Коды ответов в диапазоне 500-599 показывают, что сервер столкнулся с ошибкой и, вероятно, не сможет выполнить запрос клиента.

500 Internal Server Error
При обработке запроса на сервере один из его компонентов (например, CGI-программа) выдал аварийный отказ или столкнулся с ошибкой конфигурации.

501 Not Implemented
Клиент запросил выполнение действия, которое сервер выполнить не может.

502 Bad Gateway
Сервер (или proxy-сервер) получил недопустимые ответы другого сервера (или proxy-сервера).

503 Service Unavailable
Данный код означает, что данная служба временно недоступна, но в будущем доступ к ней будет восстановлен. Если сервер знает, когда это произойдет, может быть также выдан заголовок Retry-After.

504 Gateway Time-out
Этот ответ похож на 408 (Request Time-out) , за исключением того, что шлюз или уполномоченный сервер превысил лимит времени.

505 HTTP Version not supported
Сервер не поддерживает версию протокола HTTP, использованную в запросе.

Характер звучания языка

Язык звучит характерно (то есть его звучание можно воспроизвести без знания языка) при соблюдении одного из двух условий:

1. сильные морфонологические ограничения (невозможность или ограниченная возможность заканчивать слово согласным, ограничения на типы слогов и т.п. — итальянский, финский, японский и т.п.)

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

По Drum Bun

На основе системы Drum Bun, а точнее, на основе альфа-сборки, уже работает один сайт. Но сама система в постоянном развитии.

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

Мысли по Берите.инфо

Добавить в Берите.инфо:

1. ключевые слова и проч. сео (сделано);

2. удалять устаревшие объявления;

3. важно: при выводе результатов поиска должно быть понятно, что искал (сделано);

4. редактирование объявлений;

5. редактирование рекламной области для объявлений каждого типа и для одного из пяти основных типов.

Берите.инфо

Запустил в тестовом режиме сайт Берите.инфо.

Базы там пока никакой нет, так что требуется тестирование системы и одновременно заполнение сайта объявлениями.

Если коротко — это сайт для бесплатного обмена объявлениями. Для поиска или добавления объявлений на самые разные темы не требуется регистрироваться или платить какие-то деньги. Платной услугой будет только публикация рекламы или тех объявлений, которые будут показываться наверху результатов поиска.

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

Монгольская каллиграфия

Изображение

Вот таким красивым было раньше монгольское письмо. Сейчас монголы пишут примерно вот так:

Монгол хэл нь монгол үндэстний эх хэл юм. Гарал үүслийн хувьд түрэг хэл, тунгус хэл зэрэгтэй адил Алтай хэлний язгуурт багтдаг. Солонгос хэл, япон хэлний адил нэр үг нь өгүүлбэрийн эхэнд, үйл үг нь өгүүлбэрийн сүүлд байдгаараа онцлогтой. Явцуу утгаараа Монгол улс дахь халх аялгуунд тулгуурлаж ярих хэлийг хэлэх бөгөөд өргөн утгаараа монгол үндэстний ярих хэл яриаг хэлнэ. Өөрөөр хэлбэл тусгаар тогтносон Монгол Улсын монголчууд болон, Xятад улсын нутаг дахь Өвөр Монголын Өөртөө Засах Орны Өвөр Монголчууд, Орос улс дахь Халимаг, Буриадуудын ярих хэлийг хэлдэг.

А здесь можно прочитать интересный пост про выставку каллиграфии с фотографиями.

Приятное

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

Дальше по iLyte

Скоро на этом блоге (и на официальном ресурсе) появятся ещё несколько вещей. В первую очередь:

1. постраничный вывод записей с главной страницы (но не так, как в вордпрессе и т.п.);

2. возможность добавлять по несколько тем к записям;

3. исправление бага с обрезкой записей в визуальном редакторе;

4. алфавитное расположение тем при создании новой записи;

5. более корректная система авторизации и просмотра закрытых записей.

Ariadna

Это, насколько я знаю, единственный браузер, который был создан отечественными разработчиками. У него нет поддержки JavaScript, зато уже есть закладки-избранное (не вкладки!) и англо-русский словарь. Понятное дело, никакого CSS Level 2.

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

Фото

Изображение

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

Привязанности

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


К этому блогу я тоже привязан. Вчера немного обновил поисковую систему и выложил на несколько серверов.

Урок по блочной вёрстке

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


1. Вёрстка будет блочная. Разделим страницу на несколько логических блоков, не связанных конкретно с этим дизайном, и не забудем обязательный основной элемент, обрамляющий остальные. Получились блоки: основной, блок заголовка-логотипа со ссылкой внутри, меню (и три идентифицированные ссылки внутри) и блок основного текста.


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


3. Все ссылки делаем блочными элементами (display:block), а внутри блока с меню три ссылки точно позиционируем. Текст ссылок скрываем из поля видимости: text-indent:-9999px.


4. Для основного блока делаем минимальную высоту — min-height. Современные браузеры это поймут, а Internet Explorer справится с задачей и без того. Ну, и соль-перец по вкусу, как водится: подчёркивание для ссылок при наведении, вытягивающийся при переполнении текстом блок для текста и т.п. Смотрим ещё раз результат.

NicEdit и другие редакторы

Долгое время я в своих проектах пользовался легковесным визуальным редактором NicEdit для изменения текстов на веб-страницах. У него обнаружился минус: некорректная работа в Файрфоксе и подобных браузерах — не читаются стили текущей страницы, и в окне редактирования текст выглядит не совсем так, как хотелось бы и как он должен выглядеть на результирующей странице. Пришлось для одного проекта взять FCKeditor и ставить вместо прежнего редактора, потому что многие администраторы сайта пользуются Файрфоксом. Получился казус: фреймворк, на котором построен сайт, весит около 200 Кб, а текстовый редактор — 1,5 Мб.

Блоги

Нашёл сразу два интересных блога:

My Life on .RU про туризм

и Кусочек науки — интересные записи по астрономии.

Поиск по записям

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

JavaScript-фреймворк: обращения к элементам любого типа

До окончания ещё далеко. Но уже произошли изменения. Теперь к элементам можно обращаться по именам тэгов, по идентификаторам, по классам и просто по this. Происходит корректная работа с содержимым элементов и с CSS любого элемента. Фреймворк изначально позиционируется как полностью кроссбраузерный и всегда таковым останется. При этом в коде нет и почти не предвидится веток кода для конкретных браузеров: я стараюсь найти универсальные решения, которые работают во всех современных браузерах: Internet Explorer 6+, Opera 9, Firefox, Chrome, Safari, K-Meleon и другие.

Примеры вызовов:


_hide('#abc');

скрывает блок с идентификатором 'abc',


_html('#abc', _trim(_html('#def')));

записывает в блок с идентификатором 'abc' содержимое блока идентификатором 'def', у которого предварительно по бокам обрезаются пробелы,


_css('#def', { color : '#F30', cursor : 'pointer', borderBottom : '1px dashed red', fontWeight : 'bold' });

оформляет блок с идентификатором 'def' стилями, указанными в фигурных скобках,


_css('body', { fontFamily : 'Arial', fontSize : '14pt', padding : '50px' });

применяет нужные стили к тэгу BODY,


_css('div.xxx', { color : 'blue' });

оформляет синим цветом все блоки DIV с CSS-классом 'xxx'.


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

Как я писал ранее, мой фреймворк не будет изолирован от остального JavaScript-кода, в связи с чем те вещи, которые и так легко доступны в языке, не снабжаются синонимами во фреймворке:

window.onload = function() {
_hide('#def');
_html('#abc', _trim(_html('#def')));
}

— по факту загрузки страницы выполняется функция, в которой делаются все вызовы на фреймворке.


Приятная мелочь: вместо того, чтобы писать

document.getElementById('abc'),

можно просто написать _('abc').

Цвет выделения на веб-страницах

Обратите внимание, что если вы выделяете текст на страницах этого блога и при этом не пользуетесь Internet Explorer, то цвет выделения бордовый. CSS Level 3 позволяет это сделать; работает в Opera, Firefox (и других Gecko-браузерах) и Safari с Chrome:


::selection {background: #600;} 
::-moz-selection {background: #600;}

Но если есть в кармане пачка сигарет...

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

Только во рту после этого мерзкий вкус.

Тайна третьей планеты

Изображение

Такими видят героев японские аниматоры. В частности, 10-летнюю Алису (или около того, но помнится, она была пятиклассницей или что-то вроде того). Громозека шикарен.

Мысли

Мне всегда не нравилось то, что в своих разработках программисты всегда ориентируются друг на друга. Да и в повседневной работе тоже. Если хранить информацию — только в БД. Если в javascript-фреймворке обращаться к объекту, то функция обязательно называется $ (рубль). Если программировать, то с ООП. Если верстать на блоках и CSS, то забыть о таблицах. И люди не особо задумываются, что это не всегда может быть оправдано — а в части случаев просто не проявляют фантазию.

Мой JS-фреймворк

Как я уже писал, я начал работу над javascript-фреймворком. Даже название уже придумал.

Написал первые несколько команд с использованием ООП, после чего принял решение полностью отказаться от объектно-ориентированного принципа. Код сократился прилично, когда я переписал функции с использованием обычного функционального подхода.

Правда, сейчас я только в начале работы: с помощью фреймворка можно получать доступ к объектам только по ID и пока никаким другим способом (но принцип, который позволит обращаться по this, классам и именам тэгов, я уже внедрил). Можно читать содержимое элементов или динамически записывать в них новое содержимое (обе задачи обрабатывает одна и та же функция). Есть функция типа trim(). Есть пара синонимов одной функции, которая скрывает или показывает элемент в зависимости от его текущего положения. Наконец, реализовано добавление произвольного количества CSS-свойств элементу.

Вызовы всегда очень короткие и ясные. Например,

_hide('def'); _html('abc', _html('def'));

скрывает элемент с ID "def", а его содержимое записывает в элемент с ID "abc". А с помощью

_css('abc', {color:'red', fontWeight:'bold'});

можно раскрасить элемент с ID "abc" в красный цвет и сделать его текст полужирным.

В подобном стиле будут оформляться все вызовы.

Греческий запах

Изображение

Иногда парфюмерия проходящих мимо способна вызвать целую цепочку воспоминаний. У одной молодой женщины были такие духи — они пахли так, как греческая жевательная резинка Στρουμφάκια (по-английски The Smurfs), а точнее, как вкладыши от неё. В детстве я коллекционировал их.


Весна меж тем, очевидно, прочитав мой пост, стала мягче и солнечнее. Сегодня, хоть и прохладно, но погода очень приятная.


Весна

Шёл на работу и вспомнил фразу из одного из рассказов Нодара Думбадзе:

...весна прошлась босоногой красавицей по свежей зеленой траве и свела с ума всех и вся — скот, птицу, растения*.

У нас весна в резиновых сапогах, под зонтиком или опасливо выглядывающая из-под козырьков подъездов, вялая после болезни-зимы, слезливая и тяжёлая.


__________________

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

Следуй за белым кроликом

Изображение

Интерпретации Кэрроловской Алисы часто уводят очень далеко от оригинала.

Web Linkarium

Здесь будут собираться ссылки по веб-разработке:


Сенорранет

Code is art

WellStyled

N.Design Studio

Энциклопедия хостинга

Overme

Проверка ТИЦ и PR


Со временем я их упорядочу.

Javascript-фреймворк

Мне очень нравится jQuery, но хочется своего и ещё более компактного решения.

Начал писать свой javascript-фреймворк. Пока он умеет мало, но уже сильно сокращает код. Из jQuery позаимствовал принцип: одна и та же функция может как читать свойства, так и изменять их (если переданы параметры).

Будет: поиск по ID, классам, тэгам и по this, динамическое изменение содержимого и CSS, генерация HTML, работа с AJAX, цепочки вызовов, анимация и drag-n-drop. То есть обычный набор, но очень компактно.

Фреймворк, вероятно, будет в открытом доступе с документацией.

Витязь на распутье: языки, фреймворки, «движки»

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

Первый вариант наиболее сложен. Требуется очень хорошо знать один из серверных языков программирования (знание языков разметки предполагается как само собой разумеющееся), осознавать опасности от потенциальных злоумышленников, знать все типичные ошибки посетителей и тех, кто будет обновлять сайт, обрабатывать все случаи отказов сервера и прочие нештатные ситуации и, конечно, сделать так, чтобы сайтом было удобно пользоваться, самому программисту не потребовалось бы делать много рутинной работы, а при редизайне следующий разработчик смог бы легко разобраться в структуре сайта. Наиболее распространенные ныне серверные языки программирования — PHP, Perl, JSP (или Java Server Pages), ASP и ASP.NET (скорее технология, чем самостоятельный язык, как и простая технология SSI), менее распространены языки Parser, ColdFusion и некоторые другие.

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

Второй путь, или использование фреймворков, удобен для тех, кто хорошо их знает. Фреймворк — это целостная библиотека кода на одном языке, которая позволяет не выполнять рутинную работу. Например, на языке PHP есть фреймворки Zend Framework, eZ Components, Symfony и некоторые другие; для Java (JSP) — Struts Framework и другие. Фреймворки обладают набором правил, которые позволяют использовать возможности серверных языков программирования, почти не работая с кодом на них: обращения к классам и функциям, переменным, циклам и массивам, запросы к БД берут на себя механизмы фреймворков, а разработчику нужно инициализировать эти действия по предусмотренным правилам. Плюс — увеличение скорости разработки. Минус — необходимость знания фреймворка. Кроме того, никто не мешает модифицировать код приложения и использовать дополнительные коды на любимом языке.

Наконец, третий путь предполагает либо отсутствие знания серверных языков программирования, либо отсутствие желания изобретать велосипед. То, что по-английски называется “engine”, в русском языке имеет пока только полужаргонное наименование «движок». Это тоже набор сценариев, но, в отличие от фреймворка — конструктора и помощника по своей сути — движки представляют собой законченную среду. Движок можно установить на сервер (установка предполагает загрузку на сервер нескольких десятков файлов и запуск инсталляционной страницы), настроить по своему вкусу, выбрать один из готовых шаблонов дизайна или нарисовать свой (в этом случае обычно требуется значительная правка CSS-файлов) и начать пользоваться. Есть многоцелевые движки вроде Joomla или Typo3, а есть специально предназначенные для ведения блогов — WordPress, Textpattern или MovableType. Блоги в настоящее популярны до такой степени, что многие оформляют свои сайты в виде дневников или новостных лент, жертвуя при этом удобством традиционной иерархической структуры. Плюсы очевидны: языков серверного программирования можно вообще не знать (знание позволяет работать с движками более гибко), вся работа сводится к настройке средствами самого движка и наполнением сайта информацией. Минусы — разработчик ограничивает себя уже готовой структурой (впрочем, в ряде случаев достаточно гибкой) и вынужден устанавливать такое количество файлов, какое ему вряд ли понадобится для конкретного сайта.

Веб-дизайн: история искусства

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

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

В книгах по истории искусства неизменно фигурирует Древний Шумер. Если разобраться, искусства как такового там почти не было. Были тексты, которые выполняли утилитарную роль (законы, хозяйственные записи), но литературы не было, за исключением эпоса о Гильгамеше и Энкиду, и то фольклорно-религиозного. Скульптуры и прочие визуальные виды искусства выполняли также религиозные функции. Об архитектуре речи не шло: дома просто должны были быть прочными.

На заре эры веб-дизайна страницы, оформленные для передачи по сетям, тоже носили чисто утилитарную функцию: представление информации. От обычных текстовых документов (txt, log и т.п.), где недопустимо даже оформление, HTML-страницы отличались наличием логики. С помощью особых меток — тэгов — можно дать понять программе просмотра страниц, где заголовок, где обычный абзац, а где, например, цитата. Важнейшим же отличием стало наличие гиперссылок, то есть фрагментов текста, по которым можно было щелкнуть для перехода на страницу, указанную в одном из параметров. Получалось, что страницы можно было связывать друг с другом. Если страницы находились в пределах одного домена, были связанными подобным образом, то они и составляли сайт. Тогда этого было достаточно. Об искусстве речи не шло в принципе.

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

Темное средневековье в искусстве оформления сайтов пришло с разработкой технологии «флэш» (Flash). Технология изначально оказалась многообещающей и поражающей своими возможностями. Точно так же, как Стив Джобс, один из основателей Apple, на вопрос о том, зачем столько красивых, но по сути бесполезных эффектов в система MacOS, ответил “Because we can” («Потому что мы можем»), так и флэш-разработчики реализовывали на своих сайтах все знания, которые получали о любимой технологии. В результате и ролики получались тяжелые, и их эстетическая ценность не всегда была высока, и, что главное, нарушался принцип главенства полезного: для загрузки новости в 4 Кб иногда требовалось дождаться загрузки двухсот килобайтов флэш-ролика.

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

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

Если отвлечься от шаблонных сайтов (шапка и 2-3 колонки с текстами, фотографиями и ссылками), которые существовали и будут существовать, то проекты, создатели которых претендуют на хороший дизайн, начали понимать правильную расстановку приоритетов примерно тогда, когда информационные потоки на сайтах начали выходить из берегов. Тексты статей и новостей, чаты, форумы, блоги, почтовые сервисы, сервисы по обмену фотографиями, видео и музыкой, RSS, комментарии пользователей, расписания, статистика, рейтинги и многое другое — все это нужно каким-то образом упорядочивать. С точки зрения программной логики упорядочивать научились давно: принцип разделения информации, оформления и программной логики является не просто правилом хорошего тона, а необходимым правилом, благодаря которому дизайнеры могут трудиться отдельно, программисты отдельно, а информация не будет страдать в любом случае. Важно, чтобы упорядочена информация была и в смысле дизайна: страница должна не просто радовать глаз, а быть логически структурированной. Если вы встретили сайт, который отвечает таким требованиям — знайте, что он относится к эпохе нового времени.

Однако это не значит, что в интернете можно встретить только ясные, логичные, простые и симпатичные сайты…

О валидной вёрстке

В погоне за чистотой кода вёрстки (валидностью) веб-разработчики часто забывают о пользователе. Я совсем не противник чистого кода, но не в ущерб конечному потребителю.

Представьте: посетитель заходит на сайт с помощью Internet Explorer, а там колонка с информацией съехала вниз. И ему вряд ли будут утешением уверения разработчика, что код соответствует модели Strict и с точки зрения семантики является безукоризненным. Вёрстка-то ползёт!

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

И ещё: ссылки на валидаторы и указания на Best viewed with... являются самыми бесполезными фрагментами сайта.

Верстая сайт, нужно смотреть на него глазами пользователей, а не валидатором.

Обычное

Люди слышат и видят только то, что хотят слышать и видеть. Не больше.

Разработка своей CMS

Какие сейчас самые популярные системы управления контентом? Из коммерческих — Битрикс, из бесплатных — Joomla, Drupal и Wordpress, причём две последние в силу блогоориентированности явные лидеры. Ещё можно упомянуть Typo3, Textpattern, MediaWiki, DataLife Engine.

Большинство из них претендует на звание CMF (Content Management Framework), так как обладают специфической структурой, расширяемы, для них пишутся сторонние модули. А значит, они, как фреймворки, должны позволять легко достраивать структуру.

Но хочешь сделать хорошо (= как нужно тебе) — сделай сам.

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

Сейчас я занимаюсь новой CMF (одна уже используется несколькими сайтами), для которой избрал два принципа: разделение вещей, над которыми теоретически должны работать разные люди, и иерархическая структуризация в каждой из подсистем.

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

Иерархическая структуризация заключается в следующем.

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

2. Шаблоны должны представлять собой чистый (X)HTML без включения программного кода. Единственное исключение — метки для вставки фрагментов. Например, {html:title} для вставки заголовка страницы. Такие метки должны обрабатываться на уровне программной логики — это единственное их место пересечения. Любые метки могут вызывать другие шаблоны, вложенные, причём разные в зависимости от каких-то условий. Например, {html:content} может в зависимости от типа страницы вызывать фрагмент содержимого, оформленного родовыми или частными шаблонами. Тип оформления конкретными шаблонами определяется в настройках (реестре связок шаблонов и страниц). Получается, что есть более общие шаблоны, используемые всеми страницами, и частные.

3. С дизайном всё довольно ясно. В идеале это CSS + графика (и опционально флэш и javascript для частных задач).

4. Настройки. Самое спорное место в этой схеме. Под настройками понимаются все реестры, от системных (доступ к БД, системный e-mail и проч.), списков пользователей и паролей до частных, определяемых программной логикой веб-приложения (например, списки переадресаций). В частности, хранить ли альтернативные адреса страниц в БД рядом с контентом страниц и указаниями их URL или в отдельных реестрах? Для своего CMF я решил эту задачу как хранение реестров отдельно.

5. Контент. По идее, может быть не структуризован, если за эту задачу отвечают реестры соответствий.

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

Тестирование новых плейеров

1.
Из плюсов: не нужны конфигурационные файлы, маленький, настраивается прямо в коде записи. Из минусов: нет регулятора громкости.



2.
Плюсы и минусы те же.

Представьтесь, пожалуйста

Забавно. На этот мой блог есть ссылки только на моём сайте, у Фьёлы, в небольшом каталоге Насти Манно, у Насти Кэрролл да через Блогапп. Ну, и ещё на паре сайтов, может быть, потому что особо я как-то не рекламируюсь.

Кстати, у Насти обновление дизайна блога, на мой взгляд, очень симпатично. Жизнерадостно, в её стиле, и при этом что-то гранджевое. 

Так вот я о чём. Вместе с ботами каждый день ко мне заходят до тысячи посетителей. Очевидно, некоторые по несколько раз. Но всё равно неожиданно. 

Хочу вас попросить. Если вы читаете эту запись, напишите пару слов в комментариях: как вы меня нашли, есть ли что-то интересное для вас? Буду очень благодарен.

Блогообмен

BlogUpp — полезный сервис. Мало того, что он поднимает посещаемость своего блога, да ещё позволяет находить интересные сайты, не тратя время на собственно поиск. 

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

Через эту систему я нашёл как минимум два интересных блога: один про интересные идеи для бизнеса, а второй посвящён музыке. Они информативные и хорошо оформлены.