ร่างแบบ Website ง่ายๆด้วย Freeware ดีๆอย่าง Pencil
หัวข้อ บทความ แทก Freeware | Tool | Windows
พักหลังมาทำงานระบบใหญ่ๆ ทำให้ผมต้องออกแบบหน้าจอต่างๆเป็น paper ส่งให้ลูกค้าตรวจงานก่อน การออกแบบหน้าจอเหล่านี้เพื่อส่งตรวจกับลูกค้าเป็นสิ่งสำคัญอันดับแรกๆในการออกระบบขนาดใหญ่
เนื่องจากเป็นการยืนยันความเข้าใจของเรากับทางลูกค้าด้วย การแก้ไขบนกระดาษบน Present สามารถทำได้ง่ายกว่าเมื่อเข้าไปขั้นตอนการ Coding แล้ว
แต่เอาเข้าจริงๆ การแก้ไขบนกระดาษง่ายๆน่ะมันไม่ได้ง่ายสำหรับผมที่ไม่ได้มีหัวด้านศิลปะใดๆเลย
จำได้เมื่อนานมาแล้ว ผมเคยใช้ Microsoft Visio มาจัดการได้ แต่ลองคิดๆดูก็ไม่อยากเสียเงินซื้อ Software ความสามารถระดับเทพ มาทำงานแค่วาดๆร่างๆแค่นี้
วันนี้ได้มาเจอกับเครื่องมือใช้ร่างแบบ Website แบบง่ายๆ เพื่อนำเสนอลูกค้าแล้ว แถมเป็น Freeware อีกต่างหากนั้นคือ Pencil ครับ
Pencil ของฟรีดีๆก็มีแฮะ
http://pencil.evolus.vn/en-US/Home.aspx ตามเข้าไปสอยได้เลยครับ
เจ้า Pencil นี้เป็น Freeware แต่เดิมเป็น Plugin อยู่บน Firefox (สังเกตได้เลยว่า Power by Mozilla) แต่ก็มีการพัฒนาให้ run แยกออกมาเป็น exe ได้ด้วย (ซึ่งในที่นี้คือตัวที่ผมใช้งานอยู่) ซึ่งแต่แรกเลยมันถูกพัฒนาให้เป็นเครื่องมืออยู่บน Linux มาภายหลังจึงได้ port มาอยู่บน Windows ด้วย
จากการลองใช้งานบน Windows 7 มาซักระยะนึงพบว่า มันมีความอืดในการคลิกเมนูต่างๆอยู่บ้างแต่ไม่พบการแฮงค์แบบไร้สาระใดๆเลย ถือว่า สอบผ่านได้สบายๆในสายตามผม (อย่าลืมนี่คือ Freeware นะครับ)
เข้าไปหน้า Download แล้วหาเอาตาม OS ที่ใช้งานได้เลย อ้อ เสียใจกับสาย OSX ด้วย ไม่มีให้ครับ ฮา :P
ผมเลือก Download แบบ Standalone บน Windows
เสร็จแล้วเลือกที่ Tab Export Templates ด้วย ให้ Download HTML Template with thumbnails using JQuery มาเพิ่มเติมด้วย (ไว้จะบอกว่าใช้ทำอะไรทีหลัง)
อย่าช้าเลยได้ File มาครบแล้วเชิญ Install ให้เรียบร้อยตามระเบียบคุณก็จะได้หน้าตา Program ออกมาประมาณนี้
เริ่มหัดใช้งาน ใช้ไม่ยากคล้าย Visio และ PowerPoint อย่างมากมาย
ถ้าเราคุ้นเคยกับ Visio และใช้ PowerPoint เป็นเจ้า Pencil คือลูกผสมตรงกลางเลยครับ เราสามารถเพิ่ม New page ประกอบได้เรื่อยๆ โดยจะมี Tool ด้านซ้ายให้เราเลือกดึงไปแปะ (คล้ายกับ Visio)
ลักษณะ Page จำนวนมากที่สร้างขึ้นจะเรียงไว้ทางด้านบน สามารถ New Page ไปได้เรื่อยๆ ผมเคย New Page ไปเกือบ 100 หน้า มันก็ยังทำงานได้ปกติ อืดๆบ้างแต่ก็ OK ใช้ได้ แจ๋วจริง
Tool ทางด้านซ้ายมือที่บอกว่าคล้าย Visio ผมชอบเครื่องมือในกลุ่ม Sketchy GUI มากเพราะพอทำออกมาแล้วได้หน้าจอคล้ายกับใช้ดินสอวาดจริงๆ
กำหนดขนาดพื้นที่ทำงานด้วยการคลิกที่ชื่อ Page นั้นๆแล้วตั้งค่า
ไม่กี่วินาทีผมก็ลองสร้าง Form Login ออกมาให้ชมกัน เจ้า Pencil ผมรู้สึกว่ามันง่ายมาก ไอ้การคลิกๆแก้ๆไม่แน่ใจว่าผมรู้สึกไปเองหรือเปล่าว่ามันใกล้เคียงกับ Visio มาก (พอดีไม่ได้ใช้ Visio นานมากแล้วเลยไม่แน่ใจ) เรื่องภาษาไทยของ Pencil ไม่มีปัญหาครับ ใช้งานได้ 100%
ทำงานไปเรื่อยๆก็ save เก็บไว้นะครับ มันจะ save เป็น นามสกุล .ep
ถึงเวลาเอา File ออกไปใช้ให้ไปทำงาน Export ครับ
พอเขียนงานไปได้เยอะๆแล้วต้องการเอา File ออกไปใช้งานประกอบทำ Powerpoint อะไรก็ตาม เจ้า Pencil ณ ตอนนี้ยินดีให้เรา Export ออกไปเป็นภาพเท่านั้นนะครับ
อันดับแรกให้ไปที่ Tools -> Manage Export Template ก่อนเข้าไปเพิ่ม JQuery Left panel with Thumbnails ซึ่งเป็น File zip ที่เรา Download ไว้ตอนแรกนั้นเอง
กด Install New Template แล้ว Browse ไปหา zip file ที่ Download ไว้ตอนแรกแล้วก็ปิดหน้าจอนี้ไป
การตั้ง Template ตรงนี้คือระบุให้ตัว Pencil ทราบว่าเมื่อเราต้องการ Export ข้อมูลออกไปให้ใช้ Format Template ตามที่เราระบุไว้ จากหน้าจอจะเห็นผม Download Template หลายๆแบบมาใช้ไว้ เผื่อใช้งานครับ
เสร็จแล้วก็ไปที่ Document -> Export Document
เลือก Single web page ในหัวข้ออื่นๆยังไม่สามารถใช้งานได้ คงต้องรอออก Plugin ออกมาครับ
เสร็จแล้วเลือก All pages in the document แต่ถ้าต้องการเลือกเป็นรายหน้าก็มาคลิก Only the following pages แล้วติ๊กเลือกเฉพาะหน้าที่ต้องการ
เรียบร้อยแล้วก็เลือก Template ที่ต้องการและระบุ path ที่ต้องการให้ Export ออกไปเมื่อกด Finish ระบบก็จะสร้างรูปต่างๆออกมาพร้อมสร้าง html + Jquery ออกมาให้
เรียบร้อยแล้วไปดูที่ path จะเห็นมี html ให้คลิกดู โดย pages จะเก็บรูปทุกๆหน้าที่เราสร้างไว้เป็นรูปๆ สามารถเข้าไปเอารูปไปประกอบ PowerPoint ได้เลย
หรือจะคลิก index.html ก็สามารถดูบน Web Browser ได้เหมือนกันโดยทางด้านซ้ายจะเป็น Thumbnail ให้เลือกชม
สรุปการใช้งาน
เจ้า Pencil นี้เรียกว่า สามารถทำงานให้กับผมอย่างง่ายๆได้ในระดับที่น่าพอใจมาก ทำงานไป 100 กว่าหน้าใน file เดียวไม่มีอาการแฮงค์ให้เห็นเลย ผิดวิสัยของ Freeware มากๆ
ข้อเสียเดียวที่ผมเห็นคือ มันจะอืดๆอยู่บ้างก็เพราะมันป็น Software ที่ Port มาจากสาย Linux เค้าได้ขนาดนี้สำหรับผมถือว่า สอบผ่านแล้วครับ
ใครจะร่างหน้าจอการทำงานของ Website , Flow การทำงานคร่าวๆ และอยากใช้ Freeware ทำงาน ลองหัดใช้ Pencil ดูครับ ตอบโจทย์ของคุณได้แน่นอน
Read (37,643)
Comments (16)
2010-08-22 20:53:55
ความคิดเห็น
ขอบคุณครับบบบบบบบบบบบ เหมาะจริง
ทุกอย่างเกิดจากเหตุ และปัจจัย ไม่ใช่อยู่ดี ๆ ก็เกิดขึ้น :: สร้างฝันบนจินตนาการ www.konkeanweb.com , www.prawee.com ,www.tct15.com ,www.thaiagro.com โดยคุณ [email protected]
2010-08-22 22:11:30
Thank. ครับ
โดยคุณ den
2010-08-23 10:21:51
ตัวนี้ใช้อยู่เลยครับ Work มากๆ เวอร์ชั่นตอนนี้มี Tool เพิ่มเยอะเลย
หนทางสู่ความลำบากแสนสบาย หนทางสู่ความสบายแสนลำบาก www.memo8.com | www.gump.in.th โดยคุณ TaTump
2010-08-23 15:02:44
Manage Export Template มีประโยชน์อย่างนี้นี่เอง ไม่เคยใช้
ขอบคุณคร้าบบ
หนทางสู่ความลำบากแสนสบาย หนทางสู่ความสบายแสนลำบาก www.memo8.com | www.gump.in.th โดยคุณ TaTump
2010-08-23 15:07:52
โอ้ ได้ความรู้และมีประโยน์มาก ขอบคุณครับ
ในโลกใบนี้อยากได้อะไรมัน ต้องแลก ความสำเร็จอยากได้มาก็ต้องขยันเรียนรู้และยืนหยัดลงมือทำ โดยคุณ ต้น
2010-08-26 23:27:27
เจ๋งครับพี่อ้ม ไว้ Present งาน Online ได้เลยนะเนี้ย
โดยคุณ Zoon Show-idea.com
2010-08-27 01:19:00
ขอบคุณครับ เอาไปใช้แล้วครับบน Firefox ubuntu ใช้สะดวกดี
แต่เหมือน ปุ่ม ok พอเอาไปวางบนชิ้นงานมันจะกลายเป็นสีดำๆ ไม่รู้เพราะอะไร โฮ่ๆ
โดยคุณ nui
2010-09-06 09:49:12
ดูแล้วน่าจะใช้งานง่ายกว่า visio ด้วยนะครับ
โดยคุณ pop
2010-09-20 17:28:53
หลังจากที่โหลดมาลองใช้ดูก็ว่าทำไมที่เครื่องไม่มี template อย่างในรูปต้องโหลดเพิ่ม
แต่โดยรวมใช้งานง่ายดีครับ อาจจะดีกว่า visio ด้วยซ้ำ
โดยคุณ ปั๊ม
2010-10-05 17:07:25
A1. ลองแบบ firefox add-ons บน ubuntu ละครับ ลื่นกว่าจริงๆ คอนเฟิร์ม
A2. ผมว่าคุณอั้มก็มีหัวทางด้านศิลป์นะ ดูจากงานที่พงสะหวัน ผมว่าดีไซน์มันลงตัวมากๆ
โดยคุณ มะขวิด
2010-10-13 10:53:49
โอวขอบคุณมากครับผม ใช้งานง่าย คนดูก็ดูง่ายครับ
โดยคุณ Beer
2010-10-19 15:04:29
โอว่เหมาะสำหรับเอาไปทำ prototype เป็นอย่างยิ่ง
โดยคุณ naipinij
2010-10-28 05:08:53
ขอบคุณครับ เป็นอะไรที่ art มาก
โดยคุณ ดิว
2011-01-18 23:48:20
เยี่ยมมากครับ ต้องขอลองไปใช้บ้างแล้วละครับ
ขอบคุณสำหรับสิ่งดีๆ ครับ :)
โดยคุณ ฟ๊อก
2011-04-07 01:14:19
ขอบคุณมากครับ ไม่คิดว่าจะใช้ง่ายแบบนี้
โดยคุณ ต้น
2011-10-10 20:09:58
ขอบคุณมากเลยค่ะ กะลังปวดหัวอยู่เลย เพราะหาโปรแกรมมาออกแบบหน้าจอส่งอาจารย์ไม่ได้ โอวววววว ขอบคุณมากจริงๆ
โดยคุณ benjawan
2013-01-28 15:26:07