ภาพประกอบ : Pingendo

ออกแบบ Layout เว็บไซต์ด้วย Bootstrap กับ Pingendo

Bootstrap นี่ยังคงเป็น CSS Framework ยอดนิยมที่ไม่ตกเอาง่ายๆเลย ตอนนี้เห็นมี desktop application ตัวหนึ่งชื่อ Pingendo ออกมาเพื่อให้เราออกแบบหน้าเว็บด้วยย component ต่างๆของ bootstrap แล้วได้ออกมาเป็น Code ทันทีเลย น่าสนใจมากครับ

ภาพประกอบ : Pingendo

ภาพประกอบ : Pingendo

ออกแบบ Layout เว็บไซต์ด้วย Bootstrap กับ Pingendo

Pingendo คงเหมาะกับการออกแบบเว็บไซต์สำหรับคนที่ชื่นชอบงานด้าน UX UI นะครับเพราะว่าทำออกมาให้แทบจะไม่ต้องมาใส่ Code กันเองเลย แนวคิดของโปรแกรมนี้คงออกมาในลักษณะลากวางนะครับ ความสามารถจะคล้ายๆกับ layoutit แต่ทาง Pingendo จะออกมาในลักษณะเป็นการทำงานที่เน้นไปในเรื่องของ responsive มากไม่น้อยนะครับ เพราะว่านอกจากการ Preview เป็นแบบ Responsive แล้วเรายังสามารถที่จะกำหนดค่าของแต่ละ Component แต่ละ class ได้เองเลยว่าจะให้ Class ไหนรองรับการแสดงผลแบบใดได้บ้าง

เค้าคุยไว้บนหน้าเว็บว่า

EASY FROM THE START
POWERFUL LAYOUT
USEFUL FOR EVERYONE

ก็การเริ่มต้นก็ง่ายจริงนะครับ เพราะติดตั้งโปรแกรมก็ง่าย แถมตัวโปรแกรมเด่นมากๆคือมีทุกระบบ OS เลยทั้ง MAC, Windows, Linux เรียกได้ว่ามากันครบ และหลังจากที่ติดตั้งระบบลงในเครื่องของเราแล้ว เราก็สามารถลากวางกันได้เลย

หน้าตาของโปรแกรมจะเป็นแบบนี้ครับ

ภาพประกอบ : Full Screen

ภาพประกอบ : Full Screen

พื้นที่ของโปรแกรมจะแบ่งออกเป็น 4 ส่วนนะครับ ซ้ายมือสุดจะเป็นส่วนของ Component ต่างๆทั้งตัวหนังสือ, Media, Navigation, Forms, Layout ที่คุณสามารถหยิบเอามาวางได้

และพื้นที่ตรงกลางแบ่งย่อยออกมาอีกเป็นส่วนบนกับส่วนล่างนะครับ ส่วนบนเป็นพื้นที่เปล่าๆสำหรับทำงาน เปิดมาจะเห็นเป็นสีขาวโล่งๆแบบนี้เลย ส่วนด้านล่างจะเป็น Code Editor นะครับคุณสามารถเขียน Code เพิ่มไปเองได้เลยในส่วนนี้ทั้ง HTML และ CSS นะครับ อ่อไฟล์ที่ได้ออกมาจากโปรแกรมนี้จะเป็น HTML นะครับ

ส่วนของพื้นที่ทางด้านขวามือจะเป็นชื่อ ID และ Class หากเราต้องการใส่เพิ่มเติมและมีการระบุค่ากำหนดในแต่ละ Element ด้วยว่าเราจะให้มันมีขนาดเท่าไหร่หรือจะรองรับกับอุปกรณ์ใดๆบ้าง ตรงนี้ใช้ได้เลยนะ ง่ายดี

มาดูเมนูด้านบนกันบ้างครับ

ภาพประกอบ : Menu

ภาพประกอบ : Menu

เมนูด้านบนจะเป็นการเปิดไฟล์ save ไฟล์ การพิมพ์ข้อความตัวหนา ตัวเอียง หรือการใส่ link เหมือนๆกับลักษณะของ Text Editor ทั่วไปนะครับ แต่เพิ่มมาคือมีการแสดงผลหรือ Preview ให้เลือกครับว่าเราจะ Preview บนอุปกรณ์แบบไหนทั้งมือถือ Tablet Laptop หรือ PC จากนั้นก็เปิดดูบน Browser ได้ด้วย

Code เปล่าๆที่ทางระบบ สร้างมาให้ตอนแรงเริ่มจะเป็นแบบนี้นะครับ


<html>

<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
rel="stylesheet">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body></body>

</html>

จะเห็นว่านอกจาก bootstrap แล้วยังมีการเรียกไฟล์ jquery มาให้ด้วยเลย

เรามาลองออกแบบงานจากโปรแกรมนี้ดูกันครับ

ภาพประกอบ : ตัวอย่างบน pc

ภาพประกอบ : ตัวอย่างบน pc

อันนี้เป็นงานที่แสดงบน PC นะครับ มาดูบน Laptop กันบ้าง

ภาพประกอบ : ตัวอย่างบน laptop

ภาพประกอบ : ตัวอย่างบน laptop

บน laptop ออกมาใกล้เคียงกันนะครับ

ภาพประกอบ : ตัวอย่างบน tablet

ภาพประกอบ : ตัวอย่างบน tablet

บน tablet ผมลองซ่อนค่า Panel ออกไปแล้วเดี๋ยวใน Mobile ผมจะให้ซ่อนเมนูอีกแล้วเรียก Panel กลับมา

 

ภาพประกอบ : ตัวอย่างบน mobile

ภาพประกอบ : ตัวอย่างบน mobile

จากที่ทำออกมาก็สะดวกต่องานออกแบบ แต่จะให้ดีคงต้องเป็ฯคนที่รู้จัก Code พวก HTML/CSS มาบ้างจะใช้งานได้คล่องขึ้นมาเลยเพราะสามารถเขียน CSS ไว้แล้วเรียกเข้ามาในไฟล์พร้อมทั้งใช้งาน ID กับ Class ได้เลย

โดยภาพรวมก็ถือว่าเข้าท่ามากนะครับ ใครชอบงานออกแบบก็ลองเครื่องมือตัวนี้เป็นอีกทางเลือกหนึ่งได้เลยครับ

สามารถเข้าไป Download กันได้ที่ Link ด้านล่างนี้เลย

Link : http://www.pingendo.com/

 

 

โฆษณา : Market  Responsive Newsletter with Template Builder

โฆษณา : Market Responsive Newsletter with Template Builder