Hot Page - Grafischer Website-Builder

 (hot.page)
4 Punkte von GN⁺ 2024-08-25 | 1 Kommentare | Auf WhatsApp teilen
  • Hot Page ist ein grafischer Code-Editor, mit dem sich Websites per visuellen Tools und Drag-and-drop erstellen lassen, während gleichzeitig echtes HTML, CSS, JavaScript verwendet wird
  • Statt der Einschränkungen von „no code“ setzt das Produkt auf yes code und betont eine Arbeitsweise, bei der man den Seitenquellcode ansieht, kopiert und remixt, statt sich auf Templates zu verlassen
  • Einfache Websites lassen sich kostenlos erstellen und mit einer eigenen Domain verbinden; ein Upgrade ist nur nötig, wenn mehr Optionen benötigt werden
  • Erstellte Websites können heruntergeladen und anderswo gehostet werden; außerdem lassen sich Frontend-Frameworks, Custom Elements, Web Platform APIs und Open-Source-Code-Snippets nutzen
  • Da auf Webstandards gearbeitet und dabei Webentwicklung gelernt wird, entfällt weitgehend die Last, separate Abstraktionen oder neue Editor-Oberflächen erlernen zu müssen

Visuelle Erstellung auf Basis echten Codes

  • Hot Page ist ein grafischer Website-Builder, der beim Erstellen von Websites echtes HTML, CSS, JavaScript verwendet
  • Der Editor kombiniert einen Drag-and-drop-Code-Editor mit visuellen Tools, sodass sich von Grund auf individuelle Designs erstellen lassen
  • Es gibt eine direkt nutzbare Editor-Demo; das Erstellen kostenloser Websites beginnt auf der Registrierungsseite
  • Statt Templates bereitzustellen, kann man den Quellcode jeder Seite ansehen, kopieren und überall remixen
  • Benötigte Funktionen lassen sich aus Frontend-Frameworks, Custom Elements, Code-Snippets und Open-Source-Implementierungen aus dem Internet übernehmen und einfügen

Bereitstellung und Eigentum

  • Einfache Websites lassen sich kostenlos erstellen, auch eine eigene Domain kann kostenlos genutzt werden; ein Upgrade ist nur nötig, wenn mehr Optionen gebraucht werden
  • Wer Hot Page verlassen möchte, kann die Website herunterladen und mitnehmen und sie überall hosten

Ein Workflow passend zum Lernen von Webentwicklung

  • Einsteiger in die Webentwicklung können beim Erstellen einer Website programmieren lernen, und Nutzer mit Vorkenntnissen können sofort mit ihrem bestehenden Wissen loslegen
  • Da die zentralen Webtechnologien unverändert genutzt werden, verringert sich der Aufwand, neue Abstraktionen oder Editor-Oberflächen zu lernen; auch die Abwärtskompatibilität des Webs wird als Vorteil hervorgehoben
  • In Empfehlungen werden sauberer semantischer Code als Ausgabe, das Erstellen responsiver 12-Spalten-Layouts, schnelle Anpassungen von Landingpages, die Nutzung neuer CSS-Funktionen und Web Platform APIs sowie die Ausgabe sofort ladender responsiver Websites als Stärken genannt
  • Die HotFX library ist eine Sammlung spezieller Effekte für mehr Farbe und Bewegung

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-08-25
Hacker-News-Kommentare

  • Hier ist Tim, der Hot Page gebaut hat. Es war ein altes Side-Project, und jetzt versuche ich mit Hilfe von ein paar Freunden, es per Bootstrap wachsen zu lassen.
    Das Ziel ist, den Komfort von Drag-and-Drop-Editoren wie Squarespace oder Wix zu bieten, ohne die Verbindung zu den grundlegenden Bausteinen einer Webseite wie HTML-Elementen und CSS-Regeln zu verlieren. Mit dem Aufkommen von Web Components ist dieses Modell meiner Ansicht nach deutlich leistungsfähiger geworden.
    Eigentlich wollte ich es erst in ein paar Monaten selbst auf HN posten, aber gerade arbeite ich an Funktionen, die den Editor deutlich mächtiger machen. Geplant sind unter anderem die visuelle Bearbeitung von mehr CSS-Eigenschaften bei gleichzeitiger 1:1-Verknüpfung mit dem erzeugten CSS, ein elementbezogener Inline-CSS-Editor mit :hover und Media Queries, eine Bibliothek mit Code-Snippets im linken Panel neben den Basiselementen, eine engere Integration mit Web Components und präzises Autocomplete über den VS Code Language Server.
    Ich lese HN schon lange still mit und mag diese Community sehr. Vor allem weil sich Marketing als wirklich schwierige Aufgabe herausstellt, freue ich mich über Gedanken und Feedback.

    • Da microflash schon vorgeprescht ist, ergänze ich auch noch etwas. Unter https://fx.hot.page/ gibt es ein paar Web Components.
      slinky ist albern, aber lustig, und die Galerie-Komponente ist ziemlich cool. Es wirkte leichtgewichtig und einfach zu benutzen, und beeindruckend fand ich die Seite mit kommentiertem Source Code, auf der sehr ausführlich erklärt wird, was passiert. Wenn springender, wirbelnder, in vielen Farben leuchtender Text die Mission ist, dann scheint die eigentliche Stärke in der selbst geschriebenen Dokumentation zu liegen.
    • Die Kombination aus Web Components und einem visuellen App-Builder ist wirklich ein reizvolles Feld. Ich baue selbst etwas Ähnliches, daher freue ich mich über mehr Ansätze in diese Richtung.
      Der Stil ist offensichtlich großartig, und ich hoffe, dass dieses Gespür auch auf Kundenseiten ausstrahlt, sodass das Web mehr lustige und schräge, aber tatsächlich nutzbare Dinge bekommt.
      Parallel zum visuellen Builder arbeite ich auch an einem Web-Components-Katalog und einem Validator für custom elements manifest. Es wäre schön, wenn es mehr hochwertige Web Components gäbe, die solche Tools nutzen können, und wenn sich Kataloge auch in Builder einbetten ließen.
    • Tut mir leid, dass ich den HN-Launch-Plan ruiniert habe. Ich habe es zufällig entdeckt, aber solche Zufälle passieren im Web eben, und es sah toll aus, also habe ich es hier einfach gepostet. Ich bin gespannt auf das, was noch kommt.
    • Als jemand, der ganz normales pures Web mag, gefällt mir das heutige hot.page rundum. Es fühlt sich an, als gäbe es endlich wieder Web-Ressourcen mit Persönlichkeit.
      Ich stimme AstroJetson zu, dass Kommunikation und Dokumentation gut sind. Gut finde ich auch das Preismodell und dass sogar der kostenlose Plan eine Custom Domain unterstützt. Solche Dinge lassen die Leute dahinter sympathisch wirken und sorgen dafür, dass ich ihnen die Daumen drücke.
    • Ich mag den an HyperCard erinnernden Stil wirklich sehr und frage mich, wie er gemacht wurde.
      Mich würde interessieren, ob ihr komplett bei null angefangen habt oder ob es ein bestehendes CSS-Kit als Grundlage gab.

  • Beim Herumstöbern habe ich unter den Showcase-Beispielen https://alice.hot.page/ entdeckt, und ich habe tatsächlich fünf Minuten lang Alice im Wunderland gelesen. Ich sollte wohl mal darüber nachdenken, wie ich meine Zeit verbringe.

    • Der Scroll-Effekt nach unten war wirklich toll. Danke für den Hinweis.

  • Sieht ziemlich gut aus. Seltsamerweise fühlte es sich fast so an, als wäre ich wieder Student vor fast 20 Jahren. Ich hatte kein Geld, um einen Domainnamen zu kaufen, wollte aber ein paar Websites ins World Wide Web stellen.
    Auf der Suche nach kostenlosem Hosting stieß ich auf Geocities, aber dort wurden Seiten nicht unter einer Subdomain wie foo.geocities.com, sondern unter einem Pfad wie geocities.com/foo gehostet.
    Schließlich fand ich 20m.com, das seinem Namen entsprechend 20 MB kostenlosen Hosting-Speicher anbot, und das Beste daran war, dass ich meine Website unter einer Subdomain veröffentlichen konnte.
    Erstaunlicherweise lebt eine der Seiten, die ich damals gebaut habe, noch immer: http://encoders.20m.com/ Bitte urteilt nicht über den Inhalt. Ich war jung, naiv und habe einfach nur mit dem Web herumgespielt.

    • 2002 war es bei mir ähnlich. Geocities habe ich nicht gesehen und bin direkt bei freeservers.com gelandet, wo ich die Seite davinder.8m.net gebaut habe, und die lebt immer noch.
      Von 2007 bis 2022 hatte ich das Passwort verloren und erst wiedergefunden, nachdem ich mein Yahoo-E-Mail-Konto wiederhergestellt hatte.

  • Mir gefällt die Ästhetik, die hier verwendet wird. Das erinnert mich an ein anderes Projekt mit ähnlichem Vibe: https://mmm.page/

  • Vielleicht ist es von Hotglue[1], dem Open-Source-System zur Inhaltsmanipulation mit optionalem Self-Hosting, inspiriert
    [1]https://hotglue.me/

    • Hot Page ist mein Projekt, und irgendwie kannte ich Hotglue bis jetzt nicht. Nachdem ich es mir nun angesehen habe, wirkt es oberflächlich ähnlich, aber tatsächlich ist es etwas anderes
      Hot Page ist ein visueller Drag-and-Drop-Webeditor ohne Abstraktionen, sodass man während der gesamten Nutzung die vollständige Kontrolle über das resultierende DOM behält. Man kann also jedes Element, jede Verschachtelung, jedes Attribut und jede CSS-Regel direkt anfassen. Es fühlt sich daher eher wie eine Art CodePen zum Erstellen echter Websites an. Über diese Philosophie habe ich hier mehr geschrieben: https://hot.page/takes/picking-the-right-abstraction
    • Ich finde nicht, dass es besonders ähnlich ist. Mich hat es eher an HoTMeTaL erinnert, einen alten HTML-/Seiteneditor, der in den 90ern kurz populär war
      Dort gab es einen ähnlichen Ansatz, bei dem die Seite in einem visuellen Quasi-WYSIWYG- und Quasi-Elementbaum-Modus angezeigt wurde
    • Mein erster Gedanke war auch Hotglue. Das war ein wirklich freihändiges Webdesign-Tool, bei dem man Abschnitte bearbeiten und eigenen Code sowie Styles einfügen konnte
      Für die Installation brauchte man im Grunde auch kaum mehr, als einen Ordner auf einen Webserver mit PHP-Unterstützung zu legen. Ich habe vor ein paar Monaten auch einen Review-Artikel darüber geschrieben: https://rafichaudhury.com/site/blog/Freehand-Web
    • Hat schon jemand vor mir gesagt. Wenn das Projekt nichts mit dem Originalprojekt zu tun hat, hätte man keinen so ähnlichen Namen wählen sollen. Es wirkt wie ein Closed-Source-Hotglue-Klon/SaaS/Ableger
      Schade ist jedenfalls, dass Hotglue in den letzten Jahren offenbar nicht weiterentwickelt wurde. Ein paar Freunde von mir nutzen es für ihre persönlichen Websites noch immer
    • Es erinnert auch an HoTMetaL oder HotDog. Beides waren HTML-Editoren aus den 90ern

  • Schön, dass dieser seltsame und glitzernde Stil wiederkommt. Wir waren viel zu lange in einer Welt aus sauberem, flachem Design gefangen
    Inzwischen ist das natürlich etwas selbstbewusster und frei von Zynismus oder Selbstironie kaum noch denkbar, aber vielleicht ist genau das Postmoderne daran

  • Ich mag das Design und die Art der Kommunikation wirklich sehr. Es hat mich zum Fan gemacht, sowohl vom Produkt als auch von dir
    Anfangs habe ich geklickt, weil ich das Gefühl hatte, dass das Produkt viel interessanter sein würde als der HN-Titel. Als ich auf die Website kam, dachte ich sofort: „Endlich jemand, der keine Angst davor hat, sich vom per Konsens glattgeschliffenen Design zu lösen“, und ich hoffe, dass es weiter so mutig bleibt
    Ich hatte auch sofort das Gefühl, Leute zu kennen, denen dieses Design gefallen würde. Ich werde oft gefragt, ob ich Websites für Freunde bauen kann, muss aber meist ablehnen, weil mir Zeit und Flexibilität fehlen und weil die Kosten für kleine Unternehmen, die unter ihrer eigenen Domain arbeiten wollen, oft frustrierend hoch sind. Die Landingpage ließ mich vermuten, dass genau dafür hier eine Lösung entstehen soll. Als Entwickler scheint es ein Weg zu sein, schnell etwas zu bauen, das gut aussieht und nicht zu viel kostet
    Als ich dann den HN-Thread zu lesen begann, war ich überrascht, wie authentisch und bodenständig du wirkst. Ich werde das Produkt ausprobieren und auch Unvollkommenheiten erst einmal in Kauf nehmen. Wenn du mit den Leuten, die sich anmelden, weiter so kommunizierst wie jetzt auf HN, wirst du wahrscheinlich viele Fans gewinnen, die dich und das Produkt unterstützen wollen

    • Danke. Ich habe das tatsächlich fast völlig isoliert allein aufgebaut, daher tut es wirklich gut, so leidenschaftliches Feedback zu bekommen
      Mir ist sehr wichtig, Hot Page aus eigenen Mitteln zu bootstrappen, damit niemand Druck machen kann, das Design gewöhnlicher zu machen oder Kunden auf ausbeuterische Weise zu behandeln. Natürlich war es nicht leicht, die gesamte Programmierung und den Großteil des Marketings selbst zu übernehmen
      Im Moment brauche ich wirklich Kunden, die die Beta ausprobieren und Feedback geben können. Danke für die Unterstützung

  • Danke, dass du mich an diesem frühen Samstagmorgen an meine Geocities-Seite erinnert hast. Es wäre schön, wenn man auch ein rotierendes Baustellenschild hinzufügen könnte. Das war immer das Beste

    • Du hättest die frühere Homepage sehen sollen: https://old.hot.page/ Die Anspielung auf Web 1.0 war wirklich großartig, aber vielleicht insgesamt etwas zu roh
    • Es ist nicht mein Projekt, daher kann ich daran nichts ändern, aber ich habe es auch gepostet, weil es mich an Geocities erinnert hat

  • Wenn ich mir die Preise ansehe: 9 Dollar im Monat für 5 GB Bandbreite klingt unangemessen teuer

    • Das hier ist nicht S3. Die Bandbreite ist nur eines der Kriterien zur Staffelung der Tarife

  • Persönlich finde ich den Namen nicht besonders gut, falls ich das sagen darf. Ich könnte mir vorstellen, dass Frauen zögern, ihren Namen in eine Subdomain zu setzen

    • „Hot“ bedeutet nicht immer „sexy“. Wenn man sich die eigentliche Website ansieht, wird das sehr deutlich
      Trotzdem ziehen manche es vielleicht vor, lieber irgendwo wie bei Neocities zu hosten. Das liegt möglicherweise einfach daran, dass es bei Neocities Katzen gibt und insgesamt alles niedlicher wirkt
    • Hotmail ist mit diesem Namen schließlich auch gut gefahren
    • Mich hat es an HoTMetaL erinnert, einen der frühen HTML-Editoren
    • Es steht dort aber, dass man auch eine eigene Domain verwenden kann