В конце марта Пол Айриш написал в Твиттере об академической статье под названием «На пути к таксономии ошибок в HTML и CSS» (PDF), которая была проведена в 2013 году в Университете Дрексел в Филадельфии, Пенсильвания, США.
Хотя исследованию уже пару лет, твит Пола привлек к исследованию гораздо больше внимания, связанного с отраслью . В этом посте я подумал, что было бы интересно поближе взглянуть на результаты исследования с некоторыми подробностями об используемых методах. Я также сообщу вам, какой прогресс был достигнут после проведения исследования и как это может помочь начинающим изучать HTML и CSS.
Участники и методы исследования
Мы все знаем, что опечатки и недопонимание синтаксиса являются частью процесса обучения для всех нас, поэтому всегда интересно посмотреть, какие ошибки делают разные разработчики.
Это исследование не было обширным, но было сделано аналогично тому, как компания может проводить юзабилити-тестирование. В этом случае 20 участников были записаны на видео, когда они выполнили назначенные задачи кодирования (подробнее о задачах в данный момент), используя то, что они называют «протоколом мысли-вслух», который побуждает участников озвучивать свои мыслительные процессы при выполнении задач.
Хотя исследование было ограничено 20 участниками, люди имели разные уровни опыта в HTML и CSS. В исследовании также утверждается, что «не исключены какие-либо фоны или профессии», поэтому мы можем оценить, что они пытались обеспечить участие очень разнообразной группы.
20 участников были 7 женщин и 13 мужчин в возрасте от 18 до 47 лет. Примечательно, что только 2 участника указали, что веб-дизайн — это их профессия.
Цель исследования
Как отмечается, большинство участников не были профессиональными разработчиками. Но зачем фокусировать внимание на людях, которые мало или совсем не имеют опыта работы с HTML и CSS? Участники использовали первую версию openHTML Editor , текстового редактора, который является частью openHTML , «совместного исследовательского проекта, направленного на разработку более совершенных инструментов и методов для обучения веб-разработке».
Кроме того, вот цитата из вводных разделов исследования:
Начинающие, которые изучают HTML и CSS, сталкиваются с множеством возможностей поучиться на процессе написания кода для компьютера, который можно интерпретировать, делать ошибки на этом пути и восстанавливаться после этих ошибок.
И далее:
В этом исследовании мы стремимся выявить ошибки, которые люди допускают при написании кода на HTML и CSS, и исследовать когнитивное происхождение этих ошибок. Эти результаты способствуют нашим постоянным усилиям по созданию веб-редактора для начинающих, который является педагогически превосходной альтернативой существующим инструментам.
Как уже говорилось, целью исследования было выяснить, какие из наиболее распространенных ошибок были допущены при первом изучении HTML и CSS. Они объясняют, что целью было использовать полученные данные для разработки лучшего веб-редактора (текстового редактора). Выводы исследования имеют значение для всех, кто занимается созданием или обслуживанием текстового редактора, чтобы решить, какие ошибки следует искать, чтобы помочь новичкам быстрее прогрессировать.
Цель исследования — ответить на следующие вопросы:
- Какие ошибки допускают люди при создании веб-страниц в HTML и CSS?
- Каковы источники этих ошибок?
- Насколько хорошо люди оправились от таких ошибок после их совершения?
Редактор, который использовали участники, был преднамеренно простым и незнакомым для всех участников. Таким образом, они могли наблюдать ошибки, сделанные в прямой связи с синтаксисом HTML и CSS, вместо того, чтобы позволить участникам отвлекаться на сложности, связанные с редактором.
Задачи, выполненные в исследовании
20 участникам было предоставлено 30 минут на задание с использованием любых ресурсов, которые они обычно использовали (включая поиск в Интернете). Задачи были:
- Создайте заголовок, абзац, упорядоченный список, упорядоченный подсписок.
- Создать гиперссылку, добавить изображение, гиперссылку на изображение.
- Выровняйте текст в таблице, измените цвет фона строки, раскрасьте гиперссылку и добавьте цвет при наведении.
- Исправьте поврежденное изображение, незакрытый тег и непревзойденный селектор.
- Создайте и горизонтально отцентрируйте контейнерный блок и добавьте правую боковую панель в контейнер.
Как видите, это так же просто, как и в случае HTML / CSS. Но это исследование не только о конечных результатах, которые дали студенты. В большинстве случаев результаты были, вероятно, хорошими. Это был процесс выполнения поставленных задач .
Например, сотни ошибок были отслежены во время видеозаписей, но большинство из них были обнаружены и исправлены участниками. Несмотря на то, что они заканчиваются исправленными ошибками, они все же являются частью того, что замедляло учеников. Таким образом, изучая эти распространенные временные ошибки, они могут найти способы помочь начинающим учиться быстрее и с меньшим количеством препятствий.
Как ошибки были классифицированы
Сделанные ошибки были отнесены к одному из трех типов. И снова, здесь следует подчеркнуть, что эти ошибки не были ошибками, которые наблюдались при наблюдении за выполненными задачами; Это ошибки, которые наблюдались в процессе выполнения задач, независимо от того, были ли ошибки исправлены или нет:
Ошибки на основе навыков
Это непреднамеренные действия, настоящие «опечатки», которые могут быть вызваны рядом факторов, но не вызваны отсутствием понимания. В качестве примера был приведен один участник, которому сказали добавить alt Ошибка выглядела примерно так:
<img src="image.gif" alt=My Image"/>
Обратите внимание на отсутствующие вступительные цитаты. Это была просто опечатка, и она была исправлена вскоре после изготовления.
Ошибки на основе правил
Эти ошибки являются непреднамеренными ошибками, но они вызваны недопониманием. Это могут быть неверные правила или неправильное применение ранее понятого правила синтаксиса. Пример, приведенный для этой категории, интересный. Участник сделал следующее в HTML:
<div class="2"></div>
А потом в CSS:
.2 {
background-color: blue;
}
Но, как многие из вас могут знать, вы не можете начать имя класса с цифры , как показано в этой демонстрации . Таким образом, основной синтаксис был написан правильно, но было применено плохое правило.
Ошибки, основанные на знаниях
Также называемые «поломками», эти ошибки возникают на более высоких концептуальных уровнях, где возникают незнакомые ситуации, когда необходимо решить проблему. Они являются результатом неполного понимания ситуации и часто приводят к экспериментам и поиску в сети (мы все были там!).
Пример, приведенный в этом случае, является длинным и довольно забавным (эй, мы все тоже были там!). Задача состояла в том, чтобы выровнять текст в ячейке таблицы справа. Участник пытается сделать множество шагов, чтобы получить это право, в том числе:
- Копирование и вставка устаревшего кода неправильным способом (
<align=right> - Перемещение неверного кода в ячейку таблицы и между тегами
<tr><td> - Поиск в Интернете несколько раз.
- Копирование и вставка HTML в его CSS.
- Помещение фиктивного текста в редактор, чтобы увидеть, работает ли редактор.
Участник в конце концов сдался через 6 минут, переходя к чему-то другому.
Результаты исследования
В итоге количество ошибок по трем вышеупомянутым категориям распределилось следующим образом:
- 70,9% всех ошибок были связаны с навыками.
- 16,9% были ошибками на основе правил.
- 12,1% были основаны на знаниях ошибок.
Как уже упоминалось, большинство ошибок были устранены в процессе выполнения задачи, но некоторые из них не были, и они сломались следующим образом:
- 4,3% всех ошибок, связанных с навыками, не были устранены.
- 39,6% основанных на правилах ошибок не были разрешены.
- 52,1% основанных на знаниях ошибок не были устранены.
Ошибки, связанные с навыками, включали, среди прочего, следующее:
- Типографский (большинство)
- Незакрытые теги
- Отсутствует разделитель (например, точка с запятой для строк CSS)
- Смешивание синтаксиса CSS с HTML или наоборот
Основанные на правилах ошибки включали:
- Использование устаревших элементов
- Неверные или несуществующие элементы, атрибуты или свойства
- Использование неправильного имени (например,
font-colorcolor - Ошибки в списках HTML (это было удивительно, но многие участники помещали такие элементы, как элементы
<p><li> - Неправильно написанный встроенный CSS (что-то вроде двойного удара)
- Невидимые элементы (это когда элемент не появляется на странице из-за отсутствия содержимого, высоты и т. Д., И участник временно не может понять, почему)
Основанные на знаниях ошибки включали:
- Неправильный базовый синтаксис для HTML-элементов, атрибутов и значений (например,
<align="right"> - Неправильный базовый CSS и синтаксис селектора (например, запись
div: color: red.div { } - Непонимание блочной модели и CSS-позиционирования.
Какой прогресс был достигнут в результате?
Поскольку это двухлетнее исследование, я связался с двумя авторами исследования и спросил, был ли достигнут какой-либо прогресс в создании инструментов на основе этих или других результатов. Томас Парк , один из авторов, успел доложить:
У нас есть несколько дизайнерских усилий, которые вышли из нашего исследования. В данный момент мы работаем над инструментом Snowball для создания современных интерактивных статей, целью которых является уменьшение количества ошибок для начинающих за счет использования ограниченных (но доступных) компонентов HTML / CSS / JS.
Он также объяснил:
У нас постоянное сотрудничество с Mozilla Webmaker . Мы наметили систему обратной связи об ошибках, разработанную на основе когнитивного источника ошибок HTML / CSS на основе исследования 2013 года (например, в основе лежит конкретное заблуждение или внимание / типографская ошибка). Мы намереваемся создать его как расширение Brackets, но пока еще мало что конкретно.
Последние мысли
Исследование 2013 года не было идеальным, но это хорошее начало, и, похоже, подобных исследований для HTML или CSS не существует (по крайней мере, я их не видел). Кроме того, Томас Парк указал мне на последующее исследование, которое я постараюсь осветить в следующей статье.
Как уже упоминалось, большинство ошибок обнаруживаются и исправляются. Но это замедляет прогресс для учеников, особенно когда коррекция не является концептуально обоснованной, а только создает видимость исправления. Проверка и линкеры кода могут помочь, но обычно это отдельный шаг. Даже когда ошибки кодирования указываются в текстовых редакторах с помощью цветов или индикаторов ошибок, иногда этого недостаточно. Я думаю, что текстовые редакторы, разработанные для начинающих, должны давать четкие указания на ошибки вместе с необязательным встроенным текстовым объяснением того, что не так и как это исправить.
Хотя такой процесс может несколько замедлить выполнение заданий, я думаю, что с более подробными объяснениями ошибок более крупные концепции станут более понятными для начинающих на более раннем этапе, что приведет к более сильным разработчикам при освоении новых навыков — потому что навыки будут изучены правильно.
Я думаю, что следующее утверждение из заключительных замечаний исследования хорошо подводит итог моего взгляда на это:
Когда новичок пишет код, который содержит много ошибок, но по-прежнему отображается по желанию, он получает положительный отзыв в виде правильно отформатированной веб-страницы. Эти ошибки являются скрытыми, остаются неразрешенными и усиливают ошибочное понимание, которое может стать трудным для преодоления.
В самом исследовании доступно гораздо больше деталей, в том числе таблицы с подробным описанием количества ошибок каждого типа, поэтому проверьте, если хотите больше углубиться в тему.