การใช้งานทั่วไป และเกี่ยวกับ แมคมือใหม่.คอม

หัวข้อนี้จะเป็นการใช้งานทั่วไปและ FAQ, About หรือเรื่องอื่น ๆ ที่เกี่ยวกับ แมคมือใหม่.คอม ครับ

วิธีใช้งานเวป แมคมือใหม่.คอม

หัวข้อตรงนี้จะเกี่ยวกับการใช้งานส่วนต่าง ๆ ของเวปเบื้องต้นสำหรับสมาชิกเวปนะครับ ยิ้มปากกว้าง

การสร้างกระทู้ใหม่ใน Forum

การสร้างกระทู้ใหม่ใน Forum สามารถทำได้ 2 วิธีหลัก ๆ คือ

1.ไปที่หน้ารวมของห้อง Forum ที่ต้องการ จากนั้น เลือก Post New Forum Topic

create-new-forum-1.gif

2.บนหน้าปรกติทั่วไปของเวป macmuemai.com ตรงส่วน Menu ของ User ทางด้านขวา เลือก Create content แล้วเลือก Forum topic ครับ

create-new-forum-2.gif

จากนั้นก็จะเข้าหน้าสร้างกระทู้ใหม่ลักษณะแบบนี้ครับ

create-new-forum-3.jpg

อธิบาย

  1. ตั้งชื่อกระทู้ ควรจะสั้น ตรงประเด็นและเกี่ยวข้องกับเนื้อหาของโพส ** พยายามหลีกเลี่ยงการตั้งว่า “ช่วยด้วย..” “ด่วน..” หรืออะไรทำนองนี้นะครับ
  2. เลือกห้องสนทนาที่ต้องการ
  3. ถ้าต้องการใส่ตัว smiley ให้คลิ๊กเลือกตรงนี้ จะมีตัวเลือกขึ้นมาครับ ยิ้ม
  4. พิมพ์เนื้อหาที่ต้องการ
  5. จากนั้นเมื่อพิมพ์ทุกอย่างเสร็จเรียบร้อยแล้ว ที่ด้านล่าง กด preview เพื่อทดสอบการแสดงผล ถ้าทุกอย่างเป็นไปตามที่ต้องการแล้วกด Submit เข้าระบบครับ =)

create-new-forum-4.jpg

note : ดูการใช้งานตัวช่วยพิมพ์สำหรับแทรกภาพและจัดการตัวหนังสือเพิ่มเติมได้จาก link นี้ครับ http://macmuemai.com/content/810

การใช้งาน How-To

How To เป็นเหมือนติวเตอร์ที่จะมีเนื้อหาเรียงกันเป็นหมวดหมู่ทำให้อ่านได้ง่าย ๆ ครับ

จะอ่านอย่างเดียวก็ได้ หรือถ้าพบเจอเนื้อหาที่ตกหล่นไป และต้องการจะเพิ่มเติม สามารถกดเพิ่มได้ที่ link ด้านล่าง (add comment) ของหน้านั้น ๆ แล้วจะเปิดหน้าใหม่ขึ้นมาเพื่อใส่ comment ได้ครับ =)

หรือถ้าพบข้อผิดพลาดอย่างอื่นเช่น link เสีย ก็สามารถแจ้งลงใน comment ของแต่ละหน้า หรือจะแจ้งลงในห้อง feedback ใน forum ก็ได้ครับ

ขอให้มีความสุขกับการใช้งาน OS X ครับ =)

ก๊อก

เกี่ยวกับตัวช่วยพิมพ์ และการแทรกภาพลงในโพส

วิธีใช้งานตัวช่วยพิมพ์ที่ใช้อยู่ภายในเวปสำหรับแต่งตัวหนังสือ หรือว่าแทรกรูปลงในโพสครับ

การใช้ตัวช่วยพิมพ์

ใครเคยเล่นเวปบอร์ดพวกตระกูล phpnuke มาก่อน น่าจะคุ้นเคยกับการพิมพ์และการจัดตัวหนังสือแบบมี html tag ติดคู่ไปกับตัวหนังสือด้วย
ตัวระบบที่ผมใช้นี้ก็ไม่หนีกันมากครับ มีตัวช่วยเสริมมาบ้างนิดหน่อย ตามนี้
text-buttons.jpg
1. ปุ่มแทรกรูป
สำหรับแทรกภาพเข้ามาในกล่องข้อความขณะพิมพ์ครับ อธิบายอย่างละเอียดเอาไว้แล้วที่นี่ครับ http://macmuemai.com/content/805
2. ปุ่มแทรก link หรือ URL
เอาไว้สำหรับทำให้ข้อความที่เราต้องการ link ไปยัง URL หน้าเวปที่เรากำหนด วิธีใช้คือ

  1. hi-light ข้อความที่เราต้องการก่อน
  2. แล้วค่อยเลือกปุ่มนี้
  3. จากนั้นใส่ URL ที่เราต้องการลงไป แล้วกด OK ครับ
    1. และ 5. ปุ่มปรับตัวหนา, ตัวเอียง และปรับขนาดหัวเรื่อง วิธีใช้เหมือนกันคือ
  1. hi-light ข้อความที่เราต้องการก่อน
  2. แล้วค่อยเลือกปุ่มนี้
  1. ปุ่มร่นระยะ (Indent)
    จะทำให้ข้อความที่เราพิมพ์ร่นเข้ามาระดับนึง ส่วนมากเอาไว้ใส่พวกคำอธิบายต่าง ๆ ทำให้อ่านได้ง่ายเพราะดูเป็นสัดส่วนครับ - ใช้แล้วจะได้ผลประมาณคำอธิบายของปุ่มนี้ครับ คือจะร่นเข้ามานิดนึง
  2. ปุ่น Quote ข้อความ
    เอาไว้อ้างอิงข้อความจากคำตอบของบุคคลอื่น วิธีใช้ก็
  1. copy ข้อความที่เราต้องการมาลงในกล่องข้อความของเรา
  2. hi-light ตัวข้อความ
  3. แล้วกดปุ่ม quote นี้ครับ

ผลที่ได้จะเป็นประมาณนี้
ทดสอบการใช้ปุ่ม quote ในกล่องพิมพ์ข้อความ
8-9. ปุ่มใส่ list
ปุ่ม 8 เป็นรายการแบบไล่ลำดับ ส่วนปุ่ม 9 เป็นรายการแบบไม่เจาะจงลำดับครับ แบบนี้

  1. ปุ่ม 8 รายการ a
  2. ปุ่ม 8 รายการ b
  3. ปุ่ม 8 รายการ c
  • ปุ่ม 9 รายการ a
  • ปุ่ม 9 รายการ b
  • ปุ่ม 9 รายการ c
  1. ปุ่มตัดส่วน Teaser
    ส่วน Teaser คือส่วนเนื้อหาโดยย่อ ที่เรามักจะเห็นโพสตัดตอนมาจากเนื้อหาเต็ม ๆ ของเวปอีกหน้าหนึ่ง ประมาณหน้าหนึ่งของหนังสือพิมพ์ ที่จะมีเรื่องย่อแล้วให้ตามอ่านต่อที่เหลือเต็ม ๆ ด้านใน เจ้าเรื่องย่อในหน้าหนึ่งนี้คือที่ระบบจะเรียกว่า Teaser ครับ

ปุ่มนี้เอาไว้สำหรับตัดเนื้อหาโดยย่อจากเนื้อหาเต็ม ๆ ของเราเพื่อเอาไว้แสดงผลในหน้าอื่น ใครที่เขียน tutorial เข้าเวปนี้คงอาจจะได้ใช้บ้าง แต่ถึงไม่กำหนดตรงนี้ ผมได้ตั้งให้ทางระบบตัดเนื้อหาโดยย่อให้เองแล้วเหมือนกันครับ แต่บางทีระบบจะตัดคำแบบขาด ๆ เกิน ๆ ก็อาจจะต้องมาใช้ปุ่มนี้ช่วยกำหนดการตัดตอนให้เป็นไปตามที่ควรจะเป็นครับ
11. ปุ่ม Preview
ปุ่มแสดงผลของตัวข้อความเราที่พิมพ์ไปใส่ html tag ไป ถ้าใครอยากจะทราบว่าหน้าตาพอ save แล้วจะออกมาประมาณไหน ก็กดปุ่มนี้ดูก่อนคร่าว ๆ ได้นะครับ หรือจะกดปุ่ม Preview ที่อยู่ด้านล่างของหน้าเวปก็ได้ ให้ผลเหมือนกัน แต่กดจากปุ่มลูกตา (Preview) นี้จะแสดงผลได้เร็วกว่า เพราะไม่ต้องโหลดหน้าเวปใหม่เหมือนปุ่ม Preview ด้านล่างครับ
12. ปุ่น Help
เป็นชื่อรวมของทุกปุ่มว่ามีชื่อว่าอะไรบ้าง สำหรับคนที่ยังไม่คุ้น และอาจจะลืมว่าแต่ละปุ่มเอาไว้ทำอะไรนะครับ เอาไว้ดูเตือนได้จากตรงนี้
หมดแล้วครับ หวังว่าคงช่วยให้ใช้งานพิมพ์ได้สะดวกมากขึ้นนะครับ =)

การแทรกภาพลงในกระทู้ (โพสแรก) #1 - แบบละเอียด

นี่เป็นการแทรกภาพลงในกระทู้ สำหรับโพสแรกของกระทู้นั้น ๆ นะครับ (ไม่ใช่ส่วน comment)

ที่เราต้องทำคือทำการ upload ภาพเข้ามาในกระทู้ผ่านตัวช่วยพิมพ์แบบใหม่ (อ่านการใช้งานตัวช่วยพิมพ์แบบใหม่บนเวปแบบอื่น ๆ ได้ที่นี่ครับ http://macmuemai.com/content/806)

การแทรกภาพในกระทู้

ในหน้าพิมพ์กระทู้ปรกติ

forum-isrt-img-02.jpg

ขั้นตอนที่ 1. คลิ๊กปุ่ม Insert/edit image (อันซ้ายมือสุด)
ขั้นตอนที่ 2. เลือก Browse จากนั้นจะมีหน้าต่างใหม่แสดง Pop up ขึ้นมา ให้ทำตามขั้นตอนด้านล่างนี้ไปเรื่อย ๆ นะครับ (สำหรับผู้ใช้ Safari ที่ block pop up windows เอาไว้ เค้าจะเปิดหน้าเวป เป็น Tab ใหม่ขึ้นมาครับ)

note : ถ้าเราต้องการแทรกภาพจาก URL ที่เรามี (link ภาพมาจากเวปฝากภาพหรือเวปอื่น) ให้นำ URL ของภาพนั้นมาแป่ะในช่อง Image URL แล้วกด OK ได้เลย .. ส่วนถ้าใครต้องการส่งภาพเข้าระบบของแมคมือใหม่โดยตรง ให้ทำตามขั้นตอนที่เหลือด้านล่างนี้นะครับ..

forum-isrt-img-04.jpg

ขั้นตอนที่ 3. คลิ๊กปุ่ม Upload เพื่อแสดงช่องสำหรับ upload ไฟล์เข้าระบบครับ
ขั้นตอนที่ 4. ทำการเลือกไฟล์ภาพที่ต้องการ
ขั้นตอนที่ 5. คลิ๊ก Upload เพื่อส่งไฟล์ภาพเข้าระบบ
ขั้นตอนที่ 6. เมื่อไฟล์ภาพถูก upload เข้าระบบแล้ว เราจะเห็นแสดงอยู่ในรายการทางด้านขวา และแสดงภาพ preview ในด้านล่าง (ถ้าต้องการ upload ภาพมากกว่า 1 ภาพ สามารถทำซ้ำขั้นตอนที่ 4-5 ใหม่ได้เรื่อย ๆ จากตรงนี้ครับ)
ขั้นตอนที่ 7. เมื่อ upload ภาพทุกอย่างเรียบร้อยแล้ว คลิ๊ก Send to Bueditor เพื่อส่งภาพที่เราเลือกเอาไว้นี้ กลับไปยังตัวช่วยพิมพ์ในตอนแรก (สำหรับผู้ใช้ Safari เมื่อคลิ๊กแล้ว เค้าจะเหมือนไม่มีอะไรเกิดขึ้น ให้กลับมาดูใน Tab ที่แล้วครับ)

forum-isrt-img-01.jpg

ขั้นตอนที่ 8. จากนั้นคลิ๊ก OK
ขั้นตอนที่ 9. เราจะกลับมาที่หน้าเวปตอนพิมพ์ปรกติเราจะเห็นว่า มี code ของไฟล์ภาพที่เราต้องการแป่ะอยู่ในกล่องข้อความของเราแล้ว ให้คลิ๊กปุ่ม Preview (รูปลูกตาที่ลูกศรชี้ไว้ในภาพ) เพื่อเป็นการ preview โพสของเราโดยที่ไม่ต้อง refresh หน้าจอใหม่ เราจะเห็นแบบนี้ครับ

forum-isrt-img-05.jpg

จากนั้น ถ้าใครต้องการจะแทรกภาพตรงไหน ก็ให้ทำซ้ำแบบเดิมจาก 1-8 ครับ (ไม่จำเป็นต้อง Preview ทุกครั้งก็ได้)

ถ้าทุกอย่างเป็นไปตามที่ต้องการแล้ว ที่ด้านล่าง คลิ๊กปุ่ม Submit เพื่อเป็นการยืนยันส่งกระทู้เข้า Forum ครับ

note : ควรจะตั้งชื่อไฟล์ใหม่ด้วยทุกครั้ง เพื่อเป็นการหลีกเลี่ยงชื่อไฟล์ซ้ำซ้อนในระบบ และทำให้ภาพหายครับ

การแทรกภาพลงในกระทู้ (โพสแรก) #2 - อย่างง่าย

เป็นอีกวิธีสำหรับการแทรกภาพลงในกระทู้ ที่มีขั้นตอนน้อยกว่า<a <a href="href="http://macmuemai.com/content/805">แบบแรกที่ผมเคยโพสไปพอสมควรครับ แต่ว่าเราจะไม่เห็นภาพที่จะโพสจนกว่าจะกดปุ่ม preview นะครับ

วิธีโพสภาพลงในโพสแรกของกระทู้อย่างง่าย

ขั้นตอนที่ 1

ไปที่ด้านล่างของกล่องข้อความ หัวข้อ File Attachments ครับ เมื่อคลิ๊กเข้าไปจะมีช่องให้ upload ภาพเข้าระบบ

file-attch-1_0.jpg

คลิ๊ก Browse.. เพื่อเลือก upload ภาพที่ต้องการ จากนั้นกด Attach เพื่อส่งไฟล์เข้าระบบ

ขั้นตอนที่ 2

เมื่อ upload ไฟล์ภาพเข้าระบบแล้ว เราจะเห็นไฟล์ภาพที่เรา upload แล้วแสดงขึ้นมาในรายการ พร้อมทั้งมี url ของภาพนั้น ๆ ที่ด้านล่างของชื่อภาพอีกด้วย

file-attch-2.jpg
1.ให้ติ๊กช่อง List (บริเวณวงกลมที่เห็นในภาพ)ออก
2.copy url ด้านล่างของภาพเก็บเอาไว้

ขั้นตอนที่ 3

ที่ตัวช่วยพิมพ์ ให้เลือกปุ่มแทรกภาพ (ด้านซ้ายสุด)

file-attch-3.jpg

จากนั้นนำ url ของภาพที่เรา copy มาใส่ลงไป จากนั้นกด OK

file-attch-4.jpg
จากนั้นในกล่องข้อความ เราจะเห็น code ของภาพเราแสดงขึ้นมาครับ (จากภาพประกอบ ส่วนที่ hi-light สีฟ้าเอาไว้ครับ)

file-attch-5.jpg

เมื่อเสร็จตรงนี้แล้ว ให้ลองกดปุ่ม Preview โพสดูนะครับ ถ้าไม่มีอะไรผิดพลาด เราจะเห็นภาพของเราขึ้นมาแล้ว ยิ้มปากกว้าง

การแทรกภาพลงใน Comment

สำหรับการแทรกภาพลงในส่วน Comment เท่านั้นนะครับ ..ถ้าต้องการแทรกภาพลงในโพสปรกติ ให้ดูที่ link นี้ครับ http://macmuemai.com/content/805
------------------------------
ที่ด้านล่างของแต่ละกล่อง comment จะเห็นหัวข้อ File Attachments อยู่ ให้คลิ๊กเลือก
Choose File เพื่อเลือกไฟล์จากในเครื่องและเลือก Attach เพื่อทำการ upload ภาพที่ต้องการ
comment-w-pc-1.png
note :

  1. ภาพควรจะขนาดกว้างไม่เกิน 550px และขนาดไม่เกิน 120KB ต่อภาพ
  2. ภาพที่ถูก upload เข้าไปจะแสดงอยู่ด้านล่างของข้อความใน comment เสมอ ตามรูปด้านล่างนี้ครับ =)

comment-w-pic.jpg

การใส่สีให้ข้อความ

เวปนี้รองรับการใส่สีแบบ BB Code ครับ ซึ่ง BB Code นี้จะคล้าย ๆ HTML tag ทั่วไป แต่จะสั้นกว่า และใช้ง่ายกว่า มีรูปแบบการใช้งานดังนี้

note : เวลาใช้จริงไม่มี "จุด" ระหว่างตัว c กับตัว o นะครับ

ใส่ [c.olor=สีที่เราต้องการ] ลงก่อนหน้าข้อความ และ [/c.olor] ปิดท้ายข้อความครับ ... แบบนี้

[c.olor=red] ข้อความที่เราต้องการ [/c.olor]

ตัวอย่าง
sample-bluetxt.png
จะได้ = ข้อความนี้สีน้ำเงิน

เราสามารถแทนที่สีด้วยคำภาษาอังกฤษบ้าน ๆ ธรรมดาเช่นพวก Red, Darkred, blue, darkblue, pink, green ... หรือจะเจาะจงเป็นสีแบบ hex code เช่น #AA0011 ก็ได้ครับ =)

การทำข้อความให้เป็น Link ไปยัง URL ที่กำหนด

ตามปรกติ ถ้าเราพิมพ์ URL ลงไปตรง ๆ ระบบจะทำการเปลี่ยนเป็น Link ให้โดยอัตโนมัติครับ เช่น

พิมพ์ว่า www.macmuemai.com
จะได้
www.macmuemai.com

แต่ถ้าเราต้องการจะทำข้อความให้เป็น link ไปยัง URL ที่ต้องการให้ทำดังนี้

  • เลือก hi-light ตัวข้อความที่เราต้องการจะสร้าง link
  • คลิ๊กเลือกปุ่ม URL (icon ที่สองนับจากซ้ายมือ)
  • จากนั้นใส่ URL ที่เราต้องการลงไปในกล่องบรรทัดแรก
  • กด OK

sample-url.jpg
เราจะได้ ข้อความที่เป็น link ไปยัง URL ที่ต้องการแล้วครับ
note :

  1. เวลา preview ด้วยปุ่มรูปลูกตา จะไม่แสดง URL ที่คลิ๊กได้นะครับ แต่จะเห็นเมื่อกด save ข้อความเข้าระบบแล้ว
  2. URL ที่ใช้ได้ จะต้องมี http:// นำหน้าเสมอ

การ quote ข้อความ

การ quote ข้อความหรือการยกข้อความของโพสอื่นมาเพื่ออ้างอิง สามารถทำได้ตามขั้นตอนที่ผมอธิบายเอาไว้ใน link นี้นะครับ

http://macmuemai.com/forum/topic/817#comment-4484

เกี่ยวกับ แมคมือใหม่.คอม

หัวข้อนี้จะเป็นการใช้งานทั่วไปและ FAQ, About หรือเรื่องอื่น ๆ ที่เกี่ยวกับ แมคมือใหม่.คอม ครับ

เบื้องหลังการออกแบบ แมคมือใหม่.คอม # 1

เนื้อหานี้เขียนขึ้นหลังจากที่ได้อัพเดทเวป พร้อมกับเปลี่ยนตีมของแมคมือใหม่.คอมเรียบร้อยแล้วในวันที่ 22 มีนาคม 2552

เป็นเวลาสักระยะหนึ่งแล้วที่ผมเปิดเวปนี้มา หลังจากใช้งานมาได้สักระยะผมพบว่า รูปแบบเวปเดิมมีข้อจำกัดอยู่หลายส่วน เลยเป็นที่มาที่ผมต้องการที่จะแก้ปัญหาที่มีอยู่เดิม คิดว่า ตรงนี้น่าจะเป็นข้อมูล หรือ case study ให้กับผู้ที่สนใจเกี่ยวกับการทำเวป หรือการออกแบบเวปได้บ้าง ไม่มากก็น้อยครับ

มาเริ่มกันต้องแต่ต้นนะครับ =)

ตอนแรก ผมเลือกอยู่นาน ว่าจะให้เวปออกมาในรูปแบบไหน โดยมีโจทก์ในตอนต้นคือ เวปต้องอ่านง่าย เพราะเน้นเกี่ยวกับเนื้อหา.. และที่สำคัญ คือต้องอ่านหน้าเวปนาน ๆ ได้โดยไม่ปวดตา เพราะเนื้อหาส่วนใหญ่เป็นเรื่องที่ต้องทำความเข้าใจ ซึ่งผู้อ่าน น่าจะใช้เวลาอยู่หน้าเวปมากกว่าการใช้งานปรกติ (เทียบกับอ่านข่าว นะครับ )

ผมเริ่มต้นจากการทำหน้าเวปออกเป็น 2 ส่วนในตอนแรก เพราะผมต้องการความ compact และไม่ได้คิดว่าเนื้อหาในเวปจะมีมากขึ้นเหมือนที่เป็นอยู่ในปัจจุบันนี้... โดยรูปแบบตอนแรกหน้าเวปจะเหมือนกับ blog ปรกติ ที่จะมีเนื้อหาอยู่ที่ด้านขวา และพวก tag หรือเมนูอยู่ทางด้านซ้ายของตัวเวป .. เวลา 3 เดือนผ่านไปโดยประมาณ เวปแมคมือใหม่เริ่มมีเนื้อหาและ tag มากขึ้นเรื่อย ๆ ทำให้เริ่มที่จะดูลำบากกับรูปแบบ 2 ส่วนแบบเดิมนี้ เพราะว่าต้องเลื่อนขึ้นลงบ่อย ๆ ในการตามว่ามีอะไรเกิดขึ้นบ้างในเวป

จากตรงนั้นผมเลยแบ่งหน้าตาเวปออกเป็น 3 ส่วน คือมี sidebar 2 ด้าน (ซ้าย - ขวา) เพื่อแยกส่วนของข้อมูลออกเป็นชุด ๆ ตามภาพนี้

MacMueMai_com_1.jpg

แลกมาด้วยต้องเปิดหน้าต่าง browser ที่กว้างขึ้น แต่สะดวกขึ้นในการมองภาพรวมของเวป

ปัญหาเกิดเมื่อใช้งานไปได้สักระยะนึงแล้ว จริง ๆ เป็นมาตั้งแต่ต้น เพราะรูปแบบตีมที่ผมเลือกใช้ เป็นตีมแบบสำเร็จรูป และบวกกับตอนนั้น ผมยังทำตีมเวปเองไม่เป็น ทำให้ต้องใช้งานมาเรื่อย

ปัญหาที่ว่านี้คือ เนื้อที่ของ sidebar ด้านข้าง กว้างไม่มากพอให้แสดงเนื้อหาที่ผมต้องการได้ .. ที่เกิดขึ้นคือ เมื่อเข้า link ไปอ่านในส่วนของ How-To ลึก ๆ แล้ว ตัว list หรือว่ารายการเนื้อหาจะเร่ิมแสดงผลซ้อนกันหลายบรรทัด ทำให้อ่านไม่รู้เรื่อง และดันหน้าเวปส่วนอื่น ๆ ให้ร่นลงไปเกินจำเป็น ผมจะลองยกตัวอย่างให้เห็นภาพง่าย ๆ ก็แล้วกันนะครับ

หน้าเวปเดิม แสดงผลแบบนี้
- หัวข้อ How-Tos
อันที่ 1
- หัวข้อ How-Tos
อันที่ 2 : เรื่องเกี่ยว
กับ ABCDE
- หัวข้อ How-Tos
อันที่ 2 : เรื่องเกี่ย
วกับ FGHIGKL
MNOP
- หัวข้อ How-Tos
อันที่ 2 : เรื่องเกี่ยว
กับ FGHIGKLM
NOP

และนี่เป็นสิ่งที่ผมอยากให้เป็น

- หัวข้อ How-Tos อันที่ 1
- หัวข้อ How-Tos อันที่ 2 : เรื่องเกี่ยวกับ ABCDE
- หัวข้อ How-Tos อันที่ 2 : เรื่องเกี่ยวกับ FGHIGKLMNOP
- หัวข้อ How-Tos อันที่ 2 : เรื่องเกี่ยวกับ FGHIGKLMNOP

ตรงนี้เลยเป็นข้อจำกัดของ ตีมเดิมที่พื้นที่ไม่พอ และขอบของแต่ละ block ที่มีอยู่ ผมคิดว่า น่าจะเอามาแสดงเนื้อหาให้มากขึ้นได้ ... ผมคิดว่า น่าจะหาทางออกให้ใช้ Screen real estate ได้ดีขึ้นกว่าที่เป็นอยู่

คำตอบที่ผมคิดได้คือ เวปที่มีเนื้อหา / รูปแบบเฉพาะแบบนี้ จะดีที่สุดคือ ต้องมีตีมเฉพาะ ซึ่งนั่นก็หมายความว่า ผมต้องทำตีมขึ้นมาใหม่เอง .. ตรงนั้น ทำให้ผมเริ่มต้นที่จะเรียนรู้ HTML, CSS, PHP เพื่อเอามาใช้งานการทำตีมให้แมคมือใหม่.คอม ครับ..

ผมไม่ได้เรียนหรือว่ามีพื้นฐานทางด้านการเขียนโปรแกรมมาก่อน ตรงนี้เลยทำให้เสียเวลามากกว่าคนอื่นที่มีพื้นฐานทางด้านนี้มาบ้างแล้ว แต่ผมคิดว่าผมรู้ปัญหา และผมอยากจะแก้สิ่งที่มีอยู่ด้วยตัวของตัวเอง คงมีคนถามว่าทำไมผมไม่จ้างคนอื่น หรือให้มืออาชีพมาทำให้

ผมคิดว่า คำตอบสำหรับเรื่องนี้คือ ผมรักเวปนี้มากจนผมอยากที่จะทำเองครับ .. ผมอยากให้เวปนี้พิเศษในแบบที่ไม่ค่อยมีใครทำกัน (เป็นประมาณว่า ถ้ามีบ้านก็อยากที่จะตกแต่งเองครับ ยิ้ม)

  • คงมีไม่กี่เวป community ในประเทศไทย ที่คนทำเวป นั่งวาด อีโมชั่นไอคอนขึ้นมาไว้ใช้เอง (อันที่ใช้กันอยู่ใน macmuemai.com นี้ เป็นเซทที่ไว้ใช้ที่เดียวในโลกครับ แบร่..)
  • คงมีไม่กี่เวป community ในประเทศไทย ที่คนทำเวป ไม่เคยสนใจเรื่อง SEO หรือว่า Flash
  • คงมีไม่กี่เวป community ในประเทศไทย ที่คนทำกราฟฟิก กับคนทำโปรแกรมทำงานร่วมกันได้ 100% แบบนี้ เพราะทำคนเดียวเลย ฮ่า... ถามเอง ตอบเอง แก้ปัญหาเอง
  • และสุดท้ายคงมีไม่กี่เวป community ในประเทศไทย ที่ถูกสร้างขึ้นมาด้วยคนที่ทำตีมขึ้นมาเอง =)

ผมคิดว่า ถ้าผมเริ่มต้นจากตรงนี้ อนาคตจะไปทำงานกับใครก็น่าจะง่ายกว่าอยู่ ๆ ไปจ้างเขาเลย อย่างน้อย ทำให้ผมพอจะมีความรู้พื้นฐานไปสื่อสารกับคนทำงานอีกด้านหนึ่งบ้าง .. ซึ่งนั่นน่าจะดีกว่าในความคิดผมครับ

พอเท่านี้ก่อน เดี๋ยวมาเขียนต่อวันหลังนะครับ =)

เบื้องหลังการออกแบบ แมคมือใหม่.คอม #2

มาต่อกันตอนที่ 2 ครับ .. ในตอนนี้จะเป็นเรื่องเกี่ยวกับการดีไซน์ Layout หลักของหน้าเวป

จากความเดิมตอนที่แล้ว ผมต้องการที่จะให้ส่วนของ How-To มีพื้นที่ ๆ มากเพียงพอสำหรับเวลา browse เข้าไปลึก ๆ แล้วยังดู link ได้รู้เรื่องอยู่ หรือถ้าต้องตัด link เป็นบรรทัดใหม่ ก็อยากให้มีตรงนี้ให้น้อยที่สุด

ตรงนี้เลยเป็นที่มาว่า ทำไมต้องทำ block ทางด้านขวาให้ใหญ่ขึ้นกว่าเวปทั่วไปครับ

ต่อจากนั้น มีอีก 2 ประส่วนหลัก ๆ ที่ผมต้องการที่จะทำกับการดีไซน์ layout ของหน้าเวปใหม่ คือ

  • ทำอย่างไร จึงจะยังคงส่วนของ tag ในรูปแบบเดิมได้ (แบบที่ list เป็นคำลงมายาว ๆ อย่างที่เห็นนนี่ล่ะครับ) แล้วนำมาใช้กับ layout ใหม่ โดยที่มีความสำคัญระดับ 2 คือไม่ใช่สิ่งที่คนทั่วไป หรือสมาชิกที่เข้าบ่อย ๆ จะรู้สึกรำคาญ แต่ก็ต้องอยู่ในตำแหน่งที่ ถ้าเกิดต้องการค้นหาแล้ว สามารถทำได้โดยสะดวก
  • ทำอย่างไรให้ขยายพื้นที่ของโพสปรกติได้มากขึ้น - ตรงนี้สำหรับสมาชิกใช้งานครับ เพราะลำพังขนาดหน้าเวปเดิม ส่วนเนื้อหา how-to หรืออื่น ๆ สามารถแสดงผลได้เพียงพออยู่แล้ว แต่ที่ผมต้องการขยายตรงนี้ขึ้นไปอีกเพราะว่า ถ้าสมาชิกต้องการจะแทรกรูปเพื่อถามปัญหา จะได้แทรกรูปได้ใหญ่ขึ้น จึงทำให้น่าจะได้รับคำตอบที่ตรงและเร็วขึ้นตามมา

มาที่การปรับใช้

จัดการกับส่วนของ tag

tag-list-1.png

โดยความรู้สึกส่วนตัว ผมชอบ tag ในรูปแบบปัจจุบันที่เป็นอยู่มากกว่าการทำเป็น tag cloud หรือกลุ่มข้อความเล็กใหญ่ปนกันตามจำนวนของเนื้อหาที่เกี่ยวข้องกับ tag นั้น ๆ

การทำ tag cloud นั้นผมเชื่อว่า เอาไว้สำหรับการแสดง tag โดยรวมแบบที่เสียพื้นที่ที่หน้าจอน้อยที่สุด .. ผมคิดว่าตรงนั้นเค้าทำได้ และดีด้วย แต่มันไม่ make sense สำหรับการนำมาใช้กับเวปแมคมือใหม่ โดยเฉพาะกับคำเฉพาะ ที่บางครั้งมีหลายพยางค์ และถ้านำมารวมกันเป็น tag cloud แล้วจะพาให้อ่านไม่รู้เรื่อง .. สุดท้ายคืออาจจะออกมาเก๋ไก๋ แต่ใช้งานจริงลำบาก

ผมเลยเลือกที่จะคงรูปแบบ tag แบบ list ตามเดิมเอาไว้ และตรงนี้เป็นส่ิงที่ยาก เพราะตัว tag list นี้ กินพื้นที่ไม่กว้างมากนัก แต่เรียงกันลงมาเป็นแถวยาวพอสมควร ทำให้ผมต้องหาทางแทรกเอาไว้ตรงไหนสักที่หนึ่งในหน้าเวป

ไอเดียแรกเลยคือ เอา tag list นี้ไปไว้เป็น sidebar นึงแยกต่างหากไปเลย รวมแล้วแบ่งหน้าเวปเป็น 3 ส่วน

  • tag list อยู่ใน sidebar ทางด้านซ้ายกว้าง 10% ของหน้าเวป
  • เนื้อหาหลัก กว้างประมาณ 50% ของหน้าเวป และสุดท้าย
  • how to และ block ของเนื้อหาอื่น ๆ อยู่ใน sidebar ท้างด้านขวา กว้างประมาณ 40% ของหน้าเวป

เป็นประมาณนี้ครับ

ด้านซ้าย                                 ตรงกลาง                                                  ด้านขวา
| -tag list-| ------------------ เนื้อหาหลัก----------------------| -------------how to และ เนื้อหาอื่น ๆ ---|
| -tag list-| ------------------ เนื้อหาหลัก----------------------| -------------how to และ เนื้อหาอื่น ๆ ---|
| -tag list-| ------------------ เนื้อหาหลัก----------------------| -------------how to และ เนื้อหาอื่น ๆ ---|

ทำให้อ่านง่าย แยกต่างหาก เป็นเอกเทศ แต่... จะทำให้หน้าเวปแบ่งออกมาไม่เท่ากัน (sidebar ซ้าย กับด้านขวา คนละขนาดกันแบบเห็นได้ชัดเจน 10:40) ตรงนี้ทำให้ผมคิดหนัก ว่าจะลองแบ่งแบบนี้ดูดีหรือไม่ .. หลังจากลองอยู่พักใหญ่ เรื่องการแบ่งแยกเนื้อหาทำได้ค่อนข้างลงตัว แต่ผมพบว่า ด้วยลักษณะหน้าเวปที่แบ่ง 3 ส่่วนไม่เท่ากันเลยแบบนี้ พอใช้งานไปสักระยะ จะเริ่มเมื่อยลูกตาครับ เพราะจะมีความรู้สึกว่า ตัวเวปเอียงไปทางด้านใดด้านหนึ่งนิด ๆ อยู่ตลอดเวลา

เป็นความรู้สึกที่มีขึ้นมาทีละนิด และจะทำให้หงุดหงิดได้เมื่อผ่านไปสักระยะเวลาหนึ่ง ผมเลยต้องล้มแผนแยก sidebar แบบสองฝั่งไม่เท่ากันนี้ไป

หลังจากคิดและหาทางออกอยู่กับเรื่อง tag อยู่นาน ผมสังเกตว่า ถ้า sidebar ส่วน how-to มีขนาดที่กว้างแล้ว แต่ block ของเนื้อหาอื่น ๆ ไม่ได้จำเป็นต้องการพื้นที่ด้านกว้างขนาดนั้น ผมเลยลองทำเฉพาะส่วน how-to ให้มีขนาดตามที่ต้องการ แล้วลองแทรก เนื้อหาอื่น ๆ ต่อลงมาด้วยขนาดที่เล็กลง เลยได้ออกมาตามที่เห็นในปัจจุบันแบบนี้ครับ

เป็นความบังเอิญที่ค่อนข้างไปกันได้ดีในระดับนึง และการจับ tag มารวมไว้ใน sidebar ด้านขวาที่เดียวกันนี้ ยังให้ผลตามมาอีก คือเนื้อหาที่แยกยิบย่อยก็จะกระจุกรวมกันอยู่ในที่เดียว

ตรงนี้มี feedback จากสมาชิกที่ใช้งานในเวปอยู่ 2 แบบ มีทั้งชอบ และไม่ชอบผมคงไม่ไปถึงตรงนั้น แต่ผมอยากจะอธิบายเหตุผลเพิ่มเติมว่าทำไมถึงยังเลือกที่จะเดิน layout แบบนี้อยู่

คือผมต้องการสร้าง layout ที่มีหลายมิติในลักษณะแบบที่ว่า ถ้าคุณไม่ใส่ใจ มันก็จะไม่เกี่ยวข้องการกับมองของคุณครับ ผมคิดว่าการนำพวก tag หรือข้อมูลจิปาถะอื่น ๆ ของเวปมารวมกันไว้ด้านใต้ how-to จะทำให้คนอ่านแยกแยะได้ง่ายขึ้น .. ที่ถึงว่า หน้าเวปจะดูรก แต่ถ้าคุณไม่มองมันก็จะไม่รก และด้วยเนื้อหาหลักที่อยู่ทางด้านซ้าย และธรรมชาติการอ่านของคนเราเริ่มจากซ้ายมือเสมอ .. ตรงนี้ทำให้ผมเลือกที่จะเก็บอะไรรก ๆ เอาไว้ทางขวามือครับ

แต่ในขณะเดียวกัน ถ้าคุณต้องการค้นหาอะไรสักอย่างนึงในเวป การมาคุ้ยตรงส่วนรก ๆ นี้ช่วยคุณได้แน่นอน .. ผมเห็นมาหลายเวป ที่ออกแบบเรียบร้อย และให้สมาชิกค้นหาจากช่อง search ... ปัญหาส่วนใหญ่ที่เจอคือ “คนไม่หา” ครับ ไม่ว่าจะด้วยระบบ index คำไทย ๆ ที่ไม่ค่อยดี หรือผู้ใช้งานเองที่ไม่รู้จะระบุคำค้นหาว่าอะไร

การมี tag list สามารถช่วยผู้ใช้งานเวปให้เริ่มต้นค้นหาได้ง่าย และรวดเร็วขึ้นหลายเท่า และยังได้รับทราบเนื้อหาอื่น ๆ ที่เกี่ยวข้องกันได้อีก ซึ่งผมมองว่าเป็นการเติมเต็มความสมบูรณ์ของเนื้อหาที่ผู้ใช้งานต้องการ โดยที่ไม่รู้ตัว และเป็นสิ่งที่ระบบ search ธรรมดาให้ตรงนี้ไม่ได้ เปรียบเหมือนคุณไปนั่งในร้านข้าว .. ร้านไหนมีเมนู คุณจะสั่งของได้ง่าย และเร็วกว่านั่งนึกเอง

ไม่ใช่ว่าระบบ search ไม่ดี

แต่ธรรมชาติแล้ว คนที่จะใช้งานระบบ search หรือเรียนรู้อะไรสักอย่างจากระบบ search เปล่า ๆ เพียงอย่างเดียวได้นั้น มีน้อยมาก เพราะข้อมูลที่ได้รับจากการ search มักจะเป็นชิ้นเล็กชิ้นน้อย ที่ถ้าผู้ใช้งานต้องการทำความเข้าใจเรื่องอะไรสักอย่างนึง เค้าจำเป็นต้องนำข้อมูลชิ้นเล็ก ๆ ที่ได้พวกนั้นมาเรียงต่อกันเอง

ตรงนี้ และจากประสบการณ์ที่เห็นเวปบอร์ดมีคนถามปัญหาซ้ำซ้อนเกิดขึ้นอยู่บ่อย ๆ ทำให้ผมเลือกที่จะคงระบบ tag list เอาไว้ เพื่อช่วยผู้ใช้งานให้ค้นหาได้ง่าย และได้ข้อมูลที่ครบถ้วนมากขึ้นครับ ถึงมันจะทำให้ดูรถในภาพรวมบ้าง แต่ประโยชน์มีมากกว่าโทษ ครับ

การจัดการกับเนื้อหาหลัก

และจากการรวมทุกอย่างไว้ที่ sidebar ทางด้านขวา ทำให้ผมเหลือพื้นที่การใช้งานสำหรับเนื้อหาหลักของเวปเพิ่มมากขึ้นเป็นผลพลอยได้ ถือว่าเป็นความบังเอิญ ที่ได้มา 2 เด้งพอดี

ก่อนหน้าความบังเอิญนี้ ผมมีโจทก์ที่อยู่ในใจเกี่ยวกับการจัดการเนื้อหาหลักประมาณนนี้ครับ
ทำให้อ่านง่าย และอยู่กับเนื้อหารก ๆ ได้โดยที่ยังเด่นอยู่ เพราะผมรู้ว่า tag list หรืออะไรอื่น ๆ ทางด้านขวา จะทำให้ดูรกบ้าง แต่ผมเองไม่อยากจะแบ่งเนื้อหาเวปด้วยสีครับ (อย่างน้อยก็ในตอนนี้) เพราะคิดว่า แบ่งด้วยสีแล้วจะให้ความรู้สึกว่าแคบลง ผมเลยปล่อยขาว ๆ เอาไว้

จากตรงนี้ ผมได้ลองเพิ่มเนื้อหาด้านล่างของหน้าเวปไปอีก 3 ส่วน คิดว่าน่าจะทำให้สมาชิกที่อ่านผ่าน ๆ ได้เจอเนื้อหาอะไรใหม่ ๆ บ้าง จาก block ด้านล่างนี้

จากทั้งหมด ผมเลยสรุปออกมาเป็น layout ปัจจุบันตามที่เห็น ณ ตอนนี้ครับ =)