Архив рубрики: Веб

Он и в третий раз ходил за ёлкой… И добыл её!

Drupal, Perl, WordPress, Ильменский фестиваль

Давно хотел улучшить ильменский сайт, да всё руки не доходили. Уж подумывал и переписать совсем. Что только не пробовал — и тяжёлый перловый фреймворк Catalyst, и написанные на PHP системы управления сайтами — Друпал да ВордПресс. И всё никак не получалось дойти за какого-то осмысленного результата. В итоге всё свелось к переписыванию на Mojolicious::Lite — это всяко веселее, чем набор древних CGI-скриптов.

Начал в мае 2011 года — бросил. Подобрал в мае тринадцатого — снова бросил. Пришёл май пятнадцатого — снова взялся и как-то всё-таки дошёл до завершения первого этапа: воссоздал на моджо всю функциональность прошлого сайта, который был запущен ещё в 2003 году. Ну и перекрасил попутно. Свежий сайт да ещё и на новом железе с другими ОС и веб-сервером работает гораздо шустрее старого: отдаёт 50 разных страниц в секунду, а не две. Кстати, Друпал с ВордПрессом (правда, без нормального кэширования) работают ещё медленнее, чем старый сайт.

Новый сайт лежит на test.ilmeny.org, в выходные потестирую, в понедельник, наверное, запущу его вместо старого.

test.ilmeny.org

Если увидите на свежем сайте что-то неправильное — сообщите, пожалуйста.

P. S. Попутно выяснил: боевой режим в Mojolicious называется не production, как я почему-то думал, а deployment всё-таки production, но при запуске через Starman выставляется переменная окружения PLACK_ENV=deployment, которая с попадает в app->mode.

Ещё проще

Drupal

CMS Drupal — штука мощная и потому имеет несколько интерфейсов, мне известны два: веб-интерфейс (это наглядно) и командная строка (это быстро) — командой drush. Драш умеет, например, чистить кэш, но при запуске задаёт вопрос, какой же кэш почистить:

Enter a number to choose which cache to clear.
 [0]   :  Cancel         
 [1]   :  all            
 [2]   :  drush          
 [3]   :  theme-registry 
 [4]   :  menu           
 [5]   :  css-js         
 [6]   :  block          
 [7]   :  module-list    
 [8]   :  theme-list     
 [9]   :  registry       
 [10]  :  token          
 [11]  :  views

Чтобы каждый раз не вводить нужный номер, я запускал его так:

echo 1 | drush cc

Однако нашёлся более простой и наглядный способ:

drush cc all

Карта с рельефом

Maperitive, OSM, Википедия, карта

Пару лет назад я пробовал рисовать карты из данных OpenStreetMap при помощи Maperitive — и даже что-то говорил об этом в докладе на UWDC-2013. Что понравилось ещё тогда — возможность «из коробки» отображать рельеф: Маперитив умеет сам ходить в сеть за открытыми данными о рельефе (SRTM) и потом строить из них контуры горизонтали и рисовать отмывку.

В воскресенье, когда гулять не было возможности, а делать что-то полезное не было желания, вспомнил я прошлые свои упражнения и решил сделать хоть что-то полезное — например, позиционную карту для википедии. Позиционными картами там называют такие карты, на которые потом легко можно нанести метки, указав координаты в виде широты и долготы. Подобные карты, как выяснилось, создать достаточно просто: надо лишь взять изображение, и указать для него необходимые данные, чтоб понятен был способ пересчёта координат. Поддерживаются несколько типов проекций карт, по умолчанию используется равноугольная цилиндрическая проекция — как раз такая, как в OpenStreetMap, для карт в этой проекции достаточно указать лишь широту верхнего и нижнего краёв и долготу левого и правого.

У меня не получилось сразу в Маперитиве получить карту такого вида как мне надо: реки текли поверх водохранилищ и водоёмы никак не хотели с административными границами сочетаться. Потратив немного времени на чтение документации и безуспешные эксперименты, пошёл другим путём: сделать пару отдельных карт — с границами и водами — да и собрал их воедино в Inkscape. Маперитив умеет экспортировать карты в SVG. Вот уменьшенный фрагмент того, что вышло:

Север Нязепетровского района

Шаблон с картой лучше делать не по инструкции — там образец неправильный. Лучше взять за образец какой-нибудь существующий шаблон и слегка его поменять: надо изменить координаты границ карты, её названия и имена используемых файлов. Если речь идёт об изготовлении карты актуального состояния существующей местности (то есть, мы рисуем не историческую карту и не карту вымышленного мира), то имеет смысл нарисовать несколько карт одной и той же области, хотя бы две: физическую и политическую/административную — википедия позволяет выбрать нужную карту из шаблона как вручную, так и автоматически: например, в географических статьях (о реках, озёрах, горах) автоматически отображается физическая карта, если она есть.

Пример статьи с этой картой — Шемаха (приток Уфы). В статье Шемаха (Челябинская область) используется тот же самый шаблон, но карта там уже другая — административная.

Указание языка в URL страниц в Open Journal Systems

Apache, english, OJS

Open Journal Systems — система управления электронными научными журналами — имеет одинаковые адреса страниц, написанных на разных языках. Посетитель, зашедший на сайт научного журнала, работающего на OJS, либо увидит страницу на языке по умолчанию либо, если раньше уже заходил и менял язык, на том, что выбрал. Кому-то такой подход нравится, кому-то — нет. На самом деле — вполне нормальная ситуация.

Тем не менее, возникла задача всё-таки получить возможность явно указать язык в адресе страниц. Переключение выбранного языка делается средствами самой OJS — достаточно зайти (то есть, выполнить GET-запрос) по адресу вида адрес-журнала/user/setLocale/локаль?source=путь/куда/идти/дальше, например, http://vestnik.susu.ru/cmi/user/setLocale/ru_RU?source=/cmi/issue/current — переход по этой ссылке приведёт к выведенному на русском языке оглавлению текущего выпуска серии «Вычислительная математика и информатика» Вестника Южно-Уральского государственного университета.

С одной стороны, всё украдено до нас ничего делать не надо — URL с указанием языка уже доступен. Но какой-то он длинный, неаккуратный. Хочется сделать покороче. Чтоб не лезть во внутренности OJS, можно исправить настройки сервера. Для случая, когда используется Apache, а адрес журнала имеет вид http://hostname/journal, достаточно добавить пару правил для mod_rewrite:

RewriteRule ^en(glish)?/(\w+)(/?.*)$ /$2/user/setLocale/en_US?source=/$2$3 [L]
RewriteRule ^ru(ssian)?/(\w+)(/?.*)$ /$2/user/setLocale/ru_RU?source=/$2$3 [L]

Это даст возможность использовать URL вида http://hostname/язык/journal/путь, где язык может быть как названием нужного языка, так и его двухбуквенным кодом. Для уже рассмотренной серии «Вестника ЮУрГУ» теперь можно применять такие ссылки:

Трамвайная схема — можно и в TileMill

OSM, PostgreSQL, Python, TileMill, Википедия, карта, трамвай, Челябинск

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

На самом деле в том, чтоб TileMill нарисовал трамвайные пути, нет особо хитрой магии. Более того, даже не надо, пугаясь питона, ковырять imposm-mapping.py — трамвайные пути можно выделить при помощи CartoCSS, потому что для железных дорог сохраняется их тип:

SELECT DISTINCT type FROM osm_railways;
type
--------------
preserved
narrow_gauge
light_rail
subway
tram
rail

Стиль трамвайных путей можно задать в файле roads.mss. В OSM Bright все доро́ги: и железные, и обычные — слиты в один слой. Правила рисования дорог весьма витиеваты, поэтому, чтоб не тратить на эксперименты лишние усилия, мы не будем пытаться переопределить стиль трамвайных путей — вместо этого добавим новое правило, рисующее широкие красные линии поверх трамвайных путей, не трогая более ничего. Правило это надо поместить после правил, описывающих слой #roads_high:

#roads_high::tram_highlight [type='tram'] {
  line-width: 5;
  line-color: @tram_line;
  line-comp-op: darken;
}

Результат:

Схема трамвайных путей

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

Бросается в глаза отсутствие подсветки на мостах — связано это с тем, что слой #bridge находится выше, чем #roads_high. Возможный способ решения — завести свой слой железных дорог (а для этого надо уже́ лезть в imposm-mapping.py, но теперь это не страшно), поместить его выше слоя с мостами и написать для железнодорожного слоя свои стилевые правила.

Из вордпресса в гугл-плюс — всем

Google+, WordPress, социальные сети

WordPress умеет автоматически делать кросспосты посылать копии новых заметок в популярные социальные сети. С недавних пор к таким сетям добавился и Google+ (раньше для отправки заметок в гуглоплюс нужна была платная версия плагина Social Network Auto Poster). По умолчанию создаваемые в гуглоплюсе записи доступны не всем, а только френдам, точнее тем пользователям, кто включен в ваши круги. Я неоднократно пытался найти в вордпрессе способ изменить круг читателей — всё никак не мог. Оказалось, всё описано в документации — настройки публикации скрываются не в вордпрессе, в самом Google+, на странице Settings → Apps & activities.

Восьмой друпал лучше седьмого, но ещё не готов

Drupal

Drupal 8, вроде, получается лучше, чем нынешний Drupal 7: в нём «из коробки» есть представления (views), версии содержимого, WYSIWYG-редактор. Нетерпеливые и ленивые товарищи могут полчаса потестировать любую из версий — я поглядел на самую свежую из доступных, это 8.0-alpha10.

Выглядит, в общем, привлекательно, однако в продакшене не на тестовых сайтах его использовать ещё рано: думаю, сто́ит дождаться релиза, а лучше — следующей версии, хотя бы 8.1.

Трамвайная схема из OpenStreetMap

alaCarte, OSM, TileMill, Википедия, карта, трамвай, Челябинск

Когда-то для статьи «Челябинский трамвай» в википедии я нарисовал поверх какой-то карты схему маршутов, простенькую, куда проще бирмановской. Нарисовал, выложил нарисованное (без карты, только схему) в векторном виде, да и забыл — пить-есть не просит.

Прошло шесть с половиной лет, OpenStreetMap развился до состояния, когда на карты некоторых районов уже можно стало смотреть без слёз. «Почему б не попробовать схему с картой из OSM?» — подумал я. И попробовал.

Сначала был TileMill (я год назад о нём рассказывал на UWDC) — можно, например, сделать свой картостиль, основываясь на OSM Bright. Карта получается достаточно симпатичной и её внешний легко настраивается — в тайлмилле используется CSS-подобный язык разметки. Однако добавить на карту трамвайные маршруты не получилось — в OSM Bright трамвайные пути и железные дороги отображаются совершенно одинаково. Это, наверное, можно изменить, поковырявшись в настройке, но скрипты преобразования геоданных написаны на питоне, в котором я почти ничего не понимаю. Поэтому пришлось добавлять трамвайные линии вручную. Результат —

Попробовал альтернативный способ — alaCarte. В alaCarte оказалось возможным сразу выделить трамвайные пути, и, кроме того, alaCarte создаёт набор тайлов, пригодный для использования с библиотеками OpenLayers и Leaflet.

Получается, например, так:

Схема трамвайных маршрутов

в виде интерактивной карты — http://tile.susu.ac.ru/tram.html, используемые стили скоро будут на гитхабе. Stay tuned!

MapBBCode — в вордпрессе

OSM, PHP, WordPress

Для вставки использующих библиотеку Leaflet подвижных карт на сайт, работающий под управлением вордпресса, есть разные пути: можно, например, вставить нужный HTML-код прямо в текст страницы — оно будет работать (вот пример), но ковыряться в коде каждый раз, когда нужна карта — неудобно. Такой метод подойдёт лишь тогда, когда надо вставить одну карту и забыть о ней.

Если же карт много, можно воспользоваться монстрообразным плагином Leaflet Maps Marker — он многое умеет, но страшен. Меня пугает обилие кнопочек, ссылочек и призывов перейти на платную версию.

Нужен способ, позволяющий в удобном виде описывать карту и куда-нибудь эту карту вставлять. Питерский осмер Илья Зверев несколько дней назад написал библиотеку MapBBCode для встраивания карт на форумы. На форумах для форматирования текста часто используют команды разметки вида [tag]text[/tag], действующие аналогично тэгам языка HTML, основное их отличие, бросающееся в глаза — квадратные скобки вместо угловых. Подобный код используется и для описания карты в MapBBCode.

Такие же коды применяются и в вордпрессе — с их помощью можно, например, вставлять на страницы аудиозаписи, видеоролики, фотогалереи — подобная функциональность есть в могучем плагине Jetpack. Можно и карты вставлять — так сделано в уже упоминавшемся Leaflet Maps Marker.

Я попробовал минувшей ночью написать свой плагин — получилось. Теперь для того, чтоб вставить карту, достаточно написать

[map]55.16473,61.32601[/map]

вместо этого кода отобразится такая карта:

[map]55.16473,61.32601[/map]

Исходный код — https://github.com/shoorick/mapbb-wordpress, ZIP-архив — https://github.com/shoorick/mapbb-wordpress/archive/master.zip.

Смена шрифтов в теме Twenty Thirteen

WordPress

В 2013 году в CMS WordPress появилась новая тема — Twenty Thirteen, которая достаточно хороша: написана с использованием HTML5, корректно ведёт себя на разных размерах экрана и не страдает обилием ненужных финтифлюшек. Но не обошлось и без ложки дёгтя: в теме используются взятые с Google Fonts шрифты Bitter и Source Sans Pro — они весьма хороши, но в них нет кириллицы. Понятно, что можно, создав дочернюю тему, поправить используемые в ней стилевые правила, указав нужные шрифты, однако хочется сделать всё правильно: и загрузить нужный шрифт, и избежать загрузки ненужного.

Поиск не дал готового решения (что, вообще-то, странно) — пришлось изобретать самому, руководствуясь тем, что нашлось. Итак, для замены шрифтов надо:

  1. Создать дочернюю тему;
  2. В стилевом файле style.css дочерней темы указать нужные шрифты;
  3. Отключить загрузку ненужных и добавить загрузку нужных шрифтов, добавив в файл functions.php дочерней темы такой код:
if ( ! function_exists('child_fonts_url')) {
    function child_fonts_url() {

        $fonts_url = '';

        $open_sans = _x( 'on', 'Open Sans font: on or off', 'child' );
        $open_sans_condensed
           = _x( 'on', 'Open Sans Condensed font: on or off', 'child' );

        if ( 'off' !== $open_sans || 'off' !== $open_sans_condensed ) {
            $font_families = array();

            if ( 'off' !== $open_sans )
                $font_families[] = 'Open Sans:400italic,400,700';

            if ( 'off' !== $open_sans_condensed )
                $font_families[] = 'Open Sans Condensed:300';

            $query_args = array(
                'family' => urlencode( implode( '|', $font_families ) ),
                'subset' => urlencode( 'latin,cyrillic' ),
            );
            $fonts_url = add_query_arg(
                $query_args,
                '//fonts.googleapis.com/css'
            );
        }

        return $fonts_url;
    } // function child_fonts_url
}

function disable_twentythirteen_fonts() {
    wp_deregister_style('twentythirteen-fonts');
}

add_action( 'wp_enqueue_scripts', 'disable_twentythirteen_fonts', 11 );
wp_enqueue_style( 'child-fonts', child_fonts_url() );

Здесь child — имя дочерней темы. Функция child_fonts_url списана с twentythirteen_fonts_url из темы Twenty Thirteen — изменены лишь используемые шрифты (имена шрифтов и переменных, список начертаний и наборов символов) да название функции.