เว็บ OS กราฟิก 1 บิตที่สร้างบนพื้นฐาน UI ของ Apple Lisa

 (alpha.lisagui.com)
1 คะแนน โดย GN⁺ 2025-07-07 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • นักพัฒนาอิสระได้สร้าง ระบบปฏิบัติการบนเว็บ ที่จำลอง ส่วนติดต่อผู้ใช้ของ Apple Lisa ขึ้นมา
  • โปรเจกต์นี้มีจุดเด่นที่ กราฟิกขาวดำแบบ 1 บิต ซึ่งน่าสนใจสำหรับผู้ที่ชื่นชอบคอมพิวเตอร์ย้อนยุค
  • มีการเลียนแบบดีไซน์ของ Apple Lisa ในยุค 1980s อย่างซื่อตรง ทั้งเดสก์ท็อป ไอคอน และหน้าต่างไฟล์
  • สามารถรันได้ทันทีบนเว็บเบราว์เซอร์โดยไม่ต้องมีขั้นตอนติดตั้งเพิ่มเติม
  • เปิดเผยเป็นโอเพนซอร์ส ทำให้นักพัฒนาคนอื่นสามารถ ปรับแต่ง และต่อยอดได้ง่าย

แนะนำโปรเจกต์

  • โปรเจกต์นี้คือการพัฒนาเว็บ OS ที่ทำให้ผู้ใช้ได้สัมผัส UI ของระบบปฏิบัติการเดสก์ท็อประยะแรกของ Apple Lisa ได้โดยตรงบนเว็บ
  • ใช้กราฟิก 1 บิต (pure black & white) เพื่อมอบประสบการณ์ผู้ใช้แบบย้อนยุค
  • มีการสร้างสภาพแวดล้อมเดสก์ท็อปแบบดั้งเดิมขึ้นใหม่ ทั้งเดสก์ท็อป ไอคอน หน้าต่าง และการเปิดแอป
  • แม้จะไม่ได้พยายามสร้างความสามารถของระบบปฏิบัติการจริงทั้งหมด แต่เน้นไปที่การจำลอง การทำงานของ UI และองค์ประกอบด้านภาพ
  • เพียงมีเว็บเบราว์เซอร์สมัยใหม่ก็เข้าถึงได้ทันที ทำให้มีอุปสรรคทางเทคนิคต่ำมาก

จุดเด่นหลัก

  • จำลองดีไซน์ UI ของ Apple Lisa ที่เปิดตัวในปี 1983 ได้อย่างซื่อตรง
  • ถ่ายทอดการตอบสนอง UI สำคัญได้สมจริง เช่น drag and drop, การย้ายหน้าต่าง และการปรับขนาด
  • มอบอารมณ์ภาพที่โดดเด่นด้วยสไตล์กราฟิก 1 บิตที่เรียบง่ายแต่ประณีต
  • มีองค์ประกอบพื้นฐานของระบบปฏิบัติการเดสก์ท็อป เช่น รายการแอป การเรียกดูไฟล์ และการเปิดแอปแบบง่าย

การใช้งานและความหมาย

  • เป็นสื่อเดโมที่ยอดเยี่ยมสำหรับผู้สนใจคอมพิวเตอร์ย้อนยุคหรือการศึกษา การออกแบบ UI/UX
  • แม้นักพัฒนามือใหม่ก็สามารถวิเคราะห์ซอร์สโค้ดเพื่อทำความเข้าใจ โครงสร้าง UI บนเว็บและโครงร่างเลย์เอาต์ ได้
  • เนื่องจากเผยแพร่แบบโอเพนซอร์ส ชุมชนจึงสามารถลอง เพิ่มฟีเจอร์ หรือ ปรับธีม ได้อย่างหลากหลาย

ข้อสังเกตเพิ่มเติม

  • สามารถเปิดใช้งานได้ทันทีบนเว็บผ่านลิงก์ โดยไม่ต้องมีขั้นตอนติดตั้งที่ซับซ้อนแยกต่างหาก
  • ซอร์สโค้ดมีให้ผ่านคลังสาธารณะ เช่น Github
  • โปรเจกต์นี้ไม่ได้มุ่งเน้นเชิงพาณิชย์ แต่ให้ความสำคัญกับ การทดลองเชิงแนวคิด และ วัตถุประสงค์ด้านการศึกษา

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-07-07
ความเห็นจาก Hacker News

  • Lisa ไม่ได้ใช้พิกเซลสี่เหลี่ยมจัตุรัส จึงตั้งสัดส่วนแคนวาสให้แนวตั้งยาวกว่าแนวนอน 1.5 เท่า บนจอความละเอียดสูงจะดูค่อนข้างดี เพราะพิกเซลจริงมีขนาดกว้าง 2 พิกเซล × สูง 3 พิกเซล แต่บนจอความละเอียดต่ำ พิกเซลจะถูกแสดงเป็นกว้าง 1 พิกเซล × สูง 1.5 พิกเซล จึงเกิดอาการบิดเบี้ยว ซึ่งเป็นสิ่งที่ยอมรับไว้ตั้งแต่การออกแบบ อย่างไรก็ตาม ถ้าปรับหน้าต่างให้กว้างบนจอความละเอียดต่ำที่มีขนาดใหญ่พอ ระบบสเกลแบบจำนวนเต็มอัตโนมัติจะทำงาน ทำให้พิกเซลมีขนาดใหญ่ขึ้นได้ และยังบังคับตั้งค่าได้จากตัวเลือกจอแสดงผลในแอป Preferences หากตั้งค่าสเกลจนเพี้ยนไป สามารถรีเซ็ตได้โดยกดปุ่ม shift ค้างไว้ตอนรีสตาร์ต LisaGUI นอกจากนี้บน iOS ยังมีบั๊กเล็กน้อยเกี่ยวกับตำแหน่งแคนวาสของ PWA ซึ่งแก้ได้ด้วยการหมุนเครื่องแล้วหมุนกลับ แต่ก็ถือว่ายุ่งยากพอสมควร และเวลาอยากปิดหน้าต่าง ให้ดับเบิลคลิกไอคอนบน title bar หน้าต่างจะยุบเป็นไอคอน

    • อยากรู้ว่าจัดการการปรับขนาดหน้าต่างหรือขนาดฟอนต์แบบไดนามิกอย่างไรโดยไม่ขึ้นกับขนาดเบราว์เซอร์ ปกติใน HTML เรื่องนี้มักเป็นอัตโนมัติอยู่แล้ว เลยสงสัยว่าโปรเจ็กต์นี้ใช้วิธีไหน

  • Apple ][/e หรือ /c clone (Pravetz 8Ц จากบัลแกเรีย) คือคอมพิวเตอร์เครื่องแรกของฉัน และหลังจากนั้นก็ใช้พีซี 286, 386 ที่ต่อกับจอ Hercules monochrome ด้วย ดังนั้นการได้เห็น UI เรโทรสวย ๆ ในโปรเจ็กต์นี้ทำให้นึกถึงบรรยากาศยุค Think-Pascal ขึ้นมาเลย

  • โปรเจ็กต์ Lisa GUI แปลกและมีเอกลักษณ์แบบนี้แหละคือเหตุผลที่ฉันชอบ Hacker News ได้ทั้งเรียนรู้จาก vanilla JS ล้วน ๆ และจาก UI ที่ล้ำยุคเกินสมัยของตัวเอง ถ้ามีเกมที่เล่นได้ทันทีในเดโมหรือตัวอย่าง เช่นเกมสไตล์ Breakout ก็คงยิ่งดี

    • อยากบอกว่าซาบซึ้งมาก และเกมถัดไปที่ตั้งใจจะทำคือ Solitaire อีกทั้งก็อยากลองทำอะไรอย่าง Mazewar ของ Xerox Alto สักวันหนึ่งเหมือนกัน โดยเฉพาะในแง่การทำระบบเครือข่ายที่ไม่ง่ายนัก แต่ก็ตั้งใจจะลองในฐานะการคารวะ Xerox

  • รู้สึกประทับใจมากที่แม้จะลอก UX เมื่อ 40 ปีก่อนออกมา แต่พอเห็นสไตล์ข้อความมีเงาในแอป Preferences กับ fatbits editor แล้วก็ยังรู้สึกว่ามันใช้งานได้จริงและเข้าใจง่ายอยู่มาก เพียงแต่เสียดายที่ไม่มีปุ่มปิดหน้าต่าง ส่วนฟีเจอร์ที่คลิกครั้งเดียวแล้วเมนูค้างเปิดไว้ได้ ถือเป็นพัฒนาการด้าน UX ที่ดีซึ่งเข้ามาในภายหลังพอสมควร

    • เมนูแบบ sticky เป็นฟีเจอร์ที่ถูกนำมาใช้หลังจากนั้นอีกนาน ในงานนี้ใส่เข้ามาโดยตั้งใจเพราะผู้ใช้ยุคใหม่คุ้นเคยกับมันอยู่แล้ว คือสามารถคลิกครั้งเดียวเพื่อเปิดเมนูค้างไว้ หรือจะกดเมาส์ค้างแล้วลากเปิด จากนั้นปล่อยปุ่มเมาส์เพื่อปิดก็ได้ สมัยก่อนใน Mac OS (System 6) ก็มี extension ที่ช่วยให้ใช้เมนูแบบ sticky ได้อยู่แล้ว แต่ที่นี่เป็นการย้อนไปใส่ฟีเจอร์นี้ให้กับยุคที่เก่ากว่านั้นเล็กน้อย และขอเสริมว่าถ้าจะปิดหน้าต่าง ให้ดับเบิลคลิกที่ไอคอนบน title bar ได้เลย

    • มีพฤติกรรมให้ดับเบิลคลิกไอคอนมุมซ้ายบนของหน้าต่างเพื่อปิดหน้าต่างอยู่แล้ว คล้ายกับแนวคิดของคีย์ลัด File > Set Aside

  • ไม่ได้มีประสบการณ์ใช้งาน Lisa แบบยาวนานนัก แต่ในฐานะช่างเทคนิคช่วงต้นยุค 90 เคยใช้ Lisa หลายเครื่องและเคยดัดแปลงเป็น Mac XL ด้วย โปรเจ็กต์นี้ถ่ายทอด UI ได้สมจริงมาก กดเล่นแล้วทั้งสนุกและเป็นประสบการณ์ที่ดี

  • เมื่อก่อนไม่เคยลองแม้แต่ Lisa emulator แต่ครั้งนี้ทำให้ได้ลองเป็นครั้งแรก ถือเป็นประสบการณ์ที่มีคุณค่ามาก และขอบคุณที่ทำให้ได้กลับมาคิดทบทวนแนวคิดพื้นฐานของ GUI อีกครั้งหลังจากเวลาผ่านไปนาน

  • เวลาพูดคำว่า GUI ฉันมักออกเสียงทีละตัว ไม่จำเป็นต้องรวบเป็นคำว่า "กูอี้" แต่อย่างใด พูดเล่นปนจริงว่ารู้สึกเป็นพวกเดียวกัน

    • ยึดหลักว่าทั้ง acronym และ initialism ควรถูกอ่านออกเสียงทั้งหมด เช่น TUI เป็น 'ทูอี้', CLI เป็น 'คลิ', TCP/IP เป็น 'ทิคีพีพี', GPT เป็น 'จีพีที', DNS เป็น 'ดันส์', HTTP เป็น 'ฮิททัพ', USB เป็น 'อูซเบอร์', USB-C เป็น 'อูซเบอร์ก' ข้อเสนอขำ ๆ แบบนี้

    • การถกเถียงเรื่องการออกเสียงเล็ก ๆ แบบนี้สนุกและเพลิดเพลินกว่าการคุยการเมืองจริงจังในช่วงนี้มาก เช่น vi vs emacs, vi vs vim, การออกเสียง IF, m68k vs x86, Mac vs Amiga, BSD vs Linux เป็นต้น

    • ดีใจที่มีคนคิดเหมือนกัน

  • เวลาใช้เมาส์เคอร์เซอร์บนมือถือ ฉันว่ารูปแบบของ Microsoft Remote Desktop ใช้งานสะดวก คือไม่ได้ลากนิ้วตรงกับเคอร์เซอร์ แต่เลื่อนนิ้วที่ตรงไหนก็ได้บนหน้าจอเพื่อขยับเคอร์เซอร์แยกต่างหาก ถ้าได้ลองใช้จะเข้าใจเลย เลยอยากเสนอให้ปรับปรุงในทิศทางนี้

    • มีการทำไว้แล้ว โดยเปิดโหมดแทร็กแพดได้จากแผงตัวเลือกหน้าจอสัมผัสใน Preferences ซึ่งจะให้ประสบการณ์เคอร์เซอร์แบบสัมผัสในลักษณะเดียวกัน

  • ลองบนมือถือแล้ว รู้สึกว่าตอบสนองได้ดีน่าประทับใจมาก

    • ขอบคุณมากสำหรับฟีดแบ็กว่าได้ลองใช้งาน

  • บน iPhone SE หน้าจอเล็กมันทำงานได้ไม่ค่อยดีนัก เลยทำให้นึกว่าคราวหน้าคงต้องอัปเกรดฮาร์ดแวร์เพื่อให้ได้ประสบการณ์ OS ที่ดีกว่านี้