Web редактор


Краткий список WYSIWYG редакторов / Хабрахабр

Однажды мне потребовался WYSIWYG редактор, я помнил как он выглядит, его функции, но не помнил названия. Через 45 минут я все же его нашел… Тогда я поставил перед собой задачу помочь многим, в том числе и себе: сделать сводный список всех чуть более известных WYSIWYG редакторов.

Вступление

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

TinyMCE

Один из самых распространенных визуальных редакторов, обладает недюжинным функционалом. Есть множество дополнений, по умолчанию установлено множество плагинов.(Браузеры: Mozilla 1.3+, MSIE 5.5+, Opera 9.0+, Safari, Chrome) [Официальный сайт | Демо]

CKeditor

Полный аналог TinyMCE.(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome) [Официальный сайт]

CLEditor

Незамысловатый визуальный редактор, особенных функционалом не балует. Но сделан вполне добротно, качественно реализованы все функции. (Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome) [Официальный сайт]

NicEdit

Редактор очень похож на CLEditor. Обладает стандартным функционалом.(Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome) [Официальный сайт]

elRTE

Очень качественный визуальный редактор. Обладает широким функционалом. Сделан очень качественно.(Браузеры: Firefox 3.5+, Opera 10+, Safari 3.0+, Internet Explorer 7+, Google Chrome) [Официальный сайт | Демо]

Spaw

Очень средний визуальный редактор. Обладает стандартным функционалом.(Браузеры: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome) [Официальный сайт | Демо]

Xinha

Неплохой визуальный редактор, отличительная особенность — множество встроенных action'ов. Т.е. настроить его под свои нужды не составит трудностей. (Браузеры: Firefox 1.5+, Opera 9+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome) [Официальный сайт | Демо]

Imperavi (Платный)

Достаточно милый редактор, функционал не большой, но его вполне хватает. Существует ряд ошибок связанных с переходом от html к визуальному редактору и обратно. (убираются align'ы) Важно заметить, что Imperavi работает как плагин к JQuery. Имеется неплохая документация.(Браузеры: Firefox 1.5+, Opera 9+, Safari 4+, Internet Explorer 7+, Google Chrome) [Официальный сайт | Демо]

Markitup

Markitup больше похож на удобный редактор html, который больше подойдет профессионалу, нежели рядовому пользователю. Но если вы знаете html, то он может оказаться вполне удобным. (Браузеры: Firefox 3+, Opera 9+, Safari 3+, Internet Explorer 6+, Google Chrome) [Официальный сайт | Демо]

Aloha Editor

Неплохой редактор, очень удобен. Однако существует огромный минус, который затмевает почти все плюсы — это отказ от поддержки старых и не очень браузеров (доступны только последние версии браузеров).(Браузеры: Требуется поддержка HTML5, Opera не поддерживается) [Официальный сайт | Демо]

Mercury editor

Mercury представляет собой цельную веб-страницу, и может быть использован для редактирования целой страницы или отдельных определенных областей. Он поддерживает функцию предварительного просмотра отредактированного содержимого, а также размещение ссылок, изображений, видео и таблиц. Загрузка файлов может быть осуществлена посредством интерфейса drag'n'drop. Редактор также поддерживает совместную работу нескольких человек. Mercury может быть установлен в качестве отдельного Rails, либо за счет внедрения в код страницы. (Требуется JQuery) И минус в том, что поддерживаются только следующие браузеры: Chrome 10+, Safari 5+, Firefox 4+. [Официальный сайт | Демо на главной странице]

YUI Rich Text Editor

Визуальный редактор от Yahoo. Как справедливо заметил sdevalex, один из лучших визуальных редакторов. Обладает исчерпывающим функционалом, поддерживает подавляющим большинством браузеров. [Демо]

MooEditable

Набор функций сильно ограничен, однако порой больше и не требуется. [Демо]

OpenWysiwyg

Кросс-браузерный полноценный редактор со всеми требуемыми функциями. Он даже включает в себя привлекательные выпадающие меню и кнопки. К сожалению, Chrome не будет поддерживать его.(IE 5.5+, Firefox 1.0+, Mozilla 1.3+ and Netscape 7+) [Официальный сайт | Демо]

html-5-wysiwyg

Визуальный редактор на HTML5 со всеми вытекающими из этого последствиями. По большей части, редактор является демонстрацией возможностей HTML-5, нежели готовым продуктом.(Как следует из названия, требуется поддержка HTML5) [Страничка на code.google.com]

jWysiwyg

Леговесный плагин для jquery. [Официальный сайт | Демо]

Реформатор

Визуальный редактор от студии Артемия Лебедева. [Официальный сайт | Демо]

Итог

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

UPD 0: поправил названиеUPD 1: дополнил описание YUI Rich Text Editor (спасибо sdevalex).UPD 2: добавил jWysiwyg (спасибо mr47).UPD 3: добавил Реформатор (спасибо kuber).UPD 3: добавил Реформатор (спасибо kuber).UPD 4: исправлено: Imperavi стал платным

P.S: 1. если какой не назвал, пишите, исправлю. 2. Если топик не актуален, напишите, уберу.

habrahabr.ru

Выбираем HTML-редактор / Программное обеспечение

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

Итак, первый HTML-редактор, на который пал наш взор, стал Macromedia HomeSite.

Macromedia HomeSite

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

увеличить картинку

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

Macromedia HomeSite обеспечивают удобную подсветку синтаксиса не только HTML-страниц, но и файлов PHP, Perl, ASP, MySQL и других популярных средств разработки. Данный факт придется по душе опытным пользователям, которые не ограничиваются средствами языка гипертекстовой разметки и используют более сложные языки веб-программирования. Если же Вас не устраивает текущая цветовая схема подсветки синтаксиса, то это не проблема - можно отредактировать существующую, или даже создать собственную схему оформления документов. HomeSite имеет мощную справочную систему, содержащую кроме описания возможностей программы спецификации языка HTML, справочник тегов и включающая удобные всплывающие подсказки по текущему дескриптору - для их вызова достаточно нажать F2, и пользователю демонстрируются все возможные атрибуты для данного тега.

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

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

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

Отдельно стоит отметить средства для создания и конфигурирования таблиц и фреймов - Table Wizard и Frame Wizard, позволяющие существенно облегчить жизнь разработчику при создании таблиц и фреймов сложной структуры.

Только представьте, сколько бы времени ушло на создание подобной таблицы вручную!

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

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

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

Скачать последнюю версию Macromedia HomeSite можно по этому адресу.

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

SiteEdit

Программа SiteEdit создана российской компанией EdgeStile и позиционируется разработчиками как система управления сайтом. В отличие от HomeSite, SiteEdit относится к так называемым визуальным средствам разработки - WYSIWYG-редакторам (от заглавных букв выражения What You See Is What You Get - "что видите, то и получите").

После первого запуска программы появляется готовый шаблон веб-узла.

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

После щелчка по кнопке "Изменить раздел" появляется новое окно, в котором и можно проделать эту нехитрую операцию:

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

Программа предлагает несколько шаблонов оформления: book, galeon, kafe, palm_skin, stroitel, благодаря которым можно существенно изменить облик всего сайта в целом.

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

увеличить картинку

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

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

Любопытно, что напрямую сохранить код странички из программы невозможно, для этого необходимо выбрать пункт "Просмотр страницы в браузере", и лишь из браузера можно сохранить страницу в виде html-файла. Данный подход, видимо, связан с тем, что в версиях Standard и Business программы SiteEdit имеется возможность выгрузки всего проекта сразу на хостинг, однако в бесплатной версии Start данная возможность, к сожалению, отсутствует. Отсюда и подобные неувязки.

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

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

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

SiteEdit выпускается в трех основных версиях - Start, Standard, Business, и двух дополнительных -Partner. Загрузить версию Start программы SiteEdit можно отсюда.

HTML Source

Еще одна Freeware-программа, которая попала к нам в обзор - это HTML Source. Первое, что бросилось в глаза - небольшой размер дистрибутива программы - всего 1,5 Мб! Это навело на несколько скептические мысли о функциональности программы и ее возможностях. Однако мы были приятно удивлены.

увеличить картинку

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

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

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

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

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

В меню "Tags" сосредоточены основные группы HTML-дескрипторов.

Наибольший же интерес вызывает содержание меню "Tools", в котором и собраны все инструменты данного программного средства. Разберем его содержимое более пристально.

Пункт "Convert Case" позволяет сменить регистр букв, т.е. либо инвертировать его, либо привести к одному определенному. Следующий пункт "Convert CodePage" позволяет быстро сменить кодировку всей страницы. Среди оставшихся пунктов необходимо отметить встроенный модуль проверки орфографии, и средство для оптимизации HTML-кода под названием Tidy, который приводит вид документа в соответствии с требованиями организации W3C, которая и занимается разработкой стандартов языка гипертекстовой разметки.

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

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

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

Таким образом, HTML Source придется по душе опытным разработчикам, причем не только как средство разработки, но и как справочное пособие. Скачать HTML Source можно по этому адресу

Magic HTML Studio

Следующей программой, попавшей к нам в обзор, стала Magic HTML Studio, разработанная компанией AG FreeSoft. После запуска программы нашему взору предстала необычная картина - уж больно необычен был дизайн Magic HTML Studio.

Кому-то подобный интерфейс может и придется по душе, но, на мой взгляд, не совсем удачное решение для программы подобной направленности. Также огорчил факт отсутствия какой бы то ни было подсветки синтаксиса документа. Ну да ладно, отбросим все претензии к дизайну, и посмотрим, как у Magic HTML Studio обстоят дела с функциональной составляющей.

А вот тут все как раз на высшем уровне! Чего только стоят такие инструменты, как Java Constructor и CQI QuickBuilder. Но обо всем по порядку.

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

Теперь перейдем непосредственно к средствам и инструментам, уникальным именно для Magic HTML Studio. Java Constructor представляет собой мощное, и одновременно простое средство создания скриптов на языке JavaScript, причем для этого пользователю совершенно не нужны знания данного языка программирования. С помощью конструктора можно вставить календарь или часы на вашу страницу, сделать динамическое или выпадающее меню, сотворить простенький баннер, состоящий из нескольких картинок и некоторые другие полезные динамические элементы.

увеличить картинку

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

Также в состав программы входит генератор CGI скриптов, при помощи которого можно создать конференцию, гостевую книгу или чат всего за один щелчок мыши, предварительно установив параметры скрипта.

К сожалению, проверить данный инструмент на практике у нас не было возможности - для этого было необходимо выгрузить файлы на сервер с поддержкой CGI-скриптов. Перейдем к другим возможностям программы. Так, с помощью меню Options можно производить операции добавления скрипта загрузки Flash, вызова редактора элементов, а также операции смены шрифта и добавления формы.

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

Плюсы: продвинутые конструкторы JavaScript и CGI-скриптов, широкие возможности для добавления динамических элементов, справочная система на русском языке.

Минусы: не совсем удачный дизайн, отсутствие подсветки синтаксиса, отсутствие визуальных средств разработки.

Magic HTML Studio можно порекомендовать разработчикам средней и высокой квалификации для создания динамических веб-документов.

Microsoft FrontPage

Microsoft FrontPage, входящий в пакет Microsoft Office, является классическим WYSIWYG-редактором, в котором, однако, присутствует возможность ручной правки кода.

Интерфейс программы во многом напоминает таковой и Microsoft Word, что нисколько не удивляет - унификация внешнего вида поможет новичкам быстрее освоить основные возможности FrontPage.

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

увеличить картинку

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

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

FrontPage, благодаря тесной интеграции с другими продуктами корпорации Microsoft, позволяет вставить в веб-документ различные типы объектов: от картинок и диаграмм до листов Microsof Excel.

Разумеется, FrontPage имеет конструктор таблиц, существенно облегчающий их создание.

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

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

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

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

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

Минусы: небольшой набор инструментов разработки, невозможность отдельного приобретения программы. Microsoft FrontPage неплохо подойдет в качестве HTML-редактора на первое время, однако с ростом потребностей пользователя его возможностей может не хватить.

Macromedia Dreamweaver MX 2004

И, наконец, последняя программа в нашем обзоре Macromedia Dreamweaver MX 2004. Немалый размер дистрибутива (62 Мб) позволяет ожидать многого от этой HTML-редактора. И действительно, возможности Macromedia Dreamweaver MX 2004 впечатляют. После установки пользователя просят выбрать внешний вид программы, который отличается в зависимости от подхода к созданию веб-документов. При выборе "Code" интерфейс программы будет подстроен под нужды кодировщика, а при выборе "Design" - соответственно, дизайнера. Впрочем, всегда имеется возможность для переключения между этими двумя режимами, а также доступен третий, комбинированный режим - рабочая область программы делится на две части.

увеличить картинку

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

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

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

Для пользователей, знакомых с возможностями языка HTML, можно порекомендовать использовать инструмент под названием Tag Chooser, с помощью которого можно вставить не только любой HTML-тег, но и основные выражения и операторы таких языков программирования, как JavaScript, ASP.Net, PHP, WML и ColdFusion. Все это открывает новые горизонты использования программного средства при разработке различных сложных проектов с использованием серверных языков программирования.

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

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

Macromedia Dreamweaver MX 2004 может использоваться совместно с другими продуктами компании - Macromedia Fireworks, Flash и др.

Если же выбор пользователя, который предпочитает создавать документы в визуальном режиме, практически очевиден, то перед "кодировщиком" появляется непростая задача в выборе между двумя продуктами Macromedia: HomeSite или Dreamweaver MX 2004? Можно отметить, что возможности Dreamweaver MX 2004 будут лишними для кодера, однако при большом объеме рутинной работы можно вполне воспользоваться визуальным режимом - если программа предлагает его, то почему бы не попробовать? Пользователи же HomeSite подобной возможности лишены, но зато программа предлагает им весь необходимый набор инструментов для комфортной разработки веб-документов различной сложности.

Таким образом, каждый волен выбирать нужный ему продукт самостоятельно, учитывая поставленные цели и имеющиеся знания. Разумеется, вопрос также и в цене - оба продукта Macromedia распространяются как Shareware, но их можно бесплатно использовать в течение 30-дневного пробного срока. Этого времени вполне достаточно, чтобы определиться с выбором.

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

Минусы: большой объем дистрибутива, высокая цена продукта.

Скачать 30-дневную пробную версию Dreamweaver MX 2004 можно отсюда.

Если вы заметили ошибку — выделите ее мышью и нажмите CTRL+ENTER.

3dnews.ru

Скачать лучший Web-редактор

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

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

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

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

KompoZer

Этот редактор является отличным средством для тех, кто не желает тратить деньги на платные программы. KompoZer является WYSIWYG редактором. Многие пользователи называют его самым лучшим бесплатной программой на данный момент. Эта программа обладает открытым кодом, что позволяет ее редактировать.

Обработка страницы проводится в трех режимах. WYSIWYG предназначен для визуальной обработки страницы и разметки. Кроме того, можно воспользоваться объединенным режимом, который предназначен для детальной обработки разметки некоторых элементов. Помимо этого, есть возможность редактировать код страниц в текстовом редакторе. К тому же программа позволяет увидеть страницу в таком виде, в котором она будет отображаться в браузере.Редактор работает со всеми элементами HTML, среди которых таблицы, формы и картинки. Кроме того, в программу интегрирован редактор CSS для изменения стилей. Также утилита располагает менеджером ресурса для обработки файлов и кнопкой «Опубликовать» для загрузки ресурса через FTP.

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

Komodo Edit

Это web-редактор, который способен расширяться. Эта простая программа с открытым кодом. Этот редактор очень просто расширяется. Система расширений очень похожа на ту, которая применяется в браузере Mozilla Firefox. Редактор обладает большим количеством дополнений.

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

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

Также программа обладает интересной опцией Code>Select Block. Она позволяет выделять главный блок. Этой функцией удобно пользоваться при необходимости выделить блок на странице, скопировать ее и переместить в нужное место.

Web-редактор Komodo Edit располагает большим количеством интересных функций. Среди них можно выделить применение регулярных фраз для поиска элементов. Также разрешается исполнять команды извне. Кроме того, редактор имеет справку, которая дает возможность быстро разобраться со всеми возможностями редактора.

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

bezwindowsa.ru

5 лучших текстовых редакторов для веб-разработчиков

«Какой редактор все-таки лучше?» — этот вопрос задают себе как новички, так и те, кто уже давно занимаются веб-разработкой. Ведь всегда появляется что-то новое, изменяются требования заказчиков, повышаются собственные навыки, хочется автоматизировать рутинные процессы для больших проектов и получить как можно больше возможностей «из коробки». В этой статье мы собрали лучшие текстовые редакторы для веб-разработчиков на данный момент.

Sublime Text (Windows, Linux, Mac)

Это текстовый редактор для веб-разработчиков, написанный на C++ и Python. Он выглядит одинакового на всех поддерживаемых платформах благодаря использованию собственного UI-фреймворка. Разработчики предоставляют бесплатную версию для ознакомления, но для продолжительного использования вам понадобиться приобрести лицензию. Бонус в том, что лицензия предоставляется на пользователя (per user), а не на устройство (per device). При покупке нескольких лицензий для компании также предоставляются скидки.

Основные преимущества Sublime Text:

  1. Простота использования — открыв Sublime Text, вы сможете практически сразу начать в нем работать.
  2. Быстрый и гибкий поиск с использованием нечетких совпадений.
  3. Возможность множественного выделения для ввода одинакового текста сразу в нескольких строках. Для установки позиции курсора нужно нажать Ctrl + левая клавиша мыши или Ctrl + тройной щелчок левой клавишей для выделения целого абзаца.
  4. Наличие визуальной мини-карты кода — она полезна при работе с большими файлами, так как позволяет быстро находить необходимые фрагменты:
  5. Возможность использовать сниппеты для ускорения работы и большое количество плагинов для самых разных задач. Главным из них можно считать Package Control, с помощью которого можно искать и устанавливать необходимые плагины прямо из редактора.

Вот несколько примеров плагинов:

Emmet — отличный плагин, который позволяет использовать шорткаты для ввода тех или иных тегов, например:

ul#nav>li.item$*3>a{Item $}

Emmet преобразует шорткат выше в список с тремя элементами:

<ul> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> </ul>

SublimeLinter — плагин для проверки синтаксиса. Он позволяет минимизировать количество ошибок, на лету проверяя написанный код. Вам просто понадобиться установить нужные пакеты, например: SublimeLinter-html-tidy, SublimeLinter-csslint, SublimeLinter-jshint и SublimeLinter-php.

CSScomb — плагин, который помогает размещать CSS-селекторы в правильном порядке для простоты чтения и правки в будущем.

Что касается недостатков Sublime Text, то к ним можно отнести его стоимость (70 долларов), а также то, что настройка осуществляется не через GUI, а путем изменения json-конфигов.

WebStorm (Windows, Linux, Mac)

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

WebStorm обладает следующими преимуществами:

  1. Эффективная работа с проектами любого размера благодаря интеграции систем контроля версий, в том числе Git, Mercurial и Subversion.
  2. Увеличение качества кода и соблюдение принципов разработки через тестирование (TTD) благодаря использованию JsTestDriver от Google.
  3. LiveEdit для мгновенного просмотра изменений без перезагрузки страницы.
  4. Наличие встроенных возможностей для проверки качества кода — JSHint, JSLint, Google Closure Linter.
  5. Поддержка большого количества технологий: TypeScript, CoffeeScript, Less, Sass, Stylus, Compass, EJS, Handlebars, Mustache, Web Components, Jade, Emmet и другие.

WebStorm — находка для тех, кому нужно много различного функционала и кто готов за это платить: стоимость индивидуальной лицензии за первый год — 59 долларов, стоимость корпоративной лицензии за первый год — 129 долларов. Если же вам нужно что-то более простое, обратите внимание на другие редакторы.

Atom (Windows, Linux, Mac)

В отличие от двух предыдущих редакторов, Atom — продукт бесплатный, с открытым исходным кодом. Он собран из 50 модулей и написан на C++, JavaScript, CSS и HTML. Существует возможность добавлять собственные модули в открытый репозиторий, чтобы ими могли пользоваться другие. У него есть все те же базовые функции, что и у Sublime Text, вроде быстрого поиска нечетких совпадений в проектах и файлах, наличия мини карты, а также использование сниппетов. Он поддерживает упомянутый ранее Emmet, Autoprefixer, автоформатирование кода с помощью atom-beautify, Livereload.

Преимущества Atom по сравнению с платным Sublime Text:

  1. GUI-настройки вместо JSON-файлов.
  2. Для установки плагинов не требуется устанавливать Package Control, все делается из визуального интерфейса.

Brackets (Windows, Linux, Mac)

Это текстовый редактор для веб-разработчиков от Adobe. Он обладает открытым исходным кодом и простыми, но нужными фичами, которые присутствуют в уже упомянутых редакторах:

  1. Мгновенное отображение изменений в браузере (Chrome).
  2. Множественное выделение и редактирование.

Бонус Brackets — это хорошо задокументированное API для создания собственных плагинов, также функция Extract for Brackets (Preview), благодаря которой ускоряется процесс получения данных о цвете, шрифтах и размерах из PSD.

Недостаток Brackets — невысокая скорость работы, если установлено много плагинов.

Coda (Mac OS и iOS)

TextMate и Coda — самые популярные текстовые веб-редакторы для Mac. Мы считаем, что Coda все таки больше подходит для веб-разработчиков, чем TextMate, который задумывался как универсальный продукт. Coda — это легковесный редактор со всеми нужными функциями (вроде сворачивания блоков кода, быстрого поиска и замены, функции автозаполнения для проекта, поддержки Git и Subversion), но при этом он имеет и собственные фишки:

  1. Возможность удаленно редактировать файлы по FTP, SFTP, WebDAV или на серверах Amazon S3.
  2. Упрощенный поиск с помощью регулярных выражений благодаря wildcard-кнопкам.
  3. Предпросмотр WebKit Preview и AirPreview. Последний позволяет использовать iPad или iPhone с версией Coda для iOS для предпросмотра страниц в то время, когда вы верстаете их на своем настольном компьютере.
  4. Встроенный Terminal и редактор MySQL.

Есть у Coda и собственные плагины, но, разумеется, их не так много, как у редакторов с открытым исходным кодом. Многие хвалят плагин PHP & Web Toolkit, в котором имеется:

  1. Автоматическая проверка PHP-синтаксиса с переходом к следующей ошибке и автосохранением.
  2. Упорядочивание, переформатирование кода, написанного на HTML, CSS, JavaScript или PHP.
  3. Валидация HTML, CSS и JavaScript.
  4. Минификация JavaScript и CSS.

Стоимость лицензии Coda для одного пользователя — 99 долларов.

Как видим, функционал современных редакторов достаточно обширен, поэтому выбор зависит от используемой платформы, а также от финансовых возможностей. А какой редактор для веб-разработки предпочитаете вы?

Сотрудники студии stfalcon.com всегда следят за последними тенденциями веб-дизайна и разработки. Выбрав нас в качестве своего партнера, вы можете быть уверены, что ваш сайт будет отвечать современным стандартам веб-дизайна и разработки.

Работать с нами!

Об авторе

Front-end разработчик

Руслан отвечает за HTML, CSS и JavaScript на проектах студии.

Похожие статьи

Вернуться к списку записей К списку записей

stfalcon.com

Контент-менеджер, веб-редактор или редактор сайта?

Сегодня не просто престижно иметь свой сайт (англ. site, web-site) — совокупность веб-страниц, доступных в сети Интернет, которые объединены как по содержанию, так и навигационно. Работает формула: если вас нет в Сети — вас нет вообще.Повышается уровень информационной культуры и коммуникационных связей среди людей, которые привыкают находить любую нужную информацию в Интернете и доверять ей, хотя она не всегда первична, качественной и достоверной.

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

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

Веб-редактор. Слово «веб» (web) в переводе с английского означает «паутины» и является стержневым словом в словосочетании «World Wide Web». Употребляется в переносном смысле «сеть», «система», «инфраструктура». Под «World Wide Web» (синонимы: WWW, Web) понимают графический сервис Интернета, предназначенный для гипертекстового связывания мультимедиа документов в Сети.

Понятие «веб-редактор» имеет два значения.

1. Программа, которая создает HTML-код из специальной упрощенной разметки, позволяющей пользователю проще форматировать текст.

2. Тот, кто редактирует веб-документы, или специалист по организации работы по подготовке к публикации гипертекстовых документов.

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

Рассмотрим теперь названия с ключевым словом «контент». Ввиду того, что Большой толковый словарь украинского языка не дает определения этого слова, которое является заимствованием, обратимся к словарю английского языка: контент (англ. content) — содержание. Применительно к Интернету » контент «- это любое информационно важное (содержательное) наполнение информационного ресурса (например, сайта) — текстовые, графические, мультимедийные элементы информации, которые пользователь может загрузить на диск компьютера с соблюдением соответствующих законности, как правило, только для личного пользования . Кроме того, в понятие контент входят заголовок сайта, описание и ключевые слова, которые прописывают в дескрипторах Title, Description, Keywords.

В ИТ-сфере чаще всего этот термин используют, говоря о текстовое наполнение сайта. Весь веб-контент охраняется Законом об авторском праве, так как является продуктом интеллектуального труда и имеет своих авторов и владельцев. Кроме качества контента одним из важных критериев является его доступность. Объем контента выражается в единицах измерения количества информации (кб, Мб).Особую важность для пользователя имеет актуальность контента, его значимость в настоящее время и достоверность предоставленных данных, а также соответствие контента поставленным целям по его поиску. Количество и качество контента характеризуют степень пользовательского интереса к сайту, где он размещен.

В целом, говоря об информации в Интернете, следует употреблять термин «веб-контент». Имея в виду информационное наполнение сайта, надо применять словосочетание «контент сайта».

На сайтах по поиску работы чаще встречается название контент-менеджер-дословно управленец содержанием. Википедия дает такое определение: «термин контент-менеджер обозначает род человеческой деятельности — редактор сайта».

Приведем еще одно определение, найденное в интернете: «контент-менеджер — это физическое лицо, наполняет сайт контентом с помощью административного веб-интерфейса» (системы управления контентом сайта (англ. Content management system (CMS)). То есть о редактирование речь не идет. В то время, когда «контент-менеджмент — управление содержанием сайта, понимает под собой редактирования динамической информации (форумов, новостей, специальных предложений и т. д) и периодическую актуализацию статической информации страниц. Контент-менеджмент необходим для привлечения все большего числа потенциальных клиентов на сайт и для постоянного его улучшения как бизнес-инструмент «. Следовательно, все же ключевое слово в определении этого вида деятельности — редактирование.

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

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

Дефиниция «контент-редактор» достаточно четко характеризует деятельность лица, ответственное за наполнение сайта. Однако, в отличие от таких названий должностей, как редактор сайта (веб-проекта, Интернет-ресурса), не может употребляться как синоним главного редактора сайта.

Кроме того, главного редактора сайта еще называют главным веб-редактором Интернет-издания, администратором сайта, руководителем веб-проекта, шеф-редактором.

Редактор электронного издания — это человек, который отвечает за текстовое, графическое и звуковое наполнение сетевого издания. В обязанности редактора электронного издания входит: литературное редактирование материалов журналистов, подготовка материалов на сайт; переработка уже существующих материалов в новый; поиск соответствующих графических изображений для иллюстрации статьи и обработка их для использования в Интернете, размещение текстовой и графической информации через системы управления контентом сайта CMS; управление RSS потоками на сайте; обработка текстов комментариев пользователей сайта и модерирование форумов, участие в обсуждениях на форуме как выразителя позиции редакции.

Сам термин «редактор электронного издания» недостаточно раскрывает суть специальности, так как согласно ГОСТ 73.83-2001 электронное издание — это электронный документ (группа электронных документов), которые прошли редакционно-издательскую обработку, предназначенные для распространения в неизменном виде, имеющие выходные сведения. Однако, понятие «электронные издания» включает в себя тексты книг, журналов и газет, распространяемые в любом текстовом или другом формате, например в гипертекстовом (HTML) или одном из форматов архивации (ZIP, ARJ, RAR, WINZIP т.д.). Следовательно , не все сайты в Сети являются электронными изданиями, например, Интернет-магазины, корпоративные, информационные порталы, социальные сети, блоги и т.д., но все они требуют редакторской обработки.

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

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

* * *

Какие тайны может рассказать нам seo блог Арбайтена? Читайте и все узнаете сами!

igorosa.com

Веб-редакторы

Веб-редактор (web-редактор) — программа использующаяся для редактирования HTML документов1).

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

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

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

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

Текстовыми редакторами для Web разработки принято называть те программы, которые впитали в себя лучшие качества работы с кодом и подсветкой синтаксиса на различных языках. Для программирования приложений в интернет применяются специальные средства разработчиков, которые умеют работать с данными HTML, CSS, PHP, JavaScript.

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

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

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

Небольшие, но функциональные текстовые редакторы

Notepad++ (Windows, Linux, Mac)

Эта программа — одна из недооценённых программ с точки зрения отзывов о ней. Моё сердце раскалывается, при мысли о том, сколько полезных функции заключено в эту маленькую и быструю программу с открытым кодом, в этот некоммерческий проект.

Notepad++2) - это продукт созданный программистами для программистов. Функционал практически неограничен, но производители скромно заявляют лишь о части самых необходимых для общего числа пользователей функциях программы:

Это далеко не весь список функций, которые предлагает разработчикам notepad++. В то же время, в интернете, этот редактор позиционируется просто как замена стандартному блокноту, что в корне не верно. Несмотря на схожесть названий, это продукт совершенно иного уровня. Я долго искал универсальное решение всех задач в одном маленьком редакторе, и случайно наткнулся на эту программу. Только по скриншотам, я смог оценить её полезный функционал. И теперь я решил восполнить недостающее звено и поделиться со всеми достоверной информацией об этом продукте. Думаю, пользователи по достоинству оценят функционал этой программы, ибо он не ограничивается областью программирования. Функций так много, что разобраться в них можно далеко не с первого раза.

PsPad (Windows)

PsPad 3) — приятно порадовала универсальность данного редактора. Он поддерживает множество языков, и проверку орфографии. Он может быть использован в качестве замены стандартному блокноту, с

некоторыми дополнительными функциями. Есть версии для самых старинных версий windows, что говорит о том, что редактор существует уже давно и развивается вместе с пользователями. Что касается использования этого редактора для редактирования кода программ интернет, он оборудован примерто тем же арсеналом, что и Komodo, но отличается не столь удобным интерфейсом, на мой взгляд, от notepad++. Выглядит довольно громоздко. Весь функционал, выведенный на различных панелях, вводит в ступор при первом ознакомлении с программой:

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

PHPeditor

4)Простенький продукт, для работы с HTML и PHP.

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

Стандартные средства разработки для Unix систем и их замена

Vim (Wndows, Mac, Linux – из коробки)

Великий и ужасный Vim. На мой взгляд, устаревшая программа. Хотя и поддерживает множество функций, с использованием плагинов и надстроек. Всё это можно получить одним махом в комплекте с более простыми в освоении программами для windows и linux с оконным интерфейсом. В то же время. Для пользователей Linux — этот вариант просто необходимо освоить и научиться управлять Vim из консоли.

В сущности – это весьма удобная программа для консоли linux, которая просто незаменима у системных администраторов. Основам владения Vim учат на специальных курсах. Так что тема обсуждения этого редактора просто бесконечная. Это тема скорее разработки самого приложения для разработки, чем его функционала.

Из коробки Vim имеет очень мало встроенных функций, которые расширяются с помощью плагинов. Всего многообразия функционала Vim с применением плагинов не перечислить , поэтому просто ограничусь ссылкой на сайт, созданный специально для красноглазой молодёжи по поводу этого замечательного редактора http://vim.wikia.com

Лично мне все эти пляски с бубном не по душе. Я предпочёл бы пользоваться уже готовым продуктом для программирования, а не собирать его самостоятельно. Но, это моё мнение. Возможно в интернете, Вы найдёте уже готовые специальные сборки vim и linux, созданные именно для Вас, уже с включёнными дополнениями, но официальная версия Vim, не является специальным инструментом для разработки приложений для интернета, IMHO.

Gedit (Windows, Mac, Linux)

Gedit5) — более совершенный редактор, по сравнению с Vim, созданный специально для оконного менеджера Gnome в Linux, после перекочевавший на другие ОС. Как пользователь linux, я отказался от использования данного продукта в пользу других приложений из-за необходимости танцев над кодировками, которые то и дело не поддерживаются в этом редакторе в linux. У нормального человека просто нет времени на трату времени. Во всех приложениях Linux присутствует эта проблема, универсальных решений которой нету.

Из коробки присутствуют возможности для Web разработчиков:

Дополнительные плагины, которые можно найти в интернете:

Для пользователей windows – несколько непривычное решение, но для любителей ОС linux, это привычный инструмент.

Fraise (Mac)

Простой в использовании и не перегруженный функционалом редактор для Mac Fraise, содержит необходимые инструменты для простой разработки приложений для Web без дополнительных плагинов:

Этот редактор создан специально для Mac и является хорошей заменой стандартному текстовому редактору. Он является приложением Smultron, по этой причине он работает только в поздних версиях ОС Mac, либо, при установленном Smultron.

TextWrangler (Mac)

Текстовый редактор TextWrangler 6), для Mac, наподобие gedit для linux. Функции не богат, но в общем подойдёт для выполнения основных задач:

Обычный текстовый редактор для Unix - подобных систем.

Komodo Edit (Windows, Linux, Mac)

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

Возможности Komodo Edit7) ограничиваются в свободной версии, достаточно скромным функционалом по сравнению с Komodo IDE, но что конкретного может предложить нам Komodo Edit:

Функционал этим далеко не ограничивается, так что он удовлетворяет любым нуждам. Хотя, сама программа может показаться слегка громоздкой для пользователей Linux. Дело в том, что встроенный браузер и клиент ftp — это не совсем то, что требуется от текстового редактора. Есть программы, которые справляются с этими задачами гораздо лучше интегрированных решений. Зачем мне холодильник, если я не курю? Этот максимализм в реализации идеального текстового редактора, на мой взгляд, сигнализирует о кризисе роста возможностей Komodo.

Bluefish Editor (Windows, Linux)

Bluefish Editor8) — возможно так же существует аналог для Mac. Пожалуй единственное решение для Linux в плане разработки, которое годится для решения любых задач, но в моём случае, голубая рыбка оказалась весьма громоздкой и медленной при работе с поиском и подстановкой, да и во всех остальных случаях. В целом функционал программы аналогичен, функциям Aptana Studio. Эта программа для профессионалов. Весь её функционал не перечислить. Поэтому настройка её требует определённых навыков, которых у меня, видимо, недостаточно, чтобы сделать работу с ней комфортной. Главным недостатком этого редактора, является, на мой взгляд, медлительность и неповоротливость, на чём я стоит остановиться.

Aptana Studio (Windows, Linux, Mac)

Aptana Studio 9) — это ещё более неповоротливое универсальное чудовище, которое хорошо зарекомендовало себя в работе с кодом, для интернет. Помимо прочего, эта программа обеспечивает полный спектр сервисов для разработки в целом. Комплексная реализация, по мнению некоторых пользователей делает эту программу отпугивающей для непрофессионалов и несколько медлительной. Дополнительным плюсом использования этого монстра является наличие встроенного Web сервера, который позволяет просматривать динамические страница, с кодом выполняющимся на стороне сервера. Это придётся по вкусу программистам на PHP и других подобных языках, выполняемых на сервере. Лично меня немного утомляет постоянная необходимость держать на компьютере полноценный сервер и постоянно перемещать файлы php в его директорию. В этом плане Aptana предлагает весьма приятные условия разработки. Как позиционируется этот продукт на официальном сайте?

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

Macromedia Dreamweaver MX.

Macromedia Dreamweaver MX 10) — полный функционал этой программы не известен, наверное, даже самим разработчикам. Недаром так много сказано об этом в книгах, которые вы можете найти на прилавках книжных магазинов об этой программе. Она работает практически с любыми данными мультимедиа.

AdobeGolive и Adobe LiveMotion.

Неограниченный функционал при разработке, вёрстке, и нарезке страниц. Многие считают функционал AdobeGolive 11) недостаточным, но комплексное использование программного обеспечения Adobe вне конкуренции. Эта тема не для короткой статьи, а для многотомных трудов по Adobe.

Microsoft Front Page

Это удобная, простая в использовании, визуальная среда разработки. Не отличается чистотой кода на выходе. (В частности обожает «впиливать» в верстку

<span lang="RU">

для своих собственных коварных целей). Но в то же время она позволяет работать с различными мультимедийными данными и не требует знания особых навыков, помимо знания Ms Word. С ней практически каждый школьник справиться без труда. Может загружать готовые страницы по ftp, но как всегда у MS — через одно место. На данный момент Front Page в пакетах Microsoft Office заменен на Microsoft Expression Web и Microsoft Office SharePoint Designer.

Существует древняя (1997) и даже вроде бесплатная версия FrontPage Express 12), которая делает достаточно чистый код, который, впрочем, уже не соответствует стандартам HTML. Но если вам на скорую руку надо сверстать сложную таблицу - это именно то, что вам надо. Дистрибутива у FrontPage Express нет, работает без установки.

COFFECUP HTML Editor

Достаточно неплохой визуальный редактор, снабжённый самыми простыми функциями работы с визуальной информацией. Помимо простенького визуального представления, Coffecup Html Editor 13) способен работать с сырым кодом.

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

COFFECUP Visual Site Designer

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

Nvu

NVU 15) — тут не будет звучать лишних слов, по поводу особого функционала программы. Сразу перейду к сути. Чем понравился этот редактор мне? Мне нравится то, что он полностью управляем пользователем. Всё то же самое есть в CoffeCup, но Nvu мне понравился больше. Кроме того он работает стабильнее и быстрее. Фрагментов кода в Nvu немножечко поменьше, поэтому каких-то особенных эффектов или CSS скриптов в нём найдётся. Но кому нужно это убожество? Лично мне свободный визуальный редактор, как и большинству простых программистов нужен только для решения простеньких задач, связанных заполнением статических сайтов информацией, без необходимости лазить в код страниц. Существует так же возможность редактирования файлов на ftp, что тоже весьма полезно при работе со статиками. Как визуальный редактор для создания Веб-страниц Nvu весьма ограничен.

WYSIWYG WEB Builder

Строим сайты быстро и весело.

WYSIWYG WEB Builder16) — условно бесплатная программа, которая предоставляет пользователям весь спектр возможностей для построения сайтов, без знания специальных языков и кодов. Можно, что называется набросать готовый сайт в считанные минуты, просто кликая мышкой на понравившихся элементах и перетаскивая их на страницу сайта. Тем не менее в программе присутствуют так же инструменты для создания сложных форм, стилей и внедрения различных объектов из интернета и проекта сайта.

Вот уже вышла в свет программа для разработки сайтов по WYSIWYG технологии WYSIWYG WEB Builder 8.5.1 Программа поставляется в режиме shareware. В этой версии, по сравнению с предыдущим релизом представлено 50 дополнений и 150 новых функций, заявленных производителем. Всего в этом релизе присутствует порядка 250 готовых решений, множество готовых шаблонов и даже собственная CMS, которая работает из сети. Для тестирования сайта же, не понадобиться ничего кроме самого редактора, всё необходимое встроено в этот продукт фирмы Pablo Software Solutions.

Заявленные новинки в версии 8.5.1
Основные функции.
  1. WYSIWYG, DRAG&DROP (Визуальный редактор, перетаскивание объектов на страницу проекта из специального меню)
  2. Не требуется знаний языка разметки страниц

  3. Выходные форматы: HTML4, HTML5, XHTML, CSS3, PHP
  4. Менеджер стилей с поддержкой стандартных тэгов

  5. Flash, HTML5 мультимедиа, Youtube, Видео Flash и.т.д.

  6. Слайдшоу, прокручивающиеся меню, и прочие элементы.

  7. Удобная навигация.

Система управления контентом

CMS из этой поставки, включает в себя множество возможностей, которые мы опишем вкратце:

Поддержка HTML5/CSS3

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

Средства автоматизации сложных процессов.

Функции, которые позволяют упростить процедуру создания и размещения сайта в сети, наравне с технологиями Drag & Drop.

Web Page Maker

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

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

Описание продукта

WEB Page Maker17) –– это простой в использовании web-редактор, который позволит Вам, создавать и загружать веб-страницы на хостинг, в считанные минуты, без знания HTML. Просто выберите из меню понравившийся элемент и перетащите его в нужное место на странице. Это правда. Расположить элементы на странице можно где угодно. В основную поставку входит несколько шаблонов, с помощью которых можно будет разобраться, как настроить тот или иной объект, немного потыкав мышкой по страничке и поиграв со значениями. В поставку входит пипетка для подбора цветов, библиотека решений на JavaScript, библиотека изображений и FTP-клиент

Основные функции

Функций в программе не очень много, поэтому здесь производитель, практически дублирует информацию о продукте.

Заключение

Это адекватное описание того, на что способен этот маленький редактор. На 15 дней Вы можете попробовать его совершенно бесплатно. Если вы приобретаете платную версию, тогда Вам будет предложено ещё некоторое количество дополнительных шаблонов, эффектов и форм, но поддержки HTML5 и сложных градиентов CSS от этого не появится.

Тем не менее, некоторые функции и эффекты могут оказаться весьма полезными, при работе над готовыми страницами. Можно создать меню, добавить эффекты подсветки при наведении на некоторые элементы, создать форму, или кнопку оплаты в системе PayPal. Но, в общем, для полноценного создания сложных проектов этому программному обеспечению, ещё потребуется расти и модернизировать свой функционал, согласно более современным стандартам HTML5 и CSS3. Последняя версия Web Page Maker выглядит несколько устаревшей.

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

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

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

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

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

Для профессиональных дизайнеров подойдёт решение от Adobe в комплексе с другими программами этого производителя.

Dreamweaver хорошо подойдёт для решения задач быстрой вёрстки. Но код необходимо будет дорабатывать самостоятельно, с использованием самых простых, программ – текстовых редакторов.

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

Они различаются по назначению и функционалу. Они не решают одной единственной задачи, поэтому в каждом определённом случае, одна из программ окажется не на том месте, которое я ей определил.

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

Наверх

wiki.webimho.ru

Веб-редакторы: виды и особенности работы

Веб-редакторы — это специальные программы, которые значительно облегчают вёрстку сайтов,а также позволяют автоматизировать этот процесс.Сегодня существует множество различных веб-редакторов. Некоторые из них всего лишь осуществляют подсветку синтаксиса (выделяют служебные слова в коде различными цветами), другие предоставляют инструменты для автоматической вставки тегов и настройки атрибутов. Многие современные веб-редакторы позволяют проектировать страницу визуально, для работы с ними даже не обязательно знать язык HTML.Выбор редактора для профессиональной работы — дело непростое, каждый веб-мастер отдаёт предпочтение тем инструментам, с которыми ему удобно работать (это, кстати, касается не только веб-редактора), а все редакторы имеют свои особенности. Но некоторые из них стали популярны в среде веб-разработчиков.

Типы веб-редакторов

Редакторы для написания сайта бывают: визуальные и текстовые.Текстовые веб-редакторы нужны для создания HTML- кода «вручную». Такими редакторами, как правило, пользуются профессионалы сайтостроения. Текстовые веб-редакторы отличаются от обычного редактора, типа «Блокнот», тем, что еще имеют дополнительные функции, позволяющие удобно писать код. Например, во всех таких редакторах реализована подсветка синтаксиса (код визуально отличается от обычного текста страницы, теги и атрибуты окрашиваются в различные цвета), сочетания горячих клавиш позволяют вставлять в код готовые конструкции и специальные символы. Но сразу же посмотреть на страницу в таком редакторе не получится, для этого её придётся запустить в браузере.В визуальном редакторе веб-страницу можно «составлять» из готовых элементов, текст можно форматировать почти так, как в редакторе Word, а ссылки, картинки, таблицы и другие объекты вставлять на страницу с помощью специальных кнопок и перемещать по ней с помощью мыши. При этом редактор будет автоматически формировать код страницы. Часто такие редакторы еще называют WYSIWYGWhat You See Is What You Get )-редакторами.Выходит, что ты «рисуешь» страницу такой, какой хочешь видеть её в браузере, а редактор пишет за тебя соответствующий код. По сути, для использования визуального редактора не обязательно даже знать язык HTML и другие веб-технологии.К сожалению, первые визуальные веб-редакторы, стремясь полностью сохранить внешний вид «нарисованной» веб- странички, вставляли в код слишком много лишних конструкций, что значительно увеличивало вес страницы и делало код нечитабельным («грязным»). Поэтому до недавнего времени считалось, что такие редакторы предназначены исключительно для новичков, и они не признавались профессионалами.Однако современные WYSIWYG-редакторы позволяют не только просматривать созданный редактором HTML-код, но и работать с ним с помощью встроенного текстового веб-редактора. Для этого предназначены дополнительные режимы: режим редактирования кода и комбинированный режим.В режиме редактирования кода можно работать точно так же, как в текстовом редакторе, а визуальный режим использовать для просмотра полученной страницы (как в браузере).Если же включить комбинированный режим, то окно веб-редактора будет поделено на две части, в одной из которых отобразится исходный код страницы, а в другой — её внешний вид. При этом можно будет наблюдать, как любое действие в визуальном редакторе тут же приводит к изменению кода, и наоборот, изменения в коде моментально отражаются на странице.Любой из этих режимов позволяет одновременно работать и с кодом, и с визуальным представлением веб-страницы, что, несомненно, очень удобно. К тому же, код, генерируемый визуальными веб-редакторами, в последнее время уже не содержит множества лишних конструкций и удовлетворяет современным стандартам. В связи с этим, некоторые WYSIWYG-редакторы стали активно использовать даже профессиональные веб-мастера.

Популярные веб-редакторы

Как уже говорилось, текстовые редакторы в основном используют профессиональные веб-мастера, но каждый из них подбирает программу «под себя», поэтому и список популярных текстовых редакторов довольно внушительный. Мы не будем подробно останавливаться на всех, а рассмотрим краткую характеристику лишь одного самого популярного.

Notepad++

На первый взгляд может показаться, что этот редактор всего лишь аналог программы «Блокнот» в операционной системе Windows. Но познакомившись с ним поближе, ты обнаружишь достаточно много полезных функций, например:

К тому же эта программа обладает простым и понятным интерфейсом, она русифицирована, имеет небольшой размер и достаточно быстро работает. Ещё одним неоспоримым плюсом этого редактора является то, что он распространяется бесплатно. Но, к сожалению, Notepad++ устанавливается только под операционной системой Windows. В качестве близкой по функциям альтернативы для операционной системы Linux можно назвать редактор juffEd.

Похожее

owlweb.ru


Смотрите также