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

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

И это то, где мы войти Еще в старые времена, Smashing Magazine, используемых для публикации списков после того, как списки, с множеством ссылок, которые охватывают различные темы все как-то связан с веб-дизайном и развития.Мы прошли довольно развитие с тех пор, и теперь почти публикации только в углубленном статьи — написал одни из лучших специалистов в этой отрасли.Тем не менее, полезно, тщательно подготовленные и отфильтрованные списки все еще полезны, и поэтому мы продолжаем публиковать их как well.

Ниже you’ найдете 50 полезных инструментов и экономии времени для веб-дизайнеров и developers.Среди прочего, вы найдете недавно выпустила инструменты, полезные справочные данные, статьи и дополнительные ресурсы.Такие сообщения будут подготовлены в течение нескольких месяцев, каждый из которых содержит ресурсы найдены, отзывы или закладкой на Smashing редакции.Мы надеемся, что по крайней мере некоторые из них помогут вам улучшить свой рабочий процесс

Вы можете быть заинтересованы в следующих связанные должности:

• 50 мощных экономии времени в веб-Designers
• 50 Новые полезные методы CSS, инструменты и Tutorials
• 45 невероятно полезный веб-дизайна Контрольные перечни и Questionnaires

Typography

Meet Your Type: Путеводитель для Typography (бесплатный PDF)
Эта книга поможет вам лучше понять основы типографики и преодолеть общие препятствия и проблемы при выборе type.

Web Font SpecimenЭтот шаблон позволяет проверить типографии, анализируя HTML-образца в Вашем браузере.Образец содержит целые абзацы в различных высотах линии и размеры шрифтов, различные заголовки, упорядоченные и неупорядоченные списки, а также курсивом и полужирным шрифтом.Вы можете проанализировать сравнения размеров тела, который показывает аспекты шрифтом, что can’ T иначе видели и исследование одногоглифы, мера, оттенки серого, а также свет на темные и темные на светлом превью.Вы можете проверить Хорошо Web Fonts для фактических образцов различных экран разборчивым fonts.

Шрифт Анатомия Wallpaper
Этот обои (1920× 1200) охватывает терминологию типографии, демонстрация отдельных частей символы alphabet.

Web FontFont Руководство пользователя (PDF)
этого пользователя Web FontFont руководство содержит информацию о типографии, направленные на различные группы людей: веб-разработчиков, системных администраторов и посетителей сайта.Вы можете рассмотреть вопрос о предоставлении ей ваших клиентов или colleagues.

AltFontPrevЭто просто закладка JavaScript, который позволяет просматривать шрифт стека любого веб-сайта, а затем отключить каждый шрифт с помощью одного клика.Это облегчает не только убедиться, что все выглядит нормально, когда некоторые шрифты aren’ T установлен на user’ Система S, но и для просмотра шрифтов, включенных в website’ стека шрифтов с одним щелчком мыши, а не открывать исходныйкод.Вы даже можете указать специальный шрифт, который делает его удобным при you’ повторное рассмотрение изменения design’ текущих font.

TypografixЭтот инструмент HTML переработке скрипт для создания красивой типографикой.Он исправляет такие вещи, как эллипсы и умные цитаты и добавляет теги для <script> <pre> и <code> автоматически.Тире, например, создается автоматически при дефис окружен пространств и тире создается, когда два тире появляются в строке.Typografix написана на C #, требуется Windows Installer 3.1 и NET Framework 3.5 SP1.

Unicode Codepoint ChartЭта диаграмма разбивается аккуратно по типу характера и символ (и по языку во многих случаях), с визуальным ссылки по каждой категории.Оттуда, просто нажмите на символ или знакВы хотите, и you’ повторно привлечены к странице с подробной информацией о характере, наряду со страницы браузера теста, план (в формате SVG) и различные кодировки и наборы символов (HTML лица, UTF-8, UTF-16, UTF-32, ISO-8859-8 и др.)

Bookmarklets

QuixМы рассмотрели Quix несколько раз уже, но когда говорят о букмарклеты, это просто необходимо отметить, Quix, а также.Wouldn’ т было бы хорошо иметь мощную командную строку в браузере, своего рода оболочку, которая позволяет использовать удобные команды и горячие клавиши для более быстрой и продуктивной рабочий процесс?That’ именно то, что предлагает Quix.Инструмент умного расширяемой закладка, которая позволяет как доступ к закладкам и выполнять различные операции на других websites.

WP-Toolbar bookmarkletЭтот инструмент позволит сэкономить много кликов, как вы изменить или обновить сообщения на ваш WordPress-блога питанием.Букмарклет обеспечивает быстрый доступ ко всей административной фоновых прямо в browser’ окна с.Существует также GreaseMonkey script, которая автоматически загружает на панели инструментов, когда вы посещаете частности website.

Print Friendly Bookmarklet
Эта закладка рекламной полосы, навигация и все, что вы don’ т хотим, чтобы, когда вы решите распечатать страницу.Это форматов содержание статьи или документа для большого readbility и создает минимальные и чистой PDF для printing.

Bookmarklet CombinerЭтот инструмент создает мастер букмарклет, который может либо выполнить все закладки сразу, либо отобразить меню на некоторые части страницы.Хороший сервис для пользователей, кто хочет избежать с помощью специальной папке только для хранения всех bookmarklets.

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

Bespin Bookmarklet
ИспользованиеBespin Bookmarklet, вы можете заменить любую текстовую вы сталкиваетесь с редактором Bespin, что делает редактирование текста гораздо больше pleasant.

CSS, HTML и JavaScript Tools

eCSStenderРасширения построены с eCSStender упростить процесс проектирования, потому что вы можете автор современные CSS с использованием передовых селекторов, свойств, таких как границы радиуса, или пользовательских шрифтов лица и будьте уверены, что ваш проект будет работать — даже в IE6.

CoffeeScriptЭто немного язык программирования, который компилирует JavaScript, одновременно упрощая код, который разработчики на самом деле имеют дело.Он работает с текущей библиотеки JavaScript и составляет чистый код, в результате чего даже комментарии нетронутыми.Как только разработчики ознакомиться с тем, как CoffeeScript работ, они могли бы спасти себя много времени и головной боли с упрощенной code.

# grid# Сетке небольшой инструмент, который вставляет сетку на веб-странице.Вы можете держать сетку на месте и переключать его между передним и задним планом.Для отображения сетки, просто нажмите горячую клавишу на клавиатуре, и вы можете установить собственные быстрые клавиши для переключения views.

Primer CSSЭтот крошечный генератор работает в Интернете и имеет только одну функцию: он извлекает из страниц HTML (копирование и вставка будет делать), рамки классов и идентификаторов, которые могут быть использованы в качестве основы для внешней таблицы стилей.Это может быть замечательно, если вы работаете сначала делает структуру в HTML, а затем форм и цветов в стиле sheet.

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

JS.Class: Ruby стиле JavaScriptJS.Class представляет собой набор инструментов, предназначенных для позволяют легко создавать надежные объектно-ориентированных программ в JavaScript.Он основан на Ruby, и дает вам доступ к объекту Ruby, модулей и классов систем, некоторые из его отражение и метапрограммирование объектов, а также несколько пакетов из стандартной библиотеки.Он также предоставляет менеджер пакетов, чтобы помочь загрузить приложения efficiently.

JS BinJS Bin это приложение специально разработан, чтобы помочь JavaScript-и CSS-разработчикам для тестирования фрагментов кода, в некотором смысле, и отладки кода совместно.JS Bin позволяет редактировать и тестировать JavaScript и HTML (перезагрузка URL также поддерживает состояние вашего кода, новые вкладки doesn’ т).После you’ Re счастлив, что вы можете сохранять и отправлять URL для сверстников для рассмотрения или помощи.Затем они могут внести дополнительные изменения сохранении заново, если required.

JQuery 1.4.2 Визуальный Чит SheetJQuery Визуальный Шпаргалка является обновленной версией полезно Шпаргалка JQuery.Она включает в себя все ссылки вам нужно для JQuery 1.4.2 API.

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

Jo: JavaScript Application Framework для HTML5Джо охватывает JavaScript’ с объектной модели и использует CSS3, чтобы справиться с любым количеством презентации и анимации насколько это возможно.Она также обеспечивает последовательную и модульную модель событий между объектами и играет хорошо с другими библиотеками, как PhoneGap.

Sencha: HTML5 приложения FrameworkСенча сенсорный позволяет разрабатывать веб-приложения, которые выглядят и чувствуют родные на Apple, IOS и Google Android с сенсорным экраном devices.

Aloha Editor, HTML5 Editor
Aloha редактора является передовым на основе браузера редактор, который работает быстрее, чем другие редакторы и предоставляет Вам лучше и богаче, форматирование в режиме реального времени в Вашем browser.

JavaScript Regex синтаксис Highlighter
Хотите RegexPal стиль подсветка синтаксиса регулярных выражений на веб-страницах?Эта библиотека заботится об этом для вас, так что вы можете потратить больше времени на написание регулярных выражений и меньше времени на расшифровку их.В настоящее время, JavaScript регулярные выражения только supported.

OpenStack Открытое облачных вычислений Источник Software
Цель OpenStack, чтобы позволить любой организации создавать и предлагать облачные вычисления возможности использования ПО с открытым кодом, работающих на стандартном оборудовании.OpenStack Compute это программное обеспечение для автоматического создания и управления большими группами виртуальных частных servers.

сладкие template
Sweet (Простой веб-интерфейс шаблона) представляет собой легкий шаблон JavaScript с высокой производительностью.It’ S маленький, быстрый, простой в использовании и, что самое важное, расширяемой.Он также может быть интегрирован с jQuery.

JQuery Deconstructed
Deconstructed серия предназначена для визуального и интерактивного вскрыть внутренний код библиотек JavaScript, включая jQuery, Prototype и MooTools.Это нарушает физическое наличие в визуальные блоки, которые можно easiliy навигации.Каждый блок открывается, чтобы показать своювнутренний код.Гиперссылку позволит вам следовать программе flow.

Сплав UIСплав UI metaframework, которая обеспечивает последовательную и простую API для создания веб-приложений на всех трех уровнях браузера: структура, стиль и behavior.

Google JavaScript Стиль Guide
Этот документ предоставляет набор конвенций (иногда произвольный), которые держат стиль принципы, используемые для кода Google.Он охватывает общие надлежащей практики для проектов с открытым кодом и хорошо написанный и хорошо документированный код.Она охватывает много земли, от “CamelCase использовать для имен переменных” до “никогда не использовать глобальные переменные” в __0 “никогда не использовать исключения”. |

gleeBoxGleebox предоставляет возможность навигации по веб-страницам с помощью клавиатуры.Например, она позволяет попасть в ‘ G’ ключ и все ссылки на странице будут выделены.Это приложение доступно как расширение для Firefox и Google Chrome.

shellinaboxShell In A Box реализует веб-сервер, который может экспортировать произвольное инструменты командной строки для веб-эмулятор терминала.Этот эмулятор является доступной для каждого браузера, поддерживающего JavaScript и CSS и не требует никаких дополнительных браузера plugins.

Соковыжималка: CSS и JavaScript упаковки toolСоковыжималка это новый инструмент командной строки, которая позволяет путем разрешения зависимостей, слияния и сжатия файлов.Он может проверить синтаксис, добавить кэш нарушителей к циклу активов и хосты URL-адреса в CSS files.

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

Закрытие CompilerClosure Compiler представляет собой инструмент для создания JavaScript загрузить и работать быстрее.Это настоящий компилятор для JavaScript.Вместо компиляции из исходного языка в машинный код, он компилирует от JavaScript, чтобы лучше JavaScript.Он анализирует вашу JavaScript, анализирует ее, удаляет мертвые кода и переписывает и минимизирует what’ осталось.Он также проверяет синтаксис, ссылки на переменные и типы, и предупреждает об общихНаличие pitfalls.

Полезные Online инструменты и Services

ComparePSD (Win Only) Этот инструмент позволяет сравнить два Photoshop файлы бок о бок и видеть каждый мало что …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров