2.2 Обзор и сравнительный анализ html-редакторов
2.2.1 Основные html-редакторы
Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page 2006. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad). Текстовые редакторы, возможно, использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует «подсветка» текста, в общем, работать с ними может только профессионал, знающий язык HTML.
Рассмотрим визуальный HTML-редактор DreamWeaver. Этим программным продуктом может пользоваться даже тот, кто плохо, или почти не знает язык HTML. DreamWeaver содержит все, что необходимо как для визуальной компоновки web-страниц, так и для работы с HTML-кодом. Интуитивный интерфейс DreamWeaver настолько прост, что даже начинающий дизайнер сможет быстро создать профессиональный Web-сайт. Непосредственно в Dreamweaver можно создавать анимации в формате Macromedia Flash, использовать данные из Microsoft Office, легко импортировать rollover-графику, меню и кнопки из Fireworks. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области. В последнее время она начала выпускать версию за версией данного продукта, тем самым все, более совершенствуя его. DreamWeaver-4,-7,-8, CS3. CC. Причем в каждой новой версии добавляется всё больше и больше функциональных возможностей, не по одной и не по две, а чуть ли не десятками. Многие разработчики Web-сайтов считают DreamWeaver наиболее удобным HTML-редактором как для начинающих Web-дизайнеров, так и для опытных программистов.
Одна из последних версий HTML-редактора компании Adobe –DreamWeaver CC, который относится к категории WYSIWYG-редакторов (т.е.What You See Is What You Get), и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и упрощается преимущество технологии WYSIWYG – что вижу, то и получаю).
DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции «запись последовательности команд» вы можете записывать последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит всё в той же последовательности.
Macromedia DreamWeaver – профессиональный редактор HTML для визуального создания и управления сайтами различной сложности и страницами сети Internet. Нравится ли вам вручную писать код HTML или вы предпочитаете работать в визуальной среде, DreamWeaver облегчает эту работу и обеспечивает полезными инструментами и средствами, чтобы сделать свои собственные проекты непревзойденными. DreamWeaver включает в себя много инструментов и средств для редактирования и создания профессионального сайта: HTML, CSS, JavaScript, редакторы кода (просмотр кода и инспектор кода), что позволяет редактировать различные текстовые документы, которые поддерживаются в DreamWeaver. Также вы можно настроить DreamWeaver, чтобы он наводил порядок и переформатировал HTML, как вы этого хотите.
Возможность визуального редактирования в DreamWeaver также позволяет быстро создавать или менять дизайн проекта без написания кода. DreamWeaver относится к так называемым «визуальным» редакторам, т.е. сразу можно видеть на экране (хотя бы приблизительно) результат своей работы. При этом он распространяет полный доступ к источнику кода и не вставляет в него ничего лишнего, как это делает, например, FrontPage. Таким образом, можно создавать свою страничку и параллельно изучать HTML, заглядывая в источник. Можно на живом примере убедиться, что HTML – это просто. Простота обращения с редактором DreamWeaver заключается в том, что возможно рассмотреть все централизованные элементы и перетащить их с удобной панели непосредственно в документ.
DreamWeaver полностью настраиваемый. Можно использовать DreamWeaver, чтобы создавать свои собственные объекты и команды, изменять «горячие» клавиши и расширять возможности DreamWeaver новыми свойствами, инспекторами свойств и новыми отчетами о сайте [53].
Для того чтобы разместить страничку, содержащую приличное количество анимации, звука и удивительных способов интерактивности в файл порядка 100 Кбайт, делать так, чтобы эта страница работала одинаково компания Macromedia решила большинство проблем совместимости и производительности, выпустив Flash, который к сегодняшнему дню весьма эволюционировал и является полноценной частью инструментов-техник Web-дизайна.
Существуют plug-in'ы (подключаемые модули), которые встраиваются в браузер, и служат для просмотра Flash страниц. Называются они Flash Player. И существует программа Flash, с помощью которой эти страницы создаются.
В пользу Flash приведем его основные достоинства:
– маленький размер получающихся файлов и, соответственно, более быстрая загрузка из сети. Flash использует векторный формат изображений и сжимает растровые и звуковые файлы, (которые также могут использоваться в страницах Flash), что очень положительно влияет на уменьшение размера страницы и время ее скачивания;
– устранение проблем совместимости между браузерами;
– мощный событийно-управляемый язык. В Flash используется специальный язык, при помощи которого можно создавать «интеллект» для своей страницы – это почти полноценный язык программирования, с поддержкой условий, циклов, массивов, функций и классов, которые можно наследовать;
– Flash имеет автоматическую поддержку anti-aliasing (сглаживание контуров с помощью смешения соседних цветов). В результате даже простая линия или кружочек, нарисованные во Flash, выглядят приятно для глаз;
– создавать страницы во Flash под силу любому желающему, открывается весь простор для фантазии, предоставляемый Flash;
– Flash становится стандартом де-факто. В случаях, где необходима широкая интерактивность, графика, звук, и маленький размер, Flash незаменим.
На сегодняшний день Flash Player используют 222 миллиона человек, и каждый день его скачивает еще 1.4 миллиона. По данным Macromedia это позволяет 90% пользователям Сети просматривать страницы с Flash содержимым.
На сегодняшний день Adobe Flash (ранее Macromedia Flash) позволяет работать с векторной, растровой и с трёхмерной графикой используя при этомграфический процессор, а также поддерживает двунаправленную потоковую трансляцию аудио и видео. Для КПКи других мобильных устройств выпущена специальная «облегчённая» версия платформы Flash Lite, функциональность которой ограничена в расчёте на возможности мобильных устройств и их операционных систем. Последняя версия Adobe Flash Player 17.
Одним из первых редакторов HTML является FrontPage. Редактор входил в программный пакет MS Office. Данное приложение при разработке страниц веб-узла пользуется html-движком Trident, который лежит в основе браузера Internet Explorer. В браузерах, использующих другие движки, например Gecko, страницы, созданные с помощью FrontPage, могут отображаться по-другому.
Программа обладает широким спектром возможностей, в частности, может автоматически отправлять изменения, внесённые разработчиком сайта в исходные тексты, в режиме реального времени.
Для программы выявлены следующие недостатки: избыточность и некорректность кода, ориентация на технологии IIS и IE и т.п. В Microsoft Office 2007 программа FrontPage была заменена на Microsoft Expression Web. В Microsoft Office 2010 программа FrontPage была заменена на Microsoft Office SharePoint Designer.
Expression Web использует свой, основанный на стандартах, движок ренжеринга, отличающийся от движка Trident, на котором основан браузер Internet Explorer (и который менее совместим с общими стандартами) и позволяет создавать интернет-страницы с интеграцией XML, CSS 2.1, ASP.NET 3.5, XHTML, XSLT и JavaScript непосредственно в сайты. Вторая версия, Expression Web 2, имеет полную поддержку PHP и Silverlight. Для работы программы необходим NET Framework 2.0. Microsoft Expression Web обеспечивает возможность устанавливать дополнения от сторонних разработчиков, расширяя способности Expression Web.
Microsoft Office SharePoint Designer – WYSIWYG HTML-редактор и программа для веб-дизайна от компании Microsoft, является одним из компонентов пакета Microsoft Office 2007, однако не включен ни в один из комплектов офиса (устанавливается отдельно). Переход в названии от FrontPage к SharePoint Designer связан с его назначением: созданием и дизайном веб-сайтов. SharePoint Designer имеет один и тот же движок отрисовки HTML, что и Microsoft Expression Web, и не полагается на движок Trident, который менее совместим с общими стандартами[1].
В 2009 году Microsoft Office SharePoint Designer 2007 стал распространяться бесплатно для всех желающих на официальном сайте Microsoft Office [54].
2.2.2 WebSite X5
Для создания сайта «Творческая самореализация как фактор адаптации личности школьника» нами был выбран визуальный редактор WebSite X5. Его разработчиком является Incomedia.
Большинство визуальных редакторов походят друг на друга. В этом есть свои плюсы, ведь разобравшись с одной из таких программ, можно чувствовать себя уверенно, если решить попробовать другую.
В программе WebSite X5 реализован немного иной подход к созданию сайта, благодаря чему многие вопросы отпадают сами собой. Работа приложения построена по принципу пошагового мастера, благодаря чему начинающий пользователь может быть уверен в том, что он не пропустил ничего важного (рисунок 1).
Рисунок 1 – Стартовая страница редактора WebSite X5
Несмотря на то, что мастер проводит через все этапы создания проекта, пользователь может при желании «перескакивать» через некоторые этапы, выбирая в боковом меню те действия, которые он хочет выполнить в настоящий момент. Всего этапов пять.
На первом указываются общие настройки. Так, тут вводится название сайта, автор и язык, подбираются ключевые слова, загружается Favicon, выбирается тип меню (горизонтальное или вертикальное), подбирается подходящее оформление, задается внешний вид верхней и нижней части страниц сайта.
На втором этапе предлагается создать карту сайта, то есть продумать его структуру. Используя кнопки «копировать» и «вставить» на панели инструментов, можно создавать новые страницы на основе уже имеющихся. Тут можно определить, какие страницы ресурса будут скрытыми, указать частоту обновления для каждой страницы (рисунок 2).
Рисунок 2 – Создание карты сайта
Двойной щелчок по названию страницы переносит на следующий этап работы над сайтом, и тут уже можно будет заняться непосредственно его содержимым. По умолчанию страница разделена на четыре блока, в каждый из которых можно добавить объект: текст, графический файл, слайд-шоу, таблицу, флеш-анимацию, мультимедиа файл и т.д. При желании число блоков на странице можно увеличить или уменьшить. Поместив объект на страницу, нужно определить его настройки, например, указать путь к графическому файлу, набрать текст и т.д. Все эти операции нужно будет проделать для каждой страницы.
Рисунок 3 – Создание страниц
На четвертом этапе WebSite X5 предложит указать некоторые дополнительные настройки, например, определить внешний вид вводной страницы, задать параметры отображения flash-рекламы, добавить на сайт блог и ленту RSS-новостей.
Рисунок 4 – Дополнительные настройки
Среди предлагаемых возможностей есть и такой элемент как «Корзина для электронной торговли». Используя его, можно быстро создать собственный интернет-магазин. Перейдя к его настройкам, можно быстро создать категории товаров, определить условия доставки, выбрать варианты оплаты, вставить лицензионное соглашение, настроить внешний вид элементов магазина.
Наконец, на последнем этапе выполняется экспорт проекта (рисунок 5). Готовый сайт можно сохранить на жесткий диск или же сразу загрузить на FTP-сервер. Кроме этого, программа дает возможность сохранить файлы проекта, чтобы перенести их на другой компьютер. Отметим, что создаваемый проект можно сохранить на любом этапе в собственном формате программы.
Рисунок 5 – Экспорт сайта
Пожалуй, единственным неудобством при работе с WebSite X5 является невозможность предварительного просмотра страниц в браузере. Если нужно увидеть, как будет выглядеть сайт, можно использовать функцию «Тест», однако на генерацию проекта требуется некоторое время. Кроме того, программа генерирует страницы в собственном просмотрщике, созданном на движке Internet Explorer.