Hot Page - เครื่องมือสร้างเว็บไซต์แบบกราฟิก

 (hot.page)
4 คะแนน โดย GN⁺ 2024-08-25 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Hot Page เป็นตัวแก้ไขโค้ดแบบกราฟิกที่ให้สร้างเว็บไซต์ด้วยเครื่องมือภาพและการลากแล้ววางได้ แม้จะใช้ HTML, CSS, JavaScript จริง
  • แทนข้อจำกัดของ “no code” เครื่องมือนี้ชูแนวคิด yes code และเน้นวิธีสร้างงานด้วยการดูซอร์สโค้ดของหน้าเว็บ คัดลอก และรีมิกซ์ มากกว่าการพึ่งพาเทมเพลต
  • สามารถสร้างเว็บไซต์แบบเรียบง่ายได้ฟรีและเชื่อมต่อ โดเมนของตัวเอง ได้ โดยเป็นโมเดลที่อัปเกรดเฉพาะเมื่อต้องการตัวเลือกเพิ่มเติม
  • เว็บไซต์ที่สร้างแล้วสามารถดาวน์โหลดไปโฮสต์ที่อื่นได้ และยังใช้เฟรมเวิร์กฝั่งฟรอนต์เอนด์, custom elements, Web Platform APIs และชิ้นส่วนโค้ดโอเพนซอร์สได้ด้วย
  • เป็นเวิร์กโฟลว์ที่ทำงานบนมาตรฐานเว็บและเรียนรู้ทักษะพัฒนาเว็บไปพร้อมกัน จึงช่วยลดภาระในการต้องเรียนรู้ abstraction แยกต่างหากหรืออินเทอร์เฟซตัวแก้ไขแบบใหม่

การสร้างแบบภาพบนโค้ดจริง

  • Hot Page เป็นเครื่องมือสร้างเว็บไซต์แบบกราฟิกที่ใช้ HTML, CSS, JavaScript จริงในการสร้างเว็บไซต์
  • ตัวแก้ไขผสานตัวแก้ไขโค้ดแบบลากแล้ววางกับ เครื่องมือภาพ เพื่อให้สร้างดีไซน์เฉพาะตัวได้ตั้งแต่ต้น
  • มี ทดลองใช้ตัวแก้ไข ให้ใช้งานได้ทันที และเริ่มสร้างเว็บไซต์ฟรีได้ที่ หน้าสมัครสมาชิก
  • แทนที่จะ提供เทมเพลต จะสามารถดู ซอร์สโค้ด ของทุกหน้า และคัดลอกไปรีมิกซ์ได้จากทุกที่
  • ฟีเจอร์ที่ต้องการสามารถนำเฟรมเวิร์กฝั่งฟรอนต์เอนด์บนอินเทอร์เน็ต, custom elements, ชิ้นส่วนโค้ด และการทำงานโอเพนซอร์สมาต่อเติมได้

การเผยแพร่และความเป็นเจ้าของ

  • สามารถสร้างเว็บไซต์แบบเรียบง่ายได้ฟรี และใช้ โดเมนของตัวเอง ได้ฟรีเช่นกัน หากต้องการตัวเลือกเพิ่มเติมจึงค่อยอัปเกรด
  • หากต้องการออกจาก Hot Page ก็สามารถดาวน์โหลดเว็บไซต์ออกไปและ โฮสต์ ได้ทุกที่

เวิร์กโฟลว์ที่เหมาะกับการเรียนรู้พัฒนาเว็บ

  • ผู้เริ่มต้นพัฒนาเว็บสามารถเรียนรู้การเขียนโค้ดไปพร้อมกับสร้างเว็บไซต์ได้ ส่วนผู้ใช้ที่รู้การพัฒนาเว็บอยู่แล้วก็ใช้ความรู้เดิมได้ทันที
  • เพราะใช้เทคโนโลยีเว็บหลักโดยตรง จึงลดภาระในการเรียนรู้ abstraction ใหม่หรืออินเทอร์เฟซตัวแก้ไข และยังเน้น ความเข้ากันได้ย้อนหลัง ของเว็บเป็นข้อดี
  • คำแนะนำระบุข้อดีว่าให้ผลลัพธ์เป็นโค้ด semantic ที่สะอาด สร้างเลย์เอาต์ responsive แบบ 12 คอลัมน์ ปรับแต่ง landing page ได้รวดเร็ว ใช้ฟีเจอร์ CSS ใหม่และ Web Platform APIs และสร้างเว็บไซต์ responsive ที่โหลดได้ทันที
  • HotFX library เป็นคอลเลกชันเอฟเฟกต์พิเศษสำหรับเพิ่มสีสันและการเคลื่อนไหว

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

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

 
GN⁺ 2024-08-25
ความคิดเห็นบน Hacker News

  • ผมคือ Tim ผู้สร้าง Hot Page ครับ เดิมเป็นไซด์โปรเจกต์เก่า ๆ และตอนนี้กำลังพัฒนาให้เติบโตแบบ บูตสแตรป ด้วยความช่วยเหลือจากเพื่อน ๆ ไม่กี่คน
    เป้าหมายคือการนำความสะดวกของตัวแก้ไขแบบลากแล้ววางอย่าง Squarespace หรือ Wix มาใช้ แต่ไม่ให้ขาดการเชื่อมโยงกับองค์ประกอบพื้นฐานของเว็บเพจอย่างองค์ประกอบ HTML และกฎ CSS ผมมองว่าการมาถึงของ Web Components ทำให้โมเดลนี้ทรงพลังขึ้นมาก
    เดิมทีตั้งใจว่าจะเอามาโพสต์บน HN เองในอีกไม่กี่เดือนข้างหน้า แต่ตอนนี้กำลังทำฟีเจอร์ที่จะทำให้ตัวแก้ไขทรงพลังขึ้นมาก เช่น การแก้ไขคุณสมบัติ CSS ได้มากขึ้นในเชิงภาพโดยยังคงความเชื่อมโยงแบบ 1:1 กับ CSS ที่ถูกสร้างขึ้น, ตัวแก้ไข CSS แบบอินไลน์รายองค์ประกอบที่ใช้ :hover และ media query ได้, ไลบรารีโค้ดสแนปเป็ตที่จะอยู่ในแผงด้านซ้ายร่วมกับองค์ประกอบพื้นฐาน, การผสานกับ Web Components ให้แน่นขึ้น, และการเติมโค้ดอัตโนมัติที่แม่นยำผ่าน VS Code language server เป็นต้น
    ผมซุ่มอ่าน HN มานานและชอบชุมชนนี้มาก โดยเฉพาะอย่างยิ่งเมื่อการตลาดกลายเป็นโจทย์ที่ยากจริง ๆ จึงยินดีรับทุกความคิดเห็นและฟีดแบ็กครับ

    • ในเมื่อ microflash เปิดประเด็นไปก่อนแล้ว ผมขอเสริมด้วย ที่ https://fx.hot.page/ มี Web Components อยู่หลายตัว
      slinky ออกจะงี่เง่าแต่สนุก ส่วนคอมโพเนนต์แกลเลอรีก็ดูเจ๋งทีเดียว มันดูเบาและใช้ง่าย และสิ่งที่ประทับใจคือ หน้าซอร์สโค้ดพร้อมคำอธิบายประกอบ ที่แจกแจงอย่างละเอียดว่าเกิดอะไรขึ้น ถ้าภารกิจคือข้อความที่กระโดด หมุนวน และเรืองแสงหลายสี จุดแข็งก็น่าจะอยู่ที่เอกสารที่เขียนเอง
    • การผสมผสานระหว่าง Web Components กับตัวสร้างแอปแบบภาพ เป็นพื้นที่ที่น่าสนใจมากจริง ๆ ผมเองก็กำลังทำสิ่งคล้าย ๆ กันอยู่ จึงดีใจที่เห็นแนวทางเพิ่มขึ้น
      สไตล์นั้นยอดเยี่ยมอย่างชัดเจน และหวังว่าเซนส์แบบนั้นจะซึมเข้าไปในไซต์ของลูกค้าด้วย ทำให้เว็บมีของที่สนุกและตลกมากขึ้น แต่ยังใช้งานได้จริง
      ผมยังทำแคตตาล็อก Web Components และตัวตรวจสอบ custom elements manifest ควบคู่ไปกับ visual builder ด้วย หวังว่าจะมี Web Components คุณภาพสูงที่เครื่องมือเหล่านี้ใช้ได้เพิ่มขึ้น และแคตตาล็อกก็สามารถฝังเข้าไปใน builder ได้ด้วย
    • ขอโทษที่ทำแผนเปิดตัวบน HN พังนะครับ ผมบังเอิญไปเจอเข้า แต่บนเว็บเรื่องบังเอิญแบบนี้ก็เกิดขึ้นได้ และมันดูเจ๋งมากเลยเอามาโพสต์ที่นี่ครับ ตั้งตารอดูสิ่งที่จะออกมาต่อไป
    • ในฐานะคนที่ชอบเว็บแบบ vanilla ธรรมดา ๆ ตอนนี้ hot.page ถูกใจผมทุกอย่างเลย รู้สึกเหมือนในที่สุดก็มี ทรัพย์สินบนเว็บที่มีบุคลิก ออกมาแล้ว
      เห็นด้วยกับที่ AstroJetson บอกว่าเรื่องการสื่อสารและเอกสารทำได้ดี ผมยังชอบที่แผนราคาและแผนฟรีก็รองรับ custom domain ด้วย สิ่งเหล่านี้ทำให้รู้สึกว่าพวกเขาเป็นคนดี และทำให้อยากเอาใจช่วย
    • ผมชอบ สไตล์ที่ทำให้นึกถึง HyperCard มาก และสงสัยว่าทำขึ้นมาอย่างไร
      อยากรู้ว่าเริ่มจากศูนย์ทั้งหมดเลยหรือเปล่า หรือมี CSS kit ที่มีอยู่แล้วใช้เป็นฐาน

  • ตอนสำรวจดู ผมเจอตัวอย่างโชว์เคส https://alice.hot.page/ แล้วก็พบว่าตัวเองนั่งอ่าน Alice in Wonderland อยู่จริง ๆ 5 นาที คงต้องกลับมาทบทวนหน่อยว่ากำลังใช้เวลาไปกับอะไร

    • เอฟเฟกต์เลื่อนลงไปเรื่อย ๆ นั้นเจ๋งมากจริง ๆ ขอบคุณที่บอก

  • ดูดีทีเดียว แปลกที่มันทำให้รู้สึกเหมือนย้อนกลับไปสมัยเป็นนักเรียนเมื่อเกือบ 20 ปีก่อน ตอนนั้นไม่มีเงินซื้อชื่อโดเมน แต่อยากสร้างเว็บไซต์สักสองสามเว็บบนเวิลด์ไวด์เว็บ
    ระหว่างหาโฮสติ้งฟรีก็ได้รู้จัก Geocities แต่ที่นั่นไม่ได้โฮสต์ไซต์ไว้ใต้ซับโดเมนอย่าง foo.geocities.com แต่เป็นใต้ path แบบ geocities.com/foo
    สุดท้ายก็เจอ 20m.com ซึ่งตามชื่อเลยคือให้ พื้นที่โฮสติ้งฟรี 20MB และสิ่งที่ดีที่สุดคือผมสามารถเผยแพร่เว็บไซต์ของตัวเองใต้ซับโดเมนได้
    น่าทึ่งที่ไซต์หนึ่งที่สร้างไว้ตอนนั้นยังมีชีวิตอยู่: http://encoders.20m.com/ อย่าตัดสินเนื้อหานะครับ ตอนนั้นยังเด็ก ไร้เดียงสา และแค่กำลังเล่นกับเว็บอยู่

    • ปี 2002 ผมก็คล้ายกันเลย ไม่ได้เห็น Geocities แต่ไปเจอ freeservers.com ทันที แล้วทำไซต์ davinder.8m.net ซึ่งยังอยู่ถึงตอนนี้
      ผมทำรหัสผ่านหายตั้งแต่ปี 2007 ถึง 2022 แล้วเพิ่งได้กลับมาเมื่อกู้บัญชีอีเมล Yahoo ได้

  • ผมชอบ สุนทรียะ ที่ใช้ที่นี่ นึกถึงโปรเจกต์อื่นในแนวเดียวกันอย่าง https://mmm.page/.

  • อาจได้รับแรงบันดาลใจจากระบบจัดการ/ปรับแต่งคอนเทนต์โอเพนซอร์ส Hotglue[1] ที่โฮสต์เองได้ด้วยหรือเปล่า
    [1]https://hotglue.me/

    • Hot Page เป็นโปรเจกต์ของผมเอง แต่บังเอิญว่าผมไม่รู้จัก Hot Glue มาก่อน ตอนนี้ลองดูแล้ว ภายนอกอาจคล้ายกัน แต่จริง ๆ ผมมองว่าต่างกัน
      Hot Page เป็นเว็บเอดิเตอร์แบบลากแล้ววางเชิงภาพที่ไม่ใช้ abstraction ดังนั้นตลอดการใช้งาน คุณควบคุม DOM ผลลัพธ์ทั้งหมดได้อย่างสมบูรณ์ พูดคือจัดการทุก element, การซ้อนกัน, attribute, กฎ CSS ฯลฯ ได้โดยตรง เลยให้ความรู้สึกเหมือน CodePen สำหรับสร้างเว็บไซต์จริง ผมเขียนเพิ่มเติมเกี่ยวกับปรัชญานี้ไว้ที่นี่: https://hot.page/takes/picking-the-right-abstraction
    • ไม่คิดว่าคล้ายกันมากนัก ส่วนตัวนึกถึง HoTMeTaL เอดิเตอร์ HTML/หน้าเว็บเก่า ๆ ที่เคยฮิตช่วงสั้น ๆ ในยุค 90 มากกว่า
      มันมีแนวทางคล้ายกัน คือแสดงหน้าเว็บในโหมดกึ่ง WYSIWYG เชิงภาพ และกึ่งโครงสร้าง tree ของ element
    • สิ่งแรกที่ผมนึกถึงก็ Hotglue เหมือนกัน มันเป็นเครื่องมือออกแบบเว็บแบบอิสระจริง ๆ ที่แก้ไข section แล้วใส่โค้ดและสไตล์ของผู้ใช้ได้
      การติดตั้งส่วนใหญ่ก็แทบไม่ต้องทำอะไรนอกจากเอาโฟลเดอร์หนึ่งไปวางบนเว็บเซิร์ฟเวอร์ที่รัน PHP ได้ ผมเคยเขียนรีวิวไว้เมื่อไม่กี่เดือนก่อนด้วย: https://rafichaudhury.com/site/blog/Freehand-Web
    • มีคนพูดไปก่อนแล้ว ถ้าไม่ได้เกี่ยวข้องกับโปรเจกต์ดั้งเดิม ก็ไม่ควรใช้ชื่อให้คล้ายกันขนาดนั้น ผมมองว่ามันดูเหมือน Hotglue เวอร์ชันโคลน/SaaS/งานที่ได้รับแรงบันดาลใจแบบ closed source
      อย่างไรก็ดี น่าเสียดายที่ Hotglue หยุดพัฒนามาหลายปีแล้ว เพื่อนผมบางคนยังใช้กับเว็บส่วนตัวอยู่
    • นึกถึง HoTMetaL หรือ HotDog ด้วย ทั้งคู่เป็น เอดิเตอร์ HTML ในยุค 90

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

  • ผมชอบดีไซน์และวิธีสื่อสารมาก ทำให้ผมกลายเป็นแฟนทั้งตัวคุณและผลิตภัณฑ์เลย
    ตอนแรกผมคลิกเพราะรู้สึกว่าผลิตภัณฑ์น่าจะน่าสนใจกว่าชื่อโพสต์บน HN มาก พอเข้าเว็บก็รู้สึกทันทีว่า “ในที่สุดก็มีคนที่ไม่กลัวจะหลุดออกจากดีไซน์ที่ถูกขัดเกลาด้วยฉันทามติแล้ว” และหวังว่าจะกล้าต่อไปเรื่อย ๆ
    ผมยังรู้สึกด้วยว่ารู้จักคนที่จะชอบดีไซน์แบบนี้ มีคนมาขอให้ผมทำเว็บให้เพื่อน ๆ บ่อย แต่ผมมักต้องปฏิเสธเพราะไม่มีเวลาและความยืดหยุ่น อีกทั้งต้นทุนที่สูงจนน่าหงุดหงิดสำหรับธุรกิจเล็ก ๆ ที่อยากมีเว็บบนโดเมนของตัวเอง พอเห็นหน้า landing page ก็รู้สึกว่านี่แหละสิ่งที่มันกำลังจะให้ ในฐานะนักพัฒนา ดูเหมือนว่าจะมีวิธีทำได้เร็ว หน้าตาดี และไม่แพงมาก
    พอเริ่มอ่านเธรด HN ผมก็แปลกใจว่าคุณดูจริงใจและติดดินแค่ไหน ผมตั้งใจจะลองใช้ผลิตภัณฑ์ และพร้อมอดทนรอแม้มันยังไม่สมบูรณ์ ถ้าคุณยังสื่อสารกับคนที่สมัครใช้อย่างต่อเนื่องเหมือนที่ทำอยู่ใน HN ตอนนี้ ผมคิดว่าจะมีแฟนจำนวนมากที่อยากช่วยผลักดันทั้งคุณและผลิตภัณฑ์

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

  • ขอบคุณที่ทำให้ผมนึกถึงหน้า Geocities ของตัวเองในเช้าวันเสาร์ตรู่ หวังว่าจะเพิ่ม ป้ายกำลังก่อสร้าง แบบหมุน ๆ ได้ด้วย ของแบบนั้นแหละดีที่สุด

    • คุณน่าจะได้เห็นหน้าแรกเวอร์ชันก่อนหน้านี้: https://old.hot.page/ ไอเดียที่คารวะ Web 1.0 นั้นดีมากจริง ๆ แต่ก็ออกจะดิบเกินไปนิด
    • ไม่ใช่โปรเจกต์ของผม เลยเปลี่ยนไม่ได้ แต่ผมก็ได้กลิ่นอาย Geocities เหมือนกันเลยเอามาโพสต์

  • ดูราคาแล้ว เดือนละ 9 ดอลลาร์ได้ แบนด์วิดท์ 5GB ฟังดูแพงอย่างไม่สมเหตุสมผล

    • นี่ไม่ใช่ S3 แบนด์วิดท์เป็นเพียงหนึ่งในเกณฑ์สำหรับแบ่งแพ็กเกจเท่านั้น

  • ไม่รู้ว่าพูดได้ไหม แต่โดยส่วนตัวไม่ค่อยชอบชื่อนี้ ผู้หญิงอาจลังเลที่จะใส่ชื่อตัวเองใน subdomain

    • “Hot” ไม่ได้แปลว่า “เซ็กซี่” เสมอไป ถ้าลองดูเว็บไซต์จริงสักครั้ง จุดนั้นจะชัดมาก
      แต่พวกเธออาจชอบโฮสต์บนที่อย่าง Neocities มากกว่าได้ เพราะ Neocities มีแมวและโดยรวมดูน่ารักกว่าเป็นไปได้สูง
    • Hotmail ก็ประสบความสำเร็จด้วยชื่อนั้นนะ
    • ผมนึกถึง HoTMetaL ซึ่งเป็นหนึ่งในเอดิเตอร์ HTML ยุคแรก ๆ
    • ถึงอย่างนั้นก็เห็นเขียนไว้ว่าสามารถใช้โดเมนแบบกำหนดเองได้