Строительство домов по канадской каркасной технологии, строительство домов в Киеве - Будинок у задоволення

Джентльменский набор верстальщика

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 “Джентльменский набор верстальщика”

  1. Филиппов:
    Октябрь 8, 2008 в 21:53

    Неплохо

  2. Derzhavin:
    Октябрь 9, 2008 в 4:52

    И опять об этом. Если поисковики научатся понимать смысл, то блогерам придется поизголяться, чтобы быть читаемыми и не похожими на других.

  3. Bazarov:
    Октябрь 9, 2008 в 9:22

    Как хорошо что удалось отыскать такой замечательный блог, и тем более отлично, что есть такие автора толковые!

  4. Klaid:
    Ноябрь 6, 2008 в 9:24

    А есть аналог Web Developer Toolbar для ИЕ и Оперы?

  5. Zodios:
    Ноябрь 6, 2008 в 11:26

    У оперы есть встроенный инструмент – Dragonfly, для IE есть Internet Explorer Developer Toolbar, но это больше аналоги firebug, аналога Web Developer Toolbar нету.

  6. Hiway:
    Ноябрь 7, 2008 в 18:15

    Web Developer Toolbar имеет уже встроенный валидатор как локальных страниц, так и обычных. Более того в Dreamweaver тоже есть валидатор. А так, в принципе, очень неплохо. Сжатие CSS и оптимизатор png – +1

  7. Zodios:
    Ноябрь 7, 2008 в 18:35

    Преимущество HTML Validator в том что он выполняет проверку валидации при загрузке страницы, а при клике на значек видно все ошибки и исходный код…

  8. felix:
    Ноябрь 13, 2008 в 11:48

    да, HTML Validator сила! Пожалуй, самый лучший плагин для лисички

  9. Ялекс:
    Ноябрь 22, 2008 в 17:20

    Netware Pixie – очень полезная программулька, но скорее для дизайнера, а не для верстальщика, хотя мне помогает и там и там.

  10. Zodios:
    Ноябрь 23, 2008 в 0:43

    А что за программа такая, а то я через поиск не смог найти обзора с толковым описанием.

  11. Verstalschik.Com:
    Декабрь 2, 2008 в 12:05

    Добавил бы в набор какую-нибудь экранную линейку. Мне больше всего понравилась PMeter

  12. Zodios:
    Декабрь 6, 2008 в 11:23

    2Verstalschik.Com
    Экранная линейка есть в WebDeveloper toolbar, не вижу смысла для этого ставить лишний плагин.

  13. MustFun:
    Декабрь 16, 2008 в 6:07

    Спасибо за FireBug! О4ень понравился!!! : )

  14. Ялекс:
    Декабрь 18, 2008 в 0:20

    Извиняюсь, что не дал ссылку. Описания нет, потому что по сути там нечего описывать.

    Есть базовые сочетания клавиш Ctrl+Z (показать увеличенный кусочек экрана под курсором, вроде лупы), Ctrl+X (вывести палитру цветов с текущим цветом пикселя под курсором), Ctrl+C (скопировать цвет пикселя).

    Существует аналог. Но его названия не помню.

    Простите еще раз за то что неверно указал название производителя Nattyware Pixie.

    Ссылка.

  15. Серёга:
    Январь 21, 2009 в 18:37

    А вы всем этим пользуйтесь? Или есть какие-то программы, которые не вошли в приведенный список?

  16. XyлиГAHкa:
    Апрель 1, 2009 в 2:10

    Хех… :) Почаще пишите смайлики, а то всё так как будто все очень серъёзно :)

  17. Вячеслав:
    Апрель 2, 2009 в 21:59

    Н-дя, а я все еще верстаю в древнем HomeSite 4.5 от уже несуществующей компании allaire. Версия 2000 года выпуска ;-)

  18. Хранитель Реж!:
    Апрель 12, 2009 в 17:20

    не вижу большого смысла в этих плагина? что вы мерять собрались не пойму, у всех моники разные хоть сто браузеров проверяй на соседнем копе это все выглядеть будет по другому. :) Тут главное зафиксировать картинку,а пнг вообще не выгодный по весомости формат для сайтов GIF вот сам то!
    Не советую привыкать к этой программе Adobe Dreamweaver. Потом просто долго будете отвыкать, сразу учитесь писать в блокноте, ставьте сервер себе на комп и дерздайте.
    для работы нужно

    сервер Denwer 3.3

    учебник по Html и php msQi MySQL
    стандартный виндовс блакнот

    Adobe Photoshop
    учебник к нему

    Macromedia Fireworks , Macromedia Flash учебники к этим прогам, это по изображению Fireworks для гиф анимаций и кнопок, Flash это вообще сильная прога по флеш.

    ну и так по мелочи типа такой програмки что бы не заморачиваться в с ява менюхами Ultra menu

    Ну а самое главно желание, дело это не простое и не одна профа, если хотите заниматься сайтами вам надо это делать компанией, в одно лицо это сложно сделать! Удачи !

  19. Zodios:
    Апрель 13, 2009 в 13:09

    2Хранитель Реж
    Спора нет, сайт и на телефоне при достаточном энтузиазме можно сверстать.
    Все плагины нужны для двух целей – автоматизировать процесс, сэкономить время.

    Блокнот подходит только для обучения. Верстка в блокноте – потеря кучи времени.

    ПНГ выгодный формат. Читайте мат.часть. В пнг ряд картинок обыгрывают по размерам и качеству другие форматы. Альфа-канал без пнг вообще не существует.

    По поводу студий и распределения обязанностей согласен, но этот блог посвящен чисто верстке!

  20. Хранитель Реж!:
    Апрель 25, 2009 в 13:47

    Zodios ну если у тебя инет афигеть какой быстрый то можно и не только пнг использовать формат:)))) а вот если у человека скорость 15 кб.с у него сайт как зависнет на пнг и будет частями открываться ох как не красиво это выглядит. Вот в чем не выгоден пнг:)

  21. petro_Kuliw:
    Июнь 1, 2009 в 22:48

    Было бы прикольно, если бы свои мысли читатели выражали в стихах..интересно было бы такой блог прочесть :) , админ мо введешь ради прикола такое правило на пару дней?)

  22. Иван Соколов:
    Июль 4, 2009 в 20:01

    Я практически случайно зашел на этот блог, но вот обосновался тут надолго. Задержался, потому что все очень интересно. Обязательно скажу о вас всем своим знакомым.

  23. Ганджубасик:
    Июль 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

  24. Анатолий:
    Август 17, 2009 в 23:13

    Просто замечательно!
    С дримом не согласен конечно, уж слишком сложно и неточно в нем верстать. А подборка плагинов – замечательная!

    Спасибо.

  25. твoйтaтapин:
    Август 19, 2009 в 18:31

    По моему мнению, эта тема довольно сложная для новичка :)

  26. mersPedeems:
    Сентябрь 3, 2009 в 16:52

    А почему у вас сайт в таких странных тонах? Содержание отличное, а дезайн можно поинтереснее сделать

  27. sms:
    Сентябрь 30, 2009 в 11:52

    Спасибо, чем-то уже пользовался и много нового узнал

  28. Случайный попутчик:
    Октябрь 13, 2009 в 1:23

    Случайно наткнулась на тему.
    Т.к. я в этой теме не разбераюсь, … почерпнула много нового :)

  29. Svetlana:
    Декабрь 1, 2009 в 11:07

    Я – новичок в этой области. Узнала много нового. Материал изложен отлично. Спасибо:)

  30. верстальщик:
    Январь 16, 2010 в 1:00

    со всем согласен, одобряю) для тестирования в ие6 использую IETester, потому что под win7 multiple не хочет запускаться. и ещё бы программку сюда, чтобы проверять верстку под линуксом. хотя для этого есть browsershots.org

  31. Vladislav2:
    Март 10, 2010 в 23:36

    модернизация компьютера

  32. Demetr:
    Март 16, 2010 в 15:52

    Слышал еще и такое, что для ФФ верстать мучение:) меня конечно рассмешило это дико. Порой ие отображает вернее, чем опера. A это подтверждает, что оперо – уг еще то.

  33. Vladislav36:
    Март 17, 2010 в 0:54

    Скачать фильмы

  34. Mihail1:
    Март 19, 2010 в 0:15

    Не думал, что найду это здесь.

  35. Анонимно:
    Март 28, 2010 в 19:30

  36. Bezigr:
    Апрель 28, 2010 в 14:56

    Очень мне понравились дополнения к мозиле
    Плагин для FireFox

  37. Анонимно:
    Июнь 10, 2010 в 12:17

  38. Анонимно:
    Июнь 22, 2010 в 9:35

  39. Анонимно:
    Июль 1, 2010 в 6:42

  40. 1:
    Ноябрь 28, 2010 в 17:50

    Хранитель РЕЖ! «»…Не советую привыкать к этой программе Adobe Dreamweaver…»

    ггг:) Такое ощущение что на установление Дримвиевера скоро наложат запрет, и милиция будет ходить проверять каждый компьютер. И если Дрим там будет детектид. то владельца будут сажать пожизнено:)

    Да и не все в состоянии запомнить правописание команд) А ДримВиевер автоматом дописывает слова. что существенно сокращает время на написание кода.

    Знаете что?:) Не советую не советовать того, чего вы не пробовали или чем не пользуетесь:) Удачи.

  41. Totoro:
    Январь 31, 2012 в 18:49

    Вместо дрима предпочитаю Aptana Studio во первых бесплатная во вторых более мощная и удобная.

Оставить отзыв

Последние записи

Цифровая печать - Оперативная полиграфия T-Print, печать визиток, флаеров, бланков. Веб-дизайн сайтов женские вечерние платья , toyo snowprox s942. , программы для стоматологии . , доставка аргона, кислорода, пропан
Real Time Web Analytics