Секции internet технологии и web-дизайн
Высший уровень обучения
Срок обучения 1 год
| № | Перечень разделов, тем | Лекции | Практические занятия | Семинарские занятия | Консультационная работа | Индивидуальная работа | Итоговый контроль | Научно-практическая конференция |
| Ввод в интернет технологии. Основы работы с репозиторием git. Основы работы с редакторами кода. | ||||||||
| Основы языка разметки html и css. Создание простой html страницы | ||||||||
| Компоненты html: form, input, select, textarea. Атрибуты тегов. Размещение компонентов на странице средствами CSS | ||||||||
| CSS селекторы. Работа с фоном компонентов средствами CSS. Внутренние и внешние отступы. Шрифты в CSS. | ||||||||
| Трансформации объектов средствами CSS. Анимация в CSS. Работа с графическими редакторами. | ||||||||
| Адаптивные сайты, основные элементы для создания адаптивных сайтов | ||||||||
| Основы JavaScript и jQuery. Переменные, массивы, циклы, ветвления. Взаимодействие JS c компонентами HTML | ||||||||
| Фреймверки. Использование популярных фреймверков при создании веб-страниц. Основы фреймверка Bootstrap. Компоненты фреймверка Bootstrap | ||||||||
| Обзор CSS процессоров. LESS популярный css процессор | ||||||||
| Паттерны проектирования. MVC. Построение веб- приложения с использованием паттернов проектирования. | ||||||||
| Фреймверк AngularJS | ||||||||
| Всего | ||||||||
| Итого |
Содержание программы
1) Ввод в интернет технологии
a. Основные аспекты работы интернет сайтов и web-приложений
i. История развития интернета
ii. История языка html и css
iii. Файловая структура проекта
iv. Введение в синтаксис языка разметки html
v. Введение в синтаксис языка стилизации css
vi. Разработка первой web-страницы
vii. Набор инструментов разработчика в браузере
b. Основы работы с репозиторием git.
i. Создание репозитория через веб-интерфейс системы github
ii. Установка и настройка декстопного клиента git
iii. Принципы работы репозиториев
iv. Основные команды для работы с репозиторием
c. Основы работы с редакторами кода
i. Установка и настройка современных редакторов кода
ii. Комбинации «горячих» клавиш
iii. Кодировка файлов проекта
2) Основы языка разметки html и css.
a. Типы верстки: табличная и блочная
i. Размещение элементов на странице с использованием табличной верстки
ii. Размещение элементов на странице с использованием блочной верстки
b. Подключение стилей к проекту
i. Локальные стили
ii. Стили в теге style
iii. Подключение файла стилей с использованием тега Link
iv. Иерархия стилей
c. Набор основных тегов языка html
i. Основные структурные теги в html
ii. Теги, применяемые при табличной верстки
iii. Теги, применяемые для блочной верстки
iv. Теги полей ввода
v. Теги для разметки текста
vi. Теги для отображения изображений
d. Набор основных команд языка разметки CSS
i. Основные команды позиционирования элементов
ii. Команды для стилизации текста
iii. Команды для стилизации блоков
iv. Селекторы элементов
v. Псевдоэлементы
vi. События в css
vii. Префиксы команд css для работы команд в разных браузерах
e. Подключение шрифтов к проекту
i. Подключение шрифта через html
ii. Подключение шрифта через css
iii. Локальное или удаленное подключение шрифта? Какой подход лучше.
f. Создание простой html страницы
i. Создание файловой структуры проекта
ii. Проектирование каркаса будущего web-сайта
iii. наполнение каркаса тематической информацией
iv. Стилизация каркаса средствами css
v. Добавление проекта в репозиторий git
3) Компоненты html:
a. Атрибуты тегов
b. Form
i. Основные элементы form-ы
ii. Базовые функции для ввода данных и передачи их на сервер
iii. Методы передачи данных из формы на сервер
c. Input
i. Разновидности полей ввода
ii. Атрибут подсказки placeholder
iii. Валидация полей средствами html
iv. Паттерны для проверки корректности полей ввода
d. select
i. Одиночный выбор элементов
ii. Многострочный выбор элементов
iii. Стилизация компонента
e. Textarea
i. Основные параметры
ii. Стилизация поля
4) Разработка сайта «Портфолио», стилизованного средствами css
a. Информация о себе: кто вы, где учитесь, ваше хобби, ваши контактные данные
b. Добавление фотографии(й) к сайту
c. Добавление фоновых изображений и собственных шрифтов
d. Добавление действий к событию «наведение курсора мыши на объект»
5) Трансформации объектов средствами CSS.
a. Основные параметры для задания переходов
b. Типы переходов
c. Плавные переходы отдельных свойств css
d. Обратные переходы
6) Анимация средствами CSS
a. Анимация по ключевым кадрам
b. Анимация перехода
c. Типы анимации
d. Создание простой двумерной анимации
e. Создание анимации в перспективе
f. Создание 3д анимации
7) Разработка сайта «Оживший пейзаж»
a. Размещение элементов по макету
b. Стилизация макета
c. Работа с изображениями, содержащими прозрачные слои
d. Добавление плавных переходов и анимации к элементам сайта
8) Работа с графическими программами
a. Установка программы графического редактора Photoshop
b. Обзор компонентов программы Photoshop
c. Обзор горячих клавиш программы Photoshop
d. Создание первого макета собственного сайта
i. Открытие и сохранение изображений в программе
ii. Сохранение изображений с учетом специфики web-приложений
iii. Создание слоев и рабочих групп
iv. Разбор основных цветовых моделей
v. Создание изображений с прозрачными слоями
vi. Основы работы с фильтрами изображений
9) Разработка веб-сайта «Часы»
a. Разработать в программе Photoshop циферблат и стрелки часов
b. Средствами html и css создать работающие аналоговые часы
10) Верстка сайта по макету, разработанному в Photoshop
11) Адаптивные сайты, основные элементы для создания адаптивных сайтов
a. Подходы к разработке адаптивных сайтов
b. Медиа команды для задания условий адаптивности
c. Проектирование адаптивного сайта
d. Макетирование адаптивного сайта
e. Способы перепроектирования обычного сайта в адаптивный
f. Инструменты тестирования адаптивных сайтов
12) Разработка адаптивного сайта по макету
13) Основы JavaScript (JS)
a. Исторический экскурс в развитие JS
b. Способы подключения JS к web-сайту
c. Обзор библиотек, расширяющих возможности JS
d. Синтаксис JS
i. Переменные
1. Строковые
2. Числовые
3. Булевые
ii. Массивы
1. Одномерные
2. Многомерные
iii. Объекты
iv. Циклы
1. for
2. while
3. do..while
v. Ветвления
vi. Операции
1. Арифметические
2. Строковые
3. Логические
vii. Динамическое создание элементов
viii. DOM модель документа HTML
e. Подключение и использование библиотеки jQuery
i. Подключение библиотеки jQuery
ii. Синтаксис jQuery
iii. Селекторы в jQuery
iv. Цикл each
v. Базовые функции jQuery
vi. Передача данных на сервер средствами AJAX
14) Разработка сайта с использованием JS «Пуск ракеты»
15) Разработка сайта с использованием jQuery «Гоночная траса»
16) Контроль на знание материала
a. Разработка макета одностраничного сайта с множеством экранов
b. Разработка адаптивности к созданному нами макету
c. Разработка анимированных элементов сайтов
d. Верстка
e. Разработка скрипта отправки сообщения
f. Разработка скрипта перехода к якорю по нажатию на пункт меню
g. Оптимизация сайта
17) Фреймверки
a. Обзор популярных фреймверков для web-разработки
b. Bootstrap
i. Описание фреймверка
ii. Подключение фреймверка к проекту
iii. Компоненты фреймверка
c. Разработка сайта средствами фреймверка bootstrap
18) Css предпроцессоры
a. Обзор современных css предпроцессоров
b. LESS
i. Описание и подключение к проекту
ii. Принципы работы
iii. Синтаксис
iv. Компиляция
19) Паттерны проектирования
a. Обзор существующих паттернов
b. MVC
c. Проектирование web-приложения и его частей с использованием паттернов проектирования
d. Введение в серверные языки программирования
e. Создание первого простого серверного приложения
i. Обзоры структуры
ii. Ознакомление с синтаксисом
iii. Создание первого контроллера
iv. Взаимодействие серверной и клиентской части
f. Работа с технической документацией из официальных источников
20) Фреймверк AngularJS
a. Введение во фреймверк
b. Описание работы
c. MVC подход при работе с фреймверком
d. Синтаксис
21) Итоговая контрольная работа
Методическое обеспечение программы дополнительного образования детей:
- Электронные учебники, материалы в группах в соц. Сетях, учебная группа для работы со студентами, проведение тематических семинаров, проведение лекционных занятий с использованием проектора, практические работы в лабораториях, темы исследовательских работ
Тематика исследовательских работ
1. Преимущества блочной верстки над табличной при построении адаптивных решений веб-страниц. Способы построения адаптивных страниц.
2. Организация совместной работы программистов средствами система контроля версий и багтрекеров.
3. Безопасность веб-приложений. Современные методики борьбы со взломом веб-приложения\веб-страницы.
4. Анимирование элементов веб страницы. Способы создания анимации средствами JavaScript, jQuery, CSS. Анализ скорости работы и влияние на трафик пользователей различных походов анимации.
5. Трехмерная графика в веб-приложениях. Тенденции развития WebGL. Примеры использования трехмерной графики в веб-приложениях.
6. Использование фреймверков при разработке веб приложений. Разновидности веб фреймверков. Тенденции к использованию фреймверков при разработке промышленных проектов. Достоинства и недостатки использования фреймверков.
7. Использование css-предпроцессоров для ускорения процесса верстки сайтов. Css-предпроцессоры Less и Sass. Принципы работы и примеры использования.
8. Применение современных web-технологий в образовательных учреждениях. Текущее состояние, проблемы и перспективы дистанционного образования.
9. Влияние интернета в целом и веб-технологий в частности на развитие ребенка в раннем возрасте. Применение it-технологий для дошкольного развития ребенка. Достоинства и недостатки.
10. Автоматизация работы дорожной автоинспекции через внедрение it-технологий в процесс работы службы. Создание единой базы страховых полисов(автострахование) республики для предотвращения коррупционных схем в данном направлении.
Список использованной литературы.
1) http://www.w3schools.com/ - набор примеров работы с html, css, javascript, jquery
2) http://www.w3.org/ - официальный сайт интернет стандартизации
3) http://getbootstrap.com/ - официальный сайт с полным описанием и примерами работы с фреймверком bootstrap
4) http://rogerdudler.github.io/git-guide/index.ru.html - пошаговая инструкция работы с системой контроля версий git
5) «HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов» Автор: Владимир Дронов Издательство: БХВ-Петербург Год: 2011 Язык: Русский Страниц: 414
6) «Учись писать, читать и понимать алгоритмы» Издательство: ДМК Пресс Год издания: 2012 Страниц: 520
7) Изучаем программирование на HTML5 Год: 2013 Фриман Э. Робсон Э. Язык: Русский
8) Большая книга CSS3 Дэвид Макфарланд Год: 2014
9) Изучаем работу с jQuery Райан Бенедетти, Ронан Крэнли Год: 2012
10) https://vk.com/it_incubator - основная рабочая группа в соц. сети вконтакте