Rivalry2

HTML Diff

2 added 2 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>В технических текстах бывает много абстракций, которые сложно объяснить на бытовом примере. Но если вам это удалось, студенту все равно понадобится время, чтобы представить схему или код, которые объясняем.</p>

2 <p>Чтобы студенты не сталкивались с такой проблемой, уроки нужно визуализировать. Это делает информацию простой, привлекательной и легко читаемой.</p>

3 <p>В этом уроке мы разберем, зачем визуализировать урок, и в каких случаях это нужно делать, а в каких нет.</p>

4 <h2>Зачем визуализировать информацию</h2>

5 <p>В технических текстах нужно избавляться от абстракций и подавать теорию через понятные примеры. При этом новичку понадобится время, чтобы считать даже самый понятный контент.</p>

6 <p>Чтобы студент осмыслил текст еще быстрее, нам нужно чаще визуализировать свои мысли. Так контент станет более привлекательным и понятным.</p>

7 <p>Например, мы объясняем студенту разность трех множеств:</p>

8 <p>Предположим, что A, B и C - три непустых множества. Тогда A - B - C представляет собой множество, содержащее элементы A, которые не входят в B и C.</p>

9 <p>Студент сможет представить отношение этих множеств, но это сложно - придется потратить время и силы.</p>

10 <p>Теперь дополним текст схемой:</p>

11 <p>Предположим, что A, B и C - три непустых множества. Тогда A - B - C представляет собой множество, содержащее элементы A, которые не входят в B и C. Так отношение этих множеств выглядит на схеме:</p>

12 <p>В таком виде текст будет считываться намного легче и быстрее, так как студенту не придется напрягаться и придумывать, как бы выглядело отношение множеств.</p>

13 <p>Место, которое нужно визуализировать, не всегда очевидно. Вам может показаться, что вы и так хорошо объяснили теорию. При этом студент может не понять, что вы хотели ему донести.</p>

14 <p>Например, вы объясняете иерархию в файловой системе - подробно разобрали уровни и связи. Но такое дерево может быть многоуровневым, из-за чего текст будет перегруженным, хотя и подробно описанным.</p>

15 <p>Чтобы лишний раз не нагружать мозг студента, такие места стоит визуализировать.</p>

16 <p>Множества и иерархия файлов - это не единственные примеры, где визуализация полезна. В большинстве случаев схема или фрагмент кода сделают ваши мысли нагляднее и яснее. Чтобы этот эффект проявился еще ярче, нужно правильно выбрать способ визуализации.</p>

17 <h2>Как визуализировать свою мысль</h2>

18 <p>В каждой редакции свои способы визуализации текста. В Хекслете мы используем:</p>

19 <ul><li>Схемы</li>

20 <li>Графики</li>

21 <li>Скриншоты</li>

22 <li>Фрагменты кода</li>

23 <li>Списки</li>

24 </ul><p>Разберем подробнее, в каких случаях какой тип визуализации нужно применять.</p>

25 <h3>Схема</h3>

26 <p>Представьте, что у нас есть такой текст:</p>

27 <p>Возьмем для примера массив, отсортированный в порядке убывания - от больших к меньшим. Чтобы разместить элементы в порядке возрастания, надо попарно поменять их местами: первый и последний, потом второй и предпоследний, и так далее, как показано на схеме.</p>

28 <p>Текст сложно считывается, так как мы не видим, как это происходит схематично. Нам нужно представить описываемый процесс в голове, что займет некоторое время и напряжет наш мозг.</p>

29 <p>Теперь добавим к нему такую схему:</p>

30 <p>Этот фрагмент стал намного понятнее, хотя мы ничего не меняли в тексте - а просто показали описываемую схему.</p>

31 <h3>График</h3>

32 <p>Иногда текст нужно иллюстрировать графиками. Например, чтобы показать величину одного показателя относительно другого.</p>

33 <p>Представьте, что мы сравниваем графики двух функций и утверждаем, что красная функция растет гораздо быстрее и почти сразу становится больше синей.</p>

34 - <p>Чтобы студент мог в этом убедить��я, ему нужно показать график:</p>

34 + <p>Чтобы студент мог в этом убедиться, ему нужно показать график:</p>

35 <p>Так пользователь увидит, как выглядят графики, которые мы описывали. Он поймет, как именно красная функция растет относительно синей. Ему не придется ничего додумывать.</p>

36 <h3>Скриншот</h3>

37 <p>Скриншоты показывают, как выглядит инструмент, с которым студенту предстоит работать. Так он поймет, как выглядит рабочая область или определенные элементы, о которых мы рассказываем.</p>

38 <p>Например, в курсе по основам командной строки мы описываем рабочую область. Этот курс относится к начальному уровню, то есть студент может не знать, как выглядит терминал. Поэтому его нужно обязательно показать:</p>

39 <h3>Таблица</h3>

40 <p>Таблицы нужны, чтобы собрать данные в единую структуру. Это могут быть сравнительные показатели, условия задачи или массивы данных:</p>

41 <p>Так студенту легче сравнивать значения и понимать, к чему они относятся.</p>

42 <h3>Фрагмент кода</h3>

43 <p>Код - одна из главных иллюстраций в технических текстах. Когда мы рассказываем о функциях или методах, мы должны показывать, как они работают на практике.</p>

44 <p>Для примера возьмем такой фрагмент урока:</p>

45 - <p>Иногда программисту нужно выводить информацию на экран. Для этого нужно написать программу, которая даст компьютеру специальную команду. Например, в языке Python для этого используется функция print().</p>

45 + <p>Иногда програм��исту нужно выводить информацию на экран. Для этого нужно написать программу, которая даст компьютеру специальную команду. Например, в языке Python для этого используется функция print().</p>

46 <p>Если студент только начинает изучать программирование, он не поймет, что делать с этой информацией - как правильно писать код, какой элемент за что отвечает. Поэтому нужно показать, как писать такую программу и какой будет результат:</p>

47 <p>Мы заранее покажем студенту, как правильно пишется программа - так он допустит меньше ошибок.</p>

48 <h3>Списки</h3>

49 <p>Списки тоже относятся к визуализации, потому что они помогают структурировать информацию и сделать ее нагляднее.</p>

50 <p>Советуем использовать список, когда речь идет о нескольких однородных компонентах: характеристиках программы, шагах в инструкции, уровнях иерархии.</p>

51 <p>Благодаря спискам, текст выглядит проще для восприятия. Как работать со списками, мы рассказываем в курсе<a>"Как писать классные тексты"</a>.</p>

52 <p>Визуализацию стоит продумывать уже на этапе проектирования урока. Вы уже будете примерно понимать, где и какой процесс описывается. В таком случае в план можно сразу вставить референс либо описать его.</p>

53 <h2>Выводы</h2>

54 <p>Сегодня мы разобрали, зачем визуализировать урок, и в каких случаях это нужно делать, а в каких нет. Визуализация помогает быстрее осмыслить текст, делает его привлекательным и понятным. Чтобы визуализировать урок, можно использовать схемы, графики, скриншоты, фрагменты кода и списки.</p>

55 <p>Чтобы научиться правильно визуализировать уроки, понадобится время. Сначала вы будете пропускать места, где это нужно. С этим вам поможет редактор или продюсер курса. С практикой вы освоите этот навык и будете сразу замечать такие места.</p>

56 <p>Рекомендуем потренироваться на сторонних текстах. Выберите любой технический текст в сети или на Хекслете и пройдитесь по нему. Посмотрите, где бы вы вставили иллюстрацию или оформили перечисление списком. Эта практика поможет выработать насмотренность.</p>