That special presentation in an event "Multimedia Symposium for New Technologies - MSN 2016" in the Islamic University of Gaza "Faculty of Information Technology". I was speaker.

1. ‫الحديثة‬ ‫الويب‬ ‫تقنيات‬
Modern web technologies
</> {}
‫مرحب‬‫ا‬!
Oday Alqarra

2. Frameworks

3. Front-end JavaScript Framework

4. Angular 2

5. 1.3 Million
Developers

6. Google products in Angular 1

7. Angular 1 Releases

8. Angular 1 vs Angular 2
Angular 1
(angularjs.o
rg)
Angular 2
(angular.i
o)
0 300,000 600,000 900,000 1,200,000
93%
7%
October 20, 2015

10. Features & Benefits

11. Speed & Performance

12. Simple & Expressive

13. Cross Platform

14. Seamless upgrade from angular 1

15. Flexible Development

16. Legacy Browser Support

17. Animations

18. Compile to JavaScript

19. JavaScript is everywhere

21. TypeScript

22. Mobile Frameworks

23. Ionic

26. NativeScript

30. Cross platform desktop apps

31. Electron

32. Web Tech Open Source Cross Platform
Use HTML, CSS, and JavaScript GitHub and an active community Run on Mac, Windows, and Linux.

33. Built on Electron

34. Game Frameworks

35. Babylon.js

36. Task Runner

37. Why use a task runner?

38. Grunt

39. Gulp

40. Package Manager

41. NPM
OVERVIEW

42. Bower
OVERVIEW

43. NuGet
OVERVIEW

44. Generation Framework

46. Back End

47. Web API

49. NodeJS

50. Firebase

51. Firebase Realtime Database

52. Firebase Authentication

53. Modern Web Layout

54. ‫كذلك‬ ‫كانت‬.
HTML Tables

55. ‫كذلك‬ ‫إنها‬.
HTML Tables

56. CSS 1

57. CSS 2

58. Back to HTML Tables

59. ‫كذلك‬ ‫إنها‬.
Fixed Width vs. Fluid

60. ‫كذلك‬ ‫إنها‬.
Fixed Width vs. Fluid
480P

61. ‫كذلك‬ ‫إنها‬.
Fixed Width vs. Fluid
1080P

62. ‫كذلك‬ ‫إنها‬.
Float Based
nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}

63. Faux Columns

64. ‫كذلك‬ ‫إنها‬.
Devices & Resolutions !
480P 1080P 1440P720P 4K 8K

65. Responsive Web Design

66. ‫كذلك‬ ‫ليست‬ ‫إنها‬.
! ‫قادم‬ ‫التغيير‬ ‫من‬ ‫المزيد‬

67. Flexbox CSS Grid Layout

68. Flexbox
1 2 3 4

69. Flexbox
4 3 2 1

70. Flexbox
4
3
2
1

71. Flexbox
1
2
3
4

72. Flexbox
2
3
1
4

73. Flexbox CSS Grid Layout
Flexbox VS. Grid
One Dimension Two Dimensions

74. Flexbox CSS Grid Layout
Flexbox VS. Grid
Lets content size itself Relies on defined gridlines

75. Hosted Web App

76. manifoldjs

77. ‫عن‬ ‫نتحدث‬ ‫دعنا‬
‫وتجارب‬ ‫نصائح‬.

78. ‫استماعك‬ ‫حسن‬ ‫على‬ ‫شكرا‬‫م‬
Oday Alqarra
</> {}
‫سالم‬!
Fb/Oday9