Mozilla Thimble

У новому курсі веб-дизайну на сайті Дистанційного навчання інформатики http://dystosvita.mdl2.com/ практичні вправи пропонується виконувати за допомогою сервісу Mozilla Thimble https://thimble.mozilla.org/
Зареєструвавшись на цьому ресурсі, вчитель може готувати шаблони для подальшої роботи своїх учнів. Результат роботи можна опублікувати за автоматично згенерованим посиланням, що не вимагає завантаження файлів на сервер хостингу.

 До переваг такого редактора можна віднести створення покрокових інструкцій з виконання практичної роботи чи вправи. Проте варто враховувати й недоліки — це онлайновий ресурс, тож він потребує постійного доступу до Інтернету в процесі виконання завдання, а також може залежати від налаштувань браузера і операційної системи користувача.
Розглянемо роботу із сервісом Mozilla Thimble https://thimble.mozilla.org/ докладніше.


Отже, після реєстрації можна створити заготовку, в якій міститиметься, наприклад, основний текст веб-сторінки. Учні повинні додати відповідні теги, сформувавши розмітку відповідно до завдання.

Якщо браузер відображає сторінку некоректно (як на попередньому знімку), потрібно уточнити кодування цієї сторінки:

Завдання для учня описано на закладці Tutorial у правій частині вікна:

Вчитель може створювати довільний вміст такої інструкції, використавши кнопку із зображенням + на панелі Files (ліворуч) та обравши Tutorial — з’явиться шаблон веб-документа, який можна наповнити відповідно до потреби.

Кожен проект за умовчанням містить два файли: сама веб-сторінка index.html та файл стилів style.css. Можна змінювати наявні файли або створювати додаткові, як типу html, css так і JavaScript.

Ця ж кнопка дозволяє завантажити додаткові файли, наприклад із зображеннями, які учні зможуть використати для наповнення сторінки:

Так, вчитель попередньо завантажив у проект файл bembi.jpg, тож учень, друкуючи тег img src отримує спливаючу підказку про можливість приєднання цього файлу. До речі, підказки з’являються і для самих тегів та їх атрибутів.

Результат роботи автоматично оновлюється на панелі праворуч:

Для публікації проекту використовується кнопка Publish (працює лише для зареєстрованих користувачів), потрібно заповнити тематику проекту:

Автоматично генерується посилання, за яким проект можна відкрити у мережі Інтернет (цим посиланням можна поділитися з учнями, і вони продовжать роботу з опублікованим кодом)

Завантаживши заготовку за поданою адресою, учень може створити її Ремікс (кнопка з’являється у правій верхній області вікна):

Таким чином, сервіс Mozilla Thimble дозволяє створити заготовку для подальшої роботи учнів, додати до неї покрокові інструкції та опублікувати для спільної роботи.

Познайомитись з кількома заготовками можна за посиланнями:

Вправа «Вірш»: https://d157rqmxrxj6ey.cloudfront.net/lessonmail/17610
Вправа «Бембі»: https://d157rqmxrxj6ey.cloudfront.net/lessonmail/17618