Лучшие IDE для PHP. PHP редакторы Редактор с поддержкой php 7

Итак, недавно мы познакомились с самыми средами разработки приложений на Java, в этот раз затронем PHP. Распределяя призовые места аналогичным субъективным образом, взглянем на список лучших:

Лучшая бесплатная IDE - NetBeans

Итак, история повторяется и открывает рейтинг IDE NetBeans, а значит придется сказать о ней ещё пару добрых слов. Во-первых, она поддерживает русский язык, что для многих PHP разработчиков жизненно важно. Во-вторых, NetBeans поддерживает все известные фреймворки, в том числе Zend, Laravel, Doctrine, CakePHP, Smarty, Yii и Symfony2. Кроме того, естественно поддерживаются javascript, HTML, CSS и PHP в самых свежих версиях.

Лучшая платная IDE - PHPStorm

Данная IDE идеально подойдет для полноценной full-stack веб-разработки. Также поддерживает фреймворки Symfony, Zend, Yii, CakePHP, основные CMS системы Magento, Drupal, Wordpress, отладчики Zend Debugger и Xdebug, а для фронтенда вам доступны CSS3, HTML5, Sass, CoffeeScript, TypeScript, Stylus, Less и еще небольшая куча инструментов. Программная среда поставляется бесплатно для учителей и студентов профильных ВУЗов, для проектов с открытым кодом, ну и для тех, кому хватит 30 ознакомительных дней. В остальных случаях придётся платить.

Самая недооцененная IDE - Sublime Text

Последняя третья версия Sublime Text - среда разработки широкого профиля, основная прелесть которой в огромном количестве подключаемых модулей. Одним из них является PHP IDE. В состав входит все необходимое: отладчики, тестировщики, редактор и поддержка популярных фреймворков. Работать с Sublime Text легко и удобно.

Самая популярная IDE - Eclipse PDT

Еще один представитель прошлого рейтинга. В общем-то его популярность обуславливается обширностью возможностей (соответственно людям, работающим на других языках будет удобно остаться именно на этом продукте), поддерживаемых языков и количеством прикрепляемых пакетов. Нам интересен PDT (PHP Development Tool) со свойственными Eclipse возможностями: подсветкой синтаксиса, помощником в написании кода, рефакторингом, шаблонами, отладкой, валидацией и многим другим.

Лучшая облачная IDE - Cloud 9

Cloud 9 - очередной представитель всеядной среды разработки, что вместе с качеством сборки делает его популярность недостижимой для конкурентов из облачного мира. За бесплатно вы получаете ограничение в виде одного рабочего места, что вполне достаточно для оценки возможностей. Захотите работать командой - приготовьте 19$ (или 1 символический доллар, если команда у вас студенческая).

Самая простая IDE - PHP Designer

Как вы понимаете, титул самой простой IDE накладывает ограничения на функциональность. В данном случае, главный минус - работа только в одной ОС, а именно Windows. Да и в остальном это скорее редактор кода с расширениями, нежели полноценная среда разработки. Но ведь иногда и это хорошо, не так ли?

Лучшая из непопулярных IDE - CodeLobster

Вы не найдете огромного сообщества разработчиков CodeLobster, со справочной документацией тоже всё довольно скудно. Но это не отменяет того факта, что это отличная IDE, поддерживающая Drupal, Joomla, Wordpress, Yii, Symfony, Laravel, Smarty, CakePHP, Phalcon, jQuery, AngularJs, Nodejs.

Самая перспективная IDE - Zend Studio

Завершим обзор мощным продуктом от Zend Technologies, а точнее сухой статистикой:

Отладка с помощью Zend Debugger, Xdebug, интеграция с Z-Ray;

Поддержка SVN, CVS, Docker, Git Flow;

Возможность просмотра MySQL, SQLite, PostgreSQL и других СУБД;

Поддержка библиотеки Dojo;

Качественный редактор кода, с функциями анализа, исправления, рефакторинга, индикации, генерации и пр.;

Поддержка облачный сервисов Microsoft Azure и Amazon AWS;

Свободное обращение с JavaScript, CSS, HTML и конечно PHP (4 и 5);

Панель разработчика Zend Studio Toolbar для браузеров IE и Mozilla Firefox.

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

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

Я испробовал приличное множество систем визуального редактирования, и безусловно о каждой из них у меня сложилось определённое впечатление: как хорошее, так и плохое.

В рамках данного проекта я испробовал три системы визуального редактирования, которые, безусловно, достойны внимания, и будут рассмотрены в данной статье. Это следующие программы: TinyMCE, WYM Editor, HTMLArea.

Ну конечно в один ряд эти программы ставить нельзя, хотя бы по их функционалу и назначению. Это было бы равносильно сравнивать возможности встроенного редактора Notepad и коммерческого Microsoft Word. Ведь каждая эта программа особенная, и относится к определённому классу. Посему сегодня мы поговорим именно о ней.

Сказание о TinyMCE

Ну, эта программа, по моему мнению, занимает почётный пьедестал первенства на рынке подобных продуктов, так как обладает наиболее функциональным интерфейсом, "портативностью", ассоциативностью, и при всё при этом - относительной скоростью. Но сказать это, означает не сказать ровным счётом ничего, так как этими поверхностными похвалами нельзя раскрыть все её достоинства, среди которых: наиболее проработанный среди всех вышеперечисленных систем API-интерфейс, простота и понятность, дововольно быстрое время обработки (учитывая уровень и качество производимых системой действий), ну а так же качество обработки внешних данных. К примеру, вы можете просто скопировать текст из документа Word, и при правильной настройке, система транслирует его в очень и очень похожем формате, при относительной чистоте кода, который соответствует стандартам, что выдвигает главный законодатель мод в WWW - W3C. Но, безусловно, не бывает мёду без дёгтя, и в этом случае есть свои минусы. Среди них неработоспособность на браузерах Opera заканчивая 8.4, на которых система вообще не будет работать. Ну и, конечно, учитывая все её возможности и мультиброузерность, на выходе мы получаем довольно объёмный исходный код, а именно 1,9 МБайт, но я считаю, что размер окупает себя сполна.

Итак, допустим, у вас есть некоторый документ form.html, в котором содержится некоторая форма, с полем TextArea. Но как его сделать WYSIWYG-типа?

Да очень просто, для этого вам сначала необходимо подключить основной класс TinyMCE, после чего в документе автоматически станет доступным прототип объекта TinyMCE, который и является основным API-интерфейсом системы, через который происходит общение с программой, и её настройка.

Давайте рассмотрим простейший случай применения программы, на примере документа с формой и элементом TextArea:

Листинг 1.1

Первый пример Некоторый элемент TextArea

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

Но давайте поговорим сначала о параметрах, которые мы в данном случае передаём в метод инициализации класса - init().

Мы передаём в качестве параметра некоторый хеш, в котором значение элемента mode соответствует "textareas", а элемента theme - "simple". Элемент `mode` означает метод "замены" стандартных текстовых полей (textarea), на WYSIWYG. Он может принимать значения "textareas" , "exact" и "specify_textareas".

В случае "textareas" мы даём команду редактору преобразовать все элементы TextArea в редактируемые элементы. В остальных случаях мы манипулируем определенным полями для редактирования, идентификаторы которых необходимо перечислить в качестве значения элемента elems, через запятую.

В свою очередь элемент "theme" означает ничто иное, как текущий тип оформления редактора и может принимать значения: "simple" и "advanced".

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

Теперь давайте рассмотрим работу с редактором во время включённого режима темы "advanced".

В этом случае мы имеем гибкий в редактировании интерфейс, полное редактирование всех используемых редактором функций, а так же ещё несколько моментов.

Что ж, допустим, вы начали проект некоторого электронного журнала или Интернет-издания, в котором принципиальной является возможность создание статей со стороны администрации. При этом следует учитывать, что интерфейс программы должен быть как можно более схожим с привычным для нас интерфейсом наиболее используемого Word"а, а так же иметь достаточное количество функций для воплощения всех идей редактора относительно форматирования текста статьи, и никогда не должно возникать таких вопросов как: "А куда нужно нажать?", "А почему оно не показывает:.", "А куда делся весь текст":

Для более редкого возникновения подобных вопросов (но ведь от них никуда не деться:) мы сейчас немного изменим, текущий вариант редактора и добавим следующие функции:

Автоматическое форматирование вставляемого текста

Добавим функции форматирования

Изменим расположение панелей управления

Зададим язык редактора

Добавим проверку орфографии

Что ж, давайте обсудим точнее, что мы хотим увидеть в редакторе:

Панель форматирования находится сверху

Панель состояния отсутствует

Язык редактора - русский

Функции форматирования: полужирный, курсив, подчёркивание, шрифт, размер, стиль текста, цвет, заливка.

Функции структурного форматирования: таблица, выравнивание, табуляция, список

Дополнительные функции: вставка изображения, вставка, предпросмотр, вставка гиперссылки, функции "отката" и "возврата", ну и, наверное, введём печать.

Что ж, формализация задания есть, теперь давайте решим, как мы будем это воплощать в жизнь.

Для воплощения функции авторформата вставляемого извне текста необходимо указать параметр хеш-списка - "paste_auto_cleanup_on_paste", который принимает в качестве значения булев (true || false), и в зависимости от этого форматирует или нет внешний текст, переданный из буфера обмена.

При использовании данного параметра следует так же использовать и следующие параметры:

Paste_convert_headers_to_strong: (true | false), paste_strip_class_attributes: "all", paste_remove_spans: (true | false), paste_remove_styles: (true | false)

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

Существует два вида панелей, а именно: панель инструментов (toolbar) и панель состояния (statusbar).

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

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

Theme_advanced_toolbar_location: (top | bottom | none), theme_advanced_statusbar_location: top | bottom | none)

При этом в зависимости от значения параметра и будет установлено конечное положение панели, или если параметр стоит в значении "none", то панель вообще не будет отображена.

И ещё, панель инструментов имеет такой параметр как выравнивание, в соответствии значения которого, и будет центрированы элементы панели. За центрирование элементов отвечает параметр theme_advanced_toolbar_location, и может принимать стандартные значения: center, left, right (по-умолчанию установлен параметр center).

Итак, с панелями разобрались, но ведь на них следует добавить что-то?

Ведь по-умолчанию он будут просто пустовать, с минимальным набором значений, на ведь не нужен такой редактор?

Для размещения, элементы, или же другими словами - кнопки, должны разбиваться на несколько категорий, в каждой из которых могут находиться элементы (не)разделённые знаком разделителя. Для абстракции групп в программе используется понятие кнопок, и для задания группы в качестве значения параметра theme_advanced_button(n+1), где n-текущий номер группы, задается набор элементов, которые к ней должны относится.

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

Для задания языка редактора нужно всего лишь добавить параметр "language" со значением "ru".

Что ж, давайте посмотрим, что вышло у меня:

Листинг 1.2.

TNT43 Visual Editor tinyMCE.init({ mode: "textareas", theme: "advanced", language: "ru", plugins: "table,save,advhr,advimage,advlink,insertdatetime, preview,zoom, searchreplace,print,contextmenu,paste,directionality ", theme_advanced_buttons1_add_before: "save,newdocument,separator", theme_advanced_buttons1_add: "fontselect,fontsizeselect", theme_advanced_buttons2_add: "separator,insertdate,inserttime,preview,zoom,separator, forecolor,backcolor", theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator", theme_advanced_buttons3_add: "advhr,separator,print,separator,ltr,rtl,separator ", theme_advanced_toolbar_location: "top", theme_advanced_toolbar_align: "left", theme_advanced_statusbar_location: "bottom", plugi2n_insertdate_dateFormat: "%Y-%m-%d", plugi2n_insertdate_timeFormat: "%H:%M:%S", theme_advanced_resizing: true, theme_advanced_resize_horizontal: false, paste_auto_cleanup_on_paste: true, paste_convert_headers_to_strong: false, paste_strip_class_attributes: "all", paste_remove_spans: false, paste_remove_styles: false });

Вот - это и весь код. Он выглядит довольно громоздко, но в целом довольно прост для понимания.

Что ж, давайте рассмотрим его анатомию. Сначала мы передаём наиболее важные параметры, а именно: метод "замены" текстовых полей, тип темы редактора, язык редактора, а так же список подключаемых плагинов. Кстати о них. Насколько вы заметили, если внимательно читали, то в рамках данного текста мы их ещё не разу не упоминали.

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

Так же в рамках примера в листинге 1.2, мы использовали плагин inserdate, для котрого позже задали параметр dateFormat и timeFormat, которые вводят формат используемого времени и даты, соответственно. Они задаются в соответствии со спецификацией функции временных меток.

Так же стоит упомянуть другие интересные функции, использованные в примере:

• paste_remove - при режиме true, редактор фильтрует все поступившие из буфера обмела данные, и удаляет контеинеры spaи.
• paste_convert_headers_to_strong - при режиме true, редактор изменяет все заголовки (h1,h2,h3,h4,h5,h6) в буффере обмена на элементы
• paste_auto_cleanup_on_paste - фильтр для данных из буфера обмена (применимо к данным из MS Word)

Вот, по-моему, для общего обзора системы хватит. Однако мы ещё не рассмотрели довольно большое количество методов API-интерфейса, без которых часто очень сложно представить себе работу с редактором. Но обещаю, что мы рассмотрим их в следующих выпусках МК.

Уже достаточно давно я не писал ни одной статьи в своём блоге. К величайшему сожалению причина заключалась в отсутствии ПК. Как только окончательно накрылся мой 8-ми летний старичок, я сразу же оформил доставку нового. Наконец спустя полторы недели я заполучил новую комплектуху и теперь могу продолжать вести свой блог.

Сразу после того, как я собрал ПК, настроил ОС и прочее, у меня возник вопрос, какие же IDE стоит установить. Довольно часто мучаюсь подобным вопросом так как выбор достаточно велик. Ну и для того чтобы и вам было на много проще определиться с выбором, привёл для вас список 15-ти лучших IDE для кодинга на PHP.

PHPStorm

• Языки: PHP, HTML и JS
• Цена: 199$ за первый год
• Анализ качества кода, тесты PHPUnit, GitHub

Netbeans

• Языки: Java ME & SE, JavaScript, HTML5, PHP, C/C++, XML, Groovy, Javadoc, JSP
• Цена: Бесплатно
• Интеграция Subversion, Mercurial и Git, NetBeans Profiler

Aptana Studio

Ещё одна моя любимая IDE с которой я познакомился ещё до шторма. Огромный + её заключается в том, что она бесплатна.

• Платформы: Win, Mac OS X, Linux, Plugin for Eclipse
• Языки: JS, HTML, CSS, Ruby on Rails, PHP, Python, Perl
• Цена: Бесплатно
• Open source, deployment wizard for RoR, GitHub

Eclipse

Наверняка у большинства из вас данный редактор ассоциируется с программированием на языке Java, но не тут то было! Эклипс поддерживает просто невероятно огромное количество языков и при этом является совершенно бесплатным.

• Платформы: Win, Mac OS X, Linux, Solaris
• Языки: Ada, ABAP, C, C++, COBOL, D, Fortran, Haskell, Java, JavaScript, Julia, Lasso, Lua, NATURAL, Perl, PHP, Prolog, Python, R, Ruby, Ruby on Rails, Rust, Scala, Clojure, Groovy, Scheme, Erlang, LaTeX, Mathematica
• Цена: Бесплатно
• Rich Client Platform, поддержка Tomcat, GlassFish и прочие сервисы, Web Tools Platform

Sublime Text

• Платформы: Win, Mac OS X, Linux
• Языки: Невероятно огромное количество большинства распространённых языков
• Цена: На данный момент стоимость составляет 70$
• Package Manager

Visual Studio Code

Довольно мощная IDE, которая твёрдо отстаивает своё место на данным рынке. Писать PHP проекты под данным редактором не приходилось, так как познакомился с ней, когда разбирал язык C#

• Платформы: Win, Mac OS X, Linux
• Языки: Batch, C++, Clojure, CoffeeScript, DockerFile, Elixir, F#, Go, Pug template language, Java, HandleBars, Ini, Lua, Makefile, Objective-C, Perl, PowerShell, Python, R, Razor, Ruby, Rust, SQL, Visual Basic, XML, PHP, JS
• Цена: Бесплатно, лицензия разработчика от Micrisoft
• GitHub, code refactoring, debugger

Atom

В одной из первых статей я уже писал про этот редактор, и с тех времён своего мнения так и не изменил. Простой, красивый и бесплатный. Отлично подойдёт молодым и начинающим разработчикам. Ну которым лет по 15-22 и только только начали своё знакомство с PHP. Ну а так же Atom является бесплатной и обрезанной альтернативой Шторма. Работать на нём можно, да и думаю, что им пользуется достаточно много разрабов, и не только PHP. Мне же он показался слишком простым и не удобным (после шторма разумеется). Ну собственно я и работал за ним только на пухе.

• Платформы: Win, Mac OS X, Linux
• Языки: HTML, CSS, Less, Sass, GitHub Flavored Markdown, C/C++, C#, Go, Java, Objective-C, JavaScript, JSON, CoffeeScript, Python, PHP, Ruby, Ruby on Rails, shell script, Clojure, Perl, Git, Make, Property List (Apple), TOML, XML, YAML, Mustache, Julia & SQL
• Цена: Бесплатно
• Open source, built-in Package Manager, Themes

NotePad++

О да. Теперь пришло время поговорить о дедах. Многие наверняка сейчас сказали бы: "Да ты чего, офигел что ли?". Ну серьёзно... Если сравнивать IDE и Винды. То Блокнот++ - это Win XP или ME. Именно в классических темах.

NotePad та самая IDE которая ни хорошая, ни плохая. Это просто реальная классика. Он просто невероятно прост, гибок и быстр. Я не видел ещё ни одного редактора который работает так быстро. В котором пользователь без лишних усилий может настроить цветовую гамму для каждой отдельной буквы, каждого отдельного языка. Данный редактор отлично подходит любому начинающему разрабу. Я бы даже сказал, что любой начинающий просто обязан начать писать код именно в этой IDE.

Про этот блокнот можно писать целую вечность. Не смотря на то, что это очень старая и простая IDE"шка, я знаю ни одного программиста который продолжает пользоваться именно ей.

• Платформы: Win
• Языки: Ada, asp, Assembly, AutoIt, Batch, C, C++, C#, Caml, Cmake, COBOL, CoffeeScript, CSS, D, Diff, Flash ActionScript, Fortran, Gui4CLI, Haskell, HTML, INNO, Java, JavaScript, JSP, KiXtart, LISP, Lua, Makefile, Matlab, MS-DOS, INI file, NSIS, Normal Text File, Objective-C, Pascal, Perl, PHP, PostScript, PowerShell, Properties, Python, R, Resource file, Ruby, Shell, Scheme, Smalltalk, SQL, TCL, TeX, Visual Basic, VHDL, Verilog, XML, YAML
• Цена: Бесплатно
• Open source, Macro recording and playback, User Defined Syntax Highlighting and Folding

Coda

Каким бы я не был ненавистником "яблок", как же я мог пропустить этот редактор, рассчитанный именно для Маководов. Если честно я не понял зачем эта IDE вообще нужна, так как она поддерживает только ХТМЛ язык, да ещё и денег стоит. Просьба не писать в мой адрес кучу оскорблений, так как не было желания и возможности протестировать данный редактор.

• Платформы: Mac OS X
• Языки: HTML
• Цена: 99$
• Touch Bar ready, FTP, SFTP, FTP+SSL, and WebDAV client

Brackets

Тот самый редактор про который знают многие. От одного знакомого товарища, я услышал, что это не IDE вовсе. Может быть он и прав.

• Платформы: Win, Mac OS X, Linux
• Языки: C++, C, VBScript, Java, JavaScript, HTML, Python, Perl, Ruby
• Цена: Бесплатно
• Live Preview, JSLint, LESS

SlickEdit

Что-то неведомое мной и тёмное. Никогда не работал с этой темой. Но немного изучил, может быть в будущем всё же придётся столкнуться с этой IDE

• Платформы: Cross-platform
• Языки: GNU C/C++, Java, WinDbg, Clang C/C++ LLDB, Google Go, Groovy, Python, Perl, Ruby, PHP, XCode, Android JVM/NDK
• Цена: SlickEdit Standard 99.95$, SlickEdit Standard for Enterprise 149.95$
• GitHub, Subversion, Mercurial, Perforce, CVS

jEdit

Это тот самый редактор, который поддерживает просто невероятно огромное количество ОС. И просто ОГРОМНЫЙ список языков. На столько огромный, что я даже не стал их сюда вписывать, а просто дам вам ссылку на полный список. И всё это, совершенно бесплатно!

• Платформы: Win, Mac OS X, Linux, BSD, OS/2, UNIX, VMS
• Языки:
• Цена: Бесплатно
• Open source, Split Windows, extensive library of plugins

Programmer’s Notepad

Блокнот программиста. Как по мне, так упрощённая копия NotePad++. Что-то в последнее время у меня складывается мнение, что все старенькие IDE писались исключительно под ВСЕ языки программирования.

• Платформы: Win
• Языки: Список языков
• Цена: Бесплатно
• Open source, Folding, Plugins

Komodo Edit

• Платформы: Win, Mac OS X, Linux
• Языки: Python, Perl, PHP, Ruby, Tcl, SQL, Smarty, CSS, HTML, XML
• Цена: 295$
• Package Manager, Vagrant, Docker, Unit Testing

RJ TextEd

Понятия не имею что это... Если про Комодо я хоть что-то знаю, то вот это вижу в первый раз) Если кто в курсе, просьба отписаться в комментарии.

• Платформа: Win, Linux
• Языки: PHP, ASP, JavaScript, HTML, CSS
• Цена: Бесплатно
• FTP and SFTP client

Итог:

В данной статье я привёл пример из 15 редакторов которые вы можете перебирать для себя. Ну а если вам интересно именно моё мнение, то на самая лучше это Шторм. Это вы только начали изучать программирование или просто любите простоту, то вам нужен NotePad++. Ну а если вы молодой студен, которого деньги есть только на пивко в ларьке, но при этом охото работать в красиво оформленном инструменте, то тогда выбирайте Atom. А так же для самых практичных людей, у которых стоит только самая новейшая версия windows, 2 огромных монитора и даже карандаши и ручки лежат аккуратненько на своем месте на столе, то, разумеется, вам отлично подойдёт Visual Studio.

Каждый веб дизайнер и кодер нуждается в хорошем редакторе веб страниц для создания и редактирования HTML, CSS и JavaScript кода. Notepad (Windows) и TextEdit (Mac) — отличные инструменты для начала, но вскоре по мере накопления опыта работы захочется использовать более солидный и удобный инструмент.

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

• WYSIWYG редакторы. Это графические редакторы, которые позволяют строить макет страницы и задавать стили визуально, как в хорошо известном текстовом процессоре MS Word. Они являются удобным инструментом для построения дизайна страницы, хотя, как известно каждому опытному веб дизайнеру, код все равно придётся "причесывать" для достижения отличного результата.
• Текстовые редакторы. Это инструмент для непосредственного редактирования HTML и CSS кода. Некоторые редакторы имеют общее назначение и в них нет специальных опций поддержки веб кода. Другие специализированы для использования веб языков, таких как HTML, CSS, JavaScript и PHP, и имеют встроенные свойства для быстрого ввода HTML тегов, CSS свойств, и так далее. Многие из таких редакторов позволяют просматривать веб страницу в отдельном окне.

KompoZer (Windows, Mac, Linux)

KompoZer — отличный выбор, если вам нужен визуальный редактор в условиях ограниченного бюджета

Komodo Edit - хороший редактор, простой в освоении, но мощный и расширяемый

Хотя это и редактор общего назначения, он поддерживает HTML и CSS, и имеет свойство контекстного автозаполнения HTML тегов и свойств CSS, а также коллекцию вставок кода для различных элементов HTML. Для того, чтобы получить максимум от использования Komodo, нужно установить расширение HTML Toolkit , которое содержит такие чудесные свойства как, автозакрытие тегов, предварительный просмотр вида CSS, и генератор временного текста.

Komodo Edit позволяет просматривать редактируемые страницы в любом установленном браузере, или использовать встроенный браузер в отдельном окне, так что можно редактировать и видеть результат изменений одновременно.

Редактор имеет встроенную функцию загрузки файлов на сайт (FTP, FTPS, SFTP, или SCP), а также вы можете чудненько группировать ваши файлы с помощью опции менеджера проекта.

Очень полезная функция Code > Select Block . Она выделяет текущий основной блок HTML, например, текущий закрытый элемент div или ul . Очень удобная функция, когда нужно выделить целую секцию на странице для копирования или перемещения.

В редакторе Komodo Edit есть очень много мощных и полезных функций, такие как использование регулярных выражений для поиска/замены, возможность выполнять внешние команды, и так далее. К счастью, редактор обладает также хорошей справочной системой, которая позволяет легко освоить всю мощьKomodo Edit.

Aptana Studio (Windows, Mac, Linux)

Aptana Studio - это полноценная интегрированная среда разработки веб приложений с большим набором плагинов. Хотя вы можете использовать ее только как редактор HTML/CSS/JavaScript кода

Notepad++ - отличная замена для Notepad из Windows. Несмотря на то, что у него нет такого набора опций, как у других редакторов, он отлично подходит для редактирования HTML, CSS, JavaScript и других файлов с кодом

PSPad - другой редактор общего назначения для Windows с большим набором функций полезных для HTML и CSS кодеров

jEdit - это кросс-платформенный редактор текста с мощными функциями макро команда и плагинов. Установите плагин XML, если вам нужно редактировать веб страницы

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

Vim определенно сложен для освоения, но если вы преодолеете трудности, то никогда не захотите вернуться обратно!

Дедушка редакторов текста для программистов Vim (прямой потомок редактора vi) - это консольный редактор текста с открытым кодом. Он устанавливается редактором по умолчанию в почти всех разновидностях Unix, включая Linux и Mac OS X. Также редактор доступен для использования в Windows и многих других системах.

Vim не является системой, которую можно поставить и начать использовать сразу, до этого никогда не имев с ней дела. Большинство команда редактирования включают странные сочетания наподобие:wq и / . Он также имеет три режима редактирования: режим вставки , в котором вводится текст; визуальный режим для выделения текста; и командный режим для ввода команд. Такое функционирование является наследием Unix тех дней, когда не было ни окон ни мышки.

Почему он попал в список? Если вы освоите его, то убедитесь в его быстроте и мощности. С помощью нескольких команд можно за несколько секунд сделать то, что в других редакторах может занять минуты.

существует большое количество макросов и плагинов для Vim, которые облегчают работу с кодом HTML, CSS и JavaScript, включая подсветку синтаксиса, автозавершение, HTML Tidy, и просмотр в браузере. Вот большой список полезных ссылок:

• Vim Omni автозавершение
• HTML/XHTML редактирование в Vim
• домашней страницы

Fraise (Mac)

Fraise - интуитивный редактор для Mac, с набором функций, достаточных для веб редактирования

Как и TextWrangler и gedit, Fraise - чудесный легкий редактор, который приятно использовать. Он является ответвлением от редактора . Он относительно новый и у него нет нормального веб сервера. В настоящее время он поддерживается только в Mac OS X 10.6 (Snow Leopard), то есть, если вы используете версию 10.5, то вам придется загрузить Smultron.

Fraise имеет несколько чудесных опций для веб редактирования:

• Подсветка кода для HTML, CSS, JavaScript, PHP и нескольких других языков программирования.
• Команду Close Tag(Command-T) для закрытия текущего тега. Это реально сохраняет время при вводе списков.
• Удобный предварительный просмотр встроенным браузером (с использованием WebKit), с очень удобной опцией Live Update? которая обновляет браузер как только изменилась разметка и CSS на редактируемой странице.
• Опцию Advanced Find, которая поддерживает поиск/замену с использованием регулярных выражений.
• Поддержка блоков для быстрого ввода тегов HTML и свойств CSS.
• Некоторые удобные команды для манипулирования текстом, такие как проверка HTML и конвертация символов в элементы HTML.

Fraise стоит изучить, если вы используете Mac и вам нужен удобный редактор с большими возможностями, чем встроенный TextEdit.

Существует множество способов создания собственного сайта - от использования готовых шаблонов на Narod.ru до обращения по объявлению типа "создание сайтов за два дня от 300 рублей". Создать свой собственный блог или простенькую домашнюю страницу может даже ребенок. Именно поэтому похвастаться наличием своего сайта в Сети может почти каждый. Различные сервисы предоставляют в распоряжение любого желающего сайты-конструкторы, которые за считанные секунды создают простенькую личную страницу пользователя. Таких страниц в Интернете сотни и сотни тысяч. Как правило, они похожи друг на друга и не запоминаются. Для тех, кто использует бесплатные онлайновые инструменты для создания личной интернет-страницы, собственный сайт - чаще всего забава, люди создают страничку и забывают про нее. Содержание на ней в большинстве случаев сводится к публикации фотографий своей собаки и нескольких сведений "о себе".

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

Визуальные web-редакторы - хороший способ сэкономить время на изучении web-программирования и быстро сделать сайт, наполнив его всей необходимой информацией. С одной стороны, для создания web-проекта с помощью подобной программы не нужно иметь специальных знаний и быть программистом. С другой стороны, приложения такого типа дают простор для творчества и гарантируют, что сайт не будет выглядеть точно так же, как тысячи других. В основе работы визуальных web-редакторов лежит свойство WYSIWYG - What You See Is What You Get (что видишь, то и получишь). Иными словами, в процессе редактирования web-страницы выглядят примерно так же, как будут отображаться в браузере.

⇡ WYSIWYG Web Builder 7.1.0

• разработчик: Pablo Software Solutions
• размер дистрибутива: 5,5 Мб
• распространение: shareware
• русский интерфейс: нет

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

Если у вас нет опыта в web-дизайне, создание своего первого проекта в программе стоит начать с готового шаблона. По умолчанию в WYSIWYG Web Builder имеется около десяти шаблонов разной направленности, а еще несколько десятков можно бесплатно скачать с официального сайта программы. После загрузки шаблона вы получите возможность редактировать любой его элемент.

Для этого можно использовать многочисленные инструменты, размещенные на вертикальной панели. Для удобства они разбиты по категориям: навигация (дерево сайта, меню навигации), рисование (линия, кривая, многоугольник), мультимедийные инструменты (Flash-плеер, плеер YouTube, Java, OLE-объект), средства для работы с web-формами (поле для вставки кода CAPTCHA, флажок, кнопка для загрузки файла, поле для ввода текста), Paypal (различные кнопки для работы с этой системой электронных платежей) и пр. Если какая-либо категория средств вам не нужна в работе, ее можно свернуть, чтобы освободить место на экране для более востребованных инструментов.

Стоит обратить внимание и на категорию Extra. Тут собраны средства для создания фотогалереи, добавления подписки на новости в формате RSS, слайд-шоу, поиска по сайту. Тут же можно обнаружить целую коллекцию готовых элементов кода Javascript. Это и разнообразные визуальные эффекты, и такие полезные средства, как определение текущей версии браузера, вывод информации о времени последнего изменения веб-страницы, размещение ссылки на занесение страницы в закладки.

Несмотря на то, что работая в WYSIWYG Web Builder пользователь видит готовые элементы страницы, в браузере сайт все же может выглядеть немного не так, как в рабочем окне редактора. Для быстрого просмотра внешнего вида страницы в браузере достаточно нажать клавишу F5. WYSIWYG Web Builder откроет проект в обозревателе, который используется в системе по умолчанию. Если нужно просматривать страницы сразу в нескольких браузерах, их можно добавить в список.

Как правило, шаблон сайта состоит из нескольких страниц. Для удобного управления проектом в окне программы имеется специальная панель Site Manager, где отображается дерево страниц сайта. Используя инструменты этой панели, можно создавать новые страницы на основе шаблонов, добавлять страницы, сохраненные ранее на жестком диске, копировать уже имеющиеся страницы, просматривать их свойства и т.д.

В процессе работы над ресурсом, состоящим из большого числа страниц, могут также пригодиться такие средства программы, как проверка ссылок на работоспособность, оценка размера страниц, генератор карты сайта в виде XML-файла, который будет размещен в корневой директории сайта. Кроме этого, WYSIWYG Web Builder может помочь собрать все изображения и прочие файлы мультимедиа, которые используются на web-страницах, в одном месте.

Несмотря на то, что WYSIWYG Web Builder сам по себе является достаточно функциональным редактором, какого-нибудь инструмента вы можете в нем не обнаружить. В этом случае стоит заглянуть в галерею расширений - быть может, нужное средство доступно в виде плагина. Для программы существует более 250 расширений, и их число постоянно увеличивается. Расширения пишутся активными пользователями редактора и выкладываются на официальном форуме. Стоит иметь в виду, что подключить расширения на триал-версии WYSIWYG Web Builder нельзя, для этого программу нужно зарегистрировать.

⇡ Web Page Maker 3.21

• разработчик: www.webpage-maker.com
• размер дистрибутива: 3,66 Мб
• распространение: shareware
• русский интерфейс: нет

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

В программе также есть готовые варианты такого важного элемента любого сайта, как меню навигации. Web Page Maker содержит различные варианты меню. Выбрав подходящий, можно сразу же отредактировать его, указав ориентацию (горизонтальное или вертикальное), расстояние между элементами, параметры текста и ссылок.

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

Основную часть окна программы занимает рабочая область, а справа находится панель Site Contents. При помощи этой панели удобно управлять страницами сайта, а также отдельными элементами страниц. На вкладке Elements отображаются все блоки страницы, и щелкая по каждому из них, можно сразу же видеть, где он находится. Кроме этого, тут же можно вызвать окно свойств каждого элемента или удалить ненужные блоки. Что касается набора инструментов для создания структуры сайта, то тут стоит отметить возможность создания новой страницы на основе уже существующего в Интернете ресурса. Стоит указать его адрес, и Web Page Maker загрузит страницу, разобьет ее на блоки и сделает их доступными для редактирования.

Чтобы сделать сайт более живым, можно использовать анимационные эффекты. Примеры готового кода Javascript можно найти в библиотеке Web Page Maker. Используя их, можно изменить цвет прокрутки окна, разместить в углу экрана часы, показывающие текущее время, добавить слайд-шоу и т.д.

Когда работа над сайтом будет завершена, проект можно сохранить на жестком диске или же сразу загрузить на FTP-сервер. Причем, дополнительный клиент для этого не нужен - Web Page Maker имеет встроенные средства для работы с FTP.

⇡ CoffeeCup Visual Site Designer 6.06

• разработчик: CoffeeCup Software
• размер дистрибутива: 17,6 Мб
• распространение: shareware
• русский интерфейс: нет

Разработчики CoffeeCup Visual Site Designer, вероятно, по жизни руководствуются лозунгом "заработай на всем, на чем только можно заработать". Поэтому нужно иметь в виду, что, покупая этот визуальный редактор за $49, вы не получите в свое распоряжение все те функции, на которые можно рассчитывать после приобретения большинства других подобных программ.

Так, программа поставляется вместе с десятью шаблонами, а для загрузки остальных предлагается проследовать на сайт разработчика. Открыв соответствующую страницу, можно обнаружить, что дополнительные шаблоны платные и продаются по цене $9 за штуку. Подобные "сюрпризы" ждут пользователя и в процессе работы с приложением. Нажмите кнопку инструмента для создания web-форм, и вы обнаружите, что для работы с ним нужно заплатить еще $39, попробуйте добавить на сайт фотогалерею, и вы увидите, что и эта возможность предоставляется за дополнительную плату.

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

Такие часто встречаемые элементы web-страниц, как счетчики и web-формы, в программе можно создавать только при помощи инструмента для вставки пользовательского HTML-кода.

Работая с векторными элементами (стрелками, многоугольниками, звездочками, выносками и т.д.), можно использовать многочисленные средства для изменения их внешнего вида. Например, есть возможность изменить прозрачность, добавить тень, сделать объект объемным, заставить его светиться или изменять формы при наведении курсора мыши. Кроме этого, можно настроить заливку каждого объекта, добавить текстуру.

CoffeeCup Visual Site Designer имеет встроенный FTP-клиент, при помощи которого можно загружать сайт на удаленный сервер. Если, загрузив сайт, вы решите внести в некоторые его страницы изменения, можно будет воспользоваться функцией синхронизации данных. В этом случае программа загрузит те страницы, которые были изменены. При необходимости, не покидая CoffeeCup Visual Site Designer, можно даже полностью удалить сайт с сервера.

⇡ WebSite X5 Evolution 8

• разработчик: Incomedia
• размер дистрибутива: 15,3 Мб
• распространение: shareware
• русский интерфейс: есть

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

В программе WebSite X5 Evolution реализован немного иной подход к созданию сайта, благодаря чему многие вопросы отпадают сами собой. Работа приложения построена по принципу пошагового мастера, благодаря чему начинающий пользователь может быть уверен в том, что он не пропустил ничего важного.

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

На первом указываются общие настройки. Так, тут вводится название сайта, автор и язык, подбираются ключевые слова, загружается Favicon, выбирается тип меню (горизонтальное или вертикальное), подбирается подходящий шаблон (в библиотеке программы более сотни вариантов оформления), задается внешний вид верхней и нижней части страниц сайта.

На втором этапе предлагается создать карту сайта, то есть продумать его структуру. Используя кнопки "копировать" и "вставить" на панели инструментов, можно создавать новые страницы на основе уже имеющихся. Тут можно определить, какие страницы ресурса будут скрытыми, указать частоту обновления для каждой страницы.

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

На четвертом этапе WebSite X5 Evolution предложит указать некоторые дополнительные настройки, например, определить внешний вид вводной страницы, задать параметры отображения flash-рекламы, добавить на сайт блог и ленту RSS-новостей.

Среди предлагаемых возможностей есть и такой элемент как "Корзина для электронной торговли". Используя его, можно быстро создать собственный интернет-магазин. Перейдя к его настройкам, можно быстро создать категории товаров, определить условия доставки, выбрать варианты оплаты, вставить лицензионное соглашение, настроить внешний вид элементов магазина.

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

Пожалуй, единственным неудобством при работе с WebSite X5 Evolution является невозможность предварительного просмотра страниц в браузере. Если нужно увидеть, как будет выглядеть сайт, можно использовать функцию "Тест", однако на генерацию проекта требуется некоторое время. Кроме того, программа генерирует страницы в собственном просмотрщике, созданном на движке Internet Explorer.

⇡ KompoZer 0.7.10

• разработчик: Fabien Cazenave
• размер дистрибутива: 7,9 Мб
• распространение: бесплатно
• русский интерфейс: есть

KompoZer - бесплатный визуальный web-редактор с открытым кодом. Программа доступна не только для Windows, но и для Mac, а также для Linux. Редактор создан на движке Gecko, на котором работает широко известный браузер Firefox. Это дает ряд преимуществ: во-первых, движок прекрасно поддерживает современные web-стандарты, такие как XML, CSS и JavaScript. Во-вторых, возможности редактора, основанного на Gecko, могут быть расширены за счет подключаемых модулей.

Возможно, первым дополнением, которое вы захотите установить, будет пакет для локализации на русский язык. Устанавливается он примерно так же, как инсталлируются плагины для Firefox: в меню Tools необходимо выбрать команду Extensions, после чего указать путь к загруженному файлу локализации с расширением.xpi. После установки плагина потребуется перезагрузка программы, после чего интерфейс станет русским.

В программу интегрирован FTP-клиент, причем, его можно использовать не только для загрузки готового проекта, но и для быстрого редактирования страниц уже размещенного на сервере сайта. Указав данные для входа на сервер, можно перемещаться по дереву каталогов и выбирать страницы для редактирования. Их содержимое будет загружаться в окне KompoZer, и редактировать их можно прямо "на лету".

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

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

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

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

⇡ BestAddress HTML Editor 17

• разработчик: Multimedia Australia
• размер дистрибутива: 7,1 Мб
• распространение: shareware
• русский интерфейс: нет

Когда пользователь решает изучить какую-нибудь область, например, компьютерную графику, видеомонтаж или программирование, он часто задает вопрос более опытным товарищам - с какой программы лучше начинать осваивать новое ремесло. В некоторых случаях, действительно, лучше в начале использовать простые инструменты, а затем, разобравшись с их возможностями, переходить к более продвинутым редакторам. Что касается BestAddress HTML Editor 2010 Professional, можно сказать, что эта программа имеет все шансы стать первым и последним инструментом для начинающего веб-разработчика.

Работа в режиме визуального построения веб-страницы напоминает работу с конструктором - можно самостоятельно задавать размеры и цвет элементов, размещать по своему усмотрению кнопки, графику, меню и прочие компоненты сайта. Удобное форматирование, почти как в текстовом редакторе, может использоваться для управления положением любых элементов страницы. Шаблонов в BestAddress HTML Editor 2010 Professional вы не найдете, зато есть возможность загрузки веб-страницы, расположенной по указанному адресу. Открыв страницу в программе, можно затем отредактировать ее.

Редактор может автоматически загружать проект на сервер - для этого программа использует прилагающийся к ней FTP-клиент Digital FTP Access.

В BestAddress HTML Editor 2010 Professional имеются и профессиональные инструменты для написания кода. Новички, желающие понять принципы работы и написания HTML, CSS, Java и PHP-кода, могут обратиться к документации. В ней изложены самые главные правила написания кода, такие как - назначение тегов, примеры простейших операций и т.д. Несложные и понятные уроки дают краткое представление о структуре HTML и вводят новичка "в курс дела".

⇡ Заключение

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