Тенденцией последних лет является использование веб-сервисов, которые хранят и редактируют файлы определенного типа и выполняют функции, ранее присущие приложениям, устанавливаемым на локальном компьютере. Для того, чтобы написать код для этого, нужно затратить немало времени. Часто бывает так, что нужно срочно проверить какую-то идею, и, возможно, сразу поделиться тем, что получилось, с другими людьми. Вот такую проблему могут решить веб-редакторы, которые работают онлайн.
В наше время создано множество полезных редакторов и интернет-сред, облачных IDE (интегрированных сред разработки), которые способны заменить привычные программы работы с кодом, например, для тестирования и отладки, редакторами с удобными интерфейсами.
Сегодня программисты, работающие над общим проектом, могут объединяться и общаться с помощью Интернета. Средства командной разработки и онлайн IDE стали использоваться чаще благодаря своим возможностям среди разработчиков. Ведь веб-редакторы, работа в которых происходит в режиме онлайн, быстро решают эти проблемы, они предоставляют удобную среду для создания кода, в которой можно сразу же начинать выполнять свои эксперименты, одновременно общаясь с другими людьми. Онлайн-платформы для веб-программистов (их часто называют «песочницами») помогают реализовывать идеи в браузере без установки ПО на компьютер, в них объединяются CSS, HTML и JavaScript, создаются и совместно используются шаблоны кодирования Такие «песочницы» позволяют быстро показать результат или поделиться ссылкой. Они особенно полезны при обучении веб-программированию, являются для него удобными вспомогательными инструментами. Множество замечательных интерактивных онлайн-курсов по веб-разработке, например HTML Academy, используют данные сервисы.
В некоторых из существующих онлайн-платформ, например, в JSFiddle, другие пользователи (например, преподаватели) могут комментировать созданный код, поэтому разработчик этого кода может получать конструктивные замечания или полезные советы по оптимизации кода, что очень удобно для изучения данного раздела.
Кроме того, очень полезной функцией подобных сервисов является то, что в них существует возможность подключения к собственным фрагментам кода дополнительных библиотек, например, jQuery, Mootools, jQuery, Glow и др. Можно добавлять к своему программному коду внешние файлы из разных источников, для этого нужно просто указывать соответствующие URL-адреса в настройках своего кода.
В современной системе образования при подготовке студентов учебных заведений подобные сервисы можно применять для быстрого и эффективного обучения HTML&CSS и JavaScript, давая возможность студентам, при выполнении заданий, создавать код и сразу же получать результат. Переход от освоенного объёмного материала к простому наглядному обычно происходит легко, поэтому для полного понимания происходящего в редакторе-помощнике лучше в начале работы разобрать основные конструкции, команды и функции программного кода. Это облегчит исправление ошибок, ускорит получение конечного результата в работе студентов.
Такие сервисы можно использовать как режиме онлайн (при наличии подключения к сети Интернет), так и в качестве простеньких «песочниц», работающих локально. Они пригодятся даже тем «разработчикам» веб-сайтов, которые не знакомы с азами веб-программирования.
Общий интерфейс таких редакторов очень похож — это окно, состоящее из нескольких частей. В одной области пишется HTML-код, в другой — CSS стили, в третьей вводится код JavaScript, а в четвертой будет выведен результат всего нашего кода, который обновляется мгновенно в живом режиме или с помощью горячих клавиш или кнопок. В первых трёх окнах автоматически производится синтаксический анализ кода, что позволяет избежать неточностей и опечаток.
С «песочницей» начинать работу совсем несложно. Чтобы создать свой первый код, нужно зайти на соответствующую страницу в браузере, например, на jsfiddle.net. После этого можно начинать создавать собственный код, выбирая соответствующее окно редактирования — HTML, CSS или JavaScript. Для выполнения готового кода необходимо нажать кнопку запуска «Run», которая находится на панели инструментов jsfiddle. Чтобы сохранить все свои работы в процессе пользования JSFiddle, необходимо зарегистрироваться в сервисе. Регистрация является бесплатной и выполняется очень быстро.
Приведем ссылки на несколько из таких «онлайн-песочниц» для работы с HTML, CSS и JS-кодом, которые можно использовать для целей обучения web-разработке:
Codepen — это площадка, предназначенная для редактирования и хранения кода на HTML, CSS и JavaScript, с возможностью просмотра готового результата в браузере. Созданным на этой площадке кодом можно делиться с другими. В окне браузера находятся несколько рабочих областей, в которых представлен результат, а также код на HTML и CSS.
JSFiddle — это очень удобная платформа, которая в настоящее время является самой популярной. В ней присутствует много настроек. Четыре панели (HTML, CSS, JavaScript и панель просмотра) позволяют объёмно работать в этой среде. Есть возможность подключать библиотеки, тестировать асинхронные (Ajax) вызовы вашего кода. Можно запускать команду JSLint, чтобы проверить качество кода, а также команду TidyUp, чтобы форматировать код.
Dabblet — эта среда сосредоточена только на HTML и CSS. Но в ней есть инновации, которых нет в других платформах. В Dabblet содержатся тоже четыре вкладки, в ней удобно следить за результатом, причем расположение вкладок всегда можно изменить, оно может быть горизонтальным, вертикальным или на весь экран. Область кода можно накладывать как удобно. Префиксы при использовании браузеров здесь можно не указывать.
CSSDeck — эта платформа умеет тестировать только CSS и HTML фрагменты. В ней есть возможность сменить фон для панели предварительного просмотра, что удобно при тестировании верстки. Панели с HTML и CSS можно спрятать, в этом случае расширится область просмотра.
jsBin — в этом инструменте есть опция предварительного просмотра в реальном времени, а также в нем можно подключать популярные библиотеки, например, MooTools или jQuery.
Tinkerbin — это относительно новый продукт; он может работать как с HTML, CSS и JavaScript, так и с такими модулями, как SASS и CoffeeScript. Tinkerbin имеет удобный интерфейс, в нем HTML, CSS и JavaScript разделены вкладками, что позволяет сосредоточиться только на одном из них.
Каждый из перечисленных инструментов содержит свои особенности, но все они имеют общие возможности:
- все они работают в браузере, специально устанавливать какие-то отдельные программы не нужно;
- обладают простотой использования и настроены под стандартные коды программ, сами они не являются полноценными средствами разработки;
- имеют окно для просмотра результата, в нём отображается то, что выполняет созданный код;
- код разработчика: обрабатывает HTML, CSS и JavaScript;
- можно выполнять сохранение и на сайте, и у себя в папке;
- большинство из них имеет совместный доступ, что позволяет делиться выполняемой работой с другими.
Интересно то, что для локального использования можно написать на JavaScript свою «песочницу» и использовать ее прямо вместе с конкретными примерами оформления: сделать страничку с заданием, оформить по образцу, включить картинку с примером и «песочницу» для написания кода прямо на страничке.
Таким образом, использование инструментов облачных технологий в образовательных учреждениях позволяет получить существенные преимущества при организации учебного процесса и значительно повысить его эффективность.