Поточна версія на 12:59, 1 грудня 2018

@@ Рядок 1: / Рядок 1: @@
+Галузь знань: 12 Інформаційні технології
+Спеціальність: 122 Комп'ютерні науки та інформаційні технології
+Освітньо-кваліфікаційний рівень: магістр
+==Мета та завдання навчального курсу==
+==Автор курсу==
+[[Користувач:V_kotyak |Котяк Віталій Володимирович]]
+=Зміст курсу=
+==Теоретичний матеріал==
+===[[CSS Grid Layout]]===
+===[[CSS Flexbox Layout]]===
+===[[Методологія БЕМ]]===
+===[[REST API]]===
+===[[JSON API]]===
+===[[Accelerated Mobile Pages (AMP)]]===
+===[[Progressive Web Apps]]===
+===[[ООП в JS]]===
+===[[Node.js]]===
+===[[HTML препроцесори]]===
+===[[gulp]]===
+===[[webpack]]===
+===[[React]]===
+===[[Angular]]===
+===[[Vue]]===
+== Завдання до лабораторних робіт ==
+Завдання h можна виконувати в codepen.io або подібних "пісочницях"
-== Завдання до курсу ==
-[[Файл:Sim h2.gif|міні|Мал.1]]
 === i1 ===
 Зробити опис всіх семантичних тегів що з'явились в HTML5
+[[Файл:Sim h2.gif|міні|Мал.1]]
+=== i2 ===
+Що таке Progressive Web Apps (PWA) і як використовується
+<sup>*</sup> розробити приклад
+=== i3 ===
+Що таке Accelerated Mobile Pages (AMP) і як використовується
+<sup>*</sup> розробити приклад
 === h1 ===
@@ Рядок 10: / Рядок 70: @@
 Зробити два варіанти: flexbox та CSS Grid
+[http://flexboxfroggy.com/#uk flexboxfroggy]
+[http://cssgridgarden.com/ cssgridgarden]
+[https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc the-complete-css-flex-box-tutorial]
+[https://medium.com/@js_tut/flexbox-the-animated-tutorial-8075cbe4c1b2 flexbox-the-animated-tutorial]
+[https://medium.com/@js_tut/css-grid-tutorial-filling-in-the-gaps-c596c9534611 css-grid-tutorial]
 === h2 ===
-Порівняння CSS препроцесорів.
+Порівняння трьох CSS препроцесорів.
 Розробити приклад з використанням BEM та обраного препроцесора.
@@ Рядок 18: / Рядок 88: @@
 === h3 ===
 Розробити структуру зображену на малюнку 1.
+Використовуємо flexbox або CSS Grid
 === h4 ===
@@ Рядок 27: / Рядок 99: @@
 Що використати: JSON-pure API, RESTful API чи REST API + JSON?
-=== s1 ===
+=== проект ===
-Розробити API сервер, який реалізує наступний функціонал: стаття має заголовок, вступний текст, повний текст, зображення для списку статей, зображення для повного тексту; кожна стаття відноситься до довільної кількості категорій; категорії мають деревовидну структуру; кожна стаття має довільну кількість тегів; стаття має автора.
+Групи 2-3 чоловіка
+) Розробити інтерактивний ресурс для вивчення Vue.js засобами Vue.js
+) Розробити інтерактивний ресурс для вивчення Angular засобами Angular
+) Розробити TODO list засобами Vue.js
+) Розробити TODO list засобами Angular
+=Ресурси=
+==Рекомендована література==
+Проценко, О.Б. Web-програмування та web-дизайн. Технологія XML: навч. посіб. / О.Б. Проценко. – Суми : СумДУ, 2009. – 127 с.
+Макфарланд Д. Новая большая книга CSS.- Питер СПб, 2016.- 700с.
+[https://webbooks.com.ua/ webbooks books ]
+[http://justlearnwp.com/free-web-design-books-pdf-download/ Download 50+ Free Books To Master HTML, CSS, JavaScript, JQuery, Bootstrap And WordPress]
+==Інформаційні ресурси==
+[https://webref.ru/layout/advanced-html-css/preprocessors html preprocessors]
+[https://developer.mozilla.org/uk/docs/Learn/JavaScript/Objects/Object-oriented_JS Object-oriented JS]
+[https://pugofka.com/blog/technology/the-prepared-starting-package-front-end-development-on-gulp/ Джентльменский набор Front-end разработчика]
+[https://mdbootstrap.com/angular/ Material Design UI KIT]
+[http://www.restapitutorial.ru/ Руководство по созданию RESTful сервиса]
+[http://jsonapi.org/ JSON API]
+[https://habr.com/post/265845/ RESTful API — большая ложь]
+[https://www.fastify.io/ Node.js фреймворк для API сервера]
+[https://angular.io/guide/quickstart angular.io]
+[https://mdbootstrap.com/angular/angular-tutorial/ angular-tutorial]
+[https://codecraft.tv/courses/angular/ Learn Angular 5 For FREE]
-Реалізувати вибірку статей за довільним набором параметрів. Наприклад статтіз певної категорії та з певним тегом, або статті певних авторів з певним набором тегів і т.д.
+[https://coursehunters.net/course/udemy-react-angular-vue React, Angular, Vue - Сравнение и быстрый старт - Видеоуроки]
-Мова для серверної частини та СУБД не регламентується.
+[https://coursehunters.net/course/udemy-vuejs-2 Vue JS 2: Полное руководство - Видеоуроки]
-=== j1 ===
+[https://coursehunters.net/course/udemy-angular-4-2-the-complete-guide Angular 6 (формально Angular 2) - Полное Руководство - Видеоуроки]
-Порівняння фреймворків Angular, React, Vue.
+[https://coursehunters.net/course/kniga-ng-book-polnoe-rukovodstvo-po-angular-5-video Книга. Полное руководство по Angular 6 (+Видео) - Видеоуроки]
-=== j2 ===
+[https://coursehunters.net/course/angular-pro Angular Pro - Видеоуроки]
-З використанням вибраного фреймворка реалізувати фронтенд для створеного АРІ серверу.
+[https://www.udemy.com/the-complete-angular-master-class/ The Complete Angular Course: Beginner to Advanced] - платно

Відмінності між версіями «Сучасні web-технології»

Поточна версія на 12:59, 1 грудня 2018

Зміст

Мета та завдання навчального курсу

Автор курсу

Зміст курсу

Теоретичний матеріал

Завдання до лабораторних робіт

i1

i2

i3

h1

h2

h3

h4

s0

проект

Ресурси

Рекомендована література

Інформаційні ресурси

Навігаційне меню

Пошук