...
...

Визуальный конструктор Serif WebPlus

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

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

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

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

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

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



В чем разница между двумя видами таблицHTMLCreative Tables
Контент таблицы находится поисковыми системамиданет
Вставка скриптов для генерации динамического контентадаНет
Вращение таблицынетда*
Вращение текста в ячейкахнетда*
Сортировка контента таблицыдада
Однотонная заливка ячеек цветомдада
Градиентная заливка ячеек текстом (или заливка изображением)нетда
Прозрачностьнетда*
Деформациянетда*
Эффекты 2D/3Dнетда*
* — если вы это используете, то Creative Table сохраняется как изображение


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

Ротатор баннеров!

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

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

© Компьютерная газета

полезные ссылки
Обзор банков Кипра
Обзор банков Кипра