20131219 пацев
TRANSCRIPT
![Page 1: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/1.jpg)
p��������|��|}���|^|��� k|��~, ����~������� �����|
@basvasilich
2013, h_o
![Page 2: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/2.jpg)
m�~�������� ~�}
![Page 3: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/3.jpg)
m�~�������� ~�}
● Client ÷ �������� ��� ��������|� �|��� ~�}-����������
● Server ÷ }����� ��� ���~���|� �|��� ~�}-����������
● RIA ÷ Rich Internet Application
● SPA ÷ Single-Page Application
● TSA ÷ Thin Server Architecture
04
![Page 4: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/4.jpg)
j���~��� ����������
![Page 5: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/5.jpg)
![Page 6: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/6.jpg)
HTML5
HTML (HyperText Markup Language) ��~��|�� �| ����������
�����������~|��� �|���� ~ ~�}�.
^ ���������� � ����������� �|������ ��|��|�� HTML5 ~����|�� ~
��}� ��~�� API: �|��� �|� Canvas, Video/Audio API, LocalStorage,
Offline � �|� �|���.
07
![Page 7: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/7.jpg)
CSS3
CSS (Cascading Style Sheets) ��~��|�� �| ���}�|����� �|���� ~ ~�}�.
n|��� ��������|������� CSS �|������� ������������� ÷
���|�����, ������� ������������� ~ CSS.
● SASS
● LESS
● Stylus
08
![Page 8: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/8.jpg)
JavaScript
● Scripting language
● k���������� �|�����~|���
● jjk
● Event-driven programming
● p�������|����� �����|�����~|���
● p������ ÷ �}����� ���~��� ��|��|
● `��|������|� �����|���, ��|}|� �����|���
09
![Page 9: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/9.jpg)
p����~���� � �|�������� �|�JavaScript
● jQuery ÷ ����~�� ������� ��� �������� �|�|� �| JavaScript
● Coffescript ÷ ����|��������� �|�|�
● Typescript ÷ ��|������|� �����|���, ����������� ��|���,
�����������
10
![Page 10: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/10.jpg)
^������|� ��|���|
![Page 11: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/11.jpg)
^������|� ��|���|
SVG (Scalable Vector Graphics) ÷ ���� �|������ �|���|}�������
~�������� ��|����.
Canvas ÷ ������� HTML5, �����|��|������ ��� ����|��� �|����~���
�~��������� ���}�|����� ��� ������ �������~|���, �}����, �|
����� JavaScript[1].
12
![Page 12: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/12.jpg)
3D ��|���|
![Page 13: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/13.jpg)
3D ��|���|
WebGL (Web-based Graphics Library) ÷ �����|���|� }�}������| ���
����| �����|�����~|��� JavaScript, ���~�����|� ����|~|�� �|
JavaScript �����|���~��� 3D-��|����, ��������������� ~ �������
������� ��~�������� � ��� ~�}-}�|����|�. c| ���� ��������~|���
��������~��~�� ������~ ��������� OpenGL, �|��� ���| �| WebGL
����� ~���������� ����������~���� �| ~�����|��|�.
14
![Page 14: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/14.jpg)
^���� � \����
![Page 15: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/15.jpg)
^���� � \����
● HTML5 Video
● HTML5 Audio
● Web Audio API
16
![Page 16: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/16.jpg)
i� ������ ~�}
![Page 17: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/17.jpg)
![Page 18: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/18.jpg)
PhoneGap
PhoneGap ÷ }����|���� open-source �����~��� ��� ����|���
��}������ ����������, �� ����|��� Adobe. k��~����� ����|��
���������� ��� ��}������ ��������~ ��������� JavaScript, HTML5 �
CSS3.
19
![Page 19: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/19.jpg)
![Page 20: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/20.jpg)
i�~�� ��� � Node.js
Node.js ÷ C��~���|� ��|�����|, ����������|� ����
�����|�����~|��� JavaScript, ����~|��|� �| �~���� V8.
k����|��|���| ��� ����|��� �|���|}������� �|������������
����~�� ����������
21
![Page 21: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/21.jpg)
![Page 22: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/22.jpg)
MongoDB
MongoDB ÷ noSQL mo]` � �������� �������� �����, �� ���}���|�
����|��� ����� �|}���. d������ �����}�|� � �|����~���|�
��������|���, }������ ����� �������~ � ��|�~���~ ��� ����������
����� Java, JavaScript, Node.js, C++, C#, PHP, Python, Perl, Ruby,
Grails&Groovy.
23
![Page 23: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/23.jpg)
![Page 24: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/24.jpg)
Firefox OS
Firefox OS (����~�� ��� Boot to Gecko, B2G) ÷ �~�}���|�
����|�����|� ������|, �����|��|����|� ��� ��|������~ �
��|������� ����������~.
^����
25
![Page 25: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/25.jpg)
Asm.js
![Page 26: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/26.jpg)
Asm.js
Asm.js ÷ ��� ����������~� JavaScript. m������, �|���|���� �| ����
����������~�, ������|� �������~��� ����������. d����������� ~
����~��� ~ �|����~� �������������� ����| ��� ���������� � �|���
�����~ �|� C/C++
^����
27
![Page 27: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/27.jpg)
^�� ~ open-source
![Page 28: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/28.jpg)
^�� ~ open-source
● Github.com ÷ ����|���|� ���� ��� �����|������~, ���������|�
~����� ��~������� �|��|}����.
● NPM ÷ }������ � ���}��� ��|������ open-source �������~ �|
node.js
29
![Page 29: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/29.jpg)
m�|��|���
![Page 30: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/30.jpg)
m�|��|���
W3C (World Wide Web Consortium) ÷ ���|���|���, �|��|}|��~|��|�
� ~�������|� ��������������� ��|��|���
]���� 110 ��������|��� �| 10 ���. s���|�� ����������| �~������
}���� 350 ���|���|��� �� 28 ���|� ���|.
31
![Page 31: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/31.jpg)
`�������|���
![Page 32: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/32.jpg)
`�������|���
● Mozilla Developer Network ÷ }|�| ��|��� �� ~�} �|��|}���� ��
����|��� Mozilla
● Web Platform ÷ open-source ��|�����| ��������|��� �� ~�}
�|��|}����
33
![Page 33: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/33.jpg)
i|�������
![Page 34: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/34.jpg)
i|�������
● 3 ����~��� ���������� ÷ HTML, CSS, JS
● ]��|��� ~���������� ~ }�|����� � �| ��� ������|��
● m�|��|��� W3C � ��������|���
● ]������ ����� open-source �������~ � }�}������
35
![Page 35: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/35.jpg)
]������
![Page 36: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/36.jpg)
![Page 37: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/37.jpg)
]������
● Adaptive web-design
● Mobile first
38
![Page 38: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/38.jpg)
The ExtensibleWeb Manifesto
![Page 39: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/39.jpg)
The Extensible Web Manifesto
● Focus on adding new low-level capabilities to the web platform that are
secure and efficient.
● Expose low-level capabilities that explain existing features, such as HTML
and CSS, allowing authors to understand and replicate them.
● Develop, describe and test new high-level features in JavaScript, and allow
web developers to iterate on them before they become standardized.
● Prioritize efforts that follow these recommendations and deprioritize and
refocus those which do not.
40
![Page 40: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/40.jpg)
![Page 41: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/41.jpg)
p������� ~ {������
● ]���� 200 ��������-�|��|}������~
● s����� �|�������� �| �������� � }�����
● m��~����� JavaScript
● t������ ���� ����������
● j�~���~������� �| �������, | �� �| ����� �|}���
● i|�� ���������� ���� ~ core-team ��������� ����������
�����~����~ � ~ �|}���� �����|� W3C
42
![Page 42: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/42.jpg)
p�������
● h����|� � }������|�~�~|��|��� ���������
● j������� open-source ���}����~�
● l|}��| �| ����� UI/UX ���|��| � ����������
● l������|� �|}��� ~���� ������ � �������� ������~|����� �|����
����
43
![Page 43: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/43.jpg)
m ���� �|�|��?
![Page 44: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/44.jpg)
f����
● `���|� f������� «JavaScript. m������ �������»
● `�~�� p���|�|� «JavaScript. k����}��� ����~����~�»
● m���� m���|��~ «JavaScript. t|}����»
● `�� m��������� «CSS3 ��� ~�}-���|�����~»
● `�� m��������� «k��������}�~|���� ~�}-���|��»
● \�|� f���� «j} ����������. j���~� ���������~|���
~�|��������~��»
45
![Page 45: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/45.jpg)
d����|���~��� ���|�� �����
● modeschool.com
● Codecademy.com
46
![Page 46: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/46.jpg)
tld
t���| �|��|}���� ����������~ {�����|
● ]����|���
● 4 �����| ÷ 2 �����| ������, 2 �����| ��|����� ~ ���|��|� {�����|
● c|����� 3 �|�| ~ ������ ~ }����� �� ~����|� � ���� ~ ��}}���
● m�������� �|}�� ÷ ���� 2014 ���|
47
![Page 47: 20131219 пацев](https://reader034.vdocuments.mx/reader034/viewer/2022042716/55b54494bb61eb3a3a8b47f8/html5/thumbnails/47.jpg)
m�|��}�^|��� k|��~ ÷ @basvasilich
m�|��� ÷ bit.ly/front42