[Suche] HTML Editor mit Live Vorschau

Ich nehm phase 5. Das geht ganz gut

Dreamweaver sollte das recht gut können, ich weiß aber nicht ob es immer noch eine Free Version davon gibt

Ist nicht zu empfehlen, da du besser dein Markup, CSS und JavaScript direkt in den gängigen Browser-Engines testest. Das sind Firefox, Webkit (Safari oder Chrome) und Internet Explorer 8 bis 10.

Das ist auch nicht weiter schwierig, indem du einfach im Editor entwickelst, dann die Datei abspeicherst, auf das Browserfenster wechselst und die Seite neu lädst. Mit Tastaturkommandos ist das in weniger als einer Sekunde zu bewerkstelligen, wenn du das ein paar Mal gemacht hast - Und zwar ohne dass du dafür die Maus benutzen musst.

Es gibt auch diverse kleine Helferlein in Form von JavaScripts, die die Seite automatisch bei Änderungen neu laden. Im Zwei-Monitor-Betrieb ist damit sehr effektives Arbeiten möglich, ohne ständig das Fenster wechseln zu müssen.

Allgemein empfehle ich dir, dass du dir eher einen effektiven Workflow angewöhnst anstatt auf Softwaretools zu setzen, denn die sind eher sekundär, wenn du schnell mit Tastaturkommandos arbeiten kannst.

Wenn du willst, dann kann ich dir meinen Workflow mal in einer Screensharing-Session zeigen. Ich mache das nun immerhin schon seit fast 10 Jahren.

So viel werde ich dir vermutlich auch gar nicht zeigen können

Es wird wohl vielmehr eine Bestätigung für das sein, was du ohnehin schon machst.

Spätestens, wenn du eine Form von Programmierung (PHP, ASP, JSP, ...) dazu bringst, dann bleibt dir der Fensterwechsel so oder so nicht erspart. Denn dann musst du zwingend nach jeder Änderung die Seite neu laden.

Wichtiger für deine Lernphase wird sein, dass du Erfahrung sammelst. Dabei ist die Software egal. Sie sollte dir natürlich nur nicht im Weg stehen. Aber da HTML und CSS nun wirklich sehr einfach sind und keine komplexen Tools benötigen, ist das auch nicht weiter schwierig.

Für die Wahl deines Editors kann ich dir nur ein paar Sachen empfehlen:

Er sollte Autovervollständigung und Code-Snippets beherrschen. Das erspart viel Arbeit.

Er sollte ein dunkles Darstellungsthema haben. Sprich: Helle Schrift auf dunklem Grund. Damit arbeitet es sich IMO deutlich Augenschonender als mit einem hellen Thema.

Er sollte FTP-Verbindungen beherrschen, damit du entweder direkt auf dem Webspace arbeiten kannst, oder so wie Coda das löst: Lokal arbeiten und irgendwann gesammelt alle geänderten Dateien hochladen.

Die Anzeige der zugehörigen Klammer bzw. Des zugehörigen Tags ist auch keine schlechte Sache. Damit weißt du immer, ob alle Elemente ordentlich geschlossen sind. Das wird spätestens bei PHP eine wichtige Sache.

Eine Unterstützung für GIT bzw. für SVN ist auch eine gute Sache, auch wenn dich das Thema jetzt vermutlich noch nicht groß interessieren wird.

Da spricht der Fachmann

Das Meiste davon gilt btw. allgemein fürs Programmieren, wenn du aber überhaupt jemals vorhast etwas Größeres zu programmieren würde ich mich so früh wie möglich mit z.Bsp. git Auseinandersetzen. Du wirst die Versionskontrolle nicht mehr missen wollen, gerade wenn du mal im Team arbeitest und du so einen Hammel hast der 3 Wochen alten Code comitted... Und vor allem vermeidest du, indem du dich an den Workflow mit git gewöhnst, selbst zu diesem Hammel zu werden

An der Stelle würde ich persönlich aber von Plugins für deine Programmierumgebung abraten und stattdessen das entsprechende (Kommandozeilen-) Programm nutzen, habe mit diesen Plugins bisher nur sehr schlechte Erfahrungen gemacht. Vielleicht hatte ich aber auch nur die falschen Editoren. Da wurde dann teilweise einfach die gesammte Ordnerstruktur samt kompilierten Code, und noch besser, die eigene config File mit den eingestellten Ausnahmen hochgeladen.

Vielleicht greife ich hier aber auch nur zu weit vor

Ja, Animationen macht man mit JavaScript. Genauer gesagt macht man damit AUCH Animationen. Aber es ist sehr, sehr viel mächtig als das.
Mittlerweile kann man mit CSS3 auch sehr nette Dinge animieren. Dafür braucht es oftmals gar kein JS mehr. Allerdings nur in der Theorie, denn es gibt einen Schrottbrowser namens Internet Explorer. Der kann das alles nicht.

Um JS kommst du so oder so nicht herum. Aber nimm dir nicht zu viel auf einmal vor. Eigentlich solltest du erst einmal HTML und CSS einigermaßen sitzen haben. Dann kannst du dich um Logiken kümmern. Dabei hast du die Wahl zwischen serverseitiger und browserseitiger Logik. Beide sind wichtig, aber haben völlig unterschiedliche Ansätze, Nutzen und Zwecke.

PHP wird (grob) meist dazu verwendet, um Daten bereit zu stellen und Seiten aus verschiedenen Teilen zusammen zu setzen. Das passiert auf dem Server und wird dann in fertiger Form zum Client geschickt.
Ab dann kann JS weitere Dinge übernehmen. Zum Beispiel das Nachladen und Darstellen von Informationen in der Website ohne diese neu laden zu müssen (AJAX). Oder eben auch die Animationen. Wobei Letztere immer nur dem User Interface (UI) dienlich sein sollten. Sprich: Du sorgst mit JS dafür, dass der Nutzer die fertig geladene Seite besser bedienen kann. Das können hübsche Boxen sein, die bei Mouse-Over auf ein Element eingeblendet werden, oder auch eine Bildergalerie, die Fotos in einem sog. Overlay anzeigt. Die Möglichkeiten sind vielfältig. JS ist ein sehr mächtiges Werkzeug, um die Nutzerfreundlichkeit stark zu verbessern. Allerdings muss man wissen was man tut. UI-Design ist eine Kunst, die man nur durch viel Übung und gute Intuition erlernen kann.

Daher kann ich dir dazu nur sagen: Backe kleine Brötchen für den Anfang. Sonst wächst dir das schnell über den Kopf und du verlierst die Geduld

Was mich grad aber interessieren würde Buzz, falls du da schon etwas mehr Erfahrung hast, wie sieht es derzeit mit WebGL aus? Wird es genutzt bzw. ist es überhaupt schon nutzbar? (Abgesehen von gewissen Schrottbrowsern )

Ich hab auch schon öfter selbst Websiten mit CSS und HTML erstellt.
Ich hab mir das Zeug allerdins alles selbst beigebracht und hab immer das Gefühl,
ich kanns nicht richtig. Man hat mir neulich erst gesagt, dass man Absätze heutzutage gar nicht mehr mit <br/> macht sondern den <p></p> Tag benutzt.
Sachen gibt, die gibts gar nicht!

Und die Seite, die ich im Moment betreibe, läd dermaßen langsam.
Ich weiß allerdings nicht wieso. Vielleicht kann mir da einer helfen?

Geras schrieb:

Was mich grad aber interessieren würde Buzz, falls du da schon etwas mehr Erfahrung hast, wie sieht es derzeit mit WebGL aus? Wird es genutzt bzw. ist es überhaupt schon nutzbar? (Abgesehen von gewissen Schrottbrowsern )

Für Websites benötigen wir kein WebGL. Haben damit auch noch nicht herum gespielt.
Nutzbar soll es schon sein, aber eben nur in ordentlichen Browsern. Da die halbe Welt aber immer noch mit dem IE unterwegs ist, ist die Sache noch kein Thema. Angeblich soll sich das ja mit dem IE10 alles dramatisch verbessern. Aber das hat Microsoft auch schon beim IE7, 8 und 9 versprochen.

BerlinStold schrieb:

Ich hab auch schon öfter selbst Websiten mit CSS und HTML erstellt.
Ich hab mir das Zeug allerdins alles selbst beigebracht und hab immer das Gefühl,
ich kanns nicht richtig. Man hat mir neulich erst gesagt, dass man Absätze heutzutage gar nicht mehr mit <br/> macht sondern den <p></p> Tag benutzt.
Sachen gibt, die gibts gar nicht!

Und die Seite, die ich im Moment betreibe, läd dermaßen langsam.
Ich weiß allerdings nicht wieso. Vielleicht kann mir da einer helfen?

Langsam ladende Seiten können viele Ursachen haben. Am HTML bzw. CSS kann es eigentlich nicht liegen. Ist das ein CMS auf PHP oder dergleichen?

BuzzJoe schrieb:

Für Websites benötigen wir kein WebGL. Haben damit auch noch nicht herum gespielt.
Nutzbar soll es schon sein, aber eben nur in ordentlichen Browsern. Da die halbe Welt aber immer noch mit dem IE unterwegs ist, ist die Sache noch kein Thema. Angeblich soll sich das ja mit dem IE10 alles dramatisch verbessern. Aber das hat Microsoft auch schon beim IE7, 8 und 9 versprochen.

Ok, dann weißt du hier genausoviel wie ich

Ich hab mal ne txt-Datei reingepackt, wo alles was auf mich verweißt durch ein "zensiert" ersetzt ist.
Da auf der Website im Impressum meine Adresse und mein echter Name stehen, will ich das gerne von hier trennen!

Der Quelltext nützt recht wenig, um da eine brauchbare Aussage zu treffen. Wenn du willst, dann kannst du mir gern eine URL zur Seite per PN schicken. Dann messe ich mal alles durch.

Achja: Wirf' Prototype raus. Das Ding ist tot und Schrott. jQuery ist die korrekte Wahl.

JS kann ich gar nicht. Die Scripte da drin sind einfach nur von einem kostenlosen Service, die das anbieten...

Für deinen speziellen Fall brauchst du eigentlich auch gar kein JS. Das geht alles mit CSS zu bewerkstelligen