Recently in Сайт и дизайн Category

Прошу приветствовать: New Coding Robots website screenshot www.codingrobots.com (На sellme.ru тоже дизайн обновился, заметили?)
Я продолжаю заниматься переделкой сайта Coding Robots и рожать небольшие плагины для WordPress, которые могут пригодиться в хозяйстве. Буду постить их в блог, может и вам окажутся полезными. Мне нужно выводить на странице (Page в WordPress) несколько последних заметок из блога, и чтобы для этого не приходилось менять шаблог. Я написал плагин-фильтр CR Recent Posts. Работает таким образом: прямо в содержимом записи (Post) или страницы (Page) пишете: [POSTS количество_заголовков] или [POSTS количество_заголовков имя_или_slug_категории] Например, чтобы вывести двенадцать последних заголовков блога, пишете [POSTS 12], и получаете примерно такое:
Все, последний пост про WP FancyBox. Вышла версия 1.3
(каждый день по версии?).
  • Сократил количество загружаемых картинок (тени, фон и т.п.) с 11 до 4, используя технику CSS-спрайтов. Размер уменьшился на полкилобайта и сократилась нагрузка на сервер (на 7 HTTP-запросов!), отчего тени стали загружаться быстрее.
  • Убрал PNG-fix: по-моему, бессмысленно из-за одного древнего браузера вставлять целый джаваскрипт, который может что-нибудь сломать, да еще и не работающий со спрайтами. Я придумал вариант элегантнее (как я до этого раньше не додумался‽): просто не показывать тени в IE6 и заменить для него закрывающий крестик на GIF.
  • Оптимизировал GIF'ы, перерисовал стрелочки. Если кто не знает, если к ссылкам на картинки добавить rel="имя_группы", то все такие ссылки будут показываться как группа — то есть со стрелочками назад-вперед.
  • Исправил баг: в Firefox при нажатии на картинки разного размера, новая картинка показывалась размером со старую.
  • Убрал из поставки не минимизированные версии .js и .css. Они там не нужны, а если кому охота посмотреть читаемый код — попрошу пройти в репозиторий.
На этом ежедневное обновление WP FancyBox предлагаю прекратить. И просто им пользоваться. Качать тут: http://code.google.com/p/wp-fancybox P.S. SVN — отстой.
Еще не надоел со своим фэнсибоксом? Просто тут апдейт, исправляющий важный баг.
  • Исправлена ошибка джаваскрипта в Internet Explorer (MUST DIE!) при включении любой опции в админке WP FancyBox.
  • Добавлена возможность включения PNG-fix (штука, исправляющая невозможность использования прозрачных PNG в IE6) из админки. (jquery.pngfix.min.js, кстати распространяется не по MIT лицензии, а по GPL, если это кого-то волнует.)
Плюс экономия кода — плагин теперь вставляет на один символ меньше в заголовок страниц :) Протестировал на Safari 3.1.2/Mac, WebKit 37605/Mac, Firefox 3.0.3/Mac, Firefox 3.0.3/Win, Opera 9.60/Mac, IE 6.0, IE 7.0.
Я продолжаю заниматься переделкой сайта Coding Robots и рожать небольшие плагины для WordPress, которые могут пригодиться в хозяйстве. Буду постить их в блог, может и вам окажутся полезными. Почти все блоги на WordPress имеют три какашки на каждой странице.
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.example.com/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.example.com/wp-includes/wlwmanifest.xml" /> <meta name="generator" content="WordPress 2.6" />
Первая строчка — полезная штука. Она помогает блог-клиентам (таким, как BlogJet ;) автоматически настраиваться на работу с блогом указанием ссылки на него. Если вы не пользуетесь блог-клиентом или уже настроили его, нет смысла держать эту строчку. Экономьте, блин, байты, а то скоро интернет сломается! Вторая строчка — настоящая какашка. Это "манифест" для блог-клиента от Microsoft (которым никто не пользуется :) (BlogJet мог бы тоже этот манифест использовать, но он в таком дурацком формате, что не охота руки пачкать... типа отмазался). Эта строчка вам вообще не нужна (опять же, если вы не пользуетесь злым блог клиентом, или уже настроили его) Экономия! Третья строчка — указание на версию WordPress. Эта строка не только не нужна, так она еще и представляет угрозу безопасности. Например, если в WordPress 2.6 обнаружат дыру, а вы не успеете обновиться до следующей версии, любой дурак сможет обнаружить это, и, сделав бота для поиска и взламывания необновленных блогов, ломать все подряд. Представляю великий плагин для WordPress (состоящий из трех строчек), который удалит эти три строчки — Shit Disabler. Скачать shit_disabler.zip (353 байта) Установка — как обычно: распаковываете, закачиваете плагин в wp-content/plugins/ и активируете в админке
Cпасибо всем за отзывы и баг-репорты по поводу WP FancyBox. Я вообще-то делал это для себя и не планировал выпускать, поэтому настроек было ноль. Я сделал под плагин страничку на Google Code — http://code.google.com/p/wp-fancybox/ — там можно скачать свежую версию, есть репозиторий, баг-репортилка и прочие прелести. Что нового в 1.1?
  • Теперь не надо добавлять class="fancybox" к ссылкам на картинки — если вы постите картинку из админки WordPress и выбираете вставку маленькой картинки (Thumbnail/Миниатюра), FancyBox будет работать out of the box.
  • Добавлена страница настроек в админке WordPress (Settings/FancyBox) (в плагине WP FancyBox).
  • Исправлен баг с повторной загрузкой изображений (в самом FancyBox. Напомню, его писал не я).
Внимание: старый способ — class="fancybox" теперь работать не будет. В админке можно поменять обратно, чтобы он работал, но лучше перейдите на новый. Теперь с FancyBox работает вот это:

<a href="большая_картинка.jpg">
<img class="size-thumbnail" src="маленькая_картинка.jpg">
</a>
Так как WordPress при вставке thumbnail сам вставляет класс size-thumbnail, вам вообще ничего не нужно делать — просто закачайте плагин, активируйте, и он будет автоматически работать. Пока я не потрудился написать документацию, поэтому объясню настройки тут.
Я тут занимаюсь переделкой сайта Coding Robots и рожаю небольшие плагины для WordPress, которые могут пригодиться в хозяйстве. Буду постить их в блог, может и вам окажутся полезными. Обновление: смотрите новую версию Я несколько месяцев искал хороший "zoom" для картинок. Lightbox, Thickbox и другие — отстой. Во-первых, они затемняют фон, а я этого не хочу. Во-вторых, они совершенно некрасивые. В-третьих, многие из них очень большие. Наконец, собственно, эффекта зума нет. Я хотел что-нибудь в стиле Apple и с небольшим весом. Кабель (имя такое — Cabel) из Паники (компания такая — Panic) сделал замечательную штуку FancyZoom. Выглядит прекрасно, но: штука платная (39 $ за один сайт) и занимает 152 Кб. Наконец, пару недель назад я нашел чудо под названием FancyBox. Чем оно лучше? Во-первых, использует jQuery (а не нелюбимый мной prototype или чего-нибудь другое). Я и так "линкую" эту библиотеку с сайтом для других вещей, поэтому будет меньше трафика и HTTP-запросов (кроме того, jQuery включается в стандартную поставку WordPress). Во-вторых, занимает 27 Кб (в моей оптимизированной версии, включая картинки. Только CSS и JS — 12 Кб). Наконец, выглядит превосходно. Пример (кликните. В RSS, естественно, не работает, зайдите на сайт): Я написал для WordPress плагинчик, чтобы включать FancyBox без заморочек. Распаковываете, закачиваете плагин в wp-content/plugins/, активируете в админке и используете следующим образом:

<a class="fancybox" href="большая_картинка.jpg"
  title="Заголовок, если надо">
<img src="маленькая_картинка.jpg">
</a>
То есть, просто добавляете class="fancybox" к ссылке на большую картинку. Все. (Если охота использовать другим образом, поменяйте jQuery-селектор a.fancybox в 16-й строке fancybox.php. Там же можно кастомизировать FancyBox — см. сайт автора. Кстати, fancybox.css и fancybox-1.0.0.js, те которые без .min, можно удалить, я оставил их на всякий случай.) Обновление: смотрите новую версию Скачать fancybox.zip (26 Кб) Нашли баги? Пишите. P.S. Для IE6 нужен png-fix. У меня на сайте используется своя версия, поэтому я его не включил в поставку. Если нужен, он есть на сайте FancyBox. Засуньте jquery.pngFix.js в папку fancybox и добавьте в fancybox.php строчку:
wp_enqueue_script('pngfix', '/wp-content/plugins/fancybox/jquery.pngFix.js');
где-нибудь до add_action.... Но лучше забейте на гадов, до сих пор использующих мозговыворачивающий браузер. P.P.S. Что-то он на Sellme.ru в дурацком браузере №2 (Opera) показывается в центре всей страницы, а не текущей позиции скролла. Посмотрим... Это был баг в jQuery. Залил исправленную версию fancybox, которая нормально работает с Opera.

Две статьи про оптимизацию конверсии страничек:

  • Taguchi Methods — обещается результат лучше, чем у обычного многомерного тестирования за меньшее время и за меньшее количество вариантов. (via Calacanis)
  • Optimizing Free Trial Offers — пример того, как изменение дизайна страницы пробника привело к увеличению конверсии на 178.998%.

Кстати, меня приняли в бету Google Website Optimizer, поэтому через пару месяцев опишу свои вчепятления (на свеженьком сайте).

P.S. Делитесь ресурсами по тестированию в комментариях. Рекламируйте свои testing-related продукты, сайты и т.п.

Обновление: ещё ссылки у Джэйсона Калаканиса в блоге.
Обновление 2: заменена первая ссылка.

На БЛОГике “Золотые правила seo-копирайтинга”: - Обновление: для особо внимательных -- далее идёт ЦИТАТА. -
  1. Нельзя выкладывать в Сеть текст, не проверив предварительно орфографию и пунктуацию
  2. Нельзя делать дизайн с фиксированным размером шрифта основного текста
  3. Должно быть «три точных попадания»: точное вхождение ключевого слова в названии title, в заголовке h1 и в тексте

-

Конец цитаты. В следующий раз читайте заметку, прежде чем комментировать.

-

Я задал вопрос — что такое фиксированный размер шрифта в 2006 году?

Открою секрет: фиксированного шрифта больше не существует. Что было “фиксированным” размером шрифта раньше? Это когда кодер в CSS задавал размер в пунктах или писелях (pt, px, …), а не в процентах. Такие размеры не масштабировались правильно в IE6 и ранее — это было особенностью браузера (проще говоря, баг).

Всё, бага больше нет. Масштабирование в IE7 — полноценное, похожее на то, как оно реализовано в Opera. В Firefox шрифты масштабируются без багов (px, pt, % — всё равно).

Так что эта тема умерла, товарищи. Да здравствуют точные указания размера в пунктах!

Обновление: вернул Google. WinLive не работал в Opera и Safari, глючил если есть flash (YouTube).

Заменил гугловский поиск по сайту на новый Windows Live поиск — посмотрите, как классно:

Windows_live_search

Получить такую для своего сайта (или сайтов — можно несколько в список засунуть) можно тут.

(via Scobleizer)