Введение

Что такое Worldskills?

Видео с YouTube

WorldSkills International (WSI, от англ. skills — «умения») — международная некоммерческая ассоциация,

Документы чемпионата «Веб-дизайн и разработка»

Техническое описание
Регламент (том А и том Б)
Кодекс

Обновление WSSS в мире

WorldSkills Standards Specifications framework

Обновление WSSS в России

WorldSkills Standards Specifications framework

Историческая справка

2022 — WorldSkills Occupational Standards заявлен как новая форма описания

Почему WSOS?

Поэтому теперь, чтобы не возникало путаницы, мы называем их «Профессиональные

Образовательный стандарт

— совокупность обязательных требований к образованию определенного уровня и (или)

Профессиональный стандарт

— характеристика квалификации, необходимой для осуществления определенного вида профессиональной деятельности,

Требования к WSOS

Поднять стандарт до уровня освоения (комплексная компетенция) профессии, а

Общий вид раздела WSOS

Национальная рамка квалификаций

— является инструментом сопряжения сфер труда и образования и

Европейская рамка квалификаций

http://2020strategy.ru/data/2011/07/15/1214721936/31.pdf

Европейская рамка квалификаций

http://2020strategy.ru/data/2011/07/15/1214721936/31.pdf

Источники информации

Ссылки на базы данных:
Российские стандарты — https://profstandart.rosmintrud.ru
WSOS — https://worldskills.org/what/projects/wsos/
ONET —

Регламент чемпионата

Том А
Том Б

- это документ, который устанавливает правила проведения определенного

Кодекс этики

- это документ, который устанавливает этические нормы поведения лиц, вовлеченных

Инфраструктурный лист

- это список всего необходимого оборудования, инструмента, расходных материалов, офисного

План застройки

- это документ, в котором графически и схематично с использованием условных

Охрана труда и техника безопасности

КУЛЬТУРА ТРУДА

Техника
безопасности

Взаимосвязь документации

Веб-дизайн и разработка

Веб-разработка

о том, что такое

веб-разработка

и еще
чуть
чуть
.
.
.

соревнования
2012—2020

Челябинск

Москва

Тольятти

Томск

Екатеринбург

Тампере

Барнаул

Южно-сахалинск

Бразилия

Лиль

Гётеборг

Казань

Санкт-Петербург

Ижевск

Краснодар

Владикавказ

Новосибирск

Якутск

Нефтеюганск

Тюмень

Минск

Лейпциг

Будапешт

Абу-Даби

Нью-Дели

Гуанчжоу

Красноярск

сборная России

Виктор Бураков

Артем
Зимин

Константин
Ларин

Иван
Жуков

тренеры сборной и международный эксперт

На сегодняшний день, профессия веб-разработчика - это одна из самых аморфных,

Интернет тренды 2021

Но наиболее ярко о технологиях может рассказать карта умений веб-разработчика: https://github.com/kamranahmedse/developer-roadmap.
Которая выделяет

Что такое DevOps и зачем он нужен?

Ссылка на Skillbox

наш стандарт — FullStack разработчик

Один из самых популярных форумов ИТ-разработчиков ежегодно проводит опрос своих читателей.

Информационные ресурсы для самостоятельного обучения

ПОДКАСТЫ
(есть на Google Подкасты и YouTube)

https://web-standards.ru/
«Да

Информационные ресурсы для самостоятельного обучения

КАНАЛЫ НА YOU TUBE
(дизайн)

https://www.youtube.com/channel/UClVKbr5QX6WXONy4eGwqQXw - дизайн в

Информационные ресурсы для самостоятельного обучения

КАНАЛЫ НА YOU TUBE
(универсальные)

https://www.youtube.com/channel/UCrWP9UeNep74kW0cxY7YPpw – универсальные МК
https://www.youtube.com/c/itgid/featured

Информационные ресурсы для самостоятельного обучения

КАНАЛЫ НА YOU TUBE
(универсальные)

https://www.youtube.com/channel/UCxJyCit95jsb-JLE3kXnq1Q - frontend, рекомендую

Информационные ресурсы для самостоятельного обучения

КАНАЛЫ НА YOU TUBE
(WordPress)

https://youtube.com/playlist?list=PL3LQJkGQtzc6Nwz67GGrMdqxim1c0H5DC – курс от

Информационные ресурсы для самостоятельного обучения

КНИГИ

https://basicweb.ru/ и https://html5book.ru/ - онлайн учебники и

дополнительно

Изучение английского:
https://puzzle-english.com/
https://lingualeo.com
Печать на клавиатуре:
https://zty.pe/
https://10fastfingers.com/typing-test/russian
Заготовки:
https://resourcecards.com/
https://uimovement.com/

Этапы разработки сайта

Идея или постановка целей и задач сайта
Создание технического задания

Этапы разработки сайта - специалисты

1. Идея или постановка целей и задач

1. Идея или постановка целей и задач сайта

1. Определиться с целями
Какие

2. Создание технического задания

1. Пожелания по дизайну
2. Семантическое ядро (ссылка на

Создание технического задания

Как составить идеальное техническое задание

Пример ТЗ

ТЗ на создание сайта

Создание технического задания

Бриф — краткий письменный документ, который определяет желаемый результат

Практическое задание

Объединитесь в пары, выберите роль (заказчик или «разработчик»), выберите тематику

3. Создание макета дизайна сайта

1. Sketch
2. Figma
3. Adobe XD
4. Adobe Photoshop

Создание макета дизайна сайта

Вайрфрейм (от англ. wireframe - каркас) — концепция создания

Создание макета дизайна сайта

Вайрфреймы не бессмысленный набор серых блоков, хотя он

Создание макета дизайна сайта

Wireframe могут быть созданы с помощью редактора изображений,

Практическое задание

Возьмите бриф своего сайта и создайте вайрфрейм на бумаге для

Современные стили и тенденции дизайна

Графический дизайн — обширная сфера деятельности, направленная

Современные стили и тенденции дизайна

Веб-дизайнер — специалист, который занимается разработкой и усовершенствованием

Современные стили и тенденции дизайна

Основные принципы веб-дизайна
Гештальт-принципы в дизайне интерфейсов
Юзабилити

веб-дизайнер

Разбираемся в основах типографики за 10 минут - https://vk.com/@prosmotr-razbiraemsya-v-osnovah-tipografiki-za-10-minut
Теория близости: главное

Современные стили и тенденции дизайна

Технические требования к макетам сайта:
Основной дизайн нужно

Практическое задание

Возьмите бриф и вайрфрейм своего сайта и выполните следующие действия

4. Вёрстка

верстальщик

Вёрстка — это не тупо - http://webmasters.teamdev.com/#architecture
Всё про кнопки - https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7
Подробно

верстальщик

В чем разница между Float, Flexbox и Grid CSS? - https://youtu.be/azQRYYdKt8I
Шпаргалка

5. Программирование

frontend разработчик

Чем занимаются фронтенд-разработчики, и почему они всем так нужны -

6. Базовое наполнение контентом

7. Тестирование

8. Сдача готового сайта клиенту

Этапы разработки сайта

Идея или постановка целей и задач сайта
Создание технического задания