6 основных дополнений Firefox для дизайнеров

1. Веб-разработчик
2. поджигатель
3. ColorZilla
4. FireShot
5. CSS Validator / HTML Validator
6. Resizer Window Browser

Как веб-дизайнер (и технически подкованный пользователь Интернета), у вас нет оправдания тому, что вы не используете Firefox в качестве основного веб-браузера. Если вы еще не используете Firefox, вам нужно пойти и скачать это прямо сейчас. Firefox не только обеспечивает лучшую работу в Интернете, но также предоставляет бесконечное количество функций, которые вы просто не найдете ни в одном другом интернет-браузере.

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

Поэтому я решил сделать всю работу за вас и составить список шести лучших дополнений Firefox для веб-дизайнеров.

Веб-разработчик

Хотя это называется Веб-разработчик это дополнение к Firefox абсолютно бесценно для веб-дизайнеров. Если вы собираетесь загрузить и установить только одно дополнение к Firefox, то это то, что я бы порекомендовал вам. Причина заключается в том, что это дополнение предоставляет множество различных полезных функций и может быть классифицировано как дополнения «Швейцарский армейский нож Firefox» .

Первая особенность этого дополнения, которую дизайнеры найдут полезной, это меню CSS . Функции этого меню включают в себя возможность отключать стили, отображать CSS по типу мультимедиа, просматривать CSS, просматривать информацию о стилях, добавлять пользовательские таблицы стилей или напрямую редактировать CSS .

Следующей особенностью, интересующей дизайнеров, является меню «Изображение» . Помимо возможности отображения атрибутов ALT, размеров изображений, размеров файлов изображений и путей к изображениям, вы можете отключить изображения, найти поврежденные изображения, контурные изображения, заменить изображения атрибутами ALT и несколькими дополнительными функциями.

Хотя я мог бы посвятить несколько страниц всем функциям, которые предлагает это дополнение, я просто хочу коснуться нескольких других функций, которые веб-дизайнеры сочтут особенно полезными. Они включают в себя возможность выделять различные элементы (от рамок до элементов уровня блока), редактировать HTML и показывать скрытые элементы .

поджигатель

Хотя веб-разработчик является первым дополнением, я бы порекомендовал любому дизайнеру, поджигатель занимает второе место с точки зрения полезности для дизайнеров.

С Firebug вы сразу получаете возможность редактировать, отлаживать или контролировать любую веб-страницу . Firebug дает вам полный контроль над CSS, HTML и JavaScript любой страницы по вашему выбору. Лучше всего то, что каждое внесенное вами изменение выполняется вживую и мгновенно , поэтому вы можете быстро протестировать различные изменения и мгновенно увидеть результаты этих изменений.

Как и большинство лучших надстроек для Firefox, Firebug выходит за рамки своей базовой функциональности и предоставляет множество опций, которые позволяют любому пользователю легко полностью настроить использование этого надстройки. Некоторые из дополнительных функций и опций, предлагаемых Firebug, включают сочетания клавиш, возможность контролировать, как и где появляется область редактирования Firebug, визуальные руководства по редактированию CSS, анализ сетевой активности и настраиваемое ведение журнала для JavaScript .

ColorZilla

Как веб-дизайнер, вы никогда не знаете, когда вас поразит вдохновение, когда вы путешествуете по Интернету. Например, вы можете просматривать веб-сайт и найти цвет, который вам действительно нравится.

Если вы хотите быстрый и эффективный способ узнать точное значение HSV и RGB для этого инструмента, вам следует установить ColorZilla добавить.

Надстройка ColorZilla оснащена онлайн-пипеткой , которая позволяет довольно просто получить точное значение определенного цвета. В дополнение к онлайн-пипетке ColorZilla предлагает несколько дополнительных функций, которые большинство веб-дизайнеров сочтут полезными, такие как анализатор цвета DOM и онлайн-палитра . Анализатор цвета DOM позволяет находить на странице элементы, которые соответствуют заданному цвету, и определять правила CSS, которые определяют определенный цвет, а средство просмотра онлайн-палитр позволяет создавать закладки и публиковать понравившиеся цветовые палитры.

FireShot

Хотя ваша ОС, несомненно, имеет встроенную функцию захвата экрана, это не означает, что захват экрана по умолчанию обладает всеми необходимыми вам возможностями.

Например, может ли снимок экрана по умолчанию для вашей ОС захватывать части веб-страницы, которые находятся за пределами окна браузера?

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

FireShot - это расширенная надстройка для захвата экрана для Firefox . В дополнение к возможности захвата всей веб-страницы (даже если есть части веб-страницы, которые не видны в результате ограничений окна вашего браузера), FireShot также позволяет добавлять аннотации непосредственно к вашему снимки экрана.

FireShot дает вам несколько вариантов обработки снимков экрана. Они не только могут быть сохранены в различных форматах файлов, но также могут быть сохранены на вашем компьютере, отправлены по электронной почте другим лицам или сохранены на бесплатном хостинг-сервере FireShot. Благодаря широкому спектру функций это дополнение привлекло более ста пятидесяти тысяч активных пользователей и зарекомендовало себя бесценным для веб-дизайнеров и других интернет-профессионалов.

CSS Validator / HTML Validator

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

Хотя они являются двумя отдельными надстройками, в браузере любого веб-дизайнера должны быть установлены как CSS Validator, так и HTML Validator . После установки надстроек CSS Validator доступ к нему можно получить из меню «Инструменты», доступ к HTML-валидатору можно получить из строки состояния Firefox.

Каждая из надстроек проверяет код на соответствие стандартам W3C . В то время как CSS Validator просто выполняет стандартную проверку кода, HTML Validator предоставляет некоторые дополнительные функции.

При использовании HTML-валидатора вы можете выбрать проверку непосредственно в браузере (где любые ошибки отображаются в виде значка строки состояния), показать источник с объяснениями ошибок после проверки или проверки с предлагаемыми решениями любых ошибок.

Resizer Window Browser

Как человек, который создает дизайны для Интернета, одной из самых неприятных проблем, с которыми вы, несомненно, сталкиваетесь, является попытка создать дизайны, которые работают на экранах различных размеров.

Поскольку вы не знаете, будет ли посетитель просматривать вашу работу с разрешением 640 × 480, 800 × 600, 1024 × 768, 1280 × 1024 или 1600 × 1200, вы несете ответственность за создание дизайнов, которые будут работать со всеми этими разрешениями. ,

Хотя существует множество способов просмотра вашей работы в разных разрешениях, я обнаружил, что браузер Дополнение Resizer для Windows это самый эффективный способ выполнить эту задачу. Загрузив и установив это дополнение, вы сможете мгновенно изменить размер окна браузера до любого из стандартных размеров разрешения, указанных выше.

Это позволит вам увидеть, будет ли ваш дизайн выглядеть хорошо для посетителей, которые не используют то же разрешение, что и вы. Лучшее в этом дополнении то, что если вы используете его вместе с другими надстройками в этом списке (в частности, Firebug), когда вы видите, что что-то не отображается должным образом, вы можете мгновенно внести изменения в свой код и посмотрите, решит ли это проблему, не выходя из текущего окна браузера.

Знаешь какие-нибудь другие хорошие расширения для дизайнеров? Не стесняйтесь комментировать и оставить нам отзыв.

Похожие

Комментарии