Джентльменский набор верстальщика
09.26.2008 – Рубрика: Инструментарий
Не редко многие из тех, кто занимаются кодированием встречают на форумах фразы в стиле «Настоящие верстальщики верстают только в блокноте». С моей точки зрения, такие высказывания лишены здравого смысла. Мне кажется, в блокноте можно верстать, когда ты учишься, чтоб лучше запомнить синтаксис разметки, или когда у тебя под рукой нету инструментов, чтоб сделать правки, поэтому и приходится воспользоваться стандартными средствами редактирования. В иных случаях использование блокнота для работы грозит потерей кучи времени и нервов. Цель этой заметки привести список с кратким описанием инструментов которые облегчают и ускоряют верстку.
- 1.Adobe Dreamweaver
- Для меня это лучший инструмент для написания, правки, заливки кода. Из недостатков я вижу только ресурсоемкость, которая может быть заметна на слабеньких тазиках и угрызения совести по поводу использование пиратского софта. Из пюсов огромный вагон полезных и удобных фич о которых можно прочитать в заметке За что я уважаю Dreamweaver.
- 2.Adobe Photoshop
- Полезный инструмент для «нарезки графики» и выполнения корректировок. Многие отказываются от него в пользу Gimp из-за бесплатности последнего и отсутствия необходимости держать такого монстра для выполнения мелких работ. С моей точки зрения в фотошопе встроен отличный инструмент для разбивки макета для верстки. Эта «фича» позволяет минимизировать время на нарезку графики. В заметке «Как разрезать графику для верстки» рассказывается о том, как готовить графику для верстки этой программой
- 3.Web Developer Toolbar
- Незаменимый плагин для FireFox. Имеет такие полезные инструменты как линейка для измерения расстояний, изменения окна браузера под нужные разрешения, отключения стилей, картинок иконкой или горячими кнопками, просмотр заголовков в виде отельной иерархической структуры. Подсветка таблиц, блочных элементов. Также этот плагин показывает валидность CSS и режим отображения браузера.
addons.mozilla.org/ru/firefox/addon/60 - 4.FireBug
- Плагин для FireFox. Я не представляю, как без него может работать верстальщик. Это плагин который позволяет просматривать структуру документа, DOM, отлаживать скрипты. Имеет полезную функция подсветки отдельных, выбранных, структурных элементов. К тому же к этому плагину есть ряд полезных надстроек для просмотра кукисов, подсветки синтаксиса скриптов, плагин для пхп, плагин показывающий время загрузки и прочие.
addons.mozilla.org/ru/firefox/addon/1843 - 5. FireBug Light
- Тот же FireBug с некоторыми ограничениями. Он выполненный в виде подключаемого джава скрипта что позволяет его использовать в других браузерах.
getfirebug.com/lite.html - 6. IETester / Multiple IE
- Программы для совместного использования ИЕ6 и ИЕ7 на одном компьютере. Первая реализована в виде отдельного приложения в котором вкладками можно открывать ИЕ5,6,7. Вторая устанавливает отдельно каждую версию браузера. Недостаток первой в наличии мерцания при переключении вкладок и небольшая тормознутость. Недостаток второго в том что пока не работает под MS Vista. Мне больше нравится первая программа.
my-debugbar.com/wiki/IETester/HomePage
tredosoft.com/Multiple_IE - 7.HTML Validator
- Плагин для FireFox. Выполняет проверку валидности страницы при загрузки. Результат отображает значком в строке состояния. Если страница валидная отображается зеленый значок в виде галочки, в случае не прохождения валидации отображается красный значек в виде креста. При клике на значек можно просмотреть ошибки валидации. В настройках можна выбрать среди трех алгоритмов валидации HTML Tidy, SGML Parser, Serial. SGML Parser это самый жесткий алгоритм, он же используется на w3c, его я и рекомендую использовать.
addons.mozilla.org/ru/firefox/addon/249 - 8. Color Zilla
- Плангин для фаерфокса. Выполнен как обычный инструмент «Пипетка» в графических редакторах. Позволяет вытянуть в буфер код цвета с окна браузера.
addons.mozilla.org/ru/firefox/addon/271 - 9. Сервисы для сжатия CSS
- Эти сервисы позволяют сжать уже готовый CSS. Некоторые из них имеют богатый функционал, некоторые имеют попроще. Они убирают лишние пробелы, табуляцию, лишние символы такие как ненужный px после 0. Мне больше всего нравиться www.cleancss.com. Он предельно прост и имеет большое количество настраиваемых параметров.
- 10. OptiPNG,PNGOut
- Небольшие программы которые позволяют ужимать пнг картки. Сжатие не всегда большое но все же некая оптимизация есть. В статье «Оптимизация PNG c помощью OptiPNG, PNGOut» рассказывается об этих программах и как их использовать .
optipng.sourceforge.net - 11. Pixel Perfect
- Плагин для FireBug позволяющий оценить насколько точно относительно макета вы сверстали сайт. Плагин накладывает на сайт слой в котором находится картинка сайта, можно изменять ее прозрачность, таким образом что видно сверстанный сайт под нею и можно сравнить насколько верстка соответствует макету.
https://addons.mozilla.org/ru/firefox/addon/7943 - NoSquint
- Плагин, который отображает в статус баре зум страницы
No Squint
41 Отзывов to “Джентльменский набор верстальщика”
Оставить отзыв
Последние записи
- DATA:URL – Картинки в документе без дополнительных запросов к серверу
(Вторник, 09. 8. 2009 – 20 отзывов) - Как изменить внешний вид checkbox
(Вторник, 04. 28. 2009 – 32 отзывов) - Как сделать галерею товаров для интернет-магазина
(Пятница, 03. 13. 2009 – 7 отзывов) - Я.ру
(Воскресенье, 03. 8. 2009 – 3 отзывов)
Октябрь 8, 2008 в 21:53
Неплохо
Октябрь 9, 2008 в 4:52
И опять об этом. Если поисковики научатся понимать смысл, то блогерам придется поизголяться, чтобы быть читаемыми и не похожими на других.
Октябрь 9, 2008 в 9:22
Как хорошо что удалось отыскать такой замечательный блог, и тем более отлично, что есть такие автора толковые!
Ноябрь 6, 2008 в 9:24
А есть аналог Web Developer Toolbar для ИЕ и Оперы?
Ноябрь 6, 2008 в 11:26
У оперы есть встроенный инструмент – Dragonfly, для IE есть Internet Explorer Developer Toolbar, но это больше аналоги firebug, аналога Web Developer Toolbar нету.
Ноябрь 7, 2008 в 18:15
Web Developer Toolbar имеет уже встроенный валидатор как локальных страниц, так и обычных. Более того в Dreamweaver тоже есть валидатор. А так, в принципе, очень неплохо. Сжатие CSS и оптимизатор png – +1
Ноябрь 7, 2008 в 18:35
Преимущество HTML Validator в том что он выполняет проверку валидации при загрузке страницы, а при клике на значек видно все ошибки и исходный код…
Ноябрь 13, 2008 в 11:48
да, HTML Validator сила! Пожалуй, самый лучший плагин для лисички
Ноябрь 22, 2008 в 17:20
Netware Pixie – очень полезная программулька, но скорее для дизайнера, а не для верстальщика, хотя мне помогает и там и там.
Ноябрь 23, 2008 в 0:43
А что за программа такая, а то я через поиск не смог найти обзора с толковым описанием.
Декабрь 2, 2008 в 12:05
Добавил бы в набор какую-нибудь экранную линейку. Мне больше всего понравилась PMeter
Декабрь 6, 2008 в 11:23
2Verstalschik.Com
Экранная линейка есть в WebDeveloper toolbar, не вижу смысла для этого ставить лишний плагин.
Декабрь 16, 2008 в 6:07
Спасибо за FireBug! О4ень понравился!!! : )
Декабрь 18, 2008 в 0:20
Извиняюсь, что не дал ссылку. Описания нет, потому что по сути там нечего описывать.
Есть базовые сочетания клавиш Ctrl+Z (показать увеличенный кусочек экрана под курсором, вроде лупы), Ctrl+X (вывести палитру цветов с текущим цветом пикселя под курсором), Ctrl+C (скопировать цвет пикселя).
Существует аналог. Но его названия не помню.
Простите еще раз за то что неверно указал название производителя Nattyware Pixie.
Ссылка.
Январь 21, 2009 в 18:37
А вы всем этим пользуйтесь? Или есть какие-то программы, которые не вошли в приведенный список?
Апрель 1, 2009 в 2:10
Хех…
Почаще пишите смайлики, а то всё так как будто все очень серъёзно
Апрель 2, 2009 в 21:59
Н-дя, а я все еще верстаю в древнем HomeSite 4.5 от уже несуществующей компании allaire. Версия 2000 года выпуска
Апрель 12, 2009 в 17:20
не вижу большого смысла в этих плагина? что вы мерять собрались не пойму, у всех моники разные хоть сто браузеров проверяй на соседнем копе это все выглядеть будет по другому.
Тут главное зафиксировать картинку,а пнг вообще не выгодный по весомости формат для сайтов GIF вот сам то!
Не советую привыкать к этой программе Adobe Dreamweaver. Потом просто долго будете отвыкать, сразу учитесь писать в блокноте, ставьте сервер себе на комп и дерздайте.
для работы нужно
сервер Denwer 3.3
учебник по Html и php msQi MySQL
стандартный виндовс блакнот
Adobe Photoshop
учебник к нему
Macromedia Fireworks , Macromedia Flash учебники к этим прогам, это по изображению Fireworks для гиф анимаций и кнопок, Flash это вообще сильная прога по флеш.
ну и так по мелочи типа такой програмки что бы не заморачиваться в с ява менюхами Ultra menu
Ну а самое главно желание, дело это не простое и не одна профа, если хотите заниматься сайтами вам надо это делать компанией, в одно лицо это сложно сделать! Удачи !
Апрель 13, 2009 в 13:09
2Хранитель Реж
Спора нет, сайт и на телефоне при достаточном энтузиазме можно сверстать.
Все плагины нужны для двух целей – автоматизировать процесс, сэкономить время.
Блокнот подходит только для обучения. Верстка в блокноте – потеря кучи времени.
ПНГ выгодный формат. Читайте мат.часть. В пнг ряд картинок обыгрывают по размерам и качеству другие форматы. Альфа-канал без пнг вообще не существует.
По поводу студий и распределения обязанностей согласен, но этот блог посвящен чисто верстке!
Апрель 25, 2009 в 13:47
Zodios ну если у тебя инет афигеть какой быстрый то можно и не только пнг использовать формат:)))) а вот если у человека скорость 15 кб.с у него сайт как зависнет на пнг и будет частями открываться ох как не красиво это выглядит. Вот в чем не выгоден пнг:)
Июнь 1, 2009 в 22:48
Было бы прикольно, если бы свои мысли читатели выражали в стихах..интересно было бы такой блог прочесть
, админ мо введешь ради прикола такое правило на пару дней?)
Июль 4, 2009 в 20:01
Я практически случайно зашел на этот блог, но вот обосновался тут надолго. Задержался, потому что все очень интересно. Обязательно скажу о вас всем своим знакомым.
Июль 27, 2009 в 21:46
Продаю Yellsoft DirectMailer 1.6.9 (лицензия).
Предлагаю:
1.Тест Yellsoft DirectMailer 1.6.9 (3 часа)->5у.е
2.Тест Yellsoft DirectMailer 1.6.9 (24 часа)->10у.е
Для теста необходимо:
1.Шаблон письма (text/HTML).
2.E-mail база
3.Socks в текстовом формате
Цена Yellsoft DirectMailer 1.6.9 – 50$
Помощь в установке и настройке – бесплатно!
ICQ:564949838
Август 17, 2009 в 23:13
Просто замечательно!
С дримом не согласен конечно, уж слишком сложно и неточно в нем верстать. А подборка плагинов – замечательная!
Спасибо.
Август 19, 2009 в 18:31
По моему мнению, эта тема довольно сложная для новичка
Сентябрь 3, 2009 в 16:52
А почему у вас сайт в таких странных тонах? Содержание отличное, а дезайн можно поинтереснее сделать
Сентябрь 30, 2009 в 11:52
Спасибо, чем-то уже пользовался и много нового узнал
Октябрь 13, 2009 в 1:23
Случайно наткнулась на тему.
Т.к. я в этой теме не разбераюсь, … почерпнула много нового
Декабрь 1, 2009 в 11:07
Я – новичок в этой области. Узнала много нового. Материал изложен отлично. Спасибо:)
Январь 16, 2010 в 1:00
со всем согласен, одобряю) для тестирования в ие6 использую IETester, потому что под win7 multiple не хочет запускаться. и ещё бы программку сюда, чтобы проверять верстку под линуксом. хотя для этого есть browsershots.org
Март 10, 2010 в 23:36
модернизация компьютера
Март 16, 2010 в 15:52
Слышал еще и такое, что для ФФ верстать мучение:) меня конечно рассмешило это дико. Порой ие отображает вернее, чем опера. A это подтверждает, что оперо – уг еще то.
Март 17, 2010 в 0:54
Скачать фильмы
Март 19, 2010 в 0:15
Не думал, что найду это здесь.
Март 28, 2010 в 19:30
Апрель 28, 2010 в 14:56
Очень мне понравились дополнения к мозиле
Плагин для FireFox
Июнь 10, 2010 в 12:17
Июнь 22, 2010 в 9:35
Июль 1, 2010 в 6:42
Ноябрь 28, 2010 в 17:50
Хранитель РЕЖ! «»…Не советую привыкать к этой программе Adobe Dreamweaver…»
ггг:) Такое ощущение что на установление Дримвиевера скоро наложат запрет, и милиция будет ходить проверять каждый компьютер. И если Дрим там будет детектид. то владельца будут сажать пожизнено:)
Да и не все в состоянии запомнить правописание команд) А ДримВиевер автоматом дописывает слова. что существенно сокращает время на написание кода.
Знаете что?:) Не советую не советовать того, чего вы не пробовали или чем не пользуетесь:) Удачи.
Январь 31, 2012 в 18:49
Вместо дрима предпочитаю Aptana Studio во первых бесплатная во вторых более мощная и удобная.