Картинки инструментов, первоначально полученные из Wikimedia Commons.
Люди просто не так хороши в выполнении повторяющихся задач, как компьютеры. Более того, я действительно ненавижу делать то же самое не раз. Я думаю, что любой, кто использует компьютеры на профессиональном уровне (а кто нет, в наши дни?), Был бы упущением не спрашивать себя, как они могут стать более производительными, позволяя своим компьютерам делать скучные кусочки.
Всякий раз, когда я замечаю, что только что делал одно и то же несколько раз подряд, я знаю, что есть возможность для улучшения. Вот почему я всегда в поиске отличных инструментов, которые помогут мне сэкономить время. Использование этих инструментов не только снижает вероятность моих ошибок, но и помогает мне получать больше удовольствия, когда я работаю, потому что я могу пропустить скучные вещи и сразу перейти к интересным вещам — вещам, которые компьютер не может сделать для меня.
Существует множество инструментов, разработанных специально для фронт-эндов и веб-дизайнеров. Вот некоторые из самых больших инструментов для экономии времени, с которыми я сталкивался, и которые я использую относительно часто. Надеюсь, они тоже сэкономят вам время.
SpriteMe: CSS-спрайты сделаны слишком легко
Создание CSS-спрайтов — это метод, который повышает производительность веб-сайта, объединяя много разных изображений в один файл. Несмотря на то, что их полезность не вызывает сомнений, их создание и обновление может быть затруднено вручную. Существует множество инструментов создания спрайтов CSS, таких как популярный генератор спрайтов CSS . Мой любимый, однако, SpriteMe .
SpriteMe — это простая бесплатная служба букмарклетов JavaScript, которая анализирует все фоновые изображения на любой странице, на которой вы ее запускаете, и помогает превратить их в одно или несколько изображений спрайтов. Одним нажатием кнопки «Создать Sprite» SpriteMe копирует имеющиеся у вас изображения и объединяет их в новое для вас изображение спрайта. Более того, он даже покажет вам, какой именно CSS-код вам нужно отредактировать для реализации спрайта!
С SpriteMe у вас больше нет оправданий не использовать CSS-спрайты. Но это нормально, потому что, поскольку SpriteMe выполняет почти всю работу, вам больше не нужны оправдания. Пойдите, наслаждайтесь более длинным перерывом на обед вместо этого.
YUI Grid Builder: мгновенные пользовательские макеты на основе CSS
Если вы уже используете какую-либо часть библиотек пользовательского интерфейса Yahoo ! , вы должны действительно знать о YUI Grid Builder. Если вы еще не используете CSS-фреймворк, этот инструмент дает вам веские основания для начала.
YUI Grid Builder — это элегантный визуальный способ создания надежных макетов на основе CSS с нуля. Все, что вам нужно сделать, это указать желаемый макет, указав ширину страницы (фиксированную или жидкую), количество столбцов, которые вы хотите, и ширину каждого из них. Вы даже можете разделить раздел на два или более подразделов, с легкостью создавая вложенные макеты столбцов.
Когда вы закончите, просто нажмите кнопку «Показать код», и YUI Grid Builder предоставит вам весь необходимый HTML-код, уже связанный с CSS- файлом YUI Grids . Я использую этот инструмент для создания макета прототипа HTML за считанные минуты, и я указал на него нескольким коллегам-разработчикам, когда они попросили меня помочь с макетом. Отлично работает!
Доступ к HTML-формам и построителям таблиц
Формы и таблицы являются одними из самых сложных зверей в HTML. Они не только являются одними из самых деликатных элементов, когда речь заходит о доступности, формы также являются наиболее важной точкой интеграции между передней и внутренней областями веб-сайта. Поэтому очень важно правильно составить код формы и таблицы.
Это именно то, что делают эти два генератора кода из Accessify.com . Quick Form Builder спросит вас о данных, которые вы хотите собрать, и предоставит вам весь HTML-код, который вам нужно скопировать, чтобы форма работала гладко. Он включает в себя <fieldset> s, <label> s и многое другое. Впечатляет, что он даже дает вам возможность синтаксиса в стиле XHTML или HTML.
Аналогично, Accessify Table Builder предоставляет интерфейс «укажи и щелкни» для создания доступных таблиц. Он запрашивает у вас часто забываемый summary атрибут и гарантирует, что ваша разметка имеет правильные headers или атрибуты области, помогая вам создать красивую разметку . Особенно, если вы еще не используете эти функции таблиц HTML, попробуйте Accessify Table Builder в следующий раз, когда вам нужно будет разметить некоторые табличные данные.
Gradient Image Makers
Даже базовые градиенты являются одними из самых хитрых образов для создания, особенно для людей без большого художественного таланта (как, например, ваш). Хотя стандартные графические инструменты, такие как PhotoShop, безусловно, могут сделать эту работу, иногда все, что вам нужно, — это сверхпростой градиент, который трансформируется из одного цвета в другой. Зачем вызывать тяжелую артиллерию для такой простой задачи?
Gradient Maker от SecretGeek — один из двух инструментов создания градиентных изображений, которые мне действительно нравятся. Другой закончен на Gradient-Maker.com . Оба предоставляют очень простой интерфейс «укажи и щелкни» для настройки цветов, размеров изображения и, в случае инструмента SecretGeek, формата изображения.
Инструменты предварительного просмотра и тестирования типографики
Несмотря на тонкость, одно из самых поразительных отличий между хорошим веб-сайтом и хорошим веб-сайтом — профессиональная типография. Выбор правильных шрифтов, изменение размера текста и позиционирование текста являются одними из наиболее детально ориентированных работ, которые должен выполнять веб-дизайнер, а это означает, что это отнимает много времени. К счастью, есть несколько отличных инструментов для выполнения таких задач, как сравнение шрифтов, которые могут показаться ошеломляющими и довольно безболезненными.
Typetester — это веб-сайт, предназначенный исключительно для сравнения шрифтов на экране. Он позволяет вводить образец текста, а затем сравнивать до трех разных шрифтов вместе со свойствами отдельного шрифта, такими как начальный, отслеживание ( letter-spacing ) и цвета. Он даже группирует доступные шрифты в отдельные категории для вас, которые показывают, какие шрифты доступны на каких платформах.
Другим отличным инструментом типографики является типографская сетка , которая накладывает вертикальные или горизонтальные линии сетки через определенный интервал. Это полезно, потому что позволяет вам мгновенно увидеть, складывается ли интервал между различными текстовыми элементами на вашей странице в соответствии с основной математикой шрифтов, которые вы выбрали для использования. Если ваш текст немного нечеткий, это довольно хороший признак того, что вам нужно настроить некоторые свойства текста CSS, например, line-height , чтобы получить наиболее четкую страницу.
XRAY WestCiv: быстро осмотрите элемент CSS Box
Инструмент проверки WestCiv XRAY предоставляет удобный ярлык для просмотра свойств макета любого элемента.
Как веб-дизайнеры, мы постоянно изучаем веб-страницы и изучаем свойства элементов. Многие из нас используют Firebug для этого и, хотя это все еще непревзойденный выбор для серьезной разработки, иногда это просто больше, чем нам нужно. Введите XRAY , межбраузерный букмарклет, который позволяет быстро проверить CSS-элемент элемента и все связанные с ним свойства.
Подобно тому, как сочетания клавиш для копирования и вставки, несомненно, экономят ваше время при наборе текста, XRAY — это быстрое нажатие клавиш, которое поможет вам сэкономить время при просмотре веб-дизайна. Вызовите букмарклет, и XRAY откроет HUD-подобную плавающую панель. Щелкните в любом месте страницы, и элемент, который вы щелкнули, будет выделен в окне просмотра, измерен, и все основные свойства макета отобразятся на панели XRAY.
CleanCSS: оптимизируйте и отформатируйте ваш CSS
Если вам когда-либо приходилось внимательно изучать чужой код, вы знаете, насколько веселее будет процесс, когда этот код отформатирован четко и чисто. К сожалению, это не всегда так, и инструменты оптимизации, такие как минимизаторы CSS, жертвуют удобочитаемостью, чтобы уменьшить размер таблицы стилей. К счастью, инструменты форматирования кода, такие как CleanCSS, могут дать вам лучшее из обоих миров.
Средство форматирования CleanCSS принимает любой произвольный CSS в качестве входных данных и, в соответствии с вашими предпочтениями, либо сжимает, либо расширяет его. Вы можете использовать это после того, как вы закончили писать свои стили как часть конвейера оптимизации бедного человека, или вы можете использовать его для расширения чужого уменьшенного кода одним нажатием кнопки. Вы даже можете определить свои собственные шаблоны форматирования и использовать его, чтобы убедиться, что каждый в вашей команде всегда использует CSS, соответствующий соглашениям о кодировании вашего проекта.
Есть еще?
Все эти инструменты могут сэкономить ваше время, но самый главный совет — сделать процесс поиска улучшений частью вашего ежедневного рабочего процесса. Это поможет вам найти еще больше инструментов и сэкономить еще больше времени, и все это благодаря магии постоянного совершенствования. И если говорить о других инструментах, я оставил ваш любимый? Дайте мне знать, что вы используете в комментариях!