Извечный квест написателя текстов на HTML.

19 мая 2015, 19:00

Извечный квест написателя текстов на HTML.

Извечный квест написателя текстов на HTML.

Как солнце встаёт,
Знает не всяк муравей.
Лишь любопытный...

Сам квест дословно звучит так: «Я не знаю HTML, но писать пост должен на нём. Что мне делать, если я категорически не желаю изучать HTML, ибо западло?»

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

Ну нет так нет - оскорблять чувства верующих себе дороже.

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

А творить непотребство некошерно.
И, стало быть, квест делится на две самостоятельные части:

  1. Написание текста в редакторе с проверкой орфографии.
  2. Конвертирование текста в HTML.

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

Да, мы все знаем, что всеми любимый Word, Open Office, Libre Office, Google Docs, и прочие редакторы с проверкой орфографии по словарю, замечательно ловят опечатки. Позволяя при этом задействовать пользовательский словарь, ежели в текстах много нишевого жаргона, и словарь общих терминов не сильно помогает. Но с экспортом в HTML у них большие проблемы - результирующий код всё едино приходится править руками.

Что, как мы помним, вступает в конфронтацию с граничными условиями задачи - пользователь не знает, да и не хочет знать HTML.

Как народ выкручивается ?

Местный автор по разным поводам и в разное время контактировал со многими топовыми блогерами, пишущими обильно и разнообразно (что требует знания HTML в объёме несколько большем, нежели на уровне пяти тегов). И каждый раз, проявляя любопытство в рамках рассматриваемого сегодня квеста, очень удивлялся - никто из них не пишет свои вирши прямо в коде.

Да, все эти многочисленные экслеры и прочие звёзды онлайна ведут себя в точности так же, как и простые смертные - сначала сочиняют текст в умном редакторе того или иного офисного приложения с функцией проверки орфографии, а потом сохраняют текст в HTML формате. И применяют ту или иную тулзу по очистке HTML кода от разнообразной хрени, в изобилии там имеющейся. Кто видел код, вылезший из-под Ворда, тот сразу всё поймёт.

Либо отнимают собственно текст у Ворда, и через буфер обмена отдают какому-нибудь визуальному редактору, отобранному из всего многообразия такого рода софтин по критерию чистоты кода на выходе.

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

Объективности ради стоит признать, что есть довольно продвинутые и интересные очищальщики HTML кода, с пользовательскими правилами на регулярках. То есть настраиваются под себя, а потому универсальны, и многое умеют.

Но всё равно, имеем парадокс.

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

Каждый вынужден колхозить своё решение :)

Колхоз Мастера Ласто.

Колхоз Мастера Ласто.

Он совсем простой и без изысков. Некоторое число интересующихся просили в тот колхоз пустить, так что инструкция по вступлению такая.

Сам местный автор, как приверженец минимализма, пользует совсем простой текстовый редактор, в котором можно лишь набирать текст. Это Q10 в портабельном исполнении, хрен знает сколь древней версии. Не обновлялся никогда.

Там, естественно, нет никакой проверки орфографии, ни единой кнопочки, и ровно ноль панелек. Только буковки, и сам написатель этих буковок по эту сторону экрана. Над концепцией можно ржать, но автор "Игры престолов" пользуется примерно такой же штукой (даже ещё более древней), и ему это ничуть не мешает. Стало быть, и нам можно.

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

Первая непустая строка текста потом станет названием статьи.

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

Если хочется в тексте организовать подзаголовок, перед строкой малюется знак равенства. Вся эта строка потом выделится тегом заголовка H3.

Ссылка, ежели будет нужна, пишется в тексте прямо в виде абсолютного адреса. Потом обернётся соответствующим тегом самостоятельно.

Это все правила.

Далее готовый текст копипастом переносится в форму донельзя простой тулзы, которая создаёт из не форматированного текста HTML код поста.

Сама тулза не является секретом - в папочку Блоговой Наны селим файл под любым именем и в расширении .php - код этого файла таков:

<?php /* Выше этой строки в файле ничего не должно быть */

   
$_s['template']['form_editor']='

         <div id="editor">
            <form
               method="post"
               action="===action==="
            >
               ===text'
.':textarea===
               ===submit'
.':input_submit===
            </form>
         </div>'
;
   
   
$_s['title']='Конвертировать текст в HTML код';
   
   
$data=get_post_data('inp','users');
   
$inp=isset($data['inp']) ? $data['inp']: '';

   
$_s['content']=
      
h2('Исходный код:').
      
tpl_builder(
         
$_s['template']['form_editor'],
         array(
            
'===action==='     => $_s['loc']['here'],
            
'===text==='       => array(
               
'===name==='    => set_sign('users','inp'),
               
'===title==='   => 'Исходный код:',
               
'===text==='    => $inp,
            ),
            
'===submit==='     => array(
               
'===name==='    => set_sign('users','submit'),
               
'===value==='   => 'Конвертировать текст в HTML',
               
'===class==='   => 'blue',
            ),
         )
      );

   
$start='   <p>';
   
$stop='</p>';
   
$cont='  <br>';
   
$bold=array(
      
'on'  => '<h3>',
      
'off' => '</h3>'
   
);

   
$inp=explode($oslen,trim($inp));
   
$out=$null;
   foreach (
$inp as $i => $v) {
      
$inp[$i]=$v=trim($v);
      if (
$v!='') {
         
$w=$null;
         foreach (
explode(' ',$v) as $u) {
            
$w[]=this_url_is_ok($u) ? '<a href="'.$u.'" target="_blank" >Link</a>'$u;
         }
         
$v=implode(' ',$w);
         if (
preg_match_all('~^=(.+)$~',$v,$n)) $v=$bold['on'].trim($n[1][0]).$bold['off'];
         if (isset(
$inp[$i-1]) and $inp[$i-1]!=''$v=$cont.$v;
         
$out[]=$v;
      }
   }
   unset(
$inp);
   
$titul=count($out) > array_shift($out): null;
   
$hokky=count($out) > '

<div style="clear:both;"></div>
<div style="float:right;margin-right:25px;">
   <br>'
.array_shift($out).'
 '
.array_shift($out).'
 '
.array_shift($out).'
</div>
<div style="clear:both;"><br></div>

'
:'';
   
$out=str_replace(
      array(
         
'“','”',$stop.$oslen.$oslen.$start.$cont,
      ), 
      array(
         
'«','»',$oslen.' '.$cont,
      ),
      
$start.trim(implode($stop.$oslen.$oslen.$start,$out)).$stop.$oslen
   
);
   if (
preg_match_all('~'.$start.$bold['on'].'([^<]*?)'.$bold['off'].$stop.'~Usi',$out,$n)) {
      foreach (
$n[1] as $t) {
         
$out=str_replace(
            
$start.$bold['on'].$t.$bold['off'].$stop,
            
$oslen.$bold['on'].$t.$bold['off'].$oslen,
         
$out);
      }
   }

   
$_s['content'].=
      
h2('Синтезированный код поста:').
      
preg_replace(
         
'~<form([^>]+)>~Usi',
         
'<form onsubmit="return false;">',
         
tpl_builder(
            
str_replace('===submit'.':input_submit===','',$_s['template']['form_editor']),
            array(
               
'===action==='   => $_s['loc']['fold'],
               
'===text==='     => array(
                  
'===name==='  => set_sign('users','html'),
                  
'===title===' => 'HTML код:',
                  
'===text==='  => $titul.$hokky.$out,
               ),
            )
         )
      ).(
$titul==null ''h2('Внешний вид:').$titul.$hokky.$out);

function 
this_url_is_ok($u) {
   if (
preg_replace('~(^https?\:\/\/)~is','',$u)==$u) return false;
   
$u=preg_replace(array('~(^https?\:\/\/)~is','~(^www\.)~is'),'',$u);
   return (
preg_match('~^([a-zA-Z0-9_\-\.])+(\.([a-zA-Z0-9\/\_\~\?\+\-\=\&\%\.\,\#\:])+)+$~',$u)) ? truefalse;
}

/* Ниже этой строки в файле ничего не должно быть. */ ?>

Примечание.

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

Как это работает?

Предельно элементарно - демо.
Можно пихать в форму свой контент.

Другие статьи категории «Маленькие лайфхаки»

Немножко про денежные знаки.

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

Вся правда о распитии водки напёрстками.

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

Локальный web-сервер на платформе Андроид.

Локальный web-сервер на платформе Андроид. Сегодня любой манимейкер должен испытывать неподдельный интерес к маржинальным рынкам. Ежели будет кому любопытно, местный автор обязуется про маржинальные рынки сотворить письменную восторженную оду на пяти листах, но сегодня мы про них говорить решительно не станем. А речь поведём про то, без чего к маржинальным рынкам вообще не подступиться.
20 мая 2015, 10:59

№ 2Мало знать, надо...

Согласен с автором, но надо говорить и о том, что понимание, для чего тот или иной тег предназначен, особенно при форматировании текста, очень важно.

Всегда, как поборника чистоты html-кода, удивляло, зачем, если есть тег параграфа - ‹р›, нужно добавлять отбивку между параграфами при помощи тега ‹br›. Проще ведь набрать текст, и отделить абзацы 1-3 тегами ‹br›?

Понятно, что для тех, кто давно пишет в паутине, когда еще не было повального увлечения таблицами стилей и был голый html, ‹br› был панацеей, и через энное количество лет переписывать множество постов - труд по сути никчемный :)

Но все равно Мастеру респект, поколению ЕГЭ ой как пригодится :)
gordi
20 мая 2015, 12:36

№ 3К Мастеру Горди и не только.

Раньше ставил тег ‹br› после ‹/p›, но потом осознал, что можно стилями разделять, исправился. В Опере 12.17, что сейчас трудится как основная (есть RSS и почта встроена, работает портативно), новости от Ласто приходят с двойными переводами строки, ибо ‹/p›, а затем ‹br›.

Если заметили, то форма добавления страницы из первого коммента тоже перевод строки после абзаца не признаёт.

Переделал немного код местного автора под себя - четыре строки сначала под четверостишье, да тег ‹br› удалил.

Правда в коде не хватает ‹h3›, ‹h4› и ‹ul›, но это уже будет наглостью с моей стороны. С ‹hx› справлюсь, а вот со списками - нет.
‹br› появился вынужденно, ибо в RSS без него шла мешанина абзацев, никак и ничем не разделённых. Картина в стиле "вырви глаз", и местный автор не сумел с ней смириться.

Сейчас, действительно, ситуация особого смысла не имеет, но что уж сложилось исторически, то не вытравить дустом.
airsound
20 мая 2015, 13:40

№ 5Вообще-то

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

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

Нужно лишь малость: иметь плагин для ластоблога реализующий протокол дистанционного постинга.

Но ...

В связи с передачей информации в Блогой Нане (правопреемница ЛастоБлога) через поля формы с шифрованными именами, нет никакой принципиальной возможности внешнего постинга в сам скрипт. Никакой внешний плагин тут не возможен.
Алексей
20 мая 2015, 13:47

№ 6Все индивидуально...

На нынешнем этапе без сброса в ноль параметров тегов html, которые пришли из голого html, когда о CSS еще не знали (более подробно запрос в Google - Meyer Reset), приводит к тому, что дальше в таблице стилей мы вынуждены отдельно прописывать параметры необходимым тегам. И отсюда и идут дополнительные теги типа ‹br›, но так исторически сложилось и зачастую от этого уже никуда не деться, увы...
gordi
21 мая 2015, 17:25

№ 7Обновление до последней версии и тайтлы

Вопрос не совсем по теме поста, но всё же хочу задать его здесь.

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

Не плохо бы было сделать возможность силами админки ручками прописывать нужный тайтл, причём для любых видов страниц (XXXXX.html или post_XXXXX.html).
Тайтл всегда брался из первой значимой (непустой) строки, вне зависимости от того, какие теги там написаны.

Никакой ‹H1› никогда в коде не искался, тем более, что его там может и не быть вовсе - тегом ‹H1› по правилам SEO обычно выделяется название статьи в хедере, в самой статье используется ‹H2›, и далее по нисходящей. Всё второстепенное удовлетворяется тегом ‹H3›

Посмотрите код данного поста, там всё наглядно.
Александр Масленников
28 мая 2015, 04:01

№ 10Хорошая штучка.

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

Списков, красной строки, и пошло-поехало.

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

Ну а потом уж вебмастер его доводит до ума.
Возможно, уже в форме редактора поста.
Там будут кнопки подстановки разных тегов.
Школьник Митя.
Все заметки категории «Маленькие лайфхаки»