Вечная бета

12 января ’10

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

Архитектура

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

Меньше всего изменений пришлось на страницу «Об авторе», на которой добавилось несколько социальных сервисов и рабочий e-mail.

Дизайн

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

Технологии

Как бы это ни было сложно, но HTML-код сайта старается соответствовать черновику спецификации HTML5. Более того, пока даже получается проходить валидацию. И самое минимальное: отказ от XHTML, новый доктайп <!DOCTYPE HTML>, новая семантика языка <article>, <header>, <time>. По этой причине пока пользователи IE видят не самые приятные вещи, но почему так — чуть ниже.

Пересмотру подверглись некоторые элементы: фрагмент кода теперь состоит из элемента <pre> и <code>, по количеству строк:

<pre>
    <code></code>
    <code></code>
<pre>

…а уменьшенные версии картинок построены на элементе <figure>:

<figure>
    <dd><img src="…" alt="Описание"></dd>
    <dt>Описание</dt>
<figure>

На примеры использования таких картинок, а также работу новой версии Даркбокс, можно взглянуть в заметке Firefox против Photoshop. Ну и конечно же CSS 3: от пресловутых веб-шрифтов и border-radius до transition, из-за чего код местами распух от вендорных префиксов:

-webkit-transition:background-color .2s linear;
-moz-transition:background-color .2s linear;
-o-transition:background-color .2s linear;
transition:background-color .2s linear;

Также гораздо смелее стали использоваться селекторы: от простых E > E и E + E до E:first-of-type. К сожалению, с некоторыми конструкциями не справляется даже IE8.

Концепция

Но самое главное, чего хотелось добиться всем этим редизайном и рекодингом — это создание, так называемой, вечной беты. Весьма популярная вебдванольная концепция, надо сказать. К примеру, сейчас сайт прилично работает исключительно в последних версиях браузеров. В тех, что пораньше — сносно. А если говорить про IE, то там творится форменное безумие, которое и предстоит поправить на одном из этапов развития вечной беты. И хотя из посетителей этого сайта на долю IE приходится всего семь процентов людей и иных представителей человеческой расы, доступность для чтения нужно обеспечить всем. Та же история с версией для печати, мобильных устройств и даже микроформатами. После каждого этапа в развитии — публикация. Думаю, это будет интересно.

Семь процентов! Конец уже близок... Не могу поверить, что всё это веселье вокруг IE скоро закончится. Это ж сколько времени на это всё было потрачено, сколько гигабайт статей по этому поводу было написано и сколько матюков высказано.
А лет через 5 соберутся старпёры, и начнут рассказывать молодняку: "Эх, сынки. В наше время :first-child не работал, и приходилось через expression. Как? Вы не знаете что такое expression?"
Кстати, иконка возле заголовка "Комментарии" напомнила старую телегу.

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

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

Поздравляю с новым дизайном! Сайт стал легче и воздушнее))
Вот только узкий шрифт заголовков смотрится как-то странно.. Наверно потому, что не установлен шрифт Cuprum в системе.
Очень понравилась упрощённая структура сайта - лента записей со ссылкой "Ещё", как в Твиттере. Удобно.
Кнопка "Добавить" смотрится классно. И реализация понравилась.
А с чем связано введение элемента code по количеству строк? Это для нумерации строк?

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

Мне почему то кажется что не стоит в архиве внизу под записью на главной дублировать заголовок той записи что на главной.

Рубрики убраны зря. Поиск помогает только в том случае, если знаешь, чего ищешь. Есть такой кейс: «посмотреть, нет ли тут чего-то интересного на интересующую меня тему». Вот тут рубриктор и помогает.

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

Вадим, очень порадовал мой глаз обновленным и «беленьким чистеньким»™

Позволь отметить несколько моментов:
1. Странно, что поле поиска недоступно непосредственно с любой страницы.

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

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

4. OpenID будет? ;)

О, наконец-то светлый фон, и заметки теперь можно будет читать не только через RSS. ;-) Переход на HTML5, по-моему, является слегка преждевременным, но инициатива похвальна. Удачи, Вадим.

Алекс Дорохович, EOT будет вместе с поддержкой IE.

GreLI, Michael Yakovis, навигация точно будет развиваться, может появятся теги, а вот рубрик больше не хочется. Мне кажется лента заметок будет гораздо удобнее.

alex.kotomanov, да — без построчных <code> нумерацию не сделать.

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

miripiruni, Zigzag, OpenID + подписка на комментарии будут в том случае, если отыщутся приличные плагины. Те, что есть сейчас слишком много гадят в код, а для меня это недопустимо.

Не все знают песню про 7% :) Введёшь людей в заблуждение :)) А дизайн отличный, я смотрю теперь на свой и громко плачу :)

Каково логичное обоснование использования code для каждой строчки кода?

Белый фон — хорошо. Стало приятней.

BOLK, если бы все знали про песню — я бы не рискнул ;) А вообще и правда всего 7%, аудитория специфическая.

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

Вообще рубрики убраны зря. Тем, кто хочет почитать «на тему Zen Coding» — самое оно. Может сделать отдельную навигационную страницу?

Megazoll, строки копируются только в Opera. Safari и Firefox копируют только код. Хороший повод для багрепорта/фичереквеста.

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

miripiruni, тогда с тебя php-код для вывода умной даты, хе-хе :) Хотя думаю, что есть плагины, покопаюсь.

<header class="header" role="banner"></header>

Как по мне...это немного нарушает семантику

А вообще сайт очень порадовал, семантика на высоте.

И такое замечание, может вопрос. Я нигде не видел, чтобы после тега html ставили отступ. Месяца два уже ставлю этот отступ, мне это кажется удобным и более правильным, ведь далее идут вложенные элементы.

Все таки есть небольшие помарки и небольшие грубости :)

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

Насчёт <html> — исходник должен быть не фанатично вылизан, а, прежде всего, удобен в работе. Делать отступы везде, где есть вложенность — это фанатизм. Я, к примеру, не делаю отступов и для <tr>, поскольку для меня они не добавляют удобства.

С обновлением. Чисто и аккуратно.
Заголовок в посте ссылается саму на себя.
Особенно понравился эффект при наведении на логотип.

А вот страницу «Об авторе»-то как раз и нужно было исправить. «Может пригодится» — не хватает либо мягкого знака, либо пары запятых.

белый фон, черный текст -- это хорошо, это правильно.

Вадим, дизайн очень понравился. И сам принцип вечной бэты тоже — HTML5, CSS3 все дела :)

Единственно, может добавить к списку Поиск и Об авторе еще и Архив? :) Серьезно. Ведь не каждый будет скролить вниз. Например у меня было 2-х секундное замешательство с вопросом — А где же архив?

Кстати от скрытой навигации skipto решили отказаться?

Насчет отступов...наверно я фанатик :) Но для меня удобно, да никто из программистов, берущих мою верстку не жаловался никогда.

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

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

В файле script.js:
Не логично использована обертка

( function ( $ ) {
} ( jQuery ) );

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

(function($){
    $(function(){
        //Некий код
    });
})(jQuery)

А сам jQuery я бы грузил с гугла (межсайтовый кеш работает...)

Ну это все моё мнения и вкусы :)

<div class="header-wrap">
</div>

По-мойму этот блок лишний, у вас на нем только фон...но этот фон ведь можно повесить на body. Если я не прав, объясните почему.

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

Сергей К., спасибо за «мягкий знак». Текст столько раз был читан-перечитан, что я в нём не сомневался.

Геннадий Уханов, изначально там и была ссылка «Архив», но она казалась лишней, т.к. выглядела как пункт меню, а работала как якорь. Согласен, что нужно придумать что-то для прокрутки к архиву вниз. Частично меня утешает наличие архива на странице поиска. А skipto планируется добавить.

Алексей, насчёт элемента <header> вам стоит почитать черновик HTML 5, где описывается его применение. Я делал всё в рамках задуманной логики. Обёртка для скрипта была взята из официальной документации и лишена ненужного document.ready. Не очень понятно в чём здесь ошибка. Совместимость с другими библиотеками здесь не нужна.

Алексей, заголовок на странице поста и правда потерялся в шаблоне, теперь он на месте — спасибо! Насчёт header-wrap: у шапки два фона, поэтому пришлось бы класть их на <body> или одной картинкой или с чётким пиксельным смещением. Или же фиксировать высоту шапки в пикселах, тогда как сейчас высота шапки регулируется отступами ссылок в меню. В общем, это просто чуть более гибко и я не гнался за минимальным количеством элементов.

Ну с header в записях я все рано не согласен :) Пусть это рекомендация, я пока не согласен.

Ещё вы используете

<span></span>

в заголовке...а как же before или after?

Ошибка в JS...Вам нужно обернуть весь код в обертку. у вас же обернут только darkbox...document.ready у вас есть, но в кратком варианте...

Ну c JS, если совместимость не нужна, то строки вообще можно удалить :)

( function ( $ ) {
} ( jQuery ) );

Алексей, просто <header> — это универсальный заголовочный структурный блок. Экстра <span> вложен потому, что :before для ссылки некликабелен — что для лого, что для заголовков.

Насчёт JS: я к тому и говорил, что document.ready в кратком варианте. А darkbox был обёрнут потому, что пишется как отдельный плагин, вот я и вставил его как есть, уже поправил.

:before для ссылки некликабелен - не знал...странно...по логике вроде должен.
Все больше ни к чему придраться не могу, вы мастер! Моё почтение :)

Вадим, попробуйте немного изменить JS появления архива заметок...
http://code.pascalgames.net/code.php?id=41

Мне просто нечего было делать, это как чаепитие :)

Алексей, попробовал. В принципе, у меня так и работала самая первая реализация и этот вариант чуть понятнее для глаз. Но он сильно длиннее. Будем пробовать. Спасибо за тестирование и советы ;)

frame.stop();

Хотя бы поставьте...при клике по Ещё, просто если кликнуть по Ещё до завершения скрола, то последующей анимации скрола нет.

Главная очень понравилась. Сам концепт.
P.S.
А подписку на комментарии ты так и не сделал.

Максим, с подпиской есть два варианта: а) написать плагин самому б) найти хороший. На первое не времени (ибо писать буду неделю), а второго пока не существует. Сплошная ерунда, которая гадит в код, делает 5 страниц в админке, пытается залезть JS'ом в get_header(); и вообще…

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

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

Сергей, вы правильно поняли мою попытку сделать современную вёрстку, даже в ущерб совместимости со старыми браузерами ;)

Эх, Вадим,
а у меня в Google Chrome под макосью не работает пробел, а он мой основной элемент навигации :) Поздравляю с новым дизайном. Успехов в боях и вообще :)

Алексей, пробел, видимо, дизаблится скриптом Дакрбокса. Поправлю.

Мда... Действительно в ИЕ сайт выглядит стебненько )))

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

Я всё-таки планирую сделать поддержку IE, как минимум, начиная с 7-й версии. Не уверен, что хватит моральной устойчивости для поддержки IE6 :)

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

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

а мне понравилось, как теперь блог выглядит в IE 5 и 6.
Ничего не расползается, всё просто и аккуратно, без лишних наворотов.
В IE4 не понравились сообщения об ошибках скриптов.