Никогда столько не лгут,
как во время войны, после охоты и до выборов.
Отто фон Бисмарк.

    Прерву последовательность видеоуроков по вёрстке сайта и сделаю подборку программ и плагинов для веб-разработчика. Я работаю в браузере FireFox (чего и вам советую, не смотря на его «тормознутость» при запуске), так что плагины у нас будут «файерфоксовские».

    А советую я FireFox как раз из-за очень интересных плагинов к нему. Вот такой замкнутый круг.

Лучшие программы для создания сайта

1. Какой веб-разработчик обойдётся без Denwer?

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.

    Автор: Андрей Морковин.

 

Ещё материалы по этой теме:

• Основы CSS: ТОП-20 применяемых в вёрстке стилей
• Div-вёрстка: видеоуроки по блочной вёрстке сайта
• Firebug — находка для верстальщика
• CSS-framework, или Как упростить процесс вёрстки
• «Резиновый» блок с закруглёнными углами на Div

Комментарии:

Lardok
Gmanager – плагин, … отображающий количество новых сообщения на вашей Gmail-почте — ух-ты! век живи, век учись! спасибо за данный плагин!

Андрей Морковин
Да, очень хороший плагин.

Lardok
…вот я пользуюсь оперой… причем, версией 9.27, потому как она самая быстрая из всех последующих, даже так называемы «турбо ускоритель» в версии 10.0 не работает быстрее… тестировал на разных сайтах! так о чем это я? может и для ФФ есть разница, какой версией пользоваться?

Андрей Морковин
В принципе FF не такой уж и тормоз. У меня тормозит из-за кучи плагинов. Я уже давно на FF и всегда лисица проигрывала Opere в скорости загрузки. Но, зато есть Яндекс.Бар с проверкой орфографии и он-лайн закладками, ни на что FF не променяю.

mall
в pspad отсутствует нумерация строк, так что N++ рулит

jhekasoft
Ещё есть такой редактор SciTE. Русская и хорошо отработанная версия тут: ***

Андрей Морковин
Спасибо, обязательно с ним познакомлюсь.
А какие достоинства у этого редактора?

Андрей Морковин
А я не пользуюсь нумерацией строк. Зачем она нужна? К требуемой строке перехожу нажав комбинацию Ctrl+G.
Зато в Pspad-е есть возможность править код прямо на сервере — это жирный плюс к данной программе.

Dimis
Notepad++ тоже умеет править файлы на сервере. Я делаю так:
Через плагин FireFTP захожу на фтп. Нажимаю правую кнопку и открываю файл в Notepad++ (предварительно нужно добавить редактор в настройках). Правлю файл и просто сохраняю. Всё. Отредактированный файл лежит на сервере

Андрей Морковин
Ого. Интересный подход. Спасибо за комментарий!

Lardok
…недавно нашел вот такую неудобность в Dreamweaver или лично мою неопытность юзанья данной программы:
был у меня пхп-файл в кодировке ЮТФ-8, набранный в нотпаде++. При вылаживании на хостинге все нормально работало. однажды нужно было что-то подправить, буквально строчку. так вот, при редактировании через Dreamweaver , и сохранении на хосте, вместо русского текста пошли иероглифы!
как я понял Dreamweaver сохранил русские буквы в кадировке которую не прочитал хост! Обидно, что «преобразовать в нужную кодировку» в нотпаде++ не всегда данную проблему помогает решать!..
ПС будьте бдительны!

Андрей Морковин
Дело странное. Dreamweaver должен был сохранить файл в ту же кодировку, которая и была.
В Вашем случае, видимо, произошло сохранение в другую кодировку, отличную от UTF-8.
Проверить, в какой кодировке текст, отрытого в Dreamweaver файла, можно нажав комбинацию CTRL+J. Запустится окно изменения свойств страницы. В разделе «Title/Encoding» можно посмотреть заданную кодировку и, при желании, ее поменять (для изменения кодировки просто выбираете подходящую и нажимаете OK).

Lardok
хм…. провожу эксперимент. испытуемый: Dreamweaver CS4.
Создаю хтмл-документ. По умолчанию у меня кодировка
набираю:
Тут идет русский текст
нажимаю CTRL+J — Title/Encoding: UTF-8
(кстати, нодпад++ говорит, что у меня кодировка UTF-8 без ВОМ!!! Без чего?! Отдельно есть просто UTF-8! В чем-то принципиально отличается?.. или я заморачиваюсь?)
сохраняю.
…допустим, мне нужно поменять кадировку на windows-1251.
что я делаю, заменяю кодировку:
сохраняю. открываю и, о ужасс:
п-я¬я- п¦я¬п¦п¦я- я-п¦п¦я¦я-
В браузере тоже самое. подобрать кодировку не получается…
как быть, где и что я делал не правильно?..

Андрей Морковин
По поводу BOM, цитирую Википедию:
Для определения формата представления Юникода в текстовом файле используется приём, по которому в начале текста записывается символ U+FEFF (неразрывный пробел с нулевой шириной), также именуемый меткой порядка байтов (англ. Byte Order Mark, BOM). Этот способ позволяет различать UTF-16LE и UTF-16BE, поскольку символа U+FFFE не существует. Также он иногда применяется для обозначения формата UTF-8, хотя к этому формату и неприменимо понятие порядка байтов.
Т.е. BOM — это некий символ предназначенный для обозначения извращенных кодировок Юникод. Для UTF-8 BOM не нужен, так что сохраняйте без BOM.
Чтобы избавится от магического трепетания перед словом «Юникод» рекомендую все ту же Википедию:
https://ru.wikipedia.org/wiki/Юникод
Не знаю, чем вы меняете кодировку. Я для смены кодировок пользуюсь PSPad-ом, потому что там это происходит наглядно.
Так же не знаю, чем вы открываете файл после смены кодировки. В браузере кодировка может неправильно отображаться по двум причинам:
1) В разделе META может значится неправильная инструкция к браузеру по поводу кодировки.
2) Если файл грузится с сервера (локальный сервер разработки Дендвер или удаленные сервак хостера) сервер может передавать неправильные заголовки и заставлять браузер включать неправильную кодировку.

Ольга
А можно я буду задавать вам вопросы по Dreamweaver? А то от него все нос воротят, мол мы крутые. А новичкам и посоветоваться негде.
Спасибо за статьи, очень позновательно.

Андрей Морковин
Ольга, смотрите видеоуроки из видеокурса по верстке сайта. Многие вопросы отпадут сами собой (HTML и CSS я пишу именно в Dreamweaver)
Нос от него воротят, в основном, программеры, т.к. он для них никакой пользы не представляет. Мне, как верстальщику, Dreamweaver очень нравится. Но нравится мне он не тем, что есть возможность работать в режиме визуального конструктора, а тем что он подсказывает и дописывает нужные мне теги и свойства. Это очень удобно.
А у некоторых товарищей Dreamweaver ассоциируется именно с визуальным конструктором и тут они начинают воротить нос. И в чем-то они правы: в визуальном конструкторе верстать сайты не надо, иначе получится кошмарный ужас.

Never Lex
В принципе согласен. Подсказки у него хорошо работают. зато если пользоваться визуальным редактором, то полный рак.

Валентин
«а тем что он подсказывает и дописывает нужные мне теги и свойства. Это очень удобно. »
———————
Единственное чего не хватает, в нотепаде. Но это и к лучшему =) подсказки там есть, на всё что угодно, притом эти подсказки (при нажатии кнопки колеса мыши) модно далее печатать на клавиатуре, к примеру bo и далее редактор отсеет всё что на бо начинается.
В этих подсказках (которые не дописываются сами) он помогает запоминать теги, функции конструкции, и так далее. Смотря с чем работаем. А визуальный редактор… Для людей которым нечего делать, которые горят желанием, построить дом с одного кирпича, и сказать себе вотА я какой, мего-мастер. Люди которые занимаются вёрсткой, такими опциями не пользуются (разве что во вред себе)), да и то все равно не пользуются).

Валентин
Ольга, да и таких как Ольга очень много.
Dreamweaver во первых платный, во вторых тяжелый( 80% не нужного мусора), в третьих кривой, я его путаю с макромедиа флешь, хоть давно им и не пользуюсь, но интерфейс остался в памяти. Dreamweaver — может быть полезен для начинающих (людям которые делают первые шаги) или продвинутым веБа мастерам (которые сделали эти самые первые шаги, запомнили две три строчки, и на это все…)
Люди которые, верстают, и программируют (работают не с одним языком программирования). Давно поняли те самые плюсы нотепада ++ или пспада.
Лично я пользуюсь PSPad/ом и мне класть кучу на моду, на кучу ненужных 80% функций дримвивера.
Меня интересует, качество и скорость разрботки, да и что прибедняться в PSPad/е функций очень, много, — нужных функций.
Кого обидел извините, но от правды никуда не деться, сам был ярым фанатом дримвивера (когда понимал мало) и как бэ не разрабатывал, крупных проектов, за хорошую оплату.

Never Lex
в Notepad++ можно править файлы на сервере.

Андрей Морковин
Ничего об этом не знаю, не видел возможности подключения к FTP.

Never Lex
А я давно пользуюсь Там кнопочка есть «Show FTP Folders». Можно несколько настроек вбить сразу и расслабиться.

Never Lex
Причём можно работать сразу с кучей файлов на сервере. Да какие угодно файлы (например, картинки) на сервер закидывать

Андрей Морковин
Да, точно есть такая кнопочка. Или у меня старая была версия, или я просто не замечал.
Теперь в плюсы PSPad-у можно зачесть только более адекватный интерфейс переключения кодировок.

Never Lex
И чем же он более адекватный? Преобразование в нужную кодировку происходит одним кликом мышки.

Андрей Морковин
Хе-хе, я об этом писал. Лишние пункты меню, в отличии от PSPad-а.

Never Lex
Движений мышкой это не прибавляет Так имхо не важно.

vo4tap
Андрей, большое спасибо за ColorZilla и MeasureIt. Действительно интересные плагины =) а остальные для разработки и так уже стояли =)

Snake
Для валидации html в Dreamweaver есть комбинация клавиш
shift+F6. А вот как сделать валидацию цсс файла я так и не нашел. Может знает кто? Не может такого быть, что бы Dreamweaver не умел этого делать.

Snake
Еще в DW можно задавать нужный тебе доктайп разновидность. В рассказанным Андреем Морковиным сайте csstemplater заготовка формируется в xml strict, а он мне не нравится — запрещает ячейкам таблицы задавать высоту и ширину:). Поэтому я беру XHTML 1.0 Transitional, он вроде не ругается:).

galina
Добрый день, напомните пож-та название плагина FireFox’а,
который показывает список всех javascript’ов , задействованных на открытой странице. Их можно открыть по выборц, и схранить,
Если страница, содержит фрейм, то можно открыть страницу фрейма и посмотреть все ее скрипты.
Аналогично для css-файлов, задействованных на открытой странице.

WoWka
не понимаю почему дримвивер так ругают, я имею ввиду виз.режим, я рисую макет в данном режиме а потом правлю код если необходимо, цсс я обычно в отдельном файле делаю, и лазить редактировать код вручную бывает очень проблематично, т.к. занимает много времени. Кстати я пользуюсь CS4, и сравнивать его с 8 версией несуразно, они сильно отличаются по своим возможностям

Сергей Золотов
Использую XAMPP как сервер
Aptana 3 очень удобный редактор php

Андрей
По поводу использования DW и Ноутпад++
Ноутпад умеет делать все то же что и Dreamweaver , и плюс множество того что тот делать не умеет.
Автодополнение тегов и свойств Ctrl+Spase
Мега скоростная верстка (Zen Coding и Снипеты)
Работа с ФТП сервером прямо из редактора(есть там такая кнопочка:))
Файловый менеджер (можно спокойно редактировать проекты и TC не нужен)
Автозакрытие тегов и их подсветка, настройка тем редактора под себя
Правильные кодировки(Видел как Андрей пересохранял файлы в NetBeens и делал
это через ноутпад:)).
Возможность свернуть куски кода и многое, многое другое:)
И, что очень важно скорость и компактность !! Кучу всяких редакторов перепробовал
Но Ноутпад если в чем-то и отстает, то только в том, что вместо тебя код не пишет, как некоторые редакторы:) но оно и лучше , а то забудешь как теги называются.
Люди не используют и 10% возможностей редактора, а делают какие-то поспешные выводы