К Serif WebPlus многие специалисты относятся не совсем серьезно. Ну, конечно, как же это современный сайт на статических HTML-страницах!? А между тем, в ряде случаев использование этого визуального конструктора вполне оправдано. Например, в нем можно быстро делать наброски дизайна и проверять сразу же на месте его функциональность. Во-вторых, WebPlus понятен пользователям, то есть прекрасно  решены вопросы обновления: человек создает или меняет страницу, нажимает кнопку «Publish to Web» и все изменения загружаются прямо на сайт (главное, специально для него настроить подключение к FTP-серверу). При этом пользователь не должен знать HTML как таковой, и тем более заботиться о специальной обработке изображений и сохранении оных на сервер. 

То есть, Serif WebPlus — это определенного рода CMS (системами управления сайтами). Единственный минус по сравнению с более мощными конкурирующими системами выражен в самой технологии — используется фактически статический HTML с возможностью включения блоков JavaScript (хотя можно использовать скриптовые вставки и на других языках). То есть, никакой ключевой базы данных ресурса как таковой не используется, за исключением варианта Интернет-магазинов, где в качестве основы можно применять dbase или XLS-файлы. 

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

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

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

Итак…

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

 

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

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

В последней версии продукта реализована плотная интеграция с популярными веб-сервисами от Google (Maps, Adsense, Analytics), YouTube, помимо этого имеется весь необходимый арсенал интерактивных элементов для iTunes, RSS, E-Commerce и т.п.

Если у вас нет времени на создание меню, вы просто верстаете сами страницы, расставляете их в определенной иерархии, после чего, WеbPlus автоматически создаст современное меню ресурса, в котором сразу же прописываются ссылки. Его можно изменять и редактировать. В последней версии добавлены навигационные бары на Flash. Пользователи лицензионной версии программы получают бесплатный хостинг у ее владельцев, хотя размещать сайт можно по собственному усмотрению где угодно. Поскольку речь идет главным образом об HTML и JavaScript (хотя можно использовать сриптовые вставки и на других языках), то проблем с размещением вовсе нет. 

 

В последней версии добавлены инструменты SEO, то есть, продвижения в поисковых системах Google и Yahoo!. 

Сам файл проекта Serif WebPlus, в рамках которого вы делаете сайт, подразумевает особую структуру хранения данных, из которой потом(!) генерируются html-страницы, преобразуются и оптимизируются изображения и так далее. То есть, на самом деле вы работаете не с HTML, а с визуальными представлениями будущих страниц. 

Как происходит опубликование уже преобразованного под веб материала? Есть два варианта: экспорт сайта или его отдельных страниц на жесткий диск компьютера и экспорт на FTP-сервер.

Сохранение происходит следующим образом: в корневой папке размещаются все html-страницы ресурса, также формируются две папки — wpimages (в нее помещаются все изображения) и wpscripts (служебные скрипты). 

В плане изображений программа практически всеядна, то есть понимает около 20 форматов графических файлов, включая такие специфические, такие как, например, Adobe PCD. После их непосредственной вставки на страницы в настройках сайта (меню File —> Site Properties) имеет смысл посетить закладку Pictures, в которой вы:

Теперь пометка для тех, кто больше разбирается в технологиях: если вы хотите еще больше оптимизировать ресурс в плане скорости загрузки, то имеет смысл изначально сохранить весь сайт на жесткий диск, после чего зайти в папку «wpimages» и просмотреть наиболее большие по размерам файлы. Затем, если есть возможность их ужать без видимой потери качества, делаете это, сохраняете в один из трех форматов GIF, JPEG и PNG. После открываете файл проекта и вставляете более сжатое изображение как есть вместо того, что было раньше. Программа больше не будет его конвертировать, и все последующие экспорты пройдут как нужно. 

Как уже было отмечено, если вы используете в рамках графические объекты (прямоугольники, окружности и т.п.) с градиентной заливкой, 2D или 3D-эффектами, они также после автоматически преобразуются в изображения, причем иногда программа их пытается совместить (склеить) между собой в единые файлы изображений. На самом деле это не столь критично, но об этом нужно просто знать — это во-первых. Во-вторых, выставив среднее качество компрессии изображений при экспорте, не злоупотребляйте градиентными заливками.   

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

Дело в том, что при копиравании/вставке таким образом вы вместе с полезной информацией размещаете очень много мусора (информация о шрифтах, отступах, параграфах и т.п.). Если говорить о качественном варианте, то имеет смысл все делать отдельно, а именно, текст вставлять как Unformatted Unicode Text через Edit -> Paste Special. В принципе, для скорости можно предусмотреть и промежуточный вариант с использованием программы Блокнот. То есть, текст сначала копируется из Word в нее, а потом из нее помещается в WebPlus. Данный вариант выгоден и тем, что, например, текстовый блок страницы может включать несколько фрагментов с различными вариантами верстки (цветом текста, его размером и т.п.). При выделении такого фрагмента и замены его вставкой другого текста его настройки сохраняются. 

Блок таблиц, предусмотренный в рамках WebPlus, сделан очень хорошо и удобно. В принципе, работа с ними очень сильно напоминает Word. Правда есть одна тонкость: в программе предусмотрено два типа: HTML и обычные (Creative Tables). В чем разница между ними? Ключевая в том, что обычные могут сохраняться и просто в виде изображений, что происходит при определенных условиях. Подробности отображены в таблице. Хотя стоит отметить и тот момент, что в списке HTML-таблиц есть интерактивные варианты, в которых имеется подсветка ячеек, над которыми находится указатель мыши.  

   

Изображения также целесообразнее помещать отдельным образом, а не копировать из Word.

По этой теме задавалось сразу несколько вопросов. И действительно, отдельного модуля ротатора баннеров в программе не предусмотрено. Но этот вопрос легко решаем. В меню инструментов нажимаем кнопку Insert HTML Code, после чего курсором мыши рисуем прямо на странице контур размещения элемента в том месте, где он должен быть. После этой операции открывается окно Attach HTML Code, куда между тегами <body> и </body> вносим наш скрипт.

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

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

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

А  в целом, если у вас чего-то не хватает и нужно реализовать — пользуйтесь скриптами JavaScript, которых в Интернете можно найти много и на любой вкус.  

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

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

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

Все остальные настройки лучше указать самостоятельно. Они производятся в двух основных пунктах. Первый — Site Properties. Здесь главным ключевым моментом является изменение в закладке Options кодировки с UTF-8, стоящей по умолчанию на Windows-1251, если речь идет о русскоязычном ресурсе (также стоит отметить, что шрифты на сайте лучше использовать стандартные, которые имеются у большинства пользователей, — это Arial, Verdana, Tahoma, Times New Roman и т.п.). После этого в закладке Search прописываются метатеги, а в Search Engine вы делаете настройки для формирования ключевых файлов robot.txt и sitemap.xml. Думается, что вы знаете, о чем речь.

При этом учитывается тот момент, что вы уже настроили параметры экспорта/конвертации изображений в закладке Pictures, что мы описывали выше.

Далее нажимаете кнопку Publish to Web (или вызываете из главного меню File->Publish Site->Publish to Web). Здесь мы настраиваем подключение к FTP-серверу (адрес, логин, пароль), после объясняем разницу между размещением/обновлением конкретной страницы и сайта целиком, что очень не сложно для понимания. 

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

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

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