Die besten Tools und Referenzen zur Entwicklung mit HTML5

HTML5 LogoFür Einsteiger, Umsteiger und Experten: Wir haben an dieser Stelle die wichtigsten Referenzen und Tools zusammengestellt welche den Einstieg in die HTML5 Entwicklung erheblich erleichtern sollten.

An erster Stelle steht selbstverständlich DIE Referenz überhaupt. Die offizielle Website des W3C Konsortiums. Abgesehen von vielen hilfreichen Referenzen und Tutorials, gibt es hier auch noch den W3C-Validator welcher für Webentwickler unentbehrlich ist um Webseiten auch Standard konform entwickeln zu können. Besonders zu empfehlen ist an dieser Stelle das W3C-Cheatsheet: Ein Verzeichnis mit allen nötigen Befehlen aus CSS3, XSLT und natürlich HTML(5).

Eine weitere und eher praxisorientierte Referenz bietet SELFHTML5.org, welche abgesehen von Beispielen auch mit einem Tutorial aufwartet und auf die Entwicklung von Apps für bspw. Smartphones eingeht. Durch die Verwendung von HTML5 werden keine nativen Programmiersprachen des jeweiligen Handybetriebssystems benötigt, weil Smartphones mittlerweile HTML5 insgesamt besser interpretieren können als der normale Browser auf dem Desktop, ist dieser Schritt auch vom Aufwand her empfehlenswert.

Selbstverständlich hat auch Mozilla mit dem Mozilla Developer Network seine eigene HTML5 Referenz. Hier findet man Coding-Beispiele und leicht abgewandelte und möglicherweise leicht verständlichere Referenzen.
Microsoft hat auch eine Art eigene HTML5 Referenz und zwar die HTML5 Labs. Die Vorteile der Referenz an dieser Stelle ist die doch sehr übersichtliche Strukturierung der verschiedenen Themen. Von WebSockets bis hin zur File-API findet man alle Informationen die man benötigt.
Eines der besten Praxisbeispiele überhaupt findet man in dem Google Projekt HTML5Rocks! Hier wird nicht nur theoretisch auf einige Funktionen von HTML5 eingegangen sondern diese auch in der Praxis in einer Art Slideshow veranschaulicht (selbstverständlich funktioniert dies mit dem Browser Chrome am besten).

HTML5 ist ein sehr spezielles und vor allen Dingen auch sehr breites Thema. Von daher ist es auch besser tatsächlich in all diesen Referenzen zu stöbern, weil an manchen Stellen einfach das Verständnis fehlt oder es der Sachverhalt einfach verdammt schlecht erklärt wurde. Aber nun zu den Tools:

An erster Stelle benötigt es die entsprechend fähigen Browser: Sowohl Internet Explorer 9 + 10, als auch Googles Chrome, Opera und Mozillas Firefox eignen sich zum Entwickeln und Debuggen. Lediglich Apples Safari hat ab und an noch starke Interpretationsschwierigkeiten.
Mit hauseigenen Developertools kommen der Internet Explorer 9 und Googles Chrome. Bei allen anderen Browser muss die Fähigkeit zur Entwicklung via diverser Plugins nachgerüstet werden.

Editoren zur optimierten HTML5 Entwicklung sind unter anderem Notepad++ und Aptana Studio. Selbstverständlich gibt es mit Sicherheit noch einige hundert anderer Editoren. Aber wirklich leicht von der Hand geht die Arbeit eher mit den beiden genannten. Wobei Notepad++ kostenfrei ist und Aptana Studio nur bei nicht gewerblicher Nutzung kostenlos ist. Aptana ist selbstverständlich sehr mächtig und hat abgesehen von einer übersichtlichen Projektstruktur auch einige eigene Validatoren und Browseremulatoren in sich. Selbstverständlich bekommt man auch immer wieder gesagt das der normale Texteditor von bspw. Windowsseitig schon vollkommen ausreicht, aber wer will das schon ohne Projektstruktur und mit unzähligen Dateien?

Tools für Animationen stehen auch bereit: Derzeit dass das noch in der Entwicklung befindliche Adobe Edge (aktuell Preview 6), die finale Version von Hype für den Mac und Sencha Animation. Weiter Tools für Animationen mit denen man tatsächlich arbeiten kann sind mir nicht bekannt. Alle aufgezählten Animationstools sind kostenpflichtig, jedoch ist der Umfang und die leichte Arbeit mit den Animation wirklich das Geld wert. Adobe Edge bspw. kann per Drag and Drop WebSockets erstellen und hinterlegt auch die entsprechenden JavaScript Snippets die dafür nötig sind.

Wenn dem einen oder anderen noch ein wichtiges Tool für die Entwicklung mit HTML5 einfallen sollte, kann er es mich gerne in der Kommentarfunktion wissen lassen. Ich werde die Tools nachträglich einpflegen.

Veröffentlicht in: Entwicklung Schlagworte: , , , , , , , , , , , ,

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>