frontend developer 2016 | cloudcourse.io

f

ส ำรวจโดยกำรเลอก 30 เวบแรกทตด Google Rankค ำคนคอ Web Design Trends 2016

เปนแนวทเนนไปทำงสสนฉดฉำด กำรเลนกบตวอกษรตำง ๆไดอยำงหลำกหลำยท ำใหเวบดสนกสนำน

เทรนกำรออกแบบทชวยสรำงปฎสมพนธระหวำงระบบและผใชงำน

จดมงหมำยและสงทคำดหวง

กำรด ำเนนกำรไปสผลลพธ

กำรออกแบบ Interaction ทด ตองสำมำรถตอบโจทยและบรหำรควำมคำดหวงของผใชใหได

แบบจ ำลองของนอรแมน

1. จดมงหมำย

2. เจตนำ หรอสงทตองกำรใหเปน

3. ระบขนตอนทกระท ำ

4. กำรด ำเนนกำร

5. รบรกำรตอบสนอง

6. กำรตควำม

7. สรปผล (บรรลจดมงหมำย)

7 ขนตอนการด าเนนการ

จดมงหมาย

ผเขาชมตองการซอ Surface Pro 4 จงเขาไปหาขอมลทเวบไซต Microsoft และเลอกทหนา surfaceและ ผออกแบบตองการขายสนคาซงกคอ Surface Pro 4

เจตนา หรอสงทตองการใหเปน

เจตนาหรอสงทตองการใหเปนกคอเมอมผเขามายงหนานตองการใหผเขาชมนนซอสนคาของตนปม “ซอวนน” จงเปนเจตนาหรอสงทตองการใหผใชกดในหนาน

ระบขนตอนทกระท า

เมอผใชงานรแลววาถาตองการซอสนคาตวนเราจ าเปนตองกดปมดงกลาวโดยการกดคลกทปม “ซอวนน”

การด าเนนการ

เมอผใชงานคลกทปมสฟาแลวกจะเขาสการด าเนนการคอเมอมการกดปมจะเกดการเปลยนหนาเวบเพจขน

รบรการตอบสนอง

ผลลพธเมอกดปม ซอวนนกคอเปลยนมายงหนาส าหรบการสงซอนคอสงทผใชงานสามารถรบรไดในทนท

การตความ

หลงจากเปลยนมายงหนานแลวสงตอมาคอการตความ จากภาพนผใชสามารถเขาใจไดทนทวาในภมภาคของตนนนมสถานทจ าหนายและสามารถสงซอออนไลนไดทนท

สรปผล (บรรลจดมงหมาย)

ตอนนกมาถงขนตอนสดทายซงเปนจดมงหมายตงแตแรกกคอการเขามาสงซอ Surface Pro 4 แลวซงทง 6 ขนตอนทผานมากสามารถพาผใชงานเขามาถงหนานไดซงกคอผลลพธ

Interaction Design ทด ตองสำมำรถตอบโจทยและบรหำรควำมคำดหวงของผใชงำนได

a living moment in an otherwise still photograph.

เทรนดภำพถำยทมชวต เปนกำรใชรปภำพแบบ “ซเนมำกรำฟ” ในกำรถำยทอดเรองรำว

Kevin Burg and Jamie Beck created the first cinemagraph in 2011

ถำนกไมออกวำซเนมำกรำฟคออะไร?

ใหลองนงถงภำพยนตรเรองแฮรรพอตเตอร

ในหนงเรองนจะมหนงสอพมพอยส ำนกนงทชอ เดล โพรเพธ

ซงภำพถำยในหนงสอนนจะสำมำรถบอกเลำเหตกำรณและควำมรสกในรปนนๆได

Image Format 2016

1. ไฟลมขนำดเลกกวำ .jpg และมควำมละเอยดสงกวำ

2. รองรบทก Browser

3. รองรบรปภำพโปรงแสงเชน png

4. ไมลดคณภำพของรปทงทมขนำดเลกกวำ

5. สำมำรถเพม meta data เขำไปยงรปภำพได

6. รองรบภำพเคลอนไหวแบบ gif

1. ยงตองใช JavaScript ในกำร Decode .bpg เพอน ำมำแสดงผลท

เวบไซตจงท ำใหเสยเวลำในกำรแปลงไฟลสวนน

2. กำรแปลงรปภำพจำก jpg, png, gif หรออนๆไปเปน bpg และกำร

ใชงำนอำจจะยำกส ำหรบบคคลทวไป

ถำหำก Browser ทงหลำยรองรบมนแบบทไมตองใช JavaScript ในกำร Decode มนจะเปน

format ทเปนทนยมมำกในอนำคตครบเนองจำก ขนำดทเลกกวำ และคณภำพทสงกวำรป

jpg ทงยงมควำมสำมำรถดำนโปรงแสงและกำรท ำภำพเคลอนไหวอกดวย

Flat นำเบอและนำเบอและกนำเบอ

Flat มปญหำตอกำรใชงำนของผใช

เทรนดกำรออกแบบเวบไซตสไตลกเกล

นบวนจ ำนวนของอปกรณแพลตฟอรมตำงๆ

และเบรำวเซอรทจะตองท ำงำนรวมกบเวบไซตของเรำเตบโตมำกขน

กำรออกแบบเวบทสำมำรถตอบสนองไดทกขนำดหนำจอ

จงเปนอกหนงตวเลอกส ำหรบยคสมยนและยคสมยตอไปในอนำคต

เลก, กลำง, ใหญ, ใหญมำก, ใหญมาก มาก มาก

1 เวบไซตส าหรบการแสดงผลทกขนาดหนาจอ

ในป 2011

ม CSS Framework ตวนง

ถกพฒนำขนมำ

เพอใหชวตกำรท ำงำนของ Web Developer งำยขน

และCSS Framework ตวดงกลำวกถกพฒนำเรอยมำ

จำกเวอรชนท 1 มำถง 2 เขำสชวงท 3 และเตบโตมำถงชวงท 4

คอ CSS Framework ถกพฒนำขนโดย Mark Otto และ Jacob Thornton จำกทม Twitter

คอกำรจด layout ของหนำจอใหรองรบทกขนำดและสำมำรถปรบเปลยน

รปแบบของตวเองไดตำมหลกกำรท ำงำนของ Responsive Web Design

Bootstrap มควำมสำมำรถในกำรท ำ Responsive Website ซงเดมทในเวอรชนท 1 และ 2

ถกเรยกใชโดยคลำสทชอวำ .span* แตยงพบปญหำกำรท ำงำนซงไมสำมำรถท ำงำน

ในรปแบบ Fully Responsive ไดเนองจำกขอจ ำกดตำงๆทเวบเบรำเซอรไมสนบสนน

ตอมำในเวอรชนท 3 นนไดท ำกำรออกแบบโครงสรำงใหมโดยเพมขนำดของอปกรณตำงๆ

เขำไปดวย เชน extra-small, small, medium, large เปนตนซงกำรท ำงำนจรงกสำมำรถ

ท ำไดดมำก และสำมำรถท ำงำนในรปแบบ Fully Responsive อยำงเตมตว ในสวนของกำร

เรยกใชงำนนนสำมำรถเรยกไดโดยกำรใชคลำส .col-{device-size}-{column-size}

ถงยคปจจบนในเวอรชนท 4 ทำงผพฒนำไดท ำกำรเพมขนำดขนมำอก 1 รปแบบ

คอ extra-large และยงไดเพมรปแบบในกำรจด layout หนำเวบขนมำอก 1 รปแบบ

คอ Flexbox ซงเปน property ของ CSS3 ท ำใหรปแบบ Responsive และ กำรจด

Layout เวบไซตของเรำนนยดหยนและหลำกหลำยยงขน

col-md-12

col-md-3 col-md-3 col-md-6

col-md-8 col-md-4

col-md-9

สงทเปลยนไปส ำหรบ Bootstrap 4

เทคโนโลยทใชในกำรพฒนำ Bootstrap ใช Less CSS ในกำรพฒนำมำตงแตตนจนถง Bootstrap 3.2

ทำงผพฒนำจงไดเพม Source Code ของ Sass Lang ขนมำเพอใหเขำกบยคสมยท Sass ก ำลงเปนทนยม

มำกขนๆจนถง Bootstrap 4 ทมพฒนำกไดยำยมำเขยนโคดดวย Sass อยำงเตมตวและยกเลก Less CSS

ระบบ Grid ใหมเพมควำมสำมำรถในกำรใชงำน Flexbox ซงเปน property ของ CSS3 นนจะท ำใหไมสำมำรถ

เปดเวบไซตทสรำงดวย Flexbox บน IE9 ไดเนองจำก IE9 นนไมสนบสนน Flexbox แตเรำกยงสำมำรถใช

งำนระบบ Grid แบบปรกตและสำมำรถท ำงำนบน IE9 ไดปรกต สวนกำรใชงำน Flexbox เปน Option เสรม

สำมำรถเปดใชงำนไดใน $enable-flex boolean true ในไฟล the _variables.scss

ยกเลกกำรสนบสนน IE8 ทกกรณหำกตองกำรให Bootstrap สนบสนน IE8 กตองใชงำน Bootstrap 3 แทน

หลกจำกทมกำรยกเลกสนบสนน IE8 กไดเปลยนหนวยกำรค ำนวณจำก px เปน rem, em แทน

เชน .container ใน BS4 ถกก ำหนด max-width เปนหนวย rem ซงสงผลดตอ Mobile Friendly แนนอน

เนองจำกหนวย rem, em มควำมยดหยนกวำหนวย px

เพมศกยภำพของ Media Queries เชนเดยวกบ Grid ซงเปลยนจำก px เปน rem, em

สวสด Card Layout

Bootstrap 4 เพมคอมโพเนนใหมชอวำ Card ซงมำแทนทกำรท ำของงำนคลำสตอไปน

.well, .panel, .thumbnail

CSS Reset ตวใหมส ำหรบ Bootstrap 4 โดยเฉพำะใชชอวำ Reboot.css แตจรงๆแลวกคอ normalize.css

ซงถก fork มำและถกปรบแตง CSS เพมเตมใหเหมำะสมกบ Bootstrap 4

Bootstrap 4 ถกเขยน JavaScript ใหมทมงหมดดวย ES6 หรอ ES2015 จงท ำให performance สงขนดวย

Bootstrap 4 นนไมมกำรเรยกใชงำน Icon ใดๆทงนนถำเกดเรำตองกำรใช icon font ตำงๆกตองโหลดมำ

เพมเตมจำกผใหบรกำรอนๆ เชน Font Awesome, icon moon และ Glyphicons เปนตน

รายละเอยดการปรบปรงทงหมด

http://v4-alpha.getbootstrap.com/migration/

คอ การเขยนโคดในรปแบบหนง และ สงออกไปเปนอกรปแบบหนง

ประโยชน ?

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

ควำมสำมำรถในกำรจดกำรโครงสรำงไฟลทดดวยกำรเขยนแบบ Partial

และยงสำมำรถเขยนในรปแบบซอนหรอทเรยกวำ Nesting ไดอยำงสะดวก

สำมำรถเขยนฟงชนและกำรสรำงเงอนไขตำงๆไดซงท ำใหกำรเขยน CSS ของเรำ

มประสทธภาพมากยงขน

กำรจดกำรไฟลทดจงเหมำะกบกำรท ำงำนรวมกนเปนทม

.text-primarycolor: blue;border: 1px solid blue;

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

}

#Partials File Name

_variables.scss

_mixins.scss

components/_buttons.scss

#Import File

@import 'variables';

@import 'mixins';

@import 'components/buttons';

แถม

ท าไมตอง postCSS?

น ำหนกเบำ, Compile เรวกวำ Sass และ LESS

เลอกลง Plugin เองได ฟเจอรไหนรนชำกไมตองลง

ฟเจอรไหนทสรำงปญหำเยอะ ๆ อยำง @extend กไมตองลง

postCSS สำมำรถเขยน Plugin เสรมเองไดซง Sass และ LESS

ท ำไดยำกและไมนยมท ำ

และม Plugin ใหเลอกใชมำกมำย

Bootstrap 5 จะถกเขยนใหมดวย postCSS

แถมอกนด

เปนกำรเขยน CSS แนวใหมดวยคอนเซปตำมชอ

คอ atomic และกำร reusable

ชอ class ในรปแบบ atomic นนไดไอเดยมำจำกแพคเกจ

ทชอวำ emmet ของ zen coding

Atomic CSS มอะไรด?

ท ำงำนในรปแบบ inline css แตไมตองเรยกใชผำน @style

ถำไมถกเรยกใชงำน CSS จะไมถกน ำมำ Compile

ท ำใหลดขนำดไฟลไดอยำงมำก

ประสทธภำพกำรท ำงำนสงกวำ inline css

และยดหยนกวำ inline css