ОБЗОР ИНСТРУМЕНТАЛЬНЫХ СРЕДСТВ ДЛЯ НАЧАЛЬНОГО ОБУЧЕНИЯ ВЕБ-ТЕХНОЛОГИЯМ

Необходимость выбора интерфейса инструментального средства для обучения веб-технологиям в системе дополнительного образования связана с высокой скоростью развития данных технологий и их востребованностью в различных областях человеческой деятельности. Ряд авторов [5] высказывает мнение, что веб-разработка должна предполагать использование традиционных инструментальных средств - текстовых HTML редакторов. С другой стороны есть сторонники автоматической генерации кода на основе визуального образа [1]. Проанализировав применяемые на практике методы обучения и методики, изложенные в научных публикациях и учебно-методических пособиях можно сделать вывод, что в настоящий момент в системе дополнительного образования в основном применяются текстовые редакторы, а WYSIWYG менее распространены. Недостаток экспериментальных исследований с вижуал редакторами и как следствие отсутствием методических разработок по их изучению может быть причиной отказа от их применения в процессе обучения. Рассмотрим проблематику использования различных технологий создания сайтов в контексте начального обучения. Текстовые веб-редакторы предполагают написание HTML-разметки  и добавление различных стилей «вручную», а в визуальных редакторах html-разметка создается при помощи компонентов, визуализированных непосредственно в интерфейсе редактора. Выбор инструментального средства для начального обучения ставит проблему мотивации учащихся писать код вручную при наличии альтернативных инструментальных средств, создающих код автоматически на основе визуального образа. Важно не перегрузить подростков информацией, но при этом заложить базу для дальнейшего обучения и мотивировать их к познанию новых технологий. Большой объем сложный для восприятия информации может вызвать когнитивную перегрузку, влияющую на работоспособность и общее негативное отношение к изучаемым технологиям. С другой стороны, автоматизация может заслонять понимание смысла верстки и важно найти оптимальное соотношение применения визуальных и текстовых редакторов кода чтобы, используя инструментальное средство упрощающее работу с кодом у учащихся оставалось понимание того, что они делают. Ручная верстка для начинающих веб-разработчиков — это гораздо более тяжелый процесс особенно в сравнении с автоматизированной версткой с помощью WYSIWYG-редакторов. Но набор кода вручную принесет пользу профессиональному мастерству т.к. способствует непроизвольному изучению особенностей разметки и стилей, пониманию смысла создаваемых тегов и атрибутов. Важно отметить, что современные HTML/CSS редакторы имеют достаточно большой спектр встроенных и дополнительных функций, позволяющих удобно писать код.                                                                                                К недостаткам ручной верстки можно отнести необходимость специализированных знаний, опечатки и большие временные затраты на самостоятельный ручной ввод кода.                                                                                                     Ошибки, совершаемые студентами при наборе HTML-разметки ручным способом, вызывают сомнения в правильности синтаксиса языка, а ухудшает ситуацию отсутствие моментальной обратной связи. Чтобы повысить энтузиазм к веб-разработке важно уже на начальном этапе видеть результат своего труда, а поскольку данная область действительно непроста в изучении и требует много времени, то как раз применение технологий преимуществом которых является наглядность поможет почувствовать себя увереннее и мотивирует к дальнейшему обучению. Стоит отметить визуальные редакторы кода. Само название WYSIWYG дословно переводится - “что вижу, то и получаю” и действительно данные редакторы имеют очень тесную связь между конечным результатом и используемыми для его достижения средствами. Вижуал средства помогут ускорить учебный процесс и избавить обучаемых от монотонной и скучной работы, понижающей мотивацию. Главный недостаток WYSIWYG редакторов - дописывание лишних тегов и символов для гарантированного достижения визуального эффекта. Избыточный и неправильный код негативно сказывается на индексации сайтов поисковыми системами, скорости их загрузки и затрудняет понимание семантики разметки. Следовательно при использовании визуальных редакторов важен навык поиска и устранения ошибок для обеспечения валидности кода. Скорость одно из главных преимуществ визуальных редакторов в противопоставлении текстовым - не нужно тратить время на написание кода. Но скорость несколько неоднозначное преимущество WYSIWYG редакторов, ведь в текстовом редакторе она складывается из двух составляющих: профессионализма и опыта. Профессиональный разработчик за несколько минут может создать меню на странице сайта, за тоже время он это сделает и в визуальном редакторе. Но с тем же самым заданием обучаемый веб-разработке подросток может разбираться и несколько часов, поскольку в отличии от профессиональных верстальщиков, взаимодействующих с кодом практически ежедневно учащиеся занимаются версткой только во время еженедельных уроков.          Перспективным направлением позволяющим нивелировать недостатки обоих типов редакторов может быть инструментальное средство с комбинированным режимом. Как отмечалось ранее ручная верстка может показаться учащимся скучной и однообразной, а при частичной автоматизации она будет ощущаться как менее тяжелая. Применение комбинированного инструментального средства должно помочь заложить у учащихся основу для дальнейшего обучения веб-разработке и привести к быстрому написанию «чистого» кода при использовании любых типов редакторов. Комбинированный редактор позволит переключаться между режимами работы. Но важно чтобы при использовании комбинированного редактора учащиеся сохранили понимание смысла верстки в случае приоритетного использования визуального режима.