Redisign. Переделал тему WordPress.
Наконец-то, доделал новую тему для этого блога!
Главные изменения, коснулись сайдбара. Теперь он стал практически в два раза шире, что позволило добавить в него несколько новых блоков (например, «самое читаемое»).
Кроме того, теперь можно создавать цепочки комментариев (похожий принцип используют службы вроде habrahabr.ru). На мой взгляд, это гораздо удобнее стандартного способа добавления комментариев.
В общем, надеюсь, новый дизайн сделает чтение блога приятнее.
Все пожелания, замечания, советы и т.д. пишите в комментариях. Мне действительно будет очень интересно их почитать 
.
P.S. На скриншоте показан предыдущий вариант дизайна (щелкните по картинке чтобы увеличить).
P.P.S. Также хочется выразить благодарность Максиму за сборку и Slaff’у за руководство. А также отдельное спасибо Scratch’у за совет о доступности форм.
Понравилась статья? Подпишитесь на продолжение 
!
Добавьте эту страницу в 
Опубликовано в WordPress, Разное
Комментарии (26)
Вы можете отслеживать обсуждение записи с помощью RSS 2.0
Вы также можете оставить комментарий, или трекбек с Вашего сайта.
Оставить комментарий
Хорошо, да. Нужно будет у себя тоже сделать нормальную форму
Кстати, куда-то OneFace отвалился (говорит, movie not loaded). Но это, я так понимаю, на сервере проблемы…
Насчет цепочки комментариев — их нужно смотреть на вложенности в 20 штук, когда начнут вылазить проблемы.
Хотя да, "ветки обсуждения" — это классическая схема, и не только Хабр их использует (на самом деле, это применялось еще в тыща девятьсот надцатом году, в USENET конференциях (когда такие вот обсуждения вообще появились).
Просто тест комментария.
2Владимир: Если все пройдет нормально (или даже пройдет ненормально), всю ветку вложенных комментариев можно удалить.
Судя по всему, это не тот модуль, который я видел, например, у Татьяны Вукс
Да плагин другой. Я использую Yet another threaded Comments plugin.
А у нее - Brians Threaded Comments (судя по внешнему виду).
Принципиальной разницы, конечно, нет. Но у YATCP в документации очень подробно описано как его подстроить под свою тему.
20 штук это, конечно, хорошо, только я ограничил уровень вложенности шестью. После этого выводится сообщение "достигнут максимальный уровень вложенности" и все дальнейшие комментарии добавляются ниже (на том же уровне).
Кроме того, при двадцати отступ справа будет большим и комментарии сильно увеличатся по высоте.
Да и, по-моему, для этого блога такой уровень потребуется очень не скоро.
Уровни ответов имеют свойство плодиться и размножаться. Так как любое более-менее живое обсуждение не ограничивается 10 ответами с каждой стороны.
К слову о "юзабельности форм"
Я думаю, можно навесить маленький скриптик на форму отправки комментария, который бы не давал отправить форму, если поле "Сколько будет дважды два четыре" не заполнено.
Потому что уже столько, как я подозреваю, хороших комментариев пропало из-за того, что по нажатию Back со страницы с ошибкой комментарий не восстанавливался…
Спасибо, учту. Я просто использовал готовый плагин и не учел этот момент.
Вот, опять.
Только что хотел написать большой комментарий, почему мне Brians Threaded Comments нравится больше, забыл ввести "зеленая дудочка", и — все. Комментарий утерян.
А там две текстарии набралось
Доделал!
Теперь должно выводится сообщение обо всех незаполненных полях (кроме названия сайта, это поле необязательное).
Кстати, у меня при переходе со страницы с сообщением о незаполненном поле сохраняются все введенные значения (переход выполняется кнопкой "Назад", браузер - FF 2.0.0.11).
Ну, я преимущественно смотрю через IE (6 версия), потому что, увы, FF c выходом 2 ветки начал притормаживать (по сравнению с 1.5).
И иногда, при нажатии back, значение поля комментария просто не сохраняется.
Ну, теперь-то будет уже нормально (хотя такая раскраска — это слегка чересчур).
А именно:
1) При сабмите нужно подсвечивать _все_ неверные поля. А не по одному, в порядке незаполненности
2) Достаточно простой подсветки неправильного поля при помощи красной рамки. Делать кастомный бэкграунд — совершенно необязательно. Как пример подсветки полей могу посоветовать валидатор поля, встроенный в ExtJS.
(если я соберусь прикрутить такой валидатор к своему блогу — то я обязательно поделюсь кодом)
Да я, честно говоря, использовал готовый плагин (Comment Fileds JavaScript Validation).
.
Только добавил проверку поля с суммой, т.к. в стандартном варианте он проверяет только имя, eMail и комментарий.
А подсветка такая там по-умолчанию. Исправить ее не сложно, просто я еще не решил какой цвет для рамок выбрать. Бэкграунд уберу обязательно.
По-поводу подсветки всех полей. В целом я согласен, что нужно выводить все ошибки. Но в общем-то это довольно редкая ситуация, когда посетитель пропускает два поля из четырех (комментарий вряд ли кто-то не заполнит). Поэтому еще подумаю
Читер
С одной стороны — редкая, с другой — мало ли что. Мы ведь тоже понимаем, что текстридерами будет пользоваться один подписчик из тысячи, но в то же время делаем разметку, рассчитанную на это…
Тут есть один нюанс.
.
Если не сделать разметку под текстридер, посетитель может не понять как заполнить форму.
А сообщения об ошибках в форму будут выведены в любом случае. Разница только в том все вместе или по-отдельности. Кроме того, редко кто читает длинные сообщения об ошибках
Хм.
Я просто вспоминаю, как ходил получать кредит.
И сначала у меня взяли все документы, посмотрели, и сказали что нужно принести идентификационный код.
Когда я принес код, мне сказали, что нужно принести справку с места работы. Когда я получил эту справку, мне сказали, что она "неправильно оформлена" (правда, я так и не добился от них, как _правильно_ это оформлять — мне только намекнули, что подписи директора недостаточно, а нужна еще и подпись главбуха)…
Вот, показывать пользователю _по одной_ ошибке — равносильно этому
А насчет "читать длинные сообщения" — если поле просто подсвечено красным, это не так уже и длинно
И читать это не обязательно :))
Пример с кредитом хороший
Посмотрим. Переделать в общем-то несложно. Скрипт и проверки довольно простые.
Переделал.
.
Не сказать, чтобы стало значительно удобнее, но что-то в этом есть
Да, так лучше. А сообщение об ошибке делать всплывающим окошком (алертом) как раз необязательно.
Красная рамка уже сама по себе говорит о том, что поле заполнено неправильно.
В общем, я в понедельник сделаю валидатор на своем блоге (для ввода комментариев) и покажу, что именно я имею ввиду.
>> делать всплывающим окошком (алертом) как раз необязательно
Тут есть одна проблема. eMail может быть не заполнен, а может иметь неправильный формат. И то, и другое ошибки, но сообщения разные.
Ну, я не зря указывал именно на Ext-овский способ.
Там это сделано вообще красиво — сообщени об ошибке показывается в виде всплывающего окошка (при наведении).
И уже в нем показывается характер ошибки.
В нашем случае — можно писать тип ошибки рядом с окошком.
А лишний клик мышкой никого еще не радовал (в отличие от текста сбоку от поля, который никак не влияет на работоспособность остальных частей сайта)
Всю ветку комментариев прочитать не осилил
Дизайн этот мне больше нравится, чем тот что был.
У себя в блоге я поставил Brians Threaded Comments. Селект бокс нижний, по моему, лишний.
Кстати ругается на мой имейл, пришлось точку из него убрать…
Нижний селект бокс показывает к какому именно комментарию отправляется комментарий
В отличие от BTC, в котором форма перемещается под комментируемый текст, тут — форма всегда внизу, и иногда полезно знать, куда же твой текст отправится…
Ругаться на точку в мыле — это очень частая проблема со многими валидаторами. Они считают что мыло — это только (\w), хотя в некоторых случаях там может быть практически что угодно (хоть чучело). Вот, пример валидатора, в котором описываются некоторые особенности этих вот email адресов.
Да и RFC 822 говорит, что local-part (это то, что перед собакой) может содержать что угодно, если оно заключено в кавычки.
Да, кстати, горе мне горе.
Ссылку на RFC 822 стоит заменить на сылку на RFC 2822, как замещающий документ.
Это я прогнал, сознаюсь.
Я пробовал использовать Brians Threaded Comments. Но оказалось, что он хорошо вписывается в стандартную тему (или похожую). Естественно, переделать его можно как угодно… Но нормального описания я не нашел, а копаться в исходниках было лень
.
Кроме того, Brians Threaded Comments не сможет вставить форму под комментарий, если отключен JavaScript.
В моем случае, нужный комментарий можно выбрать в нижнем селект боксе.
P.S. Скрипт проверки email я обязательно исправлю. Честно говоря, забыл его протестировать
.
Да-да-да. Все тот же самый accessibility.
Только в случае отключенного JS не работает бОльшая часть сайтов. Так что JavaScript уже прочно вошел в нашу жизнь.
В случае же Brians Threaded Comments, да и здесь — может, стоит вставлять этот дропдаун только при отключенных скриптах? Тэг "noscript" вроде бы еще никто не отменял…
Да, все время одна и таже проблема… выбора
Несколько решений, несколько компромиссных вариантов. У каждого свои достоинства и недостатки…
Но, думаю, со временем по экспериментирую и выберу.
Хотя, я уже столько раз менял свои решения