สไลด์ที่ใช้ในงาน ESAN Full Stack Developer 2016 วันที่ 6 ก.พ. 2559 ที่ขอนแก่น , เนื้อหาเกี่ยวกับ Frontend developer ในปี 2016 ดีไซน์เทรนในปัจจุบันเทคโนโลยีต่างๆ มีอะไรใหม่ และจะไปในทิศทางไหน

2. f

4. สำรวจโดยกำรเลือก 30 เว็บแรกที่ติด Google Rank
คำค้นคือ Web Design Trends 2016

6. เป็นแนวที่เน้นไปทำงสีสันฉูดฉำด กำรเล่นกับตัวอักษรต่ำง ๆได้อย่ำงหลำกหลำยทำให้เว็บดูสนุกสนำน

11. เทรนกำรออกแบบที่ช่วยสร้ำงปฎิสัมพันธ์ระหว่ำงระบบและผู้ใช้งำน

12. จุดมุ่งหมำยและสิ่งที่คำดหวัง

13. กำรดำเนินกำรไปสู่ผลลัพธ์

20. กำรออกแบบ Interaction ที่ดี ต้องสำมำรถตอบโจทย์และบริหำรควำมคำดหวังของผู้ใช้ให้ได้

21. แบบจำลองของนอร์แมน

22. 1. จุดมุ่งหมำย
2. เจตนำ หรือสิ่งที่ต้องกำรให้เป็น
3. ระบุขั้นตอนที่กระทำ
4. กำรดำเนินกำร
5. รับรู้กำรตอบสนอง
6. กำรตีควำม
7. สรุปผล (บรรลุจุดมุ่งหมำย)
7 ขั้นตอนการดาเนินการ

23. จุดมุ่งหมาย
ผู้เข้าชมต้องการซื้อ Surface Pro 4 จึงเข้าไปหาข้อมูลที่เว็บไซต์ Microsoft และเลือกที่หน้า surface
และ ผู้ออกแบบต้องการขายสินค้าซึ่งก็คือ Surface Pro 4

24. เจตนา หรือสิ่งที่ต้องการให้เป็น
เจตนาหรือสิ่งที่ต้องการให้เป็นก็คือเมื่อมีผู้เข้ามายังหน้านี้ต้องการให้ผู้เข้าชมนั้นซื้อสินค้าของตนปุ่ม “ซื้อวันนี้” จึงเป็นเจตนาหรือสิ่งที่ต้องการให้ผู้ใช้กดในหน้านี้

25. ระบุขั้นตอนที่กระทา
เมื่อผู้ใช้งานรู้แล้วว่าถ้าต้องการซื้อสินค้าตัวนี้เราจาเป็นต้องกดปุ่มดังกล่าวโดยการกดคลิ๊กที่ปุ่ม “ซื้อวันนี้”

26. การดาเนินการ
เมื่อผู้ใช้งานคลิ๊กที่ปุ่มสีฟ้าแล้วก็จะเข้าสู่การดาเนินการคือเมื่อมีการกดปุ่มจะเกิดการเปลี่ยนหน้าเว็บเพจขึ้น

27. รับรู้การตอบสนอง
ผลลัพธ์เมื่อกดปุ่ม ซื้อวันนี้ก็คือเปลี่ยนมายังหน้าสาหรับการสั่งซื้อนี่คือสิ่งที่ผู้ใช้งานสามารถรับรู้ได้ในทันที

28. การตีความ
หลังจากเปลี่ยนมายังหน้านี้แล้วสิ่งต่อมาคือการตีความ จากภาพนี้ผู้ใช้สามารถเข้าใจได้ทันทีว่าในภูมิภาคของตนนั้นมีสถานที่จาหน่ายและสามารถสั่งซื้อออนไลน์ได้ทันที

29. สรุปผล (บรรลุจุดมุ่งหมาย)
ตอนนี้ก็มาถึงขั้นตอนสุดท้ายซึ่งเป็นจุดมุ่งหมายตั้งแต่แรกก็คือการเข้ามาสั่งซื้อ Surface Pro 4 แล้วซึ้งทั้ง 6 ขั้นตอนที่ผ่านมาก็สามารถพาผู้ใช้งานเข้ามาถึงหน้านี้ได้ซึ่งก็คือผลลัพธ์

30. Interaction Design ที่ดี ต้องสำมำรถตอบโจทย์
และบริหำรควำมคำดหวังของผู้ใช้งำนได้

31. a living moment in an otherwise still photograph.

32. เทรนด์ภำพถ่ำยที่มีชีวิต เป็นกำรใช้รูปภำพแบบ “ซิเนมำกรำฟ” ในกำรถ่ำยทอดเรื่องรำว

33. Kevin Burg and Jamie Beck created the first cinemagraph in 2011

34. ถ้ำนึกไม่ออกว่ำซิเนมำกรำฟคืออะไร?

35. ให้ลองนึงถึงภำพยนตร์เรื่องแฮรรี่พอตเตอร์
ในหนังเรื่องนี้จะมีหนังสือพิมพ์อยู่สำนักนึงที่ชื่อ เดลี่ โพรเพ็ธ

36. ซึ่งภำพถ่ำยในหนังสือนั้นจะสำมำรถบอกเล่ำเหตุกำร์ณและควำมรู้สึกในรูปนั้นๆได้

40. Image Format 2016

45. 1. ไฟล์มีขนำดเล็กกว่ำ .jpg และมีควำมละเอียดสูงกว่ำ
2. รองรับทุก Browser
3. รองรับรูปภำพโปร่งแสงเช่น png
4. ไม่ลดคุณภำพของรูปทั้งที่มีขนำดเล็กกว่ำ
5. สำมำรถเพิ่ม meta data เข้ำไปยังรูปภำพได้
6. รองรับภำพเคลื่อนไหวแบบ gif

46. 1. ยังต้องใช้ JavaScript ในกำร Decode .bpg เพื่อนำมำแสดงผลที่
เว็บไซต์จึงทำให้เสียเวลำในกำรแปลงไฟล์ส่วนนี้
2. กำรแปลงรูปภำพจำก jpg, png, gif หรืออื่นๆไปเป็น bpg และกำร
ใช้งำนอำจจะยำกสำหรับบุคคลทั่วไป

47. ถ้ำหำก Browser ทั้งหลำยรองรับมันแบบที่ไม่ต้องใช้ JavaScript ในกำร Decode มันจะเป็น
format ที่เป็นที่นิยมมำกในอนำคตครับเนื่องจำก ขนำดที่เล็กกว่ำ และคุณภำพที่สูงกว่ำรูป
jpg ทั้งยังมีควำมสำมำรถด้ำนโปร่งแสงและกำรทำภำพเคลื่อนไหวอีกด้วย

49. Flat น่ำเบื่อและน่ำเบื่อและก็น่ำเบื่อ
Flat มีปัญหำต่อกำรใช้งำนของผู้ใช้

61. เทรนด์กำรออกแบบเว็บไซต์สไตล์กูเกิล

72. นับวันจำนวนของอุปกรณ์แพลตฟอร์มต่ำงๆ

73. และ
เบรำว์เซอร์ที่จะต้องทำงำนร่วมกับเว็บไซต์ของเรำเติบโตมำกขึ้น

74. กำรออกแบบเว็บที่สำมำรถตอบสนองได้ทุกขนำดหน้ำจอ

75. จึงเป็นอีกหนึ่งตัวเลือกสำหรับยุคสมัยนี้และยุคสมัยต่อไปในอนำคต

77. เล็ก, กลำง, ใหญ่, ใหญ่มำก, ใหญ่มาก มาก มาก
1 เว็บไซต์สาหรับการแสดงผลทุกขนาดหน้าจอ

78. ในปี 2011

79. มี CSS Framework ตัวนึง

80. ถูกพัฒนำขึ้นมำ

82. เพื่อให้ชีวิตกำรทำงำนของ Web Developer ง่ำยขึ้น

84. และ
CSS Framework ตัวดังกล่ำวก็ถูกพัฒนำเรื่อยมำ

86. จำกเวอร์ชั่นที่ 1 มำถึง 2 เข้ำสู่ช่วงที่ 3 และเติบโตมำถึงช่วงที่ 4

89. คือ CSS Framework ถูกพัฒนำขึ้นโดย Mark Otto และ Jacob Thornton จำกทีม Twitter

90. คือกำรจัด layout ของหน้ำจอให้รองรับทุกขนำดและสำมำรถปรับเปลี่ยน
รูปแบบของตัวเองได้ตำมหลักกำรทำงำนของ Responsive Web Design

91. Bootstrap มีควำมสำมำรถในกำรทำ Responsive Website ซึ่งเดิมทีในเวอร์ชั่นที่ 1 และ 2
ถูกเรียกใช้โดยคลำสที่ชื่อว่ำ .span* แต่ยังพบปัญหำกำรทำงำนซึ่งไม่สำมำรถทำงำน
ในรูปแบบ Fully Responsive ได้เนื่องจำกข้อจำกัดต่ำงๆที่เว็บเบรำเซอร์ไม่สนับสนุน

92. ต่อมำในเวอร์ชั่นที่ 3 นั้นได้ทำกำรออกแบบโครงสร้ำงใหม่โดยเพิ่มขนำดของอุปกรณ์ต่ำงๆ
เข้ำไปด้วย เช่น extra-small, small, medium, large เป็นต้นซึ่งกำรทำงำนจริงก็สำมำรถ
ทำได้ดีมำก และสำมำรถทำงำนในรูปแบบ Fully Responsive อย่ำงเต็มตัว ในส่วนของกำร
เรียกใช้งำนนั้นสำมำรถเรียกได้โดยกำรใช้คลำส .col-{device-size}-{column-size}

93. ถึงยุคปัจจุบันในเวอร์ชั่นที่ 4 ทำงผู้พัฒนำได้ทำกำรเพิ่มขนำดขึ้นมำอีก 1 รูปแบบ
คือ extra-large และยังได้เพิ่มรูปแบบในกำรจัด layout หน้ำเว็บขึ้นมำอีก 1 รูปแบบ
คือ Flexbox ซึ่งเป็น property ของ CSS3 ทำให้รูปแบบ Responsive และ กำรจัด
Layout เว็บไซต์ของเรำนั้นยืดหยุ่นและหลำกหลำยยิ่งขึ้น

95. col-md-12

96. col-md-3 col-md-3 col-md-6

97. col-md-8 col-md-4
col-md-9

100. สิ่งที่เปลี่ยนไปสำหรับ Bootstrap 4

101. เทคโนโลยีที่ใช้ในกำรพัฒนำ Bootstrap ใช้ Less CSS ในกำรพัฒนำมำตั้งแต่ต้นจนถึง Bootstrap 3.2
ทำงผู้พัฒนำจึงได้เพิ่ม Source Code ของ Sass Lang ขึ้นมำเพื่อให้เข้ำกับยุคสมัยที่ Sass กำลังเป็นที่นิยม
มำกขึ้นๆจนถึง Bootstrap 4 ทีมพัฒนำก็ได้ย้ำยมำเขียนโค้ดด้วย Sass อย่ำงเต็มตัวและยกเลิก Less CSS

102. ระบบ Grid ใหม่เพิ่มควำมสำมำรถในกำรใช้งำน Flexbox ซึ่งเป็น property ของ CSS3 นั้นจะทำให้ไม่สำมำรถ
เปิดเว็บไซต์ที่สร้ำงด้วย Flexbox บน IE9 ได้เนื่องจำก IE9 นั้นไม่สนับสนุน Flexbox แต่เรำก็ยังสำมำรถใช้
งำนระบบ Grid แบบปรกติและสำมำรถทำงำนบน IE9 ได้ปรกติ ส่วนกำรใช้งำน Flexbox เป็น Option เสริม
สำมำรถเปิดใช้งำนได้ใน $enable-flex boolean true ในไฟล์ the _variables.scss

103. ยกเลิกกำรสนับสนุน IE8 ทุกกรณีหำกต้องกำรให้ Bootstrap สนับสนุน IE8 ก็ต้องใช้งำน Bootstrap 3 แทน

104. หลักจำกที่มีกำรยกเลิกสนับสนุน IE8 ก็ได้เปลี่ยนหน่วยกำรคำนวณจำก px เป็น rem, em แทน
เช่น .container ใน BS4 ถูกกำหนด max-width เป็นหน่วย rem ซึ่งส่งผลดีต่อ Mobile Friendly แน่นอน
เนื่องจำกหน่วย rem, em มีควำมยืดหยุ่นกว่ำหน่วย px

105. เพิ่มศักยภำพของ Media Queries เช่นเดียวกับ Grid ซึ่งเปลี่ยนจำก px เป็น rem, em

106. สวัสดี Card Layout
Bootstrap 4 เพิ่มคอมโพเนนใหม่ชื่อว่ำ Card ซึ่งมำแทนที่กำรทำของงำนคลำสต่อไปนี้
.well, .panel, .thumbnail

107. CSS Reset ตัวใหม่สำหรับ Bootstrap 4 โดยเฉพำะใช้ชื่อว่ำ Reboot.css แต่จริงๆแล้วก็คือ normalize.css
ซึ่งถูก fork มำและถูกปรับแต่ง CSS เพิ่มเติมให้เหมำะสมกับ Bootstrap 4

108. Bootstrap 4 ถูกเขียน JavaScript ใหม่ทมั้งหมดด้วย ES6 หรือ ES2015 จึงทำให้ performance สูงขึ้นด้วย

109. Bootstrap 4 นั้นไม่มีกำรเรียกใช้งำน Icon ใดๆทั้งนั้นถ้ำเกิดเรำต้องกำรใช้ icon font ต่ำงๆก็ต้องโหลดมำ
เพิ่มเติมจำกผู้ให้บริกำรอื่นๆ เช่น Font Awesome, icon moon และ Glyphicons เป็นต้น

110. รายละเอียดการปรับปรุงทั้งหมด
http://v4-alpha.getbootstrap.com/migration/

111. คือ การเขียนโค้ดในรูปแบบหนึ่ง และ ส่งออกไปเป็นอีกรูปแบบหนึ่ง

114. ประโยชน์ ?

115. มีเครื่องมือต่ำงๆที่ใช้งำนร่วมกันได้มำกมำยเช่น third-party
mixins, functions, libraries, and frameworks.

116. ควำมสำมำรถในกำรจัดกำรโครงสร้ำงไฟล์ที่ดีด้วยกำรเขียนแบบ Partial
และยังสำมำรถเขียนในรูปแบบซ้อนหรือที่เรียกว่ำ Nesting ได้อย่ำงสะดวก

117. สำมำรถเขียนฟังชั่นและกำรสร้ำงเงื่อนไขต่ำงๆได้ซึ่งทำให้กำรเขียน CSS ของเรำ
มีประสิทธิภาพมากยิ่งขึ้น

118. กำรจัดกำรไฟล์ที่ดีจึงเหมำะกับกำรทำงำนร่วมกันเป็นทีม

121. .text-primary
color: blue;
border: 1px solid blue;

123. .text-primary {
color: blue;
border: 1px solid blue;
}

134. #Partials File Name
_variables.scss
_mixins.scss
components/_buttons.scss
#Import File
@import 'variables';
@import 'mixins';
@import 'components/buttons';

180. แถม

182. ทาไมต้อง postCSS?

183. น้ำหนักเบำ, Compile เร็วกว่ำ Sass และ LESS

184. เลือกลง Plugin เองได้ ฟีเจอร์ไหนรันช้ำก็ไม่ต้องลง
ฟีเจอร์ไหนที่สร้ำงปัญหำเยอะ ๆ อย่ำง @extend ก็ไม่ต้องลง

185. postCSS สำมำรถเขียน Plugin เสริมเองได้ซึ่ง Sass และ LESS
ทำได้ยำกและไม่นิยมทำ

186. และมี Plugin ให้เลือกใช้มำกมำย

187. Bootstrap 5 จะถูกเขียนใหม่ด้วย postCSS

188. แถมอีกนิด

190. เป็นกำรเขียน CSS แนวใหม่ด้วยคอนเซปตำมชื่อ
คือ atomic และกำร reusable

191. ชื่อ class ในรูปแบบ atomic นั้นได้ไอเดียมำจำกแพคเกจ
ที่ชื่อว่ำ emmet ของ zen coding

193. Atomic CSS มีอะไรดี?

194. ทำงำนในรูปแบบ inline css แต่ไม่ต้องเรียกใช้ผ่ำน @style

195. ถ้ำไม่ถูกเรียกใช้งำน CSS จะไม่ถูกนำมำ Compile
ทำให้ลดขนำดไฟล์ได้อย่ำงมำก

196. ประสิทธิภำพกำรทำงำนสูงกว่ำ inline css

197. และยืดหยุ่นกว่ำ inline css