Расширение языка HTML

smevok239 · August 23, 2012

Здравствуйте!

Я хотел бы посоветоваться с обитателями этого форума по вопросу, который я опишу ниже.

Немного предыстории. Я учусь на программиста, но про этом мне нравится верстать сайты, и я хорошо, но не отлично знаю HTML+CSS, постоянно учусь и узнаю много нового. Но мне очень не хватает разделения кода на логические части и надоела постоянная возня с тем, что разные браузеры очень по-разному реагируют на код, который я им предлагаю прожевать. В связи с этим возникла идея написать свой язык, который будет, в некотором роде, расширением HTML, но при этом будет гораздо мощнее. Далее я привожу намётки этого языка, и хотел бы знать Ваше мнение, оно мне действительно очень важно и позволит сделать всё лучше, чем я мог бы один. По поводу моей мотивации и не заброшу ли я это: меня бесплатно обучают и это мой проект, который я пишу для обучения, так что мотивации хоть отбавляй.

Итак, приступим.

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

Пример:

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


<body>
  <maket>
    <menu>То, что будет написано в маню</menu>
    <content>Тут будет контент</content>
    <bottom>Копирайт 2012 внизу</bottom>
  </maket>
</body>

Теперь пример, в котором бы использовались настройки новых объектов.

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


<message width = 200px size_border = 2px color_border = #faa>
  Мы сделали ширину 200px, а так же задали толщину и цвет границы.
</message>

Так же к нашим новым элементам можно добавлять настройки через классы и css.

Далее, приведу пример с созданием нового тега и его настроек.


<Class : new_ul>
  <SETTINGS>
    color title_background = #444;
    color background = #222;
    size width = 13px;
    size size_markers = 10px;
    color color_markers = red;
  </SETTINGS>
  <STRUCTURE>
    <disc*>%elements</disc>
    <sq*>%elements</sq>
    <first?>%elements</first>
    <title>!title</title>
  </STRUCTURE>
  <REPLACE>
    <table width = this.width>
      <tr>
        <td rowspan = 2 background = this.title_background>
          this.title.text
        </td>
      </tr>
      <foreach el : this.elements>
        <tr background = this.background>
          <if el.name == "disc">
            <td>
              <div border-radius = 50% width = this.size_markers height = this.size_markers background = this.color_markers></div>
            </td>
            <td>
              el.text
            </td>
          </if><else>
            <td>
              <div width = this.size_markers height = this.size_markers background = this.color_markers></div>
            </td>
            <td>
              el.text
            </td>
          </else>
        </tr>
      </foreach>
    </table>
    </REPLACE>
</Class>

Это штука для списка, с заголовком и либо с квадратными либо с круглыми маркерами.

Пример использования:


<ul width = 100px size_markers = 3px>
  <title>Несколько элементов</title>
  <sq>Квадратный элемент</sq>
  <sq>Квадратный элемент</sq>
  <disc>Круглый элемент</disc>
</ul>

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

Теперь список того, что там будет ещё:

Поддержка короткого закрытия тега(например по "/>")
Свойства css можно будет писать в атрибутах элементов(и они автоматически переделываются в свойства css) и наоборот
Css с поддержкой переменных и может ещё чего(это я пока не продумал до конца)

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

Если же это будет интересным, то я с радостью приму любую помощь, как то:

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

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

Great Rash · August 23, 2012

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

Это уже реализовано, с небольшим костылем на JS будет работать даже в ИЕ6. Любой неизвестный элемент HTML5-браузер воспримет как блок.

А вообще вы по-моему XML+XSLT пытаетесь изобрести... Я особо не вчитывался, так глазами пробежал, но все же.

smevok239 · August 23, 2012

Это уже реализовано, с небольшим костылем на JS будет работать даже в ИЕ6. Любой неизвестный элемент HTML5-браузер воспримет как блок.

Ммм... Буду признателен, если дадите ссылку на реализацию.

Про XSLT - нет, это первое, во что я уткнулся и это жутко неудобно.

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

Great Rash · August 23, 2012

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

У вас в голове слишком много ООП

Ммм... Буду признателен, если дадите ссылку на реализацию.


document.createElement('xxx'); // для ИЕ

Для остальных браузеров ничего не нужно.

smevok239 · August 23, 2012

У вас в голове слишком много ООП

Не отрицаю , но тем не менее, на таком незначительном уровне это даже удобно, + разделение всего макета на части очень логичным образом.

Про createElement - я совсем не это имел в виду.

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

А "создание" новых элементов происходит только в нашем сознании и на сервере, и только ради нашего удобства

troll · August 23, 2012

Основное новшество таково: позволить добавлять собственные теги с настройками, при этом куски кода выносить в отдельный файлик.
...
Основное применение такое - есть довольно много красивых решений на css+html, но все они поставляются в виде исходного кода этого решения с описанием, поэтому приходится разбираться во всём, вместо того, чтобы вынести это в отдельный класс, у которого просто будут некоторые настройки.

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

Edited August 23, 2012 by troll

smevok239 · August 23, 2012

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

Спасибо за наводку, действительно, отчасти похоже.

Но немного разная направленность - я предлагаю только расширить HTML и CSS, а не перелопачивать всё заново.

+ там много JS кода на выходе, если я правильно понял, у меня же на выходе минимально возможный HTML+CSS код.

troll · August 23, 2012

Разработчик определяет, что будет на выходе - HTML, CSS, SASS или еще что-то. Куча JS - это, вроде, промежуточный результат.

smevok239 · August 23, 2012

Разработчик определяет, что будет на выходе - HTML, CSS, SASS или еще что-то. Куча JS - это, вроде, промежуточный результат.

Может быть. Согласен.

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

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

Быколай · August 23, 2012

Имхо, велосипед какой-то, может вы просто xml и xslt не умеете готовить?

Там прекрасно можно обрабатывать свой (вроде вашего расширенного html-ля с новыми тегами) xml, в шаблоне раскрывать/преобразовывать/трансформировать/копировать/делить на ноль/умножать/сортировать любые теги как угодно.

smevok239 · August 23, 2012

Имхо, велосипед какой-то, может вы просто xml и xslt не умеете готовить?
Там прекрасно можно обрабатывать свой (вроде вашего расширенного html-ля с новыми тегами) xml, в шаблоне раскрывать/преобразовывать/трансформировать/копировать/делить на ноль/умножать/сортировать любые теги как угодно.

Да, Вы правы, с тегами там всё хорошо.

Но хорошо связывать это с css я не умею. Или, может, я не умею его готовить?

Я пытаюсь разделить не данные и макет, а сам макет на части. Т.е. сделать так, чтобы хорошее решение на HTML+CSS можно было бы легко переиспользовать в других проектах не разбираясь заново в css и html.

Просто "подключив" нужный файлик с этим решением.

Быколай · August 23, 2012

Да, Вы правы, с тегами там всё хорошо.
Но хорошо связывать это с css я не умею. Или, может, я не умею его готовить?

С такой штукой знакомы http://ru.wikipedia.org/wiki/Sass ?

Не совсем улавливаю, какую проблему призвано решить обсуждаемое Расширение языка HTML, можете сформулировать?

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

Я пытаюсь разделить не данные и макет, а сам макет на части.

-- опять же xslt

сделать так, чтобы хорошее решение на HTML+CSS можно было бы легко переиспользовать в других проектах не разбираясь заново в css и html.

-- вроде как css-framework?

smevok239 · August 23, 2012

Попробую ещё раз:

Есть много красивых и коротких решений различных задач вёрстки. Ими обмениваются так: смотрите, какую фичу я создал! Вот исходный код.

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

При этом есть ряд требований:

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

-Для применения фичи не надо ничего нового изучать - по сути при подключении этого файлика в язык добавляется новый тег с некоторыми артибутами и css параметрами, и есго можно использовать точно так же, как и все теги, которые есть в спецификации HTML

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

rus · August 23, 2012

smevok239, а что значит:

и есго можно использовать точно так же, как и все теги, которые есть в спецификации HTML

?

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

smevok239 · August 23, 2012

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

В точности так.

rus · August 23, 2012

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

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

smevok239 · August 23, 2012

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

В этом то и смысл, что там нет css.

А я и хочу позволить куски HTML и CSS сайта выносить в отдельные файлики, которые будут после этого скомпилированы в общеизвестный HTML и CSS, а по дороге оптимизированы,

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

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

rus · August 23, 2012

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

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

smevok239 · August 23, 2012

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

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

И вообще, поскольку я всё равно буду это писать, даже если это велосипед (это просто полезно для моего развития), то я бы хотел сделать велосипед удобнее, и если, вдруг, есть пожелания и предложения, то я с удовольствием их приму.

В общем, вопрос такой - чего лично Вам не хватает, когда Вы верстаете сайт?

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

Edited August 23, 2012 by smevok239

rus · August 23, 2012

и если, вдруг, есть пожелания и предложения, то я с удовольствием их приму.

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

В общем, вопрос такой - чего лично Вам не хватает, когда Вы верстаете сайт?

не хватает кроссбраузерности, но вы же этого не переделаете никак

smevok239 · August 23, 2012

не хватает кроссбраузерности, но вы же этого не переделаете никак

В некотором смысле предлагаю.

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

+возможно реализовать такую вещь - для разных браузеров отдавать разные данные.

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

(естественно тяжеловесные ресурсы, такие как картинки, не будут дублироваться, а 4 лишних файлика HTML на серваке ещё никому не съел много свободного места.)

rus · August 23, 2012

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

s0rr0w · August 29, 2012

В общем, вопрос такой - чего лично Вам не хватает, когда Вы верстаете сайт?

Мозгов.

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

Серверные технологии в помощь. CSS - не место для переменных. С ними код станет только хуже.

psywalker · August 29, 2012

Серверные технологии в помощь. CSS - не место для переменных. С ними код станет только хуже.

Чем? Избавлением от лишних правил?)

Great Rash · August 29, 2012

Я с s0rr0w согласен! Руки прочь от моего уютного CSS! Вам волю дай вы и в HTML переменных напихаете... Вон один "новатор" целый топик на эту тему развел уже

Sign In

Расширение языка HTML

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Great Rash

smevok239

rus

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information