Почему конструкторы сайтов выдают плохой код? / Habr

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

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

Мы будем рассматривать причины плохого кода как в HTML, так и в CSS. Но фундаментом плохого кода является CSS, поэтому начнем с него.

Причины, делающие CSS плохим:

1) Position:absolute. Это когда все элементы на странице имеют свойство position в значении absolute. Эта причина является фундаментом, на котором основываются все остальные. При значении absolute нет возможности получить качественный код, что бы не делали разработчики такого сервиса. До недавнего времени (до необходимости создания responsive-дизайна), несмотря на грязный код, такой подход был немного оправдан, потому что он позволял пользователю сервиса свободно перемещать элементы по странице. Сейчас же, когда необходимо, чтобы сайт создавался с responsive-дизайном, использование position:absolute не оправдано ни с какой стороны, потому что при absolute нет возможности создать сайт с responsive-дизайном.

В последние 3 года появляются сервисы, которые, с одной стороны, позволяют кастомизировать сайт без ограничения, но при этом на странице элементы находятся в position:static, что позволяет получать чистый код и хороший responsive-дизайн; но обратной стороной является сложность работы в таких сервисах, потому что нельзя свободно передвигать элементы по странице. Получается у нас выбор: либо absolute – пользователю легко работать, но грязный код, либо responsive – тяжело работать, но при этом чистый код. Сейчас использование absolute не оправдано, поэтому нужно у элементов использовать static.

2) id вместо class. Если у элементов используются id вместо class, то код тоже не будет чистым. Причиной этому является то, что он будет дублироваться в CSS, и с таким кодом будет работать сложно. Эта ситуация характерна, когда у элементов position:absolute, но при position:static тоже иногда встречается. Когда у absolute не используются class, то это необходимость, когда у static – это ошибка разработчиков, потому что static позволяет заменить id классами, что в свою очередь дает более чистый код, с которым можно работать вручную.

Это 2 основные причины, из-за которых конструкторы сайтов выдают грязный CSS. Но есть и другие.

3) Не очищаются лишние стили. Например, во всех селекторах одни и те же стили, которые не имеют смысла: border:none, posiiton:static и т.д. Если эти стили и нужны, то они должны быть прописаны для всех, а не для каждого элемента.

4) Дублирование стилей на разных экранах. Например, на компьютере стоит margin: 45px auto 0 auto, а на мобильном – margin: 25px auto 0 auto. Можно на мобильном просто написать margin-top: 25px.

5) Запись стилей в не сокращенном формате. Такие стили margin, padding, background, font должны записываться в сокращенном виде. Например, вместо margin-top: 10px, margin-left: auto, margin-right: auto можно просто написать margin: 10px auto 0 auto.

Это причины, которые делают грязным CSS. Теперь мы разберем причины, делающие HTML плохим:

1) Стили в атрибуте style. У тегов стили прописаны в атрибуте style, а не вынесены в файл CSS. Если разработчики конструктора прописывают стили в атрибуте style, то помимо грязного кода есть и другие последствия:

— нельзя будет использовать классы – только id;
— нормального responsive-дизайна точно не получится: возможно только с использованием костыля в виде JS.

2) Class или id генерируются автоматически и их нельзя изменить. Они не несут смысловой нагрузки, имея следующий вид class=«s9387893484». Только этого одного пункта достаточно, чтобы испортить весь код.

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

4) Нет форматирования кода.

5) Лишние атрибуты и классы. В коде есть много классов и атрибутов, которые не нужны для стилей CSS или работы JS.

6) У некоторых тегов можно убрать класс. Например, у тега «p» можно убрать класс и в CSS прописать селектор .parent > p.

Подведем итог

Мы перечислили причины в HTML и CSS, которые экспортируемый код конструктора сайтов делают плохим. Теоретически если избежать все ошибки, которые были описаны выше, то можно получить достаточно чистый код на твердую четверку, с которым потом можно будет работать без каких-либо проблем верстальщику или программисту. Конечно, этот код будет немного хуже, чем сверстанный «гуру» верстки, но он будет как минимум не хуже, а порой и лучше, чем сайты, сверстанные в низкой ценовой категории (особенно если они с заявкой на responsive-дизайн).

habr.com

Html 5 конструкторы сайтов – что они дают и зачем нужны

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

Почему переход на html5 является лучшим решением?

Сегодня можно с уверенностью сказать, что стандарт HTML5 относительно неплохо поддерживается. Если не весь, то хотя бы семантические теги, которые в основном и составляют структуру новых шаблонов, поддерживаются хорошо. Хотя мы говорим об этих элементах как о новых, все же некоторые из них появились уже более 5-6 лет назад, поэтому сегодня их можно без проблем использовать.

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Известные html5 конструкторы

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

Конечно, прежде всего я хотел бы выделить Adobe Muse. Этот относительно новая программа, выпущенная легендарной компанией Adobe, продукты которой уже стали всемирно известными. Особенность этой программы заключается в том, что вы можете создавать сайты на html5 и css3, абсолютно ничего не понимая в этих технологиях.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как работать с Adobe Muse? Тут вам придется пройти парочку уроков, все-таки программа тоже не детская, но в целом на ее освоение у рядового пользователя уйдет пару дней, после чего вы можете творить.

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

Примечательно, что Adobe Muse это не просто конструктор, это еще и CMS. То есть вы сможете управлять уже созданным сайтом, добавлять на него различные страницы.

Рис. 1. Такие сайты можно создавать на Adobe Muse.

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

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

Конструктор сайтов от Wix

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

Wix вы можете использовать бесплатно, только если у вас домен третьего уровня (типа wix.com). За индивидуальный домен и расширенные возможности придется заплатить. В основном это 100-200 долларов в год, в зависимости от тарифа. Взамен вы получаете надежный инструментарий и возможность создания неограниченного количества веб-ресурсов.

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

Конструктор html страниц онлайн | LPBuilder.pro

Конструктор html страниц онлайн

LPBuilder.pro этo прекрaсный и прoстoй кoнструктoр пoсaдoчных стрaниц. Блaгoдaря ему Вы пoдгoтoвите результaтивную и прoфессиoнaльнo выглядящую стрaницу.

Кoнструктoр пoсaдoчных стрaниц сoздaет целевые стрaницы (landing page), кoтoрые мoжнo испoльзoвaть нaпример при:

• кaмпaниях пo плaтным ссылкaм (нaпр. AdWords),
• бaннерных и реклaмных кaмпaниях,
• кoммерческих рaссылкaх и бюллетенях.

Кoнструктoр пoсaдoчных стрaниц LPBuilder.pro

Кoнструктoр стрaниц LPBuilder.pro предoстaвляет все, чтo нужнo стрaнице, чтoбы принoсить прибыль.

• Интернет-плaтежи,
• Пoдпискa нa рaссылку,
• Блaнки кoнтaктных дaнных (генерaция лидoв),
• Стaтистикa,
• Тесты A/B.

Кoнструктoр имеет ряд прoфессиoнaльнo рaзрaбoтaнных шaблoнoв. Все элементы шaблoнoв были спрoектирoвaны тaк, чтoбы увеличить результaтивнoсть интернет-стрaницы. Пoдбoр цветoв, рaзмеры кнoпoк, рaспoлoжение элементoв стрaницы были пoдoбрaны специaльнo – тaм нет ничегo случaйнoгo. Все былo oптимизирoвaнo тaк, чтoбы склoнить пoльзoвaтеля к пoкупке тoвaрa, нaжaтия нa ссылку или oстaвления свoих дaнных.

Интуитивный кoнструктoр пoсaдoчных стрaниц

Стрaницa прaвится в грaфическoм режиме (drag and drop) – т.е. не нужнo рaзбирaться в сайтoстрoительстве или знaть HTML. Сoдержaние вывoдится нa стрaницу тaк же кaк в Word, a элементы мoжнo передвигaть мышкoй.

Мoжнo тaкже зaкaчивaть сoбственные кaртинки, рaзмещaть видеo из YouTube. Есть кнoпки „Like it” – вoзмoжнa интегрaция с Facebook, Twitter i Google+.

Вoзмoжнoсти кoнструктoрa

Вaжнo, чтo кoнструктoр интернет-стрaниц пoмoжет Вaм пригoтoвить стрaницы, кoтoрые рaбoтaют не тoлькo нa кoмпьютере, тo тaкже нa мoбильных устрoйствaх: сoтoвых телефoнaх (iPhone, smartfony), плaншетaх (iPad) или нaлaдoнникaх.

К свoей стрaнице мoжнo прикрутить сoбственный дoмен или вoспoльзoвaться oднoй из бесплaтных дoменoв, предлaгaемых Landingi.com.

Для кoгo этoт кoнструктoр?

Этoт прoфессиoнaльный кoнструктoр сoздaн:

• для фирм, желaющих реклaмирoвaться в интернете,
• для aгентств, oбслуживaющих реклaмные кaмпaнии свoих клиентoв,
• для чaстных лиц, желaющих бесплатно Создать интернет-стрaницу.

Стoит вoспoльзoвaться кoнструктoрoм LPBuilder.pro прежде всегo кaк принoсящий прибыль инструмент:

• Увеличение прoдaж,
• Пoиск нoвых клиентoв,
• Увеличение эффективнoсти стрaницы (oптимизaция кoнверсии),
• Снижение рaсхoдoв нa реклaму,
• Сoкрaщение времени пoдгoтoвки стрaницы и реклaмных кaмпaний,
• Незaвисимoсть oт дизaйнерoв и прoгрaммистoв.

Бесплaтный кoнструктoр интернет-стрaниц

LPBuilder.pro предoстaвляет кoнструктoр бесплатно. Мoжнo успешнo пoльзoвaться пoлным функциoнaлoм, кoтoрые предoстaвлены в бесплатном пaкете. Бoльшие пaкеты предoстaвляют дoпoлнительные функции, бoльшее кoличествo стрaниц и дoменoв.

Пoдытoживaя – LPBuilder.pro этo эпoхaльный кoнструктoр. Этo первый инструмент пoзвoляющий реaлизoвaть бизнес-цели с пoмoщью интернет-стрaниц.

lpbuilder.pro

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

Ну, проверьте этот список лучших CMS сайтов с открытым исходным кодом.

Интернет тоже работает с открытым исходным кодом.

Большинство из них предназначено для серверной части, и большинство серверов в мире работают под управлением Unix или Linux.

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

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

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

WordPress, пожалуй, лучший конструктор сайтов с открытым исходным кодом, который шаг за шагом и без лишнего шума превратился в одну из важнейших систем управления контентом (CMS) в Интернете.

С его помощью можно переходить от самых маленьких блогов к самым критическим СМИ, таким как The New Yorker, BBC, Forbes и т. д.,по данным Forbes, до 25% веб-сайтов по всему миру.

WordPress сам предоставил данные, поэтому к любым данным, полученным от самих заинтересованных сторон, следует относиться с осторожностью. По его словам, 75 миллионов веб-сайтов используют его в качестве CMS, что, в свою очередь, позволяет 409 миллионам пользователей видеть более 23 600 миллионов страниц, размещаемых в WordPress каждый месяц, а пользователи создают 69,5 миллиона новых сообщений и 46,8 миллиона новых комментариев ежемесячно.

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

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

Есть и отрицательная часть.

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

Кроме того, как это происходит на других доминирующих платформах, вы можете найти несколько неисправных плагинов, которые скрывают вредоносное ПО.

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

Система управления контентом Joomla изначально была разработана из программы с открытым исходным кодом Mambo.

Из-за различий в его коммерциализации большая часть команды, вовлеченной в разработку Mambo, отвернулась от него и сосредоточилась на разработке Joomla в качестве своего проекта.

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

Joomla написана на языке программирования PHP и использует MySQL в качестве базы данных.

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

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

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

Drupal — это конструктор сайтов с открытым исходным кодом, написанный на PHP и разработанный обширным сообществом и поддерживаемый Drupal Project.

Его модульность и возможность параметризации сделали его очень популярным и используемым для различных типов веб-сайтов, от бизнес-порталов до личных блогов, через социальные сети, форумы или интернет-магазины.

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

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

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

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

Вы также можете разработать индивидуальные модули.

OpenCMS — это конструктор сайтов с открытым исходным кодом от немецкой компании Alkacon Sofware, которая отвечает как за ее распространение, так и за постоянное развитие.

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

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

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

OpenCms основан на языке разметки XML и различных технологиях Java, в отличие от большинства важных CMS, таких как WordPress, Joomla, Drupal и TYPO3, которые используют язык программирования PHP.

Менеджер контента OpenCMS не зависит от какой-либо платформы, он работает в любой операционной системе и выполняется непосредственно в веб-браузере.

Ранее вы должны были связать CMS с базой данных, такой как MySQL, PostgreSQL, Oracle, HSQLDB, DB2 или MSSQL.

OpenCms является основой для создания веб-страниц некоторых крупнейших компаний, таких как производитель спортивных товаров The North Face или кофеварка Lavazza.

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

OpenCMS также подходит для создания интрасетей и экстрасетей.

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

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

Вы используете другой конструктор сайтов с открытым исходным кодом? Дайте мне знать в разделе комментариев, чтобы добавить его в список.

Please follow and like us:

itisgood.ru

HTML редактор онлайн — Be1.ru

16.12.2019 18:20

Навигация по нашим инструментам стала более удобной и быстрой

Наших инструментов становится много, но у каждого пользователя есть свои часто используемые. Теперь их можно выделить и очень быстро найти — http://s.be1.ru/8qsjn

03.12.2019 13:13

Добавили возможность сохранения галочки Google в чекере позиций

Нарастив ресурсы для съема позиций в Google, теперь мы можем дать возможность сохранять проекты с галочкой — https://be1.ru/s/kdx9o

28.11.2019 18:21

Дополнили функционалом инструмент по проверке позиций сайта

Добавилась возможность выбора домена и языка результата в проверке по Google.

12.08.2019 10:00

Разработали новый SEO-инструмент, определяющий частотность запросов!

Инструмент поможет определить базовые виды частотностей поисковых запросов, данные тянутся непосредственно из Яндекс Вордстат. Ссылка на инструмент: https://be1.ru/wordstat/

02.07.2019 12:00

Обновили дизайн старого инструмента!

Мы до неузнаваемости обновили инструмент определяющий IP адрес компьютера, теперь в нем куча плюшек и современный дизайн! Ссылка на инструмент: https://be1.ru/my-ip/

13.06.2019 14:34

Добавили новый SEO-инструмент!

Он умеет быстро и бесплатно определять систему управления контентом (CMS) сайта.

07.05.2019 10:05

Мы переехали на новый сервер!

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

26.03.2019 10:47

Падение сервера 25.03.18

Остановка в работе сервиса связанна c DDoS атакой, в данный момент работа Be1 полностью восстановлена. Будем укрепляться и ждать следующую волну. Извините за временные неудобства.

19.02.2019 10:00

Новое расширение для анализа сайтов!

Наше расширение помогает бесплатно в один клик провести глубокий SEO-анализ сайта. Рекомендуем: https://be1.ru/goto/extension

14.12.2017 12:07

Обновления для Антиплагиата!

Функциональность инструмента Антиплагиат обновилась — исчезла строка «Исключить URL». Теперь эта функция работает автоматически при использовании вкладки «Проверить URL». Также, первая проверка инструмента осуществляется намного быстрее. Однако, если Вы нацелены проверить всё до деталей, нажимайте кнопку «Расширенная проверка».

be1.ru

Про идеальный конструктор сайтов / Habr

Ко мне часто обращаются знакомые и знакомые знакомых с просьбой сделать им сайт или интернет-магазин. «Ты же этот, как его, интернетчик!» С интернет-магазинами сейчас все просто: нормальный магазин делать долго и дорого, поэтому все желающие моментально отправляются на insales.ru или ecwid.ru. Если человеку нужен классический landing page под проект или акцию — тоже есть, допустим, landingi.com или lpgenerator.ru. А вот уже если там не все устраивает — можно думать самому или советовать нормального разработчика, за другие деньги, конечно.

А вот с «обычными сайтами» («визитки», как их называли еще 10 лет назад) — засада. Конечно, есть wix.com, неприкаянный ucoz.ru и сотня других билдеров, но советовать их как-то боком выходит: люди, далекие от интернета, видят мощный редактор с блоками типа «текст» или «картинка», и либо пугаются, либо (что еще хуже) таки рождают себе сайт «шоб красиво», пихая туда все блоки, кажущиеся им «крутыми». Получается парадокс: сервис, сделанный для полного чайника, этого чайника либо отпугивает, либо дает ему криво натворить дел.

Что мы можем сделать?

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

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

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

Информативный контент

Учтем, у клиента нет готовых текстов для сайта. Можно нанять копирайтера, можно написать самому, но это стоит денег или требует определенных знаний (а если есть деньги или опыт — зачем вообще билдер?)

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

Стандартные блоки

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

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

Автоматическая генерация стилей

Окей, bootstrap. А значит, и less. То есть, компиляция на клиенте, функции, переменные и прочие миксины. Получается, цветовую схему (и немного layout) тоже можно генерировать и модифицировать на клиенте, «не отходя от кассы».

И это только начало, дальше можно анализировать поведение пользователей на сайте и автоматически «мутировать» дизайн для максимизации конверсии. Можно сделать 100500 блоков и собрать их в готовые «пресеты» на все случаи жизни. Приглашаешь гостей на свадьбу — 5 минут, и сайт готов. Открываешь магазинчик — 7 минут, и поехали. И, что важно, такой сайт будет заметно лучше и по виду, и по функциональности, чем большинство сайтов оффлайновых контор.

З.Ы. На картинке Smoking Spaceman, сдавайтесь, человеки!

habr.com

Онлайн-инструменты для кодеров / Habr

Онлайн-сервисы становятся все популярнее, постепенно усложняя функционал и улучшая интерфейсы. В этой подборке представлены онлайн-инструменты для кодеров.

Cloud9

«Это Google Docs, только для кода» — так говорят о проекте. Облачный сервис вырос из Mozilla Bespin. Основные фишки: SSH, drag-and-drop и возможность разработки оффлайн.

Koding (публичная бета)

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

CodePen

Инструмент для фронт-энд разработки, позволяющий легко оперировать с CSS/HTML/JS-конструкциями, позволяет подключать js-библиотеки: jQuery, MooTools и т.д. Авторы — Alex Vazquez, Tim Sabat и небезызвестный Chris Coyier.

JSFiddle

Один из самых популярных инструментов для работы с JavaScript/HTML/CSS/SCSS. Прост, удобен, умеет подключать дополнительные библиотеки.

Dabblet

Аналог предыдущего сервиса с достаточно приятным интерфейсом.

Pastebin.me

Сервис для настоящих любителей минимализма — никаких лишних элементов в интерфейсе, только самое нужное, только хардкор.

CSSDesk

CSS-песочница с приятным и удобным интерфейсом.

jsdo.it

Кодинг-сообщество для фронт-энд разработчиков. Подходит для экспериментов с HTML5, WebGL, JavaScript и многим другим — функционал впечатляет.

Tinker

Простая JS/HTML/CSS-песочница.

Tinkerbin

Еще одна простая аналогичная песочница.

SQL Fiddle

Инструмент для работы с SQL-базами от разработчиков с Аляски.

ReFiddle

Сервис для работы с регулярными выражениями на Ruby, JavaScript и .NET.

CSSDeck

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

JS Bin

HTML/CSS/JS плюс консоль.

Thimble

Разработка от Mozilla, код и его результат отображается на одной странице в режиме реального времени.

Liveweave

Очень простой в использовании — никакого логина, шаринга, только окна с кодом и результатом.

Google Code Playground

Сервис для работы с Google API.

Compilr

Полноценная среда разработки, интерфейс реализован с использованием всеми любимого фреймворка — Twitter Bootstrap.

Знаете еще подобные сервисы? Пишите в комментарии — добавлю.

habr.com