ворд скилс. 9_ Веб-дизайн и разработка WS. Программа повышения квалификации для преподавателей (мастеров производственного обучения) Практика и методика реализации образовательных программ среднего профессионального
 Скачать 4.04 Mb.
|
|
79 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Препроцессоры Для расширения возможностей CSS используют препроцессоры CSS. Они позволяют сохранять значения свойств в переменные, добавлять вычисления в CSS код. Самыми распространенными препроцессорами являются LESS, SASS и Stylus. Документация по препроцессору LESS. На английском языке. Документация по препроцессору SASS. На английском языке. http://lesscss.org/ http://sass-lang.com/ Документация по препроцессору STYLUS. На английском языке. Введение в препроцессор Less. На русском языке. http://stylus-lang.com/ https://legacy.gitbook.com/book/mrmlnc/ less- guidebook-for-beginners/details Заполните таблицу, указав особенности различных CSS-препроцессоров и примеры их использования для различных задач. Препроцессор Описание Примеры (переменные, циклы и т.п.) LESS SASS 80 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Stylus Запишите CSS-код с использованием выбранного препроцессора для решения какой- либо задачи в вашей трудовой деятельности. Насколько решение упростилось? Упражнение 7. «CSS-препроцессоры». Для фала less.html и связанного с ним less.css измените используемые стили CSS с помощью подключения препроцессора LESS таким образом, чтобы отображение веб-страницы в браузере не изменилось. 7-C ★ 7-B ★★ 7-A ★★★ Определить цвета и размер шрифта через переменные Добавьте вложенные правила. В дополнении к 7-С: Использование в правилах родительский селектор через оператор " & ". В дополнении к 7-В: Примените к странице и файлу методологию БЭМ, перепишите свойства в контексте элементов и модификаторов. 81 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Bootstrap Библиотека для быстрого создания прототипов страниц. Она содержит готовые CSS стили для множества элементов интерфейса, а также готовые js-скрипты для интерактивных элементов (слайдер, выпадающее меню, всплывающее окно). Помимо этого, библиотека содержит удобное управление сеткой макета для различных устройств (адаптивная верстка). Существует несколько версий библиотеки (отличаются по синтаксису и внешнему виду элементов). Последняя версия — Bootstrap 4.1. Официальная документация Bootstrap на английском языке. Перевод документации Bootstrap на русский язык. https://getbootstrap.com/ http://bootstrap-4.ru/ Сетка в библиотеке Bootstrap состоит из 12 колонок равной ширины. С помощью классов для колонок макета можно указывать ширину каждой колонки при различных размерах экрана. Класс для колонки указывается по схеме " .col-**-* ", где: ** - размер экрана, * - размер колонки в условных единицах (1 у.е. - 1/12 ширины экрана). Например, .col-* – для < 576px; .col-sm-* – для ≥ 576px; .col-md-* – для ≥ 768px; .col-lg-* – для ≥ 992px; .col-xl-* – для ≥ 1200px. Заполните таблицу, описав основные классы Bootstrup и приведя примеры их использования. Класс Описание Пример использования .container .container-fluid 82 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» .row .w-100 .no-gutters .col-**-auto ** - sm, md, lg, xl 83 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» .align-items-start .align-items-center .align-items-end .align-self-start .align-self-center .align-self-end .justify-content-start .justify-content-center .justify-content-end .justify-content-around .justify-content-between .order- 84 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» .offset- .ml-auto .mr-auto Изучите основные компоненты библиотеки Bootstrap 4, заполните таблицу ниже. Класс Описание Пример использования Уведомления Значки Группа кнопок Карты Модальное окно 85 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Навигационная панель Отслеживание прокрутки Упражнение 8. «Верстка Bootstrap». Сверстайте представленный макет страницы с учетом возможностей библиотеки Bootstrap. Используйте находящиеся в папке media материалы. 86 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» 8-C ★ 8-B ★★ 8-A ★★★ Сверстайте макет, убедитесь, что в нем три строки и разное число колонок в каждой из них. Определите ширину колонок для разных размеров экрана Определите вертикальное и горизонтальное выравнивание для всех колонок. Для одной из колонок добавьте смещение. В дополнении к 8-С: Добавьте к одной из ссылок в макете оформление из компонента «Значки» в Bootstrap. Добавьте в одну из колонок макета баннер с описанием с помощью компонента «Карты». В дополнении к 8-В: Добавьте к странице модальное окно с формой и кнопками. 5.7. КЛИЕНТСКОЕ ВЕБ-ПРОГРАММИРОВАНИЕ Javascript. Jquery. Взаимодействие с DOM Document Object Model – объектная модель документа, предоставляющая браузеру доступ к описанным с помощью HTML-кода элементам страницы. В настоящее время популярна библиотека JQuery, значительно сокращающая усилия JavaScript- программиста. Портал по JavaScript. Справочная информация и статьи по программированию на JavaScript. http://javascript.ru/ Заполните пустые поля на рисунке с типовым деревом элементов веб-страницы. Заполните таблицу, указав способ поиска и выбора элемента DOM с помощью библиотеки JQuery. 87 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Описание Примеры использования. Аналог в синтаксисе JQuery document.getElementById() Элемент с указанным id. el.getElementsByTagName() Массив элементов с указанным именем тега. document.getElementsByName() Массив элементов с указанным атрибутом name el.getElementsByClassName() Массив элементов с указанным именем класса. el.querySelectorAll() Массив элементов с указанным css- селектором. document. documentElement Элемент html. document.head Элемент head. document.body Элемент body. el.parentNode Родительский элемент элемента el el.previousSibling Предшествующий элемент элемента el el.nextSibling Следующий элемент элемента el el.childNodes Дочерние элементы элемента el el.firstChild Первый дочерний элемент элемента el el.lastChild Последний дочерний элемент элемента el Событие – сигнал о том, что что-то произошло. Если для наступившего события назначен обработчик (функция), он будет выполнен. Заполните таблицу, описав основные события браузера доступные в JavaScript. Событие Описание onClick onMouseMove 88 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» onKeyDown onLoad DOMContentLoaded onMove onSelect onChange onSubmit Заполните таблицу, описав основные функции таймера в JavaScript. Событие Описание setTimeout setInterval clearTimeout Примеры использования таймера в JavaScript-программах: 89 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Заполните таблицу, описав различные способы обработки событий элемента веб- страницы в виде функции function func() { alert(!); return true; } Способ Описание Пример Через свойство объекта … Через атрибут тега … Через регистрацию функции- обработчика в качестве свойства элемента Через addEventListener() Через JQuery $(function() { $(".logo").on("click", function() { alert(!); } ); }); $(function() { $(".logo"). click ( function() { alert(!); } ); }); 90 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Упражнение 9. «DOM». В представленном HTML документе dom.html создайте многоуровневый список ( ul , li ). Используйте JavaScript или JQuery для выполнения задания. Обработку событий реализуйте двумя способами: с помощью регистрации обработчика события addEventListener и назначения обработчика события элемента напрямую onclick 9-C ★ 9-B ★★ 9-A ★★★ Реализуйте выбор дочерних элементов списка: при клике мышкой на любой элемент списка он должен менять свой цвет. При повторном клике – элемент должен принимать исходный цвет. В дополнении к 9-С: При клике на заголовок, список его дочерних элементов должен "скрываться" или "раскрываться". Заголовки, дочерние списки которых скрыты, должны визуально выделяться. Визуальное выделение реализуйте несколькими способами: назначение стилей напрямую элементу ( element.style ); добавление класса для элемента через element.className , element.classList.add и element.classList.toggle В добавлении к 9-В: Добавить возможность снимать выбор с элемента или сразу с нескольких (при нажатой кнопке Ctrl). Реализовать прелоадер: весь контент страницы должен появляться только после полной загрузки всех ресурсов на странице или полной обработки и построения DOM ( onload и DOMContentLoaded ). Валидация форм Проверка введенных в элементах форм данных является очень типичной и часто возникающей задачей. Для ее решения можно использовать CSS и/или JavaScript. Статья “Form Validation Techniques” (Техники валидации форм). Автор: Ире Адеринокуна. На английском языке. https://bitsofco.de/form-validation-techniques/ CSS В CSS существует четыре специальных псевдокласса, применимых к полям формы: :valid (валидное поле), :invalid (невалидное), :required (обязательное) и :optional (необязательное). Их можно использовать, чтобы добавлять некоторые подсказки пользователям, заполняющим форму JavaScript Событие oninput (или иные для других элементов формы) наступает при изменении содержимого текстового поля. Обработчик события проверяет содержащиеся в поле данные и, при необходимости, выводит соответствующие сообщения. Зафиксируйте примеры организации валидации формы. Укажите, как подключить функцию-обработчик для валидации данных формы, как в обработчик попадает информация о параметрах и типе валидации, как результат отображается? 91 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Упражнение 10. «Валидация форм». Сверстайте форму, содержащую поля: ФИО, Пароль, E-mail, Номер телефона и кнопку "Отправить". Организуйте валидацию данных с помощью JavaScript. Переопределите обработчик события submit для формы. Успешно прошедшая валидацию форма должна отправлять данные на сервер. 10-C ★ 10-B ★★ 10-A ★★★ В обработчике для каждого элемента формы проверяйте: не пустое ли оно. В случае, если на форме присутствует хотя бы одно пустое поле – выведите предупреждение alert() Валидация должна происходить в момент отправки формы. В обработчике для каждого элемента формы проверяйте: не пустое ли оно. Запретите ввод телефонов, не начинающихся на "+7". Запретите ввод E-mail в домене yandex. Сформируйте единое сообщение о некорректных данных и выведите его около кнопки "Отправить". Валидация должна происходить в момент отправки формы. Осуществите проверку на все условия 10-В. Запретите ввод данных латинским алфавитом. Вся валидация должна проходить в режиме реального времени. В случае ввода некорректных данных, около поля должна появляться соответствующая надпись, а само поле выделено красным цветом. Кнопка "Отправить" должна быть недоступна (но видима), если какие- либо данные введены некорректно. Форма с некорректными данными не может быть отправлена даже по нажатии кнопки Enter. JavaScript. JQuery UI. Drag&Drop Drag and Drop (по-английски: тащи и бросай) – способ перемещения объектов с помощью мышки. Применяется для интерактивного взаимодействия с контентом веб-страницы. Технология активно использует различные события мыши. Заполните таблицу, приведя примеры обработки событий мыши при перемещении элементов веб-страницы в браузере. Событие Описание Пример dragstart Наступает при начале перемещения элемента dragenter Наступает при попадании элемента на элемент назначения. 92 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» dragover Периодически (каждые несколько сотен миллисекунд) наступает во время нахождения элемента над принимающей его зоной. dragleave Наступает в момент перетаскивания, когда курсор мыши выходит за пределы элемента. drag Наступает при перемещении элемента или выделенного текста. Заполните таблицу, приведя примеры использования библиотеки JQuery UI для реализации технологии Drag & Drop. JQuery UI Описание Пример draggable Делает возможным перетаскивание выделенных элементов с помощью мыши. sortable Позволяет отсортировать выбранные элементы путем перетаскивания мышью. 93 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Упражнение 11. «Технология Drag & Drop». В представленном HTML-документе dd.html создайте область, в которую можно перетаскивать изображения с рабочего стола. Используйте drag , dragstart , dragend , dragover , dragenter , dragleave 11-C ★ 11-B ★★ 11-A ★★★ Организуйте вывод миниатюр изображений на странице в специальной области. В добавлении к 11-С: Добавьте возможность перетаскивать миниатюры по области, выставляя их в произвольном порядке. (используя JQuery UI draggable). В добавлении к 11-В: Реализуйте запрет на наложение миниатюр друг на друга. Сделайте список миниатюр упорядоченным. Реализуйте возможность изменения позиции миниатюры в этом списке (используя JQuery UI sortable). Укажите основные приемы использования технологии Drag&Drop. Какие ее элементы этой можно использовать в других технологиях и приемах работы с элементами страницы? JavaScript. Анимация. Local Storage Анимация может быть организована не только с помощью CSS, но и с помощью JavaScript. В этом случае логика интерактивного взаимодействия может быть гораздо сложнее и интереснее. Заполните таблицу, приведя примеры использования методов и свойств для анимации в браузере. |