Google Web Designer คือ เครื่องมือช่วยการพัฒนา content ของเว็บไซต์ด้วยเทคโนโลยี HTML5 ซึ่ง ตัวแอพพลิเคชันเองก็ทำมาจาก HTML5 เช่นเดียวกัน เปิดให้ดาวน์โหลดใช้ได้ในสองระบบปฏิบัติการคือ Window, OSX (System Requirements)Google Web Designer มี interface ที่คล้ายกับโปรแกรมเครื่องมือนักออกแบบทั่วไป ซึ่งจุดประสงค์ของเครื่องมือนี้ก็เพื่อทำให้การพัฒนา content และ ads ในเว็บไซต์สามารถพัฒนาได้ง่ายขึ้นโดยนักออกแบบที่ไม่มีความรู้ด้านการเขียนเว็บมากนัก
โดยนอกจากจะมีเครื่องมือพื้นฐานในการลากวาง ส่วนประกอบต่างๆเช่น รูปภาพ หรือ วีดีโอแล้ว ยังมีหน้าจอ interface สำหรับการ code ด้วยตัวเองซึ่งก็มีสามารถทำ auto-complete ได้ตามแบบโปรแกรม text editor ยอดนิยมหลายๆตัว
ที่มา - +googlewebdesigner, Google Web Designer
1. ลองใช้ Google Web Designer
สำหรับพวกเราที่ยังไม่เคยหรือไม่เคยรู้จัก Google Web Designer ก็ต้องทำความรู้จักกับมันก่อน เหมือนเวลาเราไป B2S จะซื้อปากกามาใช้ซักด้าม ก็ต้องทดสอบจับมันมาขีดๆ เขียนๆ ให้คล่องมือก่อนเอากลับมาใช้บนโต๊ะทำงาน ในหัวข้อแรกเราจะมาดูกันว่า เรียน Google Web Designer ไปทำไม และใช้ทำอะไรกัน?
2. วิธีสร้าง Project และเรียนรู้ User Interface (ส่วนติดต่อผู้ใช้) ใน Google Web Designer
งาน Web Animation นั้นมีหลายแบบ ไม่ว่าจะเป็น Ads หรือ Web animation เพื่อใช้ในงาน website ต่างๆ โดย Google Web Designer จะมีการแบ่งประเภทของ Project ไว้อย่างชัดเจน ในตอน beta จะเน้นไปที่การสร้าง Ads มากกว่า
แต่ก็สนับสนุนให้เราสามารถใช้โปรแกรมทำงานเกี่ยวกับ HTML, CSS, Javascript ด้วย แต่จากที่ผมใช้งานแล้วนั้นในเวอร์ชั่นปัจจุบัน ไม่ได้มีตัวช่วยในการเขียน code ดังกล่าวเท่าไหร่ (ยังไม่สะดวกเหมือนพวก editplus หรือ Sublime Text)
ดังนั้นเรามาดูวิธีการสร้าง Project และดูการใช้งาน Google Web Designer เบื้องต้นกันดีกว่าครับ
3. การสร้าง Animation แบบสบายๆ ด้วย Google Web Designer
Google Web Designer ออกแบบมาให้เป็นเครื่องมือสร้าง HTML5 Animation สำหรับ Ads ตั้งแต่แรก ซึ่งมันสนับสนุนการสร้าง Ads บนเจ้าใหญ่ๆ อย่าง AdMob หรือ DoubleClick ทำให้สามารถสร้าง Ads แล้วเอาไปใช้กับบริการดังกล่าวได้อย่างรวดเร็ว แต่มันก็ยังให้เราสร้างเป็น Ads หรือ Animation เปล่าๆ เพื่อเอาไปใช้แบบอื่นด้วยนะ ดังนั้นเรามาลองดูการสร้าง Web Animation และใส่ Interactive ง่ายๆ (หรือเรียกว่า Web Animation แบบไม่เชื่อมกับบริการ Ads ก็ได้ครับ) กันดีกว่า
4. วิธีทดสอบ HTML Animation ใน Google Web Designer
ความตื่นเต้นที่สุดในการทำ Web Animation เนี่ย จะคล้ายๆ กับการทำงานสายอื่นๆ คือตอนเราเอาไปเปิดให้ลูกค้าดูครับ! ซึ่งเมื่อเราสร้าง Animation รวมทั้ง กำหนด Interaction เรียบร้อยแล้ว สิ่งที่ควรทำ (และต้องทำทุกครั้ง) คือการทดสอบว่า Animation และ Interaction ทั้งหมดนั้น แสดงผลและทำงานได้อย่างถูกต้อง
เรามาดูวิธีการทดสอบ animation ใน Google Web Designer กันเลย
5. การ publish animation ใน Google Web Designer ออกไปใช้งาน
Google Web Designer ออกแบบมาเพื่อให้พวกเราสร้าง Animation บนเทคโนโลยี HTML5 ได้โดยไม่ต้องลงไปยุ่งกับการเขียน code ทั้งหมด (แต่ถ้าอยากยุ่ง ก็อนุญาติ) ดังนั้น ขั้นตอนสุดท้ายคือการนำ animation ไปใช้งานใน Website จริงๆ เรามาดูกันครับว่าขั้นตอนในการนำตัว project ไปใช้งาน จะเป็นอย่างไร
เพิ่มเติมคือเนื่องจากผมเป็นคนชอบ Adobe โดยพื้นฐาน จะมีวิธีการใข้โปรแกรมสาย Adobe เช่น Adobe Dreamweaver CC, Adobe Edge Code CC, และ Bracket สาธิดด้วยนะครับ
สรุป.. และไปต่อ
“เรียน Google Web Designer” ในตอนที่ผมเขียนอยู่นี้นั้น ยังเป็น version beta นั่นหมายความว่ามัน “ต้อง” มีข้อบกพร่อง มันต้องได้รับการปรับปรุงอีกหลายๆ จุดก่อนที่จะเป็นตัวสมบูรณ์ แต่คุณก็น่าจะเริ่มเห็นศักยภาพในการใช้งานที่น่าพิจารณาเอามาใช้งานอีกตัวหนึง (เพราะมันฟรี!) ยังไงก็ติดตามกันได้นะครับ เป็นอีกตัวที่ผมสนใจและก็จะอัพเดตตามเรื่อยๆ
ดูเครื่องมือหรือเทคนิคอื่นๆ ได้ในส่วนของ Nextflow Learn หรือสนใจมาอบรมกับผมก็สามารถดูได้ใน Nextflow training และถ้าอยากอัพเดตของใหม่ๆ ไปพร้อมกับคนอื่นๆ ก็สามารถฝาก email ไว้ที่นี่ แล้วผมจะส่ง email แจ้งทุกครั้งที่มีข่าว หรือกิจกรรมใหม่ๆ ถึง inbox ของคุณเลย
และที่สำคัญ กำลังใจในการสอนสิ่งใหม่ๆ ของผมก็จะมาจาก comment ให้กำลังใจของคุณ ติชมอะไรก็ฝากไว้ด้านล่างได้เลยนะครับ
ที่มา : http://goo.gl/iUkK0X
..........................................................................................
ไม่มีความคิดเห็น:
แสดงความคิดเห็น