Учебная программа "Веб-разработка"

. CSS: блочная модель. Виды селекторов в CSS.Группирование, наследование, каскадирование. Стандарт HTML5. Семантическийкод.Применениестилевыхправил. Раздел 5. Стандарт HTML5. Раздел 6. Стандарт CSS3. Псевдоклассы и псевдоэлементы. Анимация в CSS. Переходы (transition). Стандарт CSS3. Медиа­запросы. Директива @supports. Теория   фиксированной,   резиновой,   адаптивной   и   отзывчивой верстки.Классы   устройств   и   контрольные   точки.Общие   сведения   о кроссбраузерной верстке. Концепция многоколоночной разметки CSS3 columns. CSSFlexbox  (FlexibleBoxLayoutModule).Терминология.   Создание  flex­ контейнера. Свойства flex­контейнера. Свойства flex­элемента. CSSGridLayout. Основные понятия. Созданиесетки. Позиционирование элементов.   Слои.   Именованные   элементы   сетки.   Свойства   контейнера   и элементов. Поддержка браузерами. Раздел 7. Способы верстки. Паттерны верстки. Фрэймворки и библиотеки. Верстка макета в формате PSD. Преимущества колоночной вёрстки. 12­ grid layout. 12­grid   layout.   Способы   создания:  HTML­   и  CSS­сетки,   применение фрэймворков. Тестирование. Создание отладочной сетки. CSS­фреймворки. TwitterBootstrap. CSS­фреймворки.   Динамические   языки   стилей.   Препроцессоры   Sass иLess. JavaScript.   Основные   понятия.   Синтаксис   языка.   Операторы   и выражения. Функции. Рисование на холсте. Библиотека jQuery. Внедрение плагинов. Фреймворки AngularJS и ReactJS – назначение, принципы разработки. Рецепты CSS. Практические приемы верстки. Минимизация CSS­кода. Раздел 8. Обобщение изученного. Доработка проектов учащихся. Обобщающее занятие. Демонстрация проектов учащихся. ОЖИДАЕМЫЕ РЕЗУЛЬТАТЫ Ожидаемые результаты реализации данной образовательной программы соответствуют поставленной цели и комплексу задач:  учащиеся   профориентированы   и   мотивированы   к   познанию   и творчеству, развиты их положительные личностные качества;  учащиеся ориентируются в интернет­пространстве, знают и   учащимися   понимают основные понятия и термины веб­разработки;   знания, приобретеныпрактические   умения   и   навыки   в   области   веб­ дизайна, а именно: усвоены   теоретические o в области HTML, в том числе и стандарта HTML5; o в области CSS, в том числе и стандарта CSS3; o в области требований к оформлению кода веб­документа, в том числе и соответствия стандарту W3C; o в области JavaScript (начальные сведения); o в области создания и обработки изображений, в том числе и анимаций; o в области создания PSD­макетов сайта; o в области верстки из PSD­макетов; o в   области   принципов   работы   с   фрэймворками   и современных приемов верстки;  учащиеся   могут   выполнять   тестовые   задания   и   разрабатывать собственные проекты;  результативность участияучащихся в конкурсах и олимпиадах в области веб­дизайна, публичных представлений результатов своей деятельности. ФОРМЫ ПОДВЕДЕНИЯ ИТОГОВ РЕАЛИЗАЦИИ ПРОГРАММЫ Подведение   итогов   реализации   программы   будет   проводиться   в следующих формах:  демонстрация проектов учащихся;  результативность участия в конкурсах по веб­дизайну;  выполнение учащимися тестовых заданий. ФОРМЫ И МЕТОДЫ РЕАЛИЗАЦИИ ПРОГРАММЫ Реализация данной образовательной программы может основываться на традиционных и нетрадиционных формах и методах работы, при условии, что они направлены на создание оптимального климата для воспитания и развития учащихся, раскрытия их личностного потенциала. Предлагается   проанализировать   следующие   рекомендуемые   формы обучения:  кооперировано­групповая   (группы   учащихся   выполняют   часть одного объемного задания);  бригадная   (временные   группы   для   выполнения   определенного задания);  парная (работа в парах над выполнением одного задания).   индивидуально­групповая   (поочередная   работа   с   каждым звеньевая (постоянные группы выполняют задание по цепочке); учащимся; На   протяжении   курса   (начиная   с   первых   занятий)   учащиеся   готовят свой собственный проект (в командной или индивидуальной работе). Такой подход необходим для того, чтобы каждое приобретенное знание или навык не забывались, а развивались и совершенствовались. К примеру, если на тему «Стандарт HTML5» отведено 8 часов, это не значит, что в дальнейшем курсе обучающиеся   не   используют  HTML5.  Все   приобретенные   знания   и   навыки должны использоваться постоянно, с момента их получения и до окончания курса. При   работе   в   команде   важно,   чтобы   каждый   учащийся   приобрел практические   навыки   по   каждой   из   тем,   для   чего   лучшим   методом   будет следующий: команда совместно обсуждает и разрабатывает дизайн будущего сайта на основе идей каждого участника и под руководством преподавателя, после   чего   каждый   участник   команды   (или   группа   из   двух   участников) разрабатывает свою часть, представляющую отдельную полную веб­страницу, содержащую   основные   элементы   как  HTML,   так  CSS  верстки   (сочетание кооперировано­групповой   и   бригадной   форм   обучения).   Нежелательным представляется   асимметрический   метод   работы,   когда   учащийся   работает, например, только над CSS, или только над созданием разметочной сетки и т.д. (сочетание кооперировано­групповой и звеньевой форм), так как при этом учащийся  не  приобретет  достаточные  практические   навыки  в  областях, не примененным им на практике. С другой стороны, в отдельных случаях такой подход   (звеньевая   форма   обучения)   также   может   иметь   место,   например, учитывая индивидуальность учащегося. В   случае,   когда   учащиеся   затрудняются   с   выбором   направления проектной работы (не могут найти подходящую тему), педагог может помочь им в поиске. При этом необходимо помнить, что преимущественным является самостоятельный   (без   помощи   педагога)   выбор   учащимися   темы   проекта. Таким образом, помощь педагога должна проявляться в крайнем случае и по возможности не через прямое указание, а через стимулирование умственной деятельности.   Необходимо   также   помнить   о   важнейших   принципах размещения информации в Интернете:  всеми силами избегать дублирования информации (нельзя размещать на своем  сайте  информацию, уже  имеющуюся   в  сети,  поскольку   это  не имеет смысла и «загрязняет» информационное пространство);  копирование   и   цитирование,   конечно   же,   могут   меть   место   в определенном объеме, если это необходимо, но с обязательной ссылкой на источник;  обязательное соблюдение авторских прав. Для   внимания   предлагаются   возможные   направления   для   проектной работы (темы сайтов):  сайт, посвященный другому проекту учащегося или группы учащихся (это   может   быть   его   (их)   выступление   на   конференции,   творческая работа по другому направлению);  сайт­визитка   учащегося,   если   он   имеет   хобби   (сайт   фотографа, художника и т.п.)  сайт­визитка   компании(представим,   что   в   будущем   данная   группа обучающихся составит компанию, занимающуюся сайтостроением);  сайт­визитка   творческой   группыпо   тому   или   иному   научному   или культурному вопросу;  информационный ресурс (необходимо помнить о принципах размещения информации  в Интернете,  перечисленных  выше, поэтому  при  выборе данного   направления   нужно   быть   особенно   осторожным   –   сегодня трудно предоставить новую информацию по большинству направлений);  сайт   единомышленников   (пропаганда   или   агитация;   сайт   должен соответствовать   общепринятым   моральным   нормам   и   принципам,   не содержать незаконной информации);  сайт   класса   или   группы   (при   наличии   богатой   общественной   или научной жизни);  сайт   города,   поселка,   деревни   (с   тем   контентом,   которого   нет   на   контент   должен   быть официальном/неофициальном   сайтах; интересным);  сайт мероприятия (городского праздника, концерта, важного события из жизни школы и т.п.);  любая   из   вышеперечисленных   тем,   но   компания   (группа,   событие) являются вымышленными (коммерческая компания, сайт школы, сайт творческой личности и т.п.) – в таком случае проект не рекомендуется размещать в сети, так как он не несет полезной информации и служит лишь для обучения. Важной   компетенцией   для   будущего   специалиста   в   сфере информационных   технологий   (IT)   и,   в   частности,   в   сфере   веб­дизайна, являются коммуникационные навыки, то есть навыки общения с коллегами, руководством   проекта   и   заказчиком;  front­end­   с   back­end­разработчиком, back­end­разработчика с дизайнером и так далее. В следствие этого, требуется развивать данные навыки в учащихся на протяжении всего курса обучения. Реализовать обучение коммуникационным навыкам можно только на практике с использованием следующих методов:  активное обсуждение с учащимися даже простых заданий;  активное обсуждение проектов;  совместное обсуждение дизайнов;  использование   (перечисляются   по   степени   преимущества) кооперировано­групповой,   бригадной,   звеньевой   форм   обучения,   так как они стимулируют активное общение внутри кооперации (группы);  по   возможности   исключение   или   сведение   к   минимуму дифференцированно­групповой   (дифференциация   по   успеваемости)   и индивидуально­групповой форм обучения. Таким   образом,   учитывая   вышеперечисленные   факторы,   наилучшей формой   обучения   представляется   сочетание   кооперировано­групповой   и бригадной (или парной) форм обучения. В соответствии с типовой программой дополнительного образования, в отдельных случаях при наличии объективных причин (подготовка к конкурсу или олимпиаде, работа с одаренными учащимися и т.п.) возможно применение индивидуальных форм обучения. В   процессе   приобретения   учащимися   практических   навыков   можно выделить выполнение ими трех категорий заданий:  обучающие задания (необъемные, на несколько минут, однородные по содержанию   тренировочные   задания,   предназначенные   для   апробации полученных   знаний   на   практике,   визуального   анализа   применения различных значений свойств селекторов или атрибутов тегов, например «создать   тривиальный   каркас   веб­документа»   или   «создать   флекс­ контейнер и разместить в нем несколько флекс­элементов»);  тестовые задания (отличаются большим объемом и более разнородным содержанием,   предназначены   для   оценки   знаний   учащихся   с последующим обсуждением и коррекцией, и приобретения последними навыков применения своих знаний в комплексе, например «создать веб­ страницу (HTML  +  CSS) с размещением на ней нескольких различных элементов»   или   «спроектировать   и   реализовать   отзывчивый   дизайн страницы для основных классов устройств»);  проектная   работа   (каждый   учащийся   на   протяжении   всего   процесса обучения работает над своим крупным проектом или частью общего, коллективного   проекта,   постоянно   совершенствуя   и   развивая   его; целесообразно оказать помощь учащимся в выборе проекта и уточнить детали,  исходя   из   чего  преимущественной   формой  будет  работа   над общим (коллективным) проектом). В соответствии с содержанием программы и исходя из особенностей предметной отрасли рекомендуютсяследующие методы обучения (по степени преимущества):   метод   проблемного   обучения   (перед   изложением   материала   ставится проблема или техническая задача, после чего, совместно с учащимися, ищется метод решения данной задачи);  эвристический   метод   (активный   поиск   решения   самостоятельно сформулированных или выданных задач);  объяснительно­иллюстративный метод (беседа,дискуссия, обсуждение, элементы лекции, литература);  репродуктивный метод (на основе образца) рекомендуется только при изучении   стандартных   современных   паттернов   («рецептов»)   веб­ проектирования. Неотъемлемой   частью   процесса   обучения   является   и   воспитание учащихся.   Могут   применяться   массовые,   групповые   или   индивидуальные формы воспитания. Воспитательные мероприятия при реализации программы проводятся в соответствии   с   Концепцией   непрерывного   воспитания   детей   и   учащейся молодежи основных учетом составляющихвоспитаниядетейиучащейсямолодежи:  с       гражданское и патриотическое воспитание;  идеологическое воспитание;   духовно­нравственное воспитание;  воспитание культуры безопасности жизнедеятельности;  эстетическое воспитание;  воспитание культуры здорового образа жизни;  экологическое воспитание;  семейное и гендерное воспитание;  трудовое и профессиональное воспитание. Таким образом, образовательная программа«WEB­дизайн» направлена на   формирование   основных   компетенций   в   области   веб­дизайна,   на нравственное   и   духовное   развитие   учащегося,   на   становление   и самоопределение его личности.Реализация программы требует традиционных и методов работы,направленныхнасозданиеоптимальныхусловийдлядостиженияожидаем ых   результатоввобучении,воспитании,развитииучащихся,удовлетворенииих индивидуальныхвозможностей,потребностей,интересов,раскрытияличностног о потенциала каждого.  нетрадиционных форм и         ЛИТЕРАТУРА И ИНФОРМАЦИОННЫЕ РЕСУРСЫ и   –   Режим   доступа:   –   Режим   доступа:   //  CSS3   [Электронный   ресурс]. 1. CSS GridPlayground [Электронный ресурс]. – Режим доступа: //  https://www.cssgridplayground.com/. Дата доступа: 10.08.2018г. 2. CSS  https://html5book.ru/css­css3/. Дата доступа: 18.08.2018г. 3. CSS3 columns [Электронный ресурс]. – Режим доступа: //  https://html5book.ru/css3­columns/. Дата доступа: 18.08.2018г. 4. CSS3   flexbox   [Электронный   ресурс]. https://html5book.ru/css3­flexbox/. Дата доступа: 15.08.2018г. 5. CSS­live [Электронный ресурс]. – Режим доступа: // http://css­live.ru/. Дата доступа: 12.08.2018г. 6. HTML   и   HTML5   [Электронный   ресурс].   –   Режим   доступа:   // https://html5book.ru/html­html5/. Дата доступа: 14.08.2018г. 7. HTML5   Book   [Электронный   ресурс]. https://html5book.ru/. Дата доступа: 18.08.2018г. 8. Htmlbook   http://www.htmlbook.ru/. Дата доступа: 11.08.2018г. 9. Автопрефиксер CSS онлайн [Электронный ресурс]. – Режим доступа: //  https://autoprefixer.github.io/ru/. Дата доступа: 21.08.2018г. 10. Большая   статья   про   гриды   (CSS   GridLayout)   [Электронный   ресурс].   – Режим   доступа:   //  http://css­live.ru/css/bolshaya­statya­pro­gridy­css­grid­ layout.html/. Дата доступа: 17.08.2018г. 11. Визуальное   руководство   по   свойствам   Flexbox   из   CSS3   [Электронный ресурс]. – Режим доступа: // http://css­live.ru/articles/vizualnoe­rukovodstvo­po­ svojstvam­flexbox­iz­css3.html/. Дата доступа: 15.08.2018г. 12. Выучить CSS Grid за 5 минут [Электронный ресурс]. – Режим доступа: // https://proglib.io/p/css­grid/. Дата доступа: 17.08.2018г. 13. Комолова, Н. Самоучитель HTML / Н. Комолова, Е. Яковлева. – СПб: Питер, 2011.   –   Режим   доступа: [Электронный   ресурс].   –   Режим   доступа:   // //   // [Электронный   ресурс]. 14. Новые   HTML5   тэги   [Электронный   ресурс].   –   Режим   доступа:   // http://www.wisdomweb.ru/HTML5d/index.php/. Дата доступа: 15.08.2018г. 15. Палитры     –   Режим   доступа: http://www.colorion.co/. Дата доступа: 10.08.2018г. 16. Разметка CSS [Электронный ресурс]. – Режим доступа: //  https://idg.net.ua/blog/uchebnik­css/razmetka­css/. Дата доступа: 17.08.2018г. 17. Рецепты CSS [Электронный ресурс]. – Режим доступа: // https://wp­ lessons.com/category/recepty­css/. Дата доступа: 24.08.2018г. 18. Руководство   по   оформлению   HTML/CSS   кода   от   Google[Электронный ресурс].  –  Режим   доступа:  //  https://m.habr.com/post/143452/.   Дата   доступа: 23.08.2018г. 19. Стандарты   https://www.w3.org/standards/. Дата доступа: 26.08.2018г.   –   Режим   доступа: [Электронный   ресурс].   //   //