Инструменты и сервисы для верстальщика

Пиксельная линейка MeasureIt идет как плагин для FireFox а так же Chrome

Для Chrome тык
Для FireFox тык

 

верстальщику в первую очередь нужны
- Firebug
- Notepad++
- FileZilla

без этих интструментов, даже не представляю себе верстальщика

 

http://www.colorzilla.com/gradient-editor/
Очень полезная штука

 

Coda+
FireBug - один из самых универсальных
+ пользую встроенный в Safari отладчик чем то похож на Firebug

 

в Firefox:
Firebug
-Code Coverage
-CodeBurner
-CSS Usage
-CSSUpdater
-Firebug AutoCompleter
-FireFile
-FireFinder
-FireFontFamily
-FireFrame
-FireHiddenView
-FirePath
-Firepicker
-FireRainbow
-Inline Code Finder

-YSlow

Firesizer
Font Finder
MeasureIt
OpenWith
PixelPerfect

Не Firefox:
Notepad++
Filezilla
Adobe Fireworks
Adobe Photoshop
PNG Optimizer

Ну и сервисы разные, по ситуации. Например, fontsquirrel.com или gradient-editor

 

Песочница для HTML/CSS/JS:

1. cssdesk.com (HTML+CSS)
2. jsfiddle.net (HTML+CSS+JS+фреймворки)

Генераторы кросс-браузерных правил/стилей CSS 3:

1. westciv.com
2. css3please.com
3. css3generator.com

Градиенты:

1. colorzilla.com - Ultimate CSS Gradient Generator.
2. css3pie.com - кросс-браузерный CSS3-градиент.
3. display-inline.fr - css3 + поддержка совместимости (png, svg).
4. gradients.glrzad.com - генератор градиентов.

Оптимизация изображений:

1. smushit.com/ysmush.it
2. punypng.com
3. kraken.io

Тестирование:

1. htaccess.madewithlove.be - тестирование .htaccess.
2. webo.in - проверка скорости загрузки сайта.
3. loadimpact.com - нагрузочное тестирование сайта.
4. websitepulse.com - тесты для сайта и сервера.
5. cloudmonitor.ca.com - проверка скорости загрузки сайта в реальных браузерах (из разных точек мира).
6. check-host.net - проверка сервера на доступность из разных точек мира (Ping, DNS, HTTP, TCP порт).
7. host-tracker.com - проверка доступности сайта.
8. ping-admin.ru - проверка доступности сайта из различных частей мира.

 

Редактор значительно ускоряет вёрстку) В сравнению с NotePad. По крайней мере мне.
SublimeText

 

Мечта верстальщика ставшая реальностью — это emmet livestyle, гуглите господа и воздастся вам.

 

для Firefox
Web Developer - нереально облегчает работу, ставится как тулбар с массой полезных инструментов.
Auto Reload - автоматом обновляет браузер при изменении исходников.

 

Странно, упомянули Notepad++ но незаслуженно обошли вниманием Sublime Text. Мои приоритеты:
Редактор:
Sublime Text 3. +Emmet, конечно же.
FTP/SFTP клиент:
WinSCP.
Ловля багов:
Firefox + Firebug.

 

было бы намного лучше если бы вы то что предлагали еще бы и на облако закидывали и ссылку прикрепляли=)
что бы форумчане могли протестировать что вы советуете=)
как я знаю Sublime Text 3 платное ПО.

Так сказать уважаемые, я обойду все эти ФайлЗилы и Сублимы=)
Мне удалось найти хорошую сборку Дрима=)
Вот ссылочка=)Качайте и радуйтесь https://cloud.mail.ru/public/bc90289d6115/Adobe.Dreamweaver.CC + КРЯК/
Это полноценная CC , работает и облако, и синхронизация , и фтп аундефикация=)
Вообще как лицуха=)Там прикреплен TxT файл а нем есть 2 способа кряка=)
При первом не работает облако и некоторые плюхи отключаются=) а вот при втором все работает на ура=)не знаю в чем дело=)

 

Sublime Text платный, да. Стоит около 70 баксов. Но работает вечно, периодически только выкидывая окошко, мол, купите. Окошко вылазит достаточно редко, на фукнционале не сказывается, поэтому смысла ломать не вижу. www.sublimetext.com

 

Нигде не вспомнили о Brackets. Бесплатный редактор, написанный не JavaScript. Быстро развивающейся комюнити, каждый день выходят новые плагины.
Одна из лучших альтернатив платным редакторам.
http://brackets.io/

 

Интересненько , а кто что посоветует по css анимации ?

 

Brackets бери и изучай.
Прошлый оратор изменил мое представление о редакторах.
Напомню что Бракетс это опен сорс бесплатный редактор от компании Adobe.

 

Пользуюсь Notepad++, phpDesigner и Filezilla вполне хватает такого набора, ну и конечно же валидатор W3C

 

Поддержу и добавлю от себя Framework Bootstrap, так как верстаю адаптивные сайты, и конечно же дополнение для chrome - Responsive web design tester или же эмулятор мобильного браузера от Opera

 

Пользуюсь Sublime Text 3, Brackets, Notepad ++, фреймворк Bootstrap

 

Полезный сервис для верстальщика: http://layerstyles.org/builder.html

 

Для живой верстки использую связку Firefox + PHPStorm + плагин CSS-X-Fire