Пользователь
0,0
рейтинг
16 января 2014 в 22:11

Разработка → 14 инструментов для веб-дизайна и веб-разработки на 2014 год перевод

Вместе с WEB движущимся семимильными шагами (адаптивным дизайном, CSS препроцессорами, постпроцессорами и другими вещами) может оказаться проблемой попытка не отставать от чего-то нового и полезного.
Ниже Вы найдете 14 инструментов, 7 для веб-дизайнеров и 7 для веб-разработчиков, которые помогут веб-сайту перерасти из концепции в действительность.

Для веб-дизайнеров


1. Adobe Creative Cloud

Разумеется, что Photoshop и Illustrator являются двумя важными инструментами для любого веб-дизайнера. Вместе с Creative Cloud у вас будет доступ к обоим из них, и плюс к некоторым другим инструментам, таких как: Typekit, InDesign и Kuler. Все инструменты Creative Cloud очень хорошо взаимодействуют друг с другом, и должны иметься у любого дизайнера.

2. UI Faces

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

3. 0to255

Этот инструмент я использую почти каждый день. 0to255 упрощает поиск разновидностей выбранного цвета. Это идеальный инструмент для выделений, активных состояний и подсвечиваний.

4. Google Fonts

Типографика в WEB проделала длинный путь со дней Arial, Courier и Georgia. Google Fonts это огромная библиотека свободных, готовых шрифтов которые могут быть загружены на стадии макета.

5. Samuel L. Ipsum

Поклонникам фильма "Змеиный полёт", я представляю «Samuel L. Ipsum» (Сэмюель Л. Ipsum). Это Lorem Ipsum генератор цитат. Имейте в виду, существует три варианта на выбор: цитаты ненормативной лексики ладена из фильмов Джексона, чистые цитаты из фильмов Джексона и обычные ol’ lorem ipsum.

6. Responsive Sketch Pad

Шаблоны пользовательского интерфейса Responsive Sketch Pad ваш хороший спутник, когда вы находитесь на этапе предварительного планирования. Точечная сетка упрощает придерживание линий и визуализиацию сайта в браузере и на мобильном устройстве.

7. Macaw

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

Для веб-разработчиков


1. Coda 2

Это мой любимый из-за его «все-в-одном» редактор кода, FTP клиент и встроенный MySQL редактор. Coda 2 также включает в себя справочную библиотеку по программированию и визуальный CSS-редактор.

2. CSS Pre-processor

В зависимости от того, что вы разрабатываете, здесь вам поможет руководство. SASS требует, чтобы работал Ruby (встроен в любой Mac) и и на базовом уровне делает тоже что и LESS, другой препроцессор. Оба являются отличными инструментами и предлагают экономящие время функции, такие как вложенные правила, смешивания, переменные и логику.

3. Front-end Framework

Снова, есть два отличных предложения которые рассмотрим. Вместе Twitter Bootstrap и Zurb’s Foundation поможет сделать прототипирование и разработку для современного WEB быстрее и проще. Оба пакета это адаптивная сеточная система с элементами стилей и javascript по умолчанию, для реализации богатого WEB.

4. Browserstack

Это фаворит из всего набора. Browserstack позволяет вам тестировать завершенный дизайн в любом браузере и на любой конфигурации, о которой вы могли только подумать. Это удобный инструмент, если вы все еще должны поддерживать IE7 и IE8 в ваших проектах.

5. Pingdom

Раскройте DNS и проблемы загрузки с Pingdom. Вы увидите, сколько времени забирает загрузка различных ресурсов на вашем сайте вместе с общим показателем производительности.

6. Chrome Developer Tools

Если вы используете один из инструментом входящим в Chrome Developer Toolkit, то пусть это будет называться веб-инспектор. Вместе с инспектором вы сможете быстро диагностировать проблемы и внести изменения в разметку. Вы также можете эффективно использовать консоль для логирования и взаимодействия с JavaScript.

7. MAMP Pro

С легкостью крутите сайты локально. MAMP Pro позволяет легко установить и администрировать Apache, MySQL и среду разработки PHP. Если вы работаете над большим количество сайтов для клиентов, вам необходимо иметь такой сервер.
Перевод: Travis Arnold
Артём @Shybko
карма
0,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (15)

  • +2
    Стоит отметить появление мощных облачных IDE: Koding, Cloud9 и Codebox
  • +1
    Вы терпеливый человек, если Coda 2 вам кажется удачным решением… Тот же sublime обходит его на порядок в удобстве… Это надо же, плагины приходится скачивать и ставить вручную, а такие банальные вещи, как трим пробелов в конце строк реализованы плагином… Бррр. А стоит эта программа, как взрослая IDE…
    • 0
      О каком терпении речь? Работает шустро, делает все что надо. А sublime похож на большой комбайн, который нужен не всем. И как вы посчитали порядки удобства пользования?

      Вы меня извините за неловкие вопросы, но у меня четко появилось ощущение, что обсуждаем плюсы и минусы мобильных операционных систем, а не редакторы кода.
      • +2
        Ну, не знаю, вероятно мы с вами разные люди)
        Я просто вчера сильно расстроился, купив Coda 2 и найдя, что он вроде с одной стороны и приятный, а с другой стороны какой-то тугой и (лично для меня) не удобный именно базовым фунционалом. Именно тем, чем я пользуюсь в других редакторах чаще всего: открытие файлов (нечёткий поиск), поиск функций, редактирование текста, работа с vcs (которую мне даже не удалось настроить в этом приложении)
  • 0
    Огромное вам спасибо за Zurb’s Foundation. Название кажется знакомым, но до этого момента с ним не знакомился.
    Очень кстати, очень в тему. Бутстрап уже сильно приелся, а я как раз на выходных новый проект начинаю.
    • 0
      Всегда пожалуйста :) Рад, что пригодилось :)
    • 0
      Очень мощный и своеобразный фреймворк. В некоторых моментах значительно удобнее и гибче, чем bootstrap. При этом объем кода совершенно небольшой (в сравнении). Что у них со временем стало страдать, так это документация.
  • +8
    Ничего личного, но статья не информативна — «аля подкаст-обзор».
  • +6
    Не так давно открыл для фронтенда Pure: purecss.io, очень легкий и простой css фреймворк от разработчиков Yahoo. Основное отличие от бутстрапа и компании — крайняя простота и отсутствие JS. Если нужна удобная сетка + заголовки + формы + кнопки + таблицы — отлично подойдет.
  • 0
    Я не могу не отметить начавшуюся движуху вокруг верстки последние годы. Недавно посмотрел еще раз возможности live edit некоторых систем:

    От тяжелого к легкому.
    1)Системы типа Phpstorm, net beans — похожи возможностями live edit. Оба имеют плагин для FF и Chrome, оба подсвечивают блок в браузере при тыкании в код. Хорошие возможности автокомплита и выравнивания кода. Штуки вроде не плохие, однако верстку бывает нужно править, и редактирование файлов по f4 эти системы просто не предназначенны. Чегож тогда к ним привыкать для верстки.

    2)brackets.io — еще сыроват. Бесит рендер шрифтов убогий. Через плагины можно что то поменять, но быстро забил. Стартует не долго совсем. Похож на сублим. Неплохо работает live edit, возможно лучше чем в пункте 1.

    3) Тестовые редакторы с плагинами sublim (Еще в процессе изучения) и notepad++. Для них можно найти кучу плагинов, есть даже отдельные liveedit приложения, для live edit синхронизации между любыми тестовыми редакторами и браузерами. Ссылочку что то не найду, но мне не понравилось — глюкаво сильно. Этот пункт самый востребованый в силу универсальности и скорости при достпуных возможностях.

    4) Новые средства разработки от гугла — devtools с возможностью редактирования кода через отладчик и сохранения на локальный диск. До этого были вот такие вещи github.com/NV/chrome-devtools-autosave Вобщем то… это то, что я называю «так держать — верное направление».
    Все, что мне не хватает в пунктах выше — это обратная связь. Я не могу щелкнуть в html в браузере и переместиться в место кода, а через devtools и firebug я это делаю постоянно. Каждый раз, пользуясь тестовыми редаторами, без firebug не обходится. Эта обратная связь меня побудила поробовать начать что нибудь светстать в самом браузере, в firebug я к примеру, к концу какого либо шага, тупо копирую весь html и весь css копи пастом в файлы верстки. Да, минусы тут есть, плохие возмоности автоподстановки, но там куча всего и облегчающего это дело. Так что пункты 3-4 самые ходовые.
  • +2
    • +1
      Чтобы отобрать все гугль-шрифты с кириллицей, достаточно слева в меню Script выбрать Cyrillic.
      • 0
        Спасибо, я знал, что где-то должна быть такая кнопочка
  • 0
    То ли тегов не хватает, то ли широты предложений. Вы всерьёз считаете, что только на маках люди программируют и верстают?
  • +1
    В шрифты с кириллицей добавлю еще вот этот сервис: http://webfont.ru/ наблюдаю и пользуюсь им достаточно давно. Разработчики прошли длинный путь. И это здорово! Очень эффективный полигон.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.