Подборка программ и плагинов для веб-разработчика
Прерву последовательность видео уроков по верстке сайта и сделаю подборку программ и плагинов для веб-разработчика. Я работаю в браузере 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.
С уважением, Андрей Морковин
Похожие материалы:
Отзывов: 34 на «Подборка программ и плагинов для веб-разработчика»
, 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
В принципе согласен. Подсказки у него хорошо работают. зато если пользоваться визуальным редактором, то полный рак.
, 05.01.2012 в 11:17
«а тем что он подсказывает и дописывает нужные мне теги и свойства. Это очень удобно. »
———————
Единственное чего не хватает, в нотепаде. Но это и к лучшему =) подсказки там есть, на всё что угодно, притом эти подсказки (при нажатии кнопки колеса мыши) модно далее печатать на клавиатуре, к примеру bo и далее редактор отсеет всё что на бо начинается.
В этих подсказках (которые не дописываются сами) он помогает запоминать теги, функции конструкции, и так далее. Смотря с чем работаем. А визуальный редактор… Для людей которым нечего делать, которые горят желанием, построить дом с одного кирпича, и сказать себе вотА я какой, мего-мастер. Люди которые занимаются вёрсткой, такими опциями не пользуются (разве что во вред себе)), да и то все равно не пользуются).
, 05.01.2012 в 11:08
Ольга, да и таких как Ольга очень много.
Dreamweaver во первых платный, во вторых тяжелый( 80% не нужного мусора), в третьих кривой, я его путаю с макромедиа флешь, хоть давно им и не пользуюсь, но интерфейс остался в памяти. Dreamweaver — может быть полезен для начинающих (людям которые делают первые шаги) или продвинутым веБа мастерам (которые сделали эти самые первые шаги, запомнили две три строчки, и на это все…)
Люди которые, верстают, и программируют (работают не с одним языком программирования). Давно поняли те самые плюсы нотепада ++ или пспада.
Лично я пользуюсь PSPad/ом и мне класть кучу на моду, на кучу ненужных 80% функций дримвивера.
Меня интересует, качество и скорость разрботки, да и что прибедняться в PSPad/е функций очень, много, — нужных функций.
Кого обидел извините, но от правды никуда не деться, сам был ярым фанатом дримвивера (когда понимал мало) и как бэ не разрабатывал, крупных проектов, за хорошую оплату.
, 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-файлов, задействованных на открытой странице.
, 29.11.2010 в 18:47
не понимаю почему дримвивер так ругают, я имею ввиду виз.режим, я рисую макет в данном режиме а потом правлю код если необходимо, цсс я обычно в отдельном файле делаю, и лазить редактировать код вручную бывает очень проблематично, т.к. занимает много времени. Кстати я пользуюсь CS4, и сравнивать его с 8 версией несуразно, они сильно отличаются по своим возможностям
, 13.06.2011 в 13:28
Использую XAMPP как сервер
Aptana 3 очень удобный редактор php
, 12.09.2011 в 13:31
По поводу использования DW и Ноутпад++
Ноутпад умеет делать все то же что и Dreamweaver , и плюс множество того что тот делать не умеет.
Автодополнение тегов и свойств Ctrl+Spase
Мега скоростная верстка (Zen Coding и Снипеты)
Работа с ФТП сервером прямо из редактора(есть там такая кнопочка:))
Файловый менеджер (можно спокойно редактировать проекты и TC не нужен)
Автозакрытие тегов и их подсветка, настройка тем редактора под себя
Правильные кодировки(Видел как Андрей пересохранял файлы в NetBeens и делал
это через ноутпад:)).
Возможность свернуть куски кода и многое, многое другое:)
И, что очень важно скорость и компактность !! Кучу всяких редакторов перепробовал
Но Ноутпад если в чем-то и отстает, то только в том, что вместо тебя код не пишет, как некоторые редакторы:) но оно и лучше , а то забудешь как теги называются..
Люди не используют и 10% возможностей редактора, а делают какие-то поспешные выводы