​

​

Профессия "Веб-разработчик" - программа для будущей элиты веб-программирования. Программа, которая даст ученикам возможность не только зарабатывать больше любого другого веб-специалиста, но и работать над более весомыми сервисами, вплоть до национальных проектов, а это масштаб и статус, более интересные и разнообразные задачи и качественно иной уровень развития. Данная "Профессия" - полный набор инструментов, освоив которые, Вам понадобится только вовремя "затачивать" их для более эффективной работы.

Ключевые навыки

• Уверенные знания парадигмы ООП
• Знание PHP инфраструктуры и устройства веб-приложений
• Понимание шаблона проектирования MVC
• Работа с шаблонами
• Работа с файлами, сессиями, куками
• MySQL - базовый синтаксис, объединение таблиц
• Умение разбираться в чужом коде
• Опыт проектирования БД в нормальной форме
• Знание принципов обмена информацией с Web-ориентированными сервисами
• Разработка веб-приложений и скриптов на node.js
• Работа с JS-фреймворком AngularJS
• Построение визуализаций с помощью D3.js
• Разработка веб-приложений с помощью PHP-фреймворка Yii2

Программа курса:

• Месяц обучения и практической работы по курсу HTML/CSS
• Месяц обучения и практической работы по языку PHP
• Месяц обучения и практической работы по продвинутому PHP
• Месяц обучения и практической работы по языку Java Script
• Два месяца обучения и практической работы по NodeJS - технологии серверного программирования на языке JavaScript
• Месяц обучения и практической работы популярному фреймворку Yii, написанному на языке PHP
• Два месяца обучения и практической работы по JavaScript-фреймворку AngularJS/D3.js

Спойлер: Продолжение описания

Что Вы будете изучать
Никаких скучных теорий. Семь практических курсов.

HTML/CSS Основы создания сайтов
Урок 1. Основные понятия в веб-разработке
Как работает интернет, Что такое сайт, Что представляет собой веб-страница, Виды сайтов, Процесс разработки сайта, Что такое гипертекст, теги и атрибуты, Подготовка рабочего места, Простой пример HTML странички, Пример сложной веб-страницы, Горячие клавиши для перемещения по документам

Урок 2. Основы языка разметки документов HTML
Структура HTML документа, Основные теги оформления текста, Спецсимволы, Комментарии в HTML, Гиперссылки, Типы изображений для web, Загрузка изображений на страницу, Списки, Формы и их элементы

Урок 3. Основы языка оформления стилей документа CSS
Что такое CSS, Синтаксис CSS, Способы объявления CSS, Селекторы (id, class, tag), Селекторы атрибутов, Основные свойства стилей, Вложенность, наследование и группирование свойств, Приоритеты применения стилей, Псевдоклассы и псевдоэлементы

Урок 4. Таблицы и табличная верстка
Создание таблиц, Объединение ячеек, Вложенные таблицы, Стилевое оформление таблиц, Верстка макета сайта при помощи таблиц

Урок 5. Работа с макетом дизайна в формате PSD
Основные функции программы GIMP, Выделение основных частей макета, Нарезка макета, Верстка макета сайта при помощи таблиц, Вставка частей макета в табличную вёрстку

Урок 6. Верстка слоями (блочная верстка) - теория
Основные теги для верстки (div и span), Отступы элементов (margin и padding), Обтекаемые элементы, Позиционирование блоков

Урок 7. Верстка слоями (блочная верстка) - практика
Создание основной разметки сайта, Применение overflow и clear в реальной вёрстке, Заполнение разметки частями нарезанного макета, Приёмы позиционирования элементов

Урок 8. Стандарты web и вспомогательные инструменты
Проблема «кроссбраузерности», Стандарты HTML/CSS, Будущее за стандартами HTML5 и CSS3, Грамотная, универсальная верстка, Загрузка проектов на сервер

PHP. Уровень 1. Основы веб-разработки
Урок 1. Основы PHP
О PHP, Базовый синтаксис, Переменные, Константы, Типы данных, Преобразование типов, Операторы, Операции, Резюме, Домашнее заданиe

Урок 2. Ветвления и функции
Ветвление программы, Оператор if, Тернарный оператор условия, Оператор switch, Функции, Определение функции, Значения по умолчанию, Рекурсия, Область видимости и время жизни переменных, Резюме, Домашнее задание

Урок 3. Циклы и массивы
Циклы в PHP, Цикл while, Цикл do..while, Цикл for, Бесконечный цикл, Оператор выхода из цикла, Оператор прерывания итерации цикла, Массивы, Обход массивов в цикле, Функции для работы с массивами, Многомерные массивы, Предопределенные массивы, Резюме, Домашнее задание

Урок 4. Запросы HTTP, параметры URL и формы HTML
Типы запросов HTTP, URL и параметры запроса, Обработка параметров URL, Обработка отправки HTML формы, Резюме, Домашнее задание

Урок 5. Cookies и сессии
Что такое Сookies и с чем их едят, Манипулируем Сookies средствами PHP, Что такое сессии PHP и как они работают, Делаем авторизацию на сайте, Резюме, Домашнее задание

Урок 6. Работа с файлами
Особенности работы с файлами в PHP, Два режима работы с файлом, Функции для работы с файлами, Журнал посещений сайта, Загрузка файлов на сервер, Функции для работы с каталогами, Получение списка файлов и подпапок в каталогах, Резюме, Домашнее задание

Урок 7. Работа с базой данных
Для чего нужна база данных, Отличие БД от СУБД, Реляционная база данных, Язык SQL, Вставка строк, Удаление строк, Изменение строк, Выборка строк, Средства PHP для работы с MySQL, Резюме, Домашнее задание

Урок 8. Концепция MVC
Архитектура программы, Что такое хороший код, Архитектура MVC, Реализация MVC в PHP

PHP. Уровень 2. Профессиональная веб-разработка
Урок 1. Работа с базой данных
БД и СУБД, Реляционные базы данных, Нормальные формы, Типы связей, Организация связей, между сущностями, Язык SQL, SQL: соединение таблиц с помощью JOIN, Работа с MySQL средствами PHP

Урок 2. Архитектура MVC
Архитектура программы, Структура программы, Что такое хороший код, Архитектура MVC, Реализация MVC в PHP

Урок 3. Базовый шаблон
Базовый шаблон, Вложенные шаблоны, Трудности при работе со вложенными шаблонами, Буферизация в PHP, Универсальный метод шаблонизации

Урок 4. Объектно-ориентированное программирование
Класс и объект, Свойства и методы, Конструктор класса, Наследование, Полиморфизм, Инкапсуляция, Модификаторы доступа, Статические свойства и методы, Константы классов, Абстрактные классы и методы, Интерфейсы

Урок 5. MVC и ООП
Перегрузка свойств и методов класса, Модель, Представление, Контроллер, Точка входа, Иерархия контроллеров, Цикл обработки запроса, Автозагрузка классов

Урок 6. Создание класса модели. Драйвер БД
Преобразование модели от процедурного подхода к ООП, Статический класс, Шаблон проектирования "Одиночка", Драйвер работы с БД, Способы подключения классов контроллеров и модели, Выбор способов автозагрузки, Как правильно называть классы

Урок 7. Работа с пользователями. Авторизация и разделение прав доступа
Пользователь, Сессия, Привилегия, Роль, Механизм авторизации, Механизм контроля доступа, Гибкая схема разделения полномочий, Сокрытие страниц сайта, Особенности протокола HTTP, Шифрование паролей, md5 Генерация случайных строковых последовательностей, Схема БД для реализации всего механизма, Создание законченного программного модуля, реализующего весь механизм

Урок 8. Мини-Фреймворк для создания сайтов
ЧПУ, RewriteEngine в htaccess, Готовое решение для создания сайта (пакет-сборка и правила расширения)

JavaScript. Интерактивные веб-приложения
Урок 1. JavaScript и DOM
Что такое JavaScript и DOM, Принцип взаимодействия клиент-сервер, Как вызвать JavaScript, С чем взаимодействует JavaScript, Структура DOM документа, Функции и область видимости переменных, Типы данных, Пример калькулятора на JavaScript, Замыкания, Пример часов на JavaScript, Создаём заготовку для выполнения домашнего задания

Урок 2. ООП в JavaScript и AJAX
Общие понятия ООП, Класс, Объект, Особенности ООП в JavaScript, Классы и объекты на примере игры «змейка», Почему внутри класса следует аккуратно использовать this, Что такое AJAX, Работа с XMLHttpRequest, Пример функции отправки AJAX-запроса, Создаём чат с роботом на AJAX

Урок 3. jQuery (часть 1)
Зачем нужны фреймворки, Что такое jQuery, Где скачать и как подключить, Работа с DOM с помощью jQuery, Селекторы и иерархия, Проводим аналогию с css, Фильтры, Примеры сложных фильтров

Урок 4. jQuery (часть 2)
Работа с формами, Работа со стилями, Обработчики событий, Пример обработки нажатия на кнопку, Пример обработки скроллинга элемента, Пример обработки наведения курсора мышки, Функция live, Анимация, Простые анимационные эффекты, Функция animate, Цепочки из анимаций

Урок 5. AJAX в jQuery
Функция ajax, Что такое асинхронность запроса, Сериализация форм, Типы передаваемых данных, Timeout, Обработчики событий в рамках ajav-запроса, Функция ajaxSetup, Зачем нужны глобальные настройки, Функции post, get и load, Глобальные события

Урок 6. JSON
Что такое JSON, Какие данные может возвращать Ajax, Почему правильнее, чтобы Ajax возвращал JSON а не HTML, JSON vs XML, Работа с JSON в PHP, Работа с JSON в JavaScript, Пример чата с использованием JSON

Урок 7. jQuery UI
Где скачать и как подключить, Взаимодействия, Виджеты, Эффекты, Утилиты, Подключение календаря, Автодополнение, Работа с диалоговыми окнами, ThemeRoller

Урок 8. HTML-5, новшества
Почему появился flash, Что такое сanvas, Общий порядок рисования на сanvas, Функции для рисования на сanvas, Чем отличаются fill и stroke, Примеры реализаций html5 + canvas, Web-sockets, Чат с ботом с использованием сокетов

Node js. Серверное программирование на JavaScript
Урок 1. Знакомство с nodejs
Знакомство с node.js, Сильные и слабые стороны node.js, Установка node.js с помощью nvm, Менеджер процессов pm2, Пример: Hello, world!

Урок 2. Консольные программы
Стандартные библиотеки и функции node.js, Консольные программы на node.js, Пример: Hello, {name}!, Обработка аргументов при запуске, Работа с переменными окружения, Пример: Hello, {env}!, Менеджер пакетов npm, Полезные библиотеки: sugar, underscore, async

Урок 3. Работа с сетевыми заросами
Принципы обработки входящих веб-запросов, Исходящие запросы с помощью request, Пример: Программа-переводчик (с помощью Google Translate)

Урок 4. Фреймворк Express
Знакомство с фреймворком express.js, Знакомство с шаблонизатором Handlebars, Пример: Программа-переводчик v2 с интерфейсом на HTML+CSS

Урок 5. Работа с MySQL
Работа с MySQL с помощью node-mysql, Создание и использование модулей, Пример: создание TODO-приложения основа — ввод и отображение пунктов)

Урок 6. Аутентификация и авторизация
Продолжение разработки TODO-приложения (редактирование и удаление пунктов, работа с cookies и сессиями, авторизация с помощью passport.js)

Урок 7. REST API
Создание и использование кроссдоменных API с помощью REST API + CORS, Создание REST API с помощью restify, Пример: импорт/экспорт TODO-листа в формате JSON, Использование REST API с помощью restify, Пример: поиск индекса через Google Maps

Урок 8. WebSockets
Работа с WebSockets через socket.io, Пример: простейшая чат-комната, Профессиональный хостинг для node.js, Как настроить VDS, Как использовать PAAS, Полезные сайты и инструменты

YII2 framework, профессиональная разработка на веб
Урок 1. Основы фреймворка
Установка фреймворка через компосер. Запуск тестового приложения. Разбор структуры. Обновленный Gii. Создание первого контроллера, модели, вид. Вывод "hello world". Краткий обзор конфигурационных файлов и их предназначение. Резюме. Домашнее задание.

Урок 2. Основные понятия системы
Понятие разделения бэкенда и фронтенда. Что такое приложение и всё, что с ним связано. Контроллер. Модель. Вид. Псевдонимы пути. Компонент. Модуль. Сервис локатор. Алиасы путей. События. Резюме. Домашнее задание.

Урок 3. Формы
Модель формы. Типы валидаторов. Создание действия для модели формы. Метод scenarios. Создание формы вручную. Генерация формы. Валидация формы на сервере и на клиенте. Резюме. Домашнее задание.

Урок 4. Работа с базой данных
Понятие DAO и Active Record. Работа с базой через DAO. Работа с базой через Active Record. Конструктор запросов Query и Active Query. Реляционная связь Active Record. ActiveDataProvider. ArrayDataProvider. SqlDataProvider. Создание пагинации. Миграции. Резюме. Домашнее задание.

Урок 5. Кэширование
Понятие кэширования. Типы кэша. Кэширование данных. Кэширование фрагментов. Кэширование динамичного контента. Кэширование страницы. HTTP кэш. Создание базового компонента кэша. Зависимости кэша. Резюме. Домашнее задание.

Урок 6. Расширения
Понятие расширения. Разбор основных встроенных расширений. Использование встроенных расширений. Создание собственного расширения. Использование сторонних расширений. Поведение. Виджет. Фильтры доступа и типов запросов. Валидатор. Резюме. Домашнее задание.

Урок 7. Особенности фреймворка
Геттеры и сеттеры. Assets. Профилирование. Ajax в Yii2. Работа с JS в Yii2. Создание пакетов JS и CSS. Работа Active Record с несколькими базами. Работа с сессиями и куками. Резюме. Домашнее задание.

Урок 8. Специальные возможности фреймворка
Темы.Создание собственной темы. Управление URL в Yii. Аутентификация и Авторизация в Yii. Создание консольного приложения. Безопасность в Yii. Обработка ошибок. Резюме. Домашнее задание.

AngularJS/D3js. Векторная графика в одностроничных web- приложениях
Урок 1. Основы D3.js и векторной графики SVG
Библиотека D3. Концепция работы с данными в стиле D3. Формирование [связи] данных (Data Joins). Выборки данных: Enter, Update, Exit. Свойства выборки. Методы для работы с выборками. Краткие сведения о векторной графике SVG. Координатная система SVG. Элементы <svg> и <g>. Графические примитивы (объекты) SVG: <rect>, <circle>, <line>, <text>, <path>. Афинные преобразования объектов SVG. Фильтры SVG.

Урок 2. Подготовка рабочей среды и введение в AngularJS
Библиотеки Bower и Browserify. Автоматизированная сборка проекта с помощью Grunt. Настройка локального сервера для обслуживания запросов приложения. Введение в AngularJS. Модель, представление и контроллёр в AngularJS. Управление зависимостями, для чего это необходимо. Модули, директивы и сервисы. Написание тестов для приложений AngularJS.

Урок 3. Создание каркаса приложения
Описание модульной архитектуры. Общие подходы к созданию приложения. Требования к функциональности, определение поддержки необходимых технологий в браузере. Дизайн деталей макета для отображения на редакторе.

Урок 4. Разработка рабочего поля векторного редактора
Поведения D3.js: Drag&Zoom. Интерполяция в D3. Переходы (Transitions) в D3: что это такое, как с ними работать. Реализация сетки редактора. Сервис $q. Создание функциональности центрирования, масштабирования. Написание модульных тестов.

Урок 5. Создание статичных перетаскиваемых компонентов (деталей макета)
Разработка директив компонентов. Маски SVG, правила заполнения сложных фигур. Разработка поведений объектов на поле редактора. Создание сервисов отрисовки. Тестирование директив и сервисов.

Урок 6. Создание вращающихся компонентов и креплений
Объект d3.timer, рисование зубчатой передачи. Управление скоростью вращения. Отрисовка гексагональных креплений-болтов. Модель отрисовки SVG. Управление порядком отрисовки и наложения объектов SVG. Реализация логики работы креплений.

Урок 7. Реализация палитры компонентов (деталей макета)
Реализация перетаскивания Drag&Drop на элемент SVG. Определение координат при перетаскивании: клиентские и экранные координаты в SVG, матрица текущих преобразований (Current Transformation Matrix) SVG, перевод из одной системы координат в другую. Компиляция директив AngularJS.

Урок 8. Сохранение, загрузка и проверка состояния
Написание сервиса загрузки и сохранения состояния (макета) редактора. Проверка топологии, сравнение с заданным макетом. Написание E2E-тестов. Подведение итогов.