เว็บไซต์ NoteKub
notekub.dev คือเว็บไซต์สาธารณะ — หน้าผลิตภัณฑ์ หน้าราคา และคู่มือที่คุณกำลังอ่านอยู่ ส่วนตัว workspace เองอยู่คนละ origin คือ app.notekub.dev สิ่งที่คุณพิมพ์ที่นี่ไม่ใช่ข้อมูลของคุณ เพราะฝั่งนี้ของเส้นแบ่งไม่มีบัญชีอยู่เลย
สองภาษา สอง path จริง
ภาษาอังกฤษอยู่ที่ราก และภาษาไทยอยู่ใต้ /th/ — หน้าราคาจึงเป็น /pricing/ กับ /th/pricing/ และคู่มือหน้านี้คือ /manual/notekub-website/ กับ /th/manual/notekub-website/
มันเป็นหน้าจริง ไม่ใช่การสลับตอนรัน เว็บนี้เป็น static export แต่ละภาษาจึงถูก build และเสิร์ฟเป็น HTML ของตัวเอง และนั่นคือเหตุผลที่ตัวสลับภาษาบน header รู้ว่าจะพาคุณไปหน้าไหน — มันจับคู่หน้าที่คุณอยู่กับหน้าฝาแฝดของมัน แทนที่จะทิ้งคุณไว้ที่หน้าแรก
- 1.ใช้ตัวเลือกภาษาบน header เพื่อสลับ
- 2.ป้ายเขียนด้วยภาษาที่มันจะสลับไป — English หรือ ไทย
- 3.URL เปลี่ยนตาม ลิงก์ที่คุณคัดลอกจึงพาภาษาไปด้วย
บนเว็บมีอะไรบ้าง
ผลิตภัณฑ์ อธิบายว่า NoteKub ทำอะไรได้ ราคา บอกว่าเท่าไร คู่มือ คือคู่มือชุดนี้ ส่วน เข้าสู่ระบบ พาไปลงชื่อเข้าใช้ที่ workspace
header มีครบทั้งสี่ ข้าง ๆ ลิงก์ภาษาและสวิตช์ธีมสว่าง / มืด บนจอแคบมันจะยุบเข้าไปอยู่ในเมนูหลังปุ่ม แทนที่จะหายไปเฉย ๆ
คู่มือมี header ของตัวเอง: ช่องค้นหา ลิงก์ภาษา สวิตช์ธีม และปุ่ม เข้าสู่ระบบ ส่วนโลโก้ NoteKub ด้านบนของแถบซ้ายจะพากลับหน้าแรก
- 1.อ่าน ผลิตภัณฑ์ เพื่อดูภาพรวม
- 2.อ่าน ราคา ก่อนตัดสินใจอะไร
- 3.กลับมาที่ คู่มือ ได้ทุกครั้งที่ติด
การหาทางในคู่มือ
/manual/ เปิดเข้าคู่มืออันแรก เริ่มต้นใช้งานและ Workspace ทันที ไม่มีหน้าดัชนีแยก แถบด้านซ้ายคือดัชนี
แถบซ้ายแสดงคู่มือทั้งสิบอันตามเลข คู่มือที่กำลังอ่านถูกเน้นและคลี่ section ของมันออกมาข้างใต้ แต่ละอันเป็นลิงก์ไปยังหัวข้อนั้น ช่อง กรองหัวข้อคู่มือ เหนือรายการจะกรองไปพร้อมกับที่พิมพ์ ครอบทั้งชื่อ คำอธิบาย และหัวข้อย่อย
ใต้รายการคู่มือ เส้นทางการเรียนรู้ มีจุดเริ่มสี่แบบ — เริ่มต้นใช้งาน จัดระเบียบข้อมูล ทำงานร่วมกัน และยกระดับด้วย AI — และ ทรัพยากรเพิ่มเติม มีลิงก์ไป แหล่งดาวน์โหลด ท้ายแถบมีปุ่ม ส่งคำแนะนำ ที่เปิดอีเมลถึงทีม
ช่องค้นหาบน header — หรือ ⌘K และ Ctrl+K บน Windows — หาคู่มือจากชื่อ คำอธิบาย และหัวข้อย่อย และหา section จากหัวข้อ ในภาษาที่กำลังอ่าน มันไม่ค้นในเนื้อหา
- 1.เลือกคู่มือจากรายการที่มีเลขกำกับด้านซ้าย
- 2.คลิก section ของมันเพื่อกระโดดไปตรงนั้นทันที
- 3.กด ⌘K หรือ Ctrl+K แล้วพิมพ์คำเพื่อหาคู่มือหรือ section จากชื่อ
ข้างในคู่มือหนึ่งอัน
คู่มือเปิดด้วยเส้นทางกลับไปที่คู่มือ ชื่อเรื่อง ย่อหน้านำ และบรรทัดข้อมูลที่บอกระดับ เวลาที่ใช้อ่าน และวันที่ปรับปรุงล่าสุด โดยปุ่มข้าง ๆ จะเปิดแอป
section ที่มีเลขกำกับเรียงลงมาตรงกลาง บนหน้าต่างกว้าง ในหน้านี้ อยู่ทางขวาและเน้น section ที่กำลังอ่าน คู่มือที่มีการ์ดคีย์ลัดจะวางไว้ใต้มัน พร้อมสวิตช์ Mac / Win ที่เปลี่ยนปุ่มทุกตัวให้ และจำตัวเลือกไว้
คลิกรูปหน้าจอเพื่อเปิดขนาดเต็มในแท็บใหม่ ท้ายคู่มือมี บทความก่อนหน้า และ บทความถัดไป ให้เดินไปตามลำดับ
- 1.ใช้ ในหน้านี้ เพื่อกระโดดไปยัง section ที่ต้องการ
- 2.ตั้งการ์ดคีย์ลัดเป็น Mac หรือ Win ครั้งเดียว มันจะจำไว้
- 3.ดูวันที่ปรับปรุง — คู่มือที่เก่ากว่าเวอร์ชันที่ปล่อยอาจตามไม่ทัน
มันเป็นเว็บ static และนั่นคือประเด็น
เว็บนี้ไม่มีบัญชีให้ล็อกอิน ไม่มีข้อมูล workspace และไม่มีการตั้งค่าบัญชี ปุ่ม เข้าสู่ระบบ บน header พาออกไปลงชื่อเข้าใช้ที่แอป เว็บถูก export เป็น HTML แบบ static ซึ่งเป็นเหตุผลที่มันโหลดเร็ว และเป็นเหตุผลที่ไม่มีอะไรบนนี้ให้ล็อกอิน
ทุกอย่างที่สร้าง อ่าน หรือเปลี่ยนข้อมูลของคุณเกิดขึ้นที่ app.notekub.dev หลังการลงชื่อเข้าใช้ สองที่นี้เป็นคนละ origin โดยตั้งใจ
- 1.ใช้ปุ่ม เข้าสู่ระบบ สำหรับทุกเรื่องที่เกี่ยวกับเนื้อหาของคุณเอง
- 2.คาดหวังว่าจะต้องลงชื่อเข้าใช้ที่นั่น และไม่ต้องที่นี่
- 3.share link ที่มีคนส่งมาให้ก็เปิดที่ฝั่งแอป ไม่ใช่ฝั่งนี้
อ่านบนโทรศัพท์
เลย์เอาต์ปรับตามหน้าจอ บนจอแคบแถบซ้ายของคู่มือจะกลายเป็นลิ้นชักหลังปุ่มเมนูบน header และยังแสดง section ของคู่มือที่เปิดอยู่ — แผง ในหน้านี้ แสดงเฉพาะบนหน้าต่างกว้าง ลิ้นชักจึงทำหน้าที่นั้นแทน
รูปหน้าจอย่อให้พอดีคอลัมน์ แตะเพื่อเปิดขนาดเต็ม เนื้อหาที่กว้าง — ตาราง โค้ด ไดอะแกรม — จะเลื่อนอยู่ในกล่องของมันเอง แทนที่จะดันหน้าออกไปด้านข้าง ตัวหน้าจึงไม่เคยเลื่อนตามแนวนอน
- 1.กดปุ่มเมนูเพื่อเปิดรายการคู่มือและ section ของคู่มือที่เปิดอยู่
- 2.แตะรูปหน้าจอเพื่ออ่านขนาดเต็ม
- 3.แตะนอกลิ้นชัก หรือกด × เพื่อปิด
เข้าถึงคู่มือจากที่ไหนก็ได้
คู่มือถูกลิงก์ไว้บน header ของทุกหน้าในเว็บ ทั้งสองภาษา และบน footer ด้วย
คู่มือแต่ละอันมี URL คงที่ในรูป /manual/<หัวข้อ>/ ลิงก์ไปหามันจึงใช้ได้ตลอด และควรวางลิงก์ลงในแชทมากกว่าจะอธิบายว่าให้กดตรงไหน
- 1.คัดลอก URL จากแถบที่อยู่เพื่อลิงก์ไปยังคู่มืออันนั้น
- 2.เติม /th/ ไว้ข้างหน้าเพื่อลิงก์ไปยังฉบับภาษาไทยของหน้าเดียวกัน
- 3.ลิงก์ถึง section ได้ด้วย — ทุกหัวข้อมี anchor ของตัวเอง


