در این اسلاید با مقدمات برنامه نویسی وب و ساختار صفحات وب آشنا می شویم

1. ‫وب‬ ‫بر‬ ‫مبتنی‬ ‫نویسی‬ ‫برنامه‬
Web Programming
‫خدا‬ ‫نام‬ ‫به‬
1
‫وب‬ ‫بر‬ ‫ای‬ ‫مقدمه‬

2. ‫ایٌتزًت‬Internet
2
‫ایٌتزًت‬ِ‫هجوَػ‬‫ای‬‫است‬‫اس‬ِ‫ضجک‬‫ّبی‬‫هختلف‬ِ‫ک‬‫اس‬‫پزٍتکل‬‫ّبی‬‫خبغی‬ُ‫استفبد‬ُ‫کزد‬ٍ
‫سزٍیس‬‫ّبی‬‫هطخػی‬‫را‬ِ‫ارائ‬‫هی‬‫دّذ‬.(‫تؼزیف‬‫کتبة‬ِ‫ضجک‬‫ّبی‬‫کبهپیَتزی‬‫تٌٌجبم‬)

3. What’s the Internet: “nuts and bolts” view
3

4. ‫ایٌتزًت‬ ‫هؼوبری‬
4
‫ایٌتزًت‬‫ثز‬‫اسبس‬‫هؼوبری‬TCP/IP‫ثٌب‬ُ‫ًْبد‬ُ‫ضذ‬‫است‬.‫هؼوبری‬TCP/IP‫یک‬‫سبختبر‬‫چْبر‬
‫ای‬ِ‫الی‬‫را‬‫ثزای‬‫ارتجبعبت‬‫ثیي‬‫ای‬ِ‫ضجک‬‫تؼزیف‬‫کٌذ‬‫هی‬.

5. ‫ایٌتزًت‬ ‫سٌتی‬ ‫ّبی‬ ‫کبرثزد‬
5
‫ایویل‬
‫دستزسی‬‫اس‬ُ‫را‬‫دٍر‬
ٍ...

6. ‫ایٌتزًت‬ ‫ًَیي‬ ‫کبرثزدّبی‬
6
‫تجبرت‬‫الکتزًٍیک‬
‫آهَسش‬‫الکتزًٍیک‬
‫ّبی‬ِ‫ضجک‬‫اجتوبػی‬ٍ‫ارتجبعی‬
ٍ...

7. Milestones In The Development Of The Key
Layers Of The Internet
7

8. ُ‫ًگب‬ ‫اس‬ ‫ایٌتزًت‬ ‫آهبر‬ITU
8
 ITU ICT Facts and Figures 2017
https://www.itu.int/en/ITUD/Statistics/Documents/facts/ICTFactsFigures2017.pdf

9. Broadband Is Increasingly Mobile
9

10. International Bandwidth
10

11. 11

12. 12
http://www.itu.int/net4/ITU-D/idi/2017/index.html

13. 13

14. ‫ایٌتزًت‬ ‫ثستز‬ ‫در‬ ُ‫ضذ‬ ِ‫ارائ‬ ‫ّبی‬ ‫سزٍیس‬
14
‫ٍة‬
‫داًلَد‬‫ٍآپلَد‬(FTP)
َ‫ٍیذئ‬‫کٌفزاًس‬
‫توبس‬‫تلفٌی‬(VoIP)
‫چت‬
ٍ...

15. ‫چیست؟‬ ‫ٍة‬
15
‫ٍة‬‫یکی‬‫اس‬‫سزٍیس‬‫ّبیی‬‫است‬ِ‫ک‬‫دستزسی‬ِ‫ث‬‫اسٌبد‬‫هتػل‬ِ‫ث‬‫ّن‬‫را‬‫در‬‫ثستز‬‫ایٌتزًت‬‫اهکبى‬
‫پذیز‬‫هی‬‫سبسد‬.

16. ‫ٍة‬
16
‫ٍة‬(World Wide Web)‫رٍضی‬‫ثزای‬‫سبسهبًذّی‬،‫اعالػبت‬‫اس‬‫کٌبر‬‫ّن‬‫قزار‬‫گزفتي‬،‫غذا‬،‫هتي‬،‫تػَیز‬
‫گزافیک‬ٍ...‫است‬.‫ثشرگتزیي‬‫حسي‬‫ٍة‬‫سبدگی‬‫دستزسی‬ِ‫ث‬‫اعالػبت‬ُ‫پزاکٌذ‬‫در‬،‫ایٌتزًت‬‫اس‬‫عزیق‬
‫هفَْهی‬ِ‫ث‬‫ًبم‬‫اثز‬‫پیًَذ‬(Hyper Link)‫است‬.

17. ‫ٍة‬ ‫رضذ‬ ‫ػلت‬
17
‫ػلت‬‫اغلی‬‫هحجَثیت‬‫ٍة‬‫ظبّز‬‫در‬‫گزافیکی‬‫آى‬ِ‫ریط‬‫داضت‬ِ‫ک‬‫ثبػث‬‫ضذ‬‫هیلیَى‬‫ّب‬‫ًفز‬‫اس‬‫آى‬
‫ثسبدگی‬ُ‫استفبد‬‫کٌٌذ‬.‫رضذ‬‫سزیغ‬‫ٍة‬‫ثبػث‬‫ضذ‬‫ثسیبری‬‫آى‬‫را‬‫ّوبى‬‫ایٌتزًت‬‫ثذاًٌذ‬!

18. ‫ٍة‬ ‫گیزی‬ ‫ضکل‬ ِ‫تبریخچ‬
18
ُ‫پزٍص‬‫سبخت‬‫اٍلیي‬‫سبیت‬‫ٍة‬‫آگَست‬‫سبل‬۱۹۹۱‫تَسظ‬‫تین‬‫ثزًزسلی‬ٍ‫ّوکبراًص‬‫کلیذ‬‫خَرد‬ٍ‫اٍلیي‬
‫سبیت‬‫ٍة‬‫دًیب‬ِ‫ث‬‫عَر‬‫ػوَهی‬‫رٍی‬‫ایٌتزًت‬‫ًطبى‬ُ‫داد‬‫ضذ‬.
http://info.cern.ch/hypertext/WWW/TheProject.html
https://home.cern/ SirTimothy John
Berners-Lee
http://www.w3.org/People/Berners-Lee/

19. TED
19

20. ‫ٍة‬ ‫اجشاء‬
20
‫ٍة‬‫تزکیجی‬‫اس‬‫چْبر‬‫ػٌػز‬‫اغلی‬‫است‬
Hypertext
‫فزهتی‬‫اس‬‫اعالػبت‬ِ‫ک‬ِ‫ث‬‫افزاد‬ُ‫اجبس‬‫دّذ‬‫هی‬‫تب‬‫در‬‫هحیظ‬‫کبهپیَتز‬‫ثب‬ُ‫استفبد‬‫اس‬‫ارتجبط‬‫داخلی‬‫هَجَد‬‫هیبى‬ٍ‫د‬‫هتي‬‫اس‬‫ثخطی‬‫اس‬‫سٌذ‬ِ‫ث‬‫ثخص‬
‫دیگزی‬‫اس‬‫آى‬‫یب‬‫حتی‬‫سٌذ‬‫دیگزی‬ِ‫هزاجؼ‬‫کٌٌذ‬ٍِ‫ث‬‫اعالػبت‬‫جذیذی‬‫دستزسی‬‫پیذا‬‫کٌذ‬.
URL
‫ّبی‬ِ‫ضٌبس‬‫هٌحػز‬ِ‫ث‬‫فزدی‬ِ‫ک‬‫ثزای‬‫هطخع‬‫کزدى‬‫هحل‬‫حضَر‬‫اعالػبت‬‫هَجَد‬‫رٍی‬ِ‫ضجک‬(‫فبیل‬،‫کبهپیَتزی‬‫سٌذ‬‫یب‬‫هٌبثغ‬‫دیگز‬)ِ‫ث‬‫کبر‬
‫رًٍذ‬‫هی‬.
‫هذل‬Client-Server
‫سیستوی‬ِ‫ک‬‫در‬‫آى‬‫افشار‬‫ًزم‬‫یب‬‫کبهپیَتز‬‫هطتزی‬‫اس‬‫افشار‬‫ًزم‬‫یب‬‫کبهپیَتز‬‫گشار‬‫خذهت‬‫تقبضبی‬‫دریبفت‬‫هٌبثغ‬‫اعالػبتی‬‫هبًٌذ‬ُ‫داد‬‫یب‬‫فبیل‬‫کٌذ‬‫هی‬.
Markup Language
‫کبراکتزّب‬‫یب‬‫کذّبی‬‫هَجَد‬‫در‬‫هتي‬ِ‫ک‬‫سبختبر‬‫هتي‬‫ٍة‬‫را‬‫هطخع‬‫کٌٌذ‬‫هی‬.

21. Uniform Resource Locator (URL)
21

22. ‫ایٌتزًت‬ ‫ثستز‬ ‫در‬ ‫ٍة‬ ‫ػولکزد‬ َُ‫ًح‬(‫سزٍر‬ ‫کالیٌت‬ ‫هذل‬)
22
‫در‬‫ایي‬‫هذل‬‫ارتجبعی‬‫یک‬‫درخَاست‬(Request)‫اس‬‫سزٍیس‬ُ‫گیزًذ‬ً‫ال‬‫هث‬‫هزٍرگز‬‫کبهپیَتز‬
‫ضخػی‬‫ضوب‬‫ثزای‬‫سزٍیس‬ُ‫دٌّذ‬(‫سزٍر‬‫ٍة‬)‫ارسبل‬‫ضَد‬‫هی‬.‫سزٍیس‬،ُ‫دٌّذ‬‫درخَاست‬ُ‫رسیذ‬
‫را‬‫پزداسش‬ُ‫ًوَد‬ٍ‫پبسخ‬(Response)‫هٌبست‬‫را‬‫ثزای‬‫سزٍیس‬ُ‫گیزًذ‬‫ارسبل‬‫کٌذ‬‫هی‬.‫هزٍرگز‬
ً‫ال‬َ‫هؼو‬‫اس‬‫عزیق‬‫اتػبل‬TCPِ‫ث‬‫پَرت‬80‫سزٍیس‬ُ‫دٌّذ‬‫ثب‬‫آ‬‫ى‬‫ارتجبط‬‫ثزقزار‬‫هی‬‫کٌذ‬.

23. ‫هذل‬Client-Server
23

24. ‫هذل‬Client-Server
24

25. ‫هذل‬Client-Server
25

26. Multitier Application Architecture
26

27. Web Application Architecture
27

28. HTTP overview
28

29. ‫پزٍتکل‬HTTP
29
‫پزٍتکل‬HTTPِ‫ارائ‬ُ‫کٌٌذ‬‫یک‬‫استبًذارد‬‫پزٍتکل‬ِ‫ضجک‬‫است‬ِ‫ک‬‫هزٍرگزّبی‬‫ٍة‬ٍ‫سزٍرّب‬
‫ثزای‬‫ثزقزاری‬‫ارتجبط‬‫اس‬‫ایي‬‫پزٍتکل‬ُ‫استفبد‬‫کٌٌذ‬‫هی‬.‫ایي‬‫پزٍتکل‬‫هطخع‬‫هی‬‫کٌذ‬ِ‫ک‬‫هطتزی‬
ِ‫چ‬‫چیشّبیی‬‫هی‬‫تَاًذ‬ِ‫ث‬‫سزٍیس‬ُ‫دٌّذ‬،‫ثفزستذ‬ٍ‫سزٍیس‬ُ‫دٌّذ‬ِ‫چ‬‫پبسخ‬‫ّبیی‬‫تَاًذ‬‫هی‬ِ‫ث‬
‫آى‬‫ثذّذ‬.
 HypertextTransfer Protocol (HTTP)

30. ‫رهشًگبری‬Cryptography
30
‫رهش‬ِ‫ث‬‫هؼٌبی‬‫تجذیل‬‫کبراکتز‬ِ‫ث‬‫کبراکتز‬‫یب‬‫ثیت‬ِ‫ث‬‫ثیت‬‫یک‬‫پیبم‬‫ثذٍى‬ِ‫تَج‬ِ‫ث‬‫هحتَیبت‬‫آى‬‫پیبم‬
‫است‬.‫پیبهی‬ِ‫ک‬‫ثبیذ‬‫رهشًگبری‬‫ضَد‬‫هتي‬‫آضکبر‬(Plain Text)ُ‫ًبهیذ‬‫ضَد‬‫هی‬ِ‫ک‬‫تَسظ‬‫یک‬‫تبثغ‬
‫خبظ‬‫ثب‬‫پبراهتزی‬ِ‫ث‬‫ًبم‬‫کلیذ‬(Key)ِ‫ث‬‫هتي‬‫رهش‬(Cipher Text)‫تجذیل‬‫گزدد‬‫هی‬ٍ‫ایي‬‫هتي‬‫رهش‬
‫ثز‬‫رٍی‬‫کبًبل‬‫ارتجبعی‬‫در‬ِ‫ضجک‬‫هٌتقل‬‫هی‬‫ضَد‬.

31. ‫پزٍتکل‬SSL (Secure Socket Layer)
31
‫ایي‬‫پزٍتکل‬‫یک‬‫اتػبل‬‫هغوئي‬‫ثیي‬ٍ‫د‬‫سَکت‬‫ایجبد‬‫کٌذ‬‫هی‬.‫ایي‬‫پزٍتکل‬‫تقبضب‬‫ّبی‬‫هزٍرگز‬‫را‬
ِ‫گزفت‬ٍ‫آًْب‬‫را‬‫اس‬‫عزیق‬TCP‫ثزای‬‫سزٍیس‬ُ‫دٌّذ‬‫ارسبل‬‫کٌذ‬‫هی‬.‫هْوتزیي‬ِ‫ٍظیف‬SSL‫اًجبم‬
‫ػولیبت‬ُ‫فطزد‬‫سبسی‬ٍ‫رهشًگبری‬‫اعالػبت‬(ٍ‫ثبلؼکس‬)‫خَاّذ‬‫ثَد‬.‫پزٍتکل‬SSLِ‫ث‬‫هزٍر‬‫سهبى‬
‫تز‬‫تکویل‬ُ‫ضذ‬‫است‬ٍِ‫ًسخ‬‫ّبی‬‫هختلفی‬‫اس‬‫آى‬‫ایجبد‬ُ‫ضذ‬‫است‬.ُ‫اهزٍس‬‫اس‬‫پزٍتکل‬TLSِ‫ث‬
‫جبی‬SSLُ‫استفبد‬‫هی‬‫ضَد‬(TLS‫را‬‫گبّی‬ِ‫ث‬‫ػٌَاى‬ِ‫ًسخ‬3.1‫اس‬SSL‫ًیش‬ُ‫ًبهیذ‬‫هی‬‫ضَد‬.).

32. ‫پزٍتکل‬HTTPS
32
‫ٍقتی‬‫اس‬HTTP‫ثز‬‫رٍی‬SSLُ‫استفبد‬،‫ضَد‬‫هی‬ً‫ب‬‫اغغالح‬‫آى‬‫را‬HTTPS(Secure HTTP)
‫ًبهٌذ‬‫هی‬.‫ّزچٌذ‬‫ّیچ‬‫تفبٍتی‬‫ثب‬‫پزٍتکل‬‫استبًذارد‬HTTP،‫ًذارد‬‫فقظ‬‫در‬ِ‫الی‬‫سیزیي‬‫تغییزاتی‬
‫ایجبد‬ُ‫ضذ‬‫است‬.ِ‫الجت‬‫ثزخی‬‫اٍقبت‬ِ‫ث‬‫جبی‬‫پَرت‬‫استبًذارد‬80،HTTPS‫ثز‬‫رٍی‬‫پَرت‬443‫در‬
‫دستزس‬‫قزار‬‫هی‬‫گیزد‬.

33. httpٍhttps
33

34. http vs https
34

35. ‫ٍة‬ ‫غفحبت‬ ‫اًَاع‬
35
‫غفحبت‬‫ٍة‬‫ایستب‬(Static)
‫غفحبت‬‫پَیب‬(Dynamic)

36. ‫استبتیک‬ ‫ٍة‬ ‫ّبی‬ ‫سٌذ‬
36
‫اسبس‬‫ٍة‬‫ػجبرت‬‫است‬‫اس‬‫اًتقبل‬‫غفحبت‬‫ٍة‬‫اس‬‫سزٍیس‬ُ‫دٌّذ‬ِ‫ث‬‫هطتزی‬.‫غفحبت‬‫ٍة‬‫در‬ُ‫سبد‬
‫تزیي‬‫ضکل‬،‫خَد‬‫استبتیک‬(‫ثبثت‬)‫ّستٌذ‬ٍ‫فقظ‬‫رٍی‬‫سزٍیس‬ُ‫دٌّذ‬‫هٌتظزًذ‬‫تب‬‫کسی‬‫ثیبیذ‬ٍ
‫آًْب‬‫را‬‫ثزدارد‬.‫ثب‬‫ایي‬،‫تؼزیف‬‫حتی‬‫یک‬‫فیلن‬‫ٍیذٍیی‬‫ًیش‬‫استبتیک‬،‫است‬‫چَى‬‫چیشی‬‫ًیست‬‫جش‬
‫یک‬‫فبیل‬ُ‫سبد‬.

37. ‫دیٌبهیک‬ ‫ٍة‬ ‫سٌذّبی‬
37
‫هحتَیبت‬‫ایي‬‫غفحبت‬ِ‫ث‬‫غَرت‬‫دایٌبهیک‬‫تَلیذ‬‫هی‬‫ضَد‬.‫تَلیذ‬‫هحتَا‬‫هی‬‫تَاًذ‬‫در‬ٍ‫د‬ِ‫ًقغ‬
‫غَرت‬‫ثگیزد‬:‫سوت‬‫سزٍیس‬ُ‫دٌّذ‬ٍ‫سوت‬‫هطتزی‬.

38. ‫ًَیسی‬ ِ‫ثزًبه‬ ‫ّبی‬ ‫سثبى‬‫ٍة‬ ‫ثز‬ ‫هجتٌی‬
38
‫سثبى‬‫ّبی‬ِ‫ثزًبه‬‫ًَیسی‬‫سوت‬‫سزٍر‬ِ‫ث‬ٍ‫د‬ِ‫دست‬‫کلی‬‫تقسین‬‫هی‬‫ضًَذ‬.
Client-Side Scripting
HTML, CSS, JavaScript
Server-Side Scripting
PHP,ASP, JSP, Python

39. Web Developer
39
 Front End Developer
 Back End Developer
 Full Stack Developer

40. Big Picture
40

41. 41
W3Techs -WorldWideWebTechnology Surveys
techs.com3w://https

42. W3Techs - World Wide Web Technology Surveys
42

43. W3Techs - World Wide Web Technology Surveys
43

44. W3Techs - World Wide Web Technology Surveys
44

45. W3Techs - World Wide Web Technology Surveys
45

46. W3Techs - World Wide Web Technology Surveys
46

47. W3Techs - World Wide Web Technology Surveys
47

48. W3Techs - World Wide Web Technology Surveys
48

49. W3Techs - World Wide Web Technology Surveys
49

50. W3Techs - World Wide Web Technology Surveys
50

51. W3Techs - World Wide Web Technology Surveys
51

52. W3Techs - World Wide Web Technology Surveys
52