Подборка программ и плагинов для веб-разработчика
Прерву последовательность видео уроков по верстке сайта и сделаю подборку программ и плагинов для веб-разработчика. Я работаю в браузере FireFox (чего и вам советую, не смотря на его тормознутость при запуске), так что плагины у нас будут файерфоксовские.
А советую я FireFox как раз из-за очень интересных плагинов к нему. Вот такой замкнутый круг.
Лучшие программы для создания сайта
1. Какой веб-разработчик обойдется без Denwer-а (подробнее о Denwer)?
2. Отличная программа Dreamweaver 8.
Не бейте ногами! Я использую Dreamweaver только в режиме текстового редактора
Восьмую версию без проблем скачать на torrents.ru (более поздние версии Дримвьюера найти сложнее, но при желании все возможно). Идеально подходит верстальщику. А вот программисту – это на любителя. Программа автоматически “подсказывает” не только теги, но и свойства тегов, и даже значения свойств тегов. Теперь запомнить как пишется конструкция <div style=”clear:both; background-position:100px 50px; background-color:#000″> и не допускать ошибки в написании очень просто, если вы, конечно, используете Dreamweaver.
Программисту программа не столь нужна, как верстальщику, потому что веб-программеров мало волнует HTML, а в PHP от Дримвьюера помощи не дождешься.
Минусом программы является ее громоздкость за счет множества дополнительных функций (безусловно интересных, но ими обычно не пользуешься).
3. Раз уж мы заговорили о редакторах, то обойти стороной более легкую для загрузки и для понимания альтернативу обычном виндовскому блокноту, кстати ужасно умную альтернативу, не получится. Встречайте: PSPad.
Программа бесплатная и очень полезная (все, знакомые мне php-программеры работают именно в ней). Легкая, простая в использовании. Позволяет легко перекодировать файл из одной кодировки в другую (я использую ее для этих целей очень часто). А самое интересно – это то, что программа позволяет создать соединение с FTP-сервером и править файлы прямо на хостинге (т.е. в отличии от правки в Total Commander, загрузки файла и последующей его перезаписи не происходит, все вносимые изменения сохраняются на хостинг без лишних вопросов; за это программе большое спасибо).
Еще одной приятной особенностью PSPad-а является подсвечивание открывающегося и, соответствующего ему, закрывающегося тега.
А еще PSPad умеет производить поиск и замену текста внутри файлов. Очень удобно, когда в куче файлов проекта нужно поменять местами ссылки или что-то в этом роде.
Минус – плохо реализованная подсказка синтаксиса HTML: теги подсказываются только при нажатии на Ctrl+ПРОБЕЛ (смотрите сами, минус это или плюс, кому как), а вот свойства тегов вообще не подсказываются. Ну вот почему они этого не сделали? Поэтому мне приходится юзать Dreamweaver.
4. Notepad++ это еще один текстовый редактор блакнотозаменитель. В отличии от PSPad, нет возможности править файлы на хостинге. Все так же плохо реализована подсказка тегов. Но есть очень приятная особенность: Notepad++ запоминает открытые документы, положение курсоров и выделенные в них фрагменты. Закрыв и снова открыв этот редактор запомненное будет восстановлено. Очень удобно, когда вы частенько открываете один и тот же документ и копируете от туда один и тот же фрагмент текста.
5. Ну и конечно Total Commander – как самый лучший инструмент для просмотра каталогов с файлами и заливки их на сервер (сайт, посвященный Total Commander-у).
Плагины для FireFox веб-разработчику
С программами разобрались, теперь обратим наш взор на плагины. Огромное количество интереснейших плагинов существует для FireFox (так уж случилось, что я именно с этим браузером работаю).
1. ColorZilla – плагин позволяет определить код цвета на страничке сайта. Достаточно просто навести курсор (при включенном плагине) на интересующий вас цвет и вы узнаете его код.
2. MeasureIt – линейка, позволяет измерять высоту и ширину объекта на странице в пикселах. Есть аналогичный плагин для Opera – Ruler, он, на мой взгляд более удобен, но я работаю с FF.
3. HTML Validator - этот плагин научит вас писать валидный HTML-код. Иконка плагина встраивается в нижнюю часть окна браузера и отображает статус HTML-валидности страницы. При двойном щелчке открывается HTML-код загруженной страницы с описанием ошибок и путей их устранения.
4. Web-developer – мощный плагин с множеством возможностей, из которых я использую только валидацию CSS (FF/Меню/Инструмены/Web Developer/Инструменты/Validate CSS).
5. Самый мощный и интересный плагин для веб-разработчика – это, конечно же, FireBug. Данный плагин позволяет “на живую” подредактировать загруженную страницу, изменить ее HTML и CSS, тут же увидеть и оценить сделанные изменения. Данный плагин очень удобен для поиска фрагмента кода, отвечающего за вывод того или иного блока на странице, и, соответствующего ему CSS-стиля.
На сладкое
Хочу, в качестве десерта, предложить вам подборку просто достойных и интересных плагинов к FireFox.
1. Gmanager – плагин, встраивающий свою иконку в нижнюю панель окна браузера и отображающий там количество новых сообщения на вашей Gmail-почте. Кликнув на иконку, попадаете сразу в свой gmail-аккаунт.
2. Twitterfox – позволяет вам следить за сообщениями ваших фоловеров в Твиттере и писать новые твитты (вы можете почитать мою подробную статью о Твиттере – очень интересный сервис, революционный даже).
3. Wisestamp – создайте подпись для ваших сообщений Gmail, она будет автоматически встраиваться в отправляемую почту (ссылки с иконками, фотография, очень прикольно реализовано, я пользуюсь).
4. Яндекс.Бар - очень полезное расширение для FF. Встраивает поиск Яндекса, информер о значении тИЦ страницы в браузер, а еще проверяет орфографию в вводимом тексте. Отличная штука, рекомендую.
5. Fireuploader – плагин, позволяющий выгружать файлы на хостинг популярных сервисов. Я использую его для выгрузки фото на Photobucket.
С уважением, Андрей Морковин
Похожие материалы:
Отзывов: 29 на «Подборка программ и плагинов для веб-разработчика»
Автор: , 02.09.2009 в 15:12
Gmanager – плагин, … отображающий количество новых сообщения на вашей Gmail-почте — ух-ты! век живи, век учись! спасибо за данный плагин!
Автор: , 02.09.2009 в 15:27
Да, очень хороший плагин.
Автор: , 02.09.2009 в 15:18
…вот я пользуюсь оперой… причем, версией 9.27, потому как она самая быстрая из всех последующих, даже так называемы “турбо ускоритель” в версии 10.0 не работает быстрее… тестировал на разных сайтах! так о чем это я? может и для ФФ есть разница, какой версией пользоваться?..
Автор: , 02.09.2009 в 15:25
В принципе FF не такой уж и тормоз. У меня тормозит из-за кучи плагинов. Я уже давно на FF и всегда лисица проигрывала Opere в скорости загрузки. Но, зато есть Яндекс.Бар с проверкой орфографии и он-лайн закладками, ни на что FF не променяю.
Автор: , 10.09.2009 в 18:00
в pspad отсутствует нумерация строк, так что N++ рулит
Автор: , 03.10.2009 в 12:15
Ещё есть такой редактор SciTE. Русская и хорошо отработанная версия тут: http://code.google.com/p/scite-ru/
Автор: , 03.10.2009 в 13:01
Спасибо, обязательно с ним познакомлюсь.
А какие достоинства у этого редактора?
Автор: , 03.10.2009 в 12:58
А я не пользуюсь нумерацией строк. Зачем она нужна? К требуемой строке перехожу нажав комбинацию Ctrl+G.
Зато в Pspad-е есть возможность править код прямо на сервере – это жирный плюс к данной программе.
Автор: , 17.10.2009 в 00:27
Notepad++ тоже умеет править файлы на сервере. Я делаю так:
Через плагин FireFTP захожу на фтп. Нажимаю правую кнопку и открываю файл в Notepad++ (предварительно нужно добавить редактор в настройках). Правлю файл и просто сохраняю. Всё. Отредактированный файл лежит на сервере
Автор: , 17.10.2009 в 10:43
Ого. Интересный подход. Спасибо за комментарий!
Автор: , 03.10.2009 в 13:44
…недавно нашел вот такую неудобность в Dreamweaver или лично мою неопытность юзанья данной программы:
был у меня пхп-файл в кодировке ЮТФ-8, набранный в нотпаде++. При вылаживании на хостинге все нормально работало. однажды нужно было что-то подправить, буквально строчку. так вот, при редактировании через Dreamweaver , и сохранении на хосте, вместо русского текста пошли иероглифы!..
как я понял Dreamweaver сохранил русские буквы в кадировке которую не прочитал хост! Обидно, что “преобразовать в нужную кодировку” в нотпаде++ не всегда данную проблему помогает решать!..
ПС будьте бдительны!
Автор: , 03.10.2009 в 14:55
Дело странное. Dreamweaver должен был сохранить файл в ту же кодировку, которая и была.
В Вашем случае, видимо, произошло сохранение в другую кодировку, отличную от UTF-8.
Проверить, в какой кодировке текст, отрытого в Dreamweaver файла, можно нажав комбинацию CTRL+J. Запустится окно изменения свойств страницы. В разделе “Title/Encoding” можно посмотреть заданную кодировку и, при желании, ее поменять (для изменения кодировки просто выбираете подходящую и нажимаете OK).
Автор: , 03.10.2009 в 15:44
хм…. провожу эксперимент. испытуемый: Dreamweaver CS4.
Создаю хтмл-документ. По умолчанию у меня кодировка
набираю:
)
Тут идет русский текст
нажимаю CTRL+J – Title/Encoding: UTF-8
(кстати, нодпад++ говорит, что у меня кодировка UTF-8 без ВОМ!!! Без чего?! Отдельно есть просто UTF-8! В чем-то принципиально отличается?.. или я заморачиваюсь?
сохраняю.
…допустим, мне нужно поменять кадировку на windows-1251.
что я делаю, заменяю кодировку:
сохраняю. открываю и, о ужасс:
п╒я┐я┌ п╠я┐п╢п╣я┌ я┌п╣п╨я│я┌
В браузере тоже самое. подобрать кодировку не получается…
как быть, где и что я делал не правильно?..
Автор: , 04.10.2009 в 11:41
По поводу BOM, цитирую Википедию:
Для определения формата представления Юникода в текстовом файле используется приём, по которому в начале текста записывается символ U+FEFF (неразрывный пробел с нулевой шириной), также именуемый меткой порядка байтов (англ. Byte Order Mark, BOM). Этот способ позволяет различать UTF-16LE и UTF-16BE, поскольку символа U+FFFE не существует. Также он иногда применяется для обозначения формата UTF-8, хотя к этому формату и неприменимо понятие порядка байтов.
Т.е. BOM – это некий символ предназначенный для обозначения извращенных кодировок Юникод. Для UTF-8 BOM не нужен, так что сохраняйте без BOM.
Чтобы избавится от магического трепетания перед словом “Юникод” рекомендую все ту же Википедию:
http://ru.wikipedia.org/wiki/%D0%AE%D0%BD%D0%B8%D0%BA%D0%BE%D0%B4
Не знаю, чем вы меняете кодировку. Я для смены кодировок пользуюсь PSPad-ом, потому что там это происходит наглядно.
Так же не знаю, чем вы открываете файл после смены кодировки. В браузере кодировка может неправильно отображаться по двум причинам:
1) В разделе META может значится неправильная инструкция к браузеру по поводу кодировки.
2) Если файл грузится с сервера (локальный сервер разработки Дендвер или удаленные сервак хостера) сервер может передавать неправильные заголовки и заставлять браузер включать неправильную кодировку.
Автор: , 28.10.2009 в 13:11
А можно я буду задавать вам вопросы по Dreamweaver? А то от него все нос воротят, мол мы крутые. А новичкам и посоветоваться негде.
Спасибо за статьи, очень позновательно.
Автор: , 28.10.2009 в 13:31
Ольга, смотрите видеоуроки из видеокурса по верстке сайта. Многие вопросы отпадут сами собой (HTML и CSS я пишу именно в Dreamweaver):
http://www.sdelaysite.com/kniga/verstka-kniga/blochnaya-verstka-div-0
Нос от него воротят, в основном, программеры, т.к. он для них никакой пользы не представляет. Мне, как верстальщику, Dreamweaver очень нравится. Но нравится мне он не тем, что есть возможность работать в режиме визуального конструктора, а тем что он подсказывает и дописывает нужные мне теги и свойства. Это очень удобно.
А у некоторых товарищей Dreamweaver ассоциируется именно с визуальным конструктором и тут они начинают воротить нос. И в чем-то они правы: в визуальном конструкторе верстать сайты не надо, иначе получится кошмарный ужас.
Автор: , 10.11.2009 в 16:10
В принципе согласен. Подсказки у него хорошо работают. зато если пользоваться визуальным редактором, то полный рак.
Автор: , 10.11.2009 в 16:04
в Notepad++ можно править файлы на сервере.
Автор: , 10.11.2009 в 16:06
Ничего об этом не знаю, не видел возможности подключения к FTP.
Автор: , 10.11.2009 в 16:14
А я давно пользуюсь
Там кнопочка есть “Show FTP Folders”. Можно несколько настроек вбить сразу и расслабиться.
Автор: , 10.11.2009 в 16:17
Причём можно работать сразу с кучей файлов на сервере. Да какие угодно файлы (например, картинки) на сервер закидывать
Автор: , 10.11.2009 в 16:23
Да, точно есть такая кнопочка. Или у меня старая была версия, или я просто не замечал.
Теперь в плюсы PSPad-у можно зачесть только более адекватный интерфейс переключения кодировок.
Автор: , 10.11.2009 в 16:28
И чем же он более адекватный?
Преобразование в нужную кодировку происходит одним кликом мышки.
Автор: , 10.11.2009 в 16:31
Хе-хе, я вот тут http://www.sdelaysite.com/kniga/verstka-kniga/html-kodirovka об этом писал. Лишние пункты меню, в отличии от PSPad-а.
Автор: , 10.11.2009 в 16:35
Движений мышкой это не прибавляет
Так имхо не важно.
Автор: , 31.03.2010 в 16:56
Андрей, большое спасибо за ColorZilla и MeasureIt. Действительно интересные плагины =) а остальные для разработки и так уже стояли =)
Автор: , 03.04.2010 в 12:39
Для валидации html в Dreamweaver есть комбинация клавиш
shift+F6. А вот как сделать валидацию цсс файла я так и не нашел. Может знает кто? Не может такого быть, что бы Dreamweaver не умел этого делать.
Автор: , 03.04.2010 в 12:43
Еще в DW можно задавать нужный тебе доктайп разновидность. В рассказанным Андреем Морковиным сайте http://csstemplater.com/ заготовка формируется в xml strict, а он мне не нравится – запрещает ячейкам таблицы задавать высоту и ширину:). Поэтому я беру XHTML 1.0 Transitional, он вроде не ругается:).
Автор: , 13.04.2010 в 12:11
Добрый день, напомните пож-та название плагина FireFox’а,
который показывает список всех javascript’ов , задействованных на открытой странице. Их можно открыть по выборц, и схранить,
Если страница, содержит фрейм, то можно открыть страницу фрейма и посмотреть все ее скрипты.
Аналогично для css-файлов, задействованных на открытой странице.