Дима Фитискин

Легко ли быть браузером? понедельник
8 июня

Побывав весной на Объединенной конференции, я понял кое-что про обучение: любое обучение в игровой форме на порядок лучше ботанских лекций. Поэтому в опубликованном плане занятий по верстке для сотрудников студии я написал следующее: «Теоретическая часть 10 минут, интерактивная, игровая и практическая  30 минут».

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

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

Участники делятся на две команды, на это им дается 2 минуты. Вообще все фазы игры четко лимитированы по времени. Для пущего веселья одна команда называлась «Ослик» а вторая «Лиса». Каждая команда выбирает у себя одного игрока, который и является «браузером», ослом и лисой соответственно.

Выдается материал, каждой команде по листу А4, на котором главная страница сайта. У каждой команды свой сайт. Участники другой команды не должны видеть вашу страницу. Сайты для игры лучше брать поугарнее. Мы брали «Банк говно» и «Однокамерники».

Даем задание. Каждой команде необходимо изобразить макет на маркерной доске (или флипчарте) как можно ближе к оригиналу. Рисовать будет «браузер». А команда может подсказывать. Но нельзя указывать на доску пальцем и называть предметы. Можно читать текст и описывать что как оформлено. На подготовку 5 минут. Мы с Сашей не знали что команды будут делать во время подготовки. Но они все стали делать правильно: начали дробить макет на блоки и части, а «браузер» старался это все запомнить. Вот она, работа верстальщика!

Мы специально немного исказили реальное задание. Точнее раскрыли не все карты. По истечении 5 минут дается новая вводная. Команда будет рисовать макет на доске с помощью «браузера» другой команды. Но дается дополнительный реквизит: все графические элементы макета, отдельными картинками. Их при рисовании макета можно по одному отдавать «браузеру», чтобы тот изобразил их на доске. Даем еще 5 минут.

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

Итогом игры становится анализ того, что команда говорила браузеру. Слова, обороты, термины, величины, единицы измерения. Из сегодняшней игры: «Пришел пакет с изображением», «3 колонки по 30%», «Плашка», «Скругленные уголки», «Жирный Разный», «Пиши тахомой», «Новая строка». Потом уже в теории проанализрованные слова и обороты привязываются к сущностям разметки (тег, атрибут, свойство). Схватывается на лету, как оказалось. Сам не ожидал. Особенно понравилось то, что долго не пришлось пояснять почему теги пишутся <так>. В обычной жизни мы </так> не говорим и не пишем. А вот в игре браузер иногда наровил написать свойства, вместо того чтобы учесть их при отрисовке элемента.

При всей детскости формата, участники с хорошим знанием темы участвует с неменьшим интересом, чем те кто Ctrl+U в браузере не использует. Были на этот счет опасения. Не оправдались. Опытные специалисты еще к тому же при подготовке передают свой опыт команде в виде приемов и подходов к передаче информации «браузеру».