Все за типограф для Вордпресс|Бета-версия «ВП Типограф»

Хорошо выглядящий текст —
как „«конфетка» в красивой обертке“.

Вручную, конечно, обрабатывать текст перед публикацией — занятие не для слабонервных. Онлайновый типограф — тоже потеря времени. Да и в блогах редакторов, которые умеют не только заменить спецсимволы в тексте, но и правильно расставить переносы, неразрывные пробелы, исправить опечатки, обычно не бывает (сам блоггер же не обладает необходимыми знаниями). К тому же, стоит учитывать то, что верстка может быть «резиновой».

Поэтому самое простое решение — прикручивание к используемому движку автоматического типографа. Для Wordpress уже есть вариант от rmcreative, в составе которого есть плагин, выполняющий эту рутинную работу за автора.

Сложность тут в том, что, во-первых, слепое переложение правил «бумажной» типографики на экран может не только не повысить читаемость, но и ухудшить ее. Даже самый умный скрипт не умнее редактора — об этом я говорил и в одной и прошлых заметок о расстановке переносов при использовании justify. Вторая же проблема в том, что применение слишком большого количества правил обработки текста ухудшают производительность операции и увеличивают объем исходного кода (ведь для тех же неразрывных пробелов надо использовать html-entity неразрывного пробела, а в больших конструкциях пользоваться даже не <nobr></nobr>, который не валиден, а <span style="white-space: nowrap;"></span>).

Так, или иначе, на основе уже упомянутого скрипта от Александра Макарова и Максима Оранского я сделал настраиваемую и более точную версию типографа, заточенного под Вордпресс. При обработке же вложенных кавычек использована часть скрипта от Дмитрия Смирнова.

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

Итак, ВП типограф →

На страничке скачивания плагина достаточно подробно описана функциональность (пусть там не все так круто, как у typograf.ru). Так что здесь я объясню только основной принцип его работы

{14 комментариев}

И еще о CSS reset

Дин разразился исчерпывающей статьей по этому поводу →

У меня жгучее желание все-таки избавиться от универсального селектора, но вроде и с ним все нормально.

Неправильно только позиционирование текста в инпутах — в IE оно уплывает слишком вниз. Не разбирался, отчего.

690130832

{отключены}

Полностью нативный Page Navi

Открытий чудных...

Копаясь не в Кодексе Вордпресса, а напрямую в его файлах, можно найти гораздо больше интересного и местами полезного. Или бесполезного, вроде вспомогательной функции the_weekday(), которая показывает текущий день недели.

В некоторых темах пригодится, например, get_calendar(), который, натурально, отображает табличку дат за текущий месяц. Ссылки при этом ведут на конкретные страницы в архиве ВП, что хорошо для больших новостных блогов, с предпочтением навигации по дате.

В этом случае поможет также то, что движок, оказывается, умеет генерить фиды для отдельных категорий get_category_feed_link() и тегов get_tag_feed_link() — в качестве аргумента берет id категории/тега. Или get_author_feed_link() с аргументом $author_id для подписки на RSS конкретного автора (если ведут блог несколько — как на Соцвестнике или Социализме, или Штучках). Вы удивитесь, но есть RSS даже для поиска — get_search_feed_link(), аргумент — строка поискового запроса.

И все это можно использовать для линка автоматической подписки и кнопки в соответствующих разделах. Ведь часто раздражает, что невозможно подписаться на отдельную интересующую ленту и не получать всего остального мусора.

Ну да ладно, более забавную штуку я нашел, бегло просматривая тему-шаблон Slaff'a на предмет ошибок (он сам попросил!). Это наметка на полностью встроенную пагинацию в Wordpress. Но то ли разработчики постеснялись доделать, то ли забыли, но функция работает не прозрачно.

Честно говоря, по сравнению с моим предложением замены WP-Pagenavi, использование этой нативной функции не сильно меньше по размеру, но, возможно, понятней для среднестатистического блоггера. Если он еще не успел заснуть.

Полностью нативный pagenavi

{2 комментария}

Глаголы

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

Смотрел выдачу по настоящему имени и всем псевдонимам, которые когда-либо использовал на Дикой Сети. Выиграл пока marapper, с всего 2-мя левыми ссылками в ТОПе. Вебмастер Яндекса же уверяет, что сюда 3000 ссылок, из которых 103 «чистых» в блогах — что я накомментировал в течении 3 месяцев (ТИЦ с PR'ом не колеблются уже месяц). Ну и черт с ними, все равно заходы по поисковым фразам меня возбуждают больше. Почти так же, как ваши комментарии.

Зато успел за сегодняшний (первый) день стать безумно-злобным в twigame. va1en0k, Dynamyte, AmaxSkv — я вас обожаю.

Так до полночи и тупил-паял-глупил-исправлял-устал.

{5 комментариев}

Лайк Гуи

Чистим фаворитсы. Большинство из замечательного gui.ru, так что речь во всех ссылках более-менее пойдет о юзабилити.

Идея-фикс «content is the king», ставшая возможной с всеобщим распространением RSS, с моей точки зрения, никак не отрицает того факта, что веб-дизайн — штука не нужная. Даже в блогах первое впечатление о сайте — это тот крючок, который «конвертирует» посетителя в читателя. Что уж говорить о том, что комментируем и ищем новое мы все-таки в веб-интерфейсах, а не единой семантической сети без оформления.

Важна не только красота, но и представление элементов сайта в дизайне. Например, простые размышления про стрелки рядом с текстовыми ссылками все возвращают нас к мысли, что применение любого интерфейсного элемента подвержено сильному влиянию контекста.

Но не все так просто. Тут нельзя не вспомнить статью на сайте лучшей студии дизайна иконок в России — про то, что различимость иконки важнее, чем ее «понятность». Тенденция гламурно-градиентных и детальных градиентов зачастую, к сожалению, убивает различимость на корню.

С другой стороны, возвращаясь к контексту — использование «закрывающейся правой елочки» вместо элемента «дальше», тоже один из ужаснейших фактов сегодняшнего Веба. Ведь не стоит забывать, что метафора тоже нужна — ведь это связь между объектом и его идеей (у вас есть еще шанс перевести эту статью, да).

Даже если уходить в сторону от пиктограмм, от которых и так уже голова болит, — скажем, подсказки в формах — как они должны располагаться? Или файловые инпуты, как их кроссплатформенно стилизовать?

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

Метафоры все-таки остаются лейтмотивом дизайна, но попробуйте расфокусировать взгляд при просмотре сайта. Или, вообще уберите все элементы оформления, все детали, как это делают на проекте «Веб без слов», который каждую неделю презентует новый популярный сайт в виде блоков верстки. Никакого текста, никаких изображений, только элементы в виде закрашенных блоков, что позволяет отойти от детализации результата в пользу системности прототипа.

Как всегда, получается, что важную роль играет все — идея, содержание, расположение, подача, форма... Приоритеты можно ставить только рассматривая конкретный проект и конкретный дизайн. Вот так вот все сложно.


И снова чуть-чуть о выключке. Если в книгах выравнивание по ширине позволяет использовать кропотливая работа редакторов, нещадно борющихся с дырами в тексте, то в экранной типографике сложность состоит в том, что никто не будет соответственно подготавливать текст к публикации. Мне возражают, что это можно сделать с помощью плагина расстановки мягких переносов, своего рода «типографа для justify».

Объясню недостатки этого решения:

  • При копировании текста тот же Firefox вставляет вместо &shy; дефис (попробуйте сами, да) везде. Копирование в плейн-текст оставляет дефисы.
  • Загромождает HTML.
  • Неправильная расстановка переносов (не полностью по правилам русского языка).
{16 комментариев}