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

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
м
м
(не показано 17 проміжних версій цього учасника)
Рядок 1: Рядок 1:
  
 +
Галузь знань: 12 Інформаційні технології
 +
 +
Спеціальність: 122 Комп'ютерні науки та інформаційні технології
 +
 +
Освітньо-кваліфікаційний рівень: магістр
 +
 +
==Мета та завдання навчального курсу==
 +
 +
==Автор курсу==
 +
 +
[[Користувач:V_kotyak |Котяк Віталій Володимирович]]
 +
 +
 +
=Зміст курсу=
 +
==Змістовий модуль 1.==
 +
====Теоретичний матеріал====
 +
 +
[[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 ===
 
=== i1 ===
 
Зробити опис всіх семантичних тегів що з'явились в HTML5
 
Зробити опис всіх семантичних тегів що з'явились в HTML5
 +
[[Файл:Sim h2.gif|міні|Мал.1]]
 +
 +
=== i2 ===
 +
 +
Що таке Progressive Web Apps (PWA) і як використовується
 +
 +
<sup>*</sup> розробити приклад
 +
 +
=== i3 ===
 +
 +
Що таке Accelerated Mobile Pages (AMP) і як використовується
 +
 +
<sup>*</sup> розробити приклад
 +
 
=== h1 ===
 
=== h1 ===
 
Написати трьохколоночну структуру використовуючи HTML5 та BEM (Block Element Modifier)
 
Написати трьохколоночну структуру використовуючи HTML5 та BEM (Block Element Modifier)
 +
 
Зробити два варіанти: flexbox та CSS Grid
 
Зробити два варіанти: 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 ===
 
=== h2 ===
Порівняння CSS препроцесорів.
+
Порівняння трьох CSS препроцесорів.
 +
 
 
Розробити приклад з використанням BEM та обраного препроцесора.
 
Розробити приклад з використанням BEM та обраного препроцесора.
=== h3 ===
 
  
Розробити структуру зображену на малюнку 1.
 
 
=== h3 ===
 
=== h3 ===
 +
Розробити структуру зображену на малюнку 1.
 +
 +
Використовуємо flexbox або CSS Grid
 +
 +
=== h4 ===
 +
Порівняння HTML препроцесорів: Slim, Pug, HAML.
 +
 +
Розробити приклад (семантичний) сторінки новин з використанням обраного препроцесора.
 +
 +
=== s0 ===
 +
Що використати: JSON-pure API, RESTful API чи REST API + JSON?
 +
 +
=== проект ===
 +
 +
Групи 2-3 чоловіка
 +
 +
1) Розробити інтерактивний ресурс для вивчення Vue.js засобами Vue.js
 +
 +
2) Розробити інтерактивний ресурс для вивчення Angular засобами Angular
 +
 +
3) Розробити TODO list засобами Vue.js
 +
 +
4) Розробити TODO list засобами Angular
 +
 +
=Ресурси=
 +
 +
==Рекомендована література==
 +
===Базова===
 +
 +
===Допоміжна===
 +
 +
==Інформаційні ресурси==
 +
 +
[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://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: Полное руководство - Видеоуроки]
 +
 +
[https://coursehunters.net/course/udemy-angular-4-2-the-complete-guide Angular 6 (формально Angular 2) - Полное Руководство - Видеоуроки]
 +
 +
[https://coursehunters.net/course/kniga-ng-book-polnoe-rukovodstvo-po-angular-5-video Книга. Полное руководство по Angular 6 (+Видео) - Видеоуроки]
 +
 +
[https://coursehunters.net/course/angular-pro Angular Pro - Видеоуроки]
 +
 +
[https://www.udemy.com/the-complete-angular-master-class/ The Complete Angular Course: Beginner to Advanced] - платно

Версія за 09:26, 3 жовтня 2018

Галузь знань: 12 Інформаційні технології

Спеціальність: 122 Комп'ютерні науки та інформаційні технології

Освітньо-кваліфікаційний рівень: магістр

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

Автор курсу

Котяк Віталій Володимирович


Зміст курсу

Змістовий модуль 1.

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

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 або подібних "пісочницях"

i1

Зробити опис всіх семантичних тегів що з'явились в HTML5

Мал.1

i2

Що таке Progressive Web Apps (PWA) і як використовується

* розробити приклад

i3

Що таке Accelerated Mobile Pages (AMP) і як використовується

* розробити приклад

h1

Написати трьохколоночну структуру використовуючи HTML5 та BEM (Block Element Modifier)

Зробити два варіанти: flexbox та CSS Grid

flexboxfroggy

cssgridgarden

the-complete-css-flex-box-tutorial

flexbox-the-animated-tutorial

css-grid-tutorial

h2

Порівняння трьох CSS препроцесорів.

Розробити приклад з використанням BEM та обраного препроцесора.

h3

Розробити структуру зображену на малюнку 1.

Використовуємо flexbox або CSS Grid

h4

Порівняння HTML препроцесорів: Slim, Pug, HAML.

Розробити приклад (семантичний) сторінки новин з використанням обраного препроцесора.

s0

Що використати: JSON-pure API, RESTful API чи REST API + JSON?

проект

Групи 2-3 чоловіка

1) Розробити інтерактивний ресурс для вивчення Vue.js засобами Vue.js

2) Розробити інтерактивний ресурс для вивчення Angular засобами Angular

3) Розробити TODO list засобами Vue.js

4) Розробити TODO list засобами Angular

Ресурси

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

Базова

Допоміжна

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

html preprocessors

Object-oriented JS

Джентльменский набор Front-end разработчика

Material Design UI KIT

Руководство по созданию RESTful сервиса

JSON API

RESTful API — большая ложь

angular.io

angular-tutorial

Learn Angular 5 For FREE

React, Angular, Vue - Сравнение и быстрый старт - Видеоуроки

Vue JS 2: Полное руководство - Видеоуроки

Angular 6 (формально Angular 2) - Полное Руководство - Видеоуроки

Книга. Полное руководство по Angular 6 (+Видео) - Видеоуроки

Angular Pro - Видеоуроки

The Complete Angular Course: Beginner to Advanced - платно