Metadot

การติดตั้ง Metadot

วิธีการใช้งาน

การใช้งานเว็บไซต์ที่พัฒนาโดยใช้ Metadot มีรูปแบบการแสดงผลเป็น 2 โหมด คือ

• Normal mode
• Edit mode

ซึ่ง Normal mode จะแสดงเนื้อหาของเว็ปไซต์ปกติ ส่วน Edit mode จะเป็นการเข้าถึงข้อมูลบนเว็บไซต์เพื่อที่ทำการเพิ่มหรือแก้ไขข้อมูลบนเว็บไซต์ ซึ่งผู้ใช้งานจะเข้าถึงโหมด Edit mode ได้เมื่อ Login เข้าสู่ระบบก่อนจากนั้นคลิกเลือกที่ปุ่ม ‘Enable editing’ ที่มีลักษณะดังรูป
หลังจากเข้าสู่ Editing mode เราจะเห็นส่วนประกอบหลักๆ 3 ส่วนบริเวณด้านล่างของ Logo ซึ่งจะประกอบไปด้วย

1. Web builder bar
   Web builder bar เป็นแท็ปที่แสดงเมื่อผู้ใช้งานเข้าสู่โหมด Editing ซึ่งส่วนของ Web builder bar นี้มีไว้สำหรับบริหารจัดการข้อมูลต่างๆบนหน้าเว็ปเช่น เพิ่มหน้าใหม่ กำหนดหัวข้อใหม่ ใส่รูปแบบของข้อมูล หรือใช้สำหรับจัดการผู้ใช้บนระบบเพื่อปรับแต่งการทำงานของโปรแกรม

   New Page	ใช้สำหรับเพิ่มหน้าใหม่บนเวปไซด์ โดยเมื่อผู้ใช้ที่เป็น Admin หรือ Site Manager ได้เข้าสู่ Editing Mode แล้วทำการ Click ปุ่ม New Page ตัวโปรแกรมจะเพิ่มหน้าเว็ปใหม่ซึ่งจะเป็น Sub ภายใต้หน้าเว็ปปัจจุบันที่ขณะกดปุ่ม New Page
   New Section	ใช้สำหรับสร้าง Section ใหม่ สำหรับกำหนด Block ของเนื้อหาใหม่ในหน้าปัจจุบัน ซึ่งทำให้ Admin สามารถเพิ่ม Content ต่างๆ ลงบน Web Site ได้เป็นสัดเป็นส่วนมากขึ้น
   Add a gizmo	Gizmo เป็นเสมือน Tool Box ที่กำหนดลงบนหน้าเว็ป โดยเป็น function หรือการทำงานพื้นฐานที่มากับโปรแกรมโดย Admin หรือ Site Manger ไม่จำเป็นต้องกำหนดหรือทำขึ้นเอง อาจจะมองว่า gizmo ก็คือ Tool Box สำเร็จรูปนั้นเอง สำหรับ List การทำงานสำเร็จรูปของ gizmo สามารถเลือกโดยการเลือกผ่าน drop-down add a gizmo
   Manage	สำหรับผู้ใช้ที่เป็น Admin ที่ต้องการปรับแต่งและเปลี่ยนแปลงค่า Configuration ของโปรแกรมเช่น กำหนดผูใช้งาน การแบ่ง Group การเปลี่ยน Skin หรือ Theme ของเว็ปไซด์ เป็นต้น ซึ่งผู้ใช้สามารถเลือก List ต่างๆ บริเวณ drop-down Manage

2. Gizmo panel
   บริเวณส่วนนี้เป็นส่วนสำหรับจัดการปรับแต่งเนื้อหาหรือเปลี่ยนคุณสมบัติ(Change Permission) ที่ผู้ใช้งานได้สร้างขึ้นไว้ ขณะที่ผู้ใช้งานที่เข้าสู่ Editing Mode จะเห็นกลุ่มของ Icon สำหรับเพื่อใช้สำหรับแก้ไขคุณสมบัติ (Property) หรือ เนื้อหาของ Gizmo โดยแต่ละ Icon มีความหมายตามลำดับดังนี้

   ปุ่ม Edit	ใช้สำหรับปรับเปลี่ยนหรือแก้ไขข้อความหรือ รูปภาพ หรือ เอกสารแนบต่างๆ ของแต่ละ Gizmo
   ปุ่ม Properties	ใช้สำหรับเปลี่ยนคุณสมบัติของ Gizmo เช่นช่วงเวลาที่จะให้แสดง content เป็นต้น
   ปุ่ม Permissions	ใช้สำหรับกำหนด Permission ของ gizmo ในการ view , edit หรือ delete
   ปุ่ม Shortcut	ใช้สำหรับการทำ Shortcut เพื่อเพิ่มเนื้อหาหรือ Link ที่หน้า Page อื่นหรือที่ Section อื่น
   ปุ่ม Cut	ใช้สำหรับ Cut gizmo ที่เราไม่ต้องการออกชั่วคราว หรืออาจจะ Cut เพื่อทำไปใส่ไว้ที่ Section อื่นในเว็ปไซด์
   ปุ่ม Paste	ใช้สำหรับวาง clipboard ที่ถูก cut มาลงบนหน้าหรือsection ปัจจุบัน
   ปุ่ม Delete	ใช้สำหรับลบ Gizmo ที่อยู่ในส่วนนั้นออกไปแบบถาวร
   ปุ่ม Up	ใช้สำหรับเรียก object นี้ขึ้นไป 1 ช่อง
   ปุ่ม Down	ใช้สำหรับเรียก object นี้ลงไป 1 ช่อง

3. Content traffic light
   จะแสดงสถานะของเนื้อหานั้นๆว่ามีการกำหนดอายุของ Content ไว้หรือไม่ ซึ่งจะทำให้ทราบว่าเนื้อหาส่วนใดบนเวปที่หมดอายุไปแล้ว หรือใกล้ที่จะหมดอายุ สำหรับ Feature นี้จะกำหนด scheduling ในการแสดงบนเว็ปไซด์โดยมีรูปของ Icon ตามด้านล่างแสดงสถานะของ Content นั้น โดยแต่ละ Icon มีลักษณะตามลำดับดังนี้

   ไฟเขียว	สถานะของ Content นั้นยังแสดงบนเว็ปไซด์อยู่
   ไฟเหลือง	สถานะของ Content ที่ยังสดอยู่แต่ไม่สามารถมองเห็นในโหมดปกติ (Normal Mode)
   ไฟแดง	สถานะของ Content นั้นหมดอายุ (Expired) ไม่สามารถมองเห็นได้ใน mode ผู้ใช้งานปกติ
   ในกรณีไม่แสดงรูป icon แสดงว่า gizmo ดังกล่าวไม่ได้มีการกำหนด Scheduling เอาไว้โดย Content ก็จะแสดงบนเว็ปไซด์ตามปกติ

   สำหรับการกำหนด Scheduling นั้นผู้ใช้งานที่เป็น Site Manager สามารถคลิกที่ปุ่ม Properties ของ Content นั้น จากนั้นโปรแกรมจะให้กำหนดวันเริ่มต้นและสุดท้ายของการแสดงผล โดยมีลักษณะดังรูป
   
   หมายเหตุ ผู้ใช้งานอาจจะคลิกปุ่มปฏิทิน() เพื่อเลือกวันเริ่มต้นและสิ้นสุดผ่านหน้าปฏิทิน
   

การเพิ่มเนื้อหาหรือข้อมูลบนเว็บไซต์

ในส่วนนี้จะอธิบายเกี่ยวกับการเพิ่มเนื้อหาบนเว็ปไซด์ ซึ่งจะประกอบไปด้วยการเพิ่มหน้าเพจใหม่ของเว็บ การกำหนด Layout หรือการเพิ่มส่วนของ Gizmo (รูปแบบสำเร็จรูปของเว็บไซต์เช่น Calendar, New Items เป็นต้น)

การเพิ่มหน้าใหม่บนเว็บไซต์

เมื่อผู้ใช้ต้องการเพิ่มหน้าเพจใหม่บนเว็บไซต์จำเป็นต้อง Login เข้าสู่ระบบก่อน (โดยใช้ username และ password ที่มีสิทธิ์ในเพิ่มเนื้อหาบนเว็บไซต์) และคลิกที่ปุ่ม Enable Editing เพื่อเข้าสู่ โหมดของการแก้ไข แล้วจึงสามารถสร้างหน้าใหม่ได้โดยคลิกที่ ปุ่ม “New Page” บนบริเวณของ Web builder bar โดยจะปรากฏหน้าจอดังนี้

ในหน้า Page นี้ จะให้ผู้ใช้กำหนดชื่อของ Page ใหม่, กำหนด Description ซึ่งผู้ใช้งานนั้นสามารถใส่รูปภาพเพิ่มได้โดยคลิกที่ปุ่ม Open Image Library โดยจะมี pop up ให้จัดการเกี่ยวกับรูปภาพที่มีเก็บไว้ใน Library

ซึ่งผู้ใช้งานสามารถ click-and-drag รูปมาไว้ที่ช่อง description โดยจะมีลักษณะดังรูปด้านล่าง

สำหรับเนื้อหาหรือข้อความที่จะระบุในช่อง Description นั้นสามารถกำหนด font หรือรูปแบบได้เหมือนกับ Microsoft word ซึ่งสามารถจัดรูปแบบ, การกำหนด Bullet,สี หรือประเภทของ Font ได้ นอกจากนี้ส่วนของ Description แล้วบริเวณช่อง “Redirect to URL” ยังสามารถระบุให้ หน้า Page นี้ redirect ไปยัง URLที่ต้องการและสามารถกำหนด Keywords ไว้สำหรับการค้นหาข้อมูลภายในเว็ปไซด์ด้วย จากนั้นให้คลิกที่ปุ่ม Create ผู้ใช้งานก็จะได้หน้า Page ใหม่ขึ้นมา

การกำหนด Layout (รูปแบบโครงร่างของแต่ละหน้า)

หลังจากนั้นผู้ใช้จะเห็นหน้า Page ใหม่ว่างๆที่หน้าจอให้เลือกคลิกไปที่ปุ่ม Properties บริเวณ Gizmo Bar เพื่อที่จะกำหนด Layout ซึ่งจะปรากฏหน้าจอดังนี้
ซึ่งจากโปรแกรมจะมี Layout ให้เลือกถึง 5 แบบ โดยผู้ใช้งานสามารถเลือก layout ที่ต้องการเพื่อกำหนดให้กับหน้า page ใหม่แล้วคลิกที่ปุ่ม Save
จากตัวอย่างด้านล่างเป็นผลลัพธ์จากการกำหนด Layout เป็นแบบที่ 5 คือแบ่งเป็น 3 ช่องที่มีความกว้างเท่ากันหมด โดยแต่ละ layout ผู้ใช้งานสามารถที่จะกำหนด Section หรือ กำหนด Gizmo (function การทำงานสำเร็จรูป) ได้ ซึ่งต้องไปจะอธิบายการนำ function การทำงานสำเร็จรูปไปใช้กับเว็ปไซด์