Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Frontend developer 2016 | cloudcourse.io

4,282 views

Published on

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

Published in: Design
  • Dating direct: ❶❶❶ http://bit.ly/39mQKz3 ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/39mQKz3 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Frontend developer 2016 | cloudcourse.io

  1. 1. f
  2. 2. สำรวจโดยกำรเลือก 30 เว็บแรกที่ติด Google Rank คำค้นคือ Web Design Trends 2016
  3. 3. เป็นแนวที่เน้นไปทำงสีสันฉูดฉำด กำรเล่นกับตัวอักษรต่ำง ๆได้อย่ำงหลำกหลำยทำให้เว็บดูสนุกสนำน
  4. 4. เทรนกำรออกแบบที่ช่วยสร้ำงปฎิสัมพันธ์ระหว่ำงระบบและผู้ใช้งำน
  5. 5. จุดมุ่งหมำยและสิ่งที่คำดหวัง
  6. 6. กำรดำเนินกำรไปสู่ผลลัพธ์
  7. 7. กำรออกแบบ Interaction ที่ดี ต้องสำมำรถตอบโจทย์และบริหำรควำมคำดหวังของผู้ใช้ให้ได้
  8. 8. แบบจำลองของนอร์แมน
  9. 9. 1. จุดมุ่งหมำย 2. เจตนำ หรือสิ่งที่ต้องกำรให้เป็น 3. ระบุขั้นตอนที่กระทำ 4. กำรดำเนินกำร 5. รับรู้กำรตอบสนอง 6. กำรตีควำม 7. สรุปผล (บรรลุจุดมุ่งหมำย) 7 ขั้นตอนการดาเนินการ
  10. 10. จุดมุ่งหมาย ผู้เข้าชมต้องการซื้อ Surface Pro 4 จึงเข้าไปหาข้อมูลที่เว็บไซต์ Microsoft และเลือกที่หน้า surface และ ผู้ออกแบบต้องการขายสินค้าซึ่งก็คือ Surface Pro 4
  11. 11. เจตนา หรือสิ่งที่ต้องการให้เป็น เจตนาหรือสิ่งที่ต้องการให้เป็นก็คือเมื่อมีผู้เข้ามายังหน้านี้ต้องการให้ผู้เข้าชมนั้นซื้อสินค้าของตนปุ่ม “ซื้อวันนี้” จึงเป็นเจตนาหรือสิ่งที่ต้องการให้ผู้ใช้กดในหน้านี้
  12. 12. ระบุขั้นตอนที่กระทา เมื่อผู้ใช้งานรู้แล้วว่าถ้าต้องการซื้อสินค้าตัวนี้เราจาเป็นต้องกดปุ่มดังกล่าวโดยการกดคลิ๊กที่ปุ่ม “ซื้อวันนี้”
  13. 13. การดาเนินการ เมื่อผู้ใช้งานคลิ๊กที่ปุ่มสีฟ้าแล้วก็จะเข้าสู่การดาเนินการคือเมื่อมีการกดปุ่มจะเกิดการเปลี่ยนหน้าเว็บเพจขึ้น
  14. 14. รับรู้การตอบสนอง ผลลัพธ์เมื่อกดปุ่ม ซื้อวันนี้ก็คือเปลี่ยนมายังหน้าสาหรับการสั่งซื้อนี่คือสิ่งที่ผู้ใช้งานสามารถรับรู้ได้ในทันที
  15. 15. การตีความ หลังจากเปลี่ยนมายังหน้านี้แล้วสิ่งต่อมาคือการตีความ จากภาพนี้ผู้ใช้สามารถเข้าใจได้ทันทีว่าในภูมิภาคของตนนั้นมีสถานที่จาหน่ายและสามารถสั่งซื้อออนไลน์ได้ทันที
  16. 16. สรุปผล (บรรลุจุดมุ่งหมาย) ตอนนี้ก็มาถึงขั้นตอนสุดท้ายซึ่งเป็นจุดมุ่งหมายตั้งแต่แรกก็คือการเข้ามาสั่งซื้อ Surface Pro 4 แล้วซึ้งทั้ง 6 ขั้นตอนที่ผ่านมาก็สามารถพาผู้ใช้งานเข้ามาถึงหน้านี้ได้ซึ่งก็คือผลลัพธ์
  17. 17. Interaction Design ที่ดี ต้องสำมำรถตอบโจทย์ และบริหำรควำมคำดหวังของผู้ใช้งำนได้
  18. 18. a living moment in an otherwise still photograph.
  19. 19. เทรนด์ภำพถ่ำยที่มีชีวิต เป็นกำรใช้รูปภำพแบบ “ซิเนมำกรำฟ” ในกำรถ่ำยทอดเรื่องรำว
  20. 20. Kevin Burg and Jamie Beck created the first cinemagraph in 2011
  21. 21. ถ้ำนึกไม่ออกว่ำซิเนมำกรำฟคืออะไร?
  22. 22. ให้ลองนึงถึงภำพยนตร์เรื่องแฮรรี่พอตเตอร์ ในหนังเรื่องนี้จะมีหนังสือพิมพ์อยู่สำนักนึงที่ชื่อ เดลี่ โพรเพ็ธ
  23. 23. ซึ่งภำพถ่ำยในหนังสือนั้นจะสำมำรถบอกเล่ำเหตุกำร์ณและควำมรู้สึกในรูปนั้นๆได้
  24. 24. Image Format 2016
  25. 25. 1. ไฟล์มีขนำดเล็กกว่ำ .jpg และมีควำมละเอียดสูงกว่ำ 2. รองรับทุก Browser 3. รองรับรูปภำพโปร่งแสงเช่น png 4. ไม่ลดคุณภำพของรูปทั้งที่มีขนำดเล็กกว่ำ 5. สำมำรถเพิ่ม meta data เข้ำไปยังรูปภำพได้ 6. รองรับภำพเคลื่อนไหวแบบ gif
  26. 26. 1. ยังต้องใช้ JavaScript ในกำร Decode .bpg เพื่อนำมำแสดงผลที่ เว็บไซต์จึงทำให้เสียเวลำในกำรแปลงไฟล์ส่วนนี้ 2. กำรแปลงรูปภำพจำก jpg, png, gif หรืออื่นๆไปเป็น bpg และกำร ใช้งำนอำจจะยำกสำหรับบุคคลทั่วไป
  27. 27. ถ้ำหำก Browser ทั้งหลำยรองรับมันแบบที่ไม่ต้องใช้ JavaScript ในกำร Decode มันจะเป็น format ที่เป็นที่นิยมมำกในอนำคตครับเนื่องจำก ขนำดที่เล็กกว่ำ และคุณภำพที่สูงกว่ำรูป jpg ทั้งยังมีควำมสำมำรถด้ำนโปร่งแสงและกำรทำภำพเคลื่อนไหวอีกด้วย
  28. 28. Flat น่ำเบื่อและน่ำเบื่อและก็น่ำเบื่อ Flat มีปัญหำต่อกำรใช้งำนของผู้ใช้
  29. 29. เทรนด์กำรออกแบบเว็บไซต์สไตล์กูเกิล
  30. 30. นับวันจำนวนของอุปกรณ์แพลตฟอร์มต่ำงๆ
  31. 31. และ เบรำว์เซอร์ที่จะต้องทำงำนร่วมกับเว็บไซต์ของเรำเติบโตมำกขึ้น
  32. 32. กำรออกแบบเว็บที่สำมำรถตอบสนองได้ทุกขนำดหน้ำจอ
  33. 33. จึงเป็นอีกหนึ่งตัวเลือกสำหรับยุคสมัยนี้และยุคสมัยต่อไปในอนำคต
  34. 34. เล็ก, กลำง, ใหญ่, ใหญ่มำก, ใหญ่มาก มาก มาก 1 เว็บไซต์สาหรับการแสดงผลทุกขนาดหน้าจอ
  35. 35. ในปี 2011
  36. 36. มี CSS Framework ตัวนึง
  37. 37. ถูกพัฒนำขึ้นมำ
  38. 38. เพื่อให้ชีวิตกำรทำงำนของ Web Developer ง่ำยขึ้น
  39. 39. และ CSS Framework ตัวดังกล่ำวก็ถูกพัฒนำเรื่อยมำ
  40. 40. จำกเวอร์ชั่นที่ 1 มำถึง 2 เข้ำสู่ช่วงที่ 3 และเติบโตมำถึงช่วงที่ 4
  41. 41. คือ CSS Framework ถูกพัฒนำขึ้นโดย Mark Otto และ Jacob Thornton จำกทีม Twitter
  42. 42. คือกำรจัด layout ของหน้ำจอให้รองรับทุกขนำดและสำมำรถปรับเปลี่ยน รูปแบบของตัวเองได้ตำมหลักกำรทำงำนของ Responsive Web Design
  43. 43. Bootstrap มีควำมสำมำรถในกำรทำ Responsive Website ซึ่งเดิมทีในเวอร์ชั่นที่ 1 และ 2 ถูกเรียกใช้โดยคลำสที่ชื่อว่ำ .span* แต่ยังพบปัญหำกำรทำงำนซึ่งไม่สำมำรถทำงำน ในรูปแบบ Fully Responsive ได้เนื่องจำกข้อจำกัดต่ำงๆที่เว็บเบรำเซอร์ไม่สนับสนุน
  44. 44. ต่อมำในเวอร์ชั่นที่ 3 นั้นได้ทำกำรออกแบบโครงสร้ำงใหม่โดยเพิ่มขนำดของอุปกรณ์ต่ำงๆ เข้ำไปด้วย เช่น extra-small, small, medium, large เป็นต้นซึ่งกำรทำงำนจริงก็สำมำรถ ทำได้ดีมำก และสำมำรถทำงำนในรูปแบบ Fully Responsive อย่ำงเต็มตัว ในส่วนของกำร เรียกใช้งำนนั้นสำมำรถเรียกได้โดยกำรใช้คลำส .col-{device-size}-{column-size}
  45. 45. ถึงยุคปัจจุบันในเวอร์ชั่นที่ 4 ทำงผู้พัฒนำได้ทำกำรเพิ่มขนำดขึ้นมำอีก 1 รูปแบบ คือ extra-large และยังได้เพิ่มรูปแบบในกำรจัด layout หน้ำเว็บขึ้นมำอีก 1 รูปแบบ คือ Flexbox ซึ่งเป็น property ของ CSS3 ทำให้รูปแบบ Responsive และ กำรจัด Layout เว็บไซต์ของเรำนั้นยืดหยุ่นและหลำกหลำยยิ่งขึ้น
  46. 46. col-md-12
  47. 47. col-md-3 col-md-3 col-md-6
  48. 48. col-md-8 col-md-4 col-md-9
  49. 49. สิ่งที่เปลี่ยนไปสำหรับ Bootstrap 4
  50. 50. เทคโนโลยีที่ใช้ในกำรพัฒนำ Bootstrap ใช้ Less CSS ในกำรพัฒนำมำตั้งแต่ต้นจนถึง Bootstrap 3.2 ทำงผู้พัฒนำจึงได้เพิ่ม Source Code ของ Sass Lang ขึ้นมำเพื่อให้เข้ำกับยุคสมัยที่ Sass กำลังเป็นที่นิยม มำกขึ้นๆจนถึง Bootstrap 4 ทีมพัฒนำก็ได้ย้ำยมำเขียนโค้ดด้วย Sass อย่ำงเต็มตัวและยกเลิก Less CSS
  51. 51. ระบบ Grid ใหม่เพิ่มควำมสำมำรถในกำรใช้งำน Flexbox ซึ่งเป็น property ของ CSS3 นั้นจะทำให้ไม่สำมำรถ เปิดเว็บไซต์ที่สร้ำงด้วย Flexbox บน IE9 ได้เนื่องจำก IE9 นั้นไม่สนับสนุน Flexbox แต่เรำก็ยังสำมำรถใช้ งำนระบบ Grid แบบปรกติและสำมำรถทำงำนบน IE9 ได้ปรกติ ส่วนกำรใช้งำน Flexbox เป็น Option เสริม สำมำรถเปิดใช้งำนได้ใน $enable-flex boolean true ในไฟล์ the _variables.scss
  52. 52. ยกเลิกกำรสนับสนุน IE8 ทุกกรณีหำกต้องกำรให้ Bootstrap สนับสนุน IE8 ก็ต้องใช้งำน Bootstrap 3 แทน
  53. 53. หลักจำกที่มีกำรยกเลิกสนับสนุน IE8 ก็ได้เปลี่ยนหน่วยกำรคำนวณจำก px เป็น rem, em แทน เช่น .container ใน BS4 ถูกกำหนด max-width เป็นหน่วย rem ซึ่งส่งผลดีต่อ Mobile Friendly แน่นอน เนื่องจำกหน่วย rem, em มีควำมยืดหยุ่นกว่ำหน่วย px
  54. 54. เพิ่มศักยภำพของ Media Queries เช่นเดียวกับ Grid ซึ่งเปลี่ยนจำก px เป็น rem, em
  55. 55. สวัสดี Card Layout Bootstrap 4 เพิ่มคอมโพเนนใหม่ชื่อว่ำ Card ซึ่งมำแทนที่กำรทำของงำนคลำสต่อไปนี้ .well, .panel, .thumbnail
  56. 56. CSS Reset ตัวใหม่สำหรับ Bootstrap 4 โดยเฉพำะใช้ชื่อว่ำ Reboot.css แต่จริงๆแล้วก็คือ normalize.css ซึ่งถูก fork มำและถูกปรับแต่ง CSS เพิ่มเติมให้เหมำะสมกับ Bootstrap 4
  57. 57. Bootstrap 4 ถูกเขียน JavaScript ใหม่ทมั้งหมดด้วย ES6 หรือ ES2015 จึงทำให้ performance สูงขึ้นด้วย
  58. 58. Bootstrap 4 นั้นไม่มีกำรเรียกใช้งำน Icon ใดๆทั้งนั้นถ้ำเกิดเรำต้องกำรใช้ icon font ต่ำงๆก็ต้องโหลดมำ เพิ่มเติมจำกผู้ให้บริกำรอื่นๆ เช่น Font Awesome, icon moon และ Glyphicons เป็นต้น
  59. 59. รายละเอียดการปรับปรุงทั้งหมด http://v4-alpha.getbootstrap.com/migration/
  60. 60. คือ การเขียนโค้ดในรูปแบบหนึ่ง และ ส่งออกไปเป็นอีกรูปแบบหนึ่ง
  61. 61. ประโยชน์ ?
  62. 62. มีเครื่องมือต่ำงๆที่ใช้งำนร่วมกันได้มำกมำยเช่น third-party mixins, functions, libraries, and frameworks.
  63. 63. ควำมสำมำรถในกำรจัดกำรโครงสร้ำงไฟล์ที่ดีด้วยกำรเขียนแบบ Partial และยังสำมำรถเขียนในรูปแบบซ้อนหรือที่เรียกว่ำ Nesting ได้อย่ำงสะดวก
  64. 64. สำมำรถเขียนฟังชั่นและกำรสร้ำงเงื่อนไขต่ำงๆได้ซึ่งทำให้กำรเขียน CSS ของเรำ มีประสิทธิภาพมากยิ่งขึ้น
  65. 65. กำรจัดกำรไฟล์ที่ดีจึงเหมำะกับกำรทำงำนร่วมกันเป็นทีม
  66. 66. .text-primary color: blue; border: 1px solid blue;
  67. 67. .text-primary { color: blue; border: 1px solid blue; }
  68. 68. #Partials File Name _variables.scss _mixins.scss components/_buttons.scss #Import File @import 'variables'; @import 'mixins'; @import 'components/buttons';
  69. 69. แถม
  70. 70. ทาไมต้อง postCSS?
  71. 71. น้ำหนักเบำ, Compile เร็วกว่ำ Sass และ LESS
  72. 72. เลือกลง Plugin เองได้ ฟีเจอร์ไหนรันช้ำก็ไม่ต้องลง ฟีเจอร์ไหนที่สร้ำงปัญหำเยอะ ๆ อย่ำง @extend ก็ไม่ต้องลง
  73. 73. postCSS สำมำรถเขียน Plugin เสริมเองได้ซึ่ง Sass และ LESS ทำได้ยำกและไม่นิยมทำ
  74. 74. และมี Plugin ให้เลือกใช้มำกมำย
  75. 75. Bootstrap 5 จะถูกเขียนใหม่ด้วย postCSS
  76. 76. แถมอีกนิด
  77. 77. เป็นกำรเขียน CSS แนวใหม่ด้วยคอนเซปตำมชื่อ คือ atomic และกำร reusable
  78. 78. ชื่อ class ในรูปแบบ atomic นั้นได้ไอเดียมำจำกแพคเกจ ที่ชื่อว่ำ emmet ของ zen coding
  79. 79. Atomic CSS มีอะไรดี?
  80. 80. ทำงำนในรูปแบบ inline css แต่ไม่ต้องเรียกใช้ผ่ำน @style
  81. 81. ถ้ำไม่ถูกเรียกใช้งำน CSS จะไม่ถูกนำมำ Compile ทำให้ลดขนำดไฟล์ได้อย่ำงมำก
  82. 82. ประสิทธิภำพกำรทำงำนสูงกว่ำ inline css
  83. 83. และยืดหยุ่นกว่ำ inline css

×