Софт

Brackets Ftp

Рейтинг: 4.6/5.0 (208 проголосовавших)

Категория: Windows

Описание

Введение в веб-разработку, знакомство с редакторами Sublime Text и Brackets

Введение в веб-разработку, знакомство с редакторами Sublime Text и Brackets. Установка и настройка. 5 видео-уроков

Всем привет. В этом посте я предлагаю новичкам познакомиться с основными инструментами, которые используются для верстки сайтов. А именно с текстовыми редакторами кода. Я сделал видео-обзор редактора Sublime Text 3 и Brackets. Безусловно существует еще много других разных программ. Но для того что-бы начать, необходим один инструмент, а не десять. Поэтому предлагаю начать с самого популярного Sublime Text 3 или с более дружелюбного для новичков — Brackets от Adobe. В этих уроках мы установим, настроим и подготовим к работе главный инструмент верстальщика сайтов — редактор кода.

Сначала я сделаю сравнительный обзор двух текстовых реакторов, затем в ряде видео расскажу про работу в Sublime Text и в 4-м видео — про работу в Brackets. Если вы решили использовать Brackets — то можно посмотреть вводное видео, и сразу переходить к видео-касту №4 про Brackets. Если Sublime — то для него я записал несколько видео-уроков так как порог вхождения в него немного выше, и соответственно требует большего внимания.

Обзор текстовых редакторов Sublime Text 3 и Brackets

Если вы считаете себя уверенным пользователем ПК, и работа в программах с «командной строкой» вас не пугает, то смело начинайте работу с Sublime Text. Если вы хотите более дружелюбный интерфейс, или Sublime Text не зашел вам с первых попыток, тогда установите Brackets.

В первом видео я делаю обзор этих редакторов, так что посмотрев его вы уже сможете приступить к ним, установить их и что называется «пощупать вживую».

Скачать редакторы можно по ссылкам:
Sublime Text 3
Brackets

Видео 1. Установка и знакомство с редактором Sublime Text 3

В этом видео мы скачаем и установим Sublime Text 3. Познакомимся с его внешним видом (интерфейсом программы). И научимся полезным вещам — которые будут облегчать нашу работу. Научимся разделять рабочее пространство на сколько областей, чтобы одновременно работать с 2-мя или более файлами, что очень удобно при верстке. Когда в одном окне мы пишем html разметку, и в другом css стили. И назначим команду горячих клавиш для реиндентации — чтобы оформление нашей разметки было опрятным и хорошо читаемым.

Видео 2. Sublime Text 3: установка package control, плагины Emmet и AutoFileName

В этом видео мы установим специальное расширение package control, благодаря которому в Sublime Text можно устанавливать плагины (дополнительные расширения) которые расширяют его функционал. Подробно про настройку Sublime, и в частности про установку package сontrol я уже писал в статье Установка и настройка Sublime Text 3. Самая полная инструкция. Поэтому если вы лучше воспринимаете текстовую информацию, то можете провести всю настройку редактора по этой статье. Или воспользоваться записанными видео.

Для того чтобы установить package control в консоли редактора необходимо написать код с сайта https://packagecontrol.io/installation .

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

Далее происходит установка плагинов, вот названия нескольких основных которые будут вам полезны:

  • Emmet (ускорение написания html и css)
  • Hayaku (ускоение написание css)
  • LESS (syntax highlighting — подсветка кода less)
  • Prefixr (префиксы для CSS)
  • Placeholders (Lorem Ipsum наполнители для html файлов)
Видео 3. Установка темы Material Theme

В этом видео-уроке предлагаю настроить внешний вид редактора, сделав его более удобным для работы, и более современным. Ниже вы можете видеть скриншот того как будет выглядеть редактор после установки и настройки этой темы.

Material Theme — цветовая тема для редактора Sublime Text 3

В видео я упоминаю кастомные (пользовательские) настройки, которые необходимо прописать. Вот содержание этих настроек:

Видео 4. Работа с редактором Brackets от Adobe. Плагины, работа с фотошоп макетами — PSD файлами.

В этом видео я покажу все необходимое чтобы установить, настроить и начать использовать редактор Brackets. Его интерфейс более дружелюбный, и поэтому вся информация по этому редактору помещена в рамки одного видео-урока, в отличие от Sublime Text.

Следует сказать что редактор Brackets был разработан специально, для верстки сайтов. В то время как другие редакторы разрабатывались просто как универсальные инструменты, Brackets — нацелен на одну задачу — быть основным помощником для верстальщика сайтов, фронт-энд специалиста.

В уроке мы установим редактор, установим плагины (Emmet), познакомимся с внешним видом редактора. И самое главное рассмотрим работу расширение Extract (preview) from Adobe. Это расширение позволяет экспортировать графику из photoshop файлов .psd формата прямо в редакторе. А также брать всю необходимую информацию из макета, такую как размер текста, цвет, гарнитура шрифта, размер фигур, отступы и многое другое прямо в редакторе и сразу же прописывать эти значение в html разметке или css стилях. Что является очень серьезным преимуществом редактора Brackets.

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

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

Здравствуйте. Спасибо за статью.

Я открыл редактор Sublime Text 2 в первый раз, набрал простенькую программку, определяющую название странички в браузере, внёс маленький текст для этой странички…. а как эту программку запустить, т.е. увидеть страничку в браузере с названием, которое я придумал, увидеть текст на этой страничке, ни как не соображу.

Наверное у вас такой вопрос вызовет улыбку, но у меня все творчество остановилось) Программка есть, а результат выполнения посмотреть не могу.

Добрый день. Для того чтобы создать html страницу достаточно в редакторе создать файл и сохранить его скажем под именем index.html

index — это имя — может быть любым, но лучше на латиницие. html — это расширение файла. HTML страницы имеют расширения .html или .htm. Рекомендую использовать .html

После того как страницу сохранили, открывайте ее в браузере. Ваша ОС (Windows) по идее сама должна открыть эту страницу в интернет браузере. И вы увидите все что написали внутри этой страницы.

Понятно. Буду пробовать.
Спасибо за помощь.

Brackets ftp:

  • скачать
  • скачать
  • Другие статьи, обзоры программ, новости

    Brackets для сомневающихся и новичков

    Brackets для сомневающихся и новичков 08.11.2014 19:49

    Brackets Git Тут всё предельно ясно из названия. Очень полезное расширение для работы со всем известной системой контроля версий.Git в Brackets Code Folding Без этого плагина в Brackets нет такой нужной функциональности, как сворачивание блоков кода. После установки слева, рядом с номерами строк, появятся треугольники, которые позволяют сворачивать те фрагменты, которые сейчас не нужны.Сворачивание кода Emmet В представлении не нуждается, но для новичков будет интересно о нём узнать. Этот плагин позволяет существенно ускорить ввод текста при редактировании LESS, CSS и HTML.Например, вводим такую конструкцию: button.btn.btn-primary<Кнопка> После нажатия клавиши Tab она будет развёрнута в такую: Кнопка Идём дальше: div.btn-toolbar>(button.btn.btn-default<Кнопка>)*3 по нажатию развернётся в

    Кнопка Кнопка Кнопка

    Не буду делать дальнейших спойлеров, лучше почитайте уже имеющиеся на Хабре обзоры: Прощай, Zen Coding. Привет, Emmet! Вышел Emmet v1.0Также рекомендую официальную инструкцию (на английском).Codeoverview Включает небольшую панель в правой части окна редактора, где отображается весь код «с высоты птичьего полёта». Можно быстро перейти к любому интересному участку.Помимо плагина CodeOverview есть также BluePrint в стадии Beta. Какой лучше — решайте сами.Обзор кода Documents Toolbar Для тех, кто привык к вкладочному интерфейсу и не хочет от него отвыкать (взамен Brackets предлагает список открытых файлов над деревом).Brackets Fonts Позволяет выбрать из списка шрифт, которым будет выводиться текст в редакторе. Обратите внимание на то, как стали отображаться кириллические символы. Кроме этого есть ещё несколько плагинов с таким же функционалом. Имеется возможность открыть в меню пункт Вид/Themes, где вручную прописать, какие шрифты следует использовать.Шрифты Http Server for Brackets Запускает локальный HTTP-сервер для отладки вашего проекта. В чём отличие от встроенного Live Preview? Это не LivePreview, т.е. страницу надо обновлять вручную. Обратиться к данному серверу можно из любого браузера, установленного в системе. Разработчики под IE и Firefox ликуют. Также в каталоге расширений есть плагин Static Preview, подобный LivePreview, но позволяющий делать «живую» правку в других браузерах, однако на текущий момент (8 ноября 2014 года) он «вешает» Brackets. Если быть более точным, он не даёт редактору возможности нормально завершить свою работу — сохранить настройки и список открытых файлов. Возможно, эту ошибку скоро исправят, но имеющиеся проблемы лично меня уже оттолкнули от этого плагина.Grunt for Brackets Brackets может предложить плагин для Grunt’а. Его настройка — отдельная тема, некоторые даже целые книги написали об этом. От себя замечу лишь, что сейчас, в 2014 году, не использовать Grunt или Gulp — признак дурного тона и несерьёзности разработчика.Beautify, Beautifer Простым нажатием комбинации клавиш Ctrl+L или Ctrl+B плохо оформленный JS- или HTML-код превращается в оформленный вполне приемлемо. На картинках global_main.js Хабра до и после применения данного плагина. Не используйте эти плагины для LESS! Они вставляют пробелы после двоеточий, что делает LESS-файл некомпилируемым.Ассистент, всё в мясорубку!

    Верстальщику LESS Autocompile Для тех, кто не хочет головной боли от правки CSS давно придуман LESS. Данный плагин позволяет автоматически компилировать ваши .less-файлы при сохранении. В текущем состоянии требует небольшой настройки.Brackets Autoprefixer Думаю, этот плагин не нуждается в представлении. Он вставляет в имеющийся CSS-файл необходимые дополнения для поддержки вендорных префиксов и старых браузеров. В зависимости от настроек можно получить самые разные результаты. Имеет довольно простое окно параметров. Полный список можно посмотреть на странице проекта на GitHub.Минимализм настроек Autoperefixer CSSLint, LESSLint, LESS StyleSheets Formatter Три плагина, призванные помочь в улучшении вашего LESS- и CSS-кода. Будут указывать на типичные и не очень ошибки. Пример на картинке.Ошибки в CSS HTMLHint, More CSS Code Hints, More HTML5 Code Hints Плагины просто дают больше подсказок при правке HTML и CSS. Учитывая, с какой скоростью базовую поставку Brackets добавляются различные улучшения и дополнения, следует ждать интеграции функционала этих плагинов в ядро.ColorHints, Brackets Color Picker Первый выводит подсказку при наведении курсора на код или название цвета в редакторе, умеет также показывать градиенты. Второй выводит окошко с палитрой для выбора нужного цвета. При редактировании LESS-файлов окошко для выбора цвета следует вызывать по Ctrl+Alt+K, если оно не появилось автоматически после ввода слова color.Подсказки при вводе градиентов и цвета

    JavaScript-разработчику JSHint, JSLint, JSHint Configurator, JSLint Configurator Крайне полезные плагины для разработчиков, которые не только верстают, но и пишут код на JavaScript. На выбор JSHint и JSLint, хотя можно использовать оба (второй куда более предвзято отнесётся к вашему коду). Конфигураторы, как видно из названия, позволяют настроить разные параметры проверки кода, например, игнорировать использование функции requirejs до её объявления.Все и так знают, для чего нужен каждый из параметров FuncDocr Плагин позволяет быстро документировать функции JS.Например, имеется следующий код: Desktop.prototype.addResizeHandler = function (handler) < if ($.isFunction (handler)) < this.resizeActions.push (handler); > >; Становимся перед объявлением функции и вводим /**. После нажатия клавиши Enter FuncDocr развернёт этот комментарий, подставив заготовки, куда надо лишь вписать нужное: /** * [Brackets Ftp. Введение в веб-разработку, знакомство с редакторами Sublime Text и Brackets. Установка и настройка. 5 видео-уроков Всем привет. В этом посте я предлагаю новичкам познакомиться с основными инструм] * @param <[[Type]]> handler [Brackets Ftp. Введение в веб-разработку, знакомство с редакторами Sublime Text и Brackets. Установка и настройка. 5 видео-уроков Всем привет. В этом посте я предлагаю новичкам познакомиться с основными инструм] */ Desktop.prototype.addResizeHandler = function (handler) < if ($.isFunction (handler)) < this.resizeActions.push (handler); > >; AngularJS Code Hints, AngularJS for Brackets Добавляют подсказки при вводе Angular-директив. Я плохо знаком с этим фреймворком, но надеюсь, указанные два плагина оправдают надежды специалистов.Rename JavaScript Identifier Становимся на идентификатор, нажимаем Ctrl+R, вводим новое имя — все вхождения переменной в скрипт автоматически переименовываются.Ложка дёгтя При всём многообразии настроек и параметров, есть некоторые претензии к Brackets. Первая и самая важная — скорость работы. При наличии большого количества плагинов и множестве подключенных к документу CSS начинает довольно заметно подтормаживать появление подсказок при редактировании документов. Иногда довольно долго приходится ждать реакции редактора при правке JS-скриптов. Второе — довольно неудобное дерево навигации. Третье — некоторые плагины способны «повесить» редактор, не давая ему нормально закрыться и сохранить настройки.

    Brackets ftp

    Brackets – перспективный open source редактор кода от Adobe, на замену Sublime Text

    Опубликовать в ВКонтактеОпубликовать в Facebook

    Всем добрый день, вы попали на блог luzlol.me. Я уже пару раз вскользь упоминал свой workflow в статье про разработку темы для WordPress. и сегодня хотел бы подробнее остановиться на редакторе кода, который я использую – Brackets. Это open source продукт, который курируется компанией Adobe и развивается невероятными темпами.

    Дисклеймер. все, о чем я пишу сегодня было актуально для Brackets версии 25. Следить за новостям касательно редактора можно по адресу: vk.com/bracketsio .

    Важно не забывать, что Brackets все еще находится на стадии активной разработки, но тем не менее редактор уже сейчас выглядит достойным конкурентом таких гигантов как Sublime Text и Coda. А если учесть все доступные расширения, то функционала даже побольше наберется! Но обо всем по-порядку.

    Последнюю версию, кстати, всегда можно скачать по адресу download.brackets.io. есть версии как для OSX, так и для Windows. При появлении новой версии вас уведомят об этом с помощью иконки подарочка и нужно будет проследовать по ссылке, загрузить и установить новую версию редактора.

    Знакомство с Brackets

    Нас встречает классическое окно редактора справа и колонка с файлами нашего проекта (2). в том числе с секцией «Working Files» (1). в которую попадают только те файлы, которые были отредактированы с момента последнего открытия программы. В самом редакторе можно включить «быстрое редактирование» (Ctrl/Cmd + E) для редактирования CSS-правил (3). относящихся к выделенному тегу/классу/id.

    Быстрое редактирование доступно также для всего, что касается цветов в вариантах rgb(a), hsla, hex. Я думаю в будущих релизах будет реализован быстрый редактор для теней, градиентов, границ и их радиусов. Плюсом к этому можно включить функцию «Quick view on hover», которая позволит просматривать цвет, если вы наведете мышку на код, представляющий его.

    Одной из сильных сторон Brackets является интеграция с сервисом webplatform.org. с его помощью можно получить быструю подсказку по поводу различных css-свойств и тому как их нужно использовать. Webplatform.org это постоянно-пополняемая и обновляемая open source энциклопедия, поэтому об актуальности информации можно не беспокоиться. Активируется сочетанием Ctrl/Cmd + K.

    Классические функции редактора кода

    Brackets не хуже других справляется с повседневными задачами простого редактора. Здесь вам и расширенный поиск с поддержкой регулярных выражений, не только по активному файлу, но и по всему проекту (Ctrl/Cmd + Shift + F). И возможность быстро открыть файл по названию без нужды искать его в дереве (Ctrl/Cmd + Shift + O). Также существуют горячие клавиши для автоматического комментирования (Ctrl/Cmd + /), удаления (Ctrl/Cmd + Shift + D) и дублирования (Ctrl/Cmd + D) строки. Полный список горячих клавиш можно посмотреть на вики-странице горячих клавиш .

    Как и в любом уважающем себя редакторе, реализована поддержка всплывающих подсказок для написания и редактирования html, css и javascript. К слову о javascript – реализована проверка кода с помощью JSLint.

    Live Development

    Гордостью Brackets является поддержка разработки в реальном времени. Чтобы ее включить, жмем на небольшую иконку молнии, и после того как она станет оранжевой редактор подсоединяется к браузеру (пока только Google Chrome) и следит за вашим проектом. При применении каких-то CSS-свойств они немедленно применяются без перезагрузки страницы.

    При редактировании файлов-шаблонов или Javascript-файлов браузер автоматически перезагружает страницы и вы в любом случае сразу же видите изменения. Еще одной из особенностей разработки в реальном времени является подсветка редактируемого блока, для удобства последующей отладки. Просто настоящая находка для прототипирования и Front-End разработки!

    Расширения Brackets

    Как я уже сказал, Brackets – open source проект, поэтому большое количество функций реализуется комьюнити и самые активные пользователи даже выкладывают свои наработки в виде расширений, их полный список доступен в официальном репозитории проекта. Устанавливать и удалять расширения можно из менеджера, который был представлен совсем недавно – в 25 версии программы. Ну а я рассмотрю самые важные на мой взгляд экстеншны.

    Я уверен что Emmet (бывший Zen Coding) знаком каждому «ленивому» веб-разработчику. Это инструмент для сокращения количества вводимого кода с помощью специальных команд. Все подробности можно узнать на официальном сайте Emmet. Я лишь приведу небольшой пример: команда section#blog>article.post$*3>h3+p и нажатие кнопки Tab выведет нам вот такую конструкцию:

    В Emmet так же содержатся команды для CSS-свойств. Если вы все еще не пользуетесь – попробуйте, существенно сокращает время на разработку.

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

    Темы из CodeMirror добрались и до Brackets! Теперь можно кастомизировать внешний вид редактора на ваше усмотрение, в комплекте около 20 тем. Я если честно остался на стандартной теме, уж больно она приятная.

    One more thing…

    На самом деле я очень оптимистично настроен по поводу Brackets, уж очень он хорош собой и обещает быть только лучше! Тем более, что совсем недавно Mac.AppStorm назвал его одним из лучших редакторов для Mac .

    Не забывайте делиться в соцсетях и рассказывать друзьям!

    Опубликовать в ВКонтактеОпубликовать в Facebook

    MODX Revolution Уроки Расширения для Brackets

    Расширения для Brackets

    Недавно я начал использовать Brackets в качестве основного редактора кода и скажу вам — он очень классный. Он создан компанией Adobe и является опенсорс проектом. У редакторе огромное сообщество, которое постоянно разрабатывает всякие полезные дополнения еженедельно и постоянно происходит обновление существующих расширений. Я приведу ниже список наиболее используемых мной расширений (без некоторых из них я просто не смог бы жить :).

    Пакеты для Brackets редактора
    • Brackets Sass — компилирует SASS .sass/ .scss файлы при их изменении. Обновляет стили используя Live Preview. Экспериментальная поддержка Quick Edit.
    • Beautify — форматирует JavaScript, HTML и CSS
    • Brackets CSS Color Preview — предмосмотр цветов в css
    • Brackets File Icons — файловые иконки в дереве редактора
    • Closure Linter — форматирует javascript файлы согласно гиду стилей от Google и автоматически исправляет ошибки
    • Code Folding — простое складывание кода (по-умолчанию функция отсутствует).
    • Emmet - zencoding. ДОЛЖНО БЫТЬ УСТАНОВЛЕНО У КАЖДОГО. Обязательно к использованию, чтобы кисти и глаза не болели.
    • Extract for Brackets — извлекает информацию из дизайна и объекты через контекстуальные подсказки для CSS (мегафича от Adobe)
    • JSHint — добавляет поддержку JSHint для Brackets.
    • FixMyJS — автоматически исправляет обнаруженные JSHint ошибки
    • Grunt For Backets — выводит и запускает задачи Grunt всередине Brackets
    • HTML Skeleton — вставляет различные элементы HTML в ваш документ (для чайников)
    • Image Dimension Extractor — добавляет элемент контекстного меню под названием get image dimension с помощью которого можно извлечь ширину-высоту из css background изображний
    • Inline Gradient Editor — редактирование линейных CSS градиентов в редакторе — используйте Quick Edit (Ctrl-E).
    • Install from Bower — установка фронт-энд пакетов с помощью Bower. Щёлкните Ctrl/Cmd-Alt-B, а далее введите название пакета
    • Javascript & CSS CDN Suggestions — подсказки по JavaScript и CSS библиотекам, которые хостятся на CDN от Google, CDNJS и jsDelivr провайдеров
    • Lorem Picsum for Brackets — генерирует плейсхолдер изображения от lorempicsum.com, быстрые изображения от Futurama, The Simpsons, Rio, Finding Nemo и Up!
    • Markdown Preview — Live preview для маркдаун документов
    • SassHints — автозаполнение для SASS/SCSS переменных
    • SCSS Lint — добавляет SCSS проверку
    • Select Parent — быстрый выбор родительского блока для активного элемента с помощью Cmd/Ctrl-< и вернуться назад с помощью Cmd/Ctrl->
    • Unused Files — находит неиспользуемые файлы в ваших веб-проектах
    • Pagesuck - вытягивает содержимое по ссылке для дайнейшего редактирования

    Chrome расширения для веб-разработчика… Отключение обрезки тегов в TinyMCE

    ©2011 MODX Revolution Уроки

    PHP Live Preview в Brackets

    Пару слов о Brackets

    Adobe Brackets — редактор HTML, CSS и JavaScript. Подробнее можно узнать:

    Одна из важный особенностей редактора — Live Preview режим, т.е. все внесённые в код изменения мы сразу же увидим в окне браузера. Это очень удобно, особенно для разного рода экспериментов.

    Однако я столкнулся с проблемой — html, css и JavaScript работает в этом режиме, а вот с php Live Preview режим сначала попросит ввести «Базовый URL для Live Preview» и чтобы мы туда не вводили, php работать не будет. Я не нашел инструкций на русском, как заставить php работать в brackets, так что буду первым.

    Сразу оговорюсь, у меня в распоряжении Win 8 х64 и Brackets (v.38)

    Шаг 1

    Первое что понадобится это Wampserver (или его аналог). С его установкой проблем возникнуть не должно, просто читайте инструкцию на сайте данной программы. После того как программа установлена и запущена вы увидите зелёную иконку в трее (видна на скриншоте ниже). Попробуем перейти по адресу http://localhost/. Если увидели что-то вроде:

    то сразу переходим к Шагу 3. Мне повезло меньше, у меня открылась 403 страница.

    Шаг 2

    Сразу после установки Wampserver попытка открыть http://localhost/ приводит на страницу 403 Forbidden. Обойти её можно, если ввести адрес 127.0.0.1

    Однако меня такой вариант не устроил. Исправляем: идём в трей-меню -> Apache -> httpd.conf:

    Сохраняем наш файл, перезапускаем все сервисы. Готово, после этого http://localhost/ у меня открылся как надо.

    Шаг 3

    Через трей меню переходим в папку www, создаём в ней новую папку, например «test», в которой создаём любой php файл, например index.php

    Открываем Brackets, Файл->Открыть директорию [Ctrl+Alt+O], указываем нашу папку ../www/test/. Открываем наш index.php (должен появивиться в боковой панели) и жмём Live Preview [Ctrl+Alt+P]. Диалоговое окно снова попросит нас ввести «Базовый URL для Live Preview». Т.к. я назвал папку test, то теперь я вобью адрес http://localhost/test/

    После этого все должно заработать. Не так замечательно как с css и html — после каждого изменения теперь надо сохранить документ [Ctrl+S] чтобы увидеть изменения в браузере. Не идеально, но намного лучше чем ничего!

    Редактор кода Brackets - верстка шаблона сайта

    Редактор кода Brackets – верстка шаблона сайта Редактор кода Brackets – вёрстка Предыстория Brackets

    Для начала о названии и логотипе. Brackets переводится как [кавычки]. Именно их мы видим на логотипе. Недавно я у себя тоже логотип сменил. Он более наглядный, а главное сразу отражает суть нашего сайта, как ресурса о создании сайтов. То же самое и здесь – идеально отражает суть редактора кода, как мне кажется.

    Adobe Brackets, да да вы не ослышались – эту программу представляет очень известная в наших кругах компания Adobe. Именно с их легкой подачи приступили к разработке сего софта. Однако сначала он был известен под названием Edge Code. Так что если вас спросят, знайте – это одно и тоже.

    Скачать Brackets – Windows

    Скачать Brackets – Mac os

    Чем мне приглянулся Brackets?

    Первая ассоциация, которая у меня была при открытии софта – блин, да это же русский Sublime! Программа поддерживает множество языков, и вы можете легко скачать Brackets на русском прямо с оффсайта. И она невероятно напоминает SublimeText.

    Второе, удобство работы. Конечно, на тот момент всё убивали глюки. Но ведь программа была еще на стадии тестирования и разработки. И косяки я просто не учитывал. Потому что дизайн там красивее и продуманнее, особенно для новичков. Есть кнопки, менюшки и другие плюшки юзабилити. Вроде и минимализм остался, и в то же время удобно до чертиков.

    Третье, оригинальные идеи, которых я не встречал в SublimeText, да и других редакторах. Интерактивный просмотр и подсветка элементов при верстке, быстрое редактирование, подсказки цвета, встроенная система справок, и многое другое. Особенно меня интересовала парочка плагинов. Об этом я расскажу в конце статьи, в разделе – “Плюшки редактора Brackets” .

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

    В-пятых, всего остального тоже навалом

    – Здесь и мультиплатформенность. Можно спокойно “спионерить” Brackets как для Windows, Linux так и для других ОС. От части это благодаря тому, что редактор разработан на HTML, CSS и JS. А они работают везде.

    – И множество различных плагинов и расширений. Которые позволяют полностью настроить Brackets под свои нужды.

    – И куча тем оформления всевозможных цветов и тонов. На любой вкус, так сказать.

    Brackets – настройки и фишки

    1. Установка редактора
    2. Исправляем проблему русского шрифта
    3. Интерфейс редактора
    4. Базовая настройка Brackets
    5. Split – разделение экрана
    6. Боковая панель
    7. Live Preview – интерактивный просмотр
    8. Быстрый просмотр
    9. Inline Editors для HTML – быстрое редактирование
    10. Inline Editors для CSS – быстрое редактиврование
    11. Быстрая документация CSS

    Brackets – плагины и расширения

    1. Темы оформления
    2. Brackets Icons – иконки в редакторе
    3. Overscroll – перемотка ниже кода
    4. Special Charecters – таблица спецсимволов
    5. Brackets CSS Color Preview – быстрый просмотр цветов
    6. ColorHints – быстрый выбор цвета
    7. Brackets Color Palette – выбор цвета с картинки
    8. Indent Guides – ориентация во вложенности кода
    9. CodeFolding – сворачивание кода
    10. Documets Toolbar – горизонтальная панель открытых файлов
    11. Emmet – быстрый набор HTML и CSS
    12. CssFier – бысрая вставка селекторов в CSS
    13. Minifier – сжатие CSS и JS файлов
    14. JS Beautifier – форматируем код
    15. Autoprefixer – автоматические префиксы
    16. Extract for Brackets (Preview) – Часть 1
    17. Extract for Brackets (Preview) – Часть 2
    18. eqFTP – клиент прямо в редакторе
    19. QuickFormTool – быстрая вставка форм
    20. SVG Font – просмотр SVG файлов
    21. Brackets Snippets (by zaggino) – сниппеты
    22. Response for Brackets – адаптивный дизайн

    А сейчас, как и обещал…

    Плюшки редактора Brackets

    В начале давайте пробежимся по плюсам самой программы, а затем затронем “особенные” расширения и плагины, от которых я просто балдею.

    Интерактивный просмотр (Live Preview)

    Первое, что стоит отметить, это функцию Интерактивного Просмотра, или, как многие её называют – живой просмотр. Благодаря ей вы можете наблюдать за изменениями сайта, прямо во время верстки страницы. Обратите внимание, что для работы требуется браузер Google Chrome. Именно в нем открывается ваш сайт и показываются все изменения.

    Знаю, знаю, сейчас вы скажите – то же самое есть и в SublimeText! Однако прошу учесть тот факт, что там для этого надо выполнять каждый раз довольно таки не простые “танцы с бубном” , прежде чем все начнет работать. А здесь у нас все из коробки. Как поется в одной песне: Нажми на кнопку, получишь результат.

    На данный момент интерактивный просмотр работает в HTML и CSS файлах. А вот при редактировании javascript – придется сохранятся.

    Быстрое редактирование (inline editors)

    Очень удобная штука. Суть в том, что вы можете править CSS и JS прямо из HTML документа. Не переключаясь между файлами. Поверьте, времени экономится просто огромное количество. А про удобство и комфорт работы вообще молчу. Все можно делать из одного файла.

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

    В любом случае – рекомендую погонять. Останетесь довольны.

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

    А в самом видеокурсе, мы еще установим парочку интересных браузеров, которые значительно расширят и облегчат работу с цветом. В общем – сами все увидите.

    Эта фишка мне всегда нравилась в Dreamweaver. Не знаю, как сейчас, но когда-то давно она в нем присутствовала.

    Если вы хотите подключить какой-то файл, стили, скрипты, картинки – не важно. Brackets автоматически подскажет вам не только путь, но и имя файла. Очень удобно!

    Плагины и расширения Brackets (самые самые):

    Этот плагин позволяет быстро набирать HTML и CSS. По факту, если научиться им грамотно пользоваться, то ваша написание кода ускориться раз этак в 10. Это расширение из разряда “Must Have”. которое должно стоять в каждом редакторе.

    Extract for Brackets (Preview)

    Вот это расширение мне понравилось больше всего в редакторе. Позволяет верстать прямо из PSD макета. То есть, в программу Photoshop залазить уже не надо.

    Подключаемся к плагину, закачиваем свой PSD на сервер Adobe Creative Cloud, и наш редактор начинает извлекать все стили и графику из PSD макета.

    Это нельзя описать словами, можно только увидеть и понять всю масштабность задумки. Реально КРУТО!

    Response for Brackets

    Позволяет ваять адаптивность сайта из окна редактора Brackets. Говоря другими словами, адаптивный дизайн у вас в кармане.

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

    Но есть один момент, куда ж без него родимого . Расширение еще разрабатывается, и работает, скажем так, не совсем стабильно. Однако его дорабатывают, обновляют и в скором времени все будет ТИП-ТОП.

    Косяки редактора Brackets.

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

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

    Таких мало, но все же. Всегда придерживайтесь такой схемы: Поставили плагин – погоняли на редакторе – если все работает, ставим следующий.

    Потому что иногда человек поставит кучу плагинов и потом поди угадай, который ломает работу Brackets.

    Во-вторых – как только установите программу, в ней будет проблема с русским шрифтом. Смотреться он будет “страшновато”. Все дело в шрифте по умолчанию, который ставится после установки. Достаточно просто поменять шрифт текста и все будет окей.

    В-третьих, у некоторых учеников редактор почему-то не работал, когда они его ставили на системный диск. Не знаю в чем проблема, возможно не хватало прав администратора или драйверов. Поэтому здесь я всегда даю 3 совета:

    • Ставьте Brackets не на системный диск
    • Установите Nodejs
    • Пробуйте запускать от имени администратора

    Редактор кода Brackets – верстка шаблона сайта обновлено: Апрель 24, 2016 автором: human

    Навигация по записям

    Brackets редактор

    Brackets редактор — релиз 0.44 и расширения

    Сегодняшний обзор-спецвыпуск на редактор Brackets сочетает в себе два обзора. Первый — релиз 0.44 и долгожданный Split View, который позволяет редактировать два файла одновременно. Второй — обзор популярных и полезных расширений.

    Brackets 0.44

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

    Список расширений
    • Documents Toolbar — вкладки с открытыми файлами сверху;
    • Projects — менеджер проектов с возможностью добавлять в избранное, менять названия и иконки;
    • QuickdocsJS и QuickdocsPHP — обавление быстрой документации для базовых функций JavaScript и PHP (вызывается сочетанием Cmd/Ctrl + K);
    • Extension Highlighter — подсветка расширений файлов в дереве проекта разными цветами;
    • Brackets Icons — иконки для файлов разных расширений в дереве проекта;
    • WD Minimap — небольшая миникарта всего файла, в правом верхнем углу, по аналогии с Sublime Text;
    • Code Folding — возможность свернуть блочные куски кода и блочные комментарии;
    • Markdown Preview — предварительный просмотр Markdown файлов прямо в редакторе;
    • Indent Guides — визуальное представление Tab-отступов в видео вертикальных линий;
    • Indentator — позволяет привести документ к единому формату отступов;
    • Emmet — инструмент для написания разметки HTML и CSS-свойств, существенно ускоряющий разработку;
    • Response for Brackets — инструмент для адаптивной верстки, визуально помогающий писать медиа-запросы.

    Обзор открытой IDE Adobe Brackets - Скорая Компьютерная Помощь

    Группа: Главные администраторы
    Сообщений: 14349
    Регистрация: 12.10.2007
    Из: Twilight Zone
    Пользователь №: 1


    Adobe.
    Open source *,
    Веб-разработка *

    С момента первого обзора среды (этот обзор был опубликован более чем год назад) IDE Brackets превратилась из просто многообещающего прототипа во вполне полноценный инструмент для разработки web-приложений. Недавно также был опубликован пост. в котором вскользь упоминалась эта среда, но сам текст и комментарии были так скупы на описание проекта, что я посчитал полезным рассказать сообществу о возможностях этой IDE более подробно.

    Немного информации о том, что из себя представляет IDE Brackets. Среда разрабатывается на web-платформе (HTML, CSS и JavaScript) для web-программистов с использованием Chromium Embedded Framework (CEF) компанией Adobe. В основе Brackets лежат такие проекты, как CodeMirror, jQuery, require.js, Bootstrap, Node.js. Исходные коды распространяются под open source лицензией MIT. Основная цель проекта — упрощение процесса web-разработки. Работа над IDE идёт по методологии scrum (спринтами по 2.5 недели). Среда вполне стабильна — сами разработчики IDE Brackets стали использовать её в своей повседневной работе уже достаточно давно. Скачать среду можно отсюда .

    Основные моменты: среда стала доступна для Linux, появилась поддержка Node.js, реализовано интеллектуальное автодополнение кода для HTML, CSS, JavaScript, сообщество создало более сотни полезных плагинов, плюс в разработке находится продвинутая система для упрощения создания макетов с отзывчивым дизайном, которая уже успела произвести WOW-эффект на тех, кто её видел.

    (под катом скриншоты


    Интеллектуальное автодополнение кода


    Благодаря новому API автодополнение работает везде: HTML, CSS, JavaScript (в том числе и для jQuery).




    Одна из основных идей IDE — сокращение числа перемещений между файлами в рамках одного проекта — воплощается в жизнь с помощью, так называемого, Inline-редактирования, которое позволяет работать с контекстно-зависимыми частями других файлов, не покидая своё текущее местоположение в проекте. Вызывается горячей клавишей (Ctrl+E для PC / Cmd+E для Mac OS). Разработчики также добавляют новые фишки, использующие эту идею, например, «Inline Color Editor», «Inline Bezier Tool».


    Inline-редактирование CSS кода


    Inline-редактирование можно вызывать для нескольких элементов одновременно. Если к элементу применяется несколько стилей, между ними можно перемещаться выбрав соответствующий элемент из списка слева, или с помощью горячих клавиш Alt+↑, Alt+↓.


    Быстрый доступ к объявлению функции java script:


    На данный момент работает с ощутимыми задержками, иногда не может найти объявление функции/метода.


    Inline Color Editor:



    Inline Bezier Tool:


    Инструмент визуализации кривых Безье, используемых в качестве временной функциии, в CSS transitions. Находится в стадии активной разработки .


    Быстрый доступ к документации (Quick Docs)


    На самом деле не такая уж и новая функция, но очень полезная и немного пересекается с предыдущей. Отображение справки по CSS-элементам непосредственно во время работы с кодом (Ctrl+K для PC / Cmd+K для Mac OS). Справочная система основана на базе материалов с webplatform.org .


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

    Стоит сказать, что на данный момент уже доступно более 120 дополнений. и их количество растёт. Вид IDE с дополнительными плагинами:


    Живой предпросмотр (Live Preview) на базе Node.js


    По умолчанию живой предпросмотр работает благодаря локальному Node.js-серверу. В предыдущих версиях эта функция работала через file://, что могло вызывать проблемы с интеграцией внешних сервисов, таких как Typekit.

    Особенность «живого предпросмотра» в том, что при редактировании CSS-файлов результаты отображаются сразу же после внесения изменений, при редактировании HTML и JavaScript — только после сохранения («живой предпросмотр» для HTML-файлов будет доступен со следующей версии. для JavaScript уже есть плагин. реализующий Live Preview). Также при редактировании HTML в Brackets в браузере подсвечивается соответствующий редактируемый элемент:


    Среда разработки доступна на 17 языках, в том числе на русском, японском, немецком, испанском, норвежском, чешском, польском языках. Поддержка русского языка не на самом высоком уровне, тем не менее работать можно. Самое большое недоразумение связано с отсутствием в семействе шрифтов Adobe Source кириллицы, поэтому используется текущий системный шрифт, что немного ломает общее восприятие программы. Конечно, это всё лечится сменой шрифта SourceCodePro, на тот, где есть поддержка кириллицы, но для этого надо немного поработать руками.

    Изменение шрифта исходного кода Моё решение не блещет элегантностью, так что если кто-то придумает лучший способ, пожалуйста, поделитесь.

    Идея очень тупа — просто заменить файлы шрифтов, на тот, где есть кириллица. В Mac OS X и Linux я выбрал шрифт DejaVuSansMono.ttf (скачать который можно здесь ), в Windows 7 — consolas.ttf (поставляется вместе с операционной системой). Затем я просто заменил этим шрифтом, два файла в директории ресурсов Brackets: SourceCodePro-Medium.ttf и SourceCodePro-Regular.ttf, предварительно переименовав шрифт, которым я заменял существующие шрифты от Adobe.

    Пути, где располагаются файлы шрифтов, в разных операционных системах:

    • Linux. /opt/brackets/www/styles/fonts/SourceCodePro/
    • Mac OS X. /Applications/Brackets Sprint 29.app/Contents/www/styles/fonts/SourceCodePro/
    • Windows. C:Program Files (x86)Brackets Sprint 28wwwstylesfontsSourceCodePro


    Responsive Design Tool


    В мае этого года Lee Brimelow, рассказал в своём блоге о многообещающем плагине (пока недоступен для пользователей) для упрощения работы над отзывчивым дизайном. Принцип, которого заключается в создании визуальной базы для работы с media queries CSS3. В общем, как говорят, лучше один раз увидеть, чем сто раз услышать:

    Как было сказано выше, плагин пока находится где-то в закромах автора. На предложение разместить проект на Github'е, он ответил. что Responsive Design Tool не будет распространяться в виде плагина, а будет внедрён непосредственно в Brackets, поэтому надо ждать официального выхода.


    На данный момент Linux-версия Brackets находится даже не в стадии альфа-версии, как говорят сами разработчики это своего рода «супер ранний предпросмотр», потому что ещё не вся базовая функциональность реализована/работает так как надо. Тем не менее текущую Linux-версию можно использовать для работы (с некоторыми ограничениями).

    Ограничения Linux-версии и решение проблемы с запуском Известно много проблем в версии текущей версии для Linux, самые существенные:

    • долгий запуск программы;
    • не работает подсветка в режиме живого предпросмотра;
    • расширения могут быть установлены только вручную в
    /.Brackets/extensions/user;
  • невозможно сохранить файлы, которые были созданы в среде (обходной путь — создавать файлы вне среды и перебрасывать их в среду с помощью мыши).
  • Также на некоторых системах может возникать проблема с запуском программы из-за неверной ссылки на libudev.so.0. В этом случае надо просто сделать символическую ссылку с libudev.so.1 на libudev.so.0. Более подробное решение проблемы можно найти здесь .


    Да, по возможностям и количеству плагинов, IDE Brackets на данный момент всё ещё уступает другим зрелым средам и редакторам, но тем не менее она уже сейчас может стать для web-разработчика полноценным инструментом, предоставив некоторые уникальные возможности. Недостатки, конечно, есть, например, отсутствует понятный механизм настройки IDE, не самая быстрая скорость загрузки приложения и работы определённых функций (особенно inline-редактирования JavaScript). В любом случае сам факт того, что абсолютно любой разработчик, знакомый с web-программированием, может подключиться к разработке Brackets и воплотить в жизнь свои потрясающие идеи, делает эту среду особенной.

    P.S. Если вы нашли ошибку или неточность в тексте, прошу сообщить мне через личные сообщения.