Космическая верстка что это

Творчество и самовыражение или Что можно сделать на курсе «Космическая верстка»?

Учебный год в самом разгаре, и некоторые ученики «Космической верстки» завершают или уже завершили работу над авторскими проектами сайтов. Для нас большая радость видеть результат работы ребят, ведь это один из важнейших показателей успешной реализации курса.

Недавно своими итоговыми работами нас порадовали ученики Калиниченко Надежды Алексеевны, семиклассники петербургской ГБОУ СОШ №18. Проекты получились такими интересными, что мы спешим показать их и вам:

Про книги и библиотеки

А вы знаете, что одно из самых ранних упоминаний об использовании закладок относится к 1584 году? Это была шелковая закладка с каймой в качестве подарка королеве Елизавете I! Больше интересных фактов о книгах и библиотеках вы найдете на этом сайте!

Спешите узнать подробности о пяти самых крупных библиотеках мира и 12 любопытных фактов о них.

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

Про мопсов
Про финских гончих
И про стрижки собак

Благодаря сразу нескольким проектам, посвященным собакам, вы:

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

О голубых ара

Вы узнаете все о голубом ара – попугае, который относится к редчайшим и исчезнувшим из дикой природы птицам нашей планеты. Не упустите возможность полюбоваться фотографиями этих красавцев!

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

О хомяках
И о морских свинках

На этих сайтах вас ждут удивительные факты о милейших хомячках и морских свинках. У вас также будет возможность познакомиться с Книгой рекордов хомяков: взглянуть на самого маленького (4 см!) и самого большого (50-60 кг!) грызуна!

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

О персидской кошке

Ну как же без котиков? Проект посвящен любимцам европейской знати 19-го века, царственным и горделивым персидским кошкам. Все о характере, уходе и условиях содержания этих пушистых цариц читайте здесь.

Уже задумались о том, чтобы завести себе котика? ^^

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

Про сериалы

Се-ри-ааа-лы! Сразу несколько сайтов посвящены именно им: нашумевшему «Ходу королевы» и одному из его актеров Томасу Броди-Сангстеру, не менее известному сериалу «Очень странные дела» про подростков, пытающихся разобраться в таинственных событиях в своем городке, и сериалу «Великолепный век».

Из проектов участников «Космической верстки» вы также можете узнать больше о змеях, летучих мышах, пришельцах и их космическом корабле, самураях и семи основных принципах самурайского кодекса!

Ребята делились с нами, что им интересно узнавать о проектах друг друга.

Покажите эти работы своим ученикам, чтобы мотивировать их на создание собственных сайтов. Вдохновляйте и вдохновляйтесь 😉 Будем рады рассказать о результатах работы и ваших учеников!

Космическая вёрстка – это проект по изучению основ HTML и CSS Благотворительного фонда развития образования «Айкью Опшн». Проект реализуется в партнерстве с HTML Academy при поддержке Фонда президентских грантов.

Источник

«Космическая верстка» 2020. Как это было?

Вот и пролетел еще один учебный год!

Он точно был особенным 😉 Нам он запомнится не только переходом на дистанционное обучение и онлайн-выпускными, но и первым полноценным годом «Космической верстки».

Именно в этом году «Космоверстку» по-настоящему протестировали. И благодаря этому тесту мы обновили курс и сделали его еще лучше: совместно с преподавателями внесли изменения в методические материалы, добавили справочники с теорией и создали отдельную группу ВКонтакте с полезными материалами для учеников, а также провели первую олимпиаду!

В начале учебного года мы делились с вами цифрами проекта и ожиданиями учеников. По завершении курса мы пригласили преподавателей и ребят принять участие в опросе и сейчас вместе с вами готовы сравнить ожидания и реальность:

*Количество опрошенных педагогов – 40, учеников – 67 (85% которых – учащиеся 8-11 классов).

Оправдались ли ожидания от курса?

72% – да
25% – не имели никаких ожиданий
По одному человеку ответили «не оправдались» и «оправдались частично».

Причины, по которым ожидания преподавателей от курса не оправдались: не успели приступить к работе над проектами из-за карантина, недостаточное количество учеников в группе, пропуски занятий в силу ряда обстоятельств. Наиболее частая причина, по которой не оправдались ожидания учениковнедостаточное количество проведенных уроков.

Понравился ли курс ученикам?

Чему научились педагоги?

Чему научились ученики?

Эти отзывы учеников для нас очень важны. Они показывают, что, участвуя в «Космической верстке», ребята получают не только новые для себя технические знания, но и развивают навыки и лучше узнают себя:

Что ученикам понравилось/запомнилось в занятиях больше всего? (можно было выбрать несколько вариантов)

Что не понравилось ученикам на курсе?

Показывали ли ученики свои проекты родителям?

Проходят ли ученики уроки на платформе Академии самостоятельно дома?

«Хочется отметить, что ученики, которые самостоятельно занимаются на платформе, говорят, что это крутой и интересный опыт. Что уроки подаются в понятной форме, а наличие подсказок помогает разбираться с трудными заданиями. Сопровождение кота Кекса и получение ачивок за выполнение заданий делают учебный процесс увлекательным. Платформа – полноценный и важный инструмент в рамках «Космоверстки», а все курсы, в том числе по PHP и Java Script, бесплатны для учеников проекта. Преподавателям важно донести до своих учеников ценность таких возможностей,» — комментирует менеджер проекта Игорь Анучин.

68% преподавателей, принявших участие в опросе, оценили удобство платформы HTML Academy на 9-10 баллов из 10-ти, 60% опрошенных учеников поставили такую же высокую оценку. Ниже 7 не поставил ни один из участников опроса.

Около 30-40% преподавателей, участвующих в проекте, совместно с учениками завершили работу над индивидуальными проектами по крайней мере в черновом варианте. Остальным помешали пропущенные уроки, медленный темп работы и переход на дистанционный формат работы.

Удобство и понятность методических материалов педагоги оценили от 7 до 10 баллов. Преподаватели особо отметили структуру и ясную подачу материалов, использование интерактивных приложений, а также разнообразие форматов работы на уроке.

Положительный отклик у преподавателей вызвали вебинары с экспертами. 70% ответивших поставили 10 баллов по шкале полезности, ещё 20% – 8-9. Напомним, что в течение года мы провели несколько вебинаров. Посмотреть их в записи можно по ссылкам ниже:

Источник

Закончили первую «Космическую вёрстку»

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

Мы уверены, что начинать изучать основы веб-программирования можно уже в школе. Поэтому предоставляем доступ к интерактивным курсам по веб-технологиям для учителей и учеников. Через бесплатный личный кабинет учителя с нами сотрудничают уже больше 700 педагогов. В конце 2018 года мы вместе с благотворительным фондом «Айкью Опшн» и командой проекта Geek Teachers придумали и запустили учебно-методический проект «Космическая вёрстка». В пилотном запуске участвовало 34 педагога и 451 ученик.

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что этоУчастники проекта «Космическая вёрстка»

Зачем мы придумали «Космовёрстку»

Чтобы работать эффективнее, педагогам нужно грамотное методическое сопровождение. Мы подумали, что будет здорово сделать проект, состоящий из методических материалов с поурочным планированием на весь курс. Помочь с этим нам согласились наши партнёры: проект Geek Teachers, обучающий учителей новыми технологиям, и благотворительный фонд «Айкью Опшн». Фонд не только разрабатывает методические комплексы для учителей, но и даёт возможность школьникам 7-12 лет бесплатно изучать основы программирования.

Из чего состоит курс

Сейчас в комплекс входит 12 уроков, а к сентябрю программа увеличится до 18. Этого хватит на полгода работы в группе дополнительного образования. В марте мы получили рекомендации от АППО и наша программа прошла аттестацию по стандартам ФГОС, а значит, все материалы можно смело использовать на своих уроках в школе или колледже. Кроме методичек мы предоставляем наглядные презентации и интерактивные демонстрации, тесты и всевозможные активности для учеников, а также доступ к нашей онлайн-платформе, возможность отслеживать своих учеников и сопровождение учителя в течение всего курса.

Что получают ученики в конце курса

Уже после первых занятий ребята смогут создавать веб-страницы и применять на практике свои знания. По итогам работы у учеников будет готовый проект: полностью сверстанная страница сайта. В этот раз для тренировки мы разработали специальный учебный макет — лендинг туристической фирмы по полётам в космос (Привет, Илон Маск!).

В курсе «Космическая вёрстка» больше всего мне понравилась идея, что ученикам дают возможность создать свой собственный сайт с нуля. Я думаю, стоило бы добавить больше информации о самом сайтостротельстве. В будущем мне было бы интересно сделать сайт-магазин. Никита Логвиненко, 9б, 483 школа, Санкт-Петербург

А можно было и так

А вот в МОУ СОШ № 13 г. Вологда не ограничились стандартным макетом курса, а создали свои проекты по астрономии, с которыми выступили на городской конференции.

Курс представляет большой интерес с точки зрения межпредметности, поскольку наш 10 класс смог сделать сайт по астрономии про астрономические явления и обсерваторию у нас в Вологде. Ребятам понравилось заниматься на платформе HTML Академии. Каждый выбирал блоки в соответствии со своим ритмом. Некоторые учащиеся использовали дополнительные ресурсы, которые мы изучали ранее. Половина учащихся представили свои проекты на городской конференции. Курс формирует полное представление о современном сайтостроении, формирует интерес в целом к изучению информационных технологий. Поэтому отлично подходит для профильных классов, а также в рамках внеурочной деятельности и электива в основной школе, что и планируем ввести в следующем учебном году. Евгений Биловол, учитель информатики и физики, заместитель директора

Что дальше

Новый поток «Космической вёрстки» стартует в сентябре. Мы получили больше 200 заявок от учителей из 110 населенных пунктов. По итогам отбора 134 учителя с учениками 6-11 классов начнут изучение основ веб-разработки. Кстати, больше половины учителей-участников пилотной группы решили продолжить вести курс для своих учеников в сентябре 2019 года.

Как стать участником «Космической вёрстки»

Источник

Космическая верстка что это

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

Geek Teachers || Учителя гики запись закреплена

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это«Космическая верстка» продолжает набор Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

«Космическая верстка» — проект, который был разработан при нашем непосредственном участии. Это бесплатный курс для учителей и учеников по HTML и CSS, основам UI/UX-дизайна и созданию сайтов. Новая версия курса будет запущена с сентября.

В рамках курса педагоги получают методическое пособие для проведения занятий, а школьники в возрасте 12-18 лет изучают основы HTML и CSS. Участие в проекте бесплатное для преподавателей РФ и их учеников.

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что этоЗаявки от педагогов на участие принимаются до 25 августа по ссылке: https://vk.cc/9J1jjX

По результатам первого конкурсного отбора к запуску «Космической верстки» в этом учебном году готовятся уже 130 учителей из более чем 80 населённых пунктов. Присоединяйтесь и приглашайте к участию коллег!

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

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что этоВ дополнительном наборе могут принять участие и те преподаватели, кто уже подавал заявку ранее, но не прошел по конкурсу.

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что этоУспешно прошедшие отбор преподаватели получат бесплатно:
Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что этоСовременное методическое пособие для проведения курса из 18 занятий по 90 минут (36 академических часов);
Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что этоНаглядные презентации, интерактивные задания к каждому уроку;
Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что этоГотовые опросы и проверочные задания для учеников с использованием современных онлайн-приложений: Kahoot!, LearningApps и других;
Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что этоДоступ к онлайн-кабинету HTML Academy с возможностью отслеживать прогресс учащихся;
Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что этоКонсультации по ведению курса;
Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что этоВебинары с экспертами по использованию платформы, приложений, методических рекомендаций и по другим полезным темам в рамках курса.

Подробнее о проекте и о Фонде: http://iq-charity.com/

Проект «Космическая верстка» реализуется Благотворительным фондом развития образования «Айкью Опшн» совместно с HTML Academy при участии Geek Teachers.

Источник

«Космическая вёрстка» дистанционно. Как проводить занятия онлайн?

В этом лонгриде мы хотим поделиться с вами рекомендациями по тому, как можно организовать дистанционное обучение в рамках проекта «Космическая верстка». Несмотря на то, что данный материал был подготовлен специально для участников благотворительного проекта по изучению HTML и CSS, сервисы, о которых пойдет речь в статье, могут быть полезными для проведения любых других онлайн-занятий.

Содержание статьи:

3. Google Calendar для планирования уроков;

4. Инструменты для работы с кодом и его хранения
— Gist от Github
— Онлайн-песочница Codepen.io.
— GitHub Pages

5. Дополнительная информация

ВАЖНО! Для использования инструментов, описанных в данной статье, вам и вашим ученикам необходимо зарегистрировать Google аккаунты, создав почтовый ящик в Google почте. Как это сделать вы можете узнать из этой инструкции и в этом видео.

Общая схема организации урока:

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

Ниже мы расскажем подробнее о каждом инструменте и оставим инструкции по их использованию.

Google Classroom

Для обеспечения доступа учеников к материалам и заданиям каждого урока мы предлагаем создавать уроки на платформе Google Classroom. Платформа проста в использовании и имеет весь необходимый функционал для оформления всей содержательной части занятий «Космической вёрстки». Сюда же ученики могут загружать выполненные задания, а преподаватели оценивать их, комментировать и при необходимости отправлять ученикам на доработку. И всё это в пару кликов!

Как работать с Google Classroom

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

Вам нужно будет создавать уроки внутри Google Classroom и добавлять туда необходимые для учеников материалы, а также загружать домашние задания.

Для этого после регистрации в Google Classroom (коротко о регистрации в видео) на основной странице перейдите на вкладку «Задания» и в выпавшем списке выберите пункт «Тема». Можно, например, назвать ее «Космическая вёрстка». Далее внутри этой темы вы будете создавать отдельные уроки.

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

Далее создайте задание (урок).

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

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

Как это сделать?

У преподавателей проекта есть полная сводная таблица по всем 18 урокам.

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

Таким образом, через эту таблицу ученики в нужный момент на уроке быстро смогут получить доступ к необходимым материалам. На примере Урока №1 это:

Ссылку на таблицу вы добавляете при создании урока через опцию «Ссылка» или «Google Диск», чтобы загрузить таблицу из своего Google диска (обе опции выделены на скриншоте). Также вы можете добавить инструкцию к уроку.

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

После того, как ссылка или таблица из вашего Google диска подгрузится, таблица появится в материалах урока (выделена красным).

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

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

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

Почему Google Classroom?

Googlе Classroom удобен тем, что на нем вы можете замыкать весь образовательный процесс: загружать материалы к урокам, создавать домашние задания. Ученики отправляют выполненные работы вам на проверку, вы тут же можете оставить обратную связь, попросить что-то доделать и снова отправить ученику – и все это в одном рабочем пространстве.

Кроме этого, с Googlе Classroom интегрированы другие полезные сервисы Google: документы, презентации, гугл-формы, которые вы сможете использовать для подготовки к урокам. Также стоит обратить внимание на возможность интеграции онлайн доски Jamboard, которую можно использовать для организации групповой работы учащихся. Например, в курсе «Космическая верстка» есть творческое задание, когда ученики должны собрать из канцелярских материалов прототип сайта и представить его. В онлайне такую задачу можно как раз перенести на интерактивную онлайн-доску.

Если использование Googlе Classroom кажется вам избыточным, то вы можете использовать связку Google Meet/Zoom (о них ниже) + Google Диск с папкой вашей группы. В папке вы сможете размещать материалы к урокам, а ученики – загружать выполненные домашние задания. Ссылками на файлы, хранящиеся на Google Диске, можно делиться, например, в чате вашей группы во ВКонтакте или в мессенджерах. Такие чаты в любом случае будет хорошо завести для удобства коммуникации с учениками между уроками.

Google Meet для организации взаимодействия с учениками на уроке с использованием видео.

Google Meet – сервис для организации видеоконференций, который можно использовать, как альтернативу Zoom, для общения с учениками во время проведения урока.

Здесь есть возможность видеть всех учеников, есть чат для общения, можно демонстрировать экран и вести запись занятия, которая будет сохраняться на вашем Google диске в папке «Meet Recordings». Потом запись можно загрузить в класс для вашей группы на Google Classroom.

Инструкция по использованию Google Meet.

Многие преподаватели писали о том, что Zoom может виснуть из-за перегрузки, а также, что для его использования нужен мощный компьютер. Кроме того, в Zoom есть ограничения по времени одной сессии – 40 минут. В Google Meet такого ограничения нет. При этом скачивать никому ничего не нужно, все работает через гугл-аккаунты (ваш и ваших учеников). Подробнее о настройке Google Meet и приглашении учеников на видео-конференцию читайте в инструкции выше.

О том, как использовать Google Meet в интеграции с Google Classroom смотрите в этом видео.

Если вы все-таки используете для проведения уроков Zoom, то здесь отличная инструкция о том, как грамотно настроить конференцию в Zoom, чтобы ваш урок прошел комфортно и продуктивно. Zoom также можно использовать в связке с Google Classroom.

Google Calendar для планирования ваших уроков «Космической вёрстки».

Благодаря еще одному сервису от Google – Google Calendar – очень удобно планировать все ваши уроки и делать так, чтобы ученики о них не забыли.

Создавайте занятие в календаре сразу на весь учебный год (если «Космическая вёрстка» проходит в один день и в одно и то же время), сразу добавляйте встречу в Google Meet, настраивайте напоминания ученикам об уроке.

Удобство в данном случае в том, что у вашей группы в Google Classroom (в нашем случае «Космическая верстка») сразу создается свой календарь, который привязывается к вашему Google аккаунту, с которого вы создавали Google класс, и появляется в списке ваших календарей.

Вы можете перейти в Google Календарь прямо из вашего Google Класса, кликнув на верхней панели по вкладке «Задания», а затем нажав на надпись «Google Календарь». Тогда у вас сразу будет выбран нужный календарь.

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

Или перейдите по этой ссылке. В списке календарей найдите календарь с названием вашего класса и отметьте его галочкой. В моем случае «Космическая верстка 2020/2021» (выделен красным).

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

Далее вы можете запланировать урок, щелкнув по полю календаря. В появившемся окне вы можете добавить видео-конференцию в Google Meet и выслать ученикам уведомление об уроке, указав их Google почту в соответствующем поле. Почты учеников вы можете взять в Google Classroom или завести таблицу со всеми адресами для подобных рассылок.

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

Создав урок, нажмите кнопку «Сохранить». Ученики, которых вы пригласили на урок, получат по почте уведомление о созданном уроке. Им нужно будет принять приглашение, чтобы урок появился в их Google Календаре.

Подробнее о том, как планировать уроки Космоверстки в Google календаре – в этом видео.

Инструменты для работы с кодом и его хранения.

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

Для работы с кодом в режиме онлайн есть несколько инструментов.

Gist от Github

Этот сервис позволяет быстро передать небольшие элементы кода в удобном и читаемом виде. Для того, чтобы поделиться кодом, достаточно вставить его в окошко редактора, дать название файлу и получить ссылку на код.

Gist удобен тем, что к каждому файлу можно оставить свои комментарии. Его можно использовать для подготовки к уроку (заранее подготовить нужные фрагменты и продемонстрировать ученикам), либо для домашних заданий, если вам нужно передать ученикам нужные файлы.

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

Онлайн-песочница Codepen.io.

Онлайн-песочница — отличный инструмент для быстрой демонстрации работы кода. Сам интерфейс представляет собой несколько окон для ввода кода — HTML, CSS (и JS по необходимости) и окно просмотра результата. Написанный код можно сохранять и делиться им с другими. Codepen хорошо подойдет для небольших заданий на отработку изученного материала во время урока (ученики пишут код онлайн и делятся с учителем ссылкой на свою работу), а также для практических демонстраций сложных моментов в теории.

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

GitHub Pages

При верстке макета ученики работают не с единичным файлом, а с проектом, поэтому для просмотра результата необходимо формировать архив и тестировать его на локальном компьютере. Для удобства работы сервис Github запустил проект Pages, где каждый пользователь может загрузить свой сайт на сервер и посмотреть его онлайн. По сути, GitHub Pages — это примитивный хостинг для домашних страничек. Начиная работу с макетом, попросите учеников зарегистрироваться на сайте, получить свое доменное имя вида student.github.io и закачать туда свои файлы. Даже если на этот момент файлы проекта не будут содержать много кода, GitHub отобразит текущий результат. После каждого урока ученики могут обновлять свои папки на сервере, а учитель — быстро оценивать результат. Также как и в Gist, на Github Pages можно оставлять комментарии к коду и отслеживать изменения.

Космическая верстка что это. Смотреть фото Космическая верстка что это. Смотреть картинку Космическая верстка что это. Картинка про Космическая верстка что это. Фото Космическая верстка что это

Подробная инструкция для работы с GitHub Pages

Дополнительная информация

За подготовку материала благодарим Катерину Турапину и Игоря Анучина.

Источник

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *