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

К 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, в которой вы: 

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

. Выбираете выходной формат всех остальных изображений ресурса. То есть те, которые будут сформированы при опубликовании. На выбор дается опять же три варианта: GIF, JPEG и PNG. Здесь вы можете указать качество компрессии от 5 (самые качественные) до 100 (самые ужатые). При этом важно понимать, что если вы использовали в создании ресурса различные графические объекты (прямоугольники, окружности и т.п.), то они также преобразуются в файлы изображений. 

. Отдельно настраиваются опции для PNG, это касается в первую очередь прозрачности. 

. По умолчанию программа сохраняет изображения со своими специфическими названиями, которые им присваивает. Если вы хотите сохранить оригинальные имена файлов, то сделайте активным пункт (Use original names of graphic files). В этом плане нужно быть аккуратным, потому как все изображения помещаются в одну папку, и может быть пересечение имен. 

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

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

Добавление скрипта JavaScript 

Важно! Работа с текстом и таблицами 

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

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

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

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 данный конструктор один из самых интересных. На его базе можно производить очень качественные продукты, несколько примеров, сделанных автором этих строк, представлено на скриншотах.