Русский html5 css3 визуальный редактор. HTML редакторы
HTML5 – это великолепная технология, которая позволяет пользователям создавать более опрятный и функциональный код, а также отлаживать код без необходимости копаться в запутанном коде.
Сегодня я хочу рассказать вам о 10 очень удобных инструментах, которые помогут вам при работе с HTML5. Они позволят вам повысить эффективность, и при этом сэкономить время и усилия. В данном списке нет определенной последовательности, так как все инструменты довольно схожи.
Данный инструмент предлагает вам функции редактирования сайтов при помощи интерфейса. CreateM лучше всего будет назвать системой управления контентом на HTML5. Он позволяет вам создавать HTML5-среду разработки прямо в браузере, и затем редактировать контент. Вы можете создавать вполне современные веб-сайты, похожие на те, которые сегодня можно реализовать при помощи CMS. Вы можете изменять данное ПО и применять его в соответствии с требованиями вашего проекта.
Это бесплатный HTML5-виджет, который вы можете интегрировать в ваши веб-страницы. Это означает, что у вас есть возможность позволить пользователям рисовать прямо на странице. Также следует отметить наличие прекрасного набора инструментов, которые можно видеть в любом стандартном графическом редакторе: есть возможность отменить действие или повторить его, удалить элемент, увеличить и так далее.
Данный инструмент позволяет вам создавать каркасы ваших инструментов, пользовательских интерфейсов и онлайн-виджетов и приложений. Он очень прост в использовании благодаря интуитивно понятному интерфейсу. Инструмент позволит вам без труда начать разработку проекта, либо протестировать уже готовые проекты. Он отлично подходит для работы с HTML5, и предлагает вам очень креативную платформу, позволяющую управлять кодом веб-страниц.
График совместимости браузеров с HTML5/CSS3. Он интерактивен и предлагает функции для проверки, какие браузеры поддерживают тот или иной элемент, а какие нет. Вы можете фильтровать определенные результаты, и проверять, какую поддержку следует ожидать от устройств. Если вы хоть чуть-чуть знакомы с HTML5, но хотите изучить технологию подробнее, и применить ее на практике, этот инструмент может очень вам пригодиться.
Это ПО для разработки веб-страниц, которое чем-то напоминает функционал CMS, потому что здесь вы получаете то, что видите. Инструмент позволяет вам быстро набрасывать CSS-таблицы, создавать классы, id, и многое другое. И все это реализуется всего при помощи одного спрайт-изображения. Здесь используется фоновое позиционирование для расположения определенных областей спрайта, и создаются блочные элементы для страницы. Стоит отметить, что инструмент бесплатный, и при этом позволяет вам быстрее и проще справиться с созданием HTML5-страниц.
Этот инструмент позволяет вам создавать HTML5-код с использованием кросс-браузерного элемента audio. Инструмент очень удобен, так как был заранее подготовлен для выполнения различных задач, и при этом он предлагает вам множество цветов и шаблонов, из которых можно выбрать что-нибудь подходящее. Если вы взглянете на сайт, то увидите на что способен этот инструмент. Стоит отметить, что некоторые элементы будут вам незнакомы, если только начинаете работать в сфере разработки.
Это HTML5-видеоплеер, который позволяет вам встраивать код таким образом, чтобы люди могли по нему кликать. Он также допускает использование Javsacript-библиотеки, и у вас есть возможность разрабатывать собственные CSS/HTML-шаблоны для ваших видеороликов. К тому же, вы сможете воспроизводить видео на любом устройстве, даже если они не поддерживают , так как данный плеер основан на HTML5-технологии. Это очень отличный инструмент, который поможет вам извлечь выгоду от публикации видеороликов при помощи технологии HTML5.
Это многофункциональный редактор, разработанный при помощи HTML5. Здесь предусмотрены подход с прогрессивным внедрением изменением, и это может оказаться именно тем, что вам нужно в процессе разработки. Здесь представлена хорошая семантическая HTML5-разметка и используются имена классов, что облегчает рабочий процесс. Если у вас есть Google Chrome, то вы можете воспользоваться преимуществом ввода текста при помощи речи, правда технологию пока еще сложно называть завершенной.
Этот инструмент представляет собой генератор спрайтов для HTML5. Он позволяет вам перетаскивать файлы на плоскость, и затем, посредством нажатия кнопки, создавать спрайты и таблицы стилей. Он все еще находится на стадии разработки и доработки, и на данный момент работает только в Firefox и Chrome, но вам обязательно стоит оценить его. Он очень прост в использовании и позволит вам сэкономить уйму времени на разработке собственных веб-сайтов на HTML5.
Этот инструмент позволяет собирать голоса за видеролик и выводить результаты в виде строки популярности. Он также позволяет посетителям использовать эту строку для написания отзывов и комментариев. Если ваш сайт получаете достаточный поток трафика, то вам вероятно хотелось бы знать мнение посетителей о ваших видеофайлах, и этот инструмент поможет вам реализовать необходимую платформу.
HTML редактор
Одним из принципов HTML5 является официальное признание частью стандарта нестандартных возможностей, которые уже широко используются веб-разработчиками. Одним из наилучших примеров следования этому принципу является включение в стандарт двух необычных атрибутов - contentEditable и designMode , которые позволяют сделать из обыкновенного браузера простой HTML-редактор.
Эти два атрибута не новы. Более того, их поддержка была добавлена еще в Internet Explorer 5 на заре становления Интернета. В то время большинство разработчиков отказалось от их использования, рассматривая их всего лишь как расширения Windows для Интернета.
Но с течением лет все больше браузеров начали копировать применяемый в IE практический, но причудливый подход к расширенному HTML-редактированию. В настоящее время все браузеры для настольных компьютеров поддерживают эти атрибуты, хотя они никогда и не были частью официального стандарта.
Редактирование элементов с помощью атрибута contentEditable
Рассмотрим первый инструмент для HTML-редактирования - атрибут contentEditable. Добавление этого атрибута к любому элементу позволяет редактировать содержимое этого элемента, когда оно отображается в окне браузера:
Скорее всего, вы не заметите никакой особенности в отображении этого текста в браузере. Но щелчок где-либо в отображаемом браузером тексте помещает в него курсор редактирования:
В приведенном ранее примере редактируемая область
Некоторые браузеры поддерживают встроенные команды форматирования. Например, в Internet Explorer текст можно делать жирным, курсивом и подчеркивать с помощью комбинаций клавиш
Прежде чем приступить к использованию расширенного HTML-редактирования, стоит узнать, а для чего оно вообще-то применяется. Несмотря на мгновенно производимое впечатление, HTML-редактирование является специализированной возможностью, которая не каждому понравится. Имеет смысл использовать его, чтобы предоставить пользователям быстрый способ изменять HTML-содержимое, например, добавлять сообщения в блоги, вносить обзоры, подавать объявления или составлять сообщения другим пользователям.
Но даже если вы решите, что вам нужны такие возможности, атрибуты contentEditable и designMode могут оказаться не лучшим выбором для их реализации. Они не предоставляют разработчику всех удобств настоящего инструмента для веб-дизайна, таких как команды для редактирования разметки, возможность просматривать и редактировать исходный HTML-код, средства проверки орфографии и т.п.
Обычно атрибут contentEditable в разметку не включается. Вместо этого он включается с помощью JavaScript-кода и отключается по завершению редактирования:
Function startEdit() { // Включаем редактирование элемента. var element = document.getElementById("editableDiv"); element.contentEditable = true; } function stopEdit() { // Отключаем редактирование элемента. var element = document.getElementById("editableDiv"); element.contentEditable = false; // Выводим редактируемый текст в окне сообщения alert("Ваш отредактированный текст: \n" + element.innerHTML); }
Редактирование страницы с помощью атрибута designMode
Атрибут designMode похож на атрибут contentEditabie, с той разницей, что он позволяет редактировать всю веб-страницу. Это может показаться слегка проблематичным, ведь при редактировании страницы отключаются события элементов. Тогда как мы сможем нажимать кнопки, чтобы управлять процессом редактирования? Решение этой проблемы простое - редактируемый документ помещается внутри элемента
Редактируемая страница
Разметка
Function startEdit() { // Включаем редактирование в элементе
Если Вы хотите разрабатывать веб — сайты Вам нужно обзавестись редактором HTML. Конечно можно использовать обычный блокнот, но это вряд ли будет удобно. Важно отметить, что HTML редакторы должны выполнять две важные задачи, это подсветка кода и автозаполнение. Естественно дополнительные функции так же приветствуются, разнообразные темы оформления например. Таких подобных дополнительных функций существует множество. Ну а сейчас давайте взглянем на несколько бесплатных редакторов HTML, которые отлично справляются с перечисленными выше задачами.
Бесплатный редактор кода — Programmer’s Notepad
Данный редактор предлагает современный интерфейс, который поставляется в двух типах, это светлый и тёмный. Кроме того подсветка синтаксиса очень удачная, хорошо подобрана цветовая гамма. Я думаю, что данный редактор будет отвечать всем Вашим требованиям.
HTML редактор — SynWrite
SynWrite является крутым редактором с широким спектром возможностей. Идеей этого редактора было заключить все плюсы других HTML редакторов в одном качественно продукте. Его функциональность может быть существенно расширена с помощью дополнительных плагинов написанных на Python. Помимо стандартных функций, SynWrite позволяет сразу же редактировать несколько кусков кода одновременно:
Эта функция сэкономит Вам уйму времени.
Бесплатный HTML редактор — PlainEdit.NET
Этот редактор может открыть сразу же несколько файлов одновременно, так же могут быть добавлены плагины которые существенно расширят функции редактора, в том числе и тем оформления. Кроме того Вы можете добавлять и изменять текст с помощью регулярных выражений, даже в тех документах, которые сейчас не открыты. Стоит отметить, что PlainEdit так же может работать с USB накопителя.
Notepad ++
Этот редактор — это классика. Он очень популярен во всём мире. Notepad ++ имеет всё необходимое, что должен иметь текстовый редактор. Интерфейс можно настроить по Вашему желанию, а бесплатные плагины помогу расширить функционал редактора.
Бесплатный редактор — jEdit
Этим редактором можно открывать и редактировать практически любой файл. Существенно облегчает задачу открытие нескольких файлов одновременно. Любые недостающие функции могут быть дополнены с помощью разнообразных плагинов.
Из коробки jEdit идёт уже с встроенными необходимыми функциями, например, свёртывание кода, маркировка тегов и элементов, файловый менеджер, а так же множество других функций.
Sublime Text 2
Это самый популярный редактор среди программистов и веб — разработчиков. Ни у одного подобного редактора не было такого триумфа как у Sublime Text 2. Его хвалят многие программисты. Редактор глубоко настраиваемый через различный разрешения и JSON файлов.
К этому популярному редактору можно найти обширные библиотеки документации как официальной так и не официальной. Учебники по Sublime Text 2 можно найти везде.
Sublime Text 2 является частично бесплатным, лицензия стоит 70$.
Новый редактор — Brackets
Brackets является современным редактор с открытым исходным кодом и с некоторыми интересными особенностями. Он работает с Adobe Creative Cloud, для того чтобы цвета, шрифты и многое другое из PSD файла. Он так же может извлекать слои в виде изображений. Очень удобно
К сожалению Adobe Creative Cloud является платной услугой.
Данный редактор имеет все необходимы функции для современного редактора кода. Есть множество различных расширений, которые выпускаются каждые 2 — 3 недели.
Aptana Studio 3
Наибольшие сильные стороны редактора является его настраиваемость, интеграция Git и встроенный терминал. Aptana Studio 3 поддерживает новейшие веб стандарты такие как HTML5 и CSS3.
Вывод
Существует очень много редакторов HTML но только несколько из них можно реально использовать. Для не ежедневного использования есть Notepad ++, но для ежедневного использования его бы явно не хватило. Для этого есть лучшие варианты, такие как Sublime Text 2, который можно настроить в соответствии с требованием пользователя. Интересно узнать какие редакторы выбираете вы?
HTML-редактор это первое, что вам понадобится для того чтобы начать создавать веб-страницы, используя HTML и CSS. Существует множество бесплатных HTML-редакторов, и выбрать один из них может быть непростой задачей.
HTML довольно прост и поэтому вы можете начать работать с вашими веб-страницами используя простой текстовый редактор, такой как Notepad, WordPad или любой другой. Вы также можете пойти дальше и воспользоваться одним из редакторов с более богатым функционалом, например Coffecup, Notepad++, Brackets, Notetab или BlueGriffon. Преимущество использования более продвинутых и функциональных редакторов в том, что вы получаете больше инструментов, способных значительно ускорить процесс разметки и создания контента.
Независимо от того, собираетесь ли вы создавать блоги и статьи, хорошо отформатированные для чтения их браузерами, или планируете построить полностью функциональный вебсайт, используя HTML и CSS, выбор правильного редактора значительно повысит вашу производительность. Профессиональные разработчики веб-страниц тратят значительное количество времени на выбор редактора и инструментов, которые наилучшим образом отвечают их нуждам и способствуют росту продуктивности.
Какой бесплатный HTML-редактор хорош именно для вас?
Ответ на этот вопрос полностью зависит от ваших требований, от продукта, который вы намерены создать с помощью HTML, от вашего текущего уровня знаний этого языка разметки, если вы намерены просто учиться. Поскольку большинство этих редакторов бесплатны, вы можете сократить их список до 2-3, попробовать их базовый функционал и затем решить, какой вам больше нравится.
Кроме того, почти каждый редактор из перечисленных в этой статье поддерживается на нескольких операционных системах, включая Windows, Linux и Mac, так что о совместимости можно особо не беспокоиться.
Отметим, что большую часть ваших редакторских нужд легко удовлетворят Notepad++ для Windows, Brackets для Mac (этот редактор также поддерживается для Linux и Windows) или Coffecup и Notetab. Тем не менее, если вы планируете создать сложный вебсайт, стоит отдать предпочтение среде разработки с полным функционалом, например Eclipse.
С другой стороны, если вы просто хотите поиграться с HTML и CSS, к вашим услугам многочисленные онлайн-редакторы, где вы можете писать HTML-код и сразу видеть результат.
Давайте посмотрим на десятку лучших HTML-редакторов, простых в использовании, имеющих богатый функционал и популярных среди веб-разработчиков.
1. Notepad++ (лучший бесплатный HTML-редактор для Windows)
notepad-plus-plus.org
Этот редактор доступен только пользователям Windows, так что если у вас Mac или Linux, то листайте дальше. Notepad++ это лучший бесплатный HTML-редактор, который вы можете установить на свой компьютер с ОС Windows. На первый взгляд он очень элементарный, но это один из самых сложных и одновременно простых в использовании редакторов.
Большая часть огромных возможностей Notepad++ обеспечивается сторонними плагинами, включая PreviewHTML, HTML tag plugin для подсветки тегов, Tidy2 для отступов и многие другие.
Ключевые особенности Notepad++ это табличный интерфейс для одновременной работы с несколькими файлами, очень легкое сворачивание и подсветка синтаксиса, настраиваемый GUI (с минималистичным вариантом), таблицы с кнопкой закрытия, вертикальные таблицы, многоязычность (то есть вы можете настроить интерфейс на английском, французском, испанском и китайском, а также 80 других языках).
Notepad++ был разработан Дон Хо и выпущен в 2003 году. Он бесплатен как для личного, так и для коммерческого пользования и распространяется под универсальной общественной лицензией GNU.
Для пользователей Mac отличной альтернативой Notepad++ является Brackets, о котором мы расскажем далее.
2. Brackets (бесплатен для Mac, Windows и Linux)
Brackets это еще один популярный и надежный инструмент для веб-разработки и редактирования кода HTML. В отличие от Notepad++, этот редактор поддерживается для Mac, Ubuntu, Debian и Windows. А также он бесплатен для личного и коммерческого использования (лицензия MIT).
Brackets легок в использовании и имеет много расширений, улучшающих его функциональность. Популярные расширения:
- Emmet – ускоряет написание кода CSS и HTML;
- Beutify – форматирует файлы HTML, CSS и JavaScript;
- W3C validation – проверяет ваш код HTML на валидность.
Brackets это прекрасный редактор с современным минималистическим дизайном. Сделанные в коде изменения сразу отображаются в браузере. Вы можете вносить правки в код CSS или HTML и видеть, как они изменяют облик сайта в режиме реального времени.
Почитайте о Brackets здесь – Editor for HTML: Brackets
3. Coffecup (есть как бесплатная, так и платная версия)
Coffecup это возможно лучший HTML-редактор, имеющий как бесплатную, так и коммерческую версию. В бесплатной нет некоторых функций, однако она достаточно сложная, чтобы числиться в нашем списке.
К ключевым функциям бесплатной версии можно отнести:
- настраиваемые панели инструментов,
- завершение кода для элементов, атрибутов и селекторов,
- готовые к использованию темы и шаблоны,
- поддержку формата маркдаун для HTML,
- поддержку FTP/SFTP,
- функцию drag and place для изображений,
- опцию предпросмотра,
- подсветку синтаксиса,
- тезаурус для поиска альтернативы для слова и многое другое.
Платная версия не слишком дорогая. Она включает несколько дополнительных функций, например валидацию кода HTML и CSS, библиотеку тегов, чистильщик кода, динамическую проверку правописания.
Coffecup также предлагает несколько продвинутых модулей для работы в стиле «mobile friendly», без необходимости написания какого-либо кода, только с помощью функций drag and drop. Эти модули включают Foundation framer, Bootstrap builder и Responsive site designer.
Coffecup находится на рынке с 1996 года и используется фрилансерами, в стартапах, мелком бизнесе, а также веб-разработчиками из крупных компаний. Это прекрасный инструмент для создания сайтов, веб-страниц, рассылок, заметок, отформатированных в HTML, контента для социальных медиа.
4. NoteTab (две версии, платная и бесплатная)
NoteTab это еще один редактор для HTML и CSS, предлагающий функции для быстрой разработки. Это продукт компании Fookes software, которая последние 20 лет занимается инструментами для ускорения процесса разработки.
Популярность NoteTab подтверждается тем, что его используют в NASA, FBU, VISA, CIA Hewlett Packard, MIT.
NoteTab имеет три версии, Light, Standard и Pro. Light-версия распространяется бесплатно для индивидуального использования. Она не имеет всех функций Pro-версии, однако поддерживает библиотеки HTML5 и CSS3, бутстрап, автозаполнение HTML, объединение файлов в проекты, поддержку HTML Tidy, HTML to text, а также имеет много тем оформления.
NoteTab может запускаться прямо с флешки и не требует установки на вашу машину. Для блогеров и людей, занимающихся наполнением сайтов, этот редактор поддерживает подсчет слов и SEO-статистику.
Познакомиться с NoteTab поближе можно на официальном сайте .
5. Eclipse (бесплатный HTML-редактор)
Eclipse тяжеловесен и, возможно, это излишество для разработки на HTML и CSS, но его можно с успехом использовать, если вы не против установки и настройки этого зверя. Это отличный инструмент, если вы планируете создавать сложные сайты с базами данных, объединенными с другими источниками данных и т. д. Настройка может занять некоторое время и потребовать установки дополнительных плагинов.
Eclipse является самой популярной интегрированной средой разработки с открытым исходным кодом. Этот редактор часто используют для Java, JavaScript, PHP, Ruby, Android и многих других языков программирования.
Узнать больше можно здесь –
6. HTML-Online
Когда речь заходит о редактировании HTML-кода онлайн, в браузере, ничто не сравнится с HTML-online.com. Вы можете приступить к процессу написания кода сразу, без скачивания и установки какой-либо программы, к тому же это бесплатно.
Одно из достоинств этого редактора – конвертация Word в HTML, благодаря чему вы можете копировать ваш контент из файлов Microsoft Word и автоматически применять к нему HTML-разметку. Также есть поддержка Google docs, PDF, Excel, PowerPoint и многих других видов документов.
Это надежный визуальный редактор, который поможет вам создавать вашу веб-страницу и одновременно следить за изменениями кода в соседнем окне. Среди других функций стоит упомянуть чистку HTML кода, приведение табличных элементов к div, опцию поиска и замены.
7. BlueGriffon (бесплатная, базовая и EPUB лицензия)
BlueGriffon происходит из дома “Disruptive Innovations SAS”. Он построен на Gecko, движке Mozilla для вывода веб-страниц. BlueGriffon это мощный редактор, унаследовавший большую часть своих возможностей от Netscape, Composer, Nvu и Mozilla.
BlueGriffon имеет три вариации, первая из которых бесплатна, вторая распространяется по базовой лицензии, а самая мощная - по лицензии EPUB.
Бесплатная версия тоже много чего может. У нее есть черная и светлая темы оформления, поддержка аудио, видео и форм из HTML5, функции редактирования CSS3 включают переходы, 3D и 2D трансформации, создание SVG, технологию WYSIWYG, google fonts менеджер, менеджер шрифтов font squirrel, поддержку формата маркдаун, пользовательский интерфейс на более чем 20 языках.
Вы можете скачать и установить BlueGriffon на Windows, Linux Ubuntu и OS X на вашем Mac. Узнать подробности можно на сайте –
8. Emacs с плагинами
www.gnu.org
Emacs это один из самых любимых редакторов всех времен. Его можно использовать бесплатно (лицензия GNU). Emacs это редактор кода общего назначения, который вы можете настроить для своих нужд. Подключение свободно распространяемых плагинов превращает его в мощный редактор кода с богатым функционалом.
Если говорить о редактировании HTML, Emacs предлагает HTML-режим, который очень облегчает редактирование кода. Подробнее читайте здесь – Emacs
9. Atom
atom.io
Atom это перестраиваемый текстовый редактор от GitHub разработчиков. Его популярность растет очень быстро. Этот редактор бесплатен как для личного, так и для коммерческого использования (лицензия MIT). Сообщество разработчиков постоянно следит за обогащением редактора новыми функциями.
Как превратить Atom в бесплатный HTML-редактор?
Atom поставляется со всеми базовыми функциями, необходимыми для редактирования кода, но чтобы сделать его полностью функциональным HTML-редактором, вам потребуется установка дополнительных пакетов. Среди них – Emmet, atom-html-preview, Autocomplete-plus, Atom-color-highlight, Autocomplete-CSS, linter, minimap, haml и jade.
Atom поддерживается для Windows, Ubuntu (Debian Linux), Fedora (начиная с 22 версии), Mac и Red Hat Linux. Он больше подходит для веб-разработки, чем для написания контента, поскольку больше ориентирован на код и нуждается в небольшой настройке.
10. Visual Studio Community
Visual Studio Community это полностью функциональная среда разработки от Microsoft, и она бесплатна для всех. Visual studio предлагает преднастроенные функции редактирования HTML и CSS, которые в дальнейшем можно усовершенствовать с помощью расширений.
Из популярных расширений стоит упомянуть HTML Snippets, HTMLHint, HTML CSS support, Intellisense for CSS class name.
Подобно Eclipse, Visual Studio community является прекрасным выбором для сложных и сильно масштабируемых сайтов, нуждающихся в многих технологиях.
Заключение
Язык разметки HTML используется повсеместно. Есть много HTML-редакторов, созданных давно, но тем не менее идущих в ногу со временем и вполне пригодных для веб-разработки. Но есть и другие, которым уже не хватает функционала и продуктивности. Появляются новые редакторы, такие как Brackets и Atom, обеспечивающие эффективное редактирвание кода.
Большинство перечисленных в этой статье редакторов имеют свои особенности, но служат одной цели – созданию веб-страниц. Они увеличивают скорость разработки и помогают упорядочивать код, при этом учитывают возможность его масштабирования.
Приглядитесь к вариантам, упомянутым в этой статье, запишите ваши ключевые потребности, сократите список до пары редакторов, попробуйте каждый и определите, какой вам нравится больше. Вы наверняка найдете как минимум один хороший HTML-редактор для Linux, Mac и Windows.
Давно прошли те времена, когда весь инструментарий веб-дизайнеров и разработчиков ограничивался только лишь специализированными десктопными приложениями. Времена настали новые, интересные, в интернетах, от года в год, стало появляться большое количество различных веб-приложений и площадок, существенно облегчающих жизнь разработчиков. В том числе, нам стали доступны множество онлайновых редакторов, предоставляющих готовую среду для написания и обработки кода, гибкие инструменты позволяющие объединить CSS, HTML и JavaScript, создавать и совместно использовать примеры кодирования.
Время не стоит на месте, на ряду с уже хорошо себя зарекомендовавшими площадками: Codepen, Dabblet, jsFiddle, JS Bin и другими, появляются новые, не менее интересные для работы с кодом.
Об одном из таких новичков, мне и хотелось бы сегодня вам рассказать.
— HTML5, CSS3 и JavaScript
Liveweave довольно интересный ресурс, который станет ещё одним популярным местом, где можно возиться с вашим кодом. Дизайн этого приложения без особых изысков, в меру минималистский, позволяющий сосредоточиться на работе с кодом. Привычная и очень удобная верхняя панель с выбором и переключателями опций, ну и конечно же рабочая область, разделённая на 4 части HTML, CSS, JavaScript и панель предварительного просмотра. При желании, вы можете выбрать любую панель и развернуть её на полный экран, что очень удобно.
У этого инструмента большое количество плюсов. Предварительный просмотр обновляется автоматически, подсветка синтаксиса в двух вариантах на выбор, на тёмном и светлом фоне, нумерация строк здесь также присутствует.
Хороший набор подключаемых библиотек, которые могут вам пригодится в работе, Angular JS (1.0.7), Bootstrap (последний), Modernizr (последний), Moo Tools (последний), актуальные версии библиотек jQuery и многое другое. Для выбора нужной, вам достаточно на панели функций нажать кнопку «Library» и выбрать из списка необходимую CSS или JS библиотеку.
Все эти функции присутствуют и во многих других таких же онлайн-редакторах, что же такого нового предлагают разработчикам авторы этого ресурса?
В первую очередь, я бы отметил стабильную работу, видимых тормозов особо не наблюдал.
Второе, это оптимизация размеров панелей просмотра одним щелчком, а так же наличие переключателей режимов просмотра.
Третья фишка и наверное одна из самых «вкусных» — это возможность использования дополнительных инструментов напрямую из панели функций, кнопочка «Tools», открывает доступ к созданию своей цветовой палитры, возможность на лету сгенерировать «рыба-текст» (Lorem ipsum), для заполнения пространства, скачать создаваемый проект в html формате или же в упакованном zip-архиве.
Ну и наконец, лично для меня, очень привлекательным в этом редакторе, оказалась возможность, не отходя от кассы, использовать мощный генератор свойств CSS3. Поверьте мне, не везде встретишь такую возможность, на самом деле это очень и очень удобно. Когда работаешь со стилями, переключаешься на css3-генератор, экспериментируешь с параметрами, видя все изменения в живую, тут же копируешь, выданный на гора генератором, готовый код, переносишь в редактор и у же в режиме просмотра видишь готовый результат, и всё это в одной обойме.
В общем и целом редактор имеет в наличие достаточно полезных опций, в том числе и возможность совместного использования. Liveweave конечно новичок в этом жанре, но добавил некоторые серьезные инновации, которые отсутствуют в других редакторах такого типа. О достоинствах и недостатках спорить не берусь, не о том этот небольшой обзор, просто надеюсь, что помог вам разглядеть, еще одно интересное решение. Да и в целом, хорошо уже то, что таких инструментов становится больше, работать от этого легче, а значит и жить веселей))).
Хотелось бы знать, а какими инструментами чаще пользуетесь вы и почему?
С Уважением, Андрей