1

2

1. Пояснительная записка

Данная дополнительная общеобразовательная общеразвивающая программа

дополнительного образования детей составлена в соответствии с нормативными

документами:

- Федеральный Закон «Об образовании в Российской Федерации» от 29.12.2012

№273-ФЗ;

- Концепция развития дополнительного образования детей (утверждена

распоряжением Правительства РФ от 04.09.2014 №1726-р);

- Сан-Пин к устройству, содержанию и организации деятельности образовательных

организаций дополнительного образования детей (утверждено постановлением Главного

государственного санитарного врача РФ от 04.07.2014 №41);

- Приказ Министерства просвещения РФ от 09.11.2018 №196 «Об утверждении

Порядка организации и осуществления образовательной деятельности по дополнительным

общеобразовательным программам»;

- Методические материалы ФГАУ «Фонд новых форм развития образования»,

предназначенных для использования наставниками сети детских технопарков

«Кванториум»;

- Методические рекомендации по проектированию дополнительных

общеразвивающих программ (включая разно уровневые программы) (Приложение к

письму Департамента государственной политики в сфере воспитания детей и молодежи

Министерства образования и науки РФ от 18.11.2015 №09-3242);

- Положение о дополнительной общеобразовательной общеразвивающей программе

АУ УР «РЦИиОКО»

Направленность (профиль) программы: техническая.

Уровень программы: Продвинутый

Актуальность программы: Разработка web-приложений уже давно стала

деятельностью, инвестиции в которую должны быстро окупаться. Требование быстрой

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

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

современные web-приложения, сегодня предъявляются очень высокие требования, а успех

проекта, связанного с разработкой приложений, во многом определяется удачным выбором

инструментов, с помощью которых решаются задачи подобного проекта. Данная программа

формирует профессиональные компетенции, которые позволят обучающимся в будущем

3

успешно создавать сайты, заниматься администрированием веб-серверов, а также

конкурировать на рынке рабочей силы в области веб – технологий.

Отличительные особенности программы: состоят в том, что она учитывает новые

технологические уклады, которые требуют новый способ мышления и тесного

взаимодействия при постоянном повышении уровня междисциплинарности проектов.

Адресат программы: Программа продвинутого уровня ориентирована на

дополнительное образование учащихся 13-18 лет (7-11 класс), предварительно прошедших

базовый курс по веб-разработке, а также призеры и победители конкурсов, олимпиад по

соответствующему профилю.

Формы организации образовательного процесса: Программой предусмотрено

проведение комбинированных занятий, в том числе с применением дистанционных

технологий. Занятия состоят из теоретической и практической частей, причём большее

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

используются три формы работы:

• демонстрационная, когда обучающиеся слушают объяснения педагога и

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

рабочих местах;

• фронтальная, когда обучающиеся синхронно работают под управлением педагога;

• самостоятельная, когда обучающиеся выполняют индивидуальные задания в

течение части занятия или нескольких занятий.

Объём и срок освоения программы: Программа продвинутого уровня рассчитана на

216 часов в год (3 раза в неделю по 2 часа с сентября по май)

Режим занятий: очно – дистанционный.

Виды и периодичность контроля: промежуточный и итоговый

4

2. Цель и задачи программы

Цель: Сформировать у детей набор компетенций, необходимый для реализации творческих

идей и кейсов от интеллектуальных и индустриальных партнеров РДТ Кванториум в рамках

современной веб-разработки.

Задачи:

1. Обучить учащихся математической части, применяемой в программировании

современных электронных вычислительных машин и мобильной техники.

2. Научить учащихся новым концепциям в программировании на языках, применяемых в

современной веб – разработке.

3. Научить работе в интегрированных средах разработки.

4. Самостоятельно искать решения проблемных ситуаций.

5

3. Содержание программы

Учебно-тематический план

№ п/п Наименование

раздела

Кол-во

часов

Количество часов Формы

контроля Теория Практика

1. Введение в курс. Техника

безопасности.

2 1 1 Опрос

2. Командообразование и

целеполагание.

4 1 3 Тема

проекта

3. Основы проектной и

исследовательской

деятельности.

4 1 3 Перечень

вопросов и

общий план

реализации.

4. Клиентская часть веб-

приложения

80 27 53 Прототип.

Тест

(промежуто

чная

аттестация)

4.1. Кейс№1 «IDE» 6 2 4

4.2. Кейс№2 «Ввод-вывод» 6 2 4

4.3. Кейс№3

«Кроссбраузерность? Не, не

слышал»

8 2 6

4.4. Кейс№4 «Старый-могучий

калькулятор»

10 4 6

4.5. Кейс№5 «W3C-whatta

hell???»

8 2 6

4.6. Кейс№6 «Валидация» 8 2 6

4.7. Кейс№7 «Шашлычная

нотация»

6 2 4

4.8. Кейс№8 «Конем ходи!» 8 4 4

4.9. Кейс№9 «Инкремент и

декремент»

4 1 3

4.10. Кейс№10 «Веб-дизайн» 16 6 10

5. Серверная часть веб-

приложения

62 16 46 Прототип

5.1. Кейс№11 «Парсим сайты» 6 2 4

6

5.2. Кейс№12 «Hyper-V || Oracle

VB»

8 2 6

5.3. Кейс№13 «Микросервисы и

контейнеризация»

14 4 10

5.4. Кейс№14 «БД» 14 4 10

5.5. Кейс№15 «Веб-серверы и

серверные ОС»

10 2 8

5.6. Кейс№16 «Клиент-сервер шаг

– за - шагом»

10 2 8

6. Построение архитектуры веб-

приложения

28 10 18 Продуктов

ый

результат

6.1. Кейс№17 «Паттерны

проектирования»

10 4 6

6.2. Кейс№18 «От заката

монолита, до рассвета

распределенки »

8 2 6

6.3. Кейс№19 «CQRS» 10 4 6

7. Кейс от партнера 36 0 36 Защита

проекта

(итоговая

аттестация)

ИТОГО: 216 56 160

Содержание учебно-тематического плана

1) Введение в курс. Презентация курса. Оценка имеющихся знаний и выявление

интересов. Знакомство с оборудованием. Обзор средств разработки. Интегрированные

среды разработки.

2) Междисциплинарный анализ понятия «команда», соотнесение его с понятиями

«малая группа», «коллектив», возможные стадии развития группы до уровня команды,

определяется содержание понятия «командное взаимодействие» и «целеполагание».

3) Создание условий для успешного освоения учениками основ проектно-

исследовательской деятельности.

7

4) Формирование набора компетенций по разработке клиентской части веб –

приложения:

Кейс№1 «IDE»: при разработке проектных решений используют большое

количество IDE, в зависимости от стека используемых технологий. Но особняком в вебе

стоит WebStorm от компании JetBrains. Задание: установите триал версию этой среды,

изучите основные инструменты и получите образовательную лицензию. Если не получится

получить образовательную лицензию, то не отчаивайтесь и установите Visual Studio Code

Кейс№2 «Ввод-вывод»: приложения на JavaScript состоят из инструкций с

соответствующим синтаксисом. Одна инструкция может состоять из нескольких строк. На

одной строке может находиться несколько инструкций, если они разделены точкой с

запятой. Они являются не ключевыми словами, а группами ключевых слов. Задание:

создайте квест по инструкциям и объявлениям JS по категориям.

Кейс№3 «Кроссбраузерность? Не, не слышал»: например, вы сделали сайт - визитку

для вашего стартапа. Вы разработали красивый дизайн, который приятен для глаз. Но на

ваш сайт пользователи заходят через разные браузеры. Кто-то вообще использует

смартфон. И если вы не проверили кроссбраузерность ресурса, может случиться, что в

некоторых браузерах сайт будет отображаться плохо. Задание: создайте сайт-визитку

соблюдая кроссбраузерность, но при этом не используйте CSS hacks. Протестировать сайт

можно на ресурсах https://crossbrowsertesting.com, http://browsershots.org

Кейс№4 «Старый-могучий калькулятор»: как правило, при изучении элементарных

типов данных, переменных и арифметических операций для закрепления изученного

материала вас просят написать консольную программу, которая выполняет арифметические

операции над числами. Мы пойдем чуть дальше и создадим веб-калькулятор. Задание: на

созданном ранее сайте-визитке, разместите дополнительный блок с калькулятором, в

котором можно рассчитать доходность инвестиций в ваш стартап.

Кейс№5 «W3C-whatta hell???»: Тим Бернерс-Ли настолько выдающийся

изобретатель, что без его изобретения мы не можем представить себе жизнь. Имя его

изобретения – Интернет. Тим, помимо прочего, создал множество протоколов и стандартов.

Одним из таких стандартов является - w3c. Задание: изучите основные стандарты w3c и

примените к своему сайту.

Кейс№6 «Валидация»: на заре становления языков, работающих на клиенте, эта

задача была основной. Со временем эти языки обросли новыми возможностями

8

(манипуляция DOM, управление стилями и пр.), но задача проверки форм не исчезла. В

большинстве случаев валидация проводится так: каждому полю раздаётся id, и затем при

submit'е вытаскиваем их, попутно проверяя содержимое. И всем хорош данный подход,

кроме отсутствия в нем системности. Задание: создайте гибкий алгоритм валидации на

клиенте, который можно реализовать с помощью фреймфорка JS, например, Vue.js.

Кейс№7 «Шашлычная нотация»: «Что самое трудное в работе программиста?

Выдумывать имена для переменных.» © Эта шутка пользуется популярностью среди

программистов не случайно. Именование часто становится причиной целых баталий. И

действительно, то как мы именуем наши сущности

(функции/переменные/константы/классы/модули) имеет большое значение, ведь большую

часть времени мы читаем код, а не пишем. Задание: изучите 4 основные нотации

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

Возникает вопрос, какой выбрать стиль? Ответ очень прост. В каждом конкретном языке

программирования существует общепризнанный (часто официальный) стандарт

кодирования. Именно он должен являться для вас ориентиром. Про важность стандартов

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

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

содержит большое количество показательных примеров.

Кейс№8 «Конем ходи!»: детсадовец Петя имеет огромное желание научиться играть

в шахматы, но в силу своего юного возраста он не может прочитать основные правила игры.

Задание: создайте интерактивный тренажер по шахматам на клиентской части сайта.

Функционал тренажера прост - даны две различные клетки шахматной доски, определите,

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

клетки подсвечиваются зеленым цветом. Если нет, то красным.

Кейс№9 «Инкремент и декремент»: из языка Си в JavaScript перекочевали две

операции: инкремент ++ и декремент --, которые очень часто встречаются вместе с

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

в переменную. Кажется, что нет никакой разницы между постфиксной и префиксной

формами. Но тут начинаются сложности. В отличие от всех остальных операций, которые

не имеют побочных эффектов и просто возвращают новое значение, инкремент и декремент

не только возвращают значение, но и изменяют значение переменной. Особенно страшным

все становится тогда, когда инкремент и декремент вставляют внутрь других операций:

9

x = i++ - 7 + --h. Понять такой код невозможно, и его написание должно

рассматриваться как тяжкое преступление. Инкремент и декремент — не очень важные

операции в JavaScript, и без них всегда можно обойтись. Этот кейс — ещё одна тренировка

работы с циклами, строками и условиями. Задание1: проведите кодревью сайта с учетом

полученной информации о декременте и инкременте. Задание2: реализуйте функцию

filterString, принимающую на вход строку и символ, и возвращающую новую строку, в

которой удален переданный символ во всех его позициях. Пример вызова:

const str = 'If I look back I am lost';

filterString(str, 'I'); // 'f look back am lost'

filterString(str, 'o'); // 'If I lk back I am lst'

Кейс№10 «Веб-дизайн»: «Минимальные требования» для людей, которые думают,

как стать веб дизайнером и хотят создать свой первый сайт, довольно просты. Если вы

знаете, что такое папки, графические текстовые файлы, можно начинать. Однако, хоть

начало работы и простое, создание действительно хорошего сайта – это настоящее

искусство. Есть много навыков, которые вам нужно будет изучить. Вам нужно будет узнать

о теории цвета, о графической иерархии элементов, шрифтах и общей организации сайта.

Задание: разобраться с основными отличиями между UX- и UI-дизайном. Изучите

основные правила типографики, теории цвета и цветовой схемы, композиции. Используя

графические редакторы, внесите качественные изменения на сайт.

5) Серверная часть веб-приложения

Кейс№11 «Парсим сайты»: аналитики и маркетологи всего мира борются за

клиентов и для этого используют инструменты web scraping (парсинг). Они разработаны

для извлечения, сбора любой открытой информации с веб-сайтов. Эти ресурсы нужны

тогда, когда необходимо быстро получить и сохранить в структурированном виде любые

данные из интернета. Задание: помогите собрать аналитической службе данные с

популярных интернет-магазинов, например, для отслеживания актуальных цен

антивирусного ПО. Данные лучше сохранять в форматах JSON, XML, RSS, CSV, SQL.

Кейс№12 «Hyper-V || Oracle VB»: начинающий системный администратор Валера,

решил заняться администрированием сервера, но поскольку у него не оказалось денег на

покупку сервера, он решил «развернуть» сервер на своей рабочей станции. Как ему это

10

удалось? Задание: изучите основные принципы виртуализации. Создайте собственный

виртуальный сервер для сайта

Кейс№13 «Микросервисы и контейнеризация»: прежде всего, микросервисы

позволяют достичь большей гибкости и масштабируемости, позволяют гибко

версионировать отдельные части системы. Предположим, у нас есть какое-то приложение,

которое в продакшене уже много лет. Функционал растет, но мы не можем бесконечно

развивать его экстенсивным образом. Например, у нас есть приложение на Spring Boot 1 и

Java 8. Прекрасное, стабильное сочетание. Но на дворе 2019 год и, хотим мы того или нет,

нужно двигаться в сторону Spring Boot 2 и Java 12. Даже относительно простой переход

большой системы на новую версию Spring Boot может быть весьма трудозатратен, а про

прыжок над пропастью с Java 8 на Java 12 я и говорить не хочу. Т. е. в теории все просто:

мигрируем, правим возникшие проблемы, все тестируем и запускаем в production. На

практике это может означать несколько месяцев работы, не приносящей бизнесу нового

функционала. Немножечко переехать на Java 12, как вы понимаете, тоже не получится. Тут

нам может помочь микросервисная архитектура. Мы может выделить какую-то

компактную группу функций нашего приложения в отдельный сервис, мигрировать эту

группу функций на новый технический стек и за относительно короткое время выкатить это

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

технологий. Также микросервисы позволяют обеспечить fault isolation, когда один упавший

компонент не рушит всю систему.

Задание: разобраться с понятиями микросервис и контейнер. Создайте микросервис,

который позволит раскидать кодовые базы клиента и сервера, но оставит сайт одним целым.

В таком случае у нас есть два варианта взаимодействия между фронтендом и бэкендом:

много маленьких асинхронных HTTP-запросов вместо одного большого или один большой

запрос к специализированным сервисам (шлюзу/агрегатору/кешу), которые собирают

данные со всей микросервисной экосистемы. Создайте докер-контейнер для своего сайта.

Кейс№14 «БД»: все мы знаем, что в мире технологий баз данных существует два

основных направления: SQL и NoSQL, реляционные и нереляционные базы данных.

Различия между ними заключаются в том, как они спроектированы, какие типы данных

поддерживают, как хранят информацию. Не существует баз данных, которые подойдут

абсолютно всем. Именно поэтому многие компании используют и реляционные, и

нереляционные БД для решения различных задач. Задание: создайте базу данных NoSQL

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

11

Переместите созданную систему на облачную платформу, например Microsoft Azure, AWS,

Google Cloud.

Кейс№15 «Веб-серверы и серверные ОС»: Системный администратор Володя

говорит, что в 2017 и 2018 годах в мире Linux можно было наблюдать тенденции,

касающиеся увеличения количества дистрибутивов. В этом году он ожидает повышения

стабильности экосистемы и роста распространённости Linux как в сфере серверных

вычислений, так и на настольных ПК. Задание: создайте таблицу, из которой будет понятно

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

докер-образ из наиболее понравившейся ОС.

Кейс№16 «Клиент-сервер шаг – за - шагом»: кейс из самой настоящей “песочницы”.

Для каждого начинающего разработчика, необходимо осознать принципы общения

“клиент-сервер”, лучше всего это понять на практике. Задание: написать многопоточный

сервер на сокетах. Схема работы на подобии чата: клиент отправляет сообщение, сервер

получает и отправляет ответ, взаимодействие осуществляется пока клиент "не отключится"

6) Построение архитектуры веб-приложения

Кейс№17 «Паттерны проектирования»: возможно, вы уже знакомы с такими

фреймворками/библиотеками как ReactJS, Angular, Vue или jQuery, но знаете ли вы, зачем

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

Задание: изучите основные шаблоны проектирования в JS и по возможности

примените к своему коду.

Кейс№18 «От заката монолита, до рассвета распределенки»: мы уже рассмотрели

преимущества микросервисов, но как понять, что настал тот самый момент когда пора

отказаться от монолитного проекта? И стоит ли отказываться? Задание: приведите

аргументы как в сторону монолитного решения, так и в сторону распределённого.

Проведите анализ своего сайта и решите для себя, что было бы предпочтительнее

использовать. Подготовьте архитектурное решение для будущего кейса.

7) Кейс от партнера. Решение проблемной ситуации интеллектуального или

индустриального партнера.

12

4. Планируемые результаты

soft-компетенции

Владение умениями самостоятельно планировать пути достижения целей;

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

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

корректировать свои действия в соответствии с изменяющейся ситуацией; оценивать

правильность выполнения учебной задачи.

Владение основами самоконтроля, самооценки, принятия решений и осуществления

осознанного выбора в учебной и познавательной деятельности.

Владение информационным моделированием как основным методом приобретения

знаний: умение преобразовывать объект из чувственной формы в пространственно -

графическую или знаково - символическую модель.

Формулирование вопросов, ответы на которые требуются для создания продукта, и

другие навыки исследовательской деятельности.

Планирование и контроль процессов через проектную деятельность.

Владение навыками командной работы.

Выступление с компьютерным сопровождением.

hard-компетенции

Создадут персональный web-сайт с использованием HTML+CSS+JS.

Создадут сценарии (скрипты) на JavaScript.

Получат навыки работы с фреймворками JS

Освоят навыки построения архитектуры веб – приложений

Научатся тестировать веб - приложения

13

5. Календарный учебный график

Считать нерабочими праздничными днями: 4 ноября, 1-8 января, 24 февраля, 9 марта, 1 мая, 12 июня

Условные обозначения:

У – учебные занятия,

Л – работа с обучающимися в каникулярный период

П – промежуточная аттестация

И – итоговая аттестация

К – комплектование новых групп

Но

мер

гр

уп

пы

/Нед

ел

я о

бу

чен

ия

сентябрь

30

.09

.19

– 0

6.1

0.1

9

октябрь

28

.10

.19

– 3

.11

.19

ноябрь

25

.11

.19

– 0

1.1

2.1

9

декабрь

23

.12

.19

– 2

9.1

2.1

9

январь

27

.01

.20

– 0

2.0

2.2

0

февраль

02

.09

.19

– 0

8.0

9.1

9

09

.09

.19

– 1

5.0

9.1

9

16

.09

.19

– 2

2.0

9.1

9

23

.09

.19

– 2

9.0

9.1

9

07

.10

.19

– 1

3.1

0.1

9

14

.10

.19

– 2

0.1

0.1

9

21

.10

.19

– 2

7.1

0.1

9

04

.11

.19

– 1

0.1

1.1

9

11

.11

.19

– 1

7.1

1.1

9

18

.11

.19

– 2

4.1

1.1

9

02

.12

.19

– 0

8.1

2.1

8

09

.12

.19

– 1

5.1

2.1

9

16

.12

.19

– 2

2.1

2.1

9

30

.12

.19

– 0

5.0

1.2

0

06

.12

.20

– 1

2.0

1.2

0

13

.01

.20

– 1

9.0

1.2

0

20

.01

.20

– 2

6.0

1.2

0

03

.02

.20

– 0

9.0

2.2

0

10

.02

.20

– 1

6.0

2.2

0

17

.02

.20

– 2

3.0

2.2

0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

216

час/год

У У У У У У У У У У У У У У У У У

К К У/П У У У У У

Но

мер

гр

уп

пы

/Нед

ел

я о

бу

чен

ия

март

30

.03

.20

– 0

5.0

4.2

0

апрель

27

.04

.20

– 0

3.0

5.2

0

май

25

.5.2

0-3

1.5

.20

июнь

22

.06

.20

-28

.06

.20

июль

27

.07

.20

-2.0

8.2

0

август

02

.03

.20

– 0

8.0

3.2

0

09

.03

.20

– 1

5.0

3.2

0

16

.03

.20

– 2

2.0

3.2

0

23

.03

.20

– 2

9.0

3.2

0

06

.04

.20

– 1

2.0

4.2

0

13

.04

.20

– 1

9.0

4.2

0

20

.04

.20

– 2

6.0

4.2

0

04

.05

.20

– 1

0.0

5.2

0

11

.05

.20

– 1

7.0

5.2

0

18

.05

.20

– 2

4.5

.20

1.0

6.2

0-7

.06

.20

8.0

6.2

0-1

4.0

6.2

0

15

.06

.20

-21

.06

.20

29

.06

.20

-5.0

7.2

0

6.0

7.2

0-1

2.0

7.2

0

13

.07

.20

-19

.07

.20

20

.07

.20

-26

.07

.20

03

.08

.20

-09

.08

.20

10

.08

.20

-16

.08

.20

17

.08

.20

-31

.08

.20

27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51-52

216

час/год

У У У У У У У У У У У У У/И Л Л Л Л Л Л Л Л Л Л Л/К Л/К

14

6. Условия реализации программы

материально-техническое обеспечение:

1 Производительный персональный компьютер с комплектом мебели.

2 Вспомогательное ПО для разработки.

3 Презентационное оборудование

4 LED панель подача информационного материала

информационное обеспечение:

1. Тематические каналы по веб-разработке на youtube.com

2. Готовые шаблоны codepen.io

3. Внешние репозитории на GitHub

4. Информационный ресурс Habr

кадровое обеспечение Педагогом пройдено повышение квалификации по направлению

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

к квалификации педагога.

15

7. Оценочные материалы

Критерии оценки проектов

По каждому пункту оценивается уровень компетенций

Низкий уровень (1 балл)

Средний уровень (2-3 балла)

Высокий уровень (4 балла)

1.Оригинальность и качество решения – Проект уникален и продемонстрировал

творческое мышление участников. Проект хорошо продуман и имеет сюжет / концепцию

2. Зрелищность – Проект имел восторженные отзывы, смог заинтересовать на его

дальнейшее изучение

3. Сложность – Трудоемкость, многообразие используемых функций

4. Понимание технической части – Команда продемонстрировала свою компетентность,

сумела четко и ясно объяснить, как их проект работает

5. Инженерные решения – В конструкции проекта использовались хорошие инженерные

концепции

6. Эстетичность – Проект имеет хороший внешний вид. Команда сделала все возможное,

чтобы проект выглядел профессионально

7. Навыки общения и аргументации – Участники смогли рассказать, о чем их проект, и

объяснить, как он работает и ПОЧЕМУ они решили его сделать

8. Скорость мышления – Участники команды с легкостью ответили на вопросы,

касающиеся их проекта

9. Уровень понимания проекта – Участники продемонстрировали, что все члены команды

имеют одинаковый уровень знаний о проекте

10. Сплоченность коллектива – Команда продемонстрировала, что все участники

коллектива сыграли важную роль в создании и презентации проекта

11. Командный дух – Все члены команды проявили энтузиазм и заинтересованность в

презентации проекта другим

Примеры тем проектов

16

1. Веб-приложение «Вестник IT»

2. Веб-игра «Runner»

3. Веб-служба «Шпаргалка по ОГЭ, ЕГЭ»

4. Веб-квест с использованием AR-технологий «Алиса в стране чудес»

Тест:

Длительность тестирования - 45 минут.

Критерии оценок и шкалы

Отлично: 95 % - 100 % правильных ответов, глубокие познания в освоенном материале.

Хорошо: 75 % - 94 % правильных ответов, материал освоен полностью без существенных

ошибок.

Удовлетворительно: 51 % - 74 % правильных ответов, материал освоен не полностью,

имеются значительные пробелы в знаниях.

Неудовлетворительно: менее 50 % правильных ответов, материал не освоен, знания ниже

базового уровня.

1) Чему равно значение выражения 4 - "5" + 0xf - "1e1"? ( Цифре. Строке. NaN)

2) Верно ли сравнение: "ёжик" > "яблоко"? (Да. Нет. Зависит от локальных настроек

браузера.)

3) Язык JavaScript является подвидом языка Java – верно? (Да. Нет. Наоборот, Java – подвид

JavaScript.)

4) Что выведет этот код? (2, 10, 20, NaN, В коде ошибка.)

alert( 20e-1['toString'](2) );

5) Чему равна сумма [] + 1 + 2? (1, NaN, undefined, 12, Другое.)

6) Что делает оператор **? (Возводит в степень, Умножает число само на себя, Нет такого

оператора.)

17

7) Что выведет этот код?( null, undefined, В коде ошибка, Другое.)

f.call(null);

function f() {

alert(this);

}

8) Чему равно 0 || "" || 2 || undefined || true || falsе ? (0,"",2,undefined,true,false)

9) Что выведет этот код? (Infinity, NaN, 0, Будет ошибка.)

alert( +"Infinity" );

10) Что выведет этот скрипт? (null, undefined, NaN, В коде ошибка.)

"use strict";

a = null + undefined;

alert(a);

18

8. Методические материалы

Основные задачи продвинутого уровня- привлечь детей к исследовательской и

изобретательской деятельности, показать им, что направление интересно и перспективно

на примере кейса от партнера. Задача педагога- развить у детей навыки, которые им

потребуются в проектной работе и в дальнейшем освоении программы квантума.

Все умения и навыки приобретаются только через опыт. Поэтому в «Кванториуме»

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

которого лежат задачи из реальной жизни, и они направлены на развитие у детей soft и hard-

компетенций.

Кейс-технология- это техника обучения, использующая описание реальной

ситуации, специально подготовленный материал с описанием конкретной проблемы,

которую необходимо разрешить в составе группы.

Кейс-технологии направлены на исследовательскую или инженерно-

проектировочную деятельность. Интегрирует в себе технологию развивающего и

проектного обучения. Выступают в обучении как синергетическая технология

(«погружение» в ситуацию, «умножение» знаний, «озарение», «открытие»). Позволяют

создать ситуацию успеха.

В проектной деятельности ребята используют гибкую методологию SCRUM. Сам

термин Scrum — это методология управления проектами, которая построена на принципах

тайм-менеджмета. Основной ее особенностью является вовлеченность в процесс всех

участников, причем у каждого участника есть своя определенная роль. Суть в том, что не

только команда работает над решением задачи, но все те, кому интересно решение задачи,

не просто поставили ее и расслабились, а постоянно «работают» с командой, и эта работа

не означает только постоянный контроль, но и оказывают помощь.

Помимо этого, педагог использует Тулкит «IT квантум» (методический

инструментарий тьютора, Фонд новых форм развития образования), Рабочую тетрадь

педагога (Образовательная программа для преподавателей и руководителей детских

технопарков «Кванториум» и центров молодежного инновационного творчества), Основы

проектной деятельности. Рязанов И. (Фонд новых форм развития образования),

Руководство для наставников проектных команд (Москва, КСП), Детские инженерные и

исследовательские проекты (методические материалы, Фонд новых форм развития

образования), «Вводные кейсы «Кванториума» (Образовательная программа для

19

преподавателей и руководителей детских технопарков «Кванториум» и центров

молодежного инновационного творчества), «Учимся шевелить мозгами».

(Общекомпетентностные упражнения и тренировочные задания, Фонд новых форм

развития образования), Инженерные и исследовательские задачи (Настольное приложение

к учебно-методическому пособию для наставников, Фонд новых форм развития

образования).

20

9. Список литературы

1. Сайт о программировании https://metanit.com/

2. Справочник HTML http://htmlbook.ru/

3. Джон Дакет. HTML и CSS: Разработка и дизайн веб-сайтов. – М.: Эксмо, 2017.

4. Джон Дакет. Javascript и jQuery. Интерактивная веб-разработка. – М.: Эксмо, 2017.

5. Дэвид Сойер Макфарланд. JavaScript и jQuery. Исчерпывающее руководство. – М.:

Эксмо, 2017.

6. Леа Веру. Секреты CSS. Идеальные решения ежедневных задач. – М.: Питер, 2016

7. JavaScript For Web Designers. Mat Marquis. 2016