หัวข้อ
Markdown | HTML | Github/Markdown | Github.io | คำสำคัญ (Key)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630
1631
1632
1633
1634
1635
1636
1637
1638
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693
1694
1695
1696
1697
1698
1699
1700
1701
1702
1703
1704
1705
1706
1707
1708
1709
1710
1711
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723
1724
1725
1726
1727
1728
1729
1730
1731
1732
1733
1734
1735
1736
1737
1738
1739
1740
1741
1742
1743
1744
1745
1746
1747
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757
1758
1759
1760
1761
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777
1778
1779
1780
1781
1782
1783
1784
1785
1786
1787
1788
1789
1790
1791
1792
1793
1794
1795
1796
1797
1798
1799
1800
1801
1802
1803
1804
1805
1806
1807
1808
1809
1810
1811
1812
1813
1814
1815
1816
1817
1818
1819
1820
1821
1822
1823
1824
1825
1826
1827
1828
1829
1830
1831
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841
1842
1843
1844
1845
1846
1847
1848
1849
1850
1851
1852
1853
1854
1855
1856
1857
1858
1859
1860
1861
1862
1863
1864
1865
1866
1867
1868
1869
1870
1871
1872
1873
1874
1875
1876
1877
1878
1879
1880
1881
1882
1883
1884
1885
1886
1887
1888
1889
1890
1891
1892
1893
1894
1895
1896
1897
1898
1899
1900
1901
1902
1903
1904
1905
1906
1907
1908
1909
1910
1911
1912
1913
1914
1915
1916
1917
1918
1919
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
2075
2076
2077
2078
2079
2080
2081
2082
2083
2084
2085
2086
2087
2088
2089
2090
2091
2092
2093
2094
2095
2096
2097
2098
2099
2100
2101
2102
2103
2104
2105
2106
2107
2108
2109
2110
2111
2112
2113
2114
2115
2116
2117
2118
2119
2120
2121
2122
2123
2124
2125
2126
2127
2128
2129
2130
2131
2132
2133
2134
2135
2136
2137
2138
2139
2140
2141
2142
2143
2144
2145
2146
2147
2148
2149
2150
2151
2152
2153
2154
2155
2156
2157
2158
2159
2160
2161
2162
2163
2164
2165
2166
2167
2168
2169
2170
2171
2172
2173
2174
2175
2176
2177
2178
2179
2180
2181
2182
2183
2184
2185
2186
2187
2188
2189
2190
2191
2192
2193
2194
2195
2196
2197
2198
2199
2200
2201
2202
2203
2204
2205
2206
2207
2208
2209
2210
2211
2212
2213
2214
2215
2216
2217
2218
2219
2220
2221
2222
2223
2224
2225
2226
2227
2228
2229
2230
2231
2232
2233
2234
2235
2236
2237
2238
2239
2240
2241
2242
2243
2244
2245
2246
2247
2248
2249
2250
2251
2252
2253
2254
2255
2256
2257
2258
2259
2260
2261
2262
2263
2264
2265
2266
2267
2268
2269
2270
2271
2272
2273
2274
2275
2276
2277
2278
2279
2280
2281
2282
2283
2284
2285
2286
2287
2288
2289
2290
2291
2292
2293
2294
2295
2296
2297
2298
2299
2300
2301
2302
2303
2304
2305
2306
2307
2308
2309
2310
2311
2312
2313
2314
2315
2316
2317
2318
2319
2320
2321
2322
2323
2324
2325
2326
2327
2328
2329
2330
2331
2332
2333
2334
2335
2336
2337
2338
2339
2340
2341
2342
2343
2344
2345
2346
2347
2348
2349
2350
2351
2352
2353
2354
2355
2356
2357
2358
2359
2360
2361
2362
2363
2364
2365
2366
2367
2368
2369
2370
2371
2372
2373
2374
2375
2376
2377
2378
2379
2380
2381
2382
2383
2384
2385
2386
2387
2388
2389
2390
2391
2392
2393
2394
2395
2396
2397
2398
2399
2400
2401
2402
2403
2404
2405
2406
2407
2408
2409
2410
2411
2412
2413
2414
2415
2416
2417
2418
2419
2420
2421
2422
2423
2424
2425
2426
2427
2428
2429
2430
2431
2432
2433
2434
2435
2436
2437
2438
2439
2440
2441
2442
2443
2444
2445
2446
2447
2448
2449
2450
2451
2452
2453
2454
2455
2456
2457
2458
2459
2460
2461
2462
2463
2464
2465
2466
2467
2468
2469
2470
2471
2472
2473
2474
2475
2476
2477
2478
2479
2480
2481
2482
2483
2484
2485
2486
2487
2488
2489
2490
2491
2492
2493
2494
2495
2496
2497
2498
2499
2500
2501
2502
2503
2504
2505
2506
2507
2508
2509
2510
2511
2512
2513
2514
2515
2516
2517
2518
2519
2520
2521
2522
2523
2524
2525
2526
2527
2528
2529
2530
2531
2532
2533
2534
2535
2536
2537
2538
2539
2540
2541
2542
2543
2544
2545
2546
2547
2548
2549
2550
2551
2552
2553
2554
2555
2556
2557
2558
2559
2560
2561
2562
2563
2564
2565
2566
2567
2568
2569
2570
2571
2572
2573
2574
2575
2576
2577
2578
2579
2580
2581
2582
2583
2584
2585
2586
2587
2588
2589
2590
2591
2592
2593
2594
2595
2596
2597
2598
2599
2600
2601
2602
2603
2604
2605
2606
2607
2608
2609
2610
2611
# ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์
## Human-Computer Interaction
### Thaiall.com/hci 3 (3-0-6)
### ปรับปรุง 6 สิงหาคม 2563
 
[Burin rujjanapan](http://www.facebook.com/ajburin)
 
---
 
# โฮมเพจที่เกี่ยวข้อง
 
- [โฮมเพจหลักประจำวิชา](http://www.thaiall.com/hci)
- [hci markdown](http://www.thaiall.com/md/hci_all.md)
- [Markdown Viewer for chrome](https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk/related?hl=en)
 
```
1. Extension enable : Markdown Viewer
2. Address Bar : Click เลือก Extension : Markdown Viewer
3. Click : ADVANCED OPTIONS
4. Click : ALLOW ACCESS TO FILE:// URLS
5. Enable : Allow access to file URLs
6. Chrome : file:///E:/hci_all.md
```
 
---
 
# คำอธิบายรายวิชา
 
พฤติกรรมมนุษย์ กระบวนวิธีการบันทึกและแปลพฤติกรรมมนุษย์ การวิเคราะห์ การทำงาน เทคนิคการสังเกต การออกแบบสอบถาม เทคนิคการวิเคราะห์และการโมเดลงาน วิธีแสดงส่วนปฏิสัมพันธ์และเครื่องมือสร้างต้นแบบ ขั้นตอนการเรียนรู้ การศึกษาการใช้งานและการวิเคราะห์โพรโทคอลการใช้คำ ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ แนวทางการทดลองทำจริง การเรียนรู้ของมนุษย์ การทำนายและการเลียนแบบปฏิสัมพันธ์ระหว่างมนุษย์กับมนุษย์และกรณีศึกษา
 
---
 
# เอกสารประกอบการสอน ของ ดร.ปัทมา เจริญพร
 
- ดร.ปัทมา เจริญพร มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี สอนวิชา ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ พบ PPTX 13 บท ในระบบ Moodle (HCI_1.pptx)
 
- บทที่ 1 มนุษย์ (Human)
- บทที่ 2 วิศวกรรมมนุษยปัจจัย/การยศาสตร์ (Ergonomics)
- บทที่ 3 กระบวนทัศน์ (Paradigm)
- บทที่ 4 การใช้งานระบบปฏิสัมพันธ์ทางคอมพิวเตอร์ (Usability of Interactive Systems)
- บทที่ 5 หลักพื้นฐานของการออกแบบระบบปฏิสัมพันธ์ (Interaction Design Basics)
- บทที่ 6 ระบบปฏิสัมพันธ์ในกระบวนการพัฒนาซอฟแวร์ (HCI in the software Process)
 
---
 
# เอกสารประกอบการสอน ของ ผศ.ดร.สุรีรัตน์ อินทร์หม้อ
 
- ผศ.ดร.สุรีรัตน์ อินทร์หม้อ มหาวิทยาลัยเทคโนโลยีราชมงคลธัญบุรี สอนวิชา ปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ พบ PPTX 13 บท ในระบบ Moodle (HCI_7.pptx)
 
- บทที่ 7 การดำเนินงานในขั้นตอนการออกแบบ (Managing Design Process)
- บทที่ 8 คำแนะนำ หลักการ และทฤษฎีในการออกแบบ (Guidelines, Principles, and Theories)
- บทที่ 9 กฎในการออกแบบ (Design Rules)
- บทที่ 10 ความสำคัญของสีต่อการออกแบบระบบปฏิสัมพันธ์ (Important of Color)
- บทที่ 11 คำแนะนำในการออกแบบเว็บไซต์ประเภทเอกสารวิชาการ (Website Design Guide for Academic Documents)
- บทที่ 12 ระบบช่วยเหลือการปฏิบัติงาน (User Support and Online Information)
- บทที่ 13 การออกแบบเว็บไซต์เพื่อการเรียนรู้ (E-Learning Design)
- https://www.google.com/search?q=hci+pptx+ปฏิสัมพันธ์
 
---
 
# หนังสือของ ผศ.ดร.วรลักษณ์ วงศ์โดยหวัง ศิริเจริญ
 
- บทที่ 1 ภาพรวมของปฏิสัมพันธ์ระหว่างคอมพิวเตอร์กับมนุษย์
- บทที่ 2 การนำเข้าและนำออกของมนุษย์
- บทที่ 3 คอมพิวเตอร์
- บทที่ 4 องค์ประกอบของคอมพิวเตอร์
- บทที่ 5 โมเดลของปฏิสัมพันธ์
- บทที่ 6 การโต้ตอบระหว่างอุปกรณ์และผู้ใช้
- บทที่ 7 กระบวนทัศน์
- บทที่ 8 พื้นฐานการออกแบบปฏิสัมพันธ์
- บทที่ 9 การออกแบบหน้าจอและโครงสร้าง
- บทที่ 10 ปฏิสัมพันธ์ระหว่างคอมพิวเตอร์กับมนุษย์ในกระบวนการซอฟท์แวร์
- บทที่ 11 กฎของการออกแบบ
- บทที่ 12 การออกแบบสากล
- บทที่ 13 การประมวลผลทุกหนทุกแห่ง (Ubiquitous computing)
 
---
 
# เอกสาร Manual ภาษา PHP
 
- **เอกสารสำหรับผู้เริ่มต้น เป็นคู่มือแบบที่พบใน php.net**
- แฟ้มขนาด 12 MB เปิดด้วย Browser เอกสาร HTML + Image
- http://th.php.net/get/php_manual_en.tar.gz/from/a/mirror
- **เอกสารสำหรับมืออาชีพ**
- แฟ้มขนาด 3.5 MB เป็น PDF
- รวบรวมจาก Stack Overflow เพื่อการศึกษา
- phpnotesforprofessionals.pdf
- http://books.goalkicker.com/PHPBook
- https://goalkicker.com/HTML5Book/
- https://goalkicker.com/JavaScriptBook/
- https://goalkicker.com/jQueryBook/
- https://goalkicker.com/MySQLBook/
 
---
 
# หน่วยที่ 1 ภาพรวมของปฏิสัมพันธ์ระหว่างคอมพิวเตอร์กับมนุษย์
 
## การทำงานของมนุษย์กับคอมพิวเตอร์
## การรับข้อมูล และแสดงผลของมนุษย์ และคอมพิวเตอร์
## การผสมผสานสหวิทยาการ
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจการทำงานของมนุษย์กับคอมพิวเตอร์
2. เพื่อให้เข้าใจการรับข้อมูล และแสดงผลของมนุษย์ และคอมพิวเตอร์
3. เพื่อให้เข้าใจการผสมผสานสหวิทยาการ
 
---
 
# สิ่งที่คาดหวัง
 
สามารถเลือกมีปฏิสัมพันธ์กับคอมพิวเตอร์ได้อย่างเหมาะสม
 
---
 
# การทำงานของมนุษย์กับคอมพิวเตอร์ [1]
 
- ก่อนที่คอมพิวเตอร์จะมีบทบาทสำคัญ มนุษย์สื่อสาร แลกเปลี่ยนกันโดยไม่มีสื่อกลาง เช่น เงินตรา ไม่มีโทรศัพท์ ไม่มีเอกสาร ไม่มีบันทึก ไม่มีสื่อสังคม แลกกันตรงไปตรงมา ดังคำว่า "**จูงวัวไปค้า ขี่ม้าไปขาย ใครจักใคร่ค้าช้างค้า ใครจักใคร่ค้าม้าค้า**" ปรากฎในศิลาจารึกที่กล่าวถึงความเจริญรุ่งเรืองของอาณาจักรสุโขทัย สมัยพ่อขุนรามคำแหงมหาราช
- ปัจจุบัน **มนุษย์กับคอมพิวเตอร์มีปฏิสัมพันธ์** (Interaction) สื่อสารออนไลน์ ซื้อขายออนไลน์ เรียนสอนออนไลน์ ดูหนังฟังเพลงออนไลน์ ฝากถอนโอนออนไลน์ ผ่านอุปกรณ์รอบตัวที่หลากหลาย ทั้งสมาร์ทโฟน เครื่องคอมพิวเตอร์ตั้งโต๊ะ โน๊ตบุ๊ค แท็บเล็ต และอินเตอร์เน็ตในทุกสิ่ง (IoT)
- **ปฏิสัมพันธ์ระหว่างมนุษย์และคอมพิวเตอร์** (Human–computer interaction : HCI) คือ การศึกษาการวางแผน และออกแบบลักษณะการมีปฏิสัมพันธ์ระหว่างมนุษย์ หรือผู้ใช้งานคอมพิวเตอร์ กับคอมพิวเตอร์
 
---
 
# ท่านั่งใช้คอมพิวเตอร์ตั้งโต๊ะ
 
![การทำงานกับคอมพิวเตอร์เป็นเวลานานในท่าทางที่ไม่เหมาะสม อาจทำให้เกิดการเจ็บป่วยได้](http://www.thaiall.com/shorttk/posture_tk.jpg
 
- hci/ergonomics.jpg
 
---
 
# ท่าทางในการใช้อุปกรณ์ต่าง ๆ
 
![http://integratedhealthcareltd.com/2017/12/05/posture/](http://www.thaiall.com/hci/device_posture.jpg)
 
---
 
# Human-computer interaction : HCI
 
- **ปฏิสัมพันธ์ระหว่างคอมพิวเตอร์กับมนุษย์**
เป็นระเบียบวิธีที่เกี่ยวข้องกับการออกแบบการประเมินผล และการดำเนินการของระบบคอมพิวเตอร์ที่สามารถ
มีปฏิสัมพันธ์กับมนุษย์ เพื่อประโยชน์ของการใช้งาน และกับการศึกษาปรากฎการณ์ที่สำคัญในสภาพแวดล้อมต่าง ๆ ของระบบคอมพิวเตอร์
 
---
 
# พฤติกรรมมนุษย์กับคอมพิวเตอร์ ในร้านกาแฟ
 
![วัฒนธรรมการอ่านของผู้คนเปลี่ยนไปมาก  [ร้านกาแฟ ขนมนมเนย เพิ่มบริการโต๊ะเก้าอี้ส่วนตัว](http://www.thaiall.com/readbookt/) สำหรับใช้งานคอมพิวเตอร์โน๊ตบุ๊ค](http://www.thaiall.com/readbookt/maya_notebook_service.jpg)
 
---
 
# คอมพิวเตอร์ สื่อสังคม และมนุษย์
 
![In 2003, Harvard sophomore Mark Zuckerberg would build a program called 'Face mash'. ](http://www.thaiall.com/facebook/mark_2003.jpg)
 
---
 
# Gets Half A Million VR Views A Day [stat](https://bit.ly/2zHh0qN)
 
![The top six search terms including VR (the most popular), 360 VR, 360 Degree, Virtual Reality, 3D VR, and 360 Cam](http://www.thaiall.com/mit/vr_woman.jpg)
 
---
 
# มนุษย์เกี่ยวข้องกับความเป็นมาของคอมพิวเตอร์
 
- คอมพิวเตอร์เป็นเครื่องมือหนึ่งที่อำนวยความสะดวกแก่มนุษย์
- สิ่งประดิษฐ์ที่เก่าแก่ที่สุดประดิษฐ์โดยชาวจีน คือ ลูกคิด (Abacus) มากกว่า 2600 ปีก่อนคริสตกาล
- พ.ศ.2373 **Charles Babbage** ได้สร้างเครื่องวิเคราะห์ (Analytical Engine) มีส่วนประกอบสำคัญ 4 ส่วน ได้แก่ 1) ส่วนเก็บข้อมูล 2) ส่วนประมวลผล 3) ส่วนควบคุม 4) ส่วนรับข้อมูลเข้าและแสดงผลลัพธ์ แล้วได้รับการยกย่องว่าเป็น "**บิดาแห่งคอมพิวเตอร์**" ต่อมาปี พ.ศ.2385 **Lady Augusta Ada Byron** เขียนเรื่องการทำงานของเครื่อง Analytical Engine รวมถึงขั้นตอนของคำสั่ง วิธีใช้เครื่องให้ทำการคำนวณ ในหนังสือ Taylor's Scientific Memories จึงยกย่องให้ Augusta เป็นโปรแกรมเมอร์คนแรกของโลก
 
---
 
# Edsger Wybe Dijkstra เสียชีวิต 6 ส.ค. 2002 (อายุ 72 ปี)
 
![ ใช้คำว่า โปรแกรมเมอร์ (Programmer) กับโลกของคอมพิวเตอร์เป็นคนแรก](http://www.thaiall.com/article/dijkstra.jpg)
 
---
 
# ความเป็นมาของคอมพิวเตอร์
 
- คอมพิวเตอร์เครื่องแรกของโลก คือ **ENIAC**
- ปีพ.ศ.2489 **John W. Mauchly และ John Presper Eckert** สร้างคอมพิวเตอร์อิเล็กทรอนิกส์ขึ้นมา มีชื่อว่า **ENIAC** (Electronic Numerical Intergrater and Calculator) เพื่อใช้คำนวณหาทิศทางและระยะทางในการส่งขีปนาวุธ โดยใช้หลอดสุญญากาศจำนวน 18,000 หลอด ทำให้มีความเร็วและความถูกต้องแม่นยำมากขึ้น
 
---
 
# คอมพิวเตอร์เครื่องแรกของโลก ใช้คำนวณหาทิศทางและระยะทางในการส่งขีปนาวุธ
 
 
---
 
# เครื่องคอมพิวเตอร์ที่มีบทบาทสำคัญ
 
- เครื่องจ่ายเงินอัตโนมัติ (Automatic Teller Machine : ATM)
- เครื่องช่วยงานส่วนบุคคลแบบดิจิทัล (Pernonal Digital Assistant : PDA)
- สมาร์ทโฟน มีแอพพลิเคชั่นธนาคาร (Application)
- เครื่องคิดเลข (Calculator)
- ipod, iphone, ipad, Samsung, Huawei
- UNIVAC โดย บริษัท Remington Rand เป็นคอมพิวเตอร์เครื่องแรกที่ปรากฎในโฆษณาทางโทรทัศน์
- Facebook.com
 
---
 
# ตู้เอทีเอ็ม กับมิจฉาชีพ
 
 
---
 
# เครื่องช่วยงานส่วนบุคคลแบบดิจิทัล (PDA)
 
![Pernonal Digital Assistant](http://www.thaiall.com/article/inpalmiiic.gif)
 
---
 
# การรับข้อมูล และแสดงผลของมนุษย์ และคอมพิวเตอร์ [2]
 
- การรับข้อมูลและการแสดงออกของมนุษย์ เกี่ยวกับการมองเห็น การได้เยิน การเคลื่อนไหว หลังจากรับข้อมูลผ่านโสตประสาทต่าง ๆ ก็จะถูกเก็บและใช้เปรียบเทียบในความทรงจำของมนุษย์ สมองจะประมวลผลข้อมูล ผ่านการให้เหตุผล การแก้ปัญหา การใช้ความถนัดเฉพาะด้าน
 
---
 
# การรับข้อมูล และแสดงผลของมนุษย์
 
1. **ดวงตา และการมองเห็น** (Eye และ Photoreceptor)
 
- การมองเห็นขนาดและความลึก (Size และ Depth)
- ความสว่าง (Brightness)
- สี (Color)
 
2. **หูและการได้ยิน** (Ears และ Hearing)
 
- เสียง (Sound)
 
3. **การสัมผัส** (Touch)
 
4. **การเคลื่อนไหว** (Movement)
 
---
 
# ตา หู จมูก ลิ้น สัมผัส
 
 
---
 
# Human , Hardware , Software
 
 
---
 
# การผสมผสานสหวิทยาการ [3]
 
- **พหุวิทยาการ (Multidisciplinary) หรือ สหวิทยาการ (Interdisciplinary)** หมายถึง การใช้องค์ความรู้หลายสาขาวิชา หลายศาสตร์ หรือหลายอนุศาสตร์ มาผสมผสานใช้ในการวิเคราะห์ วิจัย และสังเคราะห์ขึ้นเป็นองค์ความรู้ใหม่ และพัฒนาเป็นศาสตร์ใหม่ขึ้น
- **หลักสูตรพหุวิทยาการ (Multidisciplinary)** หมายถึง หลักสูตรที่นำเอาความรู้หลายศาสตร์ หรือหลายอนุศาสตร์เข้ามาใช้ในการเรียนการสอน เพื่อประโยชน์ในการวิเคราะห์ วิจัย จนกระทั่งผู้เรียนสามารถพัฒนาความรู้ องค์ความรู้เป็นศาสตร์ใหม่ขึ้นหรือเกิดอนุศาสตร์ใหม่ขึ้น
- **ตัวอย่างหลักสูตรที่เป็นพหุวิทยาการ**
 
1. **วิศวกรรมชีวการแพทย์** (วิศวกรรมศาสตร์+แพทย์ศาสตร์)
2. **ภูมิศาสตร์สารสนเทศ** (ภูมิศาสตร์+เทคโนโลยีสารสนเทศ)
3. **วิศวกรรมนาโน** (วิศวกรรมศาสตร์+วิทยาศาสตร์-เคมี)
 
---
 
# Google map มีบริการให้นักพัฒนาประยุกต์ใช้ระบบได้
 
 
---
 
# ผสมผสานสหวิทยาการ
 
- การผสมผสานสหวิทยาการปฏิสัมพันธ์ระหว่างคอมพิวเตอร์กับมนุษย์เป็นการเชื่อม เพื่อให้มนุษย์นำเทคโนโลยีไปใช้ประโยชน์ (Utilization) และเทคโนโลยีจะถูกใช้งานอย่างไร (Design) ที่ให้มุ่งตอบวัตถุประสงค์ (Objective) เป็นสำคัญ
- ตัวอย่าง ระบบจองตั๋วเครื่องบิน หรือ ตู้เอทีเอ็ม หรือ สมาร์ทโฟน
 
- [อ่านเพิ่ม นิยามศัพท์ การประกันคุณภาพการศึกษา](http://www.thaiall.com/iqa/qa_definition58.pdf)
 
---
 
# โทรศัพท์มือถือ มีชิ้นส่วน 1500-2000 ชิ้น
 
- ระบบปฏิบัติการ
- การส่งสัญญาณไร้สาย
- กล้อง
- ระบบการแสดงผล
- ระบบเสียง
- การบันทึกภาพและวีดีโอ
- หน้าจอ
- หน่วยความจำ micro SD
- พอร์ตภายนอกสำหรับโอนถ่ายข้อมูล
- การเรียกดู แก้ไข บันทึกเอกสาร
- GPS
- Sensor
 
- [แหล่งภาพ และข้อมูล  - IP IDE Center](https://www.facebook.com/ipidethailand/photos/a.260899894411018/892145987953069/)
 
---
 
# โทรศัพท์มือถือ 1 เครื่อง มีสิทธิบัตรที่เกี่ยวข้องหลายพันฉบับ
 
![สิทธิบัตร Patent - IP IDE Center](http://www.thaiall.com/hci/phone_patent.jpg)
 
---
 
# HCI Topics (Lapin, Kristina 2013)
 
1. **มนุษย์ (Human)**
 
> Information processing, communication, interaction, มนุษย์กับสภาพการทำงาน = การยศาสตร์
 
2. **คอมพิวเตอร์ (Computer)**
 
> Computer graphics, เทคนิคการโต้ตอบ (dialog techniques), Input-output devices
 
3. **ออกแบบ (Design)**
 
> แนวทางการออกแบบ (Design approaches), prototyping, evaluation
 
4. **บริบทของการใช้ (Context of use)**
 
> Social organization and work, human-machine fit, ขอบเขตการใช้งาน (application domains)
 
- [อ่านเพิ่ม ](http://www.thaiall.com/hci)
 
---
 
# มนุษย์ คอมพิวเตอร์ ออกแบบ บริบทของการใช้
 
![Human Computer Interaction](http://www.thaiall.com/hci/hci_relation.png)
 
---
 
# องค์ประกอบการออกแบบปฏิสัมพันธ์
 
- **ปฏิสัมพันธ์ระหว่างคอมพิวเตอร์กับมนุษย์** แสดงถึงความสัมพันธ์ที่ซับซ้อนระหว่างมนุษย์กับคอมพิวเตอร์
ซึ่งเป็น 2 สิ่งที่แตกต่างกัน การบูรณาการ 2 สิ่งต้องอาศัยความเข้าใจที่ดี และมีพื้นฐานมาจากหลายศาสตร์ที่เกี่ยวกับมนุษย์ อาทิ จิตวิทยาสังคมขององค์กร การยศาสตร์ และปัจจัยของมนุษย์ ภาษาศาสตร์ ปรัชญา สังคมวิทยา วิทยาการคอมพิวเตอร์ และการออกแบบ
 
 
---
 
# องค์ประกอบการออกแบบปฏิสัมพันธ์ (Interaction Design)
 
![หนังสือ Mobile Interactions in Context หน้า 20   https://books.google.co.th/books?id=BhIiBAAAQBAJ&pg=PA20](http://www.thaiall.com/hci/interaction_design.jpg)
 
---
 
# องค์ประกอบการออกแบบปฏิสัมพันธ์ (Interaction Design)
 
1. **สายวิชาการ (Academic Disciplines)**
 
- การยศาสตร์ (Ergonomics) ศาสตร์ว่าด้วยสภาพการทำงานที่เหมาะสม
- จิตวิทยา/วิทยาศาสตร์พุทธิปัญญา (Psychology/Cognitive Science)
- สารสนเทศ (Infomatics)
- วิศวกรรม (Engineering)
- วิทยาการคอมพิวเตอร์/วิศวกรรมซอฟต์แวร์ (Computer Science/Software Engineering)
- สังคมศาสตร์ (Social Sciences) (สังคมวิทยา Sociology, มานุษยวิทยา Anthropology)
 
---
 
# องค์ประกอบการออกแบบปฏิสัมพันธ์ (Interaction Design)
 
2. **การใช้ออกแบบ (Design Practices)**
 
- ออกแบบกราฟิก (Graphic Design)
- ออกแบบผลิตภัณฑ์ (Product Design)
- ออกแบบศิลปิน (Artist-Design)
- ออกแบบอุตสาหกรรม (Industrial Design)
- อุตสาหกรรมภาพยนตร์ (Film Industry)
 
---
 
# องค์ประกอบการออกแบบปฏิสัมพันธ์ (Interaction Design)
 
3. **สหวิทยาการ (Interdisciplinary Fields)**
 
- ปัจจัยมนุษย์ (Human Factors : HF)
- วิศวกรรมการรับรู้ (Cognitive Engineering)
- Human-Computer Interaction : HCI)
- การรับรู้ศาสตร์ว่าด้วยสภาพการทำงาน (Cognitive Erogonomics)
- การทำงานร่วมกัน (Computer-Supported Cooperative Work : CSCW)
- ระบบสารสนเทศ (Information Systems)
 
---
 
# ภาษาคอมพิวเตอร์
 
```
<body>
<b>Hello World</b>
<a href="http://www.thaiall.com/hci">HCI</a>
</body>
```
 
- [อ่านเพิ่ม j01](http://www.thaiall.com/java/js01.htm)
- [อ่านเพิ่ม Hello world](http://www.thaiall.com/programming/helloworld.htm)
- [อ่านเพิ่ม joom.htm](http://www.thaiall.com/actress/joom.htm)
 
---
 
# หน่วยที่ 2 การนำเข้าและนำออกของมนุษย์
 
## พฤติกรรมมนุษย์
## มนุษย์กับข้อจำกัดต่าง ๆ
## การแก้ปัญหา
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจพฤติกรรมมนุษย์
2. เพื่อให้เข้าใจมนุษย์กับข้อจำกัดต่าง ๆ
3. เพื่อให้เข้าใจการแก้ปัญหา
 
---
 
# สิ่งที่คาดหวัง
 
สามารถเลือกวิธีแก้ปัญหาได้อย่างเหมาะสม
 
---
 
# พฤติกรรมมนุษย์ [1]
 
**พฤติกรรม (Behavior)** คือ ทุกสิ่งที่บุคคลแสดงออก และถูกสังเกตได้โดยตรง หรืออยู่ในกระบวนการทางจิตใจ เช่น ความคิด ความรู้สึก และแรงขับ ซึ่งเป็นประสบการณ์ของแต่ละบุคคลที่ไม่สามารถสังเกตได้โดยตรง
 
---
 
# ความเป็นมาของมนุษย์
 
**ความเป็นมาของมนุษย์** พบว่า มนุษย์เป็นสิ่งมีชีวิตที่มีพัฒนาการภายหลังจากการกำเนิดของโลก มากว่า 4600 ล้านปี แต่สิ่งมีชีวิตถือกำเนิดได้ประมาณ 3600 ล้านปี แล้วมนุษย์ยุคใหม่สืบสายพันธุ์มาจากบรรพบุรุษกลุ่มเล็กในแอฟริกาเพียง 2,000 คน เมื่อ 70,000 ปีก่อน แล้วกระจายจนมีประชากรทั่วโลกมากถึง 7,000 ล้านคน ในปัจจุบัน
 
---
 
# ประเภทของพฤติกรรม
 
ประเภทของพฤติกรรม ใช้เกณฑ์จำแนก 5 เกณฑ์ (กุญชรี ค้าขายและคณะ,2545 อ้างอิงใน อ.ภาณุวัฒน์ ศิวะสกุลราช)
 
1. **เกณฑ์ในการใช้การสังเกต** มี 2 ประเภท คือ 1) พฤติกรรมภายนอก (Overt Behavior) และ 2) พฤติกรรมภายใน (Covert Behavior)
 
> เป็นสิ่งที่เห็นได้เช่น ยิ้ม หัวเราะ ร้องไห้ กับความรู้สึก ความเข้าใจ ความจำ
 
2. **เกณฑ์ด้านแหล่งกำเนิดพฤติกรรม** มี 2 ประเภท คือ 1) พฤติกรรมวุฒิภาวะ (Maturity) และ 2) พฤติกรรมที่เกิดจากการเรียนรู้ (Learned)
 
> เป็นวงจรชีวิต กับจากประสบการณ์เช่น ว่ายน้ำ อ่านหนังสือ ขี่จักรยาน
 
---
 
# ประเภทของพฤติกรรม
 
3. **เกณฑ์ด้านภาวะทางจิตของบุคคล** มี 2 ประเภท คือ 1) พฤติกรรมที่กระทำโดยรู้ตัว (Conscious) และ 2) พฤติกรรมที่กระทำโดยไม่รู้ตัว (Unconscious)
 
> เป็นการคุมด้วยจิต เช่น วิ่ง พูด เดิน กับไร้สติเช่น ฝัน ละเมอ
 
4. **เกณฑ์ด้านการแสดงออกของอินทรีย์** มี 2 ประเภท คือ 1) พฤติกรรมทางกาย (Physical Activity) และ 2) พฤติกรรมทางจิต (Psychological Activity)
 
> เป็นการเคลื่อนไหวของอวัยวะ เช่นการเปลี่ยนอริยาบถ กับความคิด ความเข้าใจ อารมณ์
 
5. **เกณฑ์ด้านการทำงานของระบบประสาท** มี 2 ประเภท คือ 1) พฤติกรรมที่ควบคุมได้ (Voluntary) และ 2) พฤติกรรมที่ควบคุมไม่ได้ (Involuntary)
 
> เป็นการสั่งการด้วยสมอง กับเกิดจากอวัยวะ เช่น สะอึก สะดุ้ง
 
---
 
# องค์ประกอบของพฤติกรรม
 
1. การรับรู้ (Perception) ด้วยประสาทสัมผัส (Sense) หู ตา จมูก ลิ้น สัมผัส
2. การเรียนรู้ (Learning) ด้วยประสบการณ์ (Experience)
3. การคิด (Thinking) ด้วยการรู้สึกถึงสิ่งที่สัมผัสทั้งกายและใจ เมื่อมีสิ่งเร้ามากระตุ้น (Feel)
4. สติปัญญา (Intelligence) ด้วยการวิเคราะห์แยกแยะระหว่างสิ่งที่ชอบและสิ่งที่ไม่ชอบ (Analysis)
5. เจตคติ (Attitude) ด้วยการใช้ความรู้สึกประเมินถึงสิ่งต่าง ๆ ตามทัศนคติเฉพาะตน แล้วออกเป็นพฤติกรรม
6. อารมณ์ (Emotion) ด้วยการรู้สำนึก จากฮอร์โมน หรือสารสื่อประสาท แล้วส่งผลต่อสภาพจิตลักษณะหนึ่ง เช่น ดีใจ เศร้า
7. ความเชื่อ (Beliefs) ด้วยการพิจารณายอมรับนับถือต่อสิ่งนั้น ว่าเป็นความจริง
 
---
 
# ทฤษฎีแรงจูงใจ Motivation Theory
 
1. **ทฤษฎีเกี่ยวกับสมดุลยภาพและแรงขับ** (Homeostasis and drive theory)
 
> หลักการของสมดุลยภาพ (homeostasis) หมายถึง ความโน้มเอียงของร่างกาย ที่จะทำให้สิ่งแวดล้อมภายในคงที่อยู่เสมอ เช่น เมื่อหิว กระหาย
 
2. **ทฤษฎีของความต้องการและแรงขับ** (Theory of needs and drives)
 
> ความต้องการ หมายถึง สภาพสรีรวิทยาของการที่เนื้อเยื่อขาดสิ่งที่จำเป็นบางอย่าง ส่วนแรงขับหมายถึงผลที่เกิดตามมาทาง สรีรวิทยาของความต้องการ
 
3. **ทฤษฎีเกี่ยวกับเหตุกระตุ้นใจ** (Incentive theory)
 
> เหตุกระตุ้นใจหรือเครื่องชวนใจ (incentives) คือ อาหารที่อร่อยสามารถกระตุ้นความหิว รวมทั้งทำให้ความรู้สึกเช่นนี้ลดลง หรือสุนัขที่กินอาหารจนอิ่ม อาจกินอีกเมื่อเห็นสุนัขอีกตัวกำลังกินอยู่ กิจกรรมที่เกิดขึ้นมิได้เป็นเรื่องของแรงขับภายใน
 
---
 
# ทฤษฎีแรงจูงใจ Motivation Theory
 
4. **ทฤษฎีเกี่ยวกับสัญชาตญาณ** (Instinct theory)
 
> สัญชาตญาณ คือ แรงทางชีวภาพที่มีมาแต่กำเนิด และเป็นตัวผลักดันให้อินทรีย์แสดงพฤติกรรมอย่างหนึ่งอย่างใดออกมา พฤติกรรม ของสัตว์ แล้ว William McDougall เขียนในหนังสือ Social psychology ค.ศ.1908 จำแนกสัญชาตญาณไว้ดังนี้ การหลีกหนี (flight) การขับไล่ (repulsion) ความอยากรู้ (curiosity) ความอยากต่อสู้ (pugnacity) การตำหนิตนเอง (self-abasement) การเสนอตนเอง (self-assertion) การสืบพืชพันธุ์ (reproduction) การรวมกลุ่ม (gregariousness) การแสวงหา (acquisition) การก่อสร้าง (construction)
 
5. **ทฤษฎีเกี่ยวกับจิตไร้สำนึก** (Theory of unconscious motivation)
 
> ฟรอยด์ เชื่อว่าพฤติกรรมของมนุษย์ถูกกำหนดโดย 2 สัญชาตญาณ คือ 1) สัญชาตญาณแห่งชีวิต (life instincts) ที่แสดงออกมาเป็นพฤติกรรมทางเพศ และ 2) สัญชาตญาณแห่งความตาย (death instincts) ซึ่งผลักดันให้เกิดเป็นพฤติกรรมก้าวร้าว
 
---
 
# ทฤษฎีแรงจูงใจ Motivation Theory
 
6. **ทฤษฎีเกี่ยวกับการรู้ **(Cognitive theory)
 
> การรู้ (cognition) มาจากภาษาลาติน แปลว่าการรู้จัก (knowing)
 
> ความเข้าใจ หรือคาดคะเน มักอาศัยการกำหนดรู้ (perception) เช่น การเลือกสิ่งของที่มีคุณค่าใกล้เคียงกัน การกระตุ้น หรือพฤติกรรมที่กำลังดำเนินไปสู่เป้าประสงค์ (goal-seeking behavior) มักเกิดจากความรู้ ที่เคยพบมา เป็นตัวกำหนด หรืออาศัยเหตุการณ์ในอดีต สิ่งแวดล้อมในปัจจุบันและความคาดหวังในอนาคต
 
7. **ทฤษฎีเกี่ยวกับจิตวิญญาณ** (Spiritual theory)
 
> จำลอง ดิษยวณิช (2545) ให้ความหมายของคำว่าจิตวิญญาณ ว่า "**จิตวิญญาณ** หมายถึง ภวังคจิต (the life continuum) ในพุทธศาสนา หรือจิตไร้สำนึก (the unconscious) ในจิตวิเคราะห์" จิตวิญญาณเป็นส่วนลึกภายในจิตใจของมนุษย์มีแรงจูงใจที่ทรงพลังอย่างหนึ่งคือ"กรรม" กรรมเป็นการกระทำของคนเรา ไม่ว่าจะเป็นทางใจ ทางวาจา หรือทางกาย ถ้ากระทำกรรมดีก็จะส่งผลไปในทางที่ดี ถ้ากระทำกรรมชั่วก็จะส่งผลไปในทางที่ไม่ดี ทำกรรมเช่นใด ย่อมได้ผลเช่นนั้น สมดังคำกล่าวว่า "ทำดีได้ดี ทำชั่วได้ชั่ว"
 
---
 
# กลุ่มจิตวิทยาเพื่อความเข้าใจเกี่ยวกับพฤติกรรมมนุษย์ (1/4)
 
1. **แนวทัศนะของกลุ่มจิตวิทยาโครงสร้างนิยม** (Structuralism)
 
> เชื่อว่าเกี่ยวกับจิต มนุษย์มีองค์ประกอบ 2 ส่วน คือ กาย กับ จิต โดยจิตควบคุมกาย
 
> ซึ่งจิตประกอบด้วย การรับสัมผัส ความรู้สึก และจินตนาการ
 
2. **แนวทัศนะของกลุ่มจิตวิทยาหน้าที่นิยม** (Functionalism)
 
> คล้ายกลุ่มโครงสร้างนิยม แต่มุ่งศึกษาหน้าที่ และกระบวนการของจิตที่ส่งผลต่อการแสดงออก
 
> แล้วมุ่งศึกษาสิ่งที่ช่วยให้มนุษย์ปรับตนต่อสิ่งแวดล้อม หรือแก้ปัญหาได้ดี จึงเน้นศึกษากระบวนการ
 
> แล้วมุ่งศึกษาว่าอะไรทำให้มนุษย์แตกต่าง หรือปรับตัวกับสิ่งแวดล้อมได้ดีกว่าสัตว์จำพวกอื่น
 
---
 
# กลุ่มจิตวิทยาเพื่อความเข้าใจเกี่ยวกับพฤติกรรมมนุษย์ (2/4)
 
3. **แนวทัศนะของกลุ่มจิตวิทยาจิตวิเคราะห์ **(Psychoanalysis)
 
> ช่วยให้เห็นความผิดปกติของพฤติกรรม เข้าใจผู้มีปัญหา เป็นแนวทางในการบำบัดรักษา จิตคนเราแบ่งเป็น 3 ส่วน
 
1. **จิตสำนึก** (Conscious mind) เป็นภาวะปกติ รู้ตัวว่าทำอะไร
2. **จิตกึ่งรู้สำนึก** (Preconcious mind) เก็บจากประสบการณ์มาตัดสินใจ ไม่รู้ตัวขณะนั้น
3. **จิตไร้สำนึก** (Unconscious mind) พฤติกรรมที่เจ้าตัวไม่รู้ตัวเลย ถ้าทำผิด มักมีโทษเบากว่ารู้สำนึก
 
---
 
# กลุ่มจิตวิทยาเพื่อความเข้าใจเกี่ยวกับพฤติกรรมมนุษย์ (3/4)
 
4. **แนวทัศนะของกลุ่มจิตวิทยาพฤติกรรมนิยม** (Behaviorism)
 
> เน้นศึกษาพฤติกรรมภายนอก เชื่อว่าการแสดงออกสะท้อนมาจากจิต เน้นศึกษารูปธรรม
 
> การศึกษาจึงเน้นทฤษฎีการเรียนรู้ ที่นำไปใช้มากในการปรับพฤติกรรม
 
5. **แนวทัศนะของกลุ่มจิตวิทยาเกสตัลท์** (Gestalt Psychology) หรือกลุ่มปัญญานิยม (Cognitivism)
 
> มองพฤติกรรมส่วนรวม ไม่แยกศึกษา เชื่อว่าพฤติกรรมเกิดจากคุณสมบัติโดยรวม
 
> โดยรวมประกอบด้วย ความรู้ ความคิด ทักษะ ทัศนคติ เป็นต้น
 
> กลุ่มนี้ให้ความสำคัญกับ การรับรู้ (Perception) และ การหยั่งเห็น (Insight)
 
---
 
# กลุ่มจิตวิทยาเพื่อความเข้าใจเกี่ยวกับพฤติกรรมมนุษย์ (4/4)
 
6. **แนวทัศนะของกลุ่มจิตวิทยามนุษยนิยม** (Humanism)
 
> เชื่อว่าบุคคลมีเสรีภาพ เลือกวิถีชีวิต มีความต่างและจุดเด่นของแต่ละบุคคล นำส่วนดีของตนมาใช้ประโยชน์ได้
 
> มีความเชื่อเบื้องต้น 5 ข้อที่ต่างกับกลุ่มอื่น (เติมศักดิ์ คทวณิช, 2550)
 
1. มนุษย์มีจิตใจ ต้องการความรัก ความอบอุ่น ความเข้าใจ มีความสามารถเฉพาะตัว เป็นตามใจคนอื่นไม่ได้ ตรงข้ามกับกลุ่มพฤติกรรมที่เห็นว่าเราสามารถของมนุษย์ด้วยกันได้
2. มนุษย์พยายามจะรู้สึก เข้าใจตนเอง ต้องการบรรลุศักยภาพสูงสุด (Self acturalization) จึงไม่ยากที่จะพัฒนา
3. กฎระเบียบไม่จำเป็นสำหรับผู้พัฒนาแล้ว ทุกคนมุ่งเป็นมนุษย์ที่สมบูรณ์ จุดเริ่มต้นคือต้องทำให้เกิดการยอมรับตนเองก่อนว่าเข้าใจ และทำได้
4. ผู้พร้อมปรับปรุงตนเองควรได้สิทธิเลือกกระทำ และตัดสินใจด้วยตนเอง เป็นการออกแบบชีวิตที่เหมาะสมกับตนเอง
5. วิธีการแสดงหาความรู้หรือข้อเท็จจริง สำคัญกว่าตัวความรู้ เพราะโลกเปลี่ยนแปลงเสมอ
 
---
 
# วิธีการศึกษาพฤติกรรมของมนุษย์
 
1. **การทดลอง** (Experimental Method) เป็นการศึกษาความสัมพันธ์เชิงเหตุ มีตัวแปรอิสระและตัวแปรตาม
2. **การสำรวจ** (Survey Method) เป็นการศึกษาตัวแปรอย่างเป็นระบบ มีกลุ่มตัวอย่างที่แทนประชากรได้
3. **วิธีการตรวจสอบจิตตนเอง** (Introspection Method) สำรวจตนเอง แล้วรายงานออกมา อาจเล่าถึงอดีต
4. **วิธีทางคลินิก** (Clinical Method) ศึกษาแบบลึกเฉพาะราย ใช้เวลานาน ใช้ข้อมูลรอบด้าน หาคำตอบ
5. **การสังเกตอย่างมีระบบ** (Systematic Observation) เฝ้าดูสถานการณ์ของกลุ่มตัวอย่าง ที่ไม่รู้ตัว
6. **การใช้แบบสอบถาม** (Questionnaire) เหมาะกับศึกษาพฤติกรรมบุคคลจำนวนมาก ได้คำตอบรวดเร็ว
7. **การทดสอบทางจิตวิทยา** (Psychological Testing) ใช้แบบทดสอบทางจิตวิทยาที่แฝงในตัวบุคคล
 
---
 
# กฎของฟิตส์ (Fitts' Law)
 
**กฎของฟิตส์ (Fitts' Law)** (Mackenzie,1991) เป็นแนวคิดหรือโมเดลที่ใช้ในการคำนวณพฤติกรรมของมนุษย์ เกี่ยวข้องกับรูปแบบของงานแตะ (Tap) เป็นการอธิบายความสัมพันธ์ระหว่างเวลาที่ใช้ในการเคลื่อนที่ (MT) กับระยะทางและขนาดของเป้าหมาย [wiki]
 
> เมื่อ ดัชนีความยากของงาน (**ID** = Index of Difficulty) สัมพันธ์กับ
 
> **W** = ขนาดความกว้างของเป้าหมายในทิศทางเดียวกับการเคลื่อนที่ (Width)
 
> **A** = ระยะห่างระหว่างจุดเริ่มต้นกับจุดศูนย์กลางเป้าหมาย (Amplitude)
 
> ส่วนการหา ระยะเวลาในการเคลื่อนที่ ก็ต้องใช้ ID และ a กับ b
 
> **MT** = ระยะเวลาในการเคลื่อนที่ (Movement Time)
 
> **ID** = ดัชนีความยากของงาน (Index of Difficulty)
 
> a และ b = เป็นค่าคงที่ใช้ในความสัมพันธ์ถดถอยเชิงเส้นตรง (Regression coefficient)
 
---
 
# กฎของฟิตส์ (Fitts' Law)
 
![กฎของฟิตส์](http://www.thaiall.com/hci/fitts_law.png)
 
---
 
# ความแตกต่างของมนุษย์ในแต่ละรุ่น [blog](http://www.thaiall.com/blogacla/burin/4351/)
 
- **คนรุ่นแรกหรือรุ่นสูญหาย (Lost Gen.)** เกิดช่วง 2426-2443
- **คนรุ่นสองหรือรุ่นผู้ยิ่งใหญ่ (Greatest Gen.)** เกิดช่วง 2444-2467
- **คนรุ่นสามหรือรุ่นเงียบ (Silent Gen.)** เกิดช่วง 2468-2488
- **คนรุ่นสี่หรือรุ่นลูกเยอะ (Baby Boomer)** เกิดช่วง 2489-2507
- **คนรุ่นห้าหรือรุ่นเอ็กซ์ (Gen-X)** เกิดช่วง 2508-2522
- **คนรุ่นหกหรือรุ่นวาย (Gen-Y)** เกิดช่วง 2523-2540
- **คนรุ่นเจ็ดหรือรุ่นแซด (Gen-Z)** เกิดช่วง 2540 ถึงปัจจุบัน
- **คนรุ่นแปดหรือรุ่นซี (Gen-C)** ไม่แบ่งตามอายุ เป็นกลุ่มที่เชื่อมต่อเป็นนิจ
 
---
 
# พฤติกรรมมนุษย์ที่แตกต่างกันไปตามรุ่น
 
![gen ที่ต่างกัน เห็นได้ว่า gen-x ก็เชื่ออย่าง gen-y ก็เชื่ออย่าง](http://www.thaiall.com/blogacla/wp-content/uploads/2015/01/eight_gen-411x500.jpg)
 
---
 
# มนุษย์กับข้อจำกัดต่าง ๆ [2]
 
- มนุษย์มีข้อจำกัดทางกายภาพมากมายในการรับผู้ผ่านประสาทสัมผัสทั้ง 5 และระยะเวลาในการรับรู้ ประมวลผล และตอบสนอง
 
- ความจำของมนุษย์แบ่งเป็น 3 ระดับ
 
1. ความจำนำกระแสประสาท (Sensory memory = SM)
2. ความจำระยะสั้น (Short-term memory = STM )
3. ความจำระยะยาว (Long-term memory = LTM)
 
---
 
# ลำดับขั้นความต้องการของมาสโลว์ (Maslow's hierarchy of needs)
 
1. ความต้องการทางกายภาพ (Physiological)
2. ความต้องการความมั่นคงปลอดภัย (Safety)
3. ความรักและความเป็นเจ้าของ (Love/belonging)
4. ความเคารพนับถือ (Esteem)
5. ความสมบูรณ์ของชีวิต (Self-actualization)
 
---
 
# ความต้องการด้านต่าง ๆ นำไปสู่พฤติกรรมต่าง ๆ
 
![I just sued the school system](http://www.thaiall.com/blog/wp-content/uploads/2016/09/education_system-288x300.jpg)
 
---
 
# การแก้ปัญหา [3]
 
กระบวนการค้นหาทางแก้ปัญหาสำหรับเรื่องที่ไม่คุ้นชินมาก่อน มีหลายทฤษฎี
 
1. **ทฤษฎีเกสทอล** (Gestalt theory)
 
- แบบสมบูรณ์แบบ (Productive)
- แบบการเกิดใหม่ (Reproductive)
- หลักการเรียนรู้ของทฤษฎี กลุ่มเกสทอล 1) การรับรู้ (Perception) 2) การหยังเห็น (Insight)
 
2. **ทฤษฎีขอบเขตปัญหา** (Problem Space Theory)
 
3. **การเรียนรู้จากเปรียบเทียบหรือการเทียบเคียง** (Analogy)
 
4. **การได้มาของความชำนาญ** (Skill acquisition)
 
---
 
# แก้ปัญหาไม่สำเร็จ เรียกว่า บันไดสู่ความสำเร็จ
 
![Quote ของ Arianna Huffington - Failure is not the opposite of success, it is a stepping stone to success](http://www.thaiall.com/hci/arianna_huffington_success.jpg)
 
---
 
# วิธีการทางวิทยาศาสตร์ในการแสวงหาความรู้ มี 5 ขั้นตอน
 
1. กำหนดปัญหา (Problem)
2. ตั้งสมมติฐาน (Hypothesis)
3. รวบรวมข้อมูล (Collection)
4. วิเคราะห์ข้อมูล (Analysis)
5. สรุปผล (Conclusion)
 
---
 
# วิธีแก้ปัญหาในทฤษฎีเกสตัลต์ (Gestalt theory)
 
เป็นของกลุ่มนักจิตวิทยาชาวเยอรมัน Wertheimer, Koher, Koffka, Lewin (1912) การแก้ปัญหาเป็นการสร้างการตอบสนองใหม่ของสิ่งที่รู้มาก่อน ซึ่ง theory นี้มีวิธีแก้ปัญหา 2 แบบ
 
1. **แบบสมบูรณ์แบบ** (Productive)
 
> พิจารณาอย่างลึกซึ้ง แตกปัญหาเป็นโครงสร้างส่วนต่าง ๆ แล้วแก้ปัญหาด้วยวิธีใหม่
 
2. **แบบการนำมาใช้อีกครั้ง** (Reproductive)
 
> นำประสบการณ์เดิม มาแก้ปัญหากับปัญหาใหม่ อาจดัดแปลงให้เข้ากับสถานการณ์ใหม่
 
- หลักการเรียนรู้ของทฤษฎี กลุ่มเกสทอล 1) การรับรู้ (Perception) 2) การหยังเห็น (Insight)
 
- การหยังเห็น (Insight) คือ การมองเห็นทะลุข้างใน, ความเข้าใจลึกซึ้ง, สายตาแหลม ที่ได้จากการวิเคราะห์ข้อมูล
 
---
 
# หน่วยที่ 3 คอมพิวเตอร์
 
## ระบบคอมพิวเตอร์
## ประวัติความเป็นมา
## เครื่องคอมพิวเตอร์ในแต่ละยุค
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจระบบคอมพิวเตอร์
2. เพื่อให้เข้าใจประวัติความเป็นมา
3. เพื่อให้เข้าใจเครื่องคอมพิวเตอร์ในแต่ละยุค
 
---
 
# สิ่งที่คาดหวัง
 
สามารถเลือกใช้ระบบคอมพิวเตอร์ที่เหมาะสมกับลักษณะงานของตน
 
---
 
# ระบบคอมพิวเตอร์ [1]
 
ระบบคอมพิวเตอร์ถูกพัฒนา เริ่มจากการใช้ระบบเลขฐานสอง (Binary Number) เป็นข้อมูล และใช้พีชคณิต (Algebra) ในการประมวลผล
 
---
 
# พีชคณิตบูลีน
 
![Boolean Algebra](https://www.thaiall.com/digitallogic/thumb_boolean_algebra_laws.png)
 
---
 
# วิวัฒนาการก่อนมาเป็นเครื่องคอมพิวเตอร์
 
- ยุคก่อนเครื่องจักรกล (Premechanical)
- ยุคเครื่องจักรกล (Mechanical)
- ยุคเครื่องจักรกลระบบอิเล็กทรอนิกส์ (Electromechnical)
- ยุคเครื่องอิเล็กทรอนิกส์ (Electronic)
 
---
 
# ประเภทของเครื่องคอมพิวเตอร์
 
เกณฑ์จำแนก : ตามลักษณะการใช้งาน
 
1. แบบใช้งานทั่วไป (General purpose computer)
2. แบบใช้งานเฉพาะ (Special purpose computer)
 
---
 
# เกณฑ์จำแนก : ตามขนาดและความสามารถ
 
1. ซุปเปอร์คอมพิวเตอร์ (Supercomputer) เช่น TITAN Cray XK-7, Tianhe-2/Milky Way2
2. เมนเฟรมคอมพิวเตอร์ (Mainframe) เช่น IBM 701 เป็นเครื่องแรก
3. มินิคอมพิวเตอร์ (Minicomputer) เช่น IBM AS400
4. ไมโครคอมพิวเตอร์ (Microcomputer) หรือ คอมพิวเตอร์ส่วนบุคคล (Personal Computer)
5. คอมพิวเตอร์มือถือ (Handheld computer) เช่น Tablet PC, SmartPhone
 
---
 
# คอมพิวเตอร์ยุคใหม่
 
## Microcomputer + Handheld Computer
 
1. เดสก์ท็อป (Desktop)
2. โน๊ตบุ๊ค (Notebook)
3. อัลตร้าบุ๊ค (Ultrabook) เบาและมีประสิทธิภาพกว่าโน๊ตบุ๊ค
4. เน็ตบุ๊ค (Netbook) เน้นใช้อินเทอร์เน็ตเป็นหลัก ปัจจุบันเสื่อมความนิยมลง
5. แท็บเล็ต (Tablet) เช่น ipad
6. สมาร์ทโฟน (Smartphone) เช่น iphone
 
---
 
# Ultrabook
 
- มีขนาดบางเบากว่าโน้ตบุ๊ค
- ประหยัดแบตเตอรี่ใช้งานได้ยาวนานขึ้น (อย่างน้อย 5 ชั่วโมง)
- บู๊ทเครื่องได้รวดเร็ว
- สั่งงานสะดวกด้วยหน้าจอสัมผัส
- เหมาะกับการใช้งานนอกสถานที่เป็นเวลานาน
 
---
 
# Netbook
 
- ขนาดเล็กและน้ำหนักเบา กินไฟน้อย ราคาไม่แพง
- ซีพียูและวงจรต่าง ๆ มีสมรรถนะไม่สูง แต่ประหยัดไฟมาก
- เน้นใช้งานบนอินเทอร์เน็ตและงานที่ไม่ซับซ้อนมาก เช่น พิมพ์เอกสาร ฟังเพลง
- ปัจจุบันไม่ได้รับความนิยมแล้ว
 
---
 
# Wearable Computer
 
![Visual Reality](https://www.thaiall.com/hci/new/11_spaceglasses_wearable_computer.jpg)
 
---
 
# ระบบคอมพิวเตอร์ประกอบด้วย
 
1. อุปกรณ์นำเข้าข้อมูล (Input device)
2. นำข้อมูลออก (Output device)
3. ระบบเสมือนจริง (Visualization)
4. ระบบปฏิสัมพันธ์ต่อร่างกาย  (Body Interaction)
5. หน่วยความจำ (Memory)
6. การประมวลผล (Processing)
 
---
 
# มนุษย์และคอมพิวเตอร์
 
- มนุษย์และคอมพิวเตอร์ต่างก็มีการทำงานกันเป็นระบบ คือ รับข้อมูลเข้า (Input) ประมวลผล (Process) และแสดงผล (Output)
- อุปกรณ์ที่รับข้อมูลเข้าคอมพิวเตอร์ มีหน้าที่รับสารที่มนุษย์ต้องการสื่อให้คอมพิวเตอร์เข้าใจ
- ส่วนอุปกรณ์แสดงผล มีหน้าที่ส่งสารที่มนุษย์ต้องการทราบให้มนุษย์รับรู้ แล้วก็มีอุปกรณ์ที่พัฒนาขึ้นให้สามารถทำหน้าที่ทั้งรับข้อมูลและแสดงผลได้ในตัวเดียวกัน เช่น Bluetooth headset, Touch screen, Multifunction Printer, Smart Phone เป็นต้น
 
---
 
# ระบบคอมพิวเตอร์
 
![input process output](https://www.thaiall.com/hci/computer.gif)
 
---
 
# ประวัติความเป็นมา [2]
 
คอมพิวเตอร์ในยุคแรก คือ เครื่องจักรกลหรือสิ่งประดิษฐ์ที่ช่วยในการคำนวณ ถูกคิดค้นตั้งแต่ยังไม่เป็นวงจรอิเล็กทรอนิกส์ แต่พัฒนาเรื่อยมาจนเป็นอุปกรณ์ขนาดเล็กด้วยนาโนเทคโนโลยีแบบในปัจจุบัน
 
ประวัติการนับเริ่มจากราว 35000 ปีก่อน ที่มนุษย์เริ่มรู้จักการใช้นิ้วมือ และนิ้วเท่าเพื่อช่วยในการคำนวณ และเริ่มใช้ลูกหิน ใช้เชื่อกร้อยลูกหินคล้ายลูกคิด ใช้กระดูกแขนลิงบาบูน (Baboon Fibula) มาใช้ทำเครืองหมายเพื่อการคำนวณในทวีปต่าง ๆ ที่ถือเป็นอุปกรณ์คำนวณโบราญที่เก่าแก่
 
---
 
# เครื่องคอมพิวเตอร์ในแต่ละยุค
 
- ลูกคิด (Abacus) ประเทศจีนมีการคิดค้นเครื่องมือช่วยนับเพื่อให้ง่ายและรวดเร็วมากขึ้น ชาวจีนเรียกอุปกรณ์นี้ว่า Suan-Pan (ซ่วน-ผาน)
- แท่งคำนวณของเนเปียร์ (Napier’s Bone) นักคณิตศาสตร์ชาวสก๊อตชื่อ จอห์น เนเปียร์ (John Napier) ได้สร้างอุปกรณ์คำนวณ ซึ่งเป็นเครื่องมือที่ประกอบด้วยแท่งไม้ตีเส้นเป็น ตารางคำนวณหลาย ๆ แท่ง เอาไว้ใช้สำหรับคำนวณ
- เครื่องคำนวณของปาสคาล (Pascaline Calculator) โดย เบลส์ ปาสคาล (Blaise Pascal)
- เครื่องทอผ้าของแจคการ์ด (Jacauard’s loom) โดย โจเซฟ มารี แจคการ์ด (Joseph Marie Jacquard) ได้พัฒนาเครื่องทอผ้าให้ควบคุมลวดลายที่ต้องการได้เองโดยอัตโนมัติ เรียกว่า เครื่องทอผ้าของแจคการ์ด (Jacquard’s loom) ซึ่งเป็นแนวคิดที่ก่อให้เกิดการสร้างคอมพิวเตอร์ให้ทำงานได้ตามชุดคำสั่งในเวลาต่อมา
- เครื่อง Difference Engine เสนอโดย ชาร์ลส แบบเบจ (Charles Babbage) เสนอแนวคิดให้สร้างเครื่องจักรกล เพื่อคำนวณในงานที่ซับซ้อนมาก
- เครื่อง Analytical Engine เสนอโดย ชาร์ลส แบบเบจ (Charles Babbage) เพื่อให้ทำงานตามคำสั่งได้ (Programmable) โดยอาศัยแนวคิดของแจคการ์ดที่นำบัตรเจาะรูมาช่วยควบคุมลวดลายการทอผ้าให้ได้ตามแบบที่ต้องการ
 
---
 
# Analytical Engine
 
แบบร่างของเครื่อง Analytical Engine มีส่วนประกอบดังนี้
 
- Input Device อาศัยบัตรเจาะรู นำข้อมูลเข้าสู่ตัวเครื่อง
- Arithmetic Processor เป็นส่วนที่ทำหน้าที่คำนวณ
- Control Unit เป็นส่วนควบคุมและตรวจสอบงานท
- Memory เป็นส่วนเก็บตัวเลขเพื่อรอการประมวลผล
 
แนวคิดของเครื่องนี้เป็นเสมือนต้นแบบของเครื่องคอมพิวเตอร์ในยุคปัจจุบัน ดังนั้น ชาร์ลส แบบเบจ จึงได้รับสมญานามว่าเป็น บิดาแห่งคอมพิวเตอร์
 
---
 
# Colossus
 
อลัน ทัวริ่ง (Alan Turing) ได้ร่วมกับทีมงานกลุ่มหนึ่งประกอบด้วย ทอมมี่ ฟลาวเวอร์  (Tommy Flowers) และ เอ็ม เอช เอ นิวแมน (M.H.A. Newman) คิดค้นเครื่องจักรคำนวณ เพื่อถอดรหัสลับของฝ่ายทหารเยอรมัน ที่ใช้ในการติดต่อสื่อสารในสงครามโลกครั้งที่สอง
 
---
 
# บิดาแห่งวิทยาการคอมพิวเตอร์
 
![Alan Turing ใน ถอดรหัส อัจฉริยะพลิกโลก imitation game](http://www.thaiall.com/blogacla/wp-content/uploads/2015/06/alan_turing-450x337.jpg)
 
---
 
# Mark I ถูกพัฒนาตามแนวคิดของ Babbage
 
ศาสตราจารย์โฮวาร์ด ไอเคน (Howard Aiken) ได้สร้างเครื่องจักรกลระบบอิเล็กทรอนิกส์ขึ้นตามหลักการของแบบเบจได้เป็นผลสำเร็จ และเรียกเครื่องนี้ว่า Mark I (หรือ IBM Automatic Sequence Controlled Calculator)
 
---
 
# ENIAC
 
เครื่อง **ENIAC** (Electronics Numerical Integrator and Computer) โดย ดร. จอห์น ดับบลิว มอชลี่ (John W. Mauchly) และจอห์น เพรสเปอร์ เอ็คเคิร์ท (John Presper Eckert) ได้ออกแบบสร้างคอมพิวเตอร์เพื่อคำนวณวิถีกระสุนของปืนใหญ่ มีชื่อว่าเครื่อง ENIAC (Electronics Numerical Integrator And Computer) อาศัยหลอดสุญญากาศมากถึง 18,000 หลอด
 
**คอมพิวเตอร์เครื่องแรกของโลก** คือ เครื่อง ENIAC (Electronics Numerical Integrator and Computer) พัฒนาโดย ดร.จอห์น ดับลิว มอชลีย์ และ เจ เพรสเพอร์ เอคเกิรต ในราวปี ค.ศ.1946 โดยใช้ทุนของกองทัพสหรัฐอเมริกา เพื่อสร้างระบบคำนวณวิถีกระสุนปืนใหญ่ในกองทัพ มีหน้าที่คำนวณทางอิเล็กทรอนิกส์เป็นสำคัญ ใช้พื้นที่วางถึง 15,000 ตารางฟุต มีน้ำหนักถึง 30 ตัน กินไฟถึง 140 กิโลวัตต์
 
---
 
# UNIVAC
 
- เครื่อง UNIVAC (UNIversal Automatic Computer) โดยบริษัท Remington Rand สร้างขึ้นเพื่อใช้ทำนายผลการเลือกตั้งประธานาธิบดีคนที่ 34 ของสหรัฐอเมริกา ถือเป็น **เครื่องคอมพิวเตอร์ เครื่องแรกที่ใช้ในเชิงธุรกิจ** เป็นคอมพิวเตอร์เครื่องแรกที่ปรากฎในโฆษณาทางทีวี เครือข่ายโทรทัศน์ซีบีเอส (CBS) สหรัฐอเมริกา เมื่อ 5 ก.พ.1956
ซึ่งเป็นเครื่องแรกที่ใช้ในเชิงพาณิชย์
แล้วภายหลังจากเครื่องคอมพิวเตอร์นี้ได้ทำนายผลว่า Dwight D. Eisenhower
จะเป็นผู้ชนะการเลือกตั้งประธานาธิบดีในปี ค.ศ.1953 ทำให้ผู้คนตระหนักถึงความสำคัญของเครื่องคอมพิวเตอร์
 
- [อ่านเพิ่ม wikipedia/UNIVAC](https://en.wikipedia.org/wiki/UNIVAC)
 
---
 
# UNIVAC on CBS
 
![https://www.yourdictionary.com/univac-i](http://www.thaiall.com/mis/univac1.jpg)
 
---
 
# เครื่องคอมพิวเตอร์ในแต่ละยุค [3]
 
- ราว 2,600 ปีก่อนคริสตกาล ชาวจีนได้ประดิษฐ์เครื่องมือเพื่อใช้ในการคำนวณ เรียกว่า ลูกคิด (Abacus)
- ราว 2,400 ปีก่อนคริสตกาล พบว่า มีอุปกรณ์คำนวณ โดยชาวโรมัน เรียกว่า ลูกคิด
- แบบจำลองลูกคิดญี่ปุ่นโบราณ
- เครื่องคำนวณกระดูกของเนเปียร์ (Napier's Bones)
- เครื่องคำนวณของปาสคาล (Pascal)
- เครื่องหาผลต่างของแบบเบจ (Babbage’s first Difference Engine)
- ค.ศ.1946 ENIAC
- ค.ศ.1949 EDSAC
- ค.ศ.1951 UNIVAC
- ค.ศ.1952 EDVAC
 
---
 
# ยุคของคอมพิวเตอร์
 
1. คอมพิวเตอร์ยุคแรก หรือ คอมพิวเตอร์ยุคหลอดสูญญากาศ (พ.ศ.2488-2501)
2. คอมพิวเตอร์ยุคที่สอง หรือ คอมพิวเตอร์ยุคทรานซิสเตอร์ (พ.ศ.2500-2507)
3. คอมพิวเตอร์ยุคที่สาม หรือ คอมพิวเตอร์ยุควงจรรวม (พ.ศ.2508-2512)
4. คอมพิวเตอร์ยุคที่สี่ หรือ คอมพิวเตอร์ยุควีแอลเอสไอ (พ.ศ.2513-2532)
5. คอมพิวเตอร์ยุคที่ห้า หรือ คอมพิวเตอร์ยุคเครือข่าย (พ.ศ.2533-ปัจจุบัน)
 
---
 
# อุปกรณ์ที่ใช้ในเครื่องคอมพิวเตอร์
 
- หลอดสูญญากาศ (Vacuum tube)
- ทรานศิสเตอร์ (Transister)
- วงจรรวม IC (Integrated Circuit)
- วงจรรวม LSI (Large Scale Integrated Circuit)
- วงจรรวม VLSI (Very Large Scale Integrated Circuit)
 
---
 
# กฎของมัวร์ (Moore’s Law)
 
ปีพ.ศ. 2508 กอร์ดอน มัวร์ (Gordon Moore) เป็นผู้ร่วมก่อตั้งบริษัทอินเทล ได้ทำนาย และเสนอกฎที่ใช้อธิบายถึงจำนวนทรานซิสเตอร์บนแผงวงจรรวม หรือความเร็วของซีพียู ว่าจะเร็วขึ้นเป็นทวีคูณ เขาทำนายว่าคอมพิวเตอร์จะเพิ่มความเร็วเป็น 2 เท่าทุก 18 เดือน เช่น ซีพียูในปี 1987 มีความเร็ว 1.5 MHz เมื่อถึงปี 2002 ความเร็วเพิ่มเป็น 1.5 กิกะไบต์ ในด้านหน่วยความจำนั้น ทำนายว่าเพิ่มความจุเป็น 2 เท่าทุก 12 เดือน เช่น ฮาร์ดดิสก์ในปี 1991 มีความจุ 20 เมกกะไบต์ เมื่อถึงปี 2002 มีความจุ 30 กิกะไบต์
 
---
 
# เครื่องคอมพิวเตอร์ที่มีระบบระบายความร้อน
 
![Alexandre ผู้เล่าเรื่องการประกอบเครื่องใน [pantip](https://pantip.com/topic/36159228)](http://www.thaiall.com/mit/blue_pearl.jpg)
 
---
 
# องค์ประกอบของระบบคอมพิวเตอร์
 
1. ฮาร์ดแวร์ (Hardware)
2. ซอฟต์แวร์ (Software)
3. บุคลากร (Peopleware)
4. ข้อมูล (Data)
5. กระบวนการทำงาน (Procedure)
 
---
 
# หน่วยที่ 4 องค์ประกอบของคอมพิวเตอร์
 
## อุปกรณ์นำเข้า
## อุปกรณ์ประมวลผล
## อุปกรณ์แสดงผล
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจอุปกรณ์นำเข้า
2. เพื่อให้เข้าใจอุปกรณ์ประมวลผล
3. เพื่อให้เข้าใจอุปกรณ์แสดงผล
 
---
 
# สิ่งที่คาดหวัง
 
สามารถเลือกใช้อุปกรณ์นำเข้า และแสดงผลได้อย่างเหมาะสม
 
---
 
# อุปกรณ์นำเข้า [1]
 
- keyboard
- mouse
- microphone
 
---
 
# อุปกรณ์ประมวลผล [2]
 
- CPU (Central Processing Unit)
- GPU (Graphics Processing Unit)
 
---
 
# อุปกรณ์แสดงผล [3]
 
- Monitor
- Speaker
- Projector
 
---
 
# หน่วยที่ 5 อุปกรณ์ต่อพ่วง
 
## อุปกรณ์ต่อพ่วง
## เครือข่าย
## อุปกรณ์เสมือนจริง
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจอุปกรณ์ต่อพ่วง
2. เพื่อให้เข้าใจเครือข่าย
3. เพื่อให้เข้าใจอุปกรณ์เสมือนจริง
 
---
 
# สิ่งที่คาดหวัง
 
สามารถเลือกใช้อุปกรณ์ได้อย่างเหมาะสม
 
---
 
# อุปกรณ์ต่อพ่วง [1]
 
- Printer
- Scanner
- Speaker
 
---
 
# แป้นพิมพ์ หรือ คีย์บอร์ด (Keyboard)
 
อุปกรณ์นำข้อมูลเข้าสู่เครื่องคอมพิวเตอร์ แบบมีปุ่มกดหลายปุ่ม แต่ละปุ่มมีตัวอักษรประจำปุ่มชัดเจน ซึ่งออกแบบไว้หลายประเภท ดังนี้
 
1. คีย์บอร์ดเควร์ตี้ (QWERTY KB.) เป็นมาตรฐานในปัจจุบัน
2. คีย์บอร์ดแบบเรียงตามตัวอักษร (Alphabetic KB.)
3. คีย์บอร์ดแบบดาโวแรกก์ (Dvorak KB.) วางตัวอักษรใช้บ่อยไว้ใต้นิ้วสำคัญ
4. คีย์บอร์ดแบบพิเศษ (Special KB.) เหมือน QWERTY แบบ Maltron
5. คีย์บอร์ดแบบมือเดียว (Single handed KB.) ของ Maltron
6. คีย์บอร์ดแบบเครื่องดนตรี (Chord KB.)
7. คีย์บอร์ดสำหรับโทรศัพท์เคลื่อนที่ (T9 KB.)
 
---
 
# เมาส์ (Mouse)
 
- อุปกรณ์ที่ใช้ในการควบคุมตัวชี้บนจอคอมพิวเตอร์ (pointing device) เป็นอุปกรณ์สำคัญในการใช้งานคอมพิวเตอร์ชิ้นหนึ่ง ปัจจุบันถูกออกแบบมาให้มีรูปร่าง ลักษณะ สีสันแตกต่างกัน บางรุ่นมีไฟประดับให้สวยงาม เพื่อให้เมาะสมกับการใช้งานในแต่ละประเภท และความชื่นชอบของผู้ใช้ เช่น มีขนาดเล็ก มีส่วนโค้ง และส่วนเว้าเข้ากับอุ้งมือของผู้ใช้ มีรูปร่างสีสันแปลกตาไปจากรุ่นทั่วไป หรือเป็นรูปตัวการ์ตูน และล่าสุดได้มีการพัฒนา เมาส์อากาศ (Air Mouse) ซึ่งสามารถใช้งานเมาส์โดยถือขึ้นมาเอียงไปมาในอากาศโดยไม่จำเป็นต้องใช้แผ่นรอง ก็สามารถควบคุมตัวชี้ได้เช่นกัน
 
---
 
# ประวัติเมาส์
 
- เมาส์ถูกประดิษฐ์ขึ้นในปี 1963 โดย ผู้คิดค้นประดิษฐ์เม้าส์มีชื่อว่า ดร.ดักลาส คาร์ล อิงเกิลบาร์ต (Douglas Carl Engelbart) ที่สถาบันวิจัยสแตนฟอร์ด (Stanford Research Institute) เมาส์เคยมีอีกชื่อหนึ่งว่า บัก (bug) แต่ภายหลังได้รับความนิยมน้อยกว่าคำว่า เมาส์ (mouse) เป็นหนึ่งในการทดลองอุปกรณ์ชี้ (Pointing Device) สำหรับ Engelbart's oN-Line System (NLS) ส่วนอุปกรณ์ชี้อื่นออกแบบมาเพื่อการเคลื่อนไหวในร่างกายส่วนอื่น ๆ เช่น อุปกรณ์ที่ใช้ติดกับคางหรือจมูก แต่ท้ายที่สุดแล้วเมาส์ก็ได้รับการคัดเลือกเพราะง่ายต่อการใช้งาน
 
---
 
# เครือข่าย [2]
 
- LAN
- MAN
- WAN
- PAN
 
---
 
# อุปกรณ์เสมือนจริง [3]
 
- Virtual Reality
- Augmented Reality
- 3D Movie
 
---
 
# หน่วยที่ 6 โมเดลของปฏิสัมพันธ์
 
## โมเดลของปฏิสัมพันธ์
## ความสัมพันธ์ระหว่างมนุษย์กับเครื่องกล
## การโต้ตอบระหว่างอุปกรณ์และผู้ใช้
## องค์ประกอบของอินเตอร์เฟสแบบวิมป์
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจโมเดลของปฏิสัมพันธ์
2. เพื่อให้เข้าใจความสัมพันธ์ระหว่างมนุษย์กับเครื่องกล
3. เพื่อให้เข้าใจการโต้ตอบระหว่างอุปกรณ์และผู้ใช้
4. เพื่อให้เข้าใจองค์ประกอบของอินเตอร์เฟสแบบวิมป์
 
---
 
# สิ่งที่คาดหวัง
 
สามารถเลือกโต้ตอบกับอุปกรณ์ได้อย่างเหมาะสม
 
---
 
# โมเดลของปฏิสัมพันธ์ [1]
 
โมเดลของโดนอลนอร์แมน (Donald Norman’s model)
 
1. ผู้ใช้กำหนดเป้าหมาย (User establishes the goal)
2. ตั้งใจในการกำหนดสูตรหรือคิดหาวิธี (Formulates intention)
3. ระบุการกระทำกับอินเตอร์เฟสของระบบ (Specifies actions at interface)
4. ลงมือปฏิบัติตามการกระทำที่ระบุไว้ (Executes action)
5. สังเกตสถานะของระบบ (Perceives system state)
6. แปลผลสถานะของระบบ (Interprets system state)
7. ประเมินค่าสถานะของระบบโดยสัมพันธ์กับเป้าหมาย (Evaluates system state with respect to goal)
 
---
 
# โมเดลไอโบวและบีล (Abowd & Beale’s model)
 
1. ผู้ใช้ระบบมีความตั้งใจ (User intentions)
2. แปลผลการกระท าที่ตั้งใจไว้ผ่านทางอินเตอร์เฟส (Translated into actions at the interface)
3. แปลผลอินเตอร์เฟสไปสู่ทางเลือกของสถานะของระบบ (Translated into alterations of system state)
4. สะท้อนข้อมูลนำออกของระบบ (Reflected in the output display)
5. แปลผลลัพธ์โดยผู้ใช้ (Interpreted by the user)
 
---
 
# วิธีการมีปฏิสัมพันธ์ (Interaction) ของมนุษย์กับคอมพิวเตอร์ ซึ่งได้จาก
 
- ประสบการณ์หรือการทดลอง (Empirical)
- กระบวนการทางความคิด (Cognitive)
- การทำนาย (Predictive)
- ลักษณะเป็นมนุษย์ (Anthropomorphic)
 
---
 
# โมเดลปฏิสัมพันธ์ ของโดนอลนอร์แมน
 
1. ผู้ใช้กำหนดเป้าหมาย (User establishes the goal)
2. ตั้งใจในการกำหนดสูตรหรือคิดหาวิธี (Formulates intention)
3. ระบุการกระทำกับอินเตอร์เฟสของระบบ (Specifies actions at interface)
4. ลงมือปฏิบัติตามการกระทำที่ระบุไว้ (Executes action)
5. สังเกตสถานะของระบบ (Perceives system state)
6. แปลผลสถานะของระบบ (Interprets system state)
7. ประเมินค่าสถานะของระบบโดยสัมพันธ์กับเป้าหมาย (Evaluates system state with respect to goal)
 
---
 
# โมเดลปฏิสัมพันธ์ ของไอโบวและบีล
 
1. ผู้ใช้ระบบมีความตั้งใจ (User intentions)
2. แปลผลการกระทำที่ตั้งใจไว้ผ่านทางอินเตอร์เฟส (Translated into actions at the interface)
3. แปลผลอินเตอร์เฟสไปสู่ทางเลือกของสถานะของระบบ (Translated into alterations of system state)
4. สะท้อนข้อมูลนำออกของระบบ (Reflected in the output display)
5. แปลผลลัพธ์โดยผู้ใช้ (Interpreted by the user)
 
---
 
# โมเดลกระบวนการประมวลผลข้อมูลของมนุษย์
 
เกี่ยวข้องกับการรับสื่อและการจดจำของมนุษย์เกี่ยวกับ HCI ว่าแบ่งออกได้ 3 ระบบย่อย
 
1. ระบบย่อยการรับรู้ (Perceptual Subsystem)
2. ระบบย่อยการรู้จำ (Cognitive Subsystem)
3. ระบบย่อยการสั่งการ (Motor Subsystem)
 
---
 
# รูปแบบของปฏิสัมพันธ์ (Interaction styles)
 
1. อินเตอร์เฟสคอมมานไลน์ (Command line interface)
2. เมนู (Menu)
3. ภาษาธรรมชาติ (Natural Language)
4. อินเตอร์เฟสที่เป็นการสอบถาม (Query interfaces)
5. ฟอร์มให้เติมคำและตารางคำนวณ (Form-fills and spreadsheets)
6. อินเตอร์เฟสแบบวิมป์ (WIMP interface)
 
- **WIMP** ย่อมาจาก Windows + Icons + Menus + Pointers หรือ Windows + Icons + Mice + Pull-down menus
 
7. อินเตอร์เฟสแบบการชี้และคลิ๊ก (Point and click interfaces)
8. อินเตอร์เฟสแบบ 3 มิติ (Three-dimensional interfaces) มีความลึกเพิ่มมาจาก กว้าง และยาว
 
---
 
# ความสัมพันธ์ระหว่างมนุษย์กับเครื่องกล [2]
 
**การศึกษาเกี่ยวกับความสัมพันธ์ระหว่างมนุษย์กับเครื่องกล**
 
1. **การจัดการควบคุมการแสดงผล (Arrangement of Controls and Displays)** เช่น ควบคุมกลุ่มของฟังก์ชันหรือความถี่ของการใช้ หรือเรียงตามลำดับ
2. **สิ่งแวดล้อมรอบ ๆ (Surrounding Environment)** เช่น การจัดที่นั่งให้เหมาะสมกับทุกขนาดของจำนวนของผู้ใช้ระบบทั้งหมด
3. **หัวข้อเกี่ยวกับสุขภาพ (Health Issues)** เช่น รูปลักษณ์ทางกายภาพ สภาพแวดล้อม (ความชื้น อุณหภูมิ) แสงสว่าง เสียงรบกวน เวลาที่ใช้ระบบ
4. **การใช้สี (Use of color)** เช่น การใช้ **สีแดง** หมายถึง การเตือน **สีเขียว** หมายถึง ไปได้ แต่การออกแบบต้องคำนึงถึงผู้ที่ตาบอดสีด้วย
 
---
 
# สี สัมพันธ์กับ ความรู้สึก ของมนุษย์ส่วนใหญ่
 
- **สีฟ้า** -เชื่อมั่น ศรัทธา สงบ สุขุม สุภาพ
- **สีเขียว** - เย็น คลายเครียด ธรรมชาติ ปลอดภัย
- **สีเหลือง** - สดชื่น เบิกบาน แจ่มใส เร้าอารมณ์ เรียกความสนใจ
- **สีแดง** - รัก ตื่นเต้น กระตุ้นความรู้สึก มีพลัง ระมัดระวัง
- **สีส้ม** - ร้อน สดใส มีชีวิตชีวา น่าสนใจ
- **สีม่วง** - มีเกียรติ มีเสน่ห์ น่าติดตาม เร้นลับ
- **สีน้ำตาล** - อบอุ่น ได้พัก
- **สีเทา** - เศร้า อาลัย ความสงบ ความชรา
- **สีขาว** - สะอาด เบาบาง อ่อนโยน
 
---
 
# ขอบเขตของปัญญาประดิษฐ์
 
1. **ระบบผู้เชี่ยวชาญ (Expert Systems)**
 
> โปรแกรมคอมพิวเตอร์ที่แสดงความสามารถได้เหมือนกับผู้เชี่ยวชาญในสาขาต่าง ๆ หรือในงานเฉพาะอย่าง
 
2. **ภาษาธรรมชาติ (Natural Languages)**
 
> ภาษาที่เกี่ยวกับการติดต่อสื่อสารโดยตรงกับคอมพิวเตอร์ ทั้งคอมพิวเตอร์เข้าใจภาษามนุษย์ และมนุษย์เข้าใจการรับรู้ของคอมพิวเตอร์
 
3. **ระบบจับภาพ (Vision Systems)**
 
> การที่คอมพิวเตอร์สามารถทำงานได้โดยอาศัยการมอง และการจดจำรูปแบบ เช่นการตรวจหาชิ้นส่วนที่บกพร่อง การให้คอมพิวเตอร์แข่งเตะบอล เป็นต้น
 
4. **ศาสตร์ด้านหุ่นยนต์ (Robotics)**
 
> เกี่ยวกับการออกแบบ การสร้าง และการนำไปใช้งาน ให้เคลื่อนไหวได้คล้ายมนุษย์ โดยเฉพาะใช้งานที่เสี่ยงอันตรายแทนมนุษย์
 
5. **เครือข่ายเส้นประสาท (Neural Networks)**
 
> ระบบที่อาศัยความรู้เป็นพื้นฐาน สร้างเรียนแบบเส้นใยประสาทของมนุษย์ เป็นการทำกิจกรรมแบบขนานที่ทำงานพร้อมกัน เพื่อให้ได้คำตอบเดียว
 
---
 
# การโต้ตอบระหว่างอุปกรณ์และผู้ใช้ [3]
 
เป้าหมายพื้นฐานของปฏิสัมพันธ์ระหว่างคอมพิวเตอร์กับมนุษย์ คือ การปรับปรุงการสื่อสารระหว่างผู้ใช้ และคอมพิวเตอร์โดยการทำให้เครื่องคอมพิวเตอร์ใช้งานและเหมาะสมกับการตอบสนองความต้องการของผู้ใช้
 
1. ระเบียบวิธีการและกระบวนการในการออกแบบอินเตอร์เฟซ
2. วิธีการในการดำเนินการเชื่อมต่อ เช่น ซอฟต์แวร์ ชุดเครื่องมือ และห้องสมุด ขั้นตอนวิธีการที่มีประสิทธิภาพ
3. เทคนิคการประเมินและเปรียบเทียบการเชื่อมต่อ
4. การพัฒนาอินเตอร์เฟซใหม่และเทคนิคการทำงานร่วมกัน
5. การพัฒนารูปแบบการบรรยายและการคาดการณ์ และทฤษฎีของการมีปฏิสัมพันธ์
 
---
 
# องค์ประกอบของอินเตอร์เฟสแบบวิมป์ (Wimp interface) [4]
 
1. Windows
2. Icons
3. Menus
4. Pointers
5. Buttons
6. Toolbars
7. Palettes and Tear-off menus
8. Dialogue boxes
 
---
 
# ประเภทของเมนู (Menu types)
 
1. พูลดาวน์เมนู (Pull-down menu) ถ้าวางเมาส์เหนือตัวเลือกจะปรากฎเมนูย่อย
2. ดรอปดาวน์เมนู (Drop-down menu) ถ้าคลิ๊กตัวเลือกจะปรากฎเมนูย่อย
3. ฟอลล์ดาวน์เมนู (Fall-down menu) ถ้าเมาส์ผ่านเมนู เมนูย่อยจะปรากฎ
4. ป๊อปอัพเมนู (Pop-up menu) ถ้าคลิ๊กเมาส์ที่วัตถุ เมนูย่อยจะปรากฎ
 
---
 
# หน่วยที่ 7 การโต้ตอบระหว่างอุปกรณ์และผู้ใช้
 
## การปฏิสัมพันธ์ระหว่างอุปกรณ์และผู้ใช้
## ประสบการณ์การเข้าไปเกี่ยวข้อง
## ปัจจัยหลักการออกแบบให้สำเร็จ
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจการปฏิสัมพันธ์ระหว่างอุปกรณ์และผู้ใช้
2. เพื่อให้เข้าใจประสบการณ์การเข้าไปเกี่ยวข้อง
3. เพื่อให้เข้าใจปัจจัยหลักการออกแบบให้สำเร็จ
 
---
 
# สิ่งที่คาดหวัง
 
สามารถมีปฏิสัมพันธ์กับอุปกรณ์ได้อย่างเหมาะสม
 
---
 
# การปฏิสัมพันธ์ระหว่างอุปกรณ์และผู้ใช้ [1]
 
- การสร้างปฏิสัมพันธ์ทำโดยผู้ใช้เข้าถึงหรือนำเข้าข้อมูล ด้วยวิธีการที่มีความหลากหลายของอุปกรณ์นำเข้าข้อมูล เช่น แป้นพิมพ์ การชี้ตำแหน่งด้วยเมาส์ หน้าจอสัมผัส หรือ การสั่งงานด้วยเสียง และใช้เทคโนโลยีแสดงผลข้อมูลด้วยรูปแบบของภาพ ภาพเคลื่อนไหว และเสียง
 
---
 
# ประสบการณ์การเข้าไปเกี่ยวข้อง [2]
 
- ประสบการณ์การเข้าไปเกี่ยวข้อง (Experience และ Engagement)
- ความสนุก (Fun)
- การปรับเปลี่ยนสภาพงานให้เหมาะสมกับผู้ปฏิบัติงาน หรือการยศาสตร์ (Ergonomics)
 
---
 
# UX (User Experience)
 
- User eXperience คือ ประสบการณ์ของผู้ใช้งานที่เกี่ยวกับการใช้งาน (Usability) และการเข้าถึง (Accessibility)
ที่สนใจประสบการณ์การสร้างปฏิสัมพันธ์ของผู้ใช้งาน (User Interaction) ต่อการใช้งานระบบ และส่วนต่อประสานกับผู้ใช้ (User Interface = UI)
ที่เกี่ยวกับความยากง่ายในการใช้งานของผู้ใช้งาน (Usability) การเข้าถึง (Accessibility) และออกแบบการมองเห็น (Visual Design)
ผ่านประสาทสัมผัส ได้แก่ สัมผัส มองเห็น ได้ยิน รู้สึกต่อระบบ หรือผลิตภัณฑ์ที่ได้มีประสบการณ์เหล่านั้น
- [อ่านเพิ่ม](https://www.designil.com/ux-ui-live-video.html)
 
---
 
# ประสบการณ์ของผู้ใช้ (User Experience : UX)
 
ISO 9241-210 ได้กำหนดความหมายของ UX ว่า "การรับรู้และการตอบสนองของบุคคลที่เกิดจากใช้งานหรือการคาดหวังผลการทำงานของระบบหรือบริการ" มีปัจจัยที่ส่งผลต่อการสร้างประสบการณ์ของผู้ใช้ ได้แก่
 
1. ความสามารถในการเข้าถึง (Accessibility)
2. การยศาสตร์ (Ergonomics)
3. ปฏิสัมพันธ์ระหว่างคอมพิวเตอร์กับมนุษย์ (HCI)
4. ปัจจัยของมนุษย์ (Human)
5. ประสิทธิภาพของระบบ (System)
6. การตลาด (Marketing)
7. อรรถประโยชน์ (Utility)
8. การออกแบบ (Design)
9. ความสามารถใช้งานได้ (Usability)
 
---
 
# User Experience Factors
 
1. มีประโยชน์ (Useful)
2. ใช้ได้ (Usable)
3. เป็นที่น่าพอใจ (Desirable)
4. ค้นหาได้ (Findable)
5. สามารถเข้าถึงได้ (Accessible)
6. น่าเชื่อถือ (Credible)
 
---
 
# User Experience Design
 
**เกี่ยวข้องกับการใช้ข้อมูลจากงานวิจัย**
 
1. Written Language
2. Graphic Design
3. Sound
4. Motion
5. Information Design
6. Interface Design
7. Interaction Design
8. Programming
 
- [อ่านเพิ่ม](https://www.9experttraining.com/articles/ux-design-คืออะไร)
 
---
 
# ข้อพึงระวัง 7 ข้อที่ UX Designer ไม่ควรกระทำ
 
1. เชื่อในสิ่งที่ยังไม่ได้รับการพิสูจน์
2. เชื่อว่าเราใช้เครื่องมือที่ถูกต้อง
3. Bias ความลำเอียงและความอคติที่เกิดขึ้นจากการทำรีเสิร์ช
4. เก็บข้อมูลที่ได้ไว้ที่เราเพียงคนเดียว
5. ความขี้เกียจ
6. การทำรีเสิร์ชที่คลุมเครือ
7. นำเสนอสิ่งสำคัญของการรีเสิร์ชออกมาไม่ได้
 
- [ข้อพึงระวัง](https://www.designil.com/7-things-ux-designer.html)
 
---
 
# UI (User Interface)
 
- UI คือ ส่วนต่อประสานกับผู้ใช้ที่ใช้ภาษา เครื่องหมาย หรือสัญลักษณ์
มาทำหน้าที่ประสานระหว่างผู้ใช้ผลิตภัณฑ์กับกับผลิตภัณฑ์ อาจใช้สัญลักษณ์พร้อม (prompt)
ตัวชี้ตำแหน่ง (cursor) ไอคอน (icon) จอภาพ (monotor) เมาส์ (mouse)
ซึ่งเกี่ยวข้องกับ design thinking ซึ่งมีระยะของการพัฒนา
ประกอบด้วย ตามหาปัญหา (Discover) หาปัญหาที่สำคัญ (Define) ตามหาการแก้ไข (Develop) หาการแก้ไขที่ดีที่สุด (Deliver)
โดยเน้นตามหาให้ได้ปริมาณ (Quantity) แล้วนำคัดแยกและเลือกที่เน้น (Quality)
 
---
 
# หลักการใน Information Architecture (IA)
 
- **Information Architecture (IA) หรือ สถาปัตยกรรมข้อมูล** คือ โครงสร้างข้อมูลทุกอย่างที่อยู่ภายในแอพพลิเคชันหรือเว็บไซต์ การเข้าถึงข้อมูลสินค้าหรือบริการได้ง่าย มักมาจากการวาง IA อย่างเป็นระบบ การจัดการกลุ่มข้อมูลที่ยุ่งยากให้เป็นระเบียบ จึงเป็นงานของ UX Designer ที่ไม่ต่างที่สถาปนิกวางแผนโครงสร้างในพิมพ์เขียว ก่อนที่จะส่งแบบต่อให้วิศวกรเพื่อลงมือสร้างจริง
- **Ontology** คือ การกำหนดขอบเขตหรือนิยามของข้อมูล เพื่อให้เกิดความเข้าใจที่ตรงกันและเป็นมาตรฐาน เช่น นิสิตพยาบาล เป็นหลักสูตรสายวิทยาศาสตร์สุขภาพ ซึ่งการกำหนดนิยามลักษณะนี้ ทำให้ นิสิตพยาบาล นั้นถูกจำแนกออกจาก หลักสูตรสายวิทยาศาสตร์เทคโนโลยี และหลักสูตรสายสังคมศาสตร์ อย่างเด่นชัด
- **Taxonomy** คือ การจำแนกข้อมูล แล้วจัดหมวดหมู่ให้อยู่ในประเภทเดียวกัน โดยวิธีจำแนกสามารถแบ่งได้เป็นเป็น 2 รูปแบบ คือ 1) Classification การจับกลุ่มข้อมูลที่อยู่ในประเภทเดียวกัน 2) Hierarchy การใช้ลำดับความสำคัญในการจัดกลุ่ม เช่น ลำดับตัวอักษร รหัสนิสิตตามการจัดเรียงลำดับตัวเลข
- **Choreography** คือ การนำนิยามของข้อมูล (Ontology) และการจัดหมวดหมู่(Taxonomy) มาสร้างให้เกิดการปฏิสัมพันธ์กับผู้ใช้งานตามความต้องการ
- [อ่านเพิ่ม Information Architecture — เรื่องที่ UX Designer ไม่ควรมองข้าม](https://medium.com/skooldio/29f29832bb5c)
 
---
 
# หลักการใน Information Architecture (IA)
 
![Ontology (ภววิทยา) Taxonomy (อนุกรมวิทยา) และ Choreography(รูปแบบการเข้าถึง)](http://www.thaiall.com/hci/ia_3princ.png)
 
---
 
# Card sorting และ Tree Testing
 
- **Card Sorting** คือเครื่องมือที่ใช้ทำ UX เพื่อวางแผนการนำเสนอข้อมูลได้หลากหลาย ให้ได้แนวคิดในการจัดกลุ่มข้อมูลได้อย่างเหมาะสม ซึ่งต้องใช้ Eye tracking สนับสนุนให้การจัดทำ Information architecture มีความสมบูรณ์ยิ่งขึ้น ช่วยออกแบบ Menus, Navigations, Sitemap, Taxonomies (การจัดหมวดหมู่)
- [อ่านเพิ่ม Card Sorting คือ สอนใช้เครื่องมือทำ UX ยอดนิยม](https://www.designil.com/card-sorting.html)
- [คลิ๊ปเล่าเรื่อง open and closed card sorting](https://www.youtube.com/watch?v=0tNPT6X9Lhc)
- **Tree Testing** คือ การทดสอบผลการออกแบบโครงสร้างข้อมูลในทรี โดยทดสอบว่าผู้ใช้จะเลือกถูกหรือไม่ และปรับปรุงทรีจนได้แบบที่สมบูรณ์ที่สุด ซึ่งการได้ต้นแบบของทรีมักใช้ Card Sorting เป็นการเก็บแนวคิดมาใช้ในการออกแบบครั้งแรก ก่อนนำไปทดสอบ
- [คลิ๊ปเล่าเรื่อง card sorting และ tree testing](https://www.youtube.com/watch?v=cSHiu_m6vCs)
 
---
 
# Card sorting และ Tree Testing
 
![คลิ๊ปเล่าเรื่องการเชื่อมโยงระหว่าง Card sorting และ Tree Testing](http://www.thaiall.com/hci/card_sorting_tree_testing.jpg)
 
---
 
# มุมมอง (perspect.it/design-thinking/)
 
![Design Thinking is a design methodology that provides a solution-based approach to solving problems. ](http://www.thaiall.com/hci/design_thinking.png)
 
---
 
# ปัจจัยหลักการออกแบบให้สำเร็จ [3]
 
1. การออกแบบให้สามารถสร้างแบรนด์ให้กับผู้ใช้งานได้ (Branding)
2. ฟังก์ชันการทำงาน (Functionality)
3. ความสามารถในการใช้งาน (Usability)
4. เนื้อหา (Content)
 
---
 
# หน่วยที่ 8 กระบวนทัศน์
 
## กระบวนทัศน์ของปฏิสัมพันธ์
## วิวัฒนาการของอินเทอร์เน็ต
## อินเทอร์เน็ต
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจกระบวนทัศน์ของปฏิสัมพันธ์
2. เพื่อให้เข้าใจวิวัฒนาการของอินเทอร์เน็ต
3. เพื่อให้เข้าใจอินเทอร์เน็ต
 
---
 
# สิ่งที่คาดหวัง
 
สามารถใช้ประโยชน์จากอินเทอร์เน็ตได้อย่างเหมาะสม
 
---
 
# กระบวนทัศน์ของปฏิสัมพันธ์ [1]
 
- กระบวนทัศน์ของปฏิสัมพันธ์ (Paradigms of interaction)
 
- **กระบวนทัศน์** คือ โครงร่างทางทฤษฎีก่อนที่จะโดดเด่น หรือมุมมอง
 
1. ระบบการประมวลผลแบบกลุ่ม (Batch Processing) คือ การทำงานแบบเรียงลำดับ ระบบจะทำงานจนจบแล้วรอรับคำสั่งใหม่ ไม่มีปฏิสัมพันธ์ระหว่างผู้ใช้และคอมพิวเตอร์
2. ระบบแบ่งเวลา (Time sharing) คือ ผู้ใช้หลายคนใช้หน่วยประมวลผลร่วมกัน
3. ระบบที่ใช้แผนภาพและไดอะแกรม (Graphical displays) คือ การประมวลผลแบบสัมผัสโดยตรง (Direct Manipulating) มีสีสัน มีภาพ และตอบสนอง
4. ไมโครโปรเซสเซอร์ คือ การประมวลผลส่วนบุคคล (Personal computing)
5. เวิร์ลไวด์เว็บ (WWW = World Wide Web) คือการประมวลผลแบบโลกาภิวัฒน์ (Global Information) เป็นจักรวาลของเครือข่ายสารสนเทศที่เข้าถึงได้ทุกที่ทุกเวลา
 
---
 
# การเปลี่ยนแปลงแบบก้าวกระโดดของกระบวนทัศน์ (Paradigms shift)
 
1. ระบบแบ่งเวลา (Time sharing) คือ ผู้ใช้หลายคนใช้หน่วยประมวลผลร่วมกัน
2. หน่วยแสดงภาพทางวีดีโอ (Video Display Units)
3. เครื่องมือช่วยการโปรแกรม (Programming toolkits)
4. การคำนวณแบบคอมพิวเตอร์ส่วนบุคคล (Personal computing)
5. มุมมองแบบหน้าต่างและอินเตอร์เฟสแบบวิมป์ (WIMP)
6. อุปลักษณ์ (Metaphor) คือ จำลองภาพ เพื่อจะเทียบให้เห็นชัด โดยอาศัยลักษณะในการอธิบายให้เกิดการเข้าใจที่ง่ายขึ้น เช่น การใช้ภาษา Logo turtle ที่ช่วยในการวาดภาพ
7. การปฏิสัมพันธ์โดยตรง (Direct manipulation) เช่น การลากแฟ้มลงถังขยะ การกดปุ่มปิดเครื่อง
 
---
 
# วิวัฒนาการของอินเทอร์เน็ต [2]
 
- **ค.ศ.1969 (พ.ศ.2512)** อาร์ป้าเน็ตได้รับทุนสนันสนุนจากหลายฝ่าย และเปลี่ยนชื่อเป็นดาป้าเน็ต (DARPANET = Defense Advanced Research Projects Agency Network) พร้อมเปลี่ยนแปลงนโยบาย และได้ทดลองการเชื่อมต่อคอมพิวเตอร์คนละชนิดจาก 4 เครือข่ายเข้าหากันเป็นครั้งแรก คือ 1) มหาวิทยาลัยแคลิฟอร์เนีย ลองแองเจอลิส 2) สถาบันวิจัยสแตนฟอร์ด 3) มหาวิทยาลัยแคลิฟอร์เนีย ซานตาบาบาร่า และ4) มหาวิทยาลัยยูทาห์ เครือข่ายทดลองประสบความสำเร็จอย่างมาก ดังนั้นในปีค.ศ.1975 (พ.ศ.2518) จึงได้เปลี่ยนจากเครือข่ายทดลอง เป็นเครือข่ายที่ใช้งานจริง ซึ่งดาป้าเน็ตได้โอนหน้าที่รับผิดชอบให้แก่หน่วยการสื่อสารของกองทัพสหรัฐ (Defense Communications Agency - ปัจจุบันคือ Defense Informations Systems Agency) แต่ในปัจจุบันอินเทอร์เน็ตมีคณะทำงานที่รับผิดชอบบริหารเครือข่ายโดยรวม เช่น ISOC (Internet Society) ดูแลวัตถุประสงค์หลัก, IAB (Internet Architecture Board) พิจารณาอนุมัติมาตรฐานใหม่ในอินเทอร์เน็ต, IETF (Internet Engineering Task Force) พัฒนามาตรฐานที่ใช้กับอินเทอร์เน็ต ซึ่งเป็นการทำงานโดยอาสาสมัครทั้งสิ้น
 
---
 
# วิวัฒนาการของอินเทอร์เน็ต (2/4)
 
- **ค.ศ.1983 (พ.ศ.2526)** ดาป้าเน็ตตัดสินใจนำ TCP/IP (Transmission Control Protocal/Internet Protocal) มาใช้กับเครื่องคอมพิวเตอร์ทุกเครื่องในระบบ จึงเป็นมาตรฐานของวิธีการติดต่อ ในระบบเครือข่ายอินเทอร์เน็ตมาจนถึงปัจจุบัน เพราะ TCP/IP เป็นข้อกำหนดที่ทำให้คอมพิวเตอร์ทุกเครื่องในโลกสื่อสารด้วยความเข้าใจบนมาตรฐานเดียวกัน
- **ค.ศ.1980 (พ.ศ.2523)** ดาป้าเน็ตได้มอบหน้าที่รับผิดชอบการดูแลระบบอินเทอร์เน็ตให้มูลนิธิวิทยาศาสตร์แห่งชาติ (National Science Foundation - NSF) ร่วมกับอีกหลายหน่วยงาน
- **ค.ศ.1986 (พ.ศ.2529)** เริ่มใช้การกำหนดโดเมนเนม (Domain Name) เป็นการสร้างฐานข้อมูลแบบกระจาย (Distribution Database) อยู่ในแต่ละเครือข่าย และให้ ISP (Internet Service Provider) ช่วยจัดทำฐานข้อมูลของตนเอง จึงไม่จำเป็นต้องมีฐานข้อมูลแบบรวมศูนย์เหมือนแต่ก่อน เช่น การเรียกเว็บไซต์ www.yonok.ac.th จะไปที่ตรวจสอบว่ามีชื่อนี้ในเครื่องบริการโดเมนเนมหรือไม่ ถ้ามีก็จะตอบกับมาเป็นหมายเลขไอพี ถ้าไม่มีก็จะค้นหาจากเครื่องบริการโดเมนเนมที่ทำหน้าที่แปลชื่ออื่น สำหรับชื่อที่ลงท้ายด้วย .th มีเครื่องบริการที่ thnic.co.th ซึ่งมีฐานข้อมูลของโดเมนเนมที่ลงท้ายด้วย th ทั้งหมด
 
---
 
# วิวัฒนาการของอินเทอร์เน็ต (3/4)
 
- **ค.ศ.1991 (พ.ศ.2534)** ทิม เบอร์เนอร์ส ลี (Tim Berners-Lee) แห่งศูนย์วิจัย CERN ได้คิดค้นระบบไฮเปอร์เท็กซ์ขึ้น สามารถเปิดด้วย เว็บเบราวเซอร์ (Web Browser) ตัวแรกมีชื่อว่า WWW (World Wide Web) แต่เว็บไซต์ได้รับความนิยมอย่างจริงจัง เมื่อศูนย์วิจัย NCSA ของมหาวิทยาลัยอิลลินอยส์เออร์แบน่าแชมเปญจ์ สหรัฐอเมริกา ได้คิดโปรแกรม MOSAIC (โมเสค) โดย Marc Andreessen ซึ่งเป็นเว็บเบราว์เซอร์ระบบกราฟฟิก หลังจากนั้นทีมงานที่ทำโมเสคก็ได้ออกไปเปิดบริษัทเน็ตสเคป (Browser Timelines: Lynx 1993, Mosaic 1993, Netscape 1994, Opera 1994, IE 1995, Mac IE 1996, Mozilla 1999, Chimera 2002, Phoenix 2002, Camino 2003, Firebird 2003, Safari 2003, MyIE2 2003, Maxthon 2003, Firefox 2004, Seamonkey 2005, Netsurf 2007, Chrome 2008)
 
---
 
# วิวัฒนาการของอินเทอร์เน็ต (4/4)
 
ในความเป็นจริงไม่มีใครเป็นเจ้าของอินเทอร์เน็ต และไม่มีใครมีสิทธิขาดแต่เพียงผู้เดียว ในการกำหนดมาตรฐานใหม่ ผู้ติดสิน ผู้เสนอ ผู้ทดสอบ ผู้กำหนดมาตรฐานก็คือผู้ใช้ที่กระจายอยู่ทั่วทุกมุมโลก ก่อนประกาศเป็นมาตรฐานต้องมีการทดลองใช้มาตรฐานเหล่านั้นก่อน ส่วนมาตรฐานเดิมที่เป็นพื้นฐานของระบบ เช่น TCP/IP หรือ Domain Name ก็จะยึดตามนั้นต่อไป เพราะอินเทอร์เน็ตเป็นระบบกระจายฐานข้อมูล การจะเปลี่ยนแปลงข้อมูลพื้นฐานอาจต้องใช้เวลา
 
---
 
# อินเทอร์เน็ต [3]
 
- **อินเทอร์เน็ต** คือ การเชื่อมโยงเครือข่ายคอมพิวเตอร์เข้าด้วยกัน ตามโครงการของอาร์ป้าเน็ต (ARPAnet = Advanced Research Projects Agency Network) เป็นหน่วยงานสังกัดกระทรวงกลาโหมของสหรัฐ (U.S.Department of Defense - DoD) ถูกก่อตั้งเมื่อประมาณ ปีค.ศ.1960 (พ.ศ.2503) และได้ถูกพัฒนาเรื่อยมา
 
---
 
# สื่อสังคม
 
1. Facebook.com บริการโพสต์เรื่องราวสื่อสาร แชทด้วยข้อความ ภาพ วิดีโอ แบ่งกลุ่ม แบ่งเพจ
2. Twitter.com บริการโพสต์เรื่องราวสื่อสาร ด้วยข้อความไม่เกิน 140 ตัวอักษร
3. Instagram.com บริการโพสต์ภาพ และคลิ๊ปสั้น
4. Line.me บริการส่งข้อความ ภาพ คลิ๊ประหว่างเพื่อนบนสมาร์ทโฟน แยกกลุ่ม และมีความเป็นส่วนตัวสูง
5. Skype บริการโทรผ่านอินเทอร์เน็ต
6. Youtube.com บริการแหล่งคลิ๊ปวีดีโอที่ใหญ่ที่สุด
7. Google.com บริการสืบค้น และอีกมาก เช่น Classroom, Photos, Map, Meet
 
---
 
# สื่อสังคม (2/3)
 
8. Linkedin.com บริการโพสต์ฝากประวัติ ประสบการณ์ และความสามารถพิเศษ มีประโยชน์สำหรับนายจ้าง และลูกจ้าง
9. Pinterest.com บริการโพสต์ภาพ และวิดีโอ เชื่อมสื่อที่เกี่ยวข้องกันมาแสดงร่วมกัน และร่วมแสดงความคิดเห็นกันได้
10. Reddit.com บริการโพสต์เรื่องราว กระดานถามตอบ แลกเปลี่ยนตามประเด็นที่สนใจ
11. Tumbler.com บริการโพสต์เรื่องราว พูดคุยและแบ่งปัน ลักษณะกึ่งบล็อกกึ่งโซเชียล
12. Foursquare.com บริการข้อมูลตำแหน่งสถานที่บนพื้นโลก
13. 4Shared.com บริการแหล่งจัดเก็บแฟ้ม และสืบค้นได้
14. Dropbox.com บริการแหล่งจัดเก็บแฟ้มที่เป็นส่วนตัว
 
---
 
# สื่อสังคม (3/3)
 
15. Soundcloud.com บริการเก็บแฟ้มเสียง และแชร์ได้
16. Yammer.com บริการสื่อสังคมที่จำกัดเฉพาะคนในองค์กร
17. Slideshare.net บริการเผยแพร่สไลด์นำเสนอ
18. Scribd.com บริการเผยแพร่อีบุ๊ค รองรับแฟ้มได้หลายรูปแบบ
19. issuu.com บริการเผยแพร่อีบุ๊ค แบบพลิ๊กไปทีละหน้าอย่างสวยงาม
20. Flipsnack.com บริการเผยแพร่อีบุ๊ค แบบพลิ๊กไปทีละหน้าอย่างสวยงาม
 
---
 
 
---
 
# กระทรวงวัฒนธรรมกับภาพปกสงกรานต์ พบในเว็บไซต์
 
- อ่านจาก pantip.com พบว่า ปี 2556 กระทรวงวัฒนธรรม นำเสนอความเป็นไทย ตามเทศกาลสงกรานต์ นำเสนอภาพปก ของเว็บไซต์กระทรวง เป็นภาพสาวสวย 7 นาง นุ่งโจงกระเบนแบบไทย แล้ว ศ.ดร.เกษียร เตชะพีระ (Kasian Tejapira) อาจารย์จากสำนักท่าพระจันทร์ ได้โพสต์ข้อความในเฟสบุ๊คว่า "เต้าแห่งความเป็นไทยไม่ปกปิด แล้วจิ๋มคู่ชีวิตจะอยู่ไหม กระทรวงวัฒนธรรมมาอำไทย สิ้นอำนาจอธิปไตยแล้วบัดนี้ ชะเอิงเงิงเงย" เป็นประเด็นชวนมองเรื่องของ "ศิลปะ กับ อนาจาร" หรือชวนมองนอกเรื่องไปประเด็น "รุนแรง กับ ย้อนแย้ง" ก็พาไปได้ เช่น การแสดงความเห็นของ นักแต่งเพลงชื่อดัง โพสต์แรง วิจารณ์วงไอดอลน้องใหม่ในกรุงเทพ ตามแบบวงพี่สาวสัญชาติญี่ปุ่น
 
---
 
# วัฒนธรรมที่ต่างกันของแต่ละชาติ มีช่องว่างลดลง
 
- กรณีความต่างทางวัฒนธรรมตะวันตก กับตะวันออก พบข่าวเศร้า ที่ มาร์ก เซลลิง นักแสดงจากซีรีส์ดัง Glee จากชาติตะวันตก ติดคดี "มีรูปอนาจารของผู้เยาว์ในครอบครอง" ชวนมองนิยาม คำว่า ผู้เยาว์ของไทย อายุต่ำกว่า 20 ปี แต่ในหลายประเทศ เช่น ออสเตรเลีย อินเดีย ฟิลิปปินส์ บราซิล โครเอเชียและโคลัมเบีย ผู้เยาว์ อายุต่ำกว่า 18 ปี ส่วนที่ประเทศอเมริกา กำหนดอายุบรรลุนิติภาวะไว้แตกต่างกันไปในแต่ละรัฐ
 
---
 
# การแสดงความเห็นของนักวิชาการ ที่เกิดผลกระทบในวงกว้าง
 
![ศ.ดร.เกษียร เตชะพีระ แสดงความเห็นท้วงติง ถึงความไม่เหมาะสม](http://www.thaiall.com/sexual/songkran_2556.jpg)
 
---
 
# หน่วยที่ 9 พื้นฐานการออกแบบปฏิสัมพันธ์
 
## การออกแบบปฏิสัมพันธ์
## ขั้นตอนการออกแบบ
## อินโฟกราฟิกส์
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจการออกแบบปฏิสัมพันธ์
2. เพื่อให้เข้าใจขั้นตอนการออกแบบ
3. เพื่อให้เข้าใจอินโฟกราฟิกส์
 
---
 
# สิ่งที่คาดหวัง
 
สามารถออกแบบอินโฟกราฟิกส์ได้
 
---
 
# การออกแบบปฏิสัมพันธ์ [1]
 
- **การออกแบบปฏิสัมพันธ์** หมายถึง การสร้างระบบที่ต้องคำนึงถึงผู้ใช้งานระบบว่าเป็นใคร มีความสามารถและทักษะอย่างไร ต้องการใช้เครื่องคอมพิวเตอร์ไปสร้างงานแบบใดบ้าง เพื่อทำให้สามารถออกแบบ และสร้างปฏิสัมพันธ์ที่เหมาะสมกับงานและผู้ใช้งาน  ประเด็นสำคัญในการออกแบบ คือ การเพิ่มประสิทธิภาพงานด้วยระบบปฏิสัมพันธ์ที่ดี ใช้งานง่าย และสนุกเมื่อได้ใช้
 
---
 
# กฎทองของการออกแบบ
 
- **กฎทองของการออกแบบ (Golden rule of design)** คือ เข้าใจในวัสดุหรือปัจจัยที่มีอยู่ (Understand your materials) ถ้าเป็นการออกแบบปฏิสัมพันธ์ของมนุษย์กับคอมพิวเตอร์ ก็จะต้องเข้าใจเครื่องคอมพิวเตอร์ ว่ามีข้อจำกัด ความจุ อุปกรณ์ แพลตฟอร์ม เข้าใจมนุษย์ คือด้านจิตวิทยา ด้านสังคม และความผิดพลาดที่เกิดขึ้นได้กับมนุษย์
 
---
 
# ผู้เชี่ยวชาญด้าน HCI ในการออกแบบการทดลอง
 
- จาก ** งานวิจัยของลีวาริ (Livari, 2006) นำเสนอใน NordiCHI 2006 ที่ประเทศนอร์เวย์ ** ได้กำหนดบทบาท **การออกแบบการทดลอง** ของผู้เชี่ยวชาญด้านปฏิสัมพันธ์ระหว่างคอมพิวเตอร์กับมนุษย์ ไว้ 4 ประเภท
 
1. ผู้ให้ความรู้หรือผู้แจ้งให้ทราบ (Informative)
2. ผู้ให้คำปรึกษา (Consultative)
3. ผู้มีส่วนร่วม (Participative)
4. ผู้กำหนดคุณสมบัติ (Configure)
 
---
 
# ขั้นตอนการออกแบบ [2]
 
- ศึกษาความต้องการ
- วิเคราะห์ระบบ
- ออกแบบ
- ติดตั้ง และนำไปใช้
 
---
 
# กระบวนการการออกแบบปฏิสัมพันธ์
 
1. ระบุความต้องการ และสร้างความต้องการ
2. พัฒนาการออกแบบทางเลือก
3. สร้างแบบจำลองการปฏิสัมพันธ์ที่สามารถสื่อสารและประเมินได้
4. ประเมินสิ่งที่ถูกสร้างขึ้นตลอดทั้งกระบวนการ
 
---
 
# สิ่งที่ต้องคำนึงในการบรรลุเป้าหมายการออกแบบ
 
1. รู้ว่าอยู่ที่ขั้นตอนใด (Knowing where you are)
2. รู้ว่าสามารถทำอะไรได้ (Knowing what you can do)
3. รู้ว่ากำลังจะไปที่ใดต่อ (Knowing where you are going or what will happen)
4. รู้ว่าทำอะไรไปบ้างแล้ว (Knowing where you've been or what you've done)
 
---
 
# การออกแบบแบบมุ่งเน้นที่ผู้ใช้ (User focus)
 
1. ต้องเริ่มจากการทำความเข้าใจผู้ใช้ก่อน (Know the user) อาจใช้การสัมภาษณ์
2. คุณสมบัติของบุคคล (Person) ข้อมูลบุคคล ปฏิสัมพันธ์กับคอมพิวเตอร์เฉพาะบุคคล
 
---
 
# 7 กฎการออกแบบ UI Design ให้สวยงาม สำหรับ Non-Designer
 
1. แสงต้องมาจากบนฟ้า (Light comes from the sky)
2. เริ่มด้วย ขาว-ดำ เสมอ (Black and white first)
3. เพิ่ม Whitespace (ช่องว่าง) เป็นสองเท่า (Double your whitespace)
4. เทคนิคการวางตัวหนังสือบนรูป ไม่ให้จม (Learn the methods of overlaying text on images)
5. เพิ่ม – ลด ความเด่นของตัวหนังสือ (Make text pop — and un-pop)
6. เลือกใช้ฟ้อนต์ให้เหมาะสม (Only use good fonts)
7. ขโมยอย่างศิลปิน (Steal like an artist)
 
---
 
 
# NBSP (Non Breaking Space)
 
- เราทราบกันว่า Br คือ tag สำหรับตัดบรรทัด (Line break) ในภาษา HTML ส่วนอักษรพิเศษ nbsp คือ หนึ่งช่องว่าง หรือ ไม่หยุดการมีช่องไฟหนึ่งช่อง เวลาใช้ต้องมี & และ ; ปิดหน้าหลัง เป็นอักษรพิเศษที่ใช้ในภาษา HTML ซึ่งเว็บเพจที่ใช้ภาษานี้
- ปกติแล้วในเว็บเพจนั้น เมื่อกด space หรือ ช่องไฟหลายช่อง จะแสดงผลให้เหลือเพียงช่องเดียว หากต้องการช่องไฟหรือช่องว่างหลายช่อง ต้องใช้ & nbsp;  หลาย ๆ ตัวเข้าช่วย เช่น & nbsp; & nbsp; & nbsp; & nbsp; ก็จะได้ช่องไฟ 4 ช่อง
- ซึ่ง & nbsp; คือรหัส ascii ตัวที่ 160 มีเลขฐาน 16 คือ A0 หากมีแฟ้มที่ต้องการดูรหัส ascii สามารถส่งแฟ้มไปที่ hexed . it หรือดูผ่านโปรแกรม debug บน dosbox ซึ่งต้องติดตั้งโปรแกรมนี้เพิ่ม
- พบว่าคุณเปรม เขียนรายงานค่าเฉลี่ยด้วย php สร้าง output เป็น excel  แล้วต้องการแสดง 4.00 จึงเพิ่ม nbsp เข้าไปข้างหน้าตัวเลข เมื่อแสดงผลใน Excel ทำให้เห็น 4.00 อย่างถูกต้อง ไม่ถูก Excel ปรับรูปแบบเป็น 4 แต่ใน cell ที่มี nbsp อยู่นั้น มีผู้ใช้บางท่าน ต้องการข้อมูลไปประมวลผลใหม่ด้วยตนเอง พบว่า ไม่สามารถนำค่าที่มีอักษรพิเศษซ่อนอยู่ไปประมวลผลได้ จึงต้องแก้ไขด้วยการสั่ง replace ลบตัวอักษรนี้ ด้วยการค้น alt-160 แทนด้วยการไม่กรอกอะไรแทนที่
- [อ่านเพิ่ม เรื่อง excel กับ nbps ](http://www.thaiall.com/office)
 
---
 
# NBSP หรือรหัส ASCII ตัวที่ 160 หรือ A0 ฐาน 16
 
![ภาพปัญหาการใช้ nbsp เพิ่มช่องว่าง แต่นำไปประมวลผลทางคณิตศาสตร์ไม่ได้](http://www.thaiall.com/office/a0_replce_excel.png)
 
---
 
# ระดับความลึกของสีบนภาพ ระดับ 4 จาก 9
 
![ลดสีของภาพ แล้วไปลดคุณภาพขณะ save จะลดขนาดได้ แต่ hnet.com/compress-png ลดได้มากกว่า](http://www.thaiall.com/media/irfanview_decrease_color_depth.jpg)
 
---
 
# ลดคุณภาพขณะจัดเก็บภาพเหลือ 35% จาก 100% หรือใช้บริการออนไลน์
 
![ใช้บริการของ hnet.com/compress-jpeg จะลดขนาดได้ดีกว่า irfanview](http://www.thaiall.com/media/irfanview_35.jpg)
 
---
 
# อินโฟกราฟิกส์ [3]
 
- **อินโฟกราฟฟิกส์ (Infographic)** คือ การตีความ หรือนำเสนอข้อมูลด้วยภาพ เพื่อช่วยให้เข้าใจข้อความเหล่านั้นได้ง่ายขึ้น เช่น กราฟ แผนภูมิ รูปภาพที่ออกแบบเพื่อนำเสนอแทนข้อมูลที่มีความซับซ้อนในวิธีหรือรูปแบบใหม่ บนพื้นที่จำกัด ด้วยสีสัน รูปแบบที่สะดุดตา เข้าใจง่าย และชวนมองอย่างมีศิลปะ
- **อินโฟกราฟฟิก (Infographic)** คือ การนำเสนอสารสนเทศ ข้อมูล ความรู้ ด้วยภาพกราฟฟิกเสมือนจริง ที่มุ่งนำเสนอข้อมูลที่ซับซ้อนให้เข้าใจได้อย่างชัดเจนรวดเร็ว ปรับใช้ประโยชน์ภาพกราฟฟิกแสดงรูปแบบข้อมูล หรือแนวโน้ม กระบวนการจัดทำเกี่ยวข้องกับภาพเสมือนจริง การออกแบบสารสนเทศ และสถาปัตยกรรมสารสนเทศ
 
---
 
# ตัวอย่าง เพื่อน 12 แบบในชั้นเรียน + ของผมอีก 3 แบบ
 
 
---
 
# ขั้นตอนการออกแบบอินโฟกราฟฟิกส์ (Design of infographic)
 
1. ทำความเข้าใจข้อมูลให้ชัดเจน
2. อ้างอิงแหล่งที่มาให้ไปค้นคว้าเพิ่มเติมได้
3. สร้างงานที่มีขนาดแน่นอน เพื่อกำหนดองค์ประกอบได้ชัดเจน
4. ลดรายละเอียด แต่เน้นสิ่งที่ต้องการนำเสนอ
5. เป็นข้อมูลที่ถูกต้อง และน่าเชื่อถือ
6. ผสมผสานรูปแบบต่าง ๆ ที่ทำให้น่าสนใจ
7. ภาพประกอบน่าสนใจ และแสดงความแตกต่าง
8. คาดเดาประโยชน์ หรือสิ่งที่ผู้อ่านจะได้รับ
9. ชี้แจงสิทธิและเงื่อนไขที่เชื่อมโยงกับบทความต้นฉบับ
10. บูรณาการความคิดสรุปรวมยอด และการเป็นมัลติมีเดียได้
11. ควรใช้ตารางเพื่อความเป็นระเบียบ
12. เลือกออกแบบที่เข้าใจง่าย
13. ใช้คู่มือสไตล์ เพื่อรักษาความคล้ายคลึงกัน และมีเอกลักษณ์
 
---
 
# เครื่องมือและซอฟต์แวร์ที่ใช้สร้างอินโฟกราฟฟิกส์ (Infographic tools)
 
 
---
 
# สี สัมพันธ์ กับความรู้สึกของมนุษย์ส่วนใหญ่
 
- สีฟ้า -เชื่อมั่น ศรัทธา สงบ สุขุม สุภาพ
- สีเขียว - เย็น คลายเครียด ธรรมชาติ ปลอดภัย
- สีเหลือง - สดชื่น เบิกบาน แจ่มใส เร้าอารมณ์ เรียกความสนใจ
- สีแดง - รัก ตื่นเต้น กระตุ้นความรู้สึก มีพลัง ระมัดระวัง
- สีส้ม - ร้อน สดใส มีชีวิตชีวา น่าสนใจ
- สีม่วง - มีเกียรติ มีเสน่ห์ น่าติดตาม เร้นลับ
- สีน้ำตาล - อบอุ่น ได้พัก
- สีเทา - เศร้า อาลัย ความสงบ ความชรา
- สีขาว - สะอาด เบาบาง อ่อนโยน
 
---
 
# หน่วยที่ 10 การออกแบบหน้าจอและโครงร่าง
 
## โครงร่าง
## เครื่องมือสำหรับสร้างโครงร่าง
## การทำซ้ำและการสร้างแบบจำลอง
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจโครงร่าง
2. เพื่อให้เข้าใจเครื่องมือสำหรับสร้างโครงร่าง
3. เพื่อให้เข้าใจการทำซ้ำและการสร้างแบบจำลอง
 
---
 
# สิ่งที่คาดหวัง
 
สามารถออกแบบโครงร่างได้
 
---
 
# โครงร่าง [1]
 
การออกแบบหน้าจอและโครงร่างมีหลักพื้นฐาน
 
1. ถาม (ask) ผู้ใช้ระบบกำลังทำอย่างไร (what is the user doing?)
2. คิด (think) เนื้อหาสาระคืออะไร เชิงเปรียบเทียบและเรียงลำดับ (what information, comparisons, order)
3. การออกแบบ (design) สร้างฟอร์มตามฟังก์ชันการทำงาน (form follows function)
 
---
 
# เครื่องมือสำหรับสร้างโครงร่าง [2]
 
1. โครงร่างการจัดกลุ่มของหัวข้อ (grouping and structure)
2. การเรียงลำดับกลุ่มของหัวข้อ (Order of groups and items)
3. การตกแต่ง (Design)
4. การจัดวาง (Alignment)
5. การจัดวางช่องว่าง (White space)
 
---
 
# การทำซ้ำและการสร้างแบบจำลอง [3]
 
การสร้างแบบจำลอง คือ การจัดสร้างระบบทดลองหรือระบบต้นแบบก่อนการพัฒนาระบบทั้งหมด ขึ้นมาแล้วให้ผู้ใช้ทำการทดสอบหาข้อบกพร่องและประเมินค่าของระบบ นำไปปรับปรุง และทดสอบ ประเมินใหม่วนซ้ำไปเรื่อย ๆ จนกว่าจะเป็นที่ยอมรับของผู้ใช้จึงนำไปปรับเปลี่ยนเป็นระบบจริง วิธีนี้ทำให้ผู้ใช้มีส่วนร่วมในการพัฒนาระบบ เหมาะสมกับสิ่งแวดล้อมที่ไม่สามารถกำหนดความต้องการที่ชัดเจนแน่นอนได้ แม้ว่าจะไม่รวมคุณสมบัติของงานประยุกต์ไว้ทั้งหมด เพราะยังเป็นระบบที่ยังไม่ได้รับการทดสอบอย่างสมบูรณ์ ไม่มีข้อมูลจำนวนมากและครบถ้วนเต็มระบบ จึงอาจมีข้อบกพร่องได้ แต่ก็สร้างได้อย่างรวดเร็ว และประหยัด
 
---
 
# หน่วยที่ 11 กระบวนการซอฟต์แวร์
 
## วงจรการพัฒนาระบบซอฟต์แวร์
## การประเมิน
## เทคนิคการวิเคราะห์งาน
## การออกแบบสอบถาม
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจวงจรการพัฒนาระบบซอฟต์แวร์
2. เพื่อให้เข้าใจการประเมิน
3. เพื่อให้เข้าใจเทคนิคการวิเคราะห์งาน
4. เพื่อให้เข้าใจการออกแบบสอบถาม
 
---
 
# สิ่งที่คาดหวัง
 
สามารถประเมินซอฟต์แวร์ได้
 
---
 
# วงจรการพัฒนาระบบซอฟต์แวร์ [1]
 
The software life cycle
 
1. โมเดลน้ำตก (Waterfall Model)
2. การตรวจสอบผลและการปรับปรุงการด าเนินงาน (Verification and Validation)
3. การบริหารและการท าสัญญา (Management and contractual issues)
4. วงจรการพัฒนาระบบปฏิสัมพันธ์ (The life cycle for interactive systems)
---
 
# การนำร่องการออกแบบ (Navigation design)
 
1. โครงสร้างเฉพาะคอมพิวเตอร์ส่วนตัว (Local structure)
2. โครงสร้างเว็บไซต์ : การเรียงลำดับ
 (Global structure: hierarchical organization)
3. โครงสร้างเว็บไซต์ : ไดอะล็อก (Global structure : Dialog)
4. มองให้กว้าง (Wider still)
 
---
 
# ขั้นตอนการออกแบบ (The process of design)
 
1. What is wanted
2. Analysis
3. Design
4. Prototype
5. Implement and deploy
 
---
 
# ซอฟท์แวร์ (Software)
 
ซอฟท์แวร์ (Software) หมายถึง ชุดคำสั่งหรือโปรแกรมที่ใช้สั่งงานให้เครื่องคอมพิวเตอร์ทำงาน ซึ่งซอฟต์แวร์ประกอบด้วยคำสั่งที่สั่งงานเครื่องคอมพิวเตอร์ที่กำหนดลำดับก่อนหลังชัดเจน โดยการนำคำสั่งเหล่านั้นมาเรียงต่อกันถูกเรียกว่าโปรแกรมคอมพิวเตอร์
 
---
 
# โมเดลน้ำตก (Waterfall model)
 
1. Requirements specification
2. Architecture design
3. Detailed design
4. Coding and unit testing
5. Integration and testing
6. Operation and maintenance
 
---
 
# การประเมิน [2]
 
1. การประเมินผลประสิทธิผล (Effectiveness measures)
2. การประเมินผลประสิทธิภาพ (Efficiency measures)
3. การประเมินผลความพึงพอใจ (Satisfaction measures)
 
---
 
# เทคนิคการวิเคราะห์งาน [3]
 
**Task analysis**
 
- **การวิเคราะห์งาน** คือ กระบวนการวิเคราะห์บทบาทหน้าที่และความรับผิดชอบ ตลอดจนพิจารณาคุณสมบัติที่จำเป็นในงาน ได้แก่ ทักษะ ความรู้ ความสามารถ เพื่อให้การทำงานสำเร็จลุล่วง
 
---
 
# การแสดงแบบซอฟต์แวร์
 
1. การพิมพ์โปรแกรมต้นฉบับ (Source Listing)
2. ผังงาน Flowchart
3. ผังงาน Structured Flowchart
4. ผังงาน Nassi-Shneiderman
5. ผังงาน HIPO
6. ผังงาน Jackson
7. ผังงาน Warnier-Orr
8. ผังโครงสร้าง (Structure Chart)
9. คำสั่งลำลอง (Pseudo Code)
10. ตารางการตัดสินใจ (Decision Table)
 
- [อ่านเพิ่ม /programming](http://www.thaiall.com/programming/indexo.html)
 
---
 
# IPO Diagram ตามผังงาน HIPO
 
 
---
 
# การออกแบบสอบถาม [4]
 
- **การให้ได้ข้อมูล** สามารถใช้ **เทคนิคการสัมภาษณ์และการสนทนากลุ่ม (Focus group)** แบบสอบถามถูกนำมาใช้ เพราะเป็นวิธีการที่เหมาะสมกับกลุ่มผู้ใช้ที่คุ้นเคยกับประเด็นที่ต้องการศึกษา
- การทำให้แบบสอบถามสมบูรณ์ ถือว่ามีความสำคัญ ผู้สร้างแบบสอบถามที่มีประสบการณ์จะสามารถสอบถามถึงความต้องการของผู้ใช้ และสามารถนำข้อมูลที่ได้ไปใช้ประโยชน์จนถึงขั้นตอนการออกแบบด้วย และสามารถส่งต่อไปยังการจัดการและการวิเคราะห์ข้อมูล
 
---
 
# Google Form
 
- **Google Form** คือ ระบบฟอร์มออนไลน์เพื่อบริการผู้สร้างฟอร์มได้ตั้งคำถามแล้วรอรับข้อมูลคำตอบจากผู้ให้ข้อมูล โดยแชร์ลิงค์แบบฟอร์มไปให้ผู้ให้ข้อมูล สามารถสั่งเปิดปิดฟอร์มรับข้อมูลได้ ประยุกต์เป็นแบบสอบถามงานวิจัย หรือแบบทดสอบออนไลน์ได้ มีประเภทของตัวเลือกในแบบฟอร์ม อาทิ คำตอบสั้น คำตอบยาวเป็นย่อหน้า หลายตัวเลือก ช่องทำเครื่องหมาย เลื่อนลง อัพโหลดไฟล์ การกำหนดเงื่อนไข เช่น บังคับตอบ สลับตัวเลือก ตอบได้หลายครั้ง หรือเฉลยคำตอบหลังทำเสร็จ
- ![อ่านเพิ่ม form.htm](http://www.thaiall.com/google/form.htm)
 
---
 
# google form รองรับคำตอบได้หลากหลาย
 
![ตอบแบบ short answer](http://www.thaiall.com/google/form_short_28.png)
 
---
 
# Kahoot
 
- **Kahoot.com** คือ เว็บไซต์ที่ให้บริการเกมตอบสนอง (Interactive Quiz Game) เป็นแพลตฟอร์มการเรียนรู้ผ่านเกมแบบไม่มีค่าใช้จ่าย เปิดตัวสิงหาคม 2556 ที่ประเทศนอร์เวย์ เป็นเทคโนโลยีการศึกษาสำหรับเสริมการจัดการเรียนการสอนที่ช่วยให้ผู้เรียนสนุกไปกับการเรียน เป็นเครื่องมือแบบสอบช่วยประเมินผล ผ่านการตอบคำถามในชั้นเรียน ส่งเสริมการเปิดอภิปราย การสำรวจความคิดเห็น การแลกเปลี่ยนเรียนรู้ ซึ่งจำเป็นต้องมีอุปกรณ์ ได้แก่ Projector ที่เชื่อมกับคอมพิวเตอร์ของผู้สอน ส่วนผู้เรียนมีอุปกรณ์คอมพิวเตอร์ โน๊ตบุ๊ค แท็บเล็ต หรือสมาร์ทโฟน และทุกคนเชื่อมต่ออินเทอร์เน็ตได้
- [อ่านเพิ่ม /kahoot](http://www.thaiall.com/quiz/kahoot/)
- [อ่านเพิ่ม /top10.htm](http://www.thaiall.com/quiz/kahoot/top10.htm)
---
 
# Kahoot เป็นเทคโนโลยีทางการศึกษาที่สร้างปฏิสัมพันธ์ได้ดี
 
![หนึ่งคำถาม กับ 4 ตัวเลือก](http://www.thaiall.com/tec/kahootcom10.png)
 
---
 
# หน่วยที่ 12 กฎของการออกแบบ
 
## กฎของการออกแบบ
## หลักการในการสนับสนุนการใช้งาน
## มาตรฐาน
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจกฎของการออกแบบ
2. เพื่อให้เข้าใจหลักการในการสนับสนุนการใช้งาน
3. เพื่อให้เข้าใจมาตรฐาน
 
---
 
# สิ่งที่คาดหวัง
 
สามารถเลือกใช้มาตรฐานที่เหมาะสมกับงาน
 
---
 
# กฎของการออกแบบ [1]
 
1. หลักการ (Principles)
 
- กฎของการออกแบบแบบคร่าว ๆ (Abstrct design rules)
- ใช้การบังคับให้น้อย (Low authority)
- ใช้ความเป็นทั่วไป ไปให้มาก (High generality)
 
---
 
# กฎของการออกแบบ (2/3)
 
2. มาตรฐาน (Standards)
 
- กฎของการออกแบบที่มีลักษณะ (Specific design rules)
- ใช้การบังคับมาก (High authority)
- มีการประยุกต์ใช้แบบจำกัด (Limited application)
 
---
 
# กฎของการออกแบบ (3/3)
 
3. แนวทาง (Guidelines)
 
- ใช้การบังคับให้น้อยกว่า (Lower authority)
- มีการประยุกต์ใช้แบบทั่ว ๆ ไป (More general application)
 
---
 
# กฎการเรียนรู้ของเนลสัน (1/2)
 
กฎการเรียนรู้ 10 ข้อของเนลสัน (Nielsen's 10 Usability Heuristics)
 
1. ติดตามสถานะของระบบให้เห็นได้ชัดเจน (Visibility of system status)
2. สัมพันธ์เทียบเคียงได้กับโลกแห่งความเป็นจริง (Match between system and the real world)
3. มีทางเลือกให้ยกเลิก (Undo) ทำซ้ำ (Redo) ความคุมได้อิสระ (User control and freedom)
4. มีหลักการชัดเจนเหมือนกันเป็นมาตรฐาน (Consistency and Standards)
5. ป้องกันความผิดพลาด (Error prevention)
 
---
 
# กฎการเรียนรู้ของเนลสัน (2/2)
 
6. ช่วยผู้ใช้ไม่ต้องจำมากและรับรู้ได้ง่าย (Recognition rather than recall)
7. มีความยืดหยุ่นสำหรับผู้ใช้งาน (Flexibility and efficiency of use)
8. มีสุนทรียศาสตร์ และตัดประโยคที่ไม่เกี่ยวข้อง (Aesthetic and minimalist design)
9. ช่วยวินิจฉัยปัญหา และหลีกเลี่ยงความผิดพลาดได้ (Help users recognize, diagnose, and recover from errors)
10. มีคู่มือช่วยเหลือในการใช้งาน (Help and documentation)
 
---
 
# หลักการในการสนับสนุนการใช้งาน [2]
 
Principles to support usability
 
1. **ความสามารถในการเรียนรู้ **(Learnability)
 
> ดูที่ความง่ายสำหรับผู้ใช้ระบบใหม่ เริ่มมีปฏิสัมพันธ์กับระบบอย่างมีประสิทธิภาพและประสบความสำเร็จจากการปฏิบัติงานสูงสุด
 
2. **ความยืดหยุ่น** (Flexibility)
 
> ระบบต้องมีทางเลือกหลายทางให้กับผู้ใช้และระบบในการแลกเปลี่ยนข้อมูลกัน
 
3. **ความทนทาน** (Robustness)
 
> อยู่ที่ระดับของการสนับสนุนให้ผู้ใช้สามารถบรรลุเป้าหมายของงาน และสามารถประเมินพฤติกรรม เพื่อบรรลุเป้าหมายนั่น ๆ ได้
 
- [อ่านเพิ่ม nu.edu.pk](https://sites.google.com/a/nu.edu.pk/hci-060129/lectures-1/principles-to-support-usability)
 
---
 
# หลักของความสามารถในการเรียนรู้ (Principles of Learnability)
 
- การทำนาย (Predictability)
- การสังเคราะห์ (Synthesizability)
- ความคุ้นเคย (Familiarity)
- กรณีทั่วไป (Generalizability)
- ความสม่ำเสมอ (Consistency)
 
# หลักของความยืดหยุ่น (Principles of Flexibility)
 
- การเริ่มต้นการติดต่อหรือการสนทนา (Dialogue initiative)
- ระบบปฏิบัติการที่เป็นแบบมัลติเทรดดิง (Multithreading)
- ตอบสนองต่อความต้องการเฉพาะ (Task migratability)
 
# หลักของความทนทาน (Principles of Robustness)
 
- การสังเกตได้ (Observability)
- การกู้คืน (Recoverability)
- ความตอบสนอง (Responsiveness)
- ทำภารกิจตามได้สอดคล้อง (Task conformance)
 
---
 
# มาตรฐาน [3]
 
**มาตรฐาน** คือ ข้อตกลงร่วมกัน เห็นชอบร่วมกันในการกำหนดกฎเกณฑ์ อาทิ การออกแบบปฏิสัมพันธ์ ที่สร้างขึ้นโดยคณะกรรมการผู้เชี่ยวชาญเฉพาะด้านและหลากหลาย รวมถึงผู้มีส่วนได้ส่วนเสีย (Stakeholder)
 
**มาตรฐาน** คือ ลักษณะพื้นฐานบนหลักการเชิงทฤษฎีและการเปลี่ยนแปลงทางเทคโนโลยีที่เปลี่ยนแปลงช้า ใช้กับทั้งฮาร์ดแวร์และซอฟต์แวร์ที่เกี่ยวข้องกับการออกแบบ
 
- International Organization for Standardization (ISO) คือ องค์การระหว่างประเทศว่าด้วยการมาตรฐาน เป็นองค์กรที่ออกมาตรฐานต่าง ๆ ที่เกี่ยวข้องกับธุรกิจ และอุตสาหกรรม ส่วนมาตรฐานที่องค์กรนี้ออกมาจะใช้ชื่อนำหน้าว่า ISO เช่น ISO 9000 และ ISO 14000 ซึ่งก็เป็นมาตรฐานที่ว่าด้วยระบบบริหารคุณภาพ และระบบบริหารสิ่งแวดล้อม
 
---
 
# มาตรฐาน 2 ด้าน
 
1. **ทางด้านทฤษฎี**
 
> มาตรฐานของฮาร์ดแวร์ คือ ข้อตกลงที่แสดงถึงความเข้าใจปัจจัยต่าง ๆ ของมนุษย์ เช่น สรีรวิทยา (Physiology) การยศาสตร์ หรือเออร์โกโนมิกส์ (Ergonomics) คือ ศาสตร์ในการจัดภาพงาน เครื่้องมือใช้งานให้เหมาะสมกับคนทำงาน
 
2. **ทางด้านความเปลี่ยนแปลง**
 
> ฮาร์ดแวร์เปลี่ยนแปลงช้าและยากกว่าซอฟต์แวร์ มีการกำหนดมาตรฐาน ISO 9241
ชื่อ "ความต้องการทางการยศาสตร์สำหรับที่ทำงานด้วยวีดีที" ที่หมายถึงเครื่องที่มีจอภาพและแป้นพิมพ์
(Erogonomic Requirements for Office Work with Visual Display Terminals : VDTs)
ซึ่งในมาตรฐานนี้ ได้ออกข้อกำหนดการใช้งานระบบอย่างมีประสิทธิภาพและประสิทธิผล อีกทั้งความพึงพอใจของผู้ใช้ระบบในการทำงานให้สำเร็จ
พบ Usability: Definitions and concepts คือ **แนวทางทั่วไปของข้อกำหนดและการวัดความสามารถในการใช้**
 
- [อ่านเพิ่ม iso.org/obp/ui](https://www.iso.org/obp/ui/#iso:std:iso:9241:-11:ed-1:v1:en)
 
---
 
# มาตรฐานความต้องการทางการยศาสตร์สำหรับที่ทำงานด้วยวีดีที (1/2)
 
## การวิเคราะห์พฤติกรรมความสามารถในการใช้งาน (Usability Heuristics)
 
แนวทางทั่วไปของข้อกำหนดและการวัดความสามารถในการใช้ (General guidance on the specification and measurement of usability)
 
- ส่วนที่ 1: ข้อมูลทั่วไป (General introduction)
- ส่วนที่ 2: แนวทางของความต้องการเบื้องต้นในการทำงาน (Guidance on task requirements)
- ส่วนที่ 3: ความต้องการทางการแสดงภาพ (Visual display requirements)
- ส่วนที่ 4: ความต้องการทางคีย์บอร์ด (Keyboard requirements)
- ส่วนที่ 5: โครงสร้างของการตั้งเครื่องคอมพิวเตอร์ (Workstation layout and postural requirements)
- ส่วนที่ 6: แนวทางของสิ่งแวดล้อมในการทำงาน (Environmental requirements)
- ส่วนที่ 7: ความต้องการสำหรับการแสดงภาพสะท้อน (Requirements for display with reflections)
 
---
 
# มาตรฐานความต้องการทางการยศาสตร์สำหรับที่ทำงานด้วยวีดีที (2/2)
 
- ส่วนที่ 8: ความต้องการสำหรับการแสดงสี (Requirements for displayed colours)
- ส่วนที่ 9: ความต้องการสำหรับการการรับข้อมูลนำเข้าที่ไม่ใช่คีย์บอร์ด (Requirements for non-keyboard input devices)
- ส่วนที่ 10: หลักการในการใช้บทสนทนาโต้ตอบ (Dialogue principles)
- ส่วนที่ 11: แนวทางในการใช้ประโยชน์ (Guidance on usability)
- ส่วนที่ 12: การแสดงข้อมูล (Presentation of information)
- ส่วนที่ 13: แนวทางของผู้ใช้ (User guidance)
- ส่วนที่ 14: แนวทางของการใช้เมนูบทสนทนา (Menu dialogues)
- ส่วนที่ 15: บทสนทนาที่เป็นคำสั่ง (Command dialogues)
- ส่วนที่ 16: บทสนทนาที่เป็นการสั่งการโดยตรง (Direct manipulation dialogues)
- ส่วนที่ 17: บทสนทนาที่ใช้เติมในฟอร์ม (Form-filling dialogues)
 
---
 
# เกณฑ์ในการประเมินซอฟต์แวร์ (1/3)
 
1. เวลาในการทำงานสำเร็จ
2. ร้อยละของงานที่สำเร็จ
3. ร้อยละของงานที่สำเร็จ ณ ขณะ หนึ่งเวลา
4. อัตราความสำเร็จต่อความล้มเหลวในการทำงาน
5. เวลาที่ใช้ในการแก้ความผิดพลาด
6. ร้อยละหรือจำนวนความผิดพลาด
7. ร้อยละหรือจำนวนของคู่แข่งที่ทำงานได้ดีกว่า
 
---
 
# เกณฑ์ในการประเมินซอฟต์แวร์ (2/3)
 
8. จำนวนคำสั่งที่ใช้
9. ความถี่ในการใช้ตัวช่วยหรือคู่มือ
10. ร้อยละของคำติและคำชมของผู้ใช้
11. จำนวนของความผิดซ้ำซ้อน
12. จำนวนของการรันของความผิดพลาดและความล้มเหลว
13. จำนวนของส่วนติดต่อกับผู้ใช้ที่ทำให้เกิดความผิดพลาด
14. จำนวนของฟังก์ชันการทำงานที่ดีและไม่ดีที่ผู้ใช้สามารถจำได้
 
---
 
# เกณฑ์ในการประเมินซอฟต์แวร์ (3/3)
 
15. จำนวนคำสั่งที่ที่มีอยู่แล้วไม่ได้ใช้
16. จำนวนพฤติกรรมที่ต้องทำเพื่อย้อนกลับ
17. จำนวนผู้ใช้ที่ชอบระบบ
18. จำนวนครั้งที่ผู้ใช้ต้องใช้งานระบบเพื่อแก้ปัญหา
19. จำนวนครั้งที่ผู้ใช้ถูกขั้นจังหวะด้วยระบบในขณะที่ทำงาน
20. จำนวนครั้งที่ผู้ใช้สูญเสียการควบคุมระบบ
21. จำนวนครั้งที่ผู้ใช้ระบบแสดงความหงุดหงิดหรือแสดงความพอใจต่อระบบ
 
---
 
# หน่วยที่ 13 การออกแบบสากล
 
## หลักการออกแบบระบบสากล
## รูปแบบผสม
## การออกแบบที่หลากหลาย
## ความแตกต่างทางวัฒนธรรม
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจหลักการออกแบบระบบสากล
2. เพื่อให้เข้าใจรูปแบบผสม
3. เพื่อให้เข้าใจการออกแบบที่หลากหลาย
4. เพื่อให้เข้าใจความแตกต่างทางวัฒนธรรม
 
---
 
# สิ่งที่คาดหวัง
 
สามารถเลือกการออกแบบที่เหมาะสมกับแต่ละวัฒนธรรม
 
---
 
# หลักการออกแบบระบบสากล [1]
 
1. ใช้งานได้อย่างเท่าเทียม (Equitable use)
2. ยืดหยุ่นในการใช้งาน (Flexibility in use)
3. ง่ายและใช้ตามสัญชาติญาณ (Simple and intuitive to use)
4. ทำความเข้าใจได้ง่าย (Perceptible information)
5. ทนทานต่อความผิดพลาด (Tolerance for error)
6. ใช้กายภาพช่วยในการทำงานน้อย (Low physical effort)
7. ขนาดและพื้นที่เหมาะสมต่อการใช้ (Size and space for approach and use)
 
---
 
# รูปแบบผสม [2]
 
- **สื่อประสม (มัลติมีเดีย)** หมายถึง การนำเอาสื่อหลายอย่างมาใช้ร่วมกัน เช่น รูปภาพ เทป แผ่นโปร่งใส  เพื่อส่งเสริมการใช้งานให้เกิดประสิทธิภาพ
 
- ปัจจุบัน **สื่อประสมใช้ได้ทั้งภาพนิ่ง เสียง ข้อคาม และภาพเคลื่อนไหว** มีอุปกรณ์ที่เกี่ยวข้อง อาทิ เครื่องวีดีโอ เทปเสียง ซีดีรอม กล้องดิจิทัล โทรทัศน์ แล้วเกิดคำใหม่ว่า สถานีปฏิบัติการมัลติมีเดีย (Multimedia workstation) ที่เกิดจากการทำงานร่วมกันของทั้งฮาร์ดแวร์และซอฟต์แวร์
 
---
 
# แบบของปฏิสัมพันธ์ ตามลักษณะของการผสม
 
1. **ปฏิสัมพันธ์แบบผสมผสาน** (Multi-model interaction)
 
> เป็นการผสมการโต้ตอบกับระบบเสมือนจริง หรือสิ่งแวดล้อมที่แท้จริง ผ่านการสื่อสาร เช่น ตา หู จมูก ปาก และผิวหนัง
 
2. **ปฏิสัมพันธ์แบบสื่อประสม** (Multi-media interaction)
 
> เป็นการผสมของข้อความ ตัวเลข ภาพนิ่ง ภาพเคลื่อนไหว และเสียง ที่มีระบบโต้ตอบกับผู้ใช้
 
---
 
# การออกแบบที่หลากหลาย [3]
 
**Designing of Diversity**
 
**การออกแบบที่รองรับผู้ใช้ที่เป็นคนพิการ** (Users with disabilities)
 
1. การมองเห็นบกพร่อง (Visual impairment) เช่น การอ่านหน้าจอ (Screen readers) และ อุปกรณ์โซนิกฟินเดอร์ (Sonic Finder)
2. การได้ยินบกพร่อง (Hearing Impairment) เช่น การสื่อสารด้วยข้อความ หรือ แสดงการเคลื่อนไหวของมือ และ การจับภาพด้วยตา (Text Communication, Gesture, Captions)
3. ร่างกายพิการ (Physical Impairment) เช่น การใช้เสียงพูด เครื่องรับข้อมูลด้วยสายตา คีย์บอร์ดพิเศษ
 
---
 
# การออกแบบที่หลากหลาย (2/2)
 
4. การพูดพิการ (Speech Impairment) เช่น การใช้พิมพ์ตัวอักษร ซอฟต์แวร์แปลออกมาเป็นเสียง
5. ความพิการทางการอ่าน (Dyslexia) เช่น การพูดเป็นการรับและส่งข้อมูล
6. ผู้ป่วยโรคออทิซึม (Autism) เช่น การต้องใช้อุปกรณ์ช่วยหลายอย่างข้างต้น
 
---
 
# ความแตกต่างทางวัฒนธรรม [4]
 
**ความแตกต่างทางวัฒนธรรม** มีหลายประเด็น อาทิ เชื้อชาติ สัญชาติ ยุคสมัยที่เติบโต เพศ สีผิว ฐานะ ศาสนา ค่านิยม ทำให้การออกแบบปฏิสัมพันธ์แตกต่างกันไป มีผลต่อการใช้ภาษา สัญลักษณ์ สี และการแสดงออก เป็นต้น
 
---
 
# หน่วยที่ 14 การประมวลผลทุกหนทุกแห่ง
 
## การประมวลผลทุกหนทุกแห่ง
## อินเทอร์เน็ตออฟธิงส์
## การสื่อสารไร้สาย
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจการประมวลผลทุกหนทุกแห่ง
2. เพื่อให้เข้าใจอินเทอร์เน็ตออฟธิงส์
3. เพื่อให้เข้าใจการสื่อสารไร้สาย
 
---
 
# สิ่งที่คาดหวัง
 
สามารถเลือกใช้อุปกรณ์ที่เหมาะสมและยืดหยุ่นกับงาน
 
---
 
# การประมวลผลทุกหนทุกแห่ง [1]
 
- **มาร์ค ไวเซอร์ (Mark Weiser)** เป็นผู้เสนอแนวความคิดเรื่อง คอมพิวเตอร์ทุกแห่งทุกหน (Ubiquitous Computing) ทำงานที่ศูนย์วิจัย Palo Alto Research Center (PARC) ของบริษัท Xerox ปีพ.ศ. 2534
- การเข้าถึงคอมพิวเตอร์ได้จากทุกหนทุกแห่งทุกเวลา ทำให้คอมพิวเตอร์แทรกซึม อยู่ในสภาพแวดล้อมรอบตัว โดยที่ไม่รู้ว่ามีคอมพิวเตอร์อยู่ เพื่อตอบสนองความต้องการของมนุษย์โดยอัตโนมัติ โดยไม่รู้สึกถึงการมีอยู่ของอุปกรณ์ เนื่องจากทำงานกลมกลืน ซ่อน และเล็กจนไม่รู้สึกถึงอุปกรณ์เหล่านั้น
- มาร์ค ไวเซอร์ กล่าว "**The most profound technologies are those that disappear**" (profound = ลึกซึ้ง สนิท)
 
---
 
# อินเทอร์เน็ตออฟธิงส์ [2]
 
- **อินเตอร์เน็ตในทุกสิ่ง** (Internet of Things = IoT)
- IoT หมายถึง อุปกรณ์อิเล็กทรอนิกส์เชื่อมโยงกับทุกสิ่งสู่เครือข่ายโลกอินเตอร์เน็ต ทำให้ควบคุมสั่งการโดยใช้ข้อมูลผ่านทางทุกเครือข่ายสื่อสาร เช่น เปิดปิดอุปกรณ์อัตโนมัติ รับส่งข้อมูลระหว่างอุปกรณ์ ส่งข้อมูลผ่านเซ็นเซอร์เข้า BigData ใช้เป็นข้อมูลประกอบการตัดสินใจทำงานโดยอัตโนมัติ เชื่อมกับอุปกรณ์สื่อสาร อุปกรณ์ในบ้าน รถยนต์ รถไฟ เครื่องบิน ศาลากลาง สนามบิน โรงงานผลิตอุปกรณ์ บริษัทผลิตรถยนต์ เสาไฟฟ้า สวนสาธารณะ แปลงเกษตร ป่า แม่น้ำ ใต้ดิน หรือทะเล
 
---
 
# การสื่อสารไร้สาย [3]
 
- **การสื่อสารไร้สาย** (Wireless communication) คือ การถ่ายโอนข้อมูลสารสนเทศระหว่างจุดสองจุดหรือมากกว่า โดยไม่ได้เชื่อมต่อกันด้วยตัวนำไฟฟ้า
- เทคโนโลยีไร้สายที่พบมากที่สุดจะใช้คลื่นแม่เหล็กไฟฟ้า เช่น คลื่นวิทยุ ซึ่งอาจใช้ในระยะทางสั้น ๆ ไม่กี่เมตรสำหรับโทรทัศน์ หรือไกลเป็นล้านกิโลเมตร ลึกเข้าไปในอวกาศสำหรับวิทยุ
 
---
 
# การสื่อสารไร้สาย
 
- **การสื่อสารไร้สาย** รวมถึงหลากหลายชนิดของการใช้งานอยู่กับที่ เคลื่อนที่ และแบบพกพา
 
- วิทยุกึ่งสองทาง (One-way Communication) เช่น วิทยุราชการ วิทยุสมัครเล่น และวิทยุภาคประชาชน
- วิทยุสองทาง (Two-way Communication)
- โทรศัพท์มือถือ (Smartphone)
- ผู้ช่วยดิจิตอลส่วนตัว (Personal Digital Assistants หรือ PDAs)
- เครือข่ายไร้สาย เช่น GPS รีโมตประตูโรงรถ เม้าส์คอมพิวเตอร์ไร้สาย แป้นพิมพ์และชุดหูฟังไร้สาย หูฟังไร้สาย เครื่องรับวิทยุไร้สาย โทรทัศน์ผ่านดาวเทียมไร้สาย เครื่องรับโทรทัศน์ทั่วไป และโทรศัพท์บ้านไร้สาย
 
---
 
# หน่วยที่ 15 แนวโน้มการเติบโตของเทคโนโลยีในปัจจุบันและในอนาคต
 
## แนวโน้มของเทคโนโลยี
## อุปกรณ์สมาร์ท
## โปรแกรมประยุกต์
 
---
 
# วัตถุประสงค์การเรียน
 
1. เพื่อให้เข้าใจแนวโน้มของเทคโนโลยี
2. เพื่อให้เข้าใจอุปกรณ์สมาร์ท
3. เพื่อให้เข้าใจโปรแกรมประยุกต์
 
---
 
# สิ่งที่คาดหวัง
 
สามารถเลือกใช้อุปกรณ์สมาร์ทที่เหมาะสม
 
---
 
# แนวโน้มของเทคโนโลยี [1]
 
แนวโน้มของเทคโนโลยีในอนาคต มีทั้งแนวโน้มด้านบวก และแนวโน้มด้านลบ
 
ประเด็นที่ถูกกล่าวถึงกันมาก คือ การพัฒนาอุปกรณ์เคลื่อนที่ การประมวลผลแบบคลาวด์ ปัญญาประดิษฐ์ และความเร็วในการสื่อสาร
 
---
 
# แนวโน้มของเทคโนโลยีด้านบวก
 
- การพัฒนาเครือข่ายคอมพิวเตอร์ ให้เชื่อมโยงทั่วโลกได้เร็วขึ้นผ่านเครือข่าย 5G
- การพัฒนาการให้เข้าใจภาษามนุษย์และตอบสนองได้เสมือนมนุษย์ และปฏิสัมพันธ์แบบสามมิติ
- การพัฒนาระบบสารสนเทศ ตัดสินใจได้ด้วยปัญญาประดิษฐ์
- การศึกษาตามอัธยาศัยผ่านออนไลน์
- การพัฒนาระบบสารสนเทศภูมิศาสตร์ และข้อมูลแผนที่เพื่อการตัดสินใจ
- การบริหารจัดการภาครัฐสมัยใหม่ มีประสิทธิภาพลดการทุจริต และเข้าถึงประชาชนทุกระดับ
 
---
 
# แนวโน้มในด้านลบ
 
- การออกแบบที่ผิดพลาด ข้อมูลที่ไม่ถูกต้องย่อมส่งผลเสีย เช่น การตรวจสอบอาชีพเพื่อเยี่ยวชาจากโรคระบาด
- การละเมิดลิขสิทธิ์บุคคล และทรัพย์สินทางปัญญาเกิดขึ้นได้
- การก่ออาชญากรรมทางคอมพิวเตอร์ การโจรกรรมข้อมูลเกิดขึ้นได้
 
---
 
# อุปกรณ์สมาร์ท [2]
 
Smart Device คือ อุปกรณ์อิเล็กทรอนิกส์ที่สามารถรับส่งข้อมูล เชื่อมต่อกับอุปกรณ์อื่น และเครือข่ายไร้สาย สามารถทำงานกับโปรโตคอลได้หลายงานพร้อมกัน
 
---
 
# โปรแกรมประยุกต์ [3]
 
ซอฟต์แวร์แอปพลิเคชัน หรือ แอปพลิเคชัน คือ ซอฟต์แวร์ประเภทหนึ่ง ใช้สำหรับงานเฉพาะด้าน ต่างกับซอฟต์แวร์ระบบปฏิบัติการที่รองรับการทำงานหลายด้าน ตัวอย่างแอพพลิเคชั่น ได้แก่ โปรแกรมท่องโลกอินเทอร์เน็ต โปรแกรมฟังเพลง โปรแกรมดูหนัง โปรแกรมสำนักงาน
 
---
 
# โปรแกรมประยุกต์
 
- โปรแกรมท่องโลกอินเทอร์เน็ต เช่น Chrome, Edge, IE, Firefox, Opera
- โปรแกรมฟังเพลง เช่น Winamp,
- โปรแกรมดูหนัง เช่น VLC, Mediaplayer
- โปรแกรมสำนักงาน เช่น Microsoft office, Libre office, Star office
 
---
 
# Book  ผศ.ดร.วรลักษณ์ วงศ์โดยหวัง ศิริเจริญ
 
![ปฏิสัมพันธ์ระหว่างคอมพิวเตอร์กับมนุษย์](http://www.thaiall.com/hci/hci_waralak_640.jpg)
 
---
 
# End
 
![Burin rujjanapan - Nation University](http://www.thaiall.com/me/nburin.jpg)
 
---
 
# งาน จงสืบค้นอุปกรณ์ไอที [1]
 
- ค้นข้อมูลจากอินเทอร์เน็ตเกี่ยวกับอุปกรณ์ไอทีที่ทันสมัย
- เขียนสรุปด้วยมือครึ่งหน้าบน ส่วนครึ่งหน้าล่างให้วาดภาพประกอบด้วยมือ
- ถ่ายภาพเอกสารที่จะส่ง แล้วแต่งภาพให้ดูดี
- นำภาพ เพิ่มเข้า Homepage ที่ขอมาจาก Github.com
- ส่งลิงค์ผลงาน Github.com เข้าสื่อสังคมในรายวิชา และนำเสนอหน้าชั้นเรียน
เช่น https://www.facebook.com/groups/262195335046422/
เช่น https://thaiall.github.io/www/googlemcu/
 
---
  
# งาน จงสืบค้นข่าวใน Breaking News English [2]
 
- เลือกข่าวที่น่าสนใจ จากเว็บไซต์ข่าว เช่น https://breakingnewsenglish.com/
- เขียนข่าว และแปลข่าวด้วยมือบนกระดาษ แบบประโยคต่อประโยค
- นำประสบการณ์ไปเขียนเล่าใน blog เช่น wordpress.com หรือ blogger.com
- ใน blog ให้มีภาพประกอบที่ได้จากการเขียนด้วยมือ
- ส่งลิงค์ผลงาน blog เข้าสื่อสังคมในรายวิชา และนำเสนอหน้าชั้นเรียน
เช่น http://www.thaiall.com/blog/burin/7657/
เช่น http://www.thaiall.com/mit/breakingnewsenglish16/
 
---
 
# งาน จงออกแบบโลโก้ประจำตัว [3]
 
- ใช้เครื่องมือช่วยออกแบบภาพกราฟฟิก 2 มิติ (illustrator, photoshop, powerpoint, paint)
- ออกแบบภาพประจำตัว ที่ใช้สื่อถึงตนเอง
- อาจเป็นข้อความ ภาพ หรือทั้ง 2 อย่าง เช่น logo ทีมฟุตบอล
- เพื่อจะใช้ประกอบในเอกสารผลงานต่าง ๆ  ของตน
- อัพโหลดผลงานออกแบบเป็น png และแฟ้มต้นฉบับเข้า github.com
- ส่งลิงค์ผลงาน logo พร้อมแนบลิงค์ github.com เข้าสื่อสังคมในรายวิชา และนำเสนอหน้าชั้นเรียน
เช่น http://www.thaiall.com/education/84tools.jpg
เช่น https://www.google.com/search?q=logo+ทีมฟุตบอล
 
---
 
# งาน จงค้นผลงานวิชาการจาก thailis หรือในมหาวิทยาลัยต่าง ๆ ในเรื่องที่ตนสนใจ [4]
 
- เลือกเรื่องที่ตนเองสนใจ เสนอขอใช้หัวข้อ เพื่อป้องกันการซ้ำกับเพื่อน
- ค้นมา 2 แบบ คือ 1. บทความวิชาการ 2. เล่มงานค้นคว้าอิสระหรือวิทยานิพนธ์
- อ่านเอกสารให้เข้าใจ แล้วเขียนสรุปด้วยมือ เพียง 1 หน้า
- ถ่ายภาพเอกสาร มีโลโก้ประจำตัว นำไปวางใน word แล้วแปลงเป็น pdf
- อัพโหลดผลงาน pdf เข้าสื่อสังคมในรายวิชา และนำเสนอหน้าชั้นเรียน
เช่น http://dcms.thailis.or.th/dcms/basic.php
 
---
 
# งาน จงค้นผลงานวิชาการในเรื่องที่ตนสนใจ จาก thaijo [5]
 
- เลือกเรื่องที่ตนเองสนใจ เสนอขอใช้หัวข้อ เพื่อป้องกันการซ้ำกับเพื่อน
- ค้นบทความที่เกี่ยวข้องมา 3 บทความ
- อ่านเอกสารให้เข้าใจ แล้วเขียนสรุปด้วยมือ เพียง 1 หน้า หรือ 3 ย่อหน้า ๆ ละบทความ
- ถ่ายภาพเอกสาร มีโลโก้ประจำตัว นำไปวางใน word แล้วแปลงเป็น pdf
- อัพโหลดผลงานเข้า github.com
- ส่งลิงค์ผลงาน Github.com เข้าสื่อสังคมในรายวิชา และนำเสนอหน้าชั้นเรียน
เช่น https://www.tci-thaijo.org/
 
---
 
# งาน จงเขียนข้อเสนอโครงการวิจัยในเรื่องที่ตนสนใจ [6]
 
- เลือกเรื่องที่ตนเองสนใจ เสนอขอใช้หัวข้อ เพื่อป้องกันการซ้ำกับเพื่อน
- หาเอกสารอ้างอิงที่ค้นคว้ามา และเกี่ยวข้องอย่างน้อย 2 บทความ
- ข้อเสนอประกอบด้วย 1) ชื่อเรื่อง 2) เอกสารอ้างอิง 3) วัตถุประสงค์ 4) กลุ่มตัวอย่าง 5) วิธีดำเนินการ
- พิมพ์ด้วย word แปลงเป็น pdf
- อัพโหลดผลงาน pdf เข้าสื่อสังคมในรายวิชา และนำเสนอหน้าชั้นเรียน
 
---
 
# งาน จงออกแบบเครื่องมือเก็บข้อมูลในเรื่องที่ตนสนใจ [7]
 
- เลือกเรื่องที่ตนเองสนใจ เสนอขอใช้หัวข้อ เพื่อป้องกันการซ้ำกับเพื่อน
- หาเอกสารอ้างอิงที่ค้นคว้ามา และเกี่ยวข้องอย่างน้อย 2 บทความ
- ข้อเสนอประกอบด้วย 1) ชื่อเรื่อง 2) เอกสารอ้างอิง 3) วัตถุประสงค์ 4) กลุ่มตัวอย่าง 5) วิธีดำเนินการ
- ที่สำคัญ 6) สร้าง แบบสอบถาม เป็น word แบบแก้ไขได้ เพื่อให้เพื่อนร่วม comment ในเอกสาร
- อัพโหลดผลงาน word เข้าสื่อสังคมในรายวิชา
- ร่วมกันพิจารณาแบบแลกเปลี่ยนเรียนรู้ระหว่างเพื่อน วิพากษ์ของกันและกันเชิงสร้างสรรค์
 
---
 
# งาน จงออกแบบเครื่องมือเก็บข้อมูลด้วย google form [8]
 
- สร้างแบบสอบถามด้วย google form
- เขียนสรุปแผนการปล่อยแบบสอบถามถึงกลุ่มเป้าหมาย การติดตาม การรวบรวม
- การประมวลผล และสถิติที่เลือกใช้ในการประมวลผล
- แชร์ลิงค์ของ google form แบบ shortener เข้าสื่อสังคมในรายวิชา และนำเสนอหน้าชั้นเรียน
 
---
 
# งาน จงนำข้อมูลดิบในรูป excel มานำเสนอ [9]
 
- กรอกข้อมูลที่ได้จากแบบสอบถาม มาในรูป excel
- ออกแบบ chart ใน word มา 5 chart
- เขียนเล่าถึงประสบการณ์ในการเก็บแบบสอบถามในเอกสาร chart อธิบายผล และสรุปผลในเบื้องต้น
- อัพโหลดผลงาน word เข้าสื่อสังคมในรายวิชา และนำเสนอหน้าชั้นเรียน
 
---
 
# งาน จงจัดทำ poster จากข้อมูลที่เก็บด้วยแบบสอบถาม [10]
 
- จัดทำเอกสารนำเสนอในแบบ poster แบบ 2 คอลัม
- ห้วข้อประกอบด้วย
1) บทนำ/ความเป็นมา/ความสำคัญของปัญหา
2) วัตถุประสงค์
3) วิธีดำเนินการ
4) ผลการศึกษา (มีภาพ chart อย่างน้อย 3 ภาพ)
5) สรุปผล/อภิปรายผล
6) เอกสารอ้างอิง
- อัพโหลด poster เข้า Github.com
- ส่งลิงค์ผลงาน Github.com เข้าสื่อสังคมในรายวิชา และนำเสนอหน้าชั้นเรียน
 
---
 
# งาน จงสร้างข้อสอบใน Kanoot [11]
 
- สมัคร Kahoot.com ด้วยชื่อสกุลจริง
- สร้างข้อสอบ 10 ข้อ แบบ Quiz - 4 ตัวเลือก
- มีภาพประกอบทุกข้อ ที่เกี่ยวข้องกับข้อสอบ
- เลือกเรื่องที่ตนสนใจ เกี่ยวข้องกับเนื้อหาในรายวิชา
- สร้างคำถาม คำตอบ ตัวเลือกที่สอดคล้องกับเนื้อหาในรายวิชา
- ตั้ง Title เกี่ยวกับเรื่องที่สนใจ เช่น อุปกรณ์ล้ำยุค หรือ อุปกรณ์โบราณ
- กำหนด Visible to เป็น "everyone"
- ส่งลิงค์ผลงาน Kahoot เข้าสื่อสังคมในรายวิชา และนำเสนอหน้าชั้นเรียน
 
---
 
# การเรียนรู้ในศตวรรษที่ 21 (1/6)
 
- ฟังเพื่อนอาจารย์พูดคุยกันอีกครั้ง เรื่อง ทักษะที่จำเป็นสำหรับการเรียนรู้ในศตวรรษที่ 21
- พบในคู่มือการประกันคุณภาพการศึกษาภายใน 2557 หน้า 66 ep3 ปกชมพู
- พบว่าเลขหน้าไม่ตรงกับเล่ม ed1 ปี 2558 ที่ผมมีอยู่ ที่อยู่ในหน้า 67 ปกม่วง
- [อ่านเพิ่ม คู่มือประกันคุณภาพภายใน](https://qm.kku.ac.th/downloads/hbMUA57ed3.pdf)
- [อ่านเพิ่ม ประกันคุณภาพภายใน](http://www.thaiall.com/iqa)
- [อ่านเพิ่ม thaiall.com/tec/digital_competencies.htm](http://www.thaiall.com/tec/digital_competencies.htm)
- [อ่านเพิ่ม คู่มือพลเมืองดิจิทัล](http://www.thaiall.com/tec/digitalCitizenship-book-ok.pdf)
 
---
 
# ทักษะที่จำเป็นสำหรับการเรียนรู้ในศตวรรษที่ 21 (2/6)
 
1. กลุ่มวิชาหลัก (Core Subjects)
2. กลุ่มทักษะชีวิต และอาชีพ (Live and career skills)
3. กลุ่มทักษะการเรียนรู้และนวัตกรรม (Learning and innovation skills)
4. กลุ่มทักษะสารสนเทศ สื่อ และเทคโนโลยี (Information, media and technology skills)
 
---
 
# ทักษะสำคัญที่คนส่วนใหญ่ให้ความสำคัญมาก (3/6)
 
- **กลุ่มทักษะการเรียนรู้และนวัตกรรม**
 
1. การคิดเชิงวิพากษ์และการแก้ปัญหา (Critical thinking and problem solving)
2. นวัตกรรมและการสร้างสรรค์ (Innovation and creativity)
3. การสื่อสารและความร่วมมือกัน (Communication and collaboration)
 
- **กลุ่มทักษะสารสนเทศ สื่อ และเทคโนโลยี (Information , media and technology skills)**
 
1. การรู้สารสนเทศ (Information Literacy)
2. การรู้สื่อ (Media Literacy)
3. การรู้ ICT (ICT Literacy) (ICT = Information and Communication Technology = เทคโนโลยีสารสนเทศ และการสื่อสาร)
 
- **กลุ่มทักษะชีวิตและอาชีพ (Life and career skills)**
 
1. ความสามารถในการปรับตัวและยืดหยุ่น (Adaptability and flexibility)
2. ความคิดริเริ่มและการเรียนรู้ได้ด้วยตนเอง (Initiative and self-direction)
3. ปฏิสัมพันธ์ทางสังคม และข้ามวัฒนธรรม (Social and cross-cultural interaction)
4. ความรับผิดชอบและความสามารถผลิตผลงาน (Accountability and productivity)
5. ความเป็นผู้นำและรับผิดชอบต่อสังคม (Leadership and social responsibility)
 
---
 
# ทักษะที่จำเป็นสำหรับการเรียนรู้ในศตวรรษที่ 21 (4/6)
 
![หน้า 66 ในคู่มือประกัน](http://www.thaiall.com/iqa/handbook_mua57ed3_p66.png)
 
---
 
# ความเป็นพลเมืองดิจิทัล (5/6)
 
- **ความเป็นพลเมืองดิจิทัล** คือ พลเมืองผู้ใช้งานสื่อดิจิทัลและสื่อสังคมออนไลน์ที่เข้าใจบรรทัดฐาน
ของการปฏิบัติตัวให้เหมาะสม และมีความรับผิดชอบในการใช้เทคโนโลยี
โดยเฉพาะอย่างยิ่งการสื่อสารในยุคดิจิทัลเป็นการสื่อสารที่ไร้พรมแดน
- การเป็นพลเมืองดิจิทัลควรมีทักษะที่สำคัญ 8 ประการ
1. ทักษะในการรักษาอัตลักษณ์ที่ดีของตนเอง (Digital Citizen Identity)
2. ทักษะในการรักษาข้อมูลส่วนตัว (Privacy Management)
3. ทักษะในการคิดวิเคราะห์มีวิจารณญาณที่ดี (Critical Thinking)
4. ทักษะในการจัดสรรเวลาหน้าจอ (Screen Time Management)
5. ทักษะในการรับมือกับการคุกคามทางโลกออนไลน์ (Cyberbullying Management)
6. ทักษะในการบริหารจัดการข้อมูล ที่ผู้ใช้งานมีการทิ้งไว้บนโลกออนไลน์ (Digital Footprints)
7. ทักษะในการรักษาความปลอดภัยของตนเองในโลกออนไลน์ (Cybersecurity Management)
8. ทักษะในการใช้เทคโนโลยีอย่างมีจริยธรรม (Digital Empathy)
- https://www.salika.co/2019/04/03/8-skills-for-digital-citizenship/
- https://thaidigizen.com/wp-content/uploads/2018/06/DigitalCitizenship-Book-ok.pdf
- https://www.thaihealth.or.th/Content/48161-citizen
 
---
 
# ทักษะจำเป็น เพื่อก้าวสู่การเป็นพลเมืองดิจิทัล (6/6)
 
![ความเป็นพลเมืองดิจิทัล](http://www.thaiall.com/tec/digital_citizen_skill.jpg)
 
---
 
# 5 ซอฟต์สกิล และ 5 ฮาร์ดสกิล เพื่อได้งานและรักษางาน
 
- **ทักษะด้านความรู้ / ฮาร์ดสกิล (Hard Skills)** คือ ทักษะด้านความรู้ที่ใช้ในการทำงาน ความสามารถเชิงเทคนิคที่สั่งสอนกันได้ วัดผลการเรียนรู้ วัดความรู้ความสามารถได้ ทักษะด้านอารมณ์ / ซอฟต์สกิล (Soft Skills) คือ ทักษะด้านอารมณ์ที่ใช้ในการอยู่ร่วมกับผู้อื่น รวมถึงการพัฒนาตัวเอง ซึ่งการทำงานในปัจจุบันต้องมีทั้ง Soft Skills และ Hard Skills เพราะการจะได้งานต้องมี Hard Skills แต่การรักษางานไว้แน่น ได้รับการสนับสนุนและทำงานได้อย่างมีความสุขจำเป็นต้องมี Soft Skills
- อ่านจาก **Weforum.org , Linkedin.com และ Nowasu** พบว่า รายงานของ World Economic Forum พูดถึง 10 ทักษะที่บริษัททั่วโลกต้องการ ที่เก็บรวบรวมจากเว็บไซต์จัดหางาน LinkedIn ที่เป็นทักษะของผู้ใช้งานที่ได้รับการว่าจ้างสูงสุด จากสมาชิกของ LinkedIn 100,000 คน แบ่งเป็น 5 Soft Skills ได้แก่ 1) ความคิดสร้างสรรค์ 2) การพูดโน้มน้าวผู้อื่น 3 ) การทำงานร่วมกับผู้อื่น 4 ) การปรับตัว 5 ) การบริหารเวลา 5 Hard Skills ได้แก่ 1) การใช้งานระบบคลาวด์และเครือข่าย 2) การใช้ปัญญาประดิษฐ์ 3) การวิเคราะห์เชิงเหตุผล 4) การบริหารบุคคล 5) การออกแบบประสบการณ์ให้กับผู้ใช้งาน
- [thaiall.com/job/appjob.htm](http://www.thaiall.com/job/appjob.htm)
 
---
 
# 5 ซอฟต์สกิล และ 5 ฮาร์ดสกิล เพื่อได้งานและรักษางาน
 
![ซอฟต์สกิล และ ฮาร์ดสกิล](http://www.thaiall.com/job/5softhardskills.jpg)
 
---
 
#  สุดยอด 3 เรื่องเล่าเร้าพลังใจ
 
1. ไล่ตงจิ้น ลูกขอทานผู้ไม่ยอมแพ้ (thaijo)
2. น็อตตัวละแสน (สิริทัศน์ สมเสงี่ยม)
3. บะหมี่น้ำหนึ่งชาม (คลิ๊ปผมเอง)
 
- http://www.thaiall.com/web2/key.php?topic=beggar_child&dir=ZXRoaWNz&file=aW5kZXguaHRtbA==
- http://www.thaiall.com/ethics/
แนะนำหัวข้อ
MIS: Content, All
KMed: Content, All
Ethics: Content, All
Tec: Content, All
Hci: Content, All
PHP: Content, All
Java: Content, All
PHPJs: Content, All
office_content *
introtocomputer_content
test1
test2
pandoc( x86_64 102MB)
markdown
ารใช้พาวเวอร์พ้อยท์สอนออนไลน์ (Powerpoint Presentation for Teaching)
เครื่องมือหนึ่งที่ได้รับความนิยมในการสอนออนไลน์ คือ พาวเวอร์พ้อยท์ เพื่อควบคุมทิศทาง หัวข้อ ประเด็นที่ต้องการสื่อสาร ให้เห็นข้อความ แผนภาพ เสียง และคลิ๊ปวีดีโอตามแผนการสอนได้อย่างชัดเจน สามารถแทรกเว็บแคมที่มีภาพผู้สอนไปในแต่ละสไลด์ได้ สามารถใช้ได้ทั้งสอนสด (Live) ออกไปทางโปรแกรมสอนออนไลน์เช่น Zoom, Webex, Google Meet หรือ MS Teams หรือบันทึกเป็นคลิ๊ป แล้วให้ผู้เรียนมาเปิดดูได้ในภายหลัง (Video on Demand) ซึ่งมีเครื่องมือบันทึกการสอนผ่านสไลด์อีกมากมาย อาทิ Office Mix, Camtasia, Snagit, OBS Studio หรือ Camstudio (Open source) หรือใช้คุณสมบัติที่มีในพาวเวอร์พ้อยท์ด้วยการคลิ๊กเลือก Menubar, Slide Show, Record Slide Show, Start Recording from Beginning หรือ Start Recording from Current Slide
https://www.presentation-guru.com
ต.ย. การใช้ Pandoc.exe (x86_64) สร้าง pptx
เช่น C:\> pandoc tec_all.md -o tec_all.pptx
rspsocial
ใช้เวลาโหลดเว็บเพจ = 664 มิลลิวินาที สูง = 29602 จุด กว้าง = 1264 จุด
Thaiall.com