Google+ Followers

четверг, 14 января 2016 г.

Собираем сайт. WYSIWYG или Полный контроль?

Вот примеры двух групп сайтов.
1.
www.dvufa.ru
www.yutoff.com
2.
www.opener.su
www.ufa-argon.ru
www.alloplant.ru

Первая группа создана в визуальном редакторе XARA Web Designer 11,



вторая - в полноценном Web-редакторе, позволяющем делать с кодом все, что захочешь (и тут-же увидеть результат) - ADOBE Dreamweaver CC 2015.




WYSIWYG - редакторы (редакторы визуального моделирования) подкупают отработанными наборами шаблонов, элементы которых (например слайд-шоу) легко копируются из шаблонов на ваши странички (если того, что там уже есть, вам недостаточно).
Все быстро, если дизайн и функционал шаблона вас устраивает. Не нужно думать о том, как страничка адаптируется к мобильным устройствам - есть отдельная вкладка для формирования такой версии сайта - но только одна - под одну заданную ширину экрана. Гибко настроить размер заголовка под разные устройства пока не получается (с бубном можно, но об этом ниже).
Далее. Захотите вставить на сайт что-то, чего нет в шаблонах - уже проблема.
Поэтому - исключительно в этом редакторе можно сделать простую WEB-визитку или лэндинг (продающую страницу - прокрутил сверху вниз - купил или сразу забыл).
Прямо из XARA можно и выложить сайт на хостинг. Прописываем ftp адрес, имя и пароль - все работает нормально. Быстро сделали, заработали и забыли.
Отлично? Не совсем. Через неделю звонит заказчик - нужно пару слов изменить, SEO-оптимизацию кода сделать, да еще добавить пару разделов...
Вот тут и начинаются вилы.
Если открыть код сгенерированного сайта, становится нехорошо - каждый элемент, не только картинка, но и отдельное предложение, имеют прописанные в коде координаты по x и y, т.е. весть абсолютно сайт построен на абсолютном позиционировании. А это значит, что нигде, кроме как в этом самом редакторе даже строчку текста просто так не вставишь - каждый пиксел пространства жестко закреплен. Ладно, если вы ничего не успели туда добавить... А я попал вот в какую передрягу. Открыв "готовый" сайт в DreamWeaver, я увидел не только стили, прописанные внутри каждого абзаца, картинки или декоративного элемента, но и ужаснулся от кириллического текста - он оказался представлен кодом! Т.е. каждая буква выглядела как комбинация из четырех символов Таблицы Символов и что-то найти и изменить вначале казалось делом вообще нереальным.
Пришлось выделять текст в окне отображения сайта, копировать построчно (иначе слетит позиционирование на странице!) и вставлять обратно в код!
Потом я оптимизировал код для поисковых роботов (SEO - об этом чуть позже) - в XARA это просто невозможно. Он хоть и предлагает добавить в код любой фрагмент, но размещает его на странице сам, тупо сверху вниз. А это не всегда приемлемо. Залил сайт на сервер.
А еще через пару дней - выясняется, что доля текста сильно меньше доли картинок - нужно дописывать материалы.
Мучительный стон - и вновь борьба со встроенными стилями и абсолютным позиционированием. Да еще понадобилось поправить стили для мобильных устройств - тут уж без полноценного редактора никак не обойтись. Прописал мин и макс размеры экранов и определил, как должны выглядеть заголовки, текст, картинки и пр. элементы.

ВЫВОДЫ

1. WYSIWYG - редакторы (XARA Web Designer и иже с ним) можно использовать только для простых, не подлежащих дальнейшему редактированию и главное, не предполагающих добавления новых элементов (отсутствующих в этом редакторе), сайтах. И забудьте про SEO - это для взрослых мальчиков, знающих, как обуздать код. Максимум - сайт-визитка. Быстро, красиво - а на код лучше просто не смотреть))))
2. Повторное "доведение до ума" такого сайта в редакторе типа DreamWeaver - дело долгое и мучительное, хоть и возможное. Редактируйте текст, добавляйте элементы в том-же самом редакторе, где создавали сайт (в моем случае XARA) и заранее подготовьте заказчика, что что-то добавить просто не получится.
3. Внешняя красивость и скорость создания сайта в визуальном редакторе меркнут при при необходимости дальнейшей работы с сайтом - там вся мощь полноценных редакторов раскрывается полностью и окупает все время, затраченное на разработку сайта. Легко добавляются любые новые элементы, вставляются куски готового кода и т.д. Захотел поиск на сайте или страницу в стиле Windows METRO - нашел в Сети и добавил к сайту (как здесь, например: http://alloplant.ru/_edge/navigator_v.2/navi_metro_2.html). Добавляй разделы на ходу, временно скрывай целые блоки и показывай потом вновь - все это делается легко и просто.