WebWeCreate.com

ออกแบบ พัฒนา และดูแลเว็บไซต์ ใช้งานง่าย ราคาเป็นกันเอง

Wilertvision

เว็บไซต์ Personal Branding สำหรับ ดร.วิเลิศ อาจารย์จากจุฬาลงกรณ์มหาวิทยาลัย รวบรวมผลงานวิชาการ งานสัมมนา และกิจกรรมระดับนานาชาติ พร้อมระบบติดตามยอดผู้อ่านแบบ real-time ด้วย Custom Code Snippet
#
↓ scroll ดูหน้าเต็ม

ประเภท

ระยะเวลา

1 สัปดาห์

ปีที่ทำ

2024

Client

Dr. Wilert (อ.วิเลิศ จุฬาลงกรณ์มหาวิทยาลัย)

เกี่ยวกับโปรเจคนี้

Wilert’s Vision คือเว็บไซต์ Personal Branding ของ ดร.วิเลิศ อาจารย์ประจำจุฬาลงกรณ์มหาวิทยาลัย
ที่ต้องการพื้นที่ออนไลน์สำหรับเผยแพร่ผลงานวิชาการ ข่าวกิจกรรม และการมีส่วนร่วมในงานสัมมนาระดับนานาชาติ
โจทย์หลักคือการสร้างระบบที่อาจารย์สามารถอัปเดตเนื้อหาได้ด้วยตนเองหลังส่งมอบงาน
โดยใช้ Identity สีชมพูและฟอนต์ของจุฬาลงกรณ์มหาวิทยาลัยเป็น CI หลักตลอดทั้งเว็บ

เหมาะกับใคร

1. นักวิชาการและนักศึกษา — ผู้ที่ต้องการติดตามผลงานและมุมมองของ ดร.วิเลิศ
โดยเฉพาะในประเด็นระดับนานาชาติและงานวิจัยเชิงวิชาการ

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

3. สื่อมวลชนและผู้จัดงาน — ค้นหาข้อมูลพื้นฐานและผลงานล่าสุด
สำหรับประกอบข่าวหรือสื่อสารประชาสัมพันธ์

Screenshots

Homepage

สิ่งที่ทำในโปรเจคนี้

โครงสร้างหมวดหมู่ตาม Brief
ผู้เยี่ยมชมค้นหาเนื้อหาได้ตรงตามประเภทงาน
ออกแบบเมนูและหมวดหมู่ตามที่ลูกค้า brief มา ได้แก่ International, Internal, Integrated, Innovative, Impact และ News
Custom Code Snippet — ยอดผู้อ่านต่อบทความ
แสดงความนิยมของแต่ละบทความแบบ real-time
ฝัง Custom PHP/JavaScript Snippet เพื่อนับและแสดงจำนวนผู้เข้าชมรายบทความ
Custom Query เรียงตามยอดผู้อ่านสูงสุด
ดึงบทความยอดนิยมขึ้นมาแสดงแทนการเรียงแบบวันที่
เพิ่ม Code Snippet เพื่อ override WordPress default query ให้เรียงบทความตามจำนวนผู้เข้าชมสูงสุด
Image Optimization — แปลงรูปเป็น WebP
หน้าเว็บโหลดเร็วขึ้น ประสบการณ์ผู้ใช้ดีขึ้น
บีบอัดและแปลงไฟล์ภาพทั้งหมดเป็นฟอร์แมต WebP ก่อน upload
CI Design — จุฬาฯ สีชมพูและฟอนต์
เว็บสะท้อนอัตลักษณ์มหาวิทยาลัยได้ชัดเจน
ออกแบบทุก element ให้ตรงกับ Corporate Identity ของจุฬาลงกรณ์มหาวิทยาลัย
ระบบที่ดูแลเองได้หลังส่งมอบ
อาจารย์อัปเดตบทความและข่าวได้ด้วยตนเองโดยไม่ต้องพึ่ง Developer
วางโครงสร้างระบบ WordPress + Elementor พร้อมส่งมอบ User/Password และอธิบายการใช้งาน

เบื้องหลังการทำงาน

ดร.วิเลิศ อาจารย์ประจำจุฬาลงกรณ์มหาวิทยาลัย ต้องการเว็บไซต์ส่วนตัวสำหรับรวบรวมและเผยแพร่ผลงานวิชาการ
งานสัมมนา และกิจกรรมระดับนานาชาติที่เข้าร่วมอย่างสม่ำเสมอ Brief ที่ได้รับมาชัดเจนในเรื่องโครงสร้างหมวดหมู่
ซึ่งแบ่งตามลักษณะกิจกรรม ได้แก่ International, Internal, Integrated, Innovative, Impact และ News
พร้อมมี Google Drive ที่มีรูปภาพกิจกรรมให้พร้อมใช้งาน ลูกค้ายังกำหนด CI ของเว็บให้ชัดเจนว่าต้องใช้สีชมพูและฟอนต์
ของจุฬาลงกรณ์มหาวิทยาลัยตลอดทั้งเว็บ

ในส่วนของการพัฒนา เลือกใช้ WordPress + Elementor เป็นฐาน เพราะตอบโจทย์สำคัญที่สุดของโปรเจกต์นี้คือ
ลูกค้าต้องสามารถดูแลเนื้อหาได้ด้วยตนเองหลังส่งมอบงาน โดยไม่ต้องพึ่งนักพัฒนาอีก ออกแบบ layout และหมวดหมู่
ให้ตรงตาม brief ทุกข้อ และใช้ Font Awesome เสริม icon ในส่วน UI ต่าง ๆ เพื่อให้เว็บดูมีความเป็นมืออาชีพ

ความท้าทายหลักของโปรเจกต์นี้อยู่ที่ฟีเจอร์นอกเหนือ WordPress มาตรฐาน 2 ส่วน คือ การแสดงยอดผู้อ่านรายบทความ
และการเรียงบทความตามยอดผู้อ่านสูงสุดแทน default ที่เรียงตามวันที่ ทั้ง 2 ฟีเจอร์นี้พัฒนาด้วย Custom Code Snippet
ซึ่งต้องทดสอบให้แน่ใจว่า query ทำงานถูกต้องและไม่กระทบ performance ของเว็บ ส่วนภาพจำนวนมากที่ได้จาก
Google Drive ของลูกค้าได้รับการแปลงเป็น WebP ก่อน upload ทั้งหมด เพื่อให้หน้าเว็บโหลดได้รวดเร็วแม้มีเนื้อหาหนาแน่น

ผลลัพธ์ที่ได้คือเว็บ Personal Branding ที่สะท้อน identity ของจุฬาลงกรณ์มหาวิทยาลัยได้ชัดเจน
มีระบบจัดการเนื้อหาที่ใช้งานได้จริงสำหรับ non-technical user และมีฟีเจอร์ที่ช่วยให้บทความวิชาการที่มีคุณค่า
ไม่ถูกฝังหายไปตามเวลา หลังส่งมอบงานพร้อม User/Password อาจารย์สามารถอัปเดตเนื้อหาได้ทันทีตามระบบที่วางไว้

เครื่องมือที่ใช้พัฒนา

Tags

ผลงานที่เกี่ยวข้อง

AI Assistant
ออนไลน์อยู่ พร้อมช่วยเหลือ
สวัสดีค่ะ! มีอะไรให้ช่วยไหมคะ?
กำลังโหลด...