Дизайн Мания » Программы

Расширения Google Chrome для дизайна и веб-разработки

Tod — Tue, 26 Apr 2011 21:01:15 +0000

С момента своего появления браузер Google Chrome отличился хорошей скоростью работы, простотой и удобством, чем с первых дней завоевал массу поклонников. В то же время, на Хром обрушилось много “критики” от людей которые привыкли к удобным плагинам на Firefox – плагины были одним из факторов, которые не позволяли использовать Google Chrome в качестве привычного рабочего инструмента. В их числе были веб-дизайнеры, веб-мастера, разработчики и др. К счастью, эти времена давно остались позади и сегодня для Google Chrome разработано (или адаптировано) огромное количество расширений (Extentions). Давайте рассмотрим те что будут полезны веб-дизайнеру или веб-мастеру:

Web Developer

Web Developer — это не один, а целый набор инструментов для дизайнера и веб-разработчика. С помощью этого расширения вы можете получить информацию о том или ином элементе страницы, стилях, изображения и прочее. Лично я использую Web Developer но только под Firefox, чаще всего с его помощью просматриваю страницы в размере 1024*768 для корректного отображения в меньших мониторах, тестирую и правлю CSS на лету, использую для валидации, можно удалить Cookies и еще много чего.

Firebug Lite

Firebug Lite — облегченная версия популярного плагина Firebug (известного так же на Firefox). Расширение представляет из себя инспектор элементов и удобный инструмент отладки. В Lite-версии отсутствует Net-панель и JavaScript debugger. Для опытных разработчиков, думаю, нет смысла рассказать в чем преимущества Firebug.

CSSViewer

С помощью CSSViewer вы можете быстро посмотреть набор стилей для любого элемента страницы. Простой, но очень удобный плагин. Насколько я знаю в Firebug и Web Developer есть тоже что-то подобное, но если не нужны другие функции этих расширений, то можно установить это куда более простое.

Window Resizer

Window Resizer позволяет вам посмотреть как ваша страница будет выглядеть при различных разрешениях экрана. Имеется предустановленные форматы мониторов, ноутбуков и мобильных устройств, что выгодно отличает это расширение Google Chrome от того же Web Developer, где (насколько я знаю в Firefox) нужно самому создавать размеры для проверки.

HTML Validator

Согласитесь, каждый раз заходить на сайта W3C чтобы проверить валидность кода не очень удобно? Расширение HTML Validator делает процесс удобным и практически молниеносным. В одной из прошлый статей Tod’s Blog я рассматривал вопрос валидности HTML в том числе с использованием noindex. После обсуждений пришел к выводу, что она хоть и не является обязательным на 100% условием успешного сайта, но поможет выявить ошибки верстки, которые (по возможности) лучше всего исправить. Кстати, если сравнивать с тем же Web Developer, при валидации в нем вас перебрасывает на сайт W3C где можно посмотреть ошибки, но нет просмотра в текущем окне как это показано для Google Chrome на картинке выше.

PHP Consol

PHP Consol — мощный инструмент отладки PHP. Причем, данное расширение не такое простое каким кажется с первого взгляда (полный набор функций вы можете изучить на странице расширения). Консоль позволяет увидеть ошибки, исключения и разные отладочные сообщения.

ColorPicker

ColorPicker — это «пипетка» для Google Chrome. С помощью этого расширения вы можете определить значение цвета в любой области страницы. Основные особенности плагина:

- Регулируемая область пипетки — от 1 до 101 пикселя (вы можете определить значение цвета определенного пикселя или области);
- Проверка на совместимость (соответствие) с WCAG 2.

Одним словом – архиважный и очень удобный инструмент для дизайнера.

Chrome Palette

Chrome Palette — еще одно полезное расширение для работы с цветом. Благодаря Chrome Palette можно за считанные секунды сформировать палитры из любого изображения:

Font Editor

Расширение Font Editor позволит вам посмотреть как будут выглядеть те или иные шрифты (включая гарнитуру, начертание, размер шрифта и прочее) на любом сайте:

Chrome Page Extended

Chrome Page Extended нельзя назвать чисто «дизайнерским» плагином, зато он поможет вам управлять (в том числе и с помощью горячих клавиш) всеми имеющимися (установленными) расширениями. Надеюсь эти 10 расширений для Google Chrome повысят вашу производительности и эффективность в этом, безусловно, очень перспективном браузере! И если раньше одним из немногих останавливающих факторов от его использования был недостаток расширений Google Chrome, то сегодня этой преграды нет.

P.S. Если вы новичок в интернете и пока еще не знаете как создать свой блог можете попробовать бесплатный и полезный видеокурс по вордпресс.
Компания СпецСервис Логистика поможет с сертифицировать продукцию для которой держспоживстандарт требует наличие специальных сертификатов.
Хотите установить интересный статус посмотрите готовые статусы о любви в контакте которые можно использовать для своих персональных страниц соц.сети.

Теги: google, дизайнеру, полезные программы, разработка сайта, расширения для браузеров, создание сайта

Интересные статьи по теме

Программы для верстки и отладки под Internet Explorer

Tod — Fri, 28 Nov 2008 22:30:12 +0000

Могу поспорить, что Internet Explorer – самый любимый браузер всех веб-разработчиков и верстальщиков на земле! Именно поэтому мы так часто проверяем как в нем отображается тот или иной дизайн. Ведь знаем – любимый браузер может интерпретировать написанный код так хорошо, что мы уже привыкли видеть самые неожиданные результаты:)

Ок, шутки в сторону, вернемся к теме статьи. Предлагаю ознакомиться с наиболее часто используемыми инструментами (программами), которые помогут вам лучше понять и отладить код под Internet Explorer.

IETester

IETester – бесплатный веб-браузер, который позволяет вам получить интерпретацию (отображение) кода и javascript движок для версий IE8 beta 2, IE7 IE 6 и IE5.5 на Vista или XP.

DebugBar

DebugBar – плагин для Internet Explorer, который предоставляет полный контроль над веб страницей. В него входит HTTP, DOM, Javascript инспектор и HTML валидатор.

Companion.JS

Companion.JS (или CJS) – Javascript дебагер для IE. Это почти Firebug под Explorer.

Internet Explorer Developer Toolbar

Internet Explorer Developer Toolbar (IE Developer Toolbar или IE DevBar) – аддон для Internet Explorer 6 и 7, который предназначен в разработке и отладке веб-страниц.

Firebug Lite

Firebug Lite – это JavaScript файл, который вы можете вставить в ваши веб-страницы, дабы имитировать некоторые функции Firebug под IE.

IE Tab

Позволяет использовать Internet Explorer в качестве вкладки (Tab) в браузере Firefox.

Данные пост является переводом статьи Do some IE homework. Приятной вам и безпроблемной верстки под Internet Explorer

P.S. Интересная книга для блоггеров о том как установить и настроить блог WordPress.

Интересные статьи по теме

Менеджер шрифтов FontExpert

Tod — Tue, 23 Sep 2008 15:46:11 +0000

Многие дизайнеры и те, кто просто связан с интернетом, любят собирать различные коллекции кистей, стилей для фотошопа и, конечно же, шрифтов. Я и сам страдаю подобной «зависимостью», если можно так выразиться. А что, грех не сохранить красивый экземпляр или новую подборку рукописных шрифтов. Тем более, что когда-то все это чисто теоретически может пригодиться. В данном случае очень важно определенным образом упорядочивать или систематизировать свою коллекцию – в этом вам поможет менеджер шрифтов FontExpert.

Возможности данной программы просто потрясающие, самый многофункциональный программный продукт по шрифтам, что я видел, количество изменяемых настроек не счесть. Итак, что же может делать FontExpert:

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

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

Очень удобная опция – группировка шрифтов. Позволяет создавать целые наборы, которые позже можно активировать одним кликом.

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

По каждому шрифту можно просмотреть детальную информацию – от разработчика до авторских прав и его характеристик. Это, наверное будет интересно настоящему фанату шрифтов:) Кроме того, в контекстном меню windows появятся пункты установить, открыть и напечатать.

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

Дабы вы окончательно поверили, что программа просто супер функциональная, предлагаю вглянуть на ее внешний вид:

Скачать (зеркало) ~ 4,5 Мб (в архиве есть patch/crack)

Внимание, программа предоставляет исключительно для ознакомления. Если вам понравится, то конечно же, рекомендую ее купить, стоимость всего $59.

Недавно на SmashingMagazine был пост по теме – 25 Font Management Tools Reviewed. Признаться, даже хотел заняться его переводом, но там просто громадный объем информации, которую сложно будет переварить. Кроме рассмотренного мной FontExpert, там есть описание множества других программ – для Mac и Windows, платных и бесплатных.

Кстати, о переводах. Блог “Бесплатная альтернатива” совместно с TranslateIt! запустил новый конкурс. Для участия нужно перевести любой интересный пост иностранного блоггера и опубликовать его в своем блоге.

P.S. Предлагаю ознакомиться также с материалами друзей проекта Дизайн Мания.

Читаем о том как создать цветовую схему? Смотрим удобные штучки – вещи, которые помогают нам жить и узнаем что-то новенькое (о продвижении блога в форумах).

Спасибо спонсорам:

Теги: полезное, программы, программы для шрифтов, скачать шрифты, шрифты

Интересные статьи по теме

Google Chrome – новый браузер

Tod — Thu, 04 Sep 2008 17:44:31 +0000

Google Chrome (официальный сайт, скачать) – тема номер один последних нескольких дней во всех блогах и ИТ-шных сайтах. Кто-то пишет обзоры, кто-то свои впечатление и результаты анализа, кто-то не против получить дополнительный трафик на блог – в общем, у каждого свои цели. Всех этих авторов объединяет одно – они создали, пожалуй, самую большую «информационную волну» за все время, что я активно обитаю в Интернете. Даже выход о Firefox3 не был насколько обсуждаем, как Google Chrome.

Что касается впечатлений общественности, то мнения, как и следовало ожидать, разделились – одни просто восхищаются браузером, другие восприняли новость практически без энтузиазма. Я отношусь ко вторым. Если охарактеризовать браузер Google Chrome в целом, то он еще очень сырой. Это, в принципе, и не удивительно, если учесть, что релиз имеет приставку beta. Тем не менее, даже невооруженным глазом видно, что работы впереди еще очень много. Создана лишь оболочка, которую в ближайшее время нужно наполнить, довести до ума, после чего можно уже будет делать некоторые выводы. К тому времени, ажиотаж также должен слегка поутихнуть и начнется трезвая оценка шансов и возможностей браузера.

Поскольку Дизайн Мания является блогом о веб-дизайне, то пропускать подобные темы я, как автор проекта, не имеют права. Ведь браузеры – неотъемлемая часть веб-дизайна. Открываю данной публикацией категорию «Программы» для раздела «Инструменты». Выскажу несколько своих соображений насчет браузера Google Chrome.

Впечатляет:

1. Браузер поддерживает движение программных продуктов с открытым кодом (open source), что, безусловно, вызывает уважение, а также дает широкие перспективы для разработчиков.

Мы многим обязаны различным проектам open source, и собираемся придерживаться этого курса. Мы использовали, среди прочих, компоненты Apple WebKit и Mozilla Firefox и тоже открываем наш исходный код. Мы надеемся, что наше сотрудничество со всем Интернет-сообществом поможет и дальше развивать Интернет.

2. Локализация – столько языковых версий я не видел ни в одном приложении.

3. Скорость работы – пожалуй, самое удивительное достижение. Да, сейчас браузер просто не загружен лишними плагинами, но, думаю, причина не в этом.

Если заглянуть “под капот”, можно увидеть, что мы сумели создать ядро браузера, выполняющего современные сложные веб-приложения намного лучше. Выделяя каждой вкладке свою изолированную среду, мы не даём одной зависшей вкладке подвесить остальные, а также обеспечиваем дополнительную защиту от вредоносных сайтов. Мы улучшили общую скорость работы и отклик на команды. Мы также создали V8, усовершенствованный движок Javascript – он будет лежать в основе следующего поколения веб-приложений, которые невозможны в существующих сегодня браузерах.

4. Наличие интересных решений для браузера – совмещение строки запроса с поисковиком, выполнение некоторых команд в строке, удобное добавление закладок, динамические вкладки, ярлыки приложений и упрощенный процесс загрузки файлов. Подробнее о функциях Google Chrome можно посмотреть здесь.

Вызывает сомнения (пока что)

1. Я думаю, пока что говорить о новом серьезном игроке на рынке не приходится. Безусловно, Google – авторитетная компания с большими возможностями и «чистым продвинутым разумом», но рынок сейчас уже сформирован, причем этот процесс происходил не один год.

2. Чтобы совершить прорыв требуются действительно оригинальные решения. Добавив немного штрихов в юзабилити, завоевать доверие сотен тысяч пользователей не получится. ИМХО, должно быть что-то новое в полном понимании этого слова – вот например Aurora. На данном этапе все движения на рынке – борьба за 3-4%, кто больше «оттяпает у ИЕ». Нет игрока способного прийти и заинтересовать 20% пользователей.

3. Признаться не совсем понятная целевая аудитория Google Chrome, как правильно сказал один человек:

Для любителей красот уже есть Опера. Для чайников – IE. Для остальных – FireFox, который настраивается как угодно. Есть ли здесь место Google Chrome?

Полностью разделяю его мнение. Сейчас браузер от Google сложно назвать user friendly, по-моему, в дизайне перестарались с минимализмом, хотя это в стиле web 2.0.

4. Несовместимость с большим числом надстроек. Понятно, что все это дело времени, однако переходить на новый браузер без своих любимых плагинов никто не будет. Хотя (судя по опросам) достаточно большой процент людей, которых сдерживает именно это. Выше уже упоминалось, что в разработке Google Chrome использовались компоненты Mozilla Firefox, поэтому, думаю, совместимость плагинов для этих браузеров будет максимально высокой. Более того, когда я импортировал настройки с Firefox, у меня сохранились даже пароли на все страницы!

Темы для браузера Google Chrome

В архиве есть 3 цвета:

Скачать темы для Google Chrome

Скачиваем, распаковываем архив в папку Documents and Settings \ Имя_пользователя \ Local Settings \ Application Data \Google \ Chrome \ Application \0.2.149.27 \Themes или что-то около того.

Чтобы применить ту или иную тему нужно заменить файл default.dll любым из вариантом.

Дополнительная информация о Google Chrome

Теги: google, браузеры, обзоры, полезное, программы, темы