Верстка современных GUI компонент, svg-компоненты, нововведения html5, адаптивная верстка.

Аннотация курса

Данный курс, разработанный руководством и сотрудниками компании МалинаЛаб направлен на развитие навыков командной веб разработки у студентов старших курсов ВМК МГУ. В рамках данного курса планируется сформировать команды студентов численностью от трех до пяти человек, которые в течение года будут работать над IT проектами, которые будут предложены авторами курса или студентами самостоятельно. Курс состоит из тематических модулей, каждый из которых содержит четыре лекции. Домашние задания посвященные пройденному на лекциях материалу выполняются командами при работе над выбранным проектом. По результатам модульного тестирования, лучшие студенты получают возможность прохождения недельной практики в МалинаЛаб с последующей выдачей сертификата.

По результатам годового курса, две лучшие команды получат поддержку в реализации своих проектов от МалинаЛаб, а именно: дизайн, финансирование (при необходимости), содействие в выходе на рынок, места для работы.

Содержание дисциплины

Вводная лекция и git

1. Введение в курс факультатива и детали учебного процесса, системы контроля версий, удаленные репозитории, git, обновление, публикация обновлений, слияние, ветвление, отмена изменений.

Базовый JS, Введение в DOM, HTML, CSS.

1. DOM - как древовидная структура документа, основные теги html(<html>, <body>, <head>, <button>,<input>, <select>, <option>, <p>, <span>, <div>, <style>) и основные CSS атрибуты(padding, margin, overfflow, position, border, background-color).

2. JS — основные конструкции языка(if, for, switch, function). JS - типы данных(null, undefined, number, boolean, string, object), Объект Array — встроенные методы и поля для работы с массивами, области видимости, замыкания, DOM — атрибуты(id, class, type, height, width, style), навигация, манипуляция, document.getElementById, document.querySelector, document.querySelectorAll, parentNode, children, nextSimpling, previousSibling.

3. JS - функции как объекты, конструктор Function, ключевое слово this, скрытый ссылочный тип, arguments, конструкторы объектов. DOM - модель событий, всплытие и погружение, объект Event. Генерация событий.

4. Детальный обзор jQuery без ajax и UI. Чейнинг, детальный обзор основого API библиотеки, в частности объекта deffered. Асинхронная природа языка.

Продвинутый JS, ПОП, AJAX, RESTful API, JSONpure API

1. Прототипно ориентированное программирование, отличия от объектно ориентированного, __proto__, prototype, эмитация приватных полей и методов, статические методы Object, объекты Date, Regexp, краткий экскурс в регулярные выражения. Object Error, конструкция try catch finally.

2. Объект window, cookie, фреймы, окна, формы, url, http протокол, GET, POST методы, заголовки методов, коды ответов сервера.

3. Форматы данных: XML, JSON. Объект XMLHTTPRequest — обработка GET и POST запросов со стороны браузера, кроссдоменные запросы, возобновляемая загрузка $.ajax — обработка GET и POST запросов со стороны браузера более гибко.

4. Вебсокеты, socket.io — со стороны клиента, основы DNS, другие протоколы.

Верстка современных GUI компонент, svg-компоненты, нововведения html5, адаптивная верстка.

1. Современные GUI компоненты, модальные окна, переносимые окна, дропдауны, слайдеры, обзор bootstrap и jquery UI.

2. Адаптивная верстка, отображение сайта в зависимости от размеров окна, без необходимости использования отдельной версии страницы для мобильных устройств.

3. Особенности подержки различных аттрибутов в брайзерах, создание полифиллов скриптов и не только, совеременные методы определения браузера, нововведения hmtl5 — canvas, video и др.

4. Использование svg для верстки нестандартных компонент пользовательского интерфейса, обзор библиотеки SNAP.sng.

Node.JS, работа с npm, стандартные модули, введение в express

1. Отличия окружения node.JS от браузерного, модули в node.JS, работа с файловой системой: модуль fs, синхронный и несинхронный ввод-вывод. модуль http — простая обработка запросов GET и POST, эмитация клиентской программы с созданием запросов GET и POST, bodyparser — модуль для работы с телом POST запроса без декодирования.

2. Express I — создание простого http сервера, обработка get,post запросов, простые настройки, автоматическая генерация контекста для статических фалов сервера & socket.io — обработка событий с серверной стороны.

3. Цикл событий, потоки данных, модуль util и наследование, модуль util, настройка сервера для работы в режиме dev и production. Обработка ошибок, синхронная и асинхронная.

4. Параметры запуска node, npm настройки, репозиторий, зависимости, самостоятельная обработка аргументов запуска из командной строки, npm scripts, package.json.

Node.JS, введение в базы данных, Mongo, ORM mongoose, Express, nginx

1. Nginx, другие сервера приложений, настройка, запуск нескольких экземпляторов node, взаимодействие между ними.

2. Введение в базы данных. Реляционная модель данных, диаграммы, основные команды языка SQL, плюсы и минусы подхода, основные SQL СУБД. Введение в ORM.

3. Нереляционные базы данных, MongoDB, обзор ORM Mongoose, интеграция в Express.

4. Альтернативы Socket.io: WS.JS, Sock.js. Примеры реализаций авторизации при помощи Express, отслеживание действий пользоваетелей. Чат средствами сокетов.

Веб-дизайн

1. Базовые навыки владения Photoshop. Настройка под работу с веб

2. Usability. Проработка интерфейсов. Разбор удачных и неудачных примеров.

3. Существующие решения проблем, какие ходы часто используют дизайнеры (например карточки для потоковой информации), больше о разных дизайнах и как выбрать.

4. Как распознавать потребности аудитории, работа с фокус группой.