Dieser Artikel beschreibt einen Ansatz zum Erstellen von schrittweisen Lernprogrammen. Während der Schwerpunkt hier auf NETTUTS liegt, kann ein Großteil des Ansatzes für jeden Standort angewendet werden. Wenn Sie beabsichtigen, Tutorials für NETTUTS zu schreiben, sollten Sie diesen Artikel lesen / durchsuchen. Bei PSDTUTS gibt es auch einen parallelen Artikel, den der Herausgeber Sean Hodge geschrieben hat, der diesen inspiriert hat.
Bei NETTUTS handelt es sich um Tutorials für die Webentwicklung. Dies bedeutet Web-Browser-basierte Codierung, die zumindest Kenntnisse in HTML, CSS und Web-Codiersprache erfordert. Alles andere hängt davon ab, was Ihr Tutorial abdeckt. Dies können CMS- / Blog-Plattformcodierungen, PHP, JavaScript-Bibliotheken, CSS-Frameworks, Datenbanken usw. sein.
Sie haben wahrscheinlich bemerkt, dass die beliebtesten Tutorials hier auf Web-Entwickler mit einem Design-y-Element ausgerichtet sind. Daher kann es hilfreich sein zu wissen, wie Grafiksoftware wie Photoshop oder Fireworks verwendet wird. Zumindest sollten Sie wissen, wie Sie einen Screenshot erhalten, da dies das Minimum ist, das Sie in Ihr Tutorial für visuelle Elemente aufnehmen möchten.
Sie müssen nicht wirklich formal werden, aber Sie sollten Ihr Tutorial ausarbeiten und eine Checkliste anwenden. Hier ist eine vorgeschlagene Checkliste, die Sie jedoch nach Belieben ändern können:
Es gibt mehrere Möglichkeiten, wie Sie NETTUTS veröffentlichen können. Eine Möglichkeit besteht darin, Ihre Demo-Dateien, den Quellcode, den Tutorial-Text und die Bilder (alle zusammen gepackt) über den Formularlink auf der Seite mit den Tutorial-Richtlinien zu senden. Auf diese Weise erhalten Sie viel früher eine Antwort, aber es ist eine Menge Arbeit für Sie, wenn Sie nicht für NETTUTS geeignet sind. (Dies wird dennoch empfohlen, wenn Sie noch nie ein Tutorial eingereicht haben.)
Machen Sie es sich leichter. Anstatt zuerst Demo-Code und ein Tutorial zu schreiben, schlagen Sie zuerst eine Idee auf. Dies ist tatsächlich empfehlenswert, wenn Sie zuvor ein vollständiges Tutorial gesendet haben, auch wenn es nicht veröffentlicht wurde:
Wenn eine Demo Potenzial aufweist, das Tutorial jedoch Arbeit braucht, versuche ich in jedem Fall, auf begrenzter Basis mit Ihnen zusammenzuarbeiten, um den Text zu verbessern. Ich kann es jedoch nicht für Sie schreiben. Eine Reihe von Code-Snippets und Text, der nur funktional beschreibt, was passiert, ist kein Tutorial.
Wenn die Leserschaft von NETTUTS wächst, habe ich weniger Zeit, um zu beurteilen, ob ein Tutorial für NETTUTS geeignet ist. Machen Sie es mir einfach, lassen Sie mich Ihr Tutorial und Ihre Demo verwenden:
Versetzen Sie sich in meine Stelle und überlegen Sie, warum ich Ihr Tutorial annehmen möchte. Stellen Sie mir keine Serie vor, wenn Sie noch kein Tutorial angenommen und veröffentlicht haben. Dasselbe gilt für Cross-Site-Serien (d. H. Teil 1 für PSDTUTS, Teil 2 für NETTUTS)..
Letztendlich ist das Tutorial für die Leser der Site gedacht, nicht für mich. Wenn der Titel des Tutorials sie anzieht und sie das Tutorial lesen, nachdem sie sich die Demo oder sogar das erste visuelle Bild (Bild, Diagramm usw.) angesehen haben, möchten sie es lernen. Sie müssen nicht jede Codezeile von Hand halten und so beschreiben, als hätte ein Leser noch nie zuvor codiert, aber Sie müssen die Codezeilen beschreiben, die sich speziell auf Bibliotheken, Plugins oder spezielle Techniken beziehen, die Sie verwenden.
Das bisher größte Problem bei Einsendungen: Verwenden einer Codebibliothek oder eines Plugins, Anzeigen eines Code-Snippets, ohne die relevanten Codezeilen zu beschreiben. Zu sagen: "Hier ist der Code für X", reicht nicht aus. Warum sollte sich ein Leser mit Ihrem Lernprogramm beschäftigen, wenn Sie nicht die Vorgehensweise verraten?
Bevor Sie den eigentlichen Tutorial-Text einreichen, lesen Sie hier einige der Collis-Tutorials als Ausgangspunkt. Obwohl es gut ist, einen eigenen Stil zu haben, müssen Sie auch daran denken, dass die meisten Website-Leser über einige (oder viele) Erfahrungen mit Webcodierung verfügen. Sprich mit ihnen, nicht mit ihnen. (Ich bin ein ausführlicher Typ, der von einem College-Lehrassistenten / Laborleiter für Nicht-Computer-Studenten stammt, die an einem obligatorischen Computerkurs teilnehmen.)
Es gibt bereits eine Seite mit Tutorial-Richtlinien, die einen Link zu einer leeren Tutorial-ZIP-Datei enthält. Konsultieren Sie diese Seite und verwenden Sie diese ZIP-Vorlage.
Wissen Sie wirklich, was Sie wollen? Ich habe hier niemanden ausgesucht, aber ein paar Einsendungen erweckten den Eindruck, dass die Person einfach nur die Feder in ihrer Mütze wollte, auf einer Site wie NETTUTS veröffentlicht worden zu sein. Ihr Tutorial und die Beschreibung des Demo-Codes waren vage, und trotz meiner Nicken, was sie probieren sollten, beißen sie nicht.
Eine der besten Methoden zum Planen und Erstellen eines Lernprogramms besteht darin, Ihre Ideen zu skizzieren und die Funktionen sowie das, was Sie demonstrieren, zu skizzieren. Da die NETTUTS-Lernprogramme codegesteuert sind, müssen Sie zusätzlich funktionalen Code vorlegen. Hier ist mein bevorzugter Prozess zum Erstellen eines Tutorials. Vergessen Sie jedoch nicht die zuvor erwähnte Checkliste:
Es wäre zwar schön, dass Ihre Demo in allen Browsern funktioniert, aber das ist nicht immer möglich. Einige Codebibliotheken - z. B. jQuery - unterstützen nur ältere Browser nicht. Zumindest sollte Ihr Code für die von den verwendeten Bibliotheken unterstützten Browser funktionieren.
Trotz der Proteste einiger Kommentare von NETTUTS-Lesern ist Firefox 3 zum Zeitpunkt der Veröffentlichung nicht weit verbreitet. Laut einigen Twitter- und Plurk-Nutzern ist es auch fehlerhaft und immer noch ein Speicherhammel. Wir müssen die Browserkompatibilität von Fall zu Fall in Betracht ziehen, aber versuchen, die neuesten stabilen Browser abzudecken. Geben Sie an, ob Ihr Code nicht irgendwo funktioniert und warum dies so ist.
Ein Tool, das Sie beim Cross-Browser-Testen unterstützt, ist die Website Browsershots, mit der Sie Ihren Code auf einfache Weise in mehreren (virtuellen) Browsern für Linux, Windows, Mac OS und BSD testen können.
Im Gegensatz zu unserer Schwesterseite PSDTUTS ist es bei Web-Entwickler-Tutorials nicht immer einfach, sexy Bilder zu entwickeln. Dennoch machen Visuals ein Tutorial interessanter und helfen, Konzepte zu demonstrieren. Daher sind Visuals in Ihrem Tutorial ein Muss, und Sie müssen möglicherweise kreativ werden. Hier sind einige Optionen:
Beziehen Sie Visuals so oft und früh wie möglich in Ihr Tutorial ein. Viele der Tutorials, die ich bisher abgelehnt hatte, hatten keinerlei Bilder. Es ist nicht schwer, eine Momentaufnahme Ihrer Anwendung oder eines in Photoshop produzierten Modellbildschirms oder was auch immer relevant ist, aufzunehmen. Sie brauchen nicht Dutzende von visuellen Darstellungen, aber auch ein paar sorgfältig ausgewählte Bildschirmaufnahmen können ausreichen.
Hinweis: Wenn Sie Visuals aus anderen Quellen verwenden - entweder in Ihrem Lerntext oder in Ihrer Demo -, müssen Sie explizit oder implizit berechtigt sein und die Quelle (n) angeben. Beispielsweise können Sie Bilder aus einer Quelle wie Flickr unter einer geeigneten kommerziellen CC-Lizenz verwenden.
Stellen Sie sicher, dass Sie nicht nur Bilder gutschreiben, sondern auch alle Codebibliotheken, Quellen usw. gutschreiben. Dies bedeutet nicht, dass Sie den Code eines anderen Benutzers als Ihren eigenen darstellen können, sondern eher, wenn Sie ein umfangreiches Lernprogramm haben und eine Technik verwenden, die ursprünglich von einem anderen Benutzer vorgestellt wurde ihnen gutschreiben.
Zusätzlich zu den Tutorials veröffentlichen wir pro Woche einen Artikel zur Webentwicklung. Die Artikelbeiträge erfolgen einmal alle zwei Wochen. Resource-Artikel sind gute Kandidaten, wie zum Beispiel mein CSS-Grid-Frameworks-Artikel - obwohl Ihr Artikel nicht so lang sein muss.
Meine Präferenz ist die Annahme von Pitches für Artikel von Personen, die erfahrene Schriftsteller / Blogger sind, obwohl Sie kein Tutorial geschrieben haben müssen, da der Stil anders ist.
Ich versuche, so schnell wie möglich auf alle zu reagieren, obwohl in einigen Wochen das Einreichungsvolumen so hoch ist, dass ich leicht den Überblick verlieren kann. Seien Sie versichert, ich werde antworten, obwohl Sie mich stoßen können, wenn Sie nach dem Einreichen einer Idee oder eines Tutorials innerhalb von ein paar Wochen nichts gehört haben.
Ich freue mich auf weitere Ideen und Beiträge von NETTUTS-Lesern. Wenn Sie nicht wissen, wo Sie anfangen sollen, sind die Tutorials von Collis hier bei NETTUTS und bei PSDTUTS ein großartiges Modell, sowohl in Bezug auf Bildschirmausschnitte, Codierung als auch den Schreibstil.