การออกแบบ หน้าแรกของ 7 เว็บไซต์ข่าวเทคโนโลยี

ตอนที่จะเปลี่ยนธีมใหม่ให้บล็อก มีอย่างหนึ่งที่อยากรู้คือส่วนใหญ่แล้วเว็บไซต์ดังๆเขาออกแบบหน้าแรกยังไง เว็บไซต์ส่วนใหญ่ที่เข้าไปดูเป็นประจำก็คงหนีไม่พ้น 7 เว็บไซต์นี้ คือ AllThingsD, Engadget, Gizmodo, Mashable, SlashGear, TechCrunch และ The Verge ซึ่งสิ่งที่สนใจคือ หน้าแรกที่เราเปิดเข้ามาเจอเลย โดยที่ยังไม่เลื่อนลงด้านล่าง

ก็ใช้เครื่องตัวเองเป็น reference คือ แสดงผลใน Google Chrome ขนาดจอ 1280 x 800  ดังนั้นเอาทั้ง 7 เว็บไซต์มาดูทีละอัน ซึ่งเว็บไซต์ที่ชอบหน้าแรกมากที่สุด ขอยกให้ AllThingsD ส่วนเว็บไซต์อันอื่นดูดีในแบบของตัวเอง แต่ที่ชอบน้อยที่สุดก็ขอยกให้ SlashGear ที่ไม่ค่อยมีเอกลักษณ์มากนัก

ลองมาดูหน้าแรกของแต่ละเว็บไซต์

AllThingsD

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

TechCrunch

TechCrunch มีโพสที่เป็นเรื่อง Hot Topic ให้เลือกคลิกอยู่ 4 เรื่อง แล้วก็เหลือบเห็นหัวข้อของโพสด้านล่างโผล่มานิดหน่อย ด้านบนยังมีเมนู และหมวดหมู่ให้คลิกได้ ที่น่าสนใจอีกอย่างคือทำส่วนของโฆษณาได้ลงตัวกลมกลืนไปกับเนื้อหา ดูมีช่องว่าง ไม่แออัดจนเกินไป

The Verge

The Verge  เป็นอีกเว็บหนึ่งที่ชอบ ทำหน้าแรกออกมาได้ค่อนข้างน่าสนใจ มีหัวข้อที่เป็นฟีเจอร์อยู่ด้านหน้ามีภาพประกอบโพสและสีพื้นหลังจางๆ มีหัวข้อให้คลิก มีช่องค้นหา ไม่มีโฆษณาให้เห็น

Gizmodo ดูเรียบๆ มองเห็นโพสอันใหญ่โดดเด่นอันเดียว มีโฆษณาเด่นที่ด้านขวา มองเห็นโพสล่าสุดด้านขวาประมาณ 3 อัน เป็นหน้าแรกที่เรียบและดูดีทีเดียว

Mashable

Mashable เน้นเรื่องการแชร์มาก แทบทุกโพสจะมีลิงค์แชร์ บางครั้งทำให้ดูรกตาไปหน่อย แต่มีโพสจุดเด่นอันใหญ่อันหนึ่ง กับอีกสองอันด้านข้าง มีลิสต์ของ Most shared ให้เห็น มีโฆษณาชัดเจนเป็นแบนเนอร์ด้านบนแต่ค่อนข้างกลมกลืน

Engadget

Engadget มีส่วนของแบนเนอร์โฆษณาที่อยู่ด้านบนเหมือนเป็นส่วนเกินของเว็บไซต์ไปเลย แต่ค่อนข้างดึงดูดให้คนดูเป็นพิเศษ และยังกระตุ้นให้ต้องเลื่อนลงข้างล่างด้วยสิ แต่ส่วนตัวไม่ค่อยชอบเท่าไหร่นัก ความฉลาดในการออกแบบอีกอย่าง นั้นคือการเอาโพสมาเป็นส่วนเฮดเดอร์ที่เปลี่ยนไปเรื่อยๆ มีเมนูหมวดหมู่ให้คลิก มี Top Stories ให้เลือก

SlashGear

SlashGear คล้ายกับ Engadget มีโฆษณาอยู่ด้านบนอย่างชัดเจน แต่ไม่น่าดึงดูดเท่า มีฟีเจอร์โพสเรียงกันให้เลื่อนซ้ายขวาได้ มีเมนูของหมวดหมู่ และมองเห็นหัวข้อใหญ่ของโพสล่าสุดโผล่มานิดหน่อย

สรุป 
แต่ละเว็บมีแนวทางของตัวเองชัดเจน มีสีเฉพาะตัว มีโพสที่น่าสนใจไว้เด่นที่สุด เป็นกรณีศึกษาที่ดีได้ทั้งสิ้น แล้วเอามาปรับใช้กับเว็บของตัวเองต่อไป

เปลี่ยนธีมอันใหม่ให้บล็อก

ธีมตัวเก่า Wide Blog Happens Theme โดย @imenn

ธีมตัวเก่าใช้มาเกือบจะ 4 ปี แล้ว ใช่ว่าไม่อยากเปลี่ยนธีมใหม่ให้ทันสมัยนะ แต่เหตุผลหลักๆที่ทำให้ไม่ได้เปลี่ยนสักที พอสรุปได้ดังนี้ครับ

  • Hard code ลงในธีมเยอะมาก ทั้งใน header.php , page.php, post.php จะเปลี่ยนทีต้องใช้เวลานานพอสมควรเลย
  • ภาพที่ใช้ประกอบในบล็อก ค่อนข้างทำ size ให้เหมาะกับธีมเดิม ต้องหาธีมที่กระทบกับโพสอันเก่าให้น้อยที่สุด คงไม่มีทางมานั่งแก้โพสเกือบ 500 โพสให้เข้ากับธีมใหม่แน่ๆ ตัวเลือกเลยน้อยลงไปอีก
  • โพสอันเก่าไม่ได้ทำ feature image ไว้เลย แต่ใช้ plugin เป็นตัวช่วยดึงมา ธีมสมัยใหม่จะใช้ข้อมูลอันนี้เกือบหมดแล้ว เป็นอีกหนึ่งเหตุผลที่จะทำให้โพสอันเก่ามีปัญหา
  • คิดว่าธีมอันเก่านั้นค่อนข้างโอเคในระดับที่ยังยอมรับได้อยู่

แล้วเหตุใดจึงต้องเปลี่ยนธีมใหม่

  • อยากได้ Responsive theme ซึ่งจะทำให้บล็อกเปลี่ยนเลเอาท์ให้เหมาะสมกับขนาดหน้าจอของอุปกรณ์ที่เปิดใช้งาน คิดว่าตอนนี้คนเข้าดูเว็บไม่ได้ดูผ่านทางคอมพิวเตอร์อย่างเดียวแล้ว แม้จะมี plugin ช่วยอยู่ก็ตาม แต่คิดว่าสู้ Responsive theme ไม่ได้หรอก เท่กว่าเยอะ
  • คิดว่าถ้าทิ้งปัญหาต่างๆของด้านบนไว้นานๆจะยิ่งทำให้การเปลี่ยนธีมในอนาคตทำได้ยากขึ้นอีก
  • บล็อกเก่ามีติด Google Adsense ไว้ใต้หัวข้อโพสก่อนจะเริ่มเนื้อหา เป็นตำแหน่งที่ตัวเองก็ไม่ชอบนัก แต่เป็นตำแหน่งที่ทำให้คลิกเยอะสุดแล้วเมื่อเทียบกับตำแหน่งอื่นๆ อยากจะเปลี่ยนแปลงตรงนี้ แต่ไม่กระทบรายได้ของบล็อกมากนัก (แต่เพราะมันเป็นตัวหล่อเลี้ยงเว็บไซต์อื่นๆที่ทำตามใจอีกกว่า 5 เว็บไซต์) ซึ่งธีมใหม่ถือว่าช่วยได้ในระดับที่น่าพอใจเลย
  • ธีมเก่าไ่ม่มี feature post เลย เคยพยายามทำแล้ว แต่ทำยังไงก็ออกมาดูไม่ดีเลย เปลี่ยนธีมใหม่ไปเลยน่าจะเป็นคำตอบ

เกณฑ์ในการเลือกธีมใหม่

  • ต้องเป็น Responsive theme
  • เลือกแบบฟรีก่อน แต่ถ้าถูกใจจริงๆจะซื้อก็ได้ แต่จะไม่เอาธีมอันที่คนอื่นทำขายมาใช้ฟรี
  • มีตำแหน่งของการติดแบนเนอร์ที่เหมาะสมไม่รบกวนตรงเนื้อหามากเกินไป
  • ต้องมีตำแหน่ง feature post ที่ดี
  • ดูดี เข้าถึงโพสล่าสุดได้ง่าย เน้นให้คล้ายแมกกาซีน หรือเว็บข่าว

พอตั้งเกณฑ์ได้ประมาณนี้เลยช่วยให้ค้นหาและเลือกธีมที่มีอยู่มากมายได้ง่ายมากขึ้น พอค้นเจอก็ลองเปิดดู demo theme นั้นก่อน ซึ่งส่วนใหญ่เว็บแจกธีมมักจะมีตัวอย่างให้ดูอยู่แล้ว พอเข้าข่ายก็ดาวน์โหลดเก็บไว้ จากนั้นติดตั้งเข้าไปเลย ตอนแรกเลือกมาประมาณ 15 ธีม แล้วก็ลองเปิดพรีวิวดูในบล็อกของตัวเอง แล้วค่อยตัดตัวเลือกออกทีละตัวจนเหลือ 3 ตัวสุดท้าย แล้วลอง activate ธีมนั้นดู ลองปรับแต่งสักเล็กน้อยดูว่าเหมาะแค่ไหน แล้วจึงเลือกเอาอันที่คิดว่าเหมาะสมที่สุด

สุดท้ายก็เลือกธีม Oxygen 

ธีมใหม่ของบล็อก

เกี่ยวกับ Oxygen theme

เป็นธีมที่ใช้ Hybrid Core framework รองรับการทำ child themes ออกแบบมาสำหรับเว็บไซต์แนวแมกกาซีน ซึ่งตัวเองดูแล้วค่อนข้างชอบ เป็นธีมฟรี แต่ฟรีไม่สมบูรณ์แบบนัก เพราะถ้าอยากได้รายละเอียดในการติดตั้ง การปรับแต่งต่างๆ จะต้องสมัครเป็นสมาชิกแบบจ่ายตังค์ของเว็บไซต์ที่เป็นคนแจก หลังๆเห็นธีมใช้โมเดลนี้เยอะเลย แต่อย่างไรก็ตาม มันไม่ได้ยากเกินไปนักที่จะปรับแต่งตามใจต้องการ ดูโค้ดธีมประกอบพอช่วยได้

รายละเอียดของการติดตั้งธีมใหม่ 

  • ลดการใช้ hard code ให้ได้มากที่สุด เน้นใช้ plugin ช่วย
  • ไม่เอา Feature post อันใหญ่ของธีม เพราะขาดใหญ่มาก คิดว่าอาจเสียเวลาโหลดนานเกินไป
  • Feature post ด้านบนใช้ Plugin WP Featured Content Slider แล้วแก้ไข css เองอีกนิดหน่อย
  • Ralated Post ใช้ Plugin Related Posts Thumbnails
  • ปรับแต่ง css อีกนิดหน่อย

ใช้เวลานานพอสมควรเลยกว่าจะออกมาได้ประมาณนี้ ตอนนี้อาจจะยังไม่สมบูรณ์เต็มที แต่ส่วนตัวคิดว่าโอเคแล้ว อาจจะต้องปรับอีกนิดหน่อย

ว่าแล้วก็ เชิญติชมธีมใหม่ได้เลยครับ

ปรับธีมใหม่ให้ Biomed.in.th ดูดีขึ้นนิดหน่อย

ไปงาน WordPress Developer Night มาแล้ว อยากลงมือทำอะไรสักอย่าง ก็เลยปล่อยออกมา โดยเอาธีมของ Biomed.in.th เป็นที่รองรับ ปรับตรงนั้น เล่นตรงนี้หน่อย ทำให้เข้าใจเรื่อง CSS เพิ่มอีกนิด ได้ธีมใหม่ที่พอรับได้

รายการที่ทำมีดังนี้

  • เปลี่ยนโลโก้ใหม่ เปลี่ยนหัวเป็น url ของเว็บ พยายามคิดสโลแกนคิดไม่ออกสักที เอาอันนี้ไปก่อน
  • ใส่ Feature slide เข้ามา ใช้ปลั๊กอิน Featured Content Slider ปรับ css นิดหน่อยให้เข้ากับเว็บ ตอนแรกมีปัญหา “jquery is not defined” เข้าใจว่ามันชนกับอะไรสักอย่างในเว็บ ปวดหัวมาก ไล่ปิดปลั๊กอินแต่ละอันก็ไม่เจอ ลองเปลี่ยนธีมใหม่ลองดู กลับใช้ได้ เลยได้ความว่ามีปัญหากับธีมนี้ สุดท้ายแก้ปัญหาด้วยการโหลด jquery กับโค้ดของ Featured Content Slider ไปไว้โฟว์เดอร์ใหม่ แล้วเพิ่มโค้ดที่ header ให้มันโหลดมาจากที่ใหม่ แล้วมันก็ทำงานได้
  • เปลี่ยน background ใหม่, เปลี่ยน footer ใหม่
  • แยกกลุ่มของ div ใหม่ ใส่พื้นหลังให้ content-wrap
  • ทดสอบพบว่า IE7 มีบางอันที่ไม่รองรับ เช่น text-shadow
  • พบว่าตำแหน่งโฆษณาบน header right ข้างโลโก้มันเป็นตำหน่งที่ทำให้เว็บดูดีขึ้นได้เลย

ก่อน

Before (Biomed.in.th)

หลัง

After (Biomed.in.th)

ดาวน์โหลดธีม Windows 7

Windows 7 themes

คิดว่าหลายๆคนคงชอบการตั้งภาพแบคกราวด์ของ Windows 7 ให้เป็นแบบเปลี่ยนตามเวลา ทำให้เวลาเปิดคอมพิวเตอร์ใช้งานนานๆ เวลามันเปลี่ยนภาพพื้นหลังไปเรื่อยๆทำให้คนใช้ไม่เบื่อ ความชอบนี้ส่งถึง Gmail เหมือนกันคือตั้ง ธีมให้เป็น random ทำให้แต่ละวันได้เจอหน้าตามันเปลี่ยนไปทุกวัน

Microsoft ทำธีมของ Windows 7 ให้เราเลือกดาวน์โหลดหลายตัว ตอนนี้มีประมาณร้อยกว่าตัว ลองเข้าไปเลือกๆดู วิธีติดตั้งก็ง่ายๆ แค่ดาวน์โหลดลงเครื่องแล้วดับเบิ้ลคลิกไฟล์ ระบบจะติดตั้งเอง มันจะเข้าไปอยู่ส่วนของ My Themes ของเราเอง ในธีมจะมีการปรับแต่งบาร์และมีภาพพื้นหลังมาด้วยชุดหนึ่ง

แต่ธีมของ Windows 7 ใช้ได้กับ Windows 7 รุ่น Home Premium, Professional, Enterprise, Ultimate เท่านั้น หรือพูดง่ายๆคือรุ่น Basic ใช้ไม่ได้

เข้าไปโหลด Windows themes ได้ที่ https://windows.microsoft.com/en-US/windows/downloads/personalize/themes

ผมชอบชุดของ Nature มากที่สุด มันสวยดี

เว็ปค่ายเยาวชนรู้งานสืบสานพระราชดำริ รุ่นที่ 1

เว็ปค่ายเยาวชนรู้งานสืบสานพระราชดำริ รุ่นที่ 1

เว็ปค่ายเยาวชนรู้งาน สืบสานพระราชดำริ รุ่นที่ 1 ของสำนักงาน กปร.

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

เว็บใช้เวลาทำไม่นานมากนัก ส่วนเนื่อหาให้เขาไปปรับแก้ไข และใส่เพิ่มเติมเอง ยังย้ายไปอยู่บน server ของ กปร. ไม่ได้เพราะ server ไม่รองรับ (เขาใช้ aspx) ต้องไป set up เองยังทำไม่สำเร็จ ตอนนี้มันเลยต้องรันอยู่บน subdomain ของบล็อกนี้ คือ https://camp.amphur.in.th หรือถ้าเข้าไปที่หน้าหลักของ https://www.rdpb.go.th/rdpb ยังแก้ปัญหาด้วยการลิงค์มาที่นี้

รายละเอียดของเว็ป

  • แน่นอนมันเป็น WordPress
  • ใช้ธีมของ Academica เป็นธีมฟรีที่เยี่ยมมาก เป็นธีมที่มี slide show มาในตัว และทำระบบเมนูมาดี จนทำให้เข้าใจระบบของ custom menu มากขึ้นว่ามันทำให้การจัดการเรื่องของเมนูง่ายขึ้นมาก และธีมรองรับ image background (WP3.0) มีปรับ CSS นิดหน่อย
  • เพิ่ม Social Plugin ของ Facebook เข้ามาด้วย
  • ใช้ Plugin ที่ชื่อ Mingle Forum ทำเว็บบอร์ด ง่ายและถูกใจ ปรับแต่งได้สะดวก
  • Fancybox ทำให้เวลาคลิกอัลบั้มรูปมันดูดีไฮโซขึ้นอีกเยอะเลย
  • Login-box เวลาคลิกล็อกอินจะแสดงกล่องขึ้นมากรอกเพื่อล็อกอิน ไม่ต้องโหลดหน้าใหม่
  • รูปที่อยู่ข้างในตัดต่อด้วย Pixlr เคยแนะนำไว้แล้วที่ Online Image Editor แต่งภาพออนไลน์ ไม่ต้องลงโปรแกรม ถือว่าใช้ในการทำงานจริงได้สบาย ไม่ต้องง้อ Photoshop

มาบันทึกเก็บไว้เผื่อครั้งหน้าอาจได้ย้อนมาดูว่าทำยังไงบ้าง

เว็บไซต์ประมวลเหตุการณ์ช่วงสงกรานต์ ใช้ Drupal

เว็บรายงานเหตุการณ์ จลาจลเมื่อสงกรานต์

เว็บของรัฐบาลที่เราได้เห็นก่อนหน้านี้ใช้ WordPress ทำออกมาได้อย่างสวยงามนั้นก็คือ เว็บช่วยชาติ อีกเว็บหนึ่งที่ใช้ธีมเดียวกันในการจัดรูปแบบของเว็บ จากบล็อกของคุณพัชรบอกว่าอาจจะนำธีมนี้มาแจก ผมก็จะของรอลุ้นครับว่าแจกเมื่อไหร่ เว็บไซต์ของรัฐบาลตัวที่สองที่ออกมานี้ใช้ Drupal ในการทำซึ่งก็มี
หลายๆคนที่ชอบ cms ตัวนี้เยอะ blognone เว็บข่าวไอทีชื่อดังก็ใช้ตัวนี้ และคนที่ใช้ drupal คงไม่มีใครไม่รู้จัก @sugree ผู้เชี่ยวชาญ และได้ยินข่าวว่ากำลังทำคู่มือ drupal ร่วมกับ mk อยู่เราก็รอลุ้นอยู่ว่าเมื่อไหร่ จะคลอดสักที ในท้องตลาดคู่มือของ drupal มีแค่ไม่กี่เล่มยังไงก็คลอดออกมาไวไวนะครับ

กลับมาที่เว็บไซต์ที่เราสนใจอยู่คือ https://www.factreport.go.th ภายในเว็บมีภาพประมวลเหตุการณ์ ตั้งแต่เกิดเรื่องที่ พัทยาจนถึงสงกรานต์ มีทั้งคลิปวีดีโอให้ดูให้ดาวน์โหลด ผู้พัฒนาจากที่ได้อ่านจากบล็อกคุณพัชร ได้บอกว่าเป็นทีมงานของ Opendream ผมลอง search ใน Google ดูว่าน่าจะมีเว็บไซต์ของทีมงานนี้ก็เจอเว็บนี้ครับ Opendream ไม่ทราบว่าใช่หรือปล่าวถ้าผิดก็แจ้งด้วยนะครับมาอ่านคำชี้แจงของเว็บนี้ครับ

สืบเนื่องจากเหตุการณ์ความไม่สงบจากการชุมนุมทางการเมืองที่เกิดขึ้นใน เขตกรุงเทพฯ ปริมณฑล และต่างจังหวัดจนเป็นเหตุให้เจ้าหน้าที่รัฐ และประชาชนได้รับบาดเจ็บ รวมถึงทรัพย์สินได้รับความเสียหาย ดังนั้นเพื่อให้ประชาชนได้รับข้อมูลข่าวสารที่เกิดขึ้นอย่างถูกต้องครบถ้วน และสร้างให้เกิดความเข้าใจต่อกรณีที่เกิดขึ้น

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

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