Идея. Конструктор сайтов в режиме диалога


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

    Сразу предупрежу, в посте речь пройдет про разработку «типовых сайтов». Понятно, чтобы разработать серьезный сайт или сервис необходимы глубокие знания и опыт. Но с разработкой блогов, сайтов-визиток, портфолио, каталогов, небольших магазинов и т.п., вполне мог бы справится среднестатистический пользователь интернета. Если бы знал «Как?»…

    Идея


    Суть в том чтобы разрабатывать сайт отдавая короткие команды на «почти естественном» языке. То есть на языке максимально близком к естественному (насколько позволит ИИ).

    Вместо того чтобы изучать какой-то конструктор, учить терминологию, осваивать основы html/css/php/js/верстки/… и т.п. можно просто открыть понравившийся шаблон и начать его изменять простыми командами.


    Как это может выглядеть?


    1. Пользователь сохраняет на сервере файлы DialogCMS
    2. Обращается к сайту, так может выглядеть стартовый экран

    3. Предположим пользователь начал с пустой страницы. Вверху экрана он видит панель системы.

    4. Пользователь вводит одну или несколько команд, возможно используя распознавание голоса. Система анализирует команды и «переводит» на формальный язык. Если пользователь согласен с «переводом» — он подтверждает команду, если нет – переформулирует запрос.

    5. Система в ответ на команды конфигурирует сайт.

    6. Пользователь может настраивать сайт. В данном примере он меняет цвет шапки (здесь и далее команду и результат буду показывать на одном рисунке)

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

    8. Отдавая простые команды пользователь дальше меняет и настраивает сайт.



    Тут может сложиться впечатление что все описанное проще сделать в конструкторе чем через диалог. Отчасти так и есть — поменять цвет шапки можно и воспользовавшись контекстным меню. Но предлагаемый подход гораздо шире.

    Одной командой можно добавить новый модуль, раздел или виджет, можно подключить bootstrap, или «добавить анимированную галерею». Можно просмотреть производительность или установить счетчик посещаемости, настроить учетную запись, политику регистрации, резервное копирование, локализацию… и так далее.

    Пользователь может щелкнув на любой текст – переписать его. Может легко «сделать все поярче» или «попробовать в синих тонах» или «повесить на главную слайдер» или «добавить страницу ссылок»…

    По сути система (в идеале) соответствует «супернавороченному интерфейсу», где все называется так как предполагает пользователь. Но пользователь этого интерфейса не видит, и потому не пугается)

    Смысл системы не в том чтобы дать абсолютно универсальный инструмент, а в том чтобы помочь человеку далекому от IT быстро создать простой сайт, проверить мысли и идеи. Кого-то возможно устроит такой результат, кто-то поймет что возможностей системы ему не хватает и закажет доработку у проф. дизайнера, кто-то вообще использует систему только чтобы создать прототип, обкатать пользовательские сценарии и сядет писать ТЗ для нормальной студии уже понимая что он хочет…

    Как это может работать?


    Теперь опишу как по моему мнению эта система могла бы работать.

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

    1. Находим типичные фразы, такие как «поиграть со шрифтами», «резиновый дизайн» и т.п. исполняем их.
    2. Приводим все слова к начальной форме
    3. Ищем слова-элементы: «шапка», «подвал», «логотип», «телефон», «название», «страница», «выделенный», «текущий», «ссылка»… и т.п. Таких слов будет довольно много и они будут описаны в базовой структуре сайта.
    4. Ищем слова-уточнения: «слева», «справа», «внизу», «вверху», «над», «под», «в» и т.п.
    5. Ищем слова-свойства: «фон», «цвет», «шрифт»… и т.п.
    6. Ищем слова-значения: «зеленый», «синий», номер, строка в кавычках… и т.п.
    7. Ищем слова-эффекты: «тень», «градиент», «блик», «курсив»… и т.п.
    8. Остальной текст выкидываем, разбиваем по предложениям, перечисления (слова одного типа идущие через запятую или «и») – разбиваем на самостоятельные фразы (дублируем слова фразы вне перечислений).
    9. Поочередно сравниваем фразы с образцами. Такими как:
      a. уточнение1 + элемент1 + элемент2 -> элемент2, поместить рядом или в элемент1, в соответствии с уточнение1.
      b. свойство1 + элемент1 + значение1 -> Для элемент1, значение свойство1, сделать равным значение1
      c. элемент1 + свойство1 + значение1 -> то же что в пункте b
      d. значение1 + свойство1 + элемент1-> то же что в пункте b
      e. элемент1 + значение1 -> у элемент1, текст содержимого поменять на значение1.
      f. элемент1 + эффект1 -> для элемент1, добавить эффект эффект1.
      g. И т.п…
    10. На выходе получаем комплект команд для конфигуратора, и набор соответствующих им фраз на «формализованном языке», для показа пользователю.

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

    Обработку запросов можно выполнять в облаке, что позволит активно развивать анализатор и добавлять новые фразы (в т.ч. новые фразы могут добавлять сами пользователи).

    Из облака возвращается формализованный ответ для пользователя и команды для конфигуратора.

    Конфигуратор, я думаю имеет смысл делать трехуровневым:

    1. Первый уровень – абстрактный. Тут находятся все элементы сайта, назначаются/изменяются их свойства, взаимное расположение, и т.п.
    2. Второй уровень – структурный, он должен включать описания страниц на «языке разметки», наподобие того, что я описывал в своем первом посте habrahabr.ru/post/167525. Суть в том чтобы иметь легко редактируемую структуру представляющую весь сайт. На основе этой структуры генерируется базовый код сайта.
    3. Третий уровень – уровень кода. На этом уровне продвинутый пользователь может вносить правки непосредственно в код сайта. Например отредактировав элемент в Хроме – перенести css-свойства в свойства элемента. Также на этом уровне могут подключаться различные «фишки», библиотеки, украшательства и т.п.


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

    Плюсы системы:


    1. Крайне низкий порог вхождения. Фактически любой пользователь интернета может создать себе сайт. Если он выражает свои мысли уж совсем нестандартно – нечто не мешает заглянуть в список типичных фраз и понять терминологию сайтостроения на примерах.
    2. Самообучение. По ходу разработки сайта пользователь видит, как его фразы превращаются в «правильные», что приучает его к правильной терминологии и т.п.
    3. Гибкость. В отличии от типичных конструкторов сложность сайта может быть гораздо выше.
    4. Новые технологии. Используя простые команды пользователь может подключить к сайту библиотеки и фреймфорки, не разбирая детально их работу и интеграцию с другими частями сайта.
    5. Альтернативные варианты использования. Например – быстрое прототипирование.

    Минусы подробно перечислять не буду:)
    Основные, на мой взгляд — это: сложность реализации, возможные проблемы с безопасностью, и другие нюансы связанные с тем что пользователь не особо понимает «что творит»…

    Почему это нужно?


    Самым сложным для новичка часто является не какие-то конкретные вопросы, а отсутствие общего понимания процесса, концепций и терминологии. Он просто не знает, что строчка куда он вводит текст чтобы что-то найти – может называться например «модулем отображения виджета поисковой формы»…

    Прим. В качестве отвлеченного примера. Часто наблюдаю как начинающие и даже уверенные пользователи пытаются сделать что-то не совсем стандартное в Word или Power Point. Зная примерно как может называться команда они перебирают половину вкладок меню наводя на кнопки и читая посказки… Тогда как с подобным «голосовым помощником», можно было бы просто сказать «сделать эту картинку темнее» и все.

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


    В качестве примера: известный конструктор сайтов, имеет вот такой интерфейс сразу после регистрации нового сайта пользователем. Самостоятельно во всем разобраться новичку не просто.

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

    Мысли по реализации.


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

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

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

    Upd
    Судя по комментариям я похоже плохо сформулировал основную идею системы, увлекшись деталями.

    Поэтому акцентирую несколько моментов:
    1. Я не предлагаю вернуться во времена консолей. Напротив, предлагаю двигаться дальше, в сторону интелектуальных средств разработки.
      В идеале, для меня, я рассказываю системе какой сайт я хочу — а она его в реальном времени строит… я вношу исправления, эксперементирую и т.п. Все это без терминологии, правил, команд, шагов и т.п.
      Насколько это возможно уже сейчас — я и пытался представить в посте.
    2. Команды могут быть очень нестандартными. Так как система учитывает текущую конфигурацию, наличие/отсутствие элементов на экране и т.п. — то не нужен сильный ИИ чтобы понять что хочет пользователь в данный момент
    3. Предлагаемая система не заменяет обычную CMS, а дополняет ее. Пользователь может настраивать сайт через обычную панель инструментов, править тексты и элементы наподобие того как это реализовано на wix.com. Но когда он сталкивается с чем-то непонятным — он может задать вопрос системе и сразу решить проблему, а не искать информацию по форумам, и не думать как же применить знания в данном конкретном случае...
    4. Голосовой ввод — это только вариант ввода. Пользователь может вводить команды текстом, а «визуальные команды» — просто выполнить в редакторе, наподобие wix.com

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 25

      0
      Не вижу особого смысла в голосовом управлении, для большинства клиентов он и вовсе будет неудобным — офис, вокруг люди, а ты с компьютером разговариваешь, да еще точность распознования страдает.
        0
        Голосовое управление только в качестве альтернативы. Можно вводить команды вручную или вообще использовать обычную панель управления.

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

        В остальном — конструкторов сайтов много, наработок — тоже. Для того же Drupal — Drupal Garden как пример реализации, AEgir — как основа для подобного сервиса и т.д.
          0
          Упомянутые сервисы — не многим проще Drupal в освоении. Везде человек должен понимать концепцию сервиса и вообще сайтостроения до того как начнет разработку…

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

          По крайней мере помогает настолько насколько позволит понимать команды пользователя ИИ в облаке. А ИИ — можно развивать… Уверен, со временем сделать сайт или программу можно будет просто объясняя компьютеру что тебе нужно. Но ведь с чего-то надо начинать.
            0
            Достаточно просто (для клиента) сделан сервис wix.com — никаких начальных знаний не требуется: выбирай шаблон, наиболее близкий по замыслу и двигай/раскрашивай блоки как душе угодно.
              0
              У wix.com — замечательный редактор тем для сайта. И недаром у него такая популярность. Но установить новый модуль, нарастить функционал, решить оперативно проблему или реализовать «фичу» — в нем таких же простых инструментов нет.

              На 7-й картинке видно что я предлагаю тот же подход для настройки темы. Но управление дополнено инструментом с ИИ, которого как раз и не хватает сложным системам.
          +3
          Этож надо еще учить клиента «фразам», поскольку не зная их он захочет воспользоваться своими, типа: "рюшечку прикрутить слева от логотипа и что бы мерцала и бликовала"…

          Идея не новинка, уже во многих конструкторах используют пошаговую настройку. А в качестве голосового управления, к сожалению у нас это пока плохо приживается… Даже на гугле хабре есть голосовой поиск и то, я им не пользуюсь.
            0
            Смысл в том чтобы фразам как раз не учить. Фраза «рюшечку прикрутить слева от логотипа и что бы мерцала и бликовала» — может быть отчасти распознана даже тем алгоритмом что я привел — будет добавлен пустой элемент слева от логотипа с добавленными эффектами «мерцания» и «блик». Если конечно эффекты такие есть.

            Суть как раз не в пошаговой настройке, суть в создании системы адекватно реагирующей на простые команды. Без привязки к конкретным шагам/терминам/модулям/и т.п…

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

            А насчет голосового ввода, я уже понял что зря о нем помянул, многим он похоже очень не нравится. Хотя, имхо, потенциал у него неплохой, просто современные интерфейсы не очень для этого предназначены. Вводить одну строку голосом — смысла нет, быстрее напечатать, вводить текст — тоже не особо удобно — ошибок много… А вот отдавать команды, которые потом еще нужно подтвердить/отменить — может получится. В google glass — вроде хвалят голосовое управление.
              +2
              голосовой ввод — это как видео-телефон. Вроде потенциал есть, фантасты любят — а в реальности мало где используется. Отчасти потому что распознование слабо работает, отчасти потому что не очень удобно это.
                0
                Поддерживаю.
                Quiensabe, попробуйте голосовым вводом подвигать простой кубик, фразами: «Влево», «левее», «еще левей»,«чуточку еще левей»,«в лево до конца»,«влево, на уровень с меню»… и это только про «лево». — к чему говорю, мало того что вам еще интеллект небольшой придется писать, а это затратно (в случае если нет спонсора).

                А вот отдавать команды, которые потом еще нужно подтвердить/отменить — может получится
                все может, только я бы данную фичу применил бы где посерьезней чем простой редактор шаблонов сайта.
                  0
                  В тексте статьи:
                  7. Выделив мышью какой-либо элемент сайта пользователь может работать с ним – перемещать, менять размер, менять код и т.п
                  Вся работа с графикой — строится через визуальный редактор. Мышкой. На картинке даже нарисованы маркеры для перетаскивая логотипа, изменения размера, вращения и т.п… Голосовые команды при этом не используются.

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

                    З.Ы.:
                    В веб-разработке (дизайн, верстка, программирование и т.п.) я уже более 7 лет, и говорю с уверенностью, что для такого маленького сервиса — такой большой движок (ИИ и распознавание голосом + редактор) очень дорогостоящее и неуместное творение. Ему бы другое применение.
                      0
                      Я просто уже не знаю как формулировать. Через визуальный редактор — идет работа с графикой, потому что это просто удобнее.
                      Естественно человек может и управлять голосом, если система поймет его команду — она ее выполнит.

                      Я говорю о том что вот такого "«Влево», «левее», «еще левей»,«чуточку еще левей»,«в лево до конца»,«влево, на уровень с меню»" — будет, потому что пользователь просто подвинет элемент мышкой и все.

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

                      Суть не в конкретном применении сервиса, а в подходе, экстраполировать его на другие области — дело времени.
                      В веб разработке я больше 10 лет, и верю в идею))))
                        +1
                        Да прибудут с вами силы и вера Джедаев, успехов вам в вашем нелегком начинании.
                        0
                        я бы еще заметил параметр как скорость обработки запроса к системе.
                        п.с. чем, к примеру меня как потенциального клиента, можно мотивировать к выбору именно этого сервиса? преимущества перед другими аналогами и т.д. команды голосом не интересуют)
                          0
                          Вы как пользователь Хабра — не являетесь потенциальным клиентом по определению.
                          Моя система для тех кто делает первые шаги в разработке, не понимает терминологию, и т.п…

                          Когда я в 2001 пытался разобраться как создать сайт в интернете, то для меня все было новым и необычным. У меня не было учителя которого можно было бы спросить «А что такое JS? А как сделать выпадающее меню? А как сделать чтобы вот этот блок тянулся, а этот нет?»… и так далее. Просто чтобы «врубиться в терминологию», понять как тут все связано и работает — ушли недели.
                          Мне кажется люди тут забыли как они были новичками.

                          Или вот пример. Я занимаюсь 3D-графикой. Для меня интерфейс Maya логичен и понятен. Ничего другого мне и не надо.
                          Но предположим вы в 3D-графике новичок. От интерфейса разбегаются глаза (там реально много элементов). Вам удалось собрать из примитивов простой ролик, но когда назначили объекту текстуру — она «поплыла»… Что делать?

                          На запрос в гугле «Maya плывет текстура» — ничего хорошего вы не получите. Потому что текстура может «плыть» по сотне причин. Для и называют все эффект по разному…

                          Теперь предположим у вас есть такой вот помощник. Вы выделяете объект и пишите (или произносите) команду «устранить искажения текстуры». В отличие от гугла который бы команду не понял — у помощника есть информация о текущей работе, геометрии объекта, текстуре и т.п… С учетом этих данных вы получаете ответ — «Искажения текстуры вероятно вызваны отсутствием развертки (UVW-карты). Создать карту автоматически (пункт меню такой-то)?»…

                          И в ответе нет ничего фантастического. Зная тип геометрии объекта, режим наложения текстуры и то что пользователи часто называют проекционные искажения словом «плывет» — это элементарный вывод не требующий даже ИИ.

                          Как думаете, в таком виде система бы вам пригодилась?
              +2
              Всё гениальное просто. А тут не так.
                0
                На гениальность не претендую)
                Но имхо — тут как раз для пользователя проще чем где-либо.
                По сути — редактор типа того же wix.com (который и популярен благодаря простоте), но с универсальным «решателем проблем» которому можно по русски сказать, что нужно и сразу получить ответ, вместо того чтобы искать нужный модуль в гугле, а думать как его установить…
                +1
                Хорошей идеей было бы встроить в cms что-то типа unity dash.
                У вас же получается уход от GUI в сторону консоли, когда весь софт уже много лет движется в прямо противоположном направлении.
                  –3
                  Мда, похоже либо идея моя фигня, либо я совсем описывать не умею… :(

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

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

                    Вы разве никогда не работали с заказчиком?
                    «Давайте вот-это сдвиним на 10см левее… Нет, теперь правее… Да, вот так хорошо. И давайте сделаем чтоб это было похоже как на фейсбуке… угу… И тут цвет какой то не такой… Погармоничнее надо сделать». Им инструмент визуальный надо дать, а не диалоговый.

                    А программисту/верстальщику — ему проще кодом обьяснить, чего он хочет.
                      0
                      Вы удивитесь, такой графический редактор уже есть — habrahabr.ru/post/170075/

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

                      Серьезно, у меня куча умных знакомых которые мало что понимают в сайтостроении, но уверен дай им такой инструмент и они соберут между делом весьма интересные вещи…
                        0
                        Ну почитайте про тот графический редактор — к нему теже притензии. Вся проблема голосового управления в том, что им хорошо подавать однозначные команды — удалить/добавить, закрыть/открыть, назад/вперёд. А вот «аналоговые команды» — например «подвинуть влево», «скруглить углы» и так далее — проще показывать.

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

                        А своим знакомым дайте программу для прототипирования интерфейса. Не смогут сделать «весьма интересную вещь» там — не смогут это сделать нигде.
                          0
                          Прототип интерфейса они сделают конечно. Но толку от прототипа? Из него сайт делать все равно мне (или другому разработчику) придется. А потом когда они что-то захотят изменить — опять мне… Нужен интеллектуальный инструмент.

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

                            Заказчику с исполнителем нечем больше общаться кроме как голосом. Если Вы предложите заказчику доступ напрямую к мозгам/навыкам исполнителя — он с радостью согласится.

                            P.S. А вообще разговор через ТЗ даже лучше чем голосом.

                Only users with full accounts can post comments. Log in, please.