ร่างแบบ 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 (28,457) Comments (16) 2010-08-22 20:53:55

ขอบคุณครับบบบบบบบบบบบ เหมาะจริง

โดยคุณ [email protected] 2010-08-22 22:11:30

ทุกอย่างเกิดจากเหตุ และปัจจัย ไม่ใช่อยู่ดี ๆ ก็เกิดขึ้น :: สร้างฝันบนจินตนาการ

www.konkeanweb.com , www.prawee.com ,www.tct15.com ,www.thaiagro.com

Thank. ครับ

โดยคุณ den 2010-08-23 10:21:51

ตัวนี้ใช้อยู่เลยครับ Work มากๆ เวอร์ชั่นตอนนี้มี Tool เพิ่มเยอะเลย

โดยคุณ TaTump 2010-08-23 15:02:44

หนทางสู่ความลำบากแสนสบาย หนทางสู่ความสบายแสนลำบาก

www.memo8.com | www.gump.in.th

Manage Export Template มีประโยชน์อย่างนี้นี่เอง ไม่เคยใช้
ขอบคุณคร้าบบ

โดยคุณ TaTump 2010-08-23 15:07:52

หนทางสู่ความลำบากแสนสบาย หนทางสู่ความสบายแสนลำบาก

www.memo8.com | www.gump.in.th

โอ้ ได้ความรู้และมีประโยน์มาก ขอบคุณครับ

โดยคุณ ต้น 2010-08-26 23:27:27

ในโลกใบนี้อยากได้อะไรมัน ต้องแลก  ความสำเร็จอยากได้มาก็ต้องขยันเรียนรู้และยืนหยัดลงมือทำ

เจ๋งครับพี่อ้ม ไว้ Present งาน Online ได้เลยนะเนี้ย

โดยคุณ Zoon Show-idea.com 2010-08-27 01:19:00

Show Idea

ขอบคุณครับ เอาไปใช้แล้วครับบน 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