Урок-введение по WebAssembly на примере игры «Жизнь»


Оглавление (нажмите, чтобы открыть):

WebAssembly – новый стандарт который изменит Web

WebAssembly (сокр. wasm) – это эффективный низкоуровневый язык программирования. Главное его предназначение заключается в повышении производительности JavaScript.

WebAssembly построен на подмножестве JavaScript – asm.js. Он также хранится в текстовом формате. Может возникнуть вопрос: как код может быть эффективнее если он также проходит интерпретатор, а затем компилируется? Для этого используется пролог директива, благодаря которой компилятор сразу переводит код на язык ассемблера, пропуская этап интерпретации.

Код wasm представлен как помеченное, ориентированное дерево, в котором внутренние вершины сопоставлены с операторами языка, а листья с соответствующими операндами. И это дерево хранится в двоичном формате. Благодаря этому мы получаем небольшой размер модуля, быстрое декодирование, и меньшее использование памяти. Если удастся приблизиться к скорости выполнения машинного кода, то произойдет настоящая революция в развитии веб-приложений.

После появления этого стандарта появилась возможность компилировать языки верхнего уровня в код wasm или asm.js. На данный момент доступно для языков C и C++.

Для примера скомпилируем код С:

Для этого воспользуемся компилятором Emscripten, способный преобразовывать бит код LLVM (Low Level Virtual Machine) в представление на языке JavaScript и Binaryen который имеет инструментарий для компиляции wasm. Чтобы скомпилировать, выполним следующую команду:

emcc file.cpp -o file.js -s ‘BINARYEN=”путь для двоичного файла”’

Примерно так выглядит уже транслированный код C в wasm:

При переводе в бинарный формат производится несколько этапов сжатия:

  • Сырой формат – стандартный бинарный формат;
  • Специальное сжатие бинарного формата;
  • Общая компрессия

Еще одним плюсом wasm является непосредственный доступ к машинному коду. Так как зачастую в машинном языке новый функционал представляется в виде SDK, к которому нет доступа с клиентской части веб-приложений. И для того, чтобы иметь возможность использовать этот SDK нужно время, когда браузеры будут поддерживать новые возможности и предоставят соответствующий API. Но, даже при этих условиях JavaScript будет работать слишком медленно.

Использование API машинного кода средствами WebAssembly становится гораздо проще и появляется возможность обращаться к нему на более низком уровне. Это дает возможности, которые были недостижимы ранее. API предоставляет всего лишь доступ к сырым данным, которые обрабатывал SDK, теперь можно оперировать при помощи wasm. Это открывает широкий простор для операций с данными, благодаря подгружаемым библиотекам из Интернет, не заботясь о продолжительной стандартизации SDK. В будущем у WebAssembly ожидаются такие нововведения как:

  • Полная поддержка многопоточности;
  • Интеграция с DOM;
  • Оптимизация хвостовой рекурсии;
  • Мультипроцессорная поддержка;
  • Интеграция со сборщиком мусора;

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

  • Продвинутые редакторы музыки/изображений/видео;
  • Системы автоматизированного проектирования;
  • Высокопроизводительные игры;
  • Средства разработки;

WebAssembly эта та технология к которой бы рано или поздно дошла эволюция. Технология, которая безусловно изменит web, открыв возможности для построения более технологичных web-приложений.

Опубликовано в “МЦИИ Omega Science от 23.07.2020”

Набор игр для проведения занятий «Введение в школьную жизнь для родителей»
методическая разработка (1 класс) на тему

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

Скачать:

Вложение Размер
nabor_igr_dlya_provedeniya_zanyatiy_v_treninge.doc 63.5 КБ

Предварительный просмотр:

Набор игр для проведения занятий «Введение в школьную жизнь для родителей»

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

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

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

Сидящие в кругу берутся за руки, смотрят соседу в глаза и дарят ему молча самую добрую улыбку (по очереди).

Сидя в кругу, все берутся за руки. Глядя в глаза соседу, надо сказать ему несколько добрых слов, за что-то похвалить. Принимающий кивает головой и говорит: «Спасибо, мне очень приятно!» Затем он дарит комплимент своему соседу. Упражнение проводится по кругу.

1. Некоторые дети не могут сказать комплимент, им необходимо помочь. Можно вместо похвалы просто сказать «вкусное», «сладкое», «цветочное», «молочное» слово.

2. Если ребенок затрудняется сделать комплимент, не ждите, когда загрустит его сосед, скажите комплимент сами.

Подготовка к этой игре не менее увлекательна, чем сама игра. Вам понадобятся разноцветные клубки шерсти или толстые мотки веревки, маленькие кусочки картона 4х6 см и небольшие подарки для каждого из игроков. Число участников – от 4 человек. Для каждого игрока отрежьте от мотка куски нитки или бечевки длиной примерно 6–8 метров. Если нити будут разноцветными, ваша «конструкция» получится веселой и красивой. Кроме того, это поможет самым маленьким игрокам распутать паутину. Для усложнения задачи можно использовать одноцветные нитки.

На один конец каждой нити прикрепите табличку с именем игрока, а на другой – подарок для него. Теперь вы должны «соткать паутину», протягивая нити через всю комнату.

Игры для развития внимания, воображения, скорости мышления

Чехословацкая игра «ГАЛОВА-РАМЕНА»

Игра проводится среди детей или между родителями и детьми. Игра полезна в компании малознакомых детей, способствует развитию внимания. Участники становятся в круг. Ведущий указывает на части тела и лица, объясняет мена (  лова (двумя руками касаемся головы), ра  их название на чешском языке: га ста,  лена (касаемся колен), пальцы (щелчок пальцами), уши, у  касаемся плеч), ко чи, нос (последовательно коснуться ушей, рта, глаз, носа). Далее ведущий  о предлагает последовательно совершать касания названных частей тела при этом называть их на чешском языке:

лава (двумя руками касаемся гол  Гаовы),

мена ( касаемся плеч),  ра

лена (касаемся колен), пальцы (щелчок пальцами) — 3  ко раза

чи, нос (последовательно коснуться рта, ушей,  ста, уши, о  у глаз, носа).

Участники повторяют все движения и присказку за ведущим. Постепенно ведущий ускоряет темп движений.

Все становятся в круг и выбирают одного человека (добровольца), который выходит за дверь. Среди оставшихся в кругу выбирается водящий, который будет менять движения в группе. Всем участникам необходимо повторять то движение, которое начнет делать водящий. При этом нужно это делать незаметно (не смотреть на водящего в упор) чтобы не выдать его. Игра начинается стандартно с хлопков в ладоши и присказки «САНТИКИ, ФАНТИКИ, ЛИМПОМПО». Услышав эту присказку, из-за двери входит доброволец, обязательно становится в центр круга и начинает угадывать кто же водящий. Дети в кругу продолжают приговаривать «САНТИКИ, ФАНТИКИ, ЛИМПОМПО» и вслед за водящим менять движения. Доброволец угадывает. Если есть желание усложнить игру, можно ограничить число попыток для добровольца. После того, как водящий обнаружен, он выходит за дверь вместо добровольца, который становиться в круг. (То же происходит и в случае неправильного ответа).

«НАЙДИ И КОСНИСЬ»

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

Итак, найдите и коснитесь:

– холодного на ощупь;

– того, что весит примерно полкилограмма;

– того, что имеет толщину 100 мм;

– вещи длиной примерно 80 см;

– вещи весом около 65 кг;

– тяжелее 1000 кг;

– чего-нибудь, что легче воздуха;

– части одежды, показавшейся Вам шикарной;

– руки, которую Вы находите интересной;

– чего-нибудь, на Ваш взгляд, безобразного;

– того, что двигается ритмично;

Игры для развития коммуникабельности

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

Замечание: ведущий следит за процессом обмена «секретами», помогает наиболее робким найти общий язык с каждым участником.

Каждый выбирает себе партнера и становится напротив него. Тот, кто выше, должен закрыть глаза. Если дети одинакового роста, пусть закроет глаза тот, кто раньше родился. Он протягивает вперед свою руку ладонью вверх. Его «зрячий» партнер должен будет сейчас писать на ладони отдельные печатные буквы. «Слепой» игрок должен попытаться расшифровать эти буквы и сказать партнеру, что он прочитал. Прежде чем второй партнер напишет новую букву, он должен «стереть» с руки старую. Задачу можно усложнить, записывая на руке целое слово или целое предложение. Не забывайте прежде, чем написать новое слово, стереть старое.

«НА ЧТО ПОХОЖЕ НАСТРОЕНИЕ?»


Участники игры по очереди говорят, на какое время года, природное явление, погоду похоже их сегодняшнее настроение. Начать лучше взрослому: «Мое настроение похоже на белое пушистое облачко в спокойном голубом небе, а твое?» Упражнение проводится по кругу. Взрослый обобщает, какое же сегодня у всей группы настроение: грустное, веселое, смешное, злое и т.д. Интерпретируя ответы детей, помните, что плохая погода, холод, дождь, хмурое небо, агрессивные элементы свидетельствуют об эмоциональном неблагополучии.

Играющие свободно двигаются по помещению. По команде ведущего: «Я буду считать до 10, а вы за это время должны выстроить все вместе из себя цифру 1 (2, 3, 5 и т.д.)», — дети выполняют задание.

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

Участники свободно стоят вместе. Ведущий предлагает одному ребенку выйти и принять какую-нибудь позу, в которой ему удобно стоять. Следующего участника просят присоединиться к нему в том месте, где много свободного пространства, затем к ним (уже в своей позе) присоединяется третий. Затем выходит осторожно из скульптуры первый и смотрит на общую композицию, а четвертый занимает любое пустое место в общей скульптуре и так далее. Тот, кто давно стоит, отходит, его место занимает следующий.

1. Взрослый выполняет роль скульптора в течение всего упражнения.

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

«РАСКРАСЬ МЕНЯ В ФИОЛЕТОВЫЙ ЦВЕТ»

Два участника становятся друг напротив друга и представляют, что они большие птицы с сильными и мягкими крыльями. Эти птицы двигаются мягко и плавно, красиво размахивая крыльями. И вот они решили покрасить друг друга в фиолетовый цвет. Они обмакивают крылья в фиолетовую краску и выкрашивают птицу-партнера, где смогут достать. Задача птицы-партнера увернуться от прикосновений и самому раскрасить другую птицу. Красить может не ладонь, а все «крыло» – рука от кисти до плеча.

«ПЕСЕНКА ПО КРУГУ»

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

Играющие разбиваются на пары. Один с закрытыми глазами стоит впереди. Другой на расстоянии вытянутой руки, чуть касаясь спины впереди стоящего, встает с закрытыми глазами. «Поводырь» сначала медленно начинает передвигаться по помещению, «слепой» следует за ним, стараясь не потеряться, затем траектория и скорость движения увеличиваются. Упражнение выполняется 5 минут, затем пары меняются ролями.

Дети разбиваются на пары, встают плечом к плечу, обнимают друг друга одной рукой за пояс, одну ногу ставят радом. Теперь они сросшиеся близнецы: 2 головы, 3 ноги, одно туловище и 2 руки. Предложите им походить по помещению, присесть, что-то сделать, повернуться, лечь, встать, порисовать и т.д.

Совет: чтобы третья нога была «дружной», ее можно скрепить веревочкой.

Игры и упражнения для снятия страхов

и повышения уверенности в себе

«ПУТЕШЕСТВИЕ ПО ВАТМАНУ»

Для игры вам понадобиться ватман и краски. Можно играть в группе детей или вдвоем со своим ребенком. Вы предлагаете: «Сегодня мы все вместе отправимся в путешествие по… ватману. Каждый из вас внесет свой вклад в создание общей картины. Один за другим мы будем выходить к ватману и рисовать на нем какие-нибудь линии. При этом следует придерживаться одного правила: нельзя отрывать кисточку (маркер) от ватмана. Как только человек оторвал руку от ватмана – это сигнал того, что он закончил. Кроме того, каждому из нас дается ограниченное время, примерно 10 секунд. Дольше этого рисовать никто не может, но если кто-то сможет уложиться в меньшее время – то это хорошо. Лучше, если мы будем работать быстро, не оценивая свои результаты.

И еще одно: нарисованные нами линии могут пересекаться, мы можем выбирать маркеры разных цветов, можем рисовать все, что хотим. Но помним при этом – как только кисточка (маркер) перестанет касаться ватмана, мы должны будем вернуться на свое место»

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

(После выполнения упражнения партнеры меняются местами.)

«ШАГ В ПРАВИЛЬНОМ НАПРАВЛЕНИИ»

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

Игра проводится на улице или в просторном помещении. Ведущий берет в руки какой-либо музыкальный инструмент (дудочку, барабан, бубен), он – «пастух», все остальные участники – «овечки». Им завязываются глаза. Музыкант, наигрывая, медленно перемещается по комнате и ждет, когда все его «овечки» соберутся вместе. Если кто-нибудь заблудился, он начинает играть громче. Когда вся «отара» соберется, выбирается новый «пастух».

«МЫШЬ И МЫШЕЛОВКА»

Необходимое количество играющих – 5-6 человек. Все встают в круг, плотно прижимаются друг к другу ногами, бедрами, плечами и обнимаются за пояс – это «мышеловка» (или сеть). Водящий – в кругу. Его задача – всеми возможными способами вылезти из «мышеловки»: отыскать «дыру», уговорить кого-то раздвинуть играющих, найти другие способы действий, но выбраться из создавшейся ситуации.

1. Взрослый следит, чтобы ноги «мышеловки не пинались, не делали больно «мышке».

2. Если взрослый замечает, что «мышонок» загрустил и не может выбраться, он регулирует ситуацию, например: «Давайте все вместе поможем «мышонку», расслабим ножки, руки, пожалеем его».

Необходимое количество участников – трое, желательно родители и ребенок, либо один взрослый и двое детей. Двое встают на расстоянии 1 метра лицом друг к другу. Ноги ставятся устойчиво, делается упор на одну. Руки выставлены вперед. Между ними стоит третий участник с закрытыми или завязанными глазами. Ему дается команда: «Ноги от пола не отрывай и смело падай назад!» выставленные руки подхватывают падающего и направляют падении вперед, там ребенок встречает снова выставленные руки. Подобное покачивание продолжается в течение 2-3 минут, при этом амплитуда раскачивания может увеличиваться.

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

«НАРИСУЙ СВОЙ СТРАХ»

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

Для игры вам понадобятся большие листы ватмана и краски. Предлагается нарисовать картину сначала пальчиками рук, затем пальчиками ног или всей стопой. Затем можно рисовать любой частью тела. Главное ограничение – это страх самих родителей.

Игры и упражнения для снижения агрессии

Вам понадобится две повязки на глаза и две свернутые в трубку газеты. Непосредственно в игре участвуют два человека, остальные будут зрителями, но все смогут сыграть в эту игру по очереди. Обоим игрокам завязывают глаза, они ложатся на пол, голова к голове (примерно на расстоянии 30 см друг от друга), сцепившись левыми руками, а в правые взяв свернутые в трубку газеты. Один из игроков спрашивает другого: «Лукас, ты здесь?». Второй отвечает: «Да, здесь» – и откатывается в сторону, потому что первый игрок старается ударить его газетой. Руки нельзя разнимать. Удар должен быть только один. Потом они меняются ролями. До начала игры следует договориться с партнером о количестве раундов. Победителем в этой игре станет тот, у кого было больше попаданий. Участники сами решают, насколько плотными должны быть газеты и соизмеряют силу удара. Группа следит за выполнением правил. После окончания поединка оба участника награждаются бурными аплодисментами зрителей.

Это необычная гонка, цель которой заключается в том, чтобы прийти к финишу не первым, а последним. Игра требует от детей хорошей моторики, ловкости, расчета, координации движений и умения анализировать действия соперников. Игроки встают у стены в одну линию и по сигналу ведущего начинают двигаться к противоположной стене так медленно, как только могут. Запрещается просто стоять на месте. Вы должны двигаться постоянно, но очень медленно. Победителем объявляется «черепашка», пришедшая последней. Ей достается приз из коробки.

В эту игру могут играть даже четырехлетние дети. Главный персонаж – принц, который совершенно не выносит шума, поэтому все усилия будут направлены на то, чтобы сохранить у принца хорошее настроение и не шуметь. Принца зовут Принц-На-Цыпочках, потому что походка у него легкая и совершенно бесшумная. Эту роль играет один из детей. Ведущий говорит следующее: «Все, кроме принца, расходятся по комнате, и встают в любом месте, где им понравится. Принц-На-Цыпочках прижимает указательный палец к губам и шепчет: «Ш-ш-ш, идет Принц-На-Цыпочках». Все должны замереть, а принц начинает медленно, на носочках проходить между вами. Он тихо подходит к кому-нибудь из вас и прикладывает палец к кончику вашего носа. После этого вы должны пойти за принцем, тоже абсолютно тихо и на цыпочках. Затем принц подходит ко второму игроку, прикладывает палец к его носу, и второй игрок встает вслед за первым, теперь они ходят по комнате уже втроем. Так шаг за шагом они обходят всех игроков в комнате и каждый пристраивается в конец ряда, идущего на цыпочках. Когда все игроки образовали длинную колонну, принц ускоряет шаг, и все следуют за ним в новом темпе. Затем он останавливается, поворачивается к стоящему следом за ним и тихо шепчет: «Ш-ш-ш!». Игрок, который получил этот сигнал, должен на цыпочках вернуться на то место, где он стоял и сесть там. Затем принц смотрит на следующего игрока, говорит ему: «Ш-ш-ш!» и тот тоже возвращается на свое место в комнате. Так продолжается, пока все вы не окажетесь на своих прежних местах. Тогда принц сам садится. На этом игра заканчивается.»

«ЧАС ТИШИНЫ И ЧАС МОЖНО»

Вы договариваетесь с ребенком о том, что у вас будет один час, когда в доме не будет ни одного звука, и все будут соблюдать «час тишины». Кроме того, будет еще один час, когда можно делать все то, что вы оговорите с ребенком, максимально учитывая его самые нереальные пожелания. Это будет «час можно». Такая договоренность позволит регулировать нежелательное поведение ребенка, предлагая поберечь силы и фантазию для «часа можно».

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

Урок-введение по WebAssembly на примере игры «Жизнь»

Игра «Жизнь»
Суть игры элементарна! Есть массив клеток. Каждая клетка может находиться в состоянии «1» или «0».

  • Если возле пустой клетки находится три живых клетки — зарождается жизнь.
  • Если же у живой клетки есть 2-3 соседа, то она продолжает жить (в противном случае погибает либо от одиночества, либо от «тесноты»).
    Вот и всё.

    Код
    Игру можно было легко сделать и в консоли, но мне показалось, что получится «круче» если будет графика.
    Я использовал SFML, дабы не зацикливать ваше внимание на нюансах OpenGL/DirectX. Всё, что нас сейчас интересует, — это игра.
    Перед тем, как взглянуть на мой код, попробуйте самостоятельно написать такую игру. Если у вас получится, то можете гордиться собой.

    На этапе настройки SFML я не буду останавливаться, ведь всё написано здесь.
    Итак. Имеем следующее:

    200?’200px’:»+(this.scrollHeight+5)+’px’);»> #include
    #include
    #define WINDOW_WIDTH 640
    #define WINDOW_HEIGHT 480
    #define WINDOW_TITLE «Life Game»
    #define CELL_SIZE 5
    #define MAP_WIDTH WINDOW_WIDTH/CELL_SIZE
    #define MAP_HEIGHT WINDOW_HEIGHT/CELL_SIZE
    #define FPS 22

    int main()
    <
    srand(time(NULL)); //Для рандома
    sf::RenderWindow window(sf::VideoMode(WINDOW_WIDTH, WINDOW_HEIGHT), WINDOW_TITLE); //Создаём окно
    window.setFramerateLimit(FPS);
    while (window.isOpen())
    <
    sf::Event event;
    while (window.pollEvent(event))
    <
    if (event.type == sf::Event::Closed)
    window.close();
    >
    window.clear();
    .
    window.display();
    >
    return 0;
    >

    По условию игры есть массив клеток, где каждая клетка может становится либо «0», либо «1». Ничего не напоминает? Да-да! Это тоже самое, что true или false. Следовательно у нас есть массив булевых значений:

    Что ж! Логика написана. Теперь попытайтесь всё вывести на консоль.
    А вот мой код с выводом и прочей чепухой:

    200?’200px’:»+(this.scrollHeight+5)+’px’);»> #include
    #include
    #define WINDOW_WIDTH 640
    #define WINDOW_HEIGHT 480
    #define WINDOW_TITLE «Life Game»
    #define CELL_SIZE 5
    #define MAP_WIDTH WINDOW_WIDTH/CELL_SIZE
    #define MAP_HEIGHT WINDOW_HEIGHT/CELL_SIZE
    #define FPS 22

    bool Generation[MAP_WIDTH][MAP_HEIGHT];
    bool OldGeneration[MAP_WIDTH][MAP_HEIGHT];

    void Generate()
    <
    for(int y = 0; y MAP_WIDTH — 1)||(y MAP_HEIGHT — 1))
    <
    return 0;
    >
    return (char)OldGeneration[x][y];
    >

    char GetCellsCount(char x, char y)
    <
    return GetCell(x-1,y)+GetCell(x-1,y-1)+GetCell(x,y-1)+GetCell(x+1,y-1)+
    GetCell(x+1,y)+GetCell(x+1,y+1)+GetCell(x,y+1)+GetCell(x-1,y+1);
    >

    void Update()
    <
    UpdateOldGeneration();
    for(int y = 0; y 3))
    <
    Generation[x][y] = false;
    >
    >
    >
    >
    >

    void Draw(sf::RenderWindow* window, sf::RectangleShape* rectangle)
    <
    for(int y = 0; y setPosition(x*CELL_SIZE, y*CELL_SIZE);
    window->draw(*rectangle);
    >
    >
    >
    >

    Информационный портал по безопасности

    Знакомство с WebAssembly

    Эта статья основана на моём выступлении на ITSubbotnik, прошедшем в Рязани 14 октября 2020 года. На русском пока что довольно мало материала на эту тему, надеюсь что статья будет вам полезна.

    Disclaimer: Автор не является экспертом ни в WebAssembly, ни в javascript. Данная статья есть компиляция мыслей и идей, полученных из выступлений других людей на данную тему, плюс эпизодического опыта изучения WebAssembly в течение нескольких месяцев.

    Проблема

    Давайте разберёмся сначала, какую проблему или задачу пытались решить, создавая WebAssembly.

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

    Но не всё так просто, постепенно так сложилось, что помимо самой проблемы, у нас есть ещё несколько сопутствующих требований:

    • Быстрее чем javascript — в идеале, со скоростью света родного кода нашего процессора.
    • Zero configuration — решение «из коробки», без установки, нужен только браузер.
    • Безопасно — новая технология не должна создавать новых угроз.
    • Кросс-платформенно — у нас есть несколько платформ, включая мобильные, несколько операционных систем.
    • Удобно для разработчиков — нужны удобные средства разработки и отладки.


    Ситуация

    В попытке решения этой проблемы у нас есть один победитель, и это javascript.

    Проигравшие (далеко не полный список):

    • ActiveX — технология позволяла делать вообще всё, безо всякого sandbox, соответственно представляла реальную угрозу безопасности.
    • Flash — в 2020 году Adobe объявила о планах прекращения поддержки Flash.
    • Silverlight

    и другие плагины

    Другие попытки решения:

    • NaCl — Native Client — инициатива от Google, появилась в 2011 году; не нашла поддержки других браузеров кроме Chrome.
    • PNaCl — Portable Native Client — LLVM IR subset.
    • asm.js — Mozilla, появилась в 2013 году — ниже рассмотрим подробнее.

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

    Решение 1: Родной код прямо в браузере

    Примеры: ActiveX, NaCl

    Что плохо: нет портируемости, потенциальные или реальные проблемы с безопасностью.

    Решение 2: Код для виртуальной машины

    Примеры: Java Applets, Silverlight и др.

    Что плохо: нужен плагин и/или runtime => нет zero configuration

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

    Что не так с javascript?

    С javascript всё хорошо. Но если смотреть на рост его производительности с годами, то мы увидим что он сейчас находится на втором «плато» S-образной кривой. Сначала производительность была небольшой и росла постепенно, с появлением V8 мы увидели резкий скачок, который уже достаточно давно вновь перешёл в плавный рост.

    Посмотрим как работают современные движки javascript.

    Прежде всего, исходный код (текст на JS) проходит через парсер, в результате возникает внутреннее представление кода — абстрактное синтаксическое дерево. Дальше работает интерпретатор. Отдельные функции при исполнении преобразуются в байт-код — по сути, последовательность вызовов внутренних функций интерпретатора. При этом накапливается статистика использования JS-функций. Если для какой-то отдельной функции преоделён порог вызовов, то принимается решение о том, что её нужно оптимизировать и она передаётся компилятору. Компилятор генерирует машинный код, который сильно завязан на типы входных значений.

    Допустим, у нас есть функция с двумя аргументами: foo(a, b), и мы вызываем её много раз с числовыми значениями параметров. В некоторый момент функция будет передана компилятору и станет выполняться быстрее. Допустим, мы вызовем её со строковым аргументом. В результате, движок выполнит «деоптимизацию»: передаст функцию от компилятора обратно интерпретатору, а готовый машинный код будет выброшен.

    Что я хочу этим сказать? Разработчики javascript движков делают отличную работу и спасибо им за это. javascript вовсе не плох, но у него есть внутренние ограничения, которые уже не позволят сделать его радикально быстрее.

    asm.js

    Ещё одна интересная инициатива, уже от Mozilla Foundation, которая подводит нас вплотную к теме WebAssembly. Появилась она в 2010 году, а в 2013 стала публично доступна.

    Идея заключается в том, что создано подмножество javascript, в которое можно компилировать код из C и C++ с помощью специального компилятора Emscripten.

    Поскольку это подмножество javascript, то такой код будет исполняться в любом браузере. Кроме того, основные современные браузеры уже давно умеют быстро распознавать asm.js и эффективно компилировать его в родной код процессора. В сравнении с родным кодом, полученным непосредственно из C/C++, код полученный из asm.js код медленнее всего в 1,5-2 раза (50-67 %).

    Для простейшей функции на C/C++ код asm.js выглядит так:

    Здесь ‘use asm’ это директива, показывающая JS-движку что код ниже это asm.js, и конструкции вида |0 показывают, что работа идёт с целыми числами (логическое ИЛИ с нулевым значением обнуляет дробную часть Number).

    Цели разработки WebAssembly

    • Скорость — почти как родной код.
    • Эффективность — бинарный формат, быстрый парсинг и компиляция.
    • Портируемость — все браузеры и операционные системы.
    • Безопасность — запуск в sandbox.
    • Удобство отладки — поддержка отладки в браузерах, отладчик есть уже сейчас.
    • Открытый стандарт — то есть это уже не инициатива отдельной компании, пытающейся «перетянуть одеяло на себя». Стандарт уже принят, в 2020 году.

    Так что же такое WebAssembly?

    • Бинарный формат
    • НЕ язык программирования, а байт-код

    Мы же не называем Java-байткод языком программирования.

    Загружается в браузер и исполняется в браузере.

    Формально, WebAssembly исполняется javascript-движком, а не самим браузером, поэтому есть и другие варианты исполнения, например, под NodeJS.

    Исполняется виртуальной машиной

    Это простая стековая машина с памятью, простота позволяет легко реализовать её для любого современного процессора.

    НЕ имеет ничего общего с Web, кроме того что общается с внешним миром через javascript.

    Действительно, WebAssembly это просто виртуальная машина, имеющая память и исполняющая инструкции.

    С чего начать? Hello World

    Освоение WebAssembly я очень советую начать с онлайнового инструмента WasmFiddle .

    (Сам я начал с Emscripten и понял свою ошибку лишь спустя время.)

    Слева вверху исходный код, слева внизу результат компиляции по кнопке Build (сейчас видно текстовое представление), справа вверху код для запуска и справа внизу результат запуска по кнопке Run.

    В качестве примера я использовал простой код для расчёта числа Фибоначчи (да, опять он :), не сказать чтобы хороший код, просто первый попавшийся нагугленый вариант:

    Немного про текстовое представление (WAST). Как уже говорилось, WebAssembly это бинарный формат, на выходе компиляции мы получаем WASM-файл. Текстовое представление всегда можно получить из WASM-файла, оно позволяет разобраться в том, что именно содержит сборка, какие таблицы и код. Также это представление используется для отладки.

    В данном случае, по текстовому представлению мы видим, что выделяется 1 страница памяти (каждая страница = 64 Кбайт), наружу видны (экспортируются) память и функция fib, а дальше идёт определение этой функции, то есть собственно её реализация.

    Начало текстового представления этой сборки выглядит так:

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

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

    Исполнение WebAssembly в браузере выглядит так. Браузер как обычно загружает HTML-страницу, с которой выполняется javascript, который уже выполняет загрузку WebAssembly — получается «модуль» (WebAssembly module), затем создаёт экземпляр модуля, после чего можно вызывать для этого экземпляра экспортируемые им функции.

    Обратите внимание здесь на серую стрелку: изнутри WebAssembly можно вызывать функции javascript.

    Рассмотрим это подробнее на диаграмме последовательности:

    Здесь мы сначала из javascript вызываем WebAssembly, затем из WebAssembly вызываем функцию javascript.

    Во втором вызове здесь я показал то, как WebAssembly пользуется любыми API (например, DOM / WebGL итд.). Это возможно, но не напрямую, такие вызовы тоже происходят только через javascript. Очевидно, здесь возникает «бутылочное горлышко»: если мы будем интенсивно работать с API из WASM, то будем терять много времени на «прокидывании» этих вызовов через javascript.

    Модель памяти WebAssembly очень проста. Это плоский «кусок» памяти, в котором находится код программы, глобальные переменные, стек и куча. Есть возможность сделать так, чтобы память была расширяемой, то если если при очередном выделении памяти нам не хватает места, то верхняя граница памяти автоматически увеличивается.

    Весь блок памяти доступен из javascript, просто как массив байтов (и кроме того, как массив 16- и 32-разрядных слов, как массив 16- и 32-разрядных float-значений). Причём, память из javascript доступна как на чтение так и на запись.

    Emscripten


    Emscripten это основной компилятор для получения asm.js и WebAssembly из C/C++. (Существуют также компиляторы в WASM из других языков, например из Rust и TypeScript.) Здесь я буду рассматривать использование Emscripten под Windows, но не думаю что для других систем будут существенные различия.

    Говоря об Emscripten, стоит немного рассказать о Low Level Virtual Machine (LLVM).

    LLVM это семейство компиляторов. Основная идея LLVM это разделение компиляции на frontend и backend. Frontend-компилятор занимается компиляцией из исходного кода во внутреннее представление (Intermediate Representation, IR). IR это код для некоторой виртуальной машины. Backend-компилятор занимается уже преобразованием IR в код для конкретной платформы, например, часто используется backend для x86 и x86-64. Если нужен компилятор с другого языка программирования, то пишется только новый frontend. Если нужна компиляция под новую платформу, то пишется новый backend.

    Emscripten задействует LLVM для компиляции из C/C++, и предоставляет свои backend-компиляторы для сборки в asm.js и WebAssembly.

    Установка Emscripten

    Установка Emscripten проходит довольно просто, в моём случае это было под Windows, и мне даже не понадобилось ничего компилировать из исходников.

    1. Загружаем отсюда: https://emscripten.org/
    2. Распаковываем в отдельную папку, в моём случае C:binemsdk
    3. Открываем командную строку, переходим в папку emsdk и выполняем три команды:

    Всё установлено и настроено, можем компилировать.

    Выполнив команду emsdk list , вы получите список всех версий всех инструментов, доступных для установки, с отметками того что выбрано сейчас.

    Компиляция в asm.js

    Посмотрим как можно собрать код с помощью Emscripten, начнём с asm.js.

    Пример тот же что и выше, немного модифицированный для Emscripten (fib.c):

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

    Для компиляции я использую следующий командный файл:

    Здесь emcc это собственно Emscripten, -O1 опция оптимизации, fib.c что компилировать, -o fib.html куда компилировать, и дальше опции -f чтобы отключить то что нам не нужно.

    На выходе компиляции мы получаем HTML-файл (fib.html), включающий javascript для запуска скомпилированного кода:

    Также мы получили файл fib.js, в недрах которого можно найти функцию fib() и её вызов в main():

    Кроме того, генерируется двоичный файл fib.html.mem — это «образ памяти», то как выглядит память перед запуском программы, здесь все константы и глобальные переменные.

    Открыв fib.html мы увидим вот такую картину:

    Это стандартный вид результата для Emscripten. Чёрный прямоугольник по центру это вывод «консоли» (stdout), туда в частности выводится printf() . Чёрный прямоугольник вверху это canvas; Emscripten не знает нужен ли он вам, но создаёт его здесь на всякий случай.

    Компиляция в WebAssembly

    Для компиляции в WebAssembly нам вообще не нужно менять исходник на C/C++ (и это прекрасно!).

    Мы немного изменяем только командную строку вызова компилятора:

    Главное отличие здесь это добавлении опции -s WASM=1 .

    Остальные -s и -f добавлены в попытках объяснить Emscripten что нам НЕ нужно. Emscripten умеет слишком много, и поэтому «на всякий случай», «вдруг понадобится» он много чего добавляет в результирующие файлы.

    В результате компиляции мы также получаем fib.html, плюс fib.js (набор сервисных функций Emscripten), плюс наконец-то fib.wasm:

    В начале WASM-файла стоит байт 00 и затем символы «asm», по этим первым четырём байтам можно определить, что мы загружаем именно wasm, а не какую-нибудь страницу-заглушку с кодом ошибки. Следующие 4 байта это номер версии, в данном случае 1.0.

    Отдельного файла для образа памяти не генерируется, константы и глобальные переменные включены в тот же WASM-файл.

    Скриншот с результатом я здесь приводить не буду, он выглядит один-в-один точно так же как для примера с asm.js.

    Давайте посмотрим что у нас есть в плане отладки. Открыв инструменты разработчика Chrome (F12), переходим в Sources и там увидим новый раздел «wasm», в котором среди набора блоков можем найти нашу функцию, можем поставить там точку останова, остановиться на ней и пошагать в отладчике.

    Как видите, для отладки используется текстовое представление (WAST), о котором я говорил выше.

    Теперь давайте откомпилируем тот же код с отладочной информацией, для этого в командную строку emcc добавим опцию -g . В результате компилятор сгенерирует нам ещё два файла: fib.wast и fib.html.map.

    В файле текстового представления fib.wast есть не только код, но и отсылки к исходнику на C/C++:

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

    Возможности Emscripten

    Emscripten развивается с 2010 года и уже много чего умеет. В данном случае речь уже не о компиляторе, а о поддержке популярных библиотек, используемых из кода на C/C++. Поддерживаются:

    • Стандартные библиотеки С/С++
    • SDL 2 — ввод (клавиатура/мышь/джойстики), видео, звук
    • OpenGL, EGL — 2D/3D-графика, реализуются через WebGL
    • OpenAL — звук

    И другие возможности:

    • Эмуляция файловой системы — многие программы на C/C++ интенсивно работают с файлами, можно оставить этот код как есть; см. Emscripten — File System Overview
    • EM_ASM(«JS code») — выполнение произвольного javascript-кода, сформированного в виде строки
    • Workers

    Более сложный пример

    У меня есть свой хобби-проект эмулятора старого советского компьютера, написанный на C++, я его описывал вот в этой статье . С тех пор я успел его несколько дописать, а также портировать под Qt (Windows/MacOS/Linux). Так что у меня уже было выделено ядро эмуляции (

    7 килострок), которое собиралось под разными компиляторами. Собственно я и начал изучение WebAssembly с того, что компилировал этот эмулятор с помощью Emscripten. До первого удачного запуска у меня ушло два вечера после работы, я считаю это неплохой результат, говорящий о том, что порог вхождения в тему относительно низкий. Большая часть работы была связана с javascript: как из JS вызывать методы WASM, как передавать параметры, как отрисовывать canvas итп.

    Кстати, экран эмулируемой машины формируется полностью внутри WASM, в виде сплошного блока памяти, с форматом «пикселей», подходящем для canvas. Наружу в javascript передаётся только адрес готового «экрана». В javascript остаётся только скопировать этот блок памяти в canvas.

    Также в какой-то момент я решил «для полноты картины» собрать этот эмулятор ещё и под asm.js. Сделал себе кофе, выделил на это пару свободных часов, и меньше чем через 15 минут эмулятор уже заработал. Это было как бы неожиданно. Фактически, всё что пришлось сделать, это посмотреть различия в сгенерированном HTML-файле и перенести добавленный javascript-блок куда нужно. Различие было лишь в том, что для asm.js должен загружаться .mem-файл, образ памяти с константами и глобальными переменными. В остальном все вызовы выполнялись точно так же, и готовая страница выглядела и работала в точности так же, разве что немного медленнее.

    Итак, подводя итоги по Emscripten. Я убедился в том, что из одного и того же кода он генерирует результат в виде asm.js и в виде WebAssembly, полученный результат выглядит и работает в точности одинаково (кроме скорости конечно). Порог вхождения до получения реального результата оказался относительно низким.

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

    Думаю что не стоит начинать освоение WebAssembly сразу с Emscripten, по той причине что довольно сложно для себя отделить то что даёт Emscripten от того что имеет WASM «из коробки». Но на реальных проектах Emscripten более чем полезен, именно за счёт тех возможностей, которые он предоставляет разработчику.

    Текущее состояние WebAssembly

    Новости WebAssembly в 2020 году:

    • Март 2020 — WebAssembly Cross-browser consensus and end of Browser Preview
    • Май 2020 — Команда Chromium отказалась от PNaCl в пользу WebAssembly https://blog.chromium.org/2020/05/goodbye-pnacl-hello-webassembly.html
    • Сентябрь — Вышел Safari 11 с поддержкой WebAssembly https://webkit.org/blog/7956/new-webkit-features-in-safari-11/

    Поддержка в браузерах

    На начало октября 2020 года ситуация выглядела примерно так:

    Версия Edge привязана к версии операционной системы. Вместе с Windows 10 Fall Creators Update мы получаем Edge 16, в котором WebAssembly работает сразу, уже не нужно ничего включать в настройках.

    Для браузеров, не поддерживающих WebAssembly, предполагается использовать т. н. «polyfill», то есть автоматическое преобразование WASM в код, который может выполняться в данном браузере. В частности, был сделан прототип, эффективно выполняющий преобразование WebAssembly в asm.js. Но пока я не видел примеров реального применения такого подхода.

    Будущее WebAssembly

    Ряд вещей над которыми команда WebAssembly работает сейчас :

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

    SIMD

    Поддержка SIMD позволит существенно ускорить однотипную обработку на больших объёмах данных — изображения, видео, звук.

  • Exceptions

  • Garbage Collection

    Реализация GC позволит компилировать под WASM с языков с автоматическим управлением памятью. Это возможно и сейчас, но только в варианте когда GC реализуется на C/C++ внутри WASM.

    Производительность

    Вопрос по производительности на самом деле довольно сложный. Потому что не всегда WebAssembly работает быстрее того же javascript или asm.js.

    Например, посмотрите сравнения из javascript vs WebAssembly easy benchmark . На первом же тесте collisionDetection у меня получается что WASM даёт 88% от JS. А допустим на следующем тесте Fibonacci WASM выдаёт гораздо лучший результат, в 3 раза быстрее чем JS.

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

    Выше уже отмечал, что WebAssembly может значительно терять в производительности при интенсивных вызовах JS-функций.

    WebAssembly теряет в производительности на обращениях к памяти: каждое такое обращение делает проверку на выход за границы доступного блока памяти.

    WebAssembly может существенно выигрывать за счёт типа целых переменных. В JS у нас есть только тип Number, фактически всегда 64-разрядный с плавающей точкой, и целые числа это плавающее число без дробной части. При компиляции в JS-движке, для целых чисел используется 64-разрядный целый тип. В WASM мы сами выбираем разрядность типа, и если мы используем 32-разрядный целый тип, операции над которым немного быстрее чем над 64-разрядным целым, то мы получаем здесь «нечестное» преимущество в скорости вычислений.

    В целом, у меня сложилось мнение, что нет такого что «в среднем WebAssembly обеспечивает 10-15% прирост скорости», нет никакого «в среднем», для каждого алгоритма нужно тестом определять, получите ли вы прирост скорости, применив WASM. Но в целом, можно предсказать что для интенсивных вычислений, скорее всего, WebAssembly даст какой-то более или менее ощутимый прирост производительности. Ну и кроме того, видно что уже даже за последние полгода скорость WASM несколько выросла с выходом новых версий браузеров.

    Заключение

    Применение WebAssembly

    • Уменьшить время загрузки
    • Поднять скорость вычислений
    • Использовать готовый код на C/C++

    Варианты использования

  • Применять WASM уже сейчас, если вы к этому готовы
  • Использовать asm.js сейчас, перейти на WASM в будущем
  • Отдавать asm.js либо WASM, в зависимости от браузера

    Ссылки

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

    Mozilla усовершенствует браузерные игры с помощью WebAssembly (+видео)

    Современные 3D-видеоигры требуют тонны вычислительной мощности, чтобы хорошо выглядеть и быстро реагировать на действия игрока. Вот почему большинство веб-игр, которые существуют сегодня, вы не увидите в качестве самостоятельного релиза на своих ПК или игровых консолях.

    Тем не менее команда разработчиков веб-браузера Firefox делает все, чтобы изменить ситуацию.

    Mozilla выпустила бета-версию Firefox, которая включает WebAssembly — новую технологию, позволяющую почти так же быстро, как на обычном компьютере запускать прямо в браузере такие ресурсоемкие приложения, как игры, приложения для компьютерного дизайна, фото и видеоредакторы, а также программы для трехмерной визуализации. Кроме того, технология позволит ускорить работу существующих веб-приложений, использующих jаvascript.

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

    WebAssembly — это язык программирования низкого уровня, который позволяет запускать в веб-браузере другие языки программирования высокого уровня, такие как C или C++. Приложения WebAssembly анализируются и компилируются до того, как они попадают в ваш браузер, а это значит, что большая часть тяжелой работы уже выполнена.
    Для сравнения, приложения написанные для jаvascript обычно предварительно загружают в браузер массу своего кода и лишь затем определяют, как им лучше всего работать в вашей системе, тем самым замедляя весь процесс.

    Браузеры Google и Microsoft также будут поддерживать WebAssembly, хотя Firefox стал первым браузером, который включает эту технологию, благодаря тому, что компания Mozilla являлась одним из ее ведущих разработчиков.

    По мере развития WebAssembly команда Mozilla надеется довести ее и до мобильных устройств. Представьте себе, что вы играете в современную версию Doom или используете приложение CAD на своем Mac или ПК, а затем загружаете его на свой смартфон, когда отправляетесь на утреннюю прогулку. Причем все это — без дополнительных плагинов или необходимости жертвовать скоростью Интернет-соединения.

    Бета-версия Firefox уже доступна для Mac, ПК и Linux и также включает обновленную функцию поиска точек Wi-Fi, а также новый алгоритм защиты от небезопасных соединений.

    Подписывайтесь и читайте новости от ITквариат раньше остальных в нашем Telegram-канале !

    WebAssembly — новый стандарт который изменит Web Текст научной статьи по специальности « Автоматика. Вычислительная техника»

    Аннотация научной статьи по автоматике и вычислительной технике, автор научной работы — Артамошкин М.С.

    В статье рассмотрены важные преимущества и сферы применения нового стандарта WebAssembly .

    Похожие темы научных работ по автоматике и вычислительной технике , автор научной работы — Артамошкин М.С.,

    Текст научной работы на тему «WebAssembly — новый стандарт который изменит Web»

    МЕЖДУНАРОДНЫЙ НАУЧНЫЙ ЖУРНАЛ «СИМВОЛ НАУКИ» №7/2020 ISSN 2410-700X

    Артамошкин Максим Сергеевич

    студент 4 курса факультета математики и информационных технологий ФГБОУ ВПО «МГУ им. Н.П. Огарёва»,

    г. Саранск, РФ E-mail: admin@zverit.com

    WEBASSEMBLY — НОВЫЙ СТАНДАРТ КОТОРЫЙ ИЗМЕНИТ WEB

    В статье рассмотрены важные преимущества и сферы применения нового стандарта — WebAssembly.

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

    WebAssembly (сокр. wasm) — это эффективный низкоуровневый язык программирования. Главное его предназначение заключается в повышении производительности JavaScript.

    WebAssembly построен на подмножестве JavaScript — asm.js. Он также хранится в текстовом формате. Может возникнуть вопрос: как код может быть эффективнее если он также проходит интерпретатор, а затем компилируется? Для этого используется пролог директива, благодаря которой компилятор сразу переводит код на язык ассемблера, пропуская этап интерпретации (рисунок 1).

    Рисунок 1 — Компиляция WebAssembly кода

    Код wasm представлен как помеченное, ориентированное дерево, в котором внутренние вершины сопоставлены с операторами языка, а листья с соответствующими операндами. И это дерево хранится в двоичном формате. Благодаря этому мы получаем небольшой размер модуля, быстрое декодирование, и меньшее использование памяти. Если удастся приблизиться к скорости выполнения машинного кода, то произойдет настоящая революция в развитии веб-приложений.

    После появления этого стандарта появилась возможность компилировать языки верхнего уровня в код wasm или asmjs. На данный момент доступно для языков C и C++.

    _МЕЖДУНАРОДНЫЙ НАУЧНЫЙ ЖУРНАЛ «СИМВОЛ НАУКИ» №7/2020 ISSN 2410-700X_

    Для примера скомпилируем код С: #include int main() < printf("hello, world! \n"); return 0;

    Для этого воспользуемся компилятором Emscripten, способный преобразовывать бит код LLVM (Low Level Virtual Machine) в представление на языке JavaScript и Binaryen который имеет инструментарий для компиляции wasm [1]. Чтобы скомпилировать, выполним следующую команду: emcc file.cpp -o file.js -s ‘BINARYEN=»путь для двоичного файла»‘ Примерно так выглядит уже транслированный код C в wasm: (module (memory 16777216 16777216)

    (type $FUNCSIG$iiii (func (param i32 i32 i32) (result i32))) (type $FUNCSIG$ii (func (param i32) (result i32))) (type $FUNCSIG$vi (func (param i32))) (import $abort «env» «abort» (param i32)) (export «add» $add)

    (func $add (param $x i32) (param $y i32) (result i32) (local $i2 i32) (local $i3 i32)

    (i32.add (get_local $x) (get_local $y)

    При переводе в бинарный формат производится несколько этапов сжатия:

    • Сырой формат — стандартный бинарный формат;

    • Специальное сжатие бинарного формата;

    Еще одним плюсом wasm является непосредственный доступ к машинному коду. Так как зачастую в машинном языке новый функционал представляется в виде SDK, к которому нет доступа с клиентской части веб-приложений. И для того, чтобы иметь возможность использовать этот SDK нужно время, когда браузеры будут поддерживать новые возможности и предоставят соответствующий API. Но, даже при этих условиях JavaScript будет работать слишком медленно [2].

    Использование API машинного кода средствами WebAssembly становится гораздо проще и появляется возможность обращаться к нему на более низком уровне. Это дает возможности, которые были недостижимы ранее. API предоставляет всего лишь доступ к сырым данным, которые обрабатывал SDK, теперь можно оперировать при помощи wasm. Это открывает широкий простор для операций с данными, благодаря подгружаемым библиотекам из Интернет, не заботясь о продолжительной стандартизации SDK. В будущем у WebAssembly ожидаются такие нововведения как:

    • Полная поддержка многопоточности;

    • Интеграция с DOM;


    • Оптимизация хвостовой рекурсии;

    _МЕЖДУНАРОДНЫЙ НАУЧНЫЙ ЖУРНАЛ «СИМВОЛ НАУКИ» №7/2020 ISSN 2410-700X_

    • Интеграция со сборщиком мусора;

    Этот функционал достаточно сложно воспроизвести на JavaScript. Wasm разрабатывается для того, чтобы служить отличной платформой для поддержки языков с похожими характеристиками [3].

    Wasm позволит воплотить в жизнь создание новых продуктов работающих в браузере, в таких направлениях как:

    • Продвинутые редакторы музыки/изображений/видео;

    • Системы автоматизированного проектирования;

    WebAssembly эта та технология к которой бы рано или поздно дошла эволюция. Технология, которая безусловно изменит web, открыв возможности для построения более технологичных web-приложений. Список использованной литературы:

    1. Компилятор Emscripten достиг возможности собственной пересборки [Электронный ресурс] // OpenNET [Б. м. : б. и.] — URL: https://software.intel.com/ru-ru/articles/webassembly-an-initial-view (дата обращения: 17.07.2020).

    2. WebAssembly*: первый взгляд [Электронный ресурс] // software.intel.com [Б. м. : б. и.] : URL: https://software.intel.com/ru-ru/articles/webassembly-an-initial-view (дата обращения: 17.07.2020).

    3. 7 Things You Should Know About WebAssembly [Электронный ресурс] // Auth0 [Б. м. : б. и.] — URL: https://auth0.com/blog/2015/10/14/7-things-you-should-know-about-web-assembly/ (дата обращения: 17.07.2020).

    © Артамошкин М.С., 2020

    Доброва Наталья Васильевна

    учитель математики МБОУ «Подсинская СШ» Россия, Республика Хакасия, с. Подсинее E-mail: kulumaevanv@mail.ru

    РЕШЕНИЕ ЗАДАЧ ПО ГОТОВЫМ ЧЕРТЕЖАМ — ОДНО ИЗ ЭФФЕКТИВНЫХ СРЕДСТВ УСВОЕНИЯ И ЗАКРЕПЛЕНИЯ ТЕОРЕТИЧЕСКОГО МАТЕРИАЛА ПО ГЕОМЕТРИИ

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

    Геометрия, готовый чертеж, устные упражнения, логическое мышление.

    Какие задачи по математике считаются самими трудными? Думаю, что большинство учеников и педагогов ответят, что геометрические. Так как для решения типовых алгебраических задач применяются алгоритмы решения и проблемы, которые возникают при их решении, носят в основном вычислительный характер. А при решении геометрических задач нет единых алгоритмов и большинство ребят сталкиваются с трудностями. С чего начинать? Как решать? На что опираться? Надо знать аксиомы, а из большого списка теорем уметь выбирать необходимую, это сделать не так просто.

    Можно-ли считать WebAssembly «убийцей» JS?

    Употребляя этот термин «убийца» из жёлтой прессы, WebAsm способен покончить с JS хотя-бы теоретически в далёком будущем? И если можете вкратце как как он устроен?

    Например, сайт смогу-ли я при желании откомпилировать, для того что-бы он работал быстрее «ближе к железу», выставив спиннер или прогресс-бар при загрузке «исполняемого» файла? Или он на такую идею не способен?

    P.S. скорость работы любого сайта-приложения оставляет желать лучшего в сравнении с приложениями написанными на С/С++ под определённую ОС

    P.P.S. больше холивара, больше

    • Вопрос задан более двух лет назад
    • 1873 просмотра

    а пользователь то ждёт пока хоть что-то появится на экране.

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

    Никуда JS не денется, так как на него подсело много разработчиков, и переходить на С++ (он же компилится в WASM) или что-то подобное они не станут. Ведь кому нужна лишняя головная боль (и выстрелы по ногам), чтобы ускорить приложение, в котором от силы все операции занимают долю секунды.

    Конвертеры, 3D игры, обработка изображений и т.п. — вот где важна производительность, остальное и так быстро работает.

    semt1, я о читал, советую вам лучше с темой ознакомиться.
    Не любой, а который без встроенного GC. Языки с поддержкой GC будут только весной доступны.
    Системные языки для веб плохо подходят — слишком сложны.
    Разные C#, Java, Python имеют слишком толстый рантайм.

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

    beduin01, студент, очевидно?
    во всех ваших постах звучит: старое говно, нужно все выкинуть и переписать заново.

    знаете почему ИТ индустрия такого уровня развития достигла как сегодня?
    потому что БАЗИРУЕТСЯ на том, что уже написано давно.
    а не пишет каждый год с нуля.

    из реальных неудобств для браузеров в языках, которые вы называете почему-то «системными», а по сути это языки со статической типизацией, вообще-то — неудобная работа с DOM.
    в динамических языках — поудобнее это делать.

    semt1, да, правильно, нужно тащить как можно больше легаси. Желательно вообще PHP в браузер встроить и JQuery, чтобы как можно больше людей могло использовать «привычные инструменты».

    >потому что БАЗИРУЕТСЯ на том, что уже написано давно.
    Особенно это по Web видно, где знания 3-5 летней давности можно выкинуть из головы ничего не потеряв. Можно писать шикарные сайты не зная JQuery, который 5 лет назад казался просто фантастикой. Я в свое время поленился его изучать в итоге оказалось не зря — он оказался тупо не нужен.

    Теперь все пишут на Vue и React, но пройдет еще 2-3 года и про них тоже можно будет забыть..))

    Так что рассказывайте мне дальше сказки дальше про «миллиарды уже написанных строк кода»

    beduin01, бешенная эволюция невозможно. ибо придется поменять все браузеры. язык Ява скрипт менялся считанное число раз, при том, что появился в прошлом веке

    эволюцией вы называете библиотеки.
    так это не язык, батенька

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

    Тот же JavaScript поменялся крайне сильно, JavaScript сейчас и 10 лет назад крайне сильно различаются.

    beduin01, если верить Google Analytics — 70% посетителей моих сайтов браузеры обновляют крайне редко.

    Особенно это хорошо видно по мобильным платформам (а это 60% трафика) — там 90% пользователей сидят на старом стоковом браузере. А ведь у подавляющего большинства даже не предпоследняя ОС в смартфоне, а пред-пред-последняя или еще более древняя.

    P.S.:
    Всего за 20 лет было 7 изменений (это не «каждые 2 месяца», Карл, далеко не каждые) в JavaScript.
    Самое большое изменение, про которое можно сказать, что «до неузнаваемости» — это ЕS6
    Спецификация ES6 принята в конце прошлого года.
    До сих пор 100% этой спецификации поддерживают только альфа-версии браузеров.

    студент, очевидно?
    во всех ваших постах звучит: старое говно, нужно все выкинуть и переписать заново.

    lexa4lexa, тоесть вы предлагаете старое говно тащить куда-то вперед? Расскажите, сколько % кода написанных более трех лет назад вы используете сейчас? Я 0 процентов т.к. даже авторы библиотек их уже успели переписать по несколько раз с нуля.

    Судя по всему у вас какой-то блог. Явно что человек с телефоном за 7 тыс рублей не полезет с него в интернет магазине что-то покупать.

    lexa4lexa, я вижу что JS не предназначен под работу над современными сайтами, чтобы сделать простые вещи на нём, приходится писать по 20 строчек кода, например создайте на JS ховер при выделении текста, запаритесь учитывать все нюансы, тогда никто не предусматривал простые, базовые, элементарные нужды сегодняшних дней, это было невозможно, которых стало гораздо больше чем можно было только себе представить, имхо не нравится не только его скорость работы, но и сам код

    По поводу того, что если у людей чтото перестанет работать, то они быстро обновят свои браузеры, что-бы скорее опять всё заработало привычно как прежде, а предприятия заставят админов это сделать если права пользователей имеют место быть, или будут сидеть без работы, так что за обновление браузеров бояться не стоит, они (на ослах) не обновляются, только потому, что такие вроде вас, мучаются с костылями ради них, если вы перестанете это делать, они начнут обновляться чтобы вам удобнее было предоставлять им сервис, ведь они увидят алерты на всех сайтах: «ваш браузер не поддерживается или устарел», дёрнут гугл, админов, соседей, родственников, кого угодно, и те им скажут или сделают что надо, для того чтобы обновиться, они это сделают, потому-что им надо то что вы делаете, вас их проблемы не должны волновать, потомучто кто о вас подумает? Если конечно они за даунгрейт не готовы платить, а они не готовы, скажут «нафиг надо» лучше обновиться, и не платить ни копейки

    или вы учили четверть века JavaScript и боитесь остаться без работы потомучто вам придётся переучиваться, тогда может давайте верстать таблицами а не флексбоксами с таким отношением, ведь это кроссбраузерно?

    а глядя на это огромное количество фреймворков которое «развелось», так вообще не знаешь за что браться, не изза корявости ли языка они все создаются и недостающих возможностей, разве не ради того чтобы с языком было легче работать, или от хорошей «жизни»?

    Запилят просто язык новый типа Питона только с тонким рантаймом который в WASM будет компилиться и популярность JS резко пойдет вниз

    Урок «Введение в школьную жизнь»по теме: «Ловушка»(1-й класс)

    Класс: 1

    Цели урока:

    • тренировать детей в применении изученных ранее знаков: ”+” ,“-“, “Я” ,“Мы” ,“ Хор”, “?”;
    • ввести новый знак “Ловушка”, научить применять его в учебной деятельности;
    • воспитывать внимание, собранность, навыки сотрудничества.

    Оборудование: карта Страны Знаний (из букваря Д.Б.Эльконина), рисунки клоунов, демонстрационный знак “Ловушка”, набор геометрических фигур, наборы палочек по 6 штук в каждом, индивидуальные знаки-ордена ”Л” для каждого ученика, предметные картинки.

    Долгожданный дан звонок,
    Начинается урок !

    Приветствие. Поздравление детей с тем, что они умеют здороваться по-школьному.

    — Кто готов работать?

    — Спасибо, вы уже научились правильно отвечать!


    Мини-тест — напоминание о школьных правилах

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

    — Кто сегодня плакал и не хотел идти в школу? (Дети отвечают знаками: -, +, Я.)

    — А кто с удовольствием пришел в школу? (Я, +, — .)

    — Сейчас зимний месяц? (-)

    — Какое сегодня число? (Я).

    — Кто хочет сегодня совершить путешествие в Страну Знаний? (Хор).

    Мы летим, летим, летим,
    В Страну Знаний прилетим.
    Много знать мы все хотим
    И поэтому летим.

    — Приземляемся. (На доске карта Страны Знаний).

    — Давайте прочитаем, куда мы сегодня приземлились? (Город Рассуждайчиков).

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

    — Значит, какую учебную задачу мы будем решать сегодня на уроке?

    — Наш воздушный шар встречает Знайка (рисунок).Он предлагает нам очень необычное задание; чтобы справиться с ним, нужно очень внимательно слушать. Послушайте его рассказ. (Предлагается ситуация смешной ловушки, учитель рассказывает историю, сопровождая свой рассказ демонстрацией картинок.)

    “Это лето я провел в деревне. Первый летний месяц март мы провели за сбором яблок. Яблоки уродились на славу: каждое размером с футбольный мяч. Мой любимый сорт — “синий налив”. Кожа у него темно-синяя, а мякоть голубая. Собирать “синий налив” пришлось в перчатках, ведь на ветках яблоневых пальм огромные колючки. В первый день сбора яблок я забыл надеть ушанку и слегка отморозил уши. Но в остальном месяц прошел без приключений…”.

    — Почему вы смеетесь? (Нелепый рассказ). Как вы считаете, в самом деле Знайка все перепутал или специально расставил вам такие ловушки, чтобы посмотреть: если дети смеются, значит, они знают, что при сборе яблок мороза не может быть и никто не отморозит уши? Если же не смеются, то не знают какие бывают яблоки, когда их собирают, и все, что он говорит, считают чистой правдой.

    — Такие ловушки вам будут встречаться в школе, и нередко. Они помогут обнаружить, кто чего не знает. Конечно, в ловушки лучше не попадаться, а то затянет в настоящее болото ошибок (показать на карте). Мы будем отмечать их специальными значками (Л), так же как люди огораживают забором ямы, в которые можно провалиться. Если вы почувствуете ловушку, то поднимайте знак “Л”, его удобнее всего складывать из пальчиков. Потренируйтесь расставлять знак ловушки, покажите соседу. Попробуйте в паре поставить знак ловушки.

    — А теперь проверим, научились ли вы пользоваться новым знаком. (Учитель повторяет историю Знайки, а дети везде, где надо, поднимают знак “Л”.)

    — Давайте поучимся быть внимательными учениками, даже когда отдыхаем. “Правильные” задания вы будете выполнять, а “неправильные” задания, то есть ловушки, выполнять не надо, достаточно показать знак “Л”. Предлагаю вам игру “Пожалуйста”. Если я скажу слово “ пожалуйста”, то вы делаете то, что я вас попрошу. А если я не скажу это слово, то задание не выполняйте, покажите “ловушку”.

    — Пожалуйста, руки вверх.

    — Пожалуйста, встаньте ко мне спиной.

    — Пожалуйста, закройте глаза.

    — А теперь делайте, как я. (Руки в стороны.)

    — А как же вы увидели, что я делаю: вы же стояли ко мне спиной?

    — Пожалуйста, тихо сядьте.

    в) Тренировка на дифференциацию заданий учителя (фаза осмысления)

    — В городе Рассуждайчиков, по пути к цирку, мы повстречали двух клоунов (рисунки клоунов на доске). Один добрый — он всем-всем принес ордена “Л”. А второй клоун — злой. Он хочет завладеть всеми орденами и стать чемпионом по ловкости ума. Он загадал для нас злые, невыполнимые задания. Если вы поймете, что задание невыполнимое, то сразу дайте сигнал “Л”, но помните, что только вместе мы сможем победить злого клоуна.

    — Кто готов работать дальше?

    — Клоун предлагает вам игру: ” И я тоже “. Правила игры: если вы согласны с тем, что говорится о геометрических фигурах, то показываете знак “+”, если не согласны — знак”Л”. (На наборном полотне: желтый квадрат, желтый треугольник, красный треугольник, два зеленых круга).

    — Я вижу пять геометрических фигур.(+)
    — Я вижу, что первая геометрическая фигура — желтый квадрат. (+)
    — Я вижу, что вторая фигура изменила цвет. (Л)
    — Я вижу два треугольника.(+)
    — Я вижу круги синего цвета.(Л)
    — Я вижу, что последний круг не красного цвета.(+)
    — Я вижу, что третья фигура изменила форму.(Л)
    — Я вижу, что последняя фигура — овал.(Л)

    г) Физкультминутка (для глаз)

    — Закройте, пожалуйста, глаза и представьте, что в городе Рассуждайчиков нам нужно построить домик для нашего класса. Он должен быть красивым и прочным. Мы превращаемся в строителей. Представьте, какой дом у нас будет. А теперь откройте глаза и в воздухе попробуйте нарисовать стены нашего дома. Над домом, в котором царят мир, покой и взаимопонимание, всегда светит солнце. Нарисуйте глазами огромное солнце. Около дома будут расти прекрасные цветы, нарисуйте их. Но только злой клоун хочет помешать нам построить этот дом, поэтому будьте очень внимательны и дружны.

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

    — Начнем строить наш дом. Возьмите одну палочку и сделайте из нее что-нибудь.(Федя считает, что это ловушка и ничего делать не надо. А может быть, если постараться, это задание можно выполнить? Это цифра один, это свеча, колонна, карандаш и т.п. Сделаем вывод: если ты не можешь сразу выполнить задание, то это еще не значит, что оно нерешаемое, ловушка. Немного подумай.)

    — Возьмите две палочки. Сложите из них любую букву. (Т, Х, Л, Г.)
    — Добавьте одну палочку, сложите треугольник.
    — Из этих же палочек сложите квадрат. (Ловушка)
    — А как сложить квадрат?
    — Добавьте палочку, сложите колесо. (Ловушка)
    — Из имеющихся четырех палочек сложите букву Ш. (Кто не знает букву, пусть поднимет нужный знак “?”)
    — Добавьте еще одну палочку и сделайте флажок.
    — Из шести палочек сложите домик, поменяв местами наименьшее количество палочек.
    — Для того, чтобы подняться на крышу дома, нам нужна прочная лестница с шестью ступенями. Постройте ее. Домик нельзя разбирать. (Если дети складывают лестницу без боковых стенок, учитель вызывает скорую помощь, ведь с такой лестницы можно упасть и сильно удариться. Если дети показывают знак “Л”, учитель советует поискать решение. Если никто в классе не догадывается, что нужно сложить все палочки, учитель подсказывает: ”Я”(указывает на знак “Я”) никогда эту задачу не решит. “Мы “(указывает на знак ” Мы”) мог бы решить ее легко. Посмотрите друг на друга, может быть вы догадаетесь, как решить эту задачу.)

    — Молодцы! Справились со всеми испытаниями в городе Рассуждайчиков. Завтра мы полетим на своем воздушном шаре в другой город. А сегодня мы дружно победили злого клоуна. Добрый клоун благодарит вас всех за работу и вручает ордена.

    — Как вы думаете, о чем будет напоминать этот орден?(Не попадаться в ловушки, быть рассудительными, внимательными). Учитель вручает каждому ученику индивидуальный знак ”Ловушка” для последующей работы на уроках.

    О курсе адаптации к школе «Введение в школьную жизнь»

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

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

    По форме, по манере общения данный курс построен как обучение навыкам учебного сотрудничества. Усилия детей должны быть сосредоточены на освоении отношений: на выработке умений договариваться между собой, обмениваться мнениями, понимать и оценивать друг друга и себя так, как это делают настоящие школьники. Таким образом, цель курса «Введение в школьную жизнь» — создать у ребёнка представление о школе как о месте, где он будет принят весь целиком, со всеми своими чувствами, мыслями, знаниями, проблемами.

    По рекомендации авторов на наших занятиях присутствовали родители (ежедневно по 4-5 человек), что делало атмосферу первых дней в школе более домашней, спокойной, доверительной. Во время занятий родители вели наблюдения за работой групп и отдельных учеников, помогали детям в выполнении заданий, мне в проведении игр. Большую помощь они оказывали и при подготовке к занятиям: готовили дидактический материал, рисунки, листы с заданиями.

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

    Введение в школьную жизнь: методические рекомендации

    В первую неделю ежедневно проводилось по три урока, на которых решались определённые задачи.

    День первый. Знакомство друг с другом

    • Работа в группах, выработка умения сотрудничать.
    • Режим дня школьника.
    • Введение знака «Я» — поднятая рука.

    День второй. Вводится ритуал приветствия учителя и друг друга

    • Знак «Хор», противопоставление его знаку «Я».
    • Знакомство с «волшебными столбиками» как средством для оценивания работ.
    • Самооценка.

    День третий. Работа в парах. Знак «Мы»

    • Выработка умения слушать своего соседа,
    • внимательно относиться к его высказываниям и
    • оценивать работу соседа, взаимооценка.

    Таким образом, каждый день все задания и игры подчинены одним задачам. И как итог, в конце дня мы встаём в круг, и каждый ребёнок одним-двумя словами говорит, что сегодня понравилось больше всего. И детям предлагалось заполнить в «Книгу школьной жизни» листок, который мы называли «листком настроения». Для этого каждый получал лепесток цветка, бабочку, рыбку или ещё какую – нибудь другую фигуру, и предлагалось раскрасить её таким цветом, какое у него сейчас настроение. Из лепестков мы склеивали один общий цветок, бабочек приклеивали на лесную полянку, рыбок поселили в аквариум.

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

    Очень понравилось в курсе то, что ежедневно ребята получали задания для всей семьи: продиктовать рассказ о самом главном событии дня, порассуждать с родителями, можно ли прожить без ссор и драк, придумать и нарисовать орден для друзей. И, собирая листки с заданиями на следующий день, опять делала диагностику, как родители воспринимают учебную жизнь детей, интересуются ли они тем, что происходит в классе, как общаются с ребёнком.

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

    Во вторую неделю прошла презентация уроков математики, чтения, письма, окружающего мира, музыки, физкультуры. И в конце недели в нашей книге появился лист «Салют школьным наукам».

    Последний, десятый день у нас прошёл как праздник «Посвящение в первоклассники». Основа праздника — это уроки в лесной школе, на которые мы пригласили родителей, а затем музыкально-игровая программа с участием детей и взрослых.

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

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

    Этот курс необходим и родителям. В классе 23 ученика, 17 родителей посетили наши занятия. Во – первых, они знакомились с коллективом, в котором будет учиться их ребёнок. Во – вторых, каждый получает информацию о своём ребёнке: как он работает на занятиях, общается с одноклассниками. В — третьих, в совместной работе сплачивается и родительский коллектив. Отношения между ним и детским коллективом налаживаются быстрее и становятся более тёплыми.

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

    После проведения курса «Введение в школьную жизнь», я попросила родителей написать отзывы о том, нужен ли курс их детям. И вот коллективное письмо родителей:

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

    Начало школьных будней наших детей не было резким рывком к настоящим упражнениям и задачам, а протекало как плавный переход от дошкольной жизни к учёбе в школе. Нагрузки возрастали постепенно и не снижали интерес ребёнка к учёбе. Хорошо, что в первые дни работы дети были поделены на маленькие группы, что позволило им быстрее познакомиться и сблизиться. Каждый ребёнок почувствовал себя членом коллектива, начал работать в контакте с другими детьми. И задания, которые предлагал учитель, были направлены на выработку сотрудничества и взаимопомощи.

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

    Постепенно ребёнок привык к мысли, что он уже школьник, а значит, сам отвечает за свои поступки. Он втянулся в более сжатый режим, нет проблем с подъёмом по утрам (в отличие от детского сада), стал взрослее, самостоятельнее, раскованнее, интереснее, речь стала более связанной. Научился запоминать домашнее задание и выполнять его. Ребёнок с радостью идёт в школу, с нетерпением ждёт новых заданий и вообще считает, что школа это здорово!»

    И я считаю, если тест на изучение учебной мотивации, проведённый в конце декабря психологическим центром, показал, что 18 учеников из 20-ти протестированных идут в школу с удовольствием, хорошим настроением, то это заслуга и курса «Введение в школьную жизнь».


    Конспект урока с презентацией по курсу «Введение в школьную жизнь» на тему «Понятие содержательной оценки».

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

    Просмотр содержимого документа
    «урок»

    по курсу «Введение в школьную жизнь»

    Тема «Понятие содержательной оценки»

    Задачи: познакомить детей с оценочной линейкой; учить определять критерии оценки; учить оценивать свою и чужую работу; формировать адекватную самооценку.

    Оборудование: изученные знаки, тетрадь в клетку, простой карандаш, карточка «светофор»,презентация.

    I. Организационный момент

    Здравствуйте, ребята! Давайте улыбнёмся друг другу, я рада вновь видеть ваши лица и ваши улыбки и думаю, сегодняшний день принесёт нам радость от общения друг с другом.

    II. Повторение пройденного

    Игра «Школьники – дошкольники» (слайд 1)

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

    — Мои школьники, когда хотят ответить, поднимают руку.

    — Когда слышат звонок на урок – прячутся под парты.

    — Если слышат слово «хором» – отвечают громко хором.

    — Когда учитель говорит на уроке: «Здравствуйте», дети отвечают громко: «Здравствуйте!»

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

    — Они на уроке стараются громче шуметь.

    Молодцы! Школьные правила вы хорошо запомнили.

    – Ребята, мы продолжаем учиться быть учениками.

    – Давайте вспомним, чему мы научились за это время?

    Посмотрите на доску. Вы уже знаете некоторые знаки.

    Вот, например, знак «Я» (слайд 2)

    – Что он обозначает?

    – А следующий знак «ХОР»?

    – Сейчас мы еще раз проверим, как вы запомнили их.

    – Я знаю, что вы все любите сказки. Я буду задавать вопросы, а вы на них отвечать, используя эти знаки.

    Кто посадил репку? («ХОР») слайд 3

    Кто сломал теремок? («Я») слайд 4

    Что за птицы утащили братца Иванушку у сестрицы Алёнушки? («Я») слайд 5

    Кого испекла бабушка и положила студить на окошко? («ХОР») слайд 6

    Как называется сказка, где мышка разбила золотое яичко? («Я») слайд 7

    Кто последним прибежал тащить репку? («ХОР») слайд 8

    Молодцы! Мы хорошо с вами поработали.

    – А сейчас мы с вами поработаем с карточкой « светофором». Я буду читать предложение. Если вы с ним согласны, не имеете никаких возражений и замечаний, то есть говорите «Да», — на ваших карточках «светофорах» горит зелёный свет. Если вы не согласны, имеете возражения и замечания, считаете, что нужно остановиться, разобраться, то есть говорите «Нет» или «Стоп», — это красный цвет на ваших карточках.


    Я сегодня шла в школу. Переходила дорогу и на светофоре загорелся синий цвет. Дальше мой путь проходил через яблоневый сад. Справа росла одна яблоня, а слева две яблони. И вдруг с дерева упала груша. А около школы я увидела красивые цветы: тюльпаны, морковь, розы. Когда я вошла в школу, меня встретили три девочки: Игорь, Маша, Аня..

    — Как хорошо вы справились с заданием. Для выполнения следующего задания нам нужно потренировать внимание. Игра «Пчелки».

    — Кто видел пчелок? Чем они занимаются? слайд 9
    — А пчелки все одинаковые или нет?
    — Вы сейчас будете пчелками. Пчелки, слушайте меня внимательно: я буду вас охранять. Когда все будет в порядке, я позвеню в колокольчик один раз – вы можете спокойно собирать с цветочков сладкий нектар. Если вдруг я замечу что-то подозрительное – я звеню два раза, вы собираетесь парами. Если прилетят трутни, я звеню три раза – вы должны замолчать, перестать жужжать.

    III. Объяснение нового материала

    — Ребята вчера мы с вами помогали Буратино исправлять ошибки, а сегодня он прислал нам новое задание. Посмотрите внимательно, какие машинки он нам нарисовал. (Детям раздаются образцы рисунков). Слайд 10

    — Давайте внимательно рассмотрим машинку №1 (она нарисована очень тщательно и аккуратно, но с множеством неправильных деталей – квадратные колёса, перевёрнутая кабина.)

    — Давайте внимательно рассмотрим машинку №2 (у нее нарисованы все детали правильно, но она нарисована небрежно, линии у неё кривые, не ровные). Итак ,1 машинка нарисована аккуратно, но неправильно. 2 машинка нарисована правильно, но не аккуратно. И про один, и про другой рисунок нельзя сказать, что они выполнены хорошо. Что нужно изменить на 1 рисунке, чтобы можно было сказать, что он нарисован хорошо?

    — Сейчас давайте откроем наши тетради, достанем простой карандаш и нарисуем машину. Но прежде чем рисовать мы разомнем наши пальчики: смотрите на меня и повторяйте вместе со мной:

    -Мы капусту рубим, рубим (2 раза)

    -Мы морковку трём, трём (2раза)

    — Мы капустку солим. Солим (2раза)

    — Мы капустку жмем, жмем(2раза)

    — Теперь приступим к работе, но помните, что ваша машинка должна быть нарисована не только правильно, но и аккуратно.

    — А сейчас посмотрите, какой рисунок машинки нарисовал Карандаш. слайд 11

    — Ребята, вы знаете, что в школе за каждую работу ставится оценка. Но в нашей школе оценки необычные. Сейчас я научу вас оценивать каждую работу с помощью линеечек.

    — Давайте посмотрим на рисунок Карандаша и попробуем его оценить с помощью линеечек. (Учитель демонстрирует на доске волшебную линеечку «П»). Положите перед собой листок с линеечкой «П» (правильность). Если вы считаете, что машинка Карандаша нарисована правильно, со всеми необходимыми деталями, то вы ставите свою оценку здесь. (Учитель ставит крестик на самом верху линеечки.) Если вы считаете, что машинка нарисована неправильно, в ней чего-то не хватает, то поставьте свою оценку здесь. (Учитель ставит крестик в нижней трети линеечки.) Понятно, как оценивать правильность работы по линеечке? Оцените рисунок Карандаша по линеечке «П».

    — Теперь положите перед собой лист с линеечкой «А» (аккуратность) и оценим аккуратно ли, нарисовал Карандаш машинку? Если вы считаете, что машинка нарисована очень тщательно и аккуратно, то вы ставите свою оценку здесь. (Учитель ставит крестик на самом верху линеечки.) Если вы считаете, что машинка нарисована неаккуратно (кривые окна, исправления и т.д.), то поставьте свою оценку здесь. (Учитель ставит крестик в нижней трети линеечки.)

    — А теперь сравните ваши машинки с машинкой, которую нарисовал Карандаш и оцените свою работу с помощью линеечек «П» и «А».(предварительно детям раздаются подписанные листочки с линеечками «П» и «А».)

    Учитель собирает работы на проверку. При проверке не следует исправлять рисунки. Оценивать надо только детские оценки. Поставить красный крестик – выше или ниже крестика ребёнка. Если ваша оценка и оценка ребёнка совпадут, надо обвести крестик ребёнка красным кружком – это будет знаком высшей похвалы ученику за умение правильно оценивать свою работу.

    — А сейчас закроем тетради, отложим на край парты, карандаш уберем в пенал.

    — Давайте вспомним, что мы делали на уроке :

    1- повторили знаки «Я» и «Хор»;

    2 – повторили умение пользоваться карточкой «светофором»;

    3- научились выполнять работу правильно и аккуратно;

    4 — научились оценивать свою работу.

    У. Что очень важное вы научились делать сегодня на уроке?
    Почему для учеников это важно?
    Что можно узнать, когда оценишь свою работу?
    Как надо ставить оценку на линеечке?
    За что можно ставить оценку?

    Закончить урок хорошо так: дети встают в круг, обняв друг друга за плечи, и каждый 2 – 3 словами говорит, что, по его мнению, сегодня было самым интересным.

    Список используемой литературы :

    1.Амонашвили Ш.А. Здравствуйте,дети! — м.;Просвещение,1983.

    2.Цукерман Г.А.,Поливанова К.Н. Введение в школьную жизнь. — М.,Новая школа,2010.

    3.Гин С.И.,Прокопенко И.Е. Первые дни в школе.- М.,Вита,2008

    4. Бойко Е.А. Лучшие подвижные и логические игры для детей от 5 до 10 лет. — М.Вита,2010.

    Мастер Йода рекомендует:  Чем опасны сторонние модули Node.js
  • Добавить комментарий