Wie fange ich mit HTML5 an? [geschlossen]


42

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.


Ich würde auf jeden Fall in diveintohtml5 aussehen vorschlagen Aber auch Besuche HTML5ROCKS htm5rocks und dieses könnte unbekannt sein von vielen , aber Facebook viel HTML5 drängt: Überprüfen Sie ihre html5 Seite hier facebook.com/html5
VJth

Mach das agile Ding. <html>Hi</html>Fangen Sie an, weil Sie den DOCTYPE nicht brauchen. Wiederholen.
Michael Durrant

Antworten:


42

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/


Ich würde auch empfehlen, dass Sie JavaScript lernen, und das Buch, das ich dafür empfehlen würde, ist JavaScript: der endgültige Leitfaden Von David Flanagan, Danach ist jQuery fantastisch. Als Editor sind Aptana und DreamWeaver meiner Meinung nach schrecklich. Ich würde die Verwendung von Emacs empfehlen.

Nach der endgültigen Anleitung sollten Sie JavaScript: The Good Parts von Crockford lesen .
kzh

Das erwähnte HTML5-Buch kann kostenlos auf seiner Homepage gelesen werden: html5forwebdesigners.com
user16764

52

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 .


1
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 können. Deshalb bitte ich Sie, Ihre Tipps und Tricks zu Ihrem Arbeitsablauf preiszugeben.

2
+1 "Wie wir alle wissen, wird HTML5 2022 fertiggestellt, drei Jahre nach den Ereignissen in Blade Runner." - tiny.cc/standards-bloat-and-html5

8
Nein, größere Projekte würden nicht in Notepad entwickelt. Das wäre verrückt. Notepad ist ein schrecklicher Texteditor. Sie würden in Notepad ++ entwickelt. :-)
Bobince

11
@ Daniel: Zumindest denke ich, dass dies eine nützliche Antwort ist, egal ob es für Sie nützlich ist. Er empfiehlt die Verwendung eines (guten) Texteditors; Ich mag auch Notepad ++, obwohl ich normalerweise Emacs benutze (kein Editor war vorgesehen). Er sagt, Sie sollten sich nur an häufig unterstützte Funktionen halten und HTML 5 / CSS 3 (& Co.) -spezifische Neologismen auf Ihre (zu diesem Zeitpunkt bereits funktionierenden) Webseiten aufbauen. HTML 5 ist keine ganz neue Sache; Wenn Sie ein Auto fahren können, können Sie ein glänzendes neues Auto mit Hybridmotor, Klimaanlage und allen neuen Funktionen fahren. Es ist jedoch immer noch ein Auto und Sie können es verwenden, um Ihren Weg zu fahren.

5
@ Daniel: Diese Antwort ist bei weitem die nützlichste, auch für Sie, da sie die Ratschläge enthält, die Sie brauchen, und ohne mir mitzuteilen, dass es mich nicht davon abhalten wird, darüber abzustimmen.

9

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 ...


+1, das klingt aufregend. Ich denke, ich werde ihre 45-Tage-Testversion ausprobieren.

Ich habe IntelliJ IDEA für die Java-Entwicklung verwendet und nichts berührt es in Bezug auf die Funktionen, die es bietet. Jetbrains erstellt auch das ReSharper-Plugin für Visual Studio. Wenn ich nach einer reinen webbasierten IDE suchte, probiere ich WebStorm mit Sicherheit aus. Das Refactoring alleine lohnt sich.

8

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.


Danke, wenn ich es richtig finde, ist die Browserkompatibilität immer ein Problem.

Ja, mit modernen Browsern wird es besser. IE 6-7 und 8 zu einem Teil sind in dieser Hinsicht ziemlich schlecht.

Verwenden Sie zum Testen verschiedener Versionen von Internet Explorer entweder IETester ( my-debugbar.com/wiki/IETester ) oder von Microsoft bereitgestellte virtuelle Maschinen ( go.microsoft.com/fwlink/?LinkId=70868 )

6

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.


interessant ... welches Eclipse-Plugin für die JS-Entwicklung würden Sie empfehlen?

Nie verwendet, aber dieser Link kann nützlich sein. Ich glaube, Aptana ist auch als eigenständiges Programm erhältlich (eine Alternative zu Eclipse). Viele Leute haben es empfohlen, aber ich habe es nie ausprobiert. Könnte etwas sein, das es wert ist, untersucht zu werden. stackoverflow.com/questions/613988/…
Jeff

Beachten Sie jedoch, dass sich Notepad stark von Notepad ++ unterscheidet. Ich würde auch keine Website ( keine Website) in Notepad entwickeln.

Einverstanden, ich habe den Kommentar als "Texteditor" und nicht als "MS Notepad" verstanden, aber wenn das der Fall ist, dann haben Sie vollkommen recht
Jeff

5

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.


7
Ehrlich gesagt glaube ich nicht an Konvertierungstools, der Code wird, gelinde gesagt, suboptimal sein. Ich weiß, dass Flash ein großartiges Tool ist, wenn es nicht missbraucht wird, und es wird uns noch lange begleiten. Aber ich würde lieber JS und CSS mit entsprechenden Tools schreiben :)

1
@ Daniel-stimmte zu, dass Konvertierungstools normalerweise nicht so gut sind, und ich sagte das auch. Aber es könnte ein guter Ausgangspunkt für Sie sein, wenn Sie Ihren vorhandenen Blitz konvertieren möchten. Selbst wenn Sie dann den resultierenden HTML-Code manuell überarbeiten, haben Sie zumindest etwas zu tun.
Spudley

4
nitpick: Adobe hat Flash gekauft (Macromedia übernommen) und nicht erstellt.
Kornel

4

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.


2

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.)


Definiere groß. Notepad hat nicht einmal Syntax-Hervorhebungen und die Wartung kann ein Problem mit Notepad sein ... Ich würde mich zumindest für Notepad ++ entscheiden ... sogar für VIM! :)

Ich benutze jetzt Notepad ++ , aber für eine lange Zeit hatte ich einfach nur Notepad verwendet. Und mit "groß" meine ich "groß genug, um genug Geld zu verdienen, um meine Lebenshaltungskosten zu bezahlen und etwas zu sparen".
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.