Александр Токарев: 7 заметок с тегом Эгея
7 заметок с тегом

Эгея

Обновление движка сайта (2.9)

Небольшое объявление для читателей. Я наконец-то обновил движок сайта, и в этой связи у меня для вас сразу две хороших новости, которые касаются улучшенной работы комментариев:

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

• Во-вторых, авторизоваться в комментариях теперь можно не только с помощью адреса электронной почты, но и с помощью учётки соцсетей — Фейсбука, Вконтакте и Твиттера. Для авторизации нужно пощекотать соответствующую иконку под комментарием:

Сейчас авторизация происходит через blogengine.ru (это сайт движка Эгея, на котором работает мой сайт), так что не хватайтесь за ружьё, когда увидите предупреждение о том, что некий blogengine.ru запрашивает данные вашей учётки: всё нормально, это свои. Чуть позже я настрою авторизацию напрямую через свой сайт, чтобы она проходила максимально директно, секьюрно и аутентично.

P. S. Читатели интересовались, когда же внизу постов появится кнопочка «поделиться на Одноклассниках». Увы, друзья, она не появилась и в этом релизе. (Спросите разработчика, почему.) Так что предлагаю исходить из того, что она не появится никогда и производить репост непосредственно с сайта Одноклассников.

 1 комментарий    184   2 мес   блог   Эгея

Главное меню для Эгеи

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

Как такое может быть, что в движке вообще нет главного меню? Полагаю, лучше спросить об этом разработчика, г-на Бирмана. И если вы по природе своей человек инициативный и терпеливый, вы даже можете попросить его прикрутить туда этот функционал. Я, однако, его ни о чём больше просить не буду, поскольку уже пробовал (и не единожды), и пришёл к выводу, что это, к сожалению, не особенно продуктивно, ибо функционал, который лично разработчику не кажется правильным и/или нужным (к примеру, пресловутый «кат»), либо вовсе не будет реализован (вероятно, из принципа), либо положен в долгий и пыльный ящик на неопределённый срок. Впрочем, это всего лишь мой опыт; уверен, вам повезёт куда больше.

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

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

Примечание: для добавления меню вам понадобится доступ к файлам Эгеи на вашем сервере. Приведённое описание действительно для Эгеи 2.7, но думаю, без проблем должно быть применимо и к прочим версиям.

1. Уберите строку с описанием сайта

По умолчанию под названием блога Эгея отображает строку с кратким описанием, которое задаётся в настройках:

Если вам очень нужна эта строка, переходите к следующему пункту. Если нет, давайте её уберём. Самое очевидное решение — оставить строку «Коротко о блоге» пустой — чревато тем, что главная страница сайта лишится ценного метатега description, т. е. вот этой строчки (её видно при просмотре кода страницы):

<meta name="description" content="Блог о котиках и птичках" />

Поскольку для поисковых систем страница, не имеющая meta description, не есть гут, данное решение нам не очень подходит. Чтобы решить задачу более выгодным способом, откройте на вашем сервере эгейский php-шаблон /themes/plain/templates/layout.tmpl.php и удалите строку:

<div id="e2-blog-description"><?= $content['blog']['description'] ?></div>

Таким образом строка с описанием отображаться не будет, однако meta description для главной страницы будет сохранён и виден поисковым системам.

2. Вставьте HTML-код с пунктами меню

Если в предыдущем пункте вы удалили строку с описанием, то на её место вставьте HTML-код с меню:

<nav id="main-menu">
	<ul>
		<li><a href="/tags/cats/">Котики</a></li>
		<li><a href="/tags/birds/">Птички</a></li>
		<li><a href="/tags/about/">Об авторе</a></li>
	</ul>
</nav>

Если строку с описанием вы не удаляли, в таком случае вставьте меню сразу после неё.

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

3. Отформатируйте меню с помощью CSS

Чтобы пункты меню отображались нужным образом — т. е. в строку, а не в виде списка, меню нужно отформатировать с помощью CSS.

Для этого создайте в любом текстовом редакторе новый файл и поместите туда следующий CSS-код:

#main-menu ul {
  list-style: none;
  line-height: 2em;
  margin: 10px 0 0 0;
}

#main-menu li {
	display: inline;
	font-size: 17px;	
}

#main-menu a {
	display: inline-block;
	border: none;
	padding: 0 16px 0 0;
	text-decoration-line: underline;
	text-decoration-color: #e2e2e2;
}

Сохраните данный CSS-файл на вашем сервере — например, в корне сайта или какой-то другой папке. Чтобы Эгея смогла использовать ваш CSS-файл, путь к нему нужно прописать в шаблоне шапки страницы. Для этого откройте файл system/theme/templates/head.tmpl.php, найдите там строку:

<link rel="stylesheet" type="text/css" href="<?= $stylesheet ?>" />

…и сразу после неё впишите строку с указанием пути к вашему файлу. К примеру, если ваш CSS-файл называется mystuff.css и лежит в корне сайта, то путь к нему будет выглядеть следующим образом:

<link rel="stylesheet" type="text/css" href="mystuff.css" />

Примечание: перед выполнением этих манипуляций на всякий случай сделайте бэкап оригинальных файлов. Если впоследствии вы обновите дистрибутив Эгеи, вам понадобится повторить процедуру прописывания меню заново, поскольку изменённые вами файлы будут заменены на новые.

Удачи!

 1 комментарий    135   5 мес   Эгея

Эгея и PHP

Граждане эгейцы, нужен совет. Сейчас у меня на сайте пункты меню ведут на страницу со всеми постами с определённым тегом. Это здорово, но я бы предпочёл, чтобы в начале каждой тематической страницы отображалась витрина с превьюшками-кнопками материалов данного тематического раздела.

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

Но я, однако, не программер, и в PHP я не разбираюсь. Подскажите, плиз, кто разбирается, как сделать так, чтобы при наборе в адресной строке

https://mysite.ru/section1/

сервер выдавал пользователю страницу с витриной тематических материалов (допустим, section1.php), которая лежит у меня на сервере в виде файла и которую я могу редактировать?

P. S. Почему не сделать тематические страницы в виде .html? Потому что во-первых, хочу добавить туда штатный эгейский php-контент из шаблонов (верхний-нижний колонтитул и пр.), а во-вторых, чтобы расширение страниц в адресной строке не отображалось — ни html, ни php.

 Нет комментариев    32   11 мес   Эгея

Эгея и HTML #2

Пару недель назад я писал о досадной проблеме при вставке HTML-кода в Эгею. Суть её в том, что эгейский редактор принудительно добавляет в ваш HTML дополнительные абзацные теги <p> и </p>. Если вёрстка простая, это может быть незаметно, но если она чуть посложнее, да ещё и адаптивная, то в результате этих непрошенных правок она может прийти в полную негодность.

Поскольку варианты, предложенные в комментах, задачу не решили (тем не менее, большое спасибо авторам за них!), а поддержки нет, сегодня я специально инвестировал пару часов времени в эксперименты с эгейским редактором, пытаясь с помощью брутфорсного перебора вычислить, в каких конкретно случаях он вставляет свои [censored] абзацные теги, а в каких нет.

Так вот, похоже, мне удалось найти правильный ответ. Эгейскому редактору зачем-то нужно, чтобы каждый ваш тег <img> (т. е. картинка, которую вы вставляете не через drag-n-drop, а в виде ссылки на файл), непременно был завёрнут в теги <p> и </p>. Другие теги, а также символы перевода строки и пробелы его не волнуют. Поэтому если вы вставляете в эгейский редактор

<img href="picture.jpg">

и нажимаете кнопку «Сохранить», то на выходе, в коде страницы, вы получите вот это:

<p>…<img href="picture.jpg">…</p>

Примечательно, что эти добавочные <p> и </p> иногда могут оказаться довольно далеко от вашей картинки. Почему — не знаю, но думаю, что это зависит от синтаксиса вставляемого HTML-кода.

А теперь, Фёдор, о главном. Чтобы обойти эту [censored] редактуру, нужно подсунуть эгейскому редактору то, что он просит. То есть, заранее обернуть каждый ваш <img> в теги <p> и </p>.

В чём же тогда разница, спросите вы? Чем это решение отличается от расклада по умолчанию, при котором эгейский редактор самостоятельно делает то же самое? Отвечаю: разница в том, что когда вы сами оборачиваете ваши <img> в теги <p> и </p>, вы можете поместить их в достаточно произвольном месте, например, вынести их за пределы <div>-контейнера — туда, где лишние абзацные отступы не навредят адаптивной вёрстке:

<p>…<div><img href="picture.jpg"></div>…</p>

К такому коду у эгейского редактора уже не возникает никаких претензий, соответственно, ваш код будет оставлен в неприкосновенности.

Итого

1) Эгейскому редактору требуется, чтобы каждый ваш <img> был завёрнут в теги <p> и </p>.

2) При этом не обязательно, чтобы теги <p> и </p> находились вплотную к <img> : они могут быть размещены достаточно далеко.

3) Чтобы скомпенсировать избыток высоты, вызванный добавлением лишнего элемента <p>, можно снабдить его стилем с отрицательным нижним полем, равным высоте одной строки:

<p style="margin-bottom: -1em;">…</p>


UPD 20.12.2019: Как выяснилось в ходе дальнейшего тестирования, редактор оборачивает в абзацные теги не только <img>, но и некоторые другие теги (см. комментарии).

UPD 02.01.2020: Написал Бирману. Ответ от разработчика получен, баг признан.

UPD 20.06.2020: Воз и ныне там…

 7 комментариев    149   11 мес   Эгея

Эгея и HTML

Граждане эгейцы, очень нужна помощь зала. Требуется вставить в произвольное место эгеевской заметки HTML-код. Когда я вставляю его через эгеевский редактор, он оборачивает теги <img> и <a> в абзацные теги <p> и </p>. Это, естественно, добавляет в вёрстку ненужные переводы строки, в результате чего она разваливается. (С вставляемым HTML-кодом всё ок, я проверял его в валидаторе и если его залить в обход эгейского редактора с линком на используемые CSS, он прекрасно работает на всех браузерах.)

В хелпе Эгеи есть упоминание про дополнительные пользовательские блоки на PHP. Однако, насколько я понимаю, такой блок можно добавлять лишь в заранее определённые автором движка места (напр., начало заметки или конец) и, главное, этот блок будет добавлен во все заметки сразу. Мне же требуется добавить HTML лишь в некоторые заметки, причём так, чтобы эгеевский редактор этот HTML никоим образом не модифицировал. Если вы знаете, как это сделать, пишите, буду очень признателен.


UPD: Пример, поясняющий суть проблемы:

Вот фрагмент кода, который я вставляю в текст заметки в окне эгейского редактора:

<div><a href="all/o-vyraschivanii-2"><img src="files/growing-poster-02.jpg"><div><p>#2: Инициация</p><p>Поиски самоназвания, тайна инициации и дальнейшие приключения тайского перца</p></div></a></div>

После нажатия кнопки «Сохранить изменения» я просматриваю код страницы в браузере и вижу это:

<div><P><a href="all/o-vyraschivanii-2"><img src="files/growing-poster-02.jpg"></P>
<div><p>#2: Инициация</p>
<p>Поиски самоназвания, тайна инициации и дальнейшие приключения тайского перца</p>
</div><P></a></P>
</div>

Заглавными буквами P обозначены ненужные <p>-элементы, принудительно вставленные в код эгейским редактором. Добавление этих P и составляет суть проблемы: из-за них адаптивная вёрстка разъезжается и не работает как задумано.

 7 комментариев    131   12 мес   Эгея

Эгея и WebP

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

Почитал сеть, поэкспериментировал с Эгеей, делюсь результатами изысканий и размышлений.

WebP жмёт мощнее, чем JPEG

В моём тестировании одна и та же картинка в JPEG весила 700 килобайт, а в WebP — 600 килобайт. Экономия в 15-20%, может, и не космическая, но когда картинок на странице несколько — очень даже заметная: и по скорости загрузки, и по стоимости трафика (второе актуально, если вы — СМИ или медиапортал, к вам ходят сотни тысяч посетителей и вы платите за объём отдаваемого трафика).

WebP не особенно парится о качестве и прочих нюансах

Вот что говорит Корнел Лесиньски, один из разработчиков MozJPEG, отвечая на вопрос, не планируется ли добавить поддержку WebP в программу-компрессор ImageOptim:

«Таких планов нет... Сам этот формат не особенно интересен: менее точное цветовое соответствие, чем у JPEG; не особенно заметная выгода в сжатии по сравнению с оптимизированным JPEG в приемлемом диапазоне качества; нет поддержки прогрессивного (progressive) отображения». (Отсюда.)

Тем не менее, все основные браузеры уже поддерживают формат WebP. Интересно, почему?

WebP не поддерживается Safari

В это одновременно трудно и (зная политику Apple в отношении просьб пользователей) просто поверить. Самое забавное: WebP является абсолютно бесплатным программным продуктом с открытым кодом. То есть, за добавление его поддержки в браузер Safari фирме Apple не пришлось бы заплатить ни цента. Почему же Apple этого не делает? Возможно, вопрос не в том, сколько Apple должна заплатить Google за добавление поддержки WebP в свой браузер, а в том, сколько ребята из Google должны занести в Apple, чтобы эта поддержка там, наконец, появилась.

Что ж, подождём: рынок расставит всё по своим местам. А пока упрямцы из Apple держат бессмысленную оборону, коммерческие сайтостроители не теряют времени и уже сейчас делают две версии картинок: одну, основную, в формате WebP (её видят пользователи всех браузеров, в которых этот формат поддерживается), а другую, резервную, в формате JPG (её видят гордые пользователи Safari). Подумайте: если бы эта возня была невыгодна с финансовой точки зрения, разве они этим занимались бы?

Почему WebP победит

Я склонен думать, что WebP имеет все шансы вытеснить JPG в качестве стандартного формата сохранения фотоизображений для веба. По двум причинам:

• Во-первых, этот формат уже вовсю используется. И отнюдь не одиночками-энтузиастами, а очень крупными и очень зубастыми коммерческими игроками, не привыкшими кидать деньги на ветер. Среди них — социальные сети, медиахолдинги, инфопорталы, интернет-СМИ. Почему они переходят на WebP? Может, потому что картинки в нём красивее выглядят? Неа. Потому что картинки в нём меньше весят. Точка.

• Во-вторых — и тут я попрошу дизайнеров, фотографов и цифровых художников присесть — публику вообще не интересует техническое качество ваших картинок. (Моих, кстати, тоже.) Публику интересует одно: скорость доступа к информационно-развлекательному ресурсу. Чем больше вес картинок на странице, тем ниже скорость доступа. Как говорится, подумайте над этим.

Как только я понял, что мои восхитительно прекрасные хайрезы нафиг никому не нужны, кроме меня самого, моя жизнь как вебмастера значительно упростилась. Тяжеловесные хайрезы я перенёс туда, где им очень рады: в домашний фотоархив, а на веб я выкладываю JPGи настолько малого веса, насколько это возможно без критического (подчёркиваю: критического, а не с трудом уловимого) ухудшения качества.

Как добавить поддержку WebP в Adobe Photoshop?

Элементарно, легально и бесплатно: соответствующий плагин под названием WebPShop, написанный самим Google, давным-давно проживает тут. Для неанглоязычных пользователей перевожу инструкцию и выкладываю файлы с Гитхаба:

Установка WebPShop для Windows:

• Скачайте архив с плагином (вот для Windows x64 а вот для Windows x86) и распакуйте его.
• Скопируйте файл WebPShop.8bi в папку с плагинами Photoshop (обычно это C:\Program Files\Adobe\Adobe Photoshop\Plug-ins).
• Перезапустите Photoshop. В пунктах меню «Открыть» и «Сохранить» теперь должны отображаться файлы в формате WebP.

Установка WebPShop для macOS:

• Скачайте архив с плагином для macOS и распакуйте его.
• Скопируйте файл WebPShop.plugin в папку с плагинами Photoshop (обычно это Applications/Adobe Photoshop/Plug-ins).
• Перезапустите Photoshop. В пунктах меню «Открыть» и «Сохранить» теперь должны отображаться файлы в формате WebP.

Внимание пользователей macOS Catalina! Если после установки плагина выскочит окошко с системными ругательствами (“WebPShop.plugin” cannot be opened because the developer cannot be verified), запустите Терминал и выполните команду:

sudo xattr -r -d com.apple.quarantine /Applications/Adobe\ Photoshop\ 2020/Plug-ins/WebPShop.plugin

Вышеприведённая команда предназначена для Adobe Photoshop 2020. Если вы используете другую версию Фотошопа или папка с плагинами лежит в другом месте, скорректируйте путь.

Сохранение в WebP в Photoshop производится через меню «Save» (Сохранить). Экспорт «Save for Web (Legacy)» не поддерживается.

WebP и Эгея

По состоянию на ноябрь 2019, движок Эгеи не поддерживает работу с WebP. Это означает, что картинки в этом формате нельзя загрузить в окно редактора. Но это не означает, что картинки в формате WebP вообще нельзя использовать в блоге, работающем на Эгее. Ещё как можно! Вот, смотрите:

Если вы пользуетесь любым браузером, кроме Safari, вы увидите файл в формате WebP. (Если не верите, скачайте файл и проверьте его на детекторе лжи). Пользователи Safari увидят на этом месте точно такую же картинку, но в формате MozJPEG.

Как это сделано? С помощью всего-навсего трёх тегов:

<picture>
    <source srcset="/pictures/test@2x.webp" type="image/webp">
    <img src="/pictures/test@2x.jpg" style="width:100%">
</picture>

Суть фокуса: вы заранее сохраняете одну и ту же картинку в двух форматах (WebP и JPG) и помещаете их в одной и той же папке. Если браузер поддерживает WebP, будет загружена картинка в формате WebP. Если не поддерживает, будет показан JPG.

Здорово? Конечно! Однако неудобство заключается в том, что во-первых, вам придётся использовать FTP-менеджер для копирования WebP-файлов на ваш сервер (поскольку через эгеевский редактор этого сделать нельзя), а во-вторых, ширину картинки для корректного адаптивного масштабирования придётся ограничить шириной текста, т. е. около 740 пикселов, иначе картинка при масштабировании не будет умещаться в экран.

А что насчёт анимированного WebP?

В самом деле, ведь WebP поддерживает ещё и анимацию! Давайте-ка глянем, что он собой представляет в этом качестве и стоит ли использовать его вместо анимированных GIF, как на этом настаивает Google. (Если ролики с WebP-анимацией в вашем браузере вообще не видны, установите последнюю версию браузера.)

Вот 3-секундный тестовый видеофрагмент из тизера «IMAX® Titans Of The Ice Age» (контейнер mp4, кодек H.264, 10 кадров в секунду, размер файла 276 килобайт):

А вот результаты его кодирования с помощью плагина WebPShop:


Качество 50 (размер файла 812 килобайт)



Качество 70 (размер файла 1,1 мегабайт)



Качество 90 (размер файла 2,4 мегабайт)


Нетрудно заметить, что кодирование видео с качеством ниже 90 даёт заметные артефакты-клеточки на фоне однородной цветовой заливки (неба); при этом размер файла возрастает в геометрической прогрессии аж до 2,4 мегабайт, при том что исходный .mp4 имеет размер всего 276 кб!

Так что не очень понимаю, что имел в виду Google, рекомендуя WebP для замены анимированных GIF. Возможно, мультяшно-векторная анимация ему удаётся лучше, но для кодирования анимированных фотоизображений я бы вряд ли рекомендовал WebP. С этим гораздо лучше справляется его друг и соратник WebM.

Итого

Нужно ли добавить поддержку WebP в Эгею? Если спросите меня, я отвечу: «Разумеется, ведь это позволит сайтам на Эгее работать быстрее!» Большинство браузеров этот формат давно поддерживают. Так что главное — захотеть, правда?

 1 комментарий    215   12 мес   софт   Эгея

Эгея и красные банеры /core.php, line 2

Уважаемые пользователи движка Эгея!

Если у вас при установке новой версии Эгеи либо при её переносе начали появляться вот такие красные банеры с текстом /core.php, line 2 Error 2:

— то проверьте вашу версию PHP. Похоже, текущий релиз Эгеи (2.7, v3254) не очень дружит с PHP 7.2. В моём случае такие банеры стали появляться при обновлении Эгеи и одновременном переезде на новый хостинг. Банеры появлялись при выходе из настроек, а также на странице «теги». Как только я заменил PHP на 7.1, красные банеры перестали появляться.

Я писал об этих и других багах разработчику, г-ну Бирману, но, к большому сожалению, он за две недели ничего не ответил. Почему? Не могу знать. Возможно, он не сталкивается с подобной проблемой лично, а потому не заинтересован тратить своё время на её устранение. (Такое понимание сложилось у меня на основании прежней переписки с г-ном Бирманом.) А может, в целом охладел к Эгее и её дальнейшему совершенствованию. Однако буду рад, если ошибаюсь.

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

 Нет комментариев    42   2018   софт   Эгея