ITCS - Ответы на вопросы по Serif WebPlus - WEB
Сегодня: Четверг, 08.12.2016, 01:07 (МСК)| Здравствуйте, Гость| Мой профиль | Регистрация | Вход | RSS

Популярно об ИИ.
Третий сезон

Спецэффекты в Cinema4D

Роботы и экзоскелеты

Наушники. Как выбирать?

Программы — виртуальные гитаристы
Главная » WEB

Ответы на вопросы по Serif WebPlus

29.01.2011


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

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

В чем разница между двумя видами таблиц

HTML

Creative Tables

Контент таблицы находится поисковыми системами

да

нет

Вставка скриптов для генерации динамического контента

да

Нет

Вращение таблицы

нет

да*

Вращение текста в ячейках

нет

да*

Сортировка контента табицы

да

да

Однотонная заливка ячеек цветом

да

да

Градиентная заливка ячеек текстом (или заливка изображением)

нет

да

Прозрачность

нет

да*

Деформация

нет

да*

Эффекты 2D/3D

нет

да*

* — если вы это используете, то Creative Table сохраняется как изображение

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

Пример сверстанной интерактивной HTML-таблицы с подсветкой ячеек

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


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

<script>
var banner = new Array()
<!-- Первый баннер -->
banner[0] = new Array()
banner[0][0] = "http://www.mysite.com/banner01.gif"
banner[0][1] = "http://www.ya.ru"
banner[0][2] = "Поиск от Yandex"
<!-- Конец первого баннера -->
<!-- Второй баннер -->
banner[1] = new Array()
banner[1][0] = " http://www.mysite.com/banner02.gif "
banner[1][1] = "http://www.google.com"
banner[1][2] = "Поиск от Google"
<!-- Конец второго баннера -->
n = Math.random()*1
nb = Math.round(n)
document.write('<a href=' + banner[nb][1] + ' target=_blank>')
document.write('<img src=' + banner[nb][0] + ' alt=' + banner[nb][2] + ' border=0 ' + ' width=88 ' + ' height=31 > </a>')
</script>

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



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








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







Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Ассоциация боевых роботов
Рекомендуем...
Новости

Разделы

Опросы

Какой язык программирования вы считаете наиболее актуальным сегодня?
Всего ответов: 308

Друзья

3D-кино






Найти на сайте:








Об авторе       Контакты      Вопрос-ответ        Хостинг от uCoz