Нарисовал в IDE -- не катит. Это как в виндовс-программировании. Там визуальный редактор окон тоже не в помощь, хотя и может ограниченно применяться. Потому, что ты должен сам понимать ЧТО ты хочешь сделать и как оно внутри будет работать, а не как оно должно выглядеть. Как сделать. Ну в самом примитивном случае можно всё сделать в текстовом редакторе. Картинки (флеш, и т.п.) вставить как data-ссылки (google://data URI). Javscript и CSS и так в HTML вставляться умеют. Тут единственное ограничение: не использовать файлы (только так удастся получить 1 файл всего). Но практически конечно это неудобно вручную кодировать в base64 картинки и вручную их же вставлять, например. Как и мешанина всего в одном огромном файле -- затрудняет редактирование всего.
Дальше рассказываю о себе. Меня профессиональные дизайнеры говном облили и пообещали забанить... за такие технологии. Но сами что-то лепетали о каких-то фреймворках с неизвестными словами, что только ещё больше добавляло бы проблем. Короче говоря, первое что я понял: отказаться от всяческих фреймворков, библиотек (javascript) и т.п. Хотя минимальные библиотеки можно вообще-то. Лишь бы они не требовали файлов. Далее проект разбивается на N файлов, разбивка смысловая, скажем так. Есть main.html, например. В него через #include (да, тупо используя C-препроцессор) подгружается нужное: отдельные файлы *.css, отдельные файлы *.js, отдельные файлы *.html, файлы с картинками (через css в итоге, см. ниже как). А в самом main только <html> <head> <script> <body> и т.п. тэги. И в них через #include подгружается. Причём там ещё трюк с noscript для старых браузеров, и поэтому весь html оказывается изначально в head, а javascript в body (и noscript в body), а потом javascript'ом всё переставляется как надо -- но это отдельный рассказ.
Отдельные файлы такие. Есть, например, отдельное "окно" в интерфейсе (ну как класс окна в виндовс-программировании). Вот для него пишется отдельный *.css файл (только стили и описания картинок), отдельный *.html файл (шаблон для отображения), отдельный *.js файл (код класса как бы).
Ещё картинки. Каждая картинка переводится в такое (в отдельном *.img файле, для этого просто написаны правила Makefile или батником можно):
width: NNpx; height: NNpx; background-image: url("data:image/gif;base64,XXXXXXXX....");
Это затем, что потом есть отдельный images.css файл, где нужна данная картинка описывается так: .img.imagename { #include "otherimagename.img" } и таким образом класс imagename связывается с картинкой с именем otherimagename. Вообще так картинка может быть связана с множеством классов если надо (картинка на самом деле общая, но потенциально может быть разная). Картинки в html потом используются не через img (тогда бы пришлось в атрибут src засовывать data-URI с длииинным base64 и потом неудобно менять картинки), а через div элемент, например, с классом img: <div class="img imagename"></div> и тут же на месте div появляется картинка своего размера. Потому, что класс img описан как: img {display: inline-block; vertical-align: middle;} В принципе так же картинки натягиваются поверх кнопок или вставляются в кнопки...
О шаблонизации. Обычно в любом веб-приложении либо сразу генерируется html для отображения (дурная технология), или есть шаблон в котором нужные поля заполняются. Шаблонизацией может заниматься отдельная библиотека. Их полно в общем. Я от дурости вначале написал свой аналог PURE, причём более навороченный. А потом меня осенила очевидная мысль, что всё давно уже продумано (хотя, почему-то вебдезигнеры не в курсе) и для этого существуют формы! Т.е. в месте где у тебя шаблон, так и пишешь: <form name="myform">...тут шаблон, например, <output name="aout"></output>... <object name="bobj"></object>...</form>. А собственно для вывода текста делаешь document.myform.aout.value="12345", document.myform.bobj.textContent="67890". Просто output элемент в совсем старых браузерах не работает, а object работает. И так можно в html написать шаблон и подставить нужные поля. Списки и таблицы тоже можно сделать, но тут посложней, у меня для этого есть пара функций делающих шаблонизацию в таком случае (смысл, что в шаблоне описан только один элемент списка или одна строка/столбец таблицы и есть функция, которая через DOM размножает шаблон нужное число раз и назначает значения из переданного множества, ещё есть функция которая потом уничтожает автогенерированные элементы, при повторной шаблонизации...)
Ещё сказать о объектно-ориентированном подходе к GUI. Метод принятый в GUI-программировании обычно плохо применим. Я имею ввиду, когда для каждого окна, или чего-там вместо них, создаётся экземпляр класса и с ним работаешь. Тут удобней (в т.ч. из-за форм) такой подход, когда в html заранее описаны все существующие элементы интерфейса. И в нужный момент времени один из них (форма) шаблонизируется и показывается (она или содержащий её контейнер). Т.е. ничего динамически не создаётся, уже заранее всё есть, просто display: none. Т.е. есть, например, куча html файликов каждый содержит отдельное окно. В каждом файлике всё засунуто внутрь <div> с определённым классом, который по-умолчанию непоказываемый. И насильно (через js) можно показывать только один из множества этих div'ов. Причём, манипулировать стилями DOM-объектов через js может даже и неудобно, может удобней просто назначать объектам дополнительные классы с нужными свойствами. И/или добавлять через DOM к document дополнительный style с нужными свойствами и потом удалять когда не нужен. Это всё нужно, чтоб сделать вид, что у тебя много страниц, и когда нажимаешь на кнопочку то загружается нужная (на самом деле только загружаются, если вообще нужно, через XmlHttpRequest и JSONP данные, шаблонизируются в нужную форму, и элемент содержащий форму отображается вместо того, что отображается сейчас).
И в чём смысл засовывания в один файл: это нужно для хранения на "нефайловых" носителях информации. localStorage, например -- весь document туда сохранить, чтоб следующий раз не грузить. Но загрузка через промежуточный html-файл загрузчика. Актуально, если через GPRS медленно. Да, конечно, у браузера есть кеш и всё то же самое можно с файлами. Де-факто это пока сырая (cache manifest) технология и не очень работает с массово продаваемыми мобильниками. Да и флеша там нет. Впринципе, флеш не нужен, но с поддержкой html5 и аудио тоже не всегда хорошо (я до конца сам ниасилил, почему то работает, то нет...)
А IDE готовой для всего нет. Да и не нужна она. Нужна методология создания веб-приложений. С этим тоже туго.
fk0, легенда (29.10.2012 23:04 - 23:13, просмотров: 100) ответил Гудвин на "Здоровенный локальный HTML со всеми ресурсами для браузера" и AJAX запросы к девайсу это конечно выглядит гарно... Наковырять парсер этих запросов в контроллере вполне по силам. Вопрос: Чем можно легко и непринужденно создать эту пресловутую HTML