Веб-разработка

индекс
236,88

Developer Tools — online изменения CSS на сервере

Как то сидя на работе и смотря как дизайнер «ковыряется» в «кишках» нашего веб проекта, я заметил что дизайнер по «100 раз» перегружает сайт ради того что бы применились CSS. Да, есть FireBug, но он меняет css «на лету» и не сохраняет изменения в файлы. Порой это и не возможно, так как сайт находится на удалённой машине.
Посмотрев на мучения, решено было сделать нечто похожее на FireBug, но очень легкое. Так появился Developer Tools.
Основные возможности:
* — динамическая перегрузка CSS файла(ов).
* — изменение CSS файлов на сервере.
* — выбор DOM элементов, похож на FireBug.
* — парсинг CSS файлов, построение иерархии наложение CSS.



К сожелению пока это все работает только под IIS + .NET 3.5

Для разворачивания на сайте данной утилиты:
1) Установить сервис Developer.Tools.Service.
2) Настроить путь до тем или хранилища css файлов в web.config, appSettings->key =«ThemePath».
3) Разрешить сервису изменять содержимое каталогов в которых хранятся CSS.
4) Подключить jQuery и скрипт developer.tools.js из каталога Scripts к веб странице.

При загрузке страницы утилита подключит, если это необходимо, jQuery UI, а так же своё CSS оформление.

Программа распространяется под лицензией GPL 3.0.
Исходники и инсталятор.

P.S. Желательно IIS 6, так как под 5 геморройно настраивать права сервиса.

Так как проект бесплатный, да и времени у всех не хватает, с трудом удалось уговорить дизайнера что бы он хотя бы привел в сносный вид этот проект, поэтому буду рад любой помощи, критике и предложениям по улучшению.
+28
3 ноября 2008, 15:41
20

комментарии (50)

+9
chetzof #
мде, жаль что на апаче не прокатит.
0
DisDis #
можно переписать серверную часть на php, код сервера очень простой, к сожалению практически не знаю PHP
–1
ScorpAL #
Notepad ++ отлично справляется с редактированием удаленных файлов.

Правда он сначала кэширует редактируемый файл, а после сохранения налету перезаписывает на сервере.

Дополнения -> FTP_synchronize
+4
NoMax #
ну и поправите вы css через notepad++, но потом же все равно придется обновлять страницу в браузере, чтобы увидеть результат… разве не так?
а тут, как я понял, говорится о правке css и просмотру своей правки в динамической форме, без обновления страницы…
кстати, очень интересная идея… (:
+1
ScorpAL #
Согласен.

Не до конца поянл суть.
+8
kvladimir #
надеюсь, что ктонить скоро напишет firefox плагин, который бы просто использовал ftp, чтобы сохранить измененния в указанном css файле при работе с firebug
0
BisnoyZakat #
тогда уже плагин к firebug :)
0
INIT #
думаю скоро в Firebug добавят:
code.google.com/p/fbug/source/browse/branches/firebug1.4/docs/TODO.txt
Most Wanted: «Save CSS changes back to file»

а заливку по ФТП уже и самому дописать можно в виде плагина к нему

–1
pr0digy #
Под Firefox есть плагин — Web Developer. Можно в живую править CSS, правда поддержки FTP нет, но это в принципе не такая уж и большая проблема в данном случае.
+12
chestah #
не так уж сложно скопировать подходящие значения из окошка CSS Firebug'а

а то, что мы видим на скриншоте, я пожалуй не решусь поставить
0
DisDis #
Да но после этого нужно перегрузить сайт, а тут CSS применяется «на лету».
Для статических страниц всегда проще скопировать из FireBug`a, так вообщем то и поступаю.
0
oWeRQ #
FireBug и применяет правки на лету, только вот на сервере они не сохраняются.
0
quark #
Скриншот подозрительный :)
0
DisDis #
Что было у жены в браузере открыто, то и отскриншотил)
0
NoMax #
скрытая такая реклама «Вконтакте»… (:
–2
Goodkat #
Твой коммент — это скрытая такая реклама «Вконтакте»… (:
До его прочтения я и не знал, что там «Вконтакте»
0
NoMax #
упаси Бог, заниматься мне скрытой такой рекламой
просто грех это не заметить на заднем фоне… (:
0
Goodkat #
грешен, не заметил, так как не пользуюсь
0
Tvarb #
Да идея хороша, но вот посмотрел в другом браузере — не в FF?
Например все поедет в IE?
Опять переходить Developer Tools?

Так я для этих целей пользуюсь winSCP в одном окошке, браузерами в другом.
–1
DisDis #
Да, забыл указать что под IE (браузер который портит жизнь)) ) не работает, необходимости не было.
+7
DeMx #
Как-то монструозно выглядит. А подпись «IIS + .NET 3.5» внушает еще большее недоверие. (:
–2
Roman_Mix #
Класс, спасибо.
+8
ekim #
как дизайнер «ковыряется» в «кишках» нашего веб проекта, я заметил что дизайнер по «100 раз» перегружает сайт

О боже! Вы прямо на боевой версии экспериментируете с дизайном?
Обычно это отлаживают на локальной машине, а потом заливают на сервер. Желательно при этом иметь SVN.

К сожелению пока это все работает только под IIS + .NET 3.5

Вместо того чтобы придумывать подобные извращения а-ля меняем дизайн проекта на бою, нужно просто грамотно построить технологический процесс.
–3
DisDis #
Дизайнер работает на МакОС, и ставить всякую хрень не хочет, поэтому заставили его через шары ходить на сайт, но проблема в том что сайт, трейдинговая платформа, полностью динамический, и значит при перезагрузке приходиться снова совершать тело движения например при редактировании «окошка» настройки, надо совершить телодвижения. А так он меняет и на лету перегружает только CSS, сам контент страници не перегружается.
+4
ekim #
«Дизайнер работает на МакОС, и ставить всякую хрень не хочет»
Классно у вас процесс поставлен. Каждый работает как хочет. Дизайнер определяет процесс выкладки кода… Прошу прощения, но это п*здец.

Кстати, неужели вашему дизайнеру хватает только правки CSS? А html-шаблоны он не трогает?
0
DisDis #
проблема в том что сорс коды в TFS хранятся, под мак ось есть только платные тулзы, но это пол бяды. Проблема еще в том что IIS на мак ос не поставить).Пришлось виртуальную машину ставить. Но дизайнеры люди творческие, да и он закоренелый маковод, так что ему не охота да и не нужно разбераться как деплоить и т.д.
Шаблоны и CSS правит.
+2
ekim #
Да, похоже в вашем случае действительно проще поставить костыль, чем перестраивать весь процесс. Но такие подпорки ни к чему хорошему не приводят. В любом случае удачи!

Да, еще хотел у вас спросить, можно посмотреть на проект? А то вы сказали что проект бесплатный, а потом заявили, что это «трейдинговая платформа». Уж больно любопытно на это взглянуть.
0
DisDis #
Developer Tools — бесплатный
а применялся он как раз на трейдинговой платформе, ссылку не могу дать так как хз как начальство отреагирует
0
piupiu #
«ставить всякую хрень не хочет» =)))
Расскажите мне сколько хрени надо поставить, чтобы поправить верстку? =)
0
DisDis #
А причем тут верстка?
Может меня не правильно поняли, изменять на «боевом» сайте не кто не даст. Все изменения идут на дев сайте, который естественно лежит в локалке.
Доступ к css у дизайнера есть, задача была применение CSS «на лету» без перегрузки сайта.
Под всякой «хренью», подразумевается: виртуальная машина, IIS, MVS для TFS
+1
Goodkat #
При обсуждении любой скольугодно малой локальной проблемы найдётся человек, который скажет, что это п*здец и надо изменить весь техпроцесс и переписать всё заново :)
+1
DarwinTenk #
Я думаю зря Вы так все начали говорить, что инструмент подозрительный/не нужный/нужное_вставить, т.к. человек сделал очень даже полезный инструмент.
Кого не устраивает — дописывайте! GPL всё таки, так что каждый может написать, переписать.
DisDis — спасибо. Это то что нужно. Не для меня правда, а для моего верстальшика, но так, как он не зарегистрирован на Хабре, то от него тоже спасибо!
0
AmirL #
Дык обычно чтобы применить новый css — имя файла же вроде надо поменять еще — да? А то часто видел картину, когда у себя та я принудительно обновил, а у пользователей кешированный css грузится и непонятно какими силами браузеру автоматом обьяснять что css обновился :(
0
mikkie #
Все довольно просто. Вам неоходимо передавать фалу css или js дополнительный параметр. т.е. в итоге конечный код будет выглядеть в виде:

В результате после изменения файла браузер переобновит его.
0
AmirL #
Хабр сьел код? Так что там должно быть?
0
mikkie #
/myfile.js?1225660769
/myfile.css?1225660769
где 1225660769 это время модификации файла, filemtime()
0
AmirL #
о — круто. попробую — да.
0
egorinsk #
Это ни хрена не круто, не делайте так, ваши файлы не будут кешироваться. почитайте на webo.in кажется есть статья как это сделать
0
me_joe #
Ctrl+R
+2
artch #
С обновлением каждого css объявление на сайте «Всем пользователям! Пожалуйста, нажмите Ctrl+R»
–2
mikkie #
глупость несусветная, особенно когда пользователь увидет как верстка разлетелась.
почти любой пользователь покинет ресурс, где его каждые 5 минут просят сделать ctrl+R и все ползет.
0
artch #
Товарищ, это был саркастический сарказм.
НЛО прилетело и опубликовало эту надпись здесь
0
Spy #
с firebug все таки проще
0
fantom_ua #
если кому то интересен бы был скрипт для редактирования css буду рад такой написать
0
DisDis #
в данный момент занимаюсь скриптом для редактирования css селектора, что конкретно нужно?
0
nrdcp #
«сайт находиться» поправьте пожалуйста
0
simpel #
Для FF есть плагин обновляющий только CSS по хоткею. Активно использую связку Notepad++ с ftp и этим плагином.
0
Juniorro #
Упомянутое расширение основано на маленьком JS скрипте от Daniel Andrade —
www.danielandrade.net/2007/02/25/css-refresh/.
Имхо проще воспользоваться им.
0
simpel #
По мне, так плагин лучше букмарка :) Кстати, в коментариях с авторскому скрипту есть ссылка на еще один плагин — CSS Sync. Я его не трогал, но судя по описанию он сам проверяет и обновляет CSS.

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