Конспект лекций по теме "HTML-редакторы и универсальные редакторы Web-страниц"

2.4 HTML-редакторы и универсальные редакторы Web-страниц.

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

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

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

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

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

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

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

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

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

Подсветка и сегментация синтаксиса

Пользовательские настройки подсветки и сегментации программного кода

Совместимые с языком Perl регулярные выражения для поиска и замены кода

Опциональный интерфейс программы: свёртывание, наличие вкладок с кнопкой закрыть, панель вкладок, вертикальные вкладки и вертикальный список документов

Карта документов

Автозаполнение и выпадающий список параметров функций.

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

Многооконный интерфейс с вкладками

Функция открытия нескольких вкладок в одном окне одновременно.

WYSIWYG (Печать)

Приближение и удаление

Многоязыковой интерфейс

Закладки

Запись и воспроизведение макросов

Запуск программы с аргументами

Поддержка проверки правописания на множестве языков с помощью Aspel

Проверка html кода tidy

Поиск и замена сразу в группе файлов.

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

PsPad (Windows)

PsPad 3- Весь функционал, выведенный на различных панелях, вводит в ступор при первом ознакомлении с программой:

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

Программа имеет возможность автозаполнения.

В арсенале есть множество готовых шаблонов для множества различных языков.

Есть функции автозамены.

Есть запись макросов.

Окно проектов, закладок в интернете и встроенный FTP клиент.

Многооконный интерфейс с возможностью удобной группировки окон.

Пользовательская подсветка синтаксиса.

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

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

PHPeditor

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

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

Программа имеет возможность подсветки синтаксиса HTML, PHP

Есть инспектор кода HTML и PHP

Включён встроенный сервер, для проверки серверных приложений.

Многовкладочный интерфейс.

Функции вставки

Поддержка макросов

Запись шаблонов кода с небольшим первоначальным набором

В сущности этого достаточно для решения простых задач вёрстки в больших объёмах. Стандартные средства разработки для Unix систем и их замена

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

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

Из коробки Vim имеет очень мало встроенных функций, которые расширяются с помощью плагинов. Gedit (Windows, Mac, Linux)

Gedit5) — более совершенный редактор, по сравнению с Vim, созданный специально для оконного менеджера Gnome в Linux, после перекочевавший на другие ОС. Из коробки присутствуют возможности для Web разработчиков:

Подсветка синтаксиса

Браузер

Красная строка

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

Закрытие тегов автоматически.

Инспектор кода HTML

Генератор основного текста

Регулярные выражения для поиска и автозамены

Интеграция передачи кода в браузер

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

Fraise (Mac)

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

Подсветка синтаксиса

Удобная работа с блоками

Поиск и замена

Блоки для быстрого ввода тегов HTML и CSS

Встроенный браузер с функцией автоматического обновления при замене стилей

Закрытие тэгов нажатием одной кнопки.

Инспектор HTML

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

TextWrangler (Mac)

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

Подсветка CSS, JavaScript, HTML синтаксиса

Поиск и замена по регулярным выражениям

Удобная навигация в коде

Встроенные функции работы по FTP

AppleScript

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

Профессиональные среды разработки и их ответвления

Komodo Edit (Windows, Linux, Mac)

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

Поддержка подсветки синтаксиса на большинстве языков программирования для интернета

Автозаполнение и закрытие тегов

Файловый менеджер и менеджер проектов.

FTP – клиент, работающий по разным протоколам.

Встроенный браузер для просмотра результатов работы.

Функции поиска и замены с регулярными выражениями.

Многооконный интерфейс с вкладками

Проверка html кода tidy

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

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

Aptana Studio (Windows, Linux, Mac)

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

Менеджер проектов с клиентом для работы по протоколам ftp.

Встроенный дебагер, для инспектирования кода html, JavaScript, Rubby&Rails

Поддержка Git (распределённое управление версиями), которая может потребоваться профессиональным программистам.

Поддерживается встроенный терминал.

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

Визуальные редакторы для разработчиков WEB

Перейдём к освоению самых удобных и полезных редакторов визуального типа. Это слишком обширная сфера, чтобы заниматься дополнительной рекламой платного программного обеспечения. 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) способен работать с сырым кодом.

В программе присутствует множество готовых блоков с html кодом, который можно использовать на своё усмотрение, а так же несколько шаблонов кода для CSS, в которые можно подставлять свои параметры. Шаблонов довольно много.

Из коробки присутствует менеджер проектов

Можно работать с сайтами по ftp

Полный функционал обычных текстовых редакторов для интернет-разработки

Возможность просмотра фрагментов кода параллельно с отображением результата работы данного отрезка.

В целом реализация неплохая, присутствует встроенный браузер. Что не понравилось в этой программ, 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

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

Встроенная система управления контентом (CMS)

Карусель

Менеджер тем с поддержкой JQuery

Новые функции навигации и т.д.

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

WYSIWYG, DRAG&DROP (Визуальный редактор, перетаскивание объектов на страницу проекта из специального меню)

Не требуется знаний языка разметки страниц

Выходные форматы: HTML4, HTML5, XHTML, CSS3, PHP

Менеджер стилей с поддержкой стандартных тэгов

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

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

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

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

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

Панель администратора.

Встроенная поддержка популярных текстовых редакторов для CMS

Поддержка дополнительных встраиваемых модулей

Раздельное меню для разных объектов в проекте

Встроенные поисковые функции для поиска онлайн контента

CMS работает с применением технологии AJAX. Это облегчает навигацию внутри проекта

CMS содержит возможность представления страниц в виде эскизов

Возможность встраивать в проект внешние страницы

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

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

Поддержка HTML5, с оптимизацией кода на выходе.

Поддержка мультимедийных средств HTML5, включая коды встраивания видео с Youtube

Новые HTML5 формы, с новыми опциями и т.д.

Поддержка встраивания графических решений на основе тэгов подобным <svg> и <canvas>

Поддержка CSS3 font face

Прозрачность, тени, размеры границ

Поддержка градиентов

Создание меню средствами CSS

Фотогалерея средствами CSS

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

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

Публикация на любом хостинге в один клик

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

Разнообразные функции работы с изображениями, такие как вращение, тени, формы, рамки и т.д.

Встроенная поддержка технологии JQuery, для работы с вашими проектами

Совместимый с google генератор карт сайтов / коды элементов платёжной системы PayPal / коды системы авторизации, / защита страниц паролями.

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

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

Поддержка встраивания мультимедийных объектов популярных форматов.

Более чем 250 готовых решений для Вашего сайта, которые легко применить к проекту.

Web Page Maker

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

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

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

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

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

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

WYSIWYG интерфейс, без необходимости html кодинга.

Перетаскивание объектов с функцией Drag&Drop

Создание многостраничных сайтов, с удобными инструментами массового редактирования страниц

Возможность импорта сторонних проектов, для последующего редактирования в стиле WYSIWYG

Возможность использования CSS, для задания настроек стиля текста

Множество функций для создания фотогалерей, встраивания различных объектов, эффектов, таблиц и форм, JavaScript

Готовые шаблоны сайтов

Просмотр готовых страниц в браузере по умолчанию в один клик

Публикация сайта по FTP в один клик

Заключение

Это адекватное описание того, на что способен этот маленький редактор.

Скачано с www.znanio.ru