ворд скилс. 9_ Веб-дизайн и разработка WS. Программа повышения квалификации для преподавателей (мастеров производственного обучения) Практика и методика реализации образовательных программ среднего профессионального
 Скачать 4.04 Mb.
|
|
ТРЕБОВАНИЯ ТЕХНИЧЕСКОГО ОПИСАНИЯ КОМПЕТЕНЦИИ "ВЕБ-ДИЗАЙН И РАЗРАБОТКА" СОЮЗА “МОЛОДЫЕ ПРОФЕССИОНАЛЫ (ВОРЛДСКИЛЛС РОССИЯ)” (РАЗДЕЛ WSSS "ГРАФИЧЕСКИЙ ДИЗАЙН ВЕБ-СТРАНИЦ") КОНТРОЛИРУЕМЫЕ ПОКАЗАТЕЛИ 1 2 3 4 5 6 7 8 9 10 11 ЗН А ТЬ Структуру и общепринятые элементы веб- страниц различных видов и назначений V V Вопросы, связанные с когнитивными, социальными, культурными, технологическими и экономическими условиями при разработке дизайна V V Как создавать и оптимизировать графику для сети Интернет Как создавать дизайн по предоставляемым инструкциям и спецификациям V Какие умения и навыки необходимы для выбора цвета, типографики и композиции V Принципы и методы адаптации графики для использования ее на веб-сайтах Правила поддержания фирменного стиля, бренда и стилевых инструкций V V Ограничения, которые накладывают мобильные устройства и разрешения экранов при использовании их для просмотра веб-сайтов Принципы построения эстетичного и креативного дизайна V V Современные стили и тенденции дизайна V V V ТРЕБОВАНИЯ ТЕХНИЧЕСКОГО ОПИСАНИЯ КОМПЕТЕНЦИИ "ВЕБ-ДИЗАЙН И РАЗРАБОТКА" СОЮЗА “МОЛОДЫЕ ПРОФЕССИОНАЛЫ (ВОРЛДСКИЛЛС РОССИЯ)” (РАЗДЕЛ WSSS "ГРАФИЧЕСКИЙ ДИЗАЙН ВЕБ-СТРАНИЦ") КОНТРОЛИРУЕМЫЕ ПОКАЗАТЕЛИ 1 2 3 4 5 6 7 8 9 10 11 У М ЕТЬ Создавать и анализировать разработанные визуальные ответы на поставленные вопросы, в том числе об иерархии, типографики, эстетики и композиции V V V Создавать, использовать и оптимизировать изображения для веб-сайтов Анализировать целевой рынок и продукцию, которую продвигает, используя дизайн V Выбирать дизайнерское решение, которое будет наиболее подходящим для целевого рынка V Принимать во внимание влияние каждого элемента, который добавляется в проект во время разработки дизайна V Использовать все требуемые элементы при разработке дизайна 31 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Учитывать существующие правила корпоративного стиля V Создавать «отзывчивый» дизайн, который будет отображаться корректно на различных устройствах и при разных разрешениях Придерживаться оригинальной концепции дизайна проекта и улучшать его визуальную привлекательность V Превращать идею в эстетичный и креативный дизайн V Сделайте общий вывод об корректности набора контролируемых показателей для оценки ПК 8.1. и ПК 8.2. Как проверить корректность набора для проверки сформированности профессиональной компетенции ПК 8.3? Шаг 3. Разработка спецификации профессиональных компетенций для экзаменов по профессиональным модулям. Для каждой профессиональной компетенции указывается репродуктивная и продуктивная профессиональная деятельность, характерная для обладающих ею профессионалов. Таким образом, непосредственным индикатором освоения компетенции является возможность и успешность получения из исходных материалов продукта с заданными характеристиками путем применения заданных процессов. В зависимости от характера деятельности и затрачиваемого на получение готового продукта времени, предполагается оценка либо продукта (непосредственно результата деятельности), либо воспроизводимых процессов, что также указывается в спецификации. Выполнение описанной профессиональной деятельности предполагает наличие у дополнительных индикаторов: знаний, умений и навыков. Их сумма полностью описывает компетенцию, а наличие у сотрудников достаточно для осуществления соответствующей деятельности. Для организации процесса оценки освоения компетенции эти индикаторы объединяются в группы, каждой из которой ставится в соответствие контролируемый показатель. 32 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» ПК 8.1. Разрабатывать дизайн-концепции веб-приложений в соответствии с корпоративным стилем заказчика. 1 КАРТА ПРОФЕССИОНАЛЬНЫХ ДЕЙСТВИЙ ДЛЯ ОЦЕНКИ КОМПЕТЕНЦИИ ПК 8.1. Исходные материалы Технологический этап (процесс) Результат (продукт) Объект оценки Репродуктивная деятельность Набор функций веб- страницы. Сопоставление функциям веб- страницы соответствующих элементов ее внутренней структуры. Перечень элементов веб- страницы. Продукт Продуктивная деятельность Описание предметной области и требований к сайту. Анализ предметной области и актуальных требований к результату. Список веб-страниц с заданной функциональностью. Схема пользовательского интерфейса. Продукт Перечень элементов веб- страницы. Распределение элементов веб- страницы в ее визуальном пространстве. Эскиз пользовательского интерфейса веб- страницы. Набор эскизов веб- страниц. Согласование эскизов между собой и их коррекция. Эскизы страниц веб- сайта. Сформулируйте свои выводы о достаточности оценки продукта для контроля степени освоения компетенции. Есть ли необходимость для ПК 8.1. оценивать в условиях профессионального экзамена не только продукт, но и процесс? 1 По материалам выполнения проекта «СОЗДАНИЕ МОДЕЛИ РАЗРАБОТКИ КОНТРОЛЬНО-ИЗМЕРИТЕЛЬНЫХ МАТЕРИАЛОВ НА ОСНОВЕ МЕТОДИКИ РЕВЕРСИВНОГО ПРОЕКТИРОВАНИЯ ОБРАЗОВАТЕЛЬНЫХ ПРОГРАММ СПО» в рамках исполнения Государственного задания № 27.4296.2017/НМ. 33 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» ПАСПОРТ КОНТРОЛЯ И ОЦЕНКИ ПРОФЕССИОНАЛЬНОЙ КОМПЕТЕНЦИИ ПК 8.1. Контролируемые показатели Индикаторы Знание Умение Навык Разработка эскизов пользовательского интерфейса с помощью профессионального инструментария. 1. Используемых в профессиональном инструментарии графических примитивов и схематичных обозначений наиболее распространенных элементов веб-страницы. 2. Современных методик разработки графического интерфейса. 1. Формировать структурно корректные, понятные профессионалам эскизы пользовательского интерфейса для веб- страниц с заданным набором элементов. 2. Создавать дизайн с применением промежуточных эскизов, требований к эргономике и технической эстетике. 1. Работы в специализированном (в том числе и онлайн) программном обеспечении для профессиональной разработки и представления эскизов веб- страниц. Обоснование выбора эскиза для дальнейшей разработки. 3. Функционального назначения, возможностей и способов использования наиболее распространенных элементов веб-страниц. 4. Правил и принципов организации структуры веб- страниц наиболее распространенных типов. 5. Норм и правил выбора стилистических решений. 3. Выбирать тип веб- страницы исходя из функциональных требований к ней. 4. Выбирать наиболее подходящее для целевого рынка дизайнерское решение 2. Формирования эскизов пользовательского интерфейса для веб- страниц заданного типа и функциональности. Разработка схемы пользовательского веб-интерфейса. 6. Принципов и способов организации навигации между страницами одного веб-сайта. 7. Требования к связности отдельных страниц веб- сайта и ее влияние на индексацию сайта в поисковых машинах и поведение посетителей. 5. Формировать набор веб-страниц сайта и определять их функционал в соответствии с поставленными перед сайтом задачами. 6. Представлять схему пользовательского веб- интерфейса в графическом виде. 3. Использования профессионального инструментария (в том числе и онлайн) для представления интерактивно связанных между собой эскизов всех веб-страниц сайта. Реализация требований стандартов к пользовательскому интерфейсу и корпоративному стилю во всех элементах пользовательского интерфейса веб- приложения. 8. Особенностей влияния предметной области на поведение посетителя веб- сайта и тип веб- страниц. 9. Стандартов пользовательского интерфейса. 7. Учитывать распределение функций между отдельными страницами сайта в соответствии с предметной областью. 8. Разрабатывать интерфейс пользователя для веб-приложений с использованием современных стандартов. 4. Выбора типа навигационных, функциональных и информационных элементов исходя из требований предметной области, корпоративного стиля и других норм. 5. Выбора способа организации навигации между веб- страницами сайтов в соответствии с его предметной области. 34 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» На основе приведенных способов контроля и оценки результатов освоения профессионального модуля ПМ.08. "Разработка дизайна веб-приложений" заполните Карту профессиональных действий для оценки компетенции ПК 8.2 и Паспорт контроля и оценки профессиональной компетенции ПК 8.2. ПК 8.2. Формировать требования к дизайну веб-приложений на основе анализа предметной области и целевой аудитории. КАРТА ПРОФЕССИОНАЛЬНЫХ ДЕЙСТВИЙ ДЛЯ ОЦЕНКИ КОМПЕТЕНЦИИ ПК 8.2. Исходные материалы Технологический этап (процесс) Результат (продукт) Объект оценки Репродуктивная деятельность Продуктивная деятельность 35 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» ПАСПОРТ КОНТРОЛЯ И ОЦЕНКИ ПРОФЕССИОНАЛЬНОЙ КОМПЕТЕНЦИИ ПК 8.2. Контролируемые показатели Индикаторы Знание Умение Навык 36 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Шаг 4. Сформулируйте задание для проверки способности достижения заданных контролируемых показателей и уровня освоения профессиональных компетенций. Задание формируется таким образом, чтобы его результат (продукт) или проводимые процессы охватывали все контролируемые показатели. В качестве основы для такого задания рекомендуется брать отдельные модули Конкурсных заданий компетенций Союза “Молодые профессионалы (Ворлдскиллс Россия)”, относящихся к проверяемому виду профессиональной деятельности, а затем дорабатывать их до соответствия всем выявленным ранее контролируемым показателям. В процессе доработки рекомендуется учитывать: возможную избыточность или недостаточность Конкурсных заданий по отношению к требованиям ФГОС СПО или Профессиональных стандартов; сложность и выполнимость задания экзаменуемыми (его соответствие проверяемым компетенциям); распространенность сформулированных в задании ПОЭ задач в реальной профессиональной деятельности; мнение представителей индустрии и работодателей; мнение экспертов в данной профессиональной области; наличие материально-технической базы и возможностей приобретения расходных материалов для проведения ПОЭ (в случае затруднений возможна замена дорогостоящих процессов их моделированием или осуществление их отдельных элементов, при условии, что это не уменьшает валидности результатов ПОЭ). Для рассматриваемого набора компетенций ПМ.08. сформулируйте задание профессионального экзамена в форме практико-ориентированного экзамена (ПОЭ), охватывающее все контролируемые показатели. Используйте приведенный ниже макет. ОПИСАНИЕ ЗАДАЧИ Постановка модельной задачи, текстовое описание ожидаемого результата, его основные характеристики, описание реальных ситуаций при профессиональной деятельности, в которых необходимо выполнять подобное задание, распространенность и актуальность задачи на сегодняшний день. ДОСТУПНАЯ ЛИТЕРАТУРА Перечень доступных для экзаменуемых во время проведения экзамена источников информации, а также регламент и ограничения на такое использование. 37 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» ЦЕЛЬ И НАЗНАЧЕНИЕ РЕЗУЛЬТАТА Точная цель и назначения получения продукта (проведение процесса) в заданных модельных условиях. ИСХОДНЫЕ МАТЕРИАЛЫ Перечень исходных материалов для выполнения задания. ТРЕБОВАНИЯ К РЕЗУЛЬТАТУ ВЫПОЛНЕНИЯ ЗАДАНИЯ ЭКЗАМЕНА Перечень требований к представлению результата выполнения задания (проведению и демонстрации процесса) для оценки. ДОПУСТИМЫЕ ТЕХНИЧЕСКИЕ СРЕДСТВА И ТЕХНОЛОГИИ Перечень допустимых для выполнения задания ПОЭ технических средств и оборудования, применяемых технологий, проводимых процессов. ЗАПРЕЩЕННЫЕ ТЕХНИЧЕСКИЕ СРЕДСТВА И ТЕХНОЛОГИИ Перечень запрещенных к использованию в ходе выполнения задания технических средств и технологий, даже если они имеются в месте проведения экзамена. 38 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Шаг 5. Разработка набора аспектов оценки, соответствующих им баллов и пороговых баллов для каждого контролируемого показателя. Для каждого контролируемого показателя формируется список объективных и субъективных аспектов его оценки. Объективные аспекты должны в наибольшей степени отражать освоение соответствующей компетенции, тогда как субъективные – оценивать качество применения экзаменуемым соответствующих компетенции знаний и умений на практике для решения реальных (модельных) профессиональных задач. Таким образом, объективные аспекты должны полностью охватывать контролируемый показатель, тогда как субъективные – детализировать оценку его выполнения. Любой аспект может оценивать процесс (способ достижения результата, без учета самого результата) или продукт (достигнутый результат, без учета способа достижения). Таким образом набор аспектов может оценивать продукт, процесс или продукт и процесс одновременно. Оценивающие процесс аспекты применяются в случаях, если продукт сложно оценить или результат не может быть достигнут за отведенное время, а также в случаях необходимости и важности: проверки правильности, корректности, оптимальности выбора и/или использования инструментов, технических средств; оценки корректности проведения этапов технологического процесса; точности соблюдения регламентов и правил; учета и оценки временных факторов; оценки промежуточных этапов процесса изготовления продукта, которые будут потеряны в результате продолжения работ. Оценивающие продукт аспекты применяются в случаях, если: неважно, каким образом получен продукт, какие использованы методы (технологии); сложно обеспечить процедуру наблюдения за процессом (например, выполняется когнитивная деятельность или процесс протекает длительное время); возможно и предполагается очное представление экзаменуемым продукта и ответы на вопросы экзаменаторов (защита проекта). После формирования всех аспектов по всем показателям всех компетенций, каждому из них, исходя из относительной важности, ставится в соответствие балл от 0.1 до 2. Суммарное значение всех баллов по всем аспектам задания ПОЭ должно составлять 100 баллов. Затем для каждого контролируемого показателя подбирается такой пороговый балл, достижение которого соответствовало бы его выполнению. Если пороговый балл равен суммарному баллу всех аспектов – набор аспектов и их баллов следует скорректировать и переработать. В завершении процесса формирования списка аспектов проверяется, что выполнение любых 50% объективных аспектов каждого показателя является необходимым условием его выполнения. Если такого критерия недостаточно, некоторые объективные аспекты явно отмечаются, как необходимые для выполнения всего показателя. ПК 8.1. Разрабатывать дизайн-концепции веб-приложений в соответствии с корпоративным стилем заказчика Показатели Но м ер и т и п Аспекты оценки Балл П о р о го вый балл 1. Разработка эскизов пользовательского интерфейса с помощью О.1 Разработано минимум три эскиза. 1 О.2 Все три эскиза содержат требуемое количество блоков. 1 О.3 Все три эскиза сохранены в требуемом формате. 1 О.4 Все три эскиза содержат обязательный контент. 2 39 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» профессионального инструментария. О.5 На всех трех эскизах размещена необходимые и достаточные навигационные элементы. 1 4 С.1 Все три эскиза согласованы между собой. 1 2. Обоснование выбора эскиза для дальнейшей разработки. О.6 Элементы всех трех эскизов необходимы и достаточны для выполнения целевого действия. 1 2 С.2 Все три эскиза выполнены на профессиональном уровне. 2 С.3 Элементы всех трех эскизов не избыточны. 2 3. Разработка схемы пользовательского веб- интерфейса. О.7 Схема пользовательского интерфейса (внешняя структура сайта) представлена. 1 2 С.4 Разработана структура возможного основного сайта. 1 С.5 На схеме корректно представлены связи целевой страницы с возможным основным сайтом. 2 4. Реализация требований стандартов к пользовательском у интерфейсу и корпоративному стилю во всех элементах пользовательского интерфейса веб- риложения. О.8 На всех трех вариантах дизайна присутствует меню. 1 6 О.9 Меню содержит элементы для перехода ко всем блокам страницы. 1 О.10 Функциональные элементы навигации сайта оформлены одинаково. 2 О.11 На всех трех вариантах дизайна сайта присутствует кнопка "вверх". 1 О.12 В дизайне использован логотип компании. 1 О.13 Все три варианта дизайна соответствуют своим эскизам. 1 С.6 В дизайне корректно использованы разработанные пиктограммы. 2 С.7 В дизайне корректно использован логотип (эмблема) акции. 2 С.8 Оформление и стиль сайта соответствуют целевой аудитории. 2 С.9 Оформление и стиль сайта соответствует логотипу. 1 С.10 Оформление и стиль элементов дизайна согласованы между собой. 2 С.11 Все три варианта дизайна согласованы между собой. 1 Продолжите таблицу и сформируйте набор аспектов оценки, их баллов и пороговых баллов для разработанных контролируемых показателей ПК 8.2. ПК 8.2. Формировать требования к дизайну веб-приложений на основе анализа предметной области и целевой аудитории. Показатели Н о мер и т и п Аспекты оценки Балл П о р о го вый балл 5. О.14 40 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» 6. 7. 8. 9. 10. 41 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» 11. Шаг 6. Формулировка критериев принятия решения о результатах экзамена. Оценка "Удовлетворительно" выбирается как сумма всех пороговых баллов по всем контролируемым показателям всех проверяемых компетенций; "Отлично" – как сумма баллов всех объективных критериев и не менее 50% суммы всех субъективных критериев всех контролируемых показателей всех проверяемых компетенций; "Хорошо" – выбирается в промежутке между оценкой "Удовлетворительно" и "Отлично" исходя из специфики задания ПОЭ. Заполните таблицу соответствия набранных баллов оценке за ПОЭ. Учтите, что сумма баллов по всем аспектам меньше 100, т.к. в задании проверяется лишь часть профессиональных компетенций. Диапазон Оценка за экзамен 0 …___ Неудовлетворительно ___…___ Удовлетворительно ___…___ Хорошо ___…___ Отлично С какой вероятностью вы бы рекомендовали использовать данную методику своим коллегам в своей профессиональной деятельности (1 – ни в коем случае; 10 – непременно необходимо использовать)? 1 2 3 4 5 6 7 8 9 10 42 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Укажите основные достоинства (недостатки), исходя из которых Вы рекомендовали (не рекомендовали) данную методику? Как она повлияет на качество учебного процесса? Насколько ее сложно внедрить в вашей образовательной организации? 4.5. ОРГАНИЗАЦИЯ И ВЕДЕНИЕ ПРОЕКТНОЙ ДЕЯТЕЛЬНОСТИ СТУДЕНТОВ. Сочетание формата практико-ориентированных экзаменов и проектной деятельности дает хороший эффект. В среднем, расчётное время повторного выполнения задания проекта студентом составляет 6-8 часов, что практически совпадает с временем выполнения задания ПОЭ. Прослеживается вполне четкая корреляция: те, кто уделил большое внимание проекту, выполнил его в срок и полностью, без проблем выполняют профессиональный экзамен на отличные оценки. Соответственно, те кто не справился с заданием за целый семестр – не могут сдать и экзамен. ЛАБОРАТОРНЫЕ И ПРАКТИКИ + ПРОЕКТНАЯ ДЕЯТЕЛЬНОСТЬ ПОЭ 43 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» 4.6. МЕТОДИКА РЕВЕРСНОГО ПРОЕКТИРОВАНИЯ ОБРАЗОВАТЕЛЬНЫХ ПРОГРАММ Сформулируйте тему выпускной квалификационной работы для своих студентов исходя из потребностей ваших индустриальных партнёров. Сформулируйте и запишите последовательность менее трудоемких и сложных, но значимых для них результатов, которые позволят достичь требуемого уровня подготовки за время обучения. Ориентируйтесь на время выполнения одного проекта в 0,5 года. Последовательность индустриальных результатов (типовых проектов) отображает процесс формирование специалиста, формирует его для индустрии, позволяет создавать команды. Таким образом, проектирование от базового набора дисциплин к результату меняется на понимание требуемого индустрии конечного результата и разработке последовательности шагов (промежуточных проектов), которые позволяют его достичь. С какой вероятностью вы бы рекомендовали использовать проектную деятельность и реверсивное проектирование образовательной программы своим коллегам в своей профессиональной деятельности (1 – ни в коем случае; 10 – непременно необходимо использовать)? 1 2 3 4 5 6 7 8 9 10 Укажите основные достоинства (недостатки), исходя из которых Вы рекомендовали (не рекомендовали) данные методики? Как она повлияет на качество учебного процесса? Опишите шаги, которые можно сделать в вашей образовательной организации уже сейчас для внедрения такого подхода. 44 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» 5. СОВРЕМЕННЫЕ ТЕХНОЛОГИИ В ПРОФЕССИОНАЛЬНОЙ СФЕРЕ ДЕЯТЕЛЬНОСТИ ПО КОМПЕТЕНЦИИ «ВЕБ-ДИЗАЙН И РАЗРАБОТКА» Инфраструктурный лист Документ, в котором отражены все позиции, которые будут предоставлены конкурсантам на площадке чемпионата список всего необходимого оборудования, инструментов, расходных материалов, офисного оснащения и принадлежностей. Составляется на основе современных международных требований и технологий индустрии. Укажите количество и, при необходимости, характеристики всего необходимого оборудования и ПО для проведения чемпионата по стандартам WorldSkills по компетенции «Веб-дизайн и разработка» с 10 Конкурсантами. № Оборудование Количество, характеристики, для чего используется 1 Компьютер Core i5, 8GB ОЗУ, 1TB HD, ИБП на 650 Вт, мышь, клавиатура 2 Монитор 23" 3 Microsoft Office 2013-2016 4 Notepad ++ 5 Sublime Text 3 6 Web Browser - Firefox Developer Edition 7 Web Browser - Chrome 8 Adobe Photoshop 9 Adobe Dreamveawer 10 Adobe Illustrator 45 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» 11 Adobe Acrobat reader 12 GIMP 13 Zeal 14 Visual Studio Code 15 PHPStorm 16 AtomEditor 17 WebStorm 18 Openserver Ultimate 19 Windows 7 - 10 20 Jquery 21 Jquery UI 22 Laravel 23 Yii 2 24 Wordpress 25 Компьютер-сервер Core i7, 16GB ОЗУ, 1TB HD, монитор 23", ИБП на 650 Вт, мышь, клавиатура, php 7.1 , mysql 5.5.55, apache 2.4.10 5.1. ОБЗОР СОВРЕМЕННЫХ ИНТЕРНЕТ-ТЕХНОЛОГИЙ, СРЕДСТВ И МЕТОДОВ ВЕБ-РАЗРАБОТКИ Интернет и разработка IT продуктов Заполните таблицу, указав особенности, нюансы и тренды в приведенных областях Интернет-индустрии. Интернет-сайты Интернет-сервисы Приложения (мобильные, PWA) 46 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Общие тенденции развития: Заполните таблицу, указав краткие характеристики и ключевые особенности современных технологий и методов разработки. Наименование Характеристики Достоинства Недостатки Базы данных – Database MySQL MariaDB PostgreSQL 47 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Наименование Характеристики Достоинства Недостатки Серверная разработка – Backend PHP Node.js Python Ruby on Rails Наименование Характеристики Достоинства Недостатки Клиентская разработка – Frontend HTML5 JavaScript 48 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» jQuery / Bootstrap Angular / Vue / React Наименование Характеристики Достоинства Недостатки Средства разработки IDE: WebStorm, PHPStorm, Atom IDE: Notepad++ Версионность и контроль кода: Git, Github, Gitlab Наименование Характеристики Достоинства Недостатки Методология разработки Веб-проектов Каскадная модель – Waterfall 49 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Гибкие модели – Agile Гибкие модели – Scrum Гибкие модели – XP Зафиксируйте основные методы, принципы и приемы разработки Веб-приложений. Цели и ожи да ни я за ка зчиков пр и ра зр а ботке Веб -пр оек тов: Тестирование: 50 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Проектная документация: Сдача заказчику и внедрение: 5.2. ОСНОВЫ ПРОЕКТИРОВАНИЯ ВЕБ-САЙТОВ Сайт, как инструмент продвижения В большинстве случаев Интернет-сайт – один из набора инструментов маркетинга организации. Неправильный выбор вида сайта, ошибки при его проектировании – приводит к невозможности достичь целей его создания. Для достижения цели может использоваться несколько альтернатив. Укажите на схеме актуальную цель, альтернативные варианты ее достижения с помощью Веб-сайтов, функции сайта и целевую аудиторию для которой решается проблема. 51 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Виды веб-сайтов Заполните пустые квадраты на схеме, указав основные виды современных веб- сайтов и цели их использования. Укажите общие принципы организации сайтов. Общие принци пы о рганизации р аботы пользова телей с с айтами: ВЕБ-САЙТ Цели: Цели: Цели: Цели: Цели: Цели: 52 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Процесс разработки сайта и место проектировщика в нем Заполните таблицу, описав основные этапы процесса разработки сайта в современном Интернет-агентстве. № Этап Что делается Кто делает Что может пойти не так 1 2 3 4 5 6 53 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Основы юзабилити Юзабилити (usability): возможность использования или полезность. Юзабилити это мера дружелюбности Веб-сайта, насколько он понятен, привычен и естественен для пользователя. Законспектируйте основы юзабилити для Веб-сайтов. Выделите те принципы, которые новы для Вас. Что Вы будете использовать в дальнейшей профессиональной деятельности? 54 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» 5.3. ОСНОВЫ ИНТЕРНЕТ-МАРКЕТИНГА И СЕО Заполните таблицу, указав для каждого канала продвижения сайта его характеристики и возможности использования. СЕО Я.Директ Google Adwords Принцип работы Преимущества Недостатки Стоимость Виды и типы Когда следует использовать Когда не следует использовать 55 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» 5.4. ВЗАИМОДЕЙСТВИЕ ВЕБ-ПРИЛОЖЕНИЙ С ПОЛЬЗОВАТЕЛЕМ (UI/UX) И ВЕБ-ДИЗАЙН Стоимость труда профессионального дизайнера довольно высока, поэтому на предварительном этапе разрабатываются эскизы (мокапы) веб-страницы. На нем отображаются все элементы пользовательского интерфейса и их взаимное расположение. Эскиз обсуждается с заказчиком и утверждается у него до разработки собственного дизайна. Заполните таблицу, записав основные преимущества популярных онлайн сервисов для быстрого рисования эскизов веб-страниц. Сервис Особенности Преимущества Недостатки Gliffy www.gliffy.com Moqups www.moqups.com Marvelapp www.marvelapp.com Зафиксируйте онлайн сервис, наиболее удобный для Вас. В чем его ключевые преимущества перед альтернативными? Используете ли Вы его в своей профессиональной деятельности? Будете ли использовать теперь? 56 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Подпишите основные элементы мокапа (эскиза) веб-страницы, как их оптимально реализовать с помощью HTML? Укажите, насколько по вашему мнению приведенная страница соответствует принципам юзабилити и почему Недоста тки мока па : 57 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Упражнение 1. Разработка эскизов страниц. В выбранном онлайн сервисе разработайте эскизы страниц сайта. Учитывайте в них функции, назначение веб-сайта, современные принципы организации пользовательского интерфейса. 1-C ★ 1-B ★★ 1-A ★★★ Сайт-визитка или целевая страница (Landing Page). Количество страниц – 1 шт. Корпоративный сайт, содержащий: новостную ленту, отзывы и портфолио. Количество страниц: 2-3. Сайт-каталог или интернет- магазин, содержащий каталог продукции, карточки товара, главную страницу, информацию о доставке, отзывы и новости. Количество страниц: 4-5. 5.5. ТЕХНИЧЕСКИЕ СРЕДСТВА В ВЕБ-РАЗРАБОТКЕ Организация Центра компетенций WorldSkills "Веб-дизайн и разработка" Московского политехнического университета Заполните подписи к рисунку, указав элементы сетевой инфраструктуры, характеристики технических средств, их версии. Укажите особенности развертывания и настройки сети, компьютеров и программного обеспечение для проведения демонстрационных экзаменов и чемпионатов. 58 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» Особен н ости пр оведен и я дем он стр а ционн ых экза мен ов в у чебн ых а у ди тор и я х: Подготовка технических средств к демонстрационному экзамену, проблемы и пути их решения Укажите в таблице название элементов сетевой инфраструктуры в соответствии с их описанием. Убедитесь, что все элементы присутствуют на рисунке с предыдущей страницы. Элемент Описание специализированный компьютер и/или специализированное оборудование для выполнения на нём сервисного программного обеспечения (в том числе серверов тех или иных задач). устройство, предназначенное для соединения нескольких узлов компьютерной сети в пределах одного или нескольких сегментов сети. компьютерная сеть, охватывающая большие территории и включающая большое число узлов. сборка веб-сервера, содержащая Apache, MySQL, интерпретатор скриптов PHP, phpMyAdmin и другие дополнения, предназначенная для web-разработки под Windows. Имеет автоматический инсталлятор. Для управления сервером и его настройками WampServer создает иконку в трее. Позволяет установить любую версию Apache, MySQL и PHP в качестве аддона. HTTP-сервер (назван именем группы племён североамериканских индейцев апачей; кроме того, является искажённым сокращением от англ. a patchy server; среди русских пользователей общепринято переводное апа ч) — свободный веб-сервер. Apache является кроссплатформенным ПО, поддерживает операционные системы Linux, BSD, Mac OS, Microsoft Windows, Novell NetWare, BeOS. свободная реляционная система управления базами данных. Разработку и поддержку MySQL осуществляет корпорация Oracle, получившая права на торговую марку вместе с поглощённой Sun Microsystems, которая ранее приобрела шведскую компанию MySQL AB. Продукт распространяется как под GNU General Public License, так и под собственной коммерческой лицензией. программа или аппаратная схема, обеспечивающая или позволяющая одновременное, параллельное выполнение нескольких операционных систем на одном и том же хост-компьютере. Также обеспечивает изоляцию операционных систем друг от друга, защиту и безопасность, разделение ресурсов между различными запущенными ОС и управление ресурсами. Может (и обязан) предоставлять работающим под его управлением на одном хост-компьютере ОС средства связи и взаимодействия между собой (например, через обмен файлами или сетевые соединения) так, как если бы 59 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» эти ОС выполнялись на разных физических компьютерах. программная и/или аппаратная система, эмулирующая аппаратное обеспечение некоторой платформы (target — целевая, или гостевая платформа) и исполняющая программы для target-платформы на host- платформе (host — хост-платформа, платформа-хозяин) или виртуализирующая некоторую платформу и создающая на ней среды, изолирующие друг от друга программы и даже операционные системы; также спецификация некоторой вычислительной среды. Может эмулировать работу как отдельных компонентов аппаратного обеспечения, так и целого реального компьютера (включая BIOS, оперативную память, жёсткий диск и другие периферийные устройства). Заполните подписи к рисунку, указав назначение и характеристики элементов сети и программного обеспечения сервера. Напишите, в чем Вы видите основные преимущества и недостатки предложенной архитектуры. Упражнение 2. «Установка и настройка виртуального сервера». С помощью специального программного обеспечения установите и настройте на локальном компьютере серверное программное обеспечение для обеспечения работы веб-сайтов. Используйте приведенные ниже ссылки или предоставленные дистрибутивы. 2-C ★ 2-B ★★ 2-A ★★★ Скачайте установочный дистрибутив гипервизора Oracle VirtualBox и установите его. Скачайте и установите пакеты расширений (Extension Pack) для Oracle VirtualBox. Создайте новую виртуальную машину под архитектуру MS Windows 64- bit, выделив ей не менее 4Gb оперативной памяти. Произведите установку операционной системы Windows Server 2016 на вновь созданную виртуальную машину. В дополнении к 2-С: Произведите установку операционной системы Windows Server 2016 на вновь созданную виртуальную машину. Скачайте установочный дистрибутив WAMP Server и произведите установку. Запустите веб-сервер Appache и убедитесь в его работоспособности. В дополнении к 2-В: Произведите настройку виртуальных хостов в Apache. Настройте права доступа и дисковые квоты для пользователей. Настройте сетевой мост для доступа к размещенным на данной виртуальной машине веб-сайтам с других компьютеров сети. 60 программа повышения квалификации для преподавателей (мастеров производственного обучения) «Практика и методика реализации образовательных программ среднего профессионального образования с учётом спецификации стандартов Ворлдскиллс по компетенции «Веб-дизайн и разработка» 5.6. СОВРЕМЕННЫЕ ТРЕБОВАНИЯ К ВЕРСТКЕ В ВЕБ Семантическая верстка Веб-сайты состоят из веб-страниц, которые связаны между собой гиперссылками. Для верстки страниц используется язык HTML, с помощью которого можно описать большое количество элементов. Для оформления элементов и форматирования текстов на странице используется язык CSS. В нем каждом элементу можно задавать правила оформления (CSS). HTML5 – пятая версия языка для структурирования и представления содержимого веб- сайтов Интернет. С его помощью один и тот же макет можно сверстать множеством способов, однако если вы хотите, чтобы ваш код был понятен другим разработчикам, необходимо соблюдать правила семантической верстки. Это означает, что с помощью тегов можно разбивать страницу на секции, явно задавать где меню страницы, а также «шапка» и «подвал». Новые семантические теги языка позволяют определить смысловую нагрузку различных элементов веб-страницы, упростить их индексацию поисковыми системами, улучшить отображение в браузере. Веб-документация MDN. Раздел HTML. Справочный онлайн ресурс по веб-технологиям. Для разного уровня подготовки. https://developer.mozilla.org/ru/docs/Web/HTML https://html5book.ru/ Веб-документация MDN. Раздел CSS. Валидатор HTML/CSS консорциума W3C. Автоматически проверяет код на наличие ошибок. https://developer.mozilla.org/ru/docs/Web/CSS https://validator.w3.org/ Используя приведенные выше справочники, а также свои знания и материалы занятий, заполните таблицу, указав в пустых ячейках недостающую информацию об основных тегах HTML5. Тег Описание Для чего обычно используется (что содержит) |