Vorschläge zum Erstellen von schrittweisen Webentwicklungs-Tutorials für Nettuts +

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.

Fähigkeiten

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.

Planen und eine Checkliste haben

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:

  1. Planen Sie Ihr Tutorial.
  2. Schreiben Sie Ihre Checkliste auf.
  3. Recherchieren Sie alle Codebibliotheken, Plugins und Techniken.
  4. Entscheiden Sie sich für den Funktionscode Ihres Demo-Codes.
  5. Schreiben Sie Ihren Code, testen Sie ihn und verfeinern Sie ihn, bis Sie zufrieden sind.
  6. Schreiben Sie den Tutorial-Text.
  7. Integrieren Sie Ihren Demo-Code in Ausschnitte in das Tutorial (gemäß unseren Tutorial-Richtlinien)..
  8. Listen Sie alle Mängel auf, die Ihnen bekannt sind. (Das heißt, funktioniert nicht in Internet Exploder 6.0+ usw.)
  9. Stellen Sie geeignete visuelle Elemente (Bilder, Screenshots, Animationen usw.) bereit, die nicht breiter als 600 Pixel sind.
  10. Bearbeiten Sie den Lerntext und nummerieren Sie jeden Abschnitt mit "Schritt 1", "Schritt 2" usw.
  11. Wenn Sie Bilder verwendet haben, die nicht Ihnen gehören, müssen Sie nicht nur eine Zuordnung erteilen, sondern müssen entweder implizit (z. B. CC-Lizenz für Flickr) oder die ausdrückliche Berechtigung zur Verwendung dieser Bilder besitzen. Dies schließt Bilder ein, die in Ihrem Lernprogramm und in Ihrer Demo sichtbar sind.
  12. Bereiten Sie den Quellcode zum Herunterladen vor und komprimieren Sie ihn. Enthalten Sie in derselben ZIP-Datei funktionierende Demo-Dateien.

Machen Sie es sich einfach

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:

  1. Kommen Sie auf eine Idee und senden Sie mir diese über den Formularlink auf der Seite mit den Tutorial-Richtlinien. (Verwenden Sie eine leere ZIP-Datei, da das Formular dies erfordert.) Oder wenn Sie mir zuvor eine Idee / ein Tutorial übermittelt haben, haben Sie meine NETTUTS-E-Mail-Adresse, und Sie können mich gerne direkt anrufen.
  2. Wenn Sie noch kein Tutorial für die Site geschrieben haben, gibt es einige Phasen:
    1. Das Interesse an Ihrer Idee ist kein Publikationsversprechen. Nachdem Sie eine Idee veröffentlicht haben und Interesse erfahren haben, müssen Sie Demo-Code anzeigen (auch wenn nur auf Ihrem eigenen Server)..
    2. Wenn Sie den Demo-Code verwenden und für NETTUTS geeignet sind, frage ich Sie - aber nicht -, ob Sie das Tutorial schreiben möchten, jedoch ohne Garantie für die Veröffentlichung.
    3. Beachten Sie, dass dies unfair klingt, sich aber wirklich nicht unterscheidet, als würden Sie das vollständige Tutorial im Voraus einreichen. Auf diese Weise haben Sie einige Phasen, in denen Sie Ihre Meinung ändern können, wodurch der Gesamtaufwand verringert wird. Wenn Sie Ihr Tutorial und Ihre Dateien lieber im Voraus senden möchten, ist das auch in Ordnung.
  3. Auf der anderen Seite, wenn Sie bereits ein gutes Tutorial geschrieben haben, das nur wenig Bearbeitung erfordert, bin ich viel nachsichtiger. Sie können die Idee formulieren, weiter machen und das Tutorial schreiben.

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.

Machen Sie es einfach für den Editor

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:

  1. Verwenden Sie Ihren echten Namen und Ihre E-Mail-Adresse in der Einreichung. (Sie müssen außerdem über ein PayPal-Konto verfügen, damit wir Sie bezahlen können.)
  2. Beschreiben Sie anschaulich, was Ihr Tutorial zeigt und was Ihr Demo-Code zeigt.
  3. Senden Sie Demo-Code, der funktioniert und nicht viel Setup erfordert (außer dem Hochladen einiger Dateien auf einen Server)..
  4. Schicken Sie mir keinen Demo-Code, bei dem ich meine eigenen Bilder oder etwas anderes hinzufügen muss, vor allem, wenn Sie sich nicht die Mühe machen, es mir vorher zu sagen. Mein Wunsch, Ihnen zu helfen, kollidiert mit dem Zeitmangel.
  5. Reduzieren Sie insgesamt die Zeit, die ich für die Einrichtung Ihres Demo-Codes aufwenden muss, um ihn zu bewerten. Je mehr Aufwand es erfordert, desto eher wird es abgelehnt. (Sie können jederzeit mit einer Demo auf einer Ihrer Websites beginnen, obwohl Sie mir eventuell Dateien zur Verfügung stellen müssen.)

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

Beschreiben Sie jeden Schritt gründlich

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?

Ton und Schreibstil

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

Richtlinien und Formatierung

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.

Entscheiden Sie sich für Ihr Thema

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.

Brainstorming

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:

  1. Brainstorming einige Anwendungsideen.
  2. Recherchieren Sie die erforderlichen Bibliotheken, Plugins, Funktionen, Einschränkungen usw.
  3. Beschreiben Sie die gewünschten Funktionen, skizzieren Sie die Browser-Bildschirme. (Denken Sie daran, Sie können in Ihrem Lernprogramm Momentaufnahmen der fertigen Modelle verwenden.)
  4. Schreiben Sie den Code, testen Sie ihn und verfeinern Sie ihn. (Testen Sie in Browsershots, beschrieben im nächsten Abschnitt.)
  5. Schreiben Sie das Tutorial in Ihren Code und integrieren Sie Schnipsel in leicht verdauliche Abschnitte, die gemäß den Tutorial-Richtlinien formatiert sind.
  6. Bearbeiten Sie ggf. das Tutorial. Versetzen Sie sich in den Kopf eines Lesers. Wenn sie Ihr Tutorial konsultieren, weil der Titel ihre Aufmerksamkeit erregt hat, verstehen sie Ihren Code wahrscheinlich nicht ohne eine richtige Erklärung. Zeigen Sie nicht nur den Codeblock und gehen Sie davon aus, dass der Leser dies verstehen sollte. Ansonsten schreiben Sie Code, kein Tutorial.
  7. Fügen Sie visuelle Elemente (Screenshots usw.) hinzu. Siehe den Abschnitt "Visuals" unten.

Demo-Code und Cross-Browser-Probleme

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.

Visuals

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:

  1. Relevantes Bild.
  2. Screenshots Ihrer Anwendung in verschiedenen Verwendungszuständen.
  3. Screencast Ihrer verwendeten Anwendung oder etwas, das für Ihr Tutorial relevant ist.
  4. Ein Diagramm oder eine Mindmap, die einige Informationen über Ihre Anwendung, deren Verwendung oder deren Entwurf und Erstellung enthält.
  5. Relevante Videoinhalte, vielleicht sogar ein Screencast Ihres verwendeten Demo-Codes.

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.

Zitieren Sie Ihre Quellen

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.

Artikel

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.

Antwort

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.

Fazit

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.