Тестуємо онлайн-сервіси

3464
  • Прості візуальні Html-редактори доступні онлайн
  • Онлайн IDE редактори (інтегроване середовище розробки)
  • Візуальні Html-редактори для установки на сайт (сервер)
  • Здрастуйте, шановні читачі блогу . Є така програма, як Dreamweaver, яка являє собою прекрасний приклад WYSIWYG (візуального) HTML-редактора. Штука чудова, але має декілька недоліків. По-перше, ця програма платна, а по-друге, її потрібно буде мати встановленої на всіх комп’ютерах, де ви працюєте з кодом.

    Тестуємо онлайн-сервіси

    У зв’язку з цим, мені стало цікаво подивитися на продукти з цієї ж серії Html редакторів, але дозволяють працювати з ними онлайн. Виявилося, що є цілий ряд дуже цікавих безкоштовних рішень, на які я і вирішив звернути вашу увагу в цій статті. Якщо знаєте щось гідне уваги, то готовий розширити цей список.

    Прості візуальні Html-редактори доступні онлайн

    Звичайно ж, для роботи з кодом можна використовувати і звичайний Блокнот Windows, і в цьому буде своєрідний «вищий пілотаж». Якщо хочете трохи полегшити собі життя, то можливості Html редактора Notepad++ будуть не зайвими (крім цього він розуміє синтаксис ще кількох десятків мов програмування).

    Але все ж, набагато більш раціональним рішенням буде використання продукту, який допоможе зробити роботу швидше і візьме на себе частину рутинних операцій, щоб вам знову і знову не доводилося б «винаходити велосипед». Ну і зовсім вже здорово, якщо доступ до нього можна буде отримати з будь-якого комп’ютера.

  • Rendera — онлайн Html5 редактор з можливістю перегляду в реальних часу того, що ви творите (візуальний). Є можливість швидкої вставки Html форм, списків, таблиць та інших елементів. Дозволяє працювати також з CSS і ДжаваСкрипт кодом.
    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси
  • Dirty Markup — це не зовсім редактор, а швидше перетворювач потворного коду в добре читається. Про що я кажу? Пам’ятаєте, я якось писав, що стиснення CSS і JS коду дозволить вам трохи прискорити швидкість завантаження сайтів (для високонавантажених проектів, наприклад, це вже виливається у звільнення купи серверів).

    Так от, якщо ви захочете покопатися в такому місиві, то там не будете ніякого форматування Html і CSS коду символами пробілу, табуляцією або перенесення рядків, які роблять його читабельним. Буде, швидше за все, один рядок коду без пробілів. А щоб зробити його знову читаються (форматованим) нам і потрібен онлайн редактор Dirty Markup.

    Для прикладу візьмемо фрагмент вихідного коду сторінки видачі Гугла (все зліплено в один рядок) і шляхом копіпаста перенесемо його у вікно редактора:

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Тепер натиснемо на кнопку «Clean» і побачимо результат:

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Код став на порядок більш читабельним і зрозумілим. З’явилася можливість візуально бачити блоки і різні елементи, що нам і потрібно. Те ж саме можна зробити і з CSS, і з JS кодом теж. Відформатований код можна скопіювати в свій стаціонарний Html редактор і продовжити з ним роботу.

  • Livegap — онлайн редактор Html, CSS і Javascript коду. Дуже схожий на наведений трохи вище Rendra, але не має можливості швидкої вставки готових елементів (таблиць, списків тощо). Зате своє творіння можна буде зберегти за допомогою розташованої трохи вище кнопки, і навіть розшарити його і отримати посилання на готовий варіант:
    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси
  • PractiCode — простеньких візуальний онлайн редактор Html, CSS і Javascript. Комусь може сподобається для швидкого написання коду на чорнову.
    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси
  • HTMLedit — зовсім простенький візуальний Html-редактор. Ніякого інтерфейсу не передбачено, тільки два вікна — верхнє (де пишіть свій код) і нижню (де він візуалізується). Функціоналу мало, але зате зрозумілий і простий.
    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси
  • JSBin — позиціонується, судячи по назві, як візуальний онлайн редактор для роботи з Javascript, але, як ви можете бачити з скріншоту, дозволяє прекрасно працювати також і з Html і CSS код. Має простий і наочний інтерфейс.
    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси
  • HTML Instant — непоганий візуальний редактор Html і CSS код. Є досить-таки функціональна панель інструментів можна виділяти текст і, наприклад, оточувати його тегами абзаців або заголовків. Є можливість створення каркасу для списків і таблиць.
    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси
  • Online HTML Editor — ну і на закуску ще одне простеньке творіння на ту ж тему. Є панель інструментів і перегляду створеного шедевра (візуалізація).
    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси
  • Vulk — візуальний редактор російською мовою. Можливостей цілком достатньо для комфортної роботи з Html і немає нічого зайвого. Є інструкція на російській. Власне, його можна скачати, а потім працювати з ним в браузері, запускаючи Html-файлик з завантаженої папки.
    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси
  • Загалом-то, таких простеньких редакторів можна було знайти і побільше, але думаю, що і цього для початку цілком достатньо. Сподіваюся ще і на вас — якщо користуєтесь чимось подібним, то не застосуйте поділитися.

    Онлайн IDE редактори (інтегроване середовище розробки)

  • ShiftEdit — онлайн редактор PHP, Ruby, Java, HTML, CSS і JavaScript коду. Крім цього, в ньому є вбудована можливість отримувати доступ до сайту по FTP або SFTP, а також до хмарного сховища Dropbox і хмари Google. Є два варіанти роботи з ним — безкоштовний і платний. Відрізняється функціональними можливостями редактора, але в обох випадках спочатку доведеться зареєструватися і тільки потім вже натискати на головній кнопку «Get Started».

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Завдяки вбудованому FTP клієнту, ShiftEdit дозволяє не тільки створювати і редагувати документи в форматі PHP, HTML, CSS і JavaScript, але і публікувати, тобто завантажувати їх на сервер. Також цей онлайн редактор вміє:

    Тестуємо онлайн-сервіси«alt=»»>

  • Підсвічувати синтаксис і показувати помилки, які ви допустили при написанні коду (прямо під час його набору)
  • Дописувати код (робити автозаповнення) і показувати незакриті дужки
    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси
  • Також, як і згаданий вище Dirty Markup, цей онлайн редактор вміє форматувати доданий до нього фрагмент коду (додавати таби і переноси рядків для підвищення наочності).
  • Робити крок назад, як в будь-якому поважаючому себе дектопном редакторі
  • Є WYSIWYG-режим (візуальний), коли ви можете бачити результати внесених змін в код
  • Має місце бути розширення для браузера Гугл Хром, яке дозволить працювати в цьому редакторі і зберігати результати в режимі оффлайн — ShiftEdit.
  • Cloud9IdE — онлайн редактор HTML, Node.js, PHP, Python і Ruby, який за своїм функціоналом і можливостями дуже схожий на тільки що описаний ShiftEdit. Також є платні і безкоштовні режими роботи з ним, а ще потрібна попередня реєстрація.
    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси
  • Kodingen — ще один потужний комбайн, який підпадає під визначення онлайн середовище для розробників. Принцип роботи і функціонал схожий з ShiftEdit і Cloud9IdE. Власне, краще всього подивитися їх проморолик, ніж слухати мої розлогі міркування.
  • Codeanywhere — ще один IDE редактор, який поєднує в собі функції ФТП клієнта, і з файлами на Дропбоксе в ньому можна працювати. Загалом, все чудово — онлайн, підсвічує синтаксис десятків мов програмування і т. д. і т. п.
    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси
  • Насправді подібних онлайн середовищ розробок (хмарних IDE) на даний момент створено досить багато. Мабуть на них є попит і платні розширені режими використання таких редакторів приносять гарний прибуток власникам. Давайте я просто перерахую ще кілька подібних рішень, щоб не сильно вас втомлювати.
  • Orion — в основному для роботи з HTML і JavaScript.
  • Cloud IDE — Javascript, Ruby, Groovy, Java, HTML і ряд інших мов
  • Neutron IDE — синтаксис 40 мов, FTP Client, підключення до Google Drive і багато іншого
  • Візуальні Html-редактори для установки на сайт (сервер)

    Є ряд редакторів, які призначені для використання на своєму сайті (сервері). Вони працюють в додатках PHP (наприклад, їх можна інтегрувати в адмінку самописною CMS або у форму для додавання коментарів на сайті).

  • Cute Editor — посилання веде на сторінку з демо-версією цього візуального дива. У ньому, як і в будь-якому іншому поважаючому себе WYSIWYG редактор, оформляти веб-сторінку за допомогою панелі інструментів нагадує звичайний Ворд. Причому, є можливість прибрати частину інструментів з екрану, щоб не захаращувати його.

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Ще є можливість переходу в режим редагування Html-коду за допомогою розташованої внизу кнопки.

    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси

    Інструкцію з його використання ви знайдете на сайті розробника, правда вона на англицком.

  • CKEditor (демо-сторінка) — дуже стильний і функціональний візуальний редактор з можливістю перегляду Html коду (кнопка «Джерело»). Завантажити його можна в різних ступенях нашорошеності на цій сторінці. Там же будуть наведені посилання на інструкції по його установці.
    Тестуємо онлайн-сервісиТестуємо онлайн-сервіси
  • Удачі вам! До зустрічей на сторінках блогу