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, Разное Комментарии (54) »

]]>

Вы можете оставить комментарий. Трекбеки закрыты.

  • http://blog.scratch613.info/ Scratch

    Хорошо, да. Нужно будет у себя тоже сделать нормальную форму :)
    Кстати, куда-то OneFace отвалился (говорит, movie not loaded). Но это, я так понимаю, на сервере проблемы… :(

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

    • http://blog.scratch613.info/ Scratch

      Просто тест комментария.
      2Владимир: Если все пройдет нормально (или даже пройдет ненормально), всю ветку вложенных комментариев можно удалить.

      • http://blog.scratch613.info/ Scratch

        Судя по всему, это не тот модуль, который я видел, например, у Татьяны Вукс

        • http://www.simplecoding.org/ Владимир

          Да плагин другой. Я использую Yet another threaded Comments plugin.
          А у нее – Brians Threaded Comments (судя по внешнему виду).
          Принципиальной разницы, конечно, нет. Но у YATCP в документации очень подробно описано как его подстроить под свою тему.

    • http://www.simplecoding.org/ Владимир

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

      • http://blog.scratch613.info/ Scratch

        Да и, по-моему, для этого блога такой уровень потребуется очень не скоро.

        Уровни ответов имеют свойство плодиться и размножаться. Так как любое более-менее живое обсуждение не ограничивается 10 ответами с каждой стороны.

  • http://blog.scratch613.info Scratch

    Хорошо, да. Нужно будет у себя тоже сделать нормальную форму :)
    Кстати, куда-то OneFace отвалился (говорит, movie not loaded). Но это, я так понимаю, на сервере проблемы… :(

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

    • http://blog.scratch613.info Scratch

      Просто тест комментария.
      2Владимир: Если все пройдет нормально (или даже пройдет ненормально), всю ветку вложенных комментариев можно удалить.

      • http://blog.scratch613.info Scratch

        Судя по всему, это не тот модуль, который я видел, например, у Татьяны Вукс

        • http://www.simplecoding.org/ Владимир

          Да плагин другой. Я использую Yet another threaded Comments plugin.
          А у нее – Brians Threaded Comments (судя по внешнему виду).
          Принципиальной разницы, конечно, нет. Но у YATCP в документации очень подробно описано как его подстроить под свою тему.

    • http://www.simplecoding.org/ Владимир

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

      • http://blog.scratch613.info Scratch

        Да и, по-моему, для этого блога такой уровень потребуется очень не скоро.

        Уровни ответов имеют свойство плодиться и размножаться. Так как любое более-менее живое обсуждение не ограничивается 10 ответами с каждой стороны.

  • http://blog.scratch613.info/ Scratch

    К слову о "юзабельности форм" :)
    Я думаю, можно навесить маленький скриптик на форму отправки комментария, который бы не давал отправить форму, если поле "Сколько будет дважды два четыре" не заполнено.
    Потому что уже столько, как я подозреваю, хороших комментариев пропало из-за того, что по нажатию Back со страницы с ошибкой комментарий не восстанавливался…

    • http://www.simplecoding.org/ Владимир

      Спасибо, учту. Я просто использовал готовый плагин и не учел этот момент.

      • http://blog.scratch613.info/ Scratch

        Вот, опять.
        Только что хотел написать большой комментарий, почему мне Brians Threaded Comments нравится больше, забыл ввести "зеленая дудочка", и — все. Комментарий утерян.
        А там две текстарии набралось :(

        • http://www.simplecoding.org/ Владимир

          Доделал! :-)
          Теперь должно выводится сообщение обо всех незаполненных полях (кроме названия сайта, это поле необязательное).

          Кстати, у меня при переходе со страницы с сообщением о незаполненном поле сохраняются все введенные значения (переход выполняется кнопкой "Назад", браузер – FF 2.0.0.11).

        • http://blog.scratch613.info/ Scratch

          Ну, я преимущественно смотрю через IE (6 версия), потому что, увы, FF c выходом 2 ветки начал притормаживать (по сравнению с 1.5).

          И иногда, при нажатии back, значение поля комментария просто не сохраняется.
          Ну, теперь-то будет уже нормально (хотя такая раскраска — это слегка чересчур).
          А именно:
          1) При сабмите нужно подсвечивать _все_ неверные поля. А не по одному, в порядке незаполненности
          2) Достаточно простой подсветки неправильного поля при помощи красной рамки. Делать кастомный бэкграунд — совершенно необязательно. Как пример подсветки полей могу посоветовать валидатор поля, встроенный в ExtJS.
          (если я соберусь прикрутить такой валидатор к своему блогу — то я обязательно поделюсь кодом) :)

        • http://www.simplecoding.org/ Владимир

          Да я, честно говоря, использовал готовый плагин (Comment Fileds JavaScript Validation).
          Только добавил проверку поля с суммой, т.к. в стандартном варианте он проверяет только имя, eMail и комментарий.
          А подсветка такая там по-умолчанию. Исправить ее не сложно, просто я еще не решил какой цвет для рамок выбрать. Бэкграунд уберу обязательно.
          По-поводу подсветки всех полей. В целом я согласен, что нужно выводить все ошибки. Но в общем-то это довольно редкая ситуация, когда посетитель пропускает два поля из четырех (комментарий вряд ли кто-то не заполнит). Поэтому еще подумаю :?: .

        • http://blog.scratch613.info/ Scratch

          я, честно говоря, использовал готовый плагин

          Читер :)

          Но в общем-то это довольно редкая ситуация, когда посетитель пропускает два поля из четырех

          С одной стороны — редкая, с другой — мало ли что. Мы ведь тоже понимаем, что текстридерами будет пользоваться один подписчик из тысячи, но в то же время делаем разметку, рассчитанную на это… :)

        • http://www.simplecoding.org/ Владимир

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

        • http://blog.scratch613.info/ Scratch

          Хм.
          Я просто вспоминаю, как ходил получать кредит.
          И сначала у меня взяли все документы, посмотрели, и сказали что нужно принести идентификационный код. :)
          Когда я принес код, мне сказали, что нужно принести справку с места работы. Когда я получил эту справку, мне сказали, что она "неправильно оформлена" (правда, я так и не добился от них, как _правильно_ это оформлять — мне только намекнули, что подписи директора недостаточно, а нужна еще и подпись главбуха)…

          Вот, показывать пользователю _по одной_ ошибке — равносильно этому :)

          А насчет "читать длинные сообщения" — если поле просто подсвечено красным, это не так уже и длинно :)
          И читать это не обязательно :) )

        • http://www.simplecoding.org/ Владимир

          Пример с кредитом хороший :-)
          Посмотрим. Переделать в общем-то несложно. Скрипт и проверки довольно простые.

        • http://www.simplecoding.org/ Владимир

          Переделал.
          Не сказать, чтобы стало значительно удобнее, но что-то в этом есть :-) .

        • http://blog.scratch613.info/ Scratch

          Да, так лучше. А сообщение об ошибке делать всплывающим окошком (алертом) как раз необязательно.
          Красная рамка уже сама по себе говорит о том, что поле заполнено неправильно.

          В общем, я в понедельник сделаю валидатор на своем блоге (для ввода комментариев) и покажу, что именно я имею ввиду.

        • http://www.simplecoding.org/ Владимир

          >> делать всплывающим окошком (алертом) как раз необязательно

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

        • http://blog.scratch613.info/ Scratch

          Ну, я не зря указывал именно на Ext-овский способ.
          Там это сделано вообще красиво — сообщени об ошибке показывается в виде всплывающего окошка (при наведении).
          И уже в нем показывается характер ошибки.

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

  • http://blog.scratch613.info Scratch

    К слову о "юзабельности форм" :)
    Я думаю, можно навесить маленький скриптик на форму отправки комментария, который бы не давал отправить форму, если поле "Сколько будет дважды два четыре" не заполнено.
    Потому что уже столько, как я подозреваю, хороших комментариев пропало из-за того, что по нажатию Back со страницы с ошибкой комментарий не восстанавливался…

    • http://www.simplecoding.org/ Владимир

      Спасибо, учту. Я просто использовал готовый плагин и не учел этот момент.

      • http://blog.scratch613.info Scratch

        Вот, опять.
        Только что хотел написать большой комментарий, почему мне Brians Threaded Comments нравится больше, забыл ввести "зеленая дудочка", и — все. Комментарий утерян.
        А там две текстарии набралось :(

        • http://www.simplecoding.org/ Владимир

          Доделал! :-)
          Теперь должно выводится сообщение обо всех незаполненных полях (кроме названия сайта, это поле необязательное).

          Кстати, у меня при переходе со страницы с сообщением о незаполненном поле сохраняются все введенные значения (переход выполняется кнопкой "Назад", браузер – FF 2.0.0.11).

        • http://blog.scratch613.info Scratch

          Ну, я преимущественно смотрю через IE (6 версия), потому что, увы, FF c выходом 2 ветки начал притормаживать (по сравнению с 1.5).

          И иногда, при нажатии back, значение поля комментария просто не сохраняется.
          Ну, теперь-то будет уже нормально (хотя такая раскраска — это слегка чересчур).
          А именно:
          1) При сабмите нужно подсвечивать _все_ неверные поля. А не по одному, в порядке незаполненности
          2) Достаточно простой подсветки неправильного поля при помощи красной рамки. Делать кастомный бэкграунд — совершенно необязательно. Как пример подсветки полей могу посоветовать валидатор поля, встроенный в ExtJS.
          (если я соберусь прикрутить такой валидатор к своему блогу — то я обязательно поделюсь кодом) :)

        • http://www.simplecoding.org/ Владимир

          Да я, честно говоря, использовал готовый плагин (Comment Fileds JavaScript Validation).
          Только добавил проверку поля с суммой, т.к. в стандартном варианте он проверяет только имя, eMail и комментарий.
          А подсветка такая там по-умолчанию. Исправить ее не сложно, просто я еще не решил какой цвет для рамок выбрать. Бэкграунд уберу обязательно.
          По-поводу подсветки всех полей. В целом я согласен, что нужно выводить все ошибки. Но в общем-то это довольно редкая ситуация, когда посетитель пропускает два поля из четырех (комментарий вряд ли кто-то не заполнит). Поэтому еще подумаю :?: .

        • http://blog.scratch613.info Scratch

          я, честно говоря, использовал готовый плагин

          Читер :)

          Но в общем-то это довольно редкая ситуация, когда посетитель пропускает два поля из четырех

          С одной стороны — редкая, с другой — мало ли что. Мы ведь тоже понимаем, что текстридерами будет пользоваться один подписчик из тысячи, но в то же время делаем разметку, рассчитанную на это… :)

        • http://www.simplecoding.org/ Владимир

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

        • http://blog.scratch613.info Scratch

          Хм.
          Я просто вспоминаю, как ходил получать кредит.
          И сначала у меня взяли все документы, посмотрели, и сказали что нужно принести идентификационный код. :)
          Когда я принес код, мне сказали, что нужно принести справку с места работы. Когда я получил эту справку, мне сказали, что она "неправильно оформлена" (правда, я так и не добился от них, как _правильно_ это оформлять — мне только намекнули, что подписи директора недостаточно, а нужна еще и подпись главбуха)…

          Вот, показывать пользователю _по одной_ ошибке — равносильно этому :)

          А насчет "читать длинные сообщения" — если поле просто подсвечено красным, это не так уже и длинно :)
          И читать это не обязательно :) )

        • http://www.simplecoding.org/ Владимир

          Пример с кредитом хороший :-)
          Посмотрим. Переделать в общем-то несложно. Скрипт и проверки довольно простые.

        • http://www.simplecoding.org/ Владимир

          Переделал.
          Не сказать, чтобы стало значительно удобнее, но что-то в этом есть :-) .

        • http://blog.scratch613.info Scratch

          Да, так лучше. А сообщение об ошибке делать всплывающим окошком (алертом) как раз необязательно.
          Красная рамка уже сама по себе говорит о том, что поле заполнено неправильно.

          В общем, я в понедельник сделаю валидатор на своем блоге (для ввода комментариев) и покажу, что именно я имею ввиду.

        • http://www.simplecoding.org/ Владимир

          >> делать всплывающим окошком (алертом) как раз необязательно

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

        • http://blog.scratch613.info Scratch

          Ну, я не зря указывал именно на Ext-овский способ.
          Там это сделано вообще красиво — сообщени об ошибке показывается в виде всплывающего окошка (при наведении).
          И уже в нем показывается характер ошибки.

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

  • http://blog.sribna.com/ Yuriy

    Всю ветку комментариев прочитать не осилил :)
    Дизайн этот мне больше нравится, чем тот что был.
    У себя в блоге я поставил Brians Threaded Comments. Селект бокс нижний, по моему, лишний.
    Кстати ругается на мой имейл, пришлось точку из него убрать…

    • http://blog.scratch613.info/ Scratch

      Нижний селект бокс показывает к какому именно комментарию отправляется комментарий :) В отличие от BTC, в котором форма перемещается под комментируемый текст, тут — форма всегда внизу, и иногда полезно знать, куда же твой текст отправится…
      Ругаться на точку в мыле — это очень частая проблема со многими валидаторами. Они считают что мыло — это только (w), хотя в некоторых случаях там может быть практически что угодно (хоть чучело). Вот, пример валидатора, в котором описываются некоторые особенности этих вот email адресов.
      Да и RFC 822 говорит, что local-part (это то, что перед собакой) может содержать что угодно, если оно заключено в кавычки.

      • http://blog.scratch613.info/ Scratch

        Да, кстати, горе мне горе.
        Ссылку на RFC 822 стоит заменить на сылку на RFC 2822, как замещающий документ.
        Это я прогнал, сознаюсь.

    • http://www.simplecoding.org/ Владимир

      Я пробовал использовать Brians Threaded Comments. Но оказалось, что он хорошо вписывается в стандартную тему (или похожую). Естественно, переделать его можно как угодно… Но нормального описания я не нашел, а копаться в исходниках было лень :-) .

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

      P.S. Скрипт проверки email я обязательно исправлю. Честно говоря, забыл его протестировать :-) .

      • http://blog.scratch613.info/ Scratch

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

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

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

        • http://www.simplecoding.org/ Владимир

          Да, все время одна и таже проблема… выбора :-)

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

          Но, думаю, со временем по экспериментирую и выберу.
          Хотя, я уже столько раз менял свои решения :-)

  • http://blog.sribna.com/ Yuriy

    Всю ветку комментариев прочитать не осилил :)
    Дизайн этот мне больше нравится, чем тот что был.
    У себя в блоге я поставил Brians Threaded Comments. Селект бокс нижний, по моему, лишний.
    Кстати ругается на мой имейл, пришлось точку из него убрать…

    • http://blog.scratch613.info Scratch

      Нижний селект бокс показывает к какому именно комментарию отправляется комментарий :) В отличие от BTC, в котором форма перемещается под комментируемый текст, тут — форма всегда внизу, и иногда полезно знать, куда же твой текст отправится…
      Ругаться на точку в мыле — это очень частая проблема со многими валидаторами. Они считают что мыло — это только (\w), хотя в некоторых случаях там может быть практически что угодно (хоть чучело). Вот, пример валидатора, в котором описываются некоторые особенности этих вот email адресов.
      Да и RFC 822 говорит, что local-part (это то, что перед собакой) может содержать что угодно, если оно заключено в кавычки.

      • http://blog.scratch613.info Scratch

        Да, кстати, горе мне горе.
        Ссылку на RFC 822 стоит заменить на сылку на RFC 2822, как замещающий документ.
        Это я прогнал, сознаюсь.

    • http://www.simplecoding.org/ Владимир

      Я пробовал использовать Brians Threaded Comments. Но оказалось, что он хорошо вписывается в стандартную тему (или похожую). Естественно, переделать его можно как угодно… Но нормального описания я не нашел, а копаться в исходниках было лень :-) .

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

      P.S. Скрипт проверки email я обязательно исправлю. Честно говоря, забыл его протестировать :-) .

      • http://blog.scratch613.info Scratch

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

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

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

        • http://www.simplecoding.org/ Владимир

          Да, все время одна и таже проблема… выбора :-)

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

          Но, думаю, со временем по экспериментирую и выберу.
          Хотя, я уже столько раз менял свои решения :-)

  • http://mosnews2.ru/archives/date/2008/12 MosNews

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

    На нашем сайте только самые последнии новости из жизни самого большого города в России =)

  • http://mosnews2.ru/archives/date/2008/12 MosNews

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

    На нашем сайте только самые последнии новости из жизни самого большого города в России =)

]]>
Tweet