HTML5-Vorlagengeneratoren, Frameworks und Tools
Obwohl die großen Akteure der Webdesign-Industrie in den letzten Jahren HTML5 übernommen haben, gibt es nicht viele andere, die es in der praktischen Lösung einsetzen, hauptsächlich aufgrund von Zeitmangel oder Verständnis. Wenn eine Sprache für eine bestimmte Zeit gefördert wird, ist die Wahrscheinlichkeit groß, dass es Enthusiasten geben wird, die sich mit der Beseitigung Ihrer Probleme befassen, indem sie HTML5-Vorlagengeneratoren und Frameworks erstellen.
Wir bei Hongkiat möchten, dass Ihre Entwicklungsarbeit so einfach wie möglich gestaltet wird. Nachfolgend finden Sie eine Liste der HTML5-Vorlagengeneratoren und -Frameworks, die entweder Ihre HTML5-Entwicklung beschleunigen oder problematische Probleme wie Browserkompatibilität erleichtern. Bis zum Ende des Tages wird Ihre HTML5-Entwicklung mit diesen Generatoren und Frameworks nur noch einfacher und glücklicher!
Warum Framework??
Obwohl es einige Zeit dauern kann, um das Framework tatsächlich zu erlernen, müssen Sie lediglich den Inhalt und geringfügige Modifikationen nach Ihrem Geschmack hinzufügen, wenn Sie das Framework bereit haben. Machen Sie sich auch keine Sorgen, die Welt wird Sie nicht verachten, wenn Sie einen HTML5-Vorlagengenerator oder ein einsatzbereites Framework verwenden. Praktikabilität steht an erster Stelle!
Außerdem haben Frameworks, die es zu nutzen gilt, meist treue Anhänger und Unterstützung. Ein Vorteil bei der Verwendung von Frameworks ist, dass Sie sich nicht um ernsthafte Probleme wie Cross-Browser- und Cross-Platform-Kompatibilität sorgen müssen. Jemand anderes hat dies bereits für Sie besprochen. Natürlich können Sie auch zu Open Source-Bibliotheken und Frameworks beitragen.
Schließlich ist es immer gut, eine zusätzliche Ausrüstung in Ihrer Design-Toolbox zu haben!
Vorlagengeneratoren und Frameworks
Initializr
Mit wenigen Klicks können Sie eine HTML5-Vorlage erstellen. Initializr gibt Ihnen auch eine Option, ob Ihre Vorlage JavaScript oder jQuery, Serverkonfigurationen und Google Analytics enthalten soll.
Initializr basiert auch auf HTML5BoilerPlate, einem weiteren hervorragenden Werkzeug, um Ihren HTML5-Zugriff zu erweitern, Funktionen hinzuzufügen und Ihre gesamte Website zu verbessern.
HTML5-Vorlagengenerator
Eine Alternative ist der HTML5-Vorlagengenerator von Shikiryu.com. Es enthält eine zusätzliche Option zum Hinzufügen einer Beschreibung für den Autor der Website. Außerdem enthält es Optionen für das Favicon- und Apple Touch-Symbol, falls diese automatisch in die Vorlage eingefügt werden sollen.
SwitchToHTML5
Ein weiterer großer HTML5-Framework-Generator ist SwitchToHTML5. Wie andere können Sie mehrere Elemente hinzufügen, wie z ,
,
,
, und andere. SwithToHTML5 gibt Ihnen auch die Option, ob Sie Internet Explorer unterstützen möchten oder nicht, da seine Version vor IE9 HTML5 nicht nativ unterstützt.
reformiert
Sagen Sie, ich kann nicht der einzige sein, der es hasst, Formen zu erstellen, richtig? Das Erstellen von Formularen ist eine mühsame Aufgabe, zumindest für Menschen wie mich. Deshalb war Reformer hier, um den Menschen zu helfen, saubere und funktionierende Formen zu schaffen! reformed ist ein HTML5-Formularersteller, der sehr leicht ist und Ihnen nicht zu viele Probleme bereitet, wie wenn Sie das Formular von Grund auf neu erstellen.
Es gibt zwei Versionen, eine Webanwendung und eine Standalone-Desktopanwendung. Sie müssen jedoch dafür bezahlen, dass sie offline arbeitet. Nun, wenn Sie die Anwendung mögen, zeigen Sie etwas Liebe!
Modernizr
Nutzen Sie HTML5 und CSS3 mit Modernizr. Es ist eine Open-Source-JavaScript-Bibliothek, die Entwicklern dabei hilft, die besten Websites zu erstellen, die HTML5 und CSS3 enthalten.
Bei älteren Browsern gibt es keine Probleme mit Modernizr. Die Besucher sehen, was sie sehen sollten, unabhängig von der Version ihres Browsers.
52Framework
Technisch kein Generator, sondern ein herunterladbares Framework, das den Entwicklungsprozess beschleunigt. 52framework beseitigt den Ärger von HTML5 und ordnet alles direkt vor Ihnen an, wodurch die Entwicklung schneller und einfacher wird.
52framework unterstützt eine Vielzahl von Browsern, sodass die Cross-Browser-Kompatibilität weniger wichtig ist. Und die gute Nachricht für Entwickler? Es unterstützt sogar teilweise IE6!
HTML5-Editoren
Aloha-Herausgeber
Da es sich bereits um Services und Anwendungen handelt, die die Entwicklung beschleunigen, können Sie mit dem erstaunlichen Tool den Inhalt Ihrer Website mit xHTML5-kompatiblem Inhalt bearbeiten.
Aloha Editor ist ein HTML5-Editor, nicht irgendein Editor, sondern ein WYSIWYG-Editor, der den Inhalt Ihrer Website sofort ändern kann, sobald Sie die Änderungen im Editor vornehmen.
Wallaby
Jeder davon geträumt, Flash-Animationen in HTML5 zu konvertieren? Wallaby, ein Projekt von Adobe, ermöglicht die Konvertierung von Flash-Animationen und -Dateien in HTML5, wodurch die Dateien in Dreamweaver oder anderen Editoren bearbeitet werden können.
Verweise
Tauchen Sie ein in HTML5
Ein großartiges und erfreuliches Buch, in dem Sie kreativ über HTML5 lernen können. Dies ist auch eine gute Ressource, die eine neue Idee für Menschen gibt, die bereits die Funktionsweise von HTML5 kennen.
HTML5-Referenz
Ein Original-W3C-Leitfaden zu HTML5 mit Schwerpunkt auf Einfachheit und praktischen Anwendungen für Anfänger sowie detaillierten Informationen für fortgeschrittene Webentwickler.
Mehr
Im Moment gibt es eigentlich nicht viel zu sehen. Es gibt immer noch relativ wenige Tools für das HTML5-Framework und die zu verwendenden Vorlagen, wie Sie vielleicht bemerkt haben, wenn Sie die Links überprüft haben. Die meisten Funktionen für jeden Generator / Framework sind ähnlich. Möglicherweise haben Sie Tools vermisst, die Sie zur Entwicklung fantastischer HTML5-Websites verwenden. Wenn Sie also etwas teilen möchten, können Sie diese gerne in den Kommentaren posten!
Schauen Sie sich auch unsere Beiträge an, wenn Sie mehr über HTML5 erfahren möchten!
- HTML5: 15 inspirierende Experimente
- HTML5: 19 Webanwendungen
- HTML5: 48 Potenzielle Flash-Kill-Demos
- Erstellen Sie ein Ajax-basiertes HTML5 / CSS3-Kontaktformular