3 นาที กับของใหม่ในอัพเดต Adobe Edge Reflow CC เดือนมกราคม 2014

เดือนมกราคม 2014 Adobe ได้ปล่อยอัพเดตให้กับ Adobe Edge Reflow CC เพื่อรองรับความต้องการในการ การออกแบบเว็บไซต์ให้รองรับขนาดหน้าจอที่หลากหลาย เช่นแนวคิด Responsive Web Design นั่นเอง

ซึ่ง Adobe Edge Reflow CC เวอร์ชั่นล่าสุด มีฟีเจอร์ใหม่ๆ ดังนี้ครับ

1. สามารถใส่ link ได้
2. การจัด grouping สะดวกขึ้น
3. สามารถสร้างการโต้ตอบง่ายๆ
4. จัดลำดับวัตถุอย่างเช่นพวกเมนู ได้ง่ายขึ้น
5. มี Web Form ให้ใช้แล้ว
6. มีช่อง Search ใน Asset panel
7. แสดงรายการของไฟล์ที่เปิดก่อนหน้านี้

มาดูกันในแต่ละส่วนดีกว่าว่ามีรายละเอียดอะไร

1. สร้าง link ได้แล้ว

Edge Reflow รุ่นก่อนหน้านี้ จะคล้ายๆ กับ Photoshop ที่ยืดหด canvas ได้ คือจัดการเกี่ยวกับหน้าตา และตำแหน่งของเนื้อหาต่างๆ ได้เท่านั้น ไม่มีการจัดการพวก link ที่เป็นสิ่งจำเป็นในเว็บไซต์ แต่ในรุ่นอัพเดตที่ผมเขียนอยู่นี้ เราสามารถใส่ link ให้กับข้อความและรูปภาพ เพื่อเชื่อมโยงหน้าเว็บทั้งหมด และทดสอบได้โดยไม่ต้องไปแก้ไขในระดับการเขียนโค้ด HTML ครับ

2. การจัด Grouping ที่ดีขึ้น

ถ้าเราใส่ของลงไปในหน้าเว็บเราเยอะ การจัดการเนื้อหาที่ดีคือวิธีการ “จัดกลุ่ม” หรือ “Grouping” ซึ่ง Edge Reflow รุ่นปัจจุบันทำให้การทำ Grouping นั้นง่ายมากขึ้น โดยตอนที่เราทำการ Grouping วัตถุต่างๆ แล้ว เราสามารถคลิกเลือกวัตถุต่างๆ ภายใน Group ได้ทันที ไม่ต้อง ungroup ออกมาเหมือนแต่ก่อน (แต่ส่วนตัวผมว่า ถ้าเราจะเลือก Group มันต้องเล็งดีๆ ถ้ามันขึ้นเป็นเส้นประ นั่นคือ Group ของเราครับ)

 

3. ความสามารถในการจัดการ Interactivity

Edge Reflow ในรุ่นนี้ สามารถทำงานกับ state อย่าง hover, active, และ focus ได้แล้ว ทำให้เราสามารถสร้างส่วนโต้ตอบกับผู้ใช้ง่ายๆ ด้วยการปรับแต่งค่าต่างๆ ของวัตถุที่เราต้องการ ไม่ต้องไปยุ่งกับ code โดยตรง

 

4. จัดลำดับของวัตถุในกลุ่มง่ายขึ้นกับ Insertion Caret

การจัดลำดับวัตถุต่างๆ ในกลุ่มเดียวกันอย่างพวก Menu และระบบ Navigation เป็นงานที่ใช้พลังเกินความจำเป็น อย่างเช่นถ้าเรามีปุ่มในเมนู 5 ปุ่ม แล้วต้องการสลับตำแหน่งปุ่มที่ 1 และปุ่มที่ 3 โอ้โห ขยับกันมันส์เลยในเวอร์ชั่นก่อนหน้านี้ แต่ Insertion Caret จะทำให้เราจัดวางปุ่มที่ว่านี้ได้ง่ายขึ้น ต้องลองดูตัวอย่างครับ

 

5. ใส่ Web Form ได้แล้ว!

ดีใจน้ำตาไหลเลย กับ Web Form ที่ Adobe Edge Reflow CC ให้มา เพราะแทนที่ผมต้องวาดสี่เหลี่ยมและติ๊ต่างว่ามันคือ Input Box ก่อนเอาไปใส่ code จริงในเวอร์ชั่นก่อน เราสามารถเลือกใส่ และยังมีตัวเลือกให้ปรับ layout ได้อีกด้วยนะ

โดย Web Form ที่ Edge Reflow มีให้ในเวอร์ชั่นนี้ได้แก่

• Button
• Check box
• Input (กล่องข้อความ)
• Select Options (อีกชื่อคือ Combo Box, หรือ Drop-down Menu)
• Radio Button

6. ค้นหา Asset ได้แล้ว

ความสามารถนี้อาจจะไม่ดูหวือหวา แต่มีประโยชน์มากๆ เมื่อกราฟฟิคและรูปภาพที่เราใช้ในโปรเจคเริ่มมีจำนวนมากขึ้น ไอช่อง Asset Panel มันก็ใช่ว่าจะใหญ่มากมาย ช่อง Search ใน Asset Panel ที่เริ่มเข้ามาใน Edge Reflow เวอร์ชั่นนี้ ทำให้การค้นหาภาพ ทำได้ง่ายขึ้น

7. เปิดดูไฟล์ก่อนหน้าด้วย Recent Open

อันนี้ใครไม่ขอ ผมก็ต้องขอ เดิมทีการทำงานกับโปรแกรมที่แยกตัวงานออกเป็นไฟล์ จะมีเมนูให้เราเลือกเปิดไฟล์ที่เคย “เปิดไปแล้ว” ก่อนหน้านี้ (บางคนจะคุ้นกับคำว่า Recent Files) ซึ่งทีมงาน Adobe Edge Reflow ก็ได้เพิ่มคำสั่ง Recent Open เข้าไปในเมนู ให้เราสามารถเปิดงานที่เพิ่งทำไปก่อนปิดโปรแกรม หรือทำค้างไว้วันก่อนได้สะดวกขึ้น

สรุป

ดังนั้นผมขอสรุปอีกครั้งว่า ใน Edge Reflow CC เวอร์ชั่นล่าสุด มีฟีเจอร์ใหม่ๆ ดังนี้ครับ

1. สามารถใส่ link ได้
2. การจัด grouping สะดวกขึ้น
3. สามารถสร้างการโต้ตอบง่ายๆ
4. จัดลำดับวัตถุอย่างเช่นพวกเมนู ได้ง่ายขึ้น
5. มี Web Form ให้ใช้แล้ว
6. มีช่อง Search ใน Asset panel
7. แสดงรายการของไฟล์ที่เปิดก่อนหน้านี้

ขอให้มีความสุขกับการสร้าง Responsive Web นะครับ กดรับ Email แจ้งของใหม่จากผมที่นี่ และติดตามวิดีโอใหม่ๆ ใน YouTube Channel ของผมกัน