คู่มือ NoteKub
เว็บไซต์ NoteKub
notekub.dev คือเว็บไซต์สาธารณะ — หน้าผลิตภัณฑ์ หน้าราคา และคู่มือที่คุณกำลังอ่านอยู่ ส่วนตัว workspace เองอยู่คนละ origin คือ app.notekub.dev สิ่งที่คุณพิมพ์ที่นี่ไม่ใช่ข้อมูลของคุณ เพราะฝั่งนี้ของเส้นแบ่งไม่มีบัญชีอยู่เลย
สองภาษา สอง path จริง
ภาษาอังกฤษอยู่ที่ราก และภาษาไทยอยู่ใต้ /th/ — หน้าราคาจึงเป็น /pricing/ กับ /th/pricing/ และคู่มือหน้านี้คือ /manual/website/ กับ /th/manual/website/
มันเป็นหน้าจริง ไม่ใช่การสลับตอนรัน เว็บนี้เป็น static export แต่ละภาษาจึงถูก build และเสิร์ฟเป็น HTML ของตัวเอง และนั่นคือเหตุผลที่ตัวสลับภาษาบน header รู้ว่าจะพาคุณไปหน้าไหน — มันจับคู่หน้าที่คุณอยู่กับหน้าฝาแฝดของมัน แทนที่จะทิ้งคุณไว้ที่หน้าแรก
- 1.ใช้ตัวเลือกภาษาบน header เพื่อสลับ
- 2.ป้ายเขียนด้วยภาษาที่มันจะสลับไป — English หรือ ไทย
- 3.URL เปลี่ยนตาม ลิงก์ที่คุณคัดลอกจึงพาภาษาไปด้วย
บนเว็บมีอะไรบ้าง
Product อธิบายว่า NoteKub ทำอะไรได้ Pricing บอกราคา Manual คือคู่มือชุดนี้ ส่วน Open app พาไปยัง workspace และเป็นลิงก์เดียวบนเว็บที่พาออกไปข้างนอก
header มีครบทั้งสี่ บนจอแคบมันจะยุบเข้าไปอยู่ในเมนูหลังปุ่ม แทนที่จะหายไปเฉย ๆ
- 1.อ่าน Product เพื่อดูภาพรวม
- 2.อ่าน Pricing ก่อนตัดสินใจอะไร
- 3.กลับมาที่ Manual ได้ทุกครั้งที่ติด
การหาทางในคู่มือ
หน้าดัชนีคู่มือแสดงทุกคู่มือพร้อมระดับ เวลาที่ใช้อ่าน และหัวข้อย่อยข้างใน มีช่องค้นหาที่กรองไปพร้อมกับที่พิมพ์ ครอบทั้งชื่อ คำอธิบาย และหัวข้อย่อย กับตัวกรองระดับที่แคบให้เหลือ Beginner, Intermediate หรือ Advanced
ปุ่มมุมมองสองปุ่มสลับระหว่างการ์ดกับรายการสองคอลัมน์ — คู่มือชุดเดียวกัน จัดวางสำหรับวิธีกวาดตาที่ต่างกัน
แถวของคู่มือแต่ละอันคลี่ออกเพื่อแสดงหัวข้อย่อย และทุกหัวข้อเป็นลิงก์เข้าไปในคู่มือนั้น
- 1.พิมพ์ในช่องค้นหาเพื่อกรองรายการ
- 2.ใช้ตัวกรองระดับถ้าอยากได้แค่ของระดับเริ่มต้น
- 3.กด Show topics ของคู่มือเพื่อดูว่าข้างในมีอะไร ก่อนจะเปิด
ข้างในคู่มือหนึ่งอัน
คู่มือคือ section ที่มีเลขกำกับเรียงลงมาตรงกลาง โดยมี On this page อยู่ข้าง ๆ คุณจึงรู้เสมอว่าเหลืออีกเท่าไร และกระโดดไปได้
คู่มือที่มีการ์ดคีย์ลัดจะวางไว้ใต้สารบัญ — คีย์ที่ควรรู้สำหรับหัวข้อนั้น พร้อมเคล็ดลับใต้มัน
บรรทัดข้อมูลใต้ชื่อเรื่องบอกระดับ เวลาที่ใช้อ่าน และวันที่ปรับปรุงล่าสุด ส่วนปุ่มข้าง ๆ จะเปิดแอปไปที่สิ่งที่คู่มือนั้นพูดถึง
- 1.ใช้ On this page เพื่อกระโดดไปยัง section ที่ต้องการ
- 2.อ่านการ์ดคีย์ลัดก่อนเริ่ม ไม่ใช่หลังจบ
- 3.ดูวันที่ปรับปรุง — คู่มือที่เก่ากว่าเวอร์ชันที่ปล่อยอาจตามไม่ทัน
มันเป็นเว็บ static และนั่นคือประเด็น
ที่นี่ไม่มีการเข้าสู่ระบบ ไม่มีข้อมูล workspace และไม่มีการตั้งค่าบัญชี เว็บถูก export เป็น HTML แบบ static ซึ่งเป็นเหตุผลที่มันโหลดเร็ว และเป็นเหตุผลที่ไม่มีอะไรบนนี้ให้ล็อกอิน
ทุกอย่างที่สร้าง อ่าน หรือเปลี่ยนข้อมูลของคุณเกิดขึ้นที่ app.notekub.dev หลังการลงชื่อเข้าใช้ สองที่นี้เป็นคนละ origin โดยตั้งใจ
- 1.ใช้ Open app สำหรับทุกเรื่องที่เกี่ยวกับเนื้อหาของคุณเอง
- 2.คาดหวังว่าจะต้องลงชื่อเข้าใช้ที่นั่น และไม่ต้องที่นี่
- 3.share link ที่มีคนส่งมาให้ก็เปิดที่ฝั่งแอป ไม่ใช่ฝั่งนี้
อ่านบนโทรศัพท์
เลย์เอาต์ปรับตามหน้าจอ header ยุบเป็นเมนู สารบัญของคู่มือย้ายขึ้นไปอยู่เหนือเนื้อหาแทนที่จะอยู่ข้าง ๆ และรูปย่อขยายตามคอลัมน์
เนื้อหาที่กว้าง — ตาราง โค้ด ไดอะแกรม — จะเลื่อนอยู่ในกล่องของมันเอง แทนที่จะดันหน้าออกไปด้านข้าง ตัวหน้าจึงไม่เคยเลื่อนตามแนวนอน
- 1.กดปุ่มเมนูเพื่อเปิดแถบนำทางบนจอแคบ
- 2.เลื่อนตารางที่กว้างไปทางข้างในกรอบของมันเอง
- 3.ที่เหลือจะจัดตัวเองใหม่ให้พอดีกับความกว้างที่มี
เข้าถึงคู่มือจากที่ไหนก็ได้
คู่มือถูกลิงก์ไว้บน header ของทุกหน้าในเว็บ ทั้งสองภาษา และบน footer ด้วย
คู่มือแต่ละอันมี URL คงที่ในรูป /manual/<หัวข้อ>/ ลิงก์ไปหามันจึงใช้ได้ตลอด และควรวางลิงก์ลงในแชทมากกว่าจะอธิบายว่าให้กดตรงไหน
- 1.คัดลอก URL จากแถบที่อยู่เพื่อลิงก์ไปยังคู่มืออันนั้น
- 2.เติม /th/ ไว้ข้างหน้าเพื่อลิงก์ไปยังฉบับภาษาไทยของหน้าเดียวกัน
- 3.ลิงก์ถึง section ได้ด้วย — ทุกหัวข้อมี anchor ของตัวเอง