Posted on Leave a comment

จะมีอะไรใหม่ใน PhoneGap 3.0

PhoneGap 3 Cordova Plugin Diagram

PhoneGap Build Botประมาณกลางเดือนกรกฎาคมนี้ PhoneGap ที่ชาว Web Designer และ Web Developer นิยมใช้เปลี่ยน Website ให้เป็น Mobile application จะก้าวเข้าสู่เลข 3 แล้ว ผมว่าถึงเวลาแล้วที่เราจะมาดูการเปลี่ยนแปลงครั้งสำคัญนี้

1. เครื่องมือในการสร้าง App ใหม่

การสร้าง Mobile Application ด้วย PhoneGap ในเวอร์ชั่น 0 – 2.3 นั้น ต้องอาศัยการนำโปรเจคเทมเพลตไปตั้งค่าด้วยตัวของเราเอง แต่หลังๆ เวอร์ชั่น 2.4 เป็นต้นไป เราสามารถสั่งสร้าง Application ขึ้นมาผ่าน command line ซึ่งทำให้ลดขั้นตอนลงไปได้มาก

ในเวอร์ชั่น 3 ทางทีม PhoneGap ให้สัญญาว่า การสร้าง Application ของ mobile platform ทั้งหมดจะทำสามารถสั่งงานได้ผ่านชุดเครื่องมือที่เรียกว่า CLI ซึ่งจะทำให้เราสามารถสร้าง project ของพวก iOS, Android, Windows Phone, และ platform อื่นๆ ได้จากเครื่องมือตัวเดียว ไม่ต้องแยกไปใช้แต่ละตัว

2. สนับสนุน Mobile Platform ใหม่ๆ

สิ่งที่ PhoneGap ให้พวกเรามาตลอดคือการพัฒนาการทำงานให้ราบรื่นตลอด ไม่ว่าจะนำตัว Web ของเราไปใช้งานบน Platform ไหนก็ตาม ซึ่งในรุ่น 0 – 2.X ก็สนับสนุนในการทำ Application บน iOS, Android, Windows Phone 7, Windows Phone 8, Windows 8, และ BlackBerry 10

ในรุ่นที่ 3 การสนับสนุนจะยังมีต่อไป และเพิ่มเติม platform ใหม่ๆ เข้าไปด้วย เช่น iOS 7 ก็อยู่ในการพัฒนา รวมถึง FireFox OS และ Ubuntu เช่นกัน

3. API ใหม่

API ใหม่ๆ ที่จะเข้ามาใน รุ่นที่ 3 ก็จะมี InAppBrowser และ Globalization API ที่ทำให้เราสามารถใช้ข้อมูลสถานที่และช่วงเวลาที่ผู้ใช้อยู่ในขณะนั้นได้

4. ระบบจัดการ Plugin ใหม่

เรื่องนี้เป็นเรื่องที่ใหญ่พอสมควร เพราะจุดประสงค์ของ PhoneGap ในรุ่น 3.0 คือการทำให้ตัว Application ทำงานได้เร็วขึ้น และขนาดเล็กลง เลยมีการเปลี่ยนแปลงโครงสร้างหลักของ platform ไปพอสมควร

ผลที่ได้คือ API ต่างๆ จะไม่รวมอยู่ใน PhoneGap SDK (หรือ cordova.js ที่ทุกคนที่ใช้รู้จักกันดี) แล้ว แต่จะให้เลือกใช้เอาต่างหาก ดังภาพด้านล่าง

PhoneGap 3 Cordova Plugin Diagram
รูปการใช้งาน plugin ใน PhoneGap 3 (ภาพจาก PhoneGap Blog)

 

วิธีการนี้จะทำให้ประสิทธิภาพหลักของตัว Application ที่สร้างด้วย PhoneGap เล็กลง และทำงานได้ไวขึ้น รวมถึงการพัฒนา plugin จะทำได้ง่ายขึ้น อย่างเช่น เราจะสามารถพัฒนา PhoneGap App ด้วย Chrome Packaged Apps API และ Firefox OS WebAPIs (จำ WebRTC ที่ทำให้เราประชุม video conference ผ่าน Web Browser ได้)

 

แล้ว application ที่สร้างด้วย PhoneGap 2.X ล่ะ?

ทีนี้ถ้าคุณมี application ที่พัฒนาด้วย PhoneGap เวอร์ชั่นก่อนหน้านี้ล่ะ? อันนี้ต้องมาดูกันว่า วิธีการ “ย้าย” (Migration) จะมีขั้นตอนอย่างไร ยากไหม เราจะมาคุยกันอีกครั้งครับ

 

ถ้าสนใจติดตามข่าวสาร, video tutorial, และเทคโนโลยีด้าน Web และ Adobe PhoneGap อื่นๆ ลงทะเบียนรับ email จากเราได้ด้านล่างนะครับ

[button_icon icon=”none” url=”http://form.jotform.co/form/31737929441865″ blank=”true” size=”big” colour=”blue”]ลงทะเบียนรับข่าวสารทาง email[/button_icon]

Posted on Leave a comment

ใช้ Adobe Edge Animate ใน Email ได้หรือไม่?

Adobe Edge Animate

มาถึงวันนี้ Adobe Edge Animate CC ก็ได้กลายมาเป็นเทคโนโลยีทางเลือกในการสร้าง Animation บน Website เคียงคู่กับ Flash ไปแล้ว (ใครเพิ่งเคยได้ยินชื่อ ไปศึกษารายละเอียดได้จาก link หลังบทความครับ)

ทีนี้ในเมื่อมันเป็น HTML, CSS, Javascript ก็มีนักเรียนผมคนหนึง สงสัยว่า

เราเอา Animation ที่สร้างด้วย Adobe Edge Animate CC ไปใส่ใน email ส่งให้ลูกค้า มันจะทำงานได้หรือไม่?

ขอตอบตรงนี้ว่าไม่ควรใช้ Adobe Edge Animate สร้าง Web Animation ใส่ลงไปใน Email

ทำไมถึงไม่ควรทำ?

1. โปรแกรม Email ส่วนใหญ่ไม่ชอบ Javascript

เพื่อความปลอดภัยต่อผู้ใช้งาน โปรแกรม Email แทบทุกตัวจะมีการ “ปิด” การทำงานของ Javascript ทั้งหมด เพื่อไม่ให้ผู้ประสงค์ร้ายแทรกรหัสเข้ามาในตัว Email ได้ ทั้งนี้ Animation ที่สร้างด้วย Adobe Edge Animate CC นั้น มีการใช้ Javascript ในการทำงาน จึงไม่สามารถทำงานได้บนโปรแกรมดังกล่าวครับ

2. Animation ใน Email เป็นสิ่งฟุ่มเฟือย

Animation เป็นส่วนหนึ่งของเทคนิคที่ใช้นำเสนอเนื้อหา และดึงดูดความสนใจในหลายธุรกิจมานานแล้ว และในทางเว็บเทคโนโลยี ก็ได้รับความนิยมสูงมากในยุคของ Flash

แต่กาลเวลาเปลี่ยนไป การนำเสนอควรลดขั้นตอนที่ยุ่งยาก ใช้เวลานาน อย่าง Animation ที่อาจติดข้อจำกัดหลายๆ อย่าง หลายๆ คนเลยเน้นไปที่การนำเสนอแบบภาพนิ่งแต่ดึงดูดได้ไม่แพ้กัน

ที่แนะนำแบบนี้ ไม่ใช่ให้เลิกใช้ Animation บน Web แต่แนะนำให้ใช้พอดีๆ เหมาะสมกับสภาพแวดล้อมที่ต้องนำไปใช้งานครับ

สรุปส่งท้าย

ลองฝึกนำเสนอเนื้อหาบน Web page หรือ email  แบบใช้ภาพนิ่งดูนะครับ ท้าทายและสนุกดีทีเดียว ถ้าสนใจให้ตาม Fan page ของเรา หรือกด link นี้เพื่อดู tag บทความ “Think & Design” ของเราทั้งหมดได้

ถ้าเพิ่งเคยเห็น Adobe Edge Animate ก็ไปศึกษาต่อได้จากบทความ “รู้จักกับ Adobe Edge Animate CC อย่างถูกต้อง” ของ ThaiADC ครับ

Posted on Leave a comment

มีอะไรใหม่ใน PhoneGap 2.8 สำหรับ Android?

PhoneGap Visual System

ปล่อยออกมาถี่มากๆ ในช่วงนี้ สำหรับเวอร์ชั่นใหม่ของ Adobe PhoneGap SDK ซึ่งใกล้เวลาเปลี่ยนเลขเวอร์ชั่นหลักเป็น 3.0 เข้าไปทุกทีแล้ว มาดูว่าการเปลี่ยนแปลงหลักๆ ในเวอร์ชั่น 2.8 มีอะไรกันบ้าง

1. แจ้งเตือนเมื่อมีการใช้ tag แบบเก่าในการตั้งค่า config.xml

การตั้งค่าการทำงานต่างๆ สำหรับ Android จะต้องกำหนดใน config.xml

ทีนี้ระหว่างการพัฒนา ทีม PhoneGap ได้เปลี่ยนแปลง tag ต่างๆ ที่ใช้ใน PhoneGap เยอะพอสมควร และหลายๆ ครั้ง tag เก่าใน Config.xml ก็ก่อให้เกิดปัญหา

ใน 2.8 นี้ เลยมีการเตือนมากขึ้นถ้าคุณยังใช้ tag เก่าใน config.xml อยู่ครับ

2. การเปลี่ยนจาก DroidGap ไปใช้ CordovaActivity

ตรงนี้เป็นส่วนสำคัญ เพราะปกติ Java class จะมีการใช้ class ที่ชื่อว่า DroidGap มาเป็นส่วนประกอบในการทำงาน โดยการเปลี่ยนชื่อนี้ จะทำให้การนำไปใช้กับ Project เก่า ต้องมาเปลี่ยนชื่อในไฟล์ Java กันอีกครั้ง แต่ก็เป็นการเตรียมตัวสำหรับเวอร์ชั่น 3.0 ที่จะออกมาเร็วๆ นี้ด้วย

3. การทำ splash screen แบบ 9-patch กลับมาอีกครั้ง

ความสามารถนี้หยุดการทำงานไปในเวอร์ชั่นก่อนหน้า ซึ่งเป็นความสามารถที่จะทำให้เราสามารถใช้ภาพแบบ 9 ส่วนในการกำหนด splash screen ทำให้ประหยัดเวลาในการมานั่งสร้าง splash screen ให้หน้าจอแต่ละขนาดได้อีกโข กลับมาใช้งานในเวอร์ชั่น 2.8 ได้แล้วครับ

สนใจเรื่อง Web Design, Adobe for Web, และ PhoneGap ฝาก Email รับบทความใหม่ๆ จากผมได้ที่นี่ครับ

ดูเนื้อหารวมเรื่อง PhoneGap ได้ที่ nextflow.in.th/phonegap

ที่มา – PhoneGap

Posted on Leave a comment

3 เหตุผลที่ทำให้ Adobe Edge Reflow และ Adobe Muse แตกต่างกัน

Edge-Reflow-CC-and-Adobe-Muse-CC

หลายๆ คนที่ได้ลองใช้งาน Adobe Edge Reflow CC และ Adobe Muse CC จะรู้สึกว่า

“เห้ย ไอนี่ก็ออกแบบหน้า Web ได้ ไอนั่นก็ออกแบบ Web ได้ ทำไม Adobe ต้องทำเครื่องมือออกมาซ้ำๆ กันนะ”

วันนี้เรามานั่งคุยกันครับ ว่าจริงๆ มันแตกต่างยังไง

 1. การทำ Responsive Layout ที่ต่างกัน

ตรงนี้จะเห็นชัดเจนที่สุดครับ

เพราะใน Adobe Muse นั้น การสร้าง Web Layout จะแบ่งตามขนาดของอุปกรณ์พกพาในปัจจุบันที่ “แก้ไขไม่ได้” (จะชอบเรียกกันว่า Fixed size) และมีเพียง 3 แบบ นั่นก็คือ Desktop, Tablet, และ Phone ดังภาพตัวอย่างด้านล่าง

Adobe Muse CC Web Layout, covers traditional fixed desktop, tablet, mobile
Layout Menu ใน Adobe Muse CC (ปัจจุบันที่เขียนบทความ) มีแต่ 3 ขนาดและไม่สามารถปรับเปลี่ยนความกว้างในแต่ละ Layout ได้

แต่ใน Adobe Edge Reflow พวกเราจะสามารถแบ่งขนาดของแต่ละ Layout ออกได้ตามต้องการ โดยใช้ Visual Media Query Breakpoint และทดสอบได้โดยใช้ Flexible Layout (ดูวิดีโอตัวอย่างได้ที่นี่) ซึ่งไม่จำกัดจำนวน ทำให้ลงรายละเอียดในแต่ละอุปกรณ์ได้เยอะกว่า ดังภาพตัวอย่างด้านล่าง

Edge Reflow's Visual Media Queries breakpoint photo by nextflow.in.th
Visual Media Queries breakpoints จะทำให้เราจัดการ Layout ได้เท่าที่ต้องการ (photo by nextflow.in.th)

2. Workflow และเป้าหมายในการใช้งานที่ต่างกันโดยสิ้นเชิง

http://www.flickr.com/photos/40385177@N07/4169106197/sizes/o/in/photostream/
photo by nociveglia, flickr

ถ้าเพิ่งอ่านข้อแรกเสร็จ อย่าเพิ่งทึกทักไปว่า “รู้แล้วใช้ Edge Reflow ดีกว่า”​แต่ไม่มีโปรแกรมไหนครอบจักรวาลครับ ไม่งั้น Adobe คงเอา Photoshop ไปรวมกับ Illustrator แล้ว

ส่วนที่สองที่ผมจะเล่า คือจุดประสงค์ในการใช้งานของแต่ละโปรแกรม

หลายๆ คนจะถามว่า “ทำไม Edge Reflow มันไม่เหมือน Dreamweaver มันใช่โปรแกรมสร้าง Web จริงๆ หรือ?” แหม่ ไม่ทันไร จะเอา Dreamweaver มาครอบจักรวาลแล้ว

Edge Reflow ออกแบบมาให้ Web Designer สามารถสร้าง และดูผลของการออกแบบ Web Layout ได้ทันที ก่อนส่งต่อไปยังส่วนที่รับผิดชอบด้าน HTML/CSS ครับ ชัดเจนว่ามันไม่มีระบบการแก้ไข Code ที่อยู่ใน Adobe Dreamweaver และไม่ได้เบ็ดเสร็จมี Widget ให้ใช้อย่างใน Adobe Muse

ในขณะที่ปัจจุบัน Adobe Muse นั้น ออกแบบมาเพื่อให้ Designer ที่ไม่จำเป็นต้องมีความรู้ด้าน HTML/CSS เหมือนที่ Web Designer ต้องรู้ สามารถสร้าง Website ตั้งแต่เริ่มจนจบเอาขึ้น server โดยไม่ต้องแตะ Code เลยแม้แต่นิดเดียว

ถ้าเปรียบเทียบดีๆ เจ้า Edge Reflow นี้อาจจะเหมือนเป็นเมนูต้มยำ ในมื้ออาหารชุดใหญ่ แต่เป็นต้มยำกุ้งรสเข้มข้น ถึงพริกถึงมะนาว

เหมาะสำหรับเอาไปใช้สร้าง Responsive Web Layout ที่จริงจังมากๆ

ในขณะที่ Adobe Muse เหมือนชุดอาหารชุดใหญ่นั่นแหละ มีตั้งแต่ออเดิร์ฟเรียกน้ำย่อย อาหารจานหลัก จนจบด้วยของหวาน เพียงแต่ความอร่อยจะเฉลี่ยๆ กัน ไม่มีตัวไหนโดดออกมาชัดเจน เหมือนเมนูเดี่ยวๆ อย่าง Edge Reflow

3. ความต้องการของทักษะในการใช้งาน

ส่วนสุดท้ายที่จะเล่าคือ ใช่ว่า Edge Reflow จะเป็นเครื่องมือสำหรับ Designer ทั่วไปนะครับ มันเป็นเครื่องมือสำหรับ Web Designer ตัวจริงต่างหาก

ซึ่งคนที่จะใช้งานต้องมีความเข้าใจพื้นฐานด้าน CSS พอสมควรด้วย เพราะการจัดวางของต่างๆ ใน Edge Reflow มันไม่ได้ลากแล้ววางเป๊ะๆ เหมือนใน Adobe Muse ที่เวลาทำงานเหมือนกับลากและวางภาพใน Photoshop หรือ InDesign ยังไงยังงั้น

Adobe Muse จะเหมาะกับ Designer ทั่วไป และผู้ที่มีไอเดียนึกออกแบบหน้าเว็บ อยากสร้างเว็บ แต่ไม่มีความรู้ด้าน HTML และ CSS มากกว่าครับ

สรุป

จากที่เปรียบเทียบให้ดู จะเห็นว่า Adobe Edge Reflow และ Adobe Muse เหมือนจะเป็นเครื่องมือที่ทำงานเหมือนกัน แต่จริงๆ แล้วแตกต่างกันมาก

ถ้าคุณสนใจใน Adobe Edge Reflow และ Adobe Muse แล้วล่ะก็ ไปสมัคร Adobe Creative Cloud และ download มาติดตั้งได้เลย

ทั้ง 2 ตัวนี้ไม่มีแผ่นปั๊มขายกันนะจ๊ะ ต้องโหลดและติดตั้งผ่าน Account ที่สมัครเท่านั้น

อย่าลืม เลือกเครื่องมือให้เหมาะกับตัวเอง และเป้าหมายในการทำงาน จะพาตัวเองสบาย และงานเสร็จเร็ว ดี มีคุณภาพ

อย่าเลือกหยิบค้อนมาผัดผักนะครับ สวัสดีครับ

** ดูหัวข้ออื่นๆ เกี่ยวกับเครื่องมือ Adobe CC ได้ด้านบนในหัวข้อ Learn นะครับ

Posted on Leave a comment

10 ขั้นตอนง่ายๆ กับการติดตั้ง Adobe Creative Cloud Desktop สำหรับ Windows

 

Adobe Creative Cloud มีขั้นตอนในการติดตั้ง ไม่เหมือนกับการ download ไฟล์โปรแกรมมาไว้ในเครื่อง แล้ว double click เพื่อเริ่มการติดตั้งเหมือนเวอร์ชั่นก่อนๆ มาดูกันครับว่าวิธีเอาเจ้า Adobe Creative Cloud บน Windows นั้นเป็นอย่างไร ไม่ยากเลย (ในที่นี่ผมจะสาธิตเป็น Windows 8 นะครับ สำหรับ Mac เข้าไปดูบทความของ indesignthai.com ที่นี่)

[us_cta title=”อบรมสร้าง Web สำหรับอุปกรณ์พกพา ด้วย Adobe CC” second_button=”1″ color=”primary” btn_label=”สำหรับ Web Designer” btn_color=”contrast” btn_size=”18px” btn_icon=”” btn2_label=”สำหรับคนที่ไม่อยากเขียนโค้ด” btn2_color=”contrast” btn2_size=”18px” btn2_icon=”” btn_link=”url:http%3A%2F%2Fnextflow.in.th%2Fresponsive-web-design-training-workshop%2F” btn2_link=”url:http%3A%2F%2Fnextflow.in.th%2Ftraining-consultant%2Fadobe-muse-cc-training%2F”]เรียนรู้การออกแบบและสร้าง Website สำหรับ Smartphone และ Tablet ด้วยชุดเครื่องมือ Adobe Creative Cloud เหมาะกับผู้เริ่มต้น และ Web Designer
[/us_cta]

1. เข้าไปยัง creative.adobe.com กดปุ่ม Get Started

Adobe Creative Cloud Website Front page

2. เลือกสมัคร Plan ที่ต้องการ

มีทั้งแบบฟรี (โปรแกรมเกือบทั้งหมดจะเป็นช่วงทดลองใช้ 30 วัน) และแบบจ่ายเงิน (ทั่วไป 1,500 บาท/เดือน แต่ก็มีแบบ Education สำหรับนักเรียนและอาจารย์ด้วยนะ)

 

Adobe Creative Cloud membership plan 2013

3. พอเลือกแล้วจะมี Term of use

ก็เลือก I agree… แล้วกด Accept

Adobe CC - Term of Use

 

4. ดำเนินการสมัคร Adobe Creative Cloud Account (หากยังไม่มี)

เสร็จเรียบร้อยแล้วจะเข้ามาที่หน้า Download Center

Adobe Creative Cloud's download center

 

5. Download Creative Cloud Application

ลองเลื่อนลงมาด้านล่าง จะเป็นรายชื่อโปรแกรม ให้เรา download

Adobe application in Adobe CC's download center

 

6. การติดตั้ง Creative Cloud Application

ยกตัวอย่าง เราจะทำการติดตั้ง Adobe Muse CC ให้กดปุ่ม download จะเข้ามายังหน้าเฉพาะสำหรับ Adobe Muse กดปุ่ม Download Trial (ถ้าไม่ใช่ free plan จะขึ้นเป็น download ธรรมดา)

 

Adobe Muse CC Download page

7. Launch Creative Cloud Application

จะขึ้นหน้าต่าง External Protocol Request ให้เลือกปุ่ม Launch Application

Screen Shot 2013-06-20 at 6.51.34 AM

 

8. พอขึ้นหน้าจอนี้ และคุณติดตั้ง Adobe Creative Cloud Desktop ไว้ในเครื่องแล้วให้ข้ามไปข้อ 10 เลย แต่ถ้ายังให้ไปที่ข้อ 9

Downloading Adobe Creative Cloud Setup

 

9. ติดตั้ง Creative Cloud Dekstop

ในกรณีที่คุณยังไม่มี Adobe Creative Cloud Desktop จะมีการ download ตัวโปรแกรมมาติดตั้งในเครื่อง ก่อนทำการ download โปรแกรมที่เราเลือก

9.1 Download มาแล้วจะเป็นไฟล์หน้าตาแบบนี้

Adobe Creative Cloud Desktop setup file on Windows 8

 

9.2 ให้ double click ทำการติดตั้ง

Adobe Creative Cloud Desktop setup file on Windows 8

 

9.3 เมื่อติดตั้งเสร็จแล้ว Adobe Creative Cloud Desktop จะอยู่ใน System Tray คลิกเพื่อเปิด

Adobe Creative Cloud Desktop in System Tray

 

9.4 ตัวโปรแกรมจะถาม Account ของคุณ ให้ทำการ Sign in โดยใช้ Account ที่คุณสมัคร

Login Screen in Adobe Creative Cloud Desktop

 

9.5 มี Term อีกเล็กน้อย

Term in Adobe Creative Cloud Desktop

 

10. ติดตั้งเสร็จสมบูรณ์

เรียบร้อย ตัว Desktop จะเริ่ม download ตัวโปรแกรม Adobe Muse CC ให้เอง และเมื่อเสร็จสมบูรณ์ก็เปิดใช้งานได้เลย

จากตรงนี้คุณสามารถเลือกติดตั้งโปรแกรมอื่นๆ เพิ่มเติมได้จาก Adobe Creative Cloud Desktop โดยตรง และถ้ามี update ก็จะมีการแจ้งเตือนที่นี่ครับ

ขอให้มีความสุขกับการสร้างสรรค์

Downloading Adobe Muse with Adobe Creative Cloud Desktop

[sb name=”Bottom-Post-Ads”]