Wie fange ich mit HTML5 an? [geschlossen]

Was ist der empfohlene Workflow zum Erlernen von HTML5? Welche Tools sollte ich installieren? Welches SDK? Wo soll man anfangen? Wie teste ich? Wie kann man debuggen? Was lese ich

Ich verstehe, dass das, was oft als "HTML5-Entwicklung" bezeichnet wird, eine Mischung aus HTML, CSS, JS und vielem mehr ist. Ich glaube jedoch nicht, dass größere Projekte in Notepad entwickelt werden. Deshalb bitte ich Sie, Ihre Tipps und Tricks zu Ihrem Arbeitsablauf preiszugeben.

Wenn ich jetzt ein neues HTML5-Projekt von Grund auf neu starten würde, würde ich wahrscheinlich so etwas tun:

Laden Sie das HTML5 Boilerplate herunter und verwenden Sie es . Auf diese Weise erhalten Sie eine neue Seite, auf der die meisten wichtigen Dinge initialisiert und zum Testen bereit sind. Enthält auch einige nützliche Debugging-Funktionen, die Sie zusammen mit Firebug verwenden sollten

Schauen Sie über Tauchen Sie in HTML5 ein , um den Verlauf und die Verwendung des Codes zu sehen.

Auf meinem Mac verwende ich Coda und bei der Arbeit verwende ich Dreamweaver in der Codeansicht. Sie werden die Seite nicht für Sie erstellen, aber Code-Vervollständigung, Andeutungen und Farbcodierung funktionieren gut. Ich bin sicher, Aptana und dergleichen bieten großartige Funktionen, aber ich habe es immer einfacher gefunden, besser zu sein, wenn es um HTML geht.

Auf jeden Fall die HTML5- und CSS3-Bücher von "A Book Apart" abholen (CSS3 erscheint später in diesem Monat)

Und zum Schluss - um das Ganze herauszufinden, schauen Sie sich Folgendes an:

Opera Developer Network - http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Canvas Cheat Sheet - http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

Wie zeichnet man mit HTML5 Canvas http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

HTML5 ist keine einzige integrierte Sache. Es ist eine Sammlung von HTML-Erweiterungen, von denen einige weit verbreitet sind und sicher verwendet werden können, von denen einige noch niemand implementiert hat, und eine ganze Menge dazwischen. Wenn Sie versuchen, HTML5 als eine zusammenhängende Entwicklungsplattform zu behandeln und alles zu lernen, werden Sie eine wirklich schwierige Zeit haben.

Stattdessen müssen Sie das Web als Ganzes lernen: Grundlegendes HTML, CSS, JavaScript, das Kern-DOM, das HTML-DOM, das grundlegende Browser-Objektmodell. Dann können Sie Funktionen des neuen Webs nach Bedarf hinzufügen und die Browserunterstützung ermöglicht Folgendes: HTML5-Erweiterungen, CSS3-Eigenschaften, Zeichenfläche, Websockets, die anderen DOM- und BOM-Erweiterungen, die aus der HTML5-Arbeit hervorgegangen sind ...

Der Funktionsumfang des Webs entwickelt sich ständig weiter und es gibt keinen einzigen Bezugspunkt. W3Schools (was übrigens nichts mit W3C zu tun hat) versucht es, aber es steckt voller Fehler. Traue nicht dem, was es als Evangelium sagt.

Möglicherweise müssen Sie sich auf das definitive HTML4 , CSS2 , beziehen . DOM Core- und DOM HTML- Spezifikationen, um dies sicherzustellen. Sie sollten sich auch die MDC-DOM-Referenz und die MSDN-DOM-Referenz ansehen, um zu erfahren, welche Funktionen Firefox und IE unterstützen. Die HTML5-Spezifikation enthält neben den neuen HTML-Erweiterungen auch viel aktuelleres DOM-Material, ist jedoch ein langes und unhandliches Dokument, das selbst von den Standards von Standarddokumenten nur schwer zu verwenden ist. Obwohl nicht annähernd so schlecht wie die undurchdringliche ECMAScript- Spezifikation. (Zum Glück werden Sie wahrscheinlich bereits mit vielem vertraut sein, wenn Sie es gewohnt sind, mit ActionScript zu arbeiten.)

Sie benötigen weder ein SDK noch eine IDE, um HTML / CSS / JS zu entwickeln. Sie können eine IDE verwenden, wenn Sie möchten, aber ich bin ziemlich glücklich, alles in meinem Lieblingstexteditor zu tun. Sie müssen sich keine Gedanken über das Erstellen / Kompilieren machen, sondern speichern Ihre Datei und klicken auf "Neu laden". Die meisten modernen Webbrowser verfügen über einen Debugger und andere integrierte Entwicklungstools (z. B. IE8) oder sind als Erweiterungen (z . B. Firebug ) verfügbar .

Ich empfehle WebStorm von JetBrains (oder einem ihrer auf IntelliJ basierenden Produkte wie PHPStorm, RubyMine, PyCharm, da alle HTML unterstützen). Sie erhalten CSS, HTML Auto-Vervollständigung und Live-Überprüfung (während Sie tippen) auf Richtigkeit. Refactoring-Unterstützung für Javascript (etwas, das ich sonst nirgendwo gesehen habe) und sogar die Möglichkeit, Javascript in der IDE zu debuggen (wenn Firebug oder die Chrome Developer-Tools für Sie fehlen). Es bietet Projektunterstützung sowie SVN-, Git-, Perforce- und CVS-Unterstützung. Und eine Menge anderer Funktionen, die sehr zu empfehlen sind ...

Mehrere unschätzbare Werkzeuge

• FireBug - Entwickler-Plugin für Firefox. Ermöglicht das Debuggen von JS, HTML und Styles.
• IE Developer Toolbar für ältere Versionen von IE (6,7). Dort ist allerdings nicht viel HTML5. Neuer IE hat F12-Tool.
• Chrome hat seine Entwicklertools

Diese Tools dienen hauptsächlich zum Debuggen von Javascript und zum Ermitteln der Positionierung von Elementen und der angewandten CSS-Stile.

Wenn Sie nach einer IDE-Empfehlung suchen, ist Eclipse ziemlich gut. Wenn Sie nach Javascript-Tools suchen, eignet sich Firebug hervorragend zum Debuggen.

Sie brauchen jedoch wirklich keine "Werkzeuge". Ich denke, die Vorstellung, dass "größere Projekte nicht in Notepad entwickelt werden können / werden", ist ganz einfach falsch. Ich verwende Notepad ++, um alle meine HTML / CSS / Javascript zu schreiben, und ich denke, dies ist ein sehr verbreiteter Ansatz - auch für professionelle Webdesigner. Notepad ++ verfügt über Syntaxhervorhebungen für HTML, CSS und Javascript sowie automatische Vervollständigung. Wenn Sie Software suchen, die mehr bietet, geben Sie bitte an, welche Funktionen für Sie wichtig sind. (Übrigens, wenn Sie ein Mac-Benutzer sind, versuchen Sie es mit BBEdit).

Größere Sites werden oft mit Frameworks wie Django oder Ruby on Rails geschrieben, aber das hat wirklich nichts mit der Verwendung oder dem Erlernen von HTML5 zu tun.

Ich glaube, dass Adobe (die Macher von Flash) gerade dabei ist, ein Tool zur Konvertierung von Flash in HTML5 herauszubringen, das sich möglicherweise lohnt.

http://news.softpedia.com/news/Adobe-Showcases-Flash-to-HTML5-Converter-163709.shtml

In der Tat wird Flash ein Werkzeug für die Entwicklung von HTML5.

Und seit dieser Woche hat Microsoft angekündigt, dass sie mit Silverlight in eine ähnliche Richtung gehen. Es sieht also so aus, als würde jetzt alles in HTML5 laufen.

Die eine Frage, die ich habe, ist, wie gut der von diesen beiden Tools generierte HTML5-Code sein wird. Wir werden die Antwort darauf erst wissen, wenn sie tatsächlich veröffentlicht wurden, aber ich habe noch nie festgestellt, dass generierter Code eine besonders gute Qualität aufweist. Hoffentlich haben wir nicht das moderne Äquivalent von MS Front Page.

Ich würde dringend empfehlen, ein Build-System für Ihren Javascript-Code einzurichten und es bei jedem Build gegen JSLint prüfen zu lassen . Ich habe festgestellt, dass dies frühzeitig viele Fehler aufdeckt und eine gute Codierung fördert (spielen Sie mit den Optionen, wenn sie zu streng sind). Ein gutes Beispiel finden Sie in jQueries Build-System auf GitHub .

Abgesehen davon bin ich ein großer Fan von Notepad ++, da ich noch keine IDE gefunden habe, die nützliche Funktionen bietet, ohne viel Aufblähen und GUI-Tricks.

Sie können sich jedoch den neuesten Dreamweaver ansehen, der Code-Editor ist nicht schlecht und es gibt eine Widget-Galerie mit einer Reihe von HTML5- Widgets, die Sie einfach herunterladen können.

Ich glaube nicht, dass größere Projekte in Notepad entwickelt werden können

Da liegst du falsch. Ich bin ein langjähriger Benutzer von Notepad und denke, dass dies der beste Weg ist. Zum Debuggen verwende ich die IE Developer Tools, Firefox FireBug und Chrome Inspector.

In Bezug auf HTML5 handelt es sich im Grunde genommen nur um reguläres HTML mit ein paar zusätzlichen Spielsachen. Außerdem hindert Sie nichts daran, ein HTML5-Dokument zu deklarieren und nur Dinge zu verwenden, die in älteren HTML-Versionen enthalten sind.

Eine Sache, die ich unbedingt vermeiden möchte, sind Programme wie Dreamweaver. Mit grafischen Designtools sehen die Dinge einfach aus, aber wenn Sie Ihre eigenen Dinge tun möchten, wird es sehr schwierig. (Ich sehe die anderen Studenten des Kurses an, den ich mache, wenn ich das sage.)