Польза и вред онлайн редактора WYSIWYG для статических сайтов

онлайн редактора WYSIWYG

Использование редактора WYSIWYG на сайте.
Как надёжнее редактировать HTML страницы.
Программы для редактирования шаблонов сайта.
Недостатки и вред визуальных редакторов.
Работа с FTP менеджером.
Советы, рекомендации.

Размещённая ниже информация больше относится к работе с шаблонами готовых дизайнерских решений, построенных на статических страницах. Не имеет отношения к созданию сайта с нуля и редактированию контента при помощи Систем Управления Контентом (CMS).

Что такое статический сайт?

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

Что такое онлайн WYSIWYG редактор?

Многие пользователи, не владеющие навыками программирования, желают иметь на своём сайте предустановленный WYSIWYG редактор, который поможет редактировать проект в реальном времени и видении посредством браузера. При этом не требуется вход по FTP, а достаточно войти в админку под личным паролем.

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

В зависимости от установленного в менеджере файлов функционала, редактирование можно осуществлять в текстовом редакторе или при помощи WYSIWYG.
Расшифровка аббревиатуры WYSIWYG: What You See Is What You Get - что видишь то и получаешь, как нельзя больше объясняет предназначение этого инструмента.
Сегодня популярны онлайн редакторы: CKeditor и Tinymce.

О пользе и вреде онлайн редактора WYSIWYG


Достоинства онлайн редактора WYSIWYG

Польза видна лишь в том, что изменения в дизайне сайта происходят в реальном времени.
WYSIWYG не требует начальных знаний HTML, CSS кода.
WYSIWYG удобен для пользователей, не желающих ознакомиться с технологией управления файлами через FTP аккаунт.

Основной недостаток и вред редактора WYSIWYG

Редактирование HTML страницы онлайн редактором (посредством браузера), не видя её кода, может нарушить структуры всей страницы. Особенно это относится к действиям, связанным с работой над изображениями (позиционировании картинок).

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

Это не относится к полноценным стационарным WYSIWYG редакторам, установленным на вашем компьютере.

онлайн редактора WYSIWYG

Работа с FTP менеджером

Гораздо удобнее и надёжнее редактировать файлы и проект в целом на домашнем компьютере и только потом загружать его на сервер.
Загрузка файлов по FTP сводится лишь к элементарным действиям:
1. Узнать данные о входе по FTP на своём хостинге, которые предоставлены в клиентской части любого хостера.
Как правило это:
- имя хоста, типа: ЛОГИН.ХОСТИНГ.ru;
- имя пользователя;
- пароль входа по FTP;
2. Установка программы FTP-менеджера на ваш компьютер, самый популярный и бесплатный FileZilla Client.
3. Настройка FTP-менеджера.

Настройками менеджера FileZilla пестрит весь интернет. Часто у каждого популярного хостинга есть своя инструкция в картинках по настройке клиента FileZilla.

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

Менеджер файлов установленный на сайте будет полезен, если вы хотите внести изменения в структуру сайта, находясь вне доступности входа по FTP, т.е. за компьютером, где не установлен FTP-клиент.


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

Это зависит от вашей профессиональной подготовленности в плане знания основ программирования.

Если вам уже сейчас знакомы указанные ниже значения кодов, то лучше отказаться от визуальных редакторов на основе WYSIWYG и сразу переходить к использованию популярных текстовых редакторов.

Структура простейшей страницы на HTML5:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/1.css" rel="stylesheet" />
</head>

<body>

<div class="container">
   <section class="background">
     <div class="main">
        <p class="text-main">Контент страницы сайта</p>
     </div>
  </section>
</div>

<script type="text/javascript" src="js/main.js"></script>
</body>

</html>

Если вы легко узнали предназначение этого кода, то вам не нужен WYSIWYG редактор, переходите к усовершенствованию своих знаний в веб-разработках на продвинутых текстовых редакторах с подсветкой кода.

Советую: уделите внимание фреймворку Bootstrap 4 (версия 4.3.1 на конец 2019 года). Его применение в построении структуры сайта поможет сделать страницы адаптивными к просмотру на любом размере монитора мобильного устройства.


Популярные текстовые редакторы с подсветкой синтаксиса кода:
- Notepad++ только для Windows (установка дополнительных продвинутых плагинов);
- Atom - новый, набравший популярность редактор. Доступны более 7000 дополнительных пакетов для расширения функциональности;
- Brackets - поддерживается все операционные системы Windows, Mac, Ubuntu, Debian...
- JetBrains PhpStorm (IDE), если собираетесь повышать свой уровень до совершенства и знания всех языков программирования, то сразу привыкайте к этому редактору.

Редактор Notepad ++ в работе

Текстовый редактор NotePad++

Популярные визуальные WYSIWYG редакторы:
Microsoft SharePoint Designer - наиболее простой, удобный для быстрого решения задач.
WYSIWYG Web Builder - для создания больших полноценных сайтов, требует изучения.
Adobe Dreamweaver - наиболее продвинутый, требует освоения и навыков.

Их очень много, можете поискать в сети необходимый для вашего уровня знаний и навыков.
Помните, что по мере освоения HTML и CSS кодов, вы откажетесь от использования WYSIWYG редакторов и перейдёте на продвинутые текстовые редакторы.
Задумайтесь: стоит ли терять время на освоение визуальных программ по созданию сайтов? На это может уйти не один месяц.
Драгоценное время лучше потратить на ознакомление с основными языками веб-программирования при создании сайтов: HTML5, CSS3 - язык разметки, PHP и jаvascript - языки сценариев.

Рекомендации:

1. Если вы используете файловый менеджер с установленным редактором файлов, то при редактировании HTML страниц рекомендую использовать лишь текстовый редактор. Применение онлайн редактора WYSIWYG может навредить исходному коду страницы.

2. Редактирование HTML документов лучше осуществлять на домашнем компьютере, используя полноценный WYSIWYG или текстовый редакторы. После этого, используя онлайн файловый менеджер установленный на сайте загрузить (заменить) отредактированный файл.
Загрузку файлов, конечно, лучше производить через FTP менеджер.

Автор: Saah | Просмотров: 34 | 28-11-2019,Чт, 15:02  

Добавить свой комментарий:

@
Похожие публикации