Какие блоги с уникальной версткой отдельных статей вы знаете?

Question

[Юрий]

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

Иногда попадаются сайты с уникальной версткой каждой статьи.
пару примеров:
каждая статья - сверстана отдельной html страничкой.
worrydream.com/#!/LadderOfAbstraction

блог майкрософт - каждая статья как лэндинг
news.microsoft.com/stories/people/katie-stone-pere...

Какие примеры подобных блогов/сайтов вы знаете? то есть где каждая статья как минимум выходит за рамки привычных "прямоугольных" статей?

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

Благодарю за внимание.

Comments

[Kadzi]

setka.io
verstka.io

Answer 1

[Максим Тимофеев]

Любой сайт, в том числе и приведенные вами, это: css+html+js (c точки зрения верстки)

первый мой пример человек верстает каждую статью в IDE. во втором случае у майкрософт думаю есть какой то wysiwyg редактор,

дизайн сайта состоит (грубо говоря) из layout и контента. wysiwyg - есть на любой системе, не думаю, что MS не исключение. Как контент верстать в IDE не представляю, это странно. Как layout изменять через wysiwyg, тем более с нестандартной версткой и навигацией не понимаю тоже. Для layout - IDE, для контента wysiwyg.

Comments

[Юрий]

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

если вкратце то стек такой: jade + markdown + yml + git. да, это гиковское решение, но немного потренировавшись писать статьи в таком виде супер удобно, удобнее чем визивиг, + для продвинутых можно легко переопределить любые части лайаута.

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

и даже не знакомый с системой человек может легко читать исходники этих статей и писать их.

[Максим Тимофеев]

Юрий: Все можно. Есть куча сервисов песочниц где можно создавать в два клика landing. Например tilda, там и api есть по которому можно забирать html и зависимости. Но это все не годится для нормального проекта. Это баловство для людей не знакомых с html.

[Юрий]

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

меня сейчас больше интересуют другие примеры подобных сайтов для вдохновения.

[Максим Тимофеев]

Юрий: Систем для юзеров миллион:
www.ucoz.ru
https://tilda.cc/ru/
https://www.webasyst.ru (облачный вариант)
и еще куча, вы делаете аналог? Зачем?

[Юрий]

Максим Тимофеев: я делаю блог для себя, плюс скорее всего отдам исходники и концепцию в опен сорс. я не собираюсь делать сервис для клиентов.

[Максим Тимофеев]

Юрий: А зачем для себя такое городить, если сам можешь ручками сделать лучше?

[Юрий]

Максим Тимофеев: хтмл относительно несложно писать, но текст в исходнике сложно читать. хочется чтобы статьи были в простом текстовом формате, и в то же время выглядели очень насыщенно в хтмл, при этом не портя исходный тхт, с которым я также часто работаю. люблю писать статьи в простом notepad++, а также на телефоне.

[Максим Тимофеев]

Юрий: люблю писать статьи в простом notepad++, а также на телефоне. - для этого есть админ часть сайта с визуальным редактором

[Максим Тимофеев]

Максим Тимофеев: Тогда уж рациональнее написать приложение для телефона, которое будет по api сохранять на сайт.

[Юрий]

Максим Тимофеев: и на выходе мы максимум получаем как я и писал "прямоугольные статьи". я понимаю что "главное же контент" но речь сейчас о другом. для получения статей с оформлением хотя бы как у майкрософта нужен уже лэнд генератор какой-то. тем более что на том телефоне котором я пишу, даже симки нет (не то что интернета), он очень старый но с qwerty клавиатурой на нем можно целую книгу написать.

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

[Юрий]

Максим Тимофеев: и телефон на древней windows mobile. пока не видел достойную замену моему htc touch pro
да и для моб приложения нужно будет писать сложное гуи (и в реализации и в использовании) чтобы реализовать функционал создания таких статей.

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

[Максим Тимофеев]

Юрий: подключите css framework (свой или готовый), вшейте его в визуальный редактор и пользуйтесь.

[Максим Тимофеев]

Юрий: например imperavi редактор можно бесконечно расширить своими стилями форматации и написать кучу плагинов, вплоть то вставки анимаций, генерации меню на основании якорей и т.д.

[Юрий]

Максим Тимофеев: спасибо за ссылочку, в другом проекте как раз пригодится, понравилось простое АПИ для плагинов. но как сделать в нем редактор лэндов с трудом представляю, понятно что можно своих блоков навставлять, но юзер должен сам добавлять контейнеры типа бутстраповских container / container-fluid чтобы контент был сжат по центру либо растянут по всей ширине. да еще и легко менять их. да и с другими блоками, вставить то легко, а как поменять на другие? без полноценного лэнд генератора тут вряд ли обойтись одним визивигом.

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

[Максим Тимофеев]

Юрий: Для подобного надо писать свое решение в виде SPA например на Angular, imperavi будет частью. Посмотрите как сделано tilda.

[Юрий]

Максим Тимофеев: признаться, для личного блога я не готов написать свой лэнд генератор ;)
тем более что без него все проще и удобнее.

а почему именно тилда? у нее какой то код более понятный или у вас с ней опыта больше?

[Максим Тимофеев]

Юрий: Просто как пример. Но у них достаточно хорошо все сделано. Api есть, когда заказчик хочет генерить лендинги под рекламные компании разные и периодически, я подключаю ее. Он там в их редакторе мастерит что захочет и сохраняет, а система забирает с нее по api этот говнокод и встраивает в сайт.

[Юрий]

Максим Тимофеев: отметил решением за волю к победе.
хотя я и остался при своем, но пару инсайтов все таки появилось, спасибо

[Юрий]

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

Answer 2

[sim3x]

Шашечки или ехать?

Ехать - любой шаблонизатор для статических сайтов и ручная правка хтмл

Comments

[Юрий]

как писал в комментах для себя я выбрал стек для написания статей с оформлением подобного рода в виде jade + markdown + yml + git. то есть без wysiwyg пишем в простом тхт, который читается так же легко как и пишется.
мне больше интересный примеры других сайтов, для вдохновения и может быть взять какие то фичи.

Answer 3

[Егор Казанцев]

Бросайте блоги - сейчас в тренде ютуб =)

Comments

[Юрий]

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

[sim3x]

ютуб уже давно не в тренде
в тренде твитч

[Юрий]

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

[Максим Тимофеев]

Судя по вопросу и живости обсуждения - в тренде ананизм