Redisign. Переделал тему WordPress.

10 января, 2008

Старый дизайн (миниатюра)

Наконец-то, доделал новую тему для этого блога!

Главные изменения, коснулись сайдбара. Теперь он стал практически в два раза шире, что позволило добавить в него несколько новых блоков (например, «самое читаемое»).

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

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

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

P.S. На скриншоте показан предыдущий вариант дизайна (щелкните по картинке чтобы увеличить).

P.P.S. Также хочется выразить благодарность Максиму за сборку и Slaff’у за руководство. А также отдельное спасибо Scratch’у за совет о доступности форм.

Интересно почитать

Какие стрижки сейчас в моде

Понравилась статья? Подписывайтесь на продолжение rss link !

Или на мой твиттер twitter link

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в WordPress, Разное View Comments

]]>
  • Если вы интересуетесь знать все о Москве, то предлагаю вашем вниманию сайт
    Новости МО!

    На нашем сайте только самые последнии новости из жизни самого большого города в России =)
  • Всю ветку комментариев прочитать не осилил :)
    Дизайн этот мне больше нравится, чем тот что был.
    У себя в блоге я поставил Brians Threaded Comments. Селект бокс нижний, по моему, лишний.
    Кстати ругается на мой имейл, пришлось точку из него убрать...
  • Я пробовал использовать Brians Threaded Comments. Но оказалось, что он хорошо вписывается в стандартную тему (или похожую). Естественно, переделать его можно как угодно... Но нормального описания я не нашел, а копаться в исходниках было лень :-) .

    Кроме того, Brians Threaded Comments не сможет вставить форму под комментарий, если отключен JavaScript.
    В моем случае, нужный комментарий можно выбрать в нижнем селект боксе.

    P.S. Скрипт проверки email я обязательно исправлю. Честно говоря, забыл его протестировать :-) .
  • Brians Threaded Comments не сможет вставить форму под комментарий, если отключен JavaScript.


    Да-да-да. Все тот же самый accessibility.
    Только в случае отключенного JS не работает бОльшая часть сайтов. Так что JavaScript уже прочно вошел в нашу жизнь.

    В случае же Brians Threaded Comments, да и здесь -- может, стоит вставлять этот дропдаун только при отключенных скриптах? Тэг "noscript" вроде бы еще никто не отменял...
  • Да, все время одна и таже проблема... выбора :-)

    Несколько решений, несколько компромиссных вариантов. У каждого свои достоинства и недостатки...

    Но, думаю, со временем по экспериментирую и выберу.
    Хотя, я уже столько раз менял свои решения :-)
  • Нижний селект бокс показывает к какому именно комментарию отправляется комментарий :) В отличие от BTC, в котором форма перемещается под комментируемый текст, тут -- форма всегда внизу, и иногда полезно знать, куда же твой текст отправится...
    Ругаться на точку в мыле -- это очень частая проблема со многими валидаторами. Они считают что мыло -- это только (\w), хотя в некоторых случаях там может быть практически что угодно (хоть чучело). Вот, пример валидатора, в котором описываются некоторые особенности этих вот email адресов.
    Да и RFC 822 говорит, что local-part (это то, что перед собакой) может содержать что угодно, если оно заключено в кавычки.
  • Да, кстати, горе мне горе.
    Ссылку на RFC 822 стоит заменить на сылку на RFC 2822, как замещающий документ.
    Это я прогнал, сознаюсь.
  • К слову о "юзабельности форм" :)
    Я думаю, можно навесить маленький скриптик на форму отправки комментария, который бы не давал отправить форму, если поле "Сколько будет дважды два четыре" не заполнено.
    Потому что уже столько, как я подозреваю, хороших комментариев пропало из-за того, что по нажатию 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-овский способ.
    Там это сделано вообще красиво -- сообщени об ошибке показывается в виде всплывающего окошка (при наведении).
    И уже в нем показывается характер ошибки.

    В нашем случае -- можно писать тип ошибки рядом с окошком.
    А лишний клик мышкой никого еще не радовал (в отличие от текста сбоку от поля, который никак не влияет на работоспособность остальных частей сайта)
  • Пример с кредитом хороший :-)
    Посмотрим. Переделать в общем-то несложно. Скрипт и проверки довольно простые.
  • Хорошо, да. Нужно будет у себя тоже сделать нормальную форму :)
    Кстати, куда-то OneFace отвалился (говорит, movie not loaded). Но это, я так понимаю, на сервере проблемы... :(

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

    Уровни ответов имеют свойство плодиться и размножаться. Так как любое более-менее живое обсуждение не ограничивается 10 ответами с каждой стороны.
  • Просто тест комментария.
    2Владимир: Если все пройдет нормально (или даже пройдет ненормально), всю ветку вложенных комментариев можно удалить.
  • Судя по всему, это не тот модуль, который я видел, например, у Татьяны Вукс
  • Да плагин другой. Я использую Yet another threaded Comments plugin.
    А у нее - Brians Threaded Comments (судя по внешнему виду).
    Принципиальной разницы, конечно, нет. Но у YATCP в документации очень подробно описано как его подстроить под свою тему.
blog comments powered by Disqus ]]>